/* ── Бренд-шрифт Vinnytsia Sans ──────────────────────────────────────────── Файли лежать у сховищі шрифтів (IFontStore) — там само, звідки їх бере StoryImageRenderer для сторіз і TicketImageRenderer для квитків. Віддає їх анонімний маршрут /ui-font/{file} (див. Program.cs): звичайний /downloads/font/ закритий роллю admin/designer, а шрифт потрібен ще й на сторінці входу та ролям finance/smm. У сховищі є лише Regular і Bold: 400–500 беруть Regular, 600–900 — Bold, тож напівжирний — це справжній начерк, а не синтетика браузера. Якщо колись покладете .woff2 у wwwroot/ui/fonts/ — додайте його ПЕРШИМ у src: він у 3–5 разів менший за .ttf. Поки шрифту немає — усе працює на Inter, нічого не ламається. */ @font-face { font-family: 'Vinnytsia Sans'; src: url('/ui-font/VinnytsiaSans-Regular.ttf') format('truetype'); font-weight: 400 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Vinnytsia Sans'; src: url('/ui-font/VinnytsiaSans-Bold.ttf') format('truetype'); font-weight: 600 900; font-style: normal; font-display: swap; } /* ══════════════════════════════════════════════════════════════════════════ UI-БАЗА «ОПОРА» · варіант A-Mono Трирівнева архітектура. Компоненти звертаються ТІЛЬКИ до ролей (рівень 2) і примітивів (рівень 3) — ніколи до сирого кольору. Деталі й обґрунтування: docs/ui-design-system.md, docs/ui-kit-preview.html ══════════════════════════════════════════════════════════════════════════ */ /* ── Рівень 1 · бренд-палітра ────────────────────────────────────────────── Дослівно Fundraising.Core/Services/TeamChipPalette.cs. Відповідає за СЕНС (чипи команд і зборів), не за тон інтерфейсу. --team-N-fg повторює TeamChipPalette.TextColorFor(). Не залежить від теми — колір команди мусить бути тим самим і в світлій, і в темній. */ :root { --team-1: #d24f33; --team-1-fg: #fff; /* теракота */ --team-2: #0a3247; --team-2-fg: #fff; /* темно-синій (навігація) */ --team-3: #5c99a1; --team-3-fg: #0a3247; /* приглушена бірюза */ --team-4: #86795a; --team-4-fg: #fff; /* таупе */ --team-5: #fca182; --team-5-fg: #0a3247; /* персик */ --team-6: #a4c1bf; --team-6-fg: #0a3247; /* світла шавлія */ --team-7: #5592f5; --team-7-fg: #0a3247; /* чорниця */ --team-8: #8d84f2; --team-8-fg: #0a3247; /* середній фіолет */ --team-9: #343c94; --team-9-fg: #fff; /* синій пігмент */ --team-10: #7b9866; --team-10-fg: #0a3247; /* мох */ --team-11: #b7a694; --team-11-fg: #0a3247; /* хакі */ --team-12: #241c34; --team-12-fg: #fff; /* темний фіолет */ } /* ── Рівень 3 · примітиви (спільні для тем) ─────────────────────────────── */ :root { /* Сітка 4px */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; /* Типографічна шкала: 8 кроків */ --fs-caption:11px; --fs-xs:12px; --fs-sm:13px; --fs-base:14px; --fs-title:16px; --fs-h2:20px; --fs-h1:26px; --fs-display:34px; --fs-hero:44px; --fw-normal:400; --fw-medium:500; --fw-semi:600; --fw-bold:700; --fw-black:800; --tr-tight:-.02em; --tr-caps:.05em; --lh-tight:1.15; --lh-snug:1.35; --lh-normal:1.55; /* Радіуси: 4 кроки */ --r-sm:8px; --r-md:10px; --r-lg:14px; --r-full:999px; --dur-fast:120ms; --dur:180ms; --dur-slow:280ms; --ease:cubic-bezier(.2,.8,.2,1); /* Шрифт один — Vinnytsia Sans, як у генерації сторіз і квитків. Там StoryImageRenderer малює заголовки, суми й відсотки накресленням Bold, а підписи — Regular, і ніякого другого шрифту немає. Інтерфейс робить так само, тож картка в Telegram і адмінка звучать однаково. Окремі імена лишені як шов: якщо колись знадобиться дисплейний шрифт для заголовків, його достатньо підставити в --font-head. */ --font-ui:'Vinnytsia Sans','Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --font-head:'Vinnytsia Sans','Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --font-num:'Vinnytsia Sans','Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --font-micro:'Vinnytsia Sans','Inter',system-ui,-apple-system,'Segoe UI',sans-serif; } /* ══ Рівень 2 · РОЛІ ═══════════════════════════════════════════════════════ База чорна: нейтралі без підтону (R=G=B), від #FFFFFF до #000000. Дія у світлій темі — #141414, рівно те, що в шапці; у темній інвертується. ВАЖЛИВО: жодне ім'я, яке використовується в property-деклараціях, НЕ оголошується через var() на інше токен-ім'я. Перевірено вимірюванням: при такій подвійній індирекції (--grey3: var(--fg-muted)) зміна data-theme оновлює саму змінну, але залежний `color: var(--grey3)` лишається зі старим значенням — елемент візуально «не перемикається». Тому світла й темна тема дублюють значення літералами; синхронність тримає scratchpad-скрипт impl_6_noindirect.py, а не CSS-магія. ══════════════════════════════════════════════════════════════════════════ */ :root, html[data-theme="light"] { color-scheme: light; /* Поверхні й текст */ --bg-canvas:#F5F5F5; --bg-surface:#FFFFFF; --bg-raised:#FFFFFF; --bg-sunken:#EDEDED; --fg-strong:#0A0A0A; --fg-default:#171717; --fg-muted:#5C5C5C; --fg-subtle:#8A8A8A; --br-subtle:#EBEBEB; --br-default:#E0E0E0; --br-strong:#CFCFCF; --br-control:#949494; /* Дія */ --ac:#141414; --ac-hover:#000000; --ac-fg:#FFFFFF; --ac-bg:#EDEDED; --ac-ring:#141414; /* Статуси — з бренд-палітри, доведені до AA */ --pos:#4C6B39; --pos-bg:#EDF2E7; --warn:#7A6120; --warn-bg:#F7F2E4; --neg:#A93A20; --neg-bg:#FBEDE9; --info:#356A73; --info-bg:#E9F2F3; /* Шапка й плитка головної метрики: власні ролі, бо не інвертуються */ --bar-bg:#141414; --bar-fg:#FAFAFA; --hero-bg:#141414; --hero-fg:#C7C7C7; --hero-num:#FFFFFF; --overlay:rgba(0,0,0,.45); --tip-bg:#1F1F1F; --tip-fg:#F5F5F5; --sh-1:0 1px 2px rgba(0,0,0,.06); --sh-2:0 4px 12px rgba(0,0,0,.09), 0 1px 2px rgba(0,0,0,.05); --sh-3:0 16px 40px rgba(0,0,0,.18); /* Легасі-імена зі старої палітри — літералами, БЕЗ var()-індирекції (див. коментар до цього шару). Нового коду на них не пишемо. */ --navy:#0A0A0A; --navy2:#171717; --grey0:#EDEDED; --grey1:#E0E0E0; --grey3:#5C5C5C; --bg:#F5F5F5; --surface:#FFFFFF; --invert:#141414; --on-invert:#FAFAFA; --amber:#141414; --green:#4C6B39; --red:#A93A20; /* Палітра MudBlazor — теж літералами. MudThemeProvider пише свої змінні в :root (специфічність 0,1,0), ці селектори — (0,1,1), тож перекривають без !important. Обидві теми, не лише темна. */ --mud-palette-background:#F5F5F5; --mud-palette-background-gray:#EDEDED; --mud-palette-surface:#FFFFFF; --mud-palette-drawer-background:#FFFFFF; --mud-palette-drawer-text:#171717; --mud-palette-drawer-icon:#5C5C5C; --mud-palette-appbar-background:#141414; --mud-palette-appbar-text:#FAFAFA; --mud-palette-text-primary:#171717; --mud-palette-text-secondary:#5C5C5C; --mud-palette-text-disabled:#8A8A8A; --mud-palette-action-default:#5C5C5C; --mud-palette-action-disabled:#8A8A8A; --mud-palette-action-disabled-background:#EDEDED; --mud-palette-lines-default:#E0E0E0; --mud-palette-lines-inputs:#949494; --mud-palette-table-lines:#EBEBEB; --mud-palette-table-striped:#EDEDED; --mud-palette-table-hover:#EDEDED; --mud-palette-divider:#E0E0E0; --mud-palette-divider-light:#EBEBEB; /* Для кожного семантичного кольору MudBlazor читає чотири змінні: -text (підпис), -darken (фон на hover/active у filled-кнопок), -lighten і -hover (напівпрозорий шар для text/outlined-кнопок). Задаємо всі: інакше MudThemeProvider рахує їх сам і в темній темі «темніший» відтінок світлого primary виходить темним. */ --mud-palette-primary:#141414; --mud-palette-primary-text:#FFFFFF; --mud-palette-primary-darken:#000000; --mud-palette-primary-lighten:#3A3A3A; --mud-palette-primary-hover:rgba(20,20,20,.08); --mud-palette-secondary:#171717; --mud-palette-secondary-text:#FFFFFF; --mud-palette-secondary-darken:#000000; --mud-palette-secondary-lighten:#3A3A3A; --mud-palette-secondary-hover:rgba(23,23,23,.08); --mud-palette-error:#A93A20; --mud-palette-error-text:#FFFFFF; --mud-palette-error-darken:#8A2F1A; --mud-palette-error-lighten:#C4462A; --mud-palette-error-hover:rgba(169,58,32,.08); --mud-palette-success:#4C6B39; --mud-palette-success-text:#FFFFFF; --mud-palette-success-darken:#3C552D; --mud-palette-success-lighten:#5E8247; --mud-palette-success-hover:rgba(76,107,57,.08); --mud-palette-warning:#7A6120; --mud-palette-warning-text:#FFFFFF; --mud-palette-warning-darken:#614D19; --mud-palette-warning-lighten:#967728; --mud-palette-warning-hover:rgba(122,97,32,.08); --mud-palette-info:#356A73; --mud-palette-info-text:#FFFFFF; --mud-palette-info-darken:#29545B; --mud-palette-info-lighten:#40808B; --mud-palette-info-hover:rgba(53,106,115,.08); --mud-palette-dark:#0A0A0A; --mud-palette-dark-text:#FFFFFF; --mud-palette-dark-darken:#000000; --mud-palette-dark-lighten:#2A2A2A; --mud-palette-dark-hover:rgba(10,10,10,.08); } html[data-theme="dark"] { color-scheme: dark; /* Поверхні й текст */ --bg-canvas:#000000; --bg-surface:#121212; --bg-raised:#1C1C1C; --bg-sunken:#1E1E1E; --fg-strong:#FFFFFF; --fg-default:#E5E5E5; --fg-muted:#A8A8A8; --fg-subtle:#818181; --br-subtle:#1F1F1F; --br-default:#2A2A2A; --br-strong:#3D3D3D; --br-control:#6E6E6E; /* Дія */ --ac:#FAFAFA; --ac-hover:#FFFFFF; --ac-fg:#0A0A0A; --ac-bg:#1F1F1F; --ac-ring:#FAFAFA; /* Статуси — з бренд-палітри, доведені до AA */ --pos:#9FC084; --pos-bg:#182013; --warn:#D6B478; --warn-bg:#221C0E; --neg:#FCA182; --neg-bg:#241512; --info:#8FB6C4; --info-bg:#131E22; /* Шапка й плитка головної метрики: власні ролі, бо не інвертуються */ --bar-bg:#000000; --bar-fg:#FAFAFA; --hero-bg:#1A1A1A; --hero-fg:#C7C7C7; --hero-num:#FFFFFF; --overlay:rgba(0,0,0,.7); --tip-bg:#2A2A2A; --tip-fg:#F5F5F5; --sh-1:0 1px 2px rgba(0,0,0,.6); --sh-2:0 4px 14px rgba(0,0,0,.7); --sh-3:0 18px 44px rgba(0,0,0,.85); /* Легасі-імена зі старої палітри — літералами, БЕЗ var()-індирекції (див. коментар до цього шару). Нового коду на них не пишемо. */ --navy:#FFFFFF; --navy2:#E5E5E5; --grey0:#1E1E1E; --grey1:#2A2A2A; --grey3:#A8A8A8; --bg:#000000; --surface:#121212; --invert:#000000; --on-invert:#FAFAFA; --amber:#FAFAFA; --green:#9FC084; --red:#FCA182; /* Палітра MudBlazor — теж літералами. MudThemeProvider пише свої змінні в :root (специфічність 0,1,0), ці селектори — (0,1,1), тож перекривають без !important. Обидві теми, не лише темна. */ --mud-palette-background:#000000; --mud-palette-background-gray:#1E1E1E; --mud-palette-surface:#121212; --mud-palette-drawer-background:#121212; --mud-palette-drawer-text:#E5E5E5; --mud-palette-drawer-icon:#A8A8A8; --mud-palette-appbar-background:#000000; --mud-palette-appbar-text:#FAFAFA; --mud-palette-text-primary:#E5E5E5; --mud-palette-text-secondary:#A8A8A8; --mud-palette-text-disabled:#818181; --mud-palette-action-default:#A8A8A8; --mud-palette-action-disabled:#818181; --mud-palette-action-disabled-background:#1E1E1E; --mud-palette-lines-default:#2A2A2A; --mud-palette-lines-inputs:#6E6E6E; --mud-palette-table-lines:#1F1F1F; --mud-palette-table-striped:#1E1E1E; --mud-palette-table-hover:#1E1E1E; --mud-palette-divider:#2A2A2A; --mud-palette-divider-light:#1F1F1F; /* Кнопки в темній темі НЕ білі: суцільно-біла заливка на чорному полотні світиться сильніше за будь-який вміст сторінки. Беремо підняту поверхню з межею — так primary-кнопка лишається помітною, але в одному ряду з рештою кнопок. Наш власний --ac (#FAFAFA) це не зачіпає: він і далі фарбує прогрес-бари, фокус-ринг і активну вкладку. */ --mud-palette-primary:#2E2E2E; --mud-palette-primary-text:#FFFFFF; --mud-palette-primary-darken:#3D3D3D; --mud-palette-primary-lighten:#3D3D3D; --mud-palette-primary-hover:rgba(255,255,255,.10); --mud-palette-secondary:#E5E5E5; --mud-palette-secondary-text:#0A0A0A; --mud-palette-secondary-darken:#FFFFFF; --mud-palette-secondary-lighten:#FFFFFF; --mud-palette-secondary-hover:rgba(229,229,229,.12); --mud-palette-error:#FCA182; --mud-palette-error-text:#241512; --mud-palette-error-darken:#FDB79E; --mud-palette-error-lighten:#FDB79E; --mud-palette-error-hover:rgba(252,161,130,.14); --mud-palette-success:#9FC084; --mud-palette-success-text:#182013; --mud-palette-success-darken:#B3D09B; --mud-palette-success-lighten:#B3D09B; --mud-palette-success-hover:rgba(159,192,132,.14); --mud-palette-warning:#D6B478; --mud-palette-warning-text:#221C0E; --mud-palette-warning-darken:#E2C692; --mud-palette-warning-lighten:#E2C692; --mud-palette-warning-hover:rgba(214,180,120,.14); --mud-palette-info:#8FB6C4; --mud-palette-info-text:#131E22; --mud-palette-info-darken:#A6C7D3; --mud-palette-info-lighten:#A6C7D3; --mud-palette-info-hover:rgba(143,182,196,.14); --mud-palette-dark:#FFFFFF; --mud-palette-dark-text:#0A0A0A; --mud-palette-dark-darken:#FFFFFF; --mud-palette-dark-lighten:#FFFFFF; --mud-palette-dark-hover:rgba(255,255,255,.12); } /* ── Поверхні, темні в обох темах ────────────────────────────────────────── Шапка, плитка головної метрики, картка входу, підкладка під фото. Білі напівпрозорі шари тут коректні незалежно від теми, тому ці токени спільні і НЕ перевизначаються в темній: інакше вони інвертувались би на поверхні, яка не інвертується. */ :root { --ondark-fg:#FAFAFA; --ondark-dim:rgba(255,255,255,.55); --ondark-tile:rgba(255,255,255,.07); --ondark-line:rgba(255,255,255,.14); --ondark-btn-bg:#FAFAFA; --ondark-btn-fg:#141414; /* Підкладка під зображення та бейджі поверх фото. Фото не залежить від теми, тож і ці кольори — ні. Світліші відтінки статусів, щоб читалися на темному скримі. */ --photo-bg:#0D0D0D; --onphoto-scrim:rgba(0,0,0,.72); --onphoto-fg:#FFFFFF; --onphoto-pos:#8FD6A8; --onphoto-warn:#E8C065; --onphoto-neg:#F7AEA6; --onphoto-info:#8FBAF0; --onphoto-muted:rgba(255,255,255,.72); } html, body { font-family: var(--font-ui); } body { background: var(--bg-canvas); color: var(--fg-default); } /* ── Заголовки й числа ───────────────────────────────────────────────────── Накреслення Bold того самого Vinnytsia Sans — рівно як у StoryImageRenderer, де заголовки, суми й відсотки йдуть через Font(f, bold: true, …). Трекінг НЕ стискаємо: у рендері його немає, і на Vinnytsia мінусовий трекінг з'їдає просвіти в кириличних «ш», «щ», «ю». */ h1, h2, h3, h4, h5, h6, .section-title, .detail-title, .cform-stitle, .ig-card-title, .ig-empty-title, .team-rank-title, .cvp-overall-t, .ig-help > summary, .mud-typography-h1, .mud-typography-h2, .mud-typography-h3, .mud-typography-h4, .mud-typography-h5, .mud-typography-h6 { font-family: var(--font-head); font-weight: var(--fw-bold); } /* Жирний текст у прозі — те саме накреслення Bold. */ strong, b { font-weight: var(--fw-bold); } /* Моноширинні вставки всередині жирного/заголовка лишаються моно. */ strong code, b code, h1 code, h2 code, h3 code, h4 code { font-family: ui-monospace, monospace; } /* Числа — Bold, як суми на сторіз. Табличні цифри, щоб колонки вирівнювались. */ .period-big, .period-stat .v, .ig-kpi-val, .cvp-tile-v, .cvp-team-p, .cvp-overall-p, .ds-value, .cs-value, .collected-val, .p-amount, .leader-sum { font-family: var(--font-num); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; } /* Таблиці: цифри моноширинні за шириною, щоб колонки сум вирівнювались. */ .mud-table-cell, .participants-table td, .ig-help-table td { font-variant-numeric: tabular-nums; } h1:focus { outline: none; } .validation-message { color: var(--neg); } /* ── Section headings ── */ .section-title { font-size: 22px; font-weight: 800; color: var(--navy); margin-bottom: 2px; } .section-sub { font-size:15px; color: var(--grey3); margin-bottom: 22px; } /* ── Campaign cards grid ── */ .campaign-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; } .campaign-card { background: var(--surface); border-radius: 14px; box-shadow: var(--sh-1); overflow: hidden; transition: transform .18s, box-shadow .18s; cursor: pointer; text-decoration: none; } .campaign-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); } .campaign-preview { height: 130px; position: relative; overflow: hidden; background: var(--bg-sunken); display: flex; align-items: center; justify-content: center; font-size: 40px; color: var(--fg-muted); } .campaign-preview img { width: 100%; height: 100%; object-fit: cover; } .campaign-status { position: absolute; top: 10px; right: 10px; font-size:12px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; padding: 5px 11px; border-radius: 20px; /* inline-flex + line-height:1 — інакше капси «висять» до верхнього краю: рядок успадковує line-height 1.55 від body і додає простір під літерами. */ display: inline-flex; align-items: center; line-height: 1; white-space: nowrap; backdrop-filter: blur(3px); } .admins-role-label { display: block; font-size:14px; font-weight: 600; color: var(--grey3); margin-top: 4px; } .admins-role-select { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--br-control); border-radius: 8px; font-size:16px; background: var(--surface); } .campaign-body { padding: 14px 16px; } .campaign-id { font-size:12px; color: var(--fg-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; } .campaign-title { font-size:17px; font-weight: 700; color: var(--navy); margin-bottom: 4px; } .campaign-desc { font-size:13px; color: var(--grey3); line-height: 1.5; margin-bottom: 12px; min-height: 32px; } .campaign-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .cs-item { background: var(--grey0); border-radius: 8px; padding: 8px 10px; } .cs-label { font-size:12px; color: var(--grey3); font-weight: 600; } .cs-value { font-size:17px; font-weight: 800; color: var(--navy); } /* ── Promise block (per-campaign card) ── */ .promise-block { margin: 12px 0 10px; display: flex; flex-direction: column; gap: 4px; } .promise-row { display: flex; justify-content: space-between; align-items: baseline; font-size:14px; } .promise-label { color: var(--grey3); } .promise-val { font-weight: 700; color: var(--navy); } .promise-total { border-top: 1px dashed var(--grey1); padding-top: 5px; margin-top: 2px; } .promise-total .promise-label, .promise-total .promise-val { font-weight: 800; font-size:15px; } /* ── Coverage badge ── */ .coverage { font-size:13px; font-weight: 700; padding: 7px 10px; border-radius: 8px; margin-bottom: 10px; line-height: 1.35; } .cov-ok { background: var(--bg-sunken); color: var(--fg-strong); border: 1px solid var(--br-default); } /* Чорна плашка в обох темах: --hero-bg темний і у світлій, і в темній, тому текст лишається читабельним без інверсії. */ .cov-gap { background: var(--hero-bg); color: var(--ondark-fg); } .cov-none { background: var(--grey0); color: var(--grey3); } /* ── Collected + progress bar ── */ .collected-block { margin-bottom: 10px; } .collected-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; } .collected-label { font-size:13px; color: var(--grey3); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; } .collected-val { font-size:15px; font-weight: 800; color: var(--green); } .progress-track { height: 9px; background: var(--grey1); border-radius: 6px; overflow: hidden; } /* Градієнт, як було: від акценту до його світлішого/темнішого відтінку. color-mix прив'язує другий стоп до теми, тож у темній він не гасне. */ .progress-fill { height: 100%; border-radius: 6px; transition: width .4s; background: linear-gradient(90deg, var(--ac), color-mix(in srgb, var(--ac) 45%, var(--bg-sunken))); } .collected-pct { font-size:12px; color: var(--grey3); font-weight: 700; margin-top: 3px; text-align: right; } /* ── Team leaders ── */ .leaders { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; } .leader { display: flex; align-items: center; gap: 8px; font-size:13px; padding: 5px 8px; border-radius: 7px; background: var(--grey0); } .leader-cap { font-weight: 700; color: var(--grey3); white-space: nowrap; } .leader-name { font-weight: 700; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } .leader-sum { font-weight: 800; color: var(--navy); white-space: nowrap; } .leader-top { background: var(--warn-bg); } /* ── Period summary cards (dark, premium) — 4 в ряд ── */ .period-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; align-items: stretch; } .period-card { position: relative; overflow: hidden; background: var(--hero-bg); color: var(--hero-fg); border-radius: 20px; padding: 24px 24px 22px; box-shadow: var(--sh-3); border: 1px solid var(--ondark-line); } /* м'який світловий акцент у кутку */ .period-card::after { content: ""; position: absolute; top: -45px; right: -45px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.12), transparent 70%); pointer-events: none; } .period-head { display: flex; align-items: center; gap: 11px; margin-bottom: 4px; position: relative; } .period-title2 { font-size:16px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--hero-num); } .period-range { font-size:14px; color: var(--ondark-dim); margin: 8px 0 18px; font-weight: 600; } /* clamp, а не фіксовані 38px: сума за всі роки (45 072 772 ₴) при фіксованому розмірі переносилась на кілька рядків і розпирала плитку. */ .period-big { font-size: clamp(26px, 2.6vw, 46px); font-weight: 800; color: var(--hero-num); line-height: 1.05; letter-spacing: -.5px; white-space: nowrap; } .period-big span { font-size:21px; opacity: .5; font-weight: 700; } /* Підпис під сумою — звичайний дрібний текст, без капсів і розрядки: акцент має бути на числі, а не на поясненні до нього. */ .period-big-cap { font-size: 12px; color: var(--ondark-dim); margin-top: 5px; margin-bottom: 16px; font-weight: 400; line-height: 1.4; } /* ── Показники на плитці періоду (варіант B) ────────────────────────────── Рядками, число попереду у власній колонці: числа вишиковуються в один вертикальний стовпчик, тож око біжить по ньому, не перестрибуючи через підписи різної довжини. Вкладених коробок немає — саме вони раніше виштовхували сусідню плитку за контур картки. */ .period-stats { display: flex; flex-direction: column; } .period-stat { display: grid; grid-template-columns: minmax(56px, auto) 1fr; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--ondark-line); } .period-stat:first-child { border-top: 0; padding-top: 4px; } .period-stat .v { font-size: 21px; font-weight: 800; color: var(--hero-num); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .period-stat .l { font-size: 13px; color: var(--ondark-dim); font-weight: 600; } .chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .chart-block { min-width: 0; } .chart-cap { font-size:13px; color: var(--grey3); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; } .bar-chart { width: 100%; height: auto; display: block; } @media (max-width: 640px) { .chart-row { grid-template-columns: 1fr; } } .period-rows { display: flex; flex-direction: column; gap: 6px; } .period-rows > div { display: flex; justify-content: space-between; align-items: baseline; font-size:15px; color: var(--grey3); } .period-rows > div b { color: var(--navy); font-weight: 800; } .period-collected { color: var(--green) !important; } .period-bar-row { flex-direction: column !important; align-items: stretch !important; gap: 4px; margin-top: 4px; } .period-pct { font-size:12px; color: var(--grey3); font-weight: 700; } /* ── Filter bar (нативні select, працюють у Blazor-острові без MudBlazor-провайдерів) ── */ .filter-bar { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; } .filter-bar label { display: flex; flex-direction: column; font-size:13px; color: var(--grey3); font-weight: 600; gap: 3px; } .filter-bar select { font-size:16px; color: var(--navy); padding: 8px 10px; border: 1px solid var(--grey1); border-radius: 8px; background: var(--surface); min-width: 150px; cursor: pointer; } .filter-bar select:focus { outline: none; border-color: var(--amber); } .filter-bar input[type=search], .filter-bar input[type=date] { font-size:16px; color: var(--navy); padding: 8px 10px; border: 1px solid var(--grey1); border-radius: 8px; background: var(--surface); min-width: 150px; } .filter-bar input:focus { outline: none; border-color: var(--amber); } .filter-bar .chip-btn { font-size:14px; font-weight: 600; color: var(--navy); padding: 8px 12px; border: 1px solid var(--grey1); border-radius: 999px; background: var(--surface); cursor: pointer; align-self: flex-end; } .filter-bar .chip-btn:hover { border-color: var(--amber); background: var(--bg-sunken); } .filter-count { font-size:14px; color: var(--grey3); align-self: center; padding-bottom: 9px; } .user-name-link { color: var(--bar-fg); text-decoration: none; font-size:16px; margin-right: 16px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--ondark-line); } .user-name-link:hover { background: var(--ondark-tile); } .withdrawn-row { margin-top: 6px; font-size:14px; color: var(--grey3); } /* Інформаційний тултип на (ⓘ) — острів-сумісний (без MudPopover). */ .info-tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 6px; border-radius: 50%; border: 1px solid var(--grey1); color: var(--grey3); font-size:14px; font-weight: 700; cursor: help; user-select: none; vertical-align: middle; } .info-tip:hover, .info-tip:focus { border-color: var(--navy); color: var(--navy); outline: none; } .info-tip .info-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 50; width: 340px; max-width: 80vw; padding: 12px 14px; border-radius: 10px; background: var(--tip-bg); color: var(--tip-fg); font-size:14.5px; font-weight: 400; line-height: 1.5; box-shadow: var(--sh-2); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .12s, transform .12s; text-align: left; } .info-tip:hover .info-pop, .info-tip:focus .info-pop { opacity: 1; visibility: visible; transform: translateY(0); } .info-tip .info-pop b { color: var(--tip-fg); } .info-tip .info-pop ol { margin: 0; padding-left: 16px; } .info-tip .info-pop li { margin-bottom: 6px; } .info-tip .info-pop li:last-child { margin-bottom: 0; } /* ── Inline modal (без MudDialogProvider, який статичний у layout) ── */ .modal-backdrop { position: fixed; inset: 0; background: var(--overlay); z-index: 1400; } .modal-card { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--surface); border-radius: 14px; padding: 24px; width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; z-index: 1401; box-shadow: var(--sh-3); } .modal-select-label { display: flex; flex-direction: column; font-size:14px; color: var(--grey3); gap: 4px; margin-top: 8px; } .modal-select-label select { font-size:16px; color: var(--navy); padding: 9px 10px; border: 1px solid var(--grey1); border-radius: 8px; background: var(--surface); cursor: pointer; } .modal-select-label select:focus { outline: none; border-color: var(--amber); } /* ── Quick-view (detail) modal ── */ .detail-overlay { position: fixed; inset: 0; background: var(--overlay); z-index: 1500; display: flex; align-items: center; justify-content: center; padding: 24px 16px; overflow-y: auto; } /* Без власного max-height і overflow: інакше поруч із зовнішньою смугою прокрутки підкладки з'являлась друга, внутрішня. Прокручує тільки .detail-overlay. */ .detail-modal { background: var(--surface); border-radius: 18px; width: 760px; max-width: 100%; box-shadow: var(--sh-3); } .detail-header-img { height: 130px; border-radius: 18px 18px 0 0; position: relative; background: var(--bg-sunken); display: flex; align-items: center; justify-content: center; font-size: 46px; color: var(--fg-muted); cursor: pointer; } .detail-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 8px; border: none; background: var(--bg-surface); color: var(--fg-default); border: 1px solid var(--br-default); font-size:19px; cursor: pointer; } .detail-close:hover { background: var(--bg-sunken); } .detail-body { padding: 20px 24px; } .detail-title { font-size:22px; font-weight: 800; color: var(--navy); margin-bottom: 4px; } /* Назва як посилання — клік відкриває повні деталі збору. */ .detail-title-link { color: var(--green); cursor: pointer; width: fit-content; transition: opacity .15s; } .detail-title-link:hover { opacity: .75; } .detail-meta { font-size:14px; color: var(--grey3); margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 14px; } .detail-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; } .ds-card { background: var(--grey0); border-radius: 10px; padding: 12px 14px; } .ds-label { font-size:12px; color: var(--grey3); font-weight: 700; text-transform: uppercase; margin-bottom: 4px; } .ds-value { font-size:21px; font-weight: 800; color: var(--navy); } .ds-sub { font-size:13px; color: var(--grey3); margin-top: 2px; } /* ── Team ranking ── */ .team-rank-title { font-size:14px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--navy); margin-bottom: 6px; } .team-rank { display: flex; flex-direction: column; gap: 4px; } .tr-row { display: grid; grid-template-columns: 24px 1fr auto auto; gap: 10px; align-items: center; background: var(--grey0); border-radius: 8px; padding: 7px 10px; font-size:14px; } .tr-pos { font-weight: 800; color: var(--amber); text-align: center; } .tr-name { font-weight: 700; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tr-goal { font-size:13px; color: var(--grey3); } .tr-bal { font-weight: 800; color: var(--green); white-space: nowrap; } /* ── Participants table (modal) ── */ .participants-table { width: 100%; border-collapse: collapse; font-size:14px; } .participants-table th { text-align: left; padding: 8px 10px; background: var(--grey0); font-size:12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--grey3); } .participants-table th:first-child { border-radius: 8px 0 0 8px; } .participants-table th:last-child { border-radius: 0 8px 8px 0; } .participants-table td { padding: 9px 10px; border-bottom: 1px solid var(--grey1); } .participants-table tr:last-child td { border-bottom: none; } .p-name { font-weight: 700; color: var(--navy); } .p-amount { font-weight: 800; color: var(--navy); } .p-mono { font-size:13px; color: var(--green); font-weight: 700; } .p-badge { font-size:12px; padding: 3px 8px; border-radius: 20px; font-weight: 700; display: inline-block; } .pb-team { background: var(--bg-sunken); color: var(--fg-strong); } .pb-solo { background: var(--grey0); color: var(--grey3); } .pb-done { background: var(--pos-bg); color: var(--pos); } .pb-wait { background: var(--bg-sunken); color: var(--fg-muted); border: 1px solid var(--br-default); } .pb-broken { background: var(--neg-bg); color: var(--neg); } .detail-footer { padding: 14px 24px 18px; border-top: 1px solid var(--grey1); display: flex; gap: 10px; justify-content: space-between; align-items: center; flex-wrap: wrap; } .df-left { font-size:13px; color: var(--grey3); } .df-right { display: flex; gap: 8px; flex-wrap: wrap; } /* ── Top navigation (вкладки: один рядок, групи через розділювач) ── */ .top-nav { position: sticky; top: 64px; z-index: 6; display: flex; align-items: center; flex-wrap: nowrap; gap: 2px; background: var(--surface); border-radius: 10px; padding: 4px; margin-bottom: 18px; box-shadow: var(--sh-1); } .top-nav .tn-item { display: flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 7px; flex: 0 0 auto; text-decoration: none; color: var(--grey3); font-weight: 500; font-size:15px; line-height: 20px; white-space: nowrap; transition: background .15s, color .15s; } .top-nav .tn-item:hover { background: var(--grey0); color: var(--navy); } /* Активна вкладка: не лише колір — ще й вага шрифту (WCAG 1.4.1). */ .top-nav .tn-item.active { background: var(--invert); color: var(--on-invert); font-weight: 700; } .top-nav .tn-item:focus-visible { outline: 2px solid var(--ac-ring); outline-offset: 1px; } .top-nav .tn-ico { font-size:19px; width: 1em; height: 1em; flex: 0 0 auto; } /* Другорядні розділи (Instagram, дизайн) — лише іконка + tooltip. */ .top-nav .tn-item.tn-icon { padding: 6px 9px; } .top-nav .tn-item.tn-icon .tn-txt { display: none; } .top-nav .tn-sep { width: 1px; height: 20px; background: var(--grey1); margin: 0 5px; flex: 0 0 auto; } .top-nav .tn-off { display: none !important; } /* Переповнення: те, що не влізло в рядок, їде в меню «Ще N». */ .top-nav .tn-more { position: relative; margin-left: auto; flex: 0 0 auto; } .top-nav .tn-more[hidden] { display: none; } .tn-more-btn { display: flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 7px; cursor: pointer; border: 1px solid var(--grey1); background: var(--surface); color: var(--navy); font-family: inherit; font-size:15px; font-weight: 500; line-height: 20px; white-space: nowrap; } .tn-more-btn:hover { border-color: var(--ac); background: var(--grey0); } .tn-more-btn:focus-visible { outline: 2px solid var(--ac-ring); outline-offset: 1px; } .tn-more-chev { font-size:13px; opacity: .6; } .tn-more-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 210px; z-index: 20; background: var(--surface); border: 1px solid var(--grey1); border-radius: 10px; padding: 5px; box-shadow: var(--sh-2); } .tn-more-menu[hidden] { display: none; } .tn-more-menu .tn-item { padding: 8px 10px; } .tn-more-menu .tn-item .tn-txt { display: inline; } @media (max-width: 599px) { .top-nav { top: 56px; } } /* ── Brand wordmark (хедер) ── */ .brand-wordmark { display: flex; align-items: center; gap: 9px; text-decoration: none; } .brand-wordmark .bw-mark { width: 26px; height: 26px; border-radius: 6px; background: var(--surface); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: var(--bar-bg); font-weight: 900; font-size:18px; } .brand-wordmark .bw-text { color: var(--bar-fg); font-weight: 800; letter-spacing: 2px; font-size:18px; } .brand-wordmark .bw-text b { font-weight: 800; opacity: .65; } /* ── Login card (чорна плитка, біле лого, біла кнопка) ── */ .login-card { background: var(--hero-bg); border: 1px solid var(--br-strong); border-radius: 18px; padding: 44px 34px; width: min(360px, calc(100vw - 32px)); text-align: center; box-shadow: var(--sh-3); display: flex; flex-direction: column; align-items: center; gap: 26px; } .login-logo { width: 160px; height: auto; display: block; } /* Перемикач теми на сторінці входу: користувач може вибрати тему ще до авторизації, і вибір збережеться в cookie так само, як в адмінці. */ .login-theme { position: fixed; top: 16px; right: 16px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--br-default); background: var(--bg-surface); color: var(--fg-default); border-radius: 50%; cursor: pointer; font-size:19px; line-height: 1; padding: 0; } .login-theme:hover { background: var(--bg-sunken); border-color: var(--br-strong); } .login-theme:focus-visible { outline: 2px solid var(--ac-ring); outline-offset: 2px; } .login-theme .lt-dark { display: none; } html[data-theme="dark"] .login-theme .lt-light { display: none; } html[data-theme="dark"] .login-theme .lt-dark { display: inline; } .login-btn { width: 100%; background: var(--ondark-btn-bg); color: var(--ondark-btn-fg); border: none; border-radius: 11px; padding: 14px 24px; font-size:17px; font-weight: 700; cursor: pointer; transition: opacity .15s; } .login-btn:hover { opacity: .85; } .login-err { width: 100%; background: var(--ondark-tile); color: var(--ondark-fg); font-size:15px; padding: 10px 14px; border-radius: 8px; } /* ── Перевірити дизайн ── */ .cd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 720px) { .cd-grid { grid-template-columns: 1fr; } } .cd-fonts { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; } .cd-font { display: flex; align-items: center; justify-content: space-between; background: var(--grey0); border-radius: 8px; padding: 4px 6px 4px 12px; font-size:15px; color: var(--navy); font-weight: 600; } .cd-fontwarn { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--grey1); display: flex; flex-direction: column; gap: 4px; } .cd-fontwarn-title { font-size:13px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--grey3); margin-bottom: 2px; } .cd-fontwarn .fw-ok { font-size:15px; color: var(--pos); font-weight: 600; } .cd-fontwarn .fw-miss { font-size:15px; color: var(--warn); font-weight: 700; } .cd-fontwarn .fw-note { font-size:14px; color: var(--grey3); margin-top: 4px; } /* ── Campaign lifecycle status chip ── */ .cv-status { font-size:13px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; padding: 6px 13px; border-radius: 20px; white-space: nowrap; display: inline-flex; align-items: center; line-height: 1; } /* Дії збору — в один рядок під назвою; за потреби горизонтальна прокрутка замість переносу. */ .cv-actions { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; } .cv-actions .mud-button-root { flex: 0 0 auto; white-space: nowrap; } /* ── Export column picker ── */ .export-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; } .export-col { display: flex; align-items: center; gap: 8px; font-size:15px; color: var(--navy); cursor: pointer; } .export-col input { width: 16px; height: 16px; cursor: pointer; } .sortable { cursor: pointer; user-select: none; white-space: nowrap; } /* ── Колір команди (читабельність таблиці учасників) ── */ .team-chip { display: inline-block; padding: 3px 10px; border-radius: 20px; color: var(--team-1-fg); font-size:14px; font-weight: 700; white-space: nowrap; } /* Комірка з обрізанням довгого тексту в один рядок (напр. довге ім'я в таблиці учасників). */ .cell-ellipsis { display: inline-block; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; } /* Компактніші відступи між колонками в усіх таблицях (щільно, але не впритул). */ .mud-table-root .mud-table-cell, .mud-table-dense .mud-table-cell { padding-left: 8px !important; padding-right: 8px !important; } .mud-table-root .mud-table-cell:first-child, .mud-table-dense .mud-table-cell:first-child { padding-left: 12px !important; } .mud-table-root .mud-table-cell:last-child, .mud-table-dense .mud-table-cell:last-child { padding-right: 12px !important; } /* ── Import modal ── */ .imp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--grey1); font-size:15px; color: var(--navy); font-weight: 600; } .imp-warnings { margin-top: 8px; max-height: 160px; overflow-y: auto; font-size:14px; color: var(--warn); display: flex; flex-direction: column; gap: 3px; } /* ── Pager у вікні швидкого перегляду ── */ .detail-pager { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 10px; font-size:14px; color: var(--grey3); } .detail-pager button { border: 1px solid var(--grey1); background: var(--surface); border-radius: 7px; padding: 5px 10px; font-size:14px; font-weight: 700; color: var(--navy); cursor: pointer; } .detail-pager button:disabled { opacity: .4; cursor: default; } .detail-pager button:not(:disabled):hover { background: var(--grey0); } /* ── Campaign form (створення/редагування) — секційна, повітряна ── */ .cform { max-width: 800px; } .cform-lead { font-size:15.5px; color: var(--grey3); margin: -2px 0 22px; } .cform-section { background: var(--surface); border: 1px solid var(--grey1); border-radius: 16px; padding: 24px 26px; margin-bottom: 20px; } .cform-shead { display: flex; align-items: center; gap: 12px; } .cform-sico { width: 38px; height: 38px; flex: none; border-radius: 11px; background: var(--grey0); display: flex; align-items: center; justify-content: center; font-size:21px; } .cform-stitle { font-size:18px; font-weight: 800; color: var(--navy); } .cform-ssub { font-size:14.5px; color: var(--grey3); line-height: 1.55; margin: 10px 0 18px; } .cform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; } @media (max-width: 640px) { .cform-row { grid-template-columns: 1fr; } } .cform-flabel { font-size:14px; font-weight: 700; color: var(--grey3); text-transform: uppercase; letter-spacing: .5px; margin: 0 0 8px; display: block; } .cform-select { display: block; width: 100%; padding: 12px 13px; border: 1px solid var(--br-control); border-radius: 8px; font-size:16px; background: var(--surface); color: var(--navy); cursor: pointer; } .cform-select:hover { border-color: var(--fg-subtle); } .cform-select:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy); } .cform-upload { border: 1.5px dashed var(--br-control); border-radius: 12px; padding: 14px 16px; background: var(--grey0); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .cform-upload-info { font-size:14.5px; color: var(--grey3); } .cform-upload-info.ok { color: var(--pos); font-weight: 700; } .cform-preview { height: 70px; border-radius: 8px; object-fit: cover; border: 1px solid var(--grey1); } .cform-tags { background: var(--grey0); border-radius: 10px; padding: 12px 14px; font-size:14.5px; color: var(--grey3); line-height: 1.9; margin-bottom: 18px; } .cform-tags code { background: var(--surface); border: 1px solid var(--grey1); border-radius: 5px; padding: 1px 6px; font-size:14px; color: var(--navy); } .cform-attach { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--grey0); border: 1px solid var(--grey1); border-radius: 10px; padding: 9px 8px 9px 13px; margin-bottom: 8px; font-size:16px; } .cform-actions { display: flex; align-items: center; gap: 16px; margin-top: 4px; } /* ══ Instagram insights ══════════════════════════════════════════════════════ Єдине місце в адмінці, де кольори несуть сенс: СММ має за пів секунди бачити, який допис «зайшов», а який ні. Решта палітри лишається монохромною. */ /* --warn і --info більше не перевизначаємо: вони вже є глобально з тим самим іменем, а `--warn: var(--warn)` — самопосилання, тобто недійсне значення. */ .ig { --ok: var(--pos); --bad: var(--neg); } /* ── Шапка акаунта ── */ .ig-hero { background: var(--hero-bg); border: 1px solid var(--ondark-line); border-radius: 18px; padding: 22px 24px; color: var(--hero-fg); margin-bottom: 18px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .ig-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--ondark-line); flex-shrink: 0; } .ig-avatar-fallback { display: flex; align-items: center; justify-content: center; background: var(--ondark-tile); font-size: 30px; } .ig-hero-main { flex: 1; min-width: 190px; } .ig-handle { font-size: 21px; font-weight: 800; letter-spacing: -.3px; } .ig-handle a { color: var(--hero-num); text-decoration: none; } .ig-handle a:hover { text-decoration: underline; } .ig-hero-name { font-size:15px; color: var(--ondark-dim); margin-top: 2px; } .ig-hero-stats { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 12px; } .ig-hero-stat .n { font-size:22px; font-weight: 800; line-height: 1; } .ig-hero-stat .c { font-size:13px; color: var(--ondark-dim); font-weight: 600; margin-top: 4px; text-transform: uppercase; letter-spacing: .5px; } .ig-hero-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .ig-sync { font-size:13.5px; color: var(--ondark-dim); text-align: right; } .ig-btn { border: 1px solid var(--ondark-line); background: var(--ondark-tile); color: var(--ondark-fg); border-radius: 9px; padding: 8px 14px; font-size:15px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: background .15s, border-color .15s; } .ig-btn:hover:not(:disabled) { background: var(--ondark-line); border-color: var(--ondark-fg); } .ig-btn:disabled { opacity: .5; cursor: default; } /* ── Перемикач періоду ── */ .ig-periods { display: flex; gap: 6px; background: var(--grey1); padding: 4px; border-radius: 11px; } .ig-period { border: none; background: transparent; color: var(--grey3); font-size:15px; font-weight: 700; padding: 7px 15px; border-radius: 8px; cursor: pointer; transition: background .15s, color .15s; } .ig-period:hover { color: var(--navy); } .ig-period.on { background: var(--surface); color: var(--navy); box-shadow: var(--sh-1); } /* ── Плитки показників ── */ .ig-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; margin-bottom: 20px; } .ig-kpi { background: var(--surface); border: 1px solid var(--grey1); border-radius: 14px; padding: 14px 16px; } .ig-kpi-cap { font-size:13px; color: var(--grey3); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; display: flex; align-items: center; gap: 6px; } .ig-kpi-val { font-size: 26px; font-weight: 800; color: var(--navy); line-height: 1.15; margin-top: 8px; letter-spacing: -.5px; } .ig-delta { font-size:14px; font-weight: 700; margin-top: 5px; display: inline-flex; align-items: center; gap: 4px; } .ig-delta.up { color: var(--ok); } .ig-delta.down { color: var(--bad); } .ig-delta.flat { color: var(--grey3); } /* ── Картки-блоки ── */ .ig-card { background: var(--surface); border: 1px solid var(--grey1); border-radius: 16px; padding: 18px 20px; margin-bottom: 18px; } .ig-card-title { font-size:17px; font-weight: 800; color: var(--navy); margin-bottom: 2px; } .ig-card-sub { font-size:14px; color: var(--grey3); margin-bottom: 14px; } .ig-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 860px) { .ig-two { grid-template-columns: 1fr; } } /* ── Поради ── */ .ig-tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-bottom: 18px; } .ig-tip { background: var(--surface); border: 1px solid var(--grey1); border-left: 3px solid var(--navy); border-radius: 12px; padding: 13px 15px; } .ig-tip-head { font-size:15.5px; font-weight: 800; color: var(--navy); display: flex; gap: 8px; align-items: flex-start; } .ig-tip-body { font-size:14.5px; color: var(--grey3); line-height: 1.55; margin-top: 6px; } /* ── Панель фільтрів дописів ── */ .ig-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; } .ig-toolbar input[type=search], .ig-toolbar select { font-size:15.5px; color: var(--navy); padding: 8px 11px; border: 1px solid var(--grey1); border-radius: 9px; background: var(--surface); } .ig-toolbar input[type=search]:focus, .ig-toolbar select:focus { outline: none; border-color: var(--navy); } .ig-view-toggle { display: flex; border: 1px solid var(--grey1); border-radius: 9px; overflow: hidden; } .ig-view-toggle button { border: none; background: var(--surface); padding: 8px 13px; font-size:15px; font-weight: 700; color: var(--grey3); cursor: pointer; } .ig-view-toggle button.on { background: var(--invert); color: var(--bar-fg); } /* ── Сітка дописів ── */ .ig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 16px; } .ig-post { background: var(--surface); border: 1px solid var(--grey1); border-radius: 14px; overflow: hidden; cursor: pointer; transition: transform .16s, box-shadow .16s; display: flex; flex-direction: column; } .ig-post:hover { transform: translateY(-3px); box-shadow: var(--sh-2); } .ig-thumb { position: relative; aspect-ratio: 1; background: var(--grey0); } .ig-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .ig-thumb-empty { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 34px; opacity: .25; } .ig-type { position: absolute; top: 8px; left: 8px; background: var(--onphoto-scrim); color: var(--onphoto-fg); backdrop-filter: blur(3px); font-size:12.5px; font-weight: 700; padding: 4px 8px; border-radius: 7px; letter-spacing: .3px; } .ig-badge { position: absolute; top: 8px; right: 8px; font-size:12.5px; font-weight: 800; padding: 4px 8px; border-radius: 7px; color: var(--onphoto-fg); } .ig-badge.star { background: var(--onphoto-scrim); color: var(--onphoto-pos); box-shadow: inset 0 0 0 1px var(--onphoto-pos); } /* «Добре» — той самий зелений, але світліший: ТОП мусить лишатися помітнішим за просто добрий допис. */ .ig-badge.good { background: var(--onphoto-scrim); color: var(--onphoto-pos); } .ig-badge.normal { background: var(--onphoto-scrim); color: var(--onphoto-muted); } .ig-badge.wide { background: var(--onphoto-scrim); color: var(--onphoto-warn); } .ig-badge.narrow { background: var(--onphoto-scrim); color: var(--onphoto-info); } .ig-badge.retention { background: var(--onphoto-scrim); color: var(--onphoto-warn); } .ig-badge.weak { background: var(--onphoto-scrim); color: var(--onphoto-neg); } .ig-badge.unknown { background: var(--onphoto-scrim); color: var(--onphoto-muted); } .ig-post-body { padding: 12px 13px 13px; display: flex; flex-direction: column; flex: 1; } .ig-post-date { font-size:12.5px; color: var(--grey3); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; } .ig-post-cap { font-size:14.5px; color: var(--navy); font-weight: 600; line-height: 1.45; margin: 5px 0 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 36px; } .ig-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: auto; } .ig-metric { background: var(--grey0); border-radius: 8px; padding: 7px 4px; text-align: center; } .ig-metric .n { font-size:15px; font-weight: 800; color: var(--navy); line-height: 1; } .ig-metric .c { font-size:15px; margin-top: 3px; opacity: .55; } .ig-er { margin-top: 9px; } .ig-er-head { display: flex; justify-content: space-between; font-size:12.5px; color: var(--grey3); font-weight: 700; margin-bottom: 4px; } .ig-er-track { height: 5px; background: var(--grey1); border-radius: 4px; overflow: hidden; } .ig-er-fill { height: 100%; border-radius: 4px; transition: width .35s; background: linear-gradient(90deg, var(--ac), color-mix(in srgb, var(--ac) 45%, var(--bg-sunken))); } .ig-er-fill.up { background: var(--ok); } .ig-er-fill.down { background: var(--bad); } /* ── Порівняльні смуги (формати, аудиторія, години) ── */ .ig-bars { display: flex; flex-direction: column; gap: 9px; } .ig-bar-row { display: grid; grid-template-columns: 118px 1fr 76px; gap: 10px; align-items: center; font-size:14.5px; } .ig-bar-label { color: var(--navy); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ig-bar-track { height: 9px; background: var(--grey0); border-radius: 5px; overflow: hidden; } .ig-bar-fill { height: 100%; border-radius: 5px; transition: width .35s; background: linear-gradient(90deg, var(--ac), color-mix(in srgb, var(--ac) 45%, var(--bg-sunken))); } .ig-bar-val { text-align: right; font-weight: 800; color: var(--navy); } .ig-bar-sub { color: var(--grey3); font-weight: 600; } /* ── Модалка допису ── */ .ig-modal { background: var(--surface); border-radius: 18px; width: 860px; max-width: 100%; max-height: calc(100vh - 40px); overflow-y: auto; box-shadow: var(--sh-3); } .ig-modal-top { display: grid; grid-template-columns: 300px 1fr; gap: 0; } @media (max-width: 760px) { .ig-modal-top { grid-template-columns: 1fr; } } .ig-modal-img { position: relative; overflow: hidden; background: var(--photo-bg); display: flex; align-items: center; justify-content: center; } /* Підкладка: те саме зображення, розмите й трохи збільшене — scale прибирає світлу кайму, яку блюр дає по краях. */ .ig-modal-img-blur { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(24px) brightness(.7) saturate(1.15); transform: scale(1.2); } /* contain, а не cover: СММ має бачити креатив цілком, без обрізаних країв. */ .ig-modal-img img { position: relative; width: 100%; height: auto; max-height: 420px; object-fit: contain; display: block; } .ig-modal-side { padding: 20px 22px; } .ig-modal-caption { font-size:15px; color: var(--navy); line-height: 1.6; white-space: pre-wrap; max-height: 150px; overflow-y: auto; background: var(--grey0); border-radius: 10px; padding: 11px 13px; margin-bottom: 14px; } .ig-modal-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; } .ig-mm { background: var(--grey0); border-radius: 10px; padding: 10px 12px; } .ig-mm .c { font-size:12px; color: var(--grey3); font-weight: 700; text-transform: uppercase; letter-spacing: .3px; } .ig-mm .n { font-size:19px; font-weight: 800; color: var(--navy); margin-top: 3px; } .ig-advice { border-radius: 12px; padding: 13px 15px; margin: 16px 0 0; font-size:15px; line-height: 1.55; border: 1px solid var(--grey1); background: var(--grey0); color: var(--navy); } .ig-advice.star, .ig-advice.good { border-color: color-mix(in srgb, var(--pos) 45%, transparent); background: var(--pos-bg); } .ig-advice.wide { border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: var(--warn-bg); } .ig-advice.narrow { border-color: color-mix(in srgb, var(--info) 45%, transparent); background: var(--info-bg); } .ig-advice.retention { border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: var(--warn-bg); } .ig-advice.weak { border-color: color-mix(in srgb, var(--neg) 45%, transparent); background: var(--neg-bg); } .ig-advice b { display: block; margin-bottom: 4px; } /* ── Порожні стани ── */ .ig-empty { background: var(--surface); border: 1px dashed var(--grey1); border-radius: 16px; padding: 42px 28px; text-align: center; } .ig-empty-emoji { font-size: 44px; } .ig-empty-title { font-size:20px; font-weight: 800; color: var(--navy); margin: 12px 0 6px; } .ig-empty-text { font-size:15.5px; color: var(--grey3); line-height: 1.6; max-width: 520px; margin: 0 auto 18px; } .blazor-error-boundary { background: var(--neg-bg); padding: 1rem; color: var(--neg); border: 1px solid var(--neg); } .blazor-error-boundary::after { content: "Сталася помилка."; } /* ── Публічні юридичні тексти (політика приватності) ── */ .legal { max-width: 780px; margin: 0 auto 40px; background: var(--surface); border: 1px solid var(--grey1); border-radius: 16px; padding: 30px 34px; } .legal h2 { font-size:18px; font-weight: 800; color: var(--navy); margin: 26px 0 8px; } .legal p, .legal li { font-size:16px; color: var(--fg-default); line-height: 1.65; } .legal ul, .legal ol { padding-left: 22px; margin: 8px 0; } .legal li { margin-bottom: 6px; } .legal a { color: var(--navy); text-decoration: underline; } /* ── Діагностика підключення Instagram (лише адмін) ── */ .ig-diag { background: var(--surface); border: 1px solid var(--grey1); border-radius: 12px; margin-bottom: 18px; } .ig-diag > summary { cursor: pointer; padding: 11px 16px; font-size:14.5px; font-weight: 700; color: var(--grey3); } .ig-diag > summary:hover { color: var(--navy); } .ig-diag-body { padding: 4px 16px 16px; font-size:14.5px; line-height: 1.9; color: var(--navy); } .ig-diag-body code { background: var(--grey0); border: 1px solid var(--grey1); border-radius: 5px; padding: 1px 6px; font-size:14px; } .ig-diag-result { margin-top: 12px; padding: 10px 13px; border-radius: 9px; font-size:14.5px; line-height: 1.55; word-break: break-word; } .ig-diag-result.ok { background: var(--pos-bg); border: 1px solid color-mix(in srgb, var(--pos) 45%, transparent); } .ig-diag-result.bad { background: var(--neg-bg); border: 1px solid color-mix(in srgb, var(--neg) 45%, transparent); } /* Посилання-завантаження (шрифти, SVG-шаблони) */ /* Кнопка завантаження готового файлу в модалці. Своя, а не MudLink: той малюється кольором primary, який у нас майже зливається з темним тлом картки. */ .dl-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 10px; background: var(--navy); color: var(--surface); font-size: 15px; font-weight: 600; text-decoration: none; } .dl-btn:hover { opacity: .85; color: var(--surface); } /* Вибір кольору аркуша подяки: піпетка + зразок обраного. */ .th-color { width: 44px; height: 34px; padding: 0; border: 1px solid var(--grey1); border-radius: 8px; background: none; cursor: pointer; } .th-swatch { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--grey1); display: inline-block; flex: none; } .cd-font-dl { display: inline-block; text-decoration: none; font-size:15px; font-weight: 700; color: var(--grey3); padding: 4px 8px; border-radius: 7px; } .cd-font-dl:hover { color: var(--navy); background: var(--grey1); } /* ── Довідка «як це рахується» (низ сторінки Instagram) ── */ .ig-help { background: var(--surface); border: 1px solid var(--grey1); border-radius: 16px; margin: 26px 0 10px; } .ig-help > summary { cursor: pointer; padding: 15px 20px; font-size:16px; font-weight: 800; color: var(--navy); } .ig-help > summary:hover { color: var(--fg-strong); } .ig-help-body { padding: 2px 20px 22px; } .ig-help-title { font-size:13px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--grey3); margin: 20px 0 8px; } .ig-help-table { width: 100%; border-collapse: collapse; } .ig-help-table td { padding: 9px 10px; font-size:14.5px; line-height: 1.6; color: var(--fg-default); border-top: 1px solid var(--grey1); vertical-align: top; } .ig-help-table tr:first-child td { border-top: none; } .ig-help-table td:first-child { width: 190px; font-weight: 700; color: var(--navy); white-space: nowrap; } @media (max-width: 700px) { .ig-help-table td:first-child { width: auto; white-space: normal; } } .ig-help-table code { background: var(--grey0); border: 1px solid var(--grey1); border-radius: 5px; padding: 2px 7px; font-size:14px; } .ig-help-note { background: var(--grey0); border-radius: 10px; padding: 11px 14px; font-size:14.5px; line-height: 1.6; color: var(--fg-default); margin-top: 14px; } /* ── Перемикачі формату контенту (дописи / Reels / Stories) ── */ .ig-types { display: flex; gap: 6px; flex-wrap: wrap; } .ig-type-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--grey1); background: var(--surface); color: var(--grey3); border-radius: 9px; padding: 7px 11px; font-size:15px; font-weight: 700; cursor: pointer; transition: border-color .15s, background .15s, color .15s; opacity: .6; } .ig-type-chip:hover { border-color: var(--fg-subtle); color: var(--navy); } .ig-type-chip.on { background: var(--invert); border-color: var(--navy); color: var(--bar-fg); opacity: 1; } .ig-type-chip .n { font-size:13px; font-weight: 800; background: var(--grey0); color: var(--navy); border-radius: 20px; padding: 1px 7px; } .ig-type-chip.on .n { background: var(--ondark-tile); color: var(--bar-fg); } /* Крапка статусу (варіант B): колір статусу лишається видимим і на світлому чипі, і на темному (вибраному) — не покладаємось лише на колір тексту/фону. Колір задається на сторінці. */ .ig-type-chip .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; } /* Підсекція всередині картки (заголовок одразу після блоку смуг) — інакше групи зливаються в суцільну стіну рядків і незрозуміло, де закінчується одна шкала й починається інша. */ .ig-bars + .ig-card-title { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--grey1); } .ig-bars { gap: 11px; } .ig-bar-val .ig-bar-sub { margin-left: 6px; } /* ── Вкладка «Прогрес» збору: команди + прев'ю сторіз ── */ .cvp { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 26px; align-items: start; } @media (max-width: 1100px) { .cvp { grid-template-columns: 1fr; } } .cvp-main { min-width: 0; } .cvp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; } .cvp-tile { background: var(--grey0); border: 1px solid var(--grey1); border-radius: 12px; padding: 13px 15px; } .cvp-tile-v { display: block; font-size: 22px; font-weight: 800; color: var(--navy); line-height: 1.15; } .cvp-tile-l { display: block; font-size:13.5px; font-weight: 600; color: var(--grey3); margin-top: 3px; } .cvp-overall { background: var(--surface); border: 1px solid var(--grey1); border-radius: 12px; padding: 15px 17px; margin-bottom: 18px; } .cvp-overall-t { font-size:15px; font-weight: 700; color: var(--navy); } .cvp-overall-p { font-size:22px; font-weight: 800; color: var(--navy); } .cvp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .cvp-sub { font-size:14px; color: var(--grey3); margin-top: 7px; } .cvp-sub b { color: var(--navy); } .cvp-bar { height: 12px; border-radius: 20px; background: var(--grey1); overflow: hidden; margin-top: 9px; } .cvp-bar-fill { height: 100%; border-radius: 20px; transition: width .25s; } /* Теракота → персик: рівно той градієнт, що був, тільки тепер із бренд-палітри (--team-1 = #d24f33, --team-5 = #fca182). */ .cvp-bar-fill.is-accent { background: linear-gradient(90deg, var(--team-1), var(--team-5)); } .cvp-bar-fill.is-done { background: linear-gradient(90deg, var(--team-10), color-mix(in srgb, var(--team-10) 55%, #fff)); } .cvp-teams { display: flex; flex-direction: column; gap: 10px; } .cvp-team { border: 1px solid var(--grey1); border-radius: 12px; padding: 12px 15px 13px; background: var(--surface); } .cvp-team-p { font-size:19px; font-weight: 800; color: var(--navy); white-space: nowrap; } .cvp-team-p.is-done { color: var(--pos); } .cvp-check { flex-direction: row !important; align-items: center; gap: 7px !important; font-size:14px !important; color: var(--navy) !important; } .filter-bar input[type=number] { border: 1px solid var(--br-control); border-radius: 8px; padding: 7px 9px; font-size:15px; width: 92px; background: var(--surface); } .cvp-story { border: 1px solid var(--grey1); border-radius: 14px; padding: 15px; background: var(--grey0); } .cvp-story-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 11px; } .cvp-story-head > span:first-child { font-size:15px; font-weight: 800; color: var(--navy); } .cvp-phone { border-radius: 14px; overflow: hidden; background: var(--photo-bg); box-shadow: var(--sh-2); } .cvp-phone img { display: block; width: 100%; height: auto; } /* Дії під прев'ю сторіз — завжди в один ряд (колонка вузька, тож не переносимо). */ .cvp-actions { display: flex; gap: 8px; flex-wrap: nowrap; } .cvp-actions .mud-button-root { white-space: nowrap; } /* Теги менторів для історії. */ .cvp-tags { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--grey1); } .cvp-tags-t { font-size:14px; font-weight: 700; color: var(--navy); } /* Росте під кількість менторів — без фіксованої висоти й без скролу всередині. */ .cvp-tags-box { width: 100%; box-sizing: border-box; margin-top: 6px; font-family: monospace; font-size:14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--grey1); border-radius: 8px; padding: 8px; background: var(--surface); color: var(--navy); } .cvp-tags-box.is-empty { color: var(--grey3); font-family: inherit; } /* ════════════════════════════════════════════════════════════════════════ Мобільна адаптація (телефони). Крок 1: шапка, навігація, відступи, тап-таргети. Таблиці→картки на окремих сторінках — окремими правилами нижче/у сторінках. ════════════════════════════════════════════════════════════════════════ */ @media (max-width: 599px) { /* Шапка: ховаємо довгі підписи (ім'я користувача, «Вийти») — лишаємо іконки/⚙, щоб верхній бар не переповнювався на вузькому екрані. */ .appbar-name, .appbar-txt { display: none; } .user-name-link { padding: 6px 8px; } /* Контент — на всю ширину, менше полів. */ .mud-main-content .mud-container { padding-left: 12px; padding-right: 12px; } .mud-main-content .mud-container.py-6 { padding-top: 18px; padding-bottom: 18px; } /* Навігація: компактніше зверху, більші тап-таргети (зручно пальцем). */ .top-nav { margin-bottom: 12px; } .top-nav .tn-item { padding: 9px 12px; } .tn-more-btn { padding: 8px 11px; } /* Заголовки трохи менші, щоб не тиснули. */ .section-title { font-size:21px; } /* Модалки — майже на всю ширину (вже адаптивні, підстраховка відступів). */ .modal-card { padding: 18px; border-radius: 16px; } /* Ряди дій (шапка збору, прев'ю) вже скролять по горизонталі — лишаємо. */ /* «Розгорнута» плитка збору (модалка деталей) — аркуш знизу на всю ширину. */ .detail-overlay { padding: 0; align-items: flex-end; } .detail-modal { width: 100%; max-width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; } .detail-body { padding: 16px 14px; } .detail-stats { grid-template-columns: 1fr 1fr; } /* Кастомні таблиці (учасники, у модалці й на сторінках) → картки: заголовок ховаємо, кожен рядок стає карткою, а підпис колонки бере значення з data-label на комірці. */ .participants-table { font-size:15px; } .participants-table thead { display: none; } .participants-table tr { display: block; background: var(--surface); border: 1px solid var(--grey1); border-radius: 10px; margin-bottom: 8px; overflow: hidden; } .participants-table td { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; text-align: right; padding: 8px 12px; border-bottom: 1px solid var(--grey1); } .participants-table tr td:last-child { border-bottom: none; } .participants-table td::before { content: attr(data-label); color: var(--grey3); font-weight: 600; text-align: left; flex: 0 0 auto; } .participants-table td:not([data-label])::before { content: ""; } } /* Іконкові кнопки: у MudBlazor hover-фон рахується від кольору тексту, на темній темі виходить ледь помітним. */ .mud-icon-button:hover { background-color: var(--bg-sunken); } /* ── Primary як КОЛІР ТЕКСТУ ─────────────────────────────────────────────── MudBlazor бере колір посилань, активної вкладки, її підкреслення й підпису сфокусованого поля з одного токена --mud-palette-primary. Але цей же токен служить ФОНОМ filled-кнопок, а в темній темі ми задали його темним (#2E2E2E), щоб кнопка лишалась темною з білим текстом. Через це «🧾 рахунок», «📄 квитанція», «⬇️ Шаблон» і назва активної вкладки («Зняття», «Статус») виходили чорними на чорному. Ці місця переводимо на --ac — «колір дії» самого застосунку. У світлій темі --ac це той самий #141414, що й --mud-palette-primary, тож світла тема не змінюється зовсім; у темній --ac це #FAFAFA. Самі кнопки НЕ чіпаємо: там темний фон під білим текстом доречний. !important потрібен, бо у MudBlazor .mud-primary-text теж із !important. Цей файл підключений ПІСЛЯ MudBlazor.min.css, тож за рівної специфічності виграє він. */ .mud-primary-text { color: var(--ac) !important; } /* Вкладки. Селектор із .mud-tabs — специфічніший за .mud-tab.mud-tab-active у MudBlazor. Для підкреслення специфічність рівна варіантам .mud-tabs-tabbar-* (кольорова смуга вкладок); якщо колись зʼявиться — цей рядок треба буде обмежити. */ .mud-tabs .mud-tab.mud-tab-active { color: var(--ac); } .mud-tabs .mud-tab-slider { background: var(--ac); } /* Підпис поля під фокусом — той самий токен, та сама проблема. */ .mud-input:focus-within ~ label.mud-input-label { color: var(--ac); } /* ══ Документи витрат (вкладка «Витрати») ═════════════════════════════════ Хребет — зняття: на кожне обовʼязково мають бути документи, тож стан видно кольором лівої межі рядка й текстом статусу. Статус рахують ЛИШЕ обовʼязкові слоти: дріб по всіх підсвічував жовтим витрати, де бракувало опціонального договору, і кольору перестали вірити. */ .xd-recon { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); } @media (max-width: 760px) { .xd-recon { grid-template-columns: 1fr; } } .xd-recon > div { background: var(--bg-sunken); border-radius: var(--r-md); padding: 12px 15px; } .xd-recon .k { font-size: 11.5px; font-weight: 700; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--fg-muted); } .xd-recon .v { font-family: var(--font-num); font-size: 22px; font-weight: 800; color: var(--fg-strong); font-variant-numeric: tabular-nums; line-height: 1.2; } .xd-recon .s { font-size: 11.5px; color: var(--fg-muted); margin-top: 2px; } .xd-recon .bad { background: var(--neg-bg); } .xd-recon .bad .k, .xd-recon .bad .v { color: var(--neg); } .xd-ftabs { display: flex; gap: 4px; background: var(--bg-sunken); padding: 3px; border-radius: var(--r-full); font-size: 12px; font-weight: 700; flex-wrap: wrap; } .xd-ftabs span { padding: 6px 13px; border-radius: var(--r-full); color: var(--fg-muted); cursor: pointer; } .xd-ftabs span.on { background: var(--bg-surface); color: var(--fg-strong); box-shadow: var(--sh-1); } .xd-ftabs span.alarm { color: var(--neg); } .xd-ftabs span.alarm.on { color: var(--neg); } .xd-spine { display: grid; gap: 7px; } .xd-row { border: 1px solid var(--br-default); border-left: 3px solid var(--br-strong); border-radius: var(--r-md); background: var(--bg-surface); } .xd-row.ok { border-left-color: var(--pos); } .xd-row.need { border-left-color: var(--warn); } .xd-row.none { border-left-color: var(--neg); background: var(--neg-bg); } .xd-h { display: flex; align-items: center; gap: 12px; padding: 11px 13px; cursor: pointer; } .xd-h .caret { color: var(--fg-subtle); width: 12px; font-size: 11px; flex: 0 0 auto; } .xd-h .date { font-size: 12px; color: var(--fg-muted); width: 62px; flex: 0 0 auto; } .xd-h .sum { font-family: var(--font-num); font-weight: 800; width: 112px; text-align: right; flex: 0 0 auto; color: var(--fg-strong); font-variant-numeric: tabular-nums; } .xd-h .what { flex: 1; min-width: 0; font-size: 13.5px; color: var(--fg-default); } .xd-h .what .sub { font-size: 11.5px; color: var(--fg-muted); } .xd-note { font-size: 11.5px; color: var(--fg-muted); white-space: nowrap; flex: 0 0 auto; } .xd-st { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: var(--r-full); white-space: nowrap; flex: 0 0 auto; } .xd-st.ok { background: var(--pos-bg); color: var(--pos); } .xd-st.need { background: var(--warn-bg); color: var(--warn); } .xd-st.none { background: var(--neg); color: var(--ac-fg); } .xd-b { padding: 0 13px 13px 30px; border-top: 1px solid var(--br-subtle); } .xd-empty { font-size: 13px; color: var(--fg-muted); padding: 11px 0 2px; } .xd-addlbl { font-size: 11.5px; font-weight: 700; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--fg-muted); } .xd-pkts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; } @media (max-width: 1000px) { .xd-pkts { grid-template-columns: 1fr; } } .xd-pkt { border: 1px solid var(--br-default); border-radius: var(--r-md); padding: 11px; } .xd-pkt-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .xd-pkt-h .t { font-size: 12px; font-weight: 700; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--fg-muted); } .xd-grp { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); margin: 8px 0 4px; } .xd-slot-box { margin-bottom: 4px; } .xd-slot { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 9px; border-radius: var(--r-sm); background: var(--bg-sunken); } /* Форма посилання розкривається під слотом: у самому рядку для неї немає місця, а модалка заради одного поля — забагато. */ .xd-link { display: flex; align-items: center; gap: 6px; padding: 7px 9px 3px 32px; } .xd-link input { flex: 1; min-width: 0; font: inherit; font-size: 12.5px; padding: 7px 9px; color: var(--fg-strong); background: var(--bg-surface); border: 1px solid var(--br-control); border-radius: var(--r-sm); } .xd-link input:focus-visible { outline: 2px solid var(--ac-ring); outline-offset: 1px; } /* «завантажити» і «посилання» — рівноцінні способи, тож колір однаковий (правило кольору тут однаково програвало .xd-act за порядком у файлі). Розділяє їх крапка, інакше дві дії зливаються в одну фразу. */ .xd-act-alt::before { content: "·"; color: var(--fg-subtle); margin-right: 6px; } .xd-slot .nm { flex: 1; min-width: 0; } .xd-slot .nm .why { display: block; font-size: 11.5px; color: var(--fg-muted); } .xd-slot.miss { background: var(--neg-bg); border: 1px solid var(--neg); } .xd-slot.miss .nm { color: var(--neg); font-weight: 700; } .xd-slot.opt { background: transparent; border: 1px dashed var(--br-default); color: var(--fg-muted); } .xd-slot.skip { background: transparent; border: 1px solid var(--br-default); color: var(--fg-muted); } .xd-slot.skip .nm { text-decoration: line-through; } .xd-slot.link { background: var(--info-bg); } .xd-slot.link .nm, .xd-slot.link .nm .why { color: var(--info); } .xd-cb { width: 14px; height: 14px; accent-color: var(--ac); flex: 0 0 auto; cursor: pointer; } .xd-cb-sp { width: 14px; flex: 0 0 auto; } .xd-tag { font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 5px; border-radius: var(--r-sm); flex: 0 0 auto; } .xd-tag.req { background: var(--ac); color: var(--ac-fg); } .xd-tag.opt { border: 1px solid var(--br-control); color: var(--fg-muted); } .xd-files { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .xd-file { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; background: var(--bg-surface); border: 1px solid var(--br-default); border-radius: var(--r-full); padding: 2px 8px; } .xd-file a { color: var(--fg-strong); text-decoration: none; } .xd-file .x { color: var(--fg-muted); cursor: pointer; font-size: 11px; } .xd-act { font-size: 11.5px; font-weight: 700; color: var(--ac); white-space: nowrap; cursor: pointer; text-decoration: none; } .xd-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: var(--r-full); background: var(--bg-sunken); color: var(--fg-muted); white-space: nowrap; } .xd-chip.pos { background: var(--pos-bg); color: var(--pos); } .xd-chip.warn { background: var(--warn-bg); color: var(--warn); } .xd-chip.info { background: var(--info-bg); color: var(--info); } /* Обʼєднані транзакції: з чого склалась сума рядка. */ .xd-parts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; } .xd-part { display: inline-flex; align-items: baseline; gap: 7px; font-size: 12px; background: var(--bg-sunken); border-radius: var(--r-full); padding: 4px 11px; } .xd-part b { font-family: var(--font-num); color: var(--fg-strong); } .xd-part span { color: var(--fg-muted); } .xd-part .c { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .xd-attach { margin: 8px 0; border: 1px solid var(--br-default); border-radius: var(--r-md); padding: 9px 11px; } .xd-attach-h { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--fg-muted); margin-bottom: 7px; } .xd-attach-h .xd-act { margin-left: auto; } .xd-cand { display: flex; align-items: center; gap: 9px; font-size: 13px; padding: 6px 8px; border-radius: var(--r-sm); cursor: pointer; } .xd-cand:hover { background: var(--bg-sunken); } .xd-cand b { font-family: var(--font-num); color: var(--fg-strong); white-space: nowrap; } .xd-cand .d { font-size: 12px; color: var(--fg-muted); white-space: nowrap; } .xd-cand .c { flex: 1; min-width: 0; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .xd-shared-block { margin-top: 22px; padding-top: 16px; border-top: 2px solid var(--br-strong); } .xd-sh-h { font-family: var(--font-head); font-size: 16px; font-weight: 800; color: var(--fg-strong); } .xd-sh-s { font-size: 12.5px; color: var(--fg-muted); margin: 3px 0 12px; line-height: 1.5; } .xd-sh { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--br-default); border-radius: var(--r-md); margin-bottom: 6px; } .xd-sh .nm { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--fg-strong); } .xd-sh .nm .s { display: block; font-size: 11.5px; font-weight: 400; color: var(--fg-muted); } .xd-sh .nm .s a { color: var(--ac); } /* Хід оновлення виписки: крутилка плюс назва етапу. Без тексту незрозуміло, чи процес живий, — а він триває хвилини. */ .wd-progress { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: var(--bg-sunken); border-radius: var(--r-md); } .wd-progress-t { font-size: 13.5px; font-weight: 700; color: var(--fg-strong); } .wd-progress-s { font-size: 12px; color: var(--fg-muted); margin-top: 2px; } /* ── Ширина сторінки ────────────────────────────────────────────────────── MudContainer.Large давав 1280px і по боках лишалось вільне поле, через яке плитки зборів тиснули текст у два рядки. Ширину тримаємо тут, а не в компоненті: так її видно в одному місці разом з рештою розкладки. */ .mud-main-content .mud-container { max-width: 1460px; margin-inline: auto; padding-left: 20px; padding-right: 20px; } @media (max-width: 599px) { .mud-main-content .mud-container { padding-left: 12px; padding-right: 12px; } } /* ── Кольори статусів збору ──────────────────────────────────────────────── Яскраві й напівпрозорі, щоб плашка «лежала» на обкладинці, а не забивала її. Колір тексту не однаковий: на світлому фоні (зелений, янтарний) — темний, на темному (сірий, червоний) — білий. Інакше напівпрозорість з'їдає контраст. Кольори однакові в обох темах: плашка лежить на зображенні, а зображення від теми не залежить. */ .status-active, .cv-open { background: rgba(39,174,122,.88); color: #021A0F; } .status-reg-closed, .cv-regclosed { background: rgba(240,185,40,.88); color: #2B2100; } .status-closed, .cv-closed { background: rgba(20,20,20,.62); color: #F0F0F0; } .status-draft, .cv-draft { background: rgba(195,48,31,.92); color: #FFFFFF; } /* ── Фільтри-перемикачі (сторінки «Збори» та «Instagram») ───────────────── Спільний клас замість .ig-type-chip, який належав Instagram і приїхав на «Збори» лише тому, що спільного чипа не існувало. Логіка: типово не вибрано нічого — усі чипи сірі, показано все. Клік робить чип чорним і звужує перелік до вибраного; кліків може бути кілька. Повторний клік знімає вибір; коли знято все — знову показано все. */ .status-filters { display: flex; gap: 6px; flex-wrap: wrap; } .status-filter { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--br-default); background: var(--bg-sunken); color: var(--fg-default); border-radius: 9px; padding: 7px 11px; font-size:15px; font-weight: 700; line-height: 1; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .status-filter:hover { border-color: var(--br-control); } .status-filter:focus-visible { outline: 2px solid var(--ac-ring); outline-offset: 2px; } .status-filter .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; } .status-filter .n { font-size:13px; font-weight: 800; background: var(--bg-surface); color: var(--fg-strong); border-radius: 20px; padding: 2px 7px; min-width: 20px; text-align: center; } /* Вибраний статус — чорна плашка (в темній темі теж чорна: --hero-bg). Нічого не вибрано = показуємо все; вибір звужує перелік до вибраного. */ .status-filter.is-active { /* Межа обов'язкова: у темній темі чорна плашка на чорному полотні інакше не відчитується як окремий елемент. */ background: var(--hero-bg); border-color: var(--br-strong); color: var(--ondark-fg); } .status-filter.is-active .n { background: rgba(255,255,255,.16); color: var(--ondark-fg); } .status-filter.is-active .dot { box-shadow: 0 0 0 1px rgba(255,255,255,.35); } /* Крапки статусів (кольори ті самі, що на плашках плиток). */ .status-filter.sf-open .dot { background: #27AE7A; } .status-filter.sf-draft .dot { background: #C3301F; } .status-filter.sf-registration_closed .dot { background: #F0B928; } .status-filter.sf-closed .dot { background: #9CA3AF; } /* ── Цифри ──────────────────────────────────────────────────────────────── Суми й кількості — накресленням Bold і табличними цифрами, щоб колонки вирівнювались по вертикалі. Праворуч вирівняні комірки в наших таблицях завжди числові — на них і орієнтуємось. */ .mud-table-cell[style*="text-align:right"], .mud-table-cell[style*="text-align: right"], .participants-table td.p-amount, .ig-help-table td:last-child { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; } /* ── Рядок «Зібрано» на картці збору ────────────────────────────────────── Значення не переносимо ніколи: воно і є те, заради чого дивляться картку. Якщо місця бракує — скорочується підпис, а не сума. */ .collected-head { gap: 10px; } .collected-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .collected-val { white-space: nowrap; flex: 0 0 auto; } /* ── Сторінка «Партнери» в темній темі ──────────────────────────────────── Статуси там задані світлими плашками під світлу тему. На чорному вони перетягували увагу на себе, а назви подій (темно-синій, темно-зелений) майже зливалися з фоном. Тон кожного статусу зберігаємо, міняємо лише світлоту: фон стає глибоким, текст — світлим відтінком того самого тону. */ html[data-theme="dark"] .ps-warm { background:#2A1E10; color:#E2B473; } html[data-theme="dark"] .ps-cold { background:#14202B; color:#93B8D6; } html[data-theme="dark"] .is-planned { background:#1B1E24; color:#A8B3C4; } html[data-theme="dark"] .is-active { background:#141B2E; color:#93B0F0; } html[data-theme="dark"] .is-done { background:#12241A; color:#86C79E; } html[data-theme="dark"] .is-report { background:#1E1630; color:#B69BF0; } html[data-theme="dark"] .is-progress { background:#241C0D; color:#DCB067; } html[data-theme="dark"] .is-refused { background:#281414; color:#E89A9A; } html[data-theme="dark"] .it-onetime { background:#1F1F22; color:#B4B4BC; } html[data-theme="dark"] .it-ongoing { background:#141A2E; color:#9DB2EE; } html[data-theme="dark"] .p-tag { background:#1E1E1E; color:#E5E5E5; } html[data-theme="dark"] .p-link { color:#93B0F0; } /* Назви подій: ті самі тони, але світлі — інакше на чорному не читаються. */ html[data-theme="dark"] .evtx-planned { color:#A8B3C4; } html[data-theme="dark"] .evtx-active { color:#93B0F0; } html[data-theme="dark"] .evtx-done { color:#86C79E; } html[data-theme="dark"] .evtx-report { color:#B69BF0; } html[data-theme="dark"] .evtx-progress { color:#DCB067; } html[data-theme="dark"] .evtx-refused { color:#E89A9A; } /* Інлайн-селект статусу: у темній темі бракувало межі, плашка «висіла». */ html[data-theme="dark"] .ist-select { border-color: var(--br-strong); } /* ── Дії у вікні швидкого перегляду ─────────────────────────────────────── Один рядок: CSV · оновити банки · оновити головну · детальніше. Якщо не вміщається — горизонтальна прокрутка, а не перенесення: так порядок дій лишається сталим і кнопка «Детальніше» завжди крайня. */ .detail-footer .df-right { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; } .detail-footer .df-right .mud-button-root { flex: 0 0 auto; white-space: nowrap; } @media (max-width: 599px) { .detail-footer { flex-direction: column; align-items: stretch; } } /* ── Текстові поля ростуть під вміст ────────────────────────────────────── field-sizing прибирає внутрішню прокрутку: поле стає рівно такої висоти, якої треба тексту. Для браузерів без нього лишається resize:vertical, тобто гірший, але робочий варіант — руками. */ textarea, .mud-input-slot textarea, .cvp-tags-box { field-sizing: content; overflow-y: hidden; resize: vertical; } /* rows= лишається як початкова висота; далі поле росте саме. */ .events-row { cursor: pointer; } /* Межа у primary-кнопки темної теми: без неї #2E2E2E на #121212 читається як пляма, а не як кнопка. */ html[data-theme="dark"] .mud-button-filled-primary { box-shadow: inset 0 0 0 1px var(--br-strong); } /* ── Плитки зборів на світлій темі ───────────────────────────────────────── Біла картка (#FFFFFF) на полотні #F5F5F5 різниться лише на 10 одиниць яскравості, тож базової тіні в 1px не видно і плитки зливаються з фоном. Даємо на крок більшу тінь у спокої і виразнішу на hover. У темній темі навмисно лишаємо як є: там картка відділяється власною світлотою (#121212 на #000000), а більша тінь на чорному лише замулює край, нічого не додаючи. */ html:not([data-theme="dark"]) .campaign-card { box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 8px 20px rgba(0,0,0,.09); } html:not([data-theme="dark"]) .campaign-card:hover { box-shadow: 0 4px 8px rgba(0,0,0,.07), 0 14px 32px rgba(0,0,0,.15); } /* ══ Обписування (сторінка «Команди») ══════════════════════════════════════ Два потоки на одній сторінці: менторів кличемо вести команду (дошка за статусом — їх небагато, важливо бачити, скільки команд узагалі доступно), тиловиків — долучитись до команди (акордеон по менторах). ══════════════════════════════════════════════════════════════════════════ */ .ob-bar { display:flex; gap:18px; align-items:flex-end; flex-wrap:wrap; background:var(--bg-surface); border:1px solid var(--br-default); border-radius:var(--r-lg); padding:14px 16px; } .ob-field { display:flex; flex-direction:column; gap:5px; } .ob-field > span { font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-muted); } .ob-field select { font:inherit; font-size:15px; color:var(--fg-strong); background:var(--bg-surface); border:1px solid var(--br-control); border-radius:var(--r-md); padding:0 10px; min-height:38px; min-width:240px; cursor:pointer; } .ob-progress { flex:1 1 220px; min-width:200px; } .ob-progress-head { display:flex; justify-content:space-between; font-size:13px; color:var(--fg-muted); font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-bottom:5px; } .ob-progress-v { color:var(--fg-strong); font-variant-numeric:tabular-nums; } .ob-tabn { font-size:12px; font-weight:800; background:var(--bg-sunken); color:var(--fg-strong); border-radius:var(--r-full); padding:1px 8px; margin-left:7px; } .ptab-active .ob-tabn { background:rgba(255,255,255,.18); color:var(--on-invert); } /* ── Контакти й статуси ── */ .ob-link { color:var(--fg-strong); font-weight:700; font-size:14px; text-decoration:none; border-bottom:1px solid var(--br-control); margin-right:9px; } .ob-link:hover { border-color:var(--fg-strong); } /* --fg-subtle на 14px дає ~3.4:1 — для тексту замало, тому --fg-muted. */ .ob-none { color:var(--fg-muted); font-size:14px; margin-right:9px; } .ob { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; padding:3px 9px; border-radius:var(--r-full); white-space:nowrap; } .ob::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; } .ob-neutral { background:var(--bg-sunken); color:var(--fg-muted); box-shadow:inset 0 0 0 1px var(--br-default); } .ob-info { background:var(--info-bg); color:var(--info); box-shadow:inset 0 0 0 1px var(--info); } .ob-pos { background:var(--pos-bg); color:var(--pos); box-shadow:inset 0 0 0 1px var(--pos); } .ob-neg { background:var(--neg-bg); color:var(--neg); box-shadow:inset 0 0 0 1px var(--neg); } .ob-dup, .ob-wr { font-size:12px; font-weight:700; color:var(--warn); background:var(--warn-bg); border-radius:var(--r-full); padding:2px 8px; margin-left:7px; white-space:nowrap; } .ob-pick { font:inherit; font-size:14px; font-weight:600; padding:5px 9px; cursor:pointer; border:1px solid var(--br-control); background:var(--bg-surface); color:var(--fg-default); border-radius:var(--r-md); } .ob-pick.is-on { background:var(--hero-bg); border-color:var(--hero-bg); color:var(--ondark-fg); } /* ── Акордеон по менторах (тиловики) ── */ .ob-acc { background:var(--bg-surface); border:1px solid var(--br-default); border-radius:var(--r-lg); margin-bottom:10px; overflow:hidden; } .ob-acc > summary { display:flex; align-items:center; gap:12px; cursor:pointer; padding:13px 16px; list-style:none; } .ob-acc > summary::-webkit-details-marker { display:none; } .ob-acc > summary:hover { background:var(--bg-sunken); } .ob-acc[open] > summary { border-bottom:1px solid var(--br-default); } .ob-acc-name { font-size:16px; font-weight:700; color:var(--fg-strong); } .ob-acc-teams { font-size:14px; color:var(--fg-muted); } .ob-acc-count { margin-left:auto; font-size:15px; font-weight:700; color:var(--fg-strong); font-variant-numeric:tabular-nums; } .ob-acc .participants-table { margin:0; } .ob-acc .participants-table th { background:var(--bg-sunken); } /* ── Дошка за статусом (ментори) ── */ .ob-board { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; } .ob-col { background:var(--bg-sunken); border:1px solid var(--br-default); border-radius:var(--r-lg); padding:10px; min-width:0; } .ob-col-head { display:flex; justify-content:space-between; align-items:center; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--fg-muted); margin-bottom:9px; } .ob-col-n { color:var(--fg-strong); font-variant-numeric:tabular-nums; } .ob-card { background:var(--bg-surface); border:1px solid var(--br-default); border-radius:var(--r-md); padding:10px 11px; margin-bottom:8px; } .ob-card-n { font-size:15px; font-weight:700; color:var(--fg-strong); } /* Відступ від імені: рядок із назвами команд, який раніше їх розділяв, прибрано. */ .ob-card-c { font-size:13px; color:var(--fg-muted); margin-top:3px; } .ob-card-by { font-size:12px; color:var(--fg-muted); margin-top:4px; } .ob-card-f { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:9px; flex-wrap:wrap; } .ob-col-empty { font-size:14px; color:var(--fg-muted); padding:8px 2px; } @media (max-width: 1100px) { .ob-board { grid-template-columns:repeat(2, minmax(0,1fr)); } } @media (max-width: 599px) { .ob-board { grid-template-columns:1fr; } } /* ── Форма довідника «Команда Опори» ─────────────────────────────────────── Ширша за типову модалку: полів багато, і у дві колонки вони читаються як одна картка людини, а не як довгий стовпчик. */ /* box-sizing обов'язковий: .modal-card має padding 24px, і без нього фактична ширина стає 860+48, тож на вузькому екрані форма вилазить. */ .ot-form { box-sizing: border-box; width: min(880px, calc(100vw - 32px)); max-width: none; } /* Вибір людини, яка вже є в системі */ .ot-pick { background: var(--bg-sunken); border: 1px solid var(--br-default); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 16px; } .ot-pick-label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 700; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .05em; } .ot-pick-label input { font: inherit; font-size: 15px; text-transform: none; letter-spacing: normal; font-weight: 400; color: var(--fg-strong); background: var(--bg-surface); border: 1px solid var(--br-control); border-radius: var(--r-md); padding: 0 11px; min-height: 38px; } .ot-pick-note { font-size: 13px; color: var(--fg-muted); margin-top: 8px; } .ot-linked { background: var(--info-bg); color: var(--info); border-radius: var(--r-md); padding: 8px 12px; margin: 0 0 14px; } .ot-pick-list { display: flex; flex-direction: column; gap: 4px; margin-top: 9px; max-height: 240px; overflow-y: auto; } .ot-cand { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; text-align: left; font: inherit; cursor: pointer; padding: 8px 11px; border-radius: var(--r-sm); border: 1px solid var(--br-default); background: var(--bg-surface); color: var(--fg-default); } .ot-cand:hover:not(:disabled) { border-color: var(--br-control); background: var(--bg-sunken); } .ot-cand:disabled { opacity: .55; cursor: not-allowed; } .ot-cand-n { font-size: 15px; font-weight: 700; color: var(--fg-strong); } .ot-cand-c { font-size: 13px; color: var(--fg-muted); } .ot-cand-in { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--warn); background: var(--warn-bg); border-radius: var(--r-full); padding: 2px 8px; } /* ── Вибір гостей події за іменем ────────────────────────────────────────── Той самий підбір «людини з системи», що й у довіднику команди, але з накопиченням вибору: гостей шукають по одному, а видають пачкою. */ .gp-pick { background: var(--bg-sunken); border: 1px solid var(--br-default); border-radius: var(--r-md); padding: 12px 14px; } .gp-label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 700; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .05em; } .gp-label input { font: inherit; font-size: 15px; text-transform: none; letter-spacing: normal; font-weight: 400; color: var(--fg-strong); background: var(--bg-surface); border: 1px solid var(--br-control); border-radius: var(--r-md); padding: 0 11px; min-height: 38px; } .gp-note { font-size: 13px; color: var(--fg-muted); margin-top: 8px; } .gp-list { display: flex; flex-direction: column; gap: 4px; margin-top: 9px; max-height: 300px; overflow-y: auto; } .gp-item { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; text-align: left; font: inherit; cursor: pointer; padding: 8px 11px; border-radius: var(--r-sm); border: 1px solid var(--br-default); background: var(--bg-surface); color: var(--fg-default); } .gp-item:hover:not(:disabled) { border-color: var(--br-control); background: var(--bg-sunken); } .gp-item:disabled { opacity: .55; cursor: not-allowed; } .gp-item.gp-on { border-color: var(--pos); box-shadow: inset 3px 0 0 var(--pos); } .gp-name { font-size: 15px; font-weight: 700; color: var(--fg-strong); } .gp-meta { font-size: 13px; color: var(--fg-muted); } .gp-tag { margin-left: auto; font-size: 12px; font-weight: 700; border-radius: var(--r-full); padding: 2px 8px; } .gp-tag-warn { color: var(--warn); background: var(--warn-bg); } .gp-tag-on { color: var(--pos); background: var(--pos-bg); } /* Обрані — чипами, щоб було видно вибір, зібраний із кількох пошуків */ .gp-chosen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .gp-chip { font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-full); border: 1px solid var(--br-control); background: var(--bg-surface); color: var(--fg-strong); } .gp-chip:hover { background: var(--bg-sunken); } .gp-chip-x { font-size: 15px; line-height: 1; color: var(--fg-muted); } /* ── Перетягування карток на дошці менторів ──────────────────────────────── Колонка і є статус, тож окремої випадайки на картці не треба. */ .ob-board .ob-card { cursor: grab; } .ob-board .ob-card:active { cursor: grabbing; } .ob-board .ob-card:focus-visible { outline: 2px solid var(--ac-ring); outline-offset: 2px; } .ob-board .ob-card.is-dragging { opacity: .45; } /* Колонка під курсором підсвічується — інакше не зрозуміло, куди саме впаде картка. */ .ob-col.is-drop { border-color: var(--ac); box-shadow: inset 0 0 0 1px var(--ac); } .ob-grip { color: var(--fg-subtle); font-size: 15px; line-height: 1; cursor: grab; user-select: none; } /* Другорядний підпис поруч з основним текстом (назва команди, відділення пошти). Власний клас, а не .p-type зі стилів сторінки «Партнери»: ті живуть в inline-