Vorlage:Advisory.css: Unterschied zwischen den Versionen

Version vom 17. April 2025, 15:32 Uhr

.language {
	display:			initial;
	}

.language:not(.inline) {
	display:			none;
	}

.sptable-legende th {
	background:			#e52b2b;
	color:				white;
	}

.sp-advisory-table {
	display:			flex;
	float:				left;
	border:				none;
	}


.sp-advisory-table tr {
	margin:				0.25em;
	}


.sp-advisory-table tr th {
	width: 				14em;
	display:			inline-flex;
	padding:			7px;
	}

.sp-advisory-table thead tr {
	display:			grid;
	margin:				0.25em;
	padding-right:		2em;
	}


.sp-advisory-table thead th.headerSort {
	border-radius:		16px;
	margin:				3px;
	background-color:	#e52b2b;
	color:				white;
	background-image:	none;
	}

.sp-advisory-table thead th::before {
	content:			"\2005";
	font-family:		"Font Awesome 6 Pro";
	font-weight:		300;
	font-size:			130%;
	padding:			0;
	width:				1.2em;
	}

.sp-advisory-table thead th.headerSortUp::before {
	content:			"\f885";			/* up short-wide */
	font-family:		"Font Awesome 6 Pro";
	font-size:			130%;
	}

.sp-advisory-table thead th.headerSortDown::before {
	content:			"\f160";			/* down wide-short */
	font-family:		"Font Awesome 6 Pro";
	font-size:			130%;
	}

.sp-advisory-table thead th:first-child.headerSortUp::before,
.sp-advisory-table thead th:nth-child(3).headerSortUp::before,
.sp-advisory-table thead th:nth-child(5).headerSortUp::before {
	content:			"\f163";			/* up 1-9*/
	font-family:		"Font Awesome 6 Pro";
	font-size:			130%;
	}

.sp-advisory-table thead th:first-child.headerSortDown::before,
.sp-advisory-table thead th:nth-child(3).headerSortDown::before,
.sp-advisory-table thead th:nth-child(4).headerSortDown::before {
	content:			"\f886";			/* down 9-1 */
	font-family:		"Font Awesome 6 Pro";
	font-size:			130%;
	}

.sp-advisory-table thead th:nth-child(2).headerSortUp::before,
.sp-advisory-table thead th:nth-child(6).headerSortUp::before,
.sp-advisory-table thead th:nth-child(7).headerSortUp::before {
	content:			"\f15e";			/* up a-z */
	font-family:		"Font Awesome 6 Pro";
	font-size:			130%;
	}

.sp-advisory-table thead th:nth-child(2).headerSortDown::before,
.sp-advisory-table thead th:nth-child(6).headerSortDown::before,
.sp-advisory-table thead th:nth-child(7).headerSortDown::before {
	content:			"\f881";			/* down z-a */
	font-family:		"Font Awesome 6 Pro";
	font-size:			130%;
	}

.sp-advisory-table tbody a:after {
	position:			absolute;
	top:				0;
	right:				0;
	bottom:				0;
	left:				0;
	z-index:			1;
	content:			"";
	}

.sp-advisory-table tbody a,
.sp-advisory-table tbody a:visited {
	color:				white;
	}

.sp-advisory-table tbody tr {
	display:			flex;
	flex-wrap:			wrap;
	border:				1px solid grey;
	transform:			rotate(0);
	}

.sp-advisory-table tbody tr:first-child {
	margin-top:			1.4em;
	}

/* .sp-advisory-table tbody td i::before {
	position:			relative;
	left:				-4em;
	} */

.sp-advisory-table tbody td	{
	padding:			5px;
	}

.english.inline ~ .sp-advisory-table thead:before {
	content:			'Sorting';
	font-weight:		bold;
	padding-left:		10px;
	}

.german.inline ~ .sp-advisory-table thead:before {
	content:			'Sortierung';
	font-weight:		bold;
	padding-left:		10px;
	}

.sp-advisory-table td:nth-child(1) { 				/* CVE */
	font-weight:		bold;
	color:				#ec7063;
	}

.sp-advisory-table td:nth-child(4):before {
	content:			'Status\2005';
	font-size:			small;
	}

.sp-advisory-table td:nth-child(5):before {
	content:			'Score\2005';
	font-size:			small;
	}

.english.inline ~ .sp-advisory-table td:nth-child(6):before {
	content:			'Product\2005';
	font-size:			small;
	}

.german.inline ~ .sp-advisory-table td:nth-child(6):before {
	content:			'Produkt\2005';
	font-size:			small;
	}

.english.inline ~ .sp-advisory-table td:nth-child(7):before {
	content:			'Component\2005';
	font-size:			small;
	}

.german.inline ~ .sp-advisory-table td:nth-child(7):before {
	content:			'Komponente\2005';
	font-size:			small;
	}

.english.inline ~ .sp-advisory-table td:nth-child(8):before {
	content:			'Published\2005';
	font-size:			small;
	}

.german.inline ~ .sp-advisory-table td:nth-child(8):before {
	content:			'Veröffentlicht\2005';
	font-size:			small;
	}

.english.inline ~ .sp-advisory-table td:nth-child(9):before {
	content:			'Fixed\2005';
	font-size:			small;
	}

.german.inline ~ .sp-advisory-table td:nth-child(9):before {
	content:			'Behoben\2005';
	font-size:			small;
	}

.english.inline ~ .sp-advisory-table td:nth-child(10):before {
	content:			'Last Update\2005';
	font-size:			small;
	}

.german.inline ~ .sp-advisory-table td:nth-child(10):before {
	content:			'Letzte Aktualisierung\2005';
	font-size:			small;
	}

.geloest:lang(de)::before {
	content:			"Verfügbar seit: ";
	}

.geloest:lang(en)::before {
	content:			"Rollout: ";
	}

.geloest {
	font-size:			small;
	padding-left:		2em;
	}

.geloest:empty {
	display:			none;
	}

.sp-advisory-table td:nth-child(1) {
	width:				10em;
	}

.sp-advisory-table td:nth-child(3) {
	font-size:			small;
	width:				12.3em;
	}

.sp-advisory-table td:nth-child(2) {
	width:				calc( 100% - 10em );
	}

.sp-advisory-table td:nth-child(8) {
	width:				calc( 20% + 10em );
	padding-left:		calc( 10em + 5px );
	}


.sp-advisory-table td:nth-child(4),
.sp-advisory-table td:nth-child(5), 
.sp-advisory-table td:nth-child(6), 
.sp-advisory-table td:nth-child(9) {
	width:				20%;
	}


.sp-advisory-table td:nth-child(7) {
	width:				calc( 40% - 10em );
	}


.sp-advisory-table td:nth-child(10) {
	width:				calc( 60% - 10em );
	}

.zeig_weiss:hover ~ .sp-advisory-table td:nth-child(1), 
.zeig_weiss:hover ~ .sp-advisory-table td:nth-child(2),
.zeig_weiss:hover ~ .sp-advisory-table tbody a,
.zeig_weiss:hover ~ .sp-advisory-table tbody a:visited {
	background:			white;
	color:				rgba(0,0,0,0.9);
	}

.zeig_rot:hover ~ .sp-advisory-table td:nth-child(1), 
.zeig_rot:hover ~ .sp-advisory-table td:nth-child(2),
.zeig_rot:hover ~ .sp-advisory-table tbody a,
.zeig_rot:hover ~ .sp-advisory-table tbody a:visited {
	background:			#e52b2b;
	color:				white;
	}

.sp-advisory-table td:nth-child(1),
.sp-advisory-table td:nth-child(2) {
  background: rgba(0,0,0,0.2);
  color: rgba(0,0,0,0.9);
}


.sp-advisory-table tbody a,
.sp-advisory-table tbody a:visited {
  background: rgba(0,0,0,0);
  color: rgba(0,0,0,0.9);
}

.sp-advisory-table td:nth-child(3), 
.sp-advisory-table td:nth-child(4),
.sp-advisory-table td:nth-child(5), 
.sp-advisory-table td:nth-child(6),
.sp-advisory-table td:nth-child(7) {
	background:			rgba(0,0,0,.05);
	}

.sp-advisory-table td:nth-child(8), 
.sp-advisory-table td:nth-child(9),
.sp-advisory-table td:nth-child(10) {
	background:			white;
	}

.sp-advisory-table th:nth-child(3) {
	grid-row:			2;
	}

.sptable0.cve-status.sptable-legende {
	float:				right;
	width:				max-content;
	max-width:			calc( 100% - 19em );
	}


@media (max-width:1555px) {

.sp-advisory-table {
	display:			unset;
	}

.sp-advisory-table thead tr {
	display:			flex;
	flex-wrap:			wrap;
	}

.sp-advisory-table td:nth-child(4), 
.sp-advisory-table td:nth-child(5), 
.sp-advisory-table td:nth-child(6), 
.sp-advisory-table td:nth-child(7), 
.sp-advisory-table td:nth-child(8),
.sp-advisory-table td:nth-child(9) {
	display:			grid;
	align-content:		flex-start;
	}

th:nth-child(1) {
order:-2;
}

th:nth-child(3) {
order:-1;
}


.sp-advisory-table td:nth-child(1) {
	width:				6em;
	}

.sp-advisory-table td:nth-child(3) {
	font-size:			small;
	width:				7.38em;
	}

.sp-advisory-table td:nth-child(2) {
	width:				calc( 100% - 6em );
	}


.sp-advisory-table td:nth-child(8) {
	width:				calc( 20% + 6em );
	padding-left:		calc( 6em + 5px );
	}

.sp-advisory-table td:nth-child(4), 
.sp-advisory-table td:nth-child(5) {
	width:				20%;
	}


.sp-advisory-table td:nth-child(7) {
	width:				calc( 40% - 6em );
	}


.sp-advisory-table td:nth-child(10) {
	width:				calc( 60% - 6em );
	}

.sp-advisory-table tbody td i.center:before {
	position:			absolute;
	left:				10.5em;
	top:				5em;
}

.sp-advisory-table .fas.fa-face-scream::before {
  position: relative;
  left: 2em;
  top: -1.1em;
}


}


/********* Beginn *********/

@media (max-width:650px) {

.sp-advisory-table tr {
display:flex;
}

.sp-advisory-table td:nth-child(1) {
	width:				50%;
	order:				-2;
	}

.sp-advisory-table td:nth-child(3) {
	width:				50%;
	order:				-1;
text-align:right;
font-style:italic;
	}

.sp-advisory-table td:nth-child(2) {
	width:				100%;
	text-align:			end;
	padding-top:		0;
	}

.sp-advisory-table td:nth-child(4), 
.sp-advisory-table td:nth-child(6), 
.sp-advisory-table td:nth-child(8) {
	width:				calc( 50% + 2em );
	padding-left:		calc( 4em + 5px );
	}

.sp-advisory-table td:nth-child(5), 
.sp-advisory-table td:nth-child(7),
.sp-advisory-table td:nth-child(9) {
	width:				calc( 50% - 2em );
	}

.sp-advisory-table td:nth-child(10) {
	width:				100%;
	padding-left:		calc( 4em + 5px );
	}

.sp-advisory-table td:nth-child(10) div {
	padding-left:		1em;
	}

.sp-advisory-table td:nth-child(1), 
.sp-advisory-table td:nth-child(2), 
.sp-advisory-table td:nth-child(3) {
	background:			#e52b2b;
	color:				white;
	}

.sp-advisory-table td:nth-child(2) a div {
  color: white;
}

.sp-advisory-table td:nth-child(4),
.sp-advisory-table td:nth-child(5), 
.sp-advisory-table td:nth-child(8),
.sp-advisory-table td:nth-child(9) {
	background:			rgba(0,0,0,.05);
	}

.sp-advisory-table td:nth-child(6), 
.sp-advisory-table td:nth-child(7),
.sp-advisory-table td:nth-child(10) {
	background:			white;
	}

.sptable0.cve-status.sptable-legende {
	float:				unset;
	width:				unset;
	max-width:			unset;
	margin-bottom:		1em;
	}


}
/********* Ende *********/


.sptable.striped tr:nth-child(2n+1) > td {
	background:	rgba(70,136,71,0.1);
	}

.sptable.striped.fixed tr:nth-child(2n+1) > td {
	background:			rgba(240,173,78,0.1)  /* rgba(255,200,0, 0.1); */
	}

.sptable.striped.open tr:nth-child(2n+1) > td {
	background:			rgba(229,43,43, 0.1);
	}

.Details > div:nth-child(1), .Details > div:nth-child(2) {
	font-weight:		bold;
	}

.Details {
	margin-bottom:		2em;
	}


.cvss.sptable-legende.pd5 tr td:nth-child(2) {
  text-align: end;
  width: 3em;
  border-right: 0;
}


.cvss.sptable-legende.pd5 tr td:nth-child(3) {
  border-left: 0;
}