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