diff --git a/apps/web/src/styles/themes/effects/boocode-classic-fx.css b/apps/web/src/styles/themes/effects/boocode-classic-fx.css index 5a59950..75dafbd 100644 --- a/apps/web/src/styles/themes/effects/boocode-classic-fx.css +++ b/apps/web/src/styles/themes/effects/boocode-classic-fx.css @@ -233,6 +233,37 @@ html.bc-anim-on.theme-boocode-classic .bc-card:hover { transform: translateY(-1px); } +/* ── Primary action: warm orange glow ───────────────────────────────────── + The default-variant Button (Send / primary confirm). Static orange rim + drop + glow always; a gentle idle pulse under the gate. box-shadow / transform only + → never reflows. Calmer than Override (no glitch / colour split). */ +.theme-boocode-classic [data-slot="button"][data-variant="default"] { + box-shadow: + 0 0 0 1px color-mix(in srgb, var(--bc-orange) 45%, transparent), + var(--bc-glow-orange); +} +.theme-boocode-classic [data-slot="button"][data-variant="default"]:not([disabled]):hover { + box-shadow: + 0 0 0 1px color-mix(in srgb, var(--bc-orange) 75%, transparent), + 0 0 30px color-mix(in srgb, var(--bc-orange) 45%, transparent); +} +html.bc-anim-on.theme-boocode-classic [data-slot="button"][data-variant="default"] { + transition: box-shadow 220ms ease, transform 120ms ease; + animation: bc-glow-pulse 3.6s ease-in-out infinite; +} +html.bc-anim-on.theme-boocode-classic [data-slot="button"][data-variant="default"]:not([disabled]):active { + transform: translateY(0.5px) scale(0.985); +} + +/* ── Context meter track ─────────────────────────────────────────────────── + ContextMeter.tsx draws its track ring with `stroke-muted`; here --muted ≈ the + warm-black background so only the coloured fill arc shows. Give the track a + faint warm stroke (dimmer than the muted-foreground fill) so the full ring + reads. Scoped to the meter via its aria-label. */ +.theme-boocode-classic [aria-label^="Context window"] circle.stroke-muted { + stroke: color-mix(in srgb, var(--muted-foreground) 45%, transparent); +} + /* ── Keyframes (global names, referenced only under the gate above) ───────── */ @keyframes bc-caret-blink { 0%, 49% { opacity: 1; } @@ -242,6 +273,18 @@ html.bc-anim-on.theme-boocode-classic .bc-card:hover { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } +@keyframes bc-glow-pulse { + 0%, 100% { + box-shadow: + 0 0 0 1px color-mix(in srgb, var(--bc-orange) 45%, transparent), + var(--bc-glow-orange); + } + 50% { + box-shadow: + 0 0 0 1px color-mix(in srgb, var(--bc-orange) 65%, transparent), + 0 0 30px color-mix(in srgb, var(--bc-orange) 42%, transparent); + } +} /* ── Reduced-motion belt-and-suspenders ─────────────────────────────────── bc-anim-on already excludes reduced-motion (ThemeFx), but if the class ever @@ -258,8 +301,10 @@ html.bc-anim-on.theme-boocode-classic .bc-card:hover { display: none; } .theme-boocode-classic [data-slot="card"], - .theme-boocode-classic .bc-card { + .theme-boocode-classic .bc-card, + .theme-boocode-classic [data-slot="button"][data-variant="default"] { transition: none; + animation: none; } .theme-boocode-classic [data-slot="card"]:hover, .theme-boocode-classic .bc-card:hover { diff --git a/apps/web/src/styles/themes/effects/boocode-override-fx.css b/apps/web/src/styles/themes/effects/boocode-override-fx.css index 8656849..ee47eb8 100644 --- a/apps/web/src/styles/themes/effects/boocode-override-fx.css +++ b/apps/web/src/styles/themes/effects/boocode-override-fx.css @@ -177,6 +177,14 @@ html.bc-anim-on.theme-boocode-override [data-slot="card"]:hover { .theme-boocode-override .bg-sidebar { box-shadow: inset -1px 0 0 0 color-mix(in srgb, var(--bco-cyan) 16%, transparent); } + +/* Context meter track: ContextMeter.tsx draws its track ring with `stroke-muted`, + which ≈ the warm-black background here, so only the fill arc shows. Give the + track a faint warm stroke (dimmer than the muted-foreground fill) so the full + ring reads. Scoped to the meter via its aria-label. */ +.theme-boocode-override [aria-label^="Context window"] circle.stroke-muted { + stroke: color-mix(in srgb, var(--muted-foreground) 45%, transparent); +} .theme-boocode-override [data-slot="input"]:focus-visible, .theme-boocode-override [data-slot="button"]:focus-visible, .theme-boocode-override [data-slot="textarea"]:focus-visible {