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
No edit summary
Tags: Mobile edit Mobile web edit
Line 66: Line 66:
}
}


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


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


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


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


.citizen-search-trigger {
.citizen-search-trigger {
Line 102: Line 102:
}
}


    .citizen-search-trigger:hover {
.citizen-search-trigger:hover {
        transform: translateY(-2px);
    transform: translateY(-2px);
    }
}


/* ------------------------------------------------------------
/* ------------------------------------------------------------
Line 144: Line 144:
}
}


    table.spiritvale-skill-infobox > tbody > tr,
table.spiritvale-skill-infobox > tbody > tr,
    table.spiritvale-passive-infobox > tbody > tr {
table.spiritvale-passive-infobox > tbody > tr {
        border-bottom: 1px solid var(--sv-row-border);
    border-bottom: 1px solid var(--sv-row-border);
    }
}


        table.spiritvale-skill-infobox > tbody > tr:last-child,
table.spiritvale-skill-infobox > tbody > tr:last-child,
        table.spiritvale-passive-infobox > tbody > tr:last-child {
table.spiritvale-passive-infobox > tbody > tr:last-child {
            border-bottom: none;
    border-bottom: none;
        }
}


        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;
        }
}


        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;
        }
}


        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);
        }
}


        /* Hero band */
/* Hero band */
        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,
        table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row > th,
table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row > th,
        table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row > td,
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-title-row > th,
        table.spiritvale-passive-infobox > tbody > tr.sv-hero-desc-row > td {
table.spiritvale-passive-infobox > tbody > tr.sv-hero-desc-row > td {
            background: var(--sv-base);
    background: var(--sv-base);
            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;
        }
}


        table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row {
table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row {
            border-bottom: none !important;
    border-bottom: none !important;
        }
}


            table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row > th {
table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row > th {
                padding-bottom: 0.55em;
    padding-bottom: 0.55em;
            }
}


        table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row > td {
table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row > td {
            padding: 0.55em 1.1em;
    padding: 0.55em 1.1em;
        }
}


        table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row {
table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row {
            border-bottom: none !important;
    border-bottom: none !important;
        }
}


            table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row > th {
table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row > th {
                padding-bottom: 0.55em;
    padding-bottom: 0.55em;
            }
}


        table.spiritvale-passive-infobox > tbody > tr.sv-hero-desc-row > td {
table.spiritvale-passive-infobox > tbody > tr.sv-hero-desc-row > td {
            padding: 0.55em 1.1em;
    padding: 0.55em 1.1em;
        }
}


.spiritvale-infobox-title {
.spiritvale-infobox-title {
Line 317: Line 317:
}
}


    :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-herobar-icon img {
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-herobar-icon img {
        vertical-align: middle;
    vertical-align: middle;
    }
}
 
/* -------------------------------------------------------------------------
  DE-DUPE / CONFLICT FIX:
  Tooltip + button styles were previously GLOBAL (.sv-tip-pop/.sv-tip-btn/etc),
  which conflicts with GameInfo.Skills TemplateStyles using the same class names.
  These are now scoped ONLY to the legacy table infobox system.
  ------------------------------------------------------------------------- */


/* Tooltip scopes + triggers */
/* Tooltip scopes + triggers (legacy infobox only) */
.sv-tip-content { display: none; }
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-content { display: none; }


.sv-tip-pop {
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-pop {
     position: fixed;
     position: fixed;
     z-index: 99999;
     z-index: 99999;
Line 340: Line 347:
}
}


.sv-tip-pop .sv-tip-title {
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-pop .sv-tip-title {
     font-weight: 700;
     font-weight: 700;
     margin-bottom: 6px;
     margin-bottom: 6px;
}
}


.sv-tip-pop .sv-tip-section {
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-pop .sv-tip-section {
     margin-top: 8px;
     margin-top: 8px;
}
}


.sv-tip-pop .sv-tip-label {
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-pop .sv-tip-label {
     font-weight: 700;
     font-weight: 700;
     display: block;
     display: block;
Line 356: Line 363:
}
}


.sv-tip-scope { position: relative; }
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-scope { position: relative; }
.sv-tip-btn {
 
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-btn {
     cursor: pointer;
     cursor: pointer;
     user-select: none;
     user-select: none;
Line 366: Line 374:
}
}


.sv-tip-btn:focus-visible {
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-btn:focus-visible {
     outline: 2px solid rgba(255,255,255,.25);
     outline: 2px solid rgba(255,255,255,.25);
     outline-offset: 2px;
     outline-offset: 2px;
}
}


:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-herobar-1-wrap {
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-herobar-1-wrap {
Line 392: Line 399:
     line-height: 0;
     line-height: 0;
}
}
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-herobar-icon img {
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-herobar-icon img {
     max-width: 80px;
     max-width: 80px;
Line 457: Line 465:
}
}


.module-icon-name .sv-pill--req {
/* (was global) now scoped so it cannot affect GameInfo.Skills pills */
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-pill--req {
     display: inline-flex;
     display: inline-flex;
     align-items: center;
     align-items: center;
}
}


.sv-pill--req::after {
/* (was global) now scoped so it cannot affect GameInfo.Skills pills */
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-pill--req::after {
     content: " ▼";
     content: " ▼";
     font-weight: normal;
     font-weight: normal;
Line 476: Line 486:
     opacity: 0.95;
     opacity: 0.95;
}
}
/* Soft white + outline */
/* 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,
Line 572: Line 583:


/* Desktop ordering */
/* Desktop ordering */
table.spiritvale-skill-infobox .module-skill-type .sv-type-damage {
table.spiritvale-skill-infobox .module-skill-type .sv-type-damage { order: 1; }
    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-element {
table.spiritvale-skill-infobox .module-skill-type .sv-type-cast { order: 5; }
    order: 2;
table.spiritvale-skill-infobox .module-skill-type .sv-type-combo { order: 6; }
}
 
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;
}


/* SourceType */
/* SourceType */
Line 736: Line 730:
     gap: 0.55em;
     gap: 0.55em;
     align-items: start;
     align-items: start;
    /* Let columns consume available width (we'll center inside columns) */
     justify-items: stretch;
     justify-items: stretch;
}
}


    table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-1 {
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-1 {
        grid-template-columns: 1fr;
    grid-template-columns: 1fr;
        justify-items: center; /* truly centered when only one group exists */
    justify-items: center;
    }
}


    /* Default 2-col split (works everywhere; desktop override below) */
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-2 {
    table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-2 {
    grid-template-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
}
    }


/* Columns (default = stacked/centered) */
/* Columns (default = stacked/centered) */
Line 774: Line 766:
}
}


/* Values centered (fix for drifting/left-align cases) */
/* Values centered */
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-value {
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-value {
     width: 100%;
     width: 100%;
Line 787: Line 779:
}
}


/* ============================================================
/* Desktop behavior: mechanics spread out across the right column */
  Desktop behavior: mechanics spread out across the right column
  ============================================================ */
@media (min-width: 720px) {
@media (min-width: 720px) {


    /* Make flags column a bit narrower, mechanics column wider */
     table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-2 {
     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);
         grid-template-columns: minmax(8.5em, 0.85fr) minmax(16em, 1.15fr);
     }
     }


    /*
    Turn the mechanics column into a wrapping grid.
    Each mechanic becomes a grid item so "Chains" and "Knockback"
    can sit side-by-side when there's room.
  */
     table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-col-mech {
     table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-col-mech {
         display: grid; /* overrides the flex rule above */
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(9.5em, 1fr));
         grid-template-columns: repeat(auto-fit, minmax(9.5em, 1fr));
         gap: 0.55em 0.75em;
         gap: 0.55em 0.75em;
         align-items: start;
         align-items: start;
         justify-items: center; /* center each mechanic card within its cell */
         justify-items: center;
         align-content: center; /* center the whole group vertically if short */
         align-content: center;
         text-align: center;
         text-align: center;
     }
     }


        /* Ensure each mechanic block fills its grid cell cleanly */
    table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-col-mech .sv-sm-mech {
        table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-col-mech .sv-sm-mech {
        width: 100%;
            width: 100%;
    }
        }
}
}


/* Mobile */
/* Mobile */
@media (max-width: 560px) {
@media (max-width: 560px) {
    /* Slots stack into a single column */
 
     :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot-grid {
     :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot-grid {
         grid-template-columns: 1fr;
         grid-template-columns: 1fr;
Line 828: Line 810:
     }
     }


    /* Pills shrink by width (not font size) */
     :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) {
     :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 !important;
         width: auto !important;
Line 837: Line 818:
     }
     }


     /* SkillType stays 3 columns, but reorders to:
     /* SkillType reorders */
    Damage, Element, Target, Cast, Hits, Combo */
     table.spiritvale-skill-infobox .module-skill-type .sv-type-damage { order: 1; }
     table.spiritvale-skill-infobox .module-skill-type .sv-type-damage {
     table.spiritvale-skill-infobox .module-skill-type .sv-type-element { order: 2; }
        order: 1;
     table.spiritvale-skill-infobox .module-skill-type .sv-type-target { order: 3; }
    }
     table.spiritvale-skill-infobox .module-skill-type .sv-type-cast { order: 4; }
 
     table.spiritvale-skill-infobox .module-skill-type .sv-type-hits { order: 5; }
     table.spiritvale-skill-infobox .module-skill-type .sv-type-element {
     table.spiritvale-skill-infobox .module-skill-type .sv-type-combo { order: 6; }
        order: 2;
    }
 
     table.spiritvale-skill-infobox .module-skill-type .sv-type-target {
        order: 3;
    }
 
     table.spiritvale-skill-infobox .module-skill-type .sv-type-cast {
        order: 4;
    }
 
     table.spiritvale-skill-infobox .module-skill-type .sv-type-hits {
        order: 5;
    }
 
     table.spiritvale-skill-infobox .module-skill-type .sv-type-combo {
        order: 6;
    }


     /* SourceType: mod over source, beside scaling */
     /* SourceType: mod over source, beside scaling */
Line 876: Line 839:
     table.spiritvale-skill-infobox
     table.spiritvale-skill-infobox
     .sv-slot.skill-source-module.sv-has-mod:not(.sv-only-source):not(.sv-only-scaling)
     .sv-slot.skill-source-module.sv-has-mod:not(.sv-only-source):not(.sv-only-scaling)
     .sv-source-modifier {
     .sv-source-modifier { grid-area: mod; }
        grid-area: mod;
    }


     table.spiritvale-skill-infobox
     table.spiritvale-skill-infobox
     .sv-slot.skill-source-module.sv-has-mod:not(.sv-only-source):not(.sv-only-scaling)
     .sv-slot.skill-source-module.sv-has-mod:not(.sv-only-source):not(.sv-only-scaling)
     .sv-source-main {
     .sv-source-main { grid-area: source; }
        grid-area: source;
    }


     table.spiritvale-skill-infobox
     table.spiritvale-skill-infobox
Line 893: Line 852:
     }
     }


     /* QuickStats becomes 2 cols in tiles */
     /* QuickStats becomes 2 cols */
     table.spiritvale-skill-infobox .module-quick-stats .sv-m4-grid {
     table.spiritvale-skill-infobox .module-quick-stats .sv-m4-grid {
         grid-template-columns: 1fr 1fr;
         grid-template-columns: 1fr 1fr;
Line 900: Line 859:
     }
     }


     /* Special Mechanics:
     /* Special Mechanics: if 2 groups => stacked */
    - If 2 groups: single centered column (stacked) */
     table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-2 {
     table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-2 {
         grid-template-columns: 1fr;
         grid-template-columns: 1fr;
Line 1,054: Line 1,012:
}
}


    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;
    }
}


    table.spiritvale-passive-infobox .spiritvale-infobox-section-header {
table.spiritvale-passive-infobox .spiritvale-infobox-section-header {
        text-align: center;
    text-align: center;
    }
}


.spiritvale-passive-list {
.spiritvale-passive-list {
Line 1,074: Line 1,032:
}
}


    .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;
    }
}


/* Light mode tweaks */
/* Light mode tweaks */
Retrieved from "https://spiritvale.info/wiki/MediaWiki:Common.css"