eb-player 2.0.2 → 2.0.6

package/dist/eb-player.css

@@ -85,8 +85,8 @@
   --eb-radius-control: 8px;
   --eb-duration-transition: 200ms;
   font-family: 'Inter', -apple-system, sans-serif;
-  border-radius: 14px;
-  box-shadow: 0 40px 80px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06);
+  border-radius: 0;
+  box-shadow: none;
   color: #fff;
 }
 
@@ -349,9 +349,9 @@
   transition: height .15s;
 }
 
-/* Red gradient fill */
+/* Solid red fill */
 [data-theme="lequipe"] .eb-player .eb-seekbar-progress {
-  background: linear-gradient(90deg, #d61e00, color-mix(in srgb, #d61e00 70%, #fff));
+  background: #d61e00;
   border-radius: 3px;
   transition: height .15s;
 }
@@ -525,72 +525,184 @@
    Settings panel: glassmorphism dropdown
    ============================================================ */
 [data-theme="lequipe"] .eb-player .eb-settings-panel {
-  background: rgba(10,10,20,.55);
-  backdrop-filter: blur(18px) saturate(160%);
-  -webkit-backdrop-filter: blur(18px) saturate(160%);
-  border-radius: 12px;
-  min-width: 300px;
-  box-shadow: 0 16px 48px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.1);
+  background: rgba(30,30,45,.6);
+  backdrop-filter: blur(24px) saturate(160%);
+  -webkit-backdrop-filter: blur(24px) saturate(160%);
+  border-radius: 14px;
+  width: min(340px, 80vw);
+  max-height: 60vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  box-shadow: 0 16px 48px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08);
+}
+
+/* Small viewports: compact rows */
+@media (max-height: 400px) {
+  [data-theme="lequipe"] .eb-player .eb-settings-category { padding: 12px 14px; font-size: 13px; gap: 10px; }
+  [data-theme="lequipe"] .eb-player .eb-settings-item { padding: 11px 14px; font-size: 13px; }
+  [data-theme="lequipe"] .eb-player .eb-settings-header { padding: 10px 14px; }
+  [data-theme="lequipe"] .eb-player .eb-settings-panel { min-width: 220px; border-radius: 10px; }
+  [data-theme="lequipe"] .eb-player .eb-settings-back { width: 30px; height: 30px; }
 }
 
 [data-theme="lequipe"] .eb-player .eb-settings-menu {
   padding: 0;
 }
 
-[data-theme="lequipe"] .eb-player .eb-settings-category,
-[data-theme="lequipe"] .eb-player .eb-settings-item,
-[data-theme="lequipe"] .eb-player .eb-settings-back {
-  padding: 15px 20px;
+/* Root menu category rows — icon | label | value | chevron */
+[data-theme="lequipe"] .eb-player .eb-settings-category {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 18px 20px;
+  font-size: 14px;
+  color: rgba(255,255,255,.95);
+  border-bottom: 1px solid rgba(255,255,255,.06);
+  transition: background .12s;
+  width: 100%;
+  border: none;
+  background: none;
+  cursor: pointer;
+  text-align: left;
+}
+
+[data-theme="lequipe"] .eb-player .eb-settings-category:last-child {
+  border-bottom: none;
+}
+
+[data-theme="lequipe"] .eb-player .eb-settings-category:hover {
+  background: rgba(255,255,255,.05);
+}
+
+[data-theme="lequipe"] .eb-player .eb-settings-category__icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(255,255,255,.6);
+}
+
+[data-theme="lequipe"] .eb-player .eb-settings-category__icon .eb-icon {
+  width: 22px;
+  height: 22px;
+}
+
+[data-theme="lequipe"] .eb-player .eb-settings-category__label {
+  flex: 1;
+  font-weight: 400;
+}
+
+[data-theme="lequipe"] .eb-player .eb-settings-category__value {
+  color: rgba(255,255,255,.45);
   font-size: 13px;
-  color: rgba(255,255,255,.9);
+  font-weight: 400;
+}
+
+[data-theme="lequipe"] .eb-player .eb-settings-category__chevron {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  color: rgba(255,255,255,.3);
+}
+
+[data-theme="lequipe"] .eb-player .eb-settings-category__chevron .eb-icon {
+  width: 16px;
+  height: 16px;
+}
+
+/* Sub-menu header — circular back button + title */
+[data-theme="lequipe"] .eb-player .eb-settings-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 18px;
+  border-bottom: 1px solid rgba(255,255,255,.08);
+}
+
+[data-theme="lequipe"] .eb-player .eb-settings-header__title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #fff;
+}
+
+[data-theme="lequipe"] .eb-player .eb-settings-back {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: rgba(255,255,255,.12);
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  transition: background .15s;
+  flex-shrink: 0;
+  color: #fff;
+}
+
+[data-theme="lequipe"] .eb-player .eb-settings-back:hover {
+  background: rgba(255,255,255,.2);
+}
+
+[data-theme="lequipe"] .eb-player .eb-settings-back .eb-icon {
+  width: 18px;
+  height: 18px;
+}
+
+/* Sub-menu items */
+[data-theme="lequipe"] .eb-player .eb-settings-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  font-size: 14px;
+  color: rgba(255,255,255,.7);
   border-bottom: 1px solid rgba(255,255,255,.06);
   transition: background .12s;
+  width: 100%;
+  border-left: none;
+  border-right: none;
+  border-top: none;
+  background: none;
+  cursor: pointer;
+  text-align: left;
 }
 
-[data-theme="lequipe"] .eb-player .eb-settings-category:last-child,
 [data-theme="lequipe"] .eb-player .eb-settings-item:last-child {
   border-bottom: none;
 }
 
-[data-theme="lequipe"] .eb-player .eb-settings-category:hover,
-[data-theme="lequipe"] .eb-player .eb-settings-item:hover,
-[data-theme="lequipe"] .eb-player .eb-settings-back:hover {
+[data-theme="lequipe"] .eb-player .eb-settings-item:hover {
   background: rgba(255,255,255,.05);
 }
 
-/* Selected item text */
+/* Selected item text — brighter */
 [data-theme="lequipe"] .eb-player .eb-settings-item--selected {
   color: #fff;
   font-weight: 500;
 }
 
-/* Active selection dot (filled red) */
+/* Active selection dot (filled accent) */
 [data-theme="lequipe"] .eb-player .eb-settings-item--selected::after {
   content: '';
-  width: 10px;
-  height: 10px;
+  width: 12px;
+  height: 12px;
   border-radius: 50%;
   background: var(--eb-accent, #d61e00);
-  box-shadow: 0 0 0 3px rgba(214,30,0,.25);
   flex-shrink: 0;
 }
 
 /* Non-selected items: hollow dot */
 [data-theme="lequipe"] .eb-player .eb-settings-item:not(.eb-settings-item--selected)::after {
   content: '';
-  width: 10px;
-  height: 10px;
+  width: 12px;
+  height: 12px;
   border-radius: 50%;
   border: 2px solid rgba(255,255,255,.2);
   flex-shrink: 0;
 }
 
-/* Back button */
-[data-theme="lequipe"] .eb-player .eb-settings-back {
-  gap: 14px;
-  font-weight: 600;
-}
-
 /* ============================================================
    Loading spinner
    ============================================================ */
@@ -1937,7 +2049,12 @@
   user-select: none;
 }
 
-/* Video element fills the container */
+/* Video element fills the container.
+   filter: brightness(1) is visually identical to no filter but forces Chrome to
+   composite the video through the GPU filter pipeline instead of using a hardware
+   overlay plane. Without this, DRM-protected video (Widevine) renders on a separate
+   hardware overlay that sits above ALL HTML layers — making seekbar snapshot preview
+   and other overlay elements invisible behind the main video. */
 .eb-player video.eb-video {
   position: absolute;
   top: 0;
@@ -1947,6 +2064,7 @@
   display: block;
   object-fit: contain;
   z-index: 1;
+  filter: brightness(1);
 }
 
 /* ============================================================
@@ -2219,9 +2337,10 @@
   position: absolute;
   background: rgba(0, 0, 0, 0.85);
   border-radius: 6px;
-  min-width: 180px;
+  min-width: 160px;
+  max-width: 220px;
   overflow: hidden;
-  font-size: 13px;
+  font-size: 12px;
   z-index: 40;
 }
 
@@ -2249,25 +2368,54 @@
   padding: 4px 0;
 }
 
+.eb-settings-submenu {
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.eb-settings-submenu::-webkit-scrollbar {
+  width: 4px;
+}
+
+.eb-settings-submenu::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 2px;
+}
+
+.eb-settings-header {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 5px 12px;
+}
+
 .eb-settings-category,
-.eb-settings-item,
-.eb-settings-back {
+.eb-settings-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: 8px 14px;
+  padding: 5px 12px;
   border: none;
   background: none;
   color: #fff;
   cursor: pointer;
-  font-size: 13px;
+  font-size: 12px;
   text-align: left;
 }
 
+.eb-settings-back {
+  display: flex;
+  align-items: center;
+  border: none;
+  background: none;
+  color: #fff;
+  cursor: pointer;
+  padding: 0;
+}
+
 .eb-settings-category:hover,
-.eb-settings-item:hover,
-.eb-settings-back:hover {
+.eb-settings-item:hover {
   background: rgba(255, 255, 255, 0.1);
 }
 
@@ -2350,13 +2498,27 @@
   white-space: nowrap;
   pointer-events: none;
   text-align: center;
+  z-index: 50;
+  overflow: hidden;
 }
 
 .eb-seekbar-preview {
+  position: static !important;
   width: 120px;
-  height: auto;
-  display: block;
-  margin-bottom: 4px;
+  height: 68px;
+  min-width: 0 !important;
+  min-height: 0 !important;
+  max-width: none !important;
+  max-height: none !important;
+  display: block !important;
+  object-fit: contain;
+  background: #000;
+  margin: 0 !important;
+  padding: 0 !important;
+  border: none !important;
+  inset: auto !important;
+  transform: none !important;
+  z-index: auto !important;
 }
 
 .eb-chapter-marker {
@@ -2716,7 +2878,7 @@
    Responsive: ensure container fills parent
    ============================================================ */
 .eb-player,
-.eb-player video {
+.eb-player video.eb-video {
   max-width: 100%;
   max-height: 100%;
 }