josh
11f4c0537d
Build and push image / build (push) Successful in 1m25s
Replace the cramped horizontal sidebar with a 5-tab bottom nav (Home, Inventory, Scan, Custody, More) with an elevated scan button. Convert the 10-column inventory table to card-based list on mobile with scrollable filter pills and long-press selection. Add full-screen camera barcode scanner using html5-qrcode with post-scan action sheet. Set up PWA with vite-plugin-pwa for add-to-home-screen. Convert modals to bottom sheets, add pull-to-refresh, safe-area padding, and iOS input zoom fix. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
122 lines
3.4 KiB
CSS
122 lines
3.4 KiB
CSS
/* Apothecary / Botanical design tokens
|
|
Warm earthy neutrals — parchment, ink, sage, terracotta */
|
|
|
|
:root {
|
|
/* Surfaces — parchment-toned */
|
|
--bg: oklch(96% 0.012 80); /* parchment */
|
|
--bg-2: oklch(93% 0.014 80); /* slightly darker parchment */
|
|
--bg-3: oklch(89% 0.016 78); /* card divider, hover */
|
|
--surface: oklch(98% 0.008 82); /* card surface */
|
|
--surface-sunken: oklch(91% 0.014 80);
|
|
|
|
/* Ink — warm near-blacks */
|
|
--ink: oklch(22% 0.012 60); /* primary text */
|
|
--ink-2: oklch(38% 0.012 60); /* secondary text */
|
|
--ink-3: oklch(56% 0.014 65); /* tertiary, captions */
|
|
--ink-4: oklch(72% 0.014 70); /* faint, dividers */
|
|
|
|
/* Lines */
|
|
--line: oklch(82% 0.014 75);
|
|
--line-strong: oklch(68% 0.016 70);
|
|
|
|
/* Accents — share chroma 0.08, lightness 52% */
|
|
--sage: oklch(52% 0.06 145); /* primary action / good */
|
|
--sage-2: oklch(64% 0.05 145);
|
|
--sage-soft: oklch(88% 0.03 145);
|
|
|
|
--terracotta: oklch(58% 0.10 40); /* warning / consumed */
|
|
--terracotta-soft: oklch(90% 0.04 40);
|
|
|
|
--amber: oklch(68% 0.10 75); /* low stock / attention */
|
|
--amber-soft: oklch(91% 0.04 75);
|
|
|
|
--plum: oklch(48% 0.06 340); /* secondary accent */
|
|
|
|
/* Typography */
|
|
--serif: "Cormorant Garamond", "GT Sectra", "Playfair Display", Georgia, serif;
|
|
--sans: "Inter", "Söhne", -apple-system, BlinkMacSystemFont, sans-serif;
|
|
--mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;
|
|
|
|
/* Radii */
|
|
--r-sm: 4px;
|
|
--r-md: 8px;
|
|
--r-lg: 14px;
|
|
--r-xl: 20px;
|
|
|
|
/* Touch targets */
|
|
--touch-min: 44px;
|
|
|
|
/* Shadow — subtle */
|
|
--shadow-sm: 0 1px 2px oklch(20% 0.02 60 / 0.06);
|
|
--shadow-md: 0 2px 8px oklch(20% 0.02 60 / 0.08);
|
|
--shadow-lg: 0 8px 24px oklch(20% 0.02 60 / 0.10);
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--bg: oklch(20% 0.012 60);
|
|
--bg-2: oklch(23% 0.012 60);
|
|
--bg-3: oklch(27% 0.014 65);
|
|
--surface: oklch(25% 0.012 60);
|
|
--surface-sunken: oklch(18% 0.012 60);
|
|
|
|
--ink: oklch(94% 0.008 80);
|
|
--ink-2: oklch(78% 0.012 75);
|
|
--ink-3: oklch(62% 0.014 70);
|
|
--ink-4: oklch(46% 0.014 65);
|
|
|
|
--line: oklch(34% 0.014 65);
|
|
--line-strong: oklch(48% 0.016 65);
|
|
|
|
--sage: oklch(70% 0.07 145);
|
|
--sage-2: oklch(60% 0.06 145);
|
|
--sage-soft: oklch(32% 0.04 145);
|
|
|
|
--terracotta: oklch(70% 0.10 40);
|
|
--terracotta-soft: oklch(32% 0.05 40);
|
|
|
|
--amber: oklch(78% 0.10 75);
|
|
--amber-soft: oklch(32% 0.05 75);
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: var(--bg);
|
|
color: var(--ink);
|
|
font-family: var(--sans);
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
button { font-family: inherit; cursor: pointer; }
|
|
input, select, textarea { font-family: inherit; }
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--sage);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Subtle parchment texture */
|
|
.parchment {
|
|
background-image:
|
|
radial-gradient(oklch(85% 0.03 75 / 0.15) 1px, transparent 1px),
|
|
radial-gradient(oklch(80% 0.03 75 / 0.10) 1px, transparent 1px);
|
|
background-size: 24px 24px, 36px 36px;
|
|
background-position: 0 0, 12px 18px;
|
|
}
|
|
|
|
/* Utility */
|
|
.serif { font-family: var(--serif); font-weight: 500; }
|
|
.mono { font-family: var(--mono); font-feature-settings: "ss01", "cv11"; }
|
|
.smallcaps {
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
}
|
|
.hairline { border-top: 1px solid var(--line); }
|