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 |