/* TwitterScore — sidebar/layout integration. Bridges the standalone sidebar.css (which uses position:fixed) with the existing .site-wrapper grid layout so main content doesn't sit underneath the sidebar on desktop. */ :root { --ts-header-h: 72px; /* matches .header-wrapper { height: 72px } */ --ts-banner-h: 0px; /* JS-measured height of the top ad-zone */ --ts-sb-content-offset: calc(264px + 24px); --ts-sb-content-offset-collapsed: calc(76px + 24px); } /* ───────────────────────────────────────────────────────────── Top strip banner (.new-project-info) — referral / email-info / promo notifications. Pinned to the very top of the viewport so it sits ABOVE the fixed .topbar regardless of which ad zone (header / banner / dynamically injected) actually rendered it. The actual height is measured at runtime by sidebar.js and exposed as --ts-banner-h; the layout below (.topbar offset, sidebar offset, body padding-top) consumes that var so things shift cleanly when the strip is dismissed or absent. */ /* In-table Ad strip (AdHeaderRow) — keep the table row/cell transparent while letting css/ads/banner.css own the actual ad pill styling. */ body.dark #AdHeaderRow, body.dark .AdHeaderRow, body.dark #AdHeaderRow th, body.dark #AdHeaderRow td { background: transparent !important; } /* Pin ONLY the referral banner (id="newProjectInfo" — the django ads "header" zone's strip). The plain .new-project-info class is reused by other in-content promo strips (e.g. "Upgrade to Pro" rows inside tables), and pinning those broke their layout. */ #newProjectInfo.new-project-info { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 50 !important; width: 100% !important; /* Tighter vertical padding than base.css's 14px so the strip doesn't eat too much viewport real estate at the top. Text remains centered because padding is symmetric. */ padding-top: 10px !important; padding-bottom: 10px !important; } body.mobile #newProjectInfo.new-project-info { z-index: 1100 !important; } /* Desktop only — push the whole site shell to the right of the sidebar. On the sidebar becomes a drawer (handled separately) so the offset is suppressed. */ body:not(.mobile) .site-wrapper { padding-left: var(--ts-sb-content-offset); transition: padding-left 220ms cubic-bezier(0.22, 0.61, 0.36, 1); } body:not(.mobile).sidebar-collapsed .site-wrapper { padding-left: var(--ts-sb-content-offset-collapsed); } /* Don't double-pad horizontal sections that are full-bleed (banner ads, blue hero on the home page) — the offset is on the wrapper itself. */ /* Mobile: hide the desktop sidebar entirely. A separate drawer is planned. */ body.mobile #tsSidebar, body.mobile #tsSidebarToggle { display: none; } /* Dark theme bridge — site uses body.dark; sidebar.css keys off .theme-dark on the sidebar element. Re-derive dark styles via descendant selector so we don't have to mutate the sidebar's classList from JS just for theming. */ body.dark #tsSidebar { background: #27272A; border-color: rgba(255,255,255,.06); color: #fff; } body.dark #tsSidebar .nav-item { color: rgba(255,255,255,.74); } body.dark #tsSidebar .nav-item:hover { background: rgba(255,255,255,.06); color: #fff; } body.dark #tsSidebar .nav-item.is-active { background: rgba(5,68,253,.22); color: #fff; } body.dark #tsSidebar .nav-item.is-active .nav-icon { color: var(--ts-brand-soft); } body.dark #tsSidebar .sb-brand-mark { content: url("/static/images/sidebar/logo-mark-white.png"); } body.dark #tsSidebar .sb-brand-wordmark, body.dark #tsSidebar .sb-brand-wordmark b, body.dark #tsSidebar .sb-brand-tld { color: #fff; } body.dark #tsSidebar .sb-community-feature { background: linear-gradient(135deg, rgba(5,68,253,.18), rgba(97,80,241,.20)); border-color: rgba(81,136,255,.30); } body.dark #tsSidebar .sb-cf-title { color: #fff; } body.dark #tsSidebar .sb-cf-sub { color: var(--ts-brand-soft); } body.dark #tsSidebar .sb-auth-login { background: rgba(255,255,255,.06); color: #fff; } body.dark #tsSidebar .sb-auth-login:hover { background: rgba(255,255,255,.10); } body.dark #tsSidebar .sb-community-label { color: rgba(255,255,255,.55); } body.dark #tsSidebar .sb-community-icons a { color: rgba(255,255,255,.7); } body.dark #tsSidebar .sb-community-icons a:hover { color: #fff; } body.dark #tsSidebar .sb-footer { border-color: rgba(255,255,255,.08); } body.dark.sidebar-collapsed #tsSidebar .sb-community-icons a { background: rgba(255,255,255,.06); } body.dark #tsSidebarToggle { background: #27272A; border-color: rgba(255,255,255,.10); color: rgba(255,255,255,.7); } body.dark #tsSidebarToggle:hover { background: #18181B; color: var(--ts-brand-soft); } body.dark.sidebar-collapsed #tsSidebarToggle { background: var(--ts-brand); color: #fff; border-color: var(--ts-brand); } /* ───────────────────────────────────────────────────────────── Toggle button — show only the icon matching the current state. The button template ships both and ; the React design renders only one. */ .sb-collapse-floating .icon-expand { display: none; } .sb-collapse-floating.is-collapsed .icon-collapse { display: none; } .sb-collapse-floating.is-collapsed .icon-expand { display: block; } /* ───────────────────────────────────────────────────────────── "Upgrade" pill text inside the Go PRO card. Global rules `span { color: #666 }` (base.css) and `.dark span { color: var(--white) }` win over .sb-premium-cta's `color: var(--ts-brand)` because of cascade order. Re-assert with matching specificity. */ #tsSidebar .sb-premium-cta { color: var(--ts-brand); } body.dark #tsSidebar .sb-premium-cta { color: var(--ts-brand); } /* ───────────────────────────────────────────────────────────── Top header — fixed full-width strip above the sidebar. .site-wrapper has padding-left for sidebar; making the header position:fixed lets it escape that padding and span the whole viewport (the way the new design's topbar does). Body gets padding-top so content doesn't slide under it. Background handled in header-skin.css (per-theme). */ body:not(.mobile) .site-wrapper > .header-wrapper { position: fixed; top: var(--ts-banner-h); left: 0; right: 0; z-index: 30; } body:not(.mobile) { padding-top: calc(var(--ts-banner-h) + var(--ts-header-h)); } body.mobile .site-wrapper > .header-wrapper { margin-top: var(--ts-banner-h); } /* ───────────────────────────────────────────────────────────── Layout (matches latest design bundle): sticky header edge-to-edge on top, sidebar flat against the left edge, tucked directly under the header — no gap, no floating-card chrome. They form a single L-shape (like Linear / Slack / Notion). The site's existing header is 72px tall; the design uses 68px. Both look fine — we use 72 since that's the real header height. */ body:not(.mobile) #tsSidebar { top: calc(var(--ts-banner-h) + var(--ts-header-h)); left: 0; bottom: 0; border: 0; border-right: 1px solid var(--ts-border); border-radius: 0; box-shadow: none; } body:not(.mobile) #tsSidebarToggle { /* Sits just past the sidebar's right edge, near its top. Matches design: top: calc(68px + 28px), left: sidebar-w - 18px. */ top: calc(var(--ts-banner-h) + var(--ts-header-h) + 28px); left: calc(264px - 18px); } body:not(.mobile).sidebar-collapsed #tsSidebarToggle { left: calc(76px - 14px); } /* ───────────────────────────────────────────────────────────── Drop the duplicate logo from inside the sidebar. The site's existing header already shows the TwitterScore logo + wordmark on every page, and the latest design moved the logo into the topbar as the single source. Hiding sb-header keeps the design asset (sidebar.html) untouched. */ body:not(.mobile) #tsSidebar .sb-header { display: none; } /* Reclaim the vertical space — nav can start higher. */ body:not(.mobile) #tsSidebar .sb-nav { padding-top: 18px; } /* Dark theme: flat sidebar has the same right-border treatment. */ body.dark:not(.mobile) #tsSidebar { border-right-color: rgba(255,255,255,.06); } /* ───────────────────────────────────────────────────────────── Dark-theme background — match production: body = #27272A (--dark-grey). Lock html + sidebar to the same so the padding-left strip behind the sidebar reads as one colour and the page stays the same lighter tone production uses. */ body.dark { background-color: #27272A !important; } html:has(body.dark) { background-color: #27272A; } body.dark #tsSidebar { background: #27272A !important; } /* ───────────────────────────────────────────────────────────── Auth buttons (Log In / Sign Up) — design's sidebar.css styles .sb-auth-login / .sb-auth-signup as height-36 pill buttons, but targets