@@ Line 1: / Line 1: @@
 /* Vector 2022 CSS Styling */
-/* ===== 1. Header + footer background ===== */
-.vector-header-container .vector-header,
+.skin-vector-2022 #vector-main-menu-pinned-container {
-.vector-sticky-header-container,
+  display: none !important;
-#vector-sticky-header {
-    background-color: #F8FAFD;
 }
-.vector-header.mw-header {
+/* Remove the pin/unpin buttons so nobody can toggle it */
+.skin-vector-2022 .vector-pinnable-header-pin-button,
+.skin-vector-2022 .vector-pinnable-header-unpin-button {
+  display: none !important;
+}
-border-top-left-radius: 25px !important;
+/* Hide the Appearance trigger (glasses/moon icon + its label) */
-border-top-right-radius: 25px !important;
+.skin-vector-2022 [aria-label="Appearance"],
-padding-top: 25px !important;
+.skin-vector-2022 .vector-appearance,
+.skin-vector-2022 #vector-appearance,
+.skin-vector-2022 .vector-appearance-menu,
+.skin-vector-2022 .vector-dropdown.vector-appearance {
+  display: none !important;
+}
+/* If your site language isn't English, also hide by title text */
+.skin-vector-2022 [title="Appearance"] {
+  display: none !important;
 }
-body {
+/* Never show the sidebar Page tools, and remove pin/unpin UI */
-background-color: white;
+.skin-vector-2022 #vector-page-tools-pinned-container { display: none !important; }
-margin-top: 15px;
+.skin-vector-2022 .vector-pinnable-header-pin-button,
-margin-bottom: 50px important!;
+.skin-vector-2022 .vector-pinnable-header-unpin-button { display: none !important; }
-}
-.mw-content-container {
+html {
-background-color: #F8FAFD;
-padding-bottom: 2.25rem;
-padding-right: 3.25rem;
+background-color:  white;
 }
-.mw-body #bodyContent {
-background-color: white;
-border-radius: 15px;
-margin-top: 19px;
-padding: 15px;
-}
-.vector-pinned-container {
+body {
-border-radius: 7px;
-padding-left:20px;
-padding-right:20px;
-padding-top:17px;
-padding-bottom:17px;
-background-color: #F8FAFD;
-}
-.vector-pinnable-header-toggle-button {
+background-color: white;
-background-color: #C2E7FF;
-}
-.vector-pinnable-header {
-border-bottom: 1px solid #8b8b8b;
 }
-.mw-page-container {
-background-color: #F8FAFD;
-border-bottom-left-radius: 25px !important;
-border-bottom-right-radius: 25px !important;
-margin-bottom: 15px;
-}
-.vector-sitenotice-container {
+.mw-logo-wordmark {
-background-color: #F8FAFD;
 }
-.vector-column-start {
+.vector-menu-content-list span {
-    background-color: #F8FAFD;
-margin-left: 0;
 }
+.vector-icon.mw-ui-icon-menu.mw-ui-icon-wikimedia-menu {
-/* Inner footer containers get the same color so there’s no visible seam */
+background-color: rgb(68, 71, 70) !important;
-.vector-footer-container,
+}
-.mw-footer {
+.vector-icon.mw-ui-icon-userAvatar.mw-ui-icon-wikimedia-userAvatar {
-    background-color: #F8FAFD;
-border-top: 1px solid #35a2c9;
+background-color: rgb(68, 71, 70)!important;
 }
+.vector-icon.mw-ui-icon-watchlist.mw-ui-icon-wikimedia-watchlist {
+background-color: rgb(68, 71, 70)!important;
+}
+.vector-dropdown-label-text span {
-.mw-footer-container {
+}
-padding-left: 3.25rem;
-padding-right: 3.25rem;
+#vector-user-links-dropdown-label::after {
 }
+.vector-header-container {
+width: 100%;
+background-color: #F8FAFD;
+}
-.mw-page-container {
+.vector-header.mw-header {
-padding-left: 0;
+background-color: #F8FAFD;
-padding-right: 0;
-}
-.vector-sticky-pinned-container::after {
-    content: none !important;
-    display: none !important;
-    background: none !important;
-    box-shadow: none !important;
 }
+.mw-page-container {
+}
@@ Line 116: / Line 101: @@
-/* ===== 2. Wordmark / site name next to logo ===== */
+/* Keep the wrapper shape the same in all states */
-.mw-logo-wordmark {
+.vector-search-box .cdx-text-input {
-    color: rgb(77, 77, 80);
+  border: 0;
-    font-size: 1.25rem !important;
+  border-radius: 25px !important;
-    font-weight: 600;
+  background: transparent !important;
-    letter-spacing: 1px;
+  box-shadow: none !important;
-    line-height: 1.2;
+  transition: none !important;
 }
-/* ensure logo never looks faded */
+/* On focus, don't change size; (optional) keep same border color to avoid flicker */
-.mw-logo,
+.vector-search-box .cdx-text-input:focus-within {
-.mw-logo-wordmark,
+  border: 0;
-.vector-sticky-header .mw-logo,
+  box-shadow: none !important;
-.vector-sticky-header .mw-logo-wordmark {
-    opacity: 1 !important;
 }
-/* ===== 3. "Hamburger" / main menu toggle button ===== */
+/* Actual input: fixed height/bg/radius, no border */
-#vector-main-menu-dropdown-label.cdx-button--icon-only {
+.vector-search-box .cdx-text-input__input,
-    background-color: rgb(32, 33, 36) !important;
+#searchInput {
-    color: #fff;
+  height: 42px !important;
-    border-radius: 4px;
+  background-color: #E9EEF6 !important;
-    padding: 4px 6px;
+  border: 0;
-}
+  border-radius: 25px !important;
-#vector-main-menu-dropdown-label .vector-icon {
+  box-shadow: none !important;
-    filter: invert(1);
 }
-/* ===== 4. Search field styling (rounded pill look) ===== */
-.vector-header-end .cdx-text-input,
-#vector-sticky-header .cdx-text-input {
-    border-radius: 14px !important;
-    border: 1px solid #35a2c9 !important;
-    box-shadow: none !important;
-    background-color: #fff;
-}
-.vector-header-end .cdx-text-input__input,
-#vector-sticky-header .cdx-text-input__input {
-    border-radius: 14px !important;
-    border: 0 !important;
-}
+/* Fix your earlier typo so layout stays stable */
 .cdx-search-input--has-end-button {
-border: 0px;
+  border: 0;
-background: transparent;
+  background: transparent;
-display; flex;
+  display: flex;                      /* was 'display; flex;' */
-gap: 3px;
+  gap: 7px;
 }
-.cdx-button.cdx-search-input__end-button{
-  border-radius: 11px !important;
+.vector-header-end .cdx-text-input:focus-within,
-   border: 1px solid #35a2c9 !important;
+#vector-sticky-header .cdx-text-input:focus-within,
+.vector-header-end .cdx-text-input__input:focus,
+#vector-sticky-header .cdx-text-input__input:focus {
+    background-color: #E9EEF6 !important;
+    border: 0 !important;
+    border-radius: 25px !important;
+    box-shadow: none !important;
+    outline: none !important;
+    height: 42px !important;
 }
-/* keep the pill shape consistent everywhere */
+.cdx-button.cdx-search-input__end-button {
-.vector-header-end .cdx-text-input,
+border-radius: 25px !important;
-#vector-sticky-header .cdx-text-input {
+background-color: rgb(194, 231, 255);
-    border-radius: 14px !important;
+border: 0;
+color: rgb(0, 29, 53);
+letter-spacing: 0.5px;
 }
-/* force the inner <input> to match, and remove its own border */
-.vector-header-end .cdx-text-input__input,
-#vector-sticky-header .cdx-text-input__input {
-    border-radius: 14px !important;
-    border: 0 !important;
-    outline: none !important;
-    box-shadow: none !important;
-    background-color: transparent !important; /* don't draw a second layer */
-}
-/* when focused: only draw ONE highlight (outer), not two stacked borders */
-.vector-header-end .cdx-text-input:focus-within,
-#vector-sticky-header .cdx-text-input:focus-within {
-    border-radius: 14px !important;
-    /* pick the color you like for active state */
-    border: 1px solid #2a70d6 !important;
-    /* if you want the "glow", keep box-shadow. if you hate the double edge,
-       you can make it a softer single glow that doesn't create a sharp second ring */
-    box-shadow: 0 0 0 1px rgba(42,112,214,0.15) !important;
-    background-color: rgba(255,255,255,0.9) !important;
-}
-/* also kill any extra outline the <input> itself tries to add on focus */
-.vector-header-end .cdx-text-input__input:focus,
-#vector-sticky-header .cdx-text-input__input:focus {
-    outline: none !important;
-    box-shadow: none !important;
-}
 /* ===== 5. Heading font stack ===== */
@@ Line 217: / Line 173: @@
 h6 {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
-}
-/* ===== 6. Slightly slimmer header bar ===== */
-.vector-header {
-    padding-top: 0.4rem;
-    padding-bottom: 0.4rem;
-}
-#vector-sticky-header {
-    padding-top: 0.4rem;
-    padding-bottom: 0.4rem;
 }

MediaWiki:Vector-2022.css: Difference between revisions