sergiopaniego HF Staff
Publish the deck source under source/ so the next deck can start from it
3bc016b verified | 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", | |
| }} | |
| /> | |
| </> | |
| ); | |
| } | |