/* ============================================================================ Tamgio — предлагаемая дизайн-система (стенд) Токены -> примитивы -> компоненты. Без внешних шрифтов и библиотек: сервер закрытый, всё должно работать офлайн. ========================================================================== */ /* ----- 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; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --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); } /* Тёмная тема описана РОВНО ЗДЕСЬ. Системную тему подставляет маленький скрипт в (ставит data-theme до отрисовки), поэтому копии правил в @media нет: раньше из-за такой копии часть состояний оставалась светлой. */ :root[data-theme="dark"], html.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; font-weight:600; letter-spacing:-.01em; color:var(--text); } h1 { font-size:22px; } h2 { font-size:16px; } h3 { font-size:14px; } p { margin:0; } a { color: inherit; text-decoration: none; } :focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; } .num { font-variant-numeric: tabular-nums; } .muted { color: var(--text-3); } .small { font-size:12.5px; } .nowrap { white-space: nowrap; } .ic { width:18px; height:18px; flex:0 0 auto; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } .ic-sm { width:15px; height:15px; } .ic-lg { width:22px; height:22px; } /* ----- 3. Каркас ---------------------------------------------------------- */ .shell { 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; } .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); } .brand-mark .ic { stroke:#fff; width:17px; height:17px; } .brand small { display:block; 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; } .nav-link { 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; transition:background .14s var(--ease), color .14s var(--ease); } .nav-link:hover { background:var(--sidebar-hover); color:#e7ebf3; } .nav-link.active { background:rgba(99,102,241,.16); color:var(--sidebar-active); font-weight:500; } .nav-link.active::before { content:""; position:absolute; left:-10px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--a-600); } .nav-badge { margin-left:auto; font-size:11px; padding:1px 7px; border-radius:var(--r-full); background:rgba(255,255,255,.1); color:#dfe4ee; font-variant-numeric:tabular-nums; } .side-foot { padding:12px; border-top:1px solid var(--sidebar-line); } .side-user { display:flex; align-items:center; gap:10px; padding:8px; border-radius:var(--r-sm); } .side-user:hover { background:var(--sidebar-hover); } .avatar { width:32px; height:32px; border-radius:var(--r-full); display:grid; place-items:center; font-size:12px; font-weight:600; color:#fff; background:linear-gradient(140deg,#6366f1,#a855f7); flex:0 0 auto; } .side-user b { color:#e7ebf3; font-size:13px; font-weight:500; display:block; } .side-user span { font-size:11.5px; color:#6b7488; } .main { display:flex; flex-direction:column; min-width:0; } .topbar { 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; } .crumbs { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--text-3); } .crumbs a:hover { color:var(--text); } .crumbs .ic { width:14px; height:14px; opacity:.5; } .crumbs b { color:var(--text); font-weight:600; } .topbar-spacer { flex:1; } .search { display:flex; align-items:center; gap:8px; height:34px; padding:0 10px; min-width:230px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); color:var(--text-3); } .search input { border:none; background:none; outline:none; color:var(--text); font:inherit; font-size:13px; width:100%; } .search kbd { font:inherit; font-size:11px; color:var(--text-3); border:1px solid var(--line); border-radius:4px; padding:1px 5px; background:var(--surface); } .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; transition:background .14s var(--ease), color .14s var(--ease); } .icon-btn:hover { background:var(--hover); color:var(--text); } .icon-btn.has-dot { position:relative; } .icon-btn.has-dot::after { content:""; position:absolute; top:7px; right:8px; width:6px; height:6px; border-radius:50%; background:var(--err-600); box-shadow:0 0 0 2px var(--surface); } .content { 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:18px; } .page-head .sub { color:var(--text-3); font-size:13px; margin-top:3px; } /* ----- 4. Примитивы ------------------------------------------------------- */ .card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-1); } .card-pad { padding:18px; } .card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line-soft); } .card-head h2 { font-size:14.5px; } .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; transition:background .14s var(--ease), border-color .14s var(--ease), box-shadow .14s var(--ease), transform .08s var(--ease); } .btn:active { transform:translateY(1px); } .btn-primary { background:var(--btn-bg); color:#fff; box-shadow:0 1px 2px rgba(79,70,229,.35); } .btn-primary:hover { background:var(--btn-bg-hover); } .btn-ghost { background:var(--surface); color:var(--text-2); border-color:var(--line); } .btn-ghost:hover { background:var(--hover-soft); color:var(--text); border-color:var(--line-strong); } .btn-quiet { background:transparent; color:var(--text-2); } .btn-quiet:hover { background:var(--hover); color:var(--text); } .btn-sm { height:29px; padding:0 10px; font-size:12.5px; } .btn[disabled], .btn.is-disabled { opacity:.45; pointer-events:none; } .pill { 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; } .pill::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.85; } .pill-ok { background:var(--ok-50); color:var(--ok-text); } .pill-warn { background:var(--warn-50); color:var(--warn-text); } .pill-err { background:var(--err-50); color:var(--err-text); } .pill-info { background:var(--info-50); color:var(--info-text); } .pill-idle { background:var(--fill-idle); color:var(--text-2); } .pill-accent { background:var(--accent-weak); color:var(--accent); } .chip { display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px; border:1px solid var(--line); border-radius:var(--r-full); font-size:12.5px; color:var(--text-2); background:var(--surface); } .grid { display:grid; gap:16px; } .grid-4 { grid-template-columns:repeat(4,1fr); } .grid-3 { grid-template-columns:repeat(3,1fr); } .grid-2-1 { grid-template-columns:2fr 1fr; } /* ----- 5. Статистика ------------------------------------------------------ */ .stat { display:flex; gap:14px; align-items:flex-start; padding:16px 18px; } .stat-icon { width:38px; height:38px; border-radius:var(--r-md); display:grid; place-items:center; background:var(--accent-weak); color:var(--accent); } .stat .val { font-size:24px; font-weight:600; letter-spacing:-.02em; line-height:1.2; font-variant-numeric:tabular-nums; } .stat .lbl { font-size:12.5px; color:var(--text-3); margin-top:2px; } .stat .delta { display:inline-flex; align-items:center; gap:4px; font-size:12px; margin-top:6px; color:var(--ok-text); } .stat .delta.warn { color:var(--warn-text); } /* ----- 6. Таблицы --------------------------------------------------------- */ .table-wrap { overflow-x:auto; } table.data { width:100%; border-collapse:separate; border-spacing:0; font-size:13.5px; } table.data 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); position:sticky; top:0; z-index:1; white-space:nowrap; } table.data td { padding:11px 14px; border-bottom:1px solid var(--line-soft); vertical-align:middle; } table.data tbody tr { transition:background .1s var(--ease); } table.data tbody tr:hover { background:var(--row-hover); } table.data tbody tr:last-child td { border-bottom:none; } table.data .right { text-align:right; } .cell-main { font-weight:500; } .cell-sub { color:var(--text-3); font-size:12px; margin-top:1px; } .row-actions { display:flex; gap:4px; opacity:0; transition:opacity .12s var(--ease); } tr:hover .row-actions { opacity:1; } .filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:12px 18px; border-bottom:1px solid var(--line-soft); } select, input[type=text], input[type=password], input[type=search] { height:34px; padding:0 10px; font:inherit; 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); } select:focus, input:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } /* ----- 7. Шаги обработки -------------------------------------------------- */ .steps { list-style:none; margin:0; padding:6px 0; } .step { display:flex; gap:14px; padding:16px 18px; position:relative; } .step + .step { border-top:1px solid var(--line-soft); } .step::after { content:""; position:absolute; left:36px; top:52px; bottom:-16px; width:2px; background:var(--line); } .step:last-child::after { display:none; } .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); border:2px solid var(--surface); box-shadow:0 0 0 1px var(--line); z-index:1; } .step-body { flex:1; min-width:0; } .step-title { font-weight:600; font-size:14px; } .step-sub { color:var(--text-3); font-size:12.5px; margin-top:2px; } .step-meta { font-size:12.5px; color:var(--text-2); margin-top:8px; display:flex; align-items:center; gap:7px; flex-wrap:wrap; } .step-actions { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; } .step-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .step.is-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.is-warn { background:linear-gradient(90deg, color-mix(in srgb, var(--warn-50) 75%, transparent), transparent 55%); } .step.is-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.is-error { background:linear-gradient(90deg, color-mix(in srgb, var(--err-50) 75%, transparent), transparent 55%); } .step.is-error .step-mark { background:var(--err-50); color:var(--err-text); } .step.is-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.is-running .step-mark { background:var(--info-50); color:var(--info-text); } .step.is-running .step-mark .ic { animation:spin 1.1s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } } /* ----- 8. Лента событий --------------------------------------------------- */ .feed { list-style:none; margin:0; padding:0; } .feed li { display:flex; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line-soft); } .feed li:last-child { border-bottom:none; } .feed-mark { width:30px; height:30px; border-radius:var(--r-sm); display:grid; place-items:center; flex:0 0 auto; background:var(--fill-idle); color:var(--text-2); } .feed-mark.ok { background:var(--ok-50); color:var(--ok-text); } .feed-mark.warn { background:var(--warn-50); color:var(--warn-text); } .feed-mark.info { background:var(--info-50); color:var(--info-text); } .feed-mark.question { background:var(--accent-weak); color:var(--accent); } .feed-text { font-size:13.5px; } .feed-meta { font-size:12px; color:var(--text-3); margin-top:3px; display:flex; gap:8px; align-items:center; } /* ----- 9. Прочее ---------------------------------------------------------- */ .bar { height:6px; border-radius:var(--r-full); background:var(--fill-idle); overflow:hidden; } .bar > i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--a-600),#8b5cf6); } .person { display:flex; align-items:center; gap:10px; } .person .avatar { width:28px; height:28px; font-size:11px; } .dropzone { border:1.5px dashed var(--line); border-radius:var(--r-md); padding:22px; text-align:center; color:var(--text-3); background:var(--surface-2); transition:border-color .14s var(--ease), background .14s var(--ease); } .dropzone:hover { border-color:var(--accent); background:var(--accent-weak); } .dropzone b { color:var(--text); display:block; font-size:13.5px; margin-top:8px; } .empty { text-align:center; padding:44px 20px; color:var(--text-3); } .empty .ic { width:34px; height:34px; margin-bottom:10px; opacity:.5; } .kv { display:grid; grid-template-columns:auto 1fr; gap:8px 18px; font-size:13.5px; } .kv dt { color:var(--text-3); } .kv dd { margin:0; } .toast { position:fixed; right:24px; bottom:24px; display:flex; gap:10px; align-items:flex-start; padding:12px 14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-3); max-width:360px; z-index:60; } /* ----- 10. Логин ---------------------------------------------------------- */ .auth { min-height:100vh; display:grid; place-items:center; padding:24px; background: radial-gradient(900px 500px at 12% -10%, rgba(99,102,241,.18), transparent 60%), radial-gradient(700px 420px at 105% 110%, rgba(168,85,247,.15), transparent 60%), var(--bg); } .auth-card { width:100%; max-width:390px; padding:30px; } .auth-card .brand { padding:0 0 18px; color:var(--text); } .field { margin-bottom:14px; } .field label { display:block; font-size:12.5px; color:var(--text-2); margin-bottom:6px; } .field input { width:100%; height:38px; } .auth .btn { width:100%; justify-content:center; height:38px; } /* ----- 11. Адаптив -------------------------------------------------------- */ @media (max-width: 1100px) { .grid-4 { grid-template-columns:repeat(2,1fr); } .grid-2-1, .grid-3 { grid-template-columns:1fr; } } @media (max-width: 860px) { .shell { grid-template-columns:1fr; } .sidebar { position:fixed; z-index:50; transform:translateX(-100%); transition:transform .2s var(--ease); width:var(--sidebar-w); } .sidebar.open { transform:none; box-shadow:var(--shadow-3); } .content { padding:16px; } .topbar { padding:0 14px; } .search { display:none; } .grid-4 { grid-template-columns:1fr; } } @media (min-width: 861px) { .burger { display:none; } }