Interstitial tweaks for small screen / low bit depth screens

+ Remove the gradient from behind the fix button nav as this is poorly
  rendered on low bit depth screens.
+ Reduce the margin needed for the details button.
+ Reduced the margin for the dino game. This allows all the text to fit
  without scrolling.

Bug: 755714
Change-Id: Ia90afd5ab621fd0c0c9781cb13f7a9e003c053a0
Reviewed-on: https://chromium-review.googlesource.com/741741
Commit-Queue: Edward Jung <edwardjung@chromium.org>
Reviewed-by: Chris Palmer <palmer@chromium.org>
Cr-Commit-Position: refs/heads/master@{#513103}

components/neterror/resources/neterror.css

@@ -470,6 +470,16 @@ html[subframe] body {
   }
 }
 
+@media (max-width: 360px) and (max-height: 440px) {
+  .offline .interstitial-wrapper {
+    padding-top: 70px;
+  }
+
+  .offline .runner-container {
+    top: 16px;
+  }
+}
+
 @media (min-height: 240px) and (orientation: landscape) {
   .offline .interstitial-wrapper {
     margin-bottom: 90px;

components/security_interstitials/core/common/resources/interstitial_common.css

@@ -252,7 +252,7 @@ input[type=checkbox]:checked ~ .checkbox::before {
 @media (max-width: 420px) {
   #details-button {
     border: 0;
-    margin: 28px 0 0;
+    margin: 8px 0 0;
   }
 
   .secondary-button {
@@ -270,14 +270,21 @@ input[type=checkbox]:checked ~ .checkbox::before {
     background: #f7f7f7;
     bottom: 0;
     box-shadow: 0 -22px 40px rgb(247, 247, 247);
+    left: 0;
     margin: 0;
     max-width: 736px;
-    padding-left: 0px;
-    padding-right: 48px;
+    padding-left: 24px;
+    padding-right: 24px;
     position: fixed;
+    width: 100%;
     z-index: 2;
   }
 
+  /* Hide gradient from low color bit depth screens with the ugly dithering. */
+  body.low-color-depth .nav-wrapper {
+    box-shadow: none !important;
+  }
+
   .interstitial-wrapper {
     max-width: 736px;
   }
@@ -290,6 +297,10 @@ input[type=checkbox]:checked ~ .checkbox::before {
   #details {
     padding-top: 5.5vh;
   }
+
+  #details-button:hover {
+    box-shadow: none;
+  }
 }
 
 @media (max-width: 420px) and (orientation: portrait),

components/security_interstitials/core/common/resources/interstitial_mobile_nav.js

@@ -42,6 +42,8 @@ function onResize() {
 }
 
 function setupMobileNav() {
+  // Check for screens with a low colour bit depth.
+  document.body.classList.toggle('low-color-depth', screen.colorDepth < 24);
   window.addEventListener('resize', onResize);
   onResize();
 }