button.css 118 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484348534863487348834893490349134923493349434953496349734983499350035013502350335043505350635073508350935103511351235133514351535163517351835193520352135223523352435253526352735283529353035313532353335343535353635373538353935403541354235433544354535463547354835493550355135523553355435553556355735583559356035613562356335643565356635673568356935703571357235733574357535763577357835793580358135823583358435853586358735883589359035913592359335943595359635973598359936003601360236033604360536063607360836093610361136123613361436153616361736183619362036213622362336243625362636273628362936303631363236333634363536363637363836393640364136423643364436453646364736483649365036513652365336543655365636573658365936603661366236633664366536663667366836693670367136723673367436753676367736783679368036813682368336843685368636873688368936903691369236933694369536963697369836993700370137023703370437053706370737083709371037113712371337143715371637173718371937203721372237233724372537263727372837293730373137323733373437353736373737383739374037413742374337443745374637473748374937503751375237533754375537563757375837593760376137623763376437653766376737683769377037713772377337743775377637773778377937803781378237833784378537863787378837893790379137923793379437953796379737983799380038013802380338043805380638073808380938103811381238133814381538163817381838193820382138223823382438253826382738283829383038313832383338343835383638373838383938403841384238433844384538463847384838493850385138523853385438553856385738583859386038613862386338643865386638673868386938703871387238733874387538763877387838793880388138823883388438853886388738883889389038913892389338943895389638973898389939003901390239033904390539063907390839093910391139123913391439153916391739183919392039213922392339243925392639273928392939303931393239333934393539363937393839393940394139423943394439453946394739483949395039513952395339543955395639573958395939603961396239633964396539663967396839693970397139723973397439753976397739783979398039813982398339843985398639873988398939903991399239933994399539963997399839994000400140024003400440054006400740084009401040114012401340144015401640174018401940204021402240234024402540264027402840294030403140324033403440354036403740384039404040414042404340444045404640474048404940504051405240534054405540564057405840594060406140624063406440654066406740684069407040714072407340744075407640774078407940804081408240834084408540864087408840894090409140924093409440954096409740984099410041014102410341044105410641074108410941104111411241134114411541164117411841194120412141224123412441254126412741284129413041314132413341344135413641374138413941404141414241434144414541464147414841494150415141524153415441554156415741584159416041614162416341644165416641674168416941704171417241734174417541764177417841794180418141824183418441854186418741884189419041914192419341944195419641974198419942004201420242034204420542064207420842094210421142124213421442154216421742184219422042214222422342244225422642274228422942304231423242334234423542364237423842394240424142424243424442454246424742484249425042514252425342544255425642574258425942604261426242634264426542664267426842694270427142724273427442754276427742784279428042814282428342844285428642874288428942904291429242934294429542964297429842994300430143024303430443054306430743084309431043114312431343144315431643174318431943204321432243234324432543264327432843294330433143324333433443354336433743384339434043414342434343444345434643474348434943504351435243534354435543564357435843594360436143624363436443654366436743684369437043714372
  1. /*!
  2. * # Fomantic-UI - Button
  3. * http://github.com/fomantic/Fomantic-UI/
  4. *
  5. *
  6. * Released under the MIT license
  7. * http://opensource.org/licenses/MIT
  8. *
  9. */
  10. /*******************************
  11. Button
  12. *******************************/
  13. .ui.button {
  14. cursor: pointer;
  15. display: inline-block;
  16. min-height: 1em;
  17. outline: none;
  18. border: none;
  19. vertical-align: baseline;
  20. background: #E0E1E2 none;
  21. color: rgba(0, 0, 0, 0.6);
  22. font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  23. margin: 0 0.25em 0 0;
  24. padding: 0.78571429em 1.5em 0.78571429em;
  25. text-transform: none;
  26. text-shadow: none;
  27. font-weight: bold;
  28. line-height: 1em;
  29. font-style: normal;
  30. text-align: center;
  31. text-decoration: none;
  32. border-radius: 0.28571429rem;
  33. -webkit-box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  34. box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  35. -webkit-user-select: none;
  36. -moz-user-select: none;
  37. -ms-user-select: none;
  38. user-select: none;
  39. -webkit-transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, background 0.1s ease, -webkit-box-shadow 0.1s ease;
  40. transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, background 0.1s ease, -webkit-box-shadow 0.1s ease;
  41. transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
  42. transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease, -webkit-box-shadow 0.1s ease;
  43. will-change: auto;
  44. -webkit-tap-highlight-color: transparent;
  45. }
  46. /*******************************
  47. States
  48. *******************************/
  49. /*--------------
  50. Hover
  51. ---------------*/
  52. .ui.button:hover {
  53. background-color: #CACBCD;
  54. background-image: none;
  55. -webkit-box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  56. box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  57. color: rgba(0, 0, 0, 0.8);
  58. }
  59. .ui.button:hover .icon {
  60. opacity: 0.85;
  61. }
  62. /*--------------
  63. Focus
  64. ---------------*/
  65. .ui.button:focus {
  66. background-color: #CACBCD;
  67. color: rgba(0, 0, 0, 0.8);
  68. background-image: none;
  69. -webkit-box-shadow: '';
  70. box-shadow: '';
  71. }
  72. .ui.button:focus .icon {
  73. opacity: 0.85;
  74. }
  75. /*--------------
  76. Down
  77. ---------------*/
  78. .ui.button:active,
  79. .ui.active.button:active {
  80. background-color: #BABBBC;
  81. background-image: '';
  82. color: rgba(0, 0, 0, 0.9);
  83. -webkit-box-shadow: 0 0 0 1px transparent inset, none;
  84. box-shadow: 0 0 0 1px transparent inset, none;
  85. }
  86. /*--------------
  87. Active
  88. ---------------*/
  89. .ui.active.button {
  90. background-color: #C0C1C2;
  91. background-image: none;
  92. -webkit-box-shadow: 0 0 0 1px transparent inset;
  93. box-shadow: 0 0 0 1px transparent inset;
  94. color: rgba(0, 0, 0, 0.95);
  95. }
  96. .ui.active.button:hover {
  97. background-color: #C0C1C2;
  98. background-image: none;
  99. color: rgba(0, 0, 0, 0.95);
  100. }
  101. .ui.active.button:active {
  102. background-color: #C0C1C2;
  103. background-image: none;
  104. }
  105. /*--------------
  106. Loading
  107. ---------------*/
  108. /* Specificity hack */
  109. .ui.loading.loading.loading.loading.loading.loading.button {
  110. position: relative;
  111. cursor: default;
  112. text-shadow: none !important;
  113. color: transparent;
  114. opacity: 1;
  115. pointer-events: auto;
  116. -webkit-transition: all 0s linear, opacity 0.1s ease;
  117. transition: all 0s linear, opacity 0.1s ease;
  118. }
  119. .ui.loading.button:before {
  120. position: absolute;
  121. content: '';
  122. top: 50%;
  123. left: 50%;
  124. margin: -0.64285714em 0 0 -0.64285714em;
  125. width: 1.28571429em;
  126. height: 1.28571429em;
  127. border-radius: 500rem;
  128. border: 0.2em solid rgba(0, 0, 0, 0.15);
  129. }
  130. .ui.loading.button:after {
  131. position: absolute;
  132. content: '';
  133. top: 50%;
  134. left: 50%;
  135. margin: -0.64285714em 0 0 -0.64285714em;
  136. width: 1.28571429em;
  137. height: 1.28571429em;
  138. border-radius: 500rem;
  139. -webkit-animation: loader 0.6s infinite linear;
  140. animation: loader 0.6s infinite linear;
  141. border: 0.2em solid currentColor;
  142. color: #FFFFFF;
  143. -webkit-box-shadow: 0 0 0 1px transparent;
  144. box-shadow: 0 0 0 1px transparent;
  145. }
  146. .ui.labeled.icon.loading.button .icon {
  147. background-color: transparent;
  148. -webkit-box-shadow: none;
  149. box-shadow: none;
  150. }
  151. .ui.basic.loading.button:not(.inverted):before {
  152. border-color: rgba(0, 0, 0, 0.1);
  153. }
  154. .ui.basic.loading.button:not(.inverted):after {
  155. border-color: #767676;
  156. }
  157. /*-------------------
  158. Disabled
  159. --------------------*/
  160. .ui.buttons .disabled.button:not(.basic),
  161. .ui.disabled.button,
  162. .ui.button:disabled,
  163. .ui.disabled.button:hover,
  164. .ui.disabled.active.button {
  165. cursor: default;
  166. opacity: 0.45 !important;
  167. background-image: none;
  168. -webkit-box-shadow: none;
  169. box-shadow: none;
  170. pointer-events: none !important;
  171. }
  172. /* Basic Group With Disabled */
  173. .ui.basic.buttons .ui.disabled.button {
  174. border-color: rgba(34, 36, 38, 0.5);
  175. }
  176. /*******************************
  177. Types
  178. *******************************/
  179. /*-------------------
  180. Animated
  181. --------------------*/
  182. .ui.animated.button {
  183. position: relative;
  184. overflow: hidden;
  185. padding-right: 0 !important;
  186. vertical-align: middle;
  187. z-index: 1;
  188. }
  189. .ui.animated.button .content {
  190. will-change: transform, opacity;
  191. }
  192. .ui.animated.button .visible.content {
  193. position: relative;
  194. margin-right: 1.5em;
  195. }
  196. .ui.animated.button .hidden.content {
  197. position: absolute;
  198. width: 100%;
  199. }
  200. /* Horizontal */
  201. .ui.animated.button .visible.content,
  202. .ui.animated.button .hidden.content {
  203. -webkit-transition: right 0.3s ease 0s;
  204. transition: right 0.3s ease 0s;
  205. }
  206. .ui.animated.button .visible.content {
  207. left: auto;
  208. right: 0;
  209. }
  210. .ui.animated.button .hidden.content {
  211. top: 50%;
  212. left: auto;
  213. right: -100%;
  214. margin-top: -0.5em;
  215. }
  216. .ui.animated.button:focus .visible.content,
  217. .ui.animated.button:hover .visible.content {
  218. left: auto;
  219. right: 200%;
  220. }
  221. .ui.animated.button:focus .hidden.content,
  222. .ui.animated.button:hover .hidden.content {
  223. left: auto;
  224. right: 0;
  225. }
  226. /* Vertical */
  227. .ui.vertical.animated.button .visible.content,
  228. .ui.vertical.animated.button .hidden.content {
  229. -webkit-transition: top 0.3s ease, -webkit-transform 0.3s ease;
  230. transition: top 0.3s ease, -webkit-transform 0.3s ease;
  231. transition: top 0.3s ease, transform 0.3s ease;
  232. transition: top 0.3s ease, transform 0.3s ease, -webkit-transform 0.3s ease;
  233. }
  234. .ui.vertical.animated.button .visible.content {
  235. -webkit-transform: translateY(0%);
  236. transform: translateY(0%);
  237. right: auto;
  238. }
  239. .ui.vertical.animated.button .hidden.content {
  240. top: -50%;
  241. left: 0;
  242. right: auto;
  243. }
  244. .ui.vertical.animated.button:focus .visible.content,
  245. .ui.vertical.animated.button:hover .visible.content {
  246. -webkit-transform: translateY(200%);
  247. transform: translateY(200%);
  248. right: auto;
  249. }
  250. .ui.vertical.animated.button:focus .hidden.content,
  251. .ui.vertical.animated.button:hover .hidden.content {
  252. top: 50%;
  253. right: auto;
  254. }
  255. /* Fade */
  256. .ui.fade.animated.button .visible.content,
  257. .ui.fade.animated.button .hidden.content {
  258. -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
  259. transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
  260. transition: opacity 0.3s ease, transform 0.3s ease;
  261. transition: opacity 0.3s ease, transform 0.3s ease, -webkit-transform 0.3s ease;
  262. }
  263. .ui.fade.animated.button .visible.content {
  264. left: auto;
  265. right: auto;
  266. opacity: 1;
  267. -webkit-transform: scale(1);
  268. transform: scale(1);
  269. }
  270. .ui.fade.animated.button .hidden.content {
  271. opacity: 0;
  272. left: 0;
  273. right: auto;
  274. -webkit-transform: scale(1.5);
  275. transform: scale(1.5);
  276. }
  277. .ui.fade.animated.button:focus .visible.content,
  278. .ui.fade.animated.button:hover .visible.content {
  279. left: auto;
  280. right: auto;
  281. opacity: 0;
  282. -webkit-transform: scale(0.75);
  283. transform: scale(0.75);
  284. }
  285. .ui.fade.animated.button:focus .hidden.content,
  286. .ui.fade.animated.button:hover .hidden.content {
  287. left: 0;
  288. right: auto;
  289. opacity: 1;
  290. -webkit-transform: scale(1);
  291. transform: scale(1);
  292. }
  293. /*-------------------
  294. Inverted
  295. --------------------*/
  296. .ui.inverted.button {
  297. -webkit-box-shadow: 0 0 0 2px #FFFFFF inset;
  298. box-shadow: 0 0 0 2px #FFFFFF inset;
  299. background: transparent none;
  300. color: #FFFFFF;
  301. text-shadow: none !important;
  302. }
  303. /* Group */
  304. .ui.inverted.buttons .button {
  305. margin: 0 0 0 -2px;
  306. }
  307. .ui.inverted.buttons .button:first-child {
  308. margin-left: 0;
  309. }
  310. .ui.inverted.vertical.buttons .button {
  311. margin: 0 0 -2px 0;
  312. }
  313. .ui.inverted.vertical.buttons .button:first-child {
  314. margin-top: 0;
  315. }
  316. /* States */
  317. /* Hover */
  318. .ui.inverted.button:hover {
  319. background: #FFFFFF;
  320. -webkit-box-shadow: 0 0 0 2px #FFFFFF inset;
  321. box-shadow: 0 0 0 2px #FFFFFF inset;
  322. color: rgba(0, 0, 0, 0.8);
  323. }
  324. /* Active / Focus */
  325. .ui.inverted.button:focus,
  326. .ui.inverted.button.active {
  327. background: #FFFFFF;
  328. -webkit-box-shadow: 0 0 0 2px #FFFFFF inset;
  329. box-shadow: 0 0 0 2px #FFFFFF inset;
  330. color: rgba(0, 0, 0, 0.8);
  331. }
  332. /* Active Focus */
  333. .ui.inverted.button.active:focus {
  334. background: #DCDDDE;
  335. -webkit-box-shadow: 0 0 0 2px #DCDDDE inset;
  336. box-shadow: 0 0 0 2px #DCDDDE inset;
  337. color: rgba(0, 0, 0, 0.8);
  338. }
  339. /*-------------------
  340. Labeled Button
  341. --------------------*/
  342. .ui.labeled.button:not(.icon) {
  343. display: -webkit-inline-box;
  344. display: -ms-inline-flexbox;
  345. display: inline-flex;
  346. -webkit-box-orient: horizontal;
  347. -webkit-box-direction: normal;
  348. -ms-flex-direction: row;
  349. flex-direction: row;
  350. background: none;
  351. padding: 0 !important;
  352. border: none;
  353. -webkit-box-shadow: none;
  354. box-shadow: none;
  355. }
  356. .ui.labeled.button > .button {
  357. margin: 0;
  358. }
  359. .ui.labeled.button > .label {
  360. display: -webkit-box;
  361. display: -ms-flexbox;
  362. display: flex;
  363. -webkit-box-align: center;
  364. -ms-flex-align: center;
  365. align-items: center;
  366. margin: 0 0 0 -1px !important;
  367. font-size: 1em;
  368. padding: '';
  369. border-color: rgba(34, 36, 38, 0.15);
  370. }
  371. /* Tag */
  372. .ui.labeled.button > .tag.label:before {
  373. width: 1.85em;
  374. height: 1.85em;
  375. }
  376. /* Right */
  377. .ui.labeled.button:not([class*="left labeled"]) > .button {
  378. border-top-right-radius: 0;
  379. border-bottom-right-radius: 0;
  380. }
  381. .ui.labeled.button:not([class*="left labeled"]) > .label {
  382. border-top-left-radius: 0;
  383. border-bottom-left-radius: 0;
  384. }
  385. /* Left Side */
  386. .ui[class*="left labeled"].button > .button {
  387. border-top-left-radius: 0;
  388. border-bottom-left-radius: 0;
  389. }
  390. .ui[class*="left labeled"].button > .label {
  391. border-top-right-radius: 0;
  392. border-bottom-right-radius: 0;
  393. }
  394. /*-------------------
  395. Social
  396. --------------------*/
  397. /* Facebook */
  398. .ui.facebook.button {
  399. background-color: #3B5998;
  400. color: #FFFFFF;
  401. text-shadow: none;
  402. background-image: none;
  403. -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  404. box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  405. }
  406. .ui.facebook.button:hover {
  407. background-color: #304d8a;
  408. color: #FFFFFF;
  409. text-shadow: none;
  410. }
  411. .ui.facebook.button:active {
  412. background-color: #2d4373;
  413. color: #FFFFFF;
  414. text-shadow: none;
  415. }
  416. /* Twitter */
  417. .ui.twitter.button {
  418. background-color: #1DA1F2;
  419. color: #FFFFFF;
  420. text-shadow: none;
  421. background-image: none;
  422. -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  423. box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  424. }
  425. .ui.twitter.button:hover {
  426. background-color: #0298f3;
  427. color: #FFFFFF;
  428. text-shadow: none;
  429. }
  430. .ui.twitter.button:active {
  431. background-color: #0c85d0;
  432. color: #FFFFFF;
  433. text-shadow: none;
  434. }
  435. /* Google Plus */
  436. .ui.google.plus.button {
  437. background-color: #DD4B39;
  438. color: #FFFFFF;
  439. text-shadow: none;
  440. background-image: none;
  441. -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  442. box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  443. }
  444. .ui.google.plus.button:hover {
  445. background-color: #e0321c;
  446. color: #FFFFFF;
  447. text-shadow: none;
  448. }
  449. .ui.google.plus.button:active {
  450. background-color: #c23321;
  451. color: #FFFFFF;
  452. text-shadow: none;
  453. }
  454. /* Linked In */
  455. .ui.linkedin.button {
  456. background-color: #0077B5;
  457. color: #FFFFFF;
  458. text-shadow: none;
  459. }
  460. .ui.linkedin.button:hover {
  461. background-color: #00669c;
  462. color: #FFFFFF;
  463. text-shadow: none;
  464. }
  465. .ui.linkedin.button:active {
  466. background-color: #005582;
  467. color: #FFFFFF;
  468. text-shadow: none;
  469. }
  470. /* YouTube */
  471. .ui.youtube.button {
  472. background-color: #FF0000;
  473. color: #FFFFFF;
  474. text-shadow: none;
  475. background-image: none;
  476. -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  477. box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  478. }
  479. .ui.youtube.button:hover {
  480. background-color: #e60000;
  481. color: #FFFFFF;
  482. text-shadow: none;
  483. }
  484. .ui.youtube.button:active {
  485. background-color: #cc0000;
  486. color: #FFFFFF;
  487. text-shadow: none;
  488. }
  489. /* Instagram */
  490. .ui.instagram.button {
  491. background-color: #49769C;
  492. color: #FFFFFF;
  493. text-shadow: none;
  494. background-image: none;
  495. -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  496. box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  497. }
  498. .ui.instagram.button:hover {
  499. background-color: #3d698e;
  500. color: #FFFFFF;
  501. text-shadow: none;
  502. }
  503. .ui.instagram.button:active {
  504. background-color: #395c79;
  505. color: #FFFFFF;
  506. text-shadow: none;
  507. }
  508. /* Pinterest */
  509. .ui.pinterest.button {
  510. background-color: #BD081C;
  511. color: #FFFFFF;
  512. text-shadow: none;
  513. background-image: none;
  514. -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  515. box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  516. }
  517. .ui.pinterest.button:hover {
  518. background-color: #ac0013;
  519. color: #FFFFFF;
  520. text-shadow: none;
  521. }
  522. .ui.pinterest.button:active {
  523. background-color: #8c0615;
  524. color: #FFFFFF;
  525. text-shadow: none;
  526. }
  527. /* VK */
  528. .ui.vk.button {
  529. background-color: #45668E;
  530. color: #FFFFFF;
  531. background-image: none;
  532. -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  533. box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  534. }
  535. .ui.vk.button:hover {
  536. background-color: #395980;
  537. color: #FFFFFF;
  538. }
  539. .ui.vk.button:active {
  540. background-color: #344d6c;
  541. color: #FFFFFF;
  542. }
  543. /* WhatsApp */
  544. .ui.whatsapp.button {
  545. background-color: #25D366;
  546. color: #FFFFFF;
  547. background-image: none;
  548. -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  549. box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  550. }
  551. .ui.whatsapp.button:hover {
  552. background-color: #19c55a;
  553. color: #FFFFFF;
  554. }
  555. .ui.whatsapp.button:active {
  556. background-color: #1da851;
  557. color: #FFFFFF;
  558. }
  559. /* Telegram */
  560. .ui.telegram.button {
  561. background-color: #0088CC;
  562. color: #FFFFFF;
  563. background-image: none;
  564. -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  565. box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  566. }
  567. .ui.telegram.button:hover {
  568. background-color: #0077b3;
  569. color: #FFFFFF;
  570. }
  571. .ui.telegram.button:active {
  572. background-color: #006699;
  573. color: #FFFFFF;
  574. }
  575. /*--------------
  576. Icon
  577. ---------------*/
  578. .ui.button > .icon:not(.button) {
  579. height: auto;
  580. opacity: 0.8;
  581. margin: 0 0.42857143em 0 -0.21428571em;
  582. -webkit-transition: opacity 0.1s ease;
  583. transition: opacity 0.1s ease;
  584. vertical-align: '';
  585. color: '';
  586. }
  587. .ui.button:not(.icon) > .icon:not(.button):not(.dropdown),
  588. .ui.button:not(.icon) > .icons:not(.button):not(.dropdown) {
  589. margin: 0 0.42857143em 0 -0.21428571em;
  590. }
  591. .ui.button:not(.icon) > .right.icon:not(.button):not(.dropdown) {
  592. margin: 0 -0.21428571em 0 0.42857143em;
  593. }
  594. /*******************************
  595. Variations
  596. *******************************/
  597. /*-------------------
  598. Floated
  599. --------------------*/
  600. .ui[class*="left floated"].buttons,
  601. .ui[class*="left floated"].button {
  602. float: left;
  603. margin-left: 0;
  604. margin-right: 0.25em;
  605. }
  606. .ui[class*="right floated"].buttons,
  607. .ui[class*="right floated"].button {
  608. float: right;
  609. margin-right: 0;
  610. margin-left: 0.25em;
  611. }
  612. /*-------------------
  613. Compact
  614. --------------------*/
  615. .ui.compact.buttons .button,
  616. .ui.compact.button {
  617. padding: 0.58928571em 1.125em 0.58928571em;
  618. }
  619. .ui.compact.icon.buttons .button,
  620. .ui.compact.icon.button {
  621. padding: 0.58928571em 0.58928571em 0.58928571em;
  622. }
  623. .ui.compact.labeled.icon.buttons .button,
  624. .ui.compact.labeled.icon.button {
  625. padding: 0.58928571em 3.69642857em 0.58928571em;
  626. }
  627. .ui.compact.labeled.icon.buttons .button > .icon,
  628. .ui.compact.labeled.icon.button > .icon {
  629. padding: 0.58928571em 0 0.58928571em 0;
  630. }
  631. /*-------------------
  632. Sizes
  633. --------------------*/
  634. .ui.buttons .button,
  635. .ui.buttons .or,
  636. .ui.button {
  637. font-size: 1rem;
  638. }
  639. .ui.mini.buttons .dropdown,
  640. .ui.mini.buttons .dropdown .menu > .item,
  641. .ui.mini.buttons .button,
  642. .ui.mini.buttons .or,
  643. .ui.ui.ui.ui.mini.button {
  644. font-size: 0.78571429rem;
  645. }
  646. .ui.tiny.buttons .dropdown,
  647. .ui.tiny.buttons .dropdown .menu > .item,
  648. .ui.tiny.buttons .button,
  649. .ui.tiny.buttons .or,
  650. .ui.ui.ui.ui.tiny.button {
  651. font-size: 0.85714286rem;
  652. }
  653. .ui.small.buttons .dropdown,
  654. .ui.small.buttons .dropdown .menu > .item,
  655. .ui.small.buttons .button,
  656. .ui.small.buttons .or,
  657. .ui.ui.ui.ui.small.button {
  658. font-size: 0.92857143rem;
  659. }
  660. .ui.large.buttons .dropdown,
  661. .ui.large.buttons .dropdown .menu > .item,
  662. .ui.large.buttons .button,
  663. .ui.large.buttons .or,
  664. .ui.ui.ui.ui.large.button {
  665. font-size: 1.14285714rem;
  666. }
  667. .ui.big.buttons .dropdown,
  668. .ui.big.buttons .dropdown .menu > .item,
  669. .ui.big.buttons .button,
  670. .ui.big.buttons .or,
  671. .ui.ui.ui.ui.big.button {
  672. font-size: 1.28571429rem;
  673. }
  674. .ui.huge.buttons .dropdown,
  675. .ui.huge.buttons .dropdown .menu > .item,
  676. .ui.huge.buttons .button,
  677. .ui.huge.buttons .or,
  678. .ui.ui.ui.ui.huge.button {
  679. font-size: 1.42857143rem;
  680. }
  681. .ui.massive.buttons .dropdown,
  682. .ui.massive.buttons .dropdown .menu > .item,
  683. .ui.massive.buttons .button,
  684. .ui.massive.buttons .or,
  685. .ui.ui.ui.ui.massive.button {
  686. font-size: 1.71428571rem;
  687. }
  688. /*--------------
  689. Icon Only
  690. ---------------*/
  691. .ui.icon.buttons .button,
  692. .ui.icon.button {
  693. padding: 0.78571429em 0.78571429em 0.78571429em;
  694. }
  695. .ui.icon.buttons .button > .icon,
  696. .ui.icon.button > .icon {
  697. opacity: 0.9;
  698. margin: 0 !important;
  699. vertical-align: top;
  700. }
  701. /*-------------------
  702. Basic
  703. --------------------*/
  704. .ui.basic.buttons .button,
  705. .ui.basic.button {
  706. background: transparent none;
  707. color: rgba(0, 0, 0, 0.6);
  708. font-weight: normal;
  709. border-radius: 0.28571429rem;
  710. text-transform: none;
  711. text-shadow: none !important;
  712. -webkit-box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
  713. box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
  714. }
  715. .ui.basic.buttons {
  716. -webkit-box-shadow: none;
  717. box-shadow: none;
  718. border: 1px solid rgba(34, 36, 38, 0.15);
  719. border-radius: 0.28571429rem;
  720. }
  721. .ui.basic.buttons .button {
  722. border-radius: 0;
  723. }
  724. .ui.basic.buttons .button:hover,
  725. .ui.basic.button:hover {
  726. background: #FFFFFF;
  727. color: rgba(0, 0, 0, 0.8);
  728. -webkit-box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.35) inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  729. box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.35) inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  730. }
  731. .ui.basic.buttons .button:focus,
  732. .ui.basic.button:focus {
  733. background: #FFFFFF;
  734. color: rgba(0, 0, 0, 0.8);
  735. -webkit-box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.35) inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  736. box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.35) inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  737. }
  738. .ui.basic.buttons .button:active,
  739. .ui.basic.button:active {
  740. background: #F8F8F8;
  741. color: rgba(0, 0, 0, 0.9);
  742. -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 4px 0 rgba(34, 36, 38, 0.15) inset;
  743. box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 4px 0 rgba(34, 36, 38, 0.15) inset;
  744. }
  745. .ui.basic.buttons .active.button,
  746. .ui.basic.active.button {
  747. background: rgba(0, 0, 0, 0.05);
  748. -webkit-box-shadow: '';
  749. box-shadow: '';
  750. color: rgba(0, 0, 0, 0.95);
  751. }
  752. .ui.basic.buttons .active.button:hover,
  753. .ui.basic.active.button:hover {
  754. background-color: rgba(0, 0, 0, 0.05);
  755. }
  756. /* Vertical */
  757. .ui.basic.buttons .button:hover {
  758. -webkit-box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.35) inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset inset;
  759. box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.35) inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset inset;
  760. }
  761. .ui.basic.buttons .button:active {
  762. -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 4px 0 rgba(34, 36, 38, 0.15) inset inset;
  763. box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 4px 0 rgba(34, 36, 38, 0.15) inset inset;
  764. }
  765. .ui.basic.buttons .active.button {
  766. -webkit-box-shadow: '';
  767. box-shadow: '';
  768. }
  769. /* Standard Basic Inverted */
  770. .ui.basic.inverted.buttons .button,
  771. .ui.basic.inverted.button {
  772. background-color: transparent;
  773. color: #F9FAFB;
  774. -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
  775. box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
  776. }
  777. .ui.basic.inverted.buttons .button:hover,
  778. .ui.basic.inverted.button:hover {
  779. color: #FFFFFF;
  780. -webkit-box-shadow: 0 0 0 2px #ffffff inset;
  781. box-shadow: 0 0 0 2px #ffffff inset;
  782. }
  783. .ui.basic.inverted.buttons .button:focus,
  784. .ui.basic.inverted.button:focus {
  785. color: #FFFFFF;
  786. -webkit-box-shadow: 0 0 0 2px #ffffff inset;
  787. box-shadow: 0 0 0 2px #ffffff inset;
  788. }
  789. .ui.basic.inverted.buttons .button:active,
  790. .ui.basic.inverted.button:active {
  791. background-color: rgba(255, 255, 255, 0.08);
  792. color: #FFFFFF;
  793. -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9) inset;
  794. box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9) inset;
  795. }
  796. .ui.basic.inverted.buttons .active.button,
  797. .ui.basic.inverted.active.button {
  798. background-color: rgba(255, 255, 255, 0.08);
  799. color: #FFFFFF;
  800. text-shadow: none;
  801. -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7) inset;
  802. box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7) inset;
  803. }
  804. .ui.basic.inverted.buttons .active.button:hover,
  805. .ui.basic.inverted.active.button:hover {
  806. background-color: rgba(255, 255, 255, 0.15);
  807. -webkit-box-shadow: 0 0 0 2px #ffffff inset;
  808. box-shadow: 0 0 0 2px #ffffff inset;
  809. }
  810. /* Basic Group */
  811. .ui.basic.buttons .button {
  812. border-left: 1px solid rgba(34, 36, 38, 0.15);
  813. -webkit-box-shadow: none;
  814. box-shadow: none;
  815. }
  816. .ui.basic.vertical.buttons .button {
  817. border-left: none;
  818. border-left-width: 0;
  819. border-top: 1px solid rgba(34, 36, 38, 0.15);
  820. }
  821. .ui.basic.vertical.buttons .button:first-child {
  822. border-top-width: 0;
  823. }
  824. /*-------------------
  825. Tertiary
  826. --------------------*/
  827. /* Overline Mixin */
  828. .ui.tertiary.button {
  829. -webkit-transition: color 0.1s ease !important;
  830. transition: color 0.1s ease !important;
  831. border-radius: 0;
  832. margin: 0.28571429em 0.25em 0.28571429em 0 !important;
  833. padding: 0.5em !important;
  834. -webkit-box-shadow: none;
  835. box-shadow: none;
  836. color: rgba(0, 0, 0, 0.6);
  837. background: none;
  838. }
  839. .ui.tertiary.button:hover {
  840. -webkit-box-shadow: inset 0 -0.2em 0 #666666;
  841. box-shadow: inset 0 -0.2em 0 #666666;
  842. color: #333333;
  843. background: none;
  844. }
  845. .ui.tertiary.button:focus {
  846. -webkit-box-shadow: inset 0 -0.2em 0 #666666;
  847. box-shadow: inset 0 -0.2em 0 #666666;
  848. color: #333333;
  849. background: none;
  850. }
  851. .ui.tertiary.button:active {
  852. -webkit-box-shadow: inset 0 -0.2em 0 #999999;
  853. box-shadow: inset 0 -0.2em 0 #999999;
  854. border-radius: 0.28571429rem 0.28571429rem 0 0;
  855. color: #666666;
  856. background: none;
  857. }
  858. /*--------------
  859. Labeled Icon
  860. ---------------*/
  861. .ui.labeled.icon.buttons .button,
  862. .ui.labeled.icon.button {
  863. position: relative;
  864. padding-left: 4.07142857em !important;
  865. padding-right: 1.5em !important;
  866. }
  867. /* Left Labeled */
  868. .ui.labeled.icon.buttons > .button > .icon,
  869. .ui.labeled.icon.button > .icon {
  870. position: absolute;
  871. top: 0;
  872. left: 0;
  873. height: 100%;
  874. line-height: 1;
  875. border-radius: 0;
  876. border-top-left-radius: inherit;
  877. border-bottom-left-radius: inherit;
  878. text-align: center;
  879. -webkit-animation: none;
  880. animation: none;
  881. padding: 0.78571429em 0 0.78571429em 0;
  882. margin: 0;
  883. width: 2.57142857em;
  884. background-color: rgba(0, 0, 0, 0.05);
  885. color: '';
  886. -webkit-box-shadow: -1px 0 0 0 transparent inset;
  887. box-shadow: -1px 0 0 0 transparent inset;
  888. }
  889. /* Right Labeled */
  890. .ui[class*="right labeled"].icon.button {
  891. padding-right: 4.07142857em !important;
  892. padding-left: 1.5em !important;
  893. }
  894. .ui[class*="right labeled"].icon.button > .icon {
  895. left: auto;
  896. right: 0;
  897. border-radius: 0;
  898. border-top-right-radius: inherit;
  899. border-bottom-right-radius: inherit;
  900. -webkit-box-shadow: 1px 0 0 0 transparent inset;
  901. box-shadow: 1px 0 0 0 transparent inset;
  902. }
  903. .ui.labeled.icon.buttons > .button > .icon:before,
  904. .ui.labeled.icon.button > .icon:before,
  905. .ui.labeled.icon.buttons > .button > .icon:after,
  906. .ui.labeled.icon.button > .icon:after {
  907. display: block;
  908. position: relative;
  909. width: 100%;
  910. top: 0;
  911. text-align: center;
  912. }
  913. .ui.labeled.icon.buttons .button > .icon {
  914. border-radius: 0;
  915. }
  916. .ui.labeled.icon.buttons .button:first-child > .icon {
  917. border-top-left-radius: 0.28571429rem;
  918. border-bottom-left-radius: 0.28571429rem;
  919. }
  920. .ui.labeled.icon.buttons .button:last-child > .icon {
  921. border-top-right-radius: 0.28571429rem;
  922. border-bottom-right-radius: 0.28571429rem;
  923. }
  924. .ui.vertical.labeled.icon.buttons .button:first-child > .icon {
  925. border-radius: 0;
  926. border-top-left-radius: 0.28571429rem;
  927. }
  928. .ui.vertical.labeled.icon.buttons .button:last-child > .icon {
  929. border-radius: 0;
  930. border-bottom-left-radius: 0.28571429rem;
  931. }
  932. /* Loading Icon in Labeled Button */
  933. .ui.labeled.icon.button > .loading.icon:before {
  934. -webkit-animation: loader 2s linear infinite;
  935. animation: loader 2s linear infinite;
  936. }
  937. /*--------------
  938. Toggle
  939. ---------------*/
  940. /* Toggle (Modifies active state to give affordances) */
  941. .ui.toggle.buttons .active.button,
  942. .ui.buttons .button.toggle.active,
  943. .ui.button.toggle.active {
  944. background-color: #21BA45;
  945. -webkit-box-shadow: none;
  946. box-shadow: none;
  947. text-shadow: none;
  948. color: #FFFFFF;
  949. }
  950. .ui.button.toggle.active:hover {
  951. background-color: #16ab39;
  952. text-shadow: none;
  953. color: #FFFFFF;
  954. }
  955. /*--------------
  956. Circular
  957. ---------------*/
  958. .ui.circular.button {
  959. border-radius: 10em;
  960. }
  961. .ui.circular.button > .icon {
  962. width: 1em;
  963. vertical-align: baseline;
  964. }
  965. /*-------------------
  966. Or Buttons
  967. --------------------*/
  968. .ui.buttons .or {
  969. position: relative;
  970. width: 0.3em;
  971. height: 2.57142857em;
  972. z-index: 3;
  973. }
  974. .ui.buttons .or:before {
  975. position: absolute;
  976. text-align: center;
  977. border-radius: 500rem;
  978. content: 'or';
  979. top: 50%;
  980. left: 50%;
  981. background-color: #FFFFFF;
  982. text-shadow: none;
  983. margin-top: -0.89285714em;
  984. margin-left: -0.89285714em;
  985. width: 1.78571429em;
  986. height: 1.78571429em;
  987. line-height: 1.78571429em;
  988. color: rgba(0, 0, 0, 0.4);
  989. font-style: normal;
  990. font-weight: bold;
  991. -webkit-box-shadow: 0 0 0 1px transparent inset;
  992. box-shadow: 0 0 0 1px transparent inset;
  993. }
  994. .ui.buttons .or[data-text]:before {
  995. content: attr(data-text);
  996. }
  997. /* Fluid Or */
  998. .ui.fluid.buttons .or {
  999. width: 0 !important;
  1000. }
  1001. .ui.fluid.buttons .or:after {
  1002. display: none;
  1003. }
  1004. /*-------------------
  1005. Attached
  1006. --------------------*/
  1007. /* Singular */
  1008. .ui.attached.button {
  1009. position: relative;
  1010. display: block;
  1011. margin: 0;
  1012. border-radius: 0;
  1013. -webkit-box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15);
  1014. box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15);
  1015. }
  1016. /* Top / Bottom */
  1017. .ui.attached.top.button {
  1018. border-radius: 0.28571429rem 0.28571429rem 0 0;
  1019. }
  1020. .ui.attached.bottom.button {
  1021. border-radius: 0 0 0.28571429rem 0.28571429rem;
  1022. }
  1023. /* Left / Right */
  1024. .ui.left.attached.button {
  1025. display: inline-block;
  1026. border-left: none;
  1027. text-align: right;
  1028. padding-right: 0.75em;
  1029. border-radius: 0.28571429rem 0 0 0.28571429rem;
  1030. }
  1031. .ui.right.attached.button {
  1032. display: inline-block;
  1033. text-align: left;
  1034. padding-left: 0.75em;
  1035. border-radius: 0 0.28571429rem 0.28571429rem 0;
  1036. }
  1037. /* Plural */
  1038. .ui.attached.buttons {
  1039. position: relative;
  1040. display: -webkit-box;
  1041. display: -ms-flexbox;
  1042. display: flex;
  1043. border-radius: 0;
  1044. width: auto !important;
  1045. z-index: auto;
  1046. margin-left: -1px;
  1047. margin-right: -1px;
  1048. }
  1049. .ui.attached.buttons .button {
  1050. margin: 0;
  1051. }
  1052. .ui.attached.buttons .button:first-child {
  1053. border-radius: 0;
  1054. }
  1055. .ui.attached.buttons .button:last-child {
  1056. border-radius: 0;
  1057. }
  1058. /* Top / Bottom */
  1059. .ui[class*="top attached"].buttons {
  1060. margin-bottom: -1px;
  1061. border-radius: 0.28571429rem 0.28571429rem 0 0;
  1062. }
  1063. .ui[class*="top attached"].buttons .button:first-child {
  1064. border-radius: 0.28571429rem 0 0 0;
  1065. }
  1066. .ui[class*="top attached"].buttons .button:last-child {
  1067. border-radius: 0 0.28571429rem 0 0;
  1068. }
  1069. .ui[class*="bottom attached"].buttons {
  1070. margin-top: -1px;
  1071. border-radius: 0 0 0.28571429rem 0.28571429rem;
  1072. }
  1073. .ui[class*="bottom attached"].buttons .button:first-child {
  1074. border-radius: 0 0 0 0.28571429rem;
  1075. }
  1076. .ui[class*="bottom attached"].buttons .button:last-child {
  1077. border-radius: 0 0 0.28571429rem 0;
  1078. }
  1079. /* Left / Right */
  1080. .ui[class*="left attached"].buttons {
  1081. display: -webkit-inline-box;
  1082. display: -ms-inline-flexbox;
  1083. display: inline-flex;
  1084. margin-right: 0;
  1085. margin-left: -1px;
  1086. border-radius: 0 0.28571429rem 0.28571429rem 0;
  1087. }
  1088. .ui[class*="left attached"].buttons .button:first-child {
  1089. margin-left: -1px;
  1090. border-radius: 0 0.28571429rem 0 0;
  1091. }
  1092. .ui[class*="left attached"].buttons .button:last-child {
  1093. margin-left: -1px;
  1094. border-radius: 0 0 0.28571429rem 0;
  1095. }
  1096. .ui[class*="right attached"].buttons {
  1097. display: -webkit-inline-box;
  1098. display: -ms-inline-flexbox;
  1099. display: inline-flex;
  1100. margin-left: 0;
  1101. margin-right: -1px;
  1102. border-radius: 0.28571429rem 0 0 0.28571429rem;
  1103. }
  1104. .ui[class*="right attached"].buttons .button:first-child {
  1105. margin-left: -1px;
  1106. border-radius: 0.28571429rem 0 0 0;
  1107. }
  1108. .ui[class*="right attached"].buttons .button:last-child {
  1109. margin-left: -1px;
  1110. border-radius: 0 0 0 0.28571429rem;
  1111. }
  1112. /*-------------------
  1113. Fluid
  1114. --------------------*/
  1115. .ui.fluid.buttons,
  1116. .ui.fluid.button {
  1117. width: 100%;
  1118. }
  1119. .ui.fluid.button {
  1120. display: block;
  1121. }
  1122. .ui.two.buttons {
  1123. width: 100%;
  1124. }
  1125. .ui.two.buttons > .button {
  1126. width: 50%;
  1127. }
  1128. .ui.three.buttons {
  1129. width: 100%;
  1130. }
  1131. .ui.three.buttons > .button {
  1132. width: 33.333%;
  1133. }
  1134. .ui.four.buttons {
  1135. width: 100%;
  1136. }
  1137. .ui.four.buttons > .button {
  1138. width: 25%;
  1139. }
  1140. .ui.five.buttons {
  1141. width: 100%;
  1142. }
  1143. .ui.five.buttons > .button {
  1144. width: 20%;
  1145. }
  1146. .ui.six.buttons {
  1147. width: 100%;
  1148. }
  1149. .ui.six.buttons > .button {
  1150. width: 16.666%;
  1151. }
  1152. .ui.seven.buttons {
  1153. width: 100%;
  1154. }
  1155. .ui.seven.buttons > .button {
  1156. width: 14.285%;
  1157. }
  1158. .ui.eight.buttons {
  1159. width: 100%;
  1160. }
  1161. .ui.eight.buttons > .button {
  1162. width: 12.5%;
  1163. }
  1164. .ui.nine.buttons {
  1165. width: 100%;
  1166. }
  1167. .ui.nine.buttons > .button {
  1168. width: 11.11%;
  1169. }
  1170. .ui.ten.buttons {
  1171. width: 100%;
  1172. }
  1173. .ui.ten.buttons > .button {
  1174. width: 10%;
  1175. }
  1176. .ui.eleven.buttons {
  1177. width: 100%;
  1178. }
  1179. .ui.eleven.buttons > .button {
  1180. width: 9.09%;
  1181. }
  1182. .ui.twelve.buttons {
  1183. width: 100%;
  1184. }
  1185. .ui.twelve.buttons > .button {
  1186. width: 8.3333%;
  1187. }
  1188. /* Fluid Vertical Buttons */
  1189. .ui.fluid.vertical.buttons,
  1190. .ui.fluid.vertical.buttons > .button {
  1191. display: -webkit-box;
  1192. display: -ms-flexbox;
  1193. display: flex;
  1194. width: auto;
  1195. -webkit-box-pack: center;
  1196. -ms-flex-pack: center;
  1197. justify-content: center;
  1198. }
  1199. .ui.two.vertical.buttons > .button {
  1200. height: 50%;
  1201. }
  1202. .ui.three.vertical.buttons > .button {
  1203. height: 33.333%;
  1204. }
  1205. .ui.four.vertical.buttons > .button {
  1206. height: 25%;
  1207. }
  1208. .ui.five.vertical.buttons > .button {
  1209. height: 20%;
  1210. }
  1211. .ui.six.vertical.buttons > .button {
  1212. height: 16.666%;
  1213. }
  1214. .ui.seven.vertical.buttons > .button {
  1215. height: 14.285%;
  1216. }
  1217. .ui.eight.vertical.buttons > .button {
  1218. height: 12.5%;
  1219. }
  1220. .ui.nine.vertical.buttons > .button {
  1221. height: 11.11%;
  1222. }
  1223. .ui.ten.vertical.buttons > .button {
  1224. height: 10%;
  1225. }
  1226. .ui.eleven.vertical.buttons > .button {
  1227. height: 9.09%;
  1228. }
  1229. .ui.twelve.vertical.buttons > .button {
  1230. height: 8.3333%;
  1231. }
  1232. /*-------------------
  1233. Colors
  1234. --------------------*/
  1235. .ui.primary.buttons .button,
  1236. .ui.primary.button {
  1237. background-color: #2185D0;
  1238. color: #FFFFFF;
  1239. text-shadow: none;
  1240. background-image: none;
  1241. }
  1242. .ui.primary.button {
  1243. -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  1244. box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  1245. }
  1246. .ui.primary.buttons .button:hover,
  1247. .ui.primary.button:hover {
  1248. background-color: #1678c2;
  1249. color: #FFFFFF;
  1250. text-shadow: none;
  1251. }
  1252. .ui.primary.buttons .button:focus,
  1253. .ui.primary.button:focus {
  1254. background-color: #0d71bb;
  1255. color: #FFFFFF;
  1256. text-shadow: none;
  1257. }
  1258. .ui.primary.buttons .button:active,
  1259. .ui.primary.button:active {
  1260. background-color: #1a69a4;
  1261. color: #FFFFFF;
  1262. text-shadow: none;
  1263. }
  1264. .ui.primary.buttons .active.button,
  1265. .ui.primary.buttons .active.button:active,
  1266. .ui.primary.active.button,
  1267. .ui.primary.button .active.button:active {
  1268. background-color: #1279c6;
  1269. color: #FFFFFF;
  1270. text-shadow: none;
  1271. }
  1272. /* Basic */
  1273. .ui.basic.primary.buttons .button,
  1274. .ui.basic.primary.button {
  1275. background: transparent;
  1276. -webkit-box-shadow: 0 0 0 1px #2185D0 inset;
  1277. box-shadow: 0 0 0 1px #2185D0 inset;
  1278. color: #2185D0;
  1279. }
  1280. .ui.basic.primary.buttons .button:hover,
  1281. .ui.basic.primary.button:hover {
  1282. background: transparent ;
  1283. -webkit-box-shadow: 0 0 0 1px #1678c2 inset;
  1284. box-shadow: 0 0 0 1px #1678c2 inset;
  1285. color: #1678c2;
  1286. }
  1287. .ui.basic.primary.buttons .button:focus,
  1288. .ui.basic.primary.button:focus {
  1289. background: transparent ;
  1290. -webkit-box-shadow: 0 0 0 1px #0d71bb inset;
  1291. box-shadow: 0 0 0 1px #0d71bb inset;
  1292. color: #1678c2;
  1293. }
  1294. .ui.basic.primary.buttons .active.button,
  1295. .ui.basic.primary.active.button {
  1296. background: transparent ;
  1297. -webkit-box-shadow: 0 0 0 1px #1279c6 inset;
  1298. box-shadow: 0 0 0 1px #1279c6 inset;
  1299. color: #1a69a4;
  1300. }
  1301. .ui.basic.primary.buttons .button:active,
  1302. .ui.basic.primary.button:active {
  1303. -webkit-box-shadow: 0 0 0 1px #1a69a4 inset;
  1304. box-shadow: 0 0 0 1px #1a69a4 inset;
  1305. color: #1a69a4;
  1306. }
  1307. .ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) {
  1308. margin-left: -1px;
  1309. }
  1310. /* Inverted */
  1311. .ui.inverted.primary.buttons .button,
  1312. .ui.inverted.primary.button {
  1313. background-color: transparent;
  1314. -webkit-box-shadow: 0 0 0 2px #54C8FF inset;
  1315. box-shadow: 0 0 0 2px #54C8FF inset;
  1316. color: #54C8FF;
  1317. }
  1318. .ui.inverted.primary.buttons .button:hover,
  1319. .ui.inverted.primary.button:hover,
  1320. .ui.inverted.primary.buttons .button:focus,
  1321. .ui.inverted.primary.button:focus,
  1322. .ui.inverted.primary.buttons .button.active,
  1323. .ui.inverted.primary.button.active,
  1324. .ui.inverted.primary.buttons .button:active,
  1325. .ui.inverted.primary.button:active {
  1326. -webkit-box-shadow: none ;
  1327. box-shadow: none ;
  1328. color: #FFFFFF;
  1329. }
  1330. .ui.inverted.primary.buttons .button:hover,
  1331. .ui.inverted.primary.button:hover {
  1332. background-color: #21b8ff;
  1333. }
  1334. .ui.inverted.primary.buttons .button:focus,
  1335. .ui.inverted.primary.button:focus {
  1336. background-color: #2bbbff;
  1337. }
  1338. .ui.inverted.primary.buttons .active.button,
  1339. .ui.inverted.primary.active.button {
  1340. background-color: #3ac0ff;
  1341. }
  1342. .ui.inverted.primary.buttons .button:active,
  1343. .ui.inverted.primary.button:active {
  1344. background-color: #21b8ff;
  1345. }
  1346. /* Inverted Basic */
  1347. .ui.inverted.primary.basic.buttons .button,
  1348. .ui.inverted.primary.buttons .basic.button,
  1349. .ui.inverted.primary.basic.button {
  1350. background-color: transparent;
  1351. -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
  1352. box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
  1353. color: #FFFFFF;
  1354. }
  1355. .ui.inverted.primary.basic.buttons .button:hover,
  1356. .ui.inverted.primary.buttons .basic.button:hover,
  1357. .ui.inverted.primary.basic.button:hover {
  1358. -webkit-box-shadow: 0 0 0 2px #21b8ff inset;
  1359. box-shadow: 0 0 0 2px #21b8ff inset;
  1360. color: #54C8FF;
  1361. }
  1362. .ui.inverted.primary.basic.buttons .button:focus,
  1363. .ui.inverted.primary.basic.buttons .button:focus,
  1364. .ui.inverted.primary.basic.button:focus {
  1365. -webkit-box-shadow: 0 0 0 2px #2bbbff inset;
  1366. box-shadow: 0 0 0 2px #2bbbff inset;
  1367. color: #54C8FF;
  1368. }
  1369. .ui.inverted.primary.basic.buttons .active.button,
  1370. .ui.inverted.primary.buttons .basic.active.button,
  1371. .ui.inverted.primary.basic.active.button {
  1372. -webkit-box-shadow: 0 0 0 2px #3ac0ff inset;
  1373. box-shadow: 0 0 0 2px #3ac0ff inset;
  1374. color: #54C8FF;
  1375. }
  1376. .ui.inverted.primary.basic.buttons .button:active,
  1377. .ui.inverted.primary.buttons .basic.button:active,
  1378. .ui.inverted.primary.basic.button:active {
  1379. -webkit-box-shadow: 0 0 0 2px #21b8ff inset;
  1380. box-shadow: 0 0 0 2px #21b8ff inset;
  1381. color: #54C8FF;
  1382. }
  1383. /* Tertiary */
  1384. .ui.tertiary.primary.buttons .button,
  1385. .ui.tertiary.primary.buttons .tertiary.button,
  1386. .ui.tertiary.primary.button {
  1387. background: transparent;
  1388. -webkit-box-shadow: none;
  1389. box-shadow: none;
  1390. color: #2185D0;
  1391. }
  1392. .ui.tertiary.primary.buttons .button:hover,
  1393. .ui.tertiary.primary.buttons button:hover,
  1394. .ui.tertiary.primary.button:hover {
  1395. -webkit-box-shadow: inset 0 -0.2em 0 #2b75ac;
  1396. box-shadow: inset 0 -0.2em 0 #2b75ac;
  1397. color: #2b75ac;
  1398. }
  1399. .ui.tertiary.primary.buttons .button:focus,
  1400. .ui.tertiary.primary.buttons .tertiary.button:focus,
  1401. .ui.tertiary.primary.button:focus {
  1402. -webkit-box-shadow: inset 0 -0.2em 0 #216ea7;
  1403. box-shadow: inset 0 -0.2em 0 #216ea7;
  1404. color: #216ea7;
  1405. }
  1406. .ui.tertiary.primary.buttons .active.button,
  1407. .ui.tertiary.primary.buttons .tertiary.active.button,
  1408. .ui.tertiary.primary.active.button,
  1409. .ui.tertiary.primary.buttons .button:active,
  1410. .ui.tertiary.primary.buttons .tertiary.button:active,
  1411. .ui.tertiary.primary.button:active {
  1412. -webkit-box-shadow: inset 0 -0.2em 0 #007bd8;
  1413. box-shadow: inset 0 -0.2em 0 #007bd8;
  1414. color: #1279c6;
  1415. }
  1416. .ui.secondary.buttons .button,
  1417. .ui.secondary.button {
  1418. background-color: #1B1C1D;
  1419. color: #FFFFFF;
  1420. text-shadow: none;
  1421. background-image: none;
  1422. }
  1423. .ui.secondary.button {
  1424. -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  1425. box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  1426. }
  1427. .ui.secondary.buttons .button:hover,
  1428. .ui.secondary.button:hover {
  1429. background-color: #27292a;
  1430. color: #FFFFFF;
  1431. text-shadow: none;
  1432. }
  1433. .ui.secondary.buttons .button:focus,
  1434. .ui.secondary.button:focus {
  1435. background-color: #2e3032;
  1436. color: #FFFFFF;
  1437. text-shadow: none;
  1438. }
  1439. .ui.secondary.buttons .button:active,
  1440. .ui.secondary.button:active {
  1441. background-color: #343637;
  1442. color: #FFFFFF;
  1443. text-shadow: none;
  1444. }
  1445. .ui.secondary.buttons .active.button,
  1446. .ui.secondary.buttons .active.button:active,
  1447. .ui.secondary.active.button,
  1448. .ui.secondary.button .active.button:active {
  1449. background-color: #27292a;
  1450. color: #FFFFFF;
  1451. text-shadow: none;
  1452. }
  1453. /* Basic */
  1454. .ui.basic.secondary.buttons .button,
  1455. .ui.basic.secondary.button {
  1456. background: transparent;
  1457. -webkit-box-shadow: 0 0 0 1px #1B1C1D inset;
  1458. box-shadow: 0 0 0 1px #1B1C1D inset;
  1459. color: #1B1C1D;
  1460. }
  1461. .ui.basic.secondary.buttons .button:hover,
  1462. .ui.basic.secondary.button:hover {
  1463. background: transparent ;
  1464. -webkit-box-shadow: 0 0 0 1px #27292a inset;
  1465. box-shadow: 0 0 0 1px #27292a inset;
  1466. color: #27292a;
  1467. }
  1468. .ui.basic.secondary.buttons .button:focus,
  1469. .ui.basic.secondary.button:focus {
  1470. background: transparent ;
  1471. -webkit-box-shadow: 0 0 0 1px #2e3032 inset;
  1472. box-shadow: 0 0 0 1px #2e3032 inset;
  1473. color: #27292a;
  1474. }
  1475. .ui.basic.secondary.buttons .active.button,
  1476. .ui.basic.secondary.active.button {
  1477. background: transparent ;
  1478. -webkit-box-shadow: 0 0 0 1px #27292a inset;
  1479. box-shadow: 0 0 0 1px #27292a inset;
  1480. color: #343637;
  1481. }
  1482. .ui.basic.secondary.buttons .button:active,
  1483. .ui.basic.secondary.button:active {
  1484. -webkit-box-shadow: 0 0 0 1px #343637 inset;
  1485. box-shadow: 0 0 0 1px #343637 inset;
  1486. color: #343637;
  1487. }
  1488. .ui.buttons:not(.vertical) > .basic.secondary.button:not(:first-child) {
  1489. margin-left: -1px;
  1490. }
  1491. /* Inverted */
  1492. .ui.inverted.secondary.buttons .button,
  1493. .ui.inverted.secondary.button {
  1494. background-color: transparent;
  1495. -webkit-box-shadow: 0 0 0 2px #545454 inset;
  1496. box-shadow: 0 0 0 2px #545454 inset;
  1497. color: #545454;
  1498. }
  1499. .ui.inverted.secondary.buttons .button:hover,
  1500. .ui.inverted.secondary.button:hover,
  1501. .ui.inverted.secondary.buttons .button:focus,
  1502. .ui.inverted.secondary.button:focus,
  1503. .ui.inverted.secondary.buttons .button.active,
  1504. .ui.inverted.secondary.button.active,
  1505. .ui.inverted.secondary.buttons .button:active,
  1506. .ui.inverted.secondary.button:active {
  1507. -webkit-box-shadow: none ;
  1508. box-shadow: none ;
  1509. color: #FFFFFF;
  1510. }
  1511. .ui.inverted.secondary.buttons .button:hover,
  1512. .ui.inverted.secondary.button:hover {
  1513. background-color: #6e6e6e;
  1514. }
  1515. .ui.inverted.secondary.buttons .button:focus,
  1516. .ui.inverted.secondary.button:focus {
  1517. background-color: #686868;
  1518. }
  1519. .ui.inverted.secondary.buttons .active.button,
  1520. .ui.inverted.secondary.active.button {
  1521. background-color: #616161;
  1522. }
  1523. .ui.inverted.secondary.buttons .button:active,
  1524. .ui.inverted.secondary.button:active {
  1525. background-color: #6e6e6e;
  1526. }
  1527. /* Inverted Basic */
  1528. .ui.inverted.secondary.basic.buttons .button,
  1529. .ui.inverted.secondary.buttons .basic.button,
  1530. .ui.inverted.secondary.basic.button {
  1531. background-color: transparent;
  1532. -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
  1533. box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
  1534. color: #FFFFFF;
  1535. }
  1536. .ui.inverted.secondary.basic.buttons .button:hover,
  1537. .ui.inverted.secondary.buttons .basic.button:hover,
  1538. .ui.inverted.secondary.basic.button:hover {
  1539. -webkit-box-shadow: 0 0 0 2px #6e6e6e inset;
  1540. box-shadow: 0 0 0 2px #6e6e6e inset;
  1541. color: #545454;
  1542. }
  1543. .ui.inverted.secondary.basic.buttons .button:focus,
  1544. .ui.inverted.secondary.basic.buttons .button:focus,
  1545. .ui.inverted.secondary.basic.button:focus {
  1546. -webkit-box-shadow: 0 0 0 2px #686868 inset;
  1547. box-shadow: 0 0 0 2px #686868 inset;
  1548. color: #545454;
  1549. }
  1550. .ui.inverted.secondary.basic.buttons .active.button,
  1551. .ui.inverted.secondary.buttons .basic.active.button,
  1552. .ui.inverted.secondary.basic.active.button {
  1553. -webkit-box-shadow: 0 0 0 2px #616161 inset;
  1554. box-shadow: 0 0 0 2px #616161 inset;
  1555. color: #545454;
  1556. }
  1557. .ui.inverted.secondary.basic.buttons .button:active,
  1558. .ui.inverted.secondary.buttons .basic.button:active,
  1559. .ui.inverted.secondary.basic.button:active {
  1560. -webkit-box-shadow: 0 0 0 2px #6e6e6e inset;
  1561. box-shadow: 0 0 0 2px #6e6e6e inset;
  1562. color: #545454;
  1563. }
  1564. /* Tertiary */
  1565. .ui.tertiary.secondary.buttons .button,
  1566. .ui.tertiary.secondary.buttons .tertiary.button,
  1567. .ui.tertiary.secondary.button {
  1568. background: transparent;
  1569. -webkit-box-shadow: none;
  1570. box-shadow: none;
  1571. color: #1B1C1D;
  1572. }
  1573. .ui.tertiary.secondary.buttons .button:hover,
  1574. .ui.tertiary.secondary.buttons button:hover,
  1575. .ui.tertiary.secondary.button:hover {
  1576. -webkit-box-shadow: inset 0 -0.2em 0 #292929;
  1577. box-shadow: inset 0 -0.2em 0 #292929;
  1578. color: #292929;
  1579. }
  1580. .ui.tertiary.secondary.buttons .button:focus,
  1581. .ui.tertiary.secondary.buttons .tertiary.button:focus,
  1582. .ui.tertiary.secondary.button:focus {
  1583. -webkit-box-shadow: inset 0 -0.2em 0 #303030;
  1584. box-shadow: inset 0 -0.2em 0 #303030;
  1585. color: #303030;
  1586. }
  1587. .ui.tertiary.secondary.buttons .active.button,
  1588. .ui.tertiary.secondary.buttons .tertiary.active.button,
  1589. .ui.tertiary.secondary.active.button,
  1590. .ui.tertiary.secondary.buttons .button:active,
  1591. .ui.tertiary.secondary.buttons .tertiary.button:active,
  1592. .ui.tertiary.secondary.button:active {
  1593. -webkit-box-shadow: inset 0 -0.2em 0 #1f2933;
  1594. box-shadow: inset 0 -0.2em 0 #1f2933;
  1595. color: #27292a;
  1596. }
  1597. .ui.red.buttons .button,
  1598. .ui.red.button {
  1599. background-color: #DB2828;
  1600. color: #FFFFFF;
  1601. text-shadow: none;
  1602. background-image: none;
  1603. }
  1604. .ui.red.button {
  1605. -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  1606. box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  1607. }
  1608. .ui.red.buttons .button:hover,
  1609. .ui.red.button:hover {
  1610. background-color: #d01919;
  1611. color: #FFFFFF;
  1612. text-shadow: none;
  1613. }
  1614. .ui.red.buttons .button:focus,
  1615. .ui.red.button:focus {
  1616. background-color: #ca1010;
  1617. color: #FFFFFF;
  1618. text-shadow: none;
  1619. }
  1620. .ui.red.buttons .button:active,
  1621. .ui.red.button:active {
  1622. background-color: #b21e1e;
  1623. color: #FFFFFF;
  1624. text-shadow: none;
  1625. }
  1626. .ui.red.buttons .active.button,
  1627. .ui.red.buttons .active.button:active,
  1628. .ui.red.active.button,
  1629. .ui.red.button .active.button:active {
  1630. background-color: #d41515;
  1631. color: #FFFFFF;
  1632. text-shadow: none;
  1633. }
  1634. /* Basic */
  1635. .ui.basic.red.buttons .button,
  1636. .ui.basic.red.button {
  1637. background: transparent;
  1638. -webkit-box-shadow: 0 0 0 1px #DB2828 inset;
  1639. box-shadow: 0 0 0 1px #DB2828 inset;
  1640. color: #DB2828;
  1641. }
  1642. .ui.basic.red.buttons .button:hover,
  1643. .ui.basic.red.button:hover {
  1644. background: transparent ;
  1645. -webkit-box-shadow: 0 0 0 1px #d01919 inset;
  1646. box-shadow: 0 0 0 1px #d01919 inset;
  1647. color: #d01919;
  1648. }
  1649. .ui.basic.red.buttons .button:focus,
  1650. .ui.basic.red.button:focus {
  1651. background: transparent ;
  1652. -webkit-box-shadow: 0 0 0 1px #ca1010 inset;
  1653. box-shadow: 0 0 0 1px #ca1010 inset;
  1654. color: #d01919;
  1655. }
  1656. .ui.basic.red.buttons .active.button,
  1657. .ui.basic.red.active.button {
  1658. background: transparent ;
  1659. -webkit-box-shadow: 0 0 0 1px #d41515 inset;
  1660. box-shadow: 0 0 0 1px #d41515 inset;
  1661. color: #b21e1e;
  1662. }
  1663. .ui.basic.red.buttons .button:active,
  1664. .ui.basic.red.button:active {
  1665. -webkit-box-shadow: 0 0 0 1px #b21e1e inset;
  1666. box-shadow: 0 0 0 1px #b21e1e inset;
  1667. color: #b21e1e;
  1668. }
  1669. .ui.buttons:not(.vertical) > .basic.red.button:not(:first-child) {
  1670. margin-left: -1px;
  1671. }
  1672. /* Inverted */
  1673. .ui.inverted.red.buttons .button,
  1674. .ui.inverted.red.button {
  1675. background-color: transparent;
  1676. -webkit-box-shadow: 0 0 0 2px #FF695E inset;
  1677. box-shadow: 0 0 0 2px #FF695E inset;
  1678. color: #FF695E;
  1679. }
  1680. .ui.inverted.red.buttons .button:hover,
  1681. .ui.inverted.red.button:hover,
  1682. .ui.inverted.red.buttons .button:focus,
  1683. .ui.inverted.red.button:focus,
  1684. .ui.inverted.red.buttons .button.active,
  1685. .ui.inverted.red.button.active,
  1686. .ui.inverted.red.buttons .button:active,
  1687. .ui.inverted.red.button:active {
  1688. -webkit-box-shadow: none ;
  1689. box-shadow: none ;
  1690. color: #FFFFFF;
  1691. }
  1692. .ui.inverted.red.buttons .button:hover,
  1693. .ui.inverted.red.button:hover {
  1694. background-color: #ff392b;
  1695. }
  1696. .ui.inverted.red.buttons .button:focus,
  1697. .ui.inverted.red.button:focus {
  1698. background-color: #ff4335;
  1699. }
  1700. .ui.inverted.red.buttons .active.button,
  1701. .ui.inverted.red.active.button {
  1702. background-color: #ff5144;
  1703. }
  1704. .ui.inverted.red.buttons .button:active,
  1705. .ui.inverted.red.button:active {
  1706. background-color: #ff392b;
  1707. }
  1708. /* Inverted Basic */
  1709. .ui.inverted.red.basic.buttons .button,
  1710. .ui.inverted.red.buttons .basic.button,
  1711. .ui.inverted.red.basic.button {
  1712. background-color: transparent;
  1713. -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
  1714. box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
  1715. color: #FFFFFF;
  1716. }
  1717. .ui.inverted.red.basic.buttons .button:hover,
  1718. .ui.inverted.red.buttons .basic.button:hover,
  1719. .ui.inverted.red.basic.button:hover {
  1720. -webkit-box-shadow: 0 0 0 2px #ff392b inset;
  1721. box-shadow: 0 0 0 2px #ff392b inset;
  1722. color: #FF695E;
  1723. }
  1724. .ui.inverted.red.basic.buttons .button:focus,
  1725. .ui.inverted.red.basic.buttons .button:focus,
  1726. .ui.inverted.red.basic.button:focus {
  1727. -webkit-box-shadow: 0 0 0 2px #ff4335 inset;
  1728. box-shadow: 0 0 0 2px #ff4335 inset;
  1729. color: #FF695E;
  1730. }
  1731. .ui.inverted.red.basic.buttons .active.button,
  1732. .ui.inverted.red.buttons .basic.active.button,
  1733. .ui.inverted.red.basic.active.button {
  1734. -webkit-box-shadow: 0 0 0 2px #ff5144 inset;
  1735. box-shadow: 0 0 0 2px #ff5144 inset;
  1736. color: #FF695E;
  1737. }
  1738. .ui.inverted.red.basic.buttons .button:active,
  1739. .ui.inverted.red.buttons .basic.button:active,
  1740. .ui.inverted.red.basic.button:active {
  1741. -webkit-box-shadow: 0 0 0 2px #ff392b inset;
  1742. box-shadow: 0 0 0 2px #ff392b inset;
  1743. color: #FF695E;
  1744. }
  1745. /* Tertiary */
  1746. .ui.tertiary.red.buttons .button,
  1747. .ui.tertiary.red.buttons .tertiary.button,
  1748. .ui.tertiary.red.button {
  1749. background: transparent;
  1750. -webkit-box-shadow: none;
  1751. box-shadow: none;
  1752. color: #DB2828;
  1753. }
  1754. .ui.tertiary.red.buttons .button:hover,
  1755. .ui.tertiary.red.buttons button:hover,
  1756. .ui.tertiary.red.button:hover {
  1757. -webkit-box-shadow: inset 0 -0.2em 0 #b93131;
  1758. box-shadow: inset 0 -0.2em 0 #b93131;
  1759. color: #b93131;
  1760. }
  1761. .ui.tertiary.red.buttons .button:focus,
  1762. .ui.tertiary.red.buttons .tertiary.button:focus,
  1763. .ui.tertiary.red.button:focus {
  1764. -webkit-box-shadow: inset 0 -0.2em 0 #b52626;
  1765. box-shadow: inset 0 -0.2em 0 #b52626;
  1766. color: #b52626;
  1767. }
  1768. .ui.tertiary.red.buttons .active.button,
  1769. .ui.tertiary.red.buttons .tertiary.active.button,
  1770. .ui.tertiary.red.active.button,
  1771. .ui.tertiary.red.buttons .button:active,
  1772. .ui.tertiary.red.buttons .tertiary.button:active,
  1773. .ui.tertiary.red.button:active {
  1774. -webkit-box-shadow: inset 0 -0.2em 0 #ea0000;
  1775. box-shadow: inset 0 -0.2em 0 #ea0000;
  1776. color: #d41515;
  1777. }
  1778. .ui.orange.buttons .button,
  1779. .ui.orange.button {
  1780. background-color: #F2711C;
  1781. color: #FFFFFF;
  1782. text-shadow: none;
  1783. background-image: none;
  1784. }
  1785. .ui.orange.button {
  1786. -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  1787. box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  1788. }
  1789. .ui.orange.buttons .button:hover,
  1790. .ui.orange.button:hover {
  1791. background-color: #f26202;
  1792. color: #FFFFFF;
  1793. text-shadow: none;
  1794. }
  1795. .ui.orange.buttons .button:focus,
  1796. .ui.orange.button:focus {
  1797. background-color: #e55b00;
  1798. color: #FFFFFF;
  1799. text-shadow: none;
  1800. }
  1801. .ui.orange.buttons .button:active,
  1802. .ui.orange.button:active {
  1803. background-color: #cf590c;
  1804. color: #FFFFFF;
  1805. text-shadow: none;
  1806. }
  1807. .ui.orange.buttons .active.button,
  1808. .ui.orange.buttons .active.button:active,
  1809. .ui.orange.active.button,
  1810. .ui.orange.button .active.button:active {
  1811. background-color: #f56100;
  1812. color: #FFFFFF;
  1813. text-shadow: none;
  1814. }
  1815. /* Basic */
  1816. .ui.basic.orange.buttons .button,
  1817. .ui.basic.orange.button {
  1818. background: transparent;
  1819. -webkit-box-shadow: 0 0 0 1px #F2711C inset;
  1820. box-shadow: 0 0 0 1px #F2711C inset;
  1821. color: #F2711C;
  1822. }
  1823. .ui.basic.orange.buttons .button:hover,
  1824. .ui.basic.orange.button:hover {
  1825. background: transparent ;
  1826. -webkit-box-shadow: 0 0 0 1px #f26202 inset;
  1827. box-shadow: 0 0 0 1px #f26202 inset;
  1828. color: #f26202;
  1829. }
  1830. .ui.basic.orange.buttons .button:focus,
  1831. .ui.basic.orange.button:focus {
  1832. background: transparent ;
  1833. -webkit-box-shadow: 0 0 0 1px #e55b00 inset;
  1834. box-shadow: 0 0 0 1px #e55b00 inset;
  1835. color: #f26202;
  1836. }
  1837. .ui.basic.orange.buttons .active.button,
  1838. .ui.basic.orange.active.button {
  1839. background: transparent ;
  1840. -webkit-box-shadow: 0 0 0 1px #f56100 inset;
  1841. box-shadow: 0 0 0 1px #f56100 inset;
  1842. color: #cf590c;
  1843. }
  1844. .ui.basic.orange.buttons .button:active,
  1845. .ui.basic.orange.button:active {
  1846. -webkit-box-shadow: 0 0 0 1px #cf590c inset;
  1847. box-shadow: 0 0 0 1px #cf590c inset;
  1848. color: #cf590c;
  1849. }
  1850. .ui.buttons:not(.vertical) > .basic.orange.button:not(:first-child) {
  1851. margin-left: -1px;
  1852. }
  1853. /* Inverted */
  1854. .ui.inverted.orange.buttons .button,
  1855. .ui.inverted.orange.button {
  1856. background-color: transparent;
  1857. -webkit-box-shadow: 0 0 0 2px #FF851B inset;
  1858. box-shadow: 0 0 0 2px #FF851B inset;
  1859. color: #FF851B;
  1860. }
  1861. .ui.inverted.orange.buttons .button:hover,
  1862. .ui.inverted.orange.button:hover,
  1863. .ui.inverted.orange.buttons .button:focus,
  1864. .ui.inverted.orange.button:focus,
  1865. .ui.inverted.orange.buttons .button.active,
  1866. .ui.inverted.orange.button.active,
  1867. .ui.inverted.orange.buttons .button:active,
  1868. .ui.inverted.orange.button:active {
  1869. -webkit-box-shadow: none ;
  1870. box-shadow: none ;
  1871. color: #FFFFFF;
  1872. }
  1873. .ui.inverted.orange.buttons .button:hover,
  1874. .ui.inverted.orange.button:hover {
  1875. background-color: #e76b00;
  1876. }
  1877. .ui.inverted.orange.buttons .button:focus,
  1878. .ui.inverted.orange.button:focus {
  1879. background-color: #f17000;
  1880. }
  1881. .ui.inverted.orange.buttons .active.button,
  1882. .ui.inverted.orange.active.button {
  1883. background-color: #ff7701;
  1884. }
  1885. .ui.inverted.orange.buttons .button:active,
  1886. .ui.inverted.orange.button:active {
  1887. background-color: #e76b00;
  1888. }
  1889. /* Inverted Basic */
  1890. .ui.inverted.orange.basic.buttons .button,
  1891. .ui.inverted.orange.buttons .basic.button,
  1892. .ui.inverted.orange.basic.button {
  1893. background-color: transparent;
  1894. -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
  1895. box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
  1896. color: #FFFFFF;
  1897. }
  1898. .ui.inverted.orange.basic.buttons .button:hover,
  1899. .ui.inverted.orange.buttons .basic.button:hover,
  1900. .ui.inverted.orange.basic.button:hover {
  1901. -webkit-box-shadow: 0 0 0 2px #e76b00 inset;
  1902. box-shadow: 0 0 0 2px #e76b00 inset;
  1903. color: #FF851B;
  1904. }
  1905. .ui.inverted.orange.basic.buttons .button:focus,
  1906. .ui.inverted.orange.basic.buttons .button:focus,
  1907. .ui.inverted.orange.basic.button:focus {
  1908. -webkit-box-shadow: 0 0 0 2px #f17000 inset;
  1909. box-shadow: 0 0 0 2px #f17000 inset;
  1910. color: #FF851B;
  1911. }
  1912. .ui.inverted.orange.basic.buttons .active.button,
  1913. .ui.inverted.orange.buttons .basic.active.button,
  1914. .ui.inverted.orange.basic.active.button {
  1915. -webkit-box-shadow: 0 0 0 2px #ff7701 inset;
  1916. box-shadow: 0 0 0 2px #ff7701 inset;
  1917. color: #FF851B;
  1918. }
  1919. .ui.inverted.orange.basic.buttons .button:active,
  1920. .ui.inverted.orange.buttons .basic.button:active,
  1921. .ui.inverted.orange.basic.button:active {
  1922. -webkit-box-shadow: 0 0 0 2px #e76b00 inset;
  1923. box-shadow: 0 0 0 2px #e76b00 inset;
  1924. color: #FF851B;
  1925. }
  1926. /* Tertiary */
  1927. .ui.tertiary.orange.buttons .button,
  1928. .ui.tertiary.orange.buttons .tertiary.button,
  1929. .ui.tertiary.orange.button {
  1930. background: transparent;
  1931. -webkit-box-shadow: none;
  1932. box-shadow: none;
  1933. color: #F2711C;
  1934. }
  1935. .ui.tertiary.orange.buttons .button:hover,
  1936. .ui.tertiary.orange.buttons button:hover,
  1937. .ui.tertiary.orange.button:hover {
  1938. -webkit-box-shadow: inset 0 -0.2em 0 #da671b;
  1939. box-shadow: inset 0 -0.2em 0 #da671b;
  1940. color: #da671b;
  1941. }
  1942. .ui.tertiary.orange.buttons .button:focus,
  1943. .ui.tertiary.orange.buttons .tertiary.button:focus,
  1944. .ui.tertiary.orange.button:focus {
  1945. -webkit-box-shadow: inset 0 -0.2em 0 #ce6017;
  1946. box-shadow: inset 0 -0.2em 0 #ce6017;
  1947. color: #ce6017;
  1948. }
  1949. .ui.tertiary.orange.buttons .active.button,
  1950. .ui.tertiary.orange.buttons .tertiary.active.button,
  1951. .ui.tertiary.orange.active.button,
  1952. .ui.tertiary.orange.buttons .button:active,
  1953. .ui.tertiary.orange.buttons .tertiary.button:active,
  1954. .ui.tertiary.orange.button:active {
  1955. -webkit-box-shadow: inset 0 -0.2em 0 #f56100;
  1956. box-shadow: inset 0 -0.2em 0 #f56100;
  1957. color: #f56100;
  1958. }
  1959. .ui.yellow.buttons .button,
  1960. .ui.yellow.button {
  1961. background-color: #FBBD08;
  1962. color: #FFFFFF;
  1963. text-shadow: none;
  1964. background-image: none;
  1965. }
  1966. .ui.yellow.button {
  1967. -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  1968. box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  1969. }
  1970. .ui.yellow.buttons .button:hover,
  1971. .ui.yellow.button:hover {
  1972. background-color: #eaae00;
  1973. color: #FFFFFF;
  1974. text-shadow: none;
  1975. }
  1976. .ui.yellow.buttons .button:focus,
  1977. .ui.yellow.button:focus {
  1978. background-color: #daa300;
  1979. color: #FFFFFF;
  1980. text-shadow: none;
  1981. }
  1982. .ui.yellow.buttons .button:active,
  1983. .ui.yellow.button:active {
  1984. background-color: #cd9903;
  1985. color: #FFFFFF;
  1986. text-shadow: none;
  1987. }
  1988. .ui.yellow.buttons .active.button,
  1989. .ui.yellow.buttons .active.button:active,
  1990. .ui.yellow.active.button,
  1991. .ui.yellow.button .active.button:active {
  1992. background-color: #eaae00;
  1993. color: #FFFFFF;
  1994. text-shadow: none;
  1995. }
  1996. /* Basic */
  1997. .ui.basic.yellow.buttons .button,
  1998. .ui.basic.yellow.button {
  1999. background: transparent;
  2000. -webkit-box-shadow: 0 0 0 1px #FBBD08 inset;
  2001. box-shadow: 0 0 0 1px #FBBD08 inset;
  2002. color: #FBBD08;
  2003. }
  2004. .ui.basic.yellow.buttons .button:hover,
  2005. .ui.basic.yellow.button:hover {
  2006. background: transparent ;
  2007. -webkit-box-shadow: 0 0 0 1px #eaae00 inset;
  2008. box-shadow: 0 0 0 1px #eaae00 inset;
  2009. color: #eaae00;
  2010. }
  2011. .ui.basic.yellow.buttons .button:focus,
  2012. .ui.basic.yellow.button:focus {
  2013. background: transparent ;
  2014. -webkit-box-shadow: 0 0 0 1px #daa300 inset;
  2015. box-shadow: 0 0 0 1px #daa300 inset;
  2016. color: #eaae00;
  2017. }
  2018. .ui.basic.yellow.buttons .active.button,
  2019. .ui.basic.yellow.active.button {
  2020. background: transparent ;
  2021. -webkit-box-shadow: 0 0 0 1px #eaae00 inset;
  2022. box-shadow: 0 0 0 1px #eaae00 inset;
  2023. color: #cd9903;
  2024. }
  2025. .ui.basic.yellow.buttons .button:active,
  2026. .ui.basic.yellow.button:active {
  2027. -webkit-box-shadow: 0 0 0 1px #cd9903 inset;
  2028. box-shadow: 0 0 0 1px #cd9903 inset;
  2029. color: #cd9903;
  2030. }
  2031. .ui.buttons:not(.vertical) > .basic.yellow.button:not(:first-child) {
  2032. margin-left: -1px;
  2033. }
  2034. /* Inverted */
  2035. .ui.inverted.yellow.buttons .button,
  2036. .ui.inverted.yellow.button {
  2037. background-color: transparent;
  2038. -webkit-box-shadow: 0 0 0 2px #FFE21F inset;
  2039. box-shadow: 0 0 0 2px #FFE21F inset;
  2040. color: #FFE21F;
  2041. }
  2042. .ui.inverted.yellow.buttons .button:hover,
  2043. .ui.inverted.yellow.button:hover,
  2044. .ui.inverted.yellow.buttons .button:focus,
  2045. .ui.inverted.yellow.button:focus,
  2046. .ui.inverted.yellow.buttons .button.active,
  2047. .ui.inverted.yellow.button.active,
  2048. .ui.inverted.yellow.buttons .button:active,
  2049. .ui.inverted.yellow.button:active {
  2050. -webkit-box-shadow: none ;
  2051. box-shadow: none ;
  2052. color: rgba(0, 0, 0, 0.6);
  2053. }
  2054. .ui.inverted.yellow.buttons .button:hover,
  2055. .ui.inverted.yellow.button:hover {
  2056. background-color: #ebcd00;
  2057. }
  2058. .ui.inverted.yellow.buttons .button:focus,
  2059. .ui.inverted.yellow.button:focus {
  2060. background-color: #f5d500;
  2061. }
  2062. .ui.inverted.yellow.buttons .active.button,
  2063. .ui.inverted.yellow.active.button {
  2064. background-color: #ffdf05;
  2065. }
  2066. .ui.inverted.yellow.buttons .button:active,
  2067. .ui.inverted.yellow.button:active {
  2068. background-color: #ebcd00;
  2069. }
  2070. /* Inverted Basic */
  2071. .ui.inverted.yellow.basic.buttons .button,
  2072. .ui.inverted.yellow.buttons .basic.button,
  2073. .ui.inverted.yellow.basic.button {
  2074. background-color: transparent;
  2075. -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
  2076. box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
  2077. color: #FFFFFF;
  2078. }
  2079. .ui.inverted.yellow.basic.buttons .button:hover,
  2080. .ui.inverted.yellow.buttons .basic.button:hover,
  2081. .ui.inverted.yellow.basic.button:hover {
  2082. -webkit-box-shadow: 0 0 0 2px #ebcd00 inset;
  2083. box-shadow: 0 0 0 2px #ebcd00 inset;
  2084. color: #FFE21F;
  2085. }
  2086. .ui.inverted.yellow.basic.buttons .button:focus,
  2087. .ui.inverted.yellow.basic.buttons .button:focus,
  2088. .ui.inverted.yellow.basic.button:focus {
  2089. -webkit-box-shadow: 0 0 0 2px #f5d500 inset;
  2090. box-shadow: 0 0 0 2px #f5d500 inset;
  2091. color: #FFE21F;
  2092. }
  2093. .ui.inverted.yellow.basic.buttons .active.button,
  2094. .ui.inverted.yellow.buttons .basic.active.button,
  2095. .ui.inverted.yellow.basic.active.button {
  2096. -webkit-box-shadow: 0 0 0 2px #ffdf05 inset;
  2097. box-shadow: 0 0 0 2px #ffdf05 inset;
  2098. color: #FFE21F;
  2099. }
  2100. .ui.inverted.yellow.basic.buttons .button:active,
  2101. .ui.inverted.yellow.buttons .basic.button:active,
  2102. .ui.inverted.yellow.basic.button:active {
  2103. -webkit-box-shadow: 0 0 0 2px #ebcd00 inset;
  2104. box-shadow: 0 0 0 2px #ebcd00 inset;
  2105. color: #FFE21F;
  2106. }
  2107. /* Tertiary */
  2108. .ui.tertiary.yellow.buttons .button,
  2109. .ui.tertiary.yellow.buttons .tertiary.button,
  2110. .ui.tertiary.yellow.button {
  2111. background: transparent;
  2112. -webkit-box-shadow: none;
  2113. box-shadow: none;
  2114. color: #FBBD08;
  2115. }
  2116. .ui.tertiary.yellow.buttons .button:hover,
  2117. .ui.tertiary.yellow.buttons button:hover,
  2118. .ui.tertiary.yellow.button:hover {
  2119. -webkit-box-shadow: inset 0 -0.2em 0 #d2a217;
  2120. box-shadow: inset 0 -0.2em 0 #d2a217;
  2121. color: #d2a217;
  2122. }
  2123. .ui.tertiary.yellow.buttons .button:focus,
  2124. .ui.tertiary.yellow.buttons .tertiary.button:focus,
  2125. .ui.tertiary.yellow.button:focus {
  2126. -webkit-box-shadow: inset 0 -0.2em 0 #c49816;
  2127. box-shadow: inset 0 -0.2em 0 #c49816;
  2128. color: #c49816;
  2129. }
  2130. .ui.tertiary.yellow.buttons .active.button,
  2131. .ui.tertiary.yellow.buttons .tertiary.active.button,
  2132. .ui.tertiary.yellow.active.button,
  2133. .ui.tertiary.yellow.buttons .button:active,
  2134. .ui.tertiary.yellow.buttons .tertiary.button:active,
  2135. .ui.tertiary.yellow.button:active {
  2136. -webkit-box-shadow: inset 0 -0.2em 0 #eaae00;
  2137. box-shadow: inset 0 -0.2em 0 #eaae00;
  2138. color: #eaae00;
  2139. }
  2140. .ui.olive.buttons .button,
  2141. .ui.olive.button {
  2142. background-color: #B5CC18;
  2143. color: #FFFFFF;
  2144. text-shadow: none;
  2145. background-image: none;
  2146. }
  2147. .ui.olive.button {
  2148. -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  2149. box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  2150. }
  2151. .ui.olive.buttons .button:hover,
  2152. .ui.olive.button:hover {
  2153. background-color: #a7bd0d;
  2154. color: #FFFFFF;
  2155. text-shadow: none;
  2156. }
  2157. .ui.olive.buttons .button:focus,
  2158. .ui.olive.button:focus {
  2159. background-color: #a0b605;
  2160. color: #FFFFFF;
  2161. text-shadow: none;
  2162. }
  2163. .ui.olive.buttons .button:active,
  2164. .ui.olive.button:active {
  2165. background-color: #8d9e13;
  2166. color: #FFFFFF;
  2167. text-shadow: none;
  2168. }
  2169. .ui.olive.buttons .active.button,
  2170. .ui.olive.buttons .active.button:active,
  2171. .ui.olive.active.button,
  2172. .ui.olive.button .active.button:active {
  2173. background-color: #aac109;
  2174. color: #FFFFFF;
  2175. text-shadow: none;
  2176. }
  2177. /* Basic */
  2178. .ui.basic.olive.buttons .button,
  2179. .ui.basic.olive.button {
  2180. background: transparent;
  2181. -webkit-box-shadow: 0 0 0 1px #B5CC18 inset;
  2182. box-shadow: 0 0 0 1px #B5CC18 inset;
  2183. color: #B5CC18;
  2184. }
  2185. .ui.basic.olive.buttons .button:hover,
  2186. .ui.basic.olive.button:hover {
  2187. background: transparent ;
  2188. -webkit-box-shadow: 0 0 0 1px #a7bd0d inset;
  2189. box-shadow: 0 0 0 1px #a7bd0d inset;
  2190. color: #a7bd0d;
  2191. }
  2192. .ui.basic.olive.buttons .button:focus,
  2193. .ui.basic.olive.button:focus {
  2194. background: transparent ;
  2195. -webkit-box-shadow: 0 0 0 1px #a0b605 inset;
  2196. box-shadow: 0 0 0 1px #a0b605 inset;
  2197. color: #a7bd0d;
  2198. }
  2199. .ui.basic.olive.buttons .active.button,
  2200. .ui.basic.olive.active.button {
  2201. background: transparent ;
  2202. -webkit-box-shadow: 0 0 0 1px #aac109 inset;
  2203. box-shadow: 0 0 0 1px #aac109 inset;
  2204. color: #8d9e13;
  2205. }
  2206. .ui.basic.olive.buttons .button:active,
  2207. .ui.basic.olive.button:active {
  2208. -webkit-box-shadow: 0 0 0 1px #8d9e13 inset;
  2209. box-shadow: 0 0 0 1px #8d9e13 inset;
  2210. color: #8d9e13;
  2211. }
  2212. .ui.buttons:not(.vertical) > .basic.olive.button:not(:first-child) {
  2213. margin-left: -1px;
  2214. }
  2215. /* Inverted */
  2216. .ui.inverted.olive.buttons .button,
  2217. .ui.inverted.olive.button {
  2218. background-color: transparent;
  2219. -webkit-box-shadow: 0 0 0 2px #D9E778 inset;
  2220. box-shadow: 0 0 0 2px #D9E778 inset;
  2221. color: #D9E778;
  2222. }
  2223. .ui.inverted.olive.buttons .button:hover,
  2224. .ui.inverted.olive.button:hover,
  2225. .ui.inverted.olive.buttons .button:focus,
  2226. .ui.inverted.olive.button:focus,
  2227. .ui.inverted.olive.buttons .button.active,
  2228. .ui.inverted.olive.button.active,
  2229. .ui.inverted.olive.buttons .button:active,
  2230. .ui.inverted.olive.button:active {
  2231. -webkit-box-shadow: none ;
  2232. box-shadow: none ;
  2233. color: rgba(0, 0, 0, 0.6);
  2234. }
  2235. .ui.inverted.olive.buttons .button:hover,
  2236. .ui.inverted.olive.button:hover {
  2237. background-color: #d2e745;
  2238. }
  2239. .ui.inverted.olive.buttons .button:focus,
  2240. .ui.inverted.olive.button:focus {
  2241. background-color: #daef47;
  2242. }
  2243. .ui.inverted.olive.buttons .active.button,
  2244. .ui.inverted.olive.active.button {
  2245. background-color: #daed59;
  2246. }
  2247. .ui.inverted.olive.buttons .button:active,
  2248. .ui.inverted.olive.button:active {
  2249. background-color: #cddf4d;
  2250. }
  2251. /* Inverted Basic */
  2252. .ui.inverted.olive.basic.buttons .button,
  2253. .ui.inverted.olive.buttons .basic.button,
  2254. .ui.inverted.olive.basic.button {
  2255. background-color: transparent;
  2256. -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
  2257. box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
  2258. color: #FFFFFF;
  2259. }
  2260. .ui.inverted.olive.basic.buttons .button:hover,
  2261. .ui.inverted.olive.buttons .basic.button:hover,
  2262. .ui.inverted.olive.basic.button:hover {
  2263. -webkit-box-shadow: 0 0 0 2px #d2e745 inset;
  2264. box-shadow: 0 0 0 2px #d2e745 inset;
  2265. color: #D9E778;
  2266. }
  2267. .ui.inverted.olive.basic.buttons .button:focus,
  2268. .ui.inverted.olive.basic.buttons .button:focus,
  2269. .ui.inverted.olive.basic.button:focus {
  2270. -webkit-box-shadow: 0 0 0 2px #daef47 inset;
  2271. box-shadow: 0 0 0 2px #daef47 inset;
  2272. color: #D9E778;
  2273. }
  2274. .ui.inverted.olive.basic.buttons .active.button,
  2275. .ui.inverted.olive.buttons .basic.active.button,
  2276. .ui.inverted.olive.basic.active.button {
  2277. -webkit-box-shadow: 0 0 0 2px #daed59 inset;
  2278. box-shadow: 0 0 0 2px #daed59 inset;
  2279. color: #D9E778;
  2280. }
  2281. .ui.inverted.olive.basic.buttons .button:active,
  2282. .ui.inverted.olive.buttons .basic.button:active,
  2283. .ui.inverted.olive.basic.button:active {
  2284. -webkit-box-shadow: 0 0 0 2px #cddf4d inset;
  2285. box-shadow: 0 0 0 2px #cddf4d inset;
  2286. color: #D9E778;
  2287. }
  2288. /* Tertiary */
  2289. .ui.tertiary.olive.buttons .button,
  2290. .ui.tertiary.olive.buttons .tertiary.button,
  2291. .ui.tertiary.olive.button {
  2292. background: transparent;
  2293. -webkit-box-shadow: none;
  2294. box-shadow: none;
  2295. color: #B5CC18;
  2296. }
  2297. .ui.tertiary.olive.buttons .button:hover,
  2298. .ui.tertiary.olive.buttons button:hover,
  2299. .ui.tertiary.olive.button:hover {
  2300. -webkit-box-shadow: inset 0 -0.2em 0 #98a922;
  2301. box-shadow: inset 0 -0.2em 0 #98a922;
  2302. color: #98a922;
  2303. }
  2304. .ui.tertiary.olive.buttons .button:focus,
  2305. .ui.tertiary.olive.buttons .tertiary.button:focus,
  2306. .ui.tertiary.olive.button:focus {
  2307. -webkit-box-shadow: inset 0 -0.2em 0 #92a418;
  2308. box-shadow: inset 0 -0.2em 0 #92a418;
  2309. color: #92a418;
  2310. }
  2311. .ui.tertiary.olive.buttons .active.button,
  2312. .ui.tertiary.olive.buttons .tertiary.active.button,
  2313. .ui.tertiary.olive.active.button,
  2314. .ui.tertiary.olive.buttons .button:active,
  2315. .ui.tertiary.olive.buttons .tertiary.button:active,
  2316. .ui.tertiary.olive.button:active {
  2317. -webkit-box-shadow: inset 0 -0.2em 0 #b1cb00;
  2318. box-shadow: inset 0 -0.2em 0 #b1cb00;
  2319. color: #aac109;
  2320. }
  2321. .ui.green.buttons .button,
  2322. .ui.green.button {
  2323. background-color: #21BA45;
  2324. color: #FFFFFF;
  2325. text-shadow: none;
  2326. background-image: none;
  2327. }
  2328. .ui.green.button {
  2329. -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  2330. box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  2331. }
  2332. .ui.green.buttons .button:hover,
  2333. .ui.green.button:hover {
  2334. background-color: #16ab39;
  2335. color: #FFFFFF;
  2336. text-shadow: none;
  2337. }
  2338. .ui.green.buttons .button:focus,
  2339. .ui.green.button:focus {
  2340. background-color: #0ea432;
  2341. color: #FFFFFF;
  2342. text-shadow: none;
  2343. }
  2344. .ui.green.buttons .button:active,
  2345. .ui.green.button:active {
  2346. background-color: #198f35;
  2347. color: #FFFFFF;
  2348. text-shadow: none;
  2349. }
  2350. .ui.green.buttons .active.button,
  2351. .ui.green.buttons .active.button:active,
  2352. .ui.green.active.button,
  2353. .ui.green.button .active.button:active {
  2354. background-color: #13ae38;
  2355. color: #FFFFFF;
  2356. text-shadow: none;
  2357. }
  2358. /* Basic */
  2359. .ui.basic.green.buttons .button,
  2360. .ui.basic.green.button {
  2361. background: transparent;
  2362. -webkit-box-shadow: 0 0 0 1px #21BA45 inset;
  2363. box-shadow: 0 0 0 1px #21BA45 inset;
  2364. color: #21BA45;
  2365. }
  2366. .ui.basic.green.buttons .button:hover,
  2367. .ui.basic.green.button:hover {
  2368. background: transparent ;
  2369. -webkit-box-shadow: 0 0 0 1px #16ab39 inset;
  2370. box-shadow: 0 0 0 1px #16ab39 inset;
  2371. color: #16ab39;
  2372. }
  2373. .ui.basic.green.buttons .button:focus,
  2374. .ui.basic.green.button:focus {
  2375. background: transparent ;
  2376. -webkit-box-shadow: 0 0 0 1px #0ea432 inset;
  2377. box-shadow: 0 0 0 1px #0ea432 inset;
  2378. color: #16ab39;
  2379. }
  2380. .ui.basic.green.buttons .active.button,
  2381. .ui.basic.green.active.button {
  2382. background: transparent ;
  2383. -webkit-box-shadow: 0 0 0 1px #13ae38 inset;
  2384. box-shadow: 0 0 0 1px #13ae38 inset;
  2385. color: #198f35;
  2386. }
  2387. .ui.basic.green.buttons .button:active,
  2388. .ui.basic.green.button:active {
  2389. -webkit-box-shadow: 0 0 0 1px #198f35 inset;
  2390. box-shadow: 0 0 0 1px #198f35 inset;
  2391. color: #198f35;
  2392. }
  2393. .ui.buttons:not(.vertical) > .basic.green.button:not(:first-child) {
  2394. margin-left: -1px;
  2395. }
  2396. /* Inverted */
  2397. .ui.inverted.green.buttons .button,
  2398. .ui.inverted.green.button {
  2399. background-color: transparent;
  2400. -webkit-box-shadow: 0 0 0 2px #2ECC40 inset;
  2401. box-shadow: 0 0 0 2px #2ECC40 inset;
  2402. color: #2ECC40;
  2403. }
  2404. .ui.inverted.green.buttons .button:hover,
  2405. .ui.inverted.green.button:hover,
  2406. .ui.inverted.green.buttons .button:focus,
  2407. .ui.inverted.green.button:focus,
  2408. .ui.inverted.green.buttons .button.active,
  2409. .ui.inverted.green.button.active,
  2410. .ui.inverted.green.buttons .button:active,
  2411. .ui.inverted.green.button:active {
  2412. -webkit-box-shadow: none ;
  2413. box-shadow: none ;
  2414. color: #FFFFFF;
  2415. }
  2416. .ui.inverted.green.buttons .button:hover,
  2417. .ui.inverted.green.button:hover {
  2418. background-color: #1ea92e;
  2419. }
  2420. .ui.inverted.green.buttons .button:focus,
  2421. .ui.inverted.green.button:focus {
  2422. background-color: #19b82b;
  2423. }
  2424. .ui.inverted.green.buttons .active.button,
  2425. .ui.inverted.green.active.button {
  2426. background-color: #1fc231;
  2427. }
  2428. .ui.inverted.green.buttons .button:active,
  2429. .ui.inverted.green.button:active {
  2430. background-color: #25a233;
  2431. }
  2432. /* Inverted Basic */
  2433. .ui.inverted.green.basic.buttons .button,
  2434. .ui.inverted.green.buttons .basic.button,
  2435. .ui.inverted.green.basic.button {
  2436. background-color: transparent;
  2437. -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
  2438. box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
  2439. color: #FFFFFF;
  2440. }
  2441. .ui.inverted.green.basic.buttons .button:hover,
  2442. .ui.inverted.green.buttons .basic.button:hover,
  2443. .ui.inverted.green.basic.button:hover {
  2444. -webkit-box-shadow: 0 0 0 2px #1ea92e inset;
  2445. box-shadow: 0 0 0 2px #1ea92e inset;
  2446. color: #2ECC40;
  2447. }
  2448. .ui.inverted.green.basic.buttons .button:focus,
  2449. .ui.inverted.green.basic.buttons .button:focus,
  2450. .ui.inverted.green.basic.button:focus {
  2451. -webkit-box-shadow: 0 0 0 2px #19b82b inset;
  2452. box-shadow: 0 0 0 2px #19b82b inset;
  2453. color: #2ECC40;
  2454. }
  2455. .ui.inverted.green.basic.buttons .active.button,
  2456. .ui.inverted.green.buttons .basic.active.button,
  2457. .ui.inverted.green.basic.active.button {
  2458. -webkit-box-shadow: 0 0 0 2px #1fc231 inset;
  2459. box-shadow: 0 0 0 2px #1fc231 inset;
  2460. color: #2ECC40;
  2461. }
  2462. .ui.inverted.green.basic.buttons .button:active,
  2463. .ui.inverted.green.buttons .basic.button:active,
  2464. .ui.inverted.green.basic.button:active {
  2465. -webkit-box-shadow: 0 0 0 2px #25a233 inset;
  2466. box-shadow: 0 0 0 2px #25a233 inset;
  2467. color: #2ECC40;
  2468. }
  2469. /* Tertiary */
  2470. .ui.tertiary.green.buttons .button,
  2471. .ui.tertiary.green.buttons .tertiary.button,
  2472. .ui.tertiary.green.button {
  2473. background: transparent;
  2474. -webkit-box-shadow: none;
  2475. box-shadow: none;
  2476. color: #21BA45;
  2477. }
  2478. .ui.tertiary.green.buttons .button:hover,
  2479. .ui.tertiary.green.buttons button:hover,
  2480. .ui.tertiary.green.button:hover {
  2481. -webkit-box-shadow: inset 0 -0.2em 0 #2a9844;
  2482. box-shadow: inset 0 -0.2em 0 #2a9844;
  2483. color: #2a9844;
  2484. }
  2485. .ui.tertiary.green.buttons .button:focus,
  2486. .ui.tertiary.green.buttons .tertiary.button:focus,
  2487. .ui.tertiary.green.button:focus {
  2488. -webkit-box-shadow: inset 0 -0.2em 0 #20923b;
  2489. box-shadow: inset 0 -0.2em 0 #20923b;
  2490. color: #20923b;
  2491. }
  2492. .ui.tertiary.green.buttons .active.button,
  2493. .ui.tertiary.green.buttons .tertiary.active.button,
  2494. .ui.tertiary.green.active.button,
  2495. .ui.tertiary.green.buttons .button:active,
  2496. .ui.tertiary.green.buttons .tertiary.button:active,
  2497. .ui.tertiary.green.button:active {
  2498. -webkit-box-shadow: inset 0 -0.2em 0 #00c22e;
  2499. box-shadow: inset 0 -0.2em 0 #00c22e;
  2500. color: #13ae38;
  2501. }
  2502. .ui.teal.buttons .button,
  2503. .ui.teal.button {
  2504. background-color: #00B5AD;
  2505. color: #FFFFFF;
  2506. text-shadow: none;
  2507. background-image: none;
  2508. }
  2509. .ui.teal.button {
  2510. -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  2511. box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  2512. }
  2513. .ui.teal.buttons .button:hover,
  2514. .ui.teal.button:hover {
  2515. background-color: #009c95;
  2516. color: #FFFFFF;
  2517. text-shadow: none;
  2518. }
  2519. .ui.teal.buttons .button:focus,
  2520. .ui.teal.button:focus {
  2521. background-color: #008c86;
  2522. color: #FFFFFF;
  2523. text-shadow: none;
  2524. }
  2525. .ui.teal.buttons .button:active,
  2526. .ui.teal.button:active {
  2527. background-color: #00827c;
  2528. color: #FFFFFF;
  2529. text-shadow: none;
  2530. }
  2531. .ui.teal.buttons .active.button,
  2532. .ui.teal.buttons .active.button:active,
  2533. .ui.teal.active.button,
  2534. .ui.teal.button .active.button:active {
  2535. background-color: #009c95;
  2536. color: #FFFFFF;
  2537. text-shadow: none;
  2538. }
  2539. /* Basic */
  2540. .ui.basic.teal.buttons .button,
  2541. .ui.basic.teal.button {
  2542. background: transparent;
  2543. -webkit-box-shadow: 0 0 0 1px #00B5AD inset;
  2544. box-shadow: 0 0 0 1px #00B5AD inset;
  2545. color: #00B5AD;
  2546. }
  2547. .ui.basic.teal.buttons .button:hover,
  2548. .ui.basic.teal.button:hover {
  2549. background: transparent ;
  2550. -webkit-box-shadow: 0 0 0 1px #009c95 inset;
  2551. box-shadow: 0 0 0 1px #009c95 inset;
  2552. color: #009c95;
  2553. }
  2554. .ui.basic.teal.buttons .button:focus,
  2555. .ui.basic.teal.button:focus {
  2556. background: transparent ;
  2557. -webkit-box-shadow: 0 0 0 1px #008c86 inset;
  2558. box-shadow: 0 0 0 1px #008c86 inset;
  2559. color: #009c95;
  2560. }
  2561. .ui.basic.teal.buttons .active.button,
  2562. .ui.basic.teal.active.button {
  2563. background: transparent ;
  2564. -webkit-box-shadow: 0 0 0 1px #009c95 inset;
  2565. box-shadow: 0 0 0 1px #009c95 inset;
  2566. color: #00827c;
  2567. }
  2568. .ui.basic.teal.buttons .button:active,
  2569. .ui.basic.teal.button:active {
  2570. -webkit-box-shadow: 0 0 0 1px #00827c inset;
  2571. box-shadow: 0 0 0 1px #00827c inset;
  2572. color: #00827c;
  2573. }
  2574. .ui.buttons:not(.vertical) > .basic.teal.button:not(:first-child) {
  2575. margin-left: -1px;
  2576. }
  2577. /* Inverted */
  2578. .ui.inverted.teal.buttons .button,
  2579. .ui.inverted.teal.button {
  2580. background-color: transparent;
  2581. -webkit-box-shadow: 0 0 0 2px #6DFFFF inset;
  2582. box-shadow: 0 0 0 2px #6DFFFF inset;
  2583. color: #6DFFFF;
  2584. }
  2585. .ui.inverted.teal.buttons .button:hover,
  2586. .ui.inverted.teal.button:hover,
  2587. .ui.inverted.teal.buttons .button:focus,
  2588. .ui.inverted.teal.button:focus,
  2589. .ui.inverted.teal.buttons .button.active,
  2590. .ui.inverted.teal.button.active,
  2591. .ui.inverted.teal.buttons .button:active,
  2592. .ui.inverted.teal.button:active {
  2593. -webkit-box-shadow: none ;
  2594. box-shadow: none ;
  2595. color: rgba(0, 0, 0, 0.6);
  2596. }
  2597. .ui.inverted.teal.buttons .button:hover,
  2598. .ui.inverted.teal.button:hover {
  2599. background-color: #3affff;
  2600. }
  2601. .ui.inverted.teal.buttons .button:focus,
  2602. .ui.inverted.teal.button:focus {
  2603. background-color: #44ffff;
  2604. }
  2605. .ui.inverted.teal.buttons .active.button,
  2606. .ui.inverted.teal.active.button {
  2607. background-color: #54ffff;
  2608. }
  2609. .ui.inverted.teal.buttons .button:active,
  2610. .ui.inverted.teal.button:active {
  2611. background-color: #3affff;
  2612. }
  2613. /* Inverted Basic */
  2614. .ui.inverted.teal.basic.buttons .button,
  2615. .ui.inverted.teal.buttons .basic.button,
  2616. .ui.inverted.teal.basic.button {
  2617. background-color: transparent;
  2618. -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
  2619. box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
  2620. color: #FFFFFF;
  2621. }
  2622. .ui.inverted.teal.basic.buttons .button:hover,
  2623. .ui.inverted.teal.buttons .basic.button:hover,
  2624. .ui.inverted.teal.basic.button:hover {
  2625. -webkit-box-shadow: 0 0 0 2px #3affff inset;
  2626. box-shadow: 0 0 0 2px #3affff inset;
  2627. color: #6DFFFF;
  2628. }
  2629. .ui.inverted.teal.basic.buttons .button:focus,
  2630. .ui.inverted.teal.basic.buttons .button:focus,
  2631. .ui.inverted.teal.basic.button:focus {
  2632. -webkit-box-shadow: 0 0 0 2px #44ffff inset;
  2633. box-shadow: 0 0 0 2px #44ffff inset;
  2634. color: #6DFFFF;
  2635. }
  2636. .ui.inverted.teal.basic.buttons .active.button,
  2637. .ui.inverted.teal.buttons .basic.active.button,
  2638. .ui.inverted.teal.basic.active.button {
  2639. -webkit-box-shadow: 0 0 0 2px #54ffff inset;
  2640. box-shadow: 0 0 0 2px #54ffff inset;
  2641. color: #6DFFFF;
  2642. }
  2643. .ui.inverted.teal.basic.buttons .button:active,
  2644. .ui.inverted.teal.buttons .basic.button:active,
  2645. .ui.inverted.teal.basic.button:active {
  2646. -webkit-box-shadow: 0 0 0 2px #3affff inset;
  2647. box-shadow: 0 0 0 2px #3affff inset;
  2648. color: #6DFFFF;
  2649. }
  2650. /* Tertiary */
  2651. .ui.tertiary.teal.buttons .button,
  2652. .ui.tertiary.teal.buttons .tertiary.button,
  2653. .ui.tertiary.teal.button {
  2654. background: transparent;
  2655. -webkit-box-shadow: none;
  2656. box-shadow: none;
  2657. color: #00B5AD;
  2658. }
  2659. .ui.tertiary.teal.buttons .button:hover,
  2660. .ui.tertiary.teal.buttons button:hover,
  2661. .ui.tertiary.teal.button:hover {
  2662. -webkit-box-shadow: inset 0 -0.2em 0 #108c86;
  2663. box-shadow: inset 0 -0.2em 0 #108c86;
  2664. color: #108c86;
  2665. }
  2666. .ui.tertiary.teal.buttons .button:focus,
  2667. .ui.tertiary.teal.buttons .tertiary.button:focus,
  2668. .ui.tertiary.teal.button:focus {
  2669. -webkit-box-shadow: inset 0 -0.2em 0 #0e7e79;
  2670. box-shadow: inset 0 -0.2em 0 #0e7e79;
  2671. color: #0e7e79;
  2672. }
  2673. .ui.tertiary.teal.buttons .active.button,
  2674. .ui.tertiary.teal.buttons .tertiary.active.button,
  2675. .ui.tertiary.teal.active.button,
  2676. .ui.tertiary.teal.buttons .button:active,
  2677. .ui.tertiary.teal.buttons .tertiary.button:active,
  2678. .ui.tertiary.teal.button:active {
  2679. -webkit-box-shadow: inset 0 -0.2em 0 #009c95;
  2680. box-shadow: inset 0 -0.2em 0 #009c95;
  2681. color: #009c95;
  2682. }
  2683. .ui.blue.buttons .button,
  2684. .ui.blue.button {
  2685. background-color: #2185D0;
  2686. color: #FFFFFF;
  2687. text-shadow: none;
  2688. background-image: none;
  2689. }
  2690. .ui.blue.button {
  2691. -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  2692. box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  2693. }
  2694. .ui.blue.buttons .button:hover,
  2695. .ui.blue.button:hover {
  2696. background-color: #1678c2;
  2697. color: #FFFFFF;
  2698. text-shadow: none;
  2699. }
  2700. .ui.blue.buttons .button:focus,
  2701. .ui.blue.button:focus {
  2702. background-color: #0d71bb;
  2703. color: #FFFFFF;
  2704. text-shadow: none;
  2705. }
  2706. .ui.blue.buttons .button:active,
  2707. .ui.blue.button:active {
  2708. background-color: #1a69a4;
  2709. color: #FFFFFF;
  2710. text-shadow: none;
  2711. }
  2712. .ui.blue.buttons .active.button,
  2713. .ui.blue.buttons .active.button:active,
  2714. .ui.blue.active.button,
  2715. .ui.blue.button .active.button:active {
  2716. background-color: #1279c6;
  2717. color: #FFFFFF;
  2718. text-shadow: none;
  2719. }
  2720. /* Basic */
  2721. .ui.basic.blue.buttons .button,
  2722. .ui.basic.blue.button {
  2723. background: transparent;
  2724. -webkit-box-shadow: 0 0 0 1px #2185D0 inset;
  2725. box-shadow: 0 0 0 1px #2185D0 inset;
  2726. color: #2185D0;
  2727. }
  2728. .ui.basic.blue.buttons .button:hover,
  2729. .ui.basic.blue.button:hover {
  2730. background: transparent ;
  2731. -webkit-box-shadow: 0 0 0 1px #1678c2 inset;
  2732. box-shadow: 0 0 0 1px #1678c2 inset;
  2733. color: #1678c2;
  2734. }
  2735. .ui.basic.blue.buttons .button:focus,
  2736. .ui.basic.blue.button:focus {
  2737. background: transparent ;
  2738. -webkit-box-shadow: 0 0 0 1px #0d71bb inset;
  2739. box-shadow: 0 0 0 1px #0d71bb inset;
  2740. color: #1678c2;
  2741. }
  2742. .ui.basic.blue.buttons .active.button,
  2743. .ui.basic.blue.active.button {
  2744. background: transparent ;
  2745. -webkit-box-shadow: 0 0 0 1px #1279c6 inset;
  2746. box-shadow: 0 0 0 1px #1279c6 inset;
  2747. color: #1a69a4;
  2748. }
  2749. .ui.basic.blue.buttons .button:active,
  2750. .ui.basic.blue.button:active {
  2751. -webkit-box-shadow: 0 0 0 1px #1a69a4 inset;
  2752. box-shadow: 0 0 0 1px #1a69a4 inset;
  2753. color: #1a69a4;
  2754. }
  2755. .ui.buttons:not(.vertical) > .basic.blue.button:not(:first-child) {
  2756. margin-left: -1px;
  2757. }
  2758. /* Inverted */
  2759. .ui.inverted.blue.buttons .button,
  2760. .ui.inverted.blue.button {
  2761. background-color: transparent;
  2762. -webkit-box-shadow: 0 0 0 2px #54C8FF inset;
  2763. box-shadow: 0 0 0 2px #54C8FF inset;
  2764. color: #54C8FF;
  2765. }
  2766. .ui.inverted.blue.buttons .button:hover,
  2767. .ui.inverted.blue.button:hover,
  2768. .ui.inverted.blue.buttons .button:focus,
  2769. .ui.inverted.blue.button:focus,
  2770. .ui.inverted.blue.buttons .button.active,
  2771. .ui.inverted.blue.button.active,
  2772. .ui.inverted.blue.buttons .button:active,
  2773. .ui.inverted.blue.button:active {
  2774. -webkit-box-shadow: none ;
  2775. box-shadow: none ;
  2776. color: #FFFFFF;
  2777. }
  2778. .ui.inverted.blue.buttons .button:hover,
  2779. .ui.inverted.blue.button:hover {
  2780. background-color: #21b8ff;
  2781. }
  2782. .ui.inverted.blue.buttons .button:focus,
  2783. .ui.inverted.blue.button:focus {
  2784. background-color: #2bbbff;
  2785. }
  2786. .ui.inverted.blue.buttons .active.button,
  2787. .ui.inverted.blue.active.button {
  2788. background-color: #3ac0ff;
  2789. }
  2790. .ui.inverted.blue.buttons .button:active,
  2791. .ui.inverted.blue.button:active {
  2792. background-color: #21b8ff;
  2793. }
  2794. /* Inverted Basic */
  2795. .ui.inverted.blue.basic.buttons .button,
  2796. .ui.inverted.blue.buttons .basic.button,
  2797. .ui.inverted.blue.basic.button {
  2798. background-color: transparent;
  2799. -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
  2800. box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
  2801. color: #FFFFFF;
  2802. }
  2803. .ui.inverted.blue.basic.buttons .button:hover,
  2804. .ui.inverted.blue.buttons .basic.button:hover,
  2805. .ui.inverted.blue.basic.button:hover {
  2806. -webkit-box-shadow: 0 0 0 2px #21b8ff inset;
  2807. box-shadow: 0 0 0 2px #21b8ff inset;
  2808. color: #54C8FF;
  2809. }
  2810. .ui.inverted.blue.basic.buttons .button:focus,
  2811. .ui.inverted.blue.basic.buttons .button:focus,
  2812. .ui.inverted.blue.basic.button:focus {
  2813. -webkit-box-shadow: 0 0 0 2px #2bbbff inset;
  2814. box-shadow: 0 0 0 2px #2bbbff inset;
  2815. color: #54C8FF;
  2816. }
  2817. .ui.inverted.blue.basic.buttons .active.button,
  2818. .ui.inverted.blue.buttons .basic.active.button,
  2819. .ui.inverted.blue.basic.active.button {
  2820. -webkit-box-shadow: 0 0 0 2px #3ac0ff inset;
  2821. box-shadow: 0 0 0 2px #3ac0ff inset;
  2822. color: #54C8FF;
  2823. }
  2824. .ui.inverted.blue.basic.buttons .button:active,
  2825. .ui.inverted.blue.buttons .basic.button:active,
  2826. .ui.inverted.blue.basic.button:active {
  2827. -webkit-box-shadow: 0 0 0 2px #21b8ff inset;
  2828. box-shadow: 0 0 0 2px #21b8ff inset;
  2829. color: #54C8FF;
  2830. }
  2831. /* Tertiary */
  2832. .ui.tertiary.blue.buttons .button,
  2833. .ui.tertiary.blue.buttons .tertiary.button,
  2834. .ui.tertiary.blue.button {
  2835. background: transparent;
  2836. -webkit-box-shadow: none;
  2837. box-shadow: none;
  2838. color: #2185D0;
  2839. }
  2840. .ui.tertiary.blue.buttons .button:hover,
  2841. .ui.tertiary.blue.buttons button:hover,
  2842. .ui.tertiary.blue.button:hover {
  2843. -webkit-box-shadow: inset 0 -0.2em 0 #2b75ac;
  2844. box-shadow: inset 0 -0.2em 0 #2b75ac;
  2845. color: #2b75ac;
  2846. }
  2847. .ui.tertiary.blue.buttons .button:focus,
  2848. .ui.tertiary.blue.buttons .tertiary.button:focus,
  2849. .ui.tertiary.blue.button:focus {
  2850. -webkit-box-shadow: inset 0 -0.2em 0 #216ea7;
  2851. box-shadow: inset 0 -0.2em 0 #216ea7;
  2852. color: #216ea7;
  2853. }
  2854. .ui.tertiary.blue.buttons .active.button,
  2855. .ui.tertiary.blue.buttons .tertiary.active.button,
  2856. .ui.tertiary.blue.active.button,
  2857. .ui.tertiary.blue.buttons .button:active,
  2858. .ui.tertiary.blue.buttons .tertiary.button:active,
  2859. .ui.tertiary.blue.button:active {
  2860. -webkit-box-shadow: inset 0 -0.2em 0 #007bd8;
  2861. box-shadow: inset 0 -0.2em 0 #007bd8;
  2862. color: #1279c6;
  2863. }
  2864. .ui.violet.buttons .button,
  2865. .ui.violet.button {
  2866. background-color: #6435C9;
  2867. color: #FFFFFF;
  2868. text-shadow: none;
  2869. background-image: none;
  2870. }
  2871. .ui.violet.button {
  2872. -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  2873. box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  2874. }
  2875. .ui.violet.buttons .button:hover,
  2876. .ui.violet.button:hover {
  2877. background-color: #5829bb;
  2878. color: #FFFFFF;
  2879. text-shadow: none;
  2880. }
  2881. .ui.violet.buttons .button:focus,
  2882. .ui.violet.button:focus {
  2883. background-color: #4f20b5;
  2884. color: #FFFFFF;
  2885. text-shadow: none;
  2886. }
  2887. .ui.violet.buttons .button:active,
  2888. .ui.violet.button:active {
  2889. background-color: #502aa1;
  2890. color: #FFFFFF;
  2891. text-shadow: none;
  2892. }
  2893. .ui.violet.buttons .active.button,
  2894. .ui.violet.buttons .active.button:active,
  2895. .ui.violet.active.button,
  2896. .ui.violet.button .active.button:active {
  2897. background-color: #5626bf;
  2898. color: #FFFFFF;
  2899. text-shadow: none;
  2900. }
  2901. /* Basic */
  2902. .ui.basic.violet.buttons .button,
  2903. .ui.basic.violet.button {
  2904. background: transparent;
  2905. -webkit-box-shadow: 0 0 0 1px #6435C9 inset;
  2906. box-shadow: 0 0 0 1px #6435C9 inset;
  2907. color: #6435C9;
  2908. }
  2909. .ui.basic.violet.buttons .button:hover,
  2910. .ui.basic.violet.button:hover {
  2911. background: transparent ;
  2912. -webkit-box-shadow: 0 0 0 1px #5829bb inset;
  2913. box-shadow: 0 0 0 1px #5829bb inset;
  2914. color: #5829bb;
  2915. }
  2916. .ui.basic.violet.buttons .button:focus,
  2917. .ui.basic.violet.button:focus {
  2918. background: transparent ;
  2919. -webkit-box-shadow: 0 0 0 1px #4f20b5 inset;
  2920. box-shadow: 0 0 0 1px #4f20b5 inset;
  2921. color: #5829bb;
  2922. }
  2923. .ui.basic.violet.buttons .active.button,
  2924. .ui.basic.violet.active.button {
  2925. background: transparent ;
  2926. -webkit-box-shadow: 0 0 0 1px #5626bf inset;
  2927. box-shadow: 0 0 0 1px #5626bf inset;
  2928. color: #502aa1;
  2929. }
  2930. .ui.basic.violet.buttons .button:active,
  2931. .ui.basic.violet.button:active {
  2932. -webkit-box-shadow: 0 0 0 1px #502aa1 inset;
  2933. box-shadow: 0 0 0 1px #502aa1 inset;
  2934. color: #502aa1;
  2935. }
  2936. .ui.buttons:not(.vertical) > .basic.violet.button:not(:first-child) {
  2937. margin-left: -1px;
  2938. }
  2939. /* Inverted */
  2940. .ui.inverted.violet.buttons .button,
  2941. .ui.inverted.violet.button {
  2942. background-color: transparent;
  2943. -webkit-box-shadow: 0 0 0 2px #A291FB inset;
  2944. box-shadow: 0 0 0 2px #A291FB inset;
  2945. color: #A291FB;
  2946. }
  2947. .ui.inverted.violet.buttons .button:hover,
  2948. .ui.inverted.violet.button:hover,
  2949. .ui.inverted.violet.buttons .button:focus,
  2950. .ui.inverted.violet.button:focus,
  2951. .ui.inverted.violet.buttons .button.active,
  2952. .ui.inverted.violet.button.active,
  2953. .ui.inverted.violet.buttons .button:active,
  2954. .ui.inverted.violet.button:active {
  2955. -webkit-box-shadow: none ;
  2956. box-shadow: none ;
  2957. color: #FFFFFF;
  2958. }
  2959. .ui.inverted.violet.buttons .button:hover,
  2960. .ui.inverted.violet.button:hover {
  2961. background-color: #745aff;
  2962. }
  2963. .ui.inverted.violet.buttons .button:focus,
  2964. .ui.inverted.violet.button:focus {
  2965. background-color: #7d64ff;
  2966. }
  2967. .ui.inverted.violet.buttons .active.button,
  2968. .ui.inverted.violet.active.button {
  2969. background-color: #8a73ff;
  2970. }
  2971. .ui.inverted.violet.buttons .button:active,
  2972. .ui.inverted.violet.button:active {
  2973. background-color: #7860f9;
  2974. }
  2975. /* Inverted Basic */
  2976. .ui.inverted.violet.basic.buttons .button,
  2977. .ui.inverted.violet.buttons .basic.button,
  2978. .ui.inverted.violet.basic.button {
  2979. background-color: transparent;
  2980. -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
  2981. box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
  2982. color: #FFFFFF;
  2983. }
  2984. .ui.inverted.violet.basic.buttons .button:hover,
  2985. .ui.inverted.violet.buttons .basic.button:hover,
  2986. .ui.inverted.violet.basic.button:hover {
  2987. -webkit-box-shadow: 0 0 0 2px #745aff inset;
  2988. box-shadow: 0 0 0 2px #745aff inset;
  2989. color: #A291FB;
  2990. }
  2991. .ui.inverted.violet.basic.buttons .button:focus,
  2992. .ui.inverted.violet.basic.buttons .button:focus,
  2993. .ui.inverted.violet.basic.button:focus {
  2994. -webkit-box-shadow: 0 0 0 2px #7d64ff inset;
  2995. box-shadow: 0 0 0 2px #7d64ff inset;
  2996. color: #A291FB;
  2997. }
  2998. .ui.inverted.violet.basic.buttons .active.button,
  2999. .ui.inverted.violet.buttons .basic.active.button,
  3000. .ui.inverted.violet.basic.active.button {
  3001. -webkit-box-shadow: 0 0 0 2px #8a73ff inset;
  3002. box-shadow: 0 0 0 2px #8a73ff inset;
  3003. color: #A291FB;
  3004. }
  3005. .ui.inverted.violet.basic.buttons .button:active,
  3006. .ui.inverted.violet.buttons .basic.button:active,
  3007. .ui.inverted.violet.basic.button:active {
  3008. -webkit-box-shadow: 0 0 0 2px #7860f9 inset;
  3009. box-shadow: 0 0 0 2px #7860f9 inset;
  3010. color: #A291FB;
  3011. }
  3012. /* Tertiary */
  3013. .ui.tertiary.violet.buttons .button,
  3014. .ui.tertiary.violet.buttons .tertiary.button,
  3015. .ui.tertiary.violet.button {
  3016. background: transparent;
  3017. -webkit-box-shadow: none;
  3018. box-shadow: none;
  3019. color: #6435C9;
  3020. }
  3021. .ui.tertiary.violet.buttons .button:hover,
  3022. .ui.tertiary.violet.buttons button:hover,
  3023. .ui.tertiary.violet.button:hover {
  3024. -webkit-box-shadow: inset 0 -0.2em 0 #6040a5;
  3025. box-shadow: inset 0 -0.2em 0 #6040a5;
  3026. color: #6040a5;
  3027. }
  3028. .ui.tertiary.violet.buttons .button:focus,
  3029. .ui.tertiary.violet.buttons .tertiary.button:focus,
  3030. .ui.tertiary.violet.button:focus {
  3031. -webkit-box-shadow: inset 0 -0.2em 0 #5735a0;
  3032. box-shadow: inset 0 -0.2em 0 #5735a0;
  3033. color: #5735a0;
  3034. }
  3035. .ui.tertiary.violet.buttons .active.button,
  3036. .ui.tertiary.violet.buttons .tertiary.active.button,
  3037. .ui.tertiary.violet.active.button,
  3038. .ui.tertiary.violet.buttons .button:active,
  3039. .ui.tertiary.violet.buttons .tertiary.button:active,
  3040. .ui.tertiary.violet.button:active {
  3041. -webkit-box-shadow: inset 0 -0.2em 0 #4e0fd6;
  3042. box-shadow: inset 0 -0.2em 0 #4e0fd6;
  3043. color: #5626bf;
  3044. }
  3045. .ui.purple.buttons .button,
  3046. .ui.purple.button {
  3047. background-color: #A333C8;
  3048. color: #FFFFFF;
  3049. text-shadow: none;
  3050. background-image: none;
  3051. }
  3052. .ui.purple.button {
  3053. -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  3054. box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  3055. }
  3056. .ui.purple.buttons .button:hover,
  3057. .ui.purple.button:hover {
  3058. background-color: #9627ba;
  3059. color: #FFFFFF;
  3060. text-shadow: none;
  3061. }
  3062. .ui.purple.buttons .button:focus,
  3063. .ui.purple.button:focus {
  3064. background-color: #8f1eb4;
  3065. color: #FFFFFF;
  3066. text-shadow: none;
  3067. }
  3068. .ui.purple.buttons .button:active,
  3069. .ui.purple.button:active {
  3070. background-color: #82299f;
  3071. color: #FFFFFF;
  3072. text-shadow: none;
  3073. }
  3074. .ui.purple.buttons .active.button,
  3075. .ui.purple.buttons .active.button:active,
  3076. .ui.purple.active.button,
  3077. .ui.purple.button .active.button:active {
  3078. background-color: #9724be;
  3079. color: #FFFFFF;
  3080. text-shadow: none;
  3081. }
  3082. /* Basic */
  3083. .ui.basic.purple.buttons .button,
  3084. .ui.basic.purple.button {
  3085. background: transparent;
  3086. -webkit-box-shadow: 0 0 0 1px #A333C8 inset;
  3087. box-shadow: 0 0 0 1px #A333C8 inset;
  3088. color: #A333C8;
  3089. }
  3090. .ui.basic.purple.buttons .button:hover,
  3091. .ui.basic.purple.button:hover {
  3092. background: transparent ;
  3093. -webkit-box-shadow: 0 0 0 1px #9627ba inset;
  3094. box-shadow: 0 0 0 1px #9627ba inset;
  3095. color: #9627ba;
  3096. }
  3097. .ui.basic.purple.buttons .button:focus,
  3098. .ui.basic.purple.button:focus {
  3099. background: transparent ;
  3100. -webkit-box-shadow: 0 0 0 1px #8f1eb4 inset;
  3101. box-shadow: 0 0 0 1px #8f1eb4 inset;
  3102. color: #9627ba;
  3103. }
  3104. .ui.basic.purple.buttons .active.button,
  3105. .ui.basic.purple.active.button {
  3106. background: transparent ;
  3107. -webkit-box-shadow: 0 0 0 1px #9724be inset;
  3108. box-shadow: 0 0 0 1px #9724be inset;
  3109. color: #82299f;
  3110. }
  3111. .ui.basic.purple.buttons .button:active,
  3112. .ui.basic.purple.button:active {
  3113. -webkit-box-shadow: 0 0 0 1px #82299f inset;
  3114. box-shadow: 0 0 0 1px #82299f inset;
  3115. color: #82299f;
  3116. }
  3117. .ui.buttons:not(.vertical) > .basic.purple.button:not(:first-child) {
  3118. margin-left: -1px;
  3119. }
  3120. /* Inverted */
  3121. .ui.inverted.purple.buttons .button,
  3122. .ui.inverted.purple.button {
  3123. background-color: transparent;
  3124. -webkit-box-shadow: 0 0 0 2px #DC73FF inset;
  3125. box-shadow: 0 0 0 2px #DC73FF inset;
  3126. color: #DC73FF;
  3127. }
  3128. .ui.inverted.purple.buttons .button:hover,
  3129. .ui.inverted.purple.button:hover,
  3130. .ui.inverted.purple.buttons .button:focus,
  3131. .ui.inverted.purple.button:focus,
  3132. .ui.inverted.purple.buttons .button.active,
  3133. .ui.inverted.purple.button.active,
  3134. .ui.inverted.purple.buttons .button:active,
  3135. .ui.inverted.purple.button:active {
  3136. -webkit-box-shadow: none ;
  3137. box-shadow: none ;
  3138. color: #FFFFFF;
  3139. }
  3140. .ui.inverted.purple.buttons .button:hover,
  3141. .ui.inverted.purple.button:hover {
  3142. background-color: #cf40ff;
  3143. }
  3144. .ui.inverted.purple.buttons .button:focus,
  3145. .ui.inverted.purple.button:focus {
  3146. background-color: #d24aff;
  3147. }
  3148. .ui.inverted.purple.buttons .active.button,
  3149. .ui.inverted.purple.active.button {
  3150. background-color: #d65aff;
  3151. }
  3152. .ui.inverted.purple.buttons .button:active,
  3153. .ui.inverted.purple.button:active {
  3154. background-color: #cf40ff;
  3155. }
  3156. /* Inverted Basic */
  3157. .ui.inverted.purple.basic.buttons .button,
  3158. .ui.inverted.purple.buttons .basic.button,
  3159. .ui.inverted.purple.basic.button {
  3160. background-color: transparent;
  3161. -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
  3162. box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
  3163. color: #FFFFFF;
  3164. }
  3165. .ui.inverted.purple.basic.buttons .button:hover,
  3166. .ui.inverted.purple.buttons .basic.button:hover,
  3167. .ui.inverted.purple.basic.button:hover {
  3168. -webkit-box-shadow: 0 0 0 2px #cf40ff inset;
  3169. box-shadow: 0 0 0 2px #cf40ff inset;
  3170. color: #DC73FF;
  3171. }
  3172. .ui.inverted.purple.basic.buttons .button:focus,
  3173. .ui.inverted.purple.basic.buttons .button:focus,
  3174. .ui.inverted.purple.basic.button:focus {
  3175. -webkit-box-shadow: 0 0 0 2px #d24aff inset;
  3176. box-shadow: 0 0 0 2px #d24aff inset;
  3177. color: #DC73FF;
  3178. }
  3179. .ui.inverted.purple.basic.buttons .active.button,
  3180. .ui.inverted.purple.buttons .basic.active.button,
  3181. .ui.inverted.purple.basic.active.button {
  3182. -webkit-box-shadow: 0 0 0 2px #d65aff inset;
  3183. box-shadow: 0 0 0 2px #d65aff inset;
  3184. color: #DC73FF;
  3185. }
  3186. .ui.inverted.purple.basic.buttons .button:active,
  3187. .ui.inverted.purple.buttons .basic.button:active,
  3188. .ui.inverted.purple.basic.button:active {
  3189. -webkit-box-shadow: 0 0 0 2px #cf40ff inset;
  3190. box-shadow: 0 0 0 2px #cf40ff inset;
  3191. color: #DC73FF;
  3192. }
  3193. /* Tertiary */
  3194. .ui.tertiary.purple.buttons .button,
  3195. .ui.tertiary.purple.buttons .tertiary.button,
  3196. .ui.tertiary.purple.button {
  3197. background: transparent;
  3198. -webkit-box-shadow: none;
  3199. box-shadow: none;
  3200. color: #A333C8;
  3201. }
  3202. .ui.tertiary.purple.buttons .button:hover,
  3203. .ui.tertiary.purple.buttons button:hover,
  3204. .ui.tertiary.purple.button:hover {
  3205. -webkit-box-shadow: inset 0 -0.2em 0 #8a3ea4;
  3206. box-shadow: inset 0 -0.2em 0 #8a3ea4;
  3207. color: #8a3ea4;
  3208. }
  3209. .ui.tertiary.purple.buttons .button:focus,
  3210. .ui.tertiary.purple.buttons .tertiary.button:focus,
  3211. .ui.tertiary.purple.button:focus {
  3212. -webkit-box-shadow: inset 0 -0.2em 0 #84339f;
  3213. box-shadow: inset 0 -0.2em 0 #84339f;
  3214. color: #84339f;
  3215. }
  3216. .ui.tertiary.purple.buttons .active.button,
  3217. .ui.tertiary.purple.buttons .tertiary.active.button,
  3218. .ui.tertiary.purple.active.button,
  3219. .ui.tertiary.purple.buttons .button:active,
  3220. .ui.tertiary.purple.buttons .tertiary.button:active,
  3221. .ui.tertiary.purple.button:active {
  3222. -webkit-box-shadow: inset 0 -0.2em 0 #a30dd4;
  3223. box-shadow: inset 0 -0.2em 0 #a30dd4;
  3224. color: #9724be;
  3225. }
  3226. .ui.pink.buttons .button,
  3227. .ui.pink.button {
  3228. background-color: #E03997;
  3229. color: #FFFFFF;
  3230. text-shadow: none;
  3231. background-image: none;
  3232. }
  3233. .ui.pink.button {
  3234. -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  3235. box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  3236. }
  3237. .ui.pink.buttons .button:hover,
  3238. .ui.pink.button:hover {
  3239. background-color: #e61a8d;
  3240. color: #FFFFFF;
  3241. text-shadow: none;
  3242. }
  3243. .ui.pink.buttons .button:focus,
  3244. .ui.pink.button:focus {
  3245. background-color: #e10f85;
  3246. color: #FFFFFF;
  3247. text-shadow: none;
  3248. }
  3249. .ui.pink.buttons .button:active,
  3250. .ui.pink.button:active {
  3251. background-color: #c71f7e;
  3252. color: #FFFFFF;
  3253. text-shadow: none;
  3254. }
  3255. .ui.pink.buttons .active.button,
  3256. .ui.pink.buttons .active.button:active,
  3257. .ui.pink.active.button,
  3258. .ui.pink.button .active.button:active {
  3259. background-color: #ea158d;
  3260. color: #FFFFFF;
  3261. text-shadow: none;
  3262. }
  3263. /* Basic */
  3264. .ui.basic.pink.buttons .button,
  3265. .ui.basic.pink.button {
  3266. background: transparent;
  3267. -webkit-box-shadow: 0 0 0 1px #E03997 inset;
  3268. box-shadow: 0 0 0 1px #E03997 inset;
  3269. color: #E03997;
  3270. }
  3271. .ui.basic.pink.buttons .button:hover,
  3272. .ui.basic.pink.button:hover {
  3273. background: transparent ;
  3274. -webkit-box-shadow: 0 0 0 1px #e61a8d inset;
  3275. box-shadow: 0 0 0 1px #e61a8d inset;
  3276. color: #e61a8d;
  3277. }
  3278. .ui.basic.pink.buttons .button:focus,
  3279. .ui.basic.pink.button:focus {
  3280. background: transparent ;
  3281. -webkit-box-shadow: 0 0 0 1px #e10f85 inset;
  3282. box-shadow: 0 0 0 1px #e10f85 inset;
  3283. color: #e61a8d;
  3284. }
  3285. .ui.basic.pink.buttons .active.button,
  3286. .ui.basic.pink.active.button {
  3287. background: transparent ;
  3288. -webkit-box-shadow: 0 0 0 1px #ea158d inset;
  3289. box-shadow: 0 0 0 1px #ea158d inset;
  3290. color: #c71f7e;
  3291. }
  3292. .ui.basic.pink.buttons .button:active,
  3293. .ui.basic.pink.button:active {
  3294. -webkit-box-shadow: 0 0 0 1px #c71f7e inset;
  3295. box-shadow: 0 0 0 1px #c71f7e inset;
  3296. color: #c71f7e;
  3297. }
  3298. .ui.buttons:not(.vertical) > .basic.pink.button:not(:first-child) {
  3299. margin-left: -1px;
  3300. }
  3301. /* Inverted */
  3302. .ui.inverted.pink.buttons .button,
  3303. .ui.inverted.pink.button {
  3304. background-color: transparent;
  3305. -webkit-box-shadow: 0 0 0 2px #FF8EDF inset;
  3306. box-shadow: 0 0 0 2px #FF8EDF inset;
  3307. color: #FF8EDF;
  3308. }
  3309. .ui.inverted.pink.buttons .button:hover,
  3310. .ui.inverted.pink.button:hover,
  3311. .ui.inverted.pink.buttons .button:focus,
  3312. .ui.inverted.pink.button:focus,
  3313. .ui.inverted.pink.buttons .button.active,
  3314. .ui.inverted.pink.button.active,
  3315. .ui.inverted.pink.buttons .button:active,
  3316. .ui.inverted.pink.button:active {
  3317. -webkit-box-shadow: none ;
  3318. box-shadow: none ;
  3319. color: #FFFFFF;
  3320. }
  3321. .ui.inverted.pink.buttons .button:hover,
  3322. .ui.inverted.pink.button:hover {
  3323. background-color: #ff5bd1;
  3324. }
  3325. .ui.inverted.pink.buttons .button:focus,
  3326. .ui.inverted.pink.button:focus {
  3327. background-color: #ff65d3;
  3328. }
  3329. .ui.inverted.pink.buttons .active.button,
  3330. .ui.inverted.pink.active.button {
  3331. background-color: #ff74d8;
  3332. }
  3333. .ui.inverted.pink.buttons .button:active,
  3334. .ui.inverted.pink.button:active {
  3335. background-color: #ff5bd1;
  3336. }
  3337. /* Inverted Basic */
  3338. .ui.inverted.pink.basic.buttons .button,
  3339. .ui.inverted.pink.buttons .basic.button,
  3340. .ui.inverted.pink.basic.button {
  3341. background-color: transparent;
  3342. -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
  3343. box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
  3344. color: #FFFFFF;
  3345. }
  3346. .ui.inverted.pink.basic.buttons .button:hover,
  3347. .ui.inverted.pink.buttons .basic.button:hover,
  3348. .ui.inverted.pink.basic.button:hover {
  3349. -webkit-box-shadow: 0 0 0 2px #ff5bd1 inset;
  3350. box-shadow: 0 0 0 2px #ff5bd1 inset;
  3351. color: #FF8EDF;
  3352. }
  3353. .ui.inverted.pink.basic.buttons .button:focus,
  3354. .ui.inverted.pink.basic.buttons .button:focus,
  3355. .ui.inverted.pink.basic.button:focus {
  3356. -webkit-box-shadow: 0 0 0 2px #ff65d3 inset;
  3357. box-shadow: 0 0 0 2px #ff65d3 inset;
  3358. color: #FF8EDF;
  3359. }
  3360. .ui.inverted.pink.basic.buttons .active.button,
  3361. .ui.inverted.pink.buttons .basic.active.button,
  3362. .ui.inverted.pink.basic.active.button {
  3363. -webkit-box-shadow: 0 0 0 2px #ff74d8 inset;
  3364. box-shadow: 0 0 0 2px #ff74d8 inset;
  3365. color: #FF8EDF;
  3366. }
  3367. .ui.inverted.pink.basic.buttons .button:active,
  3368. .ui.inverted.pink.buttons .basic.button:active,
  3369. .ui.inverted.pink.basic.button:active {
  3370. -webkit-box-shadow: 0 0 0 2px #ff5bd1 inset;
  3371. box-shadow: 0 0 0 2px #ff5bd1 inset;
  3372. color: #FF8EDF;
  3373. }
  3374. /* Tertiary */
  3375. .ui.tertiary.pink.buttons .button,
  3376. .ui.tertiary.pink.buttons .tertiary.button,
  3377. .ui.tertiary.pink.button {
  3378. background: transparent;
  3379. -webkit-box-shadow: none;
  3380. box-shadow: none;
  3381. color: #E03997;
  3382. }
  3383. .ui.tertiary.pink.buttons .button:hover,
  3384. .ui.tertiary.pink.buttons button:hover,
  3385. .ui.tertiary.pink.button:hover {
  3386. -webkit-box-shadow: inset 0 -0.2em 0 #cc3389;
  3387. box-shadow: inset 0 -0.2em 0 #cc3389;
  3388. color: #cc3389;
  3389. }
  3390. .ui.tertiary.pink.buttons .button:focus,
  3391. .ui.tertiary.pink.buttons .tertiary.button:focus,
  3392. .ui.tertiary.pink.button:focus {
  3393. -webkit-box-shadow: inset 0 -0.2em 0 #c92782;
  3394. box-shadow: inset 0 -0.2em 0 #c92782;
  3395. color: #c92782;
  3396. }
  3397. .ui.tertiary.pink.buttons .active.button,
  3398. .ui.tertiary.pink.buttons .tertiary.active.button,
  3399. .ui.tertiary.pink.active.button,
  3400. .ui.tertiary.pink.buttons .button:active,
  3401. .ui.tertiary.pink.buttons .tertiary.button:active,
  3402. .ui.tertiary.pink.button:active {
  3403. -webkit-box-shadow: inset 0 -0.2em 0 #ff0090;
  3404. box-shadow: inset 0 -0.2em 0 #ff0090;
  3405. color: #ea158d;
  3406. }
  3407. .ui.brown.buttons .button,
  3408. .ui.brown.button {
  3409. background-color: #A5673F;
  3410. color: #FFFFFF;
  3411. text-shadow: none;
  3412. background-image: none;
  3413. }
  3414. .ui.brown.button {
  3415. -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  3416. box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  3417. }
  3418. .ui.brown.buttons .button:hover,
  3419. .ui.brown.button:hover {
  3420. background-color: #975b33;
  3421. color: #FFFFFF;
  3422. text-shadow: none;
  3423. }
  3424. .ui.brown.buttons .button:focus,
  3425. .ui.brown.button:focus {
  3426. background-color: #90532b;
  3427. color: #FFFFFF;
  3428. text-shadow: none;
  3429. }
  3430. .ui.brown.buttons .button:active,
  3431. .ui.brown.button:active {
  3432. background-color: #805031;
  3433. color: #FFFFFF;
  3434. text-shadow: none;
  3435. }
  3436. .ui.brown.buttons .active.button,
  3437. .ui.brown.buttons .active.button:active,
  3438. .ui.brown.active.button,
  3439. .ui.brown.button .active.button:active {
  3440. background-color: #995a31;
  3441. color: #FFFFFF;
  3442. text-shadow: none;
  3443. }
  3444. /* Basic */
  3445. .ui.basic.brown.buttons .button,
  3446. .ui.basic.brown.button {
  3447. background: transparent;
  3448. -webkit-box-shadow: 0 0 0 1px #A5673F inset;
  3449. box-shadow: 0 0 0 1px #A5673F inset;
  3450. color: #A5673F;
  3451. }
  3452. .ui.basic.brown.buttons .button:hover,
  3453. .ui.basic.brown.button:hover {
  3454. background: transparent ;
  3455. -webkit-box-shadow: 0 0 0 1px #975b33 inset;
  3456. box-shadow: 0 0 0 1px #975b33 inset;
  3457. color: #975b33;
  3458. }
  3459. .ui.basic.brown.buttons .button:focus,
  3460. .ui.basic.brown.button:focus {
  3461. background: transparent ;
  3462. -webkit-box-shadow: 0 0 0 1px #90532b inset;
  3463. box-shadow: 0 0 0 1px #90532b inset;
  3464. color: #975b33;
  3465. }
  3466. .ui.basic.brown.buttons .active.button,
  3467. .ui.basic.brown.active.button {
  3468. background: transparent ;
  3469. -webkit-box-shadow: 0 0 0 1px #995a31 inset;
  3470. box-shadow: 0 0 0 1px #995a31 inset;
  3471. color: #805031;
  3472. }
  3473. .ui.basic.brown.buttons .button:active,
  3474. .ui.basic.brown.button:active {
  3475. -webkit-box-shadow: 0 0 0 1px #805031 inset;
  3476. box-shadow: 0 0 0 1px #805031 inset;
  3477. color: #805031;
  3478. }
  3479. .ui.buttons:not(.vertical) > .basic.brown.button:not(:first-child) {
  3480. margin-left: -1px;
  3481. }
  3482. /* Inverted */
  3483. .ui.inverted.brown.buttons .button,
  3484. .ui.inverted.brown.button {
  3485. background-color: transparent;
  3486. -webkit-box-shadow: 0 0 0 2px #D67C1C inset;
  3487. box-shadow: 0 0 0 2px #D67C1C inset;
  3488. color: #D67C1C;
  3489. }
  3490. .ui.inverted.brown.buttons .button:hover,
  3491. .ui.inverted.brown.button:hover,
  3492. .ui.inverted.brown.buttons .button:focus,
  3493. .ui.inverted.brown.button:focus,
  3494. .ui.inverted.brown.buttons .button.active,
  3495. .ui.inverted.brown.button.active,
  3496. .ui.inverted.brown.buttons .button:active,
  3497. .ui.inverted.brown.button:active {
  3498. -webkit-box-shadow: none ;
  3499. box-shadow: none ;
  3500. color: #FFFFFF;
  3501. }
  3502. .ui.inverted.brown.buttons .button:hover,
  3503. .ui.inverted.brown.button:hover {
  3504. background-color: #b0620f;
  3505. }
  3506. .ui.inverted.brown.buttons .button:focus,
  3507. .ui.inverted.brown.button:focus {
  3508. background-color: #c16808;
  3509. }
  3510. .ui.inverted.brown.buttons .active.button,
  3511. .ui.inverted.brown.active.button {
  3512. background-color: #cc6f0d;
  3513. }
  3514. .ui.inverted.brown.buttons .button:active,
  3515. .ui.inverted.brown.button:active {
  3516. background-color: #a96216;
  3517. }
  3518. /* Inverted Basic */
  3519. .ui.inverted.brown.basic.buttons .button,
  3520. .ui.inverted.brown.buttons .basic.button,
  3521. .ui.inverted.brown.basic.button {
  3522. background-color: transparent;
  3523. -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
  3524. box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
  3525. color: #FFFFFF;
  3526. }
  3527. .ui.inverted.brown.basic.buttons .button:hover,
  3528. .ui.inverted.brown.buttons .basic.button:hover,
  3529. .ui.inverted.brown.basic.button:hover {
  3530. -webkit-box-shadow: 0 0 0 2px #b0620f inset;
  3531. box-shadow: 0 0 0 2px #b0620f inset;
  3532. color: #D67C1C;
  3533. }
  3534. .ui.inverted.brown.basic.buttons .button:focus,
  3535. .ui.inverted.brown.basic.buttons .button:focus,
  3536. .ui.inverted.brown.basic.button:focus {
  3537. -webkit-box-shadow: 0 0 0 2px #c16808 inset;
  3538. box-shadow: 0 0 0 2px #c16808 inset;
  3539. color: #D67C1C;
  3540. }
  3541. .ui.inverted.brown.basic.buttons .active.button,
  3542. .ui.inverted.brown.buttons .basic.active.button,
  3543. .ui.inverted.brown.basic.active.button {
  3544. -webkit-box-shadow: 0 0 0 2px #cc6f0d inset;
  3545. box-shadow: 0 0 0 2px #cc6f0d inset;
  3546. color: #D67C1C;
  3547. }
  3548. .ui.inverted.brown.basic.buttons .button:active,
  3549. .ui.inverted.brown.buttons .basic.button:active,
  3550. .ui.inverted.brown.basic.button:active {
  3551. -webkit-box-shadow: 0 0 0 2px #a96216 inset;
  3552. box-shadow: 0 0 0 2px #a96216 inset;
  3553. color: #D67C1C;
  3554. }
  3555. /* Tertiary */
  3556. .ui.tertiary.brown.buttons .button,
  3557. .ui.tertiary.brown.buttons .tertiary.button,
  3558. .ui.tertiary.brown.button {
  3559. background: transparent;
  3560. -webkit-box-shadow: none;
  3561. box-shadow: none;
  3562. color: #A5673F;
  3563. }
  3564. .ui.tertiary.brown.buttons .button:hover,
  3565. .ui.tertiary.brown.buttons button:hover,
  3566. .ui.tertiary.brown.button:hover {
  3567. -webkit-box-shadow: inset 0 -0.2em 0 #835f48;
  3568. box-shadow: inset 0 -0.2em 0 #835f48;
  3569. color: #835f48;
  3570. }
  3571. .ui.tertiary.brown.buttons .button:focus,
  3572. .ui.tertiary.brown.buttons .tertiary.button:focus,
  3573. .ui.tertiary.brown.button:focus {
  3574. -webkit-box-shadow: inset 0 -0.2em 0 #7d573e;
  3575. box-shadow: inset 0 -0.2em 0 #7d573e;
  3576. color: #7d573e;
  3577. }
  3578. .ui.tertiary.brown.buttons .active.button,
  3579. .ui.tertiary.brown.buttons .tertiary.active.button,
  3580. .ui.tertiary.brown.active.button,
  3581. .ui.tertiary.brown.buttons .button:active,
  3582. .ui.tertiary.brown.buttons .tertiary.button:active,
  3583. .ui.tertiary.brown.button:active {
  3584. -webkit-box-shadow: inset 0 -0.2em 0 #ae561d;
  3585. box-shadow: inset 0 -0.2em 0 #ae561d;
  3586. color: #995a31;
  3587. }
  3588. .ui.grey.buttons .button,
  3589. .ui.grey.button {
  3590. background-color: #767676;
  3591. color: #FFFFFF;
  3592. text-shadow: none;
  3593. background-image: none;
  3594. }
  3595. .ui.grey.button {
  3596. -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  3597. box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  3598. }
  3599. .ui.grey.buttons .button:hover,
  3600. .ui.grey.button:hover {
  3601. background-color: #838383;
  3602. color: #FFFFFF;
  3603. text-shadow: none;
  3604. }
  3605. .ui.grey.buttons .button:focus,
  3606. .ui.grey.button:focus {
  3607. background-color: #8a8a8a;
  3608. color: #FFFFFF;
  3609. text-shadow: none;
  3610. }
  3611. .ui.grey.buttons .button:active,
  3612. .ui.grey.button:active {
  3613. background-color: #909090;
  3614. color: #FFFFFF;
  3615. text-shadow: none;
  3616. }
  3617. .ui.grey.buttons .active.button,
  3618. .ui.grey.buttons .active.button:active,
  3619. .ui.grey.active.button,
  3620. .ui.grey.button .active.button:active {
  3621. background-color: #696969;
  3622. color: #FFFFFF;
  3623. text-shadow: none;
  3624. }
  3625. /* Basic */
  3626. .ui.basic.grey.buttons .button,
  3627. .ui.basic.grey.button {
  3628. background: transparent;
  3629. -webkit-box-shadow: 0 0 0 1px #767676 inset;
  3630. box-shadow: 0 0 0 1px #767676 inset;
  3631. color: #767676;
  3632. }
  3633. .ui.basic.grey.buttons .button:hover,
  3634. .ui.basic.grey.button:hover {
  3635. background: transparent ;
  3636. -webkit-box-shadow: 0 0 0 1px #838383 inset;
  3637. box-shadow: 0 0 0 1px #838383 inset;
  3638. color: #838383;
  3639. }
  3640. .ui.basic.grey.buttons .button:focus,
  3641. .ui.basic.grey.button:focus {
  3642. background: transparent ;
  3643. -webkit-box-shadow: 0 0 0 1px #8a8a8a inset;
  3644. box-shadow: 0 0 0 1px #8a8a8a inset;
  3645. color: #838383;
  3646. }
  3647. .ui.basic.grey.buttons .active.button,
  3648. .ui.basic.grey.active.button {
  3649. background: transparent ;
  3650. -webkit-box-shadow: 0 0 0 1px #696969 inset;
  3651. box-shadow: 0 0 0 1px #696969 inset;
  3652. color: #909090;
  3653. }
  3654. .ui.basic.grey.buttons .button:active,
  3655. .ui.basic.grey.button:active {
  3656. -webkit-box-shadow: 0 0 0 1px #909090 inset;
  3657. box-shadow: 0 0 0 1px #909090 inset;
  3658. color: #909090;
  3659. }
  3660. .ui.buttons:not(.vertical) > .basic.grey.button:not(:first-child) {
  3661. margin-left: -1px;
  3662. }
  3663. /* Inverted */
  3664. .ui.inverted.grey.buttons .button,
  3665. .ui.inverted.grey.button {
  3666. background-color: transparent;
  3667. -webkit-box-shadow: 0 0 0 2px #D4D4D5 inset;
  3668. box-shadow: 0 0 0 2px #D4D4D5 inset;
  3669. color: #FFFFFF;
  3670. }
  3671. .ui.inverted.grey.buttons .button:hover,
  3672. .ui.inverted.grey.button:hover,
  3673. .ui.inverted.grey.buttons .button:focus,
  3674. .ui.inverted.grey.button:focus,
  3675. .ui.inverted.grey.buttons .button.active,
  3676. .ui.inverted.grey.button.active,
  3677. .ui.inverted.grey.buttons .button:active,
  3678. .ui.inverted.grey.button:active {
  3679. -webkit-box-shadow: none ;
  3680. box-shadow: none ;
  3681. color: rgba(0, 0, 0, 0.6);
  3682. }
  3683. .ui.inverted.grey.buttons .button:hover,
  3684. .ui.inverted.grey.button:hover {
  3685. background-color: #c2c4c5;
  3686. }
  3687. .ui.inverted.grey.buttons .button:focus,
  3688. .ui.inverted.grey.button:focus {
  3689. background-color: #c7c9cb;
  3690. }
  3691. .ui.inverted.grey.buttons .active.button,
  3692. .ui.inverted.grey.active.button {
  3693. background-color: #cfd0d2;
  3694. }
  3695. .ui.inverted.grey.buttons .button:active,
  3696. .ui.inverted.grey.button:active {
  3697. background-color: #c2c4c5;
  3698. }
  3699. /* Inverted Basic */
  3700. .ui.inverted.grey.basic.buttons .button,
  3701. .ui.inverted.grey.buttons .basic.button,
  3702. .ui.inverted.grey.basic.button {
  3703. background-color: transparent;
  3704. -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
  3705. box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
  3706. color: #FFFFFF;
  3707. }
  3708. .ui.inverted.grey.basic.buttons .button:hover,
  3709. .ui.inverted.grey.buttons .basic.button:hover,
  3710. .ui.inverted.grey.basic.button:hover {
  3711. -webkit-box-shadow: 0 0 0 2px #c2c4c5 inset;
  3712. box-shadow: 0 0 0 2px #c2c4c5 inset;
  3713. color: #FFFFFF;
  3714. }
  3715. .ui.inverted.grey.basic.buttons .button:focus,
  3716. .ui.inverted.grey.basic.buttons .button:focus,
  3717. .ui.inverted.grey.basic.button:focus {
  3718. -webkit-box-shadow: 0 0 0 2px #c7c9cb inset;
  3719. box-shadow: 0 0 0 2px #c7c9cb inset;
  3720. color: #DCDDDE;
  3721. }
  3722. .ui.inverted.grey.basic.buttons .active.button,
  3723. .ui.inverted.grey.buttons .basic.active.button,
  3724. .ui.inverted.grey.basic.active.button {
  3725. -webkit-box-shadow: 0 0 0 2px #cfd0d2 inset;
  3726. box-shadow: 0 0 0 2px #cfd0d2 inset;
  3727. color: #FFFFFF;
  3728. }
  3729. .ui.inverted.grey.basic.buttons .button:active,
  3730. .ui.inverted.grey.buttons .basic.button:active,
  3731. .ui.inverted.grey.basic.button:active {
  3732. -webkit-box-shadow: 0 0 0 2px #c2c4c5 inset;
  3733. box-shadow: 0 0 0 2px #c2c4c5 inset;
  3734. color: #FFFFFF;
  3735. }
  3736. /* Tertiary */
  3737. .ui.tertiary.grey.buttons .button,
  3738. .ui.tertiary.grey.buttons .tertiary.button,
  3739. .ui.tertiary.grey.button {
  3740. background: transparent;
  3741. -webkit-box-shadow: none;
  3742. box-shadow: none;
  3743. color: #767676;
  3744. }
  3745. .ui.tertiary.grey.buttons .button:hover,
  3746. .ui.tertiary.grey.buttons button:hover,
  3747. .ui.tertiary.grey.button:hover {
  3748. -webkit-box-shadow: inset 0 -0.2em 0 #838383;
  3749. box-shadow: inset 0 -0.2em 0 #838383;
  3750. color: #838383;
  3751. }
  3752. .ui.tertiary.grey.buttons .button:focus,
  3753. .ui.tertiary.grey.buttons .tertiary.button:focus,
  3754. .ui.tertiary.grey.button:focus {
  3755. -webkit-box-shadow: inset 0 -0.2em 0 #8a8a8a;
  3756. box-shadow: inset 0 -0.2em 0 #8a8a8a;
  3757. color: #8a8a8a;
  3758. }
  3759. .ui.tertiary.grey.buttons .active.button,
  3760. .ui.tertiary.grey.buttons .tertiary.active.button,
  3761. .ui.tertiary.grey.active.button,
  3762. .ui.tertiary.grey.buttons .button:active,
  3763. .ui.tertiary.grey.buttons .tertiary.button:active,
  3764. .ui.tertiary.grey.button:active {
  3765. -webkit-box-shadow: inset 0 -0.2em 0 #7e5454;
  3766. box-shadow: inset 0 -0.2em 0 #7e5454;
  3767. color: #696969;
  3768. }
  3769. .ui.black.buttons .button,
  3770. .ui.black.button {
  3771. background-color: #1B1C1D;
  3772. color: #FFFFFF;
  3773. text-shadow: none;
  3774. background-image: none;
  3775. }
  3776. .ui.black.button {
  3777. -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  3778. box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  3779. }
  3780. .ui.black.buttons .button:hover,
  3781. .ui.black.button:hover {
  3782. background-color: #27292a;
  3783. color: #FFFFFF;
  3784. text-shadow: none;
  3785. }
  3786. .ui.black.buttons .button:focus,
  3787. .ui.black.button:focus {
  3788. background-color: #2f3032;
  3789. color: #FFFFFF;
  3790. text-shadow: none;
  3791. }
  3792. .ui.black.buttons .button:active,
  3793. .ui.black.button:active {
  3794. background-color: #343637;
  3795. color: #FFFFFF;
  3796. text-shadow: none;
  3797. }
  3798. .ui.black.buttons .active.button,
  3799. .ui.black.buttons .active.button:active,
  3800. .ui.black.active.button,
  3801. .ui.black.button .active.button:active {
  3802. background-color: #0f0f10;
  3803. color: #FFFFFF;
  3804. text-shadow: none;
  3805. }
  3806. /* Basic */
  3807. .ui.basic.black.buttons .button,
  3808. .ui.basic.black.button {
  3809. background: transparent;
  3810. -webkit-box-shadow: 0 0 0 1px #1B1C1D inset;
  3811. box-shadow: 0 0 0 1px #1B1C1D inset;
  3812. color: #1B1C1D;
  3813. }
  3814. .ui.basic.black.buttons .button:hover,
  3815. .ui.basic.black.button:hover {
  3816. background: transparent ;
  3817. -webkit-box-shadow: 0 0 0 1px #27292a inset;
  3818. box-shadow: 0 0 0 1px #27292a inset;
  3819. color: #27292a;
  3820. }
  3821. .ui.basic.black.buttons .button:focus,
  3822. .ui.basic.black.button:focus {
  3823. background: transparent ;
  3824. -webkit-box-shadow: 0 0 0 1px #2f3032 inset;
  3825. box-shadow: 0 0 0 1px #2f3032 inset;
  3826. color: #27292a;
  3827. }
  3828. .ui.basic.black.buttons .active.button,
  3829. .ui.basic.black.active.button {
  3830. background: transparent ;
  3831. -webkit-box-shadow: 0 0 0 1px #0f0f10 inset;
  3832. box-shadow: 0 0 0 1px #0f0f10 inset;
  3833. color: #343637;
  3834. }
  3835. .ui.basic.black.buttons .button:active,
  3836. .ui.basic.black.button:active {
  3837. -webkit-box-shadow: 0 0 0 1px #343637 inset;
  3838. box-shadow: 0 0 0 1px #343637 inset;
  3839. color: #343637;
  3840. }
  3841. .ui.buttons:not(.vertical) > .basic.black.button:not(:first-child) {
  3842. margin-left: -1px;
  3843. }
  3844. /* Inverted */
  3845. .ui.inverted.black.buttons .button,
  3846. .ui.inverted.black.button {
  3847. background-color: transparent;
  3848. -webkit-box-shadow: 0 0 0 2px #D4D4D5 inset;
  3849. box-shadow: 0 0 0 2px #D4D4D5 inset;
  3850. color: #FFFFFF;
  3851. }
  3852. .ui.inverted.black.buttons .button:hover,
  3853. .ui.inverted.black.button:hover,
  3854. .ui.inverted.black.buttons .button:focus,
  3855. .ui.inverted.black.button:focus,
  3856. .ui.inverted.black.buttons .button.active,
  3857. .ui.inverted.black.button.active,
  3858. .ui.inverted.black.buttons .button:active,
  3859. .ui.inverted.black.button:active {
  3860. -webkit-box-shadow: none ;
  3861. box-shadow: none ;
  3862. color: #FFFFFF;
  3863. }
  3864. .ui.inverted.black.buttons .button:hover,
  3865. .ui.inverted.black.button:hover {
  3866. background-color: #000000;
  3867. }
  3868. .ui.inverted.black.buttons .button:focus,
  3869. .ui.inverted.black.button:focus {
  3870. background-color: #000000;
  3871. }
  3872. .ui.inverted.black.buttons .active.button,
  3873. .ui.inverted.black.active.button {
  3874. background-color: #000000;
  3875. }
  3876. .ui.inverted.black.buttons .button:active,
  3877. .ui.inverted.black.button:active {
  3878. background-color: #000000;
  3879. }
  3880. /* Inverted Basic */
  3881. .ui.inverted.black.basic.buttons .button,
  3882. .ui.inverted.black.buttons .basic.button,
  3883. .ui.inverted.black.basic.button {
  3884. background-color: transparent;
  3885. -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
  3886. box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) inset;
  3887. color: #FFFFFF;
  3888. }
  3889. .ui.inverted.black.basic.buttons .button:hover,
  3890. .ui.inverted.black.buttons .basic.button:hover,
  3891. .ui.inverted.black.basic.button:hover {
  3892. -webkit-box-shadow: 0 0 0 2px #000000 inset;
  3893. box-shadow: 0 0 0 2px #000000 inset;
  3894. color: #FFFFFF;
  3895. }
  3896. .ui.inverted.black.basic.buttons .button:focus,
  3897. .ui.inverted.black.basic.buttons .button:focus,
  3898. .ui.inverted.black.basic.button:focus {
  3899. -webkit-box-shadow: 0 0 0 2px #000000 inset;
  3900. box-shadow: 0 0 0 2px #000000 inset;
  3901. color: #545454;
  3902. }
  3903. .ui.inverted.black.basic.buttons .active.button,
  3904. .ui.inverted.black.buttons .basic.active.button,
  3905. .ui.inverted.black.basic.active.button {
  3906. -webkit-box-shadow: 0 0 0 2px #000000 inset;
  3907. box-shadow: 0 0 0 2px #000000 inset;
  3908. color: #FFFFFF;
  3909. }
  3910. .ui.inverted.black.basic.buttons .button:active,
  3911. .ui.inverted.black.buttons .basic.button:active,
  3912. .ui.inverted.black.basic.button:active {
  3913. -webkit-box-shadow: 0 0 0 2px #000000 inset;
  3914. box-shadow: 0 0 0 2px #000000 inset;
  3915. color: #FFFFFF;
  3916. }
  3917. /* Tertiary */
  3918. .ui.tertiary.black.buttons .button,
  3919. .ui.tertiary.black.buttons .tertiary.button,
  3920. .ui.tertiary.black.button {
  3921. background: transparent;
  3922. -webkit-box-shadow: none;
  3923. box-shadow: none;
  3924. color: #1B1C1D;
  3925. }
  3926. .ui.tertiary.black.buttons .button:hover,
  3927. .ui.tertiary.black.buttons button:hover,
  3928. .ui.tertiary.black.button:hover {
  3929. -webkit-box-shadow: inset 0 -0.2em 0 #8b8f93;
  3930. box-shadow: inset 0 -0.2em 0 #8b8f93;
  3931. color: #8b8f93;
  3932. }
  3933. .ui.tertiary.black.buttons .button:focus,
  3934. .ui.tertiary.black.buttons .tertiary.button:focus,
  3935. .ui.tertiary.black.button:focus {
  3936. -webkit-box-shadow: inset 0 -0.2em 0 #93969a;
  3937. box-shadow: inset 0 -0.2em 0 #93969a;
  3938. color: #93969a;
  3939. }
  3940. .ui.tertiary.black.buttons .active.button,
  3941. .ui.tertiary.black.buttons .tertiary.active.button,
  3942. .ui.tertiary.black.active.button,
  3943. .ui.tertiary.black.buttons .button:active,
  3944. .ui.tertiary.black.buttons .tertiary.button:active,
  3945. .ui.tertiary.black.button:active {
  3946. -webkit-box-shadow: inset 0 -0.2em 0 #404245;
  3947. box-shadow: inset 0 -0.2em 0 #404245;
  3948. color: #0f0f10;
  3949. }
  3950. /*---------------
  3951. Positive
  3952. ----------------*/
  3953. /* Standard */
  3954. .ui.positive.buttons .button,
  3955. .ui.positive.button {
  3956. background-color: #21BA45;
  3957. color: #FFFFFF;
  3958. text-shadow: none;
  3959. background-image: none;
  3960. }
  3961. .ui.positive.button {
  3962. -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  3963. box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  3964. }
  3965. .ui.positive.buttons .button:hover,
  3966. .ui.positive.button:hover {
  3967. background-color: #16ab39;
  3968. color: #FFFFFF;
  3969. text-shadow: none;
  3970. }
  3971. .ui.positive.buttons .button:focus,
  3972. .ui.positive.button:focus {
  3973. background-color: #0ea432;
  3974. color: #FFFFFF;
  3975. text-shadow: none;
  3976. }
  3977. .ui.positive.buttons .button:active,
  3978. .ui.positive.button:active {
  3979. background-color: #198f35;
  3980. color: #FFFFFF;
  3981. text-shadow: none;
  3982. }
  3983. .ui.positive.buttons .active.button,
  3984. .ui.positive.buttons .active.button:active,
  3985. .ui.positive.active.button,
  3986. .ui.positive.button .active.button:active {
  3987. background-color: #13ae38;
  3988. color: #FFFFFF;
  3989. text-shadow: none;
  3990. }
  3991. /* Basic */
  3992. .ui.basic.positive.buttons .button,
  3993. .ui.basic.positive.button {
  3994. background: transparent;
  3995. -webkit-box-shadow: 0 0 0 1px #21BA45 inset;
  3996. box-shadow: 0 0 0 1px #21BA45 inset;
  3997. color: #21BA45;
  3998. }
  3999. .ui.basic.positive.buttons .button:hover,
  4000. .ui.basic.positive.button:hover {
  4001. background: transparent;
  4002. -webkit-box-shadow: 0 0 0 1px #16ab39 inset;
  4003. box-shadow: 0 0 0 1px #16ab39 inset;
  4004. color: #16ab39;
  4005. }
  4006. .ui.basic.positive.buttons .button:focus,
  4007. .ui.basic.positive.button:focus {
  4008. background: transparent;
  4009. -webkit-box-shadow: 0 0 0 1px #0ea432 inset;
  4010. box-shadow: 0 0 0 1px #0ea432 inset;
  4011. color: #16ab39;
  4012. }
  4013. .ui.basic.positive.buttons .active.button,
  4014. .ui.basic.positive.active.button {
  4015. background: transparent;
  4016. -webkit-box-shadow: 0 0 0 1px #13ae38 inset;
  4017. box-shadow: 0 0 0 1px #13ae38 inset;
  4018. color: #198f35;
  4019. }
  4020. .ui.basic.positive.buttons .button:active,
  4021. .ui.basic.positive.button:active {
  4022. -webkit-box-shadow: 0 0 0 1px #198f35 inset;
  4023. box-shadow: 0 0 0 1px #198f35 inset;
  4024. color: #198f35;
  4025. }
  4026. .ui.buttons:not(.vertical) > .basic.positive.button:not(:first-child) {
  4027. margin-left: -1px;
  4028. }
  4029. /*---------------
  4030. Negative
  4031. ----------------*/
  4032. /* Standard */
  4033. .ui.negative.buttons .button,
  4034. .ui.negative.button {
  4035. background-color: #DB2828;
  4036. color: #FFFFFF;
  4037. text-shadow: none;
  4038. background-image: none;
  4039. }
  4040. .ui.negative.button {
  4041. -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  4042. box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  4043. }
  4044. .ui.negative.buttons .button:hover,
  4045. .ui.negative.button:hover {
  4046. background-color: #d01919;
  4047. color: #FFFFFF;
  4048. text-shadow: none;
  4049. }
  4050. .ui.negative.buttons .button:focus,
  4051. .ui.negative.button:focus {
  4052. background-color: #ca1010;
  4053. color: #FFFFFF;
  4054. text-shadow: none;
  4055. }
  4056. .ui.negative.buttons .button:active,
  4057. .ui.negative.button:active {
  4058. background-color: #b21e1e;
  4059. color: #FFFFFF;
  4060. text-shadow: none;
  4061. }
  4062. .ui.negative.buttons .active.button,
  4063. .ui.negative.buttons .active.button:active,
  4064. .ui.negative.active.button,
  4065. .ui.negative.button .active.button:active {
  4066. background-color: #d41515;
  4067. color: #FFFFFF;
  4068. text-shadow: none;
  4069. }
  4070. /* Basic */
  4071. .ui.basic.negative.buttons .button,
  4072. .ui.basic.negative.button {
  4073. background: transparent;
  4074. -webkit-box-shadow: 0 0 0 1px #DB2828 inset;
  4075. box-shadow: 0 0 0 1px #DB2828 inset;
  4076. color: #DB2828;
  4077. }
  4078. .ui.basic.negative.buttons .button:hover,
  4079. .ui.basic.negative.button:hover {
  4080. background: transparent;
  4081. -webkit-box-shadow: 0 0 0 1px #d01919 inset;
  4082. box-shadow: 0 0 0 1px #d01919 inset;
  4083. color: #d01919;
  4084. }
  4085. .ui.basic.negative.buttons .button:focus,
  4086. .ui.basic.negative.button:focus {
  4087. background: transparent;
  4088. -webkit-box-shadow: 0 0 0 1px #ca1010 inset;
  4089. box-shadow: 0 0 0 1px #ca1010 inset;
  4090. color: #d01919;
  4091. }
  4092. .ui.basic.negative.buttons .active.button,
  4093. .ui.basic.negative.active.button {
  4094. background: transparent;
  4095. -webkit-box-shadow: 0 0 0 1px #d41515 inset;
  4096. box-shadow: 0 0 0 1px #d41515 inset;
  4097. color: #b21e1e;
  4098. }
  4099. .ui.basic.negative.buttons .button:active,
  4100. .ui.basic.negative.button:active {
  4101. -webkit-box-shadow: 0 0 0 1px #b21e1e inset;
  4102. box-shadow: 0 0 0 1px #b21e1e inset;
  4103. color: #b21e1e;
  4104. }
  4105. .ui.buttons:not(.vertical) > .basic.negative.button:not(:first-child) {
  4106. margin-left: -1px;
  4107. }
  4108. /*******************************
  4109. Groups
  4110. *******************************/
  4111. .ui.buttons {
  4112. display: -webkit-inline-box;
  4113. display: -ms-inline-flexbox;
  4114. display: inline-flex;
  4115. -webkit-box-orient: horizontal;
  4116. -webkit-box-direction: normal;
  4117. -ms-flex-direction: row;
  4118. flex-direction: row;
  4119. font-size: 0;
  4120. vertical-align: baseline;
  4121. margin: 0 0.25em 0 0;
  4122. }
  4123. .ui.buttons:not(.basic):not(.inverted) {
  4124. -webkit-box-shadow: none;
  4125. box-shadow: none;
  4126. }
  4127. /* Clearfix */
  4128. .ui.buttons:after {
  4129. content: ".";
  4130. display: block;
  4131. height: 0;
  4132. clear: both;
  4133. visibility: hidden;
  4134. }
  4135. /* Standard Group */
  4136. .ui.buttons .button {
  4137. -webkit-box-flex: 1;
  4138. -ms-flex: 1 0 auto;
  4139. flex: 1 0 auto;
  4140. border-radius: 0;
  4141. margin: 0 0 0 0;
  4142. }
  4143. .ui.buttons:not(.basic):not(.inverted) > .button:not(.basic):not(.inverted) {
  4144. -webkit-box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  4145. box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
  4146. }
  4147. .ui.buttons .button:first-child {
  4148. border-left: none;
  4149. margin-left: 0;
  4150. border-top-left-radius: 0.28571429rem;
  4151. border-bottom-left-radius: 0.28571429rem;
  4152. }
  4153. .ui.buttons .button:last-child {
  4154. border-top-right-radius: 0.28571429rem;
  4155. border-bottom-right-radius: 0.28571429rem;
  4156. }
  4157. /* Vertical Style */
  4158. .ui.vertical.buttons {
  4159. display: -webkit-inline-box;
  4160. display: -ms-inline-flexbox;
  4161. display: inline-flex;
  4162. -webkit-box-orient: vertical;
  4163. -webkit-box-direction: normal;
  4164. -ms-flex-direction: column;
  4165. flex-direction: column;
  4166. }
  4167. .ui.vertical.buttons .button {
  4168. display: block;
  4169. float: none;
  4170. width: 100%;
  4171. margin: 0 0 0 0;
  4172. -webkit-box-shadow: none;
  4173. box-shadow: none;
  4174. border-radius: 0;
  4175. }
  4176. .ui.vertical.buttons .button:first-child {
  4177. border-top-left-radius: 0.28571429rem;
  4178. border-top-right-radius: 0.28571429rem;
  4179. }
  4180. .ui.vertical.buttons .button:last-child {
  4181. margin-bottom: 0;
  4182. border-bottom-left-radius: 0.28571429rem;
  4183. border-bottom-right-radius: 0.28571429rem;
  4184. }
  4185. .ui.vertical.buttons .button:only-child {
  4186. border-radius: 0.28571429rem;
  4187. }
  4188. /*******************************
  4189. Theme Overrides
  4190. *******************************/
  4191. /*******************************
  4192. Site Overrides
  4193. *******************************/