MediaWiki:Common.css: Difference between revisions
MediaWiki interface page
More actions
No edit summary |
No edit summary |
||
| (20 intermediate revisions by 2 users not shown) | |||
| Line 61: | Line 61: | ||
table.custom-table > tbody > tr.middle-header > th { | table.custom-table > tbody > tr.middle-header > th { | ||
background:linear-gradient(180deg,#7a6fb0,#5a4e7c); color:white; text-align:center; padding:6px; font-size:110%; | background:linear-gradient(180deg,#7a6fb0,#5a4e7c); color:white; text-align:center; padding:6px; font-size:110%; | ||
} | |||
.citizen-search-trigger:hover { | |||
transform: translateY(-2px); | |||
transition: transform .15s ease-in-out; | |||
} | |||
/* ============================================================ | |||
SpiritVale Infoboxes (Skills + Passives) | |||
- Shared styling for both infobox types | |||
- Passives: fixed desktop width, centered contents | |||
- Skills: fixed desktop max width + list wrapper panel | |||
- Skills top band: NESTED TABLE version ONLY | |||
(GameSkills outputs .sv-topband-cell > .sv-topband-table > .sv-type-table) | |||
========================================================== */ | |||
/* ------------------------------------------------------------ | |||
Global size knobs (adjust here, everything updates) | |||
------------------------------------------------------------ */ | |||
:root { | |||
--sv-passive-width: 540px; | |||
--sv-skill-width: 660px; | |||
--sv-infobox-max: 620px; /* generic fallback if needed */ | |||
} | |||
/* ============================================================ | |||
1) Shared base: both Skills + Passives | |||
========================================================== */ | |||
table.spiritvale-skill-infobox, | |||
table.spiritvale-passive-infobox { | |||
/* Layout */ | |||
border-collapse: separate; | |||
border-spacing: 0; | |||
width: 100%; | |||
max-width: var(--sv-infobox-max); | |||
margin: 1.5em auto; | |||
/* Shape */ | |||
border-radius: 12px; | |||
overflow: hidden; | |||
border: 1px solid rgba(55, 43, 84, 0.65); | |||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45); | |||
/* Typography */ | |||
font-size: 0.95em; | |||
} | |||
/* HERO row (icon+name left, description right) */ | |||
table.spiritvale-skill-infobox > tbody > tr.spiritvale-infobox-main > th, | |||
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 > td { | |||
background: linear-gradient(135deg, #7a6fb0, #372b54); | |||
color: #fff; | |||
padding: 0.9em 1.1em; | |||
text-align: center; | |||
vertical-align: middle; | |||
} | |||
/* Icon spacing in hero row */ | |||
table.spiritvale-skill-infobox > tbody > tr:first-child > th .image, | |||
table.spiritvale-passive-infobox > tbody > tr:first-child > th .image { | |||
margin-right: 0.6em; | |||
vertical-align: middle; | |||
} | |||
/* Row separators (direct children only) */ | |||
table.spiritvale-skill-infobox > tbody > tr, | |||
table.spiritvale-passive-infobox > tbody > tr { | |||
border-bottom: 1px solid rgba(148, 163, 184, 0.4); | |||
} | |||
table.spiritvale-skill-infobox > tbody > tr:last-child, | |||
table.spiritvale-passive-infobox > tbody > tr:last-child { | |||
border-bottom: none; | |||
} | |||
/* Label cells (direct children only; avoids styling nested top-band tables) */ | |||
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) { | |||
width: 26%; | |||
padding: 0.45em 0.85em; | |||
text-align: left; | |||
font-weight: 600; | |||
white-space: nowrap; | |||
} | |||
/* Value cells (direct children only) */ | |||
table.spiritvale-skill-infobox > tbody > tr > td, | |||
table.spiritvale-passive-infobox > tbody > tr > td { | |||
padding: 0.45em 0.85em; | |||
text-align: left; | |||
} | |||
/* Zebra striping (direct children only) */ | |||
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-passive-infobox > tbody > tr:nth-child(odd) > td, | |||
table.spiritvale-passive-infobox > tbody > tr:nth-child(odd) > th:not(.spiritvale-infobox-section-header) { | |||
background-color: rgba(148, 163, 184, 0.05); | |||
} | |||
/* Section headers (Requirements / Mechanics / etc.) */ | |||
.spiritvale-infobox-section-header { | |||
background: linear-gradient(135deg, #5a4e7c, #372b54); | |||
color: #fff; | |||
text-align: left; | |||
padding: 0.5em 0.9em; | |||
font-size: 0.9em; | |||
text-transform: uppercase; | |||
letter-spacing: 0.05em; | |||
} | |||
/* Hero content helpers */ | |||
.spiritvale-infobox-main-left-inner { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
justify-content: center; | |||
gap: 0.35em; | |||
} | |||
.spiritvale-infobox-title { | |||
font-size: 1.25em; | |||
font-weight: 600; | |||
} | |||
.spiritvale-infobox-main-right-inner { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
} | |||
.spiritvale-infobox-description { | |||
font-size: 1.05em; | |||
font-style: italic; | |||
text-align: center; | |||
max-width: 32em; | |||
margin: 0 auto; | |||
} | |||
/* ============================================================ | |||
2) Passives (stable, consistent tooltip layout) | |||
========================================================== */ | |||
table.spiritvale-passive-infobox { | |||
width: var(--sv-passive-width); | |||
max-width: var(--sv-passive-width); | |||
margin: 1em auto; | |||
table-layout: fixed; | |||
} | |||
/* Hero column balance */ | |||
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; | |||
} | |||
/* Let passive labels wrap */ | |||
table.spiritvale-passive-infobox > tbody > tr:not(.spiritvale-infobox-main) | |||
> th:not(.spiritvale-infobox-section-header) { | |||
white-space: normal; | |||
} | |||
/* Passive section headers centered */ | |||
table.spiritvale-passive-infobox .spiritvale-infobox-section-header { | |||
text-align: center; | |||
} | |||
/* Passive description never forces odd layout */ | |||
table.spiritvale-passive-infobox .spiritvale-infobox-description { | |||
max-width: 100%; | |||
overflow-wrap: anywhere; | |||
word-break: break-word; | |||
} | |||
/* Passive list layout (stacked, centered) */ | |||
.spiritvale-passive-list { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
gap: 1.25em; | |||
} | |||
/* Remove Citizen wrapper borders/spacing around passive tables in 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/portrait: keep passive hero row side-by-side */ | |||
@media (max-width: 768px) { | |||
body.skin-citizen table.spiritvale-passive-infobox { | |||
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; | |||
} | |||
body.skin-citizen table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th, | |||
body.skin-citizen table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td { | |||
display: table-cell !important; | |||
float: none !important; | |||
box-sizing: border-box; | |||
vertical-align: middle; | |||
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; | |||
} | |||
body.skin-citizen table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th .image img { | |||
width: 64px !important; | |||
height: auto !important; | |||
} | |||
body.skin-citizen table.spiritvale-passive-infobox .spiritvale-infobox-title, | |||
body.skin-citizen table.spiritvale-passive-infobox .spiritvale-infobox-description { | |||
white-space: normal; | |||
overflow-wrap: anywhere; | |||
word-break: break-word; | |||
} | |||
} | |||
/* ============================================================ | |||
3) Skills | |||
- Single skill: fixed desktop max width | |||
- List mode: ONE wrapper panel with dividers | |||
- Top band: nested-table version ONLY | |||
========================================================== */ | |||
/* Single-skill width */ | |||
table.spiritvale-skill-infobox { | |||
width: 100%; | |||
max-width: var(--sv-skill-width); | |||
margin: 1.25em auto; | |||
table-layout: fixed; | |||
} | |||
/* List wrapper: flush, “pop” border, no background */ | |||
.sv-skill-collection { | |||
width: 100%; | |||
max-width: var(--sv-skill-width); /* keeps wrapper aligned to skill width */ | |||
margin: 0 auto !important; /* remove extra spacing around wrapper */ | |||
padding: 0 !important; | |||
border: 2px solid #372b54; | |||
border-radius: 10px; | |||
box-shadow: 0 2px 6px rgba(0,0,0,0.25); | |||
background: transparent !important; | |||
overflow: hidden; | |||
display: block !important; | |||
} | |||
/* Neutralize Citizen wrappers inside the skill collection */ | |||
.sv-skill-collection .mw-table-wrapper, | |||
.sv-skill-collection .table-overflow, | |||
.sv-skill-collection .table-scroll, | |||
.sv-skill-collection .citizen-table { | |||
border: none !important; | |||
box-shadow: none !important; | |||
background: transparent !important; | |||
padding: 0 !important; | |||
margin: 0 !important; | |||
} | |||
/* In list mode, each skill becomes a “row” inside the wrapper */ | |||
.sv-skill-collection table.spiritvale-skill-infobox { | |||
width: 100%; | |||
max-width: 100%; | |||
margin: 0 !important; | |||
border: none !important; | |||
box-shadow: none !important; | |||
border-radius: 0 !important; | |||
} | |||
/* Divider between skills */ | |||
.sv-skill-collection > * + * { | |||
border-top: 1px solid rgba(148, 163, 184, 0.25); | |||
} | |||
/* ------------------------- | |||
Skill top band (nested-table) | |||
------------------------- */ | |||
table.spiritvale-skill-infobox .sv-topband-cell { | |||
padding: 0 !important; | |||
background: linear-gradient( | |||
135deg, | |||
rgba(90, 78, 124, 0.55), | |||
rgba(55, 43, 84, 0.55) | |||
) !important; | |||
} | |||
/* Inner 2-column table must fully fill the cell */ | |||
table.spiritvale-skill-infobox .sv-topband-table { | |||
width: 100% !important; | |||
max-width: 100% !important; | |||
margin: 0 !important; | |||
border: 0 !important; | |||
border-collapse: collapse !important; | |||
border-spacing: 0 !important; | |||
table-layout: fixed; | |||
background: transparent !important; | |||
} | |||
/* Two halves of the top band */ | |||
table.spiritvale-skill-infobox .sv-topband-table > tbody > tr > td { | |||
width: 50%; | |||
padding: 0 !important; /* padding goes inside the blocks below */ | |||
vertical-align: middle; | |||
} | |||
table.spiritvale-skill-infobox .sv-topband-table > tbody > tr > td:first-child { | |||
border-right: 1px solid rgba(148, 163, 184, 0.25); | |||
} | |||
/* Left: Level Select block fills the entire half */ | |||
table.spiritvale-skill-infobox .sv-level-ui { | |||
width: 100%; | |||
margin: 0 !important; | |||
padding: 0.75em 0.9em; | |||
display: flex; | |||
flex-direction: column; | |||
gap: 0.4em; | |||
} | |||
/* (Re-using the same title/label classes is fine) */ | |||
table.spiritvale-skill-infobox .sv-level-title { | |||
font-weight: 700; | |||
text-transform: uppercase; | |||
letter-spacing: 0.05em; | |||
font-size: 0.85em; | |||
opacity: 0.95; | |||
} | |||
table.spiritvale-skill-infobox .sv-level-label { | |||
font-weight: 600; | |||
} | |||
table.spiritvale-skill-infobox .sv-level-slider input[type="range"] { | |||
width: 100%; | |||
box-sizing: border-box; | |||
} | |||
/* Right: Type table fills the entire half */ | |||
table.spiritvale-skill-infobox .sv-type-table { | |||
width: 100% !important; | |||
margin: 0 !important; | |||
padding: 0.75em 0.9em; | |||
border: 0 !important; | |||
border-collapse: collapse !important; | |||
background: transparent !important; | |||
} | |||
table.spiritvale-skill-infobox .sv-type-table th, | |||
table.spiritvale-skill-infobox .sv-type-table td { | |||
background: transparent !important; | |||
padding: 0.2em 0; | |||
text-align: left; | |||
vertical-align: top; | |||
} | |||
table.spiritvale-skill-infobox .sv-type-table th { | |||
font-weight: 700; | |||
white-space: nowrap; | |||
padding-right: 0.9em; | |||
} | |||
/* Mobile: stack Level + Type */ | |||
@media (max-width: 560px) { | |||
table.spiritvale-skill-infobox .sv-topband-table > tbody > tr > td { | |||
display: block; | |||
width: 100%; | |||
} | |||
table.spiritvale-skill-infobox .sv-topband-table > tbody > tr > td:first-child { | |||
border-right: none; | |||
border-bottom: 1px solid rgba(148, 163, 184, 0.25); | |||
} | |||
} | } | ||