_layout.scss 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. body, html{
  2. position: relative;
  3. width: 100%;
  4. height:100%;
  5. font-family: Georgia, serif;
  6. font-style: normal;
  7. margin:0;
  8. padding:0;
  9. // background-color: rgb(219, 219, 219);
  10. }
  11. body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs{
  12. padding-top: 24px!important;
  13. }
  14. // div.layout-container{
  15. // position: relative;
  16. // width:100%; height:100%;
  17. // padding:0.5em 1em;
  18. // box-sizing: border-box;
  19. // z-index: 1;
  20. // }
  21. header[role="banner"]{
  22. // outline: 1px solid blue;
  23. z-index: 5;
  24. position: relative;
  25. padding:0 1em;
  26. >.wrapper{
  27. position: relative;
  28. padding:0.5em 0;
  29. // border-bottom: 1px solid red;
  30. // TODO: what header height to fit well with player ??
  31. height:70px;
  32. >.region{
  33. height:100%;
  34. position: relative;
  35. }
  36. }
  37. }
  38. html.is-mobile header[role="banner"]{
  39. position:fixed;
  40. box-sizing: border-box;
  41. top:0; left:0; width:100%;
  42. background-color: #fff;
  43. >.wrapper{
  44. height:50px;
  45. }
  46. }
  47. aside.messages{
  48. border: none;
  49. z-index: 99;
  50. position: absolute;
  51. left:5%; top:100px;
  52. width:80%; max-height: 600px;
  53. background-color: rgba(255,255,255,0.8);
  54. padding:0;
  55. overflow-y: auto;
  56. }
  57. html:not(.is-mobile) main[role="main"]{
  58. // outline:1px solid green;
  59. z-index: 11;
  60. position: absolute;
  61. left:0; top:0;
  62. box-sizing:border-box;
  63. width:100%;
  64. padding:7em 2em 9em;
  65. overflow: hidden;
  66. pointer-events: none;
  67. height:100%;
  68. .layout-content{
  69. width: 100%; height:100%;
  70. overflow:hidden;
  71. .row>*:not(.col):not(.grid){
  72. pointer-events: auto;
  73. }
  74. }
  75. }
  76. html:not(.js):not(.is-mobile) main[role="main"]{
  77. overflow-y: auto;
  78. .layout-content{
  79. height: auto;
  80. padding-bottom:4em;
  81. }
  82. }
  83. html.is-mobile main[role="main"]{
  84. padding:80px 1em 40px;
  85. // background-color: blue;
  86. }
  87. body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs{
  88. main[role="main"]{
  89. padding-top: 7em + 1em;
  90. }
  91. }
  92. // body.toolbar-fixed.toolbar-tray-open{
  93. // main[role="main"]{
  94. // padding-top: 7em + 4em;
  95. // // overflow-y: hidden;
  96. // }
  97. // }
  98. body.domain-expo-encyclopediedelaparole-org{
  99. main[role="main"] .layout-content{
  100. padding:0; margin:0;
  101. display: none;
  102. }
  103. }
  104. footer[role="contentinfo"]{
  105. // outline: 1px solid pink;
  106. z-index: 12;
  107. position:fixed;
  108. bottom:0;
  109. box-sizing: content-box;
  110. width:100%;
  111. // min-height:110px;
  112. padding:0.5em 1em;
  113. }
  114. html:not(.js):not(.is-mobile) footer[role="contentinfo"]{
  115. background-color: white;
  116. }
  117. canvas#corpus-map{
  118. // outline: 1px solid grey;
  119. }
  120. .os-scroll{
  121. height: 100%;
  122. }