/* ALY theme: the raised-surface tokens, and the rule every input obeys. Split out of aly.css because these are not "shell" styles — they are the contract every other ALY stylesheet leans on. Both atmospheres are defined here together, so neither is the fallback and neither can be forgotten. */ /* --- Raised surfaces ------------------------------------------------------ `--glass`, `--input` and `--input-2` are TRANSLUCENT OVERLAYS — in NEO, `--input-2` is 4% white. That is correct for something sitting on the page, and wrong for anything that has to sit ON TOP of it: a dialog painted with it let the page read straight through, and a field painted with a hardcoded `#fff` put near-white NEO text on a white box, which is text you cannot see. So raised surfaces get their own OPAQUE tokens. Anything that floats — a dialog, a menu, a popover — and any control you type into uses these. They are defined for both atmospheres, so neither is the fallback. */ /* --- ALY accent: ice cyan --------------------------------------------------- The ONE place ALY's accent is defined. Everything that used to be jade/teal in the ALY window reads these. Cyan is a trace, not a fill: hairlines, focus/hover glows, the orb's core and active states — about 5% of the screen. `--aly-accent-ink` is the accent where it has to be READ (text, small icons): the ice cyan itself on NEO; a deeper cyan on LUX's light surface, where #5CC8F2 is 1.6:1 and #156f9c is 4.6:1. NEO also takes ALY's near-black navy base and dark glass surfaces; LUX keeps Ceramic Mist — ALYSSIUN OS owns the atmosphere, ALY only follows it. `:root[data-alyssiun-atmosphere]`, not `:root`: the OS launcher's host stylesheet declares its own `--aly-accent` (jade) on html[atmosphere], which a bare :root would lose to. */ :root, :root[data-alyssiun-atmosphere] { --aly-accent: #5CC8F2; --aly-accent-soft: rgba(92, 200, 242, 0.18); --aly-accent-line: rgba(92, 200, 242, 0.35); --aly-glow: rgba(92, 200, 242, 0.25); --aly-accent-ink: #156f9c; --aly-glass: rgba(255, 255, 255, 0.62); --aly-glass-blur: blur(18px) saturate(1.2); /* ALY's verified/success tint follows the accent: no green in the window. */ --jade: var(--aly-accent-ink); } :root[data-alyssiun-atmosphere="neo"], :root[data-atmosphere="void"], :root[data-theme="neo"] { --aly-accent-ink: var(--aly-accent); --aly-base: #05070D; --aos-bg: var(--aly-base); --aly-glass: rgba(14, 20, 32, 0.55); --void: var(--aly-base); --bg: radial-gradient(1100px 680px at 50% -240px, #0b1220 0%, rgba(5, 7, 13, 0) 60%), var(--aly-base); --jade: var(--aly-accent); } /* --- Sidebar navigation ---------------------------------------------------- The menu's own pair of tokens, defined for both atmospheres. The sidebar used the generic `--glass`, which the OS launcher's host stylesheet also redefines (opaque #fff), so whichever sheet won decided whether New Chat was glass or a solid white block. Nothing else defines these names. */ :root { --aly-nav-bg: rgba(255, 255, 255, 0.62); --aly-nav-bg-hover: rgba(255, 255, 255, 0.95); --aly-nav-line: rgba(20, 20, 26, 0.12); --aly-nav-line-strong: rgba(20, 20, 26, 0.28); --aly-nav-text: #16161c; --aly-nav-muted: #6c6c77; --aly-nav-active-bg: var(--aly-accent-soft); --aly-nav-accent: var(--aly-accent-ink); --aly-nav-tip-bg: #16161c; --aly-nav-tip-text: #f6f5f1; } :root[data-alyssiun-atmosphere="neo"], :root[data-atmosphere="void"], :root[data-theme="neo"] { --aly-nav-bg: rgba(255, 255, 255, 0.045); --aly-nav-bg-hover: rgba(255, 255, 255, 0.09); --aly-nav-line: rgba(255, 255, 255, 0.12); --aly-nav-line-strong: rgba(255, 255, 255, 0.28); --aly-nav-text: #f4f4f6; --aly-nav-muted: #8b8b97; --aly-nav-active-bg: var(--aly-accent-soft); --aly-nav-accent: var(--aly-accent); --aly-nav-tip-bg: #f4f4f6; --aly-nav-tip-text: #0c0c11; } :root { --surface: #ffffff; /* dialogs, menus, fields */ --surface-2: #f7f6f1; /* recessed inside a raised surface */ --surface-line: rgba(20, 20, 26, 0.14); --scrim: rgba(24, 23, 20, 0.42); } :root[data-alyssiun-atmosphere="neo"], :root[data-atmosphere="void"], :root[data-theme="neo"] { --surface: #16161c; --surface-2: #1d1d24; --surface-line: rgba(255, 255, 255, 0.14); --scrim: rgba(0, 0, 0, 0.62); } /* Every field, everywhere: an opaque surface and the theme's own text colour. Stated once here rather than per-component, because "the box you type in" is exactly the thing that must never be left to a component to get right. */ input, textarea, select { background: var(--surface); color: var(--text); border-color: var(--surface-line); } input:focus, textarea:focus, select:focus { background: var(--surface); color: var(--text); border-color: var(--text); } ::placeholder { color: var(--muted); opacity: 1; } /* --- Defending ALY's own surfaces ----------------------------------------- The ALYSSIUN OS launcher injects a host stylesheet (host-v1.css) that styles bare semantic tags for the pages it decorates. Inside ALY it reaches three `
` elements: the topbar — where it OVERRODE the background ALY had already declared — the Settings dialog's own header, and the plan header inside it, either of which would otherwise paint a different shade from the dialog around it. ALY states its own. Not a preference: a colour ALY did not choose can change under it whenever another application ships a new launcher. `!important` is deliberate and is the narrowest tool that works — the host rules are themselves `!important`, so specificity cannot answer them. The scope is five selectors, all of them ALY's own named components. The alternative was editing a launcher stylesheet shared by every ALYSSIUN application to fix a bug in one of them. Specificity AND `!important`: the host stylesheet is injected at the end of the body, so it wins ties on order alone. These out-specify it. */ .aly-shell .aly-main .aly-topbar { background: var(--nav-bg) !important; } .aly-settings-dialog .aly-settings-dialog-head, .aly-settings-dialog .aly-usage-head, .aly-dialog-backdrop .aly-dialog header, .aly-dialog-backdrop .aly-dialog footer, .aly-dialog-backdrop .aly-dialog section { background: transparent !important; }