From b35afb7cf6c7640380c650ca60c8150bb743eb4b Mon Sep 17 00:00:00 2001 From: James Taylor Date: Mon, 19 Oct 2020 13:31:32 -0700 Subject: Add 'self' directive for img to CSP when proxy_images is off The default directive has self, but the img directive overrides that completely. Need this for local image requests such as subscriptions closes #31 --- youtube/templates/base.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'youtube/templates') diff --git a/youtube/templates/base.html b/youtube/templates/base.html index f325f86..379419c 100644 --- a/youtube/templates/base.html +++ b/youtube/templates/base.html @@ -4,7 +4,7 @@ {{ page_title }} + {{ "img-src 'self' https://*.googleusercontent.com https://*.ggpht.com https://*.ytimg.com;" if not settings.proxy_images else "" }}"> -- cgit v1.2.3 From 125ddaa8da8dad8f3e8eeb54f79a775b865c58bf Mon Sep 17 00:00:00 2001 From: James Taylor Date: Tue, 20 Oct 2020 15:38:00 -0700 Subject: Add setting to change font. Change default to arial Closes #33 --- youtube/templates/base.html | 2 +- youtube/templates/shared.css | 336 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 337 insertions(+), 1 deletion(-) create mode 100644 youtube/templates/shared.css (limited to 'youtube/templates') diff --git a/youtube/templates/base.html b/youtube/templates/base.html index 379419c..3d9f1e9 100644 --- a/youtube/templates/base.html +++ b/youtube/templates/base.html @@ -6,7 +6,7 @@ - + diff --git a/youtube/templates/shared.css b/youtube/templates/shared.css new file mode 100644 index 0000000..141465a --- /dev/null +++ b/youtube/templates/shared.css @@ -0,0 +1,336 @@ +* { + box-sizing: border-box; +} + +h1, h2, h3, h4, h5, h6, div, button{ + margin:0; + padding:0; +} + +address{ + font-style:normal; +} + +html{ + font-family: {{ font_family }}; +} + +body{ + margin:0; + padding: 0; + color:var(--text-color); + + + background-color:var(--background-color); + + min-height:100vh; + display: flex; + flex-direction: column; +} + + header{ + background-color:#333333; + height: 50px; + + display: flex; + justify-content: center; + } + + #home-link{ + align-self: center; + margin-left:10px; + color: #ffffff; + } + + + #site-search{ + max-width: 600px; + margin-left:10px; + display: flex; + flex-grow: 1; + } + + #site-search .search-box{ + align-self:center; + height:25px; + border:0; + + flex-grow: 1; + } + #site-search .search-button{ + align-self:center; + height:25px; + + border-style:solid; + border-width:1px; + } + #site-search .dropdown{ + margin-left:5px; + align-self:center; + height:25px; + } + #site-search .dropdown button{ + align-self:center; + height:25px; + + border-style:solid; + border-width:1px; + } + #site-search .css-sucks{ + width:0px; + height:0px; + } + #site-search .dropdown-content{ + grid-template-columns: auto auto; + white-space: nowrap; + } + #site-search .dropdown-content h3{ + grid-column:1 / span 2; + } + + #playlist-edit{ + margin-left: 10px; + align-self: center; + } + #local-playlists{ + margin-right:5px; + color: #ffffff; + } + #playlist-name-selection{ + } + #playlist-add-button{ + padding-left: 10px; + padding-right: 10px; + } + #item-selection-reset{ + padding-left: 10px; + padding-right: 10px; + } + + main{ + flex-grow: 1; + padding-bottom: 20px; + } + #message-box{ + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border-style: outset; + padding: 20px; + background-color: var(--interface-color); + opacity: 0; + transition-property: opacity; + transition-duration: 0.3s; + } + + +.dropdown{ + z-index:1; +} + .dropdown-content{ + display:none; + background-color: var(--interface-color); + } + .dropdown:hover .dropdown-content{ + /* For some reason, if this is just grid, it will insist on being 0px wide just like its 0px by 0px parent */ + /* making it inline-grid happened to fix it */ + display:inline-grid; + } + +.item-list{ + display: grid; + grid-row-gap: 10px; + +} + + +.item-grid{ + display: flex; + flex-wrap: wrap; +} + .item-grid > .playlist-item-box{ + margin-right: 10px; + } + .item-grid > * { + margin-bottom: 10px; + } + .item-grid .horizontal-item-box .item{ + width:370px; + } + .item-grid .vertical-item-box .item{ + } + +.item-box{ + display: inline-flex; + flex-direction: row; + /* prevent overflow due to long titles with no spaces: + https://stackoverflow.com/a/43312314 */ + min-width: 0; +} +.vertical-item-box{ +} +.horizontal-item-box{ +} + .item{ + background-color:var(--interface-color); + text-decoration:none; + font-size: 0.8125rem; + color: #767676; + } + + .horizontal-item-box .item { + flex-grow: 1; + display: grid; + align-content: start; + grid-template-columns: auto 1fr; + grid-template-rows: auto auto auto auto 1fr; + /* prevent overflow due to long titles with no spaces: + https://stackoverflow.com/a/43312314 */ + min-width: 0; + } + .vertical-item-box .item{ + width: 168px; + } + .thumbnail-box{ + font-size: 0px; /* prevent newlines and blank space from creating gaps */ + position: relative; + display: block; + } + .horizontal-item-box .thumbnail-box{ + grid-row: 1 / span 5; + margin-right: 4px; + } + .no-description .thumbnail-box{ + width: 168px; + height:94px; + } + .has-description .thumbnail-box{ + width: 246px; + height:138px; + } + .video-item .thumbnail-info{ + position: absolute; + bottom: 2px; + right: 2px; + opacity: .8; + color: #ffffff; + font-size: 0.8125rem; + background-color: #000000; + } + .playlist-item .thumbnail-info{ + position: absolute; + right: 0px; + bottom: 0px; + height: 100%; + width: 50%; + text-align:center; + white-space: pre-line; + opacity: .8; + color: #cfcfcf; + font-size: 0.8125rem; + background-color: #000000; + } + .playlist-item .thumbnail-info span{ /* trick to vertically center the text */ + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + } + .thumbnail-img{ /* center it */ + margin: auto; + display: block; + max-height: 100%; + max-width: 100%; + } + .horizontal-item-box .thumbnail-img{ + height: 100%; + } + + .item .title{ + min-width: 0; + line-height:1.25em; + max-height:3.75em; + overflow-y: hidden; + overflow-wrap: break-word; + + color: var(--text-color); + font-size: 1rem; + font-weight: 500; + text-decoration:initial; + } + + .stats{ + list-style: none; + padding: 0px; + margin: 0px; + } + .horizontal-stats{ + max-height:2.4em; + overflow:hidden; + } + .horizontal-stats > li{ + display: inline; + } + + .horizontal-stats > li::after{ + content: " | "; + } + .horizontal-stats > li:last-child::after{ + content: ""; + } + + .vertical-stats{ + display: flex; + flex-direction: column; + } + .stats address{ + display: inline; + } + .vertical-stats li{ + max-height: 1.3em; + overflow: hidden; + } + + .item-checkbox{ + justify-self:start; + align-self:center; + height:30px; + width:30px; + min-width:30px; + margin: 0px; + } + + +.page-button-row{ + margin-top: 10px; + margin-bottom: 10px; + justify-self:center; + justify-content: center; + display: grid; + grid-auto-columns: 40px; + grid-auto-flow: column; + height: 40px; +} +.next-previous-button-row{ + margin: 10px 0px; + display: flex; + justify-self:center; + justify-content: center; + height: 40px; +} + .page-button{ + background-color: var(--interface-color); + border-style: outset; + border-width: 2px; + font-weight: bold; + text-align: center; + padding: 5px; + } + .next-page:nth-child(2){ /* only if there's also a previous page button */ + margin-left: 10px; + } +.sort-button{ + background-color: var(--interface-color); + padding: 2px; + justify-self: start; +} -- cgit v1.2.3 From f100685d64f5e93f1ec2a58379a986beb012b482 Mon Sep 17 00:00:00 2001 From: James Taylor Date: Tue, 20 Oct 2020 17:19:45 -0700 Subject: Move comment.js reply button styling to comments.css So that the style will also be present on the /comments pages --- youtube/templates/watch.html | 12 ------------ 1 file changed, 12 deletions(-) (limited to 'youtube/templates') diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html index 86644ea..3542d94 100644 --- a/youtube/templates/watch.html +++ b/youtube/templates/watch.html @@ -14,18 +14,6 @@ text-decoration: underline; } - details.replies > summary{ - background-color: var(--interface-color); - border-style: outset; - border-width: 1px; - font-weight: bold; - padding-bottom: 0px; - } - - details.replies .comment{ - width: 600px; - } - .playability-error{ height: 360px; width: 640px; -- cgit v1.2.3 From 95f2f027eabdcc4dc3c1a77829bf2bf503ed2939 Mon Sep 17 00:00:00 2001 From: James Taylor Date: Tue, 20 Oct 2020 17:48:18 -0700 Subject: Comments.js: Add open in new tab button under replies as fallback if xhr request fails --- youtube/templates/comments.html | 1 + 1 file changed, 1 insertion(+) (limited to 'youtube/templates') diff --git a/youtube/templates/comments.html b/youtube/templates/comments.html index 9d93b8c..32a67ad 100644 --- a/youtube/templates/comments.html +++ b/youtube/templates/comments.html @@ -25,6 +25,7 @@ {% if settings.use_comments_js and comment['reply_count'] %}
{{ comment['view_replies_text'] }} + Open in new tab
loading..
{% else %} -- cgit v1.2.3 From c696db3e84d91092182adbeb7eef6126fad6be5d Mon Sep 17 00:00:00 2001 From: James Taylor Date: Tue, 20 Oct 2020 18:24:41 -0700 Subject: comments.js: include error in reply html rather than using an alert --- youtube/templates/error.html | 27 +++------------------------ youtube/templates/shared.css | 23 +++++++++++++++++++++++ 2 files changed, 26 insertions(+), 24 deletions(-) (limited to 'youtube/templates') diff --git a/youtube/templates/error.html b/youtube/templates/error.html index 2f94afa..c3f58b0 100644 --- a/youtube/templates/error.html +++ b/youtube/templates/error.html @@ -1,29 +1,8 @@ {% set page_title = 'Error' %} -{% extends "base.html" %} -{% block style %} - h1{ - font-size: 2rem; - font-weight: normal; - } - #error-box, #error-message{ - background-color: var(--interface-color); - width: 80%; - margin: auto; - margin-top: 20px; - padding: 5px; - } - #error-box > div, #error-box > p, #error-box > h1{ - white-space: pre-wrap; - margin-bottom: 10px; - } - .code-box{ - padding: 5px; - border-style:solid; - border-width:1px; - border-radius:5px; - } -{% endblock style %} +{% if not slim %} + {% extends "base.html" %} +{% endif %} {% block main %} {% if traceback %} diff --git a/youtube/templates/shared.css b/youtube/templates/shared.css index 141465a..8aaa706 100644 --- a/youtube/templates/shared.css +++ b/youtube/templates/shared.css @@ -334,3 +334,26 @@ body{ padding: 2px; justify-self: start; } + +/* error page stuff */ +h1{ + font-size: 2rem; + font-weight: normal; +} +#error-box, #error-message{ + background-color: var(--interface-color); + width: 80%; + margin: auto; + margin-top: 20px; + padding: 5px; +} +#error-box > div, #error-box > p, #error-box > h1{ + white-space: pre-wrap; + margin-bottom: 10px; +} +.code-box{ + padding: 5px; + border-style:solid; + border-width:1px; + border-radius:5px; +} -- cgit v1.2.3 From a27b575380378f1b490dcabb8cc67f05adee5daa Mon Sep 17 00:00:00 2001 From: zrose584 <57181548+zrose584@users.noreply.github.com> Date: Wed, 21 Oct 2020 10:35:01 +0200 Subject: remove trailing whitespaces --- youtube/templates/channel.html | 6 +++--- youtube/templates/local_playlist.html | 2 +- youtube/templates/playlist.html | 6 +++--- youtube/templates/shared.css | 14 +++++++------- 4 files changed, 14 insertions(+), 14 deletions(-) (limited to 'youtube/templates') diff --git a/youtube/templates/channel.html b/youtube/templates/channel.html index a0cdff9..dddbff1 100644 --- a/youtube/templates/channel.html +++ b/youtube/templates/channel.html @@ -34,11 +34,11 @@ 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; @@ -103,7 +103,7 @@ } {% endblock style %} -{% block main %} +{% block main %}

{{ channel_name }}

diff --git a/youtube/templates/local_playlist.html b/youtube/templates/local_playlist.html index 7ba0642..803c4dc 100644 --- a/youtube/templates/local_playlist.html +++ b/youtube/templates/local_playlist.html @@ -25,7 +25,7 @@ } {% endblock style %} -{% block main %} +{% block main %}

{{ playlist_name }}

diff --git a/youtube/templates/playlist.html b/youtube/templates/playlist.html index f34f140..af86c82 100644 --- a/youtube/templates/playlist.html +++ b/youtube/templates/playlist.html @@ -6,7 +6,7 @@ width: 800px; margin:auto; } - + .playlist-metadata{ display:grid; grid-template-columns: 0fr 1fr; @@ -44,7 +44,7 @@ display: grid; grid-auto-rows: 0fr; grid-row-gap: 10px; - + } {% endblock style %} @@ -61,7 +61,7 @@
{{ common_elements.text_runs(description) }}
-
+
{% for info in video_list %} {{ common_elements.item(info) }} {% endfor %} diff --git a/youtube/templates/shared.css b/youtube/templates/shared.css index 8aaa706..2288a34 100644 --- a/youtube/templates/shared.css +++ b/youtube/templates/shared.css @@ -19,10 +19,10 @@ body{ margin:0; padding: 0; color:var(--text-color); - - + + background-color:var(--background-color); - + min-height:100vh; display: flex; flex-direction: column; @@ -141,7 +141,7 @@ body{ .item-list{ display: grid; grid-row-gap: 10px; - + } @@ -164,7 +164,7 @@ body{ .item-box{ display: inline-flex; flex-direction: row; - /* prevent overflow due to long titles with no spaces: + /* prevent overflow due to long titles with no spaces: https://stackoverflow.com/a/43312314 */ min-width: 0; } @@ -185,7 +185,7 @@ body{ align-content: start; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto auto 1fr; - /* prevent overflow due to long titles with no spaces: + /* prevent overflow due to long titles with no spaces: https://stackoverflow.com/a/43312314 */ min-width: 0; } @@ -308,7 +308,7 @@ body{ justify-content: center; display: grid; grid-auto-columns: 40px; - grid-auto-flow: column; + grid-auto-flow: column; height: 40px; } .next-previous-button-row{ -- cgit v1.2.3