YouTube recently made a change which changed their iconic red colour to a pink, this style reverts that change.
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
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;
}
}