Jump to content

Template:Navbox/styles.css: Difference between revisions

From MTRNord's Wiki
Fix toggle
m Fix collapse button position
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
/*
* Navbox — collapsible bottom navigation box.
* Works with MediaWiki's built-in mw-collapsible JS.
*/
.mw-navbox {
.mw-navbox {
     border: 1px solid var(--border-color-base, #a2a9b1);
     border: 1px solid var(--border-color-base, #a2a9b1);
Line 12: Line 7:
     width: 100%;
     width: 100%;
     clear: both;
     clear: both;
    border-collapse: collapse;
}
}
.mw-navbox-title {
.mw-navbox-title {
Line 20: Line 16:
     padding: 3px 6px;
     padding: 3px 6px;
     border-bottom: 1px solid var(--border-color-base, #a2a9b1);
     border-bottom: 1px solid var(--border-color-base, #a2a9b1);
    position: relative;
}
}
.mw-navbox .mw-collapsible-toggle {
/* Toggle button injected into caption by mw-collapsible JS */
     position: absolute;
.mw-navbox-title .mw-collapsible-toggle {
    right: 6px;
     float: right;
    top: 3px;
     font-weight: normal;
     font-weight: normal;
     font-size: 95%;
     font-size: 95%;
    line-height: inherit;
}
}
.mw-navbox table {
.mw-navbox-inner {
     width: 100%;
     width: 100%;
     border-collapse: collapse;
     border-collapse: collapse;
}
}
.mw-navbox td {
.mw-navbox-inner tr + tr td,
    padding: 2px 6px;
.mw-navbox-inner tr + tr th {
    vertical-align: top;
     border-top: 1px solid var(--border-color-subtle, #c8ccd1);
     border-top: 1px solid var(--border-color-subtle, #c8ccd1);
}
}
Line 42: Line 36:
     white-space: nowrap;
     white-space: nowrap;
     text-align: right;
     text-align: right;
     padding-right: 8px;
     padding: 2px 8px 2px 6px;
     width: 15%;
     width: 15%;
     color: var(--color-subtle, #54595d);
     color: var(--color-subtle, #54595d);
     border-right: 1px solid var(--border-color-base, #a2a9b1);
     border-right: 1px solid var(--border-color-base, #a2a9b1);
    background: var(--background-color-neutral, #eaecf0);
}
.mw-navbox-list {
    padding: 2px 6px;
    text-align: left;
}
}
.mw-navbox-list { padding-left: 6px; }


/* Dark — title bar */
/* Dark — title bar */
@media screen {
@media screen {
     html.skin-theme-clientpref-night .mw-navbox-title { background: #1a3a5c; color: #eaecf0; }
     html.skin-theme-clientpref-night .mw-navbox-title {
        background: #1a3a5c;
        color: #eaecf0;
    }
}
}
@media screen and (prefers-color-scheme: dark) {
@media screen and (prefers-color-scheme: dark) {
     html.skin-theme-clientpref-os .mw-navbox-title { background: #1a3a5c; color: #eaecf0; }
     html.skin-theme-clientpref-os .mw-navbox-title {
        background: #1a3a5c;
        color: #eaecf0;
    }
}
}

Latest revision as of 14:12, 18 April 2026

.mw-navbox {
    border: 1px solid var(--border-color-base, #a2a9b1);
    background: var(--background-color-neutral-subtle, #f8f9fa);
    color: var(--color-base, #202122);
    font-size: 88%;
    margin: 1em auto 0;
    width: 100%;
    clear: both;
    border-collapse: collapse;
}
.mw-navbox-title {
    background: #cee0f2;
    color: var(--color-base, #202122);
    font-weight: bold;
    text-align: center;
    padding: 3px 6px;
    border-bottom: 1px solid var(--border-color-base, #a2a9b1);
}
/* Toggle button injected into caption by mw-collapsible JS */
.mw-navbox-title .mw-collapsible-toggle {
    float: right;
    font-weight: normal;
    font-size: 95%;
    line-height: inherit;
}
.mw-navbox-inner {
    width: 100%;
    border-collapse: collapse;
}
.mw-navbox-inner tr + tr td,
.mw-navbox-inner tr + tr th {
    border-top: 1px solid var(--border-color-subtle, #c8ccd1);
}
.mw-navbox-group {
    font-weight: bold;
    white-space: nowrap;
    text-align: right;
    padding: 2px 8px 2px 6px;
    width: 15%;
    color: var(--color-subtle, #54595d);
    border-right: 1px solid var(--border-color-base, #a2a9b1);
    background: var(--background-color-neutral, #eaecf0);
}
.mw-navbox-list {
    padding: 2px 6px;
    text-align: left;
}

/* Dark — title bar */
@media screen {
    html.skin-theme-clientpref-night .mw-navbox-title {
        background: #1a3a5c;
        color: #eaecf0;
    }
}
@media screen and (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .mw-navbox-title {
        background: #1a3a5c;
        color: #eaecf0;
    }
}