/* ============================================================================= zoom.css — Browser-zoom compensation Keyed off classes stamped on by zoom-detector.js. Strategy: - At 100% zoom nothing changes — all values here are OVERRIDES for non-100% situations only. - We compensate the CSS custom properties (--sidebar-width-collapsed, --sidebar-width-expanded, --header-height) rather than individual component rules, so every component that references those variables inherits the correction automatically. - At very low zoom (≤75%) we collapse the sidebar to icons-only and make the header more compact so the full page is usable. - At high zoom (≥150%) we remove the sidebar entirely and switch to a mobile-style layout so the main content isn't squeezed. ============================================================================= */ /* ── 50 % zoom ──────────────────────────────────────────────────────────── */ html.zoom-50 { --sidebar-width-collapsed: 48px; --sidebar-width-expanded: 200px; --header-height: 56px; } /* ── 67 % zoom ──────────────────────────────────────────────────────────── */ html.zoom-67 { --sidebar-width-collapsed: 52px; --sidebar-width-expanded: 210px; --header-height: 60px; } /* ── 75 % zoom ──────────────────────────────────────────────────────────── */ html.zoom-75 { --sidebar-width-collapsed: 56px; --sidebar-width-expanded: 220px; --header-height: 64px; } /* ── 90 % zoom ──────────────────────────────────────────────────────────── */ html.zoom-90 { --sidebar-width-collapsed: 60px; --sidebar-width-expanded: 230px; --header-height: 68px; } /* ── 100 % zoom (default — no override needed) ───────────────────────────── */ /* At exactly 100% zoom the vidz tab-bar (~44px tall, position:fixed top:0 inside the feed page) can clip the action rail avatar. Ensure the rail has enough top padding to clear it. This is the reported bug at browser zoom = 100%. */ html.zoom-100 .vidz-item__actions { padding-top: 52px; padding-bottom: 52px; } /* ── 110 % zoom ─────────────────────────────────────────────────────────── */ html.zoom-110 { --sidebar-width-collapsed: 68px; --sidebar-width-expanded: 248px; } /* ── 125 % zoom ─────────────────────────────────────────────────────────── */ html.zoom-125 { --sidebar-width-collapsed: 72px; --sidebar-width-expanded: 256px; } /* ── 150 % zoom — sidebar collapses, header shrinks ─────────────────────── */ html.zoom-150 { --sidebar-width-collapsed: 0px; --sidebar-width-expanded: 240px; --header-height: 56px; } /* At 150 %+ hide the persistent sidebar rail (icon-only) — too cramped */ html.zoom-150 #site-sidebar, html.zoom-175 #site-sidebar { width: 0 !important; overflow: hidden; } html.zoom-150 .page-content-wrap, html.zoom-175 .page-content-wrap { margin-left: 0 !important; max-width: 100% !important; } /* Expand sidebar as overlay when hamburger is clicked at high zoom */ html.zoom-150 #site-sidebar.is-expanded, html.zoom-175 #site-sidebar.is-expanded { width: var(--sidebar-width-expanded) !important; z-index: 400; box-shadow: 4px 0 24px rgba(0, 0, 0, .18); } /* ── 175 %+ zoom ────────────────────────────────────────────────────────── */ html.zoom-175 { --sidebar-width-collapsed: 0px; --sidebar-width-expanded: 240px; --header-height: 52px; } /* ── Safe search-bar shrink at low zoom ─────────────────────────────────── */ /* At ≤75% the search bar has lots of room — max-width can grow */ html.zoom-50 .header__center, html.zoom-67 .header__center, html.zoom-75 .header__center { max-width: 800px; } /* At ≥125% the search bar is constrained — shrink its max-width */ html.zoom-125 .header__center, html.zoom-150 .header__center, html.zoom-175 .header__center { max-width: 420px; } /* ── Hero margin compensation ───────────────────────────────────────────── */ /* Hero uses calc(-1 * --sidebar-width-collapsed) margin — covered automatically because hero.css references the same CSS variable. No extra rules needed. */ /* ── Vidz feed left offset ──────────────────────────────────────────────── */ /* vidz.css uses a hardcoded `left: 72px` — patch it at extreme zoom levels */ html.zoom-150 .vidz-feed-page, html.zoom-175 .vidz-feed-page { left: 0 !important; } html.zoom-50 .vidz-feed-page, html.zoom-67 .vidz-feed-page { left: 52px; } /* ── Notification / Profile dropdown position fix at high zoom ──────────── */ /* At 150%+ the right edge of the viewport can clip these dropdowns */ html.zoom-150 .header__notif-dropdown, html.zoom-150 .header__profile-dropdown, html.zoom-175 .header__notif-dropdown, html.zoom-175 .header__profile-dropdown { right: auto; left: 50%; transform: translateX(-50%); max-width: 90vw; } /* ── Tooltip never clips viewport at high zoom ───────────────────────────── */ html.zoom-150 .sidebar:not(.is-expanded) .sidebar__nav a[title]:hover::after, html.zoom-175 .sidebar:not(.is-expanded) .sidebar__nav a[title]:hover::after { display: none; /* sidebar is hidden at these zoom levels anyway */ }