MediaWiki:Common.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 — Common.css
Sitewide base + shared SpiritVale components (all skins)
- No Citizen skin selectors
- No mobile-only (@media max-width:500) rules (those live in Mobile.css)
============================================================================ */
/* ----------------------------------------------------------------------------
1) SpiritVale tokens (fallback defaults)
- Citizen.css exports will override these where appropriate.
---------------------------------------------------------------------------- */
:root{
/* SV UI tokens (fallback) */
--sv-ui-bg0:#0f172a;
--sv-ui-bg1:#1f2937;
--sv-ui-bg2:#273449;
--sv-ui-bg3:#2e3f59;
--sv-ui-line1:#3b4b63;
--sv-ui-line2:#4b6388;
--sv-ui-text1:#f5f9ff;
--sv-ui-text2:#d7e2f4;
--sv-ui-text3:#b6c6e0;
--sv-ui-accent:#6aa6ff;
--sv-ui-accent2:#8cbcff;
/* Popover tuning tokens */
--sv-ui-pop-bg:var(--sv-ui-bg0);
--sv-ui-pop-line:var(--sv-ui-line2);
--sv-ui-pop-shadow:0 10px 30px rgba(0,0,0,0.35);
--sv-ui-rad-sm:10px;
--sv-ui-rad-md:14px;
--sv-ui-rad-lg:18px;
--sv-ui-rad-pill:999px;
--sv-ui-shadow1:0 10px 28px rgba(0,0,0,0.40);
/* Legacy hero infobox variables (mapped to SV UI tokens) */
--sv-skill-width:660px;
--sv-passive-width:540px;
--sv-base:var(--sv-ui-bg0);
--sv-surface:var(--sv-ui-bg2);
--sv-card-border:var(--sv-ui-line1);
--sv-row-border:var(--sv-ui-line1);
--sv-gridline:var(--sv-ui-line2);
--sv-pill:var(--sv-ui-bg3);
--sv-pill-a:var(--sv-ui-bg3);
--sv-pill-b:var(--sv-ui-bg3);
--sv-text-soft:var(--sv-ui-text1);
--sv-text-outline:0 1px 0 rgba(0,0,0,0.55),
0 -1px 0 rgba(0,0,0,0.55),
1px 0 0 rgba(0,0,0,0.55),
-1px 0 0 rgba(0,0,0,0.55);
}
/* If other skins use mw-theme-light, keep SV modules consistent */
.mw-theme-light{
--sv-ui-bg0:#1f2937;
--sv-ui-bg1:#273449;
--sv-ui-bg2:#2e3f59;
--sv-ui-bg3:#364a69;
--sv-ui-line1:#4b6388;
--sv-ui-line2:#5f7fb4;
--sv-ui-text1:#f5f9ff;
--sv-ui-text2:#d7e2f4;
--sv-ui-text3:#b6c6e0;
--sv-ui-accent:#8cbcff;
--sv-ui-accent2:#b0d0ff;
--sv-base:var(--sv-ui-bg0);
--sv-surface:var(--sv-ui-bg2);
--sv-card-border:var(--sv-ui-line1);
--sv-row-border:var(--sv-ui-line1);
--sv-gridline:var(--sv-ui-line2);
--sv-pill:var(--sv-ui-bg3);
--sv-pill-a:var(--sv-ui-bg3);
--sv-pill-b:var(--sv-ui-bg3);
--sv-text-soft:var(--sv-ui-text1);
}
/* ----------------------------------------------------------------------------
2) Sitewide link visibility (prefer skin vars, fallback to SV vars)
---------------------------------------------------------------------------- */
.mw-parser-output a{
color:var(--color-link, var(--sv-ui-accent));
text-decoration:underline;
text-decoration-thickness:2px;
text-underline-offset:2px;
}
.mw-parser-output a:visited{
color:var(--color-visited, var(--sv-ui-accent2));
}
.mw-parser-output a:hover{
text-decoration-thickness:3px;
}
.mw-parser-output a:focus-visible{
outline:2px solid var(--sv-ui-accent2);
outline-offset:2px;
border-radius:6px;
}
/* ----------------------------------------------------------------------------
3) Shared primitives (opt-in for new modules)
- Include unscoped selectors so template previews/docs still render correctly
---------------------------------------------------------------------------- */
.sv-card,
.mw-parser-output .sv-card{
background:var(--sv-ui-bg1);
border:1px solid var(--sv-ui-line1);
border-radius:var(--sv-ui-rad-md);
box-shadow:var(--sv-ui-shadow1);
color:var(--color-base, var(--sv-ui-text2));
}
.sv-card :where(h1,h2,h3,h4,h5,h6,th,summary,.mw-headline),
.mw-parser-output .sv-card :where(h1,h2,h3,h4,h5,h6,th,summary,.mw-headline){
color:var(--color-emphasized, var(--sv-ui-text1));
}
.sv-tile,
.mw-parser-output .sv-tile{
background:var(--sv-ui-bg2);
border:1px solid var(--sv-ui-line2);
border-radius:var(--sv-ui-rad-sm);
color:var(--color-emphasized, var(--sv-ui-text1));
}
.sv-pill,
.mw-parser-output .sv-pill{
display:inline-flex;
align-items:center;
justify-content:center;
padding:0.18em 0.40em;
border-radius:var(--sv-ui-rad-sm);
background:var(--sv-ui-bg3);
border:1px solid var(--sv-ui-line2);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
background-image:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00));
color:var(--color-emphasized, var(--sv-ui-text1));
font-weight:800;
text-transform:uppercase;
letter-spacing:0.03em;
font-size:0.72em;
line-height:1.15;
white-space:nowrap;
}
.sv-focus-ring:focus-visible,
.mw-parser-output .sv-focus-ring:focus-visible{
outline:2px solid var(--sv-ui-accent2);
outline-offset:2px;
border-radius:8px;
}
/* ----------------------------------------------------------------------------
SV utility: hover lift (micro-interaction)
---------------------------------------------------------------------------- */
.sv-hover-lift{
transition:transform 0.15s ease-in-out;
will-change:transform;
}
.sv-hover-lift:hover{
transform:translateY(-2px);
}
@media (prefers-reduced-motion: reduce){
.sv-hover-lift{transition:none;}
.sv-hover-lift:hover{transform:none;}
}
/* ----------------------------------------------------------------------------
SV utility: right-side infobox wrapper
- Unscoped so it works in template previews/docs too
---------------------------------------------------------------------------- */
.sv-card.sv-infobox-right{
float:right !important;
width:100%;
max-width:200px;
margin:0 0 2em 2em;
box-sizing:border-box;
border-radius:var(--sv-ui-rad-lg);
overflow:hidden;
clear:right;
}
/* Optional size modifiers */
.sv-card.sv-infobox-right.sv-infobox-right--md{max-width:260px;}
.sv-card.sv-infobox-right.sv-infobox-right--lg{max-width:320px;}
/* ----------------------------------------------------------------------------
Template: Class Overview Infobox
---------------------------------------------------------------------------- */
.sv-class-overview__table{
width:100%;
border-collapse:separate;
border-spacing:0;
}
.sv-class-overview__heading,
.sv-class-overview__subhead{
padding:10px 10px;
text-align:center;
font-weight:800;
}
.sv-class-overview__table td{
padding:7px 10px;
border-bottom:1px solid var(--sv-ui-line1);
vertical-align:middle;
}
.sv-class-overview__table tr:last-child td{
border-bottom:none;
}
.sv-class-overview__label{
text-align:left;
font-weight:700;
color:var(--sv-ui-text1);
white-space:nowrap;
}
.sv-class-overview__value{
text-align:right;
font-weight:650;
color:var(--sv-ui-text2);
}
.sv-class-overview__label img{
vertical-align:middle;
margin-right:6px;
}
/* ----------------------------------------------------------------------------
4) Legacy safety blocks (kept, unified to tokens)
---------------------------------------------------------------------------- */
.mw-parser-output .playtest-info-box{
max-width:100%;
margin:0 0 10px 0;
border:1px solid var(--sv-ui-line1);
border-radius:var(--sv-ui-rad-md);
box-shadow:0 1px 3px rgba(0,0,0,0.10);
background:var(--sv-ui-bg1);
padding:10px;
text-align:center;
color:var(--color-base, var(--sv-ui-text2));
overflow-wrap:anywhere;
word-break:break-word;
}
.mw-parser-output .header-container-outer{
max-width:100%;
margin:1px;
border:2px solid var(--sv-ui-line2);
border-radius:var(--sv-ui-rad-lg);
box-shadow:0 2px 6px rgba(0,0,0,0.25);
background:var(--sv-ui-bg1);
}
.mw-parser-output .header-container-middle{
background:var(--sv-ui-bg1);
text-align:center;
padding:1px;
border-radius:calc(var(--sv-ui-rad-lg) - 2px);
overflow-wrap:anywhere;
word-break:break-word;
}
.mw-parser-output .header-container-inner{
background:linear-gradient(180deg, var(--sv-ui-bg3), var(--sv-ui-bg2));
color:var(--sv-ui-text1);
text-align:center;
padding:1px;
border-radius:calc(var(--sv-ui-rad-lg) - 2px);
overflow-wrap:anywhere;
word-break:break-word;
font-size:300%;
}
.mw-parser-output table.custom-table{
float:none;
border:2px solid var(--sv-ui-line2);
border-radius:var(--sv-ui-rad-lg);
padding:2px;
box-shadow:0 2px 6px rgba(0,0,0,0.25);
margin:1em auto;
text-align:center;
border-collapse:separate;
border-spacing:0;
overflow:hidden;
-webkit-user-select:text;
user-select:text;
background:var(--sv-ui-bg1);
color:var(--color-base, var(--sv-ui-text2));
}
.mw-parser-output table.custom-table > tbody > tr:nth-child(1) > th,
.mw-parser-output table.custom-table > tbody > tr.middle-header > th{
background:linear-gradient(180deg, var(--sv-ui-bg3), var(--sv-ui-bg2));
color:var(--sv-ui-text1);
text-align:center;
padding:6px;
border-top-left-radius:8px;
border-top-right-radius:8px;
overflow-wrap:anywhere;
word-break:break-word;
}
.mw-parser-output table.custom-table > tbody > tr:nth-child(1) > th{font-size:120%;}
.mw-parser-output table.custom-table > tbody > tr.middle-header > th{font-size:110%;}
.mw-parser-output table.custom-table > tbody > tr:nth-child(2) > th,
.mw-parser-output table.custom-table > tbody > tr > td{
text-align:center;
padding:4px;
border-bottom:1px solid var(--sv-ui-line1);
}
/* ----------------------------------------------------------------------------
5) Hero Infobox System (Skills + Passives) — legacy table infobox
---------------------------------------------------------------------------- */
/* Base infobox */
table.spiritvale-skill-infobox,
table.spiritvale-passive-infobox{
border-collapse:separate;
border-spacing:0;
width:100%;
margin:1.25em auto;
border-radius:var(--sv-ui-rad-lg);
overflow:hidden;
border:1px solid var(--sv-card-border);
box-shadow:0 4px 12px rgba(0,0,0,0.45);
font-size:0.95em;
background:var(--sv-base);
color:var(--sv-ui-text1);
}
table.spiritvale-skill-infobox > tbody > tr,
table.spiritvale-passive-infobox > tbody > tr{
border-bottom:1px solid var(--sv-row-border);
}
table.spiritvale-skill-infobox > tbody > tr:last-child,
table.spiritvale-passive-infobox > tbody > tr:last-child{
border-bottom:none;
}
table.spiritvale-skill-infobox > tbody > tr:not(.spiritvale-infobox-main) > th:not(.spiritvale-infobox-section-header),
table.spiritvale-passive-infobox > tbody > tr:not(.spiritvale-infobox-main) > th:not(.spiritvale-infobox-section-header){
width:26%;
padding:0.45em 0.85em;
text-align:left;
font-weight:600;
white-space:nowrap;
}
table.spiritvale-skill-infobox > tbody > tr > td,
table.spiritvale-passive-infobox > tbody > tr > td{
padding:0.45em 0.85em;
text-align:left;
}
table.spiritvale-skill-infobox > tbody > tr:nth-child(odd) > td,
table.spiritvale-skill-infobox > tbody > tr:nth-child(odd) > th:not(.spiritvale-infobox-section-header),
table.spiritvale-passive-infobox > tbody > tr:nth-child(odd) > td,
table.spiritvale-passive-infobox > tbody > tr:nth-child(odd) > th:not(.spiritvale-infobox-section-header){
background-color:var(--sv-ui-bg1);
}
/* Hero band */
table.spiritvale-skill-infobox > tbody > tr.spiritvale-infobox-main > th,
table.spiritvale-skill-infobox > tbody > tr.spiritvale-infobox-main > td,
table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th,
table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td,
table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row > th,
table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row > td,
table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row > th,
table.spiritvale-passive-infobox > tbody > tr.sv-hero-desc-row > td{
background:var(--sv-base);
color:var(--sv-ui-text1);
padding:0.9em 1.1em;
text-align:center;
vertical-align:middle;
}
table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row,
table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row{
border-bottom:none !important;
}
table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row > th,
table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row > th{
padding-bottom:0.55em;
}
table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row > td,
table.spiritvale-passive-infobox > tbody > tr.sv-hero-desc-row > td{
padding:0.55em 1.1em;
}
.spiritvale-infobox-title{
font-size:1.25em;
font-weight:600;
}
.spiritvale-infobox-description{
font-size:1.05em;
font-style:italic;
text-align:center;
max-width:42em;
margin:0 auto;
opacity:0.95;
}
/* Skills sizing + list layout */
table.spiritvale-skill-infobox{
max-width:var(--sv-skill-width);
table-layout:fixed;
}
table.spiritvale-skill-infobox.sv-skill-card{width:100%;}
table.spiritvale-skill-infobox.sv-skill-inlist{margin:0.35em auto 1.15em;}
/* Desktop (850+) */
@media (min-width:850px){
:root{--sv-skill-width:75%;}
.mw-parser-output table.spiritvale-skill-infobox.sv-skill-card,
.mw-parser-output table.spiritvale-skill-infobox.sv-skill-inlist{
width:var(--sv-skill-width);
max-width:var(--sv-skill-width);
}
}
/* Standardized slot grid */
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) tr.sv-slot-row > td.sv-slot-cell{
padding:0 !important;
background:var(--sv-base) !important;
color:var(--sv-ui-text1);
}
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot-grid{
display:grid;
grid-template-columns:1fr 1fr;
grid-auto-flow:row dense;
gap:0.55em;
width:100%;
box-sizing:border-box;
background:var(--sv-base);
padding:0.80em;
}
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot{
min-width:0;
display:flex;
box-sizing:border-box;
background:var(--sv-surface) !important;
color:var(--sv-ui-text1) !important;
border:1px solid var(--sv-gridline);
border-radius:var(--sv-ui-rad-md);
}
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot-grid > .sv-slot.sv-slot--full{
grid-column:1 / -1;
}
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot--empty .sv-slot__body{
min-height:3.2em;
}
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot__body{
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:0.85em;
box-sizing:border-box;
}
/* Hero bar layout */
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-herobar-1-wrap{
display:flex;
align-items:center;
justify-content:center;
gap:0.65em;
}
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-herobar-icon{line-height:0;}
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-herobar-icon img{vertical-align:middle;}
/* Tooltip scopes + triggers (legacy infobox only) */
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-content{display:none;}
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-pop{
position:fixed;
z-index:99999;
max-width:min(380px, calc(100vw - 16px));
max-height:60vh;
overflow:auto;
padding:10px 12px;
border-radius:var(--sv-ui-rad-md);
border:1px solid var(--sv-ui-line2);
background:var(--sv-ui-bg0);
color:var(--sv-ui-text1);
box-shadow:0 10px 30px rgba(0,0,0,0.35);
font-size:13px;
line-height:1.35;
}
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-pop .sv-tip-title{font-weight:700;margin-bottom:6px;}
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-pop .sv-tip-section{margin-top:8px;}
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-pop .sv-tip-label{font-weight:700;display:block;margin-bottom:2px;opacity:0.95;}
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-scope{position:relative;}
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-btn{
cursor:pointer;
user-select:none;
-webkit-appearance:none;
appearance:none;
font:inherit;
color:inherit;
}
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-btn:focus-visible{
outline:2px solid rgba(255,255,255,0.25);
outline-offset:2px;
}
/* Module: icon + name layout */
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-herobar-1-wrap{
display:grid;
grid-template-columns:auto auto;
grid-template-rows:auto auto;
column-gap:0.65em;
row-gap:0.35em;
align-items:center;
justify-content:center;
}
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-herobar-icon{
grid-column:1;
grid-row:1;
width:80px;
height:80px;
display:flex;
align-items:center;
justify-content:center;
line-height:0;
}
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-herobar-icon img{
max-width:80px;
max-height:80px;
width:100%;
height:100%;
object-fit:contain;
}
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-herobar-text{
grid-column:2;
grid-row:1;
display:flex;
flex-direction:column;
align-items:center;
}
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-herobar-title-row{
display:inline-flex;
align-items:center;
justify-content:center;
gap:0.45em;
}
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-pill-row--req{
grid-column:1 / -1;
grid-row:2;
justify-self:center;
margin-top:2px;
}
/* Notes button: solid */
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-tip-btn--notes{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:30px;
height:30px;
border-radius:var(--sv-ui-rad-pill);
border:1px solid var(--sv-ui-line2);
background:var(--sv-ui-bg2);
cursor:pointer;
}
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-tip-btn--notes:hover{
background:var(--sv-ui-bg3);
}
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-tip-btn--notes:focus-visible{
outline:2px solid rgba(255,255,255,0.28);
outline-offset:2px;
}
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-ico--info{
width:22px;
height:22px;
border-radius:var(--sv-ui-rad-pill);
display:inline-flex;
align-items:center;
justify-content:center;
font-weight:900;
font-size:15px;
line-height:1;
background:var(--sv-ui-accent2);
color:#081018;
}
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-pill--req{
display:inline-flex;
align-items:center;
}
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-pill--req::after{
content:" ▼";
font-weight:normal;
font-size:0.8em;
}
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-description{
font-size:1.05em;
font-style:italic;
max-width:42em;
margin:0 auto;
line-height:1.35;
opacity:0.95;
}
/* Soft white + outline */
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot,
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot *,
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) > tbody > tr.sv-slot-row,
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) > tbody > tr.sv-hero-title-row,
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) > tbody > tr.sv-hero-desc-row{
color:var(--sv-text-soft) !important;
text-shadow:var(--sv-text-outline);
}
/* Shared pill look (legacy infobox system only) */
: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;
display:inline-block;
max-width:100%;
white-space:nowrap;
padding:0.18em 0.35em;
border-radius:var(--sv-ui-rad-sm);
font-weight:800;
text-transform:uppercase;
letter-spacing:0.03em;
font-size:0.72em;
line-height:1.15;
background:var(--sv-pill);
border:1px solid var(--sv-ui-line2);
color:var(--sv-ui-text1);
}
/* Level selector */
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-level-selector .sv-level-ui{
width:90%;
margin:0 !important;
display:flex;
flex-direction:column;
gap:0.3em;
}
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-level-selector .sv-level-label{
font-weight:600;
}
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
.module-level-selector .sv-level-slider input[type="range"]{
width:90%;
box-sizing:border-box;
margin:0;
}
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
.module-level-selector .sv-level-ui-single .sv-level-slider-single{
min-height:0.45em;
}
/* Skill Type (Hero Bar Slot 2) */
table.spiritvale-skill-infobox .hero-bar-module-2 .hero-bar-module-body,
table.spiritvale-skill-infobox .hero-bar-module-2 .module-skill-type{
width:100%;
}
table.spiritvale-skill-infobox .module-skill-type .sv-type-grid{
width:100%;
margin:0 !important;
box-sizing:border-box;
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:0.50em;
padding:0.40em;
justify-items:center;
align-items:center;
}
table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
padding:0.20em 0.35em;
gap:0.50em;
min-width:0;
}
table.spiritvale-skill-infobox .module-skill-type .sv-type-value{
font-weight:400;
font-size:1.02em;
line-height:1.25;
white-space:normal;
overflow-wrap:anywhere;
word-break:break-word;
}
/* Desktop ordering */
table.spiritvale-skill-infobox .module-skill-type .sv-type-damage{order:1;}
table.spiritvale-skill-infobox .module-skill-type .sv-type-element{order:2;}
table.spiritvale-skill-infobox .module-skill-type .sv-type-hits{order:3;}
table.spiritvale-skill-infobox .module-skill-type .sv-type-target{order:4;}
table.spiritvale-skill-infobox .module-skill-type .sv-type-cast{order:5;}
table.spiritvale-skill-infobox .module-skill-type .sv-type-combo{order:6;}
/* Special Mechanics (Flags + Mechanics) */
table.spiritvale-skill-infobox .sv-slot.module-special-mechanics .sv-slot__body{
width:100%;
height:100%;
}
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-root{width:100%;}
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-empty{
width:100%;
font-weight:650;
opacity:0.95;
text-align:center;
}
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout{
width:100%;
display:grid;
gap:0.55em;
align-items:start;
justify-items:stretch;
}
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-1{
grid-template-columns:1fr;
justify-items:center;
}
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-2{
grid-template-columns:1fr 1fr;
}
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-col{
width:100%;
min-width:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
text-align:center;
gap:0.40em;
}
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-mech{
width:100%;
min-width:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
text-align:center;
gap:0.50em;
}
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-value{
width:100%;
text-align:center;
font-weight:500;
font-size:0.98em;
line-height:1.2;
opacity:0.98;
white-space:normal;
overflow-wrap:anywhere;
word-break:break-word;
}
/* Desktop behavior (850+) */
@media (min-width:850px){
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-2{
grid-template-columns:minmax(8.5em, 0.85fr) minmax(16em, 1.15fr);
}
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-col-mech{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(9.5em, 1fr));
gap:0.55em 0.75em;
align-items:start;
justify-items:center;
align-content:center;
text-align:center;
}
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-col-mech .sv-sm-mech{width:100%;}
}
/* ---------------------------------------------------------------------------
SV Shared Utilities (global)
- Used by GameInfo + bot-rendered modules
--------------------------------------------------------------------------- */
/* Visibility contract (JS toggles these) */
.sv-hidden,
.mw-parser-output .sv-hidden{
display:none !important;
}
[hidden]{display:none !important;}
/* Missing icon fallback badge (“?”) */
.sv-miss,
.mw-parser-output .sv-miss{
display:inline-flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
border-radius:var(--sv-ui-rad-pill);
border:1px solid var(--sv-ui-line2);
background:var(--sv-ui-bg3);
color:var(--sv-ui-text1);
font-weight:900;
font-size:12px;
line-height:1;
}
/* Generic image wrapper */
.sv-img,
.mw-parser-output .sv-img{
display:inline-flex;
align-items:center;
justify-content:center;
}
.sv-img img,
.mw-parser-output .sv-img img{
display:block;
max-width:100%;
height:auto;
border-radius:var(--sv-ui-rad-sm);
}
/* Optional: shadow variant */
.sv-img--shadow img,
.mw-parser-output .sv-img--shadow img{
box-shadow:0 10px 18px rgba(0,0,0,0.35);
}
/* ---------------------------------------------------------------------------
SV Tabs (shared component)
--------------------------------------------------------------------------- */
.sv-tabs,
.mw-parser-output .sv-tabs{
margin:10px 0 0;
}
.sv-tabs-list,
.mw-parser-output .sv-tabs-list{
display:flex;
gap:8px;
flex-wrap:wrap;
margin:0 0 10px 0;
padding:0;
}
.sv-tab,
.mw-parser-output .sv-tab{
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:var(--sv-ui-rad-pill);
padding:7px 10px;
border:1px solid var(--sv-ui-line2);
background:var(--sv-ui-bg2);
color:var(--sv-ui-text1);
font-weight:900;
font-size:13px;
cursor:pointer;
user-select:none;
}
.sv-tab:hover,
.mw-parser-output .sv-tab:hover{
background:var(--sv-ui-bg3);
}
.sv-tab[aria-selected="true"],
.mw-parser-output .sv-tab[aria-selected="true"]{
background:var(--sv-ui-bg3);
border-color:var(--sv-ui-accent);
}
.sv-tabpanel,
.mw-parser-output .sv-tabpanel{
padding:10px 12px;
border-radius:var(--sv-ui-rad-md);
border:1px solid var(--sv-ui-line1);
background:var(--sv-ui-bg1);
}
/* ---------------------------------------------------------------------------
SV Disclosure (shared source markup)
- Hidden source popups live in the DOM; Universal Popups clones their content.
--------------------------------------------------------------------------- */
.sv-disclose,
.mw-parser-output .sv-disclose{position:relative;}
.sv-disclose-btn,
.mw-parser-output .sv-disclose-btn{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
width:100%;
padding:10px 12px;
border-radius:var(--sv-ui-rad-md);
border:1px solid var(--sv-ui-line1);
background:var(--sv-ui-bg1);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
color:var(--sv-ui-text1);
font-weight:900;
cursor:pointer;
user-select:none;
}
.sv-disclose-btn:hover,
.mw-parser-output .sv-disclose-btn:hover{
background:var(--sv-ui-bg2);
}
.sv-disclose-count,
.mw-parser-output .sv-disclose-count{
font-weight:800;
font-size:13px;
color:var(--sv-ui-text3);
white-space:nowrap;
}
/* ====================================================================== */
/* LEGACY POPUP STYLES (deprecated) */
/* */
/* Kept temporarily for older markup patterns. Delete this section after */
/* migration if no pages rely on these classes. */
/* ====================================================================== */
/* Legacy tooltip shells (suppressed when Universal Popups is active) */
/* .sv-def-tip, .sv-pop-tip may still exist as leftover markup in content */
/* ============================================================================
SV Universal Popups v3.1
- Popup B aesthetic, site-wide
- Compact width: popups grow vertically (mobile-friendly)
- Header centered + larger
- Linked definitions: header title can be a real link (Popups/PagePreviews-friendly)
- JS adds .sv-uipop-v3 to <html> when enabled
============================================================================ */
.sv-uipop-v3 .sv-def-tip,
.sv-uipop-v3 .sv-pop-tip{
display:none !important;
}
/* Prevent long-press select/callout on popup triggers + controls (keep body selectable) */
.sv-tip-btn,
.sv-disclose-btn,
.sv-def,
.sv-uipop-head,
.sv-uipop-title,
.sv-uipop-title-link{
-webkit-touch-callout:none;
-webkit-user-select:none;
user-select:none;
touch-action:manipulation;
}
.sv-tip-btn *,
.sv-disclose-btn *,
.sv-uipop-head *{
-webkit-user-select:none;
user-select:none;
}
/* ---- Universal shell (Popup B look) ------------------------------------ */
.sv-uipop{
position:fixed;
z-index:9000; /* stays above page UI; allows Popups/PagePreviews to overlay if needed */
top:0;
left:0;
box-sizing:border-box;
border-radius:var(--sv-ui-rad-lg);
border:1px solid var(--sv-ui-pop-line, var(--sv-ui-line2));
background:var(--sv-ui-pop-bg, var(--sv-ui-bg0));
background-image:
radial-gradient(900px 260px at 35% 0, rgba(106,166,255,0.14), rgba(0,0,0,0) 60%),
linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.00));
color:var(--sv-ui-text1);
box-shadow:var(--sv-ui-pop-shadow, 0 10px 30px rgba(0,0,0,0.35)),
inset 0 1px 0 rgba(255,255,255,0.04);
overflow:hidden;
}
.sv-uipop[aria-hidden="true"]{display:none;}
/* Compact width for all popups; height differs by mode */
.sv-uipop--sm,
.sv-uipop--lg{
width:240px;
max-width:calc(100vw - 20px);
}
.sv-uipop--sm{max-height:min(45vh, 320px);}
.sv-uipop--lg{max-height:min(70vh, 560px);}
/* Header: centered title */
.sv-uipop-head{
display:flex;
align-items:center;
justify-content:center;
padding:12px 12px;
border-bottom:1px solid var(--sv-ui-line1);
background:var(--sv-ui-bg1);
}
.sv-uipop-head--clickable{cursor:pointer;}
.sv-uipop-title{
width:100%;
text-align:center;
font-weight:900;
font-size:16px;
letter-spacing:0.02em;
color:var(--color-emphasized, var(--sv-ui-text1));
}
/* Header title link (Definitions with data-sv-def-link) */
.sv-uipop-title a.sv-uipop-title-link{
color:inherit;
text-decoration:none;
}
.sv-uipop-title a.sv-uipop-title-link:hover{
text-decoration:underline;
text-decoration-thickness:2px;
text-underline-offset:2px;
}
/* Body */
.sv-uipop-body{
padding:10px 12px 12px;
font-size:13px;
line-height:1.4;
color:var(--sv-ui-text2);
overflow:auto;
overflow-wrap:anywhere;
word-break:break-word;
-webkit-user-select:text;
user-select:text;
}
.sv-uipop-body--pre{white-space:pre-line;}
/* Normalize common blocks inside popup body */
.sv-uipop-body p,
.sv-uipop-body ul,
.sv-uipop-body ol{margin:0;}
.sv-uipop-body ul,
.sv-uipop-body ol{padding-left:1.15em;}
.sv-uipop-body li{margin:0;}
/* Links in popups */
.sv-uipop a{
color:var(--color-link, var(--sv-ui-accent));
text-decoration:underline;
text-decoration-thickness:2px;
text-underline-offset:2px;
}
.sv-uipop a:hover{text-decoration-thickness:3px;}
/* Normalize list styling for Users/Requirements clones */
.sv-uipop :where(.sv-disclose-list, .sv-uipop-list){
margin:0;
padding:0;
list-style:none;
}
.sv-uipop :where(.sv-disclose-list, .sv-uipop-list) > li{
padding:6px 0;
border-top:1px solid var(--sv-ui-line1);
font-size:13px;
color:var(--sv-ui-text2);
}
.sv-uipop :where(.sv-disclose-list, .sv-uipop-list) > li:first-child{
border-top:none;
padding-top:0;
}
.sv-uipop :where(.sv-disclose-group-title, .sv-uipop-group-title){
padding-top:10px;
font-weight:900;
font-size:12px;
letter-spacing:0.02em;
color:var(--sv-ui-text1);
}
/* ---------------------------------------------------------------------------
SV Universal Popups — Sectioned disclose content (Schema 2)
- GameInfo/Skills Requirements + Users (sv-disclose-sections)
- NOTE: Commas + suffix spacing are emitted by Lua for deterministic rendering.
--------------------------------------------------------------------------- */
.sv-uipop .sv-disclose-sections{
display:flex;
flex-direction:column;
gap:10px;
}
.sv-uipop .sv-disclose-sec + .sv-disclose-sec{
padding-top:10px;
border-top:1px solid var(--sv-ui-line1);
}
.sv-uipop .sv-disclose-sec-title{
font-weight:900;
font-size:13px;
letter-spacing:0.02em;
color:var(--sv-ui-text1);
margin:0 0 4px 0;
}
.sv-uipop .sv-disclose-sec-items{
font-size:13px;
line-height:1.45;
color:var(--sv-ui-text2);
}
.sv-uipop .sv-disclose-item{display:inline;}
.sv-uipop .sv-disclose-sfx{opacity:0.78;}