Altered CSS for tautulli cards

- Added fixed heights for stat and lib cards
- Altered spacing and weight on li elements

js/functions.js

@@ -6384,6 +6384,14 @@ function homepageCalendar(timeout){
 function buildTautulliItem(array){
     var cards = `
     <style>
+    .homepage-tautulli-card {
+        height: 242px;
+    }
+
+    .library-card {
+        height: 137px;
+    }
+
     .homepage-tautulli-card .poster {
         max-width: 100%;
         max-height: 15em;
@@ -6402,9 +6410,38 @@ function buildTautulliItem(array){
         text-align: center;
     }
 
-    .homepage-tautulli-card ol.pl-2 li p {
-        font-weight: 700;
+    .library-card ol {
+        overflow: auto;
+    }
+
+    .homepage-tautulli-card ol.pl-2 li p,
+    .library-card ol li p {
+        font-weight: 400;
         font-size: 16px;
+        margin-bottom: 0;
+    }
+
+    .homepage-tautulli-card ol.pl-2 li,
+    .library-card ol li {
+        margin-top: 2px;
+    }
+
+    .library-card ol::-webkit-scrollbar-track {
+        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+        border-radius: 10px;
+        background-color: #7b7b7b2e;
+        margin: 0 30px;
+    }
+
+    .library-card ol::-webkit-scrollbar {
+        width: 12px;
+        background-color: #7b7b7b2e;
+    }
+
+    .library-card ol::-webkit-scrollbar-thumb {
+        border-radius: 10px;
+        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+        background-color: #555;
     }
 
     .one-line {
@@ -6426,7 +6463,7 @@ function buildTautulliItem(array){
         height: 100%;
         top: 0;
         left: 0;
-        filter: blur(7px) brightness(50%);
+        filter: blur(7px) brightness(30%);
     }
 
     .lib-stats-row::before {
@@ -6499,9 +6536,9 @@ function buildTautulliItem(array){
         var buildCard = function(type, data) {
             var card = `
             <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
-                <div class="card text-white mb-3 homepage-tautulli-card card-bg-colour">
-                    <div class="card-body">
-                        <div class="row" style="display: flex;">
+                <div class="card text-white mb-3 homepage-tautulli-card library-card card-bg-colour">
+                    <div class="card-body h-100">
+                        <div class="row h-100" style="display: flex;">
                             <div class="col-lg-4 col-md-4 col-sm-4 hidden-xs align-self-center">`;
                             if(type == 'artist') {
                                 card += `<img src="/plugins/images/cache/tautulli-`+type+`.jpg" class="lib-icon" alt="library icon">`;
@@ -6511,7 +6548,7 @@ function buildTautulliItem(array){
             card += `
                             </div>
                             <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
-                                <ol class="pl-2">`;
+                                <ol class="h-100">`;
                                 data.forEach(e => {
                                     card += `<li class="w-100">
                                                 <p class="one-line d-inline">`+e['section_name']+`</p>`;