HR/CryptoSync

// out: ./vault.css, compress: true
/* Menubar styles

TODO:
- FIX header
- USE
    width: @var;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
to add "..." to overflow text

- USE flex for footer throughout

==========================================================================
*/
@import (less) "mixins.less";
@lighter: #fefefe;
/*@light * 1.1111*/
@accounts-txt-width: 5rem;
@border-width: 2px;
@side-margin: 0.8rem;
@name-fsize: 1rem;
@header-fsize: 1rem;
@spacing04: 0.4rem;
@spacing08: 0.8rem;
@spacing-ic-txt: @side-margin - 0.4rem;
@lastMod-fsize: 0.8rem;
@ic-size: 1.4rem;
@profile-size: 1.8rem;
@name-fsize: 0.8rem;
@win-height: 100%;
h3 {
  margin: 0.5rem 0;
  font-weight: normal;
}
p {
  margin: 0;
}
input[type=text] {
  border: none;
  border-bottom: 1px solid @light;
  outline: none;
  vertical-align: top;
  &:focus {
    animation-name: colorTrans;
    animation-duration: 2s;
    border-bottom: 1px solid @black;
  }
}
section#vault {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.left {
  -webkit-align-self: flex-start;
  align-self: flex-start;
}
.right {
  margin-left: auto;
}
div.main {
  width: 100% !important;
  display: flex;
  margin: auto;
}
.centre {
  width: 100% !important;
  margin: auto;
  position: absolute;
}
header.top {
  display: flex;
  position: relative;
  height: 2.4rem;
  width: 100%;
  border-bottom: 1px solid @light;
  a > img.icon {
    padding-left: 0.5rem;
  }
  img.icon {
    padding: 0.5rem;
  }
  button {
    height: 2rem;
    width: 2rem;
    background-size: 1.2rem !important;
  }
}
div.segment {
  flex: 1;
  border-left: 1px solid @light;
}
div.row:last-child {
  border-bottom: none !important;
}
div.row:only-child {
  border: none !important;
}
div.row {
  display: block;
}
div#accounts {
  height: 100vh;
  flex: 1;
  width: 100%;
  .selected {
    border-left: 2px solid @orange_d;
  }
  .row {
    width: inherit;
    align-items: center;
    border-bottom: 1px solid @light;
    padding: @spacing04 0 @spacing04 @spacing04;
    text-align: left;
  }
  .content {
    width: 90%;
    position: relative;
    vertical-align: 100%;
  }

  .type {
    width: @profile-size * 1.2;
    position: relative;
    float: left;
  }
  .content,
  .type {

  }

  .name {
    font-weight: normal;
    font-size: @name-fsize;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .email {
    font-size: @name-fsize - 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cloudType {
    position: absolute;
    bottom: -(@profile-size * 0.1);
    left: (@profile-size * 0.6);
  }
  .cloudType > img {
    height: @profile-size * 0.4;
    width: auto;
  }
  .profile {
    width: @profile-size;
    height: @profile-size;
    margin: 0;
    border-radius: 50%;
    background-position: center center !important;
    background-size: @profile-size @profile-size !important;
  }
}
div#files {
  height: 100vh;
  flex: 1.2;
  width: 100%;
  header {
    padding: 0.2rem 0 0.2rem 0.8rem;
    background-color: @light;
    h4 {
      margin: 0;
      font-size: 0.8rem;
      font-weight: normal;
    }
  }
  div.table {
    width: 100%;
    max-height: @win-height;
    overflow-y: auto;
  }
  .selected {
    border-left: 2px solid @orange_d;
  }
  .row {
    flex-direction: column;
    border-bottom: 1px solid @light;
    padding: @spacing04 @spacing04 @spacing04 @spacing08;
    text-align: left;
  }
  .name {
    font-weight: normal;
    font-size: 0.8rem;
  }
  .lastMod {
    font-size: 0.6rem;
  }
  input[type=text] {
    width: 90%;
    margin: 0.5rem;
    font-size: 0.8rem;
    background: url('../images/icons/search.svg') left center no-repeat;
    background-size: 0.8rem;

    &:focus {
      background: none;
    }
    &:focus::-webkit-input-placeholder::before {
      content: 'Search files\A';
    }
  }
}
div#info {
  height: 90vh;
  flex: 1.8;
  display: flex;
  flex-direction: column;
  background-color: @lighter;
  #content {
    flex: 1;
    margin: 1rem;
    table {
      font-size: 0.7rem;
      tr {
        margin-top: 0.4rem;
        display: inline-block;
        .bttline {
          vertical-align: inherit;
        }
        td {
          vertical-align: top;
          input[type="text"] {
            width: 80%;
          }
          a > img {
            height: 1rem;
            margin-left: 0.1rem;
          }
        }
        td:first-child {
          text-align: right;
          color: @dark * 0.8;
        }
        td:last-child {
          text-align: left;
          padding-left: 0.2rem;
        }
      }
    }
  }
}
img.icon {
  width: auto;
  height: @ic-size;
}
footer {
  display: flex;
  border-top: 1px solid @light;
  width: 100%;
  button {
    height: 1rem;
    margin: 0.2rem 0.8rem 0.2rem 0;
  }
  a > img {
    height: 1rem;
    margin: 0.2rem 0.4rem 0.2rem 0rem;
  }
}
@keyframes colorTrans {
  from {
    border-bottom: 1px solid @light;
  }
  to {
    border-bottom: 1px solid @black;
  }
}