@moraby/app-launcher 2.0.2 → 2.0.3

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.
Files changed (7) hide show
  1. package/dist/index.css +1 -754
  2. package/dist/index.js +1 -775
  3. package/dist/index.mjs +1 -785
  4. package/package.json +1 -1
  5. package/dist/index.css.map +0 -1
  6. package/dist/index.js.map +0 -1
  7. package/dist/index.mjs.map +0 -1
package/dist/index.css CHANGED
@@ -1,754 +1 @@
1
- /* src/styles.css */
2
- .app-launcher,
3
- .app-settings__overlay {
4
- --al-bg: #ffffff;
5
- --al-bg-hover: rgba(0, 0, 0, 0.04);
6
- --al-bg-focus: rgba(0, 0, 0, 0.08);
7
- --al-text: #3c4043;
8
- --al-text-secondary: #5f6368;
9
- --al-text-error: #d93025;
10
- --al-border: #e0e0e0;
11
- --al-shadow: 0 2px 10px rgba(0, 0, 0, 0.1), 0 8px 40px rgba(0, 0, 0, 0.2);
12
- --al-trigger-bg-hover: rgba(0, 0, 0, 0.08);
13
- --al-trigger-bg-focus: rgba(0, 0, 0, 0.12);
14
- --al-footer-bg: #fafafa;
15
- --al-scrollbar: #dadce0;
16
- --al-overlay-bg: rgba(0, 0, 0, 0.5);
17
- --al-primary: #4285F4;
18
- --al-primary-hover: #3367d6;
19
- --al-primary-text: #ffffff;
20
- position: relative;
21
- display: inline-flex;
22
- align-items: center;
23
- }
24
- @media (prefers-color-scheme: dark) {
25
- .app-launcher,
26
- .app-settings__overlay {
27
- --al-bg: #202124;
28
- --al-bg-hover: rgba(255, 255, 255, 0.08);
29
- --al-bg-focus: rgba(255, 255, 255, 0.12);
30
- --al-text: #e8eaed;
31
- --al-text-secondary: #9aa0a6;
32
- --al-text-error: #f28b82;
33
- --al-border: #3c4043;
34
- --al-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 8px 40px rgba(0, 0, 0, 0.5);
35
- --al-trigger-bg-hover: rgba(255, 255, 255, 0.1);
36
- --al-trigger-bg-focus: rgba(255, 255, 255, 0.15);
37
- --al-footer-bg: #292a2d;
38
- --al-scrollbar: #5f6368;
39
- --al-overlay-bg: rgba(0, 0, 0, 0.7);
40
- --al-primary: #8ab4f8;
41
- --al-primary-hover: #aecbfa;
42
- --al-primary-text: #202124;
43
- }
44
- }
45
- html.dark .app-launcher,
46
- :root.dark .app-launcher,
47
- .dark .app-launcher,
48
- .app-launcher.app-launcher--dark,
49
- html.dark .app-settings__overlay,
50
- :root.dark .app-settings__overlay,
51
- .dark .app-settings__overlay {
52
- --al-bg: #202124;
53
- --al-bg-hover: rgba(255, 255, 255, 0.08);
54
- --al-bg-focus: rgba(255, 255, 255, 0.12);
55
- --al-text: #e8eaed;
56
- --al-text-secondary: #9aa0a6;
57
- --al-text-error: #f28b82;
58
- --al-border: #3c4043;
59
- --al-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 8px 40px rgba(0, 0, 0, 0.5);
60
- --al-trigger-bg-hover: rgba(255, 255, 255, 0.1);
61
- --al-trigger-bg-focus: rgba(255, 255, 255, 0.15);
62
- --al-footer-bg: #292a2d;
63
- --al-scrollbar: #5f6368;
64
- --al-overlay-bg: rgba(0, 0, 0, 0.7);
65
- --al-primary: #8ab4f8;
66
- --al-primary-hover: #aecbfa;
67
- --al-primary-text: #202124;
68
- }
69
- .app-launcher__trigger {
70
- display: flex;
71
- align-items: center;
72
- justify-content: center;
73
- width: 40px;
74
- height: 40px;
75
- border: none;
76
- background: transparent;
77
- border-radius: 50%;
78
- cursor: pointer;
79
- transition: background-color 0.2s ease;
80
- }
81
- .app-launcher__trigger:hover {
82
- background-color: var(--al-trigger-bg-hover);
83
- }
84
- .app-launcher__trigger:focus {
85
- outline: none;
86
- background-color: var(--al-trigger-bg-focus);
87
- }
88
- .app-launcher__trigger-icon {
89
- font-size: 24px;
90
- color: var(--al-text-secondary);
91
- }
92
- .app-launcher__dropdown {
93
- position: absolute;
94
- top: calc(100% + 8px);
95
- right: 0;
96
- width: 336px;
97
- max-height: 70vh;
98
- overflow-y: auto;
99
- background-color: var(--al-bg);
100
- border-radius: 8px;
101
- box-shadow: var(--al-shadow);
102
- z-index: 9999;
103
- animation: app-launcher-slide-in 0.15s ease-out;
104
- }
105
- @keyframes app-launcher-slide-in {
106
- from {
107
- opacity: 0;
108
- transform: translateY(-8px) scale(0.98);
109
- }
110
- to {
111
- opacity: 1;
112
- transform: translateY(0) scale(1);
113
- }
114
- }
115
- .app-launcher__grid {
116
- display: grid;
117
- grid-template-columns: repeat(3, 1fr);
118
- gap: 4px;
119
- padding: 16px 8px;
120
- }
121
- .app-launcher__item {
122
- display: flex;
123
- flex-direction: column;
124
- align-items: center;
125
- justify-content: center;
126
- padding: 12px 8px;
127
- border: none;
128
- background: transparent;
129
- border-radius: 8px;
130
- cursor: pointer;
131
- transition: background-color 0.15s ease;
132
- min-height: 90px;
133
- }
134
- .app-launcher__item:hover {
135
- background-color: var(--al-bg-hover);
136
- }
137
- .app-launcher__item:focus {
138
- outline: none;
139
- background-color: var(--al-bg-focus);
140
- }
141
- .app-launcher__icon-wrapper {
142
- display: flex;
143
- align-items: center;
144
- justify-content: center;
145
- width: 48px;
146
- height: 48px;
147
- margin-bottom: 8px;
148
- }
149
- .app-launcher__icon {
150
- font-size: 32px;
151
- transition: transform 0.15s ease;
152
- }
153
- .app-launcher__item:hover .app-launcher__icon {
154
- transform: scale(1.1);
155
- }
156
- .app-launcher__icon--custom {
157
- width: 32px;
158
- height: 32px;
159
- object-fit: contain;
160
- }
161
- .app-launcher__icon--svg {
162
- width: 32px;
163
- height: 32px;
164
- mask-size: contain;
165
- mask-repeat: no-repeat;
166
- mask-position: center;
167
- -webkit-mask-size: contain;
168
- -webkit-mask-repeat: no-repeat;
169
- -webkit-mask-position: center;
170
- }
171
- .app-launcher__name {
172
- font-family:
173
- "Google Sans",
174
- "Roboto",
175
- -apple-system,
176
- BlinkMacSystemFont,
177
- sans-serif;
178
- font-size: 13px;
179
- font-weight: 400;
180
- color: var(--al-text);
181
- text-align: center;
182
- line-height: 1.3;
183
- max-width: 100%;
184
- overflow: hidden;
185
- text-overflow: ellipsis;
186
- white-space: nowrap;
187
- }
188
- .app-launcher__loading,
189
- .app-launcher__error {
190
- padding: 24px;
191
- text-align: center;
192
- font-size: 14px;
193
- color: var(--al-text-secondary);
194
- }
195
- .app-launcher__error {
196
- color: var(--al-text-error);
197
- }
198
- .app-launcher__dropdown::-webkit-scrollbar,
199
- .app-settings__content::-webkit-scrollbar {
200
- width: 8px;
201
- }
202
- .app-launcher__dropdown::-webkit-scrollbar-track,
203
- .app-settings__content::-webkit-scrollbar-track {
204
- background: transparent;
205
- }
206
- .app-launcher__dropdown::-webkit-scrollbar-thumb,
207
- .app-settings__content::-webkit-scrollbar-thumb {
208
- background-color: var(--al-scrollbar);
209
- border-radius: 4px;
210
- }
211
- .app-launcher__footer {
212
- display: flex;
213
- justify-content: center;
214
- padding: 12px 16px;
215
- border-top: 1px solid var(--al-border);
216
- background: var(--al-footer-bg);
217
- }
218
- @media (max-width: 400px) {
219
- .app-launcher__dropdown {
220
- width: 280px;
221
- right: -8px;
222
- }
223
- .app-launcher__icon-wrapper {
224
- width: 40px;
225
- height: 40px;
226
- }
227
- .app-launcher__icon {
228
- font-size: 28px;
229
- }
230
- .app-launcher__name {
231
- font-size: 12px;
232
- }
233
- }
234
- .app-settings__overlay {
235
- position: fixed;
236
- top: 0;
237
- left: 0;
238
- right: 0;
239
- bottom: 0;
240
- width: 100vw;
241
- height: 100vh;
242
- background: var(--al-overlay-bg);
243
- display: flex;
244
- align-items: center;
245
- justify-content: center;
246
- z-index: 9999;
247
- animation: app-settings-fade-in 0.15s ease-out;
248
- color: var(--al-text);
249
- }
250
- @keyframes app-settings-fade-in {
251
- from {
252
- opacity: 0;
253
- }
254
- to {
255
- opacity: 1;
256
- }
257
- }
258
- .app-settings__modal {
259
- position: relative;
260
- width: 100%;
261
- max-width: 480px;
262
- max-height: 85vh;
263
- margin: 20px;
264
- background: var(--al-bg);
265
- border-radius: 16px;
266
- box-shadow: var(--al-shadow);
267
- display: flex;
268
- flex-direction: column;
269
- animation: app-settings-slide-up 0.2s ease-out;
270
- overflow: hidden;
271
- }
272
- @keyframes app-settings-slide-up {
273
- from {
274
- opacity: 0;
275
- transform: translateY(20px) scale(0.98);
276
- }
277
- to {
278
- opacity: 1;
279
- transform: translateY(0) scale(1);
280
- }
281
- }
282
- .app-settings__header {
283
- display: flex;
284
- align-items: center;
285
- justify-content: space-between;
286
- padding: 20px 24px;
287
- border-bottom: 1px solid var(--al-border);
288
- background: var(--al-bg);
289
- min-height: 36px;
290
- flex-shrink: 0;
291
- }
292
- .app-settings__title {
293
- font-size: 18px;
294
- font-weight: 600;
295
- color: var(--al-text);
296
- margin: 0;
297
- font-family:
298
- "Google Sans",
299
- "Roboto",
300
- sans-serif;
301
- }
302
- .app-settings__close-button {
303
- display: flex;
304
- align-items: center;
305
- justify-content: center;
306
- width: 36px;
307
- height: 36px;
308
- border: none;
309
- background: transparent;
310
- border-radius: 50%;
311
- cursor: pointer;
312
- color: var(--al-text-secondary);
313
- transition: background 0.2s;
314
- }
315
- .app-settings__close-button:hover {
316
- background: var(--al-bg-hover);
317
- }
318
- .app-settings__content {
319
- flex: 1;
320
- overflow-y: auto;
321
- padding: 24px;
322
- }
323
- .app-settings__add-button {
324
- display: flex;
325
- align-items: center;
326
- justify-content: center;
327
- gap: 8px;
328
- width: 100%;
329
- padding: 14px;
330
- border: 2px dashed var(--al-border);
331
- border-radius: 12px;
332
- background: transparent;
333
- font-size: 14px;
334
- font-weight: 500;
335
- color: var(--al-text-secondary);
336
- cursor: pointer;
337
- transition: all 0.2s;
338
- margin-bottom: 24px;
339
- font-family: inherit;
340
- }
341
- .app-settings__add-button:hover {
342
- border-color: var(--al-primary);
343
- color: var(--al-primary);
344
- background: var(--al-bg-hover);
345
- }
346
- .app-settings__add-icon {
347
- font-size: 16px;
348
- }
349
- .app-settings__list {
350
- margin-bottom: 16px;
351
- }
352
- .app-settings__section-title {
353
- font-size: 13px;
354
- font-weight: 600;
355
- color: var(--al-text-secondary);
356
- text-transform: uppercase;
357
- letter-spacing: 0.5px;
358
- margin-bottom: 12px;
359
- font-family: inherit;
360
- }
361
- .app-settings__empty-message {
362
- text-align: center;
363
- color: var(--al-text-secondary);
364
- font-size: 14px;
365
- padding: 24px;
366
- background: var(--al-bg-hover);
367
- border-radius: 8px;
368
- }
369
- .app-settings__grid {
370
- display: flex;
371
- flex-direction: column;
372
- gap: 8px;
373
- }
374
- .app-settings__card {
375
- display: flex;
376
- align-items: center;
377
- justify-content: space-between;
378
- padding: 12px;
379
- background: var(--al-bg-hover);
380
- border-radius: 12px;
381
- transition: background 0.2s;
382
- }
383
- .app-settings__card:hover {
384
- background: var(--al-bg-focus);
385
- }
386
- .app-settings__card-info {
387
- display: flex;
388
- align-items: center;
389
- gap: 12px;
390
- min-width: 0;
391
- flex: 1;
392
- }
393
- .app-settings__card-icon {
394
- display: flex;
395
- align-items: center;
396
- justify-content: center;
397
- width: 40px;
398
- height: 40px;
399
- border-radius: 10px;
400
- font-size: 20px;
401
- flex-shrink: 0;
402
- }
403
- .app-settings__card-details {
404
- display: flex;
405
- flex-direction: column;
406
- min-width: 0;
407
- }
408
- .app-settings__card-name {
409
- font-size: 14px;
410
- font-weight: 500;
411
- color: var(--al-text);
412
- font-family: inherit;
413
- }
414
- .app-settings__card-url {
415
- font-size: 12px;
416
- color: var(--al-text-secondary);
417
- overflow: hidden;
418
- text-overflow: ellipsis;
419
- white-space: nowrap;
420
- font-family: inherit;
421
- }
422
- .app-settings__card-actions {
423
- display: flex;
424
- gap: 4px;
425
- }
426
- .app-settings__action-button {
427
- display: flex;
428
- align-items: center;
429
- justify-content: center;
430
- width: 32px;
431
- height: 32px;
432
- border: none;
433
- background: transparent;
434
- border-radius: 8px;
435
- cursor: pointer;
436
- color: var(--al-text-secondary);
437
- transition: all 0.15s;
438
- }
439
- .app-settings__action-button:hover {
440
- background: var(--al-bg-focus);
441
- color: var(--al-text);
442
- }
443
- .app-settings__action-button--delete:hover {
444
- background: rgba(217, 48, 37, 0.1);
445
- color: var(--al-text-error);
446
- }
447
- .app-settings__export-button {
448
- display: flex;
449
- align-items: center;
450
- justify-content: center;
451
- gap: 8px;
452
- width: 100%;
453
- padding: 12px;
454
- margin-bottom: 16px;
455
- border: 1px solid #34A853;
456
- border-radius: 8px;
457
- background: #e6f4ea;
458
- font-size: 14px;
459
- font-weight: 500;
460
- color: #137333;
461
- cursor: pointer;
462
- transition: all 0.2s;
463
- font-family: inherit;
464
- }
465
- @media (prefers-color-scheme: dark) {
466
- .app-settings__export-button {
467
- background: rgba(52, 168, 83, 0.2);
468
- color: #81c995;
469
- border-color: #81c995;
470
- }
471
- }
472
- .app-settings__export-button:hover {
473
- background: #ceead6;
474
- border-color: #137333;
475
- }
476
- @media (prefers-color-scheme: dark) {
477
- .app-settings__export-button:hover {
478
- background: rgba(52, 168, 83, 0.3);
479
- }
480
- }
481
- .app-settings__export-icon {
482
- font-size: 14px;
483
- }
484
- .app-settings__info {
485
- padding: 12px;
486
- background: #e8f0fe;
487
- border-radius: 8px;
488
- font-size: 13px;
489
- color: #1967d2;
490
- }
491
- @media (prefers-color-scheme: dark) {
492
- .app-settings__info {
493
- background: rgba(138, 180, 248, 0.2);
494
- color: #8ab4f8;
495
- }
496
- }
497
- .app-settings__info p {
498
- margin: 0;
499
- font-family: inherit;
500
- }
501
- .app-launcher-form {
502
- display: flex;
503
- flex-direction: column;
504
- gap: 16px;
505
- }
506
- .app-launcher-form__preview {
507
- display: flex;
508
- flex-direction: column;
509
- align-items: center;
510
- gap: 8px;
511
- padding: 20px;
512
- background: var(--al-bg-hover);
513
- border-radius: 12px;
514
- margin-bottom: 8px;
515
- }
516
- .app-launcher-form__preview-icon {
517
- display: flex;
518
- align-items: center;
519
- justify-content: center;
520
- width: 64px;
521
- height: 64px;
522
- border-radius: 16px;
523
- }
524
- .app-launcher-form__preview-name {
525
- font-size: 14px;
526
- font-weight: 500;
527
- color: var(--al-text);
528
- font-family: inherit;
529
- }
530
- .app-launcher-form__field {
531
- display: flex;
532
- flex-direction: column;
533
- gap: 6px;
534
- }
535
- .app-launcher-form__label {
536
- font-size: 13px;
537
- font-weight: 500;
538
- color: var(--al-text-secondary);
539
- font-family: inherit;
540
- }
541
- .app-launcher-form__input {
542
- padding: 10px 12px;
543
- border: 1px solid var(--al-border);
544
- border-radius: 8px;
545
- font-size: 14px;
546
- outline: none;
547
- background: transparent;
548
- color: var(--al-text);
549
- transition: border-color 0.2s;
550
- font-family: inherit;
551
- }
552
- .app-launcher-form__input:focus {
553
- border-color: var(--al-primary);
554
- }
555
- .app-launcher-form__input--error {
556
- border-color: var(--al-text-error);
557
- }
558
- .app-launcher-form__error {
559
- font-size: 12px;
560
- color: var(--al-text-error);
561
- font-family: inherit;
562
- }
563
- .app-launcher-form__color-picker {
564
- display: flex;
565
- flex-wrap: wrap;
566
- gap: 8px;
567
- align-items: center;
568
- }
569
- .app-launcher-form__color-button {
570
- width: 28px;
571
- height: 28px;
572
- border: 2px solid transparent;
573
- border-radius: 50%;
574
- cursor: pointer;
575
- transition: transform 0.15s, border-color 0.15s;
576
- }
577
- .app-launcher-form__color-button:hover {
578
- transform: scale(1.15);
579
- }
580
- .app-launcher-form__color-button--selected {
581
- border-color: var(--al-text);
582
- }
583
- .app-launcher-form__color-input {
584
- width: 28px;
585
- height: 28px;
586
- border: none;
587
- border-radius: 50%;
588
- cursor: pointer;
589
- padding: 0;
590
- background: none;
591
- }
592
- .app-launcher-form__color-input::-webkit-color-swatch-wrapper {
593
- padding: 0;
594
- }
595
- .app-launcher-form__color-input::-webkit-color-swatch {
596
- border: 1px dashed var(--al-text-secondary);
597
- border-radius: 50%;
598
- }
599
- .app-launcher-form__actions {
600
- display: flex;
601
- justify-content: flex-end;
602
- gap: 12px;
603
- padding-top: 8px;
604
- border-top: 1px solid var(--al-border);
605
- }
606
- .app-launcher-form__button {
607
- padding: 10px 20px;
608
- border-radius: 8px;
609
- font-size: 14px;
610
- font-weight: 500;
611
- cursor: pointer;
612
- transition: background 0.2s;
613
- font-family: inherit;
614
- }
615
- .app-launcher-form__button--cancel {
616
- border: 1px solid var(--al-border);
617
- background: var(--al-bg);
618
- color: var(--al-text-secondary);
619
- }
620
- .app-launcher-form__button--cancel:hover {
621
- background: var(--al-bg-hover);
622
- }
623
- .app-launcher-form__button--submit {
624
- border: none;
625
- background: var(--al-primary);
626
- color: var(--al-primary-text);
627
- }
628
- .app-launcher-form__button--submit:hover {
629
- background: var(--al-primary-hover);
630
- }
631
- .app-launcher-form__icon-mode {
632
- display: flex;
633
- gap: 8px;
634
- margin-bottom: 12px;
635
- }
636
- .app-launcher-form__mode-button {
637
- flex: 1;
638
- padding: 8px 12px;
639
- border: 1px solid var(--al-border);
640
- border-radius: 6px;
641
- background: var(--al-bg);
642
- font-size: 13px;
643
- font-weight: 500;
644
- color: var(--al-text-secondary);
645
- cursor: pointer;
646
- transition: all 0.2s;
647
- font-family: inherit;
648
- }
649
- .app-launcher-form__mode-button:hover {
650
- background: var(--al-bg-hover);
651
- }
652
- .app-launcher-form__mode-button--active {
653
- background: rgba(66, 133, 244, 0.1);
654
- border-color: var(--al-primary);
655
- color: var(--al-primary);
656
- }
657
- .app-launcher-form__custom-icon {
658
- display: flex;
659
- flex-direction: column;
660
- gap: 6px;
661
- }
662
- .app-launcher-form__hint {
663
- font-size: 12px;
664
- color: var(--al-text-secondary);
665
- margin: 0;
666
- font-family: inherit;
667
- }
668
- .app-launcher-form__preview-svg {
669
- width: 32px;
670
- height: 32px;
671
- mask-size: contain;
672
- mask-repeat: no-repeat;
673
- mask-position: center;
674
- -webkit-mask-size: contain;
675
- -webkit-mask-repeat: no-repeat;
676
- -webkit-mask-position: center;
677
- }
678
- .app-launcher-form__preview-img {
679
- width: 32px;
680
- height: 32px;
681
- object-fit: contain;
682
- }
683
- .app-launcher-icon-picker {
684
- width: 100%;
685
- }
686
- .app-launcher-icon-picker__search {
687
- width: 100%;
688
- padding: 10px 12px;
689
- border: 1px solid var(--al-border);
690
- border-radius: 8px;
691
- font-size: 14px;
692
- outline: none;
693
- background: transparent;
694
- color: var(--al-text);
695
- transition: border-color 0.2s;
696
- margin-bottom: 12px;
697
- font-family: inherit;
698
- }
699
- .app-launcher-icon-picker__search:focus {
700
- border-color: var(--al-primary);
701
- }
702
- .app-launcher-icon-picker__grid {
703
- display: grid;
704
- grid-template-columns: repeat(6, 1fr);
705
- gap: 8px;
706
- max-height: 200px;
707
- overflow-y: auto;
708
- padding: 4px;
709
- }
710
- .app-launcher-icon-picker__button {
711
- display: flex;
712
- align-items: center;
713
- justify-content: center;
714
- width: 40px;
715
- height: 40px;
716
- border: 2px solid transparent;
717
- border-radius: 8px;
718
- background: var(--al-bg-hover);
719
- cursor: pointer;
720
- transition: all 0.15s;
721
- }
722
- .app-launcher-icon-picker__button:hover {
723
- background: var(--al-bg-focus);
724
- transform: scale(1.1);
725
- }
726
- .app-launcher-icon-picker__button--selected {
727
- border-color: var(--al-primary);
728
- background: rgba(66, 133, 244, 0.1);
729
- }
730
- .app-launcher-icon-picker__icon {
731
- font-size: 20px;
732
- color: var(--al-text-secondary);
733
- }
734
- .app-launcher-icon-picker__button--selected .app-launcher-icon-picker__icon {
735
- color: var(--al-primary);
736
- }
737
- .app-launcher-icon-picker__empty {
738
- text-align: center;
739
- color: var(--al-text-secondary);
740
- font-size: 14px;
741
- padding: 20px;
742
- font-family: inherit;
743
- }
744
- .app-launcher-icon-picker__grid::-webkit-scrollbar {
745
- width: 6px;
746
- }
747
- .app-launcher-icon-picker__grid::-webkit-scrollbar-track {
748
- background: transparent;
749
- }
750
- .app-launcher-icon-picker__grid::-webkit-scrollbar-thumb {
751
- background-color: var(--al-scrollbar);
752
- border-radius: 3px;
753
- }
754
- /*# sourceMappingURL=index.css.map */
1
+ .app-launcher,.app-settings__overlay{--al-bg: #ffffff;--al-bg-hover: rgba(0, 0, 0, .04);--al-bg-focus: rgba(0, 0, 0, .08);--al-text: #3c4043;--al-text-secondary: #5f6368;--al-text-error: #d93025;--al-border: #e0e0e0;--al-shadow: 0 2px 10px rgba(0, 0, 0, .1), 0 8px 40px rgba(0, 0, 0, .2);--al-trigger-bg-hover: rgba(0, 0, 0, .08);--al-trigger-bg-focus: rgba(0, 0, 0, .12);--al-footer-bg: #fafafa;--al-scrollbar: #dadce0;--al-overlay-bg: rgba(0, 0, 0, .5);--al-primary: #4285F4;--al-primary-hover: #3367d6;--al-primary-text: #ffffff;position:relative;display:inline-flex;align-items:center}@media(prefers-color-scheme:dark){.app-launcher,.app-settings__overlay{--al-bg: #202124;--al-bg-hover: rgba(255, 255, 255, .08);--al-bg-focus: rgba(255, 255, 255, .12);--al-text: #e8eaed;--al-text-secondary: #9aa0a6;--al-text-error: #f28b82;--al-border: #3c4043;--al-shadow: 0 2px 10px rgba(0, 0, 0, .3), 0 8px 40px rgba(0, 0, 0, .5);--al-trigger-bg-hover: rgba(255, 255, 255, .1);--al-trigger-bg-focus: rgba(255, 255, 255, .15);--al-footer-bg: #292a2d;--al-scrollbar: #5f6368;--al-overlay-bg: rgba(0, 0, 0, .7);--al-primary: #8ab4f8;--al-primary-hover: #aecbfa;--al-primary-text: #202124}}html.dark .app-launcher,:root.dark .app-launcher,.dark .app-launcher,.app-launcher.app-launcher--dark,html.dark .app-settings__overlay,:root.dark .app-settings__overlay,.dark .app-settings__overlay{--al-bg: #202124;--al-bg-hover: rgba(255, 255, 255, .08);--al-bg-focus: rgba(255, 255, 255, .12);--al-text: #e8eaed;--al-text-secondary: #9aa0a6;--al-text-error: #f28b82;--al-border: #3c4043;--al-shadow: 0 2px 10px rgba(0, 0, 0, .3), 0 8px 40px rgba(0, 0, 0, .5);--al-trigger-bg-hover: rgba(255, 255, 255, .1);--al-trigger-bg-focus: rgba(255, 255, 255, .15);--al-footer-bg: #292a2d;--al-scrollbar: #5f6368;--al-overlay-bg: rgba(0, 0, 0, .7);--al-primary: #8ab4f8;--al-primary-hover: #aecbfa;--al-primary-text: #202124}.app-launcher__trigger{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;background:transparent;border-radius:50%;cursor:pointer;transition:background-color .2s ease}.app-launcher__trigger:hover{background-color:var(--al-trigger-bg-hover)}.app-launcher__trigger:focus{outline:none;background-color:var(--al-trigger-bg-focus)}.app-launcher__trigger-icon{font-size:24px;color:var(--al-text-secondary)}.app-launcher__dropdown{position:absolute;top:calc(100% + 8px);right:0;width:336px;max-height:70vh;overflow-y:auto;background-color:var(--al-bg);border-radius:8px;box-shadow:var(--al-shadow);z-index:9999;animation:app-launcher-slide-in .15s ease-out}@keyframes app-launcher-slide-in{0%{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.app-launcher__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:16px 8px}.app-launcher__item{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 8px;border:none;background:transparent;border-radius:8px;cursor:pointer;transition:background-color .15s ease;min-height:90px}.app-launcher__item:hover{background-color:var(--al-bg-hover)}.app-launcher__item:focus{outline:none;background-color:var(--al-bg-focus)}.app-launcher__icon-wrapper{display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin-bottom:8px}.app-launcher__icon{font-size:32px;transition:transform .15s ease}.app-launcher__item:hover .app-launcher__icon{transform:scale(1.1)}.app-launcher__icon--custom{width:32px;height:32px;object-fit:contain}.app-launcher__icon--svg{width:32px;height:32px;mask-size:contain;mask-repeat:no-repeat;mask-position:center;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center}.app-launcher__name{font-family:Google Sans,Roboto,-apple-system,BlinkMacSystemFont,sans-serif;font-size:13px;font-weight:400;color:var(--al-text);text-align:center;line-height:1.3;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-launcher__loading,.app-launcher__error{padding:24px;text-align:center;font-size:14px;color:var(--al-text-secondary)}.app-launcher__error{color:var(--al-text-error)}.app-launcher__dropdown::-webkit-scrollbar,.app-settings__content::-webkit-scrollbar{width:8px}.app-launcher__dropdown::-webkit-scrollbar-track,.app-settings__content::-webkit-scrollbar-track{background:transparent}.app-launcher__dropdown::-webkit-scrollbar-thumb,.app-settings__content::-webkit-scrollbar-thumb{background-color:var(--al-scrollbar);border-radius:4px}.app-launcher__footer{display:flex;justify-content:center;padding:12px 16px;border-top:1px solid var(--al-border);background:var(--al-footer-bg)}@media(max-width:400px){.app-launcher__dropdown{width:280px;right:-8px}.app-launcher__icon-wrapper{width:40px;height:40px}.app-launcher__icon{font-size:28px}.app-launcher__name{font-size:12px}}.app-settings__overlay{position:fixed;inset:0;width:100vw;height:100vh;background:var(--al-overlay-bg);display:flex;align-items:center;justify-content:center;z-index:9999;animation:app-settings-fade-in .15s ease-out;color:var(--al-text)}@keyframes app-settings-fade-in{0%{opacity:0}to{opacity:1}}.app-settings__modal{position:relative;width:100%;max-width:480px;max-height:85vh;margin:20px;background:var(--al-bg);border-radius:16px;box-shadow:var(--al-shadow);display:flex;flex-direction:column;animation:app-settings-slide-up .2s ease-out;overflow:hidden}@keyframes app-settings-slide-up{0%{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.app-settings__header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--al-border);background:var(--al-bg);min-height:36px;flex-shrink:0}.app-settings__title{font-size:18px;font-weight:600;color:var(--al-text);margin:0;font-family:Google Sans,Roboto,sans-serif}.app-settings__close-button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:transparent;border-radius:50%;cursor:pointer;color:var(--al-text-secondary);transition:background .2s}.app-settings__close-button:hover{background:var(--al-bg-hover)}.app-settings__content{flex:1;overflow-y:auto;padding:24px}.app-settings__add-button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px;border:2px dashed var(--al-border);border-radius:12px;background:transparent;font-size:14px;font-weight:500;color:var(--al-text-secondary);cursor:pointer;transition:all .2s;margin-bottom:24px;font-family:inherit}.app-settings__add-button:hover{border-color:var(--al-primary);color:var(--al-primary);background:var(--al-bg-hover)}.app-settings__add-icon{font-size:16px}.app-settings__list{margin-bottom:16px}.app-settings__section-title{font-size:13px;font-weight:600;color:var(--al-text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;font-family:inherit}.app-settings__empty-message{text-align:center;color:var(--al-text-secondary);font-size:14px;padding:24px;background:var(--al-bg-hover);border-radius:8px}.app-settings__grid{display:flex;flex-direction:column;gap:8px}.app-settings__card{display:flex;align-items:center;justify-content:space-between;padding:12px;background:var(--al-bg-hover);border-radius:12px;transition:background .2s}.app-settings__card:hover{background:var(--al-bg-focus)}.app-settings__card-info{display:flex;align-items:center;gap:12px;min-width:0;flex:1}.app-settings__card-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;font-size:20px;flex-shrink:0}.app-settings__card-details{display:flex;flex-direction:column;min-width:0}.app-settings__card-name{font-size:14px;font-weight:500;color:var(--al-text);font-family:inherit}.app-settings__card-url{font-size:12px;color:var(--al-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:inherit}.app-settings__card-actions{display:flex;gap:4px}.app-settings__action-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:transparent;border-radius:8px;cursor:pointer;color:var(--al-text-secondary);transition:all .15s}.app-settings__action-button:hover{background:var(--al-bg-focus);color:var(--al-text)}.app-settings__action-button--delete:hover{background:#d930251a;color:var(--al-text-error)}.app-settings__export-button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;margin-bottom:16px;border:1px solid #34A853;border-radius:8px;background:#e6f4ea;font-size:14px;font-weight:500;color:#137333;cursor:pointer;transition:all .2s;font-family:inherit}@media(prefers-color-scheme:dark){.app-settings__export-button{background:#34a85333;color:#81c995;border-color:#81c995}}.app-settings__export-button:hover{background:#ceead6;border-color:#137333}@media(prefers-color-scheme:dark){.app-settings__export-button:hover{background:#34a8534d}}.app-settings__export-icon{font-size:14px}.app-settings__info{padding:12px;background:#e8f0fe;border-radius:8px;font-size:13px;color:#1967d2}@media(prefers-color-scheme:dark){.app-settings__info{background:#8ab4f833;color:#8ab4f8}}.app-settings__info p{margin:0;font-family:inherit}.app-launcher-form{display:flex;flex-direction:column;gap:16px}.app-launcher-form__preview{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px;background:var(--al-bg-hover);border-radius:12px;margin-bottom:8px}.app-launcher-form__preview-icon{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:16px}.app-launcher-form__preview-name{font-size:14px;font-weight:500;color:var(--al-text);font-family:inherit}.app-launcher-form__field{display:flex;flex-direction:column;gap:6px}.app-launcher-form__label{font-size:13px;font-weight:500;color:var(--al-text-secondary);font-family:inherit}.app-launcher-form__input{padding:10px 12px;border:1px solid var(--al-border);border-radius:8px;font-size:14px;outline:none;background:transparent;color:var(--al-text);transition:border-color .2s;font-family:inherit}.app-launcher-form__input:focus{border-color:var(--al-primary)}.app-launcher-form__input--error{border-color:var(--al-text-error)}.app-launcher-form__error{font-size:12px;color:var(--al-text-error);font-family:inherit}.app-launcher-form__color-picker{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.app-launcher-form__color-button{width:28px;height:28px;border:2px solid transparent;border-radius:50%;cursor:pointer;transition:transform .15s,border-color .15s}.app-launcher-form__color-button:hover{transform:scale(1.15)}.app-launcher-form__color-button--selected{border-color:var(--al-text)}.app-launcher-form__color-input{width:28px;height:28px;border:none;border-radius:50%;cursor:pointer;padding:0;background:none}.app-launcher-form__color-input::-webkit-color-swatch-wrapper{padding:0}.app-launcher-form__color-input::-webkit-color-swatch{border:1px dashed var(--al-text-secondary);border-radius:50%}.app-launcher-form__actions{display:flex;justify-content:flex-end;gap:12px;padding-top:8px;border-top:1px solid var(--al-border)}.app-launcher-form__button{padding:10px 20px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s;font-family:inherit}.app-launcher-form__button--cancel{border:1px solid var(--al-border);background:var(--al-bg);color:var(--al-text-secondary)}.app-launcher-form__button--cancel:hover{background:var(--al-bg-hover)}.app-launcher-form__button--submit{border:none;background:var(--al-primary);color:var(--al-primary-text)}.app-launcher-form__button--submit:hover{background:var(--al-primary-hover)}.app-launcher-form__icon-mode{display:flex;gap:8px;margin-bottom:12px}.app-launcher-form__mode-button{flex:1;padding:8px 12px;border:1px solid var(--al-border);border-radius:6px;background:var(--al-bg);font-size:13px;font-weight:500;color:var(--al-text-secondary);cursor:pointer;transition:all .2s;font-family:inherit}.app-launcher-form__mode-button:hover{background:var(--al-bg-hover)}.app-launcher-form__mode-button--active{background:#4285f41a;border-color:var(--al-primary);color:var(--al-primary)}.app-launcher-form__custom-icon{display:flex;flex-direction:column;gap:6px}.app-launcher-form__hint{font-size:12px;color:var(--al-text-secondary);margin:0;font-family:inherit}.app-launcher-form__preview-svg{width:32px;height:32px;mask-size:contain;mask-repeat:no-repeat;mask-position:center;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center}.app-launcher-form__preview-img{width:32px;height:32px;object-fit:contain}.app-launcher-icon-picker{width:100%}.app-launcher-icon-picker__search{width:100%;padding:10px 12px;border:1px solid var(--al-border);border-radius:8px;font-size:14px;outline:none;background:transparent;color:var(--al-text);transition:border-color .2s;margin-bottom:12px;font-family:inherit}.app-launcher-icon-picker__search:focus{border-color:var(--al-primary)}.app-launcher-icon-picker__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;max-height:200px;overflow-y:auto;padding:4px}.app-launcher-icon-picker__button{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:2px solid transparent;border-radius:8px;background:var(--al-bg-hover);cursor:pointer;transition:all .15s}.app-launcher-icon-picker__button:hover{background:var(--al-bg-focus);transform:scale(1.1)}.app-launcher-icon-picker__button--selected{border-color:var(--al-primary);background:#4285f41a}.app-launcher-icon-picker__icon{font-size:20px;color:var(--al-text-secondary)}.app-launcher-icon-picker__button--selected .app-launcher-icon-picker__icon{color:var(--al-primary)}.app-launcher-icon-picker__empty{text-align:center;color:var(--al-text-secondary);font-size:14px;padding:20px;font-family:inherit}.app-launcher-icon-picker__grid::-webkit-scrollbar{width:6px}.app-launcher-icon-picker__grid::-webkit-scrollbar-track{background:transparent}.app-launcher-icon-picker__grid::-webkit-scrollbar-thumb{background-color:var(--al-scrollbar);border-radius:3px}