/* Cloudflare-admin примітиви у трьох темах. * * Кольори задані змінними в одному місці, а тему обирає атрибут data-theme на * : усередині Teams його виставляє контекст клієнта, поза Teams * системні налаштування. Самі правила кольорів не містять. * * Світла палітра збігається з дашбордом керівництва: це два вікна в один * продукт. */ :root { --cf-page: #f7f8fa; --cf-surface: #ffffff; --cf-tint: #f5f5f5; /* Тло репліки в стрічці. Відрізняється від опису навмисно: інакше коментар і опис читаються як один блок. */ --cf-bubble: #eceef1; --cf-text: #313131; --cf-text-light: #6b6b6b; --cf-border: #d9d9d9; --cf-border-soft: #ededed; --cf-hover: #e8e8e8; --cf-blue: #0051c3; --cf-blue-hover: #003681; --cf-blue-solid: #0051c3; --cf-orange: #f6821f; --st-new: #0051c3; --st-progress: #f6821f; --st-blocked: #bd2a2a; --st-done: #0e7e32; --st-cancelled: #6b6b6b; --chip-bg: #f5f5f5; --chip-border: #e4e4e4; --chip-blue-bg: rgba(0, 81, 195, 0.07); --chip-blue-border: rgba(0, 81, 195, 0.18); --chip-red-bg: rgba(189, 42, 42, 0.07); --chip-red-border: rgba(189, 42, 42, 0.2); --chip-orange-bg: rgba(246, 130, 31, 0.1); --chip-orange-border: rgba(246, 130, 31, 0.25); --chip-orange-text: #b45c09; --column-bg: #f1f2f4; --drop-bg: #edf5ff; --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.04); --shadow-hover: 0 2px 6px rgba(16, 24, 40, 0.12), 0 1px 2px rgba(16, 24, 40, 0.06); --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.16); --backdrop: rgba(49, 49, 49, 0.35); --scrollbar: #d9d9d9; --scrollbar-hover: #bfbfbf; --foot-bg: #fafafa; --on-accent: #ffffff; color-scheme: light; } /* Темна тема. Вугільний фон під колір клієнта Teams, освітлені акценти: базовий синій на темному тлі не дотягує до порогу читаності. */ :root[data-theme='dark'] { --cf-page: #17171a; --cf-surface: #2a2a31; --cf-tint: #1f1f23; --cf-bubble: #26262d; --cf-text: #e6e6e8; --cf-text-light: #a3a3ad; --cf-border: #3b3b42; --cf-border-soft: #333339; --cf-hover: #35353c; --cf-blue: #6ca4ff; --cf-blue-hover: #4d8bf0; --cf-blue-solid: #2563eb; --cf-orange: #ffa53c; --st-new: #6ca4ff; --st-progress: #ffa53c; --st-blocked: #ff6b6b; --st-done: #4caf6d; --st-cancelled: #a3a3ad; --chip-bg: #2e2e34; --chip-border: #3b3b42; --chip-blue-bg: rgba(108, 164, 255, 0.14); --chip-blue-border: rgba(108, 164, 255, 0.3); --chip-red-bg: rgba(255, 107, 107, 0.14); --chip-red-border: rgba(255, 107, 107, 0.32); --chip-orange-bg: rgba(255, 165, 60, 0.14); --chip-orange-border: rgba(255, 165, 60, 0.32); --chip-orange-text: #ffbe6e; --column-bg: #1c1c20; --drop-bg: #1f2a3d; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.6); --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.6); --backdrop: rgba(0, 0, 0, 0.6); --scrollbar: #45454d; --scrollbar-hover: #5a5a63; --foot-bg: #232329; --on-accent: #ffffff; color-scheme: dark; } /* Висока контрастність: третє значення теми Teams. Чисті межі і жовтий акцент замість фірмової палітри. */ :root[data-theme='contrast'] { --cf-page: #000000; --cf-surface: #000000; --cf-tint: #1a1a1a; --cf-bubble: #242424; --cf-text: #ffffff; --cf-text-light: #ffffff; --cf-border: #ffffff; --cf-border-soft: #ffffff; --cf-hover: #1aebff; --cf-blue: #ffff01; --cf-blue-hover: #ffff01; --cf-blue-solid: #ffff01; --cf-orange: #ffff01; --st-new: #ffff01; --st-progress: #ffff01; --st-blocked: #ffff01; --st-done: #1aebff; --st-cancelled: #ffffff; --chip-bg: #000000; --chip-border: #ffffff; --chip-blue-bg: #000000; --chip-blue-border: #ffff01; --chip-red-bg: #000000; --chip-red-border: #ffff01; --chip-orange-bg: #000000; --chip-orange-border: #ffff01; --chip-orange-text: #ffff01; --column-bg: #000000; --drop-bg: #1a1a1a; --shadow-card: none; --shadow-hover: none; --shadow-modal: none; --backdrop: rgba(0, 0, 0, 0.85); --scrollbar: #ffffff; --scrollbar-hover: #ffff01; --foot-bg: #000000; --on-accent: #000000; color-scheme: dark; } * { box-sizing: border-box; } body { margin: 0; padding: 0; line-height: 1.5; color: var(--cf-text); background: var(--cf-page); transition: background 120ms ease, color 120ms ease; } /* Тонкий скролбар */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); } /* --- Базові примітиви ---------------------------------------------------- */ .card { background: var(--cf-surface); border-radius: 8px; padding: 16px; box-shadow: var(--shadow-card); } .card-header { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--cf-text-light); margin-bottom: 12px; } .cf-table { width: 100%; border-collapse: collapse; font-size: 14px; } .cf-table th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--cf-text-light); padding: 6px 8px; border-bottom: 1px solid var(--cf-border-soft); } .cf-table td { padding: 6px 8px; border-bottom: 1px solid var(--cf-border-soft); vertical-align: top; } .cf-table tr:hover td { background: var(--cf-tint); } /* Ширини колонок довідника людей. Без них колонка імені розсовувалась під найдовше в довіднику (в Entra до імені додається посада), а кнопка доступу опинялась за краєм картки. */ .people-table { table-layout: fixed; } .people-table th:nth-child(1), .people-table td:nth-child(1) { width: 26%; } .people-table th:nth-child(2), .people-table td:nth-child(2) { width: 15%; } .people-table th:nth-child(3), .people-table td:nth-child(3) { width: 18%; } .people-table th:nth-child(4), .people-table td:nth-child(4) { width: 18%; } .people-table th:nth-child(5), .people-table td:nth-child(5) { width: 11%; } /* Остання колонка тримає кнопку цілою: перенос усередині неї виглядав як зламана верстка, а вилізти за картку вона більше не може. */ .people-table th:nth-child(6), .people-table td:nth-child(6) { width: 12%; white-space: nowrap; } .people-table .field { width: 100%; max-width: 100%; } /* На вузькому екрані таблиця і так розсипається на картки, тому фіксовані ширини там лише заважають. */ @media (max-width: 720px) { .people-table { table-layout: auto; } .people-table th, .people-table td { width: auto; } } .cf-table th.num, .cf-table td.num { text-align: right; font-variant-numeric: tabular-nums; } /* --- Таблиці на вузьких екранах ------------------------------------------ * * Вкладка відкривається і в мобільному Teams, де пʼять колонок із селектами * не поміщаються ніяк. Замість горизонтальної прокрутки таблиця розсипається * на картки: рядок стає блоком, а заголовок колонки підставляється перед * значенням з атрибута data-label. Розмітка при цьому лишається одна. */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 720px) { .cf-table.stacked { display: block; } .cf-table.stacked thead { display: none; } .cf-table.stacked tbody, .cf-table.stacked tr { display: block; } .cf-table.stacked tr { background: var(--cf-surface); border-radius: 8px; box-shadow: var(--shadow-card); padding: 10px 12px; margin-bottom: 8px; } .cf-table.stacked tr:hover td { background: transparent; } .cf-table.stacked td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; border: none; text-align: left; } .cf-table.stacked td::before { content: attr(data-label); flex-shrink: 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--cf-text-light); } /* Перша клітинка це заголовок картки: підпис їй не потрібен. */ .cf-table.stacked td:first-child { display: block; padding-bottom: 8px; } .cf-table.stacked td:first-child::before { content: none; } .cf-table.stacked td.num { text-align: right; } .cf-table.stacked select, .cf-table.stacked .btn { max-width: 60%; } } .btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 4px; cursor: pointer; transition: background 100ms ease, border-color 100ms ease; white-space: nowrap; } .btn:disabled { opacity: 0.5; cursor: default; } .btn-primary { background: var(--cf-blue-solid); color: var(--on-accent); border: 1px solid var(--cf-blue-solid); } .btn-primary:hover:not(:disabled) { background: var(--cf-blue-hover); border-color: var(--cf-blue-hover); } .btn-secondary { background: var(--cf-surface); color: var(--cf-text); border: 1px solid var(--cf-border); } .btn-secondary:hover:not(:disabled) { border-color: var(--cf-text-light); background: var(--cf-tint); } .btn-danger { background: var(--cf-surface); color: var(--st-blocked); border: 1px solid var(--cf-border); } .btn-danger:hover:not(:disabled) { background: var(--st-blocked); color: var(--on-accent); border-color: var(--st-blocked); } .tab-bar { display: flex; gap: 4px; border-bottom: 1px solid var(--cf-border); /* Вкладки не переносяться і не тиснуться: коли їх більше, ніж влазить у ширину (шість у адміністратора на телефоні), рядок прокручується вбік сам, а не розпихає сторінку за екран і не жене телефон у zoom-out. */ overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; } .tab { flex: 0 0 auto; } .tab { padding: 8px 14px; font-size: 13px; font-weight: 500; color: var(--cf-text-light); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; user-select: none; transition: color 100ms ease; background: none; border-left: none; border-right: none; border-top: none; } .tab:hover { color: var(--cf-text); } .tab.active { color: var(--cf-blue); border-bottom-color: var(--cf-blue); } /* Поля вводу */ .field { font-size: 13px; padding: 6px 10px; border: 1px solid var(--cf-border); border-radius: 4px; background: var(--cf-surface); color: var(--cf-text); outline: none; transition: border-color 100ms ease, box-shadow 100ms ease; font-family: inherit; } .field:focus { border-color: var(--cf-blue); box-shadow: 0 0 0 3px var(--chip-blue-bg); } /* Нативні контроли браузер малює власними стилями, тому колір задається окремо. */ .field option { background: var(--cf-surface); color: var(--cf-text); } input[type='checkbox'], input[type='date'] { accent-color: var(--cf-blue-solid); } .filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } /* Перемикач «мої задачі»: найчастіший зріз має бути в один клік, а не через пошук себе у списку на сотні людей. */ /* Інструкція. Читабельність тут важить більше за щільність: це єдиний екран, який читають підряд, а не проглядають. */ .guide-item { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--cf-border-soft); } .guide-item:first-of-type { border-top: none; } .guide-term { font-size: 13px; font-weight: 600; } .guide-text { font-size: 13px; line-height: 1.55; color: var(--cf-text-light); max-width: 78ch; } .guide-faq { display: flex; flex-direction: column; } .guide-q { border-top: 1px solid var(--cf-border-soft); } .guide-q:first-child { border-top: none; } /* Питання це кнопка на всю ширину: у списку з десяти пунктів цілитись у сам текст незручно, а промах не має нічого не робити. */ .guide-q-head { display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 10px 0; border: none; background: none; color: var(--cf-text); font-size: 13px; font-weight: 500; text-align: left; cursor: pointer; } .guide-q-head:hover { color: var(--cf-blue); } .guide-q-head:focus-visible { outline: 2px solid var(--cf-blue-solid); outline-offset: 2px; border-radius: 4px; } .guide-q-mark { flex: none; width: 12px; color: var(--cf-text-light); font-weight: 600; } .guide-a { padding: 0 0 12px 22px; } /* На вузькому екрані підпис стає рядком над текстом: колонка в 190px там лишає тексту третину ширини. */ @media (max-width: 720px) { .guide-item { grid-template-columns: 1fr; gap: 4px; } } .chip-toggle { font-size: 12px; padding: 6px 12px; border-radius: 4px; border: none; background: var(--cf-tint); color: var(--cf-text); cursor: pointer; white-space: nowrap; } /* Рядок фільтрів з контролів різних типів. Поле вводу, список і кнопка мають різну власну висоту (34, 32 і 30), тому вирівнювання по нижньому краю не збігалось, а ручні відступи на кожному елементі його лише маскували. Спільна висота прибирає причину. */ .filter-controls input.field, .filter-controls select.field, .filter-controls .chip-toggle { height: 34px; } /* Прапорець не має підпису над собою, тому вирівнюється власною висотою. */ .filter-controls .filter-check { height: 34px; } .chip-toggle:hover { background: var(--cf-tint); } .chip-toggle.on { background: var(--cf-blue-solid); color: var(--on-accent); } /* Лічильник призначень на кнопці свого зрізу. */ .chip-count { display: inline-block; min-width: 16px; margin-left: 6px; padding: 0 4px; border-radius: 8px; background: var(--st-blocked); color: #fff; font-size: 10px; line-height: 16px; text-align: center; font-weight: 600; } .chip-toggle.on .chip-count { background: var(--cf-surface); color: var(--cf-text); } .fresh-dot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--cf-blue-solid); vertical-align: middle; } /* Тост з відміною: перетягування і архівування це рухові промахи, і вони мають відкочуватись, а не виправлятись пошуком задачі назад. */ /* Підказка біля заголовка. Обгортка тримає позиціонування, кнопка це сам кружечок, спливаюче вікно лежить поруч. Вікно ловить наведення разом з кнопкою, тому не зникає, коли курсор переходить на його текст. */ .hint-wrap { position: relative; display: inline-flex; flex: none; margin-left: 7px; } .hint { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; border-radius: 50%; border: 1px solid var(--cf-border); background: transparent; color: var(--cf-text-light); font-family: Georgia, 'Times New Roman', serif; font-size: 11px; font-weight: 600; line-height: 1; cursor: help; user-select: none; transition: border-color 100ms ease, color 100ms ease, background 100ms ease; } .hint:hover, .hint:focus-visible { border-color: var(--cf-blue-solid); background: var(--cf-blue-solid); color: var(--on-accent); outline: none; } .hint-bubble { position: absolute; top: calc(100% + 8px); left: -6px; z-index: 40; width: max-content; max-width: 300px; padding: 9px 11px; border-radius: 6px; border: 1px solid var(--cf-border); background: var(--cf-surface); box-shadow: var(--shadow-modal); color: var(--cf-text); font-size: 12px; font-weight: 400; line-height: 1.45; white-space: normal; text-align: left; /* Прихована так, щоб зʼявлятись плавно: display не анімується. */ opacity: 0; visibility: hidden; transform: translateY(-3px); transition: opacity 120ms ease, transform 120ms ease, visibility 120ms; pointer-events: none; } /* Хвостик до кружечка: інакше вікно висить у повітрі. */ .hint-bubble::before { content: ''; position: absolute; top: -5px; left: 8px; width: 8px; height: 8px; background: var(--cf-surface); border-left: 1px solid var(--cf-border); border-top: 1px solid var(--cf-border); transform: rotate(45deg); } .hint-wrap:hover .hint-bubble, .hint:focus .hint-bubble, .hint:focus + .hint-bubble { opacity: 1; visibility: visible; transform: translateY(0); } /* На вузькому екрані вікно притискається до лівого краю, щоб не вилізти. */ @media (max-width: 720px) { .hint-bubble { max-width: 260px; left: auto; right: -6px; } .hint-bubble::before { left: auto; right: 8px; } } /* Рядок над дошкою: назва зрізу і скільки в ньому задач. */ .board-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; } /* Обраний епік над дошкою: назва з міткою і хрестиком, який знімає фільтр. */ .epic-banner { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin-bottom: 3px; font-size: 13px; font-weight: 500; color: var(--cf-text); } .epic-banner-clear { flex: none; border: none; background: none; padding: 0 2px; font-size: 12px; line-height: 1; color: var(--cf-text-light); cursor: pointer; } .epic-banner-clear:hover { color: var(--cf-text); } /* Оргструктура: підрозділ карткою, департаменти рядками всередині. */ .structure-node.off, .structure-child.off { opacity: 0.55; } .structure-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .structure-child { margin-top: 8px; padding: 8px 10px; border-radius: 6px; background: var(--cf-tint); } .structure-settings { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--cf-border); } @media (min-width: 720px) { .structure-settings { grid-template-columns: 1fr 1fr; } .structure-settings > :last-child { grid-column: 1 / -1; } } .structure-add { display: flex; align-items: center; gap: 8px; margin-top: 10px; } /* Кнопка, яка виглядає посиланням: розгортання історії це не дія над задачею, і повноцінна кнопка обіцяла б більше, ніж робить. */ .link-button { margin-top: 6px; padding: 0; border: none; background: none; color: var(--cf-blue); font-size: 12px; cursor: pointer; } .link-button:hover { text-decoration: underline; } /* Опис задачі. Велике відкрите поле без рамки: текст лежить прямо на тлі картки, а не в коробці, тому читається як текст, а не як заповнена форма. Обидва стани мають однакові відступи і мінімальну висоту, щоб перехід у редагування нічого не зсував. */ .details-box { display: block; width: 100%; min-height: 110px; padding: 8px 10px; margin: -8px -10px 0; border: none; border-radius: 6px; background: transparent; color: var(--cf-text); font-family: inherit; font-size: 13px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; } .details-edit { resize: none; overflow: hidden; outline: none; background: var(--cf-tint); } /* Панель форматування. Тьмяна і без рамок: вона обслуговує текст, а не змагається з ним за увагу. */ /* Індикатор завантаження: тонке кільце, у якого світиться лише частина дуги. Слово «Завантажую» щоразу читалось наново, а кільце зчитується периферійним зором і не змагається з текстом. */ .spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--cf-border); border-top-color: var(--cf-blue); border-radius: 50%; animation: spin 700ms linear infinite; } .spinner-box { display: flex; align-items: center; justify-content: center; padding: 28px 0; } @keyframes spin { to { transform: rotate(360deg); } } /* Хто не хоче руху на екрані, бачить статичне кільце. */ @media (prefers-reduced-motion: reduce) { .spinner { animation: none; } } /* Тіло картки і форми: назва зверху, під нею дві колонки. Ритм задається тут, бо без нього назва злипалась з полями. */ .task-body { display: flex; flex-direction: column; gap: 16px; } /* Дві колонки картки: зліва те, що читають і пишуть, справа властивості. На вузькому екрані колонки складаються в одну, і властивості стають першими: на телефоні найчастіше заходять подивитись статус і виконавця, а не читати опис до кінця. */ .task-layout { display: grid; grid-template-columns: minmax(0, 1fr) 264px; gap: 24px; align-items: start; } .task-side { min-width: 0; /* Ритм задається тут, а не в групах полів: між ними стоїть ще блок причини блокування, і без спільного проміжку він злипався з сусідами. */ display: flex; flex-direction: column; gap: 12px; } .side-fields { display: flex; flex-direction: column; gap: 12px; } .task-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; } @media (max-width: 860px) { .task-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; } .task-side { order: -1; } /* На телефоні властивості шикуються по дві в ряд, а коли місця мало, самі стають в одну колонку: точний брейкпоінт тут вгадувати не треба, розкладка підлаштовується під наявну ширину. */ .side-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; } } /* Поле опису. Рамки немає: текст лежить на тлі картки і читається як текст, а не як заповнена форма. */ .details-editor { border-radius: 6px; background: var(--cf-tint); padding: 4px 10px 8px; } .details-editor.off { opacity: 0.6; } .details-content .ProseMirror { outline: none; font-size: 13px; line-height: 1.55; } .details-content .ProseMirror > * + * { margin-top: 6px; } .details-content h2 { font-size: 13.5px; font-weight: 600; margin-top: 12px; } .details-content ul, .details-content ol { padding-left: 20px; } .details-content ul { list-style: disc; } .details-content ol { list-style: decimal; } .details-content li > p { margin: 0; } .details-content code { padding: 1px 5px; border-radius: 3px; background: var(--cf-surface); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; } .details-content strong { font-weight: 650; } .details-content a { color: var(--cf-blue); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; } /* Довге посилання без пробілів інакше задає ширину всій картці. */ .details-content .ProseMirror { overflow-wrap: anywhere; } /* Чекліст. Галочки справжні, тому список не має маркерів списку. */ .details-content ul[data-type='taskList'] { list-style: none; padding-left: 2px; } .details-content ul[data-type='taskList'] li { display: flex; align-items: flex-start; gap: 8px; } .details-content ul[data-type='taskList'] input[type='checkbox'] { margin-top: 3px; width: 15px; height: 15px; accent-color: var(--cf-blue-solid); cursor: pointer; } .details-content ul[data-type='taskList'] li[data-checked='true'] > div { color: var(--cf-text-light); } /* Підказка в порожньому полі. */ .details-content p.is-editor-empty:first-child::before { content: attr(data-placeholder); float: left; height: 0; color: var(--cf-text-light); pointer-events: none; } .details-toolbar { display: flex; gap: 2px; margin-bottom: 4px; } .details-toolbar button { min-width: 26px; height: 24px; padding: 0 6px; border: none; border-radius: 4px; background: transparent; color: var(--cf-text-light); font-size: 12px; line-height: 1; cursor: pointer; } .details-toolbar button:hover { background: var(--cf-surface); color: var(--cf-text); } /* Увімкнена розмітка видно на кнопці: інакше незрозуміло, чому текст жирний. */ .details-toolbar button.on { background: var(--cf-blue-solid); color: var(--on-accent); } .details-heading { margin: 12px 0 4px; font-size: 13.5px; font-weight: 600; } .details-heading:first-child { margin-top: 0; } .details-code { padding: 1px 5px; border-radius: 3px; background: var(--cf-tint); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; } /* Чекліст. Галочка стоїть у тексті опису, тому список живе поруч з рештою деталей, а не окремим блоком з рамкою. */ .details-todo { margin: 6px 0; } .todo-item { display: flex; align-items: flex-start; gap: 8px; padding: 2px 0; cursor: pointer; } .todo-item input { margin-top: 2px; flex: none; width: 15px; height: 15px; accent-color: var(--cf-blue-solid); cursor: pointer; } .todo-item.done > span { color: var(--cf-text-light); } /* Жирний у темній темі губиться, якщо покластись на саму насиченість: світлий текст на темному тлі виглядає жирнішим, ніж є. Тому трохи більша вага плюс чистий колір тексту. */ .details-para b, .details-list b, .todo-item b { font-weight: 650; color: var(--cf-text); } .details-para + .details-para, .details-list + .details-para, .details-para + .details-list { margin-top: 10px; } .details-list { margin: 0; padding-left: 18px; list-style: disc; } .details-list li { margin: 2px 0; white-space: pre-wrap; } /* Стрічка активності: коментарі і події одним потоком. Подія відрізняється від репліки не окремим списком, а вагою: менший аватар, тьмяний текст, без підкладки. Так видно, що сталось між двома репліками, і при цьому розмова лишається головною. */ .feed-day { margin: 14px 0 6px; font-size: 11px; color: var(--cf-text-light); } .feed-item { display: flex; gap: 8px; padding: 3px 0; } /* Порожнє місце замість аватара: продовження вирівнюється по тій самій колонці, що й перший запис людини. */ .feed-gutter { width: 26px; flex: none; } .feed-item.continued { padding: 1px 0; } .feed-author { font-size: 12px; font-weight: 500; margin-bottom: 1px; } /* Час однією колонкою для всіх записів, текст теж з одного краю. Вирівнювання по базовій лінії, а не по верху: у репліки є відступ підкладки, у події немає, і без цього час висів би вище тексту. */ .feed-row { display: flex; align-items: baseline; gap: 8px; } .feed-item.event .feed-author { font-weight: 400; color: var(--cf-text-light); } .feed-time { width: 34px; flex: none; font-size: 11px; color: var(--cf-text-light); font-variant-numeric: tabular-nums; } .feed-comment { flex: 1; min-width: 0; padding: 6px 10px 7px; border-radius: 6px; /* Власний тон, а не той самий, що в опису: інакше репліка і опис читаються як один блок. Шрифт дрібніший за опис з тієї ж причини: розмова це супровід задачі, а не сама задача. */ background: var(--cf-bubble); font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; } /* Той самий боковий відступ, що й у репліки: підкладки в події немає, тому видно лише те, що весь текст стрічки починається з однієї лінії. */ .feed-event { flex: 1; min-width: 0; padding: 0 10px; font-size: 12px; color: var(--cf-text-light); } /* Поле вводу стоїть у тому ж ряду, що й аватар: власна репліка виглядає як продовження розмови, а не як окрема форма. */ .comment-form { display: flex; align-items: center; gap: 8px; margin-top: 12px; } /* Блок причини блокування. Виділений тлом, бо стосується лише одного стану і не має читатись як частина постійних полів картки. */ .blocked-box { background: var(--cf-tint); border-left: 3px solid var(--st-blocked); border-radius: 4px; padding: 8px 10px; } /* Кнопка-хрестик у шапці вікна. Без рамки: вона службова і не має змагатись за увагу з діями всередині вікна. */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none; border: none; border-radius: 4px; background: transparent; color: var(--cf-text-light); cursor: pointer; transition: background 100ms ease, color 100ms ease; } .icon-btn:hover { background: var(--cf-tint); color: var(--cf-text); } /* Посилання в тексті задачі і коментарях. */ .link { color: var(--cf-blue); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; } .link:hover { color: var(--cf-blue-hover); } /* Текст, який редагується кліком. Підказка тільки при наведенні: рамка навколо кожного абзацу перетворила б картку на форму. */ .editable-text { cursor: text; border-radius: 4px; margin: -4px -6px; padding: 4px 6px; transition: background 100ms ease; } .editable-text:hover { background: var(--cf-tint); } /* Версія застосунку. Тьмяна і не перехоплює кліки: потрібна тоді, коли її шукають, і не має відбирати увагу решту часу. */ .version-mark { position: fixed; left: 10px; bottom: 8px; z-index: 20; font-size: 10px; line-height: 1; color: var(--cf-text-light); opacity: 0.6; pointer-events: none; user-select: none; } .toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 6px; background: var(--cf-text); color: var(--cf-page); box-shadow: var(--shadow-modal); font-size: 13px; z-index: 60; animation: fadeIn 140ms ease-out; } .toast button { font-size: 13px; font-weight: 600; color: var(--cf-page); background: none; border: none; border-bottom: 1px solid currentColor; cursor: pointer; padding: 0; } /* Знак «Збережено» в шапці картки: тьмяний, зникає за дві секунди, не змагається з чипами поруч за увагу. */ .save-hint { align-self: center; font-size: 11px; font-weight: 600; color: var(--st-done); animation: fadeIn 140ms ease-out; } .field-label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--cf-text-light); margin-bottom: 4px; } .stat-num { font-size: 26px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; } .stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--cf-text-light); margin-top: 4px; } /* --- Канбан -------------------------------------------------------------- */ .board { display: grid; grid-template-columns: repeat(4, minmax(260px, 1fr)); gap: 12px; align-items: start; } @media (max-width: 1100px) { .board { grid-template-columns: repeat(2, minmax(240px, 1fr)); } } @media (max-width: 640px) { .board { grid-template-columns: 1fr; } /* Складені колонки стають акордеоном, тому заголовок це кнопка: збільшена зона натискання і видимий стан. Стрілка показує, що під ним ховається. */ .column-head.tappable { padding: 10px 8px; margin-bottom: 0; border-radius: 6px; background: var(--cf-tint); cursor: pointer; } .column-head.tappable::after { content: '▾'; margin-left: 8px; font-size: 10px; } .column-head.tappable[aria-expanded='false']::after { content: '▸'; } .column-head.tappable:focus-visible { outline: 2px solid var(--cf-blue-solid); outline-offset: 2px; } } @media (max-width: 720px) { .card { padding: 12px; } .modal-backdrop { padding: 12px; } .modal-head, .modal-body, .modal-foot { padding-left: 14px; padding-right: 14px; } /* Підвал модалки на телефоні складається в стовпчик, інакше кнопки виштовхують текст за межі екрана. */ .modal-foot { flex-wrap: wrap; gap: 8px; } .filter-bar .field, .filter-bar .chip-toggle { flex: 1 1 auto; min-width: 140px; } } .column { background: var(--column-bg); border-radius: 8px; padding: 8px; min-height: 96px; transition: background 120ms ease, box-shadow 120ms ease; } /* Підсвітка колонки, над якою зараз тримають картку. */ .column.drop-target { background: var(--drop-bg); box-shadow: inset 0 0 0 2px var(--cf-blue); } .column-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--cf-text-light); } .column-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: 1px; } .task-card { position: relative; background: var(--cf-surface); border-radius: 6px; padding: 9px 11px 8px; margin-bottom: 6px; cursor: grab; box-shadow: var(--shadow-card); transition: box-shadow 100ms ease, transform 100ms ease; } .task-card:active { cursor: grabbing; } /* Дія на картці зʼявляється при наведенні: постійна кнопка на кожній картці змагалась би за увагу з самим текстом задачі. */ .card-action { position: absolute; top: 6px; right: 6px; opacity: 0; transition: opacity 100ms ease; font-size: 11px; padding: 2px 8px; border-radius: 4px; border: none; background: var(--cf-tint); color: var(--cf-text-light); cursor: pointer; } .task-card:hover .card-action, .task-card:focus-within .card-action, .card-action:focus-visible { opacity: 1; } /* На сенсорних екранах наведення немає, тому кнопка «в архів» була б недоступна: там показуємо її завжди. */ @media (hover: none) { .card-action { opacity: 1; } } /* Висококонтрастна тема гасить тіні, а поверхня карток і колонок збігається з тлом: без рамки вони зникають саме там, де контраст потрібен найбільше. */ :root[data-theme='contrast'] .task-card, :root[data-theme='contrast'] .column { border: 1px solid var(--cf-border); } .card-action:hover { color: var(--cf-text); background: var(--cf-hover); } .task-card:hover { box-shadow: var(--shadow-hover); } .task-card.dragging { opacity: 0.45; } /* Смуга свіжого призначення. Стоїть вище за прострочення навмисно: коли задача і нова, і прострочена, важливіший саме дедлайн. */ .task-card.fresh { box-shadow: inset 2px 0 0 var(--cf-blue-solid), var(--shadow-card); } .task-card.fresh:hover { box-shadow: inset 2px 0 0 var(--cf-blue-solid), var(--shadow-hover); } /* Смуга прострочення всередині картки: рамка з одного боку читалась би як обведення, тут вона несе сенс і тому лишається тільки в цьому випадку. */ .task-card.overdue { box-shadow: inset 3px 0 0 var(--st-blocked), var(--shadow-card); } .task-card.overdue:hover { box-shadow: inset 3px 0 0 var(--st-blocked), var(--shadow-hover); } .task-title { font-size: 13.5px; font-weight: 500; line-height: 1.35; margin-bottom: 7px; color: var(--cf-text); /* Довгий нерозривний рядок у заголовку (вставлений URL чи ID) інакше розпирає картку, а за нею і всю дошку в горизонтальний скрол на будь-якій ширині. Опис так само захищений; заголовок раніше не був. */ min-width: 0; overflow-wrap: anywhere; } .chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 2px 8px; border-radius: 4px; background: var(--chip-bg); color: var(--cf-text-light); white-space: nowrap; } .chip-blue { background: var(--chip-blue-bg); color: var(--cf-blue); } .chip-red { background: var(--chip-red-bg); color: var(--st-blocked); font-weight: 500; } .chip-orange { background: var(--chip-orange-bg); color: var(--chip-orange-text); } /* --- Модалка ------------------------------------------------------------- */ .modal-backdrop { position: fixed; inset: 0; background: var(--backdrop); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; z-index: 50; } .modal { background: var(--cf-surface); border-radius: 10px; box-shadow: var(--shadow-modal); width: 100%; /* Без цього вікно розсовується вмістом: елемент у flex за замовчуванням не може стати вужчим за свій вміст, і на телефоні картка вилазила за екран. */ min-width: 0; max-width: 720px; animation: fadeIn 140ms ease-out; } .modal-head { padding: 16px 20px; border-bottom: 1px solid var(--cf-border-soft); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .modal-body { padding: 16px 20px; } .modal-foot { padding: 12px 20px; border-top: 1px solid var(--cf-border-soft); background: var(--foot-bg); border-radius: 0 0 10px 10px; display: flex; justify-content: flex-end; gap: 8px; } @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fadeIn 150ms ease-out; } /* --- Кнопка з другою дією під стрілкою ------------------------------------- * * Задачу заводять щодня, епік раз на кілька тижнів. Тому основна дія лишається * в один клік, а друга ховається: голий «плюс» на її місці не сказав би новій * людині, що саме додасться. */ .split-button { position: relative; display: inline-flex; } .split-button .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .split-more { padding: 6px 8px; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 1px solid rgba(255, 255, 255, 0.35); } .split-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; min-width: 150px; padding: 4px; background: var(--cf-surface); border: 1px solid var(--cf-border); border-radius: 6px; box-shadow: var(--shadow-card); } .split-menu button { display: block; width: 100%; padding: 7px 10px; border: none; background: none; color: var(--cf-text); font-size: 13px; text-align: left; border-radius: 4px; cursor: pointer; } .split-menu button:hover { background: var(--cf-tint); } /* --- Прогрес --------------------------------------------------------------- * * Смуга одна на цілі, ключові результати і епіки: це одна й та сама величина, * і різні її зображення змушували б щоразу згадувати, що тут означає повнота. */ .progress { position: relative; flex: none; width: 120px; height: 8px; border-radius: 4px; background: var(--cf-tint); border: 1px solid var(--cf-border-soft); overflow: hidden; } /* «Де мали б бути сьогодні»: без цієї позначки відсоток нічого не каже, бо 40% у середині кварталу і 40% в останній тиждень це різні розмови. */ .progress-marker { position: absolute; top: -1px; bottom: -1px; width: 2px; margin-left: -1px; background: var(--cf-text-light); opacity: 0.55; } /* Міряти ще нічим: порожня смуга читалась би як «нічого не зроблено». */ .progress.empty { background: repeating-linear-gradient( 90deg, var(--cf-border-soft) 0 4px, transparent 4px 8px ); } .progress-fill { height: 100%; border-radius: 4px; background: var(--cf-blue-solid); transition: width 200ms ease; } .progress-fill.warn { background: var(--cf-orange); } .progress-fill.done { background: var(--st-done); } .progress-fill.behind { background: var(--st-blocked); } /* --- Цілі ------------------------------------------------------------------ * * Ієрархія тримається на підписах і сітці, а не на самих відступах: рядок під * ціллю має читатись як ключовий результат, а не як ще одна ціль. */ .goals-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* Фільтр цілей і зведення по темпу одним рядком. Ліва половина звужує екран, права каже, чи взагалі є сенс його розгортати. */ .goals-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .goals-filter .field { width: auto; min-width: 150px; } /* Зведення притискається праворуч, поки є місце, і опускається під фільтр на вузькому екрані замість того, щоб виштовхувати його за край. */ .goals-filter-tail { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; } .okr-tally { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* Усередині зведення мітка темпу це підпис у рядку, а не колонка таблиці: мінімальна ширина і вирівнювання праворуч тут тільки рвали б проміжки. */ .okr-tally .pace { min-width: 0; text-align: left; } .pace-pick { border: none; background: none; padding: 2px 6px; border-radius: 4px; cursor: pointer; font: inherit; } .pace-pick:hover { background: var(--cf-tint); } .pace-pick.on { background: var(--cf-tint); box-shadow: inset 0 0 0 1px var(--cf-border); } /* Ланцюг сутностей одним рядком: перший погляд на екран має пояснювати, що чому підпорядковано. */ .okr-legend-chain { font-size: 11px; color: var(--cf-text-light); } .okr-legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 0 2px; } /* Хлібна крихта над назвою результату: підпис «Ціль:» називає те, що йде за ним, тому сплутати батьківську ціль із самим результатом уже не можна. */ /* Небезпечна дія лишається помітною кольором, але не важить як кнопка. */ .link-danger { border: none; background: none; padding: 0; font-size: 12px; color: var(--st-blocked); cursor: pointer; } .link-danger:hover { text-decoration: underline; } .link-danger:disabled { opacity: 0.5; cursor: default; } .kr-parent { font-size: 11px; color: var(--cf-text-light); margin-bottom: 4px; } .kr-parent-name { color: var(--cf-text); } /* Шапка цілі: спершу чия вона і хто веде, потім сама назва. */ /* Шапка цілі одним рядком: чия ціль, яка ціль, як ідуть справи. */ .objective-line { display: flex; align-items: center; gap: 10px; cursor: pointer; border-radius: 6px; margin: -4px -6px; padding: 4px 6px; } .objective-line:hover { background: var(--cf-tint); } .objective-line:focus-visible { outline: 2px solid var(--cf-blue-solid); outline-offset: 2px; } .okr-fold { display: inline-flex; padding: 2px; border: none; background: none; color: var(--cf-text-light); cursor: pointer; } .okr-fold.folded svg { transform: rotate(-90deg); } /* Власник це підпис, а не друга назва: дрібний кегль і приглушений колір. Крапка-приліпка перед ним пішла разом з рештою крапок-заповнювачів. */ .objective-owner { font-size: 11px; color: var(--cf-text-light); white-space: nowrap; } .objective-title { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; } /* Коли міряти нічим, права частина каже розмір прогалини замість порожньої смуги і порожнього відсотка. Ширина та сама, щоб рядки лишались в рельсі. */ .objective-note { font-size: 11px; color: var(--cf-text-light); white-space: nowrap; } /* Правка ховається до наведення, як «в архів» на картці задачі. */ /* Єдиний вхід у картку цілі, тому видима завжди. Тихий сірий чип замість колишнього яскравого синього посилання: помітна, але не сперечається з цифрами праворуч. */ .objective-action { flex: none; font-size: 11px; padding: 2px 8px; border-radius: 4px; border: none; background: var(--cf-tint); color: var(--cf-text-light); cursor: pointer; } .objective-action:hover { background: var(--cf-hover); color: var(--cf-text); } /* Поки назву не правлять, вона лишається текстом: десятки полів вводу підряд читались би як недозаповнена форма, хоча це перелік того, що компанія робить. */ span.objective-title, span.kr-title { display: block; padding: 3px 0; } .objective-score { display: flex; align-items: center; gap: 10px; flex: none; /* Рядок результату має хвостову колонку під кнопку правки (28px + відступ). Цілі її не мають, тому зсуваємо їх смугу і відсоток на ту саму ширину, щоб обидва рівні стали в один правий рельс. */ padding-right: 40px; } .objective-bar { width: 120px; } .objective-bar .progress { width: 100%; } /* Той самий кегль, що у відсотка результату (13px), лише напівжирний, бо це підсумок по них. Раніше 20px виривали його з розмірного ряду екрана. */ .objective-percent { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; } /* Темп стоїть зліва від смуги фіксованою шириною, щоб смуги і відсотки цілей вишикувались в один правий рельс незалежно від довжини підпису. */ .pace { font-size: 11px; color: var(--cf-text-light); white-space: nowrap; min-width: 72px; text-align: right; } .pace.behind { color: var(--st-blocked); } .pace.done { color: var(--st-done); } /* Блок результатів відбитий рамкою і підписом: без цього рядки під ціллю виглядають як такі самі цілі. */ .kr-section { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--cf-border-soft); } .kr-section-head { display: flex; align-items: center; margin-bottom: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--cf-text-light); } /* Пояснення поруч із заголовком лишається звичайним текстом: у верхньому регістрі воно читається як другий заголовок, а не як примітка. */ .kr-section-head span { font-weight: 400; text-transform: none; letter-spacing: 0; } .kr { padding: 6px 0; } .kr + .kr { border-top: 1px solid var(--cf-border-soft); } /* Сітка, а не перенесення рядків: при перенесенні відсоток і хрестик опинялись під назвою і читались як частина сусіднього рядка. */ .kr-row { display: grid; grid-template-columns: minmax(0, 1fr) 170px 120px 44px 28px; align-items: center; gap: 12px; } .kr-main { display: flex; align-items: flex-start; gap: 8px; min-width: 0; } /* Номер результату: показує, що їх кілька і що вони рівноправні. */ .kr-index { flex: none; width: 18px; height: 18px; margin-top: 4px; border-radius: 50%; background: var(--cf-tint); border: 1px solid var(--cf-border-soft); font-size: 10px; line-height: 16px; text-align: center; color: var(--cf-text-light); } .kr-title { font-size: 13px; } /* Один розмірний ряд на весь екран: 15 заголовок цілі, 13 рядки результатів і епіків, 11 примітки і підписи. Різнобій розмірів читався як різні за вагою речі там, де вони рівні. */ .kr-epics, .epic-line, .epic-line-title { font-size: 13px; } .kr-note { font-size: 11px; color: var(--cf-text-light); } .kr-value { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 4px; font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; } .kr-value b { font-weight: 600; } .kr-input { width: 84px; text-align: right; } .kr-percent { font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; color: var(--cf-text-light); } /* Клавіатурний фокус має бути видно там, де рядок відкривається з клавіатури. Загальне правило глушить outline у полів, тому тут він повертається явно. */ .kr-row:focus-visible, .epic-line:focus-visible, .okr-fold:focus-visible { outline: 2px solid var(--cf-blue-solid); outline-offset: 2px; border-radius: 4px; } .kr-remove { text-align: right; } /* Епіки під своїм результатом, з відбивкою ліворуч: саме тут видно, як робота знизу звʼязана з ціллю зверху. */ .kr-epics { margin: 2px 0 4px 26px; padding-left: 10px; border-left: 1px solid var(--cf-border-soft); } .epic-line { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 6px; border: none; border-radius: 4px; background: none; color: var(--cf-text); font-size: 12px; text-align: left; cursor: pointer; } .epic-line:hover { background: var(--cf-tint); } .epic-line-mark { flex: none; padding: 1px 6px; border-radius: 8px; background: var(--chip-orange-bg); border: 1px solid var(--chip-orange-border); color: var(--chip-orange-text); font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px; } .epic-line-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .epic-line-meta { flex: none; font-size: 11px; color: var(--cf-text-light); } .kr-note { font-size: 11px; color: var(--cf-text-light); } .kr-add { margin-top: 10px; padding: 12px; border: 1px solid var(--cf-border-soft); border-radius: 6px; background: var(--cf-tint); } .kr-add-grid { display: grid; grid-template-columns: minmax(220px, 2fr) 150px 90px 90px 130px; gap: 10px; margin-bottom: 10px; } .link-button.danger { color: var(--st-blocked); } @media (max-width: 900px) { .kr-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; } .kr-main { grid-column: 1 / -1; } .kr-add-grid { grid-template-columns: 1fr 1fr; } } /* --- Епіки ----------------------------------------------------------------- */ .epic-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border: 1px solid var(--cf-border); border-radius: 12px; background: var(--cf-surface); color: var(--cf-text); font-size: 11px; cursor: pointer; } .epic-chip:hover { background: var(--cf-tint); } .epic-score { display: flex; align-items: center; gap: 10px; } .epic-task { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: none; border-bottom: 1px solid var(--cf-border-soft); background: none; color: var(--cf-text); font-size: 13px; text-align: left; cursor: pointer; } .epic-task:hover { background: var(--cf-tint); } .epic-task-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; } .epic-task-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .epic-task-meta { flex: none; font-size: 11px; color: var(--cf-text-light); } /* На телефоні виконавець з дедлайном не поміщаються поруч з назвою. */ @media (max-width: 640px) { .epic-task { flex-wrap: wrap; } .epic-task-title { white-space: normal; } .progress { width: 84px; } } /* Назва епіка на картці дошки: контекст, а не властивість, тому тьмяним рядком під назвою, а не ще однією позначкою в спільному ряду. Клік по ній лишає на дошці тільки цей епік: це найчастіше питання, яке виникає, коли назву взагалі помітили. */ .task-epic { display: flex; align-items: center; gap: 5px; max-width: 100%; padding: 0; border: none; background: none; font-size: 11px; color: var(--cf-text-light); cursor: pointer; text-align: left; } .task-epic:hover { color: var(--cf-text); } .task-epic-mark { flex: none; width: 6px; height: 6px; border-radius: 1px; background: var(--cf-orange); } .task-epic span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --- Пошук ---------------------------------------------------------------- * * Окреме вікно, а не поле в рядку фільтрів: пошук шукає по всьому трекеру, * включно з архівом, епіками, цілями і людьми, а фільтри лишились про зріз * дошки. */ .search-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--cf-border-soft); } .search-input { flex: 1; min-width: 0; border: none; background: none; color: var(--cf-text); font-size: 16px; outline: none; } .search-results { max-height: 60vh; overflow-y: auto; padding: 6px 0; } .search-group { padding: 8px 16px 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--cf-text-light); } .search-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 16px; border: none; background: none; color: var(--cf-text); font-size: 13px; text-align: left; cursor: pointer; } /* Підсвітка одна на мишу і на клавіатуру: два різні виділення на одному екрані читаються як два різні вибори. */ .search-row.on { background: var(--cf-tint); } .search-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .search-meta { flex: none; display: flex; align-items: center; gap: 6px; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--cf-text-light); } .search-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cf-text-light); } .search-dot.epic { border-radius: 2px; background: var(--cf-blue); } .search-dot.goal { border-radius: 2px; background: var(--st-progress); } .search-dot.board { background: transparent; border: 1px solid var(--cf-border); } .search-hint { padding: 14px 16px; font-size: 12px; color: var(--cf-text-light); } .search-foot { display: flex; gap: 14px; padding: 8px 16px; border-top: 1px solid var(--cf-border-soft); background: var(--foot-bg); font-size: 11px; color: var(--cf-text-light); } /* Масштаб цілей: місяць або квартал. Два стани одного перемикача, а не дві окремі кнопки, бо вибір тут завжди один з двох. */ .scale-switch { display: inline-flex; border: 1px solid var(--cf-border); border-radius: 4px; overflow: hidden; } .scale-switch button { padding: 4px 10px; border: none; background: var(--cf-surface); color: var(--cf-text-light); font-size: 12px; cursor: pointer; } .scale-switch button.on { background: var(--cf-tint); color: var(--cf-text); font-weight: 500; } @media (max-width: 640px) { .search-meta { display: none; } } /* Рядок результату відкривається як картка, тому поводиться як клікабельний рядок, а не як текст. */ .kr-row { cursor: pointer; border-radius: 6px; padding: 4px 6px; margin: 0 -6px; } .kr-row:hover { background: var(--cf-tint); } .objective-title.clickable { cursor: pointer; } .objective-title.clickable:hover { text-decoration: underline; text-decoration-color: var(--cf-border); text-underline-offset: 3px; } /* Привʼязані епіки всередині картки результату стоять рядками без кнопки: там сам рядок не клікається цілком, клікається назва. */ .epic-line .epic-line-title { border: none; background: none; color: var(--cf-text); font-size: 12px; cursor: pointer; padding: 0; } .epic-line .epic-line-title:hover { text-decoration: underline; }