comment.css 4.7 KB

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