BOINC Projects

MediaWiki:Common.css: Difference between revisions

← Older edit
darker link coulors
No edit summary
 
(35 intermediate revisions by the same user not shown)
Line 65: Line 65:
     --bs-text-muted:  #555555;
     --bs-text-muted:  #555555;


     /* link colours — light mode */
     /* link colours — light mode (darkened for contrast) */
     --bs-link:        #4840A3;  /* purple-400, darkened */
     --bs-link:        #3730A3;  /* deep indigo */
     --bs-link-hover:  #302A74;  /* purple-800, darkened */
     --bs-link-hover:  #1e1a5e;  /* near-navy */
     --bs-link-visited: #6B63C8;  /* mid-purple, darkened */
     --bs-link-visited: #5B52B8;  /* mid-purple, distinct from unvisited */
}
}


Line 141: Line 141:
     text-decoration: underline;
     text-decoration: underline;
     text-underline-offset: 2px;
     text-underline-offset: 2px;
}
/* ── INFOBOX — suppress phantom leading paragraphs ── */
/* Use descendant selector (space, not >) so Minerva's
  .mf-section-0 wrapper doesn't break the match        */
.mw-parser-output p:empty,
.mw-parser-output p:has(> br:only-child) {
    display: none;
    margin: 0;
    padding: 0;
}
.mw-parser-output br:first-child {
    display: none;
}
.mw-parser-output > br:first-child {
    display: none;
}
}


Line 242: Line 260:
.bs-stat-blue .bs-stat-number { color: var(--bs-blue-800); }
.bs-stat-blue .bs-stat-number { color: var(--bs-blue-800); }
.bs-stat-blue .bs-stat-label  { color: var(--bs-blue-400); }
.bs-stat-blue .bs-stat-label  { color: var(--bs-blue-400); }
.bs-stat-pink {
    background: var(--bs-pink-50);
    border-color: var(--bs-pink-200);
}
.bs-stat-pink .bs-stat-number { color: var(--bs-pink-800); }
.bs-stat-pink .bs-stat-label  { color: var(--bs-pink-200); }
/* ══════════════════════════════════════════════════════
  QUOTE CALLOUT
══════════════════════════════════════════════════════ */
.bs-quote {
    margin: 1em 2em;
    padding: 0.5em 1em;
    border-left: 3px solid var(--bs-gray-200);
    background: var(--bs-gray-50);
}
.bs-quote-source {
    text-align: right;
    margin-top: 0.5em;
    opacity: 0.85;
}


/* ══════════════════════════════════════════════════════
/* ══════════════════════════════════════════════════════
Line 347: Line 388:
.bs-group-green  .mw-body-content a,
.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: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:visited { color: var(--bs-green-800); } /* fixed: was --bs-green-200, near-invisible on light bg */
.bs-group-green  .mw-body-content a:hover  { color: var(--bs-green-800); text-decoration: underline; }
.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,
.bs-group-amber  .mw-body-content a:link    { color: var(--bs-amber-800); }
.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:visited { color: var(--bs-amber-800); } /* fixed: was --bs-amber-200, near-invisible on light bg */
.bs-group-amber  .mw-body-content a:hover  { color: var(--bs-amber-800); text-decoration: underline; }
.bs-group-amber  .mw-body-content a:hover  { color: var(--bs-amber-800); text-decoration: underline; }


Line 367: Line 408:
.bs-group-pink  .mw-body-content a,
.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: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:visited { color: var(--bs-pink-800); } /* fixed: was --bs-pink-200, near-invisible on light bg */
.bs-group-pink  .mw-body-content a:hover  { color: var(--bs-pink-800); text-decoration: underline; }
.bs-group-pink  .mw-body-content a:hover  { color: var(--bs-pink-800); text-decoration: underline; }


Line 464: Line 505:
     text-align: center;
     text-align: center;
}
}
/* ══════════════════════════════════════════════════════
  LICENSE BOX
══════════════════════════════════════════════════════ */
.license-box {
    padding: 6px 10px;
    border: 1px solid var(--bs-gray-200);
    background: var(--bs-gray-50);
    color: var(--bs-text-primary);
    font-size: 0.9em;
    margin: 0.5em 0;
    border-radius: 4px;
}
.license-box-title {
    font-weight: 500;
    margin-bottom: 0.3em;
}
/* ══════════════════════════════════════════════════════
  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;
    }
/* ── Stat ribbon — pink tile ────────────────────── */
.bs-stat-pink .bs-stat-label { color: var(--bs-pink-800); }
    /* ── 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);
    }
/* ── Image / thumb frames ───────────────────────── */
    .thumb,
    div.thumb,
    .thumbinner,
    div.thumbinner,
    figure.mw-halign-right,
    figure.mw-halign-left,
    figure.mw-halign-none,
    figure.mw-halign-center,
        .mw-parser-output figure {
        border-color: #3a3a38 !important;
        /* no background — transparent PNGs show through correctly */
}
    .thumbcaption,
    figcaption {
        color: var(--bs-text-muted) !important;
        background: transparent !important;
    }
    /* ── Edit page — textarea and toolbar ───────────── */
    #wpTextbox1,
    .mw-editfont-default,
    textarea.mw-editfont-default {
        background-color: #1e1e1c;
        color: var(--bs-text-primary);
        border-color: #3a3a38;
    }
    #toolbar,
    #wpSummary,
    input#wpSummary {
        background-color: #252523;
        color: var(--bs-text-primary);
        border-color: #3a3a38;
    }
    /* ── License box ────────────────────────────────── */
    /* Variables auto-remap via :root dark block above;
      explicit override ensures border/bg aren't
      overridden by any #content table rule above.    */
    .license-box {
        background: var(--bs-gray-50) !important;
        border-color: var(--bs-gray-200) !important;
        color: var(--bs-text-primary) !important;
    }
    /* ── 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;
    }
    /* ── 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) */
Retrieved from "https://boincsynergy.ca/wiki/MediaWiki:Common.css"