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.

/* TypeGG Design System */

:root {
  --typegg-base: #00031B;
  --typegg-base-2: #05081F;
  --typegg-base-4: #0A0D24;

  --typegg-text: #CCCDD1;
  --typegg-text-emphasis: #FFFFFF;
  --typegg-text-subtle: #91939D;

  --typegg-cyan: #00B3E4;
  --typegg-cyan-hover: #33C5ED;
  --typegg-purple: #BC50F7;
  --typegg-red: #E40000;
  --typegg-green: #00E47D;
  --typegg-yellow: #E4E000;
}

html.skin-theme-clientpref-night {
  --background-color-neutral-subtle: var(--typegg-base) !important;
  --background-color-base: var(--typegg-base-2) !important;
  --background-color-interactive-subtle: var(--typegg-base-4) !important;

  --color-base: var(--typegg-text) !important;
  --color-emphasized: var(--typegg-text-emphasis) !important;
  --color-subtle: var(--typegg-text-subtle) !important;
  --color-placeholder: var(--typegg-text-subtle) !important;

  --color-progressive: var(--typegg-cyan) !important;
  --color-progressive--hover: var(--typegg-cyan-hover) !important;
  --color-visited: var(--typegg-purple) !important;

  --color-destructive: var(--typegg-red) !important;
  --color-success: var(--typegg-green) !important;
  --color-warning: var(--typegg-yellow) !important;
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os {
    --background-color-neutral-subtle: var(--typegg-base) !important;
    --background-color-base: var(--typegg-base-2) !important;
    --background-color-interactive-subtle: var(--typegg-base-4) !important;

    --color-base: var(--typegg-text) !important;
    --color-emphasized: var(--typegg-text-emphasis) !important;
    --color-subtle: var(--typegg-text-subtle) !important;
    --color-placeholder: var(--typegg-text-subtle) !important;

    --color-progressive: var(--typegg-cyan) !important;
    --color-progressive--hover: var(--typegg-cyan-hover) !important;
    --color-visited: var(--typegg-purple) !important;

    --color-destructive: var(--typegg-red) !important;
    --color-success: var(--typegg-green) !important;
    --color-warning: var(--typegg-yellow) !important;
  }
}