General theme: improve thumbnail-img

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;

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;

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;

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;

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;

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;

youtube/static/search.css

@@ -351,6 +351,7 @@ hr {
     left: 0;
     top: 0;
     object-fit: cover;
+    background-color: var(--primary-background);
 }
 
 .title {

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;

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 {

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' %}