MediaWiki:Vector-2022.css: Difference between revisions

Revision as of 05:17, 9 November 2025

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

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


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

.vector-dropdown-content {
  backdrop-filter:blur(5px);
  border: 1px solid var(--border-color-base)
}

@media screen and (prefers-color-scheme:dark) {
  html.skin-theme-clientpref-os {
    .mw-body-header,
    .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 {
  .mw-body-header,
  .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
}