web-a2e 1.0.0

package/src/css/base.css

@@ -0,0 +1,470 @@
+/* Apple //e Emulator - Base Styles
+   Variables, reset, body, and utility classes
+*/
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+:root {
+    /* Color palette - derived from the Apple rainbow logo stripes
+       Green: #61BB46  Yellow: #FDB827  Orange: #F5821F
+       Red:   #E03A3E  Purple: #963D97  Blue:   #009DDC */
+    --bg-dark: #0d1117;
+    --bg-medium: #161b22;
+    --bg-light: #21262d;
+    --bg-panel: #1c2128;
+    --bg-primary: #0d1117;
+
+    --text-primary: #e6edf3;
+    --text-secondary: #8b949e;
+    --text-muted: #6e7681;
+
+    --accent-green: #6EC94F;
+    --accent-green-dim: #3D8F2B;
+    --accent-yellow: #FDBE34;
+    --accent-blue: #18ABEA;
+    --accent-orange: #F68D35;
+    --accent-red: #E5504F;
+    --accent-purple: #B55DB6;
+
+    /* Apple beige/cream for monitor */
+    --monitor-beige: #c9c2b0;
+    --monitor-beige-dark: #a89f8e;
+    --monitor-beige-light: #ddd6c6;
+
+    /* Disk drive colors */
+    --drive-beige: #c4b998;
+    --drive-beige-dark: #9e9478;
+
+    --border-default: #30363d;
+    --border-muted: #21262d;
+
+    /* Fonts */
+    --font-sans:
+        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-mono: "JetBrains Mono", "SF Mono", "Menlo", monospace;
+
+    /* Spacing */
+    --space-xs: 0.25rem;
+    --space-sm: 0.5rem;
+    --space-md: 1rem;
+    --space-lg: 1.5rem;
+    --space-xl: 2rem;
+
+    /* Border radius */
+    --radius-sm: 4px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+    --radius-xl: 16px;
+
+    /* Shadows */
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
+    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
+    --shadow-window: 0 2px 12px rgba(0, 0, 0, 0.2);
+    --shadow-window-focused: 0 8px 40px rgba(0, 0, 0, 0.85), 0 2px 16px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(24, 171, 234, 0.5);
+    --shadow-glow: 0 0 20px rgba(110, 201, 79, 0.3);
+
+    /* Text selection colors (for screen text copy feature) */
+    --selection-highlight: rgba(24, 171, 234, 0.35);
+    --selection-copy-flash: rgba(110, 201, 79, 0.5);
+
+    /* Glassmorphism / overlay semantic tokens */
+    --glass-bg: rgba(13, 17, 23, 0.85);
+    --glass-bg-solid: rgba(13, 17, 23, 0.95);
+    --glass-bg-header: rgba(33, 38, 45, 0.6);
+    --glass-border: rgba(48, 54, 61, 0.6);
+    --glass-border-light: rgba(48, 54, 61, 0.4);
+    --glass-border-subtle: rgba(48, 54, 61, 0.3);
+
+    /* Control backgrounds */
+    --control-bg: rgba(33, 38, 45, 0.5);
+    --control-bg-solid: rgba(33, 38, 45, 0.6);
+    --control-bg-hover: rgba(48, 54, 61, 0.6);
+    --control-bg-active: rgba(48, 54, 61, 0.8);
+    --control-border: rgba(48, 54, 61, 0.4);
+    --control-border-hover: rgba(48, 54, 61, 0.7);
+    --separator-bg: rgba(48, 54, 61, 0.5);
+
+    /* Input fields */
+    --input-bg: rgba(0, 0, 0, 0.15);
+    --input-bg-deep: rgba(0, 0, 0, 0.25);
+    --input-bg-deeper: rgba(0, 0, 0, 0.3);
+    --input-bg-dark: rgba(0, 0, 0, 0.2);
+
+    /* Overlay/hover layers */
+    --overlay-subtle: rgba(255, 255, 255, 0.04);
+    --overlay-hover: rgba(255, 255, 255, 0.08);
+    --overlay-active: rgba(255, 255, 255, 0.15);
+    --overlay-faint: rgba(255, 255, 255, 0.05);
+    --overlay-white-10: rgba(255, 255, 255, 0.1);
+    --overlay-white-02: rgba(255, 255, 255, 0.02);
+
+    /* Accent-tinted backgrounds */
+    --accent-green-bg: rgba(110, 201, 79, 0.15);
+    --accent-green-bg-strong: rgba(110, 201, 79, 0.2);
+    --accent-green-bg-stronger: rgba(110, 201, 79, 0.3);
+    --accent-green-border: rgba(110, 201, 79, 0.4);
+    --accent-green-border-light: rgba(110, 201, 79, 0.25);
+    --accent-yellow-bg: rgba(253, 190, 52, 0.15);
+    --accent-yellow-bg-strong: rgba(253, 190, 52, 0.2);
+    --accent-yellow-border: rgba(253, 190, 52, 0.3);
+    --accent-blue-bg: rgba(24, 171, 234, 0.15);
+    --accent-blue-bg-strong: rgba(24, 171, 234, 0.2);
+    --accent-blue-bg-stronger: rgba(24, 171, 234, 0.3);
+    --accent-blue-border: rgba(24, 171, 234, 0.4);
+    --accent-blue-border-light: rgba(24, 171, 234, 0.3);
+    --accent-orange-bg: rgba(246, 141, 53, 0.15);
+    --accent-orange-bg-strong: rgba(246, 141, 53, 0.2);
+    --accent-orange-border: rgba(246, 141, 53, 0.3);
+    --accent-orange-border-strong: rgba(246, 141, 53, 0.4);
+    --accent-orange-border-stronger: rgba(246, 141, 53, 0.5);
+    --accent-red-bg: rgba(229, 80, 79, 0.12);
+    --accent-red-bg-strong: rgba(229, 80, 79, 0.15);
+    --accent-red-bg-stronger: rgba(229, 80, 79, 0.2);
+    --accent-red-border: rgba(229, 80, 79, 0.4);
+    --accent-purple-bg: rgba(181, 93, 182, 0.15);
+    --accent-purple-bg-strong: rgba(181, 93, 182, 0.2);
+
+    /* Register flash (CPU debugger change highlight) */
+    --reg-flash-color: #FDBE34;
+    --reg-flash-bg: rgba(253, 190, 52, 0.3);
+
+    /* Editor container (BASIC program window) */
+    --editor-bg: rgba(0, 0, 0, 0.4);
+    --editor-focus-border: rgba(110, 201, 79, 0.6);
+    --editor-focus-shadow: rgba(110, 201, 79, 0.15);
+    --editor-placeholder: rgba(110, 201, 79, 0.4);
+    --editor-linenum: #6e7681;
+    --editor-var: #E5504F;
+
+    /* Flag glow (CPU debugger active flags) */
+    --flag-active-glow: rgba(110, 201, 79, 0.25);
+
+    /* Miscellaneous */
+    --badge-dim-bg: rgba(110, 118, 129, 0.2);
+    --badge-dim-border: rgba(110, 118, 129, 0.3);
+    --irq-dim-bg: rgba(128, 128, 128, 0.1);
+    --irq-dim-border: rgba(128, 128, 128, 0.2);
+    --muted-bg: rgba(139, 148, 158, 0.2);
+    --reference-border: rgba(255, 255, 255, 0.1);
+    --body-gradient-end: #0a0e14;
+
+    /* Canvas drawing backgrounds (opaque, for JS canvas clearing) */
+    --canvas-bg: #05050a;
+    --canvas-line: #1a1a2a;
+
+    /* Disk surface rendering */
+    --disk-bg: #161b22;
+    --disk-medium: #1a1308;
+    --disk-sector-line: rgba(255, 255, 255, 0.08);
+    --disk-ghost-outline: rgba(255, 255, 255, 0.06);
+    --disk-ghost-sector: rgba(255, 255, 255, 0.03);
+    --disk-ghost-hub: rgba(210, 208, 200, 0.08);
+    --disk-hub-ring: rgba(210, 208, 200, 0.85);
+    --disk-hub-edge: rgba(255, 255, 255, 0.12);
+    --disk-hub-edge-inner: rgba(255, 255, 255, 0.08);
+    --disk-hole-edge: rgba(0, 0, 0, 0.3);
+    --disk-edge: rgba(255, 255, 255, 0.06);
+    --disk-label-color: rgba(255, 255, 255, 0.45);
+
+    /* Reminder gradient backgrounds */
+    --reminder-bg-start: #1e3a5f;
+    --reminder-bg-end: #0d2137;
+
+    /* Syntax highlighting (dark theme - Apple logo palette) */
+    --syntax-flow: #E5504F;
+    --syntax-load: #6EC94F;
+    --syntax-math: #F68D35;
+    --syntax-stack: #B55DB6;
+    --syntax-flag: #18ABEA;
+    --syntax-data: #8b949e;
+    --syntax-comment: #8b949e;
+    --syntax-number: #18ABEA;
+    --syntax-keyword: #18ABEA;
+    --syntax-string: #6EC94F;
+    --syntax-operator: #B55DB6;
+    --syntax-register: #6EC94F;
+    --syntax-addr: #7c8799;
+    --syntax-separator: #4a5568;
+    --syntax-hex-byte: #18ABEA;
+    --syntax-hex-zero: #4a5568;
+    --syntax-hex-printable: #6EC94F;
+    --syntax-hex-highbit: #B55DB6;
+    --syntax-ascii-printable: #F68D35;
+    --syntax-ascii-dot: #3a4556;
+    --syntax-ascii-separator: #3a4556;
+    --syntax-flow-bright: #6EC94F;
+    --syntax-const: #C87DC9;
+    --syntax-const-bright: #DA99DB;
+    --syntax-symbol-zp: #6EC94F;
+    --syntax-symbol-sw: #F68D35;
+    --syntax-symbol-disk: #FDBE34;
+    --syntax-symbol-rom: #18ABEA;
+    --syntax-symbol-basic: #B55DB6;
+    --syntax-symbol-vec: #E5504F;
+    --syntax-symbol-io: #4DC4F0;
+    --syntax-symbol-zp-bright: #8CDB78;
+    --syntax-symbol-sw-bright: #F8A864;
+    --syntax-symbol-disk-bright: #FECE63;
+    --syntax-symbol-rom-bright: #5CC0EE;
+    --syntax-symbol-basic-bright: #C87DC9;
+    --syntax-symbol-vec-bright: #ED7A7C;
+    --syntax-symbol-io-bright: #7ED1F3;
+
+    /* Memory browser */
+    --mem-byte: #18ABEA;
+    --mem-zero: #4a5568;
+    --mem-printable: #6EC94F;
+    --mem-highbit: #B55DB6;
+    --mem-ascii: #F68D35;
+    --mem-addr: #7c8799;
+    --mem-separator: #4a5568;
+    --mem-scrollbar-thumb: rgba(24, 171, 234, 0.4);
+    --mem-scrollbar-thumb-hover: rgba(24, 171, 234, 0.6);
+}
+
+/* ============================================
+   LIGHT THEME
+   ============================================ */
+html[data-theme="light"] {
+    --bg-dark: #ffffff;
+    --bg-medium: #f6f8fa;
+    --bg-light: #e8ecf0;
+    --bg-panel: #eef1f5;
+    --bg-primary: #ffffff;
+
+    --text-primary: #1f2328;
+    --text-secondary: #656d76;
+    --text-muted: #8b949e;
+
+    --accent-green: #3A7D29;
+    --accent-green-dim: #d5f0d0;
+    --accent-yellow: #8A6200;
+    --accent-blue: #006FA3;
+    --accent-orange: #A35A0E;
+    --accent-red: #B42D31;
+    --accent-purple: #723075;
+
+    --border-default: #d0d7de;
+    --border-muted: #e8ecf0;
+
+    /* Shadows - much lighter in light theme */
+    --shadow-sm: 0 1px 2px rgba(31, 35, 40, 0.08);
+    --shadow-md: 0 4px 12px rgba(31, 35, 40, 0.12);
+    --shadow-lg: 0 8px 24px rgba(31, 35, 40, 0.16);
+    --shadow-window: 0 2px 12px rgba(31, 35, 40, 0.06);
+    --shadow-window-focused: 0 8px 40px rgba(31, 35, 40, 0.4), 0 2px 16px rgba(31, 35, 40, 0.3), 0 0 0 1px rgba(0, 111, 163, 0.4);
+    --shadow-glow: 0 0 20px rgba(58, 125, 41, 0.2);
+
+    --selection-highlight: rgba(0, 111, 163, 0.2);
+    --selection-copy-flash: rgba(58, 125, 41, 0.3);
+
+    /* Glassmorphism */
+    --glass-bg: rgba(255, 255, 255, 0.92);
+    --glass-bg-solid: rgba(255, 255, 255, 0.97);
+    --glass-bg-header: rgba(246, 248, 250, 0.8);
+    --glass-border: rgba(208, 215, 222, 0.8);
+    --glass-border-light: rgba(208, 215, 222, 0.6);
+    --glass-border-subtle: rgba(208, 215, 222, 0.4);
+
+    /* Control backgrounds */
+    --control-bg: rgba(246, 248, 250, 0.8);
+    --control-bg-solid: rgba(232, 236, 240, 0.8);
+    --control-bg-hover: rgba(208, 215, 222, 0.6);
+    --control-bg-active: rgba(208, 215, 222, 0.8);
+    --control-border: rgba(208, 215, 222, 0.6);
+    --control-border-hover: rgba(208, 215, 222, 0.9);
+    --separator-bg: rgba(208, 215, 222, 0.6);
+
+    /* Input fields */
+    --input-bg: rgba(246, 248, 250, 0.6);
+    --input-bg-deep: rgba(232, 236, 240, 0.6);
+    --input-bg-deeper: rgba(232, 236, 240, 0.8);
+    --input-bg-dark: rgba(246, 248, 250, 0.8);
+
+    /* Overlay/hover layers */
+    --overlay-subtle: rgba(31, 35, 40, 0.04);
+    --overlay-hover: rgba(31, 35, 40, 0.08);
+    --overlay-active: rgba(31, 35, 40, 0.12);
+    --overlay-faint: rgba(31, 35, 40, 0.04);
+    --overlay-white-10: rgba(31, 35, 40, 0.06);
+    --overlay-white-02: rgba(31, 35, 40, 0.02);
+
+    /* Accent-tinted backgrounds */
+    --accent-green-bg: rgba(58, 125, 41, 0.1);
+    --accent-green-bg-strong: rgba(58, 125, 41, 0.15);
+    --accent-green-bg-stronger: rgba(58, 125, 41, 0.2);
+    --accent-green-border: rgba(58, 125, 41, 0.3);
+    --accent-green-border-light: rgba(58, 125, 41, 0.2);
+    --accent-yellow-bg: rgba(138, 98, 0, 0.08);
+    --accent-yellow-bg-strong: rgba(138, 98, 0, 0.12);
+    --accent-yellow-border: rgba(138, 98, 0, 0.2);
+    --accent-blue-bg: rgba(0, 111, 163, 0.1);
+    --accent-blue-bg-strong: rgba(0, 111, 163, 0.15);
+    --accent-blue-bg-stronger: rgba(0, 111, 163, 0.2);
+    --accent-blue-border: rgba(0, 111, 163, 0.3);
+    --accent-blue-border-light: rgba(0, 111, 163, 0.2);
+    --accent-orange-bg: rgba(163, 90, 14, 0.08);
+    --accent-orange-bg-strong: rgba(163, 90, 14, 0.12);
+    --accent-orange-border: rgba(163, 90, 14, 0.2);
+    --accent-orange-border-strong: rgba(163, 90, 14, 0.3);
+    --accent-orange-border-stronger: rgba(163, 90, 14, 0.4);
+    --accent-red-bg: rgba(180, 45, 49, 0.08);
+    --accent-red-bg-strong: rgba(180, 45, 49, 0.1);
+    --accent-red-bg-stronger: rgba(180, 45, 49, 0.15);
+    --accent-red-border: rgba(180, 45, 49, 0.3);
+    --accent-purple-bg: rgba(114, 48, 117, 0.08);
+    --accent-purple-bg-strong: rgba(114, 48, 117, 0.12);
+
+    /* Register flash (CPU debugger change highlight) */
+    --reg-flash-color: #8A6200;
+    --reg-flash-bg: rgba(138, 98, 0, 0.15);
+
+    /* Editor container (BASIC program window) */
+    --editor-bg: rgba(246, 248, 250, 0.8);
+    --editor-focus-border: rgba(58, 125, 41, 0.5);
+    --editor-focus-shadow: rgba(58, 125, 41, 0.1);
+    --editor-placeholder: rgba(58, 125, 41, 0.4);
+    --editor-linenum: #656d76;
+    --editor-var: #B42D31;
+
+    /* Flag glow (CPU debugger active flags) */
+    --flag-active-glow: rgba(58, 125, 41, 0.2);
+
+    /* Miscellaneous */
+    --badge-dim-bg: rgba(139, 148, 158, 0.15);
+    --badge-dim-border: rgba(139, 148, 158, 0.25);
+    --irq-dim-bg: rgba(139, 148, 158, 0.1);
+    --irq-dim-border: rgba(139, 148, 158, 0.2);
+    --muted-bg: rgba(139, 148, 158, 0.15);
+    --reference-border: rgba(31, 35, 40, 0.08);
+    --body-gradient-end: #f0f3f6;
+
+    /* Canvas drawing backgrounds */
+    --canvas-bg: #f0f2f5;
+    --canvas-line: #d0d7de;
+
+    /* Disk surface rendering */
+    --disk-bg: #e8ecf0;
+    --disk-medium: #3a2f1a;
+    --disk-sector-line: rgba(255, 255, 255, 0.25);
+    --disk-ghost-outline: rgba(0, 0, 0, 0.1);
+    --disk-ghost-sector: rgba(0, 0, 0, 0.06);
+    --disk-ghost-hub: rgba(210, 208, 200, 0.4);
+    --disk-hub-ring: rgba(210, 208, 200, 0.95);
+    --disk-hub-edge: rgba(0, 0, 0, 0.12);
+    --disk-hub-edge-inner: rgba(0, 0, 0, 0.08);
+    --disk-hole-edge: rgba(0, 0, 0, 0.2);
+    --disk-edge: rgba(0, 0, 0, 0.1);
+    --disk-label-color: rgba(0, 0, 0, 0.4);
+
+    /* Reminder backgrounds */
+    --reminder-bg-start: #dbeafe;
+    --reminder-bg-end: #eff6ff;
+
+    /* Syntax highlighting (light theme - Apple logo palette) */
+    --syntax-flow: #B42D31;
+    --syntax-load: #3A7D29;
+    --syntax-math: #A35A0E;
+    --syntax-stack: #723075;
+    --syntax-flag: #006FA3;
+    --syntax-data: #656d76;
+    --syntax-comment: #656d76;
+    --syntax-number: #006FA3;
+    --syntax-keyword: #006FA3;
+    --syntax-string: #3A7D29;
+    --syntax-operator: #723075;
+    --syntax-register: #3A7D29;
+    --syntax-addr: #656d76;
+    --syntax-separator: #afb8c1;
+    --syntax-hex-byte: #006FA3;
+    --syntax-hex-zero: #afb8c1;
+    --syntax-hex-printable: #3A7D29;
+    --syntax-hex-highbit: #723075;
+    --syntax-ascii-printable: #A35A0E;
+    --syntax-ascii-dot: #afb8c1;
+    --syntax-ascii-separator: #afb8c1;
+    --syntax-flow-bright: #3A7D29;
+    --syntax-const: #723075;
+    --syntax-const-bright: #5A2560;
+    --syntax-symbol-zp: #3A7D29;
+    --syntax-symbol-sw: #A35A0E;
+    --syntax-symbol-disk: #8A6200;
+    --syntax-symbol-rom: #006FA3;
+    --syntax-symbol-basic: #723075;
+    --syntax-symbol-vec: #B42D31;
+    --syntax-symbol-io: #0087C2;
+    --syntax-symbol-zp-bright: #2C6020;
+    --syntax-symbol-sw-bright: #7E450B;
+    --syntax-symbol-disk-bright: #6A4D00;
+    --syntax-symbol-rom-bright: #005680;
+    --syntax-symbol-basic-bright: #5A2560;
+    --syntax-symbol-vec-bright: #8E2226;
+    --syntax-symbol-io-bright: #00689A;
+
+    /* Memory browser */
+    --mem-byte: #006FA3;
+    --mem-zero: #afb8c1;
+    --mem-printable: #3A7D29;
+    --mem-highbit: #723075;
+    --mem-ascii: #A35A0E;
+    --mem-addr: #656d76;
+    --mem-separator: #afb8c1;
+    --mem-scrollbar-thumb: rgba(0, 111, 163, 0.3);
+    --mem-scrollbar-thumb-hover: rgba(0, 111, 163, 0.5);
+}
+
+/* Utility classes */
+.hidden {
+    display: none !important;
+}
+
+html {
+    font-size: 16px;
+}
+
+body {
+    font-family: var(--font-sans);
+    background: linear-gradient(135deg, var(--bg-dark) 0%, var(--body-gradient-end) 100%);
+    color: var(--text-primary);
+    min-height: 100vh;
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+#app {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--bg-dark);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--border-default);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--text-muted);
+}
+
+/* Firefox scrollbar */
+* {
+    scrollbar-width: thin;
+    scrollbar-color: var(--border-default) var(--bg-dark);
+}