splitview.css 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. /* vim:set ts=2 sw=2 sts=2 et: */
  2. /* This Source Code Form is subject to the terms of the Mozilla Public
  3. * License, v. 2.0. If a copy of the MPL was not distributed with this
  4. * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
  5. box,
  6. .splitview-nav {
  7. -moz-box-flex: 1;
  8. -moz-box-orient: vertical;
  9. }
  10. .splitview-nav-container {
  11. -moz-box-pack: center;
  12. }
  13. .loading .splitview-nav-container > .placeholder {
  14. display: none !important;
  15. }
  16. .splitview-controller,
  17. .splitview-main {
  18. -moz-box-flex: 0;
  19. }
  20. .splitview-controller {
  21. min-height: 3em;
  22. max-height: 14em;
  23. max-width: 400px;
  24. min-width: 200px;
  25. }
  26. .splitview-nav {
  27. display: -moz-box;
  28. overflow-x: hidden;
  29. overflow-y: auto;
  30. }
  31. /* only the active details pane is shown */
  32. .splitview-side-details > * {
  33. display: none;
  34. }
  35. .splitview-side-details > .splitview-active {
  36. display: -moz-box;
  37. }
  38. /* this is to keep in sync with SplitView.jsm's LANDSCAPE_MEDIA_QUERY */
  39. @media (min-width: 701px) {
  40. .splitview-root {
  41. -moz-box-orient: horizontal;
  42. }
  43. .splitview-controller {
  44. max-height: none;
  45. }
  46. .splitview-details {
  47. display: none;
  48. }
  49. .splitview-details.splitview-active {
  50. display: -moz-box;
  51. }
  52. }
  53. /* filtered items are hidden */
  54. ol.splitview-nav > li.splitview-filtered {
  55. display: none;
  56. }
  57. /* "empty list" and "all filtered" placeholders are hidden */
  58. .splitview-nav:empty,
  59. .splitview-nav.splitview-all-filtered,
  60. .splitview-nav + .splitview-nav.placeholder {
  61. display: none;
  62. }
  63. .splitview-nav.splitview-all-filtered ~ .splitview-nav.placeholder.all-filtered,
  64. .splitview-nav:empty ~ .splitview-nav.placeholder.empty {
  65. display: -moz-box;
  66. }
  67. /* portrait mode */
  68. @media (max-width: 700px) {
  69. .splitview-controller {
  70. max-width: none;
  71. }
  72. }