| 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 45 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 846 color: #444; | 841 color: #444; |
| 847 font-size: 16px; | 842 font-size: 16px; |
| 848 margin-bottom: 30px; | 843 margin-bottom: 30px; |
| 849 } | 844 } |
| 850 | 845 |
| 851 #connect table { | 846 #connect table { |
| 852 margin: 7em auto; | 847 margin: 7em auto; |
| 853 } | 848 } |
| 854 | 849 |
| 855 /* TODO(nkostylev): Cleanup, security-info - old design, | 850 /* TODO(nkostylev): Cleanup, security-info - old design, |
| 856 security-tpm - new design. */ | 851 installation-settings - new design. */ |
| 857 #security-info { | 852 #security-info { |
| 858 bottom: 10px; | 853 bottom: 10px; |
| 859 left: 0; | 854 left: 0; |
| 860 position: absolute; | 855 position: absolute; |
| 861 text-align: center; | 856 text-align: center; |
| 862 visibility: hidden; | 857 visibility: hidden; |
| 863 width: 100%; | 858 width: 100%; |
| 864 z-index: 10; | 859 z-index: 10; |
| 865 } | 860 } |
| 866 | 861 |
| 867 #security-info a { | 862 #security-info a { |
| 868 color: #8c8c8c; | 863 color: #8c8c8c; |
| 869 font-size: 13px; | 864 font-size: 13px; |
| 870 } | 865 } |
| 871 | 866 |
| 872 #oobe.eula + #security-info { | 867 #oobe.eula + #security-info { |
| 873 visibility: visible; | 868 visibility: visible; |
| 874 } | 869 } |
| 875 | 870 |
| 876 html[oobe=new] #security-info { | 871 html[oobe=new] #security-info { |
| 877 display: none; | 872 display: none; |
| 878 } | 873 } |
| 879 | 874 |
| 880 /* TODO(nkostylev): Remove #security-tpm element and rules. */ | 875 /* TODO(nkostylev): Remove #security-info element and rules. */ |
| 881 html[oobe=old] #security-tpm { | 876 html[oobe=old] #installation-settings { |
| 882 display: none; | 877 display: none; |
| 883 } | 878 } |
| 884 | 879 |
| 885 #security-tpm a, | 880 #security-info a, |
| 886 #connect-accessibility a, | 881 #eula a, |
| 887 #eula-accessibility a, | 882 .step-extra-controls a { |
| 888 #update-accessibility a { | |
| 889 color: #8c8c8c; | 883 color: #8c8c8c; |
| 890 font-size: 12px; | 884 font-size: 12px; |
| 885 text-decoration: none; |
| 891 } | 886 } |
| 892 | 887 |
| 893 .step-extra-controls { | 888 .step-extra-controls { |
| 894 bottom: 26px; | 889 bottom: 26px; |
| 895 display: -webkit-box; | 890 display: -webkit-box; |
| 891 left: 49px; |
| 896 position: absolute; | 892 position: absolute; |
| 897 } | 893 } |
| 898 | 894 |
| 899 #security-tpm { | 895 .step-extra-controls > *:not(:first-child) { |
| 900 margin-left: 25px; | 896 -webkit-margin-start: 25px; |
| 901 } | 897 } |
| 902 | 898 |
| 903 #connect-accessibility, | |
| 904 #update-accessibility { | |
| 905 bottom: 26px; | |
| 906 position: absolute; | |
| 907 } | |
| 908 | |
| 909 html[dir=ltr] #connect-accessibility, | |
| 910 html[dir=ltr] #update-accessibility, | |
| 911 html[dir=ltr] .step-extra-controls { | |
| 912 left: 49px; | |
| 913 } | |
| 914 | |
| 915 html[dir=rtl] #connect-accessibility, | |
| 916 html[dir=rtl] #update-accessibility, | |
| 917 html[dir=rtl] .step-extra-controls { | 899 html[dir=rtl] .step-extra-controls { |
| 900 left: auto; |
| 918 right: 49px; | 901 right: 49px; |
| 919 } | 902 } |
| 920 | 903 |
| 921 html[oobe=old] #update div { | 904 html[oobe=old] #update div { |
| 922 width: 32em; | 905 width: 32em; |
| 923 } | 906 } |
| 924 | 907 |
| 925 html[oobe=old] #update div { | 908 html[oobe=old] #update div { |
| 926 margin: 6em auto; | 909 margin: 6em auto; |
| 927 } | 910 } |
| (...skipping 120 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 1048 } | 1031 } |
| 1049 | 1032 |
| 1050 #eulas.one-column #cros-eula-frame { | 1033 #eulas.one-column #cros-eula-frame { |
| 1051 width: 100%; | 1034 width: 100%; |
| 1052 } | 1035 } |
| 1053 | 1036 |
| 1054 #eulas.one-column #oem-eula { | 1037 #eulas.one-column #oem-eula { |
| 1055 display: none; | 1038 display: none; |
| 1056 } | 1039 } |
| 1057 | 1040 |
| 1058 #security-info-popup { | 1041 #installation-settings-popup { |
| 1059 background: white; | 1042 background: white; |
| 1060 border: 1px solid rgb(188, 193, 208); | 1043 border: 1px solid rgb(188, 193, 208); |
| 1061 border-radius: 2px; | 1044 border-radius: 2px; |
| 1062 box-shadow: 0 5px 80px #505050; | 1045 box-shadow: 0 5px 80px #505050; |
| 1063 min-height: 250px; | 1046 min-height: 250px; |
| 1064 position: relative; | 1047 position: relative; |
| 1065 width: 460px; | 1048 width: 460px; |
| 1066 z-index: 10; | 1049 z-index: 10; |
| 1067 } | 1050 } |
| 1068 | 1051 |
| 1069 #security-info-popup h1 { | 1052 #installation-settings-popup h1 { |
| 1070 -webkit-padding-end: 24px; | 1053 -webkit-padding-end: 24px; |
| 1071 -webkit-user-select: none; | 1054 -webkit-user-select: none; |
| 1072 background: -webkit-linear-gradient(white, #F8F8F8); | 1055 background: -webkit-linear-gradient(white, #F8F8F8); |
| 1073 color: rgb(83, 99, 125); | 1056 color: rgb(83, 99, 125); |
| 1074 font-size: 105%; | 1057 font-size: 105%; |
| 1075 font-weight: bold; | 1058 font-weight: bold; |
| 1076 margin: 0; | 1059 margin: 0; |
| 1077 padding: 10px 15px 8px 15px; | 1060 padding: 10px 15px 8px 15px; |
| 1078 text-shadow: white 0 1px 2px; | 1061 text-shadow: white 0 1px 2px; |
| 1079 } | 1062 } |
| 1080 | 1063 |
| 1081 .popup-content-area { | 1064 .popup-content-area { |
| 1082 padding: 0 20px 60px 20px; | 1065 padding: 0 20px 60px 20px; |
| 1083 } | 1066 } |
| 1084 | 1067 |
| 1085 #security-info-popup button { | 1068 #installation-settings-popup button { |
| 1086 bottom: 20px; | 1069 bottom: 20px; |
| 1087 position: absolute; | 1070 position: absolute; |
| 1088 right: 20px; | 1071 right: 20px; |
| 1089 } | 1072 } |
| 1090 | 1073 |
| 1091 #tpm-busy { | 1074 #tpm-busy { |
| 1092 text-align: center; | 1075 text-align: center; |
| 1093 } | 1076 } |
| 1094 | 1077 |
| 1095 #tpm-password { | 1078 #tpm-password { |
| 1096 font-weight: bold; | 1079 font-weight: bold; |
| 1097 text-align: center; | 1080 text-align: center; |
| 1098 } | 1081 } |
| 1099 | 1082 |
| 1083 html[rlz=disabled] #rlz-settings { |
| 1084 display: none; |
| 1085 } |
| 1086 |
| 1087 #rlz-enable { |
| 1088 -webkit-margin-end: 10px; |
| 1089 -webkit-margin-start: 20px; |
| 1090 } |
| 1091 |
| 1100 [hidden] { | 1092 [hidden] { |
| 1101 display: none !important; | 1093 display: none !important; |
| 1102 } | 1094 } |
| 1103 | 1095 |
| 1104 #popup-overlay { | 1096 #popup-overlay { |
| 1105 -webkit-box-align: center; | 1097 -webkit-box-align: center; |
| 1106 -webkit-box-pack: center; | 1098 -webkit-box-pack: center; |
| 1107 -webkit-transition: 250ms opacity; | 1099 -webkit-transition: 250ms opacity; |
| 1108 background: rgba(255, 255, 255, .75); | 1100 background: rgba(255, 255, 255, .75); |
| 1109 bottom: 0; | 1101 bottom: 0; |
| (...skipping 295 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 1405 width: 100%; | 1397 width: 100%; |
| 1406 } | 1398 } |
| 1407 | 1399 |
| 1408 .background-initial { | 1400 .background-initial { |
| 1409 opacity: 0; | 1401 opacity: 0; |
| 1410 } | 1402 } |
| 1411 | 1403 |
| 1412 .background-final { | 1404 .background-final { |
| 1413 opacity: 1; | 1405 opacity: 1; |
| 1414 } | 1406 } |
| OLD | NEW |