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