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

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

725 lines 15.1 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /*********************** Add Layerr ********************/
2
3 .vs_add_layer *{
4 font-family: vs-rubik,rubik,vs-iransans,tahoma !important;
5 transition:all 350ms;
6 box-sizing:border-box;
7 }
8
9 .vs_add_layer {
10 display: none;
11 position: fixed;
12 pointer-events: all;
13 background: rgba(0,0,0,0.70);
14 top: 0;
15 z-index:999999999999999999;
16 cursor: initial;
17 height: 100%;
18 width: 100%;
19 font-family:vs-rubik,rubik,vs-iransans,tahoma;
20
21 right: 0;
22
23 vertical-align: middle
24 }
25 .vs_add_layer.vs_add_layer_active{
26 display:table;
27 }
28 .vs_add_layer_middle {
29 margin: auto;
30 width: 600px;
31 height: auto;box-shadow: 0 0 50px 0px rgba(0, 0, 0, 1);
32 text-align: center;
33 display: inline-block;
34 position: absolute;
35 padding: 0 0;
36 overflow:none;background: #fff;
37 top:50%;right:50%;
38 border-radius: 7px;
39
40 overflow: hidden;
41 transform:translate(50%,-50%)
42 }
43
44 .vs_add_layer_title {
45 padding: 00px;
46 font-size: 15px;
47 font-weight: 700;
48 text-align: right;
49 position:relative;
50 background: #f2f5f8;
51 box-sizing: border-box;
52 float: right;
53 width: 100%;
54 z-index: 1;
55 height:50px;
56 top: 0;
57 }
58 .vs_add_layer_title h3{
59 margin:0px !important;
60 float: left;line-height: 50px !important;
61 color:rgb(48, 56, 63);
62 line-height:1 !important;
63 padding:0 20px !important;
64 line-height:50px !important;
65 font-size:18px !important;
66
67 }
68
69 .vs_add_layer_cancel {
70 cursor: pointer;
71 height:50px;
72 line-height:50px;
73 padding:0 20px;
74 background: rgb(240, 71, 71);
75 color:#ffffff;
76 float:right;
77 }
78 .vs_add_layer_cancel:hover{
79 background: rgb(185, 25, 25);
80 }
81
82 .vs_add_layer_add{
83 cursor: pointer;
84 background: rgb(6, 208, 142);
85 color: rgb(255, 255, 255);
86 height: 50px;
87 line-height: 50px;
88 padding: 0 20px;
89 float: right;
90 padding: 0 20px;
91 }
92 .vs_add_layer_add:hover{
93 background: rgb(0, 142, 96);
94 }
95 .vs_add_layer_save:before,
96 .vs_add_layer_cancel:before,
97 .vs_add_layer_add:before{
98 width: 20px;
99 content:"";
100 background-size:20px;
101 height: 20px;
102 margin-right: 10px;
103 margin-top: 15px;
104 float: left;
105 }
106
107 .vs_add_layer_cancel:before{
108 background-image:url(../image/template_cancel.png)
109 }
110 .vs_add_layer_add:before{
111 background-image:url(../image/template_add.png);
112 }
113
114 .vs_add_layer_content {
115 overflow-y: auto;
116 float: right;
117 background: #fff;
118 padding: 0;
119 margin: 0;
120 width: 100%;
121 position:relative;
122 padding: 20px;
123 height:calc(100% - 50px);
124 display:grid;
125 grid-template-columns: 20% 20% 20% 20% 20%;
126 }
127 .vs_add_layer_item {
128 padding: 20px;
129 cursor:pointer;
130
131 margin: 10px;
132 list-style: none;
133 box-shadow: 0 0 0 3px rgb(242, 245, 248);
134 margin: 10px;
135 width: auto;
136 border-radius: 7px;
137 ;
138 }
139 .vs_add_layer_item span{
140 width: 100%;
141 display: inline-block;
142 font-size: 16px;
143 color: #20282f;
144 margin-top: 10px;
145 }
146
147 .vs_add_layer_item img{
148 width:60%;
149 text-align:center;
150 }
151 .vs_add_layer_item.selected,
152 .vs_add_layer_item:hover{
153 box-shadow:0 0 0 3px rgb(42, 155, 216) inset;
154 border-radius:7px;
155 background: #f8fafc
156 }
157
158 /***************************** layer add*********/
159
160
161
162 .vs_module_layer_warp{
163 width: 100%;
164 display: inline-block;
165 margin:0px;
166 text-align: left;
167 border-top: solid 3px rgb(226, 229, 232);
168 padding-top: 20px;
169 margin-top: 20px;
170 }
171 .vs_module_layer_add::before{
172 background-image:url(../image/addlayer.png);
173
174 }
175 .vs_module_layer_template_add::before {
176 background-image:url(../image/library_add.png);
177
178 }
179 .vs_module_all_layer_template_save::before {
180 background-image: url(../image/library_save.png);
181 }
182
183 .vs_module_layer_list{
184 display: inline-block;
185 width:100%;
186 vertical-align: top;
187 margin:0px;
188 margin-bottom: 20px;
189 }
190 .vs_module_layer_item {
191 width: 100%;
192 margin: 0px 20px 5px 00px;
193 height: auto;
194 background: rgb(128, 136, 143);
195 position: relative;
196 display: inline-block;
197 border-radius: 7px;
198 overflow: hidden;
199 float: left;
200 box-shadow: 5px 5px 5px 0px rgb(226, 229, 232);
201 vertical-align: top;
202 height: 30px;
203 }
204 .vs_module_layer_item.vs_module_side_options_active{
205 background:rgb(42, 155, 216);
206 }
207 .vs_module_layer_top{
208 width:100%;
209 height: 30px;
210 position: relative;
211 width: 120px;
212 float: right;
213 }
214 .vs_module_layer_top a{
215 width:25%;
216 width: 25%;
217 text-align:center;
218 position: relative;
219 top: 0;
220 display: inline-block;
221 }
222 .vs_module_layer_top a:hover{
223 background:rgba(59,179,255,1.00);
224 }
225 .vs_module_layer_top a:before{
226 cursor: pointer;
227
228 line-height:30px;
229 font-size:15px;
230 width:100%;
231 text-decoration: none;
232 float: left;
233 vertical-align: middle;
234 font-style: normal;
235 color: #ffffff;
236 }
237 .vs_module_layer_options::before{
238
239 font-family: dashicons;
240 content: "\f111";
241
242 }
243
244 .vs_module_layer_duplicate::before{
245
246 font-family: dashicons;
247 content: "\f105";
248
249 }
250
251 .vs_module_layer_template_save::before{
252
253 font-family: FontAwesome;
254 content: "\f0c7";
255
256 }
257
258 .vs_module_layer_list .ui-sortable-placeholder{
259 background:rgba(34, 113, 177, 0.1);width: 100%;
260 visibility:visible !important;
261 height: 40px;
262 border:dashed 1px rgba(34, 113, 177, 0.6);
263
264 }
265 .vs_module_layer_bottom{
266 background: rgb(240, 243, 246);
267 height: 25px;
268 bottom: 0;
269 position: absolute;
270 width: 100%;
271 text-align: center;
272 }
273 .vs_module_layer_title {
274 line-height: 30px;
275 cursor: move;
276 height: 30px;
277 text-align: left;
278 width: 100%;
279 }
280
281
282
283 .vs_module_add_warp{
284 display: inline-block;
285 vertical-align: top;
286 padding: 0px 0px 0;
287 margin: 20px 0px 0;
288 width: 100%;
289 }
290
291
292 .vs_module_add_bottom{
293 width: 100%;
294 text-align: center;
295 background: rgb(224, 232, 239);
296 color: #506070;
297 position: absolute;
298 bottom: 0;
299
300 line-height: 25px;
301 font-size: 13px;
302
303 }
304 .vs_layer_options .vs_options_middle{
305 height:auto !important;
306 position:relative !important;
307 }
308 .vs_layer_options .vs_options_content{
309 height:auto !important;
310 }
311
312
313 .vs_module_layer_options::before {
314 cursor: pointer;
315 line-height: 40px;
316 text-decoration: none;
317 float: right;
318 vertical-align: middle;
319 font-size: 20px;
320 font-family: dashicons;
321 content: "\f111";
322 font-style: normal;
323 color: #ffffff;
324 width: 40px;
325 }
326 .vs_module_layer_remove::before {
327 width: 40px;
328 cursor: pointer;
329 line-height: 40px;
330 text-decoration: none;
331 float: right;
332 vertical-align: middle;
333 font-size: 20px;
334 font-family: dashicons;
335 color: #ffffff;
336
337 content: "\f182";
338 font-style: normal;
339 }
340 .vs_module_layer_duplicate::before {
341 width: 40px;
342 cursor: pointer;
343 line-height: 40px;
344 text-decoration: none;
345 float: right;
346 vertical-align: middle;
347 font-size: 20px;
348 font-family: dashicons;
349 color: #ffffff;
350
351 content: "\f105";
352 font-style: normal;
353 }
354 .vs_module_layer_template_save::before {
355 width: 40px;
356 cursor: pointer;
357 line-height: 40px;
358 text-decoration: none;
359 float: left;
360 vertical-align: middle;
361 font-size:20px;
362 font-family: 'FontAwesome';
363 content: "\f0c7";
364 color: #ffffff;
365 font-style: normal;
366 }
367 .vs_module_layer_name{
368 float:left;
369 color:#fff;
370 height: 30px;
371 overflow: hidden;
372 float: left;
373 text-align: left;
374 color: rgb(255, 255, 255);
375 line-height: 30px;
376 padding: 0 10px;
377 font-size: 12px;
378 font-weight: 700;width: calc(100% - 120px) !important;
379 }
380 .vs_module_layer_name span,
381 .vs_module_layer_name span *{
382 font-weight: 400 !important;
383 color:#ffffff !important;
384 margin:0px !important;
385 padding:0px !important;
386 border:none !important;
387
388 }
389 .vs_module_layer_name span{
390 opacity:.8;
391 }.vs_module_layer_name span i::before{
392 font-size: 1.5em !important;
393 vertical-align: middle !important;
394 }
395 .vs_module_layer_name span img{
396 max-height: 35px !important;
397 vertical-align: middle !important;
398 }
399 .vs_module_layer_options,
400 .vs_module_layer_duplicate,
401 .vs_module_layer_template_save,
402 .vs_module_layer_remove{
403 float:right;
404 }
405
406
407 .vs_module_layer_item .vs_module_layer_name::before {
408 content: "";
409 background-position: left;
410 background-repeat: no-repeat;
411 float: left;
412 width: 20px;
413 height: 100%;
414 background-size: 20px;
415 margin-right: 5px;
416 }
417 .vs_module_layer_item[data-id="icon"] .vs_module_layer_name::before {
418 background-image: url(../image/layer_icon_mini.png);
419 }
420 .vs_module_layer_item[data-id="button"] .vs_module_layer_name::before {
421 background-image: url(../image/layer_button_mini.png);
422 }
423 .vs_module_layer_item[data-id="text"] .vs_module_layer_name::before {
424 background-image: url(../image/layer_text_mini.png);
425 }
426 .vs_module_layer_item[data-id="box"] .vs_module_layer_name::before {
427 background-image: url(../image/layer_box_mini.png);
428 }
429 .vs_module_layer_item[data-id="image"] .vs_module_layer_name::before {
430 background-image: url(../image/layer_image_mini.png);
431 }
432
433
434 /************************ Layout options *********************************/
435 .vs_side_options{
436 position: fixed;
437 width:0px;
438 display:none;
439 width:0px;
440 height: 1;
441 height: calc(100% - 90px);
442 z-index: 99999999999999;
443 left: 0;
444 margin: 20px;
445 top: 50px;
446
447 background: #ffffff;
448 border-right: solid 3px #e0e4e8;
449 }
450 .vs_module_side_options_active .vs_side_options{
451 width:400px;
452 display:inline-block;
453
454
455 }
456 .vs_panel_options_active .vs_panel_content{
457 width: calc(100% - 400px);
458 float:right;
459
460 }
461 .vs_module_side_options_title{
462 background:#20282f;
463 height: 50px;
464 width:100%;
465 text-align:left;
466 line-height:50px;
467 padding:0 0 0 20px ;
468 margin:0px;
469 }
470 .vs_module_side_options_title span{
471 font-size: 15px;
472 font-weight: 700;
473 color: #fff;
474 line-height: 50px;
475 }
476 .vs_module_side_options_close{
477 float:right;
478 width:50px;
479 height:50px;
480 }
481 .vs_module_side_options_close::before{
482 content: "\f335";
483 font-family: dashicons;
484 font-size: 40px;
485 font-style: normal;
486 color: #fff;
487 width: 50px;
488 height: 50px;
489 line-height: 50px;
490 float: right;
491 text-align: center;
492 }
493 .vs_module_side_options_close:hover{
494 cursor:pointer;
495
496
497 }
498
499 .vs_module_side_options_close:hover::before{
500 color:rgb(59, 179, 255);
501 }
502
503
504 .vs_side_options_content{
505 overflow-y: auto;
506 height: calc(100% - 50px);
507 position: relative;
508 scrollbar-width: thin;
509 }
510
511 .vs_side_options_content .vs_title_tabs{
512 display:grid;
513 grid-template-columns: 25% 25% 25% 25%;
514 width:100%;
515 background:#60686f;
516 padding:8px 0px;
517 }
518
519 .vs_side_options_content .vs_title_tabs a{
520 padding: 8px 10px;
521 background: none !important;
522 font-size: 12px;
523 font-weight: 500 !important;
524 border: none;
525 text-align: center;
526
527 display: inline-block;
528 float: left;
529 vertical-align: top;
530 border: none;
531 margin: 0px;
532 border-radius: 7px !important;
533 }
534 .vs_side_options_content .vs_title_tabs a:hover,
535 .vs_side_options_content .vs_title_tabs a.vs_layout_active{
536 border: none !important;
537 background: rgb(255, 255, 255) !important;
538 color: rgb(0, 0, 0) !important;
539 font-weight: 500 !important;
540 border-radius: 7px !important;
541 }
542
543
544 .vs_side_options_content .vs_options_item{
545 padding: 15px 10px;
546 position:relative;
547 margin: 0;
548 border-bottom:none !important;
549 box-shadow:none !important;
550 }
551
552 .vs_side_options_content .vs_multi_options_item label{
553 font-weight:700;
554 }
555 .vs_side_options_content .vs_options_name{
556 width:40%;
557 }
558 .vs_side_options_content .vs_options_setting{
559 width:60%;
560 }
561
562 .vs_side_options_content .vs_options_name label{
563 float: left;
564 width: 100%;
565 text-align: left;
566 line-height: 20px;
567 margin-bottom:8px;
568 font-size: 14px;
569 font-weight: 700;
570 }
571 .vs_side_options_content .vs_multi_options_item{
572 padding-right:5px;
573 }
574
575 .vs_side_options_content .vs_number_slider .vs_options_name{
576 width:100% !important;
577 }
578 .vs_side_options_content .vs_number_slider .vs_options_setting{
579 width:100% !important;
580 }
581 .vs_side_options_content .vs_number_slider .vs_form_range{
582 width:260px !important;
583 }
584 .vs_side_options_content .vs_number_slider .vs_form_number {
585 width:40px !important;
586 }
587
588 .vs_side_options_content .vs_options_number span{
589 padding-right:5px !important;
590 margin-right:0px !important;
591
592 }
593
594 .vs_live_layer_align .vs_options_name,
595 .vs_live_layer_position .vs_options_name,
596 .vs_live_layer_size .vs_options_name,
597 .vs_live_layer_tablet_align .vs_options_name,
598 .vs_live_layer_tablet_position .vs_options_name,
599 .vs_live_layer_tablet_size .vs_options_name,
600 .vs_live_layer_mobile_align .vs_options_name,
601 .vs_live_layer_mobile_position .vs_options_name,
602 .vs_live_layer_mobile_size .vs_options_name{
603 display:none !important;
604 }
605 .vs_live_layer_align img,
606 .vs_live_layer_tablet_align img,
607 .vs_live_layer_mobile_align img {
608 height: auto;
609 border-radius: 5px;
610 display: block;
611 text-align: center;
612 margin: 10px auto;
613 padding: 5px;
614 opacity:0.6;
615 box-shadow:none !important;
616 }
617 .vs_live_layer_align input:checked + img,
618 .vs_live_layer_tablet_align input:checked + img,
619 .vs_live_layer_mobile_align input:checked + img {
620 box-shadow: none;
621 background: #e2e5e8 !important;
622 opacity: 0.9;
623 }
624
625
626
627
628
629 .vs_mobile_hide .vs_layer_content{
630 opacity:0.5;
631 }
632
633 .vs_perview_mobile .vs_mobile_hide::before ,
634 .vs_perview_tablet .vs_tablet_hide::before {
635 border: dashed 1px rgba(0, 0, 0, 0.45) !important;
636 position: absolute;
637 content: "";
638 height: 100%;
639 background-image: url('../image/hide.png');
640 width: 100%;
641 z-index: 1;
642 top: 0px;
643 right: 0;
644 box-sizing: content-box;
645 margin: -1px;
646 background-color: rgba(120,128,136,0.4);
647 }
648
649
650 .vs_side_options_content .vs_options_image .vs_options_setting input{
651 width:100%;
652 margin:10px 0px 0px 0px;
653 }
654
655
656 .rtl .vs_add_layer_save:before,
657 .rtl .vs_add_layer_cancel:before,
658 .rtl .vs_add_layer_add:before,
659 .rtl .vs_module_layer_item,
660 .rtl .vs_module_layer_top a:before,
661 .rtl .vs_module_layer_name,
662 .rtl .vs_add_layer_title h3,
663 .rtl .vs_module_layer_item .vs_module_layer_name::before,
664 .rtl .vs_side_options_content .vs_title_tabs a,
665 .rtl .vs_side_options_content .vs_options_name label{
666 float:right
667
668 }
669
670 .rtl .vs_add_layer_title,
671 .rtl .vs_add_layer_cancel,
672 .rtl .vs_add_layer_add,
673 .rtl .vs_add_layer_content ,
674 .rtl .vs_module_layer_top,
675 .rtl .vs_module_layer_options::before,
676 .rtl .vs_module_layer_remove::before ,
677 .rtl .vs_module_layer_duplicate::before,
678 .rtl .vs_module_layer_template_save::before,
679 .rtl .vs_module_layer_options,
680 .rtl .vs_module_layer_duplicate,
681 .rtl .vs_module_layer_template_save,
682 .rtl .vs_module_layer_remove,
683 .rtl .vs_panel_options_active .vs_panel_content,
684 .rtl .vs_module_side_options_close,
685 .rtl .vs_module_side_options_close::before{
686
687 float:left
688 }
689
690 .rtl .vs_add_layer_save:before,
691 .rtl .vs_add_layer_cancel:before,
692 .rtl .vs_add_layer_add:before{
693 margin-right: 0px;
694 margin-left: 10px;
695 }
696
697 .rtl .vs_module_layer_item{
698 margin: 0px 00px 5px 20px;
699 }
700
701 .rtl .vs_side_options {
702
703 right: 0;
704 left:auto;
705
706 border-right:0px;
707 border-left: solid 3px #e0e4e8;
708 }
709 .rtl .vs_module_side_options_title span,
710 .rtl .vs_side_options_content .vs_options_name label,
711 .rtl .vs_module_layer_name,
712 .rtl .vs_module_side_options_title{
713 text-align:right;
714 }
715 .rtl .vs_side_options_content .vs_multi_options_item{
716 padding-left: 5px;
717 padding-right: 0px;
718 }
719 .rtl .vs_module_side_options_title{
720 padding: 0 20px 0 00px;
721 }
722 .rtl .vs_module_layer_item .vs_module_layer_name::before{
723 margin-right: 0px;
724 margin-left: 5px;
725 }