Wechseln zu:Navigation, Suche
Wiki

Vorlage:Portfilter.css: Unterschied zwischen den Versionen

Aus Securepoint Wiki
(Die Seite wurde neu angelegt: „→‎* sptable2 spezial *: →‎** Formatierungen für max 768 **: @media (max-width: 768px) { .sptable2.spezial tbody > tr { display: grid; grid-template-…“)
 
KKeine Bearbeitungszusammenfassung
 
(Eine dazwischenliegende Version desselben Benutzers wird nicht angezeigt)
Zeile 6: Zeile 6:
@media (max-width: 768px) {
@media (max-width: 768px) {


.sptable2.spezial tbody > tr {
.sptable2.Paketfilter tbody > tr {
display: grid;  
display: grid;  
grid-template-columns: 1fr 1fr repeat(3, 2fr);
grid-template-columns: 1fr 1fr repeat(3, 2fr);
Zeile 12: Zeile 12:
}
}


.sptable2.spezial tr > td.bild {
.sptable2.Paketfilter tr > td.bild {
grid-column: 1/3;
grid-column: 1/3;
grid-row: 1;
grid-row: 1;
Zeile 22: Zeile 22:
}
}


.sptable2.spezial tr > th.bild {
.sptable2.Paketfilter tr > th.bild {
grid-column: 1/3;
grid-column: 1/3;
grid-row: 4;
grid-row: 4;
Zeile 32: Zeile 32:
}
}


.sptable2.spezial tr > td {
.sptable2.Paketfilter tr > td {
border-color: #a2a9b1;
border-color: #a2a9b1;
border-style: solid;
border-style: solid;
Zeile 38: Zeile 38:
}
}


.sptable2.spezial td:nth-child(1) {
.sptable2.Paketfilter td:nth-child(1) {
grid-column: 1/6;
grid-column: 1/6;
background-color: #b6b6b6;
background-color: #b6b6b6;
Zeile 48: Zeile 48:
}
}


.sptable2.spezial tr > td:nth-child(2),
.sptable2.Paketfilter tr > td:nth-child(2),
.sptable2.spezial tr.no1cell > td:nth-child(1) {
.sptable2.Paketfilter tr.no1cell > td:nth-child(1) {
grid-column: 1;
grid-column: 1;
grid-row: 3;
grid-row: 3;
Zeile 60: Zeile 60:
}
}


.sptable2.spezial tr > td:nth-child(3),
.sptable2.Paketfilter tr > td:nth-child(3),
.sptable2.spezial tr.no1cell > td:nth-child(2) {
.sptable2.Paketfilter tr.no1cell > td:nth-child(2) {
grid-column: 2;
grid-column: 2;
background-color: #fff;
background-color: #fff;
Zeile 70: Zeile 70:
}
}


.sptable2.spezial tr > td:nth-child(4),
.sptable2.Paketfilter tr > td:nth-child(4),
.sptable2.spezial tr.no1cell > td:nth-child(3) {
.sptable2.Paketfilter tr.no1cell > td:nth-child(3) {
grid-column: 3;
grid-column: 3;
background-color: #fff;
background-color: #fff;
Zeile 80: Zeile 80:
}
}


.sptable2.spezial tr > td:nth-child(5),
.sptable2.Paketfilter tr > td:nth-child(5),
.sptable2.spezial tr.no1cell > td:nth-child(4) {
.sptable2.Paketfilter tr.no1cell > td:nth-child(4) {
grid-column: 4;
grid-column: 4;
background-color: #fff;
background-color: #fff;
Zeile 90: Zeile 90:
}
}


.sptable2.spezial tr > td:nth-child(6),
.sptable2.Paketfilter tr > td:nth-child(6),
.sptable2.spezial tr.no1cell > td:nth-child(5) {
.sptable2.Paketfilter tr.no1cell > td:nth-child(5) {
grid-column: 5;
grid-column: 5;
background-color: #fff;
background-color: #fff;
Zeile 100: Zeile 100:
}
}


.sptable2.spezial tr > td:nth-child(7),
.sptable2.Paketfilter tr > td:nth-child(7),
.sptable2.spezial tr.no1cell > td:nth-child(6) {
.sptable2.Paketfilter tr.no1cell > td:nth-child(6) {
grid-column: 1 / span 2;
grid-column: 1 / span 2;
background-color: #fff;
background-color: #fff;
Zeile 110: Zeile 110:
}
}


.sptable2.spezial tr > td:nth-child(8),
.sptable2.Paketfilter tr > td:nth-child(8),
.sptable2.spezial tr.no1cell > td:nth-child(7) {
.sptable2.Paketfilter tr.no1cell > td:nth-child(7) {
grid-column: 3;
grid-column: 3;
background-color: #fff;
background-color: #fff;
Zeile 120: Zeile 120:
}
}


.sptable2.spezial tr > td:nth-child(9),
.sptable2.Paketfilter tr > td:nth-child(9),
.sptable2.spezial tr.no1cell > td:nth-child(8) {
.sptable2.Paketfilter tr.no1cell > td:nth-child(8) {
grid-column: 4;
grid-column: 4;
background-color: #fff;
background-color: #fff;
Zeile 130: Zeile 130:
}
}


.sptable2.spezial tr > td:nth-child(10),
.sptable2.Paketfilter tr > td:nth-child(10),
.sptable2.spezial tr.no1cell > td:nth-child(9) {
.sptable2.Paketfilter tr.no1cell > td:nth-child(9) {
grid-column: 5;
grid-column: 5;
background-color: #fff;
background-color: #fff;
Zeile 148: Zeile 148:
}
}


.sptable2.spezial tr:first-child > td:nth-child(2),
.sptable2.Paketfilter tr:first-child > td:nth-child(2),
.sptable2.spezial tr:first-child > td:nth-child(3),
.sptable2.Paketfilter tr:first-child > td:nth-child(3),
.sptable2.spezial tr:first-child > td:nth-child(4),
.sptable2.Paketfilter tr:first-child > td:nth-child(4),
.sptable2.spezial tr:first-child > td:nth-child(5),
.sptable2.Paketfilter tr:first-child > td:nth-child(5),
.sptable2.spezial tr:first-child > td:nth-child(6) {
.sptable2.Paketfilter tr:first-child > td:nth-child(6) {
border-top-width: 2px !important;
border-top-width: 2px !important;
}
}


.sptable2.spezial tr:first-child > th {
.sptable2.Paketfilter tr:first-child > th {
background-color: #ccc;
background-color: #ccc;
}
}
Zeile 171: Zeile 171:
@media (max-width: 576px) {
@media (max-width: 576px) {


.sptable2.spezial tbody > tr {
.sptable2.Paketfilter tbody > tr {
display: grid;  
display: grid;  
grid-template-columns: repeat(3, 1.5em) repeat(3, 2fr);
grid-template-columns: repeat(3, 1.5em) repeat(3, 2fr);
Zeile 177: Zeile 177:
}
}


.sptable2.spezial tr > td.bild {
.sptable2.Paketfilter tr > td.bild {
grid-column: 1/3;
grid-column: 1/3;
grid-row: 1;
grid-row: 1;
Zeile 187: Zeile 187:
}
}


.sptable2.spezial tr > th.bild {
.sptable2.Paketfilter tr > th.bild {
grid-column: 1/3;
grid-column: 1/3;
grid-row: 4;
grid-row: 4;
Zeile 197: Zeile 197:
}
}


.sptable2.spezial tr > td {
.sptable2.Paketfilter tr > td {
border-color: #a2a9b1;
border-color: #a2a9b1;
border-style: solid;
border-style: solid;
Zeile 204: Zeile 204:
}
}


.sptable2.spezial td:nth-child(1) {
.sptable2.Paketfilter td:nth-child(1) {
grid-column: 1/7;
grid-column: 1/7;
background-color: #b6b6b6;
background-color: #b6b6b6;
Zeile 214: Zeile 214:
}
}


.sptable2.spezial tr > td:nth-child(2) {
.sptable2.Paketfilter tr > td:nth-child(2) {
grid-column: 1;
grid-column: 1;
grid-row: span 3;
grid-row: span 3;
Zeile 225: Zeile 225:
}
}


.sptable2.spezial tr.no1cell > td:nth-child(1) {
.sptable2.Paketfilter tr.no1cell > td:nth-child(1) {
grid-column: 1;
grid-column: 1;
grid-row: span 3;
grid-row: span 3;
Zeile 236: Zeile 236:
}
}


.sptable2.spezial tr > td:nth-child(3) {
.sptable2.Paketfilter tr > td:nth-child(3) {
grid-column: 2;
grid-column: 2;
grid-row: span 3;
grid-row: span 3;
Zeile 246: Zeile 246:
}
}


.sptable2.spezial tr.no1cell > td:nth-child(2) {
.sptable2.Paketfilter tr.no1cell > td:nth-child(2) {
grid-column: 2;
grid-column: 2;
grid-row: span 3;
grid-row: span 3;
Zeile 256: Zeile 256:
}
}


.sptable2.spezial tr > td:nth-child(4),
.sptable2.Paketfilter tr > td:nth-child(4),
.sptable2.spezial tr.no1cell > td:nth-child(3) {
.sptable2.Paketfilter tr.no1cell > td:nth-child(3) {
grid-column: 3/7;
grid-column: 3/7;
background-color: #fff;
background-color: #fff;
Zeile 266: Zeile 266:
}
}


.sptable2.spezial tr > td:nth-child(5),
.sptable2.Paketfilter tr > td:nth-child(5),
.sptable2.spezial tr.no1cell > td:nth-child(4) {
.sptable2.Paketfilter tr.no1cell > td:nth-child(4) {
grid-column: 3/7;
grid-column: 3/7;
background-color: #fff;
background-color: #fff;
Zeile 276: Zeile 276:
}
}


.sptable2.spezial tr > td:nth-child(6),
.sptable2.Paketfilter tr > td:nth-child(6),
.sptable2.spezial tr.no1cell > td:nth-child(5) {
.sptable2.Paketfilter tr.no1cell > td:nth-child(5) {
grid-column: 3/7;
grid-column: 3/7;
background-color: #fff;
background-color: #fff;
Zeile 286: Zeile 286:
}
}


.sptable2.spezial tr > td:nth-child(7),
.sptable2.Paketfilter tr > td:nth-child(7),
.sptable2.spezial tr.no1cell > td:nth-child(6) {
.sptable2.Paketfilter tr.no1cell > td:nth-child(6) {
grid-column: 1/4;
grid-column: 1/4;
background-color: #fff;
background-color: #fff;
Zeile 296: Zeile 296:
}
}


.sptable2.spezial tr > td:nth-child(8),
.sptable2.Paketfilter tr > td:nth-child(8),
.sptable2.spezial tr.no1cell > td:nth-child(7) {
.sptable2.Paketfilter tr.no1cell > td:nth-child(7) {
grid-column: 4;
grid-column: 4;
background-color: #fff;
background-color: #fff;
Zeile 306: Zeile 306:
}
}


.sptable2.spezial tr > td:nth-child(9),
.sptable2.Paketfilter tr > td:nth-child(9),
.sptable2.spezial tr.no1cell > td:nth-child(8) {
.sptable2.Paketfilter tr.no1cell > td:nth-child(8) {
grid-column: 5;
grid-column: 5;
background-color: #fff;
background-color: #fff;
Zeile 316: Zeile 316:
}
}


.sptable2.spezial tr > td:nth-child(10),
.sptable2.Paketfilter tr > td:nth-child(10),
.sptable2.spezial tr.no1cell > td:nth-child(9) {
.sptable2.Paketfilter tr.no1cell > td:nth-child(9) {
grid-column: 6;
grid-column: 6;
background-color: #fff;
background-color: #fff;
Zeile 334: Zeile 334:
}
}


.sptable2.spezial tr:first-child > td:nth-child(2),
.sptable2.Paketfilter tr:first-child > td:nth-child(2),
.sptable2.spezial tr:first-child > td:nth-child(3),
.sptable2.Paketfilter tr:first-child > td:nth-child(3),
.sptable2.spezial tr:first-child > td:nth-child(4),
.sptable2.Paketfilter tr:first-child > td:nth-child(4),
.sptable2.spezial tr:first-child > td:nth-child(5),
.sptable2.Paketfilter tr:first-child > td:nth-child(5),
.sptable2.spezial tr:first-child > td:nth-child(6) {
.sptable2.Paketfilter tr:first-child > td:nth-child(6) {
border-top-width: 2px !important;
border-top-width: 2px !important;
}
}


.sptable2.spezial tr:first-child > th {
.sptable2.Paketfilter tr:first-child > th {
background-color: #ccc;
background-color: #ccc;
}
}

Aktuelle Version vom 29. Mai 2024, 11:46 Uhr

/** sptable2 spezial **/


/*** Formatierungen für max 768 ***/

@media (max-width: 768px) {

.sptable2.Paketfilter tbody > tr {
	display:		grid; 
	grid-template-columns:	1fr 1fr repeat(3, 2fr);
	width:			100%;
}

.sptable2.Paketfilter tr > td.bild {
	grid-column:		1/3;
	grid-row:		1;
	background:		white;
	border-width:		0;
	padding-top:		10px;
	padding-bottom:		0px;
	width:			100%;
}

.sptable2.Paketfilter tr > th.bild {
	grid-column:		1/3;
	grid-row:		4;
	background:		white;
	border-width:		0;
	padding-top:		10px;
	padding-bottom:		0px;
	width:			100%;
}

.sptable2.Paketfilter tr > td {
	border-color:		#a2a9b1;
	border-style:		solid;
	margin-top:		unset;
}

.sptable2.Paketfilter td:nth-child(1) {
	grid-column:		1/6;
	background-color:	#b6b6b6;
	border-top-width:	2px;
	border-right-width:	2px;
	border-bottom-width:	0;
	border-left-width:	2px;
	text-align:		left;
}

.sptable2.Paketfilter tr > td:nth-child(2),
.sptable2.Paketfilter tr.no1cell > td:nth-child(1) {
	grid-column:		1;
	grid-row:		3;
	background-color:	#fff;
	border-top-width:	1px;
	border-right-width:	1px;
	border-bottom-width:	0;
	border-left-width:	2px;
	vertical-align:		middle;
}

.sptable2.Paketfilter tr > td:nth-child(3),
.sptable2.Paketfilter tr.no1cell > td:nth-child(2) {
	grid-column:		2;
	background-color:	#fff;
	border-top-width:	1px;
	border-right-width:	1px;
	border-bottom-width:	0;
	border-left-width:	0px;
}

.sptable2.Paketfilter tr > td:nth-child(4),
.sptable2.Paketfilter tr.no1cell > td:nth-child(3) {
	grid-column: 3;
	background-color:	#fff;
	border-top-width:	1px;
	border-right-width:	1px;
	border-bottom-width:	0;
	border-left-width:	0px;
}

.sptable2.Paketfilter tr > td:nth-child(5),
.sptable2.Paketfilter tr.no1cell > td:nth-child(4) {
	grid-column:		4;
	background-color:	#fff;
	border-top-width:	1px;
	border-right-width:	1px;
	border-bottom-width:	0;
	border-left-width:	0px;
}

.sptable2.Paketfilter tr > td:nth-child(6),
.sptable2.Paketfilter tr.no1cell > td:nth-child(5) {
	grid-column:		5;
	background-color:	#fff;
	border-top-width:	1px;
	border-right-width:	2px;
	border-bottom-width:	0;
	border-left-width:	0px;
}

.sptable2.Paketfilter tr > td:nth-child(7),
.sptable2.Paketfilter tr.no1cell > td:nth-child(6) {
	grid-column:		1 / span 2;
	background-color:	#fff;
	border-top-width:	1px;
	border-right-width:	1px;
	border-bottom-width:	2px;
	border-left-width:	2px;
}

.sptable2.Paketfilter tr > td:nth-child(8),
.sptable2.Paketfilter tr.no1cell > td:nth-child(7) {
	grid-column:		3;
	background-color:	#fff;
	border-top-width:	1px;
	border-right-width:	1px;
	border-bottom-width:	2px;
	border-left-width:	0px;
}

.sptable2.Paketfilter tr > td:nth-child(9),
.sptable2.Paketfilter tr.no1cell > td:nth-child(8) {
	grid-column:		4;
	background-color:	#fff;
	border-top-width:	1px;
	border-right-width:	1px;
	border-bottom-width:	2px;
	border-left-width:	0px;
}

.sptable2.Paketfilter tr > td:nth-child(10),
.sptable2.Paketfilter tr.no1cell > td:nth-child(9) {
	grid-column:		5;
	background-color:	#fff;
	border-top-width:	1px;
	border-right-width:	2px;
	border-bottom-width:	2px;
	border-left-width:	0px;
}

.sptable2.spezial tr > td:last-child {
	border-bottom-width:	2px;
}

.sptable2.spezial tr:first-child > td:nth-child(1) {
	display:		none;
}

.sptable2.Paketfilter tr:first-child > td:nth-child(2),
.sptable2.Paketfilter tr:first-child > td:nth-child(3),
.sptable2.Paketfilter tr:first-child > td:nth-child(4),
.sptable2.Paketfilter tr:first-child > td:nth-child(5),
.sptable2.Paketfilter tr:first-child > td:nth-child(6) {
	border-top-width:	2px !important;
}

.sptable2.Paketfilter tr:first-child > th {
	background-color:	#ccc;
}


} /*** Ende Formatierungen für max 768 ***/





/*** Formatierungen für max 576 ***/

@media (max-width: 576px) {

.sptable2.Paketfilter tbody > tr {
	display:		grid; 
	grid-template-columns:	repeat(3, 1.5em) repeat(3, 2fr);
	width:			100%;
}

.sptable2.Paketfilter tr > td.bild {
	grid-column:		1/3;
	grid-row:		1;
	background:		white;
	border-width:		0;
	padding-top:		10px;
	padding-bottom:		0px;
	width:			100%;
}

.sptable2.Paketfilter tr > th.bild {
	grid-column:		1/3;
	grid-row:		4;
	background:		white;
	border-width:		0;
	padding-top:		10px;
	padding-bottom:	0px;
	width:			100%;
}

.sptable2.Paketfilter tr > td {
	border-color:		#a2a9b1;
	border-style:		solid;
	margin-top:		unset;
	padding-left:		2px;
}

.sptable2.Paketfilter td:nth-child(1) {
	grid-column:		1/7;
	background-color:	#b6b6b6;
	border-top-width:	2px;
	border-right-width:	2px;
	border-bottom-width:	0;
	border-left-width:	2px;
	text-align:		left;
}

.sptable2.Paketfilter tr > td:nth-child(2) {
	grid-column:		1;
	grid-row:		span 3;
	background-color:	#fff;
	border-top-width:	1px;
	border-right-width:	1px;
	border-bottom-width:	0;
	border-left-width:	2px;
	vertical-align:	middle;
}

.sptable2.Paketfilter tr.no1cell > td:nth-child(1) {
	grid-column:		1;
	grid-row:		span 3;
	background-color:	#fff;
	border-top-width:	1px;
	border-right-width:	1px;
	border-bottom-width:	0;
	border-left-width:	2px;
	vertical-align:	middle;
}

.sptable2.Paketfilter tr > td:nth-child(3) {
	grid-column:		2;
	grid-row:		span 3;
	background-color:	#fff;
	border-top-width:	1px;
	border-right-width:	1px;
	border-bottom-width:	0;
	border-left-width:	0px;
}

.sptable2.Paketfilter tr.no1cell > td:nth-child(2) {
	grid-column:		2;
	grid-row:		span 3;
	background-color:	#fff;
	border-top-width:	1px;
	border-right-width:	1px;
	border-bottom-width:	0;
	border-left-width:	0px;
}

.sptable2.Paketfilter tr > td:nth-child(4),
.sptable2.Paketfilter tr.no1cell > td:nth-child(3) {
	grid-column:		3/7;
	background-color:	#fff;
	border-top-width:	1px;
	border-right-width:	1px;
	border-bottom-width:	0;
	border-left-width:	0px;
}

.sptable2.Paketfilter tr > td:nth-child(5),
.sptable2.Paketfilter tr.no1cell > td:nth-child(4) {
	grid-column:		3/7;
	background-color:	#fff;
	border-top-width:	1px;
	border-right-width:	1px;
	border-bottom-width:	0;
	border-left-width:	0px;
}

.sptable2.Paketfilter tr > td:nth-child(6),
.sptable2.Paketfilter tr.no1cell > td:nth-child(5) {
	grid-column:		3/7;
	background-color:	#fff;
	border-top-width:	1px;
	border-right-width:	2px;
	border-bottom-width:	0;
	border-left-width:	0px;
}

.sptable2.Paketfilter tr > td:nth-child(7),
.sptable2.Paketfilter tr.no1cell > td:nth-child(6) {
	grid-column:		1/4;
	background-color:	#fff;
	border-top-width:	1px;
	border-right-width:	1px;
	border-bottom-width:	2px;
	border-left-width:	2px;
}

.sptable2.Paketfilter tr > td:nth-child(8),
.sptable2.Paketfilter tr.no1cell > td:nth-child(7) {
	grid-column:		4;
	background-color:	#fff;
	border-top-width:	1px;
	border-right-width:	1px;
	border-bottom-width:	2px;
	border-left-width:	0px;
}

.sptable2.Paketfilter tr > td:nth-child(9),
.sptable2.Paketfilter tr.no1cell > td:nth-child(8) {
	grid-column:		5;
	background-color:	#fff;
	border-top-width:	1px;
	border-right-width:	1px;
	border-bottom-width:	2px;
	border-left-width:	0px;
}

.sptable2.Paketfilter tr > td:nth-child(10),
.sptable2.Paketfilter tr.no1cell > td:nth-child(9) {
	grid-column:		6;
	background-color:	#fff;
	border-top-width:	1px;
	border-right-width:	2px;
	border-bottom-width:	2px;
	border-left-width:	0px;
}

.sptable2.spezial tr > td:last-child {
	border-bottom-width:	2px;
}

.sptable2.spezial tr:first-child > td:nth-child(1) {
	display:		none;
}

.sptable2.Paketfilter tr:first-child > td:nth-child(2),
.sptable2.Paketfilter tr:first-child > td:nth-child(3),
.sptable2.Paketfilter tr:first-child > td:nth-child(4),
.sptable2.Paketfilter tr:first-child > td:nth-child(5),
.sptable2.Paketfilter tr:first-child > td:nth-child(6) {
	border-top-width:	2px !important;
}

.sptable2.Paketfilter tr:first-child > th {
	background-color:	#ccc;
}


} /*** Ende Formatierungen für max 576 ***/
Abgerufen von „https://wiki.securepoint.de/index.php?title=Vorlage:Portfilter.css&oldid=91666“