OLD | NEW |
---|---|
1 /* Copyright 2014 The Chromium Authors. All rights reserved. | 1 /* Copyright 2014 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 body { | 5 body { |
5 background-color: rgb(247, 247, 247); | 6 background-color: #f7f7f7; |
6 font-size: 10pt; | 7 color: #646464; |
7 margin: 150px 60px 0 30px; | |
8 } | 8 } |
9 | 9 |
10 #main-frame-blocked { | 10 a { |
11 margin: auto; | 11 color: #585858; |
12 max-width: 600px; | 12 } |
13 min-width: 200px; | 13 |
14 button { | |
15 background: rgb(66, 133, 244); | |
16 border: 0; | |
17 border-radius: 2px; | |
18 box-sizing: border-box; | |
19 color: #fff; | |
20 cursor: pointer; | |
21 float: right; | |
22 font-size: .875em; | |
23 margin: 0; | |
24 padding: 10px 24px; | |
25 transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1); | |
26 user-select: none; | |
27 } | |
28 | |
29 [dir='rtl'] button { | |
30 float: left; | |
31 } | |
32 | |
33 button:active { | |
34 background: rgb(50, 102, 213); | |
35 outline: 0; | |
36 } | |
37 | |
38 button:hover { | |
39 box-shadow: 0 1px 3px rgba(0, 0, 0, .50); | |
40 } | |
41 | |
42 #details { | |
43 color: #696969; | |
44 margin: 45px 0 50px; | |
45 } | |
46 | |
47 #details p:not(:first-of-type) { | |
48 margin-top: 20px; | |
49 } | |
50 | |
51 .details-button { | |
52 background: inherit; | |
53 border: 0; | |
54 float: none; | |
55 margin: 0; | |
56 padding: 10px 0; | |
57 text-transform: uppercase; | |
58 } | |
59 | |
60 .details-button:hover { | |
61 box-shadow: inherit; | |
62 text-decoration: underline; | |
14 } | 63 } |
15 | 64 |
16 h1 { | 65 h1 { |
17 font-size: 1.8em; | 66 color: #333; |
67 font-size: 1.6em; | |
18 font-weight: normal; | 68 font-weight: normal; |
19 margin: 5px 0 25px 0; | 69 line-height: 1.25em; |
70 margin-bottom: 16px; | |
20 } | 71 } |
21 | 72 |
22 #block-page-message { | 73 h2 { |
23 color: rgb(97,97,97); | 74 font-size: 1.2em; |
24 font-size: 0.667em; | 75 font-weight: normal; |
25 margin-top: 16px; | 76 } |
77 | |
78 html { | |
79 -webkit-text-size-adjust: 100%; | |
80 font-size: 125%; | |
81 } | |
82 | |
83 .icon { | |
84 background-repeat: no-repeat; | |
85 background-size: 100%; | |
86 height: 72px; | |
87 margin: 0 0 40px; | |
88 width: 72px; | |
89 } | |
90 | |
91 input[type=checkbox] { | |
92 opacity: 0; | |
Marc Treib
2017/03/09 09:55:57
This seems a bit odd - no better way to "hide" che
Bernhard Bauer
2017/03/10 10:12:10
As it turns out, there aren't actually any checkbo
| |
93 } | |
94 | |
95 input[type=checkbox]:focus ~ .checkbox { | |
96 outline: -webkit-focus-ring-color auto 5px; | |
97 } | |
98 | |
99 .main-frame-blocked { | |
100 box-sizing: border-box; | |
101 font-size: 1em; | |
102 line-height: 1.6em; | |
103 margin: 100px auto 0; | |
104 max-width: 600px; | |
105 width: 100%; | |
106 } | |
107 | |
108 #main-message > p:not([hidden]) { | |
109 display: inline; | |
Marc Treib
2017/03/09 09:55:57
So what's the value otherwise? Why does it need to
Bernhard Bauer
2017/03/10 10:12:10
By default it's displayed as a block element. The
Marc Treib
2017/03/10 10:33:42
So the "hidden" attribute effectively sets "displa
Bernhard Bauer
2017/03/10 11:56:42
Yes, exactly.
Marc Treib
2017/03/10 12:17:11
Yeah, I guess the hidden rule is effectively a cus
| |
110 } | |
111 | |
112 .button-container { | |
113 margin-top: 51px; | |
114 } | |
115 | |
116 .button-container::after { | |
117 clear: both; | |
118 content: ''; | |
119 display: table; | |
120 width: 100%; | |
121 } | |
122 | |
123 .small-link { | |
124 color: #696969; | |
125 font-size: .875em; | |
26 } | 126 } |
27 | 127 |
28 .avatar-img { | 128 .avatar-img { |
29 -webkit-user-select: none; | |
30 border: 3px solid rgb(251, 251, 251); | 129 border: 3px solid rgb(251, 251, 251); |
31 border-radius: 50%; | 130 border-radius: 50%; |
32 content: -webkit-image-set( | 131 content: -webkit-image-set( |
33 url(default_100_percent/logo_avatar_circle_blue_color.png) 1x, | 132 url(default_100_percent/logo_avatar_circle_blue_color.png) 1x, |
34 url(default_200_percent/logo_avatar_circle_blue_color.png) 2x); | 133 url(default_200_percent/logo_avatar_circle_blue_color.png) 2x); |
35 margin-bottom: 5px; | 134 margin-bottom: 5px; |
36 margin-right: 15px; | 135 margin-right: 15px; |
37 margin-top: 5px; | 136 margin-top: 5px; |
38 max-width: 45px; | 137 max-width: 45px; |
39 position: relative; | 138 position: relative; |
139 user-select: none; | |
40 } | 140 } |
41 | 141 |
42 #feedback { | 142 #feedback { |
43 margin-top: 50px; | 143 margin-top: 50px; |
44 } | 144 } |
45 | 145 |
46 #feedback-link { | |
47 color: rgb(66, 133, 244); | |
48 } | |
49 | |
50 #request-access-button { | |
51 background-color: rgb(66, 133, 244); | |
52 color: rgb(255, 255, 255); | |
53 cursor: pointer; | |
54 font-size: 12px; | |
55 font-weight: bold; | |
56 min-width: 88px; | |
57 padding: 10px 15px; | |
58 transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1); | |
59 transition-delay: 200ms; | |
60 } | |
61 | |
62 #request-access-button:hover { | |
63 background-color: rgb(30, 136, 229); | |
64 } | |
65 | |
66 #request-access-button:active { | |
67 background-color: rgb(25,118,210); | |
68 box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2); | |
69 transition-delay: 0s; | |
70 } | |
71 | |
72 #details-button-container { | |
73 color: rgb(97,97,97); | |
74 cursor: pointer; | |
75 display: inline; | |
76 font-size: 12px; | |
77 } | |
78 | |
79 #button-container { | |
80 align-items: baseline; | |
81 display: flex; | |
82 justify-content: space-between; | |
83 margin-top: 60px; | |
84 } | |
85 | |
86 #details { | |
87 color: rgb(97,97,97); | |
88 font-size: 14px; | |
89 } | |
90 | |
91 #details-header { | |
92 font-weight: bold; | |
93 } | |
94 | |
95 .custodian-information { | 146 .custodian-information { |
96 align-items: center; | 147 align-items: center; |
97 display: flex; | 148 display: flex; |
98 font-size: 12px; | 149 font-size: 12px; |
99 } | 150 } |
100 | 151 |
101 .custodian-name { | 152 .custodian-name { |
102 color: rgb(97,97,97); | 153 color: rgb(97,97,97); |
103 padding: 1px 0; | 154 padding: 1px 0; |
104 } | 155 } |
105 | 156 |
106 .custodian-email { | 157 .custodian-email { |
107 color: rgb(183, 183, 183); | 158 color: rgb(183, 183, 183); |
108 padding: 1px 0; | 159 padding: 1px 0; |
109 } | 160 } |
110 | 161 |
111 @media (max-width: 600px) { | 162 |
112 #button-container { | 163 @media (max-width: 700px) { |
113 display: flex; | 164 .main-frame-blocked { |
114 flex-flow: column; | 165 padding: 0 10%; |
115 justify-content: flex-start; | 166 } |
116 order: 2; | 167 } |
168 | |
169 @media (max-height: 600px) { | |
170 #feedback { | |
171 margin-top: 35px; | |
172 } | |
173 } | |
174 | |
175 @media (max-width: 420px) { | |
176 button, | |
177 [dir='rtl'] button, | |
178 .small-link { | |
179 float: none; | |
180 font-size: .825em; | |
181 font-weight: 400; | |
182 margin: 0; | |
117 text-transform: uppercase; | 183 text-transform: uppercase; |
118 } | 184 width: 100%; |
119 | 185 } |
120 #details-button-container { | 186 |
121 font-weight: bold; | 187 #details { |
122 margin: auto; | 188 margin: 20px 0 20px 0; |
123 order: 2; | 189 } |
124 padding: 0 15px; | 190 |
191 #details p:not(:first-of-type) { | |
192 margin-top: 10px; | |
193 } | |
194 | |
195 .details-button { | |
196 /* display: block; */ | |
Marc Treib
2017/03/09 09:55:57
Remove comment
Bernhard Bauer
2017/03/10 10:12:10
Done.
| |
197 margin-top: 20px; | |
125 text-align: center; | 198 text-align: center; |
126 width: 100%; | 199 width: 100%; |
127 } | 200 } |
128 | 201 |
129 #request-access-button { | 202 .main-frame-blocked { |
130 margin-bottom: 30px; | 203 padding: 0 5%; |
204 } | |
205 | |
206 .button-container { | |
207 margin-top: 30px; | |
208 } | |
209 } | |
210 | |
211 /** | |
212 * Mobile specific styling. | |
213 * Navigation buttons are anchored to the bottom of the screen. | |
214 * Details message replaces the top content in its own scrollable area. | |
215 */ | |
216 | |
217 @media (max-width: 420px) and (max-height: 736px) and (orientation: portrait) { | |
218 .details-button { | |
219 border: 0; | |
220 margin: 8px 0 0; | |
221 } | |
222 | |
223 .secondary-button { | |
224 -webkit-margin-end: 0; | |
225 margin-top: 16px; | |
226 } | |
227 } | |
228 | |
229 /* Fixed nav. */ | |
230 @media (min-width: 240px) and (max-width: 420px) and | |
231 (min-height: 401px) and (max-height: 736px) and (orientation:portrait), | |
232 (min-width: 421px) and (max-width: 736px) and (min-height: 240px) and | |
233 (max-height: 420px) and (orientation:landscape) { | |
234 body .button-container { | |
235 background: #f7f7f7; | |
236 bottom: 0; | |
237 box-shadow: 0 -22px 40px rgb(247, 247, 247); | |
238 left: 0; | |
239 margin: 0; | |
240 max-width: 736px; | |
241 padding-left: 24px; | |
242 padding-right: 24px; | |
243 position: fixed; | |
244 z-index: 2; | |
245 } | |
246 | |
247 .main-frame-blocked { | |
248 max-width: 736px; | |
249 } | |
250 | |
251 #details, | |
252 #information-container { | |
253 padding-bottom: 40px; | |
254 } | |
255 } | |
256 | |
257 @media (max-width: 420px) and (max-height: 736px) and (orientation: portrait), | |
258 (max-width: 736px) and (max-height: 420px) and (orientation: landscape) { | |
259 body { | |
260 margin: 0 auto; | |
261 } | |
262 | |
263 button, | |
264 [dir='rtl'] button, | |
265 button.small-link { | |
266 font-family: Roboto-Regular,Helvetica; | |
267 font-size: .933em; | |
268 font-weight: 600; | |
269 margin: 6px 0; | |
270 text-transform: uppercase; | |
271 transform: translatez(0); | |
272 } | |
273 | |
274 .button-container { | |
275 box-sizing: border-box; | |
276 padding-bottom: 8px; | |
277 width: 100%; | |
278 } | |
279 | |
280 .error-code { | |
281 margin-top: 0; | |
282 } | |
283 | |
284 #details { | |
285 box-sizing: border-box; | |
286 height: auto; | |
287 margin: 0; | |
288 opacity: 1; | |
289 padding-top: 40px; | |
290 transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1); | |
291 } | |
292 | |
293 #details[hidden], | |
294 #information-container[hidden] { | |
295 display: block; | |
296 height: 0; | |
297 opacity: 0; | |
298 overflow: hidden; | |
299 transition: none; | |
300 } | |
301 | |
302 .details-button { | |
303 padding-bottom: 16px; | |
304 padding-top: 16px; | |
305 } | |
306 | |
307 h1 { | |
308 font-size: 1.5em; | |
309 margin-bottom: 8px; | |
310 } | |
311 | |
312 .icon { | |
313 margin-bottom: 12px; | |
314 } | |
315 | |
316 .main-frame-blocked { | |
317 box-sizing: border-box; | |
318 margin: 24px auto 12px; | |
319 padding: 0 24px; | |
320 position: relative; | |
321 } | |
322 | |
323 .main-frame-blocked p { | |
324 font-size: .95em; | |
325 line-height: 1.61em; | |
326 margin-top: 8px; | |
327 } | |
328 | |
329 #information-container { | |
330 margin: 0; | |
331 transition: opacity 100ms cubic-bezier(0.4, 0, 0.2, 1); | |
332 } | |
333 | |
334 .small-link { | |
335 border: 0; | |
336 } | |
337 } | |
338 | |
339 @media (min-height: 400px) and (orientation:portrait) { | |
340 .main-frame-blocked { | |
341 margin-bottom: 145px; | |
342 } | |
343 } | |
344 | |
345 @media (min-height: 299px) and (orientation:portrait) { | |
346 .button-container { | |
347 padding-bottom: 16px; | |
348 } | |
349 } | |
350 | |
351 @media (min-height: 405px) and (max-height: 736px) and | |
352 (max-width: 420px) and (orientation:portrait) { | |
353 .icon { | |
354 margin-bottom: 24px; | |
355 } | |
356 | |
357 .main-frame-blocked { | |
358 margin-top: 64px; | |
359 } | |
360 } | |
361 | |
362 @media (min-height: 480px) and (max-width: 420px) and | |
363 (max-height: 736px) and (orientation: portrait), | |
364 (min-height: 338px) and (max-height: 420px) and (max-width: 736px) and | |
365 (orientation: landscape) { | |
366 .icon { | |
367 margin-bottom: 24px; | |
368 } | |
369 | |
370 .button-container { | |
371 padding-bottom: 24px; | |
372 } | |
373 } | |
374 | |
375 @media (min-height: 500px) and (max-width: 414px) and (orientation: portrait) { | |
376 .main-frame-blocked { | |
377 margin-top: 96px; | |
378 } | |
379 } | |
380 | |
381 /* Phablet sizing */ | |
382 @media (min-width: 375px) and (min-height: 641px) and (max-height: 736px) and | |
383 (max-width: 414px) and (orientation: portrait) { | |
384 button, | |
385 [dir='rtl'] button, | |
386 .small-link { | |
387 font-size: 1em; | |
388 padding-bottom: 12px; | |
389 padding-top: 12px; | |
390 } | |
391 | |
392 body:not(.offline) .icon { | |
393 height: 80px; | |
394 width: 80px; | |
395 } | |
396 | |
397 .details-button { | |
398 margin-top: 28px; | |
399 } | |
400 | |
401 h1 { | |
402 font-size: 1.7em; | |
403 } | |
404 | |
405 .icon { | |
406 margin-bottom: 28px; | |
407 } | |
408 | |
409 .main-frame-blocked { | |
410 padding: 28px; | |
411 } | |
412 | |
413 .main-frame-blocked p { | |
414 font-size: 1.05em; | |
415 } | |
416 | |
417 .button-container { | |
418 padding: 28px; | |
419 } | |
420 } | |
421 | |
422 @media (min-width: 420px) and (max-width: 736px) and | |
423 (min-height: 240px) and (max-height: 298px) and | |
424 (orientation:landscape) { | |
425 body:not(.offline) .icon { | |
426 height: 50px; | |
427 width: 50px; | |
428 } | |
429 | |
430 .icon { | |
431 padding-top: 0; | |
432 } | |
433 | |
434 .main-frame-blocked { | |
435 margin-top: 16px; | |
436 } | |
437 | |
438 .button-container { | |
439 padding: 0 24px 8px; | |
440 } | |
441 } | |
442 | |
443 @media (min-width: 420px) and (max-width: 736px) and | |
444 (min-height: 240px) and (max-height: 420px) and | |
445 (orientation:landscape) { | |
446 .details-button { | |
447 margin: 0; | |
448 } | |
449 | |
450 .main-frame-blocked { | |
451 margin-bottom: 70px; | |
452 } | |
453 | |
454 .button-container { | |
455 margin-top: 0; | |
456 } | |
457 } | |
458 | |
459 /* Phablet landscape */ | |
460 @media (min-width: 680px) and (max-height: 414px) { | |
461 .main-frame-blocked { | |
462 margin: 24px auto; | |
463 } | |
464 | |
465 .button-container { | |
466 margin: 16px auto 0; | |
467 } | |
468 } | |
469 | |
470 @media (max-height: 240px) and (orientation: landscape), | |
471 (max-height: 480px) and (orientation: portrait), | |
472 (max-width: 419px) and (max-height: 323px) { | |
473 body:not(.offline) .icon { | |
474 height: 56px; | |
475 width: 56px; | |
476 } | |
477 | |
478 .icon { | |
479 margin-bottom: 16px; | |
480 } | |
481 } | |
482 | |
483 /* Small mobile screens. No fixed nav. */ | |
484 @media (max-height: 400px) and (orientation: portrait), | |
485 (max-height: 239px) and (orientation: landscape), | |
486 (max-width: 419px) and (max-height: 399px) { | |
487 .main-frame-blocked { | |
488 display: flex; | |
489 flex-direction: column; | |
490 margin-bottom: 0; | |
491 } | |
492 | |
493 #details { | |
494 flex: 1 1 auto; | |
495 order: 0; | |
496 } | |
497 | |
498 #information-container { | |
499 flex: 1 1 auto; | |
500 order: 0; | |
501 } | |
502 | |
503 .button-container { | |
504 flex: 0 1 auto; | |
505 margin-top: 8px; | |
131 order: 1; | 506 order: 1; |
132 text-align: center; | 507 padding-left: 0; |
508 padding-right: 0; | |
509 position: relative; | |
133 width: 100%; | 510 width: 100%; |
134 } | 511 } |
135 | 512 } |
136 #details { | 513 |
137 margin: auto; | 514 @media (max-width: 239px) and (orientation: portrait) { |
138 order: 1; | 515 .button-container { |
139 } | 516 padding-left: 0; |
140 | 517 padding-right: 0; |
141 .hidden-on-mobile { | 518 } |
142 display: none; | 519 } |
143 } | |
144 | |
145 #main-frame-blocked { | |
146 display: flex; | |
147 flex-flow: column; | |
148 } | |
149 | |
150 #feedback { | |
151 margin-top: 35px; | |
152 } | |
153 } | |
OLD | NEW |