style.css

:root{--gradient: linear-gradient(135deg, #739df2 10%, #c772f2 100%);--arrow-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath id='svg-arrow' fill='%23ffffff' d='M12,14.071L8.179,10.25c-0.414-0.414-1.086-0.414-1.5,0l0,0c-0.414,0.414-0.414,1.086,0,1.5l4.614,4.614 c0.391,0.391,1.024,0.391,1.414,0l4.614-4.614c0.414-0.414,0.414-1.086,0-1.5v0c-0.414-0.414-1.086-0.414-1.5,0L12,14.071z'%3E%3C/path%3E%3C/svg%3E%0A");--arrow-black: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath id='svg-arrow' fill='%23000000' d='M12,14.071L8.179,10.25c-0.414-0.414-1.086-0.414-1.5,0l0,0c-0.414,0.414-0.414,1.086,0,1.5l4.614,4.614 c0.391,0.391,1.024,0.391,1.414,0l4.614-4.614c0.414-0.414,0.414-1.086,0-1.5v0c-0.414-0.414-1.086-0.414-1.5,0L12,14.071z'%3E%3C/path%3E%3C/svg%3E%0A")}*{box-sizing:border-box;-webkit-font-smoothing:antialiased;font-family:'Montserrat', sans-serif}select,label,input,button{-webkit-app-region:no-drag}body{-webkit-app-region:drag;margin:0;width:100%;height:100vh;font-family:'Montserrat', sans-serif;background-color:#222831;display:flex;overflow:hidden}.container{border-radius:25px;border-top-left-radius:0;border-bottom-left-radius:0;box-shadow:0 0 70px -10px rgba(0,0,0,0.2);color:#ffffff;height:100vh;display:flex}.container .left{height:100vh;width:272px;transition:200ms ease;display:flex;justify-content:space-around;flex-direction:column}.container .left.startup{background-image:var(--gradient)}.container .left.startup .welcome{user-select:none;display:flex}.container .left.startup .pad-container{display:none}.container .left.open{background-image:none}.container .left.used{background-image:var(--gradient)}.container .left .welcome{display:none;margin:1.5em;flex-direction:column;align-items:flex-start;height:100vh;justify-content:flex-end}.container .left .welcome a{text-decoration:none;color:inherit}.container .left .welcome h1{margin:0}.container .left .welcome p{font-size:15px}.container .left .drop-zone{cursor:pointer;font-weight:700;height:3em;display:flex;border:3px solid #ffffff;border-radius:10px;text-align:center;align-content:center;align-items:center;align-self:center;justify-content:center;justify-items:center;justify-self:center;width:100%;appearance:none;color:#ffffff;background-color:transparent;outline:none}.container .left .pad-container{margin:2em 0 1em;display:flex;flex-direction:column;height:100vh;justify-content:space-between}.container .left .pad-info{width:100%}.container .left .pad-info .row{display:flex;align-items:center;justify-content:space-between;margin:0.5em 1.5em}.container .left .pad-info .row label{font-size:14px;font-weight:700;user-select:none;width:100px}.container .left .pad-info .row label span{font-size:10px;font-weight:700;text-transform:uppercase}.container .left .pad-info .row .volume-container{width:100%}.container .left .pad-info .row .original-file-container{width:100%}.container .left .pad-info .row .original-file-container input.original-file{width:100%;border-radius:2px;border:0;background:transparent;color:#ffffff}.container .left .pad-info button.remove-pad{outline:none;width:100%;box-sizing:border-box;border:none;border-radius:25px;padding:10px;font-family:'Montserrat', sans-serif;text-align:center;background-image:linear-gradient(135deg, #f27373 10%, #f272dd 100%);color:#ffffff;font-weight:700;box-shadow:0 0 30px -5px rgba(0,0,0,0.25);cursor:pointer;transition:transform 200ms ease}.container .left .pad-info button.remove-pad:hover{transform:scale(0.95)}.container .left .pad-info button.remove-pad:active{transform:scale(1.05)}.container .left .pad-info button.write-card[disabled]{cursor:not-allowed}.container .left .current-pad{margin:0 1.5em 0 1.5em;display:flex;align-items:center;justify-content:space-between;user-select:none;max-height:78px}.container .left .current-pad #waveform{position:absolute;z-index:0}.container .left .current-pad .pad-label{z-index:1}.container .left .current-pad .meta-data{text-align:right;z-index:1}.container .left .current-pad .audio-preview{width:70px;display:flex;justify-content:space-evenly;z-index:1}.container .left .current-pad .audio-preview button{border:none;background:none;box-shadow:none;cursor:pointer;padding:0;margin:0;font-size:24px}.container .left .current-pad h1{margin:0;font-weight:700;font-size:4em;vertical-align:bottom}.container .left .current-pad h3{margin:0;font-size:1em;vertical-align:bottom}.container .right{display:flex;flex-direction:column;background-color:#222831;height:100%;width:341px;justify-content:space-between}.container .right .top{margin:2em}.container .right .top .bank-selector{display:none;justify-content:space-between;align-items:center;user-select:none}.container .right .top .bank-selector label{font-weight:700}.container .right .top .bank-selector select{cursor:pointer;-webkit-appearance:none;background-image:var(--arrow-white);background-size:24px;background-position:92% center;background-repeat:no-repeat;background-color:#222831;width:100px;border-radius:2px;box-shadow:none;border:1px solid #739df2;color:#ffffff;transition:all 0.3s ease-in-out;padding:5px 10px 5px 10px;font-weight:700;font-size:16px;text-align:right;outline:none}.container .right .top .folder-selector{display:flex;justify-content:space-between;align-items:center;margin-bottom:1em}.container .right .top .folder-selector label{font-weight:700}.container .right .middle p.errors{display:none;padding:2em}.container .right .middle .pad-list{display:none;padding:0;margin:0 2em;flex-wrap:wrap;justify-content:space-between}.container .right .middle .pad-list.open{display:flex}.container .right .middle .pad-list .pad{user-select:none;-webkit-app-region:no-drag;padding:1em;cursor:pointer;transition:200ms ease;border-radius:10px;box-shadow:0 0 50px -5px rgba(0,0,0,0.3);text-align:center;width:64px;margin-bottom:0.5em}.container .right .middle .pad-list .pad:hover{font-weight:700;transform:scale(1.1);background:#739df2;color:#222831;box-shadow:0 0 40px -5px rgba(0,0,0,0.2)}.container .right .middle .pad-list .pad.selected{transform:scale(1.1);color:#222831 !important;background-image:linear-gradient(135deg, #ecd051 10%, #f2e572 100%) !important;box-shadow:0 0 40px -5px rgba(0,0,0,0.2)}.container .right .middle .pad-list .pad.pad-9{margin-bottom:0}.container .right .middle .pad-list .pad.pad-10{margin-bottom:0}.container .right .middle .pad-list .pad.pad-11{margin-bottom:0}.container .right .middle .pad-list .pad.pad-12{margin-bottom:0}.container .right .middle .pad-list .pad.active-pad{font-weight:700;background-image:var(--gradient);color:#fff}.container .right .middle .pad-list .pad.add-pad{font-weight:700;background-image:linear-gradient(135deg, #73f279 10%, #72f2ac 100%);color:#222831}.container .right .middle .pad-list .pad.delete-pad{font-weight:700;background-image:linear-gradient(135deg, #f27373 10%, #f272dd 100%);color:#fff}.container .right .bottom{margin:2em}.container .right .bottom button.write-card{display:none;outline:none;width:100%;box-sizing:border-box;border:none;border-radius:25px;padding:10px;font-family:'Montserrat', sans-serif;text-align:center;background-image:var(--gradient);color:#ffffff;font-weight:700;box-shadow:0 0 30px -5px rgba(0,0,0,0.25);cursor:pointer;transition:transform 200ms ease}.container .right .bottom button.write-card:hover{transform:scale(0.95)}.container .right .bottom button.write-card:active{transform:scale(1.05)}.container .right .bottom button.write-card[disabled]{cursor:not-allowed}select.tempo-mode{cursor:pointer;-webkit-appearance:none;background-image:var(--arrow-black);background-size:24px;background-position:92% center;background-repeat:no-repeat;color:#222831;width:100px;height:36px;border-radius:2px;box-shadow:none;border:0;transition:all 0.3s ease-in-out;padding:0 10px;font-weight:700;font-size:16px;outline:none}button.choose-folder{cursor:pointer;-webkit-appearance:none;background-color:transparent;border-radius:2px;box-shadow:none;border:1px solid #739df2;color:#ffffff;transition:all 0.3s ease-in-out;padding:5px 10px 5px 10px;font-weight:700;font-size:16px;text-align:right;outline:none}button.choose-folder[disabled]{cursor:not-allowed}.range{display:block;border:0;outline:none;height:30px;width:100%}.input{border:0;outline:none;display:block;-webkit-appearance:none;background:#ebf7fc;color:#222831;padding:8px;width:100px;height:36px;font-size:14px;font-weight:700;font-family:'Montserrat', sans-serif;border-radius:2px;transition:border .3s ease}.button-cover{position:absolute;top:0;right:0;bottom:0;left:0}.knobs{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2}.layer{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;background-color:#ebf7fc;transition:0.3s ease all;z-index:1}.button{position:relative;width:120px;height:36px;overflow:hidden;border-radius:2px}.checkbox{position:relative;width:100%;height:100%;padding:0;margin:0;opacity:0;cursor:pointer;z-index:3}.checkbox:disabled{cursor:not-allowed}.slider.button{width:100px}.slider .knobs:before{position:absolute;top:4px;width:42px;height:10px;font-size:10px;font-weight:bold;text-align:center;line-height:1;padding:9px 4px;border-radius:2px;transition:0.3s ease all;content:'';left:4px;background-image:var(--gradient)}.slider .knobs:after{position:absolute;top:4px;width:42px;height:10px;font-size:10px;font-weight:bold;text-align:center;line-height:1;padding:9px 4px;border-radius:2px;transition:0.3s ease all;content:'LO-FI';right:0px;color:#222831}.slider .knobs span{position:absolute;top:4px;width:42px;height:10px;font-size:10px;font-weight:bold;text-align:center;line-height:1;padding:9px 4px;border-radius:2px;transition:0.3s ease all;display:inline-block;left:4px;color:#fff;z-index:1}.slider .checkbox:checked+.knobs span{color:#222831}.slider .checkbox:checked+.knobs:before{width:34px;left:54px;background-image:linear-gradient(135deg, #f27373 10%, #f272dd 100%)}.slider .checkbox:checked+.knobs:after{color:#fff}.slider .checkbox:checked ~ .layer{background-color:#fcebeb}.slider.lofi .knobs:before{width:34px}.slider.lofi .knobs:after{width:34px;content:'✕'}.slider.lofi .checkbox:checked+.knobs:before{width:26px;left:62px}.slider.gate-loop .knobs:before{width:34px}.slider.gate-loop .knobs:after{width:34px;content:'✕'}.slider.gate-loop .checkbox:checked+.knobs:before{width:26px;left:62px}.slider.mono-stereo .knobs:after{content:'MONO'}.slider.mono-stereo .checkbox:checked+.knobs:before{width:34px;left:54px}.slider.reverse-off .knobs:before{width:48px}.slider.reverse-off .knobs:after{width:34px;content:'✕'}.slider.reverse-off .checkbox:checked+.knobs:before{width:26px;left:62px}.gradient-background{--border-width: 10px;border-radius:var(--border-width);top:calc(-1 * var(--border-width));left:calc(-1 * var(--border-width));width:calc(100% + var(--border-width) * 2);height:calc(100% + var(--border-width) * 2);background:linear-gradient(60deg, #5f86f2, #a65ff2, #f25fd0, #f25f61, #f2cb5f, #abf25f, #5ff281, #5ff2f0);background-size:300% 300%;background-position:0 50%;border-radius:calc(2 * var(--border-width));animation:moveGradient 4s alternate infinite}@keyframes moveGradient{50%{background-position:100% 50%}}[tooltip]{position:relative}[tooltip]::before,[tooltip]::after{text-transform:none;font-size:.9em;line-height:1;user-select:none;pointer-events:none;position:absolute;display:none;opacity:0}[tooltip]::before{content:'';border:5px solid transparent;z-index:1001}[tooltip]::after{content:attr(tooltip);font-family:'Montserrat', sans-serif;text-align:center;min-width:3em;max-width:21em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:1ch 1.5ch;border-radius:.3ch;box-shadow:0 1em 2em -0.5em rgba(0,0,0,0.35);background:#333;color:#fff;z-index:1000}[tooltip]:hover::before,[tooltip]:hover::after{display:block}[tooltip='']::before,[tooltip='']::after{display:none !important}[tooltip]:not([flow])::before,[tooltip][flow^="up"]::before{bottom:100%;border-bottom-width:0;border-top-color:#333}[tooltip]:not([flow])::after,[tooltip][flow^="up"]::after{bottom:calc(100% + 5px)}[tooltip]:not([flow])::before,[tooltip]:not([flow])::after,[tooltip][flow^="up"]::before,[tooltip][flow^="up"]::after{left:50%;transform:translate(-50%, -0.5em)}[tooltip][flow^="down"]::before{top:100%;border-top-width:0;border-bottom-color:#333}[tooltip][flow^="down"]::after{top:calc(100% + 5px)}[tooltip][flow^="down"]::before,[tooltip][flow^="down"]::after{left:50%;transform:translate(-50%, 0.5em)}[tooltip][flow^="left"]::before{top:50%;border-right-width:0;border-left-color:#333;left:calc(0em - 5px);transform:translate(-0.5em, -50%)}[tooltip][flow^="left"]::after{top:50%;right:calc(100% + 5px);transform:translate(-0.5em, -50%)}[tooltip][flow^="right"]::before{top:50%;border-left-width:0;border-right-color:#333;right:calc(0em - 5px);transform:translate(0.5em, -50%)}[tooltip][flow^="right"]::after{top:50%;left:calc(100% + 5px);transform:translate(0.5em, -50%)}@keyframes tooltips-vert{to{opacity:.9;transform:translate(-50%, 0)}}@keyframes tooltips-horz{to{opacity:.9;transform:translate(0, -50%)}}[tooltip]:not([flow]):hover::before,[tooltip]:not([flow]):hover::after,[tooltip][flow^="up"]:hover::before,[tooltip][flow^="up"]:hover::after,[tooltip][flow^="down"]:hover::before,[tooltip][flow^="down"]:hover::after{animation:tooltips-vert 300ms ease-out forwards}[tooltip][flow^="left"]:hover::before,[tooltip][flow^="left"]:hover::after,[tooltip][flow^="right"]:hover::before,[tooltip][flow^="right"]:hover::after{animation:tooltips-horz 300ms ease-out forwards}.loading{display:none;z-index:99999}.loading h1{position:absolute;z-index:2;margin:0;font-size:13.333vw;left:50%;top:50%;transform:translate(-50%, -50%);color:#0000ff;mix-blend-mode:color-burn;line-height:1;padding:0.25em}.loading canvas{z-index:1;position:absolute;will-change:contents}@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;src:url("fonts/montserrat-regular-webfont.eot");src:url("fonts/montserrat-regular-webfont.eot?#iefix") format("embedded-opentype"),url("fonts/montserrat-regular-webfont.woff2") format("woff2"),url("fonts/montserrat-regular-webfont.woff") format("woff"),url("fonts/montserrat-regular-webfont.ttf") format("truetype");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000}@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;src:url("fonts/montserrat-bold-webfont.eot");src:url("fonts/montserrat-bold-webfont.eot?#iefix") format("embedded-opentype"),url("fonts/montserrat-bold-webfont.woff2") format("woff2"),url("fonts/montserrat-bold-webfont.woff") format("woff"),url("fonts/montserrat-bold-webfont.ttf") format("truetype");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000}