1  @import '../../common/styles/variables';
  2  
  3  .modalWindow {
  4    height: 100%;
  5    display: flex;
  6    flex-direction: column;
  7    font-family: $font;
  8  }
  9  
 10  @media (min-width: $desktop) {
 11    .modalWindow {
 12      height: auto;
 13    }
 14  }
 15  
 16  .modalContentFullScreen {
 17    display: flex;
 18    flex-direction: column;
 19    flex: 1 1 auto;
 20  }
 21  
 22  @media (min-width: $desktop) {
 23    .modalContentFullScreen {
 24      height: 512px;
 25    }
 26  }
 27  
 28  .cntWithImgControl {
 29    flex: 1 1 auto;
 30    display: flex;
 31    flex-direction: column;
 32  }
 33  
 34  .title {
 35    line-height: 40px;
 36    text-align: center;
 37    text-transform: uppercase;
 38    font-size: 13px;
 39    border-bottom: 1px solid #f7f7f7;
 40  }
 41  
 42  .withImgControl {
 43    display: none;
 44  }
 45  
 46  .hasTransaction {
 47    text-align: center;
 48    padding: 16px 26px;
 49  }
 50  
 51  .block {
 52    padding: 0 16px 16px 16px;
 53  
 54    .labelRow {
 55      height: 42px;
 56      display: flex;
 57      align-items: center;
 58  
 59      span:nth-child(1) {
 60        font-size: 15px;
 61      }
 62  
 63      span:nth-child(2) {
 64        color: #939ba1;
 65        font-size: 12px;
 66        margin-left: auto;
 67      }
 68    }
 69  
 70    .input {
 71      width: 100%;
 72      height: 52px;
 73      box-sizing: border-box;
 74      padding: 15px;
 75      border: none;
 76      border-radius: 8px;
 77      margin: 0;
 78      background: #eef2f5;
 79    }
 80  
 81    textarea.input {
 82      height: 92px;
 83      resize: none;
 84    }
 85  
 86    .imgCnt {
 87      width: 140px;
 88      height: 140px;
 89      display: flex;
 90      align-items: center;
 91      justify-content: center;
 92      position: relative;
 93      border-radius: 50%;
 94      border: 1px dashed #939ba1;
 95      margin: 16px auto;
 96      background: #eef2f5;
 97  
 98      span {
 99        color: #939ba1;
100        font-size: 15px;
101      }
102  
103      .imgHolder {
104        width: inherit;
105        height: inherit;
106        position: absolute;
107        left: 0;
108        top: 0;
109        border-radius: inherit;
110        background-size: cover;
111        background-position: center;
112      }
113  
114      input.uploader {
115        width: 100%;
116        height: 100%;
117        position: absolute;
118        left: 0;
119        top: 0;
120        opacity: 0;
121        cursor: pointer;
122      }
123    }
124  
125    input::placeholder,
126    textarea::placeholder {
127      color: #939ba1;
128    }
129  
130    .imgInfo {
131      line-height: 22px;
132      color: #939ba1;
133      font-size: 15px;
134    }
135  
136    .categorySelector {
137      position: relative;
138    }
139  
140    .categorySelector > div {
141      width: 100%;
142      top: auto;
143      bottom: 0;
144      margin: 0;
145    }
146  
147    .categorySelector > button {
148      width: 100%;
149      margin: 0;
150  
151      transition-property: background;
152      transition-duration: 0.4s;
153    }
154  
155    .categorySelectorEmpty > button {
156      background: #939ba1;
157    }
158  }
159  
160  .blockSubmit {
161    display: flex;
162    flex-direction: column;
163    margin: 40px 0 16px 0;
164  
165    .terms {
166      line-height: 22px;
167      color: #939ba1;
168      font-size: 15px;
169      cursor: pointer;
170  
171      a {
172        color: $link-color;
173        text-decoration: none;
174      }
175    }
176  
177    .submitButton {
178      background: $link-color;
179      border-radius: 8px;
180      color: #fff;
181      margin: calculateRem(26) auto 0 auto;
182      border: none;
183      font-family: $font;
184      padding: calculateRem(11) calculateRem(38);
185      font-size: calculateRem(15);
186      cursor: pointer;
187    }
188  
189    .submitButton:disabled,
190    .submitButton[disabled] {
191      background: $text-color;
192    }
193  }
194  
195  .imgControl {
196    display: flex;
197    align-items: center;
198    flex-direction: column;
199    flex: 1 1 auto;
200  
201    .imgCanvasCnt {
202      width: 100%;
203      flex: 1 1 auto;
204      display: flex;
205      align-items: center;
206      justify-content: center;
207  
208      .imgCanvas {
209        width: 160px;
210        height: 160px;
211        border-radius: 50%;
212        pointer-events: none;
213      }
214    }
215  
216    .controls {
217      width: 100%;
218      border-top: 1px solid #eef2f5;
219  
220      .slider {
221        height: 74px;
222        display: flex;
223        align-items: center;
224  
225        * {
226          flex: 1 1 auto;
227        }
228  
229        .minZoom {
230          width: 10px;
231          height: 10px;
232          flex: 0 0 auto;
233          border: 1px solid #939ba1;
234          border-radius: 3px;
235          margin: auto 30px auto 15px;
236        }
237  
238        .maxZoom {
239          width: 18px;
240          height: 18px;
241          flex: 0 0 auto;
242          border: 1px solid #939ba1;
243          border-radius: 3px;
244          margin: auto 11px auto 26px;
245        }
246      }
247  
248      .actionsCnt {
249        height: 64px;
250        display: flex;
251        align-items: center;
252        justify-content: space-between;
253        box-sizing: border-box;
254        padding: 0 16px;
255  
256        .button {
257          height: 44px;
258          border-radius: 8px;
259          border: none;
260          border-radius: 22px;
261          font-family: $font;
262          padding: calculateRem(11) calculateRem(38);
263          font-size: calculateRem(15);
264          cursor: pointer;
265        }
266  
267        .cancelButton {
268          color: $link-color;
269          background: #eceffc;
270        }
271  
272        .doneButton {
273          color: #fff;
274          background: $link-color;
275        }
276      }
277    }
278  }
279  
280  /* rating */
281  .dapp {
282    height: 48px;
283    display: flex;
284    align-items: center;
285    font-family: $font;
286    font-weight: 500;
287    padding: 0 calculateRem(12);
288  }
289  
290  .dapp .image {
291    max-width: 24px;
292    max-height: 24px;
293    border-radius: 50%;
294    margin-right: calculateRem(12);
295  }
296  
297  .items {
298    display: flex;
299    flex-direction: column;
300    font-family: $font;
301  }
302  
303  .items .itemRow {
304    height: 32px;
305    display: flex;
306    align-items: center;
307    padding: 0 calculateRem(12);
308  }
309  
310  .items .item {
311    display: flex;
312    align-items: center;
313  }
314  
315  .items .item img {
316    margin-right: calculateRem(12);
317  }
318  
319  .badge {
320    border-radius: 24px;
321    color: #ffffff;
322    font-family: $font;
323    font-size: calculateRem(15);
324    margin-right: calculateRem(16);
325    margin-left: auto;
326    padding: calculateRem(3) calculateRem(10);
327  }
328  
329  .greenBadge {
330    @extend .badge;
331    background: #44d058;
332  }
333  
334  .redBadge {
335    @extend .badge;
336    background: #f00;
337  }
338  
339  .inputArea {
340    width: calc(100% - 2 * 16px);
341    height: 64px;
342    display: flex;
343    align-items: center;
344    justify-content: center;
345    text-align: center;
346    margin: auto;
347  }
348  
349  .inputArea.inputAreaBorder {
350    border-bottom: 1px solid #eef2f5;
351  }
352  
353  .inputArea input {
354    width: 19px;
355    border: none;
356    text-align: center;
357    font-size: calculateRem(32);
358    line-height: calculateRem(28);
359    font-family: $font;
360    margin-right: calculateRem(6);
361  }
362  
363  .inputArea input:focus {
364    outline: none;
365  }
366  
367  .inputArea::after {
368    transition: all 0.05s ease-in-out;
369    content: 'SNT';
370    color: #939ba1;
371    font-size: calculateRem(32);
372    line-height: calculateRem(28);
373    font-family: $font;
374  }
375  
376  .inputArea span {
377    font-size: calculateRem(32);
378    line-height: calculateRem(28);
379    font-family: $font;
380    margin-right: calculateRem(6);
381  }
382  
383  .footer {
384    text-align: center;
385  }
386  
387  .footer button {
388    background: $link-color;
389    border-radius: 8px;
390    color: #fff;
391    margin: calculateRem(10) auto;
392    border: none;
393    font-family: $font;
394    padding: calculateRem(11) calculateRem(38);
395    font-size: calculateRem(15);
396    cursor: pointer;
397  }
398  
399  .footer button:disabled,
400  .footer button[disabled] {
401    background: $text-color;
402  }
403  
404  .footer .disclaimer {
405    font-size: calculateRem(15);
406    color: $text-color;
407    line-height: 22px;
408    font-family: $font;
409    padding: calculateRem(16);
410    border-bottom: 1px solid #eef2f5;
411    margin: 0;
412  }
413  
414  .footer .disclaimer a {
415    text-decoration: none;
416    color: $link-color;
417  }