layout.css 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. /**
  2. * Layouts
  3. *
  4. */
  5. /** COMMONS */
  6. #content,
  7. #center .page-title,
  8. #perfnode,
  9. #filters,
  10. #timeline,
  11. #timeline-container {
  12. -webkit-transition: height 1s ease-out;
  13. -moz-transition: height 1s ease-out;
  14. -o-transition: height 1s ease-out;
  15. transition: height 1s ease-out;
  16. /*-webkit-transition: height, 5s, ease-out;
  17. -moz-transition: height, 5s, ease-out;
  18. -o-transition: height, 5s, ease-out;
  19. transition: height, 5s, ease-out;
  20. */
  21. }
  22. #main {
  23. height: 97%;
  24. }
  25. body.layout-intro #perfnode {
  26. height: 0%!important;
  27. }
  28. body.layout-intro #filters {
  29. height: 0%;
  30. }
  31. body.layout-intro #timeline {
  32. height: 65%;
  33. }
  34. body.layout-intro #timeline #timeline-container {
  35. height: 0%;
  36. }
  37. body.layout-intro #timeline-loader {
  38. display: block;
  39. margin: 0 auto 5px;
  40. }
  41. body.layout-timeline #main #content,
  42. body.layout-timeline #main #center .page-title {
  43. height: 0%;
  44. }
  45. body.layout-timeline #perfnode {
  46. height: 0%!important;
  47. }
  48. body.layout-timeline #filters {
  49. height: 30%;
  50. }
  51. body.layout-timeline #timeline {
  52. height: 65%;
  53. }
  54. body.layout-timeline #timeline #timeline-container {
  55. height: 98%;
  56. }
  57. body.layout-timeline #timeline-loader {
  58. display: none;
  59. }
  60. body.layout-perfnode #main #content,
  61. body.layout-perfnode #main #center .page-title {
  62. height: 0%;
  63. }
  64. body.layout-perfnode #perfnode {
  65. height: 85%!important;
  66. }
  67. body.layout-perfnode #filters {
  68. height: 0%;
  69. }
  70. body.layout-perfnode #timeline {
  71. height: 3%;
  72. }
  73. body.layout-perfnode #timeline #timeline-container {
  74. height: 0%;
  75. }
  76. body.layout-perfnode #timeline-loader {
  77. display: none;
  78. }
  79. body > img {
  80. display: none;
  81. }
  82. @media (min-width: 800px) {
  83. body.front #container > .inner #main {
  84. overflow-x: hidden;
  85. overflow-y: auto;
  86. height: 96vh;
  87. box-sizing: border-box;
  88. }
  89. }
  90. @media (max-width: 799px) {
  91. body {
  92. overflow: hidden!important;
  93. }
  94. #container {
  95. margin: 0!important;
  96. width: 100vw!important;
  97. height: 100vh!important;
  98. overflow: hidden;
  99. }
  100. #container > .inner {
  101. padding: 0!important;
  102. width: 100%!important;
  103. height: 100vh!important;
  104. display: flex;
  105. flex-direction: column;
  106. overflow: hidden;
  107. }
  108. #container > .inner #header {
  109. height: 3vh;
  110. flex: 0 0 auto;
  111. height: auto;
  112. padding: 0.5em;
  113. box-sizing: border-box;
  114. }
  115. #container > .inner #main {
  116. flex: 0 0 auto;
  117. overflow-x: hidden;
  118. overflow-y: auto;
  119. height: 96vh;
  120. box-sizing: border-box;
  121. padding-bottom: 3em;
  122. }
  123. #container > .inner #main #center {
  124. display: block;
  125. height: auto;
  126. }
  127. }