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

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

Issue 866723005: Revert of Update SSL/malware/net error interstitial design (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 5 years, 11 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
« no previous file with comments | « no previous file | chrome/browser/resources/security_warnings/interstitial_v2.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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(
11 url(images/1x/clock.png) 1x, 11 url(images/1x/clock.png) 1x,
12 url(images/2x/clock.png) 2x); 12 url(images/2x/clock.png) 2x);
13 } 13 }
14 14
15 body { 15 body {
16 background-color: #f7f7f7; 16 background-color: #f7f7f7;
17 color: #646464; 17 color: #585858;
18 } 18 }
19 19
20 body.safe-browsing { 20 body.safe-browsing {
21 background-color: rgb(206, 52, 38); 21 background-color: rgb(206, 52, 38);
22 color: white; 22 color: white;
23 } 23 }
24 24
25 button { 25 button {
26 background: rgb(76, 142, 250); 26 background: rgb(76, 142, 250);
27 border: 0; 27 border: 0;
(...skipping 15 matching lines...) Expand all
43 43
44 button:active { 44 button:active {
45 background: rgb(50, 102, 213); 45 background: rgb(50, 102, 213);
46 outline: 0; 46 outline: 0;
47 } 47 }
48 48
49 button:hover { 49 button:hover {
50 box-shadow: 0 1px 3px rgba(0, 0, 0, .50); 50 box-shadow: 0 1px 3px rgba(0, 0, 0, .50);
51 } 51 }
52 52
53 #debugging {
54 overflow: auto;
55 }
56
57 .debugging-content { 53 .debugging-content {
58 line-height: 1em; 54 line-height: 1em;
59 margin-bottom: 0; 55 margin-bottom: 0;
60 margin-top: 0; 56 margin-top: 0;
61 } 57 }
62 58
63 .debugging-title { 59 .debugging-title {
64 font-weight: bold; 60 font-weight: bold;
65 } 61 }
66 62
67 #details { 63 #details {
68 color: #696969; 64 color: #696969;
69 margin: 45px 0 50px; 65 margin: 45px 0 50px;
70 } 66 }
71 67
72 #details p:not(:first-of-type) { 68 #details p:not(:first-of-type) {
73 margin-top: 20px; 69 margin-top: 20px;
74 } 70 }
75 71
76 #details-button {
77 background: inherit;
78 border: 0;
79 float: none;
80 margin: -6px 0 0;
81 padding: 0;
82 text-decoration: underline;
83 }
84
85 #details-button:hover {
86 box-shadow: inherit;
87 }
88
89 #error-code { 72 #error-code {
90 color: black; 73 color: black;
91 font-size: .825em;
92 opacity: .35; 74 opacity: .35;
93 text-transform: uppercase; 75 text-transform: uppercase;
94 } 76 }
95 77
96 #error-debugging-info { 78 #error-debugging-info {
97 font-size: 0.8em; 79 font-size: 0.8em;
98 overflow: auto;
99 } 80 }
100 81
101 h1 { 82 h1 {
102 color: #333; 83 color: #585858;
103 font-size: 1.6em; 84 font-size: 1.6em;
104 font-weight: normal; 85 font-weight: normal;
105 line-height: 1.25em; 86 line-height: 1.25em;
106 margin-bottom: 16px; 87 margin-bottom: 16px;
107 } 88 }
108 89
109 h2 { 90 h2 {
110 font-size: 1.2em; 91 font-size: 1.2em;
111 font-weight: normal; 92 font-weight: normal;
112 } 93 }
113 94
114 .hidden { 95 .hidden {
115 display: none; 96 display: none;
116 } 97 }
117 98
118 html { 99 html {
119 -webkit-text-size-adjust: 100%;
120 font-size: 125%; 100 font-size: 125%;
121 } 101 }
122 102
123 .icon { 103 .icon {
124 background-repeat: no-repeat; 104 background-repeat: no-repeat;
125 background-size: 100%; 105 background-size: 100%;
126 height: 72px; 106 height: 72px;
127 margin: 0 0 40px; 107 margin: 0 0 40px;
128 width: 72px; 108 width: 72px;
129 } 109 }
(...skipping 30 matching lines...) Expand all
160 #opt-in-label { 140 #opt-in-label {
161 -webkit-margin-start: 32px; 141 -webkit-margin-start: 32px;
162 } 142 }
163 143
164 .safe-browsing :-webkit-any( 144 .safe-browsing :-webkit-any(
165 a, #details, #details-button, h1, h2, p, .small-link) { 145 a, #details, #details-button, h1, h2, p, .small-link) {
166 color: white; 146 color: white;
167 } 147 }
168 148
169 .safe-browsing button { 149 .safe-browsing button {
170 background-color: rgba(255, 255, 255, .15); 150 background-color: rgb(206, 52, 38);
151 border: 1px solid white;
171 } 152 }
172 153
173 .safe-browsing button:active { 154 .safe-browsing button:active {
174 background-color: rgba(255, 255, 255, .25); 155 background-color: rgb(206, 52, 38);
156 border-color: rgba(255, 255, 255, .6);
175 } 157 }
176 158
177 .safe-browsing button:hover { 159 .safe-browsing button:hover {
178 box-shadow: 0 2px 3px rgba(0, 0, 0, .5); 160 box-shadow: 0 2px 3px rgba(0, 0, 0, .5);
179 } 161 }
180 162
181 .safe-browsing .icon { 163 .safe-browsing .icon {
182 background-image: -webkit-image-set( 164 background-image: -webkit-image-set(
183 url(images/1x/stop_sign.png) 1x, 165 url(images/1x/stop_sign.png) 1x,
184 url(images/2x/stop_sign.png) 2x); 166 url(images/2x/stop_sign.png) 2x);
(...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after
218 border: white solid 1px; 200 border: white solid 1px;
219 border-radius: 2px; 201 border-radius: 2px;
220 height: 14px; 202 height: 14px;
221 left: 0; 203 left: 0;
222 position: absolute; 204 position: absolute;
223 right: 0; 205 right: 0;
224 top: 0; 206 top: 0;
225 width: 14px; 207 width: 14px;
226 } 208 }
227 209
228 .styled-checkbox .checkbox-tick { 210 .styled-checkbox label::after {
229 background: transparent; 211 background: transparent;
230 border: 2px solid white; 212 border: 2px solid white;
231 border-right-width: 0; 213 border-right-width: 0;
232 border-top-width: 0; 214 border-top-width: 0;
233 content: ''; 215 content: '';
234 height: 4px; 216 height: 4px;
235 left: 2px; 217 left: 2px;
236 opacity: 0.3; 218 opacity: 0.3;
237 position: absolute; 219 position: absolute;
238 top: 3px; 220 top: 3px;
239 transform: rotate(-45deg); 221 transform: rotate(-45deg);
240 width: 9px; 222 width: 9px;
241 } 223 }
242 224
243 .styled-checkbox input[type=checkbox]:checked ~ .checkbox-tick { 225 .styled-checkbox input[type=checkbox]:checked + label::after {
244 opacity: 1; 226 opacity: 1;
245 } 227 }
246 228
247 @media (max-width: 700px) { 229 @media (max-width: 700px) {
248 .interstitial-wrapper { 230 .interstitial-wrapper {
249 padding: 0 10%; 231 padding: 0 10%;
250 } 232 }
251 } 233 }
252 234
253 @media (max-height: 600px) { 235 @media (max-height: 600px) {
254 .interstitial-wrapper { 236 .interstitial-wrapper {
255 margin-top: 13%; 237 margin-top: 13%;
256 } 238 }
257 } 239 }
258 240
259 @media (max-width: 420px) { 241 @media (max-width: 400px) {
260 button, 242 button,
261 [dir='rtl'] button, 243 [dir='rtl'] button {
262 .small-link {
263 float: none; 244 float: none;
264 font-size: .825em; 245 font-size: 1em;
265 font-weight: 400;
266 text-transform: uppercase;
267 width: 100%; 246 width: 100%;
268 } 247 }
269 248
270 #details { 249 #details {
271 margin: 20px 0 20px 0; 250 margin: 20px 0 20px 0;
272 } 251 }
273 252
274 #details p:not(:first-of-type) { 253 #details p:not(:first-of-type) {
275 margin-top: 10px; 254 margin-top: 10px;
276 } 255 }
277 256
278 #details-button { 257 #details-button {
279 display: block; 258 display: block;
259 padding-top: 14px;
280 text-align: center; 260 text-align: center;
281 width: 100%; 261 width: 100%;
282 } 262 }
283 263
284 .interstitial-wrapper { 264 .interstitial-wrapper {
285 padding: 0 5%; 265 padding: 0 5%;
286 } 266 }
287 267
288 #malware-opt-in { 268 #malware-opt-in {
289 margin-top: 24px; 269 margin-top: 24px;
290 } 270 }
291 271
292 .nav-wrapper { 272 .nav-wrapper {
293 margin-top: 30px; 273 margin-top: 30px;
294 } 274 }
295 }
296 275
297 /** 276 .small-link {
298 * Mobile specific styling. 277 font-size: 1em;
299 * Navigation buttons are anchored to the bottom of the screen.
300 * Details message replaces the top content in it's own scrollable area.
301 */
302
303 @media (max-width: 420px) and (orientation: portrait) {
304 #details-button {
305 border: 0;
306 margin: 20px 0 0;
307 } 278 }
308 } 279 }
309
310 /* Fixed nav. */
311 @media (min-width:320px) and (max-width: 420px) and
312 (min-height: 400px) and (orientation:portrait),
313 (min-width: 421px) and (max-width: 736px) and (min-height: 240px) and
314 (max-height: 420px) and (orientation:landscape) {
315
316 body:not(.offline) .nav-wrapper {
317 background: #f7f7f7;
318 bottom: 0;
319 left: 0;
320 position: fixed;
321 z-index: 1;
322 }
323
324 body.safe-browsing .nav-wrapper {
325 background: rgb(206, 52, 38);
326 }
327 }
328
329 @media (max-width: 420px) and (orientation: portrait),
330 (max-width: 736px) and (max-height: 420px) and (orientation: landscape) {
331 body {
332 margin: 0 auto;
333 }
334
335 button,
336 [dir='rtl'] button,
337 button.small-link {
338 font-family: Roboto-Regular,Helvetica;
339 font-size: .933em;
340 font-weight: 600;
341 text-transform: uppercase;
342 }
343
344 .nav-wrapper {
345 box-sizing: border-box;
346 padding: 16px 24px 8px;
347 width: 100%;
348 }
349
350 #details {
351 box-sizing: border-box;
352 height: auto;
353 margin: 0;
354 opacity: 1;
355 transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
356 }
357
358 #details.hidden,
359 #main-content.hidden {
360 display: block;
361 height: 0;
362 opacity: 0;
363 overflow: hidden;
364 }
365
366 #details-button {
367 height: 48px;
368 }
369
370 h1 {
371 font-size: 1.5em;
372 margin-bottom: 8px;
373 }
374
375 .icon {
376 margin-bottom: 12px;
377 }
378
379 .interstitial-wrapper {
380 box-sizing: border-box;
381 margin: 24px 0 12px;
382 max-width: initial;
383 overflow: auto;
384 padding: 0 24px;
385 position: relative;
386 }
387
388 .interstitial-wrapper p {
389 font-size: .95em;
390 line-height: 1.61em;
391 margin-top: 8px;
392 }
393
394 #main-content {
395 margin: 0;
396 transition: opacity 100ms cubic-bezier(0.4, 0, 0.2, 1);
397 }
398
399 .small-link {
400 border: 0;
401 }
402
403 .suggested-left > #control-buttons,
404 .suggested-right > #control-buttons {
405 float: none;
406 margin: 0;
407 }
408 }
409
410 @media (min-height: 400px) and (orientation:portrait) {
411 body:not(.safe-browsing-has-checkbox):not(.offline) .interstitial-wrapper {
412 margin-bottom: 145px;
413 }
414 }
415
416 @media (min-height: 299px) and (orientation:portrait) {
417 .nav-wrapper {
418 padding-bottom: 16px;
419 }
420 }
421
422 @media (min-height: 405px) and (orientation:portrait) {
423 .icon {
424 margin-bottom: 24px;
425 }
426
427 .interstitial-wrapper {
428 margin-top: 64px;
429 }
430 }
431
432 @media (min-height: 480px) and (max-width: 420px) and (orientation: portrait),
433 (min-height: 338px) and (max-height: 420px) and (max-width: 736px) and
434 (orientation: landscape) {
435 .icon {
436 margin-bottom: 24px;
437 }
438
439 .nav-wrapper {
440 padding: 16px 24px 24px;
441 }
442 }
443
444 @media (min-height: 500px) and (max-width: 414px) and (orientation: portrait) {
445 :not(.safe-browsing-has-checkbox) .interstitial-wrapper {
446 margin-top: 96px;
447 }
448 }
449
450 /* Phablet sizing */
451 @media (min-width: 375px) and (min-height: 641px) and
452 (max-width: 414px) and (orientation: portrait) {
453 button,
454 [dir='rtl'] button,
455 .small-link {
456 font-size: 1em;
457 height: 40px;
458 }
459
460 body:not(.neterror) .icon {
461 height: 80px;
462 width: 80px;
463 }
464
465 #details-button {
466 margin-top: 28px;
467 }
468
469 h1 {
470 font-size: 1.7em;
471 }
472
473 .icon {
474 margin-bottom: 28px;
475 }
476
477 .interstitial-wrapper {
478 padding: 28px;
479 }
480
481 .interstitial-wrapper p {
482 font-size: 1.05em;
483 }
484
485 .nav-wrapper {
486 padding: 28px;
487 }
488
489 .neterror .icon {
490 height: 80px;
491 width: 65.6px;
492 }
493 }
494
495 @media (min-width: 420px) and (max-width: 736px) and
496 (min-height: 240px) and (max-height: 298px) and
497 (orientation:landscape) {
498 body:not(.neterror) .icon {
499 height: 50px;
500 width: 50px;
501 }
502
503 .icon {
504 padding-top: 0;
505 }
506
507 .interstitial-wrapper {
508 margin-top: 16px;
509 }
510
511 .nav-wrapper {
512 padding: 0 24px 8px;
513 }
514 }
515
516 @media (min-width: 420px) and (max-width: 736px) and
517 (min-height: 240px) and (max-height: 420px) and
518 (orientation:landscape) {
519 #details-button {
520 margin: 0;
521 }
522
523 .interstitial-wrapper {
524 margin-bottom: 70px;
525 }
526
527 .nav-wrapper {
528 margin-top: 0;
529 }
530
531 #malware-opt-in {
532 margin-top: 0;
533 }
534
535 #reload-button,
536 #primary-button {
537 margin: 6px 0;
538 }
539 }
540
541 /* Phablet landscape */
542 @media (min-width: 680px) and (max-height: 414px) {
543 .interstitial-wrapper {
544 margin: 24px auto;
545 }
546
547 .nav-wrapper {
548 margin: 0 auto;
549 }
550 }
551
552 @media (max-height: 404px) {
553 button {
554 margin-top: 0;
555 }
556
557 #details-button {
558 height: 32px;
559 margin: 8px 0;
560 }
561 }
562
563 @media (max-height: 240px) and (orientation: landscape),
564 (max-height: 480px) and (orientation: portrait),
565 (max-width: 419px) and (max-height: 323px) {
566 body:not(.neterror) .icon {
567 height: 56px;
568 width: 56px;
569 }
570
571 .icon {
572 margin-bottom: 16px;
573 }
574 }
575
576 /* Small mobile screens. No fixed nav. */
577 @media (max-height: 400px) and (orientation: portrait),
578 (max-height: 240px) and (orientation: landscape) {
579 .interstitial-wrapper {
580 display: flex;
581 flex-direction: column;
582 margin-bottom: 0;
583 }
584
585 #details {
586 flex: 1 1 auto;
587 order: 0;
588 }
589
590 #main-content {
591 flex: 1 1 auto;
592 order: 0;
593 }
594
595 .nav-wrapper {
596 flex: 0 1 auto;
597 margin-top: 0;
598 order: 1;
599 padding-left: 0;
600 padding-right: 0;
601 position: relative;
602 }
603 }
604
605 /* Malware opt-in. No fixed nav. */
606 @media (max-height: 600px) and (orientation: portrait),
607 (max-height: 360px) and (orientation: landscape) {
608 .safe-browsing-has-checkbox .interstitial-wrapper {
609 display: flex;
610 flex-direction: column;
611 margin-bottom: 0;
612 }
613
614 .safe-browsing-has-checkbox #details {
615 flex: 1 1 auto;
616 order: 0;
617 }
618
619 .safe-browsing-has-checkbox #main-content {
620 flex: 1 1 auto;
621 order: 0;
622 }
623
624 .safe-browsing-has-checkbox #malware-opt-in {
625 margin-bottom: 8px;
626 }
627
628 body.safe-browsing-has-checkbox .nav-wrapper {
629 flex: 0 1 auto;
630 margin-top: 0;
631 order: 1;
632 padding-left: 0;
633 padding-right: 0;
634 position: relative;
635 }
636 }
OLDNEW
« no previous file with comments | « no previous file | chrome/browser/resources/security_warnings/interstitial_v2.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698