/* ========================================================================== VideoTex — design tokens, reset, typography, a11y, layout shell. Loaded first. chrome.css, components.css and every page-*.css build on it. Theming: dark is the default (YouTube's default). An explicit choice stamps data-theme on and always wins over the OS preference, so the prefers-color-scheme block is guarded with :not([data-theme]). Never define a colour only inside a media query — it would be undefined for the other theme and render as nothing. ========================================================================== */ /* -- Dark theme: the default, on bare :root ------------------------------- */ :root { --yt-bg: #0b1220; --yt-bg-elevated: #131d31; --yt-bg-hover: #1a2540; --yt-bg-chip: #1a2540; --yt-bg-chip-active: #e8edf6; --yt-bg-search: #0e1626; --yt-fg: #e8edf6; --yt-fg-secondary: #93a3bd; --yt-fg-inverse: #0b1220; --yt-border: #22304d; --yt-brand: #3b6fd4; --yt-accent: #6ea8fe; --yt-overlay: rgba(5, 10, 20, .66); --yt-scrim: rgba(5, 10, 20, .55); --yt-scrollbar: #46587c; --yt-badge-bg: rgba(6, 12, 22, .85); --yt-skeleton: #1a2540; --yt-skeleton-sheen: #1a2540; --yt-success: #3fae6b; --yt-warning: #d9a441; --yt-danger: #e0574f; /* Structure */ --yt-masthead-h: 56px; --yt-sidebar-w: 240px; --yt-sidebar-mini-w: 72px; --yt-chips-h: 56px; --yt-radius-sm: 8px; --yt-radius-md: 12px; --yt-radius-lg: 24px; --yt-font: "Roboto", "Arial", system-ui, -apple-system, "Segoe UI", sans-serif; --yt-shadow-menu: 0 4px 32px rgba(0, 0, 0, .4); --yt-shadow-card: 0 4px 12px rgba(0, 0, 0, .3); --yt-transition: 120ms cubic-bezier(.2, 0, .2, 1); color-scheme: dark; } /* Pinned explicitly so the toggle wins in both directions. */ html[data-theme="dark"] { --yt-bg: #0b1220; --yt-bg-elevated: #131d31; --yt-bg-hover: #1a2540; --yt-bg-chip: #1a2540; --yt-bg-chip-active: #e8edf6; --yt-bg-search: #0e1626; --yt-fg: #e8edf6; --yt-fg-secondary: #93a3bd; --yt-fg-inverse: #0b1220; --yt-border: #22304d; --yt-accent: #6ea8fe; --yt-overlay: rgba(5, 10, 20, .66); --yt-scrim: rgba(5, 10, 20, .55); --yt-scrollbar: #46587c; --yt-badge-bg: rgba(6, 12, 22, .85); --yt-skeleton: #1a2540; --yt-skeleton-sheen: #1a2540; color-scheme: dark; } /* -- Light theme ---------------------------------------------------------- */ html[data-theme="light"] { --yt-brand: #1e4fa3; --yt-success: #1f8a4c; --yt-warning: #9a6b00; --yt-danger: #c1352c; --yt-bg: #ffffff; --yt-bg-elevated: #ffffff; --yt-bg-hover: #eef2f8; --yt-bg-chip: #eef2f8; --yt-bg-chip-active: #12233f; --yt-bg-search: #ffffff; --yt-fg: #12233f; --yt-fg-secondary: #5b6b85; --yt-fg-inverse: #ffffff; --yt-border: #d9e1ec; --yt-accent: #1a4fa0; --yt-overlay: rgba(10, 20, 35, .5); --yt-scrim: rgba(10, 20, 35, .32); --yt-scrollbar: #94a3bd; --yt-badge-bg: rgba(6, 12, 22, .82); --yt-skeleton: #eef2f8; --yt-skeleton-sheen: #eef2f8; --yt-shadow-menu: 0 4px 32px rgba(0, 0, 0, .2); --yt-shadow-card: 0 4px 12px rgba(0, 0, 0, .12); color-scheme: light; } /* OS preference applies only when the visitor has made no explicit choice. */ @media (prefers-color-scheme: light) { html:not([data-theme]) { --yt-brand: #1e4fa3; --yt-success: #1f8a4c; --yt-warning: #9a6b00; --yt-danger: #c1352c; --yt-bg: #ffffff; --yt-bg-elevated: #ffffff; --yt-bg-hover: #eef2f8; --yt-bg-chip: #eef2f8; --yt-bg-chip-active: #12233f; --yt-bg-search: #ffffff; --yt-fg: #12233f; --yt-fg-secondary: #5b6b85; --yt-fg-inverse: #ffffff; --yt-border: #d9e1ec; --yt-accent: #1a4fa0; --yt-overlay: rgba(10, 20, 35, .5); --yt-scrim: rgba(10, 20, 35, .32); --yt-scrollbar: #94a3bd; --yt-skeleton: #eef2f8; --yt-skeleton-sheen: #eef2f8; color-scheme: light; } } /* -- Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--yt-bg); color: var(--yt-fg); font-family: var(--yt-font); font-size: 14px; line-height: 1.43; min-height: 100vh; /* The masthead is sticky and the sidebar scrolls independently; the page itself must never scroll sideways at any width. */ overflow-x: hidden; } img, svg, video, canvas { display: block; max-width: 100%; } img, video { height: auto; } button, input, select, textarea { font: inherit; color: inherit; background: none; border: none; } button { cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } table { border-collapse: collapse; } [hidden] { display: none !important; } ::placeholder { color: var(--yt-fg-secondary); opacity: 1; } /* -- Typography ----------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-weight: 500; line-height: 1.25; } .yt-t-hero { font-size: clamp(28px, 5vw, 56px); font-weight: 700; letter-spacing: -.02em; } .yt-t-title { font-size: 24px; font-weight: 700; } .yt-t-section { font-size: 20px; font-weight: 700; } .yt-t-card { font-size: 16px; font-weight: 500; line-height: 1.375; } .yt-t-body { font-size: 14px; font-weight: 400; } .yt-t-meta { font-size: 12px; font-weight: 400; color: var(--yt-fg-secondary); } .yt-t-secondary { color: var(--yt-fg-secondary); } .yt-mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; } /* Line clamping. The -webkit-box trio is the real mechanism; max-height is the fallback for engines that ignore it, which is why line-height is fixed. */ .yt-clamp-1, .yt-clamp-2, .yt-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; } .yt-clamp-1 { -webkit-line-clamp: 1; max-height: 1.4em; } .yt-clamp-2 { -webkit-line-clamp: 2; max-height: 2.8em; } .yt-clamp-3 { -webkit-line-clamp: 3; max-height: 4.2em; } /* -- Accessibility -------------------------------------------------------- */ .yt-skip-link { position: absolute; left: 8px; top: -48px; z-index: 200; padding: 10px 16px; border-radius: var(--yt-radius-sm); background: var(--yt-bg-elevated); color: var(--yt-fg); font-weight: 500; transition: top var(--yt-transition); } .yt-skip-link:focus { top: 8px; } :focus-visible { outline: 2px solid var(--yt-accent); outline-offset: 2px; } /* Only suppress the ring for pointer users, never for keyboard users. */ :focus:not(:focus-visible) { outline: none; } .yt-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* -- Scrollbars ----------------------------------------------------------- */ * { scrollbar-width: thin; scrollbar-color: var(--yt-scrollbar) transparent; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--yt-scrollbar); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--yt-fg-secondary); } .yt-no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; } .yt-no-scrollbar::-webkit-scrollbar { display: none; } /* -- Reduced motion ------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ========================================================================== Layout shell .yt-app is a two-column grid: the sidebar rail and the content well, with the sticky masthead spanning both. data-sidebar on drives the rail width, and app.js stamps it before first paint so the layout never jumps. ========================================================================== */ .yt-app { display: grid; grid-template-columns: var(--yt-rail, var(--yt-sidebar-w)) minmax(0, 1fr); grid-template-rows: var(--yt-masthead-h) minmax(0, 1fr); grid-template-areas: "masthead masthead" "rail content"; min-height: 100vh; } html[data-sidebar="full"] { --yt-rail: var(--yt-sidebar-w); } html[data-sidebar="mini"] { --yt-rail: var(--yt-sidebar-mini-w); } html[data-sidebar="hidden"] { --yt-rail: 0px; } .yt-masthead-slot { grid-area: masthead; } .yt-rail { grid-area: rail; } .yt-content { grid-area: content; min-width: 0; } /* The page well. Pages that want edge-to-edge (watch, shorts, embed) opt out with .yt-page--flush. */ .yt-page { padding: 24px; max-width: 2560px; margin: 0 auto; } .yt-page--flush { padding: 0; max-width: none; } .yt-page--narrow { max-width: 1096px; } /* Rail visibility is a pure CSS consequence of data-sidebar, so no JS is needed to show or hide the two rail variants. */ .yt-rail__full, .yt-rail__mini { display: none; } html[data-sidebar="full"] .yt-rail__full { display: block; } html[data-sidebar="mini"] .yt-rail__mini { display: block; } /* Below 1312px YouTube never shows the full rail inline — it becomes the mini rail, and the full sidebar is only reachable as the overlay drawer. */ @media (max-width: 1312px) { html[data-sidebar="full"] { --yt-rail: var(--yt-sidebar-mini-w); } html[data-sidebar="full"] .yt-rail__full { display: none; } html[data-sidebar="full"] .yt-rail__mini { display: block; } } /* Below 792px the rail disappears entirely and navigation is drawer-only. */ @media (max-width: 792px) { .yt-app { grid-template-columns: 0 minmax(0, 1fr); } html[data-sidebar="full"], html[data-sidebar="mini"], html[data-sidebar="hidden"] { --yt-rail: 0px; } .yt-rail { display: none; } .yt-page { padding: 16px 0 24px; } } /* Pages that render no chrome at all (embed). */ body.yt-bare { background: #000; } body.yt-bare .yt-app { display: block; min-height: 100vh; } /* ========================================================================== Shared utilities — reused by chrome.css, components.css and every page. Reuse these rather than redefining equivalents. ========================================================================== */ /* Horizontal flex row, vertically centred, 8px gap. */ .yt-row { display: flex; align-items: center; gap: 8px; } .yt-row--between { justify-content: space-between; } .yt-row--wrap { flex-wrap: wrap; } /* Vertical flex column, 8px gap. */ .yt-stack { display: flex; flex-direction: column; gap: 8px; } /* Pushes subsequent flex children to the far end. */ .yt-spacer { flex: 1 1 auto; min-width: 0; } /* 1px hairline in the theme's border colour. */ .yt-divider { height: 1px; background: var(--yt-border); border: 0; } .yt-divider--v { width: 1px; height: auto; align-self: stretch; } /* 36px capsule: the base for every YouTube-style action button. */ .yt-pill { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 18px; background: var(--yt-bg-chip); color: var(--yt-fg); font-size: 14px; font-weight: 500; white-space: nowrap; transition: background var(--yt-transition); } .yt-pill:hover { background: var(--yt-bg-hover); filter: brightness(1.15); } .yt-pill--sm { height: 32px; padding: 0 12px; font-size: 13px; } /* Circular icon-only button. Always give it an aria-label. */ .yt-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; color: var(--yt-fg); transition: background var(--yt-transition); } .yt-icon-btn:hover { background: var(--yt-bg-hover); } .yt-icon-btn--sm { width: 32px; height: 32px; } .yt-icon-btn--lg { width: 48px; height: 48px; } .yt-icon-btn[aria-disabled="true"], .yt-icon-btn:disabled { opacity: .4; cursor: default; } .yt-icon-btn:disabled:hover { background: none; } /* Rectangular button. --accent is the primary blue, --mono the inverted high-contrast one YouTube uses for Subscribe. */ .yt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 18px; background: var(--yt-bg-chip); color: var(--yt-fg); font-size: 14px; font-weight: 500; white-space: nowrap; transition: background var(--yt-transition), opacity var(--yt-transition); } .yt-btn:hover { background: var(--yt-bg-hover); } .yt-btn--accent { background: var(--yt-accent); color: #fff; } html[data-theme="light"] .yt-btn--accent { color: #fff; } .yt-btn--accent:hover { background: var(--yt-accent); opacity: .85; } .yt-btn--mono { background: var(--yt-fg); color: var(--yt-fg-inverse); } .yt-btn--mono:hover { background: var(--yt-fg); opacity: .85; } .yt-btn--ghost { background: transparent; border: 1px solid var(--yt-border); } .yt-btn--ghost:hover { background: var(--yt-bg-hover); } .yt-btn--lg { height: 44px; padding: 0 24px; font-size: 15px; } .yt-btn:disabled { opacity: .5; cursor: default; } /* Small status/label pill. */ .yt-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 4px; background: var(--yt-bg-chip); color: var(--yt-fg); font-size: 12px; font-weight: 500; line-height: 1.2; white-space: nowrap; } .yt-badge--overlay { background: var(--yt-badge-bg); color: #fff; } .yt-badge--brand { background: var(--yt-brand); color: #fff; } .yt-badge--success { background: rgba(43, 166, 64, .15); color: var(--yt-success); } .yt-badge--warning { background: rgba(241, 196, 15, .15); color: var(--yt-warning); } .yt-badge--danger { background: rgba(255, 78, 69, .15); color: var(--yt-danger); } .yt-badge--outline { background: transparent; border: 1px solid var(--yt-border); color: var(--yt-fg-secondary); } /* Link that should look like a link. */ .yt-link { color: var(--yt-accent); } .yt-link:hover { text-decoration: underline; } /* Truncate to one line with an ellipsis. */ .yt-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }