/* Stockroom look: one palette, light and dark. js/theme.js sets . */ /* Self-hosted type, so the app looks the same with no signal (no network font). */ @font-face{font-family:"Barlow";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/barlow-latin-400-normal.woff2) format("woff2")} @font-face{font-family:"Barlow";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/barlow-latin-500-normal.woff2) format("woff2")} @font-face{font-family:"Barlow";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/barlow-latin-600-normal.woff2) format("woff2")} @font-face{font-family:"Barlow";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/barlow-latin-700-normal.woff2) format("woff2")} @font-face{font-family:"Barlow Condensed";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/barlow-condensed-latin-500-normal.woff2) format("woff2")} @font-face{font-family:"Barlow Condensed";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2")} @font-face{font-family:"Barlow Condensed";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2")} :root{ /* palette: light */ --plate:#dcdfd9;--paper:#f5f5f1;--field:#ffffff;--plate-img:#ffffff;--ink:#1d262b;--muted:#5b676d;--line:#c3c8c3; --tape:#f2c230;--tape-ink:#1d262b;--bad:#b3261e;--warn:#8a5d00;--ok:#2e7d4f; --bad-bg:#fbe9e7;--warn-bg:#fdf3d9;--ok-bg:#e4f3ea; --pcb:#2f6b4f;--pcb-ink:#eef5ee;--metal:#4a5257;--red:#c8322a; /* type */ --sans:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --cond:"Barlow Condensed","Arial Narrow",system-ui,sans-serif; /* shape and size: the same corners and control heights everywhere */ --r-ctl:12px;--r-card:16px;--r-pill:999px;--h-ctl:44px;--h-ctl-sm:36px;--h-ctl-lg:52px;--pad-card:16px; /* TYPE: one scale, ratio 1.25 on a 16px body. Weight carries meaning: 700 = the one thing on the screen, 600 = labels and actions, 400 = everything you read. */ --fs-0:.8rem; /* 12.8 labels, meta, tab names */ --fs-1:1rem; /* 16 body, fields, buttons */ --fs-2:1.25rem; /* 20 card titles, h3 */ --fs-3:1.5625rem; /* 25 screen title, h2 */ --fs-4:1.953rem; /* 31.25 the heavy stroke: the door name, the total */ /* SPACE: a 4px grid with a beat, not even spacing. Tight inside a group, loose between groups. 8 between related things, 12 between fields, 24 between groups, 48 between sections. */ --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px; /* MOTION: short and settling. Nothing bounces. */ --t-fast:120ms;--t-med:180ms;--t-slow:240ms;--ease:cubic-bezier(.2,.8,.2,1); /* FOCUS and SELECTED use ink, never tape. Tape yellow means one thing: "do this next". */ --focus:var(--ink);--sel:var(--ink);--sel-ink:var(--paper); /* chrome heights, so every app reserves the same room */ --bar-h:52px;--tabbar-h:60px; color-scheme:light; } :root[data-theme="dark"]{ --plate:#1d2326;--paper:#0f1214;--field:#171c1f;--ink:#e6ebe8;--muted:#9aa5aa;--line:#2f383c;--plate-img:#c9d1d4; --bad:#f07a70;--warn:#e3ad3a;--ok:#5cc28a;--bad-bg:#3a1f1d;--warn-bg:#352b12;--ok-bg:#16301f; --pcb:#2c5e46;--metal:#5a6368;color-scheme:dark; } /* no-JS fallback only: follow the device */ @media (prefers-color-scheme:dark){:root:not([data-theme]){--plate:#1d2326;--paper:#0f1214;--field:#171c1f;--ink:#e6ebe8;--muted:#9aa5aa;--line:#2f383c;--plate-img:#c9d1d4;--bad:#f07a70;--warn:#e3ad3a;--ok:#5cc28a;--bad-bg:#3a1f1d;--warn-bg:#352b12;--ok-bg:#16301f;--pcb:#2c5e46;--metal:#5a6368;color-scheme:dark}} /* page background: the same on every page for a given theme */ body{background:var(--paper);color:var(--ink)} /* headings */ :root[data-theme] :is(h1,h2){font-family:var(--cond);font-weight:700;font-size:var(--fs-3);line-height:1.1;letter-spacing:.2px} :root[data-theme] h3{font-family:var(--cond);font-weight:700;font-size:var(--fs-2);line-height:1.15} /* buttons */ :root[data-theme] :is(.btn,.act,.sendbtn){border-radius:var(--r-ctl);min-height:var(--h-ctl);padding:6px 14px;font-family:var(--sans);font-weight:600;font-size:.95rem;line-height:1.2;border-width:1px} :root[data-theme] :is(.btn.sm,.btn.small){min-height:var(--h-ctl-sm);padding:4px 11px;font-size:.88rem} :root[data-theme] :is(.btn,.act):not(.pri):not(.primary):not(.warn):not(.send):not(.danger):not(.ai){background:var(--field);color:var(--ink);border:1px solid var(--line)} :root[data-theme] :is(.btn.pri,.btn.primary,.btn.warn){background:var(--tape);color:var(--tape-ink);border:1px solid var(--tape)} :root[data-theme] :is(.btn.pri,.btn.primary):not(.sm):not(.small){min-height:48px;padding:8px 20px;font-size:var(--fs-1)} :root[data-theme] :is(.btn.pri,.btn.primary,.btn.warn):hover{filter:brightness(1.06)} :root[data-theme] .btn.danger{background:var(--field);color:var(--bad);border:1px solid var(--line)} :root[data-theme] :is(.btn,.act):hover{border-color:var(--ink)} /* fields */ :root[data-theme] :is(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=button],[type=submit],[type=hidden]),select,textarea):not(.jd-name){border-radius:var(--r-ctl);border:1px solid var(--line);background:var(--field);color:var(--ink);font-family:var(--sans)} :root[data-theme] :is(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=button],[type=submit],[type=hidden]),select):not(.jd-name):not(:is(td,th,svg,.flowbar,.sheet,.tbl-wrap,.stepper) *){min-height:var(--h-ctl);padding:6px 12px} /* cards: one corner, one border, one fill */ :root[data-theme] :is(.card,.pane,.jobrow,.startcard,.stat,.attn,details.fold,details.door,.tcard,.misc,.runbox,.qcard,.empty,.tbl-wrap,.pick,.crewcard){border-radius:var(--r-card);border-color:var(--line)} :root[data-theme] :is(.card,.pane,.jobrow,.startcard,.stat,.attn,details.door,.misc,.runbox,.tbl-wrap){background:var(--field)} :root[data-theme] .startcard{border-width:1px} :root[data-theme] :is(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=button],[type=submit],[type=hidden]),select,textarea):not(.jd-name){font-size:1rem;font-weight:400} :root[data-theme] .card{border:1px solid var(--line);padding:var(--pad-card)} :root[data-theme] :focus-visible{outline:2px solid var(--focus);outline-offset:2px} html{-webkit-tap-highlight-color:transparent;text-size-adjust:100%} body{font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased} ::selection{background:color-mix(in srgb,var(--tape) 45%,transparent);color:var(--ink)} @media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0ms!important;animation-duration:0ms!important}} /* the top bar */ .srbar{display:flex;align-items:center;gap:6px;padding:6px 12px;background:var(--plate);color:var(--ink);border-bottom:1px solid var(--line);font:600 13px/1.2 var(--sans);position:relative;z-index:40;flex-wrap:wrap} .srbar .name{font:700 var(--fs-2)/1 var(--cond);letter-spacing:.2px;margin-right:6px} .srbar .sp{flex:1} .srbar .who{color:var(--muted);max-width:14em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .srbar .rolepill{font:700 12px/1 var(--cond);letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:999px;border:2px solid var(--ink);white-space:nowrap} .srbar .rolepill.rp-owner{background:var(--ink);color:var(--paper)} .srbar .srbtn{border:1px solid var(--line);background:var(--field);color:var(--ink);border-radius:8px;padding:5px 11px;min-height:32px;font:inherit;cursor:pointer} .srbar .srbtn:hover{border-color:var(--ink)} @media(max-width:560px){.srbar .who{display:none}}