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.

412 lines
9.7 KiB

10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
  1. /*
  2. * # Semantic - Feed
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Copyright 2014 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Theme
  13. *******************************/
  14. /*
  15. */
  16. /*******************************
  17. Folders
  18. *******************************/
  19. /* Path to theme packages */
  20. /* Path to site override folder */
  21. /*******************************
  22. Themes
  23. *******************************/
  24. /* To override a theme for an individual element
  25. specify theme name below
  26. Be sure to update the user folder name (see README)
  27. */
  28. /* Global */
  29. /* Elements */
  30. /* Collections */
  31. /* Modules */
  32. /* Views */
  33. /*******************************
  34. Import Directives
  35. *******************************/
  36. /*------------------
  37. Load Default
  38. -------------------*/
  39. /*******************************
  40. Site Settings
  41. *******************************/
  42. /*-------------------
  43. Paths
  44. --------------------*/
  45. /*-------------------
  46. Fonts
  47. --------------------*/
  48. /*-------------------
  49. Site Colors
  50. --------------------*/
  51. /*--- Colors ---*/
  52. /*-------------------
  53. Page
  54. --------------------*/
  55. /*-------------------
  56. Background Colors
  57. --------------------*/
  58. /* Used for differentiating neutrals */
  59. /* Used for differentiating layers */
  60. /*-------------------
  61. Grid
  62. --------------------*/
  63. /*-------------------
  64. Breakpoints
  65. --------------------*/
  66. /*******************************
  67. Power-User
  68. *******************************/
  69. /*-------------------
  70. Icons
  71. --------------------*/
  72. /* Max Width of Icon */
  73. /*-------------------
  74. Easing
  75. --------------------*/
  76. /*--- Light Variations ---*/
  77. /*--- Neutrals ---*/
  78. /*--- Colored Backgrounds ---*/
  79. /*--- Colored Text ---*/
  80. /*--- Colored Headers ---*/
  81. /*-------------------
  82. Emotive Colors
  83. --------------------*/
  84. /* Mood */
  85. /* Solid Background Color */
  86. /* Status */
  87. /* Darkened Headers */
  88. /*-------------------
  89. Neutral Text
  90. --------------------*/
  91. /*-------------------
  92. Brand Colors
  93. --------------------*/
  94. /*-------------------
  95. Grid Columns
  96. --------------------*/
  97. /*-------------------
  98. Borders
  99. --------------------*/
  100. /*-------------------
  101. Sizes
  102. --------------------*/
  103. /*-------------------
  104. Transitions
  105. --------------------*/
  106. /*******************************
  107. States
  108. *******************************/
  109. /*-------------------
  110. Disabled
  111. --------------------*/
  112. /*-------------------
  113. Hover
  114. --------------------*/
  115. /*--- Colors ---*/
  116. /*--- Emotive ---*/
  117. /*--- Neutrals ---*/
  118. /*-------------------
  119. Down (:active)
  120. --------------------*/
  121. /*--- Colors ---*/
  122. /*--- Emotive ---*/
  123. /*--- Neutrals ---*/
  124. /*-------------------
  125. Active
  126. --------------------*/
  127. /*--- Standard ---*/
  128. /*--- Emotive ---*/
  129. /*--- Neutrals ---*/
  130. /*******************************
  131. Feed
  132. *******************************/
  133. /*-------------------
  134. Feed
  135. --------------------*/
  136. /*-------------------
  137. Elements
  138. --------------------*/
  139. /* Event */
  140. /* Event Label */
  141. /* Icon Label */
  142. /* Image Label */
  143. /* Content w/ Label */
  144. /* Content */
  145. /* Date */
  146. /* Summary */
  147. /* Summary Image */
  148. /* Summary Date */
  149. /* User */
  150. /* Extra Summary Data */
  151. /* Extra Images */
  152. /* Extra Text */
  153. /* Metadata Group */
  154. /* Like */
  155. /* Metadata Divider */
  156. /*-------------------
  157. Variations
  158. --------------------*/
  159. /* Size */
  160. /*------------------
  161. Load Theme
  162. -------------------*/
  163. /*------------------
  164. Load Site
  165. -------------------*/
  166. /*******************************
  167. User Global Variables
  168. *******************************/
  169. /*******************************
  170. User Variable Overrides
  171. *******************************/
  172. /*------------------
  173. Override Mix-in
  174. -------------------*/
  175. /*******************************
  176. Activity Feed
  177. *******************************/
  178. .ui.feed {
  179. margin: 1em;
  180. }
  181. .ui.feed:first-child {
  182. margin-top: 0em;
  183. }
  184. .ui.feed:last-child {
  185. margin-top: 0em;
  186. }
  187. /*******************************
  188. Content
  189. *******************************/
  190. /* Event */
  191. .ui.feed > .event {
  192. display: table;
  193. width: 100%;
  194. padding: 0.5rem 0em;
  195. margin: 0em;
  196. background: none;
  197. border-top: none;
  198. }
  199. .ui.feed > .event:first-child {
  200. border-top: 0px;
  201. padding-top: 0em;
  202. }
  203. .ui.feed > .event:last-child {
  204. padding-bottom: 0em;
  205. }
  206. /* Event Label */
  207. .ui.feed > .event > .label {
  208. display: table-cell;
  209. width: 2.5em;
  210. height: 2.5em;
  211. vertical-align: top;
  212. text-align: left;
  213. }
  214. .ui.feed > .event > .label .icon {
  215. opacity: 1;
  216. font-size: 1.5em;
  217. width: 100%;
  218. padding: 0.25em;
  219. background: none;
  220. border: none;
  221. border-radius: none;
  222. color: rgba(0, 0, 0, 0.6);
  223. }
  224. .ui.feed > .event > .label img {
  225. width: 100%;
  226. height: auto;
  227. border-radius: 500rem;
  228. }
  229. .ui.feed > .event > .label + .content {
  230. padding: 0.5em 0em 0.5em 1.5em;
  231. }
  232. /* Content */
  233. .ui.feed > .event > .content {
  234. display: table-cell;
  235. vertical-align: top;
  236. text-align: left;
  237. word-wrap: break-word;
  238. }
  239. .ui.feed > .event:last-child > .content {
  240. padding-bottom: 0em;
  241. }
  242. /* Link */
  243. .ui.feed > .event > .content a {
  244. cursor: pointer;
  245. }
  246. /*--------------
  247. Date
  248. ---------------*/
  249. .ui.feed > .event > .content .date {
  250. margin: -0.5rem 0em 0em;
  251. padding: 0em;
  252. font-weight: normal;
  253. font-size: 1em;
  254. font-style: normal;
  255. color: rgba(0, 0, 0, 0.4);
  256. }
  257. /*--------------
  258. Summary
  259. ---------------*/
  260. .ui.feed > .event > .content .summary {
  261. margin: 0em;
  262. font-size: 1em;
  263. font-weight: bold;
  264. color: rgba(0, 0, 0, 0.8);
  265. }
  266. /* Summary Image */
  267. .ui.feed > .event > .content .summary img {
  268. display: inline-block;
  269. width: auto;
  270. height: 2em;
  271. margin: -0.25em 0.25em 0em 0em;
  272. border-radius: 0.25em;
  273. vertical-align: middle;
  274. }
  275. /*--------------
  276. User
  277. ---------------*/
  278. .ui.feed > .event > .content .user {
  279. display: inline-block;
  280. font-weight: bold;
  281. margin-right: 0em;
  282. vertical-align: baseline;
  283. }
  284. .ui.feed > .event > .content .user img {
  285. margin: -0.25em 0.25em 0em 0em;
  286. width: auto;
  287. height: 2em;
  288. vertical-align: middle;
  289. }
  290. /*--------------
  291. Inline Date
  292. ---------------*/
  293. /* Date inside Summary */
  294. .ui.feed > .event > .content .summary > .date {
  295. display: inline-block;
  296. float: none;
  297. font-weight: normal;
  298. font-size: 0.875em;
  299. font-style: normal;
  300. margin: 0em 0em 0em 0.5em;
  301. padding: 0em;
  302. color: rgba(0, 0, 0, 0.4);
  303. }
  304. /*--------------
  305. Extra Summary
  306. ---------------*/
  307. .ui.feed > .event > .content .extra {
  308. margin: 0.5em 0em 0em;
  309. background: none;
  310. padding: 0em;
  311. color: rgba(0, 0, 0, 0.8);
  312. }
  313. /* Images */
  314. .ui.feed > .event > .content .extra.images img {
  315. display: inline-block;
  316. margin: 0em 0.25em 0em 0em;
  317. width: 6em;
  318. }
  319. /* Text */
  320. .ui.feed > .event > .content .extra.text {
  321. padding: 0.5em 1em;
  322. border-left: 3px solid rgba(0, 0, 0, 0.2);
  323. font-size: 1em;
  324. max-width: 500px;
  325. line-height: 1.33;
  326. }
  327. /*--------------
  328. Meta
  329. ---------------*/
  330. .ui.feed > .event > .content .meta {
  331. display: inline-block;
  332. font-size: 0.875em;
  333. margin: 0.5em 0em 0em;
  334. background: none;
  335. border: none;
  336. border-radius: 0;
  337. box-shadow: none;
  338. padding: 0em;
  339. color: rgba(0, 0, 0, 0.6);
  340. }
  341. .ui.feed > .event > .content .meta > * {
  342. position: relative;
  343. margin-left: 0.75em;
  344. }
  345. .ui.feed > .event > .content .meta > *:after {
  346. content: '';
  347. color: rgba(0, 0, 0, 0.2);
  348. top: 0em;
  349. left: -1em;
  350. opacity: 1;
  351. position: absolute;
  352. vertical-align: top;
  353. }
  354. .ui.feed > .event > .content .meta .like {
  355. color: '';
  356. -webkit-transition: 0.2s color ease;
  357. transition: 0.2s color ease;
  358. }
  359. .ui.feed > .event > .content .meta .like:hover .icon {
  360. color: #ff2733;
  361. }
  362. .ui.feed > .event > .content .meta .active.like .icon {
  363. color: #ef404a;
  364. }
  365. /* First element */
  366. .ui.feed > .event > .content .meta > :first-child {
  367. margin-left: 0em;
  368. }
  369. .ui.feed > .event > .content .meta > :first-child::after {
  370. display: none;
  371. }
  372. /* Action */
  373. .ui.feed > .event > .content .meta a,
  374. .ui.feed > .event > .content .meta > .icon {
  375. cursor: pointer;
  376. opacity: 1;
  377. color: rgba(0, 0, 0, 0.5);
  378. -webkit-transition: color 0.25s ease;
  379. transition: color 0.25s ease;
  380. }
  381. .ui.feed > .event > .content .meta a:hover,
  382. .ui.feed > .event > .content .meta a:hover .icon,
  383. .ui.feed > .event > .content .meta > .icon:hover {
  384. color: rgba(0, 0, 0, 0.8);
  385. }
  386. /*******************************
  387. Variations
  388. *******************************/
  389. .ui.small.feed {
  390. font-size: 0.9em;
  391. }
  392. .ui.feed {
  393. font-size: 1em;
  394. }
  395. .ui.large.feed {
  396. font-size: 1.1em;
  397. }
  398. /*******************************
  399. Overrides
  400. *******************************/
  401. /*******************************
  402. User Variable Overrides
  403. *******************************/