Skip to content

Commit 0fac820

Browse files
KuingsmileKuingsmile
committed
✨ Feature(custom): add advanced animation
1 parent 3775e1f commit 0fac820

File tree

18 files changed

+298
-326
lines changed

18 files changed

+298
-326
lines changed

‎resources/theme/anime.css‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/renderer/components/css/PerPicbedSetting.css‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -134,14 +134,19 @@
134134
border-radius: 50%;
135135
width: 20px;
136136
height: 20px;
137-
background: #ffffff;
138-
box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
139-
transition: all 0.3s ease;
137+
background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
138+
box-shadow:
139+
0 2px 6px rgb(0 0 0 / 20%),
140+
0 1px 2px rgb(0 0 0 / 10%);
141+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
140142
content: '';
141143
}
142144

143145
.switch-input:checked + .switch-slider {
144146
background: var(--color-accent);
147+
box-shadow:
148+
inset 0 1px 3px rgb(0 0 0 / 10%),
149+
0 2px 8px rgb(64 158 255 / 30%);
145150
}
146151

147152
.switch-input:checked + .switch-slider::before {

‎src/renderer/components/css/UnifiedConfigForm.css‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -253,8 +253,9 @@
253253
border-radius: 0.75rem;
254254
width: 3rem;
255255
height: 1.5rem;
256-
background: var(--color-border);
256+
background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%);
257257
transition: var(--transition-fast);
258+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
258259
flex-shrink: 0;
259260
}
260261

@@ -265,13 +266,16 @@
265266
border-radius: 50%;
266267
width: 1.25rem;
267268
height: 1.25rem;
268-
background: white;
269+
background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
269270
box-shadow: var(--shadow-sm);
270271
transition: var(--transition-fast);
271272
}
272273

273274
.switch-input:checked + .switch-slider {
274275
background: var(--color-accent);
276+
box-shadow:
277+
inset 0 1px 3px rgb(0 0 0 / 10%),
278+
0 2px 8px rgb(64 158 255 / 30%);
275279
}
276280

277281
.switch-input:checked + .switch-slider .switch-button {

‎src/renderer/manage/pages/ManageMain.vue‎

Lines changed: 41 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -99,54 +99,56 @@
9999
</div>
100100

101101
<!-- PicBed Switch Dialog -->
102-
<div v-if="picBedSwitchDialogVisible" class="dialog-overlay" @click="picBedSwitchDialogVisible = false">
103-
<div class="dialog-container" @click.stop>
104-
<div class="dialog-header">
105-
<h3 class="dialog-title">
106-
{{ t('pages.manage.main.switchPicBed') }}
107-
</h3>
108-
<button class="dialog-close" @click="picBedSwitchDialogVisible = false">
109-
<XIcon class="close-icon" />
110-
</button>
111-
</div>
112-
<div class="dialog-content">
113-
<div class="choice-cos">
114-
<!-- Back to main card -->
115-
<div class="picbed-card main-card" @click="switchPicBed('main')">
116-
<div class="card-icon">
117-
<HomeIcon class="main-icon" />
118-
</div>
119-
<div class="card-content">
120-
<div class="card-title main-title">
121-
{{ $t('pages.manage.main.backToHome') }}
102+
<transition name="modal">
103+
<div v-if="picBedSwitchDialogVisible" class="dialog-overlay" @click="picBedSwitchDialogVisible = false">
104+
<div class="dialog-container" @click.stop>
105+
<div class="dialog-header">
106+
<h3 class="dialog-title">
107+
{{ t('pages.manage.main.switchPicBed') }}
108+
</h3>
109+
<button class="dialog-close" @click="picBedSwitchDialogVisible = false">
110+
<XIcon class="close-icon" />
111+
</button>
112+
</div>
113+
<div class="dialog-content">
114+
<div class="choice-cos">
115+
<!-- Back to main card -->
116+
<div class="picbed-card main-card" @click="switchPicBed('main')">
117+
<div class="card-icon">
118+
<HomeIcon class="main-icon" />
119+
</div>
120+
<div class="card-content">
121+
<div class="card-title main-title">
122+
{{ $t('pages.manage.main.backToHome') }}
123+
</div>
122124
</div>
123125
</div>
124-
</div>
125126

126-
<!-- PicBed cards -->
127-
<div
128-
v-for="(config, alias) in allPicBedConfigure"
129-
:key="String(alias)"
130-
class="picbed-card"
131-
:class="{ active: String(alias) === currentAlias }"
132-
@click="switchPicBed(String(alias))"
133-
>
134-
<div class="card-icon">
135-
<img :src="`./assets/${config.picBedName}.webp`" class="picbed-icon" />
136-
</div>
137-
<div class="card-content">
138-
<div class="card-title">
139-
{{ config.alias }}
127+
<!-- PicBed cards -->
128+
<div
129+
v-for="(config, alias) in allPicBedConfigure"
130+
:key="String(alias)"
131+
class="picbed-card"
132+
:class="{ active: String(alias) === currentAlias }"
133+
@click="switchPicBed(String(alias))"
134+
>
135+
<div class="card-icon">
136+
<img :src="`./assets/${config.picBedName}.webp`" class="picbed-icon" />
137+
</div>
138+
<div class="card-content">
139+
<div class="card-title">
140+
{{ config.alias }}
141+
</div>
142+
</div>
143+
<div v-if="String(alias) === currentAlias" class="check-icon">
144+
<CheckIcon />
140145
</div>
141-
</div>
142-
<div v-if="String(alias) === currentAlias" class="check-icon">
143-
<CheckIcon />
144146
</div>
145147
</div>
146148
</div>
147149
</div>
148150
</div>
149-
</div>
151+
</transition>
150152

151153
<!-- New Bucket Drawer -->
152154
<div v-if="nweBucketDrawerVisible" class="drawer-overlay" @click="nweBucketDrawerVisible = false">

‎src/renderer/manage/pages/css/BucketPage.css‎

Lines changed: 26 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@
5959

6060
.custom-domain-input:focus {
6161
border-color: var(--color-accent);
62+
background: white;
6263
outline: none;
6364
box-shadow: 0 0 0 3px var(--color-accent-soft);
6465
}
@@ -155,7 +156,7 @@
155156
padding: 0.5rem;
156157
font-size: 0.75rem;
157158
font-weight: 500;
158-
color: var(--color-accent);
159+
color: var(--color-text-primary);
159160
background: var(--color-background-secondary);
160161
transition: var(--transition-fast);
161162
gap: 0.25rem;
@@ -209,13 +210,14 @@
209210
width: 200px;
210211
font-size: 0.875rem;
211212
color: var(--color-text-primary);
212-
background: var(--color-surface-elevated);
213+
background: var(--color-background-tertiary);
213214
transition: var(--transition-fast);
214215
}
215216

216217
.search-input:focus {
217218
border-color: var(--color-accent);
218219
outline: none;
220+
background: white;
219221
box-shadow: 0 0 0 3px var(--color-accent-soft);
220222
}
221223

@@ -608,7 +610,7 @@
608610
border-radius: var(--radius-lg);
609611
padding: 0.75rem 1rem;
610612
width: 100%;
611-
background: var(--color-surface);
613+
background: var(--color-background-secondary);
612614
transition: var(--transition-medium);
613615
gap: 0.75rem;
614616
cursor: pointer;
@@ -706,7 +708,7 @@
706708
/* Ensure dropdown is never clipped */
707709
max-height: 300px;
708710
white-space: nowrap;
709-
background: var(--color-surface);
711+
background: var(--color-background-tertiary);
710712
box-shadow: var(--shadow-lg);
711713
transform-origin: top right;
712714
animation: dropdown-appear 0.15s ease-out;
@@ -793,7 +795,7 @@
793795
border-radius: var(--radius-lg);
794796
max-width: 90vw;
795797
max-height: 90vh;
796-
background: var(--color-surface);
798+
background: var(--color-background-tertiary);
797799
box-shadow: var(--shadow-xl);
798800
flex-direction: column;
799801
}
@@ -869,12 +871,13 @@
869871
width: 100%;
870872
font-size: 0.875rem;
871873
color: var(--color-text-primary);
872-
background: var(--color-surface-elevated);
874+
background: var(--color-background-tertiary);
873875
transition: var(--transition-fast);
874876
}
875877

876878
.form-input:focus {
877879
border-color: var(--color-accent);
880+
background: white;
878881
outline: none;
879882
box-shadow: 0 0 0 3px var(--color-accent-soft);
880883
}
@@ -926,8 +929,9 @@
926929
position: absolute;
927930
inset: 0;
928931
border-radius: 24px;
929-
background-color: var(--color-border);
930-
transition: 0.3s;
932+
background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%);
933+
box-shadow: inset 0 1px 3px rgb(0 0 0 / 15%);
934+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
931935
cursor: pointer;
932936
}
933937

@@ -938,13 +942,19 @@
938942
border-radius: 50%;
939943
width: 18px;
940944
height: 18px;
941-
background-color: white;
942-
transition: 0.3s;
945+
background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
946+
box-shadow:
947+
0 2px 6px rgb(0 0 0 / 20%),
948+
0 1px 2px rgb(0 0 0 / 10%);
949+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
943950
content: "";
944951
}
945952

946953
input:checked + .switch-slider {
947-
background-color: var(--color-accent);
954+
background: var(--color-accent);
955+
box-shadow:
956+
inset 0 1px 3px rgb(0 0 0 / 10%),
957+
0 2px 8px rgb(64 158 255 / 30%);
948958
}
949959

950960
input:checked + .switch-slider::before {
@@ -971,7 +981,7 @@ input:checked + .switch-slider::before {
971981
width: 60%;
972982
max-width: 800px;
973983
height: 100%;
974-
background: var(--color-background-secondary);
984+
background: var(--color-background-tertiary);
975985
box-shadow: var(--shadow-xl);
976986
transition: transform 0.3s ease-out;
977987
flex-direction: column;
@@ -1010,15 +1020,15 @@ input:checked + .switch-slider::before {
10101020
border-radius: var(--radius-lg);
10111021
padding: 3rem 2rem;
10121022
text-align: center;
1013-
background: var(--color-surface-elevated);
1023+
background: var(--color-surface);
10141024
transition: var(--transition-medium);
10151025
cursor: pointer;
10161026
}
10171027

10181028
.upload-area:hover,
10191029
.upload-area.dragover {
10201030
border-color: var(--color-accent);
1021-
background: var(--color-accent-soft);
1031+
background: var(--color-surface-elevated);
10221032
}
10231033

10241034
.upload-area-text {
@@ -1154,7 +1164,7 @@ input:checked + .switch-slider::before {
11541164
font-size: 0.75rem;
11551165
text-align: center;
11561166
color: var(--color-text-primary);
1157-
background: var(--color-surface-elevated);
1167+
background: var(--color-background-tertiary);
11581168
opacity: 0;
11591169
visibility: hidden;
11601170
box-shadow: var(--shadow-md);
@@ -1456,7 +1466,7 @@ input:checked + .switch-slider::before {
14561466
padding: 0.75rem;
14571467
border: 1px solid var(--color-border-secondary);
14581468
border-radius: var(--radius-md);
1459-
background: var(--color-surface-elevated);
1469+
background: var(--color-background-secondary);
14601470
transition: var(--transition-fast);
14611471
}
14621472

‎src/renderer/manage/pages/css/LoginPage.css‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -436,7 +436,7 @@
436436
border-radius: 50%;
437437
width: 20px;
438438
height: 20px;
439-
color: var(--color-text-tertiary);
439+
color: var(--color-text-primary);
440440
background: var(--color-background-secondary);
441441
transition: var(--transition-fast);
442442
cursor: help;
@@ -455,7 +455,7 @@
455455
width: 100%;
456456
font-size: 0.875rem;
457457
color: var(--color-text-primary);
458-
background: var(--color-background-primary);
458+
background: var(--color-background-tertiary);
459459
transition: var(--transition-fast);
460460
}
461461

@@ -489,9 +489,10 @@
489489
.switch-slider {
490490
position: absolute;
491491
inset: 0;
492-
border-radius: 24px;
493-
background-color: var(--color-border);
494-
transition: var(--transition-fast);
492+
border-radius: 14px;
493+
background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%);
494+
box-shadow: inset 0 1px 3px rgb(0 0 0 / 15%);
495+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
495496
cursor: pointer;
496497
}
497498

@@ -502,13 +503,19 @@
502503
border-radius: 50%;
503504
width: 18px;
504505
height: 18px;
505-
background-color: white;
506-
transition: var(--transition-fast);
506+
background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
507+
box-shadow:
508+
0 2px 6px rgb(0 0 0 / 20%),
509+
0 1px 2px rgb(0 0 0 / 10%);
510+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
507511
content: "";
508512
}
509513

510514
input:checked + .switch-slider {
511-
background-color: var(--color-success);
515+
background: var(--color-accent);
516+
box-shadow:
517+
inset 0 1px 3px rgb(0 0 0 / 10%),
518+
0 2px 8px rgb(64 158 255 / 30%);
512519
}
513520

514521
input:checked + .switch-slider::before {
@@ -567,13 +574,13 @@ input:checked + .switch-slider::before {
567574
font-size: 0.875rem;
568575
text-align: left;
569576
color: var(--color-text-primary);
570-
background: none;
577+
background: var(--color-background-tertiary);
571578
transition: var(--transition-fast);
572579
cursor: pointer;
573580
}
574581

575582
.dropdown-item:hover {
576-
background: var(--color-background-secondary);
583+
background: var(--color-accent);
577584
}
578585

579586
/* Config Table Section */

0 commit comments

Comments
 (0)