Update supervised user interstitial pages.

components/supervised_user_error_page/resources/supervised_user_block_interstitial.css

Index: components/supervised_user_error_page/resources/supervised_user_block_interstitial.css
diff --git a/components/supervised_user_error_page/resources/supervised_user_block_interstitial.css b/components/supervised_user_error_page/resources/supervised_user_block_interstitial.css
index 2f03ba080b17069199b58b281103143df14366e9..ab83ec7437ab9bb1905828392c441f5d3f8a404d 100644
--- a/components/supervised_user_error_page/resources/supervised_user_block_interstitial.css
+++ b/components/supervised_user_error_page/resources/supervised_user_block_interstitial.css
@@ -1,95 +1,146 @@
 /* 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. */
+   Use of this source code is governed by a BSD-style license that can be
+   found in the LICENSE file. */
+
 body {
-  background-color: rgb(247, 247, 247);
-  font-size: 10pt;
-  margin: 150px 60px 0 30px;
+  background-color: #f7f7f7;
+  color: #646464;
 }
 
-#main-frame-blocked {
-  margin: auto;
-  max-width: 600px;
-  min-width: 200px;
+a {
+  color: #585858;
+}
+
+button {
+  background: rgb(66, 133, 244);
+  border: 0;
+  border-radius: 2px;
+  box-sizing: border-box;
+  color: #fff;
+  cursor: pointer;
+  float: right;
+  font-size: .875em;
+  margin: 0;
+  padding: 10px 24px;
+  transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  user-select: none;
+}
+
+[dir='rtl'] button {
+  float: left;
+}
+
+button:active {
+  background: rgb(50, 102, 213);
+  outline: 0;
+}
+
+button:hover {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, .50);
+}
+
+#details {
+  color: #696969;
+  margin: 45px 0 50px;
+}
+
+#details p:not(:first-of-type) {
+  margin-top: 20px;
+}
+
+.details-button {
+  background: inherit;
+  border: 0;
+  float: none;
+  margin: 0;
+  padding: 10px 0;
+  text-transform: uppercase;
+}
+
+.details-button:hover {
+  box-shadow: inherit;
+  text-decoration: underline;
 }
 
 h1 {
-  font-size: 1.8em;
+  color: #333;
+  font-size: 1.6em;
   font-weight: normal;
-  margin: 5px 0 25px 0;
+  line-height: 1.25em;
+  margin-bottom: 16px;
 }
 
-#block-page-message {
-  color: rgb(97,97,97);
-  font-size: 0.667em;
-  margin-top: 16px;
+h2 {
+  font-size: 1.2em;
+  font-weight: normal;
 }
 
-.avatar-img {
-  -webkit-user-select: none;
-  border: 3px solid rgb(251, 251, 251);
-  border-radius: 50%;
-  content: -webkit-image-set(
-      url(default_100_percent/logo_avatar_circle_blue_color.png) 1x,
-      url(default_200_percent/logo_avatar_circle_blue_color.png) 2x);
-  margin-bottom: 5px;
-  margin-right: 15px;
-  margin-top: 5px;
-  max-width: 45px;
-  position: relative;
+html {
+  -webkit-text-size-adjust: 100%;
+  font-size: 125%;
 }
 
-#feedback {
-  margin-top: 50px;
+.icon {
+  background-repeat: no-repeat;
+  background-size: 100%;
+  height: 72px;
+  margin: 0 0 40px;
+  width: 72px;
 }
 
-#feedback-link {
-  color: rgb(66, 133, 244);
+input[type=checkbox] {
+  opacity: 0;

[Marc Treib, 2017/03/09 09:55:57]

This seems a bit odd - no better way to "hide" checkboxes?

[Bernhard Bauer, 2017/03/10 10:12:10]

As it turns out, there aren't actually any checkboxes in the interstitial, so I
removed it.

 }
 
-#request-access-button {
-  background-color: rgb(66, 133, 244);
-  color: rgb(255, 255, 255);
-  cursor: pointer;
-  font-size: 12px;
-  font-weight: bold;
-  min-width: 88px;
-  padding: 10px 15px;
-  transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
-  transition-delay: 200ms;
+input[type=checkbox]:focus ~ .checkbox {
+  outline: -webkit-focus-ring-color auto 5px;
 }
 
-#request-access-button:hover {
-  background-color: rgb(30, 136, 229);
+.main-frame-blocked {
+  box-sizing: border-box;
+  font-size: 1em;
+  line-height: 1.6em;
+  margin: 100px auto 0;
+  max-width: 600px;
+  width: 100%;
 }
 
-#request-access-button:active {
-  background-color: rgb(25,118,210);
-  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
-  transition-delay: 0s;
+#main-message > p:not([hidden]) {
+  display: inline;

[Marc Treib, 2017/03/09 09:55:57]

So what's the value otherwise? Why does it need to be changed based on the
hidden/visible state?

[Bernhard Bauer, 2017/03/10 10:12:10]

By default it's displayed as a block element. The :not([hidden]) is just because
otherwise this selector would take precedence over the one from the built-in
stylesheet that hides anything with a [hidden] attribute.

[Marc Treib, 2017/03/10 10:33:42]

So the "hidden" attribute effectively sets "display: none"?
So does that mean, anything that sets "display" here can not be hidden? That
seems brittle...

[Bernhard Bauer, 2017/03/10 11:56:42]

Yes, exactly.
Well, yes. Anything that changes the display attribute needs to make sure not to
override the [hidden] rule. I'm not sure there's a good alternative though: Even
if I used a custom class to set display: none, I would still need to make sure
that that rule doesn't get overridden. I have seen this done with !important,
but that seems like defeating the purpose of using cascading style sheets in the
first place.

[Marc Treib, 2017/03/10 12:17:11]

Yeah, I guess the hidden rule is effectively a custom class. Oh well.

 }
 
-#details-button-container {
-  color: rgb(97,97,97);
-  cursor: pointer;
-  display: inline;
-  font-size: 12px;
+.button-container {
+  margin-top: 51px;
 }
 
-#button-container {
-  align-items: baseline;
-  display: flex;
-  justify-content: space-between;
-  margin-top: 60px;
+.button-container::after {
+  clear: both;
+  content: '';
+  display: table;
+  width: 100%;
 }
 
-#details {
-  color: rgb(97,97,97);
-  font-size: 14px;
+.small-link {
+  color: #696969;
+  font-size: .875em;
+}
+
+.avatar-img {
+  border: 3px solid rgb(251, 251, 251);
+  border-radius: 50%;
+  content: -webkit-image-set(
+      url(default_100_percent/logo_avatar_circle_blue_color.png) 1x,
+      url(default_200_percent/logo_avatar_circle_blue_color.png) 2x);
+  margin-bottom: 5px;
+  margin-right: 15px;
+  margin-top: 5px;
+  max-width: 45px;
+  position: relative;
+  user-select: none;
 }
 
-#details-header {
-  font-weight: bold;
+#feedback {
+  margin-top: 50px;
 }
 
 .custodian-information {
@@ -108,46 +159,361 @@ h1 {
   padding: 1px 0;
 }
 
-@media (max-width: 600px) {
-  #button-container {
-    display: flex;
-    flex-flow: column;
-    justify-content: flex-start;
-    order: 2;
+
+@media (max-width: 700px) {
+  .main-frame-blocked {
+    padding: 0 10%;
+  }
+}
+
+@media (max-height: 600px) {
+  #feedback {
+    margin-top: 35px;
+  }
+}
+
+@media (max-width: 420px) {
+  button,
+  [dir='rtl'] button,
+  .small-link {
+    float: none;
+    font-size: .825em;
+    font-weight: 400;
+    margin: 0;
     text-transform: uppercase;
+    width: 100%;
   }
 
-  #details-button-container {
-    font-weight: bold;
-    margin: auto;
-    order: 2;
-    padding: 0 15px;
+  #details {
+    margin: 20px 0 20px 0;
+  }
+
+  #details p:not(:first-of-type) {
+    margin-top: 10px;
+  }
+
+  .details-button {
+/*    display: block; */

[Marc Treib, 2017/03/09 09:55:57]

Remove comment

[Bernhard Bauer, 2017/03/10 10:12:10]

Done.

+    margin-top: 20px;
     text-align: center;
     width: 100%;
   }
 
-  #request-access-button {
-    margin-bottom: 30px;
-    order: 1;
-    text-align: center;
+  .main-frame-blocked {
+    padding: 0 5%;
+  }
+
+  .button-container {
+    margin-top: 30px;
+  }
+}
+
+/**
+ * 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 (max-height: 736px) and (orientation: portrait) {
+  .details-button {
+    border: 0;
+    margin: 8px 0 0;
+  }
+
+  .secondary-button {
+    -webkit-margin-end: 0;
+    margin-top: 16px;
+  }
+}
+
+/* Fixed nav. */
+@media (min-width: 240px) and (max-width: 420px) and
+       (min-height: 401px) and (max-height: 736px) and (orientation:portrait),
+       (min-width: 421px) and (max-width: 736px) and (min-height: 240px) and
+       (max-height: 420px) and (orientation:landscape) {
+  body .button-container {
+    background: #f7f7f7;
+    bottom: 0;
+    box-shadow: 0 -22px 40px rgb(247, 247, 247);
+    left: 0;
+    margin: 0;
+    max-width: 736px;
+    padding-left: 24px;
+    padding-right: 24px;
+    position: fixed;
+    z-index: 2;
+  }
+
+  .main-frame-blocked {
+    max-width: 736px;
+  }
+
+  #details,
+  #information-container {
+    padding-bottom: 40px;
+  }
+}
+
+@media (max-width: 420px) and (max-height: 736px) and (orientation: portrait),
+       (max-width: 736px) and (max-height: 420px) and (orientation: landscape) {
+  body {
+    margin: 0 auto;
+  }
+
+  button,
+  [dir='rtl'] button,
+  button.small-link {
+    font-family: Roboto-Regular,Helvetica;
+    font-size: .933em;
+    font-weight: 600;
+    margin: 6px 0;
+    text-transform: uppercase;
+    transform: translatez(0);
+  }
+
+  .button-container {
+    box-sizing: border-box;
+    padding-bottom: 8px;
     width: 100%;
   }
 
+  .error-code {
+    margin-top: 0;
+  }
+
   #details {
-    margin: auto;
-    order: 1;
+    box-sizing: border-box;
+    height: auto;
+    margin: 0;
+    opacity: 1;
+    padding-top: 40px;
+    transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  #details[hidden],
+  #information-container[hidden] {
+    display: block;
+    height: 0;
+    opacity: 0;
+    overflow: hidden;
+    transition: none;
+  }
+
+  .details-button {
+    padding-bottom: 16px;
+    padding-top: 16px;
+  }
+
+  h1 {
+    font-size: 1.5em;
+    margin-bottom: 8px;
+  }
+
+  .icon {
+    margin-bottom: 12px;
+  }
+
+  .main-frame-blocked {
+    box-sizing: border-box;
+    margin: 24px auto 12px;
+    padding: 0 24px;
+    position: relative;
+  }
+
+  .main-frame-blocked p {
+    font-size: .95em;
+    line-height: 1.61em;
+    margin-top: 8px;
+  }
+
+  #information-container {
+    margin: 0;
+    transition: opacity 100ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .small-link {
+    border: 0;
+  }
+}
+
+@media (min-height: 400px) and (orientation:portrait) {
+  .main-frame-blocked {
+    margin-bottom: 145px;
+  }
+}
+
+@media (min-height: 299px) and (orientation:portrait) {
+  .button-container {
+    padding-bottom: 16px;
+  }
+}
+
+@media (min-height: 405px) and (max-height: 736px) and
+       (max-width: 420px) and (orientation:portrait) {
+  .icon {
+    margin-bottom: 24px;
+  }
+
+  .main-frame-blocked {
+    margin-top: 64px;
+  }
+}
+
+@media (min-height: 480px) and (max-width: 420px) and
+       (max-height: 736px) and (orientation: portrait),
+       (min-height: 338px) and (max-height: 420px) and (max-width: 736px) and
+       (orientation: landscape) {
+  .icon {
+    margin-bottom: 24px;
+  }
+
+  .button-container {
+    padding-bottom: 24px;
+  }
+}
+
+@media (min-height: 500px) and (max-width: 414px) and (orientation: portrait) {
+  .main-frame-blocked {
+    margin-top: 96px;
+  }
+}
+
+/* Phablet sizing */
+@media (min-width: 375px) and (min-height: 641px) and (max-height: 736px) and
+       (max-width: 414px) and (orientation: portrait) {
+  button,
+  [dir='rtl'] button,
+  .small-link {
+    font-size: 1em;
+    padding-bottom: 12px;
+    padding-top: 12px;
+  }
+
+  body:not(.offline) .icon {
+    height: 80px;
+    width: 80px;
   }
 
-  .hidden-on-mobile {
-    display: none;
+  .details-button {
+    margin-top: 28px;
   }
 
-  #main-frame-blocked {
+  h1 {
+    font-size: 1.7em;
+  }
+
+  .icon {
+    margin-bottom: 28px;
+  }
+
+  .main-frame-blocked {
+    padding: 28px;
+  }
+
+  .main-frame-blocked p {
+    font-size: 1.05em;
+  }
+
+  .button-container {
+    padding: 28px;
+  }
+}
+
+@media (min-width: 420px) and (max-width: 736px) and
+       (min-height: 240px) and (max-height: 298px) and
+       (orientation:landscape) {
+  body:not(.offline) .icon {
+    height: 50px;
+    width: 50px;
+  }
+
+  .icon {
+    padding-top: 0;
+  }
+
+  .main-frame-blocked {
+    margin-top: 16px;
+  }
+
+  .button-container {
+    padding: 0 24px 8px;
+  }
+}
+
+@media (min-width: 420px) and (max-width: 736px) and
+       (min-height: 240px) and (max-height: 420px) and
+       (orientation:landscape) {
+  .details-button {
+    margin: 0;
+  }
+
+  .main-frame-blocked {
+    margin-bottom: 70px;
+  }
+
+  .button-container {
+    margin-top: 0;
+  }
+}
+
+/* Phablet landscape */
+@media (min-width: 680px) and (max-height: 414px) {
+  .main-frame-blocked {
+    margin: 24px auto;
+  }
+
+  .button-container {
+    margin: 16px auto 0;
+  }
+}
+
+@media (max-height: 240px) and (orientation: landscape),
+       (max-height: 480px) and (orientation: portrait),
+       (max-width: 419px) and (max-height: 323px) {
+  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: 239px) and (orientation: landscape),
+       (max-width: 419px) and (max-height: 399px) {
+  .main-frame-blocked {
     display: flex;
-    flex-flow: column;
+    flex-direction: column;
+    margin-bottom: 0;
   }
 
-  #feedback {
-    margin-top: 35px;
+  #details {
+    flex: 1 1 auto;
+    order: 0;
+  }
+
+  #information-container {
+    flex: 1 1 auto;
+    order: 0;
+  }
+
+  .button-container {
+    flex: 0 1 auto;
+    margin-top: 8px;
+    order: 1;
+    padding-left: 0;
+    padding-right: 0;
+    position: relative;
+    width: 100%;
+  }
+}
+
+@media (max-width: 239px) and (orientation: portrait) {
+  .button-container {
+    padding-left: 0;
+    padding-right: 0;
   }
 }