☰

Youtube Controls Highlighting

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

  1. /* ==UserStyle==
  2. @name           Youtube Controls Highlighting
  3. @namespace      almaceleste
  4. @version        0.3.1
  5. @description    highlights the controls of the youtube player to the preferred color on hover
  6. @author         almaceleste (https://almaceleste.github.io)
  7. @license        AGPL-3.0-or-later; http://www.gnu.org/licenses/agpl.txt
  8.  
  9. @homepageURL    https://greasyfork.org/en/scripts/402954-youtube-controls-highlighting
  10. @homepageURL    https://openusercss.org/theme/5eb6c0fe8dace10c00d18d35
  11. @homepageURL    https://userstyles.org/styles/182091
  12. @homepageURL    https://github.com/almaceleste/userstyles
  13. @supportURL     https://github.com/almaceleste/userstyles/issues
  14.  
  15. @preprocessor   uso
  16. @var select     highlight-color 'highlight color' [
  17.     'black',
  18.     'darkgreen',
  19.     'deepskyblue*',
  20.     'gold',
  21.     'indigo',
  22.     'lime',
  23.     'magenta',
  24.     'navy',
  25.     'orangered',
  26.     'white'
  27. ]
  28. ==/UserStyle== */
  29.  
  30. @-moz-document url-prefix("https://www.youtube.com/watch") {
  31.     .ytp-time-display span:hover {
  32.         text-shadow: 0 0 1px whitesmoke, 0 0 2px black !important;
  33.         filter: drop-shadow(0 0 3px /*[[highlight-color]]*/) drop-shadow(0 0 5px /*[[highlight-color]]*/) !important
  34.     }
  35.     .ytp-volume-panel:hover,
  36.     .ytp-chrome-controls a:hover svg,
  37.     .ytp-chrome-controls button:hover svg {
  38.         filter: drop-shadow(0 0 1px black) drop-shadow(0 0 2px /*[[highlight-color]]*/)  drop-shadow(0 0 5px /*[[highlight-color]]*/) !important;
  39.     }
  40. }