aboutsummaryrefslogtreecommitdiffstats
path: root/youtube/templates
diff options
context:
space:
mode:
Diffstat (limited to 'youtube/templates')
-rw-r--r--youtube/templates/base.html7
-rw-r--r--youtube/templates/channel.html6
-rw-r--r--youtube/templates/comments.html1
-rw-r--r--youtube/templates/error.html27
-rw-r--r--youtube/templates/local_playlist.html2
-rw-r--r--youtube/templates/playlist.html6
-rw-r--r--youtube/templates/shared.css359
-rw-r--r--youtube/templates/watch.html12
8 files changed, 372 insertions, 48 deletions
diff --git a/youtube/templates/base.html b/youtube/templates/base.html
index 4fc48cf..3d9f1e9 100644
--- a/youtube/templates/base.html
+++ b/youtube/templates/base.html
@@ -4,12 +4,9 @@
<meta charset="utf-8">
<title>{{ page_title }}</title>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'; media-src 'self' https://*.googlevideo.com;
- {% if not settings.proxy_images %}
- img-src https://*.googleusercontent.com https://*.ggpht.com https://*.ytimg.com;
- {% endif %}">
-
+ {{ "img-src 'self' https://*.googleusercontent.com https://*.ggpht.com https://*.ytimg.com;" if not settings.proxy_images else "" }}">
<link href="{{ theme_path }}" type="text/css" rel="stylesheet">
- <link href="/youtube.com/static/shared.css" type="text/css" rel="stylesheet">
+ <link href="/youtube.com/shared.css" type="text/css" rel="stylesheet">
<link href="/youtube.com/static/comments.css" type="text/css" rel="stylesheet">
<link href="/youtube.com/static/favicon.ico" type="image/x-icon" rel="icon">
<link title="Youtube local" href="/youtube.com/opensearch.xml" rel="search" type="application/opensearchdescription+xml">
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 %}
<img class="avatar" src="{{ avatar }}">
<div class="summary">
<h2 class="title">{{ channel_name }}</h2>
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'] %}
<details class="replies" src="{{ comment['replies_url'] }}">
<summary>{{ comment['view_replies_text'] }}</summary>
+ <a href="{{ comment['replies_url'] }}" class="replies-open-new-tab" target="_blank">Open in new tab</a>
<div class="comment_page">loading..</div>
</details>
{% else %}
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/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 %}
<div class="playlist-metadata">
<h2 class="playlist-title">{{ playlist_name }}</h2>
<input type="hidden" name="playlist_page" value="{{ playlist_name }}" form="playlist-edit">
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 @@
<div class="playlist-description">{{ common_elements.text_runs(description) }}</div>
</div>
- <div id="results">
+ <div id="results">
{% for info in video_list %}
{{ common_elements.item(info) }}
{% endfor %}
diff --git a/youtube/templates/shared.css b/youtube/templates/shared.css
new file mode 100644
index 0000000..2288a34
--- /dev/null
+++ b/youtube/templates/shared.css
@@ -0,0 +1,359 @@
+* {
+ 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;
+}
+
+/* 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;
+}
diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html
index 319c314..b6faf21 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;
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-15 16:23:40 +0000