style: Update filter indicator and button styles for improved UI consistency

feat: Add pulse animation to filter indicators in Lora and recipe management
refactor: Change filter-active button to a div for better semantic structure

static/css/components/filter-indicator.css

@@ -2,36 +2,51 @@
 .control-group .filter-active {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 6px;
     background: var(--lora-accent);
     color: white;
-    border-radius: 20px;
+    border-radius: var(--border-radius-xs);
-    padding: 6px 12px;
+    padding: 4px 10px;
-    transition: all 0.3s ease;
+    transition: all 0.2s ease;
-    border: none;
+    border: 1px solid var(--lora-accent);
     cursor: pointer;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    font-size: 0.85em;
 }
 
 .control-group .filter-active:hover {
-    background: var(--lora-accent);
+    opacity: 0.92;
-    opacity: 0.9;
+    transform: translateY(-1px);
+    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
+}
+
+.control-group .filter-active:active {
+    transform: translateY(0);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .control-group .filter-active i.fa-filter {
     font-size: 0.9em;
     margin-right: 2px;
+    opacity: 0.9;
 }
 
 .control-group .filter-active i.clear-filter {
-    transition: transform 0.2s ease;
+    transition: transform 0.2s ease, background-color 0.2s ease;
     cursor: pointer;
     margin-left: 4px;
     border-radius: 50%;
-    font-size: 0.9em;
+    font-size: 0.85em;
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .control-group .filter-active i.clear-filter:hover {
     transform: scale(1.2);
+    background-color: rgba(255, 255, 255, 0.2);
 }
 
 .control-group .filter-active .lora-name {
@@ -44,9 +59,9 @@
 
 /* Animation for filter indicator */
 @keyframes filterPulse {
-    0% { transform: scale(1); }
+    0% { transform: scale(1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
-    50% { transform: scale(1.05); }
+    50% { transform: scale(1.03); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); }
-    100% { transform: scale(1); }
+    100% { transform: scale(1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
 }
 
 .filter-active.animate {
@@ -62,4 +77,8 @@
     .control-group .filter-active .lora-name {
         max-width: 100px;
     }
+    
+    .control-group .filter-active:hover {
+        transform: none; /* Disable hover effects on mobile */
+    }
 }

static/css/layout.css

@@ -38,6 +38,90 @@
     flex-wrap: nowrap;
 }
 
+/* Action button styling */
+.control-group {
+    position: relative;
+}
+
+.control-group button {
+    min-width: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    border-radius: var(--border-radius-xs);
+    padding: 4px 10px;
+    border: 1px solid var(--border-color);
+    background: var(--card-bg);
+    color: var(--text-color);
+    font-size: 0.85em;
+    transition: all 0.2s ease;
+    cursor: pointer;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.control-group button:hover {
+    border-color: var(--lora-accent);
+    background: var(--bg-color);
+    transform: translateY(-1px);
+    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.08);
+}
+
+.control-group button:active {
+    transform: translateY(0);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.control-group button i {
+    opacity: 0.8;
+    transition: opacity 0.2s ease;
+}
+
+.control-group button:hover i {
+    opacity: 1;
+}
+
+/* Active state for buttons that can be toggled */
+.control-group button.active {
+    background: var(--lora-accent);
+    color: white;
+    border-color: var(--lora-accent);
+}
+
+/* Select dropdown styling */
+.control-group select {
+    min-width: 100px;
+    padding: 4px 26px 4px 10px;
+    border-radius: var(--border-radius-xs);
+    border: 1px solid var(--border-color);
+    background-color: var(--card-bg);
+    color: var(--text-color);
+    font-size: 0.85em;
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right 6px center;
+    background-size: 14px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.control-group select:hover {
+    border-color: var(--lora-accent);
+    background-color: var(--bg-color);
+    transform: translateY(-1px);
+    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.08);
+}
+
+.control-group select:focus {
+    outline: none;
+    border-color: var(--lora-accent);
+    box-shadow: 0 0 0 2px oklch(var(--lora-accent) / 0.15);
+}
+
 /* Ensure hidden class works properly */
 .hidden {
     display: none !important;
@@ -86,12 +170,14 @@
     justify-content: center;
     cursor: pointer;
     transition: all 0.3s ease;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
 .toggle-folders-btn:hover {
     background: var(--lora-accent);
     color: white;
     transform: translateY(-2px);
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
 }
 
 .toggle-folders-btn i {
@@ -101,8 +187,9 @@
 /* Icon-only button style */
 .icon-only {
     min-width: unset !important;
-    width: 36px !important;
+    width: 32px !important;
     padding: 0 !important;
+    height: 32px !important;
 }
 
 /* Rotate icon when folders are collapsed */
@@ -133,16 +220,25 @@
     cursor: pointer;
     padding: 2px 8px;
     margin: 2px;
-    border: 1px solid #ccc;
+    border: 1px solid var(--border-color);
     border-radius: var(--border-radius-xs);
     display: inline-block;
     line-height: 1.2;
     font-size: 14px;
+    background-color: var(--card-bg);
+    transition: all 0.2s ease;
+}
+
+.tag:hover {
+    border-color: var(--lora-accent);
+    background-color: oklch(var(--lora-accent) / 0.1);
+    transform: translateY(-1px);
 }
 
 .tag.active {
-    background-color: #007bff;
+    background-color: var(--lora-accent);
     color: white;
+    border-color: var(--lora-accent);
 }
 
 /* Back to Top Button */
@@ -155,7 +251,7 @@
     border-radius: 50%;
     background: var(--card-bg);
     border: 1px solid var(--border-color);
-    color: var (--text-color);
+    color: var(--text-color);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -165,6 +261,7 @@
     transform: translateY(10px);
     transition: all 0.3s ease;
     z-index: var(--z-overlay);
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }
 
 .back-to-top.visible {
@@ -174,9 +271,10 @@
 }
 
 .back-to-top:hover {
-    background: var (--lora-accent);
+    background: var(--lora-accent);
     color: white;
     transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
 }
 
 @media (max-width: 768px) {
@@ -203,19 +301,22 @@
     }
     
     .toggle-folders-btn:hover {
-        transform: none; /* 移动端下禁用hover效果 */
+        transform: none; /* Disable hover effects on mobile */
+    }
+
+    .control-group button:hover {
+        transform: none; /* Disable hover effects on mobile */
+    }
+
+    .control-group select:hover {
+        transform: none; /* Disable hover effects on mobile */
+    }
+
+    .tag:hover {
+        transform: none; /* Disable hover effects on mobile */
     }
 
     .back-to-top {
         bottom: 60px; /* Give some extra space from bottom on mobile */
     }
 }
-
-/* Standardize button widths in controls */
-.control-group button {
-    min-width: 100px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-}

static/js/loras.js

@@ -117,6 +117,13 @@ class LoraPageManager {
                 if (clearBtn) {
                     clearBtn.addEventListener('click', this.clearCustomFilter);
                 }
+
+                // Add pulse animation
+                const filterElement = indicator.querySelector('.filter-active');
+                if (filterElement) {
+                    filterElement.classList.add('animate');
+                    setTimeout(() => filterElement.classList.remove('animate'), 600);
+                }
             }
             
             // If we're viewing a specific LoRA detail, set up to open the modal

static/js/recipes.js

@@ -124,10 +124,10 @@ class RecipeManager {
         indicator.classList.remove('hidden');
         
         // Add pulse animation
-        const button = indicator.querySelector('button');
+        const filterElement = indicator.querySelector('.filter-active');
-        if (button) {
+        if (filterElement) {
-            button.classList.add('animate');
+            filterElement.classList.add('animate');
-            setTimeout(() => button.classList.remove('animate'), 600);
+            setTimeout(() => filterElement.classList.remove('animate'), 600);
         }
         
         // Add click handler for clear filter button

templates/components/controls.html

@@ -19,7 +19,7 @@
                 <button onclick="refreshLoras()"><i class="fas fa-sync"></i> Refresh</button>
             </div>
             <div class="control-group">
-                <button onclick="fetchCivitai()" class="secondary" title="Fetch from Civitai"><i class="fas fa-download"></i> Fetch</button>
+                <button onclick="fetchCivitai()" title="Fetch from Civitai"><i class="fas fa-download"></i> Fetch</button>
             </div>
             <div class="control-group">
                 <button onclick="downloadManager.showDownloadModal()" title="Download from URL">

templates/recipes.html

@@ -34,10 +34,10 @@
             </div>
             <!-- Custom filter indicator button (hidden by default) -->
             <div id="customFilterIndicator" class="control-group hidden">
-                <button class="filter-active">
+                <div class="filter-active">
                     <i class="fas fa-filter"></i> <span id="customFilterText">Filtered by LoRA</span>
                     <i class="fas fa-times-circle clear-filter"></i>
-                </button>
+                </div>
             </div>
         </div>
     </div>