/* Cloudflare-admin примітиви у трьох темах. * * Кольори задані змінними в одному місці, а тему обирає атрибут data-theme на * : усередині Teams його виставляє контекст клієнта, поза Teams * системні налаштування. Самі правила кольорів не містять. * * Світла палітра збігається з дашбордом керівництва: це два вікна в один * продукт. */ :root { --cf-page: #f7f8fa; --cf-surface: #ffffff; --cf-tint: #f5f5f5; --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-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-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); } .cf-table th.num, .cf-table td.num { text-align: right; font-variant-numeric: tabular-nums; } .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); } .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; } /* Перемикач «мої задачі»: найчастіший зріз має бути в один клік, а не через пошук себе у списку на сотні людей. */ .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; } .chip-toggle:hover { background: var(--cf-tint); } .chip-toggle.on { background: var(--cf-blue-solid); color: var(--on-accent); } /* Тост з відміною: перетягування і архівування це рухові промахи, і вони мають відкочуватись, а не виправлятись пошуком задачі назад. */ .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; } .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 { 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 { opacity: 1; } .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.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); } .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%; 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; } /* Смуга подій у картці */ .event-row { display: flex; gap: 8px; font-size: 12px; color: var(--cf-text-light); padding: 3px 0; } .event-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cf-border); margin-top: 6px; flex-shrink: 0; }