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( |
(...skipping 313 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
324 margin-top: 30px; | 324 margin-top: 30px; |
325 } | 325 } |
326 } | 326 } |
327 | 327 |
328 /** | 328 /** |
329 * Mobile specific styling. | 329 * Mobile specific styling. |
330 * Navigation buttons are anchored to the bottom of the screen. | 330 * Navigation buttons are anchored to the bottom of the screen. |
331 * Details message replaces the top content in its own scrollable area. | 331 * Details message replaces the top content in its own scrollable area. |
332 */ | 332 */ |
333 | 333 |
334 @media (max-width: 420px) and (max-height: 736px) and (orientation: portrait) { | 334 @media (max-width: 420px) { |
335 #details-button { | 335 #details-button { |
336 border: 0; | 336 border: 0; |
337 margin: 8px 0 0; | 337 margin: 28px 0 0; |
338 } | 338 } |
339 | 339 |
340 .secondary-button { | 340 .secondary-button { |
341 -webkit-margin-end: 0; | 341 -webkit-margin-end: 0; |
342 margin-top: 16px; | 342 margin-top: 16px; |
343 } | 343 } |
344 } | 344 } |
345 | 345 |
346 /* Fixed nav. */ | 346 /* Fixed nav. */ |
347 @media (min-width: 240px) and (max-width: 420px) and | 347 @media (min-width: 240px) and (max-width: 420px) and |
348 (min-height: 401px) and (max-height: 736px) and (orientation:portrait), | 348 (min-height: 401px), |
349 (min-width: 421px) and (max-width: 736px) and (min-height: 240px) and | 349 (min-width: 421px) and (min-height: 240px) and |
350 (max-height: 420px) and (orientation:landscape) { | 350 (max-height: 736px) { |
351 body .nav-wrapper { | 351 body .nav-wrapper { |
352 background: #f7f7f7; | 352 background: #f7f7f7; |
353 bottom: 0; | 353 bottom: 0; |
354 box-shadow: 0 -22px 40px rgb(247, 247, 247); | 354 box-shadow: 0 -22px 40px rgb(247, 247, 247); |
355 left: 0; | |
356 margin: 0; | 355 margin: 0; |
357 max-width: 736px; | 356 max-width: 736px; |
358 padding-left: 24px; | 357 padding-left: 0px; |
359 padding-right: 24px; | 358 padding-right: 48px; |
360 position: fixed; | 359 position: fixed; |
361 z-index: 2; | 360 z-index: 2; |
362 } | 361 } |
363 | 362 |
364 body.safe-browsing .nav-wrapper { | 363 body.safe-browsing .nav-wrapper { |
365 background: rgb(206, 52, 38); | 364 background: rgb(206, 52, 38); |
366 box-shadow: 0 -22px 40px rgb(206, 52, 38); | 365 box-shadow: 0 -22px 40px rgb(206, 52, 38); |
367 } | 366 } |
368 | 367 |
369 .interstitial-wrapper { | 368 .interstitial-wrapper { |
370 max-width: 736px; | 369 max-width: 736px; |
371 } | 370 } |
372 | 371 |
373 #details, | 372 #details, |
374 #main-content { | 373 #main-content { |
375 padding-bottom: 40px; | 374 padding-bottom: 40px; |
376 } | 375 } |
377 } | 376 } |
378 | 377 |
379 @media (max-width: 420px) and (max-height: 736px) and (orientation: portrait), | 378 @media (max-width: 420px) and (orientation: portrait), |
380 (max-width: 736px) and (max-height: 420px) and (orientation: landscape) { | 379 (max-height: 736px) { |
381 body { | 380 body { |
382 margin: 0 auto; | 381 margin: 0 auto; |
383 } | 382 } |
384 | 383 |
385 button, | 384 button, |
386 [dir='rtl'] button, | 385 [dir='rtl'] button, |
387 button.small-link { | 386 button.small-link { |
388 font-family: Roboto-Regular,Helvetica; | 387 font-family: Roboto-Regular,Helvetica; |
389 font-size: .933em; | 388 font-size: .933em; |
390 font-weight: 600; | 389 font-weight: 600; |
(...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
429 font-size: 1.5em; | 428 font-size: 1.5em; |
430 margin-bottom: 8px; | 429 margin-bottom: 8px; |
431 } | 430 } |
432 | 431 |
433 .icon { | 432 .icon { |
434 margin-bottom: 12px; | 433 margin-bottom: 12px; |
435 } | 434 } |
436 | 435 |
437 .interstitial-wrapper { | 436 .interstitial-wrapper { |
438 box-sizing: border-box; | 437 box-sizing: border-box; |
439 margin: 24px auto 12px; | 438 margin: 7vh auto 12px; |
440 padding: 0 24px; | 439 padding: 0 24px; |
441 position: relative; | 440 position: relative; |
442 } | 441 } |
443 | 442 |
444 .interstitial-wrapper p { | 443 .interstitial-wrapper p { |
445 font-size: .95em; | 444 font-size: .95em; |
446 line-height: 1.61em; | 445 line-height: 1.61em; |
447 margin-top: 8px; | 446 margin-top: 8px; |
448 } | 447 } |
449 | 448 |
450 #main-content { | 449 #main-content { |
451 margin: 0; | 450 margin: 0; |
452 transition: opacity 100ms cubic-bezier(0.4, 0, 0.2, 1); | 451 transition: opacity 100ms cubic-bezier(0.4, 0, 0.2, 1); |
453 } | 452 } |
454 | 453 |
455 .small-link { | 454 .small-link { |
456 border: 0; | 455 border: 0; |
457 } | 456 } |
458 | 457 |
459 .suggested-left > #control-buttons, | 458 .suggested-left > #control-buttons, |
460 .suggested-right > #control-buttons { | 459 .suggested-right > #control-buttons { |
461 float: none; | 460 float: none; |
462 margin: 0; | 461 margin: 0; |
463 } | 462 } |
464 } | 463 } |
465 | 464 |
| 465 @media (min-width: 421px) and (min-height: 500px) and (max-height: 736px) { |
| 466 .interstitial-wrapper { |
| 467 margin-top: 10vh; |
| 468 } |
| 469 } |
| 470 |
466 @media (min-height: 400px) and (orientation:portrait) { | 471 @media (min-height: 400px) and (orientation:portrait) { |
467 .interstitial-wrapper { | 472 .interstitial-wrapper { |
468 margin-bottom: 145px; | 473 margin-bottom: 145px; |
469 } | 474 } |
470 } | 475 } |
471 | 476 |
472 @media (min-height: 299px) and (orientation:portrait) { | 477 @media (min-height: 299px) { |
473 .nav-wrapper { | 478 .nav-wrapper { |
474 padding-bottom: 16px; | 479 padding-bottom: 16px; |
475 } | 480 } |
476 } | 481 } |
477 | 482 |
478 @media (min-height: 405px) and (max-height: 736px) and | 483 @media (min-height: 500px) and (max-height: 650px) and (max-width: 414px) and |
479 (max-width: 420px) and (orientation:portrait) { | 484 (orientation: portrait) { |
480 .icon { | |
481 margin-bottom: 24px; | |
482 } | |
483 | |
484 .interstitial-wrapper { | 485 .interstitial-wrapper { |
485 margin-top: 64px; | 486 margin-top: 7vh; |
486 } | 487 } |
487 } | 488 } |
488 | 489 |
489 @media (min-height: 480px) and (max-width: 420px) and | 490 @media (min-height: 650px) and (max-width: 414px) and (orientation: portrait) { |
490 (max-height: 736px) and (orientation: portrait), | 491 .interstitial-wrapper { |
491 (min-height: 338px) and (max-height: 420px) and (max-width: 736px) and | 492 margin-top: 10vh; |
492 (orientation: landscape) { | |
493 .icon { | |
494 margin-bottom: 24px; | |
495 } | |
496 | |
497 .nav-wrapper { | |
498 padding-bottom: 24px; | |
499 } | 493 } |
500 } | 494 } |
501 | 495 |
502 @media (min-height: 500px) and (max-width: 414px) and (orientation: portrait) { | |
503 .interstitial-wrapper { | |
504 margin-top: 96px; | |
505 } | |
506 } | |
507 | |
508 /* Phablet sizing */ | |
509 @media (min-width: 375px) and (min-height: 641px) and (max-height: 736px) and | |
510 (max-width: 414px) and (orientation: portrait) { | |
511 button, | |
512 [dir='rtl'] button, | |
513 .small-link { | |
514 font-size: 1em; | |
515 padding-bottom: 12px; | |
516 padding-top: 12px; | |
517 } | |
518 | |
519 body:not(.offline) .icon { | |
520 height: 80px; | |
521 width: 80px; | |
522 } | |
523 | |
524 #details-button { | |
525 margin-top: 28px; | |
526 } | |
527 | |
528 h1 { | |
529 font-size: 1.7em; | |
530 } | |
531 | |
532 .icon { | |
533 margin-bottom: 28px; | |
534 } | |
535 | |
536 .interstitial-wrapper { | |
537 padding: 28px; | |
538 } | |
539 | |
540 .interstitial-wrapper p { | |
541 font-size: 1.05em; | |
542 } | |
543 | |
544 .nav-wrapper { | |
545 padding: 28px; | |
546 } | |
547 } | |
548 | |
549 @media (min-width: 420px) and (max-width: 736px) and | |
550 (min-height: 240px) and (max-height: 298px) and | |
551 (orientation:landscape) { | |
552 body:not(.offline) .icon { | |
553 height: 50px; | |
554 width: 50px; | |
555 } | |
556 | |
557 .icon { | |
558 padding-top: 0; | |
559 } | |
560 | |
561 .interstitial-wrapper { | |
562 margin-top: 16px; | |
563 } | |
564 | |
565 .nav-wrapper { | |
566 padding: 0 24px 8px; | |
567 } | |
568 } | |
569 | |
570 @media (min-width: 420px) and (max-width: 736px) and | |
571 (min-height: 240px) and (max-height: 420px) and | |
572 (orientation:landscape) { | |
573 #details-button { | |
574 margin: 0; | |
575 } | |
576 | |
577 .interstitial-wrapper { | |
578 margin-bottom: 70px; | |
579 } | |
580 | |
581 .nav-wrapper { | |
582 margin-top: 0; | |
583 } | |
584 | |
585 #extended-reporting-opt-in { | |
586 margin-top: 0; | |
587 } | |
588 } | |
589 | |
590 /* Phablet landscape */ | |
591 @media (min-width: 680px) and (max-height: 414px) { | |
592 .interstitial-wrapper { | |
593 margin: 24px auto; | |
594 } | |
595 | |
596 .nav-wrapper { | |
597 margin: 16px auto 0; | |
598 } | |
599 } | |
600 | |
601 @media (max-height: 240px) and (orientation: landscape), | |
602 (max-height: 480px) and (orientation: portrait), | |
603 (max-width: 419px) and (max-height: 323px) { | |
604 body:not(.offline) .icon { | |
605 height: 56px; | |
606 width: 56px; | |
607 } | |
608 | |
609 .icon { | |
610 margin-bottom: 16px; | |
611 } | |
612 } | |
613 | |
614 /* Small mobile screens. No fixed nav. */ | 496 /* Small mobile screens. No fixed nav. */ |
615 @media (max-height: 400px) and (orientation: portrait), | 497 @media (max-height: 400px) and (orientation: portrait), |
616 (max-height: 239px) and (orientation: landscape), | 498 (max-height: 239px) and (orientation: landscape), |
617 (max-width: 419px) and (max-height: 399px) { | 499 (max-width: 419px) and (max-height: 399px) { |
618 .interstitial-wrapper { | 500 .interstitial-wrapper { |
619 display: flex; | 501 display: flex; |
620 flex-direction: column; | 502 flex-direction: column; |
621 margin-bottom: 0; | 503 margin-bottom: 0; |
622 } | 504 } |
623 | 505 |
(...skipping 17 matching lines...) Expand all Loading... |
641 width: 100%; | 523 width: 100%; |
642 } | 524 } |
643 } | 525 } |
644 | 526 |
645 @media (max-width: 239px) and (orientation: portrait) { | 527 @media (max-width: 239px) and (orientation: portrait) { |
646 .nav-wrapper { | 528 .nav-wrapper { |
647 padding-left: 0; | 529 padding-left: 0; |
648 padding-right: 0; | 530 padding-right: 0; |
649 } | 531 } |
650 } | 532 } |
OLD | NEW |