Youtube Progress Bar Highlighting

highlights the progress bar of the youtube player on hover

Visit the author's site for support, ask a question, post a review, or report the script.

Wrap lines

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