HR/CryptoSync

View on GitHub
static/style/vault.css

Summary

Maintainability
Test Coverage
@import "../../bower_components/normalize-css/normalize.css";@keyframes colorTrans{from{border-bottom:1px solid #DDDDDD}to{border-bottom:1px solid #333333}}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:#FFFFFF;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:#FFFFFF;border:1px solid #DDDDDD;width:100%;padding:.3rem;font-weight:400;outline:none}button:active,.button:active,button:hover,.button:hover{background-color:#DDDDDD}button.fancy{margin-top:.2rem;border:none;color:#FFFFFF;width:30% !important;background:linear-gradient(to right, #EEA849, #F46B45);background-size:200% 200%;animation:OrangeAnimGrad 3s ease infinite}button.fancy:active,button.fancy:hover{opacity:.8}img.info{padding-left:.2rem;height:.8rem}p.info{display:block;width:100%;box-sizing:border-box;max-height:0;overflow:hidden;transition:max-height .5s,padding .3s;background-color:#DDDDDD;font-size:.8rem}img.info:hover+p.info{max-height:100%;padding:.2rem}.moveUp-enter{transition-duration:.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:.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:.3}@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}h3{margin:.5rem 0;font-weight:normal}p{margin:0}input[type=text]{border:none;border-bottom:1px solid #DDDDDD;outline:none;vertical-align:top}input[type=text]:focus{animation-name:colorTrans;animation-duration:2s;border-bottom:1px solid #333333}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 #DDDDDD}header.top a>img.icon{padding-left:.5rem}header.top img.icon{padding:.5rem}header.top button{height:2rem;width:2rem;background-size:1.2rem !important}div.segment{flex:1;border-left:1px solid #DDDDDD}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%}div#accounts .selected{border-left:2px solid #F46B45}div#accounts .row{width:inherit;align-items:center;border-bottom:1px solid #DDDDDD;padding:.4rem 0 .4rem .4rem;text-align:left}div#accounts .content{width:90%;position:relative;vertical-align:100%}div#accounts .type{width:2.16rem;position:relative;float:left}div#accounts .name{font-weight:normal;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}div#accounts .email{font-size:.6rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}div#accounts .cloudType{position:absolute;bottom:-0.18rem;left:1.08rem}div#accounts .cloudType>img{height:.72rem;width:auto}div#accounts .profile{width:1.8rem;height:1.8rem;margin:0;border-radius:50%;background-position:center center !important;background-size:1.8rem 1.8rem !important}div#files{height:100vh;flex:1.2;width:100%}div#files header{padding:.2rem 0 .2rem .8rem;background-color:#DDDDDD}div#files header h4{margin:0;font-size:.8rem;font-weight:normal}div#files div.table{width:100%;max-height:100%;overflow-y:auto}div#files .selected{border-left:2px solid #F46B45}div#files .row{flex-direction:column;border-bottom:1px solid #DDDDDD;padding:.4rem .4rem .4rem .8rem;text-align:left}div#files .name{font-weight:normal;font-size:.8rem}div#files .lastMod{font-size:.6rem}div#files input[type=text]{width:90%;margin:.5rem;font-size:.8rem;background:url('../images/icons/search.svg') left center no-repeat;background-size:.8rem}div#files input[type=text]:focus{background:none}div#files input[type=text]:focus::-webkit-input-placeholder::before{content:'Search files\A'}div#info{height:90vh;flex:1.8;display:flex;flex-direction:column;background-color:#fefefe}div#info #content{flex:1;margin:1rem}div#info #content table{font-size:.7rem}div#info #content table tr{margin-top:.4rem;display:inline-block}div#info #content table tr .bttline{vertical-align:inherit}div#info #content table tr td{vertical-align:top}div#info #content table tr td input[type="text"]{width:80%}div#info #content table tr td a>img{height:1rem;margin-left:.1rem}div#info #content table tr td:first-child{text-align:right;color:#7e7e7e}div#info #content table tr td:last-child{text-align:left;padding-left:.2rem}img.icon{width:auto;height:1.4rem}footer{display:flex;border-top:1px solid #DDDDDD;width:100%}footer button{height:1rem;margin:.2rem .8rem .2rem 0}footer a>img{height:1rem;margin:.2rem .4rem .2rem 0}@keyframes colorTrans{from{border-bottom:1px solid #DDDDDD}to{border-bottom:1px solid #333333}}