YouTube - Custom colors video progress bar by commonlist

/* ==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]]*/
}