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

Version vom 17. Dezember 2019, 14:18 Uhr

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

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

li:before {
	font-family: 'Font Awesome 5 Pro';
	content: "\f0a9";
	font-size: 12px;
	color: #d62c1a;
	position: absolute;
	left: 0px;
	margin-right: 1em;
	font-weight: 900;
	}

li {
	padding-left: 20px;
	display: block;
	position: relative;
	}

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



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



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