@@ -13,12 +13,12 @@ input[type=button], .button {
1313 background-color : # 00a896 ;
1414 box-shadow : inset 0px 3px 2px 0px rgba (0 , 0 , 0 , 0.28 ); }
1515 body .light input [type = button ], body .light .button {
16- background-color : # 7f8c8d ; }
16+ background-color : # 159386 ; }
1717 body .light input [type = button ]: active , body .light input [type = button ].enabled , body .light .button : active , body .light .button .enabled {
1818 background-color : # 00a896 ;
1919 box-shadow : inset 0px 3px 2px 0px rgba (0 , 0 , 0 , 0.28 ); }
2020 body .dark input [type = button ], body input [type = button ], body .dark .button , body .button {
21- background-color : # 7f8c8d ; }
21+ background-color : # b8901a ; }
2222 body .dark input [type = button ]: active , body input [type = button ]: active , body .dark input [type = button ].enabled , body input [type = button ].enabled , body .dark .button : active , body .button : active , body .dark .button .enabled , body .button .enabled {
2323 background-color : # d29d00 ;
2424 box-shadow : inset 0px 3px 2px 0px rgba (0 , 0 , 0 , 0.28 ); }
@@ -52,7 +52,8 @@ span.listen-button img, span.listen-button svg {
5252 font-weight : normal;
5353 font-style : normal; }
5454body {
55- font-family : "bitstream_vera_sansroman" , Arial, sans-serif; }
55+ font-family : "bitstream_vera_sansroman" , Arial, sans-serif;
56+ -webkit-tap-highlight-color : transparent !important ; }
5657
5758input [type = "text" ] {
5859 font-family : "courier_prime_coderegular" , monospace; }
@@ -105,7 +106,7 @@ input[type="text"] {
105106 justify-content : center; }
106107 .node > div .control .kind_slider {
107108 display : block; }
108- .node > div .control .kind_slider > * {
109+ .node > div .control .kind_slider . rangeSlider__horizontal {
109110 margin-top : 20px ; }
110111 .node > div .control input {
111112 flex : 1 ; }
@@ -191,6 +192,89 @@ input[type="text"] {
191192 .node .kind_color .layout_default .picker_wrapper .picker_done {
192193 display : none; }
193194
195+ .rangeSlider , .rangeSlider__fill {
196+ display : block;
197+ box-shadow : inset 0 1px 3px rgba (0 , 0 , 0 , 0.3 );
198+ border-radius : 10px ; }
199+
200+ .rangeSlider {
201+ position : relative;
202+ background : # 7f8c8d ; }
203+
204+ .rangeSlider__horizontal {
205+ height : 20px ;
206+ width : 100% ; }
207+
208+ .rangeSlider__vertical {
209+ height : 100% ;
210+ width : 20px ; }
211+
212+ .rangeSlider--disabled {
213+ filter : progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
214+ opacity : 0.4 ; }
215+
216+ .rangeSlider__fill {
217+ background : # 16a085 ;
218+ position : absolute;
219+ z-index : 2 ; }
220+
221+ .rangeSlider__fill__horizontal {
222+ height : 100% ;
223+ top : 0 ;
224+ left : 0 ; }
225+
226+ .rangeSlider__fill__vertical {
227+ width : 100% ;
228+ bottom : 0 ;
229+ left : 0 ; }
230+
231+ .rangeSlider__handle {
232+ border : 1px solid # ccc ;
233+ cursor : pointer;
234+ display : inline-block;
235+ width : 40px ;
236+ height : 40px ;
237+ position : absolute;
238+ z-index : 3 ;
239+ background : white linear-gradient (rgba (255 , 255 , 255 , 0 ), rgba (0 , 0 , 0 , 0.1 ));
240+ box-shadow : 0 0 8px rgba (0 , 0 , 0 , 0.3 );
241+ border-radius : 50% ; }
242+
243+ .rangeSlider__handle__horizontal {
244+ top : -10px ; }
245+
246+ .rangeSlider__handle__vertical {
247+ left : -10px ;
248+ bottom : 0 ; }
249+
250+ .rangeSlider__handle : after {
251+ content : "" ;
252+ display : block;
253+ width : 18px ;
254+ height : 18px ;
255+ margin : auto;
256+ position : absolute;
257+ top : 0 ;
258+ right : 0 ;
259+ bottom : 0 ;
260+ left : 0 ;
261+ background-image : linear-gradient (rgba (0 , 0 , 0 , 0.13 ), rgba (255 , 255 , 255 , 0 ));
262+ border-radius : 50% ; }
263+
264+ .rangeSlider__handle : active {
265+ background-image : linear-gradient (rgba (0 , 0 , 0 , 0.1 ), rgba (0 , 0 , 0 , 0.12 )); }
266+
267+ input [type = "range" ]: focus + .rangeSlider .rangeSlider__handle {
268+ box-shadow : 0 0 8px rgba (142 , 68 , 173 , 0.9 ); }
269+
270+ .rangeSlider__buffer {
271+ z-index : 1 ;
272+ position : absolute;
273+ top : 3px ;
274+ height : 14px ;
275+ background : # 2c3e50 ;
276+ border-radius : 10px ; }
277+
194278body .dark , body {
195279 background-color : # 262626 ;
196280 color : # 839496 ; }
0 commit comments