GithubBackup/PicList
1
0
Fork 0
mirror of https://github.com/Kuingsmile/PicList.git synced 2026-05-06 20:42:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

✨ Feature(custom): optimize ui of gallery page

Browse Source
This commit is contained in:
Kuingsmile
2026-01-14 12:04:58 +08:00
parent 49d2d26ebc
commit fc53c27f8f
1 changed files with 37 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/renderer/pages/css/Gallery.css
View File

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