6b07e51500f3f68c7eb27ce35005a77d41ef8a89
[autoinstalls/wordpress.git] / wp-admin / css / forms.css
1 /* Include margin and padding in the width calculation of input and textarea. */
2 input,
3 textarea {
4         -webkit-box-sizing: border-box;
5         -moz-box-sizing: border-box;
6         box-sizing: border-box;
7 }
8
9 input[type="text"],
10 input[type="password"],
11 input[type="checkbox"],
12 input[type="color"],
13 input[type="date"],
14 input[type="datetime"],
15 input[type="datetime-local"],
16 input[type="email"],
17 input[type="month"],
18 input[type="number"],
19 input[type="password"],
20 input[type="search"],
21 input[type="radio"],
22 input[type="tel"],
23 input[type="text"],
24 input[type="time"],
25 input[type="url"],
26 input[type="week"],
27 select,
28 textarea {
29         border: 1px solid #ddd;
30         -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 );
31         box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 );
32         background-color: #fff;
33         color: #32373c;
34         outline: none;
35         -webkit-transition: 0.05s border-color ease-in-out;
36         transition: 0.05s border-color ease-in-out;
37 }
38
39 input[type="text"]:focus,
40 input[type="password"]:focus,
41 input[type="color"]:focus,
42 input[type="date"]:focus,
43 input[type="datetime"]:focus,
44 input[type="datetime-local"]:focus,
45 input[type="email"]:focus,
46 input[type="month"]:focus,
47 input[type="number"]:focus,
48 input[type="password"]:focus,
49 input[type="search"]:focus,
50 input[type="tel"]:focus,
51 input[type="text"]:focus,
52 input[type="time"]:focus,
53 input[type="url"]:focus,
54 input[type="week"]:focus,
55 input[type="checkbox"]:focus,
56 input[type="radio"]:focus,
57 select:focus,
58 textarea:focus {
59         border-color: #5b9dd9;
60         -webkit-box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
61         box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
62 }
63
64 /* rtl:ignore */
65 input[type="email"],
66 input[type="url"] {
67         direction: ltr;
68 }
69
70 input[type="checkbox"],
71 input[type="radio"] {
72         border: 1px solid #b4b9be;
73         background: #fff;
74         color: #555;
75         clear: none;
76         cursor: pointer;
77         display: inline-block;
78         line-height: 0;
79         height: 16px;
80         margin: -4px 4px 0 0;
81         outline: 0;
82         padding: 0 !important;
83         text-align: center;
84         vertical-align: middle;
85         width: 16px;
86         min-width: 16px;
87         -webkit-appearance: none;
88         -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.1 );
89         box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.1 );
90         -webkit-transition: .05s border-color ease-in-out;
91         transition: .05s border-color ease-in-out;
92 }
93
94 input[type="radio"]:checked + label:before {
95         color: #82878c;
96 }
97
98 .wp-core-ui input[type="reset"]:hover,
99 .wp-core-ui input[type="reset"]:active {
100         color: #00a0d2;
101 }
102
103 td > input[type="checkbox"],
104 .wp-admin p input[type="checkbox"],
105 .wp-admin p input[type="radio"] {
106         margin-top: 0;
107 }
108
109 .wp-admin p label input[type="checkbox"] {
110         margin-top: -4px;
111 }
112
113 .wp-admin p label input[type="radio"] {
114         margin-top: -2px;
115 }
116
117 input[type="radio"] {
118         -webkit-border-radius: 50%;
119         border-radius: 50%;
120         margin-right: 4px;
121         line-height: 10px;
122 }
123
124 input[type="checkbox"]:checked:before,
125 input[type="radio"]:checked:before {
126         float: left;
127         display: inline-block;
128         vertical-align: middle;
129         width: 16px;
130         font: normal 21px/1 'dashicons';
131         speak: none;
132         -webkit-font-smoothing: antialiased;
133         -moz-osx-font-smoothing: grayscale;
134 }
135
136 input[type="checkbox"]:checked:before {
137         content: '\f147';
138         margin: -3px 0 0 -4px;
139         color: #1e8cbe;
140 }
141
142 input[type="radio"]:checked:before {
143         content: '\2022';
144         text-indent: -9999px;
145         -webkit-border-radius: 50px;
146         border-radius: 50px;
147         font-size: 24px;
148         width: 6px;
149         height: 6px;
150         margin: 4px;
151         line-height: 16px;
152         background-color: #1e8cbe;
153 }
154
155 @-moz-document url-prefix() {
156         input[type="checkbox"],
157         input[type="radio"],
158         .form-table input.tog {
159                 margin-bottom: -1px;
160         }
161 }
162
163 /* Search */
164 input[type="search"] {
165         -webkit-appearance: textfield;
166 }
167
168 input[type="search"]::-webkit-search-decoration {
169         display: none;
170 }
171
172 .ie8 input[type="password"] {
173         font-family: sans-serif;
174 }
175
176 textarea,
177 input,
178 select,
179 button {
180         font-family: inherit;
181         font-size: inherit;
182         font-weight: inherit;
183 }
184
185 textarea,
186 input,
187 select {
188         font-size: 14px;
189         padding: 3px 5px;
190         -webkit-border-radius: 0;
191         border-radius: 0; /* Reset mobile webkit's default element styling */
192 }
193
194 textarea {
195         overflow: auto;
196         padding: 2px 6px;
197         line-height: 1.4;
198 }
199
200 .wp-admin input[type="file"] {
201         padding: 3px 0;
202 }
203
204 label {
205         cursor: pointer;
206 }
207
208 input,
209 select {
210         margin: 1px;
211         padding: 3px 5px;
212 }
213
214 input.code {
215         padding-top: 6px;
216 }
217
218 textarea.code {
219         line-height: 1.4;
220         padding: 4px 6px 1px 6px;
221 }
222
223 input.readonly,
224 input[readonly],
225 textarea.readonly,
226 textarea[readonly] {
227         background-color: #eee;
228 }
229
230 :-moz-placeholder,
231 .wp-core-ui :-moz-placeholder {
232    color: #a9a9a9;
233 }
234
235 .form-invalid {
236         background-color: #ffebe8 !important;
237 }
238
239 .form-invalid input,
240 .form-invalid select {
241         border-color: #c00 !important;
242 }
243
244 .form-input-tip {
245         color: #666;
246 }
247
248 input:disabled,
249 input.disabled,
250 select:disabled,
251 select.disabled,
252 textarea:disabled,
253 textarea.disabled {
254         background: rgba( 255, 255, 255, 0.5 );
255         border-color: rgba( 222, 222, 222, 0.75 );
256         -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.04 );
257         box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.04 );
258         color: rgba( 51, 51, 51, 0.5 );
259 }
260
261 input[type="file"]:disabled,
262 input[type="file"].disabled,
263 input[type="range"]:disabled,
264 input[type="range"].disabled {
265         background: none;
266         -webkit-box-shadow: none;
267         box-shadow: none;
268 }
269
270 input[type="checkbox"]:disabled,
271 input[type="checkbox"].disabled,
272 input[type="radio"]:disabled,
273 input[type="radio"].disabled,
274 input[type="checkbox"]:disabled:checked:before,
275 input[type="checkbox"].disabled:checked:before,
276 input[type="radio"]:disabled:checked:before,
277 input[type="radio"].disabled:checked:before {
278         opacity: 0.7;
279 }
280
281 /*------------------------------------------------------------------------------
282   2.0 - Forms
283 ------------------------------------------------------------------------------*/
284
285
286 .wp-admin select {
287         padding: 2px;
288         line-height: 28px;
289         height: 28px;
290         vertical-align: middle;
291 }
292
293 .wp-admin .button-cancel {
294         padding: 0 5px;
295         line-height: 2;
296 }
297
298 .meta-box-sortables select {
299         max-width: 100%;
300 }
301
302 .wp-admin select[multiple] {
303         height: auto;
304 }
305
306 .submit {
307         padding: 1.5em 0;
308         margin: 5px 0;
309         -webkit-border-bottom-left-radius: 3px;
310         border-bottom-left-radius: 3px;
311         -webkit-border-bottom-right-radius: 3px;
312         border-bottom-right-radius: 3px;
313         border: none;
314 }
315
316 form p.submit a.cancel:hover {
317         text-decoration: none;
318 }
319
320 p.submit {
321         text-align: left;
322         max-width: 100%;
323         margin-top: 20px;
324         padding-top: 10px;
325 }
326
327 .textright p.submit {
328         border: none;
329         text-align: right;
330 }
331
332 table.form-table + p.submit,
333 table.form-table + input + p.submit,
334 table.form-table + input + input + p.submit {
335         border-top: none;
336         padding-top: 0;
337 }
338
339 #minor-publishing-actions input,
340 #major-publishing-actions input,
341 #minor-publishing-actions .preview {
342         text-align: center;
343 }
344
345 textarea.all-options,
346 input.all-options {
347         width: 250px;
348 }
349
350 input.large-text,
351 textarea.large-text {
352         width: 99%;
353 }
354
355 input.regular-text,
356 #adduser .form-field input {
357         width: 25em;
358 }
359
360 input.small-text {
361         width: 50px;
362         padding: 1px 6px;
363 }
364
365 input[type="number"].small-text {
366         width: 65px;
367 }
368
369 #doaction,
370 #doaction2,
371 #post-query-submit {
372         margin: 1px 8px 0 0;
373 }
374
375 .tablenav #changeit,
376 .tablenav #delete_all,
377 .tablenav #clear-recent-list,
378 .wp-filter #delete_all {
379         margin-top: 1px;
380 }
381
382 .tablenav .actions select {
383         float: left;
384         margin-right: 6px;
385         max-width: 200px;
386 }
387
388 .ie8 .tablenav .actions select {
389         width: 155px;
390 }
391
392 .ie8 .tablenav .actions select#cat {
393         width: 200px;
394 }
395
396 #timezone_string option {
397         margin-left: 1em;
398 }
399
400 #upload-form label {
401         color: #777;
402 }
403
404 label,
405 #your-profile label + a {
406         vertical-align: middle;
407 }
408
409 fieldset label,
410 #your-profile label + a {
411         vertical-align: middle;
412 }
413
414 .options-media-php label[for*="_size_"],
415 #misc-publishing-actions label {
416         vertical-align: baseline;
417 }
418
419 #misc-publishing-actions label[for="post_status"]:before {
420         content: '\f173';
421         display: inline-block;
422         font: normal 20px/1 'dashicons';
423         speak: none;
424         left: -1px;
425         padding: 0 5px 0 0;
426         position: relative;
427         top: 0;
428         text-decoration: none !important;
429         vertical-align: top;
430         -webkit-font-smoothing: antialiased;
431         -moz-osx-font-smoothing: grayscale;
432 }
433
434 #pass-strength-result {
435         background-color: #eee;
436         border: 1px solid #ddd;
437         float: left;
438         margin: 13px 5px 5px 1px;
439         padding: 3px 5px;
440         text-align: center;
441         width: 200px;
442         display: none;
443 }
444
445 #pass-strength-result.short {
446         background-color: #ffa0a0;
447         border-color: #f04040;
448 }
449
450 #pass-strength-result.bad {
451         background-color: #ffb78c;
452         border-color: #ff853c;
453 }
454
455 #pass-strength-result.good {
456         background-color: #ffec8b;
457         border-color: #fc0;
458 }
459
460 #pass-strength-result.strong {
461         background-color: #c3ff88;
462         border-color: #8dff1c;
463 }
464
465 .indicator-hint {
466         padding-top: 8px;
467 }
468
469 p.search-box {
470         float: right;
471         margin: 0;
472 }
473
474 .network-admin.themes-php p.search-box {
475         clear: left;
476 }
477
478 .search-box input[name="s"],
479 .tablenav .search-plugins input[name="s"],
480 .tagsdiv .newtag {
481         float: left;
482         height: 28px;
483         margin: 0 4px 0 0;
484 }
485
486 input[type="text"].ui-autocomplete-loading,
487 input[type="email"].ui-autocomplete-loading {
488         background-image: url(../images/loading.gif);
489         background-repeat: no-repeat;
490         background-position: right center;
491         visibility: visible;
492 }
493
494 input.ui-autocomplete-input.open {
495         border-bottom-color: transparent;
496 }
497
498 ul#add-to-blog-users {
499         margin: 0 0 0 14px;
500 }
501
502 .ui-autocomplete {
503         padding: 0;
504         margin: 0;
505         list-style: none;
506         position: absolute;
507         z-index: 10000;
508         border: 1px solid #5b9dd9;
509         -webkit-box-shadow: 0 1px 2px rgba( 30, 140, 190, 0.8 );
510         box-shadow: 0 1px 2px rgba( 30, 140, 190, 0.8 );
511         background-color: #fff;
512 }
513
514 .ui-autocomplete li {
515         margin-bottom: 0;
516         padding: 4px 10px;
517         white-space: nowrap;
518         text-align: left;
519 }
520
521 .ui-autocomplete li.ui-state-focus {
522         background-color: #ddd;
523         cursor: pointer;
524 }
525
526 /*------------------------------------------------------------------------------
527   15.0 - Comments Screen
528 ------------------------------------------------------------------------------*/
529
530 .form-table {
531         border-collapse: collapse;
532         margin-top: 0.5em;
533         width: 100%;
534         clear: both;
535 }
536
537 .form-table,
538 .form-table td,
539 .form-table th,
540 .form-table td p,
541 .form-wrap label {
542         font-size: 14px;
543 }
544
545 .form-table td {
546         margin-bottom: 9px;
547         padding: 15px 10px;
548         line-height: 1.3;
549         vertical-align: middle;
550 }
551
552 .form-table th,
553 .form-wrap label {
554         color: #23282d;
555         font-weight: normal;
556         text-shadow: none;
557         vertical-align: baseline;
558 }
559
560 .form-table th {
561         vertical-align: top;
562         text-align: left;
563         padding: 20px 10px 20px 0;
564         width: 200px;
565         line-height: 1.3;
566         font-weight: 600;
567 }
568
569 .form-table th.th-full {
570         width: auto;
571         font-weight: 400;
572 }
573
574 .form-table td p {
575         margin-top: 4px;
576         margin-bottom: 0;
577 }
578
579 .form-table td fieldset label {
580         margin: 0.25em 0 0.5em !important;
581         display: inline-block;
582 }
583
584 .form-table td fieldset label,
585 .form-table td fieldset p,
586 .form-table td fieldset li {
587         line-height: 1.4em;
588 }
589
590 .form-table input.tog,
591 .form-table input[type="radio"] {
592         margin-top: -4px;
593         margin-right: 4px;
594         float: none;
595 }
596
597 .form-table .pre {
598         padding: 8px;
599         margin: 0;
600 }
601
602 table.form-table td .updated {
603         font-size: 13px;
604 }
605
606 table.form-table td .updated p {
607         font-size: 13px;
608         margin: 0.3em 0;
609 }
610
611 /*------------------------------------------------------------------------------
612   18.0 - Users
613 ------------------------------------------------------------------------------*/
614
615 #profile-page .form-table textarea {
616         width: 500px;
617         margin-bottom: 6px;
618 }
619
620 #profile-page .form-table #rich_editing {
621         margin-right: 5px
622 }
623
624 #your-profile legend {
625         font-size: 22px;
626 }
627
628 #display_name {
629         width: 15em;
630 }
631
632 #createuser .form-field input {
633         width: 25em;
634 }
635
636 .color-option {
637         display: inline-block;
638         width: 24%;
639         padding: 5px 15px 15px;
640         -webkit-box-sizing: border-box;
641         -moz-box-sizing: border-box;
642         box-sizing: border-box;
643         margin-bottom: 3px;
644 }
645
646 .color-option:hover,
647 .color-option.selected {
648         background: #ddd;
649 }
650
651 .color-palette {
652         width: 100%;
653         border-spacing: 0;
654         border-collapse: collapse;
655 }
656 .color-palette td {
657         height: 20px;
658         padding: 0;
659         border: none;
660 }
661
662 .color-option {
663         cursor: pointer;
664 }
665
666 /*------------------------------------------------------------------------------
667   19.0 - Tools
668 ------------------------------------------------------------------------------*/
669
670 .tool-box .title {
671         margin: 8px 0;
672         font-size: 18px;
673         font-weight: normal;
674         line-height: 24px;
675 }
676
677 /* Card styles */
678
679 .card {
680         position: relative;
681         margin-top: 20px;
682         padding: 0.7em 2em 1em;
683         min-width: 255px;
684         max-width: 520px;
685         border: 1px solid #e5e5e5;
686         -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
687         box-shadow: 0 1px 1px rgba(0,0,0,0.04);
688         background: #fff;
689 }
690
691 /* Press this styles */
692
693 .pressthis h4 {
694         margin: 2em 0 1em;
695 }
696
697 .pressthis textarea {
698         width: 100%;
699         font-size: 1em;
700 }
701
702 #pressthis-code-wrap {
703         overflow: auto;
704 }
705
706 .pressthis-bookmarklet-wrapper {
707         margin: 20px 0 8px;
708         vertical-align: top;
709         position: relative;
710         z-index: 1;
711 }
712
713 .pressthis-bookmarklet,
714 .pressthis-bookmarklet:hover,
715 .pressthis-bookmarklet:focus,
716 .pressthis-bookmarklet:active {
717         display: inline-block;
718         position: relative;
719         cursor: move;
720         color: #32373c;
721         background: #e6e6e6;
722         -webkit-border-radius: 5px;
723         border-radius: 5px;
724         border: 1px solid #b4b4b4;
725         font-style: normal;
726         line-height: 16px;
727         font-size: 14px;
728         text-decoration: none;
729 }
730
731 .pressthis-bookmarklet:active {
732         outline: none;
733 }
734
735 .pressthis-bookmarklet:after {
736         content: '';
737         width: 70%;
738         height: 55%;
739         z-index: -1;
740         position: absolute;
741         right: 10px;
742         bottom: 9px;
743         background: transparent;
744         -webkit-transform: skew(20deg) rotate(6deg);
745         -ms-transform: skew(20deg) rotate(6deg);
746         transform: skew(20deg) rotate(6deg);
747         -webkit-box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6);
748         box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6);
749 }
750
751 .pressthis-bookmarklet:hover:after {
752         -webkit-transform: skew(20deg) rotate(9deg);
753         -ms-transform: skew(20deg) rotate(9deg);
754         transform: skew(20deg) rotate(9deg);
755         -webkit-box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7);
756         box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7);
757 }
758
759 .pressthis-bookmarklet span {
760         display: inline-block;
761         margin: 0px 0 0;
762         padding: 0px 12px 8px 9px;
763 }
764
765 .pressthis-bookmarklet span:before {
766         color: #777;
767         font: normal 20px/1 'dashicons';
768         content:'\f157';
769         position: relative;
770         display: inline-block;
771         top: 4px;
772         margin-right: 4px;
773 }
774
775 .pressthis-js-toggle {
776         margin-left: 10px;
777         padding: 0;
778         height: auto;
779         vertical-align: top;
780 }
781
782 .pressthis-js-toggle .dashicons {
783         margin: 5px 8px 6px 7px;
784         color: #777;
785 }
786
787 /* to override the button class being applied */
788 .pressthis-js-toggle.button.button {
789         margin-left: 10px;
790         padding: 0;
791         height: auto;
792         vertical-align: top;
793 }
794
795 .pressthis-js-toggle .dashicons {
796         margin: 5px 8px 6px 7px;
797         color: #777;
798 }
799
800 /*------------------------------------------------------------------------------
801   20.0 - Settings
802 ------------------------------------------------------------------------------*/
803
804 #utc-time, #local-time {
805         padding-left: 25px;
806         font-style: italic;
807 }
808
809 .defaultavatarpicker .avatar {
810         margin: 2px 0;
811         vertical-align: middle;
812 }
813
814 .options-general-php input.small-text {
815         width: 56px;
816 }
817
818 .options-general-php .spinner {
819         float: none;
820         margin: 0 3px;
821 }
822
823 .settings-php .language-install-spinner,
824 .options-general-php .language-install-spinner {
825         display: inline-block;
826         float: none;
827         margin: -3px 5px 0;
828         vertical-align: middle;
829 }
830
831 /*------------------------------------------------------------------------------
832   21.0 - Network Admin
833 ------------------------------------------------------------------------------*/
834
835 .form-field #site-address {
836         max-width: 25em;
837 }
838
839 .form-field #domain {
840         max-width: 22em;
841 }
842
843 .form-field #site-title,
844 .form-field #admin-email,
845 .form-field #path,
846 .form-field #blog_registered,
847 .form-field #blog_last_updated {
848         max-width: 25em;
849 }
850
851 .form-field #path {
852         margin-bottom: 5px;
853 }
854
855 /*------------------------------------------------------------------------------
856    Credentials check dialog for Install and Updates
857 ------------------------------------------------------------------------------*/
858
859 .request-filesystem-credentials-dialog {
860         display: none;
861 }
862
863 .request-filesystem-credentials-dialog .notification-dialog {
864         top: 15%;
865 }
866
867 .request-filesystem-credentials-dialog-content {
868         margin: 25px;
869 }
870
871 .request-filesystem-credentials-form input[type="text"],
872 .request-filesystem-credentials-form input[type="password"] {
873         display: block;
874 }
875
876 .request-filesystem-credentials-dialog input[type="text"],
877 .request-filesystem-credentials-dialog input[type="password"] {
878         width: 100%;
879 }
880
881 .request-filesystem-credentials-form .field-title {
882         font-weight: 600;
883 }
884
885 .request-filesystem-credentials-dialog label[for="hostname"],
886 .request-filesystem-credentials-dialog label[for="public_key"],
887 .request-filesystem-credentials-dialog label[for="private_key"] {
888         display: block;
889         margin-bottom: 1em;
890 }
891
892 .request-filesystem-credentials-dialog .ftp-username,
893 .request-filesystem-credentials-dialog .ftp-password {
894         float: left;
895         width: 48%;
896 }
897
898 .request-filesystem-credentials-dialog .ftp-password {
899         margin-left: 4%;
900 }
901
902 .request-filesystem-credentials-dialog .request-filesystem-credentials-action-buttons {
903         text-align: right;
904 }
905
906 .request-filesystem-credentials-dialog label[for="ftp"] {
907         margin-right: 10px;
908 }
909
910 #request-filesystem-credentials-dialog .button:not(:last-child) {
911         margin-right: 10px;
912 }
913
914 #request-filesystem-credentials-form .cancel-button {
915         display: none;
916 }
917
918 #request-filesystem-credentials-dialog .cancel-button {
919         display: inline;
920 }
921
922
923 /* =Media Queries
924 -------------------------------------------------------------- */
925
926 @media screen and ( max-width: 782px ) {
927         /* Input Elements */
928         textarea {
929                 -webkit-appearance: none;
930         }
931
932         input[type="text"],
933         input[type="email"],
934         input[type="search"],
935         input[type="password"],
936         input[type="number"] {
937                 -webkit-appearance: none;
938                 padding: 6px 10px;
939         }
940
941         input.code {
942                 padding-bottom: 5px;
943                 padding-top: 10px;
944         }
945
946         input[type="checkbox"], .widefat th input[type="checkbox"] {
947                 -webkit-appearance: none;
948                 padding: 10px;
949         }
950
951         .widefat th input[type="checkbox"] {
952                 margin-bottom: 8px;
953         }
954
955         input[type="checkbox"]:checked:before, .widefat th input[type="checkbox"]:before {
956                 font: normal 30px/1 'Dashicons';
957                 margin: -3px -5px;
958         }
959
960         input[type="radio"],
961         input[type="checkbox"] {
962                 height: 25px;
963                 width: 25px;
964         }
965
966         .wp-admin p input[type="checkbox"],
967         .wp-admin p input[type="radio"] {
968                 margin-top: -3px;
969         }
970
971         input[type="radio"]:checked:before {
972                 vertical-align: middle;
973                 width: 9px;
974                 height: 9px;
975                 margin: 7px;
976                 line-height: 16px;
977         }
978
979         .wp-upload-form input[type="submit"] {
980                 margin-top: 10px;
981         }
982
983         #wpbody select {
984                 height: 36px;
985                 font-size: 16px;
986         }
987
988         .wp-admin .button-cancel {
989                 padding: 0;
990                 font-size: 14px;
991         }
992
993         #createuser .form-field input {
994                 width: 100%;
995         }
996
997         .form-table {
998                 -webkit-box-sizing: border-box;
999                 -moz-box-sizing: border-box;
1000                 box-sizing: border-box;
1001         }
1002
1003         .form-table th,
1004         .form-table td {
1005                 display: block;
1006                 width: auto;
1007                 vertical-align: middle;
1008         }
1009
1010         .form-table .color-palette td {
1011                 display: table-cell;
1012                 width: 15px;
1013         }
1014
1015         .form-table table.color-palette {
1016                 margin-right: 10px;
1017         }
1018
1019         textarea,
1020         input {
1021                 font-size: 16px;
1022         }
1023
1024         .form-table td input[type="text"],
1025         .form-table td input[type="email"],
1026         .form-table td input[type="password"],
1027         .form-table td select,
1028         .form-table td textarea,
1029         .form-table span.description,
1030         #profile-page .form-table textarea {
1031                 width: 100%;
1032                 font-size: 16px;
1033                 line-height: 1.5;
1034                 padding: 7px 10px;
1035                 display: block;
1036                 max-width: none;
1037                 -webkit-box-sizing: border-box;
1038                 -moz-box-sizing: border-box;
1039                 box-sizing: border-box;
1040         }
1041
1042         #wpbody .form-table td select {
1043                 height: 40px;
1044         }
1045
1046         input[type="text"].small-text,
1047         input[type="search"].small-text,
1048         input[type="password"].small-text,
1049         input[type="number"].small-text,
1050         input[type="number"].small-text,
1051         .form-table input[type="text"].small-text {
1052                 width: auto;
1053                 max-width: 55px;
1054                 display: inline;
1055                 padding: 3px 6px;
1056                 margin: 0 3px;
1057         }
1058
1059         #pass-strength-result {
1060                 width: 100%;
1061                 -webkit-box-sizing: border-box;
1062                 -moz-box-sizing: border-box;
1063                 box-sizing: border-box;
1064                 padding: 8px;
1065         }
1066
1067         p.search-box {
1068                 float: none;
1069                 position: absolute;
1070                 bottom: 0;
1071                 width: 98%;
1072                 height: 90px;
1073                 margin-bottom: 20px;
1074         }
1075
1076         p.search-box input[name="s"] {
1077                 height: auto;
1078                 float: none;
1079                 width: 100%;
1080                 margin-bottom: 10px;
1081                 vertical-align: middle;
1082                 -webkit-appearance: none;
1083         }
1084
1085         p.search-box input[type="submit"] {
1086                 margin-bottom: 10px;
1087         }
1088
1089         .form-table span.description {
1090                 padding: 4px 0 0;
1091                 line-height: 1.4em;
1092         }
1093
1094         .form-table th {
1095                 padding-top: 10px;
1096                 padding-bottom: 0;
1097                 border-bottom: 0;
1098         }
1099
1100         .form-table td {
1101                 padding-top: 8px;
1102                 padding-left: 0;
1103         }
1104
1105         .form-table input.regular-text {
1106                 width: 100%;
1107         }
1108
1109         .form-table label {
1110                 font-size: 14px;
1111         }
1112
1113         .form-table fieldset label {
1114                 display: block;
1115         }
1116
1117         #utc-time {
1118                 margin-top: 10px;
1119         }
1120
1121         #utc-time,
1122         #local-time {
1123                 display: block;
1124                 float: none;
1125                 padding: 0;
1126                 line-height: 2;
1127         }
1128
1129         .form-field #domain {
1130                 max-width: none;
1131         }
1132 }
1133
1134 @media only screen and (max-width: 768px) {
1135         .form-field input[type="text"],
1136         .form-field input[type="email"],
1137         .form-field input[type="password"],
1138         .form-field select,
1139         .form-field textarea {
1140                 width: 99%;
1141         }
1142
1143         .form-wrap .form-field {
1144                 padding:0;
1145         }
1146
1147         /* users */
1148         #profile-page .form-table textarea {
1149                 max-width: 400px;
1150                 width: auto;
1151         }
1152
1153 }
1154
1155 @media only screen and (max-height: 480px) {
1156         /*  Request Credentials */
1157         .request-filesystem-credentials-dialog  .notification-dialog{
1158                 width: 100%;
1159                 height: 100%;
1160                 position: fixed;
1161                 top: 0;
1162                 margin: 0;
1163                 left: 0;
1164                 overflow-y: auto;
1165         }
1166 }
1167
1168 /* Smartphone */
1169 @media screen and (max-width: 600px) {
1170         /* Color Picker Options */
1171         .color-option {
1172                 width: 49%;
1173         }
1174 }
1175