Vorlage:NavFrame/styles

[Verwendung]   [CSS bearbeiten]

Diese Seite dokumentiert TemplateStyles betreffend Vorlage:NavFrame.

CSS

div.NavFrame {
	border-width: 1px;
	border-style: solid;
	border-left-color: var(--dewiki-rahmenfarbe1);
	border-right-color: var(--dewiki-rahmenfarbe1);
	border-top-color: var(--dewiki-rahmenfarbe1);
	border-bottom-color: var(--dewiki-rahmenfarbe1);
	clear: both;
	font-size: 95%;
	margin-top: 1.5em;
	min-height: 0; /* IE 7 */
	padding: 2px;
	text-align: center;
}
div.NavPic {
	float: left;
	padding: 2px;
}
div.NavHead {
	background-color: var(--dewiki-hintergrundfarbe5);
	font-weight: bold;
}
div.NavFrame:after {
	clear: both;
	content: "";
	display: block;
}

/* Automatisches Verschmelzen benachbarter Navigationsleisten */
div.NavFrame + div.NavFrame,
div.NavFrame + link + div.NavFrame,
div.NavFrame + style + div.NavFrame {
	margin-top: -1px;
}

/*
 * „Ausklappen“-Button an Navigationsleisten,
 * ursprünglich in [[MediaWiki:Common.js]] implementiert
 */
.NavToggle {
	float: right;
	font-size: x-small;
}

/* Dunkelmodus */
@media screen {
	html.skin-theme-clientpref-night .NavPic span[typeof="mw:File"] img {
		background-color: #c8ccd1;
	}
}
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .NavPic span[typeof="mw:File"] img {
		background-color: #c8ccd1;
	}
}

Kopiervorlage

<templatestyles src="NavFrame/styles.css" />

---

Deklarieren von NavFrame-Blöcken wie etwa einklappbare Navigationsleisten mittels Vorlage:Navigationsleiste. Außerdem nachgeordnete Klassen innerhalb solcher Blöcke.

Die umschlossenen Blöcke werden mit <div class="NavFrame"> gekennzeichnet.

Beispiele siehe Test.

Klassen

NavFrame

Umschließende Klasse.

Kennzeichnung eines eigenständigen Block-Elements.

Möglicherweise ein-/ausklappbar.

NavHead

Kopfbereich, etwa Titel einer Navigationsleiste.

Auch beim Einklappen immer sichtbar.

Standardmäßig zentriert dargestellt.

NavContent

Einklappbarer Inhaltsbereich unterhalb des Titels.

Keine besondere Formatierung.

NavPic

Links außen angeordnetes Bild, typischerweise ein Logo im Inhaltsbereich.

NavToggle

Element mit der Ein-/Ausklapp-Schaltfläche.

Rechts außen angeordnet.

Nur dynamisch durch JavaScript-Gadget generiert.