Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Join the Playtest on Steam Now: SpiritVale

MediaWiki:Mobile.css: Difference between revisions

MediaWiki interface page
Tags: Mobile edit Mobile web edit
 
Blanked the page
Tags: Blanking Mobile edit Mobile web edit
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* ============================================================================
  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;
    }
}