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
Line 113: Line 113:
     --sv-skill-width: 660px;
     --sv-skill-width: 660px;
     --sv-passive-width: 540px;
     --sv-passive-width: 540px;
    --sv-card-border: rgba(75, 81, 96, 0.55);
    --sv-row-border: rgba(148, 163, 184, 0.35);
     --sv-base: #0F172B;
     --sv-base: #0F172B;
     --sv-surface: #1b2336;
     --sv-surface: #1b2336;
    --sv-pill: #4B5160;
    --sv-card-border: #4B5160;
    --sv-row-border: rgba(255, 255, 255, 0.18);
     --sv-hero-a: var(--sv-base);
     --sv-hero-a: var(--sv-base);
     --sv-hero-b: var(--sv-base);
     --sv-hero-b: var(--sv-base);
     --sv-tile-a: var(--sv-surface);
     --sv-tile-a: var(--sv-surface);
     --sv-tile-b: var(--sv-surface);
     --sv-tile-b: var(--sv-surface);
     --sv-gridline: rgba(255, 255, 255, 0.24);
     --sv-gridline: rgba(255, 255, 255, 0.14);
    --sv-pill: #4B5160;
    --sv-pill-a: var(--sv-pill);
    --sv-pill-b: var(--sv-pill);
     --sv-text-soft: rgba(255, 255, 255, 0.92);
     --sv-text-soft: rgba(255, 255, 255, 0.92);
     --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);
     --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);
Line 183: Line 185:
         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-hero-b);
             background: var(--sv-base);
             color: #fff;
             color: #fff;
             padding: 0.9em 1.1em;
             padding: 0.9em 1.1em;
Line 257: Line 259:
}
}


/* Hero bar (2 slots) */
/* Standardized slot grid */
table.spiritvale-skill-infobox .hero-bar-grid {
table.spiritvale-skill-infobox tr.sv-slot-row > td.sv-slot-cell {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 0.9em;
}
 
table.spiritvale-skill-infobox .hero-bar-module {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--sv-surface);
    border: 1px solid var(--sv-gridline);
    border-radius: 10px;
}
 
table.spiritvale-skill-infobox .hero-bar-module .hero-bar-module-body {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.95em;
}
 
table.spiritvale-skill-infobox .sv-herobar-1-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65em;
}
 
table.spiritvale-skill-infobox .sv-herobar-icon {
    line-height: 0;
}
 
    table.spiritvale-skill-infobox .sv-herobar-icon img {
        vertical-align: middle;
    }
 
/* Modules row (2x2) */
table.spiritvale-skill-infobox tr.hero-modules-row > td.hero-modules-cell {
     padding: 0 !important;
     padding: 0 !important;
     background: var(--sv-base) !important;
     background: var(--sv-base) !important;
Line 309: Line 266:
}
}


table.spiritvale-skill-infobox .hero-modules-grid {
table.spiritvale-skill-infobox .sv-slot-grid {
     display: grid;
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-columns: 1fr 1fr;
    gap: 0;
     grid-auto-flow: row dense;
     grid-auto-flow: row dense;
    gap: 0.55em;
    width: 100%;
    box-sizing: border-box;
    background: var(--sv-base);
    padding: 0.80em;
}
}


.mw-parser-output table.spiritvale-skill-infobox .hero-module {
table.spiritvale-skill-infobox .sv-slot {
     padding: 0.40em;
     min-width: 0;
    display: flex;
     box-sizing: border-box;
     box-sizing: border-box;
     background: var(--sv-surface) !important;
     background: var(--sv-surface) !important;
     color: #fff !important;
     color: #fff !important;
     border: 1px solid var(--sv-gridline);
     border: 1px solid var(--sv-gridline);
     border-radius: 10px;
     border-radius: 8px;
}
}


table.spiritvale-skill-infobox .hero-module.hero-module-full {
table.spiritvale-skill-infobox .sv-slot--full {
     grid-column: 1 / -1;
     grid-column: 1 / -1;
}
}


table.spiritvale-skill-infobox .hero-module-empty .hero-module-body {
table.spiritvale-skill-infobox .sv-slot--empty .sv-slot__body {
     min-height: 3.2em;
     min-height: 3.2em;
}
}


table.spiritvale-skill-infobox .hero-module .hero-module-body {
table.spiritvale-skill-infobox .sv-slot__body {
     width: 100%;
     width: 100%;
     height: 100%;
     height: 100%;
Line 340: Line 302:
     justify-content: center;
     justify-content: center;
     text-align: center;
     text-align: center;
     flex-direction: column;
     padding: 0.85em;
     gap: 0.35em;
     box-sizing: border-box;
}
}


@media (min-width: 1024px) {
table.spiritvale-skill-infobox .sv-herobar-1-wrap {
    table.spiritvale-skill-infobox .hero-bar-grid {
     display: flex;
        align-items: stretch;
        grid-auto-rows: minmax(6.5em, auto);
    }
 
    table.spiritvale-skill-infobox .hero-bar-module {
        height: 100%;
    }
 
    table.spiritvale-skill-infobox .hero-bar-module .hero-bar-module-body {
        padding: 1.05em;
    }
 
    table.spiritvale-skill-infobox .hero-modules-grid {
        gap: 0.75em;
        grid-auto-rows: minmax(8.5em, auto);
        align-items: stretch;
    }
 
     .mw-parser-output table.spiritvale-skill-infobox .hero-module {
        padding: 0;
        display: flex;
        align-items: stretch;
    }
 
    table.spiritvale-skill-infobox .hero-module .hero-module-body {
        padding: 1em;
        min-height: 7.5em;
    }
}
 
/* Description module: keep centered like all other modules */
table.spiritvale-skill-infobox .module-description .hero-module-body {
     align-items: center;
     align-items: center;
     justify-content: center;
     justify-content: center;
     text-align: center;
     gap: 0.65em;
}
}


/* Kill default paragraph margins that can “fake” left alignment */
table.spiritvale-skill-infobox .sv-herobar-icon {
table.spiritvale-skill-infobox .module-description .sv-module-description,
     line-height: 0;
table.spiritvale-skill-infobox .module-description .sv-module-description p {
     margin: 0;
    width: 100%;
    text-align: center;
}
}


table.spiritvale-skill-infobox .sv-module-description {
     table.spiritvale-skill-infobox .sv-herobar-icon img {
    width: 100%;
         vertical-align: middle;
}
 
@media (min-width: 1024px) {
    .mw-parser-output table.spiritvale-skill-infobox > tbody > tr.spiritvale-infobox-main > th,
    .mw-parser-output table.spiritvale-skill-infobox > tbody > tr.spiritvale-infobox-main > td,
    .mw-parser-output table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row > th,
     .mw-parser-output table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row > td {
         padding: 0.65em 0.85em;
        background: var(--sv-card-bg);
     }
     }


    .mw-parser-output table.spiritvale-skill-infobox .hero-bar-grid {
table.spiritvale-skill-infobox .sv-description {
        gap: 0.65em;
    font-size: 1.05em;
     }
     font-style: italic;
 
     max-width: 42em;
    .mw-parser-output table.spiritvale-skill-infobox tr.hero-modules-row > td.hero-modules-cell {
     margin: 0 auto;
        padding: 0 !important;
     line-height: 1.35;
        background: var(--sv-card-bg) !important;
     opacity: 0.95;
     }
 
    .mw-parser-output table.spiritvale-skill-infobox .hero-modules-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 1fr;
        gap: 0.35em;
        background: var(--sv-card-bg);
     }
 
    .mw-parser-output table.spiritvale-skill-infobox :where(.hero-bar-module, .hero-module) {
        background: var(--sv-card-bg) !important;
        border: 1px solid var(--sv-gridline);
        padding: 0.35em 0.5em;
        border-radius: 8px;
        box-sizing: border-box;
     }
 
    .mw-parser-output table.spiritvale-skill-infobox .hero-module {
        border-top: 1px solid var(--sv-gridline) !important;
        border-left: 1px solid var(--sv-gridline) !important;
    }
 
    .mw-parser-output table.spiritvale-skill-infobox .hero-module.hero-module-full {
        grid-column: 1 / -1;
     }
 
    .mw-parser-output table.spiritvale-skill-infobox :where(.hero-bar-module, .hero-module) :where(.hero-bar-module-body, .hero-module-body) {
        padding: 0.25em 0.4em;
    }
 
    .mw-parser-output table.spiritvale-skill-infobox .hero-module-empty .hero-module-body {
        min-height: 2.75em;
    }
}
}
/* Soft white + outline */
/* Soft white + outline */
table.spiritvale-skill-infobox .hero-module,
table.spiritvale-skill-infobox .sv-slot,
table.spiritvale-skill-infobox .hero-module *,
table.spiritvale-skill-infobox .sv-slot *,
table.spiritvale-skill-infobox .hero-bar-module,
table.spiritvale-skill-infobox > tbody > tr.sv-slot-row,
table.spiritvale-skill-infobox .hero-bar-module *,
table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row,
table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row,
table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row {
table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row {
Line 568: Line 450:


/* SourceType */
/* SourceType */
table.spiritvale-skill-infobox .hero-module.skill-source-module .hero-module-body {
table.spiritvale-skill-infobox .sv-slot.skill-source-module .sv-slot__body {
     width: 100%;
     width: 100%;
     height: 100%;
     height: 100%;
Line 582: Line 464:
}
}


table.spiritvale-skill-infobox .hero-module.skill-source-module.sv-has-mod .sv-source-grid {
table.spiritvale-skill-infobox .sv-slot.skill-source-module.sv-has-mod .sv-source-grid {
     grid-template-columns: 0.85fr 1fr 1fr;
     grid-template-columns: 0.85fr 1fr 1fr;
}
}


table.spiritvale-skill-infobox .hero-module.skill-source-module.sv-no-mod .sv-source-grid {
table.spiritvale-skill-infobox .sv-slot.skill-source-module.sv-no-mod .sv-source-grid {
     grid-template-columns: 1fr 1fr;
     grid-template-columns: 1fr 1fr;
}
}


table.spiritvale-skill-infobox .hero-module.skill-source-module.sv-only-source.sv-no-mod .sv-source-grid,
table.spiritvale-skill-infobox .sv-slot.skill-source-module.sv-only-source.sv-no-mod .sv-source-grid,
table.spiritvale-skill-infobox .hero-module.skill-source-module.sv-only-scaling.sv-no-mod .sv-source-grid {
table.spiritvale-skill-infobox .sv-slot.skill-source-module.sv-only-scaling.sv-no-mod .sv-source-grid {
     grid-template-columns: 1fr;
     grid-template-columns: 1fr;
}
}


table.spiritvale-skill-infobox .hero-module.skill-source-module.sv-only-source.sv-has-mod .sv-source-grid,
table.spiritvale-skill-infobox .sv-slot.skill-source-module.sv-only-source.sv-has-mod .sv-source-grid,
table.spiritvale-skill-infobox .hero-module.skill-source-module.sv-only-scaling.sv-has-mod .sv-source-grid {
table.spiritvale-skill-infobox .sv-slot.skill-source-module.sv-only-scaling.sv-has-mod .sv-source-grid {
     grid-template-columns: 0.95fr 1.05fr;
     grid-template-columns: 0.95fr 1.05fr;
}
}
Line 635: Line 517:


/* Quick stats */
/* Quick stats */
table.spiritvale-skill-infobox .hero-module.module-quick-stats .hero-module-body {
table.spiritvale-skill-infobox .sv-slot.module-quick-stats .sv-slot__body {
     width: 100%;
     width: 100%;
     height: 100%;
     height: 100%;
Line 681: Line 563:
   ============================================================ */
   ============================================================ */


table.spiritvale-skill-infobox .hero-module.module-special-mechanics .hero-module-body {
table.spiritvale-skill-infobox .sv-slot.module-special-mechanics .sv-slot__body {
     width: 100%;
     width: 100%;
     height: 100%;
     height: 100%;
Line 788: Line 670:
/* Mobile */
/* Mobile */
@media (max-width: 560px) {
@media (max-width: 560px) {
     /* Hero bar stacks */
     /* Slots stack into a single column */
     table.spiritvale-skill-infobox .hero-bar-grid {
     table.spiritvale-skill-infobox .sv-slot-grid {
         grid-template-columns: 1fr;
         grid-template-columns: 1fr;
         row-gap: 0.45em;
         gap: 0.50em;
    }
         padding: 0.70em;
 
    .mw-parser-output table.spiritvale-skill-infobox .hero-module {
         padding: 0.55em;
     }
     }


Line 835: Line 714:
     /* SourceType: mod over source, beside scaling */
     /* SourceType: mod over source, beside scaling */
     table.spiritvale-skill-infobox
     table.spiritvale-skill-infobox
     .hero-module.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-grid {
     .sv-source-grid {
         grid-template-columns: 1fr 1fr;
         grid-template-columns: 1fr 1fr;
Line 845: Line 724:


     table.spiritvale-skill-infobox
     table.spiritvale-skill-infobox
     .hero-module.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;
Line 851: Line 730:


     table.spiritvale-skill-infobox
     table.spiritvale-skill-infobox
     .hero-module.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;
Line 857: Line 736:


     table.spiritvale-skill-infobox
     table.spiritvale-skill-infobox
     .hero-module.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-scaling {
     .sv-source-scaling {
         grid-area: scaling;
         grid-area: scaling;
Retrieved from "https://spiritvale.info/wiki/MediaWiki:Common.css"