Suriyakumarvijayanayagam
3f9fb33b24
A tenant had exactly the users somebody had created with a command on the
server. That is not a missing screen: a shop with an owner and four staff
either shared one password or raised a ticket per person, and a phone app
for the shop floor could not exist while there was one account to sign in
as.
Registration is by invitation, never open signup - the same line already
drawn around creating a company. The code carries the address and the role
and the request carries only a password, so a code that gets forwarded
cannot become somebody else's account, and a staff invitation cannot be
redeemed as an owner. Single use lives in the UPDATE and the account is
created in the same transaction.
Deactivating a member revokes their sessions in that transaction too. An
access token lives twelve hours, so without it "remove their access"
removed it sometime tomorrow. The session list and revoke that go with it
are the benefit of opaque tokens the product had been paying for and never
collecting: nothing could say what was signed in, let alone stop one.
Face images now work on a deployment with no object storage, which was
every local install and every self-hosted site - the arrivals feed said
"not storing customer photos" for every customer forever, on the screen
whose whole job is to show a face. Bounded to one row per visitor, so it
grows with the customer base and not with footfall; the bucket stays
primary wherever one exists.
Image.auth says whether a URL needs the session, because a browser img
cannot load one that does, a mobile image view can, and a webview can do
neither - the desktop client resolves those to a data URI in Go.
Found by running it, not by tests:
* UPDATE ... RETURNING gives the value AFTER the update, so the prune
read back empty keys, deleted nothing, and the table grew with
footfall exactly as if it were not there. The fake agreed with either
version; only the live Postgres test caught it.
* Trusting only the auth flag broke every shop card, because Sites.jsx
rebuilt a partial snapshot object and dropped it. A relative URL is
now sufficient on its own.
* ago() renders a future time as "just now", so a code valid for a week
read "expires just now".
Verified live against real Postgres: invite, preview, escalation refused,
register into a session, replay 404, staff forbidden, device revoked and
401 at once, last owner refused, and a 92,405-byte camera JPEG stored,
served to its owner, 401 with no session, 404 to another tenant, and
rendered in a browser.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HViLj9gYNRtSr7YVZmW5sn
571 lines
30 KiB
CSS
571 lines
30 KiB
CSS
/* 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;
|
|
overflow: hidden; object-fit: cover; background: var(--surface-2); }
|
|
/* .face is a <span> wrapping the picture rather than the <img> itself, because
|
|
a face served from this server's own database has to be fetched with the
|
|
session before it can be shown. The image inside still has to fill the
|
|
circle, and the wrapper clips it. */
|
|
.face > img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
|
.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); }
|
|
}
|
|
|
|
|
|
/* ------------------------------------------------------- live camera view */
|
|
/* Deliberately a small affordance on the picture rather than a big play
|
|
button: opening it makes a shop PC start uploading, so it is an action
|
|
somebody chooses, not one a page does on their behalf. */
|
|
.card.cam .watch {
|
|
position: absolute; left: 10px; top: 10px; z-index: 2;
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
padding: 4px 9px; border-radius: 999px; border: 0; cursor: pointer;
|
|
font: inherit; font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
|
|
color: #fff; background: rgba(12, 16, 20, .72);
|
|
backdrop-filter: blur(6px);
|
|
}
|
|
.card.cam .watch:hover { background: rgba(12, 16, 20, .9); }
|
|
.card.cam .watch i {
|
|
width: 7px; height: 7px; border-radius: 50%; background: #E5484D;
|
|
box-shadow: 0 0 0 0 rgba(229, 72, 77, .7);
|
|
animation: livepulse 2s infinite;
|
|
}
|
|
@keyframes livepulse {
|
|
70% { box-shadow: 0 0 0 6px rgba(229, 72, 77, 0); }
|
|
100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.card.cam .watch i { animation: none; }
|
|
}
|
|
|
|
.drawer.live { max-width: 760px; }
|
|
.liveshot {
|
|
position: relative; background: #000; border-radius: 10px; overflow: hidden;
|
|
aspect-ratio: 16 / 9;
|
|
}
|
|
.liveshot img { width: 100%; height: 100%; object-fit: contain; display: block; }
|
|
.livewait {
|
|
position: absolute; inset: 0; display: grid; place-items: center;
|
|
font-size: 13px; color: rgba(255, 255, 255, .78);
|
|
background: rgba(0, 0, 0, .35);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------- team --- */
|
|
.rows tr.inactive td { opacity: .55; }
|
|
.rows .role { text-transform: capitalize; }
|
|
.rows td.right { text-align: right; }
|
|
.pill.muted { margin-left: 8px; font-size: 11px; padding: 1px 7px; border-radius: 999px;
|
|
background: var(--surface-2); color: var(--muted); vertical-align: middle; }
|
|
.pending { margin-top: 26px; }
|
|
.pending h2 { font-size: 14px; font-weight: 600; color: var(--muted); margin: 0 0 10px; }
|
|
.invites { list-style: none; padding: 0; display: grid; gap: 8px; }
|
|
.card.invite { display: flex; align-items: center; justify-content: space-between;
|
|
gap: 14px; padding: 11px 14px; }
|
|
.card.invite .sub { display: block; }
|
|
/* The code is read aloud and typed in, so it is set wide and monospaced.
|
|
Grouped in sixes by the server for the same reason. */
|
|
.creds code.big { font-size: 16px; letter-spacing: .06em; }
|
|
|
|
/* A button that reads as a link. Used where the action is a change of screen
|
|
rather than a submission, so it must not look like the primary button next
|
|
to it. */
|
|
.linkish { background: none; border: 0; padding: 0; font: inherit;
|
|
color: var(--accent); cursor: pointer; text-decoration: underline;
|
|
text-underline-offset: 2px; }
|
|
.linkish:hover { opacity: .8; }
|
|
/* The code is read off a screen or a phone call, so it is set wide. */
|
|
.codefield { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
letter-spacing: .04em; text-transform: uppercase; }
|