MediaWiki:Vector-2022.css: Difference between revisions

← Older edit

@@ Line 48: / Line 48: @@
 .mw-logo-wordmark {
-color: white;
 }
 .vector-menu-content-list span {
-color: white;
 }
 .vector-icon.mw-ui-icon-menu.mw-ui-icon-wikimedia-menu {
-background-color: white !important;
+background-color: rgb(68, 71, 70) !important;
 }
 .vector-icon.mw-ui-icon-userAvatar.mw-ui-icon-wikimedia-userAvatar {
-background-color: white !important;
+background-color: rgb(68, 71, 70)!important;
 }
 .vector-icon.mw-ui-icon-watchlist.mw-ui-icon-wikimedia-watchlist {
-background-color: white !important;
+background-color: rgb(68, 71, 70)!important;
 }
 .vector-dropdown-label-text span {
-color: white !important;
 }
 #vector-user-links-dropdown-label::after {
-  color: white !important;
-  filter: brightness(10);
 }
 .vector-header-container {
 width: 100%;
-background-color: #181818;
+background-color: #F8FAFD;
 }
 .vector-header.mw-header {
-background-color: #181818;
+background-color: #F8FAFD;
 }
@@ Line 98: / Line 96: @@
-/* ===== 4. Search field styling (rounded pill look) ===== */
-.vector-header-end .cdx-text-input,
-#vector-sticky-header .cdx-text-input {
-    border-radius: 14px !important;
-     border: 0px solid white !important;
-    box-shadow: none !important;
+/* Keep the wrapper shape the same in all states */
-    background-color: #fff;
+.vector-search-box .cdx-text-input {
+  border: 0;
+  border-radius: 25px !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  transition: none !important;
+}
+/* On focus, don't change size; (optional) keep same border color to avoid flicker */
+.vector-search-box .cdx-text-input:focus-within {
+  border: 0;
+  box-shadow: none !important;
 }
-.vector-header-end .cdx-text-input__input,
-#vector-sticky-header .cdx-text-input__input {
+/* Actual input: fixed height/bg/radius, no border */
-    border-radius: 14px !important;
+.vector-search-box .cdx-text-input__input,
-    border: 0 !important;
+#searchInput {
+  height: 42px !important;
+  background-color: #E9EEF6 !important;
+  border: 0;
+  border-radius: 25px !important;
+  box-shadow: none !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: 7px;
+  gap: 7px;
+}
+.vector-header-end .cdx-text-input:focus-within,
+#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;
 }
-.cdx-button.cdx-search-input__end-button{
-  border-radius: 14px !important;
+.cdx-button.cdx-search-input__end-button {
-   border: 0px solid white !important;
+border-radius: 25px !important;
+background-color: rgb(194, 231, 255);
+border: 0;
+color: rgb(0, 29, 53);
+letter-spacing: 0.5px;
 }
@@ Line 134: / Line 173: @@
 h6 {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
-color: white;
 }