1
0

button.css 118 KB

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