|
614 | 614 | .modal-dialog-autostart-retention .exit-retention-cat-paw--right { right: 35px; transform: rotate(-20deg); } |
615 | 615 |
|
616 | 616 | .modal-dialog-autostart-retention .modal-header { |
617 | | - padding: 0; |
| 617 | + padding: 22px 0 0; |
618 | 618 | } |
619 | 619 |
|
620 | 620 | .modal-dialog-autostart-retention .modal-title { |
|
646 | 646 | } |
647 | 647 |
|
648 | 648 | .modal-dialog-autostart-retention .modal-footer { |
649 | | - gap: 24px; |
650 | | - padding: 30px 0 0; |
| 649 | + position: relative; |
| 650 | + display: flex; |
| 651 | + flex-wrap: wrap; |
| 652 | + justify-content: center; |
| 653 | + gap: 22px; |
| 654 | + padding: 38px 0 34px; |
651 | 655 | } |
652 | 656 |
|
653 | 657 | .modal-dialog-autostart-retention .modal-btn { |
654 | | - min-width: 170px; |
| 658 | + min-width: 188px; |
655 | 659 | min-height: 0; |
656 | | - padding: 16px 42px; |
| 660 | + padding: 15px 36px; |
657 | 661 | border: 0; |
658 | | - border-radius: 30px; |
659 | | - color: #ffffff; |
660 | | - font-size: 18px; |
| 662 | + border-radius: 999px; |
| 663 | + font-size: 17px; |
661 | 664 | font-weight: 900; |
662 | 665 | line-height: 1.2; |
663 | 666 | letter-spacing: 0; |
664 | 667 | white-space: nowrap; |
665 | 668 | cursor: pointer; |
666 | 669 | position: relative; |
667 | 670 | overflow: hidden; |
668 | | - transition: transform 0.32s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.22s ease, filter 0.22s ease; |
| 671 | + transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, background 0.18s ease; |
| 672 | + } |
| 673 | +
|
| 674 | + .modal-dialog-autostart-retention .modal-btn-primary { |
| 675 | + color: #ffffff; |
| 676 | + background: linear-gradient(135deg, #52aaf3 0%, #85c8ff 100%); |
| 677 | + box-shadow: 0 14px 26px rgba(82,170,243,0.34), inset 0 3px 8px rgba(255,255,255,0.42); |
| 678 | + } |
| 679 | +
|
| 680 | + .modal-dialog-autostart-retention .modal-btn-secondary { |
| 681 | + color: #8798ad; |
| 682 | + background: rgba(255, 255, 255, 0.86); |
| 683 | + border: 1px solid rgba(174, 200, 226, 0.42); |
| 684 | + box-shadow: 0 12px 22px rgba(95,135,190,0.10), inset 0 3px 8px rgba(255,255,255,0.76); |
| 685 | + } |
| 686 | +
|
| 687 | + .modal-dialog-autostart-retention .modal-btn-link { |
| 688 | + position: absolute; |
| 689 | + right: 0; |
| 690 | + bottom: 0; |
| 691 | + min-width: 0; |
| 692 | + padding: 4px 2px; |
| 693 | + border-radius: 0; |
| 694 | + color: #5f6d7f; |
| 695 | + background: transparent; |
| 696 | + box-shadow: none; |
| 697 | + font-size: 15px; |
| 698 | + font-weight: 700; |
| 699 | + } |
| 700 | +
|
| 701 | + .modal-dialog-autostart-retention .modal-btn:not(.modal-btn-link):hover, |
| 702 | + .modal-dialog-autostart-retention .modal-btn:not(.modal-btn-link):focus-visible { |
| 703 | + transform: translateY(-2px); |
| 704 | + outline: none; |
| 705 | + filter: brightness(1.03); |
| 706 | + } |
| 707 | +
|
| 708 | + .modal-dialog-autostart-retention .modal-btn-link:hover, |
| 709 | + .modal-dialog-autostart-retention .modal-btn-link:focus-visible { |
| 710 | + color: #314158; |
| 711 | + text-decoration: underline; |
| 712 | + outline: none; |
669 | 713 | } |
670 | 714 |
|
671 | | - .modal-dialog-autostart-retention .modal-btn-primary { background: var(--exit-button-stay); box-shadow: 0 15px 30px rgba(107,176,242,0.35), inset 0 4px 8px rgba(255,255,255,0.46); } |
672 | | - .modal-dialog-autostart-retention .modal-btn-secondary { background: var(--exit-button-leave); color: #8fa3c0; box-shadow: 0 10px 20px rgba(0,0,0,0.06), inset 0 4px 8px rgba(255,255,255,0.72); } |
673 | | - .modal-dialog-autostart-retention .modal-btn:hover, |
674 | | - .modal-dialog-autostart-retention .modal-btn:focus-visible { transform: translateY(-6px) scale(1.05); outline: none; filter: brightness(1.04); } |
675 | | - .modal-dialog-autostart-retention .modal-btn:active { transform: scale(0.95); } |
| 715 | + .modal-dialog-autostart-retention .modal-btn:active { |
| 716 | + transform: translateY(1px) scale(0.98); |
| 717 | + } |
| 718 | +
|
| 719 | + .modal-dialog-autostart-retention .modal-btn-link:active { |
| 720 | + transform: none; |
| 721 | + } |
| 722 | +
|
| 723 | + @media (max-width: 560px) { |
| 724 | + .modal-dialog-autostart-retention .modal-footer { |
| 725 | + gap: 12px; |
| 726 | + padding-bottom: 26px; |
| 727 | + } |
| 728 | +
|
| 729 | + .modal-dialog-autostart-retention .modal-btn:not(.modal-btn-link) { |
| 730 | + width: 100%; |
| 731 | + min-width: 0; |
| 732 | + } |
| 733 | +
|
| 734 | + .modal-dialog-autostart-retention .modal-btn-link { |
| 735 | + right: 50%; |
| 736 | + bottom: -6px; |
| 737 | + transform: translateX(50%); |
| 738 | + } |
| 739 | +
|
| 740 | + .modal-dialog-autostart-retention .modal-btn-link:active { |
| 741 | + transform: translateX(50%); |
| 742 | + } |
| 743 | + } |
676 | 744 |
|
677 | 745 | .modal-dialog-autostart-retention.state-curious .exit-retention-cat-head-group { transform: rotate(10deg) translateY(2px); } |
678 | 746 | .modal-dialog-autostart-retention.state-curious .exit-retention-cat-ear--left { transform: rotate(-8deg); } |
|
818 | 886 |
|
819 | 887 | [data-theme="dark"] .modal-dialog-autostart-retention .modal-btn-secondary { |
820 | 888 | color: #d2deee; |
821 | | - background: rgba(255, 255, 255, 0.10); |
| 889 | + background: rgba(255, 255, 255, 0.12); |
| 890 | + border-color: rgba(255,255,255,0.12); |
822 | 891 | box-shadow: 0 10px 20px rgba(0,0,0,0.22), inset 0 4px 8px rgba(255,255,255,0.10); |
823 | 892 | } |
| 893 | +
|
| 894 | + [data-theme="dark"] .modal-dialog-autostart-retention .modal-btn-link { |
| 895 | + color: #9dafc6; |
| 896 | + } |
| 897 | +
|
| 898 | + [data-theme="dark"] .modal-dialog-autostart-retention .modal-btn-link:hover, |
| 899 | + [data-theme="dark"] .modal-dialog-autostart-retention .modal-btn-link:focus-visible { |
| 900 | + color: #d8e6f7; |
| 901 | + } |
824 | 902 | `; |
825 | 903 | document.head.appendChild(style); |
826 | 904 |
|
|
1192 | 1270 | const button = document.createElement('button'); |
1193 | 1271 | const variant = buttonConfig.variant === 'danger' |
1194 | 1272 | ? 'modal-btn-danger' |
1195 | | - : (buttonConfig.variant === 'primary' ? 'modal-btn-primary' : 'modal-btn-secondary'); |
| 1273 | + : (buttonConfig.variant === 'primary' |
| 1274 | + ? 'modal-btn-primary' |
| 1275 | + : (buttonConfig.variant === 'link' ? 'modal-btn-link' : 'modal-btn-secondary')); |
1196 | 1276 | button.className = 'modal-btn ' + variant; |
1197 | 1277 | button.textContent = String(buttonConfig.text || ('Button ' + (index + 1))); |
1198 | 1278 | if (isAutostartRetentionSkin) { |
|
0 commit comments