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.

999 lines
23 KiB

10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
  1. /*
  2. * # Semantic - Label
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Copyright 2013 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. Global Variables
  41. *******************************/
  42. /*-------------------
  43. Paths
  44. --------------------*/
  45. /*-------------------
  46. Page
  47. --------------------*/
  48. /*-------------------
  49. Grid
  50. --------------------*/
  51. /*-------------------
  52. Breakpoints
  53. --------------------*/
  54. /*-------------------
  55. Fonts
  56. --------------------*/
  57. /*-------------------
  58. Icons
  59. --------------------*/
  60. /* Max Width of Icon */
  61. /*-------------------
  62. Easing
  63. --------------------*/
  64. /*******************************
  65. BG Colors
  66. *******************************/
  67. /*******************************
  68. Colors
  69. *******************************/
  70. /*--- Colors ---*/
  71. /*--- Neutrals ---*/
  72. /*--- Text Colors ---*/
  73. /* Preserve */
  74. /* Adjust for Legibility */
  75. /*--- Backgrounds ---*/
  76. /*-------------------
  77. Emotive Colors
  78. --------------------*/
  79. /* Positive / Negative */
  80. /* Messages */
  81. /*-------------------
  82. Text Colors
  83. --------------------*/
  84. /*-------------------
  85. Brand Colors
  86. --------------------*/
  87. /*-------------------
  88. Borders
  89. --------------------*/
  90. /*-------------------
  91. Sizes
  92. --------------------*/
  93. /*-------------------
  94. Transitions
  95. --------------------*/
  96. /*******************************
  97. States
  98. *******************************/
  99. /*-------------------
  100. Disabled
  101. --------------------*/
  102. /*-------------------
  103. Hover
  104. --------------------*/
  105. /*--- Colors ---*/
  106. /*--- Emotive ---*/
  107. /*--- Neutrals ---*/
  108. /*-------------------
  109. Down (:active)
  110. --------------------*/
  111. /*--- Colors ---*/
  112. /*--- Emotive ---*/
  113. /*--- Neutrals ---*/
  114. /*-------------------
  115. Active
  116. --------------------*/
  117. /*--- Standard ---*/
  118. /*--- Emotive ---*/
  119. /*--- Neutrals ---*/
  120. /*-------------------
  121. Globals Used
  122. --------------------*/
  123. /*-------------------
  124. Standard
  125. --------------------*/
  126. /*-------------------
  127. Elements
  128. --------------------*/
  129. /*-------------------
  130. Types
  131. --------------------*/
  132. /*-------------------
  133. States
  134. --------------------*/
  135. /*-------------------
  136. Variations
  137. --------------------*/
  138. /* Tag */
  139. /* Ribbon */
  140. /* Attached */
  141. /* Corner */
  142. /* Horizontal */
  143. /* Circular Padding */
  144. /* Pointing */
  145. /* Floating */
  146. /*-------------------
  147. Group
  148. --------------------*/
  149. /* Sizing */
  150. /*------------------
  151. Load Theme
  152. -------------------*/
  153. /*------------------
  154. Load Site
  155. -------------------*/
  156. /*******************************
  157. User Global Variables
  158. *******************************/
  159. /*******************************
  160. User Variable Overrides
  161. *******************************/
  162. /*------------------
  163. Override Mix-in
  164. -------------------*/
  165. /*******************************
  166. Label
  167. *******************************/
  168. .ui.label {
  169. display: inline-block;
  170. vertical-align: baseline;
  171. line-height: 1;
  172. margin: 0.25em 0.125em;
  173. background-color: #e8e8e8;
  174. border-color: #e8e8e8;
  175. background-image: none;
  176. padding: 0.8em 0.8em;
  177. color: rgba(0, 0, 0, 0.8);
  178. text-transform: uppercase;
  179. font-weight: normal;
  180. border-radius: 0.325em;
  181. -webkit-box-sizing: border-box;
  182. -moz-box-sizing: border-box;
  183. box-sizing: border-box;
  184. -webkit-transition: background 0.1s linear
  185. ;
  186. transition: background 0.1s linear
  187. ;
  188. }
  189. .ui.label:first-child {
  190. margin-left: 0em;
  191. }
  192. .ui.label:last-child {
  193. margin-right: 0em;
  194. }
  195. /* Link */
  196. a.ui.label {
  197. cursor: pointer;
  198. }
  199. /* Inside Link */
  200. .ui.label a {
  201. cursor: pointer;
  202. color: inherit;
  203. opacity: 0.8;
  204. -webkit-transition: 0.2s opacity ease;
  205. transition: 0.2s opacity ease;
  206. }
  207. .ui.label a:hover {
  208. opacity: 1;
  209. }
  210. /* Icon */
  211. .ui.label .icon {
  212. width: auto;
  213. margin: 0em 0.75em 0em 0em;
  214. }
  215. /* Detail */
  216. .ui.label .detail {
  217. display: inline-block;
  218. margin-left: 0.5em;
  219. font-weight: bold;
  220. opacity: 0.8;
  221. }
  222. .ui.label .detail .icon {
  223. margin: 0em 0.25em 0em 0em;
  224. }
  225. /* Removable label */
  226. .ui.label .delete.icon {
  227. cursor: pointer;
  228. margin-right: 0em;
  229. margin-left: 0.5em;
  230. opacity: 0.8;
  231. -webkit-transition: background 0.1s linear
  232. ;
  233. transition: background 0.1s linear
  234. ;
  235. }
  236. .ui.label .delete.icon:hover {
  237. opacity: 1;
  238. }
  239. /*-------------------
  240. Group
  241. --------------------*/
  242. .ui.labels .label {
  243. margin: 0em 0.5em 0.75em 0em;
  244. }
  245. /*-------------------
  246. Coupling
  247. --------------------*/
  248. /* Padding on next content after a label */
  249. .ui.segment > .attached.label:first-child + * {
  250. margin-top: 2.5em;
  251. }
  252. .ui.segment > .bottom.attached.label:first-child ~ :last-child {
  253. margin-top: 0em;
  254. margin-bottom: 2.5em;
  255. }
  256. /*******************************
  257. Types
  258. *******************************/
  259. .ui.image.label {
  260. background-color: #e8e8e8;
  261. width: auto !important;
  262. margin-top: 0em;
  263. margin-bottom: 0em;
  264. padding-top: 0.8em;
  265. padding-bottom: 0.8em;
  266. vertical-align: baseline;
  267. text-transform: none;
  268. -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
  269. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
  270. }
  271. .ui.image.label img {
  272. display: inline-block;
  273. height: 2.6em;
  274. margin: -0.8em 0.8em -0.8em -0.8em;
  275. vertical-align: top;
  276. border-radius: 0.325em 0em 0em 0.325em;
  277. }
  278. /*******************************
  279. States
  280. *******************************/
  281. /*-------------------
  282. Disabled
  283. --------------------*/
  284. .ui.label.disabled {
  285. opacity: 0.5;
  286. }
  287. /*-------------------
  288. Hover
  289. --------------------*/
  290. a.ui.labels .label:hover,
  291. a.ui.label:hover {
  292. background-color: #e0e0e0;
  293. border-color: #e0e0e0;
  294. background-image: none;
  295. color: rgba(0, 0, 0, 0.8);
  296. }
  297. .ui.labels a.label:hover:before,
  298. a.ui.label:hover:before {
  299. background-color: #e0e0e0;
  300. background-image: none;
  301. color: rgba(0, 0, 0, 0.8);
  302. }
  303. /*-------------------
  304. Visible
  305. --------------------*/
  306. .ui.labels.visible .label,
  307. .ui.label.visible {
  308. display: inline-block !important;
  309. }
  310. /*-------------------
  311. Hidden
  312. --------------------*/
  313. .ui.labels.hidden .label,
  314. .ui.label.hidden {
  315. display: none !important;
  316. }
  317. /*******************************
  318. Variations
  319. *******************************/
  320. /*-------------------
  321. Tag
  322. --------------------*/
  323. .ui.tag.labels .label,
  324. .ui.tag.label {
  325. margin-left: 1em;
  326. position: relative;
  327. padding-left: 1.5em;
  328. padding-right: 1.5em;
  329. border-radius: 0em 0.325em 0.325em 0em;
  330. }
  331. .ui.tag.labels .label:before,
  332. .ui.tag.label:before {
  333. position: absolute;
  334. top: 50%;
  335. right: 100%;
  336. content: '';
  337. background-color: #e8e8e8;
  338. background-image: none;
  339. width: 1.75em;
  340. height: 1.75em;
  341. -webkit-transform: translateY(-50%) translateX(50%) rotate(-45deg);
  342. -ms-transform: translateY(-50%) translateX(50%) rotate(-45deg);
  343. transform: translateY(-50%) translateX(50%) rotate(-45deg);
  344. -webkit-transition: background 0.1s linear
  345. ;
  346. transition: background 0.1s linear
  347. ;
  348. }
  349. .ui.tag.labels .label:after,
  350. .ui.tag.label:after {
  351. position: absolute;
  352. content: '';
  353. top: 50%;
  354. left: -0.25em;
  355. margin-top: -0.25em;
  356. background-color: #ffffff;
  357. width: 0.5em;
  358. height: 0.5em;
  359. -webkit-box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3);
  360. box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3);
  361. border-radius: 500rem;
  362. }
  363. /*-------------------
  364. Ribbon
  365. --------------------*/
  366. .ui.ribbon.label {
  367. position: relative;
  368. margin: 0em;
  369. left: -2rem;
  370. padding-left: 2rem;
  371. border-radius: 0em 0.325em 0.325em 0em;
  372. border-color: rgba(0, 0, 0, 0.15);
  373. }
  374. .ui.ribbon.label:after {
  375. position: absolute;
  376. content: "";
  377. top: 100%;
  378. left: 0%;
  379. border-top: 0em solid transparent;
  380. border-right-width: 1.3em;
  381. border-right-color: inherit;
  382. border-right-style: solid;
  383. border-bottom: 1.3em solid transparent;
  384. border-left: 0em solid transparent;
  385. width: 0em;
  386. height: 0em;
  387. }
  388. /*-------------------
  389. Attached
  390. --------------------*/
  391. .ui.top.attached.label,
  392. .ui.attached.label {
  393. width: 100%;
  394. position: absolute;
  395. margin: 0em;
  396. top: 0em;
  397. left: 0em;
  398. padding: 0.75em 1em;
  399. border-radius: 0.325em 0.325em 0em 0em;
  400. }
  401. .ui.bottom.attached.label {
  402. top: auto;
  403. bottom: 0em;
  404. border-radius: 0em 0em 0.325em 0.325em;
  405. }
  406. .ui.top.left.attached.label {
  407. width: auto;
  408. margin-top: 0em !important;
  409. border-radius: 0.325em 0em 0.325em 0em;
  410. }
  411. .ui.top.right.attached.label {
  412. width: auto;
  413. left: auto;
  414. right: 0em;
  415. border-radius: 0em 0.325em 0em 0.325em;
  416. }
  417. .ui.bottom.left.attached.label {
  418. width: auto;
  419. top: auto;
  420. bottom: 0em;
  421. border-radius: 0.325em 0em 0em 0.325em;
  422. }
  423. .ui.bottom.right.attached.label {
  424. top: auto;
  425. bottom: 0em;
  426. left: auto;
  427. right: 0em;
  428. width: auto;
  429. border-radius: 0.325em 0em 0.325em 0em;
  430. }
  431. /*-------------------
  432. Corner Label
  433. --------------------*/
  434. .ui.corner.label {
  435. background-color: transparent;
  436. position: absolute;
  437. top: 0em;
  438. right: 0em;
  439. z-index: 10;
  440. margin: 0em;
  441. width: 3em;
  442. height: 3em;
  443. padding: 0em;
  444. text-align: center;
  445. -webkit-transition: color 0.2s ease;
  446. transition: color 0.2s ease;
  447. }
  448. .ui.corner.label:after {
  449. position: absolute;
  450. content: "";
  451. right: 0em;
  452. top: 0em;
  453. z-index: -1;
  454. width: 0em;
  455. height: 0em;
  456. border-top: 0em solid transparent;
  457. border-right: 3em solid transparent;
  458. border-bottom: 3em solid transparent;
  459. border-left: 0em solid transparent;
  460. border-right-color: inherit;
  461. -webkit-transition: border-color 0.2s ease;
  462. transition: border-color 0.2s ease;
  463. }
  464. .ui.corner.label .icon {
  465. position: relative;
  466. top: 0.45em;
  467. left: 0.75em;
  468. font-size: 0.7em;
  469. margin: 0em;
  470. }
  471. .ui.corner.label .text {
  472. display: inline-block;
  473. position: relative;
  474. top: 0.45em;
  475. left: 0.75em;
  476. margin: 0em;
  477. width: 2.5em;
  478. font-size: 0.7em;
  479. font-weight: bold;
  480. text-align: center;
  481. -webkit-transform: rotate(45deg);
  482. -ms-transform: rotate(45deg);
  483. transform: rotate(45deg);
  484. }
  485. /* Left Corner */
  486. .ui.left.corner.label,
  487. .ui.left.corner.label:after {
  488. right: auto;
  489. left: 0em;
  490. }
  491. .ui.left.corner.label:after {
  492. border-top: 3em solid transparent;
  493. border-right: 3em solid transparent;
  494. border-bottom: 0em solid transparent;
  495. border-left: 0em solid transparent;
  496. border-top-color: inherit;
  497. }
  498. .ui.left.corner.label .icon {
  499. left: -0.75em;
  500. }
  501. .ui.left.corner.label .text {
  502. left: -0.75em;
  503. -webkit-transform: rotate(-45deg);
  504. -ms-transform: rotate(-45deg);
  505. transform: rotate(-45deg);
  506. }
  507. /* Coupling */
  508. .ui.rounded.image > .ui.corner.label,
  509. .ui.input > .ui.corner.label,
  510. .ui.segment > .ui.corner.label {
  511. overflow: hidden;
  512. }
  513. /* Corner Segment Label */
  514. .ui.segment > .ui.corner.label {
  515. top: -1px;
  516. right: -1px;
  517. }
  518. .ui.segment > .ui.left.corner.label {
  519. right: auto;
  520. left: -1px;
  521. }
  522. /* Corner Input Label */
  523. .ui.input > .ui.corner.label {
  524. top: 1px;
  525. right: 1px;
  526. }
  527. .ui.input > .ui.right.corner.label {
  528. right: auto;
  529. left: 1px;
  530. }
  531. /* Hover */
  532. .ui.corner.label:hover {
  533. background-color: transparent;
  534. }
  535. /*-------------------
  536. Fluid
  537. --------------------*/
  538. .ui.label.fluid,
  539. .ui.fluid.labels > .label {
  540. width: 100%;
  541. -webkit-box-sizing: border-box;
  542. -moz-box-sizing: border-box;
  543. box-sizing: border-box;
  544. }
  545. /*-------------------
  546. Inverted
  547. --------------------*/
  548. .ui.inverted.labels .label,
  549. .ui.inverted.label {
  550. color: #ffffff !important;
  551. }
  552. /*-------------------
  553. Colors
  554. --------------------*/
  555. /*--- Black ---*/
  556. .ui.black.labels .label,
  557. .ui.black.label {
  558. background-color: #333333 !important;
  559. border-color: #333333 !important;
  560. color: #ffffff !important;
  561. }
  562. .ui.labels .black.label:before,
  563. .ui.black.labels .label:before,
  564. .ui.black.label:before {
  565. background-color: #333333 !important;
  566. }
  567. a.ui.black.labels .label:hover,
  568. a.ui.black.label:hover {
  569. background-color: #404040 !important;
  570. border-color: #404040 !important;
  571. }
  572. .ui.labels a.black.label:hover:before,
  573. .ui.black.labels a.label:hover:before,
  574. a.ui.black.label:hover:before {
  575. background-color: #404040 !important;
  576. }
  577. .ui.black.corner.label,
  578. .ui.black.corner.label:hover {
  579. background-color: transparent !important;
  580. }
  581. .ui.black.ribbon.label {
  582. border-color: #404040 !important;
  583. }
  584. /*--- Blue ---*/
  585. .ui.blue.labels .label,
  586. .ui.blue.label {
  587. background-color: #0074d9 !important;
  588. border-color: #0074d9 !important;
  589. color: #ffffff !important;
  590. }
  591. .ui.labels .blue.label:before,
  592. .ui.blue.labels .label:before,
  593. .ui.blue.label:before {
  594. background-color: #0074d9 !important;
  595. }
  596. a.ui.blue.labels .label:hover,
  597. .ui.blue.labels a.label:hover,
  598. a.ui.blue.label:hover {
  599. background-color: #0082f3 !important;
  600. border-color: #0082f3 !important;
  601. color: #ffffff !important;
  602. }
  603. .ui.labels a.blue.label:hover:before,
  604. .ui.blue.labels a.label:hover:before,
  605. a.ui.blue.label:hover:before {
  606. background-color: #0082f3 !important;
  607. }
  608. .ui.blue.corner.label,
  609. .ui.blue.corner.label:hover {
  610. background-color: transparent !important;
  611. }
  612. .ui.blue.ribbon.label {
  613. border-color: #0082f3 !important;
  614. }
  615. /*--- Green ---*/
  616. .ui.green.labels .label,
  617. .ui.green.label {
  618. background-color: #2ecc40 !important;
  619. border-color: #2ecc40 !important;
  620. color: #ffffff !important;
  621. }
  622. .ui.labels .green.label:before,
  623. .ui.green.labels .label:before,
  624. .ui.green.label:before {
  625. background-color: #2ecc40 !important;
  626. }
  627. a.ui.green.labels .label:hover,
  628. a.ui.green.label:hover {
  629. background-color: #40d451 !important;
  630. border-color: #40d451 !important;
  631. }
  632. .ui.labels a.green.label:hover:before,
  633. .ui.green.labels a.label:hover:before,
  634. a.ui.green.label:hover:before {
  635. background-color: #40d451 !important;
  636. }
  637. .ui.green.corner.label,
  638. .ui.green.corner.label:hover {
  639. background-color: transparent !important;
  640. }
  641. .ui.green.ribbon.label {
  642. border-color: #40d451 !important;
  643. }
  644. /*--- Orange ---*/
  645. .ui.orange.labels .label,
  646. .ui.orange.label {
  647. background-color: #ff851b !important;
  648. border-color: #ff851b !important;
  649. color: #ffffff !important;
  650. }
  651. .ui.labels .orange.label:before,
  652. .ui.orange.labels .label:before,
  653. .ui.orange.label:before {
  654. background-color: #ff851b !important;
  655. }
  656. a.ui.orange.labels .label:hover,
  657. .ui.orange.labels a.label:hover,
  658. a.ui.orange.label:hover {
  659. background-color: #ff9335 !important;
  660. border-color: #ff9335 !important;
  661. color: #ffffff !important;
  662. }
  663. .ui.labels a.orange.label:hover:before,
  664. .ui.orange.labels a.label:hover:before,
  665. a.ui.orange.label:hover:before {
  666. background-color: #ff9335 !important;
  667. }
  668. .ui.orange.corner.label,
  669. .ui.orange.corner.label:hover {
  670. background-color: transparent !important;
  671. }
  672. .ui.orange.ribbon.label {
  673. border-color: #ff9335 !important;
  674. }
  675. /*--- Pink ---*/
  676. .ui.pink.labels .label,
  677. .ui.pink.label {
  678. background-color: #d9499a !important;
  679. border-color: #d9499a !important;
  680. color: #ffffff !important;
  681. }
  682. .ui.labels .pink.label:before,
  683. .ui.pink.labels .label:before,
  684. .ui.pink.label:before {
  685. background-color: #d9499a !important;
  686. }
  687. a.ui.pink.labels .label:hover,
  688. .ui.pink.labels a.label:hover,
  689. a.ui.pink.label:hover {
  690. background-color: #dd5ea6 !important;
  691. border-color: #dd5ea6 !important;
  692. color: #ffffff !important;
  693. }
  694. .ui.labels a.pink.label:hover:before,
  695. .ui.pink.labels a.label:hover:before,
  696. a.ui.pink.label:hover:before {
  697. background-color: #dd5ea6 !important;
  698. }
  699. .ui.pink.corner.label,
  700. .ui.pink.corner.label:hover {
  701. background-color: transparent !important;
  702. }
  703. .ui.pink.ribbon.label {
  704. border-color: #dd5ea6 !important;
  705. }
  706. /*--- Purple ---*/
  707. .ui.purple.labels .label,
  708. .ui.purple.label {
  709. background-color: #564f8a !important;
  710. border-color: #564f8a !important;
  711. color: #ffffff !important;
  712. }
  713. .ui.labels .purple.label:before,
  714. .ui.purple.labels .label:before,
  715. .ui.purple.label:before {
  716. background-color: #564f8a !important;
  717. }
  718. a.ui.purple.labels .label:hover,
  719. .ui.purple.labels a.label:hover,
  720. a.ui.purple.label:hover {
  721. background-color: #60589a !important;
  722. border-color: #60589a !important;
  723. color: #ffffff !important;
  724. }
  725. .ui.labels a.purple.label:hover:before,
  726. .ui.purple.labels a.label:hover:before,
  727. a.ui.purple.label:hover:before {
  728. background-color: #60589a !important;
  729. }
  730. .ui.purple.corner.label,
  731. .ui.purple.corner.label:hover {
  732. background-color: transparent !important;
  733. }
  734. .ui.purple.ribbon.label {
  735. border-color: #60589a !important;
  736. }
  737. /*--- Red ---*/
  738. .ui.red.labels .label,
  739. .ui.red.label {
  740. background-color: #ff4136 !important;
  741. border-color: #ff4136 !important;
  742. color: #ffffff !important;
  743. }
  744. .ui.labels .red.label:before,
  745. .ui.red.labels .label:before,
  746. .ui.red.label:before {
  747. background-color: #ff4136 !important;
  748. }
  749. .ui.red.corner.label,
  750. .ui.red.corner.label:hover {
  751. background-color: transparent !important;
  752. }
  753. a.ui.red.labels .label:hover,
  754. a.ui.red.label:hover {
  755. background-color: #ff5950 !important;
  756. border-color: #ff5950 !important;
  757. color: #ffffff !important;
  758. }
  759. .ui.labels a.red.label:hover:before,
  760. .ui.red.labels a.label:hover:before,
  761. a.ui.red.label:hover:before {
  762. background-color: #ff5950 !important;
  763. }
  764. .ui.red.ribbon.label {
  765. border-color: #ff5950 !important;
  766. }
  767. /*--- Teal ---*/
  768. .ui.teal.labels .label,
  769. .ui.teal.label {
  770. background-color: #39cccc !important;
  771. border-color: #39cccc !important;
  772. color: #ffffff !important;
  773. }
  774. .ui.labels .teal.label:before,
  775. .ui.teal.labels .label:before,
  776. .ui.teal.label:before {
  777. background-color: #39cccc !important;
  778. }
  779. a.ui.teal.labels .label:hover,
  780. .ui.teal.labels a.label:hover,
  781. a.ui.teal.label:hover {
  782. background-color: #4dd1d1 !important;
  783. border-color: #4dd1d1 !important;
  784. color: #ffffff !important;
  785. }
  786. .ui.labels a.teal.label:hover:before,
  787. .ui.teal.labels a.label:hover:before,
  788. a.ui.teal.label:hover:before {
  789. background-color: #4dd1d1 !important;
  790. }
  791. .ui.teal.corner.label,
  792. .ui.teal.corner.label:hover {
  793. background-color: transparent !important;
  794. }
  795. .ui.teal.ribbon.label {
  796. border-color: #4dd1d1 !important;
  797. }
  798. /*--- Yellow ---*/
  799. .ui.yellow.labels .label,
  800. .ui.yellow.label {
  801. background-color: #ffcb08 !important;
  802. border-color: #ffcb08 !important;
  803. color: #ffffff !important;
  804. }
  805. .ui.labels .yellow.label:before,
  806. .ui.yellow.labels .label:before,
  807. .ui.yellow.label:before {
  808. background-color: #ffcb08 !important;
  809. }
  810. a.ui.yellow.labels .label:hover,
  811. .ui.yellow.labels a.label:hover,
  812. a.ui.yellow.label:hover {
  813. background-color: #ffd021 !important;
  814. border-color: #ffd021 !important;
  815. color: #ffffff !important;
  816. }
  817. .ui.labels a.yellow.label:hover:before,
  818. .ui.yellow.labels a.label:hover:before,
  819. a.ui.yellow.label:hover:before {
  820. background-color: #ffd021 !important;
  821. }
  822. .ui.yellow.corner.label,
  823. .ui.yellow.corner.label:hover {
  824. background-color: transparent !important;
  825. }
  826. .ui.yellow.ribbon.label {
  827. border-color: #4dd1d1 !important;
  828. }
  829. /*-------------------
  830. Horizontal
  831. --------------------*/
  832. .ui.horizontal.labels .label,
  833. .ui.horizontal.label {
  834. margin: 0em 0.5em 0em 0em;
  835. padding: 0.4em 0.8em;
  836. min-width: 3em;
  837. text-align: center;
  838. }
  839. /*-------------------
  840. Circular
  841. --------------------*/
  842. .ui.circular.labels .label,
  843. .ui.circular.label {
  844. min-width: 2em;
  845. min-height: 2em;
  846. padding: 0.5em !important;
  847. line-height: 1em;
  848. text-align: center;
  849. border-radius: 500rem;
  850. }
  851. .ui.empty.circular.labels .label,
  852. .ui.empty.circular.label {
  853. min-width: 0.5em;
  854. min-height: 0.5em;
  855. vertical-align: middle;
  856. }
  857. /*-------------------
  858. Pointing
  859. --------------------*/
  860. .ui.pointing.label {
  861. position: relative;
  862. }
  863. .ui.attached.pointing.label {
  864. position: absolute;
  865. }
  866. .ui.pointing.label:before {
  867. position: absolute;
  868. content: '';
  869. width: 0.6em;
  870. height: 0.6em;
  871. background-image: none;
  872. -webkit-transform: rotate(45deg);
  873. -ms-transform: rotate(45deg);
  874. transform: rotate(45deg);
  875. z-index: 2;
  876. -webkit-transition: background 0.1s linear
  877. ;
  878. transition: background 0.1s linear
  879. ;
  880. }
  881. /*--- Above ---*/
  882. .ui.pointing.label:before {
  883. background-color: #e8e8e8;
  884. background-image: none;
  885. }
  886. .ui.pointing.label,
  887. .ui.pointing.above.label {
  888. margin-top: 1em;
  889. }
  890. .ui.pointing.label:before,
  891. .ui.pointing.above.label:before {
  892. margin-left: -0.3em;
  893. top: -0.3em;
  894. left: 50%;
  895. }
  896. /*--- Below ---*/
  897. .ui.pointing.below.label {
  898. margin-top: 0em;
  899. margin-bottom: 1em;
  900. }
  901. .ui.pointing.below.label:before {
  902. margin-left: -0.3em;
  903. top: auto;
  904. right: auto;
  905. bottom: -0.3em;
  906. left: 50%;
  907. }
  908. /*--- Left ---*/
  909. .ui.pointing.left.label {
  910. margin-top: 0em;
  911. margin-left: 1em;
  912. }
  913. .ui.pointing.left.label:before {
  914. margin-top: -0.3em;
  915. bottom: auto;
  916. right: auto;
  917. top: 50%;
  918. left: 0em;
  919. }
  920. /*--- Right ---*/
  921. .ui.pointing.right.label {
  922. margin-top: 0em;
  923. margin-right: 1em;
  924. }
  925. .ui.pointing.right.label:before {
  926. margin-top: -0.3em;
  927. right: -0.3em;
  928. top: 50%;
  929. bottom: auto;
  930. left: auto;
  931. }
  932. /*------------------
  933. Floating Label
  934. -------------------*/
  935. .ui.floating.label {
  936. position: absolute;
  937. z-index: 100;
  938. top: -1em;
  939. left: 100%;
  940. margin: 0em 0em 0em -1.5em !important;
  941. }
  942. /*-------------------
  943. Sizes
  944. --------------------*/
  945. .ui.tiny.labels .label,
  946. .ui.tiny.label {
  947. font-size: 0.6rem;
  948. }
  949. .ui.small.labels .label,
  950. .ui.small.label {
  951. font-size: 0.75rem;
  952. }
  953. .ui.labels .label,
  954. .ui.label {
  955. font-size: 0.8125rem;
  956. }
  957. .ui.large.labels .label,
  958. .ui.large.label {
  959. font-size: 0.875rem;
  960. }
  961. .ui.huge.labels .label,
  962. .ui.huge.label {
  963. font-size: 1rem;
  964. }
  965. .ui.tiny.corner.labels .label,
  966. .ui.tiny.corner.label {
  967. font-size: 0.72rem;
  968. }
  969. .ui.small.corner.labels .label,
  970. .ui.small.corner.label {
  971. font-size: 0.9rem;
  972. }
  973. .ui.corner.labels .label,
  974. .ui.corner.label {
  975. font-size: 0.975rem;
  976. }
  977. .ui.large.corner.labels .label,
  978. .ui.large.corner.label {
  979. font-size: 1.05rem;
  980. }
  981. .ui.huge.corner.labels .label,
  982. .ui.huge.corner.label {
  983. font-size: 1.2rem;
  984. }
  985. /*******************************
  986. Overrides
  987. *******************************/
  988. /*******************************
  989. Overrides
  990. *******************************/