Home.module.scss
1 .main { 2 background: 3 50% 17vh no-repeat, 4 rgb(0, 32, 96); 5 } 6 .header { 7 background: 8 50% 17vh no-repeat, 9 rgb(0, 32, 96); 10 } 11 .template__wrapper { 12 background-color: rgb(255, 255, 255); 13 min-height: 100vh; 14 overflow: auto; 15 } 16 .container { 17 max-width: 1200px; 18 margin: 0 auto; 19 20 @media screen and (max-width: 915px) { 21 padding: 40px; 22 } 23 @media screen and (max-width: 768px) { 24 padding: 20px; 25 } 26 } 27 28 .header h1 { 29 display: flex; 30 font-size: 60px; 31 } 32 .services { 33 display: flex; 34 margin-top: 40px; 35 } 36 .services h3 { 37 margin-right: 10px; 38 } 39 40 .template__section { 41 display: flex; 42 justify-content: space-between; 43 44 @media screen and (max-width: 915px) { 45 flex-direction: column; 46 } 47 48 .main__section { 49 flex-grow: 1; 50 } 51 } 52 .select__input { 53 padding: 8px 16px; 54 55 .option { 56 color: rgb(51, 51, 51); 57 display: flex; 58 justify-content: space-between; 59 } 60 61 .curr__code { 62 margin-right: 40px; 63 flex: 1; 64 flex-grow: 1; 65 color: rgb(51, 51, 51); 66 } 67 } 68 69 .action__section { 70 position: relative; 71 72 .actions { 73 display: 'block'; 74 border: 'none'; 75 border-radius: 12px; 76 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 77 transition: box-shadow 0.3s ease; 78 padding: 20px; 79 max-height: 500px; 80 position: sticky; 81 top: 100px; 82 margin-right: 45px; 83 84 @media screen and (max-width: 768px) { 85 margin-top: 30px; 86 } 87 } 88 } 89 90 .action__btn { 91 box-sizing: border-box; 92 font-weight: 500; 93 line-height: 46px; 94 border-radius: 6px; 95 background-color: #012060; 96 border: 1px solid transparent; 97 color: #f9fafb; 98 font-size: 14px; 99 padding: 8px 16px; 100 min-width: 60px; 101 padding: 0 40px; 102 cursor: pointer; 103 transition: ease-in 100ms; 104 width: 100%; 105 106 &:hover { 107 background-color: rgb(0, 32, 96); 108 font-weight: 500; 109 } 110 &:disabled { 111 background-color: gray; 112 cursor: default; 113 } 114 } 115 116 .uploadForm { 117 display: flex; 118 flex-direction: row; 119 align-items: center; 120 margin-top: 10px; 121 margin-left: 20px; 122 } 123 124 .uploadInput { 125 margin-bottom: 10px; 126 margin-top: 5px; 127 padding: 7px; 128 border: 1px solid #ccc; 129 border-radius: 5px 0px 0px 5px; 130 font-size: 16px; 131 background-color: #fff; 132 color: #333; 133 } 134 135 .uploadButton { 136 padding: 9.5px 20px; 137 border: none; 138 border-radius: 0px 5px 5px 0px; 139 background-color: #1e87f0; 140 color: #fff; 141 font-size: 18px; 142 cursor: pointer; 143 transition: background-color 0.3s ease; 144 margin-bottom: 5px; 145 146 &:hover { 147 background-color: #145eaa; 148 } 149 } 150 151 .ethSubmitbtn { 152 padding: 6.5px 20px; 153 border: none; 154 border-radius: 0px 5px 5px 0px; 155 background-color: #1e87f0; 156 color: #fff; 157 font-size: 18px; 158 cursor: pointer; 159 transition: background-color 0.3s ease; 160 margin-bottom: 5px; 161 162 &:hover { 163 background-color: #145eaa; 164 } 165 } 166 167 .donebtn { 168 padding: 10px 20px; 169 border: none; 170 border-radius: 5px; 171 background-color: #1e87f0; 172 color: #fff; 173 font-size: 18px; 174 cursor: pointer; 175 transition: background-color 0.3s ease; 176 margin-bottom: 5px; 177 margin-top: 12px; 178 margin-left: 20px; 179 180 &:hover { 181 background-color: #145eaa; 182 } 183 } 184 185 .btn { 186 padding: 0 80px; 187 line-height: 53px; 188 font-size: 14px; 189 border-radius: 30px; 190 cursor: pointer; 191 outline: none; 192 border: 1px solid transparent; 193 line-height: 48px; 194 transition: 0.1s ease-in-out; 195 transition-property: color, background-color, border-color; 196 } 197 198 .btn__primary { 199 background: #ffffff; 200 color: #1e87f0; 201 202 &:hover { 203 box-shadow: 0 10px 40px #1e87f0; 204 } 205 } 206 207 .btn__secondary { 208 background-color: transparent; 209 color: rgba(255, 255, 255, 0.8); 210 border: 1px solid #e5e5e5; 211 border-color: rgba(255, 255, 255, 0.6); 212 213 &:hover { 214 border-color: #ffffff; 215 color: #ffffff; 216 } 217 } 218 .modalWrapper { 219 display: flex; 220 justify-content: center; 221 align-items: center; 222 position: fixed; 223 top: 0; 224 right: 0; 225 bottom: 0; 226 left: 0; 227 background: rgba(0, 0, 0, 0.3); 228 z-index: 999; 229 } 230 231 .modalContent { 232 background: #fff; 233 padding: 20px; 234 border-radius: 8px; 235 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 236 }