Toggle search
Toggle menu
10
18
30
244
SOURCE DCS WIKI
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Citizen.css

MediaWiki interface page
More actions
Revision as of 20:17, 4 March 2026 by Niknam3 (talk | contribs)

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.
/* ═══════════════════════════════════════════════════════════
   MediaWiki:Citizen.css
   Applies SOURCEDCS / ATO BRIEF visual identity to the
   Citizen skin.  Mirrors the design tokens from:
     atobrief/css/base.css  and  website/css/style.css

   Key concerns addressed:
   - Supports both light and dark modes via Citizen's built-in
     theme toggle (data-mw-skin-color-scheme attribute).
   - Light palette: warm off-white tones.
   - Dark palette:  warm dark charcoal/brown tones (inverse).
   - OOUI components use their own background variables;
     those are overridden here too.
   - Cards / surface boxes are forced to the near-background
     palette with a 1 px border only.
   ═══════════════════════════════════════════════════════════ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ════════════════════════════════════════════════════════════
   DESIGN TOKENS — LIGHT MODE
   Applied to :root (default) and the explicit light selector.
   ════════════════════════════════════════════════════════════ */

/* Light mode */
:root,
.skin-citizen,
[data-mw-skin-color-scheme="light"] {
    --color-surface-0:       #f4f3f0;
    --color-surface-1:       #edecea;
    --color-surface-2:       #e5e4e0;
    --color-base:            #1a1917;
    --color-base--emphasized: #1a1917;
    --color-base--subtle:    #4a4845;
    --color-progressive:     #1a3a6b;
    --border-color-base:     #c8c5bf;
    --border-color-interactive: #9a9690;
    --background-color-base:    #f4f3f0;
    --background-color-neutral: #edecea;
    --background-color-interactive: #e5e4e0;
    --color-icon:            #4a4845;
    --color-icon--subtle:    #7a7875;
    --font-family-base:      'IBM Plex Mono', monospace;
    --font-family-heading:   'IBM Plex Mono', monospace;
}

/* Dark mode */
[data-mw-skin-color-scheme="dark"] {
    --color-surface-0:       #1c1b19;
    --color-surface-1:       #242220;
    --color-surface-2:       #2e2c2a;
    --color-base:            #e8e6e2;
    --color-base--emphasized: #f4f3f0;
    --color-base--subtle:    #a8a5a0;
    --color-progressive:     #7a9fd4;
    --border-color-base:     #3a3835;
    --border-color-interactive: #4a4845;
    --background-color-base:    #1c1b19;
    --background-color-neutral: #242220;
    --background-color-interactive: #2e2c2a;
    --color-icon:            #a8a5a0;
    --color-icon--subtle:    #7a7875;
    --font-family-base:      'IBM Plex Mono', monospace;
    --font-family-heading:   'IBM Plex Mono', monospace;
}

/* ════════════════════════════════════════════════════════════
   BASE
   ════════════════════════════════════════════════════════════ */

body,
.skin-citizen {
  font-family: var(--font-family-base);
  background-color: var(--color-surface-0);
  color: var(--color-base);
}

/* ── Page heading ────────────────────────────────────────── */
#firstHeading,
.page-heading h1 {
  font-family: var(--font-family-heading);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-base);
  border-bottom: 1px solid var(--border-color-base);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

/* ── Site wordmark / logo text ───────────────────────────── */
.citizen-logo__wordmark,
#p-logo a,
.mw-logo-wordmark {
  font-family: var(--font-family-heading);
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════════
   CARD / SURFACE BACKGROUNDS
   ════════════════════════════════════════════════════════════ */

/* Citizen generic card */
.citizen-card,
.citizen-card-list__item,
.citizen-card__header,
.citizen-card__body {
  background-color: var(--color-surface-1);
  border: 1px solid var(--border-color-base);
  color: var(--color-base);
}

/* Page-info block (appears beneath article title) */
.citizen-page-info,
.citizen-page-info__item {
  background-color: var(--color-surface-1);
  border-color: var(--border-color-base);
  color: var(--color-base--subtle);
}

/* Citizen header */
#citizen-page-header,
.citizen-header,
header.citizen-header {
  background-color: var(--color-surface-1);
  border-bottom: 1px solid var(--border-color-interactive);
}

/* Sticky header */
.citizen-sticky-header {
  background-color: var(--color-surface-1);
  border-bottom: 1px solid var(--border-color-interactive);
}

/* Sidebar */
#citizen-sidebar,
.citizen-sidebar {
  background-color: var(--color-surface-1);
  border-right: 1px solid var(--border-color-base);
}

/* Sidebar navigation labels */
.citizen-nav__heading,
.citizen-sidebar .citizen-nav__heading {
  font-size: 0.65rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--color-base--disabled);
  font-weight: 600;
}

/* Sidebar links */
.citizen-nav__item a,
.citizen-sidebar a {
  font-family: var(--font-family-base);
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  color: var(--color-base);
  background-color: transparent;
}
.citizen-nav__item a:hover,
.citizen-sidebar a:hover {
  color: var(--color-progressive);
  background-color: var(--color-surface-2);
}

/* TOC */
.citizen-toc,
#toc {
  background-color: var(--color-surface-1);
  border: 1px solid var(--border-color-base);
  font-family: var(--font-family-base);
  font-size: 0.75rem;
}
.citizen-toc__title,
#toc .toctitle {
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-base--disabled);
  font-weight: 600;
}
.citizen-toc__item a,
#toc a {
  color: var(--color-base--subtle);
}
.citizen-toc__item a:hover,
#toc a:hover {
  color: var(--color-progressive);
}

/* Citizen search suggestion / typeahead panel */
.citizen-search-results,
.citizen-typeahead {
  background-color: var(--color-surface-1);
  border: 1px solid var(--border-color-interactive);
  box-shadow: var(--box-shadow-menu);
}
.citizen-search-results__item,
.citizen-typeahead__item {
  background-color: transparent;
  color: var(--color-base);
}
.citizen-search-results__item:hover,
.citizen-typeahead__item:hover {
  background-color: var(--color-surface-2);
}

/* Citizen drawer / panel */
.citizen-drawer,
.citizen-drawer__inner,
.citizen-panel {
  background-color: var(--color-surface-1);
  border-color: var(--border-color-base);
}

/* Citizen overflow menu */
.citizen-overflow-menu,
.citizen-dropdown__menu,
.citizen-menu,
.citizen-menu__item {
  background-color: var(--color-surface-1);
  border: 1px solid var(--border-color-interactive);
  box-shadow: var(--box-shadow-menu);
  font-family: var(--font-family-base);
  font-size: 0.75rem;
  color: var(--color-base);
}
.citizen-dropdown__menu a,
.citizen-menu a,
.citizen-menu__item a {
  color: var(--color-base);
  padding: 6px 14px;
  letter-spacing: 0.5px;
  background-color: transparent;
}
.citizen-dropdown__menu a:hover,
.citizen-menu a:hover,
.citizen-menu__item:hover {
  background-color: var(--color-surface-2);
  color: var(--color-base);
}

/* Page tools / toolbox (right-side panel in Citizen) */
.citizen-page-tools,
.citizen-page-tools__card {
  background-color: var(--color-surface-1);
  border: 1px solid var(--border-color-base);
}

/* ════════════════════════════════════════════════════════════
   CONTENT AREA
   ════════════════════════════════════════════════════════════ */

#mw-content-text,
.mw-parser-output {
  font-family: var(--font-family-base);
  font-size: 0.82rem;
  line-height: 1.8;
  color: var(--color-base);
}

/* Headings */
.mw-parser-output h1,
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4,
.mw-parser-output h5,
.mw-parser-output h6 {
  font-family: var(--font-family-heading);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-base);
}
.mw-parser-output h2 {
  font-size: 0.95rem;
  letter-spacing: 3px;
  border-bottom: 1px solid var(--border-color-base);
  padding-bottom: 0.35rem;
  margin-top: 2rem;
}
.mw-parser-output h3 {
  font-size: 0.85rem;
  letter-spacing: 2.5px;
  color: var(--color-base--subtle);
}
.mw-parser-output h4,
.mw-parser-output h5,
.mw-parser-output h6 {
  font-size: 0.78rem;
  letter-spacing: 2px;
  color: var(--color-base--disabled);
}

/* Links */
.mw-parser-output a,
#mw-content-text a {
  color: var(--color-progressive);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s, color 0.15s;
}
.mw-parser-output a:hover,
#mw-content-text a:hover {
  color: var(--color-progressive--hover);
  border-bottom-color: var(--color-progressive);
}
.mw-parser-output a.new,
#mw-content-text a.new {
  color: var(--color-destructive);
}
.mw-parser-output a.new:hover {
  color: var(--color-destructive--hover);
  border-bottom-color: var(--color-destructive);
}

/* Tables */
.mw-parser-output table,
.mw-parser-output .wikitable {
  border: 1px solid var(--border-color-interactive);
  border-collapse: collapse;
  font-family: var(--font-family-base);
  font-size: 0.75rem;
  background: var(--color-surface-0);
  box-shadow: var(--box-shadow-card);
}
.mw-parser-output .wikitable th,
.mw-parser-output table th {
  background-color: var(--color-surface-1);
  border: 1px solid var(--border-color-interactive);
  padding: 6px 12px;
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-base);
  font-weight: 600;
}
.mw-parser-output .wikitable td,
.mw-parser-output table td {
  border: 1px solid var(--border-color-base);
  padding: 5px 12px;
  color: var(--color-base);
  vertical-align: top;
  background-color: var(--color-surface-0);
}
.mw-parser-output .wikitable tr:nth-child(even) td {
  background-color: var(--color-surface-1);
}

/* Code / pre */
.mw-parser-output code,
.mw-parser-output kbd,
.mw-parser-output pre,
.mw-parser-output .mw-code {
  font-family: var(--font-family-mono);
  font-size: 0.78rem;
  background-color: var(--color-surface-1);
  border: 1px solid var(--border-color-base);
  color: var(--color-base);
}
.mw-parser-output pre,
.mw-parser-output .mw-code {
  padding: 12px 16px;
  overflow-x: auto;
  line-height: 1.6;
}
.mw-parser-output code {
  padding: 1px 5px;
}

/* Blockquote */
.mw-parser-output blockquote {
  border-left: 2px solid var(--border-color-interactive);
  padding-left: 16px;
  color: var(--color-base--subtle);
  margin: 1rem 0;
  font-style: normal;
}

/* Horizontal rule */
.mw-parser-output hr {
  border: none;
  border-top: 1px solid var(--border-color-base);
  margin: 1.5rem 0;
}

/* ════════════════════════════════════════════════════════════
   MEDIAWIKI UI ELEMENTS
   ════════════════════════════════════════════════════════════ */

/* Search bar */
.citizen-search__input,
#searchInput,
input[type="search"] {
  font-family: var(--font-family-base);
  font-size: 0.78rem;
  background: var(--color-surface-0);
  border: 1px solid var(--border-color-interactive);
  color: var(--color-base);
  outline: none;
}
.citizen-search__input:focus,
#searchInput:focus,
input[type="search"]:focus {
  border-color: var(--color-base);
  box-shadow: none;
}

/* Buttons */
.citizen-btn,
.mw-ui-button,
input[type="button"],
input[type="submit"],
button {
  font-family: var(--font-family-base);
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: 1px solid var(--border-color-interactive);
  background: var(--color-surface-btn);
  color: var(--color-base);
  transition: background 0.15s, color 0.15s;
}
.citizen-btn:hover,
.mw-ui-button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
button:hover {
  background: var(--color-surface-btn--hover-bg);
  color: var(--color-surface-btn--hover-text);
  border-color: var(--color-surface-btn--hover-bg);
}
.mw-ui-button.mw-ui-progressive {
  background: var(--color-progressive);
  border-color: var(--color-progressive);
  color: var(--background-color-base);
}
.mw-ui-button.mw-ui-progressive:hover {
  background: var(--color-progressive--hover);
  border-color: var(--color-progressive--hover);
}

/* Page actions (edit, history, talk…) */
.citizen-page-actions,
.page-actions {
  font-family: var(--font-family-base);
  font-size: 0.72rem;
  letter-spacing: 1px;
}
.citizen-page-actions__item a {
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-base--subtle);
  border: 1px solid transparent;
  padding: 4px 10px;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.citizen-page-actions__item a:hover {
  color: var(--color-base);
  border-color: var(--border-color-interactive);
  background: var(--color-surface-2);
  text-decoration: none;
}

/* User menu */
.citizen-userInfo-title,
.citizen-userInfo-title nav,
.citizen-userInfo-title ul,
.citizen-userInfo-title li,
.citizen-userInfo-title a {
  text-align: center;
  display: block;
  width: 100%;
}
.citizen-user-info,
.citizen-user-menu__card,
.citizen-menu__card {
  border-radius: 0;
  box-shadow: var(--box-shadow-card);
  border: 1px solid var(--border-color-base);
  background: var(--color-surface-1);
}

/* Remove red logout button */
#pt-logout a,
.citizen-user-menu #pt-logout a {
  background: var(--color-surface-2);
  color: var(--color-base);
  border: 1px solid var(--border-color-base);
  border-radius: 0;
}
#pt-logout a:hover,
.citizen-user-menu #pt-logout a:hover {
  background: var(--color-surface-btn--hover-bg);
  color: var(--color-surface-btn--hover-text);
}

/* User info block at top */
.citizen-user-info__name {
  color: var(--color-base);
  font-weight: 600;
  letter-spacing: 1px;
}
.citizen-user-info__groups {
  color: var(--color-base--disabled);
  font-size: 0.68rem;
  letter-spacing: 1px;
}

/* Notification / alerts */
.citizen-notification,
.mw-notification {
  font-family: var(--font-family-base);
  font-size: 0.75rem;
  border: 1px solid var(--border-color-interactive);
  background: var(--color-surface-1);
  color: var(--color-base);
}

/* Info / warning / error message boxes */
.mw-message-box,
.mw-message-box-notice,
.mw-message-box-warning,
.mw-message-box-error {
  font-family: var(--font-family-base);
  font-size: 0.75rem;
  border-width: 1px;
  border-style: solid;
}
.mw-message-box-notice {
  background: var(--background-color-notice-subtle);
  border-color: var(--color-notice);
  color: var(--color-notice);
}
.mw-message-box-warning {
  background: var(--background-color-warning-subtle);
  border-color: var(--color-warning);
  color: var(--color-warning);
}
.mw-message-box-error {
  background: var(--background-color-destructive-subtle);
  border-color: var(--color-destructive);
  color: var(--color-destructive);
}

/* OOUI popup / dialog */
.oo-ui-popupWidget-popup,
.oo-ui-dialog-content,
.oo-ui-messageDialog-content {
  background-color: var(--color-surface-1);
  border: 1px solid var(--border-color-interactive);
  color: var(--color-base);
  font-family: var(--font-family-base);
}

/* ════════════════════════════════════════════════════════════
   SCROLLBAR, FOOTER, CATEGORY, DIFF, EDIT
   ════════════════════════════════════════════════════════════ */

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--color-surface-1); }
::-webkit-scrollbar-thumb { background: var(--border-color-interactive); }
::-webkit-scrollbar-thumb:hover { background: var(--color-base); }

#catlinks {
  font-family: var(--font-family-base);
  font-size: 0.72rem;
  background: var(--color-surface-1);
  border: 1px solid var(--border-color-base);
  padding: 6px 12px;
}
#catlinks a {
  color: var(--color-progressive);
  letter-spacing: 0.5px;
}

#footer,
.citizen-footer {
  background: var(--color-surface-1);
  border-top: 1px solid var(--border-color-base);
  font-family: var(--font-family-base);
  font-size: 0.7rem;
  letter-spacing: 1px;
  color: var(--color-base--disabled);
}
#footer a,
.citizen-footer a {
  color: var(--color-base--disabled);
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
#footer a:hover,
.citizen-footer a:hover {
  color: var(--color-base);
  border-bottom-color: var(--color-base);
}

.wikiEditor-toolbar,
#toolbar {
  background: var(--color-surface-1);
  border: 1px solid var(--border-color-base);
  border-bottom: none;
  font-family: var(--font-family-base);
}

#wpTextbox1,
textarea {
  font-family: var(--font-family-mono);
  font-size: 0.78rem;
  background: var(--color-surface-0);
  border: 1px solid var(--border-color-interactive);
  color: var(--color-base);
}
#wpTextbox1:focus,
textarea:focus {
  border-color: var(--color-base);
  outline: none;
  box-shadow: none;
}

input[type="text"],
input[type="password"],
input[type="email"],
select {
  font-family: var(--font-family-base);
  font-size: 0.78rem;
  background: var(--color-surface-0);
  border: 1px solid var(--border-color-interactive);
  color: var(--color-base);
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
select:focus {
  border-color: var(--color-base);
  outline: none;
  box-shadow: none;
}

.diff-context { background: var(--color-surface-0); }
.diff-addedline { background: var(--color-diff-added); }
.diff-deletedline { background: var(--color-diff-deleted); }
.diff-marker { color: var(--border-color-interactive); }
table.diff td {
  font-family: var(--font-family-mono);
  font-size: 0.75rem;
}

.mw-changeslist,
.mw-changeslist-line {
  font-family: var(--font-family-base);
  font-size: 0.75rem;
}

.thumbcaption,
.mw-parser-output .thumbcaption {
  font-family: var(--font-family-base);
  font-size: 0.7rem;
  color: var(--color-base--disabled);
  letter-spacing: 0.5px;
}

::selection {
  background: var(--color-selection-bg);
  color: var(--color-selection-text);
}
Retrieved from "https://wiki.sourcedcs.page/index.php?title=MediaWiki:Citizen.css&oldid=59"
Last modified
This page was last edited on 4 March 2026, at 20:17.