OLD | NEW |
1 html { | 1 html { |
2 /* This is needed because of chrome://theme/css/new_tab.css */ | 2 /* This is needed because of chrome://theme/css/new_tab.css */ |
3 height: 100%; | 3 height: 100%; |
4 } | 4 } |
5 | 5 |
6 body { | 6 body { |
7 margin: 0; | 7 margin: 0; |
8 height: 100%; | 8 height: 100%; |
9 overflow: auto; | 9 overflow: auto; |
10 -webkit-user-select: none; | 10 -webkit-user-select: none; |
11 cursor: default; | 11 cursor: default; |
12 } | 12 } |
13 | 13 |
14 html[mode=app-launcher] { | 14 html[mode=app-launcher] { |
15 height: auto; | 15 height: auto; |
16 } | 16 } |
17 | 17 |
18 #main { | 18 #main { |
19 box-sizing: border-box; | 19 box-sizing: border-box; |
20 -webkit-transition: width .15s; | 20 -webkit-transition: width 150ms; |
21 margin: 0 auto; | 21 margin: 0 auto; |
22 min-height: 100%; | 22 min-height: 100%; |
23 } | 23 } |
24 | 24 |
25 body.loading #main { | 25 body.loading #main { |
26 /* We start out hidden to prevent glitchiness as the app and most visited | 26 /* We start out hidden to prevent glitchiness as the app and most visited |
27 data flows in. */ | 27 data flows in. */ |
28 visibility: hidden; | 28 visibility: hidden; |
29 } | 29 } |
30 | 30 |
(...skipping 43 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
74 pointer-events: none; | 74 pointer-events: none; |
75 } | 75 } |
76 | 76 |
77 /* Notification */ | 77 /* Notification */ |
78 | 78 |
79 #notification-container { | 79 #notification-container { |
80 position: fixed; | 80 position: fixed; |
81 } | 81 } |
82 | 82 |
83 #notification { | 83 #notification { |
84 -webkit-transition: opacity .15s; | 84 -webkit-transition: opacity 150ms; |
85 position: relative; | 85 position: relative; |
86 background-color: hsl(52, 100%, 80%); | 86 background-color: hsl(52, 100%, 80%); |
87 border: 1px solid rgb(211, 211, 211); | 87 border: 1px solid rgb(211, 211, 211); |
88 border-radius: 6px; | 88 border-radius: 6px; |
89 color: black; | 89 color: black; |
90 display: -webkit-box; | 90 display: -webkit-box; |
91 font-weight: bold; | 91 font-weight: bold; |
92 margin: 2px auto; | 92 margin: 2px auto; |
93 opacity: 0; | 93 opacity: 0; |
94 padding: 7px 15px; | 94 padding: 7px 15px; |
(...skipping 255 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
350 .section { | 350 .section { |
351 position: fixed; | 351 position: fixed; |
352 font-size: 92%; | 352 font-size: 92%; |
353 } | 353 } |
354 | 354 |
355 body.noscroll { | 355 body.noscroll { |
356 overflow: hidden; | 356 overflow: hidden; |
357 } | 357 } |
358 | 358 |
359 html[anim=true][enable-section-animations=true] .section { | 359 html[anim=true][enable-section-animations=true] .section { |
360 -webkit-transition: top .15s; | 360 -webkit-transition: top 150ms; |
361 } | 361 } |
362 | 362 |
363 #login-container { | 363 #login-container { |
364 display: none; | 364 display: none; |
365 margin-top: 5px; | 365 margin-top: 5px; |
366 position: fixed; | 366 position: fixed; |
367 text-align: end; | 367 text-align: end; |
368 } | 368 } |
369 | 369 |
370 /* A section in menu mode doesn't display its contents at all. Instead it is | 370 /* A section in menu mode doesn't display its contents at all. Instead it is |
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
403 top: -5px; | 403 top: -5px; |
404 } | 404 } |
405 | 405 |
406 html[dir=rtl] .section > h2 > .disclosure { | 406 html[dir=rtl] .section > h2 > .disclosure { |
407 left: auto; | 407 left: auto; |
408 right: -15px; | 408 right: -15px; |
409 -webkit-transform: rotate(180deg); | 409 -webkit-transform: rotate(180deg); |
410 } | 410 } |
411 | 411 |
412 html[anim=true] .section > h2 > .disclosure { | 412 html[anim=true] .section > h2 > .disclosure { |
413 -webkit-transition: -webkit-transform .15s; | 413 -webkit-transition: -webkit-transform 150ms; |
414 } | 414 } |
415 | 415 |
416 .section:not(.collapsed) > h2 > .disclosure { | 416 .section:not(.collapsed) > h2 > .disclosure { |
417 -webkit-transform: rotate(90deg); | 417 -webkit-transform: rotate(90deg); |
418 } | 418 } |
419 | 419 |
420 .section > h2 .back { | 420 .section > h2 .back { |
421 position: absolute; | 421 position: absolute; |
422 left: 0; | 422 left: 0; |
423 top: 0.56em; | 423 top: 0.56em; |
424 width: 100%; | 424 width: 100%; |
425 height: 1.5em; | 425 height: 1.5em; |
426 z-index: 1; | 426 z-index: 1; |
427 } | 427 } |
428 | 428 |
429 .section > h2 span { | 429 .section > h2 span { |
430 -webkit-padding-end: 0.30em; | 430 -webkit-padding-end: 0.30em; |
431 position: relative; | 431 position: relative; |
432 z-index: 2; | 432 z-index: 2; |
433 } | 433 } |
434 | 434 |
435 .section-close-button { | 435 .section-close-button { |
436 -webkit-appearance: none; | 436 -webkit-appearance: none; |
437 -webkit-transition: opacity .15s; | 437 -webkit-transition: opacity 150ms; |
438 background-color: transparent; | 438 background-color: transparent; |
439 background-image: url(chrome://theme/IDR_CLOSE_BAR); | 439 background-image: url(chrome://theme/IDR_CLOSE_BAR); |
440 background-position: center center; | 440 background-position: center center; |
441 background-repeat no-repeat; | 441 background-repeat no-repeat; |
442 border: 0; | 442 border: 0; |
443 height: 21px; | 443 height: 21px; |
444 margin-top: -10px; | 444 margin-top: -10px; |
445 position: absolute; | 445 position: absolute; |
446 right: -21px; | 446 right: -21px; |
447 top: 50%; | 447 top: 50%; |
(...skipping 68 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
516 .maxiview.collapsing { | 516 .maxiview.collapsing { |
517 opacity: 0; | 517 opacity: 0; |
518 } | 518 } |
519 | 519 |
520 .maxiview.collapsed { | 520 .maxiview.collapsed { |
521 display: none; | 521 display: none; |
522 opacity: 0; | 522 opacity: 0; |
523 } | 523 } |
524 | 524 |
525 html[anim=true][enable-section-animations=true] .maxiview { | 525 html[anim=true][enable-section-animations=true] .maxiview { |
526 -webkit-transition: opacity .10s, top .15s; | 526 -webkit-transition: opacity 100ms, top 150ms; |
527 } | 527 } |
528 | 528 |
529 html[anim=true][enable-section-animations=true] .miniview { | 529 html[anim=true][enable-section-animations=true] .miniview { |
530 -webkit-transition: opacity .15s; | 530 -webkit-transition: opacity 150ms; |
531 } | 531 } |
532 | 532 |
533 .section > .miniview { | 533 .section > .miniview { |
534 display: none; | 534 display: none; |
535 margin: 10px 0 30px; | 535 margin: 10px 0 30px; |
536 white-space: nowrap; | 536 white-space: nowrap; |
537 overflow-x: hidden; | 537 overflow-x: hidden; |
538 } | 538 } |
539 | 539 |
540 .section.collapsed > * { | 540 .section.collapsed > * { |
(...skipping 54 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
595 max-width: 15ex; | 595 max-width: 15ex; |
596 } | 596 } |
597 | 597 |
598 /* Ensure we have at least 10px horizontal marging. */ | 598 /* Ensure we have at least 10px horizontal marging. */ |
599 @media (max-width: 712px) { | 599 @media (max-width: 712px) { |
600 #main { | 600 #main { |
601 margin-left: 10px; | 601 margin-left: 10px; |
602 margin-right: 10px; | 602 margin-right: 10px; |
603 } | 603 } |
604 } | 604 } |
OLD | NEW |