From cd966c28af2915c9f37abfe435ac3a7200580f12 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Sat, 18 Oct 2025 10:52:54 -0400
Subject: [PATCH] Add gradient overlay for channel banner

---
 css/tokens.css             | 16 +++++++++++++---
 tailwind.config.cjs        |  5 +++--
 views/channel-profile.html |  2 +-
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/css/tokens.css b/css/tokens.css
index ce0088db..b02328a8 100644
--- a/css/tokens.css
+++ b/css/tokens.css
@@ -17,7 +17,15 @@
   --surface-overlay-strong: var(--color-overlay-strong);
   --surface-overlay-darker: var(--color-overlay-darker);
   --surface-overlay-black: var(--color-overlay-black);
-  --surface-overlay-banner: var(--color-overlay-banner);
+  --surface-overlay-banner: var(--surface-overlay-banner-bottom);
+  --surface-overlay-banner-bottom: var(--color-overlay-banner-bottom);
+  --surface-overlay-banner-transparent: var(--color-overlay-banner-transparent);
+  --surface-overlay-banner-gradient: linear-gradient(
+    to top,
+    var(--surface-overlay-banner-bottom) 0%,
+    var(--surface-overlay-banner-transparent) 30%,
+    var(--surface-overlay-banner-transparent) 100%
+  );
   --surface-overlay-panel: var(--color-overlay-panel);
   --surface-overlay-panel-soft: var(--color-overlay-panel-soft);
   --surface-overlay-panel-tint: var(--color-overlay-panel-tint);
@@ -500,7 +508,8 @@
   --color-modal-backdrop: rgb(15 23 42 / 0.28);
   --color-modal-surface: rgb(255 255 255 / 0.94);
   --color-overlay-veil: rgb(103 112 133 / 0.45);
-  --color-overlay-banner: rgb(214 219 232 / 0.6);
+  --color-overlay-banner-bottom: rgb(255 255 255 / 0.5);
+  --color-overlay-banner-transparent: rgb(255 255 255 / 0);
   --color-overlay-backdrop: rgb(15 23 42 / 0.2);
 
   --color-sidebar-surface: rgb(255 255 255 / 0.9);
@@ -651,7 +660,8 @@
   --color-modal-backdrop: rgb(5 8 14 / 0.68);
   --color-modal-surface: rgb(14 22 38 / 0.88);
   --color-overlay-veil: rgb(4 6 12 / 0.94);
-  --color-overlay-banner: rgb(24 36 56 / 0.94);
+  --color-overlay-banner-bottom: rgb(0 0 0 / 0.5);
+  --color-overlay-banner-transparent: rgb(0 0 0 / 0);
   --color-overlay-backdrop: rgb(5 8 14 / 0.75);
 
   --color-sidebar-surface: rgb(12 18 30 / 0.94);
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index de17fc7d..9413bd2c 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -38,7 +38,6 @@ module.exports = {
           strong: "var(--surface-overlay-strong)",
           darker: "var(--surface-overlay-darker)",
           veil: "var(--surface-veil)",
-          banner: "var(--surface-overlay-banner)",
           panel: "var(--surface-overlay-panel)",
           "panel-soft": "var(--surface-overlay-panel-soft)",
           "panel-tint": "var(--surface-overlay-panel-tint)",
@@ -233,7 +232,6 @@ module.exports = {
         "surface-muted": "var(--surface-muted)",
         "overlay-strong": "var(--surface-overlay-strong)",
         "overlay-muted": "var(--surface-overlay-muted)",
-        "overlay-banner": "var(--surface-overlay-banner)",
         "overlay-panel": "var(--surface-overlay-panel)",
         "overlay-panel-soft": "var(--surface-overlay-panel-soft)",
         "overlay-panel-glass": "var(--surface-overlay-panel-glass)",
@@ -244,6 +242,9 @@ module.exports = {
         "status-private-surface": "var(--status-private-surface)",
         "status-neutral-surface": "var(--status-neutral-surface)"
       },
+      backgroundImage: {
+        "overlay-banner": "var(--surface-overlay-banner-gradient)"
+      },
       borderColor: {
         surface: "var(--border-default)",
         "surface-strong": "var(--border-strong)",
diff --git a/views/channel-profile.html b/views/channel-profile.html
index 933f872c..e87fe117 100644
--- a/views/channel-profile.html
+++ b/views/channel-profile.html
@@ -11,7 +11,7 @@
       referrerpolicy="no-referrer"
       data-fallback-src="assets/jpg/bitvid.jpg"
     />
-    <div class="absolute inset-0 rounded-lg bg-overlay-banner"></div>
+    <div class="pointer-events-none absolute inset-0 rounded-lg bg-overlay-banner"></div>
 
     <div
       class="absolute bottom-4 left-4 right-4 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between"