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.

1176 lines
15 KiB

  1. /*
  2. * # Semantic - Icon
  3. * http://github.com/jlukic/semantic-ui/
  4. *
  5. *
  6. * Copyright 2013 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. @font-face {
  12. font-family: 'Basic Icons';
  13. src: url("fonts/icons.eot");
  14. src: url("fonts/icons.eot?#iefix") format('embedded-opentype'), url("fonts/icons.svg#icons") format('svg'), url("fonts/icons.woff") format('woff'), url("fonts/icons.ttf") format('truetype');
  15. font-style: normal;
  16. font-weight: normal;
  17. font-variant: normal;
  18. text-decoration: inherit;
  19. text-transform: none;
  20. }
  21. i.icon {
  22. display: inline-block;
  23. opacity: 0.75;
  24. margin: 0em 0.25em 0em 0em;
  25. width: 1.23em;
  26. height: 1em;
  27. font-family: 'Basic Icons';
  28. font-style: normal;
  29. line-height: 1;
  30. font-weight: normal;
  31. text-decoration: inherit;
  32. text-align: center;
  33. speak: none;
  34. -webkit-box-sizing: border-box;
  35. -moz-box-sizing: border-box;
  36. box-sizing: border-box;
  37. font-smoothing: antialiased;
  38. }
  39. /*******************************
  40. Types
  41. *******************************/
  42. /*--------------
  43. Loading
  44. ---------------*/
  45. i.icon.loading {
  46. -webkit-animation: icon-loading 2s linear infinite;
  47. animation: icon-loading 2s linear infinite;
  48. }
  49. @-webkit-keyframes icon-loading {
  50. from {
  51. -webkit-transform: rotate(0deg);
  52. transform: rotate(0deg);
  53. }
  54. to {
  55. -webkit-transform: rotate(360deg);
  56. transform: rotate(360deg);
  57. }
  58. }
  59. @keyframes icon-loading {
  60. from {
  61. -webkit-transform: rotate(0deg);
  62. -ms-transform: rotate(0deg);
  63. transform: rotate(0deg);
  64. }
  65. to {
  66. -webkit-transform: rotate(360deg);
  67. -ms-transform: rotate(360deg);
  68. transform: rotate(360deg);
  69. }
  70. }
  71. /*******************************
  72. States
  73. *******************************/
  74. i.icon.hover {
  75. opacity: 1;
  76. }
  77. i.icon.active {
  78. opacity: 1;
  79. }
  80. i.emphasized.icon {
  81. opacity: 1;
  82. }
  83. i.icon.disabled {
  84. opacity: 0.3;
  85. }
  86. /*******************************
  87. Variations
  88. *******************************/
  89. /*-------------------
  90. Link
  91. --------------------*/
  92. i.link.icon {
  93. cursor: pointer;
  94. opacity: 0.75;
  95. -webkit-transition: opacity 0.25s ease;
  96. transition: opacity 0.25s ease;
  97. }
  98. i.link.icon:hover {
  99. opacity: 1 !important;
  100. }
  101. /*-------------------
  102. Circular
  103. --------------------*/
  104. i.circular.icon {
  105. border-radius: 500em !important;
  106. padding: 0.5em 0.35em !important;
  107. -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  108. box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  109. line-height: 1 !important;
  110. width: 2em !important;
  111. height: 2em !important;
  112. }
  113. i.circular.inverted.icon {
  114. border: none;
  115. -webkit-box-shadow: none;
  116. box-shadow: none;
  117. }
  118. /*-------------------
  119. Flipped
  120. --------------------*/
  121. i.flipped.icon,
  122. i.horizontally.flipped.icon {
  123. -webkit-transform: scale(-1, 1);
  124. -ms-transform: scale(-1, 1);
  125. transform: scale(-1, 1);
  126. }
  127. i.vertically.flipped.icon {
  128. -webkit-transform: scale(1, -1);
  129. -ms-transform: scale(1, -1);
  130. transform: scale(1, -1);
  131. }
  132. /*-------------------
  133. Rotated
  134. --------------------*/
  135. i.rotated.icon,
  136. i.right.rotated.icon,
  137. i.clockwise.rotated.icon {
  138. -webkit-transform: rotate(90deg);
  139. -ms-transform: rotate(90deg);
  140. transform: rotate(90deg);
  141. }
  142. i.left.rotated.icon,
  143. i.counterclockwise.rotated.icon {
  144. -webkit-transform: rotate(-90deg);
  145. -ms-transform: rotate(-90deg);
  146. transform: rotate(-90deg);
  147. }
  148. /*-------------------
  149. Square
  150. --------------------*/
  151. i.square.icon {
  152. width: 2em;
  153. height: 2em;
  154. padding: 2em !important;
  155. -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  156. box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
  157. vertical-align: baseline;
  158. }
  159. i.square.inverted.icon {
  160. border: none;
  161. -webkit-box-shadow: none;
  162. box-shadow: none;
  163. }
  164. /*-------------------
  165. Inverted
  166. --------------------*/
  167. i.inverted.icon {
  168. background-color: #222222;
  169. color: #FFFFFF;
  170. }
  171. /*-------------------
  172. Colors
  173. --------------------*/
  174. i.black.icon {
  175. color: #555555 !important;
  176. }
  177. i.blue.icon {
  178. color: #6ecff5 !important;
  179. }
  180. i.green.icon {
  181. color: #5bbd72 !important;
  182. }
  183. i.orange.icon {
  184. color: #e96633 !important;
  185. }
  186. i.pink.icon {
  187. color: #d9499a !important;
  188. }
  189. i.purple.icon {
  190. color: #564f8a !important;
  191. }
  192. i.red.icon {
  193. color: #d95c5c !important;
  194. }
  195. i.teal.icon {
  196. color: #00b5ad !important;
  197. }
  198. i.yellow.icon {
  199. color: #ffcb08 !important;
  200. }
  201. /*-------------------
  202. Inverted Colors
  203. --------------------*/
  204. i.black.icon {
  205. background-color: #555555 !important;
  206. color: #FFFFFF !important;
  207. }
  208. i.blue.icon {
  209. background-color: #6ecff5 !important;
  210. color: #FFFFFF !important;
  211. }
  212. i.green.icon {
  213. background-color: #5bbd72 !important;
  214. color: #FFFFFF !important;
  215. }
  216. i.orange.icon {
  217. background-color: #e96633 !important;
  218. color: #FFFFFF !important;
  219. }
  220. i.pink.icon {
  221. background-color: #d9499a !important;
  222. color: #FFFFFF !important;
  223. }
  224. i.purple.icon {
  225. background-color: #564f8a !important;
  226. color: #FFFFFF !important;
  227. }
  228. i.red.icon {
  229. background-color: #d95c5c !important;
  230. color: #FFFFFF !important;
  231. }
  232. i.teal.icon {
  233. background-color: #00b5ad !important;
  234. color: #FFFFFF !important;
  235. }
  236. i.yellow.icon {
  237. background-color: #ffcb08 !important;
  238. color: #FFFFFF !important;
  239. }
  240. /*-------------------
  241. Sizes
  242. --------------------*/
  243. i.small.icon {
  244. font-size: 0.875em;
  245. }
  246. i.icon {
  247. font-size: 1em;
  248. }
  249. i.large.icon {
  250. font-size: 1.5em;
  251. vertical-align: middle;
  252. }
  253. i.big.icon {
  254. font-size: 2em;
  255. vertical-align: middle;
  256. }
  257. i.huge.icon {
  258. font-size: 4em;
  259. vertical-align: middle;
  260. }
  261. i.massive.icon {
  262. font-size: 8em;
  263. vertical-align: middle;
  264. }
  265. /* basic.icons available */
  266. i.basic.icon.circle.attention:before {
  267. content: '\2757';
  268. }
  269. /* '❗' */
  270. i.basic.icon.circle.help:before {
  271. content: '\e704';
  272. }
  273. /* '' */
  274. i.basic.icon.circle.info:before {
  275. content: '\e705';
  276. }
  277. /* '' */
  278. i.basic.icon.add:before {
  279. content: '\2795';
  280. }
  281. /* '➕' */
  282. i.basic.icon.chart:before {
  283. content: '📈';
  284. }
  285. /* '\1f4c8' */
  286. i.basic.icon.chart.bar:before {
  287. content: '📊';
  288. }
  289. /* '\1f4ca' */
  290. i.basic.icon.chart.pie:before {
  291. content: '\e7a2';
  292. }
  293. /* '' */
  294. i.basic.icon.resize.full:before {
  295. content: '\e744';
  296. }
  297. /* '' */
  298. i.basic.icon.resize.horizontal:before {
  299. content: '\2b0d';
  300. }
  301. /* '⬍' */
  302. i.basic.icon.resize.small:before {
  303. content: '\e746';
  304. }
  305. /* '' */
  306. i.basic.icon.resize.vertical:before {
  307. content: '\2b0c';
  308. }
  309. /* '⬌' */
  310. i.basic.icon.down:before {
  311. content: '\2193';
  312. }
  313. /* '↓' */
  314. i.basic.icon.down.triangle:before {
  315. content: '\25be';
  316. }
  317. /* '▾' */
  318. i.basic.icon.down.arrow:before {
  319. content: '\e75c';
  320. }
  321. /* '' */
  322. i.basic.icon.left:before {
  323. content: '\2190';
  324. }
  325. /* '←' */
  326. i.basic.icon.left.triangle:before {
  327. content: '\25c2';
  328. }
  329. /* '◂' */
  330. i.basic.icon.left.arrow:before {
  331. content: '\e75d';
  332. }
  333. /* '' */
  334. i.basic.icon.right:before {
  335. content: '\2192';
  336. }
  337. /* '→' */
  338. i.basic.icon.right.triangle:before {
  339. content: '\25b8';
  340. }
  341. /* '▸' */
  342. i.basic.icon.right.arrow:before {
  343. content: '\e75e';
  344. }
  345. /* '' */
  346. i.basic.icon.up:before {
  347. content: '\2191';
  348. }
  349. /* '↑' */
  350. i.basic.icon.up.triangle:before {
  351. content: '\25b4';
  352. }
  353. /* '▴' */
  354. i.basic.icon.up.arrow:before {
  355. content: '\e75f';
  356. }
  357. /* '' */
  358. i.basic.icon.folder:before {
  359. content: '\e810';
  360. }
  361. /* '' */
  362. i.basic.icon.open.folder:before {
  363. content: '📂';
  364. }
  365. /* '\1f4c2' */
  366. i.basic.icon.globe:before {
  367. content: '𝌍';
  368. }
  369. /* '\1d30d' */
  370. i.basic.icon.desk.globe:before {
  371. content: '🌐';
  372. }
  373. /* '\1f310' */
  374. i.basic.icon.star:before {
  375. content: '\e801';
  376. }
  377. /* '' */
  378. i.basic.icon.star.empty:before {
  379. content: '\e800';
  380. }
  381. /* '' */
  382. i.basic.icon.star.half:before {
  383. content: '\e701';
  384. }
  385. /* '' */
  386. i.basic.icon.lock:before {
  387. content: '🔒';
  388. }
  389. /* '\1f512' */
  390. i.basic.icon.unlock:before {
  391. content: '🔓';
  392. }
  393. /* '\1f513' */
  394. i.basic.icon.layout.grid:before {
  395. content: '\e80c';
  396. }
  397. /* '' */
  398. i.basic.icon.layout.block:before {
  399. content: '\e708';
  400. }
  401. /* '' */
  402. i.basic.icon.layout.list:before {
  403. content: '\e80b';
  404. }
  405. /* '' */
  406. i.basic.icon.heart.empty:before {
  407. content: '\2661';
  408. }
  409. /* '♡' */
  410. i.basic.icon.heart:before {
  411. content: '\2665';
  412. }
  413. /* '♥' */
  414. i.basic.icon.asterisk:before {
  415. content: '\2731';
  416. }
  417. /* '✱' */
  418. i.basic.icon.attachment:before {
  419. content: '📎';
  420. }
  421. /* '\1f4ce' */
  422. i.basic.icon.attention:before {
  423. content: '\26a0';
  424. }
  425. /* '⚠' */
  426. i.basic.icon.trophy:before {
  427. content: '🏉';
  428. }
  429. /* '\1f3c9' */
  430. i.basic.icon.barcode:before {
  431. content: '\e792';
  432. }
  433. /* '' */
  434. i.basic.icon.cart:before {
  435. content: '\e813';
  436. }
  437. /* '' */
  438. i.basic.icon.block:before {
  439. content: '🚫';
  440. }
  441. /* '\1f6ab' */
  442. i.basic.icon.book:before {
  443. content: '📖';
  444. }
  445. i.basic.icon.bookmark:before {
  446. content: '🔖';
  447. }
  448. /* '\1f516' */
  449. i.basic.icon.calendar:before {
  450. content: '📅';
  451. }
  452. /* '\1f4c5' */
  453. i.basic.icon.cancel:before {
  454. content: '\2716';
  455. }
  456. /* '✖' */
  457. i.basic.icon.close:before {
  458. content: '\e80d';
  459. }
  460. /* '' */
  461. i.basic.icon.color:before {
  462. content: '\e794';
  463. }
  464. /* '' */
  465. i.basic.icon.chat:before {
  466. content: '\e720';
  467. }
  468. /* '' */
  469. i.basic.icon.check:before {
  470. content: '\2611';
  471. }
  472. /* '☑' */
  473. i.basic.icon.time:before {
  474. content: '🕔';
  475. }
  476. /* '\1f554' */
  477. i.basic.icon.cloud:before {
  478. content: '\2601';
  479. }
  480. /* '☁' */
  481. i.basic.icon.code:before {
  482. content: '\e714';
  483. }
  484. /* '' */
  485. i.basic.icon.email:before {
  486. content: '\40';
  487. }
  488. /* '@' */
  489. i.basic.icon.settings:before {
  490. content: '\26ef';
  491. }
  492. /* '⛯' */
  493. i.basic.icon.setting:before {
  494. content: '\2699';
  495. }
  496. /* '⚙' */
  497. i.basic.icon.comment:before {
  498. content: '\e802';
  499. }
  500. /* '' */
  501. i.basic.icon.clockwise.counter:before {
  502. content: '\27f2';
  503. }
  504. /* '⟲' */
  505. i.basic.icon.clockwise:before {
  506. content: '\27f3';
  507. }
  508. /* '⟳' */
  509. i.basic.icon.cube:before {
  510. content: '\e807';
  511. }
  512. /* '' */
  513. i.basic.icon.direction:before {
  514. content: '\27a2';
  515. }
  516. /* '➢' */
  517. i.basic.icon.doc:before {
  518. content: '📄';
  519. }
  520. /* '\1f4c4' */
  521. i.basic.icon.docs:before {
  522. content: '\e736';
  523. }
  524. /* '' */
  525. i.basic.icon.dollar:before {
  526. content: '💵';
  527. }
  528. /* '\1f4b5' */
  529. i.basic.icon.paint:before {
  530. content: '\e7b5';
  531. }
  532. /* '' */
  533. i.basic.icon.edit:before {
  534. content: '\270d';
  535. }
  536. /* '✍' */
  537. i.basic.icon.eject:before {
  538. content: '\2ecf';
  539. }
  540. /* '⻏' */
  541. i.basic.icon.export:before {
  542. content: '\e715';
  543. }
  544. /* '' */
  545. i.basic.icon.hide:before {
  546. content: '\e80f';
  547. }
  548. /* '' */
  549. i.basic.icon.unhide:before {
  550. content: '\e70b';
  551. }
  552. /* '' */
  553. i.basic.icon.facebook:before {
  554. content: '\f301';
  555. }
  556. /* '' */
  557. i.basic.icon.fast-forward:before {
  558. content: '\e804';
  559. }
  560. /* '' */
  561. i.basic.icon.fire:before {
  562. content: '🔥';
  563. }
  564. /* '\1f525' */
  565. i.basic.icon.flag:before {
  566. content: '\2691';
  567. }
  568. /* '⚑' */
  569. i.basic.icon.lightning:before {
  570. content: '\26a1';
  571. }
  572. /* '⚡' */
  573. i.basic.icon.lab:before {
  574. content: '\68';
  575. }
  576. /* 'h' */
  577. i.basic.icon.flight:before {
  578. content: '\2708';
  579. }
  580. /* '✈' */
  581. i.basic.icon.forward:before {
  582. content: '\27a6';
  583. }
  584. /* '➦' */
  585. i.basic.icon.gift:before {
  586. content: '🎁';
  587. }
  588. /* '\1f381' */
  589. i.basic.icon.github:before {
  590. content: '\f308';
  591. }
  592. /* '' */
  593. i.basic.icon.globe:before {
  594. content: '\e817';
  595. }
  596. /* '' */
  597. i.basic.icon.headphones:before {
  598. content: '🎧';
  599. }
  600. /* '\1f3a7' */
  601. i.basic.icon.question:before {
  602. content: '\2753';
  603. }
  604. /* '❓' */
  605. i.basic.icon.home:before {
  606. content: '\2302';
  607. }
  608. /* '⌂' */
  609. i.basic.icon.i:before {
  610. content: '\2139';
  611. }
  612. /* 'ℹ' */
  613. i.basic.icon.idea:before {
  614. content: '💡';
  615. }
  616. /* '\1f4a1' */
  617. i.basic.icon.open:before {
  618. content: '🔗';
  619. }
  620. /* '\1f517' */
  621. i.basic.icon.content:before {
  622. content: '\e782';
  623. }
  624. /* '' */
  625. i.basic.icon.location:before {
  626. content: '\e724';
  627. }
  628. /* '' */
  629. i.basic.icon.mail:before {
  630. content: '\2709';
  631. }
  632. /* '✉' */
  633. i.basic.icon.mic:before {
  634. content: '🎤';
  635. }
  636. /* '\1f3a4' */
  637. i.basic.icon.minus:before {
  638. content: '\2d';
  639. }
  640. /* '-' */
  641. i.basic.icon.money:before {
  642. content: '💰';
  643. }
  644. /* '\1f4b0' */
  645. i.basic.icon.off:before {
  646. content: '\e78e';
  647. }
  648. /* '' */
  649. i.basic.icon.pause:before {
  650. content: '\e808';
  651. }
  652. /* '' */
  653. i.basic.icon.photos:before {
  654. content: '\e812';
  655. }
  656. /* '' */
  657. i.basic.icon.photo:before {
  658. content: '🌄';
  659. }
  660. /* '\1f304' */
  661. i.basic.icon.pin:before {
  662. content: '📌';
  663. }
  664. /* '\1f4cc' */
  665. i.basic.icon.play:before {
  666. content: '\e809';
  667. }
  668. /* '' */
  669. i.basic.icon.plus:before {
  670. content: '\2b';
  671. }
  672. /* '+' */
  673. i.basic.icon.print:before {
  674. content: '\e716';
  675. }
  676. /* '' */
  677. i.basic.icon.rss:before {
  678. content: '\e73a';
  679. }
  680. /* '' */
  681. i.basic.icon.search:before {
  682. content: '🔍';
  683. }
  684. /* '\1f50d' */
  685. i.basic.icon.shuffle:before {
  686. content: '\e803';
  687. }
  688. /* '' */
  689. i.basic.icon.tag:before {
  690. content: '\e80a';
  691. }
  692. /* '' */
  693. i.basic.icon.tags:before {
  694. content: '\e70d';
  695. }
  696. /* '' */
  697. i.basic.icon.terminal:before {
  698. content: '\e7ac';
  699. }
  700. /* '' */
  701. i.basic.icon.thumbs.down:before {
  702. content: '👎';
  703. }
  704. /* '\1f44e' */
  705. i.basic.icon.thumbs.up:before {
  706. content: '👍';
  707. }
  708. /* '\1f44d' */
  709. i.basic.icon.to-end:before {
  710. content: '\e806';
  711. }
  712. /* '' */
  713. i.basic.icon.to-start:before {
  714. content: '\e805';
  715. }
  716. /* '' */
  717. i.basic.icon.top.list:before {
  718. content: '🏆';
  719. }
  720. /* '\1f3c6' */
  721. i.basic.icon.trash:before {
  722. content: '\e729';
  723. }
  724. /* '' */
  725. i.basic.icon.twitter:before {
  726. content: '\f303';
  727. }
  728. /* '' */
  729. i.basic.icon.upload:before {
  730. content: '\e711';
  731. }
  732. /* '' */
  733. i.basic.icon.user.add:before {
  734. content: '\e700';
  735. }
  736. /* '' */
  737. i.basic.icon.user:before {
  738. content: '👤';
  739. }
  740. /* '\1f464' */
  741. i.basic.icon.community:before {
  742. content: '\e814';
  743. }
  744. /* '' */
  745. i.basic.icon.users:before {
  746. content: '👥';
  747. }
  748. /* '\1f465' */
  749. i.basic.icon.id:before {
  750. content: '\e722';
  751. }
  752. /* '' */
  753. i.basic.icon.url:before {
  754. content: '🔗';
  755. }
  756. /* '\1f517' */
  757. i.basic.icon.zoom.in:before {
  758. content: '\e750';
  759. }
  760. /* '' */
  761. i.basic.icon.zoom.out:before {
  762. content: '\e751';
  763. }
  764. /* '' */
  765. /*--------------
  766. Spacing Fix
  767. ---------------*/
  768. /* dropdown arrows are to the right */
  769. i.dropdown.basic.icon {
  770. margin: 0em 0em 0em 0.5em;
  771. }
  772. /* stars are usually consecutive */
  773. i.basic.icon.star {
  774. width: auto;
  775. margin: 0em;
  776. }
  777. /* left side basic.icons */
  778. i.basic.icon.left {
  779. width: auto;
  780. margin: 0em 0.5em 0em 0em;
  781. }
  782. /* right side basic.icons */
  783. i.basic.icon.search,
  784. i.basic.icon.up,
  785. i.basic.icon.down,
  786. i.basic.icon.right {
  787. width: auto;
  788. margin: 0em 0em 0em 0.5em;
  789. }
  790. /*--------------
  791. Aliases
  792. ---------------*/
  793. /* aliases for convenience */
  794. i.basic.icon.delete:before {
  795. content: '\e80d';
  796. }
  797. /* '' */
  798. i.basic.icon.dropdown:before {
  799. content: '\25be';
  800. }
  801. /* '▾' */
  802. i.basic.icon.help:before {
  803. content: '\e704';
  804. }
  805. /* '' */
  806. i.basic.icon.info:before {
  807. content: '\e705';
  808. }
  809. /* '' */
  810. i.basic.icon.error:before {
  811. content: '\e80d';
  812. }
  813. /* '' */
  814. i.basic.icon.dislike:before {
  815. content: '\2661';
  816. }
  817. /* '♡' */
  818. i.basic.icon.like:before {
  819. content: '\2665';
  820. }
  821. /* '♥' */
  822. i.basic.icon.eye:before {
  823. content: '\e80f';
  824. }
  825. /* '' */
  826. i.basic.icon.eye.hidden:before {
  827. content: '\e70b';
  828. }
  829. /* '' */
  830. i.basic.icon.date:before {
  831. content: '📅';
  832. }
  833. /* '\1f4c5' */
  834. /*******************************
  835. Overrides
  836. *******************************/