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