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