/* ====================================================================== Тема рабочей области официанта: светлая и тёмная. Подключается ПЕРВЫМ в top.php — раньше style.css, kassa.css и bill-work.css. Здесь только значения (переменные) и правки, которые в переменную не упаковываются: картинки, текстуры, насыщенность плиток меню. Как это работает ---------------- Тема выбирается на . Атрибут ставит сервер (top.php читает куку kassa_theme), поэтому тёмный экран приходит уже тёмным и не мигает белым при каждой загрузке. Переключатель в боковом меню меняет атрибут на месте, без перезагрузки, и пишет куку на год. Правило для новых стилей ------------------------ Цвет в кассовых файлах пишется токеном, а не значением: --k-surface, --k-text, --k-border, --k-blue-* и так далее. Голый #hex в этих файлах означает, что элемент останется светлым в тёмной теме. Исключения осознанные и перечислены ниже (кассовая лента, цвета отделов из базы). Тёмная палитра — не инверсия светлой. Она сине-серая, из той же семьи, что строка клиента и значок стола; фон не чёрный (#0f141a), а поверхности светлеют по мере выхода на передний план: фон → карточка → поле ввода. ====================================================================== */ :root { color-scheme: light; /* --- поверхности --------------------------------------------------- */ --k-bg: #f7f7f7; /* фон рабочей области */ --k-surface: #fff; /* карточка счёта, панели, окна */ --k-surface-2: #f9fafb; /* вложенная подложка */ --k-surface-3: #f3f4f6; /* тихая кнопка, чип */ --k-surface-4: #e5e7eb; /* её наведение */ --k-surface-5: #e2e8f0; /* нажатие */ --k-surface-hi: #f1f5f9; /* наведение на строку списка */ --k-field-bg: #fff; /* поле ввода */ --k-on-accent: #fff; /* текст и значки на залитой цветом плашке */ /* --- линии ---------------------------------------------------------- */ --k-border: #e5e7eb; --k-border-soft: #f1f2f4; --k-border-strong: #cbd5e1; --k-field-border: #d1d5db; /* --- текст ---------------------------------------------------------- */ --k-text: #111827; --k-text-2: #374151; --k-muted: #6b7280; --k-muted-2: #9ca3af; --k-faint: #cbd5e1; /* тише некуда: прочерки, отработавшее время */ --k-label: #6b7280; /* микро-подписи капителью: ОЖИДАЮТ, РАЗДЕЛЫ, ПЕРИОД */ /* --- тени ----------------------------------------------------------- */ --k-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); --k-shadow-hover: 0 6px 18px rgba(17, 24, 39, 0.13); --k-shadow-btn: 0 1px 2px rgba(16, 24, 40, 0.1), 0 2px 6px rgba(16, 24, 40, 0.1); --k-shadow-btn-hover: 0 2px 4px rgba(16, 24, 40, 0.12), 0 6px 14px rgba(16, 24, 40, 0.16); --k-shadow-btn-active: 0 1px 2px rgba(16, 24, 40, 0.12); --k-shadow-tile: 0 1px 2px rgba(16, 24, 40, 0.1), 0 3px 8px rgba(16, 24, 40, 0.12); --k-shadow-tile-hover: 0 2px 4px rgba(16, 24, 40, 0.09), 0 10px 22px rgba(16, 24, 40, 0.15); --k-ring: rgba(15, 23, 42, 0.07); /* внутренняя обводка цветных плиток */ --k-ring-2: rgba(15, 23, 42, 0.12); /* --- синий: основное действие, ссылки, фокус ------------------------ */ --k-blue: #2f6fb5; --k-blue-hover: #2a629f; --k-blue-strong: #2563eb; /* кольцо фокуса, ссылка-кнопка */ --k-blue-strong-hover: #1d4ed8; --k-blue-fg: #1d4ed8; /* синий текст на светлом */ --k-blue-ink: #1e3a8a; /* его же тёмный оттенок для чисел */ --k-blue-bg: #eff6ff; --k-blue-bg-2: #e6effa; --k-blue-line: #bfdbfe; --k-blue-link: #1275ad; /* ссылки и фильтры — своя, более старая синева */ --k-blue-link-bg: #eef6fb; --k-blue-link-bg-2: #e2f0f9; --k-focus: var(--k-blue-strong); --k-focus-ring: rgba(37, 99, 235, 0.15); /* --- зелёный: завершено, оплачено ----------------------------------- */ --k-green: #17945a; /* «Завершить счёт», всё отдано */ --k-green-hover: #14834f; --k-green-soft: #45a37a; /* закрытие при долге — тот же зелёный, светлее */ --k-green-soft-hover: #3c936d; --k-green-fg: #15803d; --k-green-bg: #ecfdf5; --k-green-line: #bbf7d0; --k-green-new: #16a34a; /* «Новый счёт» в меню */ --k-green-new-hover: #15803d; --k-sage-bg: #e6efe6; /* приглушённый зелёный: счётчик в фильтрах */ --k-sage-fg: #2f4a35; --k-sage-fg-2: #3f7a49; /* он же живее — «новый гость» в карточке клиента */ /* --- красный: риск, удаление ---------------------------------------- */ --k-red: #b3403d; --k-red-hover: #9c3835; --k-red-fg: #b91c1c; --k-red-bg: #fef2f2; --k-red-bg-2: #f4dedd; --k-red-line: #fecaca; --k-red-line-2: #e9bfbd; --k-red-ink: #7f2b29; --k-red-badge: #dc2626; /* --- янтарный: предупреждение, ожидание ----------------------------- */ --k-amber-fg: #92400e; --k-amber-bg: #fef3c7; --k-amber-line: #f59e0b; --k-amber-warn: #b45309; --k-sand-bg: #fdf7ef; /* мягкое предупреждение: лимит, заметка */ --k-sand-line: #ecd3b3; --k-sand-fg: #7c5320; --k-sand-accent: #b5762a; --k-note-bg: #ffe7ae; /* комментарий к позиции — жёлтый стикер */ --k-note-fg: #333; /* --- фиолетовый: клиент, персональное ------------------------------- */ --k-violet: #7a5ea8; --k-violet-fg: #4c1d95; /* --- графит: тихие кнопки, полоса сеанса ---------------------------- */ --k-graphite: #4a5a64; --k-graphite-2: #37474f; --k-graphite-2-hover: #2d3a41; --k-slate: #334155; /* вкладка «выбрана», надпись меню */ --k-slate-2: #64748b; /* Плотные заливки под белый текст. Отдельно от текстовых токенов: те в тёмной теме светлеют, а заливка под белым текстом светлеть не может. */ --k-slate-solid: #64748b; /* ярлык «ОТКРЫТ» */ --k-cool-solid: #43617f; /* выбранный фильтр ленты истории */ --k-off: #9aa4ac; /* погашенная опасная кнопка */ --k-count-bg: #0f172a; /* счётчик «сколько уже в счёте» на плитке меню */ --k-count-fg: #fff; /* --- строки позиций в счёте: фон и цвет по статусу ------------------- */ --k-pos-row-bg: #f7f7f7; /* обычная строка */ --k-pos-new-bg: #fbfae4; /* принята, ещё не отправлена в работу */ --k-pos-dead-bg: #f6eeee; /* удалена */ --k-pos-usluga-bg: #f9f3ff; --k-pos-usluga-fg: #7a00ff; --k-pos-given-fg: #0e8300; /* отдана */ --k-pos-returned-fg: #d00000; /* возвращена */ --k-pos-delivering-fg: #0059bc; /* в доставке */ --k-pos-dead-fg: #ef9c9c; /* удалена */ --k-user-sel: #dfd7c4; /* текущий сотрудник в списке быстрого входа */ /* Полосы состояния счёта сверху и снизу карточки */ --k-stripe-open: #64748b; --k-stripe-ready: #84cc00; --k-stripe-close: #adadad; --k-stripe-null: #ffa200; /* Две плитки над кнопкой завершения. Печать — тёплая: это бумага, а не техника. В тёмной теме тот же тёплый смысл приходится брать светлотой, иначе песочный уходит в грязь, — там он становится золотом. */ --k-tile-money: #3178c6; --k-tile-money-hover: #2b6ab2; --k-tile-print: #b07a42; --k-tile-print-hover: #9d6c39; /* Акценты тихих кнопок под счётом (передаются инлайном из class/bill.php) */ --k-act-refund: #d24b48; --k-act-unlock: #b8791f; --k-session-track: rgba(55, 71, 79, 0.14); /* полоса остатка сеанса */ /* --- сине-серая семья: клиент, стол, отдел -------------------------- */ --k-cool-bg: #eef2f7; --k-cool-bg-2: #e4ebf3; --k-cool-bg-3: #dbe4ef; --k-cool-line: #c7d3e1; --k-cool-line-2: #b6c7da; --k-cool-ink: #43617f; --k-cool-ink-2: #1e293b; --k-cool-muted: #5a6b80; --k-cool-muted-2: #93a7bd; --k-cool-faint: #9fb0c4; /* --- прочее --------------------------------------------------------- */ --k-accent-section: #3d5a45; /* запасной акцент раздела, если отдел без цвета */ --k-tile-filter: none; /* плитки меню и отделов: без правки */ --k-tile-filter-hover: brightness(1.06); --k-tile-filter-active: brightness(0.96); --k-paper-filter: none; /* кассовая лента */ --k-radius-card: 12px; --k-radius-ctl: 8px; --k-primary: var(--k-text); --k-danger: var(--k-red-fg); --k-ok: var(--k-green-fg); } /* ====================================================================== Тёмная тема ====================================================================== */ html[data-theme="dark"] { color-scheme: dark; scrollbar-width: thin; scrollbar-color: #2c3a54 transparent; /* Правило тёмного набора: смысл несут кромка и текст, а не заливка. Любой жёлтый и оранжевый на низкой светлоте уходит в оливу и грязь — поэтому «тёплых» подложек здесь нет вовсе: плашка предупреждения такая же холодная, как остальные, а янтарь живёт в её рамке и надписи, где ему хватает светлоты остаться золотом. */ --k-bg: #06080f; --k-surface: #0f1622; --k-surface-2: #151d2b; --k-surface-3: #1c2536; --k-surface-4: #253045; --k-surface-5: #2f3c55; --k-surface-hi: #172033; --k-field-bg: #0a0f19; --k-on-accent: #fff; --k-border: #223049; --k-border-soft: #17202f; --k-border-strong: #3a4a68; --k-field-border: #2c3a54; --k-text: #eaf2fb; --k-text-2: #bccbdd; --k-muted: #8395ad; --k-muted-2: #64758c; --k-faint: #47566b; --k-label: #6ba8c4; /* На тёмном тень видна не размытием, а глубиной — она плотнее и ниже */ --k-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); --k-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.6); --k-shadow-btn: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4); --k-shadow-btn-hover: 0 2px 5px rgba(0, 0, 0, 0.55), 0 8px 18px rgba(0, 0, 0, 0.5); --k-shadow-btn-active: 0 1px 2px rgba(0, 0, 0, 0.55); --k-shadow-tile: 0 1px 2px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.45); --k-shadow-tile-hover: 0 2px 5px rgba(0, 0, 0, 0.55), 0 12px 26px rgba(0, 0, 0, 0.55); --k-ring: rgba(69, 224, 240, 0.12); --k-ring-2: rgba(69, 224, 240, 0.2); --k-blue: #2f7fd6; --k-blue-hover: #3d92ea; --k-blue-strong: #35a0ff; --k-blue-strong-hover: #5cb4ff; --k-blue-fg: #7fcbff; --k-blue-ink: #aee2ff; --k-blue-bg: #101f33; --k-blue-bg-2: #14273f; --k-blue-line: #23557f; --k-blue-link: #45e0f0; --k-blue-link-bg: #0a2430; --k-blue-link-bg-2: #0f3140; --k-focus: var(--k-blue-strong); --k-focus-ring: rgba(53, 160, 255, 0.35); --k-green: #12a267; --k-green-hover: #17bb77; --k-green-soft: #2f9a74; --k-green-soft-hover: #37ad83; --k-green-fg: #2ff5a8; --k-green-bg: #0b2620; --k-green-line: #1a6b50; --k-green-new: #11a35f; --k-green-new-hover: #16bd6e; --k-sage-bg: #12241d; --k-sage-fg: #63dc9a; --k-sage-fg-2: #52d68d; --k-red: #c9414f; --k-red-hover: #dd5061; --k-red-fg: #ff8095; --k-red-bg: #26141d; --k-red-bg-2: #331a26; --k-red-line: #5b2739; --k-red-line-2: #6d3044; --k-red-ink: #ffa8b4; --k-red-badge: #ff2e63; /* Янтарь: заливка холодная и нейтральная, цвет — в кромке и надписи */ --k-amber-fg: #ffd166; --k-amber-bg: #1e2534; --k-amber-line: #d69a24; --k-amber-warn: #ffb02e; --k-sand-bg: #1c2331; --k-sand-line: #7d6634; --k-sand-fg: #f7d79a; --k-sand-accent: #ffc857; --k-note-bg: rgba(255, 209, 102, 0.07); --k-note-fg: #ffd98f; --k-violet: #c07cff; --k-violet-fg: #dcb6ff; --k-graphite: #3d4d62; --k-graphite-2: #3c4c60; --k-graphite-2-hover: #495b72; --k-slate: #3e5068; --k-slate-2: #8698ae; --k-slate-solid: #4e6280; --k-cool-solid: #2f6796; --k-off: #3c4a5c; --k-count-bg: #e9f1fa; --k-count-fg: #080b12; --k-user-sel: #16303f; --k-session-track: rgba(255, 255, 255, 0.16); --k-stripe-open: #2c6a92; --k-stripe-ready: #a3e635; --k-stripe-close: #34435c; --k-stripe-null: #ff9d2e; --k-tile-money: #2f7fd6; --k-tile-money-hover: #3d92ea; --k-tile-print: #c9922f; --k-tile-print-hover: #dba63f; --k-act-refund: #b8404f; --k-act-unlock: #a5762a; /* Список позиций — неоновое стекло: подложки строк полупрозрачны, поэтому сквозь них просвечивает сама карточка, а не своя плотная заливка. */ --k-pos-row-bg: rgba(125, 211, 252, 0.05); --k-pos-new-bg: rgba(69, 224, 240, 0.1); --k-pos-dead-bg: rgba(255, 46, 99, 0.1); --k-pos-usluga-bg: rgba(192, 124, 255, 0.14); --k-pos-usluga-fg: #d0a9ff; --k-pos-given-fg: #3ff08d; --k-pos-returned-fg: #ff7e93; --k-pos-delivering-fg: #63c3ff; --k-pos-dead-fg: #cf8a92; --k-cool-bg: #1a2433; --k-cool-bg-2: #202d3f; --k-cool-bg-3: #26364b; --k-cool-line: #35455c; --k-cool-line-2: #435672; --k-cool-ink: #98c2e8; --k-cool-ink-2: #dbe7f4; --k-cool-muted: #8ba0b8; --k-cool-muted-2: #74889f; --k-cool-faint: #5d7189; --k-accent-section: #45e0d0; /* Цвета отделов и категорий приходят из базы и остаются собой — по ним ориентируются вслепую. На тёмном фоне они только гасятся, чтобы не слепить: узнаваемость сохраняется, свечение уходит. */ --k-tile-filter: brightness(0.9) saturate(1.12); --k-tile-filter-hover: brightness(1.04) saturate(1.16); --k-tile-filter-active: brightness(0.82) saturate(1.12); /* Кассовая лента остаётся бумагой — это метафора, а не фон. В темноте бумага просто освещена слабее. */ --k-paper-filter: brightness(0.72) saturate(0.9); } /* ====================================================================== Основа страницы Раньше фон висел инлайном на в top.php, а цвет текста не задавался вовсе и брался чёрный по умолчанию — в тёмной теме это чёрное по тёмному. ====================================================================== */ body { background-color: var(--k-bg); color: var(--k-text); } /* Поля ввода: у части из них цвет текста нигде не задан и берётся системный. Правило по имени тега слабее любого класса, поэтому оно только подставляет недостающее и ничего не переопределяет. */ input, textarea, select { color: var(--k-text); } /* ====================================================================== Правки тёмной темы, которые в переменную не укладываются ====================================================================== */ /* Значки бокового меню остаются как есть: они лежат на плитке цвета отдела, а её цвет приходит из базы и в тёмной теме тоже светлый. А вот значки разделов панели монитора (waiter.png, cooking.png, chef.png, waiting2.png) — сплошь чёрные, и на тёмной подложке их попросту не видно. Разноцветные значки статусов позиции трогать нельзя: инверсия сменила бы им цвет, а цвет там и есть смысл. */ html[data-theme="dark"] .mon-head__ico img { filter: invert(1) brightness(1.4); } /* Поля ввода браузера (date, select) в тёмной теме рисуются светлыми, если им не сказать иначе; color-scheme на html это делает, здесь — стрелки и значки */ html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator, html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(0.7); } /* ====================================================================== Неон тёмной темы Свечение здесь не украшение, а способ показать состояние там, где на тёмном фоне плотная заливка уже ничего не добавляет: что нажимать, что выбрано, что требует денег. Поэтому оно висит на десятке элементов, а не на всём подряд — на сетке из полусотни счетов сплошное свечение превратилось бы в кашу и заодно в тормоза на слабых терминалах зала. Правило: цвет свечения — цвет самого элемента, и никогда не блюр по всей площади, только короткий сброс вниз (отрицательный spread). ====================================================================== */ /* --- две плитки над завершением: главный путь дня ---------------------- */ html[data-theme="dark"] .kassa-tile--money { box-shadow: var(--k-shadow-tile), 0 8px 22px -8px rgba(53, 160, 255, 0.75); } html[data-theme="dark"] .kassa-tile--money:hover { box-shadow: var(--k-shadow-tile-hover), 0 12px 30px -8px rgba(53, 160, 255, 0.9); } html[data-theme="dark"] .kassa-tile--print { box-shadow: var(--k-shadow-tile), 0 8px 22px -8px rgba(255, 200, 87, 0.5); } html[data-theme="dark"] .kassa-tile--print:hover { box-shadow: var(--k-shadow-tile-hover), 0 12px 30px -8px rgba(255, 200, 87, 0.62); } /* --- «Завершить счёт»: успешно доведённая до конца работа --------------- */ html[data-theme="dark"] .kassa-finish--ready { box-shadow: inset 0 0 0 1px rgba(47, 245, 168, 0.35), 0 10px 28px -8px rgba(47, 245, 168, 0.6); } html[data-theme="dark"] .kassa-finish--ready:hover { box-shadow: inset 0 0 0 1px rgba(47, 245, 168, 0.5), 0 14px 34px -8px rgba(47, 245, 168, 0.78); } html[data-theme="dark"] .kassa-finish--force { box-shadow: 0 8px 22px -10px rgba(47, 245, 168, 0.45); } html[data-theme="dark"] .kassa-btn--dep { box-shadow: var(--k-shadow-btn), 0 8px 20px -10px rgba(53, 160, 255, 0.8); } /* --- боковое меню: где я сейчас и куда зовут --------------------------- */ html[data-theme="dark"] .nav2--new { box-shadow: 0 8px 22px -10px rgba(47, 245, 168, 0.6); } /* Полоска текущего раздела светится его же цветом из базы */ html[data-theme="dark"] .nav2--active::before { box-shadow: 0 0 10px 0 var(--c, var(--k-blue-strong)); } html[data-theme="dark"] .nav2__badge { box-shadow: 0 0 12px -3px var(--k-red-badge); } html[data-theme="dark"] .kassa-rail__item--active .kassa-rail__dot { box-shadow: inset 0 0 0 1px var(--k-ring-2), 0 0 0 3px color-mix(in srgb, var(--k-cat-color) 26%, transparent), 0 0 10px -1px var(--k-cat-color, var(--k-blue-strong)); } /* --- поля ввода: курсор виден через весь зал ---------------------------- */ html[data-theme="dark"] .nav-search__input:focus, html[data-theme="dark"] .kassa-search__input:focus, html[data-theme="dark"] .kolvo__value:focus, html[data-theme="dark"] .bc-input:focus, html[data-theme="dark"] .bpay__input:focus { box-shadow: 0 0 0 3px var(--k-focus-ring), 0 0 18px -4px var(--k-blue-strong); } /* --- деньги: единственное число, ради которого счёт открывают ----------- */ html[data-theme="dark"] .bill-tot__row--due b, html[data-theme="dark"] .bill-due--pay b { text-shadow: 0 0 14px rgba(255, 128, 149, 0.55); } html[data-theme="dark"] .bill-due--pay { box-shadow: 0 0 14px -6px rgba(255, 128, 149, 0.7); } html[data-theme="dark"] .bill-tot__row--done b, html[data-theme="dark"] .bill-due--zero, html[data-theme="dark"] .bill-due--over { text-shadow: 0 0 14px rgba(47, 245, 168, 0.45); } /* --- карточка счёта: панель с подсвеченной верхней кромкой -------------- */ html[data-theme="dark"] .bill_div { box-shadow: inset 0 1px 0 rgba(69, 224, 240, 0.14); } html[data-theme="dark"] .bill_setka a:hover .bill_div { box-shadow: inset 0 1px 0 rgba(69, 224, 240, 0.22), 0 0 0 1px rgba(69, 224, 240, 0.22), 0 10px 28px -12px rgba(69, 224, 240, 0.5); } html[data-theme="dark"] .bill-table { box-shadow: 0 0 0 1px rgba(69, 224, 240, 0.14), 0 0 16px -6px rgba(69, 224, 240, 0.6); } /* --- выбранное: вкладка, фильтр, плитка периода ------------------------ */ html[data-theme="dark"] .work_nav_sel, html[data-theme="dark"] .bh-f.is-on { box-shadow: 0 0 14px -6px rgba(53, 160, 255, 0.9); } html[data-theme="dark"] .otdel-filters__pill--active, html[data-theme="dark"] .otdel-filters__seg--active, html[data-theme="dark"] .pager__num--active { box-shadow: inset 0 -3px 0 var(--otdel-filter-accent, var(--k-accent-section)), 0 0 14px -7px var(--otdel-filter-accent, var(--k-accent-section)); } /* Подпись рельса раздела в светлой теме тише прочих микро-подписей — в тёмной уравниваем её с ними, иначе бирюза остаётся только на счёте */ html[data-theme="dark"] .kassa-rail__title { color: var(--k-label); } /* Готово к выдаче — это зов, а не состояние: пусть светится */ html[data-theme="dark"] .bill_ready_label { box-shadow: 0 0 14px -3px rgba(132, 204, 0, 0.9); } /* --- панель монитора: готовое к выдаче нельзя пропустить --------------- */ html[data-theme="dark"] .monitor-col__badge { box-shadow: 0 0 12px -2px var(--k-green); } html[data-theme="dark"] .tovar_have { box-shadow: 0 0 0 2px var(--k-bg), 0 0 12px -2px rgba(69, 224, 240, 0.8); } /* ====================================================================== Неоновое стекло: список позиций в счёте Инлайновый стиль строки задаёт только background-color (см. class/bill.php), поэтому фоновую картинку и блик можно добавить отсюда — они складываются. Настоящего размытия подложки здесь нет и быть не может: за строкой сплошная карточка, размывать нечего, а backdrop-filter на полусотне карточек сетки стоил бы кадров. Стекло собрано светом: полупрозрачная заливка, блик по верхней кромке каждой строки и общий градиент под ними. ====================================================================== */ html[data-theme="dark"] .bill_div .bill_pos_table { background: linear-gradient(180deg, rgba(69, 224, 240, 0.05), rgba(69, 224, 240, 0.012)); } html[data-theme="dark"] .bill_pos_table td:not(.bill-sec):not(.bill-sec-act):not(.bill-tot):not(.bill-loss) { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0)); box-shadow: inset 0 1px 0 rgba(69, 224, 240, 0.12); } /* Заголовок группы — неоновая засечка слева, как метка на панели */ html[data-theme="dark"] .bill_pos_table .bill-sec { box-shadow: inset 3px 0 0 var(--k-blue-link); } html[data-theme="dark"] .bill_comment div { box-shadow: inset 0 0 0 1px rgba(255, 209, 102, 0.22); border-radius: 6px; } /* ====================================================================== Кассовая лента Метафора остаётся: полоса по-прежнему выезжает из-под нижней кромки счёта и уже его по ширине. Меняется только поверхность — фотография мятой бумаги в тёмной теме была единственным светлым пятном и выпадала из всего остального. Вместо неё печать по тёмной ленте: строчки развёртки, неоновая кромка и пунктир отрыва. ====================================================================== */ html[data-theme="dark"] .bill-fisc { background: repeating-linear-gradient(180deg, rgba(69, 224, 240, 0.075) 0 1px, transparent 1px 5px), linear-gradient(180deg, #08101c 0%, #050a12 100%); border-bottom: 0; border-radius: 3px 3px 12px 12px; filter: none; box-shadow: inset 0 0 0 1px rgba(69, 224, 240, 0.22), inset 0 6px 12px -8px rgba(0, 0, 0, 0.9), 0 14px 34px -18px rgba(69, 224, 240, 0.75); } /* Линия отрыва вместо зубчатого края бумаги */ html[data-theme="dark"] .bill-fisc::after { content: ''; display: block; margin: 11px -13px 0; border-top: 1px dashed rgba(69, 224, 240, 0.35); } html[data-theme="dark"] .bill-fisc__title { color: var(--k-label); } html[data-theme="dark"] .bill-fisc__type, html[data-theme="dark"] .bill-fisc__sum { color: var(--k-text-2); } html[data-theme="dark"] .kassa-btn--fisc { background: rgba(69, 224, 240, 0.08); border-color: rgba(69, 224, 240, 0.3); color: var(--k-blue-link); } html[data-theme="dark"] .kassa-btn--fisc:hover { background: rgba(69, 224, 240, 0.16); border-color: rgba(69, 224, 240, 0.5); } html[data-theme="dark"] .kassa-btn--fisc .kassa-btn__ico { color: var(--k-blue-link); } /* ====================================================================== Атмосфера: сетка под рабочей областью и рамки-уголки у счёта ====================================================================== */ /* Едва различимая координатная сетка — она задаёт «поверхность», на которой лежат карточки. Держать её слабой: на 0.03 уже рябит. */ html[data-theme="dark"] body { background-image: linear-gradient(rgba(69, 224, 240, 0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(69, 224, 240, 0.022) 1px, transparent 1px); background-size: 44px 44px; background-attachment: fixed; } /* Сетка счетов красила фон сама и накрывала бы разметку */ html[data-theme="dark"] .bills_main_setka2 { background-color: transparent; } /* Уголки — только у счёта на его собственной странице: там он один и главный. В сетке из полусотни карточек это был бы шум. */ html[data-theme="dark"] .bill-col .bill_div::before, html[data-theme="dark"] .bill-col .bill_div::after { content: ''; position: absolute; top: -1px; width: 16px; height: 16px; border: 0 solid rgba(69, 224, 240, 0.55); pointer-events: none; } html[data-theme="dark"] .bill-col .bill_div::before { left: -1px; border-width: 2px 0 0 2px; border-radius: 10px 0 0 0; } html[data-theme="dark"] .bill-col .bill_div::after { right: -1px; border-width: 2px 2px 0 0; border-radius: 0 10px 0 0; } /* Плитка меню под курсором — неоновая обводка вместо простого осветления */ html[data-theme="dark"] .kassa-cat__grid .tovar_div:hover { box-shadow: var(--k-shadow-hover), 0 0 0 1px rgba(69, 224, 240, 0.55), 0 0 20px -6px rgba(69, 224, 240, 0.85); } /* ====================================================================== Счёт в тёмной теме: состояние читается цветом Карточка счёта — главный предмет на экране, и почти всё в ней говорит о состоянии: полосы сверху и снизу, ярлык, засечки разделов списка. В светлой теме это плотные заливки; здесь — контур и свечение, потому что на тёмном плотная заливка добавляет пятно, а не смысл. ====================================================================== */ /* --- ярлык состояния: контурный неоновый чип вместо плашки -------------- */ html[data-theme="dark"] .bill_open_label, html[data-theme="dark"] .bill_close_label, html[data-theme="dark"] .bill_ready_label, html[data-theme="dark"] .bill_nulled_label { background-color: rgba(6, 8, 15, 0.55); box-shadow: inset 0 0 0 1px currentColor, 0 0 12px -4px currentColor; font-weight: 700; letter-spacing: 0.06em; } html[data-theme="dark"] .bill_open_label { color: var(--k-blue-fg); } html[data-theme="dark"] .bill_ready_label { color: var(--k-stripe-ready); } html[data-theme="dark"] .bill_close_label { color: var(--k-muted); } html[data-theme="dark"] .bill_nulled_label { color: var(--k-stripe-null); } /* --- свечение карточки по состоянию ------------------------------------ */ /* :has() читает состояние по ярлыку — отдельный класс на карточку заводить не пришлось. Светится только то, что зовёт: готов к выдаче и анулирован. */ html[data-theme="dark"] .bill_div:has(.bill_ready_label) { box-shadow: inset 0 1px 0 rgba(69, 224, 240, 0.14), 0 0 22px -10px var(--k-stripe-ready); } html[data-theme="dark"] .bill_div:has(.bill_nulled_label) { box-shadow: inset 0 1px 0 rgba(255, 157, 46, 0.2), 0 0 22px -12px var(--k-stripe-null); } /* --- значок отдела: цвет из базы уходит в кромку и свечение ------------- */ /* Заливку гасим тёмной плёнкой поверх (background-image складывается с инлайновым background-color), а сам цвет отдела берём из --c. */ html[data-theme="dark"] .bill_room_label { background-image: linear-gradient(rgba(6, 8, 15, 0.46), rgba(6, 8, 15, 0.46)); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--c, var(--k-border-strong)), 0 0 14px -5px var(--c, var(--k-blue-strong)); } /* Логотип отдела приводится к светлому силуэту — ровно как в боковом меню он приводится к тёмному (там brightness(0)). Иначе тёмная картинка тонет в затемнённой плитке, а цветную инверсия увела бы в чужой оттенок. */ html[data-theme="dark"] .bill_room_label img { filter: brightness(0) invert(1) opacity(0.92) drop-shadow(0 0 7px var(--c, rgba(69, 224, 240, 0.6))); } /* Значок оплаченной позиции: маленькая растровая купюра. На тёмном она выглядела наклейкой — добавляем ей свечение, чтобы читалась как метка. */ html[data-theme="dark"] .bill_summa img { filter: saturate(1.25) drop-shadow(0 0 5px rgba(47, 245, 168, 0.55)); } html[data-theme="dark"] .bill_room_label--empty { background-image: none; box-shadow: none; border-color: rgba(69, 224, 240, 0.4); color: var(--k-blue-link); } /* --- номер счёта: маркировка партии, а не просто число ------------------ */ html[data-theme="dark"] .bill-num { color: var(--k-muted); } html[data-theme="dark"] .bill-num b { color: var(--k-blue-link); letter-spacing: 0.04em; text-shadow: 0 0 12px rgba(69, 224, 240, 0.45); } /* --- строка клиента: стекло, а не плашка -------------------------------- */ html[data-theme="dark"] .bill-client { background-image: linear-gradient(180deg, rgba(69, 224, 240, 0.07), rgba(69, 224, 240, 0.01)); box-shadow: inset 0 1px 0 rgba(69, 224, 240, 0.16); } html[data-theme="dark"] .bill-client--empty { background-image: none; border-color: rgba(69, 224, 240, 0.32); box-shadow: none; } html[data-theme="dark"] .bill-client--empty .bill-client__ava { background: rgba(69, 224, 240, 0.1); color: var(--k-blue-link); } html[data-theme="dark"] .bill-client__ava { box-shadow: inset 0 0 0 1px rgba(69, 224, 240, 0.28); } /* Заметка по счёту — золотой контурный чип, а не заливка: тёплая плёнка поверх синей карточки на любой заметной плотности снова даёт оливу. */ html[data-theme="dark"] .bill_master_comment { box-shadow: inset 0 0 0 1px rgba(255, 209, 102, 0.24); border-radius: 8px; } /* --- засечки разделов списка: свой цвет у каждой стадии ----------------- */ /* Официант читает состояние заказа по цвету полоски слева, не вчитываясь в подпись: принято → ждёт → отдать → в работе → выполнено. */ html[data-theme="dark"] .bill_pos_table .bill-sec { color: var(--sec-c, var(--k-label)); box-shadow: inset 3px 0 0 var(--sec-c, var(--k-blue-link)); } html[data-theme="dark"] .bill-sec--new { --sec-c: var(--k-blue-link); } html[data-theme="dark"] .bill-sec--wait { --sec-c: var(--k-sand-accent); } html[data-theme="dark"] .bill-sec--give { --sec-c: var(--k-green-fg); } html[data-theme="dark"] .bill-sec--work { --sec-c: var(--k-blue-strong); } html[data-theme="dark"] .bill-sec--deliv { --sec-c: var(--k-pos-delivering-fg); } html[data-theme="dark"] .bill-sec--done { --sec-c: var(--k-green); } html[data-theme="dark"] .bill-sec--serv { --sec-c: var(--k-violet); } html[data-theme="dark"] .bill-sec--dead { --sec-c: var(--k-faint); } /* Кнопка массовой смены статуса: на тёмном обесцвеченная иконка пропадала — выводим её силуэтом в цвет раздела и гасим прозрачностью, как было */ html[data-theme="dark"] .bill_pos_table .bill-sec-act img { filter: brightness(0) invert(1); opacity: 0.42; } html[data-theme="dark"] .bill_pos_table .bill-sec-act img:hover { filter: brightness(0) invert(1) drop-shadow(0 0 6px var(--k-blue-link)); opacity: 1; } /* --- блоки «Оплаты по счёту» и депозита: то же стекло -------------------- */ html[data-theme="dark"] .bill-box { background-image: linear-gradient(180deg, rgba(69, 224, 240, 0.05), rgba(69, 224, 240, 0.01)); box-shadow: inset 0 1px 0 rgba(69, 224, 240, 0.12); } html[data-theme="dark"] .bill-dep { background-image: linear-gradient(180deg, rgba(53, 160, 255, 0.1), rgba(53, 160, 255, 0.02)); box-shadow: inset 0 1px 0 rgba(53, 160, 255, 0.25), 0 0 20px -12px rgba(53, 160, 255, 0.8); } /* ====================================================================== Переключатель темы: в боковом меню, всегда на виду Две половины «Свет» и «Ночь», текущая залита. Не выпадающий список и не галочка: состояние видно, не наводя и не открывая. ====================================================================== */ .theme-switch { display: flex; gap: 3px; margin: 2px 0 0; padding: 3px; border-radius: 9px; background: var(--k-surface-3); box-shadow: inset 0 0 0 1px var(--k-border); } .theme-switch__btn { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 28px; padding: 0 6px; border: 0; border-radius: 7px; background: transparent; color: var(--k-muted); font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer; transition: background-color 0.12s, color 0.12s, box-shadow 0.12s; } .theme-switch__btn:hover { color: var(--k-text-2); } .theme-switch__btn svg { width: 15px; height: 15px; flex: 0 0 auto; } .theme-switch__btn[aria-pressed="true"] { background: var(--k-surface); color: var(--k-text); box-shadow: var(--k-shadow), inset 0 0 0 1px var(--k-border); } .theme-switch__btn:focus-visible { outline: 2px solid var(--k-focus); outline-offset: 1px; } /* Вариант для страницы входа: там нет бокового меню, и переключатель живёт в углу экрана — вне карточки входа, чтобы не отвлекать от единственного действия, но и не прячась в настройках. */ .theme-switch--corner { position: fixed; right: 1rem; bottom: 1rem; z-index: 20; width: 11rem; margin: 0; background: var(--k-surface); box-shadow: inset 0 0 0 1px var(--k-border), var(--k-shadow); } .theme-switch--corner .theme-switch__btn[aria-pressed="true"] { background: var(--k-surface-3); }