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    .imgInfo {
126      line-height: 22px;
127      color: #939ba1;
128      font-size: 15px;
129    }
130  
131    .categorySelector {
132      position: relative;
133    }
134  
135    .categorySelector > div {
136      width: 100%;
137      top: auto;
138      bottom: 0;
139      margin: 0;
140    }
141  
142    .categorySelector > button {
143      width: 100%;
144      margin: 0;
145  
146      transition-property: background;
147      transition-duration: 0.4s;
148    }
149  
150    .categorySelectorEmpty > button {
151      background: #939ba1;
152    }
153  }
154  
155  .blockSubmit {
156    display: flex;
157    flex-direction: column;
158    margin: 40px 0 16px 0;
159  
160    .terms {
161      line-height: 22px;
162      color: #939ba1;
163      font-size: 15px;
164      cursor: pointer;
165  
166      a {
167        color: $link-color;
168        text-decoration: none;
169      }
170    }
171  
172    .submitButton {
173      background: $link-color;
174      border-radius: 8px;
175      color: #fff;
176      margin: calculateRem(26) auto 0 auto;
177      border: none;
178      font-family: $font;
179      padding: calculateRem(11) calculateRem(38);
180      font-size: calculateRem(15);
181      cursor: pointer;
182    }
183  
184    .submitButton:disabled,
185    .submitButton[disabled] {
186      background: $text-color;
187    }
188  }
189  
190  .imgControl {
191    display: flex;
192    align-items: center;
193    flex-direction: column;
194    flex: 1 1 auto;
195  
196    .imgCanvasCnt {
197      width: 100%;
198      flex: 1 1 auto;
199      display: flex;
200      align-items: center;
201      justify-content: center;
202  
203      .imgCanvas {
204        width: 160px;
205        height: 160px;
206        border-radius: 50%;
207        pointer-events: none;
208      }
209    }
210  
211    .controls {
212      width: 100%;
213      border-top: 1px solid #eef2f5;
214  
215      .slider {
216        height: 74px;
217        display: flex;
218        align-items: center;
219  
220        * {
221          flex: 1 1 auto;
222        }
223  
224        .minZoom {
225          width: 10px;
226          height: 10px;
227          flex: 0 0 auto;
228          border: 1px solid #939ba1;
229          border-radius: 3px;
230          margin: auto 30px auto 15px;
231        }
232  
233        .maxZoom {
234          width: 18px;
235          height: 18px;
236          flex: 0 0 auto;
237          border: 1px solid #939ba1;
238          border-radius: 3px;
239          margin: auto 11px auto 26px;
240        }
241      }
242  
243      .actionsCnt {
244        height: 64px;
245        display: flex;
246        align-items: center;
247        justify-content: space-between;
248        box-sizing: border-box;
249        padding: 0 16px;
250  
251        .button {
252          height: 44px;
253          border-radius: 8px;
254          border: none;
255          border-radius: 22px;
256          font-family: $font;
257          padding: calculateRem(11) calculateRem(38);
258          font-size: calculateRem(15);
259          cursor: pointer;
260        }
261  
262        .cancelButton {
263          color: $link-color;
264          background: #eceffc;
265        }
266  
267        .doneButton {
268          color: #fff;
269          background: $link-color;
270        }
271      }
272    }
273  }
274  
275  /* rating */
276  .dapp {
277    height: 48px;
278    display: flex;
279    align-items: center;
280    font-family: $font;
281    font-weight: 500;
282    padding: 0 calculateRem(12);
283  }
284  
285  .dapp .image {
286    max-width: 24px;
287    max-height: 24px;
288    border-radius: 50%;
289    margin-right: calculateRem(12);
290  }
291  
292  .items {
293    display: flex;
294    flex-direction: column;
295    font-family: $font;
296  }
297  
298  .items .itemRow {
299    height: 32px;
300    display: flex;
301    align-items: center;
302    padding: 0 calculateRem(12);
303  }
304  
305  .items .item {
306    display: flex;
307    align-items: center;
308  }
309  
310  .items .item img {
311    margin-right: calculateRem(12);
312  }
313  
314  .badge {
315    border-radius: 24px;
316    color: #ffffff;
317    font-family: $font;
318    font-size: calculateRem(15);
319    margin-right: calculateRem(16);
320    margin-left: auto;
321    padding: calculateRem(3) calculateRem(10);
322  }
323  
324  .greenBadge {
325    @extend .badge;
326    background: #44d058;
327  }
328  
329  .redBadge {
330    @extend .badge;
331    background: #f00;
332  }
333  
334  .inputArea {
335    width: calc(100% - 2 * 16px);
336    height: 64px;
337    display: flex;
338    align-items: center;
339    justify-content: center;
340    text-align: center;
341    margin: auto;
342  }
343  
344  .inputArea.inputAreaBorder {
345    border-bottom: 1px solid #eef2f5;
346  }
347  
348  .inputArea input {
349    width: 19px;
350    border: none;
351    text-align: center;
352    font-size: calculateRem(32);
353    line-height: calculateRem(28);
354    font-family: $font;
355    margin-right: calculateRem(6);
356  }
357  
358  .inputArea input:focus {
359    outline: none;
360  }
361  
362  .inputArea::after {
363    transition: all 0.05s ease-in-out;
364    content: 'SNT';
365    color: #939ba1;
366    font-size: calculateRem(32);
367    line-height: calculateRem(28);
368    font-family: $font;
369  }
370  
371  .inputArea span {
372    font-size: calculateRem(32);
373    line-height: calculateRem(28);
374    font-family: $font;
375    margin-right: calculateRem(6);
376  }
377  
378  .footer {
379    text-align: center;
380  }
381  
382  .footer button {
383    background: $link-color;
384    border-radius: 8px;
385    color: #fff;
386    margin: calculateRem(10) auto;
387    border: none;
388    font-family: $font;
389    padding: calculateRem(11) calculateRem(38);
390    font-size: calculateRem(15);
391    cursor: pointer;
392  }
393  
394  .footer button:disabled,
395  .footer button[disabled] {
396    background: $text-color;
397  }
398  
399  .footer .disclaimer {
400    font-size: calculateRem(15);
401    color: $text-color;
402    line-height: 22px;
403    font-family: $font;
404    padding: calculateRem(16);
405    border-bottom: 1px solid #eef2f5;
406    margin: 0;
407  }
408  
409  .footer .disclaimer a {
410    text-decoration: none;
411    color: $link-color;
412  }