oppi.li / perf-test
loading up the forgejo repo on tangled to test page performance
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Rework button coloring, add focus and active colors (#24507)

We were missing overrides for `:focus` and `:active` styles which I've
added here along with two new color variants `dark-1` and `dark-2` for
them. Fomantic UI has 4 different colors but I think 3 are sufficient. I
also changed it on arc-green so button goes darker when pressed.

<img width="129" alt="Screenshot 2023-05-04 at 01 21 43"
src="https://user-images.githubusercontent.com/115237/236072060-7389276a-275b-4d3e-aa52-20b37c6e6d92.png">
<img width="130" alt="Screenshot 2023-05-04 at 01 17 59"
src="https://user-images.githubusercontent.com/115237/236071818-0e46414a-33db-4bb2-a3bd-35b514a8a2d0.png">
<img width="129" alt="Screenshot 2023-05-04 at 01 18 07"
src="https://user-images.githubusercontent.com/115237/236071819-562b1e38-541f-432b-b3b6-48e6d7594d00.png">
<img width="131" alt="Screenshot 2023-05-04 at 01 18 13"
src="https://user-images.githubusercontent.com/115237/236071820-89b7dba9-ce6c-48e5-a075-9053063e6ad3.png">
<img width="133" alt="Screenshot 2023-05-04 at 01 18 30"
src="https://user-images.githubusercontent.com/115237/236071823-b6fe2df4-b3f0-4dc8-97a8-f90ba6d19bec.png">
<img width="133" alt="Screenshot 2023-05-04 at 01 18 40"
src="https://user-images.githubusercontent.com/115237/236071824-b02ce61a-2367-4c29-8a25-45f231f5e5ee.png">

One misc change includes some fixes to editor and slightly darker
selection.

<img width="1245" alt="Screenshot 2023-05-28 at 19 16 19"
src="https://github.com/go-gitea/gitea/assets/115237/1ea4a4b6-26ba-45af-9cbc-5b8c476c2338">

authored by

silverwind and committed by
GitHub 79a4c80f e4e98979

+907 -497
+2 -2
templates/repo/clone_buttons.tmpl
··· 1 1 <!-- there is always at least one button (by context/repo.go) --> 2 2 {{if $.CloneButtonShowHTTPS}} 3 - <button class="ui basic small compact clone button gt-no-transition" id="repo-clone-https" data-link="{{$.CloneButtonOriginLink.HTTPS}}"> 3 + <button class="ui small compact clone button gt-no-transition" id="repo-clone-https" data-link="{{$.CloneButtonOriginLink.HTTPS}}"> 4 4 HTTPS 5 5 </button> 6 6 {{end}} 7 7 {{if $.CloneButtonShowSSH}} 8 - <button class="ui basic small compact clone button gt-no-transition" id="repo-clone-ssh" data-link="{{$.CloneButtonOriginLink.SSH}}"> 8 + <button class="ui small compact clone button gt-no-transition" id="repo-clone-ssh" data-link="{{$.CloneButtonOriginLink.SSH}}"> 9 9 SSH 10 10 </button> 11 11 {{end}}
+6 -2
templates/repo/clone_script.tmpl
··· 13 13 14 14 if (httpsBtn) { 15 15 httpsBtn.textContent = window.origin.split(':')[0].toUpperCase(); 16 - httpsBtn.classList[!isSSH ? 'add' : 'remove']('primary'); 16 + httpsBtn.classList.toggle('primary', !isSSH); 17 + httpsBtn.classList.toggle('basic', isSSH); 17 18 } 18 - if (sshBtn) sshBtn.classList[isSSH ? 'add' : 'remove']('primary'); 19 + if (sshBtn) { 20 + sshBtn.classList.toggle('primary', isSSH); 21 + sshBtn.classList.toggle('basic', !isSSH); 22 + } 19 23 20 24 const btn = isSSH ? sshBtn : httpsBtn; 21 25 if (!btn) return;
+30 -478
web_src/css/base.css
··· 43 43 --color-primary-alpha-70: #4183c4b3; 44 44 --color-primary-alpha-80: #4183c4cc; 45 45 --color-primary-alpha-90: #4183c4e1; 46 + --color-primary-hover: var(--color-primary-dark-1); 47 + --color-primary-active: var(--color-primary-dark-2); 46 48 --color-secondary: #dedede; 47 49 --color-secondary-dark-1: #cecece; 48 50 --color-secondary-dark-2: #bfbfbf; ··· 70 72 --color-secondary-alpha-70: #dededeb3; 71 73 --color-secondary-alpha-80: #dededecc; 72 74 --color-secondary-alpha-90: #dededee1; 75 + --color-secondary-hover: var(--color-secondary-dark-1); 76 + --color-secondary-active: var(--color-secondary-dark-2); 73 77 /* console colors */ 74 78 --color-console-fg: #ffffff; 75 79 --color-console-bg: #252a2f; ··· 102 106 --color-pink-light: #e86bb1; 103 107 --color-brown-light: #c58b66; 104 108 --color-black-light: #525558; 109 + /* dark 1 variants - produced via Sass scale-color(color, $lightness: -10%) */ 110 + --color-red-dark-1: #c82121; 111 + --color-orange-dark-1: #e6630d; 112 + --color-yellow-dark-1: #e5ac04; 113 + --color-olive-dark-1: #a3b816; 114 + --color-green-dark-1: #1ea73e; 115 + --color-teal-dark-1: #00a39c; 116 + --color-blue-dark-1: #1e78bb; 117 + --color-violet-dark-1: #5a30b5; 118 + --color-purple-dark-1: #932eb4; 119 + --color-pink-dark-1: #db228a; 120 + --color-brown-dark-1: #955d39; 121 + --color-black-dark-1: #18191a; 122 + /* dark 2 variants - produced via Sass scale-color(color, $lightness: -20%) */ 123 + --color-red-dark-2: #b11e1e; 124 + --color-orange-dark-2: #cc580c; 125 + --color-yellow-dark-2: #cc9903; 126 + --color-olive-dark-2: #91a313; 127 + --color-green-dark-2: #1a9537; 128 + --color-teal-dark-2: #00918a; 129 + --color-blue-dark-2: #1a6aa6; 130 + --color-violet-dark-2: #502aa1; 131 + --color-purple-dark-2: #8229a0; 132 + --color-pink-dark-2: #c21e7b; 133 + --color-brown-dark-2: #845232; 134 + --color-black-dark-2: #161617; 105 135 /* other colors */ 106 136 --color-grey: #707070; 107 137 --color-grey-light: #838383; ··· 392 422 .ui.cards a.card, 393 423 .issue-keyword a { 394 424 text-decoration: none !important; 395 - } 396 - 397 - .ui.red.labels .label, 398 - .ui.ui.ui.red.label, 399 - .ui.red.button, 400 - .ui.red.buttons .button { 401 - background: var(--color-red); 402 - } 403 - 404 - .ui.red.button:hover, 405 - .ui.red.buttons .button:hover { 406 - background: var(--color-red-light); 407 - } 408 - 409 - .ui.basic.red.buttons .button, 410 - .ui.basic.red.button { 411 - color: var(--color-red); 412 - border-color: var(--color-red); 413 - } 414 - 415 - .ui.basic.red.buttons .button:hover, 416 - .ui.basic.red.button:hover { 417 - color: var(--color-red-light); 418 - border-color: var(--color-red-light); 419 - } 420 - 421 - .ui.orange.labels .label, 422 - .ui.ui.ui.orange.label, 423 - .ui.orange.button, 424 - .ui.orange.buttons .button { 425 - background: var(--color-orange); 426 - } 427 - 428 - .ui.orange.button:hover, 429 - .ui.orange.buttons .button:hover { 430 - background: var(--color-orange-light); 431 - } 432 - 433 - .ui.basic.orange.buttons .button, 434 - .ui.basic.orange.button { 435 - color: var(--color-orange); 436 - border-color: var(--color-orange); 437 - } 438 - 439 - .ui.basic.orange.buttons .button:hover, 440 - .ui.basic.orange.button:hover { 441 - color: var(--color-orange-light); 442 - border-color: var(--color-orange-light); 443 - } 444 - 445 - .ui.yellow.labels .label, 446 - .ui.ui.ui.yellow.label, 447 - .ui.yellow.button, 448 - .ui.yellow.buttons .button { 449 - background: var(--color-yellow); 450 - } 451 - 452 - .ui.yellow.button:hover, 453 - .ui.yellow.buttons .button:hover { 454 - background: var(--color-yellow-light); 455 - } 456 - 457 - .ui.basic.yellow.buttons .button, 458 - .ui.basic.yellow.button { 459 - color: var(--color-yellow); 460 - border-color: var(--color-yellow); 461 - } 462 - 463 - .ui.basic.yellow.buttons .button:hover, 464 - .ui.basic.yellow.button:hover { 465 - color: var(--color-yellow-light); 466 - border-color: var(--color-yellow-light); 467 - } 468 - 469 - .ui.olive.labels .label, 470 - .ui.ui.ui.olive.label, 471 - .ui.olive.button, 472 - .ui.olive.buttons .button { 473 - background: var(--color-olive); 474 - } 475 - 476 - .ui.olive.button:hover, 477 - .ui.olive.buttons .button:hover { 478 - background: var(--color-olive-light); 479 - } 480 - 481 - .ui.basic.olive.buttons .button, 482 - .ui.basic.olive.button { 483 - color: var(--color-olive); 484 - border-color: var(--color-olive); 485 - } 486 - 487 - .ui.basic.olive.buttons .button:hover, 488 - .ui.basic.olive.button:hover { 489 - color: var(--color-olive-light); 490 - border-color: var(--color-olive-light); 491 - } 492 - 493 - .ui.green.labels .label, 494 - .ui.ui.ui.green.label, 495 - .ui.green.button, 496 - .ui.green.buttons .button { 497 - background: var(--color-green); 498 - } 499 - 500 - .ui.green.button:hover, 501 - .ui.green.buttons .button:hover { 502 - background: var(--color-green-light); 503 - } 504 - 505 - .ui.basic.green.buttons .button, 506 - .ui.basic.green.button { 507 - color: var(--color-green); 508 - border-color: var(--color-green); 509 - } 510 - 511 - .ui.basic.green.buttons .button:hover, 512 - .ui.basic.green.button:hover { 513 - color: var(--color-green-light); 514 - border-color: var(--color-green-light); 515 - } 516 - 517 - .ui.teal.labels .label, 518 - .ui.ui.ui.teal.label, 519 - .ui.teal.button, 520 - .ui.teal.buttons .button { 521 - background: var(--color-teal); 522 - } 523 - 524 - .ui.teal.button:hover, 525 - .ui.teal.buttons .button:hover { 526 - background: var(--color-teal-light); 527 - } 528 - 529 - .ui.basic.teal.buttons .button, 530 - .ui.basic.teal.button { 531 - color: var(--color-teal); 532 - border-color: var(--color-teal); 533 - } 534 - 535 - .ui.basic.teal.buttons .button:hover, 536 - .ui.basic.teal.button:hover { 537 - color: var(--color-teal-light); 538 - border-color: var(--color-teal-light); 539 - } 540 - 541 - .ui.blue.labels .label, 542 - .ui.ui.ui.blue.label, 543 - .ui.blue.button, 544 - .ui.blue.buttons .button { 545 - background: var(--color-blue); 546 - } 547 - 548 - .ui.blue.button:hover, 549 - .ui.blue.buttons .button:hover { 550 - background: var(--color-blue-light); 551 - } 552 - 553 - .ui.basic.blue.buttons .button, 554 - .ui.basic.blue.button { 555 - color: var(--color-blue); 556 - border-color: var(--color-blue); 557 - } 558 - 559 - .ui.basic.blue.buttons .button:hover, 560 - .ui.basic.blue.button:hover { 561 - color: var(--color-blue-light); 562 - border-color: var(--color-blue-light); 563 - } 564 - 565 - .ui.violet.labels .label, 566 - .ui.ui.ui.violet.label, 567 - .ui.violet.button, 568 - .ui.violet.buttons .button { 569 - background: var(--color-violet); 570 - } 571 - 572 - .ui.violet.button:hover, 573 - .ui.violet.buttons .button:hover { 574 - background: var(--color-violet-light); 575 - } 576 - 577 - .ui.basic.violet.buttons .button, 578 - .ui.basic.violet.button { 579 - color: var(--color-violet); 580 - border-color: var(--color-violet); 581 - } 582 - 583 - .ui.basic.violet.buttons .button:hover, 584 - .ui.basic.violet.button:hover { 585 - color: var(--color-violet-light); 586 - border-color: var(--color-violet-light); 587 - } 588 - 589 - .ui.purple.labels .label, 590 - .ui.ui.ui.purple.label, 591 - .ui.purple.button, 592 - .ui.purple.buttons .button { 593 - background: var(--color-purple); 594 - } 595 - 596 - .ui.purple.button:hover, 597 - .ui.purple.buttons .button:hover { 598 - background: var(--color-purple-light); 599 - } 600 - 601 - .ui.basic.purple.buttons .button, 602 - .ui.basic.purple.button { 603 - color: var(--color-purple); 604 - border-color: var(--color-purple); 605 - } 606 - 607 - .ui.basic.purple.buttons .button:hover, 608 - .ui.basic.purple.button:hover { 609 - color: var(--color-purple-light); 610 - border-color: var(--color-purple-light); 611 - } 612 - 613 - .ui.pink.labels .label, 614 - .ui.ui.ui.pink.label, 615 - .ui.pink.button, 616 - .ui.pink.buttons .button { 617 - background: var(--color-pink); 618 - } 619 - 620 - .ui.pink.button:hover, 621 - .ui.pink.buttons .button:hover { 622 - background: var(--color-pink-light); 623 - } 624 - 625 - .ui.basic.pink.buttons .button, 626 - .ui.basic.pink.button { 627 - color: var(--color-pink); 628 - border-color: var(--color-pink); 629 - } 630 - 631 - .ui.basic.pink.buttons .button:hover, 632 - .ui.basic.pink.button:hover { 633 - color: var(--color-pink-light); 634 - border-color: var(--color-pink-light); 635 - } 636 - 637 - .ui.brown.labels .label, 638 - .ui.ui.ui.brown.label, 639 - .ui.brown.button, 640 - .ui.brown.buttons .button { 641 - background: var(--color-brown); 642 - } 643 - 644 - .ui.brown.button:hover, 645 - .ui.brown.buttons .button:hover { 646 - background: var(--color-brown-light); 647 - } 648 - 649 - .ui.basic.brown.buttons .button, 650 - .ui.basic.brown.button { 651 - color: var(--color-brown); 652 - border-color: var(--color-brown); 653 - } 654 - 655 - .ui.basic.brown.buttons .button:hover, 656 - .ui.basic.brown.button:hover { 657 - color: var(--color-brown-light); 658 - border-color: var(--color-brown-light); 659 - } 660 - 661 - .ui.grey.labels .label, 662 - .ui.ui.ui.grey.label, 663 - .ui.grey.button, 664 - .ui.grey.buttons .button { 665 - background: var(--color-grey); 666 - } 667 - 668 - .ui.grey.button:hover, 669 - .ui.grey.buttons .button:hover { 670 - background: var(--color-grey-light); 671 - } 672 - 673 - .ui.basic.grey.buttons .button, 674 - .ui.basic.grey.button { 675 - color: var(--color-grey); 676 - border-color: var(--color-grey); 677 - } 678 - 679 - .ui.basic.grey.buttons .button:hover, 680 - .ui.basic.grey.button:hover { 681 - color: var(--color-grey-light); 682 - border-color: var(--color-grey-light); 683 - } 684 - 685 - .ui.black.labels .label, 686 - .ui.ui.ui.black.label, 687 - .ui.black.button, 688 - .ui.black.buttons .button { 689 - background: var(--color-black); 690 - } 691 - 692 - .ui.black.button:hover, 693 - .ui.black.buttons .button:hover { 694 - background: var(--color-black-light); 695 - } 696 - 697 - .ui.basic.black.buttons .button, 698 - .ui.basic.black.button { 699 - color: var(--color-black); 700 - border-color: var(--color-black); 701 - } 702 - 703 - .ui.basic.black.buttons .button:hover, 704 - .ui.basic.black.button:hover { 705 - color: var(--color-black-light); 706 - border-color: var(--color-black-light); 707 - } 708 - 709 - .ui.negative.buttons .button, 710 - .ui.negative.button { 711 - background: var(--color-red); 712 - } 713 - 714 - .ui.negative.buttons .button:hover, 715 - .ui.negative.button:hover { 716 - background: var(--color-red-light); 717 - } 718 - 719 - .ui.positive.buttons .button, 720 - .ui.positive.button { 721 - background: var(--color-green); 722 - } 723 - 724 - .ui.positive.buttons .button:hover, 725 - .ui.positive.button:hover { 726 - background: var(--color-green-light); 727 425 } 728 426 729 427 .ui.search > .results { ··· 2190 1888 2191 1889 .octicon-tiny { 2192 1890 font-size: 0.85714286rem; 2193 - } 2194 - 2195 - .ui.button { 2196 - background: var(--color-button); 2197 - border: 1px solid var(--color-light-border); 2198 - color: var(--color-text); 2199 - } 2200 - 2201 - .page-content .ui.button { 2202 - box-shadow: none !important; 2203 - } 2204 - 2205 - .ui.button:focus, 2206 - .ui.button:hover { 2207 - background: var(--color-hover); 2208 - color: var(--color-text); 2209 - } 2210 - 2211 - .ui.active.button, 2212 - .ui.button:active, 2213 - .ui.active.button:active, 2214 - .ui.active.button:hover { 2215 - background: var(--color-active); 2216 - color: var(--color-text); 2217 - } 2218 - 2219 - .ui.button.no-text .icon { 2220 - margin: 0 !important; 2221 - } 2222 - 2223 - .ui.buttons .button:first-child { 2224 - border-left: 1px solid var(--color-light-border); 2225 - } 2226 - 2227 - .ui.buttons .button + .button { 2228 - border-left: none; 2229 - } 2230 - 2231 - /* a ghost button is a button without border */ 2232 - .button.button-ghost { 2233 - background: transparent; 2234 - border: none; 2235 - color: inherit; 2236 - margin: 0; 2237 - padding: 0; 2238 - } 2239 - 2240 - .button.button-ghost:hover { 2241 - background: var(--color-hover); 2242 - } 2243 - 2244 - .button.button-ghost:active { 2245 - background: var(--color-active); 2246 - } 2247 - 2248 - .two-toggle-buttons .button:not(.active):first-of-type { 2249 - border-right: none; 2250 - } 2251 - 2252 - .two-toggle-buttons .button.active:last-of-type { 2253 - border-left: 1px solid var(--color-light-border); 2254 - } 2255 - 2256 - .ui.labeled.button.disabled > .button, 2257 - .ui.basic.buttons .button, 2258 - .ui.basic.button { 2259 - color: var(--color-text-light); 2260 - background: var(--color-light); 2261 - } 2262 - 2263 - .ui.basic.buttons .button:hover, 2264 - .ui.basic.button:hover { 2265 - color: var(--color-text); 2266 - background: var(--color-hover); 2267 - } 2268 - 2269 - .ui.basic.buttons .button:focus, 2270 - .ui.basic.button:focus, 2271 - .ui.basic.buttons .button:active, 2272 - .ui.basic.button:active, 2273 - .ui.basic.buttons .active.button, 2274 - .ui.basic.active.button, 2275 - .ui.basic.buttons .active.button:hover, 2276 - .ui.basic.active.button:hover { 2277 - color: var(--color-text); 2278 - background: var(--color-active); 2279 - } 2280 - 2281 - .ui.labeled.button > .label { 2282 - border-color: var(--color-light-border); 2283 - } 2284 - 2285 - .ui.labeled.icon.buttons > .button > .icon, 2286 - .ui.labeled.icon.button > .icon { 2287 - background: var(--color-hover); 2288 - } 2289 - 2290 - .ui.primary.button, 2291 - .ui.primary.buttons .button { 2292 - background-color: var(--color-primary) !important; 2293 - color: var(--color-primary-contrast) !important; 2294 - } 2295 - 2296 - .ui.primary.button:hover, 2297 - .ui.primary.buttons .button:hover { 2298 - background-color: var(--color-primary-dark-2) !important; 2299 - } 2300 - 2301 - .ui.primary.button:focus, 2302 - .ui.primary.buttons .button:focus { 2303 - background-color: var(--color-primary-dark-3) !important; 2304 - } 2305 - 2306 - .ui.basic.primary.button, 2307 - .ui.basic.primary.buttons .button { 2308 - box-shadow: inset 0 0 0 1px var(--color-primary) !important; 2309 - color: var(--color-primary-contrast) !important; 2310 - } 2311 - 2312 - .ui.basic.primary.button:hover, 2313 - .ui.basic.primary.buttons .button:hover { 2314 - box-shadow: inset 0 0 0 1px var(--color-primary-dark-2) !important; 2315 - } 2316 - 2317 - .ui.basic.primary.button:focus, 2318 - .ui.basic.primary.buttons .button:focus { 2319 - box-shadow: inset 0 0 0 1px var(--color-primary-dark-3) !important; 2320 - } 2321 - 2322 - .ui.basic.secondary.buttons .button, 2323 - .ui.basic.secondary.button { 2324 - color: var(--color-secondary-dark-6) !important; 2325 - } 2326 - 2327 - .ui.basic.secondary.buttons .button:hover, 2328 - .ui.basic.secondary.button:hover, 2329 - .ui.basic.secondary.buttons .button:active, 2330 - .ui.basic.secondary.button:active { 2331 - color: var(--color-secondary-dark-8) !important; 2332 - border-color: var(--color-secondary-dark-1) !important; 2333 - } 2334 - 2335 - .ui.basic.secondary.button:focus, 2336 - .ui.basic.secondary.buttons .button:focus { 2337 - color: var(--color-secondary-dark-8) !important; 2338 - border-color: var(--color-secondary-dark-3) !important; 2339 1891 } 2340 1892 2341 1893 .ui.primary.label,
-2
web_src/css/editor/fileeditor.css
··· 82 82 .edit-diff > div > .ui.table { 83 83 border-top: none !important; 84 84 border-bottom: none !important; 85 - border-left: 1px solid var(--color-secondary) !important; 86 - border-right: 1px solid var(--color-secondary) !important; 87 85 }
+1
web_src/css/index.css
··· 1 1 @import "./modules/normalize.css"; 2 2 @import "./modules/animations.css"; 3 + @import "./modules/button.css"; 3 4 @import "./modules/tippy.css"; 4 5 @import "./modules/modal.css"; 5 6 @import "./modules/breadcrumb.css";
+816
web_src/css/modules/button.css
··· 1 + /* this contains override styles for buttons and related elements */ 2 + 3 + .ui.button { 4 + background: var(--color-button); 5 + border: 1px solid var(--color-light-border); 6 + color: var(--color-text); 7 + } 8 + 9 + /* a ghost button is a button without border */ 10 + .button.button-ghost { 11 + background: transparent; 12 + border: none; 13 + color: inherit; 14 + margin: 0; 15 + padding: 0; 16 + } 17 + 18 + .button.button-ghost:hover { 19 + background: var(--color-hover); 20 + } 21 + 22 + .button.button-ghost:active { 23 + background: var(--color-active); 24 + } 25 + 26 + .ui.button.button-link { 27 + background: transparent; 28 + border: none; 29 + color: inherit; 30 + } 31 + 32 + .page-content .ui.button { 33 + box-shadow: none !important; 34 + } 35 + 36 + .ui.button:focus, 37 + .ui.button:hover { 38 + background: var(--color-hover); 39 + color: var(--color-text); 40 + } 41 + 42 + .ui.active.button, 43 + .ui.button:active, 44 + .ui.active.button:active, 45 + .ui.active.button:hover { 46 + background: var(--color-active); 47 + color: var(--color-text); 48 + } 49 + 50 + .ui.button.no-text .icon { 51 + margin: 0 !important; 52 + } 53 + 54 + .ui.buttons .button:first-child { 55 + border-left: 1px solid var(--color-light-border); 56 + } 57 + 58 + .ui.buttons .button + .button { 59 + border-left: none; 60 + } 61 + 62 + .ui.button.button-link:hover { 63 + color: var(--color-primary); 64 + } 65 + 66 + .two-toggle-buttons .button:not(.active):first-of-type { 67 + border-right: none; 68 + } 69 + 70 + .two-toggle-buttons .button.active:last-of-type { 71 + border-left: 1px solid var(--color-light-border); 72 + } 73 + 74 + .ui.labeled.button.disabled > .button, 75 + .ui.basic.buttons .button, 76 + .ui.basic.button { 77 + color: var(--color-text-light); 78 + background: var(--color-light); 79 + } 80 + 81 + .ui.basic.buttons .button:hover, 82 + .ui.basic.button:hover { 83 + color: var(--color-text); 84 + background: var(--color-hover); 85 + } 86 + 87 + .ui.basic.buttons .button:focus, 88 + .ui.basic.button:focus, 89 + .ui.basic.buttons .button:active, 90 + .ui.basic.button:active, 91 + .ui.basic.buttons .active.button, 92 + .ui.basic.active.button, 93 + .ui.basic.buttons .active.button:hover, 94 + .ui.basic.active.button:hover { 95 + color: var(--color-text); 96 + background: var(--color-active); 97 + } 98 + 99 + .ui.labeled.button > .label { 100 + border-color: var(--color-light-border); 101 + } 102 + 103 + .ui.labeled.icon.buttons > .button > .icon, 104 + .ui.labeled.icon.button > .icon { 105 + background: var(--color-hover); 106 + } 107 + 108 + /* primary */ 109 + 110 + .ui.primary.labels .label, 111 + .ui.ui.ui.primary.label, 112 + .ui.primary.button, 113 + .ui.primary.buttons .button { 114 + background: var(--color-primary); 115 + } 116 + 117 + .ui.primary.button:hover, 118 + .ui.primary.buttons .button:hover, 119 + .ui.primary.button:focus, 120 + .ui.primary.buttons .button:focus { 121 + background: var(--color-primary-hover); 122 + } 123 + 124 + .ui.primary.button:active, 125 + .ui.primary.buttons .button:active { 126 + background: var(--color-primary-active); 127 + } 128 + 129 + .ui.basic.primary.buttons .button, 130 + .ui.basic.primary.button { 131 + color: var(--color-primary); 132 + border-color: var(--color-primary); 133 + } 134 + 135 + .ui.basic.primary.buttons .button:hover, 136 + .ui.basic.primary.button:hover, 137 + .ui.basic.primary.buttons .button:focus, 138 + .ui.basic.primary.button:focus { 139 + color: var(--color-primary-hover); 140 + border-color: var(--color-primary-hover); 141 + } 142 + 143 + .ui.basic.primary.buttons .button:active, 144 + .ui.basic.primary.button:active { 145 + color: var(--color-primary-active); 146 + border-color: var(--color-primary-active); 147 + } 148 + 149 + /* secondary */ 150 + 151 + .ui.secondary.labels .label, 152 + .ui.ui.ui.secondary.label, 153 + .ui.secondary.button, 154 + .ui.secondary.buttons .button { 155 + background: var(--color-secondary); 156 + color: var(--color-text); 157 + } 158 + 159 + .ui.secondary.button:hover, 160 + .ui.secondary.buttons .button:hover, 161 + .ui.secondary.button:focus, 162 + .ui.secondary.buttons .button:focus { 163 + background: var(--color-secondary-dark-1); 164 + color: var(--color-text); 165 + } 166 + 167 + .ui.secondary.button:active, 168 + .ui.secondary.buttons .button:active { 169 + background: var(--color-secondary-dark-2); 170 + color: var(--color-text); 171 + } 172 + 173 + .ui.basic.secondary.buttons .button, 174 + .ui.basic.secondary.button { 175 + color: var(--color-secondary-dark-6) !important; 176 + } 177 + 178 + .ui.basic.secondary.buttons .button:hover, 179 + .ui.basic.secondary.button:hover, 180 + .ui.basic.secondary.buttons .button:active, 181 + .ui.basic.secondary.button:active { 182 + color: var(--color-secondary-dark-8) !important; 183 + border-color: var(--color-secondary-dark-1) !important; 184 + } 185 + 186 + .ui.basic.secondary.button:focus, 187 + .ui.basic.secondary.buttons .button:focus { 188 + color: var(--color-secondary-dark-8) !important; 189 + border-color: var(--color-secondary-dark-3) !important; 190 + } 191 + 192 + /* tertiary */ 193 + 194 + .ui.tertiary.button { 195 + color: var(--color-text-light); 196 + border: none; 197 + } 198 + 199 + .ui.tertiary.button:hover { 200 + color: var(--color-text); 201 + } 202 + 203 + .ui.tertiary.button:focus { 204 + color: var(--color-text-dark); 205 + } 206 + 207 + /* red */ 208 + 209 + .ui.red.labels .label, 210 + .ui.ui.ui.red.label, 211 + .ui.red.button, 212 + .ui.red.buttons .button { 213 + background: var(--color-red); 214 + } 215 + 216 + .ui.red.button:hover, 217 + .ui.red.buttons .button:hover, 218 + .ui.red.button:focus, 219 + .ui.red.buttons .button:focus { 220 + background: var(--color-red-dark-1); 221 + } 222 + 223 + .ui.red.button:active, 224 + .ui.red.buttons .button:active { 225 + background: var(--color-red-dark-2); 226 + } 227 + 228 + .ui.basic.red.buttons .button, 229 + .ui.basic.red.button { 230 + color: var(--color-red); 231 + border-color: var(--color-red); 232 + } 233 + 234 + .ui.basic.red.buttons .button:hover, 235 + .ui.basic.red.button:hover, 236 + .ui.basic.red.buttons .button:focus, 237 + .ui.basic.red.button:focus { 238 + color: var(--color-red-dark-1); 239 + border-color: var(--color-red-dark-1); 240 + } 241 + 242 + .ui.basic.red.buttons .button:active, 243 + .ui.basic.red.button:active { 244 + color: var(--color-red-dark-2); 245 + border-color: var(--color-red-dark-2); 246 + } 247 + 248 + /* orange */ 249 + 250 + .ui.orange.labels .label, 251 + .ui.ui.ui.orange.label, 252 + .ui.orange.button, 253 + .ui.orange.buttons .button { 254 + background: var(--color-orange); 255 + } 256 + 257 + .ui.orange.button:hover, 258 + .ui.orange.buttons .button:hover, 259 + .ui.orange.button:focus, 260 + .ui.orange.buttons .button:focus { 261 + background: var(--color-orange-dark-1); 262 + } 263 + 264 + .ui.orange.button:active, 265 + .ui.orange.buttons .button:active { 266 + background: var(--color-orange-dark-2); 267 + } 268 + 269 + .ui.basic.orange.buttons .button, 270 + .ui.basic.orange.button { 271 + color: var(--color-orange); 272 + border-color: var(--color-orange); 273 + } 274 + 275 + .ui.basic.orange.buttons .button:hover, 276 + .ui.basic.orange.button:hover, 277 + .ui.basic.orange.buttons .button:focus, 278 + .ui.basic.orange.button:focus { 279 + color: var(--color-orange-dark-1); 280 + border-color: var(--color-orange-dark-1); 281 + } 282 + 283 + .ui.basic.orange.buttons .button:active, 284 + .ui.basic.orange.button:active { 285 + color: var(--color-orange-dark-2); 286 + border-color: var(--color-orange-dark-2); 287 + } 288 + 289 + /* yellow */ 290 + 291 + .ui.yellow.labels .label, 292 + .ui.ui.ui.yellow.label, 293 + .ui.yellow.button, 294 + .ui.yellow.buttons .button { 295 + background: var(--color-yellow); 296 + } 297 + 298 + .ui.yellow.button:hover, 299 + .ui.yellow.buttons .button:hover, 300 + .ui.yellow.button:focus, 301 + .ui.yellow.buttons .button:focus { 302 + background: var(--color-yellow-dark-1); 303 + } 304 + 305 + .ui.yellow.button:active, 306 + .ui.yellow.buttons .button:active { 307 + background: var(--color-yellow-dark-2); 308 + } 309 + 310 + .ui.basic.yellow.buttons .button, 311 + .ui.basic.yellow.button { 312 + color: var(--color-yellow); 313 + border-color: var(--color-yellow); 314 + } 315 + 316 + .ui.basic.yellow.buttons .button:hover, 317 + .ui.basic.yellow.button:hover, 318 + .ui.basic.yellow.buttons .button:focus, 319 + .ui.basic.yellow.button:focus { 320 + color: var(--color-yellow-dark-1); 321 + border-color: var(--color-yellow-dark-1); 322 + } 323 + 324 + .ui.basic.yellow.buttons .button:active, 325 + .ui.basic.yellow.button:active { 326 + color: var(--color-yellow-dark-2); 327 + border-color: var(--color-yellow-dark-2); 328 + } 329 + 330 + /* olive */ 331 + 332 + .ui.olive.labels .label, 333 + .ui.ui.ui.olive.label, 334 + .ui.olive.button, 335 + .ui.olive.buttons .button { 336 + background: var(--color-olive); 337 + } 338 + 339 + .ui.olive.button:hover, 340 + .ui.olive.buttons .button:hover, 341 + .ui.olive.button:focus, 342 + .ui.olive.buttons .button:focus { 343 + background: var(--color-olive-dark-1); 344 + } 345 + 346 + .ui.olive.button:active, 347 + .ui.olive.buttons .button:active { 348 + background: var(--color-olive-dark-2); 349 + } 350 + 351 + .ui.basic.olive.buttons .button, 352 + .ui.basic.olive.button { 353 + color: var(--color-olive); 354 + border-color: var(--color-olive); 355 + } 356 + 357 + .ui.basic.olive.buttons .button:hover, 358 + .ui.basic.olive.button:hover, 359 + .ui.basic.olive.buttons .button:focus, 360 + .ui.basic.olive.button:focus { 361 + color: var(--color-olive-dark-1); 362 + border-color: var(--color-olive-dark-1); 363 + } 364 + 365 + .ui.basic.olive.buttons .button:active, 366 + .ui.basic.olive.button:active { 367 + color: var(--color-olive-dark-2); 368 + border-color: var(--color-olive-dark-2); 369 + } 370 + 371 + /* green */ 372 + 373 + .ui.green.labels .label, 374 + .ui.ui.ui.green.label, 375 + .ui.green.button, 376 + .ui.green.buttons .button { 377 + background: var(--color-green); 378 + } 379 + 380 + .ui.green.button:hover, 381 + .ui.green.buttons .button:hover, 382 + .ui.green.button:focus, 383 + .ui.green.buttons .button:focus { 384 + background: var(--color-green-dark-1); 385 + } 386 + 387 + .ui.green.button:active, 388 + .ui.green.buttons .button:active { 389 + background: var(--color-green-dark-2); 390 + } 391 + 392 + .ui.basic.green.buttons .button, 393 + .ui.basic.green.button { 394 + color: var(--color-green); 395 + border-color: var(--color-green); 396 + } 397 + 398 + .ui.basic.green.buttons .button:hover, 399 + .ui.basic.green.button:hover, 400 + .ui.basic.green.buttons .button:focus, 401 + .ui.basic.green.button:focus { 402 + color: var(--color-green-dark-1); 403 + border-color: var(--color-green-dark-1); 404 + } 405 + 406 + .ui.basic.green.buttons .button:active, 407 + .ui.basic.green.button:active { 408 + color: var(--color-green-dark-2); 409 + border-color: var(--color-green-dark-2); 410 + } 411 + 412 + /* teal */ 413 + 414 + .ui.teal.labels .label, 415 + .ui.ui.ui.teal.label, 416 + .ui.teal.button, 417 + .ui.teal.buttons .button { 418 + background: var(--color-teal); 419 + } 420 + 421 + .ui.teal.button:hover, 422 + .ui.teal.buttons .button:hover, 423 + .ui.teal.button:focus, 424 + .ui.teal.buttons .button:focus { 425 + background: var(--color-teal-dark-1); 426 + } 427 + 428 + .ui.teal.button:active, 429 + .ui.teal.buttons .button:active { 430 + background: var(--color-teal-dark-2); 431 + } 432 + 433 + .ui.basic.teal.buttons .button, 434 + .ui.basic.teal.button { 435 + color: var(--color-teal); 436 + border-color: var(--color-teal); 437 + } 438 + 439 + .ui.basic.teal.buttons .button:hover, 440 + .ui.basic.teal.button:hover, 441 + .ui.basic.teal.buttons .button:focus, 442 + .ui.basic.teal.button:focus { 443 + color: var(--color-teal-dark-1); 444 + border-color: var(--color-teal-dark-1); 445 + } 446 + 447 + .ui.basic.teal.buttons .button:active, 448 + .ui.basic.teal.button:active { 449 + color: var(--color-teal-dark-2); 450 + border-color: var(--color-teal-dark-2); 451 + } 452 + 453 + /* blue */ 454 + 455 + .ui.blue.labels .label, 456 + .ui.ui.ui.blue.label, 457 + .ui.blue.button, 458 + .ui.blue.buttons .button { 459 + background: var(--color-blue); 460 + } 461 + 462 + .ui.blue.button:hover, 463 + .ui.blue.buttons .button:hover, 464 + .ui.blue.button:focus, 465 + .ui.blue.buttons .button:focus { 466 + background: var(--color-blue-dark-1); 467 + } 468 + 469 + .ui.blue.button:active, 470 + .ui.blue.buttons .button:active { 471 + background: var(--color-blue-dark-2); 472 + } 473 + 474 + .ui.basic.blue.buttons .button, 475 + .ui.basic.blue.button { 476 + color: var(--color-blue); 477 + border-color: var(--color-blue); 478 + } 479 + 480 + .ui.basic.blue.buttons .button:hover, 481 + .ui.basic.blue.button:hover, 482 + .ui.basic.blue.buttons .button:focus, 483 + .ui.basic.blue.button:focus { 484 + color: var(--color-blue-dark-1); 485 + border-color: var(--color-blue-dark-1); 486 + } 487 + 488 + .ui.basic.blue.buttons .button:active, 489 + .ui.basic.blue.button:active { 490 + color: var(--color-blue-dark-2); 491 + border-color: var(--color-blue-dark-2); 492 + } 493 + 494 + /* violet */ 495 + 496 + .ui.violet.labels .label, 497 + .ui.ui.ui.violet.label, 498 + .ui.violet.button, 499 + .ui.violet.buttons .button { 500 + background: var(--color-violet); 501 + } 502 + 503 + .ui.violet.button:hover, 504 + .ui.violet.buttons .button:hover, 505 + .ui.violet.button:focus, 506 + .ui.violet.buttons .button:focus { 507 + background: var(--color-violet-dark-1); 508 + } 509 + 510 + .ui.violet.button:active, 511 + .ui.violet.buttons .button:active { 512 + background: var(--color-violet-dark-2); 513 + } 514 + 515 + .ui.basic.violet.buttons .button, 516 + .ui.basic.violet.button { 517 + color: var(--color-violet); 518 + border-color: var(--color-violet); 519 + } 520 + 521 + .ui.basic.violet.buttons .button:hover, 522 + .ui.basic.violet.button:hover, 523 + .ui.basic.violet.buttons .button:focus, 524 + .ui.basic.violet.button:focus { 525 + color: var(--color-violet-dark-1); 526 + border-color: var(--color-violet-dark-1); 527 + } 528 + 529 + .ui.basic.violet.buttons .button:active, 530 + .ui.basic.violet.button:active { 531 + color: var(--color-violet-dark-2); 532 + border-color: var(--color-violet-dark-2); 533 + } 534 + 535 + /* purple */ 536 + 537 + .ui.purple.labels .label, 538 + .ui.ui.ui.purple.label, 539 + .ui.purple.button, 540 + .ui.purple.buttons .button { 541 + background: var(--color-purple); 542 + } 543 + 544 + .ui.purple.button:hover, 545 + .ui.purple.buttons .button:hover, 546 + .ui.purple.button:focus, 547 + .ui.purple.buttons .button:focus { 548 + background: var(--color-purple-dark-1); 549 + } 550 + 551 + .ui.purple.button:active, 552 + .ui.purple.buttons .button:active { 553 + background: var(--color-purple-dark-2); 554 + } 555 + 556 + .ui.basic.purple.buttons .button, 557 + .ui.basic.purple.button { 558 + color: var(--color-purple); 559 + border-color: var(--color-purple); 560 + } 561 + 562 + .ui.basic.purple.buttons .button:hover, 563 + .ui.basic.purple.button:hover, 564 + .ui.basic.purple.buttons .button:focus, 565 + .ui.basic.purple.button:focus { 566 + color: var(--color-purple-dark-1); 567 + border-color: var(--color-purple-dark-1); 568 + } 569 + 570 + .ui.basic.purple.buttons .button:active, 571 + .ui.basic.purple.button:active { 572 + color: var(--color-purple-dark-2); 573 + border-color: var(--color-purple-dark-2); 574 + } 575 + 576 + /* pink */ 577 + 578 + .ui.pink.labels .label, 579 + .ui.ui.ui.pink.label, 580 + .ui.pink.button, 581 + .ui.pink.buttons .button { 582 + background: var(--color-pink); 583 + } 584 + 585 + .ui.pink.button:hover, 586 + .ui.pink.buttons .button:hover, 587 + .ui.pink.button:focus, 588 + .ui.pink.buttons .button:focus { 589 + background: var(--color-pink-dark-1); 590 + } 591 + 592 + .ui.pink.button:active, 593 + .ui.pink.buttons .button:active { 594 + background: var(--color-pink-dark-2); 595 + } 596 + 597 + .ui.basic.pink.buttons .button, 598 + .ui.basic.pink.button { 599 + color: var(--color-pink); 600 + border-color: var(--color-pink); 601 + } 602 + 603 + .ui.basic.pink.buttons .button:hover, 604 + .ui.basic.pink.button:hover, 605 + .ui.basic.pink.buttons .button:focus, 606 + .ui.basic.pink.button:focus { 607 + color: var(--color-pink-dark-1); 608 + border-color: var(--color-pink-dark-1); 609 + } 610 + 611 + .ui.basic.pink.buttons .button:active, 612 + .ui.basic.pink.button:active { 613 + color: var(--color-pink-dark-2); 614 + border-color: var(--color-pink-dark-2); 615 + } 616 + 617 + /* brown */ 618 + 619 + .ui.brown.labels .label, 620 + .ui.ui.ui.brown.label, 621 + .ui.brown.button, 622 + .ui.brown.buttons .button { 623 + background: var(--color-brown); 624 + } 625 + 626 + .ui.brown.button:hover, 627 + .ui.brown.buttons .button:hover, 628 + .ui.brown.button:focus, 629 + .ui.brown.buttons .button:focus { 630 + background: var(--color-brown-dark-1); 631 + } 632 + 633 + .ui.brown.button:active, 634 + .ui.brown.buttons .button:active { 635 + background: var(--color-brown-dark-2); 636 + } 637 + 638 + .ui.basic.brown.buttons .button, 639 + .ui.basic.brown.button { 640 + color: var(--color-brown); 641 + border-color: var(--color-brown); 642 + } 643 + 644 + .ui.basic.brown.buttons .button:hover, 645 + .ui.basic.brown.button:hover, 646 + .ui.basic.brown.buttons .button:focus, 647 + .ui.basic.brown.button:focus { 648 + color: var(--color-brown-dark-1); 649 + border-color: var(--color-brown-dark-1); 650 + } 651 + 652 + .ui.basic.brown.buttons .button:active, 653 + .ui.basic.brown.button:active { 654 + color: var(--color-brown-dark-2); 655 + border-color: var(--color-brown-dark-2); 656 + } 657 + 658 + /* grey */ 659 + 660 + .ui.grey.labels .label, 661 + .ui.ui.ui.grey.label, 662 + .ui.grey.button, 663 + .ui.grey.buttons .button { 664 + background: var(--color-grey); 665 + } 666 + 667 + .ui.grey.button:hover, 668 + .ui.grey.buttons .button:hover, 669 + .ui.grey.button:focus, 670 + .ui.grey.buttons .button:focus { 671 + background: var(--color-grey-dark-1); 672 + } 673 + 674 + .ui.grey.button:active, 675 + .ui.grey.buttons .button:active { 676 + background: var(--color-grey-dark-2); 677 + } 678 + 679 + .ui.basic.grey.buttons .button, 680 + .ui.basic.grey.button { 681 + color: var(--color-grey); 682 + border-color: var(--color-grey); 683 + } 684 + 685 + .ui.basic.grey.buttons .button:hover, 686 + .ui.basic.grey.button:hover, 687 + .ui.basic.grey.buttons .button:focus, 688 + .ui.basic.grey.button:focus { 689 + color: var(--color-grey-dark-1); 690 + border-color: var(--color-grey-dark-1); 691 + } 692 + 693 + .ui.basic.grey.buttons .button:active, 694 + .ui.basic.grey.button:active { 695 + color: var(--color-grey-dark-2); 696 + border-color: var(--color-grey-dark-2); 697 + } 698 + 699 + /* black */ 700 + 701 + .ui.black.labels .label, 702 + .ui.ui.ui.black.label, 703 + .ui.black.button, 704 + .ui.black.buttons .button { 705 + background: var(--color-black); 706 + } 707 + 708 + .ui.black.button:hover, 709 + .ui.black.buttons .button:hover, 710 + .ui.black.button:focus, 711 + .ui.black.buttons .button:focus { 712 + background: var(--color-black-dark-1); 713 + } 714 + 715 + .ui.black.button:active, 716 + .ui.black.buttons .button:active { 717 + background: var(--color-black-dark-2); 718 + } 719 + 720 + .ui.basic.black.buttons .button, 721 + .ui.basic.black.button { 722 + color: var(--color-black); 723 + border-color: var(--color-black); 724 + } 725 + 726 + .ui.basic.black.buttons .button:hover, 727 + .ui.basic.black.button:hover, 728 + .ui.basic.black.buttons .button:focus, 729 + .ui.basic.black.button:focus { 730 + color: var(--color-black-dark-1); 731 + border-color: var(--color-black-dark-1); 732 + } 733 + 734 + .ui.basic.black.buttons .button:active, 735 + .ui.basic.black.button:active { 736 + color: var(--color-black-dark-2); 737 + border-color: var(--color-black-dark-2); 738 + } 739 + 740 + .ui.negative.buttons .button, 741 + .ui.negative.button { 742 + background: var(--color-red); 743 + } 744 + 745 + .ui.negative.buttons .button:hover, 746 + .ui.negative.button:hover, 747 + .ui.negative.buttons .button:focus, 748 + .ui.negative.button:focus { 749 + background: var(--color-red-dark-1); 750 + } 751 + 752 + .ui.negative.buttons .button:active, 753 + .ui.negative.button:active { 754 + background: var(--color-red-dark-2); 755 + } 756 + 757 + /* negative */ 758 + 759 + .ui.basic.negative.buttons .button, 760 + .ui.basic.negative.button { 761 + color: var(--color-red); 762 + border-color: var(--color-red); 763 + } 764 + 765 + .ui.basic.negative.buttons .button:hover, 766 + .ui.basic.negative.button:hover, 767 + .ui.basic.negative.buttons .button:focus, 768 + .ui.basic.negative.button:focus { 769 + color: var(--color-red-dark-1); 770 + border-color: var(--color-red-dark-1); 771 + } 772 + 773 + .ui.basic.negative.buttons .button:active, 774 + .ui.basic.negative.button:active { 775 + color: var(--color-red-dark-2); 776 + border-color: var(--color-red-dark-2); 777 + } 778 + 779 + /* positive */ 780 + 781 + .ui.positive.buttons .button, 782 + .ui.positive.button { 783 + background: var(--color-green); 784 + } 785 + 786 + .ui.positive.buttons .button:hover, 787 + .ui.positive.button:hover, 788 + .ui.positive.buttons .button:focus, 789 + .ui.positive.button:focus { 790 + background: var(--color-green-dark-1); 791 + } 792 + 793 + .ui.positive.buttons .button:active, 794 + .ui.positive.button:active { 795 + background: var(--color-green-dark-2); 796 + } 797 + 798 + .ui.basic.positive.buttons .button, 799 + .ui.basic.positive.button { 800 + color: var(--color-green); 801 + border-color: var(--color-green); 802 + } 803 + 804 + .ui.basic.positive.buttons .button:hover, 805 + .ui.basic.positive.button:hover, 806 + .ui.basic.positive.buttons .button:focus, 807 + .ui.basic.positive.button:focus { 808 + color: var(--color-green-dark-1); 809 + border-color: var(--color-green-dark-1); 810 + } 811 + 812 + .ui.basic.positive.buttons .button:active, 813 + .ui.basic.positive.button:active { 814 + color: var(--color-green-dark-2); 815 + border-color: var(--color-green-dark-2); 816 + }
+9
web_src/css/repo.css
··· 1844 1844 scroll-margin-top: 47px; /* match .repository .diff-detail-box */ 1845 1845 } 1846 1846 1847 + .file.editor .diff-file-box { 1848 + border: none; 1849 + } 1850 + 1851 + .file.editor .diff-file-box .ui.attached.table { 1852 + border: none; 1853 + } 1854 + 1855 + 1847 1856 @media (max-width: 991px) { 1848 1857 .diff-file-box { 1849 1858 scroll-margin-top: 77px; /* match .repository .diff-detail-box */
+43 -13
web_src/css/themes/theme-arc-green.css
··· 29 29 --color-primary-alpha-70: #87ab63b3; 30 30 --color-primary-alpha-80: #87ab63cc; 31 31 --color-primary-alpha-90: #87ab63e1; 32 + --color-primary-hover: var(--color-primary-light-1); 33 + --color-primary-active: var(--color-primary-light-2); 32 34 --color-secondary: #525767; 33 35 --color-secondary-dark-1: #5c6374; 34 36 --color-secondary-dark-2: #666e81; ··· 56 58 --color-secondary-alpha-70: #525767b3; 57 59 --color-secondary-alpha-80: #525767cc; 58 60 --color-secondary-alpha-90: #525767e1; 61 + --color-secondary-hover: var(--color-secondary-light-1); 62 + --color-secondary-active: var(--color-secondary-light-2); 59 63 /* console colors */ 60 64 --color-console-fg: #ffffff; 61 65 --color-console-bg: #262936; ··· 75 79 --color-pink: #d22e8b; 76 80 --color-brown: #a47252; 77 81 --color-black: #2e323e; 78 - /* light variants - produced via Sass scale-color(color, $lightness: -10%) */ 79 - --color-red-light: #c23636; 80 - --color-orange-light: #b84f0b; 81 - --color-yellow-light: #b88a03; 82 - --color-olive-light: #839311; 83 - --color-green-light: #7a9e55; 84 - --color-teal-light: #00837c; 85 - --color-blue-light: #347cb3; 86 - --color-violet-light: #7b4edb; 87 - --color-purple-light: #a742c9; 88 - --color-pink-light: #be297d; 89 - --color-brown-light: #94674a; 90 - --color-black-light: #292d38; 82 + /* light variants - produced via Sass scale-color(color, $lightness: +10%) */ 83 + --color-red-light: #d15a5a; 84 + --color-orange-light: #f6a066; 85 + --color-yellow-light: #eaaf03; 86 + --color-olive-light: #abc016; 87 + --color-green-light: #93b373; 88 + --color-teal-light: #00b6ad; 89 + --color-blue-light: #4e96cc; 90 + --color-violet-light: #9b79e4; 91 + --color-purple-light: #ba6ad5; 92 + --color-pink-light: #d74397; 93 + --color-brown-light: #b08061; 94 + --color-black-light: #3f4555; 95 + /* dark 1 variants - produced via Sass scale-color(color, $lightness: -10%) */ 96 + --color-red-dark-1: #c23636; 97 + --color-orange-dark-1: #f38236; 98 + --color-yellow-dark-1: #b88a03; 99 + --color-olive-dark-1: #839311; 100 + --color-green-dark-1: #7a9e55; 101 + --color-teal-dark-1: #00837c; 102 + --color-blue-dark-1: #347cb3; 103 + --color-violet-dark-1: #7b4edb; 104 + --color-purple-dark-1: #a742c9; 105 + --color-pink-dark-1: #be297d; 106 + --color-brown-dark-1: #94674a; 107 + --color-black-dark-1: #292d38; 108 + /* dark 2 variants - produced via Sass scale-color(color, $lightness: -20%) */ 109 + --color-red-dark-2: #ad3030; 110 + --color-orange-dark-2: #f16e17; 111 + --color-yellow-dark-2: #a37a02; 112 + --color-olive-dark-2: #74820f; 113 + --color-green-dark-2: #6c8c4c; 114 + --color-teal-dark-2: #00746e; 115 + --color-blue-dark-2: #2e6e9f; 116 + --color-violet-dark-2: #6733d6; 117 + --color-purple-dark-2: #9834b9; 118 + --color-pink-dark-2: #a9246f; 119 + --color-brown-dark-2: #835b42; 120 + --color-black-dark-2: #252832; 91 121 /* other colors */ 92 122 --color-grey: #505665; 93 123 --color-grey-light: #a1a6b7;