Toggle search
Toggle menu
110
215
16
2K
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 edit
No edit summary
No edit summary
 
(7 intermediate revisions by the same user not shown)
Line 27: Line 27:


/* Custom Additions */
/* Custom Additions */
.playtest-info-box {
.playtest - info - box {
     max-width:100%; margin-bottom:10px; border:1px solid #ccc; border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,0.1); background:#f0f2f8; padding:10px; text-align:center; color:#333; word-wrap:break-word; overflow-wrap:break-word;
     max - width: 100 %; margin - bottom: 10px; border: 1px solid #ccc; border - radius: 6px; box - shadow: 0 1px 3px rgba(0, 0, 0, 0.1); background: #f0f2f8; padding: 10px; text - align: center; color:#333; word - wrap: break-word; overflow - wrap: break-word;
}
}


.header-container-outer {
.header - container - outer {
     max-width:100%; margin:1 1px; border:2px solid #372b54; border-radius:10px; box-shadow:0 2px 6px rgba(0,0,0,0.25); background:#f0f2f8;
     max - width: 100 %; margin: 1 1px; border: 2px solid #372b54; border - radius: 10px; box - shadow: 0 2px 6px rgba(0, 0, 0, 0.25); background: #f0f2f8;
}
}


.header-container-middle {
.header - container - middle {
     background:#f0f2f8; color:white; text-align:center; padding:1px 1px; border-radius:8px; word-wrap:break-word; overflow-wrap:break-word;
     background: #f0f2f8; color: white; text - align: center; padding: 1px 1px; border - radius: 8px; word - wrap: break-word; overflow - wrap: break-word;
}
}


.header-container-inner {
.header - container - inner {
     background:linear-gradient(180deg,#5a4e7c,#372b54); color:white; text-align:center; padding:1px 1px; border-radius:8px; word-wrap:break-word; overflow-wrap:break-word;font-size:300%;
     background: linear - gradient(180deg,#5a4e7c,#372b54); color: white; text - align: center; padding: 1px 1px; border - radius: 8px; word - wrap: break-word; overflow - wrap: break-word; font - size: 300 %;
}
}


table.custom-table {
table.custom - table {
     float:none; border:2px solid #372b54; border-radius:10px; 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;
     float: none; border: 2px solid #372b54; border - radius: 10px; 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;
}
}


table.custom-table > tbody > tr:nth-child(1) > th {
table.custom - table > tbody > tr: nth - child(1) > th {
     background:linear-gradient(180deg,#7a6fb0,#5a4e7c); color:white; text-align:center; padding:6px; font-size:120%; border-top-left-radius:8px; border-top-right-radius:8px; word-wrap:break-word; overflow-wrap:break-word;
     background: linear - gradient(180deg,#7a6fb0,#5a4e7c); color: white; text - align: center; padding: 6px; font - size: 120 %; border - top - left - radius: 8px; border - top - right - radius: 8px; word - wrap: break-word; overflow - wrap: break-word;
}
}


table.custom-table > tbody > tr:nth-child(2) > th {
table.custom - table > tbody > tr: nth - child(2) > th {
     text-align:center; padding:4px; border-bottom:1px solid #555;
     text - align: center; padding: 4px; border - bottom: 1px solid #555;
}
}


table.custom-table > tbody > tr > td {
table.custom - table > tbody > tr > td {
     text-align:center; padding:4px; border-bottom:1px solid #555;
     text - align: center; padding: 4px; border - bottom: 1px solid #555;
}
}


table.custom-table > tbody > tr.middle-header > th {
table.custom - table > tbody > tr.middle - header > th {
     background:linear-gradient(180deg,#7a6fb0,#5a4e7c); color:white; text-align:center; padding:6px; font-size:110%;
     background: linear - gradient(180deg,#7a6fb0,#5a4e7c); color: white; text - align: center; padding: 6px; font - size: 110 %;
}
}


.citizen-search-trigger:hover {
.citizen - search - trigger:hover {
     transform: translateY(-2px);
     transform: translateY(-2px);
     transition: transform .15s ease-in-out;
     transition: transform .15s ease -in -out;
}
}


/* ============================================================
/* ============================================================
   SpiritVale: generic infobox styling (skills, passives, etc.)
   SpiritVale Infoboxes (Skills + Passives)
  - Shared styling for both infobox types
  - Passives: fixed desktop width, centered contents
  - Skills: fixed desktop max width + list wrapper panel
  - Skills top band: NESTED TABLE version ONLY
    (GameSkills outputs .sv-topband-cell > .sv-topband-table > .sv-type-table)
   ========================================================== */
   ========================================================== */


table.spiritvale-skill-infobox,
/* ------------------------------------------------------------
table.spiritvale-passive-infobox {
  Global size knobs (adjust here, everything updates)
  ------------------------------------------------------------ */
:root {
    --sv - passive - width: 540px;
    --sv - skill - width: 660px;
    --sv - infobox - max: 620px; /* generic fallback if needed */
}
 
/* ============================================================
  1) Shared base: both Skills + Passives
  ========================================================== */
 
table.spiritvale - skill - infobox,
    table.spiritvale - passive - infobox {
     /* Layout */
     /* Layout */
     border-collapse: separate;
     border - collapse: separate;
     border-spacing: 0;
     border - spacing: 0;
     width: 100%;
     width: 100 %;
     max-width: 620px;
     max - width: var(--sv - infobox - max);
     margin: 1.5em auto;
     margin: 1.5em auto;


     /* Shape */
     /* Shape */
     border-radius: 12px;
     border - radius: 12px;
     overflow: hidden;
     overflow: hidden;
     border: 1px solid rgba(55, 43, 84, 0.65);
     border: 1px solid rgba(55, 43, 84, 0.65);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
     box - shadow: 0 4px 12px rgba(0, 0, 0, 0.45);


     /* Typography */
     /* Typography */
     font-size: 0.95em;
     font - size: 0.95em;
}
}


/* Top "hero" row: icon+name on left, description on right */
/* HERO row (icon+name left, description right) */
table.spiritvale-skill-infobox > tbody > tr.spiritvale-infobox-main > th,
table.spiritvale - skill - infobox > tbody > tr.spiritvale - infobox - main > th,
table.spiritvale-skill-infobox > tbody > tr.spiritvale-infobox-main > td,
    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 > th,
table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td {
    table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > td {
     background: linear-gradient(135deg, #7a6fb0, #372b54);
     background: linear - gradient(135deg, #7a6fb0, #372b54);
     color: #fff;
     color: #fff;
     padding: 0.9em 1.1em;
     padding: 0.9em 1.1em;
     text-align: center;
     text - align: center;
     vertical-align: middle;
     vertical - align: middle;
}
}


/* Make the icon sit nicely next to the title */
/* Icon spacing in hero row */
table.spiritvale-skill-infobox > tbody > tr:first-child > th .image,
table.spiritvale - skill - infobox > tbody > tr: first - child > th.image,
table.spiritvale-passive-infobox > tbody > tr:first-child > th .image {
    table.spiritvale - passive - infobox > tbody > tr: first - child > th.image {
     margin-right: 0.6em;
     margin - right: 0.6em;
     vertical-align: middle;
     vertical - align: middle;
}
}


/* Body rows (labels + values) */
/* Adds in the description */
table.spiritvale-skill-infobox tbody tr,
table.spiritvale - skill - infobox > tbody > tr.spiritvale - infobox - main > th,
table.spiritvale-passive-infobox tbody tr {
    table.spiritvale - skill - infobox > tbody > tr.spiritvale - infobox - main > td,
     border-bottom: 1px solid rgba(148, 163, 184, 0.4);
    table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > th,
    table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > td {
     background: linear - gradient(135deg, #7a6fb0, #372b54);
    color: #fff;
    padding: 0.9em 1.1em;
    text - align: center;
    vertical - align: middle;
}
}


table.spiritvale-skill-infobox tbody tr:last-child,
/* Row separators (direct children only) */
table.spiritvale-passive-infobox tbody tr:last-child {
table.spiritvale - skill - infobox > tbody > tr,
     border-bottom: none;
    table.spiritvale - passive - infobox > tbody > tr {
    border - bottom: 1px solid rgba(148, 163, 184, 0.4);
}
table.spiritvale - skill - infobox > tbody > tr: last - child,
    table.spiritvale - passive - infobox > tbody > tr: last - child {
     border - bottom: none;
}
}


/* Default label cells (exclude hero row so names never clip) */
/* Label cells (direct children only; avoids styling nested top-band tables) */
table.spiritvale-skill-infobox tbody tr:not(.spiritvale-infobox-main) th:not(.spiritvale-infobox-section-header),
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) {
    table.spiritvale - passive - infobox > tbody > tr: not(.spiritvale - infobox - main) > th: not(.spiritvale - infobox - section - header) {
     width: 26%;
     width: 26 %;
     padding: 0.45em 0.85em;
     padding: 0.45em 0.85em;
     text-align: left;
     text - align: left;
     font-weight: 600;
     font - weight: 600;
     white-space: nowrap;
     white - space: nowrap;
}
}


/* Default value cells */
/* Value cells (direct children only) */
table.spiritvale-skill-infobox tbody tr td,
table.spiritvale - skill - infobox > tbody > tr > td,
table.spiritvale-passive-infobox tbody tr td {
    table.spiritvale - passive - infobox > tbody > tr > td {
     padding: 0.45em 0.85em;
     padding: 0.45em 0.85em;
     text-align: left;
     text - align: left;
}
}


/* Zebra striping for readability */
/* Zebra striping (direct children only) */
table.spiritvale-skill-infobox tbody tr:nth-child(odd) td,
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 - 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) > td,
table.spiritvale-passive-infobox tbody tr:nth-child(odd) th:not(.spiritvale-infobox-section-header) {
            table.spiritvale - passive - infobox > tbody > tr: nth - child(odd) > th: not(.spiritvale - infobox - section - header) {
     background-color: rgba(148, 163, 184, 0.05);
     background - color: rgba(148, 163, 184, 0.05);
}
}


/* Section headers inside infobox (e.g. "General", "Type", "Mechanics") */
/* Section headers (Requirements / Mechanics / etc.) */
.spiritvale-infobox-section-header {
.spiritvale - infobox - section - header {
     background: linear-gradient(135deg, #5a4e7c, #372b54);
     background: linear - gradient(135deg, #5a4e7c, #372b54);
     color: #fff;
     color: #fff;
     text-align: left;
     text - align: left;
     padding: 0.5em 0.9em;
     padding: 0.5em 0.9em;
     font-size: 0.9em;
     font - size: 0.9em;
     text-transform: uppercase;
     text - transform: uppercase;
     letter-spacing: 0.05em;
     letter - spacing: 0.05em;
}
}


/* Left side: icon + name */
/* Hero content helpers */
.spiritvale-infobox-main-left-inner {
.spiritvale - infobox - main - left - inner {
     display: flex;
     display: flex;
     flex-direction: column;
     flex - direction: column;
     align-items: center;
     align - items: center;
     justify-content: center;
     justify - content: center;
     gap: 0.35em;
     gap: 0.35em;
}
}


.spiritvale-infobox-title {
.spiritvale - infobox - title {
     font-size: 1.25em;
     font - size: 1.25em;
     font-weight: 600;
     font - weight: 600;
}
}


/* Right side: big italic description */
.spiritvale - infobox - main - right - inner {
.spiritvale-infobox-main-right-inner {
     display: flex;
     display: flex;
     align-items: center;
     align - items: center;
     justify-content: center;
     justify - content: center;
}
}


.spiritvale-infobox-description {
.spiritvale - infobox - description {
     font-size: 1.05em;
     font - size: 1.05em;
     font-style: italic;
     font - style: italic;
     text-align: center;
     text - align: center;
     max-width: 32em;
     max - width: 32em;
     margin: 0 auto;
     margin: 0 auto;
}
}


/* ============================================================
/* ============================================================
   SpiritVale: Passives (single source of truth)
   2) Passives (stable, consistent tooltip layout)
  - Fixed, consistent desktop width
  - Centered body cells
  - Mobile hero stays side-by-side (no stacking)
   ========================================================== */
   ========================================================== */


:root { --sv-passive-width: 540px; }
table.spiritvale - passive - infobox {
 
     width: var(--sv - passive - width);
@media (min-width: 769px) {
     max - width: var(--sv - passive - width);
  :root { --sv-passive-width: 540px; }
}
 
 
/* Consistent tooltip footprint for ALL passives (desktop) */
table.spiritvale-passive-infobox {
     width: var(--sv-passive-width);
     max-width: 100%;
     margin: 1em auto;
     margin: 1em auto;
     table-layout: fixed;
     table - layout: fixed;
}
}


/* Keep hero row healthy: allow wrapping in the hero title area */
/* Hero column balance */
table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th {
table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > th {
     width: 42%;
     width: 42 %;
     white-space: normal;
     white - space: normal;
}
}
table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td {
table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > td {
     width: 58%;
     width: 58 %;
}
}


/* Center + wrap ALL non-hero rows */
/* Center + wrap all non-hero rows */
table.spiritvale-passive-infobox tbody tr:not(.spiritvale-infobox-main) th,
table.spiritvale - passive - infobox > tbody > tr: not(.spiritvale - infobox - main) > th,
table.spiritvale-passive-infobox tbody tr:not(.spiritvale-infobox-main) td {
    table.spiritvale - passive - infobox > tbody > tr: not(.spiritvale - infobox - main) > td {
     text-align: center;
     text - align: center;
     vertical-align: middle;
     vertical - align: middle;
     white-space: normal;
     white - space: normal;
     overflow-wrap: anywhere;
     overflow - wrap: anywhere;
     word-break: break-word;
     word -break: break-word;
}
}


/* Allow label column to wrap (generic CSS defaults it to nowrap) */
/* Let passive labels wrap */
table.spiritvale-passive-infobox tbody tr:not(.spiritvale-infobox-main)
table.spiritvale - passive - infobox > tbody > tr: not(.spiritvale - infobox - main)
th:not(.spiritvale-infobox-section-header) {
    > th: not(.spiritvale - infobox - section - header) {
     white-space: normal;
     white - space: normal;
}
}


/* Center section headers for passives */
/* Passive section headers centered */
table.spiritvale-passive-infobox .spiritvale-infobox-section-header {
table.spiritvale - passive - infobox.spiritvale - infobox - section - header {
     text-align: center;
     text - align: center;
}
}


/* Prevent description max-width from pushing weird layout at small widths */
/* Passive description never forces odd layout */
table.spiritvale-passive-infobox .spiritvale-infobox-description {
table.spiritvale - passive - infobox.spiritvale - infobox - description {
     max-width: 100%;
     max - width: 100 %;
     overflow-wrap: anywhere;
     overflow - wrap: anywhere;
     word-break: break-word;
     word -break: break-word;
}
}


/* Passive list layout */
/* Passive list layout (stacked, centered) */
.spiritvale-passive-list {
.spiritvale - passive - list {
     display: flex;
     display: flex;
     flex-direction: column;
     flex - direction: column;
     align-items: center;
     align - items: center;
     gap: 1.25em;
     gap: 1.25em;
}
}


/* Citizen/table wrappers: remove the “mystery outline” around some passives in lists */
/* Remove Citizen wrapper borders/spacing around passive tables in lists */
.spiritvale-passive-list .mw-table-wrapper,
.spiritvale - passive - list.mw - table - wrapper,
.spiritvale-passive-list .table-overflow,
.spiritvale - passive - list.table - overflow,
.spiritvale-passive-list .table-scroll,
.spiritvale - passive - list.table - scroll,
.spiritvale-passive-list .citizen-table {
.spiritvale - passive - list.citizen - table {
     border: none !important;
     border: none!important;
     box-shadow: none !important;
     box - shadow: none!important;
     background: transparent !important;
     background: transparent!important;
     padding: 0 !important;
     padding: 0!important;
     margin: 0 !important;
     margin: 0!important;
}
}


/* Mobile / portrait / small tablets (Citizen): keep hero row side-by-side */
/* Mobile/portrait: keep passive hero row side-by-side */
@media (max-width: 768px) {
@media(max - width: 768px) {
     body.skin-citizen table.spiritvale-passive-infobox {
     body.skin - citizen table.spiritvale - passive - infobox {
         width: 100%;
         width: 100 %;
         max-width: 100%;
         max - width: 100 %;
         display: table !important;
         display: table!important;
     }
     }


     body.skin-citizen table.spiritvale-passive-infobox > tbody {
     body.skin - citizen table.spiritvale - passive - infobox > tbody {
         display: table-row-group !important;
         display: table - row - group!important;
     }
     }


     body.skin-citizen table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main {
     body.skin - citizen table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main {
         display: table-row !important;
         display: table - row!important;
     }
     }


     body.skin-citizen table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th,
     body.skin - citizen table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > th,
    body.skin-citizen table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td {
        body.skin - citizen table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > td {
         display: table-cell !important;
         display: table - cell!important;
         float: none !important;
         float: none!important;
         box-sizing: border-box;
         box - sizing: border - box;
         vertical-align: middle;
         vertical - align: middle;
         text-align: center;
         text - align: center;


         white-space: normal;
         white - space: normal;
         overflow-wrap: anywhere;
         overflow - wrap: anywhere;
         word-break: break-word;
         word -break: break-word;
     }
     }


     body.skin-citizen table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th {
     body.skin - citizen table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > th {
         width: 46% !important;
         width: 46 % !important;
         padding: 0.75em 0.75em;
         padding: 0.75em 0.75em;
     }
     }


     body.skin-citizen table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td {
     body.skin - citizen table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > td {
         width: 54% !important;
         width: 54 % !important;
         padding: 0.75em 0.75em;
         padding: 0.75em 0.75em;
     }
     }


     body.skin-citizen table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th .image img {
     body.skin - citizen table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > th.image img {
         width: 64px !important;
         width: 64px!important;
         height: auto !important;
         height: auto!important;
    }
 
    body.skin - citizen table.spiritvale - passive - infobox.spiritvale - infobox - title,
        body.skin - citizen table.spiritvale - passive - infobox.spiritvale - infobox - description {
        white - space: normal;
        overflow - wrap: anywhere;
        word -break: break-word;
    }
}
 
/* ============================================================
  3) Skills
  - Single skill: fixed desktop max width
  - List mode: ONE wrapper panel with dividers
  - Top band: nested-table version ONLY
  ========================================================== */
 
/* Single-skill width */
table.spiritvale - skill - infobox {
    width: 100 %;
    max - width: var(--sv - skill - width);
    margin: 1.25em auto;
    table - layout: fixed;
}
 
/* List wrapper: flush, “pop” border, no background */
.sv - skill - collection {
    width: 100 %;
    max - width: var(--sv - skill - width);  /* keeps wrapper aligned to skill width */
    margin: 0 auto!important;          /* remove extra spacing around wrapper */
    padding: 0!important;
 
    border: 2px solid #372b54;
    border - radius: 10px;
    box - shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    background: transparent!important;
 
    overflow: hidden;
    display: block!important;
}
 
/* Neutralize Citizen wrappers inside the skill collection */
.sv - skill - collection.mw - table - wrapper,
.sv - skill - collection.table - overflow,
.sv - skill - collection.table - scroll,
.sv - skill - collection.citizen - table {
    border: none!important;
    box - shadow: none!important;
    background: transparent!important;
    padding: 0!important;
    margin: 0!important;
}
 
/* In list mode, each skill becomes a “row” inside the wrapper */
.sv - skill - collection table.spiritvale - skill - infobox {
    width: 100 %;
    max - width: 100 %;
    margin: 0!important;
 
    border: none!important;
    box - shadow: none!important;
    border - radius: 0!important;
}
 
/* Divider between skills */
.sv - skill - collection > * + * {
    border- top: 1px solid rgba(148, 163, 184, 0.25);
}
 
/* -------------------------
  Skill top band (nested-table)
  ------------------------- */
 
table.spiritvale - skill - infobox.sv - topband - cell {
    padding: 0!important;
    background: linear - gradient(
        135deg,
        rgba(90, 78, 124, 0.55),
        rgba(55, 43, 84, 0.55)
    )!important;
}
 
/* Inner 2-column table must fully fill the cell */
table.spiritvale - skill - infobox.sv - topband - table {
    width: 100 % !important;
    max - width: 100 % !important;
    margin: 0!important;
 
    border: 0!important;
    border - collapse: collapse!important;
    border - spacing: 0!important;
    table - layout: fixed;
    background: transparent!important;
}
 
/* Two halves of the top band */
table.spiritvale - skill - infobox.sv - topband - table > tbody > tr > td {
    width: 50 %;
    padding: 0!important; /* padding goes inside the blocks below */
    vertical - align: middle;
}
 
table.spiritvale - skill - infobox.sv - topband - table > tbody > tr > td: first - child {
    border - right: 1px solid rgba(148, 163, 184, 0.25);
}
 
/* Left: Level Select block fills the entire half */
table.spiritvale - skill - infobox.sv - level - ui {
    width: 100 %;
    margin: 0!important;
    padding: 0.75em 0.9em;
 
    display: flex;
    flex - direction: column;
    gap: 0.4em;
}
 
/* (Re-using the same title/label classes is fine) */
table.spiritvale - skill - infobox.sv - level - title {
    font - weight: 700;
    text - transform: uppercase;
    letter - spacing: 0.05em;
    font - size: 0.85em;
    opacity: 0.95;
}
 
table.spiritvale - skill - infobox.sv - level - label {
    font - weight: 600;
}
 
table.spiritvale - skill - infobox.sv - level - slider input[type = "range"] {
    width: 100 %;
    box - sizing: border - box;
}
 
/* Right: Type table fills the entire half */
table.spiritvale - skill - infobox.sv - type - table {
    width: 100 % !important;
    margin: 0!important;
    padding: 0.75em 0.9em;
 
    border: 0!important;
    border - collapse: collapse!important;
    background: transparent!important;
}
 
table.spiritvale - skill - infobox.sv - type - table th,
    table.spiritvale - skill - infobox.sv - type - table td {
    background: transparent!important;
    padding: 0.2em 0;
    text - align: left;
    vertical - align: top;
}
 
table.spiritvale - skill - infobox.sv - type - table th {
    font - weight: 700;
    white - space: nowrap;
    padding - right: 0.9em;
}
 
/* Mobile: stack Level + Type */
@media(max - width: 560px) {
    table.spiritvale - skill - infobox.sv - topband - table > tbody > tr > td {
        display: block;
        width: 100 %;
     }
     }


     body.skin-citizen table.spiritvale-passive-infobox .spiritvale-infobox-title,
     table.spiritvale - skill - infobox.sv - topband - table > tbody > tr > td: first - child {
    body.skin-citizen table.spiritvale-passive-infobox .spiritvale-infobox-description {
         border - right: none;
         white-space: normal;
         border - bottom: 1px solid rgba(148, 163, 184, 0.25);
         overflow-wrap: anywhere;
        word-break: break-word;
     }
     }
}
}
Retrieved from "https://spiritvale.info/wiki/MediaWiki:Common.css"