youtube-style.user.css

/* ==UserStyle==
@name           Undo Bad Youtube UI Update
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Restore youtube style to mostly what it was before the October 2022 update
@author         Bowserinator
@preprocessor   less

@var checkbox DislikeRatioColors "Red/green coloring for 'Return Youtube Dislike's' dislike ratio bar" 1
@var checkbox DenseGrid "Smaller thumbnails and more items on homepage / channel video grid" 1
@var checkbox AlwaysShowEndCardTitle "Always show titles (without needing to hover) in the video end grid" 1
@var checkbox RemoveButtonLabel "Remove labels on buttons below video" 1
@var checkbox LargerThumbnails "Enable for larger thumbnails (for smaller screens)" 0
@var checkbox DescBugFix "Enable if you see 2 description boxes" 0
@var number   ButtonBorderRadius "Border radius for buttons (px)" [2, 0, 32, 'px']
@var number   ChipBorderRadius "Border radius for chips and bubbles (px)" [4, 0, 32, 1, 'px']
@var number   NormalBorderRadius "Border radius for most things (px)" [0, 0, 32, 1, 'px']
==/UserStyle== */

@-moz-document url-prefix("https://www.youtube.com/") {
    /* Better descriptions and titles */
    
    /*
     * Denser grid
     * Decreases padding for home page thumbnails as well as
     * show more thumbnails per row, may have slight visual bugs
     * when thumbnails are loading
     */
    & when (@DenseGrid = 1) {
        #contents.ytd-rich-grid-renderer {
            margin: 10px;
            --ytd-rich-grid-item-margin: 10px !important;
        }
        ytd-rich-item-renderer {
            margin-bottom: 20px !important;
        }
        #contents > ytd-rich-grid-row,
        #contents > ytd-rich-grid-row > #contents {
            display: contents;
        }
    }

    /* Regular small thumbnails */
    & when (@LargerThumbnails = 0) {
        /* Playlist thumbnails smaller */
        ytd-playlist-video-renderer[amsterdam-post-mvp] ytd-thumbnail.ytd-playlist-video-renderer {
            width: 130px !important;
            height: 76px !important;
        }
        
        /*
         * Denser grid
         * Decreases padding for home page thumbnails as well as
         * show more thumbnails per row, may have slight visual bugs
         * when thumbnails are loading
         */
        & when (@DenseGrid = 1) {
            @media (min-width: 1100px) and (max-width: 2100px) {
                #contents.ytd-rich-grid-renderer {
                    --ytd-rich-grid-items-per-row: 5 !important;
                }
            }
            @media (min-width: 800px) and (max-width: 1100px) {
                #contents.ytd-rich-grid-renderer {
                    --ytd-rich-grid-items-per-row: 4 !important;
                }
            }
            @media (min-width: 2100px) {
                #contents.ytd-rich-grid-renderer {
                    --ytd-rich-grid-items-per-row: 6 !important;
                }
            }
        }
    }
    
    /* For smaller screens / people who like larger thumbnails */
    & when (@LargerThumbnails = 1) {
        /*
         * Denser grid
         * Decreases padding for home page thumbnails as well as
         * show more thumbnails per row, may have slight visual bugs
         * when thumbnails are loading
         */
        & when (@DenseGrid = 1) {
            @media (min-width: 1300px) and (max-width: 2100px) {
                #contents.ytd-rich-grid-renderer {
                    --ytd-rich-grid-items-per-row: 4 !important;
                }
            }
            @media (min-width: 800px) and (max-width: 1300px) {
                #contents.ytd-rich-grid-renderer {
                    --ytd-rich-grid-items-per-row: 3 !important;
                }
            }
            @media (min-width: 2100px) {
                #contents.ytd-rich-grid-renderer {
                    --ytd-rich-grid-items-per-row: 5 !important;
                }
            }
        }
    }

    /* Restore old playlist title style */
    ytd-playlist-panel-renderer[modern-panels]:not([hide-header-text]) .title.ytd-playlist-panel-renderer,
    ytd-engagement-panel-title-header-renderer[modern-panels] #title-text.ytd-engagement-panel-title-header-renderer {
        font-family: "Roboto","Arial",sans-serif !important;
        font-size: 1.4rem !important;
        line-height: 2rem !important;
        font-weight: 500 !important;
    }

    /* Restore video title style */
    h1.ytd-watch-metadata {
        font-family: "Roboto","Arial",sans-serif !important;
        font-size: 1.8rem !important;
        line-height: 2.6rem !important;
        font-weight: 400 !important;
        max-height: 5.2rem !important;
    }

    /* Consistent video left width */
    @media (min-width: 1100px) {
        #primary.ytd-watch-flexy {
            max-width: calc(100% - 400px) !important;
        }
    }
    
    /* Move video buttons to top */
    #top-row.ytd-watch-metadata {
        flex-direction: column-reverse !important;
        margin-top: -4px !important;
    }
    
    /* Align description box */
    ytd-text-inline-expander {
        margin-left: 50px !important;
        max-width: 615px !important;
    }
    
    /* Comment smaller */
    ytd-comments {
        max-width: 815px !important;
    }
    
    /* All links are blue */
    a.yt-simple-endpoint.yt-formatted-string {
        color: var(--yt-spec-call-to-action);
    }

    /* Move Info box */
    #info-container.ytd-watch-metadata {
        position: absolute !important;
        visibility: visible !important;
        & when (@DescBugFix = 1) { top: -74px !important; }
        & when (@DescBugFix = 0) { top: -120px !important; }
        left: 0 !important;
        font-size: 1.4rem !important;
        line-height: 2rem !important;
        font-weight: 400 !important;
        color: var(--yt-spec-text-secondary) !important;
        display: block !important;
        max-width: calc(100% - 400px);
        -webkit-mask-image: none !important;
    }
    
    ytd-metadata-row-container-renderer.ytd-watch-metadata {
        max-width: calc(100% - 300px) !important;
        margin-left: 52px !important;
    }

    /* Proper margin for buttons so view count is height offset correctly */
    ytd-watch-metadata #actions {
        margin-top: 12px;
    }
    ytd-watch-metadata.ytd-watch-flexy {
        margin-bottom: 0px !important;
    }
    
    #info-container.ytd-watch-metadata span.bold.style-scope.yt-formatted-string {
        font-weight: 400 !important;
    }

    /* Remove description flash when expanding */
    yt-interaction {
        display: none !important;
    }

    /* Remove description background color */
     #description.ytd-watch-metadata {
        background-color: transparent !important;
    }

    /* Show more button always on new row and blue */
    #expand.ytd-text-inline-expander {
        /* Original was all title case and faded gray */
        position: relative !important;
        left: 0 !important;
    }

    /* Show more and less */
    .button.ytd-text-inline-expander,
    #expand.ytd-text-inline-expander {
        text-transform: uppercase !important;
        font-weight: normal !important;
        color: var(--yt-spec-text-secondary) !important;
        font-size: 1.2rem !important;
        margin-top: 8px !important;
    }

    /* Dislike ratio bar placement (Return youtube dislike) */
    .ryd-tooltip {
        left: 0px !important;
        top: 35px !important;
    }

    & when (@DislikeRatioColors = 1) {
        /* Red green coloring */
        #ryd-bar {
            background: #81c784 !important;
        }
        #ryd-bar-container {
            background: #ef5350 !important;
        }
    }

    /* Increase gap between video and title as was before */
    ytd-watch-metadata.ytd-watch-flexy {
        margin-top: 20px !important;
    }
    
    /* Hide weird extra content in new update in desc */
    div[slot="extra-content"].ytd-watch-metadata {
        display: none;
    }


    
    /* Buttons and UI fixes */

    /* Subscribe button */
    #owner.ytd-watch-metadata .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled,
    #owner.ytd-watch-metadata .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal,
    yt-button-shape.ytd-subscribe-button-renderer > .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled,
    yt-button-shape.ytd-subscribe-button-renderer > .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal,
    #subscribe-button .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled,
    #subscribe-button .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {
        background-color: var(--yt-spec-brand-button-background) !important;
        border-radius: 2px !important;
        color: var(--yt-spec-static-brand-white) !important;
        padding: var(--yt-button-padding) !important;
        margin: auto var(--ytd-subscribe-button-margin,4px) !important;
        font-size: var(--ytd-tab-system-font-size) !important;
        font-weight: var(--ytd-tab-system-font-weight) !important;
        letter-spacing: var(--ytd-tab-system-letter-spacing) !important;
        text-transform: var(--ytd-tab-system-text-transform) !important;
    }
    
    /* Consistent line height in desc */
    ytd-text-inline-expander {
        line-height: 20px !important;
    }
    
    #plain-snippet-text {
        display: inline-block;
    }
    
    /* Move analytics button to right */
    ytd-video-owner-renderer[watch-metadata-refresh] {
        flex-grow: 1;
    }

    /* For some reason desc is duplicated */
    & when (@DescBugFix = 1) {
        #bottom-row, #owner,
        ytd-metadata-row-container-renderer.style-scope.ytd-watch-metadata #always-shown {
            visibility: hidden !important;
            height: 0;
        }
        ytd-watch-metadata { margin-bottom: 0 !important; }
    }
        
    /* This is the style for the old desc box (may be removed in the future, but we're keeping this for now */
    /* #meta-contents.style-scope.ytd-watch-flexy { display: none !important; } */

    /* Already subscribed button */
    #owner.ytd-watch-metadata .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal,
    yt-button-shape.ytd-subscribe-button-renderer > .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal,
    #subscribe-button .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {
        background-color: var(--yt-spec-badge-chip-background) !important;
        color: var(--yt-spec-text-secondary) !important;
    }

    /* Move subscribe button to right */
    #owner.ytd-watch-metadata {
        justify-content: space-between !important;
    }

    .item.ytd-watch-metadata {
        margin-right: 0 !important;
    }

    #description.item.ytd-watch-metadata {
        margin-top: 0 !important;
    }
    
    #info-container.ytd-watch-metadata {
        margin-top: 12px !important;
    }
    
    /* Old username style */
    .ytd-video-owner-renderer #text.ytd-channel-name {
        color: rgb(255, 255, 255) !important;
        font-family: Roboto, Arial, sans-serif !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 20px !important;
    }

    /* Playlists page left side */
    .immersive-header-background-wrapper.ytd-playlist-header-renderer {
        opacity: 0.2 !important;
    }

    /* Buttons no margin: */
    #flexible-item-buttons.ytd-menu-renderer:not(:empty)>.ytd-menu-renderer[button-renderer] {
        margin-left: 0 !important;
    }
    
    /* Search, smaller thumbnails */
    ytd-video-renderer[use-search-ui] ytd-thumbnail.ytd-video-renderer,
    ytd-playlist-renderer[is-search] ytd-playlist-thumbnail.ytd-playlist-renderer {
        max-width: 240px !important;
    }
    
    /* Search, smaller shorts */
    ytd-reel-item-renderer {
        width: 150px !important;
    }
    
    /* Border above video metadata */
    #owner {
        border-top: 1px solid var(--yt-spec-10-percent-layer);
        margin-top: 4px !important;
        padding-top: 12px !important;
    }
    
    /* Border above comments */
    ytd-comments-header-renderer #title {
        border-top: 1px solid var(--yt-spec-10-percent-layer);
        padding-top: 12px !important;
    }
    
    ytd-watch-metadata #top-row {
        border-bottom: none !important;
    }

    /* Video buttons: no bg and border: */
    #menu-container .yt-spec-button-shape-next--size-m,
    #menu-container .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal,
    #menu .yt-spec-button-shape-next--size-m,
    #menu .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {
        border-radius: 2px !important;
        background-color: transparent !important;
        
        yt-icon { height: 22px !important; }
    }

    /* Video buttons: Remove labels for clip, share, and save */
    #actions.ytd-watch-metadata .yt-spec-button-shape-next__button-text-content {
        display: block !important;
    }
    
    & when (@RemoveButtonLabel = 1) {
        ytd-menu-renderer[has-flexible-items] {
            min-width: 400px !important;
        }
    
        #actions.ytd-watch-metadata .yt-spec-button-shape-next__icon {
            margin-right: 6px !important;
            margin-left: -6px !important;
        }
        #actions.ytd-watch-metadata .yt-spec-button-shape-next__button-text-content,
        ytd-menu-renderer ytd-button-renderer yt-formatted-string.ytd-button-renderer {
            display: none !important;
        }
        #menu-container .yt-spec-button-shape-next__icon,
        #menu .yt-spec-button-shape-next__icon{
            margin-right: 0 !important;
            margin-left: 0 !important;
        }
    }
    
    & when (@AlwaysShowEndCardTitle = 1) {
        .ytp-videowall-still-info-content {
            opacity: 1 !important;
        }
    }

    /* Thumbnail channel name */
    ytd-video-meta-block #text.ytd-channel-name,
    .ytd-video-meta-block[meta-block] #text.ytd-channel-name {
        color: var(--yt-spec-text-secondary) !important;
        font-size: 12px !important;
        font-weight: 400 !important;
        line-height: 18px !important;
        font-style: normal !important;
    }
    
    /* Thubmnail title */
    #video-title.ytd-rich-grid-media {
        font-size: 1.2em !important;
        line-height: 1.4 !important;
    }
    
    /* Thumbnail metadata */
    ytd-video-meta-block[rich-meta] #metadata-line.ytd-video-meta-block {
        font-size: 12px !important;
    }

    /* Change border-radius for most elements: */
    :root {
        --border-radius: @NormalBorderRadius;
        --yt-img-border-radius: var(--border-radius) !important;
        --paper-menu-button-content-border-radius: var(--border-radius) !important;
    }

    /** Search button in nav, rounded on right */
    ytd-searchbox[desktop-searchbar-style=rounded_corner_borders_light_btn] #search-icon-legacy.ytd-searchbox,
    ytd-searchbox[desktop-searchbar-style=rounded_corner_autofocus] #search-icon-legacy.ytd-searchbox,
    #search-icon-legacy.ytd-searchbox {
        border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
    }

    /** Nav search input, rounded on left */
    ytd-searchbox[desktop-searchbar-style=rounded_corner_borders_light_btn] #container.ytd-searchbox,
    ytd-searchbox[desktop-searchbar-style=rounded_corner_autofocus] #container.ytd-searchbox,
    #container.ytd-searchbox {
        border-radius: var(--border-radius) 0 0 var(--border-radius) !important;
    }

    /** Playlist container */
    ytd-playlist-panel-renderer[modern-panels]:not([within-miniplayer]) #container.ytd-playlist-panel-renderer,

    /* Thumbnails */
    ytd-thumbnail[size=medium] a.ytd-thumbnail, ytd-thumbnail[size=medium]:before,
    ytd-thumbnail[size=large] a.ytd-thumbnail, ytd-thumbnail[size=large]:before,
    ytd-playlist-thumbnail[size=medium] a.ytd-playlist-thumbnail,
    ytd-playlist-thumbnail[size=medium]:before,
    ytd-ghost-grid-renderer[rounded-container] .rich-thumbnail.ytd-ghost-grid-renderer,

    /* Selecting a playlist / channel on left */
    ytd-guide-entry-renderer,
    ytd-mini-guide-entry-renderer,
    ytd-guide-entry-renderer yt-interaction.ytd-guide-entry-renderer,
    ytd-guide-entry-renderer #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer:hover,
    ytd-guide-entry-renderer #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer:focus,

    /* Description */
    ytd-watch-metadata[modern-metapanel] #description.ytd-watch-metadata,
    yt-interaction.rounded-large .fill.yt-interaction,
    yt-interaction.rounded-large .stroke.yt-interaction,
    
    /* Mini player */
    .ytp-player-minimized .html5-main-video, .ytp-player-minimized .ytp-miniplayer-scrim,

    /* Cards for games / category */
    ytd-rich-metadata-renderer[rounded],

    /* Popups */
    ytd-menu-popup-renderer,
    .ytp-settings-menu,
    .ytp-screen-mode-menu,
    ytd-multi-page-menu-renderer,
    .dropdown-content.tp-yt-paper-menu-button,
    yt-dropdown-menu[rounded-container],
    yt-dropdown-menu[modern-dialogs] #menu.yt-dropdown-menu,
    
    /* End card */
    .ytp-ce-video.ytp-ce-large-round, .ytp-ce-playlist.ytp-ce-large-round, .ytp-ce-large-round .ytp-ce-expanding-overlay-background,

    /* Playlist video */
    ytd-playlist-video-renderer[amsterdam],
    
    /* Chapter thumbnail */
    ytd-macro-markers-list-item-renderer[rounded] #thumbnail.ytd-macro-markers-list-item-renderer,

    /* Modal */
    tp-yt-paper-dialog[modern],

    /* Playlist page side */
    .immersive-header-container.ytd-playlist-header-renderer,
    .image-wrapper.ytd-hero-playlist-thumbnail-renderer,

    /* Search results */
    .sbdd_b,

    /* Looking for something different? */
    #content-wrapper.ytd-feed-nudge-renderer,

    /* Chapter */
    ytd-macro-markers-list-item-renderer[modern][rounded][layout=MACRO_MARKERS_LIST_ITEM_RENDERER_LAYOUT_VERTICAL],
    
    /* Thread posts */
    ytd-backstage-post-thread-renderer[rounded-container],

    /* Channel video player */
    .ytd-channel-video-player-renderer,

    /* Expandable in search */
    ytd-expandable-metadata-renderer[round-container],
    img.yt-img-shadow,
    
    /* Live chat */
    ytd-live-chat-frame[rounded-container],
    ytd-live-chat-frame[rounded-container] #show-hide-button.ytd-live-chat-frame ytd-toggle-button-renderer.ytd-live-chat-frame,

    /* Toasts */
    yt-notification-action-renderer[ui-refresh] tp-yt-paper-toast.yt-notification-action-renderer,

    /* End video suggestions */
    .ytp-videowall-still-round-large .ytp-videowall-still-image,
    
    /* Autoplay thumbnail */
    .ytp-autonav-endscreen-upnext-thumbnail,
    
    /* Banner */
    ytd-brand-video-singleton-renderer[rounded-container]:not([is-first-feed-item]) #dismissible.ytd-brand-video-singleton-renderer,
    
    /* Hover to play */
    ytd-video-preview[rounded-container] #video-preview-container.ytd-video-preview,

    /* Next video preview */
    .ytp-tooltip.ytp-rounded-tooltip.ytp-text-detail.ytp-preview,
    .ytp-tooltip.ytp-rounded-tooltip.ytp-text-detail.ytp-preview .ytp-tooltip-bg,
    
    /* Search result album card */
    ytd-universal-watch-card-renderer[rounded] .ytd-universal-watch-card-renderer,

    /* End video cards */
    .ytp-ce-video.ytp-ce-medium-round, .ytp-ce-playlist.ytp-ce-medium-round, .ytp-ce-medium-round .ytp-ce-expanding-overlay-background,

    /* Create a post */
    ytd-backstage-post-dialog-renderer[is-creation-dialog][rounded-container],

    /* Survey */
    ytd-inline-survey-renderer[rounded-container] #dismissible.ytd-inline-survey-renderer,

    /* Clip panel */
    ytd-engagement-panel-section-list-renderer[modern-panels],
        
    /* Topic (ie music) */
    #topic-link-container.ytd-topic-link-renderer,
    
    /* Playlist in desc */
    #thumbnail.ytd-structured-description-playlist-lockup-renderer,
    #overlay.ytd-structured-description-playlist-lockup-renderer,

    /* Share URL */
    yt-copy-link-renderer[rounded-container] #bar.yt-copy-link-renderer {
        border-radius: var(--border-radius) !important;
    }

    /* Miniplayer */
    .ytp-player-minimized.ytp-rounded-miniplayer .html5-main-video,
    .ytp-player-minimized.ytp-rounded-miniplayer .ytp-miniplayer-scrim,
    .ytp-player-minimized.ytp-rounded-miniplayer.html5-video-player,
    ytd-miniplayer[rounded-container] #player-container.ytd-miniplayer,
    ytd-miniplayer[rounded-container] #video-container.ytd-miniplayer .video.ytd-miniplayer,
    ytd-miniplayer[rounded-container] #card.ytd-miniplayer, ytd-miniplayer[rounded-container] {
        border-radius: @NormalBorderRadius !important;
    }

    /* Community poll */
    ytd-backstage-poll-renderer:not([is-image-poll]) .choice-info.ytd-backstage-poll-renderer {
        border-radius: @NormalBorderRadius !important; /* Used to be 4px */
    }

    /* Help bubble */
    yt-bubble-hint-renderer[rounded-container] {
        border-radius: @ChipBorderRadius !important; /* Used to be 12px */
    }

    /* Buttons */
    .yt-spec-touch-feedback-shape,
    .yt-spec-button-shape-next--size-m {
        border-radius: @ButtonBorderRadius !important;
    }

    /* Chips */
    yt-chip-cloud-chip-renderer {
        border-radius: @ChipBorderRadius !important;
    }
}