/* ============================================================= Таск Визимо — общая дизайн-система страниц /task и /report. Отдаётся сервером по адресу /task.css (server.cjs читает этот файл с диска на каждый запрос — правки видны после F5, рестарт сервера не нужен). ------------------------------------------------------------- Устройство: один каркас на обе страницы. Страница отличается только акцентом — атрибут data-tool на : tasks — задания (фиолетовый) report — отчёт (бирюзовый) Тема тёмная по умолчанию, светлая переключателем в шапке; выбор хранится в localStorage под ключом fbl-theme. Старый файл лежит в _ui_backup_20260724/task_ui.css. ============================================================= */ :root { color-scheme: dark; --bg: #0a0c12; --bg-grad: radial-gradient(1100px 620px at 10% -10%, #17203c 0%, rgba(23,32,60,0) 58%), radial-gradient(900px 560px at 96% 0%, #1d1731 0%, rgba(29,23,49,0) 55%), linear-gradient(180deg, #0d1018, #0a0c12 55%); --panel: #12151f; --panel-2: #171b27; --raise: rgba(255,255,255,.035); --raise-hi: rgba(255,255,255,.06); --line: #232838; --line-soft: #1a1e2b; --txt: #e8ecf6; --txt-dim: #c3cadb; --muted: #949db3; --muted-2: #6b7387; --accent: #8b7bff; --accent-soft: rgba(139,123,255,.16); --accent-line: rgba(139,123,255,.38); --on-accent: #0a0718; --ok: #35d48a; --ok-soft: rgba(53,212,138,.14); --warn: #f5b544; --warn-soft: rgba(245,181,68,.14); --danger: #ff7a91; --danger-soft: rgba(255,122,145,.13); --radius: 16px; --shadow: 0 24px 60px -34px rgba(0,0,0,.9); --shadow-sm: 0 10px 26px -18px rgba(0,0,0,.8); --mono: ui-monospace, "JetBrains Mono", "SF Mono", Consolas, monospace; --sans: "Segoe UI Variable Display", "Segoe UI", Inter, system-ui, -apple-system, Roboto, Arial, sans-serif; } [data-tool="tasks"] { --accent:#8b7bff; --accent-soft:rgba(139,123,255,.16); --accent-line:rgba(139,123,255,.38); --on-accent:#0a0718; } [data-tool="report"] { --accent:#2fd0c4; --accent-soft:rgba(47,208,196,.15); --accent-line:rgba(47,208,196,.36); --on-accent:#041614; } [data-theme="light"] { color-scheme: light; --bg: #f2f5fa; --bg-grad: radial-gradient(1100px 620px at 10% -10%, #dfe9ff 0%, rgba(223,233,255,0) 55%), radial-gradient(900px 560px at 96% 0%, #ffe7f0 0%, rgba(255,231,240,0) 52%), linear-gradient(180deg, #f8fafe, #f0f3f9 60%); --panel: #ffffff; --panel-2: #f8fafd; --raise: #ffffff; --raise-hi: #f4f7fc; --line: #e2e7f0; --line-soft: #eaeef5; --txt: #161c2b; --txt-dim: #333c52; --muted: #5f6a80; --muted-2: #8d97ab; --shadow: 0 18px 44px -28px rgba(24,40,80,.45); --shadow-sm: 0 8px 20px -14px rgba(24,40,80,.4); --on-accent: #ffffff; --ok:#12a566; --ok-soft:rgba(18,165,102,.1); --warn:#b7791f; --warn-soft:rgba(183,121,31,.12); --danger:#d93f57; --danger-soft:rgba(217,63,87,.09); } [data-theme="light"][data-tool="tasks"] { --accent:#6a4df0; --accent-soft:rgba(106,77,240,.1); --accent-line:rgba(106,77,240,.3); } [data-theme="light"][data-tool="report"] { --accent:#0f9a8d; --accent-soft:rgba(15,154,141,.1); --accent-line:rgba(15,154,141,.3); } * { box-sizing: border-box; } html, body { margin:0; padding:0; } body { background: var(--bg-grad) fixed, var(--bg); color: var(--txt); font-family: var(--sans); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; min-height: 100vh; } a { color: inherit; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } button:disabled { cursor: not-allowed; opacity: .45; } h1,h2,h3,p { margin: 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } .num-t { font-variant-numeric: tabular-nums; } .spacer { flex: 1 1 auto; } /* ------------------------------------------------------------- шапка */ .top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 11px max(18px, 2.4vw); background: rgba(10,12,18,.78); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--line-soft); } [data-theme="light"] .top { background: rgba(248,250,254,.82); } .ident { display:flex; align-items:center; gap:11px; min-width:0; text-decoration:none; } .mark { width:34px; height:34px; border-radius:10px; flex:none; display:grid; place-items:center; background: linear-gradient(150deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #7b8cff)); color: var(--on-accent); box-shadow: 0 8px 22px -10px var(--accent); } .mark svg { width:19px; height:19px; } .ident h1 { font-size:15.5px; font-weight:660; white-space:nowrap; } .ident p { font-size:11.5px; color:var(--muted-2); white-space:nowrap; } .seg { display:flex; gap:2px; padding:3px; border-radius:12px; background:var(--raise); border:1px solid var(--line-soft); } .seg button { border:0; background:transparent; color:var(--muted); border-radius:9px; padding:7px 14px; font-size:12.5px; font-weight:600; white-space:nowrap; transition: background .15s, color .15s; } .seg button:hover { color: var(--txt); background: var(--raise-hi); } .seg button[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-line); } .seg a { text-decoration:none; } .pill { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; padding:6px 12px; border-radius:999px; font-size:12px; font-weight:600; background: var(--raise); border:1px solid var(--line-soft); color: var(--muted); } .pill b { color: var(--txt); font-weight:650; } .dot { width:7px; height:7px; border-radius:50%; background: currentColor; flex:none; } .icon-btn { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none; background: var(--raise); border:1px solid var(--line-soft); color: var(--muted); transition:.16s; } .icon-btn:hover { color: var(--txt); background: var(--raise-hi); border-color: var(--line); } .icon-btn svg { width:17px; height:17px; } /* шаги: 1 строки → 2 ресёрч → 3 публикация */ .steps { display:flex; align-items:center; gap:6px; } .step { display:flex; align-items:center; gap:9px; padding:6px 12px 6px 8px; border-radius:10px; font-size:12.5px; color: var(--muted-2); white-space:nowrap; } .step b { width:20px; height:20px; border-radius:6px; display:grid; place-items:center; font-size:11px; font-weight:700; background: var(--raise); border:1px solid var(--line-soft); color: var(--muted-2); } .step.done { color: var(--muted); } .step.done b { background: var(--ok-soft); border-color: transparent; color: var(--ok); } .step.now { color: var(--txt); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); } .step.now b { background: var(--accent); border-color: transparent; color: var(--on-accent); } .step-line { width:16px; height:1px; background: var(--line); flex:none; } /* ------------------------------------------------------------- каркас */ .wrap { max-width: 1420px; margin: 0 auto; padding: 20px max(18px,2.4vw) 110px; } .cols { display:grid; grid-template-columns: minmax(0,1fr) 356px; gap: 18px; align-items:start; } .side { display:grid; gap:14px; position: sticky; top: 74px; } @media (max-width: 1180px) { .cols { grid-template-columns: minmax(0,1fr); } .side { position:static; } } .card { background: var(--panel); border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .card + .card { margin-top: 14px; } .card-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding: 13px 17px; border-bottom:1px solid var(--line-soft); } .card-head h2 { font-size:13.5px; font-weight:650; } .card-head .sub { font-size:11.5px; color: var(--muted-2); } .card-body { padding: 15px 17px; } .card-body.tight { padding: 12px 14px; } .eyebrow { font-size:10px; font-weight:730; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); } .hint { font-size:11.5px; color: var(--muted-2); line-height:1.5; } .sep { height:1px; background: var(--line-soft); margin: 13px 0; } /* ------------------------------------------------------------- кнопки */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; height:38px; padding:0 16px; border-radius:11px; font-size:13px; font-weight:620; background: var(--raise); border:1px solid var(--line); color: var(--txt-dim); transition: transform .14s, background .14s, border-color .14s, box-shadow .14s; } .btn:hover:not(:disabled) { background: var(--raise-hi); transform: translateY(-1px); } .btn svg { width:15px; height:15px; } .btn-primary { background: var(--accent); border-color: transparent; color: var(--on-accent); box-shadow: 0 10px 26px -12px var(--accent); } /* Фон возвращаем явно: .btn:hover выше по весу селектора, и без этого главная кнопка при наведении гасла до серой подложки с тёмным текстом. */ .btn-primary:hover:not(:disabled) { background: var(--accent); filter: brightness(1.07); box-shadow: 0 14px 30px -12px var(--accent); } .btn-primary:active:not(:disabled) { filter: brightness(.96); transform: translateY(0); } .btn-ghost { background: transparent; border-color: transparent; color: var(--muted); } .btn-ghost:hover:not(:disabled) { background: var(--raise); color: var(--txt); } .btn-lg { height:44px; padding:0 20px; font-size:14px; border-radius:12px; } .btn-sm { height:32px; padding:0 12px; font-size:12.5px; border-radius:9px; } .btn-xs { height:28px; padding:0 10px; font-size:12px; border-radius:8px; } .btn-block { width:100%; } .btn-dash { border-style: dashed; color: var(--muted); background: transparent; } .btn-dash:hover:not(:disabled) { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); } /* ------------------------------------------------------------- поля */ .inp { height:38px; width:100%; padding:0 12px; border-radius:10px; background: var(--panel-2); border:1px solid var(--line); color: var(--txt); outline:none; transition: border-color .14s, box-shadow .14s; } .inp::placeholder { color: var(--muted-2); } .inp:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); } .inp:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .inp-sm { height:32px; font-size:13px; } textarea.inp { height:auto; padding:11px 13px; resize:vertical; line-height:1.55; } select.inp { appearance:none; padding-right:30px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 15px) 16px, calc(100% - 10px) 16px; background-size: 5px 5px; background-repeat:no-repeat; } input[type="date"].inp { padding-right:8px; } [data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator, :root:not([data-theme="light"]) input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.7); } .field { display:grid; gap:6px; min-width:0; } /* Только первый span — подпись. Второй span это обёртка поля (.src), и если на неё попадут стили подписи, поле унаследует 10 px капсом. */ .field > span:first-child { font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color: var(--muted-2); } .field > span:first-child em { font-style:normal; text-transform:none; letter-spacing:0; font-weight:600; } .two { display:grid; grid-template-columns: 1fr 1fr; gap:12px; } .three { display:grid; grid-template-columns: 1.5fr 1fr 1fr; gap:12px; } @media (max-width:760px) { .two, .three { grid-template-columns: 1fr; } } /* маркер источника значения: полоска слева, а не заливка поля */ .src { position:relative; display:block; font-size:14px; font-weight:400; letter-spacing:normal; text-transform:none; } .src::before { content:""; position:absolute; left:0; top:7px; bottom:7px; width:2px; border-radius:2px; z-index:1; } .src-ai::before { background: var(--ok); } .src-you::before { background: var(--accent); } .src > .inp { padding-left:14px; } .chips { display:flex; flex-wrap:wrap; gap:7px; } .chip { display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 11px; border-radius:9px; font-size:12.5px; font-weight:600; white-space:nowrap; background: var(--raise); border:1px solid var(--line-soft); color: var(--muted); transition:.14s; } .chip:hover { color: var(--txt); border-color: var(--line); } .chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); } .switch { display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-size:12.5px; color: var(--muted); } .switch input { position:absolute; opacity:0; pointer-events:none; } .switch .track { width:38px; height:22px; border-radius:999px; background: var(--line); position:relative; transition:.18s; flex:none; } .switch .track::after { content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:.18s; } .switch input:checked + .track { background: var(--accent); } .switch input:checked + .track::after { transform: translateX(16px); } /* ------------------------------------------------------- карточка задания */ .task { border:1px solid var(--line); border-radius:14px; background: var(--panel); overflow:hidden; transition: border-color .15s; } .task + .task { margin-top:10px; } .task:hover { border-color: color-mix(in srgb, var(--accent) 26%, var(--line)); } .task-h { display:flex; align-items:center; gap:10px; padding:10px 12px; background: var(--panel-2); border-bottom:1px solid var(--line-soft); } .task-n { width:22px; height:22px; border-radius:7px; display:grid; place-items:center; flex:none; font-size:11px; font-weight:700; background: var(--raise); color: var(--muted-2); border:1px solid var(--line-soft); } .task-title { flex:1; min-width:0; height:32px; padding:0 10px; border-radius:8px; background: transparent; border:1px solid transparent; color: var(--txt); font-size:13px; font-weight:620; outline:none; } .task-title::placeholder { color: var(--muted-2); font-weight:500; } .task-title:hover { border-color: var(--line); } .task-title:focus { background: var(--panel); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .task-b { padding:13px; display:grid; gap:12px; } .row-x { width:30px; height:30px; border-radius:8px; border:1px solid transparent; background:transparent; color: var(--muted-2); font-size:16px; line-height:1; flex:none; } .row-x:hover:not(:disabled) { color: var(--danger); background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 26%, transparent); } /* свёрнутые параметры: значения видно чипами, редактирование по раскрытию */ .params-box { border:1px solid var(--line-soft); border-radius:12px; background: var(--panel-2); } .params-box > summary { list-style:none; cursor:pointer; padding:9px 11px; display:flex; align-items:center; gap:9px; flex-wrap:wrap; } .params-box > summary::-webkit-details-marker { display:none; } .params-box > summary::before { content:"▸"; color: var(--muted-2); font-size:11px; flex:none; } .params-box[open] > summary::before { content:"▾"; } .params-box > summary:hover { background: var(--raise); border-radius:12px; } .params-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap:11px; padding:4px 11px 12px; } .params { display:flex; flex-wrap:wrap; gap:6px; align-items:center; min-width:0; } .param { display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 9px; border-radius:8px; font-size:11.5px; background: var(--raise); border:1px solid var(--line-soft); color: var(--muted); white-space:nowrap; } .param em { font-style:normal; color: var(--txt-dim); font-weight:600; font-variant-numeric: tabular-nums; } .param.edited { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); } .param.edited em { color: var(--accent); } .param.ai { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 26%, transparent); color: var(--ok); } .param.ai em { color: var(--ok); } .legend { display:flex; gap:16px; flex-wrap:wrap; font-size:11.5px; color: var(--muted-2); } .legend i { display:inline-block; width:8px; height:8px; border-radius:3px; margin-right:6px; vertical-align:1px; } .drop { border:1.5px dashed var(--line); border-radius:13px; padding:15px; display:flex; align-items:center; gap:14px; background: var(--panel-2); transition:.15s; flex-wrap:wrap; } .drop.over { border-color: var(--accent); background: var(--accent-soft); } .drop-ic { width:42px; height:42px; border-radius:11px; display:grid; place-items:center; flex:none; background: var(--raise); border:1px solid var(--line-soft); color: var(--muted); } .drop-ic svg { width:20px; height:20px; } .drop strong { display:block; font-size:13px; } .drop .files { font-size:11.5px; color: var(--muted-2); word-break:break-word; } /* ------------------------------------------------------------- проверки */ .checks { display:grid; gap:10px; } .check { display:flex; align-items:flex-start; gap:10px; font-size:12.5px; color: var(--muted); } .check .dot { margin-top:6px; } .check.ok { color: var(--ok); } .check.bad { color: var(--danger); } .check.mute { color: var(--muted-2); } .check span { color: var(--txt-dim); } .kv { display:grid; gap:11px; margin:0; } .kv > div { display:flex; justify-content:space-between; gap:14px; font-size:12.5px; } .kv dt { color: var(--muted); } .kv dd { margin:0; color: var(--txt-dim); font-weight:600; text-align:right; font-variant-numeric: tabular-nums; } /* лента событий / что сделал ИИ */ .feed { display:grid; gap:2px; max-height:300px; overflow:auto; } .feed-item { display:flex; gap:10px; padding:8px; border-radius:10px; } .feed-item:hover { background: var(--raise); } .feed-ic { width:20px; height:20px; border-radius:6px; flex:none; display:grid; place-items:center; font-size:11px; font-weight:800; margin-top:1px; } .feed-ic.on { background: var(--ok-soft); color: var(--ok); } .feed-ic.off { background: var(--danger-soft); color: var(--danger); } .feed-ic.idle { background: var(--raise); color: var(--muted-2); } .feed-main { min-width:0; flex:1; } .feed-title { font-size:12.5px; color: var(--txt-dim); } .feed-meta { font-size:11px; color: var(--muted-2); } /* консоль хода работы */ .log { font-family: var(--mono); font-size:11.5px; line-height:1.65; white-space:pre-wrap; word-break:break-word; max-height:220px; overflow:auto; padding:11px 13px; border-radius:11px; background: var(--panel-2); border:1px solid var(--line-soft); color: var(--muted); } .log a { color: var(--accent); } /* ------------------------------------------------------------- нижняя панель */ .dock { position: fixed; left:0; right:0; bottom:0; z-index:35; display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding: 11px max(18px,2.4vw); background: rgba(10,12,18,.84); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top:1px solid var(--line-soft); } [data-theme="light"] .dock { background: rgba(248,250,254,.88); } .dock .note { font-size:11.5px; color: var(--muted-2); } .dock .note b { color: var(--txt-dim); font-weight:620; } /* ------------------------------------------------------------- отчёт */ .total { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; } .total .big { font-size:34px; font-weight:720; letter-spacing:-.03em; font-variant-numeric: tabular-nums; } .total .cur { font-size:20px; color: var(--muted); } .offer { border-radius:13px; border:1px solid var(--line-soft); background: var(--panel); overflow:hidden; } .offer + .offer { margin-top:8px; } .offer.sel { border-color: var(--accent-line); background: var(--accent-soft); } .offer-h { display:flex; align-items:center; gap:12px; padding:11px 13px; flex-wrap:wrap; } .offer-name { font-size:13.5px; font-weight:640; border:1px solid transparent; background:transparent; border-radius:8px; padding:5px 9px; min-width:140px; flex:1 1 auto; outline:none; color: var(--txt); } .offer-name:hover { border-color: var(--line); } .offer-name:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--panel-2); } .offer-sum { font-size:15px; font-weight:700; font-variant-numeric: tabular-nums; white-space:nowrap; flex:none; } .offer-share { font-size:11px; color: var(--muted-2); font-variant-numeric: tabular-nums; flex:none; } .offer-meta { font-size:11px; color: var(--muted-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:0 1 auto; min-width:0; } .offer-meta b { color: var(--txt-dim); font-weight:650; } .cab-badge { display:inline-block; background: var(--raise); color: var(--muted); border:1px solid var(--line-soft); border-radius:6px; padding:1px 6px; font-size:10.5px; margin-left:4px; } .bar { height:4px; background: var(--line-soft); } .bar i { display:block; height:100%; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 45%, transparent)); } .offer-body { display:none; padding:4px 14px 12px 40px; border-top:1px solid var(--line-soft); background: var(--panel-2); } .offer-body.open { display:block; } .camp { display:flex; gap:12px; align-items:center; padding:6px 0; font-size:12px; border-bottom:1px dashed var(--line-soft); } .camp:last-child { border-bottom:0; } .camp .s { width:76px; text-align:right; font-variant-numeric: tabular-nums; font-weight:650; flex:none; } .camp .n { flex:1; color: var(--muted); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .camp .c { font-size:10.5px; color: var(--muted-2); flex:none; } .cbx { width:16px; height:16px; accent-color: var(--accent); flex:none; } .empty { text-align:center; color: var(--muted-2); padding:28px; font-size:13px; } /* список кабинетов */ .cab-tools { display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin-bottom:10px; } .cab-list { max-height:280px; overflow:auto; border:1px solid var(--line-soft); border-radius:12px; background: var(--panel-2); padding:5px; } .cab-item { display:flex; align-items:center; gap:10px; padding:6px 9px; border-radius:8px; cursor:pointer; font-size:12.5px; color: var(--txt-dim); } .cab-item:hover { background: var(--raise); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } } /* ------------------------------------------------------- голосовой ввод ТЗ */ /* Кнопка микрофона в состоянии записи: красная, с пульсирующей точкой — чтобы забытая включённой запись была видна боковым зрением. */ #mic.rec { border-color: color-mix(in srgb, var(--danger) 50%, transparent); color: var(--danger); background: var(--danger-soft); } #mic.rec svg { animation: mic-pulse 1.1s ease-in-out infinite; } @keyframes mic-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }