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 121 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
132 /* Only play this animation when 'down' class is removed. */ | 132 /* Only play this animation when 'down' class is removed. */ |
133 html[oobe=new] #inner-container:not(.down) { | 133 html[oobe=new] #inner-container:not(.down) { |
134 -webkit-transition: -webkit-transform 200ms ease-in-out; | 134 -webkit-transition: -webkit-transform 200ms ease-in-out; |
135 } | 135 } |
136 | 136 |
137 html[oobe=new] #inner-container.down { | 137 html[oobe=new] #inner-container.down { |
138 -webkit-transform: translateY(50px) rotateX(-2.5deg); | 138 -webkit-transform: translateY(50px) rotateX(-2.5deg); |
139 } | 139 } |
140 | 140 |
141 #security-info a, | 141 #security-info a, |
142 #security-tpm a, | 142 #installation-settings a, |
143 #eula a { | 143 #eula a { |
144 color: rgb(0, 102, 104); | 144 color: rgb(0, 102, 104); |
145 text-decoration: none; | 145 text-decoration: none; |
146 } | 146 } |
147 | 147 |
148 #eula #stats-help-link { | 148 #eula #stats-help-link { |
149 color: rgb(49, 106, 197); | 149 color: rgb(49, 106, 197); |
150 } | 150 } |
151 | 151 |
152 hr.shadow { | 152 hr.shadow { |
(...skipping 617 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
770 .animation .step-controls button { | 770 .animation .step-controls button { |
771 /* Don't grey out disabled buttons during animation. */ | 771 /* Don't grey out disabled buttons during animation. */ |
772 color: buttontext !important; | 772 color: buttontext !important; |
773 } | 773 } |
774 | 774 |
775 html[oobe=old] .step-controls { | 775 html[oobe=old] .step-controls { |
776 display: none; | 776 display: none; |
777 } | 777 } |
778 | 778 |
779 .step.loading .step-contents, | 779 .step.loading .step-contents, |
780 .step.loading .step-controls { | 780 .step.loading .step-controls, |
| 781 .step.loading .step-links { |
781 visibility: hidden; | 782 visibility: hidden; |
782 } | 783 } |
783 | 784 |
784 .step:not(.loading) #user-images-loading { | 785 .step:not(.loading) #user-images-loading { |
785 visibility: hidden; | 786 visibility: hidden; |
786 } | 787 } |
787 | 788 |
| 789 .step:not(.loading) #eula-busy { |
| 790 visibility: hidden; |
| 791 } |
| 792 |
788 /* Center spinner wrapper vertically and horizontally. | 793 /* Center spinner wrapper vertically and horizontally. |
789 * Vertical centering uses top: 50% and negative margin | 794 * Vertical centering uses top: 50% and negative margin |
790 * instead of top: 0; bottom: 0 due to http://crbug.com/155320. | 795 * instead of top: 0; bottom: 0 due to http://crbug.com/155320. |
791 */ | 796 */ |
792 .step-loading { | 797 .step-loading { |
793 -webkit-box-align: center; | 798 -webkit-box-align: center; |
794 -webkit-box-pack: center; | 799 -webkit-box-pack: center; |
795 display: -webkit-box; | 800 display: -webkit-box; |
796 left: 0; | 801 left: 0; |
797 margin-top: -16px; | 802 margin-top: -16px; |
(...skipping 45 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
843 color: #444; | 848 color: #444; |
844 font-size: 16px; | 849 font-size: 16px; |
845 margin-bottom: 30px; | 850 margin-bottom: 30px; |
846 } | 851 } |
847 | 852 |
848 #connect table { | 853 #connect table { |
849 margin: 7em auto; | 854 margin: 7em auto; |
850 } | 855 } |
851 | 856 |
852 /* TODO(nkostylev): Cleanup, security-info - old design, | 857 /* TODO(nkostylev): Cleanup, security-info - old design, |
853 security-tpm - new design. */ | 858 installation-settings - new design. */ |
854 #security-info { | 859 #security-info { |
855 bottom: 10px; | 860 bottom: 10px; |
856 left: 0; | 861 left: 0; |
857 position: absolute; | 862 position: absolute; |
858 text-align: center; | 863 text-align: center; |
859 visibility: hidden; | 864 visibility: hidden; |
860 width: 100%; | 865 width: 100%; |
861 z-index: 10; | 866 z-index: 10; |
862 } | 867 } |
863 | 868 |
864 #security-info a { | 869 #security-info a { |
865 color: #8c8c8c; | 870 color: #8c8c8c; |
866 font-size: 13px; | 871 font-size: 13px; |
867 } | 872 } |
868 | 873 |
869 #oobe.eula + #security-info { | 874 #oobe.eula + #security-info { |
870 visibility: visible; | 875 visibility: visible; |
871 } | 876 } |
872 | 877 |
873 html[oobe=new] #security-info { | 878 html[oobe=new] #security-info { |
874 display: none; | 879 display: none; |
875 } | 880 } |
876 | 881 |
877 /* TODO(nkostylev): Remove #security-tpm element and rules. */ | 882 /* TODO(nkostylev): Remove #security-info element and rules. */ |
878 html[oobe=old] #security-tpm { | 883 html[oobe=old] #installation-settings { |
879 display: none; | 884 display: none; |
880 } | 885 } |
881 | 886 |
882 #security-tpm a { | 887 #installation-settings a { |
883 color: #8c8c8c; | 888 color: #8c8c8c; |
884 font-size: 12px; | 889 font-size: 12px; |
885 } | 890 } |
886 | 891 |
887 #security-tpm { | 892 #installation-settings { |
888 bottom: 21px; | 893 bottom: 21px; |
889 position: absolute; | 894 position: absolute; |
890 } | 895 } |
891 | 896 |
892 html[dir=ltr] #security-tpm { | 897 html[dir=ltr] #installation-settings { |
893 left: 49px; | 898 left: 49px; |
894 } | 899 } |
895 | 900 |
896 html[dir=rtl] #security-tpm { | 901 html[dir=rtl] #installation-settings { |
897 right: 49px; | 902 right: 49px; |
898 } | 903 } |
899 | 904 |
900 html[oobe=old] #update div { | 905 html[oobe=old] #update div { |
901 width: 32em; | 906 width: 32em; |
902 } | 907 } |
903 | 908 |
904 html[oobe=old] #update div { | 909 html[oobe=old] #update div { |
905 margin: 6em auto; | 910 margin: 6em auto; |
906 } | 911 } |
(...skipping 120 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1027 } | 1032 } |
1028 | 1033 |
1029 #eulas.one-column #cros-eula-frame { | 1034 #eulas.one-column #cros-eula-frame { |
1030 width: 100%; | 1035 width: 100%; |
1031 } | 1036 } |
1032 | 1037 |
1033 #eulas.one-column #oem-eula { | 1038 #eulas.one-column #oem-eula { |
1034 display: none; | 1039 display: none; |
1035 } | 1040 } |
1036 | 1041 |
1037 #security-info-popup { | 1042 #installation-settings-popup { |
1038 background: white; | 1043 background: white; |
1039 border: 1px solid rgb(188, 193, 208); | 1044 border: 1px solid rgb(188, 193, 208); |
1040 border-radius: 2px; | 1045 border-radius: 2px; |
1041 box-shadow: 0 5px 80px #505050; | 1046 box-shadow: 0 5px 80px #505050; |
1042 min-height: 250px; | 1047 min-height: 250px; |
1043 position: relative; | 1048 position: relative; |
1044 width: 460px; | 1049 width: 460px; |
1045 z-index: 10; | 1050 z-index: 10; |
1046 } | 1051 } |
1047 | 1052 |
1048 #security-info-popup h1 { | 1053 #installation-settings-popup h1 { |
1049 -webkit-padding-end: 24px; | 1054 -webkit-padding-end: 24px; |
1050 -webkit-user-select: none; | 1055 -webkit-user-select: none; |
1051 background: -webkit-linear-gradient(white, #F8F8F8); | 1056 background: -webkit-linear-gradient(white, #F8F8F8); |
1052 color: rgb(83, 99, 125); | 1057 color: rgb(83, 99, 125); |
1053 font-size: 105%; | 1058 font-size: 105%; |
1054 font-weight: bold; | 1059 font-weight: bold; |
1055 margin: 0; | 1060 margin: 0; |
1056 padding: 10px 15px 8px 15px; | 1061 padding: 10px 15px 8px 15px; |
1057 text-shadow: white 0 1px 2px; | 1062 text-shadow: white 0 1px 2px; |
1058 } | 1063 } |
1059 | 1064 |
1060 .popup-content-area { | 1065 .popup-content-area { |
1061 padding: 0 20px 60px 20px; | 1066 padding: 0 20px 60px 20px; |
1062 } | 1067 } |
1063 | 1068 |
1064 #security-info-popup button { | 1069 #installation-settings-popup button { |
1065 bottom: 20px; | 1070 bottom: 20px; |
1066 position: absolute; | 1071 position: absolute; |
1067 right: 20px; | 1072 right: 20px; |
1068 } | 1073 } |
1069 | 1074 |
1070 #tpm-busy { | 1075 #tpm-busy { |
1071 text-align: center; | 1076 text-align: center; |
1072 } | 1077 } |
1073 | 1078 |
1074 #tpm-password { | 1079 #tpm-password { |
1075 font-weight: bold; | 1080 font-weight: bold; |
1076 text-align: center; | 1081 text-align: center; |
1077 } | 1082 } |
1078 | 1083 |
| 1084 html[rlz=disabled] #rlz-settings { |
| 1085 display: none; |
| 1086 } |
| 1087 |
| 1088 #rlz-enable { |
| 1089 -webkit-margin-end: 10px; |
| 1090 -webkit-margin-start: 20px; |
| 1091 } |
| 1092 |
1079 [hidden] { | 1093 [hidden] { |
1080 display: none !important; | 1094 display: none !important; |
1081 } | 1095 } |
1082 | 1096 |
1083 #popup-overlay { | 1097 #popup-overlay { |
1084 -webkit-box-align: center; | 1098 -webkit-box-align: center; |
1085 -webkit-box-pack: center; | 1099 -webkit-box-pack: center; |
1086 -webkit-transition: 250ms opacity; | 1100 -webkit-transition: 250ms opacity; |
1087 background: rgba(255, 255, 255, .75); | 1101 background: rgba(255, 255, 255, .75); |
1088 bottom: 0; | 1102 bottom: 0; |
(...skipping 295 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1384 width: 100%; | 1398 width: 100%; |
1385 } | 1399 } |
1386 | 1400 |
1387 .background-initial { | 1401 .background-initial { |
1388 opacity: 0; | 1402 opacity: 0; |
1389 } | 1403 } |
1390 | 1404 |
1391 .background-final { | 1405 .background-final { |
1392 opacity: 1; | 1406 opacity: 1; |
1393 } | 1407 } |
OLD | NEW |