github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/dist/components/button.css (about) 1 /*! 2 * # Semantic UI x.x - Button 3 * http://github.com/semantic-org/semantic-ui/ 4 * 5 * 6 * Copyright 2014 Contributorss 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-color: #e0e0e0; 25 color: rgba(0, 0, 0, 0.6); 26 font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif; 27 margin: 0em 0.25em 0em 0em; 28 padding: 0.78571em 1.5em 0.78571em; 29 text-transform: none; 30 text-shadow: none; 31 font-weight: bold; 32 line-height: 1; 33 font-style: normal; 34 text-align: center; 35 text-decoration: none; 36 background-image: none; 37 border-radius: 0.2857rem; 38 box-shadow: 0px 0px 0px 1px transparent inset, 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset; 39 -webkit-user-select: none; 40 -moz-user-select: none; 41 -ms-user-select: none; 42 user-select: none; 43 -webkit-transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease; 44 transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease; 45 will-change: ''; 46 -webkit-tap-highlight-color: transparent; 47 } 48 49 50 /******************************* 51 States 52 *******************************/ 53 54 55 /*-------------- 56 Hover 57 ---------------*/ 58 59 .ui.button:hover { 60 background-color: #e8e8e8; 61 background-image: none; 62 box-shadow: ''; 63 color: rgba(0, 0, 0, 0.8); 64 } 65 .ui.button:hover .icon { 66 opacity: 0.85; 67 } 68 69 /*-------------- 70 Focus 71 ---------------*/ 72 73 .ui.button:focus { 74 background-color: ''; 75 color: rgba(0, 0, 0, 0.8); 76 background-image: '' !important; 77 box-shadow: 0px 0px 0px 1px transparent inset, 0px 0px 1px rgba(81, 167, 232, 0.8) inset, 0px 0px 3px 2px rgba(81, 167, 232, 0.8) !important; 78 } 79 .ui.button:focus .icon { 80 opacity: 0.85; 81 } 82 83 /*-------------- 84 Down 85 ---------------*/ 86 87 .ui.button:active, 88 .ui.active.button:active { 89 background-color: #cccccc; 90 background-image: ''; 91 color: rgba(0, 0, 0, 0.8); 92 box-shadow: 0px 0px 0px 1px transparent inset, 0px 1px 4px 0px rgba(39, 41, 43, 0.15) inset !important; 93 } 94 95 /*-------------- 96 Active 97 ---------------*/ 98 99 .ui.active.button { 100 background-color: #d0d0d0; 101 background-image: none; 102 box-shadow: 0px 0px 0px 1px transparent inset; 103 color: rgba(0, 0, 0, 0.8); 104 } 105 .ui.active.button:hover { 106 background-color: #d0d0d0; 107 background-image: none; 108 color: rgba(0, 0, 0, 0.8); 109 } 110 .ui.active.button:active { 111 background-color: #d0d0d0; 112 background-image: none; 113 } 114 115 /*-------------- 116 Loading 117 ---------------*/ 118 119 120 /* Specificity hack */ 121 .ui.loading.loading.loading.loading.loading.loading.button { 122 position: relative; 123 cursor: default; 124 text-shadow: none !important; 125 color: transparent !important; 126 opacity: 1; 127 pointer-events: none; 128 -webkit-transition: all 0s linear, opacity 0.2s ease; 129 transition: all 0s linear, opacity 0.2s ease; 130 } 131 .ui.loading.button:before { 132 position: absolute; 133 content: ''; 134 top: 50%; 135 left: 50%; 136 margin: -0.64285em 0em 0em -0.64285em; 137 width: 1.2857em; 138 height: 1.2857em; 139 border-radius: 500rem; 140 border: 0.2em solid rgba(0, 0, 0, 0.15); 141 } 142 .ui.loading.button:after { 143 position: absolute; 144 content: ''; 145 top: 50%; 146 left: 50%; 147 margin: -0.64285em 0em 0em -0.64285em; 148 width: 1.2857em; 149 height: 1.2857em; 150 -webkit-animation: button-spin 0.6s linear; 151 animation: button-spin 0.6s linear; 152 -webkit-animation-iteration-count: infinite; 153 animation-iteration-count: infinite; 154 border-radius: 500rem; 155 border-color: #ffffff transparent transparent; 156 border-style: solid; 157 border-width: 0.2em; 158 box-shadow: 0px 0px 0px 1px transparent; 159 } 160 .ui.labeled.icon.loading.button .icon { 161 background-color: transparent; 162 box-shadow: none; 163 } 164 @-webkit-keyframes button-spin { 165 from { 166 -webkit-transform: rotate(0deg); 167 transform: rotate(0deg); 168 } 169 to { 170 -webkit-transform: rotate(360deg); 171 transform: rotate(360deg); 172 } 173 } 174 @keyframes button-spin { 175 from { 176 -webkit-transform: rotate(0deg); 177 transform: rotate(0deg); 178 } 179 to { 180 -webkit-transform: rotate(360deg); 181 transform: rotate(360deg); 182 } 183 } 184 .ui.basic.loading.button:not(.inverted):before { 185 border-color: rgba(0, 0, 0, 0.1); 186 } 187 .ui.basic.loading.button:not(.inverted):after { 188 border-top-color: #aaaaaa; 189 } 190 191 /*------------------- 192 Disabled 193 --------------------*/ 194 195 .ui.buttons .disabled.button, 196 .ui.disabled.button, 197 .ui.button:disabled, 198 .ui.disabled.button:hover, 199 .ui.disabled.active.button { 200 cursor: default; 201 background-color: #dcddde !important; 202 color: rgba(0, 0, 0, 0.4) !important; 203 opacity: 0.3 !important; 204 background-image: none !important; 205 box-shadow: none !important; 206 pointer-events: none; 207 } 208 209 /* Basic Group With Disabled */ 210 .ui.basic.buttons .ui.disabled.button { 211 border-color: rgba(39, 41, 43, 0.5); 212 } 213 214 215 /******************************* 216 Types 217 *******************************/ 218 219 220 /*------------------- 221 Animated 222 --------------------*/ 223 224 .ui.animated.button { 225 position: relative; 226 overflow: hidden; 227 vertical-align: middle; 228 padding-right: 0em !important; 229 } 230 .ui.animated.button .content { 231 will-change: transform, opacity; 232 } 233 .ui.animated.button .visible.content { 234 position: relative; 235 margin-right: 1.5em; 236 } 237 .ui.animated.button .hidden.content { 238 position: absolute; 239 width: 100%; 240 } 241 242 /* Horizontal */ 243 .ui.animated.button .visible.content, 244 .ui.animated.button .hidden.content { 245 -webkit-transition: right 0.3s ease 0s; 246 transition: right 0.3s ease 0s; 247 } 248 .ui.animated.button .visible.content { 249 left: auto; 250 right: 0%; 251 } 252 .ui.animated.button .hidden.content { 253 top: 50%; 254 left: auto; 255 right: -100%; 256 margin-top: -0.5em; 257 } 258 .ui.animated.button:hover .visible.content { 259 left: auto; 260 right: 200%; 261 } 262 .ui.animated.button:hover .hidden.content { 263 left: auto; 264 right: 0%; 265 } 266 267 /* Vertical */ 268 .ui.vertical.animated.button .visible.content, 269 .ui.vertical.animated.button .hidden.content { 270 -webkit-transition: top 0.3s ease, -webkit-transform 0.3s ease; 271 transition: top 0.3s ease, transform 0.3s ease; 272 } 273 .ui.vertical.animated.button .visible.content { 274 -webkit-transform: translateY(0%); 275 -ms-transform: translateY(0%); 276 transform: translateY(0%); 277 right: auto; 278 } 279 .ui.vertical.animated.button .hidden.content { 280 top: -50%; 281 left: 0%; 282 right: auto; 283 } 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:hover .hidden.content { 291 top: 50%; 292 right: auto; 293 } 294 295 /* Fade */ 296 .ui.fade.animated.button .visible.content, 297 .ui.fade.animated.button .hidden.content { 298 -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease; 299 transition: opacity 0.3s ease, transform 0.3s ease; 300 } 301 .ui.fade.animated.button .visible.content { 302 left: auto; 303 right: auto; 304 opacity: 1; 305 -webkit-transform: scale(1); 306 -ms-transform: scale(1); 307 transform: scale(1); 308 } 309 .ui.fade.animated.button .hidden.content { 310 opacity: 0; 311 left: 0%; 312 right: auto; 313 -webkit-transform: scale(1.5); 314 -ms-transform: scale(1.5); 315 transform: scale(1.5); 316 } 317 .ui.fade.animated.button:hover .visible.content { 318 left: auto; 319 right: auto; 320 opacity: 0; 321 -webkit-transform: scale(0.75); 322 -ms-transform: scale(0.75); 323 transform: scale(0.75); 324 } 325 .ui.fade.animated.button:hover .hidden.content { 326 left: 0%; 327 right: auto; 328 opacity: 1; 329 -webkit-transform: scale(1); 330 -ms-transform: scale(1); 331 transform: scale(1); 332 } 333 334 /*------------------- 335 Inverted 336 --------------------*/ 337 338 .ui.inverted.button { 339 box-shadow: 0px 0px 0px 2px #ffffff inset !important; 340 background: transparent none; 341 color: #ffffff; 342 text-shadow: none !important; 343 } 344 .ui.inverted.buttons .button { 345 margin: 0px 0px 0px -2px; 346 } 347 .ui.inverted.buttons .button:first-child { 348 margin-left: 0em; 349 } 350 .ui.inverted.vertical.buttons .button { 351 margin: 0px 0px -2px 0px; 352 } 353 .ui.inverted.vertical.buttons .button:first-child { 354 margin-top: 0em; 355 } 356 .ui.inverted.buttons .button:hover { 357 position: relative; 358 } 359 .ui.inverted.button:hover { 360 background: #ffffff; 361 box-shadow: 0px 0px 0px 2px #ffffff inset !important; 362 color: rgba(0, 0, 0, 0.8); 363 } 364 365 /*------------------- 366 Social 367 --------------------*/ 368 369 370 /* Facebook */ 371 .ui.facebook.button { 372 background-color: #3b579d; 373 color: #ffffff; 374 text-shadow: none; 375 background-image: none; 376 box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset; 377 } 378 .ui.facebook.button:hover { 379 background-color: #3f5da8; 380 color: #ffffff; 381 text-shadow: none; 382 } 383 .ui.facebook.button:active { 384 background-color: #314983; 385 color: #ffffff; 386 text-shadow: none; 387 } 388 389 /* Twitter */ 390 .ui.twitter.button { 391 background-color: #4092cc; 392 color: #ffffff; 393 text-shadow: none; 394 background-image: none; 395 box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset; 396 } 397 .ui.twitter.button:hover { 398 background-color: #4c99cf; 399 color: #ffffff; 400 text-shadow: none; 401 } 402 .ui.twitter.button:active { 403 background-color: #3180b7; 404 color: #ffffff; 405 text-shadow: none; 406 } 407 408 /* Google Plus */ 409 .ui.google.plus.button { 410 background-color: #d34836; 411 color: #ffffff; 412 text-shadow: none; 413 background-image: none; 414 box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset; 415 } 416 .ui.google.plus.button:hover { 417 background-color: #d65343; 418 color: #ffffff; 419 text-shadow: none; 420 } 421 .ui.google.plus.button:active { 422 background-color: #bc3a29; 423 color: #ffffff; 424 text-shadow: none; 425 } 426 427 /* Linked In */ 428 .ui.linkedin.button { 429 background-color: #1f88be; 430 color: #ffffff; 431 text-shadow: none; 432 } 433 .ui.linkedin.button:hover { 434 background-color: #2191cb; 435 color: #ffffff; 436 text-shadow: none; 437 } 438 .ui.linkedin.button:active { 439 background-color: #1a729f; 440 color: #ffffff; 441 text-shadow: none; 442 } 443 444 /* YouTube */ 445 .ui.youtube.button { 446 background-color: #cc181e; 447 color: #ffffff; 448 text-shadow: none; 449 background-image: none; 450 box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset; 451 } 452 .ui.youtube.button:hover { 453 background-color: #da1a20; 454 color: #ffffff; 455 text-shadow: none; 456 } 457 .ui.youtube.button:active { 458 background-color: #ac1419; 459 color: #ffffff; 460 text-shadow: none; 461 } 462 463 /* Instagram */ 464 .ui.instagram.button { 465 background-color: #49769c; 466 color: #ffffff; 467 text-shadow: none; 468 background-image: none; 469 box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset; 470 } 471 .ui.instagram.button:hover { 472 background-color: #4e7ea6; 473 color: #ffffff; 474 text-shadow: none; 475 } 476 .ui.instagram.button:active { 477 background-color: #3e6484; 478 color: #ffffff; 479 text-shadow: none; 480 } 481 482 /* Pinterest */ 483 .ui.pinterest.button { 484 background-color: #00aced; 485 color: #ffffff; 486 text-shadow: none; 487 background-image: none; 488 box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset; 489 } 490 .ui.pinterest.button:hover { 491 background-color: #00b7fc; 492 color: #ffffff; 493 text-shadow: none; 494 } 495 .ui.pinterest.button:active { 496 background-color: #0092c9; 497 color: #ffffff; 498 text-shadow: none; 499 } 500 501 /* VK */ 502 .ui.vk.button { 503 background-color: #4D7198; 504 color: #ffffff; 505 background-image: none; 506 box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset; 507 } 508 .ui.vk.button:hover { 509 background-color: #5279a2; 510 color: #ffffff; 511 } 512 .ui.vk.button:active { 513 background-color: #415f80; 514 color: #ffffff; 515 } 516 517 /*-------------- 518 Icon 519 ---------------*/ 520 521 .ui.button > .icon { 522 opacity: 0.8; 523 margin: 0em 0.4em 0em -0.2em; 524 -webkit-transition: opacity 0.2s ease; 525 transition: opacity 0.2s ease; 526 vertical-align: baseline; 527 color: ''; 528 } 529 .ui.button > .right.icon { 530 margin: 0em -0.2em 0em 0.4em; 531 } 532 533 534 /******************************* 535 Variations 536 *******************************/ 537 538 539 /*------------------- 540 Floated 541 --------------------*/ 542 543 .ui[class*="left floated"].buttons, 544 .ui[class*="left floated"].button { 545 float: left; 546 margin-left: 0em; 547 margin-right: 0.25em; 548 } 549 .ui[class*="right floated"].buttons, 550 .ui[class*="right floated"].button { 551 float: right; 552 margin-right: 0em; 553 margin-left: 0.25em; 554 } 555 556 /*------------------- 557 Compact 558 --------------------*/ 559 560 .ui.compact.buttons .button, 561 .ui.compact.button { 562 padding: 0.5892825em 1.125em 0.5892825em; 563 } 564 .ui.compact.icon.buttons .button, 565 .ui.compact.icon.button { 566 padding: 0.5892825em 0.5892825em 0.5892825em; 567 } 568 .ui.compact.labeled.icon.buttons .button, 569 .ui.compact.labeled.icon.button { 570 padding: 0.5892825em 3.69642em 0.5892825em; 571 } 572 573 /*------------------- 574 Sizes 575 --------------------*/ 576 577 .ui.mini.buttons .button, 578 .ui.mini.buttons .or, 579 .ui.mini.button { 580 font-size: 0.71428571rem; 581 } 582 .ui.tiny.buttons .button, 583 .ui.tiny.buttons .or, 584 .ui.tiny.button { 585 font-size: 0.85714286rem; 586 } 587 .ui.small.buttons .button, 588 .ui.small.buttons .or, 589 .ui.small.button { 590 font-size: 0.92857143rem; 591 } 592 .ui.buttons .button, 593 .ui.buttons .or, 594 .ui.button { 595 font-size: 1rem; 596 } 597 .ui.large.buttons .button, 598 .ui.large.buttons .or, 599 .ui.large.button { 600 font-size: 1.14285714rem; 601 } 602 .ui.big.buttons .button, 603 .ui.big.buttons .or, 604 .ui.big.button { 605 font-size: 1.28571429rem; 606 } 607 .ui.huge.buttons .button, 608 .ui.huge.buttons .or, 609 .ui.huge.button { 610 font-size: 1.42857143rem; 611 } 612 .ui.massive.buttons .button, 613 .ui.massive.buttons .or, 614 .ui.massive.button { 615 font-size: 1.71428571rem; 616 } 617 618 /*-------------- 619 Icon Only 620 ---------------*/ 621 622 .ui.icon.buttons .button, 623 .ui.icon.button { 624 padding: 0.78571em 0.78571em 0.78571em; 625 } 626 .ui.icon.buttons .button > .icon, 627 .ui.icon.button > .icon { 628 opacity: 0.9; 629 margin: 0em; 630 vertical-align: top; 631 } 632 633 /*------------------- 634 Basic 635 --------------------*/ 636 637 .ui.basic.buttons .button, 638 .ui.basic.button { 639 background: transparent !important; 640 background-image: none; 641 color: rgba(0, 0, 0, 0.6) !important; 642 font-weight: normal; 643 border-radius: 0.2857rem; 644 text-transform: none; 645 text-shadow: none !important; 646 box-shadow: 0px 0px 0px 1px rgba(39, 41, 43, 0.15) inset; 647 } 648 .ui.basic.buttons { 649 box-shadow: 0px 0px 0px 1px rgba(39, 41, 43, 0.15); 650 border-radius: 0.2857rem; 651 } 652 .ui.basic.buttons .button { 653 border-radius: 0em; 654 } 655 .ui.basic.buttons .button:hover, 656 .ui.basic.button:hover { 657 background: #fafafa !important; 658 color: rgba(0, 0, 0, 0.8) !important; 659 box-shadow: 0px 0px 0px 1px rgba(39, 41, 43, 0.15) inset, 0px 0px 0px 0px rgba(39, 41, 43, 0.15) inset; 660 } 661 .ui.basic.buttons .button:active, 662 .ui.basic.button:active { 663 background: #f8f8f8 !important; 664 color: rgba(0, 0, 0, 0.8) !important; 665 box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset, 0px 1px 4px 0px rgba(39, 41, 43, 0.15) inset; 666 } 667 .ui.basic.buttons .active.button, 668 .ui.basic.active.button { 669 background: rgba(0, 0, 0, 0.05) !important; 670 box-shadow: '' !important; 671 color: rgba(0, 0, 0, 0.8); 672 box-shadow: rgba(39, 41, 43, 0.3); 673 } 674 .ui.basic.buttons .active.button:hover, 675 .ui.basic.active.button:hover { 676 background-color: rgba(0, 0, 0, 0.05); 677 } 678 679 /* Vertical */ 680 .ui.basic.buttons .button:hover { 681 box-shadow: 0px 0px 0px 1px rgba(39, 41, 43, 0.15) inset, 0px 0px 0px 0px rgba(39, 41, 43, 0.15) inset inset; 682 } 683 .ui.basic.buttons .button:active { 684 box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset, 0px 1px 4px 0px rgba(39, 41, 43, 0.15) inset inset; 685 } 686 .ui.basic.buttons .active.button { 687 box-shadow: rgba(39, 41, 43, 0.3) inset; 688 } 689 690 /* Standard Basic Inverted */ 691 .ui.basic.inverted.buttons .button, 692 .ui.basic.inverted.button { 693 background-color: transparent !important; 694 color: #fafafa !important; 695 box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; 696 } 697 .ui.basic.inverted.buttons .button:hover, 698 .ui.basic.inverted.button:hover { 699 color: #ffffff !important; 700 box-shadow: 0px 0px 0px 2px #ffffff inset !important; 701 } 702 .ui.basic.inverted.buttons .button:active, 703 .ui.basic.inverted.button:active { 704 background-color: rgba(255, 255, 255, 0.05) !important; 705 color: #ffffff !important; 706 box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.9) inset !important; 707 } 708 .ui.basic.inverted.buttons .active.button, 709 .ui.basic.inverted.active.button { 710 background-color: rgba(255, 255, 255, 0.05); 711 color: #ffffff; 712 text-shadow: none; 713 box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.7) inset; 714 } 715 .ui.basic.inverted.buttons .active.button:hover, 716 .ui.basic.inverted.active.button:hover { 717 background-color: rgba(255, 255, 255, 0.07); 718 box-shadow: 0px 0px 0px 2px #ffffff inset !important; 719 } 720 721 /* Basic Group */ 722 .ui.basic.buttons .button { 723 border-left: 1px solid rgba(39, 41, 43, 0.15); 724 box-shadow: none; 725 } 726 .ui.basic.vertical.buttons .button { 727 border-left: none; 728 } 729 .ui.basic.vertical.buttons .button { 730 border-left-width: 0px; 731 border-top: 1px solid rgba(39, 41, 43, 0.15); 732 } 733 .ui.basic.vertical.buttons .button:first-child { 734 border-top-width: 0px; 735 } 736 737 /*-------------- 738 Labeled Icon 739 ---------------*/ 740 741 .ui.labeled.icon.buttons .button, 742 .ui.labeled.icon.button { 743 position: relative; 744 padding-left: 4.07142em !important; 745 padding-right: 1.5em !important; 746 } 747 748 /* Left Labeled */ 749 .ui.labeled.icon.buttons > .button > .icon, 750 .ui.labeled.icon.button > .icon { 751 position: absolute; 752 width: 2.57142em; 753 height: 100%; 754 background-color: rgba(0, 0, 0, 0.05); 755 text-align: center; 756 color: ''; 757 border-radius: 0.2857rem 0px 0px 0.2857rem; 758 line-height: 1; 759 box-shadow: -1px 0px 0px 0px transparent inset; 760 } 761 762 /* Left Labeled */ 763 .ui.labeled.icon.buttons > .button > .icon, 764 .ui.labeled.icon.button > .icon { 765 top: 0em; 766 left: 0em; 767 } 768 769 /* Right Labeled */ 770 .ui[class*="right labeled"].icon.button { 771 padding-right: 4.07142em !important; 772 padding-left: 1.5em !important; 773 } 774 .ui[class*="right labeled"].icon.button > .icon { 775 left: auto; 776 right: 0em; 777 border-radius: 0em 0.2857rem 0.2857rem 0em; 778 box-shadow: 1px 0px 0px 0px transparent inset; 779 } 780 .ui.labeled.icon.buttons > .button > .icon:before, 781 .ui.labeled.icon.button > .icon:before, 782 .ui.labeled.icon.buttons > .button > .icon:after, 783 .ui.labeled.icon.button > .icon:after { 784 display: block; 785 position: absolute; 786 width: 100%; 787 top: 50%; 788 text-align: center; 789 margin-top: -0.5em; 790 } 791 .ui.labeled.icon.buttons .button > .icon { 792 border-radius: 0em; 793 } 794 .ui.labeled.icon.buttons .button:first-child > .icon { 795 border-top-left-radius: 0.2857rem; 796 border-bottom-left-radius: 0.2857rem; 797 } 798 .ui.labeled.icon.buttons .button:last-child > .icon { 799 border-top-right-radius: 0.2857rem; 800 border-bottom-right-radius: 0.2857rem; 801 } 802 .ui.vertical.labeled.icon.buttons .button:first-child > .icon { 803 border-radius: 0em; 804 border-top-left-radius: 0.2857rem; 805 } 806 .ui.vertical.labeled.icon.buttons .button:last-child > .icon { 807 border-radius: 0em; 808 border-bottom-left-radius: 0.2857rem; 809 } 810 811 /* Fluid Labeled */ 812 .ui.fluid[class*="left labeled"].icon.button, 813 .ui.fluid[class*="right labeled"].icon.button { 814 padding-left: 1.5em !important; 815 padding-right: 1.5em !important; 816 } 817 818 /*-------------- 819 Toggle 820 ---------------*/ 821 822 823 /* Toggle (Modifies active state to give affordances) */ 824 .ui.toggle.buttons .active.button, 825 .ui.buttons .button.toggle.active, 826 .ui.button.toggle.active { 827 background-color: #5bbd72 !important; 828 box-shadow: none !important; 829 text-shadow: none; 830 color: #ffffff !important; 831 } 832 .ui.button.toggle.active:hover { 833 background-color: #66c17b !important; 834 text-shadow: none; 835 color: #ffffff !important; 836 } 837 838 /*-------------- 839 Circular 840 ---------------*/ 841 842 .ui.circular.button { 843 border-radius: 10em; 844 } 845 .ui.circular.button > .icon { 846 width: 1em; 847 vertical-align: baseline; 848 } 849 850 /*-------------- 851 Attached 852 ---------------*/ 853 854 .ui.attached.button { 855 display: block; 856 margin: 0em; 857 box-shadow: 0px 0px 0px 1px rgba(39, 41, 43, 0.15) !important; 858 border-radius: 0em; 859 } 860 .ui.attached.top.button { 861 border-radius: 0.2857rem 0.2857rem 0em 0em; 862 } 863 .ui.attached.bottom.button { 864 border-radius: 0em 0em 0.2857rem 0.2857rem; 865 } 866 .ui.attached.left.button { 867 display: inline-block; 868 border-left: none; 869 padding-right: 0.75em; 870 text-align: right; 871 border-radius: 0.2857rem 0em 0em 0.2857rem; 872 } 873 .ui.attached.right.button { 874 display: inline-block; 875 padding-left: 0.75em; 876 text-align: left; 877 border-radius: 0em 0.2857rem 0.2857rem 0em; 878 } 879 880 /*------------------- 881 Or Buttons 882 --------------------*/ 883 884 .ui.buttons .or { 885 position: relative; 886 float: left; 887 width: 0.3em; 888 height: 2.57142em; 889 z-index: 3; 890 } 891 .ui.buttons .or:before { 892 position: absolute; 893 text-align: center; 894 border-radius: 500rem; 895 content: 'or'; 896 top: 50%; 897 left: 50%; 898 background-color: #ffffff; 899 text-shadow: none; 900 margin-top: -0.892855em; 901 margin-left: -0.892855em; 902 width: 1.78571em; 903 height: 1.78571em; 904 line-height: 1.78571em; 905 color: rgba(0, 0, 0, 0.4); 906 font-style: normal; 907 font-weight: bold; 908 box-shadow: 0px 0px 0px 1px transparent inset; 909 } 910 .ui.buttons .or[data-text]:before { 911 content: attr(data-text); 912 } 913 914 /* Fluid Or */ 915 .ui.fluid.buttons .or { 916 width: 0em !important; 917 } 918 .ui.fluid.buttons .or:after { 919 display: none; 920 } 921 922 /*------------------- 923 Attached 924 --------------------*/ 925 926 927 /* Plural Attached */ 928 .attached.ui.buttons { 929 margin: 0px; 930 border-radius: 0em 0em 0em 0em; 931 } 932 .attached.ui.buttons .button { 933 margin: 0em; 934 } 935 .attached.ui.buttons .button:first-child { 936 border-radius: 0em 0em 0em 0em; 937 } 938 .attached.ui.buttons .button:last-child { 939 border-radius: 0em 0em 0em 0em; 940 } 941 942 /* Top Side */ 943 [class*="top attached"].ui.buttons { 944 margin-bottom: -1px; 945 border-radius: 0.2857rem 0.2857rem 0em 0em; 946 } 947 [class*="top attached"].ui.buttons .button:first-child { 948 border-radius: 0.2857rem 0em 0em 0em; 949 } 950 [class*="top attached"].ui.buttons .button:last-child { 951 border-radius: 0em 0.2857rem 0em 0em; 952 } 953 954 /* Bottom Side */ 955 [class*="bottom attached"].ui.buttons { 956 margin-top: -1px; 957 border-radius: 0em 0em 0.2857rem 0.2857rem; 958 } 959 [class*="bottom attached"].ui.buttons .button:first-child { 960 border-radius: 0em 0em 0em 0.2857rem; 961 } 962 [class*="bottom attached"].ui.buttons .button:last-child { 963 border-radius: 0em 0em 0.2857rem 0em; 964 } 965 966 /* Left Side */ 967 [class*="left attached"].ui.buttons { 968 margin-left: -1px; 969 border-radius: 0em 0.2857rem 0.2857rem 0em; 970 } 971 [class*="left attached"].ui.buttons .button:first-child { 972 margin-left: -1px; 973 border-radius: 0em 0.2857rem 0em 0em; 974 } 975 [class*="left attached"].ui.buttons .button:last-child { 976 margin-left: -1px; 977 border-radius: 0em 0em 0.2857rem 0em; 978 } 979 980 /* Right Side */ 981 [class*="right attached"].ui.buttons, 982 [class*="right attached"].ui.buttons .button { 983 margin-right: -1px; 984 border-radius: 0.2857rem 0em 0em 0.2857rem; 985 } 986 [class*="right attached"].ui.buttons .button:first-child { 987 margin-left: -1px; 988 border-radius: 0.2857rem 0em 0em 0em; 989 } 990 [class*="right attached"].ui.buttons .button:last-child { 991 margin-left: -1px; 992 border-radius: 0em 0em 0em 0.2857rem; 993 } 994 995 /* Fluid */ 996 .ui.fluid.buttons, 997 .ui.button.fluid, 998 .ui.fluid.buttons > .button { 999 display: block; 1000 width: 100%; 1001 } 1002 .ui.\32.buttons, 1003 .ui.two.buttons { 1004 width: 100%; 1005 } 1006 .ui.\32.buttons > .button, 1007 .ui.two.buttons > .button { 1008 width: 50%; 1009 } 1010 .ui.\33.buttons, 1011 .ui.three.buttons { 1012 width: 100%; 1013 } 1014 .ui.\33.buttons > .button, 1015 .ui.three.buttons > .button { 1016 width: 33.333%; 1017 } 1018 .ui.\34.buttons, 1019 .ui.four.buttons { 1020 width: 100%; 1021 } 1022 .ui.\34.buttons > .button, 1023 .ui.four.buttons > .button { 1024 width: 25%; 1025 } 1026 .ui.\35.buttons, 1027 .ui.five.buttons { 1028 width: 100%; 1029 } 1030 .ui.\35.buttons > .button, 1031 .ui.five.buttons > .button { 1032 width: 20%; 1033 } 1034 .ui.\36.buttons, 1035 .ui.six.buttons { 1036 width: 100%; 1037 } 1038 .ui.\36.buttons > .button, 1039 .ui.six.buttons > .button { 1040 width: 16.666%; 1041 } 1042 .ui.\37.buttons, 1043 .ui.seven.buttons { 1044 width: 100%; 1045 } 1046 .ui.\37.buttons > .button, 1047 .ui.seven.buttons > .button { 1048 width: 14.285%; 1049 } 1050 .ui.\38.buttons, 1051 .ui.eight.buttons { 1052 width: 100%; 1053 } 1054 .ui.\38.buttons > .button, 1055 .ui.eight.buttons > .button { 1056 width: 12.500%; 1057 } 1058 .ui.\39.buttons, 1059 .ui.nine.buttons { 1060 width: 100%; 1061 } 1062 .ui.\39.buttons > .button, 1063 .ui.nine.buttons > .button { 1064 width: 11.11%; 1065 } 1066 .ui.\31\30.buttons, 1067 .ui.ten.buttons { 1068 width: 100%; 1069 } 1070 .ui.\31\30.buttons > .button, 1071 .ui.ten.buttons > .button { 1072 width: 10%; 1073 } 1074 .ui.\31\31.buttons, 1075 .ui.eleven.buttons { 1076 width: 100%; 1077 } 1078 .ui.\31\31.buttons > .button, 1079 .ui.eleven.buttons > .button { 1080 width: 9.09%; 1081 } 1082 .ui.\31\32.buttons, 1083 .ui.twelve.buttons { 1084 width: 100%; 1085 } 1086 .ui.\31\32.buttons > .button, 1087 .ui.twelve.buttons > .button { 1088 width: 8.3333%; 1089 } 1090 1091 /* Fluid Vertical Buttons */ 1092 .ui.fluid.vertical.buttons, 1093 .ui.fluid.vertical.buttons > .button { 1094 display: block; 1095 width: auto; 1096 } 1097 .ui.\32.vertical.buttons > .button, 1098 .ui.two.vertical.buttons > .button { 1099 height: 50%; 1100 } 1101 .ui.\33.vertical.buttons > .button, 1102 .ui.three.vertical.buttons > .button { 1103 height: 33.333%; 1104 } 1105 .ui.\34.vertical.buttons > .button, 1106 .ui.four.vertical.buttons > .button { 1107 height: 25%; 1108 } 1109 .ui.\35.vertical.buttons > .button, 1110 .ui.five.vertical.buttons > .button { 1111 height: 20%; 1112 } 1113 .ui.\36.vertical.buttons > .button, 1114 .ui.six.vertical.buttons > .button { 1115 height: 16.666%; 1116 } 1117 .ui.\37.vertical.buttons > .button, 1118 .ui.seven.vertical.buttons > .button { 1119 height: 14.285%; 1120 } 1121 .ui.\38.vertical.buttons > .button, 1122 .ui.eight.vertical.buttons > .button { 1123 height: 12.500%; 1124 } 1125 .ui.\39.vertical.buttons > .button, 1126 .ui.nine.vertical.buttons > .button { 1127 height: 11.11%; 1128 } 1129 .ui.\31\30.vertical.buttons > .button, 1130 .ui.ten.vertical.buttons > .button { 1131 height: 10%; 1132 } 1133 .ui.\31\31.vertical.buttons > .button, 1134 .ui.eleven.vertical.buttons > .button { 1135 height: 9.09%; 1136 } 1137 .ui.\31\32.vertical.buttons > .button, 1138 .ui.twelve.vertical.buttons > .button { 1139 height: 8.3333%; 1140 } 1141 1142 /*------------------- 1143 Colors 1144 --------------------*/ 1145 1146 1147 /*--- Black ---*/ 1148 1149 .ui.black.buttons .button, 1150 .ui.black.button { 1151 background-color: #1b1c1d; 1152 color: #ffffff; 1153 text-shadow: none; 1154 background-image: none; 1155 } 1156 .ui.black.button { 1157 box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset; 1158 } 1159 .ui.black.buttons .button:hover, 1160 .ui.black.button:hover { 1161 background-color: #1b1c1d; 1162 color: #ffffff; 1163 text-shadow: none; 1164 } 1165 .ui.black.buttons .button:active, 1166 .ui.black.button:active { 1167 background-color: #0a0a0b; 1168 color: #ffffff; 1169 text-shadow: none; 1170 } 1171 .ui.black.buttons .active.button, 1172 .ui.black.buttons .active.button:active, 1173 .ui.black.active.button, 1174 .ui.black.button .active.button:active { 1175 background-color: #0f0f10; 1176 color: #ffffff; 1177 text-shadow: none; 1178 } 1179 1180 /* Basic */ 1181 .ui.basic.black.buttons .button, 1182 .ui.basic.black.button { 1183 box-shadow: 0px 0px 0px 2px rgba(39, 41, 43, 0.15) inset !important; 1184 color: rgba(0, 0, 0, 0.6) !important; 1185 } 1186 .ui.basic.black.buttons .button:hover, 1187 .ui.basic.black.button:hover { 1188 background: transparent !important; 1189 box-shadow: 0px 0px 0px 2px #1b1c1d inset !important; 1190 color: #1b1c1d !important; 1191 } 1192 .ui.basic.black.buttons .button:active, 1193 .ui.basic.black.button:active { 1194 box-shadow: 0px 0px 0px 2px #0a0a0b inset !important; 1195 color: #0a0a0b !important; 1196 } 1197 .ui.basic.black.buttons .active.button, 1198 .ui.basic.black.active.button { 1199 background: transparent !important; 1200 box-shadow: 0px 0px 0px 2px #0a0a0b inset !important; 1201 color: #0a0a0b !important; 1202 } 1203 .ui.buttons > .basic.black.button:not(:first-child) { 1204 margin-left: -2px; 1205 } 1206 1207 /* Inverted */ 1208 .ui.inverted.black.buttons .button, 1209 .ui.inverted.black.button { 1210 background-color: transparent; 1211 box-shadow: 0px 0px 0px 2px #d4d4d5 inset !important; 1212 color: #ffffff; 1213 } 1214 .ui.inverted.black.buttons .button:hover, 1215 .ui.inverted.black.button:hover { 1216 box-shadow: 0px 0px 0px 2px #333333 inset !important; 1217 background-color: #333333; 1218 color: #ffffff; 1219 } 1220 .ui.inverted.black.buttons .active.button, 1221 .ui.inverted.black.active.button { 1222 box-shadow: 0px 0px 0px 2px #333333 inset !important; 1223 background-color: #333333; 1224 color: #ffffff; 1225 } 1226 .ui.inverted.black.buttons .button:active, 1227 .ui.inverted.black.button:active { 1228 box-shadow: 0px 0px 0px 2px #212121 inset !important; 1229 background-color: #212121; 1230 color: #ffffff; 1231 } 1232 1233 /* Inverted Basic */ 1234 .ui.inverted.black.basic.buttons .button, 1235 .ui.inverted.black.buttons .basic.button, 1236 .ui.inverted.black.basic.button { 1237 background-color: transparent; 1238 box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; 1239 color: #ffffff !important; 1240 } 1241 .ui.inverted.black.basic.buttons .button:hover, 1242 .ui.inverted.black.buttons .basic.button:hover, 1243 .ui.inverted.black.basic.button:hover { 1244 box-shadow: 0px 0px 0px 2px #333333 inset !important; 1245 color: #ffffff !important; 1246 } 1247 .ui.inverted.black.basic.buttons .active.button, 1248 .ui.inverted.black.buttons .basic.active.button, 1249 .ui.inverted.black.basic.active.button { 1250 box-shadow: 0px 0px 0px 2px #333333 inset !important; 1251 color: #ffffff !important; 1252 } 1253 .ui.inverted.black.basic.buttons .button:active, 1254 .ui.inverted.black.buttons .basic.button:active, 1255 .ui.inverted.black.basic.button:active { 1256 box-shadow: 0px 0px 0px 2px #212121 inset !important; 1257 color: #ffffff !important; 1258 } 1259 1260 /*--- Blue ---*/ 1261 1262 .ui.blue.buttons .button, 1263 .ui.blue.button { 1264 background-color: #0097c9; 1265 color: #ffffff; 1266 text-shadow: none; 1267 background-image: none; 1268 } 1269 .ui.blue.button { 1270 box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset; 1271 } 1272 .ui.blue.buttons .button:hover, 1273 .ui.blue.button:hover { 1274 background-color: #0079a2; 1275 color: #ffffff; 1276 text-shadow: none; 1277 } 1278 .ui.blue.buttons .button:active, 1279 .ui.blue.button:active { 1280 background-color: #00536f; 1281 color: #ffffff; 1282 text-shadow: none; 1283 } 1284 .ui.blue.buttons .active.button, 1285 .ui.blue.buttons .active.button:active, 1286 .ui.blue.active.button, 1287 .ui.blue.button .active.button:active { 1288 background-color: #005b7a; 1289 color: #ffffff; 1290 text-shadow: none; 1291 } 1292 1293 /* Basic */ 1294 .ui.basic.blue.buttons .button, 1295 .ui.basic.blue.button { 1296 box-shadow: 0px 0px 0px 2px rgba(39, 41, 43, 0.15) inset !important; 1297 color: rgba(0, 0, 0, 0.6) !important; 1298 } 1299 .ui.basic.blue.buttons .button:hover, 1300 .ui.basic.blue.button:hover { 1301 background: transparent !important; 1302 box-shadow: 0px 0px 0px 2px #0079a2 inset !important; 1303 color: #0079a2 !important; 1304 } 1305 .ui.basic.blue.buttons .button:active, 1306 .ui.basic.blue.button:active { 1307 box-shadow: 0px 0px 0px 2px #00536f inset !important; 1308 color: #00536f !important; 1309 } 1310 .ui.basic.blue.buttons .active.button, 1311 .ui.basic.blue.active.button { 1312 background: transparent !important; 1313 box-shadow: 0px 0px 0px 2px #00536f inset !important; 1314 color: #00536f !important; 1315 } 1316 .ui.buttons > .basic.blue.button:not(:first-child) { 1317 margin-left: -2px; 1318 } 1319 1320 /* Inverted */ 1321 .ui.inverted.blue.buttons .button, 1322 .ui.inverted.blue.button { 1323 background-color: transparent; 1324 box-shadow: 0px 0px 0px 2px #0097c9 inset !important; 1325 color: #0097c9; 1326 } 1327 .ui.inverted.blue.buttons .button:hover, 1328 .ui.inverted.blue.button:hover { 1329 box-shadow: 0px 0px 0px 2px #0097c9 inset !important; 1330 background-color: #0097c9; 1331 color: #ffffff; 1332 } 1333 .ui.inverted.blue.buttons .active.button, 1334 .ui.inverted.blue.active.button { 1335 box-shadow: 0px 0px 0px 2px #0097c9 inset !important; 1336 background-color: #0097c9; 1337 color: #ffffff; 1338 } 1339 .ui.inverted.blue.buttons .button:active, 1340 .ui.inverted.blue.button:active { 1341 box-shadow: 0px 0px 0px 2px #007ca5 inset !important; 1342 background-color: #007ca5; 1343 color: #ffffff; 1344 } 1345 1346 /* Inverted Basic */ 1347 .ui.inverted.blue.basic.buttons .button, 1348 .ui.inverted.blue.buttons .basic.button, 1349 .ui.inverted.blue.basic.button { 1350 background-color: transparent; 1351 box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; 1352 color: #ffffff !important; 1353 } 1354 .ui.inverted.blue.basic.buttons .button:hover, 1355 .ui.inverted.blue.buttons .basic.button:hover, 1356 .ui.inverted.blue.basic.button:hover { 1357 box-shadow: 0px 0px 0px 2px #0097c9 inset !important; 1358 color: #0097c9 !important; 1359 } 1360 .ui.inverted.blue.basic.buttons .active.button, 1361 .ui.inverted.blue.buttons .basic.active.button, 1362 .ui.inverted.blue.basic.active.button { 1363 box-shadow: 0px 0px 0px 2px #0097c9 inset !important; 1364 color: #0097c9 !important; 1365 } 1366 .ui.inverted.blue.basic.buttons .button:active, 1367 .ui.inverted.blue.buttons .basic.button:active, 1368 .ui.inverted.blue.basic.button:active { 1369 box-shadow: 0px 0px 0px 2px #007ca5 inset !important; 1370 color: #0097c9 !important; 1371 } 1372 1373 /*--- Green ---*/ 1374 1375 .ui.green.buttons .button, 1376 .ui.green.button { 1377 background-color: #5bbd72; 1378 color: #ffffff; 1379 text-shadow: none; 1380 background-image: none; 1381 } 1382 .ui.green.button { 1383 box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset; 1384 } 1385 .ui.green.buttons .button:hover, 1386 .ui.green.button:hover { 1387 background-color: #66c17b; 1388 color: #ffffff; 1389 text-shadow: none; 1390 } 1391 .ui.green.buttons .button:active, 1392 .ui.green.button:active { 1393 background-color: #46ae5f; 1394 color: #ffffff; 1395 text-shadow: none; 1396 } 1397 .ui.green.buttons .active.button, 1398 .ui.green.buttons .active.button:active, 1399 .ui.green.active.button, 1400 .ui.green.button .active.button:active { 1401 background-color: #49b562; 1402 color: #ffffff; 1403 text-shadow: none; 1404 } 1405 1406 /* Basic */ 1407 .ui.basic.green.buttons .button, 1408 .ui.basic.green.button { 1409 box-shadow: 0px 0px 0px 2px rgba(39, 41, 43, 0.15) inset !important; 1410 color: rgba(0, 0, 0, 0.6) !important; 1411 } 1412 .ui.basic.green.buttons .button:hover, 1413 .ui.basic.green.button:hover { 1414 background: transparent !important; 1415 box-shadow: 0px 0px 0px 2px #66c17b inset !important; 1416 color: #66c17b !important; 1417 } 1418 .ui.basic.green.buttons .button:active, 1419 .ui.basic.green.button:active { 1420 box-shadow: 0px 0px 0px 2px #46ae5f inset !important; 1421 color: #46ae5f !important; 1422 } 1423 .ui.basic.green.buttons .active.button, 1424 .ui.basic.green.active.button { 1425 background: transparent !important; 1426 box-shadow: 0px 0px 0px 2px #46ae5f inset !important; 1427 color: #46ae5f !important; 1428 } 1429 .ui.buttons > .basic.green.button:not(:first-child) { 1430 margin-left: -2px; 1431 } 1432 1433 /* Inverted */ 1434 .ui.inverted.green.buttons .button, 1435 .ui.inverted.green.button { 1436 background-color: transparent; 1437 box-shadow: 0px 0px 0px 2px #2ecc40 inset !important; 1438 color: #2ecc40; 1439 } 1440 .ui.inverted.green.buttons .button:hover, 1441 .ui.inverted.green.button:hover { 1442 box-shadow: 0px 0px 0px 2px #2ecc40 inset !important; 1443 background-color: #2ecc40; 1444 color: #ffffff; 1445 } 1446 .ui.inverted.green.buttons .active.button, 1447 .ui.inverted.green.active.button { 1448 box-shadow: 0px 0px 0px 2px #2ecc40 inset !important; 1449 background-color: #2ecc40; 1450 color: #ffffff; 1451 } 1452 .ui.inverted.green.buttons .button:active, 1453 .ui.inverted.green.button:active { 1454 box-shadow: 0px 0px 0px 2px #27af37 inset !important; 1455 background-color: #27af37; 1456 color: #ffffff; 1457 } 1458 1459 /* Inverted Basic */ 1460 .ui.inverted.green.basic.buttons .button, 1461 .ui.inverted.green.buttons .basic.button, 1462 .ui.inverted.green.basic.button { 1463 background-color: transparent; 1464 box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; 1465 color: #ffffff !important; 1466 } 1467 .ui.inverted.green.basic.buttons .button:hover, 1468 .ui.inverted.green.buttons .basic.button:hover, 1469 .ui.inverted.green.basic.button:hover { 1470 box-shadow: 0px 0px 0px 2px #2ecc40 inset !important; 1471 color: #2ecc40 !important; 1472 } 1473 .ui.inverted.green.basic.buttons .active.button, 1474 .ui.inverted.green.buttons .basic.active.button, 1475 .ui.inverted.green.basic.active.button { 1476 box-shadow: 0px 0px 0px 2px #2ecc40 inset !important; 1477 color: #2ecc40 !important; 1478 } 1479 .ui.inverted.green.basic.buttons .button:active, 1480 .ui.inverted.green.buttons .basic.button:active, 1481 .ui.inverted.green.basic.button:active { 1482 box-shadow: 0px 0px 0px 2px #27af37 inset !important; 1483 color: #2ecc40 !important; 1484 } 1485 1486 /*--- Orange ---*/ 1487 1488 .ui.orange.buttons .button, 1489 .ui.orange.button { 1490 background-color: #e07b53; 1491 color: #ffffff; 1492 text-shadow: none; 1493 background-image: none; 1494 } 1495 .ui.orange.button { 1496 box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset; 1497 } 1498 .ui.orange.buttons .button:hover, 1499 .ui.orange.button:hover { 1500 background-color: #e28560; 1501 color: #ffffff; 1502 text-shadow: none; 1503 } 1504 .ui.orange.buttons .button:active, 1505 .ui.orange.button:active { 1506 background-color: #db6435; 1507 color: #ffffff; 1508 text-shadow: none; 1509 } 1510 .ui.orange.buttons .active.button, 1511 .ui.orange.buttons .active.button:active, 1512 .ui.orange.active.button, 1513 .ui.orange.button .active.button:active { 1514 background-color: #dc6a3d; 1515 color: #ffffff; 1516 text-shadow: none; 1517 } 1518 1519 /* Basic */ 1520 .ui.basic.orange.buttons .button, 1521 .ui.basic.orange.button { 1522 box-shadow: 0px 0px 0px 2px rgba(39, 41, 43, 0.15) inset !important; 1523 color: rgba(0, 0, 0, 0.6) !important; 1524 } 1525 .ui.basic.orange.buttons .button:hover, 1526 .ui.basic.orange.button:hover { 1527 background: transparent !important; 1528 box-shadow: 0px 0px 0px 2px #e28560 inset !important; 1529 color: #e28560 !important; 1530 } 1531 .ui.basic.orange.buttons .button:active, 1532 .ui.basic.orange.button:active { 1533 box-shadow: 0px 0px 0px 2px #db6435 inset !important; 1534 color: #db6435 !important; 1535 } 1536 .ui.basic.orange.buttons .active.button, 1537 .ui.basic.orange.active.button { 1538 background: transparent !important; 1539 box-shadow: 0px 0px 0px 2px #db6435 inset !important; 1540 color: #db6435 !important; 1541 } 1542 .ui.buttons > .basic.orange.button:not(:first-child) { 1543 margin-left: -2px; 1544 } 1545 1546 /* Inverted */ 1547 .ui.inverted.orange.buttons .button, 1548 .ui.inverted.orange.button { 1549 background-color: transparent; 1550 box-shadow: 0px 0px 0px 2px #ff851b inset !important; 1551 color: #ff851b; 1552 } 1553 .ui.inverted.orange.buttons .button:hover, 1554 .ui.inverted.orange.button:hover { 1555 box-shadow: 0px 0px 0px 2px #ff851b inset !important; 1556 background-color: #ff851b; 1557 color: #ffffff; 1558 } 1559 .ui.inverted.orange.buttons .active.button, 1560 .ui.inverted.orange.active.button { 1561 box-shadow: 0px 0px 0px 2px #ff851b inset !important; 1562 background-color: #ff851b; 1563 color: #ffffff; 1564 } 1565 .ui.inverted.orange.buttons .button:active, 1566 .ui.inverted.orange.button:active { 1567 box-shadow: 0px 0px 0px 2px #f67300 inset !important; 1568 background-color: #f67300; 1569 color: #ffffff; 1570 } 1571 1572 /* Inverted Basic */ 1573 .ui.inverted.orange.basic.buttons .button, 1574 .ui.inverted.orange.buttons .basic.button, 1575 .ui.inverted.orange.basic.button { 1576 background-color: transparent; 1577 box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; 1578 color: #ffffff !important; 1579 } 1580 .ui.inverted.orange.basic.buttons .button:hover, 1581 .ui.inverted.orange.buttons .basic.button:hover, 1582 .ui.inverted.orange.basic.button:hover { 1583 box-shadow: 0px 0px 0px 2px #ff851b inset !important; 1584 color: #ff851b !important; 1585 } 1586 .ui.inverted.orange.basic.buttons .active.button, 1587 .ui.inverted.orange.buttons .basic.active.button, 1588 .ui.inverted.orange.basic.active.button { 1589 box-shadow: 0px 0px 0px 2px #ff851b inset !important; 1590 color: #ff851b !important; 1591 } 1592 .ui.inverted.orange.basic.buttons .button:active, 1593 .ui.inverted.orange.buttons .basic.button:active, 1594 .ui.inverted.orange.basic.button:active { 1595 box-shadow: 0px 0px 0px 2px #f67300 inset !important; 1596 color: #ff851b !important; 1597 } 1598 1599 /*--- Pink ---*/ 1600 1601 .ui.pink.buttons .button, 1602 .ui.pink.button { 1603 background-color: #d9499a; 1604 color: #ffffff; 1605 text-shadow: none; 1606 background-image: none; 1607 } 1608 .ui.pink.button { 1609 box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset; 1610 } 1611 .ui.pink.buttons .button:hover, 1612 .ui.pink.button:hover { 1613 background-color: #dc56a1; 1614 color: #ffffff; 1615 text-shadow: none; 1616 } 1617 .ui.pink.buttons .button:active, 1618 .ui.pink.button:active { 1619 background-color: #d22c8a; 1620 color: #ffffff; 1621 text-shadow: none; 1622 } 1623 .ui.pink.buttons .active.button, 1624 .ui.pink.buttons .active.button:active, 1625 .ui.pink.active.button, 1626 .ui.pink.button .active.button:active { 1627 background-color: #d5348e; 1628 color: #ffffff; 1629 text-shadow: none; 1630 } 1631 1632 /* Basic */ 1633 .ui.basic.pink.buttons .button, 1634 .ui.basic.pink.button { 1635 box-shadow: 0px 0px 0px 2px rgba(39, 41, 43, 0.15) inset !important; 1636 color: rgba(0, 0, 0, 0.6) !important; 1637 } 1638 .ui.basic.pink.buttons .button:hover, 1639 .ui.basic.pink.button:hover { 1640 background: transparent !important; 1641 box-shadow: 0px 0px 0px 2px #dc56a1 inset !important; 1642 color: #dc56a1 !important; 1643 } 1644 .ui.basic.pink.buttons .button:active, 1645 .ui.basic.pink.button:active { 1646 box-shadow: 0px 0px 0px 2px #d22c8a inset !important; 1647 color: #d22c8a !important; 1648 } 1649 .ui.basic.pink.buttons .active.button, 1650 .ui.basic.pink.active.button { 1651 background: transparent !important; 1652 box-shadow: 0px 0px 0px 2px #d22c8a inset !important; 1653 color: #d22c8a !important; 1654 } 1655 .ui.buttons > .basic.pink.button:not(:first-child) { 1656 margin-left: -2px; 1657 } 1658 1659 /* Inverted */ 1660 .ui.inverted.pink.buttons .button, 1661 .ui.inverted.pink.button { 1662 background-color: transparent; 1663 box-shadow: 0px 0px 0px 2px #ff8edf inset !important; 1664 color: #ff8edf; 1665 } 1666 .ui.inverted.pink.buttons .button:hover, 1667 .ui.inverted.pink.button:hover { 1668 box-shadow: 0px 0px 0px 2px #ff8edf inset !important; 1669 background-color: #ff8edf; 1670 color: #ffffff; 1671 } 1672 .ui.inverted.pink.buttons .active.button, 1673 .ui.inverted.pink.active.button { 1674 box-shadow: 0px 0px 0px 2px #ff8edf inset !important; 1675 background-color: #ff8edf; 1676 color: #ffffff; 1677 } 1678 .ui.inverted.pink.buttons .button:active, 1679 .ui.inverted.pink.button:active { 1680 box-shadow: 0px 0px 0px 2px #ff6ad5 inset !important; 1681 background-color: #ff6ad5; 1682 color: #ffffff; 1683 } 1684 1685 /* Inverted Basic */ 1686 .ui.inverted.pink.basic.buttons .button, 1687 .ui.inverted.pink.buttons .basic.button, 1688 .ui.inverted.pink.basic.button { 1689 background-color: transparent; 1690 box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; 1691 color: #ffffff !important; 1692 } 1693 .ui.inverted.pink.basic.buttons .button:hover, 1694 .ui.inverted.pink.buttons .basic.button:hover, 1695 .ui.inverted.pink.basic.button:hover { 1696 box-shadow: 0px 0px 0px 2px #ff8edf inset !important; 1697 color: #ff8edf !important; 1698 } 1699 .ui.inverted.pink.basic.buttons .active.button, 1700 .ui.inverted.pink.buttons .basic.active.button, 1701 .ui.inverted.pink.basic.active.button { 1702 box-shadow: 0px 0px 0px 2px #ff8edf inset !important; 1703 color: #ff8edf !important; 1704 } 1705 .ui.inverted.pink.basic.buttons .button:active, 1706 .ui.inverted.pink.buttons .basic.button:active, 1707 .ui.inverted.pink.basic.button:active { 1708 box-shadow: 0px 0px 0px 2px #ff6ad5 inset !important; 1709 color: #ff8edf !important; 1710 } 1711 1712 /*--- Purple ---*/ 1713 1714 .ui.purple.buttons .button, 1715 .ui.purple.button { 1716 background-color: #564f8a; 1717 color: #ffffff; 1718 text-shadow: none; 1719 background-image: none; 1720 } 1721 .ui.purple.button { 1722 box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset; 1723 } 1724 .ui.purple.buttons .button:hover, 1725 .ui.purple.button:hover { 1726 background-color: #5c5594; 1727 color: #ffffff; 1728 text-shadow: none; 1729 } 1730 .ui.purple.buttons .button:active, 1731 .ui.purple.button:active { 1732 background-color: #484273; 1733 color: #ffffff; 1734 text-shadow: none; 1735 } 1736 .ui.purple.buttons .active.button, 1737 .ui.purple.buttons .active.button:active, 1738 .ui.purple.active.button, 1739 .ui.purple.button .active.button:active { 1740 background-color: #4c467a; 1741 color: #ffffff; 1742 text-shadow: none; 1743 } 1744 1745 /* Basic */ 1746 .ui.basic.purple.buttons .button, 1747 .ui.basic.purple.button { 1748 box-shadow: 0px 0px 0px 2px rgba(39, 41, 43, 0.15) inset !important; 1749 color: rgba(0, 0, 0, 0.6) !important; 1750 } 1751 .ui.basic.purple.buttons .button:hover, 1752 .ui.basic.purple.button:hover { 1753 background: transparent !important; 1754 box-shadow: 0px 0px 0px 2px #5c5594 inset !important; 1755 color: #5c5594 !important; 1756 } 1757 .ui.basic.purple.buttons .button:active, 1758 .ui.basic.purple.button:active { 1759 box-shadow: 0px 0px 0px 2px #484273 inset !important; 1760 color: #484273 !important; 1761 } 1762 .ui.basic.purple.buttons .active.button, 1763 .ui.basic.purple.active.button { 1764 background: transparent !important; 1765 box-shadow: 0px 0px 0px 2px #484273 inset !important; 1766 color: #484273 !important; 1767 } 1768 .ui.buttons > .basic.purple.button:not(:first-child) { 1769 margin-left: -2px; 1770 } 1771 1772 /* Inverted */ 1773 .ui.inverted.purple.buttons .button, 1774 .ui.inverted.purple.button { 1775 background-color: transparent; 1776 box-shadow: 0px 0px 0px 2px #cdc6ff inset !important; 1777 color: #cdc6ff; 1778 } 1779 .ui.inverted.purple.buttons .button:hover, 1780 .ui.inverted.purple.button:hover { 1781 box-shadow: 0px 0px 0px 2px #cdc6ff inset !important; 1782 background-color: #cdc6ff; 1783 color: #1b1c1d; 1784 } 1785 .ui.inverted.purple.buttons .active.button, 1786 .ui.inverted.purple.active.button { 1787 box-shadow: 0px 0px 0px 2px #cdc6ff inset !important; 1788 background-color: #cdc6ff; 1789 color: #1b1c1d; 1790 } 1791 .ui.inverted.purple.buttons .button:active, 1792 .ui.inverted.purple.button:active { 1793 box-shadow: 0px 0px 0px 2px #aea2ff inset !important; 1794 background-color: #aea2ff; 1795 color: #1b1c1d; 1796 } 1797 1798 /* Inverted Basic */ 1799 .ui.inverted.purple.basic.buttons .button, 1800 .ui.inverted.purple.buttons .basic.button, 1801 .ui.inverted.purple.basic.button { 1802 background-color: transparent; 1803 box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; 1804 color: #ffffff !important; 1805 } 1806 .ui.inverted.purple.basic.buttons .button:hover, 1807 .ui.inverted.purple.buttons .basic.button:hover, 1808 .ui.inverted.purple.basic.button:hover { 1809 box-shadow: 0px 0px 0px 2px #cdc6ff inset !important; 1810 color: #cdc6ff !important; 1811 } 1812 .ui.inverted.purple.basic.buttons .active.button, 1813 .ui.inverted.purple.buttons .basic.active.button, 1814 .ui.inverted.purple.basic.active.button { 1815 box-shadow: 0px 0px 0px 2px #cdc6ff inset !important; 1816 color: #cdc6ff !important; 1817 } 1818 .ui.inverted.purple.basic.buttons .button:active, 1819 .ui.inverted.purple.buttons .basic.button:active, 1820 .ui.inverted.purple.basic.button:active { 1821 box-shadow: 0px 0px 0px 2px #aea2ff inset !important; 1822 color: #cdc6ff !important; 1823 } 1824 1825 /*--- Red ---*/ 1826 1827 .ui.red.buttons .button, 1828 .ui.red.button { 1829 background-color: #d95c5c; 1830 color: #ffffff; 1831 text-shadow: none; 1832 background-image: none; 1833 } 1834 .ui.red.button { 1835 box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset; 1836 } 1837 .ui.red.buttons .button:hover, 1838 .ui.red.button:hover { 1839 background-color: #dc6868; 1840 color: #ffffff; 1841 text-shadow: none; 1842 } 1843 .ui.red.buttons .button:active, 1844 .ui.red.button:active { 1845 background-color: #d23f3f; 1846 color: #ffffff; 1847 text-shadow: none; 1848 } 1849 .ui.red.buttons .active.button, 1850 .ui.red.buttons .active.button:active, 1851 .ui.red.active.button, 1852 .ui.red.button .active.button:active { 1853 background-color: #d44747; 1854 color: #ffffff; 1855 text-shadow: none; 1856 } 1857 1858 /* Basic */ 1859 .ui.basic.red.buttons .button, 1860 .ui.basic.red.button { 1861 box-shadow: 0px 0px 0px 2px rgba(39, 41, 43, 0.15) inset !important; 1862 color: rgba(0, 0, 0, 0.6) !important; 1863 } 1864 .ui.basic.red.buttons .button:hover, 1865 .ui.basic.red.button:hover { 1866 background: transparent !important; 1867 box-shadow: 0px 0px 0px 2px #dc6868 inset !important; 1868 color: #dc6868 !important; 1869 } 1870 .ui.basic.red.buttons .button:active, 1871 .ui.basic.red.button:active { 1872 box-shadow: 0px 0px 0px 2px #d23f3f inset !important; 1873 color: #d23f3f !important; 1874 } 1875 .ui.basic.red.buttons .active.button, 1876 .ui.basic.red.active.button { 1877 background: transparent !important; 1878 box-shadow: 0px 0px 0px 2px #d23f3f inset !important; 1879 color: #d23f3f !important; 1880 } 1881 .ui.buttons > .basic.red.button:not(:first-child) { 1882 margin-left: -2px; 1883 } 1884 1885 /* Inverted */ 1886 .ui.inverted.red.buttons .button, 1887 .ui.inverted.red.button { 1888 background-color: transparent; 1889 box-shadow: 0px 0px 0px 2px #ff695e inset !important; 1890 color: #ff695e; 1891 } 1892 .ui.inverted.red.buttons .button:hover, 1893 .ui.inverted.red.button:hover { 1894 box-shadow: 0px 0px 0px 2px #ff695e inset !important; 1895 background-color: #ff695e; 1896 color: #ffffff; 1897 } 1898 .ui.inverted.red.buttons .active.button, 1899 .ui.inverted.red.active.button { 1900 box-shadow: 0px 0px 0px 2px #ff695e inset !important; 1901 background-color: #ff695e; 1902 color: #ffffff; 1903 } 1904 .ui.inverted.red.buttons .button:active, 1905 .ui.inverted.red.button:active { 1906 box-shadow: 0px 0px 0px 2px #ff483a inset !important; 1907 background-color: #ff483a; 1908 color: #ffffff; 1909 } 1910 1911 /* Inverted Basic */ 1912 .ui.inverted.red.basic.buttons .button, 1913 .ui.inverted.red.buttons .basic.button, 1914 .ui.inverted.red.basic.button { 1915 background-color: transparent; 1916 box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; 1917 color: #ffffff !important; 1918 } 1919 .ui.inverted.red.basic.buttons .button:hover, 1920 .ui.inverted.red.buttons .basic.button:hover, 1921 .ui.inverted.red.basic.button:hover { 1922 box-shadow: 0px 0px 0px 2px #ff695e inset !important; 1923 color: #ff695e !important; 1924 } 1925 .ui.inverted.red.basic.buttons .active.button, 1926 .ui.inverted.red.buttons .basic.active.button, 1927 .ui.inverted.red.basic.active.button { 1928 box-shadow: 0px 0px 0px 2px #ff695e inset !important; 1929 color: #ff695e !important; 1930 } 1931 .ui.inverted.red.basic.buttons .button:active, 1932 .ui.inverted.red.buttons .basic.button:active, 1933 .ui.inverted.red.basic.button:active { 1934 box-shadow: 0px 0px 0px 2px #ff483a inset !important; 1935 color: #ff695e !important; 1936 } 1937 1938 /*--- Teal ---*/ 1939 1940 .ui.teal.buttons .button, 1941 .ui.teal.button { 1942 background-color: #00b5ad; 1943 color: #ffffff; 1944 text-shadow: none; 1945 background-image: none; 1946 } 1947 .ui.teal.button { 1948 box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset; 1949 } 1950 .ui.teal.buttons .button:hover, 1951 .ui.teal.button:hover { 1952 background-color: #00c4bc; 1953 color: #ffffff; 1954 text-shadow: none; 1955 } 1956 .ui.teal.buttons .button:active, 1957 .ui.teal.button:active { 1958 background-color: #00918b; 1959 color: #ffffff; 1960 text-shadow: none; 1961 } 1962 .ui.teal.buttons .active.button, 1963 .ui.teal.buttons .active.button:active, 1964 .ui.teal.active.button, 1965 .ui.teal.button .active.button:active { 1966 background-color: #009c95; 1967 color: #ffffff; 1968 text-shadow: none; 1969 } 1970 1971 /* Basic */ 1972 .ui.basic.teal.buttons .button, 1973 .ui.basic.teal.button { 1974 box-shadow: 0px 0px 0px 2px rgba(39, 41, 43, 0.15) inset !important; 1975 color: rgba(0, 0, 0, 0.6) !important; 1976 } 1977 .ui.basic.teal.buttons .button:hover, 1978 .ui.basic.teal.button:hover { 1979 background: transparent !important; 1980 box-shadow: 0px 0px 0px 2px #00c4bc inset !important; 1981 color: #00c4bc !important; 1982 } 1983 .ui.basic.teal.buttons .button:active, 1984 .ui.basic.teal.button:active { 1985 box-shadow: 0px 0px 0px 2px #00918b inset !important; 1986 color: #00918b !important; 1987 } 1988 .ui.basic.teal.buttons .active.button, 1989 .ui.basic.teal.active.button { 1990 background: transparent !important; 1991 box-shadow: 0px 0px 0px 2px #00918b inset !important; 1992 color: #00918b !important; 1993 } 1994 .ui.buttons > .basic.teal.button:not(:first-child) { 1995 margin-left: -2px; 1996 } 1997 1998 /* Inverted */ 1999 .ui.inverted.teal.buttons .button, 2000 .ui.inverted.teal.button { 2001 background-color: transparent; 2002 box-shadow: 0px 0px 0px 2px #6dffff inset !important; 2003 color: #6dffff; 2004 } 2005 .ui.inverted.teal.buttons .button:hover, 2006 .ui.inverted.teal.button:hover { 2007 box-shadow: 0px 0px 0px 2px #6dffff inset !important; 2008 background-color: #6dffff; 2009 color: #1b1c1d; 2010 } 2011 .ui.inverted.teal.buttons .active.button, 2012 .ui.inverted.teal.active.button { 2013 box-shadow: 0px 0px 0px 2px #6dffff inset !important; 2014 background-color: #6dffff; 2015 color: #1b1c1d; 2016 } 2017 .ui.inverted.teal.buttons .button:active, 2018 .ui.inverted.teal.button:active { 2019 box-shadow: 0px 0px 0px 2px #49ffff inset !important; 2020 background-color: #49ffff; 2021 color: #1b1c1d; 2022 } 2023 2024 /* Inverted Basic */ 2025 .ui.inverted.teal.basic.buttons .button, 2026 .ui.inverted.teal.buttons .basic.button, 2027 .ui.inverted.teal.basic.button { 2028 background-color: transparent; 2029 box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; 2030 color: #ffffff !important; 2031 } 2032 .ui.inverted.teal.basic.buttons .button:hover, 2033 .ui.inverted.teal.buttons .basic.button:hover, 2034 .ui.inverted.teal.basic.button:hover { 2035 box-shadow: 0px 0px 0px 2px #6dffff inset !important; 2036 color: #6dffff !important; 2037 } 2038 .ui.inverted.teal.basic.buttons .active.button, 2039 .ui.inverted.teal.buttons .basic.active.button, 2040 .ui.inverted.teal.basic.active.button { 2041 box-shadow: 0px 0px 0px 2px #6dffff inset !important; 2042 color: #6dffff !important; 2043 } 2044 .ui.inverted.teal.basic.buttons .button:active, 2045 .ui.inverted.teal.buttons .basic.button:active, 2046 .ui.inverted.teal.basic.button:active { 2047 box-shadow: 0px 0px 0px 2px #49ffff inset !important; 2048 color: #6dffff !important; 2049 } 2050 2051 /*--- Yellow ---*/ 2052 2053 .ui.yellow.buttons .button, 2054 .ui.yellow.button { 2055 background-color: #f2c61f; 2056 color: #ffffff; 2057 text-shadow: none; 2058 background-image: none; 2059 } 2060 .ui.yellow.button { 2061 box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset; 2062 } 2063 .ui.yellow.buttons .button:hover, 2064 .ui.yellow.button:hover { 2065 background-color: #f3ca2d; 2066 color: #ffffff; 2067 text-shadow: none; 2068 } 2069 .ui.yellow.buttons .button:active, 2070 .ui.yellow.button:active { 2071 background-color: #e0b40d; 2072 color: #ffffff; 2073 text-shadow: none; 2074 } 2075 .ui.yellow.buttons .active.button, 2076 .ui.yellow.buttons .active.button:active, 2077 .ui.yellow.active.button, 2078 .ui.yellow.button .active.button:active { 2079 background-color: #eabc0e; 2080 color: #ffffff; 2081 text-shadow: none; 2082 } 2083 2084 /* Basic */ 2085 .ui.basic.yellow.buttons .button, 2086 .ui.basic.yellow.button { 2087 box-shadow: 0px 0px 0px 2px rgba(39, 41, 43, 0.15) inset !important; 2088 color: rgba(0, 0, 0, 0.6) !important; 2089 } 2090 .ui.basic.yellow.buttons .button:hover, 2091 .ui.basic.yellow.button:hover { 2092 background: transparent !important; 2093 box-shadow: 0px 0px 0px 2px #f3ca2d inset !important; 2094 color: #f3ca2d !important; 2095 } 2096 .ui.basic.yellow.buttons .button:active, 2097 .ui.basic.yellow.button:active { 2098 box-shadow: 0px 0px 0px 2px #e0b40d inset !important; 2099 color: #e0b40d !important; 2100 } 2101 .ui.basic.yellow.buttons .active.button, 2102 .ui.basic.yellow.active.button { 2103 background: transparent !important; 2104 box-shadow: 0px 0px 0px 2px #e0b40d inset !important; 2105 color: #e0b40d !important; 2106 } 2107 .ui.buttons > .basic.yellow.button:not(:first-child) { 2108 margin-left: -2px; 2109 } 2110 2111 /* Inverted */ 2112 .ui.inverted.yellow.buttons .button, 2113 .ui.inverted.yellow.button { 2114 background-color: transparent; 2115 box-shadow: 0px 0px 0px 2px #ffe21f inset !important; 2116 color: #ffe21f; 2117 } 2118 .ui.inverted.yellow.buttons .button:hover, 2119 .ui.inverted.yellow.button:hover { 2120 box-shadow: 0px 0px 0px 2px #ffe21f inset !important; 2121 background-color: #ffe21f; 2122 color: #1b1c1d; 2123 } 2124 .ui.inverted.yellow.buttons .active.button, 2125 .ui.inverted.yellow.active.button { 2126 box-shadow: 0px 0px 0px 2px #ffe21f inset !important; 2127 background-color: #ffe21f; 2128 color: #1b1c1d; 2129 } 2130 .ui.inverted.yellow.buttons .button:active, 2131 .ui.inverted.yellow.button:active { 2132 box-shadow: 0px 0px 0px 2px #fada00 inset !important; 2133 background-color: #fada00; 2134 color: #1b1c1d; 2135 } 2136 2137 /* Inverted Basic */ 2138 .ui.inverted.yellow.basic.buttons .button, 2139 .ui.inverted.yellow.buttons .basic.button, 2140 .ui.inverted.yellow.basic.button { 2141 background-color: transparent; 2142 box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important; 2143 color: #ffffff !important; 2144 } 2145 .ui.inverted.yellow.basic.buttons .button:hover, 2146 .ui.inverted.yellow.buttons .basic.button:hover, 2147 .ui.inverted.yellow.basic.button:hover { 2148 box-shadow: 0px 0px 0px 2px #ffe21f inset !important; 2149 color: #ffe21f !important; 2150 } 2151 .ui.inverted.yellow.basic.buttons .active.button, 2152 .ui.inverted.yellow.buttons .basic.active.button, 2153 .ui.inverted.yellow.basic.active.button { 2154 box-shadow: 0px 0px 0px 2px #ffe21f inset !important; 2155 color: #ffe21f !important; 2156 } 2157 .ui.inverted.yellow.basic.buttons .button:active, 2158 .ui.inverted.yellow.buttons .basic.button:active, 2159 .ui.inverted.yellow.basic.button:active { 2160 box-shadow: 0px 0px 0px 2px #fada00 inset !important; 2161 color: #ffe21f !important; 2162 } 2163 2164 /*------------------- 2165 Primary 2166 --------------------*/ 2167 2168 .ui.primary.buttons .button, 2169 .ui.primary.button { 2170 background-color: #006e93; 2171 color: #ffffff; 2172 text-shadow: none; 2173 background-image: none; 2174 } 2175 .ui.primary.button { 2176 box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset; 2177 } 2178 .ui.primary.buttons .button:hover, 2179 .ui.primary.button:hover { 2180 background-color: #0079a2; 2181 color: #ffffff; 2182 text-shadow: none; 2183 } 2184 .ui.primary.buttons .button:active, 2185 .ui.primary.button:active { 2186 background-color: #00536f; 2187 color: #ffffff; 2188 text-shadow: none; 2189 } 2190 .ui.primary.buttons .active.button, 2191 .ui.primary.active.button { 2192 background-color: #005b7a; 2193 color: #ffffff; 2194 text-shadow: none; 2195 } 2196 2197 /*------------------- 2198 Secondary 2199 --------------------*/ 2200 2201 .ui.secondary.buttons .button, 2202 .ui.secondary.button { 2203 background-color: #1b1c1d; 2204 color: #ffffff; 2205 text-shadow: none; 2206 background-image: none; 2207 } 2208 .ui.secondary.button { 2209 box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset; 2210 } 2211 .ui.secondary.buttons .button:hover, 2212 .ui.secondary.button:hover { 2213 background-color: #222425; 2214 color: #ffffff; 2215 text-shadow: none; 2216 } 2217 .ui.secondary.buttons .button:active, 2218 .ui.secondary.button:active { 2219 background-color: #0a0a0b; 2220 color: #ffffff; 2221 text-shadow: none; 2222 } 2223 .ui.secondary.buttons .active.button, 2224 .ui.secondary.active.button { 2225 background-color: #0f0f10; 2226 color: #ffffff; 2227 text-shadow: none; 2228 } 2229 2230 /*--------------- 2231 Positive 2232 ----------------*/ 2233 2234 .ui.positive.buttons .button, 2235 .ui.positive.button { 2236 background-color: #5bbd72 !important; 2237 color: #ffffff; 2238 text-shadow: none; 2239 background-image: none; 2240 } 2241 .ui.positive.button { 2242 box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset; 2243 } 2244 .ui.positive.buttons .button:hover, 2245 .ui.positive.button:hover, 2246 .ui.positive.buttons .active.button, 2247 .ui.positive.active.button { 2248 background-color: #66c17b !important; 2249 color: #ffffff; 2250 text-shadow: none; 2251 } 2252 .ui.positive.buttons .button:active, 2253 .ui.positive.button:active { 2254 background-color: #46ae5f !important; 2255 color: #ffffff; 2256 text-shadow: none; 2257 } 2258 .ui.positive.buttons .active.button, 2259 .ui.positive.buttons .active.button:active, 2260 .ui.positive.active.button, 2261 .ui.positive.button .active.button:active { 2262 background-color: #49b562; 2263 color: #ffffff; 2264 text-shadow: none; 2265 } 2266 2267 /*--------------- 2268 Negative 2269 ----------------*/ 2270 2271 .ui.negative.buttons .button, 2272 .ui.negative.button { 2273 background-color: #d95c5c !important; 2274 color: #ffffff; 2275 text-shadow: none; 2276 background-image: none; 2277 } 2278 .ui.negative.button { 2279 box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset; 2280 } 2281 .ui.negative.buttons .button:hover, 2282 .ui.negative.button:hover, 2283 .ui.negative.buttons .active.button, 2284 .ui.negative.active.button { 2285 background-color: #dc6868 !important; 2286 color: #ffffff; 2287 text-shadow: none; 2288 } 2289 .ui.negative.buttons .button:active, 2290 .ui.negative.button:active { 2291 background-color: #d23f3f !important; 2292 color: #ffffff; 2293 text-shadow: none; 2294 } 2295 .ui.negative.buttons .active.button, 2296 .ui.negative.buttons .active.button:active, 2297 .ui.negative.active.button, 2298 .ui.negative.button .active.button:active { 2299 background-color: #d44747; 2300 color: #ffffff; 2301 text-shadow: none; 2302 } 2303 2304 2305 /******************************* 2306 Groups 2307 *******************************/ 2308 2309 .ui.buttons { 2310 display: inline-block; 2311 vertical-align: middle; 2312 margin: 0em 0.25em 0em 0em; 2313 } 2314 .ui.buttons > .button:hover, 2315 .ui.buttons > .active.button { 2316 position: relative; 2317 } 2318 .ui.buttons:after { 2319 content: "."; 2320 display: block; 2321 height: 0; 2322 clear: both; 2323 visibility: hidden; 2324 } 2325 .ui.buttons .button:first-child { 2326 border-left: none; 2327 } 2328 .ui.buttons:not(.basic):not(.inverted) { 2329 box-shadow: none; 2330 } 2331 .ui.buttons > .ui.button:not(.basic):not(.inverted), 2332 .ui.buttons:not(.basic):not(.inverted) > .button { 2333 box-shadow: 0px 0px 0px 1px transparent inset, 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset; 2334 } 2335 .ui.buttons .button { 2336 margin: 0em; 2337 float: left; 2338 border-radius: 0em; 2339 margin: 0px 0px 0px 0px; 2340 } 2341 .ui.buttons .button:first-child { 2342 margin-left: 0em; 2343 border-top-left-radius: 0.2857rem; 2344 border-bottom-left-radius: 0.2857rem; 2345 } 2346 .ui.buttons .button:last-child { 2347 border-top-right-radius: 0.2857rem; 2348 border-bottom-right-radius: 0.2857rem; 2349 } 2350 2351 /* Vertical Style */ 2352 .ui.vertical.buttons { 2353 display: inline-block; 2354 } 2355 .ui.vertical.buttons .button { 2356 display: block; 2357 float: none; 2358 width: 100%; 2359 margin: 0px 0px 0px 0px; 2360 box-shadow: none; 2361 } 2362 .ui.vertical.buttons .button:first-child, 2363 .ui.vertical.buttons .mini.button:first-child, 2364 .ui.vertical.buttons .tiny.button:first-child, 2365 .ui.vertical.buttons .small.button:first-child, 2366 .ui.vertical.buttons .massive.button:first-child, 2367 .ui.vertical.buttons .huge.button:first-child { 2368 border-radius: 0.2857rem 0.2857rem 0px 0px; 2369 } 2370 .ui.vertical.buttons .button:last-child, 2371 .ui.vertical.buttons .mini.button:last-child, 2372 .ui.vertical.buttons .tiny.button:last-child, 2373 .ui.vertical.buttons .small.button:last-child, 2374 .ui.vertical.buttons .massive.button:last-child, 2375 .ui.vertical.buttons .huge.button:last-child, 2376 .ui.vertical.buttons .gigantic.button:last-child { 2377 margin-bottom: 0px; 2378 border-radius: 0px 0px 0.2857rem 0.2857rem; 2379 } 2380 2381 2382 /******************************* 2383 Theme Overrides 2384 *******************************/ 2385 2386 2387 2388 /******************************* 2389 Site Overrides 2390 *******************************/ 2391