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