diff --git a/youtube/static/message_box.css b/youtube/static/message_box.css
new file mode 100644
index 0000000..72f4453
--- /dev/null
+++ b/youtube/static/message_box.css
@@ -0,0 +1,12 @@
+#message-box {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ border-style: outset;
+ padding: 20px;
+ background-color: var(--background);
+ opacity: 0;
+ transition-property: opacity;
+ transition-duration: 0.3s;
+}
diff --git a/youtube/templates/base.html b/youtube/templates/base.html
index 4d03c05..69b364b 100644
--- a/youtube/templates/base.html
+++ b/youtube/templates/base.html
@@ -3,7 +3,7 @@
-
+
{{ page_title }}
diff --git a/youtube/templates/channel.html b/youtube/templates/channel.html
index 25b0971..7ac36d4 100644
--- a/youtube/templates/channel.html
+++ b/youtube/templates/channel.html
@@ -7,7 +7,8 @@
{% extends "base.html" %}
{% import "common_elements.html" as common_elements %}
{% block style %}
-
+
+
{% endblock style %}
{% block main %}
diff --git a/youtube/templates/home.html b/youtube/templates/home.html
index 0adac56..ef1f029 100644
--- a/youtube/templates/home.html
+++ b/youtube/templates/home.html
@@ -1,7 +1,7 @@
{% set page_title = title %}
{% extends "base.html" %}
{% block style %}
-
+
{% endblock style %}
{% block main %}
diff --git a/youtube/templates/local_playlist.html b/youtube/templates/local_playlist.html
index bbe5edd..765ac66 100644
--- a/youtube/templates/local_playlist.html
+++ b/youtube/templates/local_playlist.html
@@ -2,7 +2,8 @@
{% extends "base.html" %}
{% import "common_elements.html" as common_elements %}
{% block style %}
-
+
+
{% endblock style %}
{% block main %}
diff --git a/youtube/templates/local_playlists_list.html b/youtube/templates/local_playlists_list.html
index f400808..61a6888 100644
--- a/youtube/templates/local_playlists_list.html
+++ b/youtube/templates/local_playlists_list.html
@@ -2,7 +2,7 @@
{% extends "base.html" %}
{% block style %}
-
+
{% endblock style %}
{% block main %}
diff --git a/youtube/templates/playlist.html b/youtube/templates/playlist.html
index 8c88cc7..c154207 100644
--- a/youtube/templates/playlist.html
+++ b/youtube/templates/playlist.html
@@ -2,7 +2,8 @@
{% extends "base.html" %}
{% import "common_elements.html" as common_elements %}
{% block style %}
-
+
+
{% endblock style %}
{% block main %}
diff --git a/youtube/templates/search.html b/youtube/templates/search.html
index e742099..4238d70 100644
--- a/youtube/templates/search.html
+++ b/youtube/templates/search.html
@@ -3,7 +3,8 @@
{% extends "base.html" %}
{% import "common_elements.html" as common_elements %}
{% block style %}
-
+
+
{% endblock style %}
{% block main %}
diff --git a/youtube/templates/settings.html b/youtube/templates/settings.html
index 5385c68..7a7ce9e 100644
--- a/youtube/templates/settings.html
+++ b/youtube/templates/settings.html
@@ -1,7 +1,7 @@
{% set page_title = 'Settings' %}
{% extends "base.html" %}
{% block style %}
-
+
{% endblock style %}
{% block main %}
diff --git a/youtube/templates/shared.css b/youtube/templates/shared.css
deleted file mode 100644
index 2863e7b..0000000
--- a/youtube/templates/shared.css
+++ /dev/null
@@ -1,363 +0,0 @@
-* {
- 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-message{
- white-space: pre-wrap;
-}
-#error-box > div, #error-box > p, #error-box > h1{
- white-space: pre-wrap;
- margin-bottom: 10px;
-}
-.code-box{
- white-space: pre-wrap;
- padding: 5px;
- border-style:solid;
- border-width:1px;
- border-radius:5px;
-}
diff --git a/youtube/templates/status.html b/youtube/templates/status.html
index 901aa5b..97e2ed4 100644
--- a/youtube/templates/status.html
+++ b/youtube/templates/status.html
@@ -4,4 +4,3 @@
{% block main %}
{{ message }}
{% endblock %}
-
diff --git a/youtube/templates/subscription_manager.html b/youtube/templates/subscription_manager.html
index 3b8a5c0..92cd024 100644
--- a/youtube/templates/subscription_manager.html
+++ b/youtube/templates/subscription_manager.html
@@ -1,7 +1,7 @@
{% set page_title = 'Subscription Manager' %}
{% extends "base.html" %}
{% block style %}
-
+
{% endblock style %}
diff --git a/youtube/templates/subscriptions.html b/youtube/templates/subscriptions.html
index 9e48c6b..b528e5c 100644
--- a/youtube/templates/subscriptions.html
+++ b/youtube/templates/subscriptions.html
@@ -7,7 +7,8 @@
{% import "common_elements.html" as common_elements %}
{% block style %}
-
+
+
{% endblock style %}
{% block main %}
diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html
index 44fc5a7..8a23cc4 100644
--- a/youtube/templates/watch.html
+++ b/youtube/templates/watch.html
@@ -3,7 +3,8 @@
{% import "common_elements.html" as common_elements %}
{% import "comments.html" as comments with context %}
{% block style %}
-
+
+
{% endblock style %}
{% block main %}