From fc53c27f8f8e5fa9bac05ca0168191da87d410ac Mon Sep 17 00:00:00 2001
From: Kuingsmile <96409857+Kuingsmile@users.noreply.github.com>
Date: Wed, 14 Jan 2026 12:04:58 +0800
Subject: [PATCH] :sparkles: Feature(custom): optimize ui of gallery page

---
 src/renderer/pages/css/Gallery.css | 80 ++++++++++++++----------------
 1 file changed, 37 insertions(+), 43 deletions(-)

diff --git a/src/renderer/pages/css/Gallery.css b/src/renderer/pages/css/Gallery.css
index 1c60bdf2..143d7938 100644
--- a/src/renderer/pages/css/Gallery.css
+++ b/src/renderer/pages/css/Gallery.css
@@ -69,12 +69,6 @@ html, body {
   flex: 1;
 }
 
-.header-icon {
-  display: flex;
-  align-items: center;
-  color: var(--color-blue-common);
-}
-
 .header-content h1 {
   margin: 0;
   font-size: 1.5rem;
@@ -106,14 +100,14 @@ html, body {
   font-family: inherit;
   font-weight: 500;
   color: white;
-  background: var(--color-blue-common);
+  background: var(--color-accent);
   transition: var(--transition-fast);
   gap: 0.5rem;
   cursor: pointer;
 }
 
 .action-button:hover {
-  background: var(--color-blue-common);
+  background: var(--color-accent-hover);
   transform: translateY(-1px);
   box-shadow: var(--shadow-md);
 }
@@ -124,7 +118,7 @@ html, body {
 }
 
 .view-mode-toggle:hover {
-  background: var(--color-blue-common) !important;
+  background: var(--color-accent-hover) !important;
 }
 
 .sync-delete-toggle {
@@ -156,7 +150,7 @@ html, body {
   position: absolute;
   inset: 0;
   border-radius: 24px;
-  background-color: #cccccc;
+  background-color: var(--color-border);
   transition: 0.3s;
   cursor: pointer;
 }
@@ -174,7 +168,7 @@ html, body {
 }
 
 input:checked + .switch-slider {
-  background-color: var(--color-blue-common);
+  background-color: var(--color-accent-hover);
 }
 
 input:checked + .switch-slider::before {
@@ -213,7 +207,7 @@ input:checked + .switch-slider::before {
   border-radius: 50%;
   width: 14px;
   height: 14px;
-  background: var(--color-blue-common);
+  background: var(--color-accent);
   transition: var(--transition-fast);
   appearance: none;
   cursor: pointer;
@@ -229,7 +223,7 @@ input:checked + .switch-slider::before {
   border-radius: 50%;
   width: 14px;
   height: 14px;
-  background: var(--color-blue-common);
+  background: var(--color-accent);
   transition: var(--transition-fast);
   cursor: pointer;
 }
@@ -249,7 +243,7 @@ input:checked + .switch-slider::before {
   font-size: 0.6875rem;
   font-weight: 600;
   color: white;
-  background: var(--color-blue-common);
+  background: var(--color-accent);
   line-height: 1;
 }
 
@@ -259,14 +253,14 @@ input:checked + .switch-slider::before {
 }
 
 .filter-content {
-  padding: 1rem; /* Reduced from 1.25rem for compactness */
+  padding: 1rem;
 }
 
 .filter-row {
   display: flex;
   align-items: flex-start;
-  margin-bottom: 0.75rem; /* Reduced from 1rem */
-  gap: 0.75rem; /* Reduced from 1rem for more compact layout */
+  margin-bottom: 0.75rem;
+  gap: 0.75rem;
   flex-wrap: wrap;
 }
 
@@ -293,7 +287,7 @@ input:checked + .switch-slider::before {
 
 /* Custom Select */
 .custom-select {
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--color-border-secondary);
   border-radius: var(--radius-md);
   padding: 0.375rem 0.5rem;
   width: 100%;
@@ -309,7 +303,7 @@ input:checked + .switch-slider::before {
 }
 
 .custom-select:focus {
-  border-color: var(--color-blue-common);
+  border-color: var(--color-accent-hover);
   outline: none;
   box-shadow: 0 0 0 3px rgb(59 130 246 / 10%);
 }
@@ -323,7 +317,7 @@ input:checked + .switch-slider::before {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--color-border-secondary);
   border-radius: var(--radius-md);
   padding: 0.375rem 0.5rem;
   width: 100%;
@@ -337,12 +331,12 @@ input:checked + .switch-slider::before {
 }
 
 .multiselect-trigger:hover {
-  border-color: var(--color-blue-common);
+  border-color: var(--color-accent-hover);
 }
 
 .multiselect-trigger:focus,
 .multiselect-trigger.active {
-  border-color: var(--color-blue-common);
+  border-color: var(--color-accent-hover);
   box-shadow: 0 0 0 2px rgb(59 130 246 / 10%);
 }
 
@@ -351,13 +345,13 @@ input:checked + .switch-slider::before {
   z-index: 1000;
   overflow-y: auto;
   margin-top: 2px;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--color-border-secondary);
   border-radius: var(--radius-md);
   padding: 0.375rem 0.5rem;
   min-width: 200px;
   max-height: 280px;
   color: var(--color-text-primary);
-  background: var(--color-surface);
+  background: var(--color-surface-elevated);
   box-shadow: var(--shadow-lg);
 }
 
@@ -368,7 +362,7 @@ input:checked + .switch-slider::before {
   padding: 0.25rem 0.5rem;
   min-height: unset;
   font-size: 0.95rem;
-  background: var(--color-surface);
+  background: var(--color-surface-elevated);
   transition: var(--transition-fast);
   gap: 0.25rem;
   cursor: pointer;
@@ -376,7 +370,7 @@ input:checked + .switch-slider::before {
 }
 
 .multiselect-option:hover {
-  background: var(--color-blue-common);
+  background: var(--color-accent-hover);
 }
 
 .multiselect-option input[type="checkbox"] {
@@ -392,7 +386,7 @@ input:checked + .switch-slider::before {
 }
 
 .date-input {
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--color-border-secondary);
   border-radius: var(--radius-md);
   padding: 0.375rem 0.5rem;
   min-width: 0;
@@ -406,7 +400,7 @@ input:checked + .switch-slider::before {
 }
 
 .date-input:focus {
-  border-color: var(--color-blue-common);
+  border-color: var(--color-accent-hover);
   outline: none;
   box-shadow: 0 0 0 3px rgb(59 130 246 / 10%);
 }
@@ -426,7 +420,7 @@ input:checked + .switch-slider::before {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--color-border-secondary);
   border-radius: var(--radius-md);
   padding: 0.375rem 0.5rem;
   width: 100%;
@@ -441,12 +435,12 @@ input:checked + .switch-slider::before {
 }
 
 .sort-button:hover {
-  border-color: var(--color-blue-common);
+  border-color: var(--color-accent-hover);
 }
 
 .sort-button:focus,
 .sort-button.active {
-  border-color: var(--color-blue-common);
+  border-color: var(--color-accent-hover);
   box-shadow: 0 0 0 2px rgb(59 130 246 / 10%);
 }
 
@@ -454,10 +448,10 @@ input:checked + .switch-slider::before {
   position: fixed;
   z-index: 1000;
   margin-top: 2px;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--color-border-secondary);
   border-radius: var(--radius-md);
   min-width: 160px;
-  background: var(--color-surface);
+  background: var(--color-surface-elevated);
   box-shadow: var(--shadow-lg);
 }
 
@@ -477,7 +471,7 @@ input:checked + .switch-slider::before {
 }
 
 .sort-option:hover {
-  background: var(--color-blue-common);
+  background: var(--color-accent-hover);
 }
 
 /* Search Groups */
@@ -497,7 +491,7 @@ input:checked + .switch-slider::before {
 }
 
 .search-input {
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--color-border-secondary);
   border-radius: var(--radius-md);
   padding: 0.5rem 0.75rem 0.5rem 2.25rem;
   width: 100%;
@@ -508,7 +502,7 @@ input:checked + .switch-slider::before {
 }
 
 .search-input:focus {
-  border-color: var(--color-blue-common);
+  border-color: var(--color-accent-hover);
   outline: none;
   box-shadow: 0 0 0 3px rgb(59 130 246 / 10%);
 }
@@ -571,7 +565,7 @@ input:checked + .switch-slider::before {
 
 .copy-btn {
   color: white;
-  background: var(--color-blue-common);
+  background: var(--color-accent);
 }
 
 .copy-btn.active:hover {
@@ -584,7 +578,7 @@ input:checked + .switch-slider::before {
 }
 
 .edit-btn.active:hover {
-  background: #059669;
+  background: var(--color-success);
 }
 
 .delete-btn {
@@ -602,7 +596,7 @@ input:checked + .switch-slider::before {
 }
 
 .select-btn.active:hover {
-  background: #d97706;
+  background: var(--color-warning);
 }
 
 /* Filter Slide Animation */
@@ -678,8 +672,8 @@ input:checked + .switch-slider::before {
 }
 
 .loader-spinner {
-  border: 2px solid var(--color-border);
-  border-top: 2px solid var(--color-blue-common);
+  border: 2px solid var(--color-border-secondary);
+  border-top: 2px solid var(--color-accent);
   border-radius: 50%;
   width: 24px;
   height: 24px;
@@ -775,8 +769,8 @@ input:checked + .switch-slider::before {
 }
 
 .custom-checkbox input[type="checkbox"]:checked + .checkbox-mark {
-  border-color: var(--color-blue-common);
-  background: var(--color-blue-common);
+  border-color: var(--color-accent-hover);
+  background: var(--color-accent);
 }
 
 .custom-checkbox input[type="checkbox"]:checked + .checkbox-mark::after {