MediaWiki:Vector-2022.css: Difference between revisions

← Older edit

@@ Line 1: / Line 1: @@
-* All CSS here will be loaded for users of the Vector2022 skin */
+/* 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-content-ltr figure {
+.mw-body h1,
-     border-width: 0px;
+.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 {
-    backdrop-filter: blur(5px);
+     border-bottom: 1px solid var(--border-color-base)
-     border-bottom: 1px solid var(--background-color-interactive);
 }
+/* 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 {
@@ Line 17: / Line 66: @@
 }
+#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;
@@ Line 26: / Line 149: @@
      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;
+     background-position: 200px top, 0 150px
 }