forms-rtl.css (33212B)
1 /*! This file is auto-generated */ 2 /* Include margin and padding in the width calculation of input and textarea. */ 3 input, 4 select, 5 textarea, 6 button { 7 box-sizing: border-box; 8 font-family: inherit; 9 font-size: inherit; 10 font-weight: inherit; 11 } 12 13 textarea, 14 input { 15 font-size: 14px; 16 } 17 18 textarea { 19 overflow: auto; 20 padding: 2px 6px; 21 /* inherits font size 14px */ 22 line-height: 1.42857143; /* 20px */ 23 resize: vertical; 24 } 25 26 label { 27 cursor: pointer; 28 } 29 30 input, 31 select { 32 margin: 0 1px; 33 } 34 35 textarea.code { 36 padding: 4px 6px 1px 6px; 37 } 38 39 input[type="text"], 40 input[type="password"], 41 input[type="color"], 42 input[type="date"], 43 input[type="datetime"], 44 input[type="datetime-local"], 45 input[type="email"], 46 input[type="month"], 47 input[type="number"], 48 input[type="search"], 49 input[type="tel"], 50 input[type="time"], 51 input[type="url"], 52 input[type="week"], 53 select, 54 textarea { 55 box-shadow: 0 0 0 transparent; 56 border-radius: 4px; 57 border: 1px solid #8c8f94; 58 background-color: #fff; 59 color: #2c3338; 60 } 61 62 input[type="text"], 63 input[type="password"], 64 input[type="date"], 65 input[type="datetime"], 66 input[type="datetime-local"], 67 input[type="email"], 68 input[type="month"], 69 input[type="number"], 70 input[type="search"], 71 input[type="tel"], 72 input[type="time"], 73 input[type="url"], 74 input[type="week"] { 75 padding: 0 8px; 76 /* inherits font size 14px */ 77 line-height: 2; /* 28px */ 78 /* Only necessary for IE11 */ 79 min-height: 30px; 80 } 81 82 ::-webkit-datetime-edit { 83 /* inherits font size 14px */ 84 line-height: 1.85714286; /* 26px */ 85 } 86 87 input[type="text"]:focus, 88 input[type="password"]:focus, 89 input[type="color"]:focus, 90 input[type="date"]:focus, 91 input[type="datetime"]:focus, 92 input[type="datetime-local"]:focus, 93 input[type="email"]:focus, 94 input[type="month"]:focus, 95 input[type="number"]:focus, 96 input[type="search"]:focus, 97 input[type="tel"]:focus, 98 input[type="time"]:focus, 99 input[type="url"]:focus, 100 input[type="week"]:focus, 101 input[type="checkbox"]:focus, 102 input[type="radio"]:focus, 103 select:focus, 104 textarea:focus { 105 border-color: #2271b1; 106 box-shadow: 0 0 0 1px #2271b1; 107 /* Only visible in Windows High Contrast mode */ 108 outline: 2px solid transparent; 109 } 110 111 /* rtl:ignore */ 112 input[type="email"], 113 input[type="url"] { 114 direction: ltr; 115 } 116 117 input[type="checkbox"], 118 input[type="radio"] { 119 border: 1px solid #8c8f94; 120 border-radius: 4px; 121 background: #fff; 122 color: #50575e; 123 clear: none; 124 cursor: pointer; 125 display: inline-block; 126 line-height: 0; 127 height: 1rem; 128 margin: -0.25rem 0 0 0.25rem; 129 outline: 0; 130 padding: 0 !important; 131 text-align: center; 132 vertical-align: middle; 133 width: 1rem; 134 min-width: 1rem; 135 -webkit-appearance: none; 136 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); 137 transition: .05s border-color ease-in-out; 138 } 139 140 input[type="radio"]:checked + label:before { 141 color: #8c8f94; 142 } 143 144 .wp-core-ui input[type="reset"]:hover, 145 .wp-core-ui input[type="reset"]:active { 146 color: #135e96; 147 } 148 149 td > input[type="checkbox"], 150 .wp-admin p input[type="checkbox"], 151 .wp-admin p input[type="radio"] { 152 margin-top: 0; 153 } 154 155 .wp-admin p label input[type="checkbox"] { 156 margin-top: -4px; 157 } 158 159 .wp-admin p label input[type="radio"] { 160 margin-top: -2px; 161 } 162 163 input[type="radio"] { 164 border-radius: 50%; 165 margin-left: 0.25rem; 166 /* 10px not sure if still necessary, comes from the MP6 redesign in r26072 */ 167 line-height: 0.71428571; 168 } 169 170 input[type="checkbox"]:checked::before, 171 input[type="radio"]:checked::before { 172 float: right; 173 display: inline-block; 174 vertical-align: middle; 175 width: 1rem; 176 speak: never; 177 -webkit-font-smoothing: antialiased; 178 -moz-osx-font-smoothing: grayscale; 179 } 180 181 input[type="checkbox"]:checked::before { 182 /* Use the "Yes" SVG Dashicon */ 183 content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%233582c4%27%2F%3E%3C%2Fsvg%3E"); 184 margin: -0.1875rem -0.25rem 0 0; 185 height: 1.3125rem; 186 width: 1.3125rem; 187 } 188 189 input[type="radio"]:checked::before { 190 content: ""; 191 border-radius: 50%; 192 width: 0.5rem; /* 8px */ 193 height: 0.5rem; /* 8px */ 194 margin: 0.1875rem; /* 3px */ 195 background-color: #3582c4; 196 /* 16px not sure if still necessary, comes from the MP6 redesign in r26072 */ 197 line-height: 1.14285714; 198 } 199 200 @-moz-document url-prefix() { 201 input[type="checkbox"], 202 input[type="radio"], 203 .form-table input.tog { 204 margin-bottom: -1px; 205 } 206 } 207 208 /* Search */ 209 input[type="search"] { 210 -webkit-appearance: textfield; 211 } 212 213 input[type="search"]::-webkit-search-decoration { 214 display: none; 215 } 216 217 .wp-admin input[type="file"] { 218 padding: 3px 0; 219 cursor: pointer; 220 } 221 222 input.readonly, 223 input[readonly], 224 textarea.readonly, 225 textarea[readonly] { 226 background-color: #f0f0f1; 227 } 228 229 ::-webkit-input-placeholder { 230 color: #646970; 231 } 232 233 ::-moz-placeholder { 234 color: #646970; 235 opacity: 1; 236 } 237 238 :-ms-input-placeholder { 239 color: #646970; 240 } 241 242 .form-invalid .form-required, 243 .form-invalid .form-required:focus, 244 .form-invalid.form-required input, 245 .form-invalid.form-required input:focus, 246 .form-invalid.form-required select, 247 .form-invalid.form-required select:focus { 248 border-color: #d63638 !important; 249 box-shadow: 0 0 2px rgba(214, 54, 56, 0.8); 250 } 251 252 .form-table .form-required.form-invalid td:after { 253 content: "\f534"; 254 font: normal 20px/1 dashicons; 255 color: #d63638; 256 margin-right: -25px; 257 vertical-align: middle; 258 } 259 260 /* Adjust error indicator for password layout */ 261 .form-table .form-required.user-pass1-wrap.form-invalid td:after { 262 content: ""; 263 } 264 265 .form-table .form-required.user-pass1-wrap.form-invalid .password-input-wrapper:after { 266 content: "\f534"; 267 font: normal 20px/1 dashicons; 268 color: #d63638; 269 margin: 0 -29px 0 6px; 270 vertical-align: middle; 271 } 272 273 .form-input-tip { 274 color: #646970; 275 } 276 277 input:disabled, 278 input.disabled, 279 select:disabled, 280 select.disabled, 281 textarea:disabled, 282 textarea.disabled { 283 background: rgba(255, 255, 255, 0.5); 284 border-color: rgba(220, 220, 222, 0.75); 285 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04); 286 color: rgba(44, 51, 56, 0.5); 287 } 288 289 input[type="file"]:disabled, 290 input[type="file"].disabled, 291 input[type="range"]:disabled, 292 input[type="range"].disabled { 293 background: none; 294 box-shadow: none; 295 cursor: default; 296 } 297 298 input[type="checkbox"]:disabled, 299 input[type="checkbox"].disabled, 300 input[type="radio"]:disabled, 301 input[type="radio"].disabled, 302 input[type="checkbox"]:disabled:checked:before, 303 input[type="checkbox"].disabled:checked:before, 304 input[type="radio"]:disabled:checked:before, 305 input[type="radio"].disabled:checked:before { 306 opacity: 0.7; 307 } 308 309 /*------------------------------------------------------------------------------ 310 2.0 - Forms 311 ------------------------------------------------------------------------------*/ 312 313 /* Select styles are based on the default button in buttons.css */ 314 .wp-core-ui select { 315 font-size: 14px; 316 line-height: 2; /* 28px */ 317 color: #2c3338; 318 border-color: #8c8f94; 319 box-shadow: none; 320 border-radius: 3px; 321 padding: 0 8px 0 24px; 322 min-height: 30px; 323 max-width: 25rem; 324 -webkit-appearance: none; 325 /* The SVG is arrow-down-alt2 from Dashicons. */ 326 background: #fff url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E') no-repeat left 5px top 55%; 327 background-size: 16px 16px; 328 cursor: pointer; 329 vertical-align: middle; 330 } 331 332 .wp-core-ui select:hover { 333 color: #2271b1; 334 } 335 336 .wp-core-ui select:focus { 337 border-color: #2271b1; 338 color: #0a4b78; 339 box-shadow: 0 0 0 1px #2271b1; 340 } 341 342 .wp-core-ui select:active { 343 border-color: #8c8f94; 344 box-shadow: none; 345 } 346 347 .wp-core-ui select.disabled, 348 .wp-core-ui select:disabled { 349 color: #a7aaad; 350 border-color: #dcdcde; 351 background-color: #f6f7f7; 352 /* The SVG is arrow-down-alt2 from Dashicons. */ 353 background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23a0a5aa%22%2F%3E%3C%2Fsvg%3E'); 354 box-shadow: none; 355 text-shadow: 0 1px 0 #fff; 356 cursor: default; 357 transform: none; 358 } 359 360 /* Reset Firefox inner outline that appears on :focus. */ 361 /* This ruleset overrides the color change on :focus thus needs to be after select:focus. */ 362 .wp-core-ui select:-moz-focusring { 363 color: transparent; 364 text-shadow: 0 0 0 #0a4b78; 365 } 366 367 /* Remove background focus style from IE11 while keeping focus style available on option elements. */ 368 .wp-core-ui select::-ms-value { 369 background: transparent; 370 color: #50575e; 371 } 372 373 .wp-core-ui select:hover::-ms-value { 374 color: #2271b1; 375 } 376 377 .wp-core-ui select:focus::-ms-value { 378 color: #0a4b78; 379 } 380 381 .wp-core-ui select.disabled::-ms-value, 382 .wp-core-ui select:disabled::-ms-value { 383 color: #a7aaad; 384 } 385 386 /* Hide the native down arrow for select element on IE. */ 387 .wp-core-ui select::-ms-expand { 388 display: none; 389 } 390 391 .wp-admin .button-cancel { 392 display: inline-block; 393 min-height: 28px; 394 padding: 0 5px; 395 line-height: 2; 396 } 397 398 .meta-box-sortables select { 399 max-width: 100%; 400 } 401 402 .meta-box-sortables input { 403 vertical-align: middle; 404 } 405 406 .misc-pub-post-status select { 407 margin-top: 0; 408 } 409 410 .wp-core-ui select[multiple] { 411 height: auto; 412 padding-left: 8px; 413 background: #fff; 414 } 415 416 .submit { 417 padding: 1.5em 0; 418 margin: 5px 0; 419 border-bottom-right-radius: 3px; 420 border-bottom-left-radius: 3px; 421 border: none; 422 } 423 424 form p.submit a.cancel:hover { 425 text-decoration: none; 426 } 427 428 p.submit { 429 text-align: right; 430 max-width: 100%; 431 margin-top: 20px; 432 padding-top: 10px; 433 } 434 435 .textright p.submit { 436 border: none; 437 text-align: left; 438 } 439 440 table.form-table + p.submit, 441 table.form-table + input + p.submit, 442 table.form-table + input + input + p.submit { 443 border-top: none; 444 padding-top: 0; 445 } 446 447 #minor-publishing-actions input, 448 #major-publishing-actions input, 449 #minor-publishing-actions .preview { 450 text-align: center; 451 } 452 453 textarea.all-options, 454 input.all-options { 455 width: 250px; 456 } 457 458 input.large-text, 459 textarea.large-text { 460 width: 99%; 461 } 462 463 .regular-text { 464 width: 25em; 465 } 466 467 input.small-text { 468 width: 50px; 469 padding: 0 6px; 470 } 471 472 label input.small-text { 473 margin-top: -4px; 474 } 475 476 input[type="number"].small-text { 477 width: 65px; 478 padding-left: 0; 479 } 480 481 input.tiny-text { 482 width: 35px; 483 } 484 485 input[type="number"].tiny-text { 486 width: 45px; 487 padding-left: 0; 488 } 489 490 #doaction, 491 #doaction2, 492 #post-query-submit { 493 margin: 0 0 0 8px; 494 } 495 496 /* @since 5.7.0 secondary bulk action controls require JS. */ 497 .no-js label[for="bulk-action-selector-bottom"], 498 .no-js select#bulk-action-selector-bottom, 499 .no-js input#doaction2, 500 .no-js label[for="new_role2"], 501 .no-js select#new_role2, 502 .no-js input#changeit2 { 503 display: none; 504 } 505 506 .tablenav .actions select { 507 float: right; 508 margin-left: 6px; 509 max-width: 12.5rem; 510 } 511 512 #timezone_string option { 513 margin-right: 1em; 514 } 515 516 .wp-hide-pw > .dashicons, 517 .wp-cancel-pw > .dashicons { 518 position: relative; 519 top: 3px; 520 width: 1.25rem; 521 height: 1.25rem; 522 top: 0.25rem; 523 font-size: 20px; 524 } 525 526 .wp-cancel-pw .dashicons-no { 527 display: none; 528 } 529 530 label, 531 #your-profile label + a { 532 vertical-align: middle; 533 } 534 535 fieldset label, 536 #your-profile label + a { 537 vertical-align: middle; 538 } 539 540 .options-media-php [for*="_size_"] { 541 min-width: 10em; 542 vertical-align: baseline; 543 } 544 545 .options-media-php .small-text[name*="_size_"] { 546 margin: 0 0 1em; 547 } 548 549 .wp-generate-pw { 550 margin-top: 1em; 551 } 552 553 .wp-pwd { 554 margin-top: 1em; 555 } 556 557 #misc-publishing-actions label { 558 vertical-align: baseline; 559 } 560 561 #pass-strength-result { 562 background-color: #f0f0f1; 563 border: 1px solid #dcdcde; 564 color: #1d2327; 565 margin: -1px 1px 5px; 566 padding: 3px 5px; 567 text-align: center; 568 width: 25em; 569 box-sizing: border-box; 570 opacity: 0; 571 } 572 573 #pass-strength-result.short { 574 background-color: #ffabaf; 575 border-color: #e65054; 576 opacity: 1; 577 } 578 579 #pass-strength-result.bad { 580 background-color: #facfd2; 581 border-color: #f86368; 582 opacity: 1; 583 } 584 585 #pass-strength-result.good { 586 background-color: #f5e6ab; 587 border-color: #f0c33c; 588 opacity: 1; 589 } 590 591 #pass-strength-result.strong { 592 background-color: #b8e6bf; 593 border-color: #68de7c; 594 opacity: 1; 595 } 596 597 .password-input-wrapper input { 598 font-family: Consolas, Monaco, monospace; 599 } 600 601 #pass1.short, #pass1-text.short { 602 border-color: #e65054; 603 } 604 605 #pass1.bad, #pass1-text.bad { 606 border-color: #f86368; 607 } 608 609 #pass1.good, #pass1-text.good { 610 border-color: #f0c33c; 611 } 612 613 #pass1.strong, #pass1-text.strong { 614 border-color: #68de7c; 615 } 616 617 .pw-weak { 618 display: none; 619 } 620 621 .indicator-hint { 622 padding-top: 8px; 623 } 624 625 .wp-pwd [type="text"], 626 .wp-pwd [type="password"] { 627 margin-bottom: 0; 628 /* Same height as the buttons */ 629 min-height: 30px; 630 } 631 632 /* Hide the Edge "reveal password" native button */ 633 .wp-pwd input::-ms-reveal { 634 display: none; 635 } 636 637 #pass1-text, 638 .show-password #pass1 { 639 display: none; 640 } 641 642 #pass1-text::-ms-clear { 643 display: none; 644 } 645 646 .show-password #pass1-text { 647 display: inline-block; 648 } 649 650 p.search-box { 651 float: left; 652 margin: 0; 653 } 654 655 .network-admin.themes-php p.search-box { 656 clear: right; 657 } 658 659 .search-box input[name="s"], 660 .tablenav .search-plugins input[name="s"], 661 .tagsdiv .newtag { 662 float: right; 663 margin: 0 0 0 4px; 664 } 665 666 .js.plugins-php .search-box .wp-filter-search { 667 margin: 0; 668 width: 280px; 669 } 670 671 input[type="text"].ui-autocomplete-loading, 672 input[type="email"].ui-autocomplete-loading { 673 background-image: url(../images/loading.gif); 674 background-repeat: no-repeat; 675 background-position: left center; 676 visibility: visible; 677 } 678 679 input.ui-autocomplete-input.open { 680 border-bottom-color: transparent; 681 } 682 683 ul#add-to-blog-users { 684 margin: 0 14px 0 0; 685 } 686 687 .ui-autocomplete { 688 padding: 0; 689 margin: 0; 690 list-style: none; 691 position: absolute; 692 z-index: 10000; 693 border: 1px solid #4f94d4; 694 box-shadow: 0 1px 2px rgba(79, 148, 212, 0.8); 695 background-color: #fff; 696 } 697 698 .ui-autocomplete li { 699 margin-bottom: 0; 700 padding: 4px 10px; 701 white-space: nowrap; 702 text-align: right; 703 cursor: pointer; 704 } 705 706 /* Colors for the wplink toolbar autocomplete. */ 707 .ui-autocomplete .ui-state-focus { 708 background-color: #dcdcde; 709 } 710 711 /* Colors for the tags autocomplete. */ 712 .wp-tags-autocomplete .ui-state-focus, 713 .wp-tags-autocomplete [aria-selected="true"] { 714 background-color: #2271b1; 715 color: #fff; 716 /* Only visible in Windows High Contrast mode */ 717 outline: 2px solid transparent; 718 } 719 720 /*------------------------------------------------------------------------------ 721 15.0 - Comments Screen 722 ------------------------------------------------------------------------------*/ 723 724 .form-table { 725 border-collapse: collapse; 726 margin-top: 0.5em; 727 width: 100%; 728 clear: both; 729 } 730 731 .form-table, 732 .form-table td, 733 .form-table th, 734 .form-table td p { 735 font-size: 14px; 736 } 737 738 .form-table td { 739 margin-bottom: 9px; 740 padding: 15px 10px; 741 line-height: 1.3; 742 vertical-align: middle; 743 } 744 745 .form-table th, 746 .form-wrap label { 747 color: #1d2327; 748 font-weight: 400; 749 text-shadow: none; 750 vertical-align: baseline; 751 } 752 753 .form-table th { 754 vertical-align: top; 755 text-align: right; 756 padding: 20px 0 20px 10px; 757 width: 200px; 758 line-height: 1.3; 759 font-weight: 600; 760 } 761 762 .form-table th.th-full, /* Not used by core. Back-compat for pre-4.8 */ 763 .form-table .td-full { 764 width: auto; 765 padding: 20px 0 20px 10px; 766 font-weight: 400; 767 } 768 769 .form-table td p { 770 margin-top: 4px; 771 margin-bottom: 0; 772 } 773 774 .form-table .date-time-doc { 775 margin-top: 1em; 776 } 777 778 .form-table p.timezone-info { 779 margin: 1em 0; 780 } 781 782 .form-table td fieldset label { 783 margin: 0.35em 0 0.5em !important; 784 display: inline-block; 785 } 786 787 .form-table td fieldset p label { 788 margin-top: 0 !important; 789 } 790 791 .form-table td fieldset label, 792 .form-table td fieldset p, 793 .form-table td fieldset li { 794 line-height: 1.4; 795 } 796 797 .form-table input.tog, 798 .form-table input[type="radio"] { 799 margin-top: -4px; 800 margin-left: 4px; 801 float: none; 802 } 803 804 .form-table .pre { 805 padding: 8px; 806 margin: 0; 807 } 808 809 table.form-table td .updated { 810 font-size: 13px; 811 } 812 813 table.form-table td .updated p { 814 font-size: 13px; 815 margin: 0.3em 0; 816 } 817 818 /*------------------------------------------------------------------------------ 819 18.0 - Users 820 ------------------------------------------------------------------------------*/ 821 822 #profile-page .form-table textarea { 823 width: 500px; 824 margin-bottom: 6px; 825 } 826 827 #profile-page .form-table #rich_editing { 828 margin-left: 5px 829 } 830 831 #your-profile legend { 832 font-size: 22px; 833 } 834 835 #display_name { 836 width: 15em; 837 } 838 839 #adduser .form-field input, 840 #createuser .form-field input { 841 width: 25em; 842 } 843 844 .color-option { 845 display: inline-block; 846 width: 24%; 847 padding: 5px 15px 15px; 848 box-sizing: border-box; 849 margin-bottom: 3px; 850 } 851 852 .color-option:hover, 853 .color-option.selected { 854 background: #dcdcde; 855 } 856 857 .color-palette { 858 width: 100%; 859 border-spacing: 0; 860 border-collapse: collapse; 861 } 862 .color-palette td { 863 height: 20px; 864 padding: 0; 865 border: none; 866 } 867 868 .color-option { 869 cursor: pointer; 870 } 871 872 .create-application-password .form-field { 873 max-width: 25em; 874 } 875 876 .create-application-password label { 877 font-weight: 600; 878 } 879 880 .create-application-password p.submit { 881 margin-bottom: 0; 882 padding-bottom: 0; 883 display: block; 884 } 885 886 #application-passwords-section .notice { 887 margin-top: 20px; 888 margin-bottom: 0; 889 } 890 891 .application-password-display input.code { 892 width: 19em; 893 } 894 895 .auth-app-card.card { 896 max-width: 768px; 897 } 898 899 .authorize-application-php .form-wrap p { 900 display: block; 901 } 902 903 /*------------------------------------------------------------------------------ 904 19.0 - Tools 905 ------------------------------------------------------------------------------*/ 906 907 .tool-box .title { 908 margin: 8px 0; 909 font-size: 18px; 910 font-weight: 400; 911 line-height: 24px; 912 } 913 914 .label-responsive { 915 vertical-align: middle; 916 } 917 918 #export-filters p { 919 margin: 0 0 1em; 920 } 921 922 #export-filters p.submit { 923 margin: 7px 0 5px; 924 } 925 926 /* Card styles */ 927 928 .card { 929 position: relative; 930 margin-top: 20px; 931 padding: 0.7em 2em 1em; 932 min-width: 255px; 933 max-width: 520px; 934 border: 1px solid #c3c4c7; 935 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); 936 background: #fff; 937 box-sizing: border-box; 938 } 939 940 /* Press this styles */ 941 942 .pressthis h4 { 943 margin: 2em 0 1em; 944 } 945 946 .pressthis textarea { 947 width: 100%; 948 font-size: 1em; 949 } 950 951 #pressthis-code-wrap { 952 overflow: auto; 953 } 954 955 .pressthis-bookmarklet-wrapper { 956 margin: 20px 0 8px; 957 vertical-align: top; 958 position: relative; 959 z-index: 1; 960 } 961 962 .pressthis-bookmarklet, 963 .pressthis-bookmarklet:hover, 964 .pressthis-bookmarklet:focus, 965 .pressthis-bookmarklet:active { 966 display: inline-block; 967 position: relative; 968 cursor: move; 969 color: #2c3338; 970 background: #dcdcde; 971 border-radius: 5px; 972 border: 1px solid #c3c4c7; 973 font-style: normal; 974 line-height: 16px; 975 font-size: 14px; 976 text-decoration: none; 977 } 978 979 .pressthis-bookmarklet:active { 980 outline: none; 981 } 982 983 .pressthis-bookmarklet:after { 984 content: ""; 985 width: 70%; 986 height: 55%; 987 z-index: -1; 988 position: absolute; 989 left: 10px; 990 bottom: 9px; 991 background: transparent; 992 transform: skew(-20deg) rotate(-6deg); 993 box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6); 994 } 995 996 .pressthis-bookmarklet:hover:after { 997 transform: skew(-20deg) rotate(-9deg); 998 box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7); 999 } 1000 1001 .pressthis-bookmarklet span { 1002 display: inline-block; 1003 margin: 0px 0 0; 1004 padding: 0px 9px 8px 12px; 1005 } 1006 1007 .pressthis-bookmarklet span:before { 1008 color: #787c82; 1009 font: normal 20px/1 dashicons; 1010 content: "\f157"; 1011 position: relative; 1012 display: inline-block; 1013 top: 4px; 1014 margin-left: 4px; 1015 } 1016 1017 .pressthis-js-toggle { 1018 margin-right: 10px; 1019 padding: 0; 1020 height: auto; 1021 vertical-align: top; 1022 } 1023 1024 /* to override the button class being applied */ 1025 .pressthis-js-toggle.button.button { 1026 margin-right: 10px; 1027 padding: 0; 1028 height: auto; 1029 vertical-align: top; 1030 } 1031 1032 .pressthis-js-toggle .dashicons { 1033 margin: 5px 7px 6px 8px; 1034 color: #50575e; 1035 } 1036 1037 /*------------------------------------------------------------------------------ 1038 20.0 - Settings 1039 ------------------------------------------------------------------------------*/ 1040 1041 .timezone-info code { 1042 white-space: nowrap; 1043 } 1044 1045 .defaultavatarpicker .avatar { 1046 margin: 2px 0; 1047 vertical-align: middle; 1048 } 1049 1050 .options-general-php .date-time-text { 1051 display: inline-block; 1052 min-width: 10em; 1053 } 1054 1055 .options-general-php input.small-text { 1056 width: 56px; 1057 margin: -2px 0; 1058 } 1059 1060 .options-general-php .spinner { 1061 float: none; 1062 margin: -3px 3px 0; 1063 } 1064 1065 .settings-php .language-install-spinner, 1066 .options-general-php .language-install-spinner { 1067 display: inline-block; 1068 float: none; 1069 margin: -3px 5px 0; 1070 vertical-align: middle; 1071 } 1072 1073 .form-table.permalink-structure .available-structure-tags li { 1074 float: right; 1075 margin-left: 5px; 1076 } 1077 1078 /*------------------------------------------------------------------------------ 1079 21.0 - Network Admin 1080 ------------------------------------------------------------------------------*/ 1081 1082 .setup-php textarea { 1083 max-width: 100%; 1084 } 1085 1086 .form-field #site-address { 1087 max-width: 25em; 1088 } 1089 1090 .form-field #domain { 1091 max-width: 22em; 1092 } 1093 1094 .form-field #site-title, 1095 .form-field #admin-email, 1096 .form-field #path, 1097 .form-field #blog_registered, 1098 .form-field #blog_last_updated { 1099 max-width: 25em; 1100 } 1101 1102 .form-field #path { 1103 margin-bottom: 5px; 1104 } 1105 1106 #search-users, 1107 #search-sites { 1108 max-width: 60%; 1109 } 1110 1111 /*------------------------------------------------------------------------------ 1112 Credentials check dialog for Install and Updates 1113 ------------------------------------------------------------------------------*/ 1114 1115 .request-filesystem-credentials-dialog { 1116 display: none; 1117 /* The customizer uses visibility: hidden on the body for full-overlays. */ 1118 visibility: visible; 1119 } 1120 1121 .request-filesystem-credentials-dialog .notification-dialog { 1122 top: 10%; 1123 max-height: 85%; 1124 } 1125 1126 .request-filesystem-credentials-dialog-content { 1127 margin: 25px; 1128 } 1129 1130 #request-filesystem-credentials-title { 1131 font-size: 1.3em; 1132 margin: 1em 0; 1133 } 1134 1135 .request-filesystem-credentials-form legend { 1136 font-size: 1em; 1137 padding: 1.33em 0; 1138 font-weight: 600; 1139 } 1140 1141 .request-filesystem-credentials-form input[type="text"], 1142 .request-filesystem-credentials-form input[type="password"] { 1143 display: block; 1144 } 1145 1146 .request-filesystem-credentials-dialog input[type="text"], 1147 .request-filesystem-credentials-dialog input[type="password"] { 1148 width: 100%; 1149 } 1150 1151 .request-filesystem-credentials-form .field-title { 1152 font-weight: 600; 1153 } 1154 1155 .request-filesystem-credentials-dialog label[for="hostname"], 1156 .request-filesystem-credentials-dialog label[for="public_key"], 1157 .request-filesystem-credentials-dialog label[for="private_key"] { 1158 display: block; 1159 margin-bottom: 1em; 1160 } 1161 1162 .request-filesystem-credentials-dialog .ftp-username, 1163 .request-filesystem-credentials-dialog .ftp-password { 1164 float: right; 1165 width: 48%; 1166 } 1167 1168 .request-filesystem-credentials-dialog .ftp-password { 1169 margin-right: 4%; 1170 } 1171 1172 .request-filesystem-credentials-dialog .request-filesystem-credentials-action-buttons { 1173 text-align: left; 1174 } 1175 1176 .request-filesystem-credentials-dialog label[for="ftp"] { 1177 margin-left: 10px; 1178 } 1179 1180 .request-filesystem-credentials-dialog #auth-keys-desc { 1181 margin-bottom: 0; 1182 } 1183 1184 #request-filesystem-credentials-dialog .button:not(:last-child) { 1185 margin-left: 10px; 1186 } 1187 1188 #request-filesystem-credentials-form .cancel-button { 1189 display: none; 1190 } 1191 1192 #request-filesystem-credentials-dialog .cancel-button { 1193 display: inline; 1194 } 1195 1196 .request-filesystem-credentials-dialog .ftp-username, 1197 .request-filesystem-credentials-dialog .ftp-password { 1198 float: none; 1199 width: auto; 1200 } 1201 1202 .request-filesystem-credentials-dialog .ftp-username { 1203 margin-bottom: 1em; 1204 } 1205 1206 .request-filesystem-credentials-dialog .ftp-password { 1207 margin: 0; 1208 } 1209 1210 .request-filesystem-credentials-dialog .ftp-password em { 1211 color: #8c8f94; 1212 } 1213 1214 .request-filesystem-credentials-dialog label { 1215 display: block; 1216 line-height: 1.5; 1217 margin-bottom: 1em; 1218 } 1219 1220 .request-filesystem-credentials-form legend { 1221 padding-bottom: 0; 1222 } 1223 1224 .request-filesystem-credentials-form #ssh-keys legend { 1225 font-size: 1.3em; 1226 } 1227 1228 .request-filesystem-credentials-form .notice { 1229 margin: 0 0 20px 0; 1230 clear: both; 1231 } 1232 1233 /*------------------------------------------------------------------------------ 1234 Privacy Policy settings screen 1235 ------------------------------------------------------------------------------*/ 1236 .tools-privacy-policy-page form { 1237 margin-bottom: 1.3em; 1238 } 1239 1240 .tools-privacy-policy-page input.button, 1241 .tools-privacy-policy-page select { 1242 margin: 0 6px 0 1px; 1243 } 1244 1245 .tools-privacy-edit { 1246 margin: 1.5em 0; 1247 } 1248 1249 .tools-privacy-policy-page span { 1250 line-height: 2; 1251 } 1252 1253 .privacy_requests .column-email { 1254 width: 40%; 1255 } 1256 1257 .privacy_requests .column-type { 1258 text-align: center; 1259 } 1260 1261 .privacy_requests thead td:first-child, 1262 .privacy_requests tfoot td:first-child { 1263 border-right: 4px solid #fff; 1264 } 1265 1266 .privacy_requests tbody th { 1267 border-right: 4px solid #fff; 1268 background: #fff; 1269 box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); 1270 } 1271 1272 .privacy_requests .row-actions { 1273 color: #787c82; 1274 } 1275 1276 .privacy_requests .row-actions.processing { 1277 position: static; 1278 } 1279 1280 .privacy_requests tbody .has-request-results th { 1281 box-shadow: none; 1282 } 1283 1284 .privacy_requests tbody .request-results th .notice { 1285 margin: 0 0 5px; 1286 } 1287 1288 .privacy_requests tbody td { 1289 background: #fff; 1290 box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); 1291 } 1292 1293 .privacy_requests tbody .has-request-results td { 1294 box-shadow: none; 1295 } 1296 1297 .privacy_requests .next_steps .button { 1298 word-wrap: break-word; 1299 white-space: normal; 1300 } 1301 1302 .privacy_requests .status-request-confirmed th, 1303 .privacy_requests .status-request-confirmed td { 1304 background-color: #fff; 1305 border-right-color: #72aee6; 1306 } 1307 1308 .privacy_requests .status-request-failed th, 1309 .privacy_requests .status-request-failed td { 1310 background-color: #f6f7f7; 1311 border-right-color: #d63638; 1312 } 1313 1314 .privacy_requests .export_personal_data_failed a { 1315 vertical-align: baseline; 1316 } 1317 1318 .status-label { 1319 font-weight: 600; 1320 } 1321 1322 .status-label.status-request-pending { 1323 font-weight: 400; 1324 font-style: italic; 1325 color: #646970; 1326 } 1327 1328 .status-label.status-request-failed { 1329 color: #d63638; 1330 font-weight: 600; 1331 } 1332 1333 .wp-privacy-request-form { 1334 clear: both; 1335 } 1336 1337 .wp-privacy-request-form-field { 1338 margin: 1.5em 0; 1339 } 1340 1341 .wp-privacy-request-form input { 1342 margin: 0; 1343 } 1344 1345 .email-personal-data::before { 1346 display: inline-block; 1347 font: normal 20px/1 dashicons; 1348 margin: 3px -2px 0 5px; 1349 speak: never; 1350 -webkit-font-smoothing: antialiased; 1351 -moz-osx-font-smoothing: grayscale; 1352 vertical-align: top; 1353 } 1354 1355 .email-personal-data--sending::before { 1356 color: #d63638; 1357 content: "\f463"; 1358 animation: rotation 2s infinite linear; 1359 } 1360 1361 .email-personal-data--sent::before { 1362 color: #68de7c; 1363 content: "\f147"; 1364 } 1365 1366 1367 /* =Media Queries 1368 -------------------------------------------------------------- */ 1369 1370 @media screen and (max-width: 782px) { 1371 /* Input Elements */ 1372 textarea { 1373 -webkit-appearance: none; 1374 } 1375 1376 input[type="text"], 1377 input[type="password"], 1378 input[type="date"], 1379 input[type="datetime"], 1380 input[type="datetime-local"], 1381 input[type="email"], 1382 input[type="month"], 1383 input[type="number"], 1384 input[type="search"], 1385 input[type="tel"], 1386 input[type="time"], 1387 input[type="url"], 1388 input[type="week"] { 1389 -webkit-appearance: none; 1390 padding: 3px 10px; 1391 /* Only necessary for IE11 */ 1392 min-height: 40px; 1393 } 1394 1395 ::-webkit-datetime-edit { 1396 line-height: 1.875; /* 30px */ 1397 } 1398 1399 input[type="checkbox"], 1400 .widefat th input[type="checkbox"], 1401 .widefat thead td input[type="checkbox"], 1402 .widefat tfoot td input[type="checkbox"] { 1403 -webkit-appearance: none; 1404 } 1405 1406 .widefat th input[type="checkbox"], 1407 .widefat thead td input[type="checkbox"], 1408 .widefat tfoot td input[type="checkbox"] { 1409 margin-bottom: 8px; 1410 } 1411 1412 input[type="checkbox"]:checked:before, 1413 .widefat th input[type="checkbox"]:before, 1414 .widefat thead td input[type="checkbox"]:before, 1415 .widefat tfoot td input[type="checkbox"]:before { 1416 width: 1.875rem; 1417 height: 1.875rem; 1418 margin: -0.1875rem -0.3125rem; 1419 } 1420 1421 input[type="radio"], 1422 input[type="checkbox"] { 1423 height: 1.5625rem; 1424 width: 1.5625rem; 1425 } 1426 1427 .wp-admin p input[type="checkbox"], 1428 .wp-admin p input[type="radio"] { 1429 margin-top: -0.1875rem; 1430 } 1431 1432 input[type="radio"]:checked:before { 1433 vertical-align: middle; 1434 width: 0.5625rem; 1435 height: 0.5625rem; 1436 margin: 0.4375rem; 1437 line-height: 0.76190476; 1438 } 1439 1440 .wp-upload-form input[type="submit"] { 1441 margin-top: 10px; 1442 } 1443 1444 .wp-core-ui select, 1445 .wp-admin .form-table select { 1446 min-height: 40px; 1447 font-size: 16px; 1448 line-height: 1.625; /* 26px */ 1449 padding: 5px 8px 5px 24px; 1450 } 1451 1452 .wp-admin .button-cancel { 1453 margin-bottom: 0; 1454 padding: 2px 0; 1455 font-size: 14px; 1456 vertical-align: middle; 1457 } 1458 1459 #adduser .form-field input, 1460 #createuser .form-field input { 1461 width: 100%; 1462 } 1463 1464 .form-table { 1465 box-sizing: border-box; 1466 } 1467 1468 .form-table th, 1469 .form-table td, 1470 .label-responsive { 1471 display: block; 1472 width: auto; 1473 vertical-align: middle; 1474 } 1475 1476 .label-responsive { 1477 margin: 0.5em 0; 1478 } 1479 1480 .export-filters li { 1481 margin-bottom: 0; 1482 } 1483 1484 .form-table .color-palette td { 1485 display: table-cell; 1486 width: 15px; 1487 } 1488 1489 .form-table table.color-palette { 1490 margin-left: 10px; 1491 } 1492 1493 textarea, 1494 input { 1495 font-size: 16px; 1496 } 1497 1498 .form-table td input[type="text"], 1499 .form-table td input[type="email"], 1500 .form-table td input[type="password"], 1501 .form-table td select, 1502 .form-table td textarea, 1503 .form-table span.description, 1504 #profile-page .form-table textarea { 1505 width: 100%; 1506 display: block; 1507 max-width: none; 1508 box-sizing: border-box; 1509 } 1510 1511 .form-table .form-required.form-invalid td:after { 1512 float: left; 1513 margin: -30px 0 0 3px; 1514 } 1515 1516 input[type="text"].small-text, 1517 input[type="search"].small-text, 1518 input[type="password"].small-text, 1519 input[type="number"].small-text, 1520 input[type="number"].small-text, 1521 .form-table input[type="text"].small-text { 1522 width: auto; 1523 max-width: 4.375em; /* 70px, enough for 4 digits to fit comfortably */ 1524 display: inline; 1525 padding: 3px 6px; 1526 margin: 0 3px; 1527 } 1528 1529 #pass-strength-result { 1530 width: 100%; 1531 box-sizing: border-box; 1532 padding: 8px; 1533 } 1534 1535 p.search-box { 1536 float: none; 1537 position: absolute; 1538 bottom: 0; 1539 width: 98%; 1540 height: 90px; 1541 margin-bottom: 20px; 1542 } 1543 1544 p.search-box input[name="s"] { 1545 float: none; 1546 width: 100%; 1547 margin-bottom: 10px; 1548 vertical-align: middle; 1549 } 1550 1551 p.search-box input[type="submit"] { 1552 margin-bottom: 10px; 1553 } 1554 1555 .form-table span.description { 1556 display: inline; 1557 padding: 4px 0 0; 1558 line-height: 1.4; 1559 font-size: 14px; 1560 } 1561 1562 .form-table th { 1563 padding: 10px 0 0 0; 1564 border-bottom: 0; 1565 } 1566 1567 .form-table td { 1568 margin-bottom: 0; 1569 padding: 4px 0 6px 0; 1570 } 1571 1572 .form-table.permalink-structure td code { 1573 margin-right: 32px; 1574 display: inline-block; 1575 } 1576 1577 .form-table.permalink-structure td input[type="text"] { 1578 margin-right: 32px; 1579 margin-top: 4px; 1580 width: 96%; 1581 } 1582 1583 .form-table input.regular-text { 1584 width: 100%; 1585 } 1586 1587 .form-table label { 1588 font-size: 14px; 1589 } 1590 1591 .background-position-control .button-group > label { 1592 font-size: 0; 1593 } 1594 1595 .form-table fieldset label { 1596 display: block; 1597 } 1598 1599 #utc-time, 1600 #local-time { 1601 display: block; 1602 float: none; 1603 margin-top: 0.5em; 1604 } 1605 1606 .form-field #domain { 1607 max-width: none; 1608 } 1609 1610 /* New Password */ 1611 .wp-pwd { 1612 position: relative; 1613 } 1614 1615 /* Needs higher specificity than normal input type text and password. */ 1616 #profile-page .form-table #pass1 { 1617 padding-left: 90px; 1618 } 1619 1620 .wp-pwd button.button { 1621 background: transparent; 1622 border: 1px solid transparent; 1623 box-shadow: none; 1624 line-height: 2; 1625 margin: 0; 1626 padding: 5px 9px; 1627 position: absolute; 1628 left: 0; 1629 top: 0; 1630 width: 2.375rem; 1631 height: 2.375rem; 1632 min-width: 40px; 1633 min-height: 40px; 1634 } 1635 1636 .wp-pwd button.wp-hide-pw { 1637 left: 2.5rem; 1638 } 1639 1640 .wp-pwd button.button:hover, 1641 .wp-pwd button.button:focus { 1642 background: transparent; 1643 } 1644 1645 .wp-pwd button.button:active { 1646 background: transparent; 1647 box-shadow: none; 1648 transform: none; 1649 } 1650 1651 .wp-pwd .button .text { 1652 display: none; 1653 } 1654 1655 .wp-pwd [type="text"], 1656 .wp-pwd [type="password"] { 1657 line-height: 2; 1658 padding-left: 5rem; 1659 } 1660 1661 .wp-cancel-pw .dashicons-no { 1662 display: inline-block; 1663 } 1664 1665 .options-general-php input[type="text"].small-text { 1666 max-width: 6.25em; 1667 margin: 0; 1668 } 1669 1670 /* Privacy Policy settings screen */ 1671 .tools-privacy-policy-page form.wp-create-privacy-page { 1672 margin-bottom: 1em; 1673 } 1674 1675 .tools-privacy-policy-page input#set-page, 1676 .tools-privacy-policy-page select { 1677 margin: 10px 0 0; 1678 } 1679 1680 .tools-privacy-policy-page .wp-create-privacy-page span { 1681 display: block; 1682 margin-bottom: 1em; 1683 } 1684 1685 .tools-privacy-policy-page .wp-create-privacy-page .button { 1686 margin-right: 0; 1687 } 1688 1689 .wp-list-table.privacy_requests tr:not(.inline-edit-row):not(.no-items) td.column-primary:not(.check-column) { 1690 display: table-cell; 1691 } 1692 1693 .wp-list-table.privacy_requests.widefat th input, 1694 .wp-list-table.privacy_requests.widefat thead td input { 1695 margin-right: 5px; 1696 } 1697 1698 .wp-privacy-request-form-field input[type="text"] { 1699 width: 100%; 1700 margin-bottom: 10px; 1701 vertical-align: middle; 1702 } 1703 1704 .regular-text { 1705 max-width: 100%; 1706 } 1707 } 1708 1709 @media only screen and (max-width: 768px) { 1710 .form-field input[type="text"], 1711 .form-field input[type="email"], 1712 .form-field input[type="password"], 1713 .form-field select, 1714 .form-field textarea { 1715 width: 99%; 1716 } 1717 1718 .form-wrap .form-field { 1719 padding: 0; 1720 } 1721 } 1722 1723 @media only screen and (max-height: 480px), screen and (max-width: 450px) { 1724 /* Request Credentials / File Editor Warning */ 1725 .request-filesystem-credentials-dialog .notification-dialog, 1726 .file-editor-warning .notification-dialog { 1727 width: 100%; 1728 height: 100%; 1729 max-height: 100%; 1730 position: fixed; 1731 top: 0; 1732 margin: 0; 1733 right: 0; 1734 } 1735 } 1736 1737 /* Smartphone */ 1738 @media screen and (max-width: 600px) { 1739 /* Color Picker Options */ 1740 .color-option { 1741 width: 49%; 1742 } 1743 } 1744 1745 @media only screen and (max-width: 320px) { 1746 .options-general-php .date-time-text.date-time-custom-text { 1747 min-width: 0; 1748 margin-left: 0.5em; 1749 } 1750 } 1751 1752 @keyframes rotation { 1753 0% { 1754 transform: rotate(0deg); 1755 } 1756 100% { 1757 transform: rotate(-359deg); 1758 } 1759 }