1  #dapp-form-helper-iframe {
  2      display: none;
  3  }
  4  
  5  /* PROGRESSBAR */
  6  progress {
  7      -webkit-appearance: none;
  8      appearance: none;
  9      height: @gridHeight/2;
 10      margin: @gridHeight/4;
 11      color: @colorBlue;
 12  
 13      @shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
 14      @radius: 2px;
 15  
 16      // bar
 17      &::-webkit-progress-bar {
 18          background-color: fadeout(@colorGrayLight, 10%);
 19          border-radius: @radius;
 20          box-shadow: @shadow
 21      }
 22      &::-moz-progress-bar {
 23          background-color: fadeout(@colorGrayLight, 10%);
 24          border-radius: @radius;
 25          box-shadow: @shadow
 26      }
 27      &::progress-bar {
 28          background-color: fadeout(@colorGrayLight, 10%);
 29          border-radius: @radius;
 30          box-shadow: @shadow
 31      }
 32  
 33      // value
 34      &::-webkit-progress-value {
 35          background-color: @colorBlue;
 36          opacity: 0.8;
 37          border-radius: @radius;
 38      }
 39      &::-moz-progress-value {
 40          background-color: @colorBlue;
 41          opacity: 0.8;
 42          border-radius: @radius;
 43      }
 44      &::progress-value {
 45          background-color: @colorBlue;
 46          opacity: 0.8;
 47          border-radius: @radius;
 48      }
 49  }
 50  
 51  .dapp-progress {
 52      position: relative;
 53      width: 100%;
 54      height: @gridHeight;
 55      border-bottom: 1px solid @colorBlue;
 56  
 57      > span {
 58          display: block;
 59          position: absolute;
 60          top: 0;
 61          bottom: 0;
 62          left: 0;
 63          right: 0;
 64          line-height: @gridHeight;
 65          text-align: center;
 66          font-size: 0.7em;
 67      }
 68  
 69      .dapp-bar {
 70          height: 100%;
 71          .background-image(linear-gradient(to top, @colorBlue 0%, lighten(@colorBlue, 20%) 100%));
 72  
 73          // ANIMATION
 74          .transition(width @animationSpeed*26 linear);
 75      }
 76  }
 77  
 78  .dapp-message {
 79      position: relative;
 80      max-width: @gridWidth * 16;
 81      margin: @defaultMargin*3 0;
 82      font-size: 1.5em;
 83      font-weight: 100;
 84      line-height: 27pt;
 85  
 86      // input[type="text"] {
 87      //     display: block;
 88      //     width: @gridWidth * 10;
 89      //     color: @colorLink;
 90      //     margin-top: 1*@gridHeight;
 91      //     background: lighten(@colorGrayLight, 4%);
 92      //     border-bottom: solid 2px @colorGrayLight;
 93      //     font-size: 1em;
 94      // }
 95  }
 96  
 97  
 98  .dapp-count {
 99      .display(flex);
100      .align-items(center);
101      position: absolute;
102      top: 0;
103      bottom: 0;
104      right: 0;
105      padding: 0 @gridWidth/4;
106      color: @colorWhite;
107      font-weight: 100;
108      .opacity(0.7);
109  
110      // ANIMATION
111      .transition(opacity @animationSpeed);
112      &.animate {
113          .opacity(0);
114      }
115  }
116  .active .dapp-count {
117      background-color: @colorGrayLight;
118      color: darken(@colorBackgroundAside, 20%);    
119  }
120  
121  .dapp-url-bar {
122      display: block;
123      text-align: center;
124      width: 100%;
125      // .calc(width, ~'100% - 64px');    
126      .border-radius(8px);
127  }
128  
129  
130  
131  .dapp-account-list {
132      @dappPaddingVertical:  @gridHeight * 0.5;
133      @dappPaddinghorizontal:  @gridWidth * 1.5;
134  
135      // flex-grow: 2;
136      list-style-type: none;
137      overflow: auto;
138      padding-left: 0;
139      .dapp-vertical-menu;
140  
141      li {
142          padding: @dappPaddingVertical/2 0;
143          padding-left: @dappPaddinghorizontal;
144          min-height: @gridHeight * 2.5;
145          position: relative;
146          overflow: hidden;
147          font-family: @fontFamily;
148  
149  
150          button.selected {
151              min-height: @gridHeight * 2;
152              border-left: 3px solid @colorLink;
153  
154              .dapp-identicon {
155                  margin-top: -2px;
156                  margin-left: -2px; 
157                  border: 2px solid @colorGray;
158                  width: 36px;
159                  height: 36px;
160              }
161  
162              figure {
163                  position: absolute;
164                  color: @colorWhite;
165                  right: 0;
166                  top: 0;
167                  font-size: 160%;
168                  z-index: 10;
169                  bottom: 0;
170                  text-align: center;
171                  padding-top: 4px;
172                  padding: 9px 10px;
173                  background: linear-gradient(to right, transparent, @colorLink 50%);
174              }
175          }
176  
177          button {
178              position: relative;
179              display: block;
180              display: flex;
181              flex-direction: column;
182              justify-content: center;
183              padding: @dappPaddingVertical/2 0;
184              padding-left: @dappPaddinghorizontal;
185              margin: -@dappPaddingVertical/2 0;
186              margin-left: -@dappPaddinghorizontal;
187              width: 100%;
188              height: 100%;
189              min-height: @gridHeight * 2;
190              font-family: @fontFamily;
191              text-align: left;
192              border-left-color: @colorGray;
193              border-left-style: solid;
194              outline: none;
195              .transition(border 0.25s);
196  
197              &:focus {
198                  border-bottom: none !important;                
199              }
200  
201              &:hover {
202                  border-left-width: 6px;
203                  border-bottom: none !important;                
204              }
205  
206              &:active {
207                  transform: scale(1) !important;
208              }
209  
210          }
211  
212          .dapp-identicon {
213              position: absolute;
214              top: @gridHeight/3;
215              left: @gridWidth/4;
216          }
217  
218          h3 {
219              .dapp-shorten-text;
220              display: block;
221              padding: 0;
222              margin: 0;
223              color: @colorLink;
224              text-transform: none;
225              font-weight: 400;
226              font-size: 90%;
227              text-shadow: #fff 0 1px 0;
228          }
229  
230          h3 + span {
231              // position: relative;
232              // top: -0.25 * @gridHeight;
233              white-space: nowrap;
234              overflow: hidden;
235              text-overflow: ellipsis;
236              font-size: 75%;
237              opacity: 0.5;
238              color: @colorTextSecondary;
239          }
240      }
241  }
242  
243  
244  .dapp-modal-buttons {
245      .display(flex);
246      .justify-content(flex-end);
247      
248      margin: @gridHeight @gridWidth 0;
249  
250      button, a, a:visited {
251          .flex(0 0 auto);
252          font-size: 1.1em;
253          max-width: none;
254          margin: @defaultPaddingVertical @defaultPaddingHorizontal;
255          font-weight: 300;
256  
257          &.dapp-primary-button {
258              font-weight: 500;
259          }
260  
261          &:last-child {
262              margin-right: 0;
263          }
264      }
265  }
266  
267  
268  // default elements
269  
270  a,
271  a:visited,
272  button {
273      text-decoration: none;
274      color: @colorLink;
275  
276      outline: 0;
277  
278      &:hover,
279      &:focus {
280          outline: 0;
281      }
282      &:focus {
283          border-bottom: 1px dotted @colorLink;
284      }
285      &:active {
286          .scale(0.95);
287          border-bottom: 0;
288      }
289  }
290  button {
291      .dapp-button-reset;
292      font-weight: inherit;
293  }
294  
295  hr {
296      border: 0;
297      height: 0;
298      margin: @defaultMargin*2 0;
299      background-color: transparent;
300      border-bottom: 1px solid @colorGray; 
301  }
302  
303  h1, h2, h3, h4 {
304      clear: both;
305  }
306  
307  h1 {
308      margin: @defaultMargin 0;
309      margin-bottom: @defaultMargin*3;
310      font-weight: 100;
311      font-size: 2.2em;
312      line-height: 1.4em;
313      color: @colorTextSecondary;
314  
315      span {
316          font-weight: 500;
317      }
318  
319      + h2{
320          margin-top: 0;
321      }
322      + p {
323          margin-top: -@defaultMargin*2;
324      }
325  
326      strong {
327          font-weight: 400;
328      }
329  }
330  
331  h2 {
332      display: inline-block;
333      padding: 0 @defaultPaddingHorizontal/4;
334      padding-bottom: 1px;
335      margin: @defaultMargin*3 0;
336      font-size: 1em;
337      text-transform: uppercase;
338      background: @colorTextSecondary;
339      color: @colorWhite;
340  
341      font-family: 'Montserrat';
342      font-weight: 400;
343  
344      + table {
345          margin-top: 0;
346      }
347  }
348  
349  h3 {
350      margin: @defaultMargin 0;
351      padding: 0;
352      color: fadeout(@colorTextSecondary, 30%);
353      text-transform: uppercase;
354      font-weight: 500;
355      font-size: 1em;
356  }
357  
358  h4 {
359      margin: @defaultMargin 0;
360      padding: 0;
361      color: fadeout(@colorTextSecondary, 30%);
362      font-weight: 500;
363      font-size: 1em;
364  }
365  
366  pre,
367  code {
368      .dapp-overflow;
369      word-break: break-word;
370      padding: @defaultPaddingVertical/2;
371      background-color: @colorGrayLight;
372      font-size: 0.8em;
373      text-align: left;
374  }
375  
376  
377  table {
378      width: 100%;
379      margin: @defaultMargin 0;
380  
381      &.dapp-zebra {
382          tbody {
383              tr {
384                  &:nth-child(odd) {
385                      background-color: fadeout(@colorGray, 70%);
386                  }
387              }
388          }
389          thead + tbody {
390              tr {
391                  &:nth-child(even) {
392                      background-color: fadeout(@colorGray, 70%);
393                  }
394              }
395          }
396      }
397  
398      &.dapp-small {
399          td {
400              padding: @defaultPaddingVertical/2 @defaultPaddingHorizontal/4;
401              font-size: 0.8em;
402          }
403      }
404  
405      + h2,
406      + h3 {
407          margin-top: @defaultMargin*2;
408      }
409  
410      td {
411          padding: @defaultPaddingVertical @defaultPaddingHorizontal/2;
412  
413          h2 {
414              margin: 0;
415              padding: 0;
416              background-color: transparent;
417              color: @colorTextSecondary;
418              text-transform: none;
419              font-style: normal;
420          }
421          p {
422              padding-top: @defaultMargin/2;
423              margin: 0;
424              font-size: 0.9em;
425          }
426      }
427  
428      thead {
429          background-color: @colorTextSecondary;
430          color: @colorWhite;
431          text-transform: uppercase;
432      }
433  }
434  
435  
436  // OVERWRITES for elements from the ethereum:elements package
437  .dapp-input {
438      border: 0;
439      border-bottom: solid 2px @colorGray;
440      background-color: @colorGrayLight;
441      color: @colorLink;
442      .transition(opacity 1s);
443  
444      .placeholder(@colorGray);
445  
446      &:disabled {
447          color: @colorGrayDark;
448          opacity: 0.25;
449      }
450  
451      &.dapp-tiny {
452          font-size: 0.6em;
453          border-bottom-width: 1px; 
454      }
455      &.dapp-small {
456          font-size: 0.8em;
457      }
458      &.dapp-large {
459          font-size: 1.5em;
460      }
461  
462      &:invalid,
463      &.dapp-error {
464          color: @colorError;
465          background: fadeout(@colorError, 90%);
466          border-color: fadeout(@colorError, 85%);
467      }
468  }
469  
470  .dapp-address-input {
471      input {
472          .dapp-input;
473          
474      }
475  }
476  
477  // forms
478  input,
479  select,
480  textarea {
481      .dapp-input;
482      display: inline-block;
483      width: 300px;
484      max-width: 100%;
485      margin-top: @gridHeight;
486      padding: @defaultPaddingVertical/2 @defaultPaddingHorizontal/2;
487      padding-bottom: @defaultPaddingVertical/3;
488      .box-sizing(border-box);
489      .border-radius(0);
490      font-size: 1em;
491      font-weight: 300;
492  
493      &:focus {
494          outline: 0;
495          border-color: @colorLink;
496      }
497  }
498  
499  h1 + input,
500  h1 + select,
501  h1 + textarea,
502  h2 + input,
503  h2 + select,
504  h2 + textarea,
505  h3 + input,
506  h3 + select,
507  h3 + textarea,
508  h4 + input,
509  h4 + select,
510  h4 + textarea {
511      margin-top: 0;
512  }
513  
514  :disabled {
515      color: @colorGrayDark;
516      // background-color: @colorGrayLight;
517  }
518  input[type="checkbox"], input[type="radio"] {
519      display: inline-block;
520      position: relative;
521      margin: 0;
522      outline: none !important;
523      -webkit-appearance: none;
524      
525      width: auto;
526  
527      width:  24px;
528      height: 24px;
529  
530      // Radio
531      &::before {
532          content: '';
533          position: relative;
534          top:  0;
535          left: 0;
536          display: block;
537  
538          background: @colorGrayLight;
539          border: 1px solid @colorGrayLight;
540          .box-shadow(inset 0 0 2px rgba(0,0,0,0.2));
541          // .dapp-shadow-medium;
542  
543          width:  24px;
544          height: 24px;
545      }
546  
547      &:active::before {
548          // .dapp-shadow-medium;
549      }
550  
551      &:focus::before {
552          border-color: fadeout(@colorLink, 60%);
553          // .dapp-shadow-medium;
554      }
555      &:disabled::before {
556          cursor: not-allowed;
557          background-color: fadeout(@colorGrayLight, 20%);
558          border-color: @colorGrayLight;
559      }
560  
561  
562      // Radio Pip
563      &:after {
564          content: '';
565          display: inline-block;
566          position: absolute;
567          top: 6px;
568          left: 6px;
569  
570          background: @colorLink;
571          .dapp-shadow-small;
572  
573          width:  12px;
574          height: 12px;
575  
576          .transition(transform @animationSpeed);
577          .scale(0);
578      }
579  
580      &:checked:after {
581          .scale(1);
582      }
583  
584      &:disabled:after {
585          background: fadeout(@colorLink, 60%);
586      }
587  }
588  
589  input[type="radio"] {
590      .border-radius(50%);
591      
592      &:before {
593          .border-radius(50%);
594      }
595      &:after {
596          .border-radius(50%);
597      }
598  }
599  input[type="range"] {
600      -webkit-appearance: none;
601      padding: 0;
602      border: 0;
603      background-color: transparent;
604  
605      &::-webkit-slider-runnable-track {
606          height: 5px;
607          background-color: @colorGray;
608          border: none;
609          .border-radius(3px);
610      }
611  
612      &::-webkit-slider-thumb {
613          -webkit-appearance: none;
614          border: none;
615          height: 16px;
616          width: 16px;
617          border-radius: 50%;
618          background-color: @colorGrayDark;
619          margin-top: -6px;
620      }
621  
622      &:focus {
623          outline: none;
624      }
625  
626      &:focus::-webkit-slider-thumb {
627          background-color: @colorLink;
628      }
629  
630      &::-moz-range-track {
631          // width: 300px;
632          height: 5px;
633          background-color: @colorGray;
634          border: none;
635          .border-radius(3px);
636      }
637  
638      &::-moz-range-thumb {
639          -webkit-appearance: none;
640          border: none;
641          height: 16px;
642          width: 16px;
643          border-radius: 50%;
644          background-color: @colorGrayDark;
645          margin-top: -4px;
646      }
647  
648      &:focus {
649          outline: none;
650      }
651  
652      &:focus::-moz-range-thumb {
653          background-color: @colorLink;
654      }
655  }
656  
657  label {
658      font-weight: 300;
659  }
660  fieldset {
661      border: 0;
662      padding: 0;
663      margin: @defaultMargin;
664  }
665  select {
666      height: 45px;
667  }
668  
669  // turns radio buttons in segmented controls
670  .dapp-segmented-control {
671      .display(flex);
672  
673      &.dapp-small {
674          label {
675              padding: @defaultPaddingVertical/2 @defaultPaddingHorizontal/2;
676              font-size: 0.8em;
677          }
678      }
679  
680      input {
681          display: none;
682      }
683  
684      label {
685          .flex(1);
686          color: @colorLink;
687          background: @colorGrayLight;
688          padding: @defaultPaddingVertical @defaultPaddingHorizontal;
689          margin: 1px;
690          text-align: center;
691          text-transform: uppercase;
692          font-weight: 400;
693          border-right-width: 0;
694          cursor: pointer;
695          .transition(background-color @animationSpeed/2);
696  
697          &:nth-child(2) {
698              .border-radius(4px 0 0 4px);
699          }        
700  
701          &:last-child {
702              border-right-width: 1px;
703              .border-radius(0 4px 4px 0);
704          }
705      }
706  
707      input:checked + label {
708          background: @colorGray;
709          border-color: @colorGray;
710          color: @colorGrayDark;
711      }
712  
713  
714  }