MediaWiki:Vector-2022.css: Difference between revisions

Latest revision as of 16:50, 15 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;
}


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

/* images frames removal for printing */
figure[typeof~='mw:File/Thumb'] :not(figcaption) > .mw-file-element {
  border: 0px
}

/* 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-menu,
.uls-search,
.uls-filterinput,
.uls-language-list {
  background-color: transparent
}




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

.cdx-button:enabled.cdx-button--weight-quiet:hover,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet:hover {
  mix-blend-mode: initial;
}
.grid.uls-menu.uls-wide {
  border:1px solid var(--border-color-base);
  h3 {
     color: var(--color-base);
  }
}
.uls-language-block > ul > li > a {
  color: var(--color-progressive);
}
.uls-language-block > ul > li:hover {
  background: none;
  a {
    text-decoration: underline;
  }
}

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