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