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