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.

385 lines
9.1 KiB

10 years ago
10 years ago
10 years ago
10 years ago
  1. /*
  2. * # Semantic - Comment
  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. /*--- Light Colors ---*/
  53. /*-------------------
  54. Page
  55. --------------------*/
  56. /* Used to match floats with text */
  57. /*-------------------
  58. Background Colors
  59. --------------------*/
  60. /* Used for differentiating neutrals */
  61. /* Used for differentiating layers */
  62. /*-------------------
  63. Grid
  64. --------------------*/
  65. /*-------------------
  66. Breakpoints
  67. --------------------*/
  68. /*******************************
  69. Power-User
  70. *******************************/
  71. /*-------------------
  72. Icons
  73. --------------------*/
  74. /* Max Width of Icon */
  75. /*-------------------
  76. Easing
  77. --------------------*/
  78. /*--- Neutrals ---*/
  79. /*--- Colored Backgrounds ---*/
  80. /*--- Colored Text ---*/
  81. /*--- Colored Headers ---*/
  82. /*-------------------
  83. Emotive Colors
  84. --------------------*/
  85. /* Mood */
  86. /* Solid Background Color */
  87. /* Status */
  88. /* Darkened Headers */
  89. /*-------------------
  90. Neutral Text
  91. --------------------*/
  92. /*-------------------
  93. Brand Colors
  94. --------------------*/
  95. /*-------------------
  96. Grid Columns
  97. --------------------*/
  98. /*-------------------
  99. Borders
  100. --------------------*/
  101. /*-------------------
  102. Sizes
  103. --------------------*/
  104. /*-------------------
  105. Transitions
  106. --------------------*/
  107. /*******************************
  108. States
  109. *******************************/
  110. /*-------------------
  111. Disabled
  112. --------------------*/
  113. /*-------------------
  114. Hover
  115. --------------------*/
  116. /*--- Colors ---*/
  117. /*--- Emotive ---*/
  118. /*--- Neutrals ---*/
  119. /*-------------------
  120. Down (:active)
  121. --------------------*/
  122. /*--- Colors ---*/
  123. /*--- Emotive ---*/
  124. /*--- Neutrals ---*/
  125. /*-------------------
  126. Active
  127. --------------------*/
  128. /*--- Standard ---*/
  129. /*--- Emotive ---*/
  130. /*--- Neutrals ---*/
  131. /*******************************
  132. Comments
  133. *******************************/
  134. /*-------------------
  135. View
  136. --------------------*/
  137. /*-------------------
  138. Elements
  139. --------------------*/
  140. /* Comment */
  141. /* Nested Comment */
  142. /* Avatar */
  143. /* Content */
  144. /* Author */
  145. /* Metadata */
  146. /* Text */
  147. /* Actions */
  148. /* Reply */
  149. /*-------------------
  150. Variations
  151. --------------------*/
  152. /* Threaded */
  153. /* Minimal */
  154. /* Sizes */
  155. /*------------------
  156. Load Theme
  157. -------------------*/
  158. /*------------------
  159. Load Site
  160. -------------------*/
  161. /*******************************
  162. User Global Variables
  163. *******************************/
  164. /*******************************
  165. User Variable Overrides
  166. *******************************/
  167. /*------------------
  168. Override Mix-in
  169. -------------------*/
  170. /*******************************
  171. Standard
  172. *******************************/
  173. /*--------------
  174. Comments
  175. ---------------*/
  176. .ui.comments {
  177. margin: 1.5em 0em;
  178. max-width: 650px;
  179. }
  180. .ui.comments:first-child {
  181. margin-top: 0em;
  182. }
  183. .ui.comments:last-child {
  184. margin-bottom: 0em;
  185. }
  186. /*--------------
  187. Comment
  188. ---------------*/
  189. .ui.comments .comment {
  190. position: relative;
  191. background: none;
  192. margin: 0.5em 0em 0em;
  193. padding: 0.5em 0em 0em;
  194. border: none;
  195. border-top: none;
  196. line-height: 1.2;
  197. }
  198. .ui.comments .comment:first-child {
  199. margin-top: 0em;
  200. padding-top: 0em;
  201. }
  202. /*--------------------
  203. Nested Comments
  204. ---------------------*/
  205. .ui.comments .comment .comments {
  206. margin: 0em 0em 0.5em 0.5em;
  207. padding: 1em 0em 1em 1em;
  208. }
  209. .ui.comments .comment .comments:before {
  210. position: absolute;
  211. top: 0px;
  212. left: 0px;
  213. }
  214. .ui.comments .comment .comments .comment {
  215. border: none;
  216. border-top: none;
  217. background: none;
  218. }
  219. /*--------------
  220. Avatar
  221. ---------------*/
  222. .ui.comments .comment .avatar {
  223. display: block;
  224. width: 2.5em;
  225. height: auto;
  226. float: left;
  227. margin: 0.2em 0em 0em;
  228. }
  229. .ui.comments .comment img.avatar,
  230. .ui.comments .comment .avatar img {
  231. display: block;
  232. margin: 0em auto;
  233. width: 100%;
  234. height: 100%;
  235. border-radius: 0.25rem;
  236. }
  237. /*--------------
  238. Content
  239. ---------------*/
  240. .ui.comments .comment > .content {
  241. display: block;
  242. }
  243. /* If there is an avatar move content over */
  244. .ui.comments .comment > .avatar ~ .content {
  245. margin-left: 3.5em;
  246. }
  247. /*--------------
  248. Author
  249. ---------------*/
  250. .ui.comments .comment .author {
  251. font-size: 1em;
  252. color: rgba(0, 0, 0, 0.8);
  253. font-weight: bold;
  254. }
  255. .ui.comments .comment a.author {
  256. cursor: pointer;
  257. }
  258. .ui.comments .comment a.author:hover {
  259. color: #00b2f3;
  260. }
  261. /*--------------
  262. Metadata
  263. ---------------*/
  264. .ui.comments .comment .metadata {
  265. display: inline-block;
  266. margin-left: 0.5em;
  267. color: rgba(0, 0, 0, 0.4);
  268. font-size: 0.875em;
  269. }
  270. .ui.comments .comment .metadata > * {
  271. display: inline-block;
  272. margin: 0em 0.5em 0em 0em;
  273. }
  274. .ui.comments .comment .metadata > :last-child {
  275. margin-right: 0em;
  276. }
  277. /*--------------------
  278. Comment Text
  279. ---------------------*/
  280. .ui.comments .comment .text {
  281. margin: 0.25em 0em 0.5em;
  282. font-size: 1em;
  283. word-wrap: break-word;
  284. color: rgba(0, 0, 0, 0.8);
  285. line-height: 1.3;
  286. }
  287. /*--------------------
  288. User Actions
  289. ---------------------*/
  290. .ui.comments .comment .actions {
  291. font-size: 0.875em;
  292. }
  293. .ui.comments .comment .actions a {
  294. cursor: pointer;
  295. display: inline-block;
  296. margin: 0em 0.75em 0em 0em;
  297. color: rgba(0, 0, 0, 0.4);
  298. }
  299. .ui.comments .comment .actions a:last-child {
  300. margin-right: 0em;
  301. }
  302. .ui.comments .comment .actions a.active,
  303. .ui.comments .comment .actions a:hover {
  304. color: rgba(0, 0, 0, 0.8);
  305. }
  306. /*--------------------
  307. Reply Form
  308. ---------------------*/
  309. .ui.comments > .reply.form {
  310. margin-top: 1em;
  311. }
  312. .ui.comments .comment .reply.form {
  313. width: 100%;
  314. margin-top: 1em;
  315. }
  316. .ui.comments .reply.form textarea {
  317. font-size: 1em;
  318. height: 12em;
  319. }
  320. /*******************************
  321. State
  322. *******************************/
  323. .ui.collapsed.comments,
  324. .ui.comments .collapsed.comments,
  325. .ui.comments .collapsed.comment {
  326. display: none;
  327. }
  328. /*******************************
  329. Variations
  330. *******************************/
  331. /*--------------------
  332. Threaded
  333. ---------------------*/
  334. .ui.threaded.comments .comment .comments {
  335. margin: -1.5em 0 -1em 1.25em;
  336. padding: 3em 0em 2em 2.25em;
  337. box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.1);
  338. }
  339. /*--------------------
  340. Minimal
  341. ---------------------*/
  342. .ui.minimal.comments .comment .actions {
  343. opacity: 0;
  344. position: absolute;
  345. top: 0px;
  346. right: 0px;
  347. left: auto;
  348. -webkit-transition: opacity 0.2s ease;
  349. transition: opacity 0.2s ease;
  350. -webkit-transition-delay: 0.1s;
  351. transition-delay: 0.1s;
  352. }
  353. .ui.minimal.comments .comment > .content:hover > .actions {
  354. opacity: 1;
  355. }
  356. /*--------------------
  357. Sizes
  358. ---------------------*/
  359. .ui.small.comments {
  360. font-size: 0.9em;
  361. }
  362. .ui.comments {
  363. font-size: 1em;
  364. }
  365. .ui.large.comments {
  366. font-size: 1.1em;
  367. }
  368. .ui.huge.comments {
  369. font-size: 1.2em;
  370. }
  371. /*******************************
  372. Overrides
  373. *******************************/
  374. /*******************************
  375. User Variable Overrides
  376. *******************************/