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.

150 lines
2.4 KiB

  1. /*
  2. * # Activity Feed 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: May 22, 2013
  11. */
  12. /*******************************
  13. Activity Feed
  14. *******************************/
  15. .ui.feed {
  16. }
  17. .ui.feed a {
  18. cursor: pointer;
  19. }
  20. .ui.feed,
  21. .ui.feed .event,
  22. .ui.feed .label,
  23. .ui.feed .content,
  24. .ui.feed .extra {
  25. -webkit-box-sizing: border-box;
  26. -moz-box-sizing: border-box;
  27. -ms-box-sizing: border-box;
  28. box-sizing: border-box;
  29. }
  30. /*******************************
  31. Content
  32. *******************************/
  33. /* Event */
  34. .ui.feed .event {
  35. width: 100%;
  36. display: table;
  37. padding: 1em;
  38. }
  39. .ui.feed .event:first-child {
  40. border-top: 0px;
  41. }
  42. .ui.feed .event:last-child {
  43. margin-bottom: 1em;
  44. }
  45. /* Event Label */
  46. .ui.feed .label {
  47. width: 3em;
  48. display: table-cell;
  49. vertical-align: top;
  50. text-align: left;
  51. }
  52. .ui.feed .label .icon {
  53. font-size: 1.5em;
  54. margin: 0em;
  55. }
  56. .ui.feed .label img {
  57. width: 3em;
  58. margin: 0em;
  59. border-radius: 50em;
  60. }
  61. .ui.feed .label + .content {
  62. padding: 0.75em 1em 0em;
  63. }
  64. /* Content */
  65. .ui.feed .content {
  66. display: table-cell;
  67. vertical-align: top;
  68. text-align: left;
  69. word-wrap: break-word;
  70. }
  71. /* Date */
  72. .ui.feed .content .date {
  73. float: right;
  74. padding-left: 1em;
  75. color: rgba(0, 0, 0, 0.4);
  76. }
  77. /* Summary */
  78. .ui.feed .content .summary {
  79. color: rgba(0, 0, 0, 0.75);
  80. }
  81. .ui.feed .content .summary img {
  82. display: inline-block;
  83. margin-right: 0.25em;
  84. width: 4em;
  85. border-radius: 500px;
  86. }
  87. /* Additional Information */
  88. .ui.feed .content .extra {
  89. margin: 1em 0em 0em;
  90. padding: 0.5em 0em 0em;
  91. color: rgba(0, 0, 0, 0.5);
  92. }
  93. .ui.feed .content .extra.images {
  94. }
  95. .ui.feed .content .extra.images img {
  96. display: inline-block;
  97. margin-right: 0.25em;
  98. width: 6em;
  99. }
  100. .ui.feed .content .extra.text {
  101. padding: 0.5em 1em;
  102. border-left: 0.2em solid rgba(0, 0, 0, 0.1);
  103. }
  104. /*******************************
  105. Variations
  106. *******************************/
  107. .ui.small.feed {
  108. font-size: 0.875em;
  109. }
  110. .ui.small.feed .label img {
  111. width: 2.5em;
  112. }
  113. .ui.small.feed .label .icon {
  114. font-size: 1.25em;
  115. }
  116. .ui.feed .event {
  117. padding: 0.75em 0em;
  118. }
  119. .ui.small.feed .label + .content {
  120. padding: 0.5em 0.5em 0;
  121. }
  122. .ui.small.feed .content .extra.images img {
  123. width: 5em;
  124. }
  125. .ui.small.feed .content .extra {
  126. margin: 0.5em 0em 0em;
  127. }
  128. .ui.small.feed .content .extra.text {
  129. padding: 0.25em 0.5em;
  130. }