Wechseln zu:Navigation, Suche
Wiki

Vorlage:Styles-Startseiten.css: Unterschied zwischen den Versionen

Aus Securepoint Wiki
KKeine Bearbeitungszusammenfassung
KKeine Bearbeitungszusammenfassung
Zeile 1: Zeile 1:
/*** Bei Verwendung dieses css-Styles dürfen keine Tabellenüberschriften mit »!« formatiert werden
/*** Tabellenlayout: 2-Spaltig, jede 2. Zeile als Überschrift ***/
Tabellenlayout: 2-Spaltig, jede 2. Zeile als Überschrift ***/




Zeile 46: Zeile 45:
font-style: italic;
font-style: italic;
color: rgba(0,0,0,0.9);
color: rgba(0,0,0,0.9);
}
.noitalic dd {
font-style: unset;
}
}


Zeile 160: Zeile 163:
}
}


.startbox-flex {
display: flex;
flex-flow: wrap;
}


.startbox {
.startbox {
Zeile 225: Zeile 224:


/*** Formatierungen Standard (=Monitor) ***/
/*** Formatierungen Standard (=Monitor) ***/
 
@media (min-width:769px) {
table { border: 0; }
table { border: 0; }


Zeile 232: Zeile 231:
min-width: 300px;
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) {
.wikitable2 tr:nth-child(2n) {
Zeile 356: Zeile 376:




/*** Ende Formatierungen Standard ***/
} /*** Ende Formatierungen Standard ***/




Zeile 392: Zeile 412:


table { border: 0; }
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) {
.spgrid tr > td:nth-child(1) {

Version vom 30. April 2021, 07:42 Uhr

/*** 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: 16px;
	font-style: italic;
	color: rgba(0,0,0,0.9);
	}

.noitalic dd {
	font-style:	unset;
	}

.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;
	}

.new li.edit:before {
	font-family: 	'Font Awesome 5 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: -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 {
	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;
	}

.startbox-body .Hinweis-Container.Hinweis-Container__einblenden {
	display: 	contents;
	}


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




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

.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;
	}


} /*** Ende Formatierungen für Breakpoint xs ***/
Abgerufen von „https://wiki.securepoint.de/index.php?title=Vorlage:Styles-Startseiten.css&oldid=79634“