wp-admin/css/media-rtl.css

   1 /*------------------------------------------------------------------------------
   2   14.0 - Media Screen
   3 ------------------------------------------------------------------------------*/
   4
   5 .media-item .describe {
   6         border-collapse: collapse;
   7         width: 100%;
   8         border-top: 1px solid #dfdfdf;
   9         clear: both;
  10         cursor: default;
  11 }
  12
  13 .media-item.media-blank .describe {
  14         border: 0;
  15 }
  16
  17 .media-item .describe th {
  18         vertical-align: top;
  19         text-align: right;
  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 0 8px 8px;
  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 10px 0 0;
  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-left: 6px;
  64         margin-right: 2px;
  65 }
  66
  67 .media-upload-form .align .field label {
  68         display: inline;
  69         padding: 0 23px 0 0;
  70         margin: 0 3px 0 1em;
  71         font-weight: 600;
  72 }
  73
  74 .media-upload-form tr.image-size label {
  75         margin: 0 5px 0 0;
  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 5px 0 0;
  97 }
  98
  99 .media-item .edit-attachment,
 100 .describe-toggle-on,
 101 .describe-toggle-off {
 102         display: block;
 103         line-height: 36px;
 104         float: left;
 105         margin-left: 10px;
 106 }
 107
 108 .media-item .describe-toggle-off,
 109 .media-item.open .describe-toggle-on {
 110         display: none;
 111 }
 112
 113 .media-item.open .describe-toggle-off {
 114         display: block;
 115 }
 116
 117 .media-upload-form .media-item {
 118         min-height: 36px;
 119         margin-bottom: 1px;
 120         position: relative;
 121         width: 100%;
 122         background: #fff;
 123 }
 124
 125 .media-upload-form .media-item,
 126 .media-upload-form .media-item .error {
 127         -webkit-box-shadow: 0 1px 0 #dfdfdf;
 128         box-shadow: 0 1px 0 #dfdfdf;
 129 }
 130
 131 #media-items:empty {
 132         border: 0 none;
 133 }
 134
 135 .media-item .filename {
 136         line-height: 36px;
 137         overflow: hidden;
 138         margin-right: 6px;
 139 }
 140
 141 .media-item .pinkynail {
 142         float: right;
 143         margin: 2px 3px 0 10px;
 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: left;
 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: #0074a2;
 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 14px 10px 0;
 217 }
 218
 219 .media-item .error-div a.dismiss {
 220         display: block;
 221         float: left;
 222         margin: 0 15px 0 10px;
 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-right: -300px;
 236         position: fixed;
 237         top: 30px;
 238         bottom: 30px;
 239         right: 50%;
 240         z-index: 100105;
 241 }
 242
 243 .find-box-head {
 244         background: #fcfcfc;
 245         border-bottom: 1px solid #dfdfdf;
 246         height: 36px;
 247         font-size: 18px;
 248         font-weight: 600;
 249         line-height: 36px;
 250         padding: 0 16px 0 36px;
 251         position: absolute;
 252         top: 0;
 253         right: 0;
 254         left: 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         right: 110px;
 278         position: absolute;
 279         top: 2px;
 280 }
 281
 282 .find-box-search,
 283 #find-posts-response {
 284         position: relative; /* RTL fix, #WP28010 */
 285 }
 286
 287 #find-posts-input,
 288 #find-posts-search {
 289         float: right;
 290 }
 291
 292 #find-posts-input {
 293         width: 140px;
 294         height: 28px;
 295         margin: 0 0 0 4px;
 296 }
 297
 298 .widefat .found-radio {
 299         padding-left: 0;
 300         width: 16px;
 301 }
 302
 303 #find-posts-close {
 304         width: 36px;
 305         height: 36px;
 306         position: absolute;
 307         top: 0;
 308         left: 0;
 309         cursor: pointer;
 310         text-align: center;
 311         color: #666;
 312 }
 313
 314 #find-posts-close:hover {
 315         color: #2ea2cc;
 316 }
 317
 318 #find-posts-close:before {
 319         font: normal 20px/36px 'dashicons';
 320         vertical-align: top;
 321         speak: none;
 322         -webkit-font-smoothing: antialiased;
 323         -moz-osx-font-smoothing: grayscale;
 324         content: '\f158';
 325 }
 326
 327 .find-box-buttons {
 328         padding: 8px 16px;
 329         background: #fcfcfc;
 330         border-top: 1px solid #dfdfdf;
 331         position: absolute;
 332         bottom: 0;
 333         right: 0;
 334         left: 0;
 335 }
 336
 337 @media screen and ( max-width: 782px ) {
 338         .find-box-inside {
 339                 bottom: 57px;
 340         }
 341 }
 342
 343 @media screen and ( max-width: 660px ) {
 344
 345         .find-box {
 346                 top: 0;
 347                 bottom: 0;
 348                 right: 0;
 349                 left: 0;
 350                 margin: 0;
 351                 width: 100%;
 352         }
 353
 354 }
 355
 356 .ui-find-overlay {
 357         position: fixed;
 358         top: 0;
 359         right: 0;
 360         left: 0;
 361         bottom: 0;
 362         background: #000;
 363         opacity: 0.7;
 364         filter: alpha(opacity=70);
 365         z-index: 100100;
 366 }
 367
 368 ul#dismissed-updates {
 369         display: none;
 370 }
 371
 372 form.upgrade {
 373         margin-top: 8px;
 374 }
 375
 376 form.upgrade .hint {
 377         font-style: italic;
 378         font-size: 85%;
 379         margin: -0.5em 0 2em 0;
 380 }
 381
 382 #poststuff .inside .the-tagcloud {
 383         margin: 5px 0 10px;
 384         padding: 8px;
 385         border: 1px solid #ddd;
 386         line-height: 1.8em;
 387         word-spacing: 3px;
 388         -webkit-border-radius: 6px;
 389         border-radius: 6px;
 390 }
 391
 392 .drag-drop #drag-drop-area {
 393         border: 4px dashed #bbb;
 394         height: 200px;
 395 }
 396
 397 .drag-drop .drag-drop-inside {
 398         margin: 70px auto 0;
 399         width: 250px;
 400 }
 401
 402 .drag-drop-inside p {
 403         color: #aaa;
 404         font-size: 14px;
 405         margin: 5px 0;
 406         display: none;
 407 }
 408
 409 .drag-drop .drag-drop-inside p {
 410         text-align: center;
 411 }
 412
 413 .drag-drop-inside p.drag-drop-info {
 414         font-size: 20px;
 415 }
 416
 417 .drag-drop .drag-drop-inside p,
 418 .drag-drop-inside p.drag-drop-buttons {
 419         display: block;
 420 }
 421
 422 /*
 423 #drag-drop-area:-moz-drag-over {
 424         border-color: #83b4d8;
 425 }
 426 border color while dragging a file over the uploader drop area */
 427 .drag-drop.drag-over #drag-drop-area {
 428         border-color: #83b4d8;
 429 }
 430
 431 #plupload-upload-ui {
 432         position: relative;
 433 }
 434
 435 /**
 436  * Media Library grid view
 437  */
 438
 439 .media-frame.mode-grid,
 440 .media-frame.mode-grid .media-frame-content,
 441 .media-frame.mode-grid .attachments-browser .attachments,
 442 .media-frame.mode-grid .uploader-inline-content {
 443         position: static;
 444 }
 445
 446 /* Regions we don't use at all */
 447 .media-frame.mode-grid .media-frame-title,
 448 .media-frame.mode-grid .media-frame-router,
 449 .media-frame.mode-grid .media-frame-menu {
 450         display: none;
 451 }
 452
 453 .media-frame.mode-grid .media-frame-content {
 454         background-color: transparent;
 455         border: none;
 456 }
 457
 458 .upload-php .mode-grid .media-sidebar {
 459         position: relative;
 460         width: auto;
 461         margin-bottom: 16px;
 462         padding: 0 16px;
 463         border: 1px solid #c00;
 464         background-color: #feebe8;
 465 }
 466
 467 .upload-php .mode-grid .hide-sidebar .media-sidebar {
 468         display: none;
 469 }
 470
 471 .upload-php .mode-grid .media-sidebar .media-uploader-status {
 472         border-bottom: none;
 473         padding-bottom: 0;
 474         max-width: 100%;
 475 }
 476
 477 .upload-php .mode-grid .media-sidebar .upload-error {
 478         margin: 20px 0;
 479         padding: 0;
 480         border: none;
 481         background: none;
 482 }
 483
 484 .upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors {
 485         font-size: 0;
 486         top: -12px;
 487         left: -10px;
 488 }
 489
 490 .upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:before {
 491         content: "\f158";
 492         font: normal 20px/1 dashicons;
 493         color: #666;
 494 }
 495
 496 .upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:focus:before,
 497 .upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:hover:before {
 498         color: #2ea2cc;
 499 }
 500
 501 .upload-php .mode-grid .media-sidebar .media-uploader-status.errors h3 {
 502         display: none;
 503 }
 504
 505 .media-frame.mode-grid .uploader-inline {
 506         position: relative;
 507         top: auto;
 508         left: auto;
 509         right: auto;
 510         bottom: auto;
 511         padding-top: 0;
 512         margin-top: 0;
 513         border: 4px dashed #bbb;
 514 }
 515
 516 .media-frame.mode-select .attachments-browser.fixed .attachments {
 517         position: relative;
 518         top: 94px; /* prevent jumping up when the toolbar becomes fixed */
 519         padding-bottom: 94px; /* offset for above so the bottom doesn't get cut off */
 520 }
 521
 522 .media-frame.mode-grid .attachment:focus,
 523 .media-frame.mode-grid .selected.attachment:focus,
 524 .media-frame.mode-grid .attachment.details:focus {
 525         -webkit-box-shadow:
 526                 inset 0 0 2px 3px #f1f1f1,
 527                 inset 0 0 0 7px #5b9dd9;
 528         box-shadow:
 529                 inset 0 0 2px 3px #f1f1f1,
 530                 inset 0 0 0 7px #5b9dd9;
 531         outline: none;
 532 }
 533
 534 .media-frame.mode-grid .selected.attachment {
 535         -webkit-box-shadow:
 536                 inset 0 0 0 5px #f1f1f1,
 537                 inset 0 0 0 7px #ccc;
 538         box-shadow:
 539                 inset 0 0 0 5px #f1f1f1,
 540                 inset 0 0 0 7px #ccc;
 541 }
 542
 543 .media-frame.mode-grid .attachment.details {
 544         -webkit-box-shadow:
 545                 inset 0 0 0 3px #f1f1f1,
 546                 inset 0 0 0 7px #1e8cbe;
 547         box-shadow:
 548                 inset 0 0 0 3px #f1f1f1,
 549                 inset 0 0 0 7px #1e8cbe;
 550 }
 551
 552 .media-frame.mode-grid.mode-select .attachment .thumbnail {
 553         opacity: 0.65;
 554 }
 555
 556 .media-frame.mode-select .attachment.selected .thumbnail {
 557         opacity: 1;
 558 }
 559
 560 .media-frame.mode-grid .media-toolbar {
 561         margin-bottom: 15px;
 562         height: auto;
 563 }
 564
 565 .media-frame.mode-grid .media-toolbar select {
 566         margin: 0 0 0 10px;
 567         font-size: 14px;
 568 }
 569
 570 .media-frame.mode-grid .media-toolbar-secondary > .media-button {
 571         margin-top: 10px;
 572         margin-bottom: 10px;
 573 }
 574
 575 .media-frame.mode-grid .attachments-browser .bulk-select {
 576         display: inline-block;
 577         margin: 0 0 0 10px;
 578 }
 579
 580 .media-frame.mode-grid .search {
 581         margin-top: 0;
 582 }
 583
 584 .media-frame.mode-grid .spinner {
 585         margin-top: 15px;
 586 }
 587
 588 .attachments-browser .media-toolbar-secondary > .media-button {
 589         margin-left: 10px;
 590 }
 591
 592 .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
 593         position: fixed;
 594         top: 32px;
 595         right: auto;
 596         left: 20px;
 597         margin-top: 0;
 598 }
 599
 600 .media-frame.mode-grid .attachments-browser {
 601         padding: 0;
 602 }
 603
 604 .media-frame.mode-grid .attachments-browser .attachments {
 605         padding: 2px;
 606 }
 607
 608 .media-frame.mode-grid .attachments-browser .no-media {
 609         color: #999;
 610         font-size: 18px;
 611         font-style: normal;
 612         margin: 0;
 613         padding: 100px 0 0;
 614         text-align: center;
 615 }
 616
 617 /**
 618  * Attachment details modal
 619  */
 620
 621 .edit-attachment-frame {
 622         display: block;
 623         height: 100%;
 624         width: 100%;
 625 }
 626
 627 .edit-attachment-frame .edit-media-header {
 628         overflow: hidden;
 629 }
 630
 631 .upload-php .media-modal-close .media-modal-icon:before {
 632         content: '\f335';
 633         font-size: 22px;
 634 }
 635
 636 .upload-php .media-modal-close .media-modal-icon {
 637         margin: 14px;
 638         width: 22px;
 639 }
 640
 641 .upload-php .media-modal-close,
 642 .edit-attachment-frame .edit-media-header .left,
 643 .edit-attachment-frame .edit-media-header .right {
 644         cursor: pointer;
 645         color: #777;
 646         background-color: transparent;
 647         height: 50px;
 648         width: 50px;
 649         padding: 0;
 650         position: absolute;
 651         text-align: center;
 652         border: 0;
 653         border-right: 1px solid #ddd;
 654         -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
 655     transition: color .1s ease-in-out, background .1s ease-in-out;
 656 }
 657
 658 .upload-php .media-modal-close {
 659         top: 0;
 660         left: 0;
 661 }
 662
 663 .edit-attachment-frame .edit-media-header .left {
 664         left: 102px;
 665 }
 666
 667 .edit-attachment-frame .edit-media-header .right {
 668         left: 51px;
 669 }
 670
 671 .edit-attachment-frame .media-frame-title {
 672         right: 0;
 673         left: 150px; /* leave space for prev/next/close */
 674 }
 675
 676 .edit-attachment-frame .edit-media-header .right:before,
 677 .edit-attachment-frame .edit-media-header .left:before {
 678         font: normal 20px/50px 'dashicons' !important;
 679         display: inline;
 680         font-weight: 300;
 681 }
 682
 683 .upload-php .media-modal-close:hover,
 684 .upload-php .media-modal-close:focus,
 685 .edit-attachment-frame .edit-media-header .left:hover,
 686 .edit-attachment-frame .edit-media-header .right:hover,
 687 .edit-attachment-frame .edit-media-header .left:focus,
 688 .edit-attachment-frame .edit-media-header .right:focus {
 689         background: #ddd;
 690         border-color: #ccc;
 691         color: #000;
 692         outline: 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         right: 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         left: 0;
 737         right: 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: right;
 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-right: 1px solid #ddd;
 788         background: #f3f3f3;
 789 }
 790
 791 .edit-attachment-frame .attachment-info .details,
 792 .edit-attachment-frame .attachment-info .settings {
 793         position: relative; /* RTL fix, #WP29352 */
 794         overflow: hidden;
 795         float: none;
 796         margin-bottom: 15px;
 797         padding-bottom: 15px;
 798         border-bottom: 1px solid #ddd;
 799 }
 800
 801 .edit-attachment-frame .attachment-info .filename {
 802         font-weight: normal;
 803         color: #666;
 804 }
 805
 806 .edit-attachment-frame .attachment-info .thumbnail {
 807         margin-bottom: 12px;
 808 }
 809
 810 .attachment-info .actions {
 811         margin-bottom: 16px;
 812 }
 813
 814 .attachment-info .actions a {
 815         display: inline;
 816         text-decoration: none;
 817 }
 818
 819
 820 /*------------------------------------------------------------------------------
 821   14.2 - Image Editor
 822 ------------------------------------------------------------------------------*/
 823
 824 .wp_attachment_details label[for="content"] {
 825         font-size: 13px;
 826         line-height: 1.5;
 827         margin: 1em 0;
 828 }
 829
 830 .wp_attachment_details #attachment_caption {
 831         height: 4em;
 832 }
 833
 834 .describe .image-editor {
 835         vertical-align: top;
 836 }
 837
 838 .imgedit-wrap {
 839         position: relative;
 840 }
 841
 842 .imgedit-settings p {
 843         margin: 8px 0 0;
 844 }
 845
 846 .describe .imgedit-wrap .imgedit-settings {
 847         padding: 0 5px;
 848 }
 849
 850 .wp_attachment_holder div.updated {
 851         margin-top: 0;
 852 }
 853
 854 .wp_attachment_holder .imgedit-wrap > div {
 855         height: auto;
 856         overflow: hidden;
 857 }
 858
 859 .wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
 860         padding-left: 16px;
 861         width: auto;
 862         overflow: hidden;
 863 }
 864
 865 .wp_attachment_holder .imgedit-wrap .imgedit-settings {
 866         float: left;
 867         width: 250px;
 868 }
 869
 870 .imgedit-settings input {
 871         margin-top: 0;
 872         vertical-align: middle;
 873 }
 874
 875 .imgedit-wait {
 876         position: absolute;
 877         top: 0;
 878         background: #fff url(../images/spinner.gif) no-repeat center;
 879         -webkit-background-size: 20px 20px;
 880         background-size: 20px 20px;
 881         opacity: 0.7;
 882         filter: alpha(opacity=70);
 883         width: 100%;
 884         height: 500px;
 885         display: none;
 886 }
 887
 888 .no-float {
 889         float: none;
 890 }
 891
 892 .media-disabled,
 893 .imgedit-settings .disabled {
 894         color: grey;
 895 }
 896
 897 .wp_attachment_image,
 898 .A1B1 {
 899         overflow: hidden;
 900 }
 901
 902 .wp_attachment_image .button,
 903 .A1B1 .button {
 904         float: right;
 905 }
 906
 907 .no-js .wp_attachment_image .button {
 908         display: none;
 909 }
 910
 911 .wp_attachment_image .spinner,
 912 .A1B1 .spinner {
 913         float: right;
 914         padding: 0 0 4px 0;
 915         vertical-align: bottom;
 916 }
 917
 918 .imgedit-menu {
 919         margin: 0 0 12px;
 920         min-width: 300px;
 921 }
 922
 923 .imgedit-menu div {
 924         float: right;
 925         width: 32px;
 926         border: 1px solid #d5d5d5;
 927         background: #f1f1f1;
 928         margin: 0 0 0 8px;
 929         height: 32px;
 930         -webkit-font-smoothing: antialiased;
 931         -moz-osx-font-smoothing: grayscale;
 932         text-align: center;
 933         line-height: 28px;
 934         color: #777;
 935         cursor: pointer;
 936 }
 937
 938 .imgedit-menu div:before {
 939         font: normal 20px/1 'dashicons';
 940         speak: none;
 941         vertical-align: middle;
 942 }
 943
 944 .imgedit-menu div:hover {
 945         border-color: #c1c1c1;
 946         background-color: #eaeaea;
 947         color: #333;
 948 }
 949
 950 .imgedit-menu div.disabled {
 951         border-color: #ccc;
 952         background-color: #ddd;
 953         color: #777;
 954         filter: alpha(opacity=50);
 955         opacity: 0.5;
 956         cursor: default;
 957 }
 958
 959 .imgedit-crop:before {
 960         content:'\f165';
 961 }
 962
 963 .imgedit-rleft:before {
 964         content:'\f166';
 965 }
 966
 967 .imgedit-rright:before {
 968         content:'\f167';
 969 }
 970
 971 .imgedit-flipv:before {
 972         content:'\f168';
 973 }
 974
 975 .imgedit-fliph:before {
 976         content:'\f169';
 977 }
 978
 979 .imgedit-undo:before {
 980         content:'\f171';
 981 }
 982
 983 .imgedit-redo:before {
 984         content:'\f172';
 985 }
 986
 987 .imgedit-crop-wrap {
 988         position: relative;
 989 }
 990
 991 .imgedit-crop {
 992         margin: 0 0 0 8px;
 993 }
 994
 995 .imgedit-rleft {
 996         margin: 0 3px;
 997 }
 998
 999 .imgedit-rright {
1000         margin: 0 3px 0 8px;
1001 }
1002
1003 .imgedit-flipv {
1004         margin: 0 3px;
1005 }
1006
1007 .imgedit-fliph {
1008         margin: 0 3px 0 8px;
1009 }
1010
1011 .imgedit-undo {
1012         margin: 0 3px;
1013 }
1014
1015 .imgedit-redo {
1016         margin: 0 3px 0 8px;
1017 }
1018
1019 .imgedit-applyto img {
1020         margin: 0 0 0 8px;
1021 }
1022
1023 .imgedit-group-top {
1024         margin: 5px 0;
1025 }
1026
1027 #poststuff .imgedit-group-top h3 {
1028         padding: 0;
1029 }
1030
1031 .imgedit-group-top h3 a {
1032         text-decoration: none;
1033 }
1034
1035 .imgedit-applyto .imgedit-label {
1036         padding: 2px 0 0;
1037         display: block;
1038 }
1039
1040 .imgedit-help {
1041         display: none;
1042         font-style: italic;
1043 }
1044
1045 a.imgedit-help-toggle {
1046         text-decoration: none;
1047 }
1048
1049 .form-table td.imgedit-response {
1050         padding: 0;
1051 }
1052
1053 .imgedit-submit {
1054         margin: 8px 0;
1055 }
1056
1057 .imgedit-submit-btn {
1058         margin-right: 20px;
1059 }
1060
1061 .imgedit-wrap .nowrap {
1062         white-space: nowrap;
1063 }
1064
1065 span.imgedit-scale-warn {
1066         color: red;
1067         font-size: 20px;
1068         font-style: normal;
1069         visibility: hidden;
1070         vertical-align: middle;
1071 }
1072
1073 .imgedit-group {
1074         margin-bottom: 8px;
1075         padding: 2px 10px;
1076 }
1077
1078 audio, video {
1079         display: inline-block;
1080         max-width: 100%;
1081 }
1082
1083 .mejs-container {
1084         width: 100%;
1085         max-width: 100%;
1086 }
1087
1088 /* =Media Queries
1089 -------------------------------------------------------------- */
1090
1091 /**
1092  * HiDPI Displays
1093  */
1094 @media print,
1095   (-o-min-device-pixel-ratio: 5/4),
1096   (-webkit-min-device-pixel-ratio: 1.25),
1097   (min-resolution: 120dpi) {
1098         .imgedit-wait {
1099                 background-image: url(../images/spinner-2x.gif);
1100         }
1101 }
1102
1103 @media screen and ( max-width: 782px ) {
1104         .wp_attachment_details label[for="content"] {
1105                 font-size: 14px;
1106                 line-height: 1.5em;
1107         }
1108
1109         .media-upload-form .media-item.error,
1110         .media-upload-form .media-item .error {
1111                 font-size: 13px;
1112                 line-height: 1.5;
1113         }
1114
1115         .media-upload-form .media-item.error {
1116                 padding: 1px 10px;
1117         }
1118
1119         .media-upload-form .media-item .error {
1120                 padding: 10px 12px 10px 0;
1121         }
1122 }
1123
1124 /**
1125  * Media queries for media grid.
1126  */
1127
1128 @media only screen and (max-width: 1120px) {
1129         /* override for media-views.css */
1130         #wp-media-grid .wp-filter .attachment-filters {
1131                 max-width: 100%;
1132         }
1133 }
1134
1135 @media only screen and ( max-width: 782px ) {
1136         .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
1137                 top: 46px;
1138                 left: 10px;
1139         }
1140 }
1141
1142 @media only screen and (max-width: 600px) {
1143         .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
1144                 top: 0;
1145         }
1146 }
1147
1148 @media only screen and (max-width: 480px) {
1149         .edit-attachment-frame .media-frame-title {
1150                 left: 110px;
1151         }
1152
1153         .upload-php .media-modal-close,
1154         .edit-attachment-frame .edit-media-header .left,
1155         .edit-attachment-frame .edit-media-header .right {
1156                 width: 40px;
1157                 height: 40px;
1158         }
1159
1160         .upload-php .media-modal-close .media-modal-icon {
1161                 margin: 9px 10px;
1162         }
1163
1164         .edit-attachment-frame .edit-media-header .right:before,
1165         .edit-attachment-frame .edit-media-header .left:before {
1166                 line-height: 40px !important;
1167         }
1168
1169         .edit-attachment-frame .edit-media-header .left {
1170                 left: 82px;
1171         }
1172
1173         .edit-attachment-frame .edit-media-header .right {
1174                 left: 41px;
1175         }
1176
1177         .edit-attachment-frame .media-frame-content {
1178                 top: 40px;
1179         }
1180
1181         .edit-attachment-frame .attachment-media-view {
1182                 float: none;
1183                 height: auto;
1184                 width: 100%;
1185         }
1186
1187         .edit-attachment-frame .attachment-info {
1188                 height: auto;
1189                 width: 100%;
1190         }
1191 }
1192
1193 @media only screen and (max-width: 640px), screen and (max-height: 400px) {
1194         .upload-php .mode-grid .media-sidebar{
1195                 max-width: 100%;
1196         }
1197 }