Youtube Controls Highlighting

highlights the controls of the youtube player to the preferred color on hover

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

Wrap lines

/* ==UserStyle==
@name           Youtube Controls Highlighting
@namespace      almaceleste
@version        0.3.1
@description    highlights the controls of the youtube player to the preferred color on hover
@author         almaceleste (https://almaceleste.github.io)
@license        AGPL-3.0-or-later; http://www.gnu.org/licenses/agpl.txt

@homepageURL    https://greatest.deepsurf.us/en/scripts/402954-youtube-controls-highlighting
@homepageURL    https://openusercss.org/theme/5eb6c0fe8dace10c00d18d35
@homepageURL    https://userstyles.org/styles/182091
@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-time-display span:hover {
        text-shadow: 0 0 1px whitesmoke, 0 0 2px black !important;
        filter: drop-shadow(0 0 3px /*[[highlight-color]]*/) drop-shadow(0 0 5px /*[[highlight-color]]*/) !important
    }
    .ytp-volume-panel:hover,
    .ytp-chrome-controls a:hover svg,
    .ytp-chrome-controls button:hover svg {
        filter: drop-shadow(0 0 1px black) drop-shadow(0 0 2px /*[[highlight-color]]*/)  drop-shadow(0 0 5px /*[[highlight-color]]*/) !important;
    }
}