Quick fix for high contrast mode

Not sure if this is the best way to fix this, but it works for now

data/interfaces/default/css/plexpy.css

@@ -418,6 +418,7 @@ input[type="color"],
     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);
+    overflow: hidden;
 }
 .cover-face {
     background-position: center;
@@ -826,8 +827,6 @@ input[type="color"],
     -ms-backface-visibility: hidden;
     -o-backface-visibility: hidden;
     backface-visibility: hidden;
-    width: auto;
-    height: 260px;
     border: 1px solid rgba(128, 128, 128, 0.3);
 }
 .summary-content {

data/interfaces/default/home_stats.html

@@ -254,6 +254,20 @@ DOCUMENTATION :: END
 % else:
 <div class="text-muted">No stats for selected period.</div><br>
 % endif
+<script>
+        $(function () {
+            if (HCTest() == true) {
+                $('#home-stats .poster-face').each(function () {
+                    background_img = $(this).attr('style').split('(')[1].split(')')[0];
+                    $(this).html('<img src="' + background_img + '" width="80" height="120"/>');
+                })
+                $('#home-stats .home-platforms-instance-oval, #home-stats .home-platforms-instance-box').each(function () {
+                    background_img = $(this).attr('style').split('(')[1].split(')')[0];
+                    $(this).html('<img src="' + background_img + '" width="80" height="80"/>');
+                })
+            }
+        })
+</script>
 % else:
 <div class="text-muted">Unable to retrieve data from database. Please check your <a href="settings">settings</a>.
 </div><br>

data/interfaces/default/info.html

@@ -345,5 +345,15 @@ DOCUMENTATION :: END
     $("#airdate").html(moment($("#airdate").text()).format('MMM DD, YYYY'));
     $("#runtime").html(millisecondsToMinutes($("#runtime").text(), true));
 </script>
+<script>
+    $(function () {
+        if (HCTest() == true) {
+            $('.poster-face').each(function () {
+                background_img = $(this).attr('style').split('(')[1].split(')')[0];
+                $(this).html('<img src="' + background_img + '" width="150" height="225"/>');
+            })
+        }
+    })
+</script>
 % endif
 </%def>

data/interfaces/default/js/script.js

@@ -360,3 +360,32 @@ function clearSearchButton(tableName, table) {
         table.search('').draw();
     });
 }
+
+function HCTest(idval) {
+    var objDiv, objImage, strColor, strWidth, strReady;
+    var strImageID = idval; // ID of image on the page
+
+    // Create a test div
+    objDiv = document.createElement('div');
+
+    //Set its color style to something unusual
+    objDiv.style.color = 'rgb(31, 41, 59)';
+
+    // Attach to body so we can inspect it
+    document.body.appendChild(objDiv);
+
+    // Read computed color value
+    strColor = document.defaultView ? document.defaultView.getComputedStyle(objDiv, null).color : objDiv.currentStyle.color;
+    strColor = strColor.replace(/ /g, '');
+
+    // Delete the test DIV
+    document.body.removeChild(objDiv);
+
+    // Check if we get the color back that we set. If not, we're in 
+    // high contrast mode. 
+    if (strColor !== 'rgb(31,41,59)') {
+        return true;
+    } else {
+        return false;
+    }
+}

data/interfaces/default/recently_added.html

@@ -63,6 +63,20 @@ DOCUMENTATION :: END
         % endfor
     </ul>
 </div>
+<script>
+    $(function () {
+        if (HCTest() == true) {
+            $('#recentlyAdded .poster-face').each(function () {
+                background_img = $(this).attr('style').split('(')[1].split(')')[0];
+                $(this).html('<img src="' + background_img + '" width="150" height="225"/>');
+            })
+            $('#recentlyAdded .cover-face').each(function () {
+                background_img = $(this).attr('style').split('(')[1].split(')')[0];
+                $(this).html('<img src="' + background_img + '" width="150" height="150"/>');
+            })
+        }
+    })
+</script>
 % else:
 <div class="text-muted">There was an error communicating with your Plex Server. Please check your <a href="settings">settings</a>.
 </div><br>

data/interfaces/default/user_platform_stats.html

@@ -37,6 +37,16 @@ DOCUMENTATION :: END
     $("#user-platform-image-${a['result_id']}").html("<div class='user-platforms-instance-poster' style='background-image: url(" + getPlatformImagePath('${a['platform_type']}') + ");'>");
 </script>
 % endfor
+<script>
+    $(function () {
+        if (HCTest() == true) {
+            $('.user-platforms-instance-poster').each(function () {
+                background_img = $(this).attr('style').split('(')[1].split(')')[0];
+                $(this).html('<img src="' + background_img + '" width="80" height="80"/>');
+            })
+        }
+    })
+</script>
 % else:
 <div class="text-muted">Unable to retrieve data from database. Please check your <a href="settings">settings</a>.
 </div><br>

data/interfaces/default/user_recently_watched.html

@@ -58,6 +58,16 @@ DOCUMENTATION :: END
         % endfor
     </ul>
 </div>
+<script>
+    $(function () {
+        if (HCTest() == true) {
+            $('.poster-face').each(function () {
+                background_img = $(this).attr('style').split('(')[1].split(')')[0];
+                $(this).html('<img src="' + background_img + '" width="150" height="225"/>');
+            })
+        }
+    })
+</script>
 % else:
 <div class="text-muted">Unable to retrieve data from database. Please check your <a href="settings">settings</a>.
 </div><br>