MediaWiki:Mobile.css: Difference between revisions
MediaWiki interface page
More actions
Created page with "→============================================================================ 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 safet..." Tags: Mobile edit Mobile web edit |
No edit summary Tags: Mobile edit Mobile web edit |
||
| 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) { | @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; | |||
} | |||
/* ------------------------------------------------------------------------ | |||
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; | |||
} | |||
} | } | ||