MediaWiki:Gadget-main-navbox.css: Difference between revisions

Latest revision as of 13:29, 23 March 2025

/* Variables */
:root {
    --rgwiki-main-navbox-color-hue: 240deg;
    --rgwiki-main-navbox-color-saturation: 20%;
    --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-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%;
    }
}

/* Template:NavBox */
.rgwiki-main-navbox-buttons {
    position: absolute;
    right: 8px;
    font-size: 8pt;
    font-weight: initial;
}

.rgwiki-main-navbox {
    margin: auto;
    margin-top: 16px;
    border-collapse: collapse;
    position: relative;
    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. */

    --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 .rgwiki-main-navbox-caption th {
    font-weight: bold;
    background-color: var(--rgwiki-main-navbox-color-caption);
    padding: 2px;
    box-sizing: border-box;
}

.rgwiki-main-navbox-section {
    width: 100%;
    margin: 0;

    --rgwiki-main-navbox-color-header: hsl(var(--rgwiki-main-navbox-color-hue), var(--rgwiki-main-navbox-color-saturation), var(--rgwiki-main-navbox-color-lightness-header));
    --rgwiki-main-navbox-color-row: hsl(var(--rgwiki-main-navbox-color-hue), var(--rgwiki-main-navbox-color-saturation), var(--rgwiki-main-navbox-color-lightness-row));
    --rgwiki-main-navbox-color-cell: hsl(var(--rgwiki-main-navbox-color-hue), var(--rgwiki-main-navbox-color-saturation), var(--rgwiki-main-navbox-color-lightness-cell));
}

.rgwiki-main-navbox-section .rgwiki-main-navbox-header-row {
    white-space: nowrap;
    padding-left: 8px;
    padding-right: 8px;
    background-color: var(--rgwiki-main-navbox-color-header);
}

.rgwiki-main-navbox-section .rgwiki-main-navbox-header-row .mw-collapsible-toggle {
    position: absolute;
    right: 10px;
}

.rgwiki-main-navbox-section .rgwiki-main-navbox-row {
    white-space: nowrap;
    text-align: right;
    padding-left: 8px;
    padding-right: 8px;
    width: 0;
    background-color: var(--rgwiki-main-navbox-color-row);
}

.rgwiki-main-navbox-section td {
    padding-left: 4px;
    padding-right: 4px;
    background-color: var(--rgwiki-main-navbox-color-cell);
}

.rgwiki-main-navbox-section ul {
    display: inline;
    margin: 0;
}

.rgwiki-main-navbox-section li {
    display: inline list-item;
    margin-left: 2px;
}

.rgwiki-main-navbox-section li:first-child {
    display: inline;
    margin-left: 0;
}

.rgwiki-main-navbox-section ul ul::before {
    content: "(";
}

.rgwiki-main-navbox-section ul ul::after {
    content: ")";
}