тег : браузер сливал его class в настоящий body, и так на страницу попадала тема. Теперь тему ставит сервер в App.razor, а это обычная обёртка — стили те же. */ main > .main-inner[b-clq4o1gbg6] { display: flex; flex-direction: column; flex: 1; min-height: 0; background-color: var(--bs-body-bg); color: var(--bs-font-color); } /* Mobile: the sidebar element only wraps the top bar (the nav itself is a fixed-position drawer). The stacking context keeps the top bar and its avatar dropdown above page content. */ .sidebar[b-clq4o1gbg6] { position: relative; z-index: 1030; background-color: var(--bs-sidebar); border-bottom: 1px solid var(--border-color); } @media (min-width: 992px) { .page[b-clq4o1gbg6] { flex-direction: row; } .sidebar[b-clq4o1gbg6] { display: flex; flex-direction: column; width: 300px; /* Ширина сайдбара фиксированная, ужиматься под соседа он не должен. */ flex-shrink: 0; height: 100vh; position: sticky; overflow: hidden; top: 0; border-right: 1px solid var(--border-color); border-bottom: none; } article[b-clq4o1gbg6] { padding-left: 2rem !important; padding-right: 1.5rem !important; } } #blazor-error-ui[b-clq4o1gbg6] { background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss[b-clq4o1gbg6] { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } /* /Components/Layout/NavMenu.razor.rz.scp.css */ /* --------------------------------------------------------------- Sidebar column: header (fixed) / nav list (scrolls) / footer (pinned). Nothing is absolutely positioned, so the list can never slide under or through the user button — it is clipped by .nav-scrollable. --------------------------------------------------------------- */ .sidebar-inner[b-i0kp5qli9z] { display: flex; flex-direction: column; flex: 1; min-height: 0; } .top-row[b-i0kp5qli9z] { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 1rem; background-color: var(--bs-sidebar); border-bottom: 1px solid var(--border-color); } .navbar-brand[b-i0kp5qli9z] { display: flex; align-items: center; gap: 0.5rem; min-width: 0; margin: 0; font-size: 1.25rem; color: var(--bs-font-color); text-decoration: none; user-select: none; } .navbar-brand:hover[b-i0kp5qli9z] { color: var(--bs-font-color); } .brand-version[b-i0kp5qli9z] { font-size: 0.4rem; align-self: center; } .nav-scrollable[b-i0kp5qli9z] { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; } .nav-footer[b-i0kp5qli9z] { flex: 0 0 auto; padding: 0.75rem; background-color: var(--bs-sidebar); border-top: 1px solid var(--border-color); } /* --------------------------------------------------------------- Nav items --------------------------------------------------------------- */ .bi[b-i0kp5qli9z] { display: inline-block; position: relative; width: 1.25rem; height: 1.25rem; margin-right: 0.75rem; top: -1px; background-size: cover; /* Крышка подарка, ноты и блики во время анимации выходят за viewBox. */ overflow: visible; transition: scale 120ms ease-out; } .nav-item[b-i0kp5qli9z] { font-size: 1rem; } .nav-item:first-of-type[b-i0kp5qli9z] { padding-top: 1rem; } .nav-item:last-of-type[b-i0kp5qli9z] { padding-bottom: 1rem; } .nav-item[b-i0kp5qli9z] .nav-link { color: var(--bs-font-color) !important; background: none; border-width: 0; border-style: solid; border-radius: 0.5rem; border-color: #e7e7e8; box-sizing: border-box; overflow-wrap: break-word; display: flex; align-items: center; line-height: 1.5; } /* Пункт, недоступный без подключённого бота: рисуется как обычный, но это кнопка, которая вместо перехода показывает модалку. */ .nav-item[b-i0kp5qli9z] .nav-link-locked { width: 100%; text-align: start; cursor: pointer; } /* Раздел в доработке: тот же пункт, но приглушённый и с меткой, чтобы недоступность была видна до клика, а не только по модалке после него. */ .nav-item[b-i0kp5qli9z] .nav-link-wip { color: var(--text-muted) !important; } .nav-item[b-i0kp5qli9z] .nav-link-wip .bi { opacity: 0.6; } .nav-item[b-i0kp5qli9z] .nav-link-wip-badge { margin-left: auto; padding: 0.1rem 0.4rem; border: 1px solid var(--border-color); border-radius: 999px; background-color: var(--hover); color: var(--text-muted); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .nav-item[b-i0kp5qli9z] a.active { background-color: var(--nav-active-bg); } .nav-item[b-i0kp5qli9z] .nav-link:hover:not(.active) { background-color: var(--navlink-hover); } /* --------------------------------------------------------------- Nav icon animations Каждая иконка разыгрывает свою сценку при наведении. Клик её повторяет: пока кнопка зажата, анимация снята и иконка вдавлена, а на отпускании :hover снова совпадает — и браузер запускает анимацию с начала. Так обходится без JS, который правил бы разметку, принадлежащую Blazor. Трансформы частей SVG считаются от их собственной рамки (fill-box), поэтому transform-origin ниже задан в процентах от самой части. --------------------------------------------------------------- */ /* :where — чтобы частные transform-origin ниже перебивали это правило без подсчёта весов. */ .nav-item[b-i0kp5qli9z] .bi :where(path, g) { transform-box: fill-box; transform-origin: center; } /* Ноты и блики появляются только в анимации. */ .nav-item[b-i0kp5qli9z] :is(.songs-note, .vip-glint) { opacity: 0; } .nav-item[b-i0kp5qli9z] .icon-home { transform-origin: 50% 100%; } .nav-item[b-i0kp5qli9z] .cmd-wand { transform-origin: 8% 92%; } .nav-item[b-i0kp5qli9z] .gift-lid { transform-origin: 50% 100%; } .nav-item[b-i0kp5qli9z] .gift-box { transform-origin: 50% 100%; } .nav-item[b-i0kp5qli9z] .logs-line { transform-origin: 0% 50%; } .nav-item[b-i0kp5qli9z] .bell-body { transform-origin: 50% 0%; } .nav-item[b-i0kp5qli9z] .icon-songs { transform-origin: 50% 70%; } .nav-item[b-i0kp5qli9z] .rewards-wand { transform-origin: 6% 94%; } .nav-item[b-i0kp5qli9z] .rewards-box { transform-origin: 50% 100%; } .nav-item[b-i0kp5qli9z] .icon-timeouts { transform-origin: 50% 90%; } .nav-item[b-i0kp5qli9z] .icon-shield { transform-origin: 50% 90%; } /* Стрелка живёт в маске, её рамка — весь циферблат: крутим вокруг центра часов. */ .nav-item[b-i0kp5qli9z] .timers-hand { transform-box: view-box; transform-origin: 8px 8.5px; } @media (hover: hover) { .nav-item[b-i0kp5qli9z] .nav-link:active .bi { scale: 0.82; } .nav-item[b-i0kp5qli9z] .nav-link:active :is(.bi, .bi *) { animation: none !important; } } @media (hover: hover) { /* Главная: домик подпрыгивает, приседая перед прыжком и после приземления. */ .nav-item[b-i0kp5qli9z] .nav-link:is(:hover, :focus-visible) .icon-home { animation: nav-home-hop-b-i0kp5qli9z 650ms cubic-bezier(0.3, 0.7, 0.4, 1); } /* Команды: взмах палочкой — и искры вспыхивают одна за другой. */ .nav-item[b-i0kp5qli9z] .nav-link:is(:hover, :focus-visible) .cmd-wand { animation: nav-wand-wave-b-i0kp5qli9z 700ms ease-in-out; } .nav-item[b-i0kp5qli9z] .nav-link:is(:hover, :focus-visible) .cmd-sparkle { animation: nav-sparkle-b-i0kp5qli9z 600ms ease-out backwards; } .nav-item[b-i0kp5qli9z] .nav-link:is(:hover, :focus-visible) .cmd-sparkle-left { animation-delay: 120ms; } .nav-item[b-i0kp5qli9z] .nav-link:is(:hover, :focus-visible) .cmd-sparkle-top { animation-delay: 220ms; } .nav-item[b-i0kp5qli9z] .nav-link:is(:hover, :focus-visible) .cmd-sparkle-right { animation-delay: 320ms; } /* Розыгрыши: крышка подарка подскакивает, коробка приседает под ней. */ .nav-item[b-i0kp5qli9z] .nav-link:is(:hover, :focus-visible) .gift-lid { animation: nav-gift-lid-b-i0kp5qli9z 750ms cubic-bezier(0.3, 0.7, 0.4, 1); } .nav-item[b-i0kp5qli9z] .nav-link:is(:hover, :focus-visible) .gift-box { animation: nav-gift-box-b-i0kp5qli9z 750ms ease-out; } /* Логи: строки дописываются сверху вниз. */ .nav-item[b-i0kp5qli9z] .nav-link:is(:hover, :focus-visible) .logs-mark { animation: nav-logs-mark-b-i0kp5qli9z 420ms cubic-bezier(0.3, 0.7, 0.4, 1.4) backwards; } .nav-item[b-i0kp5qli9z] .nav-link:is(:hover, :focus-visible) .logs-line { animation: nav-logs-line-b-i0kp5qli9z 420ms cubic-bezier(0.3, 0.7, 0.4, 1) backwards; } .nav-item[b-i0kp5qli9z] .nav-link:is(:hover, :focus-visible) .logs-row-1 { animation-delay: 0ms; } .nav-item[b-i0kp5qli9z] .nav-link:is(:hover, :focus-visible) .logs-row-2 { animation-delay: 110ms; } .nav-item[b-i0kp5qli9z] .nav-link:is(:hover, :focus-visible) .logs-row-3 { animation-delay: 220ms; } /* Оповещения: колокольчик звенит, язычок отстаёт от чаши. */ .nav-item[b-i0kp5qli9z] .nav-link:is(:hover, :focus-visible) .bell-body { animation: nav-bell-ring-b-i0kp5qli9z 900ms ease-out; } .nav-item[b-i0kp5qli9z] .nav-link:is(:hover, :focus-visible) .bell-clapper { animation: nav-bell-clapper-b-i0kp5qli9z 900ms ease-out; } /* Заказ песен: наушники качаются в такт, из них вылетают ноты. */ .nav-item[b-i0kp5qli9z] .nav-link:is(:hover, :focus-visible) .icon-songs { animation: nav-songs-bop-b-i0kp5qli9z 800ms ease-in-out; } .nav-item[b-i0kp5qli9z] .nav-link:is(:hover, :focus-visible) .songs-note-left { animation: nav-songs-note-left-b-i0kp5qli9z 900ms ease-out 80ms; } .nav-item[b-i0kp5qli9z] .nav-link:is(:hover, :focus-visible) .songs-note-right { animation: nav-songs-note-right-b-i0kp5qli9z 900ms ease-out 360ms; } /* Медиа-виджет: экран включается, как старый кинескоп. */ .nav-item[b-i0kp5qli9z] .nav-link:is(:hover, :focus-visible) .icon-screen { animation: nav-screen-power-b-i0kp5qli9z 750ms ease-in-out; } /* Награды: взмах лентой — звёзды вспыхивают, коробка подпрыгивает. */ .nav-item[b-i0kp5qli9z] .nav-link:is(:hover, :focus-visible) .rewards-wand { animation: nav-rewards-wand-b-i0kp5qli9z 700ms ease-in-out; } .nav-item[b-i0kp5qli9z] .nav-link:is(:hover, :focus-visible) .rewards-star { animation: nav-sparkle-b-i0kp5qli9z 550ms ease-out backwards; } .nav-item[b-i0kp5qli9z] .nav-link:is(:hover, :focus-visible) .rewards-star-1 { animation-delay: 200ms; } .nav-item[b-i0kp5qli9z] .nav-link:is(:hover, :focus-visible) .rewards-star-2 { animation-delay: 290ms; } .nav-item[b-i0kp5qli9z] .nav-link:is(:hover, :focus-visible) .rewards-star-3 { animation-delay: 380ms; } .nav-item[b-i0kp5qli9z] .nav-link:is(:hover, :focus-visible) .rewards-box { animation: nav-rewards-box-b-i0kp5qli9z 700ms cubic-bezier(0.3, 0.7, 0.4, 1); } /* VIP: камень поворачивается и вспыхивает бликами. */ .nav-item[b-i0kp5qli9z] .nav-link:is(:hover, :focus-visible) .vip-gem { animation: nav-vip-spin-b-i0kp5qli9z 800ms cubic-bezier(0.5, 0, 0.3, 1); } .nav-item[b-i0kp5qli9z] .nav-link:is(:hover, :focus-visible) .vip-glint { animation: nav-vip-glint-b-i0kp5qli9z 550ms ease-out 450ms; } .nav-item[b-i0kp5qli9z] .nav-link:is(:hover, :focus-visible) .vip-glint-left { animation-delay: 560ms; } /* Таймауты: часы трезвонят и подпрыгивают, как будильник на тумбочке. */ .nav-item[b-i0kp5qli9z] .nav-link:is(:hover, :focus-visible) .icon-timeouts { animation: nav-alarm-ring-b-i0kp5qli9z 750ms linear; } /* Таймеры: стрелка делает полный круг, колокольчики будильника подпрыгивают по очереди. */ .nav-item[b-i0kp5qli9z] .nav-link:is(:hover, :focus-visible) .timers-hand { animation: nav-timers-hand-b-i0kp5qli9z 900ms cubic-bezier(0.6, 0, 0.3, 1); } .nav-item[b-i0kp5qli9z] .nav-link:is(:hover, :focus-visible) .timers-bell-left { animation: nav-timers-bell-left-b-i0kp5qli9z 900ms ease-in-out; } .nav-item[b-i0kp5qli9z] .nav-link:is(:hover, :focus-visible) .timers-bell-right { animation: nav-timers-bell-right-b-i0kp5qli9z 900ms ease-in-out; } /* Интеграции: деталь пазла вынимается и защёлкивается обратно. */ .nav-item[b-i0kp5qli9z] .nav-link:is(:hover, :focus-visible) .icon-puzzle { animation: nav-puzzle-snap-b-i0kp5qli9z 700ms cubic-bezier(0.3, 0.7, 0.4, 1); } /* Администрирование: щит поднимается и встаёт в защиту. */ .nav-item[b-i0kp5qli9z] .nav-link:is(:hover, :focus-visible) .icon-shield { animation: nav-shield-guard-b-i0kp5qli9z 750ms cubic-bezier(0.3, 0.7, 0.4, 1); } } @keyframes nav-home-hop-b-i0kp5qli9z { 0% { transform: translateY(0) scale(1, 1); } 15% { transform: translateY(0) scale(1.15, 0.8); } 40% { transform: translateY(-38%) scale(0.9, 1.1); } 62% { transform: translateY(0) scale(1.12, 0.86); } 80% { transform: translateY(0) scale(0.97, 1.03); } 100% { transform: translateY(0) scale(1, 1); } } @keyframes nav-wand-wave-b-i0kp5qli9z { 0% { transform: rotate(0); } 25% { transform: rotate(-16deg); } 55% { transform: rotate(10deg); } 78% { transform: rotate(-3deg); } 100% { transform: rotate(0); } } @keyframes nav-sparkle-b-i0kp5qli9z { 0% { transform: scale(0) rotate(-60deg); opacity: 0; } 55% { transform: scale(1.4) rotate(15deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } } @keyframes nav-gift-lid-b-i0kp5qli9z { 0% { transform: translateY(0) rotate(0); } 15% { transform: translateY(5%) rotate(0); } 42% { transform: translateY(-55%) rotate(-12deg); } 64% { transform: translateY(0) rotate(0); } 78% { transform: translateY(-12%) rotate(4deg); } 100% { transform: translateY(0) rotate(0); } } @keyframes nav-gift-box-b-i0kp5qli9z { 0%, 8% { transform: scale(1, 1); } 16% { transform: scale(1.06, 0.9); } 32% { transform: scale(0.97, 1.04); } 56% { transform: scale(1, 1); } 66% { transform: scale(1.06, 0.9); } 82%, 100% { transform: scale(1, 1); } } @keyframes nav-logs-mark-b-i0kp5qli9z { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes nav-logs-line-b-i0kp5qli9z { 0% { transform: scaleX(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: scaleX(1); opacity: 1; } } @keyframes nav-bell-ring-b-i0kp5qli9z { 0% { transform: rotate(0); } 10% { transform: rotate(18deg); } 24% { transform: rotate(-15deg); } 38% { transform: rotate(11deg); } 52% { transform: rotate(-8deg); } 66% { transform: rotate(5deg); } 80% { transform: rotate(-2deg); } 100% { transform: rotate(0); } } @keyframes nav-bell-clapper-b-i0kp5qli9z { 0% { transform: translateX(0); } 14% { transform: translateX(-40px); } 28% { transform: translateX(34px); } 42% { transform: translateX(-24px); } 56% { transform: translateX(16px); } 70% { transform: translateX(-8px); } 84% { transform: translateX(3px); } 100% { transform: translateX(0); } } @keyframes nav-songs-bop-b-i0kp5qli9z { 0% { transform: rotate(0) scale(1); } 15% { transform: rotate(-10deg) scale(1.15); } 32% { transform: rotate(0) scale(1); } 50% { transform: rotate(10deg) scale(1.15); } 68% { transform: rotate(0) scale(1); } 100% { transform: rotate(0) scale(1); } } @keyframes nav-songs-note-left-b-i0kp5qli9z { 0% { transform: translate(0, 0) rotate(0) scale(0.4); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(-170px, -420px) rotate(-25deg) scale(1); opacity: 0; } } @keyframes nav-songs-note-right-b-i0kp5qli9z { 0% { transform: translate(0, 0) rotate(0) scale(0.4); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(200px, -400px) rotate(20deg) scale(1); opacity: 0; } } @keyframes nav-screen-power-b-i0kp5qli9z { 0% { transform: scale(1, 1); opacity: 1; } 20% { transform: scale(1.25, 0.06); opacity: 1; } 32% { transform: scale(0.06, 0.06); opacity: 0.4; } 38% { transform: scale(0.06, 0.06); opacity: 0.4; } 54% { transform: scale(1.2, 0.06); opacity: 1; } 66% { transform: scale(1.2, 0.06); opacity: 1; } 80% { transform: scale(0.94, 1.1); opacity: 1; } 91% { transform: scale(1.03, 0.97); opacity: 1; } 100% { transform: scale(1, 1); opacity: 1; } } @keyframes nav-rewards-wand-b-i0kp5qli9z { 0% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } 72% { transform: rotate(-3deg); } 100% { transform: rotate(0); } } @keyframes nav-rewards-box-b-i0kp5qli9z { 0%, 30% { transform: translateY(0) scale(1, 1); } 42% { transform: translateY(0) scale(1.08, 0.88); } 62% { transform: translateY(-18%) scale(0.96, 1.05); } 80% { transform: translateY(0) scale(1.05, 0.93); } 100% { transform: translateY(0) scale(1, 1); } } @keyframes nav-vip-spin-b-i0kp5qli9z { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } } @keyframes nav-vip-glint-b-i0kp5qli9z { 0% { transform: scale(0) rotate(0); opacity: 0; } 45% { transform: scale(1.2) rotate(45deg); opacity: 1; } 100% { transform: scale(0) rotate(90deg); opacity: 0; } } @keyframes nav-alarm-ring-b-i0kp5qli9z { 0% { transform: translateY(0) rotate(0); } 8% { transform: translateY(-10%) rotate(-14deg); } 16% { transform: translateY(-10%) rotate(14deg); } 24% { transform: translateY(-10%) rotate(-14deg); } 32% { transform: translateY(-10%) rotate(14deg); } 40% { transform: translateY(-10%) rotate(-12deg); } 48% { transform: translateY(-10%) rotate(12deg); } 56% { transform: translateY(-6%) rotate(-10deg); } 64% { transform: translateY(-6%) rotate(10deg); } 72% { transform: translateY(-3%) rotate(-6deg); } 80% { transform: translateY(0) rotate(4deg); } 90% { transform: translateY(0) rotate(-2deg); } 100% { transform: translateY(0) rotate(0); } } @keyframes nav-timers-hand-b-i0kp5qli9z { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } @keyframes nav-timers-bell-left-b-i0kp5qli9z { 0%, 40%, 80%, 100% { transform: translate(0, 0); } 20%, 60% { transform: translate(-1px, -1.2px); } } @keyframes nav-timers-bell-right-b-i0kp5qli9z { 0%, 20%, 60%, 100% { transform: translate(0, 0); } 40%, 80% { transform: translate(1px, -1.2px); } } @keyframes nav-puzzle-snap-b-i0kp5qli9z { 0% { transform: translate(0, 0) rotate(0) scale(1); } 32% { transform: translate(-14%, -18%) rotate(-16deg) scale(1.06); } 56% { transform: translate(3%, 3%) rotate(2deg) scale(0.9); } 74% { transform: translate(0, 0) rotate(0) scale(1.06); } 100% { transform: translate(0, 0) rotate(0) scale(1); } } @keyframes nav-shield-guard-b-i0kp5qli9z { 0% { transform: translateY(0) rotate(0) scale(1); } 25% { transform: translateY(-14%) rotate(-10deg) scale(1.12); } 45% { transform: translateY(-14%) rotate(8deg) scale(1.12); } 66% { transform: translateY(3%) rotate(0) scale(0.92); } 84% { transform: translateY(0) rotate(0) scale(1.04); } 100% { transform: translateY(0) rotate(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .nav-item[b-i0kp5qli9z] :is(.bi, .bi *) { animation: none !important; transition: none; } } /* --------------------------------------------------------------- Icon buttons (mobile hamburger + drawer close) --------------------------------------------------------------- */ .icon-button[b-i0kp5qli9z] { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2.5rem; height: 2.5rem; padding: 0; background-color: transparent; color: var(--bs-font-color); border: 1px solid var(--border-color); border-radius: 0.5rem; cursor: pointer; transition-property: background-color, border-color, color; transition-duration: 200ms; } .icon-button:hover[b-i0kp5qli9z] { background-color: var(--nav-item-hover); } .icon-button:focus-visible[b-i0kp5qli9z] { outline: none; box-shadow: 0 0 0 3px rgba(66, 153, 255, 0.6); } .icon-button svg[b-i0kp5qli9z] { width: 1.125rem; height: 1.125rem; } /* --------------------------------------------------------------- Mobile top bar + drawer --------------------------------------------------------------- */ .mobile-topbar[b-i0kp5qli9z] { display: none; } @media (max-width: 991.98px) { /* hamburger | logo | avatar — the 1fr side columns keep the logo optically centred */ .mobile-topbar[b-i0kp5qli9z] { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; min-height: 3.5rem; padding: 0.5rem 0.75rem; } .mobile-topbar .icon-button[b-i0kp5qli9z] { justify-self: start; } /* The third column is the root; it aligns itself (.user-menu.topbar) because it lives in another CSS scope. */ .mobile-brand[b-i0kp5qli9z] { justify-self: center; display: flex; align-items: center; } .mobile-brand img[b-i0kp5qli9z] { display: block; height: 2.5rem; width: auto; } .sidebar-inner[b-i0kp5qli9z] { position: fixed; inset: 0; /* Above page content, deliberately below the Bootstrap modal (1050/1055) so #botRequiredModal still renders on top of an open drawer. */ z-index: 1045; background-color: var(--bs-sidebar); transform: translateX(-100%); visibility: hidden; transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 280ms; overscroll-behavior: contain; } .sidebar-inner.open[b-i0kp5qli9z] { transform: translateX(0); visibility: visible; transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s; } } @media (min-width: 992px) { .nav-close[b-i0kp5qli9z] { display: none; } } @media (prefers-reduced-motion: reduce) { .sidebar-inner[b-i0kp5qli9z] { transition: none; } } /* --------------------------------------------------------------- Bot-required modal --------------------------------------------------------------- */ /* Окно рисуется в разметке меню, а у body цвет текста не задан: заголовок унаследовал бы тёмный bootstrap-овский по умолчанию и пропал на тёмном фоне. На страницах этого не видно — там цвет приходит от контейнера страницы. */ .modal-font-title[b-i0kp5qli9z] { color: var(--bs-font-color); } /* /Components/Layout/PublicLayout.razor.rz.scp.css */ /* Копия MainLayout.razor.css: изоляция стилей в Blazor привязана к компоненту, и правила соседнего layout сюда не достают. Правки сетки сайдбара нужно вносить в оба файла. */ .page[b-65xmk6ihiy] { position: relative; display: flex; flex-direction: column; min-height: 100vh; } main[b-65xmk6ihiy] { flex: 1; display: flex; flex-direction: column; min-height: 0; /* min-width: 0 обязателен: у flex-элемента min-width по умолчанию auto, поэтому широкая таблица внутри main не давала ему ужаться и отбирала ширину у сайдбара — тот съезжал с 300px и обрезал подписи пунктов меню. Теперь лишнее уходит в собственную прокрутку .container-xl, а сайдбар остаётся фиксированным. */ min-width: 0; } /* Раньше здесь стоял вложенный в