HR/CryptoSync

// out: ./masterpassprompt.css, compress: true
/*
     MasterPassPrompt styles
     ==========================================================================
*/
@import (less) "mixins.less";

/* Variable declarations*/
@invalid-color: #9F3A38;

/* Section styles */
header {
  margin: 0;
}
header > p {
  color: @blacker;
}
h1 {
  font-size    : 1.4rem;
  margin-bottom: 0.1rem;
}
p {
  margin: 0;
}
a {
  font-size      : 0.8rem;
  color          : @blacker;
  text-decoration: none;
  outline        : none;
}
#masterpassprompt {
  height          : 100%;
  min-height      : 20rem;
  width           : 100%;
  background-color: @white;
  text-align      : center;
  overflow        : hidden;
}
#vault {
  width : 7rem;
  height: auto;
  margin: 2rem auto 0;
}
.panel-container {
  position: relative;
}
.panel-container > div {
  display   : block;
  position  : absolute;
  text-align: center;
  padding   : 0 3rem 3rem;
  transform : translateX(-100%);
  transition: transform 0.3s;
}
.panel-container > div.current ~ div {
  transform: translateX(100%);
}
.panel-container > div.current {
  transform: none;
  position : relative;
}
p.info {
  display         : block;
  width           : 100%;
  box-sizing      : border-box;
  max-height      : 0;
  overflow        : hidden;
  padding         : 0 0.5rem;
  transition      : max-height 0.3s, padding 0.3s;
  background-color: #efefef;
  font-size       : 0.8rem;
}
img.info {
  float : right;
  height: 0.9rem;
}
img.info:hover + p.info {
  max-height    : 10rem;
  padding-top   : 0.5rem;
  padding-bottom: 0.5rem;
}
div.masterpass > input {
  width: 98%;
}
input[type=password] {
  margin-top   : 1rem;
  border       : none;
  border-bottom: 1px solid @light;
  outline      : none;
  &:focus {
    animation-name    : colorTrans;
    animation-duration: 2s;
    border-bottom     : 1px solid @black;
  }
}
.invalid {
  border-color: @invalid-color !important;
}
a.back {
  float: left;
}
a.back >img {
  height: 1rem;
  width : auto;
}
div.forgotMP {
  padding   : 0.2rem 0.2rem 0 0;
  text-align: right;
}
input[type=submit] {
  margin-top      : 1rem;
  height          : 2rem;
  font-weight     : normal;
  background-color: @white;
  border          : 1px solid @light;
  width           : 100%;
  outline         : none;
  &:active,
  &:hover {
    background-color: @light;
  }
}
div.submit {
  text-align      : right;
  background-color: @white;
  width           : 100%;
}
footer {
  display         : flex;
  clear           : both;
  position        : absolute;
  border-top      : 1px solid @light;
  width           : 100%;
  padding-bottom  : 0;
  background-color: @white;
  bottom          : 0;
  left            : 0;
}
footer > a {
  float  : right;
  padding: 0.2rem;
}
a.back {
  float: left;
}
a.back >img {
  height: 1rem;
  width : auto;
}

/* INVALID STYLING */
div.masterpass > label {
  display  : inline-block;
  font-size: 0.8rem;
  margin   : 0.2rem 0;
  color    : @invalid-color;
}