1 files changed, 111 insertions, 7 deletions
diff --git a/youtube/static/watch.css b/youtube/static/watch.css
index c0bdec6..fb81a12 100644
--- a/youtube/static/watch.css
+++ b/youtube/static/watch.css
@@ -307,18 +307,122 @@ figure.sc-video {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
 }
-.v-download { grid-area: v-download; }
-.v-download > ul.download-dropdown-content {
-    background: var(--secondary-background);
-    padding-left: 0px;
+.v-download {
+    grid-area: v-download;
+    margin-bottom: 0.5rem;
 }
-.v-download > ul.download-dropdown-content > li.download-format {
-    list-style: none;
+.v-download details {
+    display: block;
+    width: 100%;
+}
+.v-download > summary {
+    cursor: pointer;
     padding: 0.4rem 0;
     padding-left: 1rem;
 }
-.v-download > ul.download-dropdown-content > li.download-format a.download-link {
+.v-download > summary.download-dropdown-label {
+    cursor: pointer;
+    -webkit-touch-callout: none;
+      -webkit-user-select: none;
+       -khtml-user-select: none;
+         -moz-user-select: none;
+          -ms-user-select: none;
+              user-select: none;
+    padding-bottom: 6px;
+    padding-left: .75em;
+    padding-right: .75em;
+    padding-top: 6px;
+    text-align: center;
+    white-space: nowrap;
+    background-color: var(--buttom);
+    border: 1px solid var(--button-border);
+    color: var(--buttom-text);
+    border-radius: 5px;
+    margin-bottom: 0.5rem;
+}
+.v-download > summary.download-dropdown-label:hover {
+    background-color: var(--buttom-hover);
+}
+.v-download > .download-table-container {
+    background: var(--secondary-background);
+    max-height: 65vh;
+    overflow-y: auto;
+    border: 1px solid var(--button-border);
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+.download-table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    font-size: 0.875rem;
+}
+.download-table thead {
+    background: var(--thead-background);
+    position: sticky;
+    top: 0;
+    z-index: 1;
+}
+.download-table th,
+.download-table td {
+    padding: 0.7rem 0.9rem;
+    text-align: left;
+    border-bottom: 1px solid var(--button-border);
+}
+.download-table th {
+    font-weight: 600;
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+}
+.download-table tbody tr {
+    transition: all 0.2s ease;
+}
+.download-table tbody tr:hover {
+    background: var(--primary-background);
+}
+.download-table a.download-link {
+    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: background 0.2s ease;
+    white-space: nowrap;
+}
+.download-table a.download-link:hover {
+    background: rgba(0,0,0,0.28);
+    color: var(--buttom-text);
+}
+.download-table tbody tr:last-child td {
+    border-bottom: none;
+}
+.download-table td[data-label="Ext"] {
+    font-family: monospace;
+    font-size: 0.8rem;
+    font-weight: 600;
+}
+.download-table td[data-label="Link"] {
+    white-space: nowrap;
+    vertical-align: middle;
+}
+.download-table td[data-label="Codecs"] {
+    max-width: 180px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    font-family: monospace;
+    font-size: 0.75rem;
+}
+.download-table td[data-label="Size"] {
+    font-family: monospace;
+    font-size: 0.85rem;
+}
+.download-table td[colspan="3"] {
+    font-style: italic;
+    opacity: 0.7;
 }
 
 .v-description {