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

876 lines 17.1 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: #4876ff;
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 #dc2323;
214 color: #dc2323;
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 table.settings-row-type .input_error {
322 background-color: #ffcfcf;
323 color: #ff0000;
324 border: 1px solid #cc6a6a;
325 padding: 10px 20px;
326 margin-top: 8px;
327 border-radius: 2px;
328 -webkit-border-radius: 2px;
329 -moz-border-radius: 2px;
330 }
331
332 .button-row table.settings-row-type .input_error p {
333 margin: 0;
334 }
335
336 .button-row .button-color-palet {
337 border: 1px solid #ccc;
338 -webkit-box-shadow: 0 1px 0 #ccc;
339 box-shadow: 0 1px 0 #ccc;
340 -webkit-border-radius: 3px;
341 border-radius: 3px;
342 cursor: pointer;
343 height: 22px;
344 margin: 0 6px 6px 0;
345 position: relative;
346 -webkit-user-select: none;
347 -moz-user-select: none;
348 -ms-user-select: none;
349 user-select: none;
350 vertical-align: bottom;
351 display: inline-block;
352 top: 0;
353 overflow: hidden;
354 }
355
356 .button-row .button-color-palet:hover {
357 border-color: #afafaf;
358 }
359
360 .button-row .button-color-palet .color {
361 height: 24px;
362 width: 30px;
363 display: inline-block;
364 }
365
366 .button-row .button-color-palet .text {
367 background: #f7f7f7;
368 -webkit-border-radius: 0 2px 2px 0;
369 border-radius: 0 2px 2px 0;
370 border-left: 1px solid #ccc;
371 color: #555;
372 content: attr(title);
373 display: block;
374 font-size: 11px;
375 line-height: 22px;
376 padding: 0 6px;
377 position: relative;
378 text-align: center;
379 float: right;
380 }
381
382 .button-row .color_default_btn {
383 font-size: 11px;
384 line-height: 22px;
385 height: 24px;
386 }
387
388 .button-row .extra_info {
389 padding: 5px;
390 line-height: 20px;
391 }
392
393 .button-preview {
394 border-radius: 50%;
395 width: 56px;
396 height: 56px;
397 display: block;
398 vertical-align: middle;
399 text-align: center;
400 color: #FFFFFF;
401 box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
402 cursor: pointer;
403 outline: none;
404 position: relative;
405 transition: all 0.2s ease-out;
406 -moz-transition: all 0.2s ease-out;
407 -webkit-transition: all 0.2s ease-out;
408 -o-transition: all 0.2s ease-out;
409 margin-top: 5px;
410 line-height: 56px;
411 }
412
413 /* General settings tabs */
414 .vertical-tabs {
415 display: block;
416 width: 100%;
417 border-spacing: 0;
418 }
419
420 .vertical-tabs tr td {
421 vertical-align: top;
422 padding: 0;
423 }
424
425 .vertical-tabs .tabs {
426 width: 200px;
427 }
428
429 .vertical-tabs .tabs a {
430 display: block;
431 float: none !important;
432 margin: 0px;
433 padding: 10px 20px;
434 border: 1px solid #cccccc;
435 border-top: 0;
436 box-shadow: none !important;
437 }
438
439 .vertical-tabs .tabs a.nav-tab-active {
440 background-color: #fff !important;
441 }
442
443 .vertical-tabs .tabs a:hover {
444 background-color: #f3f3f3;
445 }
446
447 .vertical-tabs .tabs a.first {
448 border-top: 1px solid #cccccc;
449 }
450
451 .vertical-tabs .tabs a.nav-tab-active {
452 border-right: 0;
453 }
454
455 .vertical-tabs .tabsholder {
456 width: 85%;
457 }
458
459 .vertical-tabs .tab-container {
460 display: block;
461 border: 1px solid #cccccc;
462 background: #ffffff;
463 margin-left: -1px;
464 min-height: 200px;
465 padding: 0 20px 20px 40px;
466 border-left: 0;
467 border-bottom: 0;
468 }
469
470 .vertical-tabs input[type=text] {
471 padding: 6px 12px;
472 margin-right: 5px;
473 }
474
475 .form-table td {
476 vertical-align: middle !important;
477 }
478
479 .form-table .r-sit {
480 position: relative;
481 padding-top: 15px;
482 }
483
484 .form-table .r-sit .after-input,
485 .form-table .r-sit .before-input {
486 position: absolute;
487 right: 11px;
488 top: 20px;
489 height: 35px;
490 line-height: 35px;
491 }
492
493 .form-table .r-sit .before-input {
494 right: auto;
495 left: 11px;
496 }
497
498 .form-table .r-sit small.after-input,
499 .form-table .r-sit small.before-input {
500 top: 17px;
501 }
502
503 .form-table .r-sit .before-input-padding {
504 padding-left: 40px;
505 }
506
507 .form-table fieldset {
508 border: 1px solid #d7d7d7;
509 background-color: #f7f7f7;
510 padding-right: 10px;
511 padding-left: 10px;
512 margin-top: 15px;
513 }
514
515 .form-table fieldset legend {
516 padding: 5px 15px;
517 font-size: 12px;
518 margin-left: 8px;
519 border: 1px solid #dfdfdf;
520 background: #FFFfff;
521 font-weight: 500;
522 text-transform: uppercase;
523 }
524
525 .form-table fieldset .form-table {
526 margin-top: 0;
527 }
528
529 .form-table fieldset .form-table tr:first [scope="row"] {
530 padding-top: 20px;
531 }
532
533 .form-table fieldset .form-table tr:first .r-sit {
534 padding-top: 3px !important;
535 }
536
537 .form-table input[type=text],
538 .form-table select {
539 width: 100%;
540 height: auto;
541 padding: 8px 10px;
542 margin-bottom: 5px;
543 }
544
545 .form-table th {
546 padding: 27px 10px 20px 0;
547 }
548
549 .form-table .button-preview {
550 position: absolute;
551 top: 36px;
552 left: 200px;
553 }
554
555 .form-table .wp-picker-container {
556 position: relative;
557 }
558
559 .form-table .wp-picker-container.wp-picker-active .wp-picker-holder {
560 position: absolute;
561 z-index: 99999;
562 }
563
564 /* Categories */
565 .categories-load-more {
566 display: block;
567
568 background-color: #e6e6e6;
569 border: 1px solid #c4c4c4;
570
571 padding: 10px 15px;
572 margin-top: 20px;
573
574 font-size: 15px;
575 text-align: center;
576 cursor: pointer;
577
578 color: #444444;
579
580 text-decoration: none;
581 }
582
583 .categories-load-more:hover {
584 color: #888888;
585 }
586
587 .page-categorie-styling {
588 background: #FFFFFF;
589 border-radius: 5px;
590 margin-top: 20px;
591 border: 1px solid #c4c4c4;
592 border-spacing: 0;
593 overflow: hidden;
594 }
595
596 .page-categorie-styling thead {
597 background-color: #f1f1f1;
598 }
599
600 .page-categorie-styling thead td {
601 border-bottom: 2px solid #dcdcdc;
602 padding: 8px 11px !important;
603 }
604
605 .page-categorie-styling tr {
606 border-bottom: 1px solid #333333;
607 }
608
609 .page-categorie-styling tr td {
610 padding: 14px 11px;
611 border-bottom: 1px solid #dcdcdc;
612 }
613
614 .page-categorie-styling .text-centered {
615 text-align: center;
616 }
617
618 .page-categorie-styling .is-clickable {
619 cursor: pointer;
620 }
621
622 .buttonizer-note {
623 padding: 12px 21px;
624 color: #484848;
625 background: #f1f1f1;
626 border: 1px solid #c8c8c8;
627 font-size: 13px;
628 line-height: 22px;
629 margin-top: 10px;
630 }
631
632 /* FontAwesome searcher */
633 .fontawesome-searcher-clicker {
634 display: inline-block;
635 background-color: #ffffff;
636 border: 1px solid #cccccc;
637 color: #333333;
638 padding: 6px 16px;
639 text-decoration: none;
640 }
641
642 .fontawesome-searcher {
643 position: absolute;
644 left: 0;
645 top: 0;
646 background: #FFFFFF;
647 box-shadow: 0px 0px 10px rgba(183, 183, 183, 0.18);
648 min-width: 250px;
649 border: 1px solid #e7e7e7;
650 z-index: 99999999;
651 }
652
653 .fontawesome-searcher .fontawesome-searcher-searchbar {
654 padding: 20px;
655 text-align: center;
656 }
657
658 .fontawesome-searcher .fontawesome-searcher-searchbar input {
659 border-radius: 50px;
660 -moz-border-radius: 50px;
661 -webkit-border-radius: 50px;
662 padding: 7px 20px;
663 font-weight: 200;
664 outline: none;
665 }
666
667 .fontawesome-searcher .fontawesome-searcher-icons {
668 background-color: #f5f5f5;
669
670 border-top: 1px solid #e7e7e7;
671
672 overflow: auto;
673 max-height: 150px;
674 }
675
676 .fontawesome-searcher .fontawesome-searcher-icons table {
677 width: 100%;
678 }
679
680 .fontawesome-searcher .fontawesome-searcher-icons table table td {
681 border-bottom: 1px solid #e7e7e7;
682 border-right: 1px solid #e7e7e7;
683 border-left: 1px solid #ffffff;
684 }
685
686 .fontawesome-searcher .fontawesome-searcher-icons a {
687 background-color: #f5f5f5;
688 color: #464646;
689 font-size: 16px;
690 padding: 12px 0;
691 text-decoration: none;
692 display: block;
693 text-align: center;
694 outline: none;
695 }
696
697 .fontawesome-searcher .fontawesome-searcher-icons a:hover {
698 background-color: #e7e7e7;
699 }
700
701 .fontawesome-searcher .no-matches-found {
702 padding: 0 0 15px;
703 text-align: center;
704 font-style: italic;
705 color: #8b8b8b;
706 }
707
708 /* Pro */
709 .color-buttonizer {
710 color: #2a7688;
711 text-transform: uppercase;
712 }
713
714 .color-buttonizer span {
715 color: #ef8419;
716 }
717
718 .color-buttonizer-blue {
719 color: #2a7688;
720 }
721
722 .color-buttonizer-orange {
723 color: #ef8419;
724 }
725
726 .buttonizer-pro-checklist {
727 font-size: 16px;
728 line-height: 25px;
729 font-weight: 400;
730 }
731
732 .buttonizer-pro-checklist .fa-check {
733 margin-right: 10px;
734 font-size: 17px;
735 }
736
737 .buttonizer-pro-feature {
738 background: #2d7688;
739 background: -moz-linear-gradient(-45deg, #2d7688 0%, #187287 50%, #187287 50%, #f0841a 51%, #e8832c 98%);
740 background: -webkit-linear-gradient(-45deg, #2d7688 0%,#187287 50%,#187287 50%,#f0841a 51%,#e8832c 98%);
741 background: linear-gradient(135deg, #2d7688 0%,#187287 50%,#187287 50%,#f0841a 51%,#e8832c 98%);
742 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d7688', endColorstr='#e8832c',GradientType=1 );
743 color: #FFFFFF;
744 font-weight: 500;
745 font-size: 13px;
746 line-height: 17px;
747 padding: 4px 20px;
748 display: inline-block;
749 border-radius: 4px;
750 -moz-border-radius: 4px;
751 -webkit-border-radius: 4px;
752 margin-left: 10px;
753 }
754
755 .buttonizer-pro-text {
756 border: 1px solid #eeeeee;
757 color: #999999;
758 padding: 20px 0;
759 font-size: 16px;
760 }
761
762 .buttonizer-pro-text a {
763 color: #999999;
764 }
765
766 .buttonizer-pro-text .fa-lock {
767 margin-right: 10px;
768 }
769
770 /* */
771 .icon-or-image {
772
773 }
774
775 .icon-or-image .placeholder-choose {
776 padding: 5px 5px 10px 5px;
777 display: block;
778 }
779
780 .icon-or-image .placeholder-choose a {
781 color: #147aae;
782 text-decoration: none;
783
784 }
785
786 .icon-or-image .placeholder-choose a:hover {
787 text-decoration: underline;
788 }
789
790 /*
791 * Red button
792 */
793 .wp-core-ui .button-red {
794 background: #ba0000;
795 border-color: #aa0000 #990000 #990000;
796 -webkit-box-shadow: 0 1px 0 #990000;
797 box-shadow: 0 1px 0 #990000;
798 color: #fff;
799 text-decoration: none;
800 text-shadow: 0 -1px 1px #990000, 1px 0 1px #990000, 0 1px 1px #990000, -1px 0 1px #990000;
801 }
802
803 .wp-core-ui .button-red:hover {
804 background: #c20000 !important;
805 border-color: #990000 !important;
806 color: #fff;
807 }
808
809 .wp-core-ui .button-red:active, .wp-core-ui .button-red:focus {
810 background: #aa0000 !important;
811 border-color: #990000 !important;
812 -webkit-box-shadow: inset 0 2px 0 #990000;
813 box-shadow: inset 0 2px 0 #990000;
814 vertical-align: top;
815 color: #FFFFFF;
816 }
817
818 .time-table {
819 max-width: 700px;
820 }
821
822 /**/
823 .color-chooser-table tr td {
824 vertical-align: top;
825 }
826
827 /* jQuery slider */
828 .ui-slider {
829 position: relative;
830 text-align: left;
831 height: 4px;
832 border: 1px solid rgba(46, 119, 137, 0.17);
833 background-color: #e5e5e5;
834 border-radius: 3px;
835 -webkit-border-radius: 3px;
836 -moz-border-radius: 3px;
837 }
838
839 .ui-slider.ui-slider-disabled {
840 opacity: 0.5;
841 }
842
843 .ui-slider .ui-slider-handle {
844 position: absolute;
845 z-index: 2;
846 width: 25px;
847 height: 25px;
848 cursor: default;
849 -ms-touch-action: none;
850 touch-action: none;
851
852 border-radius: 100%;
853 -webkit-border-radius: 100%;
854 -moz-border-radius: 100%;
855
856 margin-left: -8px;
857
858 border: 1px solid #c5c5c5;
859 background: #f6f6f6;
860 font-weight: normal;
861 color: #454545;
862
863 top: -12px;
864 }
865
866 .ui-slider .ui-slider-range {
867 position: absolute;
868 z-index: 1;
869 height: 4px;
870 top: -1px;
871 font-size: .7em;
872 display: block;
873 border: 1px solid rgba(48, 120, 138, 0.29);
874 background: #ee8216;
875 }
876