MediaWiki:Vector-2022.css

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.

/* All CSS here will be loaded for users of the Vector2022 skin */

/*infoboxes */
.infobox {
  color: var(--color-base);
  background-color: transparent;
}

.vector-dropdown-content {
    z-index: 1
}

.infobox-above {
    background-color: transparent !important;
}

/* BACKGROUNDS, GENERAL DESING */

.mw-body h1,
.vector-sticky-header-context-bar-primary {
    font-family: -apple-system,'BlinkMacSystemFont','Segoe UI','Roboto','Inter','Helvetica','Arial',sans-serif;
}

.mw-body-header {
    padding-top: 5px;
    padding-left: 10px;
    backdrop-filter: blur(5px);
    border: 1px solid var(--border-color-base);
}

.mw-body-header::after {height: 0}

.vector-header-container {
    border-bottom: 1px solid var(--border-color-base);
}

/* defined and adjusted in vector-2022.js */
.custom-header-container-overlay {
  width: 100%;
  pointer-events:none;
  backdrop-filter:blur(5px);
}


.vector-sticky-header {
    border-bottom-width: 0px;
}

@media screen and (prefers-color-scheme:dark) {
  html.skin-theme-clientpref-os {
      .mw-body-header,
      .vector-header-container {
            background-color:color-mix(in srgb,var(--background-color-neutral,#eaecf0),transparent 20%)
      }
  }
}

html.skin-theme-clientpref-night {
  .mw-body-header,
  .vector-header-container {
    background-color: color-mix(in srgb,var(--background-color-neutral,#eaecf0),transparent 20%) 
}}

body.skin-vector-2022 .vector-sticky-header-container {background-color:transparent}

/* defined and adjusted in vector-2022.js */
.custom-bg-overlay {
    position: absolute;
    content: "";
    width: 100%;
    background: url(/images/c/c1/Sidebar_repeat.webp);
    transform: scaleX(-1);
    background-repeat: repeat-y;
    background-position: left 1000px;
    pointer-events: none;
}

body.skin-vector-2022 {
    --background-color-base: transparent;
    --background-color-base-fixed: transparent;
    --background-color-interactive-subtle: transparent;
    --border-color-subtle: transparent;
    background: url(/images/a/a6/Toprep.webp), url(/images/c/c1/Sidebar_repeat.webp);
    background-repeat: repeat-x, repeat-y;
    background-position: 200px top, 0 150px;
}