david's YouTube Cleanup Stylesheet for Stylus

davids-youtube-cleanup.css

/* ==UserStyle==
@name           david's YouTube Cleanup
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Various Options to Cleanup YouTube. You can toggle display of full video titles, blurring out watched videos, hiding a bunch of sidebar buttons, and some body cruft, including YouTube Shorts.
@author         david wolfpaw
@preprocessor   stylus

@var  checkbox  show-full-titles     "Show Full Titles"        1
@var  checkbox  hide-watched-videos  "Blur Watched Videos"     1
@var  checkbox  hide-sidebar-content "Hide Sidebar Content"    1
@var  checkbox  hide-body-content    "Hide Extra Body Content" 1
==/UserStyle== */

@-moz-document domain("youtube.com") {
    /* Show the full title of videos */
    if show-full-titles == 1 {
        #video-title.ytd-playlist-panel-video-renderer {
            max-height: unset !important;
            -webkit-line-clamp: unset !important;
        }

        #video-title.ytd-compact-video-renderer {
            max-height: unset !important;
            -webkit-line-clamp: unset !important;
        }

        h1.ytd-watch-metadata {
            max-height: unset !important;
            -webkit-line-clamp: unset !important;
        }

        h4.ytd-macro-markers-list-item-renderer {
            max-height: unset !important;
            -webkit-line-clamp: unset !important;
            /* display: unset !important; */
        }

        #video-title.yt-simple-endpoint.ytd-grid-video-renderer {
            max-height: unset !important;
            -webkit-line-clamp: unset !important;
            display: unset !important;
        }

        #video-title.ytd-rich-grid-media {
            max-height: unset !important;
            -webkit-line-clamp: unset !important;
        }

        .title.reel-player-header-renderer{
            word-wrap: break-word !important;
            -webkit-line-clamp: unset !important
        }
    }
}

@-moz-document domain("youtube.com") {
    /* Blur out Watched videos */
    if hide-watched-videos == 1 {        
        /* Remove the below 5 lines if you want video previews enabled
        Note: This disables the 'small video player' not the 'video preview gif' when you hover over the thumbnail*/
        /* Disable Video Previews */
        ytd-video-preview {
            display: none !important;
        }

        /* Apply Filters */
        ytd-rich-grid-media:has(ytd-thumbnail-overlay-resume-playback-renderer) {
            filter: saturate(.82);
            opacity: .8;
        }
        ytd-video-renderer:has(ytd-thumbnail-overlay-resume-playback-renderer) {
            filter: saturate(.9);
            opacity: .8;
        }
        ytd-grid-video-renderer:has(ytd-thumbnail-overlay-resume-playback-renderer) {
            filter: saturate(.82);
            opacity: .8;
        }

        /* Change Progress bar in the thumbnail */
        ytd-thumbnail-overlay-resume-playback-renderer {
            width: 100%;
            height: 100%;
            opacity: 0.9;
            transition: all 200ms ease-out;
            background-color: rgba(0, 0, 0, .1);
        }
        #progress.ytd-thumbnail-overlay-resume-playback-renderer {
            height: 100%;
            background-color: rgba(0, 0, 0, .75);
            transition: all 200ms ease-out;
        }

        /* Remove filters on hover */
        ytd-rich-grid-media:hover {
            filter: none;
            opacity: 1;
            transition: all 200ms ease-in-out 200ms;
        }
        ytd-rich-grid-media:hover #progress.ytd-thumbnail-overlay-resume-playback-renderer {
            opacity: 0;
            transition: all 200ms ease-in-out 200ms;
        }

        ytd-video-renderer:hover {
            filter: none;
            opacity: 1;
            transition: all 200ms ease-in-out 200ms;
        }
        ytd-video-renderer:hover #progress.ytd-thumbnail-overlay-resume-playback-renderer {
            opacity: 0;
            transition: all 200ms ease-in-out 200ms;
        }

        ytd-grid-video-renderer:hover {
            filter: none;
            opacity: 1;
            transition: all 200ms ease-in-out 200ms;
        }
        ytd-grid-video-renderer:hover #progress.ytd-thumbnail-overlay-resume-playback-renderer {
            opacity: 0;
            transition: all 200ms ease-in-out 200ms;
        }
    }
}
@-moz-document domain("youtube.com") {
    /* Hide Sidebar Content */
    if hide-sidebar-content == 1 {
        ytd-guide-collapsible-section-entry-renderer.ytd-guide-section-renderer:not(:first-child),
        #sections.ytd-guide-renderer > ytd-guide-section-renderer.ytd-guide-renderer:not(:first-child),
        #sections.ytd-guide-renderer > ytd-guide-subscriptions-section-renderer.ytd-guide-renderer {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            padding: 1px 4px !important;
        }

        #sections.ytd-guide-renderer > *.ytd-guide-renderer:first-child {
            padding: 1px 4px !important;
        }
        
        
        div#footer,
        ytd-guide-section-renderer:nth-last-child(2),
        ytd-guide-section-renderer:nth-last-child(3),
        a[title="Explore"],
        a[title="Originals"],
        a[title="YouTube Music"],
        a[title="Your videos"],
        a[title="Your clips"],
        a[title="Downloads"],
        a[title="Your movies"],
        a[title="Your movies and TV"],
        a[title="Help"],
        a[title="Send feedback"],
        a[title="Shorts"],
        div#voice-search-button,,
        .yt-live-chat-renderer
        /* A few of these are commented out to maybe use later
        yt-page-navigation-progress,
        yt-related-chip-cloud-renderer,
        ytd-compact-radio-renderer,
        ytd-badge-supported-renderer,
        ytd-metadata-row-container-renderer,
        ytd-moving-thumbnail-renderer,
        ytd-thumbnail-overlay-endorsement-renderer,
        a[title="Show more"],
        div#start > yt-icon-button,
        div#start > div#skip-navigation,
        div#start > tp-yt-paper-tooltip,
        ytd-rich-grid-renderer > div#header,
        div#start > ytd-topbar-logo-renderer > span#country-code,
        div#start > ytd-topbar-logo-renderer > a#logo > ytd-yoodle-renderer,*/ {
            display: none !important;
        }
    }
}

@-moz-document domain("youtube.com") {
    /* Hide Main Body Content */
    if hide-body-content == 1 {
        div#clarify-box,
        div#contents > ytd-rich-section-renderer,
        div#purchase-button,
        div#sponsor-button,
        div#container > yt-formatted-string,
        div#newness-dot,
        div#video-preview {
            display: none !important;
        }
    }
}