Refine video modal utilities

components/video-modal.html

@@ -2,12 +2,12 @@
 <div id="playerModal" class="bv-modal hidden" role="dialog" aria-modal="true">
   <div class="bv-modal-backdrop" data-dismiss></div>
   <div class="bv-modal__panel" tabindex="-1">
-    <div class="player-modal__container">
-      <div class="player-modal__content grid gap-6">
+    <div class="player-modal__container video-modal__container">
+      <div class="player-modal__content video-modal__panel grid gap-6">
         <!-- Navigation bar - sliding at top -->
         <div
           id="modalNav"
-          class="modal-nav sticky top-0 z-60 transition-transform duration-150"
+          class="modal-nav video-modal__nav sticky top-0 z-60 transition-transform duration-150"
         >
           <div
             class="card flex w-full items-center justify-between gap-4 px-4 py-3"
@@ -34,7 +34,7 @@
                 </svg>
               </button>
             </div>
-            <div class="flex items-center gap-2">
+            <div class="modal-actions video-modal__actions flex items-center gap-2">
               <button
                 id="copyMagnetBtn"
                 type="button"
@@ -265,17 +265,17 @@
         <div
           class="player-modal__body grid gap-6 lg:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)]"
         >
-          <div class="player-modal__video modal-video-shell">
+          <div class="player-modal__video video-modal__video modal-video-shell">
             <div class="card overflow-hidden p-0 lg:sticky lg:top-24">
               <video
                 id="modalVideo"
-                class="aspect-video w-full bg-black"
+                class="video-modal__media"
                 controls
               ></video>
             </div>
           </div>
 
-          <div class="player-modal__info modal-info-panel grid gap-4">
+          <div class="player-modal__info video-modal__info modal-info-panel grid gap-4">
             <div class="card flex flex-col gap-4 px-6 py-5">
               <div class="flex items-start justify-between gap-4">
                 <h2

css/style.css

@@ -746,7 +746,9 @@ header img {
 }
 
 #modalContainer > #playerModal .player-modal__container,
-#modalContainer > #playerModal .player-modal__content {
+#modalContainer > #playerModal .player-modal__content,
+#modalContainer > #playerModal .video-modal__container,
+#modalContainer > #playerModal .video-modal__panel {
   z-index: var(--z-modal-content);
 }
 
@@ -962,62 +964,27 @@ header img {
   display: flex;
 }
 
-#playerModal .player-modal__container {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  min-height: 100vh;
-  padding: 0;
-  margin: 0;
-}
-
+.video-modal__panel,
 #playerModal .player-modal__content {
-  position: relative;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  min-height: 100%;
-  max-width: none;
-  background-color: var(--color-surface);
-  overflow: visible;
-  box-shadow: none;
   animation: fadeIn var(--modal-motion-duration) ease-out;
 }
 
+.video-modal__video,
 #playerModal .player-modal__video {
-  width: 100%;
-  position: sticky;
-  top: 0;
-  z-index: 51;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   padding: clamp(0.75rem, 3.5vw, 2.5rem);
-  background-color: var(--color-bg);
   border-bottom: 0.0625rem solid rgba(148, 163, 184, 0.18);
 }
 
+.video-modal__media,
 #playerModal .player-modal__video video {
-  width: 100%;
-  aspect-ratio: 16 / 9;
-  background-color: var(--color-black);
-  border-radius: 0.75rem;
-  display: block;
   box-shadow: 0 1.125rem 2.75rem rgba(8, 11, 30, 0.55);
   max-height: min(80vh, calc(100vw * 9 / 16));
-  object-fit: contain;
 }
 
+.video-modal__info,
 #playerModal .player-modal__info {
-  flex: 0 0 auto;
   padding: clamp(1.5rem, 3vw, 2.5rem);
   padding-bottom: clamp(2.5rem, 6vw, 4rem);
-  background-color: var(--color-bg);
-  border-top: 0.0625rem solid rgba(148, 163, 184, 0.16);
   box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.35);
 }
 
@@ -1121,7 +1088,8 @@ body.modal-open #sidebarOverlay {
 }
 
 #modalNav.modal-nav,
-.modal-nav {
+.modal-nav,
+.video-modal__nav {
   background-color: var(--color-bg);
   border-bottom: 0.0625rem solid rgba(148, 163, 184, 0.25);
   box-shadow: 0 0.75rem 2rem rgba(8, 11, 30, 0.45);
@@ -1132,21 +1100,7 @@ body.modal-open #sidebarOverlay {
   gap: 0.75rem;
 }
 
-#modalNav {
-  position: sticky;
-  top: 0;
-  z-index: 60;
-}
-
-.modal-actions {
-  margin-left: auto;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 0.5rem;
-  flex-wrap: nowrap;
-}
-
+[data-modal-zap-wrapper] .zap-popover,
 .zap-popover {
   position: absolute;
   top: calc(100% + 0.5rem);
@@ -1168,6 +1122,10 @@ body.modal-open #sidebarOverlay {
 
 .modal-actions__overflow {
   position: relative;
+}
+
+.modal-actions__overflow,
+[data-more-menu-wrapper] {
   overflow: visible;
 }
 

css/tailwind.source.css

@@ -196,4 +196,60 @@
     @apply bv-modal__panel;
   }
 
+  .video-modal__container {
+    @apply flex h-full min-h-screen w-full flex-1 flex-col;
+  }
+
+  .player-modal__container {
+    @apply video-modal__container;
+  }
+
+  .video-modal__panel {
+    @apply bv-modal__panel relative flex w-full flex-1 flex-col overflow-visible bg-surface shadow-none;
+  }
+
+  .player-modal__content {
+    @apply video-modal__panel;
+  }
+
+  .video-modal__nav {
+    @apply sticky top-0 z-[60] border-b border-border border-opacity-40 bg-bg;
+  }
+
+  .modal-nav {
+    @apply video-modal__nav;
+  }
+
+  .video-modal__actions {
+    @apply ml-auto flex flex-nowrap items-center justify-end gap-2;
+  }
+
+  .modal-actions {
+    @apply video-modal__actions;
+  }
+
+  .video-modal__video {
+    @apply sticky top-0 z-[51] flex w-full flex-shrink-0 items-center justify-center border-b border-border border-opacity-20 bg-bg;
+  }
+
+  .player-modal__video {
+    @apply video-modal__video;
+  }
+
+  .video-modal__media {
+    @apply aspect-video block w-full rounded-xl bg-black object-contain shadow-2xl;
+  }
+
+  .player-modal__video video {
+    @apply video-modal__media;
+  }
+
+  .video-modal__info {
+    @apply flex-none border-t border-border border-opacity-20 bg-bg;
+  }
+
+  .player-modal__info {
+    @apply video-modal__info;
+  }
+
 }