Template:Infobox software

From BOINC Projects
Revision as of 14:09, 24 May 2026 by Admin (talk | contribs)
Jump to navigation Jump to search

/* ═══════════════════════════════════════════════════════ 

  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 ── */

  1. mw-content-text > .mw-parser-output > p:empty,
  2. mw-content-text > .mw-parser-output > p:first-child:empty {
   display: none;
   margin: 0;
   padding: 0;

}

/* ══════════════════════════════════════════════════════ 

  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;

}

/* ══════════════════════════════════════════════════════ 

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

   .bs-infobox-section {
       background: #2a2a28 !important;
       color: var(--bs-gray-800) !important;
   }

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

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

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

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

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

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

} /* end @media (prefers-color-scheme: dark) */

Retrieved from "https://boincsynergy.ca/wiki/index.php?title=Template:Infobox_software&oldid=1347"