MediaWiki:Common.css
MediaWiki interface page
More actions
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* CSS placed here will be applied to all skins */
/*
@media (prefers-color-scheme: dark) {
body, #mw-head {
background-color: #1f2937;
}
a, .vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a {
color: oklch(62.3% 0.214 259.815);
}
a:visited, .vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a:visited {
color: oklch(54.6% 0.245 262.881);
}
a:hover, .vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a:hover {
color: oklch(70.7% 0.165 254.624);
text-decoration: none;
}
a.new {
color: oklch(64.5% 0.246 16.439);
}
}
*/
/* Custom Additions */
.playtest-info-box {
max-width:100%; margin-bottom:10px; border:1px solid #ccc; border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,0.1); background:#f0f2f8; padding:10px; text-align:center; color:#333; word-wrap:break-word; overflow-wrap:break-word;
}
.header-container-outer {
max-width:100%; margin:1 1px; border:2px solid #372b54; border-radius:10px; box-shadow:0 2px 6px rgba(0,0,0,0.25); background:#f0f2f8;
}
.header-container-middle {
background:#f0f2f8; color:white; text-align:center; padding:1px 1px; border-radius:8px; word-wrap:break-word; overflow-wrap:break-word;
}
.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%;
}
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;
}
/* Optional: float single infoboxes on wide screens.
(Lists of many boxes will still stack nicely.) */
/*
@media (min-width: 960px) {
table.spiritvale-skill-infobox,
table.spiritvale-passive-infobox {
float: right;
margin: 0 0 1.5em 1.5em;
}
}
*/
/* 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 */
table.spiritvale-skill-infobox tbody tr th:not(.spiritvale-infobox-section-header),
table.spiritvale-passive-infobox tbody tr 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-safe hero row (stacks)
========================================================== */
:root {
/* One knob: desktop tooltip width for ALL passives */
--sv-passive-width: 360px;
}
/* Fixed tooltip footprint on desktop, still safe if container is narrower */
table.spiritvale-passive-infobox {
width: var(--sv-passive-width);
max-width: 100%;
margin: 1em auto;
/* Reset any earlier experiments */
display: table;
table-layout: fixed;
}
/* Center + wrap all NON-hero rows (hero row stays as your “perfect” styling) */
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 labels to wrap too (generic CSS makes labels 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 width rules from pushing layout weirdly */
table.spiritvale-passive-infobox .spiritvale-infobox-description {
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}
/* Make auto-lists stack nicely */
.spiritvale-passive-list {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.25em;
}
/* Remove “mystery wrapper 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: go full width AND stack the hero row so nothing goes off-screen */
@media (max-width: 480px) {
table.spiritvale-passive-infobox {
width: 100%;
max-width: 100%;
}
/* Stack icon+name over description */
table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th,
table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td {
display: block;
width: 100%;
box-sizing: border-box;
text-align: center;
}
/* Slightly smaller icon on phones */
table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th .image img {
width: 64px !important;
height: auto !important;
}
/* Ensure title wraps cleanly */
table.spiritvale-passive-infobox .spiritvale-infobox-title {
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}
}