MediaWiki:Vector-2022.css: Difference between revisions

Browse history interactively

← Older edit

@@ Line 11: / Line 11: @@
      .skin-invert,
      .notheme {
-         /* Colors */s
+         /* Colors */
          --color-base: #5a4a3c;
          --color-base-fixed: #5a4a3c;
@@ Line 88: / Line 88: @@
          --background-color-tab-list-item-framed--hover: rgba(255,255,255,0.3);
          --background-color-tab-list-item-framed--active: rgba(255,255,255,0.65);
+        --background-color-header: linear-gradient(90deg,rgba(222, 185, 78, 1) 0%, rgba(222, 185, 78, 1) 100%);
          /* Opacity */
          --opacity-icon-base: 0.87;
@@ Line 191: / Line 192: @@
          --background-color-backdrop-light: rgba(0,0,0,0.65);
          --background-color-backdrop-dark: rgba(255,255,255,0.65);
+        --background-color-header: linear-gradient(90deg,rgba(18, 47, 65, 1) 0%, rgba(18, 47, 65, 1) 50%, rgba(18, 23, 53, 1) 51%, rgba(18, 23, 53, 1) 100%);
          /* Border colors */
          --border-color-base: #424663;
@@ Line 268: / Line 270: @@
          --background-color-backdrop-light: rgba(0,0,0,0.65);
          --background-color-backdrop-dark: rgba(255,255,255,0.65);
+        --background-color-header: linear-gradient(90deg,rgba(18, 47, 65, 1) 0%, rgba(18, 47, 65, 1) 50%, rgba(18, 23, 53, 1) 51%, rgba(18, 23, 53, 1) 100%);
          /* Border colors */
          --border-color-base: #424663;
@@ Line 292: / Line 295: @@
   | PAGE CONTAINER |
   *================*/
-.mw-header {
-    margin-top: 0.5rem;
-    background-color: transparent !important;
-}
 .mw-page-container {
      border-radius: 40px;
      margin-top: 0.5rem;
-}
-@media screen and (min-width: 1680px) {
-    .vector-feature-limited-width-clientpref-0,
-    .vector-sticky-header  {
-        margin-left: 2rem;
-        margin-right: 2rem;
-    }
-}
-@media screen and (max-width: 1680px) {
-    .mw-page-container,
-    .vector-sticky-header {
-        margin-left: 1.5rem;
-        margin-right: 1.5rem;
-    }
 }
@@ Line 365: / Line 347: @@
   | HEADER |
   *========*/
+ .mw-header {
+    margin-top: 0 !important;
+    grid-template: auto / 17rem minmax(0,1fr);
+    grid-template-areas: 'headerStart headerEnd';
+}
+.mw-header,
+.vector-header-container .mw-header,
+.vector-header-container .vector-sticky-header {
+    background: var(--background-image);
+    background-origin: border-box;
+    background-position: 100% 2%;
+    background-size: cover;
+}
+.vector-header-container {
+    background: var(--background-color-header);
+}
+.vector-header-container .vector-sticky-header {
+    border: 0;
+}
+.vector-sticky-header-context-bar {
+    border-color: var(--color-base);
+}
+@media screen and (max-width: 750px) {
+    .vector-header-start,
+    .vector-header-end {
+        width: 100%;
+    }
+    .vector-header {
+        flex-flow: column;
+    }
+}
+/*=================*
+ | HEADER CONTENTS |
+ *=================*/
 /* Search bar */
-#p-search {
+@media screen and (min-width: 1120px) {
-    display: flex;
+    #p-search {
-    justify-content: center;
+        display: flex;
-    align-items: center;
+        justify-content: center;
+        align-items: center
+    }
 }
@@ Line 425: / Line 449: @@
              border-color: var(--color-progressive);
          }
+    }
+}
+@media screen and (max-width: 850px) {
+    #ca-uls {
+        display: none;
      }
 }
@@ Line 462: / Line 492: @@
          border-color: var(--color-progressive);
      }
-}
-/*===============*
- | STICKY HEADER |
- *===============*/
-.vector-header-container .vector-sticky-header {
-    background-color: var(--background-color-3);
-    border: 0;
-}
-.vector-sticky-header-context-bar {
-    border-color: var(--color-base);
 }
@@ Line 627: / Line 645: @@
          background-color: var(--color-accent) !important;
          color: var(--color-accent-text) !important;
+    }
+}
+#left-navigation {
+    min-width: 186px;
+}
+@media screen and (max-width: 685px) {
+    #ca-history {
+        display: none;
      }
 }