* { --locked-color: #5fadbf; --unlocked-color: #ff5153; } :root { --background: white; --active: royalblue; --nonactive: rgb(205, 205, 205); --alert: red; --textcolor: black; } @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); html { background-color: var(--background); } body { font-family: "Poppins", sans-serif; } html, body { width: 100%; height: 100%; margin: 0px; border: 0; overflow-x: scroll; overflow-y: scroll; display: block; /* No floating content on sides */ } /*navigation*/ .header { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; margin: 1em; border-bottom: 1px solid var(--active); } .header button { border: 1px solid var(--active); color: var(--active); background-color: white; padding: 4px; text-align: center; display: inline-block; padding: 0.5em; margin: 4px; font-size: 0.9em; min-width: 4.5em; } td button { background-color: white; color: var(--active); border: 1px solid var(--active); } /* :::::::::::::: SELECTING MODULATORS/ENUMERATORS */ .header button.highlighted-button { color: var(--active); border: 1px solid var(--active); } .header button.unhighlighted-button { color: var(--nonactive); border: 1px solid var(--nonactive); } /* table */ table { margin: 1em; padding: 0em; border-collapse: collapse; background-color: lightsteelblue; } /* points datacells should have a min-width*/ .enum-count { min-width: 5.6em; } th { padding: 0.4em 0.3em; text-align: left; } thead { color: white; background-color: var(--active); } tr, td { margin: 0em; } td:last-child { white-space: nowrap; overflow: hidden; padding: 0; } /* input types */ /* dropdown list */ select { width: 100%; } /* option, select>* { font-size: 0.8em !important; padding: 0em !important; margin: 0em !important; min-height: 0em !important; } */ option { background-color: var(--active); } option:not(:checked) { background-color: white; } /* input */ input, select { border: 1px solid var(--active); color: var(--active); margin: 0; padding: 0; line-height: 1.5em; height: 1.5em; box-sizing: border-box; } input { padding-left: 5px; /*slight padding on left*/ } input[type=number] { width: 50px; } input[type=text] { width: 60px; font-weight: bold; } .timeInput { width: 80px; } #matrix { background-color: aquamarine; height: 100%; width: 100%; } .numbox-unclicked { user-select: none; border: solid; font-size: 12vw; } .numbox-clicked { user-select: none; border: solid; font-size: 12vw; } .param-input-label { width: 93%; font-size: 5vw; } .lfo-input-label { width: 40%; font-size: 5vw; } /* The switch - the box around the slider */ .switch { position: relative; display: inline-block; width: 30px; height: 17px; } /* Hide default HTML checkbox */ .switch input { opacity: 0; width: 0; height: 0; } /* The slider */ input[type="range"] { appearance: none; -webkit-appearance: none; height: 8px; border-radius: 6px; background-color: white; outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s; overflow: hidden; } /*slider knob*/ input[type="range"]::-webkit-slider-runnable-track { -webkit-appearance: none; color: var(--active); margin-top: -1px; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--active); box-shadow: -80px 0 0 80px var(--active); } input[type="range"]::-moz-range-progress { background-color: var(--active); } h5 { margin: 0; padding: 0; } .label { background-color: aliceblue; padding: 0 4px 0 4px; margin: 0 2px 0 2px; border-color: #333333; border-width: 1px; } .base-val { border: none; color: white; text-align: center; font-size: 0.9em; width: 50px; margin: 0; padding: 0; } .linked { color: red; border-width: 1px; width: 50px; font-size: small; margin-left: 2px; margin-top: 5px; display: none; /*hide*/ } @keyframes pulse-animation { 0% { color: black; } 100% { color: red; } } #pulse { animation: pulse-animation 0.2s normal; } /* :::::::::::::: LOCK CSS */ .locked-component { pointer-events: none; background-color: #333333; color: white; } /* Locked */ .lock { margin-top: 14px; width: 24px; height: 21px; border: 3px solid var(--locked-color); border-radius: 5px; position: relative; cursor: pointer; -webkit-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } .lock:after { content: ""; display: block; background: var(--locked-color); width: 3px; height: 7px; position: absolute; top: 50%; left: 50%; margin: -3.5px 0 0 -2px; -webkit-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } .lock:before { content: ""; display: block; width: 10px; height: 10px; bottom: 100%; position: absolute; left: 50%; margin-left: -8px; border: 3px solid var(--locked-color); border-top-right-radius: 50%; border-top-left-radius: 50%; border-bottom: 0; -webkit-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } /* Locked Hover */ .lock:hover:before { height: 12px; } /* Unlocked */ .unlocked { transform: rotate(10deg); } .unlocked:before { bottom: 130%; left: 31%; margin-left: -11.5px; transform: rotate(-45deg); } .unlocked, .unlocked:before { border-color: var(--unlocked-color); } .unlocked:after { background: var(--unlocked-color); } /* Unlocked Hover */ .unlocked:hover { transform: rotate(3deg); } .unlocked:hover:before { height: 10px; left: 40%; bottom: 124%; transform: rotate(-30deg); }