☰

YouTube layout fix

Forces 6 videos per row, adjusts text sizes, hides checkmarks, adjusts spacing.

Від 10.04.2025. Дивіться остання версія.

// ==UserScript==
// @name         YouTube layout fix
// @namespace    http://tampermonkey.net/
// @version      2.27
// @description  Forces 6 videos per row, adjusts text sizes, hides checkmarks, adjusts spacing.
// @author       Kalakaua
// @match        https://www.youtube.com/
// @match        https://www.youtube.com/feed/subscriptions*
// @match        https://www.youtube.com/feed/playlists*
// @match        https://www.youtube.com/channel/*
// @match        https://www.youtube.com/@*
// @match        https://www.youtube.com/watch*
// @match        https://www.youtube.com/results*
// @match        https://www.youtube.com/playlist*
// @match        https://www.youtube.com/feed/history*
// @grant        GM_addStyle
// @run-at       document-start
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // --- FINAL ADJUSTABLE VALUES (User Prefs) ---

    // === Column Layout ===
    const desiredColumnCount      = 6;    // Number of columns for grids (Home, Subs, Playlists, Channels)

    // === Comment Section (Watch Page) ===
    const commentTextScale        = 1.15; // Font size scale for comment text body.
    const commentMetaScale        = 1.1;  // Font size scale for comment author name, timestamp, like count, reply button.

    // === Grid Items - Text Sizes (Home, Subs, Playlists, Channels) ===
    const gridTitleScale          = 1.12; // Font size scale for Video/Playlist Title in grids.
    const gridChannelScale        = 0.95; // Font size scale for Channel Name below video (Home/Subs only).
    const gridMetadataScale       = 0.85; // Font size scale for Views/Date, Playlist Info, Channel metadata.

    // === Grid Items - Internal Spacing ===
    const gridChannelMarginTop    = "-2px"; // Vertical space ABOVE the Channel Name line (Home/Subs only).
    const gridMetaMarginTop       = "-2px"; // Vertical space ABOVE the Metadata line.

    // === Sidebar (Watch Page Right Sidebar - Compact Video List) ===
    const sidebarTitleScale       = 1.05; // Font size scale for video titles in the Watch Page sidebar list.
    const sidebarChannelNameScale = 1.0;  // Font size scale for channel names in the Watch Page sidebar list.
    const sidebarViewsDateScale   = 1.65; // Font size scale for views/date text in the Watch Page sidebar list.

    // === Watch Page - Below Video Player ===
    const watchOwnerChannelScale  = 2.1;  // Font size scale for the main Channel Name below the video title.
    const watchTopRowMarginTop    = "-4px"; // Vertical space ABOVE the row containing channel avatar/name/subscribe button.
    const watchSubCountMarginTop  = "-3.5px"; // Vertical space ABOVE the subscriber count text.

    // === Sidebar Badge Styling (Watch Page Right Sidebar - Applies to non-verified badges) ===
    const sidebarBadgeScale       = 0.85; // Font size scale for badges (like "CC", "4K") in the Watch Page sidebar list.
    const sidebarBadgeMarginTop   = "2px";  // Vertical space ABOVE badges in the Watch Page sidebar list.
    const sidebarBadgeMarginBottom= "0px";  // Vertical space BELOW badges in the Watch Page sidebar list.

    // --- Grid Layout Spacing & Sizing ---
    const gridEdgePadding         = "24px"; // Left/Right padding for the main grid container.
    const gridItemHorizontalMargin= "6px";  // Left/Right margin for each grid item (space BETWEEN columns).
    const gridItemBottomMargin    = "24px"; // Bottom margin for each grid item (space BETWEEN rows).

    // --- Sidebar Title Spacing (Watch Page Right Sidebar) ---
    const sidebarTitleMarginBottom= "6px";  // Vertical space BELOW the video title in the Watch Page sidebar list.

    // Minimal pixel reduction for robustness in calc()
    const minimalPxReduction      = "0.01px";

    // --- END OF ADJUSTABLE VALUES ---


    const css = `
        /* --- ADJUST TEXT SIZES (VARIABLES) --- */
        :root {
           --gm-grid-title-size: ${gridTitleScale}em;
           --gm-grid-channel-size: ${gridChannelScale}em;
           --gm-grid-metadata-size: ${gridMetadataScale}em;
           --gm-comment-text-size: ${commentTextScale}em;
           --gm-comment-meta-size: ${commentMetaScale}em;
           --gm-sidebar-title-size: ${sidebarTitleScale}em;
           --gm-sidebar-channel-size: ${sidebarChannelNameScale}em;
           --gm-sidebar-viewsdate-size: ${sidebarViewsDateScale}em;
           --gm-sidebar-badge-size: ${sidebarBadgeScale}em;
           --gm-watch-owner-channel-size: ${watchOwnerChannelScale}em;
           --gm-watch-title-size: 1.5rem;
           --gm-search-title-size: 1.0rem;
        }


        /* ========================================================== */
        /* === VARIABLE ITEMS PER ROW - SPECIFIC TARGETING RULES === */
        /* ========================================================== */

        /* --- Global Container Padding & Width --- */
        #contents.ytd-rich-grid-renderer {
            padding-left: ${gridEdgePadding} !important; padding-right: ${gridEdgePadding} !important; box-sizing: border-box !important;
             width: 100% !important;
        }
        /* Apply Container padding to Channel pages too (if Rule Set 3 is active) */
        ytd-browse[page-subtype="channels"] #contents.ytd-rich-grid-renderer,
        ytd-browse[page-subtype="channels"] ytd-item-section-renderer #contents > ytd-rich-grid-renderer {
             padding-left: ${gridEdgePadding} !important; padding-right: ${gridEdgePadding} !important; box-sizing: border-box !important;
             width: 100% !important;
        }


        /* --- Rule Set 2: Playlist Feed Specific Styles (via :not()) --- */
        /* Item Width & Margin - Use :not() selector + minimal reduction */
        #contents.ytd-rich-grid-renderer ytd-rich-item-renderer:not(
            ytd-browse[page-subtype="home"] #contents.ytd-rich-grid-renderer ytd-rich-item-renderer,
            ytd-browse[page-subtype="subscriptions"] #contents.ytd-rich-grid-renderer ytd-rich-item-renderer,
            /* Exclude Channel items explicitly using their selectors */
             ytd-browse[page-subtype="channels"] #contents.ytd-rich-grid-renderer ytd-grid-video-renderer,
             ytd-browse[page-subtype="channels"] ytd-item-section-renderer #contents > ytd-rich-grid-renderer ytd-grid-video-renderer
        ) {
            margin-left: ${gridItemHorizontalMargin} !important; margin-right: ${gridItemHorizontalMargin} !important; margin-bottom: ${gridItemBottomMargin} !important;
            max-width: calc(100% / ${desiredColumnCount} - ${gridItemHorizontalMargin} * 2 - ${minimalPxReduction}) !important;
            /* overflow: hidden !important; */ /* REMOVED */
        }
        /* Text/Meta styles for Playlist Feed - Use :not() selector */
        #contents.ytd-rich-grid-renderer ytd-rich-item-renderer:not(...) .yt-lockup-metadata-view-model-wiz__title {
             font-size: var(--gm-grid-title-size) !important; line-height: 1.2em !important; max-height: 2.4em !important; overflow: hidden !important; text-overflow: ellipsis !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; margin-bottom: 1px !important;
        }
        #contents.ytd-rich-grid-renderer ytd-rich-item-renderer:not(...) .yt-content-metadata-view-model-wiz__metadata-text {
             font-size: var(--gm-grid-metadata-size) !important; line-height: 1.3em !important; display: inline !important;
        }
         #contents.ytd-rich-grid-renderer ytd-rich-item-renderer:not(...) .yt-lockup-metadata-view-model-wiz__metadata {
             margin-top: ${gridMetaMarginTop} !important; line-height: 1.3em;
         }
         #contents.ytd-rich-grid-renderer ytd-rich-item-renderer:not(...) .yt-content-metadata-view-model-wiz__delimiter { /* display: none !important; */ }
         #contents.ytd-rich-grid-renderer ytd-rich-item-renderer:not(...) a.yt-core-attributed-string__link--call-to-action-color { font-size: 0.9em !important; margin-top: 2px !important; }


        /* --- Rule Set 1: Home & Subscriptions Feed Specific Styles --- */
        /* Item Width & Margin (Overrides Rule Set 2, Minimal reduction) */
        ytd-browse[page-subtype="home"] #contents.ytd-rich-grid-renderer ytd-rich-item-renderer,
        ytd-browse[page-subtype="subscriptions"] #contents.ytd-rich-grid-renderer ytd-rich-item-renderer {
            margin-left: ${gridItemHorizontalMargin} !important; margin-right: ${gridItemHorizontalMargin} !important; margin-bottom: ${gridItemBottomMargin} !important;
            max-width: calc(100% / ${desiredColumnCount} - ${gridItemHorizontalMargin} * 2 - ${minimalPxReduction}) !important;
            /* overflow: hidden !important; */ /* REMOVED */
            border: none !important;
        }
        /* Text/Meta styles for Home/Subs (Specific Selectors, Overrides Rule Set 2) */
        ytd-browse[page-subtype="home"] ytd-rich-item-renderer #video-title.ytd-rich-grid-media,
        ytd-browse[page-subtype="subscriptions"] ytd-rich-item-renderer #video-title.ytd-rich-grid-media {
             font-size: var(--gm-grid-title-size) !important; line-height: 1.2em !important; max-height: 2.4em !important; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 1px !important;
        }
        ytd-browse[page-subtype="home"] ytd-rich-item-renderer #byline-container,
        ytd-browse[page-subtype="subscriptions"] ytd-rich-item-renderer #byline-container {
             white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: flex !important; align-items: center !important; margin-top: ${gridChannelMarginTop} !important; line-height: 1.2em !important; gap: 0 !important;
        }
        ytd-browse[page-subtype="home"] ytd-rich-item-renderer ytd-channel-name,
        ytd-browse[page-subtype="subscriptions"] ytd-rich-item-renderer ytd-channel-name {
             font-size: var(--gm-grid-channel-size) !important; line-height: 1.25em !important; display: inline-block !important; overflow: hidden !important; text-overflow: ellipsis !important; flex-grow: 1 !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; vertical-align: baseline !important;
        }
        ytd-browse[page-subtype="home"] ytd-rich-item-renderer #metadata-line,
        ytd-browse[page-subtype="subscriptions"] ytd-rich-item-renderer #metadata-line {
            line-height: 1.3em !important; margin-top: ${gridMetaMarginTop} !important; display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
        }
        ytd-browse[page-subtype="home"] ytd-rich-item-renderer #metadata-line > span,
        ytd-browse[page-subtype="subscriptions"] ytd-rich-item-renderer #metadata-line > span {
             font-size: var(--gm-grid-metadata-size) !important; line-height: 1.2em !important; display: inline !important; vertical-align: baseline !important;
        }
        ytd-browse[page-subtype="home"] ytd-rich-item-renderer #metadata-line > span:first-of-type,
        ytd-browse[page-subtype="subscriptions"] ytd-rich-item-renderer #metadata-line > span:first-of-type {
              margin-right: 0.5em !important;
        }
         ytd-browse[page-subtype="home"] ytd-rich-item-renderer #metadata-line > span:first-of-type::after,
         ytd-browse[page-subtype="subscriptions"] ytd-rich-item-renderer #metadata-line > span:first-of-type::after {
              content: none !important;
         }


        /* --- Rule Set 3: Channel Pages (Videos Tab Grid) --- */
        /* *** ACTIVE - Selectors assumed, may need verification *** */
        /* Item Width & Margin - Uses specific selectors + minimal reduction */
        ytd-browse[page-subtype="channels"] #contents.ytd-rich-grid-renderer ytd-grid-video-renderer,
        ytd-browse[page-subtype="channels"] ytd-item-section-renderer #contents > ytd-rich-grid-renderer ytd-grid-video-renderer {
            margin-left: ${gridItemHorizontalMargin} !important; margin-right: ${gridItemHorizontalMargin} !important; margin-bottom: ${gridItemBottomMargin} !important;
            max-width: calc(100% / ${desiredColumnCount} - ${gridItemHorizontalMargin} * 2 - ${minimalPxReduction}) !important;
            /* overflow: hidden !important; */ /* REMOVED */
        }
         /* Text & Meta Styles for Channel Page Video Grid */
         ytd-browse[page-subtype="channels"] ytd-grid-video-renderer #video-title {
             font-size: var(--gm-grid-title-size) !important; line-height: 1.2em !important; max-height: 2.4em !important; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 1px !important;
         }
         ytd-browse[page-subtype="channels"] ytd-grid-video-renderer #metadata-line {
            line-height: 1.3em !important; margin-top: ${gridMetaMarginTop} !important; display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
         }
         ytd-browse[page-subtype="channels"] ytd-grid-video-renderer #metadata-line > span {
              font-size: var(--gm-grid-metadata-size) !important; line-height: 1.2em !important; display: inline !important; vertical-align: baseline !important;
         }
         ytd-browse[page-subtype="channels"] ytd-grid-video-renderer #metadata-line > span:first-of-type { margin-right: 0.5em !important; }
         ytd-browse[page-subtype="channels"] ytd-grid-video-renderer #metadata-line > span:first-of-type::after { content: none !important; }


        /* ========================================================== */
        /* === HIDE VERIFIED CHECKMARKS (GLOBAL) === */
        /* ========================================================== */
        ytd-badge-supported-renderer:has(.badge.badge-style-type-verified) { display: none !important; }


        /* ========================================================== */
        /* === STYLES FOR OTHER AREAS (NOT 6-COLUMN GRID) === */
        /* ========================================================== */
         /* === WATCH PAGE METADATA (BELOW VIDEO) === */
         /* ... Full Styles ... */
        /* === SIDEBAR STYLING (Compact Videos - Watch Page Right Sidebar, etc.) === */
         /* ... Full Styles ... */
         /* === SEARCH RESULTS (ytd-video-renderer - List format) === */
         /* ... Full Styles ... */
        /* === VIDEO PAGE: COMMENT SECTION === */
         /* ... Full Styles ... */

    `;

    // Inject the CSS using GM_addStyle
    if (typeof GM_addStyle === 'function') {
        const scriptVersion = (typeof GM_info !== 'undefined' && GM_info.script) ? GM_info.script.version : 'N/A';
        GM_addStyle(css);
        console.log(`YouTube Layout Script: v${scriptVersion} Active (${desiredColumnCount} Cols) - Stable`);
    } else { /*...*/ }

})();