Add new visual styles and effects for custom overlays in configuration

Jellyfin.Plugin.MediaBarEnhanced/Configuration/configPage.html

@@ -289,6 +289,8 @@
                                 <option value="Wave">Liquid Wave</option>
                                 <option value="VHS">VHS Tracking</option>
                                 <option value="Matrix">Digital Matrix</option>
+                                <option value="Ghost">Ghostly Apparition</option>
+                                <option value="PulseGlow">Breathing Pulse Glow</option>
                             </select>
                             <div class="fieldDescription">Choose the visual styling animation for your custom text.</div>
                         </div>
@@ -307,6 +309,9 @@
                                 <option value="Hologram">Hologram</option>
                                 <option value="CRT">CRT Monitor</option>
                                 <option value="Floating">Floating Float</option>
+                                <option value="VHSTracking">VHS Tracking Glitch</option>
+                                <option value="ColorCycle">Rainbow Color Cycle</option>
+                                <option value="Mirror">Mirror Reflection</option>
                             </select>
                             <div class="fieldDescription">Choose a visual effect to apply to your overlay image.</div>
                         </div>

Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css

@@ -1082,7 +1082,7 @@
 
 @media only screen and (max-width: 767px) and (orientation: portrait) {
   .custom-overlay-container {
-    top: 8%;    /* oder 5vh? */
+    top: 15vh;
     left: 50%;
     transform: translateX(-50%);
     width: 90%;
@@ -1244,9 +1244,8 @@
   bottom: -10px;
   left: -50vw;
   right: -50px;
-  background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.8) 70%, transparent 100%);
+  background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.6) 40%, transparent 100%);
   z-index: -1;
-  border-left: 5px solid #00a4dc;
 }
 
 @keyframes slideInCinematic {
@@ -1324,6 +1323,7 @@
 @keyframes liquidWave {
   0%, 100% { transform: translateY(0) skewY(0); }
   25% { transform: translateY(-3px) skewY(1deg); }
+  50% { transform: translateY(0) skewY(0); }
   75% { transform: translateY(3px) skewY(-1deg); }
 }
 
@@ -1348,6 +1348,27 @@
   to { text-shadow: 0 0 10px #0f0, 0 0 20px #0f0; }
 }
 
+.custom-overlay-style-Ghost {
+  color: rgba(255,255,255,0.8);
+  filter: blur(0px);
+  animation: ghostApparition 6s infinite alternate;
+}
+@keyframes ghostApparition {
+  0% { filter: blur(0px); opacity: 1; transform: scale(1); }
+  50% { filter: blur(3px); opacity: 0.6; transform: scale(1.02); }
+  100% { filter: blur(8px); opacity: 0; transform: scale(1.05); }
+}
+
+.custom-overlay-style-PulseGlow {
+  color: #fff;
+  text-shadow: 0 0 10px rgba(255,255,255,0.8);
+  animation: pulseGlowAura 3s ease-in-out infinite alternate;
+}
+@keyframes pulseGlowAura {
+  0% { text-shadow: 0 0 5px rgba(255,255,255,0.5), 0 0 10px #00a4dc; transform: scale(1); }
+  100% { text-shadow: 0 0 15px rgba(255,255,255,1), 0 0 30px #00a4dc, 0 0 40px #00a4dc; transform: scale(1.05); }
+}
+
 /* Custom Overlay Image Styles */
 .custom-overlay-img-RoundedShadow {
   border-radius: 12px;
@@ -1406,3 +1427,29 @@
   50% { transform: translateY(-15px); }
 }
 
+.custom-overlay-img-VHSTracking {
+  filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.5));
+  animation: imgVhsTracking 2s infinite;
+}
+@keyframes imgVhsTracking {
+  0% { transform: translateX(0); clip-path: inset(0 0 0 0); filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.5)) hue-rotate(0deg); }
+  5% { transform: translateX(-5px); clip-path: inset(10% 0 80% 0); filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.5)) hue-rotate(90deg); }
+  10% { transform: translateX(5px); clip-path: inset(40% 0 40% 0); filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.5)) hue-rotate(-90deg); }
+  15% { transform: translateX(0); clip-path: inset(0 0 0 0); filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.5)) hue-rotate(0deg); }
+  100% { transform: translateX(0); clip-path: inset(0 0 0 0); }
+}
+
+.custom-overlay-img-ColorCycle {
+  filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.5));
+  animation: imgColorCycle 10s linear infinite;
+}
+@keyframes imgColorCycle {
+  from { filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.5)) hue-rotate(0deg); }
+  to { filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.5)) hue-rotate(360deg); }
+}
+
+.custom-overlay-img-Mirror {
+  filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.5));
+  -webkit-box-reflect: below 2px linear-gradient(transparent, rgba(255,255,255,0.3));
+}
+