PluginProbe
Buttonizer – Floating Menus, Sticky Buttons, & Popup Builder / 1.4.4
Buttonizer – Floating Menus, Sticky Buttons, & Popup Builder v1.4.4
3.6.0 3.5.0 trunk 1.0.10 1.0.2 1.0.3 1.0.4 1.0.5 1.0.6 1.0.6.1 1.0.7 1.0.8 1.0.9 1.1 1.1.1 1.2 1.3 1.4 1.4.1 1.4.2 1.4.3 1.4.4 1.4.5 1.5 1.5.1 All 110 releases
buttonizer-multifunctional-button / css / style.css

style.css in Buttonizer – Floating Menus, Sticky Buttons, & Popup Builder 1.4.4, at css/style.css

953 lines 18.7 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /*
2 * Buttonizer
3 */
4 .opening_hours {
5 width: 100%;
6 }
7
8 .opening_hours td {
9 padding: 5px;
10 }
11
12 h2 .button {
13 float: right;
14 }
15
16 .buttonizer-logo {
17 display: inline-block;
18 margin-top: 20px;
19 margin-right: 20px;
20 padding-left: 10px;
21 float: left;
22 }
23
24 .buttonizer-logo img {
25 max-width: 200px;
26 }
27
28 .buttonizer-no-buttons {
29 width: 100%;
30 }
31
32 .clear {
33 clear: both;
34 }
35
36 .fs-modal .fs-modal-header .fs-close {
37 text-decoration: none;
38 }
39
40 .info-class {
41 position: relative;
42 display: inline-block;
43 }
44
45 .info-class >i {
46 color: #9d8a7e;
47 padding: 3px 5px;
48 margin-right: 4px;
49 border: 1px solid rgba(0, 0, 0, 0);
50 }
51
52 .info-class >span {
53 opacity: 0;
54 position: absolute;
55 visibility: hidden;
56 z-index: 100;
57 top: 19px;
58 left: 0px;
59 border-radius: 3px;
60 -moz-border-radius: 3px;
61 -webkit-border-radius: 3px;
62 -edge-border-radius: 3px;
63
64 border-top-left-radius: 0;
65 -moz-border-top-left-radius: 0;
66 -webkit-border-top-left-radius: 0;
67 min-width: 200px;
68 padding: 10px;
69 background-color: #FFFFFF;
70 color: #333333;
71 font-weight: 200;
72 line-height: 20px;
73 border: 1px solid #d2d2d2;
74 }
75
76 .info-class:hover >i {
77 background-color: #FFFFFF;
78 color: #f08216;
79 border-color: #d2d2d2;
80
81 border-top-left-radius: 3px;
82 -moz-border-top-left-radius: 3px;
83 -webkit-border-top-left-radius: 3px;
84
85 border-top-right-radius: 3px;
86 -moz-border-top-right-radius: 3px;
87 -webkit-border-top-right-radius: 3px;
88
89 position: relative;
90 z-index: 800;
91 border-bottom: 0;
92 }
93
94 .info-class:hover >span {
95 opacity: 1;
96 visibility: visible;
97 }
98
99 #buttonizer h2 {
100 margin-bottom: 20px !important;
101 }
102
103 .savebutton_margin {
104 margin-left: 10px !important;
105 }
106
107 .savebutton span {
108 margin-left: 5px;
109 }
110
111 .button-row {
112 border: 1px solid #c4c4c4;
113 margin-bottom: 10px;
114 }
115
116 .button-row.opened .button-data {
117 display: block;
118 }
119
120 .button-row.button-row-disabled .row-info {
121 position: relative;
122 }
123
124 .button-row.button-row-disabled .row-info .button-locked {
125 position: absolute;
126 left: 0;
127 right: 0;
128 top: 0;
129 bottom: 0;
130 background: rgba(238, 238, 238, 0.74);
131 color: #6b6b6b;
132 text-align: center;
133 padding: 12px;
134 font-size: 16px;
135 }
136
137 .button-row.button-row-disabled.opened .button-data {
138 display: none !important;
139 }
140
141 .button-row .row-info {
142 padding: 12px 15px;
143 background-color: #e6e6e6;
144 cursor: pointer;
145 font-size: 18px;
146 position: relative;
147 }
148
149 .button-row .row-info .mover {
150 position: absolute;
151 left: 0;
152 top: 0;
153 bottom: 0;
154 width: 65px;
155 cursor: move;
156 }
157
158 .button-row .row-info span i {
159 cursor: move;
160 }
161
162 .button-row .row-info i {
163 font-size: 18px;
164 margin-left: 10px;
165 margin-right: 20px;
166 }
167
168 .button-row .row-info .pencil-edit {
169 font-size: 15px;
170 color: #7d7d7d;
171 }
172
173 .button-row .row-info .pencil-edit:hover {
174 color: #333333;
175 }
176
177 .button-row .row-info .mobiledesktop {
178 font-size: 15px;
179 color: #4084ff;
180 float: right;
181 text-decoration: none;
182 outline: none;
183 box-shadow: none;
184 -webkit-box-shadow: none;
185 }
186
187 .button-row .row-info .mobiledesktop i {
188 margin: 0 10px !important;
189 }
190
191 .button-row .row-info .mobiledesktop.selected {
192 color: #7d7d7d;
193 }
194
195 .button-row .row-info .delete-button {
196 color: #c31414;
197 float: right;
198 font-size: 13px;
199 text-decoration: none;
200 margin-left: 15px;
201 }
202
203 .button-row .row-info .delete-button i {
204 font-size: 14px;
205 margin-right: 5px;
206 }
207
208 .button-row .row-info .delete-button:hover {
209 text-decoration: underline;
210 }
211
212 .button-row .row-info .is-live-button, .button-row .row-info .must-save-button {
213 border: 1px solid #f08419;
214 color: #f08419;
215 border-radius: 4px;
216 -moz-border-radius: 4px;
217 -webkit-border-radius: 4px;
218 padding: 3px 15px;
219 float: right;
220 font-size: 11px;
221 text-transform: uppercase;
222 font-weight: 600;
223 text-decoration: none;
224 margin-top: -3px;
225 margin-right: 10px;
226 }
227
228 .button-row .row-info .is-live-button i, .button-row .row-info .must-save-button i {
229 font-size: 9px;
230 margin: -3px 5px 0 0;
231 padding: 0;
232 vertical-align: middle;
233 }
234
235 .button-row .row-info .is-live-button {
236 cursor: default;
237 }
238
239 .button-row .row-info .must-save-button {
240 color: #4575fe;
241 border-color: #4575fe;
242 padding: 6px 15px;
243 margin-top: -5px;
244 cursor: pointer;
245 }
246
247 .button-row .row-info .must-save-button i {
248 font-size: 14px;
249 }
250
251 .button-row.button-row-disabled .row-info >.delete-button {
252 opacity: 0.2;
253 }
254
255 .button-row:hover .row-info, .button-row.opened .row-info {
256 background-color: #dbdbdb;
257 }
258
259 .button-row .button-data {
260 padding: 20px;
261 display: none;
262 }
263
264 .button-row .button-data table {
265 width: 100%;
266 }
267
268 .button-row .button-data .label-top {
269 font-weight: bold;
270 margin-bottom: 5px;
271 display: block;
272 }
273
274 .button-row .button-data input[type=text],
275 .button-row .button-data select {
276 width: 100%;
277 height: auto;
278 padding: 8px 10px;
279 }
280
281 .button-row .button-data .fontawesome-searcher-clicker {
282 display: block !important;
283 }
284
285 .button-row .button-data table .button-pdr {
286 padding-right: 15px;
287 }
288
289 .button-row .button-data table .settings-row td {
290 padding: 5px 0;
291 }
292
293 .button-row .button-data .setting-icon {
294 width: 23px;
295 text-align: center;
296 margin-right: 4px;
297 }
298
299 .button-row .icon-or-image {
300 position: relative;
301 }
302
303 .button-row .icon-or-image .placeholder-choose {
304 position: absolute;
305 top: -35px;
306 right: 10px;
307 z-index: 99;
308 }
309
310 .button-row .button-preview {
311 position: absolute;
312 right: 20px;
313 top: -15px;
314 background-color: blue;
315 }
316
317 .button-row table.settings-row-type tr td {
318 vertical-align: top;
319 }
320
321 .button-row .button-color-palet {
322 border: 1px solid #ccc;
323 -webkit-box-shadow: 0 1px 0 #ccc;
324 box-shadow: 0 1px 0 #ccc;
325 -webkit-border-radius: 3px;
326 border-radius: 3px;
327 cursor: pointer;
328 height: 22px;
329 margin: 0 6px 6px 0;
330 position: relative;
331 -webkit-user-select: none;
332 -moz-user-select: none;
333 -ms-user-select: none;
334 user-select: none;
335 vertical-align: bottom;
336 display: inline-block;
337 top: 0;
338 overflow: hidden;
339 }
340
341 .button-row .button-color-palet:hover {
342 border-color: #afafaf;
343 }
344
345 .button-row .button-color-palet .color {
346 height: 24px;
347 width: 30px;
348 display: inline-block;
349 }
350
351 .button-row .button-color-palet .text {
352 background: #f7f7f7;
353 -webkit-border-radius: 0 2px 2px 0;
354 border-radius: 0 2px 2px 0;
355 border-left: 1px solid #ccc;
356 color: #555;
357 content: attr(title);
358 display: block;
359 font-size: 11px;
360 line-height: 22px;
361 padding: 0 6px;
362 position: relative;
363 text-align: center;
364 float: right;
365 }
366
367 .button-row .color_default_btn {
368 font-size: 11px;
369 line-height: 22px;
370 height: 24px;
371 }
372
373 .button-row .extra_info {
374 padding: 5px;
375 line-height: 20px;
376 }
377
378 .button-preview {
379 border-radius: 50%;
380 width: 56px;
381 height: 56px;
382 display: block;
383 vertical-align: middle;
384 text-align: center;
385 color: #FFFFFF;
386 box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
387 cursor: pointer;
388 outline: none;
389 position: relative;
390 transition: all 0.2s ease-out;
391 -moz-transition: all 0.2s ease-out;
392 -webkit-transition: all 0.2s ease-out;
393 -o-transition: all 0.2s ease-out;
394 margin-top: 5px;
395 line-height: 56px;
396 }
397
398 /* General settings tabs */
399 .vertical-tabs {
400 display: block;
401 width: 100%;
402 border-spacing: 0;
403 }
404
405 .vertical-tabs tr td {
406 vertical-align: top;
407 padding: 0;
408 }
409
410 .vertical-tabs .tabs {
411 width: 200px;
412 }
413
414 .vertical-tabs .tabs a {
415 display: block;
416 float: none !important;
417 margin: 0px;
418 padding: 10px 20px;
419 border: 1px solid #cccccc;
420 border-top: 0;
421 box-shadow: none !important;
422 }
423
424 .vertical-tabs .tabs a.nav-tab-active {
425 background-color: #fff !important;
426 }
427
428 .vertical-tabs .tabs a:hover {
429 background-color: #f3f3f3;
430 }
431
432 .vertical-tabs .tabs a.first {
433 border-top: 1px solid #cccccc;
434 }
435
436 .vertical-tabs .tabs a.nav-tab-active {
437 border-right: 0;
438 }
439
440 .vertical-tabs .tabsholder {
441 width: 85%;
442 }
443
444 .vertical-tabs .tab-container {
445 display: block;
446 border: 1px solid #cccccc;
447 background: #ffffff;
448 margin-left: -1px;
449 min-height: 200px;
450 padding: 0 20px 20px 40px;
451 border-left: 0;
452 border-bottom: 0;
453 }
454
455 .vertical-tabs input[type=text] {
456 padding: 6px 12px;
457 margin-right: 5px;
458 }
459
460 .form-table td {
461 vertical-align: middle !important;
462 }
463
464 .form-table .r-sit {
465 position: relative;
466 padding-top: 15px;
467 }
468
469 .form-table .r-sit .after-input,
470 .form-table .r-sit .before-input {
471 position: absolute;
472 right: 11px;
473 top: 20px;
474 height: 35px;
475 line-height: 35px;
476 }
477
478 .form-table .r-sit .before-input {
479 right: auto;
480 left: 11px;
481 }
482
483 .form-table .r-sit small.after-input,
484 .form-table .r-sit small.before-input {
485 top: 17px;
486 }
487
488 .form-table .r-sit .before-input-padding {
489 padding-left: 40px;
490 }
491
492 .form-table fieldset {
493 border: 1px solid #d7d7d7;
494 background-color: #f7f7f7;
495 padding-right: 10px;
496 padding-left: 10px;
497 margin-top: 15px;
498 }
499
500 .form-table fieldset legend {
501 padding: 5px 15px;
502 font-size: 12px;
503 margin-left: 8px;
504 border: 1px solid #dfdfdf;
505 background: #FFFfff;
506 font-weight: 500;
507 text-transform: uppercase;
508 }
509
510 .form-table fieldset .form-table {
511 margin-top: 0;
512 }
513
514 .form-table fieldset .form-table tr:first [scope="row"] {
515 padding-top: 20px;
516 }
517
518 .form-table fieldset .form-table tr:first .r-sit {
519 padding-top: 3px !important;
520 }
521
522 .form-table input[type=text],
523 .form-table select {
524 width: 100%;
525 height: auto;
526 padding: 8px 10px;
527 margin-bottom: 5px;
528 }
529
530 .form-table th {
531 padding: 27px 10px 20px 0;
532 }
533
534 .form-table .button-preview {
535 position: absolute;
536 top: 36px;
537 left: 200px;
538 }
539
540 .form-table .wp-picker-container {
541 position: relative;
542 }
543
544 .form-table .wp-picker-container.wp-picker-active .wp-picker-holder {
545 position: absolute;
546 z-index: 99999;
547 }
548
549 /* Categories */
550 .categories-load-more {
551 display: block;
552
553 background-color: #e6e6e6;
554 border: 1px solid #c4c4c4;
555
556 padding: 10px 15px;
557 margin-top: 20px;
558
559 font-size: 15px;
560 text-align: center;
561 cursor: pointer;
562
563 color: #444444;
564
565 text-decoration: none;
566 }
567
568 .categories-load-more:hover {
569 color: #888888;
570 }
571
572 .page-categorie-styling {
573 background: #FFFFFF;
574 border-radius: 5px;
575 margin-top: 20px;
576 border: 1px solid #c4c4c4;
577 border-spacing: 0;
578 }
579
580 .page-categorie-styling thead {
581 background-color: #f1f1f1;
582 }
583
584 .page-categorie-styling thead td {
585 border-bottom: 2px solid #dcdcdc;
586 padding: 8px 11px !important;
587 }
588
589 .page-categorie-styling tr {
590 border-bottom: 1px solid #333333;
591 }
592
593 .page-categorie-styling tr td {
594 padding: 14px 11px;
595 border-bottom: 1px solid #dcdcdc;
596 }
597
598 .page-categorie-styling .text-centered {
599 text-align: center;
600 }
601
602 .page-categorie-styling .is-clickable {
603 cursor: pointer;
604 }
605
606 .buttonizer-note {
607 padding: 12px 21px;
608 color: #484848;
609 background: #f1f1f1;
610 border: 1px solid #c8c8c8;
611 font-size: 13px;
612 line-height: 22px;
613 margin-top: 10px;
614 }
615
616 /* FontAwesome searcher */
617 .fontawesome-searcher-clicker {
618 display: inline-block;
619 background-color: #ffffff;
620 border: 1px solid #cccccc;
621 color: #333333;
622 padding: 6px 16px;
623 text-decoration: none;
624 }
625
626 .fontawesome-searcher {
627 position: absolute;
628 left: 0;
629 top: 0;
630 background: #FFFFFF;
631 box-shadow: 0px 0px 10px rgba(183, 183, 183, 0.18);
632 min-width: 250px;
633 border: 1px solid #e7e7e7;
634 z-index: 99999999;
635 }
636
637 .fontawesome-searcher .fontawesome-searcher-searchbar {
638 padding: 20px;
639 text-align: center;
640 }
641
642 .fontawesome-searcher .fontawesome-searcher-searchbar input {
643 border-radius: 50px;
644 -moz-border-radius: 50px;
645 -webkit-border-radius: 50px;
646 padding: 7px 20px;
647 font-weight: 200;
648 outline: none;
649 }
650
651 .fontawesome-searcher .fontawesome-searcher-icons {
652 background-color: #f5f5f5;
653
654 border-top: 1px solid #e7e7e7;
655
656 overflow: auto;
657 max-height: 150px;
658 }
659
660 .fontawesome-searcher .fontawesome-searcher-icons table {
661 width: 100%;
662 }
663
664 .fontawesome-searcher .fontawesome-searcher-icons table table td {
665 border-bottom: 1px solid #e7e7e7;
666 border-right: 1px solid #e7e7e7;
667 border-left: 1px solid #ffffff;
668 }
669
670 .fontawesome-searcher .fontawesome-searcher-icons a {
671 background-color: #f5f5f5;
672 color: #464646;
673 font-size: 16px;
674 padding: 12px 0;
675 text-decoration: none;
676 display: block;
677 text-align: center;
678 outline: none;
679 }
680
681 .fontawesome-searcher .fontawesome-searcher-icons a:hover {
682 background-color: #e7e7e7;
683 }
684
685 .fontawesome-searcher .no-matches-found {
686 padding: 0 0 15px;
687 text-align: center;
688 font-style: italic;
689 color: #8b8b8b;
690 }
691
692 /* Pro */
693 .color-buttonizer {
694 color: #2a7688;
695 text-transform: uppercase;
696 }
697
698 .color-buttonizer span {
699 color: #ef8419;
700 }
701
702 .color-buttonizer-blue {
703 color: #2a7688;
704 }
705
706 .color-buttonizer-orange {
707 color: #ef8419;
708 }
709
710 .buttonizer-pro-checklist {
711 font-size: 16px;
712 line-height: 25px;
713 font-weight: 400;
714 }
715
716 .buttonizer-pro-checklist .fa-check {
717 margin-right: 10px;
718 font-size: 17px;
719 }
720
721 .buttonizer-pro-feature {
722 background: #2d7688;
723 background: -moz-linear-gradient(-45deg, #2d7688 0%, #187287 50%, #187287 50%, #f0841a 51%, #e8832c 98%);
724 background: -webkit-linear-gradient(-45deg, #2d7688 0%,#187287 50%,#187287 50%,#f0841a 51%,#e8832c 98%);
725 background: linear-gradient(135deg, #2d7688 0%,#187287 50%,#187287 50%,#f0841a 51%,#e8832c 98%);
726 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d7688', endColorstr='#e8832c',GradientType=1 );
727 color: #FFFFFF;
728 font-weight: 500;
729 font-size: 13px;
730 line-height: 17px;
731 padding: 4px 20px;
732 display: inline-block;
733 border-radius: 4px;
734 -moz-border-radius: 4px;
735 -webkit-border-radius: 4px;
736 margin-left: 10px;
737 }
738
739 .buttonizer-pro-text {
740 border: 1px solid #eeeeee;
741 color: #999999;
742 padding: 20px 0;
743 font-size: 16px;
744 }
745
746 .buttonizer-pro-text a {
747 color: #999999;
748 }
749
750 .buttonizer-pro-text .fa-lock {
751 margin-right: 10px;
752 }
753
754 /* */
755 .icon-or-image {
756
757 }
758
759 .icon-or-image .placeholder-choose {
760 padding: 5px 5px 10px 5px;
761 display: block;
762 }
763
764 .icon-or-image .placeholder-choose a {
765 color: #147aae;
766 text-decoration: none;
767
768 }
769
770 .icon-or-image .placeholder-choose a:hover {
771 text-decoration: underline;
772 }
773
774 /*
775 * Red button
776 */
777 .wp-core-ui .button-red {
778 background: #ba0000;
779 border-color: #aa0000 #990000 #990000;
780 -webkit-box-shadow: 0 1px 0 #990000;
781 box-shadow: 0 1px 0 #990000;
782 color: #fff;
783 text-decoration: none;
784 text-shadow: 0 -1px 1px #990000, 1px 0 1px #990000, 0 1px 1px #990000, -1px 0 1px #990000;
785 }
786
787 .wp-core-ui .button-red:hover {
788 background: #c20000 !important;
789 border-color: #990000 !important;
790 color: #fff;
791 }
792
793 .wp-core-ui .button-red:active, .wp-core-ui .button-red:focus {
794 background: #aa0000 !important;
795 border-color: #990000 !important;
796 -webkit-box-shadow: inset 0 2px 0 #990000;
797 box-shadow: inset 0 2px 0 #990000;
798 vertical-align: top;
799 color: #FFFFFF;
800 }
801
802 .time-table {
803 max-width: 700px;
804 }
805
806 /**/
807 .color-chooser-table tr td {
808 vertical-align: top;
809 }
810
811 /* jQuery slider */
812 .ui-slider {
813 position: relative;
814 text-align: left;
815 height: 4px;
816 border: 1px solid rgba(46, 119, 137, 0.17);
817 background-color: #e5e5e5;
818 border-radius: 3px;
819 -webkit-border-radius: 3px;
820 -moz-border-radius: 3px;
821 }
822
823 .ui-slider.ui-slider-disabled {
824 opacity: 0.5;
825 }
826
827 .ui-slider .ui-slider-handle {
828 position: absolute;
829 z-index: 2;
830 width: 25px;
831 height: 25px;
832 cursor: default;
833 -ms-touch-action: none;
834 touch-action: none;
835
836 border-radius: 100%;
837 -webkit-border-radius: 100%;
838 -moz-border-radius: 100%;
839
840 margin-left: -8px;
841
842 border: 1px solid #c5c5c5;
843 background: #f6f6f6;
844 font-weight: normal;
845 color: #454545;
846
847 top: -12px;
848 }
849
850 .ui-slider .ui-slider-range {
851 position: absolute;
852 z-index: 1;
853 height: 4px;
854 top: -1px;
855 font-size: .7em;
856 display: block;
857 border: 1px solid rgba(48, 120, 138, 0.29);
858 background: #ee8216;
859 }
860
861 .input_error {
862 background-color: #ffcfcf;
863 color: #ff0000;
864 border: 1px solid #cc6a6a;
865 padding: 10px 20px;
866 margin-top: 8px;
867 border-radius: 2px;
868 -webkit-border-radius: 2px;
869 -moz-border-radius: 2px;
870 }
871 .input_error p {
872 margin: 0;
873 }
874
875 .buttonizer-sticky {
876 position: fixed;
877 right: 30px;
878 bottom: 30px;
879 border: 1px solid #333333;
880 background-color: #eeeeee;
881 padding: 20px 40px;
882 font-size: 18px;
883 border-radius: 4px;
884 -moz-border-radius: 4px;
885 -webkit-border-radius: 4px;
886 }
887
888 .buttonizer-sticky.red {
889
890 }
891
892 .buttonizer-sticky.success {
893 border: 1px solid #2ece27;
894 background-color: #73f068;
895 color: #107a11;
896 }
897
898 .button-primary, .button-primary.focus, .button-primary:focus{
899 color: #fff !important;
900 border-color: #357182 !important;
901 box-shadow: 0 1px 0 #498698 !important;
902 text-shadow: 0 -1px 1px #498698, 1px 0 1px #498698, 0 1px 1px #498698, -1px 0 1px #498698 !important;
903 background: #498698 !important;
904 border-bottom-width: 1px !important;
905 }
906
907 input[type=checkbox]:checked:before {
908 color: #498698 !important;
909 }
910
911 /* Button cattegory */
912 .is_andor td {
913 background-color: #eeeeee;
914 text-align: center;
915 padding: 9px 0 !important;
916 font-size: 11px;
917 color: #626262;
918 font-weight: 700;
919 }
920
921 /* Your changes are saved */
922 .buttonizer-sticky, .success, .sticky-3{
923 background-color: #F08820 !important;
924 color: white !important;
925 border-color: #d6720e !important;
926 border-bottom-width: 2px !important;
927 }
928
929 /* Free premium stuff */
930 .buttonizer-fp-card{
931
932 }
933
934
935 .buttonizer-fp-card, .buttonizer {
936
937 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
938 transition: 0.3s;
939 width: 50%;
940 border-radius: 5px;
941 height: 560px;
942 }
943
944 .buttonizer-fp-card:hover{
945 box-shadow: 0 8px 16px 0 rgba(73,134,152,0.8);
946 }
947
948 .buttonizer-fp-text{
949 color: #498698;
950 }
951 .buttonizer-fp-footer{
952 text-align: center;
953 }