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
/* ==UserStyle==
@name Youtube Bottom Gray Shadow
@namespace almaceleste
@version 0.5.1
@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
@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/402957-youtube-bottom-gray-shadow
@homepageURL https://openusercss.org/theme/5eb6d91e8dace10c00d18d37
@homepageURL https://userstyles.org/styles/182079
@homepageURL https://github.com/almaceleste/userstyles
@supportURL https://github.com/almaceleste/userstyles/issues
@preprocessor uso
@var select background-shadow 'background shadow' {
'deepdark:deep dark (#111)': 'rgba(17, 17, 17, 0.5)',
'dark:dark (#333)*': 'rgba(51, 51, 51, 0.5)',
'softdark:soft dark (#555)': 'rgba(85, 85, 85, 0.5)'
}
@var select control-shadow 'control shadow' {
'deepdark:deep dark (#111)': '#111',
'dark:dark (#333)*': '#333',
'softdark:soft dark (#555)': '#555'
}
==/UserStyle== */
@-moz-document url-prefix("https://www.youtube.com/watch") {
.ytp-gradient-bottom {
padding-top: 0 !important;
background-image: none !important;
background: linear-gradient(rgba(0, 0, 0, 0), /*[[background-shadow]]*/) !important;
}
.ytp-time-display span {
text-shadow: 0 0 1px whitesmoke, 0 0 2px black !important;
filter: drop-shadow(0 0 3px /*[[control-shadow]]*/) drop-shadow(0 0 5px /*[[control-shadow]]*/) !important
}
.ytp-chrome-controls svg {
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;
}
.ytp-volume-panel {
filter: drop-shadow(0 0 1px whitesmoke) drop-shadow(0 0 2px black) drop-shadow(0 0 3px /*[[control-shadow]]*/) !important;
}
}