PluginProbe
Bubble Menu – Floating Button Menu with Sticky Navigation / 2.2
Bubble Menu – Floating Button Menu with Sticky Navigation v2.2
trunk 1.3 2.0 2.2 2.2.1 3.0 3.0.1 3.0.2 3.0.3 3.0.4 3.0.5 3.1 3.1.1 4.0 4.0.1 4.0.2 4.0.3 4.0.4 4.0.5 4.0.6 4.0.7 4.1 4.1.1
bubble-menu / assets / css / admin-style.css

admin-style.css in Bubble Menu – Floating Button Menu with Sticky Navigation 2.2, at assets/css/admin-style.css

747 lines 12.1 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* ========= INFORMATION ============================
2 - document: Wow-Plugin admin style!
3 - author: Dmytro Lobov
4 - copyright: 2019 Wow-Company
5 - version: 1.0
6 - email: d@dayes.dev
7 ==================================================== */
8
9 /* Main page */
10
11 .nav-tab-wrapper {
12 margin-bottom: 20px;
13 }
14
15 .wrap .nav-tab-wrapper .page-title-action {
16 top: 4px;
17 margin-left: 5px;
18 }
19
20 /* Tab style */
21 .wow-plugin .tab-box {
22 width: 100%;
23 box-sizing: border-box;
24 }
25
26 .wow-plugin .tab-box:after {
27 clear: both;
28 content: "";
29 display: block;
30 }
31
32 .wow-plugin .tab-nav {
33 margin: 0;
34 padding: 0;
35 list-style: none;
36 width: 145px;
37 float: left;
38 border-right: 1px solid #1f9ef8;
39 }
40
41 .wow-plugin .tab-nav li {
42 float: left;
43 margin-bottom: 1px;
44 }
45
46 .wow-plugin .tab-nav li a {
47 display: inline-block;
48 width: 125px;
49 padding: 10px 10px;
50 font-size: 14px;
51 color: #000;
52 text-decoration: none;
53 }
54
55 .wow-plugin .tab-nav li a:hover {
56 color: #000;
57 text-decoration: none;
58 font-weight: 700;
59 }
60
61 .wow-plugin .tab-nav li.select a {
62 background: #fff;
63 box-shadow: none;
64 border-bottom: 1px solid #1f9ef8;
65 font-weight: 700;
66 }
67
68 .wow-plugin .tab-nav .active {
69 display: inline-block;
70 padding: 5px;
71 }
72
73 .wow-plugin .tab-box > div {
74 margin: 0 0 0 145px;
75 padding: 10px;
76 border-left: 1px solid #1f9ef8;
77 }
78
79 .wow-plugin .tab-panels {
80 background: #fff;
81 }
82
83 /* Flexbox elements */
84 .wow-plugin .container {
85 display: flex;
86 justify-content: space-around;
87 }
88
89 .wow-plugin .element {
90 width: 100%;
91 padding: 10px;
92 }
93
94 .wow-plugin label {
95 font-weight: 600;
96 cursor: default;
97 }
98
99 .wow-plugin label[for] {
100 cursor: pointer;
101 }
102
103 /* form elements style */
104 .element input[type=text], .element input[type=tel], .element input[type=number], .element input[type=date], .element select, .element textarea {
105 width: 100%;
106 -moz-box-sizing: border-box;
107 box-sizing: border-box;
108 display: inline-block;
109 }
110
111 .wow-plugin fieldset {
112 border: 1px solid #999999;
113 margin: 15px 0;
114 position: relative;
115 min-height: 50px;
116 background: #ffffff;
117 }
118
119 .wow-plugin .control {
120 position: absolute;
121 right: 0;
122 }
123
124 .wow-plugin .dashicons-move {
125 cursor: move;
126 color: #cccccc;
127 }
128
129 .wow-plugin .dashicons-minus {
130 cursor: pointer;
131 color: #128be0;
132 }
133
134 .wow-plugin .dashicons-plus {
135 cursor: pointer;
136 color: #128be0;
137 display: none;
138 }
139
140 .wow-plugin .dashicons-no-alt {
141 cursor: pointer;
142 color: #e95645;
143 }
144
145
146 .wow-plugin legend {
147 font-size: 18px;
148 font-weight: bold;
149 padding: 0 25px 0 10px;
150 }
151
152 /* Tooltip container */
153 .wow-help {
154 font-size: 14px;
155 cursor: help;
156 }
157
158 .wow-ui-tooltip {
159 position: absolute;
160 background: #333;
161 border-width: 1px !important;
162 border-radius: 3px !important;
163 box-shadow: 1px 1px 2px 1px rgba(214, 214, 214, .5) !important;
164 color: #dedede !important;
165 max-width: 300px !important;
166 padding: 7px !important;
167 text-rendering: optimizeLegibility;
168 text-shadow: none !important;
169 z-index: 100051 !important;
170 }
171
172 a.wow-help.dashicons-unlock {
173 color: #37c781;
174 cursor: pointer;
175 }
176
177 a.wow-help.dashicons-lock {
178 color: #e95645;
179 cursor: pointer;
180 }
181
182 /* Right Sidebar */
183 .wow-sidebar h2 {
184 border-bottom: 1px solid #eee;
185 }
186
187 .wow-sidebar .element {
188 padding: 0;
189 }
190
191 .wow-sidebar .element h4 {
192 font-size: 14px;
193 margin: 0 0 10px 0;
194 }
195
196 .wow-facebook::after {
197 font-family: "dashicons";
198 content: "\f305";
199 margin-left: 5px;
200 }
201
202 .wow-email::after {
203 font-family: 'dashicons';
204 content: "\f469";
205 margin-left: 5px;
206 }
207
208 .wow-plugin .submit-bottom {
209 margin: 45px 0 0;
210 display: block;
211 text-align: center;
212 }
213
214 .wow-plugin .add-item {
215 width: 128px;
216 height: 32px;
217 background: #1f9ef8;
218 line-height: 32px;
219 text-align: center;
220 color: #fff;
221 text-decoration: none;
222 font-size: 14px;
223 border: 0;
224 cursor: pointer;
225 margin: 0;
226 padding: 0;
227 transition-timing-function: ease-in-out;
228 transition-duration: .05s;
229 transition-property: all;
230 }
231
232 .wow-plugin .add-item:hover, .wow-plugin .add-item:active {
233 background: #128be0;
234 }
235
236 .wow-plugin .delete-item {
237 width: 128px;
238 height: 32px;
239 background: #797979;
240 line-height: 32px;
241 text-align: center;
242 color: #fff;
243 text-decoration: none;
244 font-size: 14px;
245 border: 0;
246 cursor: pointer;
247 margin: 0;
248 padding: 0;
249 transition-timing-function: ease-in-out;
250 transition-duration: .05s;
251 transition-property: all;
252 margin-left: 2px;
253 }
254
255 .wow-plugin .delete-item:hover, .wow-plugin .delete-item:active {
256 background: #656565;
257 }
258
259 .wow-plugin .saving {
260 color: #1f9ef8;
261 margin-right: 15px;
262 opacity: 0;
263
264 }
265
266 .wow-plugin .saving:before {
267 content: "\f316";
268 font-family: 'Dashicons';
269 margin-right: 5px;
270 }
271
272
273 @media only screen and (max-width: 991px) {
274 .wow-plugin .container {
275 flex-wrap: wrap;
276 }
277 }
278
279 /*
280 License page
281 */
282
283 .feature-section.one-col p {
284 font-size: 16px;
285 }
286
287 .feature-section pre {
288 box-sizing: border-box;
289 width: 100%;
290 margin: 0;
291 overflow: auto;
292 overflow-y: hidden;
293 font-size: 12px;
294 line-height: 20px;
295 background: #fff !important;
296 border: 1px solid #777;
297 padding: 10px;
298 color: #333;
299 }
300
301 .form-table tr {
302 background: #fff;
303 border: 1px solid #ccc;
304 width: 350px;
305 padding: 14px;
306 min-height: 220px;
307 position: relative;
308 box-sizing: border-box;
309 display: block;
310 margin: 0 auto;
311 }
312
313 .form-table th {
314 background: #f9f9f9;
315 padding: 14px;
316 border-bottom: 1px solid #ccc;
317 margin: -14px -14px 20px;
318 width: 100%;
319 display: block;
320 }
321
322 .form-table td {
323 display: block;
324 }
325
326 .form-table td input.regular-text {
327 margin: 0 0 8px;
328 width: 100%;
329 }
330
331 .form-table td div {
332 margin-top: 14px;
333 border-top: 1px solid #eee;
334 width: 100%;
335 }
336
337 .form-table p.submit {
338 margin-top: 25px;
339 padding: 0;
340 text-align: right;
341 }
342
343 /*
344 Items
345 */
346
347 .height_screen {
348 height: 270px;
349 background: #fff;
350 }
351
352 .height_screen img {
353 max-width: 100%;
354 }
355
356 .height_screen span {
357 padding: 10px;
358 font-size: 16px;
359 font-weight: 500;
360 display: block;
361 }
362
363 .height_screen a {
364 color: #000;
365 text-decoration: none;
366 }
367
368 .themes {
369 overflow: hidden;
370 }
371
372 .theme-actions {
373 background: rgba(244, 244, 244, 1) !important;
374 }
375
376 .theme-name {
377 text-align: left !important;
378 }
379
380 .install {
381 float: right;
382 }
383
384 /*
385 Support Page
386 */
387
388 .wow-support {
389 margin: 25px auto 0;
390 padding: 15px;
391 background: #FFFFFF;
392 border: 1px solid #999999;
393
394
395 }
396
397 .feature-section.one-col p {
398 font-size: 16px;
399 }
400
401 .wow-alert-error {
402 color: #a94442;
403 background-color: #f2dede;
404 border-color: #ebccd1;
405 }
406
407 .wow-alert-update {
408 color: #94a540;
409 background-color: #e7f7e3;
410 border-color: #c7e5dc;
411 }
412
413 .wow-alert {
414 -webkit-border-radius: 2px;
415 -moz-border-radius: 2px;
416 border-radius: 2px;
417 margin-bottom: 20px;
418 padding: 10px;
419 border: 1px solid transparent;
420 vertical-align: middle;
421 }
422
423 p.wow_error {
424 margin: 0 !important;
425 }
426
427 /* Pro page */
428
429 .feature-section.one-col p {
430 font-size: 16px;
431 }
432
433 .faq-title {
434 cursor: pointer;
435 }
436
437 .faq-title:before {
438 content: "\f132";
439 font-family: Dashicons;
440 vertical-align: bottom;
441 margin-right: 8px;
442 color: #e95645;
443 }
444
445 .toggleshow:before {
446 content: "\f132";
447 font-family: Dashicons;
448 color: #e95645
449 }
450
451 .togglehide:before {
452 content: "\f460";
453 font-family: Dashicons;
454 }
455
456 .item-title {
457 margin: 1.25em 0 .6em;
458 font-size: 1em;
459 line-height: 1;
460 color: #1e73be;
461 }
462
463 .items .inside {
464 margin: 10px 10px 10px 20px;
465 display: none;
466 }
467
468 .feature-section ul {
469 margin-left: 10px;
470 }
471
472 .feature-section ul li:before {
473 content: "\f147";
474 font-family: Dashicons;
475 margin-right: 5px;
476 color: #e95645
477 }
478
479 .wow-btn {
480 width: 380px;
481 display: inline-block;
482 height: 42px;
483 background: #43cb83;
484 border-radius: 3px;
485 line-height: 42px;
486 text-align: center;
487 color: #fff !important;
488 text-decoration: none;
489 font-size: 18px;
490 font-weight: 500;
491 cursor: pointer;
492 border: none;
493 }
494
495 .wow-btn:hover {
496 background: #5cc38d;
497 }
498
499 .wow-btn-demo {
500 width: 380px;
501 display: inline-block;
502 height: 42px;
503 background: #1f9ef8;
504 border-radius: 3px;
505 line-height: 42px;
506 text-align: center;
507 color: #fff !important;
508 text-decoration: none;
509 font-size: 18px;
510 font-weight: 500;
511 cursor: pointer;
512 border: none;
513 }
514
515 .wow-btn-demo:hover {
516 background: #128be0;
517 }
518
519 .wow-btn .dashicons,
520 .wow-btn-demo .dashicons {
521 line-height: 42px;
522 font-size: 24px;
523 }
524
525 /**
526 Plugin custom style
527 */
528
529
530 .button-preview {
531 background-color: #fff;
532 min-height: 200px;
533 border-bottom: 1px solid #eee;
534 -moz-box-sizing: border-box;
535 box-sizing: border-box;
536 position: relative;
537 }
538
539 .button-preview h3 {
540 padding: 15px;
541 border-bottom: 1px solid #eee;
542 }
543
544 .button-builder {
545 text-align: center;
546 }
547
548 #button-preview {
549 margin: 10px auto;
550 }
551
552 .ideas .fa-star {
553 color: #ffcc01;
554 }
555
556 .ideas .fa-share-alt {
557 color: #006bb3;
558 }
559
560 .ideas .fa-bullhorn {
561 color: #e95645;
562 }
563
564 .ideas {
565 font-size: 14px;
566 }
567
568 .ideas i {
569 margin-right: 14px;
570 }
571
572 .ideas a {
573 font-weight: 600;
574 }
575
576 .ideas [data-share] {
577 color: #0073aa;
578 transition-property: border,background,color;
579 transition-duration: .05s;
580 transition-timing-function: ease-in-out;
581 cursor: pointer;
582 text-decoration: underline;
583 }
584
585 /* Color picker fixed style */
586 .color-alpha, .wp-color-result-text {
587 height: 100% !important;
588 }
589 .wp-picker-clear {
590 height: 30px;
591 margin-left: 5px !important;
592 }
593
594 /* Page Pro Features*/
595
596 .section {
597 padding: 3rem 1.5rem;
598 }
599
600 .ds-title {
601 margin-bottom: 4rem;
602 text-align: center;
603 }
604
605 .ds-title .subtitle {
606 margin-bottom: 1.5rem;
607 color: #f14668!important;
608 text-transform: uppercase!important;
609 font-weight: 400;
610 line-height: 1.25;
611 font-size: 1.25rem;
612 word-break: break-word;
613 }
614 .ds-title .title {
615 margin-top: -1.25rem;
616 font-size: 2.5rem;
617 color: #363636;
618 font-weight: 600;
619 line-height: 1.125;
620 word-break: break-word;
621 }
622
623
624 .columns {
625 display: flex;
626 margin-left: -0.75rem;
627 margin-right: -0.75rem;
628 margin-top: -0.75rem;
629 flex-wrap: wrap;
630 }
631
632 .column {
633 display: block;
634 padding: 0.75rem;
635 flex: none;
636 width: 25%;
637 box-sizing: border-box;
638 }
639
640 @media screen and (max-width: 1215px) {
641 .column {
642 width: 33.3333333333%;
643 }
644 }
645
646 @media screen and (max-width: 1024px) {
647 .column {
648 width: 50%;
649 }
650 }
651
652 @media screen and (max-width: 769px) {
653 .column {
654 width: 100%;
655 }
656 }
657
658
659 .feature-box {
660 position: relative;
661 box-sizing: border-box;
662 box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
663 padding: 40px 20px 60px 20px;
664 height: 100%;
665 text-align: center;
666 color: #7a7a7a;
667 }
668 .feature-box .icon {
669 margin-bottom: 1.25rem;
670 font-size: 2rem;
671
672 }
673
674 .feature-box .title {
675 margin-bottom: 1em;
676 font-size: 1.25rem;
677 }
678
679
680 .like-button {
681 display: inline-block;
682 width: 200px;
683 height: 50px;
684 margin: 0 15px;
685 line-height: 50px;
686 font-size: 1.25rem;
687 text-decoration: none;
688 color: #fff;
689 border-width: 1px;
690 border-style: solid;
691 transition: all 0.3s;
692 }
693
694 .pro-button {
695 background-color: #00d1b2;
696 border-color: transparent;
697 }
698
699 .pro-button:hover {
700 color: #00c4a7;
701 background-color: transparent;
702 border-color: #00c4a7;
703 }
704
705 .demo-button {
706 background-color: #3273dc;
707 border-color: transparent;
708 }
709
710 .demo-button:hover {
711 color: #276cda;
712 background-color: transparent;
713 border-color: #276cda;
714 }
715
716 @media screen and (min-width: 768px) {
717 .feature-box {
718 transition-duration: 0.2s;
719 -moz-transition-duration: 0.2s;
720 -o-transition-duration: 0.2s;
721 -webkit-transition-duration: 0.2s;
722 -ms-transition-duration: 0.2s;
723 }
724
725 .feature-box:hover {
726 transition: all 0.2s;
727 transform: scale(1.1);
728 -moz-transform: scale(1.1);
729 -o-transform: scale(1.1);
730 -ms-transform: scale(1.1);
731 -webkit-transform: scale(1.1);
732 z-index: 1;
733 box-shadow: 0 0 40px rgba(0, 0, 0, 0.15);
734 }
735 .feature-box:hover {
736 color: #363636;
737 }
738 .feature-box:hover .title {
739 color: #f14668;
740 }
741 }
742
743
744
745
746
747