/*** Bei Verwendung dieses css-Styles dürfen keine Tabellenüberschriften mit »!« formatiert werden Tabellenlayout: 2-Spaltig, jede 2. Zeile als Überschrift ***/ /*** Formatierungen für Alle ***/ /* a { color: #1b599b; } a:visited { color: #636; } */ .padding10 td { padding: 10px !important; } ul { margin-bottom: 0.3em; list-style: none; margin-top: 3px; } dl { /* padding-top: 1em !important; padding-bottom: 0px !important; */ margin-bottom: 0px !important; break-inside: avoid; margin-top: 1em; } dt { margin: 0; font-weight: bold; margin-bottom: 0em; } dd { margin-top: 0.3em; margin-bottom: 0em; margin-left: 0; font-style: italic; } .startbox li:before { font-family: 'Font Awesome 5 Pro'; content: "\f0a9"; font-size: 12px; color: rgb(231, 76, 60); position: absolute; left: 0px; margin-right: 1em; font-weight: 900; } .greenalert li:before { font-family: 'Font Awesome 5 Pro'; content: "\f071"; font-size: 12px; color: rgb(2,90,0);; position: absolute; left: 0px; margin-right: 1em; font-weight: 400; } .startbox-head.greenalert li:before { font-size: 2em; } .startbox-head.greenalert li { padding-left: 2.75em; } .startbox-head.greenalert { padding: 1em; margin-top: 0px; } li { padding-left: 20px; display: block; position: relative; } .new li:before { font-family: 'Font Awesome 5 Pro'; content: "\f013"; font-size: 0.7em; color: rgb(2,90,0);; position: absolute; left: 0px; top: 4px; margin-right: 1em; font-weight: 300; } .newtext { position: absolute; left: -0.3em; top: -0.65em; font-size: 0.5em; color: rgb(2,90,0); display: inline-block; margin-right: -2em; } .spgrid { background-color:white; color: #222; margin: 1em 0em; width: 100%; } .spgrid td { background-color: #f8f9fa; padding: 0.2em 0.1em; line-height:1.4; } .spgrid .Leerzeile { border-left: 0; border-right: 0; background: white; } .spgrid tr { display: grid; grid-template-columns: 50% 50%; width: 100%; } .spgrid .colspan2 { border-right: 0!important; } .startbox-flex { display: flex; flex-flow: wrap; } .startbox { display: block; background: #fff; /* border-top: 1px solid #a2a9b1; border-right: 1px solid #a2a9b1; border-left: 1px solid #a2a9b1; */ /* margin: 10px 5px 0px 5px; */ box-shadow: 0 0 0 1px rgba(0,0,0,0.05); border-radius: 3px 3px 0px 0px; margin: 15px; flex-grow: 2; flex-shrink: 2; flex-basis: calc((100% - 90px)/3); } .startbox.breit { min-width: 500px; flex-grow: 2; flex-shrink: 0; flex-basis: calc(((100% - 90px) / 3) * 2 + 30px); } .startbox-body-breit { column-count: 2; column-gap: calc( 2em + 20px); column-rule: thin solid rgba(0,0,0,0.1); padding: 1em; } .startbox-head { background-color: #eaecf0; min-height: 3em; padding: 1em; } .startbox-body { padding: 1em; } .startbox-body-breit-col { width: 45%; } .changelog { column-count: 3; column-gap: calc( 2em + 20px); column-rule: thin solid rgba(0,0,0,0.1); padding: 1em; } /*** Ende Formatierungen für Alle ***/ /*** Formatierungen Standard (=Monitor) ***/ table { border: 0; } .startbox { margin: 15px; min-width: 300px; } .wikitable2 tr:nth-child(2n) { background: green!important; } .spgrid tr > td:nth-child(1) { padding: 15px; grid-column: 1 / 2; grid-row: 1; background-color: #eaecf0; /* border-top: 1px solid #a2a9b1; border-right: 1px solid #a2a9b1; border-left: 1px solid #a2a9b1; */ margin: 10px 5px 0px 5px; box-shadow: 0 0 0 1px rgba(0,0,0,0.05); border-radius: 3px 3px 0px 0px; } .spgrid tr > td:nth-child(2) { padding: 15px; grid-column: 2 / 3; grid-row: 1; background-color: #eaecf0; /* border-top: 1px solid #a2a9b1; border-right: 1px solid #a2a9b1; */ margin: 10px 5px 0px 5px; box-shadow: 0 0 0 1px rgba(0,0,0,0.05); border-radius: 3px; } .spgrid tr > td:nth-child(3) { padding: 15px; grid-column: 1 / 2; grid-row: 2; /* background-color: #f8f9fa; border-top: 1px solid #a2a9b1; border-right: 1px solid #a2a9b1; border-left: 1px solid #a2a9b1; */ border-spacing: 5px; margin: 0px 5px 10px 5px; box-shadow: 0 0 0 1px rgba(0,0,0,0.05); border-radius: 0px 0px 3px 3px; background: #fff; } .spgrid tr > td:nth-child(4) { padding: 15px; grid-column: 2 / 3; grid-row: 2; /* background-color: #f8f9fa; border-top: 1px solid #a2a9b1; border-right: 1px solid #a2a9b1; */ border-spacing: 5px; margin: 0px 5px 10px 5px; box-shadow: 0 0 0 1px rgba(0,0,0,0.05); border-radius: 0px 0px 3px 3px; background: #fff; } .spgrid tr:last-child > td:nth-child(3) { padding: 15px; grid-column: 1 / 2; grid-row: 2; background-color: #f8f9fa; border-top: 1px solid #a2a9b1; border-right: 1px solid #a2a9b1; border-bottom: 1px solid #a2a9b1; border-left: 1px solid #a2a9b1; } .spgrid tr:last-child > td:nth-child(4) { padding: 15px; grid-column: 2 / 3; grid-row: 2; background-color: #f8f9fa; border-top: 1px solid #a2a9b1; border-bottom: 1px solid #a2a9b1; border-right: 1px solid #a2a9b1; } h4 { font-size:16px; font-weight: bolder; } h5 { margin-bottom: 0; margin-top: 16px; font-weight: bold; font-size: 16px; } .startbox-body h5:first-child { margin-top: 0px; } .toctitle { display: none; } .toc { border: 0; background: unset; padding-top: 0px; } .tocnumber { display: none; } /*** Ende Formatierungen Standard ***/ /*** Formatierungen für Breakpoint md ***/ @media (max-width:768px) { .startbox { margin: 15px 0px; min-width: 100%; } .startbox.breit { margin: 15px 0px; width: 100%; min-width: 0; } .startbox-body-breit { column-count: 1; } } /*** Ende Formatierungen Breakpoint md ***/ /*** Formatierungen für Breakpoint xs ***/ @media (max-width:576px) { table { border: 0; } .spgrid tr > td:nth-child(1) { padding: 15px; grid-column: 1 / 3; grid-row: 1; background-color: #eaecf0; border: 1px solid #a2a9b1; border-bottom: 0; margin-top: 5px; } .spgrid tr > td:nth-child(2) { padding: 15px; grid-column: 1 / 3; grid-row: 3; background-color: #eaecf0; border: 1px solid #a2a9b1; border-bottom: 0; margin-top: 5px; } .spgrid tr > td:nth-child(3), .spgrid tr:last-child > td:nth-child(3) { padding-top: 15px; grid-column: 1 / 3; grid-row: 2; background-color: #f8f9fa; border: 1px solid #a2a9b1; } .spgrid tr > td:nth-child(4), .spgrid tr:last-child > td:nth-child(4) { padding-top: 15px; grid-column: 1 / 3; grid-row: 4; background-color: #f8f9fa; border: 1px solid #a2a9b1; } .spgrid .colspan2 { border-right: 1px solid #a2a9b1!important; } .spgrid .frei { display: none; } .spgrid .noborderbottom { border-bottom: 0!important; } .spgrid .nobordertop { border-top: 0!important; } } /*** Ende Formatierungen für Breakpoint xs ***/
Vorlage:Styles-Startseiten.css
Aus Securepoint Wiki