media-views-rtl.css (58294B)
1 /*! This file is auto-generated */ 2 /** 3 * Base Styles 4 */ 5 .media-modal * { 6 box-sizing: content-box; 7 } 8 9 .media-modal input, 10 .media-modal select, 11 .media-modal textarea { 12 box-sizing: border-box; 13 } 14 15 .media-modal, 16 .media-frame { 17 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 18 font-size: 12px; 19 -webkit-overflow-scrolling: touch; 20 } 21 22 .media-modal legend { 23 padding: 0; 24 font-size: 13px; 25 } 26 27 .media-modal label { 28 font-size: 13px; 29 } 30 31 .media-modal .legend-inline { 32 position: absolute; 33 transform: translate(100%, 50%); 34 margin-right: -1%; 35 line-height: 1.2; 36 } 37 38 .media-frame a { 39 border-bottom: none; 40 color: #2271b1; 41 } 42 43 .media-frame a:hover, 44 .media-frame a:active { 45 color: #135e96; 46 } 47 48 .media-frame a:focus { 49 box-shadow: 50 0 0 0 1px #4f94d4, 51 0 0 2px 1px rgba(79, 148, 212, 0.8); 52 color: #043959; 53 /* Only visible in Windows High Contrast mode */ 54 outline: 1px solid transparent; 55 } 56 57 .media-frame a.button { 58 color: #2c3338; 59 } 60 61 .media-frame a.button:hover { 62 color: #1d2327; 63 } 64 65 .media-frame a.button-primary, 66 .media-frame a.button-primary:hover { 67 color: #fff; 68 } 69 70 .media-frame input, 71 .media-frame textarea { 72 padding: 6px 8px; 73 } 74 75 .media-frame select, 76 .wp-admin .media-frame select { 77 min-height: 30px; 78 vertical-align: middle; 79 } 80 81 .media-frame input[type="text"], 82 .media-frame input[type="password"], 83 .media-frame input[type="color"], 84 .media-frame input[type="date"], 85 .media-frame input[type="datetime"], 86 .media-frame input[type="datetime-local"], 87 .media-frame input[type="email"], 88 .media-frame input[type="month"], 89 .media-frame input[type="number"], 90 .media-frame input[type="search"], 91 .media-frame input[type="tel"], 92 .media-frame input[type="time"], 93 .media-frame input[type="url"], 94 .media-frame input[type="week"], 95 .media-frame textarea, 96 .media-frame select { 97 box-shadow: 0 0 0 transparent; 98 border-radius: 4px; 99 border: 1px solid #8c8f94; 100 background-color: #fff; 101 color: #2c3338; 102 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 103 font-size: 13px; 104 } 105 106 .media-frame input[type="text"], 107 .media-frame input[type="password"], 108 .media-frame input[type="date"], 109 .media-frame input[type="datetime"], 110 .media-frame input[type="datetime-local"], 111 .media-frame input[type="email"], 112 .media-frame input[type="month"], 113 .media-frame input[type="number"], 114 .media-frame input[type="search"], 115 .media-frame input[type="tel"], 116 .media-frame input[type="time"], 117 .media-frame input[type="url"], 118 .media-frame input[type="week"] { 119 padding: 0 8px; 120 /* inherits font size 13px */ 121 line-height: 2.15384615; /* 28px */ 122 } 123 124 /* Search field in the Media Library toolbar */ 125 .media-frame.mode-grid .wp-filter input[type="search"] { 126 font-size: 14px; 127 line-height: 2; 128 } 129 130 .media-frame input[type="text"]:focus, 131 .media-frame input[type="password"]:focus, 132 .media-frame input[type="number"]:focus, 133 .media-frame input[type="search"]:focus, 134 .media-frame input[type="email"]:focus, 135 .media-frame input[type="url"]:focus, 136 .media-frame textarea:focus, 137 .media-frame select:focus { 138 border-color: #3582c4; 139 box-shadow: 0 0 0 1px #3582c4; 140 outline: 2px solid transparent; 141 } 142 143 .media-frame input:disabled, 144 .media-frame textarea:disabled, 145 .media-frame input[readonly], 146 .media-frame textarea[readonly] { 147 background-color: #f0f0f1; 148 } 149 150 .media-frame input[type="search"] { 151 -webkit-appearance: textfield; 152 } 153 154 .media-frame ::-webkit-input-placeholder { 155 color: #646970; 156 } 157 158 .media-frame ::-moz-placeholder { 159 color: #646970; 160 opacity: 1; 161 } 162 163 .media-frame :-ms-input-placeholder { 164 color: #646970; 165 } 166 167 /* 168 * In some cases there's the need of higher specificity, 169 * for example higher than `.media-embed .setting`. 170 */ 171 .media-frame .hidden, 172 .media-frame .setting.hidden { 173 display: none; 174 } 175 176 /*! 177 * jQuery UI Draggable/Sortable 1.11.4 178 * http://jqueryui.com 179 * 180 * Copyright jQuery Foundation and other contributors 181 * Released under the MIT license. 182 * http://jquery.org/license 183 */ 184 .ui-draggable-handle, 185 .ui-sortable-handle { 186 touch-action: none; 187 } 188 189 /** 190 * Modal 191 */ 192 .media-modal { 193 position: fixed; 194 top: 30px; 195 right: 30px; 196 left: 30px; 197 bottom: 30px; 198 z-index: 160000; 199 } 200 201 .wp-customizer .media-modal { 202 z-index: 560000; 203 } 204 205 .media-modal-backdrop { 206 position: fixed; 207 top: 0; 208 right: 0; 209 left: 0; 210 bottom: 0; 211 min-height: 360px; 212 background: #000; 213 opacity: 0.7; 214 z-index: 159900; 215 } 216 217 .wp-customizer .media-modal-backdrop { 218 z-index: 559900; 219 } 220 221 .media-modal-close { 222 position: absolute; 223 top: 0; 224 left: 0; 225 width: 50px; 226 height: 50px; 227 margin: 0; 228 padding: 0; 229 border: 1px solid transparent; 230 background: none; 231 color: #646970; 232 z-index: 1000; 233 cursor: pointer; 234 outline: none; 235 transition: color .1s ease-in-out, background .1s ease-in-out; 236 } 237 238 .media-modal-close:hover, 239 .media-modal-close:active { 240 color: #135e96; 241 } 242 243 .media-modal-close:focus { 244 color: #135e96; 245 border-color: #4f94d4; 246 box-shadow: 0 0 3px rgba(34, 113, 177, 0.8); 247 /* Only visible in Windows High Contrast mode */ 248 outline: 2px solid transparent; 249 } 250 251 .media-modal-close span.media-modal-icon { 252 background-image: none; 253 } 254 255 .media-modal-close .media-modal-icon:before { 256 content: "\f158"; 257 font: normal 20px/1 dashicons; 258 speak: never; 259 vertical-align: middle; 260 -webkit-font-smoothing: antialiased; 261 -moz-osx-font-smoothing: grayscale; 262 } 263 264 .media-modal-content { 265 position: absolute; 266 top: 0; 267 right: 0; 268 left: 0; 269 bottom: 0; 270 overflow: auto; 271 min-height: 300px; 272 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7); 273 background: #fff; 274 -webkit-font-smoothing: subpixel-antialiased; 275 } 276 277 .media-modal-content .media-frame select.attachment-filters { 278 margin-top: 32px; 279 margin-left: 2%; 280 width: 42%; 281 width: calc(48% - 12px); 282 } 283 284 .media-modal-content .attachments-browser .search { 285 width: 100%; 286 } 287 288 /* higher specificity */ 289 .wp-core-ui .media-modal-icon { 290 background-image: url(../images/uploader-icons.png); 291 background-repeat: no-repeat; 292 } 293 294 /** 295 * Toolbar 296 */ 297 .media-toolbar { 298 position: absolute; 299 top: 0; 300 right: 0; 301 left: 0; 302 z-index: 100; 303 height: 60px; 304 padding: 0 16px; 305 border: 0 solid #dcdcde; 306 overflow: hidden; 307 } 308 309 .media-frame-toolbar .media-toolbar { 310 top: auto; 311 bottom: -47px; 312 height: auto; 313 overflow: visible; 314 border-top: 1px solid #dcdcde; 315 } 316 317 .media-toolbar-primary { 318 float: left; 319 height: 100%; 320 position: relative; 321 } 322 323 .media-toolbar-secondary { 324 float: right; 325 height: 100%; 326 } 327 328 .media-toolbar-primary > .media-button, 329 .media-toolbar-primary > .media-button-group { 330 margin-right: 10px; 331 float: right; 332 margin-top: 15px; 333 } 334 335 .media-toolbar-secondary > .media-button, 336 .media-toolbar-secondary > .media-button-group { 337 margin-left: 10px; 338 margin-top: 15px; 339 } 340 341 /** 342 * Sidebar 343 */ 344 .media-sidebar { 345 position: absolute; 346 top: 0; 347 left: 0; 348 bottom: 0; 349 width: 267px; 350 padding: 0 16px; 351 z-index: 75; 352 background: #f6f7f7; 353 border-right: 1px solid #dcdcde; 354 overflow: auto; 355 -webkit-overflow-scrolling: touch; 356 } 357 358 /* 359 * Implementation of bottom padding in overflow content differs across browsers. 360 * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129 361 */ 362 .media-sidebar::after { 363 content: ""; 364 display: flex; 365 clear: both; 366 height: 24px; 367 } 368 369 .hide-toolbar .media-sidebar { 370 bottom: 0; 371 } 372 373 .media-sidebar h2, 374 .image-details h2:not(.media-attachments-filter-heading) { 375 position: relative; 376 font-weight: 600; 377 text-transform: uppercase; 378 font-size: 12px; 379 color: #646970; 380 margin: 24px 0 8px; 381 } 382 383 .media-sidebar .setting, 384 .attachment-details .setting { 385 display: block; 386 float: right; 387 width: 100%; 388 margin: 0 0 10px; 389 } 390 391 .media-sidebar .collection-settings .setting { 392 margin: 1px 0; 393 } 394 395 .media-sidebar .setting.has-description, 396 .attachment-details .setting.has-description { 397 margin-bottom: 5px; 398 } 399 400 .media-sidebar .setting .link-to-custom { 401 margin: 3px 2px 0; 402 } 403 404 .media-sidebar .setting span, /* Back-compat for pre-5.3 */ 405 .attachment-details .setting span, /* Back-compat for pre-5.3 */ 406 .media-sidebar .setting .name, 407 .media-sidebar .setting .value, 408 .attachment-details .setting .name { 409 min-width: 30%; 410 margin-left: 4%; 411 font-size: 12px; 412 text-align: left; 413 word-wrap: break-word; 414 } 415 416 .media-sidebar .setting .name { 417 max-width: 80px; 418 } 419 420 .media-sidebar .setting .value { 421 text-align: right; 422 } 423 424 .media-sidebar .setting select { 425 max-width: 65%; 426 } 427 428 .media-sidebar .setting input[type="checkbox"], 429 .media-sidebar .field input[type="checkbox"], 430 .media-sidebar .setting input[type="radio"], 431 .media-sidebar .field input[type="radio"], 432 .attachment-details .setting input[type="checkbox"], 433 .attachment-details .field input[type="checkbox"], 434 .attachment-details .setting input[type="radio"], 435 .attachment-details .field input[type="radio"] { 436 float: none; 437 margin: 8px 3px 0; 438 padding: 0; 439 } 440 441 .media-sidebar .setting span, /* Back-compat for pre-5.3 */ 442 .attachment-details .setting span, /* Back-compat for pre-5.3 */ 443 .media-sidebar .setting .name, 444 .media-sidebar .setting .value, 445 .media-sidebar .checkbox-label-inline, 446 .attachment-details .setting .name, 447 .attachment-details .setting .value, 448 .compat-item label span { 449 float: right; 450 min-height: 22px; 451 padding-top: 8px; 452 line-height: 1.33333333; 453 font-weight: 400; 454 color: #646970; 455 } 456 457 .media-sidebar .checkbox-label-inline { 458 font-size: 12px; 459 } 460 461 .media-sidebar .copy-to-clipboard-container, 462 .attachment-details .copy-to-clipboard-container { 463 flex-wrap: wrap; 464 margin-top: 10px; 465 margin-right: calc( 35% - 1px ); 466 padding-top: 10px; 467 } 468 469 /* Needs high specificity. */ 470 .attachment-details .attachment-info .copy-to-clipboard-container { 471 float: none; 472 } 473 474 .media-sidebar .copy-to-clipboard-container .success, 475 .attachment-details .copy-to-clipboard-container .success { 476 padding: 0; 477 min-height: 0; 478 line-height: 2.18181818; 479 text-align: right; 480 color: #008a20; 481 } 482 483 .compat-item label span { 484 text-align: left; 485 } 486 487 .media-sidebar .setting input[type="text"], 488 .media-sidebar .setting input[type="password"], 489 .media-sidebar .setting input[type="email"], 490 .media-sidebar .setting input[type="number"], 491 .media-sidebar .setting input[type="search"], 492 .media-sidebar .setting input[type="tel"], 493 .media-sidebar .setting input[type="url"], 494 .media-sidebar .setting textarea, 495 .media-sidebar .setting .value, 496 .attachment-details .setting input[type="text"], 497 .attachment-details .setting input[type="password"], 498 .attachment-details .setting input[type="email"], 499 .attachment-details .setting input[type="number"], 500 .attachment-details .setting input[type="search"], 501 .attachment-details .setting input[type="tel"], 502 .attachment-details .setting input[type="url"], 503 .attachment-details .setting textarea, 504 .attachment-details .setting .value, 505 .attachment-details .setting + .description { 506 box-sizing: border-box; 507 margin: 1px; 508 width: 65%; 509 float: left; 510 } 511 512 .media-sidebar .setting .value, 513 .attachment-details .setting .value, 514 .attachment-details .setting + .description { 515 margin: 0 1px; 516 text-align: right; 517 } 518 519 .attachment-details .setting + .description { 520 clear: both; 521 font-size: 12px; 522 font-style: normal; 523 margin-bottom: 10px; 524 } 525 526 .media-sidebar .setting textarea, 527 .attachment-details .setting textarea, 528 .compat-item .field textarea { 529 height: 62px; 530 resize: vertical; 531 } 532 533 .compat-item { 534 float: right; 535 width: 100%; 536 overflow: hidden; 537 } 538 539 .compat-item table { 540 width: 100%; 541 table-layout: fixed; 542 border-spacing: 0; 543 border: 0; 544 } 545 546 .compat-item tr { 547 padding: 2px 0; 548 display: block; 549 overflow: hidden; 550 } 551 552 .compat-item .label, 553 .compat-item .field { 554 display: block; 555 margin: 0; 556 padding: 0; 557 } 558 559 .compat-item .label { 560 min-width: 30%; 561 margin-left: 4%; 562 float: right; 563 text-align: left; 564 } 565 566 .compat-item .label span { 567 display: block; 568 width: 100%; 569 } 570 571 .compat-item .field { 572 float: left; 573 width: 65%; 574 margin: 1px; 575 } 576 577 .compat-item .field input[type="text"], 578 .compat-item .field input[type="password"], 579 .compat-item .field input[type="email"], 580 .compat-item .field input[type="number"], 581 .compat-item .field input[type="search"], 582 .compat-item .field input[type="tel"], 583 .compat-item .field input[type="url"], 584 .compat-item .field textarea { 585 width: 100%; 586 margin: 0; 587 box-sizing: border-box; 588 } 589 590 .sidebar-for-errors .attachment-details, 591 .sidebar-for-errors .compat-item, 592 .sidebar-for-errors .media-sidebar .media-progress-bar, 593 .sidebar-for-errors .upload-details { 594 display: none !important; 595 } 596 597 /** 598 * Menu 599 */ 600 .media-menu { 601 position: absolute; 602 top: 0; 603 right: 0; 604 left: 0; 605 bottom: 0; 606 margin: 0; 607 padding: 50px 0 10px; 608 background: #f6f7f7; 609 border-left-width: 1px; 610 border-left-style: solid; 611 border-left-color: #c3c4c7; 612 -webkit-user-select: none; 613 user-select: none; 614 } 615 616 .media-menu .media-menu-item { 617 display: block; 618 box-sizing: border-box; 619 width: 100%; 620 position: relative; 621 border: 0; 622 margin: 0; 623 padding: 8px 20px; 624 font-size: 14px; 625 line-height: 1.28571428; 626 background: transparent; 627 color: #2271b1; 628 text-align: right; 629 text-decoration: none; 630 cursor: pointer; 631 } 632 633 .media-menu .media-menu-item:hover { 634 background: rgba(0, 0, 0, 0.04); 635 } 636 637 .media-menu .media-menu-item:active { 638 color: #2271b1; 639 outline: none; 640 } 641 642 .media-menu .active, 643 .media-menu .active:hover { 644 color: #1d2327; 645 font-weight: 600; 646 } 647 648 .media-menu .media-menu-item:focus { 649 box-shadow: 650 0 0 0 1px #4f94d4, 651 0 0 2px 1px rgba(79, 148, 212, 0.8); 652 color: #043959; 653 /* Only visible in Windows High Contrast mode */ 654 outline: 1px solid transparent; 655 } 656 657 .media-menu .separator { 658 height: 0; 659 margin: 12px 20px; 660 padding: 0; 661 border-top: 1px solid #dcdcde; 662 } 663 664 /** 665 * Menu 666 */ 667 .media-router { 668 position: relative; 669 padding: 0 6px; 670 margin: 0; 671 clear: both; 672 } 673 674 .media-router .media-menu-item { 675 position: relative; 676 float: right; 677 border: 0; 678 margin: 0; 679 padding: 8px 10px 9px; 680 height: 18px; 681 line-height: 1.28571428; 682 font-size: 14px; 683 text-decoration: none; 684 background: transparent; 685 cursor: pointer; 686 transition: none; 687 } 688 689 .media-router .media-menu-item:last-child { 690 border-left: 0; 691 } 692 693 .media-router .media-menu-item:hover, 694 .media-router .media-menu-item:active { 695 color: #2271b1; 696 } 697 698 .media-router .active, 699 .media-router .active:hover { 700 color: #1d2327; 701 } 702 703 .media-router .media-menu-item:focus { 704 box-shadow: 705 0 0 0 1px #4f94d4, 706 0 0 2px 1px rgba(79, 148, 212, 0.8); 707 color: #043959; 708 /* Only visible in Windows High Contrast mode */ 709 outline: 1px solid transparent; 710 } 711 712 .media-router .active, 713 .media-router .media-menu-item.active:last-child { 714 margin: -1px -1px 0; 715 background: #fff; 716 border: 1px solid #dcdcde; 717 border-bottom: none; 718 } 719 720 .media-router .active:after { 721 display: none; 722 } 723 724 /** 725 * Frame 726 */ 727 .media-frame { 728 overflow: hidden; 729 position: absolute; 730 top: 0; 731 right: 0; 732 left: 0; 733 bottom: 0; 734 } 735 736 .media-frame-menu { 737 position: absolute; 738 top: 0; 739 right: 0; 740 bottom: 0; 741 width: 200px; 742 z-index: 150; 743 } 744 745 .media-frame-title { 746 position: absolute; 747 top: 0; 748 right: 200px; 749 left: 0; 750 height: 50px; 751 z-index: 200; 752 } 753 754 .media-frame-router { 755 position: absolute; 756 top: 50px; 757 right: 200px; 758 left: 0; 759 height: 36px; 760 z-index: 200; 761 } 762 763 .media-frame-content { 764 position: absolute; 765 top: 84px; 766 right: 200px; 767 left: 0; 768 bottom: 61px; 769 height: auto; 770 width: auto; 771 margin: 0; 772 overflow: auto; 773 background: #fff; 774 border-top: 1px solid #dcdcde; 775 } 776 777 .media-frame-toolbar { 778 position: absolute; 779 right: 200px; 780 left: 0; 781 z-index: 100; 782 bottom: 60px; 783 height: auto; 784 } 785 786 .media-frame.hide-menu .media-frame-title, 787 .media-frame.hide-menu .media-frame-router, 788 .media-frame.hide-menu .media-frame-toolbar, 789 .media-frame.hide-menu .media-frame-content { 790 right: 0; 791 } 792 793 .media-frame.hide-toolbar .media-frame-content { 794 bottom: 0; 795 } 796 797 .media-frame.hide-router .media-frame-content { 798 top: 50px; 799 } 800 801 .media-frame.hide-menu .media-frame-menu, 802 .media-frame.hide-menu .media-frame-menu-heading, 803 .media-frame.hide-router .media-frame-router, 804 .media-frame.hide-toolbar .media-frame-toolbar { 805 display: none; 806 } 807 808 .media-frame-title h1 { 809 padding: 0 16px; 810 font-size: 22px; 811 line-height: 2.27272727; 812 margin: 0; 813 } 814 815 .media-frame-menu-heading, 816 .media-attachments-filter-heading { 817 position: absolute; 818 right: 20px; 819 top: 22px; 820 margin: 0; 821 font-size: 13px; 822 line-height: 1; 823 /* Above the media-frame-menu. */ 824 z-index: 151; 825 } 826 827 .media-attachments-filter-heading { 828 top: 10px; 829 right: 16px; 830 } 831 832 .mode-grid .media-attachments-filter-heading { 833 top: 0; 834 right: -9999px; 835 } 836 837 .mode-grid .media-frame-actions-heading { 838 display: none; 839 } 840 841 .wp-core-ui .button.media-frame-menu-toggle { 842 display: none; 843 } 844 845 .media-frame-title .suggested-dimensions { 846 font-size: 14px; 847 float: left; 848 margin-left: 20px; 849 } 850 851 .media-frame-content .crop-content { 852 height: 100%; 853 } 854 855 .wp-customizer:not(.mobile) .media-frame-content .crop-content.site-icon { 856 margin-left: 300px; 857 } 858 859 .media-frame-content .crop-content .crop-image { 860 display: block; 861 margin: auto; 862 max-width: 100%; 863 max-height: 100%; 864 } 865 866 .media-frame-content .crop-content .upload-errors { 867 position: absolute; 868 width: 300px; 869 top: 50%; 870 right: 50%; 871 margin-right: -150px; 872 margin-left: -150px; 873 z-index: 600000; 874 } 875 876 /** 877 * Iframes 878 */ 879 .media-frame .media-iframe { 880 overflow: hidden; 881 } 882 883 .media-frame .media-iframe, 884 .media-frame .media-iframe iframe { 885 height: 100%; 886 width: 100%; 887 border: 0; 888 } 889 890 /** 891 * Attachment Browser Filters 892 */ 893 .media-frame select.attachment-filters { 894 margin-top: 11px; 895 margin-left: 2%; 896 max-width: 42%; 897 max-width: calc(48% - 12px); 898 } 899 900 .media-frame select.attachment-filters:last-of-type { 901 margin-left: 0; 902 width: auto; 903 max-width: 100%; 904 } 905 906 /** 907 * Search 908 */ 909 .media-frame .search { 910 margin: 32px 0 0; 911 padding: 4px; 912 font-size: 13px; 913 color: #3c434a; 914 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 915 -webkit-appearance: none; 916 } 917 918 .media-toolbar-primary .search { 919 max-width: 100%; 920 } 921 922 .media-frame .media-search-input-label { 923 position: absolute; 924 right: 0; 925 top: 10px; 926 margin: 0; 927 line-height: 1; 928 } 929 930 /** 931 * Attachments 932 */ 933 .wp-core-ui .attachments { 934 margin: 0; 935 -webkit-overflow-scrolling: touch; 936 } 937 938 /** 939 * Attachment 940 */ 941 .wp-core-ui .attachment { 942 position: relative; 943 float: right; 944 padding: 8px; 945 margin: 0; 946 color: #3c434a; 947 cursor: pointer; 948 list-style: none; 949 text-align: center; 950 -webkit-user-select: none; 951 user-select: none; 952 width: 25%; 953 box-sizing: border-box; 954 } 955 956 .wp-core-ui .attachment:focus, 957 .wp-core-ui .selected.attachment:focus, 958 .wp-core-ui .attachment.details:focus { 959 box-shadow: 960 inset 0 0 2px 3px #fff, 961 inset 0 0 0 7px #4f94d4; 962 /* Only visible in Windows High Contrast mode */ 963 outline: 2px solid transparent; 964 outline-offset: -6px; 965 } 966 967 .wp-core-ui .selected.attachment { 968 box-shadow: 969 inset 0 0 0 5px #fff, 970 inset 0 0 0 7px #c3c4c7; 971 } 972 973 .wp-core-ui .attachment.details { 974 box-shadow: 975 inset 0 0 0 3px #fff, 976 inset 0 0 0 7px #2271b1; 977 } 978 979 .wp-core-ui .attachment-preview { 980 position: relative; 981 box-shadow: 982 inset 0 0 15px rgba(0, 0, 0, 0.1), 983 inset 0 0 0 1px rgba(0, 0, 0, 0.05); 984 background: #f0f0f1; 985 cursor: pointer; 986 } 987 988 .wp-core-ui .attachment-preview:before { 989 content: ""; 990 display: block; 991 padding-top: 100%; 992 } 993 994 .wp-core-ui .attachment .icon { 995 margin: 0 auto; 996 overflow: hidden; 997 } 998 999 .wp-core-ui .attachment .thumbnail { 1000 overflow: hidden; 1001 position: absolute; 1002 top: 0; 1003 left: 0; 1004 bottom: 0; 1005 right: 0; 1006 opacity: 1; 1007 transition: opacity .1s; 1008 } 1009 1010 .wp-core-ui .attachment .portrait img { 1011 max-width: 100%; 1012 } 1013 1014 .wp-core-ui .attachment .landscape img { 1015 max-height: 100%; 1016 } 1017 1018 .wp-core-ui .attachment .thumbnail:after { 1019 content: ""; 1020 display: block; 1021 position: absolute; 1022 top: 0; 1023 right: 0; 1024 left: 0; 1025 bottom: 0; 1026 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); 1027 overflow: hidden; 1028 } 1029 1030 .wp-core-ui .attachment .thumbnail img { 1031 top: 0; 1032 right: 0; 1033 } 1034 1035 .wp-core-ui .attachment .thumbnail .centered { 1036 position: absolute; 1037 top: 0; 1038 right: 0; 1039 width: 100%; 1040 height: 100%; 1041 transform: translate( -50%, 50% ); 1042 } 1043 1044 .wp-core-ui .attachment .thumbnail .centered img { 1045 transform: translate( 50%, -50% ); 1046 } 1047 1048 .wp-core-ui .attachments-browser .attachment .thumbnail .centered img.icon { 1049 transform: translate( 50%, -70% ); 1050 } 1051 1052 .wp-core-ui .attachment .filename { 1053 position: absolute; 1054 right: 0; 1055 left: 0; 1056 bottom: 0; 1057 overflow: hidden; 1058 max-height: 100%; 1059 word-wrap: break-word; 1060 text-align: center; 1061 font-weight: 600; 1062 background: rgba(255, 255, 255, 0.8); 1063 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); 1064 } 1065 1066 .wp-core-ui .attachment .filename div { 1067 padding: 5px 10px; 1068 } 1069 1070 .wp-core-ui .attachment .thumbnail img { 1071 position: absolute; 1072 } 1073 1074 .wp-core-ui .attachment-close { 1075 display: block; 1076 position: absolute; 1077 top: 5px; 1078 left: 5px; 1079 height: 22px; 1080 width: 22px; 1081 padding: 0; 1082 background-color: #fff; 1083 background-position: -96px 4px; 1084 border-radius: 3px; 1085 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3); 1086 transition: none; 1087 } 1088 1089 .wp-core-ui .attachment-close:hover, 1090 .wp-core-ui .attachment-close:focus { 1091 background-position: -36px 4px; 1092 } 1093 1094 .wp-core-ui .attachment .check { 1095 display: none; 1096 height: 24px; 1097 width: 24px; 1098 padding: 0; 1099 border: 0; 1100 position: absolute; 1101 z-index: 10; 1102 top: 0; 1103 left: 0; 1104 outline: none; 1105 background: #f0f0f1; 1106 cursor: pointer; 1107 box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba(0, 0, 0, 0.15); 1108 } 1109 1110 .wp-core-ui .attachment .check .media-modal-icon { 1111 display: block; 1112 background-position: -1px 0; 1113 height: 15px; 1114 width: 15px; 1115 margin: 5px; 1116 } 1117 1118 .wp-core-ui .attachment .check:hover .media-modal-icon { 1119 background-position: -40px 0; 1120 } 1121 1122 .wp-core-ui .attachment.selected .check { 1123 display: block; 1124 } 1125 1126 .wp-core-ui .attachment.details .check, 1127 .wp-core-ui .attachment.selected .check:focus, 1128 .wp-core-ui .media-frame.mode-grid .attachment.selected .check { 1129 background-color: #2271b1; 1130 box-shadow: 1131 0 0 0 1px #fff, 1132 0 0 0 2px #2271b1; 1133 } 1134 1135 .wp-core-ui .attachment.selected .check:focus { 1136 /* Only visible in Windows High Contrast mode */ 1137 outline: 2px solid transparent; 1138 } 1139 1140 .wp-core-ui .attachment.details .check .media-modal-icon, 1141 .wp-core-ui .media-frame.mode-grid .attachment.selected .check .media-modal-icon { 1142 background-position: -21px 0; 1143 } 1144 1145 .wp-core-ui .attachment.details .check:hover .media-modal-icon, 1146 .wp-core-ui .attachment.selected .check:focus .media-modal-icon, 1147 .wp-core-ui .media-frame.mode-grid .attachment.selected .check:hover .media-modal-icon { 1148 background-position: -60px 0; 1149 } 1150 1151 .wp-core-ui .media-frame .attachment .describe { 1152 position: relative; 1153 display: block; 1154 width: 100%; 1155 margin: 0; 1156 padding: 0 8px; 1157 font-size: 12px; 1158 border-radius: 0; 1159 } 1160 1161 /** 1162 * Attachments Browser 1163 */ 1164 .media-frame .attachments-browser { 1165 position: relative; 1166 width: 100%; 1167 height: 100%; 1168 overflow: hidden; 1169 } 1170 1171 .attachments-browser .media-toolbar { 1172 left: 300px; 1173 height: 72px; 1174 background: #fff; 1175 } 1176 1177 .attachments-browser.hide-sidebar .media-toolbar { 1178 left: 0; 1179 } 1180 1181 .attachments-browser .media-toolbar-primary > .media-button, 1182 .attachments-browser .media-toolbar-primary > .media-button-group, 1183 .attachments-browser .media-toolbar-secondary > .media-button, 1184 .attachments-browser .media-toolbar-secondary > .media-button-group { 1185 margin: 10px 0; 1186 } 1187 1188 .attachments-browser .attachments { 1189 padding: 2px 8px 8px; 1190 } 1191 1192 .attachments-browser:not(.has-load-more) .attachments, 1193 .attachments-browser.has-load-more .attachments-wrapper, 1194 .attachments-browser .uploader-inline { 1195 position: absolute; 1196 top: 72px; 1197 right: 0; 1198 left: 300px; 1199 bottom: 0; 1200 overflow: auto; 1201 outline: none; 1202 } 1203 1204 .attachments-browser .uploader-inline.hidden { 1205 display: none; 1206 } 1207 1208 .attachments-browser .media-toolbar-primary { 1209 max-width: 33%; 1210 } 1211 1212 .mode-grid .attachments-browser .media-toolbar-primary { 1213 display: flex; 1214 align-items: center; 1215 } 1216 1217 .mode-grid .attachments-browser .media-toolbar-mode-select .media-toolbar-primary { 1218 display: none; 1219 } 1220 1221 .attachments-browser .media-toolbar-secondary { 1222 max-width: 66%; 1223 } 1224 1225 .uploader-inline .close { 1226 background-color: transparent; 1227 border: 0; 1228 cursor: pointer; 1229 height: 48px; 1230 outline: none; 1231 padding: 0; 1232 position: absolute; 1233 left: 2px; 1234 text-align: center; 1235 top: 2px; 1236 width: 48px; 1237 z-index: 1; 1238 } 1239 1240 .uploader-inline .close:before { 1241 font: normal 30px/1 dashicons !important; 1242 color: #50575e; 1243 display: inline-block; 1244 content: "\f335"; 1245 font-weight: 300; 1246 margin-top: 1px; 1247 } 1248 1249 .uploader-inline .close:focus { 1250 outline: 1px solid #4f94d4; 1251 box-shadow: 0 0 3px rgba(34, 113, 177, 0.8); 1252 } 1253 1254 .attachments-browser.hide-sidebar .attachments, 1255 .attachments-browser.hide-sidebar .uploader-inline { 1256 left: 0; 1257 margin-left: 0; 1258 } 1259 1260 .attachments-browser .instructions { 1261 display: inline-block; 1262 margin-top: 16px; 1263 line-height: 1.38461538; 1264 font-size: 13px; 1265 color: #646970; 1266 } 1267 1268 .attachments-browser .no-media { 1269 padding: 2em 2em 0 0; 1270 } 1271 1272 .more-loaded .attachment:not(.found-media) { 1273 background: #dcdcde; 1274 } 1275 1276 .load-more-wrapper { 1277 clear: both; 1278 display: flex; 1279 flex-wrap: wrap; 1280 align-items: center; 1281 justify-content: center; 1282 padding: 1em 0; 1283 } 1284 1285 .load-more-wrapper .load-more-count { 1286 min-width: 100%; 1287 margin: 0 0 1em; 1288 text-align: center; 1289 } 1290 1291 .load-more-wrapper .load-more { 1292 margin: 0; 1293 } 1294 1295 /* Needs high specificity. */ 1296 .media-frame .load-more-wrapper .load-more + .spinner { 1297 float: none; 1298 margin: 0 10px 0 -30px; 1299 } 1300 1301 /* Reset spinner margin when the button is hidden to avoid horizontal scrollbar. */ 1302 .media-frame .load-more-wrapper .load-more.hidden + .spinner { 1303 margin: 0; 1304 } 1305 1306 /* Force a new row within the flex container. */ 1307 .load-more-wrapper::after { 1308 content: ""; 1309 min-width: 100%; 1310 order: 1; 1311 } 1312 1313 .load-more-wrapper .load-more-jump { 1314 margin: 0 12px 0 0; 1315 } 1316 1317 .attachment.new-media { 1318 outline: 2px dotted #c3c4c7; 1319 } 1320 1321 .load-more-wrapper { 1322 clear: both; 1323 display: flex; 1324 flex-wrap: wrap; 1325 align-items: center; 1326 justify-content: center; 1327 padding: 1em 0; 1328 } 1329 1330 .load-more-wrapper .load-more-count { 1331 min-width: 100%; 1332 margin: 0 0 1em; 1333 text-align: center; 1334 } 1335 1336 .load-more-wrapper .load-more { 1337 margin: 0; 1338 } 1339 1340 /* Needs high specificity. */ 1341 .media-frame .load-more-wrapper .load-more + .spinner { 1342 float: none; 1343 margin: 0 10px 0 -30px; 1344 } 1345 1346 /* Reset spinner margin when the button is hidden to avoid horizontal scrollbar. */ 1347 .media-frame .load-more-wrapper .load-more.hidden + .spinner { 1348 margin: 0; 1349 } 1350 1351 /* Force a new row within the flex container. */ 1352 .load-more-wrapper::after { 1353 content: ""; 1354 min-width: 100%; 1355 order: 1; 1356 } 1357 1358 .load-more-wrapper .load-more-jump { 1359 margin: 0 12px 0 0; 1360 } 1361 1362 /** 1363 * Progress Bar 1364 */ 1365 .media-progress-bar { 1366 position: relative; 1367 height: 10px; 1368 width: 70%; 1369 margin: 10px auto; 1370 border-radius: 10px; 1371 background: #dcdcde; 1372 background: rgba(0, 0, 0, 0.1); 1373 } 1374 1375 .media-progress-bar div { 1376 height: 10px; 1377 min-width: 20px; 1378 width: 0; 1379 background: #2271b1; 1380 border-radius: 10px; 1381 transition: width 300ms; 1382 } 1383 1384 .media-uploader-status .media-progress-bar { 1385 display: none; 1386 width: 100%; 1387 } 1388 1389 .uploading.media-uploader-status .media-progress-bar { 1390 display: block; 1391 } 1392 1393 .attachment-preview .media-progress-bar { 1394 position: absolute; 1395 top: 50%; 1396 right: 15%; 1397 width: 70%; 1398 margin: -5px 0 0 0; 1399 } 1400 1401 .media-uploader-status { 1402 position: relative; 1403 margin: 0 auto; 1404 padding-bottom: 10px; 1405 max-width: 400px; 1406 } 1407 1408 .uploader-inline .media-uploader-status h2 { 1409 display: none; 1410 } 1411 1412 .media-uploader-status .upload-details { 1413 display: none; 1414 font-size: 12px; 1415 color: #646970; 1416 } 1417 1418 .uploading.media-uploader-status .upload-details { 1419 display: block; 1420 } 1421 1422 .media-uploader-status .upload-detail-separator { 1423 padding: 0 4px; 1424 } 1425 1426 .media-uploader-status .upload-count { 1427 color: #3c434a; 1428 } 1429 1430 .media-uploader-status .upload-dismiss-errors, 1431 .media-uploader-status .upload-errors { 1432 display: none; 1433 } 1434 1435 .errors.media-uploader-status .upload-dismiss-errors, 1436 .errors.media-uploader-status .upload-errors { 1437 display: block; 1438 } 1439 1440 .media-uploader-status .upload-dismiss-errors { 1441 position: absolute; 1442 top: -3px; 1443 left: -5px; 1444 padding: 5px; 1445 border-radius: 50%; 1446 transition: none; 1447 text-decoration: none; 1448 } 1449 1450 .uploader-inline .media-uploader-status .upload-dismiss-errors { 1451 top: 2px; 1452 left: 2px; 1453 } 1454 1455 .media-uploader-status .upload-dismiss-errors::before { 1456 content: "\f153"; 1457 display: block; 1458 font: normal 16px/1 dashicons; 1459 color: #787c82; 1460 } 1461 1462 .uploader-inline .errors.media-uploader-status .upload-dismiss-errors::before { 1463 color: #646970; 1464 } 1465 1466 .errors.media-uploader-status .upload-dismiss-errors:hover::before, 1467 .errors.media-uploader-status .upload-dismiss-errors:focus::before { 1468 color: #d63638; 1469 } 1470 1471 .upload-errors .upload-error { 1472 padding: 12px; 1473 margin-bottom: 12px; 1474 background: #fff; 1475 border-right: 4px solid #d63638; 1476 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); 1477 } 1478 1479 .uploader-inline .upload-errors .upload-error { 1480 padding: 12px 30px; 1481 background-color: #fcf0f1; 1482 box-shadow: none; 1483 } 1484 1485 .upload-errors .upload-error-filename { 1486 font-weight: 600; 1487 } 1488 1489 .upload-errors .upload-error-message { 1490 display: block; 1491 padding-top: 8px; 1492 word-wrap: break-word; 1493 } 1494 1495 /** 1496 * Window and Editor uploaders used to display "drop zones" 1497 */ 1498 .uploader-window, 1499 .wp-editor-wrap .uploader-editor { 1500 top: 0; 1501 right: 0; 1502 left: 0; 1503 bottom: 0; 1504 text-align: center; 1505 display: none; 1506 } 1507 1508 .uploader-window { 1509 position: fixed; 1510 z-index: 250000; 1511 opacity: 0; /* Only the inline uploader is animated with JS, the editor one isn't */ 1512 transition: opacity 250ms; 1513 } 1514 1515 .wp-editor-wrap .uploader-editor { 1516 position: absolute; 1517 z-index: 99998; /* under the toolbar */ 1518 background: rgba(140, 143, 148, 0.9); 1519 } 1520 1521 .uploader-window, 1522 .wp-editor-wrap .uploader-editor.droppable { 1523 background: rgba(10, 75, 120, 0.9); 1524 } 1525 1526 .uploader-window-content, 1527 .wp-editor-wrap .uploader-editor-content { 1528 position: absolute; 1529 top: 10px; 1530 right: 10px; 1531 left: 10px; 1532 bottom: 10px; 1533 border: 1px dashed #fff; 1534 } 1535 1536 /* uploader drop-zone title */ 1537 .uploader-window h1, /* Back-compat for pre-5.3 */ 1538 .uploader-window .uploader-editor-title, 1539 .wp-editor-wrap .uploader-editor .uploader-editor-title { 1540 position: absolute; 1541 top: 50%; 1542 right: 0; 1543 left: 0; 1544 transform: translateY(-50%); 1545 font-size: 3em; 1546 line-height: 1.3; 1547 font-weight: 600; 1548 color: #fff; 1549 margin: 0; 1550 padding: 0 10px; 1551 } 1552 1553 .wp-editor-wrap .uploader-editor .uploader-editor-title { 1554 display: none; 1555 } 1556 1557 .wp-editor-wrap .uploader-editor.droppable .uploader-editor-title { 1558 display: block; 1559 } 1560 1561 .uploader-window .media-progress-bar { 1562 margin-top: 20px; 1563 max-width: 300px; 1564 background: transparent; 1565 border-color: #fff; 1566 display: none; 1567 } 1568 1569 .uploader-window .media-progress-bar div { 1570 background: #fff; 1571 } 1572 1573 .uploading .uploader-window .media-progress-bar { 1574 display: block; 1575 } 1576 1577 .media-frame .uploader-inline { 1578 margin-bottom: 20px; 1579 padding: 0; 1580 text-align: center; 1581 } 1582 1583 .uploader-inline-content { 1584 position: absolute; 1585 top: 30%; 1586 right: 0; 1587 left: 0; 1588 } 1589 1590 .uploader-inline-content .upload-ui { 1591 margin: 2em 0; 1592 } 1593 1594 .uploader-inline-content .post-upload-ui { 1595 margin-bottom: 2em; 1596 } 1597 1598 .uploader-inline .has-upload-message .upload-ui { 1599 margin: 0 0 4em; 1600 } 1601 1602 .uploader-inline h2 { 1603 font-size: 20px; 1604 line-height: 1.4; 1605 font-weight: 400; 1606 margin: 0; 1607 } 1608 1609 .uploader-inline .has-upload-message .upload-instructions { 1610 font-size: 14px; 1611 color: #3c434a; 1612 font-weight: 400; 1613 } 1614 1615 .uploader-inline .drop-instructions { 1616 display: none; 1617 } 1618 1619 .supports-drag-drop .uploader-inline .drop-instructions { 1620 display: block; 1621 } 1622 1623 .uploader-inline p { 1624 margin: 0.5em 0; 1625 } 1626 1627 .uploader-inline .media-progress-bar { 1628 display: none; 1629 } 1630 1631 .uploading.uploader-inline .media-progress-bar { 1632 display: block; 1633 } 1634 1635 .uploader-inline .browser { 1636 display: inline-block !important; 1637 } 1638 1639 /** 1640 * Selection 1641 */ 1642 .media-selection { 1643 position: absolute; 1644 top: 0; 1645 right: 0; 1646 left: 350px; 1647 height: 60px; 1648 padding: 0 16px 0 0; 1649 overflow: hidden; 1650 white-space: nowrap; 1651 } 1652 1653 .media-selection .selection-info { 1654 display: inline-block; 1655 font-size: 12px; 1656 height: 60px; 1657 margin-left: 10px; 1658 vertical-align: top; 1659 } 1660 1661 .media-selection.empty, 1662 .media-selection.editing { 1663 display: none; 1664 } 1665 1666 .media-selection.one .edit-selection { 1667 display: none; 1668 } 1669 1670 .media-selection .count { 1671 display: block; 1672 padding-top: 12px; 1673 font-size: 14px; 1674 line-height: 1.42857142; 1675 font-weight: 600; 1676 } 1677 1678 .media-selection .button-link { 1679 float: right; 1680 padding: 1px 8px; 1681 margin: 1px -8px 1px 8px; 1682 line-height: 1.4; 1683 border-left: 1px solid #dcdcde; 1684 color: #2271b1; 1685 text-decoration: none; 1686 } 1687 1688 .media-selection .button-link:hover, 1689 .media-selection .button-link:focus { 1690 color: #135e96; 1691 } 1692 1693 .media-selection .button-link:last-child { 1694 border-left: 0; 1695 margin-left: 0; 1696 } 1697 1698 .selection-info .clear-selection { 1699 color: #d63638; 1700 } 1701 1702 .selection-info .clear-selection:hover, 1703 .selection-info .clear-selection:focus { 1704 color: #d63638; 1705 } 1706 1707 .media-selection .selection-view { 1708 display: inline-block; 1709 vertical-align: top; 1710 } 1711 1712 .media-selection .attachments { 1713 display: inline-block; 1714 height: 48px; 1715 margin: 6px; 1716 padding: 0; 1717 overflow: hidden; 1718 vertical-align: top; 1719 } 1720 1721 .media-selection .attachment { 1722 width: 40px; 1723 padding: 0; 1724 margin: 4px; 1725 } 1726 1727 .media-selection .attachment .thumbnail { 1728 top: 0; 1729 left: 0; 1730 bottom: 0; 1731 right: 0; 1732 } 1733 1734 .media-selection .attachment .icon { 1735 width: 50%; 1736 } 1737 1738 .media-selection .attachment-preview { 1739 box-shadow: none; 1740 background: none; 1741 } 1742 1743 .wp-core-ui .media-selection .attachment:focus, 1744 .wp-core-ui .media-selection .selected.attachment:focus, 1745 .wp-core-ui .media-selection .attachment.details:focus { 1746 box-shadow: 1747 0 0 0 1px #fff, 1748 0 0 2px 3px #4f94d4; 1749 /* Only visible in Windows High Contrast mode */ 1750 outline: 2px solid transparent; 1751 } 1752 1753 .wp-core-ui .media-selection .selected.attachment { 1754 box-shadow: none; 1755 } 1756 1757 .wp-core-ui .media-selection .attachment.details { 1758 box-shadow: 1759 0 0 0 1px #fff, 1760 0 0 0 3px #2271b1; 1761 } 1762 1763 .media-selection:after { 1764 content: ""; 1765 display: block; 1766 position: absolute; 1767 top: 0; 1768 left: 0; 1769 bottom: 0; 1770 width: 25px; 1771 background-image: linear-gradient(to right,#fff,rgba(255, 255, 255, 0)); 1772 } 1773 1774 .media-selection .attachment .filename { 1775 display: none; 1776 } 1777 1778 /** 1779 * Spinner 1780 */ 1781 .media-frame .spinner { 1782 background: url(../images/spinner.gif) no-repeat; 1783 background-size: 20px 20px; 1784 float: left; 1785 display: inline-block; 1786 visibility: hidden; 1787 opacity: 0.7; 1788 filter: alpha(opacity=70); 1789 width: 20px; 1790 height: 20px; 1791 margin: 0; 1792 vertical-align: middle; 1793 } 1794 1795 .media-frame.mode-grid .spinner { 1796 margin: 0; 1797 float: none; 1798 vertical-align: middle; 1799 } 1800 1801 .media-modal .media-toolbar .spinner { 1802 float: none; 1803 vertical-align: bottom; 1804 margin: 0 5px 5px 0; 1805 } 1806 1807 .media-frame .instructions + .spinner.is-active { 1808 vertical-align: middle; 1809 } 1810 1811 .media-frame .spinner.is-active { 1812 visibility: visible; 1813 } 1814 1815 /** 1816 * Attachment Details 1817 */ 1818 .attachment-details { 1819 position: relative; 1820 overflow: auto; 1821 } 1822 1823 .attachment-details .settings-save-status { 1824 float: left; 1825 text-transform: none; 1826 font-weight: 400; 1827 } 1828 1829 .attachment-details .settings-save-status .spinner { 1830 float: none; 1831 margin-right: 5px; 1832 } 1833 1834 .attachment-details .settings-save-status .saved { 1835 display: none; 1836 } 1837 1838 .attachment-details.save-waiting .settings-save-status .spinner { 1839 visibility: visible; 1840 } 1841 1842 .attachment-details.save-complete .settings-save-status .saved { 1843 display: inline-block; 1844 } 1845 1846 .attachment-info { 1847 overflow: hidden; 1848 min-height: 60px; 1849 margin-bottom: 16px; 1850 line-height: 1.5; 1851 color: #646970; 1852 border-bottom: 1px solid #dcdcde; 1853 padding-bottom: 11px; 1854 } 1855 1856 .attachment-info .wp-media-wrapper { 1857 margin-bottom: 8px; 1858 } 1859 1860 .attachment-info .wp-media-wrapper.wp-audio { 1861 margin-top: 13px; 1862 } 1863 1864 .attachment-info .filename { 1865 font-weight: 600; 1866 color: #3c434a; 1867 word-wrap: break-word; 1868 } 1869 1870 .attachment-info .thumbnail { 1871 position: relative; 1872 float: right; 1873 max-width: 120px; 1874 max-height: 120px; 1875 margin-top: 5px; 1876 margin-left: 10px; 1877 margin-bottom: 5px; 1878 } 1879 1880 .uploading .attachment-info .thumbnail { 1881 width: 120px; 1882 height: 80px; 1883 box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.1); 1884 } 1885 1886 .uploading .attachment-info .media-progress-bar { 1887 margin-top: 35px; 1888 } 1889 1890 .attachment-info .thumbnail-image:after { 1891 content: ""; 1892 display: block; 1893 position: absolute; 1894 top: 0; 1895 right: 0; 1896 left: 0; 1897 bottom: 0; 1898 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); 1899 overflow: hidden; 1900 } 1901 1902 .attachment-info .thumbnail img { 1903 display: block; 1904 max-width: 120px; 1905 max-height: 120px; 1906 margin: 0 auto; 1907 } 1908 1909 .attachment-info .details { 1910 float: right; 1911 font-size: 12px; 1912 max-width: 100%; 1913 } 1914 1915 .attachment-info .edit-attachment, 1916 .attachment-info .delete-attachment, 1917 .attachment-info .trash-attachment, 1918 .attachment-info .untrash-attachment { 1919 display: block; 1920 text-decoration: none; 1921 white-space: nowrap; 1922 } 1923 1924 .attachment-details.needs-refresh .attachment-info .edit-attachment { 1925 display: none; 1926 } 1927 1928 .attachment-info .edit-attachment { 1929 display: block; 1930 } 1931 1932 .media-modal .delete-attachment, 1933 .media-modal .trash-attachment, 1934 .media-modal .untrash-attachment { 1935 display: inline; 1936 padding: 0; 1937 color: #d63638; 1938 } 1939 1940 .media-modal .delete-attachment:hover, 1941 .media-modal .delete-attachment:focus, 1942 .media-modal .trash-attachment:hover, 1943 .media-modal .trash-attachment:focus, 1944 .media-modal .untrash-attachment:hover, 1945 .media-modal .untrash-attachment:focus { 1946 color: #d63638; 1947 } 1948 1949 /** 1950 * Attachment Display Settings 1951 */ 1952 .attachment-display-settings { 1953 width: 100%; 1954 float: right; 1955 overflow: hidden; 1956 } 1957 1958 .collection-settings { 1959 overflow: hidden; 1960 } 1961 1962 .collection-settings .setting input[type="checkbox"] { 1963 float: right; 1964 margin-left: 8px; 1965 } 1966 1967 .collection-settings .setting span, /* Back-compat for pre-5.3 */ 1968 .collection-settings .setting .name { 1969 min-width: inherit; 1970 } 1971 1972 /** 1973 * Image Editor 1974 */ 1975 .media-modal .imgedit-wrap { 1976 position: static; 1977 } 1978 1979 .media-modal .imgedit-wrap .imgedit-panel-content { 1980 padding: 16px 16px 0 16px; 1981 position: absolute; 1982 top: 0; 1983 left: 282px; 1984 bottom: 0; 1985 right: 0; 1986 overflow: auto; 1987 } 1988 1989 /* 1990 * Implementation of bottom padding in overflow content differs across browsers. 1991 * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129 1992 */ 1993 .media-modal .imgedit-wrap .imgedit-submit { 1994 margin-bottom: 16px; 1995 } 1996 1997 .media-modal .imgedit-wrap .imgedit-settings { 1998 background: #f6f7f7; 1999 border-right: 1px solid #dcdcde; 2000 padding: 20px 16px 0; 2001 position: absolute; 2002 top: 0; 2003 left: 0; 2004 bottom: 0; 2005 width: 250px; 2006 overflow: auto; 2007 } 2008 2009 /* 2010 * Implementation of bottom padding in overflow content differs across browsers. 2011 * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129 2012 */ 2013 .media-modal .imgedit-wrap .imgedit-save-target { 2014 margin: 8px 0 24px; 2015 } 2016 2017 .media-modal .imgedit-group { 2018 background: none; 2019 border: none; 2020 border-bottom: 1px solid #dcdcde; 2021 box-shadow: none; 2022 margin: 0; 2023 margin-bottom: 16px; 2024 padding: 0; 2025 padding-bottom: 16px; 2026 position: relative; /* RTL fix, #WP29352 */ 2027 } 2028 2029 .media-modal .imgedit-group:last-of-type { 2030 border: none; 2031 margin: 0; 2032 padding: 0; 2033 } 2034 2035 .media-modal .imgedit-group-top { 2036 margin: 0; 2037 } 2038 2039 .media-modal .imgedit-group-top h2, 2040 .media-modal .imgedit-group-top h2 .button-link { 2041 display: inline-block; 2042 text-transform: uppercase; 2043 font-size: 12px; 2044 color: #646970; 2045 margin: 0; 2046 margin-top: 3px; 2047 } 2048 2049 .media-modal .imgedit-group-top h2 a, 2050 .media-modal .imgedit-group-top h2 .button-link { 2051 text-decoration: none; 2052 color: #646970; 2053 } 2054 2055 /* higher specificity than media.css */ 2056 .wp-core-ui.media-modal .image-editor .imgedit-help-toggle, 2057 .wp-core-ui.media-modal .image-editor .imgedit-help-toggle:hover, 2058 .wp-core-ui.media-modal .image-editor .imgedit-help-toggle:active { 2059 border: 1px solid transparent; 2060 margin: 0; 2061 padding: 0; 2062 background: transparent; 2063 color: #2271b1; 2064 font-size: 20px; 2065 line-height: 1; 2066 cursor: pointer; 2067 box-sizing: content-box; 2068 box-shadow: none; 2069 } 2070 2071 .wp-core-ui.media-modal .image-editor .imgedit-help-toggle:focus { 2072 color: #2271b1; 2073 border-color: #4f94d4; 2074 box-shadow: 0 0 3px rgba(34, 113, 177, 0.8); 2075 /* Only visible in Windows High Contrast mode */ 2076 outline: 2px solid transparent; 2077 } 2078 2079 .wp-core-ui.media-modal .imgedit-group-top .dashicons-arrow-down.imgedit-help-toggle { 2080 margin-top: -3px; 2081 } 2082 2083 .wp-core-ui.media-modal .image-editor h3 .imgedit-help-toggle { 2084 margin-top: -2px; 2085 } 2086 2087 .media-modal .imgedit-help-toggled span.dashicons:before { 2088 content: "\f142"; 2089 } 2090 2091 .media-modal .imgedit-thumbnail-preview { 2092 margin: 10px 0 0 8px; 2093 } 2094 2095 .imgedit-thumbnail-preview-caption { 2096 display: block; 2097 } 2098 2099 .media-modal .imgedit-wrap div.updated, /* Back-compat for pre-5.5 */ 2100 .media-modal .imgedit-wrap .notice { 2101 margin: 0; 2102 margin-bottom: 16px; 2103 } 2104 2105 /** 2106 * Embed from URL and Image Details 2107 */ 2108 .embed-url { 2109 display: block; 2110 position: relative; 2111 padding: 16px; 2112 margin: 0; 2113 z-index: 250; 2114 background: #fff; 2115 font-size: 18px; 2116 } 2117 2118 .media-frame .embed-url input { 2119 font-size: 18px; 2120 line-height: 1.22222222; /* 22px */ 2121 padding: 12px 14px 12px 40px; /* right padding to leave room for the spinner */ 2122 width: 100%; 2123 min-width: 200px; 2124 box-shadow: inset -2px 2px 4px -2px rgba(0, 0, 0, 0.1); 2125 } 2126 2127 .media-frame .embed-url input::-ms-clear { 2128 display: none; /* the "x" in IE 11 conflicts with the spinner */ 2129 } 2130 2131 .media-frame .embed-url .spinner { 2132 position: absolute; 2133 top: 32px; 2134 left: 26px; 2135 } 2136 2137 .media-frame .embed-loading .embed-url .spinner { 2138 visibility: visible; 2139 } 2140 2141 .embed-link-settings, 2142 .embed-media-settings { 2143 position: absolute; 2144 top: 70px; 2145 right: 0; 2146 left: 0; 2147 bottom: 0; 2148 padding: 0 16px; 2149 overflow: auto; 2150 } 2151 2152 /* 2153 * Implementation of bottom padding in overflow content differs across browsers. 2154 * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129 2155 */ 2156 .embed-link-settings::after, 2157 .embed-media-settings::after { 2158 content: ""; 2159 display: flex; 2160 clear: both; 2161 height: 24px; 2162 } 2163 2164 .media-embed .embed-link-settings { 2165 /* avoid Firefox to give focus to the embed preview container parent */ 2166 overflow: visible; 2167 } 2168 2169 .embed-preview img, 2170 .embed-preview iframe, 2171 .embed-preview embed, 2172 .mejs-container video { 2173 max-width: 100%; 2174 vertical-align: middle; 2175 } 2176 2177 .embed-preview a { 2178 display: inline-block; 2179 } 2180 2181 .embed-preview img { 2182 display: block; 2183 height: auto; 2184 } 2185 2186 .mejs-container:focus { 2187 outline: 1px solid #4f94d4; 2188 box-shadow: 0 0 2px 1px rgba(79, 148, 212, 0.8); 2189 } 2190 2191 .image-details .media-modal { 2192 right: 140px; 2193 left: 140px; 2194 } 2195 2196 .image-details .media-frame-title, 2197 .image-details .media-frame-content, 2198 .image-details .media-frame-router { 2199 right: 0; 2200 } 2201 2202 .image-details .embed-media-settings { 2203 top: 0; 2204 overflow: visible; 2205 padding: 0; 2206 } 2207 2208 .image-details .embed-media-settings::after { 2209 content: none; 2210 } 2211 2212 .image-details .embed-media-settings, 2213 .image-details .embed-media-settings div { 2214 box-sizing: border-box; 2215 } 2216 2217 .image-details .column-settings { 2218 background: #f6f7f7; 2219 border-left: 1px solid #dcdcde; 2220 min-height: 100%; 2221 width: 55%; 2222 position: absolute; 2223 top: 0; 2224 right: 0; 2225 } 2226 2227 .image-details .column-settings h2 { 2228 margin: 20px; 2229 padding-top: 20px; 2230 border-top: 1px solid #dcdcde; 2231 color: #1d2327; 2232 } 2233 2234 .image-details .column-image { 2235 width: 45%; 2236 position: absolute; 2237 right: 55%; 2238 top: 0; 2239 } 2240 2241 .image-details .image { 2242 margin: 20px; 2243 } 2244 2245 .image-details .image img { 2246 max-width: 100%; 2247 max-height: 500px; 2248 } 2249 2250 .image-details .advanced-toggle { 2251 padding: 0; 2252 color: #646970; 2253 text-transform: uppercase; 2254 text-decoration: none; 2255 } 2256 2257 .image-details .advanced-toggle:hover, 2258 .image-details .advanced-toggle:active { 2259 color: #646970; 2260 } 2261 2262 .image-details .advanced-toggle:after { 2263 font: normal 20px/1 dashicons; 2264 speak: never; 2265 vertical-align: top; 2266 -webkit-font-smoothing: antialiased; 2267 -moz-osx-font-smoothing: grayscale; 2268 content: "\f140"; 2269 display: inline-block; 2270 margin-top: -2px; 2271 } 2272 2273 .image-details .advanced-visible .advanced-toggle:after { 2274 content: "\f142"; 2275 } 2276 2277 .image-details .custom-size label, /* Back-compat for pre-5.3 */ 2278 .image-details .custom-size .custom-size-setting { 2279 display: block; 2280 float: right; 2281 } 2282 2283 .image-details .custom-size .custom-size-setting label { 2284 float: none; 2285 } 2286 2287 .image-details .custom-size input { 2288 width: 5em; 2289 } 2290 2291 .image-details .custom-size .sep { 2292 float: right; 2293 margin: 26px 6px 0 6px; 2294 } 2295 2296 .image-details .custom-size .description { 2297 margin-right: 0; 2298 } 2299 2300 .media-embed .thumbnail { 2301 max-width: 100%; 2302 max-height: 200px; 2303 position: relative; 2304 float: right; 2305 } 2306 2307 .media-embed .thumbnail img { 2308 max-height: 200px; 2309 display: block; 2310 } 2311 2312 .media-embed .thumbnail:after { 2313 content: ""; 2314 display: block; 2315 position: absolute; 2316 top: 0; 2317 right: 0; 2318 left: 0; 2319 bottom: 0; 2320 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); 2321 overflow: hidden; 2322 } 2323 2324 .media-embed .setting, 2325 .media-embed .setting-group { 2326 width: 100%; 2327 margin: 10px 0; 2328 float: right; 2329 display: block; 2330 clear: both; 2331 } 2332 2333 .media-embed .setting-group .setting:not(.checkbox-setting) { 2334 margin: 0; 2335 } 2336 2337 .media-embed .setting.has-description { 2338 margin-bottom: 5px; 2339 } 2340 2341 .media-embed .description { 2342 clear: both; 2343 font-style: normal; 2344 } 2345 2346 .media-embed .content-track + .description { 2347 line-height: 1.4; 2348 /* The !important needs to override a high specificity selector from wp-medialement.css */ 2349 max-width: none !important; 2350 } 2351 2352 .media-embed .remove-track { 2353 margin-bottom: 10px; 2354 } 2355 2356 .image-details .embed-media-settings .setting, 2357 .image-details .embed-media-settings .setting-group { 2358 float: none; 2359 width: auto; 2360 } 2361 2362 .image-details .actions { 2363 margin: 10px 0; 2364 } 2365 2366 .image-details .hidden { 2367 display: none; 2368 } 2369 2370 .media-embed .setting input[type="text"], 2371 .media-embed .setting textarea, 2372 .media-embed fieldset { 2373 display: block; 2374 width: 100%; 2375 max-width: 400px; 2376 } 2377 2378 .image-details .embed-media-settings .setting input[type="text"], 2379 .image-details .embed-media-settings .setting textarea { 2380 max-width: inherit; 2381 width: 70%; 2382 } 2383 2384 .image-details .embed-media-settings .setting input.link-to-custom, 2385 .image-details .embed-media-settings .link-target, 2386 .image-details .embed-media-settings .custom-size, 2387 .image-details .embed-media-settings .setting-group, 2388 .image-details .description { 2389 margin-right: 27%; 2390 width: 70%; 2391 } 2392 2393 .image-details .description { 2394 font-style: normal; 2395 margin-top: 0; 2396 } 2397 2398 .image-details .embed-media-settings .link-target { 2399 margin-top: 16px; 2400 } 2401 2402 .image-details .checkbox-label, 2403 .audio-details .checkbox-label, 2404 .video-details .checkbox-label { 2405 vertical-align: baseline; 2406 } 2407 2408 .media-embed .setting input.hidden, 2409 .media-embed .setting textarea.hidden { 2410 display: none; 2411 } 2412 2413 .media-embed .setting span, /* Back-compat for pre-5.3 */ 2414 .media-embed .setting .name, 2415 .media-embed .setting-group .name { 2416 display: inline-block; 2417 font-size: 13px; 2418 line-height: 1.84615384; 2419 color: #646970; 2420 } 2421 2422 .media-embed .setting span { 2423 display: block; /* Back-compat for pre-5.3 */ 2424 width: 200px; /* Back-compat for pre-5.3 */ 2425 } 2426 2427 .image-details .embed-media-settings .setting span, /* Back-compat for pre-5.3 */ 2428 .image-details .embed-media-settings .setting .name { 2429 float: right; 2430 width: 25%; 2431 text-align: left; 2432 margin: 8px 1% 0 1%; 2433 line-height: 1.1; 2434 } 2435 2436 /* Buttons group in IE 11. */ 2437 .media-frame .setting-group .button-group, 2438 .image-details .embed-media-settings .setting .button-group { 2439 width: auto; 2440 } 2441 2442 .media-embed-sidebar { 2443 position: absolute; 2444 top: 0; 2445 right: 440px; 2446 } 2447 2448 .advanced-section, 2449 .link-settings { 2450 margin-top: 10px; 2451 } 2452 2453 /** 2454 * Button groups fix: can be removed together with the Back-compat for pre-5.3 2455 */ 2456 .media-frame .setting .button-group { 2457 display: flex; 2458 margin: 0 !important; 2459 max-width: none !important; 2460 } 2461 2462 /** 2463 * Localization 2464 */ 2465 .rtl .media-modal, 2466 .rtl .media-frame, 2467 .rtl .media-frame .search, 2468 .rtl .media-frame input[type="text"], 2469 .rtl .media-frame input[type="password"], 2470 .rtl .media-frame input[type="number"], 2471 .rtl .media-frame input[type="search"], 2472 .rtl .media-frame input[type="email"], 2473 .rtl .media-frame input[type="url"], 2474 .rtl .media-frame input[type="tel"], 2475 .rtl .media-frame textarea, 2476 .rtl .media-frame select { 2477 font-family: Tahoma, sans-serif; 2478 } 2479 2480 :lang(he-il) .rtl .media-modal, 2481 :lang(he-il) .rtl .media-frame, 2482 :lang(he-il) .rtl .media-frame .search, 2483 :lang(he-il) .rtl .media-frame input[type="text"], 2484 :lang(he-il) .rtl .media-frame input[type="password"], 2485 :lang(he-il) .rtl .media-frame input[type="number"], 2486 :lang(he-il) .rtl .media-frame input[type="search"], 2487 :lang(he-il) .rtl .media-frame input[type="email"], 2488 :lang(he-il) .rtl .media-frame input[type="url"], 2489 :lang(he-il) .rtl .media-frame textarea, 2490 :lang(he-il) .rtl .media-frame select { 2491 font-family: Arial, sans-serif; 2492 } 2493 2494 /** 2495 * Responsive layout 2496 */ 2497 @media only screen and (max-width: 900px) { 2498 .media-modal .media-frame-title { 2499 height: 40px; 2500 } 2501 2502 .media-modal .media-frame-title h1 { 2503 line-height: 2.22222222; 2504 font-size: 18px; 2505 } 2506 2507 .media-modal-close { 2508 width: 42px; 2509 height: 42px; 2510 } 2511 2512 /* Drop-down menu */ 2513 .media-frame .media-frame-title { 2514 position: static; 2515 padding: 0 44px; 2516 text-align: center; 2517 } 2518 2519 .media-frame:not(.hide-menu) .media-frame-router, 2520 .media-frame:not(.hide-menu) .media-frame-content, 2521 .media-frame:not(.hide-menu) .media-frame-toolbar { 2522 right: 0; 2523 } 2524 2525 .media-frame:not(.hide-menu) .media-frame-router { 2526 /* 40 title + (40 - 6) menu toggle button + 6 spacing */ 2527 top: 80px; 2528 } 2529 2530 .media-frame:not(.hide-menu) .media-frame-content { 2531 /* 80 + room for the tabs */ 2532 top: 114px; 2533 } 2534 2535 .media-frame.hide-router .media-frame-content { 2536 top: 80px; 2537 } 2538 2539 .media-frame:not(.hide-menu) .media-frame-menu { 2540 position: static; 2541 width: 0; 2542 } 2543 2544 .media-frame:not(.hide-menu) .media-menu { 2545 display: none; 2546 width: auto; 2547 max-width: 80%; 2548 overflow: auto; 2549 z-index: 2000; 2550 top: 75px; 2551 right: 50%; 2552 transform: translateX(50%); 2553 left: auto; 2554 bottom: auto; 2555 padding: 5px 0; 2556 border: 1px solid #c3c4c7; 2557 } 2558 2559 .media-frame:not(.hide-menu) .media-menu.visible { 2560 display: block; 2561 } 2562 2563 .media-frame:not(.hide-menu) .media-menu > a { 2564 padding: 12px 16px; 2565 font-size: 16px; 2566 } 2567 2568 .media-frame:not(.hide-menu) .media-menu .separator { 2569 margin: 5px 10px; 2570 } 2571 2572 /* Visually hide the menu heading keeping it available to assistive technologies. */ 2573 .media-frame-menu-heading { 2574 clip: rect(1px, 1px, 1px, 1px); 2575 -webkit-clip-path: inset(50%); 2576 clip-path: inset(50%); 2577 height: 1px; 2578 overflow: hidden; 2579 padding: 0; 2580 width: 1px; 2581 word-wrap: normal !important; 2582 } 2583 2584 /* Reveal the menu toggle button. */ 2585 .wp-core-ui .media-frame:not(.hide-menu) .button.media-frame-menu-toggle { 2586 display: inline-flex; 2587 align-items: center; 2588 position: absolute; 2589 right: 50%; 2590 transform: translateX(50%); 2591 margin: -6px 0 0; 2592 padding: 0 12px 0 2px; 2593 font-size: 0.875rem; 2594 font-weight: 600; 2595 text-decoration: none; 2596 background: transparent; 2597 /* Only for IE11 to vertically align text within the inline-flex button */ 2598 height: 0.1%; 2599 /* Modern browsers */ 2600 min-height: 40px; 2601 } 2602 2603 .wp-core-ui .button.media-frame-menu-toggle:hover, 2604 .wp-core-ui .button.media-frame-menu-toggle:active { 2605 background: transparent; 2606 transform: none; 2607 } 2608 2609 .wp-core-ui .button.media-frame-menu-toggle:focus { 2610 /* Only visible in Windows High Contrast mode */ 2611 outline: 1px solid transparent; 2612 } 2613 /* End drop-down menu */ 2614 2615 .media-sidebar { 2616 width: 230px; 2617 } 2618 2619 .attachments-browser .attachments, 2620 .attachments-browser .uploader-inline, 2621 .attachments-browser .media-toolbar, 2622 .attachments-browser .attachments-wrapper, 2623 .attachments-browser.has-load-more .attachments-wrapper { 2624 left: 262px; 2625 } 2626 2627 .media-sidebar .setting, 2628 .attachment-details .setting { 2629 margin: 6px 0px; 2630 } 2631 2632 .media-sidebar .setting input, 2633 .media-sidebar .setting textarea, 2634 .media-sidebar .setting .name, 2635 .attachment-details .setting input, 2636 .attachment-details .setting textarea, 2637 .attachment-details .setting .name, 2638 .compat-item label span { 2639 float: none; 2640 display: inline-block; 2641 } 2642 2643 .media-sidebar .setting span, /* Back-compat for pre-5.3 */ 2644 .attachment-details .setting span, /* Back-compat for pre-5.3 */ 2645 .media-sidebar .checkbox-label-inline { 2646 float: none; 2647 } 2648 2649 .media-sidebar .setting .select-label-inline { 2650 display: inline; 2651 } 2652 2653 .media-sidebar .setting .name, 2654 .media-sidebar .checkbox-label-inline, 2655 .attachment-details .setting .name, 2656 .compat-item label span { 2657 text-align: inherit; 2658 min-height: 16px; 2659 margin: 0; 2660 padding: 8px 2px 2px; 2661 } 2662 2663 /* Needs high specificity. */ 2664 .media-sidebar .setting .copy-to-clipboard-container, 2665 .attachment-details .attachment-info .copy-to-clipboard-container { 2666 margin-right: 0; 2667 padding-top: 0; 2668 } 2669 2670 .media-sidebar .setting .copy-attachment-url, 2671 .attachment-details .attachment-info .copy-attachment-url { 2672 margin: 0 1px; 2673 } 2674 2675 .media-sidebar .setting .value, 2676 .attachment-details .setting .value { 2677 float: none; 2678 width: auto; 2679 } 2680 2681 .media-sidebar .setting input[type="text"], 2682 .media-sidebar .setting input[type="password"], 2683 .media-sidebar .setting input[type="email"], 2684 .media-sidebar .setting input[type="number"], 2685 .media-sidebar .setting input[type="search"], 2686 .media-sidebar .setting input[type="tel"], 2687 .media-sidebar .setting input[type="url"], 2688 .media-sidebar .setting textarea, 2689 .media-sidebar .setting select, 2690 .attachment-details .setting input[type="text"], 2691 .attachment-details .setting input[type="password"], 2692 .attachment-details .setting input[type="email"], 2693 .attachment-details .setting input[type="number"], 2694 .attachment-details .setting input[type="search"], 2695 .attachment-details .setting input[type="tel"], 2696 .attachment-details .setting input[type="url"], 2697 .attachment-details .setting textarea, 2698 .attachment-details .setting select, 2699 .attachment-details .setting + .description { 2700 float: none; 2701 width: 98%; 2702 max-width: none; 2703 height: auto; 2704 } 2705 2706 .media-frame .media-toolbar input[type="search"] { 2707 line-height: 2.25; /* 36px */ 2708 } 2709 2710 .media-sidebar .setting select.columns, 2711 .attachment-details .setting select.columns { 2712 width: auto; 2713 } 2714 2715 .media-frame input, 2716 .media-frame textarea, 2717 .media-frame .search { 2718 padding: 3px 6px; 2719 } 2720 2721 .wp-admin .media-frame select { 2722 min-height: 40px; 2723 font-size: 16px; 2724 line-height: 1.625; 2725 padding: 5px 8px 5px 24px; 2726 } 2727 2728 .image-details .column-image { 2729 width: 30%; 2730 right: 70%; 2731 } 2732 2733 .image-details .column-settings { 2734 width: 70%; 2735 } 2736 2737 .image-details .media-modal { 2738 right: 30px; 2739 left: 30px; 2740 } 2741 2742 .image-details .embed-media-settings .setting, 2743 .image-details .embed-media-settings .setting-group { 2744 margin: 20px; 2745 } 2746 2747 .image-details .embed-media-settings .setting span, /* Back-compat for pre-5.3 */ 2748 .image-details .embed-media-settings .setting .name { 2749 float: none; 2750 text-align: right; 2751 width: 100%; 2752 margin-bottom: 4px; 2753 margin-right: 0; 2754 } 2755 2756 .media-modal .legend-inline { 2757 position: static; 2758 transform: none; 2759 margin-right: 0; 2760 margin-bottom: 6px; 2761 } 2762 2763 .image-details .embed-media-settings .setting-group .setting { 2764 margin-bottom: 0; 2765 } 2766 2767 .image-details .embed-media-settings .setting input.link-to-custom, 2768 .image-details .embed-media-settings .setting input[type="text"], 2769 .image-details .embed-media-settings .setting textarea { 2770 width: 100%; 2771 margin-right: 0; 2772 } 2773 2774 .image-details .embed-media-settings .setting.has-description { 2775 margin-bottom: 5px; 2776 } 2777 2778 .image-details .description { 2779 width: auto; 2780 margin: 0 20px; 2781 } 2782 2783 .image-details .embed-media-settings .custom-size { 2784 margin-right: 20px; 2785 } 2786 2787 .collection-settings .setting input[type="checkbox"] { 2788 float: none; 2789 margin-top: 0; 2790 } 2791 2792 .media-selection { 2793 min-width: 120px; 2794 } 2795 2796 .media-selection:after { 2797 background: none; 2798 } 2799 2800 .media-selection .attachments { 2801 display: none; 2802 } 2803 2804 .media-modal .attachments-browser .media-toolbar .search { 2805 max-width: 100%; 2806 height: auto; 2807 float: left; 2808 } 2809 2810 .media-modal .attachments-browser .media-toolbar .attachment-filters { 2811 height: auto; 2812 } 2813 2814 /* Text inputs need to be 16px, or they force zooming on iOS */ 2815 .media-frame input[type="text"], 2816 .media-frame input[type="password"], 2817 .media-frame input[type="number"], 2818 .media-frame input[type="search"], 2819 .media-frame input[type="email"], 2820 .media-frame input[type="url"], 2821 .media-frame textarea, 2822 .media-frame select { 2823 font-size: 16px; 2824 } 2825 2826 .media-frame .media-toolbar input[type="search"] { 2827 line-height: 2.3755; /* 38px */ 2828 } 2829 2830 .media-modal .media-toolbar .spinner { 2831 margin-bottom: 10px; 2832 } 2833 } 2834 2835 @media screen and (max-width: 782px) { 2836 .attachments-browser .media-toolbar { 2837 height: 82px; 2838 } 2839 2840 .attachments-browser .attachments, 2841 .attachments-browser .uploader-inline { 2842 top: 82px; 2843 } 2844 2845 .media-frame-toolbar .media-toolbar { 2846 bottom: -54px; 2847 } 2848 2849 .mode-grid .attachments-browser .media-toolbar-primary { 2850 display: block; 2851 } 2852 2853 .media-sidebar .copy-to-clipboard-container .success, 2854 .attachment-details .copy-to-clipboard-container .success { 2855 font-size: 14px; 2856 line-height: 2.71428571; 2857 } 2858 } 2859 2860 /* Responsive on portrait and landscape */ 2861 @media only screen and (max-width: 640px), screen and (max-height: 400px) { 2862 /* Full-bleed modal */ 2863 .media-modal, 2864 .image-details .media-modal { 2865 position: fixed; 2866 top: 0; 2867 right: 0; 2868 left: 0; 2869 bottom: 0; 2870 } 2871 2872 .media-modal-backdrop { 2873 position: fixed; 2874 } 2875 2876 .media-sidebar { 2877 z-index: 1900; 2878 max-width: 70%; 2879 bottom: 120%; 2880 box-sizing: border-box; 2881 padding-bottom: 0; 2882 } 2883 2884 .media-sidebar.visible { 2885 bottom: 0; 2886 } 2887 2888 .attachments-browser .attachments, 2889 .attachments-browser .uploader-inline, 2890 .attachments-browser .media-toolbar, 2891 .media-frame-content .attachments-browser .attachments-wrapper { 2892 left: 0; 2893 } 2894 2895 .attachments-browser .attachments-wrapper { 2896 padding-top: 12px; 2897 } 2898 2899 .image-details .media-frame-title { 2900 display: block; 2901 top: 0; 2902 font-size: 14px; 2903 } 2904 2905 .image-details .column-image, 2906 .image-details .column-settings { 2907 width: 100%; 2908 position: relative; 2909 right: 0; 2910 } 2911 2912 .image-details .column-settings { 2913 padding: 4px 0; 2914 } 2915 2916 /* Media tabs on the top */ 2917 .media-frame-content .media-toolbar .instructions { 2918 display: none; 2919 } 2920 2921 /* Change margin direction on load more button in responsive views. */ 2922 .load-more-wrapper .load-more-jump { 2923 margin: 12px 0 0 0; 2924 } 2925 2926 } 2927 2928 @media only screen and (min-width: 901px) and (max-height: 400px) { 2929 .media-menu, 2930 .media-frame:not(.hide-menu) .media-menu { 2931 top: 0; 2932 padding-top: 44px; 2933 } 2934 2935 /* Change margin direction on load more button in responsive views. */ 2936 .load-more-wrapper .load-more-jump { 2937 margin: 12px 0 0 0; 2938 } 2939 2940 } 2941 2942 @media only screen and (max-width: 480px) { 2943 .wp-core-ui.wp-customizer .media-button { 2944 margin-top: 13px; 2945 } 2946 } 2947 2948 /** 2949 * HiDPI Displays 2950 */ 2951 @media print, 2952 (-webkit-min-device-pixel-ratio: 1.25), 2953 (min-resolution: 120dpi) { 2954 2955 .wp-core-ui .media-modal-icon { 2956 background-image: url(../images/uploader-icons-2x.png); 2957 background-size: 134px 15px; 2958 } 2959 2960 .media-frame .spinner { 2961 background-image: url(../images/spinner-2x.gif); 2962 } 2963 } 2964 2965 .media-frame-content[data-columns="1"] .attachment { 2966 width: 100%; 2967 } 2968 2969 .media-frame-content[data-columns="2"] .attachment { 2970 width: 50%; 2971 } 2972 2973 .media-frame-content[data-columns="3"] .attachment { 2974 width: 33.33%; 2975 } 2976 2977 .media-frame-content[data-columns="4"] .attachment { 2978 width: 25%; 2979 } 2980 2981 .media-frame-content[data-columns="5"] .attachment { 2982 width: 20%; 2983 } 2984 2985 .media-frame-content[data-columns="6"] .attachment { 2986 width: 16.66%; 2987 } 2988 2989 .media-frame-content[data-columns="7"] .attachment { 2990 width: 14.28%; 2991 } 2992 2993 .media-frame-content[data-columns="8"] .attachment { 2994 width: 12.5%; 2995 } 2996 2997 .media-frame-content[data-columns="9"] .attachment { 2998 width: 11.11%; 2999 } 3000 3001 .media-frame-content[data-columns="10"] .attachment { 3002 width: 10%; 3003 } 3004 3005 .media-frame-content[data-columns="11"] .attachment { 3006 width: 9.09%; 3007 } 3008 3009 .media-frame-content[data-columns="12"] .attachment { 3010 width: 8.33%; 3011 }