/ src / styles / Home.module.scss
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  }