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 .mCustomScrollBox .mCSB_scrollTools{ |
|
12 width:16px; |
|
13 height:100%; |
|
14 top:0; |
|
15 right:0; |
|
16 } |
|
17 .mCSB_scrollTools .mCSB_draggerContainer{ |
|
18 height:100%; |
|
19 -webkit-box-sizing:border-box; |
|
20 -moz-box-sizing:border-box; |
|
21 box-sizing:border-box; |
|
22 } |
|
23 .mCSB_scrollTools .mCSB_buttonUp+.mCSB_draggerContainer{ |
|
24 padding-bottom:40px; |
|
25 } |
|
26 .mCSB_scrollTools .mCSB_draggerRail{ |
|
27 width:2px; |
|
28 height:100%; |
|
29 margin:0 auto; |
|
30 -webkit-border-radius:10px; |
|
31 -moz-border-radius:10px; |
|
32 border-radius:10px; |
|
33 } |
|
34 .mCSB_scrollTools .mCSB_dragger{ |
|
35 width:100%; |
|
36 height:30px; |
|
37 } |
|
38 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ |
|
39 width:4px; |
|
40 height:100%; |
|
41 margin:0 auto; |
|
42 -webkit-border-radius:10px; |
|
43 -moz-border-radius:10px; |
|
44 border-radius:10px; |
|
45 text-align:center; |
|
46 } |
|
47 .mCSB_scrollTools .mCSB_buttonUp, |
|
48 .mCSB_scrollTools .mCSB_buttonDown{ |
|
49 height:20px; |
|
50 overflow:hidden; |
|
51 margin:0 auto; |
|
52 cursor:pointer; |
|
53 } |
|
54 .mCSB_scrollTools .mCSB_buttonDown{ |
|
55 bottom:0; |
|
56 margin-top:-40px; |
|
57 } |
|
58 /* horizontal scrollbar */ |
|
59 .mCSB_horizontal .mCSB_container{ |
|
60 height:auto; |
|
61 margin-right:0; |
|
62 margin-bottom:30px; |
|
63 overflow:hidden; |
|
64 } |
|
65 .mCSB_horizontal .mCSB_container.mCS_no_scrollbar{ |
|
66 margin-bottom:0; |
|
67 } |
|
68 .mCSB_horizontal.mCustomScrollBox .mCSB_scrollTools{ |
|
69 width:100%; |
|
70 height:16px; |
|
71 top:auto; |
|
72 right:auto; |
|
73 bottom:0; |
|
74 left:0; |
|
75 overflow:hidden; |
|
76 } |
|
77 .mCSB_horizontal .mCSB_scrollTools .mCSB_draggerContainer{ |
|
78 height:100%; |
|
79 width:auto; |
|
80 -webkit-box-sizing:border-box; |
|
81 -moz-box-sizing:border-box; |
|
82 box-sizing:border-box; |
|
83 overflow:hidden; |
|
84 } |
|
85 .mCSB_horizontal .mCSB_scrollTools .mCSB_buttonLeft+.mCSB_draggerContainer{ |
|
86 padding-bottom:0; |
|
87 padding-right:20px; |
|
88 } |
|
89 .mCSB_horizontal .mCSB_scrollTools .mCSB_draggerRail{ |
|
90 width:100%; |
|
91 height:2px; |
|
92 margin:7px 0; |
|
93 -webkit-border-radius:10px; |
|
94 -moz-border-radius:10px; |
|
95 border-radius:10px; |
|
96 } |
|
97 .mCSB_horizontal .mCSB_scrollTools .mCSB_dragger{ |
|
98 width:30px; |
|
99 height:100%; |
|
100 } |
|
101 .mCSB_horizontal .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ |
|
102 width:100%; |
|
103 height:4px; |
|
104 margin:6px auto; |
|
105 -webkit-border-radius:10px; |
|
106 -moz-border-radius:10px; |
|
107 border-radius:10px; |
|
108 } |
|
109 .mCSB_horizontal .mCSB_scrollTools .mCSB_buttonLeft, |
|
110 .mCSB_horizontal .mCSB_scrollTools .mCSB_buttonRight{ |
|
111 width:20px; |
|
112 height:100%; |
|
113 overflow:hidden; |
|
114 margin:0 auto; |
|
115 cursor:pointer; |
|
116 float:left; |
|
117 } |
|
118 .mCSB_horizontal .mCSB_scrollTools .mCSB_buttonRight{ |
|
119 right:0; |
|
120 bottom:auto; |
|
121 margin-left:-40px; |
|
122 margin-top:-16px; |
|
123 float:right; |
|
124 } |
|
125 |
|
126 /* default scrollbar colors and backgrounds */ |
|
127 .mCustomScrollBox .mCSB_scrollTools{ |
|
128 opacity:0.75; |
|
129 } |
|
130 .mCustomScrollBox:hover .mCSB_scrollTools{ |
|
131 opacity:1; |
|
132 } |
|
133 .mCSB_scrollTools .mCSB_draggerRail{ |
|
134 background:#000; /* rgba fallback */ |
|
135 background:rgba(0,0,0,0.4); |
|
136 filter:"alpha(opacity=40)"; -ms-filter:"alpha(opacity=40)"; /* old ie */ |
|
137 } |
|
138 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ |
|
139 background:#fff; /* rgba fallback */ |
|
140 background:rgba(255,255,255,0.75); |
|
141 filter:"alpha(opacity=75)"; -ms-filter:"alpha(opacity=75)"; /* old ie */ |
|
142 } |
|
143 .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ |
|
144 background:rgba(255,255,255,0.85); |
|
145 filter:"alpha(opacity=85)"; -ms-filter:"alpha(opacity=85)"; /* old ie */ |
|
146 } |
|
147 .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, |
|
148 .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ |
|
149 background:rgba(255,255,255,0.9); |
|
150 filter:"alpha(opacity=90)"; -ms-filter:"alpha(opacity=90)"; /* old ie */ |
|
151 } |
|
152 .mCSB_scrollTools .mCSB_buttonUp, |
|
153 .mCSB_scrollTools .mCSB_buttonDown, |
|
154 .mCSB_scrollTools .mCSB_buttonLeft, |
|
155 .mCSB_scrollTools .mCSB_buttonRight{ |
|
156 background-image:url(../mCSB_buttons.png); |
|
157 background-repeat:no-repeat; |
|
158 opacity:0.4; |
|
159 filter:"alpha(opacity=40)"; -ms-filter:"alpha(opacity=40)"; /* old ie */ |
|
160 } |
|
161 .mCSB_scrollTools .mCSB_buttonUp{ |
|
162 background-position:0 0; |
|
163 } |
|
164 .mCSB_scrollTools .mCSB_buttonDown{ |
|
165 background-position:0 -20px; |
|
166 } |
|
167 .mCSB_scrollTools .mCSB_buttonLeft{ |
|
168 background-position:0 -40px; |
|
169 } |
|
170 .mCSB_scrollTools .mCSB_buttonRight{ |
|
171 background-position:0 -56px; |
|
172 } |
|
173 .mCSB_scrollTools .mCSB_buttonUp:hover, |
|
174 .mCSB_scrollTools .mCSB_buttonDown:hover, |
|
175 .mCSB_scrollTools .mCSB_buttonLeft:hover, |
|
176 .mCSB_scrollTools .mCSB_buttonRight:hover{ |
|
177 opacity:0.75; |
|
178 filter:"alpha(opacity=75)"; -ms-filter:"alpha(opacity=75)"; /* old ie */ |
|
179 } |
|
180 .mCSB_scrollTools .mCSB_buttonUp:active, |
|
181 .mCSB_scrollTools .mCSB_buttonDown:active, |
|
182 .mCSB_scrollTools .mCSB_buttonLeft:active, |
|
183 .mCSB_scrollTools .mCSB_buttonRight:active{ |
|
184 opacity:0.9; |
|
185 filter:"alpha(opacity=90)"; -ms-filter:"alpha(opacity=90)"; /* old ie */ |
|
186 } |
|
187 |
|
188 /* custom styling */ |
|
189 /* content_1 scrollbar */ |
|
190 .content_1 .mCustomScrollBox .mCSB_scrollTools{ |
|
191 padding:5px 0; |
|
192 -webkit-box-sizing:border-box; |
|
193 -moz-box-sizing:border-box; |
|
194 box-sizing:border-box; |
|
195 } |
|
196 /* content_2 scrollbar */ |
|
197 .content_2 .mCSB_scrollTools .mCSB_draggerRail{ |
|
198 width:6px; |
|
199 box-shadow:1px 1px 1px rgba(255,255,255,0.1); |
|
200 } |
|
201 .content_2 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ |
|
202 background:rgba(255,255,255,0.4); |
|
203 filter:"alpha(opacity=40)"; -ms-filter:"alpha(opacity=40)"; /* old ie */ |
|
204 } |
|
205 .content_2 .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ |
|
206 background:rgba(255,255,255,0.5); |
|
207 filter:"alpha(opacity=50)"; -ms-filter:"alpha(opacity=50)"; /* old ie */ |
|
208 } |
|
209 .content_2 .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, |
|
210 .content_2 .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ |
|
211 background:rgba(255,255,255,0.6); |
|
212 filter:"alpha(opacity=60)"; -ms-filter:"alpha(opacity=60)"; /* old ie */ |
|
213 } |
|
214 /* content_3 scrollbar */ |
|
215 .content_3 .mCustomScrollBox .mCSB_scrollTools{ |
|
216 padding:10px 0; |
|
217 -webkit-box-sizing:border-box; |
|
218 -moz-box-sizing:border-box; |
|
219 box-sizing:border-box; |
|
220 } |
|
221 .content_3 .mCSB_scrollTools .mCSB_draggerRail{ |
|
222 width:0; |
|
223 border-right:1px dashed #09C; |
|
224 } |
|
225 .content_3 .mCSB_scrollTools .mCSB_dragger{ |
|
226 height:11px; |
|
227 } |
|
228 .content_3 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ |
|
229 width:11px; |
|
230 -webkit-border-radius:11px; |
|
231 -moz-border-radius:11px; |
|
232 border-radius:11px; |
|
233 background:#09C; |
|
234 } |
|
235 /* content_4 scrollbar */ |
|
236 .content_4 .mCustomScrollBox .mCSB_scrollTools{ |
|
237 padding:20px 0; |
|
238 -webkit-box-sizing:border-box; |
|
239 -moz-box-sizing:border-box; |
|
240 box-sizing:border-box; |
|
241 } |
|
242 .content_4 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ |
|
243 width:8px; |
|
244 -webkit-border-radius:2px; |
|
245 -moz-border-radius:2px; |
|
246 border-radius:2px; |
|
247 background:#d0b9a0; |
|
248 -webkit-box-shadow:1px 1px 5px rgba(0,0,0,0.5); |
|
249 -moz-box-shadow:1px 1px 5px rgba(0,0,0,0.5); |
|
250 box-shadow:1px 1px 5px rgba(0,0,0,0.5); |
|
251 } |
|
252 .content_4 .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, |
|
253 .content_4 .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ |
|
254 background:#dfcdb9; |
|
255 } |
|
256 .content_4 .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, |
|
257 .content_4 .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ |
|
258 -webkit-box-shadow:0 0 3px rgba(0,0,0,0.5); |
|
259 -moz-box-shadow:0 0 3px rgba(0,0,0,0.5); |
|
260 box-shadow:0 0 3px rgba(0,0,0,0.5); |
|
261 } |
|
262 /* content_5 scrollbar */ |
|
263 .content_5 .mCustomScrollBox .mCSB_scrollTools{ |
|
264 padding:0 5px; |
|
265 -webkit-box-sizing:border-box; |
|
266 -moz-box-sizing:border-box; |
|
267 box-sizing:border-box; |
|
268 } |
|
269 .content_5 .mCSB_scrollTools .mCSB_draggerRail{ |
|
270 background:#000; /* rgba fallback */ |
|
271 background:rgba(0,0,0,0.2); |
|
272 } |
|
273 .content_5 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ |
|
274 height:2px; |
|
275 margin:7px auto; |
|
276 background:#000; /* rgba fallback */ |
|
277 background:rgba(0,0,0,0.75); |
|
278 } |
|
279 .content_5 .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ |
|
280 background:rgba(0,0,0,0.85); |
|
281 } |
|
282 .content_5 .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ |
|
283 background:rgba(0,0,0,0.9); |
|
284 } |
|
285 .content_5 .mCSB_scrollTools .mCSB_buttonLeft{ |
|
286 background-position:-100px -40px; |
|
287 } |
|
288 .content_5 .mCSB_scrollTools .mCSB_buttonRight{ |
|
289 background-position:-100px -56px; |
|
290 } |
|
291 /* content_8 scrollbar */ |
|
292 .content_8 .mCSB_scrollTools .mCSB_draggerRail{ |
|
293 width:0px; |
|
294 border-left:1px solid rgba(0,0,0,0.8); |
|
295 border-right:1px solid rgba(255,255,255,0.2); |
|
296 } |
|