. */ text-decoration: none; display: block; cursor: pointer; } a.dk-nav-subgroup-label:hover { color: var(--dk-sidebar-text-hover); } .dk-sidebar-footer { margin-top: auto; padding: 12px 8px; border-top: 1px solid var(--dk-sidebar-divider); } .dk-user-item { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: var(--dk-radius); cursor: pointer; transition: background 0.1s; } .dk-user-item:hover { background: var(--dk-sidebar-hover); } /* ── AVATAR ──────────────────────────────────────────────────── */ .dk-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--dk-accent); color: var(--dk-white); font-size: var(--dk-fs-11); font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dk-avatar-lg { width: 34px; height: 34px; font-size: var(--dk-fs-13); } .dk-user-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .dk-user-name { font-size: var(--dk-fs-13); color: var(--dk-sidebar-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-user-org { font-size: var(--dk-fs-11); color: var(--dk-sidebar-muted, var(--dk-text-muted)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── ORG SWITCHER (футер сайдбара) ──────────────────────────────── */ .dk-user-row { display: flex; align-items: center; gap: 2px; } .dk-org-drop { position: relative; flex-shrink: 0; } .dk-org-drop-btn { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: none; border: none; color: var(--dk-sidebar-muted, var(--dk-text-muted)); cursor: pointer; border-radius: 5px; transition: color 0.15s, background 0.15s; } .dk-org-drop-btn:hover { color: var(--dk-white); background: var(--dk-sidebar-hover); } .dk-org-chevron { font-size: var(--dk-fs-12); transition: transform 0.15s; } .dk-org-drop.open .dk-org-chevron { transform: rotate(180deg); } .dk-org-drop-menu { display: none; position: absolute; bottom: calc(100% + 6px); right: 0; background: var(--dk-sidebar-hover); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 7px; padding: 4px; min-width: 180px; max-height: 260px; overflow-y: auto; z-index: 200; box-shadow: var(--dk-shadow-dark); } .dk-org-drop.open .dk-org-drop-menu { display: block; } .dk-org-drop-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; font-size: var(--dk-fs-12); color: var(--dk-sidebar-text); text-decoration: none; border-radius: 5px; white-space: nowrap; transition: background 0.12s, color 0.12s; } .dk-org-drop-item:hover { background: rgba(255, 255, 255, 0.07); color: var(--dk-white); text-decoration: none; } .dk-org-drop-item.active { color: var(--dk-accent); font-weight: 600; } /* В свёрнутом сайдбаре — скрыть */ .dk-collapsed .dk-org-drop { display: none; } /* ── MAIN AREA ───────────────────────────────────────────────── */ .dk-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; } /* ── TOPBAR ──────────────────────────────────────────────────── */ .dk-topbar { height: 48px; border-bottom: 1px solid var(--dk-border); display: flex; align-items: center; padding: 0 20px; gap: 12px; flex-shrink: 0; background: var(--dk-surface); } .dk-breadcrumb { font-size: var(--dk-fs-13-5); color: var(--dk-text-muted); display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; } .dk-breadcrumb a { color: var(--dk-text-muted); text-decoration: none; flex-shrink: 0; } .dk-breadcrumb a:hover { color: var(--dk-text); } .dk-breadcrumb-sep { color: var(--dk-border); flex-shrink: 0; } .dk-breadcrumb-current { color: var(--dk-text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .dk-topbar-actions { flex-shrink: 0; display: flex; align-items: center; gap: 8px; } /* ── CONTENT ─────────────────────────────────────────────────── */ .dk-content { flex: 1; overflow-y: auto; overflow-x: hidden; min-width: 0; padding: 24px; } /* ── BUTTONS ─────────────────────────────────────────────────── */ .dk-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; font-size: var(--dk-fs-13-5); font-weight: 500; font-family: var(--dk-font); border-radius: var(--dk-radius); cursor: pointer; border: none; transition: background 0.12s; text-decoration: none; line-height: 1.4; } .dk-btn:hover { text-decoration: none; } .dk-btn:disabled { opacity: 0.5; cursor: default; pointer-events: none; } /* Отчёт "План - Факт": контекстный фильтр по подпроекту -- отдельный класс вместо Bootstrap .d-flex, у которого display:flex идёт с !important и перебивает инлайновый style="display:none", которым его показывает/прячет DkGantt.updateSubprojectFilterUI() (js/dk-gantt.js). */ .dk-gantt-subproject-wrap { display: flex; align-items: center; gap: 4px; } .dk-btn-primary { background: var(--dk-accent); color: var(--dk-white); } .dk-btn-primary:hover { background: var(--dk-accent-hover); color: var(--dk-white); } .dk-btn-blue { background: #3b82f6; color: var(--dk-white); } .dk-btn-blue:hover { background: #2563eb; color: var(--dk-white); } .dk-btn-ghost { background: transparent; color: var(--dk-text-muted); border: 1px solid var(--dk-border); } .dk-btn-ghost:hover { background: var(--dk-bg); color: var(--dk-text); } /* Watch button */ .dk-watch-btn { display: inline-flex; align-items: center; gap: 5px; font-size: var(--dk-fs-13); font-weight: 400; padding: 0; border: none; background: transparent; color: var(--dk-text-muted); cursor: pointer; transition: color 0.15s; white-space: nowrap; } .dk-watch-btn i { font-size: var(--dk-fs-13); } .dk-watch-btn:hover { color: var(--dk-text); } .dk-watch-btn.dk-watch-active { color: var(--dk-accent); } .dk-watch-btn.dk-watch-active:hover { color: var(--dk-accent); opacity: 0.8; } .dk-watch-btn:disabled { opacity: 0.5; cursor: default; } /* ── SEARCH ──────────────────────────────────────────────────── */ .dk-search-wrap { position: relative; } .dk-search-icon { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--dk-text-light); font-size: var(--dk-fs-13); pointer-events: none; } .dk-search-input { padding: 6px 10px 6px 30px; font-size: var(--dk-fs-13-5); font-family: var(--dk-font); border: 1px solid var(--dk-border); border-radius: var(--dk-radius); width: 200px; outline: none; background: var(--dk-bg-row-hover); color: var(--dk-text); transition: border-color 0.15s, width 0.2s; } .dk-search-input:focus { border-color: var(--dk-accent); width: 260px; background: var(--dk-surface); } /* ── VIEW SWITCHER ───────────────────────────────────────────── */ .dk-view-switcher { display: flex; align-items: center; gap: 3px; background: var(--dk-bg); border: 1px solid var(--dk-border); border-radius: 8px; padding: 3px; } .dk-view-btn { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; color: var(--dk-text-muted); text-decoration: none; transition: all 0.15s; font-size: var(--dk-fs-13); font-weight: 500; white-space: nowrap; } .dk-view-btn i { font-size: var(--dk-fs-15); } .dk-view-btn:hover { color: var(--dk-text); background: var(--dk-surface); text-decoration: none; } .dk-view-btn.active { color: var(--dk-white); background: var(--dk-accent); text-decoration: none; } .dk-view-btn.active:hover { color: var(--dk-white); background: var(--dk-accent); } /* ── KANBAN FILTER BAR ───────────────────────────────────────── */ .dk-kanban-filterbar { display: flex; align-items: center; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--dk-border-light); padding-bottom: 0; } .dk-kanban-filter-btn { font-size: var(--dk-fs-13-5); font-weight: 500; padding: 7px 14px; color: var(--dk-text-muted); text-decoration: none; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color 0.15s, border-color 0.15s; white-space: nowrap; } .dk-kanban-filter-btn:hover { color: var(--dk-text); } .dk-kanban-filter-btn.active { color: var(--dk-accent); border-bottom-color: var(--dk-accent); } .dk-kanban-tag-btn { display: inline-flex; align-items: center; gap: 4px; font-size: var(--dk-fs-13-5); font-weight: 500; padding: 5px 12px; color: var(--dk-text-muted); background: var(--dk-surface); border: 1px solid var(--dk-border); border-radius: 20px; cursor: pointer; white-space: nowrap; transition: border-color 0.15s, color 0.15s; } .dk-kanban-tag-btn:hover, .dk-kanban-tag-btn.active { color: var(--dk-accent); border-color: var(--dk-accent); } .dk-kanban-tag-drop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 2000; background-color: var(--dk-surface) !important; border: 1px solid var(--dk-border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); min-width: 200px; max-width: 260px; padding: 6px 0; } .dk-kanban-tag-drop .dk-tag-search-input { width: 100%; padding: 6px 12px; border: none; border-bottom: 1px solid var(--dk-border); background: transparent; color: var(--dk-text); outline: none; font-size: var(--dk-fs-13); display: block; } .dk-tag-drop-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; font-size: var(--dk-fs-13); transition: background 0.1s; } .dk-tag-drop-item:hover { background: var(--dk-bg-row-hover); } .dk-tag-drop-empty { padding: 8px 12px; color: var(--dk-text-muted); font-size: var(--dk-fs-12); } .dk-tag-drop-divider { height: 1px; margin: 4px 0; background: var(--dk-border); } .dk-tag-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } /* ── KANBAN: быстрый поиск + кнопка "Фильтры" + раскрывающаяся панель ─ */ .dk-kanban-search-wrap { display: flex; align-items: center; gap: 6px; padding: 5px 12px; background: var(--dk-surface); border: 1px solid var(--dk-border); border-radius: 20px; color: var(--dk-text-muted); } .dk-kanban-search-wrap i { font-size: var(--dk-fs-13); } .dk-kanban-search-input { border: none; outline: none; background: transparent; font-size: var(--dk-fs-13-5); color: var(--dk-text); width: 180px; } .dk-kanban-search-input::placeholder { color: var(--dk-text-light); } /* ── KANBAN FILTER BAR: мобильная адаптивность (сессия 62) ────── Правая группа (поиск/фильтры/закрытые/экспорт) — .ms-auto — не переносилась сама по себе и обрезалась справа за пределами экрана. Разрешаем перенос внутри группы и убираем ms-auto, чтобы группа не толкала себя за пределы видимой области. */ @media (max-width: 767.98px) { .dk-kanban-filterbar > .ms-auto { margin-left: 0; flex-wrap: wrap; row-gap: 8px; width: 100%; } .dk-kanban-search-wrap { flex: 1 1 140px; min-width: 0; } .dk-kanban-search-input { width: 100%; min-width: 0; } } .dk-kanban-filters-toggle { display: inline-flex; align-items: center; gap: 6px; position: relative; border: 1px solid var(--dk-border); border-radius: 20px; padding: 5px 12px; margin-bottom: 0; } .dk-kanban-filters-toggle:hover, .dk-kanban-filters-toggle.active { border-color: var(--dk-accent); color: var(--dk-accent); } .dk-kanban-filters-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--dk-accent); color: var(--dk-white); font-size: var(--dk-fs-11); font-weight: 600; line-height: 1; } .dk-kanban-filters-panel { background: var(--dk-surface); border: 1px solid var(--dk-border); border-radius: 12px; box-shadow: var(--dk-shadow-sm); padding: 16px 20px; margin-bottom: 16px; animation: dkFiltersPanelIn .15s ease; } .dk-kanban-filters-panel-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--dk-border-light); } .dk-kanban-filters-panel-title { display: flex; align-items: center; gap: 8px; font-size: var(--dk-fs-14); font-weight: 600; color: var(--dk-text); } .dk-kanban-filters-reset-btn { display: inline-flex; align-items: center; gap: 6px; font-size: var(--dk-fs-13); font-weight: 500; padding: 5px 12px; border: 1px solid var(--dk-danger); border-radius: 20px; background: var(--dk-surface); color: var(--dk-danger); cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s, border-color 0.15s; } .dk-kanban-filters-reset-btn:hover { background: var(--dk-danger-dim); color: var(--dk-danger-hover); border-color: var(--dk-danger-hover); } .dk-kanban-filters-panel-close { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: transparent; color: var(--dk-text-muted); border-radius: 6px; cursor: pointer; transition: background 0.1s, color 0.1s; } .dk-kanban-filters-panel-close:hover { background: var(--dk-bg-row-hover); color: var(--dk-text); } @keyframes dkFiltersPanelIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .dk-kanban-filters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } .dk-kanban-filter-field { display: flex; flex-direction: column; gap: 6px; } .dk-kanban-filter-label { font-size: var(--dk-fs-12); font-weight: 600; color: var(--dk-text-muted); text-transform: uppercase; letter-spacing: .02em; } .dk-kanban-filter-field .dk-kanban-tag-btn { width: 100%; justify-content: space-between; } .dk-kanban-filter-field .dk-kanban-tag-drop { left: 0; right: auto; width: 100%; max-width: none; } .dk-kanban-filters-footer { padding: 12px 16px; border-top: 1px solid var(--dk-border); background: var(--dk-bg-card); } .dk-sf-del-btn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: none; background: none; cursor: pointer; border-radius: 3px; color: var(--dk-text-muted); font-size: var(--dk-fs-11); flex-shrink: 0; opacity: 0; transition: opacity .15s, color .15s; } .dk-tag-drop-item:hover .dk-sf-del-btn { opacity: 1; } .dk-sf-del-btn:hover { color: var(--dk-danger, #ef4444); opacity: 1; } .dk-sf-default-badge { flex-shrink: 0; padding: 1px 6px; border-radius: 8px; background: var(--dk-accent-bg, rgba(59, 130, 246, .12)); color: var(--dk-accent); font-size: var(--dk-fs-9); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; } /* ── KANBAN: быстрые фильтры (⚡) -- чек-лист проектов/подпроектов ── Общая разметка, выводится и в компактном дропдауне под молнией (.dk-kf-drop), и внутри панели "Фильтры" (.dk-kf-panel-field) -- см. views/v_index_kanban.php, сессия "Быстрые фильтры" 2026-09-14. */ .dk-kf-drop { max-height: 360px; overflow-y: auto; min-width: 240px; max-width: 320px; padding: 10px; } .dk-kf-panel-field { grid-column: 1 / -1; } .dk-kf-list { display: flex; flex-wrap: wrap; gap: 10px; } .dk-kf-group { border: 1px solid var(--dk-border); border-radius: 8px; padding: 8px 10px; min-width: 150px; background: var(--dk-surface); } .dk-kf-row { display: flex; align-items: center; gap: 6px; font-size: var(--dk-fs-13-5); cursor: pointer; padding: 2px 0; user-select: none; } .dk-kf-row input[type="checkbox"] { cursor: pointer; flex-shrink: 0; } .dk-kf-row-project { font-weight: 600; color: var(--dk-text); } .dk-kf-subs { margin-left: 20px; margin-top: 2px; display: flex; flex-direction: column; } .dk-kf-row-sub { font-size: var(--dk-fs-12); color: var(--dk-text-muted); font-weight: 400; } .dk-kf-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dk-kf-empty { padding: 6px 4px; color: var(--dk-text-muted); font-size: var(--dk-fs-12); } .dk-kanban-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; } .dk-kanban-tag-badge { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 10px; font-size: var(--dk-fs-11); font-weight: 500; line-height: 1.4; } /* ── TAG PICKER ──────────────────────────────────────────────── */ /* На странице задачи тег-пикер встроен в мета-ряд (рядом с "Наблюдать") — убираем bootstrap mb-3 и лишний вертикальный отступ, чтобы не ломать flex-ряд */ .dk-task-meta-tags .dk-tag-picker { margin-bottom: 0; } .dk-tag-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 14px; font-size: var(--dk-fs-12-5); font-weight: 500; color: #fff; } /* Релиз-тег (миграция 102) -- двойная рамка + иконка ракеты (см. v_tag_picker.php) */ .dk-tag-badge-release { border: 3px double rgba(255, 255, 255, 0.85); padding: 3px 10px; } .dk-tag-badge-link { color: #fff; text-decoration: none; } .dk-tag-badge-link:hover { color: #fff; text-decoration: none; } .dk-tag-badge-del { background: none; border: none; cursor: pointer; padding: 0; line-height: 1; font-size: var(--dk-fs-14); opacity: 0.75; color: #fff; } .dk-tag-badge-del:hover { opacity: 1; } .dk-tag-add-btn { background: none; border: 2px solid var(--dk-accent); border-radius: 14px; padding: 5px 10px; cursor: pointer; font-size: var(--dk-fs-14); font-weight: 600; color: var(--dk-accent); transition: background 0.15s, color 0.15s; } .dk-tag-add-btn:hover { background: var(--dk-accent); color: #fff; } .dk-tag-add-wrap { position: relative; } .dk-tag-dropdown { position: absolute; top: calc(100% + 4px); left: 0; z-index: 1050; background: var(--dk-surface); border: 1px solid var(--dk-border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); min-width: 220px; max-width: 280px; padding: 6px 0; } .dk-tag-search-input { width: 100%; padding: 6px 12px; border: none; border-bottom: 1px solid var(--dk-border); background: transparent; color: var(--dk-text); outline: none; font-size: var(--dk-fs-13); } /* ── TAG PAGES ───────────────────────────────────────────────── */ .dk-tag-hero { display: inline-flex; align-items: center; padding: 8px 18px; border-radius: 24px; font-size: var(--dk-fs-20); font-weight: 600; } .dk-tag-stat-chip { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 20px; font-size: var(--dk-fs-13); font-weight: 500; color: var(--dk-text-muted); text-decoration: none; background: var(--dk-surface); border: 1px solid var(--dk-border); transition: border-color 0.15s, color 0.15s; } .dk-tag-stat-chip:hover, .dk-tag-stat-chip.active { color: var(--dk-accent); border-color: var(--dk-accent); } .dk-page-item { background: var(--dk-surface); border: 1px solid var(--dk-border); transition: border-color 0.15s; } .dk-page-item:hover { border-color: var(--dk-accent); } .dk-tag-card { background: var(--dk-surface); border-radius: 10px; padding: 14px 16px; border: 1px solid var(--dk-border); transition: box-shadow 0.15s; } .dk-tag-card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .dk-tag-pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 20px; font-size: var(--dk-fs-13-5); font-weight: 500; text-decoration: none; } .dk-tag-stat-link { font-size: var(--dk-fs-12); color: var(--dk-text-muted); text-decoration: none; margin-right: 10px; } .dk-tag-stat-link:hover { color: var(--dk-accent); } .dk-tag-card-stats { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; } /* ── PROCESS BAR (майлстоун-бар, миграция 102) ───────────────── Прогресс задачи по процессу (Проверка/Мастер/Тестирование/Препрод/ Приемка/Выпуск), рисуется под мета-баром, над "Детали" (views/v_task.php). Тот же компонент переиспользуется на карточке релиз-тега для "бутылочного горлышка" (views/v_tag.php). */ .dk-process-bar-header { display: flex; align-items: center; gap: 6px; font-size: var(--dk-fs-13); font-weight: 600; color: var(--dk-text-muted); margin-bottom: 26px; } .dk-process-bar { position: relative; height: 22px; margin: 0 16px; } .dk-process-bar-track { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: var(--dk-border); border-radius: 2px; } .dk-process-bar-fill { position: absolute; left: 0; top: 50%; height: 3px; margin-top: -1.5px; width: var(--dk-process-fill, 0%); background: var(--dk-accent); border-radius: 2px; transition: width 0.2s ease; } .dk-process-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--dk-border); background: var(--dk-surface); color: var(--dk-text-muted); display: flex; align-items: center; justify-content: center; font-size: var(--dk-fs-10); line-height: 1; padding: 0; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s; } .dk-process-dot:hover { border-color: var(--dk-accent); color: var(--dk-accent); transform: translate(-50%, -50%) scale(1.15); } .dk-process-dot-active { border-color: var(--dk-accent); background: var(--dk-accent); color: #fff; } .dk-process-dot-current { box-shadow: 0 0 0 5px var(--dk-accent-dim); } .dk-process-dot-label { position: absolute; top: 26px; left: 50%; transform: translateX(-50%); font-size: var(--dk-fs-11); color: var(--dk-text-muted); white-space: nowrap; pointer-events: none; } .dk-process-dot-active .dk-process-dot-label, .dk-process-dot-current .dk-process-dot-label { color: var(--dk-text); font-weight: 500; } /* Процесс включён в организации, но ещё не стартовал у этой задачи -- приглашаем нажать на нужный этап, чтобы запустить его вручную (задача была решена до включения процесса, см. TaskProcess::availableToStart()) */ .dk-process-bar-hint { font-weight: 400; font-style: italic; color: var(--dk-text-muted); opacity: 0.8; } .dk-process-bar-pending .dk-process-bar-track { background: transparent; border-top: 2px dashed var(--dk-border); height: 0; margin-top: 0; } /* Компактный индикатор бутылочного горлышка на карточке тега в списке /tags (2026-09-10, Павел: "графика на карточке все еще нет" -- раньше бар был только на странице самого тега) -- просто заливка+подпись, без интерактивных точек, места в узкой карточке грида на них нет */ .dk-process-mini-track { position: relative; height: 4px; background: var(--dk-border); border-radius: 2px; overflow: hidden; } .dk-process-mini-fill { height: 100%; background: var(--dk-accent); border-radius: 2px; transition: width 0.2s ease; } .dk-process-mini-label { margin-top: 4px; font-size: var(--dk-fs-11); color: var(--dk-text-muted); font-weight: 500; } .dk-process-mini-empty { font-size: var(--dk-fs-11); color: var(--dk-text-muted); font-style: italic; } /* Карточка релиз-тега: тот же бар, но без интерактивности (бутылочное горлышко -- read-only агрегат, см. views/v_tag.php) */ .dk-process-bar-readonly .dk-process-dot { cursor: default; } .dk-process-bar-readonly .dk-process-dot:hover { border-color: var(--dk-border); color: var(--dk-text-muted); transform: translate(-50%, -50%); } .dk-process-bar-readonly .dk-process-dot-active:hover { border-color: var(--dk-accent); color: #fff; } .dk-color-preset { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform 0.1s, border-color 0.1s; } .dk-color-preset:hover { transform: scale(1.2); border-color: #fff; } .dk-kanban-tag-filter-wrap { position: relative; } /* ── KANBAN ──────────────────────────────────────────────────── */ .dk-kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 16px; align-items: flex-start; width: 100%; } .dk-kanban-col { flex: 1 0 240px; min-width: 240px; background: var(--dk-bg); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 8px; } .dk-kanban-col-header { display: flex; align-items: center; gap: 6px; padding: 4px 2px 8px; border-bottom: 1px solid var(--dk-border-light); } .dk-kanban-col-header i { font-size: var(--dk-fs-13); } .dk-kanban-col-title { font-size: var(--dk-fs-12); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--dk-text); flex: 1; } .dk-kanban-col-count { font-size: var(--dk-fs-11); font-weight: 600; color: var(--dk-text-muted); background: var(--dk-border-light); border-radius: 10px; padding: 1px 7px; } .dk-kanban-col-sort-group { display: flex; align-items: center; gap: 2px; } .dk-kanban-col-sort-btn { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: none; background: transparent; border-radius: 4px; color: var(--dk-text-muted); cursor: pointer; transition: background .15s, color .15s; flex: 0 0 auto; } .dk-kanban-col-sort-btn i { font-size: var(--dk-fs-13); } .dk-kanban-col-sort-btn:hover { background: var(--dk-border-light); color: var(--dk-accent); } /* Активное поле сортировки (дата ИЛИ приоритет) -- иконка постоянно в акцентном цвете + лёгкая заливка, а не просто на ховере (просьба Павла, 2026-09-18: "видно жирным" -- у иконки нет начертаний веса, так что вместо font-weight используем подсветку акцентом, тот же принцип, что уже есть у .dk-kanban-filter-btn.active в этом файле). */ .dk-kanban-col-sort-btn.active { color: var(--dk-accent); background: var(--dk-accent-dim); } .dk-kanban-col-sort-btn.active:hover { background: var(--dk-accent-dim); } .dk-kanban-cards { display: flex; flex-direction: column; gap: 8px; } .dk-kanban-empty { font-size: var(--dk-fs-12); color: var(--dk-text-muted); text-align: center; padding: 12px 0; } .dk-kanban-load-more { width: 100%; padding: 7px 10px; border: 1px dashed var(--dk-border); background: transparent; border-radius: 6px; font-size: var(--dk-fs-12); color: var(--dk-text-muted); cursor: pointer; transition: border-color .15s, color .15s; text-align: center; } .dk-kanban-load-more:hover:not(:disabled) { border-color: var(--dk-accent); color: var(--dk-accent); } .dk-kanban-load-more:disabled { opacity: .6; cursor: default; } .dk-kanban-no-more-filtered { width: 100%; padding: 7px 10px; border: 1px dashed var(--dk-border); background: transparent; border-radius: 6px; font-size: var(--dk-fs-12); color: var(--dk-text-muted); text-align: center; } @keyframes dk-spin { to { transform: rotate(360deg); } } /* Группировка карточек внутри колонки канбана (снять/теги/резолюции/проекты) -- см. dkKanbanRegroupColumn() в views/v_index_kanban.php. */ .dk-kanban-group { display: flex; flex-direction: column; gap: 8px; } .dk-kanban-group-header { display: flex; align-items: center; gap: 6px; padding: 4px 2px; cursor: pointer; user-select: none; } .dk-kanban-group-chevron { font-size: var(--dk-fs-11); color: var(--dk-text-muted); transition: transform .15s ease; } .dk-kanban-group-title { font-size: var(--dk-fs-12-5); font-weight: 600; color: var(--dk-text-muted); text-transform: uppercase; letter-spacing: .02em; } .dk-kanban-group-count { font-size: var(--dk-fs-11); color: var(--dk-text-muted); background: var(--dk-border-light); border-radius: 10px; padding: 0 6px; line-height: 16px; } .dk-kanban-group-body { display: flex; flex-direction: column; gap: 8px; } .dk-kanban-group.dk-kanban-group-collapsed .dk-kanban-group-chevron { transform: rotate(-90deg); } .dk-kanban-group.dk-kanban-group-collapsed .dk-kanban-group-body { display: none; } .dk-kanban-card { background: var(--dk-surface); border: 1px solid var(--dk-border-light); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; transition: box-shadow 0.15s, border-color 0.15s; color: var(--dk-text); } .dk-kanban-card:hover { border-color: var(--dk-border); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); color: var(--dk-text); } .dk-kanban-card-title { font-size: var(--dk-fs-13-5); font-weight: 500; line-height: 1.35; } .dk-kanban-card-code-inline { font-size: var(--dk-fs-11); font-weight: 400; color: var(--dk-text-muted); flex-shrink: 0; } .dk-kanban-card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .dk-kanban-card-code { font-size: var(--dk-fs-11); } .dk-kanban-card-deadline { font-size: var(--dk-fs-11-5); color: var(--dk-text-muted); display: flex; align-items: center; gap: 4px; } .dk-kanban-card-deadline i { font-size: var(--dk-fs-10); } .dk-kanban-card-exec { font-size: var(--dk-fs-12); color: var(--dk-text-muted); display: flex; align-items: center; gap: 4px; min-width: 0; } .dk-kanban-card-exec i { flex-shrink: 0; font-size: var(--dk-fs-11); } .dk-kanban-card-exec span, .dk-kanban-card-exec { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Цель, привязанная к задаче (tasks.goal_code -- чистая группировка, миграция 095) -- та же визуальная роль, что и .dk-kanban-card-exec. */ .dk-kanban-card-goal { font-size: var(--dk-fs-11-5); color: var(--dk-text-muted); display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dk-kanban-card-goal i { flex-shrink: 0; font-size: var(--dk-fs-11); } /* Кнопка "+" рядом с формой "Добавить таргет" (views/v_goal.php) -- в этой строке соседний dk-sel (dkSelHtml()) имеет min-height:38px, тогда как Bootstrap form-select-sm/dk-btn-sm ниже -- без явного min-height кнопка выглядела "просевшей" на фоне остальных полей строки. */ .dk-goal-add-btn { min-height: 38px; justify-content: center; } /* ── KANBAN ADMIN ORG BADGE ──────────────────────────────────── */ .dk-kanban-card-org { font-size: var(--dk-fs-10); font-weight: 600; color: var(--dk-color-primary, #4f6ef7); background: color-mix( in srgb, var(--dk-color-primary, #4f6ef7) 10%, transparent ); border: 1px solid color-mix(in srgb, var(--dk-color-primary, #4f6ef7) 25%, transparent); border-radius: 4px; padding: 1px 6px; display: flex; align-items: center; gap: 4px; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dk-kanban-card-org i { flex-shrink: 0; font-size: var(--dk-fs-10); } /* ── KANBAN ADMIN SHIELD ON FILTER TABS ─────────────────────── */ .dk-kanban-admin-shield { font-size: var(--dk-fs-10); color: #f97316; margin-right: 4px; flex-shrink: 0; } .dk-sel-opt-admin-icon { font-size: var(--dk-fs-11); color: #f97316; margin-left: 4px; } .dk-kanban-card-footer { display: flex; align-items: center; gap: 6px; margin-top: 2px; } /* ── KANBAN CARD: РЕЗОЛЮЦИИ (компактные чипы, см. Resolutions.php) ── Все активные резолюции задачи (по одной на человека) -- иконка типа резолюции + инициалы автора + подпись; ФИО/дата -- в title (hover). */ .dk-kanban-card-resolutions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; } .dk-kanban-resolution-chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 9px; background: var(--dk-bg); font-size: var(--dk-fs-11); font-weight: 500; color: var(--dk-text-muted); cursor: default; max-width: 100%; } .dk-kanban-resolution-chip i { font-size: var(--dk-fs-11); flex-shrink: 0; } .dk-kanban-resolution-avatar { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: var(--dk-bg-row-hover); color: var(--dk-text-muted); font-size: var(--dk-fs-9); font-weight: 700; flex-shrink: 0; } /* ── KANBAN CARD: SPRINT COLOR (left border) ──────────────────── */ .dk-kanban-card-sprint { border-left: 3px solid var(--dk-sprint-color, transparent); padding-left: 9px; } /* ── KANBAN CARD: PRIVATE PROJECT / "закрытый" (доступ) (left border) ── Только левая граница -- по просьбе, чтобы не спорить визуально с .dk-kanban-card-sprint (у той тоже левая граница, свой цвет per-спринт). Если у карточки ОБА признака -- спринт-цвет важнее (:not() ниже). Цвет -- var(--dk-danger), тот же что у "закрытой" иконки проекта на строке пути (см. _kanban_card.php, $_projColor) -- согласовано с Павлом 2026-07-16 (приватность проекта = "закрытый", не жизненный цикл). */ .dk-kanban-card-private:not(.dk-kanban-card-sprint) { border-left: 3px solid var(--dk-danger); padding-left: 9px; } /* ── SECTION HEADER ──────────────────────────────────────────── */ .dk-section { margin-bottom: 32px; } .dk-section-watch { background: var(--dk-bg); border: 1px solid var(--dk-border-light); border-radius: 8px; padding: 16px; } .dk-section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .dk-section-title { font-size: var(--dk-fs-11); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dk-text-muted); } .dk-section-count { font-size: var(--dk-fs-12); color: var(--dk-text-light); background: var(--dk-bg); padding: 1px 7px; border-radius: 10px; } /* Горизонтальный скролл на мобильных вместо обрезания/переноса колонок — тот же паттерн, что у .dk-admin-tabs (см. комментарий выше по файлу): .dk-content скрывает overflow-x, поэтому у широких таблиц (админка: пользователи/организации/заявки) должен быть собственный скролл-контейнер. */ .dk-table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ── TASK TABLE ──────────────────────────────────────────────── */ .dk-table { width: 100%; border-collapse: collapse; font-size: var(--dk-fs-14); } .dk-table th { text-align: left; font-size: var(--dk-fs-11); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dk-text-light); padding: 6px 12px; border-bottom: 1px solid var(--dk-border); } .dk-table td { padding: 9px 12px; border-bottom: 1px solid var(--dk-border-light); vertical-align: middle; } .dk-table tbody tr:hover td { background: var(--dk-bg-row-hover); } .dk-table tbody tr:last-child td { border-bottom: none; } .dk-code-chip { font-size: var(--dk-fs-12-5); color: var(--dk-text-light); font-family: var(--dk-font-mono); white-space: nowrap; } .dk-cell-muted { font-size: var(--dk-fs-13); color: var(--dk-text-muted); white-space: nowrap; } .dk-cell-overdue { color: var(--dk-status-problem) !important; } .dk-proj-tag { font-size: var(--dk-fs-11); color: var(--dk-text-muted); background: var(--dk-bg); border-radius: 3px; padding: 1px 5px; } /* ── STATUS PILLS ────────────────────────────────────────────── */ .dk-status { display: inline-flex; align-items: center; gap: 5px; font-size: var(--dk-fs-13); font-weight: 500; padding: 3px 8px; border-radius: 4px; white-space: nowrap; } .dk-s-new { color: var(--dk-status-new); background: rgba(59, 130, 246, 0.08); } .dk-s-inwork { color: var(--dk-status-inwork); background: rgba(6, 182, 212, 0.08); } .dk-s-pause { color: var(--dk-status-pause); background: rgba(245, 158, 11, 0.08); } .dk-s-solved { color: var(--dk-status-solved); background: rgba(6, 182, 212, 0.08); } .dk-s-closed { color: var(--dk-status-closed); background: rgba(107, 114, 128, 0.08); } .dk-s-problem { color: var(--dk-status-problem); background: rgba(239, 68, 68, 0.08); } .dk-s-check { color: var(--dk-status-check); background: rgba(139, 92, 246, 0.08); } .dk-s-negotiation { color: #8b5cf6; background: rgba(139, 92, 246, 0.08); } .dk-s-success { color: #22c55e; background: rgba(34, 197, 94, 0.08); } .dk-s-rejected { color: #ef4444; background: rgba(239, 68, 68, 0.08); } /* ── AUTH PAGES ──────────────────────────────────────────────── */ .dk-auth-body { background: var(--dk-bg); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 16px; overflow-x: hidden; } .dk-auth-wrap { width: 100%; max-width: 400px; /* Классический флексбокс-баг: у флекс-айтема min-width по умолчанию "auto" (= его intrinsic-ширина по самому широкому содержимому, напр. длинный текст

, БЕЗ реального (см. js/vendor/toastui-editor-all.min.js). Визуал (чекбокс через :before) у самого редактора scoped на .toastui-editor-contents -- вне этого класса состояние в HTML сохраняется (санитайзер его не трогает), но было НЕВИДИМО ни в одном read-only месте, где эта же HTML-разметка отображается: описание задачи, комментарии, вики-страницы. Правило ниже -- та же визуальная разметка из toastui-editor.min.css, накрывает все три read-only обёртки разом. */ .dk-task-descr-content .task-list-item, .dk-comment-text .task-list-item, .dk-page-content .task-list-item { position: relative; list-style: none; margin-left: -24px; padding-left: 24px; } .dk-task-descr-content .task-list-item::before, .dk-comment-text .task-list-item::before, .dk-page-content .task-list-item::before { content: ""; position: absolute; top: 1px; left: 0; width: 18px; height: 18px; border-radius: 2px; background: transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCI+PHJlY3Qgd2lkdGg9IjE3IiBoZWlnaHQ9IjE3IiB4PSIuNSIgeT0iLjUiIHJ4PSIyIiBmaWxsPSIjRkZGIiBzdHJva2U9IiNDQ0MiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==") 50% no-repeat; background-size: 18px 18px; } .dk-task-descr-content .task-list-item.checked::before, .dk-comment-text .task-list-item.checked::before, .dk-page-content .task-list-item.checked::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCI+PHBhdGggZD0iTTE2IDBhMiAyIDAgMCAxIDIgMnYxNGEyIDIgMCAwIDEtMiAySDJhMiAyIDAgMCAxLTItMlYyYTIgMiAwIDAgMSAyLTJoMTR6bS0xLjc5MyA1LjI5M2ExIDEgMCAwIDAtMS40MTQgMEw3LjUgMTAuNTg1IDUuMjA3IDguMjkzbC0uMDk0LS4wODNhMSAxIDAgMCAwLTEuMzIgMS40OTdsMyAzIC4wOTQuMDgzYTEgMSAwIDAgMCAxLjMyLS4wODNsNi02IC4wODMtLjA5NGExIDEgMCAwIDAtLjA4My0xLjMyeiIgZmlsbD0iIzRCOTZFNiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+"); } .dk-task-descr-content blockquote { border-left: 3px solid var(--dk-accent); margin: 0 0 10px; padding: 8px 16px; color: var(--dk-text-muted); } .dk-task-descr-content blockquote p:last-child { margin-bottom: 0; } .dk-task-descr-content pre { background: var(--dk-surface-2); border-radius: 6px; padding: 12px 16px; overflow-x: auto; font-size: var(--dk-fs-13); } .dk-task-descr-content code { background: var(--dk-surface-2); border-radius: 3px; padding: 1px 5px; font-size: 0.88em; } .dk-task-descr-content img { max-width: 100%; border-radius: var(--dk-radius); } .dk-task-descr-content table { width: 100%; border-collapse: collapse; margin-bottom: 10px; font-size: var(--dk-fs-13); } .dk-task-descr-content table th, .dk-task-descr-content table td { padding: 8px 12px; border: 1px solid var(--dk-border); } .dk-task-descr-content table th { background: var(--dk-surface-2); font-weight: 600; } .dk-task-descr-empty { color: var(--dk-text-light); font-size: var(--dk-fs-13); font-style: italic; } /* Comments */ .dk-comment-list { display: flex; flex-direction: column; gap: 0; } .dk-comment-item { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--dk-border-light); align-items: flex-start; } .dk-comment-item:last-child { border-bottom: none; } .dk-comment-highlighted { animation: dkCommentHighlight 2.5s ease-out; } @keyframes dkCommentHighlight { 0% { background: var(--dk-accent-dim); } 100% { background: transparent; } } .dk-comment-linked { box-shadow: inset 0 3px 0 var(--dk-accent), inset 0 -3px 0 var(--dk-accent); } .dk-comment-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--dk-accent-dim); color: var(--dk-accent); font-size: var(--dk-fs-13); font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dk-comment-body { flex: 1; min-width: 0; } .dk-comment-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; } .dk-comment-author { font-size: var(--dk-fs-13); font-weight: 600; color: var(--dk-text); } .dk-comment-date { font-size: var(--dk-fs-11); color: var(--dk-text-light); } .dk-comment-text { font-size: var(--dk-fs-13); line-height: 1.6; color: var(--dk-text); word-break: break-word; } .dk-comment-text p { margin: 0 0 6px; } .dk-comment-text p:last-child { margin-bottom: 0; } .dk-comment-text ul, .dk-comment-text ol { padding-left: 20px; margin: 0 0 6px; } .dk-comment-text li { margin-bottom: 2px; } .dk-comment-text blockquote { border-left: 3px solid var(--dk-accent); margin: 0 0 6px; padding: 4px 12px; color: var(--dk-text-muted); } .dk-comment-text blockquote p:last-child { margin-bottom: 0; } .dk-comment-text img { max-width: 100%; border-radius: var(--dk-radius); } .dk-comment-text table { width: 100%; border-collapse: collapse; margin-bottom: 6px; font-size: var(--dk-fs-12-5); } .dk-comment-text table th, .dk-comment-text table td { padding: 6px 10px; border: 1px solid var(--dk-border); } .dk-comment-text table th { background: var(--dk-surface-2); font-weight: 600; } .dk-works-total { font-size: var(--dk-fs-12); color: var(--dk-text-light); padding: 10px 16px; border-bottom: 1px solid var(--dk-border-light); background: var(--dk-accent-dim); } .dk-works-total strong { color: var(--dk-text); } .dk-estimate-block { padding: 16px; border-bottom: 1px solid var(--dk-border-light); } /* ── Работы: таймер учёта времени (migration 100) ────────────── */ .dk-timer-widget { display: flex; align-items: center; gap: 8px; } .dk-timer-live { display: inline-flex; align-items: center; font-size: var(--dk-fs-12); font-weight: 600; padding: 4px 10px; border-radius: 20px; background: var(--dk-accent-dim); color: var(--dk-accent); font-variant-numeric: tabular-nums; } .dk-timer-running .dk-timer-live { background: rgba(239, 68, 68, 0.1); color: var(--dk-danger-hover); } /* Status dropdown */ .dk-status-dropdown .dropdown-item { display: flex; align-items: center; gap: 8px; font-size: var(--dk-fs-13-5); padding: 6px 14px; } .dk-status-dropdown .dropdown-item.active, .dk-status-dropdown .dropdown-item:active { background: var(--dk-bg-row-hover); color: var(--dk-text); } /* File list */ .dk-file-list { display: flex; flex-direction: column; gap: 0; } .dk-file-item-action { padding: 8px 16px; border-bottom: 2px solid var(--dk-border-light); } .dk-file-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--dk-border-light); font-size: var(--dk-fs-13); } .dk-file-item:last-child { border-bottom: none; } .dk-file-icon { font-size: var(--dk-fs-20); flex-shrink: 0; color: var(--dk-text-muted); } .dk-file-name { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dk-file-meta { font-size: var(--dk-fs-11); color: var(--dk-text-light); white-space: nowrap; } .dk-file-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex-shrink: 0; cursor: pointer; border: 1px solid var(--dk-border); transition: opacity 0.15s; } .dk-file-thumb:hover { opacity: 0.8; } #dkImageModal .modal-dialog { max-width: min(90vw, 1200px); } #dkImageModal { background: rgba(0, 0, 0, 0.85); } /* ── PROJECT LIST (дашборд) ──────────────────────────────────── */ .dk-project-list { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; } .dk-project-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; text-decoration: none; color: var(--dk-text); transition: background 0.15s; } .dk-project-item:hover { background: var(--dk-bg-row-hover); color: var(--dk-text); text-decoration: none; } .dk-project-dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; } .dk-project-name { flex: 1; font-size: var(--dk-fs-14); font-weight: 500; color: var(--dk-text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-project-code { font-size: var(--dk-fs-11-5); color: var(--dk-text-light); font-family: var(--dk-font-mono); white-space: nowrap; } .dk-proj-access-pub { font-size: var(--dk-fs-11); color: #22c55e; flex-shrink: 0; } .dk-proj-access-priv { font-size: var(--dk-fs-11); color: #ef4444; flex-shrink: 0; } /* Comment form */ .dk-comment-form-wrap { padding: 16px; border-top: 1px solid var(--dk-border-light); } /* Upload zone inside section */ .dk-upload-zone { border: 1px dashed var(--dk-border); border-radius: var(--dk-radius); padding: 12px 16px; display: flex; align-items: center; gap: 10px; font-size: var(--dk-fs-13); color: var(--dk-text-muted); cursor: pointer; transition: background 0.15s; } .dk-upload-zone:hover { background: var(--dk-bg-row-hover); } /* ── ACTIVITY FEED ───────────────────────────────────────────── */ .dk-activity-feed { display: flex; flex-direction: column; gap: 0; background: var(--dk-surface); border: 1px solid var(--dk-border); border-radius: var(--dk-radius-lg); overflow: hidden; } .dk-activity-item { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--dk-border-light); align-items: flex-start; transition: opacity 0.2s; } .dk-activity-item:last-child { border-bottom: none; } .dk-journal-del-btn { display: inline-flex; align-items: center; background: none; border: none; padding: 2px 5px; color: var(--dk-text-muted); font-size: var(--dk-fs-11); cursor: pointer; border-radius: 4px; line-height: 1; opacity: 0.35; transition: opacity 0.15s, color 0.15s; } .dk-journal-del-btn:hover { opacity: 1; color: var(--dk-danger); } .dk-activity-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--dk-accent-dim); color: var(--dk-accent); font-size: var(--dk-fs-11); font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dk-activity-body { flex: 1; min-width: 0; } .dk-activity-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; } .dk-activity-user { font-weight: 600; font-size: var(--dk-fs-13); color: var(--dk-text); } .dk-activity-action { font-size: var(--dk-fs-13); color: var(--dk-text-muted); } .dk-activity-date { font-size: var(--dk-fs-11); margin-left: auto; white-space: nowrap; } .dk-activity-diff { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; } .dk-diff-old { font-size: var(--dk-fs-12); padding: 2px 8px; border-radius: 4px; background: rgba(239, 68, 68, 0.08); color: #b91c1c; text-decoration: line-through; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dk-diff-new { font-size: var(--dk-fs-12); padding: 2px 8px; border-radius: 4px; background: rgba(16, 185, 129, 0.08); color: #065f46; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dk-activity-comment { font-size: var(--dk-fs-12); color: var(--dk-text-muted); margin-top: 4px; } .dk-activity-link { font-size: var(--dk-fs-12); color: var(--dk-accent); text-decoration: none; font-weight: 500; } .dk-activity-link:hover { text-decoration: underline; } /* ── TOPICS ────────────────────────────────────────────────── */ .dk-topic-card { background: var(--dk-surface); border: 1px solid var(--dk-border); border-radius: var(--dk-radius-lg); padding: 14px 16px; transition: box-shadow 0.15s, border-color 0.15s; min-height: 80px; } .dk-topic-card:hover { border-color: var(--dk-accent); box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .dk-topic-filters { display: flex; gap: 6px; flex-wrap: wrap; } .dk-topic-filter-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 20px; font-size: var(--dk-fs-13); font-weight: 500; color: var(--dk-text-muted); background: var(--dk-bg); border: 1px solid var(--dk-border); text-decoration: none; transition: all 0.15s; white-space: nowrap; } .dk-topic-filter-btn:hover { color: var(--dk-accent); border-color: var(--dk-accent); background: var(--dk-accent-dim); } .dk-topic-filter-btn.active { color: var(--dk-white); background: var(--dk-accent); border-color: var(--dk-accent); } .dk-topic-filter-btn.active:hover { opacity: 0.9; color: var(--dk-white); } .dk-activity-task-name { color: var(--dk-text-muted); font-weight: 400; margin-left: 4px; } .dk-activity-project { display: inline-flex; align-items: center; } /* ── Topic comment expand ─────────────────────────────────── */ .dk-topic-comment { margin-top: 6px; background: var(--dk-bg); border: 1px solid var(--dk-border-light); border-radius: var(--dk-radius); padding: 10px 12px; font-size: var(--dk-fs-13); line-height: 1.5; color: var(--dk-text); } .dk-topic-collapsible .dk-topic-comment-inner { max-height: 200px; overflow: hidden; position: relative; } .dk-topic-collapsible .dk-topic-comment-inner::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 48px; background: linear-gradient(transparent, var(--dk-bg)); pointer-events: none; } .dk-topic-collapsible.expanded .dk-topic-comment-inner { max-height: none; } .dk-topic-collapsible.expanded .dk-topic-comment-inner::after { display: none; } .dk-topic-expand-btn { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 4px 10px; font-size: var(--dk-fs-12); font-weight: 500; color: var(--dk-accent); background: none; border: none; cursor: pointer; border-radius: 4px; transition: background 0.15s; } .dk-topic-expand-btn:hover { background: var(--dk-accent-dim); } .dk-topic-collapsible.expanded .dk-topic-expand-btn .dk-topic-expand-label { display: none; } .dk-topic-collapsible.expanded .dk-topic-expand-btn i { transform: rotate(180deg); } /* ── PROJECT HEADER ──────────────────────────────────────────── */ .dk-project-header { background: var(--dk-surface); border-radius: var(--dk-radius-lg); padding: 20px 24px; border: 1px solid var(--dk-border); } .dk-project-header-inner { display: flex; align-items: flex-start; gap: 16px; } .dk-project-badge-lg { width: 48px; height: 48px; border-radius: var(--dk-radius); display: flex; align-items: center; justify-content: center; font-size: var(--dk-fs-22); flex-shrink: 0; } .dk-project-header-info { flex: 1; min-width: 0; } .dk-project-title { font-size: var(--dk-fs-22); font-weight: 700; color: var(--dk-text); } /* ── STATS ROW ───────────────────────────────────────────────── */ .dk-stats-row { display: flex; flex-wrap: wrap; gap: 8px; } .dk-stat-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; background: var(--dk-bg-row-hover); border: 1px solid var(--dk-border); color: var(--dk-text-muted); font-size: var(--dk-fs-13); text-decoration: none; transition: background 0.12s, border-color 0.12s; } .dk-stat-chip:hover { background: var(--dk-border-light); color: var(--dk-text); text-decoration: none; } .dk-stat-chip strong { font-weight: 700; color: var(--dk-stat-color, var(--dk-text)); } .dk-stat-chip-filled { background: var(--dk-stat-color, var(--dk-accent)); border-color: var(--dk-stat-color, var(--dk-accent)); color: #fff; } .dk-stat-chip-filled strong { color: #fff; } .dk-stat-chip-filled:hover { background: var(--dk-stat-color, var(--dk-accent)); color: #fff; opacity: 0.9; } .dk-stat-chip-active { background: color-mix( in srgb, var(--dk-stat-color, var(--dk-accent)) 12%, transparent ); border-color: var(--dk-stat-color, var(--dk-accent)); color: var(--dk-text); } /* ── ACCESS PANEL ───────────────────────────────────────────── */ .dk-access-panel { max-width: 640px; } .dk-access-mode { background: var(--dk-bg); border: 1px solid var(--dk-border); border-radius: var(--dk-radius-lg); padding: 14px 16px; } .dk-access-section-label { font-size: var(--dk-fs-11); font-weight: 600; letter-spacing: 0.06em; color: var(--dk-text-muted); text-transform: uppercase; margin-bottom: 8px; } .dk-access-list { background: var(--dk-surface); border: 1px solid var(--dk-border); border-radius: var(--dk-radius-lg); overflow: hidden; } .dk-access-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--dk-border-light); } .dk-access-row:last-child { border-bottom: none; } .dk-access-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--dk-accent-dim); color: var(--dk-accent); font-size: var(--dk-fs-11); font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dk-access-info { flex: 1; min-width: 0; } .dk-access-name { font-size: var(--dk-fs-13); font-weight: 500; color: var(--dk-text); } .dk-access-add-form { background: var(--dk-surface); border: 1px solid var(--dk-border); border-radius: var(--dk-radius-lg); padding: 16px; } .dk-btn-sm { padding: 3px 8px; font-size: var(--dk-fs-12-5); } /* ── TASK LIST ───────────────────────────────────────────────── */ .dk-task-list { background: var(--dk-surface); border: 1px solid var(--dk-border); border-radius: var(--dk-radius-lg); overflow: hidden; } /* Планирование релиза (/release/{tag_id}) -- см. views/v_release.php */ .dk-release-capacity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .dk-release-capacity-item label { display: flex; align-items: center; gap: 6px; font-size: var(--dk-fs-12); color: var(--dk-text-muted); margin-bottom: 4px; } .dk-release-pick-row { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--dk-border-light); } .dk-release-pick-row:last-child { border-bottom: none; } .dk-release-pick-task { flex: 1; min-width: 0; } .dk-release-pick-task .dk-task-row { border-bottom: none; } .dk-release-add-btn, .dk-release-remove-btn { margin-right: 12px; flex-shrink: 0; } .dk-release-add-btn { color: var(--dk-success); } .dk-release-remove-btn { color: var(--dk-danger); } .dk-release-remove-locked { margin-right: 16px; flex-shrink: 0; color: var(--dk-text-muted); opacity: .5; font-size: var(--dk-fs-13); } .dk-release-list-disabled { opacity: .85; } .dk-release-summary { background: var(--dk-surface); border: 1px solid var(--dk-border); border-radius: var(--dk-radius-lg); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; } .dk-release-summary-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; font-size: var(--dk-fs-12); } .dk-release-summary-label { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--dk-text); } .dk-release-summary-nums { color: var(--dk-text-muted); } .dk-release-over { color: var(--dk-danger); font-weight: 700; } .dk-task-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--dk-border-light); text-decoration: none; color: var(--dk-text); transition: background 0.1s; gap: 14px; } .dk-task-row:last-child { border-bottom: none; } .dk-task-row:hover { background: var(--dk-bg-row-hover); text-decoration: none; color: var(--dk-text); } .dk-task-row-left { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; } .dk-task-row-body { flex: 1; min-width: 0; } .dk-task-estimates { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .dk-task-estimate-chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 9px; background: var(--dk-bg); border: 1px solid var(--dk-border-light); font-size: var(--dk-fs-10); font-weight: 500; color: var(--dk-text-muted); } .dk-task-row-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .dk-task-code { font-family: var(--dk-font-mono); font-size: var(--dk-fs-13-5); color: var(--dk-text-muted); white-space: nowrap; flex-shrink: 0; } /* Код задачи -- отдельной строкой над названием (не рядом с иконкой типа). */ .dk-task-row .dk-task-code { display: block; margin-bottom: 2px; } .dk-task-type-icon { font-size: var(--dk-fs-16); flex-shrink: 0; } .dk-task-name { display: block; font-size: var(--dk-fs-17); font-weight: 500; color: var(--dk-text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-task-name:hover { color: var(--dk-accent); text-decoration: none; } .dk-task-executor { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; font-size: var(--dk-fs-13-5); } .dk-task-deadline { white-space: nowrap; color: var(--dk-text-muted); font-size: var(--dk-fs-13-5); } .dk-deadline-overdue { color: var(--dk-danger) !important; font-weight: 500; } /* Брэдкрамб Проект -> Подпроект под названием задачи (TaskRow::render, showPath=true) -- используется там, где задачи показаны вперемешку из разных проектов (дашборд). */ .dk-task-path { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 2px; font-size: var(--dk-fs-11-5); line-height: 1.3; overflow: hidden; } .dk-task-path-proj { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; } /* Приоритет задачи -- перенесён на строку пути (карточка канбана), см. .dk-kanban-card партиал. Раньше был отдельной строкой внизу карточки. */ .dk-kanban-card-priority { flex-shrink: 0; font-size: var(--dk-fs-11); margin-left: auto; } .dk-task-path-item { color: var(--dk-text-muted); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-task-path-item:hover { color: var(--dk-accent); text-decoration: underline; } .dk-task-path-sep { font-size: var(--dk-fs-8); color: var(--dk-text-light); flex-shrink: 0; } .dk-task-path-icon { font-size: var(--dk-fs-10); color: var(--dk-text-light); flex-shrink: 0; opacity: .7; } /* ── PAGES (вики-страницы) ──────────────────────────────────── */ /* Выбор проекта */ .dk-pages-project-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--dk-surface); border: 1px solid var(--dk-border); border-radius: var(--dk-radius); text-decoration: none; color: var(--dk-text); transition: border-color 0.15s, box-shadow 0.15s; } .dk-pages-project-card:hover { border-color: var(--dk-accent); box-shadow: 0 0 0 3px var(--dk-accent-dim); color: var(--dk-text); } .dk-pages-project-icon { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: var(--dk-fs-18); flex-shrink: 0; } .dk-pages-project-name { font-weight: 600; font-size: var(--dk-fs-14); } .dk-pages-project-code { font-size: var(--dk-fs-12); } /* Лейаут страницы: контент + sidebar */ .dk-page-layout { display: grid; grid-template-columns: 1fr 240px; gap: 24px; align-items: start; } @media (max-width: 768px) { .dk-page-layout { grid-template-columns: 1fr; } .dk-page-sidebar { order: -1; } } /* Основной контент */ .dk-page-header { margin-bottom: 20px; } .dk-page-title { font-size: var(--dk-fs-22); font-weight: 700; margin-bottom: 4px; } .dk-page-meta { font-size: var(--dk-fs-12); } .dk-page-hidden-badge { display: inline-flex; align-items: center; margin-top: 4px; padding: 2px 9px; border-radius: 999px; background: var(--dk-surface-2); color: var(--dk-text-muted); font-size: var(--dk-fs-12); font-weight: 600; } /* Prose — типографика содержимого TinyMCE */ .dk-prose { font-size: var(--dk-fs-15); line-height: 1.7; color: var(--dk-text); } .dk-prose h1, .dk-prose h2, .dk-prose h3 { font-weight: 700; margin-top: 1.5em; margin-bottom: 0.5em; } .dk-prose h1 { font-size: 1.6em; } .dk-prose h2 { font-size: 1.3em; } .dk-prose h3 { font-size: 1.1em; } .dk-prose p { margin-bottom: 0.9em; } .dk-prose ul, .dk-prose ol { padding-left: 1.5em; margin-bottom: 0.9em; } .dk-prose li { margin-bottom: 0.3em; } .dk-prose a { color: var(--dk-accent); } .dk-prose a:hover { text-decoration: underline; } .dk-prose table { width: 100%; border-collapse: collapse; margin-bottom: 1em; font-size: var(--dk-fs-14); } .dk-prose table th, .dk-prose table td { padding: 8px 12px; border: 1px solid var(--dk-border); } .dk-prose table th { background: var(--dk-surface-2); font-weight: 600; } .dk-prose pre { background: var(--dk-surface-2); border-radius: 6px; padding: 12px 16px; overflow-x: auto; font-size: var(--dk-fs-13); } .dk-prose code { background: var(--dk-surface-2); border-radius: 3px; padding: 1px 5px; font-size: 0.88em; } .dk-prose blockquote { border-left: 3px solid var(--dk-accent); margin: 0 0 1em; padding: 8px 16px; color: var(--dk-text-muted); } .dk-prose img { max-width: 100%; border-radius: var(--dk-radius); } .dk-prose hr { border: none; border-top: 1px solid var(--dk-border); margin: 1.5em 0; } /* Sidebar дерево -- фон намеренно ОТЛИЧАЕТСЯ от .dk-page-content (var(--dk-bg), а не var(--dk-surface)), чтобы панель визуально выделялась на фоне белой карточки контента, а не сливалась с ней (просьба Павла 2026-09-10). */ .dk-page-sidebar { background: var(--dk-bg); border: 1px solid var(--dk-border); border-radius: var(--dk-radius); overflow: hidden; position: sticky; top: 80px; } .dk-page-sidebar-toolbar { display: flex; justify-content: flex-end; padding: 6px 6px 0; } .dk-page-sidebar.dk-collapsed .dk-page-sidebar-toolbar { justify-content: center; padding: 8px 0; } .dk-page-sidebar.dk-collapsed .dk-page-sidebar-body { display: none; } .dk-page-sidebar.dk-collapsed #sidebarToggleIcon { transform: rotate(180deg); } /* На десктопе свёрнутая панель ужимается почти до кнопки-стрелки, отдавая освободившееся место основному контенту. На мобильной раскладке (см. @media ниже, .dk-page-layout уже 1 колонка) ширину не трогаем -- там панель просто схлопывается по высоте. */ @media (min-width: 769px) { .dk-page-layout.dk-sidebar-collapsed { grid-template-columns: 1fr 40px; } } /* На мобильной раскладке sidebar идёт первым (order:-1, см. выше) — sticky top:80px там не нужен и создаёт пустой отступ перед блоком, пока страница не проскроллена (сессия 62, отчёт о мобильной адаптивности). Правило обязано идти ПОСЛЕ базового .dk-page-sidebar выше по каскаду — иначе более поздняя по тексту файла база с той же специфичностью его перебивает независимо от @media. */ @media (max-width: 768px) { .dk-page-sidebar { position: static; top: auto; } } .dk-page-tree-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; font-size: var(--dk-fs-16); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dk-text-muted); border-bottom: 1px solid var(--dk-border); } .dk-page-tree-toggle-hidden { background: none; border: none; color: var(--dk-text-muted); cursor: pointer; padding: 2px 4px; border-radius: 4px; line-height: 1; font-size: var(--dk-fs-14); flex-shrink: 0; } .dk-page-tree-toggle-hidden:hover { background: var(--dk-surface-2); } .dk-page-tree-toggle-hidden.active { color: var(--dk-accent); } .dk-page-tree { max-height: calc(100vh - 160px); overflow-y: auto; padding: 6px 0; } .dk-page-tree-item { display: flex; align-items: center; padding: 6px 12px; font-size: var(--dk-fs-17); color: var(--dk-text); text-decoration: none; border-radius: 0; transition: background 0.1s; min-width: 0; } .dk-page-tree-item-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-page-tree-item:hover { background: var(--dk-surface-2); color: var(--dk-text); } .dk-page-tree-item.active { background: var(--dk-accent-dim); color: var(--dk-accent); font-weight: 600; } .dk-page-tree-item-hidden { display: none; } .dk-page-tree.dk-show-hidden .dk-page-tree-item-hidden { display: flex; opacity: 0.6; } .dk-page-tree-item-hidden-icon { margin-left: auto; padding-left: 6px; font-size: var(--dk-fs-12); color: var(--dk-text-muted); flex-shrink: 0; } /* ── Таблицы-страницы (мини-Notion грид, Tabulator) ─────────── */ .dk-table-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .dk-table-grid { border: 1px solid var(--dk-border); border-radius: var(--dk-radius) var(--dk-radius) 0 0; border-bottom: none; overflow: hidden; } .dk-table-add-row-btn { display: flex; align-items: center; width: 100%; padding: 8px 12px; border: 1px solid var(--dk-border); border-radius: 0 0 var(--dk-radius) var(--dk-radius); background: var(--dk-surface); color: var(--dk-text-muted); font-family: var(--dk-font); font-size: var(--dk-fs-13); text-align: left; cursor: pointer; transition: background 0.15s, color 0.15s; } .dk-table-add-row-btn:hover { background: var(--dk-bg-row-hover); color: var(--dk-accent); } .dk-dt-ghost-row { cursor: pointer; } .dk-dt-ghost-row:hover { background: var(--dk-bg-row-hover); } .dk-dt-ghost-row .tabulator-row-handle { pointer-events: none; opacity: .25; } .dk-dt-ghost-label { display: inline-flex; align-items: center; color: var(--dk-text-muted); font-size: var(--dk-fs-13); } .dk-dt-ghost-row:hover .dk-dt-ghost-label { color: var(--dk-accent); } .dk-dt-row-delete { color: var(--dk-text-muted); cursor: pointer; transition: color 0.15s; } .dk-dt-row-delete:hover { color: var(--dk-danger); } /* Tabulator — переопределения под дизайн-систему doka */ .dk-table-grid .tabulator { background: var(--dk-surface); border: none; font-family: var(--dk-font); font-size: var(--dk-fs-13); color: var(--dk-text); } .dk-table-grid .tabulator-header { background: var(--dk-surface); border-bottom: 1px solid var(--dk-border); } .dk-table-grid .tabulator-col { background: var(--dk-surface); border-right: 1px solid var(--dk-border-light); } .dk-table-grid .tabulator-col-title { font-weight: 600; color: var(--dk-text); cursor: pointer; } .dk-table-grid .tabulator-col-title:hover { color: var(--dk-accent); } .dk-table-grid .tabulator-col-sorter { padding: 3px; border-radius: 4px; } .dk-table-grid .tabulator-col-sorter:hover { background: var(--dk-accent-dim); } .dk-table-grid .tabulator-row { background: var(--dk-surface); border-bottom: 1px solid var(--dk-border-light); } .dk-table-grid .tabulator-row:hover { background: var(--dk-bg-row-hover); } .dk-table-grid .tabulator-row .tabulator-cell { border-right: 1px solid var(--dk-border-light); } .dk-table-grid .tabulator-row .tabulator-cell.tabulator-editing { border: 1px solid var(--dk-accent); } .dk-table-grid .tabulator-calcs-holder { background: var(--dk-accent-dim); font-weight: 600; } .dk-table-grid .tabulator-menu { border: 1px solid var(--dk-border); border-radius: var(--dk-radius); box-shadow: var(--dk-shadow-sm); font-family: var(--dk-font); font-size: var(--dk-fs-13); } .dk-table-grid .tabulator-menu .tabulator-menu-item { padding: 6px 12px; } .dk-table-grid .tabulator-menu .tabulator-menu-item:hover { background: var(--dk-accent-dim); color: var(--dk-accent); } /* ── Файловая библиотека в сайдбаре ─────────────────────────── */ .dk-sidebar-section-header { display: flex; align-items: center; font-size: var(--dk-fs-14); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dk-text-muted); padding: 12px 14px 8px; } .dk-sidebar-upload-btn { background: none; border: none; color: var(--dk-text-muted); cursor: pointer; padding: 2px 4px; border-radius: 4px; line-height: 1; font-size: var(--dk-fs-14); } .dk-sidebar-upload-btn:hover { background: var(--dk-hover); color: var(--dk-accent); } .dk-sidebar-dropzone { margin: 0 10px 8px; border: 1.5px dashed var(--dk-border); border-radius: var(--dk-radius); padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: var(--dk-fs-11); color: var(--dk-text-muted); cursor: pointer; transition: border-color 0.15s, background 0.15s; } .dk-sidebar-dropzone:hover, .dk-sidebar-dropzone.dk-dropzone-over { border-color: var(--dk-accent); background: var(--dk-accent-dim); } .dk-sidebar-dropzone.dk-dropzone-uploading { opacity: 0.5; pointer-events: none; } .dk-dropzone-link { color: var(--dk-accent); cursor: pointer; text-decoration: underline; } .dk-sidebar-file-list { padding: 0 4px 4px; } .dk-sidebar-empty { font-size: var(--dk-fs-16); color: var(--dk-text-muted); text-align: center; padding: 6px 0 8px; margin: 0; } .dk-sidebar-file-item { display: flex; flex-direction: column; gap: 0; padding: 6px 8px; border-radius: 8px; font-size: var(--dk-fs-16); transition: background 0.12s; cursor: default; } .dk-sidebar-file-item:hover { background: var(--dk-hover); } .dk-sidebar-file-main { display: flex; align-items: center; gap: 8px; min-width: 0; } .dk-sidebar-file-icon { flex-shrink: 0; font-size: var(--dk-fs-22); } .dk-sidebar-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dk-text); font-size: var(--dk-fs-16); font-weight: 500; } .dk-sidebar-file-actions { display: none; gap: 3px; margin-top: 6px; flex-wrap: wrap; } .dk-sidebar-file-item:hover .dk-sidebar-file-actions { display: flex; } /* .dk-icon-btn — универсальная кнопка-иконка (сессия 46: расширена с .dk-sidebar-file-actions на standalone-использование, напр. карточки контактов) */ .dk-icon-btn, a.dk-icon-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid var(--dk-border); background: var(--dk-bg); color: var(--dk-text-muted); cursor: pointer; font-size: var(--dk-fs-14); text-decoration: none; transition: background 0.12s, color 0.12s, border-color 0.12s; } .dk-icon-btn:hover, a.dk-icon-btn:hover { background: var(--dk-hover); color: var(--dk-accent); border-color: var(--dk-accent); } .dk-icon-btn.text-danger:hover { color: #dc3545; border-color: #dc3545; background: #fff5f5; } .dk-icon-btn-sm { width: 26px; height: 26px; font-size: var(--dk-fs-12); } /* Карточки контактов клиента (сессия 46) */ .dk-contact-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } .dk-contact-card { position: relative; background: var(--dk-surface); border: 1px solid var(--dk-border); border-radius: var(--dk-radius); padding: 14px 16px; transition: border-color 0.12s; } .dk-contact-card:hover { border-color: var(--dk-accent); } .dk-contact-card-name { font-weight: 500; color: var(--dk-text); padding-right: 62px; word-break: break-word; } .dk-contact-card-type { margin: 4px 0 6px; } .dk-contact-card-line { display: flex; align-items: center; gap: 5px; font-size: var(--dk-fs-12-5); color: var(--dk-text-muted); margin-top: 3px; } .dk-contact-card-link { color: var(--dk-text-muted); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dk-contact-card-link:hover { color: var(--dk-accent); text-decoration: underline; } .dk-contact-card-comment { font-size: var(--dk-fs-12-5); color: var(--dk-text-light); font-style: italic; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--dk-border); word-break: break-word; } .dk-contact-card-actions { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px; opacity: 0; transition: opacity 0.12s; } .dk-contact-card:hover .dk-contact-card-actions { opacity: 1; } .dk-sidebar-divider { height: 1px; background: var(--dk-border); margin: 10px 10px 6px; } .dk-sidebar-progress { height: 3px; background: var(--dk-border); margin: 0 10px 6px; border-radius: 2px; overflow: hidden; } .dk-sidebar-progress-bar { height: 100%; background: var(--dk-accent); border-radius: 2px; width: 0%; transition: width 0.15s ease; } .dk-sidebar-file-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; flex-shrink: 0; cursor: pointer; border: 1px solid var(--dk-border); } .dk-sidebar-file-thumb:hover { opacity: 0.85; } .dk-sidebar-file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .dk-sidebar-file-size { font-size: var(--dk-fs-13); color: var(--dk-text-muted); } /* Бейдж типа документа (сессия 46, файлы клиента) */ .dk-doc-type-badge { display: inline-flex; align-items: center; gap: 3px; font-size: var(--dk-fs-10); font-weight: 500; margin-top: 1px; } /* Кнопка удаления файла из превью перед загрузкой задачи (сессия 46) */ .dk-attach-remove { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; border: none; background: transparent; color: var(--dk-text-light); cursor: pointer; font-size: var(--dk-fs-13); line-height: 1; border-radius: 3px; } .dk-attach-remove:hover { background: rgba(220, 53, 69, 0.12); color: #dc3545; } /* Белый фон для страниц-документов */ .dk-page-content, .dk-page-layout { background: var(--dk-surface); } .dk-page-content { padding: 28px 32px; border-radius: var(--dk-radius); border: 1px solid var(--dk-border); min-height: 400px; min-width: 0; overflow-wrap: break-word; overflow-x: auto; } /* ── Приватные комментарии ───────────────────────────────────── */ .dk-comment-private { background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--dk-radius); padding: 10px 12px; } .dk-comment-private .dk-comment-avatar { background: #f59e0b; } /* Фон приватного комментария нарочно светло-жёлтый в ЛЮБОЙ теме (не переопределяется в тёмной, см. комментарий у :root[data-theme="dark"] выше) -- но .dk-comment-author/-date/-text цвет не задавали, брали общий var(--dk-text)/var(--dk-text-light), а те в тёмной теме становятся светлыми -- светлый текст на светлом фоне, почти нечитаемо (жалоба Павла, скриншот приватного комментария в тёмной теме, 2026-09-16). Фиксируем тёмный текст явно, только внутри .dk-comment-private -- в светлой теме ничего не меняет (там var(--dk-text) и так тёмный), эффект только в dark. */ [data-theme="dark"] .dk-comment-private .dk-comment-author, [data-theme="dark"] .dk-comment-private .dk-comment-text { color: #451a03; } [data-theme="dark"] .dk-comment-private .dk-comment-date { color: #92400e; } /* Кнопка-предупреждение (warning) */ .dk-btn-warning { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; } .dk-btn-warning:hover { background: #fde68a; color: #78350f; } /* ── Поиск в сайдбаре ───────────────────────────────────────── */ .dk-nav-search { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: var(--dk-radius-sm); border: 1px solid transparent; transition: border-color 0.15s, background 0.15s; cursor: text; } .dk-nav-search:hover, .dk-nav-search:focus-within { background: var(--dk-sidebar-hover); border-color: var(--dk-accent); } .dk-nav-search.active { color: var(--dk-sidebar-active); } .dk-nav-search-icon { font-size: var(--dk-fs-15); color: var(--dk-sidebar-text); flex-shrink: 0; cursor: text; } .dk-nav-search:focus-within .dk-nav-search-icon { color: var(--dk-accent); } .dk-nav-search-input { background: transparent; border: none; outline: none; color: #e5e7eb; font-size: var(--dk-fs-14); width: 100%; min-width: 0; } .dk-nav-search-input::placeholder { color: var(--dk-sidebar-text); } /* Свёрнутый сайдбар — скрываем инпут, показываем только иконку */ .dk-sidebar-collapsed .dk-nav-search-input { display: none; } .dk-sidebar-collapsed .dk-nav-search { padding: 8px 0; justify-content: center; } /* ── Результаты поиска ──────────────────────────────────────── */ .dk-search-header { margin-bottom: 20px; color: var(--dk-text-muted); font-size: var(--dk-fs-14); } .dk-search-section { margin-bottom: 24px; } .dk-search-section-title { display: flex; align-items: center; font-size: var(--dk-fs-12); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dk-text-muted); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--dk-border); } .dk-search-list { display: flex; flex-direction: column; gap: 2px; } .dk-search-item { display: flex; align-items: center; gap: 10px; } .dk-search-item a { text-decoration: none; color: var(--dk-text); } .dk-search-item, .dk-search-item a, a.dk-search-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--dk-radius-sm); text-decoration: none; color: var(--dk-text); font-size: var(--dk-fs-14); transition: background 0.1s; } a.dk-search-item:hover { background: var(--dk-surface-2); color: var(--dk-text); } .dk-search-code { font-family: var(--dk-font-mono); font-size: var(--dk-fs-11); color: var(--dk-text-muted); flex-shrink: 0; } .dk-search-name { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dk-search-descr { font-size: var(--dk-fs-13); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; } .dk-project-badge-sm { width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: var(--dk-fs-13); flex-shrink: 0; } /* ─── @mention dropdown ────────────────────────────────────────────────────── */ .dk-mention-dropdown { position: fixed; z-index: 99999; background: var(--dk-surface); border: 1px solid #dee2e6; border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); min-width: 220px; max-width: 320px; max-height: 260px; overflow-y: auto; padding: 4px 0; } .dk-mention-item { display: flex; flex-direction: column; padding: 7px 14px; cursor: pointer; gap: 1px; } .dk-mention-item:hover, .dk-mention-item.active { background: #fff7ed; } .dk-mention-uname { font-size: var(--dk-fs-14); font-weight: 500; color: #1e293b; } .dk-mention-pos { font-size: var(--dk-fs-12); color: #94a3b8; } /* ─── @mention chip (внутри TinyMCE и в сохранённом HTML) ─────────────────── */ .dk-mention { display: inline-block; background: #fff7ed; color: #ea580c; border-radius: 4px; padding: 0 5px; font-weight: 500; font-size: 0.92em; white-space: nowrap; } /* ─── @mention ссылка (внутри Toast UI Editor: @Имя) ──── */ /* span.dk-mention не переживает setHTML()/getHTML() в Toast UI, поэтому новый формат -- обычная ссылка mailto:, стилизуем её так же, как старый чип */ .dk-task-descr-content a[href^="mailto:"], .dk-comment-text a[href^="mailto:"], .dk-page-body a[href^="mailto:"], .toastui-editor-contents a[href^="mailto:"] { display: inline-block; background: #fff7ed; color: #ea580c; border-radius: 4px; padding: 0 5px; font-weight: 500; font-size: 0.92em; white-space: nowrap; text-decoration: none; } /* ─── Индикатор дропдауна у кнопки "Заголовки" (H) в тулбаре Toast UI Editor ── Кнопка визуально неотличима от обычных (B/I/S), хотя по клику открывает попап "Заголовок 1-6 + Абзац" -- Павел не понял, что это меню (2026-08-02). Добавлена стрелочка вниз в углу кнопки, чисто визуальный маркер, поведение самой кнопки не меняется. Треугольник через border, не unicode-символ и не bootstrap-icons codepoint -- проще и не требует подбора глифа. */ .toastui-editor-toolbar-icons.heading { position: relative; } .toastui-editor-toolbar-icons.heading::after { content: ""; position: absolute; right: 3px; bottom: 4px; width: 0; height: 0; border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; border-top: 5px solid #6b7280; pointer-events: none; } /* ─── Кнопка "HTML" в тулбаре Toast UI Editor (просмотр/правка сырого HTML) ──── */ /* Специфичность .toastui-editor-defaultUI-toolbar button (класс+тег) в вендоренном css выше, чем у одного .dk-toast-html-btn (просто класс) -- width:32px и padding:0 оттуда побеждали наши width:auto/padding:0 8px, текст "HTML" не помещался в 32px и вылезал за рамку кнопки. Поднимаем специфичность правила до того же уровня, что и у переопределяемого. */ .toastui-editor-defaultUI-toolbar button.dk-toast-html-btn { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 32px; height: 32px; padding: 0 8px; border: none; background: transparent; border-radius: 4px; color: #4b5563; font-size: var(--dk-fs-11); font-weight: 600; letter-spacing: 0.02em; cursor: pointer; } .toastui-editor-defaultUI-toolbar button.dk-toast-html-btn:hover { background: #f3f4f6; color: #1e293b; } /* ─── Кнопка "Полный экран" в тулбаре Toast UI Editor ──── */ /* Иконка вместо текста (изначально был текстовый лейбл "Экран"/"Свернуть" -- Павел заметил, что текст вылезает за пределы кнопки, ширина скачет между состояниями). Глиф -- из шрифта bootstrap-icons (уже подключён глобально), через CSS content по codepoint -- Toast UI не даёт вставить