/* ============================================================================ Tamgio — дизайн-система (перенесена со стенда 28.07.2026). Токены -> примитивы -> компоненты -> унаследованные классы страниц. Без внешних шрифтов и библиотек: сервер закрытый, всё работает офлайн. Тёмная тема — по умолчанию (переключатель в шапке, выбор запоминается). ========================================================================== */ /* ----- 1. Токены ---------------------------------------------------------- */ :root { --n-0:#ffffff; --n-25:#fcfcfd; --n-50:#f7f8fa; --n-100:#eef0f4; --n-200:#e3e6ec; --n-300:#cdd2dc; --n-400:#98a1b2; --n-500:#6b7488; --n-600:#4c5566; --n-700:#343c4b; --n-800:#1f2634; --n-900:#111725; --a-50:#eef0ff; --a-100:#e0e3ff; --a-300:#a5adff; --a-500:#5b5bd6; --a-600:#4f46e5; --a-700:#4338ca; --ok-50:#e8f7ef; --ok-600:#0f9d58; --ok-700:#0b7a44; --warn-50:#fff4e2; --warn-600:#d97706; --warn-700:#b45309; --err-50:#fdecec; --err-600:#dc2626; --err-700:#b91c1c; --info-50:#e8f2fe; --info-600:#0b74de; --bg: var(--n-50); --surface: var(--n-0); --surface-2: var(--n-25); --line: var(--n-200); --line-soft: var(--n-100); --text: var(--n-900); --text-2: var(--n-600); --text-3: var(--n-500); --accent: var(--a-600); --accent-weak: var(--a-50); --btn-bg: var(--a-600); --btn-bg-hover: var(--a-700); /* состояния: у каждого есть пара в тёмной теме, поэтому в правилах ниже ссылаться на шкалу --n-* напрямую нельзя */ --hover: var(--n-100); --hover-soft: var(--n-50); --row-hover: var(--n-50); --fill-idle: var(--n-100); --line-strong: var(--n-300); --ok-text:#0b7a44; --warn-text:#b45309; --err-text:#b91c1c; --info-text:#0b74de; color-scheme: light; --sidebar-bg:#0d1220; --sidebar-text:#aab2c5; --sidebar-active:#ffffff; --sidebar-hover:rgba(255,255,255,.06); --sidebar-line:rgba(255,255,255,.08); --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:14px; --r-full:999px; --shadow-1:0 1px 2px rgba(16,24,40,.06); --shadow-2:0 4px 14px rgba(16,24,40,.08); --shadow-3:0 12px 32px rgba(16,24,40,.12); --sidebar-w:252px; --topbar-h:60px; --ease:cubic-bezier(.4,0,.2,1); } /* Тёмная тема описана РОВНО ЗДЕСЬ. Её ставит скрипт в ДО отрисовки (по умолчанию — тёмная), поэтому копии правил в @media нет: раньше из-за такой копии часть состояний оставалась светлой. */ :root[data-theme="dark"] { --bg:#0a0e18; --surface:#111726; --surface-2:#0e1420; --line:#222c3f; --line-soft:#1a2233; --text:#eef1f7; --text-2:#a8b2c6; --text-3:#7d879b; --accent:#7c7cf0; --accent-weak:#1a1f3d; --btn-bg:#615ede; --btn-bg-hover:#5250cf; --ok-50:#12301f; --warn-50:#33240f; --err-50:#331616; --info-50:#0f2033; --ok-text:#5cd39b; --warn-text:#f0b95c; --err-text:#f79191; --info-text:#6fb5f7; --hover:#1c2536; --hover-soft:#182034; --row-hover:#172032; --fill-idle:#1c2536; --line-strong:#3a465f; --sidebar-bg:#070b14; --shadow-1:none; --shadow-2:0 4px 14px rgba(0,0,0,.4); --shadow-3:0 12px 32px rgba(0,0,0,.5); color-scheme: dark; } /* ----- 2. База ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font: 400 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Helvetica Neue", Arial, "Noto Sans", sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1,h2,h3,h4 { margin:0 0 .6rem; font-weight:600; letter-spacing:-.01em; color:var(--text); } h1 { font-size:22px; } h2 { font-size:16px; margin-top:1.4rem; } h3 { font-size:14px; } p { margin:0 0 .6rem; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; } code, pre, .num, td.nowrap { font-variant-numeric: tabular-nums; } code { background:var(--surface-2); border:1px solid var(--line); padding:1px 5px; border-radius:var(--r-xs); font-size:.86em; } pre { background:var(--surface-2); border:1px solid var(--line); padding:12px 14px; border-radius:var(--r-md); overflow:auto; font-size:12.5px; color:var(--text-2); } pre.plain { white-space:pre-wrap; word-break:break-word; } .muted { color: var(--text-3); } .small { font-size:12.5px; } .nowrap { white-space: nowrap; } hr { border:none; border-top:1px solid var(--line); margin:1.2rem 0; } .ic { width:18px; height:18px; flex:0 0 auto; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; vertical-align:-3px; } .ic-sm { width:15px; height:15px; } .ic-lg { width:22px; height:22px; } /* ----- 3. Каркас ---------------------------------------------------------- */ .layout { display:grid; grid-template-columns: var(--sidebar-w) 1fr; min-height:100vh; } .sidebar { background: var(--sidebar-bg); color: var(--sidebar-text); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; border-right:1px solid rgba(255,255,255,.05); } .brand { display:flex; align-items:center; gap:10px; padding:18px 18px 14px; color:#fff; font-weight:600; letter-spacing:-.01em; text-decoration:none; } .brand:hover { text-decoration:none; } .brand-mark { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:linear-gradient(140deg,var(--a-600),#8b5cf6); box-shadow:0 4px 12px rgba(79,70,229,.35); flex:0 0 auto; } .brand-mark .ic { stroke:#fff; width:17px; height:17px; } .brand em { font-style:normal; font-size:11px; font-weight:500; color:#7d879b; letter-spacing:.06em; text-transform:uppercase; } .sidenav { padding:6px 10px 16px; overflow-y:auto; flex:1; } .nav-sec { font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:#5f6a80; padding:16px 10px 6px; font-weight:600; } .sidenav a { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r-sm); color:var(--sidebar-text); font-size:13.5px; position:relative; text-decoration:none; transition:background .14s var(--ease), color .14s var(--ease); } .sidenav a:hover { background:var(--sidebar-hover); color:#e7ebf3; text-decoration:none; } .sidenav a.active { background:rgba(99,102,241,.16); color:var(--sidebar-active); font-weight:500; } .sidenav a.active::before { content:""; position:absolute; left:-10px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--a-600); } .nav-ico { display:inline-flex; } .side-user { padding:12px; border-top:1px solid var(--sidebar-line); display:flex; align-items:center; gap:10px; } .side-user-info { display:flex; flex-direction:column; min-width:0; flex:1; } .side-user-name { color:#e7ebf3; font-size:13px; font-weight:500; text-decoration:none; overflow:hidden; text-overflow:ellipsis; } .side-user-name:hover { text-decoration:none; color:#fff; } .side-user-role { font-size:11.5px; color:#6b7488; } .main { display:flex; flex-direction:column; min-width:0; } .mainbar { height:var(--topbar-h); display:flex; align-items:center; gap:14px; padding:0 24px; background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; } .mainbar-brand { font-weight:600; display:none; } .mainbar-spacer { flex:1; } .mainbar-user { color:var(--text-3); font-size:13px; } .burger { display:none; cursor:pointer; color:var(--text-2); } .icon-btn { width:34px; height:34px; display:grid; place-items:center; cursor:pointer; border:1px solid transparent; border-radius:var(--r-sm); color:var(--text-2); background:none; font:inherit; transition:background .14s var(--ease), color .14s var(--ease); } .icon-btn:hover { background:var(--hover); color:var(--text); } .container { padding:24px; max-width:1440px; width:100%; } .page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:14px; } /* ----- 4. Примитивы ------------------------------------------------------- */ .card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-1); padding:16px 18px; margin-bottom:14px; } .card > :last-child { margin-bottom:0; } .btn { display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 13px; border-radius:var(--r-sm); border:1px solid transparent; cursor:pointer; font:inherit; font-size:13px; font-weight:500; white-space:nowrap; text-decoration:none; background:var(--btn-bg); color:#fff; box-shadow:0 1px 2px rgba(79,70,229,.35); transition:background .14s var(--ease), border-color .14s var(--ease), box-shadow .14s var(--ease), transform .08s var(--ease); } .btn:hover { background:var(--btn-bg-hover); text-decoration:none; color:#fff; } .btn:active { transform:translateY(1px); } .btn-sm { height:29px; padding:0 10px; font-size:12.5px; } .btn-ghost, .btn-ghost2 { background:var(--surface); color:var(--text-2); border-color:var(--line); box-shadow:none; } .btn-ghost:hover, .btn-ghost2:hover { background:var(--hover-soft); color:var(--text); border-color:var(--line-strong); } .btn-ok { background:var(--ok-600); box-shadow:none; } .btn-ok:hover { background:var(--ok-700); } .btn-danger { background:var(--err-600); box-shadow:none; } .btn-danger:hover { background:var(--err-700); } .btn-disabled, .btn[disabled] { opacity:.45; pointer-events:none; } .badge { display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px; border-radius:var(--r-full); font-size:12px; font-weight:500; white-space:nowrap; background:var(--fill-idle); color:var(--text-2); } .badge.active, .badge.ok, .badge.done { background:var(--ok-50); color:var(--ok-text); } .badge.error, .badge.inactive { background:var(--err-50); color:var(--err-text); } .badge.pending, .badge.warn { background:var(--warn-50); color:var(--warn-text); } .badge.info, .badge.running { background:var(--info-50); color:var(--info-text); } .actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .form-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; } form.inline { display:inline-flex; } .filter-bar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; } input, select, textarea, button { font:inherit; } input[type=text], input[type=password], input[type=search], input[type=number], input[type=date], input[type=email], select { height:34px; padding:0 10px; font-size:13px; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); outline:none; transition:border-color .14s var(--ease), box-shadow .14s var(--ease); } textarea { padding:8px 10px; font-size:13px; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); outline:none; } input:focus, select:focus, textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } textarea.code-edit { width:100%; min-height:60vh; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12.5px; line-height:1.55; } label { font-size:13px; color:var(--text-2); } /* ----- 5. Таблицы --------------------------------------------------------- */ .table-wrap { overflow-x:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-1); margin-bottom:14px; } table { width:100%; border-collapse:separate; border-spacing:0; font-size:13.5px; } th { text-align:left; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--text-3); padding:10px 14px; background:var(--surface-2); border-bottom:1px solid var(--line); white-space:nowrap; } td { padding:11px 14px; border-bottom:1px solid var(--line-soft); vertical-align:middle; } tbody tr:last-child td, tr:last-child td { border-bottom:none; } tr { transition:background .1s var(--ease); } table tr:hover td { background:var(--row-hover); } .card table, .card .table-wrap { box-shadow:none; border:none; margin-bottom:0; } /* Выбранная строка списка (например, пользователь, чьи права открыты ниже). */ tr.row-sel td, table tr.row-sel:hover td { background:var(--accent-weak); } tr.row-sel td:first-child { box-shadow:inset 3px 0 var(--accent); } /* ----- 6. Плитки статистики ---------------------------------------------- */ .cards { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:14px; } .card.stat { display:flex; flex-direction:column; gap:2px; } .stat .num { font-size:24px; font-weight:600; letter-spacing:-.02em; line-height:1.2; } .stat .lbl { font-size:12.5px; color:var(--text-3); } .stat .lbl a { color:inherit; } .stat .lbl a:hover { color:var(--accent); } .kind-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .kind-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px; } .kind-icon { width:38px; height:38px; border-radius:var(--r-md); display:grid; place-items:center; background:var(--accent-weak); color:var(--accent); margin-bottom:10px; } /* ----- 7. Этапы обработки ------------------------------------------------- */ .steps { list-style:none; margin:0; padding:0; } .step { display:flex; gap:14px; padding:16px 2px; position:relative; } .step + .step { border-top:1px solid var(--line-soft); } .step-mark { width:34px; height:34px; border-radius:var(--r-full); display:grid; place-items:center; flex:0 0 auto; background:var(--fill-idle); color:var(--text-3); font-weight:600; font-size:13px; border:2px solid var(--surface); box-shadow:0 0 0 1px var(--line); } .step-body { flex:1; min-width:0; } .step-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .step-title { font-weight:600; font-size:14px; } .step-sub { color:var(--text-3); font-size:12.5px; margin-top:2px; } .step-note { font-size:12.5px; color:var(--text-2); margin-top:8px; } .step-actions { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; } .step-done .step-mark { background:var(--ok-50); color:var(--ok-text); box-shadow:0 0 0 1px color-mix(in srgb, var(--ok-600) 30%, transparent); } .step-ready .step-mark { background:var(--accent-weak); color:var(--accent); box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); } .step-running .step-mark { background:var(--info-50); color:var(--info-text); } .step-warn { background:linear-gradient(90deg, color-mix(in srgb, var(--warn-50) 75%, transparent), transparent 55%); } .step-warn .step-mark { background:var(--warn-50); color:var(--warn-text); box-shadow:0 0 0 1px color-mix(in srgb, var(--warn-600) 35%, transparent); } .step-error { background:linear-gradient(90deg, color-mix(in srgb, var(--err-50) 75%, transparent), transparent 55%); } .step-error .step-mark { background:var(--err-50); color:var(--err-text); } /* ----- 8. Лента событий --------------------------------------------------- */ .timeline { list-style:none; margin:0; padding:0; } .event { padding:12px 0; border-bottom:1px solid var(--line-soft); } .event:last-child { border-bottom:none; } .event-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:3px; } .event-author { font-weight:600; font-size:13px; } .event-kind { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); background:var(--fill-idle); padding:1px 7px; border-radius:var(--r-full); } .event-text { font-size:13.5px; white-space:pre-wrap; } .event-ai_question .event-kind { background:var(--warn-50); color:var(--warn-text); } .event-ai_note .event-kind { background:var(--accent-weak); color:var(--accent); } .event-diff .event-kind { background:var(--info-50); color:var(--info-text); } .event-status .event-kind { background:var(--ok-50); color:var(--ok-text); } .event-stage_result .event-kind { background:var(--info-50); color:var(--info-text); } .event-comment .event-kind { background:var(--fill-idle); color:var(--text-2); } /* ----- 9. Загрузка файлов ------------------------------------------------- */ .upload-drop { border:1.5px dashed var(--line-strong); border-radius:var(--r-md); padding:18px; text-align:center; color:var(--text-3); background:var(--surface-2); transition:border-color .14s var(--ease), background .14s var(--ease); } .upload-drop.dragover { border-color:var(--accent); background:var(--accent-weak); } .drop-hint { margin:8px 0 0; } .drop-list { list-style:none; margin:8px 0 0; padding:0; font-size:12.5px; color:var(--text-2); } .role-choice { gap:16px; margin-bottom:10px; } .role-choice label { display:inline-flex; align-items:center; gap:6px; } /* ----- 10. Сообщения ------------------------------------------------------ */ .flash { padding:11px 14px; border-radius:var(--r-md); margin-bottom:14px; font-size:13.5px; border:1px solid transparent; } .flash-ok { background:var(--ok-50); color:var(--ok-text); border-color:color-mix(in srgb, var(--ok-600) 30%, transparent); } .flash-error { background:var(--err-50); color:var(--err-text); border-color:color-mix(in srgb, var(--err-600) 30%, transparent); } .spinner { display:inline-block; width:14px; height:14px; border-radius:50%; border:2px solid var(--line-strong); border-top-color:var(--accent); animation:spin .8s linear infinite; vertical-align:-2px; } @keyframes spin { to { transform:rotate(360deg); } } .reason-row { display:flex; gap:8px; align-items:flex-start; margin-top:6px; } .reason-label { color:var(--text-3); font-size:12.5px; min-width:8rem; } /* ----- 11. Логика заполнения колонок и матрица прав ----------------------- */ table.collogic td { vertical-align: top; font-size: .88rem; } table.collogic .collogic-name { font-weight: 600; max-width: 20rem; } table.collogic td:last-child { max-width: 46rem; } .collogic-rule { margin-top:.35rem; padding:.3rem .55rem; border-left:3px solid var(--warn-600); background:var(--warn-50); color:var(--warn-text); border-radius:var(--r-xs); font-size:.82rem; } .badge.src-none { background:var(--err-50); color:var(--err-text); } .badge.src-ok { background:var(--info-50); color:var(--info-text); } table.access td.access-cell { text-align:center; width:5.5rem; } table.access th.access-group { background:var(--surface-2); text-align:left; font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; } /* ----- 12. Логин ---------------------------------------------------------- */ .login-box { width:100%; max-width:390px; margin:10vh auto 0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-3); padding:30px; } .login-box .brand { padding:0 0 18px; color:var(--text); } .login-box input { width:100%; margin-bottom:.7rem; height:38px; } .login-box .btn { width:100%; justify-content:center; height:38px; } /* ----- 13. Адаптив -------------------------------------------------------- */ .nav-toggle-cb { display:none; } .nav-overlay { display:none; } @media (max-width: 1100px) { .cards { grid-template-columns:repeat(2,1fr); } .kind-grid { grid-template-columns:1fr; } } @media (max-width: 960px) { .layout { grid-template-columns:1fr; } .sidebar { position:fixed; left:0; top:0; bottom:0; z-index:50; width:var(--sidebar-w); transform:translateX(-100%); transition:transform .2s var(--ease); } .nav-toggle-cb:checked ~ .layout .sidebar { transform:none; box-shadow:var(--shadow-3); } .nav-overlay { display:block; position:fixed; inset:0; z-index:40; background:rgba(5,8,16,.5); opacity:0; pointer-events:none; transition:opacity .2s var(--ease); } .nav-toggle-cb:checked ~ .layout .nav-overlay { opacity:1; pointer-events:auto; } .burger { display:inline-flex; } .mainbar-brand { display:inline; } .container { padding:16px; } .mainbar { padding:0 14px; } } @media (max-width: 720px) { .cards { grid-template-columns:1fr; } th, td { padding:9px 10px; } h1 { font-size:19px; } } /* Форма загрузки внутри шага (отдельного блока в карточке больше нет). */ .step-upload { margin-top:12px; padding:14px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface-2); } .step-upload-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; font-size:13.5px; } /* Состояния шагов и заданий в бейджах (steps.py: waiting|ready|running|done|warn|error). */ .badge.waiting { background:var(--fill-idle); color:var(--text-3); } .badge.ready { background:var(--accent-weak); color:var(--accent); } .badge.no_profile { background:var(--warn-50); color:var(--warn-text); } .is-disabled { opacity:.45; pointer-events:none; } /* Статусы проекта (db.PROJ_*) в бейджах. */ .badge.unpacking { background:var(--info-50); color:var(--info-text); } .badge.invoice_ready, .badge.tnved_ready, .badge.registry_ready, .badge.marking_ready { background:var(--accent-weak); color:var(--accent); } .badge.done { background:var(--ok-50); color:var(--ok-text); }