@moraby/app-launcher 0.1.7 → 0.1.8
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/dist/index.css +56 -13
- package/dist/index.css.map +1 -1
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -1,9 +1,52 @@
|
|
|
1
1
|
/* src/styles.css */
|
|
2
2
|
.app-launcher {
|
|
3
|
+
--al-bg: #ffffff;
|
|
4
|
+
--al-bg-hover: rgba(0, 0, 0, 0.04);
|
|
5
|
+
--al-bg-focus: rgba(0, 0, 0, 0.08);
|
|
6
|
+
--al-text: #3c4043;
|
|
7
|
+
--al-text-secondary: #5f6368;
|
|
8
|
+
--al-text-error: #d93025;
|
|
9
|
+
--al-border: #e0e0e0;
|
|
10
|
+
--al-shadow: 0 2px 10px rgba(0, 0, 0, 0.1), 0 8px 40px rgba(0, 0, 0, 0.2);
|
|
11
|
+
--al-trigger-bg-hover: rgba(0, 0, 0, 0.08);
|
|
12
|
+
--al-trigger-bg-focus: rgba(0, 0, 0, 0.12);
|
|
13
|
+
--al-footer-bg: #fafafa;
|
|
14
|
+
--al-scrollbar: #dadce0;
|
|
3
15
|
position: relative;
|
|
4
16
|
display: inline-flex;
|
|
5
17
|
align-items: center;
|
|
6
18
|
}
|
|
19
|
+
@media (prefers-color-scheme: dark) {
|
|
20
|
+
.app-launcher {
|
|
21
|
+
--al-bg: #202124;
|
|
22
|
+
--al-bg-hover: rgba(255, 255, 255, 0.08);
|
|
23
|
+
--al-bg-focus: rgba(255, 255, 255, 0.12);
|
|
24
|
+
--al-text: #e8eaed;
|
|
25
|
+
--al-text-secondary: #9aa0a6;
|
|
26
|
+
--al-text-error: #f28b82;
|
|
27
|
+
--al-border: #3c4043;
|
|
28
|
+
--al-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 8px 40px rgba(0, 0, 0, 0.5);
|
|
29
|
+
--al-trigger-bg-hover: rgba(255, 255, 255, 0.1);
|
|
30
|
+
--al-trigger-bg-focus: rgba(255, 255, 255, 0.15);
|
|
31
|
+
--al-footer-bg: #292a2d;
|
|
32
|
+
--al-scrollbar: #5f6368;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
.dark .app-launcher,
|
|
36
|
+
.app-launcher.app-launcher--dark {
|
|
37
|
+
--al-bg: #202124;
|
|
38
|
+
--al-bg-hover: rgba(255, 255, 255, 0.08);
|
|
39
|
+
--al-bg-focus: rgba(255, 255, 255, 0.12);
|
|
40
|
+
--al-text: #e8eaed;
|
|
41
|
+
--al-text-secondary: #9aa0a6;
|
|
42
|
+
--al-text-error: #f28b82;
|
|
43
|
+
--al-border: #3c4043;
|
|
44
|
+
--al-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 8px 40px rgba(0, 0, 0, 0.5);
|
|
45
|
+
--al-trigger-bg-hover: rgba(255, 255, 255, 0.1);
|
|
46
|
+
--al-trigger-bg-focus: rgba(255, 255, 255, 0.15);
|
|
47
|
+
--al-footer-bg: #292a2d;
|
|
48
|
+
--al-scrollbar: #5f6368;
|
|
49
|
+
}
|
|
7
50
|
.app-launcher__trigger {
|
|
8
51
|
display: flex;
|
|
9
52
|
align-items: center;
|
|
@@ -17,15 +60,15 @@
|
|
|
17
60
|
transition: background-color 0.2s ease;
|
|
18
61
|
}
|
|
19
62
|
.app-launcher__trigger:hover {
|
|
20
|
-
background-color:
|
|
63
|
+
background-color: var(--al-trigger-bg-hover);
|
|
21
64
|
}
|
|
22
65
|
.app-launcher__trigger:focus {
|
|
23
66
|
outline: none;
|
|
24
|
-
background-color:
|
|
67
|
+
background-color: var(--al-trigger-bg-focus);
|
|
25
68
|
}
|
|
26
69
|
.app-launcher__trigger-icon {
|
|
27
70
|
font-size: 24px;
|
|
28
|
-
color:
|
|
71
|
+
color: var(--al-text-secondary);
|
|
29
72
|
}
|
|
30
73
|
.app-launcher__dropdown {
|
|
31
74
|
position: absolute;
|
|
@@ -34,9 +77,9 @@
|
|
|
34
77
|
width: 336px;
|
|
35
78
|
max-height: 70vh;
|
|
36
79
|
overflow-y: auto;
|
|
37
|
-
background-color:
|
|
80
|
+
background-color: var(--al-bg);
|
|
38
81
|
border-radius: 8px;
|
|
39
|
-
box-shadow:
|
|
82
|
+
box-shadow: var(--al-shadow);
|
|
40
83
|
z-index: 9999;
|
|
41
84
|
animation: app-launcher-slide-in 0.15s ease-out;
|
|
42
85
|
}
|
|
@@ -70,11 +113,11 @@
|
|
|
70
113
|
min-height: 90px;
|
|
71
114
|
}
|
|
72
115
|
.app-launcher__item:hover {
|
|
73
|
-
background-color:
|
|
116
|
+
background-color: var(--al-bg-hover);
|
|
74
117
|
}
|
|
75
118
|
.app-launcher__item:focus {
|
|
76
119
|
outline: none;
|
|
77
|
-
background-color:
|
|
120
|
+
background-color: var(--al-bg-focus);
|
|
78
121
|
}
|
|
79
122
|
.app-launcher__icon-wrapper {
|
|
80
123
|
display: flex;
|
|
@@ -115,7 +158,7 @@
|
|
|
115
158
|
sans-serif;
|
|
116
159
|
font-size: 13px;
|
|
117
160
|
font-weight: 400;
|
|
118
|
-
color:
|
|
161
|
+
color: var(--al-text);
|
|
119
162
|
text-align: center;
|
|
120
163
|
line-height: 1.3;
|
|
121
164
|
max-width: 100%;
|
|
@@ -128,10 +171,10 @@
|
|
|
128
171
|
padding: 24px;
|
|
129
172
|
text-align: center;
|
|
130
173
|
font-size: 14px;
|
|
131
|
-
color:
|
|
174
|
+
color: var(--al-text-secondary);
|
|
132
175
|
}
|
|
133
176
|
.app-launcher__error {
|
|
134
|
-
color:
|
|
177
|
+
color: var(--al-text-error);
|
|
135
178
|
}
|
|
136
179
|
.app-launcher__dropdown::-webkit-scrollbar {
|
|
137
180
|
width: 8px;
|
|
@@ -140,15 +183,15 @@
|
|
|
140
183
|
background: transparent;
|
|
141
184
|
}
|
|
142
185
|
.app-launcher__dropdown::-webkit-scrollbar-thumb {
|
|
143
|
-
background-color:
|
|
186
|
+
background-color: var(--al-scrollbar);
|
|
144
187
|
border-radius: 4px;
|
|
145
188
|
}
|
|
146
189
|
.app-launcher__footer {
|
|
147
190
|
display: flex;
|
|
148
191
|
justify-content: center;
|
|
149
192
|
padding: 12px 16px;
|
|
150
|
-
border-top: 1px solid
|
|
151
|
-
background:
|
|
193
|
+
border-top: 1px solid var(--al-border);
|
|
194
|
+
background: var(--al-footer-bg);
|
|
152
195
|
}
|
|
153
196
|
@media (max-width: 400px) {
|
|
154
197
|
.app-launcher__dropdown {
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/styles.css"],"sourcesContent":["/* App Launcher Styles */\r\n\r\n.app-launcher {\r\n position: relative;\r\n display: inline-flex;\r\n align-items: center;\r\n}\r\n\r\n/* Trigger Button */\r\n.app-launcher__trigger {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 40px;\r\n height: 40px;\r\n border: none;\r\n background: transparent;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n transition: background-color 0.2s ease;\r\n}\r\n\r\n.app-launcher__trigger:hover {\r\n background-color:
|
|
1
|
+
{"version":3,"sources":["../src/styles.css"],"sourcesContent":["/* App Launcher Styles */\r\n\r\n/* CSS Variables - Light Theme (default) */\r\n.app-launcher {\r\n --al-bg: #ffffff;\r\n --al-bg-hover: rgba(0, 0, 0, 0.04);\r\n --al-bg-focus: rgba(0, 0, 0, 0.08);\r\n --al-text: #3c4043;\r\n --al-text-secondary: #5f6368;\r\n --al-text-error: #d93025;\r\n --al-border: #e0e0e0;\r\n --al-shadow: 0 2px 10px rgba(0, 0, 0, 0.1), 0 8px 40px rgba(0, 0, 0, 0.2);\r\n --al-trigger-bg-hover: rgba(0, 0, 0, 0.08);\r\n --al-trigger-bg-focus: rgba(0, 0, 0, 0.12);\r\n --al-footer-bg: #fafafa;\r\n --al-scrollbar: #dadce0;\r\n\r\n position: relative;\r\n display: inline-flex;\r\n align-items: center;\r\n}\r\n\r\n/* Dark Theme - Auto-detect system preference */\r\n@media (prefers-color-scheme: dark) {\r\n .app-launcher {\r\n --al-bg: #202124;\r\n --al-bg-hover: rgba(255, 255, 255, 0.08);\r\n --al-bg-focus: rgba(255, 255, 255, 0.12);\r\n --al-text: #e8eaed;\r\n --al-text-secondary: #9aa0a6;\r\n --al-text-error: #f28b82;\r\n --al-border: #3c4043;\r\n --al-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 8px 40px rgba(0, 0, 0, 0.5);\r\n --al-trigger-bg-hover: rgba(255, 255, 255, 0.1);\r\n --al-trigger-bg-focus: rgba(255, 255, 255, 0.15);\r\n --al-footer-bg: #292a2d;\r\n --al-scrollbar: #5f6368;\r\n }\r\n}\r\n\r\n/* Dark Theme - Class-based (for consumers using .dark class) */\r\n.dark .app-launcher,\r\n.app-launcher.app-launcher--dark {\r\n --al-bg: #202124;\r\n --al-bg-hover: rgba(255, 255, 255, 0.08);\r\n --al-bg-focus: rgba(255, 255, 255, 0.12);\r\n --al-text: #e8eaed;\r\n --al-text-secondary: #9aa0a6;\r\n --al-text-error: #f28b82;\r\n --al-border: #3c4043;\r\n --al-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 8px 40px rgba(0, 0, 0, 0.5);\r\n --al-trigger-bg-hover: rgba(255, 255, 255, 0.1);\r\n --al-trigger-bg-focus: rgba(255, 255, 255, 0.15);\r\n --al-footer-bg: #292a2d;\r\n --al-scrollbar: #5f6368;\r\n}\r\n\r\n/* Trigger Button */\r\n.app-launcher__trigger {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 40px;\r\n height: 40px;\r\n border: none;\r\n background: transparent;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n transition: background-color 0.2s ease;\r\n}\r\n\r\n.app-launcher__trigger:hover {\r\n background-color: var(--al-trigger-bg-hover);\r\n}\r\n\r\n.app-launcher__trigger:focus {\r\n outline: none;\r\n background-color: var(--al-trigger-bg-focus);\r\n}\r\n\r\n.app-launcher__trigger-icon {\r\n font-size: 24px;\r\n color: var(--al-text-secondary);\r\n}\r\n\r\n/* Dropdown */\r\n.app-launcher__dropdown {\r\n position: absolute;\r\n top: calc(100% + 8px);\r\n right: 0;\r\n width: 336px;\r\n max-height: 70vh;\r\n overflow-y: auto;\r\n background-color: var(--al-bg);\r\n border-radius: 8px;\r\n box-shadow: var(--al-shadow);\r\n z-index: 9999;\r\n animation: app-launcher-slide-in 0.15s ease-out;\r\n}\r\n\r\n@keyframes app-launcher-slide-in {\r\n from {\r\n opacity: 0;\r\n transform: translateY(-8px) scale(0.98);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0) scale(1);\r\n }\r\n}\r\n\r\n/* Grid */\r\n.app-launcher__grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 4px;\r\n padding: 16px 8px;\r\n}\r\n\r\n/* Item */\r\n.app-launcher__item {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 12px 8px;\r\n border: none;\r\n background: transparent;\r\n border-radius: 8px;\r\n cursor: pointer;\r\n transition: background-color 0.15s ease;\r\n min-height: 90px;\r\n}\r\n\r\n.app-launcher__item:hover {\r\n background-color: var(--al-bg-hover);\r\n}\r\n\r\n.app-launcher__item:focus {\r\n outline: none;\r\n background-color: var(--al-bg-focus);\r\n}\r\n\r\n/* Icon */\r\n.app-launcher__icon-wrapper {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 48px;\r\n height: 48px;\r\n margin-bottom: 8px;\r\n}\r\n\r\n.app-launcher__icon {\r\n font-size: 32px;\r\n transition: transform 0.15s ease;\r\n}\r\n\r\n.app-launcher__item:hover .app-launcher__icon {\r\n transform: scale(1.1);\r\n}\r\n\r\n/* Custom image icons (PNG, JPG, etc.) */\r\n.app-launcher__icon--custom {\r\n width: 32px;\r\n height: 32px;\r\n object-fit: contain;\r\n}\r\n\r\n/* SVG icons with mask-image (supports color property) */\r\n.app-launcher__icon--svg {\r\n width: 32px;\r\n height: 32px;\r\n mask-size: contain;\r\n mask-repeat: no-repeat;\r\n mask-position: center;\r\n -webkit-mask-size: contain;\r\n -webkit-mask-repeat: no-repeat;\r\n -webkit-mask-position: center;\r\n}\r\n\r\n/* Name */\r\n.app-launcher__name {\r\n font-family: 'Google Sans', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;\r\n font-size: 13px;\r\n font-weight: 400;\r\n color: var(--al-text);\r\n text-align: center;\r\n line-height: 1.3;\r\n max-width: 100%;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n\r\n/* Loading & Error */\r\n.app-launcher__loading,\r\n.app-launcher__error {\r\n padding: 24px;\r\n text-align: center;\r\n font-size: 14px;\r\n color: var(--al-text-secondary);\r\n}\r\n\r\n.app-launcher__error {\r\n color: var(--al-text-error);\r\n}\r\n\r\n/* Scrollbar */\r\n.app-launcher__dropdown::-webkit-scrollbar {\r\n width: 8px;\r\n}\r\n\r\n.app-launcher__dropdown::-webkit-scrollbar-track {\r\n background: transparent;\r\n}\r\n\r\n.app-launcher__dropdown::-webkit-scrollbar-thumb {\r\n background-color: var(--al-scrollbar);\r\n border-radius: 4px;\r\n}\r\n\r\n/* Footer (for Settings button, etc.) */\r\n.app-launcher__footer {\r\n display: flex;\r\n justify-content: center;\r\n padding: 12px 16px;\r\n border-top: 1px solid var(--al-border);\r\n background: var(--al-footer-bg);\r\n}\r\n\r\n/* Responsive */\r\n@media (max-width: 400px) {\r\n .app-launcher__dropdown {\r\n width: 280px;\r\n right: -8px;\r\n }\r\n\r\n .app-launcher__icon-wrapper {\r\n width: 40px;\r\n height: 40px;\r\n }\r\n\r\n .app-launcher__icon {\r\n font-size: 28px;\r\n }\r\n\r\n .app-launcher__name {\r\n font-size: 12px;\r\n }\r\n}\r\n"],"mappings":"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","names":[]}
|