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

✨ Feature(custom): add advanced animation

Browse Source
This commit is contained in:
Kuingsmile
2026-01-15 15:32:37 +08:00
parent 3775e1ff1a
commit 0fac820d31
18 changed files with 298 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,16 @@
@import url('./common/advancedAnimation.css');
/* Global scrolling behavior */
html, body {
overflow-x: hidden;
}
.header-icon {
display: flex;
align-items: center;
color: var(--color-accent);
}
/* Custom Scrollbar Styles */
.gallery-content::-webkit-scrollbar {
width: 8px;
@@ -150,8 +158,9 @@ html, body {
position: absolute;
inset: 0;
border-radius: 24px;
background-color: var(--color-border);
transition: 0.3s;
background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%);
box-shadow: inset 0 1px 3px rgb(0 0 0 / 15%);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}
@@ -162,13 +171,19 @@ html, body {
border-radius: 50%;
width: 18px;
height: 18px;
background-color: white;
transition: 0.3s;
background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
box-shadow:
0 2px 6px rgb(0 0 0 / 20%),
0 1px 2px rgb(0 0 0 / 10%);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
content: "";
}
input:checked + .switch-slider {
background-color: var(--color-accent);
background: var(--color-accent);
box-shadow:
inset 0 1px 3px rgb(0 0 0 / 10%),
0 2px 8px rgb(64 158 255 / 30%);
}
input:checked + .switch-slider::before {
@@ -1507,13 +1522,6 @@ input:checked + .switch-slider::before {
letter-spacing: 0.02em;
}
.advancedAnimation {
backdrop-filter: blur(5px) saturate(180%);
background: rgb(255 255 255 / 20%);
border: 1px solid rgb(255 255 255 / 30%);
box-shadow: 0 8px 32px rgb(0 0 0 / 10%);
}
.placeholder-item:hover {
background: rgb(var(--color-accent-rgb), 0.08);
}