1
+ /* Custom CSS */
2
+
3
+ .widget-slider .noUi-connect {
4
+ background : rgb (33 , 150 , 243 );
5
+ }
6
+
7
+ .widget-slider .noUi-horizontal {
8
+ height : var (--jp-widgets-slider-track-thickness );
9
+ }
10
+
11
+ .widget-slider .noUi-vertical {
12
+ width : var (--jp-widgets-slider-track-thickness );
13
+ }
14
+
15
+ .widget-slider .noUi-horizontal .noUi-handle {
16
+ width : var (--jp-widgets-slider-handle-size );
17
+ height : var (--jp-widgets-slider-handle-size );
18
+ border-radius : 50% ;
19
+ top : calc (
20
+ (
21
+ var (--jp-widgets-slider-track-thickness ) -
22
+ var (--jp-widgets-slider-handle-size )
23
+ ) / 2
24
+ );
25
+ right : calc (var (--jp-widgets-slider-handle-size ) / -2 );
26
+ }
27
+
28
+ .widget-slider .noUi-vertical .noUi-handle {
29
+ height : var (--jp-widgets-slider-handle-size );
30
+ width : var (--jp-widgets-slider-handle-size );
31
+ border-radius : 50% ;
32
+ right : calc (
33
+ (
34
+ var (--jp-widgets-slider-handle-size ) -
35
+ var (--jp-widgets-slider-track-thickness )
36
+ ) / -2
37
+ );
38
+ top : calc (var (--jp-widgets-slider-handle-size ) / -2 );
39
+ }
40
+
41
+ .widget-slider .noUi-handle : after {
42
+ content : none;
43
+ }
44
+
45
+ .widget-slider .noUi-handle : before {
46
+ content : none;
47
+ }
48
+
49
+ .widget-slider .noUi-target {
50
+ background : # fafafa ;
51
+ border-radius : 4px ;
52
+ border : 1px ;
53
+ /* box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB; */
54
+ }
55
+
56
+ .widget-slider .ui-slider {
57
+ border : var (--jp-widgets-slider-border-width ) solid var (--jp-layout-color3 );
58
+ background : var (--jp-layout-color3 );
59
+ box-sizing : border-box;
60
+ position : relative;
61
+ border-radius : 0px ;
62
+ }
63
+
64
+ .widget-slider .noUi-handle {
65
+ width : var (--jp-widgets-slider-handle-size );
66
+ border : 1px solid # d9d9d9 ;
67
+ border-radius : 3px ;
68
+ background : # fff ;
69
+ cursor : default;
70
+ box-shadow : none;
71
+ outline : none;
72
+ }
73
+
74
+ .widget-slider .noUi-target : not ([disabled ]) .noUi-handle : hover ,
75
+ .widget-slider .noUi-target : not ([disabled ]) .noUi-handle : focus {
76
+ background-color : var (--jp-widgets-slider-active-handle-color );
77
+ border : var (--jp-widgets-slider-border-width ) solid
78
+ var (--jp-widgets-slider-active-handle-color );
79
+ }
80
+
81
+ .widget-slider [disabled ].noUi-target {
82
+ opacity : 0.35 ;
83
+ }
84
+
85
+ .widget-slider .noUi-connects {
86
+ overflow : visible;
87
+ z-index : 0 ;
88
+ background : var (--jp-layout-color3 );
89
+ }
90
+
91
+ .widget-slider .noUi-vertical .noUi-connect {
92
+ width : calc (100% + 2px );
93
+ right : -1px ;
94
+ }
95
+
96
+ .widget-slider .noUi-horizontal .noUi-connect {
97
+ height : calc (100% + 2px );
98
+ top : -1px ;
99
+ }
0 commit comments