2 lines
8.4 KiB
CSS
2 lines
8.4 KiB
CSS
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}#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:landscape) and (max-device-height:767px){#display-middle-left{flex-basis:60%}#display-middle-right{flex-basis:40%}}#drum-pad-grid{margin:auto;background-color:var(--global-third-color);border-radius:1rem;width:54vh;height:45vh;flex-direction:column;padding:0 0 2vh 2vh}#drum-pad-grid,.drum-pad-row{display:flex;justify-content:space-around}.drum-pad-row{height:33%;flex-direction:row}.drum-pad{border-radius:1rem;width:33%;background-color:var(--global-fourth-color);border:#000;border-width:2px;border-style:solid;margin:2vh 2vh 0 0;text-align:center;display:flex;flex-direction:column;justify-content:space-around;font-size:x-large;font-style:oblique}.drum-pad:active{background-color:var(--global-first-color)}.drum-pad>p{margin-top:auto;margin-bottom:auto}.selectionMenu{margin:auto;background-color:var(--global-third-color);border-radius:5px;width:54vh;height:45vh;display:flex;flex-direction:column;flex:1 1;overflow:auto;scrollbar-color:var(--global-black-color) var(--global-second-color);scrollbar-width:thin;padding-top:10px;padding-bottom:10px;direction:rtl}.selectionMenu::-webkit-scrollbar{background-color:var(--global-third-color);border-radius:5px}.selectionMenu::-webkit-scrollbar-thumb{background-color:var(--global-black-color);border-radius:5px}.selectionMenuItem{min-height:-webkit-min-content;min-height:-moz-min-content;min-height:min-content;background-color:var(--global-fourth-color);margin:10px 20px 20px 10px;padding:15px;border-radius:1rem;border-width:2px;border-style:solid;text-align:center;font-style:bold;font-size:1.6rem;direction:ltr}.selectionMenuItem:active{background-color:var(--global-first-color)}.metronomeIcon{color:#1c1c1c}@media (orientation:portrait){#drum-pad-grid{min-width:unset;min-height:unset}#drum-pad-grid,.selectionMenu{width:72vw;height:60vw}.selectionMenuItem{padding:unset}}@media (orientation:portrait) and (max-device-width:767px){#drum-pad-grid,.selectionMenu{width:84vw;height:70vw}}@media (orientation:portrait) and (max-device-width:750px){#drum-pad-grid,.selectionMenu{width:72vw;height:60vw}}@media (orientation:landscape) and (max-device-width:1024px){#drum-pad-grid{min-width:unset;min-height:unset}#drum-pad-grid,.selectionMenu{width:72vh;height:60vh}.selectionMenuItem{padding:unset}}@media (orientation:landscape) and (max-device-height:767px){#drum-pad-grid{min-width:unset;min-height:unset}#drum-pad-grid,.selectionMenu{width:84vh;height:70vh}}#selection-left,#selection-right{flex-basis:12%;display:flex;flex-direction:column;justify-content:space-around}.selection{margin-left:auto;margin-right:auto;width:15vh;min-width:110px;height:12vh;min-height:80px;background-color:var(--global-fourth-color);border-radius:1rem;border-width:2px;border-style:solid;display:flex;flex-direction:row;justify-content:space-around}.selection>p{margin:auto;text-align:center;font-size:large}.selection:active{background-color:var(--global-first-color)}@media (orientation:portrait){#menuScrollTip,#select-volume,#volumeTip{display:none}#selection-left,#selection-right{flex-basis:unset;min-width:unset;justify-content:space-around}.selection{max-height:80px;margin-top:20px;margin-bottom:20px}}@media (orientation:portrait) and (max-device-width:750px){.selection{max-height:40px;margin-top:10px;margin-bottom:10px}}@media (orientation:landscape) and (max-device-width:1024px){#menuScrollTip,#select-volume,#volumeTip{display:none}#selection-left,#selection-right{flex-basis:unset;min-width:unset}}#volume-container{margin:auto;height:300px;width:25px;display:flex;flex-direction:column;justify-content:space-between;font-size:32px}#volume-input-container{height:210px}#volume{-webkit-appearance:none;position:relative;top:75px;left:-95px;width:205px;height:4px;background:var(--global-black-color);-webkit-transform:rotate(270deg);transform:rotate(270deg);border-radius:4px;border:none}#volume:focus{outline:none}#volume::-webkit-slider-thumb{-webkit-appearance:none;height:30px;width:30px;border:none;border-radius:50%;cursor:pointer;background:var(--global-black-color);margin-top:-2px}#volume::-moz-range-thumb{height:30px;width:30px;border:none;border-radius:50%;background:var(--global-black-color);cursor:pointer}.volumeIcon{color:var(--global-black-color)}
|
|
/*# sourceMappingURL=main.427da8b6.chunk.css.map */ |