highlights the progress bar of the youtube player on hover
/* ==UserStyle==
@name Youtube Progress Bar Highlighting
@namespace almaceleste
@version 0.5.1
@description highlights the progress bar of the youtube player on hover
@author almaceleste (https://almaceleste.github.io)
@license AGPL-3.0-or-later; http://www.gnu.org/licenses/agpl.txt
@homepageURL https://greasyfork.org/en/scripts/402635-youtube-progress-bar-highlighting
@homepageURL https://openusercss.org/theme/5e91bc91d672b50c00a76e20
@homepageURL https://userstyles.org/styles/182156
@homepageURL https://github.com/almaceleste/userstyles
@supportURL https://github.com/almaceleste/userstyles/issues
@preprocessor uso
@var select highlight-color 'highlight color' [
'black',
'darkgreen',
'deepskyblue*',
'gold',
'indigo',
'lime',
'magenta',
'navy',
'orangered',
'white'
]
==/UserStyle== */
@-moz-document url-prefix("https://www.youtube.com/watch") {
.ytp-probably-keyboard-focus .ytp-progress-bar:focus .ytp-play-progress,
.ytp-chrome-bottom:hover .ytp-scrubber-container,
.ytp-chrome-bottom:hover .ytp-play-progress {
filter: drop-shadow(0 0 1px /*[[highlight-color]]*/) drop-shadow(0 0 2px /*[[highlight-color]]*/) drop-shadow(0 0 5px /*[[highlight-color]]*/);
}
.ytp-probably-keyboard-focus .ytp-progress-bar:focus {
box-shadow: rgba(53, 128, 186, 0.5) 0px 0px 2px 1px;
}
.ytp-chrome-bottom:hover .ytp-progress-bar {
box-shadow: rgba(53, 128, 186, 0.5) 0px 0px 2px 1px;
}
}