/* The Eaon ADE window on eaon.dev: what ADE's own renderer would set at runtime. ade.css is ADE's stylesheets, copied verbatim by sync.sh. This file only adds what ADE computes in JavaScript rather than writes in CSS: 1. The default theme. ADE ships "Ade" (coral on ink, bone type) as DEFAULT_THEME_ID, and lib/theme.ts writes its tokens onto at startup. The values below were produced by running ADE's own shared/themes.ts buildTokens() on that spec, not picked by eye. ade.css carries the Signal theme's aqua values as a first-paint fallback; the app overwrites them immediately, and so does this. 2. The terminal. ADE draws panes with xterm.js; here a plain text renderer stands in for it, set to ADE's DEFAULT_SETTINGS (JetBrains Mono, 12px, lineHeight 1, a blinking block cursor) and the Ade terminal palette from buildTerminal(). */ :root { --ink-000: #0a0a0a; --ink-050: #0b0b0b; --ink-100: #0d0d0d; --ink-200: #0f0f0f; --ink-300: #191919; --ink-400: #232322; --ink-500: #302f2e; --line-100: #1b1b1a; --line-200: #252524; --line-300: #343331; --text-hi: #f4f2ee; --text-mid: #afaeab; --text-lo: #7d7c7a; --text-dim: #585856; --accent: #f17455; --accent-dim: #8b4736; --accent-wash: rgba(241, 116, 85, 0.1); --accent-edge: rgba(241, 116, 85, 0.42); --on-accent: #ffffff; --live: #f17455; --attention: #f2c14e; --on-attention: #060606; --danger: #d9483b; --scrim: rgba(10, 10, 10, 0.72); --glass: rgba(25, 25, 25, 0.94); color-scheme: dark; /* Ade terminal palette (buildTerminal). */ --t-bg: #0f0f0f; --t-fg: #dddbd8; --t-cursor: #f17455; --t-0: #0f0f0f; --t-1: #d9483b; --t-2: #a3b86c; --t-3: #f2c14e; --t-4: #6e93b8; --t-5: #c98bb0; --t-6: #7fb5ad; --t-7: #d6d3cb; --t-8: #5c5a55; --t-9: #f17455; --t-10: #bcd18a; --t-11: #ffd977; --t-12: #8fb4d8; --t-13: #e3a8cb; --t-14: #9ed4cb; --t-15: #f4f2ee; } /* The page is a window, not a document: no scrolling, and the site's pointer is drawn by the parent page, so nothing in here reacts to hover. */ html, body { background: var(--ink-000); } body { pointer-events: none; } /* ADE's own rules give .conductor, .notice and friends a display value, which beats the user-agent [hidden] rule. React unmounts them instead; here they stay in the markup and are hidden. */ [hidden] { display: none !important; } /* ---- the macOS traffic lights ---------------------------------------------- Native in the app, drawn by the OS inside the titlebar's 88px left inset. */ .lights { position: absolute; top: 16px; left: 20px; z-index: 5; display: flex; gap: 8px; } .lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.25); } .lights i:nth-child(2) { background: #febc2e; } .lights i:nth-child(3) { background: #28c840; } /* ---- the terminal --------------------------------------------------------- */ /* xterm with lineHeight 1 sizes a cell from the font's own metrics; for JetBrains Mono at 12px that is 15px tall and 7.2px wide. */ .tty { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: var(--t-bg); color: var(--t-fg); font-family: "JetBrains Mono", "SF Mono", Menlo, monospace; font-size: 12px; line-height: 15px; font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; /* Ink (Claude Code, Gemini CLI), ratatui (Codex) and prompt_toolkit (Aider) all wrap by word before they print, so the terminal never has to break one. Only a word longer than the line is split. */ white-space: pre-wrap; word-break: normal; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; position: relative; } .tty > div { min-height: 15px; flex: none; } /* A terminal shows whole rows. Lines scrolled partly off the top are hidden by ade.js rather than drawn cut in half. */ .tty > div.off { visibility: hidden; } .tty b { font-weight: 700; } /* The sixteen ANSI colours. */ .c0 { color: var(--t-0); } .c1 { color: var(--t-1); } .c2 { color: var(--t-2); } .c3 { color: var(--t-3); } .c4 { color: var(--t-4); } .c5 { color: var(--t-5); } .c6 { color: var(--t-6); } .c7 { color: var(--t-7); } .c8 { color: var(--t-8); } .c9 { color: var(--t-9); } .c10 { color: var(--t-10); } .c11 { color: var(--t-11); } .c12 { color: var(--t-12); } .c13 { color: var(--t-13); } .c14 { color: var(--t-14); } .c15 { color: var(--t-15); } .dim { opacity: 0.6; } .it { font-style: italic; } /* Colours the CLIs print as 24-bit RGB, which xterm renders as given and no theme touches (ADE sets minimumContrastRatio: 1 on purpose). These are Claude Code's dark-theme colours. */ .cc-brand { color: rgb(215, 119, 87); } .cc-ok { color: rgb(78, 186, 101); } .cc-err { color: rgb(255, 107, 128); } .cc-sub { color: rgb(153, 153, 153); } .cc-perm { color: rgb(177, 185, 249); } .cc-add { background: rgb(34, 92, 43); color: #e6e6e6; } .cc-del { background: rgb(122, 41, 54); color: #e6e6e6; } .cc-user { background: rgb(55, 55, 55); color: #f4f4f4; } .cx-add { color: var(--t-2); } .cx-del { color: var(--t-1); } /* One row of a diff: the tint runs from the line number to the pane edge. */ .dl { display: inline-block; width: calc(100% - 6ch); text-indent: 0; white-space: pre; overflow: hidden; vertical-align: top; } /* A blinking block, the way DEFAULT_SETTINGS draws it. */ .cur { background: var(--t-cursor); color: var(--t-bg); animation: cur-blink 1.06s steps(1) infinite; } .pane:not([data-active="true"]) .cur { background: transparent; box-shadow: inset 0 0 0 1px var(--t-cursor); color: inherit; animation: none; } @keyframes cur-blink { 50% { background: transparent; color: inherit; } } /* A line picked in a TUI menu. */ .sel { color: var(--t-12); } /* The Conductor, while a message is being typed into it. */ .conductor-input.is-typed { color: var(--text-hi); } @media (prefers-reduced-motion: reduce) { .cur, .pane-dot, .ros-dot, .ws-pulse i { animation: none !important; } } /* ---- the page inside a browser tab ---------------------------------------- ADE draws a here. The feature clip shows what the project's own dev server would: the storefront on :5173 and the API's health route on :3000. It is a web page, so it has its own look, not ADE's. */ .site { position: absolute; inset: 0; overflow: hidden; background: #fbfaf8; color: #1d1c1a; font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; } .site:empty { background: #fff; } .site-top { display: flex; align-items: center; gap: 22px; height: 52px; padding: 0 28px; border-bottom: 1px solid #ebe8e3; background: #fff; font-size: 13px; color: #5d5a55; } .site-top b { margin-right: 10px; color: #1d1c1a; font-size: 17px; letter-spacing: -0.02em; } .site-cart { margin-left: auto; padding: 5px 11px; border-radius: 999px; background: #1d1c1a; color: #fff; } .site-main { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; max-width: 860px; margin: 0 auto; padding: 30px 28px; } .site h1 { margin: 0 0 16px; font-size: 24px; letter-spacing: -0.02em; } .site-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #ebe8e3; } .site-item i { width: 44px; height: 44px; border-radius: 8px; } .site-item div { display: flex; flex: 1; flex-direction: column; } .site-item span { color: #8a8680; font-size: 12px; } .site-item em { font-style: normal; font-weight: 600; } .site label { display: block; margin: 14px 0 5px; color: #5d5a55; font-size: 12px; font-weight: 600; } .site-input { padding: 9px 11px; border: 1px solid #dedad4; border-radius: 8px; background: #fff; } .site-sum { align-self: start; padding: 18px; border: 1px solid #ebe8e3; border-radius: 12px; background: #fff; } .site-sum > div { display: flex; justify-content: space-between; padding: 5px 0; color: #5d5a55; } .site-sum .site-total { margin-top: 6px; padding-top: 11px; border-top: 1px solid #ebe8e3; color: #1d1c1a; font-weight: 700; } .site-btn { width: 100%; margin-top: 14px; padding: 11px; border-radius: 9px; background: #1d1c1a; color: #fff; font: inherit; font-weight: 600; } .site-msg { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: #fdecea; color: #a1281c; font-size: 12.5px; } .site--json { background: #fff; } .site-json { margin: 0; padding: 18px 22px; color: #1d1c1a; font: 13px/1.6 "JetBrains Mono", "SF Mono", Menlo, monospace; white-space: pre; } .site-json k { color: #8a2f8c; } .site-json s { color: #1c6b31; text-decoration: none; } .site-json n { color: #1b4fa3; }