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
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 - 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. *******************************/