PluginProbe
Responsive Menu – Create Mobile-Friendly Menu / 3.0.11
Responsive Menu – Create Mobile-Friendly Menu v3.0.11
4.7.3 3.1.5 3.1.6 3.1.7 3.1.8 3.1.9 4.0.0 4.0.1 4.0.2 4.0.3 4.0.4 4.1.0 4.1.1 4.1.10 4.1.11 4.1.12 4.1.2 4.1.3 4.1.4 4.1.5 4.1.6 4.1.7 4.1.8 4.1.9 4.2.0 All 90 releases
responsive-menu / src / public / css / admin / main.css

main.css in Responsive Menu – Create Mobile-Friendly Menu 3.0.11, at src/public/css/admin/main.css

746 lines 12.7 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .tab_container {
2 display: none;
3 }
4
5 .tabs_container {
6 margin: 25px 0 15px 0;
7 }
8
9 .responsive-menu-postbox-container {
10 direction: ltr;
11 }
12
13 .wrap .notice,
14 .wrap div.error,
15 .wrap div.updated {
16 margin: 0;
17 }
18
19 #submitdiv {
20 width: 100%;
21 min-width: 100%;
22 }
23
24 #menu-sortable {
25 position: relative;
26 }
27
28 #menu-sortable,
29 #items_order_container td:last-child {
30 width:400px;
31 }
32
33 #postbox_order .fa {
34 position: absolute;
35 right: 3%;
36 top: 13px;
37 }
38
39 #postbox_ordering .fa {
40 position: absolute;
41 left: 47%;
42 bottom: 11px;
43 }
44
45 #postbox_ordering li.draggable {
46 height: 41px;
47 vertical-align: top;
48 }
49
50 .menu-order-option-switch,
51 .order-option-switch {
52 background: #DE4B42;
53 color: white;
54 position: absolute;
55 left: 0;
56 top: 0;
57 bottom: 0;
58 line-height: 40px;
59 padding: 0 5px;
60 width: 30px;
61 text-align: center;
62 cursor: pointer;
63 }
64
65 .menu-order-option-switch.menu-order-option-switch-on,
66 .order-option-switch.order-option-switch-on {
67 background: green;
68 }
69
70 .menu-order-option-switch:after,
71 .order-option-switch:after {
72 content: "OFF";
73 }
74
75 .menu-order-option-switch.menu-order-option-switch-on:after,
76 .order-option-switch.order-option-switch-on:after {
77 content: "ON";
78 }
79
80 li.draggable {
81 position: relative;
82 }
83
84 .postbox > h4 {
85 background: #ffffff none repeat scroll 0 0;
86 border-bottom: 1px solid #eee;
87 box-sizing: border-box;
88 display: block;
89 font-size: 14px;
90 line-height: 1.4;
91 padding: 8px 12px;
92 width: 100%;
93 margin: 0;
94 }
95
96 .add-font-icon {
97 display: inline-block;
98 background: #298CBA;
99 color: white;
100 padding: 10px 25px;
101 border-radius: 2px;
102 cursor: pointer;
103 margin-top: 15px;
104 font-weight: bold;
105 }
106
107 .postbox .inside .select,
108 .postbox .inside .image_button,
109 .postbox .inside .image,
110 .postbox .inside .text {
111 padding: 5px 15px;
112 height: 30px;
113 margin-right: 10px;
114 }
115
116 .postbox .inside .textarea {
117 height: 100px;
118 padding: 15px;
119 width: 100%;
120 }
121
122 .font-icon-container .font-icon-row:first-child {
123 font-weight: bold;
124 }
125
126 .postbox .inside {
127 padding: 0;
128 margin: 0 !important;
129 }
130
131 .postbox .inside table {
132 width: 100%;
133 border-spacing: 0;
134 }
135
136 .postbox .inside table .description {
137 color: #899194;
138 line-height: 16px;
139 font-size: 12px;
140 }
141
142 .postbox .inside table tr td {
143 border-bottom: 1px solid #f5f5f5;
144 vertical-align: middle;
145 }
146
147 .postbox .inside table tr td:first-child {
148 background: #F9F9F9;
149 font-weight: bold;
150 border-right: 1px solid #e1e1e1;
151 color: #333;
152 width: 250px;
153 }
154
155 .postbox .inside table tr td:last-child:hover {
156 background: #FCFCFC;
157 }
158
159 .postbox .inside table tr.pro_option td:last-child:hover {
160 background: #FFE9E8;
161 }
162
163 .postbox .inside table tr.semi_pro_option td:last-child:hover {
164 background: #EDEAEA;
165 }
166
167 .postbox .inside table tr td:last-child {
168 text-align: left;
169 position: relative;
170 }
171
172 input[type="text"].image,
173 .select-style,
174 .inside .minicolors-theme-default.minicolors,
175 .postbox .inside .textarea,
176 .postbox .inside input.text {
177 width: 74%;
178 }
179
180 #normal-sortables .button.submit,
181 .postbox .inside .image_button {
182 background: #298CBA;
183 color: white;
184 border-color: #298CBA;
185 }
186
187 #normal-sortables .button.submit {
188 padding: 0 35px;
189 height: 50px;
190 line-height: 50px;
191 font-weight: bold;
192 font-size: 11px;
193 }
194
195 #normal-sortables .button.submit:hover {
196 background: #40A1CE;
197 }
198
199 .postbox .inside .image_button .fa {
200 vertical-align: text-top;
201 }
202
203 #header_bar_items_order_container td {
204 width: 100%;
205 display: block;
206 padding: 20px;
207 border: 0;
208 box-sizing: border-box;
209 }
210
211 .postbox .inside tr.semi_pro_option td:last-child:before,
212 .postbox .inside tr.pro_option td:last-child:before {
213 content: "PRO";
214 float: right;
215 color: #DE4B42;
216 font-weight: bold;
217 font-size: 9px;
218 margin-top: 6px;
219 border-left: 1px solid #DE4B42;
220 padding-left: 8px;
221 }
222
223 .postbox .inside tr.semi_pro_option td:last-child:before {
224 content: "SEMI PRO";
225 color: #333;
226 border-color: #333;
227 }
228
229 .postbox .inside tr.pro_option td:last-child:hover:after {
230 width: 100%;
231 content: "Please upgrade to use";
232 top: 0;
233 left: 0;
234 right: 0;
235 bottom: 0;
236 position: absolute;
237 text-align: center;
238 color: #fff;
239 font-weight: bold;
240 font-size: 14px;
241 padding-top: 2%;
242 background: rgba(222, 75, 66, 0.6);
243 }
244
245 #items_order_container td:last-child,
246 #header_bar_items_order_container td:last-child {
247 text-align: center;
248 }
249
250 .postbox_font_icons .inside
251 {
252 padding: 0;
253 margin-bottom: 0;
254 }
255
256 .postbox .inside .wp-color-picker {
257 cursor: crosshair;
258 }
259
260 #all_options_container,
261 #banner_area
262 {
263 vertical-align: top;
264 display: inline-block;
265 box-sizing: border-box;
266 }
267
268 #all_options_container {
269 width: 74%;
270 }
271
272 #banner_area
273 {
274 width: 24%;
275 margin-top: 1px;
276 margin-left: 2%;
277 }
278
279 #upgrade_banner {
280 padding: 25px 5%;
281 background: #DE4B42;
282 color: #fff;
283 border: 1px solid #D33C34;
284 border-radius: 2px;
285 text-align: center;
286 }
287
288 #upgrade_banner i {
289 margin-right: 5px;
290 }
291
292 #docs_banner {
293 background: #FAB719;
294 padding: 35px;
295 color: #333;
296 margin-top: 15px;
297 text-align: center;
298 }
299
300 #upgrade_banner,
301 #docs_banner {
302 font-size: 18px;
303 font-weight: bold;
304 line-height: 24px;
305 }
306
307 #upgrade_banner li {
308 list-style: none;
309 font-weight: bold;
310 font-size: 11px;
311 }
312
313 #docs_banner .button,
314 #upgrade_banner .button {
315 background: white;
316 padding: 0 25px;
317 height: 50px;
318 line-height: 50px;
319 font-weight: bold;
320 font-size: 13px;
321 color: #333;
322 display: block;
323 margin: auto;
324 width: auto;
325 text-align: center;
326 }
327
328 #docs_banner .button {
329 margin-top: 15px;
330 }
331
332 #options_list_container .tab_container:first-child {
333 display: block;
334 }
335
336 .tab
337 {
338 display: inline-block;
339 padding: 5px;
340 text-align: center;
341 border: 1px solid #CCC;
342 border-radius: 2px;
343 cursor: pointer;
344 background: white;
345 margin: 0 5px 0 0 !important;
346 }
347
348 .tab.active_tab {
349 background: #00A0D2;
350 color: white;
351 border-color: #298CBA;
352 }
353
354 .option_holder
355 {
356 display: inline-block;
357 width: 30%;
358 vertical-align: middle;
359 position: relative;
360 text-align: center;
361 margin-right: 2%;
362 padding: 5px 2% 25px 2%;
363 margin-top: 15px;
364 border: 1px dashed #DADADA;
365 border-radius: 5px;
366 transition: 0.4s all;
367 box-sizing: border-box;
368 }
369
370 .option_holder:hover
371 {
372 background: #F7F2F2;
373 }
374
375 .option_holder h4
376 {
377 margin-bottom: 0;
378 }
379
380 .option_holder h5
381 {
382 margin: 5px 0;
383 font-weight: normal;
384 }
385
386 .option_holder.pro_option
387 {
388 border-color: #ED655E;
389 }
390
391 .option_holder.semi_pro_option {
392 border-color: #DADADA;
393 }
394
395 .options_container
396 {
397 background: white;
398 border: 1px solid #CCC;
399 border-radius: 0 2px 2px 2px;
400 padding: 0 15px 15px 15px;
401 text-align: center;
402 }
403
404 .options_container input,
405 .options_container textarea,
406 .options_container select
407 {
408 width: 90%;
409 border: 1px solid #CCC;
410 border-radius: 2px;
411 padding: 5px;
412 background: white;
413 }
414
415 /* On-Off Buttons */
416
417 .onoffswitch {
418 position: relative; width: 74px;
419 -webkit-user-select:none;
420 -moz-user-select:none;
421 -ms-user-select: none;
422 }
423
424 .onoffswitch-checkbox {
425 display: none;
426 }
427
428 .onoffswitch-label {
429 display: block;
430 overflow: hidden;
431 cursor: pointer;
432 border: 2px solid transparent;
433 text-align: left;
434 }
435
436 .onoffswitch-inner {
437 display: block;
438 width: 200%;
439 margin-left: -100%;
440 transition: margin 0.3s ease-in 0s;
441 }
442
443 .onoffswitch-inner:before,
444 .onoffswitch-inner:after {
445 display: block;
446 float: left;
447 width: 50%;
448 height: 23px;
449 padding: 0;
450 line-height: 23px;
451 font-size: 14px;
452 color: white;
453 font-family: Trebuchet, Arial, sans-serif;
454 font-weight: bold;
455 box-sizing: border-box;
456 }
457
458 .onoffswitch-inner:before {
459 content: "ON";
460 padding-left: 10px;
461 background-color: transparent;
462 color: green;
463 }
464
465 .onoffswitch-inner:after {
466 content: "OFF";
467 padding-right: 10px;
468 background-color: transparent;
469 color: #de4b42;
470 text-align: right;
471 }
472
473 .onoffswitch-switch {
474 display: block;
475 width: 13px;
476 margin: 5px;
477 background: #FFFFFF;
478 position: absolute;
479 top: 0;
480 bottom: 0;
481 right: 47px;
482 border: 2px solid #999999;
483 border-radius: 12px;
484 transition: all 0.3s ease-in 0s;
485 }
486
487 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
488 margin-left: 0;
489 }
490
491 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
492 right: 0px;
493 }
494
495 input[type="checkbox"]
496 {
497 display: none;
498 }
499
500 .key-container {
501 margin-bottom: 15px;
502 }
503
504 .key-container .key-title {
505 font-weight: bold;
506 display: inline-block;
507 margin-right: 10px;
508 }
509
510 .key-container .key {
511 display: inline-block;
512 font-size: 9px;
513 border: 1px solid #DADADA;
514 border-radius: 2px;
515 padding: 5px 15px 5px 5px;
516 background: white;
517 }
518
519 .key-container .key span {
520 border-right: 1px solid #de4b42;
521 display: inline-block;
522 padding-right: 5px;
523 margin-right: 10px;
524 color: #de4b42;
525 font-size: 9px;
526 font-weight: bold;
527 }
528
529 .key-container .key.key-semi-pro span {
530 color: #333;
531 border-color: #333;
532 }
533
534 .key-container .key.key-pro {
535 margin-right: 15px;
536 }
537
538 .key-container a {
539 text-decoration: none;
540 color: #333;
541 }
542
543 /* End On-Off Buttons */
544
545 /* Nice Select Button Styling */
546 .select-style {
547 border: 1px solid #ccc;
548 border-radius: 3px;
549 cursor: pointer;
550 overflow: hidden;
551 background: #fafafa url("data:image/png;base64,R0lGODlhDwAUAIABAAAAAP///yH5BAEAAAEALAAAAAAPABQAAAIXjI+py+0Po5wH2HsXzmw//lHiSJZmUAAAOw==")no-repeat 95% 50%;
552 }
553
554 .select-style select {
555 width: 105%;
556 border: none;
557 cursor: pointer;
558 box-shadow: none;
559 background: transparent;
560 background-image: none;
561 -webkit-appearance: none;
562 max-width: 115%;
563 }
564
565 .select-style select:focus {
566 outline: none;
567 }
568
569 /* End Select Button Styling */
570
571 /* Text Box Styling */
572
573 input[type="text"].text,
574 input[type="text"].image
575 {
576 padding: 10px 5%;
577 border: 1px solid #c9c9c9;
578 border-bottom: solid 2px #c9c9c9;
579 transition: border 0.3s;
580 }
581
582 input[type="text"].text:focus,
583 input[type="text"].text.focus,
584 input[type="text"].image:focus,
585 input[type="text"].image.focus,
586 {
587 border-bottom: solid 2px #969696;
588 }
589
590 input[type="button"].image_button
591 {
592 width: 15%;
593 height: 42px;
594 }
595
596 input[type="text"].image,
597 input[type="button"].image_button
598 {
599 display: inline-block;
600 }
601
602 /* End Text Box Styling */
603 #custom_css,
604 #menu_font_icons_container,
605 #custom_css_container
606 {
607 width: 90%;
608 }
609
610 .font-icon-container
611 {
612 width: 100%;
613 display: table;
614 }
615
616 #custom_css {
617 height: 300px;
618 }
619
620 .font-icon-row
621 {
622 display: table-row;
623 }
624
625 .font-icon-cell-id,
626 .font-icon-cell-icon
627 {
628 display: inline-block;
629 text-align: left;
630 }
631
632 .font-icon-cell-id {
633 width: 10%;
634 }
635
636 .font-icon-cell-icon {
637 width: 64%;
638 }
639
640 .font-icon-cell-id input,
641 .font-icon-cell-icon input
642 {
643 width: 100%;
644 }
645
646 .draggable {
647 border: 1px solid #DADADA;
648 border-radius: 2px;
649 background: #EFEFEF;
650 padding: 10px 0;
651 margin: 0;
652 cursor: move;
653 font-weight: bold;
654 padding-left: 35px;
655 box-sizing: border-box;
656 }
657
658 .draggable input {
659 display: none;
660 }
661
662 #header_bar_items_order_container .draggable {
663 display: inline-block;
664 width: 19%;
665 }
666
667 .upgrade-notes {
668 background: #DE4B42;
669 padding: 15px 2%;
670 width: 96%;
671 position: relative;
672 margin: 15px 0;
673 color: white;
674 }
675
676 .upgrade-notes a {
677 color: white;
678 text-decoration: underline;
679 }
680
681 .upgrade-notes-title {
682 font-size: 16px;
683 margin-bottom: 10px;
684 font-weight: bold;
685 }
686
687 .upgrade-notes-close {
688 position: absolute;
689 top: 0;
690 right: 2%;
691 font-size: 18px;
692 padding: 15px;
693 font-weight: bold;
694 cursor: pointer;
695 }
696
697 @media (max-width: 1200px) {
698 .preview,
699 #delete-action {
700 float: none;
701 width: 100%;
702 clear: both;
703 text-align: center;
704 }
705 }
706
707 @media (max-width: 800px) {
708 .tab {
709 margin-bottom: 10px !important;
710 width: 18%;
711 margin-right: 1% !important;
712 }
713 #banner_area,
714 #all_options_container {
715 width: 100%;
716 }
717 .tabs_container {
718 text-align: center;
719 }
720 .postbox .inside table tr td,
721 .postbox .inside table tr td:last-child,
722 .postbox .inside table tr td:first-child {
723 width: 100%;
724 display: block;
725 text-align: center;
726 padding: 10px 0;
727 }
728 #banner_area {
729 margin: 15px 0;
730 }
731 #menu-sortable,
732 .onoffswitch,
733 .select-style {
734 margin: auto;
735 }
736 #menu-sortable, #items_order_container td:last-child {
737 width: 90%;
738 margin: auto;
739 }
740 #normal-sortables .button.submit {
741 margin: auto;
742 display: block;
743 float: none;
744 }
745 }
746