Vorlage:MetaseitenLayout/styles.css

/* metaseite-intro ist der Grid-Container. -boxen generiert so breit 
 * wie nötig, aber höchstens 20em breit. */

.metaseite-intro {
	display: grid;
	gap: 1rem;
	grid-template-columns: minmax(30em, 1fr) fit-content(20em);
	grid-template-areas: "intro-einleitung intro-boxen";
}

.metaseite-intro,
.metaseite-intro-breit {
	margin: 1em 0;
	max-width: 100%;
}

/* intro-boxen dient als flexbox-parent. Die childs heften am oberen
 * und rechten Rand an und erhalten 1rem Abstand zwischeneinander. */

.metaseite-intro-boxen {
	align-items: stretch;
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	grid-area: intro-boxen;
	justify-self: end;
}

/* Fügen Nutzer im breiten Intro fälschlicherweise Boxen ein, werden 
 * diese bewusst nicht angezeigt, denn sie erscheinen sonst irgendwo. */

.metaseite-intro-breit .metaseite-intro-boxen {
	display: none;
}

/* Die Variable für die Rahmenfarbe resultiert aus 
 * [[WP:HW/dewikiCommonStyle]], bitte nicht überschreiben. 
 * min-width: 0; sorgt dafür, dass das div vollständig responsiv ist. */

.metaseite-intro-einleitung {
	border: 1px solid var(--dewiki-rahmenfarbe1);
	border-radius: 2px;
	grid-area: intro-einleitung;
	min-width: 0;
	padding: 1em;
}

/* Alle eingebundenen Vorlagen mit Klasse float-right werden
 * auf margin:0; zurückgesetzt bzw. überschrieben. */

.metaseite-intro-boxen .float-right {
	margin: 0 !important;
}

/* Skip-Link für Intros standardmäßig ausblenden */
.metaseite-intro-skip {
	display: none;
}

/* Diese Media-Query ändert einiges beim Unterschreiten von 45 em
 * dargestellter Seitenbreite. Hierbei wird das Grid so angepasst, 
 * dass -boxen unter -einleitung generiert wird. -einleitung verliert
 * die bg-color und die border, um Platz zu sparen. -boxen teilen sich
 * je nach Platzverhältnis in mehrere Columns auf und könnten in 
 * Zukunft mit dem masonry-Algorithmus lückenlos aufrücken. */

@media (max-width:45em) {

	.metaseite-intro {
		grid-template-columns: 1fr;
		grid-template-areas:
			"intro-einleitung"
			"intro-boxen";
	}

	.metaseite-intro-einleitung {
		background-color: unset;
		border: unset;
		padding: 0;
	}

	.metaseite-intro-boxen {
		align-items: start;
		background-color: var(--dewiki-hintergrundfarbe1);
		border-top: 4px solid var(--dewiki-rahmenfarbe1);
		border-radius: 2px;
		column-gap: 1rem;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min-content, 15em));
		justify-content: center;
		justify-items: center;
		justify-self: stretch;
		padding: 1em 0;
	}

	.metaseite-intro-nodisplay {
		display: none;
	}

	.metaseite-intro-skip {
		display: block;
		background-color: var(--dewiki-hintergrundfarbe5);
		border: 1px solid var(--dewiki-rahmenfarbe1);
		border-radius: 2px;
		text-align: center;
	}
}

/* *****************************************
 *   Ab hier CSS für einzelne Metaseiten
 * *****************************************/

/* [[Portal:Wikipedia nach Themen]] */

.metaseite-pwnt-header {
	border-bottom: solid 2px #7D80B3;
	flex: 1;
	font-family: sans-serif;
	font-size: 130%;
	font-weight: bold;
	margin-bottom: 5px;
	text-align: left;
}

.metaseite-pwnt-grid {
	display: grid;
	gap: 1em;
	grid-template-columns: 1fr 1fr;
	margin-bottom: 1em;
}


@media (max-width:45em) {
	
	.metaseite-pwnt-grid {
		grid-template-columns: 1fr;
	}

}


/* [[Wikipedia:Autorenportal]] */

.metaseite-apo-h2  {
	border: 1px solid;
	font-size: 110%;
	font-weight: bold;
	margin: 0;
	padding: 0.2em 0.8em; 
}

.metaseite-apo-grid {
	display: grid;
	gap: 1em;
	grid-template-columns: 4fr 1.7fr;
}

.metaseite-apo-grid-column {
	align-content: flex-start;
	display: grid;
	grid-auto-flow: row;
	gap:1em;
}

.metaseite-apo-grid-column-innen {
	grid-template-columns: 1fr 1fr;
}

@media (max-width:45em) {
	
	.metaseite-apo-grid {
		grid-template-columns: 1fr;
	}
	
	.metaseite-apo-grid-column {
		grid-column: 1 / -1;

	}

	.metaseite-apo-grid-column-innen {
		grid-template-columns: 1fr;
	}
}

/* [[Wikipedia:Relevanzcheck]] */

.metaseite-relc-hauptkasten {
	background-color: var(--dewiki-hintergrundfarbe1);
	border: 1px solid var(--dewiki-rahmenfarbe1);
	border-radius: 2px;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 1em;
	max-width: 100%;
	padding: 1em 1em 0;
}

.metaseite-relc-hauptkasten-kopf {
	margin-bottom: 1.5em;
	text-align: center;
	width: 100%;
}

.metaseite-relc-flexbox {
	background-color: var(--dewiki-hintergrundfarbe5);
	border: 1px solid var(--dewiki-rahmenfarbe1);
	border-radius: 2px;
	display: flex;
	margin-bottom: 1em;
}

.metaseite-relc-flexbox-icons {
	align-items: center;
	background-color: var(--dewiki-hintergrundfarbe2);
	border: 0;
	border-radius: 1px 0 0 1px;
	display: flex;
	flex: 0 0 5em;
	justify-content: center;
}

.metaseite-relc-flexbox-text {
	padding: 1.5em;
	text-align: center;
}

.metaseite-relc-flexbox-text-maxwidth {
	max-width: 100%;
	padding: 1.5em;
}

.metaseite-relc-flexbox-archiv {
	background-color: var(--dewiki-hintergrundfarbe2);
	border: 1px solid var(--dewiki-rahmenfarbe1);
	border-radius: 2px;
	align-items: center;
	display: flex;
	flex: 0 0 15em;
	flex-direction: column;
	justify-content: center;
	margin: 0 0 1em 1em;
	padding: 0;
}

.metaseite-relc-flexbox-archiv-oben {
	clear: both;
	max-width: 11em;
	text-align: center;
}

.metaseite-relc-flexbox-archiv-unten {
	border: 1px solid var(--dewiki-rahmenfarbe1);
	border-radius: 2px;
	margin-top: 2.1em;
	max-width: 13em;
}

.metaseite-relc-flexbox-archiv-unten-kopf {
	background-color: var(--dewiki-hintergrundfarbe1);
	border-bottom: 1px solid grey;
	border-radius: 2px 2px 0 0;
	font-size: 95%;
	font-weight: bold;
	line-height: 150%;
	padding: 0.5em;
}

.metaseite-relc-flexbox-archiv-unten-body {
	background-color: var(--dewiki-hintergrundfarbe1);
	border-radius: 2px;
	font-size: 88%;
	padding: 0.5em 0.5em 1em 0.5em;
}

/* [[Wikipedia:Über Wikipedia]] */

.metaseite-about-grid {
	column-gap: 1em;
	display: grid;
	grid-template-columns: 2fr 1fr;
}

@media (max-width:45em) {
	
	.metaseite-about-grid {
		grid-template-columns: 1fr;
	}

	.metaseite-about-grid-column {
		grid-column: 1;
	}

}

/* [[Wikipedia:Vandalismusmeldung]] */

@media (max-width:45em) {

	.metaseite-vm-buttons {
		display: block;
	}

}

.metaseite-vm-archivübersicht {
	background-color: var(--dewiki-hintergrundfarbe-basis);
	border: 0.1em solid #aaa;
	clear: both;
	width: 15em;
}

.metaseite-vm-archivübersicht-kopf {
	margin: 0.5em;
	text-align: center;
}

.metaseite-vm-archivübersicht-monate {
	align-items: center;
	background-color: var(--dewiki-hintergrundfarbe1);
	border: 0 solid;
	border-radius: 2px;
	display: flex;
	font-size: smaller;
	justify-content: center;
	margin: 1em 1em 0 1em;
}

.metaseite-vm-archivübersicht-text {
	font-size: 9pt;
	line-height: 1.3em;
	padding: 1em;
	text-align: center;
}

.metaseite-vm-buttons {
	margin: 1em auto;
	text-align: center;
}

/* [[Wikipedia:Vandalismusmeldung/Archiv]] */

@media (max-width:45em) {
	
	.metaseite-vma-container-button-alle {
		display: none;
	}

	.metaseite-vma .mw-inputbox-centered {
		margin: 2em 0;
	}

	#metaseite-vma-suchleiste input {
		max-width: 300px;
	}

}

.metaseite-vma-suchleiste-buttons {
	align-items: center;
	display: flex;
	height: 3em;
	justify-content: center;
	padding: 0.4em;
}

.metaseite-vma-versionsarchive {
	box-sizing: border-box;
	text-align: left;
	width: 100%;
}

.metaseite-vma-container {
	border: 1px solid grey;
	border-radius: 2px;
	margin-bottom: 0.3em;
	padding: 5px;
}

.metaseite-vma-container-jahreszahl {
	padding: 5px;
}

.metaseite-vma-container-button {
	color: #3056a9;
	float: right;
	font-size: 10pt;
	padding: 0.1em 0.4em;
}

.metaseite-vma-container-button-alle {
	color: #3056a9;
	font-size: 10pt;
	margin-right: 0.5em;
	padding: 0.1em 0.4em;
}

.metaseite-vma-container-grid {
	background-color: #999;
	display: inline-grid;
	gap: 0.2em;
	grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
	overflow: hidden;
	overflow-x: auto;
	width: 100%;
}

.metaseite-vma-container-grid-monat {
	display: flex;
	justify-content: center;
	min-width: 15em;
}