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"] {
225 padding: 4px 6px 1px 6px;
232 background-color: #eee;
235 ::-webkit-input-placeholder {
244 :-ms-input-placeholder {
248 .form-invalid input, .form-invalid input:focus,
249 .form-invalid select, .form-invalid select:focus {
250 border-color: #dc3232 !important;
251 -webkit-box-shadow: 0 0 2px rgba( 204, 0, 0, 0.8 );
252 box-shadow: 0 0 2px rgba( 204, 0, 0, 0.8 );
255 .form-table .form-required.form-invalid td:after {
257 font: normal 20px/1 dashicons;
260 vertical-align: middle;
263 /* Adjust error indicator for password layout */
264 .form-table .form-required.user-pass1-wrap.form-invalid td:after {
268 .form-table .form-required.user-pass1-wrap.form-invalid .password-input-wrapper:after {
270 font: normal 20px/1 dashicons;
272 margin: 0 6px 0 -29px;
273 vertical-align: middle;
286 background: rgba( 255, 255, 255, 0.5 );
287 border-color: rgba( 222, 222, 222, 0.75 );
288 -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.04 );
289 box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.04 );
290 color: rgba( 51, 51, 51, 0.5 );
293 input[type="file"]:disabled,
294 input[type="file"].disabled,
295 input[type="range"]:disabled,
296 input[type="range"].disabled {
298 -webkit-box-shadow: none;
302 input[type="checkbox"]:disabled,
303 input[type="checkbox"].disabled,
304 input[type="radio"]:disabled,
305 input[type="radio"].disabled,
306 input[type="checkbox"]:disabled:checked:before,
307 input[type="checkbox"].disabled:checked:before,
308 input[type="radio"]:disabled:checked:before,
309 input[type="radio"].disabled:checked:before {
313 /*------------------------------------------------------------------------------
315 ------------------------------------------------------------------------------*/
322 vertical-align: middle;
325 .wp-admin .button-cancel {
330 .meta-box-sortables select {
334 .wp-admin select[multiple] {
341 -webkit-border-bottom-left-radius: 3px;
342 border-bottom-left-radius: 3px;
343 -webkit-border-bottom-right-radius: 3px;
344 border-bottom-right-radius: 3px;
348 form p.submit a.cancel:hover {
349 text-decoration: none;
359 .textright p.submit {
364 table.form-table + p.submit,
365 table.form-table + input + p.submit,
366 table.form-table + input + input + p.submit {
371 #minor-publishing-actions input,
372 #major-publishing-actions input,
373 #minor-publishing-actions .preview {
377 textarea.all-options,
383 textarea.large-text {
396 input[type="number"].small-text {
404 input[type="number"].tiny-text {
415 .tablenav #delete_all,
416 .tablenav #clear-recent-list,
417 .wp-filter #delete_all {
421 .tablenav .actions select {
427 .ie8 .tablenav .actions select {
431 .ie8 .tablenav .actions select#cat {
435 #timezone_string option {
439 button.wp-hide-pw > .dashicons {
445 #your-profile label + a {
446 vertical-align: middle;
450 #your-profile label + a {
451 vertical-align: middle;
454 .options-media-php label[for*="_size_"],
455 #misc-publishing-actions label {
456 vertical-align: baseline;
459 #misc-publishing-actions label[for="post_status"]:before {
461 display: inline-block;
462 font: normal 20px/1 dashicons;
468 text-decoration: none !important;
470 -webkit-font-smoothing: antialiased;
471 -moz-osx-font-smoothing: grayscale;
474 #pass-strength-result {
475 background-color: #eee;
476 border: 1px solid #ddd;
478 margin: -2px 5px 5px 1px;
482 -webkit-box-sizing: border-box;
483 -moz-box-sizing: border-box;
484 box-sizing: border-box;
488 #pass-strength-result.short {
489 background-color: #f1adad;
490 border-color: #e35b5b;
494 #pass-strength-result.bad {
495 background-color: #fbc5a9;
496 border-color: #f78b53;
500 #pass-strength-result.good {
501 background-color: #ffe399;
502 border-color: #ffc733;
506 #pass-strength-result.strong {
507 background-color: #c1e1b9;
508 border-color: #83c373;
512 #pass1.short, #pass1-text.short {
513 border-color: #e35b5b;
516 #pass1.bad, #pass1-text.bad {
517 border-color: #f78b53;
520 #pass1.good, #pass1-text.good {
521 border-color: #ffc733;
524 #pass1.strong, #pass1-text.strong {
525 border-color: #83c373;
537 .show-password #pass1 {
541 .show-password #pass1-text
543 display: inline-block;
546 .form-table span.description.important {
555 .network-admin.themes-php p.search-box {
559 .search-box input[name="s"],
560 .tablenav .search-plugins input[name="s"],
567 .js.plugins-php .search-box .wp-filter-search {
577 input[type="text"].ui-autocomplete-loading,
578 input[type="email"].ui-autocomplete-loading {
579 background-image: url(../images/loading.gif);
580 background-repeat: no-repeat;
581 background-position: right center;
585 input.ui-autocomplete-input.open {
586 border-bottom-color: transparent;
589 ul#add-to-blog-users {
599 border: 1px solid #5b9dd9;
600 -webkit-box-shadow: 0 1px 2px rgba( 30, 140, 190, 0.8 );
601 box-shadow: 0 1px 2px rgba( 30, 140, 190, 0.8 );
602 background-color: #fff;
605 .ui-autocomplete li {
612 .ui-autocomplete li.ui-state-focus {
613 background-color: #ddd;
617 /*------------------------------------------------------------------------------
618 15.0 - Comments Screen
619 ------------------------------------------------------------------------------*/
622 border-collapse: collapse;
639 vertical-align: middle;
647 vertical-align: baseline;
653 padding: 20px 10px 20px 0;
659 .form-table th.th-full {
669 .form-table .date-time-doc {
673 .form-table p.timezone-info {
677 .form-table td fieldset label {
678 margin: 0.25em 0 0.5em !important;
679 display: inline-block;
682 .form-table td fieldset label,
683 .form-table td fieldset p,
684 .form-table td fieldset li {
688 .form-table input.tog,
689 .form-table input[type="radio"] {
700 table.form-table td .updated {
704 table.form-table td .updated p {
709 /*------------------------------------------------------------------------------
711 ------------------------------------------------------------------------------*/
713 #profile-page .form-table textarea {
718 #profile-page .form-table #rich_editing {
722 #your-profile legend {
730 #adduser .form-field input,
731 #createuser .form-field input {
736 display: inline-block;
738 padding: 5px 15px 15px;
739 -webkit-box-sizing: border-box;
740 -moz-box-sizing: border-box;
741 box-sizing: border-box;
746 .color-option.selected {
753 border-collapse: collapse;
765 /*------------------------------------------------------------------------------
767 ------------------------------------------------------------------------------*/
777 vertical-align: middle;
784 #export-filters p.submit {
793 padding: 0.7em 2em 1em;
796 border: 1px solid #e5e5e5;
797 -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
798 box-shadow: 0 1px 1px rgba(0,0,0,0.04);
802 /* Press this styles */
808 .pressthis textarea {
813 #pressthis-code-wrap {
817 .pressthis-bookmarklet-wrapper {
824 .pressthis-bookmarklet,
825 .pressthis-bookmarklet:hover,
826 .pressthis-bookmarklet:focus,
827 .pressthis-bookmarklet:active {
828 display: inline-block;
833 -webkit-border-radius: 5px;
835 border: 1px solid #b4b9be;
839 text-decoration: none;
842 .pressthis-bookmarklet:active {
846 .pressthis-bookmarklet:after {
854 background: transparent;
855 -webkit-transform: skew(20deg) rotate(6deg);
856 -ms-transform: skew(20deg) rotate(6deg);
857 transform: skew(20deg) rotate(6deg);
858 -webkit-box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6);
859 box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6);
862 .pressthis-bookmarklet:hover:after {
863 -webkit-transform: skew(20deg) rotate(9deg);
864 -ms-transform: skew(20deg) rotate(9deg);
865 transform: skew(20deg) rotate(9deg);
866 -webkit-box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7);
867 box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7);
870 .pressthis-bookmarklet span {
871 display: inline-block;
873 padding: 0px 12px 8px 9px;
876 .pressthis-bookmarklet span:before {
878 font: normal 20px/1 dashicons;
881 display: inline-block;
886 .pressthis-js-toggle {
893 /* to override the button class being applied */
894 .pressthis-js-toggle.button.button {
901 .pressthis-js-toggle .dashicons {
902 margin: 5px 8px 6px 7px;
906 /*------------------------------------------------------------------------------
908 ------------------------------------------------------------------------------*/
910 .timezone-info code {
914 .defaultavatarpicker .avatar {
916 vertical-align: middle;
919 .options-general-php .date-time-text {
920 display: inline-block;
924 .options-general-php input.small-text {
928 .options-general-php .spinner {
933 .settings-php .language-install-spinner,
934 .options-general-php .language-install-spinner {
935 display: inline-block;
938 vertical-align: middle;
941 /*------------------------------------------------------------------------------
943 ------------------------------------------------------------------------------*/
945 .setup-php textarea {
949 .form-field #site-address {
953 .form-field #domain {
957 .form-field #site-title,
958 .form-field #admin-email,
960 .form-field #blog_registered,
961 .form-field #blog_last_updated {
974 /*------------------------------------------------------------------------------
975 Credentials check dialog for Install and Updates
976 ------------------------------------------------------------------------------*/
978 .request-filesystem-credentials-dialog {
982 .request-filesystem-credentials-dialog .notification-dialog {
987 .request-filesystem-credentials-dialog-content {
991 #request-filesystem-credentials-title {
996 .request-filesystem-credentials-form legend {
1002 .request-filesystem-credentials-form input[type="text"],
1003 .request-filesystem-credentials-form input[type="password"] {
1007 .request-filesystem-credentials-dialog input[type="text"],
1008 .request-filesystem-credentials-dialog input[type="password"] {
1012 .request-filesystem-credentials-form .field-title {
1016 .request-filesystem-credentials-dialog label[for="hostname"],
1017 .request-filesystem-credentials-dialog label[for="public_key"],
1018 .request-filesystem-credentials-dialog label[for="private_key"] {
1023 .request-filesystem-credentials-dialog .ftp-username,
1024 .request-filesystem-credentials-dialog .ftp-password {
1029 .request-filesystem-credentials-dialog .ftp-password {
1033 .request-filesystem-credentials-dialog .request-filesystem-credentials-action-buttons {
1037 .request-filesystem-credentials-dialog label[for="ftp"] {
1041 .request-filesystem-credentials-dialog #auth-keys-desc {
1045 #request-filesystem-credentials-dialog .button:not(:last-child) {
1049 #request-filesystem-credentials-form .cancel-button {
1053 #request-filesystem-credentials-dialog .cancel-button {
1057 .request-filesystem-credentials-dialog .ftp-username,
1058 .request-filesystem-credentials-dialog .ftp-password {
1063 .request-filesystem-credentials-dialog .ftp-username {
1067 .request-filesystem-credentials-dialog .ftp-password {
1071 .request-filesystem-credentials-dialog .ftp-password em {
1075 .request-filesystem-credentials-dialog label {
1081 .request-filesystem-credentials-form legend {
1085 .request-filesystem-credentials-form #ssh-keys legend {
1089 .request-filesystem-credentials-form .notice {
1096 -------------------------------------------------------------- */
1098 @media screen and ( max-width: 782px ) {
1099 /* Input Elements */
1101 -webkit-appearance: none;
1105 input[type="email"],
1106 input[type="search"],
1107 input[type="password"],
1108 input[type="number"] {
1109 -webkit-appearance: none;
1113 input[type="number"] {
1118 padding-bottom: 5px;
1122 input[type="checkbox"],
1123 .widefat th input[type="checkbox"],
1124 .widefat thead td input[type="checkbox"],
1125 .widefat tfoot td input[type="checkbox"] {
1126 -webkit-appearance: none;
1130 .widefat th input[type="checkbox"],
1131 .widefat thead td input[type="checkbox"],
1132 .widefat tfoot td input[type="checkbox"] {
1136 input[type="checkbox"]:checked:before,
1137 .widefat th input[type="checkbox"]:before,
1138 .widefat thead td input[type="checkbox"]:before,
1139 .widefat tfoot td input[type="checkbox"]:before {
1140 font: normal 30px/1 dashicons;
1144 input[type="radio"],
1145 input[type="checkbox"] {
1150 .wp-admin p input[type="checkbox"],
1151 .wp-admin p input[type="radio"] {
1155 input[type="radio"]:checked:before {
1156 vertical-align: middle;
1163 .wp-upload-form input[type="submit"] {
1172 .wp-admin .button-cancel {
1177 #adduser .form-field input,
1178 #createuser .form-field input {
1183 -webkit-box-sizing: border-box;
1184 -moz-box-sizing: border-box;
1185 box-sizing: border-box;
1193 vertical-align: middle;
1200 .export-filters li {
1204 .form-table .color-palette td {
1205 display: table-cell;
1209 .form-table table.color-palette {
1218 .form-table td input[type="text"],
1219 .form-table td input[type="email"],
1220 .form-table td input[type="password"],
1221 .form-table td select,
1222 .form-table td textarea,
1223 .form-table span.description,
1224 #profile-page .form-table textarea {
1231 -webkit-box-sizing: border-box;
1232 -moz-box-sizing: border-box;
1233 box-sizing: border-box;
1236 .form-table .form-required.form-invalid td:after {
1238 margin: -30px 3px 0 0;
1241 #wpbody .form-table td select {
1245 input[type="text"].small-text,
1246 input[type="search"].small-text,
1247 input[type="password"].small-text,
1248 input[type="number"].small-text,
1249 input[type="number"].small-text,
1250 .form-table input[type="text"].small-text {
1258 #pass-strength-result {
1260 -webkit-box-sizing: border-box;
1261 -moz-box-sizing: border-box;
1262 box-sizing: border-box;
1272 margin-bottom: 20px;
1275 p.search-box input[name="s"] {
1279 margin-bottom: 10px;
1280 vertical-align: middle;
1281 -webkit-appearance: none;
1284 p.search-box input[type="submit"] {
1285 margin-bottom: 10px;
1288 .form-table span.description {
1303 padding-bottom: 6px;
1308 .form-table.permalink-structure td code {
1312 .form-table.permalink-structure td input[type="text"] {
1318 .form-table input.regular-text {
1326 .form-table fieldset label {
1337 .form-field #domain {
1346 .wp-pwd [type="text"],
1347 .wp-pwd [type="password"] {
1348 padding-right: 40px;
1351 .wp-pwd button.button {
1352 background: transparent;
1354 -webkit-box-shadow: none;
1364 .wp-pwd button.button:hover,
1365 .wp-pwd button.button:focus,
1366 .wp-pwd button.button:active {
1367 background: transparent;
1370 .wp-pwd .button .text {
1374 .options-general-php input[type="text"].small-text {
1380 @media only screen and (max-width: 768px) {
1381 .form-field input[type="text"],
1382 .form-field input[type="email"],
1383 .form-field input[type="password"],
1385 .form-field textarea {
1389 .form-wrap .form-field {
1394 #profile-page .form-table textarea {
1400 @media only screen and (max-height: 480px) {
1401 /* Request Credentials */
1402 .request-filesystem-credentials-dialog .notification-dialog{
1414 @media screen and (max-width: 600px) {
1415 /* Color Picker Options */
1421 @media only screen and (max-width: 320px) {
1422 .options-general-php .date-time-text.date-time-custom-text {
1424 margin-right: 0.5em;