MediaWiki:Common.css: Difference between revisions
MediaWiki interface page
More actions
temporarily removed dark mode colors |
No edit summary |
||
| (18 intermediate revisions by 2 users not shown) | |||
| Line 41: | Line 41: | ||
.header-container-inner { | .header-container-inner { | ||
background:linear-gradient(180deg,#5a4e7c,#372b54); color:white; text-align:center; padding:1px 1px; border-radius:8px; word-wrap:break-word; overflow-wrap:break-word;font-size:300%; | background:linear-gradient(180deg,#5a4e7c,#372b54); color:white; text-align:center; padding:1px 1px; border-radius:8px; word-wrap:break-word; overflow-wrap:break-word;font-size:300%; | ||
} | |||
table.custom-table { | |||
float:none; border:2px solid #372b54; border-radius:10px; padding:2px; box-shadow:0 2px 6px rgba(0,0,0,0.25); margin:1em auto; text-align:center; border-collapse:separate; border-spacing:0; overflow:hidden; -webkit-user-select:text; user-select:text; | |||
} | |||
table.custom-table > tbody > tr:nth-child(1) > th { | |||
background:linear-gradient(180deg,#7a6fb0,#5a4e7c); color:white; text-align:center; padding:6px; font-size:120%; border-top-left-radius:8px; border-top-right-radius:8px; word-wrap:break-word; overflow-wrap:break-word; | |||
} | |||
table.custom-table > tbody > tr:nth-child(2) > th { | |||
text-align:center; padding:4px; border-bottom:1px solid #555; | |||
} | |||
table.custom-table > tbody > tr > td { | |||
text-align:center; padding:4px; border-bottom:1px solid #555; | |||
} | |||
table.custom-table > tbody > tr.middle-header > th { | |||
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: generic infobox styling (skills, passives, etc.) | |||
========================================================== */ | |||
table.spiritvale-skill-infobox, | |||
table.spiritvale-passive-infobox { | |||
/* Layout */ | |||
border-collapse: separate; | |||
border-spacing: 0; | |||
width: 100%; | |||
max-width: 620px; | |||
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; | |||
} | |||
/* Top "hero" row: icon+name on left, description on 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; | |||
} | |||
/* Make the icon sit nicely next to the title */ | |||
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; | |||
} | |||
/* Body rows (labels + values) */ | |||
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; | |||
} | |||
/* Default label cells (exclude hero row so names never clip) */ | |||
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; | |||
} | |||
/* Default value cells */ | |||
table.spiritvale-skill-infobox tbody tr td, | |||
table.spiritvale-passive-infobox tbody tr td { | |||
padding: 0.45em 0.85em; | |||
text-align: left; | |||
} | |||
/* Zebra striping for readability */ | |||
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 inside infobox (e.g. "General", "Type", "Mechanics") */ | |||
.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; | |||
} | |||
/* Left side: icon + name */ | |||
.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; | |||
} | |||
/* Right side: big italic description */ | |||
.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; | |||
} | |||
/* ============================================================ | |||
SpiritVale: Passives (single source of truth) | |||
- Fixed, consistent desktop width | |||
- Centered body cells | |||
- Mobile hero stays side-by-side (no stacking) | |||
========================================================== */ | |||
/* Desktop tooltip width knob */ | |||
:root { --sv-passive-width: 540px; } | |||
/* Consistent tooltip footprint for ALL passives (desktop) */ | |||
table.spiritvale-passive-infobox { | |||
width: var(--sv-passive-width); | |||
max-width: var(--sv-passive-width); /* <-- important: makes desktop actually widen */ | |||
margin: 1em auto; | |||
table-layout: fixed; | |||
} | |||
/* Keep hero row healthy: allow wrapping in the hero title area */ | |||
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; | |||
} | |||
/* Allow label column to wrap (generic CSS defaults it to nowrap) */ | |||
table.spiritvale-passive-infobox tbody tr:not(.spiritvale-infobox-main) | |||
th:not(.spiritvale-infobox-section-header) { | |||
white-space: normal; | |||
} | |||
/* Center section headers for passives */ | |||
table.spiritvale-passive-infobox .spiritvale-infobox-section-header { | |||
text-align: center; | |||
} | |||
/* Prevent description max-width from pushing weird layout at small widths */ | |||
table.spiritvale-passive-infobox .spiritvale-infobox-description { | |||
max-width: 100%; | |||
overflow-wrap: anywhere; | |||
word-break: break-word; | |||
} | |||
/* Passive list layout */ | |||
.spiritvale-passive-list { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
gap: 1.25em; | |||
} | |||
/* Citizen/table wrappers: remove the “mystery outline” around some passives 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 / small tablets (Citizen): keep 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; | |||
} | |||
} | } | ||