layout.css 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  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 (max-width: 799px) {
  83. body {
  84. overflow: hidden!important;
  85. }
  86. #container {
  87. margin: 0!important;
  88. width: 100vw!important;
  89. height: 100vh!important;
  90. overflow: hidden;
  91. }
  92. #container > .inner {
  93. padding: 0!important;
  94. width: 100%!important;
  95. height: 100vh!important;
  96. display: flex;
  97. flex-direction: column;
  98. overflow: hidden;
  99. }
  100. #container > .inner #header {
  101. height: 3vh;
  102. flex: 0 0 auto;
  103. height: auto;
  104. padding: 0.5em;
  105. box-sizing: border-box;
  106. }
  107. #container > .inner #main {
  108. flex: 0 0 auto;
  109. overflow-x: hidden;
  110. overflow-y: auto;
  111. height: 96vh;
  112. box-sizing: border-box;
  113. }
  114. #container > .inner #main #center {
  115. display: block;
  116. height: auto;
  117. }
  118. }