147 lines
2.9 KiB
CSS
147 lines
2.9 KiB
CSS
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
padding: 1px;
|
|
background: radial-gradient(#1a1d22, #121318);
|
|
}
|
|
|
|
.defs {
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
.fl-studio-envelope {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 600px;
|
|
padding: 20px;
|
|
overflow: hidden;
|
|
background: #363c40;
|
|
border: 2px solid #272d31;
|
|
box-shadow: 0 10px 70px rgba(0, 0, 0, 0.6);
|
|
-webkit-transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.fl-studio-envelope__visualizer {
|
|
height: 200px;
|
|
background: #21272b;
|
|
border: 2px solid #191f23;
|
|
}
|
|
.fl-studio-envelope__visualizer .envelope-visualizer {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: visible;
|
|
}
|
|
|
|
.fl-studio-envelope__controls, .fl-studio-envelope__tension {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.fl-studio-envelope__controls {
|
|
padding: 30px 0 0;
|
|
}
|
|
|
|
.fl-studio-envelope__control {
|
|
flex: 1 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.fl-studio-envelope__label {
|
|
flex: 0 0 auto;
|
|
display: inline-block;
|
|
padding: 10px 0;
|
|
width: 80px;
|
|
color: #c1c5c5;
|
|
font-size: 10px;
|
|
font-family: 'Helvetica', sans-serif;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
letter-spacing: 1px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.fl-studio-envelope__knob {
|
|
flex: 0 0 auto;
|
|
}
|
|
.fl-studio-envelope__knob.envelope-knob {
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
.fl-studio-envelope__knob.tension-knob {
|
|
padding: 10px;
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
.fl-studio-envelope__knob .knob-input__visual {
|
|
overflow: visible;
|
|
}
|
|
.fl-studio-envelope__knob .dial {
|
|
-webkit-transform-origin: 20px 20px;
|
|
transform-origin: 20px 20px;
|
|
transition: all 600ms cubic-bezier(0.39, 0.575, 0.565, 1);
|
|
}
|
|
.fl-studio-envelope__knob .dial-highlight {
|
|
opacity: 0;
|
|
transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
|
|
}
|
|
.fl-studio-envelope__knob:hover .dial, .fl-studio-envelope__knob.drag-active .dial {
|
|
-webkit-transform: scale(0.9);
|
|
transform: scale(0.9);
|
|
-webkit-filter: brightness(10.2);
|
|
filter: brightness(10.2);
|
|
transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
|
|
}
|
|
.fl-studio-envelope__knob:hover .dial-highlight, .fl-studio-envelope__knob.drag-active .dial-highlight {
|
|
opacity: 0.05;
|
|
}
|
|
.fl-studio-envelope__knob .focus-indicator {
|
|
opacity: 0;
|
|
transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
|
|
}
|
|
.fl-studio-envelope__knob.focus-active .focus-indicator {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.knob-input {
|
|
position: relative;
|
|
}
|
|
|
|
.knob-input__visual {
|
|
pointer-events: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.knob-input__input {
|
|
cursor: -webkit-grab;
|
|
cursor: grab;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
-webkit-transform: rotate(-90deg);
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
body.knob-input__drag-active, body.knob-input__drag-active * {
|
|
cursor: -webkit-grabbing !important;
|
|
cursor: grabbing !important;
|
|
}
|