MediaWiki:Vector-2022.css: Difference between revisions

Latest revision as of 13:47, 2 October 2025

:root{
  --mb-card-bg: rgba(12,16,28,.92);
  --mb-card-border: rgba(255,255,255,.08);
  --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);
}

.skin-vector-2022 .mw-content-container,
.skin-vector-2022 .vector-main-content{background:transparent!important;border:0!important}

.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-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{background:transparent!important;border:0!important;box-shadow:none!important}

.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 #mw-panel a:hover{color:#fff}

.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{background:transparent!important;border:0!important;box-shadow:none!important}

.skin-vector-2022 #mw-panel{
  background:var(--mb-side-bg)!important;
  border:1px solid var(--mb-side-border)!important;
  border-radius:var(--mb-side-radius)!important;
  box-shadow:var(--mb-side-shadow)!important;
  padding:12px!important;
  margin:8px 10px!important;
  overflow:hidden!important;
  will-change:backdrop-filter;
  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 #mw-panel .vector-menu-heading{
  color:var(--mb-side-heading)!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 #mw-panel .vector-menu-content-list .mw-list-item{margin:3px 4px!important}
.skin-vector-2022 #mw-panel .vector-menu-content-list .mw-list-item>a{
  display:block;
  padding:8px 10px!important;
  border-radius:8px!important;
  color:var(--mb-text)!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{
  background:var(--mb-pill-hover)!important;
  color:#fff!important;
  outline:0;
}

@media (max-width:1000px){
  .skin-vector-2022 #mw-panel{
    backdrop-filter:blur(6px) saturate(110%)!important;
    -webkit-backdrop-filter:blur(6px) saturate(110%)!important;
  }
}

.skin-vector-2022 .vector-toc,
.skin-vector-2022 .vector-page-tools,
.skin-vector-2022 .vector-page-tools .vector-pinnable-element{
  background:var(--mb-side-bg)!important;
  border:1px solid var(--mb-side-border)!important;
  border-radius:10px!important;
  box-shadow:var(--mb-side-shadow)!important;
  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)}
.skin-vector-2022 .vector-toc a{color:var(--mb-text-weak)}
.skin-vector-2022 .vector-toc a:hover{color:#fff}

.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 #vector-page-tools{
  background:var(--mb-card-bg)!important;
  border:1px solid var(--mb-card-border)!important;
  border-radius:var(--mb-card-radius)!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{
  color:var(--mb-side-heading)!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}
.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: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-page-tools{
    backdrop-filter:blur(6px) saturate(110%)!important;
    -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)}
.skin-vector-2022 .vector-search-box-input:focus{border-color:rgba(255,255,255,.30);outline:none}

.cdx-menu,
.cdx-menu__listbox,
.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-menuSelectWidget,
.oo-ui-menuSelectWidget-popup,
.oo-ui-popupWidget,
.mw-echo-ui-notificationsOverlayWidget{
  background:var(--mb-overlay-bg)!important;
  border:1px solid var(--mb-overlay-border)!important;
  color:var(--mb-text)!important;
  backdrop-filter:blur(6px) saturate(115%);
  -webkit-backdrop-filter:blur(6px) saturate(115%);
}

.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,
.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,.10)}

@media (prefers-reduced-transparency:reduce){
  .skin-vector-2022 .mw-body,
  .skin-vector-2022 #mw-panel,
  .skin-vector-2022 .vector-toc,
  .skin-vector-2022 .vector-page-tools,
  .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{
    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}}

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

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