Vorlage:Erweiterte Navigationsleiste/styles

aus Wikipedia, der freien Enzyklopädie
Zur Navigation springen Zur Suche springen
[Verwendung]   [CSS bearbeiten]

Diese Seite dokumentiert TemplateStyles betreffend Vorlage:Erweiterte Navigationsleiste.
Sie sind auf dieser Seite aktiviert.

CSS

.navbox-nowrap,
/*.navbox-nowraplinks a, */
.navbox-nowraplinks .selflink {
	white-space: nowrap;
}
.navbox-nowrap pre {
	white-space: pre;
}

/* Style for horizontal lists (separator following item). */
.navbox-hlist ul {
	margin: 0;
	padding: 0;
}
/* Display list items inline */
.navbox-hlist li {
	display: inline;
}
/* Display nested lists inline */
.navbox-hlist.inline,
.navbox-hlist.inline ul,
.navbox-hlist ul ul {
	display: inline;
}
/* Hide empty list items */
.navbox-hlist .mw-empty-li {
	display: none;
}
/* Generate interpuncts */
.navbox-hlist li:after {
	content: "\00A0• ";
	font-weight: bold;
}
.navbox-hlist li:last-child:after {
	content: none;
}
/* Add parentheses around nested lists */
.navbox-hlist li li:first-child:before {
	content: " (";
	font-weight: normal;
}
.navbox-hlist li li:last-child:after {
	content: ")";
	font-weight: normal;
}
td.navbox-hlist {
	padding: 0;
}

/* Default style for navigation boxes */
.navbox-container {                     /* Navbox container style */
	box-sizing: border-box;
	border: 1px solid #a2a9b1;
	width: 100%;
	clear: both;
	font-size: 88% !important;
	text-align: center;
	padding: 1px;
	margin: 1em auto 0;       /* Prevent preceding content from clinging to navboxes */
	overflow: auto;
}
.navbox-container table {
	margin: 0;
}
.navbox-container .navbox-container {
	margin-top: 0;            /* No top margin for nested navboxes */
}
.navbox-container + .navbox-container,
.navbox-container + link + .navbox-container,
.navbox-container + style + .navbox-container {
	margin-top: -1px;         /* Single pixel border between adjacent navboxes */
}
.navbox-inner,
.navbox-subgroup {
	width: 100%;
}
.navbox-group,
.navbox-abovebelow {
	padding: .25em 1em;      /* Goup and above/below styles */
	line-height: 1.5em;
	text-align: center;
}
.navbox-title {
	padding: .2em .5em;      /* Title styles */
	line-height: 1.6em;
	text-align: center;
}
.navbox-container .NavToggle {
	padding-right: .5em;
	padding-top: .4em;
}
.navbox-container .NavContent {
	margin-top: 2px;
}
.NavHead + .navbox-subgroup {
	margin-top: 2px;
}
/*.navbox-list .NavHead {
	margin-top: 2px;
} */
th.navbox-group {             /* Group style */
	white-space: nowrap;
	/* @noflip */
	text-align: right;
}
.navbox-container,
.navbox-subgroup {
	background-color: #fdfdfd; /* Background color */
}
.navbox-list {
	line-height: 1.5em;
	border-color: #fdfdfd;    /* Must match background color */
}
/* cell spacing for navbox cells */
tr + tr > .navbox-abovebelow,
tr + tr > .navbox-group,
tr + tr > .navbox-image,
tr + tr > .navbox-list {    /* Borders above 2nd, 3rd, etc. rows */
	border-top: 2px solid #fdfdfd; /* Must match background color */
}
/*.navbox-container th,
.navbox-title,
.navbox-container .NavHead {
	background-color: #ccccff;       Level 1 color 
	color: #000;
}*/
/* NavHead from Common.css, to make it apply also on mobile */
.NavHead.navbox-title {
	background: #efefef;
	color: #000;
	font-weight: bold;
}
th.navbox-group,
.navbox-subgroup .navbox-title {
	background-color: #dde5ee;      /* Level 2 color */
	color: #000;
}
.navbox-abovebelow {
	background-color: #f5f5f5;
	color: #000;
}
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
	background-color: #e7edf4;      /* Level 3 color */
	color: #000;
}
.navbox-even {
	background-color: #f8f9fa;      /* Even row striping */
}
.navbox-odd {
	background-color: transparent;  /* Odd row striping */
}

.navbox-container .navbox-hlist td div,
.navbox-container td.navbox-hlist div {
	padding: .125em 0;       /* Adjust hlist padding in navboxes */
}

/* Default styling for Navbar template */
.navbox-navbar {
	display: inline;
	font-size: 88%;
	font-weight: normal;
}
.navbox-navbar ul {
	display: inline-block;
	white-space: nowrap;
	line-height: inherit;
}
.navbox-navbar li {
	word-spacing: -0.125em;
}
.navbox-navbar.navbox-mini li abbr[title] {
	font-variant: small-caps;
	border-bottom: none;
	text-decoration: none;
	cursor: inherit;
}
/* Navbar styling when nested in infobox and navbox */
.navbox-container .navbox-navbar {
	display: block;
	font-size: 100%;
	visibility: hidden;
}
.navbox-title .navbox-navbar {
	/* @noflip */
	float: left;
	/* @noflip */
	text-align: left;
	/* @noflip */
	margin-right: .5em;
}

/* Mobile devices */
@media 
only screen and (max-width:719px)  {
	/* Force table to not be like tables anymore */
	.navbox-container table, .navbox-container th, .navbox-container tbody, .navbox-container td, .navbox-container tr { 
		display: block;
	}
	.navbox-container td { 
		/* Behave  like a "row" */
		width: auto !important;
		position: relative;
		text-align: center !important;
	}
	tr > .navbox-list {
		border-top: 2px solid #fdfdfd; /* Must match background color */
	}
	.NavContent > .navbox-inner > tbody > tr:first-of-type > .navbox-list > .navbox-title {
		margin-top: -2px;
	}
	.navbox-container th {
		width: auto !important;
		text-align: center;
	}
	.navbox-nowrap,
	.navbox-nowraplinks a,
	.navbox-nowraplinks .selflink {
		white-space: normal;
	}
	th.navbox-group {
		white-space: normal;
	}
	.navbox-list {
		border-right-style: solid;
	    border-right-width: 2px;
	}
	/* Fix old Untergruppe */
	.navbox-container .wikitable {
		border: none !important;
	}
	.navbox-container .navbox-image {
		display: none;
	}
}

@media screen {
	html.skin-theme-clientpref-night .navbox,
	html.skin-theme-clientpref-night .navbox-container,
	html.skin-theme-clientpref-night .navbox-group,
	html.skin-theme-clientpref-night .navbox-subgroup,
	html.skin-theme-clientpref-night .navbox-even,
	html.skin-theme-clientpref-night .navbox-abovebelow {
	    background-color: inherit !important;
	    color: inherit !important;
	    border-color: #54595d;
	}
	html.skin-theme-clientpref-night .navbox-odd {
		border-color: #54595d;
	}
	html.skin-theme-clientpref-night .navbox-title {
	    background-color: var(--dewiki-hintergrundfarbe5) !important;
	    color: inherit !important;
	}
}
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .navbox,
	html.skin-theme-clientpref-os .navbox-container,
	html.skin-theme-clientpref-os .navbox-group,
	html.skin-theme-clientpref-os .navbox-subgroup,
	html.skin-theme-clientpref-os .navbox-even,
	html.skin-theme-clientpref-os .navbox-abovebelow {
	    background-color: inherit !important;
	    color: inherit !important;
	    border-color: #54595d;
	}
	html.skin-theme-clientpref-os .navbox-odd {
		border-color: #54595d;
	}
	html.skin-theme-clientpref-os .navbox-title {
	    background-color: var(--dewiki-hintergrundfarbe5) !important;
	    color: inherit !important;
	}
}

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

Kopiervorlage

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

Verwendung

[Quelltext bearbeiten]

Das Stylesheet wird von {{Erweiterte Navigationsleiste/Lua}} automatisch eingebunden.

Eigenschaften

[Quelltext bearbeiten]

Die Erweiterte Navigationsleiste ist im Wesentlichen eine Tabelle, die analog zur einfachen {{Navigationsleiste}} innerhalb eines {{NavFrame}} erzeugt wird. Die Inhaltszeilen können nach Bedarf mit einer vorgestellten Titelzelle beschrieben werden, wodurch sich ein zumeist zweispaltiges Layout ergibt. Pro Zeile kann eine weitere Navigationsleiste als „Untergruppe“ eingebunden werden, wodurch mehr Spalten (für mehr Navigationsebenen) erzeugt werden.

Inhalte in den Inhaltszellen können als HTML-Listen eingetragen werden (eine Aufzählung mittels * in Wikisyntax), welche von der Vorlage automatisch in horizontale Auflistungen umgewandelt werden.

Die Tabellen sind für Mobilgeräte optimiert und werden auf schmalen Bildschirmen aufgebrochen. Dadurch folgen Gruppen- und Inhaltszellen dort vertikal hintereinander statt im Spaltenlayout.

Klassen

[Quelltext bearbeiten]
navbox-container
Gibt Eigenschaften für die die Navigationsleiste umgebende Box (Div-Element) vor.
navbox-inner
Gibt Eigenschaften für den Haupt-Inhaltsbereich (Tabelle) der Navigationsleiste vor.
navbox-subgroup
Gibt Eigenschaften für Untergruppen der Navigationsleiste vor.
navbox-title
Gibt Eigenschaften für die Titelzeile der Navigationsleiste vor.
navbox-abovebelow
Gibt Eigenschaften für Kopf- und Fußzeilen (Untertitel, Weiteres, Anmerkungen) der Navigationsleiste vor.
navbox-group
Gibt Eigenschaften für einzelne Gruppen (linke Spalte der Inhaltsbereiche) der Navigationsleiste vor.
navbox-list
Gibt Eigenschaften für Inhaltszellen (rechte Spalte der Inhaltsbereiche) der Navigationsleiste vor.
navbox-even
Gibt die Farbe von geradzahligen Inhaltszellen der Navigationsleiste vor.
navbox-odd
Gibt die Farbe von ungeradzahligen Inhaltszellen der Navigationsleiste vor.
navbox-image
Gibt Eigenschaften für Bilder in der Navigationsleiste vor.
navbox-navbar
Gibt Eigenschaften für die Quicklinks/Navbar (Titelzeile) in der Navigationsleiste vor.
navbox-mini
Ermöglicht eine alternative Darstellung der Quicklinks/Navbar (Titelzeile) in der Navigationsleiste, in Kleinschreibung und mit zusätzlichen Tooltips.
navbox-nowrap, navbox-nowraplist
Elemente werden in der Desktopversion nicht umbrochen.
navbox-hlist
Wandelt HTML-Listen (li) in horizontale Aufzählungen um, wobei einzelne Listenelemente durch • getrennt werden. Aufzählungen über mehrere Ebenen werden durch Klammereinschübe kenntlich gemacht.
Abgerufen von „https://de.wikipedia.org/w/index.php?title=Vorlage:Erweiterte_Navigationsleiste/styles&oldid=220546957“