PluginProbe
Buttonizer – Floating Menus, Sticky Buttons, & Popup Builder / 1.5.1
Buttonizer – Floating Menus, Sticky Buttons, & Popup Builder v1.5.1
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.5.1, at css/style.css

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