/* iPad Inventory — Mater Academy Lions, green & gold. Monospace for anything you'd scan or compare. Nothing decorative. */ :root { --mater-green: #075130; --mater-green-2: #0a6b40; --mater-gold: #FBD625; --mater-gold-2: #E0BC12; --ink: #0d2117; --ink-2: #5b6462; --ink-3: #8b9390; --paper: #f6f6f2; --card: #ffffff; --rule: #d9dcd3; --rule-2: #eaece5; --live: #075130; --live-bg: #e2ede4; --flag: #9a6a00; --flag-bg: #fdf1cd; --dead: #93202a; --dead-bg: #f8e4e5; --empty-bg: #eceae5; --key: #6b5300; --key-bg: #fbf0c8; --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace; --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* Dark theme -- same token names, different values, so every rule below that references var(--x) just picks it up automatically. Toggled via [data-theme="dark"] on , set by assets/theme.js before first paint to avoid a flash of the wrong theme. */ [data-theme="dark"] { --ink: #eef2ef; --ink-2: #a9b5ae; --ink-3: #6f7d75; --paper: #0f1613; --card: #182019; --rule: #2b352e; --rule-2: #212a24; --live: #3ddc84; --live-bg: #16281d; --flag: #f2c94c; --flag-bg: #2b2410; --dead: #f27b7b; --dead-bg: #301518; --empty-bg: #1c231f; --key: #e0c14a; --key-bg: #2b2410; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.5 var(--sans); transition: background-color .15s ease, color .15s ease; } a { color: var(--mater-green-2); } /* ---------------------------------------------------------------- chrome */ .bar { display: flex; align-items: center; gap: 4px; background: var(--mater-green); color: #fff; padding: 0 14px; position: sticky; top: 0; z-index: 20; flex-wrap: wrap; border-bottom: 3px solid var(--mater-gold); } .bar .brand { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 12px 16px 12px 0; color: #fff; text-decoration: none; white-space: nowrap; } .bar .brand img { height: 30px; width: 30px; display: block; } .bar a.nav { color: #cfe4d5; text-decoration: none; padding: 14px 12px; font-size: 13px; font-weight: 500; border-bottom: 2px solid transparent; } .bar a.nav:hover { color: #fff; } .bar a.nav.on { color: var(--mater-gold); border-bottom-color: var(--mater-gold); } .bar .spacer { flex: 1; } .bar .who { font-family: var(--mono); font-size: 11px; color: #a9c4b2; letter-spacing: .05em; } .bar .who a { color: #a9c4b2; margin-left: 10px; } .wrap { max-width: 1180px; margin: 0 auto; padding: 26px 16px 80px; } h1 { font-size: 21px; margin: 0 0 3px; letter-spacing: -.01em; } .sub { color: var(--ink-2); font-size: 13px; margin: 0 0 22px; } /* ------------------------------------------------------------ scan panel */ /* The signature. A single hot input that owns the screen. */ .scan { background: var(--mater-green); border-radius: 3px; padding: 30px 26px; margin-bottom: 24px; border-bottom: 3px solid var(--mater-gold); } .scan label { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #a9c4b2; margin-bottom: 12px; } .scan input { width: 100%; background: transparent; border: 0; border-bottom: 2px solid #1a6b45; color: #fff; font-family: var(--mono); font-size: clamp(24px, 5vw, 40px); font-weight: 600; letter-spacing: .04em; padding: 6px 0 12px; outline: none; } .scan input::placeholder { color: #3d7657; } .scan input:focus { border-bottom-color: var(--mater-gold); } .scan .hint { margin-top: 12px; font-size: 12px; color: #a9c4b2; } /* ------------------------------------------------------------------ card */ .card { background: var(--card); border: 1px solid var(--rule); border-radius: 3px; padding: 18px 20px; margin-bottom: 16px; } .card h2 { font-size: 12px; font-family: var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 14px; font-weight: 700; } /* The label strip: the identifiers, laid out like an asset tag. */ .strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--rule-2); border: 1px solid var(--rule-2); margin-bottom: 16px; } .strip div { background: var(--card); padding: 11px 13px; } .strip dt { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; } .strip dd { margin: 0; font-family: var(--mono); font-size: 15px; font-weight: 600; word-break: break-all; } .strip dd.none { color: var(--ink-3); font-weight: 400; } /* ------------------------------------------------------------------ pill */ .pill { display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px; border-radius: 2px; white-space: nowrap; } .pill.live { background: var(--live-bg); color: var(--live); } .pill.flag { background: var(--flag-bg); color: var(--flag); } .pill.dead { background: var(--dead-bg); color: var(--dead); } .pill.key { background: var(--key-bg); color: var(--key); } .pill.mute { background: var(--rule-2); color: var(--ink-2); } /* ------------------------------------------------------------- cart bays */ /* The other signature: a cart drawn as its physical bays. */ .bays { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; } .bay { border: 1px solid var(--rule); border-radius: 2px; padding: 8px 7px 9px; background: var(--card); text-decoration: none; color: var(--ink); display: block; min-height: 62px; border-left: 3px solid var(--rule); } .bay:hover { border-color: var(--ink-2); } .bay .n { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--ink-3); letter-spacing: .08em; } .bay .s { font-family: var(--mono); font-size: 11px; font-weight: 600; margin-top: 4px; word-break: break-all; line-height: 1.35; } .bay.live { border-left-color: var(--live); } .bay.flag { border-left-color: var(--flag); background: var(--flag-bg); } .bay.dead { border-left-color: var(--dead); background: var(--dead-bg); } .bay.empty { background: var(--empty-bg); border-style: dashed; border-left-style: dashed; } .bay.empty .s { color: var(--ink-3); font-weight: 400; } /* ------------------------------------------------------------- fill meter */ .meter { height: 5px; background: var(--rule-2); border-radius: 3px; overflow: hidden; margin-top: 7px; } .meter i { display: block; height: 100%; background: var(--live); } .meter i.over { background: var(--dead); } /* ----------------------------------------------------------------- table */ table { width: 100%; border-collapse: collapse; font-size: 14px; } /* A table with enough columns is wider than a phone screen no matter what -- let the CARD scroll horizontally instead of the whole page. Scoped to cards that actually contain a table, so it can't affect anything else. */ .card:has(table) { overflow-x: auto; -webkit-overflow-scrolling: touch; } th { text-align: left; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding: 0 10px 8px 0; border-bottom: 1px solid var(--rule); font-weight: 700; white-space: nowrap; } td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--rule-2); vertical-align: top; } td.mono, .mono { font-family: var(--mono); font-size: 13px; } tr:hover td { background: #fafaf8; } /* ---------------------------------------------------------------- grid */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; } .tile { background: var(--card); border: 1px solid var(--rule); border-radius: 3px; padding: 13px 14px; text-decoration: none; color: var(--ink); display: block; } .tile:hover { border-color: var(--ink-2); } .tile .t { font-family: var(--mono); font-weight: 700; font-size: 15px; letter-spacing: .03em; } .tile .m { font-size: 12px; color: var(--ink-2); margin-top: 3px; } /* ----------------------------------------------------------------- stats */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 1px; background: var(--rule-2); border: 1px solid var(--rule-2); margin-bottom: 22px; } .stat { background: var(--card); padding: 13px 14px; } .stat .k { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .stat .v { font-family: var(--mono); font-size: 24px; font-weight: 700; margin-top: 3px; letter-spacing: -.02em; } .stat .v.flag { color: var(--flag); } .stat .v.dead { color: var(--dead); } /* ----------------------------------------------------------------- forms */ label.f { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; } select, input[type=text], input[type=password], input[type=number], textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 2px; font: 14px var(--sans); background: var(--card); color: var(--ink); } input[type=text], input[type=number] { font-family: var(--mono); } select:focus, input:focus, textarea:focus { outline: 2px solid var(--mater-green); outline-offset: -1px; border-color: var(--mater-green); } .fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 13px; margin-bottom: 15px; } .btn { display: inline-block; background: var(--mater-green); color: #fff; border: 1px solid var(--mater-green); padding: 9px 16px; border-radius: 2px; font: 600 13px var(--sans); cursor: pointer; text-decoration: none; } .btn:hover { background: var(--ink); border-color: var(--ink); } .btn.ghost { background: transparent; color: var(--mater-green); border-color: var(--rule); } .btn.ghost:hover { background: var(--rule-2); border-color: var(--mater-green); } .btn.gold { background: var(--mater-gold); border-color: var(--mater-gold-2); color: var(--ink); } .btn.gold:hover { background: var(--mater-gold-2); } .btn.danger { background: var(--dead); border-color: var(--dead); } .btn:disabled { opacity: .45; cursor: not-allowed; } /* ----------------------------------------------------------------- notes */ .note { padding: 11px 14px; border-radius: 2px; font-size: 13px; margin-bottom: 14px; border-left: 3px solid; } .note.ok { background: var(--live-bg); border-color: var(--live); color: var(--live); } .note.warn { background: var(--flag-bg); border-color: var(--flag); color: var(--flag); } .note.err { background: var(--dead-bg); border-color: var(--dead); color: var(--dead); } .note.info { background: var(--key-bg); border-color: var(--key); color: var(--key); } .empty { text-align: center; padding: 44px 20px; color: var(--ink-2); font-size: 14px; } .log { font-family: var(--mono); font-size: 12px; line-height: 1.8; } .log .ts { color: var(--ink-3); } .rowbtns { display: flex; gap: 8px; flex-wrap: wrap; } @media (max-width: 600px) { .bar .brand { padding-right: 8px; } .bar a.nav { padding: 12px 8px; font-size: 12px; } .wrap { padding: 18px 12px 60px; } .bays { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* -------------------------------------------------------------- camera scanner */ .cam-btn { margin-top: 10px; } .cam-box { margin-top: 12px; background: #000; border-radius: 3px; padding: 10px; } #cam-reader { max-width: 340px; margin: 0 auto; border-radius: 2px; overflow: hidden; } #cam-reader video { border-radius: 2px; } .cam-note { color: #b9c0cb; font-size: 12px; text-align: center; margin: 8px 0; } .cam-box .cam-stop { display: block; margin: 0 auto; background: #fff; } /* ---------------------------------------------------------------- dashboard */ .dgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .dcard h2 { margin-bottom: 16px; } .dcard-wide { grid-column: 1 / -1; } /* donut */ .donut-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .donut { width: 116px; height: 116px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .donut-hole { width: 78px; height: 78px; border-radius: 50%; background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; } .donut-n { font-family: var(--mono); font-weight: 700; font-size: 19px; } .donut-l { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; } .donut-legend { font-size: 13px; display: flex; flex-direction: column; gap: 7px; } .donut-legend strong { font-family: var(--mono); margin-left: 5px; } .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; } .dot.live { background: var(--live); } .dot.flag { background: var(--flag); } .dot.dead { background: var(--dead); } /* bar rows (condition / lifecycle / models) */ .bar-row { display: grid; grid-template-columns: 92px 1fr 34px; align-items: center; gap: 10px; margin-bottom: 9px; font-size: 12px; } .bar-label { color: var(--ink-2); } .bar-track { height: 8px; background: var(--rule-2); border-radius: 4px; overflow: hidden; } .bar-fill { height: 100%; border-radius: 4px; background: var(--mater-green); } .bar-fill.cond-damaged, .bar-fill.cond-unusable { background: var(--dead); } .bar-fill.cond-fair, .bar-fill.cond-usable { background: var(--flag); } .bar-fill.cond-unknown { background: var(--ink-3); } .bar-fill.life-lost, .bar-fill.life-stolen, .bar-fill.life-disposal, .bar-fill.life-retired { background: var(--dead); } .bar-fill.life-needs_repair, .bar-fill.life-in_repair { background: var(--flag); } .bar-fill.model-bar { background: var(--mater-gold-2); } .bar-n { font-family: var(--mono); text-align: right; color: var(--ink-2); } /* mini stats + mini table (cart/pool/issue widgets) */ .mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: center; } .mini-stats strong { display: block; font-family: var(--mono); font-size: 22px; font-weight: 700; } .mini-stats span { display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px; } .flagtext { color: var(--flag) !important; } .deadtext { color: var(--dead) !important; } .mini-table { width: 100%; font-size: 13px; } .mini-table td { padding: 6px 0; border-bottom: 1px solid var(--rule-2); } .mini-table tr:last-child td { border-bottom: none; } /* --------------------------------------------------------- duplicate badge */ .bay.dupbay { border: 2px solid var(--dead) !important; position: relative; } .dup-flag { font-size: 9px; font-weight: 700; color: var(--dead); margin-top: 3px; letter-spacing: .02em; } /* ------------------------------------------------------------ theme toggle */ .theme-toggle { background: transparent; border: 1px solid rgba(255,255,255,.25); color: #fff; width: 32px; height: 32px; border-radius: 50%; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; margin-right: 12px; flex-shrink: 0; } .theme-toggle:hover { background: rgba(255,255,255,.12); } /* ---------------------------------------------------- camera box, friendlier */ .cam-box { margin-top: 12px; background: #000; border-radius: 8px; padding: 14px; border: 1px solid var(--rule); } #cam-reader { max-width: 420px; width: 100%; margin: 0 auto; border-radius: 6px; overflow: hidden; } #cam-reader video { border-radius: 6px; width: 100% !important; } .cam-note { color: #cfe4d5; font-size: 13px; text-align: center; margin: 10px 0; min-height: 18px; } .cam-box .cam-stop { display: block; margin: 8px auto 0; background: #fff; min-width: 140px; padding: 11px 20px; } .cam-btn { margin-top: 10px; font-size: 14px; padding: 11px 18px; } /* -------------------------------------------------- mobile touch-friendliness */ @media (max-width: 640px) { .btn, .cam-btn { padding: 12px 18px; font-size: 14px; } .rowbtns { gap: 10px; } .rowbtns .btn { flex: 1 1 auto; text-align: center; } input[type=text], input[type=password], select, textarea { font-size: 16px; } /* stops iOS auto-zoom on focus */ .scan input { font-size: clamp(20px, 8vw, 32px); } /* re-asserted after the rule above -- the big scan box is the one place we want a bigger font, not 16px */ .theme-toggle { width: 30px; height: 30px; } }