HR/CryptoSync

View on GitHub
static/style/menubar.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}@keyframes spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}section#menubar{min-height:100%;position:relative;background-color:#FFFFFF;overflow:hidden}header{clear:both;padding:.4rem 0 .4rem .8rem;margin:0;font-size:.8rem;border-top:1px solid #DDDDDD;border-bottom:1px solid #DDDDDD}.left{-webkit-align-self:flex-start;align-self:flex-start !important}.right{margin-left:auto !important}div.fileList{height:12.6rem;width:100%;overflow-y:auto;margin-bottom:2.4rem}.spin{width:1.2rem;z-index:0;-webkit-animation:spin 4s linear infinite;animation:spin 4s linear infinite}div.content,div.type{display:inline-block;position:relative}div.content{width:80%;vertical-align:top;margin-left:.4rem}div.name{font-size:.8rem;text-overflow:ellipsis;position:relative;overflow:hidden;width:95%}div.lastSynced{font-size:.6rem}div.cloudType{position:absolute;bottom:-1px;right:-4px}div.cloudType>img{height:.8rem;width:auto;opacity:1}img.fileType{width:1.4rem;padding-left:.8rem;margin:0}div.item{width:100%;border-top:1px solid #DDDDDD;padding:.4rem 0}div.status{display:flex;display:-webkit-flex;align-items:center;left:0;bottom:0}div.status>span{font-size:.9rem}div.head{display:flex;display:-webkit-flex;align-items:center}div.status>img{margin-right:.4rem !important}footer{display:flex;clear:both;position:absolute;border-top:1px solid #DDDDDD;width:100%;padding-bottom:0;background-color:#FFFFFF;bottom:0;left:0}img.icon{height:1.2rem;display:inline;margin:.6rem .8rem}div.item:first-child{border-top:none !important}