/* VR Приёмка. Экран склада: крупно, контрастно, кнопки под перчатки. * * Тема и шрифт задаются атрибутами на : * data-theme="light" | "dark" * data-font="s" | "m" | "l" (мелко / крупно / очень крупно) */ :root { --bg: #f4f5f7; --card: #ffffff; --ink: #16181d; --muted: #6b7280; --line: #d9dce1; --accent: #2563eb; --accent-ink: #ffffff; --ok: #16a34a; --warn: #d97706; --err: #dc2626; --dest-bg: #1d4ed8; --dest-ink: #ffffff; --split-bg: #fef3c7; --split-line: #d97706; font-size: 16px; } html[data-theme="dark"] { --bg: #14161a; --card: #1e2127; --ink: #e8eaee; --muted: #9aa1ac; --line: #33373f; --accent: #3b82f6; --ok: #22c55e; --warn: #f59e0b; --err: #ef4444; --dest-bg: #1e40af; --split-bg: #3b2f0e; --split-line: #f59e0b; } html[data-font="s"] { font-size: 15px; } html[data-font="m"] { font-size: 18px; } html[data-font="l"] { font-size: 22px; } * { box-sizing: border-box; margin: 0; } body { background: var(--bg); color: var(--ink); font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; min-height: 100vh; -webkit-tap-highlight-color: transparent; } .screen { min-height: 100vh; display: flex; flex-direction: column; } .pad { padding: 14px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .muted { color: var(--muted); } .center { text-align: center; } .spacer { flex: 1; } /* --- шапка экрана --- */ .bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; font-size: 1.1rem; } /* --- кнопки --- */ .btn { appearance: none; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); padding: 12px 16px; font-size: 1rem; font-family: inherit; cursor: pointer; touch-action: manipulation; } .btn:active { transform: scale(0.985); } .btn.big { padding: 18px 20px; font-size: 1.25rem; font-weight: 700; } .btn.wide { width: 100%; } .btn.grow { flex: 1; } .btn.small { padding: 8px 12px; font-size: 0.95rem; } .btn.accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .btn.ok { background: var(--ok); border-color: var(--ok); color: #fff; } .btn.warn { background: var(--warn); border-color: var(--warn); color: #fff; } .btn.ghost { background: transparent; } .btn.opt.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .btn-row { display: flex; gap: 10px; } .icon-btn { appearance: none; border: none; background: transparent; color: var(--ink); font-size: 1.5rem; padding: 4px 8px; cursor: pointer; } .badge { display: inline-block; min-width: 1.5em; padding: 1px 7px; background: #fff3; border-radius: 999px; font-size: 0.9em; } /* --- вход --- */ .login-box { margin: auto; width: min(420px, 92vw); display: flex; flex-direction: column; gap: 12px; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; } .login-box h1 { font-size: 1.6rem; } .login-box label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; } .login-box input, .laser-wrap input, .huge-input { border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); padding: 12px; font-size: 1.1rem; font-family: inherit; width: 100%; } .err { color: var(--err); font-weight: 600; } /* --- список заданий --- */ .doc-list { display: flex; flex-direction: column; gap: 10px; } .doc-item { display: block; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; cursor: pointer; font-family: inherit; color: var(--ink); } .doc-item .t { font-size: 1.15rem; font-weight: 700; } .doc-item .s { color: var(--muted); margin-top: 4px; font-size: 0.95rem; } .doc-item .st { float: right; font-weight: 700; } .st-new { color: var(--accent); } .st-active { color: var(--warn); } .st-done { color: var(--ok); } .st-sent { color: var(--muted); } .net-log { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 0.95rem; display: flex; flex-direction: column; gap: 4px; } .net-log .ok { color: var(--ok); } .net-log .bad { color: var(--err); } /* --- карточка, прогресс --- */ .card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; } .progress-line { font-weight: 700; } .progress-line .done { color: var(--ok); } /* --- сканирование --- */ .mode-row { display: flex; gap: 8px; padding: 10px 14px 0; align-items: center; } .mode-btn { flex: 1; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 1.05rem; font-family: inherit; } .mode-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; } .cam-wrap { position: relative; margin: 12px 14px; border-radius: 14px; overflow: hidden; } .cam-wrap video { width: 100%; max-height: 55vh; object-fit: cover; display: block; background: #000; } .cam-target { position: absolute; inset: 18% 8%; border: 3px solid #ffffffcc; border-radius: 12px; pointer-events: none; } .laser-wrap { margin: 12px 14px; display: flex; flex-direction: column; gap: 10px; } .laser-hint { padding: 40px 16px; text-align: center; font-size: 1.3rem; font-weight: 700; border: 2px dashed var(--line); border-radius: 14px; color: var(--muted); } .scan-msg { margin: 0 14px; padding: 14px; border-radius: 12px; background: var(--err); color: #fff; font-size: 1.15rem; font-weight: 700; text-align: center; } /* --- результат пика --- */ .result-pad { gap: 14px; } .res-name { font-size: 1.35rem; font-weight: 800; line-height: 1.25; } .res-meta { color: var(--muted); } .res-meta b { color: var(--ink); } .res-box-row { display: flex; align-items: center; gap: 12px; } .res-box-label { font-size: 1.05rem; color: var(--muted); } .res-box-qty { font-size: 2.4rem; font-weight: 900; } .res-dest { background: var(--dest-bg); color: var(--dest-ink); border-radius: 16px; padding: 22px 18px; font-size: 2rem; font-weight: 900; text-align: center; line-height: 1.2; } .res-dest .to { font-size: 1rem; font-weight: 600; opacity: 0.85; display: block; } .res-split { background: var(--split-bg); border: 2px solid var(--split-line); border-radius: 16px; padding: 14px; } .split-title { font-size: 1.5rem; font-weight: 900; color: var(--split-line); text-align: center; } .split-row { display: flex; justify-content: space-between; padding: 8px 4px; font-size: 1.3rem; font-weight: 700; border-bottom: 1px dashed var(--split-line); } .split-row:last-child { border-bottom: none; } .split-row .surplus { font-weight: 400; font-size: 0.85em; opacity: 0.8; } .res-item-progress { color: var(--muted); text-align: center; } /* --- сверка --- */ .check-filter { padding: 0 2px; } .chk { display: flex; gap: 8px; align-items: center; } .check-row { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; } .check-row .nm { font-weight: 700; } .check-row .nums { display: flex; gap: 14px; margin-top: 4px; } .check-row .left { color: var(--warn); font-weight: 800; } .check-row.ok-row .left { color: var(--ok); } .shop-line { display: flex; justify-content: space-between; padding: 3px 0; } .shop-line .lag { color: var(--warn); font-weight: 700; } .huge-input { font-size: 2rem; text-align: center; font-weight: 800; } h2 { font-size: 1.3rem; }