/* Стиль — как админки «Рядом» и chepurin.com (решение автора 01.10: флоу интерфейса как у пород «Рядом»). Три слоя токенов, брейкпоинты только 768 и 1024. */ /* ── Слой 1 — примитивы. Radix Colors 3.0, значения из пакета без правок: Sand · Orange · Amber · Tomato (автор, 05.10; акцент Orange вместо Jade и Pink — 10.10). Тёмная тема по умолчанию (автор, 10.10), светлая — :root[data-theme="light"] (переключатель, js/theme.js). ── */ :root { color-scheme: dark; --sand-1: #111110; --sand-2: #191918; --sand-3: #222221; --sand-4: #2a2a28; --sand-5: #31312e; --sand-6: #3b3a37; --sand-7: #494844; --sand-8: #62605b; --sand-9: #6f6d66; --sand-10: #7c7b74; --sand-11: #b5b3ad; --sand-12: #eeeeec; --orange-2: #1e160f; --orange-4: #462100; --orange-5: #562800; --orange-6: #66350c; --orange-7: #7e451d; --orange-8: #a35829; --orange-9: #f76b15; --orange-10: #ff801f; --orange-a3: #fb6a0025; --amber-3: #302008; --amber-9: #ffc53d; --amber-11: #ffca16; --amber-a3: #fa820022; --amber-a5: #fd8b0041; --orange-3: #331e0b; --orange-11: #ffa057; /* акцент (10.10) */ --blue-3: #0d2847; --blue-11: #70b8ff; --green-3: #132d21; --green-9: #30a46c; --green-11: #3dd68c; /* «готово» (автор, 11.10) */ /* статусы проверки (автор, 09.10) */ --tomato-3: #391714; --tomato-9: #e54d2e; --tomato-10: #ec6142; --tomato-11: #ff977d; --shadow-rgb: 0 0 0; --shadow-k: 3; /* тени на тёмном фоне сильнее */ /* Тактильные контролы (референс автора, 10.10): выпуклая кнопка — блик сверху, тень снизу; группа — утопленный лоток. */ --raise-drop: 0 1px 2px rgb(0 0 0 / .55), 0 0 0 1px rgb(0 0 0 / .45); --tray-in: inset 0 1px 3px rgb(0 0 0 / .6), 0 1px 0 rgb(255 255 255 / .04); /* отступы: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 80 · 112 */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 80px; --sp-10: 112px; /* кегль: 12 · 14 · 16 · 20 · 24 · 32 */ --fs-1: 12px; --fs-2: 14px; --fs-3: 16px; --fs-4: 20px; --fs-5: 24px; --fs-6: 32px; --r-min: 2px; --r-status: 2px; --r: 8px; --r-s: 4px; --r-btn: 12px; --r-pill: 999px; --font-ui: "Inter", system-ui, -apple-system, sans-serif; --font-num: "IBM Plex Mono", ui-monospace, monospace; } :root[data-theme="light"] { color-scheme: light; --sand-1: #fdfdfc; --sand-2: #f9f9f8; --sand-3: #f1f0ef; --sand-4: #e9e8e6; --sand-5: #e2e1de; --sand-6: #dad9d6; --sand-7: #cfceca; --sand-8: #bcbbb5; --sand-9: #8d8d86; --sand-10: #82827c; --sand-11: #63635e; --sand-12: #21201c; --orange-2: #fff7ed; --orange-4: #ffdfb5; --orange-5: #ffd19a; --orange-6: #ffc182; --orange-7: #f5ae73; --orange-8: #ec9455; --orange-9: #f76b15; --orange-10: #ef5f00; --orange-a3: #ff9c0029; --amber-3: #fff7c2; --amber-9: #ffc53d; --amber-11: #ab6400; --amber-a3: #ffde003d; --amber-a5: #f8cf0088; --orange-3: #ffefd6; --orange-11: #cc4e00; --blue-3: #e6f4fe; --blue-11: #0d74ce; --green-3: #e6f6eb; --green-9: #30a46c; --green-11: #218358; --tomato-3: #feebe7; --tomato-9: #e54d2e; --tomato-10: #dd4425; --tomato-11: #d13415; --shadow-rgb: 28 32 36; --shadow-k: 1; --raise-drop: 0 1px 2px rgb(28 32 36 / .12), 0 0 0 1px var(--sand-6); --tray-in: inset 0 1px 2px rgb(28 32 36 / .12), 0 1px 0 rgb(255 255 255 / .8); } /* ── Слой 2 — семантика. Только ступени Radix, без подмешивания: 1–2 фон, 3–5 элементы, 6–8 границы, 9–10 заливки, 11–12 текст. Одна для обеих тем; отличаются только фон и панель. ── */ :root { --bg: var(--sand-1); --panel: var(--sand-3); /* контраст фона и панелей (автор, 10.10): тёмная — фон 1, панель 3 */ --panel2: var(--sand-4); --acc-subtle: var(--orange-2); --line: var(--sand-6); --line2: var(--sand-7); --ink: var(--sand-12); --ink2: var(--sand-11); --ink3: var(--sand-10); --ink-inverse: #ffffff; /* по Radix: на Orange 9 и Tomato 9 — белый текст */ --acc: var(--orange-11); --acc-solid: var(--orange-9); --acc-bg: var(--orange-3); --acc-bg-hover: var(--orange-4); --acc-line: var(--orange-7); /* Графит — второй акцент (автор, 05.10): выбор, фокус, наведение. Orange — действия, статусы, прогресс. */ --sel: var(--sand-12); --sel-bg: var(--sand-5); --ok: var(--green-11); /* «готово» — зелёный, акцент действий — оранжевый (автор, 11.10) */ --ok-solid: var(--green-9); --ok-bg: var(--green-3); --warn: var(--amber-11); --warn-solid: var(--amber-9); --warn-bg: var(--amber-3); --on-warn: #21201c; /* по Radix: на Amber 9 — тёмный текст */ --danger: var(--tomato-11); --danger-solid: var(--tomato-9); --danger-bg: var(--tomato-3); --primary: var(--orange-9); --primary-hover: var(--orange-10); --primary-active: var(--orange-10); --secondary-active: var(--orange-5); --danger-button-bg: var(--tomato-9); --danger-button-hover: var(--tomato-10); --stage: var(--sand-1); --stage-muted: var(--sand-8); --surface-muted: var(--sand-2); --surface-alternate: var(--sand-4); --control-border-hover: var(--sand-8); --control-border: var(--sand-7); --control-disabled-bg: var(--sand-5); --control-disabled-text: var(--sand-11); --switch-off: var(--sand-7); --switch-knob: #ffffff; --marker-resolved: var(--sand-7); --field-bg: var(--sand-4); /* поле ввода на ступень светлее панели (автор, 10.10) */ --ed-bg: var(--sand-1); /* монтажный стол проверки (1.10.7) */ --ed-panel: var(--sand-2); --ed-line: var(--sand-6); --ed-text: var(--sand-11); --ed-text-strong: var(--sand-12); --ed-clip: var(--orange-3); --ed-clip-active: var(--orange-5); --ed-clip-line: var(--orange-8); --ed-head: var(--danger-solid); --selection-range: var(--amber-a5); --area-fill: var(--amber-a3); --overlay-bg: rgb(0 0 0 / .6); --status-text: var(--sand-11); --status-success-text: var(--green-11); --status-warning-text: var(--amber-11); --status-accent-text: var(--orange-11); --status-error-text: var(--tomato-11); --status-draft-bg: var(--sand-4); --status-draft-text: var(--sand-11); /* оранжевый занят акцентом */ --status-check-bg: var(--blue-3); --status-check-text: var(--blue-11); } :root[data-theme="light"] { --raise-bg: linear-gradient(var(--sand-1), var(--sand-2)); --raise-bg-hover: linear-gradient(var(--sand-1), var(--sand-3)); --tray-bg: var(--sand-4); --bg: var(--sand-3); --panel: var(--sand-1); --panel2: var(--sand-3); --sel-bg: var(--sand-4); --field-bg: var(--sand-2); --stage: var(--sand-12); --overlay-bg: rgb(28 32 36 / .4); } /* ── Слой 3 — компоненты ── */ :root { --workspace-gap: var(--sp-3); --workspace-panel-radius: var(--sp-4); --workspace-line: var(--sand-6); /* Тактильные контролы (10.10): выпуклая кнопка — градиент соседних ступеней, группа — утопленный лоток */ --raise-bg: linear-gradient(var(--sand-5), var(--sand-4)); --raise-bg-hover: linear-gradient(var(--sand-6), var(--sand-5)); --tray-bg: var(--sand-2); --workspace-side-min: 320px; --workspace-side-max: 440px; --workspace-side-width: clamp(var(--workspace-side-min), 20vw, var(--workspace-side-max)); } :root { --card-pad: var(--sp-4); --card-radius: var(--r); --btn-h: 40px; --compact-h: var(--sp-6); --touch-target: var(--sp-7); --time-target: var(--sp-5); --marker-target: var(--sp-4); --switch-h: var(--sp-5); --switch-w: 44px; --switch-knob-size: 20px; --switch-inset: 2px; --stroke: 1px; --stroke-strong: 2px; --cursor-shift: -1px; --dropzone-h: 144px; --hint-max: 280px; --dropdown-min: 240px; --dropdown-max-h: 360px; --style-menu-w: 400px; --style-cover-max: 480px; --facts-label-w: 160px; --reference-min-w: 160px; --menu-min-w: 220px; --btn-pad-x: var(--sp-4); --btn-radius: var(--r-btn); --segmented-radius: var(--r-btn); --segmented-inset: var(--sp-1); --chip-h: var(--sp-5); --toggle-h: var(--sp-6); --row-h: 48px; --icon-s: var(--sp-4); --icon-m: var(--sp-5); --header-h: var(--sp-8); --layout-max: 1360px; --page-max: 1280px; /* 8 шагов степпера в одну строку (7.1) */ --field-max: 640px; --login-max: 448px; --track-h: var(--sp-7); --player-max-h: 560px; --shadow-card: 0 1px 2px rgb(var(--shadow-rgb) / calc(.05 * var(--shadow-k))), 0 8px 24px -16px rgb(var(--shadow-rgb) / calc(.2 * var(--shadow-k))); --shadow-pop: 0 12px 32px -12px rgb(var(--shadow-rgb) / calc(.2 * var(--shadow-k))); --shadow-menu: 0 1px 2px rgb(var(--shadow-rgb) / calc(.06 * var(--shadow-k))), 0 16px 40px -12px rgb(var(--shadow-rgb) / calc(.2 * var(--shadow-k))); --shadow-knob: 0 1px 2px rgb(var(--shadow-rgb) / .3); --shadow-modal: 0 24px 64px -16px rgb(var(--shadow-rgb) / calc(.25 * var(--shadow-k))); } /* Близость: подпись → поле 4 · поле → поле 16 · заголовок карточки → содержимое 12 · карточка → карточка 16 · заголовок страницы → содержимое 16. */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-size: var(--fs-2); line-height: 1.45; } h1, h2, h3, p, ul, ol, dl, dd { margin: 0; } h1, h2, h3 { text-wrap: balance; } ul, ol { padding: 0; list-style: none; } fieldset { margin: 0; padding: 0; border: 0; min-width: 0; } legend { padding: 0; } a { color: var(--acc); } [hidden] { display: none !important; } :focus-visible { outline: var(--stroke-strong) solid var(--sel); outline-offset: var(--stroke-strong); border-radius: var(--r-s); } .visually-hidden { position: absolute; top: 0; left: 0; width: var(--stroke); height: var(--stroke); overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; } .prewrap { white-space: pre-wrap; overflow-wrap: anywhere; } /* Текст */ .t-page-title { font-size: var(--fs-6); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; } .t-block-title { font-size: var(--fs-3); font-weight: 600; } .t-block-title .t-small { font-weight: 400; } /* Точки «идёт работа» после заголовка: загораются по очереди (автор, 05.10). */ .dots i { font-style: normal; animation: dot 1.4s infinite both; } .dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; } @keyframes dot { 0%, 80%, 100% { opacity: .15; } 40% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .dots i { animation: none; } } .t-card-title { font-size: var(--fs-2); font-weight: 600; } .t-small { font-size: var(--fs-1); color: var(--ink2); } .t-secondary { color: var(--ink2); } @media (max-width: 767px) { .t-page-title { font-size: var(--fs-5); } } /* Раскладка */ .container { max-width: var(--layout-max); margin: 0 auto; padding: 0 var(--sp-4); } .page { max-width: var(--page-max); } .stack { display: flex; flex-direction: column; gap: var(--sp-4); } .stack--4 { gap: var(--sp-1); } .stack--8 { gap: var(--sp-2); } .stack--12 { gap: var(--sp-3); } .stack--24 { gap: var(--sp-5); } .row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } .row--12 { gap: var(--sp-3); } .row--between { justify-content: space-between; } .row--top { align-items: flex-start; } .grow { flex: 1 1 auto; min-width: 0; } .grid { display: grid; gap: var(--sp-4); } @media (min-width: 1024px) { .container { padding: 0 var(--sp-5); } .grid--2 { grid-template-columns: 1fr 1fr; align-items: start; } } /* Иконка — Tabler outline, обводка 2, 16 и 24, цвет от текста */ .icon { width: var(--icon-s); height: var(--icon-s); flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .icon--lg { width: var(--icon-m); height: var(--icon-m); } /* Шапка */ .header { background: var(--panel); border-bottom: var(--stroke) solid var(--line); } .header__bar { min-height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); } .header__brand { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-ui); font-size: var(--fs-4); font-weight: 600; color: var(--ink); text-decoration: none; } .header__brand-logo { width: var(--sp-5); height: var(--sp-5); } .header__brand-name { display: inline-flex; align-items: baseline; gap: var(--sp-2); } .header__nav { flex: none; display: flex; align-items: baseline; gap: var(--sp-5); } /* разделы в шапке — простой текст на линии «Мейкер» (автор, 12.10) */ .header__link { color: var(--ink2); font-size: var(--fs-2); font-weight: 500; text-decoration: none; transition: color .15s; } .header__link:hover, .header__link[aria-current="page"] { color: var(--ink); } .header__user { display: flex; align-items: center; gap: var(--sp-3); } .is-guest .header__user { display: none; } .main { padding: var(--sp-5) 0 var(--sp-8); } .page-head { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-5); align-items: flex-end; justify-content: space-between; margin-bottom: var(--sp-4); } .back { margin-bottom: var(--sp-3); } .mode-note { padding: var(--sp-2) 0; background: var(--warn-bg); color: var(--warn); font-size: var(--fs-1); font-weight: 500; } /* Кнопка */ .btn { user-select: none; -webkit-user-select: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--btn-h); padding: 0 var(--btn-pad-x); border: var(--stroke) solid var(--control-border); border-radius: var(--btn-radius); background: transparent; color: var(--ink2); font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; } .btn:hover:not(:disabled) { border-color: var(--sel); color: var(--sel); } .btn:active:not(:disabled) { background: var(--panel2); } .btn--primary { background: var(--primary); border-color: var(--primary); color: var(--ink-inverse); } .btn--primary:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--ink-inverse); } .btn--secondary { background: var(--acc-bg); border-color: var(--acc-bg); color: var(--acc); } .btn--secondary:hover:not(:disabled) { background: var(--acc-bg-hover); border-color: var(--acc-bg-hover); color: var(--acc); } /* Ghost — текстовая кнопка (автор, 05.10): без отступов и заливки, hover темнит текст и иконку. */ .btn--ghost { border-color: transparent; background: transparent; color: var(--ink2); } .btn--ghost:not(.btn--icon) { padding: 0; } .btn--ghost:hover:not(:disabled) { border-color: transparent; background: transparent; color: var(--ink); } .btn--danger { color: var(--danger); } .btn--danger:hover:not(:disabled) { background: var(--danger-bg); color: var(--danger); } .btn--danger:not(.btn--ghost):hover:not(:disabled) { border-color: var(--danger); } .btn--icon { width: var(--btn-h); padding: 0; } .btn--sm { min-height: var(--compact-h); padding: 0 var(--sp-3); font-size: var(--fs-1); } .btn--sm.btn--icon { width: var(--compact-h); padding: 0; } .btn--primary:active:not(:disabled) { background: var(--primary-active); border-color: var(--primary-active); color: var(--ink-inverse); } .btn--secondary:active:not(:disabled) { background: var(--secondary-active); border-color: var(--secondary-active); color: var(--acc); } .btn--ghost:active:not(:disabled) { background: transparent; border-color: transparent; color: var(--ink); } .btn--danger:active:not(:disabled) { background: var(--danger-bg); color: var(--danger); } .btn--danger-solid:active:not(:disabled) { background: var(--danger-button-hover); border-color: var(--danger-button-hover); color: var(--ink-inverse); } .btn:disabled, .btn:disabled:hover, .btn:disabled:active { background: var(--panel2); border-color: var(--line); color: var(--control-disabled-text); cursor: not-allowed; } .btn--ghost:disabled, .btn--ghost:disabled:hover, .btn--ghost:disabled:active { background: transparent; border-color: transparent; } .btn--ghost.btn--danger:hover:not(:disabled), .btn--ghost.btn--danger:active:not(:disabled) { background: transparent; color: var(--danger); } /* Поле */ .fields { display: flex; flex-direction: column; gap: var(--sp-4); } .field { display: flex; flex-direction: column; gap: var(--sp-1); max-width: var(--field-max); } .field--wide { max-width: none; } .field__label { font-weight: 500; } .field__hint { font-size: var(--fs-1); color: var(--ink2); } .field__error { display: flex; gap: var(--sp-1); align-items: center; font-size: var(--fs-1); color: var(--danger); font-weight: 500; } .input, .select, .textarea { width: 100%; min-height: var(--btn-h); padding: var(--sp-2) var(--sp-3); border: var(--stroke) solid var(--control-border); border-radius: var(--r-s); background: var(--field-bg); color: var(--ink); font: inherit; } .textarea { min-height: var(--sp-10); resize: vertical; line-height: 1.5; } .textarea--sm { min-height: var(--sp-9); } .input:hover, .select:hover, .textarea:hover { border-color: var(--stage-muted); } .input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; border-color: var(--sel); box-shadow: 0 0 0 var(--stroke) var(--sel); } /* фокус поля — 2 px всего: рамка 1 + кольцо 1 (автор, 05.10) */ .input:disabled, .select:disabled, .textarea:disabled { background: var(--panel); color: var(--ink2); } .input--invalid, .textarea--invalid { border-color: var(--danger); } .input--num { width: var(--sp-9); text-align: right; font-family: var(--font-num); } /* Переключатель-сегменты */ .segmented { --segmented-item-radius: max(var(--r-min), calc(var(--segmented-radius) - var(--segmented-inset))); display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); padding: var(--segmented-inset); border: var(--stroke) solid var(--workspace-line); border-radius: var(--segmented-radius); background: var(--tray-bg); box-shadow: var(--tray-in); } /* лоток (10.10), край — 11.10 */ .segmented__item { display: inline-flex; align-items: center; gap: var(--sp-2); height: var(--toggle-h); padding: 0 var(--sp-3); border: 0; border-radius: var(--segmented-item-radius); background: transparent; color: var(--ink2); font: inherit; font-size: var(--fs-1); font-weight: 500; cursor: pointer; } .segmented__item:hover { color: var(--ink); } .segmented__item[aria-pressed="true"], .segmented__item[aria-current="page"] { background: var(--raise-bg); color: var(--sel); box-shadow: var(--raise-drop); } /* выбранный пункт поднят над лотком */ .segmented__item:disabled { cursor: not-allowed; color: var(--ink3); } .segmented--block { display: flex; } .segmented--xs { padding: var(--segmented-inset); } .segmented--xs .segmented__item { height: var(--sp-5); padding: 0 var(--sp-2); } .swatch { display: inline-flex; align-items: center; gap: var(--sp-1); } .swatch input[type="color"] { width: var(--sp-7); height: var(--toggle-h); padding: var(--sp-1); border: var(--stroke) solid var(--line2); border-radius: var(--r-s); background: var(--panel); cursor: pointer; } .swatch__dot { display: inline-block; width: var(--sp-5); height: var(--sp-5); border-radius: var(--r-s); border: var(--stroke) solid var(--line); } /* Вопросы агента (1.28.7): список с разделителями, без вложенных рамок и полужирного */ .qs { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; counter-reset: q; } .q { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4) 0; border-top: var(--stroke) solid var(--line); } .q:first-child { padding-top: 0; border-top: 0; } .q__text { color: var(--ink); } .q__req { margin-left: 2px; color: var(--danger); } /* обязательный вопрос (1.28.8) */ .q__hint { margin-top: calc(-1 * var(--sp-1)); color: var(--ink2); font-size: var(--fs-1); } .q__file { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); } .q__picked { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--ink); } .q__picked .icon { color: var(--ok-solid); } .q__select { width: auto; min-height: var(--toggle-h); font-weight: 400; color: var(--ink2); } .q-send { display: flex; justify-content: flex-end; } .check { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; } .segmented--block .segmented__item { flex: 1; justify-content: center; } /* Пиктограмма пропорции кадра */ .ratio { flex: none; border: var(--stroke-strong) solid currentColor; border-radius: var(--stroke-strong); } .ratio--9x16 { width: var(--sp-2); height: var(--sp-4); } .ratio--16x9 { width: var(--sp-4); height: var(--sp-2); } .ratio--1x1 { width: var(--sp-3); height: var(--sp-3); } .ratio--4x5 { width: var(--sp-3); height: var(--sp-4); } /* Список настроек: подпись слева, значение справа (как «Output / Look») */ .opts { display: flex; flex-direction: column; border: var(--stroke) solid var(--line); border-radius: var(--r); background: var(--surface-muted); } .opts__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); min-height: var(--row-h); padding: var(--sp-2) var(--sp-4); border-bottom: var(--stroke) solid var(--line); } .opts__row--switch { cursor: pointer; } .opts__row--switch:has(input:disabled) { cursor: not-allowed; } .opts__row:last-child { border-bottom: 0; } .opts__label { display: flex; flex-direction: column; gap: var(--sp-1); color: var(--ink2); } .opts__value { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1); text-align: right; } .opts__value .field__hint { max-width: var(--hint-max); } .opts__select { min-height: var(--toggle-h); padding: 0 var(--sp-6) 0 var(--sp-2); border: var(--stroke) solid transparent; border-radius: var(--r-s); background: transparent; color: var(--ink); font: inherit; font-weight: 600; text-align: right; cursor: pointer; } .opts__select:hover { border-color: var(--line2); background-color: var(--panel); } .opts__select:disabled { cursor: not-allowed; color: var(--ink2); } /* Выпадающий список — свой вместо системного */ .dd { position: relative; } .dd__btn { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--toggle-h); padding: 0 var(--sp-2); border: var(--stroke) solid transparent; border-radius: var(--r-s); background: transparent; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; } .dd__btn .icon { color: var(--ink2); transition: transform .12s; } .dd__btn:hover { border-color: var(--line2); background: var(--panel); } .dd__btn[aria-expanded="true"] { border-color: var(--sel); background: var(--panel); } .dd__btn[aria-expanded="true"] .icon { transform: rotate(180deg); } .dd__btn:disabled { cursor: not-allowed; color: var(--ink2); } .dd__btn:disabled .icon { visibility: hidden; } .dd__list { position: absolute; z-index: 40; top: calc(100% + var(--sp-1)); right: 0; min-width: var(--dropdown-min); max-height: var(--dropdown-max-h); overflow: auto; padding: var(--sp-2); border-radius: var(--r-btn); background: var(--panel); box-shadow: var(--shadow-menu); outline: none; text-align: left; } .dd__opt { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: var(--btn-h); padding: var(--sp-2) var(--sp-3); border-radius: var(--r); color: var(--ink); cursor: pointer; } .dd__opt.is-active { background: var(--surface-muted); } .dd__opt[aria-selected="true"] { color: var(--sel); font-weight: 600; } .dd__opt .icon { visibility: hidden; color: var(--sel); } .dd__opt[aria-selected="true"] .icon { visibility: visible; } .dd__text { display: flex; flex-direction: column; gap: var(--sp-1); } .dd__hint { color: var(--ink2); font-size: var(--fs-1); font-weight: 400; } /* Тумблер */ .switch { position: relative; display: inline-flex; flex: none; width: var(--switch-w); height: var(--switch-h); align-items: center; } .switch input { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; margin: 0; opacity: 0; cursor: pointer; } .switch__track { pointer-events: none; width: 100%; height: var(--switch-h); border-radius: var(--r-pill); background: var(--switch-off); transition: background .12s; } .switch__track::after { content: ""; display: block; width: var(--switch-knob-size); height: var(--switch-knob-size); margin: var(--switch-inset); border-radius: 50%; background: var(--switch-knob); box-shadow: var(--shadow-knob); transition: transform .12s; } .switch input:checked + .switch__track { background: var(--acc-solid); } /* включённый тогл — акцент (автор, 10.10) */ .switch input:checked + .switch__track::after { transform: translateX(calc(var(--switch-w) - var(--switch-knob-size) - 2 * var(--switch-inset))); } .switch input:focus-visible + .switch__track { outline: var(--stroke-strong) solid var(--sel); outline-offset: var(--stroke-strong); } .switch input:disabled { cursor: not-allowed; } .switch input:disabled + .switch__track { opacity: .5; } /* Бейдж */ .badge { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--chip-h); padding: 0 var(--sp-2); border-radius: var(--r-pill); background: var(--panel2); color: var(--ink2); font-size: var(--fs-1); font-weight: 500; white-space: nowrap; } .badge--success { background: var(--ok-bg); color: var(--ok); } .badge--warning { background: var(--warn-bg); color: var(--warn); } .badge--error { background: var(--danger-bg); color: var(--danger); } .badge--accent { background: var(--acc-bg); color: var(--acc); } .badge--status { border-radius: var(--r-status); background: var(--panel2); color: var(--status-text); } .badge--status.badge--success { background: var(--ok-bg); color: var(--status-success-text); } .badge--status.badge--warning { background: var(--warn-bg); color: var(--status-warning-text); } .badge--status.badge--accent { background: var(--acc-bg); color: var(--status-accent-text); } .badge--status.badge--error { background: var(--danger-bg); color: var(--status-error-text); } .badge--status.badge--draft { background: var(--status-draft-bg); color: var(--status-draft-text); } .badge--status.badge--check { background: var(--status-check-bg); color: var(--status-check-text); } /* Карточка */ .card { background: var(--panel); border: var(--stroke) solid var(--line); border-radius: var(--card-radius); padding: var(--card-pad); } .card--flush { padding: 0; overflow: hidden; } .card__body { max-width: var(--field-max); } .card__body--wide { max-width: none; } /* Проверка ролика (1.10.5): своя шапка, ролик во всю высоту, таймлайн под ним, справа — комментарии */ .page--review, .page--workspace { max-width: none; } .rv__lead { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; } .rv__bar .rv__actions { justify-content: flex-end; } .rv__actions .field__error { margin: 0; } .rv__discussion { display: flex; flex-direction: column; gap: var(--sp-3); } .more-btn { align-self: flex-start; min-height: 0; padding: 0; color: var(--acc); } .more-btn:hover:not(:disabled) { color: var(--ink); } .files.is-collapsed > .file:nth-child(n + 3 of .file--open) { display: none; } .qa-list { display: flex; flex-direction: column; gap: var(--sp-3); } .qa-list.is-collapsed > .qa:nth-child(n + 3) { display: none; } .qa { display: flex; flex-direction: column; gap: var(--sp-1); } .qa__q { color: var(--ink2); font-size: var(--fs-1); } .file__note-btn { position: relative; z-index: 2; pointer-events: auto; align-self: flex-start; max-width: 100%; padding: 0; border: 0; background: none; color: var(--ink2); font: inherit; font-size: var(--fs-1); text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; } .file__note-btn:hover { color: var(--ink); } .rv__side .pop--sidebar { position: sticky; bottom: calc(-1 * var(--sp-4)); margin-bottom: calc(-1 * var(--sp-4)); border-radius: 0; border-width: var(--stroke) 0 0; padding: var(--sp-3) 0 var(--sp-4); background: var(--panel); } .composer-actions { gap: var(--sp-2); justify-content: flex-end; } .workspace-content { width: 100%; min-width: 0; padding: 0; gap: 0; } .workspace-task { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--panel); border: var(--stroke) solid var(--workspace-line); border-radius: var(--workspace-panel-radius); overflow: hidden; } .workspace-task__footer { flex: none; padding: var(--sp-4); background: var(--panel); } .workspace-task__footer { display: flex; flex-wrap: wrap; gap: var(--sp-2); border-top: var(--stroke) solid var(--line); } .workspace-task__footer .btn--primary { flex: 1; } .workspace-task .workspace-content > .card { padding: var(--sp-5) var(--sp-4); border: 0; border-bottom: var(--stroke) solid var(--workspace-line); border-radius: 0; background: transparent; } .workspace-task .workspace-content > .card:last-child { border-bottom: 0; } .workspace-task .workspace-content > .callout { margin: var(--sp-4); } .workspace-task .card__head .t-block-title { font-size: var(--fs-2); } .workspace-task .files { border: 0; } .workspace-task .files { gap: var(--sp-1); overflow: visible; } .workspace-task .file { margin: 0 calc(-1 * var(--sp-2)); padding: var(--sp-2); border: 0; border-radius: var(--r); background: transparent; } .workspace-task .input, .workspace-task .textarea { border-color: var(--line2); } .workspace-task .facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .workspace-task .prewrap, .workspace-task .facts dd { overflow-wrap: anywhere; } .workspace-center { display: flex; min-width: 0; min-height: 0; align-items: center; justify-content: center; padding: var(--sp-5); } .workspace-center__content { width: 100%; max-width: var(--field-max); } .workspace-empty { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); text-align: center; color: var(--ink2); padding: var(--sp-6); } .workspace-empty p { max-width: calc(var(--sp-10) * 3); } .workspace-notice { flex: none; padding: var(--sp-3); background: var(--bg); color: var(--ink); } .workspace-notice .card { max-width: var(--field-max); margin: auto; } .rv__title h1 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Переименование (1.37.0): название — кнопка, по клику поле на его месте */ .rv__name { max-width: 100%; margin: 0 calc(-1 * var(--sp-1)); padding: 0 var(--sp-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; border-radius: var(--r-s); background: transparent; color: inherit; font: inherit; text-align: left; cursor: text; } .rv__name:hover { background: var(--panel2); } .rename { width: 100%; max-width: var(--field-max); height: var(--toggle-h); font-weight: 600; } .rv__tools { min-width: 0; max-width: 100%; } .rv__tools .segmented { min-width: 0; } .rv__actions { flex-wrap: wrap; } @media (max-width: 767px) { .page .rv__bar { gap: var(--sp-2); } .rv__title { flex-basis: calc(100% - var(--sp-8) - var(--sp-7)); } .rv__tools { order: 1; } .rv__actions { order: 2; width: 100%; } .rv__actions .btn { white-space: normal; } .workspace-content { padding: 0; } } .container:has(.page--review, .page--workspace:not(.boot-video):not(.boot-start)) { max-width: none; padding: 0; } body:has(.page--review, .page--workspace:not(.boot-video):not(.boot-start)) > .header, body:has(.page--review, .page--workspace:not(.boot-video):not(.boot-start)) > .mode-note { display: none; } .main:has(.page--review, .page--workspace:not(.boot-video):not(.boot-start)) { padding: 0; } .rv { --ed-bg: var(--bg); --ed-panel: var(--panel); --ed-line: var(--workspace-line); --ed-text: var(--ink2); --ed-text-strong: var(--ink); --ed-clip: var(--panel2); --ed-clip-active: var(--acc-bg); --ed-clip-line: var(--line); display: flex; flex-direction: column; min-height: 100vh; padding: var(--sp-3); gap: var(--workspace-gap); } .rv__bar { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--sp-3); min-height: var(--sp-7); margin: calc(-1 * var(--sp-3)) calc(-1 * var(--sp-3)) 0; padding: var(--sp-1) var(--sp-3); border-bottom: var(--stroke) solid var(--line); background: var(--panel); } /* шапка ролика на всю ширину, 48 px (11.10) */ .rv__title { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; flex: 1; } .rv__title b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rv__tools, .rv__actions { display: flex; align-items: center; gap: var(--sp-2); } .rv__body { display: grid; flex: 1; min-height: 0; gap: var(--workspace-gap); } .rv__main { display: flex; flex-direction: column; min-width: 0; background: transparent; color: var(--ed-text); } /* видно фон страницы, без «подложки» (11.10) */ .rv__stage { position: relative; overflow: hidden; min-height: 0; flex: 1; background: transparent; } .rv__video { position: absolute; inset: var(--sp-3); border-radius: 0; background: transparent; } .rv .rv__video { display: block; background: transparent; border-radius: 0; color: var(--ink2); } .rv .rv__video video { width: 100%; height: 100%; max-height: none; object-fit: contain; background: transparent; } /* .rv — сильнее общего .player video с max-height */ .rv__overlay { position: absolute; box-shadow: var(--shadow-card); } .ed { flex: none; background: var(--ed-panel); border: var(--stroke) solid var(--ed-line); border-radius: var(--workspace-panel-radius); overflow: hidden; } .ed__bar { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-bottom: var(--stroke) solid var(--ed-line); } .ed__btn { display: inline-grid; place-items: center; width: var(--toggle-h); height: var(--toggle-h); padding: 0; border: 0; border-radius: var(--r-s); background: transparent; color: var(--ed-text-strong); cursor: pointer; } .ed__btn:hover { background: var(--ed-line); } .ed__mlabel { display: inline-flex; align-items: center; gap: var(--sp-1); white-space: nowrap; } .ed__eye { display: inline-grid; place-items: center; width: var(--sp-5); height: var(--sp-5); padding: 0; border: 0; border-radius: var(--r-s); background: transparent; color: var(--ink2); cursor: pointer; } /* видимость слоя отметок (1.27.6) */ .ed__eye:hover { color: var(--acc); } .ed__eye .icon { width: var(--sp-4); height: var(--sp-4); } .ed__tl.is-marks-off .ed__lane--marks { opacity: .45; } /* Тултип (1.27.7): [data-tip] — подсказка к кнопке-иконке при наведении и фокусе; справа — data-tip-pos="right" (у левого края) */ [data-tip] { position: relative; } [data-tip]::after { content: attr(data-tip); position: absolute; z-index: 50; left: 50%; bottom: calc(100% + var(--sp-2)); transform: translate(-50%, var(--sp-1)); padding: var(--sp-1) var(--sp-2); border-radius: var(--r-s); background: var(--ink); color: var(--bg); font-family: var(--font-ui); font-size: var(--fs-1); font-weight: 500; line-height: 1.4; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease); } [data-tip][data-tip-pos="right"]::after { left: calc(100% + var(--sp-2)); bottom: auto; top: 50%; transform: translate(calc(-1 * var(--sp-1)), -50%); } [data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); transition-delay: 300ms; } [data-tip][data-tip-pos="right"]:hover::after, [data-tip][data-tip-pos="right"]:focus-visible::after { transform: translate(0, -50%); } .ed__time { font-family: var(--font-num); font-size: var(--fs-1); color: var(--ed-text); } .ed__time b { color: var(--ed-text-strong); font-weight: 500; } .ed__sp { flex: 1; } .ed__tl { display: grid; grid-template-columns: calc(var(--sp-10) + var(--sp-4)) minmax(0, 1fr); padding: var(--sp-2) var(--sp-3) var(--sp-3) 0; } .ed__labels { display: grid; grid-template-rows: var(--sp-5) var(--sp-7) var(--sp-6); align-items: center; gap: var(--sp-1); padding-left: var(--sp-3); font-size: var(--fs-1); color: var(--ed-text); } .ed__area { position: relative; display: grid; grid-template-rows: var(--sp-5) var(--sp-7) var(--sp-6); gap: var(--sp-1); cursor: pointer; touch-action: none; } .ed__ruler { position: relative; border-bottom: var(--stroke) solid var(--ed-line); } .ed__tick { position: absolute; bottom: 0; width: var(--stroke); height: var(--sp-1); background: var(--ed-line); } .ed__tick.is-major { height: var(--sp-2); background: var(--ed-text); } .ed__tick i { position: absolute; bottom: calc(var(--sp-2) + 2px); left: 0; transform: translateX(-50%); font-family: var(--font-num); font-size: var(--fs-1); font-style: normal; color: var(--ed-text); white-space: nowrap; } .ed__tick:first-child i { transform: none; } .ed__tick:last-child i { transform: translateX(-100%); } .ed__lane { position: relative; } .ed__clip { position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; padding: 0 var(--sp-2); border: var(--stroke) solid var(--ed-clip-line); border-radius: var(--r-s); background: var(--ed-clip); color: var(--ed-text-strong); font: inherit; font-size: var(--fs-1); text-align: left; overflow: hidden; cursor: pointer; } .ed__clip + .ed__clip { margin-left: 2px; } .ed__clip b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ed__clip span { font-family: var(--font-num); color: var(--ed-text); white-space: nowrap; } .ed__clip.is-active { background: var(--ed-clip-active); border-color: var(--acc-line); } .ed__pin { position: absolute; top: 50%; min-width: var(--sp-5); height: var(--sp-5); padding: 0 var(--sp-1); transform: translate(-50%, -50%); border: 0; border-radius: var(--r-pill); background: var(--warn-solid); color: var(--on-warn); font-size: var(--fs-1); font-weight: 600; cursor: pointer; } .ed__pin.is-done { background: var(--ed-line); color: var(--ed-text); } .ed__head { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ed-head); pointer-events: none; } .ed__head::before { content: ""; position: absolute; top: 0; left: 50%; width: var(--sp-3); height: var(--sp-3); transform: translate(-50%, 0); border-radius: 0 0 var(--r-s) var(--r-s); background: var(--ed-head); } .pop { position: absolute; z-index: 3; width: min(320px, 90%); display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border: var(--stroke) solid var(--line); border-radius: var(--r); background: var(--panel); box-shadow: var(--shadow-card); } .pop--sidebar { position: static; width: 100%; box-shadow: none; flex: none; } .pop[hidden] { display: none; } .area-pin { position: absolute; z-index: 2; min-width: var(--sp-5); height: var(--sp-5); padding: 0 var(--sp-1); transform: translate(-50%, -50%); border: var(--stroke-strong) solid var(--panel); border-radius: var(--r-pill); background: var(--warn-solid); color: var(--on-warn); font-size: var(--fs-1); font-weight: 600; display: grid; place-items: center; pointer-events: none; } .rv__side { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); background: var(--panel); border: var(--stroke) solid var(--workspace-line); border-radius: var(--workspace-panel-radius); min-width: 0; overflow-y: auto; } .cmt-edit__input { min-height: calc(var(--sp-7) + var(--sp-5)); max-height: 60vh; resize: none; overflow-y: auto; line-height: 1.5; } /* растёт по тексту (1.31.1) */ .rv__side.is-drag { border-color: var(--acc); border-style: dashed; background: var(--acc-subtle); } /* файл к комментарию (1.31.0) */ .rv__side > .callout { background: var(--bg); color: var(--ink2); } .rv__side > .callout .icon { color: var(--ink2); } .rv__side .textarea { border-color: var(--line2); } .rv__side .pop--sidebar { border-color: var(--workspace-line); } .rv__side-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); } .rv__cmts { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; } .rv__cmt { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4) 0; border: 0; border-bottom: var(--stroke) solid var(--workspace-line); background: var(--panel); } .rv__cmt:last-child { border-bottom: 0; } .rv__cmt.is-done { opacity: .6; } .rv__num { font-family: var(--font-num); font-size: var(--fs-1); color: var(--ink2); } .rv__status { padding: 0 var(--sp-2); border-radius: var(--r-status); background: var(--status-check-bg); color: var(--status-check-text); font-size: var(--fs-1); font-weight: 500; cursor: pointer; } .rv__status.is-done { background: var(--ok-bg); color: var(--status-success-text); } .rv__empty { padding: var(--sp-3) 0; } .workspace-resizer { display: none; } body.is-resizing, body.is-resizing * { cursor: col-resize !important; user-select: none !important; } @media (min-width: 1024px) { .rv { height: 100vh; } .workspace-body { position: relative; grid-template-columns: var(--workspace-left-width, var(--workspace-side-width)) minmax(0, 1fr); overflow: hidden; } .workspace-body--comments { grid-template-columns: var(--workspace-left-width, var(--workspace-side-width)) minmax(0, 1fr) var(--workspace-right-width, var(--workspace-side-width)); } .workspace-resizer { display: block; position: absolute; top: 0; bottom: 0; width: var(--sp-3); z-index: 5; cursor: col-resize; touch-action: none; } .workspace-resizer--left { left: calc(var(--workspace-left-width, var(--workspace-side-width)) + var(--workspace-gap) / 2); transform: translateX(-50%); } .workspace-resizer--right { right: calc(var(--workspace-right-width, var(--workspace-side-width)) + var(--workspace-gap) / 2); transform: translateX(50%); } .workspace-resizer::after { content: ''; position: absolute; top: calc(50% - var(--sp-4)); height: var(--sp-6); border-radius: var(--r-pill); left: calc(50% - var(--stroke)); width: var(--stroke-strong); background: var(--line); } .workspace-resizer:hover::after, .workspace-resizer:focus-visible::after, .workspace-resizer.is-active::after { background: var(--sel); } .workspace-resizer:focus-visible { outline: var(--stroke-strong) solid var(--sel); outline-offset: calc(-1 * var(--stroke-strong)); } .workspace-content { overflow-y: auto; min-height: 0; flex: 1; } .workspace-center { overflow-y: auto; } } @media (max-width: 1023px) { .rv__stage { flex: none; aspect-ratio: 16 / 9; } .workspace-body { grid-template-columns: minmax(0, 1fr); } .workspace-body--comments .rv__main { order: -2; } .workspace-body--comments .rv__side { order: -1; } .rv { padding: var(--sp-2); } .workspace-center { padding: var(--sp-4); } .workspace-task__footer { position: sticky; bottom: 0; z-index: 3; } } .area-layer { position: absolute; inset: 0; z-index: 2; cursor: pointer; } .area-layer.is-on { cursor: crosshair; } .areas { position: absolute; inset: 0; pointer-events: none; } .area-box__n { position: absolute; left: calc(-1 * var(--sp-3)); top: calc(-1 * var(--sp-3)); min-width: var(--sp-5); height: var(--sp-5); padding: 0 var(--sp-1); border-radius: var(--r-pill); background: var(--warn-solid); color: var(--on-warn); font-size: var(--fs-1); font-weight: 600; display: grid; place-items: center; } .area-box { position: absolute; border: var(--stroke-strong) solid var(--warn-solid); border-radius: var(--r-s); background: var(--area-fill); pointer-events: none; } .cmt-thumb { width: var(--sp-8); height: var(--sp-7); padding: 0; border: var(--stroke) solid var(--line); border-radius: var(--r-s); background: var(--panel2); color: var(--ink2); display: inline-grid; place-items: center; overflow: hidden; cursor: pointer; } .cmt-thumb img { width: 100%; height: 100%; object-fit: cover; } .divider { width: 100%; margin: 0; border: 0; border-top: var(--stroke) solid var(--line); } .card--quiet { background: var(--surface-muted); } .inputs__head { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--btn-h); color: var(--ink2); font-weight: 500; list-style: none; cursor: pointer; } .inputs__head::-webkit-details-marker { display: none; } .inputs__head:hover { color: var(--sel); } .inputs__head .icon { transform: rotate(-90deg); transition: transform .12s; } .inputs[open] > .inputs__head .icon { transform: none; } .inputs__body { margin-top: var(--sp-2); } .facts { display: grid; grid-template-columns: 1fr; gap: var(--sp-1) var(--sp-5); } .facts dt { color: var(--ink2); font-size: var(--fs-1); } .facts dd + dt { margin-top: var(--sp-3); } .usage { display: flex; flex-direction: column; gap: var(--sp-1); } /* расход агента — по строке на цифру (1.38.1) */ .usage__note { color: var(--ink2); font-size: var(--fs-1); } @media (min-width: 768px) { .facts { grid-template-columns: var(--facts-label-w) minmax(0, 1fr); gap: var(--sp-3) var(--sp-5); } .facts dd + dt { margin-top: 0; } } .more > summary { list-style: none; cursor: pointer; } .more > summary::-webkit-details-marker { display: none; } .more > summary::after { content: "… ещё"; display: block; margin-top: var(--sp-1); color: var(--acc); } .more[open] > summary::after { content: "свернуть"; } .more[open] .clamp2 { display: block; -webkit-line-clamp: unset; } .more[open] > p { margin-top: var(--sp-2); } .clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .textarea--xs { min-height: var(--sp-8); } .sview__comment { margin-top: var(--sp-2); } .sview { display: flex; flex-direction: column; gap: var(--sp-2); } .sview__item { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3); border: var(--stroke) solid var(--line); border-radius: var(--r); background: var(--panel); } .card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-3); } .callout { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r); background: var(--acc-bg); color: var(--ink); } .callout > .icon { color: var(--acc); margin-top: var(--stroke-strong); } .callout--neutral { background: var(--panel2); color: var(--ink2); } .callout--warn { background: var(--warn-bg); } /* Подсказка про агента: информационная (заливка Jade) + пунктир в тон — «ждёт действия»; команда — копируемой плашкой. */ .callout--agent { align-items: center; border: var(--stroke) dashed var(--acc-line); } .cmd { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--chip-h); margin: 0 var(--sp-1); padding: 0 var(--sp-2); border: var(--stroke) solid var(--line); border-radius: var(--r-s); background: var(--panel); color: var(--ink); font: inherit; font-family: var(--font-num); font-size: var(--fs-1); cursor: pointer; vertical-align: baseline; } .cmd .icon { width: var(--sp-3); height: var(--sp-3); color: var(--ink3); } .cmd:hover { border-color: var(--sel); } .cmd:hover .icon { color: var(--ink-inverse); } /* иконка на оранжевой подложке — всегда белая (1.28.2) */ .callout--warn > .icon { color: var(--warn); } /* Этапы */ .steps { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-4); } .steps__item { display: flex; align-items: center; gap: var(--sp-2); color: var(--ink2); font-weight: 500; } .steps__item + .steps__item::before { content: ""; width: var(--sp-4); height: var(--stroke); margin-right: var(--sp-2); background: var(--line2); } .steps__num { display: grid; place-items: center; width: var(--chip-h); height: var(--chip-h); border-radius: var(--r-pill); border: var(--stroke) solid var(--line2); font-size: var(--fs-1); } .steps__item.is-done { color: var(--ok); } .steps__item.is-done .steps__num { background: var(--ok-solid); border-color: var(--ok-solid); color: var(--ink-inverse); } .steps__item.is-done .steps__num .icon { width: var(--sp-3); height: var(--sp-3); stroke-width: 3; } .steps__link { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--toggle-h); padding: 0 var(--sp-2) 0 0; border: 0; border-radius: var(--r-pill); background: transparent; color: inherit; font: inherit; cursor: pointer; } .steps__link:hover { color: var(--sel); text-decoration: underline; text-underline-offset: var(--sp-1); } .steps__item.is-current { color: var(--ink); } .steps__item.is-current .steps__num { background: var(--primary); border-color: var(--primary); color: var(--ink-inverse); } /* Библиотека моушна (1.36.0): карточки приёмов, видео 9:16 на повторе */ .fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: var(--sp-4); } .fx-card { display: flex; flex-direction: column; overflow: hidden; border: var(--stroke) solid var(--line); border-radius: var(--card-radius); background: var(--panel); } .fx-card__media { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--panel2); } .fx-card__skel { display: block; aspect-ratio: 9 / 16; height: auto; border-radius: var(--card-radius); } .fx-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-3) var(--sp-3) var(--sp-4); } .fx-card__title { margin: 0; font-size: var(--fs-2); font-weight: 600; } .fx-card__fn { margin: 0; } .fx-card__what { margin: 0; font-size: var(--fs-1); color: var(--ink2); } /* «Стиль автора» (1.41.0, правка — 1.42.0): правила списком в одной панели; «Изменить» и «Удалить» — при наведении */ .style-rules { list-style: none; margin: 0; padding: 0; border: var(--stroke) solid var(--line); border-radius: var(--card-radius); background: var(--panel); max-width: 760px; } .style-rule { display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-4); } .style-rule + .style-rule { border-top: var(--stroke) solid var(--line); } .style-rule__body { flex: 1; display: grid; gap: var(--sp-1); min-width: 0; } .style-rule__text { margin: 0; } .style-rule__acts { flex: none; display: flex; gap: var(--sp-1); opacity: 0; transition: opacity .15s; } .style-rule:hover .style-rule__acts, .style-rule:focus-within .style-rule__acts { opacity: 1; } @media (hover: none) { .style-rule__acts { opacity: 1; } } .style-rule__acts .btn:hover { color: var(--acc); } .style-rule--edit { flex-direction: column; align-items: stretch; gap: var(--sp-2); } .style-rule__input { width: 100%; resize: vertical; } .style-group__head { display: flex; align-items: baseline; justify-content: space-between; max-width: 760px; } .style-rule__skel { display: block; height: 64px; max-width: 760px; border-radius: var(--card-radius); } .fx-card__facts { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-3); margin: 0; font-size: var(--fs-1); } .fx-card__facts dt { color: var(--ink3); } .fx-card__facts dd { margin: 0; color: var(--ink2); } .fx-grid--reels { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } /* целые ролики (1.39.0) — карточки крупнее */ .fx-card__tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); } a.segmented__item { text-decoration: none; } /* Список роликов */ .vlist { display: flex; flex-direction: column; gap: var(--sp-2); } .vrow { display: flex; align-items: center; gap: var(--sp-2); padding-right: var(--sp-2); border: var(--stroke) solid var(--line); border-radius: var(--r); background: var(--panel); } .vrow:hover { border-color: var(--sel); } .vrow__link { flex: 1; min-width: 0; display: grid; grid-template-columns: var(--sp-8) minmax(0, 1fr); align-items: center; gap: var(--sp-4); padding: var(--sp-2) 0 var(--sp-2) var(--sp-2); color: var(--ink); text-decoration: none; border-radius: var(--r); } .vrow__link:hover .vrow__title { color: var(--sel); } .vrow__pic { display: grid; place-items: center; width: var(--sp-8); height: var(--sp-8); border-radius: var(--r-s); background: var(--panel2); color: var(--ink3); overflow: hidden; } /* заглушка обложки — серая, не акцент */ .vrow__pic img { width: 100%; height: 100%; object-fit: cover; } .vrow__main { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; } .vrow__title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vrow__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); color: var(--ink2); font-size: var(--fs-1); } @media (max-width: 767px) { .vrow__link { grid-template-columns: var(--sp-7) minmax(0, 1fr); } .vrow__pic { width: var(--sp-7); height: var(--sp-7); } } /* Сценарий: блоки */ .sblocks { display: flex; flex-direction: column; gap: var(--sp-3); } .sblock { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border: var(--stroke) solid var(--line); border-radius: var(--r); background: var(--surface-muted); } .sblock__head { display: flex; align-items: center; gap: var(--sp-2); } .sblock__label { flex: 1 1 auto; min-width: 0; min-height: var(--toggle-h); padding: 0 var(--sp-2); font-weight: 600; text-transform: none; } .sblock__sec { display: flex; align-items: center; gap: var(--sp-1); color: var(--ink2); font-size: var(--fs-1); } .sblock__sec .input { min-height: var(--toggle-h); width: var(--sp-8); padding: 0 var(--sp-2); } .sblock__grid { display: grid; gap: var(--sp-2); } @media (min-width: 768px) { .sblock__grid { grid-template-columns: 3fr 2fr; } } .sbar { display: flex; height: var(--sp-2); border-radius: var(--r-pill); background: var(--panel2); overflow: hidden; } .sbar__seg { background: var(--acc-solid); border-right: var(--stroke-strong) solid var(--panel); } .sbar__seg:nth-child(even) { background: var(--acc); } /* Файлы: зона загрузки и список */ .dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--dropzone-h); padding: var(--sp-5); border: var(--stroke) dashed var(--line2); border-radius: var(--r-btn); background: transparent; color: var(--ink2); text-align: center; cursor: pointer; } .dropzone > .icon { box-sizing: content-box; padding: var(--sp-2); border-radius: var(--r); background: var(--panel2); color: var(--ink2); } .dropzone { transition: border-color var(--motion-base, .18s), background-color var(--motion-base, .18s); } .dropzone > .icon { transition: background-color var(--motion-base, .18s), color var(--motion-base, .18s), transform var(--motion-base, .18s); } .dropzone:hover, .dropzone.is-drag { border-color: var(--acc-solid); background: var(--acc-bg); } .dropzone:hover > .icon, .dropzone.is-drag > .icon { background: var(--acc-solid); color: var(--ink-inverse); transform: translateY(-1px); } .dropzone:hover b, .dropzone.is-drag b { color: var(--acc); } .dropzone b { color: var(--ink); font-weight: 600; } .dropzone--sm { min-height: var(--sp-9); padding: var(--sp-3) var(--sp-4); flex-direction: row; } .files { display: flex; flex-direction: column; border: var(--stroke) solid var(--line); border-radius: var(--r); overflow: hidden; } .file { display: grid; grid-template-columns: var(--sp-7) minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2); border-bottom: var(--stroke) solid var(--line); background: var(--panel); } .file--open { position: relative; } .file__open { position: absolute; inset: 0; border: 0; padding: 0; background: transparent; cursor: pointer; z-index: 1; } .file--open:has(.file__open:hover), .file--open:has(.file__open:focus-visible) { background: var(--sel-bg); } .file__open:focus-visible { outline: var(--stroke-strong) solid var(--sel); outline-offset: calc(-1 * var(--stroke-strong)); } .file--open .file__pic, .file--open .file__main { pointer-events: none; } .file--open > .row, .file--open input, .file--open [data-role] { position: relative; z-index: 2; } .file--open > .row { pointer-events: none; } .file--open > .row button { pointer-events: auto; } .file--open > .row:empty { display: none; } .file--open [data-role] { pointer-events: auto; } .file:last-child { border-bottom: 0; } .file__pic { display: grid; place-items: center; width: var(--sp-7); height: var(--sp-7); overflow: hidden; border-radius: var(--r-s); background: var(--panel2); color: var(--ink3); } .file__pic img, .file__pic video { width: 100%; height: 100%; object-fit: cover; } .file__main { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; } .file__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .file__note { grid-column: 2 / -1; width: 100%; min-height: var(--toggle-h); padding: var(--sp-1) var(--sp-2); font-size: var(--fs-1); } .file.is-uploading { color: var(--ink2); } .file.is-error { background: var(--danger-bg); } .file.is-error .file__pic { background: var(--panel); color: var(--danger); } .progress { display: block; height: var(--sp-1); border-radius: var(--r-pill); background: var(--panel2); overflow: hidden; } .progress__bar { display: block; height: 100%; border-radius: var(--r-pill); background: var(--acc-solid); transition: width .2s; } .file.is-error .file__name { color: var(--danger); } /* Результат: плеер, таймлайн, комментарии */ .review > .stack { min-width: 0; } .review { display: grid; gap: var(--sp-5); } @media (min-width: 1024px) { .review { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } } .player { display: grid; place-items: center; overflow: hidden; border-radius: var(--r); background: var(--stage); color: var(--stage-muted); } .player video { display: block; width: 100%; max-height: var(--player-max-h); background: var(--stage); } .player__empty { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-7) var(--sp-4); text-align: center; } .player--9x16 { aspect-ratio: 9 / 16; } .player--16x9 { aspect-ratio: 16 / 9; } .player--1x1 { aspect-ratio: 1; } .player--4x5 { aspect-ratio: 4 / 5; } .player:has(video) { aspect-ratio: auto; } .tl { display: flex; flex-direction: column; gap: var(--sp-2); } /* Курсор и метки — поверх дорожки, не раскладка */ .tl__marks { position: relative; height: var(--marker-target); } .tl__mark { position: absolute; top: 0; width: var(--marker-target); height: var(--marker-target); margin-left: calc(var(--marker-target) / -2); padding: 0; border: 0; background: transparent; cursor: pointer; } .tl__mark::after { content: ""; display: block; width: var(--sp-4); height: var(--sp-4); margin: auto; border-radius: 50% 50% 50% 0; background: var(--warn-solid); } .tl__mark.is-done::after { background: var(--marker-resolved); } .tl__mark:hover::after { background: var(--warn); } .cmt-form { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border: var(--stroke) solid var(--line); border-radius: var(--r); background: var(--surface-muted); } .cmts { display: flex; flex-direction: column; border: var(--stroke) solid var(--line); border-radius: var(--r); overflow: hidden; } .cmt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--sp-3); padding: var(--sp-3); border-bottom: var(--stroke) solid var(--line); background: var(--panel); } .cmt--previous { grid-template-columns: minmax(0, 1fr); } @media (max-width: 767px) { .cmt { grid-template-columns: minmax(0, 1fr); } .actions .row { max-width: 100%; } .actions .btn { white-space: normal; } } .cmt:last-child { border-bottom: 0; } .cmt.is-done { background: var(--surface-muted); color: var(--ink2); } .cmt.is-done .cmt__text { text-decoration: line-through; } .tc { display: inline-flex; align-items: center; min-height: var(--time-target); padding: 0 var(--sp-2); border: 0; border-radius: var(--r-pill); background: var(--warn-bg); color: var(--warn); font-family: var(--font-num); font-size: var(--fs-1); font-weight: 600; cursor: pointer; white-space: nowrap; } .tc:hover { background: var(--warn-solid); color: var(--on-warn); } .is-done .tc { background: var(--panel2); color: var(--ink2); } .tc--all, .tc--all:hover { background: var(--panel2); color: var(--ink2); font-family: inherit; } /* комментарий ко всему ролику */ button.tc--all:hover { color: var(--ink); } /* Нижняя панель действий */ .actions { position: sticky; bottom: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-5); padding: var(--sp-3) var(--sp-4); border: var(--stroke) solid var(--line); border-radius: var(--r); background: var(--panel); box-shadow: var(--shadow-pop); } .save-state { color: var(--ink3); font-size: var(--fs-1); } .save-float { position: fixed; z-index: 50; right: var(--sp-4); bottom: var(--sp-3); pointer-events: none; } /* одно на сайт, в углу (автор, 11.10) */ .save-float:empty { display: none; } .save-state--err { color: var(--danger); } /* Меню действий */ .action-menu { position: relative; } .action-menu > summary { list-style: none; } .action-menu > summary::-webkit-details-marker { display: none; } .action-menu__list { position: absolute; z-index: 20; top: calc(100% + var(--sp-1)); right: 0; display: flex; flex-direction: column; min-width: var(--menu-min-w); padding: var(--sp-1); border: var(--stroke) solid var(--line); border-radius: var(--r); background: var(--panel); box-shadow: var(--shadow-pop); } .action-menu__item { display: flex; align-items: center; gap: var(--sp-2); width: 100%; min-height: var(--btn-h); padding: 0 var(--sp-3); border: 0; border-radius: var(--r-s); background: transparent; color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; } .action-menu__item:hover { background: var(--panel2); } .action-menu__item--danger { color: var(--danger); } .action-menu__item--danger:hover { background: var(--danger-bg); } /* Состояния экрана */ .state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1); padding: var(--sp-6) var(--sp-4); border: var(--stroke) dashed var(--line2); border-radius: var(--r); color: var(--ink2); text-align: center; text-wrap: balance; } .state__icon { width: var(--icon-m); height: var(--icon-m); color: var(--ink2); } .state__art { display: block; width: 240px; max-width: 70%; margin-bottom: var(--sp-3); } /* иллюстрация состояния (12.10) */ .wait--art { padding: 0; margin: 0 auto; } .state__title { color: var(--ink); font-weight: 600; } .state--error .state__title, .state--error .state__icon { color: var(--danger); } .state__action { margin-top: var(--sp-3); } /* Скелетон: блик проходит волной сверху вниз — строки сдвинуты по времени (автор, 05.10). */ .skeleton { position: relative; display: block; height: var(--sp-4); overflow: hidden; border-radius: var(--r-s); background: var(--surface-alternate); } .skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--panel) 70%, transparent), transparent); animation: shimmer 1.6s ease-in-out infinite; } .skeleton:nth-child(2)::after { animation-delay: .12s; } .skeleton:nth-child(3)::after { animation-delay: .24s; } .skeleton:nth-child(4)::after { animation-delay: .36s; } .skeleton--row { height: var(--sp-9); border-radius: var(--r); } .skeleton--w50 { width: 50%; } @keyframes shimmer { to { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } } .alert { display: flex; gap: var(--sp-2); align-items: flex-start; padding: var(--sp-3); border-radius: var(--r-s); background: var(--panel2); color: var(--ink2); } .alert--error { background: var(--danger-bg); color: var(--danger); } /* Модальное окно */ .modal { width: min(calc(100% - var(--sp-6)), var(--login-max)); padding: var(--sp-5); border: 0; border-radius: var(--r-btn); background: var(--panel); color: var(--ink); box-shadow: var(--shadow-modal); } .file-preview { width: min(calc(100% - var(--sp-6)), 1100px); max-height: calc(100dvh - var(--sp-6)); overflow-y: auto; } .file-preview__head { flex-wrap: nowrap; margin-bottom: var(--sp-4); } .file-preview__head h2 { min-width: 0; overflow-wrap: anywhere; } .file-preview__head .btn { flex: none; } .file-preview__body { display: flex; align-items: center; justify-content: center; min-height: var(--sp-10); } .file-preview__body img, .file-preview__body video { display: block; width: 100%; max-height: 70dvh; object-fit: contain; } .file-preview__body audio { width: 100%; } .file-preview__body iframe { width: 100%; height: 70dvh; border: 0; } .file-preview__footer { justify-content: flex-end; margin-top: var(--sp-4); } .modal::backdrop { background: var(--overlay-bg); } .modal__actions { justify-content: flex-end; margin-top: var(--sp-2); } .modal b { color: var(--ink); } .btn--danger-solid { background: var(--danger-button-bg); border-color: var(--danger-button-bg); color: var(--ink-inverse); } .btn--danger-solid:hover:not(:disabled) { background: var(--danger-button-hover); border-color: var(--danger-button-hover); color: var(--ink-inverse); } /* Снекбар — всегда сверху слева (автор, 05.10): снизу его не видно. */ /* Уведомление (автор, 11.10): слева внизу, спокойное — цвет панели, тонкий край, мягкая тень; не перекрывает шапку и действия */ .toast { position: fixed; z-index: 60; bottom: var(--sp-4); left: var(--sp-4); max-width: min(400px, calc(100% - var(--sp-6))); display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: var(--stroke) solid rgb(255 255 255 / .08); border-radius: var(--r-btn); background: #21201c; color: #eeeeec; font-size: var(--fs-2); line-height: 1.4; box-shadow: var(--shadow-pop); } .toast .icon { color: currentColor; } /* снекбар тёмный в обеих темах — Radix Sand 12 светлой (автор, 11.10, 1.28.3) */ details > summary { cursor: pointer; } .login details[open] > summary { margin-bottom: var(--sp-3); } .login { max-width: var(--login-max); margin: var(--sp-7) auto 0; } code { font-family: var(--font-num); font-size: var(--fs-1); } .dd__list--styles { width: min(var(--style-menu-w), calc(100vw - var(--sp-7))); } .dd__text { flex: 1; min-width: 0; } .dd__group { padding: var(--sp-3) var(--sp-4) var(--sp-2); font-size: var(--fs-1); color: var(--ink2); font-weight: 600; } .style-preview { width: var(--sp-8); height: var(--sp-7); flex: 0 0 var(--sp-8); border-radius: var(--r-s); } .reference-preview__image { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; background: var(--panel2); overflow: hidden; border-radius: var(--r-s); } .reference-preview__image img { width: 100%; height: 100%; object-fit: contain; } .reference-preview__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-1); } /* Шаг «Стиль»: варианты кадрами (7.0) */ .style-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--sp-4); } .style-card { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; padding: var(--sp-3); border: var(--stroke) solid var(--line); border-radius: var(--r); background: var(--panel); } .style-card.is-chosen { border-color: var(--sel); } .style-card .style-card__img { max-height: var(--style-cover-max); } .style-chosen { display: grid; grid-template-columns: var(--sp-10) minmax(0, 1fr); gap: var(--sp-4); align-items: start; } .style-card__img { display: grid; place-items: center; width: 100%; aspect-ratio: var(--ar, 9 / 16); padding: 0; border: 0; border-radius: var(--r-s); background: var(--panel2); color: var(--ink); overflow: hidden; cursor: pointer; } .style-card__img img, .style-card__img video { display: block; width: 100%; height: 100%; object-fit: cover; } /* Телефон (06.10): шапка без почты, степпер и фильтры — лентой с прокруткой, а не в 3 строки */ @media (max-width: 767px) { .steps, .segmented--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; } .steps::-webkit-scrollbar, .segmented--scroll::-webkit-scrollbar { display: none; } .steps { margin-inline: calc(-1 * var(--sp-4)); padding-inline: var(--sp-4); } .steps__item, .segmented--scroll .segmented__item { flex: none; white-space: nowrap; } .segmented--scroll { display: flex; max-width: 100%; } } .dd__list:focus-visible { outline: var(--stroke-strong) solid var(--sel); outline-offset: var(--stroke-strong); } @media (max-width: 767px), (pointer: coarse) { :root { --btn-h: var(--touch-target); --compact-h: var(--touch-target); --toggle-h: var(--touch-target); --time-target: var(--touch-target); --marker-target: var(--touch-target); --switch-w: var(--touch-target); } .segmented__item, .segmented--xs .segmented__item { min-height: var(--touch-target); height: auto; } .switch { min-height: var(--touch-target); } .check { min-height: var(--touch-target); } .dd__btn { max-width: 100%; white-space: normal; } .opts__row { grid-template-columns: minmax(0, 1fr); } .opts__value { align-items: flex-start; text-align: left; } .dd__list { right: auto; left: 0; max-width: calc(100vw - var(--sp-8)); } .sblock__head { flex-wrap: wrap; } .file { grid-template-columns: var(--sp-7) minmax(0, 1fr); } .file > .row { grid-column: 2; } } /* Движение: быстрый отклик, мягкая остановка, без анимации размеров рабочей области. */ :root { --motion-fast: 120ms; --motion-base: 180ms; --motion-enter: 260ms; --motion-ease: cubic-bezier(.2,.8,.2,1); } .btn, .segmented__item, .dd__btn, .dd__opt, .action-menu__item, .ed__btn, .tc { transition: background-color var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-base), transform var(--motion-fast) var(--motion-ease); } .btn:active:not(:disabled), .segmented__item:active:not(:disabled), .ed__btn:active { transform: scale(.97); } .input, .textarea, .select, .dropzone, .file, .vrow, .rv__cmt { transition: background-color var(--motion-base), border-color var(--motion-base), box-shadow var(--motion-base), opacity var(--motion-base); } .file__pic, .vrow__pic { transition: transform var(--motion-base) var(--motion-ease); } @media (hover: hover) { .file--open:has(.file__open:hover) .file__pic, .vrow:has(.vrow__link:hover) .vrow__pic { transform: scale(1.035); } .dropzone:hover { box-shadow: inset 0 0 0 var(--stroke) var(--line); } } .switch__track { transition: background-color var(--motion-base); } .switch__track::after { transition: transform var(--motion-base) var(--motion-ease); } .modal[open] { animation: modal-enter var(--motion-enter) var(--motion-ease) both; } .modal[open]::backdrop { animation: fade-in var(--motion-base) ease-out both; } .modal.is-closing::backdrop { animation: fade-out var(--motion-fast) ease-in both; } .modal.is-closing { pointer-events: none; } .dd__list:not([hidden]), .action-menu[open] > .action-menu__list { transform-origin: top center; animation: menu-enter var(--motion-base) var(--motion-ease) both; } .inputs[open] > .inputs__body { animation: fade-in var(--motion-base) ease-out; } .toast:not([hidden]) { animation: toast-in var(--motion-enter) var(--motion-ease) both; } @keyframes toast-in { from { opacity: 0; transform: translateY(var(--sp-2)); } } .media-reveal { opacity: 0; transition: opacity var(--motion-enter) ease-out; } .media-reveal.is-loaded { opacity: 1; } .file-preview__body { position: relative; } .file-preview__body.is-visual { height: min(65dvh, 640px); } .file-preview__body.is-visual img, .file-preview__body.is-visual video { height: 100%; object-fit: contain; } .preview-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); color: var(--ink2); pointer-events: none; } .rv__video video { opacity: 0; transition: opacity var(--motion-enter) ease-out; } .rv__video.is-ready video { opacity: 1; } .player__loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); color: var(--ink2); transition: opacity var(--motion-base), visibility var(--motion-base); } .rv__video.is-ready:not(.is-buffering) .player__loading { opacity: 0; visibility: hidden; } .rv__video.is-buffering .player__loading { background: transparent; } /* Превью до видео: размытый кадр версии; кольцо — только если загрузка дольше 300 мс (автор, 11.10) */ .player__poster { position: absolute; inset: 0; background: center / contain no-repeat; filter: blur(6px); opacity: 0; transition: opacity var(--motion-enter) ease-out; pointer-events: none; } .player__poster.is-shown { opacity: .85; } .rv__video.is-ready .player__poster { opacity: 0; } .player__loading .loading-orbit { border-color: rgb(255 255 255 / .25); border-top-color: rgb(255 255 255 / .9); animation: loading-turn 900ms linear infinite, fade-in var(--motion-base) 300ms both; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .4)); } .loading-orbit { width: var(--sp-5); height: var(--sp-5); border: var(--stroke-strong) solid var(--line); border-top-color: var(--ink2); border-radius: var(--r-pill); animation: loading-turn 900ms linear infinite; } @keyframes loading-turn { to { transform: rotate(360deg); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes menu-enter { from { opacity: 0; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: none; } } @keyframes modal-enter { from { opacity: 0; transform: translateY(8px) scale(.975); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .btn:active:not(:disabled), .segmented__item:active:not(:disabled), .ed__btn:active, .file--open:has(.file__open:hover) .file__pic, .vrow:has(.vrow__link:hover) .vrow__pic { transform: none; } } .workspace-loading { padding: var(--sp-4); } .workspace-loading__preview { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--workspace-panel-radius); } /* ── Фон: лёгкий шум только на фоне страницы и только в тёмной теме, панели чистые (автор, 11.10) ── */ body { background-image: var(--noise); background-size: 160px 160px; } :root { --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } :root[data-theme="light"] { --noise: none; } /* в светлой шум темнил фон — убран (автор, 11.10) */ /* ── Контролы (10–11.10): выпуклые кнопки на градиенте соседних ступеней, без бликов; основная — ровная Orange 9. Текстовые действия в покое серые, при наведении — акцент. «⋯» — точки толще, размер как у иконок. ── */ .btn:not(.btn--ghost):not(.btn--primary):not(.btn--secondary):not(.btn--danger-solid), .composer__btn, .composer__chip, .cmd { border-color: transparent; background: var(--raise-bg); box-shadow: var(--raise-drop); } .btn:not(.btn--ghost):not(.btn--primary):not(.btn--secondary):not(.btn--danger-solid):hover:not(:disabled), .composer__btn:hover, .composer__chip:hover, .composer__menu[open] > summary, .cmd:hover { border-color: transparent; background: var(--raise-bg-hover); color: var(--ink); } .btn:not(.btn--ghost):active:not(:disabled), .composer__btn:active, .composer__chip:active, .cmd:active { transform: translateY(1px); box-shadow: inset 0 1px 2px rgb(0 0 0 / .3), var(--raise-drop); } .btn--primary, .composer__send, .cmd .icon { border-color: transparent; background: var(--orange-9); box-shadow: 0 1px 2px rgb(var(--shadow-rgb) / .3); } .btn--primary:hover:not(:disabled), .composer__send:hover { border-color: transparent; background: var(--orange-10); } .btn:disabled, .btn:disabled:hover { background: var(--panel2); box-shadow: none; } .more-btn, .btn--ghost, .file__note-btn { color: var(--ink2); } .more-btn:hover:not(:disabled), .btn--ghost:hover:not(:disabled):not(.btn--danger), .file__note-btn:hover, .start__head > .btn--icon:hover { color: var(--acc); } .file__menu > summary .icon, .rv__bar .action-menu > summary .icon, .start__head .action-menu > summary .icon { stroke-width: 4; } /* ── Первый экран: одно поле (10.10, по референсам композеров). Скругления: поле 24 / отступ 12 → полоса 12 / отступ 4 → кнопки 8 ── */ .page--start { min-height: 100vh; } .start { flex: 1; display: grid; place-items: center; padding: var(--sp-5) var(--sp-4) var(--sp-9); } .start__inner { width: 100%; max-width: 720px; display: flex; flex-direction: column; gap: var(--sp-3); } .start__note { color: var(--ink2); } .start__head { display: flex; align-items: center; gap: var(--sp-2); } .start__head > .btn--icon:first-child { margin-left: calc(-1 * var(--sp-2)); flex: none; } .start__title { flex: 1; min-width: 0; height: var(--btn-h); padding: 0 var(--sp-2); border: 0; border-radius: var(--r); background: transparent; color: var(--ink); font: inherit; font-size: var(--fs-5); font-weight: 600; letter-spacing: -.01em; outline: none; transition: background-color var(--motion-base); } .start__title::placeholder { color: var(--ink); opacity: 1; } .start__title:hover { background: var(--panel); } .start__title:focus { background: var(--panel); box-shadow: inset 0 0 0 var(--stroke) var(--line2); } .start__title:focus::placeholder { color: var(--ink3); } .composer { view-transition-name: brief; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-3); border: var(--stroke) solid var(--workspace-line); border-radius: var(--sp-5); background: var(--panel); transition: border-color var(--motion-base), background-color var(--motion-base); } .composer:focus-within { border-color: var(--line2); } .composer.is-drag { border-color: var(--acc); border-style: dashed; background: var(--acc-subtle); } .composer__input { width: 100%; min-height: calc(var(--sp-7) + var(--sp-5)); max-height: 50vh; padding: var(--sp-1) var(--sp-2) 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: var(--fs-3); line-height: 1.5; resize: none; outline: none; } .composer__input::placeholder { color: var(--ink3); } .folder-path { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; font-size: var(--fs-1); color: var(--ink2); overflow-wrap: anywhere; } .folder-path .icon { flex: none; } .composer__files { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-1); } .composer__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); } .composer__sp { flex: 1; } .composer__menu { position: relative; } .composer__menu > summary { list-style: none; } .composer__menu > summary::-webkit-details-marker { display: none; } .composer__btn, .composer__chip, .composer__send { display: inline-flex; align-items: center; justify-content: center; height: var(--compact-h); border: 0; border-radius: var(--r); cursor: pointer; transition: background-color var(--motion-base), transform var(--motion-base); } .composer__btn, .composer__chip { gap: var(--sp-2); color: var(--ink); } .composer__btn, .composer__send { width: var(--compact-h); } .composer__chip { padding: 0 var(--sp-3); font-size: var(--fs-2); } .composer__chip > .icon:first-child { color: var(--acc); } .composer__chip > .icon:last-child { color: var(--ink3); } .composer__btn .icon { transition: transform var(--motion-base); } .composer__menu[open] > .composer__btn .icon { transform: rotate(45deg); } .composer__send { color: var(--ink-inverse); } .composer__send:active { transform: scale(.96); } .composer__list { top: auto; bottom: calc(100% + var(--sp-2)); left: 0; right: auto; padding: var(--sp-2); border-radius: var(--sp-4); } /* 16 − 8 → внутри 8 */ .composer__list .action-menu__item { border-radius: var(--r); } .composer__seg { --segmented-radius: var(--r-btn); flex-wrap: nowrap; } /* параметры в строке поля (19.10) */ .composer__seg .segmented__item { padding: 0 var(--sp-2); } .segmented__item--icon { justify-content: center; width: var(--toggle-h); padding: 0; } .att { position: relative; flex: none; display: grid; grid-template-columns: var(--sp-6) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--sp-2); align-items: center; width: 200px; padding: var(--sp-2); padding-right: var(--sp-6); border: var(--stroke) solid var(--workspace-line); border-radius: var(--r-btn); background: var(--panel2); } .att:has(.att__open:hover) { border-color: var(--line2); } .att.is-error { border-color: var(--danger); } .att__open { position: absolute; inset: 0; z-index: 1; border: 0; background: transparent; cursor: pointer; border-radius: inherit; } .att__pic { grid-row: 1 / 3; display: grid; place-items: center; width: var(--sp-6); height: var(--sp-6); overflow: hidden; border-radius: var(--r); background: var(--panel); color: var(--acc); } .att__pic img { width: 100%; height: 100%; object-fit: cover; } .att__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-1); font-weight: 500; } .att__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink2); font-size: var(--fs-1); } .att .progress { grid-column: 1 / -1; margin-top: var(--sp-1); } .att__x { position: absolute; z-index: 2; top: var(--sp-1); right: var(--sp-1); display: grid; place-items: center; width: var(--sp-5); height: var(--sp-5); border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink3); cursor: pointer; } .att__x:hover { background: var(--sel-bg); color: var(--ink); } .att__x .icon { width: var(--sp-3); height: var(--sp-3); } .workspace-task { view-transition-name: brief; } ::view-transition-group(brief) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; } @media (max-width: 767px) { .start { padding-bottom: var(--sp-5); } } /* ── Ожидание агента: команда, затем «работаем» с точками (10.10) ── */ .wait { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); max-width: 640px; margin: auto; padding: var(--sp-6) var(--sp-4); text-align: center; } .wait__text { color: var(--ink); font-size: var(--fs-3); text-wrap: balance; } .wait__text .dots { margin-left: .2em; } .wait__art { position: relative; display: block; width: 320px; max-width: 100%; margin-bottom: var(--sp-3); } /* «Печатает»: кружок цвета облачка закрывает нарисованную точку, поверх бегает своя (цвета сняты с картинок) */ /* картинка обрезана по содержимому — отступ задаёт только CSS */ .art, .art img { display: block; width: 100%; height: auto; } .art--light { display: none; } /* тема по умолчанию — тёмная */ :root[data-theme="light"] .art--light { display: block; } :root[data-theme="light"] .art--dark { display: none; } .cmd { display: inline-flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-1); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); border: var(--stroke) solid transparent; border-radius: var(--r-btn); color: var(--ink); font: inherit; font-family: var(--font-num); cursor: pointer; } .cmd .icon { box-sizing: content-box; padding: var(--sp-1); border-radius: var(--r); color: var(--ink-inverse); } .dots { display: inline-flex; gap: .18em; vertical-align: baseline; } /* как многоточие: в долях шрифта, на линии текста (автор, 11.10) */ .dots i { width: .22em; height: .22em; border-radius: 50%; background: var(--acc-solid); animation: dot 1.2s ease-in-out infinite; } .dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; } @keyframes dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } } .callout--agent .dots { margin-left: .2em; } .badge .dots { gap: 2px; margin-left: var(--sp-1); align-self: center; } .badge .dots i { width: 3px; height: 3px; background: currentColor; } /* агент работает — точки в статусе (1.27.2) */ @media (prefers-reduced-motion: reduce) { .dots i { animation: none; } } /* ── Шапка ролика (11.10): 48 px, название и статус в одну строку, кнопки 32; по центру — версии ── */ .rv__bar .rv__title { flex-direction: row; align-items: center; gap: var(--sp-3); } .rv__bar .rv__title h1 { font-size: var(--fs-3); } .rv__bar .rv__title .vrow__meta { flex: none; flex-wrap: nowrap; } .rv__bar .rv__lead { gap: var(--sp-2); } .rv__bar .btn { min-height: var(--compact-h); padding: 0 var(--sp-3); font-size: var(--fs-2); } .rv__bar .btn--icon { width: var(--compact-h); padding: 0; } @media (max-width: 1023px) { .rv__bar { grid-template-columns: minmax(0, 1fr); margin: calc(-1 * var(--sp-2)) calc(-1 * var(--sp-2)) 0; } .rv__bar .rv__actions { justify-content: flex-start; } } @media (max-width: 767px) { .rv__bar .rv__title { flex-direction: column; align-items: flex-start; gap: 0; } } /* ── Загрузка страницы: скелетон по адресу — ролик или список (11.10) ── */ .boot-video, .boot-start { display: none; } :root[data-boot="start"] .boot-start { display: flex; } :root[data-boot="start"] .boot-list, :root[data-boot="start"] body > .header, :root[data-boot="start"] body > .mode-note { display: none; } :root[data-boot="start"] .container:has(.boot-start), :root[data-boot="start"] .main { max-width: none; padding: 0; } .start__skel { min-height: calc(var(--sp-10) + var(--sp-6)); justify-content: space-between; } .start__skel-bar { width: 100%; height: var(--compact-h); } :root[data-boot="video"] .boot-video { display: flex; } :root[data-boot="video"] .boot-list, :root[data-boot="video"] body > .header, :root[data-boot="video"] body > .mode-note { display: none; } :root[data-boot="video"] .container:has(.boot-video), :root[data-boot="video"] .main { max-width: none; padding: 0; } /* ── Таймлайн (11.10): дорожка комментариев только когда они есть; метка подсвечивает свой комментарий ── */ .ed__tl--nomarks .ed__labels, .ed__tl--nomarks .ed__area { grid-template-rows: var(--sp-5) var(--sp-7); } .ed__pin { box-shadow: 0 0 0 var(--stroke-strong) var(--ed-panel); transition: transform var(--motion-base); } .ed__pin:hover { transform: translate(-50%, -50%) scale(1.1); } .ed__pin.is-done { background: var(--panel2); color: var(--ink2); } .rv__cmt.is-flash { animation: cmt-flash 1.2s ease-out; } /* Сценарий на проверке (1.33.0): документ вместо видео, комментарий — к выделенной фразе */ .rv__main--doc { overflow-y: auto; gap: var(--sp-3); } .sdoc { position: relative; width: 100%; max-width: 720px; margin: 0 auto; padding: var(--sp-6) var(--sp-6) var(--sp-7); border: var(--stroke) solid var(--workspace-line); border-radius: var(--workspace-panel-radius); background: var(--panel); color: var(--ink); font-size: var(--fs-3); line-height: 1.6; } .sdoc > * + * { margin-top: var(--sp-3); } .sdoc__edit { position: absolute; top: var(--sp-3); right: var(--sp-3); color: var(--ink2); } .sdoc__edit:hover { color: var(--acc); } .sdoc__title { margin: 0 0 var(--sp-4); padding-right: var(--sp-10); font-size: var(--fs-5); font-weight: 700; line-height: 1.25; } .sdoc__block { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: var(--stroke) solid var(--workspace-line); font-size: var(--fs-2); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink2); } .sdoc__block:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .sdoc__sec { font-family: var(--font-num); font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink3); } .sdoc p { margin: 0; } .sdoc ul { margin: 0; padding-left: var(--sp-5); } .sdoc__shot { display: flex; gap: var(--sp-2); color: var(--ink2); font-size: var(--fs-2); } .sdoc__shot .icon { flex: none; margin-top: .25em; width: var(--sp-4); height: var(--sp-4); color: var(--ink3); } .sdoc[data-selectable] { cursor: text; } .sdoc__mark { padding: 0 1px; border-radius: var(--r-min); background: var(--warn-bg); color: inherit; box-shadow: inset 0 -2px 0 var(--warn-solid, var(--warn)); cursor: pointer; } .sdoc__mark.is-flash { animation: mark-flash 1.2s ease-out; } @keyframes mark-flash { 0%, 30% { background: var(--acc-bg); } 100% { background: var(--warn-bg); } } .sdoc__pick { position: fixed; z-index: 60; } .sdoc--edit { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); } .sdoc__editor { width: 100%; min-height: 50vh; padding: var(--sp-2); border: 0; background: transparent; color: var(--ink); font: inherit; font-size: var(--fs-3); line-height: 1.6; resize: none; outline: none; } .cmt-quote { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px var(--sp-2); border: 0; border-radius: var(--r-pill); background: var(--warn-bg); color: var(--warn); font: inherit; font-size: var(--fs-1); font-weight: 600; cursor: pointer; } .cmt-quote:hover { background: var(--warn-solid, var(--warn)); color: var(--on-warn, #fff); } .cmt-quote--draft { position: relative; display: inline-flex; align-items: center; gap: var(--sp-1); max-width: 70%; padding-right: var(--sp-6); cursor: default; } .cmt-quote--draft:hover { background: var(--warn-bg); color: var(--warn); } .cmt-quote--draft .att__x { top: 50%; right: 2px; transform: translateY(-50%); } @media (max-width: 767px) { .sdoc { padding: var(--sp-4); } } @media (prefers-reduced-motion: reduce) { .sdoc__mark.is-flash { animation: none; } } @keyframes cmt-flash { 0%, 30% { background: var(--warn-bg); } 100% { background: var(--panel); } } @media (prefers-reduced-motion: reduce) { .rv__cmt.is-flash { animation: none; } } /* ── Левая панель и «⋯» в строках (11.10): заголовки тише; меню строки видно при наведении, на тач-экранах — всегда ── */ .workspace-task .card__head .t-block-title, .workspace-task .field__label { font-size: var(--fs-2); font-weight: 500; color: var(--ink2); } .file--open > .row details, .file--open > .row summary { pointer-events: auto; } .files:has(.action-menu[open]) { overflow: visible; } .file__menu .action-menu__list, .rv__cmt .action-menu__list { z-index: 30; } @media (hover: hover) { .file__menu { opacity: 0; transition: opacity var(--motion-base); } .file:hover .file__menu, .file:focus-within .file__menu, .vrow:hover .file__menu, .vrow:focus-within .file__menu, .rv__cmt:hover .file__menu, .rv__cmt:focus-within .file__menu, .cmt:hover .file__menu, .cmt:focus-within .file__menu, .file__menu[open] { opacity: 1; } } .vfilter { align-self: flex-start; width: max-content; max-width: 100%; } /* ── Шапка главной (11.10): логотип слева, аккаунт справа; почта, тема, версия и выход — в меню ── */ .header__left { display: flex; align-items: baseline; gap: var(--sp-7); min-width: 0; } /* разделы — на базовой линии логотипа, 48 px от него (автор, 12.10) */ .header__brand { align-items: baseline; } .header__brand-logo { align-self: center; } .theme-tabs .segmented__item .icon { width: var(--icon-s); height: var(--icon-s); } .account > summary { list-style: none; } .account > summary::-webkit-details-marker { display: none; } /* Меню аккаунта: группы через разделитель; скругления 16 − 8 → 8 у блоков, лоток темы 8 − 4 → 4 у табов */ .avatar { display: block; width: var(--compact-h); height: var(--compact-h); border-radius: var(--r-pill); object-fit: cover; } .avatar--md { width: var(--sp-7); height: var(--sp-7); } .account__btn { display: block; border-radius: var(--r-pill); cursor: pointer; transition: box-shadow var(--motion-base); } .account__btn:hover, .account[open] > .account__btn { box-shadow: 0 0 0 var(--stroke-strong) var(--acc-line); } .account__list { min-width: 280px; gap: 0; padding: var(--sp-2); border-radius: var(--sp-4); } .account__who { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2); } .account__me { min-width: 0; color: var(--ink); font-size: var(--fs-2); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account__group { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2); border-top: var(--stroke) solid var(--workspace-line); } .account__label { color: var(--ink2); font-size: var(--fs-1); } .account__list .theme-tabs { display: flex; --segmented-radius: var(--r); } .account__list .theme-tabs .segmented__item { flex: 1; justify-content: center; } .account__list .action-menu__item { margin: 0 calc(-1 * var(--sp-2)); width: auto; padding: 0 var(--sp-2); border-radius: var(--r); } .account__ver { color: var(--ink3); font-size: var(--fs-1); } @media (max-width: 767px) { .header__left { gap: var(--sp-3); } .header__brand-name { display: none; } } /* Поле комментария (автор, 11.10) — как главное поле: одна рамка, текст, снизу время, скрепка и стрелка; стрелка — только когда есть текст */ .rv__side .cmt-box { gap: var(--sp-2); padding: var(--sp-3) 0 var(--sp-4); } .cmt-box__field { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--sp-2) var(--sp-2) var(--sp-3); border: var(--stroke) solid var(--workspace-line); border-radius: var(--r-btn); background: var(--field-bg); transition: border-color var(--motion-base); } .cmt-box__field:focus-within { border-color: var(--line2); } .cmt-box__input { width: 100%; min-height: var(--sp-7); max-height: 40vh; padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; line-height: 1.5; resize: none; outline: none; } .cmt-box__input::placeholder { color: var(--ink3); } .cmt-box__bar { display: flex; align-items: center; gap: var(--sp-1); } .cmt-box #cmt-files:empty, .cmt-box #cmt-files:not(:has(*)) { display: none; } /* Принятая версия — белая галочка в зелёном кружке (автор, 11.10) */ .ver-ok { display: inline-grid; place-items: center; width: var(--sp-4); height: var(--sp-4); border-radius: var(--r-pill); background: var(--ok-solid); color: #ffffff; } .ver-ok .icon { width: var(--sp-3); height: var(--sp-3); stroke-width: 3; } .ver-wait { display: inline-grid; place-items: center; width: var(--sp-4); height: var(--sp-4); color: var(--ink2); } .ver-wait .icon { width: var(--sp-3); height: var(--sp-3); } /* финал в очереди — часы, без анимации (1.34.1) */ .ver-spin { display: inline-grid; place-items: center; width: var(--sp-4); height: var(--sp-4); } /* финал собирается — крутится (1.27.1) */ .ver-spin .loading-orbit { width: var(--sp-3); height: var(--sp-3); border-width: 2px; } /* Крупная ▶ по центру кадра на паузе (автор, 11.10): только знак, клик проходит в кадр */ .play-big { position: absolute; z-index: 3; left: 50%; top: 50%; display: grid; place-items: center; width: var(--sp-8); height: var(--sp-8); border-radius: var(--r-pill); background: rgb(0 0 0 / .45); color: #ffffff; transform: translate(-50%, -50%); pointer-events: none; transition: opacity var(--motion-base), transform var(--motion-base); } .play-big .icon { width: var(--icon-m); height: var(--icon-m); margin-left: 3px; fill: currentColor; } .rv__stage.is-playing .play-big, .rv__stage:not(:has(.is-ready)) .play-big { opacity: 0; transform: translate(-50%, -50%) scale(.9); } .cmt-box__add .composer__list { left: auto; right: 0; min-width: 240px; } /* меню «+» у правого края панели */