PluginProbe
StreamCast – bring live radio to your site with a sleek player / 2.3.3
StreamCast – bring live radio to your site with a sleek player v2.3.3
2.4.5 2.4.4 trunk 1.0 1.1 2.0.0 2.1.10 2.1.2 2.1.4 2.1.5 2.1.8 2.2.1 2.2.3 2.2.4 2.2.5 2.3.0 2.3.1 2.3.2 2.3.3 2.3.4 2.3.5 2.3.6 2.3.7 2.3.8 2.3.9 All 29 releases
streamcast / admin / codestar-framework / assets / scss / vendor / _fields.scss

_fields.scss in StreamCast – bring live radio to your site with a sleek player 2.3.3, at admin/codestar-framework/assets/scss/vendor/_fields.scss

2,303 lines 37.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * 03. Fields
3 */
4 .csf-field{
5 position: relative;
6 padding: 30px;
7
8 + .csf-field{
9 border-top: 1px solid #eee;
10 }
11
12 p:first-child{
13 margin-top: 0;
14 }
15
16 p:last-child{
17 margin-bottom: 0;
18 }
19
20 &:after,
21 &:before{
22 content: " ";
23 display: table;
24 }
25
26 &:after{
27 clear: both;
28 }
29
30 h4{
31 margin-top: 0;
32 }
33
34 .csf-title{
35 position: relative;
36 width: 20%;
37 float: left;
38
39 h4{
40 margin: 0;
41 color: #23282d;
42 }
43 }
44
45 .csf-fieldset{
46 float: right;
47 width: calc(80% - 20px);
48 }
49 }
50
51 .csf-pseudo-field{
52 padding: 0 5px 0 0 !important;
53 display: inline-block;
54
55 + .csf-pseudo-field{
56 border: 0;
57 }
58
59 pre{
60 display: none;
61 }
62 }
63
64 /**
65 * 03. 02. Field: accordion
66 */
67 .csf-field-accordion{
68
69 .csf-accordion-item{
70 position: relative;
71 margin-bottom: 5px;
72
73 &:last-child{
74 margin-bottom: 0;
75 }
76
77 h4{
78 font-size: 1em;
79 }
80 }
81
82 .csf-accordion-title{
83 display: block;
84 cursor: pointer;
85 position: relative;
86 margin: 0;
87 padding: 15px;
88 min-height: 0;
89 font-size: 100%;
90 user-select: none;
91 border: 1px solid #ccd0d4;
92 background-color: #fafafa;
93 box-shadow: 0 1px 1px rgba(0,0,0,0.04);
94 transition: border-color .15s;
95
96 &:active,
97 &:hover,
98 &:focus{
99 outline: none;
100 border-color: #999;
101 }
102
103 .csf--icon{
104 width: 20px;
105 text-align: center;
106 margin-right: 2px;
107 }
108 }
109
110 .csf-accordion-icon{
111 width: 16px;
112 text-align: center;
113 }
114
115 .csf-accordion-content{
116 display: none;
117 padding: 0;
118 border: 1px solid #ccd0d4;
119 border-top: none;
120 background-color: #fff;
121 box-shadow: 0 1px 1px rgba(0,0,0,0.04);
122
123 > .csf-field{
124 padding: 15px;
125 }
126 }
127
128 .csf-accordion-open{
129 display: block;
130 }
131 }
132
133 /**
134 * 03. 03. Field: background
135 */
136 .csf-field-background{
137
138 .csf-field{
139 border: 0 !important;
140 padding: 0;
141 margin-bottom: 6px;
142 margin-right: 6px;
143 }
144
145 .csf--title{
146 color: #777;
147 font-size: 12px;
148 }
149
150 .csf--background-colors{
151 display: flex;
152 flex-wrap: wrap;
153 }
154
155 .csf--background-attributes{
156 display: flex;
157 flex-wrap: wrap;
158
159 select{
160 min-width: 100%;
161 margin: 0;
162 }
163
164 .csf-field{
165 flex: 1;
166 }
167 }
168
169 .csf--attributes-hidden{
170 display: none;
171 }
172 }
173
174 /**
175 * 03. 04. Field: backup
176 */
177 .csf-field-backup{
178
179 textarea{
180 width: 100%;
181 min-height: 200px;
182 margin-bottom: 5px;
183 }
184
185 small{
186 display: inline-block;
187 margin: 5px;
188 }
189
190 hr{
191 margin: 20px 0;
192 border: none;
193 border-bottom: 1px solid #e5e5e5;
194 }
195 }
196
197 /**
198 * 03. 05. Field: border, spacing, dimensions
199 */
200 .csf-field-border,
201 .csf-field-spacing,
202 .csf-field-dimensions{
203
204 .csf--inputs{
205 float: left;
206 display: flex;
207 flex-wrap: wrap;
208 }
209
210 .csf--input{
211 display: flex;
212 padding-right: 6px;
213 padding-bottom: 4px;
214 box-sizing: border-box;
215
216 select{
217 margin: 0;
218 }
219
220 input{
221 position: relative;
222 z-index: 1;
223 margin: 0;
224 width: 65px;
225 max-width: 100%;
226 text-align: center;
227 }
228 }
229
230 .csf--color{
231 float: left;
232 }
233
234 .csf--label{
235 display: flex;
236 flex-direction: column;
237 justify-content: center;
238 user-select: none;
239 min-width: 20px;
240 max-width: 100%;
241 padding: 0 4px;
242 font-size: 12px;
243 text-align: center;
244 color: #555;
245 border: 1px solid #7B776C;
246 background-color: #f5f5f5;
247 }
248
249 .csf--icon{
250 border-right: 0;
251 border-radius: 4px 0 0 4px;
252 }
253
254 .csf--icon + input{
255 border-top-left-radius: 0;
256 border-bottom-left-radius: 0;
257 }
258
259 .csf--unit{
260 border-left: 0;
261 border-radius: 0 4px 4px 0;
262 }
263
264 .csf--is-unit{
265 border-top-right-radius: 0;
266 border-bottom-right-radius: 0;
267 }
268 }
269
270 /**
271 * 03. 06. Field: button_set
272 */
273 .csf-field-button_set{
274
275 .csf--buttons{
276 display: inline-block;
277 }
278
279 .csf--button{
280 position: relative;
281 z-index: 1;
282 float: left;
283 cursor: pointer;
284 padding: 7px 14px;
285 min-width: 16px;
286 text-align: center;
287 color: #555;
288 border: 1px solid #cccccc;
289 background-color: #f7f7f7;
290 user-select: none;
291 box-shadow: 0 1px 0 rgba(0,0,0,0.1);
292
293 &:first-child{
294 border-radius: 4px 0 0 4px;
295 }
296
297 &:last-child{
298 border-radius: 0 4px 4px 0;
299 }
300
301 &:not(:first-child){
302 margin-left: -1px;
303 }
304
305 &:hover{
306 background-color: #eee;
307 }
308 }
309
310 .csf--active:hover,
311 .csf--active{
312 z-index: 2;
313 color: #fff;
314 border-color: #006799;
315 background-color: #0085ba;
316 }
317
318 input{
319 display: none;
320 }
321 }
322
323 /**
324 * 03. 07. Field: checkbox, radio
325 */
326 .csf-field-checkbox,
327 .csf-field-radio{
328
329 ul{
330 margin: 0;
331 padding: 0;
332 list-style-type: none;
333 overflow-y: auto;
334 max-height: 305px;
335
336 li{
337 margin-bottom: 6px;
338 }
339
340 ul{
341 max-height: none;
342
343 li{
344 margin-left: 8px;
345
346 &:first-child{
347 margin-left: 0;
348 }
349 }
350 }
351 }
352
353 input{
354 margin: 0 1px;
355 }
356
357 .csf--inline-list li{
358 display: inline-block;
359 margin-right: 15px;
360 }
361
362 .csf--text{
363 margin-left: 5px;
364 vertical-align: middle;
365 }
366
367 .csf-checker{
368 cursor: pointer;
369 }
370 }
371
372 /**
373 * 03. 08. Field: code_editor
374 */
375 .csf-field-code_editor{
376
377 .CodeMirror{
378 width: 100%;
379 height: 400px;
380 }
381
382 .cm-s-default{
383 border: 1px solid #ccd0d4;
384 }
385
386 textarea{
387 width: 100%;
388 height: 400px;
389 }
390 }
391
392 /**
393 * 03. 09. Field: color
394 */
395 .csf-field-color{
396
397 > input{
398 opacity: 0.75;
399 width: 115px;
400 max-width: 100%;
401 }
402
403 .button.wp-picker-clear{
404 padding: 0 8px;
405 margin-left: 6px;
406 line-height: 2.54545455;
407 min-height: 30px;
408 }
409 }
410
411 /**
412 * 03. 10. Field: color_group
413 */
414 .csf-field-color_group{
415
416 .csf--left{
417 float: left;
418 margin-right: 10px;
419 margin-bottom: 5px;
420 }
421
422 .csf--title{
423 color: #999;
424 margin-bottom: 5px;
425 }
426 }
427
428 /**
429 * 03. 11. Field: fieldset
430 */
431 .csf-field-fieldset{
432
433 .csf-fieldset-content{
434 border: 1px solid #ccd0d4;
435 background-color: #fff;
436 box-shadow: 0 1px 1px rgba(0,0,0,0.04);
437
438 > .csf-field{
439 padding: 15px;
440 }
441 }
442
443 .csf-field-subheading{
444 font-size: 13px;
445 }
446 }
447
448 /**
449 * 03. 12. Field: date
450 */
451 .csf-field-date{
452
453 input{
454 margin: 0;
455 }
456
457 .csf--to{
458 margin-left: 7px;
459 }
460 }
461
462 .csf-datepicker-wrapper{
463 margin-top: 5px;
464 width: auto;
465 background-color: #fff;
466 z-index: 9999999 !important;
467 box-shadow: 0 0 30px rgba(0,0,0,0.15);
468
469 *{
470 float: none;
471 margin: 0;
472 padding: 0;
473 font-family: inherit;
474 font-weight: normal;
475 font-style: normal;
476 text-decoration: none;
477 border: 0;
478 border-radius: 0;
479 box-shadow: none;
480 }
481
482 .ui-widget-header,
483 .ui-datepicker-header{
484 color: #fff;
485 background: #00a0d2;
486 }
487
488 .ui-datepicker-header .ui-state-hover{
489 cursor: pointer;
490 }
491
492 .ui-datepicker-title{
493 font-size: 14px;
494 line-height: 40px;
495 text-align: center;
496 }
497
498 .ui-datepicker-prev,
499 .ui-datepicker-next{
500 position: static;
501 top: auto;
502 left: auto;
503 right: auto;
504 font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
505 font-weight: 900;
506 font-size: 12px;
507 text-align: center;
508 width: 41px;
509 height: 40px;
510 line-height: 40px;
511 color: #fff;
512 background-color: rgba(white, 0.1);
513 text-rendering: auto;
514 -webkit-font-smoothing: antialiased;
515 -moz-osx-font-smoothing: grayscale;
516 }
517
518 .ui-datepicker-next span,
519 .ui-datepicker-prev span{
520 display: none;
521 }
522
523 .ui-datepicker-prev{
524 float: left;
525 }
526
527 .ui-datepicker-next{
528 float: right;
529 }
530
531 .ui-datepicker-prev:before{
532 content: '\f053';
533 }
534
535 .ui-datepicker-next:before{
536 content: '\f054';
537 }
538
539 .ui-datepicker-prev-hover,
540 .ui-datepicker-next-hover{
541 opacity: 0.75;
542 }
543
544 tbody .ui-datepicker-week-col{
545 background-color: #f7f7f7;
546 }
547
548 .ui-datepicker-buttonpane{
549 padding: 10px;
550 text-align: center;
551 background-color: #f7f7f7;
552 }
553
554 .ui-datepicker-buttonpane button{
555 cursor: pointer;
556 margin: 0 5px;
557 padding: 7px 14px;
558 border: 1px solid #eee;
559 background-color: #fff;
560 }
561
562 select{
563 margin: 0 4px;
564 }
565
566 select option{
567 color: #555;
568 }
569
570 table{
571 font-size: 13px;
572 border-collapse: collapse;
573 width: 100%;
574 }
575
576 thead{
577 color: #fff;
578 background: #32373c;
579 }
580
581 th{
582 text-align: center;
583 padding: 7px;
584 border: 1px solid #444;
585 }
586
587 td{
588 text-align: center;
589 border: 1px solid #f4f4f4;
590 }
591
592 td.ui-datepicker-other-month{
593 border: transparent;
594 }
595
596 td .ui-state-default{
597 color: #555;
598 width: auto;
599 display: block;
600 padding: 6px 12px;
601 }
602
603 td .ui-state-active,
604 td .ui-state-hover{
605 color: #fff;
606 background-color: #0073aa;
607 }
608
609 td.ui-state-disabled .ui-state-default{
610 opacity: 0.5;
611 }
612 }
613
614 /**
615 * 03. 13. Field: gallery
616 */
617 .csf-field-gallery{
618
619 input{
620 display: none;
621 }
622
623 ul{
624 margin: 0;
625 padding: 0;
626 list-style-type: none;
627
628 li{
629 display: inline-block;
630 position: relative;
631 padding: 4px;
632 margin: 0 5px 10px 0;
633 border: 1px solid #ccc;
634 background-color: #f9f9f9;
635 border-radius: 2px;
636 box-shadow: 0 1px 0 rgba(0,0,0,0.08);
637
638 img{
639 max-height: 60px;
640 display: inline-block;
641 vertical-align: middle;
642 }
643 }
644 }
645
646 .button{
647 margin-right: 5px;
648 margin-bottom: 5px;
649 }
650 }
651
652 /**
653 * 03. 14. Field: group
654 */
655 .csf-field-group{
656
657 .csf-cloneable-hidden{
658 display: none !important;
659 }
660
661 .csf-cloneable-wrapper{
662 position: relative;
663 }
664
665 .csf-cloneable-item{
666 display: none;
667 position: relative;
668 margin-bottom: 5px;
669
670 h4{
671 font-size: 1em;
672 }
673 }
674
675 .ui-accordion .csf-cloneable-item{
676 display: block;
677 }
678
679 .csf-cloneable-content{
680 border: 1px solid #ccd0d4;
681 background-color: #fff;
682 box-shadow: 0 1px 1px rgba(0,0,0,0.04);
683
684 > .csf-field{
685 padding: 15px;
686 }
687 }
688
689 .csf-cloneable-title{
690 display: block;
691 cursor: pointer;
692 position: relative;
693 user-select: none;
694 margin: 0;
695 padding: 15px 65px 15px 10px;
696 min-height: 0;
697 font-size: 100%;
698 border: 1px solid #ccd0d4;
699 background-color: #fafafa;
700 box-shadow: 0 1px 1px rgba(0,0,0,.04);
701 transition: border-color .15s;
702
703 &:active,
704 &:hover,
705 &:focus{
706 border-color: #999;
707 outline: none;
708 }
709 }
710
711 .csf-cloneable-helper{
712 position: absolute;
713 top: 12px;
714 right: 10px;
715 z-index: 1;
716 font-size: 14px;
717 line-height: 1em;
718
719 i{
720 display: inline-block;
721 cursor: pointer;
722 padding: 5px;
723 color: #999;
724
725 &:hover{
726 color: #555;
727 }
728 }
729 }
730
731 .csf-cloneable-content{
732 padding: 0;
733 border-top: 0;
734 }
735
736 .csf-cloneable-title-prefix,
737 .csf-cloneable-title-number{
738 margin-right: 5px;
739 }
740
741 .csf-cloneable-alert{
742 display: none;
743 margin-bottom: 5px;
744 padding: 10px 20px;
745 color: #a94442;
746 border: 1px solid #ebccd1;
747 background-color: #f2dede;
748 }
749
750 .widget-placeholder{
751 margin-bottom: 10px;
752 border: 1px dashed #f1c40f;
753 background-color: #fffae4;
754 }
755
756 .csf-cloneable-header-icon{
757 display: inline-block;
758 text-align: center;
759 font-size: 14px;
760 width: 17px;
761 text-indent: 0;
762 vertical-align: text-top;
763 }
764
765 .csf-cloneable-placeholder{
766 background-color: #ddd;
767 margin-top: 4px;
768 width: 100px;
769 height: 10px;
770 font-size: 10px;
771 line-height: 10px;
772 display: inline-block;
773 vertical-align: top;
774 border-radius: 2px;
775 }
776 }
777
778 /**
779 * 03. 15. Field: icon
780 */
781 .csf-field-icon{
782
783 input{
784 display: none;
785 }
786
787 .button{
788 margin-right: 5px;
789 }
790
791 .csf-icon-preview{
792
793 i{
794 display: inline-block;
795 font-size: 16px;
796 width: 30px;
797 height: 28px;
798 line-height: 28px;
799 margin-right: 5px;
800 text-align: center;
801 vertical-align: top;
802 color: #555;
803 border: 1px solid #ccc;
804 background-color: #f7f7f7;
805 border-radius: 3px;
806 box-shadow: 0 1px 0 rgba(0,0,0,0.08);
807 }
808 }
809 }
810
811 /**
812 * 03. 16. Field: image_select
813 */
814 .csf-field-image_select{
815
816 .csf--image{
817 display: inline-block;
818 margin: 0 5px 5px 0;
819 }
820
821 .csf--inline-list .csf--image{
822 display: block;
823 }
824
825 figure{
826 cursor: pointer;
827 position: relative;
828 display: inline-block;
829 max-width: 100%;
830 margin: 0;
831 vertical-align: bottom;
832 border: 2px solid transparent;
833 background-color: #fff;
834 user-select: none;
835 transition: all .2s;
836
837 &:before{
838 position: absolute;
839 top: 0;
840 left: 0;
841 text-align: center;
842 font-size: 10px;
843 font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
844 font-weight: 900;
845 content: "\f00c";
846 width: 16px;
847 height: 16px;
848 line-height: 14px;
849 opacity: 0;
850 color: #fff;
851 background-color: #222;
852 transition: opacity .2s;
853 }
854 }
855
856 .csf--active figure{
857 border-color: #222;
858 box-shadow: 0 0 20px rgba(0,0,0,0.2);
859
860 &:before{
861 opacity: 1;
862 }
863 }
864
865 img{
866 max-width: 100%;
867 height: auto;
868 vertical-align: top;
869 }
870
871 input{
872 display: none;
873 }
874 }
875
876 /**
877 * 03. 17. Field: link_color
878 */
879 .csf-field-link_color{
880
881 .csf--left{
882 float: left;
883 margin-right: 10px;
884 margin-bottom: 5px;
885 }
886
887 .csf--title{
888 color: #777;
889 margin-bottom: 5px;
890 }
891 }
892
893 /**
894 * 03. 18. Field: map
895 */
896 .csf-field-map{
897
898 input{
899 width: 100%;
900 }
901
902 input[type="text"]="text""].ui-autocomplete-loading{
903 background-position-x: calc(100% - 5px);
904 }
905
906 .csf--map-search + .csf--map-osm-wrap{
907 margin-top: 10px;
908 }
909
910 .csf--map-osm-wrap{
911 position: relative;
912 padding: 5px;
913 border: 1px solid #eee;
914 background-color: #fff;
915 box-shadow: 0 1px 1px rgba(0,0,0,.04);
916 }
917
918 .csf--map-osm{
919 position: relative;
920 z-index: 1;
921 min-height: 250px;
922 }
923
924 .csf--map-inputs{
925 margin-top: 10px;
926 display: flex;
927 justify-content: space-between;
928 }
929
930 .csf--map-input{
931 flex: 1;
932
933 &:last-child{
934 padding-left: 10px;
935 }
936 }
937
938 label{
939 display: block;
940 color: #777;
941 font-size: 12px;
942 margin: 0 0 2px 0;
943 }
944 }
945
946 .csf-map-ui-autocomplate{
947 z-index: 999999;
948 border-radius: 4px;
949 overflow: hidden;
950 }
951
952
953 /**
954 * 03. 19. Field: media
955 */
956 .csf-field-media{
957
958 .csf--placeholder{
959 display: flex;
960 align-items: flex-start;
961
962 input{
963 width: 100%;
964 margin: 0;
965 }
966 }
967
968 .button{
969 margin-left: 5px;
970 }
971
972 .hidden + .button{
973 margin-left: 0;
974 }
975
976 .csf--preview{
977 position: relative;
978
979 .fa-times{
980 position: absolute;
981 z-index: 1;
982 right: 2px;
983 top: 2px;
984 font-size: 14px;
985 width: 22px;
986 height: 22px;
987 line-height: 22px;
988 text-align: center;
989 text-decoration: none;
990 color: #fff;
991 background-color: #dd3333;
992 opacity: 0.75;
993 border-radius: 2px;
994 transition: all .2s;
995
996 &:hover{
997 opacity: 1;
998 }
999
1000 &:focus{
1001 box-shadow: none;
1002 }
1003 }
1004 }
1005 }
1006
1007 /**
1008 * 03. 20. Field: palette
1009 */
1010 .csf-field-palette{
1011
1012 .csf--palette{
1013 position: relative;
1014 display: inline-block;
1015 cursor: pointer;
1016 border: 2px solid #ddd;
1017 margin-right: 10px;
1018 margin-bottom: 10px;
1019 user-select: none;
1020 -webkit-user-select: none;
1021 transition: all .2s;
1022
1023 span{
1024 vertical-align: middle;
1025 display: inline-block;
1026 width: 22px;
1027 height: 60px;
1028 line-height: 60px;
1029 overflow: hidden;
1030 text-indent: -999px;
1031 }
1032
1033 &:before{
1034 position: absolute;
1035 top: 0;
1036 left: 0;
1037 text-align: center;
1038 font-size: 10px;
1039 font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
1040 font-weight: 900;
1041 content: "\f00c";
1042 width: 16px;
1043 height: 16px;
1044 line-height: 14px;
1045 opacity: 0;
1046 color: #fff;
1047 background-color: #222;
1048 transition: opacity .2s;
1049 }
1050 }
1051
1052 .csf--active{
1053 border-color: #222;
1054 box-shadow: 0 0 20px rgba(0,0,0,0.2);
1055
1056 &:before{
1057 opacity: 1;
1058 }
1059 }
1060
1061 input{
1062 display: none;
1063 }
1064 }
1065
1066 /**
1067 * 03. 21. Field: repeater
1068 */
1069 .csf-field-repeater{
1070
1071 .csf-field-text input{
1072 width: 100%;
1073 }
1074
1075 .csf-repeater-hidden{
1076 display: none !important;
1077 }
1078
1079 .csf-repeater-wrapper{
1080
1081 .csf-repeater-item{
1082 display: table;
1083 width: 100%;
1084 margin-bottom: 5px;
1085 border: 1px solid #eee;
1086
1087 h4{
1088 font-size: 1em;
1089 }
1090 }
1091 }
1092
1093 .csf-repeater-content{
1094 width: 100%;
1095 display: table-cell;
1096 vertical-align: middle;
1097 background-color: #fff;
1098
1099 > .csf-field{
1100 padding: 15px;
1101 }
1102 }
1103
1104 .csf-repeater-helper{
1105 width: 100%;
1106 display: table-cell;
1107 vertical-align: middle;
1108 text-align: center;
1109 font-size: 14px;
1110 line-height: 1em;
1111 border-left: 1px solid #eee;
1112 background-color: #f7f7f7;
1113
1114 i{
1115 display: inline-block;
1116 cursor: pointer;
1117 color: #999;
1118 padding: 5px;
1119
1120 &:hover{
1121 color: #555;
1122 }
1123 }
1124 }
1125
1126 .csf-repeater-helper-inner{
1127 width: 75px;
1128 }
1129
1130 .csf-repeater-alert{
1131 display: none;
1132 margin-bottom: 5px;
1133 padding: 10px 20px;
1134 color: #a94442;
1135 border: 1px solid #ebccd1;
1136 background-color: #f2dede;
1137 }
1138
1139 .widget-placeholder{
1140 height: 50px;
1141 margin-bottom: 3px;
1142 border: 1px dashed #f1c40f;
1143 background-color: #fffae4;
1144 }
1145
1146 .ui-sortable-helper{
1147 height: 50px !important;
1148 overflow: hidden !important;
1149 border-color: #ccc !important;
1150 background-color: #eee !important;
1151 opacity: 0.5;
1152
1153 .csf-repeater-helper,
1154 .csf-repeater-content{
1155 display: none;
1156 }
1157 }
1158 }
1159
1160 /**
1161 * 03. 22. Field: select
1162 */
1163 .csf-field-select{
1164
1165 .csf-fieldset{
1166 min-height: 30px;
1167 }
1168
1169 .csf-chosen{
1170 display: none;
1171 }
1172
1173 select{
1174 max-width: 100%;
1175 margin: 0;
1176 }
1177 }
1178
1179 /**
1180 * 03. 23. Field: slider
1181 */
1182 .csf-field-slider{
1183
1184 .csf--wrap{
1185 display: flex;
1186 align-items: center;
1187 }
1188
1189 .csf--input{
1190 display: flex;
1191 }
1192
1193 .csf--unit{
1194 display: flex;
1195 justify-content: center;
1196 flex-direction: column;
1197 user-select: none;
1198 padding: 0 6px;
1199 font-size: 11px;
1200 line-height: 1;
1201 border-radius: 0 4px 4px 0;
1202 color: #555;
1203 border: 1px solid #7e8993;
1204 border-left: 0;
1205 background-color: #f5f5f5;
1206 }
1207
1208 .csf-slider-ui{
1209 margin-right: 15px;
1210 }
1211
1212 input[type=number]=number]{
1213 position: relative;
1214 z-index: 1;
1215 margin: 0;
1216 width: 50px;
1217 text-align: center;
1218 }
1219
1220 .csf--is-unit{
1221 border-top-right-radius: 0;
1222 border-bottom-right-radius: 0;
1223 }
1224
1225 .ui-slider{
1226 position: relative;
1227 width: 100%;
1228 height: 3px;
1229 border: none;
1230 background: #ddd;
1231 border-radius: 2px;
1232 }
1233
1234 .ui-slider-range{
1235 height: 3px;
1236 border: none;
1237 background: #333;
1238 border-radius: 2px;
1239 }
1240
1241 .ui-slider-handle{
1242 position: absolute;
1243 width: 16px;
1244 height: 16px;
1245 top: -7px;
1246 margin-left: -8px;
1247 border: none;
1248 background: #333;
1249 border-radius: 2px;
1250 }
1251
1252 .ui-state-active,
1253 .ui-slider-handle:hover{
1254 cursor: pointer;
1255 background: #111;
1256 }
1257 }
1258
1259 /**
1260 * 03. 24. Field: sortable
1261 */
1262 .csf-field-sortable{
1263
1264 .csf-field-text{
1265
1266 input{
1267 width: 100%;
1268 max-width: 100%;
1269 }
1270 }
1271
1272 .csf-sortable{
1273
1274 .csf-sortable-item{
1275 display: table;
1276 width: 100%;
1277 margin-bottom: 5px;
1278 border: 1px solid #eee;
1279
1280 h4{
1281 font-size: 1em;
1282 }
1283 }
1284 }
1285
1286 .csf-sortable-content{
1287 width: 100%;
1288 display: table-cell;
1289 vertical-align: middle;
1290 background-color: #fff;
1291
1292 > .csf-field{
1293 padding: 15px;
1294 }
1295 }
1296
1297 .csf-sortable-helper{
1298 width: 100%;
1299 display: table-cell;
1300 vertical-align: middle;
1301 text-align: center;
1302 font-size: 14px;
1303 line-height: 1em;
1304 border-left: 1px solid #eee;
1305 background-color: #f7f7f7;
1306
1307 i{
1308 display: inline-block;
1309 cursor: pointer;
1310 width: 50px;
1311 color: #555;
1312
1313 &:hover{
1314 opacity: 0.5;
1315 }
1316 }
1317 }
1318
1319 .widget-placeholder{
1320 height: 50px;
1321 margin-bottom: 3px;
1322 border: 1px dashed #f1c40f;
1323 background-color: #fffae4;
1324 }
1325
1326 .ui-sortable-helper{
1327 height: 50px !important;
1328 overflow: hidden !important;
1329 border-color: #ccc !important;
1330 background-color: #eee !important;
1331 opacity: 0.5;
1332
1333 .csf-sortable-helper,
1334 .csf-sortable-content{
1335 display: none;
1336 }
1337 }
1338 }
1339
1340 /**
1341 * 03. 25. Field: sorter
1342 */
1343 .csf-field-sorter{
1344
1345 .ui-sortable-placeholder{
1346 height: 20px;
1347 border: 1px dashed #f1c40f;
1348 background-color: #fffae4;
1349 }
1350
1351 .csf-modules{
1352 float: left;
1353 width: 50%;
1354 box-sizing: border-box;
1355
1356 &:first-child{
1357 padding-right: 15px;
1358 }
1359
1360 &:last-child{
1361 padding-left: 15px;
1362 }
1363 }
1364
1365 .csf-disabled,
1366 .csf-enabled{
1367 padding: 5px 15px;
1368 border: 1px dashed #ddd;
1369 background-color: #fff;
1370 }
1371
1372 .csf-disabled{
1373 li{
1374 opacity: 0.5;
1375 transition: opacity .15s;
1376 }
1377
1378 .ui-sortable-helper{
1379 opacity: 1;
1380 }
1381 }
1382
1383 .csf-sorter-title{
1384 font-size: 13px;
1385 font-weight: 600;
1386 padding: 10px;
1387 text-align: center;
1388 border: 1px dashed #ddd;
1389 border-bottom: none;
1390 background-color: #f8f8f8;
1391 text-transform: uppercase;
1392 }
1393
1394 ul{
1395 list-style-type: none;
1396 margin: 0;
1397 padding: 0;
1398 min-height: 62px;
1399
1400 li{
1401 margin: 10px 0;
1402 padding: 10px 15px;
1403 cursor: move;
1404 font-weight: bold;
1405 text-align: center;
1406 border: 1px solid #e5e5e5;
1407 background-color: #fafafa;
1408 transition: border-color .15s;
1409
1410 &:hover{
1411 border-color: #bbb;
1412 }
1413 }
1414 }
1415 }
1416
1417 /**
1418 * 03. 26. Field: spinner
1419 */
1420 .csf-field-spinner{
1421
1422 .csf--spin{
1423 display: flex;
1424 }
1425
1426 .ui-spinner{
1427 display: flex;
1428 }
1429
1430 .ui-button{
1431 display: flex;
1432 flex-direction: column;
1433 justify-content: center;
1434 text-align: center;
1435 min-width: 20px;
1436 padding: 0 4px;
1437 color: #555;
1438 border: 1px solid #7e8993;
1439 background-color: #f5f5f5;
1440 }
1441
1442 .ui-spinner-button{
1443 cursor: pointer;
1444
1445 &:hover{
1446 background-color: #e7e7e7;
1447 }
1448
1449 &:active{
1450 background-color: #ddd;
1451 }
1452
1453 &:before{
1454 font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
1455 font-weight: 900;
1456 font-size: 14px;
1457 line-height: 14px;
1458 }
1459 }
1460
1461 .ui-spinner-down{
1462 order: 1;
1463 border-right: 0;
1464 border-radius: 4px 0 0 4px;
1465
1466 &:before{
1467 content: "\f0d9";
1468 }
1469 }
1470
1471 .ui-spinner-input{
1472 order: 2;
1473 }
1474
1475 .csf--unit{
1476 order: 3;
1477 border-left: 0;
1478 user-select: none;
1479 }
1480
1481 .ui-spinner-up{
1482 order: 4;
1483 border-left: 0;
1484 border-radius: 0 4px 4px 0;
1485
1486 &:before{
1487 content: "\f0da";
1488 }
1489 }
1490
1491 input{
1492 position: relative;
1493 z-index: 1;
1494 width: 50px;
1495 text-align: center;
1496 margin: 0;
1497 padding: 0 8px;
1498 border-radius: 0;
1499 }
1500
1501 .ui-button-text,
1502 .ui-button-icon,
1503 .ui-button-icon-space{
1504 display: none;
1505 }
1506 }
1507
1508 /**
1509 * 03. 27. Field: switcher
1510 */
1511 .csf-field-switcher{
1512
1513 .csf--switcher{
1514 float: left;
1515 cursor: pointer;
1516 position: relative;
1517 width: 60px;
1518 height: 26px;
1519 padding: 0;
1520 margin: 0;
1521 overflow: hidden;
1522 border-radius: 4px;
1523 background-color: #ed6f6f;
1524 user-select: none;
1525 -webkit-user-select: none;
1526 }
1527
1528 .csf--ball{
1529 position: absolute;
1530 top: 4px;
1531 left: 4px;
1532 width: 24px;
1533 height: 18px;
1534 background-color: #fff;
1535 border-radius: 4px;
1536 transition: all .1s;
1537 box-shadow: 1px 1px 1px rgba(0,0,0,0.15);
1538 }
1539
1540 .csf--on,
1541 .csf--off{
1542 position: absolute;
1543 top: 0;
1544 left: 0;
1545 right: 0;
1546 font-size: 11px;
1547 line-height: 26px;
1548 font-weight: 500;
1549 font-style: normal;
1550 text-align: center;
1551 text-transform: uppercase;
1552 color: #fff;
1553 padding-right: 28px;
1554 opacity: 0;
1555 transition: all .1s;
1556 }
1557
1558 .csf--off{
1559 padding-right: 0;
1560 padding-left: 28px;
1561 opacity: 1;
1562 }
1563
1564 .csf--active{
1565 background: #4fb845;
1566
1567 .csf--on{
1568 opacity: 1;
1569 }
1570
1571 .csf--off{
1572 opacity: 0;
1573 }
1574
1575 .csf--ball{
1576 left: 100%;
1577 margin-left: -28px;
1578 }
1579 }
1580
1581 .csf--label{
1582 float: left;
1583 margin-top: 4px;
1584 margin-left: 8px;
1585 font-weight: 400;
1586 color: #999;
1587 }
1588
1589 input{
1590 display: none;
1591 }
1592 }
1593
1594 /**
1595 * 03. 28. Field: tabbed
1596 */
1597 .csf-field-tabbed{
1598
1599 .csf-tabbed-content{
1600 border: 1px solid #ccd0d4;
1601 background-color: #fff;
1602 box-shadow: 0 1px 1px rgba(0,0,0,.04);
1603
1604 > .csf-field{
1605 padding: 15px;
1606 }
1607 }
1608
1609 .csf-tabbed-nav{
1610
1611 .csf--icon{
1612 padding-right: 5px;
1613 }
1614
1615 a{
1616 display: inline-block;
1617 padding: 12px 15px;
1618 margin-top: 1px;
1619 margin-right: 5px;
1620 margin-bottom: -1px;
1621 position: relative;
1622 text-decoration: none;
1623 color: #444;
1624 font-weight: 600;
1625 border: 1px solid #ccd0d4;
1626 background-color: #f3f3f3;
1627 transition: all .2s;
1628
1629 &:hover{
1630 background-color: #f9f9f9;
1631 }
1632
1633 &.csf-tabbed-active{
1634 background-color: #fff;
1635 border-bottom-color: #fff;
1636 }
1637
1638 &:focus{
1639 outline: none;
1640 box-shadow: none;
1641 }
1642 }
1643 }
1644 }
1645
1646 /**
1647 * 03. 29. Field: text
1648 */
1649 .csf-field-text{
1650
1651 input{
1652 width: 50%;
1653 max-width: 100%;
1654 margin: 0;
1655 }
1656 }
1657
1658 /**
1659 * 03. 30. Field: textarea
1660 */
1661 .csf-field-textarea{
1662
1663 textarea{
1664 width: 100%;
1665 max-width: 100%;
1666 min-height: 125px;
1667 }
1668
1669 .csf-shortcode-button{
1670 margin-bottom: 10px;
1671 margin-right: 5px;
1672 }
1673 }
1674
1675 /**
1676 * 03. 31. Field: typography
1677 */
1678 .csf-field-typography{
1679
1680 textarea,
1681 select{
1682 margin: 0;
1683 min-width: 100%;
1684 max-width: 100%;
1685 }
1686
1687 .csf--title{
1688 color: #777;
1689 margin: 0 0 2px 0;
1690 font-size: 12px;
1691
1692 small{
1693 vertical-align: top;
1694 }
1695 }
1696
1697 .csf--blocks{
1698 display: flex;
1699 flex-wrap: wrap;
1700 }
1701
1702 .csf--block{
1703 flex: 1;
1704 max-width: 100%;
1705 padding-right: 6px;
1706 padding-bottom: 6px;
1707 }
1708
1709 .csf--input{
1710 margin: 0;
1711 min-width: 100%;
1712 }
1713
1714 .csf--input-wrap{
1715 position: relative;
1716 }
1717
1718 .csf--unit{
1719 position: absolute;
1720 z-index: 1;
1721 right: 4px;
1722 top: 4px;
1723 bottom: 4px;
1724 padding: 2px 6px;
1725 color: #666;
1726 font-size: 11px;
1727 line-height: 1;
1728 border-radius: 2px;
1729 background: #eee;
1730 user-select: none;
1731 display: flex;
1732 justify-content: center;
1733 flex-direction: column;
1734 }
1735
1736 .csf--preview{
1737 font-size: 16px;
1738 line-height: 20px;
1739 padding: 20px;
1740 color: #222;
1741 border: 1px solid #eee;
1742 background-color: #fff;
1743 border-radius: 2.5px;
1744 user-select: none;
1745 -webkit-user-select: none;
1746 transition: background-color .2s, border-color .2s;
1747 }
1748
1749 .csf--block-preview{
1750 cursor: pointer;
1751 position: relative;
1752 overflow: hidden;
1753 margin-top: 10px;
1754 max-width: 100%;
1755 }
1756
1757 .csf--black-background{
1758 border-color: #000;
1759 background-color: #000;
1760 }
1761
1762 .csf--toggle{
1763 position: absolute;
1764 top: 5px;
1765 right: 10px;
1766 color: #999;
1767 }
1768
1769 .csf--block-extra-styles{
1770 margin-top: 5px;
1771 }
1772 }
1773
1774 /**
1775 * 03. 32. Field: upload
1776 */
1777 .csf-field-upload{
1778
1779 input{
1780 width: 100%;
1781 margin: 0;
1782 }
1783
1784 .csf--wrap{
1785 display: flex;
1786 align-items: flex-start;
1787 }
1788
1789 .button{
1790 margin-left: 5px;
1791 }
1792 }
1793
1794 /**
1795 * 03. 33. Field: wp_editor
1796 */
1797 .csf-field-wp_editor{
1798
1799 .csf-wp-editor{
1800 float: left;
1801 width: 100%;
1802 }
1803
1804 .mce-toolbar-grp{
1805 border: none;
1806 }
1807
1808 .mce-btn.mce-active button,
1809 .mce-btn.mce-active:hover button,
1810 .mce-btn.mce-active i,
1811 .mce-btn.mce-active:hover i{
1812 color: #23282d;
1813 }
1814
1815 .wp-media-buttons{
1816 position: relative;
1817 z-index: 2;
1818 }
1819
1820
1821 .wp-editor-tabs{
1822 position: relative;
1823 z-index: 1;
1824 }
1825
1826 .csf-no-tinymce{
1827 border: 1px solid #e5e5e5;
1828 }
1829
1830 .csf-no-quicktags{
1831
1832 .wp-media-buttons{
1833 float: none;
1834 display: block;
1835 }
1836
1837 .mce-tinymce{
1838 box-shadow: none;
1839 border: 1px solid #e5e5e5;
1840 }
1841 }
1842
1843 textarea{
1844 width: 100%;
1845 max-width: 100%;
1846 margin: 0;
1847 box-shadow: none;
1848 }
1849 }
1850
1851 /**
1852 * 03. 34. Field: heading
1853 */
1854 .csf-field-heading{
1855 font-size: 1.5em;
1856 font-weight: bold;
1857 color: #23282d;
1858 background-color: #f5f5f5;
1859 }
1860
1861 /**
1862 * 03. 35. Field: subheading
1863 */
1864 .csf-field-subheading{
1865 font-size: 14px;
1866 font-weight: bold;
1867 padding-top: 17px;
1868 padding-bottom: 17px;
1869 color: #23282d;
1870 background-color: #f7f7f7;
1871 }
1872
1873 /**
1874 * 03. 36. Field: submessage
1875 */
1876 .csf-field-submessage{
1877 padding: 0 !important;
1878 border: 0 !important;
1879
1880 + .csf-field{
1881 border-top: 0 !important;
1882 }
1883 }
1884
1885 .csf-submessage{
1886 font-size: 12px;
1887 padding: 17px 30px;
1888 border-top: 1px solid transparent;
1889 border-bottom: 1px solid transparent;
1890 }
1891
1892 .csf-submessage-success{
1893 color: #3c763d;
1894 border-color: #d6e9c6;
1895 background-color: #dff0d8;
1896 }
1897
1898 .csf-submessage-info{
1899 color: #31708f;
1900 border-color: #bce8f1;
1901 background-color: #d9edf7;
1902 }
1903
1904 .csf-submessage-warning{
1905 color: #8a6d3b;
1906 border-color: #faebcc;
1907 background-color: #fcf8e3;
1908 }
1909
1910 .csf-submessage-danger{
1911 color: #a94442;
1912 border-color: #ebccd1;
1913 background-color: #f2dede;
1914 }
1915
1916 .csf-submessage-normal{
1917 color: #23282d;
1918 border-color: #eee;
1919 background-color: #f7f7f7;
1920 }
1921
1922 /**
1923 * 03. 37. Field: notice
1924 */
1925 .csf-field-notice{
1926 background-color: #f7f7f7;
1927 }
1928
1929 .csf-notice{
1930 padding: 12px;
1931 background-color: #fff;
1932 border-left-style: solid;
1933 border-left-width: 4px;
1934 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
1935 }
1936
1937 .csf-notice-success{
1938 border-color: #46b450;
1939 }
1940
1941 .csf-notice-info{
1942 border-color: #339fd4;
1943 }
1944
1945 .csf-notice-warning{
1946 border-color: #ffbc00;
1947 }
1948
1949 .csf-notice-danger{
1950 border-color: #dc3232;
1951 }
1952
1953 .csf-notice-normal{
1954 border-color: #222;
1955 }
1956
1957 /**
1958 * 03. 38. Field: number
1959 */
1960 .csf-field-number{
1961
1962 input{
1963 width: 100%;
1964 margin: 0;
1965 }
1966
1967 .csf--wrap{
1968 position: relative;
1969 float: left;
1970 width: 100px;
1971 }
1972
1973 .csf--unit{
1974 position: absolute;
1975 z-index: 1;
1976 right: 4px;
1977 top: 4px;
1978 bottom: 4px;
1979 padding: 2px 6px;
1980 color: #666;
1981 font-size: 11px;
1982 line-height: 1;
1983 border-radius: 2px;
1984 background: #eee;
1985 user-select: none;
1986 display: flex;
1987 justify-content: center;
1988 flex-direction: column;
1989 }
1990 }
1991
1992 /**
1993 * 03. 39. Field: link
1994 */
1995 .csf-field-link{
1996
1997 input{
1998 display: none;
1999 }
2000
2001 .csf--result{
2002 display: inline-block;
2003 font-size: 12px;
2004 line-height: 16px;
2005 padding: 7px 10px;
2006 margin-bottom: 7px;
2007 color: #777;
2008 border: 1px solid #e5e5e5;
2009 background-color: #f5f5f5;
2010 border-radius: 2px;
2011 world-break: break-word;
2012 }
2013
2014 .csf--wrap{
2015 position: relative;
2016 float: left;
2017 width: 100px;
2018 }
2019
2020 .csf--unit{
2021 position: absolute;
2022 z-index: 1;
2023 right: 4px;
2024 top: 4px;
2025 bottom: 4px;
2026 padding: 2px 6px;
2027 color: #666;
2028 font-size: 11px;
2029 line-height: 1;
2030 border-radius: 2px;
2031 background: #eee;
2032 user-select: none;
2033 display: flex;
2034 justify-content: center;
2035 flex-direction: column;
2036 }
2037 }
2038
2039 /**
2040 * 03. 40. others
2041 */
2042 .csf-help{
2043 cursor: help;
2044 position: absolute;
2045 top: 0;
2046 right: 0;
2047 padding: 5px;
2048 font-size: 13px;
2049 color: #aaa;
2050
2051 .csf-help-text{
2052 display: none;
2053 }
2054 }
2055
2056 .csf-image-preview{
2057 display: inline-block;
2058 position: relative;
2059 padding: 4px;
2060 min-width: 100px;
2061 min-height: 100px;
2062 line-height: 100px;
2063 margin-bottom: 10px;
2064 text-align: center;
2065 border-radius: 2px;
2066 border: 1px solid #ccc;
2067 background-color: #f9f9f9;
2068 box-shadow: 0 1px 0 rgba(0,0,0,0.08);
2069
2070 img{
2071 max-width: 100px;
2072 max-height: 100px;
2073 display: inline-block;
2074 vertical-align: middle;
2075 object-fit: contain;
2076 }
2077 }
2078
2079 .csf-field-custom{
2080
2081 .csf-field{
2082 padding: 0;
2083 }
2084 }
2085
2086 .csf-field{
2087
2088 .chosen-container-single .chosen-single{
2089 height: 28px;
2090 line-height: 26px;
2091 }
2092
2093 .chosen-container-single .chosen-single abbr{
2094 top: 0;
2095 right: 20px;
2096 font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
2097 font-weight: 900;
2098 font-size: 12px;
2099 height: 100%;
2100 width: 18px;
2101 color: #aaa;
2102 text-align: center;
2103 background: none;
2104
2105 &:before{
2106 content: "\f00d";
2107 }
2108
2109 &:hover{
2110 color: #555;
2111 }
2112 }
2113
2114 .chosen-container-multi .chosen-choices li.search-choice .search-choice-close{
2115 font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
2116 font-weight: 900;
2117 font-size: 12px;
2118 height: 100%;
2119 width: 18px;
2120 color: #aaa;
2121 text-align: center;
2122 background: none;
2123
2124 &:before{
2125 content: "\f00d";
2126 display: inline-block;
2127 padding-top: 3px;
2128 }
2129
2130 &:hover{
2131 color: #555;
2132 }
2133 }
2134
2135 .chosen-container-single .chosen-single div b{
2136 font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
2137 font-weight: 900;
2138 font-size: 14px;
2139 color: #aaa;
2140 background: none;
2141
2142 &:before{
2143 content: "\f107";
2144 }
2145
2146 &:hover{
2147 color: #555;
2148 }
2149 }
2150
2151 .chosen-container-multi .chosen-choices li.search-choice-placeholder {
2152 border: 1px dashed #aaa;
2153 margin: 3px 5px 3px 0;
2154 }
2155
2156 .chosen-container-multi .ui-sortable li.search-choice span {
2157 cursor: move;
2158 }
2159
2160 .chosen-container-active.chosen-with-drop .chosen-single div b{
2161
2162 &:before{
2163 content: "\f106";
2164 }
2165 }
2166
2167 .chosen-container-single .chosen-single-with-deselect span{
2168 margin-right: 40px;
2169 }
2170
2171 .chosen-container-single .chosen-search input[type="text"]="text""]{
2172 background: none;
2173 }
2174
2175 .chosen-container-single .chosen-search{
2176
2177 &:before{
2178 font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
2179 font-weight: 900;
2180 font-size: 11px;
2181 content: "\f002";
2182 position: absolute;
2183 right: 12px;
2184 top: 10px;
2185 color: #aaa;
2186 }
2187 }
2188
2189 .wp-picker-container{
2190 display: inline-block;
2191
2192 .wp-color-result.button{
2193 margin-bottom: 0;
2194 }
2195 }
2196
2197 .csf--transparent-wrap{
2198 display: none;
2199 position: relative;
2200 top: -1px;
2201 width: 235px;
2202 padding: 9px 10px;
2203 border: 1px solid #dfdfdf;
2204 border-top: none;
2205 background-color: #fff;
2206 }
2207
2208 .wp-picker-active .csf--transparent-wrap{
2209 display: block;
2210 }
2211
2212 .csf--transparent-slider{
2213 position: absolute;
2214 width: 190px;
2215 margin-left: 2px;
2216 height: 18px;
2217
2218 .ui-slider-handle{
2219 position: absolute;
2220 top: -3px;
2221 bottom: -3px;
2222 z-index: 5;
2223 border-color: #aaa;
2224 border-style: solid;
2225 border-width: 4px 3px;
2226 width: 10px;
2227 height: 16px;
2228 margin: 0 -5px;
2229 background: none;
2230 cursor: ew-resize;
2231 opacity: 0.9;
2232 border-radius: 4px;
2233 box-shadow: 0 1px 2px rgba(0,0,0,0.2);
2234
2235 &:before{
2236 content: " ";
2237 position: absolute;
2238 left: -2px;
2239 right: -2px;
2240 top: -3px;
2241 bottom: -3px;
2242 border: 2px solid #fff;
2243 border-radius: 3px;
2244 }
2245 }
2246 }
2247
2248 .csf--transparent-offset{
2249 height: 18px;
2250 width: 200px;
2251 background: url(../images/checkerboard.png) repeat-y center left scroll #fff;
2252 border-radius: 2px;
2253 box-shadow: inset 0 0 5px rgba(0,0,0,0.4);
2254 }
2255
2256 .csf--transparent-text{
2257 position: absolute;
2258 top: 12px;
2259 right: 10px;
2260 width: 30px;
2261 font-size: 12px;
2262 line-height: 12px;
2263 text-align: center;
2264 color: #999;
2265 }
2266
2267 .csf--transparent-button{
2268 cursor: pointer;
2269 user-select: none;
2270 margin-top: 10px;
2271 font-size: 11px;
2272 text-align: center;
2273 border-radius: 2px;
2274 padding: 3px 7px;
2275 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
2276 letter-spacing: 0.2px;
2277 color: #777;
2278 border: 1px solid #ccc;
2279 background-color: #f7f7f7;
2280 transition: background-color .2s, border-color .2s, color .2s;
2281 }
2282
2283 .csf--transparent-active{
2284
2285 .wp-color-result{
2286 background-image: url(../images/checkerboard.png);
2287 background-size: 135px;
2288 background-position: center left;
2289 background-color: transparent !important;
2290 }
2291
2292 .csf--transparent-button{
2293 color: #fff;
2294 border-color: #3ea032;
2295 background-color: #4fb845;
2296 }
2297
2298 .fa:before{
2299 content: "\f205";
2300 }
2301 }
2302 }
2303