.multi-slider-gradient { height: 35px; background-color: transparent; .thumb { width: 13px; height: 15px; z-index: 1; top: 18px; top: calc(17px + @scaled-one-px-value); background: none; canvas{ .margin-left(1px); .margin-left(@scaled-one-px-value); } &.remove canvas{ opacity: 0.5; } &:hover::after{ display: block; content: ' '; z-index: -1; position: absolute; width: 11px; height: 10px; bottom: @scaled-one-px-value; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.32); top: 5px; .margin-left(1px); .margin-left(@scaled-one-px-value); } } .track { background: #ededed; /* Old browsers */ // background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #000000 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */ background: -moz-linear-gradient(left, #000000 0%,#ffffff 100%); /* FF3.6+ */ background: -o-linear-gradient(left, #000000 0%,#ffffff 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #000000 0%,#ffffff 100%); /* IE10+ */ background: linear-gradient(to right, #000000 0%,#ffffff 100%); /* W3C */ // filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */ background-position: 0 0; outline: @scaled-one-px-value-ie solid @border-control-focus-ie; outline: @scaled-one-px-value solid @border-control-focus; border: @scaled-one-px-value-ie solid @border-regular-control-ie; border: @scaled-one-px-value solid @border-regular-control; cursor: copy; } }