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.

384 lines
9.1 KiB

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