@hanifhan1f/vidstack 1.12.19 → 1.12.24

package/player/styles/default/layouts/video.css

@@ -775,18 +775,20 @@
 .vds-video-layout .vds-episodes-panel {
   position: absolute;
   top: 50%;
-  right: 20px;
-  width: min(36vw, 430px);
-  max-height: min(74vh, 620px);
-  overflow: auto;
+  right: max(16px, 1.5vw);
+  width: min(34vw, 400px);
+  max-height: min(78vh, 640px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
   padding: 0;
-  background: linear-gradient(180deg, rgb(10 10 10 / 94%) 0%, rgb(4 4 4 / 92%) 100%);
-  border: 1px solid rgb(255 255 255 / 20%);
-  border-radius: 18px;
-  backdrop-filter: blur(14px);
+  background: linear-gradient(180deg, rgb(12 12 12 / 96%) 0%, rgb(6 6 6 / 94%) 100%);
+  border: 1px solid rgb(255 255 255 / 14%);
+  border-radius: 14px;
+  backdrop-filter: blur(16px) saturate(1.2);
   box-shadow:
-    0 26px 56px rgb(0 0 0 / 58%),
-    inset 0 1px 0 rgb(255 255 255 / 8%);
+    0 24px 48px rgb(0 0 0 / 55%),
+    inset 0 1px 0 rgb(255 255 255 / 6%);
   z-index: 20;
   opacity: 0;
   transform: translate3d(16px, -50%, 0);
@@ -808,16 +810,18 @@
 }
 
 .vds-video-layout .vds-episodes-panel-header {
+  flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 14px 16px 12px;
-  border-bottom: 1px solid rgb(255 255 255 / 12%);
+  gap: 12px;
+  padding: 14px 16px 13px;
+  border-bottom: 1px solid rgb(255 255 255 / 10%);
   position: sticky;
   top: 0;
   z-index: 1;
-  background: linear-gradient(180deg, rgb(10 10 10 / 95%), rgb(10 10 10 / 74%));
-  backdrop-filter: blur(8px);
+  background: linear-gradient(180deg, rgb(12 12 12 / 98%), rgb(10 10 10 / 88%));
+  backdrop-filter: blur(10px);
 }
 
 .vds-video-layout .vds-episodes-close-btn {
@@ -839,23 +843,36 @@
 }
 
 .vds-video-layout .vds-episodes-panel-title {
-  font-size: 15px;
+  font-size: 14px;
   font-weight: 600;
-  letter-spacing: 0.01em;
+  letter-spacing: 0.02em;
+  line-height: 1.3;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  min-width: 0;
 }
 
 .vds-video-layout .vds-episodes-list {
+  flex: 1 1 auto;
+  min-height: 0;
   margin: 0;
-  padding: 10px;
-  display: grid;
-  gap: 0;
+  padding: 10px 10px 14px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 8px;
   scrollbar-width: thin;
   scrollbar-color: rgb(255 255 255 / 28%) transparent;
 }
 
+/* Each row must keep its full height — min-height:0 on items was collapsing rows and stacking text. */
+.vds-video-layout .vds-episodes-list > .vds-episode-item {
+  flex: 0 0 auto;
+}
+
 .vds-video-layout .vds-episodes-empty {
   padding: 12px;
   font-size: 12px;
@@ -936,34 +953,33 @@
 
 .vds-video-layout .vds-episode-item {
   display: grid !important;
-  grid-template-columns: 152px minmax(0, 1fr) !important;
+  grid-template-columns: 148px minmax(0, 1fr) !important;
+  grid-template-rows: auto;
   align-items: start;
+  align-content: start;
   width: 100%;
-  min-height: 108px;
+  min-height: min-content;
+  box-sizing: border-box;
   gap: 12px;
-  padding: 11px 2px;
-  border-radius: 0;
-  border: 0;
-  border-bottom: 1px solid rgb(255 255 255 / 10%);
-  background: transparent;
+  padding: 10px 10px 10px 8px;
+  border-radius: 10px;
+  border: 1px solid rgb(255 255 255 / 6%);
+  background: rgb(255 255 255 / 3%);
   transition:
-    transform 0.18s ease,
-    opacity 0.18s ease;
+    background 0.18s ease,
+    border-color 0.18s ease,
+    transform 0.18s ease;
 }
 
 .vds-video-layout .vds-episode-item:hover {
-  transform: translateX(2px);
-  opacity: 0.98;
+  background: rgb(255 255 255 / 6%);
+  border-color: rgb(255 255 255 / 10%);
 }
 
 .vds-video-layout .vds-episode-item[data-active='true'] {
-  position: relative;
   cursor: default;
-  background: linear-gradient(90deg, rgb(229 9 20 / 12%) 0%, rgb(255 255 255 / 4%) 42%);
-  border-radius: 12px;
-  padding-inline: 8px;
-  margin-inline: -6px;
-  outline: 1px solid rgb(229 9 20 / 35%);
+  background: linear-gradient(135deg, rgb(229 9 20 / 14%) 0%, rgb(255 255 255 / 5%) 100%);
+  border-color: rgb(229 9 20 / 45%);
   box-shadow: inset 3px 0 0 #e50914;
 }
 
@@ -972,42 +988,44 @@
 }
 
 .vds-video-layout .vds-episode-item[data-active='true'] .vds-episode-thumb {
-  filter: brightness(0.78);
+  filter: brightness(0.88);
 }
 
 .vds-video-layout .vds-episode-item[data-active='true'] .vds-episode-label {
-  color: #ff6b6b;
+  color: #ffb4b4;
 }
 
 .vds-video-layout .vds-episode-item:focus-visible {
-  outline: 2px solid rgb(255 255 255 / 55%);
-  outline-offset: 2px;
+  outline: 2px solid rgb(255 255 255 / 45%);
+  outline-offset: 1px;
 }
 
 .vds-video-layout .vds-episode-item[data-active='true']:focus-visible {
-  outline-color: rgb(229 9 20 / 70%);
+  outline-color: rgb(229 9 20 / 55%);
 }
 
-.vds-video-layout .vds-episode-active-overlay {
-  position: absolute;
-  inset: 0;
+.vds-video-layout .vds-episode-meta-primary {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  justify-content: center;
-  background: linear-gradient(180deg, rgb(0 0 0 / 15%) 0%, rgb(0 0 0 / 45%) 100%);
-  pointer-events: none;
+  gap: 6px;
+  flex: 1;
+  min-width: 0;
 }
 
-.vds-video-layout .vds-episode-playing-badge {
+.vds-video-layout .vds-episode-now-chip {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 7px;
+  border-radius: 4px;
   background: #e50914;
   color: #fff;
-  font-size: 10px;
+  font-size: 9px;
   font-weight: 700;
-  padding: 4px 8px;
-  border-radius: 6px;
+  letter-spacing: 0.07em;
   text-transform: uppercase;
-  letter-spacing: 0.06em;
-  box-shadow: 0 4px 14px rgb(0 0 0 / 35%);
+  line-height: 1.2;
 }
 
 .vds-video-layout .vds-episode-progress-track {
@@ -1027,19 +1045,22 @@
 
 .vds-video-layout .vds-episode-thumb {
   display: block;
-  width: 152px;
-  height: 86px;
+  width: 148px;
+  height: 84px;
   object-fit: cover;
-  border-radius: 10px;
+  border-radius: 8px;
   background: #151515;
-  border: 1px solid rgb(255 255 255 / 12%);
+  border: 1px solid rgb(255 255 255 / 10%);
 }
 
 .vds-video-layout .vds-episode-thumb-wrap {
-  width: 152px;
-  height: 86px;
-  border-radius: 10px;
+  position: relative;
+  width: 148px;
+  height: 84px;
+  border-radius: 8px;
   overflow: hidden;
+  flex-shrink: 0;
+  align-self: start;
 }
 
 .vds-video-layout .vds-episode-thumb-placeholder {
@@ -1048,9 +1069,14 @@
 
 .vds-video-layout .vds-episode-body {
   min-width: 0;
-  display: grid;
-  align-content: start;
-  gap: 3px;
+  width: 100%;
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  align-self: start;
+  gap: 5px;
+  padding-top: 1px;
 }
 
 .vds-video-layout .vds-episode-title,
@@ -1063,28 +1089,34 @@
 
 .vds-video-layout .vds-episode-meta-row {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
-  gap: 8px;
+  gap: 10px;
+}
+
+.vds-video-layout .vds-episode-meta-row .vds-episode-runtime {
+  flex-shrink: 0;
+  margin-top: 1px;
 }
 
 .vds-video-layout .vds-episode-label {
   font-size: 10px;
   font-weight: 700;
-  letter-spacing: 0.08em;
+  letter-spacing: 0.07em;
   text-transform: uppercase;
   color: #e50914;
 }
 
 .vds-video-layout .vds-episode-runtime {
   font-size: 11px;
-  color: rgb(255 255 255 / 65%);
+  font-variant-numeric: tabular-nums;
+  color: rgb(255 255 255 / 72%);
 }
 
 .vds-video-layout .vds-episode-title {
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 600;
-  line-height: 1.2;
+  line-height: 1.28;
 }
 
 .vds-video-layout .vds-episode-subtitle {
@@ -1095,14 +1127,16 @@
 
 .vds-video-layout .vds-episode-desc {
   margin: 0;
-  font-size: 12px;
-  line-height: 1.35;
-  color: rgb(255 255 255 / 78%);
-  line-clamp: 2;
+  margin-top: 2px;
+  font-size: 11px;
+  line-height: 1.45;
+  color: rgb(255 255 255 / 68%);
   display: -webkit-box;
-  -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
   overflow: hidden;
+  word-break: break-word;
+  min-height: 0;
 }
 
 @media (max-width: 640px) {
@@ -1118,13 +1152,13 @@
   }
 
   .vds-video-layout .vds-episodes-panel {
-    left: 10px;
-    right: 10px;
+    left: 8px;
+    right: 8px;
     width: auto;
     top: auto;
-    bottom: 64px;
-    max-height: min(62vh, 480px);
-    border-radius: 14px;
+    bottom: 56px;
+    max-height: min(64vh, 520px);
+    border-radius: 12px;
     transform: translate3d(0, 10px, 0);
   }