MediaWiki:Common.css: Difference between revisions

Revision as of 19:37, 16 March 2026

/* Imported from crawl.chaosforge.org + dark mode overrides for Citizen skin */

/* PRE OVERFLOW */
pre {
  overflow: auto;
}

/* PRETTY TABLES - base (light mode) styles */
table.wikitable,
table.prettytable {
  margin: 1em 1em 1em 0;
  background: #f9f9f9;
  border: 1px #aaaaaa solid;
  border-collapse: collapse;
}

table.wikitable th, table.wikitable td,
table.prettytable th, table.prettytable td {
  border: 1px #aaaaaa solid;
  padding: 0.2em;
}

table.wikitable th,
table.prettytable th {
  background: #f2f2f2;
  text-align: center;
}

table.wikitable caption,
table.prettytable caption {
  margin-left: inherit;
  margin-right: inherit;
}

/* DCSS glyph display */
span.nhsym {
  background-color: #000000;
  font-family: monospace;
  padding: 2px;
  font-weight: bold;
  font-size: large;
}

/* Glyph colors */
.clr-blue          { color: #0000AA; }
.clr-green         { color: #00AA00; }
.clr-cyan          { color: #00AAAA; }
.clr-red           { color: #AA0000; }
.clr-magenta       { color: #AA00AA; }
.clr-brown         { color: #AA5500; }
.clr-lightgray     { color: #AAAAAA; }
.clr-darkgray      { color: #555555; }
.clr-brightblue    { color: #5555FF; }
.clr-brightgreen   { color: #55FF55; }
.clr-brightcyan    { color: #55FFFF; }
.clr-orange        { color: #FF5555; }
.clr-brightmagenta { color: #FF55FF; }
.clr-yellow        { color: #FFFF55; }
.clr-white         { color: #FFFFFF; }

/* ============================================
   DARK MODE OVERRIDES (Citizen skin night mode)
   ============================================ */

/* Dark mode via Citizen toggle */
.skin-theme-clientpref-night table.wikitable,
.skin-theme-clientpref-night table.prettytable {
  background: #1a1a2e;
  border-color: #333355;
}

.skin-theme-clientpref-night table.wikitable th,
.skin-theme-clientpref-night table.prettytable th {
  background: #16213e;
  color: #e0e0e0;
  border-color: #333355;
}

.skin-theme-clientpref-night table.wikitable td,
.skin-theme-clientpref-night table.prettytable td {
  border-color: #333355;
  color: #d0d0d0;
}

/* Dark mode for info boxes and navboxes */
.skin-theme-clientpref-night .infobox,
.skin-theme-clientpref-night .navbox {
  background: #1a1a2e;
  border-color: #333355;
  color: #d0d0d0;
}

.skin-theme-clientpref-night .infobox th,
.skin-theme-clientpref-night .navbox th {
  background: #16213e;
  color: #e0e0e0;
}

.skin-theme-clientpref-night .infobox td,
.skin-theme-clientpref-night .navbox td {
  color: #d0d0d0;
}

/* Dark mode also for OS preference */
@media (prefers-color-scheme: dark) {
  .skin-theme-clientpref-os table.wikitable,
  .skin-theme-clientpref-os table.prettytable {
    background: #1a1a2e;
    border-color: #333355;
  }

  .skin-theme-clientpref-os table.wikitable th,
  .skin-theme-clientpref-os table.prettytable th {
    background: #16213e;
    color: #e0e0e0;
    border-color: #333355;
  }

  .skin-theme-clientpref-os table.wikitable td,
  .skin-theme-clientpref-os table.prettytable td {
    border-color: #333355;
    color: #d0d0d0;
  }

  .skin-theme-clientpref-os .infobox,
  .skin-theme-clientpref-os .navbox {
    background: #1a1a2e;
    border-color: #333355;
    color: #d0d0d0;
  }

  .skin-theme-clientpref-os .infobox th,
  .skin-theme-clientpref-os .navbox th {
    background: #16213e;
    color: #e0e0e0;
  }
}

/* Glyph colors - slightly brighten in dark mode for readability */
.skin-theme-clientpref-night .clr-blue { color: #6666FF; }
.skin-theme-clientpref-night .clr-green { color: #44DD44; }
.skin-theme-clientpref-night .clr-cyan { color: #44DDDD; }
.skin-theme-clientpref-night .clr-red { color: #FF4444; }
.skin-theme-clientpref-night .clr-magenta { color: #DD44DD; }
.skin-theme-clientpref-night .clr-brown { color: #DD8844; }
.skin-theme-clientpref-night .clr-darkgray { color: #888888; }
/* ============================================
   DARK MODE — Main Page & inline style overrides
   ============================================ */

/* Register header box */
.register-header {
  background: #f5faff;
  border: 3px solid #cedff2;
  color: #000;
}

.skin-theme-clientpref-night .register-header, .skin-theme-clientpref-night table.register-header, .skin-theme-clientpref-night table.register-header td {
  background: #1a1a2e !important;
  border-color: #333355 !important;
  color: #d0d0d0 !important;
}

/* Override hardcoded white backgrounds */
.skin-theme-clientpref-night div[style*="background-color:white"],
.skin-theme-clientpref-night div[style*="background-color: white"],
.skin-theme-clientpref-night table[style*="background-color:white"],
.skin-theme-clientpref-night table[style*="background-color: white"] {
  background-color: transparent !important;
}

/* Blue section headers (#99CCFF, #99FFFF) */
.skin-theme-clientpref-night div[style*="background-color:#99CCFF"],
.skin-theme-clientpref-night div[style*="background-color: #99CCFF"],
.skin-theme-clientpref-night div[style*="background-color:#99FFFF"],
.skin-theme-clientpref-night div[style*="background-color: #99FFFF"] {
  background-color: #1a2a4a !important;
  color: #d0d0d0;
}

/* Orange section headers (#FFCC99, #FFFF99) */
.skin-theme-clientpref-night div[style*="background-color:#FFCC99"],
.skin-theme-clientpref-night div[style*="background-color: #FFCC99"],
.skin-theme-clientpref-night div[style*="background-color:#FFFF99"],
.skin-theme-clientpref-night div[style*="background-color: #FFFF99"] {
  background-color: #2a2a1a !important;
  color: #d0d0d0;
}

/* Red/orange play online sections (#FF6633, #FF9966) */
.skin-theme-clientpref-night div[style*="background-color:#FF6633"],
.skin-theme-clientpref-night div[style*="background-color: #FF6633"],
.skin-theme-clientpref-night div[style*="background-color:#FF9966"],
.skin-theme-clientpref-night div[style*="background-color: #FF9966"] {
  background-color: #3a1a1a !important;
  color: #d0d0d0;
}

/* Light borders in dark mode */
.skin-theme-clientpref-night td[style*="border:1px solid #abd5f5"],
.skin-theme-clientpref-night td[style*="border:1px solid #fad67d"],
.skin-theme-clientpref-night td[style*="border:1px solid #CC6600"] {
  border-color: #333355 !important;
}

/* Version banner boxes (green = current, yellow = outdated, blue = trunk) */
.skin-theme-clientpref-night div[style*="background-color: #99FF99"],
.skin-theme-clientpref-night div[style*="background-color:#99FF99"],
.skin-theme-clientpref-night div[style*="background-color: #e0fae0"],
.skin-theme-clientpref-night div[style*="background-color:#e0fae0"] {
  background-color: #1a2e1a !important;
  color: #d0d0d0;
}

.skin-theme-clientpref-night div[style*="background-color: #fc6"],
.skin-theme-clientpref-night div[style*="background-color:#fc6"] {
  background-color: #2e2a1a !important;
  color: #d0d0d0;
}

.skin-theme-clientpref-night div[style*="background-color: #BCEBF5"],
.skin-theme-clientpref-night div[style*="background-color:#BCEBF5"] {
  background-color: #1a2a2e !important;
  color: #d0d0d0;
}

/* Catch-all for light div/td backgrounds (#f..., #e...) */
.skin-theme-clientpref-night div[style*="background-color:#f"],
.skin-theme-clientpref-night div[style*="background-color: #f"],
.skin-theme-clientpref-night div[style*="background:#f5"],
.skin-theme-clientpref-night div[style*="background: #f5"] {
  background-color: #1a1a2e !important;
  color: #d0d0d0;
}

/* Override hardcoded black text */
.skin-theme-clientpref-night [style*="color:#000"],
.skin-theme-clientpref-night [style*="color: #000"],
.skin-theme-clientpref-night [style*="color:black"],
.skin-theme-clientpref-night [style*="color: black"] {
  color: #d0d0d0 !important;
}

/* OS preference dark mode duplicates */
@media (prefers-color-scheme: dark) {
  .skin-theme-clientpref-os .register-header {
    background: #1a1a2e;
    border-color: #333355;
    color: #d0d0d0;
  }
  .skin-theme-clientpref-os div[style*="background-color:white"],
  .skin-theme-clientpref-os table[style*="background-color:white"] {
    background-color: transparent !important;
  }
  .skin-theme-clientpref-os div[style*="background-color:#99CCFF"],
  .skin-theme-clientpref-os div[style*="background-color:#99FFFF"] {
    background-color: #1a2a4a !important;
    color: #d0d0d0;
  }
  .skin-theme-clientpref-os div[style*="background-color:#FFCC99"],
  .skin-theme-clientpref-os div[style*="background-color:#FFFF99"] {
    background-color: #2a2a1a !important;
    color: #d0d0d0;
  }
  .skin-theme-clientpref-os div[style*="background-color:#FF6633"],
  .skin-theme-clientpref-os div[style*="background-color:#FF9966"] {
    background-color: #3a1a1a !important;
    color: #d0d0d0;
  }
  .skin-theme-clientpref-os [style*="color:#000"],
  .skin-theme-clientpref-os [style*="color: #000"] {
    color: #d0d0d0 !important;
  }
  .skin-theme-clientpref-os div[style*="background-color: #99FF99"],
  .skin-theme-clientpref-os div[style*="background-color:#99FF99"],
  .skin-theme-clientpref-os div[style*="background-color: #e0fae0"],
  .skin-theme-clientpref-os div[style*="background-color:#e0fae0"] {
    background-color: #1a2e1a !important;
    color: #d0d0d0;
  }
  .skin-theme-clientpref-os div[style*="background-color: #fc6"],
  .skin-theme-clientpref-os div[style*="background-color:#fc6"] {
    background-color: #2e2a1a !important;
    color: #d0d0d0;
  }
  .skin-theme-clientpref-os div[style*="background-color: #BCEBF5"],
  .skin-theme-clientpref-os div[style*="background-color:#BCEBF5"] {
    background-color: #1a2a2e !important;
    color: #d0d0d0;
  }
}
/* Nuclear: force register-header dark in night mode at every level */
html.skin-theme-clientpref-night .register-header,
html.skin-theme-clientpref-night .register-header *,
html.skin-theme-clientpref-night table.register-header,
html.skin-theme-clientpref-night table.register-header tr,
html.skin-theme-clientpref-night table.register-header td,
html.skin-theme-clientpref-night table.register-header tbody {
  background: #1a1a2e !important;
  background-color: #1a1a2e !important;
  border-color: #333355 !important;
  color: #d0d0d0 !important;
}

/* Override Citizen's default table cell backgrounds in dark mode */
html.skin-theme-clientpref-night .mw-parser-output table:not(.wikitable):not(.prettytable) td {
  background-color: transparent !important;
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .register-header,
  html.skin-theme-clientpref-os .register-header *,
  html.skin-theme-clientpref-os table.register-header td {
    background: #1a1a2e !important;
    background-color: #1a1a2e !important;
    border-color: #333355 !important;
    color: #d0d0d0 !important;
  }
  html.skin-theme-clientpref-os .mw-parser-output table:not(.wikitable):not(.prettytable) td {
    background-color: transparent !important;
  }
}