GithubBackup/PicList
1
0
Fork 0
mirror of https://github.com/Kuingsmile/PicList.git synced 2026-05-31 13:49:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

✨ Feature(custom): support adjust grid size in gallery page

Browse Source 
ISSUES CLOSED: #419
This commit is contained in:
Kuingsmile
2025-12-30 16:01:48 +08:00
parent 391c52b160
commit a7691234b5
8 changed files with 128 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -181,6 +181,78 @@ input:checked + .switch-slider::before {
transform: translateX(20px);
}
/* Grid Size Control */
.grid-size-control {
display: flex;
align-items: center;
border: 1px solid var(--color-border-secondary);
border-radius: var(--radius-md);
padding: 0.375rem 0.5rem;
background: var(--color-surface-elevated);
gap: 0.375rem;
}
.grid-size-control .control-label {
font-size: 0.75rem;
font-weight: 500;
white-space: nowrap;
color: var(--color-text-secondary);
}
.grid-slider {
border-radius: 2px;
width: 70px;
height: 4px;
background: var(--color-border);
outline: none;
appearance: none;
cursor: pointer;
}
.grid-slider::-webkit-slider-thumb {
border-radius: 50%;
width: 14px;
height: 14px;
background: var(--color-blue-common);
transition: var(--transition-fast);
appearance: none;
cursor: pointer;
}
.grid-slider::-webkit-slider-thumb:hover {
transform: scale(1.15);
box-shadow: 0 0 0 3px rgb(56 114 250 / 20%);
}
.grid-slider::-moz-range-thumb {
border: none;
border-radius: 50%;
width: 14px;
height: 14px;
background: var(--color-blue-common);
transition: var(--transition-fast);
cursor: pointer;
}
.grid-slider::-moz-range-thumb:hover {
transform: scale(1.15);
box-shadow: 0 0 0 3px rgb(56 114 250 / 20%);
}
.grid-value {
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: var(--radius-sm);
padding: 0.125rem 0.375rem;
min-width: 20px;
font-size: 0.6875rem;
font-weight: 600;
color: white;
background: var(--color-blue-common);
line-height: 1;
}
/* Filter Card */
.filter-card {
border-radius: var(--radius-lg);