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 }
 388
 389 .drag-drop #drag-drop-area {
 390         border: 4px dashed #b4b9be;
 391         height: 200px;
 392 }
 393
 394 .drag-drop .drag-drop-inside {
 395         margin: 70px auto 0;
 396         width: 250px;
 397 }
 398
 399 .drag-drop-inside p {
 400         color: #a0a5aa;
 401         font-size: 14px;
 402         margin: 5px 0;
 403         display: none;
 404 }
 405
 406 .drag-drop .drag-drop-inside p {
 407         text-align: center;
 408 }
 409
 410 .drag-drop-inside p.drag-drop-info {
 411         font-size: 20px;
 412 }
 413
 414 .drag-drop .drag-drop-inside p,
 415 .drag-drop-inside p.drag-drop-buttons {
 416         display: block;
 417 }
 418
 419 /*
 420 #drag-drop-area:-moz-drag-over {
 421         border-color: #83b4d8;
 422 }
 423 border color while dragging a file over the uploader drop area */
 424 .drag-drop.drag-over #drag-drop-area {
 425         border-color: #83b4d8;
 426 }
 427
 428 #plupload-upload-ui {
 429         position: relative;
 430 }
 431
 432 /**
 433  * Media Library grid view
 434  */
 435
 436 .media-frame.mode-grid,
 437 .media-frame.mode-grid .media-frame-content,
 438 .media-frame.mode-grid .attachments-browser .attachments,
 439 .media-frame.mode-grid .uploader-inline-content {
 440         position: static;
 441 }
 442
 443 /* Regions we don't use at all */
 444 .media-frame.mode-grid .media-frame-title,
 445 .media-frame.mode-grid .media-frame-router,
 446 .media-frame.mode-grid .media-frame-menu {
 447         display: none;
 448 }
 449
 450 .media-frame.mode-grid .media-frame-content {
 451         background-color: transparent;
 452         border: none;
 453 }
 454
 455 .upload-php .mode-grid .media-sidebar {
 456         position: relative;
 457         width: auto;
 458         margin-bottom: 16px;
 459         padding: 0 16px;
 460         border-left: 4px solid #dd3d36;
 461         -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
 462         box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
 463         background-color: #fff;
 464 }
 465
 466 .upload-php .mode-grid .hide-sidebar .media-sidebar {
 467         display: none;
 468 }
 469
 470 .upload-php .mode-grid .media-sidebar .media-uploader-status {
 471         border-bottom: none;
 472         padding-bottom: 0;
 473         max-width: 100%;
 474 }
 475
 476 .upload-php .mode-grid .media-sidebar .upload-error {
 477         margin: 12px 0;
 478         padding: 4px 0 0;
 479         border: none;
 480         -webkit-box-shadow: none;
 481         box-shadow: none;
 482         background: none;
 483 }
 484
 485 .upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors {
 486         top: -10px;
 487         right: -14px;
 488         padding: 10px;
 489 }
 490
 491 .upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:before {
 492         content: "\f153";
 493         display: block;
 494         font: normal 16px/1 dashicons;
 495         color: #bbb;
 496 }
 497
 498 .upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:focus:before,
 499 .upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:hover:before {
 500         color: #c00;
 501 }
 502
 503 .upload-php .mode-grid .media-sidebar .media-uploader-status.errors h3, /* Back-compat for pre-4.4 */
 504 .upload-php .mode-grid .media-sidebar .media-uploader-status.errors h2 {
 505         display: none;
 506 }
 507
 508 .media-frame.mode-grid .uploader-inline {
 509         position: relative;
 510         top: auto;
 511         right: auto;
 512         left: auto;
 513         bottom: auto;
 514         padding-top: 0;
 515         margin-top: 0;
 516         border: 4px dashed #b4b9be;
 517 }
 518
 519 .media-frame.mode-select .attachments-browser.fixed .attachments {
 520         position: relative;
 521         top: 94px; /* prevent jumping up when the toolbar becomes fixed */
 522         padding-bottom: 94px; /* offset for above so the bottom doesn't get cut off */
 523 }
 524
 525 .media-frame.mode-grid .attachment:focus,
 526 .media-frame.mode-grid .selected.attachment:focus,
 527 .media-frame.mode-grid .attachment.details:focus {
 528         -webkit-box-shadow:
 529                 inset 0 0 2px 3px #f1f1f1,
 530                 inset 0 0 0 7px #5b9dd9;
 531         box-shadow:
 532                 inset 0 0 2px 3px #f1f1f1,
 533                 inset 0 0 0 7px #5b9dd9;
 534         outline: none;
 535 }
 536
 537 .media-frame.mode-grid .selected.attachment {
 538         -webkit-box-shadow:
 539                 inset 0 0 0 5px #f1f1f1,
 540                 inset 0 0 0 7px #ccc;
 541         box-shadow:
 542                 inset 0 0 0 5px #f1f1f1,
 543                 inset 0 0 0 7px #ccc;
 544 }
 545
 546 .media-frame.mode-grid .attachment.details {
 547         -webkit-box-shadow:
 548                 inset 0 0 0 3px #f1f1f1,
 549                 inset 0 0 0 7px #1e8cbe;
 550         box-shadow:
 551                 inset 0 0 0 3px #f1f1f1,
 552                 inset 0 0 0 7px #1e8cbe;
 553 }
 554
 555 .media-frame.mode-grid.mode-select .attachment .thumbnail {
 556         opacity: 0.65;
 557 }
 558
 559 .media-frame.mode-select .attachment.selected .thumbnail {
 560         opacity: 1;
 561 }
 562
 563 .media-frame.mode-grid .media-toolbar {
 564         margin-bottom: 15px;
 565         height: auto;
 566 }
 567
 568 .media-frame.mode-grid .media-toolbar select {
 569         margin: 0 10px 0 0;
 570         font-size: 14px;
 571 }
 572
 573 .media-frame.mode-grid.mode-edit .media-toolbar-secondary > .select-mode-toggle-button {
 574         margin: 0 8px 0 0;
 575         vertical-align: middle;
 576 }
 577
 578 .media-frame.mode-grid .attachments-browser .bulk-select {
 579         display: inline-block;
 580         margin: 0 10px 0 0;
 581 }
 582
 583 .media-frame.mode-grid .search {
 584         margin-top: 0;
 585 }
 586
 587 .media-frame.mode-grid .spinner {
 588         margin-top: 16px;
 589 }
 590
 591 .attachments-browser .media-toolbar-secondary > .media-button {
 592         margin-right: 10px;
 593 }
 594
 595 .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
 596         position: fixed;
 597         top: 32px;
 598         left: auto;
 599         right: 20px;
 600         margin-top: 0;
 601 }
 602
 603 .media-frame.mode-grid .attachments-browser {
 604         padding: 0;
 605 }
 606
 607 .media-frame.mode-grid .attachments-browser .attachments {
 608         padding: 2px;
 609 }
 610
 611 .media-frame.mode-grid .attachments-browser .no-media {
 612         color: #999;
 613         font-size: 18px;
 614         font-style: normal;
 615         margin: 0;
 616         padding: 100px 0 0;
 617         text-align: center;
 618 }
 619
 620 /**
 621  * Attachment details modal
 622  */
 623
 624 .edit-attachment-frame {
 625         display: block;
 626         height: 100%;
 627         width: 100%;
 628 }
 629
 630 .edit-attachment-frame .edit-media-header {
 631         overflow: hidden;
 632 }
 633
 634 .upload-php .media-modal-close .media-modal-icon:before {
 635         content: "\f335";
 636         font-size: 22px;
 637 }
 638
 639 .upload-php .media-modal-close,
 640 .edit-attachment-frame .edit-media-header .left,
 641 .edit-attachment-frame .edit-media-header .right {
 642         cursor: pointer;
 643         color: #777;
 644         background-color: transparent;
 645         height: 50px;
 646         width: 50px;
 647         padding: 0;
 648         position: absolute;
 649         text-align: center;
 650         border: 0;
 651         border-left: 1px solid #ddd;
 652         -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
 653     transition: color .1s ease-in-out, background .1s ease-in-out;
 654 }
 655
 656 .upload-php .media-modal-close {
 657         top: 0;
 658         right: 0;
 659 }
 660
 661 .edit-attachment-frame .edit-media-header .left {
 662         right: 102px;
 663 }
 664
 665 .edit-attachment-frame .edit-media-header .right {
 666         right: 51px;
 667 }
 668
 669 .edit-attachment-frame .media-frame-title {
 670         left: 0;
 671         right: 150px; /* leave space for prev/next/close */
 672 }
 673
 674 .edit-attachment-frame .edit-media-header .right:before,
 675 .edit-attachment-frame .edit-media-header .left:before {
 676         font: normal 20px/50px dashicons !important;
 677         display: inline;
 678         font-weight: 300;
 679 }
 680
 681 .upload-php .media-modal-close:hover,
 682 .upload-php .media-modal-close:focus,
 683 .edit-attachment-frame .edit-media-header .left:hover,
 684 .edit-attachment-frame .edit-media-header .right:hover,
 685 .edit-attachment-frame .edit-media-header .left:focus,
 686 .edit-attachment-frame .edit-media-header .right:focus {
 687         background: #ddd;
 688         border-color: #ccc;
 689         color: #000;
 690         outline: none;
 691         -webkit-box-shadow: none;
 692         box-shadow: none;
 693 }
 694
 695 .upload-php .media-modal-close:focus .media-modal-icon:before,
 696 .upload-php .media-modal-close:hover .media-modal-icon:before {
 697         color: #000;
 698 }
 699
 700 .edit-attachment-frame .edit-media-header .left:before,
 701 .rtl .edit-attachment-frame .edit-media-header .right:before {
 702         content: "\f341";
 703 }
 704
 705 .edit-attachment-frame .edit-media-header .right:before,
 706 .rtl .edit-attachment-frame .edit-media-header .left:before {
 707         content: "\f345";
 708 }
 709
 710 .edit-attachment-frame .edit-media-header .left.disabled,
 711 .edit-attachment-frame .edit-media-header .right.disabled,
 712 .edit-attachment-frame .edit-media-header .left.disabled:hover,
 713 .edit-attachment-frame .edit-media-header .right.disabled:hover {
 714         color: #ccc;
 715         background: inherit;
 716         cursor: default;
 717         pointer-events: none;
 718 }
 719
 720 .edit-attachment-frame .media-frame-content,
 721 .edit-attachment-frame .media-frame-router {
 722         left: 0;
 723 }
 724
 725 .edit-attachment-frame .media-frame-content {
 726         border-bottom: none;
 727         bottom: 0;
 728         top: 50px;
 729 }
 730
 731 .edit-attachment-frame .attachment-details {
 732         position: absolute;
 733         overflow: auto;
 734         top: 0;
 735         bottom: 0;
 736         right: 0;
 737         left: 0;
 738         -webkit-box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
 739         box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
 740 }
 741
 742 .edit-attachment-frame .attachment-media-view {
 743         float: left;
 744         width: 65%;
 745         height: 100%;
 746 }
 747
 748 .edit-attachment-frame .attachment-media-view .thumbnail {
 749         -webkit-box-sizing: border-box;
 750         -moz-box-sizing: border-box;
 751         box-sizing: border-box;
 752         padding: 16px;
 753         height: 100%;
 754 }
 755
 756 .edit-attachment-frame .attachment-media-view .details-image {
 757         display: block;
 758         margin-bottom: 16px;
 759         max-width: 100%;
 760         max-height: 90%;
 761         max-height: -webkit-calc( 100% - 42px );
 762         max-height: calc( 100% - 42px ); /* leave space for actions underneath */
 763 }
 764
 765 .edit-attachment-frame .wp-media-wrapper {
 766         margin-bottom: 12px;
 767 }
 768
 769 .edit-attachment-frame input,
 770 .edit-attachment-frame textarea {
 771         padding: 6px 8px;
 772         line-height: 16px;
 773 }
 774
 775 .edit-attachment-frame .attachment-info {
 776         overflow: auto;
 777         -webkit-box-sizing: border-box;
 778         -moz-box-sizing: border-box;
 779         box-sizing: border-box;
 780         margin-bottom: 0;
 781         padding: 12px 16px 0;
 782         width: 35%;
 783         height: 100%;
 784         -webkit-box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
 785         box-shadow: inset 0px 4px 4px -4px rgba(0, 0, 0, 0.1);
 786         border-bottom: 0;
 787         border-left: 1px solid #ddd;
 788         background: #f3f3f3;
 789 }
 790
 791 .edit-attachment-frame .attachment-info .details,
 792 .edit-attachment-frame .attachment-info .settings {
 793         position: relative; /* RTL fix, #WP29352 */
 794         overflow: hidden;
 795         float: none;
 796         margin-bottom: 15px;
 797         padding-bottom: 15px;
 798         border-bottom: 1px solid #ddd;
 799 }
 800
 801 .edit-attachment-frame .attachment-info .filename {
 802         font-weight: normal;
 803         color: #666;
 804 }
 805
 806 .edit-attachment-frame .attachment-info .thumbnail {
 807         margin-bottom: 12px;
 808 }
 809
 810 .attachment-info .actions {
 811         margin-bottom: 16px;
 812 }
 813
 814 .attachment-info .actions a {
 815         display: inline;
 816         text-decoration: none;
 817 }
 818
 819
 820 /*------------------------------------------------------------------------------
 821   14.2 - Image Editor
 822 ------------------------------------------------------------------------------*/
 823
 824 .wp_attachment_details label[for="content"] {
 825         font-size: 13px;
 826         line-height: 1.5;
 827         margin: 1em 0;
 828 }
 829
 830 .wp_attachment_details #attachment_caption {
 831         height: 4em;
 832 }
 833
 834 .describe .image-editor {
 835         vertical-align: top;
 836 }
 837
 838 .imgedit-wrap {
 839         position: relative;
 840 }
 841
 842 .imgedit-settings p {
 843         margin: 8px 0 0;
 844 }
 845
 846 .describe .imgedit-wrap .imgedit-settings {
 847         padding: 0 5px;
 848 }
 849
 850 .wp_attachment_holder div.updated {
 851         margin-top: 0;
 852 }
 853
 854 .wp_attachment_holder .imgedit-wrap > div {
 855         height: auto;
 856         overflow: hidden;
 857 }
 858
 859 .wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
 860         padding-right: 16px;
 861         width: auto;
 862         overflow: hidden;
 863 }
 864
 865 .wp_attachment_holder .imgedit-wrap .imgedit-settings {
 866         float: right;
 867         width: 250px;
 868 }
 869
 870 .imgedit-settings input {
 871         margin-top: 0;
 872         vertical-align: middle;
 873 }
 874
 875 .imgedit-wait {
 876         position: absolute;
 877         top: 0;
 878         background: #fff url(../images/spinner.gif) no-repeat center;
 879         -webkit-background-size: 20px 20px;
 880         background-size: 20px 20px;
 881         opacity: 0.7;
 882         filter: alpha(opacity=70);
 883         width: 100%;
 884         height: 500px;
 885         display: none;
 886 }
 887
 888 .no-float {
 889         float: none;
 890 }
 891
 892 .media-disabled,
 893 .imgedit-settings .disabled {
 894         color: grey;
 895 }
 896
 897 .wp_attachment_image,
 898 .A1B1 {
 899         overflow: hidden;
 900 }
 901
 902 .wp_attachment_image .button,
 903 .A1B1 .button {
 904         float: left;
 905 }
 906
 907 .no-js .wp_attachment_image .button {
 908         display: none;
 909 }
 910
 911 .wp_attachment_image .spinner,
 912 .A1B1 .spinner {
 913         float: left;
 914 }
 915
 916 .imgedit-menu {
 917         margin: 0 0 12px;
 918         min-width: 300px;
 919 }
 920
 921 .imgedit-menu div {
 922         float: left;
 923         width: 32px;
 924         border: 1px solid #d5d5d5;
 925         background: #f1f1f1;
 926         margin: 0 8px 0 0;
 927         height: 32px;
 928         -webkit-font-smoothing: antialiased;
 929         -moz-osx-font-smoothing: grayscale;
 930         text-align: center;
 931         line-height: 28px;
 932         color: #777;
 933         cursor: pointer;
 934 }
 935
 936 .imgedit-menu div:before {
 937         font: normal 20px/1 dashicons;
 938         speak: none;
 939         vertical-align: middle;
 940 }
 941
 942 .imgedit-menu div:hover {
 943         border-color: #c1c1c1;
 944         background-color: #eaeaea;
 945         color: #32373c;
 946 }
 947
 948 .imgedit-menu div.disabled {
 949         border-color: #ccc;
 950         background-color: #ddd;
 951         color: #777;
 952         filter: alpha(opacity=50);
 953         opacity: 0.5;
 954         cursor: default;
 955 }
 956
 957 .imgedit-crop:before {
 958         content: "\f165";
 959 }
 960
 961 .imgedit-rleft:before {
 962         content: "\f166";
 963 }
 964
 965 .imgedit-rright:before {
 966         content: "\f167";
 967 }
 968
 969 .imgedit-flipv:before {
 970         content: "\f168";
 971 }
 972
 973 .imgedit-fliph:before {
 974         content: "\f169";
 975 }
 976
 977 .imgedit-undo:before {
 978         content: "\f171";
 979 }
 980
 981 .imgedit-redo:before {
 982         content: "\f172";
 983 }
 984
 985 .imgedit-crop-wrap {
 986         position: relative;
 987 }
 988
 989 .imgedit-crop {
 990         margin: 0 8px 0 0;
 991 }
 992
 993 .imgedit-rleft {
 994         margin: 0 3px;
 995 }
 996
 997 .imgedit-rright {
 998         margin: 0 8px 0 3px;
 999 }
1000
1001 .imgedit-flipv {
1002         margin: 0 3px;
1003 }
1004
1005 .imgedit-fliph {
1006         margin: 0 8px 0 3px;
1007 }
1008
1009 .imgedit-undo {
1010         margin: 0 3px;
1011 }
1012
1013 .imgedit-redo {
1014         margin: 0 8px 0 3px;
1015 }
1016
1017 .imgedit-applyto img {
1018         margin: 0 8px 0 0;
1019 }
1020
1021 #poststuff .imgedit-group-top h3, /* Back-compat for pre-4.4 */
1022 #poststuff .imgedit-group-top h2 {
1023         margin: 0;
1024         padding: 0;
1025         font-size: 14px;
1026         line-height: 1.4;
1027 }
1028
1029 .imgedit-group-top h3 a, /* Back-compat for pre-4.4 */
1030 .imgedit-group-top h2 a {
1031         text-decoration: none;
1032 }
1033
1034 .imgedit-applyto .imgedit-label {
1035         padding: 2px 0 0;
1036         display: block;
1037 }
1038
1039 .imgedit-help {
1040         display: none;
1041         font-style: italic;
1042 }
1043
1044 a.imgedit-help-toggle {
1045         text-decoration: none;
1046 }
1047
1048 .form-table td.imgedit-response {
1049         padding: 0;
1050 }
1051
1052 .imgedit-submit {
1053         margin: 8px 0 0;
1054 }
1055
1056 .imgedit-submit-btn {
1057         margin-left: 20px;
1058 }
1059
1060 .imgedit-wrap .nowrap {
1061         white-space: nowrap;
1062 }
1063
1064 span.imgedit-scale-warn {
1065         color: red;
1066         font-size: 20px;
1067         font-style: normal;
1068         visibility: hidden;
1069         vertical-align: middle;
1070 }
1071
1072 .imgedit-group {
1073         margin-bottom: 8px;
1074         padding: 10px;
1075 }
1076
1077 audio, video {
1078         display: inline-block;
1079         max-width: 100%;
1080 }
1081
1082 .mejs-container {
1083         width: 100%;
1084         max-width: 100%;
1085 }
1086
1087 /* =Media Queries
1088 -------------------------------------------------------------- */
1089
1090 /**
1091  * HiDPI Displays
1092  */
1093 @media print,
1094   (-webkit-min-device-pixel-ratio: 1.25),
1095   (min-resolution: 120dpi) {
1096         .imgedit-wait {
1097                 background-image: url(../images/spinner-2x.gif);
1098         }
1099 }
1100
1101 @media screen and ( max-width: 782px ) {
1102         .wp_attachment_details label[for="content"] {
1103                 font-size: 14px;
1104                 line-height: 1.5em;
1105         }
1106
1107         .media-upload-form .media-item.error,
1108         .media-upload-form .media-item .error {
1109                 font-size: 13px;
1110                 line-height: 1.5;
1111         }
1112
1113         .media-upload-form .media-item.error {
1114                 padding: 1px 10px;
1115         }
1116
1117         .media-upload-form .media-item .error {
1118                 padding: 10px 0 10px 12px;
1119         }
1120 }
1121
1122 /**
1123  * Media queries for media grid.
1124  */
1125
1126 @media only screen and (max-width: 1120px) {
1127         /* override for media-views.css */
1128         #wp-media-grid .wp-filter .attachment-filters {
1129                 max-width: 100%;
1130         }
1131 }
1132
1133 @media only screen and ( max-width: 782px ) {
1134         .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
1135                 top: 46px;
1136                 right: 10px;
1137         }
1138 }
1139
1140 @media only screen and (max-width: 600px) {
1141         .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
1142                 top: 0;
1143         }
1144 }
1145
1146 @media only screen and (max-width: 480px) {
1147         .edit-attachment-frame .media-frame-title {
1148                 right: 110px;
1149         }
1150
1151         .upload-php .media-modal-close,
1152         .edit-attachment-frame .edit-media-header .left,
1153         .edit-attachment-frame .edit-media-header .right {
1154                 width: 40px;
1155                 height: 40px;
1156         }
1157
1158         .upload-php .media-modal-close .media-modal-icon {
1159                 margin: 9px 10px;
1160         }
1161
1162         .edit-attachment-frame .edit-media-header .right:before,
1163         .edit-attachment-frame .edit-media-header .left:before {
1164                 line-height: 40px !important;
1165         }
1166
1167         .edit-attachment-frame .edit-media-header .left {
1168                 right: 82px;
1169         }
1170
1171         .edit-attachment-frame .edit-media-header .right {
1172                 right: 41px;
1173         }
1174
1175         .edit-attachment-frame .media-frame-content {
1176                 top: 40px;
1177         }
1178
1179         .edit-attachment-frame .attachment-media-view {
1180                 float: none;
1181                 height: auto;
1182                 width: 100%;
1183         }
1184
1185         .edit-attachment-frame .attachment-info {
1186                 height: auto;
1187                 width: 100%;
1188         }
1189 }
1190
1191 @media only screen and (max-width: 640px), screen and (max-height: 400px) {
1192         .upload-php .mode-grid .media-sidebar{
1193                 max-width: 100%;
1194         }
1195 }