Template:Infobox software: Difference between revisions

From BOINC Projects
Jump to navigation Jump to search
← Older editNewer edit →
VisualWikitext
No edit summary
Tag: Manual revert
No edit summary
Tag: Reverted
Line 1: Line 1:
<includeonly><table class="infobox bs-infobox" style="width:300px; float:right; clear:right; margin:0 0 1em 1em; border-radius:6px; font-size:13px; line-height:1.5; border-collapse:separate; border-spacing:0; overflow:hidden;">
/* ═══════════════════════════════════════════════════════
<tr><th colspan="2" class="bs-infobox-title">{{{name|{{PAGENAME}}}}}</th></tr>
  BOINC Synergy — sitewide styles
{{#if:{{{logo|}}}|<tr><td colspan="2" class="bs-infobox-logo">[[File:{{{logo}}}|180px|center]]{{#if:{{{logo caption|}}}|<div class="bs-infobox-caption">{{{logo caption}}}</div>}}</td></tr>}}
  MediaWiki:Common.css
{{#if:{{{screenshot|}}}|<tr><td colspan="2" class="bs-infobox-screenshot">[[File:{{{screenshot}}}|250px|center]]{{#if:{{{caption|}}}|<div class="bs-infobox-caption">{{{caption}}}</div>}}</td></tr>}}
═══════════════════════════════════════════════════════ */
{{#if:{{{status|}}}{{{category|}}}{{{compute|}}}{{{dependencies|}}}|<tr><th colspan="2" class="bs-infobox-section">Project</th></tr>}}
{{#if:{{{status|}}}|{{#ifeq:{{{status}}}|Active|<tr class="bs-infobox-active"><th class="bs-infobox-active">Status</th><td class="bs-infobox-active" style="font-weight:600;">{{{status}}}</td></tr>|<tr class="bs-infobox-inactive"><th class="bs-infobox-inactive">Status</th><td class="bs-infobox-inactive" style="font-weight:600;">{{{status}}}</td></tr>}}}}
{{#if:{{{category|}}}|<tr><th>Category</th><td>{{{category}}}</td></tr>}}
{{#if:{{{compute|}}}|<tr><th>Compute</th><td>{{{compute}}}</td></tr>}}
{{#if:{{{dependencies|}}}|<tr><th>Requires</th><td>{{{dependencies}}}</td></tr>}}
{{#if:{{{developer|}}}{{{author|}}}{{{sponsor|}}}{{{maintainer|}}}{{{released|}}}{{{completed|}}}{{{discontinued|}}}{{{repository|}}}|<tr><th colspan="2" class="bs-infobox-section">Development</th></tr>}}
{{#if:{{{developer|}}}|<tr><th style="width:110px;">Developer</th><td>{{{developer}}}</td></tr>}}
{{#if:{{{author|}}}|<tr><th>Author</th><td>{{{author}}}</td></tr>}}
{{#if:{{{sponsor|}}}|<tr><th>Sponsor</th><td>{{{sponsor}}}</td></tr>}}
{{#if:{{{maintainer|}}}|<tr><th>Maintainer</th><td>{{{maintainer}}}</td></tr>}}
{{#if:{{{released|}}}|<tr><th>Initial release</th><td>{{{released}}}</td></tr>}}
{{#if:{{{completed|}}}|<tr><th>Completed</th><td class="bs-infobox-ended">{{{completed}}}</td></tr>}}
{{#if:{{{discontinued|}}}|<tr><th>Discontinued</th><td class="bs-infobox-ended">{{{discontinued}}}</td></tr>}}
{{#if:{{{repository|}}}|<tr><th>Repository</th><td>{{{repository}}}</td></tr>}}
{{#if:{{{programming language|}}}{{{operating system|}}}{{{size|}}}|<tr><th colspan="2" class="bs-infobox-section">Software</th></tr>}}
{{#if:{{{programming language|}}}|<tr><th style="width:110px;">Written in</th><td>{{{programming language}}}</td></tr>}}
{{#if:{{{operating system|}}}|<tr><th>Operating system</th><td>{{{operating system}}}</td></tr>}}
{{#if:{{{size|}}}|<tr><th>Size</th><td>{{{size}}}</td></tr>}}
{{#if:{{{stats as of|}}}{{{average performance|}}}{{{active users|}}}{{{total users|}}}{{{active hosts|}}}{{{total hosts|}}}|<tr><th colspan="2" class="bs-infobox-section">BOINC statistics</th></tr>}}
{{#if:{{{stats as of|}}}|<tr><th style="width:110px;" class="bs-infobox-statsdate">Stats as of</th><td class="bs-infobox-statsdate" style="font-weight:600;">{{{stats as of}}}</td></tr>}}
{{#if:{{{average performance|}}}|<tr><th>Performance</th><td>{{{average performance}}}</td></tr>}}
{{#if:{{{active users|}}}|<tr><th>Active users</th><td>{{formatnum:{{{active users}}}}}</td></tr>}}
{{#if:{{{total users|}}}|<tr><th>Total users</th><td>{{formatnum:{{{total users}}}}}</td></tr>}}
{{#if:{{{active hosts|}}}|<tr><th>Active hosts</th><td>{{formatnum:{{{active hosts}}}}}</td></tr>}}
{{#if:{{{total hosts|}}}|<tr><th>Total hosts</th><td>{{formatnum:{{{total hosts}}}}}</td></tr>}}
{{#if:{{{rac|}}}{{{credit per day|}}}{{{gpu performance|}}}{{{cpu performance|}}}|<tr><th colspan="2" class="bs-infobox-section">Analytics</th></tr>}}
{{#if:{{{rac|}}}|<tr><th style="width:110px;">RAC</th><td>{{formatnum:{{{rac}}}}}</td></tr>}}
{{#if:{{{credit per day|}}}|<tr><th>Credit/day</th><td>{{formatnum:{{{credit per day}}}}}</td></tr>}}
{{#if:{{{gpu performance|}}}|<tr><th>GPU performance</th><td>{{{gpu performance}}}</td></tr>}}
{{#if:{{{cpu performance|}}}|<tr><th>CPU performance</th><td>{{{cpu performance}}}</td></tr>}}
{{#if:{{{website|}}}{{{license|}}}|<tr><th colspan="2" class="bs-infobox-section">Metadata</th></tr>}}
{{#if:{{{website|}}}|<tr><th style="width:110px;">Website</th><td>{{{website}}}</td></tr>}}
{{#if:{{{license|}}}|<tr><th>License</th><td>{{{license}}}</td></tr>}}
</table></includeonly><noinclude>
== Template:Infobox software ==


Modern BOINC-oriented infobox template for distributed computing and software project articles.
/* ── FONT ───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');


=== Parameters ===
body, .mw-body, .mw-body-content {
    font-family: 'Inter', sans-serif;
}


{| class="wikitable"
/* ── CSS VARIABLES — light mode ─────────────────────── */
! Parameter !! Description !! Required
:root {
|-
    /* purple ramp */
| <code>name</code> || Software name (defaults to page name) || No
    --bs-purple-50: #EEEDFE;
|-
    --bs-purple-200: #AFA9EC;
| <code>logo</code> || Logo filename || No
    --bs-purple-400: #534AB7;
|-
    --bs-purple-800: #3C3489;
| <code>logo caption</code> || Caption below logo || No
    --bs-purple-900: #26215C;
|-
| <code>screenshot</code> || Screenshot filename || No
|-
| <code>caption</code> || Caption below screenshot || No
|-
| colspan="3" style="background:#eaecf0; text-align:center;" | '''Project'''
|-
| <code>status</code> || Active, Completed, etc. Green background when "Active", red otherwise || No
|-
| <code>category</code> || Research category (e.g. Astrophysics, Mathematics) || No
|-
| <code>compute</code> || Processing type: CPU, GPU, or CPU & GPU || No
|-
| <code>dependencies</code> || Additional software required (e.g. VirtualBox, CUDA, Git) || No
|-
| colspan="3" style="background:#eaecf0; text-align:center;" | '''Development'''
|-
| <code>developer</code> || Developer name || No
|-
| <code>author</code> || Original author || No
|-
| <code>sponsor</code> || Sponsoring organization || No
|-
| <code>maintainer</code> || Current maintainer || No
|-
| <code>released</code> || Initial release date || No
|-
| <code>completed</code> || Completion date or status (shown in red) || No
|-
| <code>discontinued</code> || Discontinuation date (shown in red) || No
|-
| <code>repository</code> || Source code repository link || No
|-
| colspan="3" style="background:#eaecf0; text-align:center;" | '''Software'''
|-
| <code>programming language</code> || Language(s) the software is written in || No
|-
| <code>operating system</code> || Supported operating systems || No
|-
| <code>size</code> || Download/install size || No
|-
| colspan="3" style="background:#eaecf0; text-align:center;" | '''BOINC statistics'''
|-
| <code>stats as of</code> || Date the statistics below were recorded || No
|-
| <code>average performance</code> || Average FLOPS or equivalent || No
|-
| <code>active users</code> || Current active user count || No
|-
| <code>total users</code> || All-time total users || No
|-
| <code>active hosts</code> || Current active host count || No
|-
| <code>total hosts</code> || All-time total hosts || No
|-
| colspan="3" style="background:#eaecf0; text-align:center;" | '''Analytics'''
|-
| <code>rac</code> || Recent Average Credit || No
|-
| <code>credit per day</code> || Credits granted per day || No
|-
| <code>gpu performance</code> || GPU-specific performance metric || No
|-
| <code>cpu performance</code> || CPU-specific performance metric || No
|-
| colspan="3" style="background:#eaecf0; text-align:center;" | '''Metadata'''
|-
| <code>website</code> || Official website URL || No
|-
| <code>license</code> || Software license || No
|}


=== Full example ===
    /* teal ramp */
    --bs-teal-50:  #E1F5EE;
    --bs-teal-200: #5DCAA5;
    --bs-teal-400: #1D9E75;
    --bs-teal-800: #085041;


<pre>
    /* coral ramp */
{{Infobox software
    --bs-coral-50:  #FAECE7;
| name                = Einstein@Home
    --bs-coral-200: #F0997B;
| logo                = Ein.jpg
    --bs-coral-400: #D85A30;
| logo caption        = Einstein@Home logo
    --bs-coral-800: #4A1B0C;
| screenshot          = [email protected]
| caption              = Einstein@Home screensaver


| status              = Active
    /* blue ramp */
| category            = Astrophysics
    --bs-blue-50:  #E6F1FB;
| compute              = CPU & GPU
    --bs-blue-200: #85B7EB;
| dependencies        = None
    --bs-blue-400: #378ADD;
    --bs-blue-800: #042C53;


| developer            = Bruce Allen
    /* green ramp */
| author              = Bruce Allen
    --bs-green-50:  #EAF3DE;
| sponsor              = Max Planck Society
    --bs-green-200: #C0DD97;
| maintainer          = Einstein@Home team
    --bs-green-800: #173404;
| released            = {{Start date and age|2005|02|19}}
| completed            = No
| discontinued        =
| repository          = {{URL|https://git.ligo.org/einsteinathome}}


| programming language = C, C++
    /* amber ramp */
| operating system     = Windows, Linux, macOS, Android
    --bs-amber-50:  #FAEEDA;
| size                = ~50 MB
     --bs-amber-200: #FAC775;
    --bs-amber-800: #412402;


| stats as of          = {{Start date and age|2026|05|19}}
    /* pink ramp */
| average performance = 21 PFLOPS
    --bs-pink-50: #FBEAF0;
| active users        = 14531
    --bs-pink-200: #F4C0D1;
| total users          = 1061585
    --bs-pink-800: #4B1528;
| active hosts        = 24489
| total hosts          = 8237726


| rac                  = 18500000
    /* gray ramp */
| credit per day      = 950000
    --bs-gray-50:  #F1EFE8;
| gpu performance      = 15 PFLOPS
    --bs-gray-200: #D3D1C7;
| cpu performance      = 6 PFLOPS
    --bs-gray-400: #888780;
    --bs-gray-800: #2C2C2A;
    --bs-gray-850: #444441;


| website              = {{URL|https://einsteinathome.org/}}
    /* semantic */
| license              = GPL-2.0-or-later
    --bs-page-bg:      #ffffff;
}}
    --bs-text-primary: #1a1a1a;
</pre>
    --bs-text-muted:  #555555;


=== Minimal example ===
    /* link colours — light mode */
    --bs-link:        #4840A3;  /* purple-400, darkened */
    --bs-link-hover:  #302A74;  /* purple-800, darkened */
    --bs-link-visited: #6B63C8;  /* mid-purple, darkened */
}


<pre>
/* ── CSS VARIABLES — dark mode ──────────────────────── */
{{Infobox software
@media (prefers-color-scheme: dark) {
| name                = My Project
    :root {
| status              = Active
        --bs-purple-50:  #1e1a3a;
| category            = Mathematics
        --bs-purple-200: #534AB7;
| compute              = CPU
        --bs-purple-400: #AFA9EC;
        --bs-purple-800: #CECBF6;
        --bs-purple-900: #EEEDFE;


| developer            = Jane Smith
        --bs-teal-50:  #0a2a1f;
| released            = {{Start date and age|2020|01|01}}
        --bs-teal-200: #0F6E56;
        --bs-teal-400: #5DCAA5;
        --bs-teal-800: #9FE1CB;


| operating system    = Windows, Linux, macOS
        --bs-coral-50:  #2a100a;
        --bs-coral-200: #993C1D;
        --bs-coral-400: #F0997B;
        --bs-coral-800: #F5C4B3;


| website              = {{URL|https://example.org/}}
        --bs-blue-50: #091824;
| license              = MIT
        --bs-blue-200: #185FA5;
}}
        --bs-blue-400: #85B7EB;
</pre>
        --bs-blue-800: #B5D4F4;


[[Category:Infobox templates]]
        --bs-green-50:  #111f08;
</noinclude>
        --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 ── */
#mw-content-text > .mw-parser-output > p:empty,
#mw-content-text > .mw-parser-output > p:first-child:empty,
#mw-content-text > .mw-parser-output > p:first-child:blank,
#mw-content-text > .mw-parser-output > .mw-empty-elt {
    display: none;
    margin: 0;
    padding: 0;
}
 
/* hide leading breaks generated by template newlines */
#mw-content-text > .mw-parser-output > br:first-child,
#mw-content-text > .mw-parser-output > p:first-child > br:only-child {
    display: none;
}
 
/* ══════════════════════════════════════════════════════
  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) */

Revision as of 21:10, 24 May 2026

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

  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,
  3. mw-content-text > .mw-parser-output > p:first-child:blank,
  4. mw-content-text > .mw-parser-output > .mw-empty-elt {
   display: none;
   margin: 0;
   padding: 0;

}

/* hide leading breaks generated by template newlines */

  1. mw-content-text > .mw-parser-output > br:first-child,
  2. mw-content-text > .mw-parser-output > p:first-child > br:only-child {
   display: none;

}

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

  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=1356"