BOINC Projects

MediaWiki:Common.css: Difference between revisions

← Older edit
image box css
No edit summary
 
(28 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 463: Line 504:
     color: var(--bs-gray-400);
     color: var(--bs-gray-400);
     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;
}
}


Line 560: Line 619:
         color-scheme: dark;
         color-scheme: dark;
     }
     }
/* ── Stat ribbon — pink tile ────────────────────── */
.bs-stat-pink .bs-stat-label { color: var(--bs-pink-800); }


     /* ── Article content area ───────────────────────── */
     /* ── Article content area ───────────────────────── */
Line 566: Line 627:
     .mw-body-content {
     .mw-body-content {
         background-color: #121212;
         background-color: #121212;
        color: var(--bs-text-primary);
         border-color: #333331;
         border-color: #333331;
     }
     }


     /* ensure all common text elements inherit the light colour explicitly */
     /* ensure core text elements get the light colour in dark mode */
     .mw-body-content p,
     .mw-body-content p,
     .mw-body-content li,
     .mw-body-content li,
     .mw-body-content dt,
     .mw-body-content dt,
     .mw-body-content dd,
     .mw-body-content dd {
    .mw-body-content td,
    .mw-body-content th,
    .mw-body-content span,
    .mw-body-content div {
         color: var(--bs-text-primary);
         color: var(--bs-text-primary);
     }
     }
Line 630: Line 686:
     }
     }


    /* ── Image frames — darken background to match dark mode ── */
/* ── Image / thumb frames ───────────────────────── */
     /* Using filter:invert then re-invert the image to keep photo colours correct */
     .thumb,
     .thumbinner,
    div.thumb,
     div.thumbinner {
     .thumbinner,  
         background-color: #2a2a28 !important;
     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;
         border-color: #3a3a38 !important;
        /* no background — transparent PNGs show through correctly */
}
    .thumbcaption,
    figcaption {
        color: var(--bs-text-muted) !important;
        background: transparent !important;
     }
     }


     .thumbcaption,
    /* ── Edit page — textarea and toolbar ───────────── */
     div.thumbcaption {
    #wpTextbox1,
         background-color: #2a2a28 !important;
     .mw-editfont-default,
         color: #e8e8e8 !important;
     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;
     }
     }


     /* re-invert only the actual image so photos look normal */
     /* ── License box ────────────────────────────────── */
     .thumbinner img {
    /* Variables auto-remap via :root dark block above;
         filter: brightness(0.9);
      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;
     }
     }


Line 698: Line 780:
     }
     }


     /* ── Image frames & captions ────────────────────── */
     /* ── Watchlist star ─────────────────────────────── */
     /* Dark mode for image frames is deferred — caption text darkened via base styles instead */
     #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;
    }


    /* ── Left sidebar / panel ───────────────────────── */
     #mw-panel,
     #mw-panel,
     div#mw-panel {
     div#mw-panel {
Line 829: Line 923:
     }
     }


     .bs-infobox-section {
     table.bs-infobox th.bs-infobox-section,
         background: #2a2a28 !important;
    table.bs-infobox td.bs-infobox-section {
         color: var(--bs-gray-800) !important;
         background: #323230 !important;
         color: var(--bs-gray-850) !important;
        border-top: 1px solid #3a3a38 !important;
        border-bottom: 1px solid #3a3a38 !important;
     }
     }


     .bs-infobox-logo,
     table.bs-infobox .bs-infobox-logo,
     .bs-infobox-screenshot {
     table.bs-infobox .bs-infobox-screenshot {
         background: #252523 !important;
         background: #252523 !important;
         color: var(--bs-text-primary) !important;
         color: var(--bs-text-primary) !important;
     }
     }


     .bs-infobox-caption {
     table.bs-infobox .bs-infobox-caption {
         color: var(--bs-text-muted) !important;
         color: var(--bs-text-muted) !important;
     }
     }


     /* active status — dark green */
     /* active status — dark green */
     tr.bs-infobox-active th,
     table.bs-infobox tr.bs-infobox-active th,
     tr.bs-infobox-active td,
     table.bs-infobox tr.bs-infobox-active td,
     th.bs-infobox-active,
     table.bs-infobox th.bs-infobox-active,
     td.bs-infobox-active {
     table.bs-infobox td.bs-infobox-active {
         background: #0d2b0d !important;
         background: #0d2b0d !important;
         color: #7ee8a2 !important;
         color: #7ee8a2 !important;
Line 854: Line 951:


     /* inactive status — dark red */
     /* inactive status — dark red */
     tr.bs-infobox-inactive th,
     table.bs-infobox tr.bs-infobox-inactive th,
     tr.bs-infobox-inactive td,
     table.bs-infobox tr.bs-infobox-inactive td,
     th.bs-infobox-inactive,
     table.bs-infobox th.bs-infobox-inactive,
     td.bs-infobox-inactive {
     table.bs-infobox td.bs-infobox-inactive {
         background: #2b0d0d !important;
         background: #2b0d0d !important;
         color: #f5a8a8 !important;
         color: #f5a8a8 !important;
Line 863: Line 960:


     /* completed / discontinued */
     /* completed / discontinued */
     td.bs-infobox-ended {
     table.bs-infobox td.bs-infobox-ended {
         color: #f5a8a8 !important;
         color: #f5a8a8 !important;
     }
     }


     /* stats as of — dark purple tint */
     /* stats as of — pale mauve background, bright purple text */
     th.bs-infobox-statsdate,
     table.bs-infobox th.bs-infobox-statsdate,
     td.bs-infobox-statsdate {
     table.bs-infobox td.bs-infobox-statsdate {
         background: #1e1a3a !important;
         background: #2d2040 !important;
         color: var(--bs-purple-900) !important;
         color: #C4BAFF !important;
     }
     }


} /* end @media (prefers-color-scheme: dark) */
} /* end @media (prefers-color-scheme: dark) */
Retrieved from "https://boincsynergy.ca/wiki/MediaWiki:Common.css"