/*** 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