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