PluginProbe
Responsive Menu – Create Mobile-Friendly Menu / 3.0.3
Responsive Menu – Create Mobile-Friendly Menu v3.0.3
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.3, at src/public/css/admin/main.css

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