MediaWiki:Vector-2022.css: Difference between revisions

← Older edit Newer 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;
-}
+/* Keep the wrapper shape the same in all states */
-/* 0) Clean duplicates (pick ONE radius). I’m using 25px everywhere. */
-.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: 1px solid #c5d0e3 !important; /* constant width -> no height pop */
    border-radius: 25px !important;
    background: transparent !important;
@@ Line 124: / Line 108: @@
 }
-/* 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-color: #c5d0e3 !important;  /* or your accent if you want */
-  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 {
@@ Line 140: / Line 120: @@
    height: 42px !important;
    line-height: 42px !important;
-   padding: 0 14px !important;
+   padding: 0 14px !important;         /* right padding */
-   background-color: #E9EEF6 !important;   /* stop white flash */
+   background-color: #E9EEF6 !important;
    color: #1f1f1f !important;
-   border: 0 !important;                    /* border lives on wrapper */
+   border: 0 !important;
    border-radius: 25px !important;
    outline: none !important;
@@ Line 150: / Line 130: @@
 }
-/* Keep the same bg/shape when hovered/focused */
+/* Reserve icon space ALWAYS (before and during focus) */
-.vector-search-box .cdx-text-input:hover .cdx-text-input__input,
+.vector-search-box .cdx-text-input--has-start-icon .cdx-text-input__input,
-.vector-search-box .cdx-text-input:focus-within .cdx-text-input__input,
+.vector-search-box .cdx-text-input:focus-within .cdx-text-input__input {
-.vector-search-box .cdx-text-input__input:focus,
+  padding-left: 38px !important;      /* 20px icon + gap; tweak if needed */
-.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 */
+/* Prevent Codex from changing look on focus */
-.cdx-button.cdx-search-input__end-button {
+.vector-header-end .cdx-text-input:focus-within,
-  height: 42px !important;
+#vector-sticky-header .cdx-text-input:focus-within,
-  line-height: 42px !important;
+.vector-header-end .cdx-text-input__input:focus,
-  padding: 0 14px !important;
+#vector-sticky-header .cdx-text-input__input:focus {
-  border-radius: 12px !important;          /* your style */
+    background-color: #E9EEF6 !important;
-  background-color: rgb(194, 231, 255) !important;
+    border: 0 !important;
-  border: 0 !important;
+    border-radius: 12px !important;
-  color: rgb(0, 29, 53) !important;
+    box-shadow: none !important;
-  letter-spacing: 0.5px !important;
+    outline: none !important;
-  box-shadow: none !important;
+    height: 42px !important;
-  transition: none !important;
+    color: rgb(31, 31, 31) !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;
 }