PluginProbe
Float menu – awesome floating side menu / 6.1.2
Float menu – awesome floating side menu v6.1.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 / public / assets / css / style.css

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

598 lines 11.9 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /*!
2 * ========= INFORMATION ============================
3 * - document: Float Menu Pro
4 * - brand: Wow-Company
5 * - brand-url: https://wow-company.com/
6 * - store-url: https://wow-estore.com/
7 * - author: Dmytro Lobov
8 * - url: https://wow-estore.com/item/float-menu-pro/
9 * ====================================================== */
10 .floating-menu {
11 --fm-icon-size: 24px;
12 --fm-label-size: 15px;
13 --fm-label-font: inherit;
14 --fm-label-font-style: normal;
15 --fm-label-weight: normal;
16 --fm-border-radius: 50%;
17 --fm-color: #E86E2C;
18 --fm-hover-color: #E86E2C;
19 --fm-background: #1b094f;
20 --fm-hover-background: #1b094f;
21 --fm-z-index: 9999;
22 --fm-text-font: inherit;
23 --fm-text-size: 16px;
24 --fm-text-weight: normal;
25 visibility: hidden;
26 z-index: var(--fm-z-index);
27 /* Resets */
28 }
29 .floating-menu.fm-ready {
30 visibility: visible;
31 }
32 .floating-menu a {
33 cursor: pointer;
34 text-decoration: none;
35 }
36 .floating-menu ul {
37 list-style-type: none;
38 margin: 0;
39 padding: 0;
40 }
41 @media print {
42 .floating-menu {
43 display: none;
44 }
45 }
46
47 /* BAR */
48 .fm-bar {
49 position: fixed;
50 z-index: 10100;
51 }
52 .fm-bar li {
53 list-style: none;
54 }
55 .fm-bar li > .fm-icon,
56 .fm-bar li > .fm-mask a .fm-icon,
57 .fm-bar li > .fm-mask .fm-link .fm-icon,
58 .fm-bar li > .fm-mask a .fm-label,
59 .fm-bar li > .fm-mask .fm-link .fm-label,
60 .fm-bar li > a .fm-icon,
61 .fm-bar li > .fm-link .fm-icon,
62 .fm-bar li > a .fm-icon,
63 .fm-bar li > .fm-link .fm-icon,
64 .fm-bar li > a .fm-label,
65 .fm-bar li > .fm-link .fm-label {
66 color: var(--fm-color);
67 background-color: var(--fm-background);
68 }
69 .fm-bar li > .fm-icon [class*=fa-],
70 .fm-bar li > .fm-mask a .fm-icon [class*=fa-],
71 .fm-bar li > .fm-mask .fm-link .fm-icon [class*=fa-],
72 .fm-bar li > .fm-mask a .fm-label [class*=fa-],
73 .fm-bar li > .fm-mask .fm-link .fm-label [class*=fa-],
74 .fm-bar li > a .fm-icon [class*=fa-],
75 .fm-bar li > .fm-link .fm-icon [class*=fa-],
76 .fm-bar li > a .fm-icon [class*=fa-],
77 .fm-bar li > .fm-link .fm-icon [class*=fa-],
78 .fm-bar li > a .fm-label [class*=fa-],
79 .fm-bar li > .fm-link .fm-label [class*=fa-] {
80 color: var(--fm-color);
81 background-color: var(--fm-background);
82 }
83 .fm-bar li .fm-link {
84 cursor: pointer;
85 }
86 .fm-bar li:hover {
87 z-index: 1001 !important;
88 }
89 .fm-bar li:hover > .fm-icon,
90 .fm-bar li:hover > .fm-mask a .fm-icon,
91 .fm-bar li:hover > .fm-mask a .fm-label,
92 .fm-bar li:hover > a .fm-icon,
93 .fm-bar li:hover > a .fm-label,
94 .fm-bar li:hover > .fm-mask .fm-link .fm-icon,
95 .fm-bar li:hover > .fm-mask .fm-link .fm-label,
96 .fm-bar li:hover > .fm-link .fm-icon,
97 .fm-bar li:hover > .fm-link .fm-label {
98 color: var(--fm-hover-color);
99 background-color: var(--fm-hover-background);
100 z-index: 12;
101 }
102 .fm-bar li:hover > .fm-icon [class*=fa-],
103 .fm-bar li:hover > .fm-mask a .fm-icon [class*=fa-],
104 .fm-bar li:hover > .fm-mask a .fm-label [class*=fa-],
105 .fm-bar li:hover > a .fm-icon [class*=fa-],
106 .fm-bar li:hover > a .fm-label [class*=fa-],
107 .fm-bar li:hover > .fm-mask .fm-link .fm-icon [class*=fa-],
108 .fm-bar li:hover > .fm-mask .fm-link .fm-label [class*=fa-],
109 .fm-bar li:hover > .fm-link .fm-icon [class*=fa-],
110 .fm-bar li:hover > .fm-link .fm-label [class*=fa-] {
111 color: var(--fm-hover-color);
112 background-color: var(--fm-hover-background);
113 }
114 .fm-bar li:hover > .fm-icon,
115 .fm-bar li:hover > a .fm-icon,
116 .fm-bar li:hover > .fm-mask a .fm-icon,
117 .fm-bar li:hover > .fm-link .fm-icon,
118 .fm-bar li:hover > .fm-mask .fm-link .fm-icon {
119 z-index: 13 !important;
120 }
121 .fm-bar .fm-link,
122 .fm-bar a {
123 width: calc(var(--fm-icon-size) * 2);
124 display: block;
125 position: relative;
126 text-decoration: none;
127 }
128 .fm-bar.fm-right a, .fm-bar.fm-right .fm-link {
129 position: absolute;
130 right: 0;
131 }
132 .fm-bar.fm-button-space li:not(:last-child) {
133 margin-bottom: 2px;
134 }
135 .fm-bar.fm-right li {
136 height: calc(var(--fm-icon-size) * 2);
137 }
138 .fm-bar.fm-side-space {
139 margin: 2px;
140 }
141
142 .fm-round.fm-side-space {
143 margin-left: 3px;
144 }
145 .fm-round li {
146 border-radius: calc((var(--fm-icon-size) * 2) / 2);
147 }
148 .fm-round.fm-button-space li:not(:last-child) {
149 margin-bottom: 3px;
150 }
151 .fm-round.fm-button-space .fm-space {
152 margin-top: 7px;
153 }
154 .fm-round .fm-mask,
155 .fm-round .fm-link,
156 .fm-round a,
157 .fm-round .fm-icon {
158 border-radius: calc((var(--fm-icon-size) * 2) / 2);
159 }
160 .fm-round .fm-label {
161 border-radius: calc((var(--fm-icon-size) * 2) / 2);
162 padding: 0 12px;
163 }
164 .fm-round .fm-hit {
165 width: calc(var(--fm-icon-size) * 2);
166 left: calc(var(--fm-icon-size) * 2);
167 }
168 .fm-round.fm-label-space .fm-hit {
169 width: calc(var(--fm-icon-size) * 2 - 4px);
170 }
171 .fm-round .fm-sub.fm-sub-space > ul {
172 margin-top: 3px;
173 }
174 .fm-round .fm-sub.fm-side.fm-sub-space > ul {
175 margin: 0 3px;
176 }
177 .fm-round .fm-panel {
178 border-radius: 5px;
179 }
180 .fm-round .fm-head {
181 border-radius: 5px 5px 0 0;
182 }
183
184 .fm-connected .fm-label {
185 right: auto;
186 left: 0;
187 }
188
189 .fm-rounded.fm-side-space {
190 margin-left: 3px;
191 }
192 .fm-rounded li,
193 .fm-rounded li img {
194 border-radius: 5px;
195 }
196 .fm-rounded.fm-button-space li:not(:last-child) {
197 margin-bottom: 3px;
198 }
199 .fm-rounded.fm-button-space .fm-space {
200 margin-top: 7px;
201 }
202 .fm-rounded .fm-mask {
203 border-radius: 5px;
204 }
205 .fm-rounded .fm-mask img {
206 border-radius: 5px;
207 }
208 .fm-rounded .fm-link,
209 .fm-rounded a,
210 .fm-rounded .fm-icon,
211 .fm-rounded .fm-label {
212 border-radius: 5px;
213 }
214 .fm-rounded .fm-label {
215 padding: 0 11px;
216 }
217 .fm-rounded .fm-hit {
218 width: 10px;
219 left: calc(var(--fm-icon-size) * 2 - 5px);
220 }
221 .fm-rounded.fm-label-space .fm-hit {
222 width: 12px;
223 }
224 .fm-rounded .fm-sub.fm-sub-space > ul {
225 margin-top: 3px;
226 }
227 .fm-rounded .fm-rounded .fm-sub.fm-side.fm-sub-space > ul {
228 margin: 0 3px;
229 }
230
231 .fm-rounded-out li, .fm-rounded-out img, .fm-rounded-out a, .fm-rounded-out .fm-link, .fm-rounded-out .fm-icon, .fm-rounded-out .fm-label {
232 border-radius: 0 5px 5px 0;
233 }
234 .fm-rounded-out .fm-label {
235 padding: 0 11px;
236 left: calc(var(--fm-icon-size) * 2 - 5px);
237 }
238 .fm-rounded-out .fm-hit {
239 width: 10px;
240 left: calc(var(--fm-icon-size) * 2 - 5px);
241 }
242 .fm-rounded-out.fm-label-space .fm-hit {
243 width: 12px;
244 }
245 .fm-rounded-out.fm-connected .fm-label {
246 left: 0;
247 }
248
249 .fm-right .fm-mask {
250 position: absolute;
251 right: 0;
252 height: calc(var(--fm-icon-size) * 2);
253 }
254 .fm-right .fm-icon {
255 position: absolute;
256 right: 0;
257 }
258 .fm-right.fm-rounded-out a, .fm-right.fm-rounded-out .fm-link, .fm-right.fm-rounded-out .fm-icon {
259 border-radius: 5px 0 0 5px;
260 }
261 .fm-right .fm-label {
262 padding: 0 8px 0 11px;
263 right: calc(var(--fm-icon-size) * 2);
264 left: auto;
265 }
266 .fm-right.fm-label-space .fm-label {
267 margin-right: 2px;
268 margin-left: 0;
269 }
270 .fm-right.fm-connected .fm-label {
271 right: 0;
272 left: auto;
273 padding-left: var(--fm-icon-size) !important;
274 }
275 .fm-right.fm-label-space .fm-hit {
276 right: calc(var(--fm-icon-size) * 2);
277 left: auto;
278 }
279 .fm-right.fm-round .fm-hit {
280 right: calc(var(--fm-icon-size) * 2);
281 left: auto;
282 }
283 .fm-right.fm-rounded .fm-hit {
284 right: calc(var(--fm-icon-size) * 2 - 5px);
285 left: auto;
286 }
287 .fm-right.fm-rounded-out .fm-hit {
288 right: calc(var(--fm-icon-size) * 2 - 5px);
289 left: auto;
290 }
291 .fm-right.fm-rounded-out .fm-label {
292 border-radius: 5px 0 0 5px;
293 right: calc(var(--fm-icon-size) * 2 - 5px);
294 }
295 .fm-right .fm-sub.fm-side > ul {
296 right: calc(var(--fm-icon-size) * 2);
297 left: auto;
298 }
299 .fm-right .fm-sub.fm-circular > ul {
300 right: 0;
301 left: auto;
302 }
303 .fm-right .fm-subhit {
304 right: 0;
305 left: auto;
306 }
307
308 .fm-space {
309 margin-top: 4px;
310 }
311
312 .fm-button-space .fm-space {
313 margin-top: 6px;
314 }
315
316 .fm-mask {
317 position: relative;
318 overflow: hidden;
319 }
320 .fm-mask.fm-off {
321 overflow: visible;
322 }
323
324 .fm-icon {
325 min-width: calc(var(--fm-icon-size) * 2);
326 height: calc(var(--fm-icon-size) * 2);
327 line-height: calc(var(--fm-icon-size) * 2);
328 position: relative;
329 z-index: 11;
330 display: inline-block;
331 vertical-align: middle;
332 text-align: center;
333 background-repeat: no-repeat;
334 font-size: var(--fm-icon-size);
335 transition: background-color 100ms linear;
336 }
337 .fm-icon > img {
338 position: absolute;
339 left: 0;
340 right: 0;
341 top: 0;
342 bottom: 0;
343 margin: auto;
344 }
345 .fm-icon .fa {
346 line-height: calc(var(--fm-icon-size) * 2) !important;
347 }
348
349 .fm-label {
350 font-family: var(--fm-label-font);
351 font-style: var(--fm-label-font-style);
352 font-weight: var(--fm-label-weight);
353 font-size: var(--fm-label-size);
354 min-height: calc(var(--fm-icon-size) * 2);
355 line-height: calc(var(--fm-icon-size) * 2);
356 padding: 0 11px 0 8px;
357 position: absolute;
358 top: 0;
359 z-index: 10;
360 display: none;
361 box-sizing: border-box;
362 white-space: nowrap;
363 width: max-content;
364 }
365 .fm-label .fm-extra-text {
366 width: max-content;
367 font-family: var(--fm-text-font);
368 font-size: var(--fm-text-size);
369 font-weight: var(--fm-text-weight);
370 font-style: normal;
371 line-height: 1.2;
372 padding-bottom: 12px;
373 cursor: default;
374 }
375 .fm-label .fm-extra-text a {
376 position: relative;
377 width: auto;
378 display: inline;
379 text-decoration: underline;
380 }
381 .fm-label .fm-extra-text li {
382 height: auto;
383 margin-bottom: 0;
384 }
385
386 .fm-label-space .fm-label {
387 margin-left: 2px;
388 }
389
390 .fm-label-space.fm-label {
391 margin-left: 2px;
392 }
393 .fm-label-space .fm-hit {
394 width: 2px;
395 left: calc(var(--fm-icon-size) * 2);
396 }
397
398 .fm-hit {
399 height: 100%;
400 position: absolute;
401 left: 0;
402 top: 0;
403 display: none;
404 }
405
406 .fm-label-space .fm-hit {
407 width: 2px;
408 left: calc(var(--fm-icon-size) * 2);
409 }
410
411 /* SUB */
412 .fm-sub {
413 cursor: pointer;
414 }
415 .fm-sub > .fm-icon {
416 position: relative;
417 z-index: 1000;
418 }
419 .fm-sub > ul {
420 width: calc(var(--fm-icon-size) * 2);
421 position: absolute;
422 left: 0;
423 top: calc(var(--fm-icon-size) * 2);
424 }
425 .fm-sub.fm-side > ul {
426 position: absolute;
427 left: calc(var(--fm-icon-size) * 2);
428 top: 0;
429 }
430 .fm-sub.fm-circular > ul {
431 position: absolute;
432 left: 0;
433 top: 0;
434 width: auto;
435 }
436 .fm-sub.fm-sub-space > ul {
437 margin-top: 2px;
438 }
439 .fm-sub.fm-side.fm-sub-space > ul {
440 margin: 0 2px;
441 }
442 .fm-sub.fm-posabs > ul > li {
443 position: absolute;
444 }
445
446 /* Sub hit */
447 .fm-subhit {
448 position: absolute;
449 display: none;
450 left: 0;
451 top: 0;
452 }
453
454 /* WINDOW */
455 .fm-window {
456 position: fixed;
457 left: 0;
458 top: 0;
459 width: 100%;
460 height: 100%;
461 z-index: 10101;
462 display: none;
463 }
464
465 .fm-shadow {
466 background-color: #2f2f2f;
467 opacity: 0.3;
468 width: 100%;
469 height: 100%;
470 }
471
472 /* Panel */
473 .fm-panel {
474 background-color: #f0f0f0;
475 padding: 1px;
476 width: 100%;
477 max-width: 500px;
478 min-width: 300px;
479 position: absolute;
480 display: none;
481 }
482 .fm-panel.fm-show {
483 display: block;
484 }
485
486 .fm-winshadow .fm-panel {
487 box-shadow: 0 0 2px 1px rgba(47, 47, 47, 0.2);
488 }
489
490 /* Head */
491 .fm-head {
492 padding: 18px 17px;
493 }
494
495 .fm-title {
496 color: #ffffff;
497 font-size: 22px;
498 display: inline;
499 }
500
501 .fm-close {
502 float: right;
503 cursor: pointer;
504 color: #fff;
505 font-size: 20px;
506 position: relative;
507 top: -20px;
508 right: -10px;
509 }
510
511 #fm-popup .fm-head {
512 background-color: #33AAFF;
513 }
514
515 .fm-black .fm-head {
516 background-color: #2a2a2a !important;
517 }
518
519 .fm-blue .fm-head {
520 background-color: #4090FF !important;
521 }
522
523 .fm-red .fm-head {
524 background-color: #F23D3D !important;
525 }
526
527 .fm-yellow .fm-head {
528 background-color: #FFBD22 !important;
529 }
530
531 /* Body */
532 .fm-body {
533 font-size: 15px;
534 padding: 15px;
535 color: #707070;
536 content: "";
537 display: table;
538 clear: both;
539 }
540 .fm-body p {
541 margin: 0;
542 line-height: 1.125;
543 }
544 .fm-body p + p {
545 margin-top: 12px;
546 }
547
548 /* GLOBAL */
549 .fm-show {
550 display: block !important;
551 }
552
553 .fm-hide {
554 display: none !important;
555 }
556
557 .fm-clearfix:after {
558 content: "";
559 display: table;
560 clear: both;
561 }
562
563 .fm-hold-open {
564 display: block !important;
565 opacity: 1 !important;
566 left: calc(var(--fm-icon-size) * 2) !important;
567 }
568
569 .fm-connected .fm-hold-open {
570 left: 0 !important;
571 }
572
573 .fm-icon-text {
574 padding: 0 10px;
575 width: max-content !important;
576 }
577 .fm-icon-text span img {
578 margin: 0 !important;
579 vertical-align: middle;
580 }
581
582 .fm-search .fm-input {
583 box-sizing: border-box;
584 max-height: calc(var(--fm-icon-size) * 2);
585 }
586 .fm-search .fm-input::-webkit-search-decoration, .fm-search .fm-input::-webkit-search-cancel-button, .fm-search .fm-input::-webkit-search-results-button, .fm-search .fm-input::-webkit-search-results-decoration {
587 display: none;
588 }
589
590 .has-wow-floating-menu:has(.skiptranslate) {
591 top: 0 !important;
592 }
593 .has-wow-floating-menu .skiptranslate {
594 display: none !important;
595 }
596
597 /*# sourceMappingURL=style.css.map */
598