MediaWiki:Vector-2022.css: Difference between revisions

← Older edit

@@ Line 96: / Line 96: @@
-/* ===== 4. Search field styling (rounded pill look) ===== */
-.vector-header-end .cdx-text-input,
-#vector-sticky-header .cdx-text-input {
-    border-radius: 25px !important;
-    box-shadow: none !important;
-}
-/* 0) Clean duplicates (pick ONE radius). I’m using 25px everywhere. */
+/* Keep the wrapper shape the same in all states */
-.vector-header-end .cdx-text-input,
-#vector-sticky-header .cdx-text-input {
-  border-radius: 25px !important;
-  box-shadow: none !important;
-}
-/* 1) Keep the WRAPPER border width constant so height never pops on focus */
 .vector-search-box .cdx-text-input {
-   border: 1px solid #c5d0e3 !important;  /* constant width */
+   border: 0;
    border-radius: 25px !important;
    background: transparent !important;
@@ Line 124: / Line 110: @@
 }
-/* On hover/focus-within, keep the same dimensions (optional: tint border) */
+/* On focus, don't change size; (optional) keep same border color to avoid flicker */
-.vector-search-box .cdx-text-input:hover,
 .vector-search-box .cdx-text-input:focus-within {
-   border: 1px solid #7aa2ff !important;  /* or #c5d0e3 if you want zero change */
+   border: 0;
-  border-radius: 25px !important;
-  background: transparent !important;
    box-shadow: none !important;
-  transition: none !important;
 }
-/* 2) The ACTUAL input element (your #searchInput is here in the header) */
+/* Actual input: fixed height/bg/radius, no border */
 .vector-search-box .cdx-text-input__input,
 #searchInput {
-  box-sizing: border-box !important;
    height: 42px !important;
-  line-height: 42px !important;
+   background-color: #E9EEF6 !important;
-  padding: 0 14px !important;
+   border: 0;
-   background-color: #E9EEF6 !important;   /* stop white flash */
-  color: #1f1f1f !important;
-   border: 0 !important;                    /* border lives on wrapper */
    border-radius: 25px !important;
-  outline: none !important;
    box-shadow: none !important;
-  transition: none !important;
 }
-/* Keep the same bg/shape when hovered/focused */
-.vector-search-box .cdx-text-input:hover .cdx-text-input__input,
-.vector-search-box .cdx-text-input:focus-within .cdx-text-input__input,
-.vector-search-box .cdx-text-input__input:focus,
-.vector-search-box .cdx-text-input__input:focus-visible {
-  background-color: #E9EEF6 !important;
-  border-radius: 25px !important;
-  outline: none !important;
-  box-shadow: none !important;
-  transition: none !important;
-}
-/* 3) Make sure the Search button doesn’t force layout changes */
+/* Fix your earlier typo so layout stays stable */
 .cdx-search-input--has-end-button {
    border: 0;
    background: transparent;
-   display: flex;      /* (fixed your typo) */
+   display: flex;                      /* was 'display; flex;' */
    gap: 7px;
 }
-/* Harmonize button height with the input */
+.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 {
-  height: 42px !important;
+border-radius: 25px !important;
-  line-height: 42px !important;
+background-color: rgb(194, 231, 255);
-  padding: 0 14px !important;
+border: 0;
-  border-radius: 12px !important;          /* your style */
+color: rgb(0, 29, 53);
-  background-color: rgb(194, 231, 255) !important;
+letter-spacing: 0.5px;
-  border: 0 !important;
-  color: rgb(0, 29, 53) !important;
-  letter-spacing: 0.5px !important;
-  box-shadow: none !important;
-  transition: none !important;
 }
-/* 4) If there’s a start (magnifier) icon, keep padding stable */
-.cdx-text-input--has-start-icon .cdx-text-input__input {
-  padding-left: 36px !important;
-}