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;
}

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


/* images in messageboxes and similar places - fix like minerva does */
#content a > img {
  max-width: 100%;
  height: auto
}

/* 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;
    font-size: 2em;
    h1 {
      text-shadow: 0 0 2px gray
    }
}
.mw-body-header::after {height: 0}

.mw-body-header,
#mw-navigation,
#vector-appearance {
    box-shadow:0 0 1em canvas;
    background-color:color-mix(in srgb,canvas,transparent 50%)
}


.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);
  z-index: -1
}


.vector-sticky-header {
    border-bottom-width: 0px;
}
#uls-settings-block,
.uls-filterinput,
.uls-language-list {
  background-color: transparent
}

.uls-menu,
.uls-filterinput,
.oo-ui-popupWidget-popup,
.vector-dropdown-content,
.vector-popup-notification,
.mw-notification,
.cdx-menu {
  backdrop-filter:blur(5px);
  border: 1px solid var(--border-color-base)
}
.cdx-thumbnail__image {
  border: 1px solid var(--border-color-base) 
}

@media screen and (prefers-color-scheme:dark) {
  html.skin-theme-clientpref-os {
    .vector-header-container,
    .vector-dropdown-content {
            background-color:color-mix(in srgb, canvas, transparent 20%)
    }
    .mw-page-container-inner {
      box-shadow: 0 0 5em canvas;
      background-color: color-mix(in srgb,canvas,transparent 50%)
    }
  }
}

html.skin-theme-clientpref-night {
  .vector-header-container,
  .vector-dropdown-content {
    background-color: color-mix(in srgb, canvas, transparent 20%)
  }
  .mw-page-container-inner {
    box-shadow: 0 0 5em canvas;
    background-color: color-mix(in srgb,canvas,transparent 50%)
  }
}


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
}