| /* Copyright 2013 The Chromium Authors. All rights reserved. |
| * Use of this source code is governed by a BSD-style license that can be |
| * found in the LICENSE file. |
| */ |
| |
| /* Customize the standard input[type='range']. */ |
| .slider > input[type='range'] { |
| -webkit-appearance: none !important; /* Hide the default thumb icon. */ |
| background: transparent; /* Hide the standard slider bar */ |
| height: 100%; |
| left: -2px; /* Required to align the input element with the parent. */ |
| position: absolute; |
| top: -2px; |
| width: 100%; |
| } |
| |
| /* Custom thumb icon. */ |
| .slider > input[type='range']::-webkit-slider-thumb { |
| -webkit-appearance: none; |
| background-position: center center; |
| background-repeat: no-repeat; |
| height: 24px; |
| position: relative; |
| z-index: 2; |
| } |
| |
| /* Custom slider bar (we hide the standard one). */ |
| .slider > .bar { |
| /* In order to match the horizontal position of the standard slider bar |
| left and right must be equal to 1/2 of the thumb icon width. */ |
| left: 8px; |
| right: 8px; |
| bottom: 10px; |
| pointer-events: none; /* Mouse events pass through to the standard input. */ |
| position: absolute; |
| top: 10px; |
| background-image: url(../images/slider/slide_bar_center.png); |
| height: 4px; |
| } |
| |
| .slider > .bar > .filled, |
| .slider > .bar > .cap { |
| position: absolute; |
| } |
| |
| /* The filled portion of the slider bar to the left of the thumb. */ |
| .slider > .bar > .filled { |
| border-left-style: none; |
| border-right-style: none; |
| left: 0; |
| width: 0; /* The element style.width is manipulated from the code. */ |
| } |
| |
| .slider > .bar > .cap.right { |
| background-image: url(../images/slider/slider_bar_right.png); |
| height: 4px; |
| width: 4px; |
| left: 100%; |
| } |
| |
| .slider > .bar > .filled { |
| background-image: url(../images/slider/slide_bar_fill_center.png); |
| height: 4px; |
| } |
| |
| .slider > .bar > .cap.left { |
| background-image: url(../images/slider/slide_bar_fill_left.png); |
| height: 4px; |
| width: 4px; |
| right: 100%; |
| } |
| |
| .slider.disabled > .bar { |
| background-image: url(../images/slider/slide_bar_disabled_center.png); |
| } |
| |
| .slider.disabled > .bar > .filled { |
| background-image: url(../images/slider/slide_bar_disabled_center.png); |
| } |
| |
| .slider.disabled > .bar > .cap.left { |
| background-image: url(../images/slider/slide_bar_disabled_left.png); |
| } |
| |
| .slider.disabled > .bar > .cap.right { |
| background-image: url(../images/slider/slide_bar_disabled_right.png); |
| } |
| |
| .slider.disabled, |
| .slider.readonly { |
| pointer-events: none; |
| } |
| |
| .slider { |
| -webkit-box-flex: 1; |
| } |
| |
| .slider > input[type='range']::-webkit-slider-thumb { |
| background-image: url(../images/slider/slider_thumb.png); |
| width: 16px; |
| } |
| |
| .slider > input[type='range']::-webkit-slider-thumb:hover { |
| background-image: url(../images/slider/slider_thumb_hover.png); |
| } |
| |
| .slider > input[type='range']::-webkit-slider-thumb:active { |
| background-image: url(../images/slider/slider_thumb_down.png); |
| } |
| |
| .slider.disabled > input[type='range']::-webkit-slider-thumb { |
| background-image: url(../images/slider/slider_thumb_disabled.png); |
| } |