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 #ddd;
   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 #ddd;
 128         box-shadow: 0 1px 0 #ddd;
 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 #ddd;
 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 #ddd;
 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: #b4b9be;
 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: #666; /* same as no plugins and no themes */
 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: #72777c;
 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         padding-top: 10px;
 841 }
 842
 843 .imgedit-settings p,
 844 .imgedit-settings fieldset {
 845         margin: 8px 0;
 846 }
 847
 848 .imgedit-settings legend {
 849         margin-bottom: 5px;
 850 }
 851
 852 .describe .imgedit-wrap .imgedit-settings {
 853         padding: 0 5px;
 854 }
 855
 856 .wp_attachment_holder div.updated {
 857         margin-top: 0;
 858 }
 859
 860 .wp_attachment_holder .imgedit-wrap > div {
 861         height: auto;
 862 }
 863
 864 .wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
 865         padding: 3px 16px 0 0;
 866         float: left;
 867 }
 868
 869 .wp_attachment_holder .imgedit-wrap .imgedit-settings {
 870         float: right;
 871         width: 250px;
 872 }
 873
 874 .imgedit-settings input {
 875         margin-top: 0;
 876         vertical-align: middle;
 877 }
 878
 879 .imgedit-wait {
 880         position: absolute;
 881         top: 0;
 882         bottom: 0;
 883         width: 100%;
 884         background: #fff;
 885         opacity: 0.7;
 886         filter: alpha(opacity=70);
 887         display: none;
 888 }
 889
 890 .imgedit-wait:before {
 891         content: "";
 892         display: block;
 893         width: 20px;
 894         height: 20px;
 895         position: absolute;
 896         left: 50%;
 897         top: 50%;
 898         margin: -10px 0 0 -10px;
 899         background: transparent url(../images/spinner.gif) no-repeat center;
 900         -webkit-background-size: 20px 20px;
 901         background-size: 20px 20px;
 902         -webkit-transform: translateZ(0);
 903         transform: translateZ(0);
 904 }
 905
 906 .no-float {
 907         float: none;
 908 }
 909
 910 .media-disabled,
 911 .imgedit-settings .disabled {
 912         /* WCAG 1.4.3 Text or images of text that are part of an inactive user
 913            interface component ... have no contrast requirement. */
 914         color: #a0a5aa;
 915 }
 916
 917 .A1B1 {
 918         overflow: hidden;
 919 }
 920
 921 .wp_attachment_image .button,
 922 .A1B1 .button {
 923         float: left;
 924 }
 925
 926 .no-js .wp_attachment_image .button {
 927         display: none;
 928 }
 929
 930 .wp_attachment_image .spinner,
 931 .A1B1 .spinner {
 932         float: left;
 933 }
 934
 935 .imgedit-menu {
 936         min-width: 300px;
 937         margin: 0 0 12px;
 938 }
 939
 940 .imgedit-menu .note-no-rotate {
 941         clear: both;
 942         margin: 0;
 943         padding: 1em 0 0;
 944 }
 945
 946 .image-editor .imgedit-menu .button {
 947         float: left;
 948         width: 32px;
 949         height: 32px;
 950         margin: 0 8px 0 0;
 951         padding: 0;
 952         background: #f1f1f1;
 953         -webkit-font-smoothing: antialiased;
 954         -moz-osx-font-smoothing: grayscale;
 955         line-height: 16px;
 956         color: #72777c;
 957 }
 958
 959 .imgedit-menu .button:before {
 960         font: normal 20px/1 dashicons;
 961         speak: none;
 962         vertical-align: middle;
 963 }
 964
 965 .imgedit-menu .button.disabled {
 966         border-color: #ccc;
 967         background-color: #ddd;
 968         color: #72777c;
 969         filter: alpha(opacity=50);
 970         opacity: 0.5;
 971         cursor: default;
 972 }
 973
 974 .imgedit-crop:before {
 975         content: "\f165";
 976 }
 977
 978 .imgedit-rleft:before {
 979         content: "\f166";
 980 }
 981
 982 .imgedit-rright:before {
 983         content: "\f167";
 984 }
 985
 986 .imgedit-flipv:before {
 987         content: "\f168";
 988 }
 989
 990 .imgedit-fliph:before {
 991         content: "\f169";
 992 }
 993
 994 .imgedit-undo:before {
 995         content: "\f171";
 996 }
 997
 998 .imgedit-redo:before {
 999         content: "\f172";
1000 }
1001
1002 .imgedit-crop-wrap {
1003         position: relative;
1004 }
1005
1006 .imgedit-crop {
1007         margin: 0 8px 0 0;
1008 }
1009
1010 .imgedit-rleft {
1011         margin: 0 3px;
1012 }
1013
1014 .imgedit-rright {
1015         margin: 0 8px 0 3px;
1016 }
1017
1018 .imgedit-flipv {
1019         margin: 0 3px;
1020 }
1021
1022 .imgedit-fliph {
1023         margin: 0 8px 0 3px;
1024 }
1025
1026 .imgedit-undo {
1027         margin: 0 3px;
1028 }
1029
1030 .imgedit-redo {
1031         margin: 0 8px 0 3px;
1032 }
1033
1034 .imgedit-thumbnail-preview {
1035         margin: 10px 8px 0 0;
1036 }
1037
1038 .imgedit-thumbnail-preview-caption {
1039         display: block;
1040 }
1041
1042 #poststuff .imgedit-group-top h3, /* Back-compat for pre-4.4 */
1043 #poststuff .imgedit-group-top h2 {
1044         display: inline-block;
1045         margin: 0;
1046         padding: 0;
1047         font-size: 14px;
1048         line-height: 1.4;
1049 }
1050
1051 .imgedit-group-top h3 a, /* Back-compat for pre-4.4 */
1052 .imgedit-group-top h2 a {
1053         text-decoration: none;
1054 }
1055
1056 .imgedit-applyto .imgedit-label {
1057         display: block;
1058         padding: .5em 0 0;
1059 }
1060
1061 .imgedit-help {
1062         display: none;
1063         font-style: italic;
1064 }
1065
1066 /* higher specificity than buttons */
1067 .image-editor .imgedit-settings .imgedit-help-toggle,
1068 .image-editor .imgedit-settings .imgedit-help-toggle:hover,
1069 .image-editor .imgedit-settings .imgedit-help-toggle:active {
1070         border: 1px solid transparent;
1071         margin: -1px 0 0 -1px;
1072         padding: 0;
1073         background: transparent;
1074         color: #0074a2;
1075         font-size: 20px;
1076         line-height: 1;
1077         cursor: pointer;
1078         -webkit-box-sizing: content-box;
1079         -moz-box-sizing: content-box;
1080         box-sizing: content-box;
1081         -webkit-box-shadow: none;
1082         box-shadow: none;
1083 }
1084
1085 .image-editor .imgedit-settings .imgedit-help-toggle:focus {
1086         color: #0074a2;
1087         border-color: #5b9dd9;
1088         outline: none;
1089         -webkit-box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
1090         box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
1091 }
1092
1093 .form-table td.imgedit-response {
1094         padding: 0;
1095 }
1096
1097 .imgedit-submit {
1098         margin: 8px 0 0;
1099 }
1100
1101 .imgedit-submit-btn {
1102         margin-left: 20px;
1103 }
1104
1105 .imgedit-wrap .nowrap {
1106         white-space: nowrap;
1107         font-size: 12px;
1108         line-height: inherit;
1109 }
1110
1111 span.imgedit-scale-warn {
1112         color: red;
1113         font-size: 20px;
1114         font-style: normal;
1115         visibility: hidden;
1116         vertical-align: middle;
1117 }
1118
1119 .imgedit-save-target {
1120         margin: 8px 0;
1121 }
1122
1123 .imgedit-group {
1124         margin-bottom: 8px;
1125         padding: 10px;
1126 }
1127
1128 .imgedit-settings .imgedit-scale input[type="text"],
1129 .imgedit-settings .imgedit-crop-ratio input[type="text"],
1130 .imgedit-settings .imgedit-crop-sel input[type="text"] {
1131         width: 50px;
1132         font-size: 14px;
1133         padding: 3px 5px;
1134 }
1135
1136 .imgedit-separator {
1137         display: inline-block;
1138         width: 7px;
1139         text-align: center;
1140         vertical-align: middle;
1141         font-size: 13px;
1142         color: #444;
1143 }
1144
1145 .imgedit-settings .imgedit-scale .button {
1146         margin-bottom: 0;
1147 }
1148
1149 audio, video {
1150         display: inline-block;
1151         max-width: 100%;
1152 }
1153
1154 .mejs-container {
1155         width: 100%;
1156         max-width: 100%;
1157 }
1158
1159 /* =Media Queries
1160 -------------------------------------------------------------- */
1161
1162 /**
1163  * HiDPI Displays
1164  */
1165 @media print,
1166   (-webkit-min-device-pixel-ratio: 1.25),
1167   (min-resolution: 120dpi) {
1168         .imgedit-wait:before {
1169                 background-image: url(../images/spinner-2x.gif);
1170         }
1171 }
1172
1173 @media screen and ( max-width: 782px ) {
1174         .wp_attachment_details label[for="content"] {
1175                 font-size: 14px;
1176                 line-height: 1.5em;
1177         }
1178
1179         .media-upload-form .media-item.error,
1180         .media-upload-form .media-item .error {
1181                 font-size: 13px;
1182                 line-height: 1.5;
1183         }
1184
1185         .media-upload-form .media-item.error {
1186                 padding: 1px 10px;
1187         }
1188
1189         .media-upload-form .media-item .error {
1190                 padding: 10px 0 10px 12px;
1191         }
1192
1193         .imgedit-settings .imgedit-scale input[type="text"],
1194         .imgedit-settings .imgedit-crop-ratio input[type="text"],
1195         .imgedit-settings .imgedit-crop-sel input[type="text"] {
1196                 width: 60px;
1197                 font-size: 16px;
1198                 padding: 6px 10px;
1199         }
1200
1201         .imgedit-applyto .imgedit-label {
1202                 vertical-align: middle;
1203         }
1204 }
1205
1206 /**
1207  * Media queries for media grid.
1208  */
1209
1210 @media only screen and (max-width: 1120px) {
1211         /* override for media-views.css */
1212         #wp-media-grid .wp-filter .attachment-filters {
1213                 max-width: 100%;
1214         }
1215 }
1216
1217 @media only screen and ( max-width: 782px ) {
1218         .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
1219                 top: 46px;
1220                 right: 10px;
1221         }
1222 }
1223
1224 @media only screen and (max-width: 600px) {
1225         .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
1226                 top: 0;
1227         }
1228 }
1229
1230 @media only screen and (max-width: 480px) {
1231         .edit-attachment-frame .media-frame-title {
1232                 right: 110px;
1233         }
1234
1235         .upload-php .media-modal-close,
1236         .edit-attachment-frame .edit-media-header .left,
1237         .edit-attachment-frame .edit-media-header .right {
1238                 width: 40px;
1239                 height: 40px;
1240         }
1241
1242         .upload-php .media-modal-close .media-modal-icon {
1243                 margin: 9px 10px;
1244         }
1245
1246         .edit-attachment-frame .edit-media-header .right:before,
1247         .edit-attachment-frame .edit-media-header .left:before {
1248                 line-height: 40px !important;
1249         }
1250
1251         .edit-attachment-frame .edit-media-header .left {
1252                 right: 82px;
1253         }
1254
1255         .edit-attachment-frame .edit-media-header .right {
1256                 right: 41px;
1257         }
1258
1259         .edit-attachment-frame .media-frame-content {
1260                 top: 40px;
1261         }
1262
1263         .edit-attachment-frame .attachment-media-view {
1264                 float: none;
1265                 height: auto;
1266                 width: 100%;
1267         }
1268
1269         .edit-attachment-frame .attachment-info {
1270                 height: auto;
1271                 width: 100%;
1272         }
1273 }
1274
1275 @media only screen and (max-width: 640px), screen and (max-height: 400px) {
1276         .upload-php .mode-grid .media-sidebar{
1277                 max-width: 100%;
1278         }
1279 }