WordPress.org
Get WordPress

Make WordPress Core

Ticket #50177: forms.diff

File forms.diff, 31.0 KB (added by utz119, 6 years ago)
Line 
1/* Include margin and padding in the width calculation of input and textarea. */
2input,
3select,
4textarea,
5button {
6 box-sizing: border-box;
7 font-family: inherit;
8 font-size: inherit;
9 font-weight: inherit;
10}
11
12textarea,
13input {
14 font-size: 14px;
15}
16
17textarea {
18 overflow: auto;
19 padding: 2px 6px;
20 /* inherits font size 14px */
21 line-height: 1.42857143; /* 20px */
22 resize: vertical;
23}
24
25label {
26 cursor: pointer;
27}
28
29input,
30select {
31 margin: 1px;
32}
33
34textarea.code {
35 padding: 4px 6px 1px 6px;
36}
37
38input[type="text"],
39input[type="password"],
40input[type="color"],
41input[type="date"],
42input[type="datetime"],
43input[type="datetime-local"],
44input[type="email"],
45input[type="month"],
46input[type="number"],
47input[type="search"],
48input[type="tel"],
49input[type="time"],
50input[type="url"],
51input[type="week"],
52select,
53textarea {
54 box-shadow: 0 0 0 transparent;
55 border-radius: 4px;
56 border: 1px solid #7e8993;
57 background-color: #fff;
58 color: #32373c;
59}
60
61input[type="text"],
62input[type="password"],
63input[type="date"],
64input[type="datetime"],
65input[type="datetime-local"],
66input[type="email"],
67input[type="month"],
68input[type="number"],
69input[type="search"],
70input[type="tel"],
71input[type="time"],
72input[type="url"],
73input[type="week"] {
74 padding: 0 8px;
75 /* inherits font size 14px */
76 line-height: 2; /* 28px */
77 /* Only necessary for IE11 */
78 min-height: 30px;
79}
80
81::-webkit-datetime-edit {
82 /* inherits font size 14px */
83 line-height: 1.85714286; /* 26px */
84}
85
86input[type="text"]:focus,
87input[type="password"]:focus,
88input[type="color"]:focus,
89input[type="date"]:focus,
90input[type="datetime"]:focus,
91input[type="datetime-local"]:focus,
92input[type="email"]:focus,
93input[type="month"]:focus,
94input[type="number"]:focus,
95input[type="search"]:focus,
96input[type="tel"]:focus,
97input[type="time"]:focus,
98input[type="url"]:focus,
99input[type="week"]:focus,
100input[type="checkbox"]:focus,
101input[type="radio"]:focus,
102select:focus,
103textarea:focus {
104 border-color: #007cba;
105 box-shadow: 0 0 0 1px #007cba;
106 /* Only visible in Windows High Contrast mode */
107 outline: 2px solid transparent;
108}
109
110/* rtl:ignore */
111input[type="email"],
112input[type="url"] {
113 direction: ltr;
114}
115
116input[type="checkbox"],
117input[type="radio"] {
118 border: 1px solid #7e8993;
119 border-radius: 4px;
120 background: #fff;
121 color: #555;
122 clear: none;
123 cursor: pointer;
124 display: inline-block;
125 line-height: 0;
126 height: 1rem;
127 margin: -0.25rem 0.25rem 0 0;
128 outline: 0;
129 padding: 0 !important;
130 text-align: center;
131 vertical-align: middle;
132 width: 1rem;
133 min-width: 1rem;
134 -webkit-appearance: none;
135 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
136 transition: .05s border-color ease-in-out;
137}
138
139input[type="radio"]:checked + label:before {
140 color: #82878c;
141}
142
143.wp-core-ui input[type="reset"]:hover,
144.wp-core-ui input[type="reset"]:active {
145 color: #00a0d2;
146}
147
148td > input[type="checkbox"],
149.wp-admin p input[type="checkbox"],
150.wp-admin p input[type="radio"] {
151 margin-top: 0;
152}
153
154.wp-admin p label input[type="checkbox"] {
155 margin-top: -4px;
156}
157
158.wp-admin p label input[type="radio"] {
159 margin-top: -2px;
160}
161
162input[type="radio"] {
163 border-radius: 50%;
164 margin-right: 0.25rem;
165 /* 10px not sure if still necessary, comes from the MP6 redesign in r26072 */
166 line-height: 0.71428571;
167}
168
169input[type="checkbox"]:checked::before,
170input[type="radio"]:checked::before {
171 float: left;
172 display: inline-block;
173 vertical-align: middle;
174 width: 1rem;
175 speak: none;
176 -webkit-font-smoothing: antialiased;
177 -moz-osx-font-smoothing: grayscale;
178}
179
180input[type="checkbox"]:checked::before {
181 /* Use the "Yes" SVG Dashicon */
182 content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%231e8cbe%27%2F%3E%3C%2Fsvg%3E");
183 margin: -0.1875rem 0 0 -0.25rem;
184 height: 1.3125rem;
185 width: 1.3125rem;
186}
187
188input[type="radio"]:checked::before {
189 content: "";
190 border-radius: 50%;
191 width: 0.5rem; /* 8px */
192 height: 0.5rem; /* 8px */
193 margin: 0.1875rem; /* 3px */
194 background-color: #1e8cbe;
195 /* 16px not sure if still necessary, comes from the MP6 redesign in r26072 */
196 line-height: 1.14285714;
197}
198
199@-moz-document url-prefix() {
200 input[type="checkbox"],
201 input[type="radio"],
202 .form-table input.tog {
203 margin-bottom: -1px;
204 }
205}
206
207/* Search */
208input[type="search"] {
209 -webkit-appearance: textfield;
210}
211
212input[type="search"]::-webkit-search-decoration {
213 display: none;
214}
215
216.wp-admin input[type="file"] {
217 padding: 3px 0;
218 cursor: pointer;
219}
220
221input.readonly,
222input[readonly],
223textarea.readonly,
224textarea[readonly] {
225 background-color: #eee;
226}
227
228::-webkit-input-placeholder {
229 color: #72777c;
230}
231
232::-moz-placeholder {
233 color: #72777c;
234 opacity: 1;
235}
236
237:-ms-input-placeholder {
238 color: #72777c;
239}
240
241.form-invalid input,
242.form-invalid input:focus,
243.form-invalid select,
244.form-invalid select:focus {
245 border-color: #dc3232 !important;
246 box-shadow: 0 0 2px rgba(204, 0, 0, 0.8);
247}
248
249.form-table .form-required.form-invalid td:after {
250 content: "\f534";
251 font: normal 20px/1 dashicons;
252 color: #dc3232;
253 margin-left: -25px;
254 vertical-align: middle;
255}
256
257/* Adjust error indicator for password layout */
258.form-table .form-required.user-pass1-wrap.form-invalid td:after {
259 content: "";
260}
261
262.form-table .form-required.user-pass1-wrap.form-invalid .password-input-wrapper:after {
263 content: "\f534";
264 font: normal 20px/1 dashicons;
265 color: #dc3232;
266 margin: 0 6px 0 -29px;
267 vertical-align: middle;
268}
269
270.form-input-tip {
271 color: #666;
272}
273
274input:disabled,
275input.disabled,
276select:disabled,
277select.disabled,
278textarea:disabled,
279textarea.disabled {
280 background: rgba(255, 255, 255, 0.5);
281 border-color: rgba(222, 222, 222, 0.75);
282 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
283 color: rgba(51, 51, 51, 0.5);
284}
285
286input[type="file"]:disabled,
287input[type="file"].disabled,
288input[type="range"]:disabled,
289input[type="range"].disabled {
290 background: none;
291 box-shadow: none;
292 cursor: default;
293}
294
295input[type="checkbox"]:disabled,
296input[type="checkbox"].disabled,
297input[type="radio"]:disabled,
298input[type="radio"].disabled,
299input[type="checkbox"]:disabled:checked:before,
300input[type="checkbox"].disabled:checked:before,
301input[type="radio"]:disabled:checked:before,
302input[type="radio"].disabled:checked:before {
303 opacity: 0.7;
304}
305
306/*------------------------------------------------------------------------------
307 2.0 - Forms
308------------------------------------------------------------------------------*/
309
310/* Select styles are based on the default button in buttons.css */
311.wp-admin select {
312 font-size: 13px;
313 line-height: 1.38461538; /* 18px */
314 color: #32373c;
315 border-color: #7e8993;
316 box-shadow: none;
317 border-radius: 3px;
318 padding: 3px 24px 3px 8px;
319 min-height: 28px;
320 max-width: 25rem;
321 vertical-align: middle;
322 -webkit-appearance: none;
323 /* The SVG is arrow-down-alt2 from Dashicons. */
324 background: #fff url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E') no-repeat right 5px top 55%;
325 background-size: 16px 16px;
326 cursor: pointer;
327}
328
329/* Color and font size in the core form tables. */
330.wp-admin .form-table select {
331 font-size: 14px;
332 line-height: 1.28571428; /* 18px */
333 color: #32373c;
334}
335
336.wp-admin select:hover {
337 color: #007cba;
338}
339
340.wp-admin select:focus {
341 border-color: #007cba;
342 color: #016087;
343 box-shadow: 0 0 0 1px #007cba;
344}
345
346.wp-admin select:active {
347 border-color: #999;
348 box-shadow: none;
349}
350
351.wp-admin select.disabled,
352.wp-admin select:disabled {
353 color: #a0a5aa;
354 border-color: #ddd;
355 background-color: #f7f7f7;
356 /* The SVG is arrow-down-alt2 from Dashicons. */
357 background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23a0a5aa%22%2F%3E%3C%2Fsvg%3E');
358 box-shadow: none;
359 text-shadow: 0 1px 0 #fff;
360 cursor: default;
361 transform: none;
362}
363
364/* Reset Firefox inner outline that appears on :focus. */
365/* This ruleset overrides the color change on :focus thus needs to be after select:focus. */
366.wp-admin select:-moz-focusring {
367 color: transparent;
368 text-shadow: 0 0 0 #016087;
369}
370
371/* Remove background focus style from IE11 while keeping focus style available on option elements. */
372.wp-admin select::-ms-value {
373 background: transparent;
374 color: #555;
375}
376
377.wp-admin select:hover::-ms-value {
378 color: #007cba;
379}
380
381.wp-admin select:focus::-ms-value {
382 color: #016087;
383}
384
385.wp-admin select.disabled::-ms-value,
386.wp-admin select:disabled::-ms-value {
387 color: #a0a5aa;
388}
389
390/* Hide the native down arrow for select element on IE. */
391.wp-admin select::-ms-expand {
392 display: none;
393}
394
395.wp-admin .button-cancel {
396 display: inline-block;
397 min-height: 28px;
398 padding: 0 5px;
399 line-height: 2;
400}
401
402.meta-box-sortables select {
403 max-width: 100%;
404}
405
406.misc-pub-post-status select {
407 margin-top: 0;
408}
409
410.wp-admin select[multiple] {
411 height: auto;
412 padding-right: 8px;
413 background: #fff;
414}
415
416.submit {
417 padding: 1.5em 0;
418 margin: 5px 0;
419 border-bottom-left-radius: 3px;
420 border-bottom-right-radius: 3px;
421 border: none;
422}
423
424form p.submit a.cancel:hover {
425 text-decoration: none;
426}
427
428p.submit {
429 text-align: left;
430 max-width: 100%;
431 margin-top: 20px;
432 padding-top: 10px;
433}
434
435.textright p.submit {
436 border: none;
437 text-align: right;
438}
439
440table.form-table + p.submit,
441table.form-table + input + p.submit,
442table.form-table + input + input + p.submit {
443 border-top: none;
444 padding-top: 0;
445}
446
447#minor-publishing-actions input,
448#major-publishing-actions input,
449#minor-publishing-actions .preview {
450 text-align: center;
451}
452
453textarea.all-options,
454input.all-options {
455 width: 250px;
456}
457
458input.large-text,
459textarea.large-text {
460 width: 99%;
461}
462
463.regular-text {
464 width: 25em;
465}
466
467input.small-text {
468 width: 50px;
469 padding: 0 6px;
470}
471
472input[type="number"].small-text {
473 width: 65px;
474}
475
476input.tiny-text {
477 width: 35px;
478}
479
480input[type="number"].tiny-text {
481 width: 45px;
482}
483
484#doaction,
485#doaction2,
486#post-query-submit {
487 margin: 1px 8px 0 0;
488}
489
490.tablenav #changeit,
491.tablenav #delete_all,
492.tablenav #clear-recent-list,
493.wp-filter #delete_all {
494 margin-top: 1px;
495}
496
497.tablenav .actions select {
498 float: left;
499 margin-right: 6px;
500 max-width: 12.5rem;
501}
502
503#timezone_string option {
504 margin-left: 1em;
505}
506
507.wp-hide-pw > .dashicons,
508.wp-cancel-pw > .dashicons {
509 position: relative;
510 top: 3px;
511}
512
513.wp-cancel-pw .dashicons-no {
514 display: none;
515}
516
517label,
518#your-profile label + a {
519 vertical-align: middle;
520}
521
522fieldset label,
523#your-profile label + a {
524 vertical-align: middle;
525}
526
527.options-media-php [for*="_size_"] {
528 min-width: 10em;
529 vertical-align: baseline;
530}
531
532.options-media-php .small-text[name*="_size_"] {
533 margin: 0 0 1em;
534}
535
536#misc-publishing-actions label {
537 vertical-align: baseline;
538}
539
540#pass-strength-result {
541 background-color: #eee;
542 border: 1px solid #ddd;
543 color: #23282d;
544 margin: -1px 1px 5px;
545 padding: 3px 5px;
546 text-align: center;
547 width: 25em;
548 box-sizing: border-box;
549 opacity: 0;
550}
551
552#pass-strength-result.short {
553 background-color: #f1adad;
554 border-color: #e35b5b;
555 opacity: 1;
556}
557
558#pass-strength-result.bad {
559 background-color: #fbc5a9;
560 border-color: #f78b53;
561 opacity: 1;
562}
563
564#pass-strength-result.good {
565 background-color: #ffe399;
566 border-color: #ffc733;
567 opacity: 1;
568}
569
570#pass-strength-result.strong {
571 background-color: #c1e1b9;
572 border-color: #83c373;
573 opacity: 1;
574}
575
576#pass1.short, #pass1-text.short {
577 border-color: #e35b5b;
578}
579
580#pass1.bad, #pass1-text.bad {
581 border-color: #f78b53;
582}
583
584#pass1.good, #pass1-text.good {
585 border-color: #ffc733;
586}
587
588#pass1.strong, #pass1-text.strong {
589 border-color: #83c373;
590}
591
592.pw-weak {
593 display: none;
594}
595
596.indicator-hint {
597 padding-top: 8px;
598}
599
600.wp-pwd [type="text"],
601.wp-pwd [type="password"] {
602 margin-bottom: 0;
603 /* Same height as the buttons */
604 line-height: 20px;
605 min-height: 28px;
606 max-height: 40px;
607}
608
609#pass1-text,
610.show-password #pass1 {
611 display: none;
612}
613
614#pass1-text::-ms-clear {
615 display: none;
616}
617
618.show-password #pass1-text {
619 display: inline-block;
620}
621
622p.search-box {
623 float: right;
624 margin: 0;
625}
626
627.network-admin.themes-php p.search-box {
628 clear: left;
629}
630
631.search-box input[name="s"],
632.tablenav .search-plugins input[name="s"],
633.tagsdiv .newtag {
634 float: left;
635 margin: 0 4px 0 0;
636}
637
638.js.plugins-php .search-box .wp-filter-search {
639 margin: 0;
640 width: 280px;
641}
642
643input[type="text"].ui-autocomplete-loading,
644input[type="email"].ui-autocomplete-loading {
645 background-image: url(../images/loading.gif);
646 background-repeat: no-repeat;
647 background-position: right center;
648 visibility: visible;
649}
650
651input.ui-autocomplete-input.open {
652 border-bottom-color: transparent;
653}
654
655ul#add-to-blog-users {
656 margin: 0 0 0 14px;
657}
658
659.ui-autocomplete {
660 padding: 0;
661 margin: 0;
662 list-style: none;
663 position: absolute;
664 z-index: 10000;
665 border: 1px solid #5b9dd9;
666 box-shadow: 0 1px 2px rgba(30, 140, 190, 0.8);
667 background-color: #fff;
668}
669
670.ui-autocomplete li {
671 margin-bottom: 0;
672 padding: 4px 10px;
673 white-space: nowrap;
674 text-align: left;
675 cursor: pointer;
676}
677
678/* Colors for the wplink toolbar autocomplete. */
679.ui-autocomplete .ui-state-focus {
680 background-color: #ddd;
681}
682
683/* Colors for the tags autocomplete. */
684.wp-tags-autocomplete .ui-state-focus {
685 background-color: #0073aa;
686 color: #fff;
687}
688
689/*------------------------------------------------------------------------------
690 15.0 - Comments Screen
691------------------------------------------------------------------------------*/
692
693.form-table {
694 border-collapse: collapse;
695 margin-top: 0.5em;
696 width: 100%;
697 clear: both;
698}
699
700.form-table,
701.form-table td,
702.form-table th,
703.form-table td p {
704 font-size: 14px;
705}
706
707.form-table td {
708 margin-bottom: 9px;
709 padding: 15px 10px;
710 line-height: 1.3;
711 vertical-align: middle;
712}
713
714.form-table th,
715.form-wrap label {
716 color: #23282d;
717 font-weight: 400;
718 text-shadow: none;
719 vertical-align: baseline;
720}
721
722.form-table th {
723 vertical-align: top;
724 text-align: left;
725 padding: 20px 10px 20px 0;
726 width: 200px;
727 line-height: 1.3;
728 font-weight: 600;
729}
730
731.form-table th.th-full, /* Not used by core. Back-compat for pre-4.8 */
732.form-table .td-full {
733 width: auto;
734 padding: 20px 10px 20px 0;
735 font-weight: 400;
736}
737
738.form-table td p {
739 margin-top: 4px;
740 margin-bottom: 0;
741}
742
743.form-table .date-time-doc {
744 margin-top: 1em;
745}
746
747.form-table p.timezone-info {
748 margin: 1em 0;
749}
750
751.form-table td fieldset label {
752 margin: 0.25em 0 0.5em !important;
753 display: inline-block;
754}
755
756.form-table td fieldset label,
757.form-table td fieldset p,
758.form-table td fieldset li {
759 line-height: 1.4;
760}
761
762.form-table input.tog,
763.form-table input[type="radio"] {
764 margin-top: -4px;
765 margin-right: 4px;
766 float: none;
767}
768
769.form-table .pre {
770 padding: 8px;
771 margin: 0;
772}
773
774table.form-table td .updated {
775 font-size: 13px;
776}
777
778table.form-table td .updated p {
779 font-size: 13px;
780 margin: 0.3em 0;
781}
782
783/*------------------------------------------------------------------------------
784 18.0 - Users
785------------------------------------------------------------------------------*/
786
787#profile-page .form-table textarea {
788 width: 500px;
789 margin-bottom: 6px;
790}
791
792#profile-page .form-table #rich_editing {
793 margin-right: 5px
794}
795
796#your-profile legend {
797 font-size: 22px;
798}
799
800#display_name {
801 width: 15em;
802}
803
804#adduser .form-field input,
805#createuser .form-field input {
806 width: 25em;
807}
808
809.color-option {
810 display: inline-block;
811 width: 24%;
812 padding: 5px 15px 15px;
813 box-sizing: border-box;
814 margin-bottom: 3px;
815}
816
817.color-option:hover,
818.color-option.selected {
819 background: #ddd;
820}
821
822.color-palette {
823 width: 100%;
824 border-spacing: 0;
825 border-collapse: collapse;
826}
827.color-palette td {
828 height: 20px;
829 padding: 0;
830 border: none;
831}
832
833.color-option {
834 cursor: pointer;
835}
836
837/*------------------------------------------------------------------------------
838 19.0 - Tools
839------------------------------------------------------------------------------*/
840
841.tool-box .title {
842 margin: 8px 0;
843 font-size: 18px;
844 font-weight: 400;
845 line-height: 24px;
846}
847
848.label-responsive {
849 vertical-align: middle;
850}
851
852#export-filters p {
853 margin: 0 0 1em;
854}
855
856#export-filters p.submit {
857 margin: 7px 0 5px;
858}
859
860/* Card styles */
861
862.card {
863 position: relative;
864 margin-top: 20px;
865 padding: 0.7em 2em 1em;
866 min-width: 255px;
867 max-width: 520px;
868 border: 1px solid #ccd0d4;
869 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
870 background: #fff;
871 box-sizing: border-box;
872}
873
874/* Press this styles */
875
876.pressthis h4 {
877 margin: 2em 0 1em;
878}
879
880.pressthis textarea {
881 width: 100%;
882 font-size: 1em;
883}
884
885#pressthis-code-wrap {
886 overflow: auto;
887}
888
889.pressthis-bookmarklet-wrapper {
890 margin: 20px 0 8px;
891 vertical-align: top;
892 position: relative;
893 z-index: 1;
894}
895
896.pressthis-bookmarklet,
897.pressthis-bookmarklet:hover,
898.pressthis-bookmarklet:focus,
899.pressthis-bookmarklet:active {
900 display: inline-block;
901 position: relative;
902 cursor: move;
903 color: #32373c;
904 background: #e5e5e5;
905 border-radius: 5px;
906 border: 1px solid #b4b9be;
907 font-style: normal;
908 line-height: 16px;
909 font-size: 14px;
910 text-decoration: none;
911}
912
913.pressthis-bookmarklet:active {
914 outline: none;
915}
916
917.pressthis-bookmarklet:after {
918 content: "";
919 width: 70%;
920 height: 55%;
921 z-index: -1;
922 position: absolute;
923 right: 10px;
924 bottom: 9px;
925 background: transparent;
926 transform: skew(20deg) rotate(6deg);
927 box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6);
928}
929
930.pressthis-bookmarklet:hover:after {
931 transform: skew(20deg) rotate(9deg);
932 box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7);
933}
934
935.pressthis-bookmarklet span {
936 display: inline-block;
937 margin: 0px 0 0;
938 padding: 0px 12px 8px 9px;
939}
940
941.pressthis-bookmarklet span:before {
942 color: #72777c;
943 font: normal 20px/1 dashicons;
944 content: "\f157";
945 position: relative;
946 display: inline-block;
947 top: 4px;
948 margin-right: 4px;
949}
950
951.pressthis-js-toggle {
952 margin-left: 10px;
953 padding: 0;
954 height: auto;
955 vertical-align: top;
956}
957
958/* to override the button class being applied */
959.pressthis-js-toggle.button.button {
960 margin-left: 10px;
961 padding: 0;
962 height: auto;
963 vertical-align: top;
964}
965
966.pressthis-js-toggle .dashicons {
967 margin: 5px 8px 6px 7px;
968 color: #555d66;
969}
970
971/*------------------------------------------------------------------------------
972 20.0 - Settings
973------------------------------------------------------------------------------*/
974
975.timezone-info code {
976 white-space: nowrap;
977}
978
979.defaultavatarpicker .avatar {
980 margin: 2px 0;
981 vertical-align: middle;
982}
983
984.options-general-php .date-time-text {
985 display: inline-block;
986 min-width: 10em;
987}
988
989.options-general-php input.small-text {
990 width: 56px;
991 margin: -2px 0;
992}
993
994.options-general-php .spinner {
995 float: none;
996 margin: -3px 3px 0;
997}
998
999.settings-php .language-install-spinner,
1000.options-general-php .language-install-spinner {
1001 display: inline-block;
1002 float: none;
1003 margin: -3px 5px 0;
1004 vertical-align: middle;
1005}
1006
1007.form-table.permalink-structure .available-structure-tags li {
1008 float: left;
1009 margin-right: 5px;
1010}
1011
1012/*------------------------------------------------------------------------------
1013 21.0 - Network Admin
1014------------------------------------------------------------------------------*/
1015
1016.setup-php textarea {
1017 max-width: 100%;
1018}
1019
1020.form-field #site-address {
1021 max-width: 25em;
1022}
1023
1024.form-field #domain {
1025 max-width: 22em;
1026}
1027
1028.form-field #site-title,
1029.form-field #admin-email,
1030.form-field #path,
1031.form-field #blog_registered,
1032.form-field #blog_last_updated {
1033 max-width: 25em;
1034}
1035
1036.form-field #path {
1037 margin-bottom: 5px;
1038}
1039
1040#search-users,
1041#search-sites {
1042 max-width: 100%;
1043}
1044
1045/*------------------------------------------------------------------------------
1046 Credentials check dialog for Install and Updates
1047------------------------------------------------------------------------------*/
1048
1049.request-filesystem-credentials-dialog {
1050 display: none;
1051 /* The customizer uses visibility: hidden on the body for full-overlays. */
1052 visibility: visible;
1053}
1054
1055.request-filesystem-credentials-dialog .notification-dialog {
1056 top: 10%;
1057 max-height: 85%;
1058}
1059
1060.request-filesystem-credentials-dialog-content {
1061 margin: 25px;
1062}
1063
1064#request-filesystem-credentials-title {
1065 font-size: 1.3em;
1066 margin: 1em 0;
1067}
1068
1069.request-filesystem-credentials-form legend {
1070 font-size: 1em;
1071 padding: 1.33em 0;
1072 font-weight: 600;
1073}
1074
1075.request-filesystem-credentials-form input[type="text"],
1076.request-filesystem-credentials-form input[type="password"] {
1077 display: block;
1078}
1079
1080.request-filesystem-credentials-dialog input[type="text"],
1081.request-filesystem-credentials-dialog input[type="password"] {
1082 width: 100%;
1083}
1084
1085.request-filesystem-credentials-form .field-title {
1086 font-weight: 600;
1087}
1088
1089.request-filesystem-credentials-dialog label[for="hostname"],
1090.request-filesystem-credentials-dialog label[for="public_key"],
1091.request-filesystem-credentials-dialog label[for="private_key"] {
1092 display: block;
1093 margin-bottom: 1em;
1094}
1095
1096.request-filesystem-credentials-dialog .ftp-username,
1097.request-filesystem-credentials-dialog .ftp-password {
1098 float: left;
1099 width: 48%;
1100}
1101
1102.request-filesystem-credentials-dialog .ftp-password {
1103 margin-left: 4%;
1104}
1105
1106.request-filesystem-credentials-dialog .request-filesystem-credentials-action-buttons {
1107 text-align: right;
1108}
1109
1110.request-filesystem-credentials-dialog label[for="ftp"] {
1111 margin-right: 10px;
1112}
1113
1114.request-filesystem-credentials-dialog #auth-keys-desc {
1115 margin-bottom: 0;
1116}
1117
1118#request-filesystem-credentials-dialog .button:not(:last-child) {
1119 margin-right: 10px;
1120}
1121
1122#request-filesystem-credentials-form .cancel-button {
1123 display: none;
1124}
1125
1126#request-filesystem-credentials-dialog .cancel-button {
1127 display: inline;
1128}
1129
1130.request-filesystem-credentials-dialog .ftp-username,
1131.request-filesystem-credentials-dialog .ftp-password {
1132 float: none;
1133 width: auto;
1134}
1135
1136.request-filesystem-credentials-dialog .ftp-username {
1137 margin-bottom: 1em;
1138}
1139
1140.request-filesystem-credentials-dialog .ftp-password {
1141 margin: 0;
1142}
1143
1144.request-filesystem-credentials-dialog .ftp-password em {
1145 color: #888;
1146}
1147
1148.request-filesystem-credentials-dialog label {
1149 display: block;
1150 line-height: 1.5;
1151 margin-bottom: 1em;
1152}
1153
1154.request-filesystem-credentials-form legend {
1155 padding-bottom: 0;
1156}
1157
1158.request-filesystem-credentials-form #ssh-keys legend {
1159 font-size: 1.3em;
1160}
1161
1162.request-filesystem-credentials-form .notice {
1163 margin: 0 0 20px 0;
1164 clear: both;
1165}
1166
1167/*------------------------------------------------------------------------------
1168 Privacy Policy settings screen
1169------------------------------------------------------------------------------*/
1170.tools-privacy-policy-page form {
1171 margin-bottom: 1.3em;
1172}
1173
1174.tools-privacy-policy-page input.button,
1175.tools-privacy-policy-page select {
1176 margin: 0 1px 0 6px;
1177}
1178
1179.tools-privacy-edit {
1180 margin: 1.5em 0;
1181}
1182
1183.tools-privacy-policy-page span {
1184 line-height: 2;
1185}
1186
1187.privacy_requests .column-email {
1188 width: 40%;
1189}
1190
1191.privacy_requests .column-type {
1192 text-align: center;
1193}
1194
1195.privacy_requests thead td:first-child,
1196.privacy_requests tfoot td:first-child {
1197 border-left: 4px solid #fff;
1198}
1199
1200.privacy_requests tbody th {
1201 border-left: 4px solid #fff;
1202 background: #fff;
1203 box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
1204}
1205
1206.privacy_requests .row-actions {
1207 color: #72777c;
1208}
1209
1210.privacy_requests tbody .has-request-results th {
1211 box-shadow: none;
1212}
1213
1214.privacy_requests tbody .request-results th .notice {
1215 margin: 0 0 5px;
1216}
1217
1218.privacy_requests tbody td {
1219 background: #fff;
1220 box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
1221}
1222
1223.privacy_requests tbody .has-request-results td {
1224 box-shadow: none;
1225}
1226
1227.privacy_requests .next_steps .button {
1228 word-break: break-all;
1229 white-space: unset;
1230}
1231
1232.privacy_requests .status-request-confirmed th,
1233.privacy_requests .status-request-confirmed td {
1234 background-color: #f7fcfe;
1235 border-left-color: #00a0d2;
1236}
1237
1238.privacy_requests .status-request-failed th,
1239.privacy_requests .status-request-failed td {
1240 background-color: #fef7f1;
1241 border-left-color: #d64d21;
1242}
1243
1244.privacy_requests .export_personal_data_failed a {
1245 vertical-align: baseline;
1246}
1247
1248.status-label {
1249 font-weight: 600;
1250}
1251
1252.status-label.status-request-pending {
1253 font-weight: 400;
1254 font-style: italic;
1255 color: #6c7781;
1256}
1257
1258.status-label.status-request-failed {
1259 color: #aa0000;
1260 font-weight: 600;
1261}
1262
1263.wp-privacy-request-form {
1264 clear: both;
1265}
1266
1267.wp-privacy-request-form-field {
1268 margin: 1.5em 0;
1269}
1270
1271.wp-privacy-request-form label {
1272 font-weight: 600;
1273 line-height: 1.5;
1274 padding-bottom: .5em;
1275 display: block;
1276}
1277
1278.wp-privacy-request-form input {
1279 margin: 0;
1280}
1281
1282.email-personal-data::before {
1283 display: inline-block;
1284 font: normal 20px/1 dashicons;
1285 margin: 3px 5px 0 -2px;
1286 speak: none;
1287 -webkit-font-smoothing: antialiased;
1288 -moz-osx-font-smoothing: grayscale;
1289 vertical-align: top;
1290}
1291
1292.email-personal-data--sending::before {
1293 color: #f56e28;
1294 content: "\f463";
1295 animation: rotation 2s infinite linear;
1296}
1297
1298.email-personal-data--sent::before {
1299 color: #79ba49;
1300 content: "\f147";
1301}
1302
1303
1304/* =Media Queries
1305-------------------------------------------------------------- */
1306
1307@media screen and (max-width: 782px) {
1308 /* Input Elements */
1309 textarea {
1310 -webkit-appearance: none;
1311 }
1312
1313 input[type="text"],
1314 input[type="password"],
1315 input[type="date"],
1316 input[type="datetime"],
1317 input[type="datetime-local"],
1318 input[type="email"],
1319 input[type="month"],
1320 input[type="number"],
1321 input[type="search"],
1322 input[type="tel"],
1323 input[type="time"],
1324 input[type="url"],
1325 input[type="week"] {
1326 -webkit-appearance: none;
1327 padding: 3px 10px;
1328 }
1329
1330 ::-webkit-datetime-edit {
1331 line-height: 1.875; /* 30px */
1332 }
1333
1334 input[type="checkbox"],
1335 .widefat th input[type="checkbox"],
1336 .widefat thead td input[type="checkbox"],
1337 .widefat tfoot td input[type="checkbox"] {
1338 -webkit-appearance: none;
1339 }
1340
1341 .widefat th input[type="checkbox"],
1342 .widefat thead td input[type="checkbox"],
1343 .widefat tfoot td input[type="checkbox"] {
1344 margin-bottom: 8px;
1345 }
1346
1347 input[type="checkbox"]:checked:before,
1348 .widefat th input[type="checkbox"]:before,
1349 .widefat thead td input[type="checkbox"]:before,
1350 .widefat tfoot td input[type="checkbox"]:before {
1351 width: 1.875rem;
1352 height: 1.875rem;
1353 margin: -0.1875rem -0.3125rem;
1354 }
1355
1356 input[type="radio"],
1357 input[type="checkbox"] {
1358 height: 1.5625rem;
1359 width: 1.5625rem;
1360 }
1361
1362 .wp-admin p input[type="checkbox"],
1363 .wp-admin p input[type="radio"] {
1364 margin-top: -0.1875rem;
1365 }
1366
1367 input[type="radio"]:checked:before {
1368 vertical-align: middle;
1369 width: 0.5625rem;
1370 height: 0.5625rem;
1371 margin: 0.4375rem;
1372 line-height: 0.76190476;
1373 }
1374
1375 .wp-upload-form input[type="submit"] {
1376 margin-top: 10px;
1377 }
1378
1379 .wp-admin select,
1380 .wp-admin .form-table select {
1381 min-height: 40px;
1382 font-size: 16px;
1383 line-height: 1.625; /* 26px */
1384 padding: 5px 24px 5px 8px;
1385 }
1386
1387 .wp-admin .button-cancel {
1388 margin-bottom: 0;
1389 padding: 2px 0;
1390 font-size: 14px;
1391 vertical-align: middle;
1392 }
1393
1394 #adduser .form-field input,
1395 #createuser .form-field input {
1396 width: 100%;
1397 }
1398
1399 .form-table {
1400 box-sizing: border-box;
1401 }
1402
1403 .form-table th,
1404 .form-table td,
1405 .label-responsive {
1406 display: block;
1407 width: auto;
1408 vertical-align: middle;
1409 }
1410
1411 .label-responsive {
1412 margin: 0.5em 0;
1413 }
1414
1415 .export-filters li {
1416 margin-bottom: 0;
1417 }
1418
1419 .form-table .color-palette td {
1420 display: table-cell;
1421 width: 15px;
1422 }
1423
1424 .form-table table.color-palette {
1425 margin-right: 10px;
1426 }
1427
1428 textarea,
1429 input {
1430 font-size: 16px;
1431 }
1432
1433 .form-table td input[type="text"],
1434 .form-table td input[type="email"],
1435 .form-table td input[type="password"],
1436 .form-table td select,
1437 .form-table td textarea,
1438 .form-table span.description,
1439 #profile-page .form-table textarea {
1440 width: 100%;
1441 display: block;
1442 max-width: none;
1443 box-sizing: border-box;
1444 }
1445
1446 .form-table .form-required.form-invalid td:after {
1447 float: right;
1448 margin: -30px 3px 0 0;
1449 }
1450
1451 input[type="text"].small-text,
1452 input[type="search"].small-text,
1453 input[type="password"].small-text,
1454 input[type="number"].small-text,
1455 input[type="number"].small-text,
1456 .form-table input[type="text"].small-text {
1457 width: auto;
1458 max-width: 4.375em; /* 70px, enough for 4 digits to fit comfortably */
1459 display: inline;
1460 padding: 3px 6px;
1461 margin: 0 3px;
1462 }
1463
1464 .form-table input[type='text']#mailserver_port.small-text {
1465 margin-top: 3px;
1466 }
1467
1468 #pass-strength-result {
1469 width: 100%;
1470 box-sizing: border-box;
1471 padding: 8px;
1472 }
1473
1474 p.search-box {
1475 float: none;
1476 position: absolute;
1477 bottom: 0;
1478 width: 98%;
1479 height: 90px;
1480 margin-bottom: 20px;
1481 }
1482
1483 p.search-box input[name="s"] {
1484 float: none;
1485 width: 100%;
1486 margin-bottom: 10px;
1487 vertical-align: middle;
1488 }
1489
1490 p.search-box input[type="submit"] {
1491 margin-bottom: 10px;
1492 }
1493
1494 .form-table span.description {
1495 display: inline;
1496 padding: 4px 0 0;
1497 line-height: 1.4;
1498 font-size: 14px;
1499 }
1500
1501 .form-table th {
1502 padding-top: 10px;
1503 padding-bottom: 0;
1504 border-bottom: 0;
1505 }
1506
1507 .form-table td {
1508 margin-bottom: 0;
1509 padding-bottom: 6px;
1510 padding-top: 4px;
1511 padding-left: 0;
1512 }
1513
1514 .form-table.permalink-structure td code {
1515 margin-left: 32px;
1516 display: inline-block;
1517 }
1518
1519 .form-table.permalink-structure td input[type="text"] {
1520 margin-left: 32px;
1521 margin-top: 4px;
1522 width: 96%;
1523 }
1524
1525 .form-table input.regular-text {
1526 width: 100%;
1527 }
1528
1529 .form-table label {
1530 font-size: 14px;
1531 }
1532
1533 .form-table fieldset label {
1534 display: block;
1535 }
1536
1537 #utc-time,
1538 #local-time {
1539 display: block;
1540 float: none;
1541 margin-top: 0.5em;
1542 }
1543
1544 .form-field #domain {
1545 max-width: none;
1546 }
1547
1548 /* New Password */
1549 .wp-pwd {
1550 position: relative;
1551 }
1552
1553 /* Needs higher specificity than normal input type text and password. */
1554 #profile-page .form-table #pass1 {
1555 padding-right: 90px;
1556 }
1557
1558 .wp-pwd button.button {
1559 background: transparent;
1560 border: 1px solid transparent;
1561 box-shadow: none;
1562 line-height: 2;
1563 margin: 0;
1564 padding: 5px 9px;
1565 position: absolute;
1566 right: 0;
1567 top: 0;
1568 }
1569
1570 .wp-pwd button.wp-hide-pw {
1571 right: 40px;
1572 }
1573
1574 .wp-pwd button.button:hover,
1575 .wp-pwd button.button:focus {
1576 background: transparent;
1577 }
1578
1579 .wp-pwd button.button:active {
1580 background: transparent;
1581 box-shadow: none;
1582 transform: none;
1583 }
1584
1585 .wp-pwd .button .text {
1586 display: none;
1587 }
1588
1589 .wp-pwd [type="text"],
1590 .wp-pwd [type="password"] {
1591 line-height: 2;
1592 }
1593
1594 .wp-cancel-pw .dashicons-no {
1595 display: inline-block;
1596 }
1597
1598 .options-general-php input[type="text"].small-text {
1599 max-width: 6.25em;
1600 margin: 0;
1601 }
1602
1603 /* Privacy Policy settings screen */
1604 .tools-privacy-policy-page form.wp-create-privacy-page {
1605 margin-bottom: 1em;
1606 }
1607
1608 .tools-privacy-policy-page input#set-page,
1609 .tools-privacy-policy-page select {
1610 margin: 10px 0 0;
1611 }
1612
1613 .tools-privacy-policy-page .wp-create-privacy-page span {
1614 display: block;
1615 margin-bottom: 1em;
1616 }
1617
1618 .tools-privacy-policy-page .wp-create-privacy-page .button {
1619 margin-left: 0;
1620 }
1621
1622 .wp-list-table.privacy_requests tr:not(.inline-edit-row):not(.no-items) td.column-primary:not(.check-column) {
1623 display: table-cell;
1624 }
1625
1626 .wp-list-table.privacy_requests.widefat th input,
1627 .wp-list-table.privacy_requests.widefat thead td input {
1628 margin-left: 5px;
1629 }
1630 .regular-text {
1631 max-width: 100%;
1632 }
1633}
1634
1635@media only screen and (max-width: 768px) {
1636 .form-field input[type="text"],
1637 .form-field input[type="email"],
1638 .form-field input[type="password"],
1639 .form-field select,
1640 .form-field textarea {
1641 width: 99%;
1642 }
1643
1644 .form-wrap .form-field {
1645 padding: 0;
1646 }
1647}
1648
1649@media only screen and (max-height: 480px), screen and (max-width: 450px) {
1650 /* Request Credentials / File Editor Warning */
1651 .request-filesystem-credentials-dialog .notification-dialog,
1652 .file-editor-warning .notification-dialog {
1653 width: 100%;
1654 height: 100%;
1655 max-height: 100%;
1656 position: fixed;
1657 top: 0;
1658 margin: 0;
1659 left: 0;
1660 }
1661}
1662
1663/* Smartphone */
1664@media screen and (max-width: 600px) {
1665 /* Color Picker Options */
1666 .color-option {
1667 width: 49%;
1668 }
1669}
1670
1671@media only screen and (max-width: 320px) {
1672 .options-general-php .date-time-text.date-time-custom-text {
1673 min-width: 0;
1674 margin-right: 0.5em;
1675 }
1676}
1677
1678@keyframes rotation {
1679 0% {
1680 transform: rotate(0deg);
1681 }
1682 100% {
1683 transform: rotate(359deg);
1684 }
1685}