MediaWiki:Vector-2022.css: Difference between revisions

Revision as of 16:10, 8 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 {
    backdrop-filter: blur(5px);
    border-bottom: 1px solid var(--border-color-base);
}

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

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