美化主题

public/css/style.css

@@ -667,39 +667,81 @@ input:checked+.slider:before {
   position: relative;
   display: flex;
   align-items: center;
-  max-width: 240px;
+  transition: width 0.35s cubic-bezier(0.19, 1, 0.22, 1);
+  width: auto;
 }
 
-#serverSearchInput {
+#serverSearchFilter {
   background: var(--bg-input);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-sm);
-  padding: 6px 12px 6px 34px;
+  padding: 8px 14px 8px 38px;
   color: var(--text-primary);
-  font-size: 0.85rem;
-  width: 100%;
+  font-size: 0.88rem;
+  width: 220px; /* Base width */
   outline: none;
-  transition: all 0.3s ease;
+  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
+  backdrop-filter: blur(8px);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
-#serverSearchInput:focus {
+#serverSearchFilter::placeholder {
+  color: var(--text-muted);
+  opacity: 0.6;
+  font-size: 0.82rem;
+}
+
+#serverSearchFilter:hover {
+  border-color: var(--border-hover);
+  background: rgba(99, 102, 241, 0.04);
+}
+
+#serverSearchFilter:focus {
   border-color: var(--accent-indigo);
-  background: rgba(99, 102, 241, 0.05);
-  box-shadow: 0 0 12px rgba(99, 102, 241, 0.15);
+  background: rgba(99, 102, 241, 0.08);
+  box-shadow: 
+    0 0 0 3px rgba(99, 102, 241, 0.1),
+    0 10px 20px -10px rgba(0, 0, 0, 0.3);
+  width: 320px; /* Expand on focus */
+}
+
+/* Custom Clear Button Style */
+#serverSearchFilter::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  height: 16px;
+  width: 16px;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>");
+  background-repeat: no-repeat;
+  background-position: center;
+  cursor: pointer;
+  opacity: 0.4;
+  margin-right: 2px;
+  transition: opacity 0.2s;
+}
+
+#serverSearchFilter::-webkit-search-cancel-button:hover {
+  opacity: 0.8;
+}
+
+@media (max-width: 600px) {
+  #serverSearchFilter:focus {
+    width: 100%;
+  }
 }
 
 .search-box .search-icon {
   position: absolute;
-  left: 10px;
+  left: 12px;
   width: 16px;
   height: 16px;
   color: var(--text-muted);
   pointer-events: none;
-  transition: color 0.3s ease;
+  transition: all 0.3s ease;
 }
 
-#serverSearchInput:focus + .search-icon {
+#serverSearchFilter:focus + .search-icon {
   color: var(--accent-indigo);
+  transform: scale(1.1) translateY(-0.5px);
 }
 
 .btn-icon-sm {