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

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