/* Тема задаётся атрибутом data-theme на : «light», «dark» либо атрибута нет вовсе — тогда берётся системная. Само переключение делает color-scheme ниже, а каждый цвет описан один раз через light-dark(), поэтому светлая и тёмная версии не могут разойтись при правке. */ :root { color-scheme: light dark; /* Шкала кеглей. До неё в разметке жило десять размеров — 11,5 / 12 / 12,5 / 13 / 13,5 и так далее, — которые отличались на полпикселя и не несли никакого смысла: разница неразличима, а иерархия от неё не появлялась. Здесь шесть ступеней, и каждая отвечает за свой уровень. */ --fs-h1: 24px; /* заголовок страницы и числа в плашках */ --fs-lead: 16px; /* заголовок диалога */ --fs-base: 15px; /* название задачи, основной текст */ --fs-sm: 13px; /* вторичный текст: даты, кнопки, описание */ --fs-xs: 12px; /* мета-строка, подписи, счётчики */ --fs-xxs: 11px; /* метки и микроподписи */ --bg: light-dark(#f6f7f9, #14171a); --card: light-dark(#ffffff, #1c2024); --ink: light-dark(#1c2024, #e8eaed); --ink-soft: light-dark(#525c66, #9aa4ae); /* Третий уровень серого. Держим его не ниже 4,5:1 к фону: им набраны подсказки вкладок и «срок закрыт» — 11,5–12,5 пикселей, на глаз этого мало. */ --ink-faint: light-dark(#667079, #7d8792); --line: light-dark(#e3e6ea, #2c3237); --line-soft: light-dark(#eef0f3, #23282d); /* На белом фоне яркие акценты в мелком тексте нечитаемы: «просрочено на 46 дней» набрано 11,5 пикселями. Для светлой темы взяты приглушённые версии тех же оттенков, для тёмной — осветлённые. Оттенок сохранён: красный остаётся красным, янтарный янтарным, иначе развалится вся логика «светофора». */ --overdue: light-dark(#c0392b, #e26a60); --today: light-dark(#b3560f, #e8934e); --soon: light-dark(#8a6a12, #d7b048); --week: light-dark(#2c6ca6, #5e9ad4); --later: light-dark(#5a6773, #8b98a6); --nodate: light-dark(#6b52a8, #a48fd0); /* Упоминание — не срок, и цветом со «светофором» пересекаться не должно. Бирюзовый не занят ни одной из шести корзин. */ --mention: light-dark(#0f6b64, #4dbcb2); /* Огонь высокого приоритета. Оттенок в обеих темах один — огонь не бывает «версией для светлой темы», — но светлота разная: на белом фоне бледное ядро исчезает, поэтому в светлой теме вся лесенка взята темнее. Ступени идут от основания пламени к острию: белое, жёлтое, оранжевое, красное. */ --fire-white: light-dark(#fff3c4, #fffaf0); --fire-core: light-dark(#f4c033, #ffd968); --fire-inner: light-dark(#ef8f14, #ffab34); --fire-outer: light-dark(#dd4f14, #ff6a24); --fire-hot: light-dark(#a82706, #d93a0c); /* Свечение — одним значением на обе темы, и это не лень. Проверено переключением тем: `light-dark()` внутри `@keyframes` разрешается один раз и на смену темы не отзывается — свечение застревало в цвете той темы, что была открыта первой, тогда как градиент самого пламени переключался правильно. Один цвет на обе темы честнее пары, из которой вторая всё равно никогда не применится. */ --fire-glow: rgba(240, 92, 20, 0.5); /* Прозрачный край градиентов пламени. Отдельным токеном, потому что ключевое слово `transparent` — это прозрачный ЧЁРНЫЙ, и на светлом фоне переход к нему даёт серую кайму вокруг каждого языка. */ --fire-fade: rgba(255, 106, 36, 0); /* Пылающая плашка: тлеющая подложка под языками пламени. Три ступени снизу вверх — жар у нижнего края, ровное тепло в середине, отсвет под самым верхом. Это те самые ручки, которыми огонь делается сильнее или слабее: языки поверх дают форму, а общую силу задаёт подложка. */ --blaze-bed: light-dark(rgba(221, 79, 20, 0.46), rgba(255, 106, 36, 0.54)); --blaze-wash: light-dark(rgba(239, 143, 20, 0.28), rgba(255, 171, 52, 0.32)); --blaze-top: light-dark(rgba(244, 192, 51, 0.16), rgba(255, 217, 104, 0.2)); --blaze-glow: light-dark(rgba(200, 60, 10, 0.34), rgba(255, 122, 40, 0.4)); --blaze-edge: light-dark(#e07a3a, #b8531f); /* Текст на горящей строке. Пламя во всю высоту съедает обычные оттенки: и `--ink-soft` мелкой строки, и `--ink` названия оказываются в одной светлоте с огнём. Поэтому на таких строках текст уходит в крайние значения — почти чёрный на светлой теме, почти белый на тёмной, — и получает ореол цвета подложки. Ореол делает ту же работу, что обводка у субтитров: отделяет буквы от того, что под ними, не пряча картинку под плашкой. */ --blaze-ink: light-dark(#2b1204, #fff4e8); --blaze-ink-soft: light-dark(#48260c, #ffeada); --blaze-halo: light-dark(rgba(255, 248, 238, 0.92), rgba(48, 14, 3, 0.85)); /* Палитра языков пламени — своя на каждую тему, и это главное решение во всей затее. Текст на горящей строке один и тот же по светлоте: почти белый на тёмной теме, почти чёрный на светлой. Значит, фон под ним не имеет права пересекать эту светлоту. Замер по WCAG показал ровно это: на тёмной теме жёлтое ядро языка роняло контраст мелкой строки до 1,4, на светлой её же убивал тёмно-красный — до 2,0. Причём каждый раз мешал тот тон, которого в этой теме быть не должно. Поэтому огонь горит в разные стороны: на тёмной теме от тёмно-красного к оранжевому, на светлой от оранжевого к жёлтому. Пламенем он остаётся в обеих, а фон больше не заходит на территорию текста. */ --blaze-flame-deep: light-dark(#e88a10, #8c2306); --blaze-flame-mid: light-dark(#f3a41c, #a83409); --blaze-flame-tip: light-dark(#ffcf4e, #b8420f); /* Тень разложена на два слоя: light-dark() режет значение по верхней запятой и списком теней управлять не умеет. */ --shadow-near: light-dark(0 1px 2px rgba(20, 25, 30, 0.06), 0 1px 2px rgba(0, 0, 0, 0.3)); --shadow-far: light-dark(0 4px 14px rgba(20, 25, 30, 0.05), 0 4px 14px rgba(0, 0, 0, 0.25)); --scrim: light-dark(rgba(20, 25, 30, 0.35), rgba(8, 10, 12, 0.55)); /* Движение. Это рабочий список, в который смотрят каждый день, поэтому длительности короткие: анимация должна объяснять, что произошло, и не заставлять себя ждать. Всё быстрее 300 мс, замедления на выходе нет. */ --dur-fast: 110ms; --dur: 170ms; --dur-slow: 260ms; --ease: cubic-bezier(0.2, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Подсветка строки, которая только что изменилась. */ --flash: light-dark(#dbe9f7, #24384a); --bottombar-h: 58px; /* Порядок слоёв держим в одном месте: нижний бар под всплывающим, всплывающее под диалогом. Раньше карточка описания перекрывала диалог переноса срока просто потому, что её z-index завели позже. */ --z-bottombar: 15; --z-hovercard: 20; --z-sheet: 30; } /* Плавная смена темы. Класс `theming` скрипт вешает только на время переключения: держать переход на цветах постоянно — значит замедлять наведение на каждой из полусотни строк. Селекторы перечислены поимённо по той же причине — `*` тут дал бы сотни анимируемых узлов разом. */ .theming body, .theming .task, .theming .tile, .theming .tab, .theming .btn, .theming .theme, .theming .theme button, .theming .bottombar, .theming .bb-item, .theming .sheet-card, .theming .hovercard, .theming .chip { transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); } /* Явный выбор пользователя перебивает системную тему в обе стороны. */ :root[data-theme='light'] { color-scheme: light; } :root[data-theme='dark'] { color-scheme: dark; } * { box-sizing: border-box; } /* Системная настройка «уменьшить движение» — не пожелание, а медицинская нужда: анимация вызывает у части людей тошноту и головокружение. Здесь она гасит вообще всё, а не только «украшательства»: смысл несёт итоговое состояние, и оно наступает сразу. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } } /* Браузерное правило [hidden] { display: none } — из таблицы стилей движка, и любой авторский display его перебивает. У .sheet и .summary объявлен display: flex, поэтому без этой строки атрибут hidden на них не действует: диалог переноса срока висел поверх страницы всегда и перехватывал все клики. */ [hidden] { display: none !important; } body { margin: 0; padding: 0 20px 64px; background: var(--bg); color: var(--ink); font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: var(--fs-base); line-height: 1.45; -webkit-font-smoothing: antialiased; } /* Клавиатурный фокус был виден только там, где браузер рисовал его сам. Синий не занят ни одной корзиной в роли текста и не путается со «светофором». */ :focus-visible { outline: 2px solid var(--week); outline-offset: 2px; border-radius: 5px; } .top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; max-width: 1060px; margin: 0 auto; padding: 28px 0 18px; flex-wrap: wrap; } h1 { margin: 0; font-size: var(--fs-h1); font-weight: 650; letter-spacing: -0.01em; } .who { margin: 4px 0 0; color: var(--ink-soft); font-size: var(--fs-sm); } .top-right { display: flex; align-items: center; gap: 12px; } .stamp { color: var(--ink-faint); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; } .btn { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 7px; padding: 7px 13px; font: inherit; font-size: var(--fs-sm); cursor: pointer; } .btn:hover:not(:disabled) { border-color: var(--ink-faint); } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn.primary { background: var(--ink); border-color: var(--ink); color: var(--card); font-weight: 550; } .btn.ghost { background: transparent; } .theme { display: flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: var(--card); } .theme button { border: none; background: none; color: var(--ink-soft); font: inherit; font-size: var(--fs-xs); padding: 7px 11px; cursor: pointer; } .theme button + button { border-left: 1px solid var(--line); } .theme button:hover { color: var(--ink); } .theme button.on { background: var(--line-soft); color: var(--ink); font-weight: 580; } /* ── вкладки по роли ──────────────────────────────────── */ .tabs { max-width: 1060px; margin: 0 auto 10px; display: flex; gap: 6px; border-bottom: 1px solid var(--line); /* На узком экране три вкладки со счётчиками не помещаются и обрезаются: пусть полоса прокручивается сама, не таща за собой всю страницу. */ overflow-x: auto; scrollbar-width: thin; } .tab { border: 1px solid transparent; border-bottom: none; background: none; color: var(--ink-soft); border-radius: 8px 8px 0 0; padding: 8px 14px 9px; margin-bottom: -1px; font: inherit; font-size: var(--fs-sm); cursor: pointer; display: flex; align-items: baseline; gap: 7px; flex: 0 0 auto; white-space: nowrap; } .tab:hover { color: var(--ink); } .tab.on { background: var(--card); border-color: var(--line); border-bottom: 1px solid var(--card); color: var(--ink); font-weight: 580; } .tab .n { font-variant-numeric: tabular-nums; color: var(--ink-faint); } .tab.on .n { color: var(--ink-soft); } .tab .late { font-size: var(--fs-xxs); font-variant-numeric: tabular-nums; color: var(--overdue); font-weight: 600; } .tab .at { font-size: var(--fs-xxs); font-variant-numeric: tabular-nums; color: var(--mention); } .tab .at.new { font-weight: 700; } .tab-bar { max-width: 1060px; margin: 0 auto 14px; padding: 0 2px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .tab-hint { margin: 0; font-size: var(--fs-xs); color: var(--ink-faint); } .tab-actions { display: flex; gap: 6px; flex: 0 0 auto; } .btn.tiny { font-size: var(--fs-xs); padding: 5px 10px; flex: 0 0 auto; } .btn.tiny[aria-pressed='true'] { border-color: var(--mention); color: var(--mention); font-weight: 580; } /* ── перекатывание изменившегося числа ────────────────── */ /* Старое число уходит вверх, новое приходит снизу. Уходящее лежит абсолютно — так размер элемента задаёт только новое значение, и счётчик не дёргает соседей по строке, пока катится. */ .roll { position: relative; display: inline-block; } .roll .out { position: absolute; inset: 0; font-style: normal; animation: roll-out var(--dur-slow) var(--ease) forwards; } .roll .in { font-style: normal; display: inline-block; animation: roll-in var(--dur-slow) var(--ease-out) backwards; } @keyframes roll-out { to { transform: translateY(-0.8em); opacity: 0; } } @keyframes roll-in { from { transform: translateY(0.8em); opacity: 0; } } /* ── всплывающее сообщение с отменой ──────────────────── */ .toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: var(--z-sheet); display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 24px); padding: 10px 12px 10px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 34px light-dark(rgba(20, 25, 30, 0.2), rgba(0, 0, 0, 0.55)); font-size: var(--fs-sm); opacity: 1; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out), display var(--dur) allow-discrete; } .toast[hidden] { opacity: 0; transform: translateX(-50%) translateY(10px); } @starting-style { .toast:not([hidden]) { opacity: 0; transform: translateX(-50%) translateY(10px); } } /* ── нижний бар: навигация по ролям на телефоне ───────── */ .bottombar { display: none; /* включается только в мобильном медиазапросе */ position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bottombar); background: var(--card); border-top: 1px solid var(--line); /* Вырез под жест «домой»: без этого нижний ряд оказывается под ним. */ padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -2px 12px light-dark(rgba(20, 25, 30, 0.07), rgba(0, 0, 0, 0.35)); } .bb-item { flex: 1 1 0; min-width: 0; height: var(--bottombar-h); border: none; border-top: 2px solid transparent; background: none; font: inherit; color: var(--ink-soft); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0 4px; } .bb-item.on { color: var(--ink); border-top-color: var(--ink); background: var(--line-soft); } .bb-label { font-size: var(--fs-xxs); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .bb-item.on .bb-label { font-weight: 600; } .bb-nums { display: flex; align-items: baseline; gap: 5px; font-variant-numeric: tabular-nums; line-height: 1.2; } .bb-nums b { font-size: var(--fs-sm); font-weight: 620; } .bb-nums i { font-style: normal; font-size: var(--fs-xxs); font-weight: 600; } /* Просрочка — плашкой, а не вторым числом рядом. «23 10» через пробел глаз читает как одно число «2310»: в баре кегли мелкие, а расстояние между цифрами меньше, чем внутри числа. Подложка разрывает их надёжнее любого промежутка. */ .bb-nums .late { color: var(--overdue); background: color-mix(in srgb, var(--overdue) 15%, transparent); border-radius: 6px; padding: 0 4px; } .bb-nums .at { color: var(--mention); } /* ── сводка ───────────────────────────────────────────── */ .summary { max-width: 1060px; margin: 0 auto 22px; display: flex; gap: 10px; flex-wrap: wrap; } .tile { flex: 1 1 120px; background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--tile, var(--line)); border-radius: 9px; padding: 11px 13px; box-shadow: var(--shadow-near), var(--shadow-far); animation: row-in var(--dur) var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 25ms); } .tile.zero { opacity: 0.5; } .tile b { display: block; font-size: var(--fs-h1); font-weight: 620; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--tile, var(--ink)); } .tile span { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--ink-soft); } .note { flex: 1 1 100%; color: var(--ink-soft); font-size: var(--fs-sm); padding: 2px 2px 0; } /* ── список ───────────────────────────────────────────── */ .list { max-width: 1060px; margin: 0 auto; } .placeholder { color: var(--ink-soft); padding: 40px 0; text-align: center; } /* Заглушка на время загрузки. Сбор списка занимает около двух секунд — из них полторы уходит на чтение чатов ради упоминаний, — и всё это время раньше на экране висела одна строка текста. Полосы показывают, что грузится именно список, и сколько его примерно будет. */ .skeleton { display: grid; gap: 6px; } .sk-row { height: 66px; border-radius: 9px; border: 1px solid var(--line); background: linear-gradient( 100deg, var(--card) 30%, var(--line-soft) 50%, var(--card) 70% ); background-size: 300% 100%; animation: sk-slide 1.3s var(--ease) infinite; animation-delay: calc(var(--i, 0) * 90ms); } @keyframes sk-slide { from { background-position: 150% 0; } to { background-position: -150% 0; } } .error { background: var(--card); border: 1px solid var(--overdue); border-radius: 9px; padding: 16px 18px; color: var(--overdue); } .bucket { margin-bottom: 26px; } /* Заголовок корзины — кнопка сворачивания. Разметка h2 > button обычна для раскрывающегося блока и не ломает структуру заголовков страницы. */ .bucket-head { margin: 0; font-size: inherit; font-weight: inherit; } .bucket-toggle { width: 100%; display: flex; align-items: baseline; gap: 9px; padding: 4px 2px 8px; border: none; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; } .chev { align-self: center; width: 8px; height: 8px; flex: 0 0 auto; border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(45deg); transition: transform var(--dur) var(--ease); } .bucket.collapsed .chev { transform: rotate(-45deg); } .bh-title { font-size: var(--fs-xs); font-weight: 650; /* Заголовок корзины стал мельче вместе со шкалой; прописным в таком кегле нужна разрядка, иначе буквы слипаются. */ letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); } .bucket-head .count { font-size: var(--fs-sm); color: var(--ink-faint); font-variant-numeric: tabular-nums; } /* Сворачивание через grid-template-rows: 0fr → 1fr. Высота списка заранее неизвестна, а height: auto не анимируется; этот приём не требует ни замеров в скрипте, ни фиксированных высот — скрипт только переключает класс. Обязательные условия — overflow: hidden и min-height: 0 на внутреннем блоке: без них у трека остаётся автоминимум по содержимому и он не схлопнется. */ .bucket-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dur-slow) var(--ease); } .bucket.collapsed .bucket-body { grid-template-rows: 0fr; } .bucket-inner { overflow: hidden; min-height: 0; } .bucket-head .hint { margin-left: auto; font-size: var(--fs-xs); color: var(--ink-faint); } /* Строка состоит из двух слоёв: неподвижной рамки .task и едущего .task-slide. Разделение нужно свайпу — под уезжающим содержимым должна открываться подсказка, а она обязана оставаться на месте. */ .task { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 9px; margin-bottom: 6px; overflow: hidden; box-shadow: var(--shadow-near), var(--shadow-far); transition: border-color var(--dur-fast) var(--ease); /* Строки въезжают лесенкой. Задержка считается от --i, который проставляет скрипт, и там же обрезана: на двадцать пятой строке ожидание в пол-секунды воспринималось бы уже как тормоза, а не как анимация. */ animation: row-in var(--dur) var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 16ms); } @keyframes row-in { from { opacity: 0; transform: translateY(7px); } } /* Подсветка строки, которая только что изменилась. После правки срока задача переезжает в другую корзину, и без этого непонятно, что вообще произошло: список просто перерисовывается другим. Держим подсветку долго — почти полторы секунды, — потому что взгляд сначала должен её найти. */ @keyframes row-flash { 0%, 55% { background: var(--flash); border-color: var(--week); } 100% { background: var(--card); border-color: var(--line); } } .task.flash { animation: row-in var(--dur) var(--ease-out) backwards, row-flash 1400ms var(--ease) both; } /* Точечное обновление: строки не выезжают заново, но подсветка остаётся — она и объясняет, что именно изменилось. */ .list.no-enter .task { animation: none; } .list.no-enter .task.flash { animation: row-flash 1400ms var(--ease) both; } /* Фон подсвечивается на едущем слое: у рамки он под ним и не виден. */ @keyframes row-flash-bg { 0%, 55% { background: var(--flash); } 100% { background: var(--card); } } .task.flash .task-slide { animation: row-flash-bg 1400ms var(--ease) both; } .task-slide { display: grid; grid-template-columns: 4px 26px 1fr auto; gap: 0 14px; align-items: center; background: var(--card); position: relative; z-index: 1; } /* Отметка для досье. Колонка узкая, но сам ярлык растянут на всю высоту строки — попасть в галочку в 13 пикселей иначе тяжело и мышью, и пальцем. */ .pick-task { align-self: stretch; display: flex; align-items: center; justify-content: center; cursor: pointer; margin-left: 6px; } .pick-task input { margin: 0; cursor: pointer; accent-color: var(--week); } /* Невыбранные галочки притушены, чтобы не спорить со «светофором» сроков, и проявляются при наведении на строку. */ .pick-task input:not(:checked) { opacity: 0.35; transition: opacity var(--dur-fast) var(--ease); } .task:hover .pick-task input:not(:checked), .pick-task input:focus-visible { opacity: 1; } .task.picked { border-color: var(--week); } /* Подсказка свайпа лежит под едущим слоем и открывается по мере ухода строки влево. На настольном компьютере жеста нет — и подсказки тоже. */ .swipe-hint { position: absolute; inset: 0; display: none; align-items: center; justify-content: flex-end; padding-right: 18px; gap: 8px; background: var(--week); color: var(--card); font-size: var(--fs-sm); font-weight: 580; } .task.swiping .swipe-hint, .task.swipe-armed .swipe-hint { display: flex; } .task.swipe-armed .swipe-hint { background: var(--soon); } /* Строка кликабельна в трёх местах — она должна отзываться на наведение. */ .task:hover { border-color: var(--ink-faint); } /* Пылающая плашка задачи высокого приоритета. Устройство слоёв снизу вверх: фон карточки → тлеющий подогрев `.blaze` → два ряда языков пламени → содержимое строки. Слой лежит внутри `.task-slide`, а не в `.task`: слайд непрозрачен и закрыл бы собой всё, что нарисовано под ним, а вынести огонь поверх слайда значило бы положить его на текст. Языки — это радиальные градиенты, размноженные по горизонтали `repeat-x` с разной шириной (137 / 91 / 53 пикселя и 79 / 44 у переднего ряда). Ширины взяты взаимно непериодичными: при кратных ряд складывается в узор из одинаковых зубцов и читается как забор, а не как огонь. Анимируются только `transform` и `opacity` — их браузер крутит на композиторе, не перерисовывая карточку. Размытие и тени статичны: анимированный `blur` на девяти строках разом заметно роняет частоту кадров. */ .task.hot { border-color: var(--blaze-edge); } .blaze { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; /* Тлеющий фон: тепло собрано у нижнего края и гаснет к верху, где лежит название задачи. Текст обязан остаться читаемым — плашка полыхает, а не превращается в костёр вместо строки. */ background: linear-gradient( to top, var(--blaze-bed) 0%, var(--blaze-wash) 52%, var(--blaze-top) 100% ); box-shadow: inset 0 0 14px 1px var(--blaze-glow), inset 0 -18px 26px -10px var(--blaze-glow); animation: blaze-breathe 2.6s ease-in-out infinite; /* Отрицательная задержка по номеру строки: у соседних карточек огонь идёт вразнобой. Синхронное дыхание десятка плашек читается как мигание интерфейса, а не как огонь. Задержка отрицательная — фаза сдвигается сразу, а не после ожидания. */ animation-delay: calc(var(--i, 0) * -137ms); } /* Ряды языков вылезают за боковые края: горизонтальный дрейф в анимации не должен обнажать угол карточки. Наружу они не выйдут — `.task` обрезает по себе. */ .blaze span { position: absolute; left: -12%; right: -12%; bottom: -5px; background-repeat: repeat-x; background-position: bottom center; transform-origin: 50% 100%; /* Языки достают до верхнего края: полыхать должна вся плашка, а не её нижняя треть. Маска гасит их не в ноль, а в четверть — иначе у самого верха пламя обрывается ровной линией, и вместо огня получается заливка. */ mask-image: linear-gradient(to top, #000 0%, #000 46%, rgba(0, 0, 0, 0.34) 82%, transparent 100%); will-change: transform, opacity; } .blaze-back { background-image: radial-gradient(closest-side at 50% 100%, var(--blaze-flame-deep), var(--fire-fade)), radial-gradient(closest-side at 50% 100%, var(--blaze-flame-mid), var(--fire-fade)), radial-gradient(closest-side at 50% 100%, var(--blaze-flame-mid), var(--fire-fade)); height: 112%; background-size: 137px 96%, 91px 72%, 53px 52%; filter: blur(4px); animation: blaze-back 1.9s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -83ms); } .blaze-front { background-image: radial-gradient(closest-side at 50% 100%, var(--blaze-flame-tip), var(--fire-fade)), radial-gradient(closest-side at 50% 100%, var(--blaze-flame-mid), var(--fire-fade)); height: 84%; background-size: 79px 62%, 44px 44%; filter: blur(2px); animation: blaze-front 1.15s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -59ms); } /* Содержимое строки поднято над огнём. Ярлык отметки, полоса корзины и обе колонки — обычные потомки грида, и без своего слоя они оказались бы под абсолютно спозиционированным пламенем. */ .task.hot .task-slide > *:not(.blaze) { position: relative; z-index: 1; } /* Читаемость поверх огня. Мелкая строка мет набрана 11,5 пикселями приглушённым серым — ровно то, что первым тонет в пламени, и именно она отвечает на вопрос «от кого и по какому проекту». Поэтому на горящих строках весь текст уходит в крайнюю светлоту и получает ореол: контраст к подложке считан по WCAG в обеих темах и в самой горячей точке карточки. */ .task.hot .task-title, .task.hot .meta, .task.hot .waited, .task.hot .due, .task.hot .checks { text-shadow: 0 1px 0 var(--blaze-halo), 0 0 5px var(--blaze-halo), 0 0 9px var(--blaze-halo); } .task.hot .task-title, .task.hot .due-date { color: var(--blaze-ink); } .task.hot .meta, .task.hot .waited, .task.hot .due-rel, .task.hot .meta .sep { color: var(--blaze-ink-soft); } /* Числа возраста и срока набраны полужирным — на огне им хватает основного цвета, приглушать их до цвета подписи не нужно. */ .task.hot .waited b { color: var(--blaze-ink); } /* Подсветка «строка изменилась» перекрашивает слайд в цвет карточки и оставляет его таким навсегда (`both`). На горящей строке это потушило бы огонь после первой же правки срока, поэтому там подсветку ведёт сама `.task` — её фон лежит под пламенем и виден сквозь него. */ .task.hot.flash .task-slide { animation: none; } /* Амплитуда выкручена после проверки на живой странице: первая версия ходила ±9 пикселей за три секунды под размытием в пять — анимация шла (время у всех трёх дорожек росло ровно), но глазом читалась как неподвижное свечение. Размах движения должен быть заметно больше размытия, иначе размытие его съедает. */ /* Общее дыхание жара: вся плашка то разгорается, то оседает. */ @keyframes blaze-breathe { 0%, 100% { opacity: 0.86; } 35% { opacity: 1; } 62% { opacity: 0.66; } 84% { opacity: 0.94; } } @keyframes blaze-back { 0%, 100% { transform: translate(0, 0) scaleY(1); opacity: 0.88; } 28% { transform: translate(17px, -6%) scaleY(1.38); opacity: 1; } 52% { transform: translate(-11px, 4%) scaleY(0.78); opacity: 0.6; } 78% { transform: translate(-19px, -3%) scaleY(1.22); opacity: 0.96; } } @keyframes blaze-front { 0%, 100% { transform: translate(0, 0) scaleY(1); opacity: 0.92; } 22% { transform: translate(-16px, -8%) scaleY(1.55); opacity: 1; } 48% { transform: translate(14px, 6%) scaleY(0.62); opacity: 0.42; } 74% { transform: translate(23px, -4%) scaleY(1.34); opacity: 1; } } .task .bar { align-self: stretch; background: var(--accent); } .task-main { padding: 11px 0 11px 4px; min-width: 0; } .task-title { display: block; color: var(--ink); text-decoration: none; font-weight: 530; line-height: 1.35; } .task-title:hover { text-decoration: underline; } /* Огонёк высокого приоритета — то же, чем он помечен в самом Битриксе. Пламя нарисовано двумя каплями: внешняя оранжевая и внутренний жёлтый язычок. Капля — это квадрат, у которого скруглены три угла из четырёх, повёрнутый на 45°: неcкруглённый угол оказывается остриём вверху. Ни картинки, ни эмодзи: эмодзи рисует система, и на разных машинах это разный огонь разного размера, а размеры здесь заданы в `em` — пламя следует за кеглем названия задачи. У каждого слоя свой период дрожания (1,7 / 1,15 / 0,83 с). Периоды намеренно не кратны друг другу: при кратных пламя раз в цикл возвращается в одну и ту же позу, глаз ловит повтор, и оно перестаёт выглядеть живым. Все три анимации в 0 % и 100 % стоят в одной и той же позе. Это не украшательство: при системном «уменьшить движение» глобальное правило вверху файла обрывает анимацию на первом кадре, и покоящаяся поза обязана быть осмысленным огоньком, а не серединой рывка. */ .flag { position: relative; display: inline-block; width: 0.62em; height: 0.88em; margin-right: 6px; /* Пламя стоит на базовой линии текста, а не висит по центру строки. Смещение выверено замером: при 15 пикселях кегля основание оказывается на пиксель ниже базовой линии, а остриё — на пиксель выше капители, то есть огонёк ровно одной высоты с заглавными буквами названия. */ vertical-align: -0.07em; transform-origin: 50% 100%; animation: fire-glow 1.7s ease-in-out infinite; } .flag > span { position: absolute; left: 50%; border-radius: 50% 0 50% 50%; transform-origin: 50% 100%; } /* Смещения посчитаны, а не подобраны. Поворот на −45° вокруг середины нижней грани уводит основание капли на 0,35 её ширины вниз и влево — обе величины скомпенсированы `bottom` и `margin-left`, иначе пламя съезжает под строку. */ .fire-body { width: 0.62em; height: 0.62em; margin-left: -0.09em; bottom: 0.22em; /* Градиент радиальный, а не линейный: линейный поворачивается вместе с каплей и «низ пламени» уезжает вбок. Центр в 0 % 100 % — это тот угол квадрата, который после поворота становится основанием: там светло и горячо, к острию цвет уходит в красный. */ background: radial-gradient( circle at 0% 100%, var(--fire-core) 0%, var(--fire-inner) 28%, var(--fire-outer) 62%, var(--fire-hot) 100% ); animation: fire-outer 1.15s ease-in-out infinite; } .fire-core { width: 0.34em; height: 0.34em; margin-left: -0.05em; bottom: 0.12em; background: radial-gradient(circle at 0% 100%, var(--fire-white) 0%, var(--fire-core) 55%, var(--fire-inner) 100%); animation: fire-inner 0.83s ease-in-out infinite; } /* Свечение и общее дыхание — то, что делает знак пылающим, а не нарисованным. */ @keyframes fire-glow { 0%, 100% { transform: scaleY(1); filter: drop-shadow(0 0 2px var(--fire-glow)); } 35% { transform: scaleY(1.18); filter: drop-shadow(0 0 7px var(--fire-glow)); } 60% { transform: scaleY(0.9); filter: drop-shadow(0 0 3px var(--fire-glow)); } 80% { transform: scaleY(1.1); filter: drop-shadow(0 0 9px var(--fire-glow)); } } @keyframes fire-outer { 0%, 100% { transform: rotate(-45deg) scale(1, 1); } 30% { transform: rotate(-38deg) scale(0.88, 1.18); } 55% { transform: rotate(-53deg) scale(1.12, 0.86); } 80% { transform: rotate(-41deg) scale(0.95, 1.09); } } @keyframes fire-inner { 0%, 100% { transform: rotate(-45deg) scale(1); opacity: 0.95; } 25% { transform: rotate(-56deg) scale(1.3); opacity: 1; } 50% { transform: rotate(-34deg) scale(0.68); opacity: 0.55; } 75% { transform: rotate(-49deg) scale(1.16); opacity: 1; } } .meta { margin-top: 4px; font-size: var(--fs-xs); color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; } /* Раньше разделители красились в цвет линий — 1,15:1 к карточке, то есть их попросту не было видно и мета-строка читалась как набор слов через пробел. */ .meta .sep { color: var(--ink-faint); } .chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 20px; padding: 1px 8px; font-size: var(--fs-xxs); color: var(--ink-soft); text-decoration: none; } .chip:hover { border-color: var(--ink-faint); color: var(--ink); } .chip.unread { border-color: var(--today); color: var(--today); font-weight: 560; } .chip.role { border-style: dashed; } .chip.turn { border-color: var(--week); color: var(--week); font-weight: 560; } /* ── сверки: что с задачей не так ─────────────────────── */ .checks { margin: 7px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; } .check { font-size: var(--fs-xs); line-height: 1.4; color: var(--ink-soft); padding-left: 11px; border-left: 2px solid var(--line); } .check.высокая { border-left-color: var(--overdue); color: var(--ink); } .check.средняя { border-left-color: var(--soon); } .chip.mention { border-color: var(--mention); color: var(--mention); } /* Непрочитанное упоминание — единственная залитая метка в списке: это то, мимо чего пройти нельзя, всё остальное только обведено. */ .chip.mention.new { background: var(--mention); color: var(--card); font-weight: 620; } .chip.deal-closed { text-decoration: line-through; opacity: 0.7; } /* Жёсткие колонки, а не flex по содержимому. Раньше «ждёт» и «срок» получали ширину от текста, и на 25 строках выходило семь разных левых краёв: ширина «ждёт» гуляла 72–79 пикселей, «срок» — 116–128. Числа переставали читаться столбиком, а именно за этим в такой список и смотрят. */ .task-right { display: grid; grid-template-columns: 92px 132px 76px; align-items: center; gap: 0 14px; padding: 11px 13px 11px 0; text-align: right; } /* В «Наблюдаю» правки срока нет ни у одной строки — третий столбец там лишний. */ .task.readonly .task-right { grid-template-columns: 92px 132px; } .waited { font-size: var(--fs-xxs); color: var(--ink-soft); line-height: 1.5; white-space: nowrap; } .waited b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; } .due { white-space: nowrap; } .due-date { font-size: var(--fs-sm); font-weight: 580; font-variant-numeric: tabular-nums; } .due-rel { font-size: var(--fs-xxs); color: var(--accent); font-weight: 560; } .due.none .due-date { color: var(--nodate); } .locked { font-size: var(--fs-xxs); color: var(--ink-faint); white-space: nowrap; cursor: help; } /* ── карточка описания при наведении ──────────────────── */ /* Появление через @starting-style: элемент прячется атрибутом hidden, то есть переходит из display: none, и обычный transition на нём не срабатывает — начального состояния просто нет. allow-discrete добавляет и обратный ход, иначе карточка исчезала бы рывком. */ .hovercard { opacity: 1; transform: translateY(0); transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease-out), display var(--dur-fast) allow-discrete; position: fixed; z-index: var(--z-hovercard); width: min(520px, calc(100vw - 32px)); max-height: 44vh; overflow-y: auto; overscroll-behavior: contain; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; box-shadow: 0 10px 34px light-dark(rgba(20, 25, 30, 0.18), rgba(0, 0, 0, 0.5)); } .hovercard[hidden] { opacity: 0; transform: translateY(4px); } @starting-style { .hovercard:not([hidden]) { opacity: 0; transform: translateY(4px); } } .hovercard-title { margin: 0 0 7px; font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; color: var(--ink); } .hovercard-body { font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-soft); /* Описания приходят плоским текстом с переносами — их надо сохранить, иначе цитаты из чатов и списки слипаются в кашу. */ white-space: pre-wrap; overflow-wrap: anywhere; } .hovercard-body.empty { color: var(--ink-faint); font-style: italic; } /* Ссылка в Битрикс нужна только на телефоне: там тап по названию открывает эту карточку вместо перехода, потому что наведения на сенсорном экране нет. На настольном названием остаётся обычная ссылка, и дублировать её незачем. */ .hovercard-open { display: none; margin-top: 12px; font-size: var(--fs-sm); font-weight: 550; color: var(--week); text-decoration: none; } /* ── диалог переноса срока ────────────────────────────── */ .sheet { position: fixed; inset: 0; background: var(--scrim); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: var(--z-sheet); opacity: 1; transition: opacity var(--dur) var(--ease), display var(--dur) allow-discrete; } .sheet[hidden] { opacity: 0; } @starting-style { .sheet:not([hidden]) { opacity: 0; } } .sheet-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; width: min(460px, 100%); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); transform: translateY(0) scale(1); transition: transform var(--dur) var(--ease-out); } /* Затемнение гаснет, карточка приподнимается — вместе это читается как «диалог пришёл», а не «страница моргнула». */ .sheet[hidden] .sheet-card { transform: translateY(8px) scale(0.98); } @starting-style { .sheet:not([hidden]) .sheet-card { transform: translateY(8px) scale(0.98); } } .sheet-card h2 { margin: 0 0 10px; font-size: var(--fs-lead); font-weight: 640; } .sheet-task { margin: 0 0 4px; font-weight: 530; line-height: 1.35; } .sheet-was { margin: 0 0 14px; font-size: var(--fs-sm); color: var(--ink-soft); } .quick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .quick .btn.on { border-color: var(--ink); background: var(--line-soft); font-weight: 580; } .pick { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--fs-sm); color: var(--ink-soft); margin-bottom: 14px; } .pick input { border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 7px; padding: 6px 9px; font: inherit; font-size: var(--fs-sm); } .sheet-note { margin: 0 0 12px; font-size: var(--fs-xs); color: var(--ink-faint); line-height: 1.4; } .sheet-error { margin: 0 0 12px; font-size: var(--fs-sm); color: var(--overdue); } .sheet-actions { display: flex; justify-content: flex-end; gap: 8px; } /* ── телефон ──────────────────────────────────────────── */ @media (max-width: 720px) { body { padding: 0 12px; /* Место под нижний бар: без него последние строки списка уезжают под него и до них не долистать. */ padding-bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom, 0px) + 24px); } .top { flex-direction: column; align-items: stretch; gap: 10px; padding: 16px 0 12px; } h1 { font-size: var(--fs-lead); } .who { font-size: var(--fs-xs); } .top-right { flex-wrap: wrap; justify-content: flex-start; gap: 8px; } /* Время обновления уходит отдельной строкой: втроём с темой и кнопкой в 375 пикселей они не встают. */ .stamp { order: -1; flex: 1 1 100%; } /* Верхние вкладки заменяет нижний бар — дублировать навигацию незачем. */ .tabs { display: none; } .bottombar { display: flex; } .tab-bar { flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .tab-hint { flex: 1 1 100%; } /* Шесть плашек в ряд на телефоне превращаются в нечитаемые полоски. */ .summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; } .tile { padding: 8px 10px; } .note { grid-column: 1 / -1; padding: 0 2px; } .bucket { margin-bottom: 20px; } .bucket-head .hint { display: none; /* подсказка корзины дублирует её название и съедает ширину */ } .task-slide { grid-template-columns: 4px 26px 1fr; } /* Правый блок переезжает под заголовок и выравнивается по левому краю. Жёсткие 92 + 132 + 76 туда не влезают — блок вылезал за экран и обрезался вместе с кнопкой «Срок». Столбиком числа здесь всё равно не читаются: строки идут друг под другом, так что ширину отдаём содержимому. */ .task-right { grid-column: 2 / -1; grid-template-columns: auto auto auto; justify-content: start; align-items: center; gap: 0 16px; padding: 0 13px 10px 4px; text-align: left; } .task.readonly .task-right { grid-template-columns: auto auto; } /* Палец — не курсор: цель меньше сорока пикселей по высоте не нажимается. */ .btn, .theme button { min-height: 40px; } .btn.tiny { min-height: 36px; } /* Метки сделок и компаний — тоже ссылки, а высоты у них было 20 пикселей. До рекомендованных 44 их не растянуть, не разорвав строку, но 30 с большим просветом между ними уже позволяют попасть пальцем. */ .meta { gap: 6px 8px; } .chip { min-height: 30px; padding: 3px 11px; } /* Карточка описания и диалог переезжают вниз экрана — там, где большой палец. */ .hovercard { left: 8px; right: 8px; top: auto; bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom, 0px) + 8px); width: auto; max-height: 55vh; } .hovercard-open { display: block; } .sheet { align-items: flex-end; padding: 0; } .sheet-card { width: 100%; border-radius: 14px 14px 0 0; border-bottom: none; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); } /* Снизу экрана уместнее выезд, а не подъём с уменьшением. */ .sheet[hidden] .sheet-card { transform: translateY(100%); } @starting-style { .sheet:not([hidden]) .sheet-card { transform: translateY(100%); } } .quick .btn { flex: 1 1 auto; } /* Сообщение об отмене не должно закрывать нижний бар. */ .toast { left: 12px; right: 12px; bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom, 0px) + 10px); transform: none; max-width: none; } .toast[hidden] { transform: translateY(10px); } @starting-style { .toast:not([hidden]) { transform: translateY(10px); } } /* Горизонтальный жест забираем себе, вертикальную прокрутку оставляем браузеру — иначе список перестанет листаться. */ .task-slide { touch-action: pan-y; } } /* ── переезд строк между корзинами ────────────────────── */ /* Каждая строка получает своё имя перехода, и браузер сам довозит её от старого места к новому, когда список перерисовывается внутри startViewTransition. Без этого задача после правки срока просто исчезала из одной корзины и появлялась в другой. */ ::view-transition-group(*) { animation-duration: var(--dur-slow); animation-timing-function: var(--ease); } /* Появление и исчезновение — только прозрачностью: подъезд уже описан самим переходом группы, а двойное движение читается как суета. */ ::view-transition-old(*), ::view-transition-new(*) { animation-duration: var(--dur); } /* ── фильтры вкладки: люди и смысловые категории ─────────── */ /* Панель стоит между шапкой вкладки и сводкой: фильтр меняет то, что показано ниже, и должен стоять над этим, а не сбоку. Категории — кнопками, потому что по ним щёлкают часто; люди — списком, потому что их бывает дюжина, и дюжина кнопок съела бы две строки экрана ради жеста, который делают раз в день. */ .filters { max-width: 1060px; margin: 0 auto 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; } .filter-people { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--ink-soft); } .filter-people select { font: inherit; font-size: var(--fs-sm); color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; max-width: 260px; } .filter-people select:hover { border-color: var(--ink-faint); } .filter-cats { display: flex; flex-wrap: wrap; gap: 6px; } .cat { font: inherit; font-size: var(--fs-xs); color: var(--ink-soft); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .cat:hover { border-color: var(--ink-faint); color: var(--ink); } /* Выбранная категория залита, а не обведена: обводку на кнопке-таблетке легко спутать с наведением, а залитая читается как состояние. */ .cat.on { background: var(--ink); border-color: var(--ink); color: var(--card); } .cat i { font-style: normal; font-size: var(--fs-xxs); opacity: 0.7; } /* ── вкладка аналитики ───────────────────────────────────── */ .stats { max-width: 1060px; margin: 0 auto; } .stats-periods { display: flex; gap: 6px; margin-bottom: 16px; } .stats-periods .btn.on { background: var(--ink); border-color: var(--ink); color: var(--card); } .stats-top { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .stats-block { margin: 26px 0; } /* Линия между разделами сводки. На экране рейтингов около четырёхсот строк мелким кеглем, и один шестнадцатипиксельный заголовок среди них не читается как граница: «Личные дела» начинались там же, где кончались номинации. Линия дешевле, чем ещё одна ступень в шкале кеглей, и не спорит с числами. */ .stats-block + .stats-block { border-top: 1px solid var(--line-soft); padding-top: 22px; } .stats-block h2 { font-size: var(--fs-lead); margin: 0 0 4px; } .stats-hint { margin: 0 0 10px; font-size: var(--fs-xs); color: var(--ink-faint); max-width: 70ch; } .stats-table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; } .stats-table tr + tr { border-top: 1px solid var(--line-soft); } .stats-table td { padding: 8px 12px; vertical-align: middle; } .stats-table .who { font-size: var(--fs-sm); color: var(--ink); width: 42%; } /* Должность — второй строкой и мелко: она объясняет число, но не должна спорить с именем за внимание. */ .stats-table .who i { display: block; font-style: normal; font-size: var(--fs-xxs); color: var(--ink-faint); } .stats-table .arrow { color: var(--ink-faint); padding: 0 2px; } .stats-table .num { font-size: var(--fs-sm); color: var(--ink); white-space: nowrap; } .stats-table .num b { display: inline-block; min-width: 3ch; text-align: right; } .stats-table .num.sub { color: var(--ink-faint); font-size: var(--fs-xs); text-align: right; width: 16%; } /* Полоска доли. Ширина в процентах от лидера строки-максимума: разрыв между первым и вторым местом виден мгновенно, а по столбику цифр его надо вычитать. */ .bar { display: inline-block; height: 8px; width: var(--w, 0%); min-width: 2px; max-width: 320px; margin-left: 8px; border-radius: 4px; background: var(--bc, var(--ink-faint)); vertical-align: middle; opacity: 0.75; } @media (max-width: 720px) { .filters, .stats { padding: 0 12px; } .filter-people select { max-width: 100%; } /* На узком экране должность и «столько-то себе» уводят таблицу в прокрутку. Имя и главное число важнее — остальное прячем. */ .stats-table .num.sub { display: none; } .stats-table .who { width: 60%; } /* Полоска считается в процентах от ячейки, а рядом с ней в той же строке стоит число, и вместе они вылезали за правый край экрана. На узком экране полоска — украшение, число — смысл, поэтому режем полоску. */ .bar { max-width: 25vw; } } /* Оценка срока по истории похожих задач. Метки нарочно скромные — обведённые, как и остальные, кроме непрочитанного упоминания. Оценка полезна, но это фон, а не то, мимо чего нельзя пройти: залить её значило бы поспорить со «светофором» сроков, который в этой строке и есть главное. */ .chip.est { border-color: var(--line); color: var(--ink-faint); } .chip.est-slow, .chip.est-heavy { color: var(--ink-soft); } /* «Из чата» — метка происхождения задачи. Единственная в строке, которая ведёт не в саму задачу и не в карточку CRM, а в переписку, откуда задачу вырезали. Цветом взята бирюза упоминаний: и то и другое про разговор, а не про сроки, и со «светофором» корзин не спорит. */ .chip.from-chat { border-color: var(--mention); color: var(--mention); } .chip.from-chat:hover { background: var(--mention); color: var(--card); } /* Сделка, на которую сослались в тексте. Пунктир — потому что связь тут слабее привязки: человек упомянул карточку, а не заявил, что задача про неё. */ .chip.mentioned-deal { border-style: dashed; } /* ── главная ─────────────────────────────────────────────── */ .home .stats-block:first-child { margin-top: 0; } /* «Начать с этого» — нумерованный список, а не таблица: у него есть порядок, и порядок здесь и есть содержание. Номер набран крупно и приглушённо, чтобы читался как ступень, а не как счётчик. */ .first-list { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; } /* Полоска причины слева. Главная была единственным экраном приложения, где не было ни одного цветного знака: шесть строк с шестью разными причинами выглядели одной серой стопкой, и выбрать, с чего начать, приходилось чтением, а не взглядом. Цвет здесь тот же, что и в списке задач, — бирюза «вас позвали», оранжевый «сегодня», красный «срок прошёл». */ .first-list li { display: flex; align-items: baseline; gap: 12px; padding: 10px 14px; border-left: 3px solid var(--rule, transparent); } .first-list li + li { border-top: 1px solid var(--line-soft); } .first-list .num { font-size: var(--fs-lead); font-weight: 600; color: var(--rule, var(--ink-faint)); min-width: 1.2em; } .first-list li > div { flex: 1; min-width: 0; } .home-task { display: block; color: var(--ink); text-decoration: none; font-weight: 530; } .home-task:hover { text-decoration: underline; } /* Причина — второй строкой и мелко: она объясняет место в списке, но спорить с названием задачи за внимание не должна. */ .first-list .why { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--ink-soft); } /* Красится сама причина, а не вся строка: «просрочено на 12 дней» и «ждёт 40 дней» уточняют её, но не объясняют, почему задача наверху. */ .first-list .why b { font-weight: 560; color: var(--rule, var(--ink-soft)); } .first-list .where { font-size: var(--fs-xxs); color: var(--ink-faint); white-space: nowrap; } /* Пустой список здесь — хорошая новость, и выглядеть он должен спокойно, а не как ошибка. */ .first-list .calm { color: var(--ink-soft); font-size: var(--fs-sm); } @media (max-width: 720px) { .first-list .where { display: none; } } /* Тема на главной. Не строка таблицы, а карточка с репликами: смысл темы — в словах, а не в числе сообщений, и слова должны занимать больше места, чем счётчик. */ .topic { background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 10px 14px; margin-bottom: 8px; } .topic header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 6px; } /* Бирюзой: во всём приложении этот цвет значит «разговор, где есть вы» — от непрочитанного упоминания в списке до номинации «Голос» в рейтингах. */ .topic-title { color: var(--mention); text-decoration: none; font-weight: 560; font-size: var(--fs-sm); } .topic-title:hover { text-decoration: underline; } .topic-meta { font-size: var(--fs-xxs); color: var(--ink-faint); } /* Реплики притушены и набраны мельче названия: это цитаты, а не заголовки. Имя автора выделено весом — в разговоре важно, кто говорит. */ .topic .reply { margin: 3px 0 0; font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.45; } .topic .reply b { color: var(--ink); font-weight: 560; } .topic .reply.empty { color: var(--ink-faint); font-style: italic; } /* Шапка таблицы аналитики: мелко и приглушённо — она объясняет столбцы, а не спорит с числами за внимание. */ .stats-table .head td { font-size: var(--fs-xxs); color: var(--ink-faint); padding-bottom: 4px; text-transform: lowercase; } /* ── вкладка рейтингов ───────────────────────────────────── */ /* Номинации плиткой. Ширина колонки 300 пикселей взята по самому длинному содержимому карточки — оговорке в две-три строки: на 260 оговорка занимала пять строк и карточка переставала читаться с одного взгляда. */ .noms { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; } /* Цвет карточки — семья показателя, а не украшение: синим то, что про сделанное, бирюзовым — про участие в работе, сиреневым — про её устройство, где число вообще не заслуга человека. Полоска сверху — тот же приём, что у плиток сводки: заводить на одном экране второй способ показать принадлежность незачем. */ .nom { --nom: var(--later); background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--nom); border-radius: 9px; padding: 12px 14px 10px; display: flex; flex-direction: column; } /* Звание — единственное игрушечное место экрана, и оно намеренно набрано мелко и приглушённо. Крупное весёлое слово над числом превращает факт в оценку, а здесь всё наоборот: шутка в подписи, честность в числе. */ .nom.f-result { --nom: var(--week); } .nom.f-part { --nom: var(--mention); } .nom.f-setup { --nom: var(--nodate); } /* Точки в подписи к разделу: без них три цвета карточек — загадка, а не язык. */ .legend { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; white-space: nowrap; } .legend i { width: 8px; height: 8px; border-radius: 2px; background: var(--dot); } .nom-badge { margin: 0; font-size: var(--fs-xxs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--nom); } .nom h3 { margin: 2px 0 0; font-size: var(--fs-base); font-weight: 600; } .nom-what { margin: 2px 0 8px; font-size: var(--fs-xs); color: var(--ink-soft); } /* Победитель: имя и число в одной строке, число прижато вправо — глаз идёт по именам, а числа стоят столбиком и сравниваются между карточками. */ .nom-first { margin: 0; display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-base); } .nom-first b { font-weight: 600; } /* Число победителя — единственная точка входа в карточку, а было оно 16 пикселями против 15 у имени: глазу не за что зацепиться. Взят кегль чисел в плитках сводки — новых ступеней шкала не завела. */ .nom-first .nom-val { margin-left: auto; font-size: var(--fs-h1); line-height: 1; font-weight: 620; font-variant-numeric: tabular-nums; color: var(--nom); white-space: nowrap; } .nom-first i, .nom-rest i { font-style: normal; font-size: var(--fs-xxs); color: var(--ink-faint); white-space: nowrap; } .nom-pos { margin: 1px 0 0; font-size: var(--fs-xxs); color: var(--ink-faint); } .nom-rest { list-style: none; margin: 6px 0 0; padding: 0; } .nom-rest li { display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-sm); color: var(--ink-soft); padding: 2px 0; } .nom-rest li b { margin-left: auto; font-weight: 600; color: var(--ink); } /* Формула стоит на карточке текстом, а не в подсказке под курсором: число, формулу которого надо искать, читается как приговор. Отделена линией сверху — это уже не про людей, а про способ счёта. */ .nom-formula { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--line-soft); font-size: var(--fs-xxs); color: var(--ink-faint); line-height: 1.45; } /* Оговорка — там же, где число, и заметнее формулы: «больше всех написал в чатах» без слов «это факт, а не заслуга» читается как оценка. */ .nom-caveat { margin: 6px 0 0; padding-left: 8px; border-left: 2px solid var(--soon); font-size: var(--fs-xxs); color: var(--ink-soft); line-height: 1.45; } /* Личные дела — восемь столбцов, и на телефоне они не помещаются никак. Прокрутка внутри рамки честнее, чем спрятанные столбцы: скрыть половину фактов о человеке и оставить остальные — это уже выбор за читателя. */ .wide { overflow-x: auto; } /* Шапка «личных дел» едет вместе с прокруткой: в таблице 25 строк и восемь столбцов, и к середине списка «39» и «91» в соседних клетках снова становятся числами без названия — ровно та ошибка, из-за которой заголовки столбцов здесь и появились. Две ловушки, и обе стоили попытки. ПЕРВАЯ: обёртка с overflow-x: auto — это область прокрутки по ОБЕИМ осям, браузер сам доводит overflow-y до auto. Прилипшая ячейка внутри липнет к ней, а не к экрану, а высота у обёртки по содержимому — прокручивать внутри нечего, и шапка уезжает вместе со всей таблицей. Поэтому на широком экране горизонтальная прокрутка обёртке не нужна вовсе: таблица в 720 пикселей помещается в колонку 1060 целиком. ВТОРАЯ: у .stats-table стоит overflow: hidden ради скруглённых углов — и это тоже область прокрутки, теперь уже сама таблица. Для этой таблицы скругление снимаем: своего фона у строк нет, так что видно ничего не станет, а шапка получает возможность двигаться. На узком экране прокрутка обёртки остаётся горизонтальной, и шапка там не липнет: заводить телефону вложенную вертикальную прокрутку внутри страницы — лечение хуже болезни. */ @media (min-width: 721px) { .wide { overflow: visible; } } .people-table { min-width: 720px; overflow: visible; } .people-table .head td { position: sticky; top: 0; z-index: 1; /* Непрозрачный фон обязателен: под шапкой едут строки. */ background: var(--card); padding-top: 10px; padding-bottom: 6px; /* Линия под шапкой нарисована тенью, а не рамкой: при border-collapse: collapse рамка принадлежит таблице и с прилипшей ячейкой не едет — строки подтекали бы под заголовки без всякой границы. */ box-shadow: inset 0 -1px 0 var(--line); } .people-table td { padding: 7px 10px; } .people-table .who { width: 22%; min-width: 160px; } .people-table .num { text-align: right; font-variant-numeric: tabular-nums; } /* Пояснение под числом: из каких потоков сложилось «закрыл», по скольким задачам посчитан срок, сколько из открытых просрочено. Без него столбец врёт ровно так же, как таблица без шапки. */ .people-table .num i { display: block; font-style: normal; font-size: var(--fs-xxs); color: var(--ink-faint); white-space: nowrap; } /* Красное здесь значит ровно то же, что и в списке задач: срок прошёл. Это единственный цвет в таблице личных дел — сравнивать людей полосками нельзя, а показать, у кого копится просроченное, надо. */ .people-table .num i.late { color: var(--overdue); } /* А просрочка СВОЕГО списка красной быть не должна, и это не мелочь: у главного конструктора таких 90 из 109. Срок, поставленный самому себе, — заметка, а не обещание коллеге, и кричать о ней тем же цветом, что и о сорванном обещании, значит соврать про человека прямо на общем экране. */ .people-table .num i.late.own { color: var(--ink-faint); } /* Столбец объяснения. Не `.num.sub`, хотя выглядит похоже: на узком экране стили прячут `.num.sub` целиком, и в таблицах «чего здесь нет» и «мимо системы задач» от строки осталось бы одно название с пустотой справа — то есть ровно тот вид, ради которого рейтинг и закрывают навсегда. Здесь объяснение и есть содержание строки, поэтому оно остаётся всегда. */ .stats-table .why { font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.45; } .stats-table .why i { font-style: normal; color: var(--ink-faint); } .stats-table .head .why { font-size: var(--fs-xxs); color: var(--ink-faint); text-transform: lowercase; } /* ── страница входа ──────────────────────────────────────── */ /* Появляется только в серверном режиме: на 127.0.0.1 пароля нет, потому что до петлевого адреса дотягивается лишь тот, кто уже сидит за машиной. Стили и значок — единственное, что сервер отдаёт без пароля, и данных портала в них нет ни строки. */ .login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; } .login { width: min(360px, 100%); background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--mention); border-radius: 9px; padding: 22px 22px 20px; } .login h1 { font-size: var(--fs-lead); margin: 0; } .login-hint { margin: 4px 0 18px; font-size: var(--fs-xs); color: var(--ink-faint); } .login label { display: block; } .login label span { display: block; font-size: var(--fs-xs); color: var(--ink-soft); margin-bottom: 4px; } /* Поле во всю ширину и кегль не мельче 16 пикселей: на iOS и Android браузер сам приближает страницу к любому полю мельче, и после ввода пароля экран остаётся увеличенным — приложение открывается «сломанным». */ .login input { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 9px 11px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; } .login input:focus-visible { outline: 2px solid var(--week); outline-offset: 1px; } .login .btn { width: 100%; margin-top: 14px; padding: 9px; } .login-error { margin: 10px 0 0; font-size: var(--fs-xs); color: var(--overdue); } /* Карточка ключа в телефонной версии. Центрируется внутри списка, а не телом страницы: класс login-page на делает флекс-контейнером всю страницу, и шапка со списком встают в две колонки — на узком экране карточка от этого сжимается вдвое, а половину экрана занимают кнопки тем. */ .list.login-holder { display: flex; align-items: center; justify-content: center; min-height: 70vh; padding: 16px; } /* ── ожидание долгого счёта ─────────────────────────────── */ /* Пятнадцать секунд неподвижного текста читаются как «повисло», и человек жмёт кнопку заново — начиная всё сначала. Полоса показывает, что работа идёт, а подпись под ней — что именно читается и сколько из скольких. */ .loading { max-width: 420px; margin: 48px auto; text-align: center; } .loading-bar { height: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; position: relative; } /* Два состояния одной полосы. Пока неизвестно, сколько всего, — бегунок ходит из края в край: это честное «идёт, конца не знаю». Как только клиент сообщил числа, полоса становится обычной и растёт слева направо. */ .loading-bar i { display: block; position: absolute; top: 0; bottom: 0; width: 38%; border-radius: 3px; background: var(--mention); animation: loading-run 1.15s var(--ease, ease-in-out) infinite; } @keyframes loading-run { 0% { left: -38%; } 100% { left: 100%; } } .loading-text { margin: 12px 0 0; font-size: var(--fs-sm); color: var(--ink-soft); } /* Строка хода: моноширинные цифры, иначе числа дёргают строку при каждом обновлении и текст «прыгает» на месте. */ .loading-sub { margin: 3px 0 0; min-height: 1.3em; font-size: var(--fs-xs); color: var(--ink-faint); font-variant-numeric: tabular-nums; } /* Тем, кто просил не двигать картинку, бегунок не показываем: вместо него — ровная приглушённая полоса. Смысл «идёт работа» несёт и она. */ @media (prefers-reduced-motion: reduce) { .loading-bar i { position: static; width: 100%; animation: none; opacity: 0.35; } } /* ── лист отчётов ───────────────────────────────────────── */ .reports-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 4px; } .report-row { display: block; width: 100%; text-align: left; padding: 10px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; font: inherit; color: var(--ink); cursor: pointer; } .report-row.on { border-color: var(--mention); } .report-title { display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-base); font-weight: 560; } /* Счётчик новых событий: он единственный, что здесь меняется со временем. */ .report-title i { font-style: normal; font-size: var(--fs-xs); font-weight: 600; color: var(--mention); } .report-hint { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--ink-faint); } /* Точка вместо числа упоминаний в нижнем баре: сколько именно, на бегу неважно — важно, что они есть. */ .bb-nums .at.dot { font-size: 14px; line-height: 1; }