/* What Eaon Desktop's renderer sets at runtime, for the homepage clips. desktop.css is Desktop's own stylesheets verbatim (sync.sh). The palette is on in index.html, as useTheme() writes it for the default settings. This file adds only what the operating system draws, and the one rule React makes unnecessary by unmounting things instead of hiding them. */ html { background: #0b0b0b; } /* The page is a picture of a window: the site's pointer is drawn by runner.js, so nothing in here reacts to a real one. */ body { pointer-events: none; } /* Desktop's rules give .page, .settings and the rest a display value, which beats the user-agent [hidden] rule. */ [hidden] { display: none !important; } /* macOS draws the traffic lights itself, at trafficLightPosition.x = 20 and centred in the floating panel's 36px titlebar, which starts --sidebar-gap below the window edge. */ .lights { position: fixed; top: calc(var(--sidebar-gap) + (var(--titlebar-h) - 12px) / 2); left: 20px; z-index: 200; 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 composer's own caret while a clip types into it. */ .composer__input.is-typing { caret-color: var(--accent); }