Safe browsing interstitial pages GM style updates

First in a series of changes to the interstitial pages bringing
them in line with the Google Material styling.

- Button styling update for mobile devices.
- Formatting of error code.

Bug: 871861
Change-Id: I34c4063559746fd99680b30d228e842fb2c5b9a5
Reviewed-on: https://chromium-review.googlesource.com/1194125Reviewed-by: Mustafa Emre Acer <meacer@chromium.org>
Commit-Queue: Edward Jung <edwardjung@chromium.org>
Cr-Commit-Position: refs/heads/master@{#587645}

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

@@ -4,7 +4,7 @@
 
 button {
   border: 0;
-  border-radius: 2px;
+  border-radius: 4px;
   box-sizing: border-box;
   color: #fff;
   cursor: pointer;
@@ -28,11 +28,11 @@ button {
 .pdf button,
 .ssl button,
 .safe-browsing-billing button {
-  background: rgb(66, 133, 244);
+  background: var(--google-blue-600);
 }
 
 button:active {
-  background: rgb(50, 102, 213);
+  background: var(--google-blue-700);
   outline: 0;
 }
 
@@ -80,6 +80,7 @@ button:hover {
   color: #646464;
   font-size: .86667em;
   text-transform: uppercase;
+  margin-top: 12px;
 }
 
 #error-debugging-info {
@@ -211,12 +212,6 @@ input[type=checkbox]:checked ~ .checkbox::before {
   }
 }
 
-@media (max-height: 600px) {
-  .error-code {
-    margin-top: 10px;
-  }
-}
-
 @media (max-width: 420px) {
   button,
   [dir='rtl'] button,
@@ -311,6 +306,14 @@ input[type=checkbox]:checked ~ .checkbox::before {
   #details-button:hover {
     box-shadow: none;
   }
+
+  button {
+    padding: 16px 24px;
+  }
+
+  button.small-link {
+    color: var(--google-blue-600);
+  }
 }
 
 @media (max-width: 420px) and (orientation: portrait),
@@ -336,10 +339,6 @@ input[type=checkbox]:checked ~ .checkbox::before {
     width: 100%;
   }
 
-  .error-code {
-    margin-top: 0;
-  }
-
   #details {
     box-sizing: border-box;
     height: auto;
@@ -461,6 +460,14 @@ input[type=checkbox]:checked ~ .checkbox::before {
     position: relative;
     width: 100%;
   }
+
+  button {
+    padding: 16px 24px;
+  }
+
+  button.small-link {
+    color: var(--google-blue-600);
+  }
 }
 
 @media (max-width: 239px) and (orientation: portrait) {

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

@@ -7,6 +7,8 @@ a {
 }
 
 body {
+  --google-blue-600: #1A73E8;
+  --google-blue-700: #1967D2;
   background-color: #fff;
   color: rgb(100, 100, 100);
   word-wrap: break-word;