MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary Tag: Reverted |
||
| Line 265: | Line 265: | ||
padding: 0.5em 1em; | padding: 0.5em 1em; | ||
border-left: 3px solid var(--border-color-subtle, #aaa); | border-left: 3px solid var(--border-color-subtle, #aaa); | ||
background: var(--background-color-interactive-subtle, # | background: var(--background-color-interactive-subtle, #b7b5e8); | ||
} | } | ||
Revision as of 16:28, 29 May 2026
/* ═══════════════════════════════════════════════════════
BOINC Synergy — sitewide styles
MediaWiki:Common.css
═══════════════════════════════════════════════════════ */
/* ── FONT ───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');
body, .mw-body, .mw-body-content {
font-family: 'Inter', sans-serif;
}
/* ── CSS VARIABLES — light mode ─────────────────────── */
:root {
/* purple ramp */
--bs-purple-50: #EEEDFE;
--bs-purple-200: #AFA9EC;
--bs-purple-400: #534AB7;
--bs-purple-800: #3C3489;
--bs-purple-900: #26215C;
/* teal ramp */
--bs-teal-50: #E1F5EE;
--bs-teal-200: #5DCAA5;
--bs-teal-400: #1D9E75;
--bs-teal-800: #085041;
/* coral ramp */
--bs-coral-50: #FAECE7;
--bs-coral-200: #F0997B;
--bs-coral-400: #D85A30;
--bs-coral-800: #4A1B0C;
/* blue ramp */
--bs-blue-50: #E6F1FB;
--bs-blue-200: #85B7EB;
--bs-blue-400: #378ADD;
--bs-blue-800: #042C53;
/* green ramp */
--bs-green-50: #EAF3DE;
--bs-green-200: #C0DD97;
--bs-green-800: #173404;
/* amber ramp */
--bs-amber-50: #FAEEDA;
--bs-amber-200: #FAC775;
--bs-amber-800: #412402;
/* pink ramp */
--bs-pink-50: #FBEAF0;
--bs-pink-200: #F4C0D1;
--bs-pink-800: #4B1528;
/* gray ramp */
--bs-gray-50: #F1EFE8;
--bs-gray-200: #D3D1C7;
--bs-gray-400: #888780;
--bs-gray-800: #2C2C2A;
--bs-gray-850: #444441;
/* semantic */
--bs-page-bg: #ffffff;
--bs-text-primary: #1a1a1a;
--bs-text-muted: #555555;
/* link colours — light mode */
--bs-link: #4840A3; /* purple-400, darkened */
--bs-link-hover: #302A74; /* purple-800, darkened */
--bs-link-visited: #6B63C8; /* mid-purple, darkened */
}
/* ── CSS VARIABLES — dark mode ──────────────────────── */
@media (prefers-color-scheme: dark) {
:root {
--bs-purple-50: #1e1a3a;
--bs-purple-200: #534AB7;
--bs-purple-400: #AFA9EC;
--bs-purple-800: #CECBF6;
--bs-purple-900: #EEEDFE;
--bs-teal-50: #0a2a1f;
--bs-teal-200: #0F6E56;
--bs-teal-400: #5DCAA5;
--bs-teal-800: #9FE1CB;
--bs-coral-50: #2a100a;
--bs-coral-200: #993C1D;
--bs-coral-400: #F0997B;
--bs-coral-800: #F5C4B3;
--bs-blue-50: #091824;
--bs-blue-200: #185FA5;
--bs-blue-400: #85B7EB;
--bs-blue-800: #B5D4F4;
--bs-green-50: #111f08;
--bs-green-200: #3B6D11;
--bs-green-800: #C0DD97;
--bs-amber-50: #1f1608;
--bs-amber-200: #854F0B;
--bs-amber-800: #FAC775;
--bs-pink-50: #200d14;
--bs-pink-200: #72243E;
--bs-pink-800: #F4C0D1;
--bs-gray-50: #1a1a18;
--bs-gray-200: #444441;
--bs-gray-400: #888780;
--bs-gray-800: #D3D1C7;
--bs-gray-850: #B4B2A9;
--bs-page-bg: #121212;
--bs-text-primary: #e8e8e8;
--bs-text-muted: #aaaaaa;
/* link colours — dark mode */
--bs-link: #AFA9EC; /* purple-200: soft lilac, readable on dark */
--bs-link-hover: #CECBF6; /* purple-800 (dark-mode): lighter on hover */
--bs-link-visited: #7F77DD; /* mid-purple, distinct from unvisited */
}
}
/* ── LINKS ──────────────────────────────────────────── */
/* Scope to .mw-body-content so MediaWiki nav chrome is unaffected */
.mw-body-content a,
.mw-body-content a:link {
color: var(--bs-link);
text-decoration: none;
}
.mw-body-content a:visited {
color: var(--bs-link-visited);
}
.mw-body-content a:hover,
.mw-body-content a:focus {
color: var(--bs-link-hover);
text-decoration: underline;
text-underline-offset: 2px;
}
/* ── INFOBOX — suppress phantom leading paragraphs ── */
/* MediaWiki generates <p><br></p> nodes from template newlines */
#mw-content-text > .mw-parser-output > p:empty,
#mw-content-text > .mw-parser-output > p:has(> br:only-child) {
display: none;
margin: 0;
padding: 0;
}
/* hide leading breaks generated by template newlines */
#mw-content-text > .mw-parser-output > br:first-child,
#mw-content-text > .mw-parser-output > p:first-child > br:only-child {
display: none;
}
/* ══════════════════════════════════════════════════════
HERO BANNER
══════════════════════════════════════════════════════ */
.bs-hero {
border: 0.5px solid var(--bs-purple-200);
border-radius: 12px;
background: linear-gradient(135deg, var(--bs-purple-50) 0%, var(--bs-teal-50) 100%);
padding: 2rem 2rem 1.5rem;
margin-bottom: 1.5rem;
text-align: center;
}
.bs-hero-title {
font-size: 2rem;
font-weight: 500;
color: var(--bs-purple-800);
letter-spacing: -0.5px;
margin: 0.75rem 0 0.25rem;
}
.bs-hero-subtitle {
font-size: 1.05rem;
color: var(--bs-purple-400);
margin-bottom: 1rem;
}
.bs-hero-btn {
display: inline-block;
border: 2px solid var(--bs-purple-400);
border-radius: 8px;
padding: 0.6rem 1.6rem;
font-size: 1.1rem;
font-weight: 500;
margin-bottom: 0.5rem;
background: var(--bs-purple-50);
}
.bs-hero-note {
font-size: 0.85rem;
color: var(--bs-purple-400);
margin-top: 0.5rem;
}
/* ══════════════════════════════════════════════════════
STATS RIBBON
══════════════════════════════════════════════════════ */
.bs-stats {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 1.5rem;
justify-content: center;
}
.bs-stat {
flex: 1;
min-width: 140px;
border-radius: 8px;
padding: 0.75rem 1rem;
text-align: center;
border: 0.5px solid;
}
.bs-stat-number {
font-size: 1.6rem;
font-weight: 500;
}
.bs-stat-label {
font-size: 0.8rem;
}
.bs-stat-purple {
background: var(--bs-purple-50);
border-color: var(--bs-purple-200);
}
.bs-stat-purple .bs-stat-number { color: var(--bs-purple-800); }
.bs-stat-purple .bs-stat-label { color: var(--bs-purple-400); }
.bs-stat-teal {
background: var(--bs-teal-50);
border-color: var(--bs-teal-200);
}
.bs-stat-teal .bs-stat-number { color: var(--bs-teal-800); }
.bs-stat-teal .bs-stat-label { color: var(--bs-teal-400); }
.bs-stat-coral {
background: var(--bs-coral-50);
border-color: var(--bs-coral-200);
}
.bs-stat-coral .bs-stat-number { color: var(--bs-coral-800); }
.bs-stat-coral .bs-stat-label { color: var(--bs-coral-400); }
.bs-stat-blue {
background: var(--bs-blue-50);
border-color: var(--bs-blue-200);
}
.bs-stat-blue .bs-stat-number { color: var(--bs-blue-800); }
.bs-stat-blue .bs-stat-label { color: var(--bs-blue-400); }
/* ══════════════════════════════════════════════════════
Quote CALLOUT
══════════════════════════════════════════════════════ */
.bs-quote {
margin: 1em 2em;
padding: 0.5em 1em;
border-left: 3px solid var(--border-color-subtle, #aaa);
background: var(--background-color-interactive-subtle, #b7b5e8);
}
.bs-quote-source {
text-align: right;
margin-top: 0.5em;
opacity: 0.85;
}
/* ══════════════════════════════════════════════════════
DEFINITION CALLOUT
══════════════════════════════════════════════════════ */
.bs-definition {
border-left: 3px solid var(--bs-purple-400);
padding: 0.75rem 1.25rem;
margin-bottom: 1.5rem;
background: var(--bs-purple-50);
border-radius: 0 8px 8px 0;
color: var(--bs-purple-800);
}
.bs-definition-label {
font-size: 0.85rem;
color: var(--bs-purple-400);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08em;
display: block;
margin-bottom: 0.5rem;
}
/* ══════════════════════════════════════════════════════
CTA BOX
══════════════════════════════════════════════════════ */
.bs-cta {
border: 1.5px solid var(--bs-purple-400);
border-radius: 10px;
padding: 1rem 1.5rem;
margin-bottom: 2rem;
background: var(--bs-page-bg);
}
.bs-cta-title {
font-size: 1rem;
font-weight: 500;
color: var(--bs-purple-800);
margin-bottom: 0.4rem;
}
.bs-cta-body {
font-size: 0.9rem;
color: var(--bs-text-muted);
margin-bottom: 0.75rem;
}
/* ══════════════════════════════════════════════════════
COLLAPSIBLE PROJECT GROUPS
══════════════════════════════════════════════════════ */
.bs-group {
border-radius: 8px;
padding: 1rem 1.25rem;
margin-bottom: 1rem;
border: 0.5px solid;
}
.bs-group-toggle {
font-weight: 500;
font-size: 1rem;
}
/* colour variants — color set on the group itself covers all untagged child text */
.bs-group-teal { background: var(--bs-teal-50); border-color: var(--bs-teal-200); color: var(--bs-teal-800); }
.bs-group-teal .bs-group-toggle { color: var(--bs-teal-800); }
.bs-group-purple { background: var(--bs-purple-50); border-color: var(--bs-purple-200); color: var(--bs-purple-800); }
.bs-group-purple .bs-group-toggle { color: var(--bs-purple-800); }
.bs-group-blue { background: var(--bs-blue-50); border-color: var(--bs-blue-200); color: var(--bs-blue-800); }
.bs-group-blue .bs-group-toggle { color: var(--bs-blue-800); }
.bs-group-green { background: var(--bs-green-50); border-color: var(--bs-green-200); color: var(--bs-green-800); }
.bs-group-green .bs-group-toggle { color: var(--bs-green-800); }
.bs-group-amber { background: var(--bs-amber-50); border-color: var(--bs-amber-200); color: var(--bs-amber-800); }
.bs-group-amber .bs-group-toggle { color: var(--bs-amber-800); }
.bs-group-coral { background: var(--bs-coral-50); border-color: var(--bs-coral-200); color: var(--bs-coral-800); }
.bs-group-coral .bs-group-toggle { color: var(--bs-coral-800); }
.bs-group-gray { background: var(--bs-gray-50); border-color: var(--bs-gray-200); color: var(--bs-gray-800); }
.bs-group-gray .bs-group-toggle { color: var(--bs-gray-800); }
.bs-group-pink { background: var(--bs-pink-50); border-color: var(--bs-pink-200); color: var(--bs-pink-800); }
.bs-group-pink .bs-group-toggle { color: var(--bs-pink-800); }
/* links inside groups — use the group's own ramp so they're readable on coloured backgrounds */
.bs-group-teal .mw-body-content a,
.bs-group-teal .mw-body-content a:link { color: var(--bs-teal-800); }
.bs-group-teal .mw-body-content a:visited { color: var(--bs-teal-400); }
.bs-group-teal .mw-body-content a:hover { color: var(--bs-teal-800); text-decoration: underline; }
.bs-group-purple .mw-body-content a,
.bs-group-purple .mw-body-content a:link { color: var(--bs-purple-800); }
.bs-group-purple .mw-body-content a:visited { color: var(--bs-purple-400); }
.bs-group-purple .mw-body-content a:hover { color: var(--bs-purple-800); text-decoration: underline; }
.bs-group-blue .mw-body-content a,
.bs-group-blue .mw-body-content a:link { color: var(--bs-blue-800); }
.bs-group-blue .mw-body-content a:visited { color: var(--bs-blue-400); }
.bs-group-blue .mw-body-content a:hover { color: var(--bs-blue-800); text-decoration: underline; }
.bs-group-green .mw-body-content a,
.bs-group-green .mw-body-content a:link { color: var(--bs-green-800); }
.bs-group-green .mw-body-content a:visited { color: var(--bs-green-200); }
.bs-group-green .mw-body-content a:hover { color: var(--bs-green-800); text-decoration: underline; }
.bs-group-amber .mw-body-content a,
.bs-group-amber .mw-body-content a:link { color: var(--bs-amber-800); }
.bs-group-amber .mw-body-content a:visited { color: var(--bs-amber-200); }
.bs-group-amber .mw-body-content a:hover { color: var(--bs-amber-800); text-decoration: underline; }
.bs-group-coral .mw-body-content a,
.bs-group-coral .mw-body-content a:link { color: var(--bs-coral-800); }
.bs-group-coral .mw-body-content a:visited { color: var(--bs-coral-400); }
.bs-group-coral .mw-body-content a:hover { color: var(--bs-coral-800); text-decoration: underline; }
.bs-group-gray .mw-body-content a,
.bs-group-gray .mw-body-content a:link { color: var(--bs-gray-800); }
.bs-group-gray .mw-body-content a:visited { color: var(--bs-gray-400); }
.bs-group-gray .mw-body-content a:hover { color: var(--bs-gray-800); text-decoration: underline; }
.bs-group-pink .mw-body-content a,
.bs-group-pink .mw-body-content a:link { color: var(--bs-pink-800); }
.bs-group-pink .mw-body-content a:visited { color: var(--bs-pink-200); }
.bs-group-pink .mw-body-content a:hover { color: var(--bs-pink-800); text-decoration: underline; }
/* project list table inside groups */
.bs-project-table {
width: 100%;
margin-top: 0.75rem;
border: none;
background: transparent;
}
.bs-project-table td {
width: 50%;
vertical-align: top;
padding: 0.2rem 0.5rem 0.2rem 0;
border: none;
background: transparent;
}
.bs-group-note {
font-size: 0.85rem;
margin: 0.5rem 0;
}
.bs-group-teal .bs-group-note { color: var(--bs-teal-800); }
.bs-group-purple .bs-group-note { color: var(--bs-purple-800); }
.bs-group-amber .bs-group-note { color: var(--bs-amber-800); }
.bs-group-gray .bs-group-note { color: var(--bs-gray-850); }
.bs-group-pink .bs-group-note { color: var(--bs-pink-800); }
.bs-group-footer {
font-size: 0.8rem;
margin-top: 0.75rem;
}
.bs-group-amber .bs-group-footer { color: var(--bs-amber-400); }
.bs-group-gray .bs-group-footer { color: var(--bs-gray-400); }
/* ══════════════════════════════════════════════════════
HOW TO PARTICIPATE CARDS
══════════════════════════════════════════════════════ */
.bs-steps {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin: 0.75rem 0 1.5rem;
}
.bs-step {
flex: 1;
min-width: 180px;
border-radius: 8px;
padding: 0.9rem 1rem;
border: 0.5px solid;
}
.bs-step-title {
font-weight: 500;
margin-bottom: 0.4rem;
}
.bs-step-body {
font-size: 0.85rem;
}
.bs-step-purple {
background: var(--bs-purple-50);
border-color: var(--bs-purple-200);
}
.bs-step-purple .bs-step-title { color: var(--bs-purple-800); }
.bs-step-purple .bs-step-body { color: var(--bs-purple-400); }
.bs-step-teal {
background: var(--bs-teal-50);
border-color: var(--bs-teal-200);
}
.bs-step-teal .bs-step-title { color: var(--bs-teal-800); }
.bs-step-teal .bs-step-body { color: var(--bs-teal-400); }
.bs-step-blue {
background: var(--bs-blue-50);
border-color: var(--bs-blue-200);
}
.bs-step-blue .bs-step-title { color: var(--bs-blue-800); }
.bs-step-blue .bs-step-body { color: var(--bs-blue-400); }
/* ══════════════════════════════════════════════════════
FOOTER BAR
══════════════════════════════════════════════════════ */
.bs-footer-bar {
border-top: 0.5px solid var(--bs-gray-200);
margin-top: 1.5rem;
padding-top: 0.75rem;
font-size: 0.8rem;
color: var(--bs-gray-400);
text-align: center;
}
/* ══════════════════════════════════════════════════════
INFOBOX — light mode base
══════════════════════════════════════════════════════ */
table.bs-infobox {
background: #ffffff;
color: #202122;
border: 1px solid #c8ccd1;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
table.bs-infobox th,
table.bs-infobox td {
background: #ffffff;
color: #202122;
padding: 4px 8px;
border: none;
}
.bs-infobox-title {
background: #2c3e50 !important;
color: #ffffff !important;
padding: 12px !important;
font-size: 20px !important;
text-align: center !important;
font-weight: 700 !important;
}
.bs-infobox-section {
background: #eaecf0 !important;
color: #202122 !important;
padding: 6px !important;
text-align: center !important;
font-size: 11px !important;
text-transform: uppercase !important;
}
.bs-infobox-logo,
.bs-infobox-screenshot {
text-align: center;
padding: 12px;
background: #f8f9fa !important;
color: #202122 !important;
}
.bs-infobox-caption {
font-size: 11px;
color: #54595d;
margin-top: 6px;
}
/* active status — green */
tr.bs-infobox-active th,
tr.bs-infobox-active td,
th.bs-infobox-active,
td.bs-infobox-active {
background: #d4edda !important;
color: #155724 !important;
}
/* inactive/other status — red */
tr.bs-infobox-inactive th,
tr.bs-infobox-inactive td,
th.bs-infobox-inactive,
td.bs-infobox-inactive {
background: #f8d7da !important;
color: #721c24 !important;
}
/* completed / discontinued dates */
td.bs-infobox-ended {
color: #b32424 !important;
font-weight: 600 !important;
}
/* stats as of — purple tint */
th.bs-infobox-statsdate,
td.bs-infobox-statsdate {
background: #e8d5f5 !important;
color: #4a235a !important;
}
/* ══════════════════════════════════════════════════════
DARK MODE — ARTICLE PAGES & VECTOR LEGACY CHROME
Applies when the OS/browser is set to dark mode.
Targets skin-vector (legacy 2010) selectors.
══════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
/* ── Page shell ─────────────────────────────────── */
html,
body {
background-color: #1a1a18;
color: var(--bs-text-primary);
color-scheme: dark;
}
/* ── Article content area ───────────────────────── */
#content,
.mw-body,
.mw-body-content {
background-color: #121212;
border-color: #333331;
}
/* ensure core text elements get the light colour in dark mode */
.mw-body-content p,
.mw-body-content li,
.mw-body-content dt,
.mw-body-content dd {
color: var(--bs-text-primary);
}
/* headings */
#content h1, #content h2, #content h3,
#content h4, #content h5, #content h6 {
color: var(--bs-purple-900);
border-bottom-color: #333331;
}
/* article title */
#firstHeading {
color: var(--bs-purple-900);
border-bottom-color: #333331;
}
/* horizontal rules, table borders */
#content hr { border-color: #333331; }
/* standard wikitables */
#content table.wikitable,
#content table.wikitable > * > tr > th,
#content table.wikitable > * > tr > td {
background-color: #1e1e1c;
color: var(--bs-text-primary);
border-color: #3a3a38;
}
#content table.wikitable > * > tr > th {
background-color: #2a2a28;
color: var(--bs-gray-800);
}
/* infoboxes and floated tables */
#content table {
color: var(--bs-text-primary);
}
/* code / pre blocks */
#content pre,
#content code {
background-color: #1e1e1c;
color: #c8c4e8;
border-color: #333331;
}
/* blockquotes */
#content blockquote {
border-left-color: var(--bs-purple-200);
color: var(--bs-text-muted);
}
/* ── Tabs (article / talk / edit / history) ─────── */
#p-cactions,
div#mw-head {
background-color: #1a1a18;
}
/* inactive tabs — both namespaces (article/talk) and actions (edit/history/more) */
#p-cactions li a,
#p-namespaces li a,
#ca-nstab-main a,
#ca-talk a,
#ca-edit a,
#ca-ve-edit a,
#ca-viewsource a,
#ca-history a,
#ca-watch a,
li.collapsible a,
#mw-head .vectorTabs li a,
#mw-head .vectorMenu li a {
background-color: #252523 !important;
color: #b0aeA6 !important;
border-color: #333331 !important;
}
/* active / selected tab */
#p-cactions li.selected a,
#p-namespaces li.selected a,
#mw-head .vectorTabs li.selected a {
background-color: #121212 !important;
color: var(--bs-purple-900) !important;
border-bottom-color: #121212 !important;
}
/* tab hover */
#p-cactions li a:hover,
#p-namespaces li a:hover,
#mw-head .vectorTabs li a:hover,
#mw-head .vectorMenu li a:hover {
background-color: #2e2e2c !important;
color: var(--bs-purple-400) !important;
}
/* tab background strip */
#mw-head-base,
div#mw-head-base {
background-color: #252523;
border-bottom: 1px solid #333331;
}
/* ── Image frames & captions ────────────────────── */
/* Dark mode for image frames is deferred — caption text darkened via base styles instead */
/* ── Watchlist star ─────────────────────────────── */
#ca-watch a,
#ca-unwatch a,
li#ca-watch,
li#ca-unwatch {
background-color: #252523 !important;
border-color: #333331 !important;
}
#ca-watch img,
#ca-unwatch img,
#ca-watch span,
#ca-unwatch span {
background-color: transparent !important;
}
#mw-panel,
div#mw-panel {
background-color: #1a1a18;
}
/* sidebar portlet headings (Navigation, Tools, etc.) */
#mw-panel .portal h3 {
color: var(--bs-gray-400);
border-bottom: 1px solid #2e2e2c;
}
/* sidebar links */
#mw-panel .portal a {
color: var(--bs-link);
}
#mw-panel .portal a:visited {
color: var(--bs-link-visited);
}
#mw-panel .portal a:hover {
color: var(--bs-link-hover);
text-decoration: underline;
}
/* ── Top toolbar / search bar ───────────────────── */
#mw-head {
background-color: #1a1a18;
border-bottom: 1px solid #2e2e2c;
}
/* search input */
#searchInput,
#searchform input[type="search"],
#searchform input[type="text"] {
background-color: #252523;
color: var(--bs-text-primary);
border-color: #3a3a38;
}
#searchInput::placeholder {
color: var(--bs-text-muted);
}
/* search button */
#mw-searchButton,
#searchButton {
background-color: #252523;
border-color: #3a3a38;
color: var(--bs-gray-800);
}
/* personal tools (login, preferences, etc.) */
#pt-login a,
#pt-userpage a,
#pt-preferences a,
#pt-logout a,
#p-personal a {
color: var(--bs-link);
}
#p-personal a:hover {
color: var(--bs-link-hover);
}
/* ── Site footer ────────────────────────────────── */
#footer {
background-color: #1a1a18;
border-top: 1px solid #2e2e2c;
color: var(--bs-text-muted);
}
#footer a { color: var(--bs-link); }
#footer a:hover { color: var(--bs-link-hover); }
/* ── Miscellaneous chrome ───────────────────────── */
/* edit notices, system messages */
.mw-editsection a { color: var(--bs-link); }
.mw-editsection a:hover { color: var(--bs-link-hover); }
/* category links at page bottom */
#catlinks {
background-color: #1e1e1c;
border-color: #333331;
color: var(--bs-text-muted);
}
#catlinks a { color: var(--bs-link); }
#catlinks a:hover { color: var(--bs-link-hover); }
/* TOC */
#toc {
background-color: #1e1e1c;
border-color: #333331;
color: var(--bs-text-primary);
}
#toc a { color: var(--bs-link); }
#toc a:hover { color: var(--bs-link-hover); }
/* notification / sitenotice bar */
#siteNotice,
#centralNotice {
background-color: #1e1a3a;
border-color: var(--bs-purple-200);
color: var(--bs-purple-900);
}
/* diff view */
.diff-addedline { background-color: #0d2b0d; color: #b8e6b8; }
.diff-deletedline { background-color: #2b0d0d; color: #e6b8b8; }
.diff-context { background-color: #1e1e1c; color: var(--bs-text-muted); }
/* ── Infobox ────────────────────────────────────── */
table.bs-infobox {
background: #1e1e1c !important;
color: var(--bs-text-primary) !important;
border-color: #3a3a38 !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
}
table.bs-infobox th,
table.bs-infobox td {
background: #1e1e1c !important;
color: var(--bs-text-primary) !important;
border-color: #2e2e2c !important;
}
.bs-infobox-title {
background: #1e1a3a !important;
color: var(--bs-purple-900) !important;
}
table.bs-infobox th.bs-infobox-section,
table.bs-infobox td.bs-infobox-section {
background: #323230 !important;
color: var(--bs-gray-850) !important;
border-top: 1px solid #3a3a38 !important;
border-bottom: 1px solid #3a3a38 !important;
}
table.bs-infobox .bs-infobox-logo,
table.bs-infobox .bs-infobox-screenshot {
background: #252523 !important;
color: var(--bs-text-primary) !important;
}
table.bs-infobox .bs-infobox-caption {
color: var(--bs-text-muted) !important;
}
/* active status — dark green */
table.bs-infobox tr.bs-infobox-active th,
table.bs-infobox tr.bs-infobox-active td,
table.bs-infobox th.bs-infobox-active,
table.bs-infobox td.bs-infobox-active {
background: #0d2b0d !important;
color: #7ee8a2 !important;
}
/* inactive status — dark red */
table.bs-infobox tr.bs-infobox-inactive th,
table.bs-infobox tr.bs-infobox-inactive td,
table.bs-infobox th.bs-infobox-inactive,
table.bs-infobox td.bs-infobox-inactive {
background: #2b0d0d !important;
color: #f5a8a8 !important;
}
/* completed / discontinued */
table.bs-infobox td.bs-infobox-ended {
color: #f5a8a8 !important;
}
/* stats as of — pale mauve background, bright purple text */
table.bs-infobox th.bs-infobox-statsdate,
table.bs-infobox td.bs-infobox-statsdate {
background: #2d2040 !important;
color: #C4BAFF !important;
}
} /* end @media (prefers-color-scheme: dark) */