/* ═══════════════════════════════════════════════════════════════ DESIGN LAB v3 — admin-only theme-switcher поверх живого порталу. Атрибути на : data-dlab="on" (майстер) + data-dlab-<параметр>. Пише js/design-lab.js, зберігає localStorage('dlab'). Вимкнено = нуль впливу. Headerless прийнято — діє при увімкненій лабі. Видалити після фіналізації: цей файл + js/design-lab.js + 2 рядки в index.html. ═══════════════════════════════════════════════════════════════ */ /* ── База: змінні лаби (дефолти = «як зараз») ── */ :root[data-dlab="on"] { --dlab-sidebg: rgba(15, 23, 42, .95); --dlab-sideline: rgba(255,255,255,.10); --dlab-tile: var(--glass); --dlab-tile-l: rgba(255,255,255,.10); --dlab-tile-d: rgba(2, 6, 14, .55); --dlab-glass-ink: 255,255,255; /* «чорнило» скляних плиток; світлі теми інвертують */ --dlab-tile-b: var(--dlab-tile); /* плитки ВЗАЄМОРОЗРАХУНКІВ — окрема вісь (р.19): суцільна заливка таблиці просить темніших варіантів, ніж картки замовлень */ --dlab-joint-r: 16px; --dlab-joint-gap: 10px; } /* ── ТЕМА V1 «Поглиблення» ── */ :root[data-dlab-theme="v1"] { --bg-secondary: #0f1526; --bg-tertiary: #1c2a44; --glass: #121a2e; --glass-hover: #182543; --surface: #0f1526; --border: rgba(255,255,255,.10); --border-light: rgba(255,255,255,.14); --dlab-sidebg: #070c17; --dlab-sideline: rgba(255,255,255,.06); --dlab-tile: #121a2e; --dlab-tile-l: #1a2440; --dlab-tile-d: #0c1220; } /* ── ТЕМА V2 «Чорнило» ── */ :root[data-dlab-theme="v2"] { --bg-primary: #070a13; --bg-secondary: #0a101d; --bg-tertiary: #17233c; --glass: #0d1424; --glass-hover: #131c31; --surface: #0a101d; --border: rgba(255,255,255,.08); --border-light: rgba(255,255,255,.12); --dlab-sidebg: #05070e; --dlab-sideline: rgba(255,255,255,.05); --dlab-tile: #0d1424; --dlab-tile-l: #14203a; --dlab-tile-d: #070d1a; } :root[data-dlab-theme="v2"] body::before { background: none; } /* ── ТЕМА D3 «Латунь» (раунд 7, референс Івана: Flash Form — теплий графіт + пісочно-золотий акцент, кремовий текст) ── */ :root[data-dlab-theme="d3"] { --bg-primary: #101117; --bg-secondary: #16171e; --bg-tertiary: #23242f; --glass: #171821; --glass-hover: #1d1f2a; --surface: #131420; --border: rgba(226,201,158,.10); --border-light: rgba(226,201,158,.18); --text-primary: #ece7dc; --text-secondary:#b3ab9b; --text-tertiary: #7d7768; --primary: #c9a06a; --primary-dark: #a97f45; --primary-light: #d9b075; --accent: #d9b075; --secondary: #d9b075; --dlab-sidebg: #0d0e13; --dlab-sideline: rgba(226,201,158,.08); --dlab-tile: #171821; --dlab-tile-l: #1d1f2b; --dlab-tile-d: #111218; --dlab-glass-ink: 226,201,158; --dlab-glow-ink: 217,176,117; /* triplet для сяйва/тіней — тюнінг-осі його крутять */ } :root[data-dlab-theme="d3"] body::before { background: radial-gradient(ellipse at 25% 0%, rgba(var(--dlab-glow-ink), .05) 0%, transparent 45%); } :root[data-dlab-theme="d3"] .btn-primary { color: #1c1206; } :root[data-dlab-theme="d3"] #balance-section { --bp-bg: #101117; --bp-panel: #171821; --bp-panel-2: #131420; --bp-line: rgba(226,201,158,.07); --bp-line-strong: rgba(226,201,158,.13); --bp-text-1: #ece7dc; --bp-text-2: #cfc8b8; --bp-text-3: #a29a88; --bp-text-4: #746e60; --bp-emerald: #d9b075; --bp-emerald-deep: #c9a06a; } :root[data-dlab-theme="d3"] #balance-section #balance-request-submit { color: #1c1206; background: linear-gradient(180deg, var(--primary-light), var(--primary) 55%, var(--primary-dark)); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 14px -2px rgba(var(--dlab-glow-ink), .35); } :root[data-dlab-theme="d3"] #balance-section #balance-request-submit i { color: #1c1206; } /* ── ТЕМА OLIVE «Олива» ── портована зі slate-теми prom-chat: сланцева база + оливковий акцент #94a94f / світліше #b9cb72; борди нейтрально-сланцеві, щоб олива грала лише акцентом. Гроші/успіх поки теж оливкові (тюнінг р. далі). */ :root[data-dlab-theme="olive"] { --bg-primary: #0f1216; --bg-secondary: #151a20; --bg-tertiary: #1e252d; --glass: #171d24; --glass-hover: #1e252d; --surface: #12171d; --border: rgba(176,190,205,.09); --border-light: rgba(176,190,205,.16); --text-primary: #e8ecf1; --text-secondary:#94a2b0; --text-tertiary: #6b7885; --primary: #94a94f; --primary-dark: #7c9040; --primary-light: #b9cb72; --accent: #b9cb72; --secondary: #b9cb72; --dlab-sidebg: #12161c; --dlab-sideline: rgba(176,190,205,.08); --dlab-tile: #171d24; --dlab-tile-l: #1e252d; --dlab-tile-d: #12161c; --dlab-glass-ink: 232,236,241; --dlab-glow-ink: 148,169,79; } :root[data-dlab-theme="olive"] body::before { background: radial-gradient(ellipse at 25% 0%, rgba(var(--dlab-glow-ink), .05) 0%, transparent 45%); } :root[data-dlab-theme="olive"] .btn-primary { color: #16200a; } :root[data-dlab-theme="olive"] #balance-section { --bp-bg: #0f1216; --bp-panel: #171d24; --bp-panel-2: #12171d; --bp-line: rgba(176,190,205,.07); --bp-line-strong: rgba(176,190,205,.13); --bp-text-1: #e8ecf1; --bp-text-2: #c3ccd6; --bp-text-3: #94a2b0; --bp-text-4: #6b7885; --bp-emerald: #b9cb72; --bp-emerald-deep: #94a94f; } :root[data-dlab-theme="olive"] #balance-section #balance-request-submit { color: #16200a; background: linear-gradient(180deg, var(--primary-light), var(--primary) 55%, var(--primary-dark)); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 6px 14px -2px rgba(var(--dlab-glow-ink), .3); } :root[data-dlab-theme="olive"] #balance-section #balance-request-submit i { color: #16200a; } /* Олива: модалки Накладна / взаєморозрахунок + поповери мають ВЛАСНІ локальні токени (радіал-фон + індиго-активи) — :root-override їх не дістає (пітфол №1). Темізуємо поіменно, як d3. */ :root[data-dlab-theme="olive"] .ttn-modal-content { background: radial-gradient(ellipse at 15% 10%, rgba(var(--dlab-glow-ink), .09) 0%, transparent 55%), radial-gradient(ellipse at 85% 5%, rgba(var(--dlab-glow-ink), .05) 0%, transparent 50%), #12161c; border-color: rgba(var(--dlab-glow-ink), .14); } :root[data-dlab-theme="olive"] .ttn-modal-ttn:hover { background: rgba(var(--dlab-glow-ink), .12); } :root[data-dlab-theme="olive"] .bp-modal { --bp-emerald: #94a94f; --bp-emerald-deep: #7c9040; --bp-amber: #d9b25a; --bp-rose: #e08d8d; --bp-text-1: #e8ecf1; --bp-text-2: #c3ccd6; --bp-text-3: #94a2b0; --bp-text-4: #6b7885; --bp-line: rgba(176,190,205,.07); --bp-line-strong: rgba(176,190,205,.13); background: linear-gradient(180deg, #171d24, #12161c); box-shadow: 0 40px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(148,169,79,.1); } :root[data-dlab-theme="olive"] .bp-payout-hero { background: linear-gradient(135deg, rgba(148,169,79,.12) 0%, rgba(124,144,64,.05) 55%, rgba(148,169,79,.14) 100%); } :root[data-dlab-theme="olive"] :is(.balance-pop, .balance-pop-ttn, .balance-pop-hist) { --bp-emerald: #94a94f; --bp-amber: #d9b25a; --bp-rose: #e08d8d; --bp-text-1: #e8ecf1; --bp-text-2: #c3ccd6; --bp-text-3: #94a2b0; --bp-text-4: #6b7885; --bp-line: rgba(176,190,205,.07); --bp-line-strong: rgba(176,190,205,.13); background: #14181e; border-color: rgba(176,190,205,.16); } /* ── СВІТЛІ ТЕМИ (раунд 6) ── L1 «Світла» — світлий контент + ТЕМНИЙ сайдбар (контраст, identity живе) L2 «Світла+» — повністю світла, сайдбар світло-сірий Спільні токени: */ /* Раунд 8: донор — CRM glass-тема (src/crm/assets/css/theme.css): white/mint/lavender, СПРАВЖНЄ скло (blur+saturate), білі рамки, блакитнуваті тіні rgba(40,60,110), dot-grid поверх. */ :root[data-dlab-theme="l1"], :root[data-dlab-theme="l2"] { --bg-primary: #f5f7fb; --bg-secondary: #eaeef7; --bg-tertiary: #dde4f1; --glass: rgba(255,255,255,.58); --glass-hover: rgba(255,255,255,.75); --surface: rgba(255,255,255,.35); --border: rgba(150,165,200,.28); --border-light: rgba(150,165,200,.42); --text-primary: #1f2433; --text-secondary:#4a5168; --text-tertiary: #7a829a; --dlab-tile: rgba(255,255,255,.58); --dlab-tile-l: rgba(255,255,255,.78); --dlab-tile-d: rgba(255,255,255,.38); --dlab-glass-ink: 255,255,255; /* скло на кольоровому фоні — біле, як у донора */ } /* ── ТЕМА OLIVEL «Олива світла» ── світлий вивід оливи: тепло-білий фон, темно-оливковий текст, ЗАТЕМНЕНИЙ оливковий акцент для контрасту на світлому. Переиспользує світлу машинерію l1/l2 (скло, dot-grid, компоненти, модалки) — id доданий у їхні :is-списки нижче. Свій блок токенів = свій колір. */ :root[data-dlab-theme="olivel"] { --bg-primary: #f4f6ee; --bg-secondary: #eaeee0; --bg-tertiary: #dde3cf; --glass: rgba(255,255,255,.60); --glass-hover: rgba(255,255,255,.78); --surface: rgba(255,255,255,.38); --border: rgba(120,135,90,.28); --border-light: rgba(120,135,90,.42); --text-primary: #262b1c; --text-secondary:#525a41; --text-tertiary: #7c8568; --primary: #5f7326; --primary-dark: #4c5d1e; --primary-light: #5f7326; /* р.37: було #7c9040 — надто світлий хакі на білому; глибока олива для контенту (ціна/сума/ОПЛАЧЕНО/лого) */ --accent: #6b7f2f; --secondary: #6b7f2f; --success: #5f7326; /* olivel не задавала --success → у статуси протікав базовий емеральд #10b981 (не-оливковий) */ --dlab-tile: rgba(255,255,255,.60); --dlab-tile-l: rgba(255,255,255,.80); --dlab-tile-d: rgba(255,255,255,.40); --dlab-glass-ink: 255,255,255; --dlab-sidebg: rgba(255,255,255,.62); --dlab-sideline: rgba(120,135,90,.22); } :root[data-dlab-theme="olivel"] .btn-primary { color: #ffffff; } /* світлий скляний сайдбар (як l2), олив-тінт — інакше лого/текст на темній базі гасли */ :root[data-dlab-theme="olivel"] .sidebar { backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); box-shadow: 4px 0 24px rgba(80,90,50,.08); } :root[data-dlab-theme="olivel"] .nav-item.active { background: rgba(95,115,38,.10); } /* «Не оплачено» бейдж — #fbbf24 вицвітав на світлому; темніший бурштин для світлих тем */ :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .not-paid-badge { color: #b45309; background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.38); } /* іконки служб доставки — opacity:.5 гасне на світлому фоні */ :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .carrier-icon-svg { opacity: .9; } /* попап рейтингу клієнта (.promo-badge-tooltip) — на світлому був блідий (--bg-secondary + важка чорна тінь) → чисте біле скло + легша тінь */ :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .promo-badge-tooltip { background: rgba(255,255,255,.93); border-color: rgba(150,165,200,.32); box-shadow: 0 12px 32px rgba(40,60,110,.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* Атмосфера донора: кольорові радіали (м'ята/лаванда/блакить) + dot-grid */ :root:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) body { background: radial-gradient(ellipse 60% 50% at 18% 10%, #d6f5ee 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 82% 12%, #e6e0fa 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 50% 100%, rgba(180,220,255,.45) 0%, transparent 65%), var(--bg-primary); background-attachment: fixed; } :root:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) body::before { background-image: radial-gradient(rgba(120,140,180,.06) 1px, transparent 1px); background-size: 22px 22px; } /* Плитки = скло донора: blur+saturate, біла рамка, тінь + inset-підсвітка */ :root:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) :is( .order-card, .review-card, .diag-summary-card, .diag-category, .profile-card, .balance-metric, .balance-table, #balance-section .balance-table, .products-table tbody tr, .ds-card, .tpl-card, .tpl-vars, .intg-card, .intg-card2, .np-section, .product-params-section ) { backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border-color: rgba(255,255,255,.85); box-shadow: 0 12px 40px rgba(40,60,110,.12), inset 0 1px 0 rgba(255,255,255,.6); } /* NP-налаштування: селекти/інпути всередині секцій були темними на світлі */ :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .np-section :is(select, input[type="text"], input[type="number"], input[type="password"]) { background: rgba(255,255,255,.85); border-color: rgba(150,165,200,.4); color: var(--text-primary); } /* L1: темний сайдбар — ЛОКАЛЬНО повертаємо йому світлі text-токени, тому вся начинка (nav, dlab-блоки) лишається читабельною */ :root[data-dlab-theme="l1"] { --dlab-sidebg: #0b1120; --dlab-sideline: rgba(255,255,255,.08); } :root[data-dlab-theme="l1"] .sidebar { --text-primary: #f1f5f9; --text-secondary:#94a3b8; --text-tertiary: #64748b; --border: rgba(255,255,255,.10); } /* L2: сайдбар — СКЛО донора (напівпрозорий білий + blur над кольоровим фоном), тінь на грані; глибші emerald-акценти для контрасту */ :root[data-dlab-theme="l2"] { --dlab-sidebg: rgba(255,255,255,.62); --dlab-sideline: rgba(150,165,200,.25); } :root[data-dlab-theme="l2"] .sidebar { backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); box-shadow: 4px 0 24px rgba(40,60,110,.08); } /* р.37: у світлих темах зелений акцент КОНТЕНТУ (ціна, «Всього», бейдж ОПЛАЧЕНО, «Додано в Prom», ховер №, лого, рейтинг «викуп») успадковував базові дарк-токени (#34d399 / #10b981) — задиктовано під ТЕМНИЙ фон, на білому «надто світлий». Сайдбар при цьому вже фарбувався насиченим #059669 → два різні зелені. Зводимо кожну тему до ОДНОГО зеленого (root, каскадує і в контент, і в сайдбар): l1/l2 — емеральд #059669 (той самий «гарний» із сайдбара); olivel — глибока олива (у своєму блоці токенів). */ :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"]) { --primary: #059669; --primary-light: #059669; --success: #059669; } /* ══ р.37 доводка світлих: кнопки / кути таблиці товарів / статуси відміни ══ */ /* A. Кнопки. Базовий --accent = бірюза #06b6d4 (палітра ТЕМНОЇ теми) протікала у КНОПКИ поряд із зеленою «Зберегти»: IBAN-тоглер (.balance-tab.active фарбується --accent) був бірюзовим, а правий стоп градієнта .btn-primary — теж бірюза. Робимо кнопки суцільно зеленими. --accent глобально НЕ чіпаємо: він ще потрібен семантиці (крапка «в дорозі» .tone-ship::before). olivel уже має оливковий --accent — не в списку. */ :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"]) #settings-banking-section .balance-tab.active { background: var(--primary); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"]) .btn-primary { background: linear-gradient(135deg, var(--primary), #047857); } /* B. «Уголочки» на товарах. .products-table = border-collapse:separate; заокруглення живе на td:first/last-child, а скляний box-shadow глас-блоку висить на . Тінь рядка малюється по КВАДРАТНІй bounding-box (inset-хайлайт особливо) → з-під заокруглених рядків-карток стирчать квадратні кути. Прибираємо тінь (скло тримає backdrop-filter), а контур повертаємо бордюром на клітинках — він слухає border-radius td, кути чисті. #products-section — щоб перебити специфічність (1,3,1) глас-блоку (його :is() позичив ID-вагу від #balance-section .balance-table). */ :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) #products-section .products-table tbody tr { box-shadow: none; } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) #products-section .products-table tbody td { border-color: rgba(100,116,139,.22); } /* C. Статуси відміни. Текст #fca5a5 (світла троянда) задиктований під ТЕМНИЙ фон — на світлому вицвітає й нечитабельний. Насичений червоний #dc2626 для легібельності. */ :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) :is( .status-dropdown-item.cancel-item, .order-status.canceled, .order-status.status-canceled, .client-canceled-badge ) { color: #dc2626; } :root[data-dlab-theme="l2"] .nav-item.active { background: rgba(5,150,105,.09); } /* bp-сторінка (Взаєморозрахунки) — переозначаємо її власні токени (панелі = напівпрозоре біле скло донора) */ :root:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) #balance-section { --bp-bg: #f5f7fb; --bp-panel: rgba(255,255,255,.72); --bp-panel-2: rgba(255,255,255,.5); --bp-line: rgba(150,165,200,.2); --bp-line-strong: rgba(150,165,200,.35); --bp-text-1: #1f2433; --bp-text-2: #39415a; --bp-text-3: #5d6785; --bp-text-4: #8a92a8; --bp-emerald: #059669; --bp-emerald-deep: #047857; --bp-amber: #b45309; --bp-cyan: #0e7490; --bp-rose: #be123c; --bp-slate: #64748b; } /* світлі hover'и замість темних хардкодів */ :root:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .products-table tbody tr:hover { background: #f0f4fb; } :root:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .order-card { background: var(--dlab-tile); } /* приклеєна плашка на світлому — біла панель, не темний градієнт */ :root:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"])[data-dlab-selbar="flush"] #balance-section .balance-selection-bar { background: rgba(255,255,255,.97); border-top: 1px solid rgba(15,23,42,.12); box-shadow: 0 -12px 30px rgba(15,23,42,.10); } /* ══ Раунд 9: «інверсія» світлої — темні ХАРДКОДИ компонентів bp-сторінки, фейсліфт-інпутів, шаблонів і самовивозу. Перекриваємо пакетом. ══ */ /* таби / пошук / дейтпікер / чипи — були rgba(10,14,26,.5–.7) */ :root:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) #balance-section .balance-tabs { background: rgba(255,255,255,.6); border-color: rgba(150,165,200,.3); } :root:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) #balance-section #balance-search-input, :root:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) #balance-section .balance-date-wrap { background: rgba(255,255,255,.75); border-color: rgba(150,165,200,.35); color: var(--bp-text-1); } /* Світлі теми: нативні контроли — світла схема, щоб глобальний :root{color-scheme:dark} (style.css) не робив date-picker/select/чекбокси/ скролбари тёмними на світлому тлі. */ :root:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) { color-scheme: light; } :root:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) #balance-section .balance-date-wrap input[type="date"] { color-scheme: light; color: var(--bp-text-1); } :root:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) #balance-section .balance-chips { background: rgba(255,255,255,.55); border-color: rgba(150,165,200,.28); } :root:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) #balance-section .balance-empty { background: rgba(255,255,255,.6); } /* межі рядків таблиці були rgba(255,255,255,.04) — на світлі невидимі */ :root:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .balance-table tbody tr.balance-group-row { border-top-color: rgba(31,36,51,.07); } :root:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .balance-table tbody tr.balance-group-row:hover { background: rgba(31,36,51,.03); } /* плаваюча плашка (не-flush) — теж світла */ :root:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) #balance-section .balance-selection-bar { background: rgba(255,255,255,.95); border-color: rgba(5,150,105,.35); } /* модалка заявки + її поля */ :root:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .bp-modal { background: rgba(255,255,255,.97); border-color: rgba(150,165,200,.35); color: var(--text-primary); box-shadow: 0 24px 60px rgba(40,60,110,.25); } :root:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) :is(.bp-field input, .bp-field textarea, .bp-seg) { background: rgba(255,255,255,.8); border-color: rgba(150,165,200,.4); color: var(--text-primary); } /* фейсліфт-інпути мали темний rgba(2,6,14,.45) */ :root:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .profile-input { background: rgba(255,255,255,.85); border-color: rgba(150,165,200,.4); color: var(--text-primary); } /* шаблони повідомлень: textarea було чорним склом rgba(0,0,0,.2) */ :root:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .tpl-textarea { background: rgba(255,255,255,.75); border-color: rgba(150,165,200,.35); } /* самовивіз: картка міста була rgba(0,0,0,.18) */ :root:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .ds-city-block { background: rgba(31,36,51,.05); border-color: rgba(150,165,200,.3); } /* ── Тон сайдбара (ПІСЛЯ тем — перемагає за порядком) ── */ :root[data-dlab-side="darker"] { --dlab-sidebg: #060a14; --dlab-sideline: rgba(255,255,255,.05); } :root[data-dlab-side="ink"] { --dlab-sidebg: #04060c; --dlab-sideline: rgba(255,255,255,.045); } :root[data-dlab-side="ink"] .sidebar { box-shadow: 8px 0 24px rgba(0,0,0,.35); } /* розділювач НЕ прибираємо ніде — без нього гірше (Іван, раунд 2) */ /* ── Фон під картками контенту (8 варіантів; cold-градація — раунд 6) ── */ :root[data-dlab-cbg="lighter"] { --bg-primary: #0d1526; } :root[data-dlab-cbg="deeper"] { --bg-primary: #070b15; } :root[data-dlab-cbg="black"] { --bg-primary: #04070d; } :root[data-dlab-cbg="cold"] { --bg-primary: #081120; } :root[data-dlab-cbg="cold2"] { --bg-primary: #0a1626; } :root[data-dlab-cbg="cold3"] { --bg-primary: #0d1c33; } :root[data-dlab-cbg="graphite"] { --bg-primary: #0b0e14; } /* застосування side-змінних */ :root[data-dlab="on"] .sidebar { background: var(--dlab-sidebg); border-right-color: var(--dlab-sideline); } /* ── Плитки: замовлення / відгуки / діагностика / метрики / форми / товари / перевізники в «Доставка та оплата» ── Товари: фарбуємо РЯДКИ (tbody tr), не контейнер — border-spacing 4px інакше просвічує «підложкою» між картками (раунд 5). */ /* NB: на bp-сторінці .balance-table прозора BY DESIGN — фарбується її КОНТЕЙНЕР #balance-orders-table (раунд 9: саме тому світла тема мала темну таблицю — оверрайд бив не в той елемент). Р.34: зона взаєморозрахунків ПОВНІСТЮ виведена з осі T — нею володіє лише вісь R (--dlab-tile-b, правило нижче). До того .balance-table їхала за T, а контейнер за R → ДВА шари (скло5+скло5 = «як скло10», контур у R + скло у T = «все одно скло»). У зони один власник-фарбар. */ :root[data-dlab="on"] :is( .order-card, .review-card, .diag-summary-card, .diag-category, .profile-card, .products-table tbody tr, .ds-card, .tpl-card, .tpl-vars, .intg-card, .intg-card2, .np-section, .product-params-section ) { background: var(--dlab-tile); } :root[data-dlab="on"] .products-table { background: transparent; } :root[data-dlab="on"] .ds-card.ds-active { background: var(--dlab-tile); } /* 12 варіантів (раунд 5: «стекол много — не страшно, кручу хоткеєм») */ :root[data-dlab-tile="lighter"] { --dlab-tile: var(--dlab-tile-l); } :root[data-dlab-tile="darker"] { --dlab-tile: var(--dlab-tile-d); } /* rgba(var(--dlab-glass-ink),α): на темних темах — біле скло, на світлих — чорнильне (інакше біле-на-білому невидиме) */ :root[data-dlab-tile="glass2"] { --dlab-tile: rgba(var(--dlab-glass-ink), .02); } :root[data-dlab-tile="glass3"] { --dlab-tile: rgba(var(--dlab-glass-ink), .03); } :root[data-dlab-tile="glass4"] { --dlab-tile: rgba(var(--dlab-glass-ink), .04); } :root[data-dlab-tile="glass5"] { --dlab-tile: rgba(var(--dlab-glass-ink), .05); } :root[data-dlab-tile="glass6"] { --dlab-tile: rgba(var(--dlab-glass-ink), .065); } :root[data-dlab-tile="glass8"] { --dlab-tile: rgba(var(--dlab-glass-ink), .08); } :root[data-dlab-tile="glass10"] { --dlab-tile: rgba(var(--dlab-glass-ink), .10); } :root[data-dlab-tile="glass12"] { --dlab-tile: rgba(var(--dlab-glass-ink), .12); } :root[data-dlab-tile="outline"] { --dlab-tile: transparent; } /* застосування окремої осі до bp-плиток: таблиця + верхні метрики */ :root[data-dlab="on"] :is(#balance-section #balance-orders-table, .balance-metric) { background: var(--dlab-tile-b); } :root[data-dlab-tileb="lighter"] { --dlab-tile-b: var(--dlab-tile-l); } :root[data-dlab-tileb="darker"] { --dlab-tile-b: var(--dlab-tile-d); } :root[data-dlab-tileb="glass2"] { --dlab-tile-b: rgba(var(--dlab-glass-ink), .02); } :root[data-dlab-tileb="glass3"] { --dlab-tile-b: rgba(var(--dlab-glass-ink), .03); } :root[data-dlab-tileb="glass4"] { --dlab-tile-b: rgba(var(--dlab-glass-ink), .04); } :root[data-dlab-tileb="glass5"] { --dlab-tile-b: rgba(var(--dlab-glass-ink), .05); } :root[data-dlab-tileb="glass6"] { --dlab-tile-b: rgba(var(--dlab-glass-ink), .065); } :root[data-dlab-tileb="glass8"] { --dlab-tile-b: rgba(var(--dlab-glass-ink), .08); } :root[data-dlab-tileb="glass10"] { --dlab-tile-b: rgba(var(--dlab-glass-ink), .10); } :root[data-dlab-tileb="glass12"] { --dlab-tile-b: rgba(var(--dlab-glass-ink), .12); } :root[data-dlab-tileb="outline"] { --dlab-tile-b: transparent; } :root[data-dlab-tileb="outline"] :is(#balance-section #balance-orders-table, .balance-metric) { border-color: var(--bp-line-strong, var(--border-light)); } :root[data-dlab-tile="outline"] :is( .order-card, .review-card, .diag-summary-card, .diag-category, .profile-card, .ds-card, .tpl-card, .tpl-vars, .intg-card, .intg-card2, .np-section, .product-params-section ) { border-color: var(--border-light); } /* ── Стик сайдбар ↔ контент — 4 режими (раунд 5) ── */ /* «Панель»: скруглені праві кути сайдбара, НУЛЬ відступів зверху/знизу (Іван: «ні пікселя») — явні margin:0/height:100% проти будь-яких зазорів */ :root[data-dlab-joint="panel"] .sidebar { margin: 0; height: 100%; align-self: stretch; border-radius: 0 var(--dlab-joint-r) var(--dlab-joint-r) 0; border-right: 1px solid var(--dlab-sideline); } /* «Острів»: сайдбар-плита парить із рівними відступами (варіант раунду 4 — «тоже заслуживает права существования») */ :root[data-dlab-joint="island"] .sidebar { margin: var(--dlab-joint-gap) 0 var(--dlab-joint-gap) var(--dlab-joint-gap); border-radius: var(--dlab-joint-r); border: 1px solid var(--dlab-sideline); } /* «Вікно»: фон каркаса = тон сайдбара, контент — скруглене вікно; БЕЗ відступів (скруглення «у нульову координату», площу не втрачаємо) */ :root[data-dlab-joint="window"] .app-layout { background: var(--dlab-sidebg); } :root[data-dlab-joint="window"] .sidebar { border-right: none; } :root[data-dlab-joint="window"] .main-content { margin: 0; background: var(--bg-primary); border-radius: var(--dlab-joint-r) 0 0 var(--dlab-joint-r); border-left: 1px solid var(--dlab-sideline); } /* ── Шрифт: перебиваємо ті САМІ ~20 селекторів, де style.css хардкодить 'Inter' (весь #balance-section, модалка, поповери) ── */ :root[data-dlab-font="manrope"] :is( body, #balance-section, #balance-section .prom-items-cnt, #balance-section .ttn-empty, #balance-section .balance-selection-info .selbar-label, .hbc-tooltip, .ttn-copy-hint, .shipping-speed-row, .balance-pop, .balance-pop .ph .sub, .balance-pop .pop-meta .mrow .v, .balance-pop .pop-meta .mrow .v .na, .balance-pop-ttn .ttn-pop-carrier, .balance-pop-ttn .ago, .balance-pop-ttn .ttn-pop-prom-error, .balance-pop-hist .ev .ttl, .balance-pop-hist .ev .hist-ago, .bp-modal, .bp-field textarea, .bp-payout-hero-v .cur, .bp-brk-v .u, #balance-section .balance-table, #balance-section .pay-cell ) { font-family: 'Manrope', system-ui, sans-serif; } /* NB: при «Цифри = JB Mono» більша частина рядка таблиці (№, дата, ТТН, суми, %) ЛИШАЄТЬСЯ mono незалежно від F — це задумано; текстові клітинки (статус, оплата) міняються, але Inter/Manrope у 12px близькі. */ /* ── Цифри: «Текстові» (N=sans) — раунд 7 ── На «Взаєморозрахунках» цифри mono ВІД ПРИРОДИ (bp-стилі хардкодять JetBrains) — тумблер туди «додати mono» не міг нічого, а «прибрати» не вмів. Тепер sans чесно перебиває нативні mono-місця (inherit = Inter/Manrope за F). */ :root[data-dlab-num="sans"] :is( .header-balance-chip .hbc-value, .hbc-tt-v, .ttn-value, #balance-section .balance-metric-value, #balance-section .balance-tab .balance-tab-count, #balance-section .balance-chip-count, #balance-section .balance-prom-link, #balance-section .balance-table .num-val, #balance-section .balance-table .fee-val, #balance-section .balance-table .pct-val, #balance-section .balance-table .date-cell, #balance-section .ttn-num, #balance-section .balance-selection-info .selbar-count, #balance-section .balance-selection-info .selbar-metric .v, .balance-pop .ph .ttl, .sb-balance .v ) { font-family: inherit; letter-spacing: 0; } /* ── Цифри JB Mono (раунд 4: розширено — № замовлення, дати, телефон) ── */ :root[data-dlab-num="mono"] :is( #header-balance-value, .hbc-tt-v, .balance-metric-value, #balance-section .balance-table td.col-price, #balance-section .balance-table td.col-commission, #balance-selected-count, #balance-selected-total, #balance-selected-price, #balance-selected-commission, #balance-selected-balance, .balance-request-amount, .balance-detail-field strong, .nav-badge, .order-card [class*="price"], .order-card [class*="total"], .order-card [class*="sum"], .order-id, .order-date, .relative-time, .client-phone-row, .product-total-price, .product-unit-price, .sb-balance .v ) { font-family: 'JetBrains Mono', 'Consolas', monospace; letter-spacing: .01em; } /* ── Щільність (раунд 4: розширено на замовлення/товари/відгуки) ── */ :root[data-dlab-density="tight"] .nav-item { padding-top: 7px; padding-bottom: 7px; } :root[data-dlab-density="tight"] #balance-section .balance-table td { padding-top: 8px !important; padding-bottom: 8px !important; } :root[data-dlab-density="tight"] #balance-section .balance-table th { padding-top: 7px !important; padding-bottom: 7px !important; } :root[data-dlab-density="tight"] .balance-metric { padding: 11px 14px; } :root[data-dlab-density="tight"] .profile-input { padding: 8px 11px; } :root[data-dlab-density="tight"] .order-header { padding: 10px 14px 8px; } :root[data-dlab-density="tight"] .product-row { padding: 5px 8px; } :root[data-dlab-density="tight"] .products-table td { padding-top: 8px !important; padding-bottom: 8px !important; } :root[data-dlab-density="tight"] .review-card { padding: 12px 16px; } :root[data-dlab-density="tight"] .main-content { gap: 12px; } /* ── Headerless (прийнято остаточно — діє завжди при увімкненій лабі) ── */ :root[data-dlab="on"] .header { display: none !important; } :root[data-dlab="on"] #admin-controls { display: none !important; } :root[data-dlab="on"] .app-layout, :root[data-dlab="on"] .app-layout.with-admin-banner { height: 100vh; } /* інжектовані блоки сайдбара (створює design-lab.js) */ .sb-brand, .sb-balance, .sb-user, .sb-admin { display: none; } /* flex, а не block: у рядку з логотипом праворуч живе дзвіночок сповіщень (р.49) */ :root[data-dlab="on"] .sb-brand { display: flex; align-items: center; gap: 8px; padding: 16px 18px 8px; } /* Чип ADMIN — лише адмінам (р.38: data-dlab="on" тепер мають і вендори; клас portal-is-admin ставить design-lab.js за inline-гейтом #admin-controls) */ :root[data-dlab="on"].portal-is-admin .sb-admin { display: flex; } :root[data-dlab="on"] .sb-balance { display: block; margin-top: auto; } :root[data-dlab="on"] .sb-user { display: flex; } /* (.sidebar-experiment — тимчасовий блок «Стиль трекінгу НП» — видалено 2026-07-26 разом із перемикачем layout'ів; його анти-auto-правило зайве.) */ /* ── МОБІЛЬНИЙ ФОЛБЕК headerless (р.38: теми в усіх вендорів). На ≤768px гамбургер живе В ШАПЦІ, а сайдбар — офканвас-шухляда (style.css:3246) — без шапки вендор лишається без навігації. Тож на мобільному шапка повертається, headerless — десктопний патерн. Інжект-блоки (баланс/юзер) лишаються в шухлядці; бренд ховаємо — лого і так у шапці. ── */ @media (max-width: 768px) { :root[data-dlab="on"] .header { display: flex !important; } :root[data-dlab="on"] .app-layout, :root[data-dlab="on"] .app-layout.with-admin-banner { height: calc(100vh - 60px); } :root[data-dlab="on"] .sb-brand { display: none; } } /* ── Юзер БЕЗ прив'язаного вендора (р.38): app.js ховає сайдбар (checkVendorStatus → display:none) і ставить клас portal-no-vendor. Headerless тут лишав би людину без logout/бренду взагалі — шапку повертаємо (специфічність (0,3,0) > (0,2,0) headerless-правила). ── */ :root[data-dlab="on"].portal-no-vendor .header { display: flex !important; } :root[data-dlab="on"].portal-no-vendor .app-layout, :root[data-dlab="on"].portal-no-vendor .app-layout.with-admin-banner { height: calc(100vh - 60px); } /* Компанія вендора під брендом (дзеркало чипа шапки, інжект design-lab.js) */ .sb-company { display: none; padding: 0 18px 8px; font-size: 11px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :root[data-dlab="on"] .sb-company { display: block; } :root[data-dlab="on"] .sb-company:empty { display: none; } @media (max-width: 768px) { /* бренд схований — компанію теж (шапка вже показує чип) */ :root[data-dlab="on"] .sb-company { display: none; } } .sb-brand .sb-logo { font-family: 'Sora', 'Inter', sans-serif; font-weight: 800; font-size: 17px; letter-spacing: .02em; color: var(--text-primary); } .sb-brand .sb-logo b { color: var(--primary-light); } .sb-brand .sb-logo small { display: block; font-size: 7px; letter-spacing: .42em; color: var(--text-tertiary); font-weight: 700; } .sb-admin { margin: 0 12px 8px; padding: 7px 10px; border-radius: 9px; background: rgba(16,185,129,.06); border: 1px dashed rgba(52,211,153,.3); font-size: 11px; color: var(--text-secondary); align-items: center; gap: 7px; cursor: pointer; } .sb-admin b { color: var(--primary-light); font-size: 10px; letter-spacing: .06em; } .sb-admin span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Баланс унизу: 4 стилі (раунд 4) ── */ .sb-balance { padding: 12px 14px 10px; cursor: pointer; } .sb-balance .k { font-size: 9px; font-weight: 800; letter-spacing: .14em; color: var(--text-tertiary); } .sb-balance .v { font-family: 'JetBrains Mono', 'Consolas', monospace; font-size: 17px; font-weight: 700; color: var(--primary-light); margin-top: 3px; } /* «Картка» — рамка + легкий градієнт */ :root[data-dlab-bal="card"] .sb-balance { border-top: none; padding: 6px 12px 10px; } :root[data-dlab-bal="card"] .sb-balance .in { border: 1px solid rgba(52,211,153,.28); border-radius: 11px; background: linear-gradient(180deg, rgba(16,185,129,.08), rgba(16,185,129,.02)); padding: 9px 12px; } /* «Тихий» — лише лінія-розділювач */ :root[data-dlab-bal="quiet"] .sb-balance .in { padding: 0 2px; } /* «Смужка» — тихий + emerald-акцент зліва */ :root[data-dlab-bal="stripe"] .sb-balance .in { padding: 2px 2px 2px 10px; border-left: 2px solid var(--primary-light); } /* «Заливка» — м'який emerald-фон блоком, без рамок */ :root[data-dlab-bal="fill"] .sb-balance { border-top: none; padding: 6px 12px 10px; } :root[data-dlab-bal="fill"] .sb-balance .in { background: rgba(16,185,129,.07); border-radius: 11px; padding: 9px 12px; } .sb-user { border-top: 1px solid var(--dlab-sideline, rgba(255,255,255,.08)); padding: 11px 14px; align-items: center; gap: 10px; } .sb-user .sb-ava { width: 30px; height: 30px; border-radius: 50%; background: #7c3aed; color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex-shrink: 0; background-size: cover; background-position: center; } .sb-user .nm { font-size: 12.5px; font-weight: 600; flex: 1; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sb-user .out { color: var(--text-tertiary); font-size: 11px; cursor: pointer; background: none; border: none; font-family: inherit; } .sb-user .out:hover { color: var(--text-primary); } /* «Повітря»: одна лінія над нижнім блоком замість стосу рисок */ :root[data-dlab-divs="air"] .sb-user { border-top: none; padding-top: 4px; } :root[data-dlab-divs="air"]:is([data-dlab-bal="card"], [data-dlab-bal="fill"]) .sb-balance { border-top: none; } /* ── Плашка розрахунку «приклеєна» (обрано, раунд 2) ── */ :root[data-dlab-selbar="flush"] #balance-section .balance-selection-bar { left: 260px !important; right: 0 !important; width: auto !important; bottom: 0 !important; border-radius: 0; border-left: none; border-right: none; border-bottom: none; border-top: 1px solid rgba(255,255,255,.14); background: linear-gradient(180deg, rgba(13,20,36,.97), rgba(9,14,26,.97)); box-shadow: 0 -12px 30px rgba(0,0,0,.35); padding-left: 26px; /* текст правіше — вирівняно з контентом (раунд 6) */ justify-content: flex-start; /* раунд 8: базовий space-between усе одно розкидав info/actions по краях — глушимо */ } /* кнопки одразу після лічильників, а не в правому куті: info не розпирається */ :root[data-dlab-selbar="flush"] #balance-section .balance-selection-info { flex: 0 0 auto; } :root[data-dlab-selbar="flush"] #balance-section .balance-selection-actions { margin-left: 10px; } /* підгонка під режими стику */ :root[data-dlab-selbar="flush"][data-dlab-joint="island"] #balance-section .balance-selection-bar { left: calc(260px + 2 * var(--dlab-joint-gap)) !important; } :root[data-dlab-selbar="flush"][data-dlab-joint="window"] #balance-section .balance-selection-bar { border-radius: 0 0 0 var(--dlab-joint-r); } @media (max-width: 768px) { :root[data-dlab-selbar="flush"] #balance-section .balance-selection-bar { left: 0 !important; } } /* ── Facelift Налаштувань (перший прохід, CSS-only) ── */ :root[data-dlab="on"] .profile-card { max-width: 640px; background: var(--dlab-tile); border: 1px solid var(--border); border-radius: 14px; padding: 22px; } :root[data-dlab="on"] .profile-form { display: flex; flex-direction: column; gap: 13px; } :root[data-dlab="on"] .profile-label { display: flex; flex-direction: column; gap: 6px; font-size: 11px; font-weight: 700; color: var(--text-secondary); letter-spacing: .02em; } :root[data-dlab="on"] .profile-input { background: rgba(2, 6, 14, .45); border: 1px solid var(--border); border-radius: 9px; color: var(--text-primary); font-family: inherit; font-size: 13px; padding: 9px 12px; outline: none; transition: border-color .15s, box-shadow .15s; } :root[data-dlab="on"] .profile-input:focus { border-color: rgba(52,211,153,.4); box-shadow: 0 0 0 3px rgba(52,211,153,.09); } :root[data-dlab="on"] .profile-input:disabled { color: var(--text-tertiary); } :root[data-dlab="on"] #delivery-settings-container, :root[data-dlab="on"] #integrations-settings-container, :root[data-dlab="on"] #templates-settings-container { max-width: 980px; } /* пікер тем (р.38): фейсліфт-640px душив грід карток до 2 колонок */ :root[data-dlab="on"] .profile-card.appearance-card { max-width: 980px; } /* ═══════════════ FAB + drawer + toast ═══════════════ */ .dlab-fab { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 9500; width: 30px; height: 64px; border: 1px solid rgba(255,255,255,.14); border-right: none; border-radius: 10px 0 0 10px; background: rgba(10,15,29,.92); backdrop-filter: blur(10px); color: #34d399; font-size: 13px; cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: -6px 0 18px rgba(0,0,0,.35); } .dlab-fab.visible { display: flex; } .dlab-fab:hover { background: rgba(16,26,46,.95); } .dlab-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 9600; width: 306px; max-width: 92vw; background: #0c111d; border-left: 1px solid rgba(255,255,255,.1); box-shadow: -24px 0 60px rgba(0,0,0,.55); transform: translateX(100%); transition: transform .22s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; font-family: 'Inter', system-ui, sans-serif; } .dlab-drawer.open { transform: translateX(0); } .dlab-head { display: flex; align-items: center; gap: 9px; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.08); } .dlab-head .dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 10px #34d399; } .dlab-head .t { font-size: 13.5px; font-weight: 800; color: #f1f5f9; flex: 1; } .dlab-head .x { background: none; border: none; color: #64748b; font-size: 16px; cursor: pointer; padding: 2px 6px; } .dlab-head .x:hover { color: #f1f5f9; } .dlab-body { flex: 1; overflow-y: auto; padding: 12px 14px 20px; } .dlab-body::-webkit-scrollbar { width: 4px; } .dlab-body::-webkit-scrollbar-thumb { background: #263041; border-radius: 2px; } .dlab-master { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 8px; border: 1px solid rgba(52,211,153,.3); border-radius: 10px; background: rgba(16,185,129,.05); font-size: 12.5px; font-weight: 700; color: #f1f5f9; cursor: pointer; } .dlab-master .sw { margin-left: auto; } .dlab-hotkeys { display: flex; align-items: center; gap: 10px; padding: 7px 12px; margin-bottom: 10px; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; font-size: 11.5px; font-weight: 600; color: #cbd5e1; cursor: pointer; } .dlab-hotkeys .sw { margin-left: auto; } .dlab-sec { font-size: 9.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: #64748b; margin: 13px 2px 7px; } .dlab-presets { display: flex; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; } .dlab-preset { flex: 1 1 30%; background: transparent; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; color: #cbd5e1; font-family: inherit; font-size: 11.5px; font-weight: 700; padding: 8px 4px; cursor: pointer; } .dlab-preset:hover { border-color: rgba(255,255,255,.2); } .dlab-preset.on { border-color: #34d399; background: rgba(52,211,153,.08); color: #34d399; } .dlab-row { display: flex; align-items: center; gap: 7px; padding: 5px 0; font-size: 12px; color: #e2e8f0; flex-wrap: wrap; } .dlab-row .lbl { flex: 1; min-width: 72px; } .dlab-kbd { font-family: 'JetBrains Mono', 'Consolas', monospace; font-size: 9.5px; color: #64748b; border: 1px solid rgba(255,255,255,.1); border-radius: 4px; padding: 0 4px; line-height: 15px; } /* бейджі хоткеїв видно лише коли хоткеї увімкнені (раунд 4) */ .dlab-drawer[data-hk="off"] .dlab-kbd { display: none; } .dlab-seg { display: inline-flex; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-radius: 8px; padding: 2px; flex-wrap: wrap; justify-content: flex-end; } .dlab-seg button { border: none; background: transparent; color: #8b93a3; font-family: inherit; font-size: 10.5px; font-weight: 700; padding: 4px 7px; border-radius: 6px; cursor: pointer; white-space: nowrap; } .dlab-seg button.on { background: rgba(52,211,153,.14); color: #34d399; } .dlab-sw { width: 34px; height: 19px; border-radius: 10px; background: rgba(148,163,184,.25); position: relative; flex-shrink: 0; transition: background .15s; } .dlab-sw::after { content: ''; position: absolute; top: 2.5px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #cbd5e1; transition: left .15s; } .dlab-sw.on { background: #059669; } .dlab-sw.on::after { left: 17px; background: #fff; } .dlab-note { font-size: 10.5px; color: #64748b; line-height: 1.5; margin-top: 14px; border-top: 1px solid rgba(255,255,255,.07); padding-top: 10px; } .dlab-note b { color: #cbd5e1; } .dlab-reset { margin-top: 10px; width: 100%; background: none; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; color: #8b93a3; font-family: inherit; font-size: 11.5px; font-weight: 600; padding: 8px; cursor: pointer; } .dlab-reset:hover { color: #f1f5f9; border-color: rgba(255,255,255,.2); } /* тост «що саме перемкнулось» — критично для хоткеїв (раунд 4) */ .dlab-toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(8px); z-index: 9700; background: rgba(10, 16, 30, .96); border: 1px solid rgba(52,211,153,.35); border-radius: 10px; padding: 9px 16px; font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; color: #e7e9ee; box-shadow: 0 14px 40px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .16s, transform .16s; white-space: nowrap; } .dlab-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .dlab-toast b { color: #34d399; font-weight: 700; } /* ══════════ Раунд 10: світла — контраст і специфічність ══════════ УРОК (аргумент за Phase-1 токенізацію): фейсліфт-інпути (:root[data-dlab="on"] .profile-input, темний фон) і світлий оверрайд мали РІВНУ специфічність — перемагав пізніший у файлі, тому інпути лишались темними. Цей блок стоїть У КІНЦІ файла і додає [data-dlab="on"] для гарантованої переваги. */ /* інпути: фейсліфт-фон rgba(2,6,14,.45) остаточно перебитий */ :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) :is(.profile-input, .tpl-textarea) { background: rgba(255,255,255,.85); border-color: rgba(150,165,200,.4); color: var(--text-primary); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .ds-city-block { background: rgba(31,36,51,.05); border-color: rgba(150,165,200,.3); } /* контраст: панелі щільніші, текст і статуси соковитіші («приглушено») */ :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) #balance-section { --bp-panel: rgba(255,255,255,.88); --bp-panel-2: rgba(255,255,255,.65); --bp-text-1: #10182b; --bp-text-2: #2b3650; --bp-text-3: #4d5b74; --bp-text-4: #7e8ba1; --bp-amber: #d97706; --bp-cyan: #0891b2; --bp-rose: #e11d48; } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) { --text-secondary: #39445c; --text-tertiary: #5d6a82; } /* активний таб «Готові до заявки»: хардкод-текст #0a2015 тонув на темній зелені світлої теми («втратив об'ємність») — білий текст + світлий бейдж */ :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) #balance-section .balance-tab.active[data-balance-view="eligible"] { color: #fff; background: linear-gradient(180deg, #10b981, #059669); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 5px 12px -2px rgba(5,150,105,.45); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) #balance-section .balance-tab.active[data-balance-view="eligible"] .balance-tab-count { background: rgba(255,255,255,.28); color: #fff; } /* ══════════ Раунд 11: скелетон / статуси / маркери / прогресбари ══════════ */ /* Скелетон-лоадери були заточені під темну (bg rgba(30,41,59,.75)) — тепер успадковують плитку теми. Раунд 12: покриті ВСІ три види — список товарів (.skeleton-card), список замовлень (.ol-skeleton-card), сторінка товару (.pd-skeleton-main); лінії/фото на світлі — чорнильні */ :root[data-dlab="on"] :is(.skeleton-card, .ol-skeleton-card, .pd-skeleton-main, .od-skeleton-card) { background: var(--dlab-tile); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) :is(.skeleton-line, .skeleton-avatar, .nav-badge--loading, .ol-skeleton-img) { background: linear-gradient(90deg, rgba(31,36,51,.06) 0%, rgba(31,36,51,.14) 50%, rgba(31,36,51,.06) 100%); background-size: 400px 100%; } /* Маркер «Градієнт» задає ВЛАСНИЙ фон картки з темним хардкодом — наш tile-шар його перебивав і маркер зникав У ВСІХ темах. Відтворюємо градієнт поверх плитки теми (і робимо смужку виразнішою). */ :root[data-dlab="on"] .order-marker-gradient .order-card.order-new { background: linear-gradient(90deg, rgba(148,163,184,.16) 0%, transparent 22%), var(--dlab-tile); } :root[data-dlab="on"] .order-marker-gradient .order-card.order-processing { background: linear-gradient(90deg, rgba(245,158,11,.16) 0%, transparent 22%), var(--dlab-tile); } :root[data-dlab="on"] .order-marker-gradient .order-card.order-shipping { background: linear-gradient(90deg, rgba(6,182,212,.14) 0%, transparent 22%), var(--dlab-tile); } :root[data-dlab="on"] .order-marker-gradient .order-card.order-completed { background: linear-gradient(90deg, rgba(16,185,129,.15) 0%, transparent 22%), var(--dlab-tile); } :root[data-dlab="on"] .order-marker-gradient .order-card.order-failed { background: linear-gradient(90deg, rgba(239,68,68,.18) 0%, transparent 22%), var(--dlab-tile); } :root[data-dlab="on"] .order-marker-gradient .order-card.order-paid { background: linear-gradient(90deg, rgba(139,92,246,.16) 0%, transparent 22%), var(--dlab-tile); } /* Світла: смужки top/border були rgba .35 — бліді на білому → .55. ФІКС раунду 12: попередня версія писала border-color (УСІ сторони) — картка отримувала білясту рамку по периметру замість кольорової смужки. */ :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .order-marker-top .order-card.order-new { border-top-color: rgba(100,116,139,.55); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .order-marker-top .order-card.order-processing { border-top-color: rgba(217,119,6,.55); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .order-marker-top .order-card.order-shipping { border-top-color: rgba(8,145,178,.55); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .order-marker-top .order-card.order-completed { border-top-color: rgba(5,150,105,.55); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .order-marker-top .order-card.order-failed { border-top-color: rgba(225,29,72,.55); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .order-marker-top .order-card.order-paid { border-top-color: rgba(109,40,217,.55); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .order-marker-border .order-card.order-new { border-left-color: rgba(100,116,139,.55); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .order-marker-border .order-card.order-processing { border-left-color: rgba(217,119,6,.55); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .order-marker-border .order-card.order-shipping { border-left-color: rgba(8,145,178,.55); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .order-marker-border .order-card.order-completed { border-left-color: rgba(5,150,105,.55); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .order-marker-border .order-card.order-failed { border-left-color: rgba(225,29,72,.55); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .order-marker-border .order-card.order-paid { border-left-color: rgba(109,40,217,.55); } /* Світла: кнопки перемикача маркерів — active був rgba(255,255,255,.08), на білому невидимий */ :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .marker-switcher-btn.active { background: rgba(5,150,105,.14); color: var(--text-primary); } /* Світла: статус-пілюлі — тексти були light-tint (#fbbf24/#67e8f9/#fca5a5/ #c4b5fd, primary-light) → на білому «вицвілі». Темні відтінки. */ :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .order-status:is(.pending, .received, .status-active, .status-waiting) { color: #b45309; border-color: rgba(217,119,6,.35); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .order-status:is(.delivered, .status-completed) { color: #047857; border-color: rgba(5,150,105,.35); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .order-status.status-shipping { color: #0e7490; border-color: rgba(8,145,178,.35); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .order-status:is(.canceled, .status-canceled) { color: #be123c; border-color: rgba(225,29,72,.35); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .order-status.paid { color: #6d28d9; border-color: rgba(109,40,217,.35); } /* Світла: викуп-рейтинг клієнта — соковитіші тони */ :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .buyout-good { color: #047857; } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .buyout-mid { color: #b45309; } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .buyout-bad { color: #dc2626; } /* Світла: треки прогресбарів відгуків — var(--surface) на білому невидимий */ :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .rating-bar-track { background: rgba(31,36,51,.08); box-shadow: inset 0 0 0 1px rgba(31,36,51,.06); } /* Світла: заголовки шаблонів (#f8fafc хардкод) та інтеграцій — білий на білому. Раунд 12: справжній клас назви — .intg-card2-name (теж #f8fafc), плюс плашка API-ключа .intg-card2-key була rgba(0,0,0,.15) — темна на світлі. */ :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) :is(.tpl-header, .intg-card2, .intg-card2-name, .intg-name, .intg-card) { color: var(--text-primary); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .intg-card2-key { background: rgba(31,36,51,.06); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .intg-card2-key input { color: var(--text-primary); } /* Світла: іконки перемикача маркерів у тулбарі — явний колір (були бліді) */ :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .marker-switcher-btn { color: #5d6a82; } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .marker-switcher-btn:hover { color: var(--text-primary); } /* ══════════ Раунд 13: модалка/поповер/чекбокси ══════════ КОРІНЬ «двоваріантної» модалки: .bp-modal живе ПОЗА #balance-section і несе ВЛАСНУ копію --bp-* токенів → переозначення на #balance-section її не чіпали. Світла бачила білий фон (наш r9-фікс) з БІЛИМ текстом (#f1f5f9 з токенів), Латунь — незайманий синій оригінал. Тепер токени задаються прямо на .bp-modal і .balance-pop для обох тем. */ /* — Світла: модалка — */ :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .bp-modal { --bp-emerald: #059669; --bp-emerald-deep: #047857; --bp-amber: #b45309; --bp-rose: #be123c; --bp-text-1: #10182b; --bp-text-2: #2b3650; --bp-text-3: #4d5b74; --bp-text-4: #7e8ba1; --bp-line: rgba(31,36,51,.09); --bp-line-strong: rgba(31,36,51,.16); } /* — Світла: ховер-поповер рядка (був bg #0b1220) — */ :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) :is(.balance-pop, .balance-pop-ttn, .balance-pop-hist) { --bp-emerald: #059669; --bp-amber: #b45309; --bp-rose: #be123c; --bp-text-1: #10182b; --bp-text-2: #2b3650; --bp-text-3: #4d5b74; --bp-text-4: #7e8ba1; --bp-line: rgba(31,36,51,.09); --bp-line-strong: rgba(31,36,51,.16); background: rgba(255,255,255,.98); border-color: rgba(150,165,200,.4); color: #2b3650; box-shadow: 0 24px 60px rgba(40,60,110,.25); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .balance-pop .pop-goods .g .thumb { background: #e9eef6; } /* — Світла: чекбокси таблиці були рамкою rgba(255,255,255,.18) = невидимі — */ :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) #balance-section :is(input[type="checkbox"].balance-group-checkbox, .balance-select-all-cb) { border-color: rgba(31,36,51,.35); background: rgba(255,255,255,.8); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) #balance-section input[type="checkbox"].balance-group-checkbox:checked { background: linear-gradient(135deg, #10b981, #059669); border-color: #059669; } /* — Латунь: модалка й поповер успадковують тему (було: синій оригінал) — */ :root[data-dlab-theme="d3"] .bp-modal { --bp-emerald: #d9b075; --bp-emerald-deep: #c9a06a; --bp-amber: #e0b96a; --bp-rose: #e08d8d; --bp-text-1: #ece7dc; --bp-text-2: #cfc8b8; --bp-text-3: #a29a88; --bp-text-4: #746e60; --bp-line: rgba(226,201,158,.07); --bp-line-strong: rgba(226,201,158,.13); background: linear-gradient(180deg, #1a1c26, #141520); box-shadow: 0 40px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(217,176,117,.1); } :root[data-dlab-theme="d3"] .bp-payout-hero { background: linear-gradient(135deg, rgba(217,176,117,.12) 0%, rgba(201,160,106,.05) 55%, rgba(217,176,117,.14) 100%); } :root[data-dlab-theme="d3"] :is(.balance-pop, .balance-pop-ttn, .balance-pop-hist) { --bp-emerald: #d9b075; --bp-amber: #e0b96a; --bp-rose: #e08d8d; --bp-text-1: #ece7dc; --bp-text-2: #cfc8b8; --bp-text-3: #a29a88; --bp-text-4: #746e60; --bp-line: rgba(226,201,158,.07); --bp-line-strong: rgba(226,201,158,.13); background: #14151d; border-color: rgba(226,201,158,.16); } /* ══════════ Раунд 15 ══════════ */ /* Картка Опис/Атрибути (.product-params-section): у базі лише margin-top — наш tile-фон робив з неї прямокутник БЕЗ скруглень. Надаємо форму картки в усіх темах + чинимо марковані списки (буллети вилазили за блок і висіли на рівні тексту — не було відступу в ul) */ :root[data-dlab="on"] .product-params-section { border: 1px solid var(--border); border-radius: var(--radius, 12px); padding: 18px 20px; } :root[data-dlab="on"] .product-params-section :is(ul, ol) { padding-left: 22px; margin: 6px 0 10px; } :root[data-dlab="on"] .product-params-section li { margin: 3px 0; } /* Світла: нутрощі ховер-поповера — хардкоди #f1f5f9/#cbd5e1/#94a3b8 лишали текст білястим на білому («вицвілі всплывашки») */ :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .balance-pop .ph .ttl { color: #10182b; } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .balance-pop .ph .sub { color: #4d5b74; } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .balance-pop .pop-goods .g .thumb { background: #e9eef6; color: #5d6a82; } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .balance-pop .pop-goods .g .nm { color: #2b3650; } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .balance-pop .pop-goods .g .nm .meta { color: #7e8ba1; } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .balance-pop .pop-goods .g .prc { color: #2b3650; } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .balance-pop .pop-goods .g-loading { color: #7e8ba1; } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .balance-pop-stat.status-tone-wait { color: #b45309; border-color: rgba(217,119,6,.3); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .balance-pop-stat.status-tone-transit { color: #0e7490; border-color: rgba(8,145,178,.3); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .balance-pop-stat.status-tone-done { color: #047857; border-color: rgba(5,150,105,.3); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .balance-pop-stat.status-tone-ret { color: #be123c; border-color: rgba(225,29,72,.3); } /* Світла: метрика «Баланс» — зелену обводку прибрано (Іван, р.15). Р.34: фон із --dlab-tile → --dlab-tile-b (метрики = зона розрахунків, нею володіє вісь R) */ :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) #balance-section .balance-metric-total { border-color: var(--bp-line-strong); background: var(--dlab-tile-b); } /* Світла: маркери замовлень/відгуків — СТРАХОВИЙ блок з !important. Попри r12-фікс смужки далі глушились каскадом (glass-рамка r8 фарбує border-color всіх сторін пізніше за short-hand style.css). Dev-шар — important допустимий, Phase 1 зніме. */ :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .order-marker-top .order-card.order-new { border-top-color: rgba(100,116,139,.6) !important; } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .order-marker-top .order-card.order-processing { border-top-color: rgba(217,119,6,.6) !important; } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .order-marker-top .order-card.order-shipping { border-top-color: rgba(8,145,178,.6) !important; } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .order-marker-top .order-card.order-completed { border-top-color: rgba(5,150,105,.6) !important; } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .order-marker-top .order-card.order-failed { border-top-color: rgba(225,29,72,.6) !important; } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .order-marker-top .order-card.order-paid { border-top-color: rgba(109,40,217,.6) !important; } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .order-marker-border .order-card.order-new { border-left-color: rgba(100,116,139,.6) !important; } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .order-marker-border .order-card.order-processing { border-left-color: rgba(217,119,6,.6) !important; } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .order-marker-border .order-card.order-shipping { border-left-color: rgba(8,145,178,.6) !important; } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .order-marker-border .order-card.order-completed { border-left-color: rgba(5,150,105,.6) !important; } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .order-marker-border .order-card.order-failed { border-left-color: rgba(225,29,72,.6) !important; } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .order-marker-border .order-card.order-paid { border-left-color: rgba(109,40,217,.6) !important; } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .review-marker-top .review-card.review-negative { border-top-color: rgba(225,29,72,.6) !important; } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .review-marker-top .review-card.review-neutral { border-top-color: rgba(217,119,6,.6) !important; } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .review-marker-top .review-card.review-positive { border-top-color: rgba(5,150,105,.6) !important; } /* ═══════════════════════════════════════════════════════════════ ЛАТУНЬ · ТЮНІНГ (раунд 16) — під-осі ТІЛЬКИ для теми d3. Референси Івана: CUPRA (глибока мідь на матовому графіті), 96AI-лендинг (персикова мідь, металік-кнопки, чорна база, glow). Дефолт кожної осі '' = поточна Латунь (відправна точка недоторкана). ═══════════════════════════════════════════════════════════════ */ /* ── Вісь A: тон металу ── */ /* «Мідь» (CUPRA): глибша, з рожевинкою */ :root[data-dlab-theme="d3"][data-dlab-d3a="copper"] { --primary: #b06a42; --primary-dark: #8f4f2c; --primary-light: #c47e52; --accent: #c47e52; --secondary: #c47e52; --dlab-sideline: rgba(216,155,110,.09); --dlab-glass-ink: 216,155,110; --dlab-glow-ink: 196,126,82; --border: rgba(216,155,110,.10); --border-light: rgba(216,155,110,.18); } /* «Персик» (96AI): світліша, тепло-абрикосова */ :root[data-dlab-theme="d3"][data-dlab-d3a="peach"] { --primary: #d99568; --primary-dark: #b87747; --primary-light: #e8a87c; --accent: #e8a87c; --secondary: #e8a87c; --dlab-sideline: rgba(240,190,150,.09); --dlab-glass-ink: 240,190,150; --dlab-glow-ink: 232,168,124; --border: rgba(240,190,150,.10); --border-light: rgba(240,190,150,.18); } /* тон тягне і bp-зони (грошовий акцент = метал теми) */ :root[data-dlab-theme="d3"][data-dlab-d3a="copper"] :is(#balance-section, .bp-modal, .balance-pop, .balance-pop-ttn, .balance-pop-hist) { --bp-emerald: #c47e52; --bp-emerald-deep: #b06a42; } :root[data-dlab-theme="d3"][data-dlab-d3a="peach"] :is(#balance-section, .bp-modal, .balance-pop, .balance-pop-ttn, .balance-pop-hist) { --bp-emerald: #e8a87c; --bp-emerald-deep: #d99568; } /* ── Вісь K: база ── */ /* «Чорний» (96AI): нейтральна майже-чорна база замість теплого графіту */ :root[data-dlab-theme="d3"][data-dlab-d3b="black"] { --bg-primary: #0b0b0d; --bg-secondary: #111114; --bg-tertiary: #1c1c22; --glass: #141419; --glass-hover: #1a1a21; --surface: #0f0f13; --dlab-sidebg: #070709; --dlab-tile: #141419; --dlab-tile-l: #1a1a21; --dlab-tile-d: #0e0e12; } :root[data-dlab-theme="d3"][data-dlab-d3b="black"] #balance-section { --bp-bg: #0b0b0d; --bp-panel: #141419; --bp-panel-2: #0f0f13; } :root[data-dlab-theme="d3"][data-dlab-d3b="black"] .bp-modal { background: linear-gradient(180deg, #16161b, #101014); } /* ── Вісь U: статуси ── */ /* «Латунні» — монохром металу, семантика світлістю (виконано найнасиченіше, скасовано — іржаво-мідне) */ :root[data-dlab-theme="d3"][data-dlab-d3s="mono"] .order-status:is(.pending, .received, .status-active, .status-waiting) { color: #d9b075; border-color: rgba(217,176,117,.3); background: rgba(217,176,117,.08); } :root[data-dlab-theme="d3"][data-dlab-d3s="mono"] .order-status:is(.pending, .received, .status-active, .status-waiting)::before { background: #d9b075; } :root[data-dlab-theme="d3"][data-dlab-d3s="mono"] .order-status.status-shipping { color: #e5c9a0; border-color: rgba(229,201,160,.3); background: rgba(229,201,160,.07); } :root[data-dlab-theme="d3"][data-dlab-d3s="mono"] .order-status.status-shipping::before { background: #e5c9a0; } :root[data-dlab-theme="d3"][data-dlab-d3s="mono"] .order-status:is(.delivered, .status-completed) { color: #eec98b; border-color: rgba(238,201,139,.42); background: rgba(238,201,139,.12); } :root[data-dlab-theme="d3"][data-dlab-d3s="mono"] .order-status:is(.delivered, .status-completed)::before { background: #eec98b; } :root[data-dlab-theme="d3"][data-dlab-d3s="mono"] .order-status:is(.canceled, .status-canceled) { color: #c08060; border-color: rgba(192,128,96,.35); background: rgba(192,128,96,.09); } :root[data-dlab-theme="d3"][data-dlab-d3s="mono"] .order-status:is(.canceled, .status-canceled)::before { background: #c08060; } :root[data-dlab-theme="d3"][data-dlab-d3s="mono"] .order-status.paid { color: #cba57e; border-color: rgba(203,165,126,.32); background: rgba(203,165,126,.08); } :root[data-dlab-theme="d3"][data-dlab-d3s="mono"] .order-status.paid::before { background: #cba57e; } :root[data-dlab-theme="d3"][data-dlab-d3s="mono"] :is(#balance-section, .bp-modal, .balance-pop, .balance-pop-ttn, .balance-pop-hist) { --bp-cyan: #e5c9a0; --bp-amber: #d9b075; --bp-rose: #c08060; } /* крапки дропдауна переходів — у тон осі */ :root[data-dlab-theme="d3"][data-dlab-d3s="mono"] .status-dropdown-item.tone-work::before { background: #d9b075; } :root[data-dlab-theme="d3"][data-dlab-d3s="mono"] .status-dropdown-item.tone-ship::before { background: #e5c9a0; } :root[data-dlab-theme="d3"][data-dlab-d3s="mono"] .status-dropdown-item.tone-done::before { background: #eec98b; } :root[data-dlab-theme="d3"][data-dlab-d3s="mono"] .status-dropdown-item.tone-fail::before { background: #c08060; } /* «Приглушені» — семантика лишається, але земляні/десатуровані тони */ :root[data-dlab-theme="d3"][data-dlab-d3s="muted"] .order-status:is(.pending, .received, .status-active, .status-waiting) { color: #d9b075; border-color: rgba(217,176,117,.3); background: rgba(217,176,117,.08); } :root[data-dlab-theme="d3"][data-dlab-d3s="muted"] .order-status:is(.pending, .received, .status-active, .status-waiting)::before { background: #d9b075; } :root[data-dlab-theme="d3"][data-dlab-d3s="muted"] .order-status.status-shipping { color: #8fa8b8; border-color: rgba(143,168,184,.3); background: rgba(143,168,184,.08); } :root[data-dlab-theme="d3"][data-dlab-d3s="muted"] .order-status.status-shipping::before { background: #8fa8b8; } :root[data-dlab-theme="d3"][data-dlab-d3s="muted"] .order-status:is(.delivered, .status-completed) { color: #8fae94; border-color: rgba(143,174,148,.35); background: rgba(143,174,148,.09); } :root[data-dlab-theme="d3"][data-dlab-d3s="muted"] .order-status:is(.delivered, .status-completed)::before { background: #8fae94; } :root[data-dlab-theme="d3"][data-dlab-d3s="muted"] .order-status:is(.canceled, .status-canceled) { color: #c78d7d; border-color: rgba(199,141,125,.35); background: rgba(199,141,125,.09); } :root[data-dlab-theme="d3"][data-dlab-d3s="muted"] .order-status:is(.canceled, .status-canceled)::before { background: #c78d7d; } :root[data-dlab-theme="d3"][data-dlab-d3s="muted"] .order-status.paid { color: #a893b8; border-color: rgba(168,147,184,.32); background: rgba(168,147,184,.08); } :root[data-dlab-theme="d3"][data-dlab-d3s="muted"] .order-status.paid::before { background: #a893b8; } :root[data-dlab-theme="d3"][data-dlab-d3s="muted"] :is(#balance-section, .bp-modal, .balance-pop, .balance-pop-ttn, .balance-pop-hist) { --bp-cyan: #8fa8b8; --bp-rose: #c78d7d; } /* крапки дропдауна переходів — земляні тони осі */ :root[data-dlab-theme="d3"][data-dlab-d3s="muted"] .status-dropdown-item.tone-work::before { background: #d9b075; } :root[data-dlab-theme="d3"][data-dlab-d3s="muted"] .status-dropdown-item.tone-ship::before { background: #8fa8b8; } :root[data-dlab-theme="d3"][data-dlab-d3s="muted"] .status-dropdown-item.tone-done::before { background: #8fae94; } :root[data-dlab-theme="d3"][data-dlab-d3s="muted"] .status-dropdown-item.tone-fail::before { background: #c78d7d; } /* ── Вісь M: CTA ── */ /* «Металік» (96AI): полірований метал — блік зверху, тінь знизу, світлий кант */ :root[data-dlab-theme="d3"][data-dlab-d3c="metal"] :is(.btn-primary, #balance-section #balance-request-submit, .bp-modal-btn-primary, .ttn-submit) { background: linear-gradient(180deg, color-mix(in srgb, var(--primary-light) 72%, #fff 28%) 0%, var(--primary-light) 22%, var(--primary) 58%, var(--primary-dark) 100%); border: 1px solid color-mix(in srgb, var(--primary-light) 55%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.28), 0 6px 16px -4px rgba(0,0,0,.55); color: #231407; text-shadow: 0 1px 0 rgba(255,255,255,.28); } :root[data-dlab-theme="d3"][data-dlab-d3c="metal"] :is(.btn-primary, #balance-section #balance-request-submit, .bp-modal-btn-primary, .ttn-submit) i { color: #231407; } /* ── Латунь: холодні хардкоди недоглянутих сторінок (раунд 17) ── Циан #06b6d4 в іконках шаблонів/інтеграцій, лінках, ТТН-друку — чужий у теплій гамі → метал теми (їде за віссю тону). Зелена підложка чипів змінних і холодний сірий опис → теплі. */ :root[data-dlab-theme="d3"] :is( .tpl-header i, .intg-card2-icon, .intg-card2-hint a, .ttn-seat-vol, .ttn-print-card i, .ttn-print-card .print-icon ) { color: var(--accent); } :root[data-dlab-theme="d3"] .tpl-vars code { background: rgba(var(--dlab-glow-ink), .10); border-color: rgba(var(--dlab-glow-ink), .18); color: var(--primary-light); } :root[data-dlab-theme="d3"] .intg-card2-desc { color: var(--text-secondary); } /* бейджі стану інтеграцій ідуть за віссю U (дефолт '' — як є, зелені) */ :root[data-dlab-theme="d3"][data-dlab-d3s="mono"] .intg-badge-ok { background: rgba(238,201,139,.12); color: #eec98b; } :root[data-dlab-theme="d3"][data-dlab-d3s="muted"] .intg-badge-ok { background: rgba(143,174,148,.14); color: #8fae94; } /* ── Латунь: модалка накладної НП (раунд 18) — була ІНДИГО/фіолет-циан радіалами на #0f172a («загальний колір ніби інший») → теплий графіт, всі індиго-активи їдуть за металом теми ── */ :root[data-dlab-theme="d3"] .ttn-modal-content { background: radial-gradient(ellipse at 15% 10%, rgba(var(--dlab-glow-ink), .10) 0%, transparent 55%), radial-gradient(ellipse at 85% 5%, rgba(var(--dlab-glow-ink), .05) 0%, transparent 50%), #14151d; border-color: rgba(var(--dlab-glow-ink), .14); } :root[data-dlab-theme="d3"] .ttn-modal-ttn:hover { background: rgba(var(--dlab-glow-ink), .12); } :root[data-dlab-theme="d3"] .ttn-header-key:focus { border-color: rgba(var(--dlab-glow-ink), .45); } :root[data-dlab-theme="d3"] .ttn-f-input:focus { border-bottom-color: var(--primary); } :root[data-dlab-theme="d3"] .ttn-key-box:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--dlab-glow-ink), .12); } :root[data-dlab-theme="d3"] .ttn-cargo-pill:has(input:checked) { border-color: var(--primary); background: rgba(var(--dlab-glow-ink), .14); color: var(--primary-light); box-shadow: 0 4px 12px rgba(var(--dlab-glow-ink), .18); } :root[data-dlab-theme="d3"] .ttn-toggle-label:has(input:checked) { background: rgba(var(--dlab-glow-ink), .12); border-color: rgba(var(--dlab-glow-ink), .3); color: var(--primary-light); } :root[data-dlab-theme="d3"] .ttn-date-preset:hover { background: rgba(var(--dlab-glow-ink), .10); border-color: rgba(var(--dlab-glow-ink), .35); } :root[data-dlab-theme="d3"] .ttn-date-preset.active { background: rgba(var(--dlab-glow-ink), .18); border-color: rgba(var(--dlab-glow-ink), .55); color: var(--primary-light); } /* головна CTA модалки: латунне тло вже з --primary, але текст був білим і тінь зеленою */ :root[data-dlab-theme="d3"] .ttn-submit { color: #1c1206; box-shadow: 0 4px 12px rgba(var(--dlab-glow-ink), .25); } /* ── Латунь: налаштування служб доставки (раунд 18) ── */ /* вкладені тумблери оплат були зеленими (track rgba(16,185,129)) при латунних головних — рознобій */ :root[data-dlab-theme="d3"] .ds-switch input:checked + .ds-switch-track { background: rgba(var(--dlab-glow-ink), .25); border-color: rgba(var(--dlab-glow-ink), .45); } /* активна картка служби — рамка була emerald-хардкодом */ :root[data-dlab-theme="d3"] .ds-card.ds-active { border-color: rgba(var(--dlab-glow-ink), .3); background: linear-gradient(90deg, rgba(var(--dlab-glow-ink), .05) 0%, transparent 40%), var(--dlab-tile); } /* ── «Безкоштовна доставка» (рішення Івана, р.19-20) ── pending (янтарна) — помітна навмисно. applied — ТОЧНЕ дзеркало бейджа «ОПЛАЧЕНО»: стиль живе у style.css на тих самих змінних, тож ідентичність конструктивна в будь-якій темі. Локальні перекраски знято (р.20) — вони фарбували текст своїм зеленим і ламали дзеркало. */ /* Списки в описах товарів (обидва контейнери: сторінка товару і превʼю): глобальний reset обнуляє padding ul → буллети сідали в один рівень із текстом. НАШ рендер, не постачальник. Діє в усіх темах лаби. */ :root[data-dlab="on"] .product-desc-html :is(ul, ol) { padding-left: 22px; margin: 6px 0 10px; } :root[data-dlab="on"] .product-desc-html li { margin: 3px 0; } /* ── Вісь G: сяйво ── */ :root[data-dlab-theme="d3"][data-dlab-d3g="rich"] body::before { background: radial-gradient(ellipse at 22% -4%, rgba(var(--dlab-glow-ink), .10) 0%, transparent 42%), radial-gradient(ellipse at 100% 104%, rgba(var(--dlab-glow-ink), .06) 0%, transparent 48%); } :root[data-dlab-theme="d3"][data-dlab-d3g="off"] body::before { background: none; } /* ══════════ Раунд 22: модалка «Накладна» (перегляд ТТН) по темах ══════════ Корінь «шапки іншого кольору»: .ttn-modal-header — sticky з ВЛАСНИМ flat #0f172a; р.18 перефарбував лише тіло → шов. Р.22 садив шапку на базу тіла + фрагмент радіала — НЕДОСТАТНЬО: на градієнтному тілі смуга стику все одно читалась. Фінал (р.25): шапка ПРОЗОРА + backdrop-blur — правило внизу файлу, власних фонів шапки в темах більше нема. */ /* чип ключа (індиго-пігулка) та option-фони селектів — були холодні */ :root[data-dlab-theme="d3"] .ttn-header-key-label { background: rgba(var(--dlab-glow-ink), .10); border-color: rgba(var(--dlab-glow-ink), .22); } :root[data-dlab-theme="d3"] .ttn-header-key-label::before { color: var(--accent); } :root[data-dlab-theme="d3"] :is(.ttn-header-key, .ttn-key-box, .ttn-f-select) option { background: #1d1e28; } /* — Латунь: плитки друку — був холодний слейт #1e293b з білою рамкою («не очень красиво выглядят кнопки для печати») → теплий графіт із латунною рамкою і сяйвом на ховері; іконки вже accent з р.17 — */ :root[data-dlab-theme="d3"] .ttn-print-card { background: linear-gradient(165deg, rgba(var(--dlab-glow-ink), .08) 0%, transparent 55%), #1b1c26; border-color: rgba(var(--dlab-glow-ink), .16); } :root[data-dlab-theme="d3"] .ttn-print-card:hover { border-color: rgba(var(--dlab-glow-ink), .38); box-shadow: 0 6px 20px rgba(0,0,0,.35), 0 0 14px rgba(var(--dlab-glow-ink), .10); } :root[data-dlab-theme="d3"] .ttn-print-card span { color: var(--text-primary); } /* залишки індиго/циану у формі й перегляді */ :root[data-dlab-theme="d3"] .ttn-msg-text:focus { border-color: rgba(var(--dlab-glow-ink), .35); } :root[data-dlab-theme="d3"] .ttn-contact-btn:hover { border-color: rgba(var(--dlab-glow-ink), .35); } :root[data-dlab-theme="d3"] .ttn-f-select:focus { border-bottom-color: var(--primary); } :root[data-dlab-theme="d3"] .ttn-radio-pill:has(input:checked) { background: var(--primary); border-color: var(--primary); color: #1c1206; } /* — Поглиблення/Чорнило: чиста площина панелей теми. ЛІТЕРАЛИ, не var(--dlab-tile): токен їде за віссю «Плитки» (Скло N = біла альфа) → модалка ставала прозорою (баг р.22, зловлено р.24). Індиго/фіолет-радіали прод-оригіналу ЗНЯТО (р.25): «синее окошко не соответствует теме» — сторінки обох тем пласкі й холодні. — */ :root[data-dlab-theme="v1"] .ttn-modal-content { background: #121a2e; border-color: rgba(255,255,255,.10); } :root[data-dlab-theme="v2"] .ttn-modal-content { background: #0a101d; /* р.26: глибше за панелі сторінки — «чорнильність» */ border-color: rgba(255,255,255,.08); } /* — Світла: модалка була НЕДОТОРКАНОЮ — темне індиго-тіло, а текстові змінні вже темні → «синий вариант с мало читаемым текстом». Повний ремап: перегляд + форма створення — */ :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .ttn-modal-content { background: radial-gradient(ellipse at 12% 8%, rgba(214,245,238,.55) 0%, transparent 55%), radial-gradient(ellipse at 88% 6%, rgba(230,224,250,.50) 0%, transparent 50%), #f6f8fc; border-color: rgba(150,165,200,.50); box-shadow: 0 25px 60px rgba(40,60,110,.28); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .ttn-header-key { background-color: rgba(31,36,51,.05); border-color: rgba(31,36,51,.14); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) :is(.ttn-header-key, .ttn-key-box, .ttn-f-select) option { background: #ffffff; } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .ttn-modal-ttn { color: #047857; } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .ttn-modal-ttn:hover { background: rgba(5,150,105,.10); } /* інфо-картки: біле скло замість білої-альфи (на світлому невидима) */ :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .ttn-info-card { background: rgba(255,255,255,.66); border: 1px solid rgba(150,165,200,.35); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .ttn-info-card:hover { background: rgba(255,255,255,.88); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .ttn-info-card h4 { color: #1c2740; border-bottom-color: rgba(31,36,51,.10); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .ttn-info-row:hover { background: rgba(40,60,110,.05); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .ttn-info-row .lbl { color: #5b6880; } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .ttn-info-row .val { color: #10182b; } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .ttn-info-row.total-row { border-top-color: rgba(31,36,51,.12); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .ttn-info-row.total-row .val { color: #047857; } /* бейджі оплати: виношуємо глибокі l-тони (світлі emerald/amber бліді на білому) */ :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .ttn-pay-badge.paid { color: #15803d; border-color: rgba(21,128,61,.35); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .ttn-pay-badge.cod { color: #b45309; border-color: rgba(180,83,9,.35); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .ttn-pay-badge.free { color: #047857; border-color: rgba(4,120,87,.35); } /* SMS/Messenger */ :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .ttn-msg-header { color: #1c2740; } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .ttn-msg-text { background: rgba(255,255,255,.85); border-color: rgba(31,36,51,.16); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .ttn-msg-text:focus { border-color: rgba(14,116,144,.45); } /* плитки друку: біла картка, глибокий циан іконок */ :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .ttn-print-card { background: rgba(255,255,255,.85); border-color: rgba(31,36,51,.12); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .ttn-print-card:hover { box-shadow: 0 6px 20px rgba(40,60,110,.16); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) :is(.ttn-print-card i, .ttn-print-card .print-icon, .ttn-seat-vol) { color: #0e7490; } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .ttn-print-card span { color: #10182b; } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .ttn-contact-btn { background: #ffffff; border-color: rgba(31,36,51,.14); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .ttn-result-actions { border-top-color: rgba(31,36,51,.10); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .ttn-divider { background: linear-gradient(90deg, transparent, rgba(31,36,51,.12), transparent); } /* форма створення: підкреслення/бокси/пігулки були white-alpha → невидимі */ :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) :is(.ttn-f-input, .ttn-f-select) { border-bottom-color: rgba(31,36,51,.20); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .ttn-f-input:hover { border-bottom-color: rgba(31,36,51,.32); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .ttn-key-box { background-color: rgba(31,36,51,.045); border-color: rgba(31,36,51,.14); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .ttn-cargo-pill { background: rgba(31,36,51,.04); border-color: rgba(31,36,51,.12); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .ttn-cargo-pill:hover { background: rgba(31,36,51,.06); border-color: rgba(31,36,51,.25); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .ttn-cargo-pill:has(input:checked) { background: rgba(99,102,241,.10); border-color: #6366f1; color: #4338ca; } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .ttn-toggle-label { background: rgba(31,36,51,.04); border-color: rgba(31,36,51,.12); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .ttn-toggle-label:has(input:checked) { color: #4338ca; } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .ttn-toggle-slider { background: rgba(31,36,51,.18); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .ttn-radio-pill { background: rgba(31,36,51,.05); border-color: rgba(31,36,51,.12); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .ttn-radio-pill:hover { border-color: rgba(31,36,51,.25); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .ttn-price-payment { background: rgba(31,36,51,.035); border-color: rgba(31,36,51,.09); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .ttn-date-preset { background: rgba(31,36,51,.03); border-color: rgba(31,36,51,.14); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .ttn-date-preset.active { color: #4338ca; } /* ══════════ Раунд 23: статуси Взаєморозрахунків = палітра сторінки замовлень ══════════ Корінь «все статусы одинаковые»: статуси таблиці їдуть на токенах --bp-amber/cyan/emerald/rose, а базова Латунь перекрасила --bp-emerald у латунь (ГРОШІ: суми, комісія, чеки) → «Виконано» злився з wait-amber. Гроші лишаються латунними: done/pay-ok/pkg-emerald відвʼязуємо від грошового токена ПОЕЛЕМЕНТНО, по осі U ті ж тони, що в замовленнях. */ /* — база d3 (U='' «Яскраві»): статусам повертається прод-семантика — */ :root[data-dlab-theme="d3"] #balance-section .status-tone-done { color: #34d399; } :root[data-dlab-theme="d3"] #balance-section .status-tone-done .status-dot { background: #34d399; } :root[data-dlab-theme="d3"] #balance-section .pay-ok { color: #34d399; } :root[data-dlab-theme="d3"] #balance-section .ttn-stage-dot.pkg-emerald { background: #34d399; } /* — U=muted (дефолт Івана): work латунь / ship сіро-блакить / done шавлія / fail теракота (transit/ret вже їдуть muted-токенами cyan/rose) — */ :root[data-dlab-theme="d3"][data-dlab-d3s="muted"] #balance-section .status-tone-wait { color: #d9b075; } :root[data-dlab-theme="d3"][data-dlab-d3s="muted"] #balance-section .status-tone-wait .status-dot { background: #d9b075; } :root[data-dlab-theme="d3"][data-dlab-d3s="muted"] #balance-section .status-tone-done { color: #8fae94; } :root[data-dlab-theme="d3"][data-dlab-d3s="muted"] #balance-section .status-tone-done .status-dot { background: #8fae94; } :root[data-dlab-theme="d3"][data-dlab-d3s="muted"] #balance-section .pay-warn { color: #d9b075; } :root[data-dlab-theme="d3"][data-dlab-d3s="muted"] #balance-section .pay-ok { color: #8fae94; } :root[data-dlab-theme="d3"][data-dlab-d3s="muted"] #balance-section .ttn-stage-dot.pkg-amber { background: #d9b075; box-shadow: 0 0 5px rgba(217,176,117,.45); } :root[data-dlab-theme="d3"][data-dlab-d3s="muted"] #balance-section .ttn-stage-dot.pkg-emerald { background: #8fae94; box-shadow: 0 0 5px rgba(143,174,148,.5); } /* — U=mono: done — світліший металевий ступінь (як .delivered у mono) — */ :root[data-dlab-theme="d3"][data-dlab-d3s="mono"] #balance-section .status-tone-done { color: #eec98b; } :root[data-dlab-theme="d3"][data-dlab-d3s="mono"] #balance-section .status-tone-done .status-dot { background: #eec98b; } :root[data-dlab-theme="d3"][data-dlab-d3s="mono"] #balance-section .pay-ok { color: #eec98b; } :root[data-dlab-theme="d3"][data-dlab-d3s="mono"] #balance-section .ttn-stage-dot.pkg-emerald { background: #eec98b; box-shadow: 0 0 5px rgba(238,201,139,.5); } /* — чипи-фільтри СТАТУС: крапки — ІНЛАЙН-стилі в index.html → !important (ловушка 11; Phase 1 перенесе кольори в класи). Яскрава вісь — чипи вже прод-кольорів, правило не потрібне. — */ :root[data-dlab-theme="d3"][data-dlab-d3s="muted"] .balance-chip[data-status-group="in_work"] .balance-chip-dot { background: #d9b075 !important; } :root[data-dlab-theme="d3"][data-dlab-d3s="muted"] .balance-chip[data-status-group="shipping"] .balance-chip-dot { background: #8fa8b8 !important; } :root[data-dlab-theme="d3"][data-dlab-d3s="muted"] .balance-chip[data-status-group="completed"] .balance-chip-dot { background: #8fae94 !important; } :root[data-dlab-theme="d3"][data-dlab-d3s="mono"] .balance-chip[data-status-group="in_work"] .balance-chip-dot { background: #d9b075 !important; } :root[data-dlab-theme="d3"][data-dlab-d3s="mono"] .balance-chip[data-status-group="shipping"] .balance-chip-dot { background: #e5c9a0 !important; } :root[data-dlab-theme="d3"][data-dlab-d3s="mono"] .balance-chip[data-status-group="completed"] .balance-chip-dot { background: #eec98b !important; } /* — ховер-поповер історії статусу: бейджі там на ХАРДКОДАХ (#fbbf24/#67e8f9/ #34d399/#fda4af), токени d3 їх не беруть → під muted мутимо і їх — */ :root[data-dlab-theme="d3"][data-dlab-d3s="muted"] .balance-pop-stat.status-tone-wait { color: #d9b075; border-color: rgba(217,176,117,.3); } :root[data-dlab-theme="d3"][data-dlab-d3s="muted"] .balance-pop-stat.status-tone-transit { color: #8fa8b8; border-color: rgba(143,168,184,.3); } :root[data-dlab-theme="d3"][data-dlab-d3s="muted"] .balance-pop-stat.status-tone-done { color: #8fae94; border-color: rgba(143,174,148,.35); } :root[data-dlab-theme="d3"][data-dlab-d3s="muted"] .balance-pop-stat.status-tone-done .status-dot { background: #8fae94; } :root[data-dlab-theme="d3"][data-dlab-d3s="muted"] .balance-pop-stat.status-tone-ret { color: #c78d7d; border-color: rgba(199,141,125,.35); } /* ══════════ Раунд 24: модалка ТТН — суцільність і сім'я тем; CTA «Браш» ══════════ */ /* «Заливка сплошная и заходит на шапку, никакого разделителя и другой заливки отдельно» (р.25). У шапки НЕМАЄ власного фону — прозора, крізь неї видно заливку модалки (та САМА, не копія → стику нема фізично). Sticky-читабельність при скролі дає backdrop-blur: контент морозиться під шапкою. Підхід р.22 «база тіла + фрагмент градієнта» знято — на градієнтному тілі смуга стику все одно читалась. */ :root:is([data-dlab-theme="d3"], [data-dlab-theme="v1"], [data-dlab-theme="v2"], [data-dlab-theme="olive"], [data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .ttn-modal-header { background: transparent; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: none; } /* Плитки друку в холодних темах: слейт #1e293b «выбивается из общей массы» → крок світліше бази модалки, в сім'ї теми */ :root[data-dlab-theme="v1"] .ttn-print-card { background: #1a2440; } /* v2 (р.26): контурні, у підписі теми */ :root[data-dlab-theme="v2"] .ttn-print-card { background: rgba(255,255,255,.02); border-color: rgba(255,255,255,.12); } :root[data-dlab-theme="v2"] .ttn-print-card:hover { border-color: rgba(6,182,212,.4); } /* ── Вісь M, третє значення «Браш» — радіально шліфований метал (референс Івана: radial brushed metal). Два конічні шари, без картинок: дрібний repeating-conic = штрихи шліфовки, 4-пелюстковий conic = анізотропний X-блік. Тони їдуть за віссю A (пісок/мідь/персик). ── */ :root[data-dlab-theme="d3"][data-dlab-d3c="brush"] :is(.btn-primary, #balance-section #balance-request-submit, .bp-modal-btn-primary, .ttn-submit) { background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.09) 0deg, transparent .55deg, rgba(0,0,0,.10) 1.05deg, transparent 1.6deg 2.1deg), conic-gradient(from 205deg at 50% 50%, var(--primary-dark) 0deg, var(--primary) 45deg, color-mix(in srgb, var(--primary-light) 78%, #fff 22%) 90deg, var(--primary) 135deg, var(--primary-dark) 180deg, var(--primary) 225deg, color-mix(in srgb, var(--primary-light) 78%, #fff 22%) 270deg, var(--primary) 315deg, var(--primary-dark) 360deg); border: 1px solid color-mix(in srgb, var(--primary-light) 55%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.3), 0 6px 16px -4px rgba(0,0,0,.55); color: #231407; text-shadow: 0 1px 0 rgba(255,255,255,.26); } :root[data-dlab-theme="d3"][data-dlab-d3c="brush"] :is(.btn-primary, #balance-section #balance-request-submit, .bp-modal-btn-primary, .ttn-submit) i { color: #231407; } :root[data-dlab-theme="d3"][data-dlab-d3c="brush"] :is(.btn-primary, #balance-section #balance-request-submit, .bp-modal-btn-primary, .ttn-submit):hover:not(:disabled) { filter: brightness(1.07); } /* ══════════ Раунд 26: модалка ТТН — власний характер Поглиблення/Чорнило ══════════ Після зняття індиго (р.25) обидві модалки стали майже нерозрізненними. Ідентичність — з рішень Івана по розрахункових плитках (р.19): Поглиблення = «Темніші» (м'які ЗАЛИВНІ картки), Чорнило = «Контур» (чорнильна база + КОНТУРНІ картки). */ /* — Поглиблення: заливні м'які картки — */ :root[data-dlab-theme="v1"] .ttn-info-card { background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.05); } :root[data-dlab-theme="v1"] .ttn-info-card:hover { background: rgba(255,255,255,.075); } /* — Чорнило: контурні картки на чорнильній базі — */ :root[data-dlab-theme="v2"] .ttn-info-card { background: transparent; border: 1px solid rgba(255,255,255,.10); } :root[data-dlab-theme="v2"] .ttn-info-card:hover { background: rgba(255,255,255,.03); } /* textarea на глибшій базі #0a101d губилась — чорнильний inset */ :root[data-dlab-theme="v2"] .ttn-msg-text { background: rgba(2,6,16,.45); border-color: rgba(255,255,255,.07); } /* ══════════ Раунд 27: вісь «Нові замовл.» — виділення неприйнятих у роботу ══════════ Пульсуюча крапка статусу «выделяется не сильно больше других» → варіанти від помірних до агресивних. Підсвітка живе недовго (картка втрачає .order-new щойно приймуть) — агресія допустима. Колір уваги — янтар (семантика «Новий»/wait) у всіх темах. Діє на сторінці замовлень. */ /* — Пунктир (р.29, було «Рамка»): суцільний янтар конфліктував із жовтим «в роботі» (ховер/маркери). Обидві Іванові ідеї разом: НЕсуцільна рамка + невикористаний колір. Фуксія — єдиний вільний від семантики яскравий (янтар=робота, циан=дорога, зелень=готово, роза=скасовано, фіолет=paid). — */ :root[data-dlab="on"][data-dlab-neworder="frame"] .order-card.order-new { border: 1.5px dashed rgba(217,70,239,.60); box-shadow: 0 0 16px -5px rgba(217,70,239,.30); } /* — Заливка (р.30: «не работает совсем» — .09 янтаря по ТЕПЛІЙ Латуні = камуфляж; світліший янтар і x1.7 сили, читається і на теплих темах) — */ :root[data-dlab="on"][data-dlab-neworder="wash"] .order-card.order-new { background: linear-gradient(0deg, rgba(251,191,36,.15), rgba(251,191,36,.15)), var(--dlab-tile, var(--glass)); border-color: rgba(245,158,11,.45); } /* — Водяний знак (р.30: SVG-фон «не работает совсем» — data-URI міг різатись CSP + янтар-камуфляж → БЕЗ картинок: один великий діагональний напис через ::after; рядок центрований і коротший за картку — кліп не потрібен) — */ :root[data-dlab="on"][data-dlab-neworder="pattern"] .order-card.order-new { border-color: rgba(245,158,11,.30); } :root[data-dlab="on"][data-dlab-neworder="pattern"] .order-card.order-new::after { content: "НОВЕ ЗАМОВЛЕННЯ"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transform: rotate(-12deg); font-size: 44px; font-weight: 800; letter-spacing: .18em; color: rgba(251,191,36,.13); white-space: nowrap; pointer-events: none; } /* — Маяк (р.29: капсула top:-9px різалась overflow'ом → флажок, що звисає з ВНУТРІШНЬОЇ кромки, top:0 — нічому обрізатись) + пульс сяйва — */ @keyframes dlab-beacon { 0%, 100% { box-shadow: 0 0 0 1px rgba(245,158,11,.40), 0 0 0 0 rgba(245,158,11,0); } 50% { box-shadow: 0 0 0 1px rgba(245,158,11,.65), 0 0 22px 2px rgba(245,158,11,.20); } } :root[data-dlab="on"][data-dlab-neworder="beacon"] .order-card.order-new { border-color: rgba(245,158,11,.60); animation: dlab-beacon 1.8s ease-in-out infinite; } :root[data-dlab="on"][data-dlab-neworder="beacon"] .order-card.order-new::after { content: "НОВЕ"; position: absolute; top: 0; right: 22px; padding: 3px 10px 4px; border-radius: 0 0 9px 9px; background: linear-gradient(180deg, #f59e0b, #d97706); color: #241203; font-size: 10px; font-weight: 800; letter-spacing: .08em; box-shadow: 0 3px 8px rgba(0,0,0,.30); pointer-events: none; } /* — Кнопка: інжект js/design-lab.js, смикає ШТАТНИЙ handleStatusChange (з усіма підтвердженнями). Продуктова доля — якщо Іван обере, переноситься в app.js як справжня фіча (ADR-003). — */ .dlab-accept-bar { display: none; } :root[data-dlab="on"][data-dlab-neworder="accept"] .dlab-accept-bar { display: block; padding: 0 16px 14px; } :root[data-dlab="on"][data-dlab-neworder="accept"] .order-card.order-new { border-color: rgba(245,158,11,.35); } .dlab-accept-btn { width: 100%; padding: 10px 16px; border: none; border-radius: 10px; background: linear-gradient(180deg, #fbbf24, #d97706); color: #241203; font-weight: 700; font-size: 14px; font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 4px 14px -4px rgba(245,158,11,.40); transition: transform .15s, filter .15s; } .dlab-accept-btn:hover { transform: translateY(-1px); filter: brightness(1.06); } /* — Кнопка · статус (р.29, уточнено р.30): CTA «Прийняти в роботу» ЗАМІСТЬ пілюлі статусу (рішення Івана: «убрать текущий статус как блок, обводки не надо»). Пілюля ховається лише на .order-new у цьому режимі; доступ до скасувань — через сторінку замовлення. — */ /* Р.38: ховаємо пілюлю ЛИШЕ коли інжект-кнопка вже на місці (:has) — якщо design-lab.js впав/не довантажився, вендор не лишається без жодного контролу статусу (graceful degradation). */ :root[data-dlab="on"][data-dlab-neworder="accept2"] .order-card.order-new .status-wrapper:has(.dlab-accept-mini) .order-status { display: none; } .dlab-accept-mini { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; margin: 0; border: none; border-radius: 8px; background: linear-gradient(180deg, #fbbf24, #d97706); color: #241203; font-weight: 700; font-size: 12.5px; font-family: inherit; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 3px 10px -3px rgba(245,158,11,.5); transition: transform .15s, filter .15s; } .dlab-accept-mini:hover { transform: translateY(-1px); filter: brightness(1.06); } /* ══════════ Раунд 28: вкладка «Готові до заявки» в Латуні; модалка ТТН слідує базі ══════════ */ /* Вкладка active[eligible] їхала на --bp-emerald (= латунь-гроші в d3): градієнт із двох близьких латунних стопів ≈ пласко («объёмности не ощущаю»), зелена ідентичність зникла — знову ловушка №16 «один токен — два смисли». Сусідні вкладки (янтар/слейт) — хардкоди, тому лишились «старими красивими». Фікс: зелень у сім'ї приглушених статусів (шавлія, трохи соковитіша за статусну #8fae94) + ТА САМА об'ємна рецептура прод-вкладок: світлий верх → глибокий низ, inset-блік, кольорова тінь. */ :root[data-dlab-theme="d3"] #balance-section .balance-tab.active[data-balance-view="eligible"] { color: #0e1f14; background: linear-gradient(180deg, #9fc9a4, #6da077); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 3px 8px -2px rgba(134,178,142,.4); } :root[data-dlab-theme="d3"] #balance-section .balance-tab.active[data-balance-view="eligible"] .balance-tab-count { background: rgba(0,0,0,.2); color: #0e1f14; } :root[data-dlab-theme="d3"] #balance-section .balance-tab.active[data-balance-view="eligible"] i { color: #0e1f14; } /* Модалка ТТН була прибита до теплого графіту #14151d і НЕ слідувала осі K «База» — Іван правильно відчув: на чорній базі вона «походить на светлое». Тепер чорна база = чорніша нейтральна модалка (сім'я .bp-modal black #16161b→#101014) і плитки друку без теплого підтону. */ :root[data-dlab-theme="d3"][data-dlab-d3b="black"] .ttn-modal-content { background: radial-gradient(ellipse at 15% 10%, rgba(var(--dlab-glow-ink), .10) 0%, transparent 55%), radial-gradient(ellipse at 85% 5%, rgba(var(--dlab-glow-ink), .05) 0%, transparent 50%), #101014; } :root[data-dlab-theme="d3"][data-dlab-d3b="black"] .ttn-print-card { background: linear-gradient(165deg, rgba(var(--dlab-glow-ink), .08) 0%, transparent 55%), #17171d; } :root[data-dlab-theme="d3"][data-dlab-d3b="black"] :is(.ttn-header-key, .ttn-key-box, .ttn-f-select) option { background: #18181e; } /* ══════════ Раунд 31: сторінка замовлення — переписка як мессенджер ══════════ Вісь D «Стор. замовл.»: chat = мессенджер-скін (референс prom-chat/ Telegram), split = те саме + робоче місце «картка ліворуч — діалог праворуч». Спільний скін гейтиться на ПРИСУТНІСТЬ атрибута (обидва значення). Прод-розмітка не змінюється — тільки CSS поверх. */ /* — Панель чату: сім'я плиток сторінки, глибша стрічка повідомлень. Р.39: paint СКОУПЛЕНО на #order-detail-content — у месенджері .order-chat живе всередині острова .msgr-thread і має лишатись прозорим (подвійна поверхня читалась «синьою плиткою під месенджером» у Чорнилі). — */ :root[data-dlab="on"][data-dlab-orderpage] #order-detail-content .order-chat { background: var(--dlab-tile, var(--glass)); border-color: var(--border); border-radius: 16px; } :root[data-dlab="on"][data-dlab-orderpage] .order-chat .chat-header { padding: 13px 18px; border-bottom-color: rgba(255,255,255,.05); } :root[data-dlab="on"][data-dlab-orderpage] .order-chat .chat-messages { background: rgba(0,0,0,.16); padding: 18px 20px; gap: 10px; } /* — Пузирі v2 (р.33): ширина репліки. Р.39: обмежуємо САМ .bubble, а не ряд — width-capped ряд у колонковому флексі прилипав до лівого краю, і власні (out) репліки висіли з «шальним» відступом справа. — */ :root[data-dlab="on"][data-dlab-orderpage] .chat-msg .bubble { max-width: 72%; } /* — Композер (р.39): пігулка+круглий send тепер ПРОД (style.css) — лаба лишає тільки тематичні тінти. Абсолютний send-круг знято: він жив без relative-якоря і в режимі «Клієнту» тікав за межі панелі. — */ :root[data-dlab="on"][data-dlab-orderpage] .order-chat .chat-input-wrap { background: rgba(255,255,255,.03); border-top-color: rgba(255,255,255,.05); } :root[data-dlab="on"][data-dlab-orderpage] .chat-pill { background: rgba(0,0,0,.22); border-color: rgba(255,255,255,.09); } :root[data-dlab="on"][data-dlab-orderpage] .chat-pill:focus-within { border-color: rgba(var(--dlab-glow-ink, 16,185,129), .45); } :root[data-dlab="on"][data-dlab-orderpage] .chat-load-more-btn { border-radius: 999px; } :root[data-dlab="on"][data-dlab-orderpage] .chat-empty { padding: 46px 0; gap: 10px; } /* — Тематичні акценти: чорнило кнопки send за темою; світлі — біла пігулка. :not(--customer) — у customer-режимі кнопка бурштинова (var(--warning)), біле чорнило світлих там давало б ~2:1 контраст. — */ :root[data-dlab-theme="d3"] .chat-send-btn { color: #1c1206; } :root[data-dlab-theme="olive"] .chat-send-btn { color: #16200a; } :root[data-dlab-theme="olivel"] .order-chat:not(.order-chat--customer) .chat-send-btn { color: #ffffff; } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"]) .order-chat:not(.order-chat--customer) .chat-send-btn { color: #ffffff; } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"])[data-dlab-orderpage] .order-chat .chat-messages { background: rgba(31,36,51,.045); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"])[data-dlab-orderpage] .chat-pill { background: rgba(255,255,255,.85); border-color: rgba(31,36,51,.16); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"])[data-dlab-orderpage] .order-chat .chat-input-wrap { background: rgba(31,36,51,.03); border-top-color: rgba(31,36,51,.08); } /* Р.39: бурштинова рамка пігулки в режимі «Клієнту» — інакше аффорданс адресата гинув під тінтами лаби (специфічність вище за обидва base-правила) */ :root[data-dlab="on"][data-dlab-orderpage] .order-chat--customer .chat-pill { border-color: rgba(245,158,11,.45); } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"])[data-dlab-orderpage] .order-chat--customer .chat-pill { border-color: rgba(180,83,9,.5); } /* — Компоновки р.32 (сплити/навпіл/шухляда/віджет) ЗНЯТО р.33 — вибраковка Івана: сплити/навпіл «отстой», шухляда+віджет ховають важливий діалог. Разом із ними помер і flex-баг min-height:auto (стрічка не стискалась → композер за обрізом, скрол мертвий, «показывает первое сообщение»). — */ /* — Єдиний блок (р.33, напрям Івана: «может это вообще единый блок»): картка і чат зливаються в ОДНУ панель — картка втрачає нижні кути, чат — верхні і рамку стику; нижня рамка картки стає внутрішнім розділювачем. Темніша стрічка повідомлень (скін р.31) читається як вбудована секція панелі — */ :root[data-dlab="on"][data-dlab-orderpage="unified"] #order-detail-content > .order-card { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } :root[data-dlab="on"][data-dlab-orderpage="unified"] #order-detail-content > .order-chat { margin-top: 0; border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; } /* Р.39: скоуп на сторінку замовлення — без нього ліміт бив і стрічку месенджера (там flex:1 на всю висоту острова, style.css:5399). Р.48 (2026-07-26): ліміт ЗНЯТО — висоту тепер тримає flex-ланцюжок (.main-content → #order-detail-section → #order-detail-content → .order-chat → .chat-messages, style.css). Через min(520px,60vh) чат не дотягувався до низу плити, і під композером зяяла порожнеча (скарга Івана). Селектор лишаємо (специфічність вища за style.css), але з max-height:none. */ :root[data-dlab="on"][data-dlab-orderpage="unified"] #order-detail-content .order-chat .chat-messages { max-height: none; } /* — Вкладки (р.32): [Замовлення | Переписка] — по одному виду на екран, максимум простору кожному. Таб-бар — інжект design-lab.js — */ #dlab-ordertabs { display: inline-flex; gap: 6px; padding: 4px; margin-bottom: 14px; border: 1px solid var(--border, rgba(255,255,255,.1)); border-radius: 12px; background: rgba(255,255,255,.03); } #dlab-ordertabs button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 18px; border: none; border-radius: 9px; background: transparent; color: var(--text-secondary); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background .15s, color .15s; } #dlab-ordertabs button:hover { color: var(--text-primary); } #dlab-ordertabs button.on { background: var(--primary); color: #071f16; } :root[data-dlab-theme="d3"] #dlab-ordertabs button.on { color: #1c1206; } :root[data-dlab-ordertab="card"] #order-detail-content > .order-chat { display: none; } :root[data-dlab-ordertab="chat"] #order-detail-content > .order-card { display: none; } :root[data-dlab-ordertab="chat"] #order-detail-content > .order-chat { margin-top: 0; } :root[data-dlab-ordertab="chat"] .order-chat .chat-messages { max-height: calc(100vh - 320px); } /* ═══ Ось «Накладна» (invoice) = flat ═══ — властивості скопійовані з еталону order.css (моноліт-layout, як зробив Іван): ОДИН суцільний затухаючий вертикальний роздільник між колонками (як .column-left::after), безрамкові секції (як flat .glass-card), заголовки як .section-title (caps), а горизонтальний роздільник — ЛИШЕ де реальний розрив (перед повідомленнями). Дефолт '' (Бокси) недоторканний. Роздільники — фон-градієнти (пітфол №18). */ /* безрамкові секції: .glass-card{ background:none; border:none; padding:16px 0 } */ :root[data-dlab-invoice="flat"] .ttn-result-wrap .ttn-info-card { background: transparent; border: none; border-radius: 0; backdrop-filter: none; padding: 16px 0; } :root[data-dlab-invoice="flat"] .ttn-result-wrap .ttn-info-card:hover { background: transparent; } /* дві колонки + ОДИН центральний затухаючий роздільник (= .column-left::after) */ :root[data-dlab-invoice="flat"] .ttn-result-wrap .ttn-info-grid { gap: 0 44px; margin-bottom: 6px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.1) 20%, rgba(255,255,255,.1) 80%, transparent) 50% 0 / 1px 100% no-repeat; } /* заголовок секції = .section-title (13px, caps, letter-spacing .08em, 600, t3) */ :root[data-dlab-invoice="flat"] .ttn-result-wrap .ttn-info-card h4, :root[data-dlab-invoice="flat"] .ttn-result-wrap .ttn-msg-header { border-bottom: none; padding-bottom: 0; margin-bottom: 14px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: #94a3b8; } /* рядки: ПОВЕРТАЄМО hover-підсвітку (важливий відклик — прибрав помилково), але margin трохи ширший за контент → лишається зазор до центрального роздільника, підсвітка на нього не наповзає */ :root[data-dlab-invoice="flat"] .ttn-result-wrap .ttn-info-row { margin: 0 -8px; padding: 4px 8px; border-radius: 6px; } :root[data-dlab-invoice="flat"] .ttn-result-wrap .ttn-info-row:hover { background: rgba(255,255,255,.045); } /* підсумковий рядок «До оплати»: суцільна рамка → затухаючий роздільник (як інші) */ :root[data-dlab-invoice="flat"] .ttn-result-wrap .ttn-info-row.total-row { border-top: 1px solid transparent; border-image: linear-gradient(90deg, transparent, rgba(255,255,255,.1) 12%, rgba(255,255,255,.1) 88%, transparent) 1; } /* друк документів: важкі #1e293b-бокси → м'які напівпрозорі плитки, без 3D-ліфту */ :root[data-dlab-invoice="flat"] .ttn-result-wrap .ttn-print-card { background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.07); border-radius: 10px; } :root[data-dlab-invoice="flat"] .ttn-result-wrap .ttn-print-card:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); transform: none; box-shadow: none; } /* ── Друк-форми · «Список» (print=list): плитки → рядки, дії проявляються на ховер ── */ :root[data-dlab-print="list"] .ttn-result-wrap .ttn-print-cards { flex-direction: column; gap: 2px; } :root[data-dlab-print="list"] .ttn-result-wrap .ttn-print-card { display: flex; flex: 0 0 auto; min-width: 0; flex-direction: row; align-items: center; text-align: left; gap: 12px; background: transparent; border: none; border-radius: 8px; padding: 8px; } :root[data-dlab-print="list"] .ttn-result-wrap .ttn-print-card:hover { background: rgba(255,255,255,.045); transform: none; box-shadow: none; } :root[data-dlab-print="list"] .ttn-result-wrap .ttn-print-card > i { margin: 0; font-size: 1.15rem; } :root[data-dlab-print="list"] .ttn-result-wrap .ttn-print-card .double-icon { margin: 0; } :root[data-dlab-print="list"] .ttn-result-wrap .ttn-print-card span { flex: 1; font-size: .9rem; } /* дії інлайн справа, проявляються на ховер (opacity — без стрибка лейауту) */ :root[data-dlab-print="list"] .ttn-result-wrap .ttn-print-actions { display: flex; position: static; margin-left: auto; background: transparent; backdrop-filter: none; padding: 0; opacity: 0; transition: opacity .15s; } :root[data-dlab-print="list"] .ttn-result-wrap .ttn-print-card:hover .ttn-print-actions { opacity: 1; } :root[data-dlab-print="list"] .ttn-result-wrap .ttn-print-action { color: #94a3b8; } :root[data-dlab-print="list"] .ttn-result-wrap .ttn-print-action:hover { color: #fff; background: rgba(255,255,255,.12); } /* у списку прибираємо «ТТН 2 копії» (3-я картка) — рішення Івана */ :root[data-dlab-print="list"] .ttn-result-wrap .ttn-print-cards .ttn-print-card:nth-child(3) { display: none; } /* ── Друк-форми · «Пігулки» (print=pills): компактні пігулки в ряд ── */ :root[data-dlab-print="pills"] .ttn-result-wrap .ttn-print-cards { flex-wrap: wrap; gap: 8px; } :root[data-dlab-print="pills"] .ttn-result-wrap .ttn-print-card { display: flex; flex: 0 0 auto; flex-direction: row; align-items: center; gap: 8px; text-align: left; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 999px; padding: 7px 14px; } :root[data-dlab-print="pills"] .ttn-result-wrap .ttn-print-card:hover { background: rgba(255,255,255,.07); } :root[data-dlab-print="pills"] .ttn-result-wrap .ttn-print-card > i { margin: 0; font-size: 1rem; } :root[data-dlab-print="pills"] .ttn-result-wrap .ttn-print-card .double-icon { margin: 0; } :root[data-dlab-print="pills"] .ttn-result-wrap .ttn-print-card span { font-size: .82rem; white-space: nowrap; } /* блок повідомлень: той самий центральний роздільник + ОДИН горизонтальний затухаючий розрив зверху (єдина реальна межа «інфо → повідомлення») */ :root[data-dlab-invoice="flat"] .ttn-result-wrap .ttn-msg-grid { gap: 0 44px; padding-top: 18px; margin-top: 2px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.08) 8%, rgba(255,255,255,.08) 92%, transparent) 0 0 / 100% 1px no-repeat, linear-gradient(180deg, transparent, rgba(255,255,255,.1) 24%, rgba(255,255,255,.1) 80%, transparent) 50% 18px / 1px calc(100% - 18px) no-repeat; } :root[data-dlab-invoice="flat"] .ttn-result-wrap .ttn-msg-grid > div { padding: 4px 0 0; } /* ═══ F8: чат-пузирі per-тема ══════════════════════════════════════════ --bubble-in/--bubble-out задані в style.css :root (дарк-дефолт: емеральд-тінт out). Пузирі — токен-керована поверхня (НЕ частина .order-card glass-:is()-машинерії, css-pitfall #22 незастосовний): досить перекрити токени. Текст = --text-primary (світлі теми його інвертують → читабельно), рамка = --border. */ /* Дарк-акцентні теми: out-пузир під колір акценту теми (замість базового емеральда) */ :root[data-dlab-theme="d3"] { --bubble-out: rgba(201,160,106,.18); } /* латунь */ :root[data-dlab-theme="olive"] { --bubble-out: rgba(148,169,79,.20); } /* олива */ /* Світлі теми: пузирі на світлому склі — нейтральний in + акцентний, але легкий out */ :root[data-dlab-theme="l1"], :root[data-dlab-theme="l2"] { --bubble-in: rgba(20,30,55,.05); --bubble-out: rgba(5,150,105,.14); } :root[data-dlab-theme="olivel"] { --bubble-in: rgba(38,43,28,.055); --bubble-out: rgba(95,115,38,.14); } /* ── Р.38: плашка «оверрайд лаби» в пікері тем — світлі теми ── Базовий бурштин #f59e0b на білому склі нечитабельний (~2:1); темніший, як у .not-paid-badge світлих (#b45309). */ :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .theme-lab-note { color: #b45309; background: rgba(180, 83, 9, .08); border-color: rgba(180, 83, 9, .3); } /* ═══════════ Р.39: МЕСЕНДЖЕР — темізація + вісь компоновки ═══════════ */ /* Острови месенджера слідують плитці теми (раніше var(--surface) — у Чорнилі давав чужий navy-моноліт) */ :root[data-dlab="on"] :is(.msgr-list, .msgr-thread) { background: var(--dlab-tile, var(--surface)); border-color: var(--border); } /* headerless-геометрія: вся висота мінус паддінги .main-content (24+24) — прибирає залишок мертвої смуги під композером у темах */ :root[data-dlab="on"] .msgr { height: calc(100vh - 48px); } @media (max-width: 768px) { /* мобільний фолбек повертає шапку: 60px + паддінги 16+16 */ :root[data-dlab="on"] .msgr { height: calc(100vh - 92px); } } /* ── Вісь «Месенджер» (msgr): '' острівки / full вся площа / card один острів ── */ /* FULL — патерн клієнт-чату «Клієнти»: нуль острівків, панелі впритул, розділення тоном і 1px-бордером, площа до країв контент-зони */ :root[data-dlab-msgr="full"] #messenger-section { max-width: none; } :root[data-dlab-msgr="full"] .msgr { margin: -24px; height: 100vh; gap: 0; } :root[data-dlab-msgr="full"] .msgr-list { border: none; border-right: 1px solid var(--border); border-radius: 0; background: var(--dlab-sidebg, var(--surface)); } :root[data-dlab-msgr="full"] .msgr-thread { border: none; border-radius: 0; background: transparent; } @media (max-width: 768px) { :root[data-dlab-msgr="full"] .msgr { margin: -16px -12px; height: calc(100vh - 60px); } } /* CARD — компроміс: ОДИН суцільний острів, список і тред у спільній плиті з внутрішнім розділювачем */ :root[data-dlab-msgr="card"] .msgr { gap: 0; } :root[data-dlab-msgr="card"] .msgr-list { border-radius: 16px 0 0 16px; border-right: none; } :root[data-dlab-msgr="card"] .msgr-thread { border-radius: 0 16px 16px 0; border-left: 1px solid var(--border); } @media (max-width: 900px) { /* одноколонковий режим: панель сама по собі → повні радіуси, без шва */ :root[data-dlab-msgr="card"] .msgr-list { border-radius: 16px; border-right: 1px solid var(--border); } :root[data-dlab-msgr="card"] .msgr-thread { border-radius: 16px; } } /* ── Вісь «Репліки» (bub): '' як є / steel сталь / quiet тихіші / outline контурні. Кольорові значення крутять ТОКЕН --bubble-out (не background напряму) — пертемні F8-переозначення вище, вісь у кінці файла перемагає каскадом. Бурштинові репліки «Клієнту» свідомо не чіпаємо (семантика адресата). ── */ :root[data-dlab-bub="steel"] { --bubble-out: rgba(86, 118, 175, .24); } :root[data-dlab-bub="steel"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) { --bubble-out: rgba(70, 100, 160, .15); } :root[data-dlab-bub="quiet"] { --bubble-out: rgba(255, 255, 255, .07); } :root[data-dlab-bub="quiet"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) { --bubble-out: rgba(20, 30, 55, .06); } :root[data-dlab-bub="outline"] .chat-msg:not(.chat-msg--customer) .bubble { background: transparent; /* лише color+width, БЕЗ border-style — інакше шортхенд стирав dashed прихованих (.chat-msg--hidden) повідомлень */ border-color: var(--border-light); border-width: 1px; } :root[data-dlab-bub="outline"] .chat-msg.out:not(.chat-msg--customer) .bubble { border-color: rgba(var(--dlab-glow-ink, 16, 185, 129), .4); } /* ── Р.40: customer-бурштин на СВІТЛИХ темах — хінт, лейбл «→ Клієнту», активний тумблер: #f59e0b на білому ~2:1 → темніший #b45309 (канон-патерн .not-paid-badge). !important — бо base-лейбл сам з !important. ── */ :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) :is(.chat-cust-hint, .chat-msg-cust-label) { color: #b45309 !important; } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .chat-aud-btn[data-mode="customer"].chat-aud-btn--active { color: #b45309; background: rgba(180, 83, 9, .12); } /* ── Р.41: флеш чіпа голосового на СВІТЛИХ темах — #f59e0b кільце ~2:1, темніший бурштин за каноном р.40 ── */ @keyframes chat-chip-flash-deep { 0%, 55% { box-shadow: 0 0 0 2px #b45309; } 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } } :root[data-dlab="on"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"]) .chat-attach-chip--flash { animation-name: chat-chip-flash-deep; } /* ═══ Р.44 v3: сторінка замовлення — рамку і фон несе КОНТЕЙНЕР ═══ Дві попередні ітерації синхронізували рамки ДВОХ блоків — завжди лишався шов або розбіжність (плюс скелетон жив у #order-detail-loading і правил не отримував — на завантаженні «два блоки зросталися»). Тепер плита одна: контейнер (#order-detail-content і скелетон-обгортка) має tile-фон, рамку і радіус; картка/чат/скелетони — прозорі шари БЕЗ власного хрому. Нема двох рамок — нема чому не співпадати. overflow не ріжемо (дропдауни статусу мусять вилазити за межі). */ :root[data-dlab="on"][data-dlab-orderpage="unified"] #order-detail-content:has(> .order-card), :root[data-dlab="on"][data-dlab-orderpage="unified"] #order-detail-loading .od-skeleton { background: var(--dlab-tile, var(--glass)); border: 1px solid var(--border); border-radius: 16px; } :root[data-dlab="on"][data-dlab-orderpage="unified"] #order-detail-loading .od-skeleton { gap: 0; } :root[data-dlab="on"][data-dlab-orderpage="unified"] #order-detail-content > .order-card, :root[data-dlab="on"][data-dlab-orderpage="unified"] #order-detail-content > .order-card:hover, :root[data-dlab="on"][data-dlab-orderpage="unified"] #order-detail-loading .od-skeleton-card { background: none; border: none; box-shadow: none; border-radius: 0; margin-bottom: 0; /* р.45: у .order-card прод-blur(16px) — ПРЯМОКУТНИЙ blur-бокс прозорого шару розмивав заокруглені кути контейнера («рве уголки») */ backdrop-filter: none; -webkit-backdrop-filter: none; } /* кутовий маркер-трикутник статусу — теж шум на сторінці одного замовлення */ :root[data-dlab="on"][data-dlab-orderpage="unified"] #order-detail-content > .order-card::before { display: none; } :root[data-dlab="on"][data-dlab-orderpage="unified"] #order-detail-content > .order-chat, :root[data-dlab="on"][data-dlab-orderpage="unified"] #order-detail-loading .od-skeleton > .order-chat { background: none; border: none; border-radius: 0; margin-top: 0; backdrop-filter: none; -webkit-backdrop-filter: none; /* прод overflow:hidden чату тут зайвий: плита — контейнер, а обрізання ламало б випадайки; радіусів у шару однаково нема */ overflow: visible; } /* нижні кути плити: тінт композера прямокутний — заокруглюємо під контейнер */ :root[data-dlab="on"][data-dlab-orderpage="unified"] #order-detail-content > .order-chat .chat-input-wrap, :root[data-dlab="on"][data-dlab-orderpage="unified"] #order-detail-loading .od-skeleton > .order-chat .chat-input-wrap { border-radius: 0 0 16px 16px; } /* ── Вісь «Стрічка чату» (chatbg, р.45): чи потрібна глибша вставка під повідомленнями? '' — як є (rgba(0,0,0,.16)); flat — ЄДИНА КАРТКА (стрічка прозора, фон плити суцільний, «різкої черти» нема); soft — тінт удвічі легший. Світлі теми — свої еквіваленти. ── */ :root[data-dlab-chatbg="flat"][data-dlab-orderpage] .order-chat .chat-messages { background: transparent; } :root[data-dlab-chatbg="soft"][data-dlab-orderpage] .order-chat .chat-messages { background: rgba(0, 0, 0, .08); } :root[data-dlab-chatbg="flat"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"])[data-dlab-orderpage] .order-chat .chat-messages { background: transparent; } :root[data-dlab-chatbg="soft"]:is([data-dlab-theme="l1"], [data-dlab-theme="l2"], [data-dlab-theme="olivel"])[data-dlab-orderpage] .order-chat .chat-messages { background: rgba(31, 36, 51, .022); } /* flat: композер і хедер теж без своїх тінтів — суцільна плита */ :root[data-dlab-chatbg="flat"][data-dlab-orderpage] .order-chat .chat-input-wrap { background: transparent; } :root[data-dlab-chatbg="flat"][data-dlab-orderpage] .order-chat .chat-header { border-bottom-color: transparent; } /* ── Р.46: сторінка замовлення — без заголовка «Переписка», зверху стрічки м'яке затухання реплік при скролі (mask — працює на БУДЬ-ЯКОМУ фоні, тобто у всіх трьох значеннях осі «Стрічка чату») ── */ :root[data-dlab="on"][data-dlab-orderpage="unified"] #order-detail-content > .order-chat .chat-header, :root[data-dlab="on"][data-dlab-orderpage="unified"] #order-detail-loading .od-skeleton > .order-chat .chat-header { display: none; } :root[data-dlab="on"][data-dlab-orderpage="unified"] #order-detail-content > .order-chat .chat-messages { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 38px); mask-image: linear-gradient(180deg, transparent 0, #000 38px); }