OLD | NEW |
---|---|
(Empty) | |
1 /* Copyright 2017 The Chromium Authors. All rights reserved. | |
2 * Use of this source code is governed by a BSD-style license that can be | |
3 * found in the LICENSE file. */ | |
4 | |
5 /* TODO(msramek): This overrides the non-MD color #323232 which is set with | |
6 * the themes CSS at runtime. It can be removed once the MD Incognito NTP | |
7 * is fully launched and the non-MD markup is disused. */ | |
8 html { | |
9 background-color: #303030 !important; | |
Dan Beam
2017/04/11 00:31:12
i'm still confused as to why you need !important h
msramek
2017/04/11 19:04:27
Done. Sorry, not sure how I didn't think of that.
| |
10 } | |
11 | |
12 body { | |
13 -webkit-font-smoothing: antialiased; | |
14 margin: 0; | |
15 } | |
16 | |
17 /** Typography -------------------------------------------------------------- */ | |
18 | |
19 .content { | |
20 background-color: #303030; | |
21 color: rgb(70%, 70%, 70%); | |
Dan Beam
2017/04/11 00:31:12
note: an overwhelming majority of rgb() and rgba()
msramek
2017/04/11 19:04:26
Done.
| |
22 font-size: 14px; | |
Dan Beam
2017/04/11 00:31:12
can you make font-sizes in terms of scalable units
msramek
2017/04/11 19:04:26
Well, this might be a problem.
The default font s
msramek
2017/04/12 14:50:26
Update in Patchset #4: I talked to our UX designer
| |
23 line-height: 20px; | |
24 min-width: 240px; | |
25 } | |
26 | |
27 h1 { | |
28 font-size: 24px; | |
29 font-weight: 400; | |
30 line-height: 32px; | |
31 opacity: rgb(80%, 80%, 80%); | |
Dan Beam
2017/04/11 00:31:12
i don't think this is a valid opacity. did you me
msramek
2017/04/11 19:04:27
Done. It was supposed to be just color, actually.
| |
32 } | |
33 | |
34 em { | |
35 color: white; | |
36 font-style: normal; | |
37 } | |
38 | |
39 .learn-more-button { | |
40 color: rgb(123, 170, 247); | |
41 text-decoration: none; | |
42 } | |
43 | |
44 /* Small font on small screens. */ | |
45 @media (max-width: 240px), | |
46 (max-height: 320px) { | |
47 .content { | |
48 font-size: 12px; | |
49 line-height: 18px; | |
50 } | |
51 | |
52 h1 { | |
53 font-size: 20px; | |
54 line-height: 24px; | |
55 } | |
56 } | |
57 | |
58 /** Icon -------------------------------------------------------------------- */ | |
59 | |
60 .icon { | |
61 content: url(../../../../ui/webui/resources/images/incognito_splash.svg); | |
62 height: 120px; | |
63 width: 120px; | |
64 } | |
65 | |
66 /* Medium-sized icon on medium-sized screens. */ | |
67 @media (max-height: 480px), | |
68 (max-width: 720px) { | |
69 .icon { | |
70 height: 72px; | |
71 width: 72px; | |
72 } | |
73 } | |
74 | |
75 /* Very small icon on very small screens. */ | |
76 @media (max-width: 720px) { | |
77 @media (max-width: 240px), | |
78 (max-height: 480px) { | |
79 .icon { | |
80 height: 48px; | |
81 width: 48px; | |
82 } | |
83 } | |
84 } | |
85 | |
86 /** The "Learn more" link --------------------------------------------------- */ | |
87 | |
88 /* By default, we only show the inline "Learn more" link. */ | |
89 .content > .learn-more-button { | |
90 display: none; | |
91 } | |
92 | |
93 /* On narrow screens, we show the standalone "Learn more" link. */ | |
94 @media (max-width: 720px) { | |
95 #subtitle > .learn-more-button { | |
96 display: none; | |
97 } | |
98 | |
99 .content > .learn-more-button { | |
100 display: block; | |
101 } | |
102 } | |
103 | |
104 /** Layout ------------------------------------------------------------------ */ | |
105 | |
106 /* Align the content, icon, and title to to the center. */ | |
107 .content { | |
108 margin-left: auto; | |
109 margin-right: auto; | |
110 max-width: 600px; | |
111 } | |
112 | |
113 .icon { | |
114 margin-left: auto; | |
115 margin-right: auto; | |
116 } | |
117 | |
118 h1 { | |
119 text-align: center; | |
120 } | |
121 | |
122 /* Align the two columns of bulletpoints next to each other. */ | |
123 .bulletpoints { | |
124 float: left; | |
Dan Beam
2017/04/11 00:31:12
does this work in RTL?
msramek
2017/04/11 19:04:27
Done. Thanks for pointing this out!
I flipped the
| |
125 } | |
126 | |
127 .bulletpoints + .bulletpoints { | |
128 clear: right; | |
129 } | |
130 | |
131 .clearer { | |
132 clear: both; | |
133 } | |
134 | |
135 /* On narrow screens, align everything to the left. */ | |
136 @media (max-width: 720px) { | |
137 .content { | |
138 margin-left: 0; | |
139 max-width: 720px !important; /* must override the rule set by JS which | |
140 * is only valid for width > 720px cases. */ | |
141 text-align: start; | |
142 } | |
143 | |
144 .icon { | |
145 margin-left: 0; | |
146 } | |
147 | |
148 h1 { | |
149 text-align: start; | |
150 } | |
151 | |
152 .bulletpoints + .bulletpoints { | |
153 clear: both; | |
154 } | |
155 } | |
156 | |
157 /** Paddings and margins ---------------------------------------------------- */ | |
158 | |
159 .bulletpoints ul { | |
160 margin: 4px 0 0 0; | |
161 padding-left: 16px; | |
162 } | |
163 | |
164 /* Margins of floating elements don't collapse. The margin for bulletpoints | |
165 * will usually be provided by a neighboring element. */ | |
166 .bulletpoints { | |
167 margin: 0; | |
168 } | |
169 | |
170 .bulletpoints + .bulletpoints { | |
171 margin-left: 40px; | |
172 } | |
173 | |
174 /* Wide screens. */ | |
175 @media (min-width: 720px) { | |
176 .icon, | |
177 h1, | |
178 #subtitle, | |
179 .learn-more-button { | |
180 margin-bottom: 24px; | |
181 margin-top: 24px; | |
182 } | |
183 | |
184 .content { | |
185 margin-top: 40px; | |
186 min-width: 240px; | |
187 padding: 8px 48px 24px 48px; | |
188 } | |
189 | |
190 /* Snap the content box to the whole height on short screens. */ | |
191 @media (max-height: 480px) { | |
192 html, | |
193 body, | |
194 .content { | |
195 height: 100%; | |
196 } | |
197 | |
198 .content { | |
199 margin-bottom: 0; | |
200 margin-top: 0; | |
201 padding-bottom: 0; | |
202 padding-top: 0; | |
203 } | |
204 | |
205 .icon { | |
206 margin-top: 0; | |
207 padding-top: 32px; /* Define the top offset through the icon's padding, | |
208 * otherwise the screen height would be 100% + 32px */ | |
209 } | |
210 } | |
211 | |
212 /* Smaller vertical margins on very short screens. */ | |
213 @media (max-height: 320px) { | |
214 h1, | |
215 #subtitle, | |
216 .learn-more-button { | |
217 margin-bottom: 16px; | |
218 margin-top: 16px; | |
219 } | |
220 | |
221 .icon { | |
222 margin-bottom: 16px; | |
223 } | |
224 } | |
225 } | |
226 | |
227 /* Narrow screens */ | |
228 @media (max-width: 720px) { | |
229 .content { | |
230 padding: 72px 32px; | |
231 min-width: 176px; | |
232 } | |
233 | |
234 .icon, | |
235 h1, | |
236 #subtitle, | |
237 .learn-more-button { | |
238 margin-bottom: 24px; | |
239 margin-top: 24px; | |
240 } | |
241 | |
242 /* The two columns of bulletpoints are moved under each other. */ | |
243 .bulletpoints + .bulletpoints { | |
244 margin-left: 0; | |
245 margin-top: 24px; | |
246 } | |
247 | |
248 /* Smaller offsets on smaller screens. */ | |
249 @media (max-height: 600px) { | |
250 .content { | |
251 padding-top: 48px; | |
252 } | |
253 | |
254 .icon, | |
255 h1, | |
256 #subtitle, | |
257 .learn-more-button { | |
258 margin-bottom: 16px; | |
259 margin-top: 16px; | |
260 } | |
261 | |
262 .bulletpoints + .bulletpoints { | |
263 margin-top: 16px; | |
264 } | |
265 } | |
266 | |
267 /* Small top offset on very small screens. */ | |
268 @media (max-height: 480px) { | |
269 .content { | |
270 padding-top: 32px; | |
271 } | |
272 } | |
273 | |
274 /* Undo the first and last elements margins. */ | |
275 .icon { | |
276 margin-top: 0; | |
277 } | |
278 | |
279 .learn-more-button { | |
280 margin-bottom: 0; | |
281 } | |
282 } | |
283 | |
284 /* Very narrow screens. */ | |
285 @media (max-width: 240px) { | |
286 .content { | |
287 min-width: 192px; | |
288 padding-left: 24px; | |
289 padding-right: 24px; | |
290 } | |
291 } | |
OLD | NEW |