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.

1314 lines
27 KiB

  1. /*!
  2. * # Semantic UI 2.1.6 - Label
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Copyright 2015 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Label
  13. *******************************/
  14. .ui.label {
  15. display: inline-block;
  16. line-height: 1;
  17. vertical-align: baseline;
  18. margin: 0em 0.14285714em;
  19. background-color: #E8E8E8;
  20. background-image: none;
  21. padding: 0.5833em 0.833em;
  22. color: rgba(0, 0, 0, 0.6);
  23. text-transform: none;
  24. font-weight: bold;
  25. border: 0px solid transparent;
  26. border-radius: 0.28571429rem;
  27. -webkit-transition: background 0.1s ease;
  28. transition: background 0.1s ease;
  29. }
  30. .ui.label:first-child {
  31. margin-left: 0em;
  32. }
  33. .ui.label:last-child {
  34. margin-right: 0em;
  35. }
  36. /* Link */
  37. a.ui.label {
  38. cursor: pointer;
  39. }
  40. /* Inside Link */
  41. .ui.label > a {
  42. cursor: pointer;
  43. color: inherit;
  44. opacity: 0.5;
  45. -webkit-transition: 0.1s opacity ease;
  46. transition: 0.1s opacity ease;
  47. }
  48. .ui.label > a:hover {
  49. opacity: 1;
  50. }
  51. /* Image */
  52. .ui.label > img {
  53. width: auto !important;
  54. vertical-align: middle;
  55. height: 2.1666em !important;
  56. }
  57. /* Icon */
  58. .ui.label > .icon {
  59. width: auto;
  60. margin: 0em 0.75em 0em 0em;
  61. }
  62. /* Detail */
  63. .ui.label > .detail {
  64. display: inline-block;
  65. vertical-align: top;
  66. font-weight: bold;
  67. margin-left: 1em;
  68. opacity: 0.8;
  69. }
  70. .ui.label > .detail .icon {
  71. margin: 0em 0.25em 0em 0em;
  72. }
  73. /* Removable label */
  74. .ui.label > .close.icon,
  75. .ui.label > .delete.icon {
  76. cursor: pointer;
  77. margin-right: 0em;
  78. margin-left: 0.5em;
  79. font-size: 0.92857143em;
  80. opacity: 0.5;
  81. -webkit-transition: background 0.1s ease;
  82. transition: background 0.1s ease;
  83. }
  84. .ui.label > .delete.icon:hover {
  85. opacity: 1;
  86. }
  87. /*-------------------
  88. Group
  89. --------------------*/
  90. .ui.labels > .label {
  91. margin: 0em 0.5em 0.5em 0em;
  92. }
  93. /*-------------------
  94. Coupling
  95. --------------------*/
  96. .ui.header > .ui.label {
  97. margin-top: -0.29165em;
  98. }
  99. /* Remove border radius on attached segment */
  100. .ui.attached.segment > .ui.top.left.attached.label,
  101. .ui.bottom.attached.segment > .ui.top.left.attached.label {
  102. border-top-left-radius: 0;
  103. }
  104. .ui.attached.segment > .ui.top.right.attached.label,
  105. .ui.bottom.attached.segment > .ui.top.right.attached.label {
  106. border-top-right-radius: 0;
  107. }
  108. .ui.top.attached.segment > .ui.bottom.left.attached.label {
  109. border-bottom-left-radius: 0;
  110. }
  111. .ui.top.attached.segment > .ui.bottom.right.attached.label {
  112. border-bottom-right-radius: 0;
  113. }
  114. /* Padding on next content after a label */
  115. .ui.top.attached.label:first-child + :not(.attached) {
  116. margin-top: 2rem !important;
  117. }
  118. .ui.bottom.attached.label:first-child ~ :last-child:not(.attached) {
  119. margin-top: 0em;
  120. margin-bottom: 2rem !important;
  121. }
  122. /*******************************
  123. Types
  124. *******************************/
  125. .ui.image.label {
  126. width: auto !important;
  127. margin-top: 0em;
  128. margin-bottom: 0em;
  129. max-width: 9999px;
  130. vertical-align: baseline;
  131. text-transform: none;
  132. background: #E8E8E8;
  133. padding: 0.5833em 0.833em 0.5833em 0.5em;
  134. border-radius: 0.28571429rem;
  135. box-shadow: none;
  136. }
  137. .ui.image.label img {
  138. display: inline-block;
  139. vertical-align: top;
  140. height: 2.1666em;
  141. margin: -0.5833em 0.5em -0.5833em -0.5em;
  142. border-radius: 0.28571429rem 0em 0em 0.28571429rem;
  143. }
  144. .ui.image.label .detail {
  145. background: rgba(0, 0, 0, 0.1);
  146. margin: -0.5833em -0.833em -0.5833em 0.5em;
  147. padding: 0.5833em 0.833em;
  148. border-radius: 0em 0.28571429rem 0.28571429rem 0em;
  149. }
  150. /*-------------------
  151. Tag
  152. --------------------*/
  153. .ui.tag.labels .label,
  154. .ui.tag.label {
  155. margin-left: 1em;
  156. position: relative;
  157. padding-left: 1.5em;
  158. padding-right: 1.5em;
  159. border-radius: 0em 0.28571429rem 0.28571429rem 0em;
  160. -webkit-transition: none;
  161. transition: none;
  162. }
  163. .ui.tag.labels .label:before,
  164. .ui.tag.label:before {
  165. position: absolute;
  166. -webkit-transform: translateY(-50%) translateX(50%) rotate(-45deg);
  167. -ms-transform: translateY(-50%) translateX(50%) rotate(-45deg);
  168. transform: translateY(-50%) translateX(50%) rotate(-45deg);
  169. top: 50%;
  170. right: 100%;
  171. content: '';
  172. background-color: inherit;
  173. background-image: none;
  174. width: 1.56em;
  175. height: 1.56em;
  176. -webkit-transition: none;
  177. transition: none;
  178. }
  179. .ui.tag.labels .label:after,
  180. .ui.tag.label:after {
  181. position: absolute;
  182. content: '';
  183. top: 50%;
  184. left: -0.25em;
  185. margin-top: -0.25em;
  186. background-color: #FFFFFF !important;
  187. width: 0.5em;
  188. height: 0.5em;
  189. box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3);
  190. border-radius: 500rem;
  191. }
  192. /*-------------------
  193. Corner Label
  194. --------------------*/
  195. .ui.corner.label {
  196. position: absolute;
  197. top: 0em;
  198. right: 0em;
  199. margin: 0em;
  200. padding: 0em;
  201. text-align: center;
  202. border-color: #E8E8E8;
  203. width: 4em;
  204. height: 4em;
  205. z-index: 1;
  206. -webkit-transition: border-color 0.1s ease;
  207. transition: border-color 0.1s ease;
  208. }
  209. /* Icon Label */
  210. .ui.corner.label {
  211. background-color: transparent !important;
  212. }
  213. .ui.corner.label:after {
  214. position: absolute;
  215. content: "";
  216. right: 0em;
  217. top: 0em;
  218. z-index: -1;
  219. width: 0em;
  220. height: 0em;
  221. background-color: transparent !important;
  222. border-top: 0em solid transparent;
  223. border-right: 4em solid transparent;
  224. border-bottom: 4em solid transparent;
  225. border-left: 0em solid transparent;
  226. border-right-color: inherit;
  227. -webkit-transition: border-color 0.1s ease;
  228. transition: border-color 0.1s ease;
  229. }
  230. .ui.corner.label .icon {
  231. cursor: default;
  232. position: relative;
  233. top: 0.64285714em;
  234. left: 0.78571429em;
  235. font-size: 1.14285714em;
  236. margin: 0em;
  237. }
  238. /* Left Corner */
  239. .ui.left.corner.label,
  240. .ui.left.corner.label:after {
  241. right: auto;
  242. left: 0em;
  243. }
  244. .ui.left.corner.label:after {
  245. border-top: 4em solid transparent;
  246. border-right: 4em solid transparent;
  247. border-bottom: 0em solid transparent;
  248. border-left: 0em solid transparent;
  249. border-top-color: inherit;
  250. }
  251. .ui.left.corner.label .icon {
  252. left: -0.78571429em;
  253. }
  254. /* Segment */
  255. .ui.segment > .ui.corner.label {
  256. top: -1px;
  257. right: -1px;
  258. }
  259. .ui.segment > .ui.left.corner.label {
  260. right: auto;
  261. left: -1px;
  262. }
  263. /*-------------------
  264. Ribbon
  265. --------------------*/
  266. .ui.ribbon.label {
  267. position: relative;
  268. margin: 0em;
  269. min-width: -webkit-max-content;
  270. min-width: -moz-max-content;
  271. min-width: max-content;
  272. border-radius: 0em 0.28571429rem 0.28571429rem 0em;
  273. border-color: rgba(0, 0, 0, 0.15);
  274. }
  275. .ui.ribbon.label:after {
  276. position: absolute;
  277. content: '';
  278. top: 100%;
  279. left: 0%;
  280. background-color: transparent !important;
  281. border-style: solid;
  282. border-width: 0em 1.2em 1.2em 0em;
  283. border-color: transparent;
  284. border-right-color: inherit;
  285. width: 0em;
  286. height: 0em;
  287. }
  288. /* Positioning */
  289. .ui.ribbon.label {
  290. left: calc( -1rem - 1.2em );
  291. margin-right: -1.2em;
  292. padding-left: calc( 1rem + 1.2em );
  293. padding-right: 1.2em;
  294. }
  295. .ui[class*="right ribbon"].label {
  296. left: calc(100% + 1rem + 1.2em );
  297. padding-left: 1.2em;
  298. padding-right: calc( 1rem + 1.2em );
  299. }
  300. /* Right Ribbon */
  301. .ui[class*="right ribbon"].label {
  302. text-align: left;
  303. -webkit-transform: translateX(-100%);
  304. -ms-transform: translateX(-100%);
  305. transform: translateX(-100%);
  306. border-radius: 0.28571429rem 0em 0em 0.28571429rem;
  307. }
  308. .ui[class*="right ribbon"].label:after {
  309. left: auto;
  310. right: 0%;
  311. border-style: solid;
  312. border-width: 1.2em 1.2em 0em 0em;
  313. border-color: transparent;
  314. border-top-color: inherit;
  315. }
  316. /* Inside Table */
  317. .ui.image > .ribbon.label,
  318. .ui.card .image > .ribbon.label {
  319. position: absolute;
  320. top: 1rem;
  321. }
  322. .ui.card .image > .ui.ribbon.label,
  323. .ui.image > .ui.ribbon.label {
  324. left: calc( 0.05rem - 1.2em );
  325. }
  326. .ui.card .image > .ui[class*="right ribbon"].label,
  327. .ui.image > .ui[class*="right ribbon"].label {
  328. left: calc(100% + -0.05rem + 1.2em );
  329. padding-left: 0.833em;
  330. }
  331. /* Inside Table */
  332. .ui.table td > .ui.ribbon.label {
  333. left: calc( -0.71428571em - 1.2em );
  334. }
  335. .ui.table td > .ui[class*="right ribbon"].label {
  336. left: calc(100% + 0.71428571em + 1.2em );
  337. padding-left: 0.833em;
  338. }
  339. /*-------------------
  340. Attached
  341. --------------------*/
  342. .ui[class*="top attached"].label,
  343. .ui.attached.label {
  344. width: 100%;
  345. position: absolute;
  346. margin: 0em;
  347. top: 0em;
  348. left: 0em;
  349. padding: 0.75em 1em;
  350. border-radius: 0.21428571rem 0.21428571rem 0em 0em;
  351. }
  352. .ui[class*="bottom attached"].label {
  353. top: auto;
  354. bottom: 0em;
  355. border-radius: 0em 0em 0.21428571rem 0.21428571rem;
  356. }
  357. .ui[class*="top left attached"].label {
  358. width: auto;
  359. margin-top: 0em !important;
  360. border-radius: 0.21428571rem 0em 0.28571429rem 0em;
  361. }
  362. .ui[class*="top right attached"].label {
  363. width: auto;
  364. left: auto;
  365. right: 0em;
  366. border-radius: 0em 0.21428571rem 0em 0.28571429rem;
  367. }
  368. .ui[class*="bottom left attached"].label {
  369. width: auto;
  370. top: auto;
  371. bottom: 0em;
  372. border-radius: 0em 0.28571429rem 0em 0.21428571rem;
  373. }
  374. .ui[class*="bottom right attached"].label {
  375. top: auto;
  376. bottom: 0em;
  377. left: auto;
  378. right: 0em;
  379. width: auto;
  380. border-radius: 0.28571429rem 0em 0.21428571rem 0em;
  381. }
  382. /*******************************
  383. States
  384. *******************************/
  385. /*-------------------
  386. Disabled
  387. --------------------*/
  388. .ui.label.disabled {
  389. opacity: 0.5;
  390. }
  391. /*-------------------
  392. Hover
  393. --------------------*/
  394. a.ui.labels .label:hover,
  395. a.ui.label:hover {
  396. background-color: #E0E0E0;
  397. border-color: #E0E0E0;
  398. background-image: none;
  399. color: rgba(0, 0, 0, 0.8);
  400. }
  401. .ui.labels a.label:hover:before,
  402. a.ui.label:hover:before {
  403. color: rgba(0, 0, 0, 0.8);
  404. }
  405. /*-------------------
  406. Active
  407. --------------------*/
  408. .ui.active.label {
  409. background-color: #D0D0D0;
  410. border-color: #D0D0D0;
  411. background-image: none;
  412. color: rgba(0, 0, 0, 0.95);
  413. }
  414. .ui.active.label:before {
  415. background-color: #D0D0D0;
  416. background-image: none;
  417. color: rgba(0, 0, 0, 0.95);
  418. }
  419. /*-------------------
  420. Active Hover
  421. --------------------*/
  422. a.ui.labels .active.label:hover,
  423. a.ui.active.label:hover {
  424. background-color: #C8C8C8;
  425. border-color: #C8C8C8;
  426. background-image: none;
  427. color: rgba(0, 0, 0, 0.95);
  428. }
  429. .ui.labels a.active.label:ActiveHover:before,
  430. a.ui.active.label:ActiveHover:before {
  431. background-color: #C8C8C8;
  432. background-image: none;
  433. color: rgba(0, 0, 0, 0.95);
  434. }
  435. /*-------------------
  436. Visible
  437. --------------------*/
  438. .ui.labels.visible .label,
  439. .ui.label.visible {
  440. display: inline-block !important;
  441. }
  442. /*-------------------
  443. Hidden
  444. --------------------*/
  445. .ui.labels.hidden .label,
  446. .ui.label.hidden {
  447. display: none !important;
  448. }
  449. /*******************************
  450. Variations
  451. *******************************/
  452. /*-------------------
  453. Colors
  454. --------------------*/
  455. /*--- Red ---*/
  456. .ui.red.labels .label,
  457. .ui.red.label {
  458. background-color: #DB2828 !important;
  459. border-color: #DB2828 !important;
  460. color: #FFFFFF !important;
  461. }
  462. /* Link */
  463. .ui.red.labels .label:hover,
  464. a.ui.red.label:hover {
  465. background-color: #d01919 !important;
  466. border-color: #d01919 !important;
  467. color: #FFFFFF !important;
  468. }
  469. /* Corner */
  470. .ui.red.corner.label,
  471. .ui.red.corner.label:hover {
  472. background-color: transparent !important;
  473. }
  474. /* Ribbon */
  475. .ui.red.ribbon.label {
  476. border-color: #b21e1e !important;
  477. }
  478. /* Basic */
  479. .ui.basic.red.label {
  480. background-color: #FFFFFF !important;
  481. color: #DB2828 !important;
  482. border-color: #DB2828 !important;
  483. }
  484. .ui.basic.red.labels a.label:hover,
  485. a.ui.basic.red.label:hover {
  486. background-color: #FFFFFF !important;
  487. color: #d01919 !important;
  488. border-color: #d01919 !important;
  489. }
  490. /*--- Orange ---*/
  491. .ui.orange.labels .label,
  492. .ui.orange.label {
  493. background-color: #F2711C !important;
  494. border-color: #F2711C !important;
  495. color: #FFFFFF !important;
  496. }
  497. /* Link */
  498. .ui.orange.labels .label:hover,
  499. a.ui.orange.label:hover {
  500. background-color: #f26202 !important;
  501. border-color: #f26202 !important;
  502. color: #FFFFFF !important;
  503. }
  504. /* Corner */
  505. .ui.orange.corner.label,
  506. .ui.orange.corner.label:hover {
  507. background-color: transparent !important;
  508. }
  509. /* Ribbon */
  510. .ui.orange.ribbon.label {
  511. border-color: #cf590c !important;
  512. }
  513. /* Basic */
  514. .ui.basic.orange.label {
  515. background-color: #FFFFFF !important;
  516. color: #F2711C !important;
  517. border-color: #F2711C !important;
  518. }
  519. .ui.basic.orange.labels a.label:hover,
  520. a.ui.basic.orange.label:hover {
  521. background-color: #FFFFFF !important;
  522. color: #f26202 !important;
  523. border-color: #f26202 !important;
  524. }
  525. /*--- Yellow ---*/
  526. .ui.yellow.labels .label,
  527. .ui.yellow.label {
  528. background-color: #FBBD08 !important;
  529. border-color: #FBBD08 !important;
  530. color: #FFFFFF !important;
  531. }
  532. /* Link */
  533. .ui.yellow.labels .label:hover,
  534. a.ui.yellow.label:hover {
  535. background-color: #eaae00 !important;
  536. border-color: #eaae00 !important;
  537. color: #FFFFFF !important;
  538. }
  539. /* Corner */
  540. .ui.yellow.corner.label,
  541. .ui.yellow.corner.label:hover {
  542. background-color: transparent !important;
  543. }
  544. /* Ribbon */
  545. .ui.yellow.ribbon.label {
  546. border-color: #cd9903 !important;
  547. }
  548. /* Basic */
  549. .ui.basic.yellow.label {
  550. background-color: #FFFFFF !important;
  551. color: #FBBD08 !important;
  552. border-color: #FBBD08 !important;
  553. }
  554. .ui.basic.yellow.labels a.label:hover,
  555. a.ui.basic.yellow.label:hover {
  556. background-color: #FFFFFF !important;
  557. color: #eaae00 !important;
  558. border-color: #eaae00 !important;
  559. }
  560. /*--- Olive ---*/
  561. .ui.olive.labels .label,
  562. .ui.olive.label {
  563. background-color: #B5CC18 !important;
  564. border-color: #B5CC18 !important;
  565. color: #FFFFFF !important;
  566. }
  567. /* Link */
  568. .ui.olive.labels .label:hover,
  569. a.ui.olive.label:hover {
  570. background-color: #a7bd0d !important;
  571. border-color: #a7bd0d !important;
  572. color: #FFFFFF !important;
  573. }
  574. /* Corner */
  575. .ui.olive.corner.label,
  576. .ui.olive.corner.label:hover {
  577. background-color: transparent !important;
  578. }
  579. /* Ribbon */
  580. .ui.olive.ribbon.label {
  581. border-color: #198f35 !important;
  582. }
  583. /* Basic */
  584. .ui.basic.olive.label {
  585. background-color: #FFFFFF !important;
  586. color: #B5CC18 !important;
  587. border-color: #B5CC18 !important;
  588. }
  589. .ui.basic.olive.labels a.label:hover,
  590. a.ui.basic.olive.label:hover {
  591. background-color: #FFFFFF !important;
  592. color: #a7bd0d !important;
  593. border-color: #a7bd0d !important;
  594. }
  595. /*--- Green ---*/
  596. .ui.green.labels .label,
  597. .ui.green.label {
  598. background-color: #21BA45 !important;
  599. border-color: #21BA45 !important;
  600. color: #FFFFFF !important;
  601. }
  602. /* Link */
  603. .ui.green.labels .label:hover,
  604. a.ui.green.label:hover {
  605. background-color: #16ab39 !important;
  606. border-color: #16ab39 !important;
  607. color: #FFFFFF !important;
  608. }
  609. /* Corner */
  610. .ui.green.corner.label,
  611. .ui.green.corner.label:hover {
  612. background-color: transparent !important;
  613. }
  614. /* Ribbon */
  615. .ui.green.ribbon.label {
  616. border-color: #198f35 !important;
  617. }
  618. /* Basic */
  619. .ui.basic.green.label {
  620. background-color: #FFFFFF !important;
  621. color: #21BA45 !important;
  622. border-color: #21BA45 !important;
  623. }
  624. .ui.basic.green.labels a.label:hover,
  625. a.ui.basic.green.label:hover {
  626. background-color: #FFFFFF !important;
  627. color: #16ab39 !important;
  628. border-color: #16ab39 !important;
  629. }
  630. /*--- Teal ---*/
  631. .ui.teal.labels .label,
  632. .ui.teal.label {
  633. background-color: #00B5AD !important;
  634. border-color: #00B5AD !important;
  635. color: #FFFFFF !important;
  636. }
  637. /* Link */
  638. .ui.teal.labels .label:hover,
  639. a.ui.teal.label:hover {
  640. background-color: #009c95 !important;
  641. border-color: #009c95 !important;
  642. color: #FFFFFF !important;
  643. }
  644. /* Corner */
  645. .ui.teal.corner.label,
  646. .ui.teal.corner.label:hover {
  647. background-color: transparent !important;
  648. }
  649. /* Ribbon */
  650. .ui.teal.ribbon.label {
  651. border-color: #00827c !important;
  652. }
  653. /* Basic */
  654. .ui.basic.teal.label {
  655. background-color: #FFFFFF !important;
  656. color: #00B5AD !important;
  657. border-color: #00B5AD !important;
  658. }
  659. .ui.basic.teal.labels a.label:hover,
  660. a.ui.basic.teal.label:hover {
  661. background-color: #FFFFFF !important;
  662. color: #009c95 !important;
  663. border-color: #009c95 !important;
  664. }
  665. /*--- Blue ---*/
  666. .ui.blue.labels .label,
  667. .ui.blue.label {
  668. background-color: #2185D0 !important;
  669. border-color: #2185D0 !important;
  670. color: #FFFFFF !important;
  671. }
  672. /* Link */
  673. .ui.blue.labels .label:hover,
  674. a.ui.blue.label:hover {
  675. background-color: #1678c2 !important;
  676. border-color: #1678c2 !important;
  677. color: #FFFFFF !important;
  678. }
  679. /* Corner */
  680. .ui.blue.corner.label,
  681. .ui.blue.corner.label:hover {
  682. background-color: transparent !important;
  683. }
  684. /* Ribbon */
  685. .ui.blue.ribbon.label {
  686. border-color: #1a69a4 !important;
  687. }
  688. /* Basic */
  689. .ui.basic.blue.label {
  690. background-color: #FFFFFF !important;
  691. color: #2185D0 !important;
  692. border-color: #2185D0 !important;
  693. }
  694. .ui.basic.blue.labels a.label:hover,
  695. a.ui.basic.blue.label:hover {
  696. background-color: #FFFFFF !important;
  697. color: #1678c2 !important;
  698. border-color: #1678c2 !important;
  699. }
  700. /*--- Violet ---*/
  701. .ui.violet.labels .label,
  702. .ui.violet.label {
  703. background-color: #6435C9 !important;
  704. border-color: #6435C9 !important;
  705. color: #FFFFFF !important;
  706. }
  707. /* Link */
  708. .ui.violet.labels .label:hover,
  709. a.ui.violet.label:hover {
  710. background-color: #5829bb !important;
  711. border-color: #5829bb !important;
  712. color: #FFFFFF !important;
  713. }
  714. /* Corner */
  715. .ui.violet.corner.label,
  716. .ui.violet.corner.label:hover {
  717. background-color: transparent !important;
  718. }
  719. /* Ribbon */
  720. .ui.violet.ribbon.label {
  721. border-color: #502aa1 !important;
  722. }
  723. /* Basic */
  724. .ui.basic.violet.label {
  725. background-color: #FFFFFF !important;
  726. color: #6435C9 !important;
  727. border-color: #6435C9 !important;
  728. }
  729. .ui.basic.violet.labels a.label:hover,
  730. a.ui.basic.violet.label:hover {
  731. background-color: #FFFFFF !important;
  732. color: #5829bb !important;
  733. border-color: #5829bb !important;
  734. }
  735. /*--- Purple ---*/
  736. .ui.purple.labels .label,
  737. .ui.purple.label {
  738. background-color: #A333C8 !important;
  739. border-color: #A333C8 !important;
  740. color: #FFFFFF !important;
  741. }
  742. /* Link */
  743. .ui.purple.labels .label:hover,
  744. a.ui.purple.label:hover {
  745. background-color: #9627ba !important;
  746. border-color: #9627ba !important;
  747. color: #FFFFFF !important;
  748. }
  749. /* Corner */
  750. .ui.purple.corner.label,
  751. .ui.purple.corner.label:hover {
  752. background-color: transparent !important;
  753. }
  754. /* Ribbon */
  755. .ui.purple.ribbon.label {
  756. border-color: #82299f !important;
  757. }
  758. /* Basic */
  759. .ui.basic.purple.label {
  760. background-color: #FFFFFF !important;
  761. color: #A333C8 !important;
  762. border-color: #A333C8 !important;
  763. }
  764. .ui.basic.purple.labels a.label:hover,
  765. a.ui.basic.purple.label:hover {
  766. background-color: #FFFFFF !important;
  767. color: #9627ba !important;
  768. border-color: #9627ba !important;
  769. }
  770. /*--- Pink ---*/
  771. .ui.pink.labels .label,
  772. .ui.pink.label {
  773. background-color: #E03997 !important;
  774. border-color: #E03997 !important;
  775. color: #FFFFFF !important;
  776. }
  777. /* Link */
  778. .ui.pink.labels .label:hover,
  779. a.ui.pink.label:hover {
  780. background-color: #e61a8d !important;
  781. border-color: #e61a8d !important;
  782. color: #FFFFFF !important;
  783. }
  784. /* Corner */
  785. .ui.pink.corner.label,
  786. .ui.pink.corner.label:hover {
  787. background-color: transparent !important;
  788. }
  789. /* Ribbon */
  790. .ui.pink.ribbon.label {
  791. border-color: #c71f7e !important;
  792. }
  793. /* Basic */
  794. .ui.basic.pink.label {
  795. background-color: #FFFFFF !important;
  796. color: #E03997 !important;
  797. border-color: #E03997 !important;
  798. }
  799. .ui.basic.pink.labels a.label:hover,
  800. a.ui.basic.pink.label:hover {
  801. background-color: #FFFFFF !important;
  802. color: #e61a8d !important;
  803. border-color: #e61a8d !important;
  804. }
  805. /*--- Brown ---*/
  806. .ui.brown.labels .label,
  807. .ui.brown.label {
  808. background-color: #A5673F !important;
  809. border-color: #A5673F !important;
  810. color: #FFFFFF !important;
  811. }
  812. /* Link */
  813. .ui.brown.labels .label:hover,
  814. a.ui.brown.label:hover {
  815. background-color: #975b33 !important;
  816. border-color: #975b33 !important;
  817. color: #FFFFFF !important;
  818. }
  819. /* Corner */
  820. .ui.brown.corner.label,
  821. .ui.brown.corner.label:hover {
  822. background-color: transparent !important;
  823. }
  824. /* Ribbon */
  825. .ui.brown.ribbon.label {
  826. border-color: #805031 !important;
  827. }
  828. /* Basic */
  829. .ui.basic.brown.label {
  830. background-color: #FFFFFF !important;
  831. color: #A5673F !important;
  832. border-color: #A5673F !important;
  833. }
  834. .ui.basic.brown.labels a.label:hover,
  835. a.ui.basic.brown.label:hover {
  836. background-color: #FFFFFF !important;
  837. color: #975b33 !important;
  838. border-color: #975b33 !important;
  839. }
  840. /*--- Grey ---*/
  841. .ui.grey.labels .label,
  842. .ui.grey.label {
  843. background-color: #767676 !important;
  844. border-color: #767676 !important;
  845. color: #FFFFFF !important;
  846. }
  847. /* Link */
  848. .ui.grey.labels .label:hover,
  849. a.ui.grey.label:hover {
  850. background-color: #838383 !important;
  851. border-color: #838383 !important;
  852. color: #FFFFFF !important;
  853. }
  854. /* Corner */
  855. .ui.grey.corner.label,
  856. .ui.grey.corner.label:hover {
  857. background-color: transparent !important;
  858. }
  859. /* Ribbon */
  860. .ui.grey.ribbon.label {
  861. border-color: #805031 !important;
  862. }
  863. /* Basic */
  864. .ui.basic.grey.label {
  865. background-color: #FFFFFF !important;
  866. color: #767676 !important;
  867. border-color: #767676 !important;
  868. }
  869. .ui.basic.grey.labels a.label:hover,
  870. a.ui.basic.grey.label:hover {
  871. background-color: #FFFFFF !important;
  872. color: #838383 !important;
  873. border-color: #838383 !important;
  874. }
  875. /*--- Black ---*/
  876. .ui.black.labels .label,
  877. .ui.black.label {
  878. background-color: #1B1C1D !important;
  879. border-color: #1B1C1D !important;
  880. color: #FFFFFF !important;
  881. }
  882. /* Link */
  883. .ui.black.labels .label:hover,
  884. a.ui.black.label:hover {
  885. background-color: #27292a !important;
  886. border-color: #27292a !important;
  887. color: #FFFFFF !important;
  888. }
  889. /* Corner */
  890. .ui.black.corner.label,
  891. .ui.black.corner.label:hover {
  892. background-color: transparent !important;
  893. }
  894. /* Ribbon */
  895. .ui.black.ribbon.label {
  896. border-color: #805031 !important;
  897. }
  898. /* Basic */
  899. .ui.basic.black.label {
  900. background-color: #FFFFFF !important;
  901. color: #1B1C1D !important;
  902. border-color: #1B1C1D !important;
  903. }
  904. .ui.basic.black.labels a.label:hover,
  905. a.ui.basic.black.label:hover {
  906. background-color: #FFFFFF !important;
  907. color: #27292a !important;
  908. border-color: #27292a !important;
  909. }
  910. /*-------------------
  911. Basic
  912. --------------------*/
  913. .ui.basic.label {
  914. background: none #FFFFFF;
  915. border: 1px solid rgba(34, 36, 38, 0.15);
  916. color: rgba(0, 0, 0, 0.87);
  917. box-shadow: none;
  918. }
  919. /* Link */
  920. a.ui.basic.label:hover {
  921. text-decoration: none;
  922. background: none #FFFFFF;
  923. color: #1e70bf;
  924. box-shadow: 1px solid rgba(34, 36, 38, 0.15);
  925. box-shadow: none;
  926. }
  927. /* Pointing */
  928. .ui.basic.pointing.label:before {
  929. border-color: inherit;
  930. }
  931. /*-------------------
  932. Fluid
  933. --------------------*/
  934. .ui.label.fluid,
  935. .ui.fluid.labels > .label {
  936. width: 100%;
  937. box-sizing: border-box;
  938. }
  939. /*-------------------
  940. Inverted
  941. --------------------*/
  942. .ui.inverted.labels .label,
  943. .ui.inverted.label {
  944. color: rgba(255, 255, 255, 0.9) !important;
  945. }
  946. /*-------------------
  947. Horizontal
  948. --------------------*/
  949. .ui.horizontal.labels .label,
  950. .ui.horizontal.label {
  951. margin: 0em 0.5em 0em 0em;
  952. padding: 0.4em 0.833em;
  953. min-width: 3em;
  954. text-align: center;
  955. }
  956. /*-------------------
  957. Circular
  958. --------------------*/
  959. .ui.circular.labels .label,
  960. .ui.circular.label {
  961. min-width: 2em;
  962. min-height: 2em;
  963. padding: 0.5em !important;
  964. line-height: 1em;
  965. text-align: center;
  966. border-radius: 500rem;
  967. }
  968. .ui.empty.circular.labels .label,
  969. .ui.empty.circular.label {
  970. min-width: 0em;
  971. min-height: 0em;
  972. overflow: hidden;
  973. width: 0.5em;
  974. height: 0.5em;
  975. vertical-align: baseline;
  976. }
  977. /*-------------------
  978. Pointing
  979. --------------------*/
  980. .ui.pointing.label {
  981. position: relative;
  982. }
  983. .ui.attached.pointing.label {
  984. position: absolute;
  985. }
  986. .ui.pointing.label:before {
  987. background-color: inherit;
  988. background-image: inherit;
  989. border-width: none;
  990. border-style: solid;
  991. border-color: inherit;
  992. }
  993. /* Arrow */
  994. .ui.pointing.label:before {
  995. position: absolute;
  996. content: '';
  997. -webkit-transform: rotate(45deg);
  998. -ms-transform: rotate(45deg);
  999. transform: rotate(45deg);
  1000. background-image: none;
  1001. z-index: 2;
  1002. width: 0.6666em;
  1003. height: 0.6666em;
  1004. -webkit-transition: background 0.1s ease;
  1005. transition: background 0.1s ease;
  1006. }
  1007. /*--- Above ---*/
  1008. .ui.pointing.label,
  1009. .ui[class*="pointing above"].label {
  1010. margin-top: 1em;
  1011. }
  1012. .ui.pointing.label:before,
  1013. .ui[class*="pointing above"].label:before {
  1014. border-width: 1px 0px 0px 1px;
  1015. -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  1016. -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  1017. transform: translateX(-50%) translateY(-50%) rotate(45deg);
  1018. top: 0%;
  1019. left: 50%;
  1020. }
  1021. /*--- Below ---*/
  1022. .ui[class*="bottom pointing"].label,
  1023. .ui[class*="pointing below"].label {
  1024. margin-top: 0em;
  1025. margin-bottom: 1em;
  1026. }
  1027. .ui[class*="bottom pointing"].label:before,
  1028. .ui[class*="pointing below"].label:before {
  1029. border-width: 0px 1px 1px 0px;
  1030. top: auto;
  1031. right: auto;
  1032. -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  1033. -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  1034. transform: translateX(-50%) translateY(-50%) rotate(45deg);
  1035. top: 100%;
  1036. left: 50%;
  1037. }
  1038. /*--- Left ---*/
  1039. .ui[class*="left pointing"].label {
  1040. margin-top: 0em;
  1041. margin-left: 0.6666em;
  1042. }
  1043. .ui[class*="left pointing"].label:before {
  1044. border-width: 0px 0px 1px 1px;
  1045. -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  1046. -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  1047. transform: translateX(-50%) translateY(-50%) rotate(45deg);
  1048. bottom: auto;
  1049. right: auto;
  1050. top: 50%;
  1051. left: 0em;
  1052. }
  1053. /*--- Right ---*/
  1054. .ui[class*="right pointing"].label {
  1055. margin-top: 0em;
  1056. margin-right: 0.6666em;
  1057. }
  1058. .ui[class*="right pointing"].label:before {
  1059. border-width: 1px 1px 0px 0px;
  1060. -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg);
  1061. -ms-transform: translateX(50%) translateY(-50%) rotate(45deg);
  1062. transform: translateX(50%) translateY(-50%) rotate(45deg);
  1063. top: 50%;
  1064. right: 0%;
  1065. bottom: auto;
  1066. left: auto;
  1067. }
  1068. /* Basic Pointing */
  1069. /*--- Above ---*/
  1070. .ui.basic.pointing.label:before,
  1071. .ui.basic[class*="pointing above"].label:before {
  1072. margin-top: -1px;
  1073. }
  1074. /*--- Below ---*/
  1075. .ui.basic[class*="bottom pointing"].label:before,
  1076. .ui.basic[class*="pointing below"].label:before {
  1077. bottom: auto;
  1078. top: 100%;
  1079. margin-top: 1px;
  1080. }
  1081. /*--- Left ---*/
  1082. .ui.basic[class*="left pointing"].label:before {
  1083. top: 50%;
  1084. left: -1px;
  1085. }
  1086. /*--- Right ---*/
  1087. .ui.basic[class*="right pointing"].label:before {
  1088. top: 50%;
  1089. right: -1px;
  1090. }
  1091. /*------------------
  1092. Floating Label
  1093. -------------------*/
  1094. .ui.floating.label {
  1095. position: absolute;
  1096. z-index: 100;
  1097. top: -1em;
  1098. left: 100%;
  1099. margin: 0em 0em 0em -1.5em !important;
  1100. }
  1101. /*-------------------
  1102. Sizes
  1103. --------------------*/
  1104. .ui.mini.labels .label,
  1105. .ui.mini.label {
  1106. font-size: 0.64285714rem;
  1107. }
  1108. .ui.tiny.labels .label,
  1109. .ui.tiny.label {
  1110. font-size: 0.71428571rem;
  1111. }
  1112. .ui.small.labels .label,
  1113. .ui.small.label {
  1114. font-size: 0.78571429rem;
  1115. }
  1116. .ui.labels .label,
  1117. .ui.label {
  1118. font-size: 0.85714286rem;
  1119. }
  1120. .ui.large.labels .label,
  1121. .ui.large.label {
  1122. font-size: 1rem;
  1123. }
  1124. .ui.big.labels .label,
  1125. .ui.big.label {
  1126. font-size: 1.28571429rem;
  1127. }
  1128. .ui.huge.labels .label,
  1129. .ui.huge.label {
  1130. font-size: 1.42857143rem;
  1131. }
  1132. .ui.massive.labels .label,
  1133. .ui.massive.label {
  1134. font-size: 1.71428571rem;
  1135. }
  1136. /*******************************
  1137. Theme Overrides
  1138. *******************************/
  1139. /*******************************
  1140. Site Overrides
  1141. *******************************/