1 /* Include margin and padding in the width calculation of input and textarea. */
4 -webkit-box-sizing: border-box;
5 -moz-box-sizing: border-box;
6 box-sizing: border-box;
10 input[type="password"],
11 input[type="checkbox"],
14 input[type="datetime"],
15 input[type="datetime-local"],
19 input[type="password"],
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;
35 -webkit-transition: 0.05s border-color ease-in-out;
36 transition: 0.05s border-color ease-in-out;
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,
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 );
70 /* Vertically align the number selector with the input. */
71 input[type="number"] {
76 input[type="checkbox"],
78 border: 1px solid #b4b9be;
83 display: inline-block;
88 padding: 0 !important;
90 vertical-align: middle;
93 -webkit-appearance: none;
94 -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.1 );
95 box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.1 );
96 -webkit-transition: .05s border-color ease-in-out;
97 transition: .05s border-color ease-in-out;
100 input[type="radio"]:checked + label:before {
104 .wp-core-ui input[type="reset"]:hover,
105 .wp-core-ui input[type="reset"]:active {
109 td > input[type="checkbox"],
110 .wp-admin p input[type="checkbox"],
111 .wp-admin p input[type="radio"] {
115 .wp-admin p label input[type="checkbox"] {
119 .wp-admin p label input[type="radio"] {
123 input[type="radio"] {
124 -webkit-border-radius: 50%;
130 input[type="checkbox"]:checked:before,
131 input[type="radio"]:checked:before {
133 display: inline-block;
134 vertical-align: middle;
136 font: normal 21px/1 dashicons;
138 -webkit-font-smoothing: antialiased;
139 -moz-osx-font-smoothing: grayscale;
142 input[type="checkbox"]:checked:before {
144 margin: -3px 0 0 -4px;
148 input[type="radio"]:checked:before {
150 text-indent: -9999px;
151 -webkit-border-radius: 50px;
158 background-color: #1e8cbe;
161 @-moz-document url-prefix() {
162 input[type="checkbox"],
164 .form-table input.tog {
170 input[type="search"] {
171 -webkit-appearance: textfield;
174 input[type="search"]::-webkit-search-decoration {
178 .ie8 input[type="password"] {
179 font-family: sans-serif;
186 font-family: inherit;
188 font-weight: inherit;
196 -webkit-border-radius: 0;
197 border-radius: 0; /* Reset mobile webkit's default element styling */
207 .wp-admin input[type="file"] {
227 padding: 4px 6px 1px 6px;
234 background-color: #eee;
237 ::-webkit-input-placeholder {
246 :-ms-input-placeholder {
250 .form-invalid input, .form-invalid input:focus,
251 .form-invalid select, .form-invalid select:focus {
252 border-color: #dc3232 !important;
253 -webkit-box-shadow: 0 0 2px rgba( 204, 0, 0, 0.8 );
254 box-shadow: 0 0 2px rgba( 204, 0, 0, 0.8 );
257 .form-table .form-required.form-invalid td:after {
259 font: normal 20px/1 dashicons;
262 vertical-align: middle;
265 /* Adjust error indicator for password layout */
266 .form-table .form-required.user-pass1-wrap.form-invalid td:after {
270 .form-table .form-required.user-pass1-wrap.form-invalid .password-input-wrapper:after {
272 font: normal 20px/1 dashicons;
274 margin: 0 6px 0 -29px;
275 vertical-align: middle;
288 background: rgba( 255, 255, 255, 0.5 );
289 border-color: rgba( 222, 222, 222, 0.75 );
290 -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.04 );
291 box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.04 );
292 color: rgba( 51, 51, 51, 0.5 );
295 input[type="file"]:disabled,
296 input[type="file"].disabled,
297 input[type="range"]:disabled,
298 input[type="range"].disabled {
300 -webkit-box-shadow: none;
304 input[type="checkbox"]:disabled,
305 input[type="checkbox"].disabled,
306 input[type="radio"]:disabled,
307 input[type="radio"].disabled,
308 input[type="checkbox"]:disabled:checked:before,
309 input[type="checkbox"].disabled:checked:before,
310 input[type="radio"]:disabled:checked:before,
311 input[type="radio"].disabled:checked:before {
315 /*------------------------------------------------------------------------------
317 ------------------------------------------------------------------------------*/
324 vertical-align: middle;
327 .wp-admin .button-cancel {
332 .meta-box-sortables select {
336 .wp-admin select[multiple] {
343 -webkit-border-bottom-left-radius: 3px;
344 border-bottom-left-radius: 3px;
345 -webkit-border-bottom-right-radius: 3px;
346 border-bottom-right-radius: 3px;
350 form p.submit a.cancel:hover {
351 text-decoration: none;
361 .textright p.submit {
366 table.form-table + p.submit,
367 table.form-table + input + p.submit,
368 table.form-table + input + input + p.submit {
373 #minor-publishing-actions input,
374 #major-publishing-actions input,
375 #minor-publishing-actions .preview {
379 textarea.all-options,
385 textarea.large-text {
398 input[type="number"].small-text {
406 input[type="number"].tiny-text {
417 .tablenav #delete_all,
418 .tablenav #clear-recent-list,
419 .wp-filter #delete_all {
423 .tablenav .actions select {
429 .ie8 .tablenav .actions select {
433 .ie8 .tablenav .actions select#cat {
437 #timezone_string option {
441 button.wp-hide-pw > .dashicons {
447 #your-profile label + a {
448 vertical-align: middle;
452 #your-profile label + a {
453 vertical-align: middle;
456 .options-media-php label[for*="_size_"],
457 #misc-publishing-actions label {
458 vertical-align: baseline;
461 #misc-publishing-actions label[for="post_status"]:before {
463 display: inline-block;
464 font: normal 20px/1 dashicons;
470 text-decoration: none !important;
472 -webkit-font-smoothing: antialiased;
473 -moz-osx-font-smoothing: grayscale;
476 #pass-strength-result {
477 background-color: #eee;
478 border: 1px solid #ddd;
480 margin: -2px 5px 5px 1px;
484 -webkit-box-sizing: border-box;
485 -moz-box-sizing: border-box;
486 box-sizing: border-box;
490 #pass-strength-result.short {
491 background-color: #f1adad;
492 border-color: #e35b5b;
496 #pass-strength-result.bad {
497 background-color: #fbc5a9;
498 border-color: #f78b53;
502 #pass-strength-result.good {
503 background-color: #ffe399;
504 border-color: #ffc733;
508 #pass-strength-result.strong {
509 background-color: #c1e1b9;
510 border-color: #83c373;
514 #pass1.short, #pass1-text.short {
515 border-color: #e35b5b;
518 #pass1.bad, #pass1-text.bad {
519 border-color: #f78b53;
522 #pass1.good, #pass1-text.good {
523 border-color: #ffc733;
526 #pass1.strong, #pass1-text.strong {
527 border-color: #83c373;
539 .show-password #pass1 {
543 .show-password #pass1-text
545 display: inline-block;
548 .form-table span.description.important {
557 .network-admin.themes-php p.search-box {
561 .search-box input[name="s"],
562 .tablenav .search-plugins input[name="s"],
569 input[type="text"].ui-autocomplete-loading,
570 input[type="email"].ui-autocomplete-loading {
571 background-image: url(../images/loading.gif);
572 background-repeat: no-repeat;
573 background-position: right center;
577 input.ui-autocomplete-input.open {
578 border-bottom-color: transparent;
581 ul#add-to-blog-users {
591 border: 1px solid #5b9dd9;
592 -webkit-box-shadow: 0 1px 2px rgba( 30, 140, 190, 0.8 );
593 box-shadow: 0 1px 2px rgba( 30, 140, 190, 0.8 );
594 background-color: #fff;
597 .ui-autocomplete li {
604 .ui-autocomplete li.ui-state-focus {
605 background-color: #ddd;
609 /*------------------------------------------------------------------------------
610 15.0 - Comments Screen
611 ------------------------------------------------------------------------------*/
614 border-collapse: collapse;
632 vertical-align: middle;
640 vertical-align: baseline;
646 padding: 20px 10px 20px 0;
652 .form-table th.th-full {
662 .form-table .date-time-doc {
666 .form-table p.timezone-info {
670 .form-table td fieldset label {
671 margin: 0.25em 0 0.5em !important;
672 display: inline-block;
675 .form-table td fieldset label,
676 .form-table td fieldset p,
677 .form-table td fieldset li {
681 .form-table input.tog,
682 .form-table input[type="radio"] {
693 table.form-table td .updated {
697 table.form-table td .updated p {
702 /*------------------------------------------------------------------------------
704 ------------------------------------------------------------------------------*/
706 #profile-page .form-table textarea {
711 #profile-page .form-table #rich_editing {
715 #your-profile legend {
723 #adduser .form-field input,
724 #createuser .form-field input {
729 display: inline-block;
731 padding: 5px 15px 15px;
732 -webkit-box-sizing: border-box;
733 -moz-box-sizing: border-box;
734 box-sizing: border-box;
739 .color-option.selected {
746 border-collapse: collapse;
758 /*------------------------------------------------------------------------------
760 ------------------------------------------------------------------------------*/
770 vertical-align: middle;
777 #export-filters p.submit {
786 padding: 0.7em 2em 1em;
789 border: 1px solid #e5e5e5;
790 -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
791 box-shadow: 0 1px 1px rgba(0,0,0,0.04);
795 /* Press this styles */
801 .pressthis textarea {
806 #pressthis-code-wrap {
810 .pressthis-bookmarklet-wrapper {
817 .pressthis-bookmarklet,
818 .pressthis-bookmarklet:hover,
819 .pressthis-bookmarklet:focus,
820 .pressthis-bookmarklet:active {
821 display: inline-block;
826 -webkit-border-radius: 5px;
828 border: 1px solid #b4b9be;
832 text-decoration: none;
835 .pressthis-bookmarklet:active {
839 .pressthis-bookmarklet:after {
847 background: transparent;
848 -webkit-transform: skew(20deg) rotate(6deg);
849 -ms-transform: skew(20deg) rotate(6deg);
850 transform: skew(20deg) rotate(6deg);
851 -webkit-box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6);
852 box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6);
855 .pressthis-bookmarklet:hover:after {
856 -webkit-transform: skew(20deg) rotate(9deg);
857 -ms-transform: skew(20deg) rotate(9deg);
858 transform: skew(20deg) rotate(9deg);
859 -webkit-box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7);
860 box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7);
863 .pressthis-bookmarklet span {
864 display: inline-block;
866 padding: 0px 12px 8px 9px;
869 .pressthis-bookmarklet span:before {
871 font: normal 20px/1 dashicons;
874 display: inline-block;
879 .pressthis-js-toggle {
886 /* to override the button class being applied */
887 .pressthis-js-toggle.button.button {
894 .pressthis-js-toggle .dashicons {
895 margin: 5px 8px 6px 7px;
899 /*------------------------------------------------------------------------------
901 ------------------------------------------------------------------------------*/
903 .timezone-info code {
907 .defaultavatarpicker .avatar {
909 vertical-align: middle;
912 .options-general-php .date-time-text {
913 display: inline-block;
917 .options-general-php input.small-text {
921 .options-general-php .spinner {
926 .settings-php .language-install-spinner,
927 .options-general-php .language-install-spinner {
928 display: inline-block;
931 vertical-align: middle;
934 /*------------------------------------------------------------------------------
936 ------------------------------------------------------------------------------*/
938 .setup-php textarea {
942 .form-field #site-address {
946 .form-field #domain {
950 .form-field #site-title,
951 .form-field #admin-email,
953 .form-field #blog_registered,
954 .form-field #blog_last_updated {
967 /*------------------------------------------------------------------------------
968 Credentials check dialog for Install and Updates
969 ------------------------------------------------------------------------------*/
971 .request-filesystem-credentials-dialog {
975 .request-filesystem-credentials-dialog .notification-dialog {
980 .request-filesystem-credentials-dialog-content {
984 #request-filesystem-credentials-title {
989 .request-filesystem-credentials-form legend {
995 .request-filesystem-credentials-form input[type="text"],
996 .request-filesystem-credentials-form input[type="password"] {
1000 .request-filesystem-credentials-dialog input[type="text"],
1001 .request-filesystem-credentials-dialog input[type="password"] {
1005 .request-filesystem-credentials-form .field-title {
1009 .request-filesystem-credentials-dialog label[for="hostname"],
1010 .request-filesystem-credentials-dialog label[for="public_key"],
1011 .request-filesystem-credentials-dialog label[for="private_key"] {
1016 .request-filesystem-credentials-dialog .ftp-username,
1017 .request-filesystem-credentials-dialog .ftp-password {
1022 .request-filesystem-credentials-dialog .ftp-password {
1026 .request-filesystem-credentials-dialog .request-filesystem-credentials-action-buttons {
1030 .request-filesystem-credentials-dialog label[for="ftp"] {
1034 #request-filesystem-credentials-dialog .button:not(:last-child) {
1038 #request-filesystem-credentials-form .cancel-button {
1042 #request-filesystem-credentials-dialog .cancel-button {
1048 -------------------------------------------------------------- */
1050 @media screen and ( max-width: 782px ) {
1051 /* Input Elements */
1053 -webkit-appearance: none;
1057 input[type="email"],
1058 input[type="search"],
1059 input[type="password"],
1060 input[type="number"] {
1061 -webkit-appearance: none;
1065 input[type="number"] {
1070 padding-bottom: 5px;
1074 input[type="checkbox"],
1075 .widefat th input[type="checkbox"],
1076 .widefat thead td input[type="checkbox"],
1077 .widefat tfoot td input[type="checkbox"] {
1078 -webkit-appearance: none;
1082 .widefat th input[type="checkbox"],
1083 .widefat thead td input[type="checkbox"],
1084 .widefat tfoot td input[type="checkbox"] {
1088 input[type="checkbox"]:checked:before,
1089 .widefat th input[type="checkbox"]:before,
1090 .widefat thead td input[type="checkbox"]:before,
1091 .widefat tfoot td input[type="checkbox"]:before {
1092 font: normal 30px/1 dashicons;
1096 input[type="radio"],
1097 input[type="checkbox"] {
1102 .wp-admin p input[type="checkbox"],
1103 .wp-admin p input[type="radio"] {
1107 input[type="radio"]:checked:before {
1108 vertical-align: middle;
1115 .wp-upload-form input[type="submit"] {
1124 .wp-admin .button-cancel {
1129 #adduser .form-field input,
1130 #createuser .form-field input {
1135 -webkit-box-sizing: border-box;
1136 -moz-box-sizing: border-box;
1137 box-sizing: border-box;
1145 vertical-align: middle;
1152 .export-filters li {
1156 .form-table .color-palette td {
1157 display: table-cell;
1161 .form-table table.color-palette {
1170 .form-table td input[type="text"],
1171 .form-table td input[type="email"],
1172 .form-table td input[type="password"],
1173 .form-table td select,
1174 .form-table td textarea,
1175 .form-table span.description,
1176 #profile-page .form-table textarea {
1183 -webkit-box-sizing: border-box;
1184 -moz-box-sizing: border-box;
1185 box-sizing: border-box;
1188 .form-table .form-required.form-invalid td:after {
1190 margin: -30px 3px 0 0;
1193 #wpbody .form-table td select {
1197 input[type="text"].small-text,
1198 input[type="search"].small-text,
1199 input[type="password"].small-text,
1200 input[type="number"].small-text,
1201 input[type="number"].small-text,
1202 .form-table input[type="text"].small-text {
1210 #pass-strength-result {
1212 -webkit-box-sizing: border-box;
1213 -moz-box-sizing: border-box;
1214 box-sizing: border-box;
1224 margin-bottom: 20px;
1227 p.search-box input[name="s"] {
1231 margin-bottom: 10px;
1232 vertical-align: middle;
1233 -webkit-appearance: none;
1236 p.search-box input[type="submit"] {
1237 margin-bottom: 10px;
1240 .form-table span.description {
1255 padding-bottom: 6px;
1260 .form-table.permalink-structure td code {
1264 .form-table.permalink-structure td input[type="text"] {
1270 .form-table input.regular-text {
1278 .form-table fieldset label {
1289 .form-field #domain {
1298 .wp-pwd [type="text"],
1299 .wp-pwd [type="password"] {
1300 padding-right: 40px;
1303 .wp-pwd button.button {
1304 background: transparent;
1306 -webkit-box-shadow: none;
1316 .wp-pwd button.button:hover,
1317 .wp-pwd button.button:focus,
1318 .wp-pwd button.button:active {
1319 background: transparent;
1322 .wp-pwd .button .text {
1326 .options-general-php input[type="text"].small-text {
1332 @media only screen and (max-width: 768px) {
1333 .form-field input[type="text"],
1334 .form-field input[type="email"],
1335 .form-field input[type="password"],
1337 .form-field textarea {
1341 .form-wrap .form-field {
1346 #profile-page .form-table textarea {
1352 @media only screen and (max-height: 480px) {
1353 /* Request Credentials */
1354 .request-filesystem-credentials-dialog .notification-dialog{
1366 @media screen and (max-width: 600px) {
1367 /* Color Picker Options */
1373 @media only screen and (max-width: 320px) {
1374 .options-general-php .date-time-text.date-time-custom-text {
1376 margin-right: 0.5em;