Template:Navbox/styles.css: Difference between revisions
Created page with "→* Navbox — collapsible bottom navigation box. * Works with MediaWiki's built-in mw-collapsible JS.: .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; } .mw-navbox-title { background: #cee0f2; color: var(--color-base, #202122); font-weight: bold;..." |
m Fix collapse button position |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
.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 21: | Line 17: | ||
border-bottom: 1px solid var(--border-color-base, #a2a9b1); | border-bottom: 1px solid var(--border-color-base, #a2a9b1); | ||
} | } | ||
/* Toggle button injected into caption by mw-collapsible JS */ | |||
.mw-navbox-title .mw-collapsible-toggle { | .mw-navbox-title .mw-collapsible-toggle { | ||
float: right; | float: right; | ||
font-weight: normal; | font-weight: normal; | ||
font-size: 95%; | font-size: 95%; | ||
line-height: inherit; | |||
} | } | ||
.mw-navbox | .mw-navbox-inner { | ||
width: 100%; | width: 100%; | ||
border-collapse: collapse; | border-collapse: collapse; | ||
} | } | ||
.mw-navbox td | .mw-navbox-inner tr + tr td, | ||
.mw-navbox-inner tr + tr th { | |||
border-top: 1px solid var(--border-color-subtle, #c8ccd1); | border-top: 1px solid var(--border-color-subtle, #c8ccd1); | ||
} | } | ||
| Line 39: | Line 36: | ||
white-space: nowrap; | white-space: nowrap; | ||
text-align: right; | text-align: right; | ||
padding | 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; | |||
} | } | ||
/* 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; | |||
} | |||
} | } | ||