fix(site): unify and improve the styling of input fields (#3919)

* Unify and improve the styling of input fields

* InputSearch: use ellipsis character, remove redundant space

docs/.vitepress/theme/components/base/ColorPicker.vue

@@ -101,9 +101,11 @@ const value = computed({
 }
 
 .color-picker:hover,
-.color-picker:focus {
+.color-picker:focus-within {
   border-color: var(--vp-c-brand);
-  background: var(--vp-c-bg-alt);
+}
+.color-picker:focus-within {
+  background-color: var(--vp-c-bg);
 }
 
 .color-input[value='currentColor'] {

docs/.vitepress/theme/components/base/FakeInput.vue

@@ -48,7 +48,6 @@ defineProps({
 .fake-input:hover,
 .fake-input:focus {
   border-color: var(--vp-c-brand);
-  background: var(--vp-c-bg-alt);
 }
 
 .shortcut {

docs/.vitepress/theme/components/base/Input.vue

@@ -115,7 +115,9 @@ defineExpose({
 .input:hover,
 .input:focus {
   border-color: var(--vp-c-brand);
-  background: var(--vp-c-bg-alt);
+}
+.input:focus {
+  background-color: var(--vp-c-bg);
 }
 
 .input.has-icon {
@@ -163,4 +165,7 @@ defineExpose({
   color: var(--vp-c-text-2);
   pointer-events: none;
 }
+.input-wrapper > svg:has(+ .input.has-icon:focus) {
+  color: var(--vp-c-text-1);
+}
 </style>

docs/.vitepress/theme/components/icons/IconsCategoryOverview.vue

@@ -153,7 +153,7 @@ function handleCloseDrawer() {
   >
     <StickyBar class="category-search">
       <InputSearch
-        :placeholder="`Search ${icons.length} icons ...`"
+        :placeholder="`Search ${icons.length} icons…`"
         v-model="searchQuery"
         :shortcut="kbdSearchShortcut"
         class="input-wrapper"

docs/.vitepress/theme/components/icons/IconsOverview.vue

@@ -129,7 +129,7 @@ function handleCloseDrawer() {
   >
     <StickyBar>
       <InputSearch
-        :placeholder="`Search ${icons.length} icons ...`"
+        :placeholder="`Search ${icons.length} icons…`"
         v-model="searchQuery"
         ref="searchInput"
         :shortcut="kbdSearchShortcut"