PluginProbe
Float menu – awesome floating side menu / 2.1
Float menu – awesome floating side menu v2.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 / css / style.css

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

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