Something went wrong. Try again.
Monorepo for Aesthetic.Computer aesthetic.computer
Something went wrong. Try again.
4.3 kB · 240 lines
CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241/* KidLisp Editor - Layout & Structure */
::-webkit-scrollbar { display: none;}
* { box-sizing: border-box; touch-action: manipulation;}
body { margin: 0; font-size: 18px; font-family: monospace; -webkit-text-size-adjust: none; display: flex; flex-direction: column; min-height: 100vh; background: var(--bg-primary); color: var(--text-primary); cursor: url('https://aesthetic.computer/aesthetic.computer/cursors/precise.svg') 12 12, auto;}
header { padding: 16px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-color);}
h1 { font-weight: normal; font-size: 20px; margin: 0;}
.tagline { font-size: 12px; opacity: 0.6; margin-top: 4px;}
main { flex: 1; display: flex; flex-direction: column; gap: 0; width: 100%; overflow: hidden;}
.top-row, .bottom-row { display: flex; flex-direction: row; overflow: hidden; width: 100%; min-height: 0;}
/* Panels base styles */.editor-panel,.preview-panel,.console-section,.reference-section { min-width: 0; min-height: 0;}
.editor-panel { display: flex; flex-direction: column; background: var(--editor-yellow);}
@media (prefers-color-scheme: dark) { .editor-panel { background: var(--editor-brown); }}
[data-theme="light"] .editor-panel { background: var(--editor-yellow); }[data-theme="dark"] .editor-panel { background: var(--editor-brown); }
.reference-section,.console-section { display: flex; flex-direction: column; overflow: hidden;}
/* Headers */.editor-header { padding: 0 12px; background: var(--editor-yellow); border-bottom: 1px solid var(--editor-border); display: flex; justify-content: flex-start; gap: 12px; align-items: center; color: var(--editor-text); height: var(--header-height); box-sizing: border-box; overflow: visible; flex-shrink: 0; position: relative; z-index: 200;}
@media (prefers-color-scheme: dark) { .editor-header { background: var(--editor-brown-light); border-bottom-color: var(--editor-brown); }}
[data-theme="dark"] .editor-header { background: var(--editor-brown-light); border-bottom-color: var(--editor-brown);}
.docs-header { padding: 0 12px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; font-size: 13px; font-weight: bold; color: var(--text-primary); height: var(--header-height); box-sizing: border-box; overflow: visible; flex-shrink: 0; position: relative;}
.docs-header:has(.tab) { padding: 0;}
/* Preview panel header */#preview-panel .docs-header { background: var(--ac-purple-light); border-bottom-color: rgb(220, 215, 230); z-index: 99998;}
@media (prefers-color-scheme: dark) { #preview-panel .docs-header { background: var(--ac-purple-dark); border-bottom-color: rgb(62, 56, 72); }}
[data-theme="dark"] #preview-panel .docs-header { background: var(--ac-purple-dark); border-bottom-color: rgb(62, 56, 72);}
/* Console panel header */#console-panel .docs-header { background: var(--console-header-bg); border-bottom-color: #2a1a0f;}
#console-title { color: var(--console-text);}
/* Content areas */.docs-content { flex: 1; overflow-y: auto; padding: 16px; font-size: 13px; line-height: 1.5; background: var(--bg-primary); color: var(--text-primary);}
.hidden { display: none !important;}
.docs-content.hidden { display: none;}
/* Console output */.console-output { flex: 1; overflow-y: auto; padding: 8px; font-size: 14px; font-family: var(--font-mono); line-height: 1.4; background: var(--console-bg); color: var(--console-text);}
/* Rows for Split.js */.top-row, .bottom-row { position: relative;}
/* Center square for 4-panel resize */#center-square { position: fixed; width: 8px; height: 8px; background: rgba(205, 92, 155, 0.4); cursor: move; z-index: 1000; pointer-events: auto;}
#center-square:hover { background: rgba(205, 92, 155, 0.6);}
#center-square.dragging { background: rgba(205, 92, 155, 0.8);}
footer { text-align: center; padding: 16px; font-size: 14px; opacity: 0.7; display: none;}
a { color: inherit; text-decoration: none;}
@media (hover: hover) { a:hover { color: var(--ac-purple); }}