YouTube
YouTube - Custom colors video progress bar by commonlist
Details
Authorcommonlist
LicenseNo License
Categorytest
Created
Updated
Size7.3 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
YouTube
Source code
/* ==UserStyle==
@name YouTube - Custom colors video progress bar
@namespace USO Archive
@author zoid
@description `Brighten up your YouTube experience with this custom video progress bar. The subtle yet vibrant glows will bring some life and color to the YouTube HTML5 video player.If you fancy something cute and animated, try this alternative style: <a href="https://userstyles.org/styles/95033/youtube-nyan-cat-progress-bar-video-player-theme">YouTube - Nyan Cat progress bar video player theme</a>.<mark><strong></strong></mark>`
@version 20170930.20.52
@license CC-BY-NC-4.0
@preprocessor uso
@advanced dropdown bartype "Bar type" {
Solid "Solid*" <<<EOT /* scrubber button *\/
.html5-scrubber-button:hover, .ytp-scrubber-button:hover, .ytp-swatch-background-color, .ytp-swatch-background-color-secondary {
background: /*[[scrubbercolour]]*\/ !important;
}
/* progress bar *\/
.html5-play-progress, .ytp-play-progress {
background: /*[[colour]]*\/ !important;
}
/*[[volumecolour]]*\/ {
background: /*[[colour]]*\/ !important;
z-index: -117;
}
.ytp-settings-button.ytp-hd-quality-badge/*[[extras]]*\/::after, .ytp-settings-button.ytp-4k-quality-badge/*[[extras]]*\/::after, .ytp-settings-button.ytp-5k-quality-badge/*[[extras]]*\/::after, .ytp-settings-button.ytp-8k-quality-badge/*[[extras]]*\/::after, .ytp-settings-button.ytp-3d-badge/*[[extras]]*\/::after {
background-color: /*[[colour]]*\/ !important;
}
.ytp-swatch-color/*[[extras]]*\/ {
color: /*[[colour]]*\/ !important;
}
.ytp-menuitem/*[[extras]]*\/[aria-checked="true"] .ytp-menuitem-toggle-checkbox/*[[extras]]*\/ {
background: /*[[colour]]*\/ !important;
}
.ytp-chrome-controls .ytp-button.ytp-youtube-button:hover:not([aria-disabled="true"]):not([disabled]) .ytp-svg-fill-logo-tube-lozenge {
fill: /*[[colour]]*\/ !important;
}
.ytp-cued-thumbnail-overlay:hover .ytp-large-play-button-bg/*[[extras]]*\/, .ytp-large-play-button.ytp-touch-device .ytp-large-play-button-bg/*[[extras]]*\/ {
fill: /*[[colour]]*\/ !important;
}
.resume-playback-progress-bar/*[[extras]]*\/ {
background: /*[[colour]]*\/ !important;
}
.ytp-chrome-controls .ytp-button/*[[extras]]*\/[aria-pressed]::after {
background-color: /*[[colour]]*\/ !important;
}
.yt-uix-checkbox-on-off input/*[[extras2]]*\/[type="checkbox"]:checked + label {
background-color: /*[[colour]]*\/ !important;
}
.video-extras-sparkbar-likes/*[[extras2]]*\/ {
background-color: /*[[colour]]*\/ !important;
} EOT;
Glow-gradient "Glow/gradient" <<<EOT .html5-play-progress, .ytp-play-progress {
background: /*[[colour]]*\/ !important; /* Old browsers *\/
background: -moz-linear-gradient(left, #1b1b1b 0%, /*[[colour]]*\/ 100%) !important;
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1b1b1b), color-stop(100%,/*[[colour]]*\/)) !important;
background: -webkit-linear-gradient(left, #1b1b1b 0%,/*[[colour]]*\/ 100%) !important;
background: -o-linear-gradient(left, #1b1b1b 0%,/*[[colour]]*\/ 100%) !important;
background: -ms-linear-gradient(left, #1b1b1b 0%,/*[[colour]]*\/ 100%) !important;
background: linear-gradient(to right, #1b1b1b 0%,/*[[colour]]*\/ 100%) !important;
}
/*.html5-load-progress, .ytp-load-progress {
background: #404040 !important;
}*\/
/* scrubber button glow *\/
.html5-scrubber-button, .ytp-scrubber-button {
border-color: #1B1B1B !important;
box-shadow: 0px 0px 3px /*[[colour]]*\/, 0px 0px 5px /*[[colour]]*\/, 0px 0px 0px /*[[colour]]*\/ !important;
transition: box-shadow 0.2s, background 0.2s !important;
}
/* scrubber button *\/
.ytp-swatch-background-color, .ytp-swatch-background-color-secondary, .html5-scrubber-button:hover, .ytp-scrubber-button:hover {
background-color: /*[[scrubbercolour]]*\/ !important;
}
/* scrubber button glow on hover *\/
.html5-scrubber-button:hover, .ytp-scrubber-button:hover {
border-color: #1B1B1B !important;
box-shadow: 0px 0px 6px /*[[colour]]*\/, 0px 0px 8px /*[[colour]]*\/, 0px 0px 10px /*[[colour]]*\/ !important;
}
/* volume control *\/
/*[[volumecolour]]*\/ {
background: /*[[colour]]*\/ !important; /* Old browsers *\/
background: -moz-linear-gradient(left, #1b1b1b 0%, /*[[colour]]*\/ 100%) !important;
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1b1b1b), color-stop(100%,/*[[colour]]*\/)) !important;
background: -webkit-linear-gradient(left, #1b1b1b 0%,/*[[colour]]*\/ 100%) !important;
background: -o-linear-gradient(left, #1b1b1b 0%,/*[[colour]]*\/ 100%) !important;
background: -ms-linear-gradient(left, #1b1b1b 0%,/*[[colour]]*\/ 100%) !important;
background: linear-gradient(to right, #1b1b1b 0%,/*[[colour]]*\/ 100%) !important;
z-index: -117;
}
/* extras *\/
.ytp-settings-button.ytp-hd-quality-badge/*[[extras]]*\/::after, .ytp-settings-button.ytp-4k-quality-badge/*[[extras]]*\/::after, .ytp-settings-button.ytp-5k-quality-badge/*[[extras]]*\/::after, .ytp-settings-button.ytp-8k-quality-badge/*[[extras]]*\/::after, .ytp-settings-button.ytp-3d-badge/*[[extras]]*\/::after {
background-color: /*[[colour]]*\/ !important;
}
.ytp-swatch-color/*[[extras]]*\/ {
color: /*[[colour]]*\/ !important;
}
.ytp-menuitem/*[[extras]]*\/[aria-checked="true"] .ytp-menuitem-toggle-checkbox/*[[extras]]*\/ {
background: /*[[colour]]*\/ !important;
}
.ytp-chrome-controls .ytp-button.ytp-youtube-button:hover:not([aria-disabled="true"]):not([disabled]) .ytp-svg-fill-logo-tube-lozenge {
fill: /*[[colour]]*\/ !important;
}
.ytp-cued-thumbnail-overlay:hover .ytp-large-play-button-bg/*[[extras]]*\/, .ytp-large-play-button.ytp-touch-device .ytp-large-play-button-bg/*[[extras]]*\/ {
fill: /*[[colour]]*\/ !important;
}
.resume-playback-progress-bar/*[[extras]]*\/ {
background: /*[[colour]]*\/ !important;
}
.ytp-chrome-controls .ytp-button/*[[extras]]*\/[aria-pressed]::after {
background-color: /*[[colour]]*\/ !important;
}
.yt-uix-checkbox-on-off input/*[[extras2]]*\/[type="checkbox"]:checked + label {
background-color: /*[[colour]]*\/ !important;
}
.video-extras-sparkbar-likes/*[[extras2]]*\/ {
background-color: /*[[colour]]*\/ !important;
} EOT;
}
@advanced dropdown colour "Choose your colour" {
Custom "Custom (select below)*" <<<EOT /*[[colour2]]*\/ EOT;
Pink "Pink" <<<EOT #FF80E5 EOT;
Green "Green" <<<EOT #00FF00 EOT;
Red "Red" <<<EOT #FF0000 EOT;
White "White" <<<EOT #FFFFFF EOT;
Cyan "Cyan" <<<EOT #46EFEB EOT;
Purple "Purple" <<<EOT #560DE3 EOT;
Blue "Blue" <<<EOT #2793E6 EOT;
}
@advanced color colour2 "If 'custom,' select a colour here" #335e80
@advanced dropdown volumecolour "Colour volume bar?" {
Yes "Yes (default)*" <<<EOT .ytp-volume-slider-track, .ytp-volume-slider-handle:before EOT;
No "No" <<<EOT .volume.bar.disabled EOT;
}
@advanced dropdown extras "Colour extras (buttons, HD tag)?" {
Yes "Yes (default)*" <<<EOT EOT;
No "No" <<<EOT -extras-disabled EOT;
}
@advanced dropdown extras2 "Colour 'like' bar & auto-play button?" {
No "No (default)*" <<<EOT -extras2-disabled EOT;
Yes "Yes" <<<EOT EOT;
}
@advanced dropdown scrubbercolour "Scrubber button colour" {
Same-as-bar "Same as bar (default)*" <<<EOT /*[[colour]]*\/ EOT;
Dark-grey "Dark grey" <<<EOT #3A3A3A EOT;
White "White" <<<EOT #FFFFFF EOT;
}
==/UserStyle== */
@-moz-document domain("youtube.com") {
/*[[bartype]]*/
}