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

Side by Side Diff: chrome/browser/resources/security_warnings/interstitial_v2.css

Issue 952563003: Reinstate the error code to main content area + bug fixes on security / network interstitials (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Adjust vertical alignment of details button, remove net error string prefix Created 5 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 unified diff | Download patch
OLDNEW
1 /* Copyright 2014 The Chromium Authors. All rights reserved. 1 /* Copyright 2014 The Chromium Authors. All rights reserved.
2 Use of this source code is governed by a BSD-style license that can be 2 Use of this source code is governed by a BSD-style license that can be
3 found in the LICENSE file. */ 3 found in the LICENSE file. */
4 4
5 a { 5 a {
6 color: #585858; 6 color: #585858;
7 } 7 }
8 8
9 .bad-clock .icon { 9 .bad-clock .icon {
10 background-image: -webkit-image-set( 10 background-image: -webkit-image-set(
(...skipping 13 matching lines...) Expand all
24 24
25 button { 25 button {
26 background: rgb(76, 142, 250); 26 background: rgb(76, 142, 250);
27 border: 0; 27 border: 0;
28 border-radius: 2px; 28 border-radius: 2px;
29 box-sizing: border-box; 29 box-sizing: border-box;
30 color: #fff; 30 color: #fff;
31 cursor: pointer; 31 cursor: pointer;
32 float: right; 32 float: right;
33 font-size: .875em; 33 font-size: .875em;
34 height: 36px; 34 margin: 0;
35 margin: -6px 0 0; 35 padding: 10px 24px;
36 padding: 8px 24px;
37 transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1); 36 transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
38 } 37 }
39 38
40 [dir='rtl'] button { 39 [dir='rtl'] button {
41 float: left; 40 float: left;
42 } 41 }
43 42
44 button:active { 43 button:active {
45 background: rgb(50, 102, 213); 44 background: rgb(50, 102, 213);
46 outline: 0; 45 outline: 0;
47 } 46 }
48 47
49 button:hover { 48 button:hover {
50 box-shadow: 0 1px 3px rgba(0, 0, 0, .50); 49 box-shadow: 0 1px 3px rgba(0, 0, 0, .50);
51 } 50 }
52 51
53 #debugging { 52 #debugging {
53 display: inline;
54 overflow: auto; 54 overflow: auto;
55 } 55 }
56 56
57 .debugging-content { 57 .debugging-content {
58 line-height: 1em; 58 line-height: 1em;
59 margin-bottom: 0; 59 margin-bottom: 0;
60 margin-top: 0; 60 margin-top: 1em;
61 } 61 }
62 62
63 .debugging-title { 63 .debugging-title {
64 font-weight: bold; 64 font-weight: bold;
65 } 65 }
66 66
67 #details { 67 #details {
68 color: #696969; 68 color: #696969;
69 margin: 45px 0 50px; 69 margin: 45px 0 50px;
70 } 70 }
71 71
72 #details p:not(:first-of-type) { 72 #details p:not(:first-of-type) {
73 margin-top: 20px; 73 margin-top: 20px;
74 } 74 }
75 75
76 #details-button { 76 #details-button {
77 background: inherit; 77 background: inherit;
78 border: 0; 78 border: 0;
79 float: none; 79 float: none;
80 margin: -6px 0 0; 80 margin: 0;
81 padding: 0; 81 padding: 10px 0;
82 text-decoration: underline; 82 text-decoration: underline;
83 } 83 }
84 84
85 #details-button:hover { 85 #details-button:hover {
86 box-shadow: inherit; 86 box-shadow: inherit;
87 } 87 }
88 88
89 #error-code { 89 .error-code {
90 color: black; 90 color: #777;
91 font-size: .825em; 91 display: inline;
92 opacity: .35; 92 font-size: .86667em;
93 margin-top: 15px;
94 opacity: .5;
93 text-transform: uppercase; 95 text-transform: uppercase;
94 } 96 }
95 97
96 #error-debugging-info { 98 #error-debugging-info {
97 font-size: 0.8em; 99 font-size: 0.8em;
98 overflow: auto;
99 } 100 }
100 101
101 h1 { 102 h1 {
102 color: #333; 103 color: #333;
103 font-size: 1.6em; 104 font-size: 1.6em;
104 font-weight: normal; 105 font-weight: normal;
105 line-height: 1.25em; 106 line-height: 1.25em;
106 margin-bottom: 16px; 107 margin-bottom: 16px;
107 } 108 }
108 109
(...skipping 25 matching lines...) Expand all
134 135
135 .interstitial-wrapper { 136 .interstitial-wrapper {
136 box-sizing: border-box; 137 box-sizing: border-box;
137 font-size: 1em; 138 font-size: 1em;
138 line-height: 1.6em; 139 line-height: 1.6em;
139 margin: 100px auto 0; 140 margin: 100px auto 0;
140 max-width: 600px; 141 max-width: 600px;
141 width: 100%; 142 width: 100%;
142 } 143 }
143 144
145 #main-message > p {
146 display: inline;
147 }
148
144 #malware-opt-in { 149 #malware-opt-in {
145 font-size: .875em; 150 font-size: .875em;
146 margin-top: 39px; 151 margin-top: 39px;
147 } 152 }
148 153
149 .nav-wrapper { 154 .nav-wrapper {
150 margin-top: 51px; 155 margin-top: 51px;
151 } 156 }
152 157
153 .nav-wrapper::after { 158 .nav-wrapper::after {
(...skipping 17 matching lines...) Expand all
171 } 176 }
172 177
173 .safe-browsing button:active { 178 .safe-browsing button:active {
174 background-color: rgba(255, 255, 255, .25); 179 background-color: rgba(255, 255, 255, .25);
175 } 180 }
176 181
177 .safe-browsing button:hover { 182 .safe-browsing button:hover {
178 box-shadow: 0 2px 3px rgba(0, 0, 0, .5); 183 box-shadow: 0 2px 3px rgba(0, 0, 0, .5);
179 } 184 }
180 185
186 .safe-browsing .error-code {
187 display: none;
188 }
189
181 .safe-browsing .icon { 190 .safe-browsing .icon {
182 background-image: -webkit-image-set( 191 background-image: -webkit-image-set(
183 url(images/1x/stop_sign.png) 1x, 192 url(images/1x/stop_sign.png) 1x,
184 url(images/2x/stop_sign.png) 2x); 193 url(images/2x/stop_sign.png) 2x);
185 } 194 }
186 195
187 .secondary-button {
188 -webkit-margin-end: 16px;
189 background: #d9d9d9;
190 color: #696969;
191 }
192
193 .small-link { 196 .small-link {
194 color: #696969; 197 color: #696969;
195 font-size: .875em; 198 font-size: .875em;
196 } 199 }
197 200
198 .ssl .icon { 201 .ssl .icon {
199 background-image: -webkit-image-set( 202 background-image: -webkit-image-set(
200 url(images/1x/brokenssl_red.png) 1x, 203 url(images/1x/brokenssl_red.png) 1x,
201 url(images/2x/brokenssl_red.png) 2x); 204 url(images/2x/brokenssl_red.png) 2x);
202 } 205 }
(...skipping 29 matching lines...) Expand all
232 } 235 }
233 236
234 .styled-checkbox .checkbox-tick { 237 .styled-checkbox .checkbox-tick {
235 background: transparent; 238 background: transparent;
236 border: 2px solid white; 239 border: 2px solid white;
237 border-right-width: 0; 240 border-right-width: 0;
238 border-top-width: 0; 241 border-top-width: 0;
239 content: ''; 242 content: '';
240 height: 4px; 243 height: 4px;
241 left: 2px; 244 left: 2px;
242 opacity: 0.3; 245 opacity: 0;
243 position: absolute; 246 position: absolute;
244 top: 3px; 247 top: 3px;
245 transform: rotate(-45deg); 248 transform: rotate(-45deg);
246 width: 9px; 249 width: 9px;
247 } 250 }
248 251
249 .styled-checkbox input[type=checkbox]:checked ~ .checkbox-tick { 252 .styled-checkbox input[type=checkbox]:checked ~ .checkbox-tick {
250 opacity: 1; 253 opacity: 1;
251 } 254 }
252 255
253 @media (max-width: 700px) { 256 @media (max-width: 700px) {
254 .interstitial-wrapper { 257 .interstitial-wrapper {
255 padding: 0 10%; 258 padding: 0 10%;
256 } 259 }
260
261 #error-debugging-info {
262 overflow: auto;
263 }
257 } 264 }
258 265
259 @media (max-height: 600px) { 266 @media (max-height: 600px) {
267 .error-code {
268 margin-top: 10px;
269 }
270
260 .interstitial-wrapper { 271 .interstitial-wrapper {
261 margin-top: 13%; 272 margin-top: 13%;
262 } 273 }
263 } 274 }
264 275
265 @media (max-width: 420px) { 276 @media (max-width: 420px) {
266 button, 277 button,
267 [dir='rtl'] button, 278 [dir='rtl'] button,
268 .small-link { 279 .small-link {
269 float: none; 280 float: none;
(...skipping 81 matching lines...) Expand 10 before | Expand all | Expand 10 after
351 font-weight: 600; 362 font-weight: 600;
352 text-transform: uppercase; 363 text-transform: uppercase;
353 } 364 }
354 365
355 .nav-wrapper { 366 .nav-wrapper {
356 box-sizing: border-box; 367 box-sizing: border-box;
357 padding: 16px 24px 8px; 368 padding: 16px 24px 8px;
358 width: 100%; 369 width: 100%;
359 } 370 }
360 371
372 .error-code {
373 margin-top: 0;
374 }
375
361 #details { 376 #details {
362 box-sizing: border-box; 377 box-sizing: border-box;
363 height: auto; 378 height: auto;
364 margin: 0; 379 margin: 0;
365 opacity: 1; 380 opacity: 1;
366 transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1); 381 transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
367 } 382 }
368 383
369 #details.hidden, 384 #details.hidden,
370 #main-content.hidden { 385 #main-content.hidden {
(...skipping 263 matching lines...) Expand 10 before | Expand all | Expand 10 after
634 649
635 body.safe-browsing-has-checkbox .nav-wrapper { 650 body.safe-browsing-has-checkbox .nav-wrapper {
636 flex: 0 1 auto; 651 flex: 0 1 auto;
637 margin-top: 0; 652 margin-top: 0;
638 order: 1; 653 order: 1;
639 padding-left: 0; 654 padding-left: 0;
640 padding-right: 0; 655 padding-right: 0;
641 position: relative; 656 position: relative;
642 } 657 }
643 } 658 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698