OLD | NEW |
1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved. | 1 /* Copyright (c) 2012 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 * This is the stylesheet used by the Out of the box experience (OOBE) flow, | 5 * This is the stylesheet used by the Out of the box experience (OOBE) flow, |
6 * sign in and lock screens. | 6 * sign in and lock screens. |
7 */ | 7 */ |
8 | 8 |
9 html, | 9 html, |
10 body { | 10 body { |
(...skipping 470 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
481 top: 14px; | 481 top: 14px; |
482 } | 482 } |
483 | 483 |
484 #user-image-preview { | 484 #user-image-preview { |
485 border-radius: 4px; | 485 border-radius: 4px; |
486 float: right; | 486 float: right; |
487 margin: 4px; | 487 margin: 4px; |
488 max-width: 220px; | 488 max-width: 220px; |
489 } | 489 } |
490 | 490 |
| 491 /** |
| 492 * #user-image-preview can have the following classes: |
| 493 * .default-image: one of the default images is selected (including the grey |
| 494 * silhouette); |
| 495 * .profile-image: profile image is selected; |
| 496 * .profile-image-loading: profile image is being loaded; |
| 497 * .online: camera is streaming video; |
| 498 * .camera: camera (live or photo) is selected; |
| 499 * .live: camera is in live mode (no photo taken yet/last photo removed). |
| 500 */ |
| 501 |
491 html[dir=rtl] #user-image-preview { | 502 html[dir=rtl] #user-image-preview { |
492 float: left; | 503 float: left; |
493 } | 504 } |
494 | 505 |
495 #user-image-preview-img { | 506 #user-image-preview-img { |
| 507 display: block; |
496 max-height: 220px; | 508 max-height: 220px; |
497 max-width: 220px; | 509 max-width: 220px; |
498 } | 510 } |
499 | 511 |
| 512 html[camera=webrtc] .camera.live #user-image-preview-img { |
| 513 display: none; |
| 514 } |
| 515 |
500 .default-image #user-image-preview-img { | 516 .default-image #user-image-preview-img { |
501 background: white; | 517 background: white; |
502 border: solid 1px #cacaca; | 518 border: solid 1px #cacaca; |
503 } | 519 } |
504 | 520 |
| 521 #user-image-stream-area { |
| 522 display: none; |
| 523 height: 220px; |
| 524 overflow: hidden; |
| 525 position: relative; |
| 526 width: 220px; |
| 527 } |
| 528 |
| 529 html[camera=webrtc] .camera.live #user-image-stream-area { |
| 530 display: block; |
| 531 } |
| 532 |
| 533 /* TODO(ivankr): specify dimensions from real capture size. */ |
| 534 #user-image-stream { |
| 535 border: solid 1px #cacaca; |
| 536 height: 220px; |
| 537 /* Center image for 4:3 aspect ratio. */ |
| 538 left: -16.6%; |
| 539 position: absolute; |
| 540 visibility: hidden; |
| 541 } |
| 542 |
| 543 .online #user-image-stream { |
| 544 visibility: visible; |
| 545 } |
| 546 |
| 547 #user-image-stream-area .spinner { |
| 548 -webkit-margin-before: 14px; |
| 549 -webkit-margin-start: 14px; |
| 550 display: none; |
| 551 position: absolute; |
| 552 } |
| 553 |
| 554 .camera.live:not(.online) #user-image-stream-area .spinner { |
| 555 display: block; |
| 556 } |
| 557 |
505 #user-image-preview-caption { | 558 #user-image-preview-caption { |
506 color: dimGray; | 559 color: dimGray; |
507 font-size: smaller; | 560 font-size: smaller; |
508 margin: 8px 4px; | 561 margin: 8px 4px; |
509 } | 562 } |
510 | 563 |
| 564 .camera #user-image-preview-caption { |
| 565 display: none; |
| 566 } |
| 567 |
| 568 #discard-photo, |
| 569 #take-photo { |
| 570 display: none; |
| 571 height: 25px; |
| 572 margin: 4px 1px; |
| 573 padding: 0; |
| 574 width: 220px; |
| 575 } |
| 576 |
| 577 html[camera=webrtc] .camera:not(.live) #discard-photo { |
| 578 background: url('chrome://theme/IDR_USER_IMAGE_RECYCLE') |
| 579 no-repeat center 0; |
| 580 display: block; |
| 581 } |
| 582 |
| 583 html[camera=webrtc] .camera.live.online #take-photo { |
| 584 background: url('chrome://theme/IDR_USER_IMAGE_CAPTURE') |
| 585 no-repeat center -1px; |
| 586 display: block; |
| 587 } |
| 588 |
511 /* TODO(nkostylev): Remove footer, button-strip styles. */ | 589 /* TODO(nkostylev): Remove footer, button-strip styles. */ |
512 #footer { | 590 #footer { |
513 height: 28px; /* Same as button height */ | 591 height: 28px; /* Same as button height */ |
514 } | 592 } |
515 | 593 |
516 #footer button { | 594 #footer button { |
517 display: none; | 595 display: none; |
518 height: 28px; | 596 height: 28px; |
519 } | 597 } |
520 | 598 |
(...skipping 535 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1056 } | 1134 } |
1057 | 1135 |
1058 #notification-area a { | 1136 #notification-area a { |
1059 color: rgb(37, 79, 155); | 1137 color: rgb(37, 79, 155); |
1060 } | 1138 } |
1061 | 1139 |
1062 #notification-area .butter-bar { | 1140 #notification-area .butter-bar { |
1063 margin: 0 auto; | 1141 margin: 0 auto; |
1064 max-width: 850px; | 1142 max-width: 850px; |
1065 } | 1143 } |
OLD | NEW |