Jump to content

MediaWiki:Vector-2022.css: Difference between revisions

From Megabonk Wiki
← Older edit
mNo edit summary
fixes
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
:root{
/* MediaWiki:Vector-2022.css
  --mb-card-bg: rgba(12,16,28,.92);
  Vector-specific overrides only.
  --mb-card-border: rgba(255,255,255,.08);
  Main theme variables/layout live in MediaWiki:Common.css.
  --mb-card-blur: 8px;
*/
  --mb-card-radius: 12px;
  --mb-card-shadow: 0 14px 36px rgba(0,0,0,.35);
  --mb-side-bg: var(--mb-card-bg);
  --mb-side-border: var(--mb-card-border);
  --mb-side-blur: var(--mb-card-blur);
  --mb-side-radius: 14px;
  --mb-side-shadow: 0 12px 28px rgba(0,0,0,.35);
  --mb-side-heading: #ffd47f;
  --mb-overlay-bg: rgba(14,18,30,.92);
  --mb-overlay-border: rgba(255,255,255,.10);
  --mb-text: #e9edf4;
  --mb-text-weak: #c8ced8;
  --mb-pill-hover: rgba(255,255,255,.10);
}


/* Keep Vector layout containers transparent over the Megabonk background. */
.skin-vector-2022 .mw-content-container,
.skin-vector-2022 .mw-content-container,
.skin-vector-2022 .vector-main-content{background:transparent!important;border:0!important}
.skin-vector-2022 .vector-main-content,
 
.skin-vector-2022 .mw-body{
  background:var(--mb-card-bg);
  border:1px solid var(--mb-card-border);
  border-radius:var(--mb-card-radius);
  box-shadow:var(--mb-card-shadow);
  padding:20px;
  backdrop-filter:blur(var(--mb-card-blur)) saturate(115%);
  -webkit-backdrop-filter:blur(var(--mb-card-blur)) saturate(115%);
  color:var(--mb-text);
  will-change:backdrop-filter;
  background-clip:padding-box;
}
 
.skin-vector-2022 .vector-header,
.skin-vector-2022 .vector-header,
.skin-vector-2022 .vector-sticky-header,
.skin-vector-2022 .vector-sticky-header,
Line 41: Line 14:
.skin-vector-2022 .mw-page-container,
.skin-vector-2022 .mw-page-container,
.skin-vector-2022 .vector-tabs,
.skin-vector-2022 .vector-tabs,
.skin-vector-2022 .vector-tabs .vector-tab-link{background:transparent!important;border:0!important;box-shadow:none!important}
.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 a,
.skin-vector-2022 #mw-panel a{color:var(--mb-text);text-shadow:0 1px 2px rgba(0,0,0,.35)}
.skin-vector-2022 .vector-header strong {
.skin-vector-2022 #mw-panel a:hover{color:#fff}
  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-pinned-container,
.skin-vector-2022 #mw-panel #vector-main-menu,
.skin-vector-2022 #mw-panel #vector-main-menu,
Line 57: Line 89:
.skin-vector-2022 #mw-panel .vector-menu-portal,
.skin-vector-2022 #mw-panel .vector-menu-portal,
.skin-vector-2022 #mw-panel .vector-menu-content,
.skin-vector-2022 #mw-panel .vector-menu-content,
.skin-vector-2022 #mw-panel .vector-menu-content-list{background:transparent!important;border:0!important;box-shadow:none!important}
.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;
}


.skin-vector-2022 #mw-panel{
/* Menu headings. */
  background:var(--mb-side-bg)!important;
.skin-vector-2022 #mw-panel .vector-menu-heading,
  border:1px solid var(--mb-side-border)!important;
.skin-vector-2022 #vector-page-tools .vector-menu-heading,
   border-radius:var(--mb-side-radius)!important;
.skin-vector-2022 .vector-toc .vector-toc-heading {
   box-shadow:var(--mb-side-shadow)!important;
  color: #ffd47f !important;
   padding:12px!important;
   font-weight: 700;
   margin:8px 10px!important;
  text-transform: uppercase;
   overflow:hidden!important;
   font-size: .85rem;
   will-change:backdrop-filter;
   letter-spacing: .02em;
  backdrop-filter:blur(var(--mb-side-blur)) saturate(115%)!important;
   margin: 6px 6px 8px !important;
   -webkit-backdrop-filter:blur(var(--mb-side-blur)) saturate(115%)!important;
   padding: 6px 8px !important;
   color:var(--mb-text);
   border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
   border-radius: 8px !important;
   background: rgba(255, 255, 255, .05) !important;
}
}


.skin-vector-2022 #mw-panel .vector-menu-heading{
/* Menu links. */
  color:var(--mb-side-heading)!important;
.skin-vector-2022 #mw-panel a,
  font-weight:700;
.skin-vector-2022 #vector-page-tools a,
  text-transform:uppercase;
.skin-vector-2022 .vector-toc a {
  font-size:.85rem;
   color: #c8ced8 !important;
  letter-spacing:.02em;
   text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
   margin:6px 6px 8px!important;
   padding:6px 8px!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.04)!important;
}
}


.skin-vector-2022 #mw-panel .vector-menu-content-list .mw-list-item{margin:3px 4px!important}
.skin-vector-2022 #mw-panel a:hover,
.skin-vector-2022 #mw-panel .vector-menu-content-list .mw-list-item>a{
.skin-vector-2022 #mw-panel a:focus,
  display:block;
.skin-vector-2022 #vector-page-tools a:hover,
  padding:8px 10px!important;
.skin-vector-2022 #vector-page-tools a:focus,
  border-radius:8px!important;
.skin-vector-2022 .vector-toc a:hover,
   color:var(--mb-text)!important;
.skin-vector-2022 .vector-toc a:focus {
  text-decoration:none!important;
   color: #fff !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 #mw-panel .vector-menu-content-list .mw-list-item,
   background:var(--mb-pill-hover)!important;
.skin-vector-2022 #vector-page-tools .vector-menu-content-list .mw-list-item {
  color:#fff!important;
   margin: 3px 4px !important;
  outline:0;
}
}


@media (max-width:1000px){
.skin-vector-2022 #mw-panel .vector-menu-content-list .mw-list-item > a,
  .skin-vector-2022 #mw-panel{
.skin-vector-2022 #vector-page-tools .vector-menu-content-list .mw-list-item > a {
    backdrop-filter:blur(6px) saturate(110%)!important;
  display: block;
    -webkit-backdrop-filter:blur(6px) saturate(110%)!important;
  padding: 8px 10px !important;
   }
  border-radius: 8px !important;
  color: #e9edf4 !important;
   text-decoration: none !important;
}
}


.skin-vector-2022 .vector-toc,
.skin-vector-2022 #mw-panel .vector-menu-content-list .mw-list-item > a:hover,
.skin-vector-2022 .vector-page-tools,
.skin-vector-2022 #mw-panel .vector-menu-content-list .mw-list-item > a:focus,
.skin-vector-2022 .vector-page-tools .vector-pinnable-element{
.skin-vector-2022 #vector-page-tools .vector-menu-content-list .mw-list-item > a:hover,
  background:var(--mb-side-bg)!important;
.skin-vector-2022 #vector-page-tools .vector-menu-content-list .mw-list-item > a:focus {
  border:1px solid var(--mb-side-border)!important;
   background: rgba(255, 255, 255, .10) !important;
  border-radius:10px!important;
   color: #fff !important;
  box-shadow:var(--mb-side-shadow)!important;
   outline: 0;
   backdrop-filter:blur(var(--mb-side-blur)) saturate(115%)!important;
   -webkit-backdrop-filter:blur(var(--mb-side-blur)) saturate(115%)!important;
   color:var(--mb-text);
}
}


.skin-vector-2022 .vector-toc .vector-toc-heading{color:var(--mb-side-heading);border-bottom:1px solid rgba(255,255,255,.08)}
/* Table of contents cleanup. */
.skin-vector-2022 .vector-toc a{color:var(--mb-text-weak)}
.skin-vector-2022 .mw-table-of-contents-container,
.skin-vector-2022 .vector-toc a:hover{color:#fff}
.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 #vector-page-tools .vector-pinnable-header,
.skin-vector-2022 #mw-panel-toc {
.skin-vector-2022 #vector-page-tools .vector-menu,
  margin: 8px 10px !important;
.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}


.skin-vector-2022 #vector-page-tools{
.skin-vector-2022 #vector-toc {
   background:var(--mb-card-bg)!important;
   width: 100% !important;
   border:1px solid var(--mb-card-border)!important;
   box-sizing: border-box !important;
  border-radius:var(--mb-card-radius)!important;
   margin: 0 !important;
  box-shadow:var(--mb-card-shadow)!important;
  padding:12px!important;
   margin:8px 0!important;
  overflow: visible !important;
  will-change:backdrop-filter;
  backdrop-filter:blur(var(--mb-card-blur)) saturate(115%)!important;
  -webkit-backdrop-filter:blur(var(--mb-card-blur)) saturate(115%)!important;
  color:var(--mb-text);
}
}


.skin-vector-2022 #vector-page-tools .vector-menu-heading{
.skin-vector-2022 .vector-toc {
  color:var(--mb-side-heading)!important;
   margin-bottom: 0 !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,.08)!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.04)!important;
}
}


.skin-vector-2022 #vector-page-tools .vector-menu-content-list .mw-list-item{margin:3px 4px!important}
/* Search input. */
.skin-vector-2022 #vector-page-tools .vector-menu-content-list .mw-list-item>a{
.skin-vector-2022 .vector-search-box-input {
   display:block;
   background: rgba(255, 255, 255, .08) !important;
   padding:8px 10px!important;
   color: #e9edf4 !important;
   border-radius:8px!important;
   border-color: rgba(255, 255, 255, .18) !important;
  color:var(--mb-text)!important;
  text-decoration:none!important;
}
.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:var(--mb-pill-hover)!important;
  color:#fff!important;
  outline:0;
}
}


@media (max-width:1000px){
.skin-vector-2022 .vector-search-box-input:focus {
  .skin-vector-2022 #vector-page-tools{
  border-color: rgba(255, 255, 255, .34) !important;
    backdrop-filter:blur(6px) saturate(110%)!important;
  outline: none;
    -webkit-backdrop-filter:blur(6px) saturate(110%)!important;
  }
}
}


.skin-vector-2022 .vector-search-box-input{background:rgba(255,255,255,.06);color:var(--mb-text);border-color:rgba(255,255,255,.12)}
/* Dropdowns, typeahead, OOUI overlays: keep readable without backdrop blur. */
.skin-vector-2022 .vector-search-box-input:focus{border-color:rgba(255,255,255,.30);outline:none}
 
.cdx-menu,
.cdx-menu,
.cdx-menu__listbox,
.cdx-menu__listbox,
.cdx-typeahead-search__menu{
.cdx-typeahead-search__menu,
  background:var(--mb-overlay-bg)!important;
  border:1px solid var(--mb-overlay-border)!important;
  color:var(--mb-text);
  backdrop-filter:blur(6px) saturate(115%);
  -webkit-backdrop-filter:blur(6px) saturate(115%);
}
 
.oo-ui-window-frame,
.oo-ui-window-frame,
.oo-ui-menuSelectWidget,
.oo-ui-menuSelectWidget,
.oo-ui-menuSelectWidget-popup,
.oo-ui-menuSelectWidget-popup,
.oo-ui-popupWidget,
.oo-ui-popupWidget,
.mw-echo-ui-notificationsOverlayWidget{
.mw-echo-ui-notificationsOverlayWidget {
   background:var(--mb-overlay-bg)!important;
   background: rgba(14, 18, 30, .96) !important;
   border:1px solid var(--mb-overlay-border)!important;
   border: 1px solid rgba(255, 255, 255, .12) !important;
   color:var(--mb-text)!important;
   color: #e9edf4 !important;
   backdrop-filter:blur(6px) saturate(115%);
  -webkit-backdrop-filter: none !important;
   -webkit-backdrop-filter:blur(6px) saturate(115%);
   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}
.oo-ui-menuSelectWidget .oo-ui-optionWidget.oo-ui-optionWidget-highlighted {
  background: rgba(255, 255, 255, .08) !important;
}


.skin-vector-2022 .vector-page-titlebar .vector-page-titlebar-toc,
/* Wiki tables inside Vector pages. */
.skin-vector-2022 .mw-body .vector-body-before-content{background:transparent!important;border:0!important}
.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;
}


.wikitable th,.wikitable td{border-color:rgba(255,255,255,.10)}
/* Respect reduced motion. */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}


@media (prefers-reduced-transparency:reduce){
/* Mobile/tablet: simpler, flatter panels. */
  .skin-vector-2022 .mw-body,
@media (max-width: 1000px) {
   .skin-vector-2022 #mw-panel,
   .skin-vector-2022 #mw-panel,
  .skin-vector-2022 #vector-page-tools,
   .skin-vector-2022 .vector-toc,
   .skin-vector-2022 .vector-toc,
   .skin-vector-2022 .vector-page-tools,
   .skin-vector-2022 .mw-body {
  .cdx-menu,.cdx-menu__listbox,.cdx-typeahead-search__menu,
     -webkit-backdrop-filter: none !important;
  .oo-ui-window-frame,.oo-ui-menuSelectWidget,.oo-ui-menuSelectWidget-popup,
     backdrop-filter: none !important;
  .oo-ui-popupWidget,.mw-echo-ui-notificationsOverlayWidget{
     will-change: auto !important;
     backdrop-filter:none!important;
     -webkit-backdrop-filter:none!important;
     background:rgba(12,16,28,.96)!important;
   }
   }
}
}


@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!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-logo-icon {
  .skin-vector-2022 .mw-page-container-inner,
   width: 120px !important;
   .skin-vector-2022 .mw-content-container {
  height: auto !important;
    margin: 0 !important;
}
    padding: 0 !important;
 
  }
.skin-vector-2022 .vector-toc{
  box-shadow: none !important;
  margin-bottom: 0 !important;
}
}

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;
  }
}
Retrieved from "https://megabonk.wiki/index.php?title=MediaWiki:Vector-2022.css&oldid=2324"