Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(708)

Unified Diff: components/supervised_user_error_page/resources/supervised_user_block_interstitial.css

Issue 2739473006: Update supervised user interstitial pages. (Closed)
Patch Set: Created 3 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
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" che
Bernhard Bauer 2017/03/10 10:12:10 As it turns out, there aren't actually any checkbo
}
-#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
Bernhard Bauer 2017/03/10 10:12:10 By default it's displayed as a block element. The
Marc Treib 2017/03/10 10:33:42 So the "hidden" attribute effectively sets "displa
Bernhard Bauer 2017/03/10 11:56:42 Yes, exactly.
Marc Treib 2017/03/10 12:17:11 Yeah, I guess the hidden rule is effectively a cus
}
-#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;
}
}

Powered by Google App Engine
This is Rietveld 408576698