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         cursor: pointer;
 208 }
 209
 210 label {
 211         cursor: pointer;
 212 }
 213
 214 input,
 215 select {
 216         margin: 1px;
 217         padding: 3px 5px;
 218 }
 219
 220 input.code {
 221         padding-top: 6px;
 222 }
 223
 224 textarea.code {
 225         line-height: 1.4;
 226         padding: 4px 6px 1px 6px;
 227 }
 228
 229 input.readonly,
 230 input[readonly],
 231 textarea.readonly,
 232 textarea[readonly] {
 233         background-color: #eee;
 234 }
 235
 236 ::-webkit-input-placeholder {
 237         color: #72777c;
 238 }
 239
 240 ::-moz-placeholder {
 241    color: #72777c;
 242    opacity: 1;
 243 }
 244
 245 :-ms-input-placeholder {
 246         color: #72777c;
 247 }
 248
 249 .form-invalid input, .form-invalid input:focus,
 250 .form-invalid select, .form-invalid select:focus {
 251         border-color: #dc3232 !important;
 252         -webkit-box-shadow: 0 0 2px rgba( 204, 0, 0, 0.8 );
 253         box-shadow: 0 0 2px rgba( 204, 0, 0, 0.8 );
 254 }
 255
 256 .form-table .form-required.form-invalid td:after {
 257         content: "\f534";
 258         font: normal 20px/1 dashicons;
 259         color: #dc3232;
 260         margin-right: -25px;
 261         vertical-align: middle;
 262 }
 263
 264 /* Adjust error indicator for password layout */
 265 .form-table .form-required.user-pass1-wrap.form-invalid td:after {
 266         content: '';
 267 }
 268
 269 .form-table .form-required.user-pass1-wrap.form-invalid .password-input-wrapper:after {
 270         content: '\f534';
 271         font: normal 20px/1 dashicons;
 272         color: #dc3232;
 273         margin: 0 -29px 0 6px;
 274         vertical-align: middle;
 275 }
 276
 277 .form-input-tip {
 278         color: #666;
 279 }
 280
 281 input:disabled,
 282 input.disabled,
 283 select:disabled,
 284 select.disabled,
 285 textarea:disabled,
 286 textarea.disabled {
 287         background: rgba( 255, 255, 255, 0.5 );
 288         border-color: rgba( 222, 222, 222, 0.75 );
 289         -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.04 );
 290         box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.04 );
 291         color: rgba( 51, 51, 51, 0.5 );
 292 }
 293
 294 input[type="file"]:disabled,
 295 input[type="file"].disabled,
 296 input[type="range"]:disabled,
 297 input[type="range"].disabled {
 298         background: none;
 299         -webkit-box-shadow: none;
 300         box-shadow: none;
 301         cursor: default;
 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 .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 #pass-strength-result {
 462         background-color: #eee;
 463         border: 1px solid #ddd;
 464         color: #23282d;
 465         margin: -2px 1px 5px 5px;
 466         padding: 3px 5px;
 467         text-align: center;
 468         width: 25em;
 469         -webkit-box-sizing: border-box;
 470         -moz-box-sizing: border-box;
 471         box-sizing: border-box;
 472         opacity: 0;
 473 }
 474
 475 #pass-strength-result.short {
 476         background-color: #f1adad;
 477         border-color: #e35b5b;
 478         opacity: 1;
 479 }
 480
 481 #pass-strength-result.bad {
 482         background-color: #fbc5a9;
 483         border-color: #f78b53;
 484         opacity: 1;
 485 }
 486
 487 #pass-strength-result.good {
 488         background-color: #ffe399;
 489         border-color: #ffc733;
 490         opacity: 1;
 491 }
 492
 493 #pass-strength-result.strong {
 494         background-color: #c1e1b9;
 495         border-color: #83c373;
 496         opacity: 1;
 497 }
 498
 499 #pass1.short, #pass1-text.short {
 500         border-color: #e35b5b;
 501 }
 502
 503 #pass1.bad, #pass1-text.bad {
 504         border-color: #f78b53;
 505 }
 506
 507 #pass1.good, #pass1-text.good {
 508         border-color: #ffc733;
 509 }
 510
 511 #pass1.strong, #pass1-text.strong {
 512         border-color: #83c373;
 513 }
 514
 515 .pw-weak {
 516         display:none;
 517 }
 518
 519 .indicator-hint {
 520         padding-top: 8px;
 521 }
 522
 523 #pass1-text,
 524 .show-password #pass1 {
 525         display: none;
 526 }
 527
 528 .show-password #pass1-text
 529 {
 530         display: inline-block;
 531 }
 532
 533 .form-table span.description.important {
 534         font-size: 12px;
 535 }
 536
 537 p.search-box {
 538         float: left;
 539         margin: 0;
 540 }
 541
 542 .network-admin.themes-php p.search-box {
 543         clear: right;
 544 }
 545
 546 .search-box input[name="s"],
 547 .tablenav .search-plugins input[name="s"],
 548 .tagsdiv .newtag {
 549         float: right;
 550         height: 28px;
 551         margin: 0 0 0 4px;
 552 }
 553
 554 .js.plugins-php .search-box .wp-filter-search {
 555         margin: 0;
 556         width: 280px;
 557         font-size: 16px;
 558         font-weight: 300;
 559         line-height: 1.5;
 560         padding: 3px 5px;
 561         height: 32px;
 562 }
 563
 564 input[type="text"].ui-autocomplete-loading,
 565 input[type="email"].ui-autocomplete-loading {
 566         background-image: url(../images/loading.gif);
 567         background-repeat: no-repeat;
 568         background-position: left center;
 569         visibility: visible;
 570 }
 571
 572 input.ui-autocomplete-input.open {
 573         border-bottom-color: transparent;
 574 }
 575
 576 ul#add-to-blog-users {
 577         margin: 0 14px 0 0;
 578 }
 579
 580 .ui-autocomplete {
 581         padding: 0;
 582         margin: 0;
 583         list-style: none;
 584         position: absolute;
 585         z-index: 10000;
 586         border: 1px solid #5b9dd9;
 587         -webkit-box-shadow: 0 1px 2px rgba( 30, 140, 190, 0.8 );
 588         box-shadow: 0 1px 2px rgba( 30, 140, 190, 0.8 );
 589         background-color: #fff;
 590 }
 591
 592 .ui-autocomplete li {
 593         margin-bottom: 0;
 594         padding: 4px 10px;
 595         white-space: nowrap;
 596         text-align: right;
 597         cursor: pointer;
 598 }
 599
 600 /* Colors for the wplink toolbar autocomplete. */
 601 .ui-autocomplete .ui-state-focus {
 602         background-color: #ddd;
 603 }
 604
 605 /* Colors for the tags autocomplete. */
 606 .wp-tags-autocomplete .ui-state-focus {
 607         background-color: #0073aa;
 608         color: #fff;
 609 }
 610
 611 /*------------------------------------------------------------------------------
 612   15.0 - Comments Screen
 613 ------------------------------------------------------------------------------*/
 614
 615 .form-table {
 616         border-collapse: collapse;
 617         margin-top: 0.5em;
 618         width: 100%;
 619         clear: both;
 620 }
 621
 622 .form-table,
 623 .form-table td,
 624 .form-table th,
 625 .form-table td p {
 626         font-size: 14px;
 627 }
 628
 629 .form-table td {
 630         margin-bottom: 9px;
 631         padding: 15px 10px;
 632         line-height: 1.3;
 633         vertical-align: middle;
 634 }
 635
 636 .form-table th,
 637 .form-wrap label {
 638         color: #23282d;
 639         font-weight: 400;
 640         text-shadow: none;
 641         vertical-align: baseline;
 642 }
 643
 644 .form-table th {
 645         vertical-align: top;
 646         text-align: right;
 647         padding: 20px 0 20px 10px;
 648         width: 200px;
 649         line-height: 1.3;
 650         font-weight: 600;
 651 }
 652
 653 .form-table th.th-full {
 654         width: auto;
 655         font-weight: 400;
 656 }
 657
 658 .form-table td p {
 659         margin-top: 4px;
 660         margin-bottom: 0;
 661 }
 662
 663 .form-table .date-time-doc {
 664         margin-top: 1em;
 665 }
 666
 667 .form-table p.timezone-info {
 668         margin: 1em 0;
 669 }
 670
 671 .form-table td fieldset label {
 672         margin: 0.25em 0 0.5em !important;
 673         display: inline-block;
 674 }
 675
 676 .form-table td fieldset label,
 677 .form-table td fieldset p,
 678 .form-table td fieldset li {
 679         line-height: 1.4em;
 680 }
 681
 682 .form-table input.tog,
 683 .form-table input[type="radio"] {
 684         margin-top: -4px;
 685         margin-left: 4px;
 686         float: none;
 687 }
 688
 689 .form-table .pre {
 690         padding: 8px;
 691         margin: 0;
 692 }
 693
 694 table.form-table td .updated {
 695         font-size: 13px;
 696 }
 697
 698 table.form-table td .updated p {
 699         font-size: 13px;
 700         margin: 0.3em 0;
 701 }
 702
 703 /*------------------------------------------------------------------------------
 704   18.0 - Users
 705 ------------------------------------------------------------------------------*/
 706
 707 #profile-page .form-table textarea {
 708         width: 500px;
 709         margin-bottom: 6px;
 710 }
 711
 712 #profile-page .form-table #rich_editing {
 713         margin-left: 5px
 714 }
 715
 716 #your-profile legend {
 717         font-size: 22px;
 718 }
 719
 720 #display_name {
 721         width: 15em;
 722 }
 723
 724 #adduser .form-field input,
 725 #createuser .form-field input {
 726         width: 25em;
 727 }
 728
 729 .color-option {
 730         display: inline-block;
 731         width: 24%;
 732         padding: 5px 15px 15px;
 733         -webkit-box-sizing: border-box;
 734         -moz-box-sizing: border-box;
 735         box-sizing: border-box;
 736         margin-bottom: 3px;
 737 }
 738
 739 .color-option:hover,
 740 .color-option.selected {
 741         background: #ddd;
 742 }
 743
 744 .color-palette {
 745         width: 100%;
 746         border-spacing: 0;
 747         border-collapse: collapse;
 748 }
 749 .color-palette td {
 750         height: 20px;
 751         padding: 0;
 752         border: none;
 753 }
 754
 755 .color-option {
 756         cursor: pointer;
 757 }
 758
 759 /*------------------------------------------------------------------------------
 760   19.0 - Tools
 761 ------------------------------------------------------------------------------*/
 762
 763 .tool-box .title {
 764         margin: 8px 0;
 765         font-size: 18px;
 766         font-weight: 400;
 767         line-height: 24px;
 768 }
 769
 770 .label-responsive {
 771         vertical-align: middle;
 772 }
 773
 774 #export-filters p {
 775         margin: 0 0 1em;
 776 }
 777
 778 #export-filters p.submit {
 779         margin: 7px 0 5px;
 780 }
 781
 782 /* Card styles */
 783
 784 .card {
 785         position: relative;
 786         margin-top: 20px;
 787         padding: 0.7em 2em 1em;
 788         min-width: 255px;
 789         max-width: 520px;
 790         border: 1px solid #e5e5e5;
 791         -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
 792         box-shadow: 0 1px 1px rgba(0,0,0,0.04);
 793         background: #fff;
 794 }
 795
 796 /* Press this styles */
 797
 798 .pressthis h4 {
 799         margin: 2em 0 1em;
 800 }
 801
 802 .pressthis textarea {
 803         width: 100%;
 804         font-size: 1em;
 805 }
 806
 807 #pressthis-code-wrap {
 808         overflow: auto;
 809 }
 810
 811 .pressthis-bookmarklet-wrapper {
 812         margin: 20px 0 8px;
 813         vertical-align: top;
 814         position: relative;
 815         z-index: 1;
 816 }
 817
 818 .pressthis-bookmarklet,
 819 .pressthis-bookmarklet:hover,
 820 .pressthis-bookmarklet:focus,
 821 .pressthis-bookmarklet:active {
 822         display: inline-block;
 823         position: relative;
 824         cursor: move;
 825         color: #32373c;
 826         background: #e5e5e5;
 827         -webkit-border-radius: 5px;
 828         border-radius: 5px;
 829         border: 1px solid #b4b9be;
 830         font-style: normal;
 831         line-height: 16px;
 832         font-size: 14px;
 833         text-decoration: none;
 834 }
 835
 836 .pressthis-bookmarklet:active {
 837         outline: none;
 838 }
 839
 840 .pressthis-bookmarklet:after {
 841         content: "";
 842         width: 70%;
 843         height: 55%;
 844         z-index: -1;
 845         position: absolute;
 846         left: 10px;
 847         bottom: 9px;
 848         background: transparent;
 849         -webkit-transform: skew(-20deg) rotate(-6deg);
 850         -ms-transform: skew(-20deg) rotate(-6deg);
 851         transform: skew(-20deg) rotate(-6deg);
 852         -webkit-box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6);
 853         box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6);
 854 }
 855
 856 .pressthis-bookmarklet:hover:after {
 857         -webkit-transform: skew(-20deg) rotate(-9deg);
 858         -ms-transform: skew(-20deg) rotate(-9deg);
 859         transform: skew(-20deg) rotate(-9deg);
 860         -webkit-box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7);
 861         box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7);
 862 }
 863
 864 .pressthis-bookmarklet span {
 865         display: inline-block;
 866         margin: 0px 0 0;
 867         padding: 0px 9px 8px 12px;
 868 }
 869
 870 .pressthis-bookmarklet span:before {
 871         color: #72777c;
 872         font: normal 20px/1 dashicons;
 873         content: "\f157";
 874         position: relative;
 875         display: inline-block;
 876         top: 4px;
 877         margin-left: 4px;
 878 }
 879
 880 .pressthis-js-toggle {
 881         margin-right: 10px;
 882         padding: 0;
 883         height: auto;
 884         vertical-align: top;
 885 }
 886
 887 /* to override the button class being applied */
 888 .pressthis-js-toggle.button.button {
 889         margin-right: 10px;
 890         padding: 0;
 891         height: auto;
 892         vertical-align: top;
 893 }
 894
 895 .pressthis-js-toggle .dashicons {
 896         margin: 5px 7px 6px 8px;
 897         color: #555d66;
 898 }
 899
 900 /*------------------------------------------------------------------------------
 901   20.0 - Settings
 902 ------------------------------------------------------------------------------*/
 903
 904 .timezone-info code {
 905         white-space: nowrap;
 906 }
 907
 908 .defaultavatarpicker .avatar {
 909         margin: 2px 0;
 910         vertical-align: middle;
 911 }
 912
 913 .options-general-php .date-time-text {
 914         display: inline-block;
 915         min-width: 10em;
 916 }
 917
 918 .options-general-php input.small-text {
 919         width: 56px;
 920 }
 921
 922 .options-general-php .spinner {
 923         float: none;
 924         margin: 0 3px;
 925 }
 926
 927 .settings-php .language-install-spinner,
 928 .options-general-php .language-install-spinner {
 929         display: inline-block;
 930         float: none;
 931         margin: -3px 5px 0;
 932         vertical-align: middle;
 933 }
 934
 935 /*------------------------------------------------------------------------------
 936   21.0 - Network Admin
 937 ------------------------------------------------------------------------------*/
 938
 939 .setup-php textarea {
 940         max-width: 100%;
 941 }
 942
 943 .form-field #site-address {
 944         max-width: 25em;
 945 }
 946
 947 .form-field #domain {
 948         max-width: 22em;
 949 }
 950
 951 .form-field #site-title,
 952 .form-field #admin-email,
 953 .form-field #path,
 954 .form-field #blog_registered,
 955 .form-field #blog_last_updated {
 956         max-width: 25em;
 957 }
 958
 959 .form-field #path {
 960         margin-bottom: 5px;
 961 }
 962
 963 #search-users,
 964 #search-sites {
 965         max-width: 100%;
 966 }
 967
 968 /*------------------------------------------------------------------------------
 969    Credentials check dialog for Install and Updates
 970 ------------------------------------------------------------------------------*/
 971
 972 .request-filesystem-credentials-dialog {
 973         display: none;
 974 }
 975
 976 .request-filesystem-credentials-dialog .notification-dialog {
 977         top: 10%;
 978         max-height: 85%;
 979 }
 980
 981 .request-filesystem-credentials-dialog-content {
 982         margin: 25px;
 983 }
 984
 985 #request-filesystem-credentials-title {
 986     font-size: 1.3em;
 987     margin: 1em 0;
 988 }
 989
 990 .request-filesystem-credentials-form legend {
 991         font-size: 1em;
 992         padding: 1.33em 0;
 993         font-weight: 600;
 994 }
 995
 996 .request-filesystem-credentials-form input[type="text"],
 997 .request-filesystem-credentials-form input[type="password"] {
 998         display: block;
 999 }
1000
1001 .request-filesystem-credentials-dialog input[type="text"],
1002 .request-filesystem-credentials-dialog input[type="password"] {
1003         width: 100%;
1004 }
1005
1006 .request-filesystem-credentials-form .field-title {
1007         font-weight: 600;
1008 }
1009
1010 .request-filesystem-credentials-dialog label[for="hostname"],
1011 .request-filesystem-credentials-dialog label[for="public_key"],
1012 .request-filesystem-credentials-dialog label[for="private_key"] {
1013         display: block;
1014         margin-bottom: 1em;
1015 }
1016
1017 .request-filesystem-credentials-dialog .ftp-username,
1018 .request-filesystem-credentials-dialog .ftp-password {
1019         float: right;
1020         width: 48%;
1021 }
1022
1023 .request-filesystem-credentials-dialog .ftp-password {
1024         margin-right: 4%;
1025 }
1026
1027 .request-filesystem-credentials-dialog .request-filesystem-credentials-action-buttons {
1028         text-align: left;
1029 }
1030
1031 .request-filesystem-credentials-dialog label[for="ftp"] {
1032         margin-left: 10px;
1033 }
1034
1035 .request-filesystem-credentials-dialog #auth-keys-desc {
1036         margin-bottom: 0;
1037 }
1038
1039 #request-filesystem-credentials-dialog .button:not(:last-child) {
1040         margin-left: 10px;
1041 }
1042
1043 #request-filesystem-credentials-form .cancel-button {
1044         display: none;
1045 }
1046
1047 #request-filesystem-credentials-dialog .cancel-button {
1048         display: inline;
1049 }
1050
1051 .request-filesystem-credentials-dialog .ftp-username,
1052 .request-filesystem-credentials-dialog .ftp-password {
1053         float: none;
1054         width: auto;
1055 }
1056
1057 .request-filesystem-credentials-dialog .ftp-username {
1058         margin-bottom: 1em;
1059 }
1060
1061 .request-filesystem-credentials-dialog .ftp-password {
1062         margin: 0;
1063 }
1064
1065 .request-filesystem-credentials-dialog .ftp-password em {
1066         color: #888;
1067 }
1068
1069 .request-filesystem-credentials-dialog label {
1070         display: block;
1071         line-height: 1.5;
1072         margin-bottom: 1em;
1073 }
1074
1075 .request-filesystem-credentials-form legend {
1076         padding-bottom: 0;
1077 }
1078
1079 .request-filesystem-credentials-form #ssh-keys legend {
1080         font-size: 1.3em;
1081 }
1082
1083 .request-filesystem-credentials-form .notice {
1084         margin: 0 0 20px 0;
1085         clear: both;
1086 }
1087
1088
1089 /* =Media Queries
1090 -------------------------------------------------------------- */
1091
1092 @media screen and ( max-width: 782px ) {
1093         /* Input Elements */
1094         textarea {
1095                 -webkit-appearance: none;
1096         }
1097
1098         input[type="text"],
1099         input[type="email"],
1100         input[type="search"],
1101         input[type="password"],
1102         input[type="number"] {
1103                 -webkit-appearance: none;
1104                 padding: 6px 10px;
1105         }
1106
1107         input[type="number"] {
1108                 height: 40px;
1109         }
1110
1111         input.code {
1112                 padding-bottom: 5px;
1113                 padding-top: 10px;
1114         }
1115
1116         input[type="checkbox"],
1117         .widefat th input[type="checkbox"],
1118         .widefat thead td input[type="checkbox"],
1119         .widefat tfoot td input[type="checkbox"] {
1120                 -webkit-appearance: none;
1121                 padding: 10px;
1122         }
1123
1124         .widefat th input[type="checkbox"],
1125         .widefat thead td input[type="checkbox"],
1126         .widefat tfoot td input[type="checkbox"] {
1127                 margin-bottom: 8px;
1128         }
1129
1130         input[type="checkbox"]:checked:before,
1131         .widefat th input[type="checkbox"]:before,
1132         .widefat thead td input[type="checkbox"]:before,
1133         .widefat tfoot td input[type="checkbox"]:before {
1134                 font: normal 30px/1 dashicons;
1135                 margin: -3px -5px;
1136         }
1137
1138         input[type="radio"],
1139         input[type="checkbox"] {
1140                 height: 25px;
1141                 width: 25px;
1142         }
1143
1144         .wp-admin p input[type="checkbox"],
1145         .wp-admin p input[type="radio"] {
1146                 margin-top: -3px;
1147         }
1148
1149         input[type="radio"]:checked:before {
1150                 vertical-align: middle;
1151                 width: 9px;
1152                 height: 9px;
1153                 margin: 7px;
1154                 line-height: 16px;
1155         }
1156
1157         .wp-upload-form input[type="submit"] {
1158                 margin-top: 10px;
1159         }
1160
1161         #wpbody select {
1162                 height: 36px;
1163                 font-size: 16px;
1164         }
1165
1166         .wp-admin .button-cancel {
1167                 padding: 0;
1168                 font-size: 14px;
1169         }
1170
1171         #adduser .form-field input,
1172         #createuser .form-field input {
1173                 width: 100%;
1174         }
1175
1176         .form-table {
1177                 -webkit-box-sizing: border-box;
1178                 -moz-box-sizing: border-box;
1179                 box-sizing: border-box;
1180         }
1181
1182         .form-table th,
1183         .form-table td,
1184         .label-responsive {
1185                 display: block;
1186                 width: auto;
1187                 vertical-align: middle;
1188         }
1189
1190         .label-responsive {
1191                 margin: 0.5em 0;
1192         }
1193
1194         .export-filters li {
1195                 margin-bottom: 0;
1196         }
1197
1198         .form-table .color-palette td {
1199                 display: table-cell;
1200                 width: 15px;
1201         }
1202
1203         .form-table table.color-palette {
1204                 margin-left: 10px;
1205         }
1206
1207         textarea,
1208         input {
1209                 font-size: 16px;
1210         }
1211
1212         .form-table td input[type="text"],
1213         .form-table td input[type="email"],
1214         .form-table td input[type="password"],
1215         .form-table td select,
1216         .form-table td textarea,
1217         .form-table span.description,
1218         #profile-page .form-table textarea {
1219                 width: 100%;
1220                 font-size: 16px;
1221                 line-height: 1.5;
1222                 padding: 7px 10px;
1223                 display: block;
1224                 max-width: none;
1225                 -webkit-box-sizing: border-box;
1226                 -moz-box-sizing: border-box;
1227                 box-sizing: border-box;
1228         }
1229
1230         .form-table .form-required.form-invalid td:after {
1231                 float: left;
1232                 margin: -30px 0 0 3px;
1233         }
1234
1235         #wpbody .form-table td select {
1236                 height: 40px;
1237         }
1238
1239         input[type="text"].small-text,
1240         input[type="search"].small-text,
1241         input[type="password"].small-text,
1242         input[type="number"].small-text,
1243         input[type="number"].small-text,
1244         .form-table input[type="text"].small-text {
1245                 width: auto;
1246                 max-width: 55px;
1247                 display: inline;
1248                 padding: 3px 6px;
1249                 margin: 0 3px;
1250         }
1251
1252         #pass-strength-result {
1253                 width: 100%;
1254                 -webkit-box-sizing: border-box;
1255                 -moz-box-sizing: border-box;
1256                 box-sizing: border-box;
1257                 padding: 8px;
1258         }
1259
1260         p.search-box {
1261                 float: none;
1262                 position: absolute;
1263                 bottom: 0;
1264                 width: 98%;
1265                 height: 90px;
1266                 margin-bottom: 20px;
1267         }
1268
1269         p.search-box input[name="s"] {
1270                 height: auto;
1271                 float: none;
1272                 width: 100%;
1273                 margin-bottom: 10px;
1274                 vertical-align: middle;
1275                 -webkit-appearance: none;
1276         }
1277
1278         p.search-box input[type="submit"] {
1279                 margin-bottom: 10px;
1280         }
1281
1282         .form-table span.description {
1283                 display: inline;
1284                 padding: 4px 0 0;
1285                 line-height: 1.4em;
1286                 font-size: 14px;
1287         }
1288
1289         .form-table th {
1290                 padding-top: 10px;
1291                 padding-bottom: 0;
1292                 border-bottom: 0;
1293         }
1294
1295         .form-table td {
1296                 margin-bottom: 0;
1297                 padding-bottom: 6px;
1298                 padding-top: 4px;
1299                 padding-right: 0;
1300         }
1301
1302         .form-table.permalink-structure td code {
1303                 margin-right: 32px;
1304         }
1305
1306         .form-table.permalink-structure td input[type="text"] {
1307                 margin-right: 32px;
1308                 margin-top: 4px;
1309                 width: 96%;
1310         }
1311
1312         .form-table input.regular-text {
1313                 width: 100%;
1314         }
1315
1316         .form-table label {
1317                 font-size: 14px;
1318         }
1319
1320         .form-table fieldset label {
1321                 display: block;
1322         }
1323
1324         #utc-time,
1325         #local-time {
1326                 display: block;
1327                 float: none;
1328                 margin-top: 0.5em;
1329         }
1330
1331         .form-field #domain {
1332                 max-width: none;
1333         }
1334
1335         /* New Password */
1336         .wp-pwd {
1337                 position: relative;
1338         }
1339
1340         .wp-pwd [type="text"],
1341         .wp-pwd [type="password"] {
1342                 padding-left: 40px;
1343         }
1344
1345         .wp-pwd button.button {
1346                 background: transparent;
1347                 border: none;
1348                 -webkit-box-shadow: none;
1349                 box-shadow: none;
1350                 line-height: 2;
1351                 margin: 0;
1352                 padding: 5px 10px;
1353                 position: absolute;
1354                 left: 0;
1355                 top: 0;
1356         }
1357
1358         .wp-pwd button.button:hover,
1359         .wp-pwd button.button:focus,
1360         .wp-pwd button.button:active {
1361                 background: transparent;
1362         }
1363
1364         .wp-pwd .button .text {
1365                 display: none;
1366         }
1367
1368         .options-general-php input[type="text"].small-text {
1369                 max-width: 60px;
1370                 margin: 0;
1371         }
1372 }
1373
1374 @media only screen and (max-width: 768px) {
1375         .form-field input[type="text"],
1376         .form-field input[type="email"],
1377         .form-field input[type="password"],
1378         .form-field select,
1379         .form-field textarea {
1380                 width: 99%;
1381         }
1382
1383         .form-wrap .form-field {
1384                 padding:0;
1385         }
1386
1387         /* users */
1388         #profile-page .form-table textarea {
1389                 max-width: 400px;
1390                 width: auto;
1391         }
1392 }
1393
1394 @media only screen and (max-height: 480px) {
1395         /*  Request Credentials */
1396         .request-filesystem-credentials-dialog .notification-dialog{
1397                 width: 100%;
1398                 height: 100%;
1399                 max-height: 100%;
1400                 position: fixed;
1401                 top: 0;
1402                 margin: 0;
1403                 right: 0;
1404         }
1405 }
1406
1407 /* Smartphone */
1408 @media screen and (max-width: 600px) {
1409         /* Color Picker Options */
1410         .color-option {
1411                 width: 49%;
1412         }
1413 }
1414
1415 @media only screen and (max-width: 320px) {
1416         .options-general-php .date-time-text.date-time-custom-text {
1417                 min-width: 0;
1418                 margin-left: 0.5em;
1419         }
1420 }