HR/CryptoSync

View on GitHub
static/style/settings.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{background-color:#FFFFFF;border:1px solid #DDDDDD;width:100%;padding:.3rem;font-weight:400;outline:none}button:active,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}.panel-container{overflow:hidden;position:relative}.panel-container>div:not(.menu){position:absolute;text-align:center;transform:translateX(-110%);transition:transform .5s}.panel-container>div:not(.menu)>button{margin-top:1rem}.panel-container>div.current{width:100%;height:100%;transform:none;position:relative}.panel-container>div.current~div{transform:translateX(110%)}.panel-container header{margin-top:2rem}section#settings{min-height:100%;position:relative;background-color:#FFFFFF}a:not(.navigationLink){font-size:.8rem;color:#222222;text-decoration:none;outline:none}a.navigationLink{font-size:.9rem}.left{-webkit-align-self:flex-start;align-self:flex-start}.right{margin-left:auto}.menu{display:flex;margin-left:0;margin-right:0;border-bottom:2px solid rgba(0,0,0,0.15);align-self:flex-end;transition:color .1s ease}.menu:after{content:'';display:block;height:0;clear:both;visibility:hidden}.menu .item:after{display:none}.menu .item{position:relative;cursor:pointer;line-height:1.4rem;text-decoration:none;-webkit-tap-highlight-color:transparent;-webkit-box-flex:0;flex:0 0 auto;-webkit-user-select:none;user-select:none;padding:.6rem 1.15rem;padding-top:1rem;text-transform:none;color:rgba(0,0,0,0.87);transition:background .1s ease,box-shadow .1s ease,color .1s ease}a.item:active{border-bottom:2px solid rgba(0,0,0,0.1);margin-bottom:-2px}.active.item{background-color:transparent;box-shadow:none;border-color:#333333;font-weight:700;margin-bottom:-2px;color:rgba(0,0,0,0.95)}.menu .active.item{border-bottom:2px solid rgba(0,0,0,0.8);color:rgba(0,0,0,0.95);font-weight:normal;box-shadow:none}.item.right{display:flex;margin-left:auto !important}img.icon{width:1.4rem;height:1.4rem}h3{margin:.5rem 0;font-weight:normal}h4{margin-top:.5rem;margin-bottom:.5rem;font-weight:300;text-align:left;border-bottom:1px solid #DDDDDD}section.category{text-align:left}div.options{margin-left:1rem}div.option{display:flex;margin-top:.2rem;font-size:.8rem}span.config.right{color:#555555}div.list{height:10rem;width:100%;overflow-y:auto}button.add{margin-bottom:2rem}div.item{display:flex;align-items:center;border-bottom:1px solid #DDDDDD;padding:.4rem 0;text-align:left}div.content,div.type{display:inline-block;position:relative}div.content{vertical-align:100%;margin-left:.4rem}div.name{font-weight:400}div.email{font-size:.8rem}div.qouta{font-size:.6rem;margin-top:.1rem;color:#555555}div.cloudType{position:absolute;bottom:2px;right:2px}div.cloudType>img{height:1rem;width:auto}div.profile{width:4rem;height:4rem;margin:0;border-radius:50%;background-position:center center !important;background-size:4rem 4rem !important}section.contribute footer{padding-bottom:1rem;text-align:center;display:flex;align-items:center;font-size:.8rem;justify-content:center}section.contribute footer img{height:1rem !important}section.contribute div.list{width:100%;margin-bottom:3rem;height:100%}section.contribute div.list .item a{cursor:pointer;display:flex;align-items:center;text-align:left}section.contribute div.list .item .name{font-weight:300}section.contribute div.list .item .icon{padding:.4rem}section.contribute{width:70%;margin:auto;margin-top:1rem}section.contribute header{border-bottom:1px solid #DDDDDD}section.contribute header img{height:4rem !important;width:auto}section.accounts{width:70%;margin:auto;margin-top:1rem}section.accounts header{border-bottom:1px solid #DDDDDD}section.accounts header img{height:4rem !important;width:auto}section.crypto{width:90%;margin:auto;margin-top:1rem;margin-bottom:1rem}section.crypto header>img{height:4rem !important;width:auto}section.crypto button{width:20%}section.sync{width:90%;margin:auto;margin-top:1rem;margin-bottom:1rem}section.sync header>img{height:4rem !important;width:auto}section.sync button{width:20%}