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