|
1 /* basic scrollbar styling */ |
|
2 /* vertical scrollbar */ |
|
3 .mCSB_container{ |
|
4 width:auto; |
|
5 /*margin-right:30px;*/ |
|
6 overflow:hidden; |
|
7 } |
|
8 .mCSB_container.mCS_no_scrollbar{ |
|
9 margin-right:0; |
|
10 } |
|
11 |
|
12 .facettes .mCustomScrollBox { |
|
13 /* add GI */ |
|
14 width:230px; |
|
15 } |
|
16 |
|
17 .mCustomScrollBox .mCSB_scrollTools{ |
|
18 width:16px; |
|
19 height:100%; |
|
20 top:0; |
|
21 right:0; |
|
22 } |
|
23 .mCSB_scrollTools .mCSB_draggerContainer{ |
|
24 height:100%; |
|
25 -webkit-box-sizing:border-box; |
|
26 -moz-box-sizing:border-box; |
|
27 box-sizing:border-box; |
|
28 } |
|
29 .mCSB_scrollTools .mCSB_buttonUp+.mCSB_draggerContainer{ |
|
30 padding-bottom:40px; |
|
31 } |
|
32 .mCSB_scrollTools .mCSB_draggerRail{ |
|
33 width:2px; |
|
34 height:100%; |
|
35 margin:0 auto; |
|
36 -webkit-border-radius:10px; |
|
37 -moz-border-radius:10px; |
|
38 border-radius:10px; |
|
39 } |
|
40 .mCSB_scrollTools .mCSB_dragger{ |
|
41 cursor:pointer; |
|
42 width:100%; |
|
43 height:90px; |
|
44 } |
|
45 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ |
|
46 width:9px; |
|
47 height:100%; |
|
48 margin:0 auto; |
|
49 text-align:center; |
|
50 } |
|
51 .mCSB_scrollTools .mCSB_buttonUp, |
|
52 .mCSB_scrollTools .mCSB_buttonDown{ |
|
53 height:20px; |
|
54 overflow:hidden; |
|
55 margin:0 auto; |
|
56 cursor:pointer; |
|
57 } |
|
58 .mCSB_scrollTools .mCSB_buttonDown{ |
|
59 bottom:0; |
|
60 margin-top:-40px; |
|
61 } |
|
62 /* horizontal scrollbar */ |
|
63 .mCSB_horizontal .mCSB_container{ |
|
64 height:auto; |
|
65 margin-right:0; |
|
66 margin-bottom:30px; |
|
67 overflow:hidden; |
|
68 } |
|
69 .mCSB_horizontal .mCSB_container.mCS_no_scrollbar{ |
|
70 margin-bottom:0; |
|
71 } |
|
72 .mCSB_horizontal.mCustomScrollBox .mCSB_scrollTools{ |
|
73 width:100%; |
|
74 height:16px; |
|
75 top:auto; |
|
76 right:auto; |
|
77 bottom:0; |
|
78 left:0; |
|
79 overflow:hidden; |
|
80 } |
|
81 .mCSB_horizontal .mCSB_scrollTools .mCSB_draggerContainer{ |
|
82 height:100%; |
|
83 width:auto; |
|
84 -webkit-box-sizing:border-box; |
|
85 -moz-box-sizing:border-box; |
|
86 box-sizing:border-box; |
|
87 overflow:hidden; |
|
88 } |
|
89 .mCSB_horizontal .mCSB_scrollTools .mCSB_buttonLeft+.mCSB_draggerContainer{ |
|
90 padding-bottom:0; |
|
91 padding-right:20px; |
|
92 } |
|
93 .mCSB_horizontal .mCSB_scrollTools .mCSB_draggerRail{ |
|
94 width:100%; |
|
95 height:2px; |
|
96 margin:7px 0; |
|
97 -webkit-border-radius:10px; |
|
98 -moz-border-radius:10px; |
|
99 border-radius:10px; |
|
100 } |
|
101 .mCSB_horizontal .mCSB_scrollTools .mCSB_dragger{ |
|
102 width:30px; |
|
103 height:100%; |
|
104 } |
|
105 .mCSB_horizontal .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ |
|
106 width:100%; |
|
107 height:4px; |
|
108 margin:6px auto; |
|
109 -webkit-border-radius:10px; |
|
110 -moz-border-radius:10px; |
|
111 border-radius:10px; |
|
112 } |
|
113 .mCSB_horizontal .mCSB_scrollTools .mCSB_buttonLeft, |
|
114 .mCSB_horizontal .mCSB_scrollTools .mCSB_buttonRight{ |
|
115 width:20px; |
|
116 height:100%; |
|
117 overflow:hidden; |
|
118 margin:0 auto; |
|
119 cursor:pointer; |
|
120 float:left; |
|
121 } |
|
122 .mCSB_horizontal .mCSB_scrollTools .mCSB_buttonRight{ |
|
123 right:0; |
|
124 bottom:auto; |
|
125 margin-left:-40px; |
|
126 margin-top:-16px; |
|
127 float:right; |
|
128 } |
|
129 |
|
130 /* default scrollbar colors and backgrounds */ |
|
131 .mCustomScrollBox .mCSB_scrollTools{ |
|
132 opacity:0.75; |
|
133 } |
|
134 .mCustomScrollBox:hover .mCSB_scrollTools{ |
|
135 opacity:1; |
|
136 } |
|
137 .mCSB_scrollTools .mCSB_draggerRail{ |
|
138 /* |
|
139 background:#000; /* rgba fallback */ |
|
140 /*background:rgba(0,0,0,0.4); |
|
141 filter:"alpha(opacity=40)"; -ms-filter:"alpha(opacity=40)"; /* old ie */ |
|
142 } |
|
143 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ |
|
144 background:#3b3b3b; |
|
145 } |
|
146 .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ |
|
147 background:#4d4d4d; |
|
148 } |
|
149 .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, |
|
150 .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ |
|
151 background:#4d4d4d; |
|
152 } |
|
153 .mCSB_scrollTools .mCSB_buttonUp, |
|
154 .mCSB_scrollTools .mCSB_buttonDown, |
|
155 .mCSB_scrollTools .mCSB_buttonLeft, |
|
156 .mCSB_scrollTools .mCSB_buttonRight{ |
|
157 background-image:url(mCSB_buttons.png); |
|
158 background-repeat:no-repeat; |
|
159 opacity:0.4; |
|
160 filter:"alpha(opacity=40)"; -ms-filter:"alpha(opacity=40)"; /* old ie */ |
|
161 } |
|
162 .mCSB_scrollTools .mCSB_buttonUp{ |
|
163 background-position:0 0; |
|
164 } |
|
165 .mCSB_scrollTools .mCSB_buttonDown{ |
|
166 background-position:0 -20px; |
|
167 } |
|
168 .mCSB_scrollTools .mCSB_buttonLeft{ |
|
169 background-position:0 -40px; |
|
170 } |
|
171 .mCSB_scrollTools .mCSB_buttonRight{ |
|
172 background-position:0 -56px; |
|
173 } |
|
174 .mCSB_scrollTools .mCSB_buttonUp:hover, |
|
175 .mCSB_scrollTools .mCSB_buttonDown:hover, |
|
176 .mCSB_scrollTools .mCSB_buttonLeft:hover, |
|
177 .mCSB_scrollTools .mCSB_buttonRight:hover{ |
|
178 opacity:0.75; |
|
179 filter:"alpha(opacity=75)"; -ms-filter:"alpha(opacity=75)"; /* old ie */ |
|
180 } |
|
181 .mCSB_scrollTools .mCSB_buttonUp:active, |
|
182 .mCSB_scrollTools .mCSB_buttonDown:active, |
|
183 .mCSB_scrollTools .mCSB_buttonLeft:active, |
|
184 .mCSB_scrollTools .mCSB_buttonRight:active{ |
|
185 opacity:0.9; |
|
186 filter:"alpha(opacity=90)"; -ms-filter:"alpha(opacity=90)"; /* old ie */ |
|
187 } |