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"],
28 border: 1px solid #ddd;
29 -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 );
30 box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 );
31 background-color: #fff;
34 -webkit-transition: 0.05s border-color ease-in-out;
35 transition: 0.05s border-color ease-in-out;
38 input[type="text"]:focus,
39 input[type="password"]:focus,
40 input[type="color"]:focus,
41 input[type="date"]:focus,
42 input[type="datetime"]:focus,
43 input[type="datetime-local"]:focus,
44 input[type="email"]:focus,
45 input[type="month"]:focus,
46 input[type="number"]:focus,
47 input[type="search"]:focus,
48 input[type="tel"]:focus,
49 input[type="text"]:focus,
50 input[type="time"]:focus,
51 input[type="url"]:focus,
52 input[type="week"]:focus,
53 input[type="checkbox"]:focus,
54 input[type="radio"]:focus,
57 border-color: #5b9dd9;
58 -webkit-box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
59 box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
68 /* Vertically align the number selector with the input. */
69 input[type="number"] {
74 input[type="checkbox"],
76 border: 1px solid #b4b9be;
81 display: inline-block;
86 padding: 0 !important;
88 vertical-align: middle;
91 -webkit-appearance: none;
92 -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.1 );
93 box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.1 );
94 -webkit-transition: .05s border-color ease-in-out;
95 transition: .05s border-color ease-in-out;
98 input[type="radio"]:checked + label:before {
102 .wp-core-ui input[type="reset"]:hover,
103 .wp-core-ui input[type="reset"]:active {
107 td > input[type="checkbox"],
108 .wp-admin p input[type="checkbox"],
109 .wp-admin p input[type="radio"] {
113 .wp-admin p label input[type="checkbox"] {
117 .wp-admin p label input[type="radio"] {
121 input[type="radio"] {
122 -webkit-border-radius: 50%;
128 input[type="checkbox"]:checked:before,
129 input[type="radio"]:checked:before {
131 display: inline-block;
132 vertical-align: middle;
134 font: normal 21px/1 dashicons;
136 -webkit-font-smoothing: antialiased;
137 -moz-osx-font-smoothing: grayscale;
140 input[type="checkbox"]:checked:before {
142 margin: -3px 0 0 -4px;
146 input[type="radio"]:checked:before {
148 text-indent: -9999px;
149 -webkit-border-radius: 50px;
156 background-color: #1e8cbe;
159 @-moz-document url-prefix() {
160 input[type="checkbox"],
162 .form-table input.tog {
168 input[type="search"] {
169 -webkit-appearance: textfield;
172 input[type="search"]::-webkit-search-decoration {
176 .ie8 input[type="password"] {
177 font-family: sans-serif;
184 font-family: inherit;
186 font-weight: inherit;
194 -webkit-border-radius: 0;
195 border-radius: 0; /* Reset mobile webkit's default element styling */
205 .wp-admin input[type="file"] {
226 padding: 4px 6px 1px 6px;
233 background-color: #eee;
236 ::-webkit-input-placeholder {
245 :-ms-input-placeholder {
249 .form-invalid input, .form-invalid input:focus,
250 .form-invalid select, .form-invalid select:focus {
251 border-color: #dc3232 !important;
252 -webkit-box-shadow: 0 0 2px rgba( 204, 0, 0, 0.8 );
253 box-shadow: 0 0 2px rgba( 204, 0, 0, 0.8 );
256 .form-table .form-required.form-invalid td:after {
258 font: normal 20px/1 dashicons;
261 vertical-align: middle;
264 /* Adjust error indicator for password layout */
265 .form-table .form-required.user-pass1-wrap.form-invalid td:after {
269 .form-table .form-required.user-pass1-wrap.form-invalid .password-input-wrapper:after {
271 font: normal 20px/1 dashicons;
273 margin: 0 6px 0 -29px;
274 vertical-align: middle;
287 background: rgba( 255, 255, 255, 0.5 );
288 border-color: rgba( 222, 222, 222, 0.75 );
289 -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.04 );
290 box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.04 );
291 color: rgba( 51, 51, 51, 0.5 );
294 input[type="file"]:disabled,
295 input[type="file"].disabled,
296 input[type="range"]:disabled,
297 input[type="range"].disabled {
299 -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 #pass-strength-result {
462 background-color: #eee;
463 border: 1px solid #ddd;
465 margin: -2px 5px 5px 1px;
469 -webkit-box-sizing: border-box;
470 -moz-box-sizing: border-box;
471 box-sizing: border-box;
475 #pass-strength-result.short {
476 background-color: #f1adad;
477 border-color: #e35b5b;
481 #pass-strength-result.bad {
482 background-color: #fbc5a9;
483 border-color: #f78b53;
487 #pass-strength-result.good {
488 background-color: #ffe399;
489 border-color: #ffc733;
493 #pass-strength-result.strong {
494 background-color: #c1e1b9;
495 border-color: #83c373;
499 #pass1.short, #pass1-text.short {
500 border-color: #e35b5b;
503 #pass1.bad, #pass1-text.bad {
504 border-color: #f78b53;
507 #pass1.good, #pass1-text.good {
508 border-color: #ffc733;
511 #pass1.strong, #pass1-text.strong {
512 border-color: #83c373;
524 .show-password #pass1 {
528 .show-password #pass1-text
530 display: inline-block;
533 .form-table span.description.important {
542 .network-admin.themes-php p.search-box {
546 .search-box input[name="s"],
547 .tablenav .search-plugins input[name="s"],
554 .js.plugins-php .search-box .wp-filter-search {
564 input[type="text"].ui-autocomplete-loading,
565 input[type="email"].ui-autocomplete-loading {
566 background-image: url(../images/loading.gif);
567 background-repeat: no-repeat;
568 background-position: right center;
572 input.ui-autocomplete-input.open {
573 border-bottom-color: transparent;
576 ul#add-to-blog-users {
586 border: 1px solid #5b9dd9;
587 -webkit-box-shadow: 0 1px 2px rgba( 30, 140, 190, 0.8 );
588 box-shadow: 0 1px 2px rgba( 30, 140, 190, 0.8 );
589 background-color: #fff;
592 .ui-autocomplete li {
600 /* Colors for the wplink toolbar autocomplete. */
601 .ui-autocomplete .ui-state-focus {
602 background-color: #ddd;
605 /* Colors for the tags autocomplete. */
606 .wp-tags-autocomplete .ui-state-focus {
607 background-color: #0073aa;
611 /*------------------------------------------------------------------------------
612 15.0 - Comments Screen
613 ------------------------------------------------------------------------------*/
616 border-collapse: collapse;
633 vertical-align: middle;
641 vertical-align: baseline;
647 padding: 20px 10px 20px 0;
653 .form-table th.th-full {
663 .form-table .date-time-doc {
667 .form-table p.timezone-info {
671 .form-table td fieldset label {
672 margin: 0.25em 0 0.5em !important;
673 display: inline-block;
676 .form-table td fieldset label,
677 .form-table td fieldset p,
678 .form-table td fieldset li {
682 .form-table input.tog,
683 .form-table input[type="radio"] {
694 table.form-table td .updated {
698 table.form-table td .updated p {
703 /*------------------------------------------------------------------------------
705 ------------------------------------------------------------------------------*/
707 #profile-page .form-table textarea {
712 #profile-page .form-table #rich_editing {
716 #your-profile legend {
724 #adduser .form-field input,
725 #createuser .form-field input {
730 display: inline-block;
732 padding: 5px 15px 15px;
733 -webkit-box-sizing: border-box;
734 -moz-box-sizing: border-box;
735 box-sizing: border-box;
740 .color-option.selected {
747 border-collapse: collapse;
759 /*------------------------------------------------------------------------------
761 ------------------------------------------------------------------------------*/
771 vertical-align: middle;
778 #export-filters p.submit {
787 padding: 0.7em 2em 1em;
790 border: 1px solid #e5e5e5;
791 -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
792 box-shadow: 0 1px 1px rgba(0,0,0,0.04);
796 /* Press this styles */
802 .pressthis textarea {
807 #pressthis-code-wrap {
811 .pressthis-bookmarklet-wrapper {
818 .pressthis-bookmarklet,
819 .pressthis-bookmarklet:hover,
820 .pressthis-bookmarklet:focus,
821 .pressthis-bookmarklet:active {
822 display: inline-block;
827 -webkit-border-radius: 5px;
829 border: 1px solid #b4b9be;
833 text-decoration: none;
836 .pressthis-bookmarklet:active {
840 .pressthis-bookmarklet:after {
848 background: transparent;
849 -webkit-transform: skew(20deg) rotate(6deg);
850 -ms-transform: skew(20deg) rotate(6deg);
851 transform: skew(20deg) rotate(6deg);
852 -webkit-box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6);
853 box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6);
856 .pressthis-bookmarklet:hover:after {
857 -webkit-transform: skew(20deg) rotate(9deg);
858 -ms-transform: skew(20deg) rotate(9deg);
859 transform: skew(20deg) rotate(9deg);
860 -webkit-box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7);
861 box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7);
864 .pressthis-bookmarklet span {
865 display: inline-block;
867 padding: 0px 12px 8px 9px;
870 .pressthis-bookmarklet span:before {
872 font: normal 20px/1 dashicons;
875 display: inline-block;
880 .pressthis-js-toggle {
887 /* to override the button class being applied */
888 .pressthis-js-toggle.button.button {
895 .pressthis-js-toggle .dashicons {
896 margin: 5px 8px 6px 7px;
900 /*------------------------------------------------------------------------------
902 ------------------------------------------------------------------------------*/
904 .timezone-info code {
908 .defaultavatarpicker .avatar {
910 vertical-align: middle;
913 .options-general-php .date-time-text {
914 display: inline-block;
918 .options-general-php input.small-text {
922 .options-general-php .spinner {
927 .settings-php .language-install-spinner,
928 .options-general-php .language-install-spinner {
929 display: inline-block;
932 vertical-align: middle;
935 /*------------------------------------------------------------------------------
937 ------------------------------------------------------------------------------*/
939 .setup-php textarea {
943 .form-field #site-address {
947 .form-field #domain {
951 .form-field #site-title,
952 .form-field #admin-email,
954 .form-field #blog_registered,
955 .form-field #blog_last_updated {
968 /*------------------------------------------------------------------------------
969 Credentials check dialog for Install and Updates
970 ------------------------------------------------------------------------------*/
972 .request-filesystem-credentials-dialog {
976 .request-filesystem-credentials-dialog .notification-dialog {
981 .request-filesystem-credentials-dialog-content {
985 #request-filesystem-credentials-title {
990 .request-filesystem-credentials-form legend {
996 .request-filesystem-credentials-form input[type="text"],
997 .request-filesystem-credentials-form input[type="password"] {
1001 .request-filesystem-credentials-dialog input[type="text"],
1002 .request-filesystem-credentials-dialog input[type="password"] {
1006 .request-filesystem-credentials-form .field-title {
1010 .request-filesystem-credentials-dialog label[for="hostname"],
1011 .request-filesystem-credentials-dialog label[for="public_key"],
1012 .request-filesystem-credentials-dialog label[for="private_key"] {
1017 .request-filesystem-credentials-dialog .ftp-username,
1018 .request-filesystem-credentials-dialog .ftp-password {
1023 .request-filesystem-credentials-dialog .ftp-password {
1027 .request-filesystem-credentials-dialog .request-filesystem-credentials-action-buttons {
1031 .request-filesystem-credentials-dialog label[for="ftp"] {
1035 .request-filesystem-credentials-dialog #auth-keys-desc {
1039 #request-filesystem-credentials-dialog .button:not(:last-child) {
1043 #request-filesystem-credentials-form .cancel-button {
1047 #request-filesystem-credentials-dialog .cancel-button {
1051 .request-filesystem-credentials-dialog .ftp-username,
1052 .request-filesystem-credentials-dialog .ftp-password {
1057 .request-filesystem-credentials-dialog .ftp-username {
1061 .request-filesystem-credentials-dialog .ftp-password {
1065 .request-filesystem-credentials-dialog .ftp-password em {
1069 .request-filesystem-credentials-dialog label {
1075 .request-filesystem-credentials-form legend {
1079 .request-filesystem-credentials-form #ssh-keys legend {
1083 .request-filesystem-credentials-form .notice {
1090 -------------------------------------------------------------- */
1092 @media screen and ( max-width: 782px ) {
1093 /* Input Elements */
1095 -webkit-appearance: none;
1099 input[type="email"],
1100 input[type="search"],
1101 input[type="password"],
1102 input[type="number"] {
1103 -webkit-appearance: none;
1107 input[type="number"] {
1112 padding-bottom: 5px;
1116 input[type="checkbox"],
1117 .widefat th input[type="checkbox"],
1118 .widefat thead td input[type="checkbox"],
1119 .widefat tfoot td input[type="checkbox"] {
1120 -webkit-appearance: none;
1124 .widefat th input[type="checkbox"],
1125 .widefat thead td input[type="checkbox"],
1126 .widefat tfoot td input[type="checkbox"] {
1130 input[type="checkbox"]:checked:before,
1131 .widefat th input[type="checkbox"]:before,
1132 .widefat thead td input[type="checkbox"]:before,
1133 .widefat tfoot td input[type="checkbox"]:before {
1134 font: normal 30px/1 dashicons;
1138 input[type="radio"],
1139 input[type="checkbox"] {
1144 .wp-admin p input[type="checkbox"],
1145 .wp-admin p input[type="radio"] {
1149 input[type="radio"]:checked:before {
1150 vertical-align: middle;
1157 .wp-upload-form input[type="submit"] {
1166 .wp-admin .button-cancel {
1171 #adduser .form-field input,
1172 #createuser .form-field input {
1177 -webkit-box-sizing: border-box;
1178 -moz-box-sizing: border-box;
1179 box-sizing: border-box;
1187 vertical-align: middle;
1194 .export-filters li {
1198 .form-table .color-palette td {
1199 display: table-cell;
1203 .form-table table.color-palette {
1212 .form-table td input[type="text"],
1213 .form-table td input[type="email"],
1214 .form-table td input[type="password"],
1215 .form-table td select,
1216 .form-table td textarea,
1217 .form-table span.description,
1218 #profile-page .form-table textarea {
1225 -webkit-box-sizing: border-box;
1226 -moz-box-sizing: border-box;
1227 box-sizing: border-box;
1230 .form-table .form-required.form-invalid td:after {
1232 margin: -30px 3px 0 0;
1235 #wpbody .form-table td select {
1239 input[type="text"].small-text,
1240 input[type="search"].small-text,
1241 input[type="password"].small-text,
1242 input[type="number"].small-text,
1243 input[type="number"].small-text,
1244 .form-table input[type="text"].small-text {
1252 #pass-strength-result {
1254 -webkit-box-sizing: border-box;
1255 -moz-box-sizing: border-box;
1256 box-sizing: border-box;
1266 margin-bottom: 20px;
1269 p.search-box input[name="s"] {
1273 margin-bottom: 10px;
1274 vertical-align: middle;
1275 -webkit-appearance: none;
1278 p.search-box input[type="submit"] {
1279 margin-bottom: 10px;
1282 .form-table span.description {
1297 padding-bottom: 6px;
1302 .form-table.permalink-structure td code {
1306 .form-table.permalink-structure td input[type="text"] {
1312 .form-table input.regular-text {
1320 .form-table fieldset label {
1331 .form-field #domain {
1340 .wp-pwd [type="text"],
1341 .wp-pwd [type="password"] {
1342 padding-right: 40px;
1345 .wp-pwd button.button {
1346 background: transparent;
1348 -webkit-box-shadow: none;
1358 .wp-pwd button.button:hover,
1359 .wp-pwd button.button:focus,
1360 .wp-pwd button.button:active {
1361 background: transparent;
1364 .wp-pwd .button .text {
1368 .options-general-php input[type="text"].small-text {
1374 @media only screen and (max-width: 768px) {
1375 .form-field input[type="text"],
1376 .form-field input[type="email"],
1377 .form-field input[type="password"],
1379 .form-field textarea {
1383 .form-wrap .form-field {
1388 #profile-page .form-table textarea {
1394 @media only screen and (max-height: 480px) {
1395 /* Request Credentials */
1396 .request-filesystem-credentials-dialog .notification-dialog{
1408 @media screen and (max-width: 600px) {
1409 /* Color Picker Options */
1415 @media only screen and (max-width: 320px) {
1416 .options-general-php .date-time-text.date-time-custom-text {
1418 margin-right: 0.5em;