From 7a765dc664d20f966e4e52abac1f5372045e166c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs?= Date: Mon, 14 Dec 2020 23:44:29 -0500 Subject: Change general design theme --- README.md | 22 +- youtube/static/channel.css | 557 +++++++++++++++++ youtube/static/comments.css | 359 +++++++---- youtube/static/dark_theme.css | 54 +- youtube/static/gray_theme.css | 33 +- youtube/static/home.css | 197 ++++++ youtube/static/light_theme.css | 34 +- youtube/static/local_playlist.css | 527 ++++++++++++++++ youtube/static/normalize.css | 349 +++++++++++ youtube/static/playlist.css | 537 +++++++++++++++++ youtube/static/search.css | 495 +++++++++++++++ youtube/static/settings.css | 241 ++++++++ youtube/static/subscription.css | 530 ++++++++++++++++ youtube/static/subscription_manager.css | 403 +++++++++++++ youtube/static/watch.css | 633 +++++++++++++++++++ youtube/templates/base.html | 397 ++++++------ youtube/templates/channel.html | 143 +---- youtube/templates/comments.html | 21 +- youtube/templates/comments_page.html | 10 +- youtube/templates/common_elements.html | 67 +- youtube/templates/error.html | 7 +- youtube/templates/home.html | 11 +- youtube/templates/local_playlist.html | 36 +- youtube/templates/local_playlists_list.html | 21 +- youtube/templates/playlist.html | 76 +-- youtube/templates/search.html | 61 +- youtube/templates/settings.html | 79 +-- youtube/templates/subscription_manager.html | 78 +-- youtube/templates/subscriptions.html | 81 +-- youtube/templates/watch.html | 905 +++++++++------------------- 30 files changed, 5443 insertions(+), 1521 deletions(-) create mode 100644 youtube/static/channel.css create mode 100644 youtube/static/home.css create mode 100644 youtube/static/local_playlist.css create mode 100644 youtube/static/normalize.css create mode 100644 youtube/static/playlist.css create mode 100644 youtube/static/search.css create mode 100644 youtube/static/settings.css create mode 100644 youtube/static/subscription.css create mode 100644 youtube/static/subscription_manager.css create mode 100644 youtube/static/watch.css diff --git a/README.md b/README.md index 17d92bd..5b65673 100644 --- a/README.md +++ b/README.md @@ -1,20 +1,20 @@ -# youtube-local +# yt-local -![screenshot](https://user-images.githubusercontent.com/28744867/64483429-8a890780-d1b6-11e9-8423-6956ff7c588d.png) -youtube-local is a browser-based client written in Python for watching Youtube anonymously and without the lag of the slow page used by Youtube. One of the primary features is that all requests are routed through Tor, except for the video file at googlevideo.com. This is analogous to what HookTube (defunct) and Invidious do, except that you do not have to trust a third-party to respect your privacy. The assumption here is that Google won't put the effort in to incorporate the video file requests into their tracking, as it's not worth pursuing the incredibly small number of users who care about privacy (Tor video routing is also provided as an option). Tor has high latency, so this will not be as fast as regular Youtube. However, using Tor is optional; when not routing through Tor, video pages may load faster than they do with Youtube's page depending on your browser. +Fork of [youtube-local](https://github.com/user234683/youtube-local) + +yt-local is a browser-based client written in Python for watching Youtube anonymously and without the lag of the slow page used by Youtube. One of the primary features is that all requests are routed through Tor, except for the video file at googlevideo.com. This is analogous to what HookTube (defunct) and Invidious do, except that you do not have to trust a third-party to respect your privacy. The assumption here is that Google won't put the effort in to incorporate the video file requests into their tracking, as it's not worth pursuing the incredibly small number of users who care about privacy (Tor video routing is also provided as an option). Tor has high latency, so this will not be as fast as regular Youtube. However, using Tor is optional; when not routing through Tor, video pages may load faster than they do with Youtube's page depending on your browser. The Youtube API is not used, so no keys or anything are needed. It uses the same requests as the Youtube webpage. ## Screenshots -[Gray theme](https://user-images.githubusercontent.com/28744867/64483431-8e1c8e80-d1b6-11e9-999c-14d36ddd582f.png) -[Dark theme](https://user-images.githubusercontent.com/28744867/64483432-8fe65200-d1b6-11e9-90bd-32869542e32e.png) +[Light theme](https://pic.infini.fr/l7WINjzS/0Ru6MrhA.png) -[Non-Theater mode](https://user-images.githubusercontent.com/28744867/64483433-92e14280-d1b6-11e9-9b56-2ef5d64c372f.png) +[Gray theme](https://pic.infini.fr/znnQXWNc/hL78CRzo.png) -[Channel](https://user-images.githubusercontent.com/28744867/64483436-95dc3300-d1b6-11e9-8efc-b19b1f1f3bcf.png) +[Dark theme](https://pic.infini.fr/iXwFtTWv/mt2kS5bv.png) -[Downloads](https://user-images.githubusercontent.com/28744867/64483437-a2608b80-d1b6-11e9-9e5a-4114391b7304.png) +[Channel](https://pic.infini.fr/JsenWVYe/SbdIQlS6.png) ## Features * Standard pages of Youtube: search, channels, playlists @@ -86,9 +86,9 @@ To run the program on windows, open `run.bat`. On Linux/MacOS, run `python3 serv Access youtube URLs by prefixing them with `http://localhost:8080/`, For instance, `http://localhost:8080/https://www.youtube.com/watch?v=vBgulDeV2RU` -You can use an addon such as Redirector ([Firefox](https://addons.mozilla.org/en-US/firefox/addon/redirector/)|[Chrome](https://chrome.google.com/webstore/detail/redirector/ocgpenflpmgnfapjedencafcfakcekcd)) to automatically redirect Youtube URLs to youtube-local. I use the include pattern `^(https?://(?:[a-zA-Z0-9_-]*\.)?(?:youtube\.com|youtu\.be)/.*)` and the redirect pattern `http://localhost:8080/$1` (Make sure you're using regular expression mode). +You can use an addon such as Redirector ([Firefox](https://addons.mozilla.org/en-US/firefox/addon/redirector/)|[Chrome](https://chrome.google.com/webstore/detail/redirector/ocgpenflpmgnfapjedencafcfakcekcd)) to automatically redirect Youtube URLs to yt-local. I use the include pattern `^(https?://(?:[a-zA-Z0-9_-]*\.)?(?:youtube\.com|youtu\.be)/.*)` and the redirect pattern `http://localhost:8080/$1` (Make sure you're using regular expression mode). -youtube-local can be added as a search engine in firefox to make searching more convenient. See [here](https://support.mozilla.org/en-US/kb/add-or-remove-search-engine-firefox) for information on firefox search plugins. +yt-local can be added as a search engine in firefox to make searching more convenient. See [here](https://support.mozilla.org/en-US/kb/add-or-remove-search-engine-firefox) for information on firefox search plugins. ### Using Tor @@ -102,7 +102,7 @@ Pull requests and issues are welcome If you wish to route the video through Tor, set "Route Tor" to "On, including video". Because this is bandwidth-intensive, you are strongly encouraged to donate to the [consortium of Tor node operators](https://torservers.net/donate.html). For instance, donations to [NoiseTor](https://noisetor.net/) go straight towards funding nodes. Using their numbers for bandwidth costs, together with an average of 485 kbit/sec for a diverse sample of videos, and assuming n hours of video watched per day, gives $0.03n/month. A $1/month donation will be a very generous amount to not only offset losses, but help keep the network healthy. -In general, Tor video routing will be slower (for instance, moving around in the video is quite slow). I've never seen any signs that watch history in youtube-local affects on-site Youtube recommendations. It's likely that requests to googlevideo are logged for some period of time, but are not integrated into Youtube's larger advertisement/recommendation systems, since those presumably depend more heavily on in-page tracking through Javascript rather than CDN requests to googlevideo. +In general, Tor video routing will be slower (for instance, moving around in the video is quite slow). I've never seen any signs that watch history in yt-local affects on-site Youtube recommendations. It's likely that requests to googlevideo are logged for some period of time, but are not integrated into Youtube's larger advertisement/recommendation systems, since those presumably depend more heavily on in-page tracking through Javascript rather than CDN requests to googlevideo. ## License diff --git a/youtube/static/channel.css b/youtube/static/channel.css new file mode 100644 index 0000000..467bb0d --- /dev/null +++ b/youtube/static/channel.css @@ -0,0 +1,557 @@ +html { + font-family: "liberation serif", "times new roman", calibri, carlito, serif; + background: var(--background); + color: var(--text); +} + +body { + display: grid; + grid-gap: 20px; + grid-template-areas: + "header" + "main" + "footer"; + /* Fix height */ + height: 100vh; + grid-template-rows: auto 1fr auto; + /* fix top and bottom */ + margin-left: 1rem; + margin-right: 1rem; +} + +img { + width: 100%; + height: auto; +} + +a:link { + color: var(--link); +} + +a:visited { + color: var(--link-visited); +} + +input[type="text"], +input[type="search"] { + background: var(--background); + border: 1px solid var(--button-border); + padding: 0.4rem 0.4rem; + font-size: 15px; + color: var(--search-text); +} + +input[type='search'] { + border-bottom: 1px solid var(--button-border); + border-top: 0px; + border-left: 0px; + border-right: 0px; + border-radius: 0px; +} + +header { + display: grid; + grid-gap: 1px; + grid-template-areas: + "home" + "form" + "playlist"; + grid-area: header; +} + +.home { + grid-area: home; + margin-left: auto; + margin-right: auto; + margin-bottom: 1rem; + margin-top: 1rem; +} + +.form { + display: grid; + grid-gap: 4px; + grid-template-areas: + "search-box" + "search-button" + "dropdown"; + grid-area: form; +} + +.search-box { + grid-area: search-box; +} +.search-button { + grid-area: search-button; + + cursor: pointer; + 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; +} +.search-button:hover { + background-color: var(--buttom-hover); +} + +.dropdown { + display: grid; + grid-gap: 1px; + grid-template-areas: + "dropdown-label" + "dropdown-content"; + grid-area: dropdown; + z-index: 1; +} +.dropdown-label { + grid-area: dropdown-label; + + 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; +} +.dropdown-label:hover { + background-color: var(--buttom-hover); +} + +/* playlist */ +.playlist { + display: grid; + grid-gap: 4px; + grid-template-areas: + "play-box" + "play-hidden" + "play-add" + "play-clean"; + grid-area: playlist; +} +.play-box { + grid-area: play-box; +} + +.play-hidden { + grid-area: play-hidden; +} + +.play-add { + grid-area: play-add; + cursor: pointer; + + 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; +} +.play-add:hover { + background-color: var(--buttom-hover); +} + +.play-clean { + display: grid; + grid-area: play-clean; +} + +.play-clean > button { + 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; +} +.play-clean > button:hover { + background-color: var(--buttom-hover); +} +/* /playlist */ + +/* ------------- Menu Mobile sin JS ---------------- */ +/* input hidden */ +.opt-box { + display: none; +} +.dropdown-content { + display: none; + grid-area: dropdown-content; +} +label[for=options-toggle-cbox] { + 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; +} + +#options-toggle-cbox:checked ~ .dropdown-content { + display: inline-grid; + white-space: nowrap; +} +/*- ----------- End Menu Mobile sin JS ------------- */ + +.main { + grid-area: main; + display: grid; + grid-row-gap: 1rem; +} + +/* fix hr when is children of grid */ +hr { + width: 100%; +} + +.author-container { + display: grid; + grid-template-columns: 1fr; + margin: auto; + grid-template-areas: + "author" + "summary" + "subscribe"; +} +.author { + grid-area: author; + display: grid; + grid-template-columns: 100px 1fr; + grid-column-gap: 1rem; + align-items: center; + justify-self: center; +} +.summary { grid-area: summary; } +.summary p { + text-align: center; +} +.subscribe { + grid-area: subscribe; + justify-self: center; +} +.subscribe .btn-subscribe { + background-color: var(--buttom); + color: var(--buttom-text); + text-shadow: none; + cursor: pointer; + padding-bottom: 6px; + padding-left: .75em; + padding-right: .75em; + padding-top: 6px; + text-align: center; + white-space: nowrap; + border: none; + border-radius: 0.2rem; +} + +/* Video list item */ +.video-container { + display: grid; + grid-row-gap: 0.5rem; +} + +.item-box { + display: grid; + grid-template-columns: 1.9fr 0.1fr; + grid-template-rows: 1fr; + grid-gap: 1px; + grid-template-areas: + "item-video item-checkbox"; +} + +.item-video { + grid-area: item-video; + + display: grid; + grid-template-columns: auto; + grid-template-rows: repeat(4, auto); + grid-row-gap: 0.4rem; + grid-template-areas: + "thumbnail-box" + "info-box"; + align-items: center; + + font-size: 0.7rem; +} + +.item-video a { + text-decoration: none; + cursor: pointer; +} + +.item-video.channel-item { + border-radius: 50%; + width: 150px; + height: 150px; +} + +.thumbnail-box { + grid-area: thumbnail-box; + position: relative; +} + +.thumbnail { + padding: 28.125%; + position: relative; + box-sizing: border-box; +} + +.thumbnail-img { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + object-fit: cover; +} + +.length { + z-index: 100; + position: absolute; + background-color: rgba(35, 35, 35, 0.75); + color: #fff; + border-radius: 2px; + padding: 2px; + font-size: 16px; + right: 0.25em; + bottom: -0.75em; +} + +.playlist-item .thumbnail-info { + position: absolute; + right: 0px; + bottom: 0px; + height: 100%; + width: 50%; + text-align: center; + white-space: pre-line; + opacity: .8; + color: var(--text); + font-size: 0.8125rem; + background: var(--secondary-background); + padding: 0; +} + +.playlist-item .thumbnail-info span { + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + text-transform: none; +} + +.thumbnail-img { + margin: auto; + display: block; + max-height: 100%; + max-width: 100%; +} + +.info-box { + grid-area: info-box; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: auto auto auto auto auto; + grid-gap: 1px; + grid-template-areas: + "." + "." + "." + "." + "."; +} + +.title { + font-size: 0.8rem; + margin: 0px; + font-weight: normal; + overflow: hidden; + text-overflow: ellipsis; +} + +.info-box address { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.thumbnail-info { + background-color: var(--time-background); + color: #fff; + padding: 2px 5px; + text-transform: uppercase; + font-weight: 700; + font-size: 12px; + position: absolute; + right: 0; + bottom: .2rem; +} + +.item-checkbox { + grid-area: item-checkbox; + justify-self: start; + align-self: center; + min-width: 30px; + margin: 0px; +} + +.stats { + display: flex; + justify-content: space-between; +} + +.horizontal-stats { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.horizontal-stats > li { + display: inline; +} + +.horizontal-stats > li:first-child::after { + content: " | "; +} + +/* pagination */ +.main .pagination-container { + display: grid; + justify-content: center; +} + +.main .pagination-container .pagination-list { + display: grid; + grid-auto-flow: column; + grid-column-gap: 0.5rem; +} + +.main .pagination-container .pagination-list .page-link { + border-style: none; + font-weight: bold; + text-align: center; + background: var(--secondary-focus); + text-decoration: none; + align-self: center; + padding: .5rem; + width: 1rem; +} + +.main .pagination-container .pagination-list .page-link.is-current { + background: var(--secondary-background); +} + +/* /video list item */ + +.footer { + grid-area: footer; +} + +.footer > p { + text-align: center; +} + +@media (min-width: 480px) { + .item-video { + font-size: 0.85rem; + } + .info-box { + grid-gap: 2px; + } + .title { + font-size: 1rem; + } +} + +@media (min-width: 600px) { + .video-container { + display: grid; + grid-row-gap: 0.5rem; + grid-template-columns: 1fr 1fr; + } +} + +@media (min-width: 992px) { + body { + display: grid; + grid-template-columns: 0.3fr 2fr 1fr 0.3fr; + grid-template-rows: auto 1fr auto; + grid-template-areas: + "header header header header" + "main main main main" + "footer footer footer footer"; + } + .form { + display: grid; + grid-gap: 1px; + grid-template-columns: 1fr 1.4fr 0.3fr 1.3fr; + grid-template-areas: ". search-box search-button dropdown"; + grid-area: form; + position: relative; + } + .dropdown { + display: grid; + grid-gap: 1px; + grid-template-columns: minmax(50px, 100px); + grid-template-areas: + "dropdown-label" + "dropdown-content"; + grid-area: dropdown; + background: var(--background); + padding-right: 4rem; + z-index: 1; + position: absolute; + } + + .author-container { + max-width: 50vw; + } + + /* playlist */ + .playlist { + display: grid; + grid-gap: 1px; + grid-template-columns: 1fr 1.4fr 0.3fr 1.3fr; + grid-template-areas: ". play-box play-add play-clean"; + grid-area: playlist; + } + .play-clean { + grid-template-columns: minmax(50px, 100px); + } + .play-clean > button { + padding-left: 0px; + padding-right: 0px; + padding-bottom: 6px; + padding-top: 6px; + text-align: center; + white-space: nowrap; + background-color: var(--buttom); + color: var(--buttom-text); + border-radius: 5px; + cursor: pointer; + } + + .video-container { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-row-gap: 1rem; + grid-column-gap: 1rem; + } +} diff --git a/youtube/static/comments.css b/youtube/static/comments.css index b177a4f..080810e 100644 --- a/youtube/static/comments.css +++ b/youtube/static/comments.css @@ -1,148 +1,283 @@ -.video-metadata{ - display: grid; - grid-template-columns: auto 1fr; - grid-template-rows: auto auto 1fr auto; +html { + font-family: "liberation serif", "times new roman", calibri, carlito, serif; + background: var(--background); + color: var(--text); } - .video-metadata > .video-metadata-thumbnail-box{ - grid-row: 1 / span 3; - } - .video-metadata > .title{ - word-wrap:break-word; - grid-row: 1; - } - .video-metadata > h2{ - grid-row: 2; - font-size: 0.875rem; - } - .video-metadata > span{ - grid-row:3; - } - .video-metadata > hr{ - grid-row: 4; - grid-column: 1 / span 2; - width: 100%; - } -.comment-form{ +body { display: grid; - align-content: start; - justify-items: start; - align-items: start; -} - #comment-account-options{ - display:grid; - grid-auto-flow: column; - grid-column-gap: 10px; - margin-top:10px; - margin-bottom:10px; - } - #comment-account-options a{ - margin-left:10px; - } + grid-gap: 20px; + grid-template-areas: + "header" + "main" + "footer"; + /* Fix height */ + height: 100vh; + grid-template-rows: auto 1fr auto; + /* fix top and bottom */ + margin-left: 1rem; + margin-right: 1rem; +} -.comments-area{ - display:grid; +h1, h2, h3, h4, h5, h6, div, button { + margin: 0; + padding: 0; +} + +img { + width: 100%; + height: auto; } - .comments-area textarea{ - resize: vertical; - justify-self:stretch; - } - .post-comment-button{ - margin-top:10px; - justify-self:end; - } - .comment-links{ - display:grid; - grid-auto-flow: column; - grid-column-gap: 10px; - justify-content:start; - } -.comments{ - margin-top:10px; - grid-row-gap: 10px; +a:link { + color: var(--link); +} + +a:visited { + color: var(--link-visited); +} + +input[type="text"], +input[type="search"] { + background: var(--background); + border: 1px solid var(--button-border); + border-radius: 5px; + padding: 0.4rem 0.4rem; + font-size: 15px; + color: var(--search-text); +} + +input[type='search'] { + border-bottom: 1px solid var(--button-border); + border-top: 0px; + border-left: 0px; + border-right: 0px; + border-radius: 0px; +} + +header { display: grid; - align-content:start; + grid-gap: 1px; + grid-template-areas: + "home" + "form"; + grid-area: header; } -.comment{ - display:grid; - grid-template-columns: auto auto 100px 1fr; - grid-template-rows: 0fr 0fr 0fr 0fr; - background-color: var(--interface-color); - justify-content: start; +.home { + grid-area: home; + margin-left: auto; + margin-right: auto; + margin-bottom: 1rem; + margin-top: 1rem; } -.comment .author-avatar{ - grid-column: 1; - grid-row: 1 / span 3; - align-self: start; - margin-right: 5px; - height:32px; - width:32px; +.form { + display: grid; + grid-gap: 4px; + grid-template-areas: + "search-box" + "search-button" + "dropdown"; + grid-area: form; } - .comment .author-avatar-img{ - max-height: 100%; - } -.comment address{ - grid-column: 2; - grid-row: 1; - margin-right:15px; +.search-box { + grid-area: search-box; +} +.search-button { + grid-area: search-button; + + cursor: pointer; + padding-bottom: 6px; + padding-left: .75em; + padding-right: .75em; + padding-top: 6px; + text-align: center; white-space: nowrap; - overflow:hidden; + background-color: var(--buttom); + border: 1px solid var(--button-border); + color: var(--buttom-text); + border-radius: 5px; +} +.search-button:hover { + background-color: var(--buttom-hover); } -.comment .text{ - grid-column: 2 / span 3; - grid-row: 2; - white-space: pre-wrap; - min-width: 0; - word-wrap: break-word; +.dropdown { + display: grid; + grid-gap: 1px; + grid-template-areas: + "dropdown-label" + "dropdown-content"; + grid-area: dropdown; + background: var(--background); + padding-right: 4rem; + z-index: 1; } +.dropdown-label { + grid-area: dropdown-label; -.comment .permalink{ - grid-column: 3; - grid-row: 1; + 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; +} +.dropdown-label:hover { + background-color: var(--buttom-hover); } +/* ------------- Menu Mobile sin JS ---------------- */ +/* input hidden */ +.opt-box { + display: none; +} +.dropdown-content { + display: none; + grid-area: dropdown-content; +} +label[for=options-toggle-cbox] { + 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; +} -.comment .likes{ - grid-column:2; - grid-row:3; - font-weight:bold; +#options-toggle-cbox:checked ~ .dropdown-content { + display: inline-grid; white-space: nowrap; } +/*- ----------- End Menu Mobile sin JS ------------- */ + +.main { + grid-area: main; + margin: 0 auto; + max-width: 80ch; +} + +/* comments */ +.comments-area { + display: grid; + grid-row-gap: 0.5rem; +} + +.comments-area textarea { + resize: vertical; +} -.comment .bottom-row{ - grid-column:2 / span 3; - grid-row:4; - justify-self:start; +.video-metadata { display: grid; - grid-auto-flow: column; - grid-column-gap: 10px; + grid-template-columns: auto 1fr; + grid-column-gap: 0.5rem; + grid-template-rows: auto auto 1fr auto; + grid-template-areas: + "video-metadata-thumbnail-box ." + "video-metadata-thumbnail-box ." + "video-metadata-thumbnail-box ."; +} + +.video-metadata > h2 { + font-size: 0.875rem; } -details.replies > summary{ - background-color: var(--interface-color); - border-style: outset; - border-width: 1px; - font-weight: bold; - padding-bottom: 0px; +.video-metadata-thumbnail-box { + grid-area: video-metadata-thumbnail-box; } -.replies-open-new-tab{ - display: inline-block; - margin-top: 5px; +.comment-form { + display: grid; + grid-row-gap: 0.5rem; } -details.replies .comment{ - width: 600px; +.post-comment-button { + justify-self: end; } -.more-comments{ - justify-self:center; - margin-top:10px; +.comments { + display: grid; + grid-row-gap: 0.5rem; +} + +.comment { + display: grid; + grid-template-columns: repeat(3, auto) 3fr; + grid-template-rows: repeat(4, auto); + grid-column-gap: 0.4rem; + grid-template-areas: + "author-avatar author-name permalink permalink" + "author-avatar comment-text comment-text comment-text" + ". comment-likes comment-likes comment-likes" + ". button-row button-row button-row"; + background: var(--secondary-background); +} + +.author-avatar { grid-area: author-avatar; } +.author-name { grid-area: author-name; } +.permalink { grid-area: permalink; } +.comment-text { grid-area: comment-text; } +.comment-likes { grid-area: comment-likes; } +.button-row { grid-area: button-row; } + +.more-comments { + justify-self: center; + margin-top: 10px; margin-bottom: 10px; + background: var(--secondary-background); + padding: 5px; + + /* disable text selection */ + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.footer { + grid-area: footer; +} + +.footer > p { + text-align: center; +} + +@media (min-width: 780px) { + body { + display: grid; + grid-template-columns: 0.3fr 2fr 1fr 0.3fr; + grid-template-rows: auto 1fr auto; + grid-template-areas: + "header header header header" + "main main main main" + "footer footer footer footer"; + } + .form { + display: grid; + grid-gap: 1px; + grid-template-columns: 1fr 1.4fr 0.3fr 1.3fr; + grid-template-areas: ". search-box search-button dropdown"; + grid-area: form; + position: relative; + } + .dropdown { + display: grid; + grid-gap: 1px; + grid-template-columns: minmax(50px, 100px); + grid-template-areas: + "dropdown-label" + "dropdown-content"; + grid-area: dropdown; + z-index: 1; + position: absolute; + } } diff --git a/youtube/static/dark_theme.css b/youtube/static/dark_theme.css index 221dc95..bc14f5c 100644 --- a/youtube/static/dark_theme.css +++ b/youtube/static/dark_theme.css @@ -1,39 +1,17 @@ -body{ - --interface-color: #333333; - --text-color: #cccccc; - --background-color: #000000; - --video-background-color: #080808; +:root { + --background: #121212; + --text: #FFF; + --secondary-hover: #73828c; + --secondary-focus: #616161; + --secondary-inverse: #FFF; + --secondary-background: #424242; + --link: #22aaff; + --link-visited: #7755ff; + --buttom: #dcdcdb; + --buttom-text: #415462; + --button-border: #91918c; + --buttom-hover: #BBB; + --search-text: #FFF; + --time-background: #000; + --time-text: #FFF; } - -a:link { - color: #22aaff; -} - -a:visited { - color: #7755ff; -} - -a:not([href]){ - color: var(--text-color); -} - -.comment .permalink{ - color: #ffffff; -} - -.setting-item{ - background-color: #444444; -} - - -.muted{ - background-color: #111111; - color: gray; -} - -.muted a:link { - color: #10547f; -} - - - diff --git a/youtube/static/gray_theme.css b/youtube/static/gray_theme.css index ca699c7..cae689d 100644 --- a/youtube/static/gray_theme.css +++ b/youtube/static/gray_theme.css @@ -1,18 +1,17 @@ -body{ - --interface-color: #dadada; - --text-color: #222222; - --background-color: #bcbcbc; - --video-background-color: #dadada; -} - -.comment .permalink{ - color: #000000; -} - -.setting-item{ - background-color: #eeeeee; -} - -.muted{ - background-color: #888888; +:root { + --background: #2d3743; + --text: #FFF; + --secondary-hover: #73828c; + --secondary-focus: rgba(115, 130, 140, 0.125); + --secondary-inverse: #FFF; + --secondary-background: #102027; + --link: #22aaff; + --link-visited: #7755ff; + --buttom: #dcdcdb; + --buttom-text: #415462; + --button-border: #91918c; + --buttom-hover: #BBB; + --search-text: #FFF; + --time-background: #000; + --time-text: #FFF; } diff --git a/youtube/static/home.css b/youtube/static/home.css new file mode 100644 index 0000000..9bea07c --- /dev/null +++ b/youtube/static/home.css @@ -0,0 +1,197 @@ +html { + font-family: "liberation serif", "times new roman", calibri, carlito, serif; + background: var(--background); + color: var(--text); +} + +body { + display: grid; + grid-gap: 20px; + grid-template-areas: + "header" + "main" + "footer"; + /* Fix height */ + height: 100vh; + grid-template-rows: auto 1fr auto; + /* fix top and bottom */ + margin-left: 1rem; + margin-right: 1rem; +} + +a:link { + color: var(--link); +} + +a:visited { + color: var(--link-visited); +} + +input[type="text"], +input[type="search"] { + background: var(--background); + border: 1px solid var(--button-border); + border-radius: 5px; + padding: 0.4rem 0.4rem; + font-size: 15px; + color: var(--search-text); +} + +input[type='search'] { + border-bottom: 1px solid var(--button-border); + border-top: 0px; + border-left: 0px; + border-right: 0px; + border-radius: 0px; +} + +header { + display: grid; + grid-gap: 1px; + grid-template-areas: + "home" + "form"; + grid-area: header; +} + +.home { + grid-area: home; + margin-left: auto; + margin-right: auto; + margin-bottom: 1rem; + margin-top: 1rem; +} + +.form { + display: grid; + grid-gap: 4px; + grid-template-areas: + "search-box" + "search-button" + "dropdown"; + grid-area: form; +} + +.search-box { + grid-area: search-box; +} +.search-button { + grid-area: search-button; + + cursor: pointer; + 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; +} +.search-button:hover { + background-color: var(--buttom-hover); +} + +.dropdown { + display: grid; + grid-gap: 1px; + grid-template-areas: + "dropdown-label" + "dropdown-content"; + grid-area: dropdown; + z-index: 1; +} +.dropdown-label { + grid-area: dropdown-label; + + 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; +} +.dropdown-label:hover { + background-color: var(--buttom-hover); +} + +/* ------------- Menu Mobile sin JS ---------------- */ +/* input hidden */ +.opt-box { + display: none; +} +.dropdown-content { + display: none; + grid-area: dropdown-content; +} +label[for=options-toggle-cbox] { + 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; +} + +#options-toggle-cbox:checked ~ .dropdown-content { + display: inline-grid; + white-space: nowrap; +} +/*- ----------- End Menu Mobile sin JS ------------- */ + +.main { + grid-area: main; + margin: 0 auto; + max-width: 80ch; +} + +.code-error { + background: var(--secondary-background); + padding: 1rem; +} + +.footer { + grid-area: footer; +} + +.footer > p { + text-align: center; +} + +@media (min-width: 780px) { + body { + display: grid; + grid-template-columns: 0.3fr 2fr 1fr 0.3fr; + grid-template-rows: auto 1fr auto; + grid-template-areas: + "header header header header" + "main main main main" + "footer footer footer footer"; + } + .form { + display: grid; + grid-gap: 1px; + grid-template-columns: 1fr 1.4fr 0.3fr 1.3fr; + grid-template-areas: ". search-box search-button dropdown"; + grid-area: form; + position: relative; + } + .dropdown { + display: grid; + grid-gap: 1px; + grid-template-columns: minmax(50px, 100px); + grid-template-areas: + "dropdown-label" + "dropdown-content"; + grid-area: dropdown; + z-index: 1; + position: absolute; + } +} diff --git a/youtube/static/light_theme.css b/youtube/static/light_theme.css index e4d7eb3..a0540f4 100644 --- a/youtube/static/light_theme.css +++ b/youtube/static/light_theme.css @@ -1,19 +1,17 @@ -body{ - --interface-color: #ffffff; - --text-color: #222222; - --background-color: #f8f8f8; - --video-background-color: #ffffff; +:root { + --background: #FAFAFA; + --text: #415462; + --secondary-hover: #415462; + --secondary-focus: rgba(115, 130, 140, 0.125); + --secondary-inverse: #FFF; + --secondary-background: #eeeeee; + --link: #22aaff; + --link-visited: #7755ff; + --buttom: #dcdcdb; + --buttom-text: #415462; + --button-border: #91918c; + --buttom-hover: #BBB; + --search-text: #415462; + --time-background: #000; + --time-text: #FFF; } - -.comment .permalink{ - color: #000000; -} - -.setting-item{ - background-color: #f8f8f8; -} - -.muted{ - background-color: #888888; -} - diff --git a/youtube/static/local_playlist.css b/youtube/static/local_playlist.css new file mode 100644 index 0000000..bd68c5b --- /dev/null +++ b/youtube/static/local_playlist.css @@ -0,0 +1,527 @@ +html { + font-family: "liberation serif", "times new roman", calibri, carlito, serif; + background: var(--background); + color: var(--text); +} + +body { + display: grid; + grid-gap: 20px; + grid-template-areas: + "header" + "main" + "footer"; + /* Fix height */ + height: 100vh; + grid-template-rows: auto 1fr auto; + /* fix top and bottom */ + margin-left: 1rem; + margin-right: 1rem; +} + +img { + width: 100%; + height: auto; +} + +a:link { + color: var(--link); +} + +a:visited { + color: var(--link-visited); +} + +input[type="text"], +input[type="search"] { + background: var(--background); + border: 1px solid var(--button-border); + padding: 0.4rem 0.4rem; + font-size: 15px; + color: var(--search-text); +} + +input[type='search'] { + border-bottom: 1px solid var(--button-border); + border-top: 0px; + border-left: 0px; + border-right: 0px; + border-radius: 0px; +} + +header { + display: grid; + grid-gap: 1px; + grid-template-areas: + "home" + "form" + "playlist"; + grid-area: header; +} + +.home { + grid-area: home; + margin-left: auto; + margin-right: auto; + margin-bottom: 1rem; + margin-top: 1rem; +} + +.form { + display: grid; + grid-gap: 4px; + grid-template-areas: + "search-box" + "search-button" + "dropdown"; + grid-area: form; +} + +.search-box { + grid-area: search-box; +} +.search-button { + grid-area: search-button; + + cursor: pointer; + 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; +} +.search-button:hover { + background-color: var(--buttom-hover); +} + +.dropdown { + display: grid; + grid-gap: 1px; + grid-template-areas: + "dropdown-label" + "dropdown-content"; + grid-area: dropdown; + z-index: 1; +} +.dropdown-label { + grid-area: dropdown-label; + + 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; +} +.dropdown-label:hover { + background-color: var(--buttom-hover); +} + +/* playlist */ +.playlist { + display: grid; + grid-gap: 4px; + grid-template-areas: + "play-box" + "play-hidden" + "play-add" + "play-clean"; + grid-area: playlist; +} +.play-box { + grid-area: play-box; +} + +.play-hidden { + grid-area: play-hidden; +} + +.play-add { + grid-area: play-add; + cursor: pointer; + + 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; +} +.play-add:hover { + background-color: var(--buttom-hover); +} + +.play-clean { + display: grid; + grid-area: play-clean; +} + +.play-clean > button { + 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; +} +.play-clean > button:hover { + background-color: var(--buttom-hover); +} +/* /playlist */ + +/* ------------- Menu Mobile sin JS ---------------- */ +/* input hidden */ +.opt-box { + display: none; +} +.dropdown-content { + display: none; + grid-area: dropdown-content; +} +label[for=options-toggle-cbox] { + 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; +} + +#options-toggle-cbox:checked ~ .dropdown-content { + display: inline-grid; + white-space: nowrap; +} +/*- ----------- End Menu Mobile sin JS ------------- */ + +.main { + grid-area: main; + display: grid; + grid-row-gap: 1rem; +} + +/* fix hr when is children of grid */ +hr { + width: 100%; +} + +.playlist-metadata { + display: grid; + grid-template-columns: 1fr; + margin: auto; + grid-template-areas: + "play-title" + "play-action"; +} +.play-title { + grid-area: play-title; + text-align: center; +} +.play-action { + grid-area: play-action; +} + +/* Video list item */ +.video-container { + display: grid; + grid-row-gap: 0.5rem; +} + +.item-box { + display: grid; + grid-template-columns: 1.9fr 0.1fr; + grid-template-rows: 1fr; + grid-gap: 1px; + grid-template-areas: + "item-video item-checkbox"; +} + +.item-video { + grid-area: item-video; + + display: grid; + grid-template-columns: auto; + grid-template-rows: repeat(4, auto); + grid-row-gap: 0.4rem; + grid-template-areas: + "thumbnail-box" + "info-box"; + align-items: center; + + font-size: 0.7rem; +} + +.item-video a { + text-decoration: none; + cursor: pointer; +} + +.thumbnail-box { + grid-area: thumbnail-box; + position: relative; +} + +.thumbnail { + padding: 28.125%; + position: relative; + box-sizing: border-box; +} + +.thumbnail-img { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + object-fit: cover; +} + +.length { + z-index: 100; + position: absolute; + background-color: rgba(35, 35, 35, 0.75); + color: #fff; + border-radius: 2px; + padding: 2px; + font-size: 16px; + right: 0.25em; + bottom: -0.75em; +} + +.playlist-item .thumbnail-info { + position: absolute; + right: 0px; + bottom: 0px; + height: 100%; + width: 50%; + text-align: center; + white-space: pre-line; + opacity: .8; + color: var(--text); + font-size: 0.8125rem; + background: var(--secondary-background); + padding: 0; +} + +.playlist-item .thumbnail-info span { + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + text-transform: none; +} + +.thumbnail-img { + margin: auto; + display: block; + max-height: 100%; + max-width: 100%; +} + +.info-box { + grid-area: info-box; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: auto auto auto auto auto; + grid-gap: 1px; + grid-template-areas: + "." + "." + "." + "." + "."; +} + +.title { + font-size: 0.8rem; + margin: 0px; + font-weight: normal; + overflow: hidden; + text-overflow: ellipsis; +} + +.info-box address { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.thumbnail-info { + background-color: var(--time-background); + color: #fff; + padding: 2px 5px; + text-transform: uppercase; + font-weight: 700; + font-size: 12px; + position: absolute; + right: 0; + bottom: .2rem; +} + +.item-checkbox { + grid-area: item-checkbox; + justify-self: start; + align-self: center; + min-width: 30px; + margin: 0px; +} + +.stats { + display: flex; + justify-content: space-between; +} + +.horizontal-stats { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.horizontal-stats > li { + display: inline; +} + +.horizontal-stats > li:first-child::after { + content: " | "; +} + +/* pagination */ +.main .pagination-container { + display: grid; + justify-content: center; +} + +.main .pagination-container .pagination-list { + display: grid; + grid-auto-flow: column; + grid-column-gap: 0.5rem; +} + +.main .pagination-container .pagination-list .page-link { + border-style: none; + font-weight: bold; + text-align: center; + background: var(--secondary-focus); + text-decoration: none; + align-self: center; + padding: .5rem; + width: 1rem; +} + +.main .pagination-container .pagination-list .page-link.is-current { + background: var(--secondary-background); +} + +/* /video list item */ + +.footer { + grid-area: footer; +} + +.footer > p { + text-align: center; +} + +@media (min-width: 480px) { + .item-video { + font-size: 0.85rem; + } + .info-box { + grid-gap: 2px; + } + .title { + font-size: 1rem; + } +} + +@media (min-width: 600px) { + .video-container { + display: grid; + grid-row-gap: 0.5rem; + grid-template-columns: 1fr 1fr; + } +} + +@media (min-width: 992px) { + body { + display: grid; + grid-template-columns: 0.3fr 2fr 1fr 0.3fr; + grid-template-rows: auto 1fr auto; + grid-template-areas: + "header header header header" + "main main main main" + "footer footer footer footer"; + } + .form { + display: grid; + grid-gap: 1px; + grid-template-columns: 1fr 1.4fr 0.3fr 1.3fr; + grid-template-areas: ". search-box search-button dropdown"; + grid-area: form; + position: relative; + } + .dropdown { + display: grid; + grid-gap: 1px; + grid-template-columns: minmax(50px, 100px); + grid-template-areas: + "dropdown-label" + "dropdown-content"; + grid-area: dropdown; + background: var(--background); + padding-right: 4rem; + z-index: 1; + position: absolute; + } + + .playlist-metadata { + max-width: 50vw; + } + + /* playlist */ + .playlist { + display: grid; + grid-gap: 1px; + grid-template-columns: 1fr 1.4fr 0.3fr 1.3fr; + grid-template-areas: ". play-box play-add play-clean"; + grid-area: playlist; + } + .play-clean { + grid-template-columns: minmax(50px, 100px); + } + .play-clean > button { + padding-left: 0px; + padding-right: 0px; + padding-bottom: 6px; + padding-top: 6px; + text-align: center; + white-space: nowrap; + background-color: var(--buttom); + color: var(--buttom-text); + border-radius: 5px; + cursor: pointer; + } + + .video-container { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-row-gap: 1rem; + grid-column-gap: 1rem; + } +} diff --git a/youtube/static/normalize.css b/youtube/static/normalize.css new file mode 100644 index 0000000..192eb9c --- /dev/null +++ b/youtube/static/normalize.css @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} diff --git a/youtube/static/playlist.css b/youtube/static/playlist.css new file mode 100644 index 0000000..8b75a7d --- /dev/null +++ b/youtube/static/playlist.css @@ -0,0 +1,537 @@ +html { + font-family: "liberation serif", "times new roman", calibri, carlito, serif; + background: var(--background); + color: var(--text); +} + +body { + display: grid; + grid-gap: 20px; + grid-template-areas: + "header" + "main" + "footer"; + /* Fix height */ + height: 100vh; + grid-template-rows: auto 1fr auto; + /* fix top and bottom */ + margin-left: 1rem; + margin-right: 1rem; +} + +img { + width: 100%; + height: auto; +} + +a:link { + color: var(--link); +} + +a:visited { + color: var(--link-visited); +} + +input[type="text"], +input[type="search"] { + background: var(--background); + border: 1px solid var(--button-border); + padding: 0.4rem 0.4rem; + font-size: 15px; + color: var(--search-text); +} + +input[type='search'] { + border-bottom: 1px solid var(--button-border); + border-top: 0px; + border-left: 0px; + border-right: 0px; + border-radius: 0px; +} + +header { + display: grid; + grid-gap: 1px; + grid-template-areas: + "home" + "form" + "playlist"; + grid-area: header; +} + +.home { + grid-area: home; + margin-left: auto; + margin-right: auto; + margin-bottom: 1rem; + margin-top: 1rem; +} + +.form { + display: grid; + grid-gap: 4px; + grid-template-areas: + "search-box" + "search-button" + "dropdown"; + grid-area: form; +} + +.search-box { + grid-area: search-box; +} +.search-button { + grid-area: search-button; + + cursor: pointer; + 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; +} +.search-button:hover { + background-color: var(--buttom-hover); +} + +.dropdown { + display: grid; + grid-gap: 1px; + grid-template-areas: + "dropdown-label" + "dropdown-content"; + grid-area: dropdown; + z-index: 1; +} +.dropdown-label { + grid-area: dropdown-label; + + 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; +} +.dropdown-label:hover { + background-color: var(--buttom-hover); +} + +/* playlist */ +.playlist { + display: grid; + grid-gap: 4px; + grid-template-areas: + "play-box" + "play-hidden" + "play-add" + "play-clean"; + grid-area: playlist; +} +.play-box { + grid-area: play-box; +} + +.play-hidden { + grid-area: play-hidden; +} + +.play-add { + grid-area: play-add; + cursor: pointer; + + 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; +} +.play-add:hover { + background-color: var(--buttom-hover); +} + +.play-clean { + display: grid; + grid-area: play-clean; +} + +.play-clean > button { + 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; +} +.play-clean > button:hover { + background-color: var(--buttom-hover); +} +/* /playlist */ + +/* ------------- Menu Mobile sin JS ---------------- */ +/* input hidden */ +.opt-box { + display: none; +} +.dropdown-content { + display: none; + grid-area: dropdown-content; +} +label[for=options-toggle-cbox] { + 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; +} + +#options-toggle-cbox:checked ~ .dropdown-content { + display: inline-grid; + white-space: nowrap; +} +/*- ----------- End Menu Mobile sin JS ------------- */ + +.main { + grid-area: main; + display: grid; + grid-row-gap: 1rem; +} + +/* fix hr when is children of grid */ +hr { + width: 100%; +} + +.playlist-metadata { + display: grid; + grid-template-columns: 1fr; + margin: auto; + grid-template-areas: + "author" + "summary" + "playlist-stats"; +} +.author { + grid-area: author; + display: grid; + grid-template-columns: 100px 1fr; + grid-column-gap: 1rem; + align-items: center; + justify-self: center; +} +.summary { + grid-area: summary; + justify-self: start; +} +.playlist-stats { + grid-area: playlist-stats; + justify-self: start; +} + +/* Video list item */ +.video-container { + display: grid; + grid-row-gap: 0.5rem; +} + +.item-box { + display: grid; + grid-template-columns: 1.9fr 0.1fr; + grid-template-rows: 1fr; + grid-gap: 1px; + grid-template-areas: + "item-video item-checkbox"; +} + +.item-video { + grid-area: item-video; + + display: grid; + grid-template-columns: auto; + grid-template-rows: repeat(4, auto); + grid-row-gap: 0.4rem; + grid-template-areas: + "thumbnail-box" + "info-box"; + align-items: center; + + font-size: 0.7rem; +} + +.item-video a { + text-decoration: none; + cursor: pointer; +} + +.thumbnail-box { + grid-area: thumbnail-box; + position: relative; +} + +.thumbnail { + padding: 28.125%; + position: relative; + box-sizing: border-box; +} + +.thumbnail-img { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + object-fit: cover; +} + +.length { + z-index: 100; + position: absolute; + background-color: rgba(35, 35, 35, 0.75); + color: #fff; + border-radius: 2px; + padding: 2px; + font-size: 16px; + right: 0.25em; + bottom: -0.75em; +} + +.playlist-item .thumbnail-info { + position: absolute; + right: 0px; + bottom: 0px; + height: 100%; + width: 50%; + text-align: center; + white-space: pre-line; + opacity: .8; + color: var(--text); + font-size: 0.8125rem; + background: var(--secondary-background); + padding: 0; +} + +.playlist-item .thumbnail-info span { + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + text-transform: none; +} + +.thumbnail-img { + margin: auto; + display: block; + max-height: 100%; + max-width: 100%; +} + +.info-box { + grid-area: info-box; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: auto auto auto auto auto; + grid-gap: 1px; + grid-template-areas: + "." + "." + "." + "." + "."; +} + +.title { + font-size: 0.8rem; + margin: 0px; + font-weight: normal; + overflow: hidden; + text-overflow: ellipsis; +} + +.info-box address { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.thumbnail-info { + background-color: var(--time-background); + color: #fff; + padding: 2px 5px; + text-transform: uppercase; + font-weight: 700; + font-size: 12px; + position: absolute; + right: 0; + bottom: .2rem; +} + +.item-checkbox { + grid-area: item-checkbox; + justify-self: start; + align-self: center; + min-width: 30px; + margin: 0px; +} + +.stats { + display: flex; + justify-content: space-between; +} + +.horizontal-stats { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.horizontal-stats > li { + display: inline; +} + +.horizontal-stats > li:first-child::after { + content: " | "; +} + +/* pagination */ +.main .pagination-container { + display: grid; + justify-content: center; +} + +.main .pagination-container .pagination-list { + display: grid; + grid-auto-flow: column; + grid-column-gap: 0.5rem; +} + +.main .pagination-container .pagination-list .page-link { + border-style: none; + font-weight: bold; + text-align: center; + background: var(--secondary-focus); + text-decoration: none; + align-self: center; + padding: .5rem; + width: 1rem; +} + +.main .pagination-container .pagination-list .page-link.is-current { + background: var(--secondary-background); +} + +/* /video list item */ + +.footer { + grid-area: footer; +} + +.footer > p { + text-align: center; +} + +@media (min-width: 480px) { + .item-video { + font-size: 0.85rem; + } + .info-box { + grid-gap: 2px; + } + .title { + font-size: 1rem; + } +} + +@media (min-width: 600px) { + .video-container { + display: grid; + grid-row-gap: 0.5rem; + grid-template-columns: 1fr 1fr; + } +} + +@media (min-width: 992px) { + body { + display: grid; + grid-template-columns: 0.3fr 2fr 1fr 0.3fr; + grid-template-rows: auto 1fr auto; + grid-template-areas: + "header header header header" + "main main main main" + "footer footer footer footer"; + } + .form { + display: grid; + grid-gap: 1px; + grid-template-columns: 1fr 1.4fr 0.3fr 1.3fr; + grid-template-areas: ". search-box search-button dropdown"; + grid-area: form; + position: relative; + } + .dropdown { + display: grid; + grid-gap: 1px; + grid-template-columns: minmax(50px, 100px); + grid-template-areas: + "dropdown-label" + "dropdown-content"; + grid-area: dropdown; + background: var(--background); + padding-right: 4rem; + z-index: 1; + position: absolute; + } + + .playlist-metadata { + max-width: 50vw; + } + + /* playlist */ + .playlist { + display: grid; + grid-gap: 1px; + grid-template-columns: 1fr 1.4fr 0.3fr 1.3fr; + grid-template-areas: ". play-box play-add play-clean"; + grid-area: playlist; + } + .play-clean { + grid-template-columns: minmax(50px, 100px); + } + .play-clean > button { + padding-left: 0px; + padding-right: 0px; + padding-bottom: 6px; + padding-top: 6px; + text-align: center; + white-space: nowrap; + background-color: var(--buttom); + color: var(--buttom-text); + border-radius: 5px; + cursor: pointer; + } + + .video-container { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-row-gap: 1rem; + grid-column-gap: 1rem; + } +} diff --git a/youtube/static/search.css b/youtube/static/search.css new file mode 100644 index 0000000..6c463bc --- /dev/null +++ b/youtube/static/search.css @@ -0,0 +1,495 @@ +html { + font-family: "liberation serif", "times new roman", calibri, carlito, serif; + background: var(--background); + color: var(--text); +} + +body { + display: grid; + grid-gap: 20px; + grid-template-areas: + "header" + "main" + "footer"; + /* Fix height */ + height: 100vh; + grid-template-rows: auto 1fr auto; + /* fix top and bottom */ + margin-left: 1rem; + margin-right: 1rem; +} + +img { + width: 100%; + height: auto; +} + +a:link { + color: var(--link); +} + +a:visited { + color: var(--link-visited); +} + +input[type="text"], +input[type="search"] { + background: var(--background); + border: 1px solid var(--button-border); + padding: 0.4rem 0.4rem; + font-size: 15px; + color: var(--search-text); +} + +input[type='search'] { + border-bottom: 1px solid var(--button-border); + border-top: 0px; + border-left: 0px; + border-right: 0px; + border-radius: 0px; +} + +header { + display: grid; + grid-gap: 1px; + grid-template-areas: + "home" + "form" + "playlist"; + grid-area: header; +} + +.home { + grid-area: home; + margin-left: auto; + margin-right: auto; + margin-bottom: 1rem; + margin-top: 1rem; +} + +.form { + display: grid; + grid-gap: 4px; + grid-template-areas: + "search-box" + "search-button" + "dropdown"; + grid-area: form; +} + +.search-box { + grid-area: search-box; +} +.search-button { + grid-area: search-button; + + cursor: pointer; + 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; +} +.search-button:hover { + background-color: var(--buttom-hover); +} + +.dropdown { + display: grid; + grid-gap: 1px; + grid-template-areas: + "dropdown-label" + "dropdown-content"; + grid-area: dropdown; + z-index: 1; +} +.dropdown-label { + grid-area: dropdown-label; + + 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; +} +.dropdown-label:hover { + background-color: var(--buttom-hover); +} + +/* playlist */ +.playlist { + display: grid; + grid-gap: 4px; + grid-template-areas: + "play-box" + "play-hidden" + "play-add" + "play-clean"; + grid-area: playlist; +} +.play-box { + grid-area: play-box; +} + +.play-hidden { + grid-area: play-hidden; +} + +.play-add { + grid-area: play-add; + cursor: pointer; + + 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; +} +.play-add:hover { + background-color: var(--buttom-hover); +} + +.play-clean { + display: grid; + grid-area: play-clean; +} + +.play-clean > button { + 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; +} +.play-clean > button:hover { + background-color: var(--buttom-hover); +} +/* /playlist */ + +/* ------------- Menu Mobile sin JS ---------------- */ +/* input hidden */ +.opt-box { + display: none; +} +.dropdown-content { + display: none; + grid-area: dropdown-content; +} +label[for=options-toggle-cbox] { + 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; +} + +#options-toggle-cbox:checked ~ .dropdown-content { + display: inline-grid; + white-space: nowrap; +} +/*- ----------- End Menu Mobile sin JS ------------- */ + +.main { + grid-area: main; + display: grid; + grid-row-gap: 1rem; +} + +/* fix hr when is children of grid */ +hr { + width: 100%; +} + +.result-info { + justify-self: center; +} + +/* pagination */ +.main .pagination-container { + display: grid; + justify-content: center; +} + +.main .pagination-container .pagination-list { + display: grid; + grid-auto-flow: column; + grid-column-gap: 0.5rem; +} + +.main .pagination-container .pagination-list .page-link { + border-style: none; + font-weight: bold; + text-align: center; + background: var(--secondary-focus); + text-decoration: none; + align-self: center; + padding: .5rem; + width: 1rem; +} + +.main .pagination-container .pagination-list .page-link.is-current { + background: var(--secondary-background); +} + +/* Video list item */ +.video-container { + display: grid; + grid-row-gap: 0.5rem; +} + +.length { + z-index: 100; + position: absolute; + background-color: rgba(35, 35, 35, 0.75); + color: #fff; + border-radius: 2px; + padding: 2px; + font-size: 16px; + right: 0.25em; + bottom: -0.75em; +} + +.item-box { + display: grid; + grid-template-columns: 1.9fr 0.1fr; + grid-template-rows: 1fr; + grid-gap: 1px; + grid-template-areas: + "item-video item-checkbox"; +} + +.item-video { + grid-area: item-video; + + display: grid; + grid-template-columns: auto; + grid-template-rows: repeat(4, auto); + grid-row-gap: 0.4rem; + grid-template-areas: + "thumbnail-box" + "info-box"; + align-items: center; + + font-size: 0.7rem; +} + +.item-video a { + text-decoration: none; + cursor: pointer; +} + +.item-video.channel-item .thumbnail.channel { + padding: 0px; + text-align: center; +} + +.item-video.channel-item .thumbnail-img.channel { + width: 56.25%; + position: relative; +} + +.thumbnail-box { + grid-area: thumbnail-box; + position: relative; +} + +.playlist-item .thumbnail-info { + position: absolute; + right: 0px; + bottom: 0px; + height: 100%; + width: 50%; + text-align: center; + white-space: pre-line; + opacity: .8; + color: var(--text); + font-size: 0.8125rem; + background: var(--secondary-background); + padding: 0; +} + +.playlist-item .thumbnail-info span { + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + text-transform: none; +} + +.thumbnail { + padding: 28.125%; + position: relative; + box-sizing: border-box; +} + +.thumbnail-img { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + object-fit: cover; +} + +.title { + font-size: 0.8rem; + margin: 0px; + font-weight: normal; + overflow: hidden; + text-overflow: ellipsis; +} + +.info-box address { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.thumbnail-info { + background-color: var(--time-background); + color: #fff; + padding: 2px 5px; + text-transform: uppercase; + font-weight: 700; + font-size: 12px; + position: absolute; + right: 0; + bottom: .2rem; +} + +.item-checkbox { + grid-area: item-checkbox; + justify-self: start; + align-self: center; + min-width: 30px; + margin: 0px; +} + +.stats { + display: flex; + justify-content: space-between; +} + +.horizontal-stats > li { + display: inline; +} + + +.horizontal-stats > li:first-child::after { + content: " | "; +} + +/* /video list item */ + +.footer { + grid-area: footer; +} + +.footer > p { + text-align: center; +} + +@media (min-width: 480px) { + .item-video { + font-size: 0.85rem; + } + .info-box { + grid-gap: 2px; + } + .title { + font-size: 1rem; + } +} + +@media (min-width: 600px) { + .video-container { + display: grid; + grid-row-gap: 0.5rem; + grid-template-columns: 1fr 1fr; + } +} + +@media (min-width: 992px) { + body { + display: grid; + grid-template-columns: 0.3fr 2fr 1fr 0.3fr; + grid-template-rows: auto 1fr auto; + grid-template-areas: + "header header header header" + "main main main main" + "footer footer footer footer"; + } + .form { + display: grid; + grid-gap: 1px; + grid-template-columns: 1fr 1.4fr 0.3fr 1.3fr; + grid-template-areas: ". search-box search-button dropdown"; + grid-area: form; + position: relative; + } + .dropdown { + display: grid; + grid-gap: 1px; + grid-template-columns: minmax(50px, 100px); + grid-template-areas: + "dropdown-label" + "dropdown-content"; + grid-area: dropdown; + background: var(--background); + padding-right: 4rem; + z-index: 1; + position: absolute; + } + + /* playlist */ + .playlist { + display: grid; + grid-gap: 1px; + grid-template-columns: 1fr 1.4fr 0.3fr 1.3fr; + grid-template-areas: ". play-box play-add play-clean"; + grid-area: playlist; + } + .play-clean { + grid-template-columns: minmax(50px, 100px); + } + .play-clean > button { + padding-left: 0px; + padding-right: 0px; + padding-bottom: 6px; + padding-top: 6px; + text-align: center; + white-space: nowrap; + background-color: var(--buttom); + color: var(--buttom-text); + border-radius: 5px; + cursor: pointer; + } + + .video-container { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-row-gap: 1rem; + grid-column-gap: 1rem; + } +} diff --git a/youtube/static/settings.css b/youtube/static/settings.css new file mode 100644 index 0000000..2e72505 --- /dev/null +++ b/youtube/static/settings.css @@ -0,0 +1,241 @@ +html { + font-family: "liberation serif", "times new roman", calibri, carlito, serif; + background: var(--background); + color: var(--text); +} + +body { + display: grid; + grid-gap: 20px; + grid-template-areas: + "header" + "main" + "footer"; + /* Fix height */ + height: 100vh; + grid-template-rows: auto 1fr auto; + /* fix top and bottom */ + margin-left: 1rem; + margin-right: 1rem; +} + +a:link { + color: var(--link); +} + +a:visited { + color: var(--link-visited); +} + +input[type="text"], +input[type="search"] { + background: var(--background); + border: 1px solid var(--button-border); + border-radius: 5px; + padding: 0.4rem 0.4rem; + font-size: 15px; + color: var(--search-text); +} + +input[type='search'] { + border-bottom: 1px solid var(--button-border); + border-top: 0px; + border-left: 0px; + border-right: 0px; + border-radius: 0px; +} + +header { + display: grid; + grid-gap: 1px; + grid-template-areas: + "home" + "form"; + grid-area: header; +} + +.home { + grid-area: home; + margin-left: auto; + margin-right: auto; + margin-bottom: 1rem; + margin-top: 1rem; +} + +.form { + display: grid; + grid-gap: 4px; + grid-template-areas: + "search-box" + "search-button" + "dropdown"; + grid-area: form; +} + +.search-box { + grid-area: search-box; +} +.search-button { + grid-area: search-button; + + cursor: pointer; + 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; +} +.search-button:hover { + background-color: var(--buttom-hover); +} + +.dropdown { + display: grid; + grid-gap: 1px; + grid-template-areas: + "dropdown-label" + "dropdown-content"; + grid-area: dropdown; + z-index: 1; +} +.dropdown-label { + grid-area: dropdown-label; + + 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; +} +.dropdown-label:hover { + background-color: var(--buttom-hover); +} + +/* ------------- Menu Mobile sin JS ---------------- */ +/* input hidden */ +.opt-box { + display: none; +} +.dropdown-content { + display: none; + grid-area: dropdown-content; +} +label[for=options-toggle-cbox] { + 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; +} + +#options-toggle-cbox:checked ~ .dropdown-content { + display: inline-grid; + white-space: nowrap; +} +/*- ----------- End Menu Mobile sin JS ------------- */ + +.main { + grid-area: main; + margin: 0 auto; + width: 100%; +} + +.settings-form { + background-color: var(--secondary-background); + padding: 1rem; +} + +.settings-list { + display: grid; + grid-row-gap: 1rem; + list-style: none; + padding: 0px; +} + +.setting-item { + display: grid; + grid-template-columns: auto auto; + background-color: var(--secondary-focus); + align-items: center; + padding: 5px; +} + +.setting-item select { + max-width: 100%; + justify-self: end; +} + +.setting-item input { + max-width: 80px; + justify-self: end; +} + +.settings-form input[type="submit"] { + cursor: pointer; +} + +.footer { + grid-area: footer; +} + +.footer > p { + text-align: center; +} + +@media (min-width: 780px) { + body { + display: grid; + grid-template-columns: 0.3fr 2fr 1fr 0.3fr; + grid-template-rows: auto 1fr auto; + grid-template-areas: + "header header header header" + "main main main main" + "footer footer footer footer"; + } + .form { + display: grid; + grid-gap: 1px; + grid-template-columns: 1fr 1.4fr 0.3fr 1.3fr; + grid-template-areas: ". search-box search-button dropdown"; + grid-area: form; + position: relative; + } + .dropdown { + display: grid; + grid-gap: 1px; + grid-template-columns: minmax(50px, 100px); + grid-template-areas: + "dropdown-label" + "dropdown-content"; + grid-area: dropdown; + z-index: 1; + position: absolute; + background: var(--background); + padding-right: 4rem; + } + .main { + display: grid; + justify-content: center; + } + .settings-form { + width: 50vw; + } + .setting-item select { + max-width: 250px; + } + .setting-item input { + max-width: 250px; + } +} diff --git a/youtube/static/subscription.css b/youtube/static/subscription.css new file mode 100644 index 0000000..74571fc --- /dev/null +++ b/youtube/static/subscription.css @@ -0,0 +1,530 @@ +html { + font-family: "liberation serif", "times new roman", calibri, carlito, serif; + background: var(--background); + color: var(--text); +} + +body { + display: grid; + grid-gap: 20px; + grid-template-areas: + "header" + "main" + "footer"; + /* Fix height */ + height: 100vh; + grid-template-rows: auto 1fr auto; + /* fix top and bottom */ + margin-left: 1rem; + margin-right: 1rem; +} + +img { + width: 100%; + height: auto; +} + +a:link { + color: var(--link); +} + +a:visited { + color: var(--link-visited); +} + +input[type="text"], +input[type="search"] { + background: var(--background); + border: 1px solid var(--button-border); + padding: 0.4rem 0.4rem; + font-size: 15px; + color: var(--search-text); +} + +input[type='search'] { + border-bottom: 1px solid var(--button-border); + border-top: 0px; + border-left: 0px; + border-right: 0px; + border-radius: 0px; +} + +header { + display: grid; + grid-gap: 1px; + grid-template-areas: + "home" + "form" + "playlist"; + grid-area: header; +} + +.home { + grid-area: home; + margin-left: auto; + margin-right: auto; + margin-bottom: 1rem; + margin-top: 1rem; +} + +.form { + display: grid; + grid-gap: 4px; + grid-template-areas: + "search-box" + "search-button" + "dropdown"; + grid-area: form; +} + +.search-box { + grid-area: search-box; +} +.search-button { + grid-area: search-button; + + cursor: pointer; + 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; +} +.search-button:hover { + background-color: var(--buttom-hover); +} + +.dropdown { + display: grid; + grid-gap: 1px; + grid-template-areas: + "dropdown-label" + "dropdown-content"; + grid-area: dropdown; + z-index: 1; +} +.dropdown-label { + grid-area: dropdown-label; + + 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; +} +.dropdown-label:hover { + background-color: var(--buttom-hover); +} + +/* playlist */ +.playlist { + display: grid; + grid-gap: 4px; + grid-template-areas: + "play-box" + "play-hidden" + "play-add" + "play-clean"; + grid-area: playlist; +} +.play-box { + grid-area: play-box; +} + +.play-hidden { + grid-area: play-hidden; +} + +.play-add { + grid-area: play-add; + cursor: pointer; + + 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; +} +.play-add:hover { + background-color: var(--buttom-hover); +} + +.play-clean { + display: grid; + grid-area: play-clean; +} + +.play-clean > button { + 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; +} +.play-clean > button:hover { + background-color: var(--buttom-hover); +} +/* /playlist */ + +/* ------------- Menu Mobile sin JS ---------------- */ +/* input hidden */ +.opt-box { + display: none; +} +.dropdown-content { + display: none; + grid-area: dropdown-content; +} +label[for=options-toggle-cbox] { + 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; +} + +#options-toggle-cbox:checked ~ .dropdown-content { + display: inline-grid; + white-space: nowrap; +} +/*- ----------- End Menu Mobile sin JS ------------- */ + +.main { + grid-area: main; + display: grid; + grid-row-gap: 1rem; +} + +/* fix hr when is children of grid */ +hr { + width: 100%; +} + +.sidebar-links { + display: grid; + grid-template-columns: 1fr; + margin: auto; + grid-template-areas: + "sidebar-title" + "sidebar-action"; + align-items: center; + justify-items: center; + justify-content: center; +} +.sidebar-title { + grid-area: sidebar-title; + text-align: center; +} +.sidebar-action { + grid-area: sidebar-action; +} + +/* Video list item */ +.video-container { + display: grid; + grid-row-gap: 0.5rem; +} + +.item-box { + display: grid; + grid-template-columns: 1.9fr 0.1fr; + grid-template-rows: 1fr; + grid-gap: 1px; + grid-template-areas: + "item-video item-checkbox"; +} + +.item-video { + grid-area: item-video; + + display: grid; + grid-template-columns: auto; + grid-template-rows: repeat(4, auto); + grid-row-gap: 0.4rem; + grid-template-areas: + "thumbnail-box" + "info-box"; + align-items: center; + + font-size: 0.7rem; +} + +.item-video a { + text-decoration: none; + cursor: pointer; +} + +.thumbnail-box { + grid-area: thumbnail-box; + position: relative; +} + +.thumbnail { + padding: 28.125%; + position: relative; + box-sizing: border-box; +} + +.thumbnail-img { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + object-fit: cover; +} + +.length { + z-index: 100; + position: absolute; + background-color: rgba(35, 35, 35, 0.75); + color: #fff; + border-radius: 2px; + padding: 2px; + font-size: 16px; + right: 0.25em; + bottom: -0.75em; +} + +.playlist-item .thumbnail-info { + position: absolute; + right: 0px; + bottom: 0px; + height: 100%; + width: 50%; + text-align: center; + white-space: pre-line; + opacity: .8; + color: var(--text); + font-size: 0.8125rem; + background: var(--secondary-background); + padding: 0; +} + +.playlist-item .thumbnail-info span { + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + text-transform: none; +} + +.thumbnail-img { + margin: auto; + display: block; + max-height: 100%; + max-width: 100%; +} + +.info-box { + grid-area: info-box; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: auto auto auto auto auto; + grid-gap: 1px; + grid-template-areas: + "." + "." + "." + "." + "."; +} + +.title { + font-size: 0.8rem; + margin: 0px; + font-weight: normal; + overflow: hidden; + text-overflow: ellipsis; +} + +.info-box address { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.thumbnail-info { + background-color: var(--time-background); + color: #fff; + padding: 2px 5px; + text-transform: uppercase; + font-weight: 700; + font-size: 12px; + position: absolute; + right: 0; + bottom: .2rem; +} + +.item-checkbox { + grid-area: item-checkbox; + justify-self: start; + align-self: center; + min-width: 30px; + margin: 0px; +} + +.stats { + display: flex; + justify-content: space-between; +} + +.horizontal-stats { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.horizontal-stats > li { + display: inline; +} + +.horizontal-stats > li:first-child::after { + content: " | "; +} + +/* pagination */ +.main .pagination-container { + display: grid; + justify-content: center; +} + +.main .pagination-container .pagination-list { + display: grid; + grid-auto-flow: column; + grid-column-gap: 0.5rem; +} + +.main .pagination-container .pagination-list .page-link { + border-style: none; + font-weight: bold; + text-align: center; + background: var(--secondary-focus); + text-decoration: none; + align-self: center; + padding: .5rem; + width: 1rem; +} + +.main .pagination-container .pagination-list .page-link.is-current { + background: var(--secondary-background); +} + +/* /video list item */ + +.footer { + grid-area: footer; +} + +.footer > p { + text-align: center; +} + +@media (min-width: 480px) { + .item-video { + font-size: 0.85rem; + } + .info-box { + grid-gap: 2px; + } + .title { + font-size: 1rem; + } +} + +@media (min-width: 600px) { + .video-container { + display: grid; + grid-row-gap: 0.5rem; + grid-template-columns: 1fr 1fr; + } +} + +@media (min-width: 992px) { + body { + display: grid; + grid-template-columns: 0.3fr 2fr 1fr 0.3fr; + grid-template-rows: auto 1fr auto; + grid-template-areas: + "header header header header" + "main main main main" + "footer footer footer footer"; + } + .form { + display: grid; + grid-gap: 1px; + grid-template-columns: 1fr 1.4fr 0.3fr 1.3fr; + grid-template-areas: ". search-box search-button dropdown"; + grid-area: form; + position: relative; + } + .dropdown { + display: grid; + grid-gap: 1px; + grid-template-columns: minmax(50px, 100px); + grid-template-areas: + "dropdown-label" + "dropdown-content"; + grid-area: dropdown; + background: var(--background); + padding-right: 4rem; + z-index: 1; + position: absolute; + } + + .sidebar-links { + max-width: 50vw; + } + + /* playlist */ + .playlist { + display: grid; + grid-gap: 1px; + grid-template-columns: 1fr 1.4fr 0.3fr 1.3fr; + grid-template-areas: ". play-box play-add play-clean"; + grid-area: playlist; + } + .play-clean { + grid-template-columns: minmax(50px, 100px); + } + .play-clean > button { + padding-left: 0px; + padding-right: 0px; + padding-bottom: 6px; + padding-top: 6px; + text-align: center; + white-space: nowrap; + background-color: var(--buttom); + color: var(--buttom-text); + border-radius: 5px; + cursor: pointer; + } + + .video-container { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-row-gap: 1rem; + grid-column-gap: 1rem; + } +} diff --git a/youtube/static/subscription_manager.css b/youtube/static/subscription_manager.css new file mode 100644 index 0000000..a7d9780 --- /dev/null +++ b/youtube/static/subscription_manager.css @@ -0,0 +1,403 @@ +html { + font-family: "liberation serif", "times new roman", calibri, carlito, serif; + background: var(--background); + color: var(--text); +} + +body { + display: grid; + grid-gap: 20px; + grid-template-areas: + "header" + "main" + "footer"; + /* Fix height */ + height: 100vh; + grid-template-rows: auto 1fr auto; + /* fix top and bottom */ + margin-left: 1rem; + margin-right: 1rem; +} + +img { + width: 100%; + height: auto; +} + +a:link { + color: var(--link); +} + +a:visited { + color: var(--link-visited); +} + +input[type="text"], +input[type="search"] { + background: var(--background); + border: 1px solid var(--button-border); + padding: 0.4rem 0.4rem; + font-size: 15px; + color: var(--search-text); +} + +input[type='search'] { + border-bottom: 1px solid var(--button-border); + border-top: 0px; + border-left: 0px; + border-right: 0px; + border-radius: 0px; +} + +header { + display: grid; + grid-gap: 1px; + grid-template-areas: + "home" + "form" + "playlist"; + grid-area: header; +} + +.home { + grid-area: home; + margin-left: auto; + margin-right: auto; + margin-bottom: 1rem; + margin-top: 1rem; +} + +.form { + display: grid; + grid-gap: 4px; + grid-template-areas: + "search-box" + "search-button" + "dropdown"; + grid-area: form; +} + +.search-box { + grid-area: search-box; +} +.search-button { + grid-area: search-button; + + cursor: pointer; + 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; +} +.search-button:hover { + background-color: var(--buttom-hover); +} + +.dropdown { + display: grid; + grid-gap: 1px; + grid-template-areas: + "dropdown-label" + "dropdown-content"; + grid-area: dropdown; + z-index: 1; +} +.dropdown-label { + grid-area: dropdown-label; + + 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; +} +.dropdown-label:hover { + background-color: var(--buttom-hover); +} + +/* playlist */ +.playlist { + display: grid; + grid-gap: 4px; + grid-template-areas: + "play-box" + "play-hidden" + "play-add" + "play-clean"; + grid-area: playlist; +} +.play-box { + grid-area: play-box; +} + +.play-hidden { + grid-area: play-hidden; +} + +.play-add { + grid-area: play-add; + cursor: pointer; + + 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; +} +.play-add:hover { + background-color: var(--buttom-hover); +} + +.play-clean { + display: grid; + grid-area: play-clean; +} + +.play-clean > button { + 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; +} +.play-clean > button:hover { + background-color: var(--buttom-hover); +} +/* /playlist */ + +/* ------------- Menu Mobile sin JS ---------------- */ +/* input hidden */ +.opt-box { + display: none; +} +.dropdown-content { + display: none; + grid-area: dropdown-content; +} +label[for=options-toggle-cbox] { + 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; +} + +#options-toggle-cbox:checked ~ .dropdown-content { + display: inline-grid; + white-space: nowrap; +} +/*- ----------- End Menu Mobile sin JS ------------- */ + +.main { + grid-area: main; + display: grid; + grid-row-gap: 1rem; +} + +/* fix hr when is children of grid */ +hr { + width: 100%; +} + +.import-export { + display: grid; + grid-template-columns: 1fr; + margin: auto; + grid-template-areas: + "subscriptions-import-form"; + align-items: center; + justify-items: center; + justify-content: center; +} +.subscriptions-import-form { + grid-area: subscriptions-import-form; + text-align: center; +} + +.sub-list-controls { + display: grid; + grid-row-gap: 0.2rem; +} + +.subscriptions-import-form input[type='submit'], +.sub-list-controls button[type='submit'], +.sub-list-controls input[type='reset'] { + cursor: pointer; + padding-bottom: 6px; + padding-left: .75em; + padding-right: .75em; + padding-top: 6px; + text-align: center; + background-color: var(--buttom); + border: 1px solid var(--button-border); + color: var(--buttom-text); + border-radius: 5px; +} + +.tag-group-list { + display: grid; + grid-template-columns: 1fr; + margin: auto; +} + +.sub-list { + display: grid; + grid-template-columns: 1fr; + margin: auto; +} + +/* pagination */ +.main .pagination-container { + display: grid; + justify-content: center; +} + +.main .pagination-container .pagination-list { + display: grid; + grid-auto-flow: column; + grid-column-gap: 0.5rem; +} + +.main .pagination-container .pagination-list .page-link { + border-style: none; + font-weight: bold; + text-align: center; + background: var(--secondary-focus); + text-decoration: none; + align-self: center; + padding: .5rem; + width: 1rem; +} + +.main .pagination-container .pagination-list .page-link.is-current { + background: var(--secondary-background); +} + +/* /video list item */ + +.footer { + grid-area: footer; +} + +.footer > p { + text-align: center; +} + +@media (min-width: 480px) { + .item-video { + font-size: 0.85rem; + } + .info-box { + grid-gap: 2px; + } + .title { + font-size: 1rem; + } +} + +@media (min-width: 600px) { + .video-container { + display: grid; + grid-row-gap: 0.5rem; + grid-template-columns: 1fr 1fr; + } +} + +@media (min-width: 992px) { + body { + display: grid; + grid-template-columns: 0.3fr 2fr 1fr 0.3fr; + grid-template-rows: auto 1fr auto; + grid-template-areas: + "header header header header" + "main main main main" + "footer footer footer footer"; + } + .form { + display: grid; + grid-gap: 1px; + grid-template-columns: 1fr 1.4fr 0.3fr 1.3fr; + grid-template-areas: ". search-box search-button dropdown"; + grid-area: form; + position: relative; + } + .dropdown { + display: grid; + grid-gap: 1px; + grid-template-columns: minmax(50px, 100px); + grid-template-areas: + "dropdown-label" + "dropdown-content"; + grid-area: dropdown; + background: var(--background); + padding-right: 4rem; + z-index: 1; + position: absolute; + } + + .import-export { + max-width: 50vw; + } + + .sub-list-controls { + grid-template-columns: repeat(8, auto); + max-height: 1rem; + grid-column-gap: 0.5rem; + justify-content: center; + align-items: center; + } + + /* playlist */ + .playlist { + display: grid; + grid-gap: 1px; + grid-template-columns: 1fr 1.4fr 0.3fr 1.3fr; + grid-template-areas: ". play-box play-add play-clean"; + grid-area: playlist; + } + .play-clean { + grid-template-columns: minmax(50px, 100px); + } + .play-clean > button { + padding-left: 0px; + padding-right: 0px; + padding-bottom: 6px; + padding-top: 6px; + text-align: center; + white-space: nowrap; + background-color: var(--buttom); + color: var(--buttom-text); + border-radius: 5px; + cursor: pointer; + } + + .video-container { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-row-gap: 1rem; + grid-column-gap: 1rem; + } +} diff --git a/youtube/static/watch.css b/youtube/static/watch.css new file mode 100644 index 0000000..697961d --- /dev/null +++ b/youtube/static/watch.css @@ -0,0 +1,633 @@ +html { + font-family: "liberation serif", "times new roman", calibri, carlito, serif; + background: var(--background); + color: var(--text); +} + +body { + display: grid; + grid-gap: 20px; + grid-template-areas: + "header" + "main" + "footer"; + /* Fix height */ + height: 100vh; + grid-template-rows: auto 1fr auto; + /* fix top and bottom */ + margin-left: 1rem; + margin-right: 1rem; +} + +img { + width: 100%; + height: auto; +} + +video { + width: 100%; + height: auto; + max-height: 480px; +} + +a:link { + color: var(--link); +} + +a:visited { + color: var(--link-visited); +} + +input[type="text"], +input[type="search"] { + background: var(--background); + border: 1px solid var(--button-border); + border-radius: 5px; + padding: 0.4rem 0.4rem; + font-size: 15px; + color: var(--search-text); +} + +input[type='search'] { + border-bottom: 1px solid var(--button-border); + border-top: 0px; + border-left: 0px; + border-right: 0px; + border-radius: 0px; +} + +header { + display: grid; + grid-gap: 4px; + grid-template-areas: + "home" + "form" + "playlist"; + grid-area: header; +} + +.home { + grid-area: home; + margin-left: auto; + margin-right: auto; + margin-bottom: 1rem; + margin-top: 1rem; +} + +.form { + display: grid; + grid-gap: 4px; + grid-template-areas: + "search-box" + "search-button" + "dropdown"; + grid-area: form; +} + +.search-box { + grid-area: search-box; +} +.search-button { + grid-area: search-button; + + cursor: pointer; + 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; +} +.search-button:hover { + background-color: var(--buttom-hover); +} + +.dropdown { + display: grid; + grid-gap: 1px; + grid-template-areas: + "dropdown-label" + "dropdown-content"; + grid-area: dropdown; + z-index: 1; +} +.dropdown-label { + grid-area: dropdown-label; + + 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; +} +.dropdown-label:hover { + background-color: var(--buttom-hover); +} + +.playlist { + display: grid; + grid-gap: 4px; + grid-template-areas: + "play-box" + "play-hidden" + "play-add" + "play-clean"; + grid-area: playlist; +} +.play-box { + grid-area: play-box; +} + +.play-hidden { + grid-area: play-hidden; +} + +.play-add { + grid-area: play-add; + cursor: pointer; + + 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; +} +.play-add:hover { + background-color: var(--buttom-hover); +} + +.play-clean { + display: grid; + grid-area: play-clean; +} + +.play-clean > button { + 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; +} +.play-clean > button:hover { + background-color: var(--buttom-hover); +} + +/* ------------- Menu Mobile sin JS ---------------- */ +/* input hidden */ +.opt-box { + display: none; +} +.dropdown-content { + display: none; + grid-area: dropdown-content; +} +label[for=options-toggle-cbox] { + 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; +} + +#options-toggle-cbox:checked ~ .dropdown-content { + display: inline-grid; + white-space: nowrap; + padding-left: 1rem; +} +/*- ----------- End Menu Mobile sin JS ------------- */ + +.main { + grid-area: main; + margin: 0 auto; + + display: grid; + grid-grap: 1px; + grid-template-columns: 1fr; + grid-template-areas: + "sc-video" + "sc-info"; +} +.sc-video { grid-area: sc-video; } +.sc-info { + display: grid; + grid-template-columns: 1fr; + grid-gap: 1px; + grid-template-areas: + "video-info" + "side-videos" + "comments-area-outer"; + grid-area: sc-info; +} +.video-info { + grid-area: video-info; + + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-areas: + "v-title v-title" + "v-uploaded v-views" + "v-published v-likes-dislikes" + "external-player-controls v-checkbox" + "v-download v-download" + "v-description v-description" + "v-music-list v-music-list" + "v-more-info v-more-info"; +} +.v-title { + grid-area: v-title; + margin: 0px; +} +.v-uploaded { grid-area: v-uploaded; } +.v-views { + grid-area: v-views; + justify-self: end; +} +.v-published { grid-area: v-published; } +.v-likes-dislikes { + grid-area: v-likes-dislikes; + justify-self: end; +} +.external-player-controls { + grid-area: external-player-controls; +} +.external-player-controls input.speed { + width: 65px; + text-align: center; +} +.v-checkbox { + grid-area: v-checkbox; + justify-self: end; +} +.v-download { grid-area: v-download; } +.v-download > ul.download-dropdown-content { + background: var(--secondary-background); + padding-left: 0px; +} +.v-download > ul.download-dropdown-content > li.download-format { + list-style: none; + padding: 0.4rem 0; + padding-left: 1rem; +} +.v-download > ul.download-dropdown-content > li.download-format a.download-link { + text-decoration: none; +} + +.v-description { + grid-area: v-description; + background-color: var(--secondary-background); + margin-top: 0.4rem; + white-space: pre-wrap; + word-wrap: break-word; + padding: 5px; +} + +.v-music-list { + grid-area: v-music-list; + padding-bottom: 1rem; +} +.v-music-list table,th,td{ + border: 1px solid; +} +.v-music-list th,td{ + padding-left:4px; + padding-right:5px; +} +.v-music-list caption{ + text-align:left; + font-weight:bold; + margin-bottom:5px; +} + +.v-more-info { + grid-area: v-more-info; +} +.v-more-info > .more-info-content { + background-color: var(--secondary-background); + padding: 5px; +} + +.side-videos { grid-area: side-videos; } + +/* playlist items */ +.side-videos .site-playlist { + border-style: solid; + border-width: 2px; + border-color: var(--secondary-focus); + margin-bottom: 1rem; +} + +.side-videos .site-playlist .playlist-header { + background-color: var(--secondary-background); + padding: 1rem; + border-bottom-style: solid; + border-bottom-width: 2px; + border-bottom-color: var(--secondary-focus); +} + +.side-videos .site-playlist .playlist-header h3 { + margin: 0px; + padding: 0px; +} + +.side-videos .site-playlist .playlist-header .playlist-metadata { + list-style: none; + display: grid; + justify-content: start; + padding: 0; + margin: 0px; + grid-template-columns: repeat(3, auto); + grid-column-gap: 1rem; +} + +.side-videos .site-playlist .playlist-videos { + display: grid; + grid-row-gap: 1rem; + height: 300px; + overflow-y: scroll; + padding-top: 1rem; +} + +.side-videos .site-playlist .playlist-videos article.item-box { + padding-left: 1rem; +} +/* /playlist items */ + +.comments-area-outer { grid-area: comments-area-outer; } + +.related-videos-inner { + padding-top: 10px; + display: grid; + grid-row-gap: 1rem; +} + +.item-box { + display: grid; + grid-template-columns: 1.9fr 0.1fr; + grid-template-rows: 1fr; + grid-gap: 1px; + grid-template-areas: + "item-video item-checkbox"; +} + +.item-video { + grid-area: item-video; + + display: grid; + grid-template-columns: auto; + grid-template-rows: repeat(4, auto); + grid-row-gap: 0.4rem; + grid-template-areas: + "thumbnail-box" + "info-box"; + align-items: center; + + font-size: 0.7rem; +} + +.item-video a { + text-decoration: none; + cursor: pointer; +} + +.thumbnail-box { + grid-area: thumbnail-box; + position: relative; +} + +.thumbnail { + padding: 28.125%; + position: relative; + box-sizing: border-box; +} + +.thumbnail-img { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + object-fit: cover; +} + +.length { + z-index: 100; + position: absolute; + background-color: rgba(35, 35, 35, 0.75); + color: #fff; + border-radius: 2px; + padding: 2px; + font-size: 16px; + right: 0.25em; + bottom: -0.75em; +} + +.info-box { + grid-area: info-box; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: auto auto auto auto auto; + grid-gap: 1px; + grid-template-areas: + "." + "." + "." + "." + "."; +} + +.title { + font-size: 0.8rem; + margin: 0px; + font-weight: normal; + overflow: hidden; + text-overflow: ellipsis; +} + +.info-box address { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.thumbnail-info { + background-color: var(--time-background); + color: #fff; + padding: 2px 5px; + text-transform: uppercase; + font-weight: 700; + font-size: 12px; + position: absolute; + right: 0; + bottom: .2rem; +} + +.item-checkbox { + grid-area: item-checkbox; + justify-self: start; + align-self: center; + min-width: 30px; + margin: 0px; +} + +.stats { + display: flex; + justify-content: space-between; +} + +/* comments */ +.comments-area { + display: grid; + grid-row-gap: 0.5rem; +} + +.comments { + display: grid; + grid-row-gap: 0.5rem; +} + +.comment { + display: grid; + grid-template-columns: repeat(3, auto) 3fr; + grid-template-rows: repeat(4, auto); + grid-column-gap: 0.4rem; + grid-template-areas: + "author-avatar author-name permalink permalink" + "author-avatar comment-text comment-text comment-text" + ". comment-likes comment-likes comment-likes" + ". button-row button-row button-row"; + background: var(--secondary-background); +} + +.author-avatar { grid-area: author-avatar; } +.author-name { grid-area: author-name; } +.permalink { grid-area: permalink; } +.comment-text { grid-area: comment-text; } +.comment-likes { grid-area: comment-likes; } +.button-row { grid-area: button-row; } + +.more-comments { + justify-self: center; + margin-top: 10px; + margin-bottom: 10px; + background: var(--secondary-background); + padding: 5px; + + /* disable text selection */ + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.footer { + grid-area: footer; +} + +.footer > p { + text-align: center; +} + +@media (min-width: 480px) { + .item-video { + font-size: 0.85rem; + } + .title { + font-size: 1rem; + } +} + +@media (min-width: 992px) { + body { + display: grid; + grid-template-columns: 0.3fr 2fr 1fr 0.3fr; + grid-template-rows: auto 1fr auto; + grid-template-areas: + "header header header header" + ". main main ." + "footer footer footer footer"; + } + .form { + display: grid; + grid-gap: 1px; + grid-template-columns: 1fr 1.4fr 0.3fr 1.3fr; + grid-template-areas: ". search-box search-button dropdown"; + grid-area: form; + position: relative; + } + .dropdown { + display: grid; + grid-gap: 1px; + grid-template-columns: minmax(50px, 120px); + grid-template-areas: + "dropdown-label" + "dropdown-content"; + grid-area: dropdown; + + background: var(--background); + padding-right: 4rem; + + z-index: 1; + position: absolute; + } + .playlist { + display: grid; + grid-gap: 1px; + grid-template-columns: 1fr 1.4fr 0.3fr 1.3fr; + grid-template-areas: ". play-box play-add play-clean"; + grid-area: playlist; + } + .play-clean { + grid-template-columns: minmax(50px, 120px); + } + .play-clean > button { + padding-bottom: 6px; + padding-left: .75em; + padding-right: .75em; + padding-top: 6px; + text-align: center; + white-space: nowrap; + background-color: var(--buttom); + color: var(--buttom-text); + border-radius: 5px; + cursor: pointer; + } + + .main { + grid-area: main; + margin: 0px; + } + + .sc-info { + display: grid; + grid-template-columns: 3fr 1fr; + grid-gap: 1px 40px; + grid-template-areas: + "video-info side-videos" + "comments-area-outer side-videos" + ". side-videos"; + grid-area: sc-info; + } +} diff --git a/youtube/templates/base.html b/youtube/templates/base.html index 3d9f1e9..4d03c05 100644 --- a/youtube/templates/base.html +++ b/youtube/templates/base.html @@ -1,203 +1,238 @@ - + + + {{ page_title }} - - - - - - - + + + + + {% block style %} + {{ style }} + {% endblock %} - -
- Home -
-
-{% block main %} -{{ main }} -{% endblock %} +
+ + {% block main %} + {{ main }} + {% endblock %} +
+
+

This site is Free/Libre Software

+

Current version: 3304bab @ master

+
+ diff --git a/youtube/templates/channel.html b/youtube/templates/channel.html index dddbff1..25b0971 100644 --- a/youtube/templates/channel.html +++ b/youtube/templates/channel.html @@ -7,114 +7,30 @@ {% extends "base.html" %} {% import "common_elements.html" as common_elements %} {% block style %} - main{ - display:grid; -{% if current_tab == 'about' %} - grid-template-rows: 0fr 0fr 1fr; - grid-template-columns: 0fr 1fr; -{% else %} - grid-template-rows: repeat(5, 0fr); - grid-template-columns: auto 1fr; -{% endif %} - } - main .avatar{ - grid-row:1; - grid-column:1; - height:200px; - width:200px; - } - main .summary{ - grid-row:1; - grid-column:2; - margin-left: 5px; - } - .summary subscribe-unsubscribe, .summary short-description{ - margin-top: 10px; - } - main .channel-tabs{ - grid-row:2; - grid-column: 1 / span 2; - - display:grid; - grid-auto-flow: column; - justify-content:start; - - background-color: var(--interface-color); - padding: 3px; - padding-left: 6px; - } - #links-metadata{ - display: grid; - grid-auto-flow: column; - grid-column-gap: 10px; - grid-column: 1/span 2; - justify-content: start; - padding-top: 8px; - padding-bottom: 8px; - padding-left: 6px; - margin-bottom: 10px; - } - #number-of-results{ - font-weight:bold; - } - .content{ - grid-row: 4; - grid-column: 1 / span 2; - } - .search-content{ - width: 800px; - margin-left: 10px; - } - .item-grid{ - padding-left: 20px; - } - .item-list{ - width:800px; - margin: auto; - } - .page-button-row{ - margin-left: auto; - margin-right: auto; - } - .next-previous-button-row{ - margin-left: auto; - margin-right: auto; - } - .tab{ - padding: 5px 75px; - } - .channel-info{ - grid-row: 3; - grid-column: 1 / span 3; - } - .channel-info ul{ - padding-left: 40px; - } - .channel-info h3{ - margin-left: 40px; - } - .channel-info .description{ - white-space: pre-wrap; - min-width: 0; - margin-left: 40px; - } - .medium-item img{ - max-width: 168px; - } + {% endblock style %} {% block main %} - -
-

{{ channel_name }}

-

{{ short_description }}

- + +
+
+ {{ channel_name }} +

{{ channel_name }}

+
+
+

{{ short_description }}

+
+
+
+
{% else %} -
- - +
+
+
{% if current_tab == 'videos' %} - {% endif %} - +
+ {% endif %} + {% endblock main %} diff --git a/youtube/templates/comments.html b/youtube/templates/comments.html index ad5ab02..a128b44 100644 --- a/youtube/templates/comments.html +++ b/youtube/templates/comments.html @@ -5,23 +5,24 @@
{% if include_avatar %} - + {{ comment['author'] }} {% endif %} -
+
{{ comment['author'] }}
+ {% if timestamp_links %} - {{ common_elements.text_runs(comment['text'])|timestamps|safe }} + {{ common_elements.text_runs(comment['text'])|timestamps|safe }} {% else %} - {{ common_elements.text_runs(comment['text']) }} + {{ common_elements.text_runs(comment['text']) }} {% endif %} - -
+ {{ comment['likes_text'] if comment['like_count'] else ''}} +
{% if settings.use_comments_js and comment['reply_count'] %}
{{ comment['view_replies_text'] }} @@ -33,7 +34,6 @@ {% endif %}
-
{% endmacro %} @@ -57,8 +57,5 @@ More comments {% endif %} {% endif %} -{% endmacro %} - - - +{% endmacro %} diff --git a/youtube/templates/comments_page.html b/youtube/templates/comments_page.html index 2d914af..09230f5 100644 --- a/youtube/templates/comments_page.html +++ b/youtube/templates/comments_page.html @@ -3,16 +3,11 @@ {% if not slim %} {% extends "base.html" %} - {% block style %} - .comments-area{ - margin: auto; - width:640px; - } + {% endblock style %} {% endif %} - {% block main %}
{% if not comments_info['is_replies'] %} @@ -27,7 +22,6 @@
{% endif %} - {% if not comments_info['is_replies'] %}
{% for link_text, link_url in comments_info['comment_links'] %} @@ -51,5 +45,3 @@ {% endif %} {% endblock main %} - - diff --git a/youtube/templates/common_elements.html b/youtube/templates/common_elements.html index 0587ce3..fcd4125 100644 --- a/youtube/templates/common_elements.html +++ b/youtube/templates/common_elements.html @@ -15,60 +15,55 @@ {% endmacro %} {% macro item(info, description=false, horizontal=true, include_author=true, include_badges=true, lazy_load=false) %} -
+
{% if info['error'] %} {{ info['error'] }} {% else %} -
+
- {% if lazy_load %} - - {% else %} - - {% endif %} - {% if info['type'] != 'channel' %} -
- {{ (info['video_count']|commatize + ' videos') if info['type'] == 'playlist' else info['duration'] }} -
- {% endif %} - +
+ {% if lazy_load %} + thumbnail + {% elif info['type'] == 'channel' %} + thumbnail + {% else %} + thumbnail + {% endif %} -
{{ info['title'] }}
+ {% if info['type'] != 'channel' %} +

{{ (info['video_count']|commatize + ' videos') if info['type'] == 'playlist' else info['duration'] }}

+ {% endif %} +
+ +

{{ info['title'] }}

{% if include_author %} {% if info.get('author_url') %} -
By {{ info['author'] }}
+
{{ info['author'] }}
{% else %}
{{ info['author'] }}
{% endif %} {% endif %} -
    + +
    {% if info['type'] == 'channel' %} -
  • {{ info['approx_subscriber_count'] }} subscribers
    • -
  • {{ info['video_count']|commatize }} videos
    • +
    {{ info['approx_subscriber_count'] }} subscribers
    +
    {{ info['video_count']|commatize }} videos
    {% else %} - {% if info.get('approx_view_count') %} -
  • {{ info['approx_view_count'] }} views
    • - {% endif %} {% if info.get('time_published') %} -
    • + + {% endif %} + {% if info.get('approx_view_count') %} +
    {{ info['approx_view_count'] }} views
    {% endif %} {% endif %} -
- - {% if description %} - {{ text_runs(info.get('description', '')) }} - {% endif %} - {% if include_badges %} - {{ info['badges']|join(' | ') }} - {% endif %} +
{% if info['type'] == 'video' %} {% endif %} {% endif %} -
- + {% endmacro %} {% macro page_buttons(estimated_pages, url, parameters_dictionary) %} @@ -84,12 +79,12 @@ {% for page in range(page_start, page_end+1) %} {% if page == current_page %} -
{{ page }}
+
{{ page }}
{% else %} {# IMPORTANT: Jinja SUCKS #} {# https://stackoverflow.com/questions/36886650/how-to-add-a-new-entry-into-a-dictionary-object-while-using-jinja2 #} {% set _ = parameters_dictionary.__setitem__('page', page) %} - {{ page }} + {{ page }} {% endif %} {% endfor %} @@ -101,11 +96,11 @@ {% if current_page != 1 %} {% set _ = parameters_dictionary.__setitem__('page', current_page - 1) %} - Previous page + Previous page {% endif %} {% if not is_last_page %} {% set _ = parameters_dictionary.__setitem__('page', current_page + 1) %} - Next page + Next page {% endif %} {% endmacro %} diff --git a/youtube/templates/error.html b/youtube/templates/error.html index c3f58b0..e02ecd9 100644 --- a/youtube/templates/error.html +++ b/youtube/templates/error.html @@ -4,9 +4,13 @@ {% extends "base.html" %} {% endif %} +{% block style %} + +{% endblock style %} + {% block main %} {% if traceback %} -
+

500 Uncaught exception:

{{ traceback }}

Please report this issue at https://github.com/user234683/youtube-local/issues

@@ -16,4 +20,3 @@
{{ error_message }}
{% endif %} {% endblock %} - diff --git a/youtube/templates/home.html b/youtube/templates/home.html index 9890f5e..0adac56 100644 --- a/youtube/templates/home.html +++ b/youtube/templates/home.html @@ -1,16 +1,7 @@ {% set page_title = title %} {% extends "base.html" %} {% block style %} - ul { - background-color: var(--interface-color); - padding: 20px; - width: 400px; - margin: auto; - margin-top: 20px; - } - li { - margin-bottom: 10px; - } + {% endblock style %} {% block main %}
    diff --git a/youtube/templates/local_playlist.html b/youtube/templates/local_playlist.html index 803c4dc..bbe5edd 100644 --- a/youtube/templates/local_playlist.html +++ b/youtube/templates/local_playlist.html @@ -2,41 +2,23 @@ {% extends "base.html" %} {% import "common_elements.html" as common_elements %} {% block style %} - main > *{ - width: 800px; - margin: auto; - } - - .playlist-metadata{ - display: flex; - flex-direction: row; - justify-content: space-between; - } - .playlist-title{ - } - #playlist-remove-button{ - align-self: center; - white-space: nowrap; - } - #results{ - display: grid; - grid-auto-rows: 0fr; - grid-row-gap: 10px; - } + {% endblock style %} {% block main %}
    -

    {{ playlist_name }}

    +

    {{ playlist_name }}

    - +
    -
    +
    {% for video_info in videos %} {{ common_elements.item(video_info) }} {% endfor %}
    - +
    + +
    {% endblock main %} diff --git a/youtube/templates/local_playlists_list.html b/youtube/templates/local_playlists_list.html index a9fccff..f400808 100644 --- a/youtube/templates/local_playlists_list.html +++ b/youtube/templates/local_playlists_list.html @@ -2,20 +2,7 @@ {% extends "base.html" %} {% block style %} -main{ - display: flex; - justify-content: center; -} - ul{ - background-color: var(--interface-color); - margin-top: 20px; - padding: 20px; - min-width: 400px; - align-self: start; - } - li{ - margin-bottom: 10px; - } + {% endblock style %} {% block main %} @@ -25,9 +12,3 @@ main{ {% endfor %}
{% endblock main %} - - - - - - diff --git a/youtube/templates/playlist.html b/youtube/templates/playlist.html index af86c82..8c88cc7 100644 --- a/youtube/templates/playlist.html +++ b/youtube/templates/playlist.html @@ -2,77 +2,39 @@ {% extends "base.html" %} {% import "common_elements.html" as common_elements %} {% block style %} - main > * { - width: 800px; - margin:auto; - } - - .playlist-metadata{ - display:grid; - grid-template-columns: 0fr 1fr; - } - .playlist-thumbnail{ - grid-row: 1 / span 5; - grid-column:1; - justify-self:start; - width:250px; - margin-right: 10px; - } - .playlist-title{ - grid-row: 1; - grid-column:2; - } - .playlist-author{ - grid-row:2; - grid-column:2; - } - .playlist-stats{ - grid-row:3; - grid-column:2; - } - - .playlist-description{ - grid-row:4; - grid-column:2; - min-width:0px; - white-space: pre-line; - } - - #results{ - margin-top:10px; - - display: grid; - grid-auto-rows: 0fr; - grid-row-gap: 10px; - - } + {% endblock style %} {% block main %} +
- -

{{ title }}

- {{ author }} +
+ {{ title }} +

{{ title }}

+
+
+ {{ author }} +
{{ video_count|commatize }} videos
{{ view_count|commatize }} views
Last updated {{ time_published }}
-
{{ common_elements.text_runs(description) }}
+
-
+ +
{% for info in video_list %} {{ common_elements.item(info) }} {% endfor %}
- -{% endblock main %} - - - - +
+
+ +
+{% endblock main %} diff --git a/youtube/templates/search.html b/youtube/templates/search.html index 8b803e7..e742099 100644 --- a/youtube/templates/search.html +++ b/youtube/templates/search.html @@ -3,44 +3,31 @@ {% extends "base.html" %} {% import "common_elements.html" as common_elements %} {% block style %} - main > * { - max-width: 800px; - margin: auto; - } - #result-info{ - margin-top: 10px; - margin-bottom: 10px; - padding-left: 10px; - padding-right: 10px; - } - #number-of-results{ - font-weight:bold; - } - .item-list{ - padding-left: 10px; - padding-right: 10px; - } - .badge{ - background-color:#cccccc; - } + {% endblock style %} {% block main %} -
-
Approximately {{ '{:,}'.format(estimated_results) }} results ({{ '{:,}'.format(estimated_pages) }} pages)
-{% if corrections['type'] == 'showing_results_for' %} - - -{% elif corrections['type'] == 'did_you_mean' %} - -{% endif %} -
-
- {% for info in results %} - {{ common_elements.item(info, description=true) }} - {% endfor %} -
- +
+
Approximately {{ '{:,}'.format(estimated_results) }} results ({{ '{:,}'.format(estimated_pages) }} pages)
+ {% if corrections['type'] == 'showing_results_for' %} + + + {% elif corrections['type'] == 'did_you_mean' %} + + {% endif %} +
+ + +
+ {% for info in results %} + {{ common_elements.item(info, description=true) }} + {% endfor %} +
+
+ +
+ +
{% endblock main %} diff --git a/youtube/templates/settings.html b/youtube/templates/settings.html index 19817dd..5385c68 100644 --- a/youtube/templates/settings.html +++ b/youtube/templates/settings.html @@ -1,28 +1,7 @@ {% set page_title = 'Settings' %} {% extends "base.html" %} -{% import "common_elements.html" as common_elements %} {% block style %} - .settings-form { - margin: auto; - width: 600px; - margin-top:10px; - padding: 10px; - display: block; - background-color: var(--interface-color); - } - .settings-list{ - list-style: none; - padding: 0px; - } - .setting-item{ - margin-bottom: 10px; - padding: 5px; - } - .setting-item label{ - display: inline-block; - width: 250px; - } - + {% endblock style %} {% block main %} @@ -30,37 +9,37 @@ {% for categ in categories %}

{{ categ|capitalize }}

    - {% for setting_name, setting_info, value in settings_by_category[categ] %} - {% if not setting_info.get('hidden', false) %} -
  • - {% if 'label' is in(setting_info) %} - - {% else %} - - {% endif %} - - {% if setting_info['type'].__name__ == 'bool' %} - - {% elif setting_info['type'].__name__ == 'int' %} - {% if 'options' is in(setting_info) %} - + {% for setting_name, setting_info, value in settings_by_category[categ] %} + {% if not setting_info.get('hidden', false) %} +
  • + {% if 'label' is in(setting_info) %} + {% else %} - + {% endif %} - {% elif setting_info['type'].__name__ == 'float' %} - {% elif setting_info['type'].__name__ == 'str' %} - - {% else %} - Error: Unknown setting type: setting_info['type'].__name__ - {% endif %} -
    • - {% endif %} - {% endfor %} + {% if setting_info['type'].__name__ == 'bool' %} + + {% elif setting_info['type'].__name__ == 'int' %} + {% if 'options' is in(setting_info) %} + + {% else %} + + {% endif %} + {% elif setting_info['type'].__name__ == 'float' %} + + {% elif setting_info['type'].__name__ == 'str' %} + + {% else %} + Error: Unknown setting type: setting_info['type'].__name__ + {% endif %} + + {% endif %} + {% endfor %}
{% endfor %} diff --git a/youtube/templates/subscription_manager.html b/youtube/templates/subscription_manager.html index 4d798e0..3b8a5c0 100644 --- a/youtube/templates/subscription_manager.html +++ b/youtube/templates/subscription_manager.html @@ -1,81 +1,7 @@ {% set page_title = 'Subscription Manager' %} {% extends "base.html" %} {% block style %} - .import-export{ - display: flex; - flex-direction: row; - padding-left: 10px; - padding-top: 10px; - } - .subscriptions-import-form{ - background-color: var(--interface-color); - display: flex; - flex-direction: column; - align-items: flex-start; - max-width: 300px; - padding:10px; - } - .subscriptions-import-form h2{ - font-size: 1.25rem; - margin-bottom: 10px; - } - - .import-submit-button{ - margin-top:15px; - align-self: flex-end; - } - - - .subscriptions-export-links{ - margin: 0px 0px 0px 20px; - background-color: var(--interface-color); - list-style: none; - max-width: 300px; - padding:10px; - } - - .sub-list-controls{ - background-color: var(--interface-color); - padding:10px; - } - - - .tag-group-list{ - list-style: none; - margin-left: 10px; - margin-right: 10px; - padding: 0px; - } - .tag-group{ - border-style: solid; - margin-bottom: 10px; - } - - .sub-list{ - list-style: none; - padding:10px; - column-width: 300px; - column-gap: 40px; - } - .sub-list-item{ - display:flex; - margin-bottom: 10px; - break-inside:avoid; - } - .sub-list-item:not(.muted){ - background-color: var(--interface-color); - } - .tag-list{ - margin-left:15px; - font-weight:bold; - } - .sub-list-item-name{ - margin-left:15px; - } - .sub-list-checkbox{ - height: 1.5em; - min-width: 1.5em; // need min-width otherwise browser doesn't respect the width and squishes the checkbox down when there's too many tags - } + {% endblock style %} @@ -89,8 +15,6 @@ {% endfor %} {% endmacro %} - - {% block main %}
diff --git a/youtube/templates/subscriptions.html b/youtube/templates/subscriptions.html index e2fb25c..9e48c6b 100644 --- a/youtube/templates/subscriptions.html +++ b/youtube/templates/subscriptions.html @@ -7,79 +7,21 @@ {% import "common_elements.html" as common_elements %} {% block style %} - main{ - display:flex; - flex-direction: row; - } - .video-section{ - flex-grow: 1; - padding-left: 10px; - padding-top: 10px; - } - .current-tag{ - margin-bottom:10px; - } - .video-section .page-button-row{ - justify-content: center; - } - .subscriptions-sidebar{ - flex-basis: 300px; - background-color: var(--interface-color); - border-left: 2px; - } - .sidebar-links{ - display:flex; - justify-content: space-between; - padding-left:10px; - padding-right: 10px; - } - - .sidebar-list{ - list-style: none; - padding-left:10px; - padding-right: 10px; - } - .sidebar-list-item{ - display:flex; - justify-content: space-between; - margin-bottom: 5px; - } - .sub-refresh-list .sidebar-item-name{ - text-overflow: clip; - white-space: nowrap; - overflow: hidden; - max-width: 200px; - } + {% endblock style %} {% block main %} -
- {% if current_tag %} -

{{ current_tag }}

- {% endif %} - - - -
- Subscription Manager - + Subscription Manager +
-
-
    {% if current_tag %}
  1. @@ -105,7 +47,6 @@
-
    {% for subscription in subscription_list %}
  1. @@ -119,7 +60,23 @@
    2. {% endfor %}
+
+ + {% if current_tag %} +

{{ current_tag }}

+ {% endif %} +
+ {% for video_info in videos %} + {{ common_elements.item(video_info) }} + {% endfor %}
+
+ +
+ +
{% endblock main %} diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html index 36b2198..44fc5a7 100644 --- a/youtube/templates/watch.html +++ b/youtube/templates/watch.html @@ -3,378 +3,17 @@ {% import "common_elements.html" as common_elements %} {% import "comments.html" as comments with context %} {% block style %} - details > summary{ - background-color: var(--interface-color); - border-style: outset; - border-width: 2px; - font-weight: bold; - padding-bottom: 2px; - } - details > summary:hover{ - text-decoration: underline; - } - - .playability-error{ - height: 360px; - width: 640px; - grid-column: 2; - background-color: var(--video-background-color); - text-align:center; - } - .playability-error span{ - position: relative; - top: 50%; - transform: translate(-50%, -50%); - } - - .live-url-choices{ - height: 360px; - width: 640px; - grid-column: 2; - background-color: var(--video-background-color); - padding: 25px 0px 0px 25px; - } - .live-url-choices ol{ - list-style: none; - padding:0px; - margin:0px; - margin-top: 15px; - } - .live-url-choices input{ - width: 400px; - } - .url-choice-label{ - display: inline-block; - width: 150px; - } - - {% if settings.theater_mode %} - /* This is the constant aspect ratio trick - Percentages in padding-top declarations are based on the width of the - parent element. We can use this trick to achieve a constant aspect ratio - for video-container-inner by setting height to 0. - - So the video height will decrease if the browser window is narrow, - but it will keep same aspect ratio. Must use absolute positioning on - video to keep it inside its container since the container's height is 0. - - However, because we widen the video player longer than the video's - intrinsic width for long video to make scrubbing easier, we can't use - the aspect ratio to set the height. The height needs to be the - intrinsic height in these cases. So we use a media query so aspect - ratio trick is only used if page width is less than or equal to - intrinsic video width. - */ - #video-container{ - grid-column: 1 / span 5; - justify-self: center; - max-width: 100%; - width: {{ theater_video_target_width }}px; - margin-bottom: 10px; - } - #video-container-inner{ - height: {{ video_height}}px; - position: relative; - } - @media(max-width:{{ video_width }}px){ - #video-container-inner{ - padding-top: calc(100%*{{video_height}}/{{video_width}}); - height: 0px; - } - } - video{ - background-color: var(--video-background-color); - position: absolute; - top: 0px; - left: 0px; - width: 100%; - height: 100%; - } - .side-videos{ - grid-row: 2 /span 3; - width: 400px; - } - .video-info{ - width: 640px; - } - {% else %} - #video-container{ - grid-column: 2; - } - #video-container, #video-container-inner, video{ - height: 360px; - width: 640px; - } - .side-videos{ - grid-row: 1 /span 4; - } - {% endif %} - - main{ - display:grid; - grid-template-columns: 1fr 640px 40px 400px 1fr; - grid-template-rows: auto auto auto auto; - align-content: start; - } - - .video-info{ - grid-column: 2; - grid-row: 2; - display: grid; - grid-template-rows: 0fr 0fr 0fr 20px 0fr 0fr; - grid-template-columns: 1fr 1fr; - align-content: start; - } - .video-info > .title{ - grid-column: 1 / span 2; - min-width: 0; - } - .video-info > .labels{ - justify-self:start; - list-style: none; - padding: 0px; - margin: 5px 0px; - } - .video-info > .labels:empty{ - margin: 0px; - } - .labels > li{ - display: inline; - margin-right:5px; - background-color: var(--interface-color); - padding: 2px 5px; - border-style: solid; - border-width: 1px; - } - .video-info > address{ - grid-column: 1; - grid-row: 3; - justify-self: start; - } - .video-info > .views{ - grid-column: 2; - grid-row: 3; - justify-self:end; - } - .video-info > time{ - grid-column: 1; - grid-row: 4; - justify-self:start; - } - .video-info > .likes-dislikes{ - grid-column: 2; - grid-row: 4; - justify-self:end; - } - .video-info > .external-player-controls{ - justify-self: start; - grid-row: 5; - grid-column: 1; - margin-bottom: 8px; - } - #speed-control{ - width: 65px; - text-align: center; - background-color: var(--interface-color); - color: var(--text-color); - } - .video-info > .checkbox{ - justify-self:end; - align-self: start; - - grid-row: 5; - grid-column: 2; - } - .video-info > .download-dropdown{ - grid-column:1 / span 2; - grid-row: 6; - } - .video-info > .description{ - background-color:var(--interface-color); - margin-top:8px; - white-space: pre-wrap; - min-width: 0; - word-wrap: break-word; - grid-column: 1 / span 2; - grid-row: 7; - padding: 5px; - } - - .music-list{ - grid-row:8; - grid-column: 1 / span 2; - background-color: var(--interface-color); - padding-bottom: 7px; - } - .music-list table,th,td{ - border: 1px solid; - } - .music-list th,td{ - padding-left:4px; - padding-right:5px; - } - .music-list caption{ - text-align:left; - font-weight:bold; - margin-bottom:5px; - } - .more-info{ - grid-row: 9; - grid-column: 1 / span 2; - background-color: var(--interface-color); - } - .more-info > summary{ - font-weight: normal; - border-width: 1px 0px; - border-style: solid; - } - .more-info-content{ - padding: 5px; - } - .more-info-content p{ - margin: 8px 0px; - } - .comments-area-outer{ - grid-column: 2; - grid-row: 3; - margin-top:10px; - } - .comments-disabled{ - background-color: var(--interface-color); - padding: 5px; - font-weight: bold; - } - .comments-area-inner{ - padding-top: 10px; - } - .comment{ - width:640px; - } - - .side-videos{ - grid-column: 4; - max-width: 640px; - } - #transcript-details{ - margin-bottom: 10px; - } - table#transcript-table { - border-collapse: collapse; - width: 100%; - } - table#transcript-table td, th { - border: 1px solid #dddddd; - } - div#transcript-div { - background-color: var(--interface-color); - padding: 5px; - } - .playlist{ - border-style: solid; - border-width: 2px; - border-color: lightgray; - margin-bottom: 10px; - } - .playlist-header{ - background-color: var(--interface-color); - padding: 3px; - border-bottom-style: solid; - border-bottom-width: 2px; - border-bottom-color: lightgray; - } - .playlist-header h3{ - margin: 2px; - } - .playlist-metadata{ - list-style: none; - padding: 0px; - margin: 0px; - } - .playlist-metadata li{ - display: inline; - margin: 2px; - } - .playlist-videos{ - height: 300px; - overflow-y: scroll; - display: grid; - grid-auto-rows: 90px; - grid-row-gap: 10px; - padding-top: 10px; - } - .related-videos-inner{ - padding-top: 10px; - display: grid; - grid-auto-rows: 90px; - grid-row-gap: 10px; - } - .thumbnail-box{ /* overides rule in shared.css */ - height: 90px !important; - width: 120px !important; - } - - /* Put related vids below videos when window is too small */ - /* 1100px instead of 1080 because W3C is full of idiots who include scrollbar width */ - @media (max-width:1100px){ - main{ - grid-template-columns: 1fr 640px 40px 1fr; - } - .side-videos{ - margin-top: 10px; - grid-column: 2; - grid-row: 3; - width: initial; - } - .comments-area-outer{ - grid-row: 4; - } - } - - .download-dropdown-content{ - background-color: var(--interface-color); - padding: 10px; - list-style: none; - margin: 0px; - } - li.download-format{ - margin-bottom: 7px; - } - .format-attributes{ - list-style: none; - padding: 0px; - margin: 0px; - display: flex; - flex-direction: row; - } - .format-attributes li{ - white-space: nowrap; - max-height: 1.2em; - } - .format-ext{ - width: 60px; - } - .format-video-quality{ - width: 140px; - } - .format-audio-quality{ - width: 120px; - } - .format-file-size{ - width: 80px; - } - .format-codecs{ - width: 120px; - } + {% endblock style %} {% block main %} {% if playability_error %}
{{ 'Error: ' + playability_error }} - {% if invidious_reload_button %} -
-Reload without invidious (for usage of new identity button). - {% endif %} + {% if invidious_reload_button %} +
+ Reload without invidious (for usage of new identity button). + {% endif %}
{% elif (video_sources.__len__() == 0 or live) and hls_formats.__len__() != 0 %} @@ -387,143 +26,137 @@ Reload without invidious (for usage of new identity button).
{% else %} -
-
- -
-
{% if time_start != 0 %} {% endif %} {% endif %} -
-

{{ title }}

-
    - {%- if unlisted -%} -
  • Unlisted
    • - {%- endif -%} - {%- if age_restricted -%} -
  • Age-restricted
    • - {%- endif -%} - {%- if limited_state -%} -
  • Limited state
    • - {%- endif -%} - {%- if live -%} -
  • Live
    • - {%- endif -%} -
-
Uploaded by {{ uploader }}
- {{ view_count }} views - - - - - -
- - -
- - -
- Download -
+
Uploaded by {{ uploader }}
+ {{ view_count }} views + + {{ like_count }} likes {{ dislike_count }} dislikes + +
+ + +
- {{ common_elements.text_runs(description)|escape|urlize|timestamps|safe }} -
- {% if music_list.__len__() != 0 %} -
- - - - {% for attribute in music_attributes %} - - {% endfor %} - - {% for track in music_list %} + + +
+ Download + +
+ {{ common_elements.text_runs(description)|escape|urlize|timestamps|safe }} + +
+ {% if music_list.__len__() != 0 %} +
+
Music
{{ attribute }}
+ {% for attribute in music_attributes %} - + {% endfor %} - {% endfor %} -
Music
{{ track.get(attribute.lower(), '') }}{{ attribute }}
- {% endif %} -
-
- More info -
-

Tor exit node: {{ ip_address }}

- {% if invidious_used %} -

Used Invidious as fallback.

- {% endif %} -

Allowed countries: {{ allowed_countries|join(', ') }}

- - {% if settings.use_sponsorblock_js %} -
    -
  • -
+ {% for track in music_list %} + + {% for attribute in music_attributes %} + {{ track.get(attribute.lower(), '') }} + {% endfor %} + + {% endfor %} + {% endif %}
-
-
+
+ More info +
+

Tor exit node: {{ ip_address }}

+ {% if invidious_used %} +

Used Invidious as fallback.

+ {% endif %} +

Allowed countries: {{ allowed_countries|join(', ') }}

+ {% if settings.use_sponsorblock_js %} +
    +
  • +
+ {% endif %} +
+
+
+ +
-
- {% if playlist %} -
+ + {% if playlist %} +

{{ playlist['title'] }}
    @@ -550,167 +183,171 @@ Reload without invidious (for usage of new identity button). {% if playlist['current_index'] is not none %} {% endif %} {% if playlist['id'] is not none %} {% endif %}
- {% endif %} + {% endif %} + + + {% if subtitle_sources %} +
+ Transcript +
+ + + +
+
+
+ {% endif %} + - {% if subtitle_sources %} -
- Transcript -
- - - -
-
-
- {% endif %} + + + {% endif %} - {% if settings.related_videos_mode != 0 %} -
- Related Videos - -
- {% endif %} -
+
- {% if settings.comments_mode != 0 %} - {% if comments_disabled %} -
Comments disabled
- {% else %} -
- {{ comment_count|commatize }} comment{{'s' if comment_count != 1 else ''}} -
- {% if comments_info %} - {{ comments.video_comments(comments_info) }} - {% endif %} -
-
+ + {% if settings.comments_mode != 0 %} + {% if comments_disabled %} +
Comments disabled
+ {% else %} +
+ {{ comment_count|commatize }} comment{{'s' if comment_count != 1 else ''}} +
+ {% if comments_info %} + {{ comments.video_comments(comments_info) }} + {% endif %} +
+
+ {% endif %} {% endif %} - {% endif %} + +
-- cgit v1.2.3