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.

151 lines
2.4 KiB

  1. /*
  2. * # Activity Feed View
  3. * http://github.com/jlukic/semantic-ui/
  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: right;
  51. }
  52. .ui.feed .label .icon {
  53. font-size: 1.5em;
  54. padding: 0.5em;
  55. margin: 0em;
  56. }
  57. .ui.feed .label img {
  58. width: 3em;
  59. margin: 0em;
  60. border-radius: 50em;
  61. }
  62. .ui.feed .label + .content {
  63. padding: 0.75em 1em 0em;
  64. }
  65. /* Content */
  66. .ui.feed .content {
  67. display: table-cell;
  68. vertical-align: top;
  69. text-align: right;
  70. word-wrap: break-word;
  71. }
  72. /* Date */
  73. .ui.feed .content .date {
  74. float: left;
  75. padding-right: 1em;
  76. color: rgba(0, 0, 0, 0.4);
  77. }
  78. /* Summary */
  79. .ui.feed .content .summary {
  80. color: rgba(0, 0, 0, 0.75);
  81. }
  82. .ui.feed .content .summary img {
  83. display: inline-block;
  84. margin-left: 0.25em;
  85. width: 4em;
  86. border-radius: 500px;
  87. }
  88. /* Additional Information */
  89. .ui.feed .content .extra {
  90. margin: 1em 0em 0em;
  91. padding: 0.5em 0em 0em;
  92. color: rgba(0, 0, 0, 0.5);
  93. }
  94. .ui.feed .content .extra.images {
  95. }
  96. .ui.feed .content .extra.images img {
  97. display: inline-block;
  98. margin-left: 0.25em;
  99. width: 6em;
  100. }
  101. .ui.feed .content .extra.text {
  102. padding: 0.5em 1em;
  103. border-right: 0.2em solid rgba(0, 0, 0, 0.1);
  104. }
  105. /*******************************
  106. Variations
  107. *******************************/
  108. .ui.small.feed {
  109. font-size: 0.875em;
  110. }
  111. .ui.small.feed .label img {
  112. width: 2.5em;
  113. }
  114. .ui.small.feed .label .icon {
  115. font-size: 1.25em;
  116. }
  117. .ui.feed .event {
  118. padding: 0.75em 0em;
  119. }
  120. .ui.small.feed .label + .content {
  121. padding: 0.5em 0.5em 0;
  122. }
  123. .ui.small.feed .content .extra.images img {
  124. width: 5em;
  125. }
  126. .ui.small.feed .content .extra {
  127. margin: 0.5em 0em 0em;
  128. }
  129. .ui.small.feed .content .extra.text {
  130. padding: 0.25em 0.5em;
  131. }