MediaWiki:Common.css

From BOINC Projects
Revision as of 11:49, 24 May 2026 by Admin (talk | contribs) (extend dark mode)
Jump to navigation Jump to search

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:         #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;
}

/* ══════════════════════════════════════════════════════
   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;
}

/* ══════════════════════════════════════════════════════
   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 {
        background-color: #121212;
        color: var(--bs-text-primary);
        border-color: #333331;
    }

    /* 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 */
    #p-cactions li a,
    #p-namespaces li a {
        background-color: #252523;
        color: #b0aeA6;
        border-color: #333331;
    }

    /* active / selected tab */
    #p-cactions li.selected a,
    #p-namespaces li.selected a {
        background-color: #121212;
        color: var(--bs-purple-900);
        border-bottom-color: #121212;
    }

    /* tab hover */
    #p-cactions li a:hover,
    #p-namespaces li a:hover {
        background-color: #2e2e2c;
        color: var(--bs-purple-400);
    }

    /* ── Left sidebar / panel ───────────────────────── */
    #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); }

} /* end @media (prefers-color-scheme: dark) */
Retrieved from "https://boincsynergy.ca/wiki/index.php?title=MediaWiki:Common.css&oldid=1325"