Behavision: face recognition for retail, edge to head office
Five components that ship as one product:
- behavision/ the recognition engine. RTSP ingest, YuNet detection, IoU
tracking, ArcFace embeddings, a FAISS/SQLite gallery, and a
FastAPI dashboard. Identity is decided once per TRACK from an
average of at least three embeddings, never per frame.
- agent/ the Go edge agent: supervises the engine, holds a durable
spool, and drains it to MQTT. Nothing is acked before the
broker confirms.
- desktop/ the shop PC application (Wails + React + tray).
- server/ the cloud API, MQTT consumer, reports and assistant.
- web/ platform.loyaly.ai, the head-office app, embedded in the
server binary.
The gallery stores 512-float embeddings and timestamps - no images unless
`app.store_faces` is switched on. Those embeddings are biometric personal
data under GDPR and India's DPDP: template inversion reconstructs a
recognisable face from an ArcFace vector, so data/behavision.db is treated
as a biometric database and DELETE /api/visitors/{id} is a real erasure.
CLAUDE.md carries the reasoning behind every non-obvious decision here,
including the ones that were measured and the ones that were wrong first.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HViLj9gYNRtSr7YVZmW5sn
This commit is contained in:
499
web/src/styles.css
Normal file
499
web/src/styles.css
Normal file
@@ -0,0 +1,499 @@
|
||||
/* Behavision platform — head office.
|
||||
Shares the desktop app's palette on purpose: they are one product, and an
|
||||
owner who sees a shop PC and then this should not wonder whether they are
|
||||
looking at the same system. The layout differs because the questions do —
|
||||
the desktop is an instrument panel watched all day, this is read on a laptop
|
||||
and scrolls. */
|
||||
|
||||
:root {
|
||||
--ground: #0E1317;
|
||||
--surface: #161D23;
|
||||
--surface-2: #1D262D;
|
||||
--line: #27333B;
|
||||
--line-soft: #1F2A31;
|
||||
--ink: #E7EEF3;
|
||||
--ink-2: #B4C2CC;
|
||||
--muted: #7C8B97;
|
||||
--accent: #45B0C7;
|
||||
--accent-dim:#123039;
|
||||
--ok: #4FB37B;
|
||||
--ok-dim: #12291F;
|
||||
--warn: #E0A33A;
|
||||
--warn-dim: #2C2313;
|
||||
--bad: #E0655A;
|
||||
--bad-dim: #2B1917;
|
||||
--radius: 10px;
|
||||
--mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; }
|
||||
html { color-scheme: dark; }
|
||||
body {
|
||||
background: var(--ground);
|
||||
color: var(--ink);
|
||||
font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
button, input, select, textarea { font: inherit; color: inherit; }
|
||||
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
||||
code { font-family: var(--mono); font-size: .9em; }
|
||||
h1 { font-size: 22px; font-weight: 620; letter-spacing: -.015em; }
|
||||
h2 { font-size: 16px; font-weight: 600; }
|
||||
h3 { font-size: 13px; font-weight: 600; text-transform: uppercase;
|
||||
letter-spacing: .08em; color: var(--muted); }
|
||||
.sub { color: var(--muted); font-size: 13.5px; }
|
||||
.num { font-variant-numeric: tabular-nums; }
|
||||
.ok { color: var(--ok); } .warn { color: var(--warn); } .bad { color: var(--bad); }
|
||||
/* Those three are text utilities and they are inherited, so a card that carried
|
||||
`ok` as its own state class tinted every word inside it green. Card severity
|
||||
is therefore namespaced `state-*` below - a structural state and a colour
|
||||
utility must not share a name. */
|
||||
|
||||
/* ------------------------------------------------------------- shell ---- */
|
||||
.app { min-height: 100vh; display: flex; flex-direction: column; }
|
||||
.topbar {
|
||||
position: sticky; top: 0; z-index: 20;
|
||||
display: flex; align-items: center; gap: 28px;
|
||||
padding: 0 24px; height: 60px;
|
||||
background: var(--surface); border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.brand { display: flex; align-items: center; gap: 11px; }
|
||||
.brand strong { display: block; font-size: 15px; font-weight: 620; letter-spacing: -.01em; }
|
||||
.brand .org { display: block; font-size: 12px; color: var(--muted); }
|
||||
.mark {
|
||||
width: 18px; height: 18px; border-radius: 50%;
|
||||
border: 2.5px solid var(--accent);
|
||||
box-shadow: inset 0 0 0 3px var(--ground);
|
||||
flex: none;
|
||||
}
|
||||
.mark.big { width: 30px; height: 30px; border-width: 3px; margin-bottom: 14px; }
|
||||
|
||||
.tabs { display: flex; gap: 2px; margin-right: auto; }
|
||||
.tabs button {
|
||||
background: none; border: 0; border-radius: 7px; padding: 7px 13px;
|
||||
color: var(--ink-2); cursor: pointer; font-size: 14px;
|
||||
}
|
||||
.tabs button:hover { background: var(--surface-2); color: var(--ink); }
|
||||
.tabs button[aria-current="page"] { background: var(--accent-dim); color: var(--accent); font-weight: 550; }
|
||||
|
||||
.who { display: flex; align-items: center; gap: 12px; }
|
||||
.who .name { font-size: 13.5px; }
|
||||
.who .role { font-size: 11px; color: var(--muted); text-transform: uppercase;
|
||||
letter-spacing: .07em; }
|
||||
|
||||
.page { flex: 1; padding: 26px 24px 64px; max-width: 1280px; width: 100%;
|
||||
margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
|
||||
.head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
|
||||
.head h1 { margin-right: auto; }
|
||||
.head .sub { padding-bottom: 2px; }
|
||||
|
||||
/* ------------------------------------------------------------ buttons --- */
|
||||
button.primary {
|
||||
background: var(--accent); color: #04161B; border: 0; border-radius: 7px;
|
||||
padding: 9px 16px; font-weight: 600; cursor: pointer;
|
||||
}
|
||||
button.primary:disabled { opacity: .5; cursor: default; }
|
||||
button.ghost {
|
||||
background: none; border: 1px solid var(--line); border-radius: 7px;
|
||||
padding: 7px 13px; color: var(--ink-2); cursor: pointer;
|
||||
}
|
||||
button.ghost:hover { border-color: var(--muted); color: var(--ink); }
|
||||
|
||||
.segmented { display: flex; border: 1px solid var(--line); border-radius: 8px;
|
||||
overflow: hidden; }
|
||||
.segmented button {
|
||||
background: none; border: 0; padding: 7px 14px; color: var(--ink-2);
|
||||
cursor: pointer; font-size: 13.5px;
|
||||
}
|
||||
.segmented button + button { border-left: 1px solid var(--line); }
|
||||
.segmented button[aria-current] { background: var(--accent-dim); color: var(--accent); }
|
||||
|
||||
/* -------------------------------------------------------------- cards --- */
|
||||
.card { background: var(--surface); border: 1px solid var(--line);
|
||||
border-radius: var(--radius); }
|
||||
.grid { display: grid; gap: 14px; }
|
||||
.grid.sites { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
|
||||
.grid.stats { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
|
||||
|
||||
/* Shops, laid out like cameras: the shop's own camera view IS the card.
|
||||
The severity stripe survives on the left edge - a card that is entirely red
|
||||
reads as broken even when the shop is merely busy. */
|
||||
.card.site { overflow: hidden; padding: 0; cursor: pointer;
|
||||
border-left: 3px solid var(--line);
|
||||
transition: border-color .15s ease, transform .15s ease; }
|
||||
.card.site.state-ok { border-left-color: var(--ok); }
|
||||
.card.site.state-warn { border-left-color: var(--warn); }
|
||||
.card.site.state-bad { border-left-color: var(--bad); }
|
||||
.card.site.state-idle { border-left-color: var(--muted); }
|
||||
.card.site:hover { transform: translateY(-1px); }
|
||||
.card.site:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
||||
@media (prefers-reduced-motion: reduce) { .card.site { transition: none; } }
|
||||
|
||||
/* Three numbers, evenly weighted, because they are three different questions
|
||||
and none of them is the headline. The headline is the verdict line below. */
|
||||
.metrics { display: grid; grid-template-columns: repeat(3, 1fr);
|
||||
border-top: 1px solid var(--line-soft); }
|
||||
.metric { padding: 11px 6px; text-align: center; }
|
||||
.metric + .metric { border-left: 1px solid var(--line-soft); }
|
||||
.metric b { display: block; font-size: 15px; font-weight: 600;
|
||||
font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
|
||||
.metric b.ok { color: var(--ink); } .metric b.warn { color: var(--warn); }
|
||||
.metric b.bad { color: var(--bad); } .metric b.idle { color: var(--muted); }
|
||||
.metric span { display: block; margin-top: 1px; font-size: 11px; color: var(--muted); }
|
||||
|
||||
/* A shopfront, drawn for the same reason the camera tile draws a lens: most
|
||||
deployments store no images, so an empty tile is the ordinary state and it
|
||||
should still read as a shop. */
|
||||
.shopmark { width: 38px; height: 30px; fill: none; stroke: var(--line);
|
||||
stroke-width: 2; stroke-linejoin: round; }
|
||||
|
||||
.pill {
|
||||
display: inline-block; padding: 3px 9px; border-radius: 20px; flex: none;
|
||||
font-size: 11.5px; font-weight: 550; letter-spacing: .01em;
|
||||
background: var(--surface-2); color: var(--ink-2);
|
||||
}
|
||||
.pill.ok { background: var(--ok-dim); color: var(--ok); }
|
||||
.pill.warn { background: var(--warn-dim); color: var(--warn); }
|
||||
.pill.bad { background: var(--bad-dim); color: var(--bad); }
|
||||
.pill.new { background: var(--accent-dim); color: var(--accent); }
|
||||
|
||||
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
|
||||
background: var(--muted); margin-right: 7px; vertical-align: 1px; }
|
||||
.dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); }
|
||||
|
||||
/* ------------------------------------------------------------- stats ---- */
|
||||
.card.stat { padding: 16px 18px; display: flex; flex-direction: column; gap: 3px; }
|
||||
.stat .value { font-size: 30px; font-weight: 620; letter-spacing: -.02em;
|
||||
font-variant-numeric: tabular-nums; line-height: 1.15; }
|
||||
.stat .label { font-size: 13.5px; color: var(--ink-2); }
|
||||
.stat .note { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
|
||||
|
||||
.banner { padding: 12px 16px; border-radius: var(--radius); font-size: 14px;
|
||||
display: flex; gap: 16px; align-items: flex-start; }
|
||||
.banner.warn { background: var(--warn-dim); border: 1px solid #4A3A18; color: #F0D9A6; }
|
||||
.banner.ok { background: var(--ok-dim); border: 1px solid #1E4534; color: #C6E9D6; }
|
||||
.banner > div { flex: 1; }
|
||||
.creds { display: flex; gap: 26px; margin-top: 10px; flex-wrap: wrap; }
|
||||
.creds dt { font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
|
||||
color: var(--muted); }
|
||||
.creds dd { font-family: var(--mono); font-size: 14px; user-select: all; }
|
||||
|
||||
/* ----------------------------------------------------------- arrivals --- */
|
||||
.arrivals { list-style: none; padding: 0; display: grid; gap: 8px; }
|
||||
.card.arrival { display: flex; align-items: center; gap: 14px; padding: 11px 14px; }
|
||||
.face { width: 46px; height: 46px; border-radius: 50%; flex: none;
|
||||
object-fit: cover; background: var(--surface-2); }
|
||||
.face.initials { display: grid; place-items: center; color: var(--muted);
|
||||
font-size: 15px; font-weight: 600; letter-spacing: .02em; }
|
||||
.who-col { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
|
||||
.who-col strong { font-weight: 570; }
|
||||
.attrs { font-size: 12.5px; color: var(--muted); text-transform: capitalize; }
|
||||
|
||||
/* ------------------------------------------------------------ tables ---- */
|
||||
.toolbar { display: flex; gap: 10px; }
|
||||
.search {
|
||||
flex: 1; max-width: 380px; background: var(--surface);
|
||||
border: 1px solid var(--line); border-radius: 8px; padding: 9px 13px;
|
||||
}
|
||||
.search::placeholder { color: var(--muted); }
|
||||
/* Every placeholder, not just the search box. On this ground a browser's
|
||||
default placeholder is nearly as bright as a typed value, so an example in a
|
||||
field reads as an answer already given - an operator saw "counter PC" in the
|
||||
PC-label box and reasonably believed they had labelled it. */
|
||||
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
|
||||
.tablewrap { overflow-x: auto; background: var(--surface);
|
||||
border: 1px solid var(--line); border-radius: var(--radius); }
|
||||
table.rows { border-collapse: collapse; width: 100%; min-width: 620px; }
|
||||
table.rows th, table.rows td { text-align: left; padding: 11px 16px;
|
||||
border-bottom: 1px solid var(--line-soft); }
|
||||
table.rows tr:last-child td { border-bottom: 0; }
|
||||
table.rows th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em;
|
||||
color: var(--muted); font-weight: 600; background: var(--surface-2); }
|
||||
table.rows tbody tr { cursor: pointer; }
|
||||
table.rows tbody tr:hover { background: var(--surface-2); }
|
||||
table.rows td.num { font-variant-numeric: tabular-nums; }
|
||||
|
||||
/* ------------------------------------------------------------- chart ---- */
|
||||
.chart-card { padding: 18px; }
|
||||
.chart-head { margin-bottom: 16px; }
|
||||
.peak { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
|
||||
.peak b { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
|
||||
.chart { display: flex; align-items: flex-end; gap: 3px; height: 190px;
|
||||
overflow-x: auto; padding-bottom: 4px; }
|
||||
.col { flex: 1; min-width: 16px; display: flex; flex-direction: column;
|
||||
align-items: center; gap: 6px; height: 100%; }
|
||||
.bars { flex: 1; width: 100%; display: flex; flex-direction: column;
|
||||
justify-content: flex-end; }
|
||||
.bar { display: block; width: 100%; border-radius: 2px 2px 0 0; }
|
||||
.bar.new { background: var(--accent); }
|
||||
.bar.returning { background: var(--accent-dim); border-radius: 0; }
|
||||
.col:hover .bar.returning { background: #1B4552; }
|
||||
.tick { font-size: 10.5px; color: var(--muted); white-space: nowrap;
|
||||
font-variant-numeric: tabular-nums; }
|
||||
.legend { display: flex; gap: 18px; align-items: center; margin-top: 14px;
|
||||
padding-top: 12px; border-top: 1px solid var(--line-soft);
|
||||
font-size: 12.5px; color: var(--ink-2); }
|
||||
.legend span { display: flex; align-items: center; gap: 7px; }
|
||||
.swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
|
||||
.swatch.new { background: var(--accent); }
|
||||
.swatch.returning { background: var(--accent-dim); }
|
||||
.pad { padding: 24px 0; }
|
||||
|
||||
/* ------------------------------------------------------------ drawer ---- */
|
||||
.overlay { position: fixed; inset: 0; background: rgba(4, 8, 10, .62);
|
||||
display: flex; justify-content: flex-end; z-index: 50; }
|
||||
.drawer { width: min(560px, 100%); background: var(--surface);
|
||||
border-left: 1px solid var(--line); height: 100%; overflow-y: auto;
|
||||
display: flex; flex-direction: column; }
|
||||
.drawer.narrow { width: min(440px, 100%); }
|
||||
/* Sticky, and inside the scrolling panel rather than positioned against the
|
||||
fixed overlay — otherwise Close prints itself over whatever has scrolled
|
||||
under it. */
|
||||
.drawer-head { position: sticky; top: 0; z-index: 1; display: flex;
|
||||
align-items: flex-start; gap: 16px; padding: 18px 22px;
|
||||
background: var(--surface); border-bottom: 1px solid var(--line); }
|
||||
.drawer-head h2 { margin-right: auto; }
|
||||
.drawer-head > div { flex: 1; }
|
||||
.drawer-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
|
||||
.drawer-body + .drawer-body { border-top: 1px solid var(--line-soft); }
|
||||
fieldset { border: 0; padding: 0; margin: 0; display: flex;
|
||||
flex-direction: column; gap: 14px; }
|
||||
fieldset:disabled { opacity: .6; }
|
||||
label { display: flex; flex-direction: column; gap: 6px; font-size: 13px;
|
||||
color: var(--ink-2); }
|
||||
label input[type="text"], label input[type="email"], label input[type="password"],
|
||||
label input:not([type]), .drawer input {
|
||||
background: var(--ground); border: 1px solid var(--line); border-radius: 7px;
|
||||
padding: 9px 12px; color: var(--ink); font-size: 14.5px;
|
||||
}
|
||||
label .hint { font-size: 12px; color: var(--muted); line-height: 1.45; }
|
||||
label.check { flex-direction: row; align-items: center; gap: 9px; }
|
||||
label.check input { width: auto; }
|
||||
|
||||
.timeline { list-style: none; padding: 0; display: grid; gap: 8px; }
|
||||
.timeline li { display: flex; align-items: center; gap: 12px; font-size: 13.5px;
|
||||
padding: 9px 12px; background: var(--ground); border-radius: 7px; }
|
||||
.timeline .when { font-variant-numeric: tabular-nums; }
|
||||
.timeline .where { color: var(--muted); margin-right: auto; }
|
||||
|
||||
/* ------------------------------------------------------------ states ---- */
|
||||
.state { display: flex; flex-direction: column; align-items: center; gap: 8px;
|
||||
padding: 64px 20px; text-align: center; color: var(--ink-2); }
|
||||
.state .sub { max-width: 46ch; }
|
||||
.boot { min-height: 100vh; display: flex; align-items: center; justify-content: center;
|
||||
gap: 10px; color: var(--muted); }
|
||||
.error { color: var(--bad); font-size: 13.5px; }
|
||||
.spinner { width: 14px; height: 14px; border-radius: 50%;
|
||||
border: 2px solid var(--line); border-top-color: var(--accent);
|
||||
animation: spin .7s linear infinite; display: inline-block; }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
|
||||
|
||||
/* ------------------------------------------------------------ sign in --- */
|
||||
.signin { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
|
||||
.signin .card { width: min(380px, 100%); padding: 30px; display: flex;
|
||||
flex-direction: column; gap: 14px; }
|
||||
.signin h1 { font-size: 20px; }
|
||||
.signin .sub { margin-top: -8px; margin-bottom: 6px; }
|
||||
.signin .foot { font-size: 12.5px; color: var(--muted); text-align: center;
|
||||
margin-top: 4px; line-height: 1.5; }
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.topbar { height: auto; flex-wrap: wrap; padding: 12px 16px; gap: 12px; }
|
||||
.tabs { order: 3; width: 100%; overflow-x: auto; }
|
||||
.page { padding: 18px 16px 48px; }
|
||||
.who .name { display: none; }
|
||||
}
|
||||
|
||||
|
||||
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
|
||||
select { background: var(--ground); border: 1px solid var(--line);
|
||||
border-radius: 7px; padding: 9px 12px; color: var(--ink);
|
||||
font-size: 14.5px; }
|
||||
button.ghost.danger { border-color: #4A211D; color: var(--bad); }
|
||||
button.ghost.danger:hover { border-color: var(--bad); }
|
||||
|
||||
/* ------------------------------------------------------- camera setup --- */
|
||||
.drawer.wizard { width: min(560px, 100%); }
|
||||
|
||||
/* The step rail encodes real sequence: each step is unanswerable until the one
|
||||
before it has passed, which is why they are numbered rather than tabbed. */
|
||||
.steps { list-style: none; display: flex; gap: 4px; padding: 14px 22px;
|
||||
margin: 0; border-bottom: 1px solid var(--line-soft);
|
||||
background: var(--surface); position: sticky; top: 62px; z-index: 1; }
|
||||
.steps li { flex: 1; display: flex; align-items: center; gap: 7px;
|
||||
font-size: 12.5px; color: var(--muted); min-width: 0; }
|
||||
.steps li .dot { width: 20px; height: 20px; border-radius: 50%; flex: none;
|
||||
display: grid; place-items: center; font-size: 11px;
|
||||
background: var(--surface-2); color: var(--muted); }
|
||||
.steps li.now { color: var(--ink); font-weight: 550; }
|
||||
.steps li.now .dot { background: var(--accent); color: #04161B; }
|
||||
.steps li.done .dot { background: var(--ok-dim); color: var(--ok); }
|
||||
|
||||
.waiting { display: flex; gap: 12px; align-items: center; padding: 14px 16px;
|
||||
background: var(--ground); border: 1px solid var(--line);
|
||||
border-radius: var(--radius); }
|
||||
.waiting > div { display: flex; flex-direction: column; gap: 2px; }
|
||||
|
||||
.outcome { border: 1px solid var(--line); border-left-width: 3px;
|
||||
border-radius: var(--radius); padding: 14px 16px;
|
||||
display: flex; flex-direction: column; gap: 12px; }
|
||||
.outcome.ok { border-left-color: var(--ok); background: var(--ok-dim); }
|
||||
.outcome.warn { border-left-color: var(--warn); background: var(--warn-dim); }
|
||||
.outcome.bad { border-left-color: var(--bad); background: var(--bad-dim); }
|
||||
.outcome-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
|
||||
.outcome-head b { font-size: 14.5px; }
|
||||
.proof { width: 100%; border-radius: 6px; display: block; background: #05090B; }
|
||||
.advice { margin: 0; padding-left: 18px; display: grid; gap: 6px;
|
||||
font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
|
||||
|
||||
/* Connected and verified are different claims; the card states both. */
|
||||
.verified { display: flex; align-items: center; gap: 8px; margin-top: 10px;
|
||||
font-size: 13px; }
|
||||
.verified .mark { width: 17px; height: 17px; border-radius: 50%; flex: none;
|
||||
display: grid; place-items: center; font-size: 10.5px; }
|
||||
.verified.ok { color: var(--ok); }
|
||||
.verified.ok .mark { background: var(--ok-dim); }
|
||||
.verified.warn { color: var(--warn); }
|
||||
.verified.warn .mark { background: var(--warn-dim); }
|
||||
.verified.bad { color: var(--bad); }
|
||||
.verified.bad .mark { background: var(--bad-dim); }
|
||||
.verified.idle { color: var(--muted); }
|
||||
.verified.idle .mark { background: var(--surface-2); }
|
||||
|
||||
/* ------------------------------------------------------- site check ----- */
|
||||
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
|
||||
.checklist li { display: flex; gap: 12px; padding: 13px 14px;
|
||||
background: var(--ground); border-radius: 8px;
|
||||
border-left: 3px solid var(--line); }
|
||||
.checklist li > div { display: flex; flex-direction: column; gap: 3px; flex: 1; }
|
||||
.checklist li.pass { border-left-color: var(--ok); }
|
||||
.checklist li.warn { border-left-color: var(--warn); }
|
||||
.checklist li.fail { border-left-color: var(--bad); }
|
||||
.checklist li.unknown { border-left-color: var(--muted); }
|
||||
.checklist .mark { width: 20px; height: 20px; border-radius: 50%; flex: none;
|
||||
display: grid; place-items: center; font-size: 11px;
|
||||
background: var(--surface-2); color: var(--muted); }
|
||||
.checklist li.pass .mark { background: var(--ok-dim); color: var(--ok); }
|
||||
.checklist li.warn .mark { background: var(--warn-dim); color: var(--warn); }
|
||||
.checklist li.fail .mark { background: var(--bad-dim); color: var(--bad); }
|
||||
.advice-line { font-size: 13px; color: var(--warn); line-height: 1.45; }
|
||||
.checklist li.pass .advice-line { color: var(--muted); }
|
||||
|
||||
/* ------------------------------------------------- pictures as cards --- */
|
||||
/* Shared by the camera and shop cards: the picture IS the card, and every
|
||||
technical detail lives one click away. */
|
||||
.grid.cams { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
|
||||
.card.cam { overflow: hidden; border-left: 0; padding: 0; cursor: pointer;
|
||||
transition: border-color .15s ease, transform .15s ease; }
|
||||
.card.cam:hover { border-color: var(--muted); transform: translateY(-1px); }
|
||||
.card.cam:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
||||
@media (prefers-reduced-motion: reduce) { .card.cam { transition: none; } }
|
||||
|
||||
.shot { position: relative; aspect-ratio: 16 / 10; background: #05090B;
|
||||
display: grid; place-items: center; }
|
||||
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||||
.noshot { display: flex; flex-direction: column; align-items: center; gap: 10px;
|
||||
color: var(--muted); font-size: 12.5px; text-align: center;
|
||||
padding: 0 28px; line-height: 1.5; }
|
||||
/* A lens, drawn rather than an emoji: an empty tile that still reads as a
|
||||
camera, instead of a black hole with an apology in it. */
|
||||
.lens { width: 34px; height: 34px; border-radius: 50%;
|
||||
border: 2px solid var(--line); position: relative; }
|
||||
.lens::after { content: ''; position: absolute; inset: 7px; border-radius: 50%;
|
||||
border: 2px solid var(--line-soft); }
|
||||
|
||||
/* A gradient, so white text stays legible over a bright shop floor. */
|
||||
.shot-over { position: absolute; inset: auto 0 0 0; display: flex;
|
||||
align-items: flex-end; justify-content: space-between; gap: 10px;
|
||||
padding: 26px 14px 12px;
|
||||
background: linear-gradient(transparent, rgba(4,8,10,.85)); }
|
||||
.shot-name b { display: block; font-size: 14.5px; font-weight: 600;
|
||||
letter-spacing: -.01em; }
|
||||
.shot-name span { display: block; font-size: 11.5px; color: #9FB0BA; margin-top: 1px; }
|
||||
.status { display: flex; align-items: center; gap: 6px; flex: none;
|
||||
font-size: 11px; font-weight: 550; letter-spacing: .01em;
|
||||
padding: 4px 9px; border-radius: 20px; white-space: nowrap;
|
||||
background: rgba(14,19,23,.72); backdrop-filter: blur(6px);
|
||||
color: var(--ink-2); }
|
||||
.status i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
|
||||
.status.ok { color: #8FE0B4; } .status.ok i { background: var(--ok); }
|
||||
.status.warn { color: #EFC77C; } .status.warn i { background: var(--warn); }
|
||||
.status.bad { color: #F0A79E; } .status.bad i { background: var(--bad); }
|
||||
.status.idle i { background: var(--muted); }
|
||||
.shot-age { position: absolute; top: 10px; right: 12px; font-size: 10.5px;
|
||||
color: #9FB0BA; background: rgba(4,8,10,.6); padding: 2px 7px;
|
||||
border-radius: 20px; backdrop-filter: blur(6px); }
|
||||
|
||||
/* One line, and it is the line that matters. */
|
||||
.verdict { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
|
||||
font-size: 13px; border-top: 1px solid var(--line-soft); }
|
||||
.verdict .words { flex: 1; min-width: 0; }
|
||||
.verdict .go { color: var(--muted); font-size: 14px; }
|
||||
.verdict .mark { width: 18px; height: 18px; border-radius: 50%; flex: none;
|
||||
display: grid; place-items: center; font-size: 10.5px; }
|
||||
.verdict.ok { color: var(--ok); } .verdict.ok .mark { background: var(--ok-dim); }
|
||||
.verdict.warn { color: var(--warn); } .verdict.warn .mark { background: var(--warn-dim); }
|
||||
.verdict.bad { color: var(--bad); } .verdict.bad .mark { background: var(--bad-dim); }
|
||||
.verdict.idle { color: var(--muted); }.verdict.idle .mark { background: var(--surface-2); }
|
||||
|
||||
/* Claiming a shop PC, inside the shop drawer. */
|
||||
.claim { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
|
||||
.claim h3 { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
|
||||
.claim .field { display: block; margin: 12px 0; }
|
||||
.claim .field span { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 5px; }
|
||||
.claim .field input { width: 100%; background: var(--ground); border: 1px solid var(--line);
|
||||
border-radius: 7px; padding: 9px 12px; }
|
||||
.claim .row { display: flex; gap: 8px; margin-top: 12px; }
|
||||
/* Big, monospaced and selectable: this gets read down a phone line and typed
|
||||
into another machine, so ambiguity between O and 0 is a support call. */
|
||||
.claim .code { font-family: var(--mono); font-size: 19px; letter-spacing: .08em;
|
||||
background: var(--ground); border: 1px solid var(--line);
|
||||
border-radius: 8px; padding: 14px 12px; text-align: center;
|
||||
margin: 12px 0 10px; user-select: all; word-break: break-all; }
|
||||
|
||||
/* ---------------------------------------------------------- assistant --- */
|
||||
.with-assistant { display: flex; flex: 1; min-height: 0; }
|
||||
.with-assistant .page { flex: 1; min-width: 0; }
|
||||
.ask-btn { background: var(--accent-dim); color: var(--accent); border: 0;
|
||||
border-radius: 7px; padding: 7px 13px; cursor: pointer;
|
||||
font-size: 13.5px; font-weight: 550; display: flex; align-items: center; gap: 7px; }
|
||||
.ask-btn:hover, .ask-btn.on { background: var(--accent); color: #04161B; }
|
||||
|
||||
.assistant { width: 360px; flex: none; border-left: 1px solid var(--line);
|
||||
background: var(--surface); display: flex; flex-direction: column;
|
||||
position: sticky; top: 60px; height: calc(100vh - 60px); }
|
||||
.assistant-head { display: flex; align-items: flex-start; gap: 12px;
|
||||
padding: 15px 16px; border-bottom: 1px solid var(--line-soft); }
|
||||
.assistant-head > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
|
||||
.assistant-body { flex: 1; overflow-y: auto; padding: 16px;
|
||||
display: flex; flex-direction: column; gap: 12px; }
|
||||
.assistant-ask { display: flex; gap: 8px; padding: 12px 14px;
|
||||
border-top: 1px solid var(--line-soft); }
|
||||
.assistant-ask input { flex: 1; min-width: 0; background: var(--ground);
|
||||
border: 1px solid var(--line); border-radius: 8px;
|
||||
padding: 9px 12px; }
|
||||
|
||||
.bubble { padding: 11px 13px; border-radius: 12px; font-size: 14px;
|
||||
line-height: 1.55; white-space: pre-wrap; max-width: 100%; }
|
||||
.bubble.user { background: var(--accent-dim); color: var(--ink);
|
||||
align-self: flex-end; border-bottom-right-radius: 4px; }
|
||||
.bubble.assistant { background: var(--ground); border: 1px solid var(--line-soft);
|
||||
border-bottom-left-radius: 4px; }
|
||||
.bubble.failed { border-color: #4A211D; color: var(--bad); }
|
||||
.bubble.assistant-thinking { color: var(--muted); display: flex; align-items: center; gap: 9px; }
|
||||
.used { display: block; margin-top: 8px; padding-top: 7px;
|
||||
border-top: 1px solid var(--line-soft);
|
||||
font-size: 11.5px; color: var(--muted); }
|
||||
|
||||
.suggest { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
|
||||
.chip { background: var(--ground); border: 1px solid var(--line); border-radius: 20px;
|
||||
padding: 7px 13px; color: var(--ink-2); cursor: pointer; font-size: 13px;
|
||||
text-align: left; }
|
||||
.chip:hover { border-color: var(--accent); color: var(--accent); }
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.with-assistant { flex-direction: column; }
|
||||
.assistant { width: 100%; height: 60vh; position: static; border-left: 0;
|
||||
border-top: 1px solid var(--line); }
|
||||
}
|
||||
Reference in New Issue
Block a user