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 */
-:root {
---background-color-neutral-subtle: #4ACB;
+.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)
 }
-.mw-page-container::before {
-     content: "";
+/* defined and adjusted in vector-2022.js */
-    background: url(/images/c/c1/Sidebar_repeat.webp);
+.custom-header-container-overlay {
-    transform: scaleX(-1);
+  width: 100%;
-    background-repeat: repeat-y;
+  pointer-events:none;
-    background-position: left 1000px;
+  backdrop-filter:blur(5px);
-     position: absolute;
+  z-index: -1
-     top: 0px;
+}
-     left: 0px;
-     width: 100vw;
-     height: 100%;
+.vector-sticky-header {
-     pointer-events: none;
+     border-bottom-width: 0px;
-     z-index: -2;
+}
+#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%)
+  }
 }
-.mw-page-container::after {
+body.skin-vector-2022 .vector-sticky-header-container {background-color:transparent}
+/* defined and adjusted in vector-2022.js */
+.custom-bg-overlay {
+    position: absolute;
      content: "";
-     background-color #fff3;
+    width: 100%;
+     background: url(/images/c/c1/Sidebar_repeat.webp);
      transform: scaleX(-1);
      background-repeat: repeat-y;
      background-position: left 1000px;
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    width: 100vw;
-    height: 100%;
      pointer-events: none;
-     z-index: -1;
+     z-index: -1
 }
 body.skin-vector-2022 {
-     background: url(/images/a/a6/Toprep.webp), url(/images/c/c1/Sidebar_repeat.webp), black;
+    --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
 }