.customize-control-hoo-slider { position: relative; } .customize-control-hoo-slider input[type=range] { -webkit-appearance: none; -webkit-transition: background 0.3s; -moz-transition: background 0.3s; transition: background 0.3s; background-color: rgba(0, 0, 0, 0.1); height: 5px; width: calc(100% - 70px); padding: 0; border-radius: 2px; } .customize-control-hoo-slider input[type=range]:focus { box-shadow: none; outline: none; } .customize-control-hoo-slider input[type=range]:hover { background-color: rgba(0, 0, 0, 0.25); } .customize-control-hoo-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border: none; border-radius: 50%; -webkit-border-radius: 50%; background-color: #3498D9; } .customize-control-hoo-slider input[type=range]::-moz-range-thumb { width: 15px; height: 15px; border: none; border-radius: 50%; background-color: #3498D9; } .customize-control-hoo-slider input[type=range]::-ms-thumb { width: 15px; height: 15px; border-radius: 50%; border: 0; background-color: #3498D9; } .customize-control-hoo-slider input[type=range]::-moz-range-track { border: inherit; background: transparent; } .customize-control-hoo-slider input[type=range]::-ms-track { border: inherit; color: transparent; background: transparent; } .customize-control-hoo-slider input[type=range]::-ms-fill-lower, .customize-control-hoo-slider input[type=range]::-ms-fill-upper { background: transparent; } .customize-control-hoo-slider input[type=range]::-ms-tooltip { display: none; } .customize-control-hoo-slider .hoo_range_value { display: inline-block; font-size: 14px; padding: 0 5px; font-weight: 400; position: relative; top: 2px; } .customize-control-hoo-slider .hoo-slider-reset { color: rgba(0, 0, 0, 0.2); float: right; -webkit-transition: color 0.5s ease-in; -moz-transition: color 0.5s ease-in; -ms-transition: color 0.5s ease-in; -o-transition: color 0.5s ease-in; transition: color 0.5s ease-in; } .customize-control-hoo-slider .hoo-slider-reset span { font-size: 16px; line-height: 22px; } .customize-control-hoo-slider .hoo-slider-reset:hover { color: red; } .customize-control-hoo-slider .hoo-controls-loading-spinner { position: absolute; top: 0; left: 0; margin: 0; width: 100%; height: 100%; z-index: 999; text-align: center; background-color: #eee; } .customize-control-hoo-slider .hoo-controls-loading-spinner > div { margin-top: 20px; width: 18px; height: 18px; background-color: #333; border-radius: 100%; display: inline-block; -webkit-animation: hoobouncedelay 1.4s infinite ease-in-out both; animation: hoobouncedelay 1.4s infinite ease-in-out both; } .customize-control-hoo-slider .hoo-controls-loading-spinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .customize-control-hoo-slider .hoo-controls-loading-spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes hoobouncedelay { 0%, 100%, 80% { -webkit-transform: scale(0); } 40% { -webkit-transform: scale(1); } } @keyframes hoobouncedelay { 0%, 100%, 80% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } } /*# sourceMappingURL=slider.css.map */