_page.scss 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  1. // import diff2html styles
  2. @import "~diff2html/dist/diff2html.css";
  3. .crowi.main-container {
  4. // padding controll of .header-wrap and .content-main are moved to _layout and _form
  5. /*
  6. * header
  7. */
  8. header {
  9. .btn-copy, .btn-copy-link, .btn-edit {
  10. @extend .text-muted;
  11. opacity: 0.3;
  12. border: none;
  13. &:not(:hover) {
  14. background-color: transparent;
  15. }
  16. }
  17. // change button opacity
  18. &:hover {
  19. .btn.btn-copy, .btn-copy-link, .btn.btn-edit {
  20. opacity: unset;
  21. }
  22. }
  23. .like-button, .bookmark-link {
  24. border: none;
  25. font-size: 1.2em;
  26. line-height: 0.8em;
  27. &:not(:hover) {
  28. background-color: transparent;
  29. }
  30. }
  31. .like-button {
  32. &.active {
  33. @extend .btn-info;
  34. }
  35. }
  36. .bookmark-link {
  37. &.active {
  38. @extend .btn-warning;
  39. }
  40. }
  41. .flex-title-line {
  42. line-height: 1;
  43. display: flex;
  44. align-items: center;
  45. .flex-item-title {
  46. flex-basis: auto;
  47. margin-right: auto;
  48. }
  49. .flex-item-action {
  50. flex-basis: 2em;
  51. text-align: center;
  52. padding: 0 2px;
  53. }
  54. }
  55. h1 {
  56. font-size: 28px;
  57. margin-top: 0;
  58. margin-bottom: 0;
  59. .btn-copy-container {
  60. font-size: 0.65em;
  61. }
  62. //// TODO crowi layout only
  63. // a.last-path {
  64. // color: #D1E2E4;
  65. // opacity: .4;
  66. // &:hover {
  67. // color: inherit;
  68. // }
  69. // }
  70. }
  71. .url-line {
  72. color: #999;
  73. font-size: 1rem;
  74. }
  75. // affix
  76. &.affix {
  77. width: 100%;
  78. top: 0;
  79. left: 0;
  80. padding: 2px 20px;
  81. z-index: 15; // over the .sidebar
  82. background: rgba(white, .9);
  83. box-shadow: 0 0px 2px #999;
  84. h1 {
  85. font-size: 1.8em;
  86. }
  87. }
  88. }
  89. // alert component settings for trash page and moved page
  90. .alert-trash, .alert-moved, .alert-unlinked {
  91. padding: 10px 15px;
  92. }
  93. /*
  94. // {{{ grant related style
  95. .main.grant-restricted,
  96. .main.grant-specified,
  97. .main.grant-owner {
  98. background: #333;
  99. padding: 16px;
  100. .page-grant {
  101. color: #ccc;
  102. }
  103. article {
  104. border-radius: 5px;
  105. }
  106. }
  107. // }}}
  108. .page-attachments { // {{{
  109. p {
  110. font-weight: bold;
  111. }
  112. ul {
  113. }
  114. } // }}}
  115. */
  116. /*
  117. .footer { // {{{
  118. position: fixed;
  119. width: calc(25% - 18px);
  120. bottom: 0px;
  121. height: 26px;
  122. padding: 4px;
  123. color: #444;
  124. // background: $crowiAsideBackground;
  125. border-top-left-radius: 5px;
  126. z-index: 1055;
  127. a {
  128. color: #666;
  129. }
  130. } // }}}
  131. */
  132. }
  133. .crowi.main-container .main .content-main .revision-history { // {{{
  134. .revision-history-list {
  135. .revision-hisory-outer {
  136. .revision-history-main {
  137. .picture {
  138. width: 32px;
  139. height: 32px;
  140. }
  141. .revision-history-meta {
  142. a:hover {
  143. cursor: pointer;
  144. }
  145. }
  146. .caret {
  147. transform: rotate(-90deg);
  148. transition: 0.4s;
  149. &.caret-opened {
  150. transform: rotate(0deg);
  151. }
  152. }
  153. }
  154. .revision-history-diff {
  155. padding-left: 40px;
  156. }
  157. }
  158. li {
  159. position: relative;
  160. list-style: none;
  161. }
  162. }
  163. } // }}}
  164. // for not_found.html
  165. /*
  166. .crowi.main-container {
  167. .message-not-found {
  168. margin-top: 10px;
  169. margin-left: 16px;
  170. }
  171. .content-main.content-main-not-found {
  172. .nav {
  173. margin-top: 16px;
  174. }
  175. }
  176. }
  177. */