Home: collapse guide, fixed hero layout for the first 5 videos, then 4/5 col grid below, hide Shorts. Flat chip bar. Watch: hide recommendations sidebar and center the player/content, while preserving live chat on streams/replays and engagement panels. Adds topbar theme and home grid switchers.
// ==UserScript==
// @name YouTube Layout Plus
// @namespace https://qazwsx123.uk/
// @version 0.5.9
// @description Home: collapse guide, fixed hero layout for the first 5 videos, then 4/5 col grid below, hide Shorts. Flat chip bar. Watch: hide recommendations sidebar and center the player/content, while preserving live chat on streams/replays and engagement panels. Adds topbar theme and home grid switchers.
// @author Codex
// @match https://www.youtube.com/*
// @run-at document-idle
// @grant none
// ==/UserScript==
(function () {
'use strict';
const STYLE_ID = 'tm-youtube-layout-plus-style';
const STYLE_VERSION = '0.5.9';
const THEME_SWITCHER_ID = 'tm-youtube-layout-plus-theme-switcher';
const HOME_GRID_SWITCHER_ID = 'tm-youtube-layout-plus-home-grid-switcher';
const THEME_STATUS_ID = 'tm-youtube-layout-plus-theme-status';
const REPLAY_HIDE_CLASS = 'tm-youtube-layout-plus-hide-replay-prompt';
const WATCH_PANEL_OPEN_CLASS = 'tm-youtube-layout-plus-watch-panel-open';
const WATCH_THEATER_CLASS = 'tm-youtube-layout-plus-watch-theater';
const WATCH_VERTICAL_CLASS = 'tm-youtube-layout-plus-watch-vertical';
const ROUTE_TRANSITION_CLASS = 'tm-youtube-layout-plus-route-transition';
const WATCH_READY_ATTR = 'data-tm-watch-ready';
const THEME_MODE_STORAGE_KEY = 'tm-youtube-layout-plus-theme-mode';
const HOME_GRID_COLUMNS_STORAGE_KEY = 'tm-youtube-layout-plus-home-grid-columns';
const THEME_MODES = [
{ mode: 'auto', label: 'Auto', actionName: 'yt-signal-action-toggle-dark-theme-device' },
{ mode: 'light', label: 'Light', actionName: 'yt-signal-action-toggle-dark-theme-off' },
{ mode: 'dark', label: 'Dark', actionName: 'yt-signal-action-toggle-dark-theme-on' },
];
const HOME_GRID_COLUMN_OPTIONS = [4, 5];
const HOME_GRID_TRACK_COUNT = 20;
const HOME_MAX_LAYOUT_WIDTH = 3000;
const MAX_LAYOUT_WIDTH = 1300;
const HOME_SIDE_CARDS_STACK_MEDIA = '(max-width: 1340px)';
const LAYOUT_MODE_CLASSES = [
'tm-youtube-layout-plus-home',
'tm-youtube-layout-plus-watch',
'tm-youtube-layout-plus-watch-chat',
'tm-youtube-layout-plus-watch-plain',
];
const OBSERVER_APPLY_DEBOUNCE_MS = 150;
const ROUTE_POLL_INTERVAL_MS = 3000;
const PREF_F6_PREF_BIT = 0x80;
const PREF_F6_DARK_BIT = 0x400;
const PREF_F6_LIGHT_BIT = 0x80000;
// Short bootstrap probe until first viewport sizing and watch attribute observer settle.
const WATCH_BOOTSTRAP_DELAYS = [0, 80, 200, 500, 1200];
let currentUrl = location.href;
let applyFrame = 0;
let applyDelayTimer = null;
let bodyObserver = null;
let routeTimer = null;
let resizeTimer = null;
let resizeFrame = 0;
let routeTransitionTimer = null;
let watchBootstrapTimer = null;
let watchBootstrapStep = 0;
let watchChatStateTimer = null;
let lastWatchChatExpanded = null;
let lastEngagementPanelOpen = null;
let lastTheaterMode = null;
let lastPlayerSyncKey = '';
let lastAutoCollapsedHomeUrl = '';
let lastAutoCollapsedWatchChatKey = '';
let watchFlexyAttrObserver = null;
let watchFlexyObservedElement = null;
let currentThemeMode = loadStoredThemeMode();
let currentHomeGridColumns = loadStoredHomeGridColumns();
let themeSwitchInFlight = false;
let pendingThemeMode = null;
let themeStatusHideTimer = null;
let lastRenderedThemeMode = null;
let lastRenderedThemeDisabled = null;
let lastRenderedHomeGridColumns = null;
let lastPersistedThemeMode = currentThemeMode;
function extractVideoId(value) {
const text = String(value || '');
const directMatch = text.match(/(?:\/vi(?:_webp)?\/|[?&]v=)([a-zA-Z0-9_-]{11})/);
if (directMatch) return directMatch[1];
try {
const url = new URL(text, location.origin);
return url.searchParams.get('v');
} catch {
return null;
}
}
function isHomeHeroMixCard(item) {
if (!item) return false;
if (item.querySelector('yt-collection-thumbnail-view-model, .ytCollectionThumbnailViewModelHost')) {
return true;
}
const titleElement = item.querySelector(
'#video-title, yt-formatted-string#video-title, a[title], h3'
);
const title = (
titleElement?.getAttribute('title')
|| titleElement?.innerText
|| titleElement?.textContent
|| ''
).trim();
return /^mix\b/i.test(title);
}
function upgradeHomeHeroThumbnail() {
const item = document.querySelector('#contents.ytd-rich-grid-renderer > ytd-rich-item-renderer');
if (!item) return;
const heroIsMix = isHomeHeroMixCard(item);
item.classList.toggle('tm-youtube-layout-plus-hero-mix', heroIsMix);
const link = item.querySelector('a#thumbnail[href], a[href*="/watch?v="]');
const img = item.querySelector('img[src*="ytimg.com"]');
const videoId = extractVideoId(link?.href) || extractVideoId(img?.src);
if (!videoId) return;
const images = Array.from(item.querySelectorAll('img[src*="ytimg.com"], img'));
if (!images.length) return;
const key = `${heroIsMix ? 'mix' : 'video'}:${videoId}`;
const currentThumbUrl = item.dataset.tmHeroThumbUrl || '';
if (
item.dataset.tmHeroThumbKey === key &&
currentThumbUrl &&
images.some((image) => image.src === currentThumbUrl || image.srcset.includes(currentThumbUrl))
) {
return;
}
const candidates = heroIsMix
? [
`https://i.ytimg.com/vi_webp/${videoId}/maxresdefault.webp`,
`https://i.ytimg.com/vi/${videoId}/maxresdefault.jpg`,
`https://i.ytimg.com/vi_webp/${videoId}/hq720.webp`,
`https://i.ytimg.com/vi/${videoId}/hq720.jpg`,
`https://i.ytimg.com/vi_webp/${videoId}/sddefault.webp`,
`https://i.ytimg.com/vi/${videoId}/sddefault.jpg`,
`https://i.ytimg.com/vi_webp/${videoId}/hqdefault.webp`,
`https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`,
]
: [
`https://i.ytimg.com/vi/${videoId}/maxresdefault.jpg`,
`https://i.ytimg.com/vi/${videoId}/hq720.jpg`,
`https://i.ytimg.com/vi/${videoId}/sddefault.jpg`,
`https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`,
];
const minimumWidth = heroIsMix ? 320 : 640;
const applyCandidate = (url, width) => {
item.dataset.tmHeroThumbKey = key;
item.dataset.tmHeroThumbUrl = url;
for (const image of images) {
image.src = url;
image.srcset = `${url} ${width || 1280}w`;
image.sizes = '(min-width: 1180px) 60vw, 100vw';
image.loading = 'eager';
image.fetchPriority = 'high';
image.decoding = 'async';
}
};
const tryCandidate = (index = 0) => {
const url = candidates[index];
if (!url) return;
const probe = new Image();
probe.onload = () => {
if (probe.naturalWidth >= minimumWidth || index === candidates.length - 1) {
applyCandidate(url, probe.naturalWidth);
return;
}
tryCandidate(index + 1);
};
probe.onerror = () => tryCandidate(index + 1);
probe.src = url;
};
tryCandidate();
}
function isHomePage() {
return location.pathname === '/';
}
function isWatchPage() {
return location.pathname === '/watch';
}
function getWatchPageKey() {
if (!isWatchPage()) return location.pathname;
const params = new URLSearchParams(location.search);
const videoId = params.get('v');
return videoId ? `/watch?v=${videoId}` : location.pathname;
}
function getWatchTeaserText() {
const teaserCarousel = document.querySelector('ytd-watch-metadata #teaser-carousel');
return (teaserCarousel?.innerText || teaserCarousel?.textContent || '').trim();
}
function hasLiveWatchPrompt(teaserText = getWatchTeaserText()) {
return /join the conversation to interact with the creator and others watching this live stream/i.test(teaserText)
|| (/watching now/i.test(document.body.innerText) && /started streaming/i.test(document.body.innerText));
}
function hasReplayWatchPrompt(teaserText = getWatchTeaserText()) {
return /live chat replay/i.test(teaserText)
|| /see what others said about this video while it was live/i.test(teaserText);
}
function hasWatchSidebarChat(watchFlexy) {
if (!watchFlexy) return false;
if (
watchFlexy.hasAttribute('is-live')
|| watchFlexy.hasAttribute('is-live-content')
|| watchFlexy.hasAttribute('live-chat-collapsed')
) {
return true;
}
const liveBadge = watchFlexy.querySelector(
'ytd-badge-supported-renderer[system-icons][icon="LIVE"], ' +
'ytd-thumbnail-overlay-time-status-renderer[overlay-style="LIVE"], ' +
'yt-icon[icon="yt-icons:live"]'
);
if (liveBadge && isVisibleElement(liveBadge)) {
return true;
}
const teaserText = getWatchTeaserText();
if (hasLiveWatchPrompt(teaserText)) {
return true;
}
const chatFrame = watchFlexy.querySelector(
'ytd-live-chat-frame#chat, #chat ytd-live-chat-frame, #chat-container ytd-live-chat-frame'
);
const chatHost = chatFrame?.closest('#chat') || watchFlexy.querySelector('#chat, #chat-container');
const hasStampedChat = watchFlexy.hasAttribute('should-stamp-chat') || !!chatFrame || !!chatHost;
if (hasReplayWatchPrompt(teaserText) && hasStampedChat) {
return true;
}
if (!chatFrame) return false;
if (chatFrame.hasAttribute('hidden')) return false;
if (chatFrame.hasAttribute('collapsed')) {
return hasStampedChat;
}
return isVisibleElement(chatFrame) || isVisibleElement(chatHost);
}
function hasOpenEngagementPanel(watchFlexy) {
const host = watchFlexy || document.querySelector('ytd-watch-flexy');
if (!host) return false;
return !!host.querySelector(
'ytd-engagement-panel-section-list-renderer[visibility="ENGAGEMENT_PANEL_VISIBILITY_EXPANDED"]'
);
}
function isTheaterModeActive(watchFlexy) {
if (!isWatchPage()) return false;
const flexy = watchFlexy || document.querySelector('ytd-watch-flexy');
return !!(flexy && flexy.hasAttribute('theater'));
}
function ensureStyle() {
let style = document.getElementById(STYLE_ID);
if (style?.dataset.version === STYLE_VERSION) return;
if (!style) {
style = document.createElement('style');
style.id = STYLE_ID;
document.head.appendChild(style);
}
style.dataset.version = STYLE_VERSION;
style.textContent = `
html.tm-youtube-layout-plus-home {
--tm-guide-collapsed-width: 72px;
--tm-home-page-gutter: clamp(14px, 2.1vw, 28px);
--tm-home-available-width: calc(100vw - var(--tm-guide-collapsed-width));
--tm-home-layout-width: min(${HOME_MAX_LAYOUT_WIDTH}px, var(--tm-home-available-width));
--tm-hero-mix-object-position: center 82%;
--tm-card-bg: #f8f9fa;
--tm-card-border: rgba(15, 15, 15, 0.06);
--tm-card-shadow: 0 1px 2px rgba(15, 15, 15, 0.04), 0 6px 18px rgba(15, 15, 15, 0.05);
--tm-text-primary: #0f0f0f;
--tm-text-secondary: rgba(15, 15, 15, 0.62);
--tm-meta-secondary: rgba(15, 15, 15, 0.55);
--tm-chip-bg: rgba(15, 15, 15, 0.05);
--tm-chip-bg-hover: rgba(15, 15, 15, 0.09);
--tm-chip-bg-active: #0f0f0f;
--tm-chip-text: #0f0f0f;
--tm-chip-text-active: #ffffff;
--tm-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display',
'Segoe UI', 'Helvetica Neue', Roboto, Arial, sans-serif;
}
html[dark].tm-youtube-layout-plus-home {
--tm-card-bg: #1f1f1f;
--tm-card-border: rgba(255, 255, 255, 0.08);
--tm-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.18);
--tm-text-primary: #f1f1f1;
--tm-text-secondary: rgba(255, 255, 255, 0.72);
--tm-meta-secondary: rgba(255, 255, 255, 0.6);
--tm-chip-bg: rgba(255, 255, 255, 0.08);
--tm-chip-bg-hover: rgba(255, 255, 255, 0.14);
--tm-chip-bg-active: #ffffff;
--tm-chip-text: rgba(255, 255, 255, 0.92);
--tm-chip-text-active: #0f0f0f;
}
.${REPLAY_HIDE_CLASS} {
display: none !important;
}
#${THEME_SWITCHER_ID} {
position: relative;
display: flex;
align-items: center;
gap: 0;
margin-left: 12px;
padding: 4px 6px;
border: 1px solid var(--yt-spec-10-percent-layer, rgba(0, 0, 0, 0.1));
border-radius: 999px;
background: var(--yt-spec-badge-chip-background, rgba(0, 0, 0, 0.05));
}
#${THEME_STATUS_ID} {
position: fixed;
top: 72px;
right: 24px;
z-index: 2200;
max-width: 320px;
padding: 10px 14px;
border: 1px solid rgba(190, 60, 60, 0.28);
border-radius: 14px;
background: rgba(126, 28, 28, 0.92);
color: #fff;
font: 500 13px/1.4 Roboto, Arial, sans-serif;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
opacity: 0;
transform: translateY(-6px);
pointer-events: none;
transition: opacity 160ms ease, transform 160ms ease;
}
#${THEME_STATUS_ID}[data-visible="true"] {
opacity: 1;
transform: translateY(0);
}
#${THEME_SWITCHER_ID} .tm-theme-switch-track {
display: inline-flex;
align-items: center;
gap: 4px;
}
#${THEME_SWITCHER_ID} .tm-theme-switch-option {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 52px;
height: 28px;
padding: 0 10px;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--yt-spec-text-primary, #0f0f0f);
cursor: pointer;
font: 600 12px/1 'Inter', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
letter-spacing: 0;
transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
#${THEME_SWITCHER_ID} .tm-theme-switch-option:hover {
background: var(--yt-spec-badge-chip-background-hover, rgba(0, 0, 0, 0.08));
}
#${THEME_SWITCHER_ID} .tm-theme-switch-option[data-active="true"] {
background: var(--yt-spec-brand-background-solid, rgba(15, 15, 15, 0.92));
color: var(--yt-spec-static-brand-white, #fff);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
html[dark] #${THEME_SWITCHER_ID} {
border-color: rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.04);
}
html[dark] #${THEME_SWITCHER_ID} .tm-theme-switch-option {
color: rgba(255, 255, 255, 0.92);
}
html[dark] #${THEME_SWITCHER_ID} .tm-theme-switch-option[data-active="true"] {
background: rgba(255, 255, 255, 0.14);
color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
}
#${HOME_GRID_SWITCHER_ID} {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: 8px;
padding: 4px 6px;
border: 1px solid var(--yt-spec-10-percent-layer, rgba(0, 0, 0, 0.1));
border-radius: 999px;
background: var(--yt-spec-badge-chip-background, rgba(0, 0, 0, 0.05));
}
#${HOME_GRID_SWITCHER_ID} .tm-home-grid-option {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--yt-spec-text-primary, #0f0f0f);
cursor: pointer;
font: 700 12px/1 'Inter', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
#${HOME_GRID_SWITCHER_ID} .tm-home-grid-option:hover {
background: var(--yt-spec-badge-chip-background-hover, rgba(0, 0, 0, 0.08));
}
#${HOME_GRID_SWITCHER_ID} .tm-home-grid-option[data-active="true"] {
background: var(--yt-spec-brand-background-solid, rgba(15, 15, 15, 0.92));
color: var(--yt-spec-static-brand-white, #fff);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
html[dark] #${HOME_GRID_SWITCHER_ID} {
border-color: rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.04);
}
html[dark] #${HOME_GRID_SWITCHER_ID} .tm-home-grid-option {
color: rgba(255, 255, 255, 0.92);
}
html[dark] #${HOME_GRID_SWITCHER_ID} .tm-home-grid-option[data-active="true"] {
background: rgba(255, 255, 255, 0.14);
color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
}
html.${WATCH_THEATER_CLASS} #${THEME_SWITCHER_ID},
html.${WATCH_THEATER_CLASS} #${HOME_GRID_SWITCHER_ID} {
border-color: rgba(255, 255, 255, 0.18) !important;
background: rgba(255, 255, 255, 0.06) !important;
}
html.${WATCH_THEATER_CLASS} #${THEME_SWITCHER_ID} .tm-theme-switch-option,
html.${WATCH_THEATER_CLASS} #${HOME_GRID_SWITCHER_ID} .tm-home-grid-option {
color: rgba(255, 255, 255, 0.92) !important;
}
html.${WATCH_THEATER_CLASS} #${THEME_SWITCHER_ID} .tm-theme-switch-option:hover,
html.${WATCH_THEATER_CLASS} #${HOME_GRID_SWITCHER_ID} .tm-home-grid-option:hover {
background: rgba(255, 255, 255, 0.1) !important;
}
html.${WATCH_THEATER_CLASS} #${THEME_SWITCHER_ID} .tm-theme-switch-option[data-active="true"],
html.${WATCH_THEATER_CLASS} #${HOME_GRID_SWITCHER_ID} .tm-home-grid-option[data-active="true"] {
background: rgba(255, 255, 255, 0.22) !important;
color: #fff !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.42) !important;
}
html.tm-youtube-layout-plus-home ytd-app[mini-guide-visible]:not([guide-persistent-and-visible]) ytd-feed-filter-chip-bar-renderer,
html.tm-youtube-layout-plus-home ytd-app[mini-guide-visible]:not([guide-persistent-and-visible]) #chips-wrapper {
left: var(--tm-guide-collapsed-width) !important;
width: calc(100vw - var(--tm-guide-collapsed-width)) !important;
}
html.tm-youtube-layout-plus-home ytd-feed-filter-chip-bar-renderer #chips-wrapper {
top: 66px !important;
}
html.tm-youtube-layout-plus-home ytd-app[mini-guide-visible]:not([guide-persistent-and-visible]) ytd-page-manager {
margin-left: var(--tm-guide-collapsed-width) !important;
width: calc(100% - var(--tm-guide-collapsed-width)) !important;
}
html.tm-youtube-layout-plus-home ytd-browse {
overflow: visible !important;
}
html.tm-youtube-layout-plus-home ytd-app[mini-guide-visible]:not([guide-persistent-and-visible]) ytd-two-column-browse-results-renderer {
margin-left: 0 !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
html.tm-youtube-layout-plus-home ytd-app[mini-guide-visible]:not([guide-persistent-and-visible]) ytd-rich-grid-renderer {
width: min(100%, var(--tm-home-layout-width)) !important;
max-width: var(--tm-home-layout-width) !important;
min-width: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
html.tm-youtube-layout-plus-home ytd-feed-filter-chip-bar-renderer {
padding: 20px 24px 6px !important;
background: transparent !important;
}
html.tm-youtube-layout-plus-home ytd-feed-filter-chip-bar-renderer #chips-wrapper,
html.tm-youtube-layout-plus-home ytd-feed-filter-chip-bar-renderer #chips {
align-items: center !important;
}
html.tm-youtube-layout-plus-home ytd-feed-filter-chip-bar-renderer #chips-content {
position: static !important;
overflow: visible !important;
isolation: auto !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
}
html.tm-youtube-layout-plus-home ytd-feed-filter-chip-bar-renderer #chips-content::before,
html.tm-youtube-layout-plus-home ytd-feed-filter-chip-bar-renderer #chips-content::after {
content: none !important;
display: none !important;
}
html.tm-youtube-layout-plus-home ytd-feed-filter-chip-bar-renderer yt-chip-cloud-chip-renderer {
position: relative !important;
margin: 0 8px 0 0 !important;
padding: 0 !important;
}
html.tm-youtube-layout-plus-home ytd-feed-filter-chip-bar-renderer yt-chip-cloud-chip-renderer + yt-chip-cloud-chip-renderer::before {
display: none !important;
content: none !important;
}
html.tm-youtube-layout-plus-home ytd-feed-filter-chip-bar-renderer yt-chip-cloud-chip-renderer button.ytChipShapeButtonReset {
border-radius: 999px !important;
overflow: hidden !important;
}
html.tm-youtube-layout-plus-home ytd-feed-filter-chip-bar-renderer yt-chip-cloud-chip-renderer .ytChipShapeChip {
position: relative !important;
min-height: 34px !important;
padding: 0 14px !important;
border: 1px solid transparent !important;
border-radius: 999px !important;
background: var(--tm-chip-bg) !important;
color: var(--tm-chip-text) !important;
font-family: var(--tm-font) !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
transition: background 140ms ease, color 140ms ease !important;
}
html.tm-youtube-layout-plus-home ytd-feed-filter-chip-bar-renderer yt-chip-cloud-chip-renderer .ytChipShapeChip > div {
font-size: 14px !important;
line-height: 32px !important;
}
html.tm-youtube-layout-plus-home ytd-feed-filter-chip-bar-renderer yt-chip-cloud-chip-renderer:hover .ytChipShapeChip,
html.tm-youtube-layout-plus-home ytd-feed-filter-chip-bar-renderer yt-chip-cloud-chip-renderer button:focus-visible .ytChipShapeChip {
background: var(--tm-chip-bg-hover) !important;
}
html.tm-youtube-layout-plus-home ytd-feed-filter-chip-bar-renderer yt-chip-cloud-chip-renderer[selected] .ytChipShapeChip,
html.tm-youtube-layout-plus-home ytd-feed-filter-chip-bar-renderer yt-chip-cloud-chip-renderer .ytChipShapeChip.ytChipShapeActive {
background: var(--tm-chip-bg-active) !important;
color: var(--tm-chip-text-active) !important;
border-color: transparent !important;
box-shadow: none !important;
}
html.tm-youtube-layout-plus-home ytd-feed-filter-chip-bar-renderer yt-chip-cloud-chip-renderer yt-touch-feedback-shape,
html.tm-youtube-layout-plus-home ytd-feed-filter-chip-bar-renderer yt-chip-cloud-chip-renderer .yt-spec-touch-feedback-shape__stroke,
html.tm-youtube-layout-plus-home ytd-feed-filter-chip-bar-renderer yt-chip-cloud-chip-renderer .yt-spec-touch-feedback-shape__fill {
border-radius: 999px !important;
}
html.tm-youtube-layout-plus-home ytd-feed-filter-chip-bar-renderer #right-arrow.ytd-feed-filter-chip-bar-renderer,
html.tm-youtube-layout-plus-home ytd-feed-filter-chip-bar-renderer #left-arrow.ytd-feed-filter-chip-bar-renderer {
top: 0 !important;
margin-top: 0 !important;
}
html.tm-youtube-layout-plus-home ytd-feed-filter-chip-bar-renderer #right-arrow button,
html.tm-youtube-layout-plus-home ytd-feed-filter-chip-bar-renderer #left-arrow button {
border: 0 !important;
border-radius: 999px !important;
background: var(--tm-chip-bg) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
transform: none !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer {
display: grid !important;
grid-template-columns: repeat(20, minmax(0, 1fr)) !important;
grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
grid-auto-rows: min-content !important;
gap: 8px 16px !important;
width: min(100%, var(--tm-home-layout-width)) !important;
max-width: var(--tm-home-layout-width) !important;
margin: 0 auto !important;
padding: 5px var(--tm-home-page-gutter) 40px var(--tm-home-page-gutter) !important;
box-sizing: border-box !important;
font-family: var(--tm-font) !important;
align-items: stretch !important;
min-width: 0 !important;
overflow-x: clip !important;
}
html.tm-youtube-layout-plus-home ytd-rich-grid-renderer {
--ytd-rich-grid-items-per-row: var(--tm-home-grid-items-per-row, 5) !important;
--ytd-rich-grid-posts-per-row: var(--tm-home-grid-items-per-row, 5) !important;
width: min(100%, var(--tm-home-layout-width)) !important;
max-width: var(--tm-home-layout-width) !important;
min-width: 0 !important;
margin: -20px auto 0 !important;
box-sizing: border-box !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer {
width: auto !important;
min-width: 0 !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
transform-origin: center top !important;
transition: transform 160ms ease, box-shadow 160ms ease !important;
will-change: transform !important;
}
html.tm-youtube-layout-plus-home ytd-rich-section-renderer,
html.tm-youtube-layout-plus-home ytd-rich-shelf-renderer,
html.tm-youtube-layout-plus-home ytd-reel-shelf-renderer {
display: none !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(1) {
grid-column: 1 / 13 !important;
grid-row: 1 / span 4 !important;
align-self: stretch !important;
height: auto !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(1) > #content {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
background: var(--tm-card-bg) !important;
border: 1px solid var(--tm-card-border) !important;
border-radius: 20px !important;
box-shadow: var(--tm-card-shadow) !important;
overflow: hidden !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(1) ytd-rich-grid-media,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(1) yt-lockup-view-model {
height: auto !important;
max-height: none !important;
min-height: 0 !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(1) ytd-rich-grid-media #dismissible,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(1) yt-lockup-view-model > div,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(1) .ytLockupViewModelHost,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(1) .yt-lockup-view-model-wiz {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: auto auto !important;
gap: 10px !important;
align-items: stretch !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(1) ytd-thumbnail,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(1) #thumbnail,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(1) yt-thumbnail-view-model,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(1) yt-collection-thumbnail-view-model,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(1) .ytCollectionThumbnailViewModelHost,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(1) .ytLockupViewModelContentImage,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(1) .yt-lockup-view-model-wiz__content-image {
grid-column: 1 !important;
grid-row: 1 !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
aspect-ratio: 16 / 9 !important;
margin: 0 !important;
border-radius: 18px !important;
overflow: hidden !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:not(.tm-youtube-layout-plus-hero-mix):nth-of-type(1) ytd-thumbnail a,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:not(.tm-youtube-layout-plus-hero-mix):nth-of-type(1) #thumbnail a,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:not(.tm-youtube-layout-plus-hero-mix):nth-of-type(1) ytd-thumbnail img,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:not(.tm-youtube-layout-plus-hero-mix):nth-of-type(1) #thumbnail img,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:not(.tm-youtube-layout-plus-hero-mix):nth-of-type(1) yt-thumbnail-view-model a,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:not(.tm-youtube-layout-plus-hero-mix):nth-of-type(1) yt-thumbnail-view-model img,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:not(.tm-youtube-layout-plus-hero-mix):nth-of-type(1) .ytLockupViewModelContentImage > *,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:not(.tm-youtube-layout-plus-hero-mix):nth-of-type(1) .ytLockupViewModelContentImage img,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:not(.tm-youtube-layout-plus-hero-mix):nth-of-type(1) .yt-lockup-view-model-wiz__content-image a,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:not(.tm-youtube-layout-plus-hero-mix):nth-of-type(1) .yt-lockup-view-model-wiz__content-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: var(--tm-hero-mix-object-position) !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer.tm-youtube-layout-plus-hero-mix:nth-of-type(1) ytd-thumbnail,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer.tm-youtube-layout-plus-hero-mix:nth-of-type(1) #thumbnail,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer.tm-youtube-layout-plus-hero-mix:nth-of-type(1) yt-thumbnail-view-model,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer.tm-youtube-layout-plus-hero-mix:nth-of-type(1) yt-collection-thumbnail-view-model,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer.tm-youtube-layout-plus-hero-mix:nth-of-type(1) .ytCollectionThumbnailViewModelHost,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer.tm-youtube-layout-plus-hero-mix:nth-of-type(1) .ytLockupViewModelContentImage,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer.tm-youtube-layout-plus-hero-mix:nth-of-type(1) .yt-lockup-view-model-wiz__content-image {
aspect-ratio: auto !important;
overflow: visible !important;
border-radius: 0 !important;
margin-top: 12px !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer.tm-youtube-layout-plus-hero-mix:nth-of-type(1) yt-collection-thumbnail-view-model,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer.tm-youtube-layout-plus-hero-mix:nth-of-type(1) .ytCollectionThumbnailViewModelHost {
width: 100% !important;
height: auto !important;
max-width: none !important;
max-height: none !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(1) #details,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(1) .ytLockupViewModelMetadata,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(1) .yt-lockup-view-model-wiz__metadata,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(1) yt-lockup-metadata-view-model {
grid-column: 1 !important;
grid-row: 2 !important;
display: block !important;
min-width: 0 !important;
width: 100% !important;
max-width: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 2px 10px 6px !important;
background: transparent !important;
box-sizing: border-box !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(1) yt-lockup-metadata-view-model {
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) auto !important;
grid-template-rows: auto auto !important;
column-gap: 12px !important;
row-gap: 2px !important;
align-items: start !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(1) .ytLockupMetadataViewModelTextContainer {
grid-column: 2 !important;
grid-row: 1 / span 2 !important;
min-width: 0 !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(1) .ytLockupMetadataViewModelAvatar {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
align-self: start !important;
margin: 0 !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(1) .ytLockupMetadataViewModelMenuButton {
grid-column: 3 !important;
grid-row: 1 / span 2 !important;
align-self: start !important;
margin-top: -4px !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(1) #details::after {
content: none !important;
display: none !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(2) { grid-column: 13 / 21 !important; grid-row: 1 !important; }
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(3) { grid-column: 13 / 21 !important; grid-row: 2 !important; }
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(4) { grid-column: 13 / 21 !important; grid-row: 3 !important; }
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(5) { grid-column: 13 / 21 !important; grid-row: 4 !important; }
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) {
position: relative !important;
align-self: stretch !important;
height: 100% !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) > #content {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) ytd-rich-grid-media,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) yt-lockup-view-model,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) .yt-lockup-view-model-wiz,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) yt-lockup-view-model > div,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) ytd-ad-slot-renderer,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) ytd-in-feed-ad-layout-renderer {
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) ytd-rich-grid-media,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) yt-lockup-view-model,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) ytd-ad-slot-renderer,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) ytd-in-feed-ad-layout-renderer {
background: var(--tm-card-bg) !important;
border: 1px solid var(--tm-card-border) !important;
border-radius: 16px !important;
padding: 12px !important;
box-shadow: var(--tm-card-shadow) !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) ytd-rich-grid-media #dismissible,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) .ytLockupViewModelHost,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) .yt-lockup-view-model-wiz,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) yt-lockup-view-model > div,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) ytd-ad-slot-renderer #dismissible,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) ytd-in-feed-ad-layout-renderer #dismissible,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) ytd-in-feed-ad-layout-renderer > div {
display: flex !important;
flex-direction: row !important;
gap: 12px !important;
align-items: center !important;
height: 100% !important;
min-height: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
box-shadow: none !important;
box-sizing: border-box !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) ytd-thumbnail,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) #thumbnail,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) yt-thumbnail-view-model,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) yt-collection-thumbnail-view-model,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) .ytCollectionThumbnailViewModelHost,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) .ytLockupViewModelContentImage,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) .yt-lockup-view-model-wiz__content-image,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) .yt-lockup-view-model-wiz__content,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) ytd-in-feed-ad-layout-renderer #thumbnail {
grid-column: 1 !important;
grid-row: 1 !important;
width: clamp(96px, 10vw, 180px) !important;
min-width: 96px !important;
max-width: 180px !important;
flex: 0 0 clamp(96px, 10vw, 180px) !important;
align-self: center !important;
margin: 0 !important;
border-radius: 12px !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) #avatar-link,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) #avatar,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) #avatar-container,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) #channel-thumbnail,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) ytd-channel-name yt-img-shadow {
display: none !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) #details,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) #meta,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) .ytLockupViewModelMetadata,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) .yt-lockup-view-model-wiz__metadata,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) yt-lockup-metadata-view-model,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) ytd-in-feed-ad-layout-renderer #details,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) ytd-in-feed-ad-layout-renderer #meta {
padding: 0 !important;
margin: 0 !important;
min-width: 0 !important;
max-width: 100% !important;
grid-column: 2 !important;
grid-row: 1 !important;
flex: 1 1 auto !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) #video-title,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) yt-formatted-string#video-title,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) .yt-lockup-view-model-wiz__title,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) h3,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) .yt-lockup-view-model-wiz__title yt-core-attributed-string,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) .yt-lockup-view-model-wiz__title .yt-core-attributed-string,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) .yt-lockup-view-model-wiz__title yt-formatted-string {
--yt-core-attributed-string-font-size: clamp(10px, 0.7vw, 12px) !important;
--yt-core-attributed-string-line-height: 1.3 !important;
--yt-endpoint-font-size: clamp(12px, 0.8vw, 14px) !important;
font-family: var(--tm-font) !important;
font-size: clamp(10px, 0.8vw, 12px) !important;
font-weight: 700 !important;
line-height: 1.3 !important;
letter-spacing: 0 !important;
margin: 0 0 4px 0 !important;
color: var(--tm-text-primary) !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) ytd-channel-name #text,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) ytd-channel-name a,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) #metadata-line,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) #metadata-line span,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) .yt-lockup-metadata-view-model-wiz__text-block,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) .yt-lockup-metadata-view-model-wiz__text-block yt-core-attributed-string,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) .yt-lockup-metadata-view-model-wiz__text-block .yt-core-attributed-string,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) .yt-lockup-metadata-view-model-wiz__text-block yt-formatted-string,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) yt-content-metadata-view-model,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) yt-content-metadata-view-model span {
--yt-core-attributed-string-font-size: clamp(10px, 0.7vw, 12px) !important;
--yt-core-attributed-string-line-height: 1.35 !important;
--yt-endpoint-font-size: clamp(10px, 0.7vw, 12px) !important;
font-family: var(--tm-font) !important;
font-size: clamp(10px, 0.7vw, 12px) !important;
line-height: 1.35 !important;
color: var(--tm-meta-secondary) !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+6) {
grid-column: span var(--tm-home-grid-card-span, 4) !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+6) ytd-thumbnail,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+6) #thumbnail {
border-radius: 12px !important;
overflow: hidden !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+6) #video-title,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+6) yt-formatted-string#video-title {
font-family: var(--tm-font) !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--tm-text-primary) !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+6) ytd-channel-name #text,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+6) #metadata-line {
font-family: var(--tm-font) !important;
color: var(--tm-meta-secondary) !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:hover,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:focus-within {
transform: translateY(-2px) !important;
z-index: 4 !important;
}
@media ${HOME_SIDE_CARDS_STACK_MEDIA} {
html.tm-youtube-layout-plus-home ytd-app[mini-guide-visible]:not([guide-persistent-and-visible]) ytd-rich-grid-renderer,
html.tm-youtube-layout-plus-home ytd-app[mini-guide-visible]:not([guide-persistent-and-visible]) #contents.ytd-rich-grid-renderer {
width: min(100%, var(--tm-home-available-width)) !important;
max-width: var(--tm-home-available-width) !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer {
grid-template-rows: auto !important;
align-items: start !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
overflow-x: clip !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(1) {
grid-column: 1 / 21 !important;
grid-row: auto !important;
align-self: start !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(2),
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(3),
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(4),
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(5) {
grid-column: 1 / 21 !important;
grid-row: auto !important;
align-self: start !important;
height: auto !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) > #content {
position: relative !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: auto !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) ytd-rich-grid-media,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) yt-lockup-view-model,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) .yt-lockup-view-model-wiz,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) yt-lockup-view-model > div,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) ytd-ad-slot-renderer,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) ytd-in-feed-ad-layout-renderer {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: auto !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) ytd-rich-grid-media #dismissible,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) .ytLockupViewModelHost,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) .yt-lockup-view-model-wiz,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) yt-lockup-view-model > div,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) ytd-ad-slot-renderer #dismissible,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) ytd-in-feed-ad-layout-renderer #dismissible,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) ytd-in-feed-ad-layout-renderer > div {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: auto !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) ytd-thumbnail,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) #thumbnail,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) yt-thumbnail-view-model,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) yt-collection-thumbnail-view-model,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) .ytCollectionThumbnailViewModelHost,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) .ytLockupViewModelContentImage,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) .yt-lockup-view-model-wiz__content-image,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) .yt-lockup-view-model-wiz__content,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) ytd-in-feed-ad-layout-renderer #thumbnail {
width: clamp(128px, 22vw, 220px) !important;
min-width: 0 !important;
max-width: 220px !important;
flex: 0 1 clamp(128px, 22vw, 220px) !important;
box-sizing: border-box !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) #details,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) #meta,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) .ytLockupViewModelMetadata,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) .yt-lockup-view-model-wiz__metadata,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) yt-lockup-metadata-view-model,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) ytd-in-feed-ad-layout-renderer #details,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) ytd-in-feed-ad-layout-renderer #meta,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) .ytLockupMetadataViewModelTextContainer,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) .yt-lockup-metadata-view-model-wiz__text-block,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) yt-content-metadata-view-model {
min-width: 0 !important;
max-width: 100% !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
}
@media (max-width: 760px) {
html.tm-youtube-layout-plus-home {
--tm-home-page-gutter: 14px;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer {
padding: 12px var(--tm-home-page-gutter) 32px var(--tm-home-page-gutter) !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(1),
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(2),
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(3),
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(4),
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(5),
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+6) {
grid-column: 1 / 21 !important;
grid-row: auto !important;
}
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) ytd-thumbnail,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) #thumbnail,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) yt-thumbnail-view-model,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) yt-collection-thumbnail-view-model,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) .ytCollectionThumbnailViewModelHost,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) .ytLockupViewModelContentImage,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) .yt-lockup-view-model-wiz__content-image,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) .yt-lockup-view-model-wiz__content,
html.tm-youtube-layout-plus-home #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:nth-of-type(n+2):nth-of-type(-n+5) ytd-in-feed-ad-layout-renderer #thumbnail {
width: clamp(108px, 34vw, 160px) !important;
flex: 0 1 clamp(108px, 34vw, 160px) !important;
}
}
html.tm-youtube-layout-plus-watch,
html.${ROUTE_TRANSITION_CLASS} {
--tm-watch-edge-gutter: clamp(16px, 2.4vw, 40px);
--tm-watch-content-width: min(${MAX_LAYOUT_WIDTH}px, calc(100vw - var(--tm-watch-edge-gutter) - var(--tm-watch-edge-gutter)));
--tm-watch-vertical-content-width: min(760px, var(--tm-watch-content-width));
--tm-watch-vertical-player-width: min(460px, var(--tm-watch-content-width));
}
html.tm-youtube-layout-plus-watch,
html.tm-youtube-layout-plus-watch body,
html.tm-youtube-layout-plus-watch ytd-app,
html.tm-youtube-layout-plus-watch ytd-watch-flexy,
html.tm-youtube-layout-plus-watch ytd-watch-flexy #columns,
html.tm-youtube-layout-plus-watch ytd-watch-flexy #primary,
html.tm-youtube-layout-plus-watch ytd-watch-flexy #primary-inner,
html.tm-youtube-layout-plus-watch ytd-watch-flexy #below {
overflow-x: hidden !important;
overscroll-behavior-x: none !important;
max-width: 100% !important;
}
html:is(.tm-youtube-layout-plus-watch-plain, .tm-youtube-layout-plus-watch-chat)
ytd-watch-flexy #related,
html:is(.tm-youtube-layout-plus-watch-plain, .tm-youtube-layout-plus-watch-chat)
ytd-watch-next-secondary-results-renderer,
html:is(.tm-youtube-layout-plus-watch-plain, .tm-youtube-layout-plus-watch-chat)
ytd-playlist-panel-renderer,
html:is(.tm-youtube-layout-plus-watch-plain, .tm-youtube-layout-plus-watch-chat)
yt-playlist-panel-renderer,
html:is(.tm-youtube-layout-plus-watch-plain, .tm-youtube-layout-plus-watch-chat)
ytd-radio-renderer,
html:is(.tm-youtube-layout-plus-watch-plain, .tm-youtube-layout-plus-watch-chat)
ytd-compact-radio-renderer {
display: none !important;
}
html.${ROUTE_TRANSITION_CLASS} ytd-watch-flexy #related,
html.${ROUTE_TRANSITION_CLASS} ytd-watch-next-secondary-results-renderer,
html.${ROUTE_TRANSITION_CLASS} ytd-playlist-panel-renderer,
html.${ROUTE_TRANSITION_CLASS} yt-playlist-panel-renderer,
html.${ROUTE_TRANSITION_CLASS} ytd-radio-renderer,
html.${ROUTE_TRANSITION_CLASS} ytd-compact-radio-renderer,
html.${ROUTE_TRANSITION_CLASS} ytd-watch-flexy :is(#secondary, #secondary-inner) {
display: none !important;
}
html.${ROUTE_TRANSITION_CLASS} ytd-mini-guide-renderer,
html.${ROUTE_TRANSITION_CLASS} tp-yt-app-drawer#guide {
display: none !important;
}
html.${ROUTE_TRANSITION_CLASS} ytd-page-manager {
margin-left: 0 !important;
width: 100% !important;
}
html.${ROUTE_TRANSITION_CLASS} ytd-watch-flexy :is(
ytd-watch-metadata,
#above-the-fold,
#bottom-row,
#below,
#comments,
#teaser-carousel,
ytd-comments,
ytd-comment-thread-renderer
) {
visibility: hidden !important;
pointer-events: none !important;
}
html:is(.tm-youtube-layout-plus-watch-plain, .tm-youtube-layout-plus-watch-chat-collapsed):not(.${WATCH_PANEL_OPEN_CLASS})
ytd-watch-flexy :is(#secondary, #secondary-inner) {
display: none !important;
}
html:is(.tm-youtube-layout-plus-watch-plain, .tm-youtube-layout-plus-watch-chat-collapsed):not(.${WATCH_PANEL_OPEN_CLASS})
ytd-watch-flexy #primary,
html.${ROUTE_TRANSITION_CLASS} ytd-watch-flexy #primary {
max-width: none !important;
width: var(--tm-watch-content-width) !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
html:is(.tm-youtube-layout-plus-watch-plain, .tm-youtube-layout-plus-watch-chat-collapsed):not(.${WATCH_PANEL_OPEN_CLASS})
ytd-watch-flexy #columns,
html.${ROUTE_TRANSITION_CLASS} ytd-watch-flexy #columns {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
html:is(.tm-youtube-layout-plus-watch-plain, .tm-youtube-layout-plus-watch-chat-collapsed):not(.${WATCH_PANEL_OPEN_CLASS})
ytd-watch-flexy :is(#primary-inner, #above-the-fold, #below, ytd-watch-metadata, #comments),
html.${ROUTE_TRANSITION_CLASS} ytd-watch-flexy :is(#primary-inner, #above-the-fold, #below, ytd-watch-metadata, #comments) {
width: var(--tm-watch-content-width) !important;
max-width: var(--tm-watch-content-width) !important;
min-width: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
html:is(.tm-youtube-layout-plus-watch-plain, .tm-youtube-layout-plus-watch-chat-collapsed):not(.${WATCH_PANEL_OPEN_CLASS})
ytd-watch-flexy :is(#player-theater-container, #player-full-bleed-container, #player-container-outer),
html.${ROUTE_TRANSITION_CLASS} ytd-watch-flexy :is(#player-theater-container, #player-full-bleed-container, #player-container-outer) {
width: var(--tm-watch-content-width) !important;
max-width: var(--tm-watch-content-width) !important;
min-width: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
html:is(.tm-youtube-layout-plus-watch-plain, .tm-youtube-layout-plus-watch-chat-collapsed):not(.${WATCH_PANEL_OPEN_CLASS})
ytd-watch-flexy :is(#player-container-inner, #player-container, #player, #player-api, #movie_player, .html5-video-player),
html.${ROUTE_TRANSITION_CLASS} ytd-watch-flexy :is(#player-container-inner, #player-container, #player, #player-api, #movie_player, .html5-video-player) {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
html.${WATCH_VERTICAL_CLASS}:is(.tm-youtube-layout-plus-watch-plain, .tm-youtube-layout-plus-watch-chat-collapsed):not(.${WATCH_PANEL_OPEN_CLASS})
ytd-watch-flexy :is(#primary, #primary-inner, #above-the-fold, #below, ytd-watch-metadata, #comments),
html.${WATCH_VERTICAL_CLASS}.${ROUTE_TRANSITION_CLASS} ytd-watch-flexy :is(#primary, #primary-inner, #above-the-fold, #below, ytd-watch-metadata, #comments) {
width: var(--tm-watch-vertical-content-width) !important;
max-width: var(--tm-watch-vertical-content-width) !important;
margin-left: auto !important;
margin-right: auto !important;
}
html.${WATCH_VERTICAL_CLASS}:is(.tm-youtube-layout-plus-watch-plain, .tm-youtube-layout-plus-watch-chat-collapsed):not(.${WATCH_PANEL_OPEN_CLASS})
ytd-watch-flexy :is(#player-theater-container, #player-full-bleed-container, #player-container-outer),
html.${WATCH_VERTICAL_CLASS}.${ROUTE_TRANSITION_CLASS} ytd-watch-flexy :is(#player-theater-container, #player-full-bleed-container, #player-container-outer) {
width: var(--tm-watch-vertical-player-width) !important;
max-width: var(--tm-watch-vertical-player-width) !important;
min-width: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
}
html.${ROUTE_TRANSITION_CLASS} ytd-watch-flexy [data-tm-watch-transition-lock="true"] {
position: fixed !important;
top: var(--tm-watch-transition-player-top, auto) !important;
left: var(--tm-watch-transition-player-left, auto) !important;
width: var(--tm-watch-transition-player-width, var(--tm-watch-content-width)) !important;
height: var(--tm-watch-transition-player-height, auto) !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
z-index: 2 !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
/* Hide below-the-fold content until the guttered watch layout is ready
to avoid a visible "stuck-then-resize" jump on Windows / slow first paint. */
html:is(.tm-youtube-layout-plus-watch-plain, .tm-youtube-layout-plus-watch-chat-collapsed):not([${WATCH_READY_ATTR}])
ytd-watch-flexy :is(#below, ytd-watch-metadata, #comments) {
visibility: hidden !important;
}
`;
}
function collapseGuide() {
const app = document.querySelector('ytd-app');
if (app) {
app.removeAttribute('guide-persistent-and-visible');
app.setAttribute('mini-guide-visible', '');
}
const drawer = document.querySelector('tp-yt-app-drawer#guide');
if (drawer) {
drawer.removeAttribute('opened');
drawer.style.width = '';
drawer.style.minWidth = '';
drawer.style.visibility = '';
}
const guideRenderer = document.querySelector('ytd-guide-renderer');
if (guideRenderer) {
guideRenderer.style.display = '';
guideRenderer.style.width = '';
guideRenderer.style.minWidth = '';
}
}
function setLayoutModeClasses(targetClasses) {
const target = new Set(targetClasses);
const root = document.documentElement;
for (const cls of LAYOUT_MODE_CLASSES) {
const shouldHave = target.has(cls);
const hasIt = root.classList.contains(cls);
if (shouldHave && !hasIt) root.classList.add(cls);
else if (!shouldHave && hasIt) root.classList.remove(cls);
}
}
function resetWatchRuntimeState({ clearSizing = true, preserveTransitionLayout = false } = {}) {
const root = document.documentElement;
lastWatchChatExpanded = null;
lastEngagementPanelOpen = null;
lastTheaterMode = null;
lastPlayerSyncKey = '';
root.removeAttribute(WATCH_READY_ATTR);
root.classList.remove(
WATCH_PANEL_OPEN_CLASS,
WATCH_THEATER_CLASS,
'tm-youtube-layout-plus-watch-chat-open',
'tm-youtube-layout-plus-watch-chat-collapsed'
);
if (!preserveTransitionLayout) {
root.classList.remove(WATCH_VERTICAL_CLASS);
}
if (clearSizing) {
root.style.removeProperty('--tm-watch-content-width');
root.style.removeProperty('--tm-watch-vertical-player-width');
clearRouteTransitionPlayerLock();
}
}
function applyHomeLayout() {
const richGrid = document.querySelector('ytd-rich-grid-renderer');
if (!richGrid) {
setLayoutModeClasses([]);
return;
}
setLayoutModeClasses(['tm-youtube-layout-plus-home']);
applyHomeGridColumns();
applyHomeHeroInlineLayout();
if (lastAutoCollapsedHomeUrl !== location.href) {
collapseGuide();
lastAutoCollapsedHomeUrl = location.href;
}
}
function applyHomeHeroInlineLayout() {
const items = Array.from(
document.querySelectorAll('#contents.ytd-rich-grid-renderer > ytd-rich-item-renderer')
);
if (items.length < 5) return;
const stackSideCards = window.matchMedia(HOME_SIDE_CARDS_STACK_MEDIA).matches;
const heroIsMix = isHomeHeroMixCard(items[0]);
items[0].classList.toggle('tm-youtube-layout-plus-hero-mix', heroIsMix);
items[0].style.setProperty('grid-column', stackSideCards ? '1 / 21' : '1 / 13', 'important');
items[0].style.setProperty('grid-row', stackSideCards ? 'auto' : '1 / span 4', 'important');
for (let index = 1; index < 5; index += 1) {
items[index].style.setProperty('grid-column', stackSideCards ? '1 / 21' : '13 / 21', 'important');
items[index].style.setProperty('grid-row', stackSideCards ? 'auto' : String(index), 'important');
}
upgradeHomeHeroThumbnail();
}
function applyWatchLayout() {
const watchFlexy = document.querySelector('ytd-watch-flexy');
if (!watchFlexy) {
setLayoutModeClasses([]);
resetWatchRuntimeState();
return;
}
syncWatchPlayerSize();
attachWatchObservers();
updateWatchEngagementPanelState(watchFlexy);
updateTheaterModeState(watchFlexy);
if (hasWatchSidebarChat(watchFlexy)) {
setLayoutModeClasses([
'tm-youtube-layout-plus-watch',
'tm-youtube-layout-plus-watch-chat',
]);
updateWatchChatPanelState(watchFlexy);
autoCollapseLiveChatPanel(watchFlexy);
return;
}
setLayoutModeClasses([
'tm-youtube-layout-plus-watch',
'tm-youtube-layout-plus-watch-plain',
]);
hideWatchReplayPrompt();
}
function clearHiddenReplayPrompts() {
for (const el of document.querySelectorAll('.' + REPLAY_HIDE_CLASS)) {
el.classList.remove(REPLAY_HIDE_CLASS);
}
}
function hideWatchReplayPrompt() {
const teaserCarousel = document.querySelector('ytd-watch-metadata #teaser-carousel');
if (!teaserCarousel) return;
const teaserText = getWatchTeaserText();
if (hasLiveWatchPrompt(teaserText)) {
teaserCarousel.classList.remove(REPLAY_HIDE_CLASS);
return;
}
const watchFlexy = document.querySelector('ytd-watch-flexy');
if (watchFlexy && hasReplayWatchPrompt(teaserText) && hasWatchSidebarChat(watchFlexy)) {
teaserCarousel.classList.remove(REPLAY_HIDE_CLASS);
return;
}
const replayPrompt = Array.from(
teaserCarousel.querySelectorAll('yt-video-metadata-carousel-view-model')
).find((card) => {
const text = (card.innerText || card.textContent || '').trim();
return /live chat replay/i.test(text)
|| /see what others said about this video while it was live/i.test(text);
});
if (!replayPrompt) {
teaserCarousel.classList.remove(REPLAY_HIDE_CLASS);
return;
}
teaserCarousel.classList.add(REPLAY_HIDE_CLASS);
}
function updateWatchEngagementPanelState(watchFlexy) {
const open = isWatchPage() && hasOpenEngagementPanel(watchFlexy);
document.documentElement.classList.toggle(WATCH_PANEL_OPEN_CLASS, open);
if (lastEngagementPanelOpen !== open) {
lastEngagementPanelOpen = open;
}
}
function updateTheaterModeState(watchFlexy) {
const inTheater = isTheaterModeActive(watchFlexy);
document.documentElement.classList.toggle(WATCH_THEATER_CLASS, inTheater);
if (lastTheaterMode !== inTheater) {
lastTheaterMode = inTheater;
}
}
function updateWatchChatPanelState(watchFlexy) {
const chatFrame = watchFlexy.querySelector('ytd-live-chat-frame#chat');
const openPanelButton = findOpenPanelButton();
const chatVisible = !!chatFrame && isVisibleElement(chatFrame);
const panelExpanded = chatVisible || !!(openPanelButton && openPanelButton.disabled);
document.documentElement.classList.toggle('tm-youtube-layout-plus-watch-chat-open', panelExpanded);
document.documentElement.classList.toggle('tm-youtube-layout-plus-watch-chat-collapsed', !panelExpanded);
if (lastWatchChatExpanded !== panelExpanded) {
lastWatchChatExpanded = panelExpanded;
}
}
function stopWatchChatStateSync() {
if (!watchChatStateTimer) return;
window.clearInterval(watchChatStateTimer);
watchChatStateTimer = null;
}
function startWatchChatStateSync() {
stopWatchChatStateSync();
if (!isWatchPage()) return;
watchChatStateTimer = window.setInterval(() => {
if (!isWatchPage()) {
stopWatchChatStateSync();
return;
}
const watchFlexy = document.querySelector('ytd-watch-flexy');
if (!watchFlexy) return;
updateWatchEngagementPanelState(watchFlexy);
updateTheaterModeState(watchFlexy);
const hasSidebarChat = hasWatchSidebarChat(watchFlexy);
const hasWatchChatClass = document.documentElement.classList.contains('tm-youtube-layout-plus-watch-chat');
if (hasSidebarChat && !hasWatchChatClass) {
scheduleApply();
return;
}
if (!hasSidebarChat || !hasWatchChatClass) return;
updateWatchChatPanelState(watchFlexy);
}, 500);
}
function findOpenPanelButton() {
return Array.from(document.querySelectorAll('button, yt-button-shape button, tp-yt-paper-button')).find(
(button) => /open panel/i.test((button.innerText || button.textContent || '').trim())
) || null;
}
function safeGetIframeDocument(frame) {
try {
return frame?.contentDocument || null;
} catch {
return null;
}
}
function autoCollapseLiveChatPanel(watchFlexy) {
const watchPageKey = getWatchPageKey();
if (lastAutoCollapsedWatchChatKey === watchPageKey) return;
const chatFrameHost = watchFlexy.querySelector('ytd-live-chat-frame#chat');
const openPanelButton = findOpenPanelButton();
if (openPanelButton && !openPanelButton.disabled) {
lastAutoCollapsedWatchChatKey = watchPageKey;
return;
}
if (chatFrameHost?.hasAttribute('collapsed')) {
lastAutoCollapsedWatchChatKey = watchPageKey;
return;
}
const hostToggleButton = chatFrameHost?.querySelector(
'#show-hide-button button, #show-hide-button yt-button-shape button, #show-hide-button tp-yt-paper-button'
);
if (hostToggleButton) {
hostToggleButton.click();
lastAutoCollapsedWatchChatKey = watchPageKey;
window.setTimeout(scheduleApply, 80);
return;
}
const chatFrame = watchFlexy.querySelector(
'ytd-live-chat-frame#chat #chatframe, ytd-live-chat-frame#chat iframe, #chatframe'
);
const chatDoc = safeGetIframeDocument(chatFrame);
if (!chatDoc) return;
const closeButton = Array.from(chatDoc.querySelectorAll('button')).find(
(button) => /close/i.test(button.getAttribute('aria-label') || '')
);
if (!closeButton) return;
closeButton.click();
lastAutoCollapsedWatchChatKey = watchPageKey;
window.setTimeout(scheduleApply, 80);
}
// ---- Watch-page sizing / observers --------------------------------------
//
// Watch pages run in a guttered wide mode when the recommendation sidebar is
// hidden. We keep one CSS variable in sync with the viewport so the player,
// metadata, description and comments use the same width on both macOS and
// Windows, instead of relying on YouTube's platform-dependent column math.
function updateWatchVideoOrientation() {
if (!isWatchPage()) {
document.documentElement.classList.remove(WATCH_VERTICAL_CLASS);
return false;
}
const video = document.querySelector(
'#movie_player video.html5-main-video, .html5-video-player video.html5-main-video, video.html5-main-video'
);
if (!video) {
document.documentElement.classList.remove(WATCH_VERTICAL_CLASS);
return false;
}
if (video.dataset.tmYlpOrientationListener !== '1') {
const resync = () => {
updateWatchVideoOrientation();
syncWatchPlayerSize();
};
video.addEventListener('loadedmetadata', resync, { passive: true });
video.addEventListener('resize', resync, { passive: true });
video.dataset.tmYlpOrientationListener = '1';
}
const width = Number(video.videoWidth) || 0;
const height = Number(video.videoHeight) || 0;
const isVertical = width > 0 && height > 0 && height / width >= 1.12;
document.documentElement.classList.toggle(WATCH_VERTICAL_CLASS, isVertical);
return isVertical;
}
function syncWatchPlayerSize() {
if (!isWatchPage()) {
resetWatchRuntimeState();
return;
}
const isVertical = updateWatchVideoOrientation();
const gutter = Math.min(40, Math.max(16, window.innerWidth * 0.024));
const width = Math.min(
MAX_LAYOUT_WIDTH,
Math.max(320, Math.round(window.innerWidth - gutter * 2))
);
const verticalPlayerWidth = Math.min(460, width);
const key = `${width}:${verticalPlayerWidth}:${isVertical ? 'v' : 'h'}`;
if (lastPlayerSyncKey === key) {
if (!document.documentElement.hasAttribute(WATCH_READY_ATTR)) {
document.documentElement.setAttribute(WATCH_READY_ATTR, '1');
}
return;
}
lastPlayerSyncKey = key;
document.documentElement.style.setProperty('--tm-watch-content-width', `${width}px`);
document.documentElement.style.setProperty('--tm-watch-vertical-player-width', `${verticalPlayerWidth}px`);
document.documentElement.setAttribute(WATCH_READY_ATTR, '1');
}
function attachWatchObservers() {
if (!isWatchPage()) {
detachWatchObservers();
return;
}
const watchFlexy = document.querySelector('ytd-watch-flexy');
if (watchFlexy && watchFlexy !== watchFlexyObservedElement) {
watchFlexyAttrObserver?.disconnect();
watchFlexyAttrObserver = new MutationObserver(() => {
// Attribute changes (theater toggle, live-chat collapse, two-column
// recompute) can move the watch page between layout states. Reacting
// here means the rest of the
// layout state (theater class, chat class, panel-open class) stays
// in sync without waiting for the 500 ms timer.
const flexy = document.querySelector('ytd-watch-flexy');
if (!flexy) return;
syncWatchPlayerSize();
updateTheaterModeState(flexy);
updateWatchEngagementPanelState(flexy);
if (document.documentElement.classList.contains('tm-youtube-layout-plus-watch-chat')) {
updateWatchChatPanelState(flexy);
}
});
try {
watchFlexyAttrObserver.observe(watchFlexy, {
attributes: true,
attributeFilter: [
'theater',
'is-two-columns_',
'live-chat-collapsed',
'is-live',
'is-live-content',
'fullscreen',
'hidden',
],
});
watchFlexyObservedElement = watchFlexy;
} catch {
watchFlexyObservedElement = null;
}
}
}
function detachWatchObservers() {
watchFlexyAttrObserver?.disconnect();
watchFlexyAttrObserver = null;
watchFlexyObservedElement = null;
}
function loadStoredThemeMode() {
try {
const mode = window.localStorage.getItem(THEME_MODE_STORAGE_KEY);
return THEME_MODES.some((item) => item.mode === mode) ? mode : null;
} catch {
return null;
}
}
function normalizeHomeGridColumns(value) {
const columns = Number(value);
return HOME_GRID_COLUMN_OPTIONS.includes(columns) ? columns : 5;
}
function loadStoredHomeGridColumns() {
try {
return normalizeHomeGridColumns(window.localStorage.getItem(HOME_GRID_COLUMNS_STORAGE_KEY));
} catch {
return 5;
}
}
function persistThemeMode(mode) {
if (lastPersistedThemeMode === mode) return;
try {
if (THEME_MODES.some((item) => item.mode === mode)) {
window.localStorage.setItem(THEME_MODE_STORAGE_KEY, mode);
} else {
window.localStorage.removeItem(THEME_MODE_STORAGE_KEY);
}
lastPersistedThemeMode = mode;
} catch {
// Ignore storage failures.
}
}
function persistHomeGridColumns(columns) {
try {
window.localStorage.setItem(
HOME_GRID_COLUMNS_STORAGE_KEY,
String(normalizeHomeGridColumns(columns))
);
} catch {
// Ignore storage failures.
}
}
function applyHomeGridColumns() {
const columns = normalizeHomeGridColumns(currentHomeGridColumns);
document.documentElement.style.setProperty(
'--tm-home-grid-items-per-row',
String(columns)
);
document.documentElement.style.setProperty(
'--tm-home-grid-card-span',
String(HOME_GRID_TRACK_COUNT / columns)
);
}
function delay(ms) {
return new Promise((resolve) => {
window.setTimeout(resolve, ms);
});
}
function getThemeActionName(mode) {
return THEME_MODES.find((item) => item.mode === mode)?.actionName || null;
}
function getThemeModeFromPrefCookie() {
const prefEntries = document.cookie
.split('; ')
.filter((entry) => entry.startsWith('PREF='));
const lastEntry = prefEntries[prefEntries.length - 1];
if (!lastEntry) return null;
try {
const pref = decodeURIComponent(lastEntry.slice(5));
const f6Match = pref.match(/(?:^|&)f6=([0-9a-fA-F]+)/);
if (!f6Match) return null;
const f6 = parseInt(f6Match[1], 16);
if (!Number.isFinite(f6)) return null;
if ((f6 & PREF_F6_LIGHT_BIT) !== 0) return 'light';
if ((f6 & PREF_F6_DARK_BIT) !== 0) return 'dark';
if ((f6 & PREF_F6_PREF_BIT) !== 0) return 'auto';
return null;
} catch {
return null;
}
}
function inferThemeModeFromDocument() {
return document.documentElement.hasAttribute('dark') ? 'dark' : 'light';
}
function getObservedThemeMode() {
return getThemeModeFromPrefCookie() || inferThemeModeFromDocument();
}
function showThemeStatusMessage(message) {
let status = document.getElementById(THEME_STATUS_ID);
if (!status) {
status = document.createElement('div');
status.id = THEME_STATUS_ID;
status.dataset.visible = 'false';
document.body.appendChild(status);
}
status.textContent = message;
status.dataset.visible = 'true';
if (themeStatusHideTimer) window.clearTimeout(themeStatusHideTimer);
themeStatusHideTimer = window.setTimeout(() => {
status.dataset.visible = 'false';
themeStatusHideTimer = null;
}, 2600);
}
function hideThemeStatusMessage() {
const status = document.getElementById(THEME_STATUS_ID);
if (status) status.dataset.visible = 'false';
if (themeStatusHideTimer) {
window.clearTimeout(themeStatusHideTimer);
themeStatusHideTimer = null;
}
}
function isVisibleElement(element) {
if (!element) return false;
if (element.hidden) return false;
const style = window.getComputedStyle(element);
if (style.display === 'none' || style.visibility === 'hidden') return false;
const rect = element.getBoundingClientRect();
return rect.width > 0 && rect.height > 0;
}
function dispatchThemeSignal(mode) {
const actionName = getThemeActionName(mode);
if (!actionName) return false;
const target = document.querySelector('ytd-app') || document.documentElement;
try {
target.dispatchEvent(new CustomEvent('yt-action', {
detail: {
actionName,
args: [],
optionalAction: false,
returnValue: [],
},
bubbles: true,
cancelable: false,
composed: true,
}));
return true;
} catch (error) {
console.debug('YouTube Layout Plus theme dispatch failed:', error);
return false;
}
}
function updateThemeSwitcherUI({ force = false } = {}) {
const switcher = document.getElementById(THEME_SWITCHER_ID);
if (!switcher) return;
if (!pendingThemeMode) {
const observedMode = getObservedThemeMode();
if (observedMode && observedMode !== currentThemeMode) {
currentThemeMode = observedMode;
persistThemeMode(observedMode);
}
} else if (!currentThemeMode) {
currentThemeMode = loadStoredThemeMode() || inferThemeModeFromDocument();
}
const visibleMode = pendingThemeMode || currentThemeMode;
const disabled = themeSwitchInFlight;
if (!force
&& lastRenderedThemeMode === visibleMode
&& lastRenderedThemeDisabled === disabled) {
return;
}
lastRenderedThemeMode = visibleMode;
lastRenderedThemeDisabled = disabled;
const optionButtons = switcher.querySelectorAll('.tm-theme-switch-option[data-mode]');
for (const button of optionButtons) {
const isActive = button.dataset.mode === visibleMode;
button.dataset.active = String(isActive);
button.setAttribute('aria-pressed', String(isActive));
button.disabled = disabled;
}
}
async function verifyThemeMode(mode, { attempts = 10, intervalMs = 120 } = {}) {
const expectedDarkAttr = mode === 'dark';
let lastResult = null;
for (let attempt = 0; attempt < attempts; attempt += 1) {
const cookieMode = getThemeModeFromPrefCookie();
const hasDark = document.documentElement.hasAttribute('dark');
const actualMode = cookieMode || inferThemeModeFromDocument();
const cookieConsistent = cookieMode ? cookieMode === mode : true;
const darkConsistent = mode === 'auto' ? true : hasDark === expectedDarkAttr;
lastResult = {
ok: cookieConsistent && darkConsistent,
actualMode,
cookieMode,
hasDark,
};
if (lastResult.ok) return lastResult;
await delay(intervalMs);
}
return lastResult || {
ok: false,
actualMode: getObservedThemeMode(),
cookieMode: getThemeModeFromPrefCookie(),
hasDark: document.documentElement.hasAttribute('dark'),
};
}
async function setThemeMode(mode) {
if (themeSwitchInFlight) return;
if (!THEME_MODES.some((item) => item.mode === mode)) return;
const previousMode = currentThemeMode
|| loadStoredThemeMode()
|| getThemeModeFromPrefCookie()
|| inferThemeModeFromDocument();
const expectedDarkAttr = mode === 'dark'
|| (mode === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches);
if (previousMode === mode
&& document.documentElement.hasAttribute('dark') === expectedDarkAttr) {
currentThemeMode = mode;
persistThemeMode(mode);
pendingThemeMode = null;
updateThemeSwitcherUI();
return;
}
themeSwitchInFlight = true;
pendingThemeMode = mode;
try {
updateThemeSwitcherUI();
if (!dispatchThemeSignal(mode)) {
currentThemeMode = previousMode;
persistThemeMode(previousMode);
showThemeStatusMessage(`Theme switch failed: unable to dispatch ${mode}.`);
return;
}
currentThemeMode = mode;
persistThemeMode(mode);
updateThemeSwitcherUI();
let verification = await verifyThemeMode(mode);
if (!verification.ok) {
dispatchThemeSignal(mode);
verification = await verifyThemeMode(mode, { attempts: 14, intervalMs: 140 });
}
if (!verification.ok) {
currentThemeMode = verification.actualMode || previousMode;
persistThemeMode(currentThemeMode);
showThemeStatusMessage(
`Theme switch failed: expected ${mode}, actual ${currentThemeMode || 'unknown'}.`
);
return;
}
currentThemeMode = verification.actualMode || mode;
persistThemeMode(currentThemeMode);
hideThemeStatusMessage();
} finally {
themeSwitchInFlight = false;
pendingThemeMode = null;
currentThemeMode = currentThemeMode
|| loadStoredThemeMode()
|| getThemeModeFromPrefCookie()
|| previousMode;
updateThemeSwitcherUI();
}
}
function ensureThemeSwitcher() {
const logoRenderer = document.querySelector('ytd-topbar-logo-renderer');
if (!logoRenderer) return;
let switcher = document.getElementById(THEME_SWITCHER_ID);
let justCreated = false;
if (!switcher) {
const track = document.createElement('div');
track.className = 'tm-theme-switch-track';
track.setAttribute('role', 'group');
track.setAttribute('aria-label', 'Theme switcher');
switcher = document.createElement('div');
switcher.id = THEME_SWITCHER_ID;
for (const item of THEME_MODES) {
const optionButton = document.createElement('button');
optionButton.type = 'button';
optionButton.className = 'tm-theme-switch-option';
optionButton.dataset.mode = item.mode;
optionButton.dataset.active = 'false';
optionButton.textContent = item.label;
optionButton.setAttribute('aria-pressed', 'false');
optionButton.addEventListener('click', async (event) => {
event.preventDefault();
event.stopPropagation();
await setThemeMode(item.mode);
});
track.appendChild(optionButton);
}
switcher.append(track);
logoRenderer.insertAdjacentElement('afterend', switcher);
justCreated = true;
} else if (switcher.previousElementSibling !== logoRenderer) {
logoRenderer.insertAdjacentElement('afterend', switcher);
}
updateThemeSwitcherUI({ force: justCreated });
}
function updateHomeGridSwitcherUI({ force = false } = {}) {
const switcher = document.getElementById(HOME_GRID_SWITCHER_ID);
if (!switcher) return;
const activeColumns = normalizeHomeGridColumns(currentHomeGridColumns);
if (!force && lastRenderedHomeGridColumns === activeColumns) return;
lastRenderedHomeGridColumns = activeColumns;
for (const button of switcher.querySelectorAll('.tm-home-grid-option[data-columns]')) {
const isActive = Number(button.dataset.columns) === activeColumns;
button.dataset.active = String(isActive);
button.setAttribute('aria-pressed', String(isActive));
}
}
function setHomeGridColumns(columns) {
const normalized = normalizeHomeGridColumns(columns);
if (normalized === currentHomeGridColumns) return;
currentHomeGridColumns = normalized;
persistHomeGridColumns(currentHomeGridColumns);
applyHomeGridColumns();
updateHomeGridSwitcherUI();
if (isHomePage()) {
scheduleApply();
}
}
function ensureHomeGridSwitcher() {
const anchor = document.getElementById(THEME_SWITCHER_ID)
|| document.querySelector('ytd-topbar-logo-renderer');
if (!anchor) return;
let switcher = document.getElementById(HOME_GRID_SWITCHER_ID);
let justCreated = false;
if (!switcher) {
switcher = document.createElement('div');
switcher.id = HOME_GRID_SWITCHER_ID;
switcher.setAttribute('role', 'group');
switcher.setAttribute('aria-label', 'Home grid columns');
for (const columns of HOME_GRID_COLUMN_OPTIONS) {
const optionButton = document.createElement('button');
optionButton.type = 'button';
optionButton.className = 'tm-home-grid-option';
optionButton.dataset.columns = String(columns);
optionButton.dataset.active = 'false';
optionButton.textContent = String(columns);
optionButton.setAttribute('aria-pressed', 'false');
optionButton.addEventListener('click', (event) => {
event.preventDefault();
event.stopPropagation();
setHomeGridColumns(columns);
});
switcher.appendChild(optionButton);
}
anchor.insertAdjacentElement('afterend', switcher);
justCreated = true;
} else if (switcher.previousElementSibling !== anchor) {
anchor.insertAdjacentElement('afterend', switcher);
}
updateHomeGridSwitcherUI({ force: justCreated });
}
function applyLayout() {
ensureStyle();
applyHomeGridColumns();
try {
ensureThemeSwitcher();
ensureHomeGridSwitcher();
} catch (error) {
console.error('YouTube Layout Plus switcher insertion failed:', error);
}
if (isHomePage()) {
applyHomeLayout();
return;
}
if (isWatchPage()) {
applyWatchLayout();
return;
}
setLayoutModeClasses([]);
resetWatchRuntimeState();
}
function queueApply() {
if (applyFrame) return;
applyFrame = window.requestAnimationFrame(() => {
applyFrame = 0;
applyLayout();
});
}
function scheduleApply(delay = 0) {
if (delay > 0) {
window.clearTimeout(applyDelayTimer);
applyDelayTimer = window.setTimeout(() => {
applyDelayTimer = null;
queueApply();
}, delay);
return;
}
if (applyDelayTimer) {
window.clearTimeout(applyDelayTimer);
applyDelayTimer = null;
}
queueApply();
}
function stopWatchBootstrap() {
if (!watchBootstrapTimer) return;
window.clearTimeout(watchBootstrapTimer);
watchBootstrapTimer = null;
}
function getWatchPlayerLockElement() {
const selectors = [
'ytd-watch-flexy #player-theater-container',
'ytd-watch-flexy #player-full-bleed-container',
'ytd-watch-flexy #player-container-outer',
'ytd-watch-flexy #player-container',
'ytd-watch-flexy #player',
];
return selectors
.map((selector) => document.querySelector(selector))
.find((element) => {
if (!element) return false;
const rect = element.getBoundingClientRect();
return rect.width >= 240 && rect.height >= 120;
}) || null;
}
function lockRouteTransitionPlayer() {
const player = getWatchPlayerLockElement();
if (!player) return;
const rect = player.getBoundingClientRect();
const rootStyle = document.documentElement.style;
rootStyle.setProperty('--tm-watch-transition-player-top', `${Math.round(rect.top)}px`);
rootStyle.setProperty('--tm-watch-transition-player-left', `${Math.round(rect.left)}px`);
rootStyle.setProperty('--tm-watch-transition-player-width', `${Math.round(rect.width)}px`);
rootStyle.setProperty('--tm-watch-transition-player-height', `${Math.round(rect.height)}px`);
player.dataset.tmWatchTransitionLock = 'true';
}
function clearRouteTransitionPlayerLock() {
const rootStyle = document.documentElement.style;
rootStyle.removeProperty('--tm-watch-transition-player-top');
rootStyle.removeProperty('--tm-watch-transition-player-left');
rootStyle.removeProperty('--tm-watch-transition-player-width');
rootStyle.removeProperty('--tm-watch-transition-player-height');
for (const element of document.querySelectorAll('[data-tm-watch-transition-lock="true"]')) {
delete element.dataset.tmWatchTransitionLock;
}
}
function startRouteTransition() {
if (!isWatchPage() && !document.querySelector('ytd-watch-flexy')) return;
if (routeTransitionTimer) {
window.clearTimeout(routeTransitionTimer);
routeTransitionTimer = null;
}
if (isWatchPage()) {
syncWatchPlayerSize();
lockRouteTransitionPlayer();
}
document.documentElement.classList.add(ROUTE_TRANSITION_CLASS);
}
function finishRouteTransition(delay = 220, attempts = 6) {
if (routeTransitionTimer) {
window.clearTimeout(routeTransitionTimer);
}
routeTransitionTimer = window.setTimeout(() => {
if (!isWatchPage() && document.querySelector('ytd-watch-flexy') && attempts > 0) {
routeTransitionTimer = null;
finishRouteTransition(100, attempts - 1);
return;
}
routeTransitionTimer = null;
document.documentElement.classList.remove(ROUTE_TRANSITION_CLASS);
clearRouteTransitionPlayerLock();
if (!isWatchPage()) {
resetWatchRuntimeState();
}
}, delay);
}
function startWatchBootstrap() {
stopWatchBootstrap();
if (!isWatchPage()) return;
watchBootstrapStep = 0;
const run = () => {
if (!isWatchPage()) {
stopWatchBootstrap();
return;
}
scheduleApply();
attachWatchObservers();
syncWatchPlayerSize();
// Once we have a viewport width and the watch attribute observer is attached,
// stop probing. From here on resize and attribute events keep things in sync.
const measured = !!lastPlayerSyncKey;
const observersReady = !!watchFlexyObservedElement;
if (measured && observersReady) {
stopWatchBootstrap();
return;
}
if (watchBootstrapStep >= WATCH_BOOTSTRAP_DELAYS.length - 1) {
stopWatchBootstrap();
return;
}
watchBootstrapStep += 1;
watchBootstrapTimer = window.setTimeout(run, WATCH_BOOTSTRAP_DELAYS[watchBootstrapStep]);
};
run();
}
function handleRouteChange(force = false) {
const nextUrl = location.href;
if (!force && nextUrl === currentUrl) {
finishRouteTransition();
return;
}
currentUrl = nextUrl;
clearHiddenReplayPrompts();
if (!isHomePage()) {
lastAutoCollapsedHomeUrl = '';
}
if (!isWatchPage()) {
lastAutoCollapsedWatchChatKey = '';
stopWatchBootstrap();
stopWatchChatStateSync();
detachWatchObservers();
resetWatchRuntimeState({
clearSizing: !document.documentElement.classList.contains(ROUTE_TRANSITION_CLASS),
preserveTransitionLayout: document.documentElement.classList.contains(ROUTE_TRANSITION_CLASS),
});
} else {
resetWatchRuntimeState({ clearSizing: false });
detachWatchObservers();
startWatchBootstrap();
startWatchChatStateSync();
}
scheduleApply();
finishRouteTransition();
}
function startObservers() {
if (bodyObserver) return;
bodyObserver = new MutationObserver((mutations) => {
if (isWatchPage()) return;
const hasRelevantMutation = mutations.some((mutation) => {
const target = mutation.target instanceof Element
? mutation.target
: mutation.target?.parentElement;
if (!target) return false;
if (target.closest('#movie_player, .html5-video-player, #chatframe')) {
return false;
}
return true;
});
if (hasRelevantMutation) {
scheduleApply(OBSERVER_APPLY_DEBOUNCE_MS);
}
});
bodyObserver.observe(document.body, {
childList: true,
subtree: true,
});
}
function startNavigationListeners() {
document.addEventListener('yt-navigate-start', startRouteTransition, true);
document.addEventListener('yt-navigate-finish', handleRouteChange, true);
window.addEventListener('popstate', () => {
startRouteTransition();
handleRouteChange();
}, true);
}
function startWindowListeners() {
window.addEventListener('resize', (event) => {
// Only react to real window resize events. Ignore synthetic ones to
// avoid resize storms triggered by our own (or other) scripts.
if (event && event.isTrusted === false) return;
if (resizeTimer) {
window.clearTimeout(resizeTimer);
}
if (resizeFrame) {
window.cancelAnimationFrame(resizeFrame);
}
resizeFrame = window.requestAnimationFrame(() => {
resizeFrame = 0;
});
resizeTimer = window.setTimeout(() => {
resizeTimer = null;
if (isWatchPage()) syncWatchPlayerSize();
scheduleApply();
}, 80);
}, true);
}
function startInteractionListeners() {
document.addEventListener('click', (event) => {
const trigger = event.target instanceof Element
? event.target.closest('button, yt-button-shape button, tp-yt-paper-button')
: null;
if (!trigger) return;
const text = (trigger.innerText || trigger.textContent || '').trim();
if (/open panel/i.test(text) && isWatchPage()) {
lastAutoCollapsedWatchChatKey = getWatchPageKey();
scheduleApply(80);
}
if (isWatchPage()) {
// Engagement panels and the chat panel both animate open/close, so
// poll the width briefly after the click to catch the new size.
window.setTimeout(() => {
const watchFlexy = document.querySelector('ytd-watch-flexy');
if (watchFlexy) {
updateWatchEngagementPanelState(watchFlexy);
updateTheaterModeState(watchFlexy);
}
syncWatchPlayerSize();
}, 120);
window.setTimeout(() => {
if (isWatchPage()) syncWatchPlayerSize();
}, 360);
}
}, true);
document.addEventListener('keyup', (event) => {
if (!isWatchPage()) return;
if (event.key !== 't' && event.key !== 'T') return;
const target = event.target;
if (target instanceof HTMLElement) {
const tag = target.tagName;
if (tag === 'INPUT' || tag === 'TEXTAREA' || target.isContentEditable) return;
}
window.setTimeout(() => {
const watchFlexy = document.querySelector('ytd-watch-flexy');
if (watchFlexy) updateTheaterModeState(watchFlexy);
syncWatchPlayerSize();
}, 80);
}, true);
}
function watchRoute() {
if (routeTimer) return;
routeTimer = window.setInterval(() => {
if (location.href === currentUrl) return;
handleRouteChange();
}, ROUTE_POLL_INTERVAL_MS);
}
function init() {
ensureStyle();
handleRouteChange(true);
startObservers();
startNavigationListeners();
startWindowListeners();
startInteractionListeners();
watchRoute();
}
init();
})();