From caa37e55fa48efe7e990abf6eac4fd887977fcd4 Mon Sep 17 00:00:00 2001
From: Astounds <kirito@disroot.org>
Date: Mon, 20 Apr 2026 04:30:35 -0500
Subject: [PATCH] refactor: improve download dropdown UX and styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Use lightweight fade‑in hover
---
 youtube/static/dark_theme.css  |  1 +
 youtube/static/gray_theme.css  |  1 +
 youtube/static/light_theme.css |  1 +
 youtube/static/watch.css       | 24 ++++++++----------------
 4 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/youtube/static/dark_theme.css b/youtube/static/dark_theme.css
index c832883..d368864 100644
--- a/youtube/static/dark_theme.css
+++ b/youtube/static/dark_theme.css
@@ -10,6 +10,7 @@
     --link:                 #00B0FF;
     --link-visited:         #40C4FF;
     --border-color:         #333333;
+    --thead-background:     #0a0a0b;
     --border-bg:            #222222;
     --border-bg-settings:   #000000;
     --border-bg-license:    #000000;
diff --git a/youtube/static/gray_theme.css b/youtube/static/gray_theme.css
index b52495a..6cf6b95 100644
--- a/youtube/static/gray_theme.css
+++ b/youtube/static/gray_theme.css
@@ -10,6 +10,7 @@
     --link:                  #22AAFF;
     --link-visited:          #7755FF;
     --border-color:          #4A5568;
+    --thead-background:      #1a2530;
     --border-bg:             #FFFFFF;
     --border-bg-settings:    #FFFFFF;
     --border-bg-license:     #FFFFFF;
diff --git a/youtube/static/light_theme.css b/youtube/static/light_theme.css
index 932e865..a540e2e 100644
--- a/youtube/static/light_theme.css
+++ b/youtube/static/light_theme.css
@@ -10,6 +10,7 @@
     --link:                 #212121;
     --link-visited:         #808080;
     --border-color:         #CCCCCC;
+    --thead-background:     #d0d0d0;
     --border-bg:            #212121;
     --border-bg-settings:   #91918C;
     --border-bg-license:    #91918C;
diff --git a/youtube/static/watch.css b/youtube/static/watch.css
index f06beee..fb81a12 100644
--- a/youtube/static/watch.css
+++ b/youtube/static/watch.css
@@ -358,7 +358,7 @@ figure.sc-video {
     font-size: 0.875rem;
 }
 .download-table thead {
-    background: var(--primary-background);
+    background: var(--thead-background);
     position: sticky;
     top: 0;
     z-index: 1;
@@ -379,26 +379,23 @@ figure.sc-video {
     transition: all 0.2s ease;
 }
 .download-table tbody tr:hover {
-    background: rgba(0,0,0,0.04);
+    background: var(--primary-background);
 }
 .download-table a.download-link {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.45rem 0.9rem;
-    background: var(--buttom);
+    display: inline-block;
+    padding: 0.4rem 0.85rem;
+    background: rgba(0,0,0,0.12);
     color: var(--buttom-text);
     text-decoration: none;
     border-radius: 5px;
     font-weight: 500;
     font-size: 0.85rem;
-    transition: all 0.2s ease;
-    min-width: 80px;
+    transition: background 0.2s ease;
+    white-space: nowrap;
 }
 .download-table a.download-link:hover {
-    background: var(--buttom-hover);
+    background: rgba(0,0,0,0.28);
     color: var(--buttom-text);
-    transform: translateY(-1px);
 }
 .download-table tbody tr:last-child td {
     border-bottom: none;
@@ -410,13 +407,8 @@ figure.sc-video {
 }
 .download-table td[data-label="Link"] {
     white-space: nowrap;
-    padding: 0.4rem 0;
     vertical-align: middle;
 }
-.download-table td[data-label="Link"] a {
-    display: inline-block;
-    white-space: nowrap;
-}
 .download-table td[data-label="Codecs"] {
     max-width: 180px;
     text-overflow: ellipsis;