Skip to content

Red Progress Bar by KayleighsStuffz

Details

AuthorKayleighsStuffz

LicenseNo License

Categoryyoutube

Created

Updated

Size5.0 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

YouTube recently made a change which changed their iconic red colour to a pink, this style reverts that change.

Notes

UPDATE LOG:

  • v1.1.6 - Removed the AI Summary

Source code

/* ==UserStyle== 
@name           Red Progress Bar
@namespace      github.com/openstyles/stylus 
@version        1.1.5
@description    This style reverts most if not all of the newly added pink color in favor of bright red for YouTube elements. 
@author         KayleighsStuffz 
==/UserStyle== */
@-moz-document domain("youtube.com") {  
    /* === Red Progress Bar === */
    .html5-scrubber-button:hover,  
    .ytp-scrubber-button:hover,  
    .ytp-swatch-background-color,  
    .ytp-swatch-background-color-secondary {  
        background: #FF0000 !important;  
    }  

    /* Progress bar */  
    .html5-play-progress,  
    .ytp-play-progress {  
        background: #FF0000 !important;  
    }  
    .ytp-volume-slider-track,  
    .ytp-volume-slider-handle:before {  
        background: #fff !important;  
        z-index: -117;  
    }  
    .ytp-settings-button.ytp-hd-quality-badge::after,  
    .ytp-settings-button.ytp-4k-quality-badge::after,  
    .ytp-settings-button.ytp-5k-quality-badge::after,  
    .ytp-settings-button.ytp-8k-quality-badge::after,  
    .ytp-settings-button.ytp-3d-badge::after {  
        background-color: #FF0000 !important;  
    }  
    .ytp-swatch-color {  
        color: #FF0000 !important;  
    }  
    /* Checkbox for menu items like loop */  
    .ytp-menuitem[aria-checked="true"] .ytp-menuitem-toggle-checkbox {  
        border-color: #FF0000 !important; /* Red outline */  
        background-color: transparent !important; /* Transparent background to show check mark */  
    }  
    /* YouTube button hover */  
    .ytp-chrome-controls .ytp-button.ytp-youtube-button:hover:not([aria-disabled="true"]):not([disabled]) .ytp-svg-fill-logo-tube-lozenge {  
        fill: #FF0000 !important;  
    }  
    .ytp-cued-thumbnail-overlay:hover .ytp-large-play-button-bg,  
    .ytp-large-play-button.ytp-touch-device .ytp-large-play-button-bg {  
        fill: #FF0000 !important;  
    }  
    .resume-playback-progress-bar {  
        background: #FF0000 !important;  
    }  
    .ytp-chrome-controls .ytp-button[aria-pressed]::after {  
        background-color: #FF0000 !important;  
    }  
    .yt-uix-checkbox-on-off input-extras2-disabled[type="checkbox"]:checked + label {  
        background-color: #FF0000 !important;  
    }  
    .video-extras-sparkbar-likes-extras2-disabled {  
        background-color: #FF0000 !important;  
    }  
    /* Logo */  
    #logo-icon > .yt-spec-icon-shape > div > svg > svg > g > path,  
    #logo-icon > svg > g > g:nth-child(1) > path,  
    #logo-icon-container > svg > g > g:nth-child(1) > path,  
    #logo-icon > .yt-spec-icon-shape > div > svg > g:nth-child(1) > path {  
        fill: #FF0000;  
    }  
    #logo-icon > .yt-spec-icon-shape > div > svg > svg > g > path:nth-child(2),  
    #logo-icon > svg > g > g:nth-child(1) > path:nth-child(2),  
    #logo-icon-container > svg > g > g:nth-child(1) > path:nth-child(2),  
    #logo-icon > .yt-spec-icon-shape > div > svg > g:nth-child(1) > path:nth-child(2) {  
        fill: #FFFF;  
    }  
    /* Notification */  
    #icon > #button > .ytd-notification-topbar-button-renderer > div > .yt-spec-icon-badge-shape__badge,  
    .yt-spec-icon-badge-shape--type-notification .yt-spec-icon-badge-shape__badge {  
        background-color: #FF0000;  
    }  

    /* === LIVE Circle Fix === */
    .yt-spec-avatar-shape--live-ring::after {  
        border-radius: 50% !important; /* Keeps the "LIVE" border circular */  
        content: "";  
        position: absolute;  
        inset: -2px; /* Adjusted for thinner border */  
        border: 2px solid #FF0000; /* Solid red, thinner border */  
        background: transparent !important; /* Removes gradient */  
        box-sizing: border-box;  
        z-index: 0; /* Prevents overlap with the "LIVE" text */  
    }  
    .yt-spec-avatar-shape--live-ring {  
        position: relative; /* Positions the border correctly */  
        display: inline-block;  
    }  

    /* === Unrounded YouTube === */
    a.ytd-thumbnail,  
    ytd-mini-guide-entry-renderer,  
    ytd-rich-metadata-renderer,  
    #thumbnail.ytd-macro-markers-list-item-renderer,  
    ytd-multi-page-menu-renderer,  
    yt-thumbnail-view-model,  
    yt-content-preview-image-view-model,  
    ytd-thumbnail[size=large]:before,  
    .yt-spec-button-shape-next--tonal {  
        border-radius: unset !important;  
    }  
    .yt-spec-button-shape-next--mono,  
    .ytp-tooltip.ytp-rounded-tooltip.ytp-preview:not(.ytp-text-detail),  
    .ytp-tooltip.ytp-rounded-tooltip.ytp-preview:not(.ytp-text-detail) .ytp-tooltip-bg {  
        border-radius: unset !important;  
        -webkit-border-radius: unset !important;  
    }  

   /* Hide YouTube AI Summary */
#header.style-scope.ytd-expandable-metadata-renderer {
    display: none !important;
}

}

Reviews

No reviews yet.