| OLD | NEW |
| 1 /* Copyright (c) 2011 The Chromium Authors. All rights reserved. | 1 /* Copyright (c) 2011 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 */ | 6 */ |
| 7 | 7 |
| 8 html, | 8 html, |
| 9 body { | 9 body { |
| 10 height: 100%; | 10 height: 100%; |
| (...skipping 22 matching lines...) Expand all Loading... |
| 33 position: absolute; | 33 position: absolute; |
| 34 right: 0; | 34 right: 0; |
| 35 top: 40px; /* Leave space for the header bar */ | 35 top: 40px; /* Leave space for the header bar */ |
| 36 } | 36 } |
| 37 | 37 |
| 38 #oobe { | 38 #oobe { |
| 39 margin-bottom: 140px; /* Make content higher than absolute vertical center */ | 39 margin-bottom: 140px; /* Make content higher than absolute vertical center */ |
| 40 } | 40 } |
| 41 | 41 |
| 42 #inner-container { | 42 #inner-container { |
| 43 -webkit-transition: height .2s ease-in-out; | 43 -webkit-transition: height 200ms ease-in-out; |
| 44 height: 294px; | 44 height: 294px; |
| 45 padding: 20px; | 45 padding: 20px; |
| 46 position: relative; | 46 position: relative; |
| 47 width: 640px; | 47 width: 640px; |
| 48 } | 48 } |
| 49 | 49 |
| 50 #security-info a, | 50 #security-info a, |
| 51 #eula a { | 51 #eula a { |
| 52 color: #006668; | 52 color: #006668; |
| 53 text-decoration: none; | 53 text-decoration: none; |
| (...skipping 55 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 109 position: relative; | 109 position: relative; |
| 110 } | 110 } |
| 111 | 111 |
| 112 .header-section:before { | 112 .header-section:before { |
| 113 /* Divider in header between product name and title, | 113 /* Divider in header between product name and title, |
| 114 like "[Product name] > [step header]" */ | 114 like "[Product name] > [step header]" */ |
| 115 content: "\00A0\203A\00A0\00A0"; | 115 content: "\00A0\203A\00A0\00A0"; |
| 116 } | 116 } |
| 117 | 117 |
| 118 .header-section { | 118 .header-section { |
| 119 -webkit-transition: left .2s, opacity .2s ease-in-out; | 119 -webkit-transition: left 200ms, opacity 200ms ease-in-out; |
| 120 position: absolute; | 120 position: absolute; |
| 121 text-transform: lowercase; | 121 text-transform: lowercase; |
| 122 width: 20em; | 122 width: 20em; |
| 123 } | 123 } |
| 124 | 124 |
| 125 html[dir=rtl] .header-section { | 125 html[dir=rtl] .header-section { |
| 126 -webkit-transition: right .2s, opacity .2s ease-in-out; | 126 -webkit-transition: right 200ms, opacity 200ms ease-in-out; |
| 127 } | 127 } |
| 128 | 128 |
| 129 .header-section.right { | 129 .header-section.right { |
| 130 left: 50px; | 130 left: 50px; |
| 131 } | 131 } |
| 132 | 132 |
| 133 .header-section.left { | 133 .header-section.left { |
| 134 left: -20px; | 134 left: -20px; |
| 135 } | 135 } |
| 136 | 136 |
| 137 html[dir=rtl] .header-section.right { | 137 html[dir=rtl] .header-section.right { |
| 138 right: 50px; | 138 right: 50px; |
| 139 } | 139 } |
| 140 | 140 |
| 141 html[dir=rtl] .header-section.left { | 141 html[dir=rtl] .header-section.left { |
| 142 right: -20px; | 142 right: -20px; |
| 143 } | 143 } |
| 144 | 144 |
| 145 .step { | 145 .step { |
| 146 min-height: 294px; | 146 min-height: 294px; |
| 147 opacity: 1; | 147 opacity: 1; |
| 148 position: absolute; | 148 position: absolute; |
| 149 width: 640px; | 149 width: 640px; |
| 150 } | 150 } |
| 151 | 151 |
| 152 html[dir=ltr] .step { | 152 html[dir=ltr] .step { |
| 153 -webkit-transition: left .2s, opacity .2s, visibility .2s ease-in-out; | 153 -webkit-transition: left 200ms, opacity 200ms, visibility 200ms ease-in-out; |
| 154 left: 0; | 154 left: 0; |
| 155 } | 155 } |
| 156 | 156 |
| 157 html[dir=rtl] .step { | 157 html[dir=rtl] .step { |
| 158 -webkit-transition: right .2s, opacity .2s, visibility .2s ease-in-out; | 158 -webkit-transition: right 200ms, opacity 200ms, visibility 200ms ease-in-out; |
| 159 right: 0; | 159 right: 0; |
| 160 } | 160 } |
| 161 | 161 |
| 162 .step.right { | 162 .step.right { |
| 163 left: 100px; | 163 left: 100px; |
| 164 } | 164 } |
| 165 | 165 |
| 166 .step.left { | 166 .step.left { |
| 167 left: -50px; | 167 left: -50px; |
| 168 } | 168 } |
| (...skipping 337 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 506 text-align: center; | 506 text-align: center; |
| 507 } | 507 } |
| 508 | 508 |
| 509 [hidden] { | 509 [hidden] { |
| 510 display: none !important; | 510 display: none !important; |
| 511 } | 511 } |
| 512 | 512 |
| 513 #popup-overlay { | 513 #popup-overlay { |
| 514 -webkit-box-align: center; | 514 -webkit-box-align: center; |
| 515 -webkit-box-pack: center; | 515 -webkit-box-pack: center; |
| 516 -webkit-transition: 0.25s opacity; | 516 -webkit-transition: 250ms opacity; |
| 517 background: rgba(255, 255, 255, .75); | 517 background: rgba(255, 255, 255, .75); |
| 518 bottom: 0; | 518 bottom: 0; |
| 519 display: -webkit-box; | 519 display: -webkit-box; |
| 520 left: 0; | 520 left: 0; |
| 521 padding-bottom: 130px; | 521 padding-bottom: 130px; |
| 522 padding: 20px; | 522 padding: 20px; |
| 523 position: fixed; | 523 position: fixed; |
| 524 right: 0; | 524 right: 0; |
| 525 top: 0; | 525 top: 0; |
| 526 z-index: 5; | 526 z-index: 5; |
| (...skipping 125 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 652 color: -webkit-link; | 652 color: -webkit-link; |
| 653 cursor: pointer; | 653 cursor: pointer; |
| 654 text-decoration: underline; | 654 text-decoration: underline; |
| 655 } | 655 } |
| 656 | 656 |
| 657 #close-button.visible { | 657 #close-button.visible { |
| 658 display: inline-block; | 658 display: inline-block; |
| 659 } | 659 } |
| 660 | 660 |
| 661 #bubble { | 661 #bubble { |
| 662 -webkit-transition: 0.25s opacity; | 662 -webkit-transition: 250ms opacity; |
| 663 } | 663 } |
| 664 | 664 |
| 665 html[dir=rtl] #header { | 665 html[dir=rtl] #header { |
| 666 background-position: right center; | 666 background-position: right center; |
| 667 } | 667 } |
| 668 | 668 |
| 669 body.login-display #oobe hr.shadow { | 669 body.login-display #oobe hr.shadow { |
| 670 -webkit-transition: all .8s ease; | 670 -webkit-transition: all 800ms ease; |
| 671 width: 1100px; /* Necessary. Otherwise hr shrinks to 0 first when switching | 671 width: 1100px; /* Necessary. Otherwise hr shrinks to 0 first when switching |
| 672 from 640px to full width. */ | 672 from 640px to full width. */ |
| 673 } | 673 } |
| 674 | 674 |
| 675 body.login-display #oobe.signin hr, | 675 body.login-display #oobe.signin hr, |
| 676 body.login-display #oobe.gaia-signin hr { | 676 body.login-display #oobe.gaia-signin hr { |
| 677 opacity: 0; | 677 opacity: 0; |
| 678 } | 678 } |
| 679 | 679 |
| 680 body.login-display #inner-container { | 680 body.login-display #inner-container { |
| (...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 714 | 714 |
| 715 .error-message-padding { | 715 .error-message-padding { |
| 716 margin-bottom: 10px; | 716 margin-bottom: 10px; |
| 717 } | 717 } |
| 718 | 718 |
| 719 html[dir=rtl] .error-message { | 719 html[dir=rtl] .error-message { |
| 720 background-position: right top; | 720 background-position: right top; |
| 721 } | 721 } |
| 722 | 722 |
| 723 #version-labels { | 723 #version-labels { |
| 724 -webkit-transition: all .5s linear; | 724 -webkit-transition: all 500ms linear; |
| 725 bottom: 10px; | 725 bottom: 10px; |
| 726 color: #999; | 726 color: #999; |
| 727 font-size: 11px; | 727 font-size: 11px; |
| 728 left: 10px; | 728 left: 10px; |
| 729 opacity: 1.0; | 729 opacity: 1.0; |
| 730 position: absolute; | 730 position: absolute; |
| 731 right: 10px; | 731 right: 10px; |
| 732 text-shadow: 0 1px 1px #fff; | 732 text-shadow: 0 1px 1px #fff; |
| 733 } | 733 } |
| 734 | 734 |
| 735 #offline-network-control { | 735 #offline-network-control { |
| 736 margin-left: 60px; | 736 margin-left: 60px; |
| 737 } | 737 } |
| OLD | NEW |