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
(6 intermediate revisions by the same user not shown)
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),
table.spiritvale-skill-infobox tbody tr:not(.spiritvale-infobox-main) th:not(.spiritvale-infobox-section-header),
table.spiritvale-passive-infobox tbody tr 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;
Line 202: 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 {
/* Desktop tooltip width knob */
    /* One knob: desktop tooltip width for ALL passives */
:root { --sv-passive-width: 540px; }
    --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: var(--sv-passive-width); /* <-- important: makes desktop actually widen */
     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 232: Line 223:
}
}


/* 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 243: Line 234:
}
}


/* 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 250: Line 241:
}
}


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


/* 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 270: Line 261:
}
}


/* Mobile: go full width AND stack the hero row so nothing goes off-screen */
/* Mobile / portrait / small tablets (Citizen): keep hero row side-by-side */
@media (max-width: 480px) {
@media (max-width: 768px) {
     table.spiritvale-passive-infobox {
     body.skin-citizen table.spiritvale-passive-infobox {
         width: 100%;
         width: 100%;
         max-width: 100%;
         max-width: 100%;
        display: table !important;
    }
    body.skin-citizen table.spiritvale-passive-infobox > tbody {
        display: table-row-group !important;
    }
    body.skin-citizen table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main {
        display: table-row !important;
     }
     }


     /* Stack icon+name over description */
     body.skin-citizen table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th,
    table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th,
     body.skin-citizen table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td {
     table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td {
         display: table-cell !important;
         display: block;
         float: none !important;
         width: 100%;
         box-sizing: border-box;
         box-sizing: border-box;
        vertical-align: middle;
         text-align: center;
         text-align: center;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    body.skin-citizen table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th {
        width: 46% !important;
        padding: 0.75em 0.75em;
    }
    body.skin-citizen table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td {
        width: 54% !important;
        padding: 0.75em 0.75em;
     }
     }


     /* Slightly smaller icon on phones */
     body.skin-citizen table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th .image img {
    table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th .image img {
         width: 64px !important;
         width: 64px !important;
         height: auto !important;
         height: auto !important;
     }
     }


     /* Ensure title wraps cleanly */
     body.skin-citizen table.spiritvale-passive-infobox .spiritvale-infobox-title,
     table.spiritvale-passive-infobox .spiritvale-infobox-title {
     body.skin-citizen table.spiritvale-passive-infobox .spiritvale-infobox-description {
         white-space: normal;
         white-space: normal;
         overflow-wrap: anywhere;
         overflow-wrap: anywhere;
Retrieved from "https://spiritvale.info/wiki/MediaWiki:Common.css"