aesthetic.computer
Monorepo for Aesthetic.Computer
aesthetic.computer
1/* KidLisp Editor - Split.js & Gutters */
2
3/* ============================================
4 SPLIT.JS GUTTERS
5 ============================================ */
6
7.gutter {
8 transition: all 0.2s;
9 position: relative;
10 z-index: 1;
11 background-color: var(--border-color) !important;
12}
13
14.gutter.gutter-vertical {
15 height: var(--gutter-size) !important;
16 min-height: var(--gutter-size) !important;
17}
18
19.gutter.gutter-horizontal {
20 width: var(--gutter-size) !important;
21 min-width: var(--gutter-size) !important;
22}
23
24/* Main vertical gutter (between top and bottom rows) */
25#top-row + .gutter.gutter-vertical {
26 background: linear-gradient(to right, rgba(255, 140, 0, 0.3) 0%, rgba(255, 140, 0, 0.3) 50%, rgba(100, 149, 237, 0.3) 50%, rgba(100, 149, 237, 0.3) 100%) !important;
27 z-index: 2;
28}
29
30/* Top row horizontal gutter (between editor and preview) */
31#editor-panel + .gutter.gutter-horizontal {
32 background-color: var(--ac-purple-light) !important;
33 z-index: 1;
34}
35
36@media (prefers-color-scheme: dark) {
37 #editor-panel + .gutter.gutter-horizontal {
38 background-color: var(--ac-purple-dark) !important;
39 }
40}
41
42[data-theme="dark"] #editor-panel + .gutter.gutter-horizontal {
43 background-color: var(--ac-purple-dark) !important;
44}
45
46[data-theme="light"] #editor-panel + .gutter.gutter-horizontal {
47 background-color: var(--ac-purple-light) !important;
48}
49
50/* Bottom row horizontal gutter (between reference and console) */
51#reference-panel + .gutter.gutter-horizontal {
52 background-color: rgba(100, 149, 237, 0.3) !important;
53 z-index: 1;
54}
55
56@media (hover: hover) {
57 .gutter:hover {
58 opacity: 0.6;
59 }
60}
61
62/* Default cursors for gutters */
63.gutter.gutter-horizontal {
64 cursor: col-resize;
65}
66
67.gutter.gutter-vertical {
68 cursor: row-resize;
69}
70
71/* Desktop gutters - use Split.js */
72@media (min-width: 769px) {
73 .gutter {
74 display: block !important;
75 }
76}