MediaWiki:Gadget-main-navbox.css: Difference between revisions
No edit summary |
No edit summary |
||
| (10 intermediate revisions by the same user not shown) | |||
| Line 3: | Line 3: | ||
--rgwiki-main-navbox-color-hue: 240deg; | --rgwiki-main-navbox-color-hue: 240deg; | ||
--rgwiki-main-navbox-color-saturation: 20%; | --rgwiki-main-navbox-color-saturation: 20%; | ||
--rgwiki-main-navbox-color-lightness-header: | --rgwiki-main-navbox-color-saturation-caption: 40%; | ||
--rgwiki-main-navbox-color-lightness-caption: 90%; | |||
--rgwiki-main-navbox-color-lightness-header: 92%; | |||
--rgwiki-main-navbox-color-lightness-row: 95%; | --rgwiki-main-navbox-color-lightness-row: 95%; | ||
--rgwiki-main-navbox-color-lightness-cell: 98%; | --rgwiki-main-navbox-color-lightness-cell: 98%; | ||
} | |||
/* Dark theme */ | |||
html.skin-theme-clientpref-night { | |||
--rgwiki-main-navbox-color-lightness-caption: 20%; | |||
--rgwiki-main-navbox-color-lightness-header: 18%; | |||
--rgwiki-main-navbox-color-lightness-row: 15%; | |||
--rgwiki-main-navbox-color-lightness-cell: 12%; | |||
} | |||
/* Automatic dark theme */ | |||
@media screen and (prefers-color-scheme: dark) { | |||
html.skin-theme-clientpref-os { | |||
--rgwiki-main-navbox-color-lightness-caption: 20%; | |||
--rgwiki-main-navbox-color-lightness-header: 18%; | |||
--rgwiki-main-navbox-color-lightness-row: 15%; | |||
--rgwiki-main-navbox-color-lightness-cell: 12%; | |||
} | |||
} | } | ||
| Line 11: | Line 31: | ||
.rgwiki-main-navbox-buttons { | .rgwiki-main-navbox-buttons { | ||
position: absolute; | position: absolute; | ||
right: | right: 8px; | ||
font-size: 8pt; | font-size: 8pt; | ||
font-weight: initial; | font-weight: initial; | ||
| Line 23: | Line 43: | ||
min-width: 400px; | min-width: 400px; | ||
width: 100%; /* <- This is optional. Without this, the navboxes work fine and are only as wide as they need to be, which may be desirable in some cases. However, there is a drawback: the "collapse" buttons move after they are clicked. Setting width to 100% makes it so the buttons always stay in the same place. */ | width: 100%; /* <- This is optional. Without this, the navboxes work fine and are only as wide as they need to be, which may be desirable in some cases. However, there is a drawback: the "collapse" buttons move after they are clicked. Setting width to 100% makes it so the buttons always stay in the same place. */ | ||
--rgwiki-main-navbox-color-caption: hsl(var(--rgwiki-main-navbox-color-hue), var(--rgwiki-main-navbox-color-saturation-caption), var(--rgwiki-main-navbox-color-lightness-caption)); | |||
} | } | ||
.rgwiki-main-navbox caption { | .rgwiki-main-navbox .rgwiki-main-navbox-caption th { | ||
font-weight: bold; | font-weight: bold; | ||
background-color: var(--rgwiki-main-navbox-color-caption); | |||
padding: 2px; | |||
box-sizing: border-box; | |||
} | } | ||
| Line 60: | Line 85: | ||
.rgwiki-main-navbox-section td { | .rgwiki-main-navbox-section td { | ||
padding-left: 4px; | |||
padding-right: 4px; | |||
background-color: var(--rgwiki-main-navbox-color-cell); | background-color: var(--rgwiki-main-navbox-color-cell); | ||
} | } | ||