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 editNewer edit →
No edit summary
No edit summary
Line 90: Line 90:
     font-size: 0.95em;
     font-size: 0.95em;
}
}
/* Optional: float single infoboxes on wide screens.
  (Lists of many boxes will still stack nicely.) */
/*
@media (min-width: 960px) {
    table.spiritvale-skill-infobox,
    table.spiritvale-passive-infobox {
        float: right;
        margin: 0 0 1.5em 1.5em;
    }
}
*/


/* Top "hero" row: icon+name on left, description on right */
/* Top "hero" row: icon+name on left, description on right */
Line 133: Line 121:
}
}


/* Default label cells */
/* Default label cells (exclude hero row so names never clip) */
table.spiritvale-skill-infobox tbody tr th:not(.spiritvale-infobox-section-header),
/* Default label cells (exclude hero row) */
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) {
Line 204: Line 190:
   - Fixed, consistent desktop width
   - Fixed, consistent desktop width
   - Centered body cells
   - Centered body cells
   - Mobile-safe hero row (stacks)
   - Mobile hero stays side-by-side (no stacking)
   ========================================================== */
   ========================================================== */


:root {
:root {
    /* One knob: desktop tooltip width for ALL passives */
     --sv-passive-width: 360px; /* one knob */
     --sv-passive-width: 360px;
}
}


/* Fixed tooltip footprint on desktop, still safe if container is narrower */
/* Consistent tooltip footprint for ALL passives (desktop) */
table.spiritvale-passive-infobox {
table.spiritvale-passive-infobox {
     width: var(--sv-passive-width);
     width: var(--sv-passive-width);
     max-width: 100%;
     max-width: 100%;
     margin: 1em auto;
     margin: 1em auto;
    table-layout: fixed;
}


    /* Reset any earlier experiments */
/* Keep hero row healthy: allow wrapping in the hero title area */
     display: table;
table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th {
     table-layout: fixed;
     width: 42%;
     white-space: normal;
}
table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td {
    width: 58%;
}
}


/* Center + wrap all NON-hero rows (hero row stays as your “perfect” styling) */
/* 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;
Line 234: Line 224:
}
}


/* Allow labels to wrap too (generic CSS makes labels nowrap) */
/* Allow label column to wrap (generic CSS defaults it to nowrap) */
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) {
Line 245: Line 235:
}
}


/* Prevent description width rules from pushing layout weirdly */
/* Prevent description max-width from pushing weird layout at small widths */
table.spiritvale-passive-infobox .spiritvale-infobox-description {
table.spiritvale-passive-infobox .spiritvale-infobox-description {
     max-width: 100%;
     max-width: 100%;
Line 252: Line 242:
}
}


/* Make auto-lists stack nicely */
/* Passive list layout */
.spiritvale-passive-list {
.spiritvale-passive-list {
     display: flex;
     display: flex;
Line 260: Line 250:
}
}


/* Remove “mystery wrapper outline” around some passives in lists */
/* Citizen/table wrappers: remove the “mystery outline” around some passives in lists */
.spiritvale-passive-list .mw-table-wrapper,
.spiritvale-passive-list .mw-table-wrapper,
.spiritvale-passive-list .table-overflow,
.spiritvale-passive-list .table-overflow,
Line 272: Line 262:
}
}


/* Mobile: go full width AND stack the hero row so nothing goes off-screen */
/* Mobile: full width, KEEP hero row side-by-side, allow it to grow taller */
@media (max-width: 480px) {
@media (max-width: 480px) {
     table.spiritvale-passive-infobox {
     table.spiritvale-passive-infobox {
Line 279: Line 269:
     }
     }


     /* Stack icon+name over description */
     /* Force table-cell to defeat any responsive-table stacking behavior */
     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 {
         display: block;
         display: table-cell !important;
        width: 100%;
         box-sizing: border-box;
         box-sizing: border-box;
         text-align: center;
         text-align: center;
        vertical-align: middle;
    }
    /* Give the icon+name a bit more room so it doesn’t clip */
    table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th {
        width: 46% !important;
        padding: 0.75em 0.75em;
    }
    table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td {
        width: 54% !important;
        padding: 0.75em 0.75em;
     }
     }


Line 294: Line 294:
     }
     }


     /* Ensure title wraps cleanly */
     /* Ensure hero title/description wrap instead of overflowing */
     table.spiritvale-passive-infobox .spiritvale-infobox-title {
     table.spiritvale-passive-infobox .spiritvale-infobox-title,
    table.spiritvale-passive-infobox .spiritvale-infobox-description {
         white-space: normal;
         white-space: normal;
         overflow-wrap: anywhere;
         overflow-wrap: anywhere;
         word-break: break-word;
         word-break: break-word;
    }
}
/* ============================================================
  SpiritVale: Passives (single source of truth)
  ========================================================== */
:root { --sv-passive-width: 360px; }
table.spiritvale-passive-infobox {
    width: var(--sv-passive-width);
    max-width: 100%;
    margin: 1em auto;
    table-layout: fixed;
}
/* Hero row: ensure left cell is wide enough for icon + title */
table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th {
    width: 42%;
    white-space: normal;
}
table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td {
    width: 58%;
}
/* 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) td {
    text-align: center;
    vertical-align: middle;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* Center section headers (passives only) */
table.spiritvale-passive-infobox .spiritvale-infobox-section-header {
    text-align: center;
}
.spiritvale-passive-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25em;
}
/* Remove wrapper outline inside passive lists */
.spiritvale-passive-list .mw-table-wrapper,
.spiritvale-passive-list .table-overflow,
.spiritvale-passive-list .table-scroll,
.spiritvale-passive-list .citizen-table {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Mobile: stack hero row so nothing can go off-screen */
@media (max-width: 480px) {
    table.spiritvale-passive-infobox {
        width: 100%;
        max-width: 100%;
    }
    table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th,
    table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }
    table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th .image img {
        width: 64px !important;
        height: auto !important;
    }
}
/* ============================================================
  SpiritVale: Passives (single source of truth)
  ========================================================== */
:root { --sv-passive-width: 360px; }
table.spiritvale-passive-infobox {
    width: var(--sv-passive-width);
    max-width: 100%;
    margin: 1em auto;
    table-layout: fixed;
}
/* Hero row: ensure left cell is wide enough for icon + title */
table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th {
    width: 42%;
    white-space: normal;
}
table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td {
    width: 58%;
}
/* 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) td {
    text-align: center;
    vertical-align: middle;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* Center section headers (passives only) */
table.spiritvale-passive-infobox .spiritvale-infobox-section-header {
    text-align: center;
}
.spiritvale-passive-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25em;
}
/* Remove wrapper outline inside passive lists */
.spiritvale-passive-list .mw-table-wrapper,
.spiritvale-passive-list .table-overflow,
.spiritvale-passive-list .table-scroll,
.spiritvale-passive-list .citizen-table {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Mobile: stack hero row so nothing can go off-screen */
@media (max-width: 480px) {
    table.spiritvale-passive-infobox {
        width: 100%;
        max-width: 100%;
    }
    table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th,
    table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }
    table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th .image img {
        width: 64px !important;
        height: auto !important;
     }
     }
}
}
Retrieved from "https://spiritvale.info/wiki/MediaWiki:Common.css"