diff --git a/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css b/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css index 1f250d8..f643472 100644 --- a/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css +++ b/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css @@ -353,8 +353,14 @@ right: 0%; width: 100%; height: 100%; - mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 6%, #000000 8%); - -webkit-mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 6%, #000000 8%); + mask-image: linear-gradient(to top, + rgba(255, 255, 255, 0) 2%, + rgba(0, 0, 0, 0.5) 6%, + #000000 8%); + -webkit-mask-image: linear-gradient(to top, + rgba(255, 255, 255, 0) 2%, + rgba(0, 0, 0, 0.5) 6%, + #000000 8%); } .backdrop-container.full-width-video { @@ -377,8 +383,14 @@ object-position: center 20%; border-radius: 5px; z-index: 3; - mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 6%, #000000 8%); - -webkit-mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 6%, #000000 8%); + mask-image: linear-gradient(to top, + rgba(255, 255, 255, 0) 2%, + rgba(0, 0, 0, 0.5) 6%, + #000000 8%); + -webkit-mask-image: linear-gradient(to top, + rgba(255, 255, 255, 0) 2%, + rgba(0, 0, 0, 0.5) 6%, + #000000 8%); } .backdrop-overlay { @@ -390,8 +402,14 @@ background-color: rgba(0, 0, 0, 0.2); border-radius: 5px; z-index: 4; - mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 4%, #000000 6%); - -webkit-mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 4%, #000000 6%); + mask-image: linear-gradient(to top, + rgba(255, 255, 255, 0) 2%, + rgba(0, 0, 0, 0.5) 4%, + #000000 6%); + -webkit-mask-image: linear-gradient(to top, + rgba(255, 255, 255, 0) 2%, + rgba(0, 0, 0, 0.5) 4%, + #000000 6%); } .gradient-overlay { @@ -405,8 +423,14 @@ rgba(29, 29, 29, 0.35) 30%, rgba(29, 29, 29, 0) 100%); z-index: 4; - mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 4%, #000000 6%); - -webkit-mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 4%, #000000 6%); + mask-image: linear-gradient(to top, + rgba(255, 255, 255, 0) 2%, + rgba(0, 0, 0, 0.5) 4%, + #000000 6%); + -webkit-mask-image: linear-gradient(to top, + rgba(255, 255, 255, 0) 2%, + rgba(0, 0, 0, 0.5) 4%, + #000000 6%); } .gradient-overlay.full-width-video { @@ -509,8 +533,6 @@ gap: 6px; -webkit-tap-highlight-color: #fff0; border-radius: 8px; - -webkit-appearance: none; - appearance: none; } .detail-button { @@ -524,8 +546,6 @@ cursor: pointer; transition: color 0.2s; -webkit-tap-highlight-color: #fff0; - -webkit-appearance: none; - appearance: none; } .favorite-button { @@ -539,8 +559,6 @@ cursor: pointer; transition: color 0.2s; -webkit-tap-highlight-color: #fff0; - -webkit-appearance: none; - appearance: none; } .favorite-button.favorited { @@ -697,8 +715,14 @@ object-fit: cover; object-position: center 20%; z-index: 3; - mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 6%, #000000 8%); - -webkit-mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 6%, #000000 8%); + mask-image: linear-gradient(to top, + rgba(255, 255, 255, 0) 2%, + rgba(0, 0, 0, 0.5) 6%, + #000000 8%); + -webkit-mask-image: linear-gradient(to top, + rgba(255, 255, 255, 0) 2%, + rgba(0, 0, 0, 0.5) 6%, + #000000 8%); } .gradient-overlay { @@ -710,8 +734,14 @@ background: rgba(0, 0, 0, 0.25); z-index: 4; pointer-events: none; - mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 6%, #000000 8%); - -webkit-mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 6%, #000000 8%); + mask-image: linear-gradient(to top, + rgba(255, 255, 255, 0) 2%, + rgba(0, 0, 0, 0.5) 6%, + #000000 8%); + -webkit-mask-image: linear-gradient(to top, + rgba(255, 255, 255, 0) 2%, + rgba(0, 0, 0, 0.5) 6%, + #000000 8%); } .dots-container { @@ -982,7 +1012,7 @@ margin: 0; } -.layout-tv .backdrop-container{ +.layout-tv .backdrop-container { top: -5%; } @@ -990,11 +1020,11 @@ .layout-tv .backdrop.animate { animation: none !important; } - + .layout-tv .logo.animate { animation: none !important; } - + .layout-tv .slide-counter, .layout-tv .dots-container { backdrop-filter: none;