Vorlage:Erweiterte Navigationsleiste/styles

[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 */
	color: #000;
}
.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 */
	color: #000;
}
.navbox-odd {
	background-color: transparent;  /* Odd row striping */
	color: #000;
}

.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;
		/*border: none !important;*/
		position: relative;
		text-align: center !important;
		/*padding-left: 2px; */
		padding-right: 2px;
	}
	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;
	}
	/* Fix old Untergruppe */
	.navbox-container .wikitable {
		border: none !important;
	}
	.navbox-container .navbox-image {
		display: none;
	}
}

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

Kopiervorlage

<templatestyles src="Erweiterte Navigationsleiste/styles.css" />

---

Verwendung

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

Eigenschaften

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.

• v
• d
• b

Titel

Gruppe1	Untergruppe1 Unter-Untergruppe1 Inhalt U 1/1/1 Unter-Untergruppe2 Inhalt U 1/1/2 Untergruppe2 Inhalt U 1/2
Gruppe2	Inhalt2

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.

• v
• d
• b

Titel

Gruppe1	Inhalt1 Inhalt2 Inhalt3 Inhalt4

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

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.