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