MediaWiki:Mobile.css
MediaWiki interface page
More actions
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;
}
/* ------------------------------------------------------------------------
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;
}
/* ------------------------------------------------------------------------
SV GameInfo / GameSkills (mobile): enforce opaque surfaces + no frosted glass
------------------------------------------------------------------------ */
.sv-gi-card,
.sv-skill-card {
background-image: none !important;
}
/* Shared components (from Common.css) */
.sv-gi-card .sv-tabpanel,
.sv-skill-card .sv-tabpanel,
.sv-gi-card .sv-disclose-pop,
.sv-skill-card .sv-disclose-pop,
.sv-gi-card .sv-tip-pop,
.sv-skill-card .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;
}
/* Button-like surfaces */
.sv-gi-card .sv-tab,
.sv-skill-card .sv-tab,
.sv-gi-card .sv-disclose-btn,
.sv-skill-card .sv-disclose-btn,
.sv-gi-card .sv-tip-btn,
.sv-skill-card .sv-tip-btn {
background: var(--sv-ui-bg2) !important;
border-color: var(--sv-ui-line2) !important;
}
/* Key module panels that still come from TemplateStyles */
.sv-gi-card .sv-meta-card,
.sv-skill-card .sv-meta-card,
.sv-skill-level,
.sv-gi-card .sv-scaling-row,
.sv-skill-card .sv-scaling-row,
.sv-gi-card .sv-core-row,
.sv-skill-card .sv-core-row,
.sv-gi-card .sv-core-cell,
.sv-skill-card .sv-core-cell,
.sv-gi-card .sv-kw-cell,
.sv-skill-card .sv-kw-cell,
.sv-gi-card .sv-ref-card,
.sv-skill-card .sv-ref-card {
background: var(--sv-ui-bg1) !important;
border-color: var(--sv-ui-line1) !important;
}
/* GameInfo: ensure meta pills + level area are opaque too */
.sv-skill-card .sv-skill-meta .sv-pill,
.sv-skill-card .sv-skill-level {
background: var(--sv-ui-bg1) !important;
border-color: var(--sv-ui-line1) !important;
}
/* ------------------------------------------------------------------------
SV GameInfo / GameSkills (mobile): extra inner gutters + scroll-safe buffer
------------------------------------------------------------------------ */
.sv-gi-top,
.sv-skill-top{
/* extra horizontal inset for thumb-safe scrolling near edges */
padding-left:20px !important;
padding-right:20px !important;
}
.sv-gi-bottom,
.sv-skill-bottom{
padding-left:20px !important;
padding-right:20px !important;
}
/* Add a small inert zone at the end of the card so swipes don't grab controls */
.sv-gi-bottom::after,
.sv-skill-bottom::after{
content:"";
display:block;
height:12px;
pointer-events:none;
}
/* Meta row: keep 2 columns and center the group away from edges */
.sv-skill-card .sv-skill-meta,
.sv-gi-card .sv-skill-meta{
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
max-width:360px;
margin-left:auto;
margin-right:auto;
justify-content:center;
}
}