diff --git a/drum-machine-react/build/asset-manifest.json b/drum-machine-react/build/asset-manifest.json index 3fb159c..88e0393 100644 --- a/drum-machine-react/build/asset-manifest.json +++ b/drum-machine-react/build/asset-manifest.json @@ -1,6 +1,6 @@ { "files": { - "main.css": "/fcc-challenges/drum-machine-react/build/static/css/main.b8f71121.chunk.css", + "main.css": "/fcc-challenges/drum-machine-react/build/static/css/main.427da8b6.chunk.css", "main.js": "/fcc-challenges/drum-machine-react/build/static/js/main.918fd14d.chunk.js", "main.js.map": "/fcc-challenges/drum-machine-react/build/static/js/main.918fd14d.chunk.js.map", "runtime-main.js": "/fcc-challenges/drum-machine-react/build/static/js/runtime-main.6e36f512.js", @@ -8,15 +8,15 @@ "static/js/2.4bb003c3.chunk.js": "/fcc-challenges/drum-machine-react/build/static/js/2.4bb003c3.chunk.js", "static/js/2.4bb003c3.chunk.js.map": "/fcc-challenges/drum-machine-react/build/static/js/2.4bb003c3.chunk.js.map", "index.html": "/fcc-challenges/drum-machine-react/build/index.html", - "precache-manifest.ab42c899dc151e284d1357ba0a529563.js": "/fcc-challenges/drum-machine-react/build/precache-manifest.ab42c899dc151e284d1357ba0a529563.js", + "precache-manifest.73e0ee33f552dcd6a098b92c86423df5.js": "/fcc-challenges/drum-machine-react/build/precache-manifest.73e0ee33f552dcd6a098b92c86423df5.js", "service-worker.js": "/fcc-challenges/drum-machine-react/build/service-worker.js", - "static/css/main.b8f71121.chunk.css.map": "/fcc-challenges/drum-machine-react/build/static/css/main.b8f71121.chunk.css.map", + "static/css/main.427da8b6.chunk.css.map": "/fcc-challenges/drum-machine-react/build/static/css/main.427da8b6.chunk.css.map", "static/js/2.4bb003c3.chunk.js.LICENSE.txt": "/fcc-challenges/drum-machine-react/build/static/js/2.4bb003c3.chunk.js.LICENSE.txt" }, "entrypoints": [ "static/js/runtime-main.6e36f512.js", "static/js/2.4bb003c3.chunk.js", - "static/css/main.b8f71121.chunk.css", + "static/css/main.427da8b6.chunk.css", "static/js/main.918fd14d.chunk.js" ] } \ No newline at end of file diff --git a/drum-machine-react/build/index.html b/drum-machine-react/build/index.html index 2d11e2f..a8b4459 100644 --- a/drum-machine-react/build/index.html +++ b/drum-machine-react/build/index.html @@ -1 +1 @@ -Drum Machine React - Build a Drum Machine - Front End Libraries Projects
\ No newline at end of file +Drum Machine React - Build a Drum Machine - Front End Libraries Projects
\ No newline at end of file diff --git a/drum-machine-react/build/precache-manifest.ab42c899dc151e284d1357ba0a529563.js b/drum-machine-react/build/precache-manifest.73e0ee33f552dcd6a098b92c86423df5.js similarity index 82% rename from drum-machine-react/build/precache-manifest.ab42c899dc151e284d1357ba0a529563.js rename to drum-machine-react/build/precache-manifest.73e0ee33f552dcd6a098b92c86423df5.js index a2b47a8..2ba425f 100644 --- a/drum-machine-react/build/precache-manifest.ab42c899dc151e284d1357ba0a529563.js +++ b/drum-machine-react/build/precache-manifest.73e0ee33f552dcd6a098b92c86423df5.js @@ -1,11 +1,11 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([ { - "revision": "2da02ffc77e16c34300f260fef06064f", + "revision": "080f32a16b2728653419186920d04ae8", "url": "/fcc-challenges/drum-machine-react/build/index.html" }, { - "revision": "574a193aed7da5eeba28", - "url": "/fcc-challenges/drum-machine-react/build/static/css/main.b8f71121.chunk.css" + "revision": "664c13bacbd4e8857c5d", + "url": "/fcc-challenges/drum-machine-react/build/static/css/main.427da8b6.chunk.css" }, { "revision": "a74eb87d4ecb8678a8f9", @@ -16,7 +16,7 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([ "url": "/fcc-challenges/drum-machine-react/build/static/js/2.4bb003c3.chunk.js.LICENSE.txt" }, { - "revision": "574a193aed7da5eeba28", + "revision": "664c13bacbd4e8857c5d", "url": "/fcc-challenges/drum-machine-react/build/static/js/main.918fd14d.chunk.js" }, { diff --git a/drum-machine-react/build/service-worker.js b/drum-machine-react/build/service-worker.js index 50cd4a7..27076a0 100644 --- a/drum-machine-react/build/service-worker.js +++ b/drum-machine-react/build/service-worker.js @@ -14,7 +14,7 @@ importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js"); importScripts( - "/fcc-challenges/drum-machine-react/build/precache-manifest.ab42c899dc151e284d1357ba0a529563.js" + "/fcc-challenges/drum-machine-react/build/precache-manifest.73e0ee33f552dcd6a098b92c86423df5.js" ); self.addEventListener('message', (event) => { diff --git a/drum-machine-react/build/static/css/main.b8f71121.chunk.css b/drum-machine-react/build/static/css/main.427da8b6.chunk.css similarity index 68% rename from drum-machine-react/build/static/css/main.b8f71121.chunk.css rename to drum-machine-react/build/static/css/main.427da8b6.chunk.css index 30c3bda..17ba79e 100644 --- a/drum-machine-react/build/static/css/main.b8f71121.chunk.css +++ b/drum-machine-react/build/static/css/main.427da8b6.chunk.css @@ -1,2 +1,2 @@ -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}.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.b8f71121.chunk.css.map */ \ No newline at end of file +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 */ \ No newline at end of file diff --git a/drum-machine-react/build/static/css/main.427da8b6.chunk.css.map b/drum-machine-react/build/static/css/main.427da8b6.chunk.css.map new file mode 100644 index 0000000..8590615 --- /dev/null +++ b/drum-machine-react/build/static/css/main.427da8b6.chunk.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["index.css","App.css","globalCss.css","DrumMachine.css","DisplayMiddle.css","DrumPadGrid.css","Selection.css","VolumeContainer.css"],"names":[],"mappings":"AAAA,KACE,QAAS,CACT,mJAEY,CACZ,kCAAmC,CACnC,iCACF,CAEA,KACE,yEAEF,CCZA,KACE,iBACF,CAEA,iBAGE,YAEF,CAEA,8BANE,iBAAkB,CAClB,OAAU,CAEV,WAWF,CARA,aACE,wBAAyB,CACzB,WAAY,CAEZ,QAAW,CAGX,gBACF,CAEA,8BACE,iBACE,WAAY,CACZ,UACF,CAEA,aACE,UACF,CACF,CAEA,sDACE,iBACE,WAAY,CACZ,UACF,CAEA,aACE,UACF,CACF,CCzCA,MACE,4BAA6B,CAC7B,6BAA8B,CAC9B,4BAA6B,CAC7B,6BAA8B,CAC9B,yBACF,CCJA,cACE,oCAAqC,CACrC,YAAa,CACb,UAAW,CACX,eAGF,CAEA,uBAJE,YAAa,CACb,qBAYF,CATA,SACE,2CAA4C,CAC5C,WAAY,CACZ,WAAY,CACZ,gBAAiB,CACjB,UAAW,CACX,kBAGF,CAEA,6BACE,cAAe,CACf,UACF,CAEA,aACE,YAAa,CACb,qBAAsB,CACtB,sBAAuB,CACvB,iBAAkB,CAClB,iBAAkB,CAClB,kBACF,CAEA,eACE,WAAY,CACZ,YACF,CAEA,aACE,iBAAkB,CAClB,SAAU,CACV,QAAS,CACT,0CAA2C,CAC3C,6BAAsB,CAAtB,0BAAsB,CAAtB,qBAAsB,CACtB,cAA0B,CAC1B,iBAAkB,CAClB,kBAAmB,CACnB,2BAA8B,CAC9B,0BAA4B,CAC5B,kBAAmB,CACnB,iBAAkB,CAClB,iBACF,CAEA,sDACE,SACE,UACF,CACF,CAEA,sDACE,SACE,UACF,CACF,CAEA,8BACE,SACE,WAAY,CACZ,WAAY,CACZ,UAAW,CACX,eAAgB,CAChB,gBACF,CAEA,aACE,cAAe,CACf,iBACF,CAEA,gBACE,aACF,CACF,CAEA,2DACE,aACE,eACF,CACF,CAEA,6DACE,SACE,WAAY,CACZ,UAAW,CACX,gBACF,CACF,CAEA,sDACE,aACE,eACF,CACF,CC1GA,gBACE,cAAe,CACf,UAAW,CACX,YAAa,CACb,kBAAmB,CACnB,wBAAyB,CACzB,oBAAqB,CACrB,qBAAiB,CAAjB,gBACF,CAEA,qBACE,cAAe,CACf,YAAa,CACb,kBACF,CAEA,sBACE,cAAe,CACf,YAAa,CACb,kBACF,CAEA,8CACE,aACF,CAEA,uBACE,cAAe,CACf,YAAa,CACb,kBAAmB,CACnB,4BACF,CAEA,wBACE,cAAe,CAIf,cAHF,CAMA,gDACE,aACF,CAEA,wBACE,cACF,CAEA,wBACE,cAAe,CACf,YAAa,CACb,kBACF,CAEA,wBACE,iBAAkB,CAClB,OAAQ,CACR,QAAS,CACT,QAAS,CACT,UACF,CAEA,eACE,0CAA2C,CAC3C,UAAW,CACX,iBAAkB,CAClB,kBAAmB,CACnB,2BAA8B,CAC9B,0BAA4B,CAC5B,kBAAmB,CACnB,iBAAkB,CAClB,iBACF,CAEA,eACE,iBAAkB,CAClB,WACF,CAEA,8BACE,gBACE,cAAe,CACf,WAAY,CACZ,UAAW,CACX,YAAa,CACb,6BAA8B,CAC9B,4BACF,CAEA,qBACE,gBACF,CAEA,sBACE,gBAAiB,CACjB,4BAA6B,CAC7B,SAAU,CACV,gBAAiB,CACjB,iBACF,CAMA,kJACE,YACF,CACF,CAEA,2DACE,gBACE,eACF,CACF,CAEA,6DACE,qBACE,cACF,CAEA,sBACE,cAAe,CACf,4BAA6B,CAC7B,gBAAiB,CACjB,iBACF,CAMA,kJACE,YACF,CACF,CAEA,6DACE,qBACE,cACF,CAEA,sBACE,cACF,CACF,CClJA,eACE,WAAY,CACZ,0CAA2C,CAC3C,kBAAmB,CACnB,UAAW,CACX,WAAY,CAEZ,qBAAsB,CAEtB,mBACF,CAEA,6BANE,YAAa,CAEb,4BASF,CALA,cACE,UAAW,CAEX,kBAEF,CAEA,UACE,kBAAmB,CACnB,SAAU,CACV,2CAA4C,CAC5C,WAAa,CACb,gBAAiB,CACjB,kBAAmB,CACnB,kBAAmB,CACnB,iBAAkB,CAClB,YAAa,CACb,qBAAsB,CACtB,4BAA6B,CAC7B,iBAAkB,CAClB,kBACF,CAEA,iBACE,0CACF,CAEA,YACE,eAAgB,CAChB,kBACF,CAEA,eACE,WAAY,CACZ,0CAA2C,CAC3C,iBAAkB,CAClB,UAAW,CACX,WAAY,CACZ,YAAa,CACb,qBAAsB,CACtB,QAAO,CACP,aAAc,CACd,oEAAqE,CACrE,oBAAqB,CACrB,gBAAiB,CACjB,mBAAoB,CACpB,aACF,CAEA,kCACE,0CAA2C,CAC3C,iBACF,CAEA,wCACE,0CAA2C,CAC3C,iBACF,CAEA,mBACE,8BAAuB,CAAvB,2BAAuB,CAAvB,sBAAuB,CACvB,2CAA4C,CAC5C,0BAA2B,CAC3B,YAAa,CACb,kBAAmB,CACnB,gBAAiB,CACjB,kBAAmB,CACnB,iBAAkB,CAClB,eAAgB,CAChB,gBAAiB,CACjB,aACF,CAEA,0BACE,0CACF,CAEA,eAEE,aACF,CAEA,8BACE,eACE,eAAgB,CAChB,gBACF,CAEA,8BACE,UAAW,CACX,WACF,CAEA,mBACE,aACF,CACF,CAEA,2DACE,8BACE,UAAW,CACX,WACF,CACF,CAEA,2DACE,8BACE,UAAW,CACX,WACF,CACF,CAEA,6DACE,eACE,eAAgB,CAChB,gBACF,CAEA,8BACE,UAAW,CACX,WACF,CAEA,mBACE,aACF,CACF,CAEA,6DACE,eACE,eAAgB,CAChB,gBACF,CAEA,8BACE,UAAW,CACX,WACF,CACF,CCtJA,iCACE,cAAe,CACf,YAAa,CACb,qBAAsB,CACtB,4BACF,CAEA,WACE,gBAAiB,CACjB,iBAAkB,CAClB,UAAW,CACX,eAAgB,CAChB,WAAY,CACZ,eAAgB,CAChB,2CAA4C,CAC5C,kBAAmB,CACnB,gBAAiB,CACjB,kBAAmB,CACnB,YAAa,CACb,kBAAmB,CACnB,4BACF,CAEA,aACE,WAAY,CACZ,iBAAkB,CAClB,eACF,CAEA,kBACE,0CACF,CAGA,8BACE,yCACE,YACF,CAEA,iCACE,gBAAiB,CACjB,eAAgB,CAChB,4BACF,CAEA,WACE,eAAgB,CAChB,eAAgB,CAChB,kBACF,CACF,CAEA,2DACE,WACE,eAAgB,CAChB,eAAgB,CAChB,kBACF,CACF,CAEA,6DACE,yCACE,YACF,CAEA,iCACE,gBAAiB,CACjB,eACF,CACF,CCrEA,kBACE,WAAY,CACZ,YAAa,CACb,UAAW,CACX,YAAa,CACb,qBAAsB,CACtB,6BAA8B,CAC9B,cACF,CAEA,wBACE,YACF,CAEA,QACE,uBAAwB,CACxB,iBAAkB,CAClB,QAAS,CACT,UAAW,CACX,WAAY,CACZ,UAAW,CACX,oCAAqC,CACrC,gCAAyB,CAAzB,wBAAyB,CACzB,iBAAkB,CAClB,WACF,CAEA,cACE,YACF,CAEA,8BACE,uBAAwB,CACxB,WAAY,CACZ,UAAW,CACX,WAAY,CACZ,iBAAkB,CAClB,cAAe,CACf,oCAAqC,CACrC,eACF,CAEA,0BACE,WAAY,CACZ,UAAW,CACX,WAAY,CACZ,iBAAkB,CAClB,oCAAqC,CACrC,cACF,CAEA,YACE,+BACF","file":"main.427da8b6.chunk.css","sourcesContent":["body {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n monospace;\n}\n",".App {\n text-align: center;\n}\n\n.attachment-full {\n position: absolute;\n right: 0px;\n height: 149px;\n width: 149px;\n}\n\n.githubLabel {\n background-color: #00293C;\n border: none;\n width: 149px;\n height: 0px;\n position: absolute;\n right: 0px;\n margin-top: -10px;\n}\n\n@media (orientation: portrait) {\n .attachment-full {\n height: 99px;\n width: 99px;\n }\n\n .githubLabel {\n width: 99px;\n }\n}\n\n@media (orientation: landscape) and (max-height: 400px) {\n .attachment-full {\n height: 99px;\n width: 99px;\n }\n\n .githubLabel {\n width: 99px;\n }\n}\n",":root {\n --global-first-color: #756d58;\n --global-second-color: #586075;\n --global-third-color: #607558;\n --global-fourth-color: #6d5875;\n --global-black-color: #333333;\n}\n","@import 'globalCss.css';\n\n#drum-machine {\n background: var(--global-first-color);\n height: 100vh;\n width: 100%;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n\n#display {\n background-color: var(--global-second-color);\n margin: auto;\n height: 70vh;\n min-height: 400px;\n width: 80vw;\n border-radius: 1rem;\n display: flex;\n flex-direction: column;\n}\n\n#display-top, #display-bottom {\n flex-basis: 19%;\n width: 100%;\n}\n\n#display-top {\n display: flex;\n flex-direction: column;\n justify-content: center;\n text-align: center;\n font-size: x-large;\n font-style: oblique;\n}\n\n#display-top p {\n height: 10px;\n margin-top: 0px;\n}\n\n#menuToolTip {\n position: relative;\n left: 10px;\n top: 20px;\n background-color: var(--global-first-color);\n max-width: max-content;\n padding: 0px 10px 0px 10px;\n font-size: x-large;\n font-style: oblique;\n border-color: black !important;\n border-width: 2px !important; \n border-style: solid; \n border-radius: 6px;\n text-align: center;\n}\n\n@media (orientation: landscape) and (max-width: 1520px) {\n #display {\n width: 90vw;\n }\n}\n\n@media (orientation: landscape) and (max-width: 1258px) {\n #display {\n width: 99vw;\n }\n}\n\n@media (orientation: portrait) {\n #display {\n margin: auto;\n height: 90vh;\n width: 95vw;\n min-width: unset;\n min-height: unset;\n }\n\n #display-top {\n flex-basis: 12%;\n font-size: x-large;\n }\n\n #display-bottom {\n flex-basis: 8%;\n }\n}\n\n@media (orientation: portrait) and (max-device-width: 750px) {\n #display-top {\n font-size: large;\n }\n}\n\n@media (orientation: landscape) and (max-device-width: 1024px) {\n #display {\n height: 90vh;\n width: 90vw;\n min-height: unset;\n }\n}\n\n@media (orientation: landscape) and (max-height: 400px) {\n #display-top {\n font-size: large;\n }\n}\n","#display-middle {\n flex-basis: 62%;\n width: 100%;\n display: flex;\n flex-direction: row;\n -webkit-user-select: none; /* Safari */\n -ms-user-select: none; /* IE 10+ and Edge */\n user-select: none; /* Standard syntax */\n}\n\n#display-middle-left {\n flex-basis: 55%;\n display: flex;\n flex-direction: row;\n}\n\n#display-middle-right {\n flex-basis: 45%;\n display: flex;\n flex-direction: row;\n}\n\n#display-middle-left-a, #display-middle-left-c {\n flex-basis: 5%;\n}\n\n#display-middle-left-b {\n flex-basis: 90%;\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n}\n\n#display-middle-right-c {\n flex-basis: 12%;\n}\n\n#display-middle-right-c {\n min-width: 15px;\n}\n\n#display-middle-right-e, #display-middle-right-g {\n flex-basis: 5%;\n}\n\n#display-middle-right-e {\n min-width: 50px;\n}\n\n#display-middle-right-f {\n flex-basis: 20%;\n display: flex;\n flex-direction: row;\n} \n\n.volumeToolTipContainer {\n position: relative;\n width: 0;\n height: 0;\n top: 105%;\n right: 25px;\n}\n\n.volumeToolTip {\n background-color: var(--global-first-color);\n width: 50px;\n font-size: x-large;\n font-style: oblique;\n border-color: black !important;\n border-width: 2px !important; \n border-style: solid; \n border-radius: 6px;\n text-align: center;\n}\n\n#menuScrollTip {\n font-size: x-large;\n height: 16px;\n}\n\n@media (orientation: portrait) {\n #display-middle {\n flex-basis: 80%;\n height: 100%;\n width: 100%;\n display: flex;\n flex-direction: column-reverse;\n justify-content: space-around;\n }\n\n #display-middle-left {\n flex-basis: unset;\n }\n\n #display-middle-right {\n flex-basis: unset;\n justify-content: space-around;\n width: 80%;\n margin-left: auto;\n margin-right: auto;\n }\n\n #display-middle-right-f, #display-middle-right-g, #volumeTip, #menuScrollTip {\n display: none;\n }\n\n #display-middle-right-a, #display-middle-right-c, #display-middle-right-e {\n display: none;\n }\n}\n\n@media (orientation: portrait) and (max-device-width: 750px) {\n #display-middle {\n margin-top: 10px;\n }\n}\n\n@media (orientation: landscape) and (max-device-width: 1024px) {\n #display-middle-left {\n flex-basis: 65%;\n }\n\n #display-middle-right {\n flex-basis: 35%;\n justify-content: space-around;\n margin-left: auto;\n margin-right: auto;\n }\n\n #display-middle-right-f, #display-middle-right-g, #volumeTip, #menuScrollTip {\n display: none;\n }\n\n #display-middle-right-a, #display-middle-right-c, #display-middle-right-e {\n display: none;\n }\n}\n\n@media (orientation: landscape) and (max-device-height: 767px) {\n #display-middle-left {\n flex-basis: 60%;\n }\n\n #display-middle-right {\n flex-basis: 40%;\n }\n}\n","#drum-pad-grid {\n margin: auto;\n background-color: var(--global-third-color);\n border-radius: 1rem;\n width: 54vh;\n height: 45vh;\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n padding: 0 0 2vh 2vh;\n}\n\n.drum-pad-row {\n height: 33%;\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n}\n\n.drum-pad {\n border-radius: 1rem;\n width: 33%;\n background-color: var(--global-fourth-color);\n border: black;\n border-width: 2px; \n border-style: solid; \n margin: 2vh 2vh 0 0;\n text-align: center;\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n font-size: x-large;\n font-style: oblique;\n}\n\n.drum-pad:active {\n background-color: var(--global-first-color);\n}\n\n.drum-pad > p {\n margin-top: auto;\n margin-bottom: auto;\n}\n\n.selectionMenu {\n margin: auto;\n background-color: var(--global-third-color);\n border-radius: 5px;\n width: 54vh;\n height: 45vh;\n display: flex;\n flex-direction: column;\n flex: 1;\n overflow: auto;\n scrollbar-color: var(--global-black-color) var(--global-second-color);\n scrollbar-width: thin;\n padding-top: 10px;\n padding-bottom: 10px;\n direction: rtl;\n}\n\n.selectionMenu::-webkit-scrollbar {\n background-color: var(--global-third-color);\n border-radius: 5px;\n}\n\n.selectionMenu::-webkit-scrollbar-thumb {\n background-color: var(--global-black-color);\n border-radius: 5px;\n}\n\n.selectionMenuItem {\n min-height: min-content;\n background-color: var(--global-fourth-color);\n margin: 10px 20px 20px 10px;\n padding: 15px;\n border-radius: 1rem;\n border-width: 2px; \n border-style: solid; \n text-align: center;\n font-style: bold;\n font-size: 1.6rem;\n direction: ltr;\n}\n\n.selectionMenuItem:active {\n background-color: var(--global-first-color);\n}\n\n.metronomeIcon {\n /* increasing the third number lightens the black */\n color: hsl(0, 0%, 11%);\n}\n\n@media (orientation: portrait) {\n #drum-pad-grid {\n min-width: unset;\n min-height: unset;\n }\n\n #drum-pad-grid, .selectionMenu {\n width: 72vw;\n height: 60vw;\n }\n\n .selectionMenuItem {\n padding: unset;\n }\n}\n\n@media (orientation: portrait) and (max-device-width: 767px) {\n #drum-pad-grid, .selectionMenu {\n width: 84vw;\n height: 70vw;\n }\n}\n\n@media (orientation: portrait) and (max-device-width: 750px) {\n #drum-pad-grid, .selectionMenu {\n width: 72vw;\n height: 60vw;\n }\n}\n\n@media (orientation: landscape) and (max-device-width: 1024px) {\n #drum-pad-grid {\n min-width: unset;\n min-height: unset;\n }\n\n #drum-pad-grid, .selectionMenu {\n width: 72vh;\n height: 60vh;\n }\n\n .selectionMenuItem {\n padding: unset;\n }\n}\n\n@media (orientation: landscape) and (max-device-height: 767px) {\n #drum-pad-grid {\n min-width: unset;\n min-height: unset;\n }\n\n #drum-pad-grid, .selectionMenu {\n width: 84vh;\n height: 70vh;\n }\n}\n","#selection-left, #selection-right {\n flex-basis: 12%;\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n}\n\n.selection {\n margin-left: auto;\n margin-right: auto;\n width: 15vh;\n min-width: 110px;\n height: 12vh;\n min-height: 80px;\n background-color: var(--global-fourth-color);\n border-radius: 1rem;\n border-width: 2px; \n border-style: solid; \n display: flex;\n flex-direction: row;\n justify-content: space-around;\n}\n\n.selection > p {\n margin: auto;\n text-align: center;\n font-size: large;\n}\n\n.selection:active {\n background-color: var(--global-first-color);\n}\n\n\n@media (orientation: portrait) {\n #select-volume, #volumeTip, #menuScrollTip {\n display: none;\n }\n\n #selection-left, #selection-right {\n flex-basis: unset;\n min-width: unset;\n justify-content: space-around;\n }\n\n .selection {\n max-height: 80px;\n margin-top: 20px;\n margin-bottom: 20px;\n }\n}\n\n@media (orientation: portrait) and (max-device-width: 750px) {\n .selection {\n max-height: 40px;\n margin-top: 10px;\n margin-bottom: 10px;\n }\n}\n\n@media (orientation: landscape) and (max-device-width: 1024px) {\n #select-volume, #volumeTip, #menuScrollTip {\n display: none;\n }\n\n #selection-left, #selection-right {\n flex-basis: unset;\n min-width: unset;\n }\n}\n","#volume-container {\n margin: auto;\n height: 300px;\n width: 25px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n font-size: 32px;\n}\n\n#volume-input-container {\n height: 210px;\n}\n\n#volume {\n -webkit-appearance: none;\n position: relative;\n top: 75px;\n left: -95px;\n width: 205px;\n height: 4px;\n background: var(--global-black-color);\n transform: rotate(270deg);\n border-radius: 4px;\n border: none;\n}\n\n#volume:focus {\n outline: none;\n}\n\n#volume::-webkit-slider-thumb {\n -webkit-appearance: none;\n height: 30px;\n width: 30px;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n background: var(--global-black-color);\n margin-top: -2px;\n}\n\n#volume::-moz-range-thumb {\n height: 30px;\n width: 30px;\n border: none;\n border-radius: 50%;\n background: var(--global-black-color);\n cursor: pointer;\n}\n\n.volumeIcon {\n color: var(--global-black-color);\n}\n"]} \ No newline at end of file diff --git a/drum-machine-react/build/static/css/main.b8f71121.chunk.css.map b/drum-machine-react/build/static/css/main.b8f71121.chunk.css.map deleted file mode 100644 index 2d825f9..0000000 --- a/drum-machine-react/build/static/css/main.b8f71121.chunk.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["index.css","App.css","globalCss.css","DrumMachine.css","DisplayMiddle.css","DrumPadGrid.css","Selection.css","VolumeContainer.css"],"names":[],"mappings":"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sB,CACtB,QAAO,CACP,aAAc,CACd,oEAAqE,CACrE,oBAAqB,CACrB,gBAAiB,CACjB,mBAAoB,CACpB,aACF,CAEA,kCACE,0CAA2C,CAC3C,iBACF,CAEA,wCACE,0CAA2C,CAC3C,iBACF,CAEA,mBACE,8BAAuB,CAAvB,2BAAuB,CAAvB,sBAAuB,CACvB,2CAA4C,CAC5C,0BAA2B,CAC3B,YAAa,CACb,kBAAmB,CACnB,gBAAiB,CACjB,kBAAmB,CACnB,iBAAkB,CAClB,eAAgB,CAChB,gBACF,CAEA,0BACE,0CACF,CAEA,eAEE,aACF,CAEA,8BACE,eACE,eAAgB,CAChB,gBACF,CAEA,8BACE,UAAW,CACX,WACF,CAEA,mBACE,aACF,CACF,CAEA,2DACE,8BACE,UAAW,CACX,WACF,CACF,CAEA,2DACE,8BACE,UAAW,CACX,WACF,CACF,CAEA,6DACE,eACE,eAAgB,CAChB,gBACF,CAEA,8BACE,UAAW,CACX,WACF,CAEA,mBACE,aACF,CACF,CAEA,6DACE,eACE,eAAgB,CAChB,gBACF,CAEA,8BACE,UAAW,CACX,WACF,CACF,CCrJA,iCACE,cAAe,CACf,YAAa,CACb,qBAAsB,CACtB,4BACF,CAEA,WACE,gBAAiB,CACjB,iBAAkB,CAClB,UAAW,CACX,eAAgB,CAChB,WAAY,CACZ,eAAgB,CAChB,2CAA4C,CAC5C,kBAAmB,CACnB,gBAAiB,CACjB,kBAAmB,CACnB,YAAa,CACb,kBAAmB,CACnB,4BACF,CAEA,aACE,WAAY,CACZ,iBAAkB,CAClB,eACF,CAEA,kBACE,0CACF,CAGA,8BACE,yCACE,YACF,CAEA,iCACE,gBAAiB,CACjB,eAAgB,CAChB,4BACF,CAEA,WACE,eAAgB,CAChB,eAAgB,CAChB,kBACF,CACF,CAEA,2DACE,WACE,eAAgB,CAChB,eAAgB,CAChB,kBACF,CACF,CAEA,6DACE,yCACE,YACF,CAEA,iCACE,gBAAiB,CACjB,eACF,CACF,CCrEA,kBACE,WAAY,CACZ,YAAa,CACb,UAAW,CACX,YAAa,CACb,qBAAsB,CACtB,6BAA8B,CAC9B,cACF,CAEA,wBACE,YACF,CAEA,QACE,uBAAwB,CACxB,iBAAkB,CAClB,QAAS,CACT,UAAW,CACX,WAAY,CACZ,UAAW,CACX,oCAAqC,CACrC,gCAAyB,CAAzB,wBAAyB,CACzB,iBAAkB,CAClB,WACF,CAEA,cACE,YACF,CAEA,8BACE,uBAAwB,CACxB,WAAY,CACZ,UAAW,CACX,WAAY,CACZ,iBAAkB,CAClB,cAAe,CACf,oCAAqC,CACrC,eACF,CAEA,0BACE,WAAY,CACZ,UAAW,CACX,WAAY,CACZ,iBAAkB,CAClB,oCAAqC,CACrC,cACF,CAEA,YACE,+BACF","file":"main.b8f71121.chunk.css","sourcesContent":["body {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n monospace;\n}\n",".App {\n text-align: center;\n}\n\n.attachment-full {\n position: absolute;\n right: 0px;\n height: 149px;\n width: 149px;\n}\n\n.githubLabel {\n background-color: #00293C;\n border: none;\n width: 149px;\n height: 0px;\n position: absolute;\n right: 0px;\n margin-top: -10px;\n}\n\n@media (orientation: portrait) {\n .attachment-full {\n height: 99px;\n width: 99px;\n }\n\n .githubLabel {\n width: 99px;\n }\n}\n\n@media (orientation: landscape) and (max-height: 400px) {\n .attachment-full {\n height: 99px;\n width: 99px;\n }\n\n .githubLabel {\n width: 99px;\n }\n}\n",":root {\n --global-first-color: #756d58;\n --global-second-color: #586075;\n --global-third-color: #607558;\n --global-fourth-color: #6d5875;\n --global-black-color: #333333;\n}\n","@import 'globalCss.css';\n\n#drum-machine {\n background: var(--global-first-color);\n height: 100vh;\n width: 100%;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n\n#display {\n background-color: var(--global-second-color);\n margin: auto;\n height: 70vh;\n min-height: 400px;\n width: 80vw;\n border-radius: 1rem;\n display: flex;\n flex-direction: column;\n}\n\n#display-top, #display-bottom {\n flex-basis: 19%;\n width: 100%;\n}\n\n#display-top {\n display: flex;\n flex-direction: column;\n justify-content: center;\n text-align: center;\n font-size: x-large;\n font-style: oblique;\n}\n\n#display-top p {\n height: 10px;\n margin-top: 0px;\n}\n\n#menuToolTip {\n position: relative;\n left: 10px;\n top: 20px;\n background-color: var(--global-first-color);\n max-width: max-content;\n padding: 0px 10px 0px 10px;\n font-size: x-large;\n font-style: oblique;\n border-color: black !important;\n border-width: 2px !important; \n border-style: solid; \n border-radius: 6px;\n text-align: center;\n}\n\n@media (orientation: landscape) and (max-width: 1520px) {\n #display {\n width: 90vw;\n }\n}\n\n@media (orientation: landscape) and (max-width: 1258px) {\n #display {\n width: 99vw;\n }\n}\n\n@media (orientation: portrait) {\n #display {\n margin: auto;\n height: 90vh;\n width: 95vw;\n min-width: unset;\n min-height: unset;\n }\n\n #display-top {\n flex-basis: 12%;\n font-size: x-large;\n }\n\n #display-bottom {\n flex-basis: 8%;\n }\n}\n\n@media (orientation: portrait) and (max-device-width: 750px) {\n #display-top {\n font-size: large;\n }\n}\n\n@media (orientation: landscape) and (max-device-width: 1024px) {\n #display {\n height: 90vh;\n width: 90vw;\n min-height: unset;\n }\n}\n\n@media (orientation: landscape) and (max-height: 400px) {\n #display-top {\n font-size: large;\n }\n}\n","#display-middle {\n flex-basis: 62%;\n width: 100%;\n display: flex;\n flex-direction: row;\n -webkit-user-select: none; /* Safari */\n -ms-user-select: none; /* IE 10+ and Edge */\n user-select: none; /* Standard syntax */\n}\n\n#display-middle-left {\n flex-basis: 55%;\n display: flex;\n flex-direction: row;\n}\n\n#display-middle-right {\n flex-basis: 45%;\n display: flex;\n flex-direction: row;\n}\n\n#display-middle-left-a, #display-middle-left-c {\n flex-basis: 5%;\n}\n\n#display-middle-left-b {\n flex-basis: 90%;\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n}\n\n#display-middle-right-c {\n flex-basis: 12%;\n}\n\n#display-middle-right-c {\n min-width: 15px;\n}\n\n#display-middle-right-e, #display-middle-right-g {\n flex-basis: 5%;\n}\n\n#display-middle-right-e {\n min-width: 50px;\n}\n\n#display-middle-right-f {\n flex-basis: 20%;\n display: flex;\n flex-direction: row;\n} \n\n.volumeToolTipContainer {\n position: relative;\n width: 0;\n height: 0;\n top: 105%;\n right: 25px;\n}\n\n.volumeToolTip {\n background-color: var(--global-first-color);\n width: 50px;\n font-size: x-large;\n font-style: oblique;\n border-color: black !important;\n border-width: 2px !important; \n border-style: solid; \n border-radius: 6px;\n text-align: center;\n}\n\n#menuScrollTip {\n font-size: x-large;\n height: 16px;\n}\n\n@media (orientation: portrait) {\n #display-middle {\n flex-basis: 80%;\n height: 100%;\n width: 100%;\n display: flex;\n flex-direction: column-reverse;\n justify-content: space-around;\n }\n\n #display-middle-left {\n flex-basis: unset;\n }\n\n #display-middle-right {\n flex-basis: unset;\n justify-content: space-around;\n width: 80%;\n margin-left: auto;\n margin-right: auto;\n }\n\n #display-middle-right-f, #display-middle-right-g, #volumeTip, #menuScrollTip {\n display: none;\n }\n\n #display-middle-right-a, #display-middle-right-c, #display-middle-right-e {\n display: none;\n }\n}\n\n@media (orientation: portrait) and (max-device-width: 750px) {\n #display-middle {\n margin-top: 10px;\n }\n}\n\n@media (orientation: landscape) and (max-device-width: 1024px) {\n #display-middle-left {\n flex-basis: 65%;\n }\n\n #display-middle-right {\n flex-basis: 35%;\n justify-content: space-around;\n margin-left: auto;\n margin-right: auto;\n }\n\n #display-middle-right-f, #display-middle-right-g, #volumeTip, #menuScrollTip {\n display: none;\n }\n\n #display-middle-right-a, #display-middle-right-c, #display-middle-right-e {\n display: none;\n }\n}\n\n@media (orientation: landscape) and (max-device-height: 767px) {\n #display-middle-left {\n flex-basis: 60%;\n }\n\n #display-middle-right {\n flex-basis: 40%;\n }\n}\n","#drum-pad-grid {\n margin: auto;\n background-color: var(--global-third-color);\n border-radius: 1rem;\n width: 54vh;\n height: 45vh;\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n padding: 0 0 2vh 2vh;\n}\n\n.drum-pad-row {\n height: 33%;\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n}\n\n.drum-pad {\n border-radius: 1rem;\n width: 33%;\n background-color: var(--global-fourth-color);\n border: black;\n border-width: 2px; \n border-style: solid; \n margin: 2vh 2vh 0 0;\n text-align: center;\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n font-size: x-large;\n font-style: oblique;\n}\n\n.drum-pad:active {\n background-color: var(--global-first-color);\n}\n\n.drum-pad > p {\n margin-top: auto;\n margin-bottom: auto;\n}\n\n.selectionMenu {\n margin: auto;\n background-color: var(--global-third-color);\n border-radius: 5px;\n width: 54vh;\n height: 45vh;\n display: flex;\n flex-direction: column;\n flex: 1;\n overflow: auto;\n scrollbar-color: var(--global-black-color) var(--global-second-color);\n scrollbar-width: thin;\n padding-top: 10px;\n padding-bottom: 10px;\n direction: rtl;\n}\n\n.selectionMenu::-webkit-scrollbar {\n background-color: var(--global-third-color);\n border-radius: 5px;\n}\n\n.selectionMenu::-webkit-scrollbar-thumb {\n background-color: var(--global-black-color);\n border-radius: 5px;\n}\n\n.selectionMenuItem {\n min-height: min-content;\n background-color: var(--global-fourth-color);\n margin: 10px 20px 20px 10px;\n padding: 15px;\n border-radius: 1rem;\n border-width: 2px; \n border-style: solid; \n text-align: center;\n font-style: bold;\n font-size: 1.6rem;\n}\n\n.selectionMenuItem:active {\n background-color: var(--global-first-color);\n}\n\n.metronomeIcon {\n /* increasing the third number lightens the black */\n color: hsl(0, 0%, 11%);\n}\n\n@media (orientation: portrait) {\n #drum-pad-grid {\n min-width: unset;\n min-height: unset;\n }\n\n #drum-pad-grid, .selectionMenu {\n width: 72vw;\n height: 60vw;\n }\n\n .selectionMenuItem {\n padding: unset;\n }\n}\n\n@media (orientation: portrait) and (max-device-width: 767px) {\n #drum-pad-grid, .selectionMenu {\n width: 84vw;\n height: 70vw;\n }\n}\n\n@media (orientation: portrait) and (max-device-width: 750px) {\n #drum-pad-grid, .selectionMenu {\n width: 72vw;\n height: 60vw;\n }\n}\n\n@media (orientation: landscape) and (max-device-width: 1024px) {\n #drum-pad-grid {\n min-width: unset;\n min-height: unset;\n }\n\n #drum-pad-grid, .selectionMenu {\n width: 72vh;\n height: 60vh;\n }\n\n .selectionMenuItem {\n padding: unset;\n }\n}\n\n@media (orientation: landscape) and (max-device-height: 767px) {\n #drum-pad-grid {\n min-width: unset;\n min-height: unset;\n }\n\n #drum-pad-grid, .selectionMenu {\n width: 84vh;\n height: 70vh;\n }\n}\n","#selection-left, #selection-right {\n flex-basis: 12%;\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n}\n\n.selection {\n margin-left: auto;\n margin-right: auto;\n width: 15vh;\n min-width: 110px;\n height: 12vh;\n min-height: 80px;\n background-color: var(--global-fourth-color);\n border-radius: 1rem;\n border-width: 2px; \n border-style: solid; \n display: flex;\n flex-direction: row;\n justify-content: space-around;\n}\n\n.selection > p {\n margin: auto;\n text-align: center;\n font-size: large;\n}\n\n.selection:active {\n background-color: var(--global-first-color);\n}\n\n\n@media (orientation: portrait) {\n #select-volume, #volumeTip, #menuScrollTip {\n display: none;\n }\n\n #selection-left, #selection-right {\n flex-basis: unset;\n min-width: unset;\n justify-content: space-around;\n }\n\n .selection {\n max-height: 80px;\n margin-top: 20px;\n margin-bottom: 20px;\n }\n}\n\n@media (orientation: portrait) and (max-device-width: 750px) {\n .selection {\n max-height: 40px;\n margin-top: 10px;\n margin-bottom: 10px;\n }\n}\n\n@media (orientation: landscape) and (max-device-width: 1024px) {\n #select-volume, #volumeTip, #menuScrollTip {\n display: none;\n }\n\n #selection-left, #selection-right {\n flex-basis: unset;\n min-width: unset;\n }\n}\n","#volume-container {\n margin: auto;\n height: 300px;\n width: 25px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n font-size: 32px;\n}\n\n#volume-input-container {\n height: 210px;\n}\n\n#volume {\n -webkit-appearance: none;\n position: relative;\n top: 75px;\n left: -95px;\n width: 205px;\n height: 4px;\n background: var(--global-black-color);\n transform: rotate(270deg);\n border-radius: 4px;\n border: none;\n}\n\n#volume:focus {\n outline: none;\n}\n\n#volume::-webkit-slider-thumb {\n -webkit-appearance: none;\n height: 30px;\n width: 30px;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n background: var(--global-black-color);\n margin-top: -2px;\n}\n\n#volume::-moz-range-thumb {\n height: 30px;\n width: 30px;\n border: none;\n border-radius: 50%;\n background: var(--global-black-color);\n cursor: pointer;\n}\n\n.volumeIcon {\n color: var(--global-black-color);\n}\n"]} \ No newline at end of file diff --git a/drum-machine-react/src/DrumPadGrid.css b/drum-machine-react/src/DrumPadGrid.css index 4b4202f..c005fd9 100644 --- a/drum-machine-react/src/DrumPadGrid.css +++ b/drum-machine-react/src/DrumPadGrid.css @@ -80,6 +80,7 @@ text-align: center; font-style: bold; font-size: 1.6rem; + direction: ltr; } .selectionMenuItem:active {