MediaWiki:Mobile.css: Difference between revisions

Revision as of 16:21, 25 February 2026

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

/* ------------------------------------------------------------------------
4) SV shared components (mobile): enforce opaque surfaces
------------------------------------------------------------------------ */

  :where(.sv-gi-card, .sv-skill-card, .sv-card)
  :where(.sv-tabpanel, .sv-disclose-pop, .sv-tip-pop) {
    background: var(--sv-ui-bg0) !important;
    border-color: var(--sv-ui-line1) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  :where(.sv-gi-card, .sv-skill-card, .sv-card)
  :where(.sv-tab, .sv-disclose-btn, .sv-tip-btn) {
    background: var(--sv-ui-bg2) !important;
    border-color: var(--sv-ui-line2) !important;
  }

/* ------------------------------------------------------------------------
SV utility: right-side infobox wrapper (mobile)
------------------------------------------------------------------------ */

.sv-card.sv-infobox-right{
float:none !important;
max-width:none !important;
margin:0 0 12px 0 !important;
}

/* Class Overview: mobile alignment */
.sv-class-overview__label,
.sv-class-overview__value{
text-align:left;
}

}