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