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