julian
49df2015c8
Add tailwindcss (Bloomberg-terminal theme in index.css), @tanstack/react-query + react-router, zustand, and Radix primitives. Router with role-guarded routes; QueryClient wrapping the existing apiFetch; a small Zustand live store fed by a /api/ws client that invalidates Query caches. Booth screen: live occupancy gauge + streaming entry/exit/payment feed. Vite proxies the WS upgrade. Note: BoothScreen references the pay/exit modal + active-sessions panel added in following commits; final HEAD builds.
59 lines
1.8 KiB
CSS
59 lines
1.8 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* Bloomberg-terminal aesthetic: dense, dark, monospace, keyboard-first.
|
|
Tailwind v4 — design tokens live here in @theme (no tailwind.config.js).
|
|
The booth runs on a fixed appliance display; we optimise for a dark room,
|
|
glanceable status colour, and high information density over whitespace. */
|
|
@theme {
|
|
/* Surfaces — near-black, layered greys for panels/borders. */
|
|
--color-term-bg: #0a0e12;
|
|
--color-term-panel: #11161c;
|
|
--color-term-panel-2: #161d25;
|
|
--color-term-border: #232c37;
|
|
--color-term-muted: #6b7785;
|
|
--color-term-text: #c9d3de;
|
|
|
|
/* Status accents — the terminal's signal colours. */
|
|
--color-term-amber: #f5a623; /* primary accent / headings / focus */
|
|
--color-term-green: #2ecc71; /* entry / ok / free */
|
|
--color-term-red: #ff4d4f; /* exit / fault / full */
|
|
--color-term-cyan: #38bdf8; /* payment / info */
|
|
|
|
/* Monospace stack — IBM Plex Mono / JetBrains first, system mono fallback. */
|
|
--font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular",
|
|
"Menlo", "Consolas", monospace;
|
|
|
|
/* Tight radius — terminals are square. */
|
|
--radius-term: 2px;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#root {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--color-term-bg);
|
|
color: var(--color-term-text);
|
|
font-family: var(--font-mono);
|
|
font-size: 13px;
|
|
line-height: 1.4;
|
|
-webkit-font-smoothing: antialiased;
|
|
/* Crisp text and no rubber-banding on the fixed appliance display. */
|
|
overscroll-behavior: none;
|
|
}
|
|
|
|
/* Terminal scrollbars — thin, dark, unobtrusive. */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--color-term-border) transparent;
|
|
}
|
|
|
|
/* A visible keyboard-focus ring in the amber accent (keyboard-first UI). */
|
|
:focus-visible {
|
|
outline: 1px solid var(--color-term-amber);
|
|
outline-offset: 1px;
|
|
}
|