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