MediaWiki:Vector.less/navbox.less
Jump to navigation
Jump to search
/* ===========================
[[Template:Navbox]]
=========================== */
:root {
--navbox-background: @BODY_LIGHT;
--navbox-border: @BODY_DARK;
--navbox-title-background: @BODY_DARK;
--navbox-footer-background: @BODY_DARK;
--navbox-group-title-background: @BODY_MID;
}
.navbox {
font-size: .85em;
background: var(--navbox-background);
border-collapse: collapse;
margin: 1em auto 0; // 0 as .catlinks has margin already + navboxes are expected to be the last element on the page
width: 100%;
clear: both;
box-shadow: @box-shadow;
img {
// retina support
.pixelate();
}
// nested navboxes
.navbox {
font-size: 100%;
margin: 0.5em auto 0;
box-shadow: none;
}
}
@header-padding: 0.25em 1em;
// main header
.navbox-title {
font-size: 110%;
line-height: 1.6em;
background: var(--navbox-title-background);
text-align: center;
padding: @header-padding;
&-name {
// Navbox title text - prev done via fixed width on both collapse button
// and navbar to prevent title shift
margin: 0 4em;
}
// Fix toggle style being different before JS takes over.
.mw-collapsible-toggle {
font-size: .9em;
text-align: right;
}
// nested navboxes
.navbox {
font-size: 100%;
}
}
.navbox-group:nth-child(2) {
// separating border in case group-title and title background match e.g. dark mode
border-top: 1px solid var(--navbox-border);
}
// navbox group title
.navbox-group-title {
background: var(--navbox-group-title-background);
border: 1px solid var(--navbox-border);
border-width: 0 1px 1px 0; // right and bottom
text-align: left;
padding: @header-padding;
// needs <br> tags in cases of long titles
width: 1%;
white-space: nowrap;
}
// navbox group content
.navbox-list {
border-bottom: 1px solid var(--navbox-border);
padding: 0.25em 0.5em;
ul {
margin: 0;
}
// list styling
li {
display: inline;
white-space: nowrap;
& + li::before {
content: '• ';
}
}
}
// parent of a subgroup
.navbox-parent {
padding: 0;
}
// nested group content
.navbox-subgroup {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
// if the nested group title ever needs to be changed
.navbox-group-title {
// background: @BODY_LIGHT;
}
> tbody > tr:last-child > th,
> tbody > tr:last-child > td {
border-bottom: none;
}
}
// footer
.navbox-footer {
background: var(--navbox-footer-background);
text-align: center;
padding: @header-padding;
}
.navbox-data {
display: none;
}