MediaWiki:RPGC-width.css: Difference between revisions

Latest revision as of 13:53, 11 July 2026

/* Default readable-width article layout */
body.rpgc-readable-width .mw-body {
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
}

/* Full-width mode */
body.rpgc-full-width .mw-body {
    max-width: none !important;
    margin-left: 176px !important;
    margin-right: 24px !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
}

/* Title-row width toggle */
#rpgc-width-toggle {
    float: right;
    margin-top: 8px;
    margin-left: 12px;
    background: #171d24;
    color: #d7dce3;
    border: 1px solid #2a333d;
    border-bottom: 2px solid #315f9d;
    padding: 4px 8px;
    font-size: 11px;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(79,134,214,.2);
}

#rpgc-width-toggle:hover {
    background: #233044;
    color: #fff;
}

/* Collapse legacy Vector sidebar before it can overlap the article */
@media screen and (max-width: 1389px) {

    body #left-navigation {
        left: 12px !important;
        margin-left: 0 !important;
    }

    body #mw-panel.vector-legacy-sidebar {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        left: -9999px !important;
        pointer-events: none !important;
    }

    body #p-logo {
        display: none !important;
    }

    /* Remove legacy Vector's sidebar reservation */
    body #content.mw-body,
    body .mw-body,
    body.rpgc-readable-width #content.mw-body,
    body.rpgc-full-width #content.mw-body,
    body.rpgc-narrow-width #content.mw-body {
        width: auto !important;
        max-width: none !important;

        margin-left: 12px !important;
        margin-right: 12px !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body #mw-head-base,
    body #mw-head,
    body #left-navigation {
        margin-left: 0 !important;
    }

    body #bodyContent {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        box-sizing: border-box !important;
        overflow-wrap: anywhere;
    }

    body #rpgc-width-toggle {
        display: none !important;
    }
}


/* Align Page / Discussion tabs with the article's left edge */

/* Readable mode: article is 1280px wide and centered */
body.rpgc-readable-width #left-navigation {
    position: absolute !important;
    left: max(10em, calc(50% - 640px)) !important;
    margin-left: 0 !important;
}

/* Full-width mode: align with the ordinary post-sidebar content edge */
body.rpgc-full-width #left-navigation {
    position: absolute !important;
    left: 10em !important;
    margin-left: 0 !important;
}