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)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.
/* CSS placed here will be applied to all skins */
.citizen-overflow-wrapper:has(.citizen-overflow-content .wikitable) {
  float: right;
  clear: right;
  margin-left: 5px;
}
@layer base {
  /* Always apply */
  .citizen-overflow-wrapper:has(.citizen-overflow-content .wikitable) {
    float: right;
    clear: right;
    margin-left: 5px;
  }

  /* Dark-mode scopes */
  :is(html.skin-theme-clientpref-night,
      html.skin-citizen-dark,
      [data-theme="dark"]) .navbox {
    color: #9a9a9a !important;
    background: #000 !important;
  }

  /* Zebra striping */
  :is(html.skin-theme-clientpref-night,
      html.skin-citizen-dark,
      [data-theme="dark"]) .navbox tr:has(> td.navbox-list.navbox-odd),
  :is(html.skin-theme-clientpref-night,
      html.skin-citizen-dark,
      [data-theme="dark"]) .navbox td.navbox-list.navbox-odd,
  :is(html.skin-theme-clientpref-night,
      html.skin-citizen-dark,
      [data-theme="dark"]) .navbox th.navbox-group:has(+ td.navbox-list.navbox-odd) {
    background-color: #000 !important;
  }
  :is(html.skin-theme-clientpref-night,
      html.skin-citizen-dark,
      [data-theme="dark"]) .navbox tr:has(> td.navbox-list.navbox-even),
  :is(html.skin-theme-clientpref-night,
      html.skin-citizen-dark,
      [data-theme="dark"]) .navbox td.navbox-list.navbox-even,
  :is(html.skin-theme-clientpref-night,
      html.skin-citizen-dark,
      [data-theme="dark"]) .navbox th.navbox-group:has(+ td.navbox-list.navbox-even) {
    background-color: #111 !important;
  }

  /* Title style */
  :is(html.skin-theme-clientpref-night,
      html.skin-citizen-dark,
      [data-theme="dark"]) .navbox .navbox-title {
    background: #1b1b1b !important;
    color: #e6e6e6 !important;
    border-color: #2a2a2a !important;
  }

  /* Borders & links */
  :is(html.skin-theme-clientpref-night,
      html.skin-citizen-dark,
      [data-theme="dark"]) .navbox,
  :is(html.skin-theme-clientpref-night,
      html.skin-citizen-dark,
      [data-theme="dark"]) .navbox td,
  :is(html.skin-theme-clientpref-night,
      html.skin-citizen-dark,
      [data-theme="dark"]) .navbox th {
    border-color: #2a2a2a !important;
  }
  .navbox a {
    color: inherit;
  }
}

@layer overrides {
  /* White group bg → keep white text */
  :is(html.skin-theme-clientpref-night,
      html.skin-citizen-dark,
      [data-theme="dark"]) .navbox .navbox-group[style*="background: #ffffff"],
  :is(html.skin-theme-clientpref-night,
      html.skin-citizen-dark,
      [data-theme="dark"]) .navbox .navbox-group[style*="background:#ffffff"],
  :is(html.skin-theme-clientpref-night,
      html.skin-citizen-dark,
      [data-theme="dark"]) .navbox .navbox-group[style*="background: white"],
  :is(html.skin-theme-clientpref-night,
      html.skin-citizen-dark,
      [data-theme="dark"]) .navbox .navbox-group[style*="background:white"] {
    background: none !important;
    color: #ffffff !important;
  }

  /* Green */
  :is(html.skin-theme-clientpref-night,
      html.skin-citizen-dark,
      [data-theme="dark"]) .navbox .navbox-group[style*="background: #07f507"],
  :is(html.skin-theme-clientpref-night,
      html.skin-citizen-dark,
      [data-theme="dark"]) .navbox .navbox-group[style*="background:#07f507"] {
    background: none !important;
    color: #07f507 !important;
  }

  /* Blue */
  :is(html.skin-theme-clientpref-night,
      html.skin-citizen-dark,
      [data-theme="dark"]) .navbox .navbox-group[style*="background: #42caff"],
  :is(html.skin-theme-clientpref-night,
      html.skin-citizen-dark,
      [data-theme="dark"]) .navbox .navbox-group[style*="background:#42caff"] {
    background: none !important;
    color: #42caff !important;
  }

  /* Red */
  :is(html.skin-theme-clientpref-night,
      html.skin-citizen-dark,
      [data-theme="dark"]) .navbox .navbox-group[style*="background: #ff0f0f"],
  :is(html.skin-theme-clientpref-night,
      html.skin-citizen-dark,
      [data-theme="dark"]) .navbox .navbox-group[style*="background:#ff0f0f"] {
    background: none !important;
    color: #ff0f0f !important;
  }

  /* Special black group → white bg, black text */
  :is(html.skin-theme-clientpref-night, html.skin-citizen-dark, [data-theme="dark"])
  .navbox th.navbox-group[style*="background:#000"],
  :is(html.skin-theme-clientpref-night, html.skin-citizen-dark, [data-theme="dark"])
  .navbox th.navbox-group[style*="background: #000"],
  :is(html.skin-theme-clientpref-night, html.skin-citizen-dark, [data-theme="dark"])
  .navbox th.navbox-group[style*="background-color:#000"],
  :is(html.skin-theme-clientpref-night, html.skin-citizen-dark, [data-theme="dark"])
  .navbox th.navbox-group[style*="background-color: #000"],
  :is(html.skin-theme-clientpref-night, html.skin-citizen-dark, [data-theme="dark"])
  .navbox th.navbox-group[style*="background:#000000"],
  :is(html.skin-theme-clientpref-night, html.skin-citizen-dark, [data-theme="dark"])
  .navbox th.navbox-group[style*="background: #000000"],
  :is(html.skin-theme-clientpref-night, html.skin-citizen-dark, [data-theme="dark"])
  .navbox th.navbox-group[style*="background:black"] {
    background: none !important;
    color: #000 !important;
    text-shadow: 0 0 10px #fff;
  }
}