Martin Dvorak
786d6cf1ae
The header and composer were full-bleed bands (flush to the top/right/bottom viewport edges, composer corners off-screen) next to a rail that floats with a 12px margin. The new --layout-gutter (12px) spaces the rail, header, empty-state card and composer identically on every side; --radius-panel/-control/-chip (-pill) replace the ad-hoc radii across the shared classes, so every panel is rounded on all four corners and shared controls match in every theme. The desktop-only ::after hairlines and the left-corner-only radius are gone. Aero: the rail and the chat chrome (answers included) share one even recipe - the wallpaper extra-blurred into a hue-free wash (background-glass.webp) under a uniform ~50% white veil and a whisper of gloss. Measured within ~10 RGB units across the rail top->bottom and the card/composer left->right; the blue->green smear and the teal composer are gone. The composer's field is a clean even tile with no wallpaper gradient inside it. Chat fixes: send is a filled primary tile shaped exactly like attach (dimmed while the input is empty), suggestion/context chips use the shared .chip token (40/44px target, visible rim, full-contrast text, raw model id in the tooltip), the AI note reads at 12px --text-muted (.ai-disclaimer), the selected sidebar row carries the accent border + accent icon, the theme toggle is back in Aero (the moon flips to Dark; Settings brings Aero back), and the empty state is centered exactly between header and composer. Outside CSS: the wallpaper's top-left HUD-circle decoration (it peeked through the 12px gutters on wide windows) was healed out of background.webp and background-blur.webp; the orbs/bubbles ride one masked .ice-floats layer that fades them under the chrome bands and the rail strip, so none is sliced by a panel edge (still parked under reduced motion). Version 0.6.0, SW -> freezmo-v82. Tests: chat suite pins the new geometry (12px gutter, 24px corners, even wash on all four panels, send-vs-attach shape, chips/input radii); mobile pins the phone chrome and the Aero toggle; bubbles pins the floats layer + its reduced-motion opt-out.
59 lines
2.5 KiB
TypeScript
59 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
/**
|
|
* The fixed ice scene behind every screen: a navy (or pale) base, four slow
|
|
* drifting glacier blobs, glossy ice orbs that rise slowly and fade at the
|
|
* edges, and a whisper of grain. Purely decorative — it never intercepts
|
|
* pointer events, only transform/opacity animate (each on its own composited
|
|
* layer), the rise stops under `prefers-reduced-motion`, and everything parks
|
|
* while the tab is hidden so a background tab costs no compositor work.
|
|
*/
|
|
export function IceBackdrop() {
|
|
const [hidden, setHidden] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const apply = () => setHidden(document.hidden);
|
|
apply();
|
|
document.addEventListener("visibilitychange", apply);
|
|
return () => document.removeEventListener("visibilitychange", apply);
|
|
}, []);
|
|
|
|
return (
|
|
<div className={`ice-scene${hidden ? " ice-paused" : ""}`} aria-hidden>
|
|
<span className="ice-blob ice-blob-a" />
|
|
<span className="ice-blob ice-blob-b" />
|
|
<span className="ice-blob ice-blob-c" />
|
|
<span className="ice-blob ice-blob-d" />
|
|
<div className="ice-floats">
|
|
<span className="ice-orb ice-orb-1" />
|
|
<span className="ice-orb ice-orb-2" />
|
|
<span className="ice-orb ice-orb-3" />
|
|
<span className="ice-orb ice-orb-4" />
|
|
<span className="ice-orb ice-orb-5" />
|
|
{/* Aero-only bubbles: display:none unless the aero theme is on, so they
|
|
cost nothing in the other themes (see .ice-bubble in globals.css). */}
|
|
<span className="ice-bubble ice-bubble-1" />
|
|
<span className="ice-bubble ice-bubble-2" />
|
|
<span className="ice-bubble ice-bubble-3" />
|
|
<span className="ice-bubble ice-bubble-4" />
|
|
<span className="ice-bubble ice-bubble-5" />
|
|
<span className="ice-bubble ice-bubble-6" />
|
|
<span className="ice-bubble ice-bubble-7" />
|
|
<span className="ice-bubble ice-bubble-8" />
|
|
<span className="ice-bubble ice-bubble-9" />
|
|
<span className="ice-bubble ice-bubble-10" />
|
|
<span className="ice-bubble ice-bubble-11" />
|
|
<span className="ice-bubble ice-bubble-12" />
|
|
<span className="ice-bubble ice-bubble-13" />
|
|
<span className="ice-bubble ice-bubble-14" />
|
|
<span className="ice-bubble ice-bubble-15" />
|
|
<span className="ice-bubble ice-bubble-16" />
|
|
<span className="ice-bubble ice-bubble-17" />
|
|
<span className="ice-bubble ice-bubble-18" />
|
|
</div>
|
|
<span className="ice-grain" />
|
|
</div>
|
|
);
|
|
}
|