MediaWiki:Mobile.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.

/* ============================================================================
   SpiritVale Wiki — Mobile.css
   Mobile policy enforcement (<= 500px)
   - No frosted glass / no transparency
   - Mobile-only layout tightening + overflow safety
============================================================================ */

@media (max-width: 500px) {

    /* ------------------------------------------------------------------------
       0) Global mobile overflow safety
    ------------------------------------------------------------------------ */

    html,
    body {
        overflow-x: hidden;
    }

    img,
    video,
    iframe,
    embed,
    object {
        max-width: 100%;
        height: auto;
    }

    /* Wide tables scroll instead of blowing the layout */
    table,
    .wikitable,
    table.custom-table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    th,
    td {
        white-space: nowrap;
    }

    /* ------------------------------------------------------------------------
       1) Citizen mobile hard rule: no frosted glass / no transparency
       (moved from Citizen.css)
    ------------------------------------------------------------------------ */

    :root {
        --backdrop-filter-frosted-glass: none !important;
        --opacity-glass: 1 !important;
    }

    body.skin-citizen .citizen-menu__card,
    body.skin-citizen .citizen-drawer__card,
    body.skin-citizen .citizen-search__form,
    body.skin-citizen .citizen-search__footer {
        background: var(--color-surface-1) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* ------------------------------------------------------------------------
       2) Hero Infobox System: mobile layout rules (moved from Common.css)
    ------------------------------------------------------------------------ */

    :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot-grid {
        grid-template-columns: 1fr;
        gap: 0.50em;
        padding: 0.70em;
    }

    :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
    :where(.sv-type-label, .sv-source-pill, .sv-m4-label, .sv-sm-label, .sv-sm-flag, .sv-pill, .sv-pill--req) {
        width: auto !important;
        display: inline-block !important;
        max-width: 100%;
        white-space: nowrap;
        padding: 0.22em 0.45em;
    }

    table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-2 {
        grid-template-columns: 1fr;
    }

    /* ------------------------------------------------------------------------
       3) Mobile “no transparency” for legacy tooltip/button UI
       (this replaces the old Common.css mobile block)
    ------------------------------------------------------------------------ */

    :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-pop {
        background: var(--sv-ui-bg0) !important;
        border: 1px solid var(--sv-ui-line1) !important;
    }

    :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
    .module-icon-name .sv-tip-btn--notes {
        background: var(--sv-ui-bg2) !important;
        border: 1px solid var(--sv-ui-line2) !important;
    }

    :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
    .module-icon-name .sv-tip-btn--notes:hover {
        background: var(--sv-ui-bg3) !important;
    }
}