MediaWiki:RPGC-width.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* 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;
}


/* Narrow-window override
   Must remain after the readable/full-width rules. */
@media screen and (max-width: 950px) {

    /* Remove the legacy Vector sidebar and its reserved area */
    #mw-panel,
    #p-logo {
        display: none !important;
    }

    #mw-head-base,
    #content,
    .mw-body,
    body.rpgc-readable-width .mw-body,
    body.rpgc-full-width .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;
    }

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

    /* Hide width control because both modes collapse to mobile width */
    #rpgc-width-toggle {
        display: none !important;
    }

    /* Avoid wide infoboxes forcing the page sideways */
    .rpgc-infobox {
        float: none !important;
        clear: both !important;
        width: auto !important;
        max-width: 420px !important;
        margin: 1rem auto !important;
    }

    #toc,
    .toc {
        float: none !important;
        width: auto !important;
        margin: 1rem 0 !important;
    }
}