3 @popup-height: 54 * @unit_base;
4 @popup-width: 45 * @unit_base;
5 @img-height: 37 * @unit_base;
6 @img-width: 37 * @unit_base;
7 @handle-height: 36 * @unit_base;
8 @handle-width: 36 * @unit_base;
14 select.ui-slider-switch {
19 .ui-slider-icon-container {
21 vertical-align: middle;
23 height: 18 * @unit_base;
24 margin-left: 16 * @unit_base;
25 margin-right: 16 * @unit_base;
26 margin-top: 9 * @unit_base;
27 margin-bottom: 9 * @unit_base;
29 background-image: -webkit-gradient(
33 color-stop(0, @color_progress_bar1),
34 color-stop(1, @color_progress_bar0)
36 .LESSbox-shadow(1px, 1px, 0px, white);
37 .LESSborder-radius-all( 10 * @unit_base );
40 .ui-slider-icon-container {
41 margin-left: 58 * @unit_base;
42 margin-right: 58 * @unit_base;
45 .ui-slider-left-volume,
46 .ui-slider-left-bright {
48 vertical-align: middle;
51 left: -50 * @unit_base;
55 background: url(images/controls/00_slider_button_brightness_01.png) no-repeat;
56 .LESSbackground-size(@img-width, @img-height);
59 .ui-slider-left-volume {
60 background: url(images/controls/00_slider_button_volume_01.png) no-repeat;
61 .LESSbackground-size(@img-width, @img-height);
64 .ui-slider-right-volume,
65 .ui-slider-right-bright {
69 right: -50 * @unit_base;
73 vertical-align: middle;
75 background: url(images/controls/00_slider_button_brightness_02.png) no-repeat;
76 .LESSbackground-size(@img-width, @img-height);
79 .ui-slider-right-volume {
80 background: url(images/controls/00_slider_button_volume_02.png) no-repeat;
81 .LESSbackground-size(@img-width, @img-height);
84 .ui-slider-left-text {
88 left: -52 * @unit_base;
89 height: 37 * @unit_base;
90 width: 37 * @unit_base;
93 color: rgb(100, 100, 100);
96 .ui-slider-right-text {
100 right: -52 * @unit_base;
101 height: 37 * @unit_base;
102 width: 37 * @unit_base;
105 color: rgb(100, 100, 100);
108 div.ui-slider:not(.ui-toggle-switch) {
112 height: 7 * @unit_base;
113 margin-left: 5 * @unit_base;
114 margin-right: 5 * @unit_base;
116 .LESSborder-radius-all( 10 * @unit_base );
119 border-color: @color_progress_border;
120 .LESSbox-shadow(1px, -1px, 1px, @color_progress_border);
121 background-color: @color_progress_bar0;
128 padding: 0.3rem 0 0 0;
131 color: @color_slider_handle_text;
139 width: 36 * @unit_base;
140 height: 36 * @unit_base;
141 margin-left: -19 * @unit_base;
143 color: @color_slider_handle_text;
146 background: url(images/controls/00_slider_handle.png) no-repeat;
147 .LESSbackground-size(@handle-width, @handle-height);
151 position: absolute !important;
155 height: @popup-height;
156 top: -60 * @unit_base;
159 color: @color_slider_popup_text;
163 background: url(images/controls/00_slider_popup_bg.png) no-repeat;
164 .LESSbackground-size(@popup-width, @popup-height);
170 height: 7 * @unit_base;
173 background-image: -webkit-gradient(
177 color-stop(0, @color_progress_value0),
178 color-stop(1, @color_progress_value1)
180 .LESSborder-radius-all( 10 * @unit_base );
181 .LESSbox-shadow(-1px, -1px, 1px, rgb(179, 200, 226));
184 .ui-slider-handle-press {
188 width: 37 * @unit_base;
189 height: 37 * @unit_base;
192 background: url(images/controls/00_slider_handle_press.png) no-repeat;
193 .LESSbackground-size(@handle-width, @handle-height);