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.

129 lines
2.8 KiB

  1. /*
  2. * # Semantic Comment View
  3. * http://github.com/quirkyinc/semantic
  4. *
  5. *
  6. * Copyright 2013 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. * Released: April 17 2013
  11. */
  12. /*******************************
  13. Standard
  14. *******************************/
  15. /*--------------
  16. Comments
  17. ---------------*/
  18. .ui.comments a {
  19. cursor: pointer;
  20. }
  21. /*--------------
  22. Comment
  23. ---------------*/
  24. .ui.comments .comment {
  25. position: relative;
  26. margin-top: 0.75em;
  27. padding-top: 0.75em;
  28. width: 100%;
  29. }
  30. .ui.comments .comment:first-child {
  31. margin-top: 0em;
  32. padding-top: 0em;
  33. }
  34. /*--------------------
  35. Avatar (Optional)
  36. ---------------------*/
  37. .ui.comments .comment .avatar {
  38. display: block;
  39. float: left;
  40. }
  41. .ui.comments .comment .avatar,
  42. .ui.comments .comment .avatar img {
  43. width: 3em;
  44. }
  45. .ui.comments .comment .avatar img {
  46. height: 3em;
  47. border-radius: 500px;
  48. }
  49. /*--------------
  50. Content
  51. ---------------*/
  52. .ui.comments .comment > .content,
  53. .ui.comments .comment > .avatar {
  54. display: block;
  55. }
  56. .ui.comments .comment .avatar ~ .content {
  57. padding: 0em 1em;
  58. }
  59. /* If there is an avatar move content over */
  60. .ui.comments .comment > .avatar ~ .content {
  61. margin-left: 3em;
  62. }
  63. .ui.comments .comment .metadata {
  64. display: inline-block;
  65. margin-left: 0.3em;
  66. color: rgba(0, 0, 0, 0.4);
  67. }
  68. .ui.comments .comment .metadata > * {
  69. display: inline-block;
  70. margin: 0em 0.3em 0em 0em;
  71. }
  72. /*--------------------
  73. Comment Text
  74. ---------------------*/
  75. .ui.comments .comment .text {
  76. margin: 0em 0em 0.5em;
  77. }
  78. /*--------------------
  79. User Actions
  80. ---------------------*/
  81. .ui.comments .comment .actions {
  82. font-size: 0.9em;
  83. }
  84. .ui.comments .comment .actions a {
  85. display: inline-block;
  86. margin: 0em 0.3em 0em 0em;
  87. color: rgba(0, 0, 0, 0.3);
  88. }
  89. .ui.comments .comment .actions a:hover {
  90. color: rgba(0, 0, 0, 0.6);
  91. }
  92. /*--------------------
  93. Nested Comments
  94. ---------------------*/
  95. .ui.comments .comment .comments {
  96. margin-top: 1em;
  97. padding-top: 1em;
  98. }
  99. .ui.comments .comment .comments:before {
  100. position: absolute;
  101. top: 0px;
  102. left: 0px;
  103. }
  104. /* One Deep */
  105. .ui.comments > .comment .comments {
  106. margin-left: 2em;
  107. }
  108. /* Two Deep */
  109. .ui.comments > .comment > .comments > .comment > .comments {
  110. margin-left: 1.75em;
  111. }
  112. /* Three Deep */
  113. .ui.comments > .comment > .comments > .comment > .comments > .comment > .comments {
  114. margin-left: 1.5em;
  115. }
  116. /* Four Deep or more */
  117. .ui.comments > .comment > .comments > .comment > .comments > .comment > .comments > .comment .comments {
  118. margin-left: 0.5em;
  119. }
  120. /*******************************
  121. Variations
  122. *******************************/
  123. .ui.threaded.comments .comment .comments {
  124. margin-left: 1.5em !important;
  125. padding-left: 1.5em !important;
  126. -webkit-box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05);
  127. -moz-box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05);
  128. box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05);
  129. }