General theme: improve thumbnail-img

10 files changed, 12 insertions, 31 deletions

diff --git a/youtube/static/channel.css b/youtube/static/channel.css
index ed7fdbe..23467a8 100644
--- a/youtube/static/channel.css
+++ b/youtube/static/channel.css
@@ -321,6 +321,7 @@ hr {
     left: 0;
     top: 0;
     object-fit: cover;
+    background-color: var(--primary-background);
 }
 
 .length {
@@ -356,13 +357,6 @@ hr {
     text-transform: none;
 }
 
-.thumbnail-img {
-    margin: auto;
-    display: block;
-    max-height: 100%;
-    max-width: 100%;
-}
-
 .info-box {
       grid-area: info-box;
       display: grid;
diff --git a/youtube/static/dark_theme.css b/youtube/static/dark_theme.css
index bc14f5c..b65a5d7 100644
--- a/youtube/static/dark_theme.css
+++ b/youtube/static/dark_theme.css
@@ -4,6 +4,7 @@
     --secondary-hover:   #73828c;
     --secondary-focus:   #616161;
     --secondary-inverse: #FFF;
+    --primary-background:#303030;
     --secondary-background: #424242;
     --link:              #22aaff;
     --link-visited:      #7755ff;
diff --git a/youtube/static/gray_theme.css b/youtube/static/gray_theme.css
index cae689d..6b18fb7 100644
--- a/youtube/static/gray_theme.css
+++ b/youtube/static/gray_theme.css
@@ -4,6 +4,7 @@
     --secondary-hover:   #73828c;
     --secondary-focus:   rgba(115, 130, 140, 0.125);
     --secondary-inverse: #FFF;
+    --primary-background:#424242;
     --secondary-background: #102027;
     --link:              #22aaff;
     --link-visited:      #7755ff;
diff --git a/youtube/static/light_theme.css b/youtube/static/light_theme.css
index a0540f4..97db568 100644
--- a/youtube/static/light_theme.css
+++ b/youtube/static/light_theme.css
@@ -4,6 +4,7 @@
     --secondary-hover:   #415462;
     --secondary-focus:   rgba(115, 130, 140, 0.125);
     --secondary-inverse: #FFF;
+    --primary-background:#CCC;
     --secondary-background: #eeeeee;
     --link:              #22aaff;
     --link-visited:      #7755ff;
diff --git a/youtube/static/local_playlist.css b/youtube/static/local_playlist.css
index a520751..1d786dd 100644
--- a/youtube/static/local_playlist.css
+++ b/youtube/static/local_playlist.css
@@ -291,6 +291,7 @@ hr {
     left: 0;
     top: 0;
     object-fit: cover;
+    background-color: var(--primary-background);
 }
 
 .length {
@@ -326,13 +327,6 @@ hr {
     text-transform: none;
 }
 
-.thumbnail-img {
-    margin: auto;
-    display: block;
-    max-height: 100%;
-    max-width: 100%;
-}
-
 .info-box {
       grid-area: info-box;
       display: grid;
diff --git a/youtube/static/playlist.css b/youtube/static/playlist.css
index fef3533..ecae3c1 100644
--- a/youtube/static/playlist.css
+++ b/youtube/static/playlist.css
@@ -301,6 +301,7 @@ hr {
     left: 0;
     top: 0;
     object-fit: cover;
+    background-color: var(--primary-background);
 }
 
 .length {
@@ -336,13 +337,6 @@ hr {
     text-transform: none;
 }
 
-.thumbnail-img {
-    margin: auto;
-    display: block;
-    max-height: 100%;
-    max-width: 100%;
-}
-
 .info-box {
       grid-area: info-box;
       display: grid;
diff --git a/youtube/static/search.css b/youtube/static/search.css
index 8e5b4d6..2c8c5cd 100644
--- a/youtube/static/search.css
+++ b/youtube/static/search.css
@@ -351,6 +351,7 @@ hr {
     left: 0;
     top: 0;
     object-fit: cover;
+    background-color: var(--primary-background);
 }
 
 .title {
diff --git a/youtube/static/subscription.css b/youtube/static/subscription.css
index 80cc604..d9eb4e2 100644
--- a/youtube/static/subscription.css
+++ b/youtube/static/subscription.css
@@ -295,6 +295,7 @@ hr {
     left: 0;
     top: 0;
     object-fit: cover;
+    background-color: var(--primary-background);
 }
 
 .length {
@@ -330,13 +331,6 @@ hr {
     text-transform: none;
 }
 
-.thumbnail-img {
-    margin: auto;
-    display: block;
-    max-height: 100%;
-    max-width: 100%;
-}
-
 .info-box {
       grid-area: info-box;
       display: grid;
diff --git a/youtube/static/watch.css b/youtube/static/watch.css
index b873b5f..af445a4 100644
--- a/youtube/static/watch.css
+++ b/youtube/static/watch.css
@@ -430,6 +430,7 @@ label[for=options-toggle-cbox] {
     left: 0;
     top: 0;
     object-fit: cover;
+    background-color: var(--primary-background);
 }
 
 .length {
diff --git a/youtube/templates/common_elements.html b/youtube/templates/common_elements.html
index 9c5abe6..94554d4 100644
--- a/youtube/templates/common_elements.html
+++ b/youtube/templates/common_elements.html
@@ -23,11 +23,11 @@
                 <a class="thumbnail-box" href="{{ info['url'] }}" title="{{ info['title'] }}">
                     <div class="thumbnail {% if info['type'] == 'channel' %} channel {% endif %}">
                         {% if lazy_load %}
-                            <img class="thumbnail-img lazy" alt="thumbnail" data-src="{{ info['thumbnail'] }}">
+                            <img class="thumbnail-img lazy" alt="&#x20;" data-src="{{ info['thumbnail'] }}">
                         {% elif info['type'] == 'channel' %}
-                            <img class="thumbnail-img channel" alt="thumbnail" src="{{ info['thumbnail'] }}">
+                            <img class="thumbnail-img channel" alt="&#x20;" src="{{ info['thumbnail'] }}">
                         {% else %}
-                            <img class="thumbnail-img" alt="thumbnail" src="{{ info['thumbnail'] }}">
+                            <img class="thumbnail-img" alt="&#x20;" src="{{ info['thumbnail'] }}">
                         {% endif %}
 
                         {% if info['type'] != 'channel' %}