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