tokenlist.module.scss
1 $primaryColor: #012060; 2 3 .TokenTableRoot { 4 position: relative; 5 overflow: scroll; 6 width: 80%; 7 border-radius: 12px; 8 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 9 transition: box-shadow 0.3s ease; 10 } 11 12 .TokenTableTarget { 13 display: flex; 14 align-items: center; 15 justify-content: center; 16 height: 100%; 17 padding: 0.5rem 1rem; 18 color: $primaryColor; 19 text-decoration: none; 20 transition: color 0.3s ease; 21 font-size: 22px; 22 23 &:hover { 24 color: lighten($primaryColor, 20%); 25 } 26 } 27 28 .TokenTableContent { 29 padding: 0.5rem; 30 } 31 32 .TokenTableRootInner { 33 width: 100%; 34 margin-top: 0; 35 display: flex; 36 justify-content: center; 37 } 38 39 .TokenTableHeader { 40 background-color: transparent; 41 padding: 0.5rem 2rem; 42 } 43 44 .TokenTableRow { 45 background-color: transparent; 46 border-radius: 12px; 47 transition: background-color 0.3s ease, transform 0.3s ease; 48 49 &:hover { 50 background-color: rgba(240, 240, 240, 0.9); 51 transform: scale(1.02); 52 border-radius: 12px; 53 } 54 } 55 56 .SelectedRow { 57 background-color: #e0e0e0; 58 border-radius: 12px; 59 transform: scale(1.02); 60 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 61 } 62 63 .PendingRow { 64 background-color: #ccd4db; 65 border-radius: 12px; 66 transition: background-color 0.3s ease, transform 0.3s ease; 67 68 &:hover { 69 background-color: rgba(240, 240, 240, 0.9); 70 transform: scale(1.02); 71 border-radius: 12px; 72 } 73 } 74 75 .AcceptButton { 76 background-color: #4caf50; 77 color: white; 78 font-size: 14px; 79 border: none; 80 padding: 8px 16px; 81 border-radius: 8px; 82 cursor: pointer; 83 transition: background-color 0.3s ease; 84 85 &:hover { 86 background-color: darken(#4caf50, 10%); 87 } 88 } 89 90 .DeclineButton { 91 background-color: #e53935; 92 color: white; 93 font-size: 14px; 94 border: none; 95 padding: 8px 16px; 96 border-radius: 8px; 97 cursor: pointer; 98 transition: background-color 0.3s ease; 99 100 &:hover { 101 background-color: darken(#e53935, 10%); 102 } 103 } 104 105 .TokenTableHeaderCell { 106 padding: 0.5rem 1.8rem; 107 font-size: 14px; 108 box-sizing: border-box; 109 overflow: hidden; 110 text-overflow: ellipsis; 111 white-space: nowrap; 112 align-items: center; 113 } 114 115 .TokenTableCell { 116 padding: 1rem 2rem; 117 border: none; 118 font-size: 14px; 119 box-sizing: border-box; 120 overflow: hidden; 121 text-overflow: ellipsis; 122 white-space: nowrap; 123 } 124 125 .TokenTableCell img { 126 margin-right: 8px; 127 } 128 129 .TokenTableBody { 130 padding: 0.5rem 1.8rem; 131 font-size: 14px; 132 box-sizing: border-box; 133 overflow: hidden; 134 text-overflow: ellipsis; 135 white-space: nowrap; 136 } 137 138 .TokenTableCell .TokenIcon { 139 margin-right: 8px; 140 display: inline-block; 141 vertical-align: middle; 142 } 143 144 .TokenTableHeaderCell img { 145 margin-right: 8px; 146 } 147 148 .AddButtonContainer { 149 display: flex; 150 justify-content: center; 151 align-items: center; 152 height: 100%; 153 } 154 155 .CenteredButton { 156 display: flex; 157 justify-content: center; 158 align-items: center; 159 width: 10%; 160 } 161 162 .AddButton { 163 background-color: #012060; 164 color: white; 165 font-size: 18px; 166 margin-bottom: 25px; 167 border: none; 168 padding: 10px 20px; 169 border-radius: 8px; 170 cursor: pointer; 171 transition: background-color 0.3s ease; 172 173 &:hover { 174 background-color: darken(#012060, 10%); 175 } 176 }