OLD | NEW |
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 Loading... |
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 Loading... |
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 Loading... |
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 } | |
OLD | NEW |