wp-admin/css/media.css

   1 /*------------------------------------------------------------------------------
   2   14.0 - Media Screen
   3 ------------------------------------------------------------------------------*/
   4
   5 .media-item .describe {
   6         border-collapse: collapse;
   7         width: 100%;
   8         border-top: 1px solid #dfdfdf;
   9         clear: both;
  10         cursor: default;
  11 }
  12
  13 .media-item.media-blank .describe {
  14         border: 0;
  15 }
  16
  17 .media-item .describe th {
  18         vertical-align: top;
  19         text-align: left;
  20         padding: 5px 10px 10px;
  21         width: 140px;
  22 }
  23
  24 .media-item .describe .align th {
  25         padding-top: 0;
  26 }
  27
  28 .media-item .media-item-info tr {
  29         background-color: transparent;
  30 }
  31
  32 .media-item .describe td {
  33         padding: 0 8px 8px 0;
  34         vertical-align: top;
  35 }
  36
  37 .media-item thead.media-item-info td {
  38         padding: 4px 10px 0;
  39 }
  40
  41 .media-item .media-item-info .A1B1 {
  42         padding: 0 0 0 10px;
  43 }
  44
  45 .media-item td.savesend {
  46         padding-bottom: 15px;
  47 }
  48
  49 .media-item .thumbnail {
  50         max-height: 128px;
  51         max-width: 128px;
  52 }
  53
  54 #wpbody-content #async-upload-wrap a {
  55         display: none;
  56 }
  57
  58 .media-upload-form {
  59         margin-top: 20px;
  60 }
  61
  62 .media-upload-form td label {
  63         margin-right: 6px;
  64         margin-left: 2px;
  65 }
  66
  67 .media-upload-form .align .field label {
  68         display: inline;
  69         padding: 0 0 0 23px;
  70         margin: 0 1em 0 3px;
  71         font-weight: 600;
  72 }
  73
  74 .media-upload-form tr.image-size label {
  75         margin: 0 0 0 5px;
  76         font-weight: 600;
  77 }
  78
  79 .media-upload-form th.label label {
  80         font-weight: 600;
  81         margin: 0.5em;
  82         font-size: 13px;
  83 }
  84
  85 .media-upload-form th.label label span {
  86         padding: 0 5px;
  87 }
  88
  89 .media-item .describe input[type="text"],
  90 .media-item .describe textarea {
  91         width: 460px;
  92 }
  93
  94 .media-item .describe p.help {
  95         margin: 0;
  96         padding: 0 0 0 5px;
  97 }
  98
  99 .media-item .edit-attachment,
 100 .describe-toggle-on,
 101 .describe-toggle-off {
 102         display: block;
 103         line-height: 36px;
 104         float: right;
 105         margin-right: 10px;
 106 }
 107
 108 .media-item .describe-toggle-off,
 109 .media-item.open .describe-toggle-on {
 110         display: none;
 111 }
 112
 113 .media-item.open .describe-toggle-off {
 114         display: block;
 115 }
 116
 117 .media-upload-form .media-item {
 118         min-height: 36px;
 119         margin-bottom: 1px;
 120         position: relative;
 121         width: 100%;
 122         background: #fff;
 123 }
 124
 125 .media-upload-form .media-item,
 126 .media-upload-form .media-item .error {
 127         -webkit-box-shadow: 0 1px 0 #dfdfdf;
 128         box-shadow: 0 1px 0 #dfdfdf;
 129 }
 130
 131 #media-items:empty {
 132         border: 0 none;
 133 }
 134
 135 .media-item .filename {
 136         line-height: 36px;
 137         overflow: hidden;
 138         margin-left: 6px;
 139 }
 140
 141 .media-item .pinkynail {
 142         float: left;
 143         margin: 2px 10px 0 3px;
 144         max-width: 40px;
 145         max-height: 32px;
 146 }
 147
 148 .media-item .startopen,
 149 .media-item .startclosed {
 150         display: none;
 151 }
 152
 153 .media-item .original {
 154         position: relative;
 155         height: 34px;
 156 }
 157
 158 .media-item .progress {
 159         float: right;
 160         height: 22px;
 161         margin: 7px 6px;
 162         width: 200px;
 163         line-height: 2em;
 164         padding: 0;
 165         overflow: hidden;
 166         -webkit-border-radius: 22px;
 167         border-radius: 22px;
 168         background: #ddd;
 169         -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
 170         box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
 171 }
 172
 173 .media-item .bar {
 174         z-index: 9;
 175         width: 0;
 176         height: 100%;
 177         margin-top: -22px;
 178         -webkit-border-radius: 22px;
 179         border-radius: 22px;
 180         background-color: #0073aa;
 181         -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
 182         box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
 183 }
 184
 185 .media-item .progress .percent {
 186         z-index: 10;
 187         position: relative;
 188         width: 200px;
 189         padding: 0;
 190         color: #fff;
 191         text-align: center;
 192         line-height: 22px;
 193         font-weight: 400;
 194         text-shadow: 0 1px 2px rgba(0,0,0,0.2);
 195 }
 196
 197 .upload-php .fixed .column-parent {
 198         width: 15%;
 199 }
 200
 201 .js .html-uploader #plupload-upload-ui {
 202         display: none;
 203 }
 204
 205 .js .html-uploader #html-upload-ui {
 206         display: block;
 207 }
 208
 209 .media-upload-form .media-item.error,
 210 .media-upload-form .media-item .error {
 211         width: auto;
 212         margin: 0 0 1px 0;
 213 }
 214
 215 .media-upload-form .media-item .error {
 216         padding: 10px 0 10px 14px;
 217 }
 218
 219 .media-item .error-div a.dismiss {
 220         display: block;
 221         float: right;
 222         margin: 0 10px 0 15px;
 223 }
 224
 225 /*------------------------------------------------------------------------------
 226   14.1 - Media Library
 227 ------------------------------------------------------------------------------*/
 228
 229 .find-box {
 230         background-color: #fff;
 231         -webkit-box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 );
 232         box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 );
 233         width: 600px;
 234         overflow: hidden;
 235         margin-left: -300px;
 236         position: fixed;
 237         top: 30px;
 238         bottom: 30px;
 239         left: 50%;
 240         z-index: 100105;
 241 }
 242
 243 .find-box-head {
 244         background: #fcfcfc;
 245         border-bottom: 1px solid #dfdfdf;
 246         height: 36px;
 247         font-size: 18px;
 248         font-weight: 600;
 249         line-height: 36px;
 250         padding: 0 36px 0 16px;
 251         position: absolute;
 252         top: 0;
 253         left: 0;
 254         right: 0;
 255 }
 256
 257 .find-box-inside {
 258         overflow: auto;
 259         padding: 16px;
 260         background-color: #fff;
 261         position: absolute;
 262         top: 37px;
 263         bottom: 45px;
 264         overflow-y: scroll;
 265         width: 100%;
 266         -webkit-box-sizing: border-box;
 267         -moz-box-sizing: border-box;
 268         box-sizing: border-box;
 269 }
 270
 271 .find-box-search {
 272         padding-bottom: 16px;
 273 }
 274
 275 .find-box-search .spinner {
 276         float: none;
 277         left: 105px;
 278         position: absolute;
 279 }
 280
 281 .find-box-search,
 282 #find-posts-response {
 283         position: relative; /* RTL fix, #WP28010 */
 284 }
 285
 286 #find-posts-input,
 287 #find-posts-search {
 288         float: left;
 289 }
 290
 291 #find-posts-input {
 292         width: 140px;
 293         height: 28px;
 294         margin: 0 4px 0 0;
 295 }
 296
 297 .widefat .found-radio {
 298         padding-right: 0;
 299         width: 16px;
 300 }
 301
 302 #find-posts-close {
 303         width: 36px;
 304         height: 36px;
 305         position: absolute;
 306         top: 0;
 307         right: 0;
 308         cursor: pointer;
 309         text-align: center;
 310         color: #666;
 311 }
 312
 313 #find-posts-close:hover {
 314         color: #00a0d2;
 315 }
 316
 317 #find-posts-close:before {
 318         font: normal 20px/36px 'dashicons';
 319         vertical-align: top;
 320         speak: none;
 321         -webkit-font-smoothing: antialiased;
 322         -moz-osx-font-smoothing: grayscale;
 323         content: '\f158';
 324 }
 325
 326 .find-box-buttons {
 327         padding: 8px 16px;
 328         background: #fcfcfc;
 329         border-top: 1px solid #dfdfdf;
 330         position: absolute;
 331         bottom: 0;
 332         left: 0;
 333         right: 0;
 334 }
 335
 336 @media screen and ( max-width: 782px ) {
 337         .find-box-inside {
 338                 bottom: 57px;
 339         }
 340 }
 341
 342 @media screen and ( max-width: 660px ) {
 343
 344         .find-box {
 345                 top: 0;
 346                 bottom: 0;
 347                 left: 0;
 348                 right: 0;
 349                 margin: 0;
 350                 width: 100%;
 351         }
 352
 353 }
 354
 355 .ui-find-overlay {
 356         position: fixed;
 357         top: 0;
 358         left: 0;
 359         right: 0;
 360         bottom: 0;
 361         background: #000;
 362         opacity: 0.7;
 363         filter: alpha(opacity=70);
 364         z-index: 100100;
 365 }
 366
 367 ul#dismissed-updates {
 368         display: none;
 369 }
 370
 371 form.upgrade {
 372         margin-top: 8px;
 373 }
 374
 375 form.upgrade .hint {
 376         font-style: italic;
 377         font-size: 85%;
 378         margin: -0.5em 0 2em 0;
 379 }
 380
 381 #poststuff .inside .the-tagcloud {
 382         margin: 5px 0 10px;
 383         padding: 8px;
 384         border: 1px solid #ddd;
 385         line-height: 1.8em;
 386         word-spacing: 3px;
 387         -webkit-border-radius: 6px;
 388         border-radius: 6px;
 389 }
 390
 391 .drag-drop #drag-drop-area {
 392         border: 4px dashed #b4b9be;
 393         height: 200px;
 394 }
 395
 396 .drag-drop .drag-drop-inside {
 397         margin: 70px auto 0;
 398         width: 250px;
 399 }
 400
 401 .drag-drop-inside p {
 402         color: #a0a5aa;
 403         font-size: 14px;
 404         margin: 5px 0;
 405         display: none;
 406 }
 407
 408 .drag-drop .drag-drop-inside p {
 409         text-align: center;
 410 }
 411
 412 .drag-drop-inside p.drag-drop-info {
 413         font-size: 20px;
 414 }
 415
 416 .drag-drop .drag-drop-inside p,
 417 .drag-drop-inside p.drag-drop-buttons {
 418         display: block;
 419 }
 420
 421 /*
 422 #drag-drop-area:-moz-drag-over {
 423         border-color: #83b4d8;
 424 }
 425 border color while dragging a file over the uploader drop area */
 426 .drag-drop.drag-over #drag-drop-area {
 427         border-color: #83b4d8;
 428 }
 429
 430 #plupload-upload-ui {
 431         position: relative;
 432 }
 433
 434 /**
 435  * Media Library grid view
 436  */
 437
 438 .media-frame.mode-grid,
 439 .media-frame.mode-grid .media-frame-content,
 440 .media-frame.mode-grid .attachments-browser .attachments,
 441 .media-frame.mode-grid .uploader-inline-content {
 442         position: static;
 443 }
 444
 445 /* Regions we don't use at all */
 446 .media-frame.mode-grid .media-frame-title,
 447 .media-frame.mode-grid .media-frame-router,
 448 .media-frame.mode-grid .media-frame-menu {
 449         display: none;
 450 }
 451
 452 .media-frame.mode-grid .media-frame-content {
 453         background-color: transparent;
 454         border: none;
 455 }
 456
 457 .upload-php .mode-grid .media-sidebar {
 458         position: relative;
 459         width: auto;
 460         margin-bottom: 16px;
 461         padding: 0 16px;
 462         border-left: 4px solid #dd3d36;
 463         -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
 464         box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
 465         background-color: #fff;
 466 }
 467
 468 .upload-php .mode-grid .hide-sidebar .media-sidebar {
 469         display: none;
 470 }
 471
 472 .upload-php .mode-grid .media-sidebar .media-uploader-status {
 473         border-bottom: none;
 474         padding-bottom: 0;
 475         max-width: 100%;
 476 }
 477
 478 .upload-php .mode-grid .media-sidebar .upload-error {
 479         margin: 12px 0;
 480         padding: 4px 0 0;
 481         border: none;
 482         -webkit-box-shadow: none;
 483         box-shadow: none;
 484         background: none;
 485 }
 486
 487 .upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors {
 488         top: -10px;
 489         right: -14px;
 490         padding: 10px;
 491 }
 492
 493 .upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:before {
 494         content: "\f153";
 495         display: block;
 496         font: normal 16px/1 dashicons;
 497         color: #bbb;
 498 }
 499
 500 .upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:focus:before,
 501 .upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:hover:before {
 502         color: #c00;
 503 }
 504
 505 .upload-php .mode-grid .media-sidebar .media-uploader-status.errors h3 {
 506         display: none;
 507 }
 508
 509 .media-frame.mode-grid .uploader-inline {
 510         position: relative;
 511         top: auto;
 512         right: auto;
 513         left: auto;
 514         bottom: auto;
 515         padding-top: 0;
 516         margin-top: 0;
 517         border: 4px dashed #b4b9be;
 518 }
 519
 520 .media-frame.mode-select .attachments-browser.fixed .attachments {
 521         position: relative;
 522         top: 94px; /* prevent jumping up when the toolbar becomes fixed */
 523         padding-bottom: 94px; /* offset for above so the bottom doesn't get cut off */
 524 }
 525
 526 .media-frame.mode-grid .attachment:focus,
 527 .media-frame.mode-grid .selected.attachment:focus,
 528 .media-frame.mode-grid .attachment.details:focus {
 529         -webkit-box-shadow:
 530                 inset 0 0 2px 3px #f1f1f1,
 531                 inset 0 0 0 7px #5b9dd9;
 532         box-shadow:
 533                 inset 0 0 2px 3px #f1f1f1,
 534                 inset 0 0 0 7px #5b9dd9;
 535         outline: none;
 536 }
 537
 538 .media-frame.mode-grid .selected.attachment {
 539         -webkit-box-shadow:
 540                 inset 0 0 0 5px #f1f1f1,
 541                 inset 0 0 0 7px #ccc;
 542         box-shadow:
 543                 inset 0 0 0 5px #f1f1f1,
 544                 inset 0 0 0 7px #ccc;
 545 }
 546
 547 .media-frame.mode-grid .attachment.details {
 548         -webkit-box-shadow:
 549                 inset 0 0 0 3px #f1f1f1,
 550                 inset 0 0 0 7px #1e8cbe;
 551         box-shadow:
 552                 inset 0 0 0 3px #f1f1f1,
 553                 inset 0 0 0 7px #1e8cbe;
 554 }
 555
 556 .media-frame.mode-grid.mode-select .attachment .thumbnail {
 557         opacity: 0.65;
 558 }
 559
 560 .media-frame.mode-select .attachment.selected .thumbnail {
 561         opacity: 1;
 562 }
 563
 564 .media-frame.mode-grid .media-toolbar {
 565         margin-bottom: 15px;
 566         height: auto;
 567 }
 568
 569 .media-frame.mode-grid .media-toolbar select {
 570         margin: 0 10px 0 0;
 571         font-size: 14px;
 572 }
 573
 574 .media-frame.mode-grid.mode-edit .media-toolbar-secondary > .select-mode-toggle-button {
 575         margin: 0 8px 0 0;
 576         vertical-align: middle;
 577 }
 578
 579 .media-frame.mode-grid .attachments-browser .bulk-select {
 580         display: inline-block;
 581         margin: 0 10px 0 0;
 582 }
 583
 584 .media-frame.mode-grid .search {
 585         margin-top: 0;
 586 }
 587
 588 .media-frame.mode-grid .spinner {
 589         margin-top: 16px;
 590 }
 591
 592 .attachments-browser .media-toolbar-secondary > .media-button {
 593         margin-right: 10px;
 594 }
 595
 596 .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
 597         position: fixed;
 598         top: 32px;
 599         left: auto;
 600         right: 20px;
 601         margin-top: 0;
 602 }
 603
 604 .media-frame.mode-grid .attachments-browser {
 605         padding: 0;
 606 }
 607
 608 .media-frame.mode-grid .attachments-browser .attachments {
 609         padding: 2px;
 610 }
 611
 612 .media-frame.mode-grid .attachments-browser .no-media {
 613         color: #999;
 614         font-size: 18px;
 615         font-style: normal;
 616         margin: 0;
 617         padding: 100px 0 0;
 618         text-align: center;
 619 }
 620
 621 /**
 622  * Attachment details modal
 623  */
 624
 625 .edit-attachment-frame {
 626         display: block;
 627         height: 100%;
 628         width: 100%;
 629 }
 630
 631 .edit-attachment-frame .edit-media-header {
 632         overflow: hidden;
 633 }
 634
 635 .upload-php .media-modal-close .media-modal-icon:before {
 636         content: '\f335';
 637         font-size: 22px;
 638 }
 639
 640 .upload-php .media-modal-close,
 641 .edit-attachment-frame .edit-media-header .left,
 642 .edit-attachment-frame .edit-media-header .right {
 643         cursor: pointer;
 644         color: #777;
 645         background-color: transparent;
 646         height: 50px;
 647         width: 50px;
 648         padding: 0;
 649         position: absolute;
 650         text-align: center;
 651         border: 0;
 652         border-left: 1px solid #ddd;
 653         -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
 654     transition: color .1s ease-in-out, background .1s ease-in-out;
 655 }
 656
 657 .upload-php .media-modal-close {
 658         top: 0;
 659         right: 0;
 660 }
 661
 662 .edit-attachment-frame .edit-media-header .left {
 663         right: 102px;
 664 }
 665
 666 .edit-attachment-frame .edit-media-header .right {
 667         right: 51px;
 668 }
 669
 670 .edit-attachment-frame .media-frame-title {
 671         left: 0;
 672         right: 150px; /* leave space for prev/next/close */
 673 }
 674
 675 .edit-attachment-frame .edit-media-header .right:before,
 676 .edit-attachment-frame .edit-media-header .left:before {
 677         font: normal 20px/50px 'dashicons' !important;
 678         display: inline;
 679         font-weight: 300;
 680 }
 681
 682 .upload-php .media-modal-close:hover,
 683 .upload-php .media-modal-close:focus,
 684 .edit-attachment-frame .edit-media-header .left:hover,
 685 .edit-attachment-frame .edit-media-header .right:hover,
 686 .edit-attachment-frame .edit-media-header .left:focus,
 687 .edit-attachment-frame .edit-media-header .right:focus {
 688         background: #ddd;
 689         border-color: #ccc;
 690         color: #000;
 691         outline: none;
 692         -webkit-box-shadow: none;
 693         box-shadow: none;
 694 }
 695
 696 .upload-php .media-modal-close:focus .media-modal-icon:before,
 697 .upload-php .media-modal-close:hover .media-modal-icon:before {
 698         color: #000;
 699 }
 700
 701 .edit-attachment-frame .edit-media-header .left:before,
 702 .rtl .edit-attachment-frame .edit-media-header .right:before {
 703         content: '\f341';
 704 }
 705
 706 .edit-attachment-frame .edit-media-header .right:before,
 707 .rtl .edit-attachment-frame .edit-media-header .left:before {
 708         content: '\f345';
 709 }
 710
 711 .edit-attachment-frame .edit-media-header .left.disabled,
 712 .edit-attachment-frame .edit-media-header .right.disabled,
 713 .edit-attachment-frame .edit-media-header .left.disabled:hover,
 714 .edit-attachment-frame .edit-media-header .right.disabled:hover {
 715         color: #ccc;
 716         background: inherit;
 717         cursor: default;
 718         pointer-events: none;
 719 }
 720
 721 .edit-attachment-frame .media-frame-content,
 722 .edit-attachment-frame .media-frame-router {
 723         left: 0;
 724 }
 725
 726 .edit-attachment-frame .media-frame-content {
 727         border-bottom: none;
 728         bottom: 0;
 729         top: 50px;
 730 }
 731
 732 .edit-attachment-frame .attachment-details {
 733         position: absolute;
 734         overflow: auto;
 735         top: 0;
 736         bottom: 0;
 737         right: 0;
 738         left: 0;
 739         -webkit-box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
 740         box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
 741 }
 742
 743 .edit-attachment-frame .attachment-media-view {
 744         float: left;
 745         width: 65%;
 746         height: 100%;
 747 }
 748
 749 .edit-attachment-frame .attachment-media-view .thumbnail {
 750         -webkit-box-sizing: border-box;
 751         -moz-box-sizing: border-box;
 752         box-sizing: border-box;
 753         padding: 16px;
 754         height: 100%;
 755 }
 756
 757 .edit-attachment-frame .attachment-media-view .details-image {
 758         display: block;
 759         margin-bottom: 16px;
 760         max-width: 100%;
 761         max-height: 90%;
 762         max-height: -webkit-calc( 100% - 42px );
 763         max-height: calc( 100% - 42px ); /* leave space for actions underneath */
 764 }
 765
 766 .edit-attachment-frame .wp-media-wrapper {
 767         margin-bottom: 12px;
 768 }
 769
 770 .edit-attachment-frame input,
 771 .edit-attachment-frame textarea {
 772         padding: 6px 8px;
 773         line-height: 16px;
 774 }
 775
 776 .edit-attachment-frame .attachment-info {
 777         overflow: auto;
 778         -webkit-box-sizing: border-box;
 779         -moz-box-sizing: border-box;
 780         box-sizing: border-box;
 781         margin-bottom: 0;
 782         padding: 12px 16px 0;
 783         width: 35%;
 784         height: 100%;
 785         -webkit-box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
 786         box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
 787         border-bottom: 0;
 788         border-left: 1px solid #ddd;
 789         background: #f3f3f3;
 790 }
 791
 792 .edit-attachment-frame .attachment-info .details,
 793 .edit-attachment-frame .attachment-info .settings {
 794         position: relative; /* RTL fix, #WP29352 */
 795         overflow: hidden;
 796         float: none;
 797         margin-bottom: 15px;
 798         padding-bottom: 15px;
 799         border-bottom: 1px solid #ddd;
 800 }
 801
 802 .edit-attachment-frame .attachment-info .filename {
 803         font-weight: normal;
 804         color: #666;
 805 }
 806
 807 .edit-attachment-frame .attachment-info .thumbnail {
 808         margin-bottom: 12px;
 809 }
 810
 811 .attachment-info .actions {
 812         margin-bottom: 16px;
 813 }
 814
 815 .attachment-info .actions a {
 816         display: inline;
 817         text-decoration: none;
 818 }
 819
 820
 821 /*------------------------------------------------------------------------------
 822   14.2 - Image Editor
 823 ------------------------------------------------------------------------------*/
 824
 825 .wp_attachment_details label[for="content"] {
 826         font-size: 13px;
 827         line-height: 1.5;
 828         margin: 1em 0;
 829 }
 830
 831 .wp_attachment_details #attachment_caption {
 832         height: 4em;
 833 }
 834
 835 .describe .image-editor {
 836         vertical-align: top;
 837 }
 838
 839 .imgedit-wrap {
 840         position: relative;
 841 }
 842
 843 .imgedit-settings p {
 844         margin: 8px 0 0;
 845 }
 846
 847 .describe .imgedit-wrap .imgedit-settings {
 848         padding: 0 5px;
 849 }
 850
 851 .wp_attachment_holder div.updated {
 852         margin-top: 0;
 853 }
 854
 855 .wp_attachment_holder .imgedit-wrap > div {
 856         height: auto;
 857         overflow: hidden;
 858 }
 859
 860 .wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
 861         padding-right: 16px;
 862         width: auto;
 863         overflow: hidden;
 864 }
 865
 866 .wp_attachment_holder .imgedit-wrap .imgedit-settings {
 867         float: right;
 868         width: 250px;
 869 }
 870
 871 .imgedit-settings input {
 872         margin-top: 0;
 873         vertical-align: middle;
 874 }
 875
 876 .imgedit-wait {
 877         position: absolute;
 878         top: 0;
 879         background: #fff url(../images/spinner.gif) no-repeat center;
 880         -webkit-background-size: 20px 20px;
 881         background-size: 20px 20px;
 882         opacity: 0.7;
 883         filter: alpha(opacity=70);
 884         width: 100%;
 885         height: 500px;
 886         display: none;
 887 }
 888
 889 .no-float {
 890         float: none;
 891 }
 892
 893 .media-disabled,
 894 .imgedit-settings .disabled {
 895         color: grey;
 896 }
 897
 898 .wp_attachment_image,
 899 .A1B1 {
 900         overflow: hidden;
 901 }
 902
 903 .wp_attachment_image .button,
 904 .A1B1 .button {
 905         float: left;
 906 }
 907
 908 .no-js .wp_attachment_image .button {
 909         display: none;
 910 }
 911
 912 .wp_attachment_image .spinner,
 913 .A1B1 .spinner {
 914         float: left;
 915 }
 916
 917 .imgedit-menu {
 918         margin: 0 0 12px;
 919         min-width: 300px;
 920 }
 921
 922 .imgedit-menu div {
 923         float: left;
 924         width: 32px;
 925         border: 1px solid #d5d5d5;
 926         background: #f1f1f1;
 927         margin: 0 8px 0 0;
 928         height: 32px;
 929         -webkit-font-smoothing: antialiased;
 930         -moz-osx-font-smoothing: grayscale;
 931         text-align: center;
 932         line-height: 28px;
 933         color: #777;
 934         cursor: pointer;
 935 }
 936
 937 .imgedit-menu div:before {
 938         font: normal 20px/1 'dashicons';
 939         speak: none;
 940         vertical-align: middle;
 941 }
 942
 943 .imgedit-menu div:hover {
 944         border-color: #c1c1c1;
 945         background-color: #eaeaea;
 946         color: #32373c;
 947 }
 948
 949 .imgedit-menu div.disabled {
 950         border-color: #ccc;
 951         background-color: #ddd;
 952         color: #777;
 953         filter: alpha(opacity=50);
 954         opacity: 0.5;
 955         cursor: default;
 956 }
 957
 958 .imgedit-crop:before {
 959         content:'\f165';
 960 }
 961
 962 .imgedit-rleft:before {
 963         content:'\f166';
 964 }
 965
 966 .imgedit-rright:before {
 967         content:'\f167';
 968 }
 969
 970 .imgedit-flipv:before {
 971         content:'\f168';
 972 }
 973
 974 .imgedit-fliph:before {
 975         content:'\f169';
 976 }
 977
 978 .imgedit-undo:before {
 979         content:'\f171';
 980 }
 981
 982 .imgedit-redo:before {
 983         content:'\f172';
 984 }
 985
 986 .imgedit-crop-wrap {
 987         position: relative;
 988 }
 989
 990 .imgedit-crop {
 991         margin: 0 8px 0 0;
 992 }
 993
 994 .imgedit-rleft {
 995         margin: 0 3px;
 996 }
 997
 998 .imgedit-rright {
 999         margin: 0 8px 0 3px;
1000 }
1001
1002 .imgedit-flipv {
1003         margin: 0 3px;
1004 }
1005
1006 .imgedit-fliph {
1007         margin: 0 8px 0 3px;
1008 }
1009
1010 .imgedit-undo {
1011         margin: 0 3px;
1012 }
1013
1014 .imgedit-redo {
1015         margin: 0 8px 0 3px;
1016 }
1017
1018 .imgedit-applyto img {
1019         margin: 0 8px 0 0;
1020 }
1021
1022 #poststuff .imgedit-group-top h3 {
1023         padding: 0;
1024 }
1025
1026 .imgedit-group-top h3 a {
1027         text-decoration: none;
1028 }
1029
1030 .imgedit-applyto .imgedit-label {
1031         padding: 2px 0 0;
1032         display: block;
1033 }
1034
1035 .imgedit-help {
1036         display: none;
1037         font-style: italic;
1038 }
1039
1040 a.imgedit-help-toggle {
1041         text-decoration: none;
1042 }
1043
1044 .form-table td.imgedit-response {
1045         padding: 0;
1046 }
1047
1048 .imgedit-submit {
1049         margin: 8px 0 0;
1050 }
1051
1052 .imgedit-submit-btn {
1053         margin-left: 20px;
1054 }
1055
1056 .imgedit-wrap .nowrap {
1057         white-space: nowrap;
1058 }
1059
1060 span.imgedit-scale-warn {
1061         color: red;
1062         font-size: 20px;
1063         font-style: normal;
1064         visibility: hidden;
1065         vertical-align: middle;
1066 }
1067
1068 .imgedit-group {
1069         margin-bottom: 8px;
1070         padding: 10px;
1071 }
1072
1073 audio, video {
1074         display: inline-block;
1075         max-width: 100%;
1076 }
1077
1078 .mejs-container {
1079         width: 100%;
1080         max-width: 100%;
1081 }
1082
1083 /* =Media Queries
1084 -------------------------------------------------------------- */
1085
1086 /**
1087  * HiDPI Displays
1088  */
1089 @media print,
1090   (-webkit-min-device-pixel-ratio: 1.25),
1091   (min-resolution: 120dpi) {
1092         .imgedit-wait {
1093                 background-image: url(../images/spinner-2x.gif);
1094         }
1095 }
1096
1097 @media screen and ( max-width: 782px ) {
1098         .wp_attachment_details label[for="content"] {
1099                 font-size: 14px;
1100                 line-height: 1.5em;
1101         }
1102
1103         .media-upload-form .media-item.error,
1104         .media-upload-form .media-item .error {
1105                 font-size: 13px;
1106                 line-height: 1.5;
1107         }
1108
1109         .media-upload-form .media-item.error {
1110                 padding: 1px 10px;
1111         }
1112
1113         .media-upload-form .media-item .error {
1114                 padding: 10px 0 10px 12px;
1115         }
1116 }
1117
1118 /**
1119  * Media queries for media grid.
1120  */
1121
1122 @media only screen and (max-width: 1120px) {
1123         /* override for media-views.css */
1124         #wp-media-grid .wp-filter .attachment-filters {
1125                 max-width: 100%;
1126         }
1127 }
1128
1129 @media only screen and ( max-width: 782px ) {
1130         .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
1131                 top: 46px;
1132                 right: 10px;
1133         }
1134 }
1135
1136 @media only screen and (max-width: 600px) {
1137         .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
1138                 top: 0;
1139         }
1140 }
1141
1142 @media only screen and (max-width: 480px) {
1143         .edit-attachment-frame .media-frame-title {
1144                 right: 110px;
1145         }
1146
1147         .upload-php .media-modal-close,
1148         .edit-attachment-frame .edit-media-header .left,
1149         .edit-attachment-frame .edit-media-header .right {
1150                 width: 40px;
1151                 height: 40px;
1152         }
1153
1154         .upload-php .media-modal-close .media-modal-icon {
1155                 margin: 9px 10px;
1156         }
1157
1158         .edit-attachment-frame .edit-media-header .right:before,
1159         .edit-attachment-frame .edit-media-header .left:before {
1160                 line-height: 40px !important;
1161         }
1162
1163         .edit-attachment-frame .edit-media-header .left {
1164                 right: 82px;
1165         }
1166
1167         .edit-attachment-frame .edit-media-header .right {
1168                 right: 41px;
1169         }
1170
1171         .edit-attachment-frame .media-frame-content {
1172                 top: 40px;
1173         }
1174
1175         .edit-attachment-frame .attachment-media-view {
1176                 float: none;
1177                 height: auto;
1178                 width: 100%;
1179         }
1180
1181         .edit-attachment-frame .attachment-info {
1182                 height: auto;
1183                 width: 100%;
1184         }
1185 }
1186
1187 @media only screen and (max-width: 640px), screen and (max-height: 400px) {
1188         .upload-php .mode-grid .media-sidebar{
1189                 max-width: 100%;
1190         }
1191 }