HR/CryptoSync

// out: ./mixins.css, compress: true
@import (css) "../../bower_components/normalize-css/normalize.css";

/* theme colors */
@white: #FFFFFF;
@light: #DDDDDD;
@dark: #9D9D9D;
@darker: #555555;
@black: #333333;
@blacker: #222222;
@invalid-color: #F05A5C;
@orange: #EEA849;
@orange_d: #F46B45;

/* Animations */
@keyframes colorTrans {
  from {
    border-bottom: 1px solid @light;
  }
  to {
    border-bottom: 1px solid @black;
  }
}

/* General (shared) styles */
body {
  font-family     : "Roboto", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, "Lucida Grande", sans-serif;
  font-weight     : 300;
  margin          : 0;
  padding         : 0;
  background-color: @white;
  width           : 100%;
  height          : 100vh;
  overflow        : hidden;
}
p {
  margin: 0;
}
div.none {
  display: none;
}
.left {
  -webkit-align-self: flex-start;
  align-self        : flex-start !important;
}
.right {
  margin-left: auto !important;
}
button, .button {
  background-color: @white;
  border          : 1px solid @light;
  width           : 100%;
  padding         : 0.3rem;
  font-weight     : 400;
  outline         : none;
  &:active,
  &:hover {
    background-color: @light;
  }
}
button.fancy {
  margin-top     : 0.2rem;
  border         : none;
  color          : @white;
  width          : 30% !important;
  background     : linear-gradient(to right, @orange, @orange_d);
  background-size: 200% 200%;
  animation      : OrangeAnimGrad 3s ease infinite;
  &:active,
  &:hover {
    opacity: 0.8;
  }
}
img.info {
  padding-left: 0.2rem;
  height      : 0.8rem;
}
p.info {
  display         : block;
  width           : 100%;
  box-sizing      : border-box;
  max-height      : 0;
  overflow        : hidden;
  transition      : max-height 0.5s, padding 0.3s;
  background-color: @light;
  font-size       : 0.8rem;
}
img.info:hover + p.info {
  max-height: 100%;
  padding   : 0.2rem;
}

/* Page transitions */
.moveUp-enter {
  transition-duration       : 0.3s;
  transition-property       : transform, opacity;
  transition-timing-function: ease-out;
  transform                 : translate3d(0,100%,0);
  z-index                   : 10000;
}
.moveUp-enter.moveUp-enter-active {
  transform: translate3d(0,0,0);
}
.moveUp-leave {
  transition-duration       : 0.3s;
  transition-property       : transform, opacity;
  transition-timing-function: ease-out;
  transform                 : translate3d(0,0,0);
  opacity                   : 1;
}
.moveUp-leave.moveUp-leave-active {
  transform: translate3d(0,-15%,0);
  opacity  : 0.3;
}

/* font declarations */
@font-face {
  font-family: 'Roboto';
  src        : url('../fonts/Roboto-Italic.eot');
  src        : url('../fonts/Roboto-Italic.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Italic.woff') format('woff'), url('../fonts/Roboto-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style : italic;
}
@font-face {
  font-family: 'Roboto';
  src        : url('../fonts/Roboto-BlackItalic.eot');
  src        : url('../fonts/Roboto-BlackItalic.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-BlackItalic.woff') format('woff'), url('../fonts/Roboto-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style : italic;
}
@font-face {
  font-family: 'Roboto';
  src        : url('../fonts/Roboto-Bold.eot');
  src        : url('../fonts/Roboto-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Bold.woff') format('woff'), url('../fonts/Roboto-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style : normal;
}
@font-face {
  font-family: 'Roboto';
  src        : url('../fonts/Roboto-Thin.eot');
  src        : url('../fonts/Roboto-Thin.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Thin.woff') format('woff'), url('../fonts/Roboto-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style : normal;
}
@font-face {
  font-family: 'Roboto';
  src        : url('../fonts/Roboto-Medium.eot');
  src        : url('../fonts/Roboto-Medium.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Medium.woff') format('woff'), url('../fonts/Roboto-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style : normal;
}
@font-face {
  font-family: 'Roboto';
  src        : url('../fonts/Roboto-Light.eot');
  src        : url('../fonts/Roboto-Light.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Light.woff') format('woff'), url('../fonts/Roboto-Light.ttf') format('truetype');
  font-weight: 300;
  font-style : normal;
}
@font-face {
  font-family: 'Roboto';
  src        : url('../fonts/Roboto-Regular.eot');
  src        : url('../fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Regular.woff') format('woff'), url('../fonts/Roboto-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style : normal;
}
@font-face {
  font-family: 'Roboto';
  src        : url('../fonts/Roboto-ThinItalic.eot');
  src        : url('../fonts/Roboto-ThinItalic.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-ThinItalic.woff') format('woff'), url('../fonts/Roboto-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style : italic;
}
@font-face {
  font-family: 'Roboto';
  src        : url('../fonts/Roboto-BoldItalic.eot');
  src        : url('../fonts/Roboto-BoldItalic.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-BoldItalic.woff') format('woff'), url('../fonts/Roboto-BoldItalic.ttf') format('truetype');
  font-weight: bold;
  font-style : italic;
}
@font-face {
  font-family: 'Roboto';
  src        : url('../fonts/Roboto-Black.eot');
  src        : url('../fonts/Roboto-Black.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Black.woff') format('woff'), url('../fonts/Roboto-Black.ttf') format('truetype');
  font-weight: 900;
  font-style : normal;
}
@font-face {
  font-family: 'Roboto';
  src        : url('../fonts/Roboto-MediumItalic.eot');
  src        : url('../fonts/Roboto-MediumItalic.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-MediumItalic.woff') format('woff'), url('../fonts/Roboto-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style : italic;
}
@font-face {
  font-family: 'Roboto';
  src        : url('../fonts/Roboto-LightItalic.eot');
  src        : url('../fonts/Roboto-LightItalic.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-LightItalic.woff') format('woff'), url('../fonts/Roboto-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style : italic;
}