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