_layout.scss 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. @use '@growi/core-styles/scss/bootstrap/init' as bs;
  2. @use './variables' as var;
  3. body {
  4. min-height: 100vh;
  5. }
  6. .dynamic-layout-root {
  7. @extend .flex-expand-vert;
  8. }
  9. .grw-bg-image-wrapper {
  10. position: fixed;
  11. width: 100%;
  12. height: 100%;
  13. img {
  14. object-fit: cover;
  15. object-position: bottom;
  16. }
  17. }
  18. .grw-scrollable-modal-body {
  19. max-height: calc(100vh - 330px);
  20. overflow-y: scroll;
  21. }
  22. .page-wrapper {
  23. display: flex;
  24. flex-direction: column;
  25. }
  26. // padding settings for GrowiNavbarBottom
  27. .page-wrapper {
  28. padding-bottom: var.$grw-navbar-bottom-height;
  29. @include bs.media-breakpoint-up(md) {
  30. padding-bottom: unset;
  31. }
  32. }
  33. .main {
  34. margin-top: 1rem;
  35. @include bs.media-breakpoint-up(md) {
  36. margin-top: 2rem;
  37. }
  38. @include bs.media-breakpoint-up(lg) {
  39. margin-top: 4rem;
  40. }
  41. }
  42. // md/lg layout padding
  43. .ps-sidebar {
  44. @include bs.media-breakpoint-between(md, xl) {
  45. padding-left: var.$grw-sidebar-nav-width;
  46. }
  47. }
  48. .wide-gutter-x-lg {
  49. @include bs.media-breakpoint-up(lg) {
  50. &,
  51. .container,
  52. .container-fluid,
  53. .container-xxl,
  54. .container-xl,
  55. .container-lg {
  56. --bs-gutter-x: 3rem;
  57. }
  58. }
  59. // set to double value to allow space for .revision-head-link
  60. @include bs.media-breakpoint-up(xl) {
  61. &,
  62. .container,
  63. .container-fluid,
  64. .container-xxl,
  65. .container-xl,
  66. .container-lg {
  67. padding-left: calc(var(--bs-gutter-x) * 1);
  68. }
  69. }
  70. }
  71. // printable style
  72. @media print {
  73. body {
  74. padding: 30px;
  75. }
  76. // Avoid the issue where the footer element overlaps the main content
  77. .dynamic-layout-root {
  78. display: block !important;
  79. }
  80. a::after {
  81. display: none !important;
  82. }
  83. .main {
  84. header {
  85. border-bottom: solid 1px bs.$secondary;
  86. h1 {
  87. font-size: 2em;
  88. color: black;
  89. }
  90. }
  91. .row {
  92. display: block !important;
  93. }
  94. .meta {
  95. margin-top: 32px;
  96. color: bs.$secondary;
  97. border-top: solid 1px bs.$gray-300;
  98. }
  99. }
  100. }