Jump to content

MediaWiki:Common.css

From Bconomy Wiki
Revision as of 00:31, 1 November 2026 by Wewert (talk | contribs) (edit summary removed)

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.
/* Bconomy Wiki: Classic and After Dark.
 * Palettes: packages/state/src/schemas/theme.ts and gamedata/themes.ts.
 * Keep the native Vector/Minerva theme controls; Automatic follows the OS.
 * Screen only: printed articles retain the skin's normal print styling.
 */
@media screen {
  @font-face {
    font-family: "Kanit";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/play/assets/kanit-latin-400-normal-BUlsQXH3.woff2") format("woff2");
  }
  @font-face {
    font-family: "Kanit";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/play/assets/kanit-latin-600-normal-0lS78yAd.woff2") format("woff2");
  }
  @font-face {
    font-family: "Kanit";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/play/assets/kanit-latin-700-normal-xfKc2BN3.woff2") format("woff2");
  }
  html:root {
    --bc-font: "Kanit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --bc-page: #000c25;
    --bc-surface: #272b48;
    --bc-raised: #35345a;
    --bc-text: #f5f5ff;
    --bc-muted: #b8b7c9;
    --bc-border: #504e6d;
    --bc-accent: #17006b;
    --bc-primary: #0059ff;
    /* Lighter blue keeps text links readable on Classic surfaces. */
    --bc-link: #9cbdff;
    --bc-link-hover: #c4d8ff;
    --bc-visited: #c8b4ff;
    --bc-selected: #2d3d6f;
    --bc-info: #123d51;
    --bc-success: #123d31;
    --bc-warning: #493a20;
    --bc-error: #492133;
  }

  html:root.skin-theme-clientpref-night {
    --bc-page: #090b12;
    --bc-surface: #161a25;
    --bc-raised: #252a38;
    --bc-text: #f8f7ff;
    --bc-muted: #b7b4c8;
    --bc-border: #3c4254;
    --bc-accent: #5c1fbc;
    --bc-primary: #5c1fbc;
    --bc-link: #c084fc;
    --bc-link-hover: #deb8ff;
    --bc-visited: #b9a5d8;
    --bc-selected: #252a38;
    --bc-info: #102f3c;
    --bc-success: #103728;
    --bc-warning: #42321c;
    --bc-error: #3e1b2a;
  }
}

@media screen and (prefers-color-scheme: dark) {
  html:root.skin-theme-clientpref-os {
    --bc-page: #090b12;
    --bc-surface: #161a25;
    --bc-raised: #252a38;
    --bc-text: #f8f7ff;
    --bc-muted: #b7b4c8;
    --bc-border: #3c4254;
    --bc-accent: #5c1fbc;
    --bc-primary: #5c1fbc;
    --bc-link: #c084fc;
    --bc-link-hover: #deb8ff;
    --bc-visited: #b9a5d8;
    --bc-selected: #252a38;
    --bc-info: #102f3c;
    --bc-success: #103728;
    --bc-warning: #42321c;
    --bc-error: #3e1b2a;
  }
}

@media screen {
  /* Higher specificity than the skin's day/night token definitions. */
  html:root:root {
    color-scheme: dark;
    --color-base: var(--bc-text);
    --color-base-fixed: var(--bc-text);
    --color-base--hover: var(--bc-text);
    --color-emphasized: var(--bc-text);
    --color-subtle: var(--bc-muted);
    --color-neutral: var(--bc-text);
    --color-base--subtle: var(--bc-muted);
    --color-placeholder: var(--bc-muted);
    --color-disabled: var(--bc-muted);
    --color-inverted: #ffffff;
    --color-inverted-fixed: #ffffff;
    --color-progressive: var(--bc-link);
    --color-progressive--hover: var(--bc-link-hover);
    --color-progressive--active: var(--bc-link-hover);
    --color-progressive--focus: var(--bc-link);
    --color-link: var(--bc-link);
    --color-link--hover: var(--bc-link-hover);
    --color-link--active: var(--bc-link-hover);
    --color-link--focus: var(--bc-link);
    --color-link--visited: var(--bc-visited);
    --color-link--visited--hover: var(--bc-link-hover);
    --color-visited: var(--bc-visited);
    --color-visited--active: var(--bc-link-hover);
    --color-destructive: #ff9aac;
    --color-destructive--hover: #ffc0cb;
    --color-destructive--active: #ffc0cb;
    --color-link-red: #ff9aac;
    --color-link-red--hover: #ffc0cb;
    --color-link-red--active: #ffc0cb;
    --color-link-red--visited: #e7a1b7;
    --color-link-red--visited--hover: #ffc0cb;
    --color-error: #ff9aac;
    --color-warning: #ffd38b;
    --color-success: #8ce0b6;
    --background-color-base: var(--bc-surface);
    --background-color-base-fixed: var(--bc-surface);
    --background-color-neutral: var(--bc-raised);
    --background-color-neutral-subtle: var(--bc-page);
    --background-color-interactive: var(--bc-raised);
    --background-color-interactive--hover: var(--bc-selected);
    --background-color-interactive--active: var(--bc-selected);
    --background-color-interactive-subtle: var(--bc-surface);
    --background-color-interactive-subtle--hover: var(--bc-raised);
    --background-color-interactive-subtle--active: var(--bc-selected);
    --background-color-progressive: var(--bc-primary);
    --background-color-progressive--hover: var(--bc-accent);
    --background-color-progressive--active: var(--bc-accent);
    --background-color-progressive--focus: var(--bc-primary);
    --background-color-progressive-subtle: var(--bc-selected);
    --background-color-progressive-subtle--hover: var(--bc-raised);
    --background-color-progressive-subtle--active: var(--bc-selected);
    --background-color-notice-subtle: var(--bc-raised);
    --background-color-warning-subtle: var(--bc-warning);
    --background-color-error-subtle: var(--bc-error);
    --background-color-destructive-subtle: var(--bc-error);
    --background-color-success-subtle: var(--bc-success);
    --background-color-disabled: var(--bc-raised);
    --background-color-disabled-subtle: var(--bc-surface);
    --background-color-button-quiet--hover: var(--bc-raised);
    --background-color-button-quiet--active: var(--bc-selected);
    --border-color-base: var(--bc-border);
    --border-color-subtle: var(--bc-border);
    --border-color-muted: var(--bc-border);
    --border-color-divider: var(--bc-border);
    --border-color-emphasized: var(--bc-muted);
    --border-color-interactive: var(--bc-border);
    --border-color-interactive--hover: var(--bc-link);
    --border-color-interactive--active: var(--bc-link);
    --border-color-input: var(--bc-border);
    --border-color-input--hover: var(--bc-link);
    --border-color-input-binary: var(--bc-muted);
    --border-color-input-binary--checked: var(--bc-link);
    --border-color-input-binary--hover: var(--bc-link-hover);
    --border-color-input-binary--active: var(--bc-link-hover);
    --border-color-progressive: var(--bc-link);
    --border-color-progressive--hover: var(--bc-link-hover);
    --border-color-progressive--active: var(--bc-link-hover);
    --box-shadow-color-progressive--focus: var(--bc-link);
    --box-shadow-color-inverted: var(--bc-page);
    --filter-invert-icon: 1;
    --font-family-base: var(--bc-font);
    --font-family-heading: var(--bc-font);
    background-color: var(--bc-page);
    color: var(--bc-text);
    accent-color: var(--bc-link);
  }

  body, .mw-page-container, .vector-header-container,
  body .vector-header, body .vector-sticky-header, .vector-column-start,
  .vector-column-end, .mw-footer, .vector-main-menu-container,
  .vector-sticky-pinned-container {
    background-color: var(--bc-page);
    color: var(--bc-text);
  }

  .mw-body {
    background-color: var(--bc-page);
    color: var(--bc-text);
  }

  /* MediaWiki also gives its empty popup portal the vector-body class.
     Apply panel geometry only to article content inside the main element. */
  .mw-body > .vector-body {
    align-self: start;
    box-sizing: border-box;
    min-width: 0;
    background-color: var(--bc-surface);
    color: var(--bc-text);
    border: 1px solid var(--bc-border);
    border-top: 3px solid var(--bc-primary);
    border-radius: 10px;
    padding: clamp(16px, 2.5vw, 32px);
    line-height: 1.7;
    box-shadow: 0 10px 30px rgb(0 0 0 / 12%);
  }

  body, body .mw-body h1, body .mw-body h2, body .mw-body h3,
  body .mw-body .mw-heading, body .vector-body {
    font-family: var(--bc-font);
  }
  body .vector-header {
    min-height: 64px;
    border-bottom: 1px solid var(--bc-border);
  }
  .mw-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--bc-text);
    white-space: nowrap;
  }
  .mw-logo::before {
    content: "";
    display: block;
    width: 30px;
    height: 34px;
    flex: 0 0 30px;
    background: url("https://assets.bconomy.net/brand/outlinethin.webp") center / contain no-repeat;
  }
  .mw-logo strong { font-size: 18px; font-weight: 700; letter-spacing: -.3px; }
  body .mw-logo, body .mw-logo:visited { color: var(--bc-text); }
  /* The skin normally inverts an image wordmark; this wiki uses live text. */
  body .mw-logo .skin-invert { filter: none; }
  .vector-header .cdx-text-input__input { border-radius: 6px 0 0 6px; }
  .vector-header .cdx-search-input__end-button { border-radius: 0 6px 6px 0; }

  /* Vector offsets the unboxed main menu; bordered panels share one gutter. */
  .vector-column-start .vector-main-menu-container { margin-left: 0; }
  .vector-sticky-pinned-container::after { display: none; }
  .vector-header .vector-menu-content { background-color: transparent; }

  /* Keep native pinning and scrolling, with equal panel sizing and spacing. */
  body .vector-pinned-container {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 16px;
    background-color: var(--bc-surface);
    border: 1px solid var(--bc-border);
    border-radius: 8px;
    padding: 10px 12px;
  }
  body .vector-pinned-container .vector-pinnable-element,
  body .vector-pinned-container .vector-menu-content {
    background-color: transparent;
  }
  .vector-pinned-container .vector-pinnable-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    padding: 0 0 10px;
  }
  .vector-pinned-container .vector-pinnable-header-label { min-width: 0; }
  .vector-pinned-container .vector-pinnable-header-toggle-button { flex-shrink: 0; }
  .vector-main-menu .mw-list-item a,
  .vector-page-tools .mw-list-item a,
  .vector-toc .vector-toc-link {
    border-radius: 5px;
    padding: 6px 8px;
    line-height: 1.4;
  }
  .vector-main-menu .mw-list-item a:hover,
  .vector-page-tools .mw-list-item a:hover,
  .vector-toc .vector-toc-link:hover,
  .vector-toc .vector-toc-list-item-active > .vector-toc-link {
    background-color: var(--bc-selected);
    color: var(--bc-text);
    text-decoration: none;
  }
  .vector-main-menu .mw-list-item a,
  .vector-page-tools .mw-list-item a { display: block; }
  .vector-pinnable-header-label { font-weight: 600; }
  .vector-page-titlebar { padding: 10px 0 12px; }
  .mw-body h1 { letter-spacing: -.6px; }
  .mw-body h2 { padding-bottom: .35em; font-weight: 600; }
  .mw-body h3 { font-weight: 600; }
  /* The heading wrapper owns vertical spacing in modern MediaWiki. */
  .mw-body .mw-heading h2, .mw-body .mw-heading h3 { margin-block: 0; }
  .mw-body .mw-parser-output > .mw-heading:first-child { margin-block-start: 0; }
  .vector-body .mw-parser-output > :first-child { margin-top: 0; }
  .vector-body .mw-parser-output > .mw-heading:first-child h2 { margin-top: 0; }
  .vector-sticky-header-context-bar,
  .vector-sticky-header-context-bar-primary { font-family: var(--bc-font); }
  .mw-editsection { font-size: 12px; font-weight: 400; }
  .vector-page-toolbar { margin-bottom: 18px; }
  .vector-dropdown-content { border: 1px solid var(--bc-border); border-radius: 8px; }
  .vector-dropdown-content .vector-menu-content { border-radius: 8px; }

  body .cdx-button:not(.cdx-button--action-progressive):not(.cdx-button--action-destructive) {
    color: var(--bc-text);
  }
  body .cdx-button--weight-normal:not(.cdx-button--action-progressive),
  body .cdx-search-input__end-button {
    background-color: var(--bc-raised);
    border-color: var(--bc-border);
  }
  .mw-ui-button, .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {
    border-radius: 6px;
  }
  .mw-ui-progressive, .oo-ui-flaggedElement-progressive.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {
    background-color: var(--bc-primary);
    border-color: var(--bc-primary);
    color: #fff;
  }
  .wikitable { font-size: .95em; }
  .wikitable th, .wikitable td { padding: .65em .85em; }
  .wikitable > tbody > tr:nth-child(even) > td { background-color: var(--bc-surface); }
  .wikitable > tbody > tr:hover > td { background-color: var(--bc-selected); }
  figure[typeof~="mw:File/Thumb"], .mw-parser-output .thumbinner {
    box-sizing: border-box;
    max-width: 100%;
    border-radius: 8px;
    overflow: hidden;
  }
  figure[typeof~="mw:File/Thumb"] > figcaption { padding: 12px 16px; color: var(--bc-muted); }
  .catlinks { padding: 12px 16px; border-radius: 6px; margin-top: 24px; }
  .mw-footer { color: var(--bc-muted); }
  .mw-footer li { line-height: 1.6; }
  body.page-Main_Page .mw-parser-output > p:first-of-type {
    background-color: var(--bc-selected);
    border: 1px solid var(--bc-border);
    border-left: 4px solid var(--bc-link);
    border-radius: 8px;
    padding: 16px 20px;
    line-height: 1.7;
  }

  .mw-body h1, .mw-body h2, .mw-body h3,
  .vector-pinnable-header-label, .vector-menu-heading {
    color: var(--bc-text);
    font-family: inherit;
  }

  .mw-body h1 { font-weight: 700; }
  .mw-body h2 { border-color: var(--bc-border); }
  .vector-page-titlebar, .vector-page-toolbar,
  .vector-pinnable-header, .vector-menu-heading,
  .vector-toc, .catlinks, .mw-footer { border-color: var(--bc-border); }

  a { color: var(--bc-link); }
  a:visited { color: var(--bc-visited); }
  a:hover, a:focus { color: var(--bc-link-hover); }
  a.new, a.new:visited { color: #ff9aac; }
  .vector-menu-tabs .selected a,
  .vector-toc .vector-toc-list-item-active > .vector-toc-link {
    color: var(--bc-text);
    border-color: var(--bc-link);
  }

  .vector-dropdown-content, .vector-menu-content,
  .vector-pinnable-element, .vector-search-box .cdx-menu {
    color: var(--bc-text);
    background-color: var(--bc-page);
  }
  .vector-dropdown-content { background-color: var(--bc-surface); }
  .vector-dropdown-content .vector-pinnable-element,
  .vector-dropdown-content .vector-menu-content {
    background-color: transparent;
  }
  .vector-pinnable-header-toggle-button,
  .vector-appearance-pinnable-header .cdx-button {
    color: var(--bc-muted);
    background-color: var(--bc-raised);
  }

  .wikitable, .catlinks, .toc, pre,
  .mw-parser-output code, .mw-parser-output .mw-code,
  .mw-parser-output .thumbinner, .mw-parser-output .thumbcaption,
  figure[typeof~="mw:File/Thumb"], figure[typeof~="mw:File/Frame"] {
    background-color: var(--bc-raised);
    color: var(--bc-text);
    border-color: var(--bc-border);
  }
  .wikitable > tr > th, .wikitable > * > tr > th {
    background-color: var(--bc-selected);
    color: var(--bc-text);
  }
  .wikitable > tr > th, .wikitable > tr > td,
  .wikitable > * > tr > th, .wikitable > * > tr > td {
    border-color: var(--bc-border);
  }
  .mw-parser-output figure img, .mw-parser-output .thumbimage {
    max-width: 100%;
    height: auto;
  }
  .mw-parser-output { overflow-wrap: break-word; }
  .mw-parser-output pre { box-sizing: border-box; max-width: 100%; overflow-x: auto; }
  .editOptions, #wikiPreview, .mw-editform .editOptions {
    background-color: var(--bc-raised);
    color: var(--bc-text);
    border-color: var(--bc-border);
  }
  textarea, input[type="text"], input[type="search"], select {
    background-color: var(--bc-page);
    color: var(--bc-text);
    border-color: var(--bc-border);
  }
  :focus-visible { outline-color: var(--bc-link); }
  ::selection { background-color: var(--bc-accent); color: #fff; }

  /* Preserve 44px native controls on phones; keep the wordmark accessible. */
  @media (max-width: 480px) {
    body .vector-header { gap: 8px; }
    .mw-logo { gap: 0; }
    .mw-logo strong {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }

  @media (max-width: 719px) {
    .mw-body > .vector-body { border-radius: 0; padding: 16px; }
    .mw-logo strong { font-size: 16px; }
    .mw-logo::before { width: 24px; height: 28px; flex-basis: 24px; }
    .mw-body h1 { font-size: 1.8em; letter-spacing: -.3px; }
    .wikitable th, .wikitable td { padding: .5em .6em; }
    .mw-parser-output figure[typeof~="mw:File/Thumb"] {
      float: none;
      margin-inline: auto;
    }
  }
}
Retrieved from "https://wiki.bconomy.net/w/index.php?title=MediaWiki:Common.css&oldid=228"