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

Aktuelle Version vom 27. November 2025, 12:48 Uhr

/*** Tabellenlayout: 2-Spaltig, jede 2. Zeile als Überschrift ***/


/*** Formatierungen für Alle ***/

.language {
	display:		initial;
	}

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

.inline-block span dl {
	padding-left:	1em;
	}

.startbox-head:not(.greenalert) > :first-child {
	position:		absolute;
	}

.startbox-head > h4 + .end {
	text-align:		right;
	width:			100%;
	}

.startbox-head .spc__default {
	position:		relative;
	/*top:			-0.6em;*/
	vertical-align:	top;
	}

.startbox-flex li[class*="list--element__"] {
	padding-left:	1.2em;
	}

.list--element__alert.em2::before, .startbox .list--element__alert.em2::before, .list--element__skull.em2::before {
  font-size: 2em;
  position: absolute;
  left: -0.6em;
}

/* a {
	color: #1b599b;
 	}

a:visited {
	color: #636;
	} */


.padding10 td {
	padding:		10px !important;
  }

ul {
	margin-bottom:	0.3em;
	list-style:		none;
	margin-top:		3px;
	break-before:	avoid;
	}

dl {
	/* padding-top: 1em !important;
	padding-bottom:	0px !important; */
	margin-bottom:	0px !important;
	break-inside:	avoid;
	/* margin-top:	1em; */
	/* break-after:	avoid; */
	}

ul li {
	break-inside:		avoid;
	}

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 .Release + div > ul > li::before,
.startbox .Release > ul > li::before {
	left:						0;
	margin-right:				0.5em;
}


.startbox ul > li:before {
	font-family:	'Font Awesome 6 Pro';
	content:		"\f0a9";
	font-size:		12px;
	color:			rgb(231, 76, 60);
	/* position: 		absolute; */ 
	left:			-2em;
	margin-right:	-1.0em;
	font-weight:	900;
	position:		inherit;
	}


.startbox .TOC ul > li:before {
	left:			-1.5em;
	}

.startbox ul li {
	padding-left:	1em;
	display:		flow-root;
	position:		relative;
	left:			0px;
	}

.startbox ul > * > ul {
	margin-left:	0.1em;
	}


.startbox .Build_description ul > * > ul {
	margin-left:	1.6em;
	}


.list--element__bullet li::before,
li.list--element__bullet::before,
.startbox .list--element__bullet li::before,
.startbox.new.star .list--element__bullet li::before,
.startbox li.list--element__bullet::before,
.list--element__alert .bullet li::before,
.startbox-body .bullet li::before {
	font-family:	'Font Awesome 6 Pro';
	content:		"\f111";
	font-size:		6px;
	left:			-3em;
	}


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


/*
.startbox.new ul > 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;
	}
*/

.startbox.new.star ul > li:before {
	font-family:	'Font Awesome 6 Pro';
	content:		"\f005";
	font-size:		0.7em;
	color:			#468847;
	top: 			unset;
	font-weight:	900;
	margin-right:	-1em;
	width:			1em;
	display:		inline-block;
	left: 			-1.5em;
	}




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

.startbox.new ul {
  margin: 0 0 0 0.25em;
}



.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% - 91px)/3);
	}

.startbox.breit {
	min-width: 		500px;
	flex-grow: 		2;
	flex-shrink: 	0;
	flex-basis: 	calc(((100% - 91px) / 3) * 2 + 30px);
    display: flex;
    flex-direction: column;
	}

.startbox.breit:hover, .startbox:hover{
    box-shadow:0 0 7px 1px rgba(0,0,0,0.1);
    }

/*.startbox.breit:hover .startbox-head [class*=fa-], .startbox:hover .startbox-head [class*=fa-]{
    transform: scale(1.3);
    }*/

.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-old {
	background-color: #eaecf0;
	min-height:		3em;
	padding:		1em;
	display:		flex;
	justify-content:space-between;
	}

/* Neues Design der Header anhand des neues UTM-Designs */
.startbox-head {
	background: #fff;
    min-height:		3em;
	padding-left:		1em;
	display:		flex;
	justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #E74C3C;
	}

.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,
.text-h5 {
	margin-bottom:		0;
	margin-top:			16px;
	font-weight:		bold;
	font-size:			16px;
	color:				rgba(0,0,0,0.7);
	}

.text-h5 {
	margin-bottom:		9px;
	margin-top:			0;
	}

.text-h5.h-box {
	display:			inline;
	}


.startbox-body h5:first-child {
	margin-top:			0px;
	}

.startbox-body-breit dl:first-child h5 {
	margin-top:			0px;
	}

/*.toctitle {
	display:			none;
	} */

.tocnumber, .toctext {
	display:			contents;
	} 

.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;
    grid-area: 1 / 3 / 3 / auto;
	}

.TOC3 .mw-collapsible-content {
	display:	block;
	}

.text-h1.h-box:empty {
	display:			none;
	}

.startbox-body .Einrücken,
.startbox-body-breit .Einrücken {
	margin-left:		1.25em;
	}

.new.star li.list--element__puzzle::before {
  font-family: "Font Awesome 6 Pro";
  content: "\e443";
  font-size: 1.7em;
  color: #DD463E; 
  top: 0.5em;
  font-weight: 900;
margin-right:-1.4em;
}

.new.star li.list--element__puzzle {
padding-left:3.4em;
}


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





/*** Formatierungen für Breakpoint md ***/

@media (max-width:768px) {

.language-toggle-german {
	position:			absolute;
	top:				-5em;
	right:				1em;
	}

.language-toggle-english {
	position:			absolute;
	top:				-5em;
	right:				1em;
	}

.startbox {
	margin: 	15px 0px;
	min-width: 	100%;
	}

.startbox.breit {
	margin:		15px 0px;
	width: 		100%;
	min-width: 	0;
	}

.startbox-body-breit {
	column-count: 	1;
	}

.TOC3 {
    grid-area: 2 / 1 / 2 / 2;
    }

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


/*** Übersetzungen für Ausklapp Schaltflächen ***/

/*** UTM ***/

.translate.S2E + .language.german.inline + div + span > * > .mw-collapsible-toggle-collapsed >.mw-collapsible-text::after {
	content:		"Alle Artikel zu Roadwarrior Verbindungen";
	}

.translate.S2E + div + .language.english.inline + span > * > .mw-collapsible-toggle-collapsed > .mw-collapsible-text::after {
	content:		"All articles about Roadwarrior Connections";
	}

.translate.S2S + .language.german.inline + div + span > * > .mw-collapsible-toggle-collapsed >.mw-collapsible-text::after {
	content:		"Artikel zu S2S Verbindungen";
	}

.translate.S2S + div + .language.english.inline + span > * > .mw-collapsible-toggle-collapsed > .mw-collapsible-text::after {
	content:		"All articles about S2S Connections";
	}

/* .translate + .language.german.inline + div + span > * > span.mw-collapsible-toggle-expanded > .mw-collapsible-text::after */
.mw-collapsible-toggle-expanded > .mw-collapsible-text:lang(de)::after {
	content:		"ausblenden";
	}

.translate + div + .language.english.inline + span > * > span.mw-collapsible-toggle-expanded > .mw-collapsible-text::after,
.mw-collapsible-toggle-expanded > .mw-collapsible-text:lang(en)::after {
	content:		"hide";
	}

.icon.info > .mw-collapsible-toggle-expanded > .mw-collapsible-text:lang(de)::after {
	content:		"";
	}

.translate_enrollment .mw-collapsed > * > .mw-collapsible-text:lang(de)::before{
	content:		"Veraltete Enrollmentmethoden einblenden";
	}
.translate_enrollment .mw-collapsed > * > .mw-collapsible-text:lang(en)::before{
	content:		"Show obsolete enrollment methods";
	}
.Uebersicht_Profilreiter .mw-collapsed > * > .mw-collapsible-text:lang(de)::before{
	content:		"Übersicht der einzelnen Profilreiter einblenden";
	}
.Uebersicht_Profilreiter .mw-collapsed > * > .mw-collapsible-text:lang(en)::before{
	content:		"Show overview of the individual profile tabs";
	}
.Uebersicht_Android_Betriebsmodi .mw-collapsed > * > .mw-collapsible-text:lang(de)::before{
	content:		"Übersicht der Android Betriebsmodi einblenden";
	}
.Uebersicht_Android_Betriebsmodi .mw-collapsed > * > .mw-collapsible-text:lang(en)::before{
	content:		"Show overview of Android operating modes";
	}


.Einbau_Hardware * .mw-collapsed > * > .mw-collapsible-text:lang(de)::before {
	content:		"Einbau in G3/G5 Hardware";
	color:			#e52b2b;
	}

.Einbau_Hardware * .mw-collapsed > * > .mw-collapsible-text:lang(en)::before {
	content:		"Installation on G3/G5 Hardware";
	color:			#e52b2b;
	}


/*** Ende UTM ***/



/*** Ende Übersetzungen für Ausklapp Schaltflächen ***/