-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmain.css
More file actions
391 lines (341 loc) · 18.1 KB
/
main.css
File metadata and controls
391 lines (341 loc) · 18.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
* {
cursor: url('data:image/svg+xml,%3Csvg%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%228%22%20fill%3D%22%23818183%22%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E') 8 8, auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
*::-webkit-scrollbar {
display: none;
}
html, body {
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
:root {
--title-color: #e0e0e0;
--background-color: #19191c;
--text-color: #e0e0e0;
--hover-color: #ffffff;
--header-gradient: linear-gradient(120deg, #25252a, #7252f5);
--link-bg: #454545;
--link-hover-bg: #333;
--border-highlight: #7f52ff;
--code-bg: #1e1e20;
--code-border: #404040;
--footer-bg: #25252a;
--footer-text-color: #e0e0e0;
--section-h2: #e0e0e0;
--subtitle: #8c8c8e;
}
.light-mode {
--title-color: #000000;
--background-color: #dcdcdc;
--text-color: #19191c;
--hover-color: #666666;
--header-gradient: linear-gradient(120deg, #dbdbe4, #79c2ff);
--link-bg: #c8c8c8;
--link-hover-bg: #cccccc;
--border-highlight: #3366ff;
--code-bg: #f0f0f0;
--code-border: #d6d6d6;
--footer-bg: #e6e6e6;
--footer-text-color: #19191c;
--section-h2: #000000;
--subtitle: #626264;
}
body {
flex: 1;
user-select: none;
cursor: url('data:image/svg+xml,%3Csvg%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%228%22%20fill%3D%22%23818183%22%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E') 8 8, auto;
font-family: 'Inter', sans-serif;
color: var(--text-color);
background-color: var(--background-color);
line-height: 1.6;
transition: background-color 0.3s ease, color 0.3s ease;
}
p:hover, h1:hover, h2:hover, h3:hover, span:hover, a:hover, section h2:hover {
cursor: url('data:image/svg+xml,%3Csvg%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20stroke%3D%22%23000000%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%3Cpath%20d%3D%22M21%2012C21%2016.9706%2016.9706%2021%2012%2021C7.02944%2021%203%2016.9706%203%2012C3%207.02944%207.02944%203%2012%203C16.9706%203%2021%207.02944%2021%2012Z%22%20stroke%3D%22%23818183%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E') 8 8, auto;
color: var(--hover-color);
transition: transform 0.2s ease-in-out;
}
.navbar a:hover, .link {
cursor: url('data:image/svg+xml,%3Csvg%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%3Cpath%20d%3D%22M13%2011L22%202M22%202H16.6562M22%202V7.34375%22%20stroke%3D%22%23818183%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M12%202C6.47715%202%202%206.47715%202%2012C2%2013.8214%202.48697%2015.5291%203.33782%2017M22%2012C22%2017.5228%2017.5228%2022%2012%2022C10.1786%2022%208.47087%2021.513%207%2020.6622%22%20stroke%3D%22%23818183%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E') 12 12, auto;
}
.navbar a:hover {
transform: scale(1.05);
transition: transform 0.2s ease-in-out;
}
.navbar a {
color: #fff;
text-decoration: none;
font-weight: 600;
position: relative;
display: inline-block;
vertical-align: middle;
overflow: hidden;
padding: 5px;
padding-inline: 10px;
background: #454545;
border-radius: 10px;
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-transition: box-shadow 0.3s, left 0.3s, right 0.3s;
}
.navbar a:before {
content: "";
position: absolute;
z-index: -1;
left: 51%;
right: 51%;
bottom: 0;
background: var(--border-highlight);
height: 4px;
-webkit-transition: left 0.4s ease-out, right 0.4s ease-out;
transition: left 0.4s ease-out, right 0.4s ease-out;
}
.navbar a:hover:before,
.navbar a:focus:before,
.navbar a:active:before {
left: 0;
right: 0;
}
.navbar a:hover,
.navbar a:focus,
.navbar a:active {
box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
.header {
flex-shrink: 0;
background: var(--header-gradient);
color: #fff;
text-align: center;
padding: 20px 0;
}
.title {
color: var(--title-color);
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 10px;
}
.subtitle {
color: var(--subtitle);
font-size: 1.2rem;
font-weight: 400;
}
.navbar {
margin-top: 15px;
display: flex;
justify-content: center;
gap: 20px;
}
.navbar a {
color: var(--text-color);
text-decoration: none;
font-weight: 600;
position: relative;
display: inline-block;
vertical-align: middle;
overflow: hidden;
padding: 5px;
padding-inline: 10px;
background: var(--link-bg);
border-radius: 10px;
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.navbar a:hover, .navbar a:focus, .navbar a:active {
background: var(--link-hover-bg);
box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}
.main-content {
flex: 1;
padding: 20px 0;
}
.section {
opacity: 0;
transform: translateY(50px);
transition: opacity 2s ease-out, transform 1s ease-out;
}
.section.visible {
opacity: 1;
transform: translateY(0);
}
.section h2 {
color: var(--section-h2);
font-size: 1.8rem;
margin-bottom: 10px;
border-bottom: 4px solid var(--border-highlight);
display: inline-block;
}
.section p, .section h3 {
padding-right: 0.1rem;
}
.feature-list {
list-style: none;
padding: 0;
}
.feature-list li {
background: var(--link-bg);
padding: 10px;
border-radius: 5px;
margin: 10px 0;
transition: background-color 0.3s, transform 0.2s ease;
cursor: url('data:image/svg+xml,%3Csvg%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%3Cpath%20d%3D%22M21%2012C21%2016.9706%2016.9706%2021%2012%2021C7.02944%2021%203%2016.9706%203%2012C3%207.02944%207.02944%203%2012%203C16.9706%203%2021%207.02944%2021%2012Z%22%20stroke%3D%22%23818183%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E') 12 12, auto;
}
.feature-list li:hover {
cursor: url('data:image/svg+xml,%3Csvg%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%3Cpath%20d%3D%22M21%2012C21%2016.9706%2016.9706%2021%2012%2021C7.02944%2021%203%2016.9706%203%2012C3%207.02944%207.02944%203%2012%203C16.9706%203%2021%207.02944%2021%2012Z%22%20stroke%3D%22%23818183%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E') 12 12, auto;
background: var(--link-hover-bg);
transform: scale(1.05);
}
.feature-list li:hover,
.feature-list li:focus,
.feature-list li:active {
transform: scale(1.05);
}
.link {
color: #454545;
cursor: url('data:image/svg+xml,%3Csvg%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%3Cpath%20d%3D%22M13%2011L22%202M22%202H16.6562M22%202V7.34375%22%20stroke%3D%22%23818183%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M12%202C6.47715%202%202%206.47715%202%2012C2%2013.8214%202.48697%2015.5291%203.33782%2017M22%2012C22%2017.5228%2017.5228%2022%2012%2022C10.1786%2022%208.47087%2021.513%207%2020.6622%22%20stroke%3D%22%23818183%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E') 12 12, auto;
}
.link:hover, .link:focus, .link:active {
color: #595959;
cursor: url('data:image/svg+xml,%3Csvg%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%3Cpath%20d%3D%22M13%2011L22%202M22%202H16.6562M22%202V7.34375%22%20stroke%3D%22%23818183%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M12%202C6.47715%202%202%206.47715%202%2012C2%2013.8214%202.48697%2015.5291%203.33782%2017M22%2012C22%2017.5228%2017.5228%2022%2012%2022C10.1786%2022%208.47087%2021.513%207%2020.6622%22%20stroke%3D%22%23818183%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E') 12 12, auto;
}
.code-block {
user-select: text;
cursor: url('data:image/svg+xml,%3Csvg%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%3Cpath%20d%3D%22M21%2012C21%2016.9706%2016.9706%2021%2012%2021C7.02944%2021%203%2016.9706%203%2012C3%207.02944%207.02944%203%2012%203C16.9706%203%2021%207.02944%2021%2012Z%22%20stroke%3D%22%23818183%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-dasharray%3D%224%204%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E') 8 8, auto;
background: var(--code-bg);
color: var(--text-color);
padding: 15px;
border: 1px solid var(--code-border);
border-radius: 5px;
overflow-x: auto;
margin: 20px 0;
}
.code-block pre {
cursor: url('data:image/svg+xml,%3Csvg%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%3Cpath%20d%3D%22M21%2012C21%2016.9706%2016.9706%2021%2012%2021C7.02944%2021%203%2016.9706%203%2012C3%207.02944%207.02944%203%2012%203C16.9706%203%2021%207.02944%2021%2012Z%22%20stroke%3D%22%23818183%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-dasharray%3D%224%204%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E') 8 8, auto;
margin: 0;
font-family: 'Courier New', monospace;
font-size: 1rem;
line-height: 1.5;
}
.code-block code {
cursor: url('data:image/svg+xml,%3Csvg%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%3Cpath%20d%3D%22M21%2012C21%2016.9706%2016.9706%2021%2012%2021C7.02944%2021%203%2016.9706%203%2012C3%207.02944%207.02944%203%2012%203C16.9706%203%2021%207.02944%2021%2012Z%22%20stroke%3D%22%23818183%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-dasharray%3D%224%204%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E') 8 8, auto;
color: #4f93ea;
}
.footer {
flex-shrink: 0;
background: var(--footer-bg);
color: var(--footer-text-color);
text-align: center;
padding: 10px 0;
font-size: 0.9rem;
transition: background-color 0.3s ease, color 0.3s ease;
}
.cursor {
position: fixed;
border-radius: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
background-color: transparent;
z-index: 10000;
border: 2px solid #595959;
height: 30px;
width: 30px;
visibility: hidden;
transition: background-color 0.3s ease;
}
.cursor.visible {
visibility: visible;
}
.cursor.hover {
transform: translate(-50%, -50%) scale(1.2);
background-color: rgba(140, 140, 142, 0.1);
}
.cursor.click {
transform: translate(-50%, -50%) scale(0.9);
background-color: rgba(140, 140, 142, 0.3);
}
.cursor.no-hover {
transform: translate(-50%, -50%) scale(1);
background-color: transparent;
}
.page-404 p {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
height: 100%;
}
.theme-toggle {
cursor: url('data:image/svg+xml,%3Csvg%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20stroke%3D%22%23000000%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%3Cpath%20d%3D%22M21%2012C21%2016.9706%2016.9706%2021%2012%2021C7.02944%2021%203%2016.9706%203%2012C3%207.02944%207.02944%203%2012%203C16.9706%203%2021%207.02944%2021%2012Z%22%20stroke%3D%22%23818183%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E') 8 8, auto;
position: fixed;
top: 20px;
right: 20px;
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 30px;
}
.theme-switch {
cursor: url('data:image/svg+xml,%3Csvg%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20stroke%3D%22%23000000%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%3Cpath%20d%3D%22M21%2012C21%2016.9706%2016.9706%2021%2012%2021C7.02944%2021%203%2016.9706%203%2012C3%207.02944%207.02944%203%2012%203C16.9706%203%2021%207.02944%2021%2012Z%22%20stroke%3D%22%23818183%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E') 8 8, auto;
display: none;
}
.theme-slider {
cursor: url('data:image/svg+xml,%3Csvg%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20stroke%3D%22%23000000%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%3Cpath%20d%3D%22M21%2012C21%2016.9706%2016.9706%2021%2012%2021C7.02944%2021%203%2016.9706%203%2012C3%207.02944%207.02944%203%2012%203C16.9706%203%2021%207.02944%2021%2012Z%22%20stroke%3D%22%23818183%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E') 8 8, auto;
position: relative;
width: 60px;
height: 30px;
background: var(--link-bg);
border-radius: 50px;
transition: background-color 0.3s ease;
}
.theme-slider:before {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 24px;
height: 24px;
background: #ffeb3b; /* Initial sun yellow */
border-radius: 50%;
transition: transform 0.3s ease, background-color 0.3s ease;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}
.theme-switch:checked + .theme-slider:before {
transform: translateX(30px);
background: #03a9f4; /* Moon blue */
}
.theme-slider .icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 0.8rem;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.theme-slider .sun {
left: 6px;
color: #ffeb3b; /* Sun yellow */
opacity: 1;
visibility: visible;
}
.theme-slider .moon {
right: 6px;
color: #03a9f4; /* Moon blue */
opacity: 0;
visibility: hidden;
}
.theme-switch:checked + .theme-slider .sun {
opacity: 0;
visibility: hidden;
}
.theme-switch:checked + .theme-slider .moon {
opacity: 1;
visibility: visible;
}