MediaWiki:Vector-2022.css: Difference between revisions

← Older edit Newer edit →

@@ Line 105: / Line 105: @@
 }
-#searchInput {
-    background-color: #E9EEF6 !important;
-height: 43px;
-color: rgb(31, 31, 31);
+/* 0) Clean duplicates (pick ONE radius). I’m using 25px everywhere. */
-letter-spacing: 0.5px;
+.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-radius: 25px !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  transition: none !important;
+}
-.vector-header-end .cdx-text-input__input,
+/* On hover/focus-within, keep the same dimensions (optional: tint border) */
-#vector-sticky-header .cdx-text-input__input {
+.vector-search-box .cdx-text-input:hover,
-    border: 0 !important;
+.vector-search-box .cdx-text-input:focus-within {
+  border: 1px solid #7aa2ff !important;  /* or #c5d0e3 if you want zero change */
+  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) */
+.vector-search-box .cdx-text-input__input,
+#searchInput {
+  box-sizing: border-box !important;
+  height: 42px !important;
+  line-height: 42px !important;
+  padding: 0 14px !important;
+  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 */
 .cdx-search-input--has-end-button {
-border: 0px;
+  border: 0;
-background: transparent;
+  background: transparent;
-display; flex;
+  display: flex;      /* (fixed your typo) */
-gap: 7px;
+  gap: 7px;
+}
+/* Harmonize button height with the input */
+.cdx-button.cdx-search-input__end-button {
+  height: 42px !important;
+  line-height: 42px !important;
+  padding: 0 14px !important;
+  border-radius: 12px !important;          /* your style */
+  background-color: rgb(194, 231, 255) !important;
+  border: 0 !important;
+  color: rgb(0, 29, 53) !important;
+  letter-spacing: 0.5px !important;
+  box-shadow: none !important;
+  transition: none !important;
 }
-.cdx-button.cdx-search-input__end-button{
+/* 4) If there’s a start (magnifier) icon, keep padding stable */
-   border-radius: 12px !important;
+.cdx-text-input--has-start-icon .cdx-text-input__input {
-width: 80px;
+   padding-left: 36px !important;
-  background-color: rgb(194, 231, 255);
-border: 0;
-color: rgb(0, 29, 53);
-letter-spacing: 0.5px;
 }