Vorlage:Information/styles

aus Wikipedia, der freien Enzyklopädie
Zur Navigation springen Zur Suche springen

CSS

.fileinfotpl {
	width: 100%;
	border: 1px solid var(--dewiki-rahmenfarbe1);
	background-color: var(--dewiki-hintergrundfarbe1);
	padding: .5em;
	font-size: 95%;
}

.fileinfotpl_header {
	background-color: #ccf;
	text-align: right;
	padding: .5em;
	width: 15%;
}

.information-fehlt {
	border: 1px solid #e3e3b0; 
	background-color: #ffe;
	margin: .75em 15%;
	padding: .5em;
	text-align: center;
	font-weight: bold;
}

/* responsive */
@media screen and (max-width: 500px) {
	.fileinfotpl {
		display: block;
		box-sizing: border-box;
		padding: 0 !important;
		overflow-wrap: break-word;
	}
	.fileinfotpl > * {
		display: block;
	}
	.fileinfotpl > * > tr {
		display: flex;
		flex-direction: column;
	}
	.fileinfotpl > * > tr > th,
	.fileinfotpl > * > tr:not(:last-child) > td {
		box-sizing: border-box;
		width: 100% !important;
		border-bottom: 1px solid var(--dewiki-rahmenfarbe1);
		text-align: left;
	}
}

/* Dunkelmodus */
@media screen {
	html.skin-theme-clientpref-night .fileinfotpl_header {
	    background-color: var(--dewiki-hintergrundfarbe5);
	}
	html.skin-theme-clientpref-night .information-fehlt {
		background-color: var(--dewiki-hintergrundfarbe-basis);
	}
}
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .fileinfotpl_header {
	    background-color: var(--dewiki-hintergrundfarbe5);
	}
	html.skin-theme-clientpref-os .information-fehlt {
		background-color: var(--dewiki-hintergrundfarbe-basis);
	}
}

Die Programmierung ist gegen Bearbeitung geschützt ((Sichter) Dreiviertelschutz).

Kopiervorlage

[Quelltext bearbeiten]
<templatestyles src="Information/styles.css" />

Gestaltung der Vorlage:Information für unterschiedliche Anzeigebreiten und -modi.

fileinfotpl
Gesamttabelle
fileinfotpl_header
Kopfbereich für den Tabelleninhalt
fileinfotpl_desc
Inhaltsbereich
information-fehlt
Hinweis auf fehlende Eintragung