Intersitial page updates

chrome/browser/resources/security_warnings/interstitial_v2.css

 /* Copyright 2014 The Chromium Authors. All rights reserved.
    Use of this source code is governed by a BSD-style license that can be
    found in the LICENSE file. */
 
 a {
   color: #585858;
 }
 
 .bad-clock .icon {
   background-image: -webkit-image-set(
@@ skipping 166 matching lines @@
 .safe-browsing button:hover {
   box-shadow: 0 2px 3px rgba(0, 0, 0, .5);
 }
 
 .safe-browsing .icon {
   background-image: -webkit-image-set(
       url(images/1x/stop_sign.png) 1x,
       url(images/2x/stop_sign.png) 2x);
 }
 
+.secondary-button {
+  -webkit-margin-end: 16px;
+  background: #d9d9d9;
+  color: #696969;
+}
+
 .small-link {
   color: #696969;
   font-size: .875em;
 }
 
 .ssl .icon {
   background-image: -webkit-image-set(
       url(images/1x/brokenssl_red.png) 1x,
       url(images/2x/brokenssl_red.png) 2x);
 }
@@ skipping 101 matching lines @@
  * Mobile specific styling.
  * Navigation buttons are anchored to the bottom of the screen.
  * Details message replaces the top content in its own scrollable area.
  */
 
 @media (max-width: 420px) and (orientation: portrait) {
   #details-button {
     border: 0;
     margin: 20px 0 0;
   }
+
+  .secondary-button {
+    -webkit-margin-end: 0;
+    margin-top: 16px;
+  }
 }
 
 /* Fixed nav. */
 @media (min-width: 300px) and (max-width: 420px) and
        (min-height: 400px) and (orientation:portrait),
        (min-width: 421px) and (max-width: 736px) and (min-height: 240px) and
        (max-height: 420px) and (orientation:landscape) {
 
-  body:not(.offline) .nav-wrapper {
+  body .nav-wrapper {
     background: #f7f7f7;
     bottom: 0;
     left: 0;
     position: fixed;
     z-index: 1;
   }
 
   body.safe-browsing .nav-wrapper {
     background: rgb(206, 52, 38);
   }
@@ skipping 74 matching lines @@
   }
 
   .suggested-left > #control-buttons,
   .suggested-right > #control-buttons {
     float: none;
     margin: 0;
   }
 }
 
 @media (min-height: 400px) and (orientation:portrait) {
-  body:not(.safe-browsing-has-checkbox):not(.offline) .interstitial-wrapper {
+  body:not(.safe-browsing-has-checkbox) .interstitial-wrapper {
     margin-bottom: 145px;
   }
 }
 
 @media (min-height: 299px) and (orientation:portrait) {
   .nav-wrapper {
     padding-bottom: 16px;
   }
 }
 
@@ skipping 28 matching lines @@
 /* Phablet sizing */
 @media (min-width: 375px) and (min-height: 641px) and
        (max-width: 414px) and (orientation: portrait) {
   button,
   [dir='rtl'] button,
   .small-link {
     font-size: 1em;
     height: 40px;
   }
 
-  body:not(.neterror) .icon {
+  body:not(.offline) .icon {
     height: 80px;
     width: 80px;
   }
 
   #details-button {
     margin-top: 28px;
   }
 
   h1 {
     font-size: 1.7em;
   }
 
   .icon {
     margin-bottom: 28px;
   }
 
   .interstitial-wrapper {
     padding: 28px;
   }
 
   .interstitial-wrapper p {
     font-size: 1.05em;
   }
 
   .nav-wrapper {
     padding: 28px;
   }
-
-  .neterror .icon {
-    height: 80px;
-    width: 65.6px;
-  }
 }
 
 @media (min-width: 420px) and (max-width: 736px) and
        (min-height: 240px) and (max-height: 298px) and
        (orientation:landscape) {
-  body:not(.neterror) .icon {
+  body:not(.offline) .icon {
     height: 50px;
     width: 50px;
   }
 
   .icon {
     padding-top: 0;
   }
 
   .interstitial-wrapper {
     margin-top: 16px;
@@ skipping 47 matching lines @@
 
   #details-button {
     height: 32px;
     margin: 8px 0;
   }
 }
 
 @media (max-height: 240px) and (orientation: landscape),
        (max-height: 480px) and (orientation: portrait),
        (max-width: 419px) and (max-height: 323px) {
-  body:not(.neterror) .icon {
+  body:not(.offline) .icon {
     height: 56px;
     width: 56px;
   }
 
   .icon {
     margin-bottom: 16px;
   }
 }
 
 /* Small mobile screens. No fixed nav. */
 @media (max-height: 400px) and (orientation: portrait),
-       (max-height: 240px) and (orientation: landscape) {
+       (max-height: 240px) and (orientation: landscape),
+       (max-width: 419px) and (max-height: 360px) {
   .interstitial-wrapper {
     display: flex;
     flex-direction: column;
     margin-bottom: 0;
   }
 
   #details {
     flex: 1 1 auto;
     order: 0;
   }
@@ skipping 38 matching lines @@
 
   body.safe-browsing-has-checkbox .nav-wrapper {
     flex: 0 1 auto;
     margin-top: 0;
     order: 1;
     padding-left: 0;
     padding-right: 0;
     position: relative;
   }
 }