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