MediaWiki:Vector-2022.css: Difference between revisions

Latest revision as of 12:43, 22 May 2026

/* MediaWiki:Vector-2022.css
   Vector-specific overrides only.
   Main theme variables/layout live in MediaWiki:Common.css.
*/

/* Keep Vector layout containers transparent over the Megabonk background. */
.skin-vector-2022 .mw-content-container,
.skin-vector-2022 .vector-main-content,
.skin-vector-2022 .vector-header,
.skin-vector-2022 .vector-sticky-header,
.skin-vector-2022 .vector-sticky-header .vector-header-container,
.skin-vector-2022 .vector-page-titlebar,
.skin-vector-2022 .mw-workspace-container,
.skin-vector-2022 .mw-page-container,
.skin-vector-2022 .vector-tabs,
.skin-vector-2022 .vector-tabs .vector-tab-link,
.skin-vector-2022 .vector-page-titlebar .vector-page-titlebar-toc,
.skin-vector-2022 .mw-body .vector-body-before-content {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Main article panel: no live backdrop blur. */
.skin-vector-2022 .mw-body {
  background: rgba(12, 16, 28, .94) !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28) !important;
  padding: 20px;
  color: #e9edf4;
  background-clip: padding-box;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  will-change: auto !important;
}

/* Header/logo readability over artwork. */
.skin-vector-2022 .mw-logo-container,
.skin-vector-2022 .mw-logo-wordmark,
.skin-vector-2022 .mw-logo-tagline,
.skin-vector-2022 .vector-header a,
.skin-vector-2022 .vector-header strong {
  color: #f4f6fb !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .65);
}

.skin-vector-2022 .mw-logo-icon {
  width: 120px !important;
  height: auto !important;
}

/* Left menu and page tools: solid translucent panels, not blur panels. */
.skin-vector-2022 #mw-panel,
.skin-vector-2022 #vector-page-tools,
.skin-vector-2022 .vector-toc,
.skin-vector-2022 .vector-page-tools .vector-pinnable-element {
  background: rgba(12, 16, 28, .94) !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .24) !important;
  color: #e9edf4 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  will-change: auto !important;
}

.skin-vector-2022 #mw-panel {
  padding: 12px !important;
  margin: 8px 10px !important;
  overflow: hidden !important;
}

.skin-vector-2022 #vector-page-tools {
  padding: 12px !important;
  margin: 8px 0 !important;
  overflow: visible !important;
}

/* Remove nested Vector panel backgrounds. */
.skin-vector-2022 #mw-panel .vector-pinned-container,
.skin-vector-2022 #mw-panel #vector-main-menu,
.skin-vector-2022 #mw-panel .vector-main-menu,
.skin-vector-2022 #mw-panel .vector-pinnable-element,
.skin-vector-2022 #mw-panel .vector-main-menu-action,
.skin-vector-2022 #mw-panel .vector-main-menu-action-item,
.skin-vector-2022 #mw-panel .vector-main-menu-action-content,
.skin-vector-2022 #mw-panel .vector-menu,
.skin-vector-2022 #mw-panel .vector-menu-portal,
.skin-vector-2022 #mw-panel .vector-menu-content,
.skin-vector-2022 #mw-panel .vector-menu-content-list,
.skin-vector-2022 #vector-page-tools .vector-pinnable-header,
.skin-vector-2022 #vector-page-tools .vector-menu,
.skin-vector-2022 #vector-page-tools .vector-menu-portal,
.skin-vector-2022 #vector-page-tools .vector-menu-content,
.skin-vector-2022 #vector-page-tools .vector-menu-content-list,
.skin-vector-2022 #vector-page-tools .vector-main-menu-action,
.skin-vector-2022 #vector-page-tools .vector-main-menu-action-item,
.skin-vector-2022 #vector-page-tools .vector-main-menu-action-content {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Menu headings. */
.skin-vector-2022 #mw-panel .vector-menu-heading,
.skin-vector-2022 #vector-page-tools .vector-menu-heading,
.skin-vector-2022 .vector-toc .vector-toc-heading {
  color: #ffd47f !important;
  font-weight: 700;
  text-transform: uppercase;
  font-size: .85rem;
  letter-spacing: .02em;
  margin: 6px 6px 8px !important;
  padding: 6px 8px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .05) !important;
}

/* Menu links. */
.skin-vector-2022 #mw-panel a,
.skin-vector-2022 #vector-page-tools a,
.skin-vector-2022 .vector-toc a {
  color: #c8ced8 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

.skin-vector-2022 #mw-panel a:hover,
.skin-vector-2022 #mw-panel a:focus,
.skin-vector-2022 #vector-page-tools a:hover,
.skin-vector-2022 #vector-page-tools a:focus,
.skin-vector-2022 .vector-toc a:hover,
.skin-vector-2022 .vector-toc a:focus {
  color: #fff !important;
}

.skin-vector-2022 #mw-panel .vector-menu-content-list .mw-list-item,
.skin-vector-2022 #vector-page-tools .vector-menu-content-list .mw-list-item {
  margin: 3px 4px !important;
}

.skin-vector-2022 #mw-panel .vector-menu-content-list .mw-list-item > a,
.skin-vector-2022 #vector-page-tools .vector-menu-content-list .mw-list-item > a {
  display: block;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  color: #e9edf4 !important;
  text-decoration: none !important;
}

.skin-vector-2022 #mw-panel .vector-menu-content-list .mw-list-item > a:hover,
.skin-vector-2022 #mw-panel .vector-menu-content-list .mw-list-item > a:focus,
.skin-vector-2022 #vector-page-tools .vector-menu-content-list .mw-list-item > a:hover,
.skin-vector-2022 #vector-page-tools .vector-menu-content-list .mw-list-item > a:focus {
  background: rgba(255, 255, 255, .10) !important;
  color: #fff !important;
  outline: 0;
}

/* Table of contents cleanup. */
.skin-vector-2022 .mw-table-of-contents-container,
.skin-vector-2022 #mw-panel-toc,
.skin-vector-2022 #mw-panel-toc .vector-pinned-container {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.skin-vector-2022 #mw-panel-toc {
  margin: 8px 10px !important;
}

.skin-vector-2022 #vector-toc {
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.skin-vector-2022 .vector-toc {
  margin-bottom: 0 !important;
}

/* Search input. */
.skin-vector-2022 .vector-search-box-input {
  background: rgba(255, 255, 255, .08) !important;
  color: #e9edf4 !important;
  border-color: rgba(255, 255, 255, .18) !important;
}

.skin-vector-2022 .vector-search-box-input:focus {
  border-color: rgba(255, 255, 255, .34) !important;
  outline: none;
}

/* Dropdowns, typeahead, OOUI overlays: keep readable without backdrop blur. */
.cdx-menu,
.cdx-menu__listbox,
.cdx-typeahead-search__menu,
.oo-ui-window-frame,
.oo-ui-menuSelectWidget,
.oo-ui-menuSelectWidget-popup,
.oo-ui-popupWidget,
.mw-echo-ui-notificationsOverlayWidget {
  background: rgba(14, 18, 30, .96) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  color: #e9edf4 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28) !important;
}

.oo-ui-menuSelectWidget .oo-ui-optionWidget.oo-ui-optionWidget-highlighted {
  background: rgba(255, 255, 255, .08) !important;
}

/* Wiki tables inside Vector pages. */
.wikitable th,
.wikitable td {
  border-color: rgba(255, 255, 255, .12) !important;
}

/* Appearance panel should not dominate the page visually. */
.skin-vector-2022 #vector-appearance,
.skin-vector-2022 .vector-appearance-landmark {
  background: rgba(12, 16, 28, .88) !important;
  border-radius: 10px !important;
  color: #e9edf4 !important;
}

.skin-vector-2022 #vector-appearance label,
.skin-vector-2022 #vector-appearance .cdx-label,
.skin-vector-2022 #vector-appearance .vector-menu-heading {
  color: #e9edf4 !important;
}

/* Respect reduced motion. */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* Mobile/tablet: simpler, flatter panels. */
@media (max-width: 1000px) {
  .skin-vector-2022 #mw-panel,
  .skin-vector-2022 #vector-page-tools,
  .skin-vector-2022 .vector-toc,
  .skin-vector-2022 .mw-body {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    will-change: auto !important;
  }
}

@media (max-width: 850px) {
  .skin-vector-2022 .mw-body {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: rgba(12, 16, 28, .96) !important;
    padding: 16px !important;
  }

  .skin-vector-2022 .mw-page-container-inner,
  .skin-vector-2022 .mw-content-container {
    margin: 0 !important;
    padding: 0 !important;
  }
}