Monorepo for Aesthetic.Computer
aesthetic.computer
fix: kidlisp.com context menu renders on top of everything
Replace ::before pseudo-element outlines with box-shadow inset,
which renders as part of the background layer and never covers
descendant content like Monaco's context menu. Remove the
z-index: 0 stacking context that was trapping the menu.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
+41
-69
+41
-69
system/public/kidlisp.com/index.html
+41
-69
system/public/kidlisp.com/index.html
···
345
345
}
346
346
347
347
/* Hide live-running/paused/stopped green/yellow/purple outlines in stage mode */
348
-
body.stage-mode:not(.device-mode) .editor-panel.live-running::before,
349
-
body.stage-mode:not(.device-mode) .editor-panel.live-paused::before,
350
-
body.stage-mode:not(.device-mode) .editor-panel.live-stopped::before,
351
-
body.stage-mode:not(.device-mode) #kidlisp-editor.live-running::before,
352
-
body.stage-mode:not(.device-mode) #kidlisp-editor.live-paused::before,
353
-
body.stage-mode:not(.device-mode) #kidlisp-editor.live-stopped::before {
354
-
display: none !important;
348
+
body.stage-mode:not(.device-mode) .editor-panel.live-running,
349
+
body.stage-mode:not(.device-mode) .editor-panel.live-paused,
350
+
body.stage-mode:not(.device-mode) .editor-panel.live-stopped,
351
+
body.stage-mode:not(.device-mode) #kidlisp-editor.live-running,
352
+
body.stage-mode:not(.device-mode) #kidlisp-editor.live-paused,
353
+
body.stage-mode:not(.device-mode) #kidlisp-editor.live-stopped {
354
+
box-shadow: none !important;
355
355
}
356
356
357
357
/* Hide playback controls in stage mode */
···
533
533
flex-direction: column;
534
534
/* border-right: 2px solid var(--border-color); Removed for Split.js */
535
535
background: #fffacd; /* Legal pad yellow */
536
-
position: relative; /* For live-running/live-paused ::before pseudo-element */
537
-
z-index: 0; /* Create stacking context so ::before at z-index:-1 sits above bg but below content (context menu) */
536
+
position: relative;
538
537
}
539
538
540
539
@media (prefers-color-scheme: dark) {
···
1511
1510
}
1512
1511
1513
1512
/* Live running state - green outline matching play button (#90EE90) */
1514
-
/* Applied to editor-panel to show across all viz views */
1515
-
.editor-panel.live-running::before,
1516
-
#kidlisp-editor.live-running::before {
1517
-
content: '';
1518
-
position: absolute;
1519
-
top: 0;
1520
-
left: 0;
1521
-
right: 0;
1522
-
bottom: 0;
1523
-
border: 2px solid rgba(144, 238, 144, 0.4);
1524
-
border-radius: 4px;
1525
-
pointer-events: none; /* Allow clicks through to Monaco */
1526
-
z-index: -1; /* Below all content (including context menu) but above panel background */
1513
+
/* Uses box-shadow inset so it renders below content (won't cover context menu) */
1514
+
.editor-panel.live-running,
1515
+
#kidlisp-editor.live-running {
1516
+
box-shadow: inset 0 0 0 2px rgba(144, 238, 144, 0.4);
1527
1517
}
1528
1518
1529
1519
/* Paused state - yellow outline matching pause button (#ffd93d) */
1530
-
.editor-panel.live-paused::before,
1531
-
#kidlisp-editor.live-paused::before {
1532
-
content: '';
1533
-
position: absolute;
1534
-
top: 0;
1535
-
left: 0;
1536
-
right: 0;
1537
-
bottom: 0;
1538
-
border: 2px solid rgba(255, 217, 61, 0.4);
1539
-
border-radius: 4px;
1540
-
pointer-events: none;
1541
-
z-index: -1; /* Below all content (including context menu) but above panel background */
1520
+
.editor-panel.live-paused,
1521
+
#kidlisp-editor.live-paused {
1522
+
box-shadow: inset 0 0 0 2px rgba(255, 217, 61, 0.4);
1542
1523
}
1543
-
1524
+
1544
1525
/* Dark mode: slightly brighter for visibility */
1545
1526
@media (prefers-color-scheme: dark) {
1546
-
.editor-panel.live-running::before,
1547
-
#kidlisp-editor.live-running::before {
1548
-
border-color: rgba(144, 238, 144, 0.5);
1527
+
.editor-panel.live-running,
1528
+
#kidlisp-editor.live-running {
1529
+
box-shadow: inset 0 0 0 2px rgba(144, 238, 144, 0.5);
1549
1530
}
1550
-
.editor-panel.live-paused::before,
1551
-
#kidlisp-editor.live-paused::before {
1552
-
border-color: rgba(255, 217, 61, 0.5);
1531
+
.editor-panel.live-paused,
1532
+
#kidlisp-editor.live-paused {
1533
+
box-shadow: inset 0 0 0 2px rgba(255, 217, 61, 0.5);
1553
1534
}
1554
1535
}
1555
-
1556
-
[data-theme="dark"] .editor-panel.live-running::before,
1557
-
[data-theme="dark"] #kidlisp-editor.live-running::before {
1558
-
border-color: rgba(144, 238, 144, 0.5);
1536
+
1537
+
[data-theme="dark"] .editor-panel.live-running,
1538
+
[data-theme="dark"] #kidlisp-editor.live-running {
1539
+
box-shadow: inset 0 0 0 2px rgba(144, 238, 144, 0.5);
1559
1540
}
1560
-
1561
-
[data-theme="dark"] .editor-panel.live-paused::before,
1562
-
[data-theme="dark"] #kidlisp-editor.live-paused::before {
1563
-
border-color: rgba(255, 217, 61, 0.5);
1541
+
1542
+
[data-theme="dark"] .editor-panel.live-paused,
1543
+
[data-theme="dark"] #kidlisp-editor.live-paused {
1544
+
box-shadow: inset 0 0 0 2px rgba(255, 217, 61, 0.5);
1564
1545
}
1565
1546
1566
1547
/* Stopped state - purple outline (matches stop button) */
1567
-
.editor-panel.live-stopped::before,
1568
-
#kidlisp-editor.live-stopped::before {
1569
-
content: '';
1570
-
position: absolute;
1571
-
top: 0;
1572
-
left: 0;
1573
-
right: 0;
1574
-
bottom: 0;
1575
-
border: 2px solid rgba(147, 112, 219, 0.5);
1576
-
border-radius: 4px;
1577
-
pointer-events: none;
1578
-
z-index: -1; /* Below all content (including context menu) but above panel background */
1548
+
.editor-panel.live-stopped,
1549
+
#kidlisp-editor.live-stopped {
1550
+
box-shadow: inset 0 0 0 2px rgba(147, 112, 219, 0.5);
1579
1551
animation: stop-pulse 2s ease-in-out infinite;
1580
1552
}
1581
1553
1582
1554
/* Dark mode: slightly brighter for stopped state */
1583
1555
@media (prefers-color-scheme: dark) {
1584
-
.editor-panel.live-stopped::before,
1585
-
#kidlisp-editor.live-stopped::before {
1586
-
border-color: rgba(147, 112, 219, 0.6);
1556
+
.editor-panel.live-stopped,
1557
+
#kidlisp-editor.live-stopped {
1558
+
box-shadow: inset 0 0 0 2px rgba(147, 112, 219, 0.6);
1587
1559
}
1588
1560
}
1589
1561
1590
-
[data-theme="dark"] .editor-panel.live-stopped::before,
1591
-
[data-theme="dark"] #kidlisp-editor.live-stopped::before {
1592
-
border-color: rgba(147, 112, 219, 0.6);
1562
+
[data-theme="dark"] .editor-panel.live-stopped,
1563
+
[data-theme="dark"] #kidlisp-editor.live-stopped {
1564
+
box-shadow: inset 0 0 0 2px rgba(147, 112, 219, 0.6);
1593
1565
}
1594
1566
1595
1567
/* Pulse animation for stopped state - purple */
1596
1568
@keyframes stop-pulse {
1597
-
0%, 100% { border-color: rgba(147, 112, 219, 0.5); }
1598
-
50% { border-color: rgba(147, 112, 219, 0.25); }
1569
+
0%, 100% { box-shadow: inset 0 0 0 2px rgba(147, 112, 219, 0.5); }
1570
+
50% { box-shadow: inset 0 0 0 2px rgba(147, 112, 219, 0.25); }
1599
1571
}
1600
1572
1601
1573
/* Visualization Tabs */