youtube zen by GitEin11

/* ==UserStyle==
@name           youtube zen
@namespace      simple zen, youtube
@version        1.0.12
@description    simple zen, youtube
@author         ein
==/UserStyle== */
@-moz-document domain("youtube.com") {
    * {
        scrollbar-color: #252627 transparent!important;
        scrollbar-width: thin!important
    }
    /* remove ambient */
    #cinematics canvas {
        opacity: 0 !important;
    }
    /* square it */
    *:not(
        .ytp-title-channel,
        .ytp-spinner-circle,
        .ytp-title-channel *,
        .player-controls-spinner,
        .ytp-volume-slider-handle,
        .ytp-swatch-background-color,
        .ytp-menuitem-toggle-checkbox,
        #newness-dot.ytd-guide-entry-renderer,
        .circle.style-scope.tp-yt-paper-spinner,
        .YtProgressBarPlayheadProgressBarPlayheadDot
    ) {
        border-radius: 0px !important;
    }
    
    #progress.yt-page-navigation-progress {
        background-color: #6f8e9e;
    }
    .yt-simple-endpoint.ytd-playlist-thumbnail,
    ytd-thumbnail #thumbnail.ytd-thumbnail {
        filter: brightness(.8) grayscale(.8);
    }
    .ytd-topbar-logo-renderer {
        display: none;
    }
    #masthead > div:nth-child(5) {
        background: #121212;
        border-bottom: 1px solid #6f8e9e;
    }
    .ytSearchboxComponentInputBoxDark.ytSearchboxComponentInputBoxHasFocus {
        border-color: #6f8e9e;    
    }
    #progress.yt-page-navigation-progress {
      background: linear-gradient(to right,#9ab 80%,#678 100%);
    }  
    ytd-menu-renderer.ytd-watch-metadata > div:nth-child(1) > yt-button-view-model:nth-child(2),
    ytd-menu-renderer.ytd-watch-metadata > div:nth-child(2) > yt-button-view-model:nth-child(2),
    ytd-menu-renderer.ytd-watch-metadata > div:nth-child(2) > yt-button-view-model:nth-child(3) {
        display: none;
    }
    /* default button */
    button:not(.ytp-large-play-button),
    a[role="button"] {
        path,
        .ytp-svg-fill {
            fill: #888;
        }
        &:hover {
            path,
            .ytp-svg-fill {
                fill: #b3e5ff;
            }
            backdrop-filter: brightness(.5);
        }
    }
    .ytd-masthead button:hover {
        backdrop-filter: none !important;
    }
    tp-yt-paper-item {
        .guide-icon.ytd-guide-entry-renderer,
        #content-icon.ytd-compact-link-renderer {
            display: none !important;
        }
    }
    h1 span {
        color: #777 !important;
        font-weight: lighter !important;
    }
    .yt-content-preview-image-view-model-wiz,
    ytd-toggle-theme-compact-link-renderer .content-icon {
        display: none !important;
    }
    .yt-tab-shape-wiz__tab--tab-selected,
    .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--outline {
        color: #6f8e9e !important;
    }
    #newness-dot.ytd-guide-entry-renderer,
    .yt-tab-group-shape-wiz__slider {
        background: #6f8e9e !important;
    }
    /* volume slider */
    .ytp-volume-slider-handle {
        color: #6f8e9e !important;
        background: #888;
        &:before {
            background: #888;
        }
        &:after {
            background: #3e3e3e;
            width: calc(64px - 6px);
            margin-left: 6px;
        }
    }
    yt-chip-cloud-chip-renderer[chip-style="STYLE_DEFAULT"][selected],
    yt-chip-cloud-chip-renderer[chip-style="STYLE_HOME_FILTER"][selected] {
        background-color: #6f8e9e;
        color: #000;
    }
    .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--outline {
        border: 1px solid #232426 !important;
    }
    .ytp-progress-bar {
        /* watch */
        .ytp-swatch-background-color {
            background: #5c67a4;
        }
        .ytp-load-progress {
            background: #555;
        }
        .ytp-progress-linear-live-buffer {
            background: #b95a5a;
        }
    }
    .YtProgressBarLineProgressBarPlayed {
        background: #b95a5a;
    }
    /* live */
    html[dark],
    [dark] {
        --yt-spec-static-overlay-background-brand: #b95a5a !important;
        --yt-spec-static-overlay-icon-active-other: #000;
    }
    .YtProgressBarPlayheadProgressBarPlayheadDot,
    .badge-shape-wiz--live.badge-shape-wiz--overlay {
        color: #000;
        background-color: #b95a5a
    }
    .badge-style-type-live-now-alternate.ytd-badge-supported-renderer {
        color: #000;
    }
    html[refresh], [refresh] {
      --yt-spec-static-brand-red: #b95a5a;
    }
    
    .ytp-tooltip.ytp-tooltip-opaque.ytp-bottom,
    .collections-stack-wiz__collection-stack1,
    .collections-stack-wiz__collection-stack2,
    #icon.ytd-rich-shelf-renderer {
        display: none;
    }
    .ytp-time-current,
    .ytp-time-separator,
    .ytp-time-duration {
        color: #aaa
    }
    /*
    extra buttons like sponsor block
    https://addons.mozilla.org/en-US/firefox/addon/sponsorblock/
    */
    .ytp-right-controls {
        button {
            img {
                filter: brightness(.6);
            }
        }
        .ytp-autonav-toggle-button {
            &[aria-checked="false"] {
                filter: brightness(80%);
            }
            &[aria-checked="true"] {
                filter: brightness(60%);
                &:after {
                    filter: brightness(100%);
                }
            }
        }
    }
    /* labels */
    h1 {
        color: #888;
        font-weight: normal !important;
    }
    .ytd-channel-name a {
        color: #6f8e9e !important;
        font-weight: normal !important;
    }
    .owner-sub-count {
        color: #888 !important;
    }
    /* subscribe */
    yt-button-shape {
        span {
            color: #aaa;
        }
        &:hover {
            span {
                color: #b3e5ff;
            }
        }
    }
    .YtLikeButtonViewModelHost {
        path {
            stroke: #aaa !important;
        }
        &:hover path {
            stroke: #b3e5ff !important;
        }
        .yt-spec-touch-feedback-shape__fill {
            background: #b3e5ff !important;
        }
    }
    *:has(#buttons.ytd-masthead a[aria-label="Sign in"]) {
        .YtLikeButtonViewModelHost {
            path {
                stroke: #0000 !important;
            }
            &:hover path {
                stroke: #0000 !important;
            }
            .yt-spec-touch-feedback-shape__fill {
                background: #0000 !important;
            }
        }
    }
    .style-scope.ytd-rich-grid-row.ytd-rich-item-renderer-highlight,
    #content.ytd-rich-item-renderer:hover,
    #content.ytd-rich-item-renderer:focus {
        background: #252525 !important;
        box-shadow: #252525 0px 0px 0px 10px !important;
    }
    .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled {
        color: #f1f1f1;
        background-color: rgba(255, 255, 255, 0.1);
        &:hover {
            color: #b3e5ff;
            background-color: rgba(255, 255, 255, 0.2);
        }
    }
    div[id="play-button"] {
        path {
            color: #aaa;
        }
        &:hover {
            path {
                color: #b3e5ff;
            }
        }
    }
    .truncated-text-wiz button span {
        color: #6f8e9e;
    }
    #page-header-banner-sizer.ytd-tabbed-page-header,
    .yt-decorated-avatar-view-model-wiz {
        display: none;
    }
    div.tp-yt-app-header-layout:nth-child(2) {
        padding-top: 0px;
    }
    #tabs-divider {
        border-bottom-width: 0px;
    }
    .page-header-view-model-wiz__page-header-title h1 span {
        font-weight: 400 !important;
        color: #6f8e9e !important;
    }
    /*
    like/dislike count
    https://addons.mozilla.org/en-US/firefox/addon/return-youtube-dislikes/
    */
    button {
        div[class*="button-text-content"] {
            color: #aaa;
        }
        &:hover div[class*="button-text-content"] {
            color: #b3e5ff;
        }
    }
    .yt-spec-button-view-model:hover yt-animated-rolling-number {
        color: #b3e5ff;
    }
    /* like/dislike gage */
    .ryd-tooltip {
        display: none !important;
    }
    
    /* heart */
    
    #creator-heart {
        max-width: 25px;
    }
    
    #hearted-border {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        
        &.ytd-creator-heart-renderer {
            width: 20px;
            height: 18px;
        }
        
        path {
            fill: #f77;   
        }
    }
    #hearted {
        display:  none;
    }
    
    /* video info */
    .ytVideoMetadataCarouselViewModelHost,
    #description.ytd-watch-metadata {
        background: #151515;
        span,
        ytd-text-inline-expander,
        #header div,
        h3,
        h2,
        path {
            color: #999 !important;
            fill: #777;
            font-weight: normal;
        }
    }
    #social-links {
        img {
            filter: grayscale(.7) invert(.25) brightness(.8);
        }
        div {
            color: #777
        }
        .yt-spec-button-shape-next--outline:hover {
            border: 1px solid #59707d;
            background: #0000;
            img {
                filter: unset;
            }
            path,
            div,
            span {
                fill: #b3e5ff;
                color: #b3e5ff !important;
            }
        }
    }
    /* views */
    yt-animated-rolling-number {
        color: #aeaeae;
    }
    /* ..more */
    .button.ytd-text-inline-expander {
        color: #999 !important;
        &:hover {
            color: #b3...