Refactor mask-image properties for improved readability in mediaBarEnhanced.css

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%);
+  mask-image: linear-gradient(to top,
-  -webkit-mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 6%, #000000 8%);
+      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%);
+  mask-image: linear-gradient(to top,
-  -webkit-mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 6%, #000000 8%);
+    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%);
+  mask-image: linear-gradient(to top,
-  -webkit-mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 4%, #000000 6%);
+    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%);
+  mask-image: linear-gradient(to top,
-  -webkit-mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 4%, #000000 6%);
+    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%);
+    mask-image: linear-gradient(to top,
-    -webkit-mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 6%, #000000 8%);
+      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%);
+    mask-image: linear-gradient(to top,
-    -webkit-mask-image: linear-gradient(to top, rgba(255,255,255,0) 2%, rgba(0,0,0,0.5) 6%, #000000 8%);
+      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%;
 }