MediaWiki:Common.css
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.
/* ═══════════════════════════════════════════════════════
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: #534AB7; /* purple-400 */
--bs-link-hover: #3C3489; /* purple-800 */
--bs-link-visited: #7F77DD; /* mid-purple, distinct from unvisited */
}
/* ── 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;
}
/* ══════════════════════════════════════════════════════
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); }
/* ══════════════════════════════════════════════════════
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;
}