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

admin-perview.css in Visual Slider trunk, at admin/assets/css/admin-perview.css

696 lines 15.6 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /***************************************************************************************************
2
3 Heading
4
5 *************************************************************************************************/
6 .vs_perview_heading{
7 width: 100%;position: relative;
8 background: #10181f;
9 height: 50px;
10 }
11 .vs_perview_heading .vs_perview_heading_item{
12 padding:0 20px;
13 transition: all 350ms;
14 float:left;
15 line-height:50px;
16 cursor:pointer;
17 z-index:3;
18 position:relative;
19 color:#ffffff;
20 border-left:solid 1px #20282f;
21 }
22
23 .vs_perview_heading_item select{
24 background: rgb(32, 40, 47) url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E') no-repeat right 5px top 55%;
25 color: rgb(192, 195, 198);
26 border-radius: 7px;
27 font-weight: 700;
28 border: none !important;
29 font-family: vs-rubik,rubik,vs-iransans,tahoma;
30 box-shadow: none !important;
31 line-height: 30px;
32 }
33 .vs_perview_heading_item select:focus {
34 border-color: #606366;
35 color: #ffffff;
36 box-shadow:none;
37 }
38 .vs_perview_heading_item select:hover{
39 color:#ffffff;
40 border-color: #606366;
41
42 }
43 .vs_perview_heading_item:hover{
44 background:rgb(42, 155, 216) !important;
45
46 }
47 .vs-active-loading .vs_perview_heading_change{
48 pointer-events: none;
49 }
50
51
52 .vs_perview_heading_change label::before{
53 content: "";
54 background-image: url(../image/changes.png);
55 width: 25px;
56 height: 25px;
57 float: left;
58 background-size: 25px;
59 margin-top: 14px;
60
61 margin-right: 10px;
62 }
63
64
65
66 .vs_perview_heading_desktop label::before {
67 content: "";
68 background-image: url(../image/desktop.png);
69 width: 25px;
70 height: 25px;
71 float: left;
72 background-size: 25px;
73 margin-top: 14px;
74
75 margin-right: 10px;
76 }
77 .vs_perview_heading_tablet label::before {
78 content: "";
79 background-image: url(../image/tablet.png);
80 width: 25px;
81 height: 25px;
82 float: left;
83 background-size: 25px;
84 margin-top: 14px;
85 margin-right: 10px;
86 }
87 .vs_perview_heading_mobile label::before {
88 content: "";
89 background-image: url(../image/mobile.png);
90 width: 25px;
91 height: 25px;
92 float: left;
93 background-size: 25px;
94 margin-top: 14px;
95 margin-right: 10px;
96 }
97 .vs_perview_mobile .vs_perview_heading_mobile,
98 .vs_perview_desktop .vs_perview_heading_desktop,
99 .vs_perview_tablet .vs_perview_heading_tablet{
100 background:rgb(42, 155, 216);
101 }
102
103
104 .vs_perview:not(.vs_perview_full_screen) .vs_perview_full_screen_close,
105 .vs_perview_full_screen .vs_perview_full_screen_mode{
106 display:none;
107
108 }.vs_perview_heading_full_screen{
109 float:right !important;
110 }
111 .vs_perview_heading_full_screen a{
112 color:#ffffff;
113 }
114
115
116 .vs_perview_full_screen .vs_perview_full_screen_close{
117 display:inline-block;
118
119 }
120 .vs_perview_full_screen_close::before{
121
122 content: "";
123 background-image: url(../image/focus.png);
124 width: 25px;
125 height: 25px;
126 float: left;
127 background-size: 25px;
128 margin-top: 14px;
129 margin-right: 10px;
130 }.vs_perview_full_screen_mode::before{
131
132 content: "";
133 background-image: url(../image/full-screen.png);
134 width: 25px;
135 height: 25px;
136 float: left;
137 background-size: 25px;
138 margin-top: 14px;
139 margin-right: 10px;
140 }
141
142 .vs_perview_heading_full_screen_show{
143 display:none !important;
144 }
145 .vs_perview_full_screen .vs_perview_heading_full_screen_hide{
146 display:none !important;
147
148 }
149 .vs_perview_full_screen .vs_perview_heading_full_screen_show {
150 display:inline-block !important;
151
152 }
153 .vs_perview_heading_animte{
154 padding:0px !important;
155 }
156 .vs_perview_heading_animte span{
157 float:left;
158 padding:0 20px !important;
159 height:50px;
160 }
161 .vs_perview_slide.vs_perview_animte_active .vs_perview_heading_animte{
162 background:rgb(191, 3, 6);
163
164 }
165
166
167 .vs_perview_slide.vs_perview_animte_active .vs_animte_play{
168 display:none !important;
169
170 }
171
172
173 .vs_perview_slide.vs_perview_animte_active .vs_animte_stop{
174 display:inline-block !important;
175 }
176 .vs_animte_play::before{
177
178 content: "";
179 background-image: url(../image/play.png);
180 width: 25px;
181 height: 25px;
182 float: left;
183 background-size: 25px;
184 margin-top: 14px;
185 margin-right: 10px;
186 }
187 .vs_animte_stop::before{
188
189 content: "";
190 background-image: url(../image/stop.png);
191 width: 25px;
192 height: 25px;
193 float: left;
194 background-size: 25px;
195 margin-top: 14px;
196 margin-right: 10px;
197 }
198
199 .vs_perview_animte_active .vs_perview_slide_content,
200 .vs_perview_full_screen .vs_perview_slide_content {
201 cursor:no-drop;
202 }
203 body .vs_perview_animte_active .vs_perview_slide_content *,
204 body .vs_perview_full_screen .vs_perview_slide_content *{
205 pointer-events: none !important;
206 }
207 .vs_perview_slide:not(.vs_perview_animte_active) .vs_animte_stop{
208 display:none;
209 }
210
211 /***************************************************************************************************
212
213 Global
214
215 *************************************************************************************************/
216
217 .vs_perview_global{
218 width: 100%;
219 background:#202326;
220 }
221
222 .vs_perview_global{
223 position:relative;
224 display:inline-block;
225 width:100%;border-radius: 7px;
226 overflow:hidden;
227 }
228 body .vs_perview_global .vs-visualslider{
229 margin:0px !important;
230 }
231
232
233 .vs-loading::before{
234 content:"";
235 position:absolute;
236 z-index:999;
237 height:100%;
238 left:0px;
239 top:0px;
240 width:100%;
241 background: url(../image/loading.svg) rgba(0,0,0,0.60) no-repeat center center;
242 }
243
244
245
246 .vs_perview_global .vs-loading .vs_perview_global_config{
247 height:500px;
248 }
249 .vs_perview_global_config{
250 float:left;
251 width:100%;
252 position:relative;
253 }
254 .vs_perview_global .vs-glider .vs-slide-list-warp{
255 max-width: calc(var(--vs-wt,1240) * 1px) !important;
256 }
257
258 .vs_perview_global.vs_perview_full_screen {
259 position:fixed;
260 overflow-y:auto;
261 height:100%;
262 right:0;
263 top:0;
264 width:100%;
265 z-index: 99999;
266 }
267 .vs_perview_global_scroll{
268 overflow-x:auto;
269 width: 100%;
270 }
271
272 .vs_perview_global_content{
273 position:relative;
274 margin:auto;
275 display:grid;
276 grid-template-columns: 100%;
277 width:var(--vs-prw-wt,100%);
278 }
279 .vs_perview_global:not(.vs-perview-show) .vs_perview_global_scroll,
280 .vs_perview_global_content.vs-loading{
281 overflow: hidden !important;
282 }
283
284 .vs_perview_global:not(.vs-perview-show) .vs_perview_global_content,
285 .vs_perview_global:not(.vs-perview-show) .vs_perview_global_scroll{
286 height:auto !important;
287
288 }
289 .vs_perview_global.vs-perview-show .vs_perview_global_content{
290 height:auto !important;
291
292 }
293
294
295 .vs_perview_global .vs_perview_global_content{
296 width:calc(var(--vs-prw-wt,100%));
297
298 }
299 .vs_perview_global .vs-slide-inner::before{
300 content:"";
301 position:absolute;
302 width:100%;
303 height:100%;
304 left:0px;
305 top:0px;
306 box-shadow:0 0 0 0px inset;
307 z-index:11;
308 pointer-events: all;
309 }
310 /*
311 .vs_perview_global .vs-slide-inner:hover::before{
312 box-shadow:0 0 0 2px rgba(66,255,0,1.00) inset;
313 }*/
314 .vs_perview_global .vs_module_slide_top { width: 100%;
315 background: rgb(80, 96, 112);
316 height: 30px;width: 150px;
317 display:none !important;
318 position: absolute;
319 top: 0;
320 margin:2px;
321 z-index: 99;
322 opacity: .9;
323 pointer-events: all;
324
325 }
326 .vs_perview_global .vs-slide-item:hover .vs_module_slide_top{
327 display:inline-block;
328 }
329
330 /***************************************************************************************************
331
332 Slide
333
334 *************************************************************************************************/
335 .vs_perview_slide{
336 background:#262626;
337 width:100%;
338 overflow:hidden;
339 position:relative;
340 border-radius: 7px;
341 float:left;
342 display:inline-block;
343
344 }
345
346
347
348 .vs_perview_slide_scroll{
349 overflow-x:auto;
350 float:left;
351 width: 100%;
352 }
353
354 .vs_perview_slide_content {
355 position: relative;
356 background: url(../image/background.png);
357 display: inline-block;
358 width: 100%;
359 vertical-align:top;
360 }
361
362 .vs_perview_slide.vs_perview_full_screen{
363 position:fixed;
364 overflow-y:auto;
365 height:100%;
366 left:0;
367 top:0;
368 width:100%;
369 z-index: 99999;
370 }
371 .vs_perview_slide_content{
372 position:relative;
373 margin:auto;
374 display:grid;
375 grid-template-columns: 100%;
376 min-width: var(--vs-prw-wt,1920px);
377 width: calc(var(--vs-wt,1240) * 1px);
378 }
379 .vs-perview-not-width:not(.vs_perview_full_screen) .vs_perview_slide_content{
380 min-width:inherit !important;
381 }
382
383
384
385 .vs_perview_slide:not(.vs_perview_full_screen) .vs-layer-list{
386 left:0px!important;
387 position:relative !important;
388 top:0px!important;
389 transform: scale(1) !important;
390
391 }
392
393 .vs_perview_slide .vs-slide{
394 margin:auto;
395 overflow:hidden;
396 }
397
398 .vs_perview_slide .vs-layer-warp{
399
400 margin: auto;
401 z-index: 2;
402 pointer-events: none;
403 display: block;
404 }
405 .vs_perview_slide .vs-layer-list{
406 box-shadow:0 0 0 10000px rgba(19,19,19,0.5),0 0 0 5px rgba(255,0,0,0.7);
407 }
408
409 .vs_perview_slide .vs-slide{
410 box-shadow: 0 0 0 1000px #262626 !important;
411 }
412
413 .vs_perview_animte_active .vs-perview-slide{
414 visibility:hidden;
415 }
416 .vs_perview_slide .vs-slide-item {
417 position:absolute;
418 width:100%;
419 height:100%;
420 left:0px;
421 z-index:999;
422 top:0px;
423 }
424
425
426
427 .vs_perview_slide.vs_perview_desktop .vs_perview_slide_content {
428 width:calc(var(--vs-wt,1920) * 1px);
429 min-width:1920px;
430
431 }
432 .vs_perview_slide.vs_perview_tablet .vs_perview_slide_content {
433
434 width:calc(var(--vs-tab-wt,1024) * 1px);
435 min-width:1024px;
436
437
438 }
439 .vs_perview_slide.vs_perview_mobile .vs_perview_slide_content {
440
441 width:calc(var(--vs-mob-wt,750) * 1px);
442 min-width:750px;
443
444 }
445
446
447 .vs_perview_slide .vs-has-scale .vs-slide-list-warp{
448 --vs-sc:calc(var(--vs-sc-wt) / var(--vs-wt));
449 }
450 .vs_perview_slide .vs-has-tablet.vs-in-tablet.vs-has-scale .vs-slide-list-warp{
451 --vs-sc:calc(var(--vs-sc-wt) / var(--vs-tab-wt));
452 }
453 .vs_perview_slide .vs-has-mobile.vs-in-mobile.vs-has-scale .vs-slide-list-warp{
454 --vs-sc:calc(var(--vs-sc-wt) / var(--vs-mob-wt));
455 }
456
457 .vs_perview_slide.vs_perview_full_screen .vs_perview_slide_content {
458 width:var(--vs-prw-wt) !important;
459
460 }
461 .vs_perview_mobile .vs_perview_heading_mobile,
462 .vs_perview_tablet .vs_perview_heading_tablet,
463 .vs_perview_desktop .vs_perview_heading_desktop{
464 pointer-events: none;
465 }
466
467 .vs_perview_mobile .vs_perview_heading_mobile select,
468 .vs_perview_tablet .vs_perview_heading_tablet select,
469 .vs_perview_desktop .vs_perview_heading_desktop select{
470 pointer-events: all;
471 }
472
473
474 .vs_perview_slide .vs-slide {
475 width:100%;
476 height: 100%;
477 position: absolute;
478 }
479
480
481
482
483 /***************************************************************************************************
484
485 draggable
486
487 *************************************************************************************************/
488
489 .vs_draggable {
490 pointer-events: all;
491 position:absolute;
492 z-index:33;
493 }
494 .vs_draggable_active{
495 z-index:9999!important
496 }
497
498
499 .vs_draggable{
500 cursor:pointer;
501 }
502
503
504
505 .vs_draggable_active::after {
506 border: dashed 1px rgba(255, 255, 255, 0.45) !important;
507 position: absolute;
508 content: "";
509 height: 100%;
510 width: 100%;
511 z-index: 1;
512 top: 0px;
513 right: 0;
514 box-sizing: border-box;
515
516 }
517 .vs_draggable_active::before {
518 border: dashed 1px rgba(0, 0, 0, 0.45) !important;
519 position: absolute;
520 content: "";
521 height: 100%;
522 width: 100%;
523 z-index: 1;
524 top: 0px;
525 right: 0;
526 box-sizing: content-box;
527 margin: -1px;
528 }
529 .vs_draggable:not(.vs_draggable_active):hover::after{
530 border: dashed 2px rgb(59, 179, 255) !important;
531 position: absolute;
532 content: "";
533 height: 100%;
534 width: 100%;
535 z-index: 1;
536 top: 0px;
537 right: 0;
538 box-sizing: content-box;
539 margin: -2px;
540
541 }
542
543 .vs_draggable .ui-resizable-handle{
544 display:none !important;
545 }
546 .vs_draggable_active .ui-resizable-handle{
547 display:inline-block !important;
548 overflow: visible;
549
550
551
552 }
553
554
555 .vs_draggable .ui-resizable-n {
556 cursor: n-resize;
557 height: 10px;
558 width: 100%;
559 top: -5px;
560 left: 0;
561 }
562 .vs_draggable .ui-resizable-e {
563 cursor: e-resize;
564 width: 10px;
565 right: -5px;
566 top: 0;
567 height: 100%;
568 }
569 .vs_draggable .ui-resizable-s {
570 cursor: s-resize;
571 height: 10px;
572 width: 100%;
573 bottom: -5px;
574 right: 0;
575 }
576 .vs_draggable .ui-resizable-w {
577 cursor: w-resize;
578 width: 10px;
579 left: -5px;
580 top: 0;
581 height: 100%;
582 }
583 .vs_draggable .ui-resizable-ne {
584 cursor: ne-resize;
585 width: 10px;
586 height: 10px;
587 right: -5px;
588 top: -5px;
589 }
590 .vs_draggable .ui-resizable-se {
591 cursor: se-resize;
592 width: 10px;
593 height: 10px;
594 right: -5px;
595 bottom: -5px;
596 }
597 .vs_draggable .ui-resizable-sw {
598 cursor: sw-resize;
599 width: 10px;
600 height: 10px;
601 left: -5px;
602 bottom: -5px;
603 }
604 .vs_draggable .ui-resizable-nw {
605 cursor: nw-resize;
606 width: 10px;
607 height: 10px;
608 left: -5px;
609 top: -5px;
610 }
611 .ui-resizable-handle::before {
612 content: "";
613 width: 10px;
614 float: right;
615 height: 10px;
616 box-sizing: border-box;
617 position: relative;
618 box-shadow: 0 0 0 1px rgba(255,255,255,0.3) inset,0 0 0 1px rgba(0,0,0,0.3) ;
619 }
620
621 .vs_draggable.vs_draggable_active .ui-resizable-n::before,
622 .vs_draggable.vs_draggable_active .ui-resizable-s::before {
623 right: calc(50% - 5px);
624 top: 0px;
625 }
626 .vs_draggable.vs_draggable_active .ui-resizable-e::before,
627 .vs_draggable.vs_draggable_active .ui-resizable-w::before {
628 top: calc(50% - 5px);
629 right:0px;
630 }
631
632
633
634
635 .vs_draggable .ui-resizable-handle {
636 position: absolute;
637 font-size: .1px;
638 touch-action: none;
639 pointer-events: all;
640 }
641
642
643
644 .vs_draggable,
645 .vs-layer-perview-item{
646 left: var(--vs-lr-rt,0%);
647 top: var(--vs-lr-tp,0%);
648 width: var(--vs-lr-wt,auto);
649 height: var(--vs-lr-ht,auto);position: absolute!important;
650 }
651
652
653 /******************************************* vs_perview_animte_active**********************************/
654
655
656 .rtl .vs_perview_heading .vs_perview_heading_item,
657 .rtl .vs_perview_heading_change label::before,
658 .rtl .vs_perview_heading_desktop label::before,
659 .rtl .vs_perview_heading_tablet label::before ,
660 .rtl .vs_perview_heading_mobile label::before ,
661 .rtl .vs_perview_full_screen_close::before,
662 .rtl .vs_perview_full_screen_mode::before,
663 .rtl .vs_perview_heading_animte span,
664 .rtl .vs_animte_play::before,
665 .rtl .vs_animte_stop::before,
666 .rtl .vs_perview_global_config,
667 .rtl .vs_perview_slide{
668
669
670 float:right;
671 }
672
673 .rtl .vs_perview_heading_full_screen {
674 float: left !important;
675 }
676
677 .rtl .vs_perview_heading_change label::before,
678 .rtl .vs_perview_heading_desktop label::before,
679 .rtl .vs_perview_heading_tablet label::before,
680 .rtl .vs_perview_heading_mobile label::before,
681 .rtl .vs_perview_full_screen_close::before,
682 .rtl .vs_perview_full_screen_mode::before,
683 .rtl .vs_animte_stop::before,
684 .rtl .vs_animte_play::before{
685 margin-right: 0px;
686 margin-left: 10px;
687 }
688 .rtl .vs_perview_heading_item select{
689 background: rgb(32, 40, 47) url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E') no-repeat left 5px top 55%;
690 }
691
692 .rtl .vs_perview_slide:not(.vs_perview_full_screen) .vs-layer-list {
693 left: auto !important;
694
695 right: 0px !important;
696 }