youtube.userstyles.css

youtube.userstyles.css

/* ==UserStyle==
@name           Undistracted Youtube
@namespace      userstyles.world
@version        0.0.5
@description    Undistracted Youtube
@author         Abhinav K
@preprocessor		stylus


@var checkbox checkbox-shorts "Hide Shorts" 1
@var checkbox checkbox-sidebar-discovery "Hide Sidebar: Discovery" 1
@var checkbox checkbox-video-recommended "Hide Video: Recommended" 0
@var checkbox checkbox-disable-inline-playback "Disable Inline Playback" 1
@var checkbox hide-ad-badge 'Hide "Includes paid promotion" badge' 1
@var checkbox hide-premium-block 'Hide block "Premium"' 1
@var checkbox hide-chat 'Hide block "Chat"' 1
@var number items-per-row 'Thumbnails per row' [5, 1, 10]
@var checkbox sloppy-sidebar 'Improve watch next sidebar' 1
@var checkbox no-end-cards "No end cards (unless hovering)" 0


==/UserStyle== */
@-moz-document domain('youtube.com') {

    /** 
		This has inspiration from many existing userstyles. 
	*/
    /* yt-grid thumbnail margins */
    .ytd-rich-grid-renderer {
        --ytd-rich-grid-items-per-row: items-per-row !important;
    }


    if hide-ad-badge {

        /*ytm-paid-content-overlay-renderer.ytmPaidContentOverlayHost,*/
        .ytmPaidContentOverlayHost {
            display: none !important;
        }

        #offer-module {
            display: none;
        }
    }

    if hide-premium-block {
        ytd-rich-section-renderer {
            display: none !important;
        }
    }

    if hide-chat {

        #chat,
        #chat-container,
        #teaser-carousel,
        ytd-live-chat-frame,
        #panels-full-bleed-container,
        panels-full-bleed-container {
            display: none !important;
        }
    }
    
    if checkbox-shorts {

        /* remove shorts, breaking news, you might like, etc */
        /* for when the name "shorts" isn't used **NB: if you use blocktube, then keep these commented. */
        /* enable below line if you are not using blocktube */
        /* #sections .ytd-guide-renderer:first-child ytd-guide-entry-renderer:nth-child(2), */
        /* .style-scope .ytd-mini-guide-renderer:nth-child(2), */
        a[title="Shorts"],
        [page-subtype='home'] ytd-rich-shelf-renderer[is-shorts],
        ytd-reel-shelf-renderer,
        ytd-rich-item-renderer:has(a[href*="/shorts/"]) 
        {
            display: none !important;
        }

        /* BlockTube is much better addon but this will work most of the time. */
    }
    if checkbox-sidebar-discovery {
        #sections {
            ytd-guide-section-renderer:nth-child(3),
            ytd-guide-section-renderer:nth-child(4),
            ytd-guide-section-renderer:nth-child(5),
            ytd-guide-section-renderer:nth-child(6),
            ytd-guide-signin-promo-renderer {
                display: none !important;
            }
        }

        #footer.ytd-guide-renderer {
            display: none !important;
        }
    }

    if checkbox-disable-inline-playback {

        ytd-video-preview,
        ytd-moving-thumbnail-renderer,
        .ytAnimatedThumbnailOverlayViewModelHost {
            display: none;
        }
    }

    if checkbox-video-recommended {
        #secondary-inner {
            display: none !important;
        }

        :not(.ytp-mweb-player) .ytp-endscreen-paginate {

            .ytp-endscreen-next,
            .ytp-endscreen-previous {
                display: none;
            }
        }

        .ytp-endscreen-content {
            display: none;
        }
    }

    /* Hide channel in play next section */
    ytd-watch-next-secondary-results-renderer ytd-channel-renderer {
        display: none
    }


    /*search thumbnail size*/
    ytd-video-renderer[use-search-ui] ytd-thumbnail.ytd-video-renderer {
        max-width: 350px !important;
    }


    /* Hide youtube Create button. */
    button[aria-label="Create"] {
        display: none !important;
    }

    /* Fix YouTube's sloppy watch page sidebar layout */
    if sloppy-sidebar {
        #secondary .ytd-watch-next-secondary-results-renderer {
            a.yt-lockup-view-model__content-image[style] {
                width: 50% !important;
            }

            .yt-lockup-metadata-view-model__title {
                max-height: 8rem !important;
                -webkit-line-clamp: 4 !important;
            }
        }

        ytd-watch-flexy {
            --ytd-watch-flexy-sidebar-width: calc(min(45rem, 25vw)) !important;
        }
    }
    
    /* no end cards unless hover */
   .ytp-autohide .ytp-ce-element.ytp-ce-element-show {
      opacity: 0 if no-end-cards;
   }
    
    
}

User style is located at https://userstyles.world/style/22020