From bda1c2ef2d083552207b64c2a54b6939f6135859 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Mon, 13 Oct 2025 20:10:08 -0400
Subject: [PATCH] Restyle player modal navigation bar

---
 components/video-modal.html | 70 +++++++++++++++++++++++--------------
 css/tailwind.source.css     | 42 +++++++++++++++++-----
 2 files changed, 77 insertions(+), 35 deletions(-)

diff --git a/components/video-modal.html b/components/video-modal.html
index 340e191b..6b1f50db 100644
--- a/components/video-modal.html
+++ b/components/video-modal.html
@@ -11,33 +11,49 @@
   <div class="bv-modal__panel" tabindex="-1">
     <div class="player-modal__container video-modal__container">
       <div class="player-modal__content video-modal__panel flex flex-col gap-6">
-        <div
-          id="modalNav"
-          class="modal-nav modal-nav--visible video-modal__nav sticky top-0 z-60"
-        >
-          <div class="video-modal__nav-bar">
-            <button
-              id="closeModal"
-              type="button"
-              class="video-modal__close focus-ring"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="h-5 w-5"
-                aria-hidden="true"
-              >
-                <path d="M15 18l-6-6 6-6" />
-              </svg>
-              <span class="sr-only">Close player</span>
-            </button>
+        <div id="modalNav" class="modal-nav modal-nav--visible">
+          <div class="watch-container modal-nav__bar">
+            <div class="modal-nav__context">Now watching</div>
+            <div class="modal-actions">
+              <a href="/" class="icon-button focus-ring" aria-label="Return to home">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  class="h-5 w-5"
+                  aria-hidden="true"
+                >
+                  <path d="M3 11L12 3l9 8" />
+                  <path d="M5 13v8h14v-8" />
+                  <path d="M9 21v-6h6v6" />
+                </svg>
+                <span class="sr-only">Return to home</span>
+              </a>
+              <button id="closeModal" type="button" class="icon-button focus-ring">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  class="h-5 w-5"
+                  aria-hidden="true"
+                >
+                  <path d="M15 18l-6-6 6-6" />
+                </svg>
+                <span class="sr-only">Close player</span>
+              </button>
+            </div>
           </div>
         </div>
 
diff --git a/css/tailwind.source.css b/css/tailwind.source.css
index df80f063..6c933bc3 100644
--- a/css/tailwind.source.css
+++ b/css/tailwind.source.css
@@ -881,20 +881,46 @@
     @apply video-modal__panel;
   }
 
-  .video-modal__nav {
-    @apply sticky top-0 z-[60] border-b border-border border-opacity-20 bg-surface bg-opacity-95 backdrop-blur-md;
+  #playerModal .modal-nav {
+    @apply sticky top-0 z-[60] transition-transform duration-150 translate-y-0;
+    background-color: var(--color-overlay-darker);
+    background-image: linear-gradient(
+      180deg,
+      var(--color-overlay-panel-gradient-start) 0%,
+      var(--color-overlay-panel-gradient-end) 100%
+    );
+    border-bottom: 1px solid var(--color-border-translucent);
+    backdrop-filter: blur(6px);
+    -webkit-backdrop-filter: blur(6px);
   }
 
-  .video-modal__nav-bar {
-    @apply flex w-full items-center justify-between gap-3 px-2 py-2 sm:px-4;
+  #playerModal .modal-nav__bar {
+    @apply flex w-full items-center gap-3 px-2 py-2 sm:px-4;
   }
 
-  .video-modal__close {
-    @apply inline-flex h-10 w-10 items-center justify-center rounded-full bg-panel text-text transition duration-base ease-out hover:bg-panel-hover;
+  #playerModal .modal-nav__context {
+    @apply text-xs font-semibold uppercase tracking-wide text-muted;
   }
 
-  .modal-nav {
-    @apply video-modal__nav transition-transform duration-150 translate-y-0;
+  #playerModal .modal-nav .modal-actions {
+    @apply flex items-center gap-2;
+    margin-left: auto;
+  }
+
+  #playerModal .modal-nav .icon-button {
+    @apply inline-flex items-center justify-center rounded-full text-muted transition duration-150 ease-out;
+    width: 2.5rem;
+    height: 2.5rem;
+    background: var(--color-surface-tint-subtle);
+    border: 1px solid var(--color-border-translucent-medium);
+    color: var(--color-text-muted);
+  }
+
+  #playerModal .modal-nav .icon-button:hover,
+  #playerModal .modal-nav .icon-button:focus-visible {
+    background: var(--color-border-translucent-bright);
+    border-color: var(--color-border-translucent-strong);
+    color: var(--color-text);
   }
 
   .modal-nav--hidden {