OLD | NEW |
1 /* Copyright 2016 The Chromium Authors. All rights reserved. | 1 /* Copyright 2016 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 body { | 5 body { |
| 6 align-items: center; |
6 box-sizing: border-box; | 7 box-sizing: border-box; |
7 color: var(--paper-grey-900); | 8 color: var(--paper-grey-900); |
8 display: flex; | 9 display: flex; |
9 flex-direction: column; | 10 flex-direction: column; |
10 font-size: 100%; | 11 font-size: 100%; |
11 justify-content: center; | 12 justify-content: center; |
12 margin: 0; | 13 margin: 0; |
13 min-height: 100vh; | 14 min-height: 100vh; |
14 } | 15 } |
15 | |
16 a { | |
17 color: var(--google-blue-500); | |
18 cursor: pointer; | |
19 text-decoration: none; | |
20 } | |
21 | |
22 ol { | |
23 margin: 0; | |
24 padding: 0; | |
25 } | |
26 | |
27 strong { | |
28 font-weight: 500; | |
29 } | |
30 | |
31 .content { | |
32 margin: 0 auto; | |
33 padding: 4em 1.5em 1.5em 1.5em; | |
34 } | |
35 | |
36 .header-logo { | |
37 content: url(chrome://welcome-win10/logo-large.png); | |
38 height: 4em; | |
39 } | |
40 | |
41 .heading { | |
42 font-size: 2.125em; | |
43 padding-bottom: 2rem; | |
44 padding-top: 1rem; | |
45 } | |
46 | |
47 .sections { | |
48 margin-bottom: 2em; | |
49 } | |
50 | |
51 .section.expandable { | |
52 border-top: 1px solid var(--google-grey-300); | |
53 } | |
54 | |
55 .section.expandable:last-child { | |
56 border-bottom: 1px solid var(--google-grey-300); | |
57 } | |
58 | |
59 .section.expandable .section-heading { | |
60 color: var(--google-blue-500); | |
61 cursor: pointer; | |
62 } | |
63 | |
64 .section-heading { | |
65 align-items: center; | |
66 display: flex; | |
67 padding: 1.5em 0; | |
68 } | |
69 | |
70 .section-heading-text { | |
71 flex: 1; | |
72 font-weight: 500; | |
73 } | |
74 | |
75 .section.expandable .section-heading-text { | |
76 font-weight: normal; | |
77 } | |
78 | |
79 .section.expandable.expanded .section-heading-text { | |
80 font-weight: 500; | |
81 } | |
82 | |
83 .section-heading-expand { | |
84 height: 1.25em; | |
85 transition: transform 150ms cubic-bezier(.4, .2, 0, 1) 50ms; | |
86 width: 1.25em; | |
87 } | |
88 | |
89 .section.expandable.expanded .section-heading-expand { | |
90 transform: rotate(180deg); | |
91 transition-delay: 150ms; | |
92 } | |
93 | |
94 .section-steps { | |
95 overflow: hidden; | |
96 } | |
97 | |
98 .section-steps li { | |
99 -webkit-margin-start: 1.25em; | |
100 -webkit-padding-start: 1em; | |
101 margin-bottom: 1em; | |
102 } | |
103 | |
104 .section-steps li:last-child { | |
105 margin-bottom: 1em; | |
106 } | |
107 | |
108 .section.expandable .section-steps { | |
109 max-height: 0; | |
110 opacity: 0; | |
111 transition: max-height 300ms cubic-bezier(.4, .2, 0, 1) 50ms, opacity 150ms; | |
112 visibility: hidden; | |
113 } | |
114 | |
115 .section.expandable.expanded .section-steps { | |
116 max-height: 28.75em; | |
117 opacity: 1; | |
118 transition: max-height 300ms cubic-bezier(.4, .2, 0, 1) 50ms, | |
119 opacity 150ms 250ms; | |
120 visibility: visible; | |
121 } | |
122 | |
123 .button { | |
124 -webkit-font-smoothing: antialiased; | |
125 background: var(--google-blue-500); | |
126 border-radius: 2px; | |
127 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); | |
128 color: #fff; | |
129 display: inline-block; | |
130 font-size: .8125em; | |
131 font-weight: 500; | |
132 line-height: 2.25rem; | |
133 padding: 0 1em; | |
134 text-align: center; | |
135 transition: 300ms cubic-bezier(.4, .2, 0, 1); | |
136 will-change: box-shadow; | |
137 } | |
138 | |
139 .button:hover { | |
140 background: var(--paper-blue-a400); | |
141 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .24) | |
142 } | |
143 | |
144 .logo-small { | |
145 content: url(chrome://welcome-win10/logo-small.png); | |
146 display: inline; | |
147 height: 1.25em; | |
148 vertical-align: top; | |
149 width: 1.25em; | |
150 } | |
151 | |
152 .screenshot { | |
153 display: block; | |
154 height: 440px; | |
155 margin: 0 auto; | |
156 max-width: 100%; | |
157 position: relative; | |
158 top: -96px; | |
159 width: 720px; | |
160 } | |
161 | |
162 .screenshot-image { | |
163 box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24); | |
164 height: 48vw; | |
165 margin: 1em 0; | |
166 max-height: 300px; | |
167 max-width: 400px; | |
168 min-height: 150px; | |
169 min-width: 200px; | |
170 position: relative; | |
171 width: 64vw; | |
172 } | |
173 | |
174 #default-image { | |
175 background: url(chrome://welcome-win10/default.webp); | |
176 background-repeat: no-repeat; | |
177 background-size: cover; | |
178 } | |
179 | |
180 #taskbar-image { | |
181 background: url(chrome://welcome-win10/pin.webp); | |
182 background-repeat: no-repeat; | |
183 background-size: cover; | |
184 } | |
185 | |
186 .screenshot-overlay { | |
187 box-sizing: border-box; | |
188 line-height: 0; | |
189 position: absolute; | |
190 } | |
191 | |
192 #browser-overlay { | |
193 left: 41%; | |
194 top: 81%; | |
195 } | |
196 | |
197 #edge-overlay { | |
198 left: 49%; | |
199 top: 88%; | |
200 } | |
201 | |
202 #taskbar-overlay { | |
203 left: 31%; | |
204 top: 73%; | |
205 } | |
206 | |
207 #taskbar-overlay div { | |
208 color: #ccc; | |
209 font-family: Tahoma, Verdana, Segoe, sans-serif; | |
210 font-weight: 500; | |
211 } | |
212 | |
213 #icon-overlay { | |
214 background-image: url(chrome://welcome-win10/logo-small.png); | |
215 background-size: cover; | |
216 height: 8%; | |
217 left: 46%; | |
218 top: 90%; | |
219 width: 6%; | |
220 } | |
221 | |
222 /* These values are precisely set so that the text over the screenshot starts | |
223 * scaling at the same time the image starts scaling too. */ | |
224 @media (max-width: 626px) { | |
225 #browser-overlay { | |
226 font-size: 1.28vw; | |
227 } | |
228 | |
229 #edge-overlay { | |
230 font-size: 1.44vw; | |
231 } | |
232 | |
233 #taskbar-overlay { | |
234 font-size: 1.95vw; | |
235 } | |
236 } | |
237 | |
238 /* Font-sizes used when the screenshot exactly reaches its max size. */ | |
239 @media (min-width: 626px) { | |
240 #browser-overlay { | |
241 font-size: 8px; | |
242 } | |
243 | |
244 #edge-overlay { | |
245 font-size: 9px; | |
246 } | |
247 | |
248 #taskbar-overlay { | |
249 font-size: 12.2px; | |
250 } | |
251 } | |
OLD | NEW |