YouTube - Custom colors video progress bar by chromiacat

/* ==UserStyle==
@name           YouTube - Custom colors video progress bar
@namespace      USO Archive
@author         ChromiaCat
@description    `Style modified to change the first color in gradient mode. <a href="https://uso.kkx.one/style/95280">Original 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, /*[[gradientcolour]]*\/ 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, /*[[gradientcolour]]*\/ 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" #2793E6
@advanced color gradientcolour "If gradient, select the first colour here" #0000FF
@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]]*/
}