diff --git a/youtube/static/dark_theme.css b/youtube/static/dark_theme.css index 38cdd63..c832883 100644 --- a/youtube/static/dark_theme.css +++ b/youtube/static/dark_theme.css @@ -9,6 +9,7 @@ --thumb-background: #222222; --link: #00B0FF; --link-visited: #40C4FF; + --border-color: #333333; --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 2ae3efe..b52495a 100644 --- a/youtube/static/gray_theme.css +++ b/youtube/static/gray_theme.css @@ -9,6 +9,7 @@ --thumb-background: #35404D; --link: #22AAFF; --link-visited: #7755FF; + --border-color: #4A5568; --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 9dab076..932e865 100644 --- a/youtube/static/light_theme.css +++ b/youtube/static/light_theme.css @@ -9,6 +9,7 @@ --thumb-background: #F5F5F5; --link: #212121; --link-visited: #808080; + --border-color: #CCCCCC; --border-bg: #212121; --border-bg-settings: #91918C; --border-bg-license: #91918C; diff --git a/youtube/static/watch.css b/youtube/static/watch.css index c0bdec6..f06beee 100644 --- a/youtube/static/watch.css +++ b/youtube/static/watch.css @@ -307,18 +307,130 @@ 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(--primary-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: rgba(0,0,0,0.04); +} +.download-table a.download-link { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.45rem 0.9rem; + background: var(--buttom); + 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; +} +.download-table a.download-link:hover { + background: var(--buttom-hover); + color: var(--buttom-text); + transform: translateY(-1px); +} +.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; + 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; + 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 { diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html index 94dc8aa..079a01c 100644 --- a/youtube/templates/watch.html +++ b/youtube/templates/watch.html @@ -102,22 +102,40 @@ {% if settings.use_video_download != 0 %}
{{ _('Download') }} - +
+ + + + + + + + + + + + + {% for format in download_formats %} + + + + + + + + + {% endfor %} + {% for download in other_downloads %} + + + + + + + {% endfor %} + +
{{ _('Ext') }}{{ _('Video') }}{{ _('Audio') }}{{ _('Size') }}{{ _('Codecs') }}{{ _('Link') }}
{{ format['ext'] }}{{ format['video_quality'] }}{{ format['audio_quality'] }}{{ format['file_size'] }}{{ format['codecs'] }}{{ _('Download') }}
{{ download['ext'] }}{{ download['label'] }}{{ download.get('codecs', 'N/A') }}{{ _('Download') }}
+
{% else %}