/* ============================================================ AVE TASKS — слой реcкина сабаппа задач (Фаза 3b). Задачи — #tasks-pane в #app (показ по body.tk-active); попапы/деталь монтируются в body. Поэтому ave-shell.js вешает .ave-root на → этот сабапп и его оверлеи получают токены AVE + моно-шрифт. Здесь — БЕЗОПАСНЫЕ визуальные правила (фон/рамка/цвет/радиус/шрифт) поверх хардкод-стилей; раскладку доски (flex колонок) НЕ трогаем — она инлайн/в style.css. Цвета статусов/приоритетов/тегов задаются инлайн из данных и остаются как есть. Дентные вторичные виджеты (календарь-сетка, кастомные поля, меню тегов) подхватывают шрифт/палитру без доводки. См. РЕДИЗАЙН-AVE.md, Фаза 3. ============================================================ */ /* ---------- P0: МОНО-ШРИФТ (пропущенный ремап — у boards/calls он был, у задач нет). Весь сабапп + его body-оверлеи (.tk-mback модалки/деталь, .tk-toast): ремапим токены и задаём font-family напрямую (перекрывает и var(--sans) в правилах, и наследование от body). */ body.ave-root #tasks-pane, body.ave-root .tk-mback, body.ave-root .tk-toast { --sans: var(--font-mono); --mono: var(--font-mono); font-family: var(--font-mono); } /* полосы прокрутки ВНУТРИ панели задач — тонкие/полупрозрачные ДЛЯ ВСЕХ скроллеров (стрелки на полосе показали, что скроллил не .tk-view, а другой элемент — накрываем панель и всех потомков разом) */ body.ave-root #tasks-pane, body.ave-root #tasks-pane .tk-view, body.ave-root #tasks-pane .tk-pteam { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--line) 60%, transparent) transparent; } body.ave-root #tasks-pane::-webkit-scrollbar, body.ave-root #tasks-pane ::-webkit-scrollbar { width: 8px; height: 8px; } body.ave-root #tasks-pane::-webkit-scrollbar-track, body.ave-root #tasks-pane ::-webkit-scrollbar-track { background: transparent; } body.ave-root #tasks-pane::-webkit-scrollbar-button, body.ave-root #tasks-pane ::-webkit-scrollbar-button { display: none; width: 0; height: 0; } body.ave-root #tasks-pane::-webkit-scrollbar-thumb, body.ave-root #tasks-pane ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--line) 60%, transparent); border-radius: 6px; border: 0; } body.ave-root #tasks-pane:hover::-webkit-scrollbar-thumb, body.ave-root #tasks-pane :hover::-webkit-scrollbar-thumb { background: var(--line); } /* классический flex-фикс: без min-height растущий .tk-view выталкивал панель и скроллил внешний контейнер */ body.ave-root #tasks-pane .tk-view { min-height: 0; } /* ---------- P3b: канбан под прототип (переработка по сверке скринов) ---------- */ /* доска: БЕЗ принудительной высоты (min-height:100% базы + шапка в том же скроллере = вечная полоса прокрутки) */ .ave-root #tasks-pane .tk-board { min-height: 0; } /* колонки: РАВНЫЕ во всю ширину и ПРОЗРАЧНЫЕ — карточки лежат прямо на поле, как в прототипе (база: width:272px; flex:none + своя панель-рамка — источник «узких сбитых влево окон») */ .ave-root #tasks-pane .tk-col { flex: 1 1 0; width: auto; max-width: none; max-height: none; background: transparent; border: 0; border-radius: 0; } .ave-root #tasks-pane .tk-colbody { padding: 13px 2px; gap: 14px; overflow: visible; } /* шапка колонки — цветная пилюля статуса (цвет из --colc, ставится рендерером) */ .ave-root #tasks-pane .tk-colh { background: color-mix(in srgb, var(--colc, var(--line)) 15%, var(--panel)); border: 1px solid color-mix(in srgb, var(--colc, var(--line)) 38%, transparent); border-radius: 11px; padding: 9px 13px; font: var(--fw-semibold) 12.5px var(--font-mono); color: var(--ink); } .ave-root #tasks-pane .tk-coln { margin-left: auto; border-radius: 999px; padding: 1px 8px; font-size: 10.5px; background: color-mix(in srgb, var(--bg) 55%, transparent); color: var(--muted); } /* карточка: чистая панель БЕЗ видимой рамки в покое (так эталон и читается на поле; рамка проявляется лишь по ховеру) + укрощён базовый ховер: без прыжка translateY и чёрного гало 0 10px 22px */ .ave-root #tasks-pane .tk-card { position: relative; border-radius: 11px !important; border: 1px solid transparent !important; background: var(--panel); padding: 12px 13px; } .ave-root #tasks-pane .tk-card:hover { border-color: color-mix(in srgb, var(--line) 80%, transparent) !important; background: var(--panel-2); transform: none; box-shadow: 0 6px 16px rgba(0, 0, 0, .28); } .ave-root #tasks-pane .tk-card .tk-cttl { display: flex; align-items: center; gap: 8px; font: var(--fw-semibold) 14px var(--font-mono); } .ave-root #tasks-pane .tk-card .ave-priomark { width: 18px; height: 18px; font-size: 10.5px; margin: 0; flex: none; } /* серое описание в 2 строки */ .ave-root #tasks-pane .tk-cdesc { margin: 6px 1px 0; color: var(--muted); font: var(--fw-regular) 12px/1.55 var(--font-mono); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* нижний ряд: мета (проект/дата/подзадачи) слева, аватар справа; пин — в правом нижнем углу рядом */ .ave-root #tasks-pane .tk-card .ave-cfoot { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-right: 26px; } .ave-root #tasks-pane .tk-card .ave-cfoot .tk-cmeta { margin: 0; flex: 1 1 auto; min-width: 0; } .ave-root #tasks-pane .tk-card .tk-cardav { position: static; margin: 0 0 0 auto; flex: none; } .ave-root #tasks-pane .tk-card .ave-pinh { position: absolute; right: 10px; bottom: 13px; opacity: .4; } .ave-root #tasks-pane .tk-card:hover .ave-pinh, .ave-root #tasks-pane .tk-card .ave-pinh:hover { opacity: 1; } /* ---------- P2b: группы и строки под прототип ---------- */ .ave-root #tasks-pane .tk-msec-lbl { text-transform: none; letter-spacing: .01em; font: var(--fw-semibold) 13.5px var(--font-mono); color: var(--ink); } .ave-root #tasks-pane .tk-msec-head { padding: 13px 6px 9px; gap: 8px; } .ave-root #tasks-pane .tk-msec-sq { width: 10px; height: 10px; border-radius: 3px; flex: none; } .ave-root #tasks-pane .tk-msec-go { margin-left: auto; } /* «+ задача» — у правого края: сам прижимается, если в группе нет «открыть →» (Личные) */ .ave-root #tasks-pane .tk-msec-plus { margin-left: auto; } .ave-root #tasks-pane .tk-msec-go + .tk-msec-plus { margin-left: 10px; } /* пустые редакторы молчат, пока не наведёшься на строку (прототип: пусто = ничего) */ .ave-root #tasks-pane .tk-trow .tk-prio0, .ave-root #tasks-pane .tk-trow .tk-duepill.tk-empty, .ave-root #tasks-pane .tk-trow .tk-tagadd { opacity: .16; transition: opacity .12s ease; } .ave-root #tasks-pane .tk-trow:hover .tk-prio0, .ave-root #tasks-pane .tk-trow:hover .tk-duepill.tk-empty, .ave-root #tasks-pane .tk-trow:hover .tk-tagadd { opacity: .85; } /* пин виден всегда (в прототипе постоянный), по ховеру ярче */ .ave-root #tasks-pane .tk-trow .ave-pinh { opacity: .45; } .ave-root #tasks-pane .tk-trow:hover .ave-pinh, .ave-root #tasks-pane .ave-pinh:hover { opacity: 1; } .ave-root #tasks-pane .tk-msec-plus { flex: none; cursor: pointer; border: 1px solid color-mix(in srgb, var(--line) 85%, transparent); background: color-mix(in srgb, var(--panel) 60%, var(--bg)); color: var(--muted); border-radius: 9px; padding: 4px 10px; font: var(--fw-medium) 11px var(--font-mono); } .ave-root #tasks-pane .tk-msec-plus:hover { color: var(--ink); border-color: var(--line); } /* мини-аватар исполнителя на строке (applyAvatar: фон-картинка или буква) */ .ave-root #tasks-pane .tk-rowav { flex: none; width: 22px; height: 22px; margin-left: 2px; border-radius: 7px; overflow: hidden; background: var(--panel-2) center/cover no-repeat; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font: 700 10px var(--font-mono); color: var(--muted); } /* компакт как в прототипе: постоянный addbar группы скрыт — вызывается чипом «+ задача» */ .ave-root #tasks-pane .tk-msec-body > .tk-addbar { display: none; } .ave-root #tasks-pane .tk-msec-body.tk-addshow > .tk-addbar { display: flex; } /* дроп-зона «сделать верхнего уровня» — тихая полоска, раскрывается при перетаскивании */ .ave-root #tasks-pane .tk-rootzone { font-size: 0; padding: 0; height: 8px; border-color: transparent; } .ave-root #tasks-pane .tk-rootzone.tk-drop { font-size: 11px; padding: 8px; height: auto; border-color: var(--signal); } /* ---------- шапка сабаппа + вкладки (P2a: прототипный хром — прозрачный верх, плавающая пилюль-группа) ---------- */ .ave-root #tasks-pane .tk-top { border-bottom: 0; background: transparent; padding-top: 10px; padding-bottom: 4px; } .ave-root #tasks-pane .tk-tabs { display: flex; gap: 2px; padding: 4px; background: color-mix(in srgb, var(--panel) 72%, var(--bg)); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: 13px; } .ave-root #tasks-pane .tk-tab { display: inline-flex; align-items: center; gap: 7px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; padding: 7px 12px; border-radius: 9px; font: var(--fw-medium) 12.5px var(--font-mono); } .ave-root #tasks-pane .tk-tab .ave-tabic { width: 13px; height: 13px; flex: none; display: block; } .ave-root #tasks-pane .tk-tab:hover { color: var(--ink-dim); } .ave-root #tasks-pane .tk-tab.tk-on { color: var(--signal); background: color-mix(in srgb, var(--signal) 12%, transparent); border-color: color-mix(in srgb, var(--signal) 38%, transparent); font-weight: 600; } /* LED-прогресс «N/M» (P2a; инъекция ave-shell.js, данные — видимые строки дерева) */ .ave-root #tasks-pane .ave-tprog { margin-left: auto; display: inline-flex; align-items: center; gap: 9px; padding: 7px 12px; border-radius: 11px; background: color-mix(in srgb, var(--panel) 72%, var(--bg)); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); } .ave-root #tasks-pane .ave-tprog-l { font: var(--fw-semibold) 10px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .ave-root #tasks-pane .ave-tprog-bar { display: inline-flex; gap: 2px; } .ave-root #tasks-pane .ave-tprog-bar i { width: 4px; height: 11px; border-radius: 1.5px; background: color-mix(in srgb, var(--line) 85%, transparent); } .ave-root #tasks-pane .ave-tprog-bar i.on { background: var(--ok); box-shadow: 0 0 6px -1px var(--ok); } .ave-root #tasks-pane .ave-tprog-n { font: var(--fw-semibold) 11.5px var(--font-mono); color: var(--ink); } /* значок приоритета СЛЕВА от названия (P2a; ! ↑ ↓ из tk-prioN; пилюля-редактор справа остаётся) */ .ave-root #tasks-pane .ave-priomark { flex: none; width: 19px; height: 19px; margin: 0 2px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 11px/1 var(--font-mono); } .ave-root #tasks-pane .ave-priomark[data-l="3"] { color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 55%, transparent); background: color-mix(in srgb, var(--danger) 14%, transparent); } .ave-root #tasks-pane .ave-priomark[data-l="2"] { color: var(--signal); border: 1px solid color-mix(in srgb, var(--signal) 50%, transparent); background: color-mix(in srgb, var(--signal) 12%, transparent); } .ave-root #tasks-pane .ave-priomark[data-l="1"] { color: var(--muted); border: 1px solid color-mix(in srgb, var(--line) 90%, transparent); background: color-mix(in srgb, var(--panel-2) 70%, transparent); } /* без приоритета — невидимая заглушка ТОЙ ЖЕ ширины: колонки чекбоксов/названий не «скачут» */ .ave-root #tasks-pane .ave-priomark[data-l="0"] { visibility: hidden; } /* фильтр охвата «Мои задачи» (Все свои/Личные/Проектные) — компактные dot-иконки, текст в тултипе */ .ave-root #tasks-pane .tk-scope.tk-scope-ic { width: 34px; height: 34px; padding: 0; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; } .ave-root #tasks-pane .tk-scope.tk-scope-ic canvas { width: 15px; height: 15px; display: block; pointer-events: none; } .ave-root #tasks-pane .tk-scope.tk-scope-ic.tk-on { border-color: color-mix(in srgb, var(--signal) 38%, transparent); background: color-mix(in srgb, var(--signal) 12%, transparent); } /* фильтр типа календаря (Всё/Задачи/Созвоны) — dot-иконка + текст как вкладки; активный = ПОЛУПРОЗРАЧНЫЙ сигнал, а не сплошная заливка (фидбек владельца 2026-07-06) */ .ave-root #tasks-pane .tk-typefilter { gap: 2px; padding: 4px; border-radius: 11px; background: color-mix(in srgb, var(--panel) 72%, var(--bg)); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); } .ave-root #tasks-pane .tk-typf.tk-typf-ic { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--muted); font: var(--fw-medium) 12.5px var(--font-mono); } .ave-root #tasks-pane .tk-typf.tk-typf-ic canvas { width: 13px; height: 13px; flex: none; display: block; pointer-events: none; } .ave-root #tasks-pane .tk-typf.tk-typf-ic:hover { color: var(--ink-dim); } .ave-root #tasks-pane .tk-typf.tk-typf-ic.tk-on { color: var(--signal); font-weight: 600; background: color-mix(in srgb, var(--signal) 12%, transparent); border-color: color-mix(in srgb, var(--signal) 38%, transparent); } /* «Создать» — компактная кнопка-плюс (сигнальная, квадрат как остальные контролы) */ .ave-root #tasks-pane .tk-create-btn.tk-create-ic { width: 34px; height: 34px; padding: 0; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; } .ave-root #tasks-pane .tk-create-btn.tk-create-ic canvas { width: 15px; height: 15px; display: block; pointer-events: none; } .ave-root #tasks-pane .tk-menu, .ave-root #tasks-pane .tk-close, .ave-root #tasks-pane .tk-teamtoggle { border: 1px solid var(--line-2); background: var(--field); color: var(--muted); cursor: pointer; border-radius: 9px; padding: 0 11px; height: 34px; font: var(--fw-medium) 12.5px var(--font-mono); } .ave-root #tasks-pane .tk-menu:hover, .ave-root #tasks-pane .tk-close:hover, .ave-root #tasks-pane .tk-teamtoggle:hover { color: var(--ink); background: var(--panel-2); } /* ---------- доска: dnd-состояния (старый step-1 блок колонок/карточек ВЫРЕЗАН — он стоял НИЖЕ P3-правил и молча перебивал их: полупрозрачный фон+рамка колонки = «чёрная плашка», panel-2 у карточки. Найден рентгеном владельца из консоли 2026-07-02.) ---------- */ .ave-root #tasks-pane .tk-col.tk-drop { border: 1px solid color-mix(in srgb, var(--signal) 50%, transparent); background: color-mix(in srgb, var(--signal) 8%, transparent); border-radius: 12px; } .ave-root #tasks-pane .tk-card.tk-dragging { opacity: .6; } /* статус-теги/теги — рамка под цвет (фон/цвет ставятся инлайн из данных) */ .ave-root #tasks-pane .tk-statustag, .ave-root #tasks-pane .tk-tag, .ave-root .tk-mback .tk-tag, .ave-root .tk-tagback .tk-tag { border-radius: 6px; padding: 1px 6px; font: var(--fw-medium) 11px var(--font-mono); } /* ---------- панель «Команда» ---------- */ /* БАГФИКС 2026-07-02: #tasks-pane (весь, вместе с .tk-pteam) центрируется на 1100px по правилу P1 (ave-shell.css) — из-за этого команда прилипала к краю ЭТОЙ узкой коробки, а не к истинному правому краю экрана (как .members обычно). Вынимаем .tk-pteam из потока (.tk-stage больше не делит с ней ширину — .tk-pmain просто занимает освободившееся место) и пришпиливаем к .app (position:relative, во весь экран) её собственным position:absolute — 14px сверху/снизу как у #tasks-pane, справа впритык. */ .ave-root #tasks-pane .tk-pteam { background: var(--panel); border-left: 1px solid var(--line); position: absolute; top: 14px; right: 0; bottom: 14px; } .ave-root #tasks-pane .tk-teamhead { color: var(--muted-2); font: var(--fw-semibold) var(--fs-label) var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; border-bottom: 1px solid var(--line-2); } .ave-root #tasks-pane .tk-gear { border: 1px solid var(--line-2); background: var(--field); color: var(--muted); cursor: pointer; border-radius: 8px; padding: 4px 9px; font: 11px var(--font-mono); } .ave-root #tasks-pane .tk-tm { border-radius: 10px; } .ave-root #tasks-pane .tk-tm:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); } .ave-root #tasks-pane .tk-note { color: var(--muted-2); font: 11px/1.5 var(--font-mono); background: color-mix(in srgb, var(--stage) 45%, transparent); border: 1px solid var(--line-2); border-radius: 10px; } .ave-root #tasks-pane .tk-empty { color: var(--muted); font: 12.5px/1.6 var(--font-mono); } /* ---------- оверлеи задач (монтируются в body → под body.ave-root) ---------- */ .ave-root .tk-mback, .ave-root .tk-tagback, .ave-root .tk-tmback { background: color-mix(in srgb, var(--stage) 70%, transparent); -webkit-backdrop-filter: blur(var(--glass-blur, 8px)); backdrop-filter: blur(var(--glass-blur, 8px)); } .ave-root .tk-ipop, .ave-root .tk-tmpop, .ave-root .tk-detail, .ave-root .tk-tagmenu { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-modal); color: var(--ink-dim); } .ave-root .tk-iphead { border-bottom: 1px solid var(--line-2); color: var(--ink); font: var(--fw-semibold) var(--fs-md, 14px) var(--font-mono); } .ave-root .tk-mdx { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--field); color: var(--muted); cursor: pointer; } .ave-root .tk-mdx:hover { color: var(--ink); background: var(--panel-2); } .ave-root .tk-ps-lbl { color: var(--muted-2); font: var(--fw-semibold) var(--fs-label) var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; } /* поля ввода ВНУТРИ оверлеев задач (строго под их контейнеры) */ .ave-root .tk-ipop input[type="text"], .ave-root .tk-detail input[type="text"], .ave-root .tk-ipop textarea, .ave-root .tk-detail textarea, .ave-root .tk-detail select { border: 1px solid var(--line-2); border-radius: 9px; background: var(--field); color: var(--ink); font: 13px var(--font-mono); } .ave-root .tk-ipop input[type="text"]:focus, .ave-root .tk-detail input[type="text"]:focus, .ave-root .tk-detail textarea:focus { outline: none; border-color: color-mix(in srgb, var(--signal) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 14%, transparent); } /* ---------- тост задач ---------- */ .ave-root .tk-toast { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); box-shadow: var(--shadow-float); font: 12.5px var(--font-mono); } /* ===== строки задач: ближе к прототипу (оверрайды поверх инлайн-стилей tasks-ui) ===== */ /* статус — цветная КАПСУЛА с ведущей светящейся точкой (как ● Готово / ● В работе в прототипе) */ body.ave-root #tasks-pane .tk-statustag::before, body.ave-root .tk-tagmenu .tk-statustag::before { content: ''; flex: none; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 7px -1px currentColor; } body.ave-root #tasks-pane .tk-statustag, body.ave-root #tasks-pane .tk-priotag { border-radius: 999px; padding: 3px 11px; letter-spacing: .01em; } /* строка — как карточки: чистая панель без рамки в покое, тонкая линия по ховеру */ body.ave-root #tasks-pane .tk-trow { padding: 8px 11px; border-radius: 11px; margin: 4px 0; background: var(--panel); border: 1px solid transparent; border-bottom-color: transparent; } body.ave-root #tasks-pane .tk-trow:hover { background: var(--panel-2); border-color: color-mix(in srgb, var(--line) 80%, transparent); } /* подзадача в «Моих задачах»: отступ по глубине. Здесь, а не только в инжекте tasks-ui — шортхенд margin у .tk-trow выше (и margin:3px 0 в мобильной секции) специфичнее (1,2,1) и молча съедал margin-left инжекта (1,2,0) — та же грабля каскада. */ /* отступ — ВНУТРЕННИМ padding-left (карточка остаётся во всю ширину): margin-left сжимал строку, и когда рядок плотный, мета выталкивалась вправо — колонки уезжали от корневых строк. Коннектор сдвигаем к отступу. Инжектовый margin-left (для ?ave=0) здесь гасим. */ body.ave-root #tasks-pane .tk-trow.tk-mychild { margin-left: 0; padding-left: calc(11px + min(calc(var(--tk-depth, 1) * 26px), 78px)); } body.ave-root #tasks-pane .tk-trow.tk-mychild::before { left: calc(min(calc(var(--tk-depth, 1) * 26px), 78px) - 4px); } /* ЖЕЛЕЗНОЕ ПРАВИЛО СТРОКИ (владелец, 2026-07-06): мета (теги/статус/исполнитель/даты) НЕ двигается НИКОГДА — единственный эластичный элемент строки НАЗВАНИЕ: оно тянется на свободное место и ужимается с ellipsis при нехватке (индент вложенных, длинные пилюли, узкое окно). Распорка-спейсер из инжекта (flex:1, min-width:12) больше не нужна и гасится — иначе они с названием делили бы свободное место и мета плавала. */ body.ave-root #tasks-pane .tk-trow .tk-ttl { flex: 1 1 auto; min-width: 0; } /* min-width:0 — название сжимается ДО КОНЦА, мета не двигается даже в худшем случае */ body.ave-root #tasks-pane .tk-trow .tk-rowspacer { flex: 0 0 0; min-width: 0; } /* лестница узких окон — НИЖЕ базового блока фикс-ширин (см. конец файла): иначе база перебивает по каскаду */ /* колонки меты строк (теги/прогресс/приоритет/статус/исполнитель/срок) — ФИКСИРОВАННОЙ ширины, содержимое по центру: пилюли разной длины («высокий» vs «—») больше не сдвигают соседние колонки, всё стоит по одной вертикали во всех группах (фидбек владельца 2026-07-06). На мобайле не действует — там 2-рядная строка со своими width:auto!important (мобильная секция ниже). */ body.ave-root #tasks-pane .tk-tagcell { width: 96px; flex: none; overflow: hidden; display: inline-flex; justify-content: center; } body.ave-root #tasks-pane .tk-kids-slot { width: 44px; flex: none; display: inline-flex; justify-content: center; } body.ave-root #tasks-pane .tk-priocell { width: 96px; flex: none; display: inline-flex; justify-content: center; } /* фидбек владельца (боевой тест 2026-07-07): мета КОМПАКТНАЯ — статус = иконка, исполнитель = аватар, дата = одна DD.MM. Колонки сильно уже (было 126/126/148) → заголовку задачи в разы больше места. */ body.ave-root #tasks-pane .tk-statuscell { width: 48px; flex: none; display: inline-flex; justify-content: center; } body.ave-root #tasks-pane .tk-asg-btn { width: 54px; flex: none; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; } body.ave-root #tasks-pane .tk-duepill { width: 66px; flex: none; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; } body.ave-root #tasks-pane .tk-rowav { flex: none; } /* лестница узких окон: колонки ужимаются СТУПЕНЬКОЙ, одинаково для всех строк — вертикаль сохраняется. Пороги с запасом на открытый сайдбар (контент задач при 1100px окна ≈ 760px). ОБЯЗАТЕЛЬНО ниже базового блока выше — при равной специфичности побеждает то, что позже в файле. */ @media (min-width: 761px) and (max-width: 1420px) { body.ave-root #tasks-pane .tk-tagcell { width: 72px; } body.ave-root #tasks-pane .tk-kids-slot { width: 36px; } body.ave-root #tasks-pane .tk-priocell { width: 80px; } body.ave-root #tasks-pane .tk-statuscell { width: 46px; } body.ave-root #tasks-pane .tk-asg-btn { width: 52px; } body.ave-root #tasks-pane .tk-duepill { width: 62px; } } @media (min-width: 761px) and (max-width: 1180px) { body.ave-root #tasks-pane .tk-tagcell { display: none; } /* тегам не хватает места — детали в карточке задачи */ body.ave-root #tasks-pane .tk-kids-slot { width: 32px; } body.ave-root #tasks-pane .tk-priocell { width: 70px; } body.ave-root #tasks-pane .tk-statuscell { width: 44px; } body.ave-root #tasks-pane .tk-asg-btn { width: 48px; } body.ave-root #tasks-pane .tk-duepill { width: 58px; } /* пилюли приоритета мельче в ужатой колонке (статус теперь иконка — от текста не зависит) */ body.ave-root #tasks-pane .tk-priotag { padding: 2px 7px; font-size: 10px; } } /* дата — капсула в тон */ body.ave-root #tasks-pane .tk-duepill { border-radius: 999px; } /* ===== фидбек владельца (боевой тест 2026-07-07): компактная дизайнерская мета строки ===== */ /* статус — цветной ПИКСЕЛЬ-глиф (квадрат с сиянием), цвет = цвет статуса (--sc); имя — в подсказке */ body.ave-root #tasks-pane .tk-statuscell { padding: 0; } /* статус — пиксель-глиф на canvas (рисуется DotIcons в цвете статуса); фидбек владельца «иконки по сути» */ body.ave-root #tasks-pane .tk-statusico { width: 16px; height: 16px; flex: none; display: block; transition: transform .12s ease; } body.ave-root #tasks-pane .tk-statuscell:hover .tk-statusico { transform: scale(1.12); } /* исполнитель — только аватарка(и), без имени */ body.ave-root #tasks-pane .tk-asg-avs { display: inline-flex; align-items: center; gap: 2px; } body.ave-root #tasks-pane .tk-asg-av { width: 22px; height: 22px; border-radius: 7px; } body.ave-root #tasks-pane .tk-asg-more { font: 600 10px var(--font-mono); color: var(--muted); margin-left: 1px; } body.ave-root #tasks-pane .tk-asg-empty { width: 18px; height: 18px; border-radius: 6px; border: 1px dashed color-mix(in srgb, var(--line) 90%, transparent); opacity: .5; } /* дата — одна DD.MM, моно, узкая капсула */ body.ave-root #tasks-pane .tk-duepill { font: 600 11.5px var(--font-mono); padding: 3px 8px; } /* «горящий» дедлайн — пиксель-стиль AVE (danger-тинт + рамка + моно), БЕЗ градиента/огонька/анимации */ body.ave-root #tasks-pane .tk-duepill.tk-overdue, body.ave-root #tasks-pane .tk-duepill.tk-burning { background: color-mix(in srgb, var(--danger) 16%, transparent) !important; color: var(--danger) !important; border: 1px solid color-mix(in srgb, var(--danger) 46%, transparent) !important; box-shadow: none !important; animation: none !important; } /* кнопка «Добавить» (верхняя строка) — плоский сигнал AVE + моно (было оранж-градиент старого дизайна) */ body.ave-root #tasks-pane .tk-addbar button { background: var(--signal) !important; color: var(--on-signal, #16130c) !important; border: none !important; border-radius: 9px !important; padding: 0 16px !important; font: 600 13px var(--font-mono) !important; letter-spacing: .01em; } body.ave-root #tasks-pane .tk-addbar button:hover { filter: brightness(1.06); } /* ============================================================ P6: КАЛЕНДАРЬ-ВКЛАДКА — пиксель-парити с прототипом v20 (решение №12, HANDOFF §22/§26). Функционал (создание/драг/день-пик) уже есть и богаче прототипа — не трогаем, только визуал. Значения — grep по исходнику AVE Chat.dc.html, не по скринам (см. VERSION.txt записи этой правки). ============================================================ */ /* пилюли задач — линейный градиент цвета задачи 60%→34% + «ring» 78% инсетом (calWeeks/bars в исходнике, дословная формула). Цвет самой задачи (VIVID) выставляет JS через --bc. */ .ave-root #tasks-pane .tk-bar { border-left: 0; border-radius: 6px; background: linear-gradient(100deg, color-mix(in srgb, var(--bc) 60%, transparent), color-mix(in srgb, var(--bc) 34%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bc) 78%, transparent), 0 2px 8px -4px color-mix(in srgb, var(--bc) 60%, transparent); } .ave-root #tasks-pane .tk-bar:hover { background: linear-gradient(100deg, color-mix(in srgb, var(--bc) 74%, transparent), color-mix(in srgb, var(--bc) 46%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bc) 92%, transparent), 0 2px 10px -3px color-mix(in srgb, var(--bc) 75%, transparent); } .ave-root #tasks-pane .tk-bar1 { border-radius: 10px; } .ave-root #tasks-pane .tk-bcl, .ave-root #tasks-pane .tk-bcr { border-radius: 6px; } /* «сегодня» — тонкая КРАСНАЯ обводка ячейки + красная подложка числа (HANDOFF §22: _RED='#df6159' — ровно var(--danger); старое жёлто-янтарное выделение здесь заменяется, не добавляется рядом) */ .ave-root #tasks-pane .tk-cell2.tk-today { border-color: var(--danger-2); } .ave-root #tasks-pane .tk-cell2.tk-today .tk-dnum { background: var(--danger-2); color: #fff; } .ave-root #tasks-pane .tk-cell2:hover { border-color: color-mix(in srgb, var(--ink) 24%, var(--line)); } /* окно дня — центрированная модалка под calDayModal прототипа. База (панель/фон/рамка/тень/крестик) уже даёт .tk-ipop/.tk-mdx выше — здесь только то, что специфично для дня: ширина/радиус, шапка с градиентом+датой+счётчиком+«На поле», строки-карточки под _rowS/_rowH, футер с верхней рамкой. !important у width — иначе не перебить инлайн pop.style.width, которым его ставит JS. */ .ave-root .tk-daypop { width: min(540px, 100%) !important; border-radius: 18px; } .ave-root .tk-dayhead { gap: 13px; padding: 17px 19px 15px; border-bottom: 1px solid var(--line-2); background: linear-gradient(180deg, color-mix(in srgb, var(--stage) 60%, transparent), transparent); } .ave-root .tk-dayhd-txt { display: flex; flex-direction: column; gap: 3px; } .ave-root .tk-dayhd-dow { font: var(--fw-semibold) 10px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); } .ave-root .tk-dayhd-num { font: 800 21px/1 var(--font-mono); color: var(--ink); margin-top: 0; } .ave-root .tk-daycount { font: 700 10px/1 var(--font-mono); color: var(--muted); background: var(--field); border: 1px solid var(--line-2); border-radius: 8px; padding: 5px 9px; white-space: nowrap; } .ave-root .tk-daypin { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--signal) 13%, transparent); border: 1px solid color-mix(in srgb, var(--signal) 38%, transparent); color: var(--signal); border-radius: 9px; padding: 7px 11px; font: var(--fw-semibold) 11px/1 var(--font-mono); cursor: pointer; transition: background .12s; } .ave-root .tk-daypin:hover { background: color-mix(in srgb, var(--signal) 24%, transparent); } .ave-root .tk-daybody { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; } .ave-root .tk-daysec-h { padding: 0 0 4px; } .ave-root .tk-dayitem { background: var(--field); border: 1px solid var(--line-2); border-radius: 11px; padding: 11px 13px; transition: border-color .12s ease, background .12s ease, transform .12s ease; } .ave-root .tk-dayitem:hover { border-color: color-mix(in srgb, var(--ink) 26%, var(--line)); background: var(--panel-2); transform: translateX(2px); } .ave-root .tk-dayitem-ttl { font: var(--fw-semibold) 13.5px var(--font-mono); color: var(--ink-dim); } .ave-root .tk-dayadd { padding: 13px 16px 16px; border-top: 1px solid var(--line-2); background: color-mix(in srgb, var(--stage) 30%, transparent); } .ave-root .tk-dayaddbtn { border-style: solid; border-color: var(--line-2); border-radius: 10px; } .ave-root .tk-dayaddbtn:hover { border-color: color-mix(in srgb, var(--signal) 55%, var(--line-2)); color: var(--signal); } /* «+ Создать проект» в выпадашке «Все проекты» — визуально отделён от списка выбора (это действие, не переключатель) */ .ave-root .tk-projopt-add { margin-top: 4px; padding-top: 9px; border-top: 1px solid var(--line-2); color: var(--muted); } .ave-root .tk-projopt-add:hover { color: var(--signal); } /* ============================================================ P8: НАГРУЗКА-ВКЛАДКА — единое поле-canvas со спиралью аватаров вместо старых полос-баров (HANDOFF §20/§24, v14+v18). Структурная правка — только aveOn (см. renderLoad: старый дизайн — своей веткой, свои классы .tk-load*, не тронуты). Контейнер/аватар — точные значения из исходника. ============================================================ */ .ave-root #tasks-pane .tk-load3-wrap { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; } .ave-root #tasks-pane .tk-load3-main { flex: 1 1 560px; min-width: 0; } .ave-root #tasks-pane .tk-load3-side { flex: none; width: 240px; display: flex; flex-direction: column; gap: 14px; } .ave-root #tasks-pane .tk-load3-field { position: relative; width: 100%; max-width: 980px; margin: 0 auto; aspect-ratio: 1120 / 760; background: #08080a; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 18px 50px -28px rgba(0, 0, 0, .9); } .ave-root #tasks-pane .tk-load3-field canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .ave-root #tasks-pane .tk-load3-av { position: absolute; width: 46px; height: 46px; border-radius: 13px; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; font: var(--fw-bold) 16px var(--font-mono); color: #fff; border: 2px solid rgba(255, 255, 255, .85); box-shadow: 0 6px 16px -5px rgba(0, 0, 0, .95), 0 0 0 5px rgba(8, 10, 14, .6); cursor: pointer; z-index: 3; padding: 0; } .ave-root #tasks-pane .tk-load3-lbl { position: absolute; transform: translate(-50%, 31px); z-index: 3; pointer-events: none; display: flex; flex-direction: column; align-items: center; line-height: 1.3; text-align: center; white-space: nowrap; } .ave-root #tasks-pane .tk-load3-lbl-nm { font: var(--fw-semibold) 11px var(--font-mono); color: var(--ink-dim); text-shadow: 0 1px 4px rgba(0, 0, 0, .9); } .ave-root #tasks-pane .tk-load3-lbl-pct { font: 700 10px var(--font-mono); text-shadow: 0 1px 4px rgba(0, 0, 0, .9); } .ave-root #tasks-pane .tk-load3-leg { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; } .ave-root #tasks-pane .tk-load3-legbar { height: 8px; border-radius: 4px; } .ave-root #tasks-pane .tk-load3-leg-lo, .ave-root #tasks-pane .tk-load3-leg-hi { font: 600 10px var(--font-mono); color: var(--muted); } .ave-root #tasks-pane .tk-load3-leg-hi { align-self: flex-end; } /* модалка задач сотрудника — шапка */ .ave-root .tk-load3-phav { width: 44px; height: 44px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; font: var(--fw-bold) 16px var(--font-mono); color: #fff; } .ave-root .tk-load3-phtxt { display: flex; flex-direction: column; gap: 2px; } .ave-root .tk-load3-phnm { font: var(--fw-semibold) 14px var(--font-mono); color: var(--ink); } .ave-root .tk-load3-phpct { font: 700 11px var(--font-mono); } .ave-root .tk-load3-ptasks { padding: 10px 16px 16px; display: flex; flex-direction: column; gap: 7px; max-height: 50vh; overflow-y: auto; } .ave-root .tk-load3-prow { display: flex; align-items: center; gap: 9px; padding: 9px 11px; background: var(--field); border: 1px solid var(--line-2); border-radius: 10px; } .ave-root .tk-load3-pdot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .ave-root .tk-load3-pprio { flex: none; font: 600 9px var(--font-mono); border: 1px solid; border-radius: 6px; padding: 3px 7px; background: rgba(8, 10, 14, .4); } .ave-root .tk-load3-ptitle { flex: 1; min-width: 0; font: 500 12.5px var(--font-mono); color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ave-root .tk-load3-ptitle.done { color: var(--muted-2); text-decoration: line-through; } .ave-root .tk-load3-pstatus { flex: none; font: 600 9px var(--font-mono); color: var(--muted-2); } /* ============================================================ P7: ТАЙМЛАЙН-ВКЛАДКА — свимлейны по проектам вместо старых «эр»+точек-узлов (HANDOFF §13/§26, v5+v20). Структурная правка — используется, только когда aveOn (см. renderTimeline: старый дизайн — своей веткой, свои классы .tk-tl2-*, не тронуты). Зум/скролл/драг Эфира — не трогали (богатство, роадмап). ============================================================ */ .ave-root #tasks-pane .tk-tl3-outer { display: flex; align-items: flex-start; gap: 0; } /* фиксированная колонка слева — вертикальные подписи проектов, вне горизонтального скролла холста */ .ave-root #tasks-pane .tk-tl3-lanecol { flex: none; width: 34px; overflow: hidden; position: relative; } .ave-root #tasks-pane .tk-tl3-lanecol-axis { height: 44px; } .ave-root #tasks-pane .tk-tl3-lanelbl { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border-top: 1px solid var(--line-2); } .ave-root #tasks-pane .tk-tl3-lanecol .tk-tl3-lanelbl:first-child { border-top: 0; } .ave-root #tasks-pane .tk-tl3-lanedot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); box-shadow: 0 0 8px -1px var(--muted); } .ave-root #tasks-pane .tk-tl3-lanetxt { writing-mode: vertical-rl; transform: rotate(180deg); font: var(--fw-semibold) 11px var(--font-mono); letter-spacing: .06em; color: var(--ink-dim); max-height: calc(100% - 22px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ave-root #tasks-pane .tk-tl3 { flex: 1; min-width: 0; position: relative; } .ave-root #tasks-pane .tk-tl3-inner { position: relative; } .ave-root #tasks-pane .tk-tl3-lanebg { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line-2); pointer-events: none; } .ave-root #tasks-pane .tk-tl3-lanebg.alt { background: color-mix(in srgb, var(--panel-2) 40%, transparent); } .ave-root #tasks-pane .tk-tl3-mline { position: absolute; top: 0; width: 1px; background: var(--line-2); opacity: .5; pointer-events: none; } .ave-root #tasks-pane .tk-tl3-mlabel { position: absolute; top: 4px; font: var(--fw-semibold) 10px var(--font-mono); color: var(--muted); white-space: nowrap; pointer-events: none; } .ave-root #tasks-pane .tk-tl3-mlabel span { color: var(--muted-2); } /* ось дней сверху: день недели + число, «сегодня» — акцентом */ .ave-root #tasks-pane .tk-tl3-tick { position: absolute; top: 0; height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-left: 1px solid color-mix(in srgb, var(--line-2) 60%, transparent); pointer-events: none; } .ave-root #tasks-pane .tk-tl3-tick-wd { font: var(--fw-semibold) 9px var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2); } .ave-root #tasks-pane .tk-tl3-tick-num { font: 700 13px var(--font-mono); color: var(--ink-dim); } .ave-root #tasks-pane .tk-tl3-tick.today .tk-tl3-tick-wd, .ave-root #tasks-pane .tk-tl3-tick.today .tk-tl3-tick-num { color: var(--signal); } .ave-root #tasks-pane .tk-tl3-today { position: absolute; width: 2px; background: linear-gradient(180deg, var(--signal), transparent); opacity: .55; box-shadow: 0 0 10px -1px var(--signal); pointer-events: none; } /* капсула задачи — линейный градиент цвета задачи 52%→28% + мутное стекло (HANDOFF §26, формула дословно из tlPills/pxc исходника прототипа) */ .ave-root #tasks-pane .tk-tl3-pill { position: absolute; display: flex; align-items: center; gap: 8px; padding: 0 9px 0 13px; border-radius: 11px; cursor: pointer; overflow: hidden; white-space: nowrap; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); background: linear-gradient(100deg, color-mix(in srgb, var(--bc) 52%, transparent), color-mix(in srgb, var(--bc) 28%, transparent)); border: 1px solid color-mix(in srgb, var(--bc) 72%, transparent); box-shadow: 0 8px 20px -12px var(--bc); transition: box-shadow .12s ease, transform .12s ease; } .ave-root #tasks-pane .tk-tl3-pill:hover { box-shadow: 0 10px 24px -10px var(--bc); transform: translateY(-1px); } .ave-root #tasks-pane .tk-tl3-pill.tk-done { opacity: .55; } .ave-root #tasks-pane .tk-tl3-pill.tk-done .tk-tl3-ttl { text-decoration: line-through; } .ave-root #tasks-pane .tk-tl3-pill.tk-tl3-over { box-shadow: 0 0 0 1.5px var(--danger), 0 8px 20px -12px var(--bc); } .ave-root #tasks-pane .tk-tl3-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--bc); z-index: 1; } .ave-root #tasks-pane .tk-tl3-body { display: flex; flex-direction: column; min-width: 0; flex: 1; position: relative; z-index: 2; } .ave-root #tasks-pane .tk-tl3-ttl { font: var(--fw-semibold) 12px var(--font-mono); color: #fff; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0, 0, 0, .85); } .ave-root #tasks-pane .tk-tl3-av { width: 20px; height: 20px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font: 700 8px var(--font-mono); color: #fff; border: 2px solid rgba(0, 0, 0, .2); position: relative; z-index: 2; } .ave-root #tasks-pane .tk-tl3-prio { flex: none; font: var(--fw-semibold) 9px var(--font-mono); color: #ffd9a8; background: rgba(8, 10, 14, .55); border: 1px solid color-mix(in srgb, var(--signal) 44%, transparent); border-radius: 6px; padding: 2px 6px; position: relative; z-index: 2; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } /* ============================================================ КАРТОЧКА ЗАДАЧИ (#tk-detail .tk-sidepanel) — под общий AVE-стиль (фидбек владельца 2026-07-06 «форма задачи в старом дизайне осталась»). Моно-шрифт уже даёт ремап токенов сверху файла; здесь гасим остатки СТАРОЙ темы в инжект-стилях tasks-ui: янтарное гало панели (rgba(240,163,59,…) — старый акцент #f0a33b), градиентную кнопку «Сохранить», стеклянные плашки на white-alpha. Значения — токены AVE (плоские панели var(--panel), линия var(--line), один акцент --signal). ?ave=0 не тронут. ============================================================ */ /* сама панель: фрост в тоне A3b-виджетов, БЕЗ янтарного пятна в углу */ body.ave-root .tk-sidepanel { background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 88%, transparent), color-mix(in srgb, var(--stage) 93%, transparent)); border-left: 1px solid var(--line); box-shadow: -30px 0 80px rgba(0, 0, 0, .6); } /* чип проекта в шапке: плоская панель вместо white-градиента */ body.ave-root .tk-sidepanel .tk-mdproj { background: var(--panel-2); border: 1px solid var(--line); border-radius: 11px; } /* заголовок: фокус — поле в цвете --field, не старый #0e0f13 */ body.ave-root .tk-sidepanel .tk-mdtitle:focus { background: var(--field); } /* описание: фокус-кольцо от --signal (в инжекте захардкожен старый янтарь) */ body.ave-root .tk-sidepanel .tk-rte { background: color-mix(in srgb, var(--field) 55%, transparent); } body.ave-root .tk-sidepanel .tk-rte:focus { border-color: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 13%, transparent); } /* плашка свойств (Статус/Приоритет/…): плоская панель */ body.ave-root .tk-sidepanel .tk-mdprops { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; } /* «Сохранить»: плоский сигнальный (как tk-create-btn/tk-subaddok), без градиента и старого свечения */ body.ave-root .tk-sidepanel .tk-mdsave { background: var(--signal); color: var(--on-signal); border-radius: 10px; box-shadow: none; font-family: var(--font-mono); } body.ave-root .tk-sidepanel .tk-mdsave:hover { filter: brightness(1.08); box-shadow: 0 6px 20px -6px color-mix(in srgb, var(--signal) 55%, transparent); } /* пикер иконки (живёт на body отдельно от панели): то же самое — без янтарного пятна */ body.ave-root .tk-ipop { background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, transparent), color-mix(in srgb, var(--stage) 95%, transparent)); border: 1px solid var(--line); } /* всплывающая панель оформления текста — панель AVE вместо хардкода #15171d */ body.ave-root .tk-rtebar { background: var(--panel-2); border: 1px solid var(--line); } /* ---- форма «Создать задачу/встречу» из календаря (.tk-cf в .tk-ipop) — фидбек владельца 2026-07-06 «смэтчить с общим стилем: полупрозрачность, серые/чёрные фоны». Панель/моно уже дал .tk-ipop-фикс выше; здесь гасим СПЛОШНЫЕ оранжевые заливки активных из инжекта на полупрозрачный сигнал (как вкладки/фильтр календаря). ?ave=0 не тронут. */ /* сегмент Задача/Встреча: контейнер — тёмная панель; активная кнопка — полупрозрачный сигнал */ body.ave-root .tk-cf-seg { background: color-mix(in srgb, var(--panel) 72%, var(--bg)); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); } body.ave-root .tk-cf-segb { color: var(--muted); border: 1px solid transparent; } /* прозрачная рамка заранее — активная лишь перекрашивает её, без сдвига соседа */ body.ave-root .tk-cf-segb:hover { color: var(--ink-dim); } body.ave-root .tk-cf-segb.tk-on { background: color-mix(in srgb, var(--signal) 14%, transparent); border-color: color-mix(in srgb, var(--signal) 38%, transparent); color: var(--signal); } /* дни повтора встречи (ПН/ВТ/…) — тот же полупрозрачный активный вместо сплошной заливки */ body.ave-root .tk-cf-day.tk-on { background: color-mix(in srgb, var(--signal) 14%, transparent); border-color: color-mix(in srgb, var(--signal) 38%, transparent); color: var(--signal); } /* «Создать/Сохранить» — плоский сигнальный, моно, on-signal текст (как в карточке задачи) */ body.ave-root .tk-cf-save { background: var(--signal); color: var(--on-signal); font-family: var(--font-mono); } body.ave-root .tk-cf-save:hover { filter: brightness(1.08); } /* ============================================================ M2 · МОБАЙЛ (≤760px) — вкладка задач: компактнее + выровнять иконки (фидбек владельца «поплыло»). Базовый мобильный блок (tasks-ui.js @media) уже делает 2-рядную строку через order:N, НО он писался под старую структуру и не знает про AVE-аватар .tk-rowav (тот без order застревал в РЯДУ 1 и ломал выравнивание) + не подогнан под AVE-пилюли. Здесь под .ave-root (выигрывает по специфичности) наводим чистый компактный вид. Десктоп и ?ave=0 не тронуты. ============================================================ */ @media (max-width: 760px) { /* строка — компактнее и всё по центру вертикали */ body.ave-root #tasks-pane .tk-trow { padding: 7px 9px; margin: 3px 0; gap: 4px 6px; align-items: center; } .ave-root #tasks-pane .tk-ttl { font-size: 13.5px; min-width: 56px; } /* аватар исполнителя — на РЯД 2 в конец меты (order:4 > меты 3); в ряду 1 он ломал выравнивание */ .ave-root #tasks-pane .tk-rowav { order: 4; margin: 0; width: 18px; height: 18px; border-radius: 6px; align-self: center; } /* ряд 2 (мета) — выровнять по центру, пилюли мельче, чтобы влезали в одну линию */ .ave-root #tasks-pane .tk-kids-slot, .ave-root #tasks-pane .tk-priocell, .ave-root #tasks-pane .tk-statuscell, .ave-root #tasks-pane .tk-duepill { align-self: center; } body.ave-root #tasks-pane .tk-statustag, body.ave-root #tasks-pane .tk-priotag { padding: 2px 9px; font-size: 10.5px; } body.ave-root #tasks-pane .tk-duepill { font-size: 10.5px; padding: 2px 8px; } /* иконки-кнопки ряда 1 — единый размер и выравнивание */ .ave-root #tasks-pane .tk-chk { width: 20px; height: 20px; } .ave-root #tasks-pane .tk-openbtn { width: 30px; height: 30px; align-self: center; } .ave-root #tasks-pane .tk-tog, .ave-root #tasks-pane .tk-tog-spacer { align-self: center; } /* hover-кнопка «+подзадача» на таче не нужна — убираем шум/сдвиг */ .ave-root #tasks-pane .tk-addsub { display: none; } /* ---- ФИКС «на мобилке поехало ещё сильнее» (фидбек 2026-07-06): десктопный блок фикс-колонок (спейсер flex:0 0 0, тег-ячейка inline-flex, kids-slot 44px — все с специфичностью 1,3,x) ПЕРЕБИЛ инжектный мобильный каркас tasks-ui (0,1,0): спейсер перестал переносить мету на строку 2 и всё заворачивалось хаосом, «+ тег» стал виден. Здесь возвращаем 2-рядную схему ТОЙ ЖЕ специфичностью. */ body.ave-root #tasks-pane .tk-trow .tk-rowspacer { /* спейсер снова = перенос строки */ flex: 0 0 100%; width: 100%; min-width: 100%; height: 0; order: 2; margin: 0; } body.ave-root #tasks-pane .tk-tagcell { display: none; } /* тегам на телефоне места нет (детали — в карточке) */ body.ave-root #tasks-pane .tk-kids-slot { width: auto; justify-content: flex-start; } body.ave-root #tasks-pane .tk-priocell, body.ave-root #tasks-pane .tk-statuscell, body.ave-root #tasks-pane .tk-asg-btn, body.ave-root #tasks-pane .tk-duepill { justify-content: flex-start; } /* пин-хэндл — в ряд 1 к кнопке «открыть» (append в конец строки кидал его в хвост меты) */ .ave-root #tasks-pane .ave-pinh { order: 1; align-self: center; } /* хедер проекта: длинная подпись «доступ с роли ≥ N» переполняла — прячем (второстепенная) */ .ave-root #tasks-pane .tk-plock { display: none; } /* ---- ШАПКА: освободить место переключателю режимов (Дерево/Доска/Календарь/Таймлайн/Нагрузка) ---- LED-«Прогресс N/M» (его вставляет ave-shell.js в .tk-top) зажимал вкладки так, что Канбан/Календарь были не видны и не переключались — на мобайле прячем его, вкладки получают всю строку и листаются вбок. */ /* ⚠️ #tasks-pane В СЕЛЕКТОРЕ ОБЯЗАТЕЛЕН: у базового чипа селектор `.ave-root #tasks-pane .ave-tprog` (стр.146, спец. класс+id+класс). Без #tasks-pane наше `display:none` проигрывает по каскаду и чип не прячется (та же грабля специфичности, что была с #dm-pane). */ .ave-root #tasks-pane .ave-tprog { display: none; } .ave-root #tasks-pane .tk-tabs { gap: 3px; } /* вкладки максимально компактные: у НЕАКТИВНЫХ текст скрыт (font-size:0 прячет текст-ноду, canvas-иконка остаётся), подпись видна только у активной — все 5 вкладок влезают без горизонтального скролла */ .ave-root #tasks-pane .tk-tab { padding: 8px 9px; font-size: 12px; gap: 6px; } .ave-root #tasks-pane .tk-tab:not(.tk-on) { font-size: 0; gap: 0; } /* шапка задач ВСЕГДА кликабельна поверх контента (карточки доски с overflow:visible могли перехватывать клики по вкладкам — отсюда «не переключить обратно с Доски») */ .ave-root #tasks-pane .tk-top { position: relative; z-index: 4; } /* ---- ДОСКА (канбан) на мобайле: колонки ШИРОКИЕ с горизонтальным листанием ---- AVE-десктоп задаёт .tk-col{flex:1 1 0} (равные во всю ширину) — на телефоне это 3 сжатые колонки ~⅓, карточки не влезают и вылезают за границы (colbody overflow:visible). Возвращаем «одна колонка почти во всю ширину, листаем вбок» + внутренний скролл колонки, чтобы контент не наезжал. */ .ave-root #tasks-pane .tk-col { flex: 0 0 82vw; width: 82vw; max-width: 340px; min-width: 0; max-height: 100%; } .ave-root #tasks-pane .tk-colbody { overflow: auto; } /* ---- ФОРМА СОЗДАНИЯ: компактная ОДНА строка (кнопка «Создать» была огромной, поле — во всю ширину) ---- */ .ave-root #tasks-pane .tk-createbar { flex-wrap: nowrap; gap: 6px; } .ave-root #tasks-pane .tk-create-name { flex: 1 1 auto; min-width: 0; padding: 6px 9px; font-size: 12.5px; } .ave-root #tasks-pane .tk-create-in { display: none; } /* лейбл «в» — на мобайле лишний, экономим место */ .ave-root #tasks-pane .tk-create-target { flex: none; max-width: 108px; padding: 6px 7px; font-size: 12px; } .ave-root #tasks-pane .tk-create-btn { flex: none; padding: 6px 12px; font-size: 12.5px; } .ave-root #tasks-pane .tk-mainhead h2 { font-size: 15px; } /* ---- КАЛЕНДАРЬ на мобайле: месяц-обзор со ШТРИХАМИ вместо подписанных полос ---- 7 колонок на ~375px = ячейка ~48px: текст в полосах (.tk-bttl/.tk-bdur/.tk-bwho) физически не влезает. Паттерн мобильных календарей: сетка месяца показывает ТОЛЬКО цветные штрихи занятости, вся детализация — тап по дню → окно дня (openDayPeek, уже работает через wireCalCell). Полосы делаем немыми (pointer-events: none — тап проваливается в ячейку), «+N ещё» прячем (окно дня и так показывает всё). ⚠️ Специфичность: базовые правила инжектятся из tasks-ui.js ПОЗЖЕ этого файла — селекторы обязаны быть сильнее (класс+id+класс), как у прогресс-чипа выше. --cal-top/--cal-step заданы правилом (не инлайн) — переопределяются; инлайн top полос считается от НАШИХ значений. */ .ave-root #tasks-pane .tk-cal { min-height: 0; --cal-top: 24px; --cal-step: 8px; } .ave-root #tasks-pane .tk-week { min-height: 66px; } .ave-root #tasks-pane .tk-cells { gap: 3px; } .ave-root #tasks-pane .tk-cell2 { padding: 3px 4px; } .ave-root #tasks-pane .tk-dnum { font-size: 11px; } .ave-root #tasks-pane .tk-bar { height: 5px; padding: 0; border-radius: 3px; pointer-events: none; box-shadow: none; font-size: 0; line-height: 0; } .ave-root #tasks-pane .tk-bar > span { display: none; } /* tk-bdot/tk-bttl/tk-bdur/tk-bwho/tk-bchev */ .ave-root #tasks-pane .tk-more2 { display: none; } /* шапка месяца: компактнее, селект фокуса не распирает строку */ .ave-root #tasks-pane .tk-calhead { gap: 6px; flex-wrap: wrap; } .ave-root #tasks-pane .tk-calhead h3 { font-size: 14px; } .ave-root #tasks-pane .tk-calfocus { max-width: 46vw; font-size: 12px; } /* окно дня (живёт на body, НЕ в #tasks-pane) — почти во всю ширину, список не выше 60% экрана */ body.ave-root .tk-ipop.tk-daypop { width: min(540px, calc(100vw - 16px)) !important; } body.ave-root .tk-daypop .tk-daybody { max-height: 60vh; } }