Revamp subtitle styling

src/components/VideoElement.css

@@ -25,35 +25,23 @@
   display: none !important;
 }
 
-/* Modern Subtitle Styling */
+/* Subtitle Styling */
 .video-element::cue {
-  /* Typography */
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-  font-size: 1.75rem;
-  font-weight: 700;
-  line-height: 1.4;
-  letter-spacing: 0.5px;
-
-  /* Colors - No background, only text with strong shadow */
-  color: #ffffff;
-  background-color: transparent;
-
-  /* Visual Effects - Strong shadow for readability */
-  text-shadow:
-    /* Strong black outline */
-    -2px -2px 0 #000,
-    2px -2px 0 #000,
-    -2px 2px 0 #000,
-    2px 2px 0 #000,
-    0 -2px 0 #000,
-    0 2px 0 #000,
-    -2px 0 0 #000,
-    2px 0 0 #000,
-    /* Additional shadow for depth */
-    0 4px 8px rgba(0, 0, 0, 0.9),
-    0 0 12px rgba(0, 0, 0, 0.8);
-
-  /* Better rendering */
+  font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  font-size: clamp(1.05rem, 2vw, 1.9rem);
+  font-weight: 600;
+  line-height: 1.45;
+  letter-spacing: 0.015em;
+  text-align: center;
+  color: var(--player-subtitle-color);
+  background-color: var(--player-subtitle-bg);
+  padding: 0.45em 0.9em;
+  border-radius: 14px;
+  box-shadow: var(--player-subtitle-shadow), 0 0 0 1px rgba(255, 255, 255, 0.08);
+  text-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
+  white-space: pre-line;
+  word-break: break-word;
+  text-wrap: balance;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
@@ -62,7 +50,8 @@
 /* Fullscreen subtitle adjustments */
 :fullscreen .video-element::cue,
 .video-element:fullscreen::cue {
-  font-size: 2.25rem;
+  font-size: clamp(1.35rem, 2.4vw, 2.35rem);
+  padding: 0.55em 1.1em;
 }
 
 /* Ensure text tracks are properly positioned - above controls */
@@ -72,26 +61,28 @@
   bottom: 0 !important;
   left: 0 !important;
   right: 0 !important;
-  z-index: 1 !important;
+  z-index: var(--player-z-subtitle) !important;
   display: flex !important;
   flex-direction: column !important;
   justify-content: flex-end !important;
   align-items: center !important;
-  /* Position above controls bar (controls bar is ~120px high with padding) */
-  padding-bottom: 130px !important;
+  padding-bottom: var(--player-subtitle-bottom-offset) !important;
+  padding-bottom: calc(var(--player-subtitle-bottom-offset) + env(safe-area-inset-bottom)) !important;
   pointer-events: none !important;
+  gap: 12px !important;
 }
 
 .video-element::-webkit-media-text-track-display {
   overflow: visible !important;
   width: 100% !important;
-  max-width: 85% !important;
+  max-width: var(--player-subtitle-max-width, 88%) !important;
   text-align: center !important;
 }
 
 /* Multi-line subtitle support */
 .video-element::cue-region {
-  width: 85%;
+  width: min(var(--player-subtitle-max-width, 88%), 60ch);
+  margin: 0 auto;
 }
 
 /* Better contrast for different cue types */
@@ -110,15 +101,17 @@
 /* Responsive adjustments */
 @media (max-width: 640px) {
   .video-element::cue {
-    font-size: 1.25rem;
+    font-size: clamp(1rem, 3.4vw, 1.35rem);
+    padding: 0.35em 0.75em;
   }
 
   .video-element::-webkit-media-text-track-container {
-    padding-bottom: 110px !important;
+    padding-bottom: 72px !important;
+    padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
   }
 
   :fullscreen .video-element::cue,
   .video-element:fullscreen::cue {
-    font-size: 1.75rem;
+    font-size: clamp(1.2rem, 3.6vw, 1.8rem);
   }
 }

src/styles/variables.css

@@ -15,6 +15,11 @@
   --player-text: #ffffff;
   --player-text-secondary: #d1d5db;
   --player-text-muted: #9ca3af;
+  --player-subtitle-color: #f9fafb;
+  --player-subtitle-bg: rgba(15, 15, 18, 0.78);
+  --player-subtitle-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
+  --player-subtitle-max-width: 88%;
+  --player-subtitle-bottom-offset: clamp(88px, 11vh, 160px);
 
   /* Border & Divider */
   --player-border: #374151;