aesthetic.computer
Monorepo for Aesthetic.Computer
aesthetic.computer
1/* KidLisp Editor - Monaco Editor & Playback Controls */
2
3/* ============================================
4 EDITOR CONTAINER
5 ============================================ */
6
7#kidlisp-editor {
8 flex: 1;
9 overflow: hidden;
10 position: relative;
11 padding-left: 12px;
12 transition: box-shadow 0.3s ease;
13 z-index: 1;
14}
15
16/* Live running state - green outline */
17#kidlisp-editor.live-running::before {
18 content: '';
19 position: absolute;
20 top: 0;
21 left: 0;
22 right: 0;
23 bottom: 0;
24 border: 4px solid #00ff00;
25 pointer-events: none;
26 z-index: 999999;
27 animation: live-pulse 2s ease-in-out infinite;
28 box-shadow: inset 0 0 30px rgba(0, 255, 0, 0.2), 0 0 10px rgba(0, 255, 0, 0.3);
29}
30
31@media (prefers-color-scheme: dark) {
32 #kidlisp-editor.live-running::before {
33 border-color: #44ff44;
34 box-shadow: inset 0 0 40px rgba(68, 255, 68, 0.25), 0 0 15px rgba(68, 255, 68, 0.4);
35 }
36}
37
38[data-theme="dark"] #kidlisp-editor.live-running::before {
39 border-color: #44ff44;
40 box-shadow: inset 0 0 40px rgba(68, 255, 68, 0.25), 0 0 15px rgba(68, 255, 68, 0.4);
41}
42
43@keyframes live-pulse {
44 0%, 100% { border-color: #00ff00; }
45 50% { border-color: #00cc00; }
46}
47
48/* ============================================
49 PLAYBACK BUTTONS
50 ============================================ */
51
52#send-button {
53 position: absolute;
54 bottom: 8px;
55 right: 8px;
56 z-index: 100;
57 width: 48px;
58 height: 48px;
59 background: var(--btn-play);
60 color: white;
61 border: none;
62 border-radius: 50%;
63 font-family: monospace;
64 font-size: 20px;
65 cursor: pointer;
66 box-shadow: 0 3px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
67 transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
68 display: flex;
69 flex-direction: row;
70 align-items: center;
71 justify-content: center;
72 padding: 0;
73 margin: 0;
74}
75
76@media (prefers-color-scheme: dark) {
77 #send-button {
78 background: rgb(102, 187, 106);
79 box-shadow: 0 3px 6px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.3);
80 }
81}
82
83[data-theme="dark"] #send-button {
84 background: rgb(102, 187, 106);
85 box-shadow: 0 3px 6px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.3);
86}
87
88/* Play icon (triangle) */
89#send-button::before {
90 content: '';
91 width: 0;
92 height: 0;
93 border-left: 12px solid white;
94 border-top: 8px solid transparent;
95 border-bottom: 8px solid transparent;
96 margin-left: 3px;
97}
98
99/* Playing state (yellow / pause) */
100#send-button.playing {
101 background: rgb(255, 193, 7);
102 cursor: pointer;
103}
104
105@media (prefers-color-scheme: dark) {
106 #send-button.playing { background: rgb(255, 213, 79); }
107}
108
109[data-theme="dark"] #send-button.playing { background: rgb(255, 213, 79); }
110
111/* Pause icon (double bars) */
112#send-button.playing::before {
113 width: 10px;
114 height: 16px;
115 border: none;
116 border-left: 3px solid white;
117 border-right: 3px solid white;
118 background: transparent;
119 margin-left: 0;
120}
121
122@media (hover: hover) {
123 #send-button:hover {
124 background: rgb(102, 187, 106);
125 box-shadow: 0 4px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
126 transform: scale(1.05);
127 }
128
129 #send-button.playing:hover {
130 background: rgb(255, 213, 79);
131 transform: scale(1.05);
132 }
133}
134
135#send-button:active {
136 background: rgb(56, 142, 60);
137 box-shadow: 0 2px 4px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
138 transform: scale(0.95);
139}
140
141#send-button.playing:active {
142 background: rgb(245, 183, 0);
143 transform: scale(0.95);
144}
145
146#send-button:disabled,
147#stop-button:disabled {
148 cursor: not-allowed !important;
149 opacity: 0.4 !important;
150 pointer-events: auto;
151}
152
153#send-button:disabled:hover,
154#send-button:disabled:active {
155 background: var(--btn-play) !important;
156 transform: scale(1) !important;
157}
158
159/* Stop button */
160#stop-button {
161 position: absolute;
162 bottom: 8px;
163 right: 8px;
164 z-index: 101;
165 width: 48px;
166 height: 48px;
167 background: var(--btn-stop);
168 color: white;
169 border: none;
170 border-radius: 50%;
171 cursor: pointer;
172 box-shadow: 0 3px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
173 transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
174 display: none;
175 flex-direction: row;
176 align-items: center;
177 justify-content: center;
178 padding: 0;
179 margin: 0;
180 pointer-events: auto;
181}
182
183@media (prefers-color-scheme: dark) {
184 #stop-button {
185 background: rgb(239, 83, 80);
186 box-shadow: 0 3px 6px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.3);
187 }
188}
189
190[data-theme="dark"] #stop-button {
191 background: rgb(239, 83, 80);
192 box-shadow: 0 3px 6px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.3);
193}
194
195/* Stop icon (square) */
196#stop-button::before {
197 content: '';
198 width: 14px;
199 height: 14px;
200 background: white;
201 border-radius: 2px;
202}
203
204@media (hover: hover) {
205 #stop-button:hover {
206 background: rgb(239, 83, 80);
207 box-shadow: 0 4px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
208 transform: scale(1.05);
209 }
210}
211
212#stop-button:active {
213 background: rgb(211, 47, 47);
214 transform: scale(0.95);
215}
216
217/* Clear button */
218#clear-button {
219 position: absolute;
220 bottom: 8px;
221 left: 8px;
222 z-index: 100;
223 padding: 6px 12px;
224 background: transparent;
225 color: var(--text-tertiary);
226 border: none;
227 font-family: monospace;
228 font-size: 11px;
229 cursor: pointer;
230 transition: all 0.2s;
231 opacity: 0.6;
232}
233
234@media (hover: hover) {
235 #clear-button:hover {
236 color: var(--ac-purple);
237 opacity: 1;
238 text-decoration: underline;
239 }
240}
241
242/* ============================================
243 MONACO EDITOR OVERRIDES
244 ============================================ */
245
246/* Zebra striping REMOVED - was blocking Monaco's selection overlay in dark mode */
247/* The .view-lines backgrounds paint over .view-overlays where selection is rendered */
248
249/* Selection highlighting - Let Monaco's theme handle it via editor.selectionBackground */
250/* Only use CSS as fallback for ::selection pseudo-element */
251
252/* Fallback ::selection for copy/paste operations */
253.monaco-editor *::selection {
254 background-color: rgba(255, 140, 0, 0.6) !important;
255 color: inherit !important;
256}
257
258.monaco-editor .view-line::selection,
259.monaco-editor .view-line *::selection {
260 background-color: rgba(255, 140, 0, 0.6) !important;
261}
262
263@media (prefers-color-scheme: dark) {
264 .monaco-editor *::selection,
265 .monaco-editor .view-line::selection,
266 .monaco-editor .view-line *::selection {
267 background-color: rgba(255, 140, 0, 0.8) !important;
268 }
269}
270
271[data-theme="dark"] .monaco-editor *::selection,
272[data-theme="dark"] .monaco-editor .view-line::selection,
273[data-theme="dark"] .monaco-editor .view-line *::selection {
274 background-color: rgba(255, 140, 0, 0.8) !important;
275}
276
277/* Light mode override - needed when system is dark but user selects light */
278[data-theme="light"] .monaco-editor *::selection,
279[data-theme="light"] .monaco-editor .view-line::selection,
280[data-theme="light"] .monaco-editor .view-line *::selection {
281 background-color: rgba(255, 140, 0, 0.6) !important;
282}
283
284/* Text shadow for editor */
285@media (prefers-color-scheme: light) {
286 .monaco-editor .view-line span {
287 text-shadow: 0.5px 0.5px 0px rgba(0, 0, 0, 0.25);
288 }
289}
290
291@media (prefers-color-scheme: dark) {
292 .monaco-editor .view-line span {
293 text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
294 }
295}
296
297/* Manual theme overrides for text shadow */
298[data-theme="light"] .monaco-editor .view-line span {
299 text-shadow: 0.5px 0.5px 0px rgba(0, 0, 0, 0.25);
300}
301
302[data-theme="dark"] .monaco-editor .view-line span {
303 text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
304}
305
306/* ============================================
307 PREVIEW IFRAME
308 ============================================ */
309
310#preview-iframe {
311 flex: 1;
312 border: none;
313 background: #1a1a1a;
314}
315
316/* Boot screen / loading state */
317.boot-screen {
318 position: absolute;
319 top: 0;
320 left: 0;
321 width: 100%;
322 height: 100%;
323 display: flex;
324 flex-direction: row;
325 z-index: 1000;
326 transition: opacity 0.5s;
327}
328
329.boot-screen.hidden {
330 opacity: 0;
331 pointer-events: none;
332}
333
334.color-bar {
335 flex: 1;
336 height: 100%;
337}
338
339.boot-text {
340 color: #fff;
341 font-family: monospace;
342 font-size: 14px;
343 text-align: center;
344 line-height: 1.6;
345 opacity: 0.8;
346}
347
348@media (prefers-color-scheme: light) {
349 .boot-screen { background: #fff; }
350 .boot-text { color: #000; }
351 #preview-iframe { background: #e8e8e8; }
352
353 .bar-1 { background: #000000 !important; }
354 .bar-2 { background: #0000aa !important; }
355 .bar-3 { background: #aa0000 !important; }
356 .bar-4 { background: #aa00aa !important; }
357 .bar-5 { background: #00aa00 !important; }
358 .bar-6 { background: #00aaaa !important; }
359 .bar-7 { background: #aaaa00 !important; }
360 .bar-8 { background: #ffffff !important; }
361}
362
363/* Manual theme toggle overrides */
364[data-theme="light"] .boot-screen { background: #fff; }
365[data-theme="light"] .boot-text { color: #000; }
366[data-theme="light"] #preview-iframe { background: #e8e8e8; }
367[data-theme="light"] .bar-1 { background: #000000 !important; }
368[data-theme="light"] .bar-2 { background: #0000aa !important; }
369[data-theme="light"] .bar-3 { background: #aa0000 !important; }
370[data-theme="light"] .bar-4 { background: #aa00aa !important; }
371[data-theme="light"] .bar-5 { background: #00aa00 !important; }
372[data-theme="light"] .bar-6 { background: #00aaaa !important; }
373[data-theme="light"] .bar-7 { background: #aaaa00 !important; }
374[data-theme="light"] .bar-8 { background: #ffffff !important; }
375
376[data-theme="dark"] .boot-screen { background: #1a1a1a; }
377[data-theme="dark"] .boot-text { color: #fff; }
378[data-theme="dark"] #preview-iframe { background: #1a1a1a; }