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

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

665 lines 14.7 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /***********************************layer/*/
2 .vs_options *{
3 box-sizing:border-box;
4
5 transition: color 350ms,background 350ms,border-color 350ms,box-shadow 350ms
6
7 }
8
9 .vs_options_warp {
10 float: left;
11 width:100%;
12 display:none;
13 }
14 .vs_options_warp.vs_layout_group_active{
15
16 display:inline-block !important;
17 }
18 .vs_options_add {
19 float: left;
20 position: relative;
21 }
22 .vs_options_item {
23 float: left;
24 width: 100%;position: relative;
25 padding: 20px 0;
26 margin: 0;
27 box-shadow: 0px 1px 0px 0px rgba(128,128,128,0.1) inset;
28 }
29 .vs_options_name label {
30 float: left;
31 }
32
33 .vs_options_bottom {
34 float: left;
35 padding: 15px;
36 position: sticky;
37 bottom: 0;
38 z-index: 9999;
39 background: #f8f8f8;
40 text-align: left;
41 width: 100%;
42 }
43 .vs_options_name {
44 width: 20%;
45 font-size: 14px;
46 font-weight: 700;
47 float: left;
48 }
49 .vs_options_setting {
50 width: 80%;
51 float: left;
52 }
53
54
55 .vs_options_setting input{
56 font-weight:400 !important;
57 }
58
59 .vs-active-icon .vs-mouse-wait{
60 background:rgba(0,0,0,0.70);
61 }
62 .vs_options_setting .vs-input {
63 height: 30px;
64 padding: 0 2px;
65 float: left;
66 margin: 0 2px;
67 width: 100%;
68 }
69 .vs_options_setting{
70 text-align:inherit !important;
71 }
72
73
74 .vs_options_name label {
75 float: left;
76 width: 100%;
77 text-align: left;
78 line-height: 20px;
79 }
80 .vs_options_start li{
81 float:left;
82 }
83 .vs_options_start {
84 float:left;
85 }
86 .vs_options_description {
87 width: 100%;
88 float: left;
89 font-size: 12px;
90 font-weight: 400;
91 text-align: left;
92 margin-top: 3px;
93 padding-right: 15px;
94 color: #929598;
95 }
96 /**************************************************************************************************************************
97 Text
98 **************************************************************************************************************************/
99 .vs_form_text {
100 width: 92px;
101 float: left;
102 background:#e8ebee !important;
103 color:#80888f;
104 box-shadow:3px 3px 3px 0 rgba(0, 8, 16, 0.1) inset !important;
105
106 border-radius: 7px;
107 border: none !important;
108 }
109
110 /**************************************************************************************************************************
111 Textarea
112 **************************************************************************************************************************/
113 .vs_form_textarea {
114 width: 100%;
115 height: 100px;
116 background:#e8ebee !important;
117 color:#80888f;
118 box-shadow:3px 3px 3px 0 rgba(0, 8, 16, 0.1) inset !important;
119
120 border-radius: 7px;
121 border: none !important;
122 }
123
124 /**************************************************************************************************************************
125 Select
126 **************************************************************************************************************************/
127 .vs_form_select {
128
129 float:left;
130 font-family:vs-rubik,rubik,vs-iransans,tahoma;
131 font-size:14px !important;
132 width:auto;
133 border-radius:7px;
134 background-color: #e8ebee !important;
135 border: none !important;
136 line-height: 30px;font-weight: 400 !important;
137 color: rgb(128, 136, 143);
138 box-shadow:3px 3px 3px 0 rgba(0, 8, 16, 0.1) inset !important;
139 max-width:none !important;
140 color: rgb(128, 136, 143) !important;
141 }
142
143
144 .vs_form_select option{
145 font-family: vs-rubik,rubik,vs-iransans,tahoma !important;
146 background:#ffffff !important;
147 }
148
149
150 /**************************************************************************************************************************
151 Number
152 **************************************************************************************************************************/
153 .vs_form_number{
154 float:left;
155 width:60px ;
156 -moz-appearance:textfield; /* Firefox */
157
158 float: left;
159 background:#e8ebee !important;
160 color:#80888f !important;
161 box-shadow:3px 3px 3px 0 rgba(0, 8, 16, 0.1) inset !important;
162
163 border-radius: 7px;
164 border: none !important;
165 }
166
167 .vs_form_number::-webkit-outer-spin-button {
168 -webkit-appearance: none!important;
169 }
170 .vs_form_number::-webkit-inner-spin-button,
171 .vs_form_number::-webkit-outer-spin-button {
172 -webkit-appearance: none;
173 margin: 0;
174 }
175 body.wp-admin .vs_form_number.vs_bad{
176 background:#E00000 !important;
177 border-color:#C00000 !important;
178 color:#ffffff !important;
179 }
180 .vs_options_number span {
181 line-height: 30px;
182 margin: 0 20px 0px 5px;
183 font-weight: 700;
184 font-size: 14px;
185 color: #828588;
186 float:left;
187 }
188 .vs_options_number .vs_form_range{
189 width:250px !important;
190 margin-right:10px;
191 float:left;
192 height:30px;
193 }
194
195 /**************************************************************************************************************************
196 Checkbox
197 **************************************************************************************************************************/
198 .vs_checkbox {
199 float: left;
200 position: relative;
201
202 }
203 .vs_checkbox label {
204 display: inline-block;
205 position: relative;
206 float: left;
207 padding-right: 0px;
208 }
209 .vs_checkbox input{
210 display:none;
211 }
212 .vs_checkbox li{
213 display:inline-block !important;
214 }
215 .vs_checkbox_primary{
216 border-radius:7px;
217 overflow:hidden;
218 box-shadow: 0 0 0 3px #f5f8fa
219
220 }
221 .vs_checkbox label {
222 height: 30px;
223 padding: 0 15px;
224 color: #828588;
225 background: #ffffff;
226 line-height: 30px;
227 font-weight: 700;
228 font-size: 13px;
229 }
230 .vs_checkbox .vs_label_checkbox_on label:hover,
231 .vs_checkbox .vs_label_checkbox_on input[type="radio"]:checked + label{
232 background:rgb(42, 155, 216);
233 color:#ffffff;
234
235 }
236 .vs_checkbox .vs_label_checkbox_off label:hover,
237 .vs_checkbox .vs_label_checkbox_off input[type="radio"]:checked + label{
238 background:#80888f;
239 color:#ffffff;
240
241 }
242
243
244 .vs_label_checkbox_on,.vs_label_checkbox_off{
245 display:inline-block;
246 float:left;
247 vertical-align:top;
248 }
249
250 .vs_checkbox_primary input[type="checkbox"]:checked + label::before {
251 background-color: rgb(30, 144, 228);
252 border-color: rgb(11, 153, 230);
253 }
254 .vs_checkbox_primary input[type="checkbox"]:checked + label::after {
255 color: #fff;
256 }
257 .vs_checkbox_primary:hover input[type="checkbox"]:checked + label::before {
258 background-color: rgb(43, 72, 173);
259 }
260
261 /**************************************************************************************************************************
262 Hover
263 **************************************************************************************************************************/
264 .vs_options_hover .vs_options_name{
265 display:none !important;
266 }
267 .vs_options_hover .vs_options_setting{
268 width:100% !important;
269 }
270 .vs_hover_warp{
271 width:100%;
272 float: left;
273 border-radius: 7px;
274 overflow: hidden;
275 box-shadow: 0 0 0 3px rgba(120,128,136,0.15);
276 }
277 .vs_hover_item{
278
279 line-height: 30px;
280 margin: 0px;
281 width: 50%;
282 float: left;
283 }
284 .vs_hover_item input{
285 float:left;
286 display:none;
287 height:20px;margin-top: 2px;
288
289 margin-bottom: 0px;
290 }
291
292 .vs_hover_warp{
293 width:100%;
294 overflow: hidden;
295 border-radius: 7px;
296 }
297 .vs_hover_item label{
298 text-align: center;
299 margin:0px !important;
300 float:left; height: 30px;
301 width: 100%;
302 background: #fff;
303
304
305 }
306 .vs_hover_item .vs_hover_checked span{
307 background: #60686f;
308 width: 100%;
309 height: 100%;
310 float: left;
311 color: #fff;
312
313 }
314 /*********************** radio *****************/
315 .vs_radio_warp{
316 float:left;
317 padding:0px !important;
318 margin: 0px !important;
319 }
320 .vs_radio_item{
321
322 line-height:20px;
323 margin-left:20px ;
324 float: left;
325 }
326 .vs_radio_item input{
327 float:left; margin-top: 2px;
328 margin-bottom: 0px;
329 }
330 .vs_radio_item input[type="radio"]{
331 border-color:#c2c5c8 !important;
332 }
333 .vs_radio_item label{
334 float:left; height:20px;
335 font-size:13px;
336 }
337 /*********************** vs_multi_options *****************/
338
339 .vs_multi_options{
340 margin: 0px;
341 display: inline-block;
342 vertical-align: top;
343 float:left;
344 width:100%;
345 }
346 .vs_multi_options_item {
347 float: left;
348 width: auto;
349 padding-right:10px;
350 }
351 .vs_multi_options_item label{
352 float: left;
353 line-height: 30px;
354 margin-right: 10px;
355 color: #30383f;
356
357 }
358 .vs_multi_options_item.vs_name_bottom{
359 display:grid;
360 grid-template-columns: 100%;
361 }
362 .vs_multi_options_item.vs_name_bottom label{
363 color: #80888f;
364 text-align: center;
365 margin-right: 0px !important;
366 font-size: 11px;
367 }
368 /*********************** radio img *****************/
369 .vs_radio_image_item {
370 float: left;
371 width: 20%;
372 padding-right: 10px;
373 margin: 0px;
374 padding-bottom: 10px;
375 }
376 .vs_live_setting_glider_layout .vs_radio_image_item,
377 .vs_live_setting_mobile_glider_layout .vs_radio_image_item,
378 .vs_live_setting_tablet_glider_layout .vs_radio_image_item{
379 width:90px;
380 }
381 .vs_radio_image_item label{
382 position:relative;
383 padding:0px !important;
384 margin:0px !important;
385 }
386
387 .vs_radio_image_item label > input{ /* HIDE RADIO */
388 visibility: hidden; /* Makes input not-clickable */
389 position: absolute; /* Remove input from document flow */
390 }
391
392 .vs_radio_image_item label > input + img{ /* IMAGE STYLES */
393 cursor:pointer;
394 box-shadow:0px 0px 0px 3px #dddddd;
395 margin:0px !important;
396 border-radius:7px;
397
398 }
399 .vs_radio_image_item label input:checked + img{ /* (RADIO CHECKED) IMAGE STYLES */
400 box-shadow:0px 0px 0px 3px #31C2FF;
401 background:#ffffff;
402
403 }
404
405 .vs_radio_image_item img{
406 width:100%;
407 height:auto;
408 }
409 .vs_multi_options_item .vs_radio_image_warp {
410 width: 100% !important;
411 float: left;
412 margin-top: 10px;
413 }
414 /*********************** fold *****************/
415
416 .vs_options_fold{
417 display:none;
418 }
419 .vs_options_item[data-active="show"],
420 .vs_multi_options_item[data-active="show"]{
421 display:inline-block;
422 }
423 .vs_options_item[data-active="hide"],.vs_multi_options_item[data-active="hide"],.vs_list_options_item[data-active="hide"]{
424 display:none;
425 }
426 /*********************** icon *****************/
427 .vs-menu-icon {
428 width: 100%;
429 padding-top: 10px;
430 }
431 .vs-menu-icon::before {
432 font-family: FontAwesome;
433 padding: 10px;
434 font-size: 50px;
435 color: #000;
436 border: solid 3px rgba(150,150,150,.3);
437 font-style: normal;
438 }
439
440
441 body.vs-active-icon .vs_icon {
442 position: fixed;
443 pointer-events: all;
444 background: rgba(0,0,0,0.70);
445 top: 0;
446 z-index: 100000 !important;
447 cursor: initial;
448 height: 100%;
449 width: 100%;
450 right: 0;
451 }
452 body.vs-active-icon .menu-item {
453 display: block;
454 }
455
456 .vs_options_icon .vs-menu-icon {
457 font-size: 50px;
458 height: auto;
459 padding: 10px;
460 position: relative;
461 width: auto;
462 float: left;
463 border: 1px solid rgba(150,150,150,.3);
464 line-height: 50px;
465 margin-left: 10px;
466 }
467 .vs_options_icon .vs-menu-icon::before{
468 border:none !important;
469 }
470
471 .vs_builder_remove_icon:hover{
472 opacity:.5;
473 }
474 .vs_builder_remove_icon::before{
475 font-family:dashicons;
476 content: "\f158";
477 color:#ff0000;
478 font-size: 25px;
479 font-style: normal;
480 line-height: 25px;
481 float: left;
482 }
483
484 .vs_builder_remove_icon{
485 cursor:pointer;
486 position:absolute;
487 top:-12px;
488 left:-12px;
489 }
490 /*********************** image *****************/
491
492 .vs_image_remove::before{
493 font-family:dashicons;
494 content: "\f158";
495 color:#ff0000;
496 font-size: 25px;
497 font-style: normal;
498 line-height: 25px;
499 float: left;
500 }
501 .vs_image_remove{
502 cursor:pointer;
503 position:absolute;
504 top:-0px;
505 left:0px;
506 }
507 .vs_image_remove:hover::before{
508 opacity:.5;
509 }
510 .vs_image_upload {
511 float:left;
512 }
513 .vs_image_item{
514 float:left;
515 position:relative;
516 width:100%;
517
518 margin: 10px;
519 }
520 /*
521 .vs_options_content li img {
522 max-width: 250px;
523 height: auto;border-radius: 7px;
524 display: block;
525 text-align: center;
526 margin: 10px auto;
527 }*/
528 .vs_options_image .vs_options_setting {
529 width: auto;
530 display: inline;
531 float: none;
532 }
533
534 .vs_image_item img{
535 box-shadow:0 0 0 3px #dddddd;
536 width:100%;
537 margin:0px 0px !important;max-width: 200px;
538 float: left;
539 border-radius: 7px;max-width: 200px;
540 float: left;
541 border-radius: 7px;
542 max-height: 200px;
543 height: auto;
544 width: auto;
545 }
546 .vs_builder_choose_icon{
547 float: left;
548 margin-left: 5px !important;
549 }
550 /*********************** heading *****************/
551 .vs_options_heading {
552 padding:0px 10px !important;
553 background:#e0e3e6 !important;
554 }
555 .vs_options_heading span{
556 font-weight: 700;
557 width: 100%;
558 padding: 0px;
559 position: relative;
560 color: rgb(96, 104, 111);
561 text-align: left;
562 font-size: 13px;
563 border-radius: 7px;
564 float: left;
565 cursor: pointer;
566 height: 40px;
567 line-height: 40px;
568 }
569
570 [class*="vs_responsive_options_"]::before {
571 content: "";
572 z-index: 999;
573 position: absolute;
574 width: 100%;
575 height: 100%;
576 left: 0px;
577 top: 0px;
578 background-image: url(../image/hide_item.png);
579 background-color: rgba(120, 128, 136, 0.4);
580 pointer-events: none;
581 opacity: 0.8;
582 }
583 .vs_panel.vs_panel_desktop .vs_responsive_options_desktop::before,
584 .vs_panel.vs_panel_tablet .vs_responsive_options_tablet::before ,
585 .vs_panel.vs_panel_mobile .vs_responsive_options_mobile::before,
586 .vs_module_setting.vs_global_desktop .vs_responsive_options_desktop::before,
587 .vs_module_setting.vs_global_tablet .vs_responsive_options_tablet::before ,
588 .vs_module_setting.vs_global_mobile .vs_responsive_options_mobile::before
589
590 {
591 display:none !important;
592
593 }
594
595
596
597 /* Perview */
598
599 .rtl .vs_options_warp,
600 .rtl .vs_options_add,
601 .rtl .vs_options_item,
602 .rtl .vs_options_name label,
603 .rtl .vs_options_bottom,
604 .rtl .vs_options_name,
605 .rtl .vs_options_setting,
606 .rtl .vs_form_select,
607 .rtl .vs_options_number .vs_form_range,
608 .rtl .vs_checkbox ,
609 .rtl .vs_hover_item,
610 .rtl .vs_hover_item .vs_hover_checked span,
611 .rtl .vs_hover_item label,
612 .rtl .vs_radio_warp,
613 .rtl .vs_radio_item,
614 .rtl .vs_radio_item input,
615 .rtl .vs_radio_item label,
616 .rtl .vs_multi_options_item .vs_radio_image_warp ,
617 .rtl .vs_options_icon .vs-menu-icon,
618 .rtl .vs_builder_remove_icon::before,
619 .rtl .vs_image_remove::before,
620 .rtl .vs_builder_choose_icon,
621 .rtl .vs_options_heading span,
622 .rtl .vs_multi_options,
623 .rtl .vs_multi_options_item ,
624 .rtl .vs_form_number,
625 .rtl .vs_form_text,
626 .rtl .vs_multi_options_item label,
627 .rtl .vs_options_number span,
628 .rtl .vs_radio_image_item{
629 float:right;
630 }
631 .rtl .vs_options_bottom,
632 .rtl .vs_options_start,
633 .rtl .vs_options_start li,
634 .rtl .vs_options_description,
635 .rtl .vs_options_name label,
636 .rtl .vs_options_heading span{
637 text-align: right;
638 }
639
640 .rtl .vs_options_number span{
641 margin: 0 5px 0px 20px;
642 }
643 .rtl .vs_radio_item{
644 margin-right:20px ;
645 margin-left:00px ;
646 }
647 .rtl .vs_multi_options_item label{
648 margin-left: 10px;
649 margin-right: 00px;
650 }
651 .rtl .vs_options_icon .vs-menu-icon{
652 margin-left: 00px;
653 margin-right: 10px;
654 }
655
656 .rtl .vs_multi_options_item,
657 .rtl .vs_radio_image_item {
658 padding-right:00px; padding-left:10px;
659 }
660 .rtl .vs_options_description {
661 padding-right:00px; padding-left:15px;
662 }
663 .rtl .vs_radio_image_item label > input + img{
664 transform: scale(-1,1);
665 }