PluginProbe
Float menu – awesome floating side menu / 3.5.2
Float menu – awesome floating side menu v3.5.2
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 / assets / css / style.css

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

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