You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

3237 lines
82 KiB

  1. /*!
  2. * # Semantic UI 2.0.0 - Button
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Copyright 2015 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Button
  13. *******************************/
  14. .ui.button {
  15. cursor: pointer;
  16. display: inline-block;
  17. min-height: 1em;
  18. outline: none;
  19. border: none;
  20. vertical-align: baseline;
  21. background: #e0e1e2 none;
  22. color: rgba(0, 0, 0, 0.6);
  23. font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  24. margin: 0em 0.25em 0em 0em;
  25. padding: 0.78571429em 1.5em 0.78571429em;
  26. text-transform: none;
  27. text-shadow: none;
  28. font-weight: bold;
  29. line-height: 1em;
  30. font-style: normal;
  31. text-align: center;
  32. text-decoration: none;
  33. border-radius: 0.28571429rem;
  34. box-shadow: 0px 0px 0px 1px transparent inset, 0px 0em 0px 0px 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, box-shadow 0.1s ease, background 0.1s ease;
  40. transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
  41. will-change: '';
  42. -webkit-tap-highlight-color: transparent;
  43. }
  44. /*******************************
  45. States
  46. *******************************/
  47. /*--------------
  48. Hover
  49. ---------------*/
  50. .ui.button:hover {
  51. background-color: #cacbcd;
  52. background-image: none;
  53. box-shadow: 0px 0px 0px 1px transparent inset, 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
  54. color: rgba(0, 0, 0, 0.8);
  55. }
  56. .ui.button:hover .icon {
  57. opacity: 0.85;
  58. }
  59. /*--------------
  60. Focus
  61. ---------------*/
  62. .ui.button:focus {
  63. background-color: #cacbcd;
  64. color: rgba(0, 0, 0, 0.8);
  65. background-image: '' !important;
  66. box-shadow: '' !important;
  67. }
  68. .ui.button:focus .icon {
  69. opacity: 0.85;
  70. }
  71. /*--------------
  72. Down
  73. ---------------*/
  74. .ui.button:active,
  75. .ui.active.button:active {
  76. background-color: #babbbc;
  77. background-image: '';
  78. color: rgba(0, 0, 0, 0.9);
  79. box-shadow: 0px 0px 0px 1px transparent inset, none;
  80. }
  81. /*--------------
  82. Active
  83. ---------------*/
  84. .ui.active.button {
  85. background-color: #c0c1c2;
  86. background-image: none;
  87. box-shadow: 0px 0px 0px 1px transparent inset;
  88. color: rgba(0, 0, 0, 0.95);
  89. }
  90. .ui.active.button:hover {
  91. background-color: #c0c1c2;
  92. background-image: none;
  93. color: rgba(0, 0, 0, 0.95);
  94. }
  95. .ui.active.button:active {
  96. background-color: #c0c1c2;
  97. background-image: none;
  98. }
  99. /*--------------
  100. Loading
  101. ---------------*/
  102. /* Specificity hack */
  103. .ui.loading.loading.loading.loading.loading.loading.button {
  104. position: relative;
  105. cursor: default;
  106. text-shadow: none !important;
  107. color: transparent !important;
  108. opacity: 1;
  109. pointer-events: auto;
  110. -webkit-transition: all 0s linear, opacity 0.1s ease;
  111. transition: all 0s linear, opacity 0.1s ease;
  112. }
  113. .ui.loading.button:before {
  114. position: absolute;
  115. content: '';
  116. top: 50%;
  117. left: 50%;
  118. margin: -0.64285714em 0em 0em -0.64285714em;
  119. width: 1.28571429em;
  120. height: 1.28571429em;
  121. border-radius: 500rem;
  122. border: 0.2em solid rgba(0, 0, 0, 0.15);
  123. }
  124. .ui.loading.button:after {
  125. position: absolute;
  126. content: '';
  127. top: 50%;
  128. left: 50%;
  129. margin: -0.64285714em 0em 0em -0.64285714em;
  130. width: 1.28571429em;
  131. height: 1.28571429em;
  132. -webkit-animation: button-spin 0.6s linear;
  133. animation: button-spin 0.6s linear;
  134. -webkit-animation-iteration-count: infinite;
  135. animation-iteration-count: infinite;
  136. border-radius: 500rem;
  137. border-color: #ffffff transparent transparent;
  138. border-style: solid;
  139. border-width: 0.2em;
  140. box-shadow: 0px 0px 0px 1px transparent;
  141. }
  142. .ui.labeled.icon.loading.button .icon {
  143. background-color: transparent;
  144. box-shadow: none;
  145. }
  146. @-webkit-keyframes button-spin {
  147. from {
  148. -webkit-transform: rotate(0deg);
  149. transform: rotate(0deg);
  150. }
  151. to {
  152. -webkit-transform: rotate(360deg);
  153. transform: rotate(360deg);
  154. }
  155. }
  156. @keyframes button-spin {
  157. from {
  158. -webkit-transform: rotate(0deg);
  159. transform: rotate(0deg);
  160. }
  161. to {
  162. -webkit-transform: rotate(360deg);
  163. transform: rotate(360deg);
  164. }
  165. }
  166. .ui.basic.loading.button:not(.inverted):before {
  167. border-color: rgba(0, 0, 0, 0.1);
  168. }
  169. .ui.basic.loading.button:not(.inverted):after {
  170. border-top-color: #767676;
  171. }
  172. /*-------------------
  173. Disabled
  174. --------------------*/
  175. .ui.buttons .disabled.button,
  176. .ui.disabled.button,
  177. .ui.button:disabled,
  178. .ui.disabled.button:hover,
  179. .ui.disabled.active.button {
  180. cursor: default;
  181. opacity: 0.45 !important;
  182. background-image: none !important;
  183. box-shadow: none !important;
  184. pointer-events: none;
  185. }
  186. /* Basic Group With Disabled */
  187. .ui.basic.buttons .ui.disabled.button {
  188. border-color: rgba(34, 36, 38, 0.5);
  189. }
  190. /*******************************
  191. Types
  192. *******************************/
  193. /*-------------------
  194. Animated
  195. --------------------*/
  196. .ui.animated.button {
  197. position: relative;
  198. overflow: hidden;
  199. padding-right: 0em !important;
  200. vertical-align: middle;
  201. z-index: 1;
  202. }
  203. .ui.animated.button .content {
  204. will-change: transform, opacity;
  205. }
  206. .ui.animated.button .visible.content {
  207. position: relative;
  208. margin-right: 1.5em;
  209. }
  210. .ui.animated.button .hidden.content {
  211. position: absolute;
  212. width: 100%;
  213. }
  214. /* Horizontal */
  215. .ui.animated.button .visible.content,
  216. .ui.animated.button .hidden.content {
  217. -webkit-transition: right 0.3s ease 0s;
  218. transition: right 0.3s ease 0s;
  219. }
  220. .ui.animated.button .visible.content {
  221. left: auto;
  222. right: 0%;
  223. }
  224. .ui.animated.button .hidden.content {
  225. top: 50%;
  226. left: auto;
  227. right: -100%;
  228. margin-top: -0.5em;
  229. }
  230. .ui.animated.button:focus .visible.content,
  231. .ui.animated.button:hover .visible.content {
  232. left: auto;
  233. right: 200%;
  234. }
  235. .ui.animated.button:focus .hidden.content,
  236. .ui.animated.button:hover .hidden.content {
  237. left: auto;
  238. right: 0%;
  239. }
  240. /* Vertical */
  241. .ui.vertical.animated.button .visible.content,
  242. .ui.vertical.animated.button .hidden.content {
  243. -webkit-transition: top 0.3s ease, -webkit-transform 0.3s ease;
  244. transition: top 0.3s ease, transform 0.3s ease;
  245. }
  246. .ui.vertical.animated.button .visible.content {
  247. -webkit-transform: translateY(0%);
  248. -ms-transform: translateY(0%);
  249. transform: translateY(0%);
  250. right: auto;
  251. }
  252. .ui.vertical.animated.button .hidden.content {
  253. top: -50%;
  254. left: 0%;
  255. right: auto;
  256. }
  257. .ui.vertical.animated.button:focus .visible.content,
  258. .ui.vertical.animated.button:hover .visible.content {
  259. -webkit-transform: translateY(200%);
  260. -ms-transform: translateY(200%);
  261. transform: translateY(200%);
  262. right: auto;
  263. }
  264. .ui.vertical.animated.button:focus .hidden.content,
  265. .ui.vertical.animated.button:hover .hidden.content {
  266. top: 50%;
  267. right: auto;
  268. }
  269. /* Fade */
  270. .ui.fade.animated.button .visible.content,
  271. .ui.fade.animated.button .hidden.content {
  272. -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
  273. transition: opacity 0.3s ease, transform 0.3s ease;
  274. }
  275. .ui.fade.animated.button .visible.content {
  276. left: auto;
  277. right: auto;
  278. opacity: 1;
  279. -webkit-transform: scale(1);
  280. -ms-transform: scale(1);
  281. transform: scale(1);
  282. }
  283. .ui.fade.animated.button .hidden.content {
  284. opacity: 0;
  285. left: 0%;
  286. right: auto;
  287. -webkit-transform: scale(1.5);
  288. -ms-transform: scale(1.5);
  289. transform: scale(1.5);
  290. }
  291. .ui.fade.animated.button:focus .visible.content,
  292. .ui.fade.animated.button:hover .visible.content {
  293. left: auto;
  294. right: auto;
  295. opacity: 0;
  296. -webkit-transform: scale(0.75);
  297. -ms-transform: scale(0.75);
  298. transform: scale(0.75);
  299. }
  300. .ui.fade.animated.button:focus .hidden.content,
  301. .ui.fade.animated.button:hover .hidden.content {
  302. left: 0%;
  303. right: auto;
  304. opacity: 1;
  305. -webkit-transform: scale(1);
  306. -ms-transform: scale(1);
  307. transform: scale(1);
  308. }
  309. /*-------------------
  310. Inverted
  311. --------------------*/
  312. .ui.inverted.button {
  313. box-shadow: 0px 0px 0px 2px #ffffff inset !important;
  314. background: transparent none;
  315. color: #ffffff;
  316. text-shadow: none !important;
  317. }
  318. /* Group */
  319. .ui.inverted.buttons .button {
  320. margin: 0px 0px 0px -2px;
  321. }
  322. .ui.inverted.buttons .button:first-child {
  323. margin-left: 0em;
  324. }
  325. .ui.inverted.vertical.buttons .button {
  326. margin: 0px 0px -2px 0px;
  327. }
  328. .ui.inverted.vertical.buttons .button:first-child {
  329. margin-top: 0em;
  330. }
  331. /* States */
  332. .ui.inverted.button:hover {
  333. background: #ffffff;
  334. box-shadow: 0px 0px 0px 2px #ffffff inset !important;
  335. color: rgba(0, 0, 0, 0.8);
  336. }
  337. .ui.inverted.button:focus {
  338. background: #ffffff;
  339. box-shadow: 0px 0px 0px 2px #ffffff inset !important;
  340. color: rgba(0, 0, 0, 0.8);
  341. }
  342. /*-------------------
  343. Social
  344. --------------------*/
  345. /* Facebook */
  346. .ui.facebook.button {
  347. background-color: #3b5998;
  348. color: #ffffff;
  349. text-shadow: none;
  350. background-image: none;
  351. box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
  352. }
  353. .ui.facebook.button:hover {
  354. background-color: #304d8a;
  355. color: #ffffff;
  356. text-shadow: none;
  357. }
  358. .ui.facebook.button:active {
  359. background-color: #2d4373;
  360. color: #ffffff;
  361. text-shadow: none;
  362. }
  363. /* Twitter */
  364. .ui.twitter.button {
  365. background-color: #0084b4;
  366. color: #ffffff;
  367. text-shadow: none;
  368. background-image: none;
  369. box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
  370. }
  371. .ui.twitter.button:hover {
  372. background-color: #00719b;
  373. color: #ffffff;
  374. text-shadow: none;
  375. }
  376. .ui.twitter.button:active {
  377. background-color: #005f81;
  378. color: #ffffff;
  379. text-shadow: none;
  380. }
  381. /* Google Plus */
  382. .ui.google.plus.button {
  383. background-color: #dc4a38;
  384. color: #ffffff;
  385. text-shadow: none;
  386. background-image: none;
  387. box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
  388. }
  389. .ui.google.plus.button:hover {
  390. background-color: #de321d;
  391. color: #ffffff;
  392. text-shadow: none;
  393. }
  394. .ui.google.plus.button:active {
  395. background-color: #bf3322;
  396. color: #ffffff;
  397. text-shadow: none;
  398. }
  399. /* Linked In */
  400. .ui.linkedin.button {
  401. background-color: #1f88be;
  402. color: #ffffff;
  403. text-shadow: none;
  404. }
  405. .ui.linkedin.button:hover {
  406. background-color: #147baf;
  407. color: #ffffff;
  408. text-shadow: none;
  409. }
  410. .ui.linkedin.button:active {
  411. background-color: #186992;
  412. color: #ffffff;
  413. text-shadow: none;
  414. }
  415. /* YouTube */
  416. .ui.youtube.button {
  417. background-color: #cc181e;
  418. color: #ffffff;
  419. text-shadow: none;
  420. background-image: none;
  421. box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
  422. }
  423. .ui.youtube.button:hover {
  424. background-color: #bd0d13;
  425. color: #ffffff;
  426. text-shadow: none;
  427. }
  428. .ui.youtube.button:active {
  429. background-color: #9e1317;
  430. color: #ffffff;
  431. text-shadow: none;
  432. }
  433. /* Instagram */
  434. .ui.instagram.button {
  435. background-color: #49769c;
  436. color: #ffffff;
  437. text-shadow: none;
  438. background-image: none;
  439. box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
  440. }
  441. .ui.instagram.button:hover {
  442. background-color: #3d698e;
  443. color: #ffffff;
  444. text-shadow: none;
  445. }
  446. .ui.instagram.button:active {
  447. background-color: #395c79;
  448. color: #ffffff;
  449. text-shadow: none;
  450. }
  451. /* Pinterest */
  452. .ui.pinterest.button {
  453. background-color: #00aced;
  454. color: #ffffff;
  455. text-shadow: none;
  456. background-image: none;
  457. box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
  458. }
  459. .ui.pinterest.button:hover {
  460. background-color: #0099d4;
  461. color: #ffffff;
  462. text-shadow: none;
  463. }
  464. .ui.pinterest.button:active {
  465. background-color: #0087ba;
  466. color: #ffffff;
  467. text-shadow: none;
  468. }
  469. /* VK */
  470. .ui.vk.button {
  471. background-color: #4D7198;
  472. color: #ffffff;
  473. background-image: none;
  474. box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
  475. }
  476. .ui.vk.button:hover {
  477. background-color: #41648a;
  478. color: #ffffff;
  479. }
  480. .ui.vk.button:active {
  481. background-color: #3c5876;
  482. color: #ffffff;
  483. }
  484. /*--------------
  485. Icon
  486. ---------------*/
  487. .ui.button > .icon {
  488. height: 0.92857143em;
  489. opacity: 0.8;
  490. margin: 0em 0.42857143em 0em -0.21428571em;
  491. -webkit-transition: opacity 0.1s ease;
  492. transition: opacity 0.1s ease;
  493. vertical-align: '';
  494. color: '';
  495. }
  496. .ui.button > .right.icon {
  497. margin: 0em -0.21428571em 0em 0.42857143em;
  498. }
  499. /*******************************
  500. Variations
  501. *******************************/
  502. /*-------------------
  503. Floated
  504. --------------------*/
  505. .ui[class*="left floated"].buttons,
  506. .ui[class*="left floated"].button {
  507. float: left;
  508. margin-left: 0em;
  509. margin-right: 0.25em;
  510. }
  511. .ui[class*="right floated"].buttons,
  512. .ui[class*="right floated"].button {
  513. float: right;
  514. margin-right: 0em;
  515. margin-left: 0.25em;
  516. }
  517. /*-------------------
  518. Compact
  519. --------------------*/
  520. .ui.compact.buttons .button,
  521. .ui.compact.button {
  522. padding: 0.58928571em 1.125em 0.58928571em;
  523. }
  524. .ui.compact.icon.buttons .button,
  525. .ui.compact.icon.button {
  526. padding: 0.58928571em 0.58928571em 0.58928571em;
  527. }
  528. .ui.compact.labeled.icon.buttons .button,
  529. .ui.compact.labeled.icon.button {
  530. padding: 0.58928571em 3.69642857em 0.58928571em;
  531. }
  532. /*-------------------
  533. Sizes
  534. --------------------*/
  535. .ui.mini.buttons .button,
  536. .ui.mini.buttons .or,
  537. .ui.mini.button {
  538. font-size: 0.71428571rem;
  539. }
  540. .ui.tiny.buttons .button,
  541. .ui.tiny.buttons .or,
  542. .ui.tiny.button {
  543. font-size: 0.85714286rem;
  544. }
  545. .ui.small.buttons .button,
  546. .ui.small.buttons .or,
  547. .ui.small.button {
  548. font-size: 0.92857143rem;
  549. }
  550. .ui.buttons .button,
  551. .ui.buttons .or,
  552. .ui.button {
  553. font-size: 1rem;
  554. }
  555. .ui.large.buttons .button,
  556. .ui.large.buttons .or,
  557. .ui.large.button {
  558. font-size: 1.14285714rem;
  559. }
  560. .ui.big.buttons .button,
  561. .ui.big.buttons .or,
  562. .ui.big.button {
  563. font-size: 1.28571429rem;
  564. }
  565. .ui.huge.buttons .button,
  566. .ui.huge.buttons .or,
  567. .ui.huge.button {
  568. font-size: 1.42857143rem;
  569. }
  570. .ui.massive.buttons .button,
  571. .ui.massive.buttons .or,
  572. .ui.massive.button {
  573. font-size: 1.71428571rem;
  574. }
  575. /*--------------
  576. Icon Only
  577. ---------------*/
  578. .ui.icon.buttons .button,
  579. .ui.icon.button {
  580. padding: 0.78571429em 0.78571429em 0.78571429em;
  581. }
  582. .ui.icon.buttons .button > .icon,
  583. .ui.icon.button > .icon {
  584. opacity: 0.9;
  585. margin: 0em;
  586. vertical-align: top;
  587. }
  588. /*-------------------
  589. Basic
  590. --------------------*/
  591. .ui.basic.buttons .button,
  592. .ui.basic.button {
  593. background: transparent none !important;
  594. color: rgba(0, 0, 0, 0.6) !important;
  595. font-weight: normal;
  596. border-radius: 0.28571429rem;
  597. text-transform: none;
  598. text-shadow: none !important;
  599. box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset;
  600. }
  601. .ui.basic.buttons {
  602. box-shadow: none;
  603. border: 1px solid rgba(34, 36, 38, 0.15);
  604. border-radius: 0.28571429rem;
  605. }
  606. .ui.basic.buttons .button {
  607. border-radius: 0em;
  608. }
  609. .ui.basic.buttons .button:hover,
  610. .ui.basic.button:hover {
  611. background: #ffffff !important;
  612. color: rgba(0, 0, 0, 0.8) !important;
  613. box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.35) inset, 0px 0px 0px 0px rgba(34, 36, 38, 0.15) inset;
  614. }
  615. .ui.basic.buttons .button:focus,
  616. .ui.basic.button:focus {
  617. background: #ffffff !important;
  618. color: rgba(0, 0, 0, 0.8) !important;
  619. box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.35) inset, 0px 0px 0px 0px rgba(34, 36, 38, 0.15) inset;
  620. }
  621. .ui.basic.buttons .button:active,
  622. .ui.basic.button:active {
  623. background: #f8f8f8 !important;
  624. color: rgba(0, 0, 0, 0.9) !important;
  625. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset, 0px 1px 4px 0px rgba(34, 36, 38, 0.15) inset;
  626. }
  627. .ui.basic.buttons .active.button,
  628. .ui.basic.active.button {
  629. background: rgba(0, 0, 0, 0.05) !important;
  630. box-shadow: '' !important;
  631. color: rgba(0, 0, 0, 0.95);
  632. box-shadow: rgba(34, 36, 38, 0.35);
  633. }
  634. .ui.basic.buttons .active.button:hover,
  635. .ui.basic.active.button:hover {
  636. background-color: rgba(0, 0, 0, 0.05);
  637. }
  638. /* Vertical */
  639. .ui.basic.buttons .button:hover {
  640. box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.35) inset, 0px 0px 0px 0px rgba(34, 36, 38, 0.15) inset inset;
  641. }
  642. .ui.basic.buttons .button:active {
  643. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset, 0px 1px 4px 0px rgba(34, 36, 38, 0.15) inset inset;
  644. }
  645. .ui.basic.buttons .active.button {
  646. box-shadow: rgba(34, 36, 38, 0.35) inset;
  647. }
  648. /* Standard Basic Inverted */
  649. .ui.basic.inverted.buttons .button,
  650. .ui.basic.inverted.button {
  651. background-color: transparent !important;
  652. color: #f9fafb !important;
  653. box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
  654. }
  655. .ui.basic.inverted.buttons .button:hover,
  656. .ui.basic.inverted.button:hover {
  657. color: #ffffff !important;
  658. box-shadow: 0px 0px 0px 2px #ffffff inset !important;
  659. }
  660. .ui.basic.inverted.buttons .button:focus,
  661. .ui.basic.inverted.button:focus {
  662. color: #ffffff !important;
  663. box-shadow: 0px 0px 0px 2px #ffffff inset !important;
  664. }
  665. .ui.basic.inverted.buttons .button:active,
  666. .ui.basic.inverted.button:active {
  667. background-color: rgba(255, 255, 255, 0.08) !important;
  668. color: #ffffff !important;
  669. box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.9) inset !important;
  670. }
  671. .ui.basic.inverted.buttons .active.button,
  672. .ui.basic.inverted.active.button {
  673. background-color: rgba(255, 255, 255, 0.08);
  674. color: #ffffff;
  675. text-shadow: none;
  676. box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.7) inset;
  677. }
  678. .ui.basic.inverted.buttons .active.button:hover,
  679. .ui.basic.inverted.active.button:hover {
  680. background-color: rgba(255, 255, 255, 0.15);
  681. box-shadow: 0px 0px 0px 2px #ffffff inset !important;
  682. }
  683. /* Basic Group */
  684. .ui.basic.buttons .button {
  685. border-left: 1px solid rgba(34, 36, 38, 0.15);
  686. box-shadow: none;
  687. }
  688. .ui.basic.vertical.buttons .button {
  689. border-left: none;
  690. }
  691. .ui.basic.vertical.buttons .button {
  692. border-left-width: 0px;
  693. border-top: 1px solid rgba(34, 36, 38, 0.15);
  694. }
  695. .ui.basic.vertical.buttons .button:first-child {
  696. border-top-width: 0px;
  697. }
  698. /*--------------
  699. Labeled Icon
  700. ---------------*/
  701. .ui.labeled.icon.buttons .button,
  702. .ui.labeled.icon.button {
  703. position: relative;
  704. padding-left: 4.07142857em !important;
  705. padding-right: 1.5em !important;
  706. }
  707. /* Left Labeled */
  708. .ui.labeled.icon.buttons > .button > .icon,
  709. .ui.labeled.icon.button > .icon {
  710. position: absolute;
  711. height: 100%;
  712. line-height: 1;
  713. width: 2.57142857em;
  714. background-color: rgba(0, 0, 0, 0.05);
  715. text-align: center;
  716. color: '';
  717. border-radius: 0.28571429rem 0px 0px 0.28571429rem;
  718. box-shadow: -1px 0px 0px 0px transparent inset;
  719. }
  720. /* Left Labeled */
  721. .ui.labeled.icon.buttons > .button > .icon,
  722. .ui.labeled.icon.button > .icon {
  723. top: 0em;
  724. left: 0em;
  725. }
  726. /* Right Labeled */
  727. .ui[class*="right labeled"].icon.button {
  728. padding-right: 4.07142857em !important;
  729. padding-left: 1.5em !important;
  730. }
  731. .ui[class*="right labeled"].icon.button > .icon {
  732. left: auto;
  733. right: 0em;
  734. border-radius: 0em 0.28571429rem 0.28571429rem 0em;
  735. box-shadow: 1px 0px 0px 0px transparent inset;
  736. }
  737. .ui.labeled.icon.buttons > .button > .icon:before,
  738. .ui.labeled.icon.button > .icon:before,
  739. .ui.labeled.icon.buttons > .button > .icon:after,
  740. .ui.labeled.icon.button > .icon:after {
  741. display: block;
  742. position: absolute;
  743. width: 100%;
  744. top: 50%;
  745. text-align: center;
  746. margin-top: -0.5em;
  747. }
  748. .ui.labeled.icon.buttons .button > .icon {
  749. border-radius: 0em;
  750. }
  751. .ui.labeled.icon.buttons .button:first-child > .icon {
  752. border-top-left-radius: 0.28571429rem;
  753. border-bottom-left-radius: 0.28571429rem;
  754. }
  755. .ui.labeled.icon.buttons .button:last-child > .icon {
  756. border-top-right-radius: 0.28571429rem;
  757. border-bottom-right-radius: 0.28571429rem;
  758. }
  759. .ui.vertical.labeled.icon.buttons .button:first-child > .icon {
  760. border-radius: 0em;
  761. border-top-left-radius: 0.28571429rem;
  762. }
  763. .ui.vertical.labeled.icon.buttons .button:last-child > .icon {
  764. border-radius: 0em;
  765. border-bottom-left-radius: 0.28571429rem;
  766. }
  767. /* Fluid Labeled */
  768. .ui.fluid[class*="left labeled"].icon.button,
  769. .ui.fluid[class*="right labeled"].icon.button {
  770. padding-left: 1.5em !important;
  771. padding-right: 1.5em !important;
  772. }
  773. /*--------------
  774. Toggle
  775. ---------------*/
  776. /* Toggle (Modifies active state to give affordances) */
  777. .ui.toggle.buttons .active.button,
  778. .ui.buttons .button.toggle.active,
  779. .ui.button.toggle.active {
  780. background-color: #21ba45 !important;
  781. box-shadow: none !important;
  782. text-shadow: none;
  783. color: #ffffff !important;
  784. }
  785. .ui.button.toggle.active:hover {
  786. background-color: #16ab39 !important;
  787. text-shadow: none;
  788. color: #ffffff !important;
  789. }
  790. /*--------------
  791. Circular
  792. ---------------*/
  793. .ui.circular.button {
  794. border-radius: 10em;
  795. }
  796. .ui.circular.button > .icon {
  797. width: 1em;
  798. vertical-align: baseline;
  799. }
  800. /*-------------------
  801. Or Buttons
  802. --------------------*/
  803. .ui.buttons .or {
  804. position: relative;
  805. width: 0.3em;
  806. height: 2.57142857em;
  807. z-index: 3;
  808. }
  809. .ui.buttons .or:before {
  810. position: absolute;
  811. text-align: center;
  812. border-radius: 500rem;
  813. content: 'or';
  814. top: 50%;
  815. left: 50%;
  816. background-color: #ffffff;
  817. text-shadow: none;
  818. margin-top: -0.89285714em;
  819. margin-left: -0.89285714em;
  820. width: 1.78571429em;
  821. height: 1.78571429em;
  822. line-height: 1.78571429em;
  823. color: rgba(0, 0, 0, 0.4);
  824. font-style: normal;
  825. font-weight: bold;
  826. box-shadow: 0px 0px 0px 1px transparent inset;
  827. }
  828. .ui.buttons .or[data-text]:before {
  829. content: attr(data-text);
  830. }
  831. /* Fluid Or */
  832. .ui.fluid.buttons .or {
  833. width: 0em !important;
  834. }
  835. .ui.fluid.buttons .or:after {
  836. display: none;
  837. }
  838. /*-------------------
  839. Attached
  840. --------------------*/
  841. /* Singular */
  842. .ui.attached.button {
  843. position: relative;
  844. display: block;
  845. margin: 0em;
  846. border-radius: 0em;
  847. box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) !important;
  848. }
  849. /* Top / Bottom */
  850. .ui.attached.top.button {
  851. border-radius: 0.28571429rem 0.28571429rem 0em 0em;
  852. }
  853. .ui.attached.bottom.button {
  854. border-radius: 0em 0em 0.28571429rem 0.28571429rem;
  855. }
  856. /* Left / Right */
  857. .ui.left.attached.button {
  858. display: inline-block;
  859. border-left: none;
  860. text-align: right;
  861. padding-right: 0.75em;
  862. border-radius: 0.28571429rem 0em 0em 0.28571429rem;
  863. }
  864. .ui.right.attached.button {
  865. display: inline-block;
  866. text-align: left;
  867. padding-left: 0.75em;
  868. border-radius: 0em 0.28571429rem 0.28571429rem 0em;
  869. }
  870. /* Plural */
  871. .ui.attached.buttons {
  872. position: relative;
  873. display: -webkit-box;
  874. display: -webkit-flex;
  875. display: -ms-flexbox;
  876. display: flex;
  877. border-radius: 0em;
  878. width: auto !important;
  879. z-index: 2;
  880. margin-left: -1px;
  881. margin-right: -1px;
  882. }
  883. .ui.attached.buttons .button {
  884. margin: 0em;
  885. }
  886. .ui.attached.buttons .button:first-child {
  887. border-radius: 0em;
  888. }
  889. .ui.attached.buttons .button:last-child {
  890. border-radius: 0em;
  891. }
  892. /* Top / Bottom */
  893. .ui[class*="top attached"].buttons {
  894. margin-bottom: -1px;
  895. border-radius: 0.28571429rem 0.28571429rem 0em 0em;
  896. }
  897. .ui[class*="top attached"].buttons .button:first-child {
  898. border-radius: 0.28571429rem 0em 0em 0em;
  899. }
  900. .ui[class*="top attached"].buttons .button:last-child {
  901. border-radius: 0em 0.28571429rem 0em 0em;
  902. }
  903. .ui[class*="bottom attached"].buttons {
  904. margin-top: -1px;
  905. border-radius: 0em 0em 0.28571429rem 0.28571429rem;
  906. }
  907. .ui[class*="bottom attached"].buttons .button:first-child {
  908. border-radius: 0em 0em 0em 0.28571429rem;
  909. }
  910. .ui[class*="bottom attached"].buttons .button:last-child {
  911. border-radius: 0em 0em 0.28571429rem 0em;
  912. }
  913. /* Left / Right */
  914. .ui[class*="left attached"].buttons {
  915. display: -webkit-inline-box;
  916. display: -webkit-inline-flex;
  917. display: -ms-inline-flexbox;
  918. display: inline-flex;
  919. margin-right: 0em;
  920. margin-left: -1px;
  921. border-radius: 0em 0.28571429rem 0.28571429rem 0em;
  922. }
  923. .ui[class*="left attached"].buttons .button:first-child {
  924. margin-left: -1px;
  925. border-radius: 0em 0.28571429rem 0em 0em;
  926. }
  927. .ui[class*="left attached"].buttons .button:last-child {
  928. margin-left: -1px;
  929. border-radius: 0em 0em 0.28571429rem 0em;
  930. }
  931. .ui[class*="right attached"].buttons {
  932. display: -webkit-inline-box;
  933. display: -webkit-inline-flex;
  934. display: -ms-inline-flexbox;
  935. display: inline-flex;
  936. margin-left: 0em;
  937. margin-right: -1px;
  938. border-radius: 0.28571429rem 0em 0em 0.28571429rem;
  939. }
  940. .ui[class*="right attached"].buttons .button:first-child {
  941. margin-left: -1px;
  942. border-radius: 0.28571429rem 0em 0em 0em;
  943. }
  944. .ui[class*="right attached"].buttons .button:last-child {
  945. margin-left: -1px;
  946. border-radius: 0em 0em 0em 0.28571429rem;
  947. }
  948. /*-------------------
  949. Fluid
  950. --------------------*/
  951. .ui.fluid.buttons,
  952. .ui.button.fluid {
  953. display: -webkit-box;
  954. display: -webkit-flex;
  955. display: -ms-flexbox;
  956. display: flex;
  957. -webkit-box-pack: center;
  958. -webkit-justify-content: center;
  959. -ms-flex-pack: center;
  960. justify-content: center;
  961. -webkit-box-orient: horizontal;
  962. -webkit-box-direction: normal;
  963. -webkit-flex-direction: row;
  964. -ms-flex-direction: row;
  965. flex-direction: row;
  966. width: 100%;
  967. }
  968. .ui.two.buttons {
  969. width: 100%;
  970. }
  971. .ui.two.buttons > .button {
  972. width: 50%;
  973. }
  974. .ui.three.buttons {
  975. width: 100%;
  976. }
  977. .ui.three.buttons > .button {
  978. width: 33.333%;
  979. }
  980. .ui.four.buttons {
  981. width: 100%;
  982. }
  983. .ui.four.buttons > .button {
  984. width: 25%;
  985. }
  986. .ui.five.buttons {
  987. width: 100%;
  988. }
  989. .ui.five.buttons > .button {
  990. width: 20%;
  991. }
  992. .ui.six.buttons {
  993. width: 100%;
  994. }
  995. .ui.six.buttons > .button {
  996. width: 16.666%;
  997. }
  998. .ui.seven.buttons {
  999. width: 100%;
  1000. }
  1001. .ui.seven.buttons > .button {
  1002. width: 14.285%;
  1003. }
  1004. .ui.eight.buttons {
  1005. width: 100%;
  1006. }
  1007. .ui.eight.buttons > .button {
  1008. width: 12.500%;
  1009. }
  1010. .ui.nine.buttons {
  1011. width: 100%;
  1012. }
  1013. .ui.nine.buttons > .button {
  1014. width: 11.11%;
  1015. }
  1016. .ui.ten.buttons {
  1017. width: 100%;
  1018. }
  1019. .ui.ten.buttons > .button {
  1020. width: 10%;
  1021. }
  1022. .ui.eleven.buttons {
  1023. width: 100%;
  1024. }
  1025. .ui.eleven.buttons > .button {
  1026. width: 9.09%;
  1027. }
  1028. .ui.twelve.buttons {
  1029. width: 100%;
  1030. }
  1031. .ui.twelve.buttons > .button {
  1032. width: 8.3333%;
  1033. }
  1034. /* Fluid Vertical Buttons */
  1035. .ui.fluid.vertical.buttons,
  1036. .ui.fluid.vertical.buttons > .button {
  1037. display: -webkit-box;
  1038. display: -webkit-flex;
  1039. display: -ms-flexbox;
  1040. display: flex;
  1041. width: auto;
  1042. }
  1043. .ui.two.vertical.buttons > .button {
  1044. height: 50%;
  1045. }
  1046. .ui.three.vertical.buttons > .button {
  1047. height: 33.333%;
  1048. }
  1049. .ui.four.vertical.buttons > .button {
  1050. height: 25%;
  1051. }
  1052. .ui.five.vertical.buttons > .button {
  1053. height: 20%;
  1054. }
  1055. .ui.six.vertical.buttons > .button {
  1056. height: 16.666%;
  1057. }
  1058. .ui.seven.vertical.buttons > .button {
  1059. height: 14.285%;
  1060. }
  1061. .ui.eight.vertical.buttons > .button {
  1062. height: 12.500%;
  1063. }
  1064. .ui.nine.vertical.buttons > .button {
  1065. height: 11.11%;
  1066. }
  1067. .ui.ten.vertical.buttons > .button {
  1068. height: 10%;
  1069. }
  1070. .ui.eleven.vertical.buttons > .button {
  1071. height: 9.09%;
  1072. }
  1073. .ui.twelve.vertical.buttons > .button {
  1074. height: 8.3333%;
  1075. }
  1076. /*-------------------
  1077. Colors
  1078. --------------------*/
  1079. /*--- Black ---*/
  1080. .ui.black.buttons .button,
  1081. .ui.black.button {
  1082. background-color: #1b1c1d;
  1083. color: #ffffff;
  1084. text-shadow: none;
  1085. background-image: none;
  1086. }
  1087. .ui.black.button {
  1088. box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
  1089. }
  1090. .ui.black.buttons .button:hover,
  1091. .ui.black.button:hover {
  1092. background-color: #27292a;
  1093. color: #ffffff;
  1094. text-shadow: none;
  1095. }
  1096. .ui.black.buttons .button:focus,
  1097. .ui.black.button:focus {
  1098. background-color: #2f3032;
  1099. color: #ffffff;
  1100. text-shadow: none;
  1101. }
  1102. .ui.black.buttons .button:active,
  1103. .ui.black.button:active {
  1104. background-color: #343637;
  1105. color: #ffffff;
  1106. text-shadow: none;
  1107. }
  1108. .ui.black.buttons .active.button,
  1109. .ui.black.buttons .active.button:active,
  1110. .ui.black.active.button,
  1111. .ui.black.button .active.button:active {
  1112. background-color: #0f0f10;
  1113. color: #ffffff;
  1114. text-shadow: none;
  1115. }
  1116. /* Basic */
  1117. .ui.basic.black.buttons .button,
  1118. .ui.basic.black.button {
  1119. box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset !important;
  1120. color: rgba(0, 0, 0, 0.6) !important;
  1121. }
  1122. .ui.basic.black.buttons .button:hover,
  1123. .ui.basic.black.button:hover {
  1124. background: transparent !important;
  1125. box-shadow: 0px 0px 0px 2px #27292a inset !important;
  1126. color: #27292a !important;
  1127. }
  1128. .ui.basic.black.buttons .button:focus,
  1129. .ui.basic.black.button:focus {
  1130. background: transparent !important;
  1131. box-shadow: 0px 0px 0px 2px #2f3032 inset !important;
  1132. }
  1133. .ui.basic.black.buttons .active.button,
  1134. .ui.basic.black.active.button {
  1135. background: transparent !important;
  1136. box-shadow: 0px 0px 0px 2px #0f0f10 inset !important;
  1137. color: #343637 !important;
  1138. }
  1139. .ui.basic.black.buttons .button:active,
  1140. .ui.basic.black.button:active {
  1141. box-shadow: 0px 0px 0px 2px #343637 inset !important;
  1142. color: #343637 !important;
  1143. }
  1144. .ui.buttons > .basic.black.button:not(:first-child) {
  1145. margin-left: -2px;
  1146. }
  1147. /* Inverted */
  1148. .ui.inverted.black.buttons .button,
  1149. .ui.inverted.black.button {
  1150. background-color: transparent;
  1151. box-shadow: 0px 0px 0px 2px #d4d4d5 inset !important;
  1152. color: #ffffff;
  1153. }
  1154. .ui.inverted.black.buttons .button:hover,
  1155. .ui.inverted.black.button:hover,
  1156. .ui.inverted.black.buttons .button:focus,
  1157. .ui.inverted.black.button:focus,
  1158. .ui.inverted.black.buttons .button.active,
  1159. .ui.inverted.black.button.active,
  1160. .ui.inverted.black.buttons .button:active,
  1161. .ui.inverted.black.button:active {
  1162. box-shadow: none !important;
  1163. color: #ffffff;
  1164. }
  1165. .ui.inverted.black.buttons .button:hover,
  1166. .ui.inverted.black.button:hover {
  1167. background-color: #000000;
  1168. }
  1169. .ui.inverted.black.buttons .button:focus,
  1170. .ui.inverted.black.button:focus {
  1171. background-color: #000000;
  1172. }
  1173. .ui.inverted.black.buttons .active.button,
  1174. .ui.inverted.black.active.button {
  1175. background-color: #000000;
  1176. }
  1177. .ui.inverted.black.buttons .button:active,
  1178. .ui.inverted.black.button:active {
  1179. background-color: #000000;
  1180. }
  1181. /* Inverted Basic */
  1182. .ui.inverted.black.basic.buttons .button,
  1183. .ui.inverted.black.buttons .basic.button,
  1184. .ui.inverted.black.basic.button {
  1185. background-color: transparent;
  1186. box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
  1187. color: #ffffff !important;
  1188. }
  1189. .ui.inverted.black.basic.buttons .button:hover,
  1190. .ui.inverted.black.buttons .basic.button:hover,
  1191. .ui.inverted.black.basic.button:hover {
  1192. box-shadow: 0px 0px 0px 2px #000000 inset !important;
  1193. color: #ffffff !important;
  1194. }
  1195. .ui.inverted.black.basic.buttons .button:focus,
  1196. .ui.inverted.black.basic.buttons .button:focus,
  1197. .ui.inverted.black.basic.button:focus {
  1198. box-shadow: 0px 0px 0px 2px #000000 inset !important;
  1199. color: #545454 !important;
  1200. }
  1201. .ui.inverted.black.basic.buttons .active.button,
  1202. .ui.inverted.black.buttons .basic.active.button,
  1203. .ui.inverted.black.basic.active.button {
  1204. box-shadow: 0px 0px 0px 2px #000000 inset !important;
  1205. color: #ffffff !important;
  1206. }
  1207. .ui.inverted.black.basic.buttons .button:active,
  1208. .ui.inverted.black.buttons .basic.button:active,
  1209. .ui.inverted.black.basic.button:active {
  1210. box-shadow: 0px 0px 0px 2px #000000 inset !important;
  1211. color: #ffffff !important;
  1212. }
  1213. /*--- Grey ---*/
  1214. .ui.grey.buttons .button,
  1215. .ui.grey.button {
  1216. background-color: #767676;
  1217. color: #ffffff;
  1218. text-shadow: none;
  1219. background-image: none;
  1220. }
  1221. .ui.grey.button {
  1222. box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
  1223. }
  1224. .ui.grey.buttons .button:hover,
  1225. .ui.grey.button:hover {
  1226. background-color: #838383;
  1227. color: #ffffff;
  1228. text-shadow: none;
  1229. }
  1230. .ui.grey.buttons .button:focus,
  1231. .ui.grey.button:focus {
  1232. background-color: #8a8a8a;
  1233. color: #ffffff;
  1234. text-shadow: none;
  1235. }
  1236. .ui.grey.buttons .button:active,
  1237. .ui.grey.button:active {
  1238. background-color: #909090;
  1239. color: #ffffff;
  1240. text-shadow: none;
  1241. }
  1242. .ui.grey.buttons .active.button,
  1243. .ui.grey.buttons .active.button:active,
  1244. .ui.grey.active.button,
  1245. .ui.grey.button .active.button:active {
  1246. background-color: #696969;
  1247. color: #ffffff;
  1248. text-shadow: none;
  1249. }
  1250. /* Basic */
  1251. .ui.basic.grey.buttons .button,
  1252. .ui.basic.grey.button {
  1253. box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset !important;
  1254. color: rgba(0, 0, 0, 0.6) !important;
  1255. }
  1256. .ui.basic.grey.buttons .button:hover,
  1257. .ui.basic.grey.button:hover {
  1258. background: transparent !important;
  1259. box-shadow: 0px 0px 0px 2px #838383 inset !important;
  1260. color: #838383 !important;
  1261. }
  1262. .ui.basic.grey.buttons .button:focus,
  1263. .ui.basic.grey.button:focus {
  1264. background: transparent !important;
  1265. box-shadow: 0px 0px 0px 2px #8a8a8a inset !important;
  1266. }
  1267. .ui.basic.grey.buttons .active.button,
  1268. .ui.basic.grey.active.button {
  1269. background: transparent !important;
  1270. box-shadow: 0px 0px 0px 2px #696969 inset !important;
  1271. color: #909090 !important;
  1272. }
  1273. .ui.basic.grey.buttons .button:active,
  1274. .ui.basic.grey.button:active {
  1275. box-shadow: 0px 0px 0px 2px #909090 inset !important;
  1276. color: #909090 !important;
  1277. }
  1278. .ui.buttons > .basic.grey.button:not(:first-child) {
  1279. margin-left: -2px;
  1280. }
  1281. /* Inverted */
  1282. .ui.inverted.grey.buttons .button,
  1283. .ui.inverted.grey.button {
  1284. background-color: transparent;
  1285. box-shadow: 0px 0px 0px 2px #d4d4d5 inset !important;
  1286. color: #ffffff;
  1287. }
  1288. .ui.inverted.grey.buttons .button:hover,
  1289. .ui.inverted.grey.button:hover,
  1290. .ui.inverted.grey.buttons .button:focus,
  1291. .ui.inverted.grey.button:focus,
  1292. .ui.inverted.grey.buttons .button.active,
  1293. .ui.inverted.grey.button.active,
  1294. .ui.inverted.grey.buttons .button:active,
  1295. .ui.inverted.grey.button:active {
  1296. box-shadow: none !important;
  1297. color: rgba(0, 0, 0, 0.6);
  1298. }
  1299. .ui.inverted.grey.buttons .button:hover,
  1300. .ui.inverted.grey.button:hover {
  1301. background-color: #cfd0d2;
  1302. }
  1303. .ui.inverted.grey.buttons .button:focus,
  1304. .ui.inverted.grey.button:focus {
  1305. background-color: #c7c9cb;
  1306. }
  1307. .ui.inverted.grey.buttons .active.button,
  1308. .ui.inverted.grey.active.button {
  1309. background-color: #cfd0d2;
  1310. }
  1311. .ui.inverted.grey.buttons .button:active,
  1312. .ui.inverted.grey.button:active {
  1313. background-color: #c2c4c5;
  1314. }
  1315. /* Inverted Basic */
  1316. .ui.inverted.grey.basic.buttons .button,
  1317. .ui.inverted.grey.buttons .basic.button,
  1318. .ui.inverted.grey.basic.button {
  1319. background-color: transparent;
  1320. box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
  1321. color: #ffffff !important;
  1322. }
  1323. .ui.inverted.grey.basic.buttons .button:hover,
  1324. .ui.inverted.grey.buttons .basic.button:hover,
  1325. .ui.inverted.grey.basic.button:hover {
  1326. box-shadow: 0px 0px 0px 2px #cfd0d2 inset !important;
  1327. color: #ffffff !important;
  1328. }
  1329. .ui.inverted.grey.basic.buttons .button:focus,
  1330. .ui.inverted.grey.basic.buttons .button:focus,
  1331. .ui.inverted.grey.basic.button:focus {
  1332. box-shadow: 0px 0px 0px 2px #c7c9cb inset !important;
  1333. color: #dcddde !important;
  1334. }
  1335. .ui.inverted.grey.basic.buttons .active.button,
  1336. .ui.inverted.grey.buttons .basic.active.button,
  1337. .ui.inverted.grey.basic.active.button {
  1338. box-shadow: 0px 0px 0px 2px #cfd0d2 inset !important;
  1339. color: #ffffff !important;
  1340. }
  1341. .ui.inverted.grey.basic.buttons .button:active,
  1342. .ui.inverted.grey.buttons .basic.button:active,
  1343. .ui.inverted.grey.basic.button:active {
  1344. box-shadow: 0px 0px 0px 2px #c2c4c5 inset !important;
  1345. color: #ffffff !important;
  1346. }
  1347. /*--- Brown ---*/
  1348. .ui.brown.buttons .button,
  1349. .ui.brown.button {
  1350. background-color: #a5673f;
  1351. color: #ffffff;
  1352. text-shadow: none;
  1353. background-image: none;
  1354. }
  1355. .ui.brown.button {
  1356. box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
  1357. }
  1358. .ui.brown.buttons .button:hover,
  1359. .ui.brown.button:hover {
  1360. background-color: #975b33;
  1361. color: #ffffff;
  1362. text-shadow: none;
  1363. }
  1364. .ui.brown.buttons .button:focus,
  1365. .ui.brown.button:focus {
  1366. background-color: #90532b;
  1367. color: #ffffff;
  1368. text-shadow: none;
  1369. }
  1370. .ui.brown.buttons .button:active,
  1371. .ui.brown.button:active {
  1372. background-color: #805031;
  1373. color: #ffffff;
  1374. text-shadow: none;
  1375. }
  1376. .ui.brown.buttons .active.button,
  1377. .ui.brown.buttons .active.button:active,
  1378. .ui.brown.active.button,
  1379. .ui.brown.button .active.button:active {
  1380. background-color: #995a31;
  1381. color: #ffffff;
  1382. text-shadow: none;
  1383. }
  1384. /* Basic */
  1385. .ui.basic.brown.buttons .button,
  1386. .ui.basic.brown.button {
  1387. box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset !important;
  1388. color: rgba(0, 0, 0, 0.6) !important;
  1389. }
  1390. .ui.basic.brown.buttons .button:hover,
  1391. .ui.basic.brown.button:hover {
  1392. background: transparent !important;
  1393. box-shadow: 0px 0px 0px 2px #975b33 inset !important;
  1394. color: #975b33 !important;
  1395. }
  1396. .ui.basic.brown.buttons .button:focus,
  1397. .ui.basic.brown.button:focus {
  1398. background: transparent !important;
  1399. box-shadow: 0px 0px 0px 2px #90532b inset !important;
  1400. }
  1401. .ui.basic.brown.buttons .active.button,
  1402. .ui.basic.brown.active.button {
  1403. background: transparent !important;
  1404. box-shadow: 0px 0px 0px 2px #995a31 inset !important;
  1405. color: #805031 !important;
  1406. }
  1407. .ui.basic.brown.buttons .button:active,
  1408. .ui.basic.brown.button:active {
  1409. box-shadow: 0px 0px 0px 2px #805031 inset !important;
  1410. color: #805031 !important;
  1411. }
  1412. .ui.buttons > .basic.brown.button:not(:first-child) {
  1413. margin-left: -2px;
  1414. }
  1415. /* Inverted */
  1416. .ui.inverted.brown.buttons .button,
  1417. .ui.inverted.brown.button {
  1418. background-color: transparent;
  1419. box-shadow: 0px 0px 0px 2px #d67c1c inset !important;
  1420. color: #d67c1c;
  1421. }
  1422. .ui.inverted.brown.buttons .button:hover,
  1423. .ui.inverted.brown.button:hover,
  1424. .ui.inverted.brown.buttons .button:focus,
  1425. .ui.inverted.brown.button:focus,
  1426. .ui.inverted.brown.buttons .button.active,
  1427. .ui.inverted.brown.button.active,
  1428. .ui.inverted.brown.buttons .button:active,
  1429. .ui.inverted.brown.button:active {
  1430. box-shadow: none !important;
  1431. color: #ffffff;
  1432. }
  1433. .ui.inverted.brown.buttons .button:hover,
  1434. .ui.inverted.brown.button:hover {
  1435. background-color: #c86f11;
  1436. }
  1437. .ui.inverted.brown.buttons .button:focus,
  1438. .ui.inverted.brown.button:focus {
  1439. background-color: #c16808;
  1440. }
  1441. .ui.inverted.brown.buttons .active.button,
  1442. .ui.inverted.brown.active.button {
  1443. background-color: #cc6f0d;
  1444. }
  1445. .ui.inverted.brown.buttons .button:active,
  1446. .ui.inverted.brown.button:active {
  1447. background-color: #a96216;
  1448. }
  1449. /* Inverted Basic */
  1450. .ui.inverted.brown.basic.buttons .button,
  1451. .ui.inverted.brown.buttons .basic.button,
  1452. .ui.inverted.brown.basic.button {
  1453. background-color: transparent;
  1454. box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
  1455. color: #ffffff !important;
  1456. }
  1457. .ui.inverted.brown.basic.buttons .button:hover,
  1458. .ui.inverted.brown.buttons .basic.button:hover,
  1459. .ui.inverted.brown.basic.button:hover {
  1460. box-shadow: 0px 0px 0px 2px #c86f11 inset !important;
  1461. color: #d67c1c !important;
  1462. }
  1463. .ui.inverted.brown.basic.buttons .button:focus,
  1464. .ui.inverted.brown.basic.buttons .button:focus,
  1465. .ui.inverted.brown.basic.button:focus {
  1466. box-shadow: 0px 0px 0px 2px #c16808 inset !important;
  1467. color: #d67c1c !important;
  1468. }
  1469. .ui.inverted.brown.basic.buttons .active.button,
  1470. .ui.inverted.brown.buttons .basic.active.button,
  1471. .ui.inverted.brown.basic.active.button {
  1472. box-shadow: 0px 0px 0px 2px #cc6f0d inset !important;
  1473. color: #d67c1c !important;
  1474. }
  1475. .ui.inverted.brown.basic.buttons .button:active,
  1476. .ui.inverted.brown.buttons .basic.button:active,
  1477. .ui.inverted.brown.basic.button:active {
  1478. box-shadow: 0px 0px 0px 2px #a96216 inset !important;
  1479. color: #d67c1c !important;
  1480. }
  1481. /*--- Blue ---*/
  1482. .ui.blue.buttons .button,
  1483. .ui.blue.button {
  1484. background-color: #2185d0;
  1485. color: #ffffff;
  1486. text-shadow: none;
  1487. background-image: none;
  1488. }
  1489. .ui.blue.button {
  1490. box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
  1491. }
  1492. .ui.blue.buttons .button:hover,
  1493. .ui.blue.button:hover {
  1494. background-color: #1678c2;
  1495. color: #ffffff;
  1496. text-shadow: none;
  1497. }
  1498. .ui.blue.buttons .button:focus,
  1499. .ui.blue.button:focus {
  1500. background-color: #0d71bb;
  1501. color: #ffffff;
  1502. text-shadow: none;
  1503. }
  1504. .ui.blue.buttons .button:active,
  1505. .ui.blue.button:active {
  1506. background-color: #1a69a4;
  1507. color: #ffffff;
  1508. text-shadow: none;
  1509. }
  1510. .ui.blue.buttons .active.button,
  1511. .ui.blue.buttons .active.button:active,
  1512. .ui.blue.active.button,
  1513. .ui.blue.button .active.button:active {
  1514. background-color: #1279c6;
  1515. color: #ffffff;
  1516. text-shadow: none;
  1517. }
  1518. /* Basic */
  1519. .ui.basic.blue.buttons .button,
  1520. .ui.basic.blue.button {
  1521. box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset !important;
  1522. color: rgba(0, 0, 0, 0.6) !important;
  1523. }
  1524. .ui.basic.blue.buttons .button:hover,
  1525. .ui.basic.blue.button:hover {
  1526. background: transparent !important;
  1527. box-shadow: 0px 0px 0px 2px #1678c2 inset !important;
  1528. color: #1678c2 !important;
  1529. }
  1530. .ui.basic.blue.buttons .button:focus,
  1531. .ui.basic.blue.button:focus {
  1532. background: transparent !important;
  1533. box-shadow: 0px 0px 0px 2px #0d71bb inset !important;
  1534. }
  1535. .ui.basic.blue.buttons .active.button,
  1536. .ui.basic.blue.active.button {
  1537. background: transparent !important;
  1538. box-shadow: 0px 0px 0px 2px #1279c6 inset !important;
  1539. color: #1a69a4 !important;
  1540. }
  1541. .ui.basic.blue.buttons .button:active,
  1542. .ui.basic.blue.button:active {
  1543. box-shadow: 0px 0px 0px 2px #1a69a4 inset !important;
  1544. color: #1a69a4 !important;
  1545. }
  1546. .ui.buttons > .basic.blue.button:not(:first-child) {
  1547. margin-left: -2px;
  1548. }
  1549. /* Inverted */
  1550. .ui.inverted.blue.buttons .button,
  1551. .ui.inverted.blue.button {
  1552. background-color: transparent;
  1553. box-shadow: 0px 0px 0px 2px #54c8ff inset !important;
  1554. color: #54c8ff;
  1555. }
  1556. .ui.inverted.blue.buttons .button:hover,
  1557. .ui.inverted.blue.button:hover,
  1558. .ui.inverted.blue.buttons .button:focus,
  1559. .ui.inverted.blue.button:focus,
  1560. .ui.inverted.blue.buttons .button.active,
  1561. .ui.inverted.blue.button.active,
  1562. .ui.inverted.blue.buttons .button:active,
  1563. .ui.inverted.blue.button:active {
  1564. box-shadow: none !important;
  1565. color: #ffffff;
  1566. }
  1567. .ui.inverted.blue.buttons .button:hover,
  1568. .ui.inverted.blue.button:hover {
  1569. background-color: #3ac0ff;
  1570. }
  1571. .ui.inverted.blue.buttons .button:focus,
  1572. .ui.inverted.blue.button:focus {
  1573. background-color: #2bbbff;
  1574. }
  1575. .ui.inverted.blue.buttons .active.button,
  1576. .ui.inverted.blue.active.button {
  1577. background-color: #3ac0ff;
  1578. }
  1579. .ui.inverted.blue.buttons .button:active,
  1580. .ui.inverted.blue.button:active {
  1581. background-color: #21b8ff;
  1582. }
  1583. /* Inverted Basic */
  1584. .ui.inverted.blue.basic.buttons .button,
  1585. .ui.inverted.blue.buttons .basic.button,
  1586. .ui.inverted.blue.basic.button {
  1587. background-color: transparent;
  1588. box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
  1589. color: #ffffff !important;
  1590. }
  1591. .ui.inverted.blue.basic.buttons .button:hover,
  1592. .ui.inverted.blue.buttons .basic.button:hover,
  1593. .ui.inverted.blue.basic.button:hover {
  1594. box-shadow: 0px 0px 0px 2px #3ac0ff inset !important;
  1595. color: #54c8ff !important;
  1596. }
  1597. .ui.inverted.blue.basic.buttons .button:focus,
  1598. .ui.inverted.blue.basic.buttons .button:focus,
  1599. .ui.inverted.blue.basic.button:focus {
  1600. box-shadow: 0px 0px 0px 2px #2bbbff inset !important;
  1601. color: #54c8ff !important;
  1602. }
  1603. .ui.inverted.blue.basic.buttons .active.button,
  1604. .ui.inverted.blue.buttons .basic.active.button,
  1605. .ui.inverted.blue.basic.active.button {
  1606. box-shadow: 0px 0px 0px 2px #3ac0ff inset !important;
  1607. color: #54c8ff !important;
  1608. }
  1609. .ui.inverted.blue.basic.buttons .button:active,
  1610. .ui.inverted.blue.buttons .basic.button:active,
  1611. .ui.inverted.blue.basic.button:active {
  1612. box-shadow: 0px 0px 0px 2px #21b8ff inset !important;
  1613. color: #54c8ff !important;
  1614. }
  1615. /*--- Green ---*/
  1616. .ui.green.buttons .button,
  1617. .ui.green.button {
  1618. background-color: #21ba45;
  1619. color: #ffffff;
  1620. text-shadow: none;
  1621. background-image: none;
  1622. }
  1623. .ui.green.button {
  1624. box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
  1625. }
  1626. .ui.green.buttons .button:hover,
  1627. .ui.green.button:hover {
  1628. background-color: #16ab39;
  1629. color: #ffffff;
  1630. text-shadow: none;
  1631. }
  1632. .ui.green.buttons .button:focus,
  1633. .ui.green.button:focus {
  1634. background-color: #0ea432;
  1635. color: #ffffff;
  1636. text-shadow: none;
  1637. }
  1638. .ui.green.buttons .button:active,
  1639. .ui.green.button:active {
  1640. background-color: #198f35;
  1641. color: #ffffff;
  1642. text-shadow: none;
  1643. }
  1644. .ui.green.buttons .active.button,
  1645. .ui.green.buttons .active.button:active,
  1646. .ui.green.active.button,
  1647. .ui.green.button .active.button:active {
  1648. background-color: #13ae38;
  1649. color: #ffffff;
  1650. text-shadow: none;
  1651. }
  1652. /* Basic */
  1653. .ui.basic.green.buttons .button,
  1654. .ui.basic.green.button {
  1655. box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset !important;
  1656. color: rgba(0, 0, 0, 0.6) !important;
  1657. }
  1658. .ui.basic.green.buttons .button:hover,
  1659. .ui.basic.green.button:hover {
  1660. background: transparent !important;
  1661. box-shadow: 0px 0px 0px 2px #16ab39 inset !important;
  1662. color: #16ab39 !important;
  1663. }
  1664. .ui.basic.green.buttons .button:focus,
  1665. .ui.basic.green.button:focus {
  1666. background: transparent !important;
  1667. box-shadow: 0px 0px 0px 2px #0ea432 inset !important;
  1668. }
  1669. .ui.basic.green.buttons .active.button,
  1670. .ui.basic.green.active.button {
  1671. background: transparent !important;
  1672. box-shadow: 0px 0px 0px 2px #13ae38 inset !important;
  1673. color: #198f35 !important;
  1674. }
  1675. .ui.basic.green.buttons .button:active,
  1676. .ui.basic.green.button:active {
  1677. box-shadow: 0px 0px 0px 2px #198f35 inset !important;
  1678. color: #198f35 !important;
  1679. }
  1680. .ui.buttons > .basic.green.button:not(:first-child) {
  1681. margin-left: -2px;
  1682. }
  1683. /* Inverted */
  1684. .ui.inverted.green.buttons .button,
  1685. .ui.inverted.green.button {
  1686. background-color: transparent;
  1687. box-shadow: 0px 0px 0px 2px #2ecc40 inset !important;
  1688. color: #2ecc40;
  1689. }
  1690. .ui.inverted.green.buttons .button:hover,
  1691. .ui.inverted.green.button:hover,
  1692. .ui.inverted.green.buttons .button:focus,
  1693. .ui.inverted.green.button:focus,
  1694. .ui.inverted.green.buttons .button.active,
  1695. .ui.inverted.green.button.active,
  1696. .ui.inverted.green.buttons .button:active,
  1697. .ui.inverted.green.button:active {
  1698. box-shadlightOw: none !important;
  1699. color: #ffffff;
  1700. }
  1701. .ui.inverted.green.buttons .button:hover,
  1702. .ui.inverted.green.button:hover {
  1703. background-color: #22be34;
  1704. }
  1705. .ui.inverted.green.buttons .button:focus,
  1706. .ui.inverted.green.button:focus {
  1707. background-color: #19b82b;
  1708. }
  1709. .ui.inverted.green.buttons .active.button,
  1710. .ui.inverted.green.active.button {
  1711. background-color: #1fc231;
  1712. }
  1713. .ui.inverted.green.buttons .button:active,
  1714. .ui.inverted.green.button:active {
  1715. background-color: #25a233;
  1716. }
  1717. /* Inverted Basic */
  1718. .ui.inverted.green.basic.buttons .button,
  1719. .ui.inverted.green.buttons .basic.button,
  1720. .ui.inverted.green.basic.button {
  1721. background-color: transparent;
  1722. box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
  1723. color: #ffffff !important;
  1724. }
  1725. .ui.inverted.green.basic.buttons .button:hover,
  1726. .ui.inverted.green.buttons .basic.button:hover,
  1727. .ui.inverted.green.basic.button:hover {
  1728. box-shadow: 0px 0px 0px 2px #22be34 inset !important;
  1729. color: #2ecc40 !important;
  1730. }
  1731. .ui.inverted.green.basic.buttons .button:focus,
  1732. .ui.inverted.green.basic.buttons .button:focus,
  1733. .ui.inverted.green.basic.button:focus {
  1734. box-shadow: 0px 0px 0px 2px #19b82b inset !important;
  1735. color: #2ecc40 !important;
  1736. }
  1737. .ui.inverted.green.basic.buttons .active.button,
  1738. .ui.inverted.green.buttons .basic.active.button,
  1739. .ui.inverted.green.basic.active.button {
  1740. box-shadow: 0px 0px 0px 2px #1fc231 inset !important;
  1741. color: #2ecc40 !important;
  1742. }
  1743. .ui.inverted.green.basic.buttons .button:active,
  1744. .ui.inverted.green.buttons .basic.button:active,
  1745. .ui.inverted.green.basic.button:active {
  1746. box-shadow: 0px 0px 0px 2px #25a233 inset !important;
  1747. color: #2ecc40 !important;
  1748. }
  1749. /*--- Orange ---*/
  1750. .ui.orange.buttons .button,
  1751. .ui.orange.button {
  1752. background-color: #f2711c;
  1753. color: #ffffff;
  1754. text-shadow: none;
  1755. background-image: none;
  1756. }
  1757. .ui.orange.button {
  1758. box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
  1759. }
  1760. .ui.orange.buttons .button:hover,
  1761. .ui.orange.button:hover {
  1762. background-color: #f26202;
  1763. color: #ffffff;
  1764. text-shadow: none;
  1765. }
  1766. .ui.orange.buttons .button:focus,
  1767. .ui.orange.button:focus {
  1768. background-color: #e55b00;
  1769. color: #ffffff;
  1770. text-shadow: none;
  1771. }
  1772. .ui.orange.buttons .button:active,
  1773. .ui.orange.button:active {
  1774. background-color: #cf590c;
  1775. color: #ffffff;
  1776. text-shadow: none;
  1777. }
  1778. .ui.orange.buttons .active.button,
  1779. .ui.orange.buttons .active.button:active,
  1780. .ui.orange.active.button,
  1781. .ui.orange.button .active.button:active {
  1782. background-color: #f56100;
  1783. color: #ffffff;
  1784. text-shadow: none;
  1785. }
  1786. /* Basic */
  1787. .ui.basic.orange.buttons .button,
  1788. .ui.basic.orange.button {
  1789. box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset !important;
  1790. color: rgba(0, 0, 0, 0.6) !important;
  1791. }
  1792. .ui.basic.orange.buttons .button:hover,
  1793. .ui.basic.orange.button:hover {
  1794. background: transparent !important;
  1795. box-shadow: 0px 0px 0px 2px #f26202 inset !important;
  1796. color: #f26202 !important;
  1797. }
  1798. .ui.basic.orange.buttons .button:focus,
  1799. .ui.basic.orange.button:focus {
  1800. background: transparent !important;
  1801. box-shadow: 0px 0px 0px 2px #e55b00 inset !important;
  1802. }
  1803. .ui.basic.orange.buttons .active.button,
  1804. .ui.basic.orange.active.button {
  1805. background: transparent !important;
  1806. box-shadow: 0px 0px 0px 2px #f56100 inset !important;
  1807. color: #cf590c !important;
  1808. }
  1809. .ui.basic.orange.buttons .button:active,
  1810. .ui.basic.orange.button:active {
  1811. box-shadow: 0px 0px 0px 2px #cf590c inset !important;
  1812. color: #cf590c !important;
  1813. }
  1814. .ui.buttons > .basic.orange.button:not(:first-child) {
  1815. margin-left: -2px;
  1816. }
  1817. /* Inverted */
  1818. .ui.inverted.orange.buttons .button,
  1819. .ui.inverted.orange.button {
  1820. background-color: transparent;
  1821. box-shadow: 0px 0px 0px 2px #ff851b inset !important;
  1822. color: #ff851b;
  1823. }
  1824. .ui.inverted.orange.buttons .button:hover,
  1825. .ui.inverted.orange.button:hover,
  1826. .ui.inverted.orange.buttons .button:focus,
  1827. .ui.inverted.orange.button:focus,
  1828. .ui.inverted.orange.buttons .button.active,
  1829. .ui.inverted.orange.button.active,
  1830. .ui.inverted.orange.buttons .button:active,
  1831. .ui.inverted.orange.button:active {
  1832. box-shadow: none !important;
  1833. color: #ffffff;
  1834. }
  1835. .ui.inverted.orange.buttons .button:hover,
  1836. .ui.inverted.orange.button:hover {
  1837. background-color: #ff7701;
  1838. }
  1839. .ui.inverted.orange.buttons .button:focus,
  1840. .ui.inverted.orange.button:focus {
  1841. background-color: #f17000;
  1842. }
  1843. .ui.inverted.orange.buttons .active.button,
  1844. .ui.inverted.orange.active.button {
  1845. background-color: #ff7701;
  1846. }
  1847. .ui.inverted.orange.buttons .button:active,
  1848. .ui.inverted.orange.button:active {
  1849. background-color: #e76b00;
  1850. }
  1851. /* Inverted Basic */
  1852. .ui.inverted.orange.basic.buttons .button,
  1853. .ui.inverted.orange.buttons .basic.button,
  1854. .ui.inverted.orange.basic.button {
  1855. background-color: transparent;
  1856. box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
  1857. color: #ffffff !important;
  1858. }
  1859. .ui.inverted.orange.basic.buttons .button:hover,
  1860. .ui.inverted.orange.buttons .basic.button:hover,
  1861. .ui.inverted.orange.basic.button:hover {
  1862. box-shadow: 0px 0px 0px 2px #ff7701 inset !important;
  1863. color: #ff851b !important;
  1864. }
  1865. .ui.inverted.orange.basic.buttons .button:focus,
  1866. .ui.inverted.orange.basic.buttons .button:focus,
  1867. .ui.inverted.orange.basic.button:focus {
  1868. box-shadow: 0px 0px 0px 2px #f17000 inset !important;
  1869. color: #ff851b !important;
  1870. }
  1871. .ui.inverted.orange.basic.buttons .active.button,
  1872. .ui.inverted.orange.buttons .basic.active.button,
  1873. .ui.inverted.orange.basic.active.button {
  1874. box-shadow: 0px 0px 0px 2px #ff7701 inset !important;
  1875. color: #ff851b !important;
  1876. }
  1877. .ui.inverted.orange.basic.buttons .button:active,
  1878. .ui.inverted.orange.buttons .basic.button:active,
  1879. .ui.inverted.orange.basic.button:active {
  1880. box-shadow: 0px 0px 0px 2px #e76b00 inset !important;
  1881. color: #ff851b !important;
  1882. }
  1883. /*--- Pink ---*/
  1884. .ui.pink.buttons .button,
  1885. .ui.pink.button {
  1886. background-color: #e03997;
  1887. color: #ffffff;
  1888. text-shadow: none;
  1889. background-image: none;
  1890. }
  1891. .ui.pink.button {
  1892. box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
  1893. }
  1894. .ui.pink.buttons .button:hover,
  1895. .ui.pink.button:hover {
  1896. background-color: #e61a8d;
  1897. color: #ffffff;
  1898. text-shadow: none;
  1899. }
  1900. .ui.pink.buttons .button:focus,
  1901. .ui.pink.button:focus {
  1902. background-color: #e10f85;
  1903. color: #ffffff;
  1904. text-shadow: none;
  1905. }
  1906. .ui.pink.buttons .button:active,
  1907. .ui.pink.button:active {
  1908. background-color: #c71f7e;
  1909. color: #ffffff;
  1910. text-shadow: none;
  1911. }
  1912. .ui.pink.buttons .active.button,
  1913. .ui.pink.buttons .active.button:active,
  1914. .ui.pink.active.button,
  1915. .ui.pink.button .active.button:active {
  1916. background-color: #ea158d;
  1917. color: #ffffff;
  1918. text-shadow: none;
  1919. }
  1920. /* Basic */
  1921. .ui.basic.pink.buttons .button,
  1922. .ui.basic.pink.button {
  1923. box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset !important;
  1924. color: rgba(0, 0, 0, 0.6) !important;
  1925. }
  1926. .ui.basic.pink.buttons .button:hover,
  1927. .ui.basic.pink.button:hover {
  1928. background: transparent !important;
  1929. box-shadow: 0px 0px 0px 2px #e61a8d inset !important;
  1930. color: #e61a8d !important;
  1931. }
  1932. .ui.basic.pink.buttons .button:focus,
  1933. .ui.basic.pink.button:focus {
  1934. background: transparent !important;
  1935. box-shadow: 0px 0px 0px 2px #e10f85 inset !important;
  1936. }
  1937. .ui.basic.pink.buttons .active.button,
  1938. .ui.basic.pink.active.button {
  1939. background: transparent !important;
  1940. box-shadow: 0px 0px 0px 2px #ea158d inset !important;
  1941. color: #c71f7e !important;
  1942. }
  1943. .ui.basic.pink.buttons .button:active,
  1944. .ui.basic.pink.button:active {
  1945. box-shadow: 0px 0px 0px 2px #c71f7e inset !important;
  1946. color: #c71f7e !important;
  1947. }
  1948. .ui.buttons > .basic.pink.button:not(:first-child) {
  1949. margin-left: -2px;
  1950. }
  1951. /* Inverted */
  1952. .ui.inverted.pink.buttons .button,
  1953. .ui.inverted.pink.button {
  1954. background-color: transparent;
  1955. box-shadow: 0px 0px 0px 2px #ff8edf inset !important;
  1956. color: #ff8edf;
  1957. }
  1958. .ui.inverted.pink.buttons .button:hover,
  1959. .ui.inverted.pink.button:hover,
  1960. .ui.inverted.pink.buttons .button:focus,
  1961. .ui.inverted.pink.button:focus,
  1962. .ui.inverted.pink.buttons .button.active,
  1963. .ui.inverted.pink.button.active,
  1964. .ui.inverted.pink.buttons .button:active,
  1965. .ui.inverted.pink.button:active {
  1966. box-shadow: none !important;
  1967. color: #ffffff;
  1968. }
  1969. .ui.inverted.pink.buttons .button:hover,
  1970. .ui.inverted.pink.button:hover {
  1971. background-color: #ff74d8;
  1972. }
  1973. .ui.inverted.pink.buttons .button:focus,
  1974. .ui.inverted.pink.button:focus {
  1975. background-color: #ff65d3;
  1976. }
  1977. .ui.inverted.pink.buttons .active.button,
  1978. .ui.inverted.pink.active.button {
  1979. background-color: #ff74d8;
  1980. }
  1981. .ui.inverted.pink.buttons .button:active,
  1982. .ui.inverted.pink.button:active {
  1983. background-color: #ff5bd1;
  1984. }
  1985. /* Inverted Basic */
  1986. .ui.inverted.pink.basic.buttons .button,
  1987. .ui.inverted.pink.buttons .basic.button,
  1988. .ui.inverted.pink.basic.button {
  1989. background-color: transparent;
  1990. box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
  1991. color: #ffffff !important;
  1992. }
  1993. .ui.inverted.pink.basic.buttons .button:hover,
  1994. .ui.inverted.pink.buttons .basic.button:hover,
  1995. .ui.inverted.pink.basic.button:hover {
  1996. box-shadow: 0px 0px 0px 2px #ff74d8 inset !important;
  1997. color: #ff8edf !important;
  1998. }
  1999. .ui.inverted.pink.basic.buttons .button:focus,
  2000. .ui.inverted.pink.basic.buttons .button:focus,
  2001. .ui.inverted.pink.basic.button:focus {
  2002. box-shadow: 0px 0px 0px 2px #ff65d3 inset !important;
  2003. color: #ff8edf !important;
  2004. }
  2005. .ui.inverted.pink.basic.buttons .active.button,
  2006. .ui.inverted.pink.buttons .basic.active.button,
  2007. .ui.inverted.pink.basic.active.button {
  2008. box-shadow: 0px 0px 0px 2px #ff74d8 inset !important;
  2009. color: #ff8edf !important;
  2010. }
  2011. .ui.inverted.pink.basic.buttons .button:active,
  2012. .ui.inverted.pink.buttons .basic.button:active,
  2013. .ui.inverted.pink.basic.button:active {
  2014. box-shadow: 0px 0px 0px 2px #ff5bd1 inset !important;
  2015. color: #ff8edf !important;
  2016. }
  2017. /*--- Violet ---*/
  2018. .ui.violet.buttons .button,
  2019. .ui.violet.button {
  2020. background-color: #6435c9;
  2021. color: #ffffff;
  2022. text-shadow: none;
  2023. background-image: none;
  2024. }
  2025. .ui.violet.button {
  2026. box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
  2027. }
  2028. .ui.violet.buttons .button:hover,
  2029. .ui.violet.button:hover {
  2030. background-color: #5829bb;
  2031. color: #ffffff;
  2032. text-shadow: none;
  2033. }
  2034. .ui.violet.buttons .button:focus,
  2035. .ui.violet.button:focus {
  2036. background-color: #4f20b5;
  2037. color: #ffffff;
  2038. text-shadow: none;
  2039. }
  2040. .ui.violet.buttons .button:active,
  2041. .ui.violet.button:active {
  2042. background-color: #502aa1;
  2043. color: #ffffff;
  2044. text-shadow: none;
  2045. }
  2046. .ui.violet.buttons .active.button,
  2047. .ui.violet.buttons .active.button:active,
  2048. .ui.violet.active.button,
  2049. .ui.violet.button .active.button:active {
  2050. background-color: #5626bf;
  2051. color: #ffffff;
  2052. text-shadow: none;
  2053. }
  2054. /* Basic */
  2055. .ui.basic.violet.buttons .button,
  2056. .ui.basic.violet.button {
  2057. box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset !important;
  2058. color: rgba(0, 0, 0, 0.6) !important;
  2059. }
  2060. .ui.basic.violet.buttons .button:hover,
  2061. .ui.basic.violet.button:hover {
  2062. background: transparent !important;
  2063. box-shadow: 0px 0px 0px 2px #5829bb inset !important;
  2064. color: #5829bb !important;
  2065. }
  2066. .ui.basic.violet.buttons .button:focus,
  2067. .ui.basic.violet.button:focus {
  2068. background: transparent !important;
  2069. box-shadow: 0px 0px 0px 2px #4f20b5 inset !important;
  2070. }
  2071. .ui.basic.violet.buttons .active.button,
  2072. .ui.basic.violet.active.button {
  2073. background: transparent !important;
  2074. box-shadow: 0px 0px 0px 2px #5626bf inset !important;
  2075. color: #502aa1 !important;
  2076. }
  2077. .ui.basic.violet.buttons .button:active,
  2078. .ui.basic.violet.button:active {
  2079. box-shadow: 0px 0px 0px 2px #502aa1 inset !important;
  2080. color: #502aa1 !important;
  2081. }
  2082. .ui.buttons > .basic.violet.button:not(:first-child) {
  2083. margin-left: -2px;
  2084. }
  2085. /* Inverted */
  2086. .ui.inverted.violet.buttons .button,
  2087. .ui.inverted.violet.button {
  2088. background-color: transparent;
  2089. box-shadow: 0px 0px 0px 2px #a291fb inset !important;
  2090. color: #a291fb;
  2091. }
  2092. .ui.inverted.violet.buttons .button:hover,
  2093. .ui.inverted.violet.button:hover,
  2094. .ui.inverted.violet.buttons .button:focus,
  2095. .ui.inverted.violet.button:focus,
  2096. .ui.inverted.violet.buttons .button.active,
  2097. .ui.inverted.violet.button.active,
  2098. .ui.inverted.violet.buttons .button:active,
  2099. .ui.inverted.violet.button:active {
  2100. box-shadow: none !important;
  2101. color: #ffffff;
  2102. }
  2103. .ui.inverted.violet.buttons .button:hover,
  2104. .ui.inverted.violet.button:hover {
  2105. background-color: #8a73ff;
  2106. }
  2107. .ui.inverted.violet.buttons .button:focus,
  2108. .ui.inverted.violet.button:focus {
  2109. background-color: #7d64ff;
  2110. }
  2111. .ui.inverted.violet.buttons .active.button,
  2112. .ui.inverted.violet.active.button {
  2113. background-color: #8a73ff;
  2114. }
  2115. .ui.inverted.violet.buttons .button:active,
  2116. .ui.inverted.violet.button:active {
  2117. background-color: #7860f9;
  2118. }
  2119. /* Inverted Basic */
  2120. .ui.inverted.violet.basic.buttons .button,
  2121. .ui.inverted.violet.buttons .basic.button,
  2122. .ui.inverted.violet.basic.button {
  2123. background-color: transparent;
  2124. box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
  2125. color: #ffffff !important;
  2126. }
  2127. .ui.inverted.violet.basic.buttons .button:hover,
  2128. .ui.inverted.violet.buttons .basic.button:hover,
  2129. .ui.inverted.violet.basic.button:hover {
  2130. box-shadow: 0px 0px 0px 2px #8a73ff inset !important;
  2131. color: #a291fb !important;
  2132. }
  2133. .ui.inverted.violet.basic.buttons .button:focus,
  2134. .ui.inverted.violet.basic.buttons .button:focus,
  2135. .ui.inverted.violet.basic.button:focus {
  2136. box-shadow: 0px 0px 0px 2px #7d64ff inset !important;
  2137. color: #a291fb !important;
  2138. }
  2139. .ui.inverted.violet.basic.buttons .active.button,
  2140. .ui.inverted.violet.buttons .basic.active.button,
  2141. .ui.inverted.violet.basic.active.button {
  2142. box-shadow: 0px 0px 0px 2px #8a73ff inset !important;
  2143. color: #a291fb !important;
  2144. }
  2145. .ui.inverted.violet.basic.buttons .button:active,
  2146. .ui.inverted.violet.buttons .basic.button:active,
  2147. .ui.inverted.violet.basic.button:active {
  2148. box-shadow: 0px 0px 0px 2px #7860f9 inset !important;
  2149. color: #a291fb !important;
  2150. }
  2151. /*--- Purple ---*/
  2152. .ui.purple.buttons .button,
  2153. .ui.purple.button {
  2154. background-color: #a333c8;
  2155. color: #ffffff;
  2156. text-shadow: none;
  2157. background-image: none;
  2158. }
  2159. .ui.purple.button {
  2160. box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
  2161. }
  2162. .ui.purple.buttons .button:hover,
  2163. .ui.purple.button:hover {
  2164. background-color: #9627ba;
  2165. color: #ffffff;
  2166. text-shadow: none;
  2167. }
  2168. .ui.purple.buttons .button:focus,
  2169. .ui.purple.button:focus {
  2170. background-color: #8f1eb4;
  2171. color: #ffffff;
  2172. text-shadow: none;
  2173. }
  2174. .ui.purple.buttons .button:active,
  2175. .ui.purple.button:active {
  2176. background-color: #82299f;
  2177. color: #ffffff;
  2178. text-shadow: none;
  2179. }
  2180. .ui.purple.buttons .active.button,
  2181. .ui.purple.buttons .active.button:active,
  2182. .ui.purple.active.button,
  2183. .ui.purple.button .active.button:active {
  2184. background-color: #9724be;
  2185. color: #ffffff;
  2186. text-shadow: none;
  2187. }
  2188. /* Basic */
  2189. .ui.basic.purple.buttons .button,
  2190. .ui.basic.purple.button {
  2191. box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset !important;
  2192. color: rgba(0, 0, 0, 0.6) !important;
  2193. }
  2194. .ui.basic.purple.buttons .button:hover,
  2195. .ui.basic.purple.button:hover {
  2196. background: transparent !important;
  2197. box-shadow: 0px 0px 0px 2px #9627ba inset !important;
  2198. color: #9627ba !important;
  2199. }
  2200. .ui.basic.purple.buttons .button:focus,
  2201. .ui.basic.purple.button:focus {
  2202. background: transparent !important;
  2203. box-shadow: 0px 0px 0px 2px #8f1eb4 inset !important;
  2204. }
  2205. .ui.basic.purple.buttons .active.button,
  2206. .ui.basic.purple.active.button {
  2207. background: transparent !important;
  2208. box-shadow: 0px 0px 0px 2px #9724be inset !important;
  2209. color: #82299f !important;
  2210. }
  2211. .ui.basic.purple.buttons .button:active,
  2212. .ui.basic.purple.button:active {
  2213. box-shadow: 0px 0px 0px 2px #82299f inset !important;
  2214. color: #82299f !important;
  2215. }
  2216. .ui.buttons > .basic.purple.button:not(:first-child) {
  2217. margin-left: -2px;
  2218. }
  2219. /* Inverted */
  2220. .ui.inverted.purple.buttons .button,
  2221. .ui.inverted.purple.button {
  2222. background-color: transparent;
  2223. box-shadow: 0px 0px 0px 2px #dc73ff inset !important;
  2224. color: #dc73ff;
  2225. }
  2226. .ui.inverted.purple.buttons .button:hover,
  2227. .ui.inverted.purple.button:hover,
  2228. .ui.inverted.purple.buttons .button:focus,
  2229. .ui.inverted.purple.button:focus,
  2230. .ui.inverted.purple.buttons .button.active,
  2231. .ui.inverted.purple.button.active,
  2232. .ui.inverted.purple.buttons .button:active,
  2233. .ui.inverted.purple.button:active {
  2234. box-shadow: none !important;
  2235. color: #ffffff;
  2236. }
  2237. .ui.inverted.purple.buttons .button:hover,
  2238. .ui.inverted.purple.button:hover {
  2239. background-color: #d65aff;
  2240. }
  2241. .ui.inverted.purple.buttons .button:focus,
  2242. .ui.inverted.purple.button:focus {
  2243. background-color: #d24aff;
  2244. }
  2245. .ui.inverted.purple.buttons .active.button,
  2246. .ui.inverted.purple.active.button {
  2247. background-color: #d65aff;
  2248. }
  2249. .ui.inverted.purple.buttons .button:active,
  2250. .ui.inverted.purple.button:active {
  2251. background-color: #cf40ff;
  2252. }
  2253. /* Inverted Basic */
  2254. .ui.inverted.purple.basic.buttons .button,
  2255. .ui.inverted.purple.buttons .basic.button,
  2256. .ui.inverted.purple.basic.button {
  2257. background-color: transparent;
  2258. box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
  2259. color: #ffffff !important;
  2260. }
  2261. .ui.inverted.purple.basic.buttons .button:hover,
  2262. .ui.inverted.purple.buttons .basic.button:hover,
  2263. .ui.inverted.purple.basic.button:hover {
  2264. box-shadow: 0px 0px 0px 2px #d65aff inset !important;
  2265. color: #dc73ff !important;
  2266. }
  2267. .ui.inverted.purple.basic.buttons .button:focus,
  2268. .ui.inverted.purple.basic.buttons .button:focus,
  2269. .ui.inverted.purple.basic.button:focus {
  2270. box-shadow: 0px 0px 0px 2px #d24aff inset !important;
  2271. color: #dc73ff !important;
  2272. }
  2273. .ui.inverted.purple.basic.buttons .active.button,
  2274. .ui.inverted.purple.buttons .basic.active.button,
  2275. .ui.inverted.purple.basic.active.button {
  2276. box-shadow: 0px 0px 0px 2px #d65aff inset !important;
  2277. color: #dc73ff !important;
  2278. }
  2279. .ui.inverted.purple.basic.buttons .button:active,
  2280. .ui.inverted.purple.buttons .basic.button:active,
  2281. .ui.inverted.purple.basic.button:active {
  2282. box-shadow: 0px 0px 0px 2px #cf40ff inset !important;
  2283. color: #dc73ff !important;
  2284. }
  2285. /*--- Red ---*/
  2286. .ui.red.buttons .button,
  2287. .ui.red.button {
  2288. background-color: #db2828;
  2289. color: #ffffff;
  2290. text-shadow: none;
  2291. background-image: none;
  2292. }
  2293. .ui.red.button {
  2294. box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
  2295. }
  2296. .ui.red.buttons .button:hover,
  2297. .ui.red.button:hover {
  2298. background-color: #d01919;
  2299. color: #ffffff;
  2300. text-shadow: none;
  2301. }
  2302. .ui.red.buttons .button:focus,
  2303. .ui.red.button:focus {
  2304. background-color: #ca1010;
  2305. color: #ffffff;
  2306. text-shadow: none;
  2307. }
  2308. .ui.red.buttons .button:active,
  2309. .ui.red.button:active {
  2310. background-color: #b21e1e;
  2311. color: #ffffff;
  2312. text-shadow: none;
  2313. }
  2314. .ui.red.buttons .active.button,
  2315. .ui.red.buttons .active.button:active,
  2316. .ui.red.active.button,
  2317. .ui.red.button .active.button:active {
  2318. background-color: #d41515;
  2319. color: #ffffff;
  2320. text-shadow: none;
  2321. }
  2322. /* Basic */
  2323. .ui.basic.red.buttons .button,
  2324. .ui.basic.red.button {
  2325. box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset !important;
  2326. color: rgba(0, 0, 0, 0.6) !important;
  2327. }
  2328. .ui.basic.red.buttons .button:hover,
  2329. .ui.basic.red.button:hover {
  2330. background: transparent !important;
  2331. box-shadow: 0px 0px 0px 2px #d01919 inset !important;
  2332. color: #d01919 !important;
  2333. }
  2334. .ui.basic.red.buttons .button:focus,
  2335. .ui.basic.red.button:focus {
  2336. background: transparent !important;
  2337. box-shadow: 0px 0px 0px 2px #ca1010 inset !important;
  2338. }
  2339. .ui.basic.red.buttons .active.button,
  2340. .ui.basic.red.active.button {
  2341. background: transparent !important;
  2342. box-shadow: 0px 0px 0px 2px #d41515 inset !important;
  2343. color: #b21e1e !important;
  2344. }
  2345. .ui.basic.red.buttons .button:active,
  2346. .ui.basic.red.button:active {
  2347. box-shadow: 0px 0px 0px 2px #b21e1e inset !important;
  2348. color: #b21e1e !important;
  2349. }
  2350. .ui.buttons > .basic.red.button:not(:first-child) {
  2351. margin-left: -2px;
  2352. }
  2353. /* Inverted */
  2354. .ui.inverted.red.buttons .button,
  2355. .ui.inverted.red.button {
  2356. background-color: transparent;
  2357. box-shadow: 0px 0px 0px 2px #ff695e inset !important;
  2358. color: #ff695e;
  2359. }
  2360. .ui.inverted.red.buttons .button:hover,
  2361. .ui.inverted.red.button:hover,
  2362. .ui.inverted.red.buttons .button:focus,
  2363. .ui.inverted.red.button:focus,
  2364. .ui.inverted.red.buttons .button.active,
  2365. .ui.inverted.red.button.active,
  2366. .ui.inverted.red.buttons .button:active,
  2367. .ui.inverted.red.button:active {
  2368. box-shadow: none !important;
  2369. color: #ffffff;
  2370. }
  2371. .ui.inverted.red.buttons .button:hover,
  2372. .ui.inverted.red.button:hover {
  2373. background-color: #ff5144;
  2374. }
  2375. .ui.inverted.red.buttons .button:focus,
  2376. .ui.inverted.red.button:focus {
  2377. background-color: #ff4335;
  2378. }
  2379. .ui.inverted.red.buttons .active.button,
  2380. .ui.inverted.red.active.button {
  2381. background-color: #ff5144;
  2382. }
  2383. .ui.inverted.red.buttons .button:active,
  2384. .ui.inverted.red.button:active {
  2385. background-color: #ff392b;
  2386. }
  2387. /* Inverted Basic */
  2388. .ui.inverted.red.basic.buttons .button,
  2389. .ui.inverted.red.buttons .basic.button,
  2390. .ui.inverted.red.basic.button {
  2391. background-color: transparent;
  2392. box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
  2393. color: #ffffff !important;
  2394. }
  2395. .ui.inverted.red.basic.buttons .button:hover,
  2396. .ui.inverted.red.buttons .basic.button:hover,
  2397. .ui.inverted.red.basic.button:hover {
  2398. box-shadow: 0px 0px 0px 2px #ff5144 inset !important;
  2399. color: #ff695e !important;
  2400. }
  2401. .ui.inverted.red.basic.buttons .button:focus,
  2402. .ui.inverted.red.basic.buttons .button:focus,
  2403. .ui.inverted.red.basic.button:focus {
  2404. box-shadow: 0px 0px 0px 2px #ff4335 inset !important;
  2405. color: #ff695e !important;
  2406. }
  2407. .ui.inverted.red.basic.buttons .active.button,
  2408. .ui.inverted.red.buttons .basic.active.button,
  2409. .ui.inverted.red.basic.active.button {
  2410. box-shadow: 0px 0px 0px 2px #ff5144 inset !important;
  2411. color: #ff695e !important;
  2412. }
  2413. .ui.inverted.red.basic.buttons .button:active,
  2414. .ui.inverted.red.buttons .basic.button:active,
  2415. .ui.inverted.red.basic.button:active {
  2416. box-shadow: 0px 0px 0px 2px #ff392b inset !important;
  2417. color: #ff695e !important;
  2418. }
  2419. /*--- Teal ---*/
  2420. .ui.teal.buttons .button,
  2421. .ui.teal.button {
  2422. background-color: #00b5ad;
  2423. color: #ffffff;
  2424. text-shadow: none;
  2425. background-image: none;
  2426. }
  2427. .ui.teal.button {
  2428. box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
  2429. }
  2430. .ui.teal.buttons .button:hover,
  2431. .ui.teal.button:hover {
  2432. background-color: #009c95;
  2433. color: #ffffff;
  2434. text-shadow: none;
  2435. }
  2436. .ui.teal.buttons .button:focus,
  2437. .ui.teal.button:focus {
  2438. background-color: #008c86;
  2439. color: #ffffff;
  2440. text-shadow: none;
  2441. }
  2442. .ui.teal.buttons .button:active,
  2443. .ui.teal.button:active {
  2444. background-color: #00827c;
  2445. color: #ffffff;
  2446. text-shadow: none;
  2447. }
  2448. .ui.teal.buttons .active.button,
  2449. .ui.teal.buttons .active.button:active,
  2450. .ui.teal.active.button,
  2451. .ui.teal.button .active.button:active {
  2452. background-color: #009c95;
  2453. color: #ffffff;
  2454. text-shadow: none;
  2455. }
  2456. /* Basic */
  2457. .ui.basic.teal.buttons .button,
  2458. .ui.basic.teal.button {
  2459. box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset !important;
  2460. color: rgba(0, 0, 0, 0.6) !important;
  2461. }
  2462. .ui.basic.teal.buttons .button:hover,
  2463. .ui.basic.teal.button:hover {
  2464. background: transparent !important;
  2465. box-shadow: 0px 0px 0px 2px #009c95 inset !important;
  2466. color: #009c95 !important;
  2467. }
  2468. .ui.basic.teal.buttons .button:focus,
  2469. .ui.basic.teal.button:focus {
  2470. background: transparent !important;
  2471. box-shadow: 0px 0px 0px 2px #008c86 inset !important;
  2472. }
  2473. .ui.basic.teal.buttons .active.button,
  2474. .ui.basic.teal.active.button {
  2475. background: transparent !important;
  2476. box-shadow: 0px 0px 0px 2px #009c95 inset !important;
  2477. color: #00827c !important;
  2478. }
  2479. .ui.basic.teal.buttons .button:active,
  2480. .ui.basic.teal.button:active {
  2481. box-shadow: 0px 0px 0px 2px #00827c inset !important;
  2482. color: #00827c !important;
  2483. }
  2484. .ui.buttons > .basic.teal.button:not(:first-child) {
  2485. margin-left: -2px;
  2486. }
  2487. /* Inverted */
  2488. .ui.inverted.teal.buttons .button,
  2489. .ui.inverted.teal.button {
  2490. background-color: transparent;
  2491. box-shadow: 0px 0px 0px 2px #6dffff inset !important;
  2492. color: #6dffff;
  2493. }
  2494. .ui.inverted.teal.buttons .button:hover,
  2495. .ui.inverted.teal.button:hover,
  2496. .ui.inverted.teal.buttons .button:focus,
  2497. .ui.inverted.teal.button:focus,
  2498. .ui.inverted.teal.buttons .button.active,
  2499. .ui.inverted.teal.button.active,
  2500. .ui.inverted.teal.buttons .button:active,
  2501. .ui.inverted.teal.button:active {
  2502. box-shadow: none !important;
  2503. color: rgba(0, 0, 0, 0.6);
  2504. }
  2505. .ui.inverted.teal.buttons .button:hover,
  2506. .ui.inverted.teal.button:hover {
  2507. background-color: #54ffff;
  2508. }
  2509. .ui.inverted.teal.buttons .button:focus,
  2510. .ui.inverted.teal.button:focus {
  2511. background-color: #44ffff;
  2512. }
  2513. .ui.inverted.teal.buttons .active.button,
  2514. .ui.inverted.teal.active.button {
  2515. background-color: #54ffff;
  2516. }
  2517. .ui.inverted.teal.buttons .button:active,
  2518. .ui.inverted.teal.button:active {
  2519. background-color: #3affff;
  2520. }
  2521. /* Inverted Basic */
  2522. .ui.inverted.teal.basic.buttons .button,
  2523. .ui.inverted.teal.buttons .basic.button,
  2524. .ui.inverted.teal.basic.button {
  2525. background-color: transparent;
  2526. box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
  2527. color: #ffffff !important;
  2528. }
  2529. .ui.inverted.teal.basic.buttons .button:hover,
  2530. .ui.inverted.teal.buttons .basic.button:hover,
  2531. .ui.inverted.teal.basic.button:hover {
  2532. box-shadow: 0px 0px 0px 2px #54ffff inset !important;
  2533. color: #6dffff !important;
  2534. }
  2535. .ui.inverted.teal.basic.buttons .button:focus,
  2536. .ui.inverted.teal.basic.buttons .button:focus,
  2537. .ui.inverted.teal.basic.button:focus {
  2538. box-shadow: 0px 0px 0px 2px #44ffff inset !important;
  2539. color: #6dffff !important;
  2540. }
  2541. .ui.inverted.teal.basic.buttons .active.button,
  2542. .ui.inverted.teal.buttons .basic.active.button,
  2543. .ui.inverted.teal.basic.active.button {
  2544. box-shadow: 0px 0px 0px 2px #54ffff inset !important;
  2545. color: #6dffff !important;
  2546. }
  2547. .ui.inverted.teal.basic.buttons .button:active,
  2548. .ui.inverted.teal.buttons .basic.button:active,
  2549. .ui.inverted.teal.basic.button:active {
  2550. box-shadow: 0px 0px 0px 2px #3affff inset !important;
  2551. color: #6dffff !important;
  2552. }
  2553. /*--- Olive ---*/
  2554. .ui.olive.buttons .button,
  2555. .ui.olive.button {
  2556. background-color: #b5cc18;
  2557. color: #ffffff;
  2558. text-shadow: none;
  2559. background-image: none;
  2560. }
  2561. .ui.olive.button {
  2562. box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
  2563. }
  2564. .ui.olive.buttons .button:hover,
  2565. .ui.olive.button:hover {
  2566. background-color: #a7bd0d;
  2567. color: #ffffff;
  2568. text-shadow: none;
  2569. }
  2570. .ui.olive.buttons .button:focus,
  2571. .ui.olive.button:focus {
  2572. background-color: #a0b605;
  2573. color: #ffffff;
  2574. text-shadow: none;
  2575. }
  2576. .ui.olive.buttons .button:active,
  2577. .ui.olive.button:active {
  2578. background-color: #8d9e13;
  2579. color: #ffffff;
  2580. text-shadow: none;
  2581. }
  2582. .ui.olive.buttons .active.button,
  2583. .ui.olive.buttons .active.button:active,
  2584. .ui.olive.active.button,
  2585. .ui.olive.button .active.button:active {
  2586. background-color: #aac109;
  2587. color: #ffffff;
  2588. text-shadow: none;
  2589. }
  2590. /* Basic */
  2591. .ui.basic.olive.buttons .button,
  2592. .ui.basic.olive.button {
  2593. box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset !important;
  2594. color: rgba(0, 0, 0, 0.6) !important;
  2595. }
  2596. .ui.basic.olive.buttons .button:hover,
  2597. .ui.basic.olive.button:hover {
  2598. background: transparent !important;
  2599. box-shadow: 0px 0px 0px 2px #a7bd0d inset !important;
  2600. color: #a7bd0d !important;
  2601. }
  2602. .ui.basic.olive.buttons .button:focus,
  2603. .ui.basic.olive.button:focus {
  2604. background: transparent !important;
  2605. box-shadow: 0px 0px 0px 2px #a0b605 inset !important;
  2606. }
  2607. .ui.basic.olive.buttons .active.button,
  2608. .ui.basic.olive.active.button {
  2609. background: transparent !important;
  2610. box-shadow: 0px 0px 0px 2px #aac109 inset !important;
  2611. color: #8d9e13 !important;
  2612. }
  2613. .ui.basic.olive.buttons .button:active,
  2614. .ui.basic.olive.button:active {
  2615. box-shadow: 0px 0px 0px 2px #8d9e13 inset !important;
  2616. color: #8d9e13 !important;
  2617. }
  2618. .ui.buttons > .basic.olive.button:not(:first-child) {
  2619. margin-left: -2px;
  2620. }
  2621. /* Inverted */
  2622. .ui.inverted.olive.buttons .button,
  2623. .ui.inverted.olive.button {
  2624. background-color: transparent;
  2625. box-shadow: 0px 0px 0px 2px #d9e778 inset !important;
  2626. color: #d9e778;
  2627. }
  2628. .ui.inverted.olive.buttons .button:hover,
  2629. .ui.inverted.olive.button:hover,
  2630. .ui.inverted.olive.buttons .button:focus,
  2631. .ui.inverted.olive.button:focus,
  2632. .ui.inverted.olive.buttons .button.active,
  2633. .ui.inverted.olive.button.active,
  2634. .ui.inverted.olive.buttons .button:active,
  2635. .ui.inverted.olive.button:active {
  2636. box-shadow: none !important;
  2637. color: rgba(0, 0, 0, 0.6);
  2638. }
  2639. .ui.inverted.olive.buttons .button:hover,
  2640. .ui.inverted.olive.button:hover {
  2641. background-color: #d8ea5c;
  2642. }
  2643. .ui.inverted.olive.buttons .button:focus,
  2644. .ui.inverted.olive.button:focus {
  2645. background-color: #daef47;
  2646. }
  2647. .ui.inverted.olive.buttons .active.button,
  2648. .ui.inverted.olive.active.button {
  2649. background-color: #daed59;
  2650. }
  2651. .ui.inverted.olive.buttons .button:active,
  2652. .ui.inverted.olive.button:active {
  2653. background-color: #cddf4d;
  2654. }
  2655. /* Inverted Basic */
  2656. .ui.inverted.olive.basic.buttons .button,
  2657. .ui.inverted.olive.buttons .basic.button,
  2658. .ui.inverted.olive.basic.button {
  2659. background-color: transparent;
  2660. box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
  2661. color: #ffffff !important;
  2662. }
  2663. .ui.inverted.olive.basic.buttons .button:hover,
  2664. .ui.inverted.olive.buttons .basic.button:hover,
  2665. .ui.inverted.olive.basic.button:hover {
  2666. box-shadow: 0px 0px 0px 2px #d8ea5c inset !important;
  2667. color: #d9e778 !important;
  2668. }
  2669. .ui.inverted.olive.basic.buttons .button:focus,
  2670. .ui.inverted.olive.basic.buttons .button:focus,
  2671. .ui.inverted.olive.basic.button:focus {
  2672. box-shadow: 0px 0px 0px 2px #daef47 inset !important;
  2673. color: #d9e778 !important;
  2674. }
  2675. .ui.inverted.olive.basic.buttons .active.button,
  2676. .ui.inverted.olive.buttons .basic.active.button,
  2677. .ui.inverted.olive.basic.active.button {
  2678. box-shadow: 0px 0px 0px 2px #daed59 inset !important;
  2679. color: #d9e778 !important;
  2680. }
  2681. .ui.inverted.olive.basic.buttons .button:active,
  2682. .ui.inverted.olive.buttons .basic.button:active,
  2683. .ui.inverted.olive.basic.button:active {
  2684. box-shadow: 0px 0px 0px 2px #cddf4d inset !important;
  2685. color: #d9e778 !important;
  2686. }
  2687. /*--- Yellow ---*/
  2688. .ui.yellow.buttons .button,
  2689. .ui.yellow.button {
  2690. background-color: #fbbd08;
  2691. color: #ffffff;
  2692. text-shadow: none;
  2693. background-image: none;
  2694. }
  2695. .ui.yellow.button {
  2696. box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
  2697. }
  2698. .ui.yellow.buttons .button:hover,
  2699. .ui.yellow.button:hover {
  2700. background-color: #eaae00;
  2701. color: #ffffff;
  2702. text-shadow: none;
  2703. }
  2704. .ui.yellow.buttons .button:focus,
  2705. .ui.yellow.button:focus {
  2706. background-color: #daa300;
  2707. color: #ffffff;
  2708. text-shadow: none;
  2709. }
  2710. .ui.yellow.buttons .button:active,
  2711. .ui.yellow.button:active {
  2712. background-color: #cd9903;
  2713. color: #ffffff;
  2714. text-shadow: none;
  2715. }
  2716. .ui.yellow.buttons .active.button,
  2717. .ui.yellow.buttons .active.button:active,
  2718. .ui.yellow.active.button,
  2719. .ui.yellow.button .active.button:active {
  2720. background-color: #eaae00;
  2721. color: #ffffff;
  2722. text-shadow: none;
  2723. }
  2724. /* Basic */
  2725. .ui.basic.yellow.buttons .button,
  2726. .ui.basic.yellow.button {
  2727. box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset !important;
  2728. color: rgba(0, 0, 0, 0.6) !important;
  2729. }
  2730. .ui.basic.yellow.buttons .button:hover,
  2731. .ui.basic.yellow.button:hover {
  2732. background: transparent !important;
  2733. box-shadow: 0px 0px 0px 2px #eaae00 inset !important;
  2734. color: #eaae00 !important;
  2735. }
  2736. .ui.basic.yellow.buttons .button:focus,
  2737. .ui.basic.yellow.button:focus {
  2738. background: transparent !important;
  2739. box-shadow: 0px 0px 0px 2px #daa300 inset !important;
  2740. }
  2741. .ui.basic.yellow.buttons .active.button,
  2742. .ui.basic.yellow.active.button {
  2743. background: transparent !important;
  2744. box-shadow: 0px 0px 0px 2px #eaae00 inset !important;
  2745. color: #cd9903 !important;
  2746. }
  2747. .ui.basic.yellow.buttons .button:active,
  2748. .ui.basic.yellow.button:active {
  2749. box-shadow: 0px 0px 0px 2px #cd9903 inset !important;
  2750. color: #cd9903 !important;
  2751. }
  2752. .ui.buttons > .basic.yellow.button:not(:first-child) {
  2753. margin-left: -2px;
  2754. }
  2755. /* Inverted */
  2756. .ui.inverted.yellow.buttons .button,
  2757. .ui.inverted.yellow.button {
  2758. background-color: transparent;
  2759. box-shadow: 0px 0px 0px 2px #ffe21f inset !important;
  2760. color: #ffe21f;
  2761. }
  2762. .ui.inverted.yellow.buttons .button:hover,
  2763. .ui.inverted.yellow.button:hover,
  2764. .ui.inverted.yellow.buttons .button:focus,
  2765. .ui.inverted.yellow.button:focus,
  2766. .ui.inverted.yellow.buttons .button.active,
  2767. .ui.inverted.yellow.button.active,
  2768. .ui.inverted.yellow.buttons .button:active,
  2769. .ui.inverted.yellow.button:active {
  2770. box-shadow: none !important;
  2771. color: rgba(0, 0, 0, 0.6);
  2772. }
  2773. .ui.inverted.yellow.buttons .button:hover,
  2774. .ui.inverted.yellow.button:hover {
  2775. background-color: #ffdf05;
  2776. }
  2777. .ui.inverted.yellow.buttons .button:focus,
  2778. .ui.inverted.yellow.button:focus {
  2779. background-color: #f5d500;
  2780. }
  2781. .ui.inverted.yellow.buttons .active.button,
  2782. .ui.inverted.yellow.active.button {
  2783. background-color: #ffdf05;
  2784. }
  2785. .ui.inverted.yellow.buttons .button:active,
  2786. .ui.inverted.yellow.button:active {
  2787. background-color: #ebcd00;
  2788. }
  2789. /* Inverted Basic */
  2790. .ui.inverted.yellow.basic.buttons .button,
  2791. .ui.inverted.yellow.buttons .basic.button,
  2792. .ui.inverted.yellow.basic.button {
  2793. background-color: transparent;
  2794. box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
  2795. color: #ffffff !important;
  2796. }
  2797. .ui.inverted.yellow.basic.buttons .button:hover,
  2798. .ui.inverted.yellow.buttons .basic.button:hover,
  2799. .ui.inverted.yellow.basic.button:hover {
  2800. box-shadow: 0px 0px 0px 2px #ffdf05 inset !important;
  2801. color: #ffe21f !important;
  2802. }
  2803. .ui.inverted.yellow.basic.buttons .button:focus,
  2804. .ui.inverted.yellow.basic.buttons .button:focus,
  2805. .ui.inverted.yellow.basic.button:focus {
  2806. box-shadow: 0px 0px 0px 2px #f5d500 inset !important;
  2807. color: #ffe21f !important;
  2808. }
  2809. .ui.inverted.yellow.basic.buttons .active.button,
  2810. .ui.inverted.yellow.buttons .basic.active.button,
  2811. .ui.inverted.yellow.basic.active.button {
  2812. box-shadow: 0px 0px 0px 2px #ffdf05 inset !important;
  2813. color: #ffe21f !important;
  2814. }
  2815. .ui.inverted.yellow.basic.buttons .button:active,
  2816. .ui.inverted.yellow.buttons .basic.button:active,
  2817. .ui.inverted.yellow.basic.button:active {
  2818. box-shadow: 0px 0px 0px 2px #ebcd00 inset !important;
  2819. color: #ffe21f !important;
  2820. }
  2821. /*-------------------
  2822. Primary
  2823. --------------------*/
  2824. .ui.primary.buttons .button,
  2825. .ui.primary.button {
  2826. background-color: #2185d0;
  2827. color: #ffffff;
  2828. text-shadow: none;
  2829. background-image: none;
  2830. }
  2831. .ui.primary.button {
  2832. box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
  2833. }
  2834. .ui.primary.buttons .button:hover,
  2835. .ui.primary.button:hover {
  2836. background-color: #1678c2;
  2837. color: #ffffff;
  2838. text-shadow: none;
  2839. }
  2840. .ui.primary.buttons .button:focus,
  2841. .ui.primary.button:focus {
  2842. background-color: #0d71bb;
  2843. color: #ffffff;
  2844. text-shadow: none;
  2845. }
  2846. .ui.primary.buttons .button:active,
  2847. .ui.primary.button:active {
  2848. background-color: #1a69a4;
  2849. color: #ffffff;
  2850. text-shadow: none;
  2851. }
  2852. .ui.primary.buttons .active.button,
  2853. .ui.primary.active.button {
  2854. background-color: #1279c6;
  2855. color: #ffffff;
  2856. text-shadow: none;
  2857. }
  2858. /*-------------------
  2859. Secondary
  2860. --------------------*/
  2861. .ui.secondary.buttons .button,
  2862. .ui.secondary.button {
  2863. background-color: #1b1c1d;
  2864. color: #ffffff;
  2865. text-shadow: none;
  2866. background-image: none;
  2867. }
  2868. .ui.secondary.button {
  2869. box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
  2870. }
  2871. .ui.secondary.buttons .button:hover,
  2872. .ui.secondary.button:hover {
  2873. background-color: #27292a;
  2874. color: #ffffff;
  2875. text-shadow: none;
  2876. }
  2877. .ui.secondary.buttons .button:focus,
  2878. .ui.secondary.button:focus {
  2879. background-color: #2e3032;
  2880. color: #ffffff;
  2881. text-shadow: none;
  2882. }
  2883. .ui.secondary.buttons .button:active,
  2884. .ui.secondary.button:active {
  2885. background-color: #343637;
  2886. color: #ffffff;
  2887. text-shadow: none;
  2888. }
  2889. .ui.secondary.buttons .active.button,
  2890. .ui.secondary.active.button {
  2891. background-color: #27292a;
  2892. color: #ffffff;
  2893. text-shadow: none;
  2894. }
  2895. /*---------------
  2896. Positive
  2897. ----------------*/
  2898. .ui.positive.buttons .button,
  2899. .ui.positive.button {
  2900. background-color: #21ba45 !important;
  2901. color: #ffffff;
  2902. text-shadow: none;
  2903. background-image: none;
  2904. }
  2905. .ui.positive.button {
  2906. box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
  2907. }
  2908. .ui.positive.buttons .button:hover,
  2909. .ui.positive.button:hover {
  2910. background-color: #16ab39 !important;
  2911. color: #ffffff;
  2912. text-shadow: none;
  2913. }
  2914. .ui.positive.buttons .button:focus,
  2915. .ui.positive.button:focus {
  2916. background-color: #0ea432 !important;
  2917. color: #ffffff;
  2918. text-shadow: none;
  2919. }
  2920. .ui.positive.buttons .button:active,
  2921. .ui.positive.button:active {
  2922. background-color: #198f35 !important;
  2923. color: #ffffff;
  2924. text-shadow: none;
  2925. }
  2926. .ui.positive.buttons .active.button,
  2927. .ui.positive.active.button,
  2928. .ui.positive.buttons .active.button:active {
  2929. background-color: #13ae38;
  2930. color: #ffffff;
  2931. text-shadow: none;
  2932. }
  2933. /*---------------
  2934. Negative
  2935. ----------------*/
  2936. .ui.negative.buttons .button,
  2937. .ui.negative.button {
  2938. background-color: #db2828 !important;
  2939. color: #ffffff;
  2940. text-shadow: none;
  2941. background-image: none;
  2942. }
  2943. .ui.negative.button {
  2944. box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
  2945. }
  2946. .ui.negative.buttons .button:hover,
  2947. .ui.negative.button:hover {
  2948. background-color: #d01919 !important;
  2949. color: #ffffff;
  2950. text-shadow: none;
  2951. }
  2952. .ui.negative.buttons .button:focus,
  2953. .ui.negative.button:focus {
  2954. background-color: #ca1010 !important;
  2955. color: #ffffff;
  2956. text-shadow: none;
  2957. }
  2958. .ui.negative.buttons .button:active,
  2959. .ui.negative.button:active {
  2960. background-color: #b21e1e !important;
  2961. color: #ffffff;
  2962. text-shadow: none;
  2963. }
  2964. .ui.negative.buttons .active.button,
  2965. .ui.negative.active.button,
  2966. .ui.negative.buttons .active.button:active {
  2967. background-color: #d41515;
  2968. color: #ffffff;
  2969. text-shadow: none;
  2970. }
  2971. /*******************************
  2972. Groups
  2973. *******************************/
  2974. .ui.buttons {
  2975. display: -webkit-inline-box;
  2976. display: -webkit-inline-flex;
  2977. display: -ms-inline-flexbox;
  2978. display: inline-flex;
  2979. -webkit-box-orient: horizontal;
  2980. -webkit-box-direction: normal;
  2981. -webkit-flex-direction: row;
  2982. -ms-flex-direction: row;
  2983. flex-direction: row;
  2984. font-size: 0em;
  2985. vertical-align: baseline;
  2986. margin: 0em 0.25em 0em 0em;
  2987. }
  2988. .ui.buttons:not(.basic):not(.inverted) {
  2989. box-shadow: none;
  2990. }
  2991. /* Clearfix */
  2992. .ui.buttons:after {
  2993. content: ".";
  2994. display: block;
  2995. height: 0;
  2996. clear: both;
  2997. visibility: hidden;
  2998. }
  2999. /* Standard Group */
  3000. .ui.buttons .button {
  3001. -webkit-box-flex: 1;
  3002. -webkit-flex: 1 0 auto;
  3003. -ms-flex: 1 0 auto;
  3004. flex: 1 0 auto;
  3005. margin: 0em;
  3006. border-radius: 0em;
  3007. margin: 0px 0px 0px 0px;
  3008. }
  3009. .ui.buttons > .ui.button:not(.basic):not(.inverted),
  3010. .ui.buttons:not(.basic):not(.inverted) > .button {
  3011. box-shadow: 0px 0px 0px 1px transparent inset, 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
  3012. }
  3013. .ui.buttons .button:first-child {
  3014. border-left: none;
  3015. margin-left: 0em;
  3016. border-top-left-radius: 0.28571429rem;
  3017. border-bottom-left-radius: 0.28571429rem;
  3018. }
  3019. .ui.buttons .button:last-child {
  3020. border-top-right-radius: 0.28571429rem;
  3021. border-bottom-right-radius: 0.28571429rem;
  3022. }
  3023. /* Vertical Style */
  3024. .ui.vertical.buttons {
  3025. display: -webkit-inline-box;
  3026. display: -webkit-inline-flex;
  3027. display: -ms-inline-flexbox;
  3028. display: inline-flex;
  3029. -webkit-box-orient: vertical;
  3030. -webkit-box-direction: normal;
  3031. -webkit-flex-direction: column;
  3032. -ms-flex-direction: column;
  3033. flex-direction: column;
  3034. }
  3035. .ui.vertical.buttons .button {
  3036. display: block;
  3037. float: none;
  3038. width: 100%;
  3039. margin: 0px 0px 0px 0px;
  3040. box-shadow: none;
  3041. }
  3042. .ui.vertical.buttons .button:first-child,
  3043. .ui.vertical.buttons .mini.button:first-child,
  3044. .ui.vertical.buttons .tiny.button:first-child,
  3045. .ui.vertical.buttons .small.button:first-child,
  3046. .ui.vertical.buttons .massive.button:first-child,
  3047. .ui.vertical.buttons .huge.button:first-child {
  3048. border-radius: 0.28571429rem 0.28571429rem 0px 0px;
  3049. }
  3050. .ui.vertical.buttons .button:last-child,
  3051. .ui.vertical.buttons .mini.button:last-child,
  3052. .ui.vertical.buttons .tiny.button:last-child,
  3053. .ui.vertical.buttons .small.button:last-child,
  3054. .ui.vertical.buttons .massive.button:last-child,
  3055. .ui.vertical.buttons .huge.button:last-child,
  3056. .ui.vertical.buttons .gigantic.button:last-child {
  3057. margin-bottom: 0px;
  3058. border-radius: 0px 0px 0.28571429rem 0.28571429rem;
  3059. }
  3060. /*******************************
  3061. Theme Overrides
  3062. *******************************/
  3063. /*******************************
  3064. Site Overrides
  3065. *******************************/