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

866 lines 16.9 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 /* FontAwesome searcher */
623 .fontawesome-searcher-clicker {
624 display: inline-block;
625 background-color: #ffffff;
626 border: 1px solid #cccccc;
627 color: #333333;
628 padding: 6px 16px;
629 text-decoration: none;
630 }
631
632 .fontawesome-searcher {
633 position: absolute;
634 left: 0;
635 top: 0;
636 background: #FFFFFF;
637 box-shadow: 0px 0px 10px rgba(183, 183, 183, 0.18);
638 min-width: 250px;
639 border: 1px solid #e7e7e7;
640 z-index: 99999999;
641 }
642
643 .fontawesome-searcher .fontawesome-searcher-searchbar {
644 padding: 20px;
645 text-align: center;
646 }
647
648 .fontawesome-searcher .fontawesome-searcher-searchbar input {
649 border-radius: 50px;
650 -moz-border-radius: 50px;
651 -webkit-border-radius: 50px;
652 padding: 7px 20px;
653 font-weight: 200;
654 outline: none;
655 }
656
657 .fontawesome-searcher .fontawesome-searcher-icons {
658 background-color: #f5f5f5;
659
660 border-top: 1px solid #e7e7e7;
661
662 overflow: auto;
663 max-height: 150px;
664 }
665
666 .fontawesome-searcher .fontawesome-searcher-icons table {
667 width: 100%;
668 }
669
670 .fontawesome-searcher .fontawesome-searcher-icons table table td {
671 border-bottom: 1px solid #e7e7e7;
672 border-right: 1px solid #e7e7e7;
673 border-left: 1px solid #ffffff;
674 }
675
676 .fontawesome-searcher .fontawesome-searcher-icons a {
677 background-color: #f5f5f5;
678 color: #464646;
679 font-size: 16px;
680 padding: 12px 0;
681 text-decoration: none;
682 display: block;
683 text-align: center;
684 outline: none;
685 }
686
687 .fontawesome-searcher .fontawesome-searcher-icons a:hover {
688 background-color: #e7e7e7;
689 }
690
691 .fontawesome-searcher .no-matches-found {
692 padding: 0 0 15px;
693 text-align: center;
694 font-style: italic;
695 color: #8b8b8b;
696 }
697
698 /* Pro */
699 .color-buttonizer {
700 color: #2a7688;
701 text-transform: uppercase;
702 }
703
704 .color-buttonizer span {
705 color: #ef8419;
706 }
707
708 .color-buttonizer-blue {
709 color: #2a7688;
710 }
711
712 .color-buttonizer-orange {
713 color: #ef8419;
714 }
715
716 .buttonizer-pro-checklist {
717 font-size: 16px;
718 line-height: 25px;
719 font-weight: 400;
720 }
721
722 .buttonizer-pro-checklist .fa-check {
723 margin-right: 10px;
724 font-size: 17px;
725 }
726
727 .buttonizer-pro-feature {
728 background: #2d7688;
729 background: -moz-linear-gradient(-45deg, #2d7688 0%, #187287 50%, #187287 50%, #f0841a 51%, #e8832c 98%);
730 background: -webkit-linear-gradient(-45deg, #2d7688 0%,#187287 50%,#187287 50%,#f0841a 51%,#e8832c 98%);
731 background: linear-gradient(135deg, #2d7688 0%,#187287 50%,#187287 50%,#f0841a 51%,#e8832c 98%);
732 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d7688', endColorstr='#e8832c',GradientType=1 );
733 color: #FFFFFF;
734 font-weight: 500;
735 font-size: 13px;
736 line-height: 17px;
737 padding: 4px 20px;
738 display: inline-block;
739 border-radius: 4px;
740 -moz-border-radius: 4px;
741 -webkit-border-radius: 4px;
742 margin-left: 10px;
743 }
744
745 .buttonizer-pro-text {
746 border: 1px solid #eeeeee;
747 color: #999999;
748 padding: 20px 0;
749 font-size: 16px;
750 }
751
752 .buttonizer-pro-text a {
753 color: #999999;
754 }
755
756 .buttonizer-pro-text .fa-lock {
757 margin-right: 10px;
758 }
759
760 /* */
761 .icon-or-image {
762
763 }
764
765 .icon-or-image .placeholder-choose {
766 padding: 5px 5px 10px 5px;
767 display: block;
768 }
769
770 .icon-or-image .placeholder-choose a {
771 color: #147aae;
772 text-decoration: none;
773
774 }
775
776 .icon-or-image .placeholder-choose a:hover {
777 text-decoration: underline;
778 }
779
780 /*
781 * Red button
782 */
783 .wp-core-ui .button-red {
784 background: #ba0000;
785 border-color: #aa0000 #990000 #990000;
786 -webkit-box-shadow: 0 1px 0 #990000;
787 box-shadow: 0 1px 0 #990000;
788 color: #fff;
789 text-decoration: none;
790 text-shadow: 0 -1px 1px #990000, 1px 0 1px #990000, 0 1px 1px #990000, -1px 0 1px #990000;
791 }
792
793 .wp-core-ui .button-red:hover {
794 background: #c20000 !important;
795 border-color: #990000 !important;
796 color: #fff;
797 }
798
799 .wp-core-ui .button-red:active, .wp-core-ui .button-red:focus {
800 background: #aa0000 !important;
801 border-color: #990000 !important;
802 -webkit-box-shadow: inset 0 2px 0 #990000;
803 box-shadow: inset 0 2px 0 #990000;
804 vertical-align: top;
805 color: #FFFFFF;
806 }
807
808 .time-table {
809 max-width: 700px;
810 }
811
812 /**/
813 .color-chooser-table tr td {
814 vertical-align: top;
815 }
816
817 /* jQuery slider */
818 .ui-slider {
819 position: relative;
820 text-align: left;
821 height: 4px;
822 border: 1px solid rgba(46, 119, 137, 0.17);
823 background-color: #e5e5e5;
824 border-radius: 3px;
825 -webkit-border-radius: 3px;
826 -moz-border-radius: 3px;
827 }
828
829 .ui-slider.ui-slider-disabled {
830 opacity: 0.5;
831 }
832
833 .ui-slider .ui-slider-handle {
834 position: absolute;
835 z-index: 2;
836 width: 25px;
837 height: 25px;
838 cursor: default;
839 -ms-touch-action: none;
840 touch-action: none;
841
842 border-radius: 100%;
843 -webkit-border-radius: 100%;
844 -moz-border-radius: 100%;
845
846 margin-left: -8px;
847
848 border: 1px solid #c5c5c5;
849 background: #f6f6f6;
850 font-weight: normal;
851 color: #454545;
852
853 top: -12px;
854 }
855
856 .ui-slider .ui-slider-range {
857 position: absolute;
858 z-index: 1;
859 height: 4px;
860 top: -1px;
861 font-size: .7em;
862 display: block;
863 border: 1px solid rgba(48, 120, 138, 0.29);
864 background: #ee8216;
865 }
866