KKeine Bearbeitungszusammenfassung |
|||
Zeile 1: | Zeile 1: | ||
{{DISPLAYTITLE: | {{DISPLAYTITLE:Common.css}}{{#vardefinse:headerIcon|fal fa-fw fa-wrench}} | ||
/* CSS an dieser Stelle wirkt sich auf alle Skins aus */ | |||
/*** Browserweiche für MS ***/ | |||
.ms-only { | |||
/* moderne Browser sehen das nicht !*/ | |||
; | display: none; | ||
} | |||
-- | _:-ms-lang(x), _:-webkit-full-screen, .ms-only { | ||
/* Edge */ | |||
; | display: block; | ||
color:red; | |||
} | |||
---- | _:-ms-lang(x), .ms-only { | ||
/* IE10 + IE11 */ | |||
display: block; | |||
color: white; | |||
background: red; | |||
border: 5px solid green; | |||
line-height: 2em; | |||
width: 100%; | |||
padding: 10px; | |||
font-size: 2em; | |||
} | |||
/*** Ende Browserweiche ***/ | |||
/*** Formatierungen für Alle ***/ | |||
.toc { | |||
display: block; | |||
/* max-width: 48%; */ | |||
float: right; | |||
margin-left: 3%; | |||
font-size:95%; | |||
line-height: 125%; | |||
} | |||
:root { | |||
--me-width: 32%; | |||
} | |||
.glyphicons { | |||
display: inline-block; | |||
/*opacity: 1;*/ | |||
} | |||
body { | |||
font-family: Helvetica,Verdana,Arial,sans-serif; | |||
font-size: 13px; | |||
color: black; | |||
background-color: #b40001; | |||
text-align: justify; | |||
background-position: top center; | |||
background-repeat: no-repeat; | |||
line-height: 18px; | |||
} | |||
code { | |||
color: black; | |||
display: inline-block; | |||
padding: 2px; | |||
} | |||
img { | |||
display: inline-block; | |||
} | |||
.flexelement.items_n { | |||
width: var(--me-width); | |||
align-items: stretch; | |||
border: 0; | |||
padding: 0px; | |||
background-color: white; | |||
font-size: 110%; | |||
text-align: left; | |||
/*overflow: hidden;*/ | |||
margin: 2px 10px 1px 0px; | |||
flex-wrap: wrap; | |||
} | |||
.de { | |||
{{#vardefine: sp-wiki-lang | de }} | |||
} | |||
.en { | |||
{{#vardefine: sp-wiki-lang | en }} | |||
} | |||
.language { | |||
display: none; | |||
} | |||
= | h1 i, h2 i, h3 i, h4 i { | ||
color: unset; | |||
font-size: unset !important; | |||
position: unset; | |||
top: unset; | |||
margin-right: unset; | |||
} | |||
a:visited { | |||
color: #F1948A; | |||
} | |||
.tile-icon { | |||
/* Icon */ | |||
position: absolute; | |||
width: 56.25px; | |||
height: 56.25px; | |||
line-height: 25px; | |||
font-size: 130%; | |||
top: 75%; | |||
left: 50%; | |||
transform: translate(-50%, -50%) | |||
} | |||
/*** Ende Formatierungen für Alle ***/ | |||
/*** Formatierungen Standard (=Monitor) ***/ | |||
caption { | |||
/* Tabellenbeschriftung, die mit |+ formatiert werden, werden oberhalb der Tabelle angezeigt. | |||
Der Toggle erscheint direkt daneben */ | |||
caption-side: top; | |||
caption-side: top-outside; | |||
width: 800px; /* Damit wird eine ausreichende Breite für MS-Browser formatiert. */ | |||
width: max-content; /* Alle Anderen können vernünftiges css */ | |||
} | |||
.spgridtr { | |||
background-color:white; | |||
color: #222; | |||
margin: 0em 0; | |||
border: 0; | |||
border-collapse: collapse; | |||
} | |||
.spgridtr th { | |||
background-color: #eaecf0; | |||
border: 1px solid #a2a9b1; | |||
} | |||
.spgridtr td { | |||
background-color: #f8f9fa; | |||
border: 1px solid #a2a9b1; | |||
padding: 0.2em 0.1em; | |||
line-height:1.4; | |||
} | |||
.spgridtr .Leerzeile { | |||
border-left: 0; | |||
border-right: 0; | |||
background: white; | |||
} | |||
.bild2 { | |||
display: inline-block; | |||
min-width: max-content; | |||
} | |||
/*** Ende Formatierungen Standard ***/ | |||
/*** Formatierung Breakpoint sm ***/ | |||
@media (max-width: 576px) { | |||
.spgridtr { | |||
background-color:white; | |||
color: #222; | |||
margin: 0em 0; | |||
border: 0; | |||
width: 100%; | |||
} | |||
.spgridtr td { | |||
background-color: #f8f9fa; | |||
border: 1px solid #a2a9b1; | |||
padding: 0.2em 0.1em; | |||
line-height:1.4; | |||
} | |||
.spgridtr > * > tr > th { | |||
float: left; | |||
padding-left: 1px; | |||
padding-right: 0.4em; | |||
background-color: #eaecf0; | |||
border: 1px solid #a2a9b1; | |||
padding: 0.2em 0.1em; | |||
line-height:1.4; | |||
width: calc(95% / (var(--me-nn) - 1)); | |||
} | |||
.spgridtr { | |||
border-collapse: separate; | |||
border-spacing: 0.3em; | |||
} | |||
.spgridtr > * > tr > th:nth-child(1) { | |||
display: block; | |||
width:95%; | |||
text-align: left; | |||
padding-left: 1px; | |||
padding-right: 0.4em; | |||
} | |||
.spgridtr > * > tr > th:nth-child(2) { | |||
text-align:left; | |||
} | |||
.spgridtr .Leerzeile { | |||
border-left: 0; | |||
border-right: 0; | |||
background: white; | |||
} | |||
.spgridtr tbody > tr { | |||
display: grid; | |||
grid-template-columns: var(--me-width-2,calc((95% - var(--me-width-3,0%) - var(--me-width-4,0%)) / var(--me-n,4))) var(--me-width-3,calc((95% - var(--me-width-2,0%) - var(--me-width-4,0%)) / var(--me-n,4))) var(--me-width-4,calc((100% - var(--me-width-2,0%) - var(--me-width-3,0%)) / var(--Spalten,var(--me-n,3)))); | |||
width: 100%; | |||
} | |||
.spgridtr tbody > tr:first-child { | |||
display: table-row; | |||
width: 100%; | |||
} | |||
.spgridtr td:nth-child(1) { | |||
grid-column: 1 / var(--me-nn,3); | |||
grid-row: 2; | |||
background-color: #eaecf0; | |||
border: 1px solid #a2a9b1; | |||
margin-top: 5px; | |||
text-align: left; | |||
} | |||
.spgridtr tr > td:nth-child(2) { | |||
grid-column: 1; | |||
grid-row: 3; | |||
background-color: #f8f9fa; | |||
border: 1px solid #a2a9b1; | |||
text-align: center; | |||
vertical-align: middle; | |||
} | |||
.spgridtr tr > td:nth-child(3) { | |||
grid-column: 2; | |||
grid-row: 3; | |||
background-color: #f8f9fa; | |||
border: 1px solid #a2a9b1; | |||
} | |||
.spgridtr tr > td:nth-child(4) { | |||
grid-column: 3; | |||
grid-row: 3; | |||
background-color: #f8f9fa; | |||
border: 1px solid #a2a9b1; | |||
} | |||
.sptable3 tbody > tr { | |||
display: grid; | |||
grid-template-columns: var(--me-width-2,15%) calc(100% - var(--me-width-2,15%)); | |||
width: 100%; | |||
} | |||
caption { | |||
/* Tabellenbeschriftung, die mit |+ formatiert werden, werden oberhalb der Tabelle angezeigt. | |||
Der Toggle erscheint direkt daneben */ | |||
caption-side: top; | |||
caption-side: top-outside; | |||
width: auto; | |||
display: run-in; /* Greetings to IE */ | |||
display: inline-grid; | |||
} | |||
} /*** Ende Formatierungen für Breakpoint xs ***/ |
Version vom 8. Januar 2020, 13:01 Uhr
{{DISPLAYTITLE:Common.css}}{{#vardefinse:headerIcon|fal fa-fw fa-wrench}} /* CSS an dieser Stelle wirkt sich auf alle Skins aus */ /*** Browserweiche für MS ***/ .ms-only { /* moderne Browser sehen das nicht !*/ display: none; } _:-ms-lang(x), _:-webkit-full-screen, .ms-only { /* Edge */ display: block; color:red; } _:-ms-lang(x), .ms-only { /* IE10 + IE11 */ display: block; color: white; background: red; border: 5px solid green; line-height: 2em; width: 100%; padding: 10px; font-size: 2em; } /*** Ende Browserweiche ***/ /*** Formatierungen für Alle ***/ .toc { display: block; /* max-width: 48%; */ float: right; margin-left: 3%; font-size:95%; line-height: 125%; } :root { --me-width: 32%; } .glyphicons { display: inline-block; /*opacity: 1;*/ } body { font-family: Helvetica,Verdana,Arial,sans-serif; font-size: 13px; color: black; background-color: #b40001; text-align: justify; background-position: top center; background-repeat: no-repeat; line-height: 18px; } code { color: black; display: inline-block; padding: 2px; } img { display: inline-block; } .flexelement.items_n { width: var(--me-width); align-items: stretch; border: 0; padding: 0px; background-color: white; font-size: 110%; text-align: left; /*overflow: hidden;*/ margin: 2px 10px 1px 0px; flex-wrap: wrap; } .de { {{#vardefine: sp-wiki-lang | de }} } .en { {{#vardefine: sp-wiki-lang | en }} } .language { display: none; } h1 i, h2 i, h3 i, h4 i { color: unset; font-size: unset !important; position: unset; top: unset; margin-right: unset; } a:visited { color: #F1948A; } .tile-icon { /* Icon */ position: absolute; width: 56.25px; height: 56.25px; line-height: 25px; font-size: 130%; top: 75%; left: 50%; transform: translate(-50%, -50%) } /*** Ende Formatierungen für Alle ***/ /*** Formatierungen Standard (=Monitor) ***/ caption { /* Tabellenbeschriftung, die mit |+ formatiert werden, werden oberhalb der Tabelle angezeigt. Der Toggle erscheint direkt daneben */ caption-side: top; caption-side: top-outside; width: 800px; /* Damit wird eine ausreichende Breite für MS-Browser formatiert. */ width: max-content; /* Alle Anderen können vernünftiges css */ } .spgridtr { background-color:white; color: #222; margin: 0em 0; border: 0; border-collapse: collapse; } .spgridtr th { background-color: #eaecf0; border: 1px solid #a2a9b1; } .spgridtr td { background-color: #f8f9fa; border: 1px solid #a2a9b1; padding: 0.2em 0.1em; line-height:1.4; } .spgridtr .Leerzeile { border-left: 0; border-right: 0; background: white; } .bild2 { display: inline-block; min-width: max-content; } /*** Ende Formatierungen Standard ***/ /*** Formatierung Breakpoint sm ***/ @media (max-width: 576px) { .spgridtr { background-color:white; color: #222; margin: 0em 0; border: 0; width: 100%; } .spgridtr td { background-color: #f8f9fa; border: 1px solid #a2a9b1; padding: 0.2em 0.1em; line-height:1.4; } .spgridtr > * > tr > th { float: left; padding-left: 1px; padding-right: 0.4em; background-color: #eaecf0; border: 1px solid #a2a9b1; padding: 0.2em 0.1em; line-height:1.4; width: calc(95% / (var(--me-nn) - 1)); } .spgridtr { border-collapse: separate; border-spacing: 0.3em; } .spgridtr > * > tr > th:nth-child(1) { display: block; width:95%; text-align: left; padding-left: 1px; padding-right: 0.4em; } .spgridtr > * > tr > th:nth-child(2) { text-align:left; } .spgridtr .Leerzeile { border-left: 0; border-right: 0; background: white; } .spgridtr tbody > tr { display: grid; grid-template-columns: var(--me-width-2,calc((95% - var(--me-width-3,0%) - var(--me-width-4,0%)) / var(--me-n,4))) var(--me-width-3,calc((95% - var(--me-width-2,0%) - var(--me-width-4,0%)) / var(--me-n,4))) var(--me-width-4,calc((100% - var(--me-width-2,0%) - var(--me-width-3,0%)) / var(--Spalten,var(--me-n,3)))); width: 100%; } .spgridtr tbody > tr:first-child { display: table-row; width: 100%; } .spgridtr td:nth-child(1) { grid-column: 1 / var(--me-nn,3); grid-row: 2; background-color: #eaecf0; border: 1px solid #a2a9b1; margin-top: 5px; text-align: left; } .spgridtr tr > td:nth-child(2) { grid-column: 1; grid-row: 3; background-color: #f8f9fa; border: 1px solid #a2a9b1; text-align: center; vertical-align: middle; } .spgridtr tr > td:nth-child(3) { grid-column: 2; grid-row: 3; background-color: #f8f9fa; border: 1px solid #a2a9b1; } .spgridtr tr > td:nth-child(4) { grid-column: 3; grid-row: 3; background-color: #f8f9fa; border: 1px solid #a2a9b1; } .sptable3 tbody > tr { display: grid; grid-template-columns: var(--me-width-2,15%) calc(100% - var(--me-width-2,15%)); width: 100%; } caption { /* Tabellenbeschriftung, die mit |+ formatiert werden, werden oberhalb der Tabelle angezeigt. Der Toggle erscheint direkt daneben */ caption-side: top; caption-side: top-outside; width: auto; display: run-in; /* Greetings to IE */ display: inline-grid; } } /*** Ende Formatierungen für Breakpoint xs ***/