MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

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