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