unified-video-framework 1.4.213 → 1.4.215

package/packages/web/src/WebPlayer.ts

@@ -4314,10 +4314,10 @@ export class WebPlayer extends BasePlayer {
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
-        background: rgba(0,0,0,0.8);
+        background: rgba(0,0,0,0.88);
         color: #fff;
-        padding: 20px 30px;
-        border-radius: 8px;
+        padding: 22px 32px;
+        border-radius: 12px;
         font-size: 24px;
         font-weight: 600;
         opacity: 0;
@@ -4327,7 +4327,9 @@ export class WebPlayer extends BasePlayer {
         white-space: nowrap;
         text-align: center;
         min-width: auto;
-        max-width: 200px;
+        max-width: 400px;
+        backdrop-filter: blur(16px);
+        box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
       }
       
       /* Time-specific indicator styling */
@@ -4388,25 +4390,37 @@ export class WebPlayer extends BasePlayer {
         pointer-events: none;
         z-index: 2;
       }
-      .uvf-shortcut-indicator .uvf-ki-volume { align-items: center; }
-      .uvf-shortcut-indicator .uvf-ki-vol-icon svg { width: 36px; height: 36px; }
+      .uvf-shortcut-indicator .uvf-ki-volume { 
+        align-items: center;
+        gap: 16px;
+      }
+      .uvf-shortcut-indicator .uvf-ki-vol-icon svg { 
+        width: 40px; 
+        height: 40px;
+        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
+      }
       .uvf-shortcut-indicator .uvf-ki-vol-bar {
-        width: 180px;
-        height: 8px;
-        background: rgba(255,255,255,0.25);
-        border-radius: 4px;
+        width: 220px;
+        height: 10px;
+        background: rgba(255,255,255,0.2);
+        border-radius: 5px;
         overflow: hidden;
+        box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
       }
       .uvf-shortcut-indicator .uvf-ki-vol-fill {
         height: 100%;
         background: linear-gradient(90deg, var(--uvf-accent-1), var(--uvf-accent-2));
+        border-radius: 5px;
+        box-shadow: 0 1px 4px rgba(255,87,34,0.4);
       }
       .uvf-shortcut-indicator .uvf-ki-vol-text {
-        font-size: 16px;
-        font-weight: 600;
+        font-size: 20px;
+        font-weight: 700;
         color: var(--uvf-text-primary);
-        min-width: 42px;
+        min-width: 56px;
         text-align: right;
+        letter-spacing: 0.5px;
+        text-shadow: 0 2px 6px rgba(0,0,0,0.4);
       }
       .uvf-shortcut-indicator .uvf-ki-text {
         font-size: 18px;
@@ -4423,68 +4437,123 @@ export class WebPlayer extends BasePlayer {
       /* Responsive shortcut/volume indicator for mobile and tablet */
       @media screen and (max-width: 767px) {
         .uvf-shortcut-indicator {
-          padding: 16px 24px;
+          padding: 18px 26px;
           font-size: 20px;
-          max-width: calc(100vw - 40px);
-          border-radius: 12px;
-          backdrop-filter: blur(10px);
+          max-width: calc(100vw - 48px);
+          border-radius: 16px;
+          backdrop-filter: blur(12px);
+          background: rgba(0,0,0,0.85);
+          box-shadow: 0 8px 32px rgba(0,0,0,0.4);
         }
         
-        /* Volume indicator - more compact on mobile */
+        /* Volume indicator - vertical layout on mobile */
         .uvf-shortcut-indicator .uvf-ki-volume {
           flex-direction: column;
-          gap: 12px;
+          gap: 14px;
+          align-items: center;
         }
         
         .uvf-shortcut-indicator .uvf-ki-vol-icon svg {
-          width: 32px;
-          height: 32px;
+          width: 36px;
+          height: 36px;
+          filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
         }
         
         .uvf-shortcut-indicator .uvf-ki-vol-bar {
-          width: clamp(200px, 70vw, 280px);
-          height: 10px;
-          border-radius: 5px;
+          width: clamp(220px, 75vw, 300px);
+          height: 12px;
+          border-radius: 6px;
+          background: rgba(255,255,255,0.2);
+          box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
+        }
+        
+        .uvf-shortcut-indicator .uvf-ki-vol-fill {
+          height: 100%;
+          border-radius: 6px;
+          box-shadow: 0 1px 4px rgba(255,87,34,0.4);
         }
         
         .uvf-shortcut-indicator .uvf-ki-vol-text {
-          font-size: 22px;
+          font-size: 28px;
           font-weight: 700;
           min-width: auto;
           text-align: center;
           width: 100%;
+          letter-spacing: 0.5px;
+          text-shadow: 0 2px 8px rgba(0,0,0,0.5);
         }
         
-        /* Skip indicators - slightly smaller */
+        /* Skip indicators - optimized for mobile */
         .uvf-shortcut-indicator .uvf-ki-skip {
-          width: 90px;
-          height: 90px;
+          width: 96px;
+          height: 96px;
         }
         
         .uvf-shortcut-indicator .uvf-ki-skip svg {
-          width: 90px;
-          height: 90px;
+          width: 96px;
+          height: 96px;
+          filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
         }
         
         .uvf-shortcut-indicator .uvf-ki-skip .uvf-ki-skip-num {
-          font-size: 19px;
+          font-size: 20px;
+          font-weight: 800;
         }
         
         /* Icon indicators */
         .uvf-shortcut-indicator .uvf-ki svg {
-          width: 56px;
-          height: 56px;
+          width: 60px;
+          height: 60px;
+          filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
         }
         
         .uvf-shortcut-indicator .uvf-ki-text {
-          font-size: 16px;
+          font-size: 17px;
+          font-weight: 600;
+        }
+      }
+      
+      /* Mobile landscape - more compact */
+      @media screen and (max-width: 767px) and (orientation: landscape) {
+        .uvf-shortcut-indicator {
+          padding: 14px 20px;
+          max-width: calc(100vw - 80px);
+        }
+        
+        .uvf-shortcut-indicator .uvf-ki-volume {
+          flex-direction: row;
+          gap: 12px;
+        }
+        
+        .uvf-shortcut-indicator .uvf-ki-vol-icon svg {
+          width: 28px;
+          height: 28px;
+        }
+        
+        .uvf-shortcut-indicator .uvf-ki-vol-bar {
+          width: clamp(140px, 50vw, 200px);
+          height: 10px;
+        }
+        
+        .uvf-shortcut-indicator .uvf-ki-vol-text {
+          font-size: 18px;
         }
       }
       
       @media screen and (min-width: 768px) and (max-width: 1023px) {
         /* Tablet optimization */
+        .uvf-shortcut-indicator {
+          padding: 18px 28px;
+          border-radius: 14px;
+        }
+        
+        .uvf-shortcut-indicator .uvf-ki-volume {
+          gap: 14px;
+        }
+        
         .uvf-shortcut-indicator .uvf-ki-vol-bar {
-          width: 160px;
+          width: 180px;
+          height: 10px;
         }
         
         .uvf-shortcut-indicator .uvf-ki-vol-icon svg {
@@ -4493,7 +4562,8 @@ export class WebPlayer extends BasePlayer {
         }
         
         .uvf-shortcut-indicator .uvf-ki-vol-text {
-          font-size: 15px;
+          font-size: 18px;
+          font-weight: 600;
         }
       }