MediaWiki:Common.css: Difference between revisions

Latest revision as of 20:02, 14 September 2026

/* Imports */
@import url('https://fonts.googleapis.com/css2?family=Underdog:wght@400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap');

/* ------------------
-- Deceron Classes --
------------------ */

.deceron-mp-table {
  background: var(--background-color-neutral);
  text-align: center;
  border-spacing: 10px;
}

.deceron-mp-table td {
  background: var(--background-color-neutral-subtle);
  vertical-align: top;
  padding: 5px;
}

/* ------------------
--- General Style ---
------------------ */

html, body {
  font-family: "PT Sans", sans-serif;
}

.mw-body h1,.mw-body .mw-heading1,.mw-body-content h1,.mw-body-content .mw-heading1,.mw-body-content h2,.mw-body-content .mw-heading2 {
  font-family: "Underdog", serif;
  line-height: 1.375
}

:root {
  color-scheme: dark !important;

  /* Text */
  --color-base: #c4d3d3;
  --color-base-fixed: #c4d3d3;
  --color-base--hover: #ffffff;
  --color-emphasized: #ffffff;
  --color-subtle: #6d9b9b;
  --color-placeholder: #8c949e;
  --color-disabled: #69717c;
  --color-disabled-emphasized: #69717c;

  /* Inverted text */
  --color-inverted: #102020;
  --color-inverted-fixed: #102020;

  /* Links */
  --color-progressive: #ffaa50;
  --color-progressive--hover: #ffd6ab;
  --color-progressive--active: #ffd6ab;
  --color-progressive--focus: #ffd6ab;

  /* Visited links */
  --color-visited: #ff8c1c;
  --color-visited--hover: #da7b1e;
  --color-visited--active: #da7b1e;

  /* Backgrounds */
  --background-color-base: #203030;
  --background-color-base-fixed: #203030;

  --background-color-neutral: #102020;
  --background-color-neutral-subtle: #152525;

  --background-color-interactive: #425f5f;
  --background-color-interactive--hover: #454b55;
  --background-color-interactive--active: #505762;

  --background-color-interactive-subtle: #152525;
  --background-color-interactive-subtle--hover: #102020;
  --background-color-interactive-subtle--active: #102020;

  --background-color-disabled: #454b55;
  --background-color-disabled-subtle: #102020;

  --background-color-inverted: #eeeeee;

  /* Progressive UI */
  --background-color-progressive: #ffaa50;
  --background-color-progressive--hover: #ffd6ab;
  --background-color-progressive--active: #ffd6ab;
  --background-color-progressive--focus: #ffd6ab;

  /* Progressive subtle backgrounds */
  --background-color-progressive-subtle: #293653;
  --background-color-progressive-subtle--hover: #334467;
  --background-color-progressive-subtle--active: #3b5078;

  /* Borders */
  --border-color-base: #425f5f;
  --border-color-subtle: #3a5353;
  --border-color-muted: #253636;

  --border-color-interactive: #8c949e;
  --border-color-interactive--hover: #b8bec7;
  --border-color-interactive--active: #eeeeee;

  --border-color-disabled: #454b55;

  --border-color-inverted: #20252b;
  --border-color-inverted-fixed: #20252b;

  /* Progressive borders */
  --border-color-progressive: #da7b1e;
  --border-color-progressive--hover: #ff8c1c;
  --border-color-progressive--active: #ff8c1c;
  --border-color-progressive--focus: #ff8c1c;

  /* Dividers */
  --border-color-divider: #59616d;

  /* Shadows */
  --box-shadow-color-base: #11151a;
  --box-shadow-color-alpha-base: rgba(0, 0, 0, 0.35);

  /* Backdrops */
  --background-color-backdrop-light: rgba(34, 40, 49, 0.65);
  --background-color-backdrop-dark: rgba(0, 0, 0, 0.65);

  /* EVERYTHING ABOVE HAS BEEN EDITED (I THINK) */

  /* Destructive / semantic colors */
  --color-destructive: #ff5454;
  --color-destructive--hover: #ff7878;
  --color-destructive--active: #ff7878;
  --color-destructive--focus: #ff7878;

  --color-destructive--visited: #9f5555;
  --color-destructive--visited--hover: #854848;
  --color-destructive--visited--active: #512e2e;

  --color-error: #bf3c2c;
  --color-error--hover: #9f3526;
  --color-error--active: #612419;

  --color-warning: #886425;
  --color-success: #177860;
  --color-notice: #404244;

  --color-icon-error: #f54739;
  --color-icon-warning: #ab7f2a;
  --color-icon-success: #099979;
  --color-icon-notice: #72777d;

  --color-content-added: #006400;
  --color-content-removed: #8b0000;

  /* Icon filters */
  --filter-invert-icon: 0;
  --filter-invert-primary-button-icon: 1;

  /* Additional shadows */
  --box-shadow-color-progressive--active: #233566;
  --box-shadow-color-progressive--focus: #36c;
  --box-shadow-color-progressive-selected: #36c;
  --box-shadow-color-progressive-selected--hover: #3056a9;
  --box-shadow-color-progressive-selected--active: #233566;
  --box-shadow-color-destructive--focus: #36c;
  --box-shadow-color-inverted: #fff;
  --box-shadow-color-transparent: transparent;

  /* Blending */
  --mix-blend-mode-base: normal;
  --mix-blend-mode-blend: multiply;

  /* Destructive backgrounds */
  --background-color-destructive: #bf3c2c;
  --background-color-destructive--hover: #9f3526;
  --background-color-destructive--active: #612419;
  --background-color-destructive--focus: #36c;

  --background-color-destructive-subtle: #ffe9e5;
  --background-color-destructive-subtle--hover: #ffdad3;
  --background-color-destructive-subtle--active: #ffc8bd;

  /* Error backgrounds */
  --background-color-error: #ff5454;
  --background-color-error--hover: #ff7878;
  --background-color-error--active: #ff7878;

  --background-color-error-subtle: #c22a2a;
  --background-color-error-subtle--hover: #e34e4e;
  --background-color-error-subtle--active: #e34e4e;

  /* Semantic backgrounds */
  --background-color-warning-subtle: #fdf2d5;
  --background-color-success-subtle: #dff2eb;
  --background-color-notice-subtle: #eaecf0;

  /* Content change backgrounds */
  --background-color-content-added: #a3d3ff;
  --background-color-content-removed: #ffe49c;

  /* Other backgrounds */
  --background-color-transparent: transparent;
  --background-color-button-quiet--hover: rgba(0, 24, 73, 0.027);
  --background-color-button-quiet--active: rgba(0, 24, 73, 0.082);
  --background-color-input-binary--checked: #36c;
  --background-color-tab-list-item-framed--hover: rgba(255, 255, 255, 0.3);
  --background-color-tab-list-item-framed--active: rgba(255, 255, 255, 0.65);

  /* Icon opacity */
  --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;

  /* Additional borders */
  --border-color-error: #f54739;
  --border-color-error--hover: #9f3526;
  --border-color-error--active: #612419;

  --border-color-warning: #ab7f2a;
  --border-color-success: #099979;
  --border-color-notice: #72777d;

  --border-color-content-added: #a3d3ff;
  --border-color-content-removed: #ffe49c;
  --border-color-transparent: transparent;

  /* Focus / accent */
  --outline-color-progressive--focus: #ffd6ab;
  --accent-color-base: #ffd6ab;

  /* Subtle text */
  --color-base--subtle: #54595d;
}

/* -----------------
--- Logo fix ---
----------------- */

.mw-logo-wordmark {
    display: none;
}

/* Force the Vector 2022 logo/icon to stay visible on mobile views */
@media (max-width: 719px) {
  .mw-header .mw-logo {
    display: inline-flex !important;
    margin-right: 0.5em;
  }
    
  /* Ensure the icon image inside the logo link is visible */
  .mw-header .mw-logo-icon {
    display: inline-block !important;
  }
}

/* -----------------
--- Infoboxes ---
----------------- */

.infobox {
  background-color: #102020;
  border: 1px solid #425f5f;
  color: #c4d3d3;
  padding: .2em;
  font-size: .9em;
  line-height: 1.5em;
  border-spacing: 3px;
}

.infobox th,
.infobox td {
  padding: .2em .5em;
  text-align: left;
  vertical-align: top;
}

.infobox .infobox-above,
.infobox .infobox-title {
  background-color: #425f5f !important;
  color: #fff !important;
  font-size: 1.25em;
  font-weight: bold;
  text-align: center !important;
}

.infobox .infobox-caption {
  font-weight: normal !important;
  text-align: center !important;
}

.infobox .infobox-header {
  background-color: #3a5353 !important;
  color: #fff !important;
  font-size: 1.1em;
  font-weight: bold;
  text-align: center !important;
}

.infobox .infobox-label {
  font-weight: bold;
}

/* Fixes weird stretching bug with the Vector skin */
.infobox img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

@media (max-width: 640px) {
  .infobox {
    width: 100%;
    float: none;
    clear: both;
    margin: 0 0 1em 0;
    table-layout: fixed;
  }
  
  .infobox .nowrap {
    white-space: normal;
  }
}

@media (min-width: 640px) {
  .infobox {
    /* @noflip */
    margin: 0.5em 0 0.5em 1em;
    /* @noflip */
    float: right;
    /* @noflip */
    clear: right;
    width: 22em;
  }
}