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;
}
.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 {