wp-includes/css/media-views.css

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