aesthetic.computer
Monorepo for Aesthetic.Computer
aesthetic.computer
1/* KidLisp Editor - UI Components */
2
3/* ============================================
4 TABS
5 ============================================ */
6
7.tab {
8 padding: 0 16px;
9 cursor: pointer;
10 border-right: 1px solid var(--border-color);
11 height: 100%;
12 display: flex;
13 align-items: center;
14 background: var(--bg-secondary);
15 color: var(--text-tertiary);
16 transition: all 0.2s;
17}
18
19@media (hover: hover) {
20 .tab:hover { filter: brightness(1.1); }
21 #examples-tab:hover { background: rgba(59, 130, 246, 0.35); }
22 #keeps-tab:hover { background: rgba(205, 92, 155, 0.35); }
23 #reference-tab:hover { background: rgba(34, 197, 94, 0.35); }
24}
25
26.tab.active {
27 color: var(--text-primary);
28 border-bottom: 1px solid var(--bg-primary);
29 margin-bottom: -1px;
30 position: relative;
31 z-index: 1;
32 font-weight: 600;
33}
34
35/* Color-coded tabs */
36#examples-tab {
37 background: var(--tab-examples-bg);
38 color: #1e40af;
39}
40#examples-tab.active {
41 background: var(--tab-examples-active);
42 color: #1e3a8a;
43}
44
45#keeps-tab {
46 background: var(--tab-keeps-bg);
47 color: #9d174d;
48}
49#keeps-tab.active {
50 background: var(--tab-keeps-active);
51 color: #831843;
52}
53
54#reference-tab {
55 background: var(--tab-reference-bg);
56 color: #166534;
57}
58#reference-tab.active {
59 background: var(--tab-reference-active);
60 color: #14532d;
61}
62
63/* ============================================
64 DROPDOWNS (Generic)
65 ============================================ */
66
67/* Shared dropdown styles */
68[data-dropdown] {
69 position: relative;
70}
71
72[data-dropdown-menu] {
73 display: none;
74 position: absolute;
75 top: 100%;
76 background: var(--bg-primary);
77 border: 1px solid var(--border-color);
78 border-radius: 8px;
79 box-shadow: 0 8px 24px rgba(0,0,0,0.4);
80 z-index: 99999;
81 padding: 4px 0;
82 margin-top: 4px;
83}
84
85[data-dropdown].open [data-dropdown-menu] {
86 display: block;
87}
88
89/* ============================================
90 LANGUAGE DROPDOWN
91 ============================================ */
92
93.language-tab {
94 border-left: 1px solid var(--border-color);
95 border-right: 1px solid var(--border-color);
96 display: flex;
97 align-items: center;
98 gap: 6px;
99 cursor: pointer;
100 position: relative;
101 overflow: visible;
102}
103
104@media (hover: hover) {
105 .language-tab:hover {
106 background: var(--bg-primary);
107 color: var(--text-primary);
108 }
109}
110
111.lang-flag { font-size: 14px; }
112.lang-text { font-size: 12px; min-width: 50px; }
113.lang-arrow { font-size: 12px; opacity: 0.6; }
114
115.language-dropdown {
116 position: absolute;
117 top: 100%;
118 right: 0;
119 background: var(--bg-tertiary);
120 border: 1px solid var(--border-color);
121 border-radius: 4px;
122 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
123 z-index: 99999;
124 min-width: 120px;
125 margin-top: 2px;
126}
127
128.lang-option {
129 padding: 8px 12px;
130 cursor: pointer;
131 font-size: 12px;
132 transition: all 0.2s;
133}
134
135@media (hover: hover) {
136 .lang-option:hover {
137 background: rgba(205, 92, 155, 0.1);
138 color: var(--ac-purple);
139 }
140}
141
142.lang-option:first-child { border-radius: 4px 4px 0 0; }
143.lang-option:last-child { border-radius: 0 0 4px 4px; }
144
145.language-tab.cycling .lang-flag,
146.language-tab.cycling .lang-text {
147 animation: langFade 0.3s ease-in-out;
148}
149
150@keyframes langFade {
151 0% { opacity: 1; }
152 50% { opacity: 0.3; }
153 100% { opacity: 1; }
154}
155
156/* ============================================
157 PLATFORM SELECTOR
158 ============================================ */
159
160.platform-selector {
161 display: flex;
162 align-items: center;
163 gap: 4px;
164 cursor: pointer;
165 padding: 4px 8px;
166 border-radius: 4px;
167 transition: background 0.2s;
168 position: relative;
169}
170
171.platform-selector:hover {
172 background: rgba(0, 0, 0, 0.1);
173}
174
175@media (prefers-color-scheme: dark) {
176 .platform-selector:hover { background: rgba(255, 255, 255, 0.1); }
177}
178
179[data-theme="dark"] .platform-selector:hover {
180 background: rgba(255, 255, 255, 0.1);
181}
182
183.platform-icon { font-size: 14px; }
184.platform-arrow { font-size: 8px; color: var(--text-tertiary); margin-left: 2px; }
185
186.platform-dropdown {
187 position: fixed;
188 background: var(--bg-primary);
189 border: 1px solid var(--border-color);
190 border-radius: 8px;
191 box-shadow: 0 8px 24px rgba(0,0,0,0.4);
192 min-width: 220px;
193 z-index: 99999;
194 padding: 4px 0;
195 /* Use visibility + opacity for smooth open without flash */
196 visibility: hidden;
197 opacity: 0;
198 pointer-events: none;
199 transition: opacity 0.15s ease, visibility 0.15s ease;
200}
201
202.platform-selector.open .platform-dropdown {
203 visibility: visible;
204 opacity: 1;
205 pointer-events: auto;
206}
207
208.platform-option {
209 display: flex;
210 align-items: center;
211 gap: 8px;
212 padding: 10px 14px;
213 cursor: pointer;
214 transition: background 0.15s;
215}
216
217.platform-option:hover { background: var(--bg-secondary); }
218.platform-option.active { background: rgba(205, 92, 155, 0.15); }
219.platform-option.active:hover { background: rgba(205, 92, 155, 0.25); }
220
221.platform-opt-icon { font-size: 16px; width: 24px; text-align: center; }
222.platform-opt-name { font-size: 13px; color: var(--text-primary); flex: 1; }
223
224.platform-status {
225 font-size: 9px;
226 padding: 2px 6px;
227 border-radius: 4px;
228 text-transform: uppercase;
229 font-weight: bold;
230}
231
232.platform-option.coming-soon { opacity: 0.5; }
233.platform-option.coming-soon .platform-status {
234 background: rgba(59, 130, 246, 0.2);
235 color: rgb(59, 130, 246);
236}
237
238.platform-option.experimental { opacity: 0.4; }
239.platform-option.experimental .platform-status {
240 background: rgba(234, 179, 8, 0.2);
241 color: rgb(180, 140, 0);
242}
243
244@media (prefers-color-scheme: dark) {
245 .platform-option.coming-soon .platform-status { color: rgb(147, 197, 253); }
246 .platform-option.experimental .platform-status { color: rgb(253, 224, 71); }
247}
248
249[data-theme="dark"] .platform-option.coming-soon .platform-status { color: rgb(147, 197, 253); }
250[data-theme="dark"] .platform-option.experimental .platform-status { color: rgb(253, 224, 71); }
251
252.platform-divider {
253 height: 1px;
254 background: var(--border-color);
255 margin: 4px 0;
256}
257
258/* ============================================
259 USER MENU (Header)
260 ============================================ */
261
262.header-login-btn {
263 margin-left: auto;
264 padding: 4px 12px;
265 background: linear-gradient(135deg, var(--ac-purple) 0%, rgb(175, 62, 125) 100%);
266 color: white;
267 border: none;
268 border-radius: 4px;
269 font-size: 11px;
270 font-weight: bold;
271 cursor: pointer;
272 transition: all 0.2s;
273}
274
275.header-login-btn:hover {
276 transform: translateY(-1px);
277 box-shadow: 0 2px 8px rgba(205, 92, 155, 0.3);
278}
279
280.header-user-menu {
281 margin-left: auto;
282 position: relative;
283 display: flex;
284 align-items: center;
285 gap: 4px;
286 cursor: pointer;
287 padding: 4px 10px;
288 border-radius: 4px;
289 transition: background 0.2s;
290}
291
292.header-user-menu:hover { background: var(--bg-tertiary); }
293
294.header-user-handle { font-size: 12px; color: var(--text-secondary); }
295.header-menu-arrow { font-size: 8px; color: var(--text-tertiary); }
296
297.header-user-dropdown {
298 display: none;
299 position: absolute;
300 top: 100%;
301 right: 0;
302 background: var(--bg-primary);
303 border: 1px solid var(--border-color);
304 border-radius: 4px;
305 box-shadow: 0 4px 12px rgba(0,0,0,0.15);
306 min-width: 100px;
307 z-index: 10000;
308}
309
310.header-user-menu.open .header-user-dropdown {
311 display: block;
312}
313
314.header-logout-btn {
315 width: 100%;
316 padding: 8px 12px;
317 background: none;
318 border: none;
319 text-align: left;
320 font-size: 12px;
321 color: var(--text-primary);
322 cursor: pointer;
323}
324
325.header-logout-btn:hover { background: var(--bg-tertiary); }
326
327/* ============================================
328 THEME TOGGLE
329 ============================================ */
330
331#theme-toggle {
332 width: 32px;
333 height: 32px;
334 border: none;
335 border-radius: 4px;
336 background: transparent;
337 cursor: pointer;
338 display: flex;
339 align-items: center;
340 justify-content: center;
341 font-size: 16px;
342 transition: opacity 0.2s;
343 padding: 0;
344 opacity: 0.6;
345 user-select: none;
346 -webkit-tap-highlight-color: transparent;
347}
348
349@media (hover: hover) {
350 #theme-toggle:hover { opacity: 1; }
351}
352
353#theme-toggle:active { opacity: 0.4; }
354
355/* ============================================
356 TOAST NOTIFICATIONS
357 ============================================ */
358
359.kidlisp-toast {
360 position: fixed;
361 bottom: 20px;
362 left: 50%;
363 transform: translateX(-50%);
364 padding: 12px 24px;
365 border-radius: 8px;
366 color: white;
367 font-family: var(--font-mono);
368 font-size: 14px;
369 z-index: 10000;
370 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
371 opacity: 0;
372 transition: opacity 0.3s ease;
373}
374
375.toast-info { background: #8b5cf6; }
376.toast-warning { background: #f59e0b; }
377.toast-error { background: #ef4444; }
378.toast-success { background: #22c55e; }