MediaWiki:RPGC-width.css: Difference between revisions

From RPG Continuum Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 38: Line 38:
}
}


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


/* Narrow-window override
    body #mw-panel.vector-legacy-sidebar {
  Must remain after the readable/full-width rules. */
        display: none !important;
@media screen and (max-width: 950px) {
        visibility: hidden !important;
        width: 0 !important;
        left: -9999px !important;
        pointer-events: none !important;
    }


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


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


     #bodyContent {
     body #mw-head-base,
    body #mw-head,
    body #left-navigation {
        margin-left: 0 !important;
    }
 
    body #bodyContent {
         padding-left: 1rem !important;
         padding-left: 1rem !important;
         padding-right: 1rem !important;
         padding-right: 1rem !important;
Line 71: Line 82:
     }
     }


     /* Hide width control because both modes collapse to mobile width */
     body #rpgc-width-toggle {
    #rpgc-width-toggle {
         display: none !important;
         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;
     }
     }
}
}

Revision as of 13:42, 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: 1200px) {

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