body{margin:0;padding:0;font-family:Trebuchet MS,Times New Roman,Helvetica,Hiragino Sans GB,Microsoft Yahei,\\5FAE\8F6F\96C5\9ED1,Arial,sans-serif}.App{text-align:center}.chord-svg{width:200px;height:220px}.chord-rect{width:100px;height:100px}.chord-gird,.chord-rect{fill:none;stroke:#666;stroke-width:2}.chord-blank-circle,.chord-forbidden{stroke:#666;stroke-width:1;fill:none}.chord-block-circle{fill:#333}.chord-barre{height:16px;fill:#333}.chord-barre-fret{fill:#333;font-size:14px;font-weight:700}.chord-string-key{fill:#333;font-size:10px;font-weight:700}.chord-name{fill:#333;font-size:20px;font-weight:700}@-webkit-keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@media screen and (max-width:700px){.chord-svg{width:140px;height:155px}}@media screen and (max-width:320px){.chord-svg{width:120px;height:135px}}.container-chordSelect,.square{width:100%}.square:after{content:"";display:block;padding-top:100%}.key-select{width:100%;text-align:center;padding:0 1rem;-webkit-box-sizing:border-box;box-sizing:border-box;margin-top:20px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.key-select .key-num{position:relative;background:transparent;max-width:170px;min-width:70px;min-height:70px;cursor:pointer;-ms-flex:1 1;flex:1 1;-webkit-transition:.3s ease;-o-transition:.3s ease;transition:.3s ease}.key-select .key-num:before{content:"";display:block;position:absolute;left:50%;bottom:0;height:2px;width:80%;background:#ddd;z-index:1;-webkit-transform:translate3d(-50%,0,0);-ms-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}.key-select .key-num:last-of-type{margin-right:0}.key-select .key-num>span{position:absolute;display:inline-block;color:#666;top:50%;left:50%;font-size:40px;-webkit-transform:translate3d(-50%,-50%,0);-ms-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}.key-select .key-num .key-bar{opacity:0;position:absolute;left:20px;bottom:0;width:0;height:0;border-top:10px solid transparent;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #ddd;-webkit-transition:.3s ease;-o-transition:.3s ease;transition:.3s ease}.key-select .key-num .key-bar.keybar-show{opacity:1}.select-notify{line-height:50px;color:#ddd;font-size:13px;text-align:center}.chord-count{width:100%;text-align:center}.chord-count>div{display:inline-block;text-align:center;width:15%;line-height:30px;font-size:13px;min-width:80px;max-width:200px;background:#fff;color:#aaa;margin-right:10px;border-radius:2px;cursor:pointer;-webkit-transition:.3s ease;-o-transition:.3s ease;transition:.3s ease}.chord-count>div:last-of-type{margin-right:0}.chord-count>div.active{background:#ddd;color:#666}.loading-box{opacity:0;margin-top:20px;width:100%;height:20px;background:#fff;text-align:center;-webkit-transition:.3s ease;-o-transition:.3s ease;transition:.3s ease}.loading-box.show{opacity:1;margin:20px 0}.loading-box .loading{height:100%}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.container-chordDraw{padding-bottom:20px}.container-chordDraw .draw-info{opacity:0;line-height:0;font-size:15px;padding:0 20px;color:#aaa;text-align:center;-webkit-transition:.3s ease;-o-transition:.3s ease;transition:.3s ease}.container-chordDraw .draw-info.show{opacity:1;line-height:25px;margin-bottom:10px}
/*# sourceMappingURL=main.f99ad435.css.map*/