158537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles)/* Copyright 2013 The Chromium Authors. All rights reserved. 258537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) * Use of this source code is governed by a BSD-style license that can be 358537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) * found in the LICENSE file. 458537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) */ 558537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) 658537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles)/* Customize the standard input[type='range']. */ 758537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles).slider > input[type='range'] { 858537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) -webkit-appearance: none !important; /* Hide the default thumb icon. */ 958537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) background: transparent; /* Hide the standard slider bar */ 1058537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) height: 100%; 1158537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) left: -2px; /* Required to align the input element with the parent. */ 1258537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) position: absolute; 1358537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) top: -2px; 1458537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) width: 100%; 1558537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles)} 1658537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) 1758537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles)/* Custom thumb icon. */ 1858537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles).slider > input[type='range']::-webkit-slider-thumb { 1958537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) -webkit-appearance: none; 2058537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) background-position: center center; 2158537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) background-repeat: no-repeat; 2258537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) height: 24px; 2358537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) position: relative; 2458537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) z-index: 2; 2558537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles)} 2658537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) 2758537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles)/* Custom slider bar (we hide the standard one). */ 2858537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles).slider > .bar { 2958537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) /* In order to match the horizontal position of the standard slider bar 3058537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) left and right must be equal to 1/2 of the thumb icon width. */ 3158537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) left: 8px; 3258537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) right: 8px; 3358537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) bottom: 10px; 3458537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) pointer-events: none; /* Mouse events pass through to the standard input. */ 3558537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) position: absolute; 3658537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) top: 10px; 3758537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) background-image: url(../images/slider/slide_bar_center.png); 3858537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) height: 4px; 3958537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles)} 4058537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) 4158537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles).slider > .bar > .filled, 4258537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles).slider > .bar > .cap { 4358537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) position: absolute; 4458537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles)} 4558537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) 4658537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles)/* The filled portion of the slider bar to the left of the thumb. */ 4758537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles).slider > .bar > .filled { 4858537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) border-left-style: none; 4958537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) border-right-style: none; 5058537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) left: 0; 5158537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) width: 0; /* The element style.width is manipulated from the code. */ 5258537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles)} 5358537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) 5458537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles).slider > .bar > .cap.right { 5558537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) background-image: url(../images/slider/slider_bar_right.png); 5658537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) height: 4px; 5758537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) width: 4px; 5858537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) left: 100%; 5958537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles)} 6058537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) 6158537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles).slider > .bar > .filled { 6258537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) background-image: url(../images/slider/slide_bar_fill_center.png); 6358537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) height: 4px; 6458537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles)} 6558537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) 6658537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles).slider > .bar > .cap.left { 6758537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) background-image: url(../images/slider/slide_bar_fill_left.png); 6858537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) height: 4px; 6958537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) width: 4px; 7058537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) right: 100%; 7158537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles)} 7258537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) 7358537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles).slider.disabled > .bar { 7458537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) background-image: url(../images/slider/slide_bar_disabled_center.png); 7558537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles)} 7658537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) 7758537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles).slider.disabled > .bar > .filled { 7858537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) background-image: url(../images/slider/slide_bar_disabled_center.png); 7958537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles)} 8058537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) 8158537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles).slider.disabled > .bar > .cap.left { 8258537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) background-image: url(../images/slider/slide_bar_disabled_left.png); 8358537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles)} 8458537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) 8558537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles).slider.disabled > .bar > .cap.right { 8658537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) background-image: url(../images/slider/slide_bar_disabled_right.png); 8758537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles)} 8858537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) 8958537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles).slider.disabled, 9058537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles).slider.readonly { 9158537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) pointer-events: none; 9258537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles)} 9358537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) 9458537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles).slider { 9558537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) -webkit-box-flex: 1; 9658537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles)} 9758537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) 9858537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles).slider > input[type='range']::-webkit-slider-thumb { 9958537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) background-image: url(../images/slider/slider_thumb.png); 10058537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) width: 16px; 10158537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles)} 10258537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) 10358537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles).slider > input[type='range']::-webkit-slider-thumb:hover { 10458537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) background-image: url(../images/slider/slider_thumb_hover.png); 10558537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles)} 10658537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) 10758537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles).slider > input[type='range']::-webkit-slider-thumb:active { 10858537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) background-image: url(../images/slider/slider_thumb_down.png); 10958537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles)} 11058537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) 11158537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles).slider.disabled > input[type='range']::-webkit-slider-thumb { 11258537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles) background-image: url(../images/slider/slider_thumb_disabled.png); 11358537e28ecd584eab876aee8be7156509866d23aTorne (Richard Coles)} 114