/* ============================================================================ OCC Shell VNext — новый навигационный каркас `base.html` (Блок 1 плана docs/design/OCC_FULL_REDESIGN_PLAN.md). ПОЧЕМУ ОТДЕЛЬНЫЙ ФАЙЛ, А НЕ .occ-vnext НА : occ-vnext-primitives.css скоуплен под `.occ-vnext` и делает глобальный ресет всех потомков (списки, ссылки, box-sizing, шрифт) — это безопасно на изолированных *_vnext-страницах, но `base.html` — обёртка для 167+ старых production-шаблонов со своим Bootstrap/CSS. Навешать `.occ-vnext` на тихо перекрасило бы содержимое всех старых страниц. Поэтому здесь — узкий каркас `.occ-shell` (только сам rail+topbar, БЕЗ ресета потомков), а токены (--v-*) переиспользованы копированием palette (тот же файл occ-vnext-tokens.css подключить нельзя по той же причине — он тоже скоуплен под `.occ-vnext`). Значения цветов идентичны occ-vnext-tokens.css, чтобы каркас и будущие перестилизованные страницы визуально совпадали. ========================================================================== */ /* Старый .navbar-modern был `position:fixed`, поэтому body/main.page-container получали компенсирующий padding-top:70px (style.css) и min-height:calc(100vh - 70px) (design-system.css). Новый каркас — не fixed full-width navbar, а grid rail+topbar внутри собственного контейнера, поэтому эти компенсации нужно снять именно на страницах с новым shell. */ body.occ-shell-page, body:has(.occ-shell) { padding-top: 0 !important; } body.occ-shell-page main.page-container, body:has(.occ-shell) main.page-container { min-height: auto !important; padding-top: 0 !important; } .occ-shell { --os-canvas: #090A0C; --os-surface: #14171B; --os-surface-hover: #20252B; --os-line: rgba(240,243,246,.075); --os-line-strong: rgba(240,243,246,.15); --os-line-bright: rgba(240,243,246,.26); --os-text: #F3F5F7; --os-text-muted: #A9B1B7; --os-text-subtle: #6E767D; --os-orange: #FF641E; --os-orange-bright: #FF8244; --os-orange-soft: rgba(255,100,30,.12); --os-orange-softer: rgba(255,100,30,.06); --os-orange-line: rgba(255,100,30,.42); --os-orange-glow: rgba(255,100,30,.22); --os-red: #F0584E; --os-ink: #1B0F06; --os-radius-sm: .5rem; --os-radius-md: .75rem; --os-radius-lg: 1rem; --os-radius-pill: 999px; --os-motion-fast: 120ms; --os-motion-base: 200ms; --os-motion-slow: 320ms; --os-ease: cubic-bezier(.22,.8,.28,1); --os-touch-min: 2.75rem; --os-z-sidebar: 1040; --os-z-topbar: 1035; --os-z-dropdown: 1060; --os-z-mobile-nav: 1070; } @media (prefers-reduced-motion: reduce) { .occ-shell, .occ-shell * { transition-duration: 1ms !important; animation-duration: 1ms !important; } } /* ---- Layout: rail (постоянный на desktop/tablet) + page ------------------- */ .occ-shell { display: grid; grid-template-columns: 15rem minmax(0,1fr); min-height: 100vh; background: var(--os-canvas); } /* Оверлей-скрим для мобильной шторки — не участвует в grid-раскладке ни на одном breakpoint (position:fixed сам по себе не исключает элемент из grid-track allocation, поэтому display:none обязателен как базовое состояние). Показывается только через .is-menu-open ниже, в @media. */ .os-menu-scrim { display: none; } .os-sidebar { position: sticky; top: 0; z-index: var(--os-z-sidebar); display: flex; flex-direction: column; height: 100vh; padding: 1rem .75rem; gap: .3rem; border-right: 1px solid var(--os-line); background: rgba(9,10,12,.9); backdrop-filter: blur(8px); } .os-brand { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem .9rem; text-decoration: none; color: var(--os-text); flex-shrink: 0; } .os-brand__mark { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .6rem; background: var(--os-orange-soft); color: var(--os-orange); font-weight: 900; font-size: 1rem; flex-shrink: 0; } .os-brand__word { display: grid; line-height: 1.1; } .os-brand__word b { font-size: 1.15rem; font-weight: 880; letter-spacing: -.03em; } .os-brand__word small { color: var(--os-text-subtle); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; } .os-nav { display: flex; flex-direction: column; gap: .1rem; overflow-y: auto; flex: 1 1 auto; min-height: 0; } .os-nav::-webkit-scrollbar { width: 6px; } .os-nav::-webkit-scrollbar-thumb { background: var(--os-line-strong); border-radius: 999px; } .os-nav-item { display: flex; align-items: center; gap: .7rem; padding: .58rem .7rem; border-radius: var(--os-radius-sm); color: var(--os-text-muted); font-size: .84rem; font-weight: 620; text-decoration: none; position: relative; transition: color var(--os-motion-base), background var(--os-motion-base); min-height: var(--os-touch-min); } .os-nav-item:hover { color: var(--os-text); background: rgba(255,255,255,.04); } .os-nav-item.is-active { color: var(--os-orange-bright); background: linear-gradient(90deg, var(--os-orange-soft), transparent); } .os-nav-item.is-active::before { content: ""; position: absolute; left: -.75rem; top: 50%; transform: translateY(-50%); width: 3px; height: 1.4rem; border-radius: 0 3px 3px 0; background: var(--os-orange); } .os-nav-item i { width: 1.2rem; text-align: center; font-size: 1.05rem; flex-shrink: 0; } .os-nav-item__badge { margin-left: auto; min-width: 1.3rem; height: 1.3rem; display: grid; place-items: center; padding: 0 .3rem; border-radius: 999px; background: var(--os-orange-soft); color: var(--os-orange-bright); font-size: .62rem; font-weight: 800; } .os-nav-divider { height: 1px; background: var(--os-line); margin: .55rem .1rem; flex-shrink: 0; } .os-nav-section { padding: .35rem .7rem .1rem; color: var(--os-text-subtle); font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; flex-shrink: 0; } .os-sidebar__foot { margin-top: auto; padding-top: .6rem; flex-shrink: 0; } .os-collapse-btn { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .58rem .7rem; border: 1px solid transparent; border-radius: var(--os-radius-sm); background: transparent; color: var(--os-text-subtle); font-size: .8rem; font-weight: 620; cursor: pointer; min-height: var(--os-touch-min); transition: color var(--os-motion-base), background var(--os-motion-base); } .os-collapse-btn:hover { color: var(--os-text); background: rgba(255,255,255,.04); } .os-collapse-btn i { transition: transform var(--os-motion-slow) var(--os-ease); } .occ-shell.is-collapsed .os-collapse-btn i { transform: rotate(180deg); } /* ---- Collapsed rail state (desktop) — icon-only ---------------------------- */ .occ-shell.is-collapsed { grid-template-columns: 4.75rem minmax(0,1fr); } .occ-shell.is-collapsed .os-sidebar { padding-inline: .5rem; } .occ-shell.is-collapsed .os-brand { justify-content: center; padding: .5rem 0 .9rem; } .occ-shell.is-collapsed .os-brand__word, .occ-shell.is-collapsed .os-nav-item span, .occ-shell.is-collapsed .os-nav-item__badge, .occ-shell.is-collapsed .os-nav-section, .occ-shell.is-collapsed .os-collapse-btn span { display: none; } .occ-shell.is-collapsed .os-nav-item { justify-content: center; padding: .6rem 0; } .occ-shell.is-collapsed .os-nav-item.is-active::before { left: -.5rem; } .occ-shell.is-collapsed .os-collapse-btn { justify-content: center; } /* ---- Page + topbar ------------------------------------------------------------ */ .os-page { min-width: 0; display: flex; flex-direction: column; } .os-topbar { position: sticky; top: 0; z-index: var(--os-z-topbar); display: flex; align-items: center; gap: 1rem; min-height: 4.1rem; padding: .65rem clamp(1rem, 2.2vw, 1.75rem); border-bottom: 1px solid var(--os-line); background: rgba(9,10,12,.86); backdrop-filter: blur(10px); } .os-menu-btn { display: none; } .os-search { display: flex; align-items: center; gap: .55rem; flex: 1 1 auto; min-width: 0; max-width: 26rem; padding: .5rem .8rem; border: 1px solid var(--os-line-strong); border-radius: var(--os-radius-pill); background: #0B0D0F; color: var(--os-text-subtle); } .os-search i { flex-shrink: 0; } .os-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; color: var(--os-text); font-size: .84rem; } .os-search input::placeholder { color: var(--os-text-subtle); } .os-search kbd { padding: .1rem .4rem; border: 1px solid var(--os-line-strong); border-radius: .35rem; font-size: .62rem; color: var(--os-text-subtle); flex-shrink: 0; } .os-topbar__actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; flex: 0 0 auto; } .os-icon-btn { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex-shrink: 0; border: 1px solid transparent; border-radius: var(--os-radius-sm); background: transparent; color: var(--os-text-muted); cursor: pointer; transition: background var(--os-motion-base), color var(--os-motion-base), border-color var(--os-motion-base); } .os-icon-btn:hover { background: rgba(255,255,255,.05); color: var(--os-text); border-color: var(--os-line-strong); } .os-ai-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .95rem; border-radius: var(--os-radius-pill); border: 1px solid var(--os-orange-line); background: var(--os-orange-soft); color: var(--os-orange-bright); font-size: .8rem; font-weight: 720; cursor: pointer; white-space: nowrap; transition: background var(--os-motion-base); } .os-ai-pill:hover { background: rgba(255,100,30,.2); } /* ---- Theme toggle (icons swap via html.theme-dark/light, JS unchanged) ------ */ .os-icon-btn.theme-toggle-btn .icon-moon { display: none; } html.theme-light .os-icon-btn.theme-toggle-btn .icon-sun { display: none; } html.theme-light .os-icon-btn.theme-toggle-btn .icon-moon { display: inline-flex; } /* ---- Notification bell (real widget, ids unchanged — see notifications.js) -- */ .occ-shell .notification-dropdown { position: relative; display: inline-block; margin-right: 0; } .occ-shell .notification-toggle { position: relative; } .occ-shell .notification-badge { position: absolute; top: 2px; right: 2px; background: var(--os-red); color: #fff; border-radius: 10px; padding: 1px 5px; font-size: 10px; font-weight: 700; min-width: 16px; text-align: center; line-height: 1.4; } .occ-shell .notification-dropdown-menu { position: absolute; top: calc(100% + 8px); right: 0; width: 380px; max-width: calc(100vw - 20px); max-height: 480px; background: var(--os-surface); border: 1px solid var(--os-line-strong); border-radius: var(--os-radius-lg); box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 30px var(--os-orange-glow); z-index: var(--os-z-dropdown); overflow: hidden; } @media (max-width: 480px) { .occ-shell .notification-dropdown-menu { position: fixed; top: 60px; right: 10px; left: 10px; width: auto; max-height: 75vh; border-radius: var(--os-radius-md); } } .occ-shell .notification-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--os-line); background: linear-gradient(135deg, var(--os-orange-soft), transparent); } .occ-shell .notification-header h6 { margin: 0; font-size: .9rem; font-weight: 700; color: var(--os-text); } .occ-shell .notification-header .btn-link { background: none; border: none; color: var(--os-orange); font-size: .76rem; font-weight: 600; cursor: pointer; padding: 0; } .occ-shell .notification-list { max-height: 380px; overflow-y: auto; } .occ-shell .notification-item { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--os-line); cursor: pointer; transition: background var(--os-motion-fast); } .occ-shell .notification-item:last-child { border-bottom: none; } .occ-shell .notification-item:hover { background: var(--os-orange-softer); } .occ-shell .notification-item.unread { background: var(--os-orange-soft); border-left: 3px solid var(--os-orange); } .occ-shell .notification-icon { flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--os-orange-soft); border-radius: var(--os-radius-sm); font-size: .95rem; color: var(--os-orange); } .occ-shell .notification-content { flex: 1; min-width: 0; } .occ-shell .notification-title { font-weight: 600; font-size: .83rem; margin-bottom: 2px; color: var(--os-text); line-height: 1.3; } .occ-shell .notification-message { font-size: .78rem; color: var(--os-text-muted); margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .occ-shell .notification-time { font-size: .68rem; color: var(--os-text-subtle); } .occ-shell .notification-empty { padding: 2rem 1rem; text-align: center; color: var(--os-text-muted); } .occ-shell .notification-empty i { font-size: 1.6rem; opacity: .5; display: block; margin-bottom: .5rem; } .occ-shell .notif-urg { font-size: .6rem; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; border: 1px solid transparent; line-height: 1.6; white-space: nowrap; } /* ---- User dropdown (Bootstrap dropdown, markup unchanged) ------------------- */ .occ-shell .navbar-avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--os-surface); border: 1px solid var(--os-line-strong); display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--os-text-muted); overflow: hidden; flex-shrink: 0; } .occ-shell #userDropdown { display: inline-flex; align-items: center; gap: .55rem; padding: .3rem .5rem .3rem .3rem; border-radius: var(--os-radius-pill); color: var(--os-text); text-decoration: none; transition: background var(--os-motion-base); } .occ-shell #userDropdown:hover { background: rgba(255,255,255,.05); } .occ-shell #userDropdown::after { display: none; } .occ-shell .dropdown-menu.dropdown-menu-dark { background: var(--os-surface); border: 1px solid var(--os-line-strong); border-radius: var(--os-radius-md); box-shadow: 0 24px 60px rgba(0,0,0,.5); padding: .4rem; } .occ-shell .dropdown-menu.dropdown-menu-dark .dropdown-item { border-radius: var(--os-radius-sm); font-size: .84rem; padding: .55rem .7rem; display: flex; align-items: center; gap: .55rem; } .occ-shell .dropdown-menu.dropdown-menu-dark .dropdown-item:hover { background: var(--os-surface-hover); } .occ-shell .dropdown-menu.dropdown-menu-dark .dropdown-divider { border-color: var(--os-line); } /* ---- Main content -------------------------------------------------------------- */ .os-main { width: 100%; max-width: 100rem; margin: 0 auto; padding: clamp(1rem, 2.2vw, 2rem); } /* ---- Chat unread badge (existing JS contract, .chat-unread-badge id-less) ---- */ .occ-shell .chat-unread-badge { display: none; min-width: 18px; height: 18px; border-radius: 9px; background: var(--os-red); color: #fff; font-size: .65rem; font-weight: 700; align-items: center; justify-content: center; margin-left: 6px; padding: 0 5px; } /* ============================================================================ Responsive — rail collapses into a bottom-sheet-style slide-in drawer, topbar gets a burger button (contract: shell.is-menu-open toggles it). ========================================================================== */ @media (max-width: 1100px) { .occ-shell:not(.is-menu-open) { grid-template-columns: 4.75rem minmax(0,1fr); } .occ-shell:not(.is-menu-open) .os-brand__word, .occ-shell:not(.is-menu-open) .os-nav-item span, .occ-shell:not(.is-menu-open) .os-nav-item__badge, .occ-shell:not(.is-menu-open) .os-nav-section, .occ-shell:not(.is-menu-open) .os-collapse-btn span { display: none; } .occ-shell:not(.is-menu-open) .os-nav-item { justify-content: center; padding: .6rem 0; } .occ-shell:not(.is-menu-open) .os-brand { justify-content: center; padding: .5rem 0 .9rem; } .occ-shell:not(.is-menu-open) .os-collapse-btn { justify-content: center; } } @media (max-width: 860px) { .occ-shell { display: block; } .os-sidebar { position: fixed; inset: 0 auto 0 0; z-index: var(--os-z-mobile-nav); width: 17rem; height: 100%; padding: 1rem .9rem; transform: translateX(-105%); transition: transform var(--os-motion-slow) var(--os-ease); box-shadow: 0 32px 80px rgba(0,0,0,.6); } .occ-shell.is-menu-open .os-sidebar { transform: translateX(0); } .os-brand { justify-content: flex-start; padding: .5rem .6rem .9rem; } /* display:revert тут вернул бы / к браузерному default (inline), а не к нужной вёрстке — поэтому явные значения, не revert. */ .os-brand__word { display: grid; } .os-nav-item { display: flex; justify-content: flex-start; padding: .6rem .7rem; } .os-nav-item span, .os-collapse-btn span { display: inline; } .os-nav-item__badge { display: grid; } .os-nav-section { display: block; } .os-collapse-btn { justify-content: flex-start; } .os-menu-scrim { position: fixed; inset: 0; z-index: calc(var(--os-z-mobile-nav) - 1); background: rgba(4,5,6,.6); backdrop-filter: blur(1px); } .occ-shell.is-menu-open .os-menu-scrim { display: block; } .os-menu-btn { display: grid; } .os-search kbd { display: none; } .os-search { max-width: none; } .os-topbar { gap: .6rem; padding-inline: 1rem; } } @media (max-width: 480px) { .os-search { display: none; } } /* ============================================================================ ZEN — «Полный экран»: бургер убирает боковую и верхнюю панели целиком. ========================================================================== Зачем: на ПК кнопка-бургер была мёртвой. По CSS она должна была скрываться (`.os-menu-btn { display:none }`), но `.os-icon-btn { display:grid }` идёт ниже с той же специфичностью и её переопределял — кнопка показывалась и переключала `is-menu-open`, у которого на ПК нет ни одного правила. Теперь у неё есть работа: полноэкранный режим для рабочих экранов (планировщик, чертежи, 3D), где каждая точка ширины на счету. Важно: скрываем через display:none и обнуляем grid-колонку рейла — иначе в раскладке остался бы пустой трек 15rem. */ /* Колонка ОДНА, а не «0 + контент»: сайдбар скрыт через display:none и в раскладке не участвует, поэтому страница становилась первым grid-элементом и попадала в нулевую колонку — контент сжимался в узкую полосу слева вместо того, чтобы занять весь экран. */ .occ-shell.is-zen { grid-template-columns: minmax(0, 1fr); } .occ-shell.is-zen > .os-sidebar { display: none; } .occ-shell.is-zen .os-topbar { display: none; } /* Пилюля возврата висит слева сверху — освобождаем под неё место, иначе она ложится на первый блок страницы. */ .occ-shell.is-zen .os-main { padding-top: 3.4rem; } /* Возврат из zen на обычных страницах: плавающая пилюля слева сверху. На экранах-приложениях (планировщик) её прячет свой слой раскладки и даёт собственную кнопку в тулбаре — чтобы пилюля не легла на инструменты. */ .os-zen-exit { display: none; position: fixed; top: .7rem; left: .7rem; z-index: 1500; align-items: center; gap: .45rem; padding: .5rem .8rem .5rem .6rem; border-radius: 999px; border: 1px solid var(--os-line-strong); background: rgba(9, 10, 12, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--os-text); font-size: .78rem; font-weight: 700; cursor: pointer; box-shadow: 0 10px 26px rgba(0, 0, 0, .45); } .occ-shell.is-zen ~ .os-zen-exit, body.is-zen .os-zen-exit { display: inline-flex; } .os-zen-exit:hover { border-color: var(--os-orange); color: var(--os-orange-bright); } .os-zen-exit i { font-size: 1.05rem; } .os-zen-exit.is-suppressed { display: none !important; } /* Бургер на ПК — рабочая кнопка, а не артефакт. Держим её видимой явно и с более высокой специфичностью, чтобы порядок правил больше ничего не решал. */ .os-topbar .os-menu-btn { display: grid; } /* ---- Логотип ------------------------------------------------------------- */ /* Раньше знак вырезался из logo.png отрицательными полями внутри overflow:hidden: у файла широкие прозрачные поля, и «вписать» его было нельзя. Любое изменение размера рейки ломало этот кадр — знак заезжал за границы контейнера и в мобильной шторке был обрезан. Теперь используется logo-mark.png — тот же логотип, обрезанный по границам знака (775×218). Никаких сдвигов: картинка вписывается по высоте, ширина считается по пропорции. */ /* Пропорция знака 775/218 = 3.55, поэтому ширина контейнера задаётся явно: при height:auto у изображения ширина считалась от сжатого контейнера, и знак вылезал за его границы. */ .os-brand__mark { width: 92px; height: 26px; border-radius: 0; background: none; display: block; flex-shrink: 0; line-height: 0; } .os-brand__mark img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: contain; } html.theme-light .os-brand__mark img { /* Логотип белый — на светлой теме инвертируем в тёмный. */ filter: invert(1) brightness(.35); } /* В свёрнутой рейке места меньше — тот же знак мельче, пропорция та же. */ .occ-shell.is-collapsed .os-brand__mark { width: 50px; height: 14px; } /* 861–1100px: рейл автоматически икон-онли (правила выше в @media 1100). */ @media (max-width: 1100px) and (min-width: 861px) { .occ-shell:not(.is-menu-open) .os-brand__mark { width: 50px; height: 14px; } } /* На телефоне шторка широкая — знак в полный рост. */ @media (max-width: 860px) { .os-brand__mark { width: 92px; height: 26px; } /* Zen — история про ПК. На телефоне бургер остаётся шторкой. */ .occ-shell.is-zen { display: block; } .occ-shell.is-zen .os-topbar { display: flex; } .os-zen-exit { display: none !important; } } /* Логотип — картинка шириной 5.7rem, поэтому в строку с подписью он в 15rem рейл не влезает. Ставим колонкой: знак сверху, подпись под ним. */ .os-brand { flex-direction: column; align-items: flex-start; gap: .3rem; } .os-brand__word { text-align: left; } .occ-shell.is-collapsed .os-brand { align-items: center; } @media (max-width: 1100px) and (min-width: 861px) { .occ-shell:not(.is-menu-open) .os-brand { align-items: center; } }