coffeeinabit 0.0.22 → 0.0.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/public/styles.css CHANGED
@@ -1,490 +1,490 @@
1
- * {
2
- margin: 0;
3
- padding: 0;
4
- box-sizing: border-box;
5
- }
6
-
7
- body {
8
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
9
- background: linear-gradient(135deg, #2e6a82 0%, #0f3e44 50%, #073443 100%);
10
- background-attachment: fixed;
11
- min-height: 100vh;
12
- color: #ffffff;
13
- transition: all 0.3s ease;
14
- }
15
-
16
- body::before {
17
- content: '';
18
- position: fixed;
19
- top: 0;
20
- left: 0;
21
- width: 100%;
22
- height: 100%;
23
- background:
24
- radial-gradient(circle at 20% 50%, rgba(135, 206, 235, 0.3) 0%, transparent 50%),
25
- radial-gradient(circle at 80% 80%, rgba(176, 224, 230, 0.3) 0%, transparent 50%),
26
- radial-gradient(circle at 40% 20%, rgba(173, 216, 230, 0.3) 0%, transparent 50%);
27
- pointer-events: none;
28
- z-index: 0;
29
- }
30
-
31
- body > * {
32
- position: relative;
33
- z-index: 1;
34
- }
35
-
36
- .glass-button {
37
- background: rgba(255, 255, 255, 0.15);
38
- backdrop-filter: blur(10px);
39
- -webkit-backdrop-filter: blur(10px);
40
- border: 1px solid rgba(255, 255, 255, 0.2);
41
- border-radius: 12px;
42
- color: #ffffff !important;
43
- padding: 12px 24px;
44
- font-size: 16px;
45
- font-weight: 500;
46
- cursor: pointer;
47
- transition: all 0.3s ease;
48
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
49
- display: inline-flex;
50
- align-items: center;
51
- justify-content: center;
52
- gap: 8px;
53
- text-decoration: none;
54
- }
55
-
56
- .glass-button:link,
57
- .glass-button:visited {
58
- color: #ffffff !important;
59
- }
60
-
61
- .glass-button .bi {
62
- color: #ffffff !important;
63
- }
64
-
65
- .glass-button:hover {
66
- background: rgba(255, 255, 255, 0.25);
67
- border-color: rgba(255, 255, 255, 0.3);
68
- transform: translateY(-2px);
69
- box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
70
- color: #ffffff;
71
- }
72
-
73
- .glass-button:active {
74
- transform: translateY(0);
75
- }
76
-
77
- .glass-button:disabled {
78
- opacity: 0.6;
79
- cursor: not-allowed;
80
- transform: none;
81
- }
82
-
83
- .glass-button.btn-primary {
84
- background: rgba(79, 172, 254, 0.3);
85
- border-color: rgba(79, 172, 254, 0.4);
86
- }
87
-
88
- .glass-button.btn-primary:hover {
89
- background: rgba(79, 172, 254, 0.4);
90
- border-color: rgba(79, 172, 254, 0.5);
91
- }
92
-
93
- .glass-button.btn-danger {
94
- background: rgba(255, 99, 132, 0.3);
95
- border-color: rgba(255, 99, 132, 0.4);
96
- }
97
-
98
- .glass-button.btn-danger:hover {
99
- background: rgba(255, 99, 132, 0.4);
100
- border-color: rgba(255, 99, 132, 0.5);
101
- }
102
-
103
- .glass-link-button {
104
- background: rgba(255, 255, 255, 0.12);
105
- backdrop-filter: blur(10px);
106
- -webkit-backdrop-filter: blur(10px);
107
- border: 1px solid rgba(255, 255, 255, 0.18);
108
- border-radius: 12px;
109
- color: rgba(255, 255, 255, 0.9);
110
- padding: 12px 20px;
111
- display: inline-flex;
112
- align-items: center;
113
- gap: 8px;
114
- font-size: 15px;
115
- font-weight: 500;
116
- text-decoration: none;
117
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
118
- transition: all 0.3s ease;
119
- }
120
-
121
- .glass-link-button:hover {
122
- background: rgba(255, 255, 255, 0.18);
123
- border-color: rgba(255, 255, 255, 0.26);
124
- color: #ffffff;
125
- transform: translateY(-2px);
126
- box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
127
- }
128
-
129
- .glass-link-button:active {
130
- transform: translateY(0);
131
- }
132
-
133
- .glass-card {
134
- background: rgba(255, 255, 255, 0.1);
135
- backdrop-filter: blur(15px);
136
- -webkit-backdrop-filter: blur(15px);
137
- border: 1px solid rgba(255, 255, 255, 0.2);
138
- border-radius: 20px;
139
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
140
- padding: 2rem;
141
- transition: all 0.3s ease;
142
- }
143
-
144
- .glass-card:hover {
145
- background: rgba(255, 255, 255, 0.15);
146
- box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
147
- }
148
-
149
- .glass-navbar {
150
- background: rgba(255, 255, 255, 0.1) !important;
151
- backdrop-filter: blur(15px);
152
- -webkit-backdrop-filter: blur(15px);
153
- border-bottom: 1px solid rgba(255, 255, 255, 0.2);
154
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
155
- }
156
-
157
- .glass-navbar .navbar-brand {
158
- color: #ffffff !important;
159
- font-weight: 600;
160
- font-size: 1.25rem;
161
- }
162
-
163
- .glass-navbar .nav-link {
164
- color: rgba(255, 255, 255, 0.9) !important;
165
- transition: all 0.3s ease;
166
- }
167
-
168
- .glass-navbar .nav-link:hover {
169
- color: #ffffff !important;
170
- }
171
-
172
- .glass-dropdown {
173
- background: rgba(97, 97, 97, 0.5) !important;
174
- backdrop-filter: blur(15px);
175
- -webkit-backdrop-filter: blur(15px);
176
- border: 1px solid rgba(255, 255, 255, 0.3);
177
- border-radius: 12px;
178
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
179
- padding: 0.5rem 0;
180
- }
181
-
182
- .glass-dropdown .dropdown-item {
183
- color: rgba(255, 255, 255, 0.9);
184
- padding: 0.75rem 1.5rem;
185
- transition: all 0.2s ease;
186
- }
187
-
188
- .glass-dropdown .dropdown-item:hover {
189
- background: rgba(255, 255, 255, 0.2);
190
- color: #ffffff;
191
- }
192
-
193
- .glass-dropdown span,
194
- .glass-dropdown label {
195
- color: rgba(255, 255, 255, 0.9);
196
- }
197
-
198
- .glass-dropdown .dropdown-divider {
199
- border-color: rgba(255, 255, 255, 0.2);
200
- margin: 0.5rem 0;
201
- }
202
-
203
- .glass-dropdown strong {
204
- color: #ffffff;
205
- }
206
-
207
- .glass-dropdown small {
208
- color: rgba(255, 255, 255, 0.7);
209
- }
210
-
211
- .glass-dropdown .bi {
212
- color: rgba(255, 255, 255, 0.9);
213
- }
214
-
215
- .glass-badge {
216
- background: rgba(255, 255, 255, 0.2);
217
- backdrop-filter: blur(10px);
218
- -webkit-backdrop-filter: blur(10px);
219
- border: 1px solid rgba(255, 255, 255, 0.3);
220
- color: #ffffff;
221
- padding: 0.5rem 1rem;
222
- border-radius: 20px;
223
- font-weight: 500;
224
- font-size: 0.875rem;
225
- display: inline-flex;
226
- align-items: center;
227
- gap: 6px;
228
- line-height: 1;
229
- }
230
-
231
- .badge.bg-secondary {
232
- background: rgba(255, 255, 255, 0.2) !important;
233
- }
234
-
235
- .badge.bg-info {
236
- background: rgba(79, 172, 254, 0.3) !important;
237
- }
238
-
239
- .badge.bg-success {
240
- background: rgba(76, 175, 80, 0.3) !important;
241
- }
242
-
243
- .badge.bg-warning {
244
- background: rgba(255, 193, 7, 0.3) !important;
245
- }
246
-
247
- .badge.bg-danger {
248
- background: rgba(255, 99, 132, 0.3) !important;
249
- }
250
-
251
- .toast-container {
252
- position: fixed;
253
- bottom: 20px;
254
- right: 20px;
255
- z-index: 9999;
256
- display: flex;
257
- flex-direction: column;
258
- gap: 10px;
259
- max-width: 400px;
260
- }
261
-
262
- .toast-notification {
263
- background: rgba(255, 255, 255, 0.15);
264
- backdrop-filter: blur(15px);
265
- -webkit-backdrop-filter: blur(15px);
266
- border: 1px solid rgba(255, 255, 255, 0.2);
267
- border-radius: 12px;
268
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
269
- padding: 16px 20px;
270
- display: flex;
271
- align-items: center;
272
- gap: 12px;
273
- min-width: 300px;
274
- opacity: 0;
275
- transform: translateX(400px);
276
- animation: slideIn 0.3s ease-out forwards;
277
- transition: all 0.3s ease;
278
- color: #ffffff;
279
- }
280
-
281
- .toast-notification.removing {
282
- animation: slideOut 0.3s ease-in forwards;
283
- }
284
-
285
- .toast-notification.success {
286
- border-left: 4px solid rgba(76, 175, 80, 0.8);
287
- }
288
-
289
- .toast-notification.error {
290
- border-left: 4px solid rgba(255, 99, 132, 0.8);
291
- }
292
-
293
- .toast-notification.info {
294
- border-left: 4px solid rgba(79, 172, 254, 0.8);
295
- }
296
-
297
- .toast-notification.warning {
298
- border-left: 4px solid rgba(255, 193, 7, 0.8);
299
- }
300
-
301
- .toast-icon {
302
- font-size: 24px;
303
- flex-shrink: 0;
304
- }
305
-
306
- .toast-notification.success .toast-icon {
307
- color: rgba(76, 175, 80, 1);
308
- }
309
-
310
- .toast-notification.error .toast-icon {
311
- color: rgba(255, 99, 132, 1);
312
- }
313
-
314
- .toast-notification.info .toast-icon {
315
- color: rgba(79, 172, 254, 1);
316
- }
317
-
318
- .toast-notification.warning .toast-icon {
319
- color: rgba(255, 193, 7, 1);
320
- }
321
-
322
- .toast-content {
323
- flex: 1;
324
- color: #ffffff;
325
- }
326
-
327
- .toast-content strong {
328
- display: block;
329
- margin-bottom: 4px;
330
- font-size: 14px;
331
- font-weight: 600;
332
- color: #ffffff;
333
- }
334
-
335
- .toast-content p {
336
- margin: 0;
337
- font-size: 13px;
338
- color: rgba(255, 255, 255, 0.9);
339
- }
340
-
341
- .toast-close {
342
- background: none;
343
- border: none;
344
- font-size: 20px;
345
- color: rgba(255, 255, 255, 0.7);
346
- cursor: pointer;
347
- padding: 0;
348
- width: 24px;
349
- height: 24px;
350
- display: flex;
351
- align-items: center;
352
- justify-content: center;
353
- flex-shrink: 0;
354
- transition: color 0.2s;
355
- }
356
-
357
- .toast-close:hover {
358
- color: #ffffff;
359
- }
360
-
361
- @keyframes slideIn {
362
- to {
363
- opacity: 1;
364
- transform: translateX(0);
365
- }
366
- }
367
-
368
- @keyframes slideOut {
369
- to {
370
- opacity: 0;
371
- transform: translateX(400px);
372
- }
373
- }
374
-
375
- .form-check-input {
376
- background-color: rgba(255, 255, 255, 0.2);
377
- border-color: rgba(255, 255, 255, 0.3);
378
- }
379
-
380
- .form-check-input:checked {
381
- background-color: rgba(79, 172, 254, 0.8);
382
- border-color: rgba(79, 172, 254, 0.8);
383
- }
384
-
385
- .text-muted {
386
- color: rgba(255, 255, 255, 0.7) !important;
387
- }
388
-
389
- .text-primary {
390
- color: rgba(79, 172, 254, 1) !important;
391
- }
392
-
393
- a:not(.btn):not(.dropdown-item) {
394
- color: rgba(79, 172, 254, 1);
395
- text-decoration: none;
396
- transition: color 0.2s ease;
397
- }
398
-
399
- a:not(.btn):not(.dropdown-item):hover {
400
- color: rgba(79, 172, 254, 0.8);
401
- }
402
-
403
- #browserViewToggle {
404
- color: rgba(255, 255, 255, 0.9);
405
- transition: all 0.2s ease;
406
- background: none;
407
- border: none;
408
- padding: 0;
409
- }
410
-
411
- #browserViewToggle:hover {
412
- color: rgba(79, 172, 254, 1);
413
- }
414
-
415
- #browserViewChevron {
416
- transition: transform 0.2s ease;
417
- }
418
-
419
- .card {
420
- background: rgba(255, 255, 255, 0.1);
421
- backdrop-filter: blur(15px);
422
- -webkit-backdrop-filter: blur(15px);
423
- border: 1px solid rgba(255, 255, 255, 0.2);
424
- border-radius: 20px;
425
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
426
- color: #ffffff;
427
- }
428
-
429
- .card-header {
430
- background: rgba(255, 255, 255, 0.0) !important;
431
- border-bottom: none;
432
- }
433
-
434
- .card-title {
435
- color: #ffffff;
436
- }
437
-
438
- .shadow-sm {
439
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
440
- }
441
-
442
- .shadow-lg {
443
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
444
- }
445
-
446
- .border {
447
- border-color: rgba(255, 255, 255, 0.2) !important;
448
- }
449
-
450
- .bg-light {
451
- background: transparent !important;
452
- }
453
-
454
- .bg-white {
455
- background: rgba(255, 255, 255, 0.1) !important;
456
- }
457
-
458
- .bg-primary {
459
- background: rgba(79, 172, 254, 0.3) !important;
460
- }
461
-
462
- .btn-link {
463
- color: rgba(255, 255, 255, 0.9);
464
- }
465
-
466
- .btn-link:hover {
467
- color: rgba(79, 172, 254, 1);
468
- }
469
-
470
- img {
471
- border-radius: 12px;
472
- }
473
-
474
- .container-fluid {
475
- position: relative;
476
- z-index: 1;
477
- }
478
-
479
- .navbar {
480
- position: relative;
481
- z-index: 100;
482
- }
483
-
484
- h1, h2, h3, h4, h5, h6 {
485
- color: #ffffff;
486
- }
487
-
488
- h1.h3 {
489
- color: #ffffff;
490
- }
1
+ * {
2
+ margin: 0;
3
+ padding: 0;
4
+ box-sizing: border-box;
5
+ }
6
+
7
+ body {
8
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
9
+ background: linear-gradient(135deg, #2e6a82 0%, #0f3e44 50%, #073443 100%);
10
+ background-attachment: fixed;
11
+ min-height: 100vh;
12
+ color: #ffffff;
13
+ transition: all 0.3s ease;
14
+ }
15
+
16
+ body::before {
17
+ content: '';
18
+ position: fixed;
19
+ top: 0;
20
+ left: 0;
21
+ width: 100%;
22
+ height: 100%;
23
+ background:
24
+ radial-gradient(circle at 20% 50%, rgba(135, 206, 235, 0.3) 0%, transparent 50%),
25
+ radial-gradient(circle at 80% 80%, rgba(176, 224, 230, 0.3) 0%, transparent 50%),
26
+ radial-gradient(circle at 40% 20%, rgba(173, 216, 230, 0.3) 0%, transparent 50%);
27
+ pointer-events: none;
28
+ z-index: 0;
29
+ }
30
+
31
+ body > * {
32
+ position: relative;
33
+ z-index: 1;
34
+ }
35
+
36
+ .glass-button {
37
+ background: rgba(255, 255, 255, 0.15);
38
+ backdrop-filter: blur(10px);
39
+ -webkit-backdrop-filter: blur(10px);
40
+ border: 1px solid rgba(255, 255, 255, 0.2);
41
+ border-radius: 12px;
42
+ color: #ffffff !important;
43
+ padding: 12px 24px;
44
+ font-size: 16px;
45
+ font-weight: 500;
46
+ cursor: pointer;
47
+ transition: all 0.3s ease;
48
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
49
+ display: inline-flex;
50
+ align-items: center;
51
+ justify-content: center;
52
+ gap: 8px;
53
+ text-decoration: none;
54
+ }
55
+
56
+ .glass-button:link,
57
+ .glass-button:visited {
58
+ color: #ffffff !important;
59
+ }
60
+
61
+ .glass-button .bi {
62
+ color: #ffffff !important;
63
+ }
64
+
65
+ .glass-button:hover {
66
+ background: rgba(255, 255, 255, 0.25);
67
+ border-color: rgba(255, 255, 255, 0.3);
68
+ transform: translateY(-2px);
69
+ box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
70
+ color: #ffffff;
71
+ }
72
+
73
+ .glass-button:active {
74
+ transform: translateY(0);
75
+ }
76
+
77
+ .glass-button:disabled {
78
+ opacity: 0.6;
79
+ cursor: not-allowed;
80
+ transform: none;
81
+ }
82
+
83
+ .glass-button.btn-primary {
84
+ background: rgba(79, 172, 254, 0.3);
85
+ border-color: rgba(79, 172, 254, 0.4);
86
+ }
87
+
88
+ .glass-button.btn-primary:hover {
89
+ background: rgba(79, 172, 254, 0.4);
90
+ border-color: rgba(79, 172, 254, 0.5);
91
+ }
92
+
93
+ .glass-button.btn-danger {
94
+ background: rgba(255, 99, 132, 0.3);
95
+ border-color: rgba(255, 99, 132, 0.4);
96
+ }
97
+
98
+ .glass-button.btn-danger:hover {
99
+ background: rgba(255, 99, 132, 0.4);
100
+ border-color: rgba(255, 99, 132, 0.5);
101
+ }
102
+
103
+ .glass-link-button {
104
+ background: rgba(255, 255, 255, 0.12);
105
+ backdrop-filter: blur(10px);
106
+ -webkit-backdrop-filter: blur(10px);
107
+ border: 1px solid rgba(255, 255, 255, 0.18);
108
+ border-radius: 12px;
109
+ color: rgba(255, 255, 255, 0.9);
110
+ padding: 12px 20px;
111
+ display: inline-flex;
112
+ align-items: center;
113
+ gap: 8px;
114
+ font-size: 15px;
115
+ font-weight: 500;
116
+ text-decoration: none;
117
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
118
+ transition: all 0.3s ease;
119
+ }
120
+
121
+ .glass-link-button:hover {
122
+ background: rgba(255, 255, 255, 0.18);
123
+ border-color: rgba(255, 255, 255, 0.26);
124
+ color: #ffffff;
125
+ transform: translateY(-2px);
126
+ box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
127
+ }
128
+
129
+ .glass-link-button:active {
130
+ transform: translateY(0);
131
+ }
132
+
133
+ .glass-card {
134
+ background: rgba(255, 255, 255, 0.1);
135
+ backdrop-filter: blur(15px);
136
+ -webkit-backdrop-filter: blur(15px);
137
+ border: 1px solid rgba(255, 255, 255, 0.2);
138
+ border-radius: 20px;
139
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
140
+ padding: 2rem;
141
+ transition: all 0.3s ease;
142
+ }
143
+
144
+ .glass-card:hover {
145
+ background: rgba(255, 255, 255, 0.15);
146
+ box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
147
+ }
148
+
149
+ .glass-navbar {
150
+ background: rgba(255, 255, 255, 0.1) !important;
151
+ backdrop-filter: blur(15px);
152
+ -webkit-backdrop-filter: blur(15px);
153
+ border-bottom: 1px solid rgba(255, 255, 255, 0.2);
154
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
155
+ }
156
+
157
+ .glass-navbar .navbar-brand {
158
+ color: #ffffff !important;
159
+ font-weight: 600;
160
+ font-size: 1.25rem;
161
+ }
162
+
163
+ .glass-navbar .nav-link {
164
+ color: rgba(255, 255, 255, 0.9) !important;
165
+ transition: all 0.3s ease;
166
+ }
167
+
168
+ .glass-navbar .nav-link:hover {
169
+ color: #ffffff !important;
170
+ }
171
+
172
+ .glass-dropdown {
173
+ background: rgba(97, 97, 97, 0.5) !important;
174
+ backdrop-filter: blur(15px);
175
+ -webkit-backdrop-filter: blur(15px);
176
+ border: 1px solid rgba(255, 255, 255, 0.3);
177
+ border-radius: 12px;
178
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
179
+ padding: 0.5rem 0;
180
+ }
181
+
182
+ .glass-dropdown .dropdown-item {
183
+ color: rgba(255, 255, 255, 0.9);
184
+ padding: 0.75rem 1.5rem;
185
+ transition: all 0.2s ease;
186
+ }
187
+
188
+ .glass-dropdown .dropdown-item:hover {
189
+ background: rgba(255, 255, 255, 0.2);
190
+ color: #ffffff;
191
+ }
192
+
193
+ .glass-dropdown span,
194
+ .glass-dropdown label {
195
+ color: rgba(255, 255, 255, 0.9);
196
+ }
197
+
198
+ .glass-dropdown .dropdown-divider {
199
+ border-color: rgba(255, 255, 255, 0.2);
200
+ margin: 0.5rem 0;
201
+ }
202
+
203
+ .glass-dropdown strong {
204
+ color: #ffffff;
205
+ }
206
+
207
+ .glass-dropdown small {
208
+ color: rgba(255, 255, 255, 0.7);
209
+ }
210
+
211
+ .glass-dropdown .bi {
212
+ color: rgba(255, 255, 255, 0.9);
213
+ }
214
+
215
+ .glass-badge {
216
+ background: rgba(255, 255, 255, 0.2);
217
+ backdrop-filter: blur(10px);
218
+ -webkit-backdrop-filter: blur(10px);
219
+ border: 1px solid rgba(255, 255, 255, 0.3);
220
+ color: #ffffff;
221
+ padding: 0.5rem 1rem;
222
+ border-radius: 20px;
223
+ font-weight: 500;
224
+ font-size: 0.875rem;
225
+ display: inline-flex;
226
+ align-items: center;
227
+ gap: 6px;
228
+ line-height: 1;
229
+ }
230
+
231
+ .badge.bg-secondary {
232
+ background: rgba(255, 255, 255, 0.2) !important;
233
+ }
234
+
235
+ .badge.bg-info {
236
+ background: rgba(79, 172, 254, 0.3) !important;
237
+ }
238
+
239
+ .badge.bg-success {
240
+ background: rgba(76, 175, 80, 0.3) !important;
241
+ }
242
+
243
+ .badge.bg-warning {
244
+ background: rgba(255, 193, 7, 0.3) !important;
245
+ }
246
+
247
+ .badge.bg-danger {
248
+ background: rgba(255, 99, 132, 0.3) !important;
249
+ }
250
+
251
+ .toast-container {
252
+ position: fixed;
253
+ bottom: 20px;
254
+ right: 20px;
255
+ z-index: 9999;
256
+ display: flex;
257
+ flex-direction: column;
258
+ gap: 10px;
259
+ max-width: 400px;
260
+ }
261
+
262
+ .toast-notification {
263
+ background: rgba(255, 255, 255, 0.15);
264
+ backdrop-filter: blur(15px);
265
+ -webkit-backdrop-filter: blur(15px);
266
+ border: 1px solid rgba(255, 255, 255, 0.2);
267
+ border-radius: 12px;
268
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
269
+ padding: 16px 20px;
270
+ display: flex;
271
+ align-items: center;
272
+ gap: 12px;
273
+ min-width: 300px;
274
+ opacity: 0;
275
+ transform: translateX(400px);
276
+ animation: slideIn 0.3s ease-out forwards;
277
+ transition: all 0.3s ease;
278
+ color: #ffffff;
279
+ }
280
+
281
+ .toast-notification.removing {
282
+ animation: slideOut 0.3s ease-in forwards;
283
+ }
284
+
285
+ .toast-notification.success {
286
+ border-left: 4px solid rgba(76, 175, 80, 0.8);
287
+ }
288
+
289
+ .toast-notification.error {
290
+ border-left: 4px solid rgba(255, 99, 132, 0.8);
291
+ }
292
+
293
+ .toast-notification.info {
294
+ border-left: 4px solid rgba(79, 172, 254, 0.8);
295
+ }
296
+
297
+ .toast-notification.warning {
298
+ border-left: 4px solid rgba(255, 193, 7, 0.8);
299
+ }
300
+
301
+ .toast-icon {
302
+ font-size: 24px;
303
+ flex-shrink: 0;
304
+ }
305
+
306
+ .toast-notification.success .toast-icon {
307
+ color: rgba(76, 175, 80, 1);
308
+ }
309
+
310
+ .toast-notification.error .toast-icon {
311
+ color: rgba(255, 99, 132, 1);
312
+ }
313
+
314
+ .toast-notification.info .toast-icon {
315
+ color: rgba(79, 172, 254, 1);
316
+ }
317
+
318
+ .toast-notification.warning .toast-icon {
319
+ color: rgba(255, 193, 7, 1);
320
+ }
321
+
322
+ .toast-content {
323
+ flex: 1;
324
+ color: #ffffff;
325
+ }
326
+
327
+ .toast-content strong {
328
+ display: block;
329
+ margin-bottom: 4px;
330
+ font-size: 14px;
331
+ font-weight: 600;
332
+ color: #ffffff;
333
+ }
334
+
335
+ .toast-content p {
336
+ margin: 0;
337
+ font-size: 13px;
338
+ color: rgba(255, 255, 255, 0.9);
339
+ }
340
+
341
+ .toast-close {
342
+ background: none;
343
+ border: none;
344
+ font-size: 20px;
345
+ color: rgba(255, 255, 255, 0.7);
346
+ cursor: pointer;
347
+ padding: 0;
348
+ width: 24px;
349
+ height: 24px;
350
+ display: flex;
351
+ align-items: center;
352
+ justify-content: center;
353
+ flex-shrink: 0;
354
+ transition: color 0.2s;
355
+ }
356
+
357
+ .toast-close:hover {
358
+ color: #ffffff;
359
+ }
360
+
361
+ @keyframes slideIn {
362
+ to {
363
+ opacity: 1;
364
+ transform: translateX(0);
365
+ }
366
+ }
367
+
368
+ @keyframes slideOut {
369
+ to {
370
+ opacity: 0;
371
+ transform: translateX(400px);
372
+ }
373
+ }
374
+
375
+ .form-check-input {
376
+ background-color: rgba(255, 255, 255, 0.2);
377
+ border-color: rgba(255, 255, 255, 0.3);
378
+ }
379
+
380
+ .form-check-input:checked {
381
+ background-color: rgba(79, 172, 254, 0.8);
382
+ border-color: rgba(79, 172, 254, 0.8);
383
+ }
384
+
385
+ .text-muted {
386
+ color: rgba(255, 255, 255, 0.7) !important;
387
+ }
388
+
389
+ .text-primary {
390
+ color: rgba(79, 172, 254, 1) !important;
391
+ }
392
+
393
+ a:not(.btn):not(.dropdown-item) {
394
+ color: rgba(79, 172, 254, 1);
395
+ text-decoration: none;
396
+ transition: color 0.2s ease;
397
+ }
398
+
399
+ a:not(.btn):not(.dropdown-item):hover {
400
+ color: rgba(79, 172, 254, 0.8);
401
+ }
402
+
403
+ #browserViewToggle {
404
+ color: rgba(255, 255, 255, 0.9);
405
+ transition: all 0.2s ease;
406
+ background: none;
407
+ border: none;
408
+ padding: 0;
409
+ }
410
+
411
+ #browserViewToggle:hover {
412
+ color: rgba(79, 172, 254, 1);
413
+ }
414
+
415
+ #browserViewChevron {
416
+ transition: transform 0.2s ease;
417
+ }
418
+
419
+ .card {
420
+ background: rgba(255, 255, 255, 0.1);
421
+ backdrop-filter: blur(15px);
422
+ -webkit-backdrop-filter: blur(15px);
423
+ border: 1px solid rgba(255, 255, 255, 0.2);
424
+ border-radius: 20px;
425
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
426
+ color: #ffffff;
427
+ }
428
+
429
+ .card-header {
430
+ background: rgba(255, 255, 255, 0.0) !important;
431
+ border-bottom: none;
432
+ }
433
+
434
+ .card-title {
435
+ color: #ffffff;
436
+ }
437
+
438
+ .shadow-sm {
439
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
440
+ }
441
+
442
+ .shadow-lg {
443
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
444
+ }
445
+
446
+ .border {
447
+ border-color: rgba(255, 255, 255, 0.2) !important;
448
+ }
449
+
450
+ .bg-light {
451
+ background: transparent !important;
452
+ }
453
+
454
+ .bg-white {
455
+ background: rgba(255, 255, 255, 0.1) !important;
456
+ }
457
+
458
+ .bg-primary {
459
+ background: rgba(79, 172, 254, 0.3) !important;
460
+ }
461
+
462
+ .btn-link {
463
+ color: rgba(255, 255, 255, 0.9);
464
+ }
465
+
466
+ .btn-link:hover {
467
+ color: rgba(79, 172, 254, 1);
468
+ }
469
+
470
+ img {
471
+ border-radius: 12px;
472
+ }
473
+
474
+ .container-fluid {
475
+ position: relative;
476
+ z-index: 1;
477
+ }
478
+
479
+ .navbar {
480
+ position: relative;
481
+ z-index: 100;
482
+ }
483
+
484
+ h1, h2, h3, h4, h5, h6 {
485
+ color: #ffffff;
486
+ }
487
+
488
+ h1.h3 {
489
+ color: #ffffff;
490
+ }