wp-admin/css/forms.css

   1 /* Include margin and padding in the width calculation of input and textarea. */
   2 input,
   3 textarea {
   4         -webkit-box-sizing: border-box;
   5         -moz-box-sizing: border-box;
   6         box-sizing: border-box;
   7 }
   8
   9 input[type="text"],
  10 input[type="password"],
  11 input[type="checkbox"],
  12 input[type="color"],
  13 input[type="date"],
  14 input[type="datetime"],
  15 input[type="datetime-local"],
  16 input[type="email"],
  17 input[type="month"],
  18 input[type="number"],
  19 input[type="password"],
  20 input[type="search"],
  21 input[type="radio"],
  22 input[type="tel"],
  23 input[type="text"],
  24 input[type="time"],
  25 input[type="url"],
  26 input[type="week"],
  27 select,
  28 textarea {
  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;
  33         color: #32373c;
  34         outline: none;
  35         -webkit-transition: 0.05s border-color ease-in-out;
  36         transition: 0.05s border-color ease-in-out;
  37 }
  38
  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,
  57 select:focus,
  58 textarea: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 );
  62 }
  63
  64 /* rtl:ignore */
  65 input[type="email"],
  66 input[type="url"] {
  67         direction: ltr;
  68 }
  69
  70 input[type="checkbox"],
  71 input[type="radio"] {
  72         border: 1px solid #b4b9be;
  73         background: #fff;
  74         color: #555;
  75         clear: none;
  76         cursor: pointer;
  77         display: inline-block;
  78         line-height: 0;
  79         height: 16px;
  80         margin: -4px 4px 0 0;
  81         outline: 0;
  82         padding: 0 !important;
  83         text-align: center;
  84         vertical-align: middle;
  85         width: 16px;
  86         min-width: 16px;
  87         -webkit-appearance: none;
  88         -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.1 );
  89         box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.1 );
  90         -webkit-transition: .05s border-color ease-in-out;
  91         transition: .05s border-color ease-in-out;
  92 }
  93
  94 input[type="radio"]:checked + label:before {
  95         color: #82878c;
  96 }
  97
  98 .wp-core-ui input[type="reset"]:hover,
  99 .wp-core-ui input[type="reset"]:active {
 100         color: #00a0d2;
 101 }
 102
 103 td > input[type="checkbox"],
 104 .wp-admin p input[type="checkbox"],
 105 .wp-admin p input[type="radio"] {
 106         margin-top: 0;
 107 }
 108
 109 .wp-admin p label input[type="checkbox"] {
 110         margin-top: -4px;
 111 }
 112
 113 .wp-admin p label input[type="radio"] {
 114         margin-top: -2px;
 115 }
 116
 117 input[type="radio"] {
 118         -webkit-border-radius: 50%;
 119         border-radius: 50%;
 120         margin-right: 4px;
 121         line-height: 10px;
 122 }
 123
 124 input[type="checkbox"]:checked:before,
 125 input[type="radio"]:checked:before {
 126         float: left;
 127         display: inline-block;
 128         vertical-align: middle;
 129         width: 16px;
 130         font: normal 21px/1 'dashicons';
 131         speak: none;
 132         -webkit-font-smoothing: antialiased;
 133         -moz-osx-font-smoothing: grayscale;
 134 }
 135
 136 input[type="checkbox"]:checked:before {
 137         content: '\f147';
 138         margin: -3px 0 0 -4px;
 139         color: #1e8cbe;
 140 }
 141
 142 input[type="radio"]:checked:before {
 143         content: '\2022';
 144         text-indent: -9999px;
 145         -webkit-border-radius: 50px;
 146         border-radius: 50px;
 147         font-size: 24px;
 148         width: 6px;
 149         height: 6px;
 150         margin: 4px;
 151         line-height: 16px;
 152         background-color: #1e8cbe;
 153 }
 154
 155 @-moz-document url-prefix() {
 156         input[type="checkbox"],
 157         input[type="radio"],
 158         .form-table input.tog {
 159                 margin-bottom: -1px;
 160         }
 161 }
 162
 163 /* Search */
 164 input[type="search"] {
 165         -webkit-appearance: textfield;
 166 }
 167
 168 input[type="search"]::-webkit-search-decoration {
 169         display: none;
 170 }
 171
 172 .ie8 input[type="password"] {
 173         font-family: sans-serif;
 174 }
 175
 176 textarea,
 177 input,
 178 select,
 179 button {
 180         font-family: inherit;
 181         font-size: inherit;
 182         font-weight: inherit;
 183 }
 184
 185 textarea,
 186 input,
 187 select {
 188         font-size: 14px;
 189         padding: 3px 5px;
 190         -webkit-border-radius: 0;
 191         border-radius: 0; /* Reset mobile webkit's default element styling */
 192 }
 193
 194 textarea {
 195         overflow: auto;
 196         padding: 2px 6px;
 197         line-height: 1.4;
 198 }
 199
 200 .wp-admin input[type="file"] {
 201         padding: 3px 0;
 202 }
 203
 204 label {
 205         cursor: pointer;
 206 }
 207
 208 input,
 209 select {
 210         margin: 1px;
 211         padding: 3px 5px;
 212 }
 213
 214 input.code {
 215         padding-top: 6px;
 216 }
 217
 218 textarea.code {
 219         line-height: 1.4;
 220         padding: 4px 6px 1px 6px;
 221 }
 222
 223 input.readonly,
 224 input[readonly],
 225 textarea.readonly,
 226 textarea[readonly] {
 227         background-color: #eee;
 228 }
 229
 230 :-moz-placeholder,
 231 .wp-core-ui :-moz-placeholder {
 232    color: #a9a9a9;
 233 }
 234
 235 .form-invalid input, .form-invalid input:focus,
 236 .form-invalid select, .form-invalid select:focus {
 237         border-color: #dc3232 !important;
 238         -webkit-box-shadow: 0 0 2px rgba( 204, 0, 0, 0.8 );
 239         box-shadow: 0 0 2px rgba( 204, 0, 0, 0.8 );
 240 }
 241
 242 .form-table .form-required.form-invalid td:after {
 243         content: '\f534';
 244         font: normal 20px/1 dashicons;
 245         color: #dc3232;
 246         margin-left: -25px;
 247         vertical-align: middle;
 248 }
 249
 250 .form-input-tip {
 251         color: #666;
 252 }
 253
 254 input:disabled,
 255 input.disabled,
 256 select:disabled,
 257 select.disabled,
 258 textarea:disabled,
 259 textarea.disabled {
 260         background: rgba( 255, 255, 255, 0.5 );
 261         border-color: rgba( 222, 222, 222, 0.75 );
 262         -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.04 );
 263         box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.04 );
 264         color: rgba( 51, 51, 51, 0.5 );
 265 }
 266
 267 input[type="file"]:disabled,
 268 input[type="file"].disabled,
 269 input[type="range"]:disabled,
 270 input[type="range"].disabled {
 271         background: none;
 272         -webkit-box-shadow: none;
 273         box-shadow: none;
 274 }
 275
 276 input[type="checkbox"]:disabled,
 277 input[type="checkbox"].disabled,
 278 input[type="radio"]:disabled,
 279 input[type="radio"].disabled,
 280 input[type="checkbox"]:disabled:checked:before,
 281 input[type="checkbox"].disabled:checked:before,
 282 input[type="radio"]:disabled:checked:before,
 283 input[type="radio"].disabled:checked:before {
 284         opacity: 0.7;
 285 }
 286
 287 /*------------------------------------------------------------------------------
 288   2.0 - Forms
 289 ------------------------------------------------------------------------------*/
 290
 291
 292 .wp-admin select {
 293         padding: 2px;
 294         line-height: 28px;
 295         height: 28px;
 296         vertical-align: middle;
 297 }
 298
 299 .wp-admin .button-cancel {
 300         padding: 0 5px;
 301         line-height: 2;
 302 }
 303
 304 .meta-box-sortables select {
 305         max-width: 100%;
 306 }
 307
 308 .wp-admin select[multiple] {
 309         height: auto;
 310 }
 311
 312 .submit {
 313         padding: 1.5em 0;
 314         margin: 5px 0;
 315         -webkit-border-bottom-left-radius: 3px;
 316         border-bottom-left-radius: 3px;
 317         -webkit-border-bottom-right-radius: 3px;
 318         border-bottom-right-radius: 3px;
 319         border: none;
 320 }
 321
 322 form p.submit a.cancel:hover {
 323         text-decoration: none;
 324 }
 325
 326 p.submit {
 327         text-align: left;
 328         max-width: 100%;
 329         margin-top: 20px;
 330         padding-top: 10px;
 331 }
 332
 333 .textright p.submit {
 334         border: none;
 335         text-align: right;
 336 }
 337
 338 table.form-table + p.submit,
 339 table.form-table + input + p.submit,
 340 table.form-table + input + input + p.submit {
 341         border-top: none;
 342         padding-top: 0;
 343 }
 344
 345 #minor-publishing-actions input,
 346 #major-publishing-actions input,
 347 #minor-publishing-actions .preview {
 348         text-align: center;
 349 }
 350
 351 textarea.all-options,
 352 input.all-options {
 353         width: 250px;
 354 }
 355
 356 input.large-text,
 357 textarea.large-text {
 358         width: 99%;
 359 }
 360
 361 input.regular-text {
 362         width: 25em;
 363 }
 364
 365 input.small-text {
 366         width: 50px;
 367         padding: 1px 6px;
 368 }
 369
 370 input[type="number"].small-text {
 371         width: 65px;
 372 }
 373
 374 #doaction,
 375 #doaction2,
 376 #post-query-submit {
 377         margin: 1px 8px 0 0;
 378 }
 379
 380 .tablenav #changeit,
 381 .tablenav #delete_all,
 382 .tablenav #clear-recent-list,
 383 .wp-filter #delete_all {
 384         margin-top: 1px;
 385 }
 386
 387 .tablenav .actions select {
 388         float: left;
 389         margin-right: 6px;
 390         max-width: 200px;
 391 }
 392
 393 .ie8 .tablenav .actions select {
 394         width: 155px;
 395 }
 396
 397 .ie8 .tablenav .actions select#cat {
 398         width: 200px;
 399 }
 400
 401 #timezone_string option {
 402         margin-left: 1em;
 403 }
 404
 405 #upload-form label {
 406         color: #777;
 407 }
 408
 409 button.wp-hide-pw > .dashicons {
 410         position: relative;
 411         top: 3px;
 412 }
 413
 414 label,
 415 #your-profile label + a {
 416         vertical-align: middle;
 417 }
 418
 419 fieldset label,
 420 #your-profile label + a {
 421         vertical-align: middle;
 422 }
 423
 424 .options-media-php label[for*="_size_"],
 425 #misc-publishing-actions label {
 426         vertical-align: baseline;
 427 }
 428
 429 #misc-publishing-actions label[for="post_status"]:before {
 430         content: '\f173';
 431         display: inline-block;
 432         font: normal 20px/1 'dashicons';
 433         speak: none;
 434         left: -1px;
 435         padding: 0 5px 0 0;
 436         position: relative;
 437         top: 0;
 438         text-decoration: none !important;
 439         vertical-align: top;
 440         -webkit-font-smoothing: antialiased;
 441         -moz-osx-font-smoothing: grayscale;
 442 }
 443
 444 #pass-strength-result {
 445         background-color: #eee;
 446         border: 1px solid #ddd;
 447         color: #23282d;
 448         margin: -2px 5px 5px 1px;
 449         padding: 3px 5px;
 450         text-align: center;
 451         width: 25em;
 452         -webkit-box-sizing: border-box;
 453         -moz-box-sizing: border-box;
 454         box-sizing: border-box;
 455         opacity: 0;
 456 }
 457
 458 #pass-strength-result.short {
 459         background-color: #f1adad;
 460         border-color: #e35b5b;
 461         opacity: 1;
 462 }
 463
 464 #pass-strength-result.bad {
 465         background-color: #fbc5a9;
 466         border-color: #f78b53;
 467         opacity: 1;
 468 }
 469
 470 #pass-strength-result.good {
 471         background-color: #ffe399;
 472         border-color: #ffc733;
 473         opacity: 1;
 474 }
 475
 476 #pass-strength-result.strong {
 477         background-color: #c1e1b9;
 478         border-color: #83c373;
 479         opacity: 1;
 480 }
 481
 482 #pass1.short, #pass1-text.short {
 483         border-color: #e35b5b;
 484 }
 485
 486 #pass1.bad, #pass1-text.bad {
 487         border-color: #f78b53;
 488 }
 489
 490 #pass1.good, #pass1-text.good {
 491         border-color: #ffc733;
 492 }
 493
 494 #pass1.strong, #pass1-text.strong {
 495         border-color: #83c373;
 496 }
 497
 498 .pw-weak {
 499         display:none;
 500 }
 501
 502 .indicator-hint {
 503         padding-top: 8px;
 504 }
 505
 506 #pass1-text,
 507 .show-password #pass1 {
 508         display: none;
 509 }
 510
 511 .show-password #pass1-text
 512 {
 513         display: inline-block;
 514 }
 515
 516 .form-table span.description.important {
 517         font-size: 12px;
 518 }
 519
 520 p.search-box {
 521         float: right;
 522         margin: 0;
 523 }
 524
 525 .network-admin.themes-php p.search-box {
 526         clear: left;
 527 }
 528
 529 .search-box input[name="s"],
 530 .tablenav .search-plugins input[name="s"],
 531 .tagsdiv .newtag {
 532         float: left;
 533         height: 28px;
 534         margin: 0 4px 0 0;
 535 }
 536
 537 input[type="text"].ui-autocomplete-loading,
 538 input[type="email"].ui-autocomplete-loading {
 539         background-image: url(../images/loading.gif);
 540         background-repeat: no-repeat;
 541         background-position: right center;
 542         visibility: visible;
 543 }
 544
 545 input.ui-autocomplete-input.open {
 546         border-bottom-color: transparent;
 547 }
 548
 549 ul#add-to-blog-users {
 550         margin: 0 0 0 14px;
 551 }
 552
 553 .ui-autocomplete {
 554         padding: 0;
 555         margin: 0;
 556         list-style: none;
 557         position: absolute;
 558         z-index: 10000;
 559         border: 1px solid #5b9dd9;
 560         -webkit-box-shadow: 0 1px 2px rgba( 30, 140, 190, 0.8 );
 561         box-shadow: 0 1px 2px rgba( 30, 140, 190, 0.8 );
 562         background-color: #fff;
 563 }
 564
 565 .ui-autocomplete li {
 566         margin-bottom: 0;
 567         padding: 4px 10px;
 568         white-space: nowrap;
 569         text-align: left;
 570 }
 571
 572 .ui-autocomplete li.ui-state-focus {
 573         background-color: #ddd;
 574         cursor: pointer;
 575 }
 576
 577 /*------------------------------------------------------------------------------
 578   15.0 - Comments Screen
 579 ------------------------------------------------------------------------------*/
 580
 581 .form-table {
 582         border-collapse: collapse;
 583         margin-top: 0.5em;
 584         width: 100%;
 585         clear: both;
 586 }
 587
 588 .form-table,
 589 .form-table td,
 590 .form-table th,
 591 .form-table td p,
 592 .form-wrap label {
 593         font-size: 14px;
 594 }
 595
 596 .form-table td {
 597         margin-bottom: 9px;
 598         padding: 15px 10px;
 599         line-height: 1.3;
 600         vertical-align: middle;
 601 }
 602
 603 .form-table th,
 604 .form-wrap label {
 605         color: #23282d;
 606         font-weight: normal;
 607         text-shadow: none;
 608         vertical-align: baseline;
 609 }
 610
 611 .form-table th {
 612         vertical-align: top;
 613         text-align: left;
 614         padding: 20px 10px 20px 0;
 615         width: 200px;
 616         line-height: 1.3;
 617         font-weight: 600;
 618 }
 619
 620 .form-table th.th-full {
 621         width: auto;
 622         font-weight: 400;
 623 }
 624
 625 .form-table td p {
 626         margin-top: 4px;
 627         margin-bottom: 0;
 628 }
 629
 630 .form-table td fieldset label {
 631         margin: 0.25em 0 0.5em !important;
 632         display: inline-block;
 633 }
 634
 635 .form-table td fieldset label,
 636 .form-table td fieldset p,
 637 .form-table td fieldset li {
 638         line-height: 1.4em;
 639 }
 640
 641 .form-table input.tog,
 642 .form-table input[type="radio"] {
 643         margin-top: -4px;
 644         margin-right: 4px;
 645         float: none;
 646 }
 647
 648 .form-table .pre {
 649         padding: 8px;
 650         margin: 0;
 651 }
 652
 653 table.form-table td .updated {
 654         font-size: 13px;
 655 }
 656
 657 table.form-table td .updated p {
 658         font-size: 13px;
 659         margin: 0.3em 0;
 660 }
 661
 662 /*------------------------------------------------------------------------------
 663   18.0 - Users
 664 ------------------------------------------------------------------------------*/
 665
 666 #profile-page .form-table textarea {
 667         width: 500px;
 668         margin-bottom: 6px;
 669 }
 670
 671 #profile-page .form-table #rich_editing {
 672         margin-right: 5px
 673 }
 674
 675 #your-profile legend {
 676         font-size: 22px;
 677 }
 678
 679 #display_name {
 680         width: 15em;
 681 }
 682
 683 #adduser .form-field input,
 684 #createuser .form-field input {
 685         width: 25em;
 686 }
 687
 688 .color-option {
 689         display: inline-block;
 690         width: 24%;
 691         padding: 5px 15px 15px;
 692         -webkit-box-sizing: border-box;
 693         -moz-box-sizing: border-box;
 694         box-sizing: border-box;
 695         margin-bottom: 3px;
 696 }
 697
 698 .color-option:hover,
 699 .color-option.selected {
 700         background: #ddd;
 701 }
 702
 703 .color-palette {
 704         width: 100%;
 705         border-spacing: 0;
 706         border-collapse: collapse;
 707 }
 708 .color-palette td {
 709         height: 20px;
 710         padding: 0;
 711         border: none;
 712 }
 713
 714 .color-option {
 715         cursor: pointer;
 716 }
 717
 718 /*------------------------------------------------------------------------------
 719   19.0 - Tools
 720 ------------------------------------------------------------------------------*/
 721
 722 .tool-box .title {
 723         margin: 8px 0;
 724         font-size: 18px;
 725         font-weight: normal;
 726         line-height: 24px;
 727 }
 728
 729 /* Card styles */
 730
 731 .card {
 732         position: relative;
 733         margin-top: 20px;
 734         padding: 0.7em 2em 1em;
 735         min-width: 255px;
 736         max-width: 520px;
 737         border: 1px solid #e5e5e5;
 738         -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
 739         box-shadow: 0 1px 1px rgba(0,0,0,0.04);
 740         background: #fff;
 741 }
 742
 743 /* Press this styles */
 744
 745 .pressthis h4 {
 746         margin: 2em 0 1em;
 747 }
 748
 749 .pressthis textarea {
 750         width: 100%;
 751         font-size: 1em;
 752 }
 753
 754 #pressthis-code-wrap {
 755         overflow: auto;
 756 }
 757
 758 .pressthis-bookmarklet-wrapper {
 759         margin: 20px 0 8px;
 760         vertical-align: top;
 761         position: relative;
 762         z-index: 1;
 763 }
 764
 765 .pressthis-bookmarklet,
 766 .pressthis-bookmarklet:hover,
 767 .pressthis-bookmarklet:focus,
 768 .pressthis-bookmarklet:active {
 769         display: inline-block;
 770         position: relative;
 771         cursor: move;
 772         color: #32373c;
 773         background: #e6e6e6;
 774         -webkit-border-radius: 5px;
 775         border-radius: 5px;
 776         border: 1px solid #b4b4b4;
 777         font-style: normal;
 778         line-height: 16px;
 779         font-size: 14px;
 780         text-decoration: none;
 781 }
 782
 783 .pressthis-bookmarklet:active {
 784         outline: none;
 785 }
 786
 787 .pressthis-bookmarklet:after {
 788         content: '';
 789         width: 70%;
 790         height: 55%;
 791         z-index: -1;
 792         position: absolute;
 793         right: 10px;
 794         bottom: 9px;
 795         background: transparent;
 796         -webkit-transform: skew(20deg) rotate(6deg);
 797         -ms-transform: skew(20deg) rotate(6deg);
 798         transform: skew(20deg) rotate(6deg);
 799         -webkit-box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6);
 800         box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6);
 801 }
 802
 803 .pressthis-bookmarklet:hover:after {
 804         -webkit-transform: skew(20deg) rotate(9deg);
 805         -ms-transform: skew(20deg) rotate(9deg);
 806         transform: skew(20deg) rotate(9deg);
 807         -webkit-box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7);
 808         box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7);
 809 }
 810
 811 .pressthis-bookmarklet span {
 812         display: inline-block;
 813         margin: 0px 0 0;
 814         padding: 0px 12px 8px 9px;
 815 }
 816
 817 .pressthis-bookmarklet span:before {
 818         color: #777;
 819         font: normal 20px/1 'dashicons';
 820         content:'\f157';
 821         position: relative;
 822         display: inline-block;
 823         top: 4px;
 824         margin-right: 4px;
 825 }
 826
 827 .pressthis-js-toggle {
 828         margin-left: 10px;
 829         padding: 0;
 830         height: auto;
 831         vertical-align: top;
 832 }
 833
 834 .pressthis-js-toggle .dashicons {
 835         margin: 5px 8px 6px 7px;
 836         color: #777;
 837 }
 838
 839 /* to override the button class being applied */
 840 .pressthis-js-toggle.button.button {
 841         margin-left: 10px;
 842         padding: 0;
 843         height: auto;
 844         vertical-align: top;
 845 }
 846
 847 .pressthis-js-toggle .dashicons {
 848         margin: 5px 8px 6px 7px;
 849         color: #777;
 850 }
 851
 852 /*------------------------------------------------------------------------------
 853   20.0 - Settings
 854 ------------------------------------------------------------------------------*/
 855
 856 #utc-time, #local-time {
 857         padding-left: 25px;
 858         font-style: italic;
 859 }
 860
 861 .defaultavatarpicker .avatar {
 862         margin: 2px 0;
 863         vertical-align: middle;
 864 }
 865
 866 .options-general-php input.small-text {
 867         width: 56px;
 868 }
 869
 870 .options-general-php .spinner {
 871         float: none;
 872         margin: 0 3px;
 873 }
 874
 875 .settings-php .language-install-spinner,
 876 .options-general-php .language-install-spinner {
 877         display: inline-block;
 878         float: none;
 879         margin: -3px 5px 0;
 880         vertical-align: middle;
 881 }
 882
 883 /*------------------------------------------------------------------------------
 884   21.0 - Network Admin
 885 ------------------------------------------------------------------------------*/
 886
 887 .setup-php textarea {
 888         max-width: 100%;
 889 }
 890
 891 .form-field #site-address {
 892         max-width: 25em;
 893 }
 894
 895 .form-field #domain {
 896         max-width: 22em;
 897 }
 898
 899 .form-field #site-title,
 900 .form-field #admin-email,
 901 .form-field #path,
 902 .form-field #blog_registered,
 903 .form-field #blog_last_updated {
 904         max-width: 25em;
 905 }
 906
 907 .form-field #path {
 908         margin-bottom: 5px;
 909 }
 910
 911 #search-users,
 912 #search-sites {
 913         max-width: 100%;
 914 }
 915
 916 /*------------------------------------------------------------------------------
 917    Credentials check dialog for Install and Updates
 918 ------------------------------------------------------------------------------*/
 919
 920 .request-filesystem-credentials-dialog {
 921         display: none;
 922 }
 923
 924 .request-filesystem-credentials-dialog .notification-dialog {
 925         top: 15%;
 926         max-height: 85%;
 927 }
 928
 929 .request-filesystem-credentials-dialog-content {
 930         margin: 25px;
 931 }
 932
 933 .request-filesystem-credentials-form input[type="text"],
 934 .request-filesystem-credentials-form input[type="password"] {
 935         display: block;
 936 }
 937
 938 .request-filesystem-credentials-dialog input[type="text"],
 939 .request-filesystem-credentials-dialog input[type="password"] {
 940         width: 100%;
 941 }
 942
 943 .request-filesystem-credentials-form .field-title {
 944         font-weight: 600;
 945 }
 946
 947 .request-filesystem-credentials-dialog label[for="hostname"],
 948 .request-filesystem-credentials-dialog label[for="public_key"],
 949 .request-filesystem-credentials-dialog label[for="private_key"] {
 950         display: block;
 951         margin-bottom: 1em;
 952 }
 953
 954 .request-filesystem-credentials-dialog .ftp-username,
 955 .request-filesystem-credentials-dialog .ftp-password {
 956         float: left;
 957         width: 48%;
 958 }
 959
 960 .request-filesystem-credentials-dialog .ftp-password {
 961         margin-left: 4%;
 962 }
 963
 964 .request-filesystem-credentials-dialog .request-filesystem-credentials-action-buttons {
 965         text-align: right;
 966 }
 967
 968 .request-filesystem-credentials-dialog label[for="ftp"] {
 969         margin-right: 10px;
 970 }
 971
 972 #request-filesystem-credentials-dialog .button:not(:last-child) {
 973         margin-right: 10px;
 974 }
 975
 976 #request-filesystem-credentials-form .cancel-button {
 977         display: none;
 978 }
 979
 980 #request-filesystem-credentials-dialog .cancel-button {
 981         display: inline;
 982 }
 983
 984
 985 /* =Media Queries
 986 -------------------------------------------------------------- */
 987
 988 @media screen and ( max-width: 782px ) {
 989         /* Input Elements */
 990         textarea {
 991                 -webkit-appearance: none;
 992         }
 993
 994         input[type="text"],
 995         input[type="email"],
 996         input[type="search"],
 997         input[type="password"],
 998         input[type="number"] {
 999                 -webkit-appearance: none;
1000                 padding: 6px 10px;
1001         }
1002
1003         input.code {
1004                 padding-bottom: 5px;
1005                 padding-top: 10px;
1006         }
1007
1008         input[type="checkbox"],
1009         .widefat th input[type="checkbox"],
1010         .widefat thead td input[type="checkbox"],
1011         .widefat tfoot td input[type="checkbox"] {
1012                 -webkit-appearance: none;
1013                 padding: 10px;
1014         }
1015
1016         .widefat th input[type="checkbox"],
1017         .widefat thead td input[type="checkbox"],
1018         .widefat tfoot td input[type="checkbox"] {
1019                 margin-bottom: 8px;
1020         }
1021
1022         input[type="checkbox"]:checked:before,
1023         .widefat th input[type="checkbox"]:before,
1024         .widefat thead td input[type="checkbox"]:before,
1025         .widefat tfoot td input[type="checkbox"]:before {
1026                 font: normal 30px/1 'Dashicons';
1027                 margin: -3px -5px;
1028         }
1029
1030         input[type="radio"],
1031         input[type="checkbox"] {
1032                 height: 25px;
1033                 width: 25px;
1034         }
1035
1036         .wp-admin p input[type="checkbox"],
1037         .wp-admin p input[type="radio"] {
1038                 margin-top: -3px;
1039         }
1040
1041         input[type="radio"]:checked:before {
1042                 vertical-align: middle;
1043                 width: 9px;
1044                 height: 9px;
1045                 margin: 7px;
1046                 line-height: 16px;
1047         }
1048
1049         .wp-upload-form input[type="submit"] {
1050                 margin-top: 10px;
1051         }
1052
1053         #wpbody select {
1054                 height: 36px;
1055                 font-size: 16px;
1056         }
1057
1058         .wp-admin .button-cancel {
1059                 padding: 0;
1060                 font-size: 14px;
1061         }
1062
1063         #adduser .form-field input,
1064         #createuser .form-field input {
1065                 width: 100%;
1066         }
1067
1068         .form-table {
1069                 -webkit-box-sizing: border-box;
1070                 -moz-box-sizing: border-box;
1071                 box-sizing: border-box;
1072         }
1073
1074         .form-table th,
1075         .form-table td {
1076                 display: block;
1077                 width: auto;
1078                 vertical-align: middle;
1079         }
1080
1081         .form-table .color-palette td {
1082                 display: table-cell;
1083                 width: 15px;
1084         }
1085
1086         .form-table table.color-palette {
1087                 margin-right: 10px;
1088         }
1089
1090         textarea,
1091         input {
1092                 font-size: 16px;
1093         }
1094
1095         .form-table td input[type="text"],
1096         .form-table td input[type="email"],
1097         .form-table td input[type="password"],
1098         .form-table td select,
1099         .form-table td textarea,
1100         .form-table span.description,
1101         #profile-page .form-table textarea {
1102                 width: 100%;
1103                 font-size: 16px;
1104                 line-height: 1.5;
1105                 padding: 7px 10px;
1106                 display: block;
1107                 max-width: none;
1108                 -webkit-box-sizing: border-box;
1109                 -moz-box-sizing: border-box;
1110                 box-sizing: border-box;
1111         }
1112
1113         .form-table .form-required.form-invalid td:after {
1114                 float: right;
1115                 margin: -30px 3px 0 0;
1116         }
1117
1118         #wpbody .form-table td select {
1119                 height: 40px;
1120         }
1121
1122         input[type="text"].small-text,
1123         input[type="search"].small-text,
1124         input[type="password"].small-text,
1125         input[type="number"].small-text,
1126         input[type="number"].small-text,
1127         .form-table input[type="text"].small-text {
1128                 width: auto;
1129                 max-width: 55px;
1130                 display: inline;
1131                 padding: 3px 6px;
1132                 margin: 0 3px;
1133         }
1134
1135         #pass-strength-result {
1136                 width: 100%;
1137                 -webkit-box-sizing: border-box;
1138                 -moz-box-sizing: border-box;
1139                 box-sizing: border-box;
1140                 padding: 8px;
1141         }
1142
1143         p.search-box {
1144                 float: none;
1145                 position: absolute;
1146                 bottom: 0;
1147                 width: 98%;
1148                 height: 90px;
1149                 margin-bottom: 20px;
1150         }
1151
1152         p.search-box input[name="s"] {
1153                 height: auto;
1154                 float: none;
1155                 width: 100%;
1156                 margin-bottom: 10px;
1157                 vertical-align: middle;
1158                 -webkit-appearance: none;
1159         }
1160
1161         p.search-box input[type="submit"] {
1162                 margin-bottom: 10px;
1163         }
1164
1165         .form-table span.description {
1166                 display: inline;
1167                 padding: 4px 0 0;
1168                 line-height: 1.4em;
1169                 font-size: 14px;
1170         }
1171
1172         .form-table th {
1173                 padding-top: 10px;
1174                 padding-bottom: 0;
1175                 border-bottom: 0;
1176         }
1177
1178         .form-table td {
1179                 margin-bottom: 0;
1180                 padding-bottom: 6px;
1181                 padding-top: 4px;
1182                 padding-left: 0;
1183         }
1184
1185         .form-table.permalink-structure td code {
1186                 margin-left: 32px;
1187         }
1188
1189         .form-table.permalink-structure td input[type="text"] {
1190                 margin-left: 32px;
1191                 margin-top: 4px;
1192                 width: 96%;
1193         }
1194
1195         .form-table input.regular-text {
1196                 width: 100%;
1197         }
1198
1199         .form-table label {
1200                 font-size: 14px;
1201         }
1202
1203         .form-table fieldset label {
1204                 display: block;
1205         }
1206
1207         #utc-time {
1208                 margin-top: 10px;
1209         }
1210
1211         #utc-time,
1212         #local-time {
1213                 display: block;
1214                 float: none;
1215                 padding: 0;
1216                 line-height: 2;
1217         }
1218
1219         .form-field #domain {
1220                 max-width: none;
1221         }
1222
1223         /* New Password */
1224         .wp-pwd {
1225                 position: relative;
1226         }
1227
1228         .wp-pwd [type="text"],
1229         .wp-pwd [type="password"] {
1230                 padding-right: 40px;
1231         }
1232
1233         .wp-pwd button.button {
1234                 background: transparent;
1235                 border: none;
1236                 -webkit-box-shadow: none;
1237                 box-shadow: none;
1238                 line-height: 2;
1239                 margin: 0;
1240                 padding: 5px 10px;
1241                 position: absolute;
1242                 right: 0;
1243                 top: 0;
1244         }
1245
1246         .wp-pwd button.button:hover,
1247         .wp-pwd button.button:focus,
1248         .wp-pwd button.button:active {
1249                 background: transparent;
1250         }
1251
1252         .wp-pwd .button .text {
1253                 display: none;
1254         }
1255 }
1256
1257 @media only screen and (max-width: 768px) {
1258         .form-field input[type="text"],
1259         .form-field input[type="email"],
1260         .form-field input[type="password"],
1261         .form-field select,
1262         .form-field textarea {
1263                 width: 99%;
1264         }
1265
1266         .form-wrap .form-field {
1267                 padding:0;
1268         }
1269
1270         /* users */
1271         #profile-page .form-table textarea {
1272                 max-width: 400px;
1273                 width: auto;
1274         }
1275 }
1276
1277 @media only screen and (max-height: 480px) {
1278         /*  Request Credentials */
1279         .request-filesystem-credentials-dialog .notification-dialog{
1280                 width: 100%;
1281                 height: 100%;
1282                 max-height: 100%;
1283                 position: fixed;
1284                 top: 0;
1285                 margin: 0;
1286                 left: 0;
1287         }
1288 }
1289
1290 /* Smartphone */
1291 @media screen and (max-width: 600px) {
1292         /* Color Picker Options */
1293         .color-option {
1294                 width: 49%;
1295         }
1296 }