im_reader 1.0.0

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