You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

253 lines
4.4 KiB

  1. /*!
  2. * # Semantic UI 2.1.6 - Comment
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Copyright 2015 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Standard
  13. *******************************/
  14. /*--------------
  15. Comments
  16. ---------------*/
  17. .ui.comments {
  18. margin: 1.5em 0em;
  19. max-width: 650px;
  20. }
  21. .ui.comments:first-child {
  22. margin-top: 0em;
  23. }
  24. .ui.comments:last-child {
  25. margin-bottom: 0em;
  26. }
  27. /*--------------
  28. Comment
  29. ---------------*/
  30. .ui.comments .comment {
  31. position: relative;
  32. background: none;
  33. margin: 0.5em 0em 0em;
  34. padding: 0.5em 0em 0em;
  35. border: none;
  36. border-top: none;
  37. line-height: 1.2;
  38. }
  39. .ui.comments .comment:first-child {
  40. margin-top: 0em;
  41. padding-top: 0em;
  42. }
  43. /*--------------------
  44. Nested Comments
  45. ---------------------*/
  46. .ui.comments .comment .comments {
  47. margin: 0em 0em 0.5em 0.5em;
  48. padding: 1em 0em 1em 1em;
  49. }
  50. .ui.comments .comment .comments:before {
  51. position: absolute;
  52. top: 0px;
  53. left: 0px;
  54. }
  55. .ui.comments .comment .comments .comment {
  56. border: none;
  57. border-top: none;
  58. background: none;
  59. }
  60. /*--------------
  61. Avatar
  62. ---------------*/
  63. .ui.comments .comment .avatar {
  64. display: block;
  65. width: 2.5em;
  66. height: auto;
  67. float: left;
  68. margin: 0.2em 0em 0em;
  69. }
  70. .ui.comments .comment img.avatar,
  71. .ui.comments .comment .avatar img {
  72. display: block;
  73. margin: 0em auto;
  74. width: 100%;
  75. height: 100%;
  76. border-radius: 0.25rem;
  77. }
  78. /*--------------
  79. Content
  80. ---------------*/
  81. .ui.comments .comment > .content {
  82. display: block;
  83. }
  84. /* If there is an avatar move content over */
  85. .ui.comments .comment > .avatar ~ .content {
  86. margin-left: 3.5em;
  87. }
  88. /*--------------
  89. Author
  90. ---------------*/
  91. .ui.comments .comment .author {
  92. font-size: 1em;
  93. color: rgba(0, 0, 0, 0.87);
  94. font-weight: bold;
  95. }
  96. .ui.comments .comment a.author {
  97. cursor: pointer;
  98. }
  99. .ui.comments .comment a.author:hover {
  100. color: #4078C0;
  101. }
  102. /*--------------
  103. Metadata
  104. ---------------*/
  105. .ui.comments .comment .metadata {
  106. display: inline-block;
  107. margin-left: 0.5em;
  108. color: rgba(0, 0, 0, 0.4);
  109. font-size: 0.875em;
  110. }
  111. .ui.comments .comment .metadata > * {
  112. display: inline-block;
  113. margin: 0em 0.5em 0em 0em;
  114. }
  115. .ui.comments .comment .metadata > :last-child {
  116. margin-right: 0em;
  117. }
  118. /*--------------------
  119. Comment Text
  120. ---------------------*/
  121. .ui.comments .comment .text {
  122. margin: 0.25em 0em 0.5em;
  123. font-size: 1em;
  124. word-wrap: break-word;
  125. color: rgba(0, 0, 0, 0.87);
  126. line-height: 1.3;
  127. }
  128. /*--------------------
  129. User Actions
  130. ---------------------*/
  131. .ui.comments .comment .actions {
  132. font-size: 0.875em;
  133. }
  134. .ui.comments .comment .actions a {
  135. cursor: pointer;
  136. display: inline-block;
  137. margin: 0em 0.75em 0em 0em;
  138. color: rgba(0, 0, 0, 0.4);
  139. }
  140. .ui.comments .comment .actions a:last-child {
  141. margin-right: 0em;
  142. }
  143. .ui.comments .comment .actions a.active,
  144. .ui.comments .comment .actions a:hover {
  145. color: rgba(0, 0, 0, 0.8);
  146. }
  147. /*--------------------
  148. Reply Form
  149. ---------------------*/
  150. .ui.comments > .reply.form {
  151. margin-top: 1em;
  152. }
  153. .ui.comments .comment .reply.form {
  154. width: 100%;
  155. margin-top: 1em;
  156. }
  157. .ui.comments .reply.form textarea {
  158. font-size: 1em;
  159. height: 12em;
  160. }
  161. /*******************************
  162. State
  163. *******************************/
  164. .ui.collapsed.comments,
  165. .ui.comments .collapsed.comments,
  166. .ui.comments .collapsed.comment {
  167. display: none;
  168. }
  169. /*******************************
  170. Variations
  171. *******************************/
  172. /*--------------------
  173. Threaded
  174. ---------------------*/
  175. .ui.threaded.comments .comment .comments {
  176. margin: -1.5em 0 -1em 1.25em;
  177. padding: 3em 0em 2em 2.25em;
  178. box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.13);
  179. }
  180. /*--------------------
  181. Minimal
  182. ---------------------*/
  183. .ui.minimal.comments .comment .actions {
  184. opacity: 0;
  185. position: absolute;
  186. top: 0px;
  187. right: 0px;
  188. left: auto;
  189. -webkit-transition: opacity 0.2s ease;
  190. transition: opacity 0.2s ease;
  191. -webkit-transition-delay: 0.1s;
  192. transition-delay: 0.1s;
  193. }
  194. .ui.minimal.comments .comment > .content:hover > .actions {
  195. opacity: 1;
  196. }
  197. /*--------------------
  198. Sizes
  199. ---------------------*/
  200. .ui.small.comments {
  201. font-size: 0.9em;
  202. }
  203. .ui.comments {
  204. font-size: 1em;
  205. }
  206. .ui.large.comments {
  207. font-size: 1.1em;
  208. }
  209. .ui.huge.comments {
  210. font-size: 1.2em;
  211. }
  212. /*******************************
  213. User Variable Overrides
  214. *******************************/