1 line
15 KiB
Plaintext
1 line
15 KiB
Plaintext
{"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"]} |