* { --locked-color: #5fadbf; --unlocked-color: #ff5153; } html, body { width: 100%; height: 100%; margin: 0px; border: 0; overflow: hidden; /* Disable scrollbars */ display: block; /* No floating content on sides */ } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333333; } li { float: left; } input[type=number] { width: 50px; margin: 0; padding: 0; } input[type=text] { width: 60px; margin: 0; padding: 0; font-weight: bold; } .timeInput { width: 80px; margin: 0; padding: 0; } #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 */ .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 13px; width: 13px; left: 2px; bottom: 2px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked + .slider { background-color: #2196F3; } input:focus + .slider { box-shadow: 0 0 1px #2196F3; } input:checked + .slider:before { -webkit-transform: translateX(13px); -ms-transform: translateX(13px); transform: translateX(13px); } /* Rounded sliders */ .slider.round { border-radius: 17px; } .slider.round:before { border-radius: 50%; } h5 { margin: 0; padding: 0; } .enum-count { background-color: aquamarine; } .label { background-color: aliceblue; padding: 0 4px 0 4px; margin: 0 2px 0 2px; border-color: #333333; border-width: 1px; } .base-val { background-color: lightgray; border-color: #333333; border-width: 1px; width: 50px; margin-left: 2px; margin-top: 1px; } .linked { color: red; border-width: 1px; width: 50px; font-size: small; margin-left: 2px; margin-top: 5px; } @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; } .container { display: flex; width: 100%; justify-content: space-between; } /* 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); }