Jump to content

MediaWiki:Common.css

From Apogea Wiki
Revision as of 06:56, 27 January 2026 by Dane (talk | contribs) (Rename semantic colors to actual color names (silver, mint, sky, pink, gold, cream, anakiwa, jade, conifer, coral) (via update-page on MediaWiki MCP Server))

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.
:root:root {
  /* Apogea warm theme - stone/wood dark tones with gold accents */

  /* Custom theme colors */
  --bg-primary: #1a1410;
  --bg-secondary: #241c16;
  --bg-surface: #2e241c;
  --bg-elevated: #3a2e24;
  --text-primary: #e8dcc8;
  --text-secondary: #b8a890;
  --text-muted: #7a6e60;
  --gold: #d4a84b;
  --gold-bright: #f0c866;
  --gold-dim: #a67c32;
  --red: #8b2d2d;
  --red-bright: #a63d3d;
  --border-subtle: #3a2e24;
  --border-accent: #5c4a36;

  /* Glow effects */
  --glow-gold: 0 0 8px rgba(212, 168, 75, 0.4), 0 0 16px rgba(212, 168, 75, 0.2);
  --glow-gold-strong: 0 0 12px rgba(240, 200, 102, 0.6), 0 0 24px rgba(212, 168, 75, 0.3);
  --glow-red: 0 0 8px rgba(139, 45, 45, 0.4), 0 0 16px rgba(139, 45, 45, 0.2);

  /* MediaWiki color mappings */
  --color-base: var(--text-primary);
  --color-base-fixed: var(--text-primary);
  --color-base--hover: #f5edd8;
  --color-emphasized: #f5edd8;
  --color-subtle: var(--text-secondary);
  --color-placeholder: var(--text-muted);
  --color-disabled: #5a4e40;
  --color-disabled-emphasized: var(--text-muted);
  --color-inverted: var(--bg-primary);
  --color-inverted-fixed: var(--bg-primary);
  --color-progressive: var(--gold);
  --color-progressive--hover: var(--gold-bright);
  --color-progressive--active: var(--gold-dim);
  --color-progressive--focus: var(--gold);
  --color-visited: var(--gold-dim);
  --color-visited--hover: var(--gold);
  --color-visited--active: #8a6528;
  --color-destructive: var(--red-bright);
  --color-destructive--hover: #c04a4a;
  --color-destructive--active: var(--red);
  --color-destructive--focus: var(--gold);
  --color-destructive--visited: var(--red);
  --color-destructive--visited--hover: var(--red-bright);
  --color-destructive--visited--active: #6b2222;
  --color-error: var(--red-bright);
  --color-error--hover: #c04a4a;
  --color-error--active: var(--red);
  --color-warning: var(--gold-bright);
  --color-success: #7a9a5a;
  --color-notice: var(--text-secondary);
  --color-icon-error: var(--red-bright);
  --color-icon-warning: var(--gold);
  --color-icon-success: #7a9a5a;
  --color-icon-notice: var(--text-muted);
  --color-content-added: #7a9a5a;
  --color-content-removed: var(--red-bright);
  --background-color-base: var(--bg-primary);
  --background-color-base-fixed: var(--bg-primary);
  --background-color-neutral: var(--bg-surface);
  --background-color-neutral-subtle: var(--bg-secondary);
  --background-color-inverted: var(--text-primary);
  --background-color-transparent: transparent;
  --background-color-interactive: var(--bg-surface);
  --background-color-interactive--hover: var(--bg-elevated);
  --background-color-interactive--active: #4a3e32;
  --background-color-interactive-subtle: var(--bg-secondary);
  --background-color-interactive-subtle--hover: var(--bg-surface);
  --background-color-interactive-subtle--active: var(--bg-elevated);
  --background-color-disabled: var(--bg-surface);
  --background-color-disabled-subtle: var(--bg-secondary);
  --background-color-progressive: var(--gold-dim);
  --background-color-progressive--hover: var(--gold);
  --background-color-progressive--active: #8a6528;
  --background-color-progressive--focus: var(--gold-dim);
  --background-color-progressive-subtle: var(--bg-secondary);
  --background-color-progressive-subtle--hover: var(--bg-surface);
  --background-color-progressive-subtle--active: var(--bg-elevated);
  --background-color-destructive: var(--red);
  --background-color-destructive--hover: var(--red-bright);
  --background-color-destructive--active: #6b2222;
  --background-color-destructive--focus: var(--gold-dim);
  --background-color-destructive-subtle: var(--bg-surface);
  --background-color-destructive-subtle--hover: var(--bg-elevated);
  --background-color-destructive-subtle--active: #4a3e32;
  --background-color-error: var(--red);
  --background-color-error--hover: var(--red-bright);
  --background-color-error--active: #6b2222;
  --background-color-error-subtle: var(--bg-surface);
  --background-color-error-subtle--hover: var(--bg-elevated);
  --background-color-error-subtle--active: #4a3e32;
  --background-color-warning-subtle: var(--bg-surface);
  --background-color-success-subtle: var(--bg-surface);
  --background-color-notice-subtle: var(--bg-surface);
  --background-color-content-added: #4a5a3a;
  --background-color-content-removed: var(--red);
  --background-color-input-binary--checked: var(--gold-dim);
  --border-color-base: var(--border-subtle);
  --border-color-emphasized: var(--border-accent);
  --border-color-subtle: var(--bg-elevated);
  --border-color-muted: var(--bg-surface);
  --border-color-divider: var(--border-subtle);
  --border-color-transparent: transparent;
  --border-color-inverted: var(--text-primary);
  --border-color-inverted-fixed: var(--text-primary);
  --border-color-interactive: var(--border-accent);
  --border-color-interactive--hover: #6c5a46;
  --border-color-interactive--active: var(--text-muted);
  --border-color-disabled: var(--bg-elevated);
  --border-color-progressive: var(--gold);
  --border-color-progressive--hover: var(--gold-bright);
  --border-color-progressive--active: var(--gold-dim);
  --border-color-progressive--focus: var(--gold);
  --border-color-destructive: var(--red-bright);
  --border-color-destructive--hover: #c04a4a;
  --border-color-destructive--active: var(--red);
  --border-color-destructive--focus: var(--gold);
  --border-color-error: var(--red-bright);
  --border-color-error--hover: #c04a4a;
  --border-color-error--active: var(--red);
  --border-color-warning: var(--gold);
  --border-color-warning--hover: var(--gold-bright);
  --border-color-warning--active: var(--gold-dim);
  --border-color-success: #7a9a5a;
  --border-color-notice: var(--text-muted);
  --border-color-content-added: #7a9a5a;
  --border-color-content-removed: var(--red-bright);
  --box-shadow-color-base: var(--border-subtle);
  --box-shadow-color-progressive--active: var(--gold-dim);
  --box-shadow-color-progressive--focus: var(--gold);
  --box-shadow-color-progressive-selected: var(--gold);
  --box-shadow-color-progressive-selected--hover: var(--gold-bright);
  --box-shadow-color-progressive-selected--active: var(--gold-dim);
  --box-shadow-color-destructive--focus: var(--gold);
  --box-shadow-color-inverted: var(--text-primary);
  --box-shadow-color-transparent: transparent;
  --outline-color-progressive--focus: var(--gold);
  --accent-color-base: var(--gold);
  --font-size-x-small: 0.75rem;
  --font-size-small: 0.875rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.125rem;
  --font-size-x-large: 1.25rem;
  --font-size-xx-large: 1.5rem;
  --font-size-xxx-large: 1.75rem;
  --line-height-xxx-small: 1.4285714rem;
  --line-height-xx-small: 1.5714285rem;
  --line-height-x-small: 1.25rem;
  --line-height-small: 1.375rem;
  --line-height-medium: 1.625rem;
  --line-height-large: 1.75rem;
  --line-height-x-large: 1.875rem;
  --line-height-xx-large: 2.125rem;
  --line-height-xxx-large: 2.375rem;
  --line-height-content: 1.625;
  --opacity-icon-base: 0.87;
  --opacity-icon-base--hover: 0.74;
  --opacity-icon-base--selected: 1;
  --opacity-icon-base--disabled: 0.51;
  --opacity-icon-placeholder: 0.51;
  --opacity-icon-subtle: 0.67;
  --filter-invert-icon: 1;
  --filter-invert-primary-button-icon: 0;
  --mix-blend-mode-base: normal;
  --mix-blend-mode-blend: screen;
  
  /* Game text colors */
  --color-silver: #DAE0EA;
  --color-silver-outline: #151517;
  
  --color-mint: #CDF7E2;
  --color-mint-outline: #131916;
  
  --color-sky: #9BDBF5;
  --color-sky-outline: #0B1519;
  
  --color-pink: #EC8FD7;
  --color-pink-outline: #170914;
  
  --color-gold: #FFE792;
  --color-gold-outline: #1A1609;
  
  --color-cream: #FEF3C1;
  --color-cream-outline: #1A1811;
  
  --color-anakiwa: #9FDEFF;
  --color-anakiwa-outline: #0C1519;
  
  --color-jade: #91DCBA;
  --color-jade-outline: #091510;
  
  --color-conifer: #9BDB42;
  --color-conifer-outline: #0B1501;
  
  --color-coral: #F5A097;
  --color-coral-outline: #190C0C;
  
  --color-outline: #1A1A1A;
}

.color-silver {
	color: var(--color-silver);
	--color-outline: var(--color-silver-outline);
}

.color-mint {
	color: var(--color-mint);
	--color-outline: var(--color-mint-outline);
}

.color-sky {
	color: var(--color-sky);
	--color-outline: var(--color-sky-outline);
}

.color-pink {
	color: var(--color-pink);
	--color-outline: var(--color-pink-outline);
}

.color-gold {
	color: var(--color-gold);
	--color-outline: var(--color-gold-outline);
}

.color-cream {
	color: var(--color-cream);
	--color-outline: var(--color-cream-outline);
}

.color-anakiwa {
	color: var(--color-anakiwa);
	--color-outline: var(--color-anakiwa-outline);
}

.color-jade {
	color: var(--color-jade);
	--color-outline: var(--color-jade-outline);
}

.color-conifer {
	color: var(--color-conifer);
	--color-outline: var(--color-conifer-outline);
}

.color-coral {
	color: var(--color-coral);
	--color-outline: var(--color-coral-outline);
}

body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  font-family: 'Liberation Sans', 'Helvetica Neue', Arial, sans-serif;
}

body> :not(:nth-child(2)) {
  flex-grow: 1;
}

* {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}

.mw-page-container {
  width: 100%;
}

.mw-content-container {
  height: 100%;
}

.mw-footer-container {
  margin-top: auto;
  opacity: 50%;
}

#vector-appearance-dropdown,
.vector-pinnable-header-toggle-button {
  display: none !important;
}

/* Hide theme selection, there's only one theme anyway. */
#mw-prefsection-rendering>div:nth-child(2)>div:nth-child(1)>div:nth-child(1) {
  display: none !important;
}

/* Link glow effects */
.mw-parser-output a,
.vector-menu-content a,
#p-logo a {
  transition: color 0.2s, text-shadow 0.2s;
}

.mw-parser-output a:hover,
.vector-menu-content a:hover {
  text-shadow: var(--glow-gold);
}

/* Stronger glow for headings with links */
.mw-parser-output h1 a:hover,
.mw-parser-output h2 a:hover,
.mw-parser-output h3 a:hover {
  text-shadow: var(--glow-gold-strong);
}

/* Red link glow (missing pages) */
.mw-parser-output a.new:hover {
  text-shadow: var(--glow-red);
}

@font-face {
  font-family: 'Apogea';
  src: url('/images/d/d6/Apogea.woff2?v=4') format('woff2');
}

.font-apogea {
  font-family: 'Apogea', monospace;
  font-size: 16px;
  line-height: 17px;

  /* Pixel-perfect rendering */
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: never;
  text-rendering: optimizeSpeed;
  font-kerning: none;

  /* Outline + depth shadow (1x scale, use at 16px) */
  text-shadow:
    -1px 0 0 var(--color-outline),
    1px 0 0 var(--color-outline),
    0 -1px 0 var(--color-outline),
    0 1px 0 var(--color-outline),
    -1px 1px 0 var(--color-outline),
    1px 1px 0 var(--color-outline),
    0 2px 0 var(--color-outline);
}

@font-face {
  font-family: 'ApogeaLong';
  src: url('/images/e/e2/ApogeaLong.woff2?v=4') format('woff2');
}

.font-apogea-long {
  font-family: 'ApogeaLong', monospace;
  font-size: 16px;
  line-height: 22px;

  /* Pixel-perfect rendering */
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: never;
  text-rendering: optimizeSpeed;
  font-kerning: none;

  /* 2px outline (1x scale, use at 16px) */
  /* 1px: all 8 directions, 2px: cardinal only */
  text-shadow:
    -1px 0 0 var(--color-outline),
    1px 0 0 var(--color-outline),
    0 -1px 0 var(--color-outline),
    0 1px 0 var(--color-outline),
    -1px -1px 0 var(--color-outline),
    1px -1px 0 var(--color-outline),
    -1px 1px 0 var(--color-outline),
    1px 1px 0 var(--color-outline),
    -2px 0 0 var(--color-outline),
    2px 0 0 var(--color-outline),
    0 -2px 0 var(--color-outline),
    0 2px 0 var(--color-outline);
}

@font-face {
  font-family: 'BitCell';
  src: url('/images/8/80/BitCell.woff2?v=4') format('woff2');
}

.font-bitcell {
  font-family: 'BitCell', monospace;
  font-size: 16px;
  line-height: 28px;

  /* Pixel-perfect rendering */
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: never;
  text-rendering: optimizeSpeed;
  font-kerning: none;

  /* 2px outline (1x scale, use at 16px) */
  /* 1px: all 8 directions, 2px: cardinal only */
  text-shadow:
    -1px 0 0 var(--color-outline),
    1px 0 0 var(--color-outline),
    0 -1px 0 var(--color-outline),
    0 1px 0 var(--color-outline),
    -1px -1px 0 var(--color-outline),
    1px -1px 0 var(--color-outline),
    -1px 1px 0 var(--color-outline),
    1px 1px 0 var(--color-outline),
    -2px 0 0 var(--color-outline),
    2px 0 0 var(--color-outline),
    0 -2px 0 var(--color-outline),
    0 2px 0 var(--color-outline);
}

/* Ninepatch panel style */
.tooltip-panel {
  flex-grow: 0;
  flex-shrink: 1;
  width: fit-content;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 0;
  border-image: url('/images/0/0a/Panel-dark.png?v=2') 3 fill / 9px stretch;
  padding: 12px 12px;
  color: white;
}

.tooltip-panel p {
	margin:0;
	padding:0;
}
Retrieved from "https://apogea.wiki/index.php?title=MediaWiki:Common.css&oldid=812"