wp-includes/css/media-views.css

   1 /**
   2  * Base Styles
   3  */
   4 .media-modal,
   5 .media-frame {
   6         font-family: sans-serif;
   7         font-size: 12px;
   8 }
   9
  10 .media-frame input,
  11 .media-frame textarea {
  12         padding: 6px 8px;
  13         line-height: 16px;
  14 }
  15
  16 .media-frame select,
  17 .wp-admin .media-frame select {
  18         line-height: 28px;
  19         margin-top: 3px;
  20 }
  21
  22 .media-frame a {
  23         border-bottom: none;
  24         color: #21759b;
  25 }
  26
  27 .media-frame a:hover {
  28         color: #d54e21;
  29 }
  30
  31 .media-frame a.button {
  32         color: #333;
  33 }
  34
  35 .media-frame a.button:hover {
  36         color: #222;
  37 }
  38
  39 .media-frame a.button-primary,
  40 .media-frame a.button-primary:hover {
  41         color: #fff;
  42 }
  43
  44 .media-frame input[type="text"],
  45 .media-frame input[type="password"],
  46 .media-frame input[type="number"],
  47 .media-frame input[type="search"],
  48 .media-frame input[type="email"],
  49 .media-frame input[type="url"],
  50 .media-frame textarea,
  51 .media-frame select {
  52         font-family: sans-serif;
  53         font-size: 12px;
  54         -moz-box-sizing: border-box;
  55         -webkit-box-sizing: border-box;
  56         -ms-box-sizing: border-box; /* ie8 only */
  57         box-sizing: border-box;
  58         -webkit-border-radius: 3px;
  59         border-radius: 3px;
  60         border-width: 1px;
  61         border-style: solid;
  62         border-color: #dfdfdf;
  63 }
  64
  65 .media-frame select {
  66         height: 24px;
  67         padding: 2px;
  68 }
  69
  70 .media-frame input:disabled,
  71 .media-frame textarea:disabled,
  72 .media-frame input[readonly],
  73 .media-frame textarea[readonly] {
  74         background-color: #eee;
  75 }
  76
  77 .media-frame input[type="search"] {
  78         -webkit-appearance: textfield;
  79 }
  80
  81 .media-frame :-moz-placeholder {
  82    color: #a9a9a9;
  83 }
  84
  85 /* Enable draggable on IE10 touch events until it's rolled into jQuery UI core */
  86 .ui-sortable,
  87 .ui-draggable {
  88         -ms-touch-action: none;
  89 }
  90
  91 /**
  92  * Modal
  93  */
  94 .media-modal {
  95         position: fixed;
  96         top: 30px;
  97         left: 30px;
  98         right: 30px;
  99         bottom: 30px;
 100         z-index: 160000;
 101 }
 102
 103 .media-modal-backdrop {
 104         position: fixed;
 105         top: 0;
 106         left: 0;
 107         right: 0;
 108         bottom: 0;
 109         min-height: 360px;
 110         background: #000;
 111         opacity: 0.7;
 112         z-index: 159900;
 113 }
 114
 115 .media-modal-close {
 116         position: absolute;
 117         top: 7px;
 118         right: 7px;
 119         width: 30px;
 120         height: 30px;
 121         z-index: 1000;
 122 }
 123 .media-modal-close span {
 124         display: block;
 125         margin: 8px auto 0;
 126         width: 15px;
 127         height: 15px;
 128         background-position: -100px 0;
 129 }
 130
 131 .media-modal-close:active {
 132         outline: 0;
 133 }
 134
 135 .media-modal-content {
 136         position: absolute;
 137         top: 0;
 138         left: 0;
 139         right: 0;
 140         bottom: 0;
 141         overflow: auto;
 142         min-height: 300px;
 143         background: #fff;
 144 }
 145
 146 .media-modal-icon {
 147         background-image: url(../images/uploader-icons.png);
 148         background-repeat: no-repeat;
 149 }
 150
 151 /**
 152  * Toolbar
 153  */
 154 .media-toolbar {
 155         position: absolute;
 156         top: 0;
 157         left: 0;
 158         right: 0;
 159         z-index: 100;
 160         height: 60px;
 161         padding: 0 16px;
 162         border: 0 solid #dfdfdf;
 163         overflow: hidden;
 164 }
 165
 166 .media-toolbar-primary {
 167         float: right;
 168         height: 100%;
 169 }
 170
 171 .media-toolbar-secondary {
 172         float: left;
 173         height: 100%;
 174 }
 175
 176 .media-toolbar-primary > .media-button,
 177 .media-toolbar-primary > .media-button-group {
 178         margin-left: 10px;
 179         float: left;
 180         margin-top: 15px;
 181 }
 182
 183 .media-toolbar-secondary > .media-button,
 184 .media-toolbar-secondary > .media-button-group {
 185         margin-right: 10px;
 186         float: left;
 187         margin-top: 15px;
 188 }
 189
 190 /**
 191  * Sidebar
 192  */
 193 .media-sidebar {
 194         position: absolute;
 195         top: 0;
 196         right: 0;
 197         bottom: 0;
 198         width: 267px;
 199         padding: 0 16px 24px;
 200         z-index: 75;
 201         background: #f5f5f5;
 202         border-left: 1px solid #dfdfdf;
 203         overflow: auto;
 204         -webkit-overflow-scrolling: touch;
 205 }
 206
 207 .hide-toolbar .media-sidebar {
 208         bottom: 0;
 209 }
 210
 211 .media-sidebar .sidebar-title {
 212         font-weight: 200;
 213         font-size: 20px;
 214         margin: 0;
 215         padding: 12px 10px 10px;
 216         line-height: 28px;
 217 }
 218
 219 .media-sidebar .sidebar-content {
 220         padding: 0 10px;
 221         margin-bottom: 130px;
 222 }
 223
 224 .media-sidebar .search {
 225         display: block;
 226         width: 100%;
 227 }
 228
 229 .media-sidebar h3 {
 230         position: relative;
 231         font-weight: bold;
 232         text-transform: uppercase;
 233         font-size: 12px;
 234         color: #777;
 235         text-shadow: 0 1px 0 #fff;
 236         margin: 24px 0 8px;
 237 }
 238
 239 .media-sidebar .setting {
 240         display: block;
 241         float: left;
 242         width: 100%;
 243         margin: 1px 0;
 244 }
 245
 246 .media-sidebar .setting label {
 247         display: block;
 248 }
 249
 250 .media-sidebar .setting .link-to-custom {
 251         margin: 3px 0;
 252 }
 253
 254 .media-sidebar .setting span {
 255         min-width: 30%;
 256         margin-right: 4%;
 257         font-size: 12px;
 258 }
 259
 260 .media-sidebar .setting select {
 261         max-width: 65%;
 262 }
 263
 264 .media-sidebar .setting input[type="checkbox"] {
 265         width: auto;
 266         float: none;
 267         margin-top: 8px;
 268         padding: 0;
 269 }
 270
 271 .media-sidebar .setting span,
 272 .compat-item label span {
 273         float: left;
 274         min-height: 22px;
 275         padding-top: 8px;
 276         line-height: 16px;
 277         text-align: right;
 278         font-weight: normal;
 279         color: #999;
 280         text-shadow: 0 1px 0 #fff;
 281 }
 282
 283 .media-sidebar .setting input,
 284 .media-sidebar .setting textarea {
 285         width: 65%;
 286         float: right;
 287 }
 288
 289 .media-sidebar .setting textarea,
 290 .compat-item .field textarea {
 291         height: 62px;
 292         resize: vertical;
 293 }
 294
 295 .media-sidebar select {
 296         margin-top: 3px;
 297 }
 298
 299 .compat-item {
 300         float: left;
 301         width: 100%;
 302         overflow: hidden;
 303 }
 304
 305 .compat-item table {
 306         width: 100%;
 307         table-layout: fixed;
 308         border-spacing: 0;
 309         border: 0;
 310 }
 311
 312 .compat-item tr {
 313         padding: 2px 0;
 314         display: block;
 315         overflow: hidden;
 316 }
 317
 318 .compat-item .label,
 319 .compat-item .field {
 320         display: block;
 321         margin: 0;
 322         padding: 0;
 323 }
 324
 325 .compat-item .label {
 326         min-width: 30%;
 327         margin-right: 4%;
 328         float: left;
 329         text-align: right;
 330 }
 331
 332 .compat-item .label span {
 333         display: block;
 334         width: 100%;
 335 }
 336
 337 .compat-item .field {
 338         float: right;
 339         width: 65%;
 340         padding-right: 1px;
 341 }
 342
 343 .compat-item .field input {
 344         width: 100%;
 345         margin: 0;
 346 }
 347
 348
 349 /**
 350  * Menu
 351  */
 352 .media-menu {
 353         position: absolute;
 354         top: 0;
 355         left: 0;
 356         right: 0;
 357         bottom: 0;
 358         margin: 0;
 359         padding: 16px 0;
 360         border-right: 1px solid #d9d9d9;
 361         box-shadow: inset -6px 0 6px -6px rgba( 0, 0, 0, 0.2 );
 362         -webkit-user-select: none;
 363         -moz-user-select: none;
 364         -ms-user-select: none;
 365         user-select: none;
 366 }
 367
 368 .media-menu > a {
 369         display: block;
 370         position: relative;
 371         padding: 4px 20px;
 372         margin: 0;
 373         line-height: 18px;
 374         font-size: 14px;
 375         color: #21759B;
 376         text-shadow: 0 1px 0 #fff;
 377         text-decoration: none;
 378 }
 379
 380 .media-menu > a:hover {
 381         color: #21759B;
 382         background: rgba( 0, 0, 0, 0.04 );
 383 }
 384
 385 .media-menu > a:active {
 386         outline: none;
 387 }
 388
 389 .media-menu .active,
 390 .media-menu .active:hover {
 391         color: #333;
 392         font-weight: bold;
 393 }
 394
 395 .media-menu .separator {
 396         height: 0;
 397         margin: 12px 20px;
 398         padding: 0;
 399         border-top: 1px solid #dfdfdf;
 400         border-bottom: 1px solid #fff;
 401 }
 402
 403 /**
 404  * Menu
 405  */
 406 .media-router {
 407         position: relative;
 408         padding: 0 6px;
 409         margin: 0;
 410         clear: both;
 411         -webkit-user-select: none;
 412         -moz-user-select: none;
 413         -ms-user-select: none;
 414         user-select: none;
 415 }
 416
 417 .media-router > a {
 418         position: relative;
 419         float: left;
 420         padding: 2px 10px;
 421         margin: 0;
 422         height: 18px;
 423         line-height: 18px;
 424         font-size: 14px;
 425         border-right: 1px solid #dfdfdf;
 426         text-shadow: 0 1px 0 #fff;
 427         text-decoration: none;
 428 }
 429
 430 .media-router > a:last-child {
 431         border-right: 0;
 432 }
 433
 434 .media-router > a:active,
 435 .media-router > a:focus {
 436         outline: none;
 437 }
 438
 439 .media-router .active,
 440 .media-router .active:hover {
 441         color: #333;
 442 }
 443
 444 .media-router .active:after {
 445         content: '';
 446         display: block;
 447         margin: -100px auto 0;
 448         width: 7px;
 449         height: 7px;
 450         background: #fff;
 451         box-shadow: 1px 1px 1px rgba( 0, 0, 0, 0.2 );
 452         z-index: 300;
 453
 454         -webkit-transform: rotate( 45deg ) translate( 75px, 75px );
 455         -moz-transform:    rotate( 45deg ) translate( 75px, 75px );
 456         -ms-transform:     rotate( 45deg ) translate( 75px, 75px );
 457         -o-transform:      rotate( 45deg ) translate( 75px, 75px );
 458         transform:         rotate( 45deg ) translate( 75px, 75px );
 459 }
 460
 461 /**
 462  * Frame
 463  */
 464 .media-frame {
 465         overflow: hidden;
 466         position: absolute;
 467         top: 0;
 468         left: 0;
 469         right: 0;
 470         bottom: 0;
 471 }
 472
 473 .media-frame-menu {
 474         position: absolute;
 475         top: 0;
 476         left: 0;
 477         bottom: 0;
 478         width: 199px;
 479         z-index: 150;
 480 }
 481
 482 .media-frame-title {
 483         position: absolute;
 484         top: 0;
 485         left: 200px;
 486         right: 0;
 487         height: 45px;
 488         z-index: 200;
 489 }
 490
 491 .media-frame-router {
 492         position: absolute;
 493         top: 45px;
 494         left: 200px;
 495         right: 0;
 496         height: 30px;
 497         z-index: 200;
 498         border-bottom: 1px solid #dfdfdf;
 499         box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
 500 }
 501
 502 .media-frame-content {
 503         position: absolute;
 504         top: 75px;
 505         left: 200px;
 506         right: 0;
 507         bottom: 61px;
 508         height: auto;
 509         width: auto;
 510         margin: 0;
 511         overflow: auto;
 512 }
 513
 514 .media-frame-toolbar {
 515         position: absolute;
 516         left: 200px;
 517         right: 0;
 518         bottom: 0;
 519         height: 60px;
 520         z-index: 100;
 521         border: 0 solid #dfdfdf;
 522         border-width: 1px 0 0 0;
 523         box-shadow: 0 -4px 4px -4px rgba( 0, 0, 0, 0.1 );
 524 }
 525
 526 .media-frame.hide-menu .media-frame-title,
 527 .media-frame.hide-menu .media-frame-router,
 528 .media-frame.hide-menu .media-frame-toolbar,
 529 .media-frame.hide-menu .media-frame-content {
 530         left: 0;
 531 }
 532
 533 .media-frame.hide-menu .media-frame-menu {
 534         left: -200px;
 535 }
 536
 537 .media-frame.hide-toolbar .media-frame-content {
 538         bottom: 0;
 539 }
 540
 541 .media-frame.hide-toolbar .media-frame-toolbar {
 542         bottom: -61px;
 543 }
 544
 545 .media-frame.hide-router .media-frame-content {
 546         top: 45px;
 547 }
 548
 549 .media-frame.hide-router .media-frame-router {
 550         display: none;
 551 }
 552
 553 .media-frame.hide-router .media-frame-title {
 554         border-bottom: 1px solid #dfdfdf;
 555         box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
 556 }
 557
 558 .media-frame .media-toolbar .add-to-gallery {
 559         display: none;
 560 }
 561
 562 .media-frame-title h1 {
 563         padding: 0 16px;
 564         font-size: 22px;
 565         font-weight: 200;
 566         line-height: 45px;
 567         margin: 0;
 568 }
 569
 570 /**
 571  * Iframes
 572  */
 573 .media-frame .media-iframe {
 574         overflow: hidden;
 575 }
 576
 577 .media-frame .media-iframe,
 578 .media-frame .media-iframe iframe {
 579         height: 100%;
 580         width: 100%;
 581         border: 0;
 582 }
 583
 584 /**
 585  * Attachment Browser Filters
 586  */
 587 .media-frame select.attachment-filters {
 588         margin-top: 11px;
 589         margin-right: 10px;
 590 }
 591
 592 /**
 593  * Search
 594  */
 595 .media-frame .search {
 596         margin-top: 11px;
 597         padding: 4px;
 598         line-height: 18px;
 599         font-size: 13px;
 600         color: #464646;
 601         font-family: sans-serif;
 602         -webkit-appearance: none;
 603 }
 604
 605 .media-toolbar-secondary .search {
 606         margin-right: 16px;
 607 }
 608
 609 /**
 610  * Attachments
 611  */
 612 .attachments {
 613         margin: 0;
 614         padding-right: 16px;
 615         -webkit-overflow-scrolling: touch;
 616 }
 617
 618 /**
 619  * Attachment
 620  */
 621 .attachment {
 622         position: relative;
 623         float: left;
 624
 625         padding: 0;
 626         margin: 0 10px 20px;
 627         color: #464646;
 628         list-style: none;
 629         text-align: center;
 630
 631         -webkit-user-select: none;
 632         -moz-user-select:    none;
 633         -ms-user-select:     none;
 634         -o-user-select:      none;
 635         user-select:         none;
 636 }
 637
 638 .selected.attachment {
 639         box-shadow:
 640                 0 0 0 1px #fff,
 641                 0 0 0 3px #ccc;
 642 }
 643
 644 .details.attachment {
 645         box-shadow:
 646                 0 0 0 1px #fff,
 647                 0 0 0 5px #1e8cbe;
 648 }
 649
 650 .attachment-preview {
 651         position: relative;
 652         width: 199px;
 653         height: 199px;
 654         box-shadow:
 655                 inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
 656                 inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
 657         background: #eee;
 658         cursor: pointer;
 659 }
 660
 661 .attachment .icon {
 662         margin: 0 auto;
 663         overflow: hidden;
 664         padding-top: 20%;
 665 }
 666
 667 .attachment .thumbnail {
 668         display: block;
 669         position: absolute;
 670         top: 0;
 671         left: 0;
 672         margin: 0 auto;
 673         overflow: hidden;
 674         max-width: 100%;
 675         max-height: 100%;
 676 }
 677
 678 .attachment-preview .thumbnail:after {
 679         content: '';
 680         display: block;
 681         position: absolute;
 682         top: 0;
 683         left: 0;
 684         right: 0;
 685         bottom: 0;
 686         box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
 687         overflow: hidden;
 688 }
 689
 690 .attachment .thumbnail img {
 691         top: 0;
 692         left: 0;
 693 }
 694
 695 .attachment .thumbnail .centered {
 696         position: absolute;
 697         top: 0;
 698         left: 0;
 699         width: 100%;
 700         height: 100%;
 701         -webkit-transform: translate( 50%, 50% );
 702         -moz-transform:    translate( 50%, 50% );
 703         -ms-transform:     translate( 50%, 50% );
 704         -o-transform:      translate( 50%, 50% );
 705         transform:         translate( 50%, 50% );
 706 }
 707
 708 .attachment .thumbnail .centered img {
 709         -webkit-transform: translate( -50%, -50% );
 710         -moz-transform:    translate( -50%, -50% );
 711         -ms-transform:     translate( -50%, -50% );
 712         -o-transform:      translate( -50%, -50% );
 713         transform:         translate( -50%, -50% );
 714 }
 715
 716 .attachment .filename {
 717         position: absolute;
 718         left: 0;
 719         right: 0;
 720         bottom: 0;
 721         overflow: hidden;
 722         max-height: 100%;
 723
 724         word-wrap: break-word;
 725         text-align: center;
 726         font-weight: bold;
 727         background: rgba( 255, 255, 255, 0.8 );
 728         box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
 729 }
 730
 731 .attachment .filename div {
 732         padding: 5px 10px;
 733 }
 734
 735 .attachment-preview .thumbnail {
 736         width: 199px;
 737         height: 199px;
 738 }
 739
 740 .attachment .thumbnail img {
 741         position: absolute;
 742 }
 743
 744 .attachment .close {
 745         display: none;
 746         position: absolute;
 747         top: 5px;
 748         right: 5px;
 749         height: 22px;
 750         width: 22px;
 751         padding: 0;
 752         font-size: 20px;
 753         line-height: 20px;
 754         text-align: center;
 755         text-decoration: none;
 756         color: #464646;
 757         background-color: #fff;
 758         background-position: -96px 4px;
 759         border-width: 0;
 760         border-radius: 3px;
 761         box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
 762 }
 763
 764 .attachment .close:hover {
 765         box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 );
 766 }
 767
 768 .attachment:hover .close {
 769         display: block;
 770 }
 771
 772 .attachment .check {
 773         display: none;
 774         height: 24px;
 775         width: 24px;
 776         position: absolute;
 777         top: -7px;
 778         right: -7px;
 779         outline: none;
 780
 781         border: 1px solid #fff;
 782         border-radius: 3px;
 783         box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.4 );
 784
 785         background: #f1f1f1;
 786         background-image: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#e1e1e1));
 787         background-image: -webkit-linear-gradient(top, #f1f1f1, #e1e1e1);
 788         background-image:    -moz-linear-gradient(top, #f1f1f1, #e1e1e1);
 789         background-image:      -o-linear-gradient(top, #f1f1f1, #e1e1e1);
 790         background-image:   linear-gradient(to bottom, #f1f1f1, #e1e1e1);
 791 }
 792
 793 .attachment .check div {
 794         background-position: -1px 0;
 795         height: 15px;
 796         width: 15px;
 797         margin: 5px;
 798 }
 799
 800 .attachment .check:hover div {
 801         background-position: -40px 0;
 802 }
 803
 804 .attachment.selected .check {
 805         display: block;
 806 }
 807
 808 .attachment.details .check {
 809         box-shadow: 0 0 0 1px #1e8cbe;
 810
 811         background: #1e8cbe;
 812         background-image: -webkit-gradient(linear, left top, left bottom, from(#1e8cbe), to(#0074a2));
 813         background-image: -webkit-linear-gradient(top, #1e8cbe, #0074a2);
 814         background-image:    -moz-linear-gradient(top, #1e8cbe, #0074a2);
 815         background-image:      -o-linear-gradient(top, #1e8cbe, #0074a2);
 816         background-image:   linear-gradient(to bottom, #1e8cbe, #0074a2);
 817 }
 818
 819 .attachment.details .check div {
 820         background-position: -21px 0;
 821 }
 822
 823 .attachment.details .check:hover div {
 824         background-position: -60px 0;
 825 }
 826
 827 .media-frame .attachment .describe {
 828         position: relative;
 829         display: block;
 830         width: 100%;
 831         margin: -1px 0 0;
 832         padding: 8px;
 833         font-size: 12px;
 834         border-radius: 0;
 835 }
 836
 837 /**
 838  * Attachments Browser
 839  */
 840 .media-frame .attachments-browser {
 841         position: relative;
 842         width: 100%;
 843         height: 100%;
 844         overflow: hidden;
 845 }
 846
 847 .attachments-browser .media-toolbar {
 848         right: 300px;
 849         height: 50px;
 850 }
 851
 852 .attachments-browser .media-toolbar-primary > .media-button,
 853 .attachments-browser .media-toolbar-primary > .media-button-group,
 854 .attachments-browser .media-toolbar-secondary > .media-button,
 855 .attachments-browser .media-toolbar-secondary > .media-button-group {
 856         margin-top: 10px;
 857 }
 858
 859 .attachments-browser .attachments,
 860 .attachments-browser .uploader-inline {
 861         position: absolute;
 862         top: 50px;
 863         left: 0;
 864         right: 300px;
 865         bottom: 0;
 866         overflow: auto;
 867 }
 868
 869 .attachments-browser .instructions {
 870         display: inline-block;
 871         margin-top: 16px;
 872         line-height: 18px;
 873         font-size: 13px;
 874         color: #999;
 875 }
 876
 877 /**
 878  * Progress Bar
 879  */
 880 .media-progress-bar {
 881         position: relative;
 882         height: 10px;
 883         width: 70%;
 884         margin: 10px auto;
 885         border-radius: 10px;
 886         background: #dfdfdf;
 887         background: rgba( 0, 0, 0, 0.1 );
 888 }
 889
 890 .media-progress-bar div {
 891         height: 10px;
 892         min-width: 20px;
 893         width: 0;
 894         background: #aaa;
 895         background: rgba( 0, 0, 0, 0.2 );
 896         border-radius: 10px;
 897         -webkit-transition: width 300ms;
 898         -moz-transition:    width 300ms;
 899         -ms-transition:     width 300ms;
 900         -o-transition:      width 300ms;
 901         transition:         width 300ms;
 902 }
 903
 904 .media-uploader-status .media-progress-bar {
 905         display: none;
 906         width: 100%;
 907 }
 908
 909 .uploading.media-uploader-status .media-progress-bar {
 910         display: block;
 911 }
 912
 913 .attachment-preview .media-progress-bar {
 914         position: absolute;
 915         top: 50%;
 916         left: 15%;
 917         width: 70%;
 918         margin: -5px 0 0 0;
 919 }
 920
 921 .media-uploader-status {
 922         position: relative;
 923         margin: 0 auto;
 924         padding-bottom: 10px;
 925         max-width: 400px;
 926 }
 927
 928 .media-sidebar .media-uploader-status {
 929         border-bottom: 1px solid #dfdfdf;
 930         box-shadow: 0 1px 0 #fff;
 931 }
 932
 933 .uploader-inline .media-uploader-status h3 {
 934         display: none;
 935 }
 936
 937 .media-uploader-status .upload-details {
 938         display: none;
 939         font-size: 12px;
 940         color: #666;
 941         text-shadow: 0 1px 0 #fff;
 942 }
 943
 944 .uploading.media-uploader-status .upload-details {
 945         display: block;
 946 }
 947
 948 .media-uploader-status .upload-detail-separator {
 949         padding: 0 4px;
 950 }
 951
 952 .media-uploader-status .upload-count {
 953         color: #464646;
 954 }
 955
 956 .media-uploader-status .upload-dismiss-errors,
 957 .media-uploader-status .upload-errors {
 958         display: none;
 959 }
 960
 961 .errors.media-uploader-status .upload-dismiss-errors,
 962 .errors.media-uploader-status .upload-errors {
 963         display: block;
 964 }
 965
 966 .media-uploader-status .upload-dismiss-errors {
 967         text-decoration: none;
 968 }
 969
 970 .media-sidebar .media-uploader-status .upload-dismiss-errors {
 971         position: absolute;
 972         top: 0;
 973         right: 0;
 974 }
 975
 976 .upload-errors .upload-error {
 977         margin: 8px auto 0 auto;
 978         padding: 8px;
 979         border: 1px #c00 solid;
 980         background: #ffebe8;
 981         border-radius: 3px;
 982 }
 983
 984 .upload-errors .upload-error-label {
 985         padding: 2px 4px;
 986         margin-right: 8px;
 987         font-weight: bold;
 988         color: #fff;
 989         background: #e00;
 990         background-image: -webkit-gradient(linear, left top, left bottom, from(#e00), to(#a00));
 991         background-image: -webkit-linear-gradient(top, #e00, #a00);
 992         background-image:    -moz-linear-gradient(top, #e00, #a00);
 993         background-image:      -o-linear-gradient(top, #e00, #a00);
 994         background-image:   linear-gradient(to bottom, #e00, #a00);
 995         border-radius: 3px;
 996 }
 997
 998 .upload-errors .upload-error-message {
 999         display: block;
1000         padding-top: 8px;
1001         color: #b44;
1002         word-wrap: break-word;
1003 }
1004
1005 .uploader-window {
1006         position: fixed;
1007         top: 0;
1008         left: 0;
1009         right: 0;
1010         bottom: 0;
1011         background: rgba( 0, 86, 132, 0.9 );
1012
1013         z-index: 250000;
1014         display: none;
1015         text-align: center;
1016         opacity: 0;
1017
1018         -webkit-transition: opacity 250ms;
1019         -moz-transition:    opacity 250ms;
1020         -ms-transition:     opacity 250ms;
1021         -o-transition:      opacity 250ms;
1022         transition:         opacity 250ms;
1023 }
1024
1025 .uploader-window-content {
1026         position: absolute;
1027         top: 10px;
1028         left: 10px;
1029         right: 10px;
1030         bottom: 10px;
1031         border: 1px dashed #fff;
1032 }
1033
1034 .uploader-window h3 {
1035         position: absolute;
1036         top: 50%;
1037         left: 0;
1038         right: 0;
1039         -webkit-transform: translateY( -50% );
1040         -moz-transform:    translateY( -50% );
1041         -ms-transform:     translateY( -50% );
1042         -o-transform:      translateY( -50% );
1043         transform:         translateY( -50% );
1044
1045         font-size: 20px;
1046         font-weight: 200;
1047         color: #fff;
1048         padding: 0;
1049 }
1050
1051 .uploader-window .media-progress-bar {
1052         margin-top: 20px;
1053         max-width: 300px;
1054         background: transparent;
1055         border-color: #fff;
1056         display: none;
1057 }
1058
1059 .uploader-window .media-progress-bar div {
1060         background: #fff;
1061 }
1062
1063 .uploading .uploader-window .media-progress-bar {
1064         display: block;
1065 }
1066
1067 .media-frame .uploader-inline {
1068         margin: 20px;
1069         padding: 20px;
1070         text-align: center;
1071 }
1072
1073 .uploader-inline-content {
1074         position: absolute;
1075         top: 30%;
1076         left: 0;
1077         right: 0;
1078 }
1079
1080 .uploader-inline-content .upload-ui {
1081         margin: 4em 0;
1082 }
1083
1084 .uploader-inline-content .post-upload-ui {
1085         margin-bottom: 2em;
1086 }
1087
1088 .uploader-inline .has-upload-message .upload-ui {
1089         margin: 0 0 4em;
1090 }
1091
1092 .uploader-inline h3 {
1093         font-size: 20px;
1094         line-height: 28px;
1095         font-weight: 200;
1096         margin-bottom: 1.6em;
1097 }
1098
1099 .uploader-inline .has-upload-message .upload-instructions {
1100         font-size: 14px;
1101         color: #464646;
1102         font-weight: normal;
1103 }
1104
1105 .uploader-inline .drop-instructions {
1106         display: none;
1107 }
1108
1109 .supports-drag-drop .uploader-inline .drop-instructions {
1110         display: block;
1111 }
1112
1113 .uploader-inline p {
1114         font-size: 12px;
1115 }
1116
1117 .uploader-inline .media-progress-bar {
1118         display: none;
1119 }
1120
1121 .uploading.uploader-inline .media-progress-bar {
1122         display: block;
1123 }
1124
1125 .uploader-inline .browser {
1126         display: inline-block !important;
1127 }
1128
1129 /**
1130  * Selection
1131  */
1132 .media-selection {
1133         position: absolute;
1134         top: 0;
1135         left: 0;
1136         right: 350px;
1137         height: 60px;
1138         padding: 0 0 0 16px;
1139         overflow: hidden;
1140         white-space: nowrap;
1141 }
1142
1143 .media-selection .selection-info {
1144         display: inline-block;
1145         font-size: 12px;
1146         height: 60px;
1147         margin-right: 10px;
1148         vertical-align: top;
1149 }
1150
1151 .media-selection.empty,
1152 .media-selection.editing {
1153         display: none;
1154 }
1155
1156 .media-selection.one .edit-selection {
1157         display: none;
1158 }
1159
1160 .media-selection .count {
1161         display: block;
1162         padding-top: 12px;
1163         font-size: 14px;
1164         line-height: 20px;
1165         font-weight: bold;
1166 }
1167
1168 .media-selection .selection-info a {
1169         display: block;
1170         float: left;
1171         padding: 1px 8px;
1172         margin: 1px 8px 1px -8px;
1173         line-height: 16px;
1174         text-decoration: none;
1175         border-right: 1px solid #dfdfdf;
1176         color: #21759B;
1177 }
1178
1179 .media-selection .selection-info a:hover {
1180         background: #21759B;
1181         color: #fff;
1182         border-color: transparent;
1183 }
1184
1185 .media-selection .selection-info a:last-child {
1186         border-right: 0;
1187         margin-right: 0;
1188 }
1189
1190 .media-selection .selection-info .clear-selection {
1191         color: red;
1192 }
1193
1194 .media-selection .selection-info .clear-selection:hover {
1195         background: red;
1196 }
1197
1198 .media-selection .selection-view {
1199         display: inline-block;
1200         vertical-align: top;
1201 }
1202
1203 .media-selection .attachments {
1204         display: inline-block;
1205         height: 48px;
1206         margin-top: 5px;
1207         overflow: hidden;
1208         vertical-align: top;
1209 }
1210
1211 .media-selection .attachment .icon {
1212         width: 50%;
1213 }
1214
1215 .attachment.selection.selected {
1216         box-shadow: none;
1217 }
1218
1219 .attachment.selection.details {
1220         box-shadow:
1221                 0 0 0 1px #fff,
1222                 0 0 0 4px #1e8cbe;
1223 }
1224
1225 .media-selection .attachment.selection.details {
1226         box-shadow:
1227                 0 0 0 1px #fff,
1228                 0 0 0 3px #1e8cbe;
1229 }
1230
1231 .media-selection:after {
1232         content: '';
1233         display: block;
1234         position: absolute;
1235         top: 0;
1236         right: 0;
1237         bottom: 0;
1238         width: 25px;
1239         background-image: -webkit-gradient(linear, right top, left top, from( rgba( 255, 255, 255, 1 ) ), to( rgba( 255, 255, 255, 0 ) ));
1240         background-image: -webkit-linear-gradient(right, rgba( 255, 255, 255, 1 ) ,  rgba( 255, 255, 255, 0 ) );
1241         background-image:    -moz-linear-gradient(right, rgba( 255, 255, 255, 1 ) ,  rgba( 255, 255, 255, 0 ) );
1242         background-image:      -o-linear-gradient(right, rgba( 255, 255, 255, 1 ) ,  rgba( 255, 255, 255, 0 ) );
1243         background-image:   linear-gradient(to left, rgba( 255, 255, 255, 1 ) ,  rgba( 255, 255, 255, 0 ) );
1244 }
1245
1246 .media-selection .attachment .filename {
1247         display: none;
1248 }
1249
1250 /**
1251  * Spinner
1252  */
1253
1254 .media-frame .spinner {
1255         background: url(../images/wpspin.gif) no-repeat;
1256         background-size: 16px 16px;
1257         display: none;
1258         opacity: 0.7;
1259         filter: alpha(opacity=70);
1260         width: 16px;
1261         height: 16px;
1262         margin: 0;
1263 }
1264
1265 .media-sidebar .settings-save-status {
1266         background: #f5f5f5;
1267         float: right;
1268         text-transform: none;
1269         z-index: 10;
1270 }
1271
1272 .media-sidebar .settings-save-status .spinner {
1273         margin: 0 5px 0;
1274 }
1275
1276 .media-sidebar .settings-save-status .saved {
1277         float: right;
1278         display: none;
1279 }
1280
1281 .media-sidebar .save-waiting .settings-save-status .spinner,
1282 .media-sidebar .save-complete .settings-save-status .saved {
1283         display: block;
1284 }
1285
1286 /**
1287  * Attachment Details
1288  */
1289 .attachment-details {
1290         position: relative;
1291         overflow: auto;
1292 }
1293
1294 .attachment-info {
1295         overflow: hidden;
1296         min-height: 60px;
1297         margin-bottom: 16px;
1298         line-height: 18px;
1299         color: #999;
1300         border-bottom: 1px solid #e5e5e5;
1301         box-shadow: 0 1px 0 #fff;
1302         padding-bottom: 11px;
1303 }
1304
1305 .attachment-info .filename {
1306         font-weight: bold;
1307         color: #464646;
1308         word-wrap: break-word;
1309 }
1310
1311 .attachment-info .thumbnail {
1312         position: relative;
1313         float: left;
1314         max-width: 120px;
1315         max-height: 120px;
1316         margin-top: 5px;
1317         margin-right: 10px;
1318         margin-bottom: 5px;
1319 }
1320
1321 .uploading .attachment-info .thumbnail {
1322         width: 120px;
1323         height: 80px;
1324         box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 );
1325 }
1326
1327 .uploading .attachment-info .media-progress-bar {
1328         margin-top: 35px;
1329 }
1330
1331 .attachment-info .thumbnail:after {
1332         content: '';
1333         display: block;
1334         position: absolute;
1335         top: 0;
1336         left: 0;
1337         right: 0;
1338         bottom: 0;
1339         box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
1340         overflow: hidden;
1341 }
1342
1343 .attachment-info .thumbnail img {
1344         display: block;
1345         max-width: 120px;
1346         max-height: 120px;
1347         margin: 0 auto;
1348 }
1349
1350 .attachment-info .details {
1351         float: left;
1352         font-size: 12px;
1353         max-width: 100%;
1354 }
1355
1356 .attachment-info .edit-attachment,
1357 .attachment-info .refresh-attachment,
1358 .attachment-info .delete-attachment {
1359         display: block;
1360         text-decoration: none;
1361         white-space: nowrap;
1362 }
1363
1364 .attachment-info .refresh-attachment,
1365 .attachment-details.needs-refresh .attachment-info .edit-attachment {
1366         display: none;
1367 }
1368
1369 .attachment-details.needs-refresh .attachment-info .refresh-attachment,
1370 .attachment-info .edit-attachment {
1371         display: block;
1372 }
1373
1374 .attachment-info .delete-attachment {
1375         color: #bc0b0b;
1376 }
1377
1378 .attachment-info .delete-attachment:hover {
1379         color: red;
1380 }
1381
1382 /**
1383  * Attachment Display Settings
1384  */
1385 .attachment-display-settings {
1386         width: 100%;
1387         float: left;
1388         overflow: hidden;
1389 }
1390
1391 .attachment-display-settings h4 {
1392         margin: 1.4em 0 0.4em;
1393 }
1394
1395 .gallery-settings {
1396         overflow: hidden;
1397 }
1398
1399 /**
1400  * Embed from URL
1401  */
1402 .embed-url {
1403         display: block;
1404         position: relative;
1405         padding: 0 16px 7px;
1406         margin: 0;
1407         z-index: 250;
1408         background: #fff;
1409         border-bottom: 1px solid #dfdfdf;
1410         box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
1411         font-size: 18px;
1412         font-weight: 200;
1413 }
1414
1415 .media-frame .embed-url input {
1416         font-size: 18px;
1417         padding: 12px 14px;
1418         width: 100%;
1419         min-width: 200px;
1420         box-shadow: inset 2px 2px 4px -2px rgba( 0, 0, 0, 0.1 );
1421 }
1422
1423 .media-frame .embed-url .spinner {
1424         position: absolute;
1425         top: 16px;
1426         right: 26px;
1427 }
1428
1429 .media-frame .embed-loading .embed-url .spinner {
1430         display: block;
1431 }
1432
1433 .embed-link-settings,
1434 .embed-image-settings {
1435         position: absolute;
1436         background: #f5f5f5;
1437         top: 57px;
1438         left: 0;
1439         right: 0;
1440         bottom: 0;
1441         padding: 16px 16px 32px;
1442         overflow: auto;
1443 }
1444
1445 .media-embed .thumbnail {
1446         max-width: 100%;
1447         max-height: 200px;
1448         position: relative;
1449         float: left;
1450 }
1451
1452 .media-embed .thumbnail img {
1453         max-height: 200px;
1454         display: block;
1455 }
1456
1457 .media-embed .thumbnail:after {
1458         content: '';
1459         display: block;
1460         position: absolute;
1461         top: 0;
1462         left: 0;
1463         right: 0;
1464         bottom: 0;
1465         box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
1466         overflow: hidden;
1467 }
1468
1469 .media-embed .setting {
1470         width: 100%;
1471         margin-top: 10px;
1472         float: left;
1473         display: block;
1474         clear: both;
1475 }
1476
1477 .media-embed .setting span {
1478         display: block;
1479         width: 200px;
1480         font-size: 13px;
1481         line-height: 24px;
1482         color: #999;
1483         text-shadow: 0 1px 0 #fff;
1484 }
1485
1486 .media-embed .setting .button-group {
1487         margin: 2px 0;
1488 }
1489
1490 .media-embed .setting input,
1491 .media-embed .setting textarea {
1492         display: block;
1493         width: 100%;
1494         max-width: 400px;
1495         margin: 1px 0;
1496 }
1497
1498 /**
1499  * IE7 Fixes
1500  */
1501 .ie7 .media-frame .attachments-browser {
1502         position: static;
1503 }
1504
1505 .ie7 .media-frame .embed-url input {
1506         margin-top: 4px;
1507         width: 90%;
1508 }
1509
1510 .ie7 .compat-item {
1511         width: 99%;
1512 }
1513
1514 .ie7 .attachment-display-settings {
1515         width: auto;
1516 }
1517
1518 .ie7 .attachment-preview,
1519 .ie7 .attachment-preview .thumbnail {
1520         width: 120px;
1521         height: 120px;
1522 }
1523
1524 .ie7 .media-frame .attachment .describe {
1525         width: 102px;
1526 }
1527
1528 .ie7 .media-sidebar .setting select {
1529         max-width: 55%;
1530 }
1531
1532 .ie7 .media-sidebar .setting input,
1533 .ie7 .media-sidebar .setting textarea {
1534         width: 55%;
1535 }
1536
1537 .ie7 .media-sidebar .setting .link-to-custom {
1538         float: left;
1539 }
1540
1541 @media only screen and (max-width: 960px) {
1542         .media-frame-content .media-toolbar-primary .search,
1543         .media-frame-content .media-toolbar-secondary .attachment-filters {
1544                 max-width: 120px;
1545         }
1546 }
1547
1548 /**
1549  * Responsive layout
1550  */
1551 @media only screen and (max-width: 900px) {
1552         .media-frame-menu {
1553                 width: 139px;
1554         }
1555
1556         .media-menu > a {
1557                 padding: 4px 10px;
1558         }
1559
1560         .media-frame-title,
1561         .media-frame-router,
1562         .media-frame-content,
1563         .media-frame-toolbar {
1564                 left: 140px;
1565         }
1566
1567         .media-sidebar {
1568                 width: 159px;
1569                 padding: 0 10px 24px;
1570         }
1571
1572         .attachments-browser .attachments,
1573         .attachments-browser .uploader-inline,
1574         .attachments-browser .media-toolbar {
1575                 right: 180px;
1576         }
1577
1578         .media-sidebar .setting input,
1579         .media-sidebar .setting textarea,
1580         .media-sidebar .setting span,
1581         .compat-item label span {
1582                 float: none;
1583         }
1584
1585         .media-sidebar .setting span,
1586         .compat-item label span {
1587                 text-align: inherit;
1588                 display: block;
1589                 min-height: 16px;
1590                 margin: 0;
1591                 padding: 8px 2px 0;
1592         }
1593
1594         .media-sidebar .setting input,
1595         .media-sidebar .setting textarea,
1596         .media-sidebar .setting select {
1597                 width: 98%;
1598                 max-width: none;
1599         }
1600
1601         .media-sidebar .setting select.columns {
1602                 width: auto;
1603         }
1604
1605         .media-frame input,
1606         .media-frame textarea,
1607         .media-frame .search {
1608                 padding: 3px 6px;
1609         }
1610
1611         .media-frame-content .attachment .icon {
1612                 top: 40%;
1613         }
1614
1615         .media-selection {
1616                 min-width: 120px;
1617         }
1618
1619         .media-selection:after {
1620                 background: none;
1621         }
1622
1623         .media-selection .attachments {
1624                 display: none;
1625         }
1626
1627         .media-menu .separator {
1628                 margin: 12px 10px;
1629         }
1630 }
1631
1632 @media only screen and (max-width: 800px) {
1633         .media-frame-content .media-toolbar .instructions {
1634                 display: none;
1635         }
1636 }
1637
1638 @media only screen and (max-width: 680px) {
1639         .media-frame-content .media-toolbar .search,
1640         .media-frame-content .media-toolbar .attachment-filters {
1641                 max-width: 85px;
1642         }
1643 }
1644
1645 /* Use the same min-width as in the admin */
1646 @media only screen and (max-width: 600px) {
1647         .media-modal {
1648                 width: 540px;
1649                 position: absolute;
1650         }
1651
1652         .media-modal-backdrop {
1653                 width: 600px;
1654                 position: absolute;
1655         }
1656 }
1657
1658 /**
1659  * HiDPI Displays
1660  */
1661 @media print,
1662   (-o-min-device-pixel-ratio: 5/4),
1663   (-webkit-min-device-pixel-ratio: 1.25),
1664   (min-resolution: 120dpi) {
1665         .media-modal-icon {
1666                 background-image: url(../images/uploader-icons-2x.png);
1667                 background-size: 134px 15px;
1668         }
1669
1670         .media-frame .spinner {
1671                 background-image: url(../images/wpspin-2x.gif);
1672         }
1673 }