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