Jump to content

MediaWiki:Theme.css

From Apogea Wiki

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

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

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%;
  position: relative;
  z-index: -1;
}

#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;
}

.mw-jump-link {
  height: 1em !important;
  max-height: 1em !important;
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-accent);
  padding: 8px 16px;
  outline-offset: 2px;
}

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

/* Data tables (Cargo, etc.) */
.mw-datatable,
.cargoTable {
  border-collapse: collapse;
  background-color: var(--bg-secondary);
}

.mw-datatable th,
.cargoTable th {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
  padding: 8px 12px;
  text-align: left;
  font-weight: bold;
  border: 1px solid var(--border-accent);
}

.mw-datatable td,
.cargoTable td {
  padding: 8px 12px;
  vertical-align: middle;
  border: 1px solid var(--border-subtle);
  background-color: var(--bg-secondary);
}

.mw-datatable tr:nth-child(even) td,
.cargoTable tr:nth-child(even) td {
  background-color: var(--bg-surface);
}

/* Wikitable row hover */
.wikitable tr:hover td {
  background-color: var(--bg-elevated);
}

/* Cargo drilldown filters panel */
div.drilldown-filters-wrapper {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-accent);
  color: var(--color-base);
  padding: 12px 16px;
  margin-bottom: 16px;
}

/* Page Forms / jQuery UI Autocomplete dropdown */
.ui-autocomplete,
.ui-menu {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-accent);
  color: var(--text-primary);
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
}

.ui-menu-item {
  padding: 8px 12px;
  cursor: pointer;
}

.ui-menu-item:hover,
.ui-menu-item.ui-state-focus,
.ui-menu-item.ui-state-active,
.ui-state-hover,
.ui-state-focus,
.ui-state-active {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
}

.ui-menu-item a,
.ui-menu-item .ui-menu-item-wrapper {
  color: var(--text-primary);
  display: block;
  padding: 8px 12px;
}

.ui-menu-item a:hover,
.ui-menu-item .ui-menu-item-wrapper:hover,
.ui-menu-item a.ui-state-focus,
.ui-menu-item .ui-menu-item-wrapper.ui-state-focus {
  background-color: var(--bg-elevated);
  color: var(--gold);
  text-decoration: none;
}

/* OOUI Autocomplete / Menu widgets */
.oo-ui-menuSelectWidget {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-accent);
  z-index: 1000;
  max-height: 300px;
  overflow-y: auto;
}

.oo-ui-menuOptionWidget,
.oo-ui-optionWidget {
  background-color: var(--bg-surface);
  color: var(--text-primary);
  padding: 8px 12px;
  cursor: pointer;
}

.oo-ui-menuOptionWidget:hover,
.oo-ui-optionWidget:hover,
.oo-ui-menuOptionWidget-highlighted,
.oo-ui-optionWidget-highlighted {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
}

.oo-ui-menuOptionWidget-selected,
.oo-ui-optionWidget-selected {
  background-color: var(--bg-elevated);
  color: var(--gold);
}

.oo-ui-menuOptionWidget .oo-ui-labelElement-label,
.oo-ui-optionWidget .oo-ui-labelElement-label {
  color: inherit;
}

/* OOUI clippable element (dropdown container) */
.oo-ui-clippableElement-clippable {
  background-color: var(--bg-surface);
}

/* OOUI popup/floating menus */
.oo-ui-floatableElement-floatable,
.oo-ui-popupWidget-popup {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-accent);
}

/* OOUI text input with menu */
.oo-ui-textInputWidget-type-text .oo-ui-menuSelectWidget {
  background-color: var(--bg-surface);
}
Retrieved from "https://apogea.wiki/index.php?title=MediaWiki:Theme.css&oldid=2192"