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.

277 lines
5.0 KiB

10 years ago
10 years ago
10 years ago
10 years ago
  1. /*
  2. * # Semantic UI
  3. * https://github.com/Semantic-Org/Semantic-UI
  4. * http://www.semantic-ui.com/
  5. *
  6. * Copyright 2014 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Activity Feed
  13. *******************************/
  14. .ui.feed {
  15. margin: 1em 0em;
  16. }
  17. .ui.feed:first-child {
  18. margin-top: 0em;
  19. }
  20. .ui.feed:last-child {
  21. margin-top: 0em;
  22. }
  23. /*******************************
  24. Content
  25. *******************************/
  26. /* Event */
  27. .ui.feed > .event {
  28. display: table;
  29. width: 100%;
  30. padding: 0.5rem 0em;
  31. margin: 0em;
  32. background: none;
  33. border-top: none;
  34. }
  35. .ui.feed > .event:first-child {
  36. border-top: 0px;
  37. padding-top: 0em;
  38. }
  39. .ui.feed > .event:last-child {
  40. padding-bottom: 0em;
  41. }
  42. /* Event Label */
  43. .ui.feed > .event > .label {
  44. display: table-cell;
  45. width: 2.5em;
  46. height: 2.5em;
  47. vertical-align: top;
  48. text-align: left;
  49. }
  50. .ui.feed > .event > .label .icon {
  51. opacity: 1;
  52. font-size: 1.5em;
  53. width: 100%;
  54. padding: 0.25em;
  55. background: none;
  56. border: none;
  57. border-radius: none;
  58. color: rgba(0, 0, 0, 0.6);
  59. }
  60. .ui.feed > .event > .label img {
  61. width: 100%;
  62. height: auto;
  63. border-radius: 500rem;
  64. }
  65. .ui.feed > .event > .label + .content {
  66. padding: 0.5em 0em 0.5em 1.25em;
  67. }
  68. /* Content */
  69. .ui.feed > .event > .content {
  70. display: table-cell;
  71. vertical-align: top;
  72. text-align: left;
  73. word-wrap: break-word;
  74. }
  75. .ui.feed > .event:last-child > .content {
  76. padding-bottom: 0em;
  77. }
  78. /* Link */
  79. .ui.feed > .event > .content a {
  80. cursor: pointer;
  81. }
  82. /*--------------
  83. Date
  84. ---------------*/
  85. .ui.feed > .event > .content .date {
  86. margin: -0.5rem 0em 0em;
  87. padding: 0em;
  88. font-weight: normal;
  89. font-size: 1em;
  90. font-style: normal;
  91. color: rgba(0, 0, 0, 0.4);
  92. }
  93. /*--------------
  94. Summary
  95. ---------------*/
  96. .ui.feed > .event > .content .summary {
  97. margin: 0em;
  98. font-size: 1em;
  99. font-weight: bold;
  100. color: rgba(0, 0, 0, 0.8);
  101. }
  102. /* Summary Image */
  103. .ui.feed > .event > .content .summary img {
  104. display: inline-block;
  105. width: auto;
  106. height: 2em;
  107. margin: -0.25em 0.25em 0em 0em;
  108. border-radius: 0.25em;
  109. vertical-align: middle;
  110. }
  111. /*--------------
  112. User
  113. ---------------*/
  114. .ui.feed > .event > .content .user {
  115. display: inline-block;
  116. font-weight: bold;
  117. margin-right: 0em;
  118. vertical-align: baseline;
  119. }
  120. .ui.feed > .event > .content .user img {
  121. margin: -0.25em 0.25em 0em 0em;
  122. width: auto;
  123. height: 2em;
  124. vertical-align: middle;
  125. }
  126. /*--------------
  127. Inline Date
  128. ---------------*/
  129. /* Date inside Summary */
  130. .ui.feed > .event > .content .summary > .date {
  131. display: inline-block;
  132. float: none;
  133. font-weight: normal;
  134. font-size: 0.875em;
  135. font-style: normal;
  136. margin: 0em 0em 0em 0.5em;
  137. padding: 0em;
  138. color: rgba(0, 0, 0, 0.4);
  139. }
  140. /*--------------
  141. Extra Summary
  142. ---------------*/
  143. .ui.feed > .event > .content .extra {
  144. margin: 0.5em 0em 0em;
  145. background: none;
  146. padding: 0em;
  147. color: rgba(0, 0, 0, 0.8);
  148. }
  149. /* Images */
  150. .ui.feed > .event > .content .extra.images img {
  151. display: inline-block;
  152. margin: 0em 0.25em 0em 0em;
  153. width: 6em;
  154. }
  155. /* Text */
  156. .ui.feed > .event > .content .extra.text {
  157. padding: 0.5em 1em;
  158. border-left: 3px solid rgba(0, 0, 0, 0.2);
  159. font-size: 1em;
  160. max-width: 500px;
  161. line-height: 1.33;
  162. }
  163. /*--------------
  164. Meta
  165. ---------------*/
  166. .ui.feed > .event > .content .meta {
  167. display: inline-block;
  168. font-size: 0.875em;
  169. margin: 0.5em 0em 0em;
  170. background: none;
  171. border: none;
  172. border-radius: 0;
  173. box-shadow: none;
  174. padding: 0em;
  175. color: rgba(0, 0, 0, 0.6);
  176. }
  177. .ui.feed > .event > .content .meta > * {
  178. position: relative;
  179. margin-left: 0.75em;
  180. }
  181. .ui.feed > .event > .content .meta > *:after {
  182. content: '';
  183. color: rgba(0, 0, 0, 0.2);
  184. top: 0em;
  185. left: -1em;
  186. opacity: 1;
  187. position: absolute;
  188. vertical-align: top;
  189. }
  190. .ui.feed > .event > .content .meta .like {
  191. color: '';
  192. -webkit-transition: 0.2s color ease;
  193. transition: 0.2s color ease;
  194. }
  195. .ui.feed > .event > .content .meta .like:hover .icon {
  196. color: #ff2733;
  197. }
  198. .ui.feed > .event > .content .meta .active.like .icon {
  199. color: #ef404a;
  200. }
  201. /* First element */
  202. .ui.feed > .event > .content .meta > :first-child {
  203. margin-left: 0em;
  204. }
  205. .ui.feed > .event > .content .meta > :first-child::after {
  206. display: none;
  207. }
  208. /* Action */
  209. .ui.feed > .event > .content .meta a,
  210. .ui.feed > .event > .content .meta > .icon {
  211. cursor: pointer;
  212. opacity: 1;
  213. color: rgba(0, 0, 0, 0.5);
  214. -webkit-transition: color 0.2s ease;
  215. transition: color 0.2s ease;
  216. }
  217. .ui.feed > .event > .content .meta a:hover,
  218. .ui.feed > .event > .content .meta a:hover .icon,
  219. .ui.feed > .event > .content .meta > .icon:hover {
  220. color: rgba(0, 0, 0, 0.8);
  221. }
  222. /*******************************
  223. Variations
  224. *******************************/
  225. .ui.small.feed {
  226. font-size: 0.9em;
  227. }
  228. .ui.feed {
  229. font-size: 1em;
  230. }
  231. .ui.large.feed {
  232. font-size: 1.1em;
  233. }
  234. /*******************************
  235. Theme Overrides
  236. *******************************/
  237. /*******************************
  238. User Variable Overrides
  239. *******************************/