Skip to content

Commit 6e23db3

Browse files
mberrishdevmberrishdev
committed
feat: enhance UI styles with improved backdrop filters and shadows for better visibility
1 parent 8a6573f commit 6e23db3

3 files changed

Lines changed: 91 additions & 59 deletions

File tree

‎src/renderer/components/ClipboardItem.css‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,17 @@
22
.history-item {
33
display: flex;
44
gap: 0.75rem;
5-
background: rgba(255, 255, 255, 0.06);
5+
background: rgba(255, 255, 255, 0.08);
66
padding: 0.75rem 1rem;
77
border-radius: 10px;
8-
border: 1px solid rgba(255, 255, 255, 0.08);
8+
border: 1px solid rgba(255, 255, 255, 0.12);
99
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
1010
animation: itemSlideIn 0.3s ease-out backwards;
1111
cursor: pointer;
1212
outline: none;
13-
backdrop-filter: blur(10px);
14-
-webkit-backdrop-filter: blur(10px);
13+
backdrop-filter: blur(20px) saturate(150%);
14+
-webkit-backdrop-filter: blur(20px) saturate(150%);
15+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.05);
1516
}
1617

1718
.history-item:nth-child(1) {
@@ -45,10 +46,11 @@
4546

4647
/* Selected state */
4748
.history-item--selected {
48-
background: rgba(99, 102, 241, 0.15);
49-
border-color: rgba(99, 102, 241, 0.4);
50-
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3),
51-
0 8px 32px rgba(99, 102, 241, 0.1);
49+
background: rgba(99, 102, 241, 0.18);
50+
border-color: rgba(99, 102, 241, 0.5);
51+
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.35),
52+
0 8px 32px rgba(99, 102, 241, 0.15),
53+
inset 0 1px 0 rgba(255, 255, 255, 0.1);
5254
}
5355

5456
.history-item--selected .item-number {
@@ -190,21 +192,24 @@
190192
}
191193

192194
.action-btn {
193-
background: rgba(255, 255, 255, 0.08);
194-
border: 1px solid rgba(255, 255, 255, 0.1);
195+
background: rgba(255, 255, 255, 0.1);
196+
border: 1px solid rgba(255, 255, 255, 0.15);
195197
padding: 0.375rem 0.75rem;
196198
border-radius: 6px;
197199
font-size: 0.75rem;
198200
cursor: pointer;
199201
transition: all 0.2s ease;
200202
color: rgba(255, 255, 255, 0.7);
201203
font-weight: 500;
204+
backdrop-filter: blur(10px);
205+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
202206
}
203207

204208
.action-btn:hover {
205209
background: rgba(255, 255, 255, 0.15);
206210
color: rgba(255, 255, 255, 0.95);
207-
border-color: rgba(255, 255, 255, 0.2);
211+
border-color: rgba(255, 255, 255, 0.25);
212+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
208213
}
209214

210215
.action-btn--copied {

‎src/renderer/pages/ClipboardHistory.css‎

Lines changed: 41 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,8 @@ body.transparent .app {
3939
position: relative;
4040
background: linear-gradient(
4141
180deg,
42-
rgba(15, 15, 25, 0.85) 0%,
43-
rgba(20, 20, 35, 0.9) 100%
42+
rgba(15, 15, 25, 0.65) 0%,
43+
rgba(20, 20, 35, 0.75) 100%
4444
);
4545
}
4646

@@ -49,8 +49,8 @@ body.transparent .app::before {
4949
position: absolute;
5050
inset: 0;
5151
z-index: -1;
52-
backdrop-filter: blur(80px) saturate(180%);
53-
-webkit-backdrop-filter: blur(80px) saturate(180%);
52+
backdrop-filter: blur(120px) saturate(200%) brightness(1.1);
53+
-webkit-backdrop-filter: blur(120px) saturate(200%) brightness(1.1);
5454
border-radius: 12px;
5555
}
5656

@@ -61,12 +61,15 @@ body.transparent .app::after {
6161
z-index: 0;
6262
background: linear-gradient(
6363
135deg,
64-
rgba(255, 255, 255, 0.1) 0%,
65-
rgba(255, 255, 255, 0.05) 50%,
66-
rgba(255, 255, 255, 0.02) 100%
64+
rgba(255, 255, 255, 0.15) 0%,
65+
rgba(255, 255, 255, 0.08) 50%,
66+
rgba(255, 255, 255, 0.03) 100%
6767
);
6868
border-radius: 12px;
69-
border: 1px solid rgba(255, 255, 255, 0.1);
69+
border: 1px solid rgba(255, 255, 255, 0.18);
70+
box-shadow:
71+
0 8px 32px rgba(0, 0, 0, 0.3),
72+
inset 0 1px 0 rgba(255, 255, 255, 0.1);
7073
pointer-events: none;
7174
}
7275

@@ -94,10 +97,11 @@ body.opaque .app {
9497
/* Header */
9598
.header {
9699
padding: 0.625rem 1.25rem;
97-
background: var(--glass-bg);
98-
backdrop-filter: blur(20px);
99-
-webkit-backdrop-filter: blur(20px);
100-
border-bottom: 1px solid var(--glass-border);
100+
background: rgba(255, 255, 255, 0.06);
101+
backdrop-filter: blur(40px) saturate(150%);
102+
-webkit-backdrop-filter: blur(40px) saturate(150%);
103+
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
104+
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
101105
display: flex;
102106
justify-content: space-between;
103107
align-items: center;
@@ -116,8 +120,8 @@ body.opaque .app {
116120
}
117121

118122
.settings-btn {
119-
background: var(--glass-bg);
120-
border: 1px solid var(--glass-border);
123+
background: rgba(255, 255, 255, 0.08);
124+
border: 1px solid rgba(255, 255, 255, 0.12);
121125
color: var(--text-primary);
122126
padding: 0.5rem 1rem;
123127
border-radius: 8px;
@@ -126,12 +130,14 @@ body.opaque .app {
126130
transition: all 0.2s ease;
127131
font-weight: 500;
128132
backdrop-filter: blur(10px);
133+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
129134
}
130135

131136
.settings-btn:hover {
132-
background: rgba(255, 255, 255, 0.15);
137+
background: rgba(255, 255, 255, 0.12);
133138
border-color: rgba(255, 255, 255, 0.2);
134139
transform: translateY(-1px);
140+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
135141
}
136142

137143
/* Search */
@@ -180,14 +186,15 @@ body.opaque .app {
180186
.search-input {
181187
width: 100%;
182188
padding: 0.875rem 3rem;
183-
background: rgba(255, 255, 255, 0.06);
184-
border: 1px solid rgba(255, 255, 255, 0.08);
189+
background: rgba(255, 255, 255, 0.08);
190+
border: 1px solid rgba(255, 255, 255, 0.12);
185191
border-radius: 12px;
186192
font-size: 0.875rem;
187193
color: var(--text-primary);
188194
outline: none;
189195
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
190-
backdrop-filter: blur(10px);
196+
backdrop-filter: blur(20px) saturate(150%);
197+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
191198
}
192199

193200
.search-input::placeholder {
@@ -196,10 +203,11 @@ body.opaque .app {
196203
}
197204

198205
.search-input:focus {
199-
background: rgba(255, 255, 255, 0.1);
206+
background: rgba(255, 255, 255, 0.12);
200207
border-color: var(--accent-primary);
201-
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15),
202-
0 4px 20px rgba(99, 102, 241, 0.1);
208+
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2),
209+
0 4px 20px rgba(99, 102, 241, 0.15),
210+
inset 0 1px 0 rgba(255, 255, 255, 0.08);
203211
}
204212

205213
.search-wrapper:focus-within .search-icon {
@@ -231,12 +239,15 @@ body.opaque .app {
231239
color: var(--text-secondary);
232240
transition: all 0.2s ease;
233241
z-index: 2;
242+
backdrop-filter: blur(10px);
243+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
234244
}
235245

236246
.clear-btn:hover {
237-
background: rgba(255, 255, 255, 0.2);
247+
background: rgba(255, 255, 255, 0.18);
238248
color: var(--text-primary);
239249
transform: scale(1.05);
250+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
240251
}
241252

242253
.clear-btn:active {
@@ -303,23 +314,26 @@ body.opaque .app {
303314
}
304315

305316
.load-more-btn {
306-
background: var(--glass-bg);
307-
border: 1px solid var(--glass-border);
317+
background: rgba(255, 255, 255, 0.08);
318+
border: 1px solid rgba(255, 255, 255, 0.15);
308319
color: var(--text-primary);
309320
padding: 0.75rem 2rem;
310321
border-radius: 10px;
311322
cursor: pointer;
312323
font-size: 0.8125rem;
313324
font-weight: 600;
314325
transition: all 0.2s ease;
315-
backdrop-filter: blur(10px);
326+
backdrop-filter: blur(20px) saturate(150%);
327+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
316328
}
317329

318330
.load-more-btn:hover:not(:disabled) {
319-
background: rgba(255, 255, 255, 0.15);
331+
background: rgba(255, 255, 255, 0.12);
320332
border-color: var(--accent-primary);
321333
transform: translateY(-2px);
322-
box-shadow: 0 4px 20px rgba(99, 102, 241, 0.2);
334+
box-shadow: 0 4px 20px rgba(99, 102, 241, 0.25),
335+
0 2px 8px rgba(0, 0, 0, 0.15),
336+
inset 0 1px 0 rgba(255, 255, 255, 0.08);
323337
}
324338

325339
.load-more-btn:disabled {

‎src/renderer/pages/Settings.css‎

Lines changed: 34 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ body.transparent .settings {
1212
position: relative;
1313
background: linear-gradient(
1414
180deg,
15-
rgba(15, 15, 25, 0.85) 0%,
16-
rgba(20, 20, 35, 0.9) 100%
15+
rgba(15, 15, 25, 0.65) 0%,
16+
rgba(20, 20, 35, 0.75) 100%
1717
);
1818
}
1919

@@ -22,8 +22,8 @@ body.transparent .settings::before {
2222
position: absolute;
2323
inset: 0;
2424
z-index: -1;
25-
backdrop-filter: blur(80px) saturate(180%);
26-
-webkit-backdrop-filter: blur(80px) saturate(180%);
25+
backdrop-filter: blur(120px) saturate(200%) brightness(1.1);
26+
-webkit-backdrop-filter: blur(120px) saturate(200%) brightness(1.1);
2727
border-radius: 12px;
2828
}
2929

@@ -34,12 +34,15 @@ body.transparent .settings::after {
3434
z-index: 0;
3535
background: linear-gradient(
3636
135deg,
37-
rgba(255, 255, 255, 0.1) 0%,
38-
rgba(255, 255, 255, 0.05) 50%,
39-
rgba(255, 255, 255, 0.02) 100%
37+
rgba(255, 255, 255, 0.15) 0%,
38+
rgba(255, 255, 255, 0.08) 50%,
39+
rgba(255, 255, 255, 0.03) 100%
4040
);
4141
border-radius: 12px;
42-
border: 1px solid rgba(255, 255, 255, 0.1);
42+
border: 1px solid rgba(255, 255, 255, 0.18);
43+
box-shadow:
44+
0 8px 32px rgba(0, 0, 0, 0.3),
45+
inset 0 1px 0 rgba(255, 255, 255, 0.1);
4346
pointer-events: none;
4447
}
4548

@@ -54,10 +57,11 @@ body.opaque .settings {
5457
/* Header */
5558
.settings-header {
5659
padding: 0.625rem 1.25rem;
57-
background: rgba(255, 255, 255, 0.08);
58-
backdrop-filter: blur(20px);
59-
-webkit-backdrop-filter: blur(20px);
60-
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
60+
background: rgba(255, 255, 255, 0.06);
61+
backdrop-filter: blur(40px) saturate(150%);
62+
-webkit-backdrop-filter: blur(40px) saturate(150%);
63+
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
64+
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
6165
display: flex;
6266
align-items: center;
6367
gap: 1rem;
@@ -91,12 +95,15 @@ body.opaque .settings {
9195
font-size: 0.875rem;
9296
transition: all 0.2s ease;
9397
font-weight: 500;
98+
backdrop-filter: blur(10px);
99+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
94100
}
95101

96102
.back-btn:hover {
97-
background: rgba(255, 255, 255, 0.15);
103+
background: rgba(255, 255, 255, 0.12);
98104
border-color: rgba(255, 255, 255, 0.2);
99105
transform: translateY(-1px);
106+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
100107
}
101108

102109
/* Content */
@@ -124,20 +131,23 @@ body.opaque .settings {
124131

125132
/* Setting Items */
126133
.setting-item {
127-
background: rgba(255, 255, 255, 0.06);
134+
background: rgba(255, 255, 255, 0.08);
128135
padding: 1.25rem;
129136
border-radius: 12px;
130-
border: 1px solid rgba(255, 255, 255, 0.08);
137+
border: 1px solid rgba(255, 255, 255, 0.12);
131138
display: flex;
132139
justify-content: space-between;
133140
align-items: center;
134141
margin-bottom: 0.75rem;
135142
transition: all 0.2s ease;
143+
backdrop-filter: blur(20px) saturate(150%);
144+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.05);
136145
}
137146

138147
.setting-item:hover {
139-
background: rgba(255, 255, 255, 0.08);
140-
border-color: rgba(255, 255, 255, 0.12);
148+
background: rgba(255, 255, 255, 0.1);
149+
border-color: rgba(255, 255, 255, 0.15);
150+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.08);
141151
}
142152

143153
.setting-info {
@@ -222,21 +232,24 @@ body.opaque .settings {
222232

223233
/* Input Fields */
224234
.setting-input {
225-
background: rgba(255, 255, 255, 0.06);
226-
border: 1px solid rgba(255, 255, 255, 0.1);
235+
background: rgba(255, 255, 255, 0.08);
236+
border: 1px solid rgba(255, 255, 255, 0.12);
227237
border-radius: 8px;
228238
padding: 0.75rem 1rem;
229239
color: rgba(255, 255, 255, 0.95);
230240
font-size: 0.875rem;
231241
width: 100%;
232242
outline: none;
233243
transition: all 0.2s ease;
244+
backdrop-filter: blur(10px);
245+
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
234246
}
235247

236248
.setting-input:focus {
237-
background: rgba(255, 255, 255, 0.1);
249+
background: rgba(255, 255, 255, 0.12);
238250
border-color: #6366f1;
239-
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
251+
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2),
252+
inset 0 1px 2px rgba(0, 0, 0, 0.1);
240253
}
241254

242255
.setting-input::placeholder {

0 commit comments

Comments
 (0)