/* WideBear · shell redesign (sidebar + page background) Applies only when is present. All rules override existing Hyper-based .app-sidebar-menu / #side-menu styles. Old CSS stays intact — remove the class to roll back. */ /* ---------- Background ---------- */ /* html красим тем же токеном, иначе при коротком контенте под body (он сжимается по содержимому) проступает незалитый html — в тёмной теме это видно как светлая полоса снизу. */ html:has(body.wb-shell-redesign) { background: var(--bg); } body.wb-shell-redesign { background: var(--bg) !important; color: var(--text); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; /* body всегда минимум на экран — фон покрывает viewport даже когда контента мало (.content-page = min-height:80vh) */ min-height: 100vh; } body.wb-shell-redesign .content-page, body.wb-shell-redesign .content-page > .content { background: transparent !important; } /* ---------- Sidebar container ---------- */ body.wb-shell-redesign .app-sidebar-menu, body.wb-shell-redesign[data-menu-color=dark] .app-sidebar-menu { background: var(--rail-bg) !important; color: var(--rail-text); border-right: 1px solid var(--rail-line); box-shadow: none !important; } body.wb-shell-redesign .app-sidebar-menu::-webkit-scrollbar { width: 6px; } body.wb-shell-redesign .app-sidebar-menu::-webkit-scrollbar-thumb { background: var(--rail-line); border-radius: 99px; } /* Simplebar track */ body.wb-shell-redesign .app-sidebar-menu .simplebar-track.simplebar-vertical { width: 6px; } body.wb-shell-redesign .app-sidebar-menu .simplebar-scrollbar::before { background: var(--rail-line); } /* ---------- Logo box ---------- */ /* Background must match the sidebar (.app-sidebar-menu) — they sit flush together. No border-bottom so there's no visible seam between logo and the rest of the rail. */ body.wb-shell-redesign .logo-box { background: var(--rail-bg) !important; border-bottom: none !important; height: 68px; padding: 0 20px; display: flex; align-items: center; justify-content: flex-start !important; text-align: left !important; } /* Hide old Hyper logo anchors, show our brand */ .wb-shell-brand { display: none; } body.wb-shell-redesign .logo-box .logo { display: none !important; } body.wb-shell-redesign .logo-box .wb-shell-brand { display: inline-flex !important; align-items: center; gap: 11px; color: var(--rail-text); text-decoration: none; line-height: 1; margin: 0 !important; padding: 0 !important; } /* ---------- Brand typography + logo animations (auth.css owns these for auth pages; duplicated here so base.html pages get them too) ---------- */ body.wb-shell-redesign .wb-logo { display: inline-flex; align-items: center; gap: 10px; } body.wb-shell-redesign .wb-logo__mark, body.wb-shell-redesign .wb-shell-brand .wb-logo__mark { overflow: visible; flex: none; } body.wb-shell-redesign .wb-logo__word, body.wb-shell-redesign .wb-shell-brand .wb-logo__word { font-family: var(--font-ui); font-weight: 800; letter-spacing: -0.02em; line-height: 1; font-size: 25px; color: var(--rail-text); } body.wb-shell-redesign .wb-logo__word-accent { color: var(--amber); } @keyframes wb-ring { 0%, 100% { opacity: 0.25; transform: scale(1); } 50% { opacity: 0.55; transform: scale(1.08); } } @keyframes wb-blink { 0%, 92%, 100% { transform: scaleY(1); } 94%, 98% { transform: scaleY(0.08); } } @keyframes wb-rec { 0%, 100% { opacity: 1; } 50% { opacity: 0.15; } } @keyframes wb-ear-wiggle { 0%, 70%, 100% { transform: translate(0, 0) rotate(0); } 78% { transform: translate(0, -1px) rotate(-3deg); } 86% { transform: translate(0, 0) rotate(2deg); } } body.wb-shell-redesign .wb-logo__mark .wb-logo__ring { transform-origin: 32px 32px; animation: wb-ring 4.5s ease-in-out infinite; } body.wb-shell-redesign .wb-logo__mark .wb-logo__eye-l { transform-origin: 24.5px 30px; animation: wb-blink 6s ease-in-out infinite; } body.wb-shell-redesign .wb-logo__mark .wb-logo__eye-r { transform-origin: 39.5px 30px; animation: wb-blink 6s ease-in-out infinite; } body.wb-shell-redesign .wb-logo__mark .wb-logo__rec { animation: wb-rec 1.6s ease-in-out infinite; } body.wb-shell-redesign .wb-logo__mark .wb-logo__ear-l { transform-origin: 16px 18px; animation: wb-ear-wiggle 7s ease-in-out infinite; } body.wb-shell-redesign .wb-logo__mark .wb-logo__ear-r { transform-origin: 48px 18px; animation: wb-ear-wiggle 7s ease-in-out 0.4s infinite; } @media (prefers-reduced-motion: reduce) { body.wb-shell-redesign .wb-logo__mark .wb-logo__ring, body.wb-shell-redesign .wb-logo__mark .wb-logo__eye-l, body.wb-shell-redesign .wb-logo__mark .wb-logo__eye-r, body.wb-shell-redesign .wb-logo__mark .wb-logo__rec, body.wb-shell-redesign .wb-logo__mark .wb-logo__ear-l, body.wb-shell-redesign .wb-logo__mark .wb-logo__ear-r { animation: none !important; } } body.wb-shell-redesign .logo-box .wb-shell-brand:hover { color: var(--rail-text); } body.wb-shell-redesign .logo-box .wb-logo__mark { color: var(--rail-text); } body.wb-shell-redesign[data-sidebar=condensed] .logo-box { padding: 0 !important; justify-content: center !important; } body.wb-shell-redesign[data-sidebar=condensed] .logo-box .wb-shell-brand { margin: 0 auto !important; gap: 0 !important; } body.wb-shell-redesign[data-sidebar=condensed] .logo-box .wb-logo__word { display: none !important; } /* Keep logo visible inside slide-out sidebar on mobile (Hyper theme hides it by default) */ @media (max-width: 991.98px) { body.wb-shell-redesign .logo-box { display: flex !important; width: 260px !important; padding: 0 20px !important; } body.wb-shell-redesign .logo-box .wb-shell-brand { display: inline-flex !important; } body.wb-shell-redesign .logo-box .wb-logo__word { display: inline !important; } } /* ---------- Section label ---------- */ body.wb-shell-redesign #sidebar-menu .menu-title { padding: 12px 22px 8px !important; font-size: 10.5px !important; color: var(--rail-muted) !important; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; background: transparent !important; } body.wb-shell-redesign[data-sidebar=condensed] #sidebar-menu .menu-title { display: none; } /* ---------- Menu items ---------- */ body.wb-shell-redesign #side-menu { padding: 8px; margin: 0; } body.wb-shell-redesign #side-menu li { position: relative; } body.wb-shell-redesign[data-menu-color=dark] #sidebar-menu #side-menu > li > a, body.wb-shell-redesign #side-menu > li > a { display: flex !important; align-items: center; gap: 12px; min-height: 40px; padding: 8px 12px !important; margin: 1px 0; border-radius: 10px; background: transparent !important; color: var(--rail-muted) !important; font-size: 13.5px !important; font-weight: 500 !important; letter-spacing: -0.005em; transition: background 0.15s ease, color 0.15s ease; text-transform: none !important; line-height: 1.3; position: relative; } body.wb-shell-redesign #side-menu > li > a:hover { background: rgba(255, 255, 255, 0.035) !important; color: var(--rail-text) !important; } body.wb-shell-redesign #side-menu > li > a > span:not(.badge):not(.menu-arrow) { flex: 1; text-align: left; } /* Icon */ body.wb-shell-redesign #side-menu > li > a > i, body.wb-shell-redesign #side-menu > li > a > svg { width: 18px !important; height: 18px !important; flex: none !important; stroke-width: 1.75 !important; color: inherit !important; fill: none !important; margin: 0 !important; } body.wb-shell-redesign #side-menu > li > a > i.mdi { font-size: 18px !important; line-height: 1; } /* Active item */ body.wb-shell-redesign #side-menu > li.menuitem-active > a, body.wb-shell-redesign #side-menu > li > a.active, body.wb-shell-redesign[data-menu-color=dark] .app-sidebar-menu #sidebar-menu .menuitem-active > a, body.wb-shell-redesign[data-menu-color=dark] .app-sidebar-menu #sidebar-menu .menuitem-active .active { background: var(--rail-active) !important; color: var(--rail-text) !important; font-weight: 600 !important; } body.wb-shell-redesign #side-menu > li.menuitem-active > a::before, body.wb-shell-redesign #side-menu > li > a.active::before { content: ""; position: absolute; left: 2px; top: 10px; bottom: 10px; width: 3px; border-radius: 99px; background: var(--amber); } /* Badges — always at the right edge */ body.wb-shell-redesign #side-menu > li > a > .badge { background: var(--amber) !important; color: #0E0F12 !important; font-size: 11px !important; font-weight: 700 !important; padding: 2px 7px !important; min-width: 20px; border-radius: 999px !important; float: none !important; order: 90; margin-left: 8px; line-height: 1.4; } /* Menu arrow sits after the badge */ body.wb-shell-redesign #side-menu > li > a > .menu-arrow { order: 99; } body.wb-shell-redesign #side-menu > li > a > .badge.bg-warning, body.wb-shell-redesign #side-menu > li > a > .badge.bg-info, body.wb-shell-redesign #side-menu > li > a > .badge.bg-primary { background: var(--amber) !important; color: #0E0F12 !important; } /* Menu arrow (expand caret for company menu) */ body.wb-shell-redesign #side-menu > li > a > .menu-arrow { color: var(--rail-muted); transition: transform 0.2s ease; } body.wb-shell-redesign #side-menu > li > a[aria-expanded=true] > .menu-arrow { transform: rotate(90deg); } /* Submenu */ body.wb-shell-redesign .nav-second-level { padding: 2px 0 2px 28px !important; background: transparent !important; margin: 0 0 4px 0 !important; list-style: none; } body.wb-shell-redesign .nav-second-level li { margin: 0 !important; } body.wb-shell-redesign[data-menu-color=dark] .app-sidebar-menu .nav-second-level li a, body.wb-shell-redesign .nav-second-level li a { display: flex !important; align-items: center; gap: 10px; min-height: 32px; padding: 6px 10px !important; border-radius: 8px; color: var(--rail-muted) !important; font-size: 12.5px !important; background: transparent !important; text-transform: none !important; position: relative; } body.wb-shell-redesign .nav-second-level li a:hover { background: rgba(255, 255, 255, 0.04) !important; color: var(--rail-text) !important; } body.wb-shell-redesign .nav-second-level li a > i, body.wb-shell-redesign .nav-second-level li a > svg { width: 14px !important; height: 14px !important; color: inherit !important; } body.wb-shell-redesign .nav-second-level li a > i.mdi { font-size: 14px !important; } body.wb-shell-redesign .nav-second-level li.active > a, body.wb-shell-redesign .nav-second-level li > a.active { background: rgba(255, 255, 255, 0.05) !important; color: var(--rail-text) !important; font-weight: 600 !important; } /* ---------- Bottom blocks (help + wishes) ---------- */ body.wb-shell-redesign #sidebar-help, body.wb-shell-redesign #sidebar-wishes { background: var(--rail-bg) !important; padding: 6px 12px !important; border: none !important; } body.wb-shell-redesign #sidebar-help { border-top: 1px solid var(--rail-line) !important; padding-top: 10px !important; } body.wb-shell-redesign #sidebar-wishes { padding-bottom: 12px !important; } body.wb-shell-redesign #sidebar-help a, body.wb-shell-redesign #sidebar-wishes a { display: flex !important; align-items: center; gap: 10px; padding: 7px 10px !important; border-radius: 8px; font-size: 12.5px !important; color: var(--rail-muted) !important; background: transparent !important; text-decoration: none !important; border: 1px solid var(--rail-line) !important; } body.wb-shell-redesign #sidebar-wishes a { border: 1px dashed var(--rail-line) !important; color: var(--amber) !important; } body.wb-shell-redesign #sidebar-help a:hover { background: rgba(255, 255, 255, 0.035) !important; color: var(--rail-text) !important; } body.wb-shell-redesign #sidebar-wishes a:hover { background: oklch(0.78 0.14 70 / 0.08) !important; } body.wb-shell-redesign #sidebar-help a > i, body.wb-shell-redesign #sidebar-wishes a > i { font-size: 15px; line-height: 1; } /* ---------- Condensed (collapsed) state ---------- */ body.wb-shell-redesign[data-sidebar=condensed] .app-sidebar-menu { width: 72px !important; } body.wb-shell-redesign[data-sidebar=condensed] .topbar-custom { left: 72px !important; } body.wb-shell-redesign[data-sidebar=condensed] .content-page { margin-left: 72px !important; } body.wb-shell-redesign[data-sidebar=condensed] #side-menu > li > a { justify-content: center; padding: 10px !important; } body.wb-shell-redesign[data-sidebar=condensed] #side-menu > li > a > span:not(.badge):not(.menu-arrow), body.wb-shell-redesign[data-sidebar=condensed] #side-menu > li > a > .menu-arrow, body.wb-shell-redesign[data-sidebar=condensed] #sidebar-help a span, body.wb-shell-redesign[data-sidebar=condensed] #sidebar-wishes a span { display: none !important; } body.wb-shell-redesign[data-sidebar=condensed] #sidebar-help a, body.wb-shell-redesign[data-sidebar=condensed] #sidebar-wishes a { justify-content: center; padding: 8px !important; } /* Condensed active indicator as right-side dot */ body.wb-shell-redesign[data-sidebar=condensed] #side-menu > li.menuitem-active > a::before, body.wb-shell-redesign[data-sidebar=condensed] #side-menu > li > a.active::before { left: auto; right: 4px; top: 4px; bottom: auto; width: 7px; height: 7px; border-radius: 99px; } /* Condensed hide small badge as numeric pill; show a dot instead */ body.wb-shell-redesign[data-sidebar=condensed] #side-menu > li > a > .badge { position: absolute; top: 4px; right: 4px; min-width: 0 !important; width: 8px; height: 8px; padding: 0 !important; font-size: 0 !important; line-height: 0; color: transparent !important; } /* Submenu dropdown on hover in condensed mode (Hyper native behavior) */ body.wb-shell-redesign[data-sidebar=condensed] .nav-second-level { padding: 6px !important; background: var(--rail-bg-2) !important; border: 1px solid var(--rail-line); border-radius: 10px; box-shadow: var(--shadow-md); } /* ---------- Sidebar tooltip (exists from Hyper) ---------- */ body.wb-shell-redesign .sidebar-tooltip { background: var(--rail-bg-2) !important; color: var(--rail-text) !important; border: 1px solid var(--rail-line) !important; font-family: var(--font-ui); font-size: 12px !important; border-radius: 8px !important; padding: 6px 10px !important; box-shadow: var(--shadow-md); } /* ---------- Topbar redesign ---------- */ body.wb-shell-redesign .topbar-custom { background: var(--surface) !important; border-bottom: 1px solid var(--border); box-shadow: none !important; height: 68px; padding: 0 18px; } body.wb-shell-redesign .topbar-custom > .container-fluid { padding: 0 !important; height: 100%; max-width: none; } body.wb-shell-redesign .topbar-custom > .container-fluid > .d-flex { height: 100%; gap: 14px; } body.wb-shell-redesign .topbar-custom .topnav-menu { gap: 10px; padding: 0; margin: 0 !important; align-items: center; } body.wb-shell-redesign .topbar-custom .topnav-menu > li { list-style: none; display: inline-flex; align-items: center; } /* Kill the base line-height: 70px / max-height: 70px / text-align on .nav-link */ body.wb-shell-redesign .topbar-custom .topnav-menu .nav-link { line-height: 1 !important; max-height: none !important; text-align: left !important; color: var(--text) !important; } /* Square buttons clear the base 0 15px padding; the profile pill sets its own */ body.wb-shell-redesign .topbar-custom .topnav-menu .nav-link:not(.nav-user) { padding: 0 !important; } /* Menu toggle button (hamburger) */ body.wb-shell-redesign .topbar-custom .button-toggle-menu { width: 40px; height: 40px; border-radius: 10px !important; border: 1px solid var(--border) !important; background: var(--surface) !important; color: var(--text) !important; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s ease; } body.wb-shell-redesign .topbar-custom .button-toggle-menu:hover { background: var(--surface-2) !important; } body.wb-shell-redesign .topbar-custom .button-toggle-menu .noti-icon { width: 18px; height: 18px; color: var(--text) !important; stroke-width: 1.75; } /* Company switcher */ body.wb-shell-redesign .topbar-custom .company-form { margin: 0; } body.wb-shell-redesign .topbar-custom #company-select { height: 40px; min-width: 160px; padding: 0 36px 0 14px !important; border-radius: 10px !important; border: 1px solid var(--border) !important; background-color: var(--surface) !important; color: var(--text) !important; font-size: 13.5px !important; font-weight: 600 !important; font-family: var(--font-ui) !important; cursor: pointer; appearance: none !important; -webkit-appearance: none !important; box-shadow: none !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 14px !important; } body.wb-shell-redesign .topbar-custom #company-select:hover, body.wb-shell-redesign .topbar-custom #company-select:focus { background-color: var(--surface-2) !important; border-color: var(--border-strong) !important; outline: none !important; } body.wb-shell-redesign .topbar-custom #company-select option { font-family: var(--font-ui); color: var(--text); background: var(--surface); } /* Global search */ body.wb-shell-redesign .global-search-wrapper { flex: 1 1 auto; max-width: 560px; margin: 0 auto !important; padding: 0; } body.wb-shell-redesign .global-search-input-wrapper { height: 40px; border-radius: 10px !important; border: 1px solid var(--border); background: var(--surface-2); display: flex !important; align-items: center; gap: 10px; padding: 0 14px; color: var(--text-muted); transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; position: static !important; } body.wb-shell-redesign .global-search-input-wrapper:focus-within { border-color: var(--amber); background: var(--surface); box-shadow: var(--ring); } /* Override base absolute positioning → bring the icon back into the flex flow */ body.wb-shell-redesign .global-search-input-wrapper .global-search-icon { position: static !important; left: auto !important; top: auto !important; transform: none !important; width: 16px !important; height: 16px !important; color: var(--text-muted) !important; flex: none !important; stroke-width: 1.75; margin: 0 !important; } body.wb-shell-redesign .global-search-input-wrapper .global-search-spinner { position: static !important; left: auto !important; top: auto !important; right: auto !important; transform: none !important; } body.wb-shell-redesign .global-search-input { flex: 1 1 auto; min-width: 0; border: none !important; outline: none !important; background: transparent !important; color: var(--text) !important; font-size: 13.5px !important; font-family: var(--font-ui) !important; height: 100% !important; padding: 0 !important; box-shadow: none !important; line-height: 1 !important; } body.wb-shell-redesign .global-search-input::placeholder { color: var(--text-muted); opacity: 1; } /* Theme toggle + square icon buttons (excludes the profile pill .nav-user) */ body.wb-shell-redesign .topbar-custom .notification-list > .nav-link:not(.nav-user) { width: 40px; height: 40px; border-radius: 10px !important; border: 1px solid var(--border) !important; background: var(--surface) !important; color: var(--text) !important; display: inline-flex !important; align-items: center; justify-content: center; padding: 0 !important; margin: 0 !important; transition: background 0.15s ease; cursor: pointer; } body.wb-shell-redesign .topbar-custom .notification-list > .nav-link:not(.nav-user):hover { background: var(--surface-2) !important; } body.wb-shell-redesign .topbar-custom .notification-list .noti-icon { width: 18px !important; height: 18px !important; color: var(--text) !important; stroke-width: 1.75; } /* User profile pill */ body.wb-shell-redesign .topbar-custom .topbar-dropdown { position: relative; } body.wb-shell-redesign .topbar-custom .nav-user { height: 40px !important; padding: 3px 12px 3px 3px !important; border-radius: 999px !important; border: 1px solid var(--border) !important; background: var(--surface) !important; display: inline-flex !important; align-items: center; gap: 8px !important; color: var(--text) !important; text-decoration: none !important; transition: background 0.15s ease; } body.wb-shell-redesign .topbar-custom .nav-user:hover, body.wb-shell-redesign .topbar-custom .nav-user:focus, body.wb-shell-redesign .topbar-custom .nav-user[aria-expanded="true"] { background: var(--surface-2) !important; } body.wb-shell-redesign .topbar-custom .nav-user::after { display: none !important; } body.wb-shell-redesign .topbar-custom .nav-user > img.rounded-circle, body.wb-shell-redesign .topbar-custom .nav-user > .rounded-circle { width: 32px !important; height: 32px !important; font-size: 12px !important; font-weight: 800 !important; background: var(--amber) !important; color: #0E0F12 !important; border: none !important; flex: none; display: inline-flex !important; align-items: center; justify-content: center; object-fit: cover; } body.wb-shell-redesign .topbar-custom .nav-user .pro-user-name { color: var(--text) !important; font-size: 13px !important; font-weight: 600 !important; font-family: var(--font-ui) !important; display: inline-flex !important; align-items: center; gap: 4px !important; margin: 0 !important; } body.wb-shell-redesign .topbar-custom .nav-user .pro-user-name > i.mdi-chevron-down { font-size: 14px !important; color: var(--text-muted) !important; line-height: 1; } /* Profile dropdown menu */ body.wb-shell-redesign .profile-dropdown { border-radius: 12px !important; border: 1px solid var(--border) !important; background: var(--surface) !important; box-shadow: var(--shadow-md) !important; padding: 6px !important; min-width: 220px; } body.wb-shell-redesign .profile-dropdown .dropdown-header { color: var(--text-muted) !important; font-size: 11.5px !important; letter-spacing: 0.02em; padding: 6px 10px !important; background: transparent !important; } body.wb-shell-redesign .profile-dropdown .dropdown-header h6 { color: var(--text) !important; font-weight: 700; font-size: 13px; margin: 0; } body.wb-shell-redesign .profile-dropdown .dropdown-item { border-radius: 8px !important; padding: 8px 10px !important; font-size: 13px !important; font-family: var(--font-ui); color: var(--text) !important; display: flex !important; align-items: center; gap: 8px !important; } body.wb-shell-redesign .profile-dropdown .dropdown-item:hover, body.wb-shell-redesign .profile-dropdown .dropdown-item:focus { background: var(--surface-2) !important; color: var(--text) !important; } body.wb-shell-redesign .profile-dropdown .dropdown-item.text-warning { color: var(--amber-ink) !important; } body.wb-shell-redesign .profile-dropdown .dropdown-item > i { font-size: 16px; line-height: 1; width: 18px; text-align: center; } body.wb-shell-redesign .profile-dropdown .dropdown-divider { border-color: var(--border) !important; margin: 6px 0 !important; } /* ---------- Shared button utility (used across all pages) ---------- */ body.wb-shell-redesign .wb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; font-size: 14px; font-weight: 600; letter-spacing: -0.005em; border-radius: 10px; border: 1px solid transparent; cursor: pointer; font-family: var(--font-ui); text-decoration: none; transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; white-space: nowrap; } body.wb-shell-redesign .wb-btn:hover { text-decoration: none; } body.wb-shell-redesign .wb-btn:active { transform: translateY(1px); } body.wb-shell-redesign .wb-btn > svg { width: 16px; height: 16px; stroke-width: 1.75; flex: none; } body.wb-shell-redesign .wb-btn--amber { background: var(--amber); color: #0E0F12; border-color: transparent; } body.wb-shell-redesign .wb-btn--amber:hover { background: oklch(0.74 0.14 70); color: #0E0F12; } body.wb-shell-redesign .wb-btn--ghost { background: transparent; color: var(--text); border-color: var(--border); } body.wb-shell-redesign .wb-btn--ghost:hover { background: var(--surface-2); color: var(--text); } /* Scrollbar polish */ body.wb-shell-redesign::-webkit-scrollbar { width: 10px; } body.wb-shell-redesign::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; } body.wb-shell-redesign::-webkit-scrollbar-track { background: var(--bg); }