From 22995594a5b3128f6551b2607df3e179955881c6 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Mon, 13 Oct 2025 20:32:44 -0400
Subject: [PATCH] Refine player modal styles

---
 components/video-modal.html | 44 ++++++++------------
 css/tailwind.source.css     | 80 +++++++++++++++++++++++++++++++++++++
 2 files changed, 97 insertions(+), 27 deletions(-)

diff --git a/components/video-modal.html b/components/video-modal.html
index 6b1f50db..11eb8099 100644
--- a/components/video-modal.html
+++ b/components/video-modal.html
@@ -72,14 +72,12 @@
             </div>
 
             <div class="watch-container">
-              <div class="video-modal__details flex flex-col gap-6">
+              <div class="modal-info-panel">
+                <div class="video-modal__details flex flex-col gap-6">
                 <div
                   class="video-modal__headline flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between"
                 >
-                  <h2
-                    id="videoTitle"
-                    class="video-modal__title text-2xl font-semibold leading-tight text-text sm:text-3xl"
-                  ></h2>
+                  <h2 id="videoTitle" class="video-modal__title"></h2>
                   <div
                     id="modalStatus"
                     class="video-modal__status text-sm text-muted lg:text-right"
@@ -91,10 +89,10 @@
                 <div
                   class="video-modal__meta flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
                 >
-                  <div class="video-modal__meta-info flex flex-wrap items-center gap-3 text-sm text-muted">
-                    <span id="videoTimestamp">Posted just now</span>
-                    <span id="videoEditedTimestamp" class="hidden">Last edited just now</span>
-                    <span id="videoViewCount" class="video-modal__view-count">– views</span>
+                  <div class="video-modal__meta-info flex flex-wrap items-center gap-3">
+                    <span id="videoTimestamp" class="modal-meta">Posted just now</span>
+                    <span id="videoEditedTimestamp" class="modal-meta hidden">Last edited just now</span>
+                    <span id="videoViewCount" class="modal-meta modal-view-count">– views</span>
                   </div>
                 </div>
 
@@ -358,37 +356,29 @@
                     </div>
                   </div>
                 </div>
-              </div>
 
-              <div class="video-modal__channel flex flex-wrap items-center justify-between gap-4 rounded-2xl border border-border border-opacity-20 bg-surface px-6 py-5 shadow-sm">
-                <div class="flex items-center gap-4">
-                  <div class="video-modal__avatar h-14 w-14 overflow-hidden rounded-full bg-border-subtle">
+                <div class="channel-card">
+                  <div class="channel-card__avatar">
                     <img
                       id="creatorAvatar"
                       src=""
                       alt="Creator"
-                      class="h-full w-full cursor-pointer object-cover"
+                      class="cursor-pointer"
                     />
                   </div>
                   <div class="flex flex-col gap-1">
-                    <h3
-                      id="creatorName"
-                      class="cursor-pointer text-lg font-semibold text-text"
-                    >
+                    <h3 id="creatorName" class="channel-card__name cursor-pointer">
                       Creator Name
                     </h3>
-                    <p id="creatorNpub" class="text-sm text-muted">npub...</p>
+                    <p id="creatorNpub" class="channel-card__npub">npub...</p>
                   </div>
                 </div>
-              </div>
 
-              <div class="video-modal__description rounded-2xl border border-border border-opacity-20 bg-surface px-6 py-5">
-                <p
-                  id="videoDescription"
-                  class="whitespace-pre-wrap text-sm leading-relaxed text-text"
-                >
-                  No description available.
-                </p>
+                <div class="description-panel">
+                  <p id="videoDescription" class="whitespace-pre-wrap">
+                    No description available.
+                  </p>
+                </div>
               </div>
             </div>
           </div>
diff --git a/css/tailwind.source.css b/css/tailwind.source.css
index 57287003..64158e73 100644
--- a/css/tailwind.source.css
+++ b/css/tailwind.source.css
@@ -877,6 +877,86 @@
     padding-inline: clamp(1rem, 3vw, 2rem);
   }
 
+  #playerModal .modal-info-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  #playerModal h2#videoTitle {
+    margin: 0;
+    font-size: clamp(1.5rem, 1.25rem + 0.5vw, 1.875rem);
+    font-weight: 600;
+    line-height: 1.3;
+    color: var(--color-text);
+  }
+
+  #playerModal .modal-meta {
+    font-size: 0.875rem;
+    line-height: 1.4;
+    color: var(--color-text-muted);
+  }
+
+  #playerModal .modal-view-count {
+    font-weight: 600;
+    color: var(--color-text);
+  }
+
+  #playerModal .channel-card {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 1.25rem 1.5rem;
+    border-radius: 1rem;
+    border: 1px solid var(--color-border-translucent);
+    background-color: var(--color-surface);
+    box-shadow: var(--shadow-sm);
+  }
+
+  #playerModal .channel-card__avatar {
+    flex-shrink: 0;
+    width: 3.5rem;
+    height: 3.5rem;
+    border-radius: 9999px;
+    overflow: hidden;
+    background-color: var(--color-border-subtle);
+  }
+
+  #playerModal .channel-card__avatar img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  #playerModal .channel-card__name {
+    margin: 0;
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: var(--color-text);
+  }
+
+  #playerModal .channel-card__npub {
+    margin: 0;
+    font-size: 0.875rem;
+    color: var(--color-text-muted);
+  }
+
+  #playerModal .description-panel {
+    padding: 1.25rem 1.5rem;
+    border-radius: 1rem;
+    border: 1px solid var(--color-border-translucent);
+    background-color: var(--color-surface);
+    box-shadow: var(--shadow-sm);
+  }
+
+  #playerModal .description-panel p {
+    margin: 0;
+    font-size: 0.875rem;
+    line-height: 1.6;
+    color: var(--color-text);
+  }
+
   .player-modal__content {
     @apply video-modal__panel;
   }