MediaWiki:Common.css: Difference between revisions
MediaWiki interface page
More actions
No edit summary |
No edit summary |
||
| Line 260: | Line 260: | ||
/* Standardized slot grid */ | /* Standardized slot grid */ | ||
table.spiritvale-skill-infobox tr.sv-slot-row > td.sv-slot-cell { | :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) tr.sv-slot-row > td.sv-slot-cell { | ||
padding: 0 !important; | padding: 0 !important; | ||
background: var(--sv-base) !important; | background: var(--sv-base) !important; | ||
| Line 266: | Line 266: | ||
} | } | ||
table.spiritvale-skill-infobox .sv-slot-grid { | :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot-grid { | ||
display: grid; | display: grid; | ||
grid-template-columns: 1fr 1fr; | grid-template-columns: 1fr 1fr; | ||
| Line 277: | Line 277: | ||
} | } | ||
table.spiritvale-skill-infobox .sv-slot { | :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot { | ||
min-width: 0; | min-width: 0; | ||
display: flex; | display: flex; | ||
| Line 287: | Line 287: | ||
} | } | ||
table.spiritvale-skill-infobox .sv-slot-grid > .sv-slot.sv-slot--full { | :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot-grid > .sv-slot.sv-slot--full { | ||
grid-column: 1 / -1; | grid-column: 1 / -1; | ||
} | } | ||
table.spiritvale-skill-infobox .sv-slot--empty .sv-slot__body { | :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot--empty .sv-slot__body { | ||
min-height: 3.2em; | min-height: 3.2em; | ||
} | } | ||
table.spiritvale-skill-infobox .sv-slot__body { | :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot__body { | ||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
| Line 306: | Line 306: | ||
} | } | ||
table.spiritvale-skill-infobox .sv-herobar-1-wrap { | :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-herobar-1-wrap { | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
| Line 313: | Line 313: | ||
} | } | ||
table.spiritvale-skill-infobox .sv-herobar-icon { | :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-herobar-icon { | ||
line-height: 0; | line-height: 0; | ||
} | } | ||
table.spiritvale-skill-infobox .sv-herobar-icon img { | :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-herobar-icon img { | ||
vertical-align: middle; | vertical-align: middle; | ||
} | } | ||
| Line 372: | Line 372: | ||
table.spiritvale-skill-infobox .module-icon-name .sv-herobar-1-wrap { | :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-herobar-1-wrap { | ||
display: grid; | display: grid; | ||
grid-template-columns: auto auto; | grid-template-columns: auto auto; | ||
| Line 382: | Line 382: | ||
} | } | ||
table.spiritvale-skill-infobox .module-icon-name .sv-herobar-icon { | :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-herobar-icon { | ||
grid-column: 1; | grid-column: 1; | ||
grid-row: 1; | grid-row: 1; | ||
| Line 392: | Line 392: | ||
line-height: 0; | line-height: 0; | ||
} | } | ||
table.spiritvale-skill-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; | ||
max-height: 80px; | max-height: 80px; | ||
| Line 400: | Line 400: | ||
} | } | ||
table.spiritvale-skill-infobox .module-icon-name .sv-herobar-text { | :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-herobar-text { | ||
grid-column: 2; | grid-column: 2; | ||
grid-row: 1; | grid-row: 1; | ||
| Line 408: | Line 408: | ||
} | } | ||
table.spiritvale-skill-infobox .module-icon-name .sv-herobar-title-row { | :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-herobar-title-row { | ||
display: inline-flex; | display: inline-flex; | ||
align-items: center; | align-items: center; | ||
| Line 415: | Line 415: | ||
} | } | ||
table.spiritvale-skill-infobox .module-icon-name .sv-pill-row--req { | :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-pill-row--req { | ||
grid-column: 1 / -1; | grid-column: 1 / -1; | ||
grid-row: 2; | grid-row: 2; | ||
| Line 422: | Line 422: | ||
} | } | ||
table.spiritvale-skill-infobox .module-icon-name .sv-tip-btn--notes { | :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-tip-btn--notes { | ||
display: inline-flex; | display: inline-flex; | ||
align-items: center; | align-items: center; | ||
| Line 434: | Line 434: | ||
} | } | ||
table.spiritvale-skill-infobox .module-icon-name .sv-tip-btn--notes:hover { | :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-tip-btn--notes:hover { | ||
background: rgba(255,255,255,.14); | background: rgba(255,255,255,.14); | ||
} | } | ||
table.spiritvale-skill-infobox .module-icon-name .sv-tip-btn--notes:focus-visible { | :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-tip-btn--notes:focus-visible { | ||
outline: 2px solid rgba(255,255,255,.28); | outline: 2px solid rgba(255,255,255,.28); | ||
outline-offset: 2px; | outline-offset: 2px; | ||
} | } | ||
table.spiritvale-skill-infobox .module-icon-name .sv-ico--info { | :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-ico--info { | ||
width: 22px; | width: 22px; | ||
height: 22px; | height: 22px; | ||
| Line 468: | Line 468: | ||
} | } | ||
table.spiritvale-skill-infobox .sv-description { | :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-description { | ||
font-size: 1.05em; | font-size: 1.05em; | ||
font-style: italic; | font-style: italic; | ||
| Line 477: | Line 477: | ||
} | } | ||
/* Soft white + outline */ | /* Soft white + outline */ | ||
table.spiritvale-skill-infobox .sv-slot, | :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot, | ||
table.spiritvale-skill-infobox .sv-slot *, | :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot *, | ||
table.spiritvale-skill-infobox > tbody > tr.sv-slot-row, | :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) > tbody > tr.sv-slot-row, | ||
table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row, | :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) > tbody > tr.sv-hero-title-row, | ||
table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row { | :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) > tbody > tr.sv-hero-desc-row { | ||
color: var(--sv-text-soft) !important; | color: var(--sv-text-soft) !important; | ||
text-shadow: var(--sv-text-outline); | text-shadow: var(--sv-text-outline); | ||
| Line 489: | Line 489: | ||
- Desktop pills shrink (width:auto) | - Desktop pills shrink (width:auto) | ||
- Mobile keeps its own padding overrides below */ | - Mobile keeps its own padding overrides below */ | ||
table.spiritvale-skill-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; | width: auto; | ||
display: inline-block; | display: inline-block; | ||
| Line 505: | Line 505: | ||
/* Level selector */ | /* Level selector */ | ||
table.spiritvale-skill-infobox .module-level-selector .sv-level-ui { | :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-level-selector .sv-level-ui { | ||
width: 90%; | width: 90%; | ||
margin: 0 !important; | margin: 0 !important; | ||
| Line 513: | Line 513: | ||
} | } | ||
table.spiritvale-skill-infobox .module-level-selector .sv-level-label { | :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-level-selector .sv-level-label { | ||
font-weight: 600; | font-weight: 600; | ||
} | } | ||
table.spiritvale-skill-infobox .module-level-selector .sv-level-slider input[type="range"] { | :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-level-selector .sv-level-slider input[type="range"] { | ||
width: 90%; | width: 90%; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
| Line 523: | Line 523: | ||
} | } | ||
table.spiritvale-skill-infobox .module-level-selector .sv-level-ui-single .sv-level-slider-single { | :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-level-selector .sv-level-ui-single .sv-level-slider-single { | ||
min-height: 0.45em; | min-height: 0.45em; | ||
} | } | ||
| Line 822: | Line 822: | ||
@media (max-width: 560px) { | @media (max-width: 560px) { | ||
/* Slots stack into a single column */ | /* Slots stack into a single column */ | ||
table.spiritvale-skill-infobox .sv-slot-grid { | :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot-grid { | ||
grid-template-columns: 1fr; | grid-template-columns: 1fr; | ||
gap: 0.50em; | gap: 0.50em; | ||
| Line 829: | Line 829: | ||
/* Pills shrink by width (not font size) */ | /* Pills shrink by width (not font size) */ | ||
table.spiritvale-skill-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; | ||
display: inline-block !important; | display: inline-block !important; | ||
| Line 909: | Line 909: | ||
/* Passives */ | /* Passives */ | ||
table.spiritvale-passive-infobox { | table.spiritvale-passive-infobox { | ||
width: var(--sv-passive-width); | width: min(var(--sv-passive-width), 100%); | ||
max-width: var(--sv-passive-width); | max-width: min(var(--sv-passive-width), 100%); | ||
margin: 1em auto; | margin: 1em auto; | ||
table-layout: fixed; | table-layout: fixed; | ||
} | |||
table.spiritvale-passive-infobox .module-passive-effects .sv-passive-effects { | |||
width: 100%; | |||
} | |||
table.spiritvale-passive-infobox .module-passive-effects .sv-pe-table { | |||
width: 100%; | |||
display: flex; | |||
flex-direction: column; | |||
gap: 0; | |||
border: 1px solid var(--sv-gridline); | |||
border-radius: 8px; | |||
overflow: hidden; | |||
background: var(--sv-surface); | |||
} | |||
table.spiritvale-passive-infobox .module-passive-effects .sv-pe-row { | |||
display: grid; | |||
grid-template-columns: 1fr 1fr; | |||
gap: 0.35em; | |||
align-items: center; | |||
padding: 0.45em 0.65em; | |||
} | |||
table.spiritvale-passive-infobox .module-passive-effects .sv-pe-row + .sv-pe-row { | |||
border-top: 1px solid var(--sv-gridline); | |||
} | |||
table.spiritvale-passive-infobox .module-passive-effects .sv-pe-label { | |||
font-weight: 700; | |||
text-align: left; | |||
text-transform: none; | |||
} | |||
table.spiritvale-passive-infobox .module-passive-effects .sv-pe-value { | |||
font-weight: 650; | |||
text-align: right; | |||
overflow-wrap: anywhere; | |||
word-break: break-word; | |||
} | |||
@media (max-width: 560px) { | |||
table.spiritvale-passive-infobox .module-passive-effects .sv-pe-row { | |||
grid-template-columns: 1fr; | |||
text-align: center; | |||
} | |||
table.spiritvale-passive-infobox .module-passive-effects .sv-pe-value { | |||
text-align: center; | |||
} | |||
} | |||
table.spiritvale-passive-infobox :is(.sv-slot--5, .sv-slot--6, .sv-slot--7, .sv-slot--8), | |||
table.spiritvale-passive-infobox :is(.sv-slot[data-hero-slot="5"], .sv-slot[data-hero-slot="6"], .sv-slot[data-hero-slot="7"], .sv-slot[data-hero-slot="8"]) { | |||
display: none !important; | |||
} | } | ||