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