PluginProbe
Visual Slider / trunk
Visual Slider vtrunk
visual-slider / assets / css / glider.css

glider.css in Visual Slider trunk, at assets/css/glider.css

471 lines 14.5 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .vs-single .vs-slide-item{
2 position:relative;
3 }
4 .vs-single .vs-slide-item {
5 top: 0;
6 opacity:1 !important;
7 overflow:hidden;
8 left: 0;
9 height:100%;
10 margin-right: 0;
11 width: 100%;
12
13 }
14 .vs-single .vs-slide-list{
15 padding-bottom: calc(100% / calc(var(--vs-wt) / var(--vs-ht))) !important;
16 }
17 .vs-glider .vs-slide-inner{
18 border-radius:var(--vs-glo-rd);
19 border-color:var(--vs-glo-br-cr);
20 border-width:var(--vs-glo-br-wt);
21 border-style:var(--vs-glo-br-st);
22 box-shadow:var(--vs-glo-sd);
23 background-color:var(--vs-glo-bg-cr);
24 }
25 .vs-glider{
26 --vs-main-gp:var(--vs-gp,0);
27 --vs-main-gp-px:calc(var(--vs-main-gp,0) * 1px);
28 --vs-wt-px:calc(var(--vs-wt) * 1px);
29 visibility:visible !important;
30 }
31 .vs-glider .vs-slide-list{
32 width:calc(100% + var(--vs-main-gp-px))!important;
33 margin:calc(var(--vs-main-gp-px) / -2);
34 float:right;
35 position:relative
36 }
37 .vs-glider .vs-slide-list{
38 display:grid!important;
39 visibility:visible !important;
40 position:relative;
41 grid-template-columns:repeat(var(--vs-flx,1),1fr)!important;
42 }
43
44 .vs-glider .vs-slide-item{
45
46
47 --vs-item-ratio:calc(var(--vs-ratio) * var(--vs-ratio-sz,1));
48
49 --vs-item-wt:calc((var(--vs-wt) + var(--vs-gp)) / var(--vs-flx));
50 --vs-item-wt-gp:calc(var(--vs-item-wt) - var(--vs-gp));
51 --vs-item-ht-gp: calc((var(--vs-item-wt) * (var(--vs-item-ratio) * 0.01)) - var(--vs-main-gp));
52 --vs-item-sc-wt:calc((var(--vs-sc-wt) + var(--vs-main-gp)) / var(--vs-flx));
53 --vs-item-sc-wt-gp:calc(var(--vs-item-sc-wt) - var(--vs-main-gp));
54
55
56 --vs-sc:calc(var(--vs-item-sc-wt-gp) / var(--vs-item-wt-gp));
57
58
59
60 padding-bottom: calc(var(--vs-item-ratio) * 1%);
61 width:100%;
62 position:relative;
63
64 }
65
66 .vs-glider .vs-slide-inner{
67 width: calc(100% - var(--vs-main-gp-px));
68 height: calc(100% - var(--vs-main-gp-px));
69 float: right;
70 position:absolute;
71 overflow: hidden;
72 margin: calc(var(--vs-main-gp-px) / 2);
73
74 }
75 .vs-glider .vs-layer-list{
76
77 margin:0px !important;
78
79
80 width: calc(var(--vs-item-wt-gp) * 1px) !important;
81 height: calc(var(--vs-item-ht-gp) * 1px) !important;
82 transform: translate(-50%,-50%) scale(var(--vs-sc,1)) !important;
83 left: 50%;
84 position:absolute !important;
85 top: 50%;
86 right:auto;
87 }
88
89
90
91
92 /*--------------------------------------------------------------------------------------------------------------------
93 Desktop
94 --------------------------------------------------------------------------------------------------------------------*/
95 .vs-glider_1,
96 .vs-glider_7 .vs-slide-item:first-child{
97 --vs-flx:1 ;
98 }
99 .vs-glider_8 .vs-slide-item:first-child,
100 .vs-glider_27 .vs-slide-item:nth-child(2),
101
102 .vs-glider_9 .vs-slide-item:first-child{
103 --vs-flx:1.331 ;
104 }
105 .vs-glider_10 .vs-slide-item:first-child,
106 .vs-glider_20 .vs-slide-item:nth-child(2),
107 .vs-glider_21 .vs-slide-item:nth-child(2),
108 .vs-glider_11 .vs-slide-item:first-child{
109 --vs-flx:1.5 ;
110 }
111 .vs-glider_2,
112 .vs-glider_7,
113 .vs-glider_12,
114 .vs-glider_13 .vs-slide-item:first-child,
115 .vs-glider_14 .vs-slide-item:first-child,
116 .vs-glider_14 .vs-slide-item:nth-child(2),
117 .vs-glider_15 .vs-slide-item:first-child,
118 .vs-glider_16 .vs-slide-item:first-child,
119 .vs-glider_17 .vs-slide-item:first-child,
120 .vs-glider_18,
121 .vs-glider_29 .vs-slide-item:first-child,
122 .vs-glider_19 .vs-slide-item,
123 .vs-glider_30 .vs-slide-item:nth-child(5){
124 --vs-flx:2 ;
125 }
126 .vs-glider_3,
127 .vs-glider_8,
128 .vs-glider_10,
129 .vs-glider_11,
130 .vs-glider_19 .vs-slide-item:nth-child(n + 3),
131 .vs-glider_20,
132 .vs-glider_21,
133
134 .vs-glider_22,
135 .vs-glider_23,
136 .vs-glider_23,
137 .vs-glider_24,
138 .vs-glider_25,
139 .vs-glider_26 .vs-slide-item {
140 --vs-flx:3 ;
141 }
142 .vs-glider_4,
143 .vs-glider_8,
144 .vs-glider_9,
145 .vs-glider_13,
146 .vs-glider_14,
147 .vs-glider_15,
148 .vs-glider_16,
149 .vs-glider_17,
150 .vs-glider_27,
151 .vs-glider_29,
152 .vs-glider_26 .vs-slide-item:nth-child(n + 4),
153 .vs-glider_28,
154 .vs-glider_30 {
155 --vs-flx:4 ;
156 }
157 .vs-glider_5{
158 --vs-flx:5 ;
159 }
160 .vs-glider_6,
161 .vs-glider_19 {
162 --vs-flx:6 ;
163 }
164 .vs-glider_26 {
165 --vs-flx:12 ;
166
167 }
168 .vs-in-desktop.vs-glider_9 .vs-slide-item:first-child{
169 grid-column-end: 4;
170 grid-row-end: 4;
171 grid-column-start: 1;
172 grid-row-start: 1;
173 }
174
175 .vs-in-desktop.vs-glider_11 .vs-slide-item:first-child,
176 .vs-in-desktop.vs-glider_14 .vs-slide-item:first-child,
177 .vs-in-desktop.vs-glider_15 .vs-slide-item:first-child,
178 .vs-in-desktop.vs-glider_16 .vs-slide-item:first-child,
179 .vs-in-desktop.vs-glider_17 .vs-slide-item:first-child{
180 grid-column-start: 1;
181 grid-column-end: 3;
182 grid-row-start: 1;
183 grid-row-end: 3;
184 }
185 .vs-in-desktop.vs-glider_16 .vs-slide-item:nth-child(4){
186 grid-column-start: 4;
187 grid-column-end: 5;
188 }
189 .vs-in-desktop.vs-glider_12 .vs-slide-item:first-child,
190 .vs-in-desktop.vs-glider_15 .vs-slide-item:nth-child(2),
191 .vs-in-desktop.vs-glider_16 .vs-slide-item:nth-child(4),
192 .vs-in-desktop.vs-glider_18 .vs-slide-item:nth-child(3),
193 .vs-in-desktop.vs-glider_21 .vs-slide-item:first-child,
194 .vs-in-desktop.vs-glider_22 .vs-slide-item:first-child,
195 .vs-in-desktop.vs-glider_22 .vs-slide-item:nth-child(4),
196 .vs-in-desktop.vs-glider_23 .vs-slide-item:first-child,
197 .vs-in-desktop.vs-glider_24 .vs-slide-item:nth-child(3),
198 .vs-in-desktop.vs-glider_25 .vs-slide-item:nth-child(5),
199 .vs-in-desktop.vs-glider_28 .vs-slide-item:first-child,
200 .vs-in-desktop.vs-glider_28 .vs-slide-item:nth-child(4),
201 .vs-in-desktop.vs-glider_30 .vs-slide-item:nth-child(5){
202 grid-row-start: 1;
203 grid-row-end: 3;
204 }
205 .vs-in-desktop.vs-glider_20 .vs-slide-item:nth-child(2) {
206 grid-column-start: 2;
207 grid-column-end: 4;
208 }
209
210 .vs-in-desktop.vs-glider_29 .vs-slide-item:first-child{
211 grid-column-start: 2;
212 grid-column-end: 4;
213 grid-row-start: 1;
214 grid-row-end: 3;
215 }
216 .vs-in-desktop.vs-glider_22 .vs-slide-item:nth-child(4),
217 .vs-in-desktop.vs-glider_25 .vs-slide-item:nth-child(5),
218 .vs-in-desktop.vs-glider_28 .vs-slide-item:nth-child(4){
219 grid-column-start: 3;
220 grid-column-end: 4;
221 }
222 .vs-in-desktop.vs-glider_27 .vs-slide-item:nth-child(2){
223 grid-column-start: 2;
224 grid-column-end: 5;
225 }
226 .vs-in-desktop.vs-glider_30 .vs-slide-item:nth-child(5){
227 grid-column-start: 3;
228 grid-column-end: 5;
229 }
230 .vs-in-desktop.vs-glider_18 .vs-slide-item:nth-child(3),
231 .vs-in-desktop.vs-glider_24 .vs-slide-item:nth-child(3){
232 grid-column-start: 2;
233 grid-column-end: 3;
234 }
235 .vs-in-desktop.vs-glider_7 .vs-slide-item:first-child,
236 .vs-in-desktop.vs-glider_10 .vs-slide-item:first-child,
237 .vs-in-desktop.vs-glider_13 .vs-slide-item:first-child,
238 .vs-in-desktop.vs-glider_14 .vs-slide-item:nth-child(2),
239 .vs-in-desktop.vs-glider_19 .vs-slide-item:nth-child(n + 3),
240 .vs-in-desktop.vs-glider_21 .vs-slide-item:nth-child(2) {
241 grid-column-end: span 2;
242 }
243 .vs-in-desktop.vs-glider_8 .vs-slide-item:first-child,
244 .vs-in-desktop.vs-glider_19 .vs-slide-item,
245 .vs-in-desktop.vs-glider_26 .vs-slide-item:nth-child(n + 4){
246 grid-column-end: span 3;
247 }
248 .vs-in-desktop.vs-glider_26 .vs-slide-item{
249 grid-column-end: span 4;
250 }
251
252
253 /*--------------------------------------------------------------------------------------------------------------------
254 Glider Ratio
255 --------------------------------------------------------------------------------------------------------------------*/
256
257 .vs-glider_8 .vs-slide-item:first-child,
258 .vs-glider_27 .vs-slide-item:nth-child(2){
259 --vs-ratio-sz:0.331 ;
260 }
261
262 .vs-glider_7 .vs-slide-item:first-child,
263 .vs-glider_10 .vs-slide-item:first-child,
264 .vs-glider_13 .vs-slide-item:first-child,
265 .vs-glider_14 .vs-slide-item:nth-child(2),
266 .vs-glider_20 .vs-slide-item:nth-child(2),
267 .vs-glider_21 .vs-slide-item:nth-child(2){
268 --vs-ratio-sz:0.5;
269 }
270 .vs-glider_12 .vs-slide-item:first-child,
271 .vs-glider_15 .vs-slide-item:nth-child(2),
272 .vs-glider_16 .vs-slide-item:nth-child(4),
273 .vs-glider_18 .vs-slide-item:nth-child(3),
274 .vs-glider_21 .vs-slide-item:first-child,
275
276 .vs-glider_22 .vs-slide-item:first-child,
277 .vs-glider_22 .vs-slide-item:nth-child(4),
278 .vs-glider_23 .vs-slide-item:first-child,
279 .vs-glider_24 .vs-slide-item:nth-child(3),
280 .vs-glider_25 .vs-slide-item:nth-child(5),
281 .vs-glider_28 .vs-slide-item:first-child,
282 .vs-glider_28 .vs-slide-item:nth-child(4){
283 --vs-ratio-sz:2;
284 }
285 /*--------------------------------------------------------------------------------------------------------------------
286 Tablet
287 --------------------------------------------------------------------------------------------------------------------*/
288 .vs-in-tablet.vs-glider{
289 --vs-main-gp:var(--vs-tab-gp,var(--vs-gp,0));
290 }
291 .vs-in-tablet.vs-glider .vs-slide-list{
292 grid-template-columns:repeat(var(--vs-tab-flx,1),1fr)!important;
293 }
294
295 .vs-in-tablet.vs-glider .vs-slide-item{
296 --vs-item-sc-wt:calc((var(--vs-sc-wt) + var(--vs-main-gp)) / var(--vs-tab-flx));
297 }
298
299 .vs-in-tablet.vs-has-tablet.vs-glider .vs-slide-item{
300 --vs-item-ratio:calc(var(--vs-tab-ratio) * var(--vs-tab-ratio-sz,1));
301 --vs-item-wt:calc((var(--vs-tab-wt) + var(--vs-main-gp)) / var(--vs-tab-flx));
302 --vs-item-wt-gp:calc(var(--vs-item-wt) - var(--vs-main-gp));
303 --vs-item-sc-wt:calc((var(--vs-sc-wt) + var(--vs-main-gp)) / var(--vs-tab-flx));
304
305 }
306 .vs-tablet_glider_1,
307 .vs-tablet_glider_4 .vs-slide-item:first-child,
308 .vs-tablet_glider_5 .vs-slide-item:first-child{
309 --vs-tab-flx:1 ;
310 }
311
312 .vs-tablet_glider_6 .vs-slide-item:first-child,
313 .vs-tablet_glider_7 .vs-slide-item:first-child,
314 .vs-tablet_glider_11 .vs-slide-item:nth-child(2),
315 .vs-tablet_glider_12 .vs-slide-item:nth-child(2)
316 {
317 --vs-tab-flx:1.5 ;
318 }
319 .vs-tablet_glider_2,
320 .vs-tablet_glider_4,
321 .vs-tablet_glider_5,
322 .vs-tablet_glider_8,
323 .vs-tablet_glider_9,
324 .vs-tablet_glider_10 .vs-slide-item{
325 --vs-tab-flx:2 ;
326 }
327 .vs-tablet_glider_3,
328 .vs-tablet_glider_6,
329 .vs-tablet_glider_7,
330 .vs-tablet_glider_10 .vs-slide-item:nth-child(n + 3),
331 .vs-tablet_glider_11,
332 .vs-tablet_glider_12,
333 .vs-tablet_glider_13,
334 .vs-tablet_glider_14,
335 .vs-tablet_glider_15,
336 .vs-tablet_glider_16 {
337 --vs-tab-flx:3 ;
338 }
339
340 .vs-tablet_glider_10 {
341 --vs-tab-flx:6 ;
342 }
343 .vs-in-tablet.vs-tablet_glider_7 .vs-slide-item:first-child {
344 grid-column-start: 1;
345 grid-column-end: 3;
346 grid-row-start: 1;
347 grid-row-end: 3;
348 }
349
350 .vs-in-tablet.vs-tablet_glider_8 .vs-slide-item:first-child,
351 .vs-in-tablet.vs-tablet_glider_9 .vs-slide-item:nth-child(3),
352 .vs-in-tablet.vs-tablet_glider_12 .vs-slide-item:first-child,
353 .vs-in-tablet.vs-tablet_glider_13 .vs-slide-item:first-child,
354 .vs-in-tablet.vs-tablet_glider_13 .vs-slide-item:nth-child(4),
355 .vs-in-tablet.vs-tablet_glider_14 .vs-slide-item:first-child,
356 .vs-in-tablet.vs-tablet_glider_15 .vs-slide-item:nth-child(3),
357 .vs-in-tablet.vs-tablet_glider_16 .vs-slide-item:nth-child(5){
358 grid-row-start: 1;
359 grid-row-end: 3;
360 }
361
362 .vs-in-tablet.vs-tablet_glider_10 .vs-slide-item:nth-child(4),
363 .vs-in-tablet.vs-tablet_glider_13 .vs-slide-item:nth-child(4),
364 .vs-in-tablet.vs-tablet_glider_16 .vs-slide-item:nth-child(5) {
365 grid-column-start: 3;
366 grid-column-end: 4;
367 }
368 .vs-in-tablet.vs-tablet_glider_9 .vs-slide-item:nth-child(3),
369 .vs-in-tablet.vs-tablet_glider_15 .vs-slide-item:nth-child(3){
370 grid-column-start: 2;
371 grid-column-end: 3;
372 }
373 .vs-in-tablet.vs-tablet_glider_11 .vs-slide-item:nth-child(2),
374 .vs-in-tablet.vs-tablet_glider_12 .vs-slide-item:nth-child(2){
375 grid-column-start: 2;
376 grid-column-end: 4;
377 }
378 .vs-in-tablet.vs-tablet_glider_4 .vs-slide-item:first-child,
379 .vs-in-tablet.vs-tablet_glider_5 .vs-slide-item:first-child,
380 .vs-in-tablet.vs-tablet_glider_6 .vs-slide-item:first-child,
381 .vs-in-tablet.vs-tablet_glider_10 .vs-slide-item:nth-child(n + 3) {
382 grid-column-end: span 2;
383 }
384 .vs-in-tablet.vs-tablet_glider_10 .vs-slide-item{
385 grid-column-end: span 3;
386 }
387
388 .vs-in-tablet.vs-has-tablet.vs-glider .vs-slide-item{
389 --vs-tab-ratio-sz:1;
390 }
391 .vs-in-tablet.vs-tablet_glider_5 .vs-slide-item:first-child,
392 .vs-in-tablet.vs-tablet_glider_6 .vs-slide-item:first-child ,
393 .vs-in-tablet.vs-tablet_glider_11 .vs-slide-item:nth-child(2),
394 .vs-in-tablet.vs-tablet_glider_12 .vs-slide-item:nth-child(2){
395 --vs-tab-ratio-sz:0.5;
396 }
397 .vs-in-tablet.vs-tablet_glider_8 .vs-slide-item:first-child,
398 .vs-in-tablet.vs-tablet_glider_12 .vs-slide-item:first-child,
399 .vs-in-tablet.vs-tablet_glider_13 .vs-slide-item:first-child,
400 .vs-in-tablet.vs-tablet_glider_13 .vs-slide-item:nth-child(4),
401 .vs-in-tablet.vs-tablet_glider_14 .vs-slide-item:first-child,
402 .vs-in-tablet.vs-tablet_glider_15 .vs-slide-item:nth-child(3),
403 .vs-in-tablet.vs-tablet_glider_16 .vs-slide-item:nth-child(5)
404 {
405 --vs-tab-ratio-sz:2;
406 }
407
408
409 /*--------------------------------------------------------------------------------------------------------------------
410 Mobile
411 --------------------------------------------------------------------------------------------------------------------*/
412 .vs-in-mobile.vs-glider{
413 --vs-main-gp:var(--vs-mob-gp,var(--vs-gp,0));
414 }
415 .vs-in-mobile.vs-glider .vs-slide-list{
416 grid-template-columns:repeat(var(--vs-mob-flx,1),1fr)!important;
417 }
418
419 .vs-in-mobile.vs-glider .vs-slide-item{
420
421 --vs-item-sc-wt:calc((var(--vs-sc-wt) + var(--vs-main-gp)) / var(--vs-mob-flx));
422 }
423
424 .vs-in-mobile.vs-has-mobile.vs-glider .vs-slide-item{
425 --vs-item-ratio:calc(var(--vs-mob-ratio) * var(--vs-mob-ratio-sz,1));
426 --vs-item-wt:calc((var(--vs-mob-wt) + var(--vs-main-gp)) / var(--vs-mob-flx));
427 --vs-item-wt-gp:calc(var(--vs-item-wt) - var(--vs-main-gp));
428 --vs-item-sc-wt:calc((var(--vs-sc-wt) + var(--vs-main-gp)) / var(--vs-mob-flx));
429
430 }
431 .vs-mobile_glider_1,
432 .vs-mobile_glider_3 .vs-slide-item:first-child,
433 .vs-mobile_glider_4 .vs-slide-item:first-child{
434 --vs-mob-flx:1 ;
435 }
436
437 .vs-mobile_glider_2,
438 .vs-mobile_glider_3,
439 .vs-mobile_glider_4,
440 .vs-mobile_glider_5,
441 .vs-mobile_glider_6{
442 --vs-mob-flx:2 ;
443 }
444
445
446 .vs-in-mobile.vs-mobile_glider_5 .vs-slide-item:first-child,
447 .vs-in-mobile.vs-mobile_glider_6 .vs-slide-item:nth-child(3) {
448 grid-row-start: 1;
449 grid-row-end: 3;
450 }
451 .vs-in-mobile.vs-mobile_glider_6 .vs-slide-item:nth-child(3){
452 grid-column-start: 2;
453 grid-column-end: 3;
454 }
455 .vs-in-mobile.vs-mobile_glider_3 .vs-slide-item:first-child,
456 .vs-in-mobile.vs-mobile_glider_4 .vs-slide-item:first-child {
457 grid-column-end: span 2;
458 }
459
460
461 .vs-in-mobile.vs-mobile_glider_4 .vs-slide-item:first-child {
462 --vs-mob-ratio-sz:0.5;
463 }
464 .vs-in-mobile.vs-mobile_glider_5 .vs-slide-item:first-child {
465 --vs-mob-ratio-sz:2;
466 }
467
468 /*--------------------------------------------------------------------------------------------------------------------
469 Mobile
470 --------------------------------------------------------------------------------------------------------------------*/
471