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 120 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
131 | 131 |
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, | |
142 #security-tpm a, | |
143 #connect-accessibility a, | |
144 #eula-accessibility a, | |
145 #update-accessibility a, | |
146 #eula a { | |
147 color: rgb(0, 102, 104); | |
148 text-decoration: none; | |
149 } | |
150 | |
151 #eula #stats-help-link { | 141 #eula #stats-help-link { |
152 color: rgb(49, 106, 197); | 142 color: rgb(49, 106, 197); |
153 } | 143 } |
154 | 144 |
155 hr.shadow { | 145 hr.shadow { |
156 -webkit-mask: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), | 146 -webkit-mask: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), |
157 black 50%, rgba(0, 0, 0, 0)); | 147 black 50%, rgba(0, 0, 0, 0)); |
158 border: none; | 148 border: none; |
159 opacity: 0.3 | 149 opacity: 0.3 |
160 } | 150 } |
(...skipping 612 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
773 .animation .step-controls button { | 763 .animation .step-controls button { |
774 /* Don't grey out disabled buttons during animation. */ | 764 /* Don't grey out disabled buttons during animation. */ |
775 color: buttontext !important; | 765 color: buttontext !important; |
776 } | 766 } |
777 | 767 |
778 html[oobe=old] .step-controls { | 768 html[oobe=old] .step-controls { |
779 display: none; | 769 display: none; |
780 } | 770 } |
781 | 771 |
782 .step.loading .step-contents, | 772 .step.loading .step-contents, |
783 .step.loading .step-controls { | 773 .step.loading .step-controls, |
| 774 .step.loading .step-extra-controls { |
784 visibility: hidden; | 775 visibility: hidden; |
785 } | 776 } |
786 | 777 |
787 .step:not(.loading) #user-images-loading { | 778 .step:not(.loading) #user-images-loading { |
788 visibility: hidden; | 779 visibility: hidden; |
789 } | 780 } |
790 | 781 |
| 782 .step:not(.loading) #eula-busy { |
| 783 visibility: hidden; |
| 784 } |
| 785 |
791 /* Center spinner wrapper vertically and horizontally. | 786 /* Center spinner wrapper vertically and horizontally. |
792 * Vertical centering uses top: 50% and negative margin | 787 * Vertical centering uses top: 50% and negative margin |
793 * instead of top: 0; bottom: 0 due to http://crbug.com/155320. | 788 * instead of top: 0; bottom: 0 due to http://crbug.com/155320. |
794 */ | 789 */ |
795 .step-loading { | 790 .step-loading { |
796 -webkit-box-align: center; | 791 -webkit-box-align: center; |
797 -webkit-box-pack: center; | 792 -webkit-box-pack: center; |
798 display: -webkit-box; | 793 display: -webkit-box; |
799 left: 0; | 794 left: 0; |
800 margin-top: -16px; | 795 margin-top: -16px; |
(...skipping 46 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
847 color: #444; | 842 color: #444; |
848 font-size: 16px; | 843 font-size: 16px; |
849 margin-bottom: 30px; | 844 margin-bottom: 30px; |
850 } | 845 } |
851 | 846 |
852 #connect table { | 847 #connect table { |
853 margin: 7em auto; | 848 margin: 7em auto; |
854 } | 849 } |
855 | 850 |
856 /* TODO(nkostylev): Cleanup, security-info - old design, | 851 /* TODO(nkostylev): Cleanup, security-info - old design, |
857 security-tpm - new design. */ | 852 installation-settings - new design. */ |
858 #security-info { | 853 #security-info { |
859 bottom: 10px; | 854 bottom: 10px; |
860 left: 0; | 855 left: 0; |
861 position: absolute; | 856 position: absolute; |
862 text-align: center; | 857 text-align: center; |
863 visibility: hidden; | 858 visibility: hidden; |
864 width: 100%; | 859 width: 100%; |
865 z-index: 10; | 860 z-index: 10; |
866 } | 861 } |
867 | 862 |
868 #security-info a { | 863 #security-info a { |
869 color: #8c8c8c; | 864 color: #8c8c8c; |
870 font-size: 13px; | 865 font-size: 13px; |
871 } | 866 } |
872 | 867 |
873 #oobe.eula + #security-info { | 868 #oobe.eula + #security-info { |
874 visibility: visible; | 869 visibility: visible; |
875 } | 870 } |
876 | 871 |
877 html[oobe=new] #security-info { | 872 html[oobe=new] #security-info { |
878 display: none; | 873 display: none; |
879 } | 874 } |
880 | 875 |
881 /* TODO(nkostylev): Remove #security-tpm element and rules. */ | 876 /* TODO(nkostylev): Remove #security-info element and rules. */ |
882 html[oobe=old] #security-tpm { | 877 html[oobe=old] #installation-settings { |
883 display: none; | 878 display: none; |
884 } | 879 } |
885 | 880 |
886 #security-tpm a, | 881 #security-info a, |
887 #connect-accessibility a, | 882 #eula a, |
888 #eula-accessibility a, | 883 .step-extra-controls a { |
889 #update-accessibility a { | |
890 color: #8c8c8c; | 884 color: #8c8c8c; |
891 font-size: 12px; | 885 font-size: 12px; |
| 886 text-decoration: none; |
892 } | 887 } |
893 | 888 |
894 .step-extra-controls { | 889 .step-extra-controls { |
895 bottom: 26px; | 890 bottom: 26px; |
896 display: -webkit-box; | 891 display: -webkit-box; |
| 892 left: 49px; |
897 position: absolute; | 893 position: absolute; |
898 } | 894 } |
899 | 895 |
900 #security-tpm { | 896 .step-extra-controls > *:not(:first-child) { |
901 margin-left: 25px; | 897 -webkit-margin-start: 25px; |
902 } | 898 } |
903 | 899 |
904 #connect-accessibility, | |
905 #update-accessibility { | |
906 bottom: 26px; | |
907 position: absolute; | |
908 } | |
909 | |
910 html[dir=ltr] #connect-accessibility, | |
911 html[dir=ltr] #update-accessibility, | |
912 html[dir=ltr] .step-extra-controls { | |
913 left: 49px; | |
914 } | |
915 | |
916 html[dir=rtl] #connect-accessibility, | |
917 html[dir=rtl] #update-accessibility, | |
918 html[dir=rtl] .step-extra-controls { | 900 html[dir=rtl] .step-extra-controls { |
| 901 left: auto; |
919 right: 49px; | 902 right: 49px; |
920 } | 903 } |
921 | 904 |
922 html[oobe=old] #update div { | 905 html[oobe=old] #update div { |
923 width: 32em; | 906 width: 32em; |
924 } | 907 } |
925 | 908 |
926 html[oobe=old] #update div { | 909 html[oobe=old] #update div { |
927 margin: 6em auto; | 910 margin: 6em auto; |
928 } | 911 } |
(...skipping 120 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1049 } | 1032 } |
1050 | 1033 |
1051 #eulas.one-column #cros-eula-frame { | 1034 #eulas.one-column #cros-eula-frame { |
1052 width: 100%; | 1035 width: 100%; |
1053 } | 1036 } |
1054 | 1037 |
1055 #eulas.one-column #oem-eula { | 1038 #eulas.one-column #oem-eula { |
1056 display: none; | 1039 display: none; |
1057 } | 1040 } |
1058 | 1041 |
1059 #security-info-popup { | 1042 #installation-settings-popup { |
1060 background: white; | 1043 background: white; |
1061 border: 1px solid rgb(188, 193, 208); | 1044 border: 1px solid rgb(188, 193, 208); |
1062 border-radius: 2px; | 1045 border-radius: 2px; |
1063 box-shadow: 0 5px 80px #505050; | 1046 box-shadow: 0 5px 80px #505050; |
1064 min-height: 250px; | 1047 min-height: 250px; |
1065 position: relative; | 1048 position: relative; |
1066 width: 460px; | 1049 width: 460px; |
1067 z-index: 10; | 1050 z-index: 10; |
1068 } | 1051 } |
1069 | 1052 |
1070 #security-info-popup h1 { | 1053 #installation-settings-popup h1 { |
1071 -webkit-padding-end: 24px; | 1054 -webkit-padding-end: 24px; |
1072 -webkit-user-select: none; | 1055 -webkit-user-select: none; |
1073 background: -webkit-linear-gradient(white, #F8F8F8); | 1056 background: -webkit-linear-gradient(white, #F8F8F8); |
1074 color: rgb(83, 99, 125); | 1057 color: rgb(83, 99, 125); |
1075 font-size: 105%; | 1058 font-size: 105%; |
1076 font-weight: bold; | 1059 font-weight: bold; |
1077 margin: 0; | 1060 margin: 0; |
1078 padding: 10px 15px 8px 15px; | 1061 padding: 10px 15px 8px 15px; |
1079 text-shadow: white 0 1px 2px; | 1062 text-shadow: white 0 1px 2px; |
1080 } | 1063 } |
1081 | 1064 |
1082 .popup-content-area { | 1065 .popup-content-area { |
1083 padding: 0 20px 60px 20px; | 1066 padding: 0 20px 60px 20px; |
1084 } | 1067 } |
1085 | 1068 |
1086 #security-info-popup button { | 1069 #installation-settings-popup button { |
1087 bottom: 20px; | 1070 bottom: 20px; |
1088 position: absolute; | 1071 position: absolute; |
1089 right: 20px; | 1072 right: 20px; |
1090 } | 1073 } |
1091 | 1074 |
1092 #tpm-busy { | 1075 #tpm-busy { |
1093 text-align: center; | 1076 text-align: center; |
1094 } | 1077 } |
1095 | 1078 |
1096 #tpm-password { | 1079 #tpm-password { |
1097 font-weight: bold; | 1080 font-weight: bold; |
1098 text-align: center; | 1081 text-align: center; |
1099 } | 1082 } |
1100 | 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 |
1101 [hidden] { | 1093 [hidden] { |
1102 display: none !important; | 1094 display: none !important; |
1103 } | 1095 } |
1104 | 1096 |
1105 #popup-overlay { | 1097 #popup-overlay { |
1106 -webkit-box-align: center; | 1098 -webkit-box-align: center; |
1107 -webkit-box-pack: center; | 1099 -webkit-box-pack: center; |
1108 -webkit-transition: 250ms opacity; | 1100 -webkit-transition: 250ms opacity; |
1109 background: rgba(255, 255, 255, .75); | 1101 background: rgba(255, 255, 255, .75); |
1110 bottom: 0; | 1102 bottom: 0; |
(...skipping 295 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1406 width: 100%; | 1398 width: 100%; |
1407 } | 1399 } |
1408 | 1400 |
1409 .background-initial { | 1401 .background-initial { |
1410 opacity: 0; | 1402 opacity: 0; |
1411 } | 1403 } |
1412 | 1404 |
1413 .background-final { | 1405 .background-final { |
1414 opacity: 1; | 1406 opacity: 1; |
1415 } | 1407 } |
OLD | NEW |