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.

3246 lines
82 KiB

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