[ Index ] |
PHP Cross Reference of WordPress Trunk (Updated Daily) |
[Summary view] [Print] [Text view]
1 /*------------------------------------------------------------------------------ 2 14.0 - Media Screen 3 ------------------------------------------------------------------------------*/ 4 5 .media-item .describe { 6 border-collapse: collapse; 7 width: 100%; 8 border-top: 1px solid #dcdcde; 9 clear: both; 10 cursor: default; 11 } 12 13 .media-item.media-blank .describe { 14 border: 0; 15 } 16 17 .media-item .describe th { 18 vertical-align: top; 19 text-align: left; 20 padding: 5px 10px 10px; 21 width: 140px; 22 } 23 24 .media-item .describe .align th { 25 padding-top: 0; 26 } 27 28 .media-item .media-item-info tr { 29 background-color: transparent; 30 } 31 32 .media-item .describe td { 33 padding: 0 8px 8px 0; 34 vertical-align: top; 35 } 36 37 .media-item thead.media-item-info td { 38 padding: 4px 10px 0; 39 } 40 41 .media-item .media-item-info .A1B1 { 42 padding: 0 0 0 10px; 43 } 44 45 .media-item td.savesend { 46 padding-bottom: 15px; 47 } 48 49 .media-item .thumbnail { 50 max-height: 128px; 51 max-width: 128px; 52 } 53 54 .media-list-subtitle { 55 display: block; 56 } 57 58 .media-list-title { 59 display: block; 60 } 61 62 #wpbody-content #async-upload-wrap a { 63 display: none; 64 } 65 66 .media-upload-form { 67 margin-top: 20px; 68 } 69 70 .media-upload-form td label { 71 margin-right: 6px; 72 margin-left: 2px; 73 } 74 75 .media-upload-form .align .field label { 76 display: inline; 77 padding: 0 0 0 23px; 78 margin: 0 1em 0 3px; 79 font-weight: 600; 80 } 81 82 .media-upload-form tr.image-size label { 83 margin: 0 0 0 5px; 84 font-weight: 600; 85 } 86 87 .media-upload-form th.label label { 88 font-weight: 600; 89 margin: 0.5em; 90 font-size: 13px; 91 } 92 93 .media-upload-form th.label label span { 94 padding: 0 5px; 95 } 96 97 .media-item .describe input[type="text"], 98 .media-item .describe textarea { 99 width: 460px; 100 } 101 102 .media-item .describe p.help { 103 margin: 0; 104 padding: 0 0 0 5px; 105 } 106 107 .describe-toggle-on, 108 .describe-toggle-off { 109 display: block; 110 line-height: 2.76923076; 111 float: right; 112 margin-right: 10px; 113 } 114 115 .media-item-wrapper { 116 display: grid; 117 grid-template-columns: 1fr 1fr; 118 } 119 120 .media-item .attachment-tools { 121 display: flex; 122 justify-content: flex-end; 123 align-items: center; 124 } 125 126 .media-item .edit-attachment { 127 padding: 14px 0; 128 display: block; 129 margin-right: 10px; 130 } 131 132 .media-item .edit-attachment.copy-to-clipboard-container { 133 display: flex; 134 margin-top: 0; 135 } 136 137 .media-item-copy-container .success { 138 line-height: 0; 139 } 140 141 .media-item button .copy-attachment-url { 142 margin-top: 14px; 143 } 144 145 .media-item .copy-to-clipboard-container { 146 margin-top: 7px; 147 } 148 149 .media-item .describe-toggle-off, 150 .media-item.open .describe-toggle-on { 151 display: none; 152 } 153 154 .media-item.open .describe-toggle-off { 155 display: block; 156 } 157 158 .media-upload-form .media-item { 159 min-height: 70px; 160 margin-bottom: 1px; 161 position: relative; 162 width: 100%; 163 background: #fff; 164 } 165 166 .media-upload-form .media-item, 167 .media-upload-form .media-item .error { 168 box-shadow: 0 1px 0 #dcdcde; 169 } 170 171 #media-items:empty { 172 border: 0 none; 173 } 174 175 .media-item .filename { 176 padding: 14px 0; 177 overflow: hidden; 178 margin-left: 6px; 179 } 180 181 .media-item .pinkynail { 182 float: left; 183 margin: 0 10px 0 0; 184 max-height: 70px; 185 max-width: 70px; 186 } 187 188 .media-item .startopen, 189 .media-item .startclosed { 190 display: none; 191 } 192 193 .media-item .original { 194 position: relative; 195 min-height: 34px; 196 } 197 198 .media-item .progress { 199 float: right; 200 height: 22px; 201 margin: 7px 6px; 202 width: 200px; 203 line-height: 2em; 204 padding: 0; 205 overflow: hidden; 206 border-radius: 22px; 207 background: #dcdcde; 208 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); 209 } 210 211 .media-item .bar { 212 z-index: 9; 213 width: 0; 214 height: 100%; 215 margin-top: -22px; 216 border-radius: 22px; 217 background-color: #2271b1; 218 box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3); 219 } 220 221 .media-item .progress .percent { 222 z-index: 10; 223 position: relative; 224 width: 200px; 225 padding: 0; 226 color: #fff; 227 text-align: center; 228 line-height: 22px; 229 font-weight: 400; 230 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); 231 } 232 233 .upload-php .fixed .column-parent { 234 width: 15%; 235 } 236 237 .js .html-uploader #plupload-upload-ui { 238 display: none; 239 } 240 241 .js .html-uploader #html-upload-ui { 242 display: block; 243 } 244 245 #html-upload-ui #async-upload { 246 font-size: 1em; 247 } 248 249 .media-upload-form .media-item.error, 250 .media-upload-form .media-item .error { 251 width: auto; 252 margin: 0 0 1px; 253 } 254 255 .media-upload-form .media-item .error { 256 padding: 10px 0 10px 14px; 257 min-height: 50px; 258 } 259 260 .media-item .error-div button.dismiss { 261 float: right; 262 margin: 0 10px 0 15px; 263 } 264 265 /*------------------------------------------------------------------------------ 266 14.1 - Media Library 267 ------------------------------------------------------------------------------*/ 268 269 .find-box { 270 background-color: #fff; 271 box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); 272 width: 600px; 273 overflow: hidden; 274 margin-left: -300px; 275 position: fixed; 276 top: 30px; 277 bottom: 30px; 278 left: 50%; 279 z-index: 100105; 280 } 281 282 .find-box-head { 283 background: #fff; 284 border-bottom: 1px solid #dcdcde; 285 height: 36px; 286 font-size: 18px; 287 font-weight: 600; 288 line-height: 2; 289 padding: 0 36px 0 16px; 290 position: absolute; 291 top: 0; 292 left: 0; 293 right: 0; 294 } 295 296 .find-box-inside { 297 overflow: auto; 298 padding: 16px; 299 background-color: #fff; 300 position: absolute; 301 top: 37px; 302 bottom: 45px; 303 overflow-y: scroll; 304 width: 100%; 305 box-sizing: border-box; 306 } 307 308 .find-box-search { 309 padding-bottom: 16px; 310 } 311 312 .find-box-search .spinner { 313 float: none; 314 left: 105px; 315 position: absolute; 316 } 317 318 .find-box-search, 319 #find-posts-response { 320 position: relative; /* RTL fix, #WP28010 */ 321 } 322 323 #find-posts-input, 324 #find-posts-search { 325 float: left; 326 } 327 328 #find-posts-input { 329 width: 140px; 330 height: 28px; 331 margin: 0 4px 0 0; 332 } 333 334 .widefat .found-radio { 335 padding-right: 0; 336 width: 16px; 337 } 338 339 #find-posts-close { 340 width: 36px; 341 height: 36px; 342 border: none; 343 padding: 0; 344 position: absolute; 345 top: 0; 346 right: 0; 347 cursor: pointer; 348 text-align: center; 349 background: none; 350 color: #646970; 351 } 352 353 #find-posts-close:hover, 354 #find-posts-close:focus { 355 color: #135e96; 356 } 357 358 #find-posts-close:focus { 359 box-shadow: 0 0 0 2px #2271b1; 360 /* Only visible in Windows High Contrast mode */ 361 outline: 2px solid transparent; 362 outline-offset: -2px; 363 } 364 365 #find-posts-close:before { 366 font: normal 20px/36px dashicons; 367 vertical-align: top; 368 speak: never; 369 -webkit-font-smoothing: antialiased; 370 -moz-osx-font-smoothing: grayscale; 371 content: "\f158"; 372 } 373 374 .find-box-buttons { 375 padding: 8px 16px; 376 background: #fff; 377 border-top: 1px solid #dcdcde; 378 position: absolute; 379 bottom: 0; 380 left: 0; 381 right: 0; 382 } 383 384 @media screen and (max-width: 782px) { 385 .find-box-inside { 386 bottom: 57px; 387 } 388 } 389 390 @media screen and (max-width: 660px) { 391 392 .find-box { 393 top: 0; 394 bottom: 0; 395 left: 0; 396 right: 0; 397 margin: 0; 398 width: 100%; 399 } 400 401 } 402 403 .ui-find-overlay { 404 position: fixed; 405 top: 0; 406 left: 0; 407 right: 0; 408 bottom: 0; 409 background: #000; 410 opacity: 0.7; 411 filter: alpha(opacity=70); 412 z-index: 100100; 413 } 414 415 .drag-drop #drag-drop-area { 416 border: 4px dashed #c3c4c7; 417 height: 200px; 418 } 419 420 .drag-drop .drag-drop-inside { 421 margin: 60px auto 0; 422 width: 250px; 423 } 424 425 .drag-drop-inside p { 426 font-size: 14px; 427 margin: 5px 0; 428 display: none; 429 } 430 431 .drag-drop .drag-drop-inside p { 432 text-align: center; 433 } 434 435 .drag-drop-inside p.drag-drop-info { 436 font-size: 20px; 437 } 438 439 .drag-drop .drag-drop-inside p, 440 .drag-drop-inside p.drag-drop-buttons { 441 display: block; 442 } 443 444 /* 445 #drag-drop-area:-moz-drag-over { 446 border-color: #83b4d8; 447 } 448 border color while dragging a file over the uploader drop area */ 449 .drag-drop.drag-over #drag-drop-area { 450 border-color: #9ec2e6; 451 } 452 453 #plupload-upload-ui { 454 position: relative; 455 } 456 457 .post-type-attachment .wp-filter select { 458 margin: 0 6px 0 0; 459 } 460 461 /** 462 * Media Library grid view 463 */ 464 465 .media-frame.mode-grid, 466 .media-frame.mode-grid .media-frame-content, 467 .media-frame.mode-grid .attachments-browser:not(.has-load-more) .attachments, 468 .media-frame.mode-grid .attachments-browser.has-load-more .attachments-wrapper, 469 .media-frame.mode-grid .uploader-inline-content { 470 position: static; 471 } 472 473 /* Regions we don't use at all */ 474 .media-frame.mode-grid .media-frame-title, 475 .media-frame.mode-grid .media-frame-router, 476 .media-frame.mode-grid .media-frame-menu { 477 display: none; 478 } 479 480 .media-frame.mode-grid .media-frame-content { 481 background-color: transparent; 482 border: none; 483 } 484 485 .upload-php .mode-grid .media-sidebar { 486 position: relative; 487 width: auto; 488 margin-top: 12px; 489 padding: 0 16px; 490 border-left: 4px solid #d63638; 491 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); 492 background-color: #fff; 493 } 494 495 .upload-php .mode-grid .hide-sidebar .media-sidebar { 496 display: none; 497 } 498 499 .upload-php .mode-grid .media-sidebar .media-uploader-status { 500 border-bottom: none; 501 padding-bottom: 0; 502 max-width: 100%; 503 } 504 505 .upload-php .mode-grid .media-sidebar .upload-error { 506 margin: 12px 0; 507 padding: 4px 0 0; 508 border: none; 509 box-shadow: none; 510 background: none; 511 } 512 513 .upload-php .mode-grid .media-sidebar .media-uploader-status.errors h2 { 514 display: none; 515 } 516 517 .media-frame.mode-grid .uploader-inline { 518 position: relative; 519 top: auto; 520 right: auto; 521 left: auto; 522 bottom: auto; 523 padding-top: 0; 524 margin-top: 20px; 525 border: 4px dashed #c3c4c7; 526 } 527 528 .media-frame.mode-select .attachments-browser.fixed:not(.has-load-more) .attachments, 529 .media-frame.mode-select .attachments-browser.has-load-more.fixed .attachments-wrapper { 530 position: relative; 531 top: 94px; /* prevent jumping up when the toolbar becomes fixed */ 532 padding-bottom: 94px; /* offset for above so the bottom doesn't get cut off */ 533 } 534 535 .media-frame.mode-grid .attachment:focus, 536 .media-frame.mode-grid .selected.attachment:focus, 537 .media-frame.mode-grid .attachment.details:focus { 538 box-shadow: inset 0 0 0 2px #2271b1; 539 /* Only visible in Windows High Contrast mode */ 540 outline: 2px solid transparent; 541 outline-offset: -6px; 542 } 543 544 .media-frame.mode-grid .selected.attachment { 545 box-shadow: 546 inset 0 0 0 5px #f0f0f1, 547 inset 0 0 0 7px #c3c4c7; 548 } 549 550 .media-frame.mode-grid .attachment.details { 551 box-shadow: 552 inset 0 0 0 3px #f0f0f1, 553 inset 0 0 0 7px #4f94d4; 554 } 555 556 .media-frame.mode-grid.mode-select .attachment .thumbnail { 557 opacity: 0.65; 558 } 559 560 .media-frame.mode-select .attachment.selected .thumbnail { 561 opacity: 1; 562 } 563 564 .media-frame.mode-grid .media-toolbar { 565 margin-bottom: 15px; 566 height: auto; 567 } 568 569 .media-frame.mode-grid .media-toolbar select { 570 margin: 0 10px 0 0; 571 } 572 573 .media-frame.mode-grid.mode-edit .media-toolbar-secondary > .select-mode-toggle-button { 574 margin: 0 8px 0 0; 575 vertical-align: middle; 576 } 577 578 .media-frame.mode-grid .attachments-browser .bulk-select { 579 display: inline-block; 580 margin: 0 10px 0 0; 581 } 582 583 .media-frame.mode-grid .search { 584 margin-top: 0; 585 } 586 587 .media-frame-content .media-search-input-label { 588 vertical-align: baseline; 589 } 590 591 .attachments-browser .media-toolbar-secondary > .media-button { 592 margin-right: 10px; 593 } 594 595 .media-frame.mode-select .attachments-browser.fixed .media-toolbar { 596 position: fixed; 597 top: 32px; 598 left: auto; 599 right: 20px; 600 margin-top: 0; 601 } 602 603 .media-frame.mode-grid .attachments-browser { 604 padding: 0; 605 } 606 607 .media-frame.mode-grid .attachments-browser .attachments { 608 padding: 2px; 609 } 610 611 .media-frame.mode-grid .attachments-browser .no-media { 612 color: #646970; /* same as no plugins and no themes */ 613 font-size: 18px; 614 font-style: normal; 615 margin: 0; 616 padding: 100px 0 0; 617 text-align: center; 618 } 619 620 /** 621 * Attachment details modal 622 */ 623 624 .edit-attachment-frame { 625 display: block; 626 height: 100%; 627 width: 100%; 628 } 629 630 .edit-attachment-frame .edit-media-header { 631 overflow: hidden; 632 } 633 634 .upload-php .media-modal-close .media-modal-icon:before { 635 content: "\f335"; 636 font-size: 22px; 637 } 638 639 .upload-php .media-modal-close, 640 .edit-attachment-frame .edit-media-header .left, 641 .edit-attachment-frame .edit-media-header .right { 642 cursor: pointer; 643 color: #787c82; 644 background-color: transparent; 645 height: 50px; 646 width: 50px; 647 padding: 0; 648 position: absolute; 649 text-align: center; 650 border: 0; 651 border-left: 1px solid #dcdcde; 652 transition: color .1s ease-in-out, background .1s ease-in-out; 653 } 654 655 .upload-php .media-modal-close { 656 top: 0; 657 right: 0; 658 } 659 660 .edit-attachment-frame .edit-media-header .left { 661 right: 102px; 662 } 663 664 .edit-attachment-frame .edit-media-header .right { 665 right: 51px; 666 } 667 668 .edit-attachment-frame .media-frame-title { 669 left: 0; 670 right: 150px; /* leave space for prev/next/close */ 671 } 672 673 .edit-attachment-frame .edit-media-header .right:before, 674 .edit-attachment-frame .edit-media-header .left:before { 675 font: normal 20px/50px dashicons !important; 676 display: inline; 677 font-weight: 300; 678 } 679 680 .upload-php .media-modal-close:hover, 681 .upload-php .media-modal-close:focus, 682 .edit-attachment-frame .edit-media-header .left:hover, 683 .edit-attachment-frame .edit-media-header .right:hover, 684 .edit-attachment-frame .edit-media-header .left:focus, 685 .edit-attachment-frame .edit-media-header .right:focus { 686 background: #dcdcde; 687 border-color: #c3c4c7; 688 color: #000; 689 outline: none; 690 box-shadow: none; 691 } 692 693 .upload-php .media-modal-close:focus, 694 .edit-attachment-frame .edit-media-header .left:focus, 695 .edit-attachment-frame .edit-media-header .right:focus { 696 /* Only visible in Windows High Contrast mode */ 697 outline: 2px solid transparent; 698 outline-offset: -2px; 699 } 700 701 .upload-php .media-modal-close:focus .media-modal-icon:before, 702 .upload-php .media-modal-close:hover .media-modal-icon:before { 703 color: #000; 704 } 705 706 .edit-attachment-frame .edit-media-header .left:before { 707 content: "\f341"; 708 } 709 710 .edit-attachment-frame .edit-media-header .right:before { 711 content: "\f345"; 712 } 713 714 .edit-attachment-frame .edit-media-header [disabled], 715 .edit-attachment-frame .edit-media-header [disabled]:hover { 716 color: #c3c4c7; 717 background: inherit; 718 cursor: default; 719 } 720 721 .edit-attachment-frame .media-frame-content, 722 .edit-attachment-frame .media-frame-router { 723 left: 0; 724 } 725 726 .edit-attachment-frame .media-frame-content { 727 border-bottom: none; 728 bottom: 0; 729 top: 50px; 730 } 731 732 .edit-attachment-frame .attachment-details { 733 position: absolute; 734 overflow: auto; 735 top: 0; 736 bottom: 0; 737 right: 0; 738 left: 0; 739 box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, 0.1); 740 } 741 742 .edit-attachment-frame .attachment-media-view { 743 float: left; 744 width: 65%; 745 height: 100%; 746 } 747 748 .edit-attachment-frame .attachment-media-view .thumbnail { 749 box-sizing: border-box; 750 padding: 16px; 751 height: 100%; 752 } 753 754 .edit-attachment-frame .attachment-media-view .details-image { 755 display: block; 756 margin: 0 auto 16px; 757 max-width: 100%; 758 max-height: 90%; 759 max-height: calc( 100% - 42px ); /* leave space for actions underneath */ 760 background-image: linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7); 761 background-position: 0 0, 10px 10px; 762 background-size: 20px 20px; 763 } 764 765 .edit-attachment-frame .attachment-media-view .details-image.icon { 766 background: none; 767 } 768 769 .edit-attachment-frame .attachment-media-view .attachment-actions { 770 text-align: center; 771 } 772 773 .edit-attachment-frame .wp-media-wrapper { 774 margin-bottom: 12px; 775 } 776 777 .edit-attachment-frame input, 778 .edit-attachment-frame textarea { 779 padding: 4px 8px; 780 line-height: 1.42857143; 781 } 782 783 .edit-attachment-frame .attachment-info { 784 overflow: auto; 785 box-sizing: border-box; 786 margin-bottom: 0; 787 padding: 12px 16px 0; 788 width: 35%; 789 height: 100%; 790 box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, 0.1); 791 border-bottom: 0; 792 border-left: 1px solid #dcdcde; 793 background: #f6f7f7; 794 } 795 796 .edit-attachment-frame .attachment-info .details, 797 .edit-attachment-frame .attachment-info .settings { 798 position: relative; /* RTL fix, #WP29352 */ 799 overflow: hidden; 800 float: none; 801 margin-bottom: 15px; 802 padding-bottom: 15px; 803 border-bottom: 1px solid #dcdcde; 804 } 805 806 .edit-attachment-frame .attachment-info .filename { 807 font-weight: 400; 808 color: #646970; 809 } 810 811 .edit-attachment-frame .attachment-info .thumbnail { 812 margin-bottom: 12px; 813 } 814 815 .attachment-info .actions { 816 margin-bottom: 16px; 817 } 818 819 .attachment-info .actions a { 820 display: inline; 821 text-decoration: none; 822 } 823 824 .copy-to-clipboard-container { 825 display: flex; 826 align-items: center; 827 margin-top: 8px; 828 clear: both; 829 } 830 831 .copy-to-clipboard-container .copy-attachment-url { 832 white-space: normal; 833 } 834 835 .copy-to-clipboard-container .success { 836 color: #007017; 837 margin-left: 8px; 838 } 839 840 /*------------------------------------------------------------------------------ 841 14.2 - Image Editor 842 ------------------------------------------------------------------------------*/ 843 .wp_attachment_details .attachment-alt-text { 844 margin-bottom: 5px; 845 } 846 847 .wp_attachment_details #attachment_alt { 848 max-width: 500px; 849 height: 3.28571428em; 850 } 851 852 .wp_attachment_details .attachment-alt-text-description { 853 margin-top: 5px; 854 } 855 856 .wp_attachment_details label[for="content"] { 857 font-size: 13px; 858 line-height: 1.5; 859 margin: 1em 0; 860 } 861 862 .wp_attachment_details #attachment_caption { 863 height: 4em; 864 } 865 866 .describe .image-editor { 867 vertical-align: top; 868 } 869 870 .imgedit-wrap { 871 position: relative; 872 padding-top: 10px; 873 } 874 875 .image-editor p, 876 .image-editor fieldset { 877 margin: 8px 0; 878 } 879 880 .image-editor legend { 881 margin-bottom: 5px; 882 } 883 884 .describe .imgedit-wrap .image-editor { 885 padding: 0 5px; 886 } 887 888 .wp_attachment_holder div.updated { 889 margin-top: 0; 890 } 891 892 .wp_attachment_holder .imgedit-wrap > div { 893 height: auto; 894 } 895 896 .imgedit-panel-content { 897 display: flex; 898 flex-wrap: wrap; 899 gap: 20px; 900 margin-bottom: 20px; 901 } 902 903 .imgedit-settings { 904 max-width: 400px; /* Prevent reflow when help info is expanded. */ 905 } 906 907 .imgedit-group-controls > * { 908 display: none; 909 } 910 911 .imgedit-panel-active .imgedit-group-controls > * { 912 display: block; 913 } 914 915 .wp_attachment_holder .imgedit-wrap .image-editor { 916 float: right; 917 width: 250px; 918 } 919 920 .image-editor input { 921 margin-top: 0; 922 vertical-align: middle; 923 } 924 925 .imgedit-wait { 926 position: absolute; 927 top: 0; 928 bottom: 0; 929 width: 100%; 930 background: #fff; 931 opacity: 0.7; 932 filter: alpha(opacity=70); 933 display: none; 934 } 935 936 .imgedit-wait:before { 937 content: ""; 938 display: block; 939 width: 20px; 940 height: 20px; 941 position: absolute; 942 left: 50%; 943 top: 50%; 944 margin: -10px 0 0 -10px; 945 background: transparent url(../images/spinner.gif) no-repeat center; 946 background-size: 20px 20px; 947 transform: translateZ(0); 948 } 949 950 .no-float { 951 float: none; 952 } 953 954 .media-disabled, 955 .image-editor .disabled { 956 /* WCAG 1.4.3 Text or images of text that are part of an inactive user 957 interface component ... have no contrast requirement. */ 958 color: #a7aaad; 959 } 960 961 .A1B1 { 962 overflow: hidden; 963 } 964 965 .wp_attachment_image .button, 966 .A1B1 .button { 967 float: left; 968 } 969 970 .no-js .wp_attachment_image .button { 971 display: none; 972 } 973 974 .wp_attachment_image .spinner, 975 .A1B1 .spinner { 976 float: left; 977 } 978 979 .imgedit-menu .note-no-rotate { 980 clear: both; 981 margin: 0; 982 padding: 1em 0 0; 983 } 984 985 .image-editor .imgedit-menu .button { 986 display: inline-block; 987 width: auto; 988 min-height: 28px; 989 font-size: 13px; 990 line-height: 2; 991 padding: 0 10px; 992 } 993 994 .imgedit-menu .button:after, 995 .imgedit-menu .button:before { 996 font: normal 16px/1 dashicons; 997 margin-right: 8px; 998 speak: never; 999 vertical-align: middle; 1000 position: relative; 1001 top: -2px; 1002 -webkit-font-smoothing: antialiased; 1003 -moz-osx-font-smoothing: grayscale; 1004 } 1005 1006 .imgedit-menu .imgedit-rotate.button:after { 1007 content: '\f140'; 1008 margin-left: 2px; 1009 margin-right: 0; 1010 } 1011 1012 .imgedit-menu .imgedit-rotate.button[aria-expanded="true"]:after { 1013 content: '\f142'; 1014 } 1015 1016 .imgedit-menu .button.disabled { 1017 color: #a7aaad; 1018 border-color: #dcdcde; 1019 background: #f6f7f7; 1020 box-shadow: none; 1021 text-shadow: 0 1px 0 #fff; 1022 cursor: default; 1023 transform: none; 1024 } 1025 1026 .imgedit-crop:before { 1027 content: "\f165"; 1028 } 1029 1030 .imgedit-scale:before { 1031 content: "\f211"; 1032 } 1033 1034 .imgedit-rotate:before { 1035 content: "\f167"; 1036 } 1037 1038 .imgedit-undo:before { 1039 content: "\f171"; 1040 } 1041 1042 .imgedit-redo:before { 1043 content: "\f172"; 1044 } 1045 1046 .imgedit-crop-wrap { 1047 position: relative; 1048 } 1049 1050 .imgedit-crop-wrap img { 1051 background-image: linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7); 1052 background-position: 0 0, 10px 10px; 1053 background-size: 20px 20px; 1054 } 1055 1056 .imgedit-crop-wrap { 1057 padding: 20px; 1058 background-image: linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7); 1059 background-position: 0 0, 10px 10px; 1060 background-size: 20px 20px; 1061 } 1062 1063 1064 .imgedit-crop { 1065 margin: 0 8px 0 0; 1066 } 1067 1068 .imgedit-rotate { 1069 margin: 0 8px 0 3px; 1070 } 1071 1072 .imgedit-undo { 1073 margin: 0 3px; 1074 } 1075 1076 .imgedit-redo { 1077 margin: 0 8px 0 3px; 1078 } 1079 1080 .imgedit-thumbnail-preview-group { 1081 display: flex; 1082 flex-wrap: wrap; 1083 column-gap: 10px; 1084 } 1085 1086 .imgedit-thumbnail-preview { 1087 margin: 10px 8px 0 0; 1088 } 1089 1090 .imgedit-thumbnail-preview-caption { 1091 display: block; 1092 } 1093 1094 #poststuff .imgedit-group-top h2 { 1095 display: inline-block; 1096 margin: 0; 1097 padding: 0; 1098 font-size: 14px; 1099 line-height: 1.4; 1100 } 1101 1102 #poststuff .imgedit-group-top .button-link { 1103 text-decoration: none; 1104 color: #1d2327; 1105 } 1106 1107 .imgedit-applyto .imgedit-label { 1108 display: block; 1109 padding: .5em 0 0; 1110 } 1111 1112 .imgedit-popup-menu, 1113 .imgedit-help { 1114 display: none; 1115 padding-bottom: 8px; 1116 } 1117 1118 .imgedit-panel-tools > .imgedit-menu { 1119 display: flex; 1120 column-gap: 4px; 1121 align-items: flex-start; 1122 flex-wrap: wrap; 1123 } 1124 1125 .imgedit-popup-menu { 1126 width: calc( 100% - 20px ); 1127 position: absolute; 1128 background: #fff; 1129 padding: 10px; 1130 box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); 1131 } 1132 1133 .image-editor .imgedit-menu .imgedit-popup-menu button { 1134 display: block; 1135 margin: 2px 0; 1136 width: 100%; 1137 white-space: break-spaces; 1138 line-height: 1.5; 1139 padding-top: 3px; 1140 padding-bottom: 2px; 1141 } 1142 1143 .imgedit-rotate-menu-container { 1144 position: relative; 1145 } 1146 1147 .imgedit-help.imgedit-restore { 1148 padding-bottom: 0; 1149 } 1150 1151 /* higher specificity than buttons */ 1152 .image-editor .imgedit-settings .imgedit-help-toggle, 1153 .image-editor .imgedit-settings .imgedit-help-toggle:hover, 1154 .image-editor .imgedit-settings .imgedit-help-toggle:active { 1155 border: 1px solid transparent; 1156 margin: -1px 0 0 -1px; 1157 padding: 0; 1158 background: transparent; 1159 color: #2271b1; 1160 font-size: 20px; 1161 line-height: 1; 1162 cursor: pointer; 1163 box-sizing: content-box; 1164 box-shadow: none; 1165 } 1166 1167 .image-editor .imgedit-settings .imgedit-help-toggle:focus { 1168 color: #2271b1; 1169 border-color: #2271b1; 1170 box-shadow: 0 0 0 1px #2271b1; 1171 /* Only visible in Windows High Contrast mode */ 1172 outline: 2px solid transparent; 1173 } 1174 1175 .form-table td.imgedit-response { 1176 padding: 0; 1177 } 1178 1179 .imgedit-submit-btn { 1180 margin-left: 20px; 1181 } 1182 1183 .imgedit-wrap .nowrap { 1184 white-space: nowrap; 1185 font-size: 12px; 1186 line-height: inherit; 1187 } 1188 1189 span.imgedit-scale-warn { 1190 display: flex; 1191 align-items: center; 1192 margin: 4px; 1193 gap: 4px; 1194 color: #b32d2e; 1195 font-style: normal; 1196 visibility: hidden; 1197 vertical-align: middle; 1198 } 1199 1200 .imgedit-save-target { 1201 margin: 8px 0; 1202 } 1203 1204 .imgedit-save-target legend { 1205 font-weight: 600; 1206 } 1207 1208 .imgedit-group { 1209 margin-bottom: 20px; 1210 } 1211 1212 .image-editor .imgedit-original-dimensions { 1213 display: inline-block; 1214 } 1215 1216 .image-editor .imgedit-scale-controls input[type="text"], 1217 .image-editor .imgedit-crop-ratio input[type="text"], 1218 .image-editor .imgedit-crop-sel input[type="text"], 1219 .image-editor .imgedit-scale-controls input[type="number"], 1220 .image-editor .imgedit-crop-ratio input[type="number"], 1221 .image-editor .imgedit-crop-sel input[type="number"] { 1222 width: 80px; 1223 font-size: 14px; 1224 padding: 0 8px; 1225 } 1226 1227 .imgedit-separator { 1228 display: inline-block; 1229 width: 7px; 1230 text-align: center; 1231 font-size: 13px; 1232 color: #3c434a; 1233 } 1234 1235 .image-editor .imgedit-scale-button-wrapper { 1236 margin-top: 0.3077em; 1237 display: block; 1238 } 1239 1240 .image-editor .imgedit-scale-controls .button { 1241 margin-bottom: 0; 1242 } 1243 1244 audio, video { 1245 display: inline-block; 1246 max-width: 100%; 1247 } 1248 1249 .wp-core-ui .mejs-container { 1250 width: 100%; 1251 max-width: 100%; 1252 } 1253 1254 .wp-core-ui .mejs-container * { 1255 box-sizing: border-box; 1256 } 1257 1258 .wp-core-ui .mejs-time { 1259 box-sizing: content-box; 1260 } 1261 1262 /* =Media Queries 1263 -------------------------------------------------------------- */ 1264 1265 /** 1266 * HiDPI Displays 1267 */ 1268 @media print, 1269 (min-resolution: 120dpi) { 1270 .imgedit-wait:before { 1271 background-image: url(../images/spinner-2x.gif); 1272 } 1273 } 1274 1275 @media screen and (max-width: 782px) { 1276 .edit-attachment-frame input, 1277 .edit-attachment-frame textarea { 1278 line-height: 1.5; 1279 } 1280 1281 .wp_attachment_details label[for="content"] { 1282 font-size: 14px; 1283 line-height: 1.5; 1284 } 1285 1286 .wp_attachment_details textarea { 1287 line-height: 1.5; 1288 } 1289 1290 .wp_attachment_details #attachment_alt { 1291 height: 3.375em; 1292 } 1293 1294 .media-upload-form .media-item.error, 1295 .media-upload-form .media-item .error { 1296 font-size: 13px; 1297 line-height: 1.5; 1298 } 1299 1300 .media-upload-form .media-item.error { 1301 padding: 1px 10px; 1302 } 1303 1304 .media-upload-form .media-item .error { 1305 padding: 10px 0 10px 12px; 1306 } 1307 1308 .image-editor .imgedit-scale input[type="text"], 1309 .image-editor .imgedit-crop-ratio input[type="text"], 1310 .image-editor .imgedit-crop-sel input[type="text"] { 1311 font-size: 16px; 1312 padding: 6px 10px; 1313 } 1314 1315 .wp_attachment_holder .imgedit-wrap .imgedit-panel-content, 1316 .wp_attachment_holder .imgedit-wrap .image-editor { 1317 float: none; 1318 width: auto; 1319 max-width: none; 1320 padding-bottom: 16px; 1321 } 1322 1323 .copy-to-clipboard-container .success { 1324 font-size: 14px; 1325 } 1326 1327 /* Restructure image editor on narrow viewports. */ 1328 .imgedit-crop-wrap img{ 1329 width: 100%; 1330 } 1331 1332 .media-modal .imgedit-wrap .imgedit-panel-content, 1333 .media-modal .imgedit-wrap .image-editor { 1334 position: initial !important; 1335 } 1336 1337 .media-modal .imgedit-wrap .image-editor { 1338 box-sizing: border-box; 1339 width: 100% !important; 1340 } 1341 1342 .image-editor .imgedit-scale-button-wrapper { 1343 display: inline-block; 1344 } 1345 } 1346 1347 @media only screen and (max-width: 600px) { 1348 .media-item-wrapper { 1349 grid-template-columns: 1fr; 1350 } 1351 } 1352 1353 /** 1354 * Media queries for media grid. 1355 */ 1356 @media only screen and (max-width: 1120px) { 1357 /* override for media-views.css */ 1358 #wp-media-grid .wp-filter .attachment-filters { 1359 max-width: 100%; 1360 } 1361 } 1362 1363 @media only screen and (max-width: 1000px) { 1364 /* override for forms.css */ 1365 .wp-filter p.search-box { 1366 float: none; 1367 width: 100%; 1368 margin-bottom: 20px; 1369 display: flex; 1370 flex-wrap: nowrap; 1371 column-gap: 0; 1372 } 1373 1374 .wp-filter p.search-box #media-search-input { 1375 width: 100%; 1376 } 1377 1378 } 1379 1380 @media only screen and (max-width: 782px) { 1381 .media-frame.mode-select .attachments-browser.fixed .media-toolbar { 1382 top: 46px; 1383 right: 10px; 1384 } 1385 } 1386 1387 @media only screen and (max-width: 600px) { 1388 .media-frame.mode-select .attachments-browser.fixed .media-toolbar { 1389 top: 0; 1390 } 1391 } 1392 1393 @media only screen and (max-width: 480px) { 1394 .edit-attachment-frame .media-frame-title { 1395 right: 110px; 1396 } 1397 1398 .upload-php .media-modal-close, 1399 .edit-attachment-frame .edit-media-header .left, 1400 .edit-attachment-frame .edit-media-header .right { 1401 width: 40px; 1402 height: 40px; 1403 } 1404 1405 .edit-attachment-frame .edit-media-header .right:before, 1406 .edit-attachment-frame .edit-media-header .left:before { 1407 line-height: 40px !important; 1408 } 1409 1410 .edit-attachment-frame .edit-media-header .left { 1411 right: 82px; 1412 } 1413 1414 .edit-attachment-frame .edit-media-header .right { 1415 right: 41px; 1416 } 1417 1418 .edit-attachment-frame .media-frame-content { 1419 top: 40px; 1420 } 1421 1422 .edit-attachment-frame .attachment-media-view { 1423 float: none; 1424 height: auto; 1425 width: 100%; 1426 } 1427 1428 .edit-attachment-frame .attachment-info { 1429 height: auto; 1430 width: 100%; 1431 } 1432 } 1433 1434 @media only screen and (max-width: 640px), screen and (max-height: 400px) { 1435 .upload-php .mode-grid .media-sidebar{ 1436 max-width: 100%; 1437 } 1438 }
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
Generated : Sat May 18 08:20:01 2024 | Cross-referenced by PHPXref |