Add background to statistic cards

data/interfaces/default/css/plexpy.css

@@ -1867,20 +1867,52 @@ a .library-user-instance-box:hover {
     margin: 0;
 }
 .home-platforms-instance {
-    background-color: #282828;
     position: relative;
     float: left;
-    width: 330px;
-    padding: 10px;
+    width: 340px;
+    padding: 5px;
     margin-right: 20px;
     margin-bottom: 20px;
     -webkit-box-sizing: content-box;
     box-sizing: content-box;
-    -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
-    -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
-    box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
     white-space: nowrap;
 }
+.home-platforms-instance-overlay {
+    height: 130px;
+    width: 100%;
+    padding: 5px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: hidden;
+    -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.1);
+    -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
+    box-shadow: 0 0 4px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.1);
+    z-index: 0;
+}
+.home-platforms-instance-background {
+    background-color: #282828;
+    background-position: center;
+    background-size: cover;
+    height: 130px;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    opacity: 0.15;
+    -webkit-filter: blur(3px);
+    -moz-filter: blur(3px);
+    filter: blur(3px);
+    -webkit-transition: background 1s linear;
+    transition: background 1s linear;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    z-index: -1;
+}
 .home-platforms-instance li {
     position: relative;
 }
@@ -2204,8 +2236,8 @@ a .library-user-instance-box:hover {
 }
 .home-platforms-instance-list-chevron {
     position: absolute;
-    top: 105px;
-    right: 0;
+    top: 100px;
+    right: 5px;
     cursor: pointer;
 }
 .home-platforms-instance-list-chevron i {
@@ -2243,13 +2275,13 @@ a .home-platforms-list-cover-face:hover
     width: calc(100% + 20px);
     display: none;
     position: absolute;
-    top: 128px;
-    left: -10px;
-    -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
+    top: 124px;
+    left: -5px;
+    -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.1);
     -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
-    box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
+    box-shadow: 0 0 4px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.1);
     z-index: 1;
-    clip: rect(1px, 354px, 1000px, -2px);
+    clip: rect(1px, 350px, 1000px, -2px);
 }
 .history-table-title {
     text-overflow: ellipsis;

data/interfaces/default/home_stats.html

@@ -75,6 +75,9 @@ DOCUMENTATION :: END
     % for top_stat in data:
     % if top_stat['stat_id'] == 'top_tv' and top_stat['rows']:
     <div class="home-platforms-instance">
+        <div class="home-platforms-instance-overlay">
+            <div class="home-platforms-instance-background" style="background-image: url(pms_image_proxy?img=${top_stat['rows'][0]['art']}&width=500&height=280&fallback=art);"></div>
+        </div>
         <li>
             <div class="home-platforms-instance-info">
                 <div class="home-platforms-instance-name">
@@ -181,6 +184,9 @@ DOCUMENTATION :: END
     </div>
     % elif top_stat['stat_id'] == 'popular_tv' and top_stat['rows']:
     <div class="home-platforms-instance">
+        <div class="home-platforms-instance-overlay">
+            <div class="home-platforms-instance-background" style="background-image: url(pms_image_proxy?img=${top_stat['rows'][0]['art']}&width=500&height=280&fallback=art);"></div>
+        </div>
         <li>
             <div class="home-platforms-instance-info">
                 <div class="home-platforms-instance-name">
@@ -279,6 +285,9 @@ DOCUMENTATION :: END
     </div>
     % elif top_stat['stat_id'] == 'top_movies' and top_stat['rows']:
     <div class="home-platforms-instance">
+        <div class="home-platforms-instance-overlay">
+            <div class="home-platforms-instance-background" style="background-image: url(pms_image_proxy?img=${top_stat['rows'][0]['art']}&width=500&height=280&fallback=art);"></div>
+        </div>
         <li>
             <div class="home-platforms-instance-info">
                 <div class="home-platforms-instance-name">
@@ -385,6 +394,9 @@ DOCUMENTATION :: END
     </div>
     % elif top_stat['stat_id'] == 'popular_movies' and top_stat['rows']:
     <div class="home-platforms-instance">
+        <div class="home-platforms-instance-overlay">
+            <div class="home-platforms-instance-background" style="background-image: url(pms_image_proxy?img=${top_stat['rows'][0]['art']}&width=500&height=280&fallback=art);"></div>
+        </div>
         <li>
             <div class="home-platforms-instance-info">
                 <div class="home-platforms-instance-name">
@@ -483,6 +495,9 @@ DOCUMENTATION :: END
     </div>
     % elif top_stat['stat_id'] == 'top_music' and top_stat['rows']:
     <div class="home-platforms-instance">
+        <div class="home-platforms-instance-overlay">
+            <div class="home-platforms-instance-background" style="background-image: url(pms_image_proxy?img=${top_stat['rows'][0]['art']}&width=500&height=280&fallback=art);"></div>
+        </div>
         <li>
             <div class="home-platforms-instance-info">
                 <div class="home-platforms-instance-name">
@@ -589,6 +604,9 @@ DOCUMENTATION :: END
     </div>
     % elif top_stat['stat_id'] == 'popular_music' and top_stat['rows']:
     <div class="home-platforms-instance">
+        <div class="home-platforms-instance-overlay">
+            <div class="home-platforms-instance-background" style="background-image: url(pms_image_proxy?img=${top_stat['rows'][0]['art']}&width=500&height=280&fallback=art);"></div>
+        </div>
         <li>
             <div class="home-platforms-instance-info">
                 <div class="home-platforms-instance-name">
@@ -687,6 +705,13 @@ DOCUMENTATION :: END
     </div>
     % elif top_stat['stat_id'] == 'top_users' and top_stat['rows']:
     <div class="home-platforms-instance">
+        <div class="home-platforms-instance-overlay">
+            % if top_stat['rows'][0]['user_thumb'] != '':
+            <div class="home-platforms-instance-background" style="background-image: url(${top_stat['rows'][0]['user_thumb']}"></div>
+            % else:
+            <div class="home-platforms-instance-background" style="background-image: url(${http_root}images/gravatar-default.png}"></div>
+            % endif
+        </div>
         <li>
             <div class="home-platforms-instance-info">
                 <div class="home-platforms-instance-name">
@@ -783,6 +808,12 @@ DOCUMENTATION :: END
     </div>
     % elif top_stat['stat_id'] == 'top_platforms' and top_stat['rows']:
     <div class="home-platforms-instance">
+        <div class="home-platforms-instance-overlay">
+            <div id="platform-stat-background" class="home-platforms-instance-background"></div>
+            <script>
+                $("#platform-stat-background").css("background-image", "url(" + getPlatformImagePath("${top_stat['rows'][0]['platform_type']}") + ")");
+            </script>
+        </div>
         <li>
             <div class="home-platforms-instance-info">
                 <div class="home-platforms-instance-name">
@@ -845,6 +876,9 @@ DOCUMENTATION :: END
     </div>
     % elif top_stat['stat_id'] == 'last_watched' and top_stat['rows']:
     <div class="home-platforms-instance">
+        <div class="home-platforms-instance-overlay">
+            <div class="home-platforms-instance-background" style="background-image: url(pms_image_proxy?img=${top_stat['rows'][0]['art']}&width=500&height=280&fallback=art);"></div>
+        </div>
         <li>
             <div class="home-platforms-instance-info">
                 <div class="home-platforms-instance-name">
@@ -971,6 +1005,9 @@ DOCUMENTATION :: END
     </div>
     % elif top_stat['stat_id'] == 'most_concurrent' and top_stat['rows']:
     <div class="home-platforms-instance">
+        <div class="home-platforms-instance-overlay">
+            <div class="home-platforms-instance-background" style="background-image: url(${http_root}images/home-stat_most-concurrent.png)"></div>
+        </div>
         <li>
             <div class="home-platforms-instance-info">
                 <div class="home-platforms-instance-name">

data/interfaces/default/library_stats.html

@@ -27,6 +27,9 @@ DOCUMENTATION :: END
 <ul class="list-unstyled">
     % for library in data:
     <div class="home-platforms-instance">
+        <div class="home-platforms-instance-overlay">
+            <div class="home-platforms-instance-background" style="background-image: url(pms_image_proxy?img=${library['art']}&width=500&height=280&fallback=art);"></div>
+        </div>
         <li>
             <div class="home-platforms-instance-info">
                 <div class="home-platforms-instance-name">