/* ============================================================ Задачник — тёмная тема по умолчанию, светлая по переключателю. Палитра живёт в токенах; [data-theme] на выбирает набор. ============================================================ */ :root, :root[data-theme="dark"] { --bg: #0a0a0e; --bg-soft: #08080b; --surface: #141419; --surface-2: #1c1c23; --surface-3: #26262f; --border: #24242c; --border-soft:#1a1a20; --text: #ececef; --text-dim: #b4b4bf; --muted: #7c7c8a; --accent: #7c6cf5; --accent-ink: #ffffff; --accent-soft: rgba(124, 108, 245, .16); --green: #3ddb9a; --green-soft: rgba(61, 219, 154, .13); --red: #f4626f; --red-soft: rgba(244, 98, 111, .13); --amber: #f5c451; --amber-soft: rgba(245, 196, 81, .13); --violet: #7c6cf5; --violet-soft:rgba(124, 108, 245, .16); --cyan: #3fc9e6; --cyan-soft: rgba(63, 201, 230, .13); --shadow: 0 12px 36px rgba(0, 0, 0, .55); --shadow-sm: 0 2px 10px rgba(0, 0, 0, .4); --radius: 14px; --radius-sm: 10px; } :root[data-theme="light"] { --bg: #f3f5fa; --bg-soft: #eef1f7; --surface: #ffffff; --surface-2: #f6f8fc; --surface-3: #eef2f8; --border: #e0e6ef; --border-soft:#eaeef5; --text: #0f1726; --text-dim: #35405a; --muted: #6b7688; --accent: #6a54ef; --accent-ink: #ffffff; --accent-soft: rgba(106, 84, 239, .10); --green: #0f9d6b; --green-soft: rgba(15, 157, 107, .10); --red: #d94a5c; --red-soft: rgba(217, 74, 92, .10); --amber: #b7791f; --amber-soft: rgba(183, 121, 31, .12); --violet: #6a54ef; --violet-soft:rgba(106, 84, 239, .10); --cyan: #0e9bb8; --cyan-soft: rgba(14, 155, 184, .10); --shadow: 0 10px 30px rgba(15, 23, 38, .10); --shadow-sm: 0 1px 4px rgba(15, 23, 38, .08); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .sprite { display: none; } .icon { width: 18px; height: 18px; flex: none; vertical-align: -0.15em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } /* ---------------- layout ---------------- */ .shell { display: flex; min-height: 100vh; } .nav-toggle { display: none; } .nav-scrim { display: none; } .sidebar { width: 252px; flex: none; background: var(--bg-soft); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; padding: 18px 14px 14px; } .brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 22px; font-size: 21px; font-weight: 700; letter-spacing: -.02em; } .brand-accent { color: var(--accent); } .brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); } .brand-mark .icon { width: 20px; height: 20px; stroke-width: 2; } .nav { display: flex; flex-direction: column; gap: 3px; flex: 1; overflow-y: auto; } .nav-item { display: flex; align-items: center; gap: 13px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text-dim); font-size: 14.5px; transition: background .12s, color .12s; } .nav-item .icon { width: 19px; height: 19px; } .nav-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .nav-item.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .nav-item.on .icon { stroke-width: 2; } .nav-text { flex: 1; } .count { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--surface-3); color: var(--text-dim); font-size: 12px; font-weight: 600; text-align: center; } .nav-item.on .count { background: var(--accent); color: var(--accent-ink); } .sidebar-foot { border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; } .theme-btn { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-dim); font: inherit; font-size: 14.5px; cursor: pointer; } .theme-btn:hover { background: var(--surface-2); color: var(--text); } .theme-btn > span { display: flex; align-items: center; gap: 11px; } :root[data-theme="dark"] .only-light { display: none; } :root[data-theme="light"] .only-dark { display: none; } .me { display: flex; align-items: center; gap: 10px; padding: 6px 8px; } .avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 650; } .me-name { flex: 1; font-size: 14px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; } .icon-btn { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; } .icon-btn:hover { background: var(--surface-2); color: var(--text); } .content { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 14px 26px; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-soft); } .page-title { flex: 1; margin: 0; font-size: 20px; font-weight: 640; letter-spacing: -.015em; } .topbar-actions { display: flex; gap: 8px; } .burger { display: none; } .main { padding: 22px 26px 60px; max-width: 1180px; width: 100%; } .page-hint { margin: 0 0 18px; color: var(--muted); font-size: 14px; } /* ---------------- controls ---------------- */ .input { padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); font: inherit; min-width: 0; } .input::placeholder { color: var(--muted); } .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } textarea.input { resize: vertical; } .btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-dim); font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; transition: background .12s, color .12s, border-color .12s; } .btn:hover { background: var(--surface-3); color: var(--text); text-decoration: none; } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 550; } .btn-primary:hover { background: color-mix(in srgb, var(--accent) 85%, #000); color: var(--accent-ink); } .btn-ghost { background: transparent; border-color: transparent; color: var(--muted); } .btn-ghost:hover { background: var(--surface-2); color: var(--text); } .btn-danger:hover { background: var(--red-soft); color: var(--red); } .btn-danger-solid { background: var(--red); border-color: var(--red); color: #fff; justify-content: center; } .btn-danger-solid:hover { background: color-mix(in srgb, var(--red) 85%, #000); color: #fff; } .btn-tiny { padding: 5px 9px; font-size: 13px; } .btn-amber { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 40%, var(--border)); } .btn-amber:hover { background: var(--amber-soft); color: var(--amber); } .btn-red { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, var(--border)); } .btn-red:hover { background: var(--red-soft); color: var(--red); } .btn-wide { justify-content: center; width: 100%; padding: 11px; } .picker { display: flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--muted); } .picker select, .picker input { border: 0; background: transparent; color: var(--text); font: inherit; padding: 9px 0; outline: none; } .picker:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* ---------------- cards ---------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 18px; } .card-title { display: flex; align-items: center; gap: 9px; margin: 0 0 15px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .card-title .icon { color: var(--muted); width: 16px; height: 16px; } .card-foot { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border-soft); font-size: 13px; color: var(--muted); } .card-foot .icon { width: 14px; height: 14px; vertical-align: -2px; } .card.narrow { max-width: 660px; } .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 18px; } /* ---------------- dashboard ---------------- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 12px; margin-bottom: 18px; } .stat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 2px 12px; padding: 15px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); transition: border-color .12s, transform .12s; } .stat:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-1px); } .stat-ic { grid-row: 1 / 3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; } .stat-ic .icon { width: 20px; height: 20px; } .ic-blue { background: var(--accent-soft); color: var(--accent); } .ic-red { background: var(--red-soft); color: var(--red); } .ic-amber { background: var(--amber-soft); color: var(--amber); } .ic-green { background: var(--green-soft); color: var(--green); } .ic-violet { background: var(--violet-soft); color: var(--violet); } .ic-cyan { background: var(--cyan-soft); color: var(--cyan); } .stat-num { font-size: 22px; font-weight: 680; line-height: 1.15; letter-spacing: -.02em; } .stat-cap { font-size: 12.5px; color: var(--muted); } .stat-alarm { border-color: color-mix(in srgb, var(--red) 45%, var(--border)); } .chart { display: flex; align-items: flex-end; gap: 8px; height: 132px; padding-top: 6px; } .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; gap: 5px; } .bar-val { font-size: 12px; font-weight: 600; color: var(--muted); height: 15px; } .bar { width: 100%; min-height: 3px; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 55%, transparent)); margin-top: auto; } .bar-day { font-size: 11px; color: var(--muted); } .prio-rows { display: flex; flex-direction: column; gap: 11px; } .prio-row { display: grid; grid-template-columns: 84px 1fr 28px; align-items: center; gap: 10px; } .prio-name { font-size: 13.5px; color: var(--text-dim); display: flex; align-items: center; gap: 7px; } .prio-name::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .prio-dot-high { color: var(--red); } .prio-dot-normal { color: var(--amber); } .prio-dot-low { color: var(--green); } .meter { display: block; height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; } .meter-fill { display: block; height: 100%; border-radius: 999px; min-width: 0; } .fill-high { background: var(--red); } .fill-normal { background: var(--amber); } .fill-low { background: var(--green); } .prio-n { font-size: 13.5px; text-align: right; } .mini { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .mini-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); font-size: 14px; } .mini-row:last-child { border-bottom: 0; } .mini-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); } .mini-title.struck { text-decoration: line-through; color: var(--muted); } .mini-date { font-size: 12.5px; color: var(--muted); } .mini-date.overdue { color: var(--red); font-weight: 600; } .mini-ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; } .mini-ic .icon { width: 14px; height: 14px; } .mini-ic.ok { background: var(--green-soft); color: var(--green); } .mini-ic.no { background: var(--red-soft); color: var(--red); } .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .dot-high { background: var(--red); } .dot-normal { background: var(--amber); } .dot-low { background: var(--green); } .muted-block { color: var(--muted); font-size: 14px; margin: 0; padding: 10px 0; } /* ---------------- composer & toolbar ---------------- */ .new-task { display: flex; flex-wrap: wrap; gap: 8px; } .new-task .grow { flex: 1 1 260px; } .new-task .full { flex: 1 1 100%; } .toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .search { display: flex; gap: 8px; flex: 1 1 320px; } .search-field { display: flex; align-items: center; gap: 8px; flex: 1; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--muted); } .search-field .input { border: 0; background: transparent; flex: 1; padding: 9px 0; } .search-field .input:focus { box-shadow: none; } .search-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .chips { display: flex; gap: 6px; flex-wrap: wrap; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 13.5px; } .chip .icon { width: 14px; height: 14px; } .chip:hover { color: var(--text); text-decoration: none; } .chip-on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .chip-high.chip-on { border-color: var(--red); color: var(--red); background: var(--red-soft); } .chip-normal.chip-on { border-color: var(--amber); color: var(--amber); background: var(--amber-soft); } .chip-low.chip-on { border-color: var(--green); color: var(--green); background: var(--green-soft); } .chip-todo.chip-on { border-color: var(--cyan); color: var(--cyan); background: var(--cyan-soft); } .chip-progress.chip-on { border-color: var(--violet); color: var(--violet); background: var(--violet-soft); } /* ---------------- task list ---------------- */ .tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .task { display: flex; align-items: flex-start; gap: 13px; padding: 14px 15px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color .12s, box-shadow .12s; } .task:hover { box-shadow: var(--shadow-sm); } .task.status-in_progress { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); } .is-closed { opacity: .7; } .is-closed .task-title { text-decoration: line-through; color: var(--muted); } .tick { display: flex; } .check { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border: 1.5px solid var(--border); border-radius: 7px; background: transparent; color: transparent; cursor: pointer; padding: 0; transition: all .12s; } .check .icon { width: 15px; height: 15px; stroke-width: 2.5; } .check:hover { border-color: var(--green); color: var(--green); background: var(--green-soft); } .check-static { cursor: default; border-color: var(--green); background: var(--green-soft); color: var(--green); } .check-rejected { border-color: var(--red); background: var(--red-soft); color: var(--red); } .task-body { flex: 1; min-width: 0; } .task-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .task-title { font-weight: 550; word-break: break-word; } .task-desc { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; white-space: pre-wrap; word-break: break-word; } .task-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; align-items: center; } .prio-text { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; } .prio-text .icon { width: 13px; height: 13px; } .prio-t-high { color: var(--red); } .prio-t-normal { color: var(--amber); } .prio-t-low { color: var(--green); } .tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); } .tag .icon { width: 13px; height: 13px; } .tag-high { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, var(--border)); background: var(--red-soft); } .tag-normal { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 40%, var(--border)); background: var(--amber-soft); } .tag-low { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, var(--border)); background: var(--green-soft); } .tag-overdue { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, var(--border)); background: var(--red-soft); font-weight: 600; } .tag-people { color: var(--muted); } .badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; } .badge .icon { width: 13px; height: 13px; } .badge-done { background: var(--green-soft); color: var(--green); } .badge-rejected { background: var(--red-soft); color: var(--red); } .badge-deferred { background: var(--amber-soft); color: var(--amber); } .badge-todo { background: var(--surface-3); color: var(--muted); } .badge-progress { background: var(--surface-3); color: var(--text-dim); } .reason { display: flex; gap: 8px; margin: 9px 0 0; padding: 9px 11px; border-radius: var(--radius-sm); background: var(--red-soft); border: 1px solid color-mix(in srgb, var(--red) 30%, transparent); color: var(--text-dim); font-size: 13.5px; } .reason .icon { color: var(--red); margin-top: 2px; } .task-actions { display: flex; gap: 3px; align-items: flex-start; flex-wrap: wrap; } .task-actions .lbl { display: none; } @media (min-width: 1100px) { .task-actions .lbl { display: inline; } } /* popovers for «отложить» / «отклонить» — no JS needed */ .pop { position: relative; } .pop > summary { list-style: none; } .pop > summary::-webkit-details-marker { display: none; } .pop[open] > summary { background: var(--surface-3); color: var(--text); } .pop-body { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 280px; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .pop-form { display: flex; flex-direction: column; gap: 9px; } .pop-title { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted); } .quick { display: flex; gap: 6px; } .quick .btn { flex: 1; justify-content: center; } .pop-row { display: flex; gap: 6px; } .pop-row .input { flex: 1; } .clear { margin-top: 18px; display: flex; justify-content: center; } .empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 56px 20px; color: var(--muted); text-align: center; } .empty-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--surface-2); } .empty-ic .icon { width: 24px; height: 24px; } .empty p { margin: 0; font-size: 14.5px; } /* ---------------- forms ---------------- */ .stack { display: flex; flex-direction: column; gap: 14px; } .row { display: flex; gap: 12px; flex-wrap: wrap; } .row-end { justify-content: flex-end; } .field { display: flex; flex-direction: column; gap: 6px; } .row > .field { flex: 1 1 170px; } .field > span { font-size: 12.5px; font-weight: 550; color: var(--muted); } .edit-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--border-soft); } .edit-authors { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); } .edit-authors b { color: var(--text-dim); font-weight: 600; } .flash { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 14px; border: 1px solid var(--red); color: var(--red); background: var(--red-soft); } .flash-ok { border-color: var(--green); color: var(--green); background: var(--green-soft); } /* ---------------- login ---------------- */ .auth { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(760px 380px at 50% -8%, var(--accent-soft), transparent 70%), var(--bg); } .auth-card { width: 100%; max-width: 388px; padding: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); } .auth-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; font-size: 19px; font-weight: 650; } .auth-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--border-soft); color: var(--muted); font-size: 13px; } /* ---------------- segmented priority picker ---------------- */ .seg { display: flex; gap: 6px; flex-wrap: wrap; } .seg-item { flex: 1 1 110px; } .seg-item input { position: absolute; opacity: 0; pointer-events: none; } .seg-item > span { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--muted); font-size: 14px; cursor: pointer; transition: all .12s; } .seg-item > span:hover { color: var(--text); border-color: var(--muted); } .seg-item input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-soft); } .seg-high input:checked + span { border-color: var(--red); color: var(--red); background: var(--red-soft); } .seg-normal input:checked + span { border-color: var(--amber); color: var(--amber); background: var(--amber-soft); } .seg-low input:checked + span { border-color: var(--green); color: var(--green); background: var(--green-soft); } /* ---------------- assignee picker ---------------- */ .people { display: flex; flex-wrap: wrap; gap: 6px; } .person input { position: absolute; opacity: 0; pointer-events: none; } .person-body { display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 7px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text-dim); font-size: 14px; cursor: pointer; transition: all .12s; } .person-body:hover { border-color: var(--muted); color: var(--text); } .person input:checked + .person-body { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } .person input:focus-visible + .person-body { box-shadow: 0 0 0 3px var(--accent-soft); } .avatar-sm { width: 24px; height: 24px; font-size: 11px; } .person-name { font-weight: 500; } .away-tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; background: var(--amber-soft); color: var(--amber); font-size: 11.5px; font-weight: 600; } .away-tag .icon { width: 12px; height: 12px; } .field > span { display: flex; align-items: center; gap: 6px; } .field > span .icon { width: 14px; height: 14px; } .field-narrow { max-width: 220px; flex: 0 0 220px; } /* ---------------- dashboard: KPI row & facts ---------------- */ .stats-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; margin-bottom: 18px; } .kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); } .kpi-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; margin-bottom: 3px; } .kpi-ic .icon { width: 15px; height: 15px; } .kpi-num { font-size: 19px; font-weight: 680; letter-spacing: -.02em; line-height: 1.1; } .kpi-cap { font-size: 11.5px; color: var(--muted); } .facts { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--border-soft); } .facts li { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 13.5px; color: var(--muted); } .facts li .icon { width: 15px; height: 15px; } .facts li span { flex: 1; } .facts li b { color: var(--text); font-weight: 650; } .prio-name .icon { width: 14px; height: 14px; } .prio-name::before { display: none; } .prio-row { grid-template-columns: 108px 1fr 28px; } .muted-block { display: flex; align-items: center; gap: 8px; } .muted-block .icon { width: 15px; height: 15px; } .muted-inline { color: var(--muted); } /* ---------------- vacations ---------------- */ .vacation-banner { display: flex; align-items: center; gap: 10px; padding: 11px 14px; margin-bottom: 16px; border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); background: var(--amber-soft); color: var(--amber); font-size: 14px; } .vacation-banner:hover { text-decoration: none; filter: brightness(1.08); } .vacation-banner span { flex: 1; } .vacation-banner b { font-weight: 650; } .vac-active, .vac-next { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .vac-active { border-color: color-mix(in srgb, var(--amber) 45%, var(--border)); } .vac-active-head, .vac-next { display: flex; align-items: center; gap: 14px; } .vac-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--amber-soft); color: var(--amber); flex: none; } .vac-ic .icon { width: 24px; height: 24px; } .vac-ic-soft { background: var(--accent-soft); color: var(--accent); } .vac-title { margin: 0; font-size: 16px; font-weight: 640; } .vac-sub { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); } .vac-list { list-style: none; margin: 0; padding: 0; } .vac-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 11px 0; border-bottom: 1px solid var(--border-soft); font-size: 14px; } .vac-row:last-child { border-bottom: 0; } .vac-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; } .vac-active-row .vac-dot { background: var(--amber); } .vac-row.vac-active .vac-dot { background: var(--amber); } .vac-row.vac-planned .vac-dot { background: var(--accent); } .vac-row.vac-finished { opacity: .72; } .vac-range { font-weight: 550; font-variant-numeric: tabular-nums; } .vac-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); } .vac-state .icon { width: 14px; height: 14px; } .vac-row.vac-active .vac-state { color: var(--amber); font-weight: 600; } .vac-row.vac-planned .vac-state { color: var(--accent); } .vac-comment { flex: 1; color: var(--muted); font-size: 13px; min-width: 120px; } .vac-actions { display: flex; gap: 4px; margin-left: auto; } .btn-new { justify-content: center; margin-bottom: 16px; } /* ---------------- donut chart ---------------- */ .donut-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 4px 0 2px; } .donut { width: 148px; height: 148px; flex: none; transform: rotate(-90deg); } .donut-hole { fill: none; stroke: var(--surface-3); stroke-width: 3.6; } .donut-seg { fill: none; stroke-width: 3.6; stroke-linecap: butt; transition: stroke-dasharray .3s ease; } .seg-red { stroke: var(--red); } .seg-amber { stroke: var(--amber); } .seg-green { stroke: var(--green); } .donut-num, .donut-cap { transform: rotate(90deg); transform-origin: 21px 21px; text-anchor: middle; fill: var(--text); } .donut-num { font-size: 7px; font-weight: 700; letter-spacing: -.03em; } .donut-cap { font-size: 3px; fill: var(--muted); } .legend { list-style: none; margin: 0; padding: 0; flex: 1 1 150px; display: flex; flex-direction: column; gap: 9px; } .legend-row { display: flex; align-items: center; gap: 9px; font-size: 14px; } .legend-name { flex: 1; color: var(--text-dim); } .legend-n { font-weight: 650; } .legend-pct { color: var(--muted); font-size: 12.5px; min-width: 34px; text-align: right; } /* ---------------- assignee card ---------------- */ .assign-toggle { margin-bottom: 18px; } .assign-open { list-style: none; cursor: pointer; width: max-content; user-select: none; } .assign-open::-webkit-details-marker { display: none; } .assign-toggle[open] .assign-open { background: var(--surface-3); color: var(--text); border-color: var(--border); } .assign-toggle[open] .assign-open .icon { transform: rotate(45deg); transition: transform .15s; } .assign-new { margin: 10px 0 0; } .assign-card { padding: 16px 18px; } .assign-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .assign-form .picker { flex: 1 1 220px; } /* ---------------- compact forms ---------------- */ .card.compact { padding: 16px; } .assign-page { max-width: 560px; } .stack-tight { gap: 9px; } .stack-tight .field { gap: 3px; } .stack-tight .field > span { font-size: 12px; } .stack-tight .row { gap: 8px; } .stack-tight .input { padding: 8px 11px; } .stack-tight textarea.input { min-height: 52px; } .stack-tight .seg-item > span { padding: 7px 10px; } .stack-tight .card-title { margin-bottom: 10px; } .form-actions { margin-top: 2px; } .assign-new { margin-bottom: 18px; } .assign-page .seg { gap: 6px; } .assign-page .people { gap: 6px; } .assign-page textarea.input { min-height: 46px; } .field-date { flex: 0 0 168px; max-width: 168px; } .picker-wide { width: 100%; } .picker-wide select { flex: 1; width: 100%; } .seg-item > span { padding: 8px 10px; } /* ---------------- task detail ---------------- */ .detail { border-left: 3px solid var(--muted); } .detail-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .detail-title { margin: 0; font-size: 19px; font-weight: 640; letter-spacing: -.015em; } .detail-desc { margin: 10px 0 0; white-space: pre-wrap; word-break: break-word; color: var(--text-dim); font-size: 14.5px; } .detail-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; } .detail-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; } .push-right { margin-left: auto; } .flip { transform: rotate(180deg); } .count-inline { padding: 1px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text-dim); font-size: 12px; font-weight: 600; } /* ---------------- task detail layout ---------------- */ .task-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; } .task-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; } .task-aside { position: sticky; top: 82px; min-width: 0; } @media (max-width: 960px) { .task-layout { grid-template-columns: 1fr; } .task-aside { position: static; order: -1; } /* инфо-панель — над остальным */ } .ro-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--surface-3); color: var(--muted); font-size: 12.5px; font-weight: 600; } .ro-badge .icon { width: 14px; height: 14px; } .ro-status { padding: 4px 0 2px; } .prio-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 650; } .prio-pill .icon { width: 14px; height: 14px; } .prio-p-high { color: var(--red); background: var(--red-soft); border: 1px solid color-mix(in srgb, var(--red) 45%, transparent); } .prio-p-normal { color: var(--amber); background: var(--amber-soft); border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); } .prio-p-low { color: var(--green); background: var(--green-soft); border: 1px solid color-mix(in srgb, var(--green) 45%, transparent); } .info-card { display: flex; flex-direction: column; padding: 6px 18px; } .info-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border-soft); } .info-row:last-child { border-bottom: 0; } .info-label { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font-size: 13.5px; } .info-label .icon { width: 16px; height: 16px; } .info-value { font-weight: 600; font-size: 14px; } .info-value.overdue { color: var(--red); } .info-assign { flex-wrap: wrap; } .info-assign-control { display: flex; gap: 6px; align-items: center; } .info-assign-control select { padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 13.5px; max-width: 150px; } .btn-sm { padding: 7px 9px; } .status-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); } .status-actions > form { display: inline-flex; } .status-actions .btn { white-space: nowrap; } /* ---------------- status pills ---------------- */ .status-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; } .pill-form { display: flex; } .pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; transition: all .12s; } .pill .icon { width: 16px; height: 16px; } .pill:hover:not(:disabled) { color: var(--text); border-color: var(--muted); } .pill:disabled { cursor: default; opacity: .55; } .pill-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 550; } .pill-on:hover { color: var(--accent-ink) !important; } .pill-done { background: var(--green); border-color: var(--green); color: #04120c; font-weight: 600; } /* ---------------- comments ---------------- */ .thread { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 12px; } .msg { display: flex; gap: 10px; } .msg-body { flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 9px 12px; } .msg-head { display: flex; align-items: center; gap: 8px; font-size: 13px; } .msg-head b { font-weight: 600; } .msg-date { color: var(--muted); font-size: 12px; flex: 1; } .msg-text { margin: 4px 0 0; white-space: pre-wrap; word-break: break-word; font-size: 14px; color: var(--text-dim); } .icon-btn-sm { width: 24px; height: 24px; } .icon-btn-sm .icon { width: 14px; height: 14px; } .comment-form { display: flex; gap: 8px; align-items: flex-end; } .comment-form textarea { flex: 1; resize: vertical; } /* ---------------- attachments ---------------- */ .files { list-style: none; margin: 0 0 14px; padding: 0; } .file { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: 14px; } .file:last-child { border-bottom: 0; } .file-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); flex: none; } .file-ic .icon { width: 15px; height: 15px; } .file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); } .file-meta { color: var(--muted); font-size: 12.5px; white-space: nowrap; } .upload-form { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; } /* drag-and-drop zone */ .drop-zone { flex: 1 1 240px; min-width: 0; border: 2px dashed var(--border); border-radius: var(--radius-sm); background: var(--surface-2); padding: 18px 16px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; transition: border-color .15s, background .15s; outline: none; } .drop-zone:hover, .drop-zone:focus { border-color: var(--accent); } .drop-zone.dz-over { border-color: var(--accent); background: var(--accent-soft); } .drop-zone-body { display: flex; flex-direction: column; align-items: center; gap: 5px; pointer-events: none; } .drop-zone-icon { color: var(--accent); } .drop-zone-icon .icon { width: 26px; height: 26px; } .drop-zone-text { font-size: 14px; color: var(--muted); } .drop-zone-or { font-size: 12px; color: var(--muted); } .drop-zone-browse { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 13px; cursor: pointer; pointer-events: auto; transition: border-color .12s; } .drop-zone-browse:hover { border-color: var(--accent); } .drop-zone-browse .icon { width: 14px; height: 14px; color: var(--accent); } .drop-zone-fname { font-size: 13px; color: var(--text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .drop-zone-hint { font-size: 12px; color: var(--muted); } /* legacy (kept for compat) */ .file-pick { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border: 1px dashed var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--muted); font-size: 14px; cursor: pointer; flex: 1 1 200px; min-width: 0; } .file-pick:hover { border-color: var(--accent); color: var(--text); } .file-pick input[type="file"] { flex: 1; min-width: 0; font: inherit; font-size: 12.5px; color: var(--text-dim); } .file-pick input[type="file"]::file-selector-button { display: none; } .hint { flex: 1 1 100%; margin: 0; font-size: 12.5px; color: var(--muted); } a.task-title { color: var(--text); } a.task-title:hover { color: var(--accent); text-decoration: none; } /* ---------------- AI-анализ статей ---------------- */ .ai-card { padding: 16px 20px; margin-bottom: 16px; } .ai-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .ai-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--accent); } .ai-badge .icon { width: 15px; height: 15px; } .ai-result { min-height: 40px; } .ai-result-empty .muted-block { margin: 0; } .ai-pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 14px; line-height: 1.7; color: var(--text); } .ai-loading, .ai-error { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); } .ai-error { color: var(--danger, #e55); } .ai-loading .icon { animation: spin 1s linear infinite; width: 15px; height: 15px; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------------- proxies ---------------- */ .stats-4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .stat-static { cursor: default; } .stat-static:hover { transform: none; border-color: var(--border); } .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; } textarea.mono { line-height: 1.5; } .api-note { display: flex; gap: 9px; align-items: flex-start; margin: 0 0 14px; padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); background: var(--amber-soft); border-radius: var(--radius-sm); color: var(--text-dim); font-size: 13.5px; line-height: 1.5; } .api-note .icon { color: var(--amber); margin-top: 2px; flex: none; } .api-note-danger { border-color: color-mix(in srgb, var(--red) 40%, transparent); background: var(--red-soft); } .api-note-danger .icon { color: var(--red); } .api-note b { color: var(--text); } code { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; background: var(--surface-3); padding: 1px 5px; border-radius: 5px; } .card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .card-title-row .card-title { margin-bottom: 0; } .clear-group { display: flex; gap: 6px; } .proxy-tabs { margin-bottom: 14px; } .proxy-tabs .chip b { color: var(--text); } .proxy-table { display: flex; flex-direction: column; margin-top: 14px; } .proxy-row { display: grid; grid-template-columns: 130px 1fr auto auto 32px; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); } .proxy-row:last-child { border-bottom: 0; } .proxy-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; } .proxy-status .icon { width: 14px; height: 14px; } .status-valid { color: var(--green); } .status-invalid { color: var(--red); } .status-unchecked { color: var(--amber); } .proxy-raw { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .proxy-latency { color: var(--muted); font-size: 12.5px; white-space: nowrap; text-align: right; } .proxy-geo { font-size: 12.5px; color: var(--text-dim); white-space: nowrap; } .country-filter { margin: 14px 0 4px; max-height: 84px; overflow-y: auto; } .geo-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 18px; } .pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; } .pager-info { color: var(--muted); font-size: 13px; } .btn.is-disabled { opacity: .4; pointer-events: none; } /* ---------------- tools (Инструментарий) ---------------- */ .tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-top: 4px; } .tool { padding: 16px; } .tool-head { display: flex; align-items: center; gap: 10px; } .tool-ic { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 9px; background: var(--accent-soft); color: var(--accent); } .tool-ic .icon { width: 20px; height: 20px; } .tool-title { flex: 1; display: inline-flex; align-items: center; gap: 7px; font-size: 18px; font-weight: 650; color: var(--text); min-width: 0; } .tool-title:hover { color: var(--accent); text-decoration: none; } .tool-url { margin-top: 8px; font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tool-creds { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; } .cred { display: flex; align-items: flex-start; gap: 9px; font-size: 15px; } .cred-label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); min-width: 92px; font-size: 14px; flex: none; padding-top: 1px; } .cred-label .icon { width: 14px; height: 14px; } .cred-val { flex: 1; color: var(--text-dim); word-break: break-all; white-space: normal; min-width: 0; } .tool-note { margin: 12px 0 0; color: var(--text-dim); font-size: 15px; line-height: 1.55; } .tool-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-soft); display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; } .tool-foot .icon { width: 13px; height: 13px; } .opt { color: var(--muted); font-weight: 400; font-size: 11.5px; } /* ---------------- learning (Habr) ---------------- */ .articles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .article { display: flex; gap: 12px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--border-soft); } .article:last-child { border-bottom: 0; } .article-ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 9px; background: var(--violet-soft); color: var(--violet); } .article-ic .icon { width: 18px; height: 18px; } .article-body { flex: 1; min-width: 0; } .article-title { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 550; color: var(--text); line-height: 1.4; } .article-title:hover { color: var(--accent); text-decoration: none; } .art-ext { width: 13px; height: 13px; color: var(--muted); flex: none; } .article-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 5px; color: var(--muted); font-size: 12.5px; align-items: center; } .article-meta span { display: inline-flex; align-items: center; gap: 5px; } .article-meta .icon { width: 13px; height: 13px; } .article-tags { color: var(--accent); font-size: 12px; } .src-tag { padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; } .src-habr { background: var(--accent-soft); color: var(--accent); } .src-krebs { background: var(--red-soft); color: var(--red); } /* ---------------- reader ---------------- */ .reader { max-width: 820px; } .reader-title { margin: 0 0 8px; font-size: 25px; line-height: 1.25; font-weight: 680; } .reader-meta { display: flex; gap: 14px; color: var(--muted); font-size: 13.5px; } .reader-meta span { display: inline-flex; align-items: center; gap: 5px; } .reader-meta .icon { width: 14px; height: 14px; } .reader-tags { margin-top: 8px; color: var(--accent); font-size: 12.5px; } .reader-body { margin-top: 22px; font-size: 16px; line-height: 1.7; color: var(--text-dim); } .reader-body img { max-width: 100%; height: auto; border-radius: 8px; margin: 12px 0; } .reader-body pre { background: var(--surface-2); border: 1px solid var(--border); padding: 14px; border-radius: 10px; overflow-x: auto; font-size: 13.5px; } .reader-body code { background: var(--surface-3); padding: 1px 5px; border-radius: 5px; font-size: 14px; } .reader-body h2, .reader-body h3 { color: var(--text); margin: 24px 0 10px; } .reader-body a { color: var(--accent); } .reader-body blockquote { border-left: 3px solid var(--border); margin: 0; padding-left: 16px; color: var(--muted); } .reader-body table { border-collapse: collapse; max-width: 100%; overflow-x: auto; display: block; } .reader-body td, .reader-body th { border: 1px solid var(--border); padding: 6px 10px; } /* ---------------- export bar & article picks ---------------- */ .export-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .pick-all { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-dim); } .export-btns { display: flex; gap: 8px; flex-wrap: wrap; } .article-pick { display: flex; align-items: flex-start; padding-top: 8px; } .article-pick input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--border); border-radius: 4px; background: var(--surface-2); cursor: pointer; position: relative; transition: border-color .12s, background .12s; } .article-pick input:hover { border-color: var(--muted); } .article-pick input:checked { background: var(--accent); border-color: var(--accent); } .article-pick input:checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } /* ---------------- BlackBasta ---------------- */ .leak-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-bottom: 18px; } .leak-cards .bb-card { margin-bottom: 0; } .bb-text-en { margin-top: 5px; padding-top: 5px; border-top: 1px dashed var(--border); color: var(--muted); font-size: 13px; font-style: italic; display: flex; gap: 6px; } .bb-text-en .icon { width: 12px; height: 12px; flex: none; margin-top: 3px; color: var(--accent); } .bb-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin-bottom: 18px; transition: border-color .12s; } .bb-card:hover { border-color: var(--accent); text-decoration: none; } .bb-card-ic { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 11px; background: var(--red-soft); color: var(--red); } .bb-card-ic .icon { width: 22px; height: 22px; } .bb-card-body { flex: 1; } .bb-card-title { display: block; font-weight: 620; font-size: 15.5px; } .bb-card-sub { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; } .bb-card > .icon { color: var(--muted); } .bb-list { display: flex; flex-direction: column; } .bb-chat { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-soft); color: var(--text); } .bb-chat:last-child { border-bottom: 0; } .bb-chat:hover { text-decoration: none; } .bb-chat:hover .bb-chat-id { color: var(--accent); } .bb-chat-ic { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 8px; background: var(--surface-2); color: var(--muted); } .bb-chat-ic .icon { width: 16px; height: 16px; } .bb-chat-body { flex: 1; min-width: 0; } .bb-chat-id { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bb-chat-meta { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; } .bb-chat-n { color: var(--text-dim); font-size: 13px; font-variant-numeric: tabular-nums; } .bb-chat > .icon { color: var(--muted); width: 16px; } .bb-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 14px; } .bb-head-id { font-size: 15px; font-weight: 600; } .bb-head-meta { color: var(--muted); font-size: 13px; } .bb-thread { display: flex; flex-direction: column; gap: 12px; } .bb-msg { display: flex; gap: 10px; } .bb-msg-body { flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 10px; padding: 9px 12px; } .bb-msg-head { display: flex; align-items: baseline; gap: 9px; } .bb-sender { font-size: 13px; color: var(--accent); } .bb-time { color: var(--muted); font-size: 11.5px; } .bb-text { margin-top: 4px; font-size: 14px; color: var(--text-dim); white-space: pre-wrap; word-break: break-word; } /* ---------------- ideas ---------------- */ .ideas { display: flex; flex-direction: column; gap: 14px; } .idea { padding: 18px; } .idea-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .idea-title { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 16px; font-weight: 640; word-break: break-word; } .idea-title .icon { color: var(--amber); width: 18px; height: 18px; flex: none; } .idea-budget { display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 13.5px; font-weight: 650; white-space: nowrap; } .idea-budget .icon { width: 14px; height: 14px; } .idea-desc { margin: 11px 0 0; color: var(--text-dim); font-size: 15.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; } .idea-meta { display: flex; gap: 14px; margin-top: 12px; color: var(--text-dim); font-size: 14px; } .idea-author { display: inline-flex; align-items: center; gap: 5px; } .idea-author .icon { width: 16px; height: 16px; } .idea-bar { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); } .like-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--muted); font: inherit; font-size: 14px; font-weight: 550; cursor: pointer; transition: all .12s; } .like-btn .icon { width: 16px; height: 16px; } .like-btn:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .like-btn.liked { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } .like-btn.liked .icon { fill: var(--accent); } .idea-count { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; } .idea-count .icon { width: 16px; height: 16px; } .idea-comments { margin-top: 12px; } .idea-comments-toggle { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; color: var(--accent); font-size: 13.5px; font-weight: 550; list-style: none; user-select: none; } .idea-comments-toggle::-webkit-details-marker { display: none; } .idea-comments[open] .idea-comments-toggle { margin-bottom: 12px; } .thread-sm { margin-bottom: 12px; } /* ---------------- mobile ---------------- */ @media (max-width: 900px) { .sidebar { position: fixed; z-index: 60; left: 0; top: 0; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow); } .nav-toggle:checked ~ .sidebar { transform: translateX(0); } .nav-toggle:checked ~ .nav-scrim { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .5); } .burger { display: grid; } .main { padding: 18px 16px 60px; } .topbar { padding: 12px 16px; } .task-actions { width: 100%; justify-content: flex-end; padding-top: 4px; } .field-date { flex: 1 1 140px; max-width: none; } .push-right { margin-left: 0; } .comment-form { flex-direction: column; align-items: stretch; } .donut-wrap { justify-content: center; } .assign-form { flex-direction: column; align-items: stretch; } .pop-body { right: auto; left: 0; width: min(280px, calc(100vw - 48px)); } .idea-head { flex-direction: column; } .proxy-row { grid-template-columns: 1fr auto auto; row-gap: 4px; } .proxy-status { grid-column: 1; } .proxy-geo { grid-column: 2; grid-row: 1; text-align: right; } .proxy-latency { grid-column: 3; grid-row: 1; } .proxy-raw { grid-column: 1 / -1; } .stats-4 { grid-template-columns: 1fr 1fr; } .grid-2 { grid-template-columns: 1fr; } .page-title { font-size: 18px; } } /* ---------- телефоны ---------- */ @media (max-width: 560px) { html { -webkit-text-size-adjust: 100%; } .main { padding: 14px 12px 56px; } .topbar { padding: 10px 12px; gap: 10px; } .card { padding: 14px; border-radius: 10px; } .card.narrow { margin: 0 0 16px; } /* карточка задачи в один столбец */ .task { flex-wrap: wrap; padding: 12px; gap: 8px; } .task-body { flex: 1 1 100%; } .task-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; gap: 6px; padding-top: 8px; border-top: 1px solid var(--border-soft); } .task-actions .lbl { display: inline; } /* на телефоне подписи вместо голых иконок */ .task-actions .btn { flex: 1 1 auto; justify-content: center; } .task-actions .push-right { margin-left: 0; width: 100%; } .task-actions details.pop { flex: 1 1 auto; } .task-actions details.pop > summary { width: 100%; justify-content: center; } /* плитки дашборда крупнее и в одну колонку по две */ .stats, .stats-3 { grid-template-columns: 1fr 1fr; gap: 10px; } .kpis { grid-template-columns: 1fr 1fr; } .donut-wrap { flex-direction: column; gap: 14px; } .donut { width: 128px; height: 128px; } /* формы: поля на всю ширину, кнопки тоже */ .row { flex-direction: column; gap: 8px; } .row > .field, .field-date { flex: 0 0 auto; width: 100%; max-width: none; } .seg { flex-direction: column; } .seg-item { flex: 1 1 100%; } .form-actions { flex-direction: column-reverse; } .form-actions .btn { width: 100%; justify-content: center; } .row-end { justify-content: stretch; } /* тулбар списков */ .toolbar { flex-direction: column; align-items: stretch; } .search { flex: 1 1 100%; } .chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; -webkit-overflow-scrolling: touch; } .chip { white-space: nowrap; flex: none; } /* отпуск, файлы, страница задачи */ .detail-actions { gap: 6px; } .detail-actions .btn { flex: 1 1 auto; justify-content: center; } .vac-active, .vac-next { flex-direction: column; align-items: flex-start; } .file { flex-wrap: wrap; } .file-name { flex: 1 1 100%; } .upload-form { flex-direction: column; align-items: stretch; } .file-pick { flex: 1 1 100%; } .edit-authors { font-size: 12px; } .topbar-actions .btn span { display: none; } /* в шапке — только иконки */ .page-title { font-size: 17px; } } /* очень узкие экраны */ @media (max-width: 380px) { .stats, .stats-3, .kpis { grid-template-columns: 1fr; } .brand-text { font-size: 16px; } } /* ---------- Сервера ---------- */ .inline { display: inline; } .srv-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); background: var(--surface-2); white-space: nowrap; } .srv-badge b { font-weight: 700; opacity: .85; } .srv-badge.srv-online { color: #3ddb9a; border-color: rgba(61,219,154,.4); background: rgba(61,219,154,.10); } .srv-badge.srv-offline { color: #f4626f; border-color: rgba(244,98,111,.4); background: rgba(244,98,111,.10); } .tool-ic.srv-online { color: #3ddb9a; } .tool-ic.srv-offline { color: #f4626f; } .btn-sm { padding: 5px 12px; font-size: 13px; }