/* Оболочка панели: тёмное меню слева, разделы справа, на телефоне — нижние вкладки. Всё содержимое разделов рисует React (`/ui/`), поэтому здесь осталась только рама и токены, которые ей нужны. Переключение разделов — класс `is-on` на кнопке и на её панели; ставит его `main.tsx` бандла. Тёмная тема — класс `dark` на , его ставит переключатель в шапке любого раздела, поэтому темнеет и рама тоже. */ /* Три уровня подложки, а не два: меню (--rail) — полотно раздела (--bg) — карточка (--surface). Раньше полотно почти совпадало с карточкой (1.06:1 на светлой, 1.08:1 на тёмной), карточки держались на одних волосяных рамках и интерфейс читался как одна блёклая простыня. Отрыв полотна от карточки теперь 1.14:1 и 1.20:1, рамки 1.43:1. Вторичный текст (--ink-3) держим на 7:1: в разделах он почти весь размером 11.5–12.5px, а для мелкого шрифта 4.5:1 — это нижняя граница читаемости, а не цель. --track — подложка мерных полос: раньше их рисовали цветом заливки блока (1.10:1), и полосу было не видно вовсе. */ :root { --ink: #14181D; --ink-3: #535A63; --line: #D3D8DE; --line-str: #BFC6CF; --track: #D9DEE4; --bg: #EDF0F5; --surface: #FFFFFF; --surface-2: #EBEFF4; --rail: #17202B; --rail-ink: #A3AEBC; --rail-on: #2C3B4E; --accent: #2C5FA8; --scroll-thumb: #B9C0C9; --sans: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif; } /* На тёмной ступени идут в другую сторону: карточка светлее полотна, как «elevated» у системных тем. Меню — самый тёмный слой. */ :root.dark { --ink: #EDF0F4; --ink-3: #AAB0B9; --line: #363E49; --line-str: #46505D; --track: #333B45; --bg: #0F1419; --surface: #1E252E; --surface-2: #252C35; --rail: #080B0F; --rail-ink: #9DA9B8; --rail-on: #26313F; --accent: #74A4E8; --scroll-thumb: #414B58; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; } .vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } ::-webkit-scrollbar { width: 7px; height: 7px; } ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); } /* ── рама ─────────────────────────────────────────────────────────── */ .app { height: 100dvh; display: flex; background: var(--surface); } /* min-height: 0 нужен на телефоне: там .app раскладывается столбиком, и без него колонка не сжимается ниже своего содержимого — экран вылезал за 100dvh, а страница прокручивалась в пустоту под ним. */ .col { flex: 1; min-width: 0; min-height: 0; display: flex; border-left: 1px solid var(--line-str); } .view { flex: 1; min-width: 0; display: none; flex-direction: column; } .view.is-on { display: flex; } /* Полотно раздела — утопленный уровень, чтобы карточки на нём стояли, а не растворялись. Ставим здесь, а не на .app-root в бандле: --bg знает только оболочка, и у экранов на React разные корни. */ .view--app { padding: 0; background: var(--bg); } /* Корень экрана на React ростом в раздел, а не в содержимое: иначе экран выше окна вылезал за оболочку панели и страница прокручивалась в пустоту ниже него. Прокручивает себя сам экран, своей серединой. */ .view--app > .app-root { display: flex; flex-direction: column; height: 100%; min-height: 0; } /* ── меню ─────────────────────────────────────────────────────────── */ .rail { width: 226px; flex: none; background: var(--rail); display: flex; flex-direction: column; padding: 16px 12px 18px; transition: width .14s ease; } .app.is-narrow .rail { width: 56px; padding: 16px 0 18px; align-items: center; } .rail__top { flex: none; display: flex; justify-content: flex-end; } .app.is-narrow .rail__top { justify-content: center; } .rail__toggle { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--rail-ink); background: none; border: 0; cursor: pointer; } .rail__toggle:hover { color: #FFF; } .rail__nav { flex: none; margin-top: 10px; } .rail__list, .rail__sub { list-style: none; margin: 0; padding: 0; } .rail__group + .rail__group { margin-top: 6px; } .rail__item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; font: inherit; font-size: 15px; font-weight: 600; color: var(--rail-ink); text-align: left; text-decoration: none; background: none; border: 0; cursor: pointer; } .rail__item:hover { color: #FFF; text-decoration: none; } .rail__item.is-on { background: var(--rail-on); color: #FFF; } /* Название раздела ведёт на его дашборд. Когда открыта вложенная страница, сам раздел не «выбран», но и не спит: белым, без подложки — иначе в меню не видно, где ты находишься. */ .rail__group.is-cur > .rail__item { color: #FFF; } /* Вложенные страницы: отступ и направляющая, продолжающая иконку раздела вниз. Своих иконок у них нет — связь несёт линия, а иконка в ряд с ней читалась бы как ещё один раздел. */ .rail__sub { margin: 2px 0 0 18px; border-left: 1px solid var(--rail-on); } .rail__item--sub { padding: 7px 10px 7px 13px; font-size: 14px; font-weight: 500; } .rail__item--sub svg { display: none; } /* Свёрнутое меню — только иконки: отступам и линии там негде разместиться, поэтому вложенность видно лишь в развёрнутом виде. */ .app.is-narrow .rail__nav { margin-top: 8px; } .app.is-narrow .rail__list, .app.is-narrow .rail__sub, .app.is-narrow .rail__group { display: flex; flex-direction: column; align-items: center; gap: 2px; } .app.is-narrow .rail__sub { margin: 2px 0 0; border-left: 0; } .app.is-narrow .rail__item { width: 34px; height: 34px; padding: 0; justify-content: center; } .app.is-narrow .rail__item--sub svg { display: block; } .app.is-narrow .rail__label { display: none; } .app.is-narrow .rail__group.is-cur > .rail__item { color: #FFF; } /* Ссылка в обход меню: с клавиатуры до экрана шли через все пять разделов. Видна только в фокусе. */ .skip { position: absolute; left: 8px; top: 8px; z-index: 40; padding: 8px 12px; background: var(--surface); color: var(--ink); font-size: 15px; border: 1px solid var(--line-str); transform: translateY(-200%); } .skip:focus { transform: none; text-decoration: none; } /* Кто вошёл и выход — внизу меню, отдельно от разделов: это не навигация. */ .rail__foot { margin-top: auto; padding-top: 12px; } .rail__who { display: block; padding: 0 10px 6px; font-size: 12px; color: var(--rail-ink); } .rail__who:empty { display: none; } .rail__out { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; font: inherit; font-size: 15px; color: var(--rail-ink); text-align: left; background: none; border: 0; cursor: pointer; } .rail__out:hover { color: #FFF; text-decoration: none; } /* Настройки внизу — ссылка, а не кнопка, и «вы здесь» у неё такое же, как у разделов: подложка и белый текст. */ .rail__out.is-on, .rail__out.is-cur { background: var(--rail-on); color: #FFF; } /* Луна и солнце обе в разметке, показывает нужную тема: подменять svg из JS значило бы держать иконку в двух местах — в разметке и в коде. */ .rail__theme .i-sun { display: none; } :root.dark .rail__theme .i-sun { display: block; } :root.dark .rail__theme .i-moon { display: none; } .app.is-narrow .rail__foot { padding-top: 8px; } .app.is-narrow .rail__who { display: none; } .app.is-narrow .rail__out { width: 34px; height: 34px; padding: 0; justify-content: center; } .tabbar { display: none; } /* Страница входа: ни меню, ни вкладок, ни рамки колонки — окно целиком под форму. Признак ставит роутер на . */ body[data-view="login"] .rail, body[data-view="login"] .tabbar { display: none !important; } body[data-view="login"] .col { border-left: 0; } /* Полоска «панель обновилась». Внизу справа: она не срочная, перекрывать ею содержимое незачем. */ .newver { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--rail); color: #FFF; font-size: 14px; box-shadow: 0 8px 28px rgba(22, 26, 31, .28); } .newver button { font: inherit; font-size: 14px; font-weight: 600; color: #FFF; background: none; border: 1px solid rgba(255, 255, 255, .35); padding: 4px 10px; cursor: pointer; } .newver button:hover { border-color: #FFF; } @media (max-width: 760px) { .newver { right: 12px; bottom: 60px; left: 12px; } } /* Битрикс — внешний источник витрины. Предупреждение висит над всеми разделами, а не только над «Звонками»: цифры из CRM участвуют и в сводке менеджера, и в финансах. */ .bitrix-warning { position: fixed; top: 12px; right: 16px; z-index: 50; max-width: min(560px, calc(100vw - 32px)); padding: 10px 12px; border: 1px solid #B53B27; background: #FFF5F2; color: #7A2419; font-size: 14px; line-height: 1.35; box-shadow: 0 8px 28px rgba(22, 26, 31, .18); } :root.dark .bitrix-warning { border-color: #DF7868; background: #3A1D19; color: #FFC5BB; } @media (max-width: 760px) { .bitrix-warning { top: 10px; right: 12px; left: 12px; } } /* ── телефон ──────────────────────────────────────────────────────── */ @media (max-width: 760px) { .app { flex-direction: column; } .rail { display: none; } .col { border-left: 0; } .tabbar { display: flex; flex: none; border-top: 1px solid var(--line); background: var(--surface); padding-bottom: env(safe-area-inset-bottom, 0px); } /* Шесть названий на узком телефоне вставали впритык к краям: «Менеджер» и «Настройки» длинные, и запаса ширины не оставалось. Поэтому вкладка теперь иконка — та же, что у раздела в меню, — а название осталось в aria-label и title. */ .tabbar__item { flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 16px 2px; font: inherit; color: var(--ink-3); text-decoration: none; background: none; border: 0; cursor: pointer; } .tabbar__item svg { display: block; flex: none; } @media (hover: hover) { .tabbar__item:hover { color: var(--ink); } } .tabbar__item.is-on { color: var(--primary-ink, var(--accent)); } } @media (prefers-reduced-motion: reduce) { .rail { transition: none; } } /* Разделы, выключенные в профиле аккаунта. Признак ставит сервер в до первой отрисовки; сам бандл такие адреса тоже не знает. */ html[data-finance="off"] [data-section="finance"], html[data-finance="off"] [data-view="finance"] { display: none !important; } html[data-marketing="off"] [data-section="marketing"], html[data-marketing="off"] [data-view="marketing"] { display: none !important; }