/* /Components/Account/Pages/Manage/Activate.razor.rz.scp.css */ /* Scoped-стили страницы активации. Цель — НЕ инлайн-стили (запрещены гайдом Syncfusion) и не «голые» bootstrap-карточки, а минимальная косметика поверх тем Syncfusion. ::deep нужен там, где разметку рендерит дочерний компонент Syncfusion (SfListView), а scope-атрибут на его узлы не попадает. */ /* Контейнер с position:relative — SfSpinner рендерится оверлеем внутри ближайшего позиционированного предка; без этого спиннер накрыл бы весь экран. */ .activation-host[b-n02lb9rzll] { position: relative; } /* Держит высоту области, пока пользователь грузится из БД (есть что накрывать спиннеру в первую отрисовку). */ .activation-placeholder[b-n02lb9rzll] { min-height: 140px; } /* Карточка фиксированной комфортной ширины — длинные строки текста хуже читаются (оптимум ~60–75 символов). */ .activation-card[b-n02lb9rzll] { max-width: 640px; margin-bottom: 1rem; } /* Отступы вокруг групп кнопок. */ .activation-actions[b-n02lb9rzll] { margin: 0.75rem 0; } /* Подсказка под кнопкой оплаты — мельче и приглушённее основного текста. */ .activation-hint[b-n02lb9rzll] { margin-top: 0.5rem; font-size: 0.85rem; color: var(--bs-secondary-color, #6c757d); } /* Список выгод — это статичная витрина, а не интерактивный список: убираем рамки/hover/курсор, чтобы он не выглядел «кликабельным». */ [b-n02lb9rzll] .activation-benefits, [b-n02lb9rzll] .activation-benefits .e-list-item { border: none; } [b-n02lb9rzll] .activation-benefits .e-list-item { height: auto; line-height: 1.5; padding: 0.35rem 0; cursor: default; background: transparent; } [b-n02lb9rzll] .activation-benefits .e-list-item:hover { background: transparent; } /* Зелёная «галочка» перед каждым пунктом выгод. */ [b-n02lb9rzll] .activation-benefit-icon { margin-right: 0.5rem; color: #198754; } /* /Components/Account/Pages/Manage/Billing.razor.rz.scp.css */ /* Scoped-стили страницы баланса. Цель та же, что и на странице активации: не инлайн-стили (запрещены гайдом Syncfusion) и не «голые» bootstrap-карточки, а минимальная косметика поверх тем Syncfusion. ::deep нужен там, где разметку рендерит дочерний компонент Syncfusion (SfButton/SfNumericTextBox) — scope-атрибут на его внутренние узлы не попадает. ВАЖНО ПРО ДИАЛОГ. SfDialog портирует свой контент в , ВНЕ DOM-поддерева страницы. Поэтому CSS-переменные темы (--primary, --bs-*) внутри диалога НЕ резолвятся (схлопываются в пустоту → серый/чёрный). Внутри диалога используем ЛИТЕРАЛЬНЫЕ цвета, а акцентную заливку кнопок отдаём встроенным классам Syncfusion (IsPrimary / e-primary), а не своим переменным. */ /* Отступ над кнопкой «Пополнить баланс» внутри карточки баланса — отделяет действие от пояснительного текста о незакрытых списаниях. */ .topup-actions[b-43xocv6cm6] { margin-top: 1rem; } /* ── Тело диалога пополнения ───────────────────────────────────────────── */ /* Колоночная раскладка с равномерными вертикальными отступами между элементами (поле суммы → пресеты → плашки → примечание). gap избавляет от ручных margin на каждом дочернем узле. */ .topup-dlg[b-43xocv6cm6] { display: flex; flex-direction: column; gap: 0.85rem; } /* Подпись над полем суммы (литеральный цвет — см. шапку про переменные в диалоге). */ .topup-dlg-label[b-43xocv6cm6] { font-weight: 600; color: #0f172a; margin-bottom: -0.25rem; } /* Поле ввода суммы растягиваем на всю ширину диалога — Syncfusion по умолчанию делает input-group inline-блоком фиксированной ширины. */ [b-43xocv6cm6] .topup-dlg .e-numeric.e-input-group { width: 100%; } /* Ряд кнопок-пресетов: переносится на новую строку на узких экранах (flex-wrap). */ .topup-presets[b-43xocv6cm6] { display: flex; flex-wrap: wrap; gap: 0.5rem; } /* Кнопка-пресет: компактная «пилюля». Сбрасываем min-width, который Syncfusion навешивает на кнопки по умолчанию, чтобы суммы сидели плотно. Цвет (синяя заливка для выбранной, синий контур для остальных) задаётся в разметке через IsPrimary + e-outline e-primary — здесь только форма и типографика. */ [b-43xocv6cm6] .topup-preset.e-btn { border-radius: 999px; min-width: auto; padding-inline: 1rem; font-weight: 600; } /* Плашки SfMessage внутри диалога (ошибка/предпросмотр) растягиваем на всю ширину и убираем их собственный внешний отступ — вертикальные интервалы держит gap .topup-dlg. */ [b-43xocv6cm6] .topup-dlg .e-message { width: 100%; margin: 0; } /* Примечание под формой (про редирект на Robokassa) — мельче и приглушённее. Литеральный серый вместо var(--bs-secondary-color): в диалоге переменная не резолвится. */ .topup-note[b-43xocv6cm6] { margin: 0; font-size: 0.85rem; color: #6c757d; } /* Небольшой зазор между кнопками «Отмена» и «Перейти к оплате» в подвале диалога. */ [b-43xocv6cm6] .topup-dlg-cancel { margin-right: 0.5rem; } /* /Components/Layout/Admin/AdminLayout.razor.rz.scp.css */ /* ───────────────────────────────────────────────────────────────────────── Стили AdminLayout. Важное про Blazor CSS Isolation: - Селекторы БЕЗ ::deep компилируются с атрибутом scope (b-xxxxx) на самом селекторе и применяются только к элементам, отрисованным ЭТИМ компонентом (то есть напрямую в AdminLayout.razor). - Селекторы С ::deep компилируются как [b-xxxxx] .foo и применяются к потомкам — то есть к элементам внутри @Body (страницам админки: Dashboard.razor, Users.razor и т.д.). Поэтому: .ops-shell / .ops-sidebar / .ops-nav / .ops-main находятся ПРЯМО в AdminLayout — БЕЗ ::deep. Всё остальное (.ops-card, .ops-btn, таблицы и т.п.) рендерится дочерними страницами — С ::deep. ───────────────────────────────────────────────────────────────────────── */ .ops-shell[b-28e6gmei75] { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; background: #0f1419; color: #d8dee9; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .ops-sidebar[b-28e6gmei75] { background: #0a0e13; border-right: 1px solid #1c2530; display: flex; flex-direction: column; padding: 18px 0; position: sticky; top: 0; height: 100vh; } .ops-brand[b-28e6gmei75] { padding: 0 20px 18px 20px; border-bottom: 1px solid #1c2530; display: flex; align-items: center; gap: 10px; font-size: 15px; color: #ffd166; letter-spacing: 0.5px; } .ops-brand i[b-28e6gmei75] { font-size: 18px; } .ops-brand strong[b-28e6gmei75] { color: #ff6b6b; font-weight: 600; } .ops-nav[b-28e6gmei75] { flex: 1; padding: 10px 0; overflow-y: auto; } /* ВАЖНО: NavLink — это дочерний компонент. Blazor CSS isolation НЕ добавляет scope-атрибут к элементам, отрисованным дочерним компонентом, поэтому к ссылке, которую рендерит NavLink, селекторы без ::deep НЕ применятся. Здесь обязательно нужно ::deep — иначе пункты сайдбара превратятся в обычные без стилей и слипнутся в строку. */ [b-28e6gmei75] .ops-nav-link { display: flex; align-items: center; gap: 12px; padding: 10px 20px; color: #aab4be; text-decoration: none; border-left: 3px solid transparent; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; font-size: 14px; } [b-28e6gmei75] .ops-nav-link i { width: 16px; text-align: center; color: #6b7785; } [b-28e6gmei75] .ops-nav-link:hover { background: #131a22; color: #ffffff; } [b-28e6gmei75] .ops-nav-link.active { background: #131a22; color: #ffd166; border-left-color: #ff6b6b; } [b-28e6gmei75] .ops-nav-link.active i { color: #ffd166; } .ops-foot[b-28e6gmei75] { padding: 12px 20px; border-top: 1px solid #1c2530; } .ops-logout[b-28e6gmei75] { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 9px 14px; color: #d8dee9; background: #1c2530; border: 1px solid #28323d; text-decoration: none; border-radius: 8px; font-size: 13px; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .ops-logout:hover[b-28e6gmei75] { background: #2a1818; border-color: #3a1f1f; color: #ff6b6b; } .ops-main[b-28e6gmei75] { padding: 24px 28px; overflow-x: hidden; } #blazor-error-ui[b-28e6gmei75] { background: #ff6b6b; color: #fff; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2); display: none; left: 0; padding: 0.6rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } /* ─── Дочерние страницы (нужен ::deep) ──────────────────────────────────── */ [b-28e6gmei75] .ops-page-title { font-size: 22px; font-weight: 600; color: #ffffff; margin: 0 0 6px 0; } [b-28e6gmei75] .ops-page-subtitle { color: #6b7785; font-size: 13px; margin: 0 0 22px 0; } [b-28e6gmei75] .ops-card { background: #131a22; border: 1px solid #1c2530; border-radius: 10px; padding: 18px 20px; margin-bottom: 18px; } [b-28e6gmei75] .ops-card-title { font-size: 13px; text-transform: uppercase; letter-spacing: 0.8px; color: #6b7785; margin: 0 0 10px 0; font-weight: 600; } /* ─── Базовая кнопка (расширения в страницах) ──────────────────────────── */ [b-28e6gmei75] .ops-btn { background: #1c2530; color: #d8dee9; border: 1px solid #28323d; border-radius: 8px; padding: 9px 16px; font-size: 13px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; text-decoration: none; } [b-28e6gmei75] .ops-btn:hover:not(:disabled) { background: #28323d; color: #fff; } [b-28e6gmei75] .ops-btn:disabled { opacity: 0.5; cursor: not-allowed; } [b-28e6gmei75] .ops-btn-primary { background: #ffd166; color: #131a22; border-color: #ffd166; } [b-28e6gmei75] .ops-btn-primary:hover:not(:disabled) { background: #ffba1f; border-color: #ffba1f; color: #131a22; } [b-28e6gmei75] .ops-btn-danger { background: #2a1818; color: #ff6b6b; border-color: #3a1f1f; } [b-28e6gmei75] .ops-btn-danger:hover:not(:disabled) { background: #3a1f1f; color: #ff6b6b; } [b-28e6gmei75] .ops-btn-small { padding: 5px 10px; font-size: 12px; } [b-28e6gmei75] .user-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* ─── Уведомление ─────────────────────────────────────────────────────── */ [b-28e6gmei75] .ops-notice { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 13px; } [b-28e6gmei75] .ops-notice.ok { background: #1a2a1a; border: 1px solid #2a3a2a; color: #69db7c; } [b-28e6gmei75] .ops-notice.err { background: #2a1a1a; border: 1px solid #3a1f1f; color: #ff6b6b; } [b-28e6gmei75] .ops-notice-close { margin-left: auto; background: transparent; border: none; color: inherit; cursor: pointer; opacity: 0.7; } [b-28e6gmei75] .ops-notice-close:hover { opacity: 1; } /* ─── Шапка раздела ────────────────────────────────────────────────────── */ [b-28e6gmei75] .ops-dashhead { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 18px; gap: 16px; } /* ─── Общие таблицы и пилюли ──────────────────────────────────────────── */ [b-28e6gmei75] .ops-table { width: 100%; border-collapse: collapse; font-size: 13px; } [b-28e6gmei75] .ops-table th { text-align: left; color: #6b7785; font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: 0.6px; padding: 8px 10px; border-bottom: 1px solid #1c2530; } [b-28e6gmei75] .ops-table td { padding: 8px 10px; border-bottom: 1px solid #161e27; color: #d8dee9; } [b-28e6gmei75] .ops-table tbody tr:hover { background: #161e27; } [b-28e6gmei75] .ops-table .right { text-align: right; } [b-28e6gmei75] .ops-table .mono { font-family: 'JetBrains Mono', 'Consolas', monospace; font-size: 12px; } [b-28e6gmei75] .ops-pill { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; } [b-28e6gmei75] .pill-page { background: #243042; color: #4dabf7; } [b-28e6gmei75] .pill-api { background: #1f3527; color: #69db7c; } [b-28e6gmei75] .pill-4xx { background: #3a2a1a; color: #ffb867; } [b-28e6gmei75] .pill-5xx { background: #3a1f1f; color: #ff6b6b; } [b-28e6gmei75] .ops-empty { color: #6b7785; font-size: 13px; padding: 16px 0; text-align: center; font-style: italic; } [b-28e6gmei75] .mono { font-family: 'JetBrains Mono', 'Consolas', monospace; font-size: 12px; } /* /Components/Layout/MainLayout.razor.rz.scp.css */ .page[b-jppw950l4o] { position: relative; display: flex; flex-direction: column; } main[b-jppw950l4o] { flex: 1; } #dockSidebar[b-jppw950l4o] { height: 100vh; display: flex; overflow: hidden; flex-direction: column; /*background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);*/ background-image: linear-gradient(180deg, #0066cc 0%, #004d99 70%); } #wrapper .sidebar-treeview[b-jppw950l4o] { z-index: 20 !important; } /* Во время dock-анимации (width 0.5s ease) Syncfusion на короткое время ставит на .e-sidebar overflow:visible — содержимое шириной 275px вылезает из узкого (65→275) бокса, и снизу мелькает горизонтальный скролл. Жёстко клипаем по X на всех фазах: при закрытом/открытом виде это ни на что не влияет, а мерцание скролла во время раскрытия пропадает. */ #wrapper[b-jppw950l4o] .e-sidebar { overflow-x: hidden !important; } [b-jppw950l4o] .dockAppBar { background-color: #004d99 !important; color: #ffffff !important; min-height: 3.5rem; } #wrapper[b-jppw950l4o] .pwyw-appbar-link.e-btn { display: inline-flex; align-items: center; gap: 8px; height: 2.4rem; padding: 0 14px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; font-weight: 750; letter-spacing: 0.005em; color: rgba(255, 255, 255, 0.96); background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(10px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.20); transform: translateY(0); transition: transform 140ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease; } #wrapper[b-jppw950l4o] .pwyw-appbar-link.e-btn:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.40); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.26); } #wrapper[b-jppw950l4o] .pwyw-appbar-link.e-btn:active { transform: translateY(0); background: rgba(255, 255, 255, 0.10); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22); } #wrapper[b-jppw950l4o] .pwyw-appbar-link.e-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.30), 0 0 0 6px rgba(0, 0, 0, 0.18); } #wrapper[b-jppw950l4o] .pwyw-appbar-link .e-btn-icon { font-size: 0.95rem; margin-right: 6px; } /* Воздух между кнопками AppBar, чтобы «Тарифы» и «Поддержать» не слипались */ #wrapper[b-jppw950l4o] .pwyw-appbar-link.e-btn { margin: 0 5px; } /* Разделитель перед кнопкой ЛК — приглушаем под тёмный AppBar */ #wrapper[b-jppw950l4o] .e-appbar-separator { border-color: rgba(255, 255, 255, 0.22); margin: 0 6px; } /* Кнопка входа/ЛК выровнена по тому же «стеклянному» стилю, что и пилюли слева, но БЕЗ заливки — вторичный акцент, не перетягивает внимание */ #wrapper[b-jppw950l4o] .account-switcher-btn.e-btn { height: 2.4rem; width: 2.4rem; padding: 0; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; color: rgba(255, 255, 255, 0.96); background: transparent; transition: background-color 180ms ease, border-color 180ms ease; } #wrapper[b-jppw950l4o] .account-switcher-btn.e-btn:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.40); } #wrapper .e-toolbar[b-jppw950l4o] { border-bottom: 1px solid #d2d6de; } .topnav[b-jppw950l4o] { min-height: 3.5rem; background-color: rgba(0,0,0,0.4); } .navbar-brand[b-jppw950l4o] { font-size: 1.1rem; } .navbar-brand-close[b-jppw950l4o] { margin-right: 0; } /* ============================================================================ Бренд-бар Atlorium в боковом меню — ЕДИНАЯ раскладка, не прыгает при анимации. .brand-bar — строка: [знак + имя] ……… [toggle]. Высота фиксирована. .brand-lockup — клик-зона (знак + имя), ведёт на главную. .brand-mark — «знак»: квадрат с буквой A и градиентом; всегда на одном месте. .brand-name — wordmark; в свёрнутом виде плавно скрывается (opacity+width). .menuIcon-trailing — toggle; в свёрнутом виде скрыт (его не нажать в рельсе). ПОЧЕМУ ТАК: раньше @if переключал два разных блока → знак телепортировался из центра влево, toggle резко появлялся. Теперь DOM один, двигаются только прозрачность/ширина имени и toggle → бар стоит на месте. ============================================================================ */ .brand-bar[b-jppw950l4o] { display: flex; align-items: center; height: 3.5rem; padding: 0 10px; overflow: hidden; position: relative; /* для абсолютного позиционирования toggle (см. ниже) */ } .brand-bar.is-collapsed[b-jppw950l4o] { /* В рельсе (65px) центрируем знак; padding убираем, чтобы знак встал по центру. */ padding: 0; justify-content: center; } .brand-lockup[b-jppw950l4o] { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; padding: 4px 8px 4px 4px; border-radius: 12px; min-width: 0; transition: background-color 180ms ease; } .brand-lockup:hover[b-jppw950l4o] { background: rgba(255, 255, 255, 0.08); text-decoration: none; } .brand-bar.is-collapsed .brand-lockup[b-jppw950l4o] { gap: 0; padding: 4px; } /* Имя: в свёрнутом виде сворачиваем по ширине и гасим прозрачностью — плавно, без переноса и без сдвига знака. */ .brand-bar.is-collapsed .brand-name[b-jppw950l4o] { width: 0; opacity: 0; margin: 0; overflow: hidden; } /* Toggle: АБСОЛЮТНО у правого края (вне потока), поэтому не влияет на центрирование знака в рельсе и НЕ «едет» вместе с правым краем при slide-анимации панели. ПОЯВЛЕНИЕ — через opacity с ЗАДЕРЖКОЙ: панель открывается 0.5s (width-transition), поэтому toggle проявляется лишь к концу анимации (delay 0.38s), а не ползёт половинкой слева направо. При сворачивании гаснет сразу. */ .brand-bar .menuIcon-trailing[b-jppw950l4o] { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity 0.16s ease, background-color 150ms ease; } .brand-bar.is-open .menuIcon-trailing[b-jppw950l4o] { opacity: 1; pointer-events: auto; transition: opacity 0.2s ease 0.38s, background-color 150ms ease; } /* «Знак» бренда — квадрат 34×34 с градиентом голубой→фиолетовый→пурпурный и буквой A. Размер 34px подобран под высоту строки 3.5rem AppBar/topnav, чтобы помещался по вертикали с воздухом. inset box-shadow с прозрачным белым даёт лёгкую внутреннюю подсветку — мягкая «стеклянная» окантовка. flex-shrink:0 не даёт ему сжаться, когда соседний wordmark не помещается. */ .brand-mark[b-jppw950l4o] { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, #38bdf8 0%, #6366f1 55%, #a855f7 100%); box-shadow: 0 6px 16px rgba(99, 102, 241, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.22); flex-shrink: 0; } /* Буква A внутри знака. font-family задаётся явно, чтобы на разных платформах рендер не «гулял» от системного шрифта — Atlorium должен выглядеть одинаково везде. */ .brand-mark-letter[b-jppw950l4o] { color: #ffffff; font-weight: 800; font-size: 1.05rem; line-height: 1; letter-spacing: 0.5px; font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; text-shadow: 0 1px 2px rgba(15, 23, 42, 0.35); } /* Текст «Atlorium» с горизонтальным градиентом. Техника: задаём градиентный background, обрезаем его по контуру глифов через background-clip:text и делаем сам текст прозрачным (-webkit-text-fill-color:transparent) — сквозь прозрачные глифы виден обрезанный градиент. fallback `color:#ffffff` спасает на старых браузерах, где background-clip:text не поддерживается. */ .brand-name[b-jppw950l4o] { color: #ffffff; font-weight: 700; font-size: 1.15rem; letter-spacing: 0.4px; background: linear-gradient(90deg, #ffffff 0%, #e0f2fe 50%, #c7d2fe 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; white-space: nowrap; /* Плавное скрытие/появление имени при сворачивании (см. .brand-bar.is-collapsed). */ transition: width 180ms ease, opacity 160ms ease; } /* AppBar-вариант брендa: чуть мельче и без подложки при ховере не нужно — AppBar уже сам по себе акцентная полоса. */ .brand-lockup-appbar[b-jppw950l4o] { margin-left: 4px; padding: 2px 6px 2px 2px; } .brand-name-appbar[b-jppw950l4o] { font-size: 1.05rem; letter-spacing: 0.3px; } /* Слоган в AppBar, когда панель открыта — тонкая, приглушённая подпись, она не конкурирует с брендом из сайдбара. Три качества разделены акцентными точками брендового цвета. */ .appbar-tagline[b-jppw950l4o] { display: inline-flex; align-items: baseline; gap: 4px; color: rgba(255, 255, 255, 0.82); font-weight: 500; font-size: 0.92rem; letter-spacing: 0.3px; margin-left: 14px; white-space: nowrap; } .appbar-tagline-word[b-jppw950l4o] { color: rgba(255, 255, 255, 0.92); } .appbar-tagline-dot[b-jppw950l4o] { color: #38bdf8; font-weight: 800; margin-right: 4px; } @media (max-width: 768px) { .appbar-tagline[b-jppw950l4o] { display: none; } } .menuIcon[b-jppw950l4o] { font-size: 1.2em; cursor: pointer; color: #ffffff; } /* В развёрнутом меню иконка управления стоит после бренда — прижимаем её к правому краю, чтобы клик-зона была предсказуемой и не наезжала на буквы wordmark. */ .menuIcon-trailing[b-jppw950l4o] { margin-left: auto; padding: 6px 10px; border-radius: 8px; transition: background-color 150ms ease; } .menuIcon-trailing:hover[b-jppw950l4o] { background: rgba(255, 255, 255, 0.10); } /* .topElementOpen/.topElementClose удалены: заменены единым .brand-bar (is-open/is-collapsed), который не «прыгает» при анимации. */ .top-row[b-jppw950l4o] { background-color: #f7f7f7; border-bottom: 1px solid #d6d5d5; justify-content: flex-end; height: 3.5rem; display: flex; align-items: center; } .top-row[b-jppw950l4o] a, .top-row[b-jppw950l4o] .btn-link { white-space: nowrap; margin-left: 1.5rem; text-decoration: none; } .top-row[b-jppw950l4o] a:hover, .top-row[b-jppw950l4o] .btn-link:hover { text-decoration: underline; } .top-row[b-jppw950l4o] a:first-child { overflow: hidden; text-overflow: ellipsis; } @media (max-width: 640.98px) { .top-row[b-jppw950l4o] { justify-content: space-between; } .top-row[b-jppw950l4o] a, .top-row[b-jppw950l4o] .btn-link { margin-left: 0; } } @media (min-width: 641px) { .page[b-jppw950l4o] { flex-direction: row; } .sidebar[b-jppw950l4o] { width: 250px; height: 100vh; position: sticky; top: 0; } .top-row[b-jppw950l4o] { position: sticky; top: 0; z-index: 1; } .top-row.auth[b-jppw950l4o] a:first-child { flex: 1; text-align: right; width: 0; } .top-row[b-jppw950l4o], article[b-jppw950l4o] { padding-left: 2rem !important; padding-right: 1.5rem !important; } } /* Стиль для #blazor-error-ui перенесён в wwwroot/app.css (глобальный), чтобы корректно работать и на страницах /Account/* через AccountLayout. */ /* /Components/Layout/NavMenu.razor.rz.scp.css */ /* ============================================================================ Боковое меню сервисов (SfTreeView внутри dock-SfSidebar). Принципы: • Никаких CSS-сдвигов клик-зоны — переход обеспечивает FullRowNavigable. • Стилизуем штатные селекторы Syncfusion (.e-treeview, .e-list-item, .e-fullrow, .e-text-content, .e-list-icon, .e-list-text) через ::deep. • Тёмно-синий фон задаёт #dockSidebar (MainLayout). Здесь — только содержимое. • Палитра вынесена в переменные на .main-menu (наследуются и в ::deep). ============================================================================ */ .main-menu[b-uexm9jqj31] { --menu-fg: rgba(255, 255, 255, 0.92); --menu-fg-muted: rgba(255, 255, 255, 0.64); --menu-icon: rgba(255, 255, 255, 0.82); --menu-hover-bg: rgba(255, 255, 255, 0.08); --menu-active-bg: rgba(255, 255, 255, 0.14); --menu-accent: #38bdf8; /* небесно-голубой из бренд-градиента */ --menu-divider: rgba(255, 255, 255, 0.12); height: 100%; display: flex; flex-direction: column; overflow: hidden; } /* ── Шапка: «Главная» + поиск ─────────────────────────────────────────────── */ .menu-header[b-uexm9jqj31] { flex-shrink: 0; padding: 14px 10px 4px; } .is-collapsed .menu-header[b-uexm9jqj31] { padding: 14px 0 4px; display: flex; flex-direction: column; align-items: center; gap: 6px; } [b-uexm9jqj31] .home-link { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 8px; color: var(--menu-fg); text-decoration: none; transition: background-color .15s ease, color .15s ease; } [b-uexm9jqj31] .home-link:hover { background: var(--menu-hover-bg); color: #fff; } [b-uexm9jqj31] .home-link.active { background: var(--menu-active-bg); box-shadow: inset 3px 0 0 0 var(--menu-accent); color: #fff; } .is-collapsed[b-uexm9jqj31] .home-link { justify-content: center; gap: 0; padding: 10px 0; width: 44px; } .home-icon[b-uexm9jqj31] { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; } .is-collapsed .home-icon[b-uexm9jqj31] { font-size: 18px; } .home-text[b-uexm9jqj31] { font-size: 14px; font-weight: 500; white-space: nowrap; } .menu-search[b-uexm9jqj31] { padding: 10px 4px 0; } .menu-search-icon[b-uexm9jqj31] { color: var(--menu-icon); font-size: 18px; padding: 6px 0; cursor: pointer; } /* Поле поиска (SfTextBox) под тёмный фон: убираем светлую подложку bootstrap5, делаем «стеклянную» полупрозрачную пилюлю с белым текстом. */ [b-uexm9jqj31] .menu-search-box.e-input-group, [b-uexm9jqj31] .menu-search-box.e-input-group.e-control-wrapper { background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 8px; padding: 1px 10px; box-shadow: none; } [b-uexm9jqj31] .menu-search-box.e-input-group::before, [b-uexm9jqj31] .menu-search-box.e-input-group::after { display: none; /* нижняя линия-индикатор фокуса нам не нужна */ } [b-uexm9jqj31] .menu-search-box.e-input-group input.e-input { background: transparent; color: #fff; font-size: 14px; } [b-uexm9jqj31] .menu-search-box.e-input-group input.e-input::placeholder { color: rgba(255, 255, 255, 0.55); } [b-uexm9jqj31] .menu-search-box.e-input-group.e-input-focus { border-color: var(--menu-accent); background: rgba(255, 255, 255, 0.14); box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25); } /* ── Заголовок группы / разделитель ───────────────────────────────────────── */ .menu-group-header[b-uexm9jqj31] { margin: 14px 0 6px; padding: 0 20px; font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); /* nowrap: во время slide-анимации панели (65→275px) заголовок не должен переноситься в 2 строки и «прыгать» — текст всегда в одну строку. */ white-space: nowrap; overflow: hidden; } .menu-divider[b-uexm9jqj31] { height: 1px; margin: 10px 14px; background: var(--menu-divider); } /* ── Прокручиваемая область дерева ─────────────────────────────────────────── */ .menu-scrollable[b-uexm9jqj31] { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0 8px; } .menu-scrollable[b-uexm9jqj31]::-webkit-scrollbar { width: 8px; } .menu-scrollable[b-uexm9jqj31]::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 4px; } .menu-scrollable[b-uexm9jqj31]::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); } /* ── Дерево: базовая раскладка ─────────────────────────────────────────────── */ [b-uexm9jqj31] .service-tree, [b-uexm9jqj31] .service-tree .e-ul { padding: 0; margin: 0; background: transparent; border: none; /* Единственный скролл/клип-контейнер — .menu-scrollable. На самом дереве и