label.css 27 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313
  1. /*!
  2. * # Semantic UI 2.3.3 - Label
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Released under the MIT license
  7. * http://opensource.org/licenses/MIT
  8. *
  9. */
  10. /*******************************
  11. Label
  12. *******************************/
  13. .ui.label {
  14. display: inline-block;
  15. line-height: 1;
  16. vertical-align: baseline;
  17. margin: 0em 0.14285714em;
  18. background-color: #E8E8E8;
  19. background-image: none;
  20. padding: 0.5833em 0.833em;
  21. color: rgba(0, 0, 0, 0.6);
  22. text-transform: none;
  23. font-weight: bold;
  24. border: 0px solid transparent;
  25. border-radius: 0.28571429rem;
  26. -webkit-transition: background 0.1s ease;
  27. transition: background 0.1s ease;
  28. }
  29. .ui.label:first-child {
  30. margin-left: 0em;
  31. }
  32. .ui.label:last-child {
  33. margin-right: 0em;
  34. }
  35. /* Link */
  36. a.ui.label {
  37. cursor: pointer;
  38. }
  39. /* Inside Link */
  40. .ui.label > a {
  41. cursor: pointer;
  42. color: inherit;
  43. opacity: 0.5;
  44. -webkit-transition: 0.1s opacity ease;
  45. transition: 0.1s opacity ease;
  46. }
  47. .ui.label > a:hover {
  48. opacity: 1;
  49. }
  50. /* Image */
  51. .ui.label > img {
  52. width: auto !important;
  53. vertical-align: middle;
  54. height: 2.1666em !important;
  55. }
  56. /* Icon */
  57. .ui.label > .icon {
  58. width: auto;
  59. margin: 0em 0.75em 0em 0em;
  60. }
  61. /* Detail */
  62. .ui.label > .detail {
  63. display: inline-block;
  64. vertical-align: top;
  65. font-weight: bold;
  66. margin-left: 1em;
  67. opacity: 0.8;
  68. }
  69. .ui.label > .detail .icon {
  70. margin: 0em 0.25em 0em 0em;
  71. }
  72. /* Removable label */
  73. .ui.label > .close.icon,
  74. .ui.label > .delete.icon {
  75. cursor: pointer;
  76. margin-right: 0em;
  77. margin-left: 0.5em;
  78. font-size: 0.92857143em;
  79. opacity: 0.5;
  80. -webkit-transition: background 0.1s ease;
  81. transition: background 0.1s ease;
  82. }
  83. .ui.label > .delete.icon:hover {
  84. opacity: 1;
  85. }
  86. /*-------------------
  87. Group
  88. --------------------*/
  89. .ui.labels > .label {
  90. margin: 0em 0.5em 0.5em 0em;
  91. }
  92. /*-------------------
  93. Coupling
  94. --------------------*/
  95. .ui.header > .ui.label {
  96. margin-top: -0.29165em;
  97. }
  98. /* Remove border radius on attached segment */
  99. .ui.attached.segment > .ui.top.left.attached.label,
  100. .ui.bottom.attached.segment > .ui.top.left.attached.label {
  101. border-top-left-radius: 0;
  102. }
  103. .ui.attached.segment > .ui.top.right.attached.label,
  104. .ui.bottom.attached.segment > .ui.top.right.attached.label {
  105. border-top-right-radius: 0;
  106. }
  107. .ui.top.attached.segment > .ui.bottom.left.attached.label {
  108. border-bottom-left-radius: 0;
  109. }
  110. .ui.top.attached.segment > .ui.bottom.right.attached.label {
  111. border-bottom-right-radius: 0;
  112. }
  113. /* Padding on next content after a label */
  114. .ui.top.attached.label:first-child + :not(.attached),
  115. .ui.top.attached.label + [class*="right floated"] + * {
  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. -webkit-box-shadow: none;
  136. box-shadow: none;
  137. }
  138. .ui.image.label img {
  139. display: inline-block;
  140. vertical-align: top;
  141. height: 2.1666em;
  142. margin: -0.5833em 0.5em -0.5833em -0.5em;
  143. border-radius: 0.28571429rem 0em 0em 0.28571429rem;
  144. }
  145. .ui.image.label .detail {
  146. background: rgba(0, 0, 0, 0.1);
  147. margin: -0.5833em -0.833em -0.5833em 0.5em;
  148. padding: 0.5833em 0.833em;
  149. border-radius: 0em 0.28571429rem 0.28571429rem 0em;
  150. }
  151. /*-------------------
  152. Tag
  153. --------------------*/
  154. .ui.tag.labels .label,
  155. .ui.tag.label {
  156. margin-left: 1em;
  157. position: relative;
  158. padding-left: 1.5em;
  159. padding-right: 1.5em;
  160. border-radius: 0em 0.28571429rem 0.28571429rem 0em;
  161. -webkit-transition: none;
  162. transition: none;
  163. }
  164. .ui.tag.labels .label:before,
  165. .ui.tag.label:before {
  166. position: absolute;
  167. -webkit-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. -webkit-box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3);
  190. box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3);
  191. border-radius: 500rem;
  192. }
  193. /*-------------------
  194. Corner Label
  195. --------------------*/
  196. .ui.corner.label {
  197. position: absolute;
  198. top: 0em;
  199. right: 0em;
  200. margin: 0em;
  201. padding: 0em;
  202. text-align: center;
  203. border-color: #E8E8E8;
  204. width: 4em;
  205. height: 4em;
  206. z-index: 1;
  207. -webkit-transition: border-color 0.1s ease;
  208. transition: border-color 0.1s ease;
  209. }
  210. /* Icon Label */
  211. .ui.corner.label {
  212. background-color: transparent !important;
  213. }
  214. .ui.corner.label:after {
  215. position: absolute;
  216. content: "";
  217. right: 0em;
  218. top: 0em;
  219. z-index: -1;
  220. width: 0em;
  221. height: 0em;
  222. background-color: transparent !important;
  223. border-top: 0em solid transparent;
  224. border-right: 4em solid transparent;
  225. border-bottom: 4em solid transparent;
  226. border-left: 0em solid transparent;
  227. border-right-color: inherit;
  228. -webkit-transition: border-color 0.1s ease;
  229. transition: border-color 0.1s ease;
  230. }
  231. .ui.corner.label .icon {
  232. cursor: default;
  233. position: relative;
  234. top: 0.64285714em;
  235. left: 0.78571429em;
  236. font-size: 1.14285714em;
  237. margin: 0em;
  238. }
  239. /* Left Corner */
  240. .ui.left.corner.label,
  241. .ui.left.corner.label:after {
  242. right: auto;
  243. left: 0em;
  244. }
  245. .ui.left.corner.label:after {
  246. border-top: 4em solid transparent;
  247. border-right: 4em solid transparent;
  248. border-bottom: 0em solid transparent;
  249. border-left: 0em solid transparent;
  250. border-top-color: inherit;
  251. }
  252. .ui.left.corner.label .icon {
  253. left: -0.78571429em;
  254. }
  255. /* Segment */
  256. .ui.segment > .ui.corner.label {
  257. top: -1px;
  258. right: -1px;
  259. }
  260. .ui.segment > .ui.left.corner.label {
  261. right: auto;
  262. left: -1px;
  263. }
  264. /*-------------------
  265. Ribbon
  266. --------------------*/
  267. .ui.ribbon.label {
  268. position: relative;
  269. margin: 0em;
  270. min-width: -webkit-max-content;
  271. min-width: -moz-max-content;
  272. min-width: max-content;
  273. border-radius: 0em 0.28571429rem 0.28571429rem 0em;
  274. border-color: rgba(0, 0, 0, 0.15);
  275. }
  276. .ui.ribbon.label:after {
  277. position: absolute;
  278. content: '';
  279. top: 100%;
  280. left: 0%;
  281. background-color: transparent !important;
  282. border-style: solid;
  283. border-width: 0em 1.2em 1.2em 0em;
  284. border-color: transparent;
  285. border-right-color: inherit;
  286. width: 0em;
  287. height: 0em;
  288. }
  289. /* Positioning */
  290. .ui.ribbon.label {
  291. left: calc( -1rem - 1.2em );
  292. margin-right: -1.2em;
  293. padding-left: calc( 1rem + 1.2em );
  294. padding-right: 1.2em;
  295. }
  296. .ui[class*="right ribbon"].label {
  297. left: calc(100% + 1rem + 1.2em );
  298. padding-left: 1.2em;
  299. padding-right: calc( 1rem + 1.2em );
  300. }
  301. /* Right Ribbon */
  302. .ui[class*="right ribbon"].label {
  303. text-align: left;
  304. -webkit-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.78571429em - 1.2em );
  334. }
  335. .ui.table td > .ui[class*="right ribbon"].label {
  336. left: calc(100% + 0.78571429em + 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:not(.dropdown) {
  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: none #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: none #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: none #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: none #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: none #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: none #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: none #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: none #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: none #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: none #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: none #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: none #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: none #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. -webkit-box-shadow: none;
  918. box-shadow: none;
  919. }
  920. /* Link */
  921. a.ui.basic.label:hover {
  922. text-decoration: none;
  923. background: none #FFFFFF;
  924. color: #1e70bf;
  925. -webkit-box-shadow: 1px solid rgba(34, 36, 38, 0.15);
  926. box-shadow: 1px solid rgba(34, 36, 38, 0.15);
  927. -webkit-box-shadow: none;
  928. box-shadow: none;
  929. }
  930. /* Pointing */
  931. .ui.basic.pointing.label:before {
  932. border-color: inherit;
  933. }
  934. /*-------------------
  935. Fluid
  936. --------------------*/
  937. .ui.label.fluid,
  938. .ui.fluid.labels > .label {
  939. width: 100%;
  940. -webkit-box-sizing: border-box;
  941. box-sizing: border-box;
  942. }
  943. /*-------------------
  944. Inverted
  945. --------------------*/
  946. .ui.inverted.labels .label,
  947. .ui.inverted.label {
  948. color: rgba(255, 255, 255, 0.9) !important;
  949. }
  950. /*-------------------
  951. Horizontal
  952. --------------------*/
  953. .ui.horizontal.labels .label,
  954. .ui.horizontal.label {
  955. margin: 0em 0.5em 0em 0em;
  956. padding: 0.4em 0.833em;
  957. min-width: 3em;
  958. text-align: center;
  959. }
  960. /*-------------------
  961. Circular
  962. --------------------*/
  963. .ui.circular.labels .label,
  964. .ui.circular.label {
  965. min-width: 2em;
  966. min-height: 2em;
  967. padding: 0.5em !important;
  968. line-height: 1em;
  969. text-align: center;
  970. border-radius: 500rem;
  971. }
  972. .ui.empty.circular.labels .label,
  973. .ui.empty.circular.label {
  974. min-width: 0em;
  975. min-height: 0em;
  976. overflow: hidden;
  977. width: 0.5em;
  978. height: 0.5em;
  979. vertical-align: baseline;
  980. }
  981. /*-------------------
  982. Pointing
  983. --------------------*/
  984. .ui.pointing.label {
  985. position: relative;
  986. }
  987. .ui.attached.pointing.label {
  988. position: absolute;
  989. }
  990. .ui.pointing.label:before {
  991. background-color: inherit;
  992. background-image: inherit;
  993. border-width: none;
  994. border-style: solid;
  995. border-color: inherit;
  996. }
  997. /* Arrow */
  998. .ui.pointing.label:before {
  999. position: absolute;
  1000. content: '';
  1001. -webkit-transform: rotate(45deg);
  1002. transform: rotate(45deg);
  1003. background-image: none;
  1004. z-index: 2;
  1005. width: 0.6666em;
  1006. height: 0.6666em;
  1007. -webkit-transition: background 0.1s ease;
  1008. transition: background 0.1s ease;
  1009. }
  1010. /*--- Above ---*/
  1011. .ui.pointing.label,
  1012. .ui[class*="pointing above"].label {
  1013. margin-top: 1em;
  1014. }
  1015. .ui.pointing.label:before,
  1016. .ui[class*="pointing above"].label:before {
  1017. border-width: 1px 0px 0px 1px;
  1018. -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  1019. transform: translateX(-50%) translateY(-50%) rotate(45deg);
  1020. top: 0%;
  1021. left: 50%;
  1022. }
  1023. /*--- Below ---*/
  1024. .ui[class*="bottom pointing"].label,
  1025. .ui[class*="pointing below"].label {
  1026. margin-top: 0em;
  1027. margin-bottom: 1em;
  1028. }
  1029. .ui[class*="bottom pointing"].label:before,
  1030. .ui[class*="pointing below"].label:before {
  1031. border-width: 0px 1px 1px 0px;
  1032. top: auto;
  1033. right: auto;
  1034. -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  1035. transform: translateX(-50%) translateY(-50%) rotate(45deg);
  1036. top: 100%;
  1037. left: 50%;
  1038. }
  1039. /*--- Left ---*/
  1040. .ui[class*="left pointing"].label {
  1041. margin-top: 0em;
  1042. margin-left: 0.6666em;
  1043. }
  1044. .ui[class*="left pointing"].label:before {
  1045. border-width: 0px 0px 1px 1px;
  1046. -webkit-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. transform: translateX(50%) translateY(-50%) rotate(45deg);
  1062. top: 50%;
  1063. right: 0%;
  1064. bottom: auto;
  1065. left: auto;
  1066. }
  1067. /* Basic Pointing */
  1068. /*--- Above ---*/
  1069. .ui.basic.pointing.label:before,
  1070. .ui.basic[class*="pointing above"].label:before {
  1071. margin-top: -1px;
  1072. }
  1073. /*--- Below ---*/
  1074. .ui.basic[class*="bottom pointing"].label:before,
  1075. .ui.basic[class*="pointing below"].label:before {
  1076. bottom: auto;
  1077. top: 100%;
  1078. margin-top: 1px;
  1079. }
  1080. /*--- Left ---*/
  1081. .ui.basic[class*="left pointing"].label:before {
  1082. top: 50%;
  1083. left: -1px;
  1084. }
  1085. /*--- Right ---*/
  1086. .ui.basic[class*="right pointing"].label:before {
  1087. top: 50%;
  1088. right: -1px;
  1089. }
  1090. /*------------------
  1091. Floating Label
  1092. -------------------*/
  1093. .ui.floating.label {
  1094. position: absolute;
  1095. z-index: 100;
  1096. top: -1em;
  1097. left: 100%;
  1098. margin: 0em 0em 0em -1.5em !important;
  1099. }
  1100. /*-------------------
  1101. Sizes
  1102. --------------------*/
  1103. .ui.mini.labels .label,
  1104. .ui.mini.label {
  1105. font-size: 0.64285714rem;
  1106. }
  1107. .ui.tiny.labels .label,
  1108. .ui.tiny.label {
  1109. font-size: 0.71428571rem;
  1110. }
  1111. .ui.small.labels .label,
  1112. .ui.small.label {
  1113. font-size: 0.78571429rem;
  1114. }
  1115. .ui.labels .label,
  1116. .ui.label {
  1117. font-size: 0.85714286rem;
  1118. }
  1119. .ui.large.labels .label,
  1120. .ui.large.label {
  1121. font-size: 1rem;
  1122. }
  1123. .ui.big.labels .label,
  1124. .ui.big.label {
  1125. font-size: 1.28571429rem;
  1126. }
  1127. .ui.huge.labels .label,
  1128. .ui.huge.label {
  1129. font-size: 1.42857143rem;
  1130. }
  1131. .ui.massive.labels .label,
  1132. .ui.massive.label {
  1133. font-size: 1.71428571rem;
  1134. }
  1135. /*******************************
  1136. Theme Overrides
  1137. *******************************/
  1138. /*******************************
  1139. Site Overrides
  1140. *******************************/