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.

484 lines
26 KiB

10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
  1. /*
  2. * # Semantic - Rating
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Copyright 2014 Contributor
  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 Defaults
  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. /* Status */
  86. /*-------------------
  87. Neutral Text
  88. --------------------*/
  89. /*-------------------
  90. Brand Colors
  91. --------------------*/
  92. /*-------------------
  93. Borders
  94. --------------------*/
  95. /*-------------------
  96. Sizes
  97. --------------------*/
  98. /*-------------------
  99. Transitions
  100. --------------------*/
  101. /*-------------------
  102. Derived Values
  103. --------------------*/
  104. /* Makes sure padded grid can fit at 320px */
  105. /* Used to match floats with text */
  106. /* Positive / Negative Dupes */
  107. /* Header Colors */
  108. /* Responsive */
  109. /* Columns */
  110. /*******************************
  111. States
  112. *******************************/
  113. /*-------------------
  114. Disabled
  115. --------------------*/
  116. /*-------------------
  117. Hover
  118. --------------------*/
  119. /*--- Colors ---*/
  120. /*--- Emotive ---*/
  121. /*--- Neutrals ---*/
  122. /*-------------------
  123. Down (:active)
  124. --------------------*/
  125. /*--- Colors ---*/
  126. /*--- Emotive ---*/
  127. /*--- Neutrals ---*/
  128. /*-------------------
  129. Active
  130. --------------------*/
  131. /*--- Standard ---*/
  132. /*--- Emotive ---*/
  133. /*--- Neutrals ---*/
  134. /*******************************
  135. Rating
  136. *******************************/
  137. /*-------------------
  138. Types
  139. --------------------*/
  140. /* Star */
  141. /* Heart */
  142. /*-------------------
  143. States
  144. --------------------*/
  145. /*-------------------
  146. Variations
  147. --------------------*/
  148. /*------------------
  149. Load Theme
  150. -------------------*/
  151. /*******************************
  152. Site Settings
  153. *******************************/
  154. /*-------------------
  155. Paths
  156. --------------------*/
  157. /*-------------------
  158. Fonts
  159. --------------------*/
  160. /*-------------------
  161. Site Colors
  162. --------------------*/
  163. /*--- Colors ---*/
  164. /*--- Light Colors ---*/
  165. /*-------------------
  166. Page
  167. --------------------*/
  168. /*-------------------
  169. Background Colors
  170. --------------------*/
  171. /* Used for differentiating neutrals */
  172. /* Used for differentiating layers */
  173. /*-------------------
  174. Grid
  175. --------------------*/
  176. /*-------------------
  177. Breakpoints
  178. --------------------*/
  179. /*******************************
  180. Power-User
  181. *******************************/
  182. /*-------------------
  183. Icons
  184. --------------------*/
  185. /* Max Width of Icon */
  186. /*-------------------
  187. Easing
  188. --------------------*/
  189. /*--- Neutrals ---*/
  190. /*--- Colored Backgrounds ---*/
  191. /*--- Colored Text ---*/
  192. /*--- Colored Headers ---*/
  193. /*-------------------
  194. Emotive Colors
  195. --------------------*/
  196. /* Mood */
  197. /* Status */
  198. /*-------------------
  199. Neutral Text
  200. --------------------*/
  201. /*-------------------
  202. Brand Colors
  203. --------------------*/
  204. /*-------------------
  205. Borders
  206. --------------------*/
  207. /*-------------------
  208. Sizes
  209. --------------------*/
  210. /*-------------------
  211. Transitions
  212. --------------------*/
  213. /*-------------------
  214. Derived Values
  215. --------------------*/
  216. /* Makes sure padded grid can fit at 320px */
  217. /* Used to match floats with text */
  218. /* Positive / Negative Dupes */
  219. /* Header Colors */
  220. /* Responsive */
  221. /* Columns */
  222. /*******************************
  223. States
  224. *******************************/
  225. /*-------------------
  226. Disabled
  227. --------------------*/
  228. /*-------------------
  229. Hover
  230. --------------------*/
  231. /*--- Colors ---*/
  232. /*--- Emotive ---*/
  233. /*--- Neutrals ---*/
  234. /*-------------------
  235. Down (:active)
  236. --------------------*/
  237. /*--- Colors ---*/
  238. /*--- Emotive ---*/
  239. /*--- Neutrals ---*/
  240. /*-------------------
  241. Active
  242. --------------------*/
  243. /*--- Standard ---*/
  244. /*--- Emotive ---*/
  245. /*--- Neutrals ---*/
  246. /*******************************
  247. Rating
  248. *******************************/
  249. /*-------------------
  250. Types
  251. --------------------*/
  252. /* Star */
  253. /* Heart */
  254. /*-------------------
  255. States
  256. --------------------*/
  257. /*-------------------
  258. Variations
  259. --------------------*/
  260. /*------------------
  261. Load Site
  262. -------------------*/
  263. /*******************************
  264. User Global Variables
  265. *******************************/
  266. /*******************************
  267. Overrides
  268. *******************************/
  269. /*------------------
  270. Override Loader
  271. -------------------*/
  272. /*******************************
  273. Rating
  274. *******************************/
  275. .ui.rating {
  276. display: inline-block;
  277. font-size: 0em;
  278. vertical-align: baseline;
  279. margin: 0em 0.5rem 0em 0em;
  280. }
  281. .ui.rating:last-child {
  282. margin-right: 0em;
  283. }
  284. .ui.rating:before {
  285. display: block;
  286. content: '';
  287. visibility: hidden;
  288. clear: both;
  289. height: 0;
  290. }
  291. /* Icon */
  292. .ui.rating .icon {
  293. cursor: pointer;
  294. margin: 0em;
  295. width: 1.1em;
  296. text-align: center;
  297. height: auto;
  298. padding: 0em;
  299. font-weight: normal;
  300. font-style: normal;
  301. vertical-align: baseline;
  302. }
  303. /*******************************
  304. Types
  305. *******************************/
  306. /*-------------------
  307. Star
  308. --------------------*/
  309. /* Inactive */
  310. .ui.star.rating .icon {
  311. width: 1.1em;
  312. color: rgba(0, 0, 0, 0.15);
  313. }
  314. /* Active Star */
  315. .ui.star.rating .active.icon {
  316. color: #ffe623 !important;
  317. text-shadow: 0px -1px 0px #cfa300, -1px 0px 0px #cfa300, 0px 1px 0px #cfa300, 1px 0px 0px #cfa300;
  318. }
  319. /* Selected Star */
  320. .ui.star.rating .icon.selected,
  321. .ui.star.rating .icon.selected.active {
  322. color: #ffb70a !important;
  323. }
  324. .ui.star.rating.partial {
  325. position: relative;
  326. z-index: 1;
  327. }
  328. .ui.star.rating.partial:before {
  329. position: absolute;
  330. z-index: -1;
  331. }
  332. /*-------------------
  333. Heart
  334. --------------------*/
  335. .ui.heart.rating .icon {
  336. width: 1.25em;
  337. color: rgba(0, 0, 0, 0.15);
  338. }
  339. /* Active Heart */
  340. .ui.heart.rating .active.icon {
  341. color: #ff2733 !important;
  342. text-shadow: 0px -1px 0px #9e0000, -1px 0px 0px #9e0000, 0px 1px 0px #9e0000, 1px 0px 0px #9e0000;
  343. }
  344. /* Selected Heart */
  345. .ui.heart.rating .icon.selected,
  346. .ui.heart.rating .icon.selected.active {
  347. color: #ff2733 !important;
  348. }
  349. /*******************************
  350. States
  351. *******************************/
  352. /* Inactive Icon */
  353. .ui.rating .icon {
  354. color: rgba(0, 0, 0, 0.15);
  355. }
  356. /* Active Icon */
  357. .ui.rating .active.icon {
  358. color: rgba(0, 0, 0, 0.85);
  359. }
  360. /* Selected Icon */
  361. .ui.rating .icon.selected,
  362. .ui.rating .icon.selected.active {
  363. color: rgba(0, 0, 0, 0.8);
  364. }
  365. /*-------------------
  366. Disabled
  367. --------------------*/
  368. /* disabled rating */
  369. .ui.disabled.rating .icon {
  370. cursor: default;
  371. }
  372. /*-------------------
  373. Interacting (Active)
  374. --------------------*/
  375. /* Selected Rating */
  376. .ui.rating.selected .active.icon {
  377. opacity: 0.5;
  378. }
  379. .ui.rating.selected .icon.selected,
  380. .ui.rating .icon.selected {
  381. opacity: 1;
  382. }
  383. /*******************************
  384. Variations
  385. *******************************/
  386. .ui.mini.rating .icon {
  387. font-size: 0.7rem;
  388. }
  389. .ui.tiny.rating .icon {
  390. font-size: 0.8rem;
  391. }
  392. .ui.small.rating .icon {
  393. font-size: 0.875rem;
  394. }
  395. .ui.rating .icon {
  396. font-size: 1rem;
  397. }
  398. .ui.large.rating .icon {
  399. font-size: 1.1rem;
  400. }
  401. .ui.huge.rating .icon {
  402. font-size: 1.5rem;
  403. }
  404. .ui.massive.rating .icon {
  405. font-size: 2rem;
  406. }
  407. /* Realign */
  408. .ui.large.rating,
  409. .ui.huge.rating,
  410. .ui.massive.rating {
  411. vertical-align: middle;
  412. }
  413. /*******************************
  414. Overrides
  415. *******************************/
  416. @font-face {
  417. font-family: 'Rating';
  418. src: url(data:application/x-font-ttf;charset=utf-8;base64,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
  419. font-weight: normal;
  420. font-style: normal;
  421. }
  422. .ui.rating .icon {
  423. font-family: 'Rating';
  424. line-height: 1;
  425. height: 1em;
  426. -webkit-backface-visibility: hidden;
  427. backface-visibility: hidden;
  428. font-weight: normal;
  429. font-style: normal;
  430. text-align: center;
  431. }
  432. /* Empty Star */
  433. .ui.rating .icon:before {
  434. content: '\f006';
  435. }
  436. /* Active Star */
  437. .ui.rating .active.icon:before {
  438. content: '\f005';
  439. }
  440. /*-------------------
  441. Star
  442. --------------------*/
  443. /* Unfilled Star */
  444. .ui.star.rating .icon:before {
  445. content: '\f005';
  446. }
  447. /* Active Star */
  448. .ui.star.rating .active.icon:before {
  449. content: '\f005';
  450. }
  451. /* Partial */
  452. .ui.star.rating .partial.icon:before {
  453. content: '\f006';
  454. }
  455. .ui.star.rating .partial.icon {
  456. content: '\f005';
  457. }
  458. /*-------------------
  459. Heart
  460. --------------------*/
  461. /* Empty Heart
  462. .ui.heart.rating .icon:before {
  463. content: '\f08a';
  464. }
  465. */
  466. .ui.heart.rating .icon:before {
  467. content: '\f004';
  468. }
  469. /* Active */
  470. .ui.heart.rating .active.icon:before {
  471. content: '\f004';
  472. }
  473. /*******************************
  474. Overrides
  475. *******************************/