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.

295 lines
5.5 KiB

  1. /*!
  2. * # Semantic UI 2.1.6 - Feed
  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. 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-bottom: 0em;
  22. }
  23. /*******************************
  24. Content
  25. *******************************/
  26. /* Event */
  27. .ui.feed > .event {
  28. display: -webkit-box;
  29. display: -webkit-flex;
  30. display: -ms-flexbox;
  31. display: flex;
  32. -webkit-box-orient: horizontal;
  33. -webkit-box-direction: normal;
  34. -webkit-flex-direction: row;
  35. -ms-flex-direction: row;
  36. flex-direction: row;
  37. width: 100%;
  38. padding: 0.23076923rem 0em;
  39. margin: 0em;
  40. background: none;
  41. border-top: none;
  42. }
  43. .ui.feed > .event:first-child {
  44. border-top: 0px;
  45. padding-top: 0em;
  46. }
  47. .ui.feed > .event:last-child {
  48. padding-bottom: 0em;
  49. }
  50. /* Event Label */
  51. .ui.feed > .event > .label {
  52. display: block;
  53. -webkit-box-flex: 0;
  54. -webkit-flex: 0 0 auto;
  55. -ms-flex: 0 0 auto;
  56. flex: 0 0 auto;
  57. width: 2.5em;
  58. height: auto;
  59. -webkit-align-self: stretch;
  60. -ms-flex-item-align: stretch;
  61. align-self: stretch;
  62. text-align: left;
  63. }
  64. .ui.feed > .event > .label .icon {
  65. opacity: 1;
  66. font-size: 1.5em;
  67. width: 100%;
  68. padding: 0.25em;
  69. background: none;
  70. border: none;
  71. border-radius: none;
  72. color: rgba(0, 0, 0, 0.6);
  73. }
  74. .ui.feed > .event > .label img {
  75. width: 100%;
  76. height: auto;
  77. border-radius: 500rem;
  78. }
  79. .ui.feed > .event > .label + .content {
  80. margin: 0.5em 0em 0.38461538em 1.15384615em;
  81. }
  82. /*--------------
  83. Content
  84. ---------------*/
  85. /* Content */
  86. .ui.feed > .event > .content {
  87. display: block;
  88. -webkit-box-flex: 1;
  89. -webkit-flex: 1 1 auto;
  90. -ms-flex: 1 1 auto;
  91. flex: 1 1 auto;
  92. -webkit-align-self: stretch;
  93. -ms-flex-item-align: stretch;
  94. align-self: stretch;
  95. text-align: left;
  96. word-wrap: break-word;
  97. }
  98. .ui.feed > .event:last-child > .content {
  99. padding-bottom: 0em;
  100. }
  101. /* Link */
  102. .ui.feed > .event > .content a {
  103. cursor: pointer;
  104. }
  105. /*--------------
  106. Date
  107. ---------------*/
  108. .ui.feed > .event > .content .date {
  109. margin: -0.5rem 0em 0em;
  110. padding: 0em;
  111. font-weight: normal;
  112. font-size: 1em;
  113. font-style: normal;
  114. color: rgba(0, 0, 0, 0.4);
  115. }
  116. /*--------------
  117. Summary
  118. ---------------*/
  119. .ui.feed > .event > .content .summary {
  120. margin: 0em;
  121. font-size: 1em;
  122. font-weight: bold;
  123. color: rgba(0, 0, 0, 0.87);
  124. }
  125. /* Summary Image */
  126. .ui.feed > .event > .content .summary img {
  127. display: inline-block;
  128. width: auto;
  129. height: 10em;
  130. margin: -0.25em 0.25em 0em 0em;
  131. border-radius: 0.25em;
  132. vertical-align: middle;
  133. }
  134. /*--------------
  135. User
  136. ---------------*/
  137. .ui.feed > .event > .content .user {
  138. display: inline-block;
  139. font-weight: bold;
  140. margin-right: 0em;
  141. vertical-align: baseline;
  142. }
  143. .ui.feed > .event > .content .user img {
  144. margin: -0.25em 0.25em 0em 0em;
  145. width: auto;
  146. height: 10em;
  147. vertical-align: middle;
  148. }
  149. /*--------------
  150. Inline Date
  151. ---------------*/
  152. /* Date inside Summary */
  153. .ui.feed > .event > .content .summary > .date {
  154. display: inline-block;
  155. float: none;
  156. font-weight: normal;
  157. font-size: 0.84615385em;
  158. font-style: normal;
  159. margin: 0em 0em 0em 0.5em;
  160. padding: 0em;
  161. color: rgba(0, 0, 0, 0.4);
  162. }
  163. /*--------------
  164. Extra Summary
  165. ---------------*/
  166. .ui.feed > .event > .content .extra {
  167. margin: 0.5em 0em 0em;
  168. background: none;
  169. padding: 0em;
  170. color: rgba(0, 0, 0, 0.87);
  171. }
  172. /* Images */
  173. .ui.feed > .event > .content .extra.images img {
  174. display: inline-block;
  175. margin: 0em 0.25em 0em 0em;
  176. width: 6em;
  177. }
  178. /* Text */
  179. .ui.feed > .event > .content .extra.text {
  180. padding: 0em;
  181. border-left: none;
  182. font-size: 1em;
  183. max-width: 500px;
  184. line-height: 1.4285em;
  185. }
  186. /*--------------
  187. Meta
  188. ---------------*/
  189. .ui.feed > .event > .content .meta {
  190. display: inline-block;
  191. font-size: 0.84615385em;
  192. margin: 0.5em 0em 0em;
  193. background: none;
  194. border: none;
  195. border-radius: 0;
  196. box-shadow: none;
  197. padding: 0em;
  198. color: rgba(0, 0, 0, 0.6);
  199. }
  200. .ui.feed > .event > .content .meta > * {
  201. position: relative;
  202. margin-left: 0.75em;
  203. }
  204. .ui.feed > .event > .content .meta > *:after {
  205. content: '';
  206. color: rgba(0, 0, 0, 0.2);
  207. top: 0em;
  208. left: -1em;
  209. opacity: 1;
  210. position: absolute;
  211. vertical-align: top;
  212. }
  213. .ui.feed > .event > .content .meta .like {
  214. color: '';
  215. -webkit-transition: 0.2s color ease;
  216. transition: 0.2s color ease;
  217. }
  218. .ui.feed > .event > .content .meta .like:hover .icon {
  219. color: #FF2733;
  220. }
  221. .ui.feed > .event > .content .meta .active.like .icon {
  222. color: #EF404A;
  223. }
  224. /* First element */
  225. .ui.feed > .event > .content .meta > :first-child {
  226. margin-left: 0em;
  227. }
  228. .ui.feed > .event > .content .meta > :first-child::after {
  229. display: none;
  230. }
  231. /* Action */
  232. .ui.feed > .event > .content .meta a,
  233. .ui.feed > .event > .content .meta > .icon {
  234. cursor: pointer;
  235. opacity: 1;
  236. color: rgba(0, 0, 0, 0.5);
  237. -webkit-transition: color 0.1s ease;
  238. transition: color 0.1s ease;
  239. }
  240. .ui.feed > .event > .content .meta a:hover,
  241. .ui.feed > .event > .content .meta a:hover .icon,
  242. .ui.feed > .event > .content .meta > .icon:hover {
  243. color: rgba(0, 0, 0, 0.95);
  244. }
  245. /*******************************
  246. Variations
  247. *******************************/
  248. .ui.small.feed {
  249. font-size: 0.92307692rem;
  250. }
  251. .ui.feed {
  252. font-size: 1rem;
  253. }
  254. .ui.large.feed {
  255. font-size: 1.15384615rem;
  256. }
  257. /*******************************
  258. User Variable Overrides
  259. *******************************/