/* * Тёмная тема "торговый терминал" для админки WMS. * * Django-админка сама умеет светлую/тёмную/авто-тему (переключатель в * шапке, атрибут data-theme на , плюс системная media-query для * "авто"). Здесь мы принудительно включаем ОДНУ тёмную палитру во всех * трёх состояниях переключателя — чтобы система выглядела как терминал * всегда, независимо от системной темы устройства. Сам переключатель * ниже спрятан (см. .theme-toggle) — раз тема всегда одна, он не нужен * и только путает. * * Специфичность у Django для `html[data-theme="dark"] { ... }` выше, * чем у голого `:root { ... }` — поэтому переопределяем переменные на * всех трёх вариантах селектора разом, тем же способом, что и сам Django. */ :root, html[data-theme="light"], html[data-theme="dark"], html[data-theme="auto"] { /* Акценты в духе биржевого терминала: зелёный — "приход"/успех/ основное действие, красный — "уход"/удаление/ошибка, янтарный — предупреждение, голубой — ссылки/информация. */ --primary: #12181f; --secondary: #182028; --accent: #f0b90b; --wms-green: #0ecb81; --wms-green-dim: #0a9964; --wms-red: #f6465d; --wms-red-dim: #c73349; --wms-amber: #f0b90b; --wms-amber-dim: #b3860a; --wms-cyan: #4fd1ff; --wms-cyan-dim: #2b9fc4; --wms-purple: #a78bfa; --wms-purple-dim: #7c5fe0; --primary-fg: #eaf1f7; --body-fg: #d7dde3; --body-bg: #0b0e11; --body-quiet-color: #8b96a5; --body-loud-color: #f5f8fa; --header-color: #eaf1f7; --header-branding-color: var(--wms-green); --header-bg: #0a0d10; --header-link-color: #eaf1f7; --breadcrumbs-fg: #8b96a5; --breadcrumbs-link-fg: #c3cbd4; --breadcrumbs-bg: #10141a; --link-fg: var(--wms-cyan); --link-hover-color: #8fe3ff; --link-selected-fg: var(--wms-cyan); --hairline-color: #1c222a; --border-color: #232a33; --error-fg: var(--wms-red); --message-success-bg: #0e2b21; --message-warning-bg: #332707; --message-error-bg: #331116; --darkened-bg: #10141a; --selected-bg: #172029; --selected-row: #12241d; --button-fg: #06120d; --button-bg: var(--wms-green); --button-hover-bg: #12e793; --default-button-bg: var(--wms-green); --default-button-hover-bg: #12e793; --close-button-bg: #232a33; --close-button-hover-bg: #2e3742; --delete-button-bg: var(--wms-red); --delete-button-hover-bg: #ff5c72; --object-tools-fg: #eaf1f7; --object-tools-bg: #1a2028; --object-tools-hover-bg: #232b35; --font-family-monospace: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; } /* Переключатель темы больше не нужен — тема всегда одна. */ .theme-toggle { display: none !important; } body { letter-spacing: 0.01em; } #header { border-bottom: 1px solid var(--wms-green-dim); box-shadow: 0 1px 12px rgba(14, 203, 129, 0.08); /* Без этого верхняя навигация (см. .wms-topnav — flex-basis:100%) не переносится на свою строку: #header у Django flex-контейнер без wrap по умолчанию, третий "полноширинный" элемент просто втиснулся бы в один ряд с лого/юзертулзами. */ flex-wrap: wrap; } /* Верхняя навигация вместо боковой панели приложений/моделей (см. nav-global в templates/admin/base_site.html). Приоритетные экраны — акцентом слева, редкие/административные — мельче, прижаты вправо через margin-left:auto на первом элементе своей группы. */ .wms-topnav { flex-basis: 100%; order: 3; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .wms-topnav-link { display: inline-block; padding: 7px 14px; border-radius: 5px; font-weight: 600; font-size: 12.5px; letter-spacing: 0.02em; color: var(--header-color); background: rgba(255, 255, 255, 0.04); white-space: nowrap; } .wms-topnav-link:hover, .wms-topnav-link:focus { background: rgba(255, 255, 255, 0.1); text-decoration: none; } .wms-topnav-primary { background: rgba(14, 203, 129, 0.16); color: var(--wms-green); border: 1px solid rgba(14, 203, 129, 0.4); } .wms-topnav-primary:hover, .wms-topnav-primary:focus { background: rgba(14, 203, 129, 0.28); } .wms-topnav-admin { font-size: 11.5px; font-weight: 500; padding: 6px 12px; opacity: 0.72; } .wms-topnav-group-start { margin-left: auto; } #branding h1, #branding h1 a:link, #branding h1 a:visited { color: var(--wms-green); font-weight: 700; } /* Логотип OrtiStock в шапке обычной админки (см. templates/admin/ base_site.html, блок branding) — значок из png (той же самой картинки, что и в боковой панели «панельной» семьи страниц, см. .wms-sb-logo-mark в dashboard.css) + текстовый вордмарк, свой фирменный зелёный (не --wms-green терминала — у логотипа собственный более приглушённый оливковый тон, чтобы точно совпадать со значком). */ .wms-site-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; } .wms-site-logo-mark { display: block; height: 30px; width: auto; } .wms-site-logo-word { font-weight: 700; font-size: 16px; letter-spacing: 0.01em; } .wms-site-logo-word-orti { color: var(--primary-fg); } .wms-site-logo-word-stock { color: #6fad3b; } div#content-related, .module { background: var(--darkened-bg); } .module h2, .module caption, .inline-group h2 { background: #10161d; color: var(--body-loud-color); } /* Панели/карточки — лёгкая обводка вместо резких белых блоков */ .module { border: 1px solid var(--hairline-color); border-radius: 6px; overflow: hidden; } /* Таблицы списков — плотнее, с моноширинными цифрами в характерных столбцах: количество/остаток/дата/ID читаются как в терминале. */ #changelist table thead th { background: #10161d; color: var(--body-quiet-color); text-transform: uppercase; font-size: 11px; letter-spacing: 0.04em; } #changelist table tbody tr:hover { background: #10161d; } .field-quantity, .field-total_quantity, .field-id, .field-created_at, .field-confirmed_at, .field-cancelled_at, .field-updated_at { font-family: var(--font-family-monospace); font-variant-numeric: tabular-nums; } /* Таблица подсчёта на странице «Инвентаризация» (см. stockoperation_inventory.html/_inventory_count_table.html) — тот же тёмный "терминальный" вид, что и у обычного списка (#changelist table), но это не changelist, а обычная внутри .module. */ .wms-inventory-table { width: 100%; border-collapse: collapse; } .wms-inventory-table thead th { background: #10161d; color: var(--body-quiet-color); text-transform: uppercase; font-size: 11px; letter-spacing: 0.04em; text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--hairline-color); } .wms-inventory-table tbody td { padding: 6px 10px; border-bottom: 1px solid var(--hairline-color); } .wms-inventory-table tbody tr:hover { background: #10161d; } .wms-inventory-input { width: 100px; font-family: var(--font-family-monospace); font-variant-numeric: tabular-nums; } /* Кнопки объектов (панель действий над списком) — единый плоский стиль */ .object-tools a.button, .object-tools button { border-radius: 4px; font-weight: 600; } /* Акцентная кнопка для основных пользовательских действий (загрузка файлов) — выделяется зелёным на фоне нейтральных серых кнопок, чтобы сразу читалось "это то, чем я обычно пользуюсь". */ .wms-btn-accent { background: var(--wms-green) !important; color: #06120d !important; } .wms-btn-accent:hover, .wms-btn-accent:focus { background: var(--wms-green-dim) !important; color: #06120d !important; } /* Маленькая кнопка прямо в ячейке списка — «Провести» рядом со статусом «Черновик» (см. StockOperationAdmin.status_badge), чтобы не открывать операцию только ради подтверждения. */ .wms-btn-tiny { padding: 1px 8px !important; font-size: 11px !important; line-height: 1.6 !important; margin-left: 6px; vertical-align: middle; } /* Фильтры сверху страницы (список остатков) вместо правой панели — каждый cl.filter_specs рендерится как обычно (admin/filter.html,
/), просто в горизонтальном ряду и без заголовка "Filter". */ .wms-top-filters { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin: 0 0 14px 0; } .wms-top-filter-group details { background: var(--darkened-bg); border: 1px solid var(--border-color); border-radius: 6px; padding: 6px 12px; } .wms-top-filter-group summary { cursor: pointer; font-weight: 600; font-size: 12.5px; color: var(--body-fg); list-style: none; } .wms-top-filter-group summary::-webkit-details-marker { display: none; } .wms-top-filter-group summary::after { content: " ▾"; color: var(--body-quiet-color); } .wms-top-filter-group ul { list-style: none; margin: 8px 0 0 0; padding: 0; max-height: 260px; overflow-y: auto; } .wms-top-filter-group li { padding: 2px 0; } .wms-top-filter-group li.selected a { color: var(--wms-green); font-weight: 600; } .wms-top-filter-clear { align-self: center; color: var(--wms-red); font-size: 12.5px; font-weight: 600; } /* Итоговая строка под таблицей остатков — сумма по всем позициям, попадающим под текущий фильтр/поиск (не только на видимой странице). */ .wms-total-row { margin-top: 12px; padding: 10px 16px; background: var(--darkened-bg); border: 1px solid var(--hairline-color); border-radius: 6px; font-size: 13px; color: var(--body-fg); } .wms-total-row strong { font-family: var(--font-family-monospace); font-size: 15px; color: var(--wms-green); } /* Кнопки под формами загрузки — ровный, предсказуемый ряд вместо ручного margin-left на ссылке "Отмена". */ .wms-form-actions { display: flex; align-items: center; gap: 12px; margin-top: 18px; } .wms-form-actions input[type="submit"], .wms-form-actions a.button { min-width: 140px; text-align: center; } /* --- Модальное окно (замена window.alert/confirm) --- Текст внутри выделяется и копируется мышью/клавиатурой как обычный HTML — в отличие от нативных диалогов браузера. */ .wms-modal-overlay { position: fixed; inset: 0; background: rgba(4, 6, 8, 0.72); display: flex; align-items: center; justify-content: center; z-index: 2000; padding: 24px; } .wms-modal-overlay[hidden] { display: none; } .wms-modal { background: #10141a; border: 1px solid var(--border-color); border-radius: 8px; max-width: 640px; width: 100%; max-height: 82vh; display: flex; flex-direction: column; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55); } .wms-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--hairline-color); } .wms-modal-header strong { color: var(--body-loud-color); font-size: 15px; } .wms-modal-close { background: none; border: none; color: var(--body-quiet-color); font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 6px; } .wms-modal-close:hover { color: var(--body-loud-color); } .wms-modal-body { padding: 16px 18px; overflow-y: auto; user-select: text; -webkit-user-select: text; color: var(--body-fg); line-height: 1.5; } .wms-modal-body p { margin: 0 0 10px 0; } .wms-modal-body ul { margin: 0; padding-left: 20px; } .wms-modal-body li { margin-bottom: 6px; user-select: text; -webkit-user-select: text; } .wms-modal.wms-modal-error .wms-modal-header { background: var(--message-error-bg); } .wms-modal.wms-modal-confirm .wms-modal-header { background: var(--message-warning-bg); } .wms-modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--hairline-color); } .wms-modal-footer button { border: none; border-radius: 4px; padding: 8px 16px; font-weight: 600; cursor: pointer; } .wms-modal-btn-primary { background: var(--wms-green); color: #06120d; } .wms-modal-btn-primary:hover { background: var(--wms-green-dim); } .wms-modal-btn-secondary { background: var(--close-button-bg); color: var(--body-fg); } .wms-modal-btn-secondary:hover { background: var(--close-button-hover-bg); } .wms-modal-btn-copy { background: transparent; color: var(--wms-cyan); border: 1px solid var(--wms-cyan) !important; } .wms-modal-btn-copy:hover { background: rgba(79, 209, 255, 0.12); } /* --- Список остатков: скрытие колонок "Наименование" / "Сырьё/Номенклатура" --- */ .wms-top-filter-toggle { align-self: center; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--body-quiet-color); cursor: pointer; } #changelist.wms-hide-name .column-name, #changelist.wms-hide-name .field-name { display: none; } #changelist.wms-hide-item-type .column-item_type_display, #changelist.wms-hide-item-type .field-item_type_display { display: none; } /* --- Индикатор загрузки: 5 складских анимаций, выбирается случайно при каждом показе (см. wms_loading.js). Общая для всех вариантов разметка — 4 условных "блока" (.wms-lb-1..4) + "пол"/лента (.wms-ground); каждый вариант просто по-своему раскладывает и красит эти же элементы, лишний JS для разметки не нужен. --- */ .wms-loading-overlay { position: fixed; inset: 0; background: rgba(4, 6, 8, 0.78); display: flex; align-items: center; justify-content: center; z-index: 3000; } .wms-loading-overlay[hidden] { display: none; } .wms-loading-box { text-align: center; } .wms-loading-text { margin-top: 8px; font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--body-quiet-color); } .wms-loading-anim { position: relative; width: 120px; height: 80px; margin: 0 auto; } .wms-lb { position: absolute; display: none; border-radius: 4px; } .wms-ground { position: absolute; left: 4px; right: 4px; bottom: 6px; height: 2px; background: var(--hairline-color); display: block; } /* 5 вариантов — упрощены: 1-2 фигуры на вариант, без свечения/теней, короткие keyframes. Легче читаются на маленьком размере и не отвлекают лишней "красотой" от самого факта ожидания. */ /* Вариант 1 — коробка подпрыгивает на месте */ .wms-loading-v1 .wms-lb-1 { display: block; width: 30px; height: 26px; left: 45px; bottom: 6px; background: var(--wms-green); transform-origin: bottom center; animation: wmsHop 1s ease-in-out infinite; } @keyframes wmsHop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } /* Вариант 2 — коробка едет слева направо и обратно */ .wms-loading-v2 .wms-lb-1 { display: block; width: 28px; height: 24px; bottom: 6px; background: var(--wms-cyan); animation: wmsSlide 1.6s ease-in-out infinite; } @keyframes wmsSlide { 0%, 100% { left: 6px; } 50% { left: 86px; } } /* Вариант 3 — коробка едет по конвейерной ленте */ .wms-loading-v3 .wms-lb-1 { display: block; width: 24px; height: 20px; bottom: 14px; background: var(--wms-green); animation: wmsBeltMove 1.6s linear infinite; } .wms-loading-v3 .wms-ground { height: 3px; bottom: 11px; background-image: repeating-linear-gradient(90deg, var(--border-color) 0 8px, transparent 8px 16px); } @keyframes wmsBeltMove { 0% { left: -26px; } 100% { left: 118px; } } /* Вариант 4 — коробка пульсирует (принимаем груз) */ .wms-loading-v4 .wms-lb-1 { display: block; width: 32px; height: 28px; left: 44px; bottom: 8px; background: var(--wms-amber); transform-origin: bottom center; animation: wmsPulse 1s ease-in-out infinite; } @keyframes wmsPulse { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.78); } } /* Вариант 5 — сканирование штрихкода на полке с коробками */ .wms-loading-v5 .wms-lb-1, .wms-loading-v5 .wms-lb-2 { display: block; width: 22px; height: 18px; bottom: 10px; background: var(--close-button-bg); } .wms-loading-v5 .wms-lb-1 { left: 30px; } .wms-loading-v5 .wms-lb-2 { left: 68px; } .wms-loading-v5 .wms-lb-4 { display: block; width: 100px; height: 2px; left: 10px; bottom: 8px; background: var(--wms-green); animation: wmsScan 1.2s ease-in-out infinite; } @keyframes wmsScan { 0%, 100% { bottom: 8px; opacity: 0.4; } 50% { bottom: 32px; opacity: 1; } }