code.gitea.io/gitea@v1.21.7/web_src/css/modules/button.css (about) 1 /* this contains override styles for buttons and related elements */ 2 3 /* these styles changed the Fomantic UI's rules, Fomantic UI expects only "basic" buttons have borders */ 4 .ui.button, 5 .ui.button:focus { 6 background: var(--color-button); 7 border: 1px solid var(--color-light-border); 8 color: var(--color-text); 9 } 10 11 .ui.button:hover { 12 background: var(--color-hover); 13 color: var(--color-text); 14 } 15 16 .page-content .ui.button { 17 box-shadow: none !important; 18 } 19 20 .ui.active.button, 21 .ui.button:active, 22 .ui.active.button:active, 23 .ui.active.button:hover { 24 background: var(--color-active); 25 color: var(--color-text); 26 } 27 28 .delete-button, 29 .delete-button:hover { 30 color: var(--color-red); 31 } 32 33 /* btn is a plain button without any opinionated styling, it only uses flex for vertical alignment like ".ui.button" in base.css */ 34 35 .btn { 36 background: transparent; 37 border-radius: var(--border-radius); 38 border: none; 39 color: inherit; 40 margin: 0; 41 padding: 0; 42 } 43 44 .btn:hover, 45 .btn:active, 46 .btn:focus { 47 background: none; 48 border: none; 49 } 50 51 a.btn, 52 a.btn:hover { 53 color: inherit; 54 } 55 56 /* By default, Fomantic UI doesn't support "bordered" buttons group, but Gitea would like to use it. 57 And the default buttons always have borders now (not the same as Fomantic UI's default buttons, see above). 58 It needs some tricks to tweak the left/right borders with active state */ 59 60 .ui.buttons .button { 61 border-right: none; 62 } 63 64 .ui.buttons .button:first-child { 65 border-left: 1px solid var(--color-light-border); 66 } 67 68 .ui.buttons .button:last-child { 69 border-right: 1px solid var(--color-light-border); 70 } 71 72 .ui.buttons .button.active { 73 border-left: 1px solid var(--color-light-border); 74 border-right: 1px solid var(--color-light-border); 75 } 76 77 .ui.buttons .button.active + .button { 78 border-left: none; 79 } 80 81 .ui.basic.buttons .button, 82 .ui.basic.button, 83 .ui.basic.buttons .button:hover, 84 .ui.basic.button:hover { 85 box-shadow: none; 86 } 87 88 .ui.labeled.button.disabled > .button, 89 .ui.basic.buttons .button, 90 .ui.basic.button, 91 .ui.basic.buttons .button:focus, 92 .ui.basic.button:focus { 93 color: var(--color-text-light); 94 background: var(--color-button); 95 } 96 97 .ui.basic.buttons .button:hover, 98 .ui.basic.button:hover { 99 color: var(--color-text); 100 background: var(--color-hover); 101 } 102 103 .ui.basic.buttons .button:active, 104 .ui.basic.button:active, 105 .ui.basic.buttons .active.button, 106 .ui.basic.active.button, 107 .ui.basic.buttons .active.button:hover, 108 .ui.basic.active.button:hover { 109 color: var(--color-text); 110 background: var(--color-active); 111 } 112 113 .ui.labeled.button > .label { 114 border-color: var(--color-light-border); 115 } 116 117 .ui.labeled.icon.buttons > .button > .icon, 118 .ui.labeled.icon.button > .icon { 119 background: var(--color-hover); 120 } 121 122 /* primary */ 123 124 .ui.primary.labels .label, 125 .ui.ui.ui.primary.label, 126 .ui.primary.button, 127 .ui.primary.buttons .button, 128 .ui.primary.button:focus, 129 .ui.primary.buttons .button:focus { 130 background: var(--color-primary); 131 color: var(--color-primary-contrast); 132 } 133 134 .ui.primary.button:hover, 135 .ui.primary.buttons .button:hover { 136 background: var(--color-primary-hover); 137 color: var(--color-primary-contrast); 138 } 139 140 .ui.primary.button:active, 141 .ui.primary.buttons .button:active { 142 background: var(--color-primary-active); 143 } 144 145 .ui.basic.primary.buttons .button, 146 .ui.basic.primary.button, 147 .ui.basic.primary.buttons .button:focus, 148 .ui.basic.primary.button:focus { 149 color: var(--color-primary); 150 border-color: var(--color-primary); 151 } 152 153 .ui.basic.primary.buttons .button:hover, 154 .ui.basic.primary.button:hover { 155 color: var(--color-primary-hover); 156 border-color: var(--color-primary-hover); 157 } 158 159 .ui.basic.primary.buttons .button:active, 160 .ui.basic.primary.button:active { 161 color: var(--color-primary-active); 162 border-color: var(--color-primary-active); 163 } 164 165 /* secondary */ 166 167 .ui.secondary.labels .label, 168 .ui.ui.ui.secondary.label, 169 .ui.secondary.button, 170 .ui.secondary.buttons .button, 171 .ui.secondary.button:focus, 172 .ui.secondary.buttons .button:focus { 173 background: var(--color-secondary-button); 174 } 175 176 .ui.secondary.button:hover, 177 .ui.secondary.buttons .button:hover { 178 background: var(--color-secondary-hover); 179 } 180 181 .ui.secondary.button:active, 182 .ui.secondary.buttons .button:active { 183 background: var(--color-secondary-active); 184 } 185 186 .ui.basic.secondary.buttons .button, 187 .ui.basic.secondary.button, 188 .ui.basic.secondary.button:focus, 189 .ui.basic.secondary.buttons .button:focus { 190 color: var(--color-secondary-button); 191 border-color: var(--color-secondary-button); 192 } 193 194 .ui.basic.secondary.buttons .button:hover, 195 .ui.basic.secondary.button:hover { 196 color: var(--color-secondary-hover); 197 border-color: var(--color-secondary-hover); 198 } 199 200 .ui.basic.secondary.buttons .button:active, 201 .ui.basic.secondary.button:active { 202 color: var(--color-secondary-active); 203 border-color: var(--color-secondary-active); 204 } 205 206 /* red */ 207 208 .ui.red.labels .label, 209 .ui.ui.ui.red.label, 210 .ui.red.button, 211 .ui.red.buttons .button, 212 .ui.red.button:focus, 213 .ui.red.buttons .button:focus { 214 background: var(--color-red); 215 } 216 217 .ui.red.button:hover, 218 .ui.red.buttons .button:hover { 219 background: var(--color-red-dark-1); 220 } 221 222 .ui.red.button:active, 223 .ui.red.buttons .button:active { 224 background: var(--color-red-dark-2); 225 } 226 227 .ui.basic.red.buttons .button, 228 .ui.basic.red.button, 229 .ui.basic.red.buttons .button:focus, 230 .ui.basic.red.button:focus { 231 color: var(--color-red); 232 border-color: var(--color-red); 233 } 234 235 .ui.basic.red.buttons .button:hover, 236 .ui.basic.red.button:hover { 237 color: var(--color-red-dark-1); 238 border-color: var(--color-red-dark-1); 239 } 240 241 .ui.basic.red.buttons .button:active, 242 .ui.basic.red.button:active { 243 color: var(--color-red-dark-2); 244 border-color: var(--color-red-dark-2); 245 } 246 247 /* orange */ 248 249 .ui.orange.labels .label, 250 .ui.ui.ui.orange.label, 251 .ui.orange.button, 252 .ui.orange.buttons .button, 253 .ui.orange.button:focus, 254 .ui.orange.buttons .button:focus { 255 background: var(--color-orange); 256 } 257 258 .ui.orange.button:hover, 259 .ui.orange.buttons .button:hover { 260 background: var(--color-orange-dark-1); 261 } 262 263 .ui.orange.button:active, 264 .ui.orange.buttons .button:active { 265 background: var(--color-orange-dark-2); 266 } 267 268 .ui.basic.orange.buttons .button, 269 .ui.basic.orange.button, 270 .ui.basic.orange.buttons .button:focus, 271 .ui.basic.orange.button:focus { 272 color: var(--color-orange); 273 border-color: var(--color-orange); 274 } 275 276 .ui.basic.orange.buttons .button:hover, 277 .ui.basic.orange.button:hover { 278 color: var(--color-orange-dark-1); 279 border-color: var(--color-orange-dark-1); 280 } 281 282 .ui.basic.orange.buttons .button:active, 283 .ui.basic.orange.button:active { 284 color: var(--color-orange-dark-2); 285 border-color: var(--color-orange-dark-2); 286 } 287 288 /* yellow */ 289 290 .ui.yellow.labels .label, 291 .ui.ui.ui.yellow.label, 292 .ui.yellow.button, 293 .ui.yellow.buttons .button, 294 .ui.yellow.button:focus, 295 .ui.yellow.buttons .button:focus { 296 background: var(--color-yellow); 297 } 298 299 .ui.yellow.button:hover, 300 .ui.yellow.buttons .button:hover { 301 background: var(--color-yellow-dark-1); 302 } 303 304 .ui.yellow.button:active, 305 .ui.yellow.buttons .button:active { 306 background: var(--color-yellow-dark-2); 307 } 308 309 .ui.basic.yellow.buttons .button, 310 .ui.basic.yellow.button, 311 .ui.basic.yellow.buttons .button:focus, 312 .ui.basic.yellow.button:focus { 313 color: var(--color-yellow); 314 border-color: var(--color-yellow); 315 } 316 317 .ui.basic.yellow.buttons .button:hover, 318 .ui.basic.yellow.button:hover { 319 color: var(--color-yellow-dark-1); 320 border-color: var(--color-yellow-dark-1); 321 } 322 323 .ui.basic.yellow.buttons .button:active, 324 .ui.basic.yellow.button:active { 325 color: var(--color-yellow-dark-2); 326 border-color: var(--color-yellow-dark-2); 327 } 328 329 /* olive */ 330 331 .ui.olive.labels .label, 332 .ui.ui.ui.olive.label, 333 .ui.olive.button, 334 .ui.olive.buttons .button, 335 .ui.olive.button:focus, 336 .ui.olive.buttons .button:focus { 337 background: var(--color-olive); 338 } 339 340 .ui.olive.button:hover, 341 .ui.olive.buttons .button:hover { 342 background: var(--color-olive-dark-1); 343 } 344 345 .ui.olive.button:active, 346 .ui.olive.buttons .button:active { 347 background: var(--color-olive-dark-2); 348 } 349 350 .ui.basic.olive.buttons .button, 351 .ui.basic.olive.button, 352 .ui.basic.olive.buttons .button:focus, 353 .ui.basic.olive.button:focus { 354 color: var(--color-olive); 355 border-color: var(--color-olive); 356 } 357 358 .ui.basic.olive.buttons .button:hover, 359 .ui.basic.olive.button:hover { 360 color: var(--color-olive-dark-1); 361 border-color: var(--color-olive-dark-1); 362 } 363 364 .ui.basic.olive.buttons .button:active, 365 .ui.basic.olive.button:active { 366 color: var(--color-olive-dark-2); 367 border-color: var(--color-olive-dark-2); 368 } 369 370 /* green */ 371 372 .ui.green.labels .label, 373 .ui.ui.ui.green.label, 374 .ui.green.button, 375 .ui.green.buttons .button, 376 .ui.green.button:focus, 377 .ui.green.buttons .button:focus { 378 background: var(--color-green); 379 } 380 381 .ui.green.button:hover, 382 .ui.green.buttons .button:hover { 383 background: var(--color-green-dark-1); 384 } 385 386 .ui.green.button:active, 387 .ui.green.buttons .button:active { 388 background: var(--color-green-dark-2); 389 } 390 391 .ui.basic.green.buttons .button, 392 .ui.basic.green.button, 393 .ui.basic.green.buttons .button:focus, 394 .ui.basic.green.button:focus { 395 color: var(--color-green); 396 border-color: var(--color-green); 397 } 398 399 .ui.basic.green.buttons .button:hover, 400 .ui.basic.green.button:hover { 401 color: var(--color-green-dark-1); 402 border-color: var(--color-green-dark-1); 403 } 404 405 .ui.basic.green.buttons .button:active, 406 .ui.basic.green.button:active { 407 color: var(--color-green-dark-2); 408 border-color: var(--color-green-dark-2); 409 } 410 411 /* teal */ 412 413 .ui.teal.labels .label, 414 .ui.ui.ui.teal.label, 415 .ui.teal.button, 416 .ui.teal.buttons .button, 417 .ui.teal.button:focus, 418 .ui.teal.buttons .button:focus { 419 background: var(--color-teal); 420 } 421 422 .ui.teal.button:hover, 423 .ui.teal.buttons .button:hover { 424 background: var(--color-teal-dark-1); 425 } 426 427 .ui.teal.button:active, 428 .ui.teal.buttons .button:active { 429 background: var(--color-teal-dark-2); 430 } 431 432 .ui.basic.teal.buttons .button, 433 .ui.basic.teal.button, 434 .ui.basic.teal.buttons .button:focus, 435 .ui.basic.teal.button:focus { 436 color: var(--color-teal); 437 border-color: var(--color-teal); 438 } 439 440 .ui.basic.teal.buttons .button:hover, 441 .ui.basic.teal.button:hover { 442 color: var(--color-teal-dark-1); 443 border-color: var(--color-teal-dark-1); 444 } 445 446 .ui.basic.teal.buttons .button:active, 447 .ui.basic.teal.button:active { 448 color: var(--color-teal-dark-2); 449 border-color: var(--color-teal-dark-2); 450 } 451 452 /* blue */ 453 454 .ui.blue.labels .label, 455 .ui.ui.ui.blue.label, 456 .ui.blue.button, 457 .ui.blue.buttons .button, 458 .ui.blue.button:focus, 459 .ui.blue.buttons .button:focus { 460 background: var(--color-blue); 461 } 462 463 .ui.blue.button:hover, 464 .ui.blue.buttons .button:hover { 465 background: var(--color-blue-dark-1); 466 } 467 468 .ui.blue.button:active, 469 .ui.blue.buttons .button:active { 470 background: var(--color-blue-dark-2); 471 } 472 473 .ui.basic.blue.buttons .button, 474 .ui.basic.blue.button, 475 .ui.basic.blue.buttons .button:focus, 476 .ui.basic.blue.button:focus { 477 color: var(--color-blue); 478 border-color: var(--color-blue); 479 } 480 481 .ui.basic.blue.buttons .button:hover, 482 .ui.basic.blue.button:hover { 483 color: var(--color-blue-dark-1); 484 border-color: var(--color-blue-dark-1); 485 } 486 487 .ui.basic.blue.buttons .button:active, 488 .ui.basic.blue.button:active { 489 color: var(--color-blue-dark-2); 490 border-color: var(--color-blue-dark-2); 491 } 492 493 /* violet */ 494 495 .ui.violet.labels .label, 496 .ui.ui.ui.violet.label, 497 .ui.violet.button, 498 .ui.violet.buttons .button, 499 .ui.violet.button:focus, 500 .ui.violet.buttons .button:focus { 501 background: var(--color-violet); 502 } 503 504 .ui.violet.button:hover, 505 .ui.violet.buttons .button:hover { 506 background: var(--color-violet-dark-1); 507 } 508 509 .ui.violet.button:active, 510 .ui.violet.buttons .button:active { 511 background: var(--color-violet-dark-2); 512 } 513 514 .ui.basic.violet.buttons .button, 515 .ui.basic.violet.button, 516 .ui.basic.violet.buttons .button:focus, 517 .ui.basic.violet.button:focus { 518 color: var(--color-violet); 519 border-color: var(--color-violet); 520 } 521 522 .ui.basic.violet.buttons .button:hover, 523 .ui.basic.violet.button:hover { 524 color: var(--color-violet-dark-1); 525 border-color: var(--color-violet-dark-1); 526 } 527 528 .ui.basic.violet.buttons .button:active, 529 .ui.basic.violet.button:active { 530 color: var(--color-violet-dark-2); 531 border-color: var(--color-violet-dark-2); 532 } 533 534 /* purple */ 535 536 .ui.purple.labels .label, 537 .ui.ui.ui.purple.label, 538 .ui.purple.button, 539 .ui.purple.buttons .button, 540 .ui.purple.button:focus, 541 .ui.purple.buttons .button:focus { 542 background: var(--color-purple); 543 } 544 545 .ui.purple.button:hover, 546 .ui.purple.buttons .button:hover { 547 background: var(--color-purple-dark-1); 548 } 549 550 .ui.purple.button:active, 551 .ui.purple.buttons .button:active { 552 background: var(--color-purple-dark-2); 553 } 554 555 .ui.basic.purple.buttons .button, 556 .ui.basic.purple.button, 557 .ui.basic.purple.buttons .button:focus, 558 .ui.basic.purple.button:focus { 559 color: var(--color-purple); 560 border-color: var(--color-purple); 561 } 562 563 .ui.basic.purple.buttons .button:hover, 564 .ui.basic.purple.button:hover { 565 color: var(--color-purple-dark-1); 566 border-color: var(--color-purple-dark-1); 567 } 568 569 .ui.basic.purple.buttons .button:active, 570 .ui.basic.purple.button:active { 571 color: var(--color-purple-dark-2); 572 border-color: var(--color-purple-dark-2); 573 } 574 575 /* pink */ 576 577 .ui.pink.labels .label, 578 .ui.ui.ui.pink.label, 579 .ui.pink.button, 580 .ui.pink.buttons .button, 581 .ui.pink.button:focus, 582 .ui.pink.buttons .button:focus { 583 background: var(--color-pink); 584 } 585 586 .ui.pink.button:hover, 587 .ui.pink.buttons .button:hover { 588 background: var(--color-pink-dark-1); 589 } 590 591 .ui.pink.button:active, 592 .ui.pink.buttons .button:active { 593 background: var(--color-pink-dark-2); 594 } 595 596 .ui.basic.pink.buttons .button, 597 .ui.basic.pink.button, 598 .ui.basic.pink.buttons .button:focus, 599 .ui.basic.pink.button:focus { 600 color: var(--color-pink); 601 border-color: var(--color-pink); 602 } 603 604 .ui.basic.pink.buttons .button:hover, 605 .ui.basic.pink.button:hover { 606 color: var(--color-pink-dark-1); 607 border-color: var(--color-pink-dark-1); 608 } 609 610 .ui.basic.pink.buttons .button:active, 611 .ui.basic.pink.button:active { 612 color: var(--color-pink-dark-2); 613 border-color: var(--color-pink-dark-2); 614 } 615 616 /* brown */ 617 618 .ui.brown.labels .label, 619 .ui.ui.ui.brown.label, 620 .ui.brown.button, 621 .ui.brown.buttons .button, 622 .ui.brown.button:focus, 623 .ui.brown.buttons .button:focus { 624 background: var(--color-brown); 625 } 626 627 .ui.brown.button:hover, 628 .ui.brown.buttons .button:hover { 629 background: var(--color-brown-dark-1); 630 } 631 632 .ui.brown.button:active, 633 .ui.brown.buttons .button:active { 634 background: var(--color-brown-dark-2); 635 } 636 637 .ui.basic.brown.buttons .button, 638 .ui.basic.brown.button, 639 .ui.basic.brown.buttons .button:focus, 640 .ui.basic.brown.button:focus { 641 color: var(--color-brown); 642 border-color: var(--color-brown); 643 } 644 645 .ui.basic.brown.buttons .button:hover, 646 .ui.basic.brown.button:hover { 647 color: var(--color-brown-dark-1); 648 border-color: var(--color-brown-dark-1); 649 } 650 651 .ui.basic.brown.buttons .button:active, 652 .ui.basic.brown.button:active { 653 color: var(--color-brown-dark-2); 654 border-color: var(--color-brown-dark-2); 655 } 656 657 /* negative */ 658 659 .ui.negative.buttons .button, 660 .ui.negative.button, 661 .ui.negative.buttons .button:focus, 662 .ui.negative.button:focus { 663 background: var(--color-red); 664 } 665 666 .ui.negative.buttons .button:hover, 667 .ui.negative.button:hover { 668 background: var(--color-red-dark-1); 669 } 670 671 .ui.negative.buttons .button:active, 672 .ui.negative.button:active { 673 background: var(--color-red-dark-2); 674 } 675 676 .ui.basic.negative.buttons .button, 677 .ui.basic.negative.button, 678 .ui.basic.negative.buttons .button:focus, 679 .ui.basic.negative.button:focus { 680 color: var(--color-red); 681 border-color: var(--color-red); 682 } 683 684 .ui.basic.negative.buttons .button:hover, 685 .ui.basic.negative.button:hover { 686 color: var(--color-red-dark-1); 687 border-color: var(--color-red-dark-1); 688 } 689 690 .ui.basic.negative.buttons .button:active, 691 .ui.basic.negative.button:active { 692 color: var(--color-red-dark-2); 693 border-color: var(--color-red-dark-2); 694 } 695 696 /* positive */ 697 698 .ui.positive.buttons .button, 699 .ui.positive.button, 700 .ui.positive.buttons .button:focus, 701 .ui.positive.button:focus { 702 background: var(--color-green); 703 } 704 705 .ui.positive.buttons .button:hover, 706 .ui.positive.button:hover { 707 background: var(--color-green-dark-1); 708 } 709 710 .ui.positive.buttons .button:active, 711 .ui.positive.button:active { 712 background: var(--color-green-dark-2); 713 } 714 715 .ui.basic.positive.buttons .button, 716 .ui.basic.positive.button, 717 .ui.basic.positive.buttons .button:focus, 718 .ui.basic.positive.button:focus { 719 color: var(--color-green); 720 border-color: var(--color-green); 721 } 722 723 .ui.basic.positive.buttons .button:hover, 724 .ui.basic.positive.button:hover { 725 color: var(--color-green-dark-1); 726 border-color: var(--color-green-dark-1); 727 } 728 729 .ui.basic.positive.buttons .button:active, 730 .ui.basic.positive.button:active { 731 color: var(--color-green-dark-2); 732 border-color: var(--color-green-dark-2); 733 }