/*** Tabellenlayout: 2-Spaltig, jede 2. Zeile als Überschrift ***/
/*** Formatierungen für Alle ***/
.startbox-head > :first-child {
position:absolute;
}
.startbox-head > h4 + .end {
text-align: right;
width: 100%;
}
/* 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: 16px;
font-style: italic;
color: rgba(0,0,0,0.9);
text-align: left;
}
.noitalic dd {
font-style: unset;
}
.startbox ul > li:before {
font-family: 'Font Awesome 6 Pro';
content: "\f0a9";
font-size: 12px;
color: rgb(231, 76, 60);
/* position: absolute; */
left: -1.4em;
margin-right: -1.3em;
font-weight: 900;
position: inherit;
}
.startbox ul li {
padding-left: 1.5em;
display: flow-root;
position: relative;
left: 0px;
}
.startbox ul > * > ul {
margin-left: -0.25em;
}
.greenalert li:before {
font-family: 'Font Awesome 6 Pro';
content: "\f071";
font-size: 12px;
color: rgb(2,90,0);;
position: absolute;
left: 1.5em;
margin-right: 1em;
font-weight: 400;
top: 2.25em
}
.startbox-head li {
list-style: none;
}
.startbox-head.greenalert li:before {
font-size: 2em;
}
.startbox-head.greenalert li {
padding-left: 2.75em;
}
.startbox-head.greenalert {
padding: 1em;
margin-top: 0px;
}
/* .startbox-body-breit li {
padding-left: 20px;
display: block;
position: relative;
}
*/
/****** Kann wieder raus, wenn in scss _position_ entfernt ******/
.angel li::before {
position: unset;
}
.mw-collapsible .mw-collapsible-toggle-default::after {
content: "";
}
/***** *****/
.new li:before {
font-family: 'Font Awesome 6 Pro';
content: "\f013";
font-size: 0.7em;
color: rgb(2,90,0);
/* position: absolute; */
left: 0px;
top: 4px;
margin-right: 1em;
font-weight: 300;
}
.new.star li:before {
font-family: 'Font Awesome 6 Pro';
content: "\f005";
font-size: 0.7em;
color: #468847;
top: unset;
font-weight: 900;
}
.new li.edit:before {
font-family: 'Font Awesome 6 Pro';
content: "\f040";
font-size: 0.7em;
color: #f0ad4e;
position: absolute;
left: 0px;
top: 4px;
margin-right: 1em;
font-weight: 300;
}
.new .gelb li:before {
color: #f0ad4e;
}
.newtext {
position: absolute;
left: -2em;
top: -0.65em;
width: 5em;
text-align: center;
font-size: 0.5em;
color: rgb(2,90,0);
display: inline-block;
margin-right: -2em;
}
.new .startbox-head [class*=fa-] {
font-size: 1.5em;
padding: 0 0.5em;
}
.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 {
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;
display: flex;
justify-content:space-between;
}
.startbox-head .spc__circle-big {
display: inline-flex;
}
.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;
}
.startbox-body .Hinweis-Container.Hinweis-Container__einblenden {
display: contents;
}
.Hinweis-Container--Text-bordered {
display: inline-block;
padding: 0px 3px;
}
.mw-headline {
display: inline-block;
}
/*** Ende Formatierungen für Alle ***/
/*** Formatierungen Standard (=Monitor) ***/
@media (min-width:769px) {
table { border: 0; }
.startbox {
margin: 15px;
min-width: 300px;
}
.startbox-flex {
display: flex;
flex-flow: wrap;
}
.startbox-changelog {
width: 830px;
}
.startbox-flex.max-content {
width: unset;
max-width: max-content;
min-width: 830px;
}
.startbox-body .startbox-flex {
width: 768px;
}
.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;
color: rgba(0,0,0,0.7);
}
h5 {
margin-bottom: 0;
margin-top: 16px;
font-weight: bold;
font-size: 16px;
color: rgba(0,0,0,0.7);
}
.startbox-body h5:first-child {
margin-top: 0px;
}
.startbox-body-breit dl:first-child h5 {
margin-top: 0px;
}
.toctitle {
display: none;
}
.toc {
border: 0;
background: unset;
padding-top: 0px;
}
.toc ul {
margin-top: 0px;
}
.tocnumber {
display: none !important;
}
.toclimit-1 {
margin-left: 11em;
}
.TOC3 {
float: right;
}
.TOC3 .mw-collapsible-content {
display: block;
}
.text-h1.h-box:empty {
display: none;
}
.startbox-body .Einrücken {
margin-left: 1.5em;
}
} /*** 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;
}
.TOC3 .mw-collapsible-toggle {
min-width: 100%;
}
.TOC3 .mw-collapsible-toggle-default::before {
content: "\f25a";
font-family: "Font Awesome 6 Pro";
font-weight: 300;
}
} /*** Ende Formatierungen Breakpoint md ***/
/*** Formatierungen für Breakpoint xs ***/
@media (max-width:576px) {
table { border: 0; }
.startbox-flex {
display: flex;
flex-flow: wrap;
}
.startbox-flex.max-content {
min-width: unset;
}
.max-content {
min-width: unset;
}
.startbox-body .startbox-flex {
}
.Einrücken2 {
margin-left: 16px;
}
.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;
}
.TOC3 ~ ul {
display: none;
}
.TOC3 .toctogglecheckbox:checked ~ ul {
display: block;
}
.nomobil {
display: none;
}
} /*** Ende Formatierungen für Breakpoint xs ***/
Vorlage:Styles-Startseiten.css
Aus Securepoint Wiki