Toggle search
Toggle menu
115
248
25
2.7K
SpiritVale Wiki
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:Common.css: Difference between revisions

MediaWiki interface page
More actions
← Older editNewer edit →
No edit summary
Tags: Mobile edit Mobile web edit
No edit summary
Tags: Mobile edit Mobile web edit
Line 1: Line 1:
/* ============================================================================
/* SpiritVale Wiki — Common.css */
SpiritVale Wiki — Common.css
/* Shared sitewide tokens, primitives, and reusable components. */
Sitewide base + shared SpiritVale components (all skins)
- No Citizen skin selectors
- Mobile rules are merged into Common.css/Citizen.css (no separate Mobile.css)
- Common.css owns shared UI primitives + reusable interactive components
- Module:GameInfo/styles.css should own only GameInfo-family layout/presentation
============================================================================ */


/* ----------------------------------------------------------------------------
/* -------------------------------------------------------------------------- */
1) SpiritVale tokens (fallback defaults)
/* 1) SpiritVale tokens */
- Citizen.css exports will override these where appropriate.
/* -------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


:root{
:root{
   /* SV UI tokens (fallback) */
   /* Fallback SV UI tokens. */
   --sv-ui-bg0:#0f172a;
   --sv-ui-bg0:#0f172a;
   --sv-ui-bg1:#1f2937;
   --sv-ui-bg1:#1f2937;
Line 30: Line 23:
   --sv-ui-accent2:#8cbcff;
   --sv-ui-accent2:#8cbcff;


   /* Popover tuning tokens */
   /* Popover tokens. */
   --sv-ui-pop-bg:var(--sv-ui-bg0);
   --sv-ui-pop-bg:var(--sv-ui-bg0);
   --sv-ui-pop-line:var(--sv-ui-line2);
   --sv-ui-pop-line:var(--sv-ui-line2);
Line 42: Line 35:
   --sv-ui-shadow1:0 10px 28px rgba(0,0,0,0.40);
   --sv-ui-shadow1:0 10px 28px rgba(0,0,0,0.40);


   /* Shared badge / pill surfaces */
   /* Shared pill tokens. */
   --sv-ui-pill-bg:var(--sv-ui-bg3);
   --sv-ui-pill-bg:var(--sv-ui-bg3);
   --sv-ui-pill-line:var(--sv-ui-line2);
   --sv-ui-pill-line:var(--sv-ui-line2);
Line 48: Line 41:
   --sv-ui-pill-text:var(--sv-ui-text1);
   --sv-ui-pill-text:var(--sv-ui-text1);


  /* 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 */
/* Fallback light skin mapping. */
.mw-theme-light{
.mw-theme-light{
   --sv-ui-bg0:#1f2937;
   --sv-ui-bg0:#1f2937;
Line 87: Line 59:
   --sv-ui-accent:#8cbcff;
   --sv-ui-accent:#8cbcff;
   --sv-ui-accent2:#b0d0ff;
   --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)
/* 2) Sitewide link visibility */
---------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */


.mw-parser-output a{
.mw-parser-output a{
Line 127: Line 86:
}
}


/* ----------------------------------------------------------------------------
/* -------------------------------------------------------------------------- */
3) Shared primitives (opt-in for new modules)
/* 3) Shared primitives */
- Include unscoped selectors so template previews/docs still render correctly
/* -------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


.sv-card,
.sv-card,
Line 195: Line 153:
}
}


/* ----------------------------------------------------------------------------
/* -------------------------------------------------------------------------- */
SV utility: hover lift (micro-interaction)
/* 3a) Hover lift utility */
---------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */


.sv-hover-lift{
.sv-hover-lift{
Line 208: Line 166:
}
}


@media (prefers-reduced-motion: reduce){
/* -------------------------------------------------------------------------- */
  .sv-hover-lift{transition:none;}
/* 3b) Right infobox wrapper */
  .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{
.sv-card.sv-infobox-right{
Line 229: Line 181:
}
}


/* Optional size modifiers */
/* Size modifiers. */
.sv-card.sv-infobox-right.sv-infobox-right--md{max-width:260px;}
.sv-card.sv-infobox-right.sv-infobox-right--md{max-width:260px;}
.sv-card.sv-infobox-right.sv-infobox-right--lg{max-width:320px;}
.sv-card.sv-infobox-right.sv-infobox-right--lg{max-width:320px;}


/* ----------------------------------------------------------------------------
/* -------------------------------------------------------------------------- */
Template: Class Overview Infobox
/* 4) Shared utilities */
---------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
 
.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) Shared utilities / helper contracts
---------------------------------------------------------------------------- */


/* Visibility contract (JS toggles these) */
/* JS visibility contract. */
.sv-hidden,
.sv-hidden,
.mw-parser-output .sv-hidden{
.mw-parser-output .sv-hidden{
Line 290: Line 197:
[hidden]{display:none !important;}
[hidden]{display:none !important;}


/* Missing icon fallback badge (“?”) */
/* Missing icon badge. */
.sv-miss,
.sv-miss,
.mw-parser-output .sv-miss{
.mw-parser-output .sv-miss{
Line 307: Line 214:
}
}


/* Generic image wrapper */
/* Generic image wrapper. */
.sv-img,
.sv-img,
.mw-parser-output .sv-img{
.mw-parser-output .sv-img{
Line 323: Line 230:
}
}


/* Optional: shadow variant */
/* Image shadow variant. */
.sv-img--shadow img,
.sv-img--shadow img,
.mw-parser-output .sv-img--shadow img{
.mw-parser-output .sv-img--shadow img{
Line 329: Line 236:
}
}


/* ----------------------------------------------------------------------------
/* -------------------------------------------------------------------------- */
5) Shared level selector component
/* 5) Shared level selector */
- Common owns the component anatomy and reusable helper layouts
/* -------------------------------------------------------------------------- */
- Module CSS should only control the surrounding section/card layout
---------------------------------------------------------------------------- */


.sv-level-ui,
.sv-level-ui,
Line 352: Line 257:


.sv-level-label[data-sv-helper-text],
.sv-level-label[data-sv-helper-text],
.mw-parser-output .sv-level-label[data-sv-helper-text]{
.sv-level-ui .sv-level-label:not([data-sv-helper-text]),
.mw-parser-output .sv-level-label[data-sv-helper-text],
.mw-parser-output .sv-level-ui .sv-level-label:not([data-sv-helper-text]){
  display:inline-block;
  margin:0;
  padding:0;
   font-size:0;
   font-size:0;
   line-height:0;
   line-height:0;
   display:inline-block;
}
 
.sv-level-ui .sv-level-label:not([data-sv-helper-text]),
.mw-parser-output .sv-level-ui .sv-level-label:not([data-sv-helper-text]){
  position:static;
  top:auto;
  right:auto;
  bottom:auto;
   left:auto;
  transform:none;
}
}


Line 361: Line 280:
.mw-parser-output .sv-level-label[data-sv-helper-text]::after{
.mw-parser-output .sv-level-label[data-sv-helper-text]::after{
   content:attr(data-sv-helper-text);
   content:attr(data-sv-helper-text);
  display:inline-block;
  font-weight:900;
  font-size:13px;
  line-height:1.25;
  letter-spacing:0.15px;
  color:var(--sv-ui-text1);
}
.sv-level-ui .sv-level-label:not([data-sv-helper-text])::after,
.mw-parser-output .sv-level-ui .sv-level-label:not([data-sv-helper-text])::after{
  content:"Slide to set level";
   display:inline-block;
   display:inline-block;
   font-weight:900;
   font-weight:900;
Line 422: Line 352:
}
}


/* Custom slider shell */
/* Slider shell. */
.sv-level-range--custom,
.sv-level-range--custom,
.sv-level-range[data-sv-slider="1"]{
.sv-level-range[data-sv-slider="1"]{
Line 435: Line 365:
}
}


/* Track + fill */
/* Track and fill. */
.sv-level-track{
.sv-level-track{
   position:absolute;
   position:absolute;
Line 456: Line 386:
}
}


/* Thumb */
/* Thumb. */
.sv-level-thumb{
.sv-level-thumb{
   position:absolute;
   position:absolute;
Line 471: Line 401:
}
}


/* Optional tick labels row */
/* Tick labels. */
.sv-level-ticklabels{
.sv-level-ticklabels{
   display:flex;
   display:flex;
Line 491: Line 421:
}
}


/* Value bubble (JS injects .sv-level-bubble) */
/* Value bubble. */
.sv-level-range--custom .sv-level-bubble,
.sv-level-range--custom .sv-level-bubble,
.sv-level-range[data-sv-slider="1"] .sv-level-bubble{
.sv-level-range[data-sv-slider="1"] .sv-level-bubble{
Line 527: Line 457:
}
}


/* Focus ring */
/* Focus ring. */
.sv-level-range--custom:focus-visible,
.sv-level-range--custom:focus-visible,
.sv-level-range[data-sv-slider="1"]:focus-visible{
.sv-level-range[data-sv-slider="1"]:focus-visible{
Line 535: Line 465:
}
}


/* Mobile */
/* -------------------------------------------------------------------------- */
@media (max-width:500px){
/* 6) Shared tabs */
  .sv-level-endvalue,
/* -------------------------------------------------------------------------- */
  .mw-parser-output .sv-level-endvalue{
    padding:1px 7px;
    min-width:28px;
    font-size:12px;
    line-height:1.25;
  }
 
  .sv-level-label[data-sv-helper-text]::after,
  .mw-parser-output .sv-level-label[data-sv-helper-text]::after{
    font-size:12px;
  }
}
 
/* ----------------------------------------------------------------------------
6) SV Tabs (shared component)
---------------------------------------------------------------------------- */


.sv-tabs,
.sv-tabs,
Line 604: Line 518:
}
}


/* Focus rings for SV controls (sitewide) */
/* Shared control focus rings. */
.sv-tab:focus-visible,
.sv-tab:focus-visible,
.mw-parser-output .sv-tab:focus-visible,
.mw-parser-output .sv-tab:focus-visible,
Line 614: Line 528:
}
}


/* ----------------------------------------------------------------------------
/* -------------------------------------------------------------------------- */
7) SV Tip Trigger (shared component)
/* 7) Shared tip trigger */
- Used for Notes / inline tips that open via Universal Popups (Common.js)
/* -------------------------------------------------------------------------- */
- The hidden source node (.sv-tip-pop) is emitted by Lua; JS clones its body
---------------------------------------------------------------------------- */


.sv-tip,
.sv-tip,
Line 661: Line 573:


.sv-tip-btn--pill,
.sv-tip-btn--pill,
.mw-parser-output .sv-tip-btn--pill{
  width:auto;
  height:auto;
  min-width:0;
  min-height:0;
  padding:1px 8px;
  border-radius:var(--sv-ui-rad-pill);
  font-weight:900;
  font-size:13px;
  line-height:1.25;
  letter-spacing:0.15px;
  white-space:nowrap;
  background:var(--sv-ui-pill-bg);
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:var(--sv-ui-pill-shadow);
  border-color:var(--sv-ui-pill-line);
  color:var(--sv-ui-text2);
}
/* Compatibility: existing overcap pill should behave like shared pill trigger */
.sv-overcap-btn,
.sv-overcap-btn,
.mw-parser-output .sv-tip-btn--pill,
.mw-parser-output .sv-overcap-btn{
.mw-parser-output .sv-overcap-btn{
   width:auto;
   width:auto;
Line 701: Line 594:
}
}


/* Small info icon inside the round button */
/* Small info icon. */
.sv-ico--info,
.sv-ico--info,
.mw-parser-output .sv-ico--info{
.mw-parser-output .sv-ico--info{
Line 716: Line 609:
}
}


/* ----------------------------------------------------------------------------
/* -------------------------------------------------------------------------- */
8) SV Disclosure (shared source markup)
/* 8) Shared disclosure */
---------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */


.sv-disclose,
.sv-disclose,
Line 764: Line 657:
}
}


/* ----------------------------------------------------------------------------
/* -------------------------------------------------------------------------- */
9) Universal Popups v3.2
/* 9) Universal Popups v3.2 */
---------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */


.sv-uipop-v3 .sv-def-tip,
/* Prevent long-press select and callout. */
.sv-uipop-v3 .sv-pop-tip{
  display:none !important;
}
 
/* Prevent long-press select/callout on popup triggers + controls */
.sv-tip-btn,
.sv-tip-btn,
.sv-disclose-btn,
.sv-disclose-btn,
Line 941: Line 829:
.sv-uipop .sv-tip-pop-body{white-space:pre-line;}
.sv-uipop .sv-tip-pop-body{white-space:pre-line;}


/* ----------------------------------------------------------------------------
/* -------------------------------------------------------------------------- */
10) Legacy safety blocks (kept, unified to tokens)
/* 10) Motion */
---------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
 
@media (prefers-reduced-motion: reduce){
.mw-parser-output .playtest-info-box{
   .sv-hover-lift{transition:none;}
  max-width:100%;
   .sv-hover-lift:hover{transform:none;}
  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%;
/* 11) Responsive */
  margin:1px;
/* -------------------------------------------------------------------------- */
  border:2px solid var(--sv-ui-line2);
@media (max-width:500px){
  border-radius:var(--sv-ui-rad-lg);
   .sv-level-endvalue,
  box-shadow:0 2px 6px rgba(0,0,0,0.25);
   .mw-parser-output .sv-level-endvalue{
  background:var(--sv-ui-bg1);
    padding:1px 7px;
}
    min-width:28px;
 
    font-size:12px;
.mw-parser-output .header-container-middle{
    line-height:1.25;
  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);
}
 
/* ----------------------------------------------------------------------------
11) Hero Infobox System (Skills + Passives) — legacy table infobox
- Kept for compatibility; this is legacy, not the new component ownership model.
---------------------------------------------------------------------------- */
 
/* 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;}
 
@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 */
   .sv-level-label[data-sv-helper-text]::after,
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) tr.sv-slot-row > td.sv-slot-cell{
   .sv-level-ui .sv-level-label:not([data-sv-helper-text])::after,
   padding:0 !important;
   .mw-parser-output .sv-level-label[data-sv-helper-text]::after,
  background:var(--sv-base) !important;
   .mw-parser-output .sv-level-ui .sv-level-label:not([data-sv-helper-text])::after{
  color:var(--sv-ui-text1);
    font-size:12px;
}
 
: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;
}
 
: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);
}
 
/* Legacy level selector */
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
.module-level-selector .sv-level-ui{
  width:100%;
  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-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 .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;
}
 
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 */
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;
}
 
@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%;}
}
}
Retrieved from "https://spiritvale.info/wiki/MediaWiki:Common.css"