PluginProbe
Float menu – awesome floating side menu / 4.3.1
Float menu – awesome floating side menu v4.3.1
7.2.5 trunk 2.1 2.2 3.0.1 3.1 3.2.2 3.3.1 3.5 3.5.1 3.5.2 3.5.3. 3.5.4 4.0 4.1 4.1.1 4.2 4.3 4.3.1 4.3.2 5.0 5.0.1 5.0.2 5.0.3 5.1 All 57 releases
float-menu / public / assets / css / style.css

style.css in Float menu – awesome floating side menu 4.3.1, at public/assets/css/style.css

795 lines 12.7 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /*! ========= INFORMATION ============================
2 - document: Float Menu
3 - author: Wow-Company
4 - url: https://wow-estore.com/item/float-menu-pro/
5 ==================================================== */
6
7 @charset "utf-8";
8
9
10 .floating-menu {
11 font-family: Arial, Helvetica, sans-serif;
12 visibility: hidden;
13 }
14 .floating-menu.fm-ready {
15 visibility: visible;
16 }
17
18 /* Resets */
19 .floating-menu a {
20 cursor: pointer;
21 text-decoration: none;
22 }
23 .floating-menu ul {
24 list-style-type: none;
25 margin: 0;
26 padding: 0;
27 }
28
29 /* BAR */
30 .fm-bar {
31 position: fixed;
32 z-index: 10100;
33 }
34 .fm-bar.fm-side-space {
35 margin: 2px;
36 }
37
38 .fm-round.fm-side-space {
39 margin: 3px;
40 }
41 .fm-rounded.fm-side-space {
42 margin: 3px;
43 }
44
45 /* Button */
46 .fm-bar li {
47 list-style: none;
48 }
49 .fm-bar li:hover {
50 z-index: 1001 !important;
51 }
52
53 .fm-bar.fm-right li {
54 height: 42px;
55 }
56 .fm-bar.fm-button-space li:not(:last-child) {
57 margin-bottom: 2px;
58 }
59
60 .fm-round li {
61 border-radius: 21px;
62 }
63 .fm-round.fm-button-space li:not(:last-child) {
64 margin-bottom: 3px;
65 }
66
67 .fm-rounded li, .fm-rounded li img {
68 border-radius: 5px;
69 }
70
71 .fm-rounded.fm-button-space li:not(:last-child) {
72 margin-bottom: 3px;
73 }
74
75 .fm-rounded-out li, .fm-rounded-out img {
76 border-radius: 0 5px 5px 0;
77 }
78
79 .fm-space {
80 margin-top: 4px;
81 }
82 .fm-button-space .fm-space {
83 margin-top: 6px;
84 }
85 .fm-round.fm-button-space .fm-space {
86 margin-top: 7px;
87 }
88 .fm-rounded.fm-button-space .fm-space {
89 margin-top: 7px;
90 }
91
92 /* Mask */
93 .fm-mask {
94 position: relative;
95 overflow: hidden;
96 z-index: 12;
97 }
98 .fm-mask.fm-off {
99 overflow: visible;
100 }
101 .fm-right .fm-mask {
102 position: absolute;
103 right: 0;
104 height: 42px;
105 }
106
107 .fm-round .fm-mask {
108 border-radius: 21px;
109 }
110 .fm-rounded .fm-mask, .fm-rounded .fm-mask img {
111 border-radius: 5px;
112 }
113 .fm-rounded-out .fm-mask {}
114
115 /* Link */
116 .fm-bar a {
117 width: 42px;
118 display: block;
119 position: relative;
120 }
121 .fm-bar.fm-right a {
122 position: absolute;
123 right: 0;
124 }
125
126 .fm-round a {
127 border-radius: 21px;
128 }
129 .fm-rounded a {
130 border-radius: 5px;
131 }
132 .fm-rounded-out a {
133 border-radius: 0 5px 5px 0;
134 }
135 .fm-right.fm-rounded-out a {
136 border-radius: 5px 0 0 5px;
137 }
138
139 /* Icon */
140 .fm-icon {
141 /*height: 100%;*/
142 width: 42px;
143 height: 42px;
144 line-height:42px;
145 position: relative;
146 z-index: 11;
147 display:inline-block;
148 vertical-align:middle;
149 text-align:center;
150 background-repeat:no-repeat;
151 font-size: 24px;
152 }
153 .fm-right .fm-icon {
154 position: absolute;
155 right: 0;
156 }
157
158 .fm-round .fm-icon {
159 border-radius: 21px;
160 }
161 .fm-rounded .fm-icon {
162 border-radius: 5px;
163 }
164 .fm-rounded-out .fm-icon {
165 border-radius: 0 5px 5px 0;
166 }
167 .fm-right.fm-rounded-out .fm-icon {
168 border-radius: 5px 0 0 5px;
169 }
170
171 .fm-icon img {
172 position: absolute;
173 left: 0; right: 0;
174 top: 0; bottom: 0;
175 margin: auto;
176 }
177
178 .fm-icon .fa { line-height: 42px !important; }
179
180 /* Label */
181 .fm-label {
182 font-size: 15px;
183 line-height: 42px;
184 padding: 0 11px 0 8px;
185 position: absolute;
186 left: 42px;
187 top: 0;
188 z-index: 10;
189 display: none;
190 box-sizing: border-box;
191 white-space:nowrap;
192 }
193 .fm-right .fm-label {
194 padding: 0 8px 0 11px;
195 right: 42px;
196 left: auto;
197 }
198
199 .fm-label-space .fm-label {
200 margin-left: 2px;
201 }
202 .fm-right.fm-label-space .fm-label {
203 margin-right: 2px;
204 margin-left: 0;
205 }
206
207 .fm-round .fm-label {
208 border-radius: 21px;
209 padding: 0 12px;
210 }
211 .fm-rounded .fm-label {
212 border-radius: 5px;
213 padding: 0 11px;
214 }
215 .fm-rounded-out .fm-label {
216 border-radius: 5px;
217 padding: 0 11px;
218 }
219
220 .fm-connected .fm-label {
221 left: 0;
222 }
223 .fm-right.fm-connected .fm-label {
224 right: 0;
225 left: auto;
226 }
227
228
229
230 /* Hit */
231 .fm-hit {
232 height: 100%;
233 position: absolute;
234 left: 0; top: 0;
235 display: none;
236
237 height: 42px;
238 }
239
240 .fm-label-space .fm-hit {
241 width: 2px;
242 left: 42px;
243 }
244 .fm-right.fm-label-space .fm-hit {
245 right: 42px;
246 left: auto;
247 }
248
249 .fm-round .fm-hit {
250 width: 42px;
251 left: 21px;
252 }
253 .fm-right.fm-round .fm-hit {
254 right: 21px;
255 left: auto;
256 }
257 .fm-round.fm-label-space .fm-hit {
258 width: 44px;
259 }
260 .fm-right.fm-round.fm-label-space .fm-hit {}
261
262 .fm-rounded .fm-hit {
263 width: 10px;
264 left: 37px;
265 }
266 .fm-right.fm-rounded .fm-hit {
267 right: 37px;
268 left: auto;
269 }
270
271 .fm-rounded.fm-label-space .fm-hit {
272 width: 12px;
273 }
274 .fm-right.fm-rounded.fm-label-space .fm-hit {}
275
276 .fm-rounded-out .fm-hit {
277 width: 10px;
278 left: 37px;
279 }
280 .fm-right.fm-rounded-out .fm-hit {
281 right: 37px;
282 left: auto;
283 }
284 .fm-rounded-out.fm-label-space .fm-hit {
285 width: 12px;
286 }
287 .fm-right.fm-rounded-out.fm-label-space .fm-hit {}
288
289 /* SUB */
290 .fm-sub {
291 cursor: pointer;
292 }
293
294 .fm-sub > .fm-icon {
295 position: relative;
296 z-index: 1000;
297 }
298
299 /* List */
300 .fm-sub > ul {
301 width: 42px;
302 position: absolute;
303 left: 0;
304 top: 42px;
305 }
306
307 .fm-sub.fm-side > ul {
308 position: absolute;
309 left: 42px;
310 top: 0;
311 }
312 .fm-right .fm-sub.fm-side > ul {
313 right: 42px;
314 left: auto;
315 }
316
317 .fm-sub.fm-circular > ul {
318 position: absolute;
319 left: 0; top: 0;
320 width: auto;
321 }
322 .fm-right .fm-sub.fm-circular > ul {
323 right: 0;
324 left: auto;
325 }
326
327 .fm-sub.fm-sub-space > ul {
328 margin-top: 2px;
329 }
330 .fm-sub.fm-side.fm-sub-space > ul {
331 margin: 0 2px;
332 margin-top: 0;
333 }
334
335 .fm-round .fm-sub.fm-sub-space > ul,
336 .fm-rounded .fm-sub.fm-sub-space > ul {
337 margin-top: 3px;
338 }
339 .fm-round .fm-sub.fm-side.fm-sub-space > ul,
340 .fm-rounded .fm-sub.fm-side.fm-sub-space > ul {
341 margin: 0 3px;
342 margin-top: 0;
343 }
344
345 /* Button */
346 .fm-sub.fm-posabs > ul > li {
347 position: absolute;
348 }
349 .fm-right .fm-sub.fm-posabs > ul > li {
350 right: 0;
351 }
352
353 /* Sub hit */
354 .fm-subhit {
355 position: absolute;
356 display: none;
357 left: 0; top: 0;
358 }
359 .fm-right .fm-subhit {
360 right: 0;
361 left: auto;
362 }
363
364 /* COLORS */
365 /* Default */
366 .fm-facebook .fm-icon, .fm-facebook a:hover .fm-icon,
367 .fm-facebook .fm-label {
368 background-color: #3b5998;
369 }
370 .fm-twitter .fm-icon, .fm-twitter a:hover .fm-icon,
371 .fm-twitter .fm-label {
372 background-color: #55acee;
373 }
374 .fm-googleplus .fm-icon, .fm-googleplus a:hover .fm-icon,
375 .fm-googleplus .fm-label {
376 background-color: #dd4b39;
377 }
378 .fm-linkedin .fm-icon, .fm-linkedin a:hover .fm-icon,
379 .fm-linkedin .fm-label {
380 background-color: #0077b5;
381 }
382 .fm-dribbble .fm-icon, .fm-dribbble a:hover .fm-icon,
383 .fm-dribbble .fm-label {
384 background-color: #ea4c89;
385 }
386 .fm-pinterest .fm-icon, .fm-pinterest a:hover .fm-icon,
387 .fm-pinterest .fm-label {
388 background-color: #cc2127;
389 }
390 .fm-instagram .fm-icon, .fm-instagram a:hover .fm-icon,
391 .fm-instagram .fm-label {
392 background-color: #3f729b;
393 }
394 .fm-behance .fm-icon, .fm-behance a:hover .fm-icon,
395 .fm-behance .fm-label {
396 background-color: #1769ff;
397 }
398 .fm-flickr .fm-icon, .fm-flickr a:hover .fm-icon,
399 .fm-flickr .fm-label {
400 background-color: #ff0084;
401 }
402 .fm-twitch .fm-icon, .fm-twitch a:hover .fm-icon,
403 .fm-twitch .fm-label {
404 background-color: #6441a5;
405 }
406 .fm-vimeo .fm-icon, .fm-vimeo a:hover .fm-icon,
407 .fm-vimeo .fm-label {
408 background-color: #1ab7ea;
409 }
410 .fm-youtube .fm-icon, .fm-youtube a:hover .fm-icon,
411 .fm-youtube .fm-label {
412 background-color: #cd201f;
413 }
414 .fm-github .fm-icon, .fm-github a:hover .fm-icon,
415 .fm-github .fm-label {
416 background-color: #4078c0;
417 }
418 .fm-tumblr .fm-icon, .fm-tumblr a:hover .fm-icon,
419 .fm-tumblr .fm-label {
420 background-color: #35465c;
421 }
422
423 .fm-contact .fm-icon, .fm-contact a:hover .fm-icon,
424 .fm-contact .fm-label {
425 background-color: #e9401e;
426 }
427 .fm-newsletter .fm-icon, .fm-newsletter a:hover .fm-icon,
428 .fm-newsletter .fm-label {
429 background-color: #ffaa22;
430 }
431 .fm-rss .fm-icon, .fm-rss a:hover .fm-icon,
432 .fm-rss .fm-label {
433 background-color: #1d8edf;
434 }
435
436 .fm-social > .fm-icon, .fm-social:hover > .fm-icon {
437 background-color: #1d8edf;
438 }
439
440 /* Black */
441 .fm-black .fm-icon {
442 background-color: #2a2a2a;
443 }
444 .fm-black-over a:hover .fm-icon,
445 .fm-black-over .fm-label,
446 .fm-black-over .fm-social:hover > .fm-icon {
447 background-color: #2a2a2a;
448 }
449
450 /* Blue */
451 .fm-blue .fm-icon {
452 background-color: #4090FF;
453 }
454 .fm-blue-over a:hover .fm-icon,
455 .fm-blue-over .fm-label,
456 .fm-blue-over .fm-social:hover > .fm-icon {
457 background-color: #4090FF;
458 }
459
460 /* Red */
461 .fm-red .fm-icon {
462 background-color: #F23D3D;
463 }
464 .fm-red-over a:hover .fm-icon,
465 .fm-red-over .fm-label,
466 .fm-red-over .fm-social:hover > .fm-icon {
467 background-color: #F23D3D;
468 }
469
470 /* Yellow */
471 .fm-yellow .fm-icon {
472 background-color: #FFBD22;
473 }
474 .fm-yellow-over a:hover .fm-icon,
475 .fm-yellow-over .fm-label,
476 .fm-yellow-over .fm-social:hover > .fm-icon {
477 background-color: #FFBD22;
478 }
479
480 .fm-icon {
481 -webkit-transition: background-color 100ms linear;
482 -moz-transition: background-color 100ms linear;
483 -o-transition: background-color 100ms linear;
484 -ms-transition: background-color 100ms linear;
485 transition: background-color 100ms linear;
486 }
487
488 /* WINDOW */
489 .fm-window {
490 position: fixed;
491 left: 0;
492 top: 0;
493 width: 100%;
494 height: 100%;
495 z-index: 10101;
496 display: none;
497 }
498 .fm-shadow {
499 background-color: #2f2f2f;
500 opacity: 0.3;
501 width: 100%;
502 height: 100%;
503 }
504
505 /* Panel */
506 .fm-panel {
507 background-color: #f0f0f0;
508 padding: 1px;
509 width: 100%;
510 max-width: 500px;
511 min-width: 300px;
512 position: absolute;
513 display: none;
514 }
515 .fm-round .fm-panel {
516 border-radius: 5px;
517 }
518 .fm-winshadow .fm-panel {
519 box-shadow: 0 0 2px 1px rgba(47, 47, 47, 0.2);
520 }
521
522 /* Head */
523 .fm-head {
524 padding: 18px 17px;
525 }
526 .fm-round .fm-head {
527 border-radius: 5px 5px 0 0;
528 }
529
530 .fm-title {
531 color: #ffffff;
532 font-size: 22px;
533 display: inline;
534 }
535 .fm-close {
536 float: right;
537 cursor: pointer;
538 color: #fff;
539 font-size:20px;
540 position: relative;
541 top: -20px;
542 right: -10px;
543
544 }
545
546
547 #fm-popup .fm-head {
548 background-color: #33AAFF;
549 }
550
551 .fm-black .fm-head {
552 background-color: #2a2a2a !important;
553 }
554 .fm-blue .fm-head {
555 background-color: #4090FF !important;
556 }
557 .fm-red .fm-head {
558 background-color: #F23D3D !important;
559 }
560 .fm-yellow .fm-head {
561 background-color: #FFBD22 !important;
562 }
563
564 /* Body */
565 .fm-body {
566 font-size: 15px;
567 padding: 15px;
568 color: #707070;
569
570 /* Clearfix */
571 content: "";
572 display: table;
573 clear: both;
574 }
575
576 .fm-body p {
577 margin: 0;
578 line-height: 18px;
579 font-style: italic;
580 }
581
582 /* Form */
583 .fm-body form {
584 margin-top: 13px;
585 /*margin-bottom: 3px;*/
586 padding: 0 15px;
587 }
588 .fm-body label {
589 font-size: 14px;
590 font-weight: bold;
591 color: #808080;
592 margin-top: 5px;
593 margin-bottom: 5px;
594 display: block;
595 }
596 .fm-body input[type=text], .fm-body textarea {
597 font-size: 15px;
598 color: #505050;
599 padding: 7px;
600 background-color: #fafafa;
601 border: 1px solid #c0c0c0;
602 border-radius: 5px;
603 width: 100%;
604 max-width: 340px;
605 box-sizing: border-box;
606 }
607 .fm-body input[type=text]:hover, .fm-body textarea:hover {
608 border-color: #1d8edf;
609 }
610 .fm-body textarea {
611 height: 80px;
612 }
613
614 .fm-fielderror {
615 border-color: red !important;
616 }
617
618 .fm-submit {
619 padding: 5px 10px;
620 border: 1px solid #a0a0a0;
621 cursor: pointer;
622 border-radius: 5px;
623 display: inline-block;
624 background-color: #fafafa;
625 margin-top: 7px;
626 }
627 .fm-submit:hover {
628 background-color: #1d8edf;
629 border-color: #2C6D9B;
630 color: #ffffff;
631 }
632 .fm-submit:active {
633 background-color: #5CA8DE;
634 }
635
636 /* Status */
637 .fm-status {
638 margin-top: 10px;
639 display: none;
640 }
641 .fm-status.fm-showstatus {
642 display: block;
643 }
644
645 .fm-sicon {
646 width: 18px;
647 height: 18px;
648 background-repeat: no-repeat;
649 background-position: center;
650 margin-left: 1px;
651 margin-right: 5px;
652 float: left;
653 }
654
655
656 .fm-message {
657 line-height: 18px;
658 float: left;
659 }
660 .fm-working .fm-message {
661 line-height: 24px;
662 }
663 .fm-message > span {
664 display: none;
665 }
666 .fm-formerror .fm-message > span:nth-child(1) {
667 display: block;
668 }
669 .fm-working .fm-message > span:nth-child(2) {
670 display: block;
671 }
672 .fm-success .fm-message > span:nth-child(3) {
673 display: block;
674 }
675 .fm-error .fm-message > span:nth-child(4) {
676 display: block;
677 }
678
679 /* Contact */
680 #sidebar-contact.fm-panel {
681 max-width: 420px;
682 }
683
684 /* Newsletter */
685 #sidebar-newsletter.fm-panel {
686 max-width: 570px;
687 }
688 #sidebar-newsletter .fm-body {
689 padding-bottom: 17px;
690 }
691 #sidebar-newsletter form {
692 margin-top: 15px;
693 padding: 0 35px 0 25px;
694 text-align: center;
695 }
696
697 .fm-group {
698 display: table;
699 width: 100%;
700 border-collapse: collapse;
701 }
702 .fm-group > div {
703 display: table-cell;
704 }
705 .fm-group > div:nth-child(1) {
706 width: 1%;
707 white-space: nowrap;
708 }
709 .fm-group > div:nth-child(2) {}
710 .fm-group > div:nth-child(3) {
711 width: 1%;
712 white-space: nowrap;
713 }
714
715 .fm-group label {
716 font-size: 14px;
717 line-height: 23px;
718 margin-right: 5px;
719 }
720 .fm-group input[type="text"] {
721 max-width: none;
722 }
723 .fm-group .fm-submit {
724 margin-top: 0;
725 padding: 7px 15px;
726 margin-left: 5px;
727 }
728
729 #sidebar-newsletter .fm-status {
730 clear: left;
731 margin-bottom: -8px;
732 }
733 #sidebar-newsletter .fm-status.fm-showstatus {
734 display: inline-block;
735 }
736
737 /* RSS */
738 #fm-popup.fm-panel {
739 max-width: 470px;
740 }
741 #fm-popup .fm-body {
742 padding-bottom: 17px;
743 }
744
745 .fm-rsslinks {
746 padding-top: 14px;
747 padding-left: 12px;
748 }
749 .fm-rsslinks ul {
750 width: 33%;
751 margin-top: 12px;
752 float: left;
753 }
754 .fm-rsslinks li {
755 font-size: 14px;
756 }
757 .fm-rsslinks li:not(:last-child) {
758 margin-bottom: 12px;
759 }
760 .fm-rsslinks a {
761 color: #1d8edf;
762 font-size: 16px;
763 }
764 .fm-rsslinks a:hover {
765 text-decoration: underline;
766 }
767
768 /* GLOBAL */
769 .fm-show {
770 display: block !important;
771 }
772 .fm-hide {
773 display: none !important;
774 }
775
776 .fm-clearfix:after {
777 content: "";
778 display: table;
779 clear: both;
780 }
781 .fm-hold-open {
782 display: block !important;
783 }
784
785 input.fm-input {
786 width: 150px;
787 border: none !important;
788 padding-left: 5px;
789 padding-right: 5px;
790 }
791
792 .fm-icon-text {
793 padding: 0 10px;
794 width: max-content !important;
795 }