☰

Greasy Fork is available in English.

Youtube Bottom Gray Shadow

changes a white shadow background of the Youtube Player's bottom to the gray color and adds some additional shadows to the bottom controls to increase readability

  1. /* ==UserStyle==
  2. @name           Youtube Bottom Gray Shadow
  3. @namespace      almaceleste
  4. @version        0.5.1
  5. @description    changes a white shadow background of the Youtube Player's bottom to the gray color and adds some additional shadows to the bottom controls to increase readability
  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://greatest.deepsurf.us/en/scripts/402957-youtube-bottom-gray-shadow
  10. @homepageURL    https://openusercss.org/theme/5eb6d91e8dace10c00d18d37
  11. @homepageURL    https://userstyles.org/styles/182079
  12. @homepageURL    https://github.com/almaceleste/userstyles
  13. @supportURL     https://github.com/almaceleste/userstyles/issues
  14.  
  15. @preprocessor   uso
  16. @var select     background-shadow 'background shadow' {
  17.     'deepdark:deep dark (#111)':   'rgba(17, 17, 17, 0.5)',
  18.     'dark:dark (#333)*':            'rgba(51, 51, 51, 0.5)',
  19.     'softdark:soft dark (#555)':   'rgba(85, 85, 85, 0.5)'
  20. }
  21. @var select     control-shadow 'control shadow' {
  22.     'deepdark:deep dark (#111)':   '#111',
  23.     'dark:dark (#333)*':            '#333',
  24.     'softdark:soft dark (#555)':   '#555'
  25. }
  26. ==/UserStyle== */
  27.  
  28. @-moz-document url-prefix("https://www.youtube.com/watch") {
  29.     .ytp-gradient-bottom {
  30.         padding-top: 0 !important;
  31.         background-image: none !important;
  32.         background: linear-gradient(rgba(0, 0, 0, 0), /*[[background-shadow]]*/) !important;
  33.     }
  34.     .ytp-time-display span {
  35.         text-shadow: 0 0 1px whitesmoke, 0 0 2px black !important;
  36.         filter: drop-shadow(0 0 3px /*[[control-shadow]]*/) drop-shadow(0 0 5px /*[[control-shadow]]*/) !important
  37.     }
  38.     .ytp-chrome-controls svg {
  39.         filter: drop-shadow(0 0 1px whitesmoke) drop-shadow(0 0 2px black) drop-shadow(0 0 3px /*[[control-shadow]]*/) drop-shadow(0 0 5px /*[[control-shadow]]*/) !important;
  40.     }
  41.     .ytp-volume-panel {
  42.         filter: drop-shadow(0 0 1px whitesmoke) drop-shadow(0 0 2px black) drop-shadow(0 0 3px /*[[control-shadow]]*/) !important;
  43.     }
  44. }