MediaWiki:Common.css: Difference between revisions

Latest revision as of 08:29, 28 April 2026

/* Soulscribe wiki branding — auto-generated, do not edit manually */

/* ── Variables ─────────────────────────────────────────────────────── */
:root {
  --wb-primary:     #F4862A;
  --wb-accent:      #2D7D32;
  --wb-primary-dim: color-mix(in srgb, #F4862A 15%, transparent);
  --wb-accent-dim:  color-mix(in srgb, #2D7D32 15%, transparent);
  --wb-text:        #1a1a1a;
  --wb-muted:       #555;
  --wb-border:      #ddd;
  --wb-radius:      6px;
}

/* ── Base typography ────────────────────────────────────────────────── */
body { color: var(--wb-text); font-family: Georgia, 'Times New Roman', serif; }
#content { font-size: 1rem; line-height: 1.7; }
h1, h2 { color: var(--wb-primary); border-bottom: 2px solid var(--wb-primary); padding-bottom: 0.2em; }
h3 { color: var(--wb-primary); }
h4, h5, h6 { color: var(--wb-muted); }
a { color: var(--wb-accent); }
a:hover { color: var(--wb-primary); text-decoration: underline; }
#firstHeading { color: var(--wb-primary); font-size: 1.9em; letter-spacing: 0.01em; }

/* ── Navigation bar accent ──────────────────────────────────────────── */
#mw-navigation, #p-logo { border-color: var(--wb-primary); }
#p-navigation .portal-first { border-top: 3px solid var(--wb-primary); }

/* ── Sidebar / main menu (Vector 2022) ──────────────────────────────── */
/* Background of the sidebar panel */
#mw-panel,
#vector-main-menu-unpinned-container,
#vector-main-menu-pinned-container,
.vector-main-menu {
  background: color-mix(in srgb, var(--wb-primary) 6%, #fff);
}
/* Section headings ("Navigation", "Explore", etc.) */
.vector-menu-heading,
.mw-portlet .vector-menu-heading {
  color: var(--wb-primary) !important;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.72em;
  letter-spacing: 0.07em;
  border-bottom: 1px solid color-mix(in srgb, var(--wb-primary) 30%, transparent);
  padding-bottom: 0.25em;
  margin-bottom: 0.2em;
}
/* Nav links */
.vector-menu-content-list li a,
.mw-portlet-navigation a,
.mw-portlet-explore a,
.mw-portlet-tb a {
  color: var(--wb-text) !important;
  font-size: 0.88em;
  font-family: Georgia, serif;
}
.vector-menu-content-list li a:hover,
.mw-portlet-navigation a:hover,
.mw-portlet-explore a:hover {
  color: var(--wb-accent) !important;
  text-decoration: none;
}
/* Active/current page link */
.vector-menu-content-list .selected a {
  color: var(--wb-primary) !important;
  font-weight: bold;
}
/* TOC sidebar links */
.vector-toc-link { color: var(--wb-text) !important; font-size: 0.88em; }
.vector-toc-link:hover { color: var(--wb-accent) !important; }
.vector-toc-numb { color: var(--wb-muted) !important; }
/* Top header bar */
.vector-header {
  border-bottom: 2px solid var(--wb-primary);
  background: color-mix(in srgb, var(--wb-primary) 4%, #fff);
}
/* Search bar */
.cdx-search-input__input:focus { border-color: var(--wb-primary) !important; box-shadow: 0 0 0 2px var(--wb-primary-dim) !important; }
/* Hamburger / menu button accent */
.vector-main-menu-action-toggle .mw-icon { color: var(--wb-primary); }

/* ── Infobox base ───────────────────────────────────────────────────── */
.infobox {
  float: right;
  clear: right;
  margin: 0 0 1.2em 1.8em;
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius);
  overflow: hidden;
  font-size: 0.88em;
  width: 300px;
  min-width: 260px;
  max-width: 340px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  background: #fff;
}
/* On narrow screens, infobox goes full-width above content */
@media (max-width: 720px) {
  .infobox {
    float: none;
    clear: both;
    width: 100%;
    max-width: 100%;
    margin: 0 0 1.2em 0;
    box-sizing: border-box;
  }
}

/* Infobox title row */
.infobox tr.infobox-title th,
.infobox tr:first-child th[colspan] {
  padding: 0.6em 0.8em;
  font-size: 1.05em;
  text-align: center;
  background: var(--wb-primary);
  color: #fff !important;
  font-style: normal;
  letter-spacing: 0.02em;
}

/* Infobox data rows */
.infobox td {
  padding: 0.35em 0.7em;
  border-top: 1px solid var(--wb-border);
  vertical-align: top;
}
.infobox tr:nth-child(even) td { background: var(--wb-primary-dim); }

/* ── Entity-type infobox header accent colours ──────────────────────── */
.character-infobox     tr.infobox-title th,
.character-infobox     tr:first-child th[colspan] { background: var(--wb-primary); }
.location-infobox      tr.infobox-title th,
.location-infobox      tr:first-child th[colspan] { background: #2c6e49; }
.episode-infobox       tr.infobox-title th,
.episode-infobox       tr:first-child th[colspan] { background: #1d3557; }
.item-infobox          tr.infobox-title th,
.item-infobox          tr:first-child th[colspan] { background: #6d4c41; }
.plot-thread-infobox   tr.infobox-title th,
.plot-thread-infobox   tr:first-child th[colspan] { background: #6a1e55; }
.running-element-infobox tr.infobox-title th,
.running-element-infobox tr:first-child th[colspan] { background: #37474f; }

/* ── Definition lists (Goals, Fears, Starting state…) ──────────────── */
dl { margin: 0.4em 0 0.8em 0; }
dt {
  font-weight: bold;
  color: var(--wb-primary);
  margin-top: 0.5em;
  padding-left: 0;
}
dd {
  margin-left: 1.4em;
  color: var(--wb-text);
  border-left: 3px solid var(--wb-accent-dim);
  padding-left: 0.6em;
}

/* ── Quote template (.wb-quote) ─────────────────────────────────────── */
.wb-quote {
  border-left: 4px solid var(--wb-accent);
  margin: 0.8em 0 0.8em 1em;
  padding: 0.5em 0.9em;
  background: var(--wb-accent-dim);
  border-radius: 0 var(--wb-radius) var(--wb-radius) 0;
  font-style: italic;
  color: var(--wb-text);
}
.wb-quote-attr {
  display: block;
  margin-top: 0.3em;
  font-size: 0.85em;
  font-style: normal;
  color: var(--wb-muted);
}

/* ── StatusBadge template (.wb-badge-*) ─────────────────────────────── */
.wb-badge {
  display: inline-block;
  padding: 0.15em 0.55em;
  border-radius: 999px;
  font-size: 0.8em;
  font-weight: bold;
  letter-spacing: 0.03em;
  vertical-align: middle;
}
.wb-badge-alive       { background: #d4edda; color: #155724; }
.wb-badge-deceased    { background: #f8d7da; color: #721c24; }
.wb-badge-missing     { background: #fff3cd; color: #856404; }
.wb-badge-unknown     { background: #e2e3e5; color: #383d41; }
.wb-badge-captured    { background: #fde8c8; color: #7d4e00; }
.wb-badge-active      { background: #d4edda; color: #155724; }
.wb-badge-resolved    { background: #d1ecf1; color: #0c5460; }
.wb-badge-ongoing     { background: #fff3cd; color: #856404; }
.wb-badge-abandoned   { background: #e2e3e5; color: #383d41; }
.wb-badge-default     { background: #e2e3e5; color: #383d41; }

/* ── Spoiler box (.spoiler-warning) ─────────────────────────────────── */
.spoiler-warning {
  border: 1px solid #f5c842;
  background: #fffde7;
  border-radius: var(--wb-radius);
  padding: 0.5em 0.9em;
  margin: 0.8em 0;
  font-size: 0.9em;
}
.spoiler-block.spoiler-warning {
  border-left: 4px solid #f5c842;
}

/* ── Vertical evolution timeline (.wb-timeline) ─────────────────────── */
.wb-timeline { list-style: none; margin: 0.5em 0 0.5em 0.5em; padding: 0; }
.wb-timeline li {
  position: relative;
  padding: 0.3em 0 0.3em 1.4em;
  border-left: 2px solid var(--wb-accent);
  margin-bottom: 0.1em;
}
.wb-timeline li::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wb-accent);
}
.wb-timeline li:last-child { border-left-color: transparent; }

/* ── Category page grid ─────────────────────────────────────────────── */
.mw-category-group { margin-bottom: 1em; }
.mw-category ul { column-count: 2; column-gap: 2em; list-style: disc; }
@media (max-width: 600px) { .mw-category ul { column-count: 1; } }

/* ── Relationship table (.wb-relationship-table) ────────────────────── */
.wb-relationship-table { width: 100%; margin: 0.5em 0 1em 0; border-collapse: collapse; }
.wb-relationship-table th {
  background: var(--wb-primary);
  color: #fff;
  padding: 0.4em 0.7em;
  text-align: left;
  font-size: 0.9em;
}
.wb-relationship-table td {
  padding: 0.35em 0.7em;
  vertical-align: top;
  border-top: 1px solid var(--wb-border);
  font-size: 0.9em;
}
.wb-relationship-table tr:nth-child(even) td { background: var(--wb-primary-dim); }
.wb-relationship-table td:first-child { white-space: nowrap; font-weight: bold; }
.wb-relationship-table td:nth-child(2) { white-space: nowrap; }

/* ── Relationship section ───────────────────────────────────────────── */
#content h3 .mw-headline { font-size: 0.95em; font-weight: bold; }

/* ── Relationship filter input ──────────────────────────────────────── */
.wb-rel-filter-wrap { margin: 0.5em 0 0.4em 0; }
.wb-rel-filter {
  width: 280px;
  max-width: 100%;
  padding: 0.35em 0.7em;
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius);
  font-size: 0.88em;
  font-family: Georgia, serif;
  color: var(--wb-text);
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
}
.wb-rel-filter:focus { border-color: var(--wb-primary); box-shadow: 0 0 0 2px var(--wb-primary-dim); }