2020-05-27 14:36:04 -07:00
|
|
|
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}.App{text-align:center}.attachment-full{height:149px}.attachment-full,.githubLabel{position:absolute;right:0;width:149px}.githubLabel{background-color:#00293c;border:none;height:0;margin-top:-10px}@media (orientation:portrait){.attachment-full{height:99px;width:99px}.githubLabel{width:99px}}@media (orientation:landscape) and (max-height:400px){.attachment-full{height:99px;width:99px}.githubLabel{width:99px}}:root{--global-first-color:#756d58;--global-second-color:#586075;--global-third-color:#607558;--global-fourth-color:#6d5875;--global-black-color:#333}#drum-machine{background:var(--global-first-color);height:100vh;width:100%;overflow:hidden}#display,#drum-machine{display:flex;flex-direction:column}#display{background-color:var(--global-second-color);margin:auto;height:70vh;min-height:400px;width:80vw;border-radius:1rem}#display-bottom,#display-top{flex-basis:19%;width:100%}#display-top{display:flex;flex-direction:column;justify-content:center;text-align:center;font-size:x-large;font-style:oblique}#display-top p{height:10px;margin-top:0}#menuToolTip{position:relative;left:10px;top:20px;background-color:var(--global-first-color);max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content;padding:0 10px;font-size:x-large;font-style:oblique;border-color:#000!important;border-width:2px!important;border-style:solid;border-radius:6px;text-align:center}@media (orientation:landscape) and (max-width:1520px){#display{width:90vw}}@media (orientation:landscape) and (max-width:1258px){#display{width:99vw}}@media (orientation:portrait){#display{margin:auto;height:90vh;width:95vw;min-width:unset;min-height:unset}#display-top{flex-basis:12%;font-size:x-large}#display-bottom{flex-basis:8%}}@media (orientation:portrait) and (max-device-width:750px){#display-top{font-size:large}}@media (orientation:landscape) and (max-device-width:1024px){#display{height:90vh;width:90vw;min-height:unset}}@media (orientation:landscape) and (max-height:400px){#display-top{font-size:large}}#display-middle{flex-basis:62%;width:100%;display:flex;flex-direction:row;-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;user-select:none}#display-middle-left{flex-basis:55%;display:flex;flex-direction:row}#display-middle-right{flex-basis:45%;display:flex;flex-direction:row}#display-middle-left-a,#display-middle-left-c{flex-basis:5%}#display-middle-left-b{flex-basis:90%;display:flex;flex-direction:row;justify-content:space-around}#display-middle-right-c{flex-basis:12%;min-width:15px}#display-middle-right-e,#display-middle-right-g{flex-basis:5%}#display-middle-right-e{min-width:50px}#display-middle-right-f{flex-basis:20%;display:flex;flex-direction:row}.volumeToolTipContainer{position:relative;width:0;height:0;top:105%;right:25px}.volumeToolTip{background-color:var(--global-first-color);width:50px;font-size:x-large;font-style:oblique;border-color:#000!important;border-width:2px!important;border-style:solid;border-radius:6px;text-align:center}#menuScrollTip{font-size:x-large;height:16px}@media (orientation:portrait){#display-middle{flex-basis:80%;height:100%;width:100%;display:flex;flex-direction:column-reverse;justify-content:space-around}#display-middle-left{flex-basis:unset}#display-middle-right{flex-basis:unset;justify-content:space-around;width:80%;margin-left:auto;margin-right:auto}#display-middle-right-a,#display-middle-right-c,#display-middle-right-e,#display-middle-right-f,#display-middle-right-g,#menuScrollTip,#volumeTip{display:none}}@media (orientation:portrait) and (max-device-width:750px){#display-middle{margin-top:10px}}@media (orientation:landscape) and (max-device-width:1024px){#display-middle-left{flex-basis:65%}#display-middle-right{flex-basis:35%;justify-content:space-around;margin-left:auto;margin-right:auto}
|
