File size: 1,259 Bytes
3bc016b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | import { useTheme } from "../ThemeContext";
// Faint grid + vignette — gives the frame structure. Ported from the
// forge theme's gridBackdrop / vignette.
export function Backdrop() {
const { T, mode } = useTheme();
const gridOpacity = mode === "dark" ? 0.18 : 0.5;
const vignette =
mode === "dark"
? "radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.55) 100%)"
: "radial-gradient(ellipse at center, transparent 45%, rgba(15,23,42,0.05) 100%)";
return (
<>
<div
style={{
position: "absolute",
inset: 0,
backgroundImage:
`linear-gradient(${T.border} 1px, transparent 1px),` +
` linear-gradient(90deg, ${T.border} 1px, transparent 1px)`,
backgroundSize: "40px 40px",
opacity: gridOpacity,
maskImage:
"radial-gradient(ellipse at center, #000 30%, transparent 80%)",
WebkitMaskImage:
"radial-gradient(ellipse at center, #000 30%, transparent 80%)",
pointerEvents: "none",
}}
/>
<div
style={{
position: "absolute",
inset: 0,
background: vignette,
pointerEvents: "none",
}}
/>
</>
);
}
|