goose.art / cloud-go
extremely claude-assisted go game based on atproto! working on cleaning up and giving a more unique design, still has a bit of a slop vibe to it.
0
fork

Configure Feed

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

Add Bluesky share button to game page

- Add share button in game header that opens Bluesky compose intent
- Include player mentions (@handle) in share text
- Add hashtag with game ID prefix (#CloudGo_[rkey])
- Include game URL in share text

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

quietimcoding 5dc7b855 65e66037

+222 -99
+6
TODOS.md
··· 1 + Features not yet implemented 2 + - [ ] new reaction lexicon that contains an optional emoji field, a required text field, an an optional stars field, and a mandatory "Move ID" field, referencing a move in a game that can be commented on by any logged in user who is spectating. These could be shown on the right side of the board, and moves can show a preview of the reaction emojis as badges 3 + - [x] sharing a game using bsky post intents : The web URL endpoint is https://bsky.app/intent/compose, with the HTTP query parameter text. Remember to use URL-escaping on the query parameter value, and that the post length limit on Bluesky is 300 characters (more precisely, 300 Unicode Grapheme Clusters). 4 + - [x] tag the players involved in the game and use a hashtag composed of the game ID 5 + - [ ] Opengraph image preview of the game 6 + - [ ] reorganize the completed game section into a grid to save space, and add pagination
+216 -99
src/routes/game/[id]/+page.svelte
··· 344 344 capture_count: m.captureCount, 345 345 created_at: m.createdAt, 346 346 }))); 347 + 348 + function getShareUrl(): string { 349 + const gameUrl = `${typeof window !== 'undefined' ? window.location.origin : ''}/game/${data.gameRkey}`; 350 + 351 + // Build the share text with player mentions and hashtag 352 + let text = `Check out this Go game`; 353 + 354 + // Add player mentions if handles are available (not DIDs) 355 + const mentions: string[] = []; 356 + if (playerOneHandle && !playerOneHandle.startsWith('did:')) { 357 + mentions.push(`@${playerOneHandle}`); 358 + } 359 + if (playerTwoHandle && !playerTwoHandle.startsWith('did:')) { 360 + mentions.push(`@${playerTwoHandle}`); 361 + } 362 + 363 + if (mentions.length > 0) { 364 + text += ` between ${mentions.join(' and ')}`; 365 + } 366 + 367 + text += `! #CloudGo_${data.gameRkey.slice(0, 8)}`; 368 + text += `\n\n${gameUrl}`; 369 + 370 + return `https://bsky.app/intent/compose?text=${encodeURIComponent(text)}`; 371 + } 347 372 </script> 348 373 349 374 <svelte:head> ··· 367 392 <span class="offline-indicator" title="Real-time updates unavailable. Refresh page to see new moves.">⚠️ Offline Mode</span> 368 393 {/if} 369 394 {/if} 395 + <a href={getShareUrl()} target="_blank" rel="noopener noreferrer" class="share-button"> 396 + <svg viewBox="0 0 24 24" fill="currentColor"> 397 + <path d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.879V14.89h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.989C18.343 21.129 22 16.99 22 12c0-5.523-4.477-10-10-10z"/> 398 + </svg> 399 + Share on Bluesky 400 + </a> 370 401 <a href="/" class="back-link">← Back to games</a> 371 402 </div> 372 403 </header> ··· 377 408 </div> 378 409 {:else} 379 410 <div class="game-info"> 380 - <div class="info-card"> 411 + <div class="info-card cloud-card"> 381 412 <h3>Game Info</h3> 382 413 <p><strong>Status:</strong> <span class="status-{gameStatus}">{gameStatus}</span></p> 383 414 <p><strong>Board:</strong> {gameBoardSize}x{gameBoardSize}</p> 384 415 <p><strong>Moves:</strong> {moves.length}</p> 385 416 </div> 386 417 387 - <div class="info-card"> 418 + <div class="info-card cloud-card"> 388 419 <h3>Players</h3> 389 420 <p> 390 421 <span class="player-black">⚫</span> ··· 413 444 {#if gameStatus === 'completed'} 414 445 {#if resigns.length > 0} 415 446 {@const resign = resigns[0]} 416 - <div class="info-card cancelled-card"> 447 + <div class="info-card cloud-card cancelled-card"> 417 448 <h3>Game Ended</h3> 418 449 <p class="cancelled-text"> 419 450 {resign.color === 'black' ? '⚫' : '⚪'} ··· 423 454 </p> 424 455 </div> 425 456 {:else if gameBlackScore !== null && gameWhiteScore !== null} 426 - <div class="info-card score-card"> 457 + <div class="info-card cloud-card score-card"> 427 458 <h3>Final Scores</h3> 428 459 <p><span class="player-black">⚫</span> Black: {gameBlackScore}</p> 429 460 <p><span class="player-white">⚪</span> White: {gameWhiteScore}</p> ··· 567 598 568 599 <!-- Move History --> 569 600 {#if moves.length > 0 || passes.length > 0 || resigns.length > 0} 570 - <div class="move-history"> 601 + <div class="move-history cloud-card"> 571 602 <div class="move-history-header"> 572 603 <h3>Move History</h3> 573 604 {#if reviewMoveIndex !== null} ··· 634 665 635 666 .loading-state { 636 667 text-align: center; 637 - color: #718096; 668 + color: var(--sky-gray); 638 669 padding: 4rem; 639 670 font-size: 1.25rem; 640 671 } ··· 643 674 position: fixed; 644 675 top: 2rem; 645 676 right: 2rem; 646 - background: #4299e1; 677 + background: linear-gradient(135deg, var(--sky-apricot-dark) 0%, var(--sky-apricot) 100%); 647 678 color: white; 648 679 padding: 1rem 1.5rem; 649 - border-radius: 0.5rem; 650 - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 680 + border-radius: 0.75rem; 681 + box-shadow: 0 8px 24px rgba(229, 168, 120, 0.3); 651 682 font-weight: 600; 652 683 z-index: 1000; 653 684 animation: slideIn 0.3s ease-out; ··· 669 700 justify-content: space-between; 670 701 align-items: center; 671 702 margin-bottom: 2rem; 703 + background: linear-gradient( 704 + 135deg, 705 + rgba(255, 255, 255, 0.95) 0%, 706 + rgba(245, 248, 250, 0.9) 50%, 707 + rgba(232, 239, 244, 0.85) 100% 708 + ); 709 + border: none; 710 + border-radius: 1.8rem 2.2rem 1.6rem 2rem; 711 + padding: 1.25rem 1.5rem; 712 + box-shadow: 713 + 0 0 15px rgba(255, 255, 255, 0.7), 714 + 0 0 30px rgba(255, 255, 255, 0.3), 715 + 0 6px 24px rgba(90, 122, 144, 0.1), 716 + inset 0 1px 1px rgba(255, 255, 255, 0.9); 717 + backdrop-filter: blur(8px); 718 + position: relative; 719 + } 720 + 721 + header::before { 722 + content: ''; 723 + position: absolute; 724 + inset: -2px; 725 + border-radius: inherit; 726 + background: linear-gradient( 727 + 135deg, 728 + rgba(255, 255, 255, 0.5) 0%, 729 + rgba(212, 229, 239, 0.2) 50%, 730 + rgba(255, 255, 255, 0.3) 100% 731 + ); 732 + filter: blur(3px); 733 + z-index: -1; 672 734 } 673 735 674 736 .header-right { ··· 677 739 gap: 1rem; 678 740 } 679 741 742 + .share-button { 743 + display: inline-flex; 744 + align-items: center; 745 + gap: 0.5rem; 746 + padding: 0.5rem 1rem; 747 + background: linear-gradient(135deg, #0085ff 0%, #0066cc 100%); 748 + color: white; 749 + border: none; 750 + border-radius: 0.5rem; 751 + font-size: 0.875rem; 752 + font-weight: 600; 753 + cursor: pointer; 754 + transition: all 0.2s; 755 + text-decoration: none; 756 + } 757 + 758 + .share-button:hover { 759 + transform: translateY(-1px); 760 + box-shadow: 0 4px 12px rgba(0, 133, 255, 0.3); 761 + } 762 + 763 + .share-button svg { 764 + width: 16px; 765 + height: 16px; 766 + } 767 + 680 768 .live-indicator { 681 769 display: inline-flex; 682 770 align-items: center; 683 771 gap: 0.25rem; 684 - padding: 0.25rem 0.75rem; 685 - background: #fee; 686 - color: #c00; 772 + padding: 0.375rem 0.875rem; 773 + background: linear-gradient(135deg, var(--sky-rose-light) 0%, var(--sky-rose) 100%); 774 + color: var(--sky-rose-dark); 687 775 border-radius: 1rem; 688 776 font-size: 0.875rem; 689 777 font-weight: 600; 690 778 animation: pulse 2s ease-in-out infinite; 779 + border: 1px solid var(--sky-rose); 691 780 } 692 781 693 782 .offline-indicator { 694 783 display: inline-flex; 695 784 align-items: center; 696 785 gap: 0.25rem; 697 - padding: 0.25rem 0.75rem; 698 - background: #fef3c7; 699 - color: #92400e; 786 + padding: 0.375rem 0.875rem; 787 + background: var(--sky-apricot-light); 788 + color: var(--sky-apricot-dark); 700 789 border-radius: 1rem; 701 790 font-size: 0.875rem; 702 791 font-weight: 600; 703 792 cursor: help; 793 + border: 1px solid var(--sky-apricot); 704 794 } 705 795 706 796 @keyframes pulse { ··· 715 805 h1 { 716 806 margin: 0; 717 807 font-size: 2rem; 808 + color: var(--sky-slate-dark); 809 + font-weight: 700; 718 810 } 719 811 720 812 .back-link { 721 - color: #4299e1; 813 + color: var(--sky-slate); 722 814 text-decoration: none; 815 + font-weight: 500; 816 + transition: color 0.2s; 723 817 } 724 818 725 819 .back-link:hover { 726 - text-decoration: underline; 820 + color: var(--sky-apricot-dark); 727 821 } 728 822 729 823 .game-info { ··· 734 828 } 735 829 736 830 .info-card { 737 - background: white; 738 - border-radius: 0.5rem; 831 + background: var(--sky-white); 832 + border-radius: 1rem; 739 833 padding: 1.5rem; 740 - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 834 + box-shadow: 0 4px 16px rgba(90, 122, 144, 0.08); 835 + border: 1px solid var(--sky-blue-pale); 741 836 } 742 837 743 838 .info-card h3 { 744 839 margin-top: 0; 745 - color: #2d3748; 840 + color: var(--sky-slate-dark); 746 841 font-size: 1.125rem; 842 + font-weight: 600; 747 843 } 748 844 749 845 .info-card p { 750 846 margin: 0.5rem 0; 847 + color: var(--sky-slate); 751 848 } 752 849 753 850 .status-waiting { 754 - color: #d69e2e; 851 + color: var(--sky-apricot-dark); 755 852 font-weight: 600; 756 853 } 757 854 758 855 .status-active { 759 - color: #38a169; 856 + color: #059669; 760 857 font-weight: 600; 761 858 } 762 859 763 860 .status-completed { 764 - color: #718096; 861 + color: var(--sky-gray); 765 862 font-weight: 600; 766 863 } 767 864 ··· 770 867 } 771 868 772 869 .player-link { 773 - color: #4299e1; 870 + color: var(--sky-slate); 774 871 text-decoration: none; 775 872 font-weight: 500; 873 + transition: color 0.2s; 776 874 } 777 875 778 876 .player-link:hover { 779 - text-decoration: underline; 877 + color: var(--sky-apricot-dark); 780 878 } 781 879 782 880 .you-label { 783 - color: #718096; 881 + color: var(--sky-gray); 784 882 font-size: 0.875rem; 785 883 margin-left: 0.25rem; 786 884 } 787 885 788 886 .waiting { 789 - color: #a0aec0; 887 + color: var(--sky-gray-light); 790 888 font-style: italic; 791 889 } 792 890 ··· 821 919 } 822 920 823 921 .captures-panel { 824 - background: white; 825 - border-radius: 0.5rem; 922 + background: var(--sky-white); 923 + border-radius: 1rem; 826 924 padding: 1.5rem; 827 - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 925 + box-shadow: 0 4px 16px rgba(90, 122, 144, 0.08); 828 926 min-width: 150px; 927 + border: 1px solid var(--sky-blue-pale); 829 928 } 830 929 831 930 @media (max-width: 1200px) { ··· 863 962 .capture-label { 864 963 font-weight: 600; 865 964 font-size: 1rem; 866 - color: #2d3748; 965 + color: var(--sky-slate-dark); 867 966 } 868 967 869 968 .capture-count { 870 969 font-size: 2rem; 871 970 font-weight: bold; 872 - color: #4299e1; 971 + color: var(--sky-apricot-dark); 873 972 } 874 973 875 974 .capture-stones { ··· 885 984 } 886 985 887 986 .score-card { 888 - background: #e6fffa; 889 - border: 2px solid #38a169; 987 + background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); 988 + border: 2px solid #34d399; 890 989 } 891 990 892 991 .winner-text { 893 992 font-weight: bold; 894 - color: #38a169; 993 + color: #059669; 895 994 margin-top: 0.5rem; 896 995 } 897 996 ··· 902 1001 } 903 1002 904 1003 .score-input-card { 905 - background: white; 906 - border-radius: 0.5rem; 1004 + background: var(--sky-white); 1005 + border-radius: 1rem; 907 1006 padding: 2rem; 908 - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 1007 + box-shadow: 0 4px 16px rgba(90, 122, 144, 0.08); 909 1008 max-width: 500px; 910 1009 width: 100%; 1010 + border: 1px solid var(--sky-blue-pale); 911 1011 } 912 1012 913 1013 .score-input-card h3 { 914 1014 margin-top: 0; 915 - color: #2d3748; 1015 + color: var(--sky-slate-dark); 916 1016 font-size: 1.5rem; 1017 + font-weight: 600; 917 1018 } 918 1019 919 1020 .score-instructions { 920 - color: #718096; 1021 + color: var(--sky-gray); 921 1022 margin-bottom: 1.5rem; 922 1023 } 923 1024 ··· 935 1036 936 1037 .score-input-group label { 937 1038 font-weight: 600; 938 - color: #2d3748; 1039 + color: var(--sky-slate-dark); 939 1040 font-size: 1rem; 940 1041 } 941 1042 942 1043 .score-input-group input { 943 - padding: 0.5rem; 944 - border: 1px solid #cbd5e0; 945 - border-radius: 0.25rem; 1044 + padding: 0.75rem; 1045 + border: 2px solid var(--sky-blue-pale); 1046 + border-radius: 0.5rem; 946 1047 font-size: 1rem; 1048 + transition: all 0.2s; 1049 + } 1050 + 1051 + .score-input-group input:focus { 1052 + outline: none; 1053 + border-color: var(--sky-apricot); 1054 + box-shadow: 0 0 0 3px var(--sky-apricot-light); 947 1055 } 948 1056 949 1057 .score-buttons { ··· 954 1062 955 1063 .submit-score-button, .show-score-input-button { 956 1064 flex: 1; 957 - padding: 0.75rem 1.5rem; 1065 + padding: 0.875rem 1.5rem; 958 1066 font-size: 1rem; 959 - background: #4299e1; 1067 + background: linear-gradient(135deg, var(--sky-apricot-dark) 0%, var(--sky-apricot) 100%); 960 1068 color: white; 961 1069 border: none; 962 - border-radius: 0.375rem; 1070 + border-radius: 0.5rem; 963 1071 cursor: pointer; 964 - transition: background 0.2s; 1072 + transition: all 0.2s; 965 1073 font-weight: 600; 1074 + box-shadow: 0 2px 8px rgba(229, 168, 120, 0.3); 966 1075 } 967 1076 968 1077 .submit-score-button:hover:not(:disabled), .show-score-input-button:hover { 969 - background: #3182ce; 1078 + transform: translateY(-1px); 1079 + box-shadow: 0 4px 12px rgba(229, 168, 120, 0.4); 970 1080 } 971 1081 972 1082 .submit-score-button:disabled { 973 - background: #a0aec0; 1083 + background: var(--sky-gray-light); 974 1084 cursor: not-allowed; 1085 + box-shadow: none; 975 1086 } 976 1087 977 1088 .cancel-button { 978 1089 flex: 1; 979 - padding: 0.75rem 1.5rem; 1090 + padding: 0.875rem 1.5rem; 980 1091 font-size: 1rem; 981 - background: #e2e8f0; 982 - color: #2d3748; 983 - border: none; 984 - border-radius: 0.375rem; 1092 + background: var(--sky-cloud); 1093 + color: var(--sky-slate); 1094 + border: 1px solid var(--sky-blue-pale); 1095 + border-radius: 0.5rem; 985 1096 cursor: pointer; 986 - transition: background 0.2s; 1097 + transition: all 0.2s; 987 1098 } 988 1099 989 1100 .cancel-button:hover { 990 - background: #cbd5e0; 1101 + background: var(--sky-blue-pale); 991 1102 } 992 1103 993 1104 .turn-message { 994 1105 margin-top: 1rem; 995 - color: #718096; 1106 + color: var(--sky-gray); 996 1107 font-style: italic; 997 1108 } 998 1109 999 1110 .review-mode-banner { 1000 - background: #fef3c7; 1001 - color: #92400e; 1111 + background: linear-gradient(135deg, var(--sky-apricot-light) 0%, var(--sky-rose-light) 100%); 1112 + color: var(--sky-slate-dark); 1002 1113 padding: 0.75rem 1rem; 1003 - border-radius: 0.5rem; 1114 + border-radius: 0.75rem; 1004 1115 margin-bottom: 1rem; 1005 1116 font-weight: 600; 1006 1117 text-align: center; 1007 - border: 2px solid #fbbf24; 1118 + border: 2px solid var(--sky-apricot); 1008 1119 } 1009 1120 1010 1121 .waiting-message { 1011 1122 text-align: center; 1012 1123 font-size: 1.25rem; 1013 - color: #a0aec0; 1124 + color: var(--sky-gray); 1014 1125 margin: 4rem 0; 1015 1126 } 1016 1127 1017 1128 .move-history { 1018 - background: white; 1019 - border-radius: 0.5rem; 1129 + background: var(--sky-white); 1130 + border-radius: 1rem; 1020 1131 padding: 1.5rem; 1021 - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 1132 + box-shadow: 0 4px 16px rgba(90, 122, 144, 0.08); 1022 1133 margin-top: 2rem; 1134 + border: 1px solid var(--sky-blue-pale); 1023 1135 } 1024 1136 1025 1137 .move-history-header { ··· 1031 1143 1032 1144 .move-history h3 { 1033 1145 margin: 0; 1034 - color: #2d3748; 1146 + color: var(--sky-slate-dark); 1147 + font-weight: 600; 1035 1148 } 1036 1149 1037 1150 .back-to-game-button { 1038 1151 padding: 0.5rem 1rem; 1039 - background: #4299e1; 1152 + background: linear-gradient(135deg, var(--sky-apricot-dark) 0%, var(--sky-apricot) 100%); 1040 1153 color: white; 1041 1154 border: none; 1042 - border-radius: 0.375rem; 1155 + border-radius: 0.5rem; 1043 1156 cursor: pointer; 1044 1157 font-size: 0.875rem; 1045 1158 font-weight: 600; 1046 - transition: background 0.2s; 1159 + transition: all 0.2s; 1160 + box-shadow: 0 2px 8px rgba(229, 168, 120, 0.3); 1047 1161 } 1048 1162 1049 1163 .back-to-game-button:hover { 1050 - background: #3182ce; 1164 + transform: translateY(-1px); 1165 + box-shadow: 0 4px 12px rgba(229, 168, 120, 0.4); 1051 1166 } 1052 1167 1053 1168 .moves-list { ··· 1059 1174 } 1060 1175 1061 1176 .move-item { 1062 - padding: 0.5rem; 1063 - border: 1px solid #e2e8f0; 1064 - border-radius: 0.25rem; 1177 + padding: 0.5rem 0.75rem; 1178 + border: 1px solid var(--sky-blue-pale); 1179 + border-radius: 0.5rem; 1065 1180 font-size: 0.875rem; 1066 - background: white; 1181 + background: var(--sky-white); 1067 1182 cursor: pointer; 1068 1183 transition: all 0.2s; 1069 1184 text-align: left; ··· 1071 1186 } 1072 1187 1073 1188 .move-item:hover { 1074 - background: #edf2f7; 1075 - border-color: #cbd5e0; 1189 + background: var(--sky-cloud); 1190 + border-color: var(--sky-apricot); 1076 1191 transform: translateY(-1px); 1077 - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 1192 + box-shadow: 0 2px 8px rgba(90, 122, 144, 0.1); 1078 1193 } 1079 1194 1080 1195 .move-item.selected { 1081 - background: #4299e1; 1196 + background: linear-gradient(135deg, var(--sky-apricot-dark) 0%, var(--sky-apricot) 100%); 1082 1197 color: white; 1083 - border-color: #3182ce; 1198 + border-color: var(--sky-apricot-dark); 1084 1199 } 1085 1200 1086 1201 .move-item.selected .move-number { ··· 1092 1207 } 1093 1208 1094 1209 .move-item.pass-item:hover { 1095 - background: white; 1210 + background: var(--sky-white); 1096 1211 transform: none; 1097 1212 box-shadow: none; 1098 1213 } 1099 1214 1100 1215 .move-number { 1101 1216 font-weight: 600; 1102 - color: #4a5568; 1217 + color: var(--sky-slate); 1103 1218 margin-right: 0.5rem; 1104 1219 } 1105 1220 1106 1221 .captures { 1107 - color: #e53e3e; 1222 + color: var(--sky-rose-dark); 1108 1223 font-weight: 600; 1109 1224 margin-left: 0.5rem; 1110 1225 } 1111 1226 1112 1227 .pass-indicator { 1113 - color: #718096; 1228 + color: var(--sky-gray); 1114 1229 font-style: italic; 1115 1230 } 1116 1231 1117 1232 .resign-item { 1118 - background: #fff5f5; 1119 - border-color: #fc8181; 1233 + background: var(--sky-rose-light); 1234 + border-color: var(--sky-rose); 1120 1235 cursor: default; 1121 1236 } 1122 1237 1123 1238 .resign-item:hover { 1124 - background: #fff5f5; 1239 + background: var(--sky-rose-light); 1125 1240 transform: none; 1126 1241 box-shadow: none; 1127 1242 } 1128 1243 1129 1244 .resign-indicator { 1130 - color: #c53030; 1245 + color: var(--sky-rose-dark); 1131 1246 font-weight: 600; 1132 1247 } 1133 1248 ··· 1141 1256 padding: 0.5rem 1rem; 1142 1257 font-size: 0.875rem; 1143 1258 border: none; 1144 - border-radius: 0.375rem; 1259 + border-radius: 0.5rem; 1145 1260 cursor: pointer; 1146 1261 font-weight: 600; 1147 1262 transition: all 0.2s; ··· 1153 1268 } 1154 1269 1155 1270 .resign-button { 1156 - background: #fc8181; 1157 - color: #742a2a; 1271 + background: linear-gradient(135deg, var(--sky-rose) 0%, var(--sky-rose-dark) 100%); 1272 + color: white; 1158 1273 } 1159 1274 1160 1275 .resign-button:hover:not(:disabled) { 1161 - background: #f56565; 1276 + transform: translateY(-1px); 1277 + box-shadow: 0 4px 12px rgba(184, 138, 152, 0.4); 1162 1278 } 1163 1279 1164 1280 .archive-button { 1165 - background: #e2e8f0; 1166 - color: #4a5568; 1281 + background: var(--sky-cloud); 1282 + color: var(--sky-slate); 1283 + border: 1px solid var(--sky-blue-pale); 1167 1284 } 1168 1285 1169 1286 .archive-button:hover:not(:disabled) { 1170 - background: #cbd5e0; 1287 + background: var(--sky-blue-pale); 1171 1288 } 1172 1289 1173 1290 .cancelled-card { 1174 - background: #fff5f5; 1175 - border: 2px solid #fc8181; 1291 + background: linear-gradient(135deg, var(--sky-rose-light) 0%, #fce7f3 100%); 1292 + border: 2px solid var(--sky-rose); 1176 1293 } 1177 1294 1178 1295 .cancelled-text { 1179 - color: #c53030; 1296 + color: var(--sky-rose-dark); 1180 1297 font-weight: 600; 1181 1298 } 1182 1299 </style>