.label { font-family: monospace; text-align: center; width: 100%; } /*============================================================================= BAR =============================================================================*/ .bar { pointer-events: none; } .bar .segment { width: 30px; height: 6px; margin: 2px; opacity: 1; /*@include transitionAndTime(opacity, .016s);*/ } .bar .segment.peak { background-color: red; } .bar .segment.high { background-color: orange; } .bar .segment.normal { background-color: green; } .meter .bar .label { font-size: 10px; } /*============================================================================= METER =============================================================================*/ .meter { display: table; border: 1px solid black; border-radius: 3px; } .meter .label { clear: both; font-size: 15px; } .meter .bar { position: relative; float: left; } /*============================================================================= FADER =============================================================================*/ .fader { width: 40px; display: table; border: 1px solid black; border-radius: 3px; } .fader .track { position: relative; width: auto; height: auto; margin: 0px; } .fader .slider { position: absolute; width: 100%; height: 100%; margin: 0px; top: 0px; left: 0px; -webkit-appearance: slider-vertical; } .fader input.label { padding: 0px; border: 0px; font-size: 10px; height: 15px; } .fader .bar .segment { width: 40px; background-color: black; }