Module:Navbox/styles.css
Jump to navigation
Jump to search
/**
* Module:Navbox/styles.css
* TemplateStyles for navigation boxes.
*
* INSTALLATION:
* 1. Create page: Module:Navbox/styles.css
* 2. Paste this entire file
* 3. Mark as sanitized CSS (Content model: Sanitized CSS)
*
* DARK MODE:
* Uses [data-theme="dark"] selector to match wiki's dark mode toggle.
*/
/* ==========================================================================
NAVBOX BASE
========================================================================== */
.navbox {
width: 100%;
clear: both;
margin: auto;
margin-top: 1em;
border: 1px solid #a2a9b1;
border-spacing: 0;
background-color: #fdfdfd;
text-align: center;
font-size: 0.9em;
}
/* Nested navboxes */
.navbox .navbox {
margin: 0;
border: none;
font-size: 100%;
}
/* ==========================================================================
TITLE
========================================================================== */
.navbox-title {
background-color: #ccc;
padding: 0.25em 0.5em;
text-align: center;
font-weight: bold;
font-size: 1.1em;
position: relative;
}
.navbox-title-text {
display: inline;
}
/* V-T-E links */
.navbox-vte {
float: left;
width: 6em;
text-align: left;
font-size: 0.8em;
font-weight: normal;
}
.navbox-vte a {
text-decoration: none;
}
/* ==========================================================================
ABOVE/BELOW
========================================================================== */
.navbox-above,
.navbox-below {
background-color: #ddd;
padding: 0.25em 0.5em;
text-align: center;
font-size: 0.95em;
}
/* ==========================================================================
GROUPS AND LISTS
========================================================================== */
.navbox-group {
background-color: #ddd;
padding: 0.25em 0.5em;
text-align: left;
font-weight: bold;
white-space: nowrap;
width: 1%;
}
.navbox-list {
padding: 0.25em 0.5em;
text-align: left;
border-left: 2px solid #fdfdfd;
}
.navbox-list-full {
text-align: center;
border-left: none;
}
/* Alternating row colors */
.navbox tr:nth-child(even) .navbox-list {
background-color: #f8f9fa;
}
.navbox tr:nth-child(odd) .navbox-list {
background-color: #fdfdfd;
}
/* Subheader */
.navbox-subheader {
background-color: #e5e5e5;
padding: 0.2em 0.4em;
text-align: center;
font-weight: bold;
font-size: 0.95em;
}
/* ==========================================================================
NAVBAR (V-T-E)
========================================================================== */
.navbar {
font-size: 0.85em;
font-weight: normal;
}
.navbar a {
text-decoration: none;
}
.navbar-mini {
font-size: 0.8em;
}
/* ==========================================================================
HLIST / FLATLIST
========================================================================== */
.hlist,
.flatlist {
display: inline;
}
/* ==========================================================================
COLLAPSIBLE BEHAVIOR
========================================================================== */
/* Hide collapsed content (works with MW collapsible) */
.navbox.mw-collapsed > tbody > tr:not(:first-child) {
display: none;
}
.navbox.mw-collapsed .navbox-title::after {
content: ' [show]';
font-weight: normal;
font-size: 0.8em;
}
.navbox:not(.mw-collapsed) .navbox-title::after {
content: ' [hide]';
font-weight: normal;
font-size: 0.8em;
}
.navbox-expanded .navbox-title::after {
content: none;
}
/* ==========================================================================
DARK MODE
Note: Dark mode styles are in MediaWiki:Gadget-darkmode.css
TemplateStyles prefixes selectors with .mw-parser-output which breaks
[data-theme="dark"] selectors (data-theme is on <html>).
========================================================================== */
/* ==========================================================================
PRINT STYLES
========================================================================== */
@media print {
.navbox {
border-color: #000;
background-color: #fff;
}
.navbox-title,
.navbox-above,
.navbox-below,
.navbox-group,
.navbox-subheader {
background-color: #ddd;
color: #000;
}
.navbox-list {
background-color: #fff;
color: #000;
}
.navbox-vte {
display: none;
}
.navbox-title::after {
content: none;
}
}