YouTube - Translucent Background Image

youtube-translucent-background-image.user.css

/* ==UserStyle==
@name           YouTube - Translucent Background Image
@namespace      github.com/openstyles/stylus
@version        0.0.8
@updateURL      https://gist.github.com/aequabit/ab2d7ed6c7a6581d67582008f9011c0b/raw/youtube-translucent-background-image.user.css
@description    Makes most of YouTube's elements translucent and sets a background image
@author         aequabit
@var text bg-image "Background image [format: url(https://...)]" "url(https://i.imgur.com/j2UzO1c.png)"
@var text bg-filters "Background filters" "blur(6px) brightness(50%)"
@var text bg-position "Background position" "center top"
@var text bg-size "Background size" "cover"
==/UserStyle== */

@-moz-document domain("youtube.com") {
    :root {
        /*--background-image: url(https://i.imgur.com/fF4DbNA.png);*/ /* Space 1 */
        /*--background-image: url(https://i.imgur.com/2HPVtM6.png);*/ /* Space 2 */
        /*--background-image: url(https://i.imgur.com/E2bmbSm.png);*/ /* Space 3*/
        /*--background-image: url(https://i.imgur.com/j2UzO1c.png);*/ /* Rome */
        /*--background-image: url(https://i.imgur.com/nhrv0Ql.png);*/ /* Blue */
        /*--background-image: url(https://i.imgur.com/wlXMVfz.jpeg);*//* Red Gradient */
        /*--background-image: url(https://i.imgur.com/SltjFmW.png);*/ /* Blue/Purple Gradient */
        --background-image: var(--bg-image);
        --background-filters: var(--bg-filters);
        --background-position: var(--bg-position);
        --background-size: var(--bg-size);
    }
    
    /* Colors */
    :root {
        --yt-spec-text-primary: #f1f1f1;
        --yt-spec-text-secondary: #bbb;
    }

    /* Background image */
    ytd-app {
        background: transparent !important;
    }
    /* https://stackoverflow.com/a/33091315 */
    ytd-app::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: -1;
        display: block;
        width: 100%;
        height: 100%;
        background-image: var(--background-image) !important;
        background-size: var(--bg-size);
        background-position: var(--background-position);
        background-repeat: no-repeat;
        background-attachment: fixed !important;
        filter: var(--background-filters);
    }

    #background.ytd-masthead,
    #chips-wrapper.ytd-feed-filter-chip-bar-renderer,
    ytd-guide-section-renderer {
        background-color: transparent !important;
    }

    /* Loading state */
    body,
    #guide-skeleton,
    #home-container-skeleton,
    #home-chips,
    #home-page-skeleton .rich-thumbnail::before {
        background: none !important;
        background-color: transparent !important;
    }

    /* Sidebar */
    #guide-content.ytd-app,
    #contentContainer.tp-yt-app-drawer {
        background: none !important;
    }
    /* Collapsed sidebar */
    ytd-mini-guide-entry-renderer,
    ytd-mini-guide-renderer {
        background: none !important;
    }

    /* Search bar */
    #container.ytd-searchbox,
    #search-icon-legacy.ytd-searchbox {
        background-color: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(3px);
    }
    #search-icon-legacy.ytd-searchbox:hover {
        background: rgba(0, 0, 0, 0.5);
    }
    .sbsb_a {
        background-color: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(12px);
    }
    .ytSearchboxComponentInputBoxDark {
      border: none;
      background-color: hsla(0,0%,100%,.08);
    }
    .ytSearchboxComponentSearchButtonDark {
      border: none;
      background-color: hsla(0,0%,100%,.08);
    }
    .ytSearchboxComponentSearchButtonDark:hover {
      border: none;
      background: rgba(255,255,255,0.2);
    }
    
    /* Start page posts */
    ytd-post-renderer {
        background-color: rgba(0, 0, 0, 0.4) !important;
        backdrop-filter: blur(3px);
    }
    
    /* Start page category scroll arrows */
    ytd-feed-filter-chip-bar-renderer .yt-spec-touch-feedback-shape {
        background-color: rgba(0, 0, 0, 0.4);
    }
    #left-arrow-button.ytd-feed-filter-chip-bar-renderer,
    #left-arrow.ytd-feed-filter-chip-bar-renderer::after,
    #right-arrow-button.ytd-feed-filter-chip-bar-renderer,
    #right-arrow.ytd-feed-filter-chip-bar-renderer::before {
        background: none !important;
        background-color: transparent !important;
    }

    /* Start page "Show more" button */
    .button-container.ytd-rich-shelf-renderer {
        background-color: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(3px);
        border-radius: 18px;
    }

    /* Popups */
    ytd-engagement-panel-section-list-renderer[dialog] #content.ytd-engagement-panel-section-list-renderer {
        background: none !important;
    }
    ytd-multi-page-menu-renderer,
    ytd-menu-popup-renderer {
        background-color: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(3px) !important;
    }
    ytd-simple-menu-header-renderer {
        background: none;
    }

    /* Share popup */
    tp-yt-paper-dialog {
        background-color: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(8px);
    }

    /* Popup backdrop z-index fix */
    tp-yt-iron-overlay-backdrop {
        display: none;
    }

    /* Channel: Header background */
    #page-header-container.ytd-tabbed-page-header,
    #page-header.ytd-tabbed-page-header,
    #tabs-container.ytd-tabbed-page-header,
    #tabs-inner-container.ytd-tabbed-page-header {
        background-color: transparent !important;
    }

    /* Playlist: Alert border radius */
    ytd-alert-with-button-renderer {
        border-radius: 8px;
    }

    /* Playlist: Info box opacity */
    .YtCinematicContainerViewModelHost {
        opacity: 0.5;
    }

    /* Player: Current playlist / In this video */
    .header.ytd-playlist-panel-renderer,
    #header.ytd-engagement-panel-title-header-renderer,
    #subheader.ytd-engagement-panel-title-header-renderer:not(:empty),
    .YtwTimelineChapterViewModelHost {
        background-color: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(3px);
        border-top: none;
    }
    .playlist-items.ytd-playlist-panel-renderer,
    #content.ytd-engagement-panel-section-list-renderer {
        background-color: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(3px);
    }

    ytd-transcript-search-panel-renderer,
    ytd-transcript-segment-list-renderer,
    ytd-transcript-footer-renderer {
        background: none;
    }

    /* Player: Chat replay */
    #show-hide-button {
        background: none;
    }
    .ytd-live-chat-frame {
        background-color: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(3px);
        border-radius: 18px;
    }

    .ytd-live-chat-frame {
        background: none !important;
    }
    yt-live-chat-header-renderer {
        background-color: rgba(0, 0, 0, 0.5) !important;
        backdrop-filter: blur(3px);
    }
    yt-live-chat-renderer {
        background-color: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(3px);
    }
}