Something went wrong. Try again.
Monorepo for Aesthetic.Computer aesthetic.computer
Something went wrong. Try again.
2.9 kB · 112 lines
CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113/* KidLisp Editor - CSS Variables & Themes */
:root { /* Light mode (default) */ --bg-primary: #f7f7f7; --bg-secondary: #e8e8e8; --bg-tertiary: white; --text-primary: #111; --text-secondary: #333; --text-tertiary: #666; --border-color: #ddd; --border-subtle: #e0e0e0; --code-bg: #e8e8e8; --code-text: #a31515; --editor-bg: #fafafa; --editor-text: #111; --editor-border: #ddd; /* Font stacks */ --font-mono: 'Noto Sans Mono', 'SF Mono', 'Monaco', 'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace; --font-display: 'YWFTProcessing-Regular', monospace; --font-fun: 'Comic Relief', 'Comic Sans MS', cursive; /* Brand colors */ --ac-purple: rgb(205, 92, 155); --ac-purple-light: rgb(240, 235, 250); --ac-purple-dark: rgb(48, 43, 58); /* Editor colors */ --editor-yellow: #fffacd; --editor-brown: #2a2520; --editor-brown-light: #3a3530; /* Console colors */ --console-bg: #4a3020; --console-text: #ff9f43; --console-header-bg: #3d2817; /* Tab colors */ --tab-examples-bg: rgba(59, 130, 246, 0.2); --tab-examples-active: rgba(59, 130, 246, 0.4); --tab-keeps-bg: rgba(205, 92, 155, 0.2); --tab-keeps-active: rgba(205, 92, 155, 0.4); --tab-reference-bg: rgba(34, 197, 94, 0.2); --tab-reference-active: rgba(34, 197, 94, 0.4); /* Button colors */ --btn-play: rgb(76, 175, 80); --btn-play-hover: rgb(102, 187, 106); --btn-pause: rgb(255, 193, 7); --btn-stop: rgb(244, 67, 54); /* Spacing */ --header-height: 44px; --mobile-header-height: 40px; --gutter-size: 4px;}
/* Dark mode via media query */@media (prefers-color-scheme: dark) { :root { --bg-primary: #1e1e1e; --bg-secondary: #252526; --bg-tertiary: #2d2d30; --text-primary: #d4d4d4; --text-secondary: #d4d4d4; --text-tertiary: #858585; --border-color: #3e3e42; --border-subtle: #3e3e42; --code-bg: #252526; --code-text: #ce9178; --editor-bg: #1e1e1e; --editor-text: #d4d4d4; --editor-border: #333; --btn-play: rgb(102, 187, 106); --btn-stop: rgb(239, 83, 80); }}
/* Manual theme overrides via data-theme attribute */[data-theme="light"] { --bg-primary: #f7f7f7; --bg-secondary: #e8e8e8; --bg-tertiary: white; --text-primary: #111; --text-secondary: #333; --text-tertiary: #666; --border-color: #ddd; --border-subtle: #e0e0e0; --code-bg: #e8e8e8; --code-text: #a31515; --editor-bg: #fafafa; --editor-text: #111; --editor-border: #ddd;}
[data-theme="dark"] { --bg-primary: #1e1e1e; --bg-secondary: #252526; --bg-tertiary: #2d2d30; --text-primary: #d4d4d4; --text-secondary: #d4d4d4; --text-tertiary: #858585; --border-color: #3e3e42; --border-subtle: #3e3e42; --code-bg: #252526; --code-text: #ce9178; --editor-bg: #1e1e1e; --editor-text: #d4d4d4; --editor-border: #333;}