[Summary view] [Print] [Text view]

   1  /*------------------------------------------------------------------------------
   2    14.0 - Media Screen
   3  ------------------------------------------------------------------------------*/
   4  
   5  .media-item .describe {
   6      border-collapse: collapse;
   7      width: 100%;
   8      border-top: 1px solid #dcdcde;
   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  .media-list-subtitle {
  55      display: block;
  56  }
  57  
  58  .media-list-title {
  59      display: block;
  60  }
  61  
  62  #wpbody-content #async-upload-wrap a {
  63      display: none;
  64  }
  65  
  66  .media-upload-form {
  67      margin-top: 20px;
  68  }
  69  
  70  .media-upload-form td label {
  71      margin-right: 6px;
  72      margin-left: 2px;
  73  }
  74  
  75  .media-upload-form .align .field label {
  76      display: inline;
  77      padding: 0 0 0 23px;
  78      margin: 0 1em 0 3px;
  79      font-weight: 600;
  80  }
  81  
  82  .media-upload-form tr.image-size label {
  83      margin: 0 0 0 5px;
  84      font-weight: 600;
  85  }
  86  
  87  .media-upload-form th.label label {
  88      font-weight: 600;
  89      margin: 0.5em;
  90      font-size: 13px;
  91  }
  92  
  93  .media-upload-form th.label label span {
  94      padding: 0 5px;
  95  }
  96  
  97  .media-item .describe input[type="text"],
  98  .media-item .describe textarea {
  99      width: 460px;
 100  }
 101  
 102  .media-item .describe p.help {
 103      margin: 0;
 104      padding: 0 0 0 5px;
 105  }
 106  
 107  .describe-toggle-on,
 108  .describe-toggle-off {
 109      display: block;
 110      line-height: 2.76923076;
 111      float: right;
 112      margin-right: 10px;
 113  }
 114  
 115  .media-item .attachment-tools {
 116      display: flex;
 117      align-items: center;
 118  }
 119  
 120  .media-item .edit-attachment {
 121      padding: 14px 0;
 122      display: block;
 123      margin-right: 10px;
 124  }
 125  
 126  .media-item .edit-attachment.copy-to-clipboard-container {
 127      display: flex;
 128      margin-top: 0;
 129  }
 130  
 131  .media-item-copy-container .success {
 132      line-height: 0;
 133  }
 134  
 135  .media-item button .copy-attachment-url {
 136      margin-top: 14px;
 137  }
 138  
 139  .media-item .copy-to-clipboard-container {
 140      margin-top: 7px;
 141  }
 142  
 143  .media-item .describe-toggle-off,
 144  .media-item.open .describe-toggle-on {
 145      display: none;
 146  }
 147  
 148  .media-item.open .describe-toggle-off {
 149      display: block;
 150  }
 151  
 152  .media-upload-form .media-item {
 153      min-height: 70px;
 154      margin-bottom: 1px;
 155      position: relative;
 156      width: 100%;
 157      background: #fff;
 158  }
 159  
 160  .media-upload-form .media-item,
 161  .media-upload-form .media-item .error {
 162      box-shadow: 0 1px 0 #dcdcde;
 163  }
 164  
 165  #media-items:empty {
 166      border: 0 none;
 167  }
 168  
 169  .media-item .filename {
 170      padding: 14px 0;
 171      overflow: hidden;
 172      margin-left: 6px;
 173  }
 174  
 175  .media-item .pinkynail {
 176      float: left;
 177      margin: 0 10px 0 0;
 178      max-height: 70px;
 179      max-width: 70px;
 180  }
 181  
 182  .media-item .startopen,
 183  .media-item .startclosed {
 184      display: none;
 185  }
 186  
 187  .media-item .progress {
 188      display: inline-block;
 189      height: 22px;
 190      margin: 0 6px 7px;
 191      width: 200px;
 192      line-height: 2em;
 193      padding: 0;
 194      overflow: hidden;
 195      border-radius: 22px;
 196      background: #dcdcde;
 197      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 198  }
 199  
 200  .media-item .bar {
 201      z-index: 9;
 202      width: 0;
 203      height: 100%;
 204      margin-top: -22px;
 205      border-radius: 22px;
 206      background-color: #2271b1;
 207      box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
 208  }
 209  
 210  .media-item .progress .percent {
 211      z-index: 10;
 212      position: relative;
 213      width: 200px;
 214      padding: 0;
 215      color: #fff;
 216      text-align: center;
 217      line-height: 22px;
 218      font-weight: 400;
 219      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 220  }
 221  
 222  .upload-php .fixed .column-parent {
 223      width: 15%;
 224  }
 225  
 226  .js .html-uploader #plupload-upload-ui {
 227      display: none;
 228  }
 229  
 230  .js .html-uploader #html-upload-ui {
 231      display: block;
 232  }
 233  
 234  #html-upload-ui #async-upload {
 235      font-size: 1em;
 236  }
 237  
 238  .media-upload-form .media-item.error,
 239  .media-upload-form .media-item .error {
 240      width: auto;
 241      margin: 0 0 1px;
 242  }
 243  
 244  .media-upload-form .media-item .error {
 245      padding: 10px 0 10px 14px;
 246      min-height: 50px;
 247  }
 248  
 249  .media-item .error-div button.dismiss {
 250      float: right;
 251      margin: 0 10px 0 15px;
 252  }
 253  
 254  /*------------------------------------------------------------------------------
 255    14.1 - Media Library
 256  ------------------------------------------------------------------------------*/
 257  
 258  .find-box {
 259      background-color: #fff;
 260      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
 261      width: 600px;
 262      overflow: hidden;
 263      margin-left: -300px;
 264      position: fixed;
 265      top: 30px;
 266      bottom: 30px;
 267      left: 50%;
 268      z-index: 100105;
 269  }
 270  
 271  .find-box-head {
 272      background: #fff;
 273      border-bottom: 1px solid #dcdcde;
 274      height: 36px;
 275      font-size: 18px;
 276      font-weight: 600;
 277      line-height: 2;
 278      padding: 0 36px 0 16px;
 279      position: absolute;
 280      top: 0;
 281      left: 0;
 282      right: 0;
 283  }
 284  
 285  .find-box-inside {
 286      overflow: auto;
 287      padding: 16px;
 288      background-color: #fff;
 289      position: absolute;
 290      top: 37px;
 291      bottom: 45px;
 292      overflow-y: scroll;
 293      width: 100%;
 294      box-sizing: border-box;
 295  }
 296  
 297  .find-box-search {
 298      padding-bottom: 16px;
 299  }
 300  
 301  .find-box-search .spinner {
 302      float: none;
 303      left: 105px;
 304      position: absolute;
 305  }
 306  
 307  .find-box-search,
 308  #find-posts-response {
 309      position: relative; /* RTL fix, #WP28010 */
 310  }
 311  
 312  #find-posts-input,
 313  #find-posts-search {
 314      float: left;
 315  }
 316  
 317  #find-posts-input {
 318      width: 140px;
 319      height: 28px;
 320      margin: 0 4px 0 0;
 321  }
 322  
 323  .widefat .found-radio {
 324      padding-right: 0;
 325      width: 16px;
 326  }
 327  
 328  #find-posts-close {
 329      width: 36px;
 330      height: 36px;
 331      border: none;
 332      padding: 0;
 333      position: absolute;
 334      top: 0;
 335      right: 0;
 336      cursor: pointer;
 337      text-align: center;
 338      background: none;
 339      color: #646970;
 340  }
 341  
 342  #find-posts-close:hover,
 343  #find-posts-close:focus {
 344      color: #135e96;
 345  }
 346  
 347  #find-posts-close:focus {
 348      box-shadow: 0 0 0 2px #2271b1;
 349      /* Only visible in Windows High Contrast mode */
 350      outline: 2px solid transparent;
 351      outline-offset: -2px;
 352  }
 353  
 354  #find-posts-close:before {
 355      font: normal 20px/36px dashicons;
 356      vertical-align: top;
 357      speak: never;
 358      -webkit-font-smoothing: antialiased;
 359      -moz-osx-font-smoothing: grayscale;
 360      content: "\f158";
 361  }
 362  
 363  .find-box-buttons {
 364      padding: 8px 16px;
 365      background: #fff;
 366      border-top: 1px solid #dcdcde;
 367      position: absolute;
 368      bottom: 0;
 369      left: 0;
 370      right: 0;
 371  }
 372  
 373  @media screen and (max-width: 782px) {
 374      .find-box-inside {
 375          bottom: 57px;
 376      }
 377  }
 378  
 379  @media screen and (max-width: 660px) {
 380  
 381      .find-box {
 382          top: 0;
 383          bottom: 0;
 384          left: 0;
 385          right: 0;
 386          margin: 0;
 387          width: 100%;
 388      }
 389  
 390  }
 391  
 392  .ui-find-overlay {
 393      position: fixed;
 394      top: 0;
 395      left: 0;
 396      right: 0;
 397      bottom: 0;
 398      background: #000;
 399      opacity: 0.7;
 400      filter: alpha(opacity=70);
 401      z-index: 100100;
 402  }
 403  
 404  .drag-drop #drag-drop-area {
 405      border: 4px dashed #c3c4c7;
 406      height: 200px;
 407  }
 408  
 409  .drag-drop .drag-drop-inside {
 410      margin: 60px auto 0;
 411      width: 250px;
 412  }
 413  
 414  .drag-drop-inside p {
 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: #9ec2e6;
 440  }
 441  
 442  #plupload-upload-ui {
 443      position: relative;
 444  }
 445  
 446  .post-type-attachment .wp-filter select {
 447      margin: 0 6px 0 0;
 448  }
 449  
 450  /**
 451   * Media Library grid view
 452   */
 453  
 454  .media-frame.mode-grid,
 455  .media-frame.mode-grid .media-frame-content,
 456  .media-frame.mode-grid .attachments-browser:not(.has-load-more) .attachments,
 457  .media-frame.mode-grid .attachments-browser.has-load-more .attachments-wrapper,
 458  .media-frame.mode-grid .uploader-inline-content {
 459      position: static;
 460  }
 461  
 462  /* Regions we don't use at all */
 463  .media-frame.mode-grid .media-frame-title,
 464  .media-frame.mode-grid .media-frame-router,
 465  .media-frame.mode-grid .media-frame-menu {
 466      display: none;
 467  }
 468  
 469  .media-frame.mode-grid .media-frame-content {
 470      background-color: transparent;
 471      border: none;
 472  }
 473  
 474  .upload-php .mode-grid .media-sidebar {
 475      position: relative;
 476      width: auto;
 477      margin-top: 12px;
 478      padding: 0 16px;
 479      border-left: 4px solid #d63638;
 480      box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
 481      background-color: #fff;
 482  }
 483  
 484  .upload-php .mode-grid .hide-sidebar .media-sidebar {
 485      display: none;
 486  }
 487  
 488  .upload-php .mode-grid .media-sidebar .media-uploader-status {
 489      border-bottom: none;
 490      padding-bottom: 0;
 491      max-width: 100%;
 492  }
 493  
 494  .upload-php .mode-grid .media-sidebar .upload-error {
 495      margin: 12px 0;
 496      padding: 4px 0 0;
 497      border: none;
 498      box-shadow: none;
 499      background: none;
 500  }
 501  
 502  .upload-php .mode-grid .media-sidebar .media-uploader-status.errors h2 {
 503      display: none;
 504  }
 505  
 506  .media-frame.mode-grid .uploader-inline {
 507      position: relative;
 508      top: auto;
 509      right: auto;
 510      left: auto;
 511      bottom: auto;
 512      padding-top: 0;
 513      margin-top: 20px;
 514      border: 4px dashed #c3c4c7;
 515  }
 516  
 517  .media-frame.mode-select .attachments-browser.fixed:not(.has-load-more) .attachments,
 518  .media-frame.mode-select .attachments-browser.has-load-more.fixed .attachments-wrapper {
 519      position: relative;
 520      top: 94px; /* prevent jumping up when the toolbar becomes fixed */
 521      padding-bottom: 94px; /* offset for above so the bottom doesn't get cut off */
 522  }
 523  
 524  .media-frame.mode-grid .attachment:focus,
 525  .media-frame.mode-grid .selected.attachment:focus,
 526  .media-frame.mode-grid .attachment.details:focus {
 527      box-shadow: inset 0 0 0 2px #2271b1;
 528      /* Only visible in Windows High Contrast mode */
 529      outline: 2px solid transparent;
 530      outline-offset: -6px;
 531  }
 532  
 533  .media-frame.mode-grid .selected.attachment {
 534      box-shadow:
 535          inset 0 0 0 5px #f0f0f1,
 536          inset 0 0 0 7px #c3c4c7;
 537  }
 538  
 539  .media-frame.mode-grid .attachment.details {
 540      box-shadow:
 541          inset 0 0 0 3px #f0f0f1,
 542          inset 0 0 0 7px #4f94d4;
 543  }
 544  
 545  .media-frame.mode-grid.mode-select .attachment .thumbnail {
 546      opacity: 0.65;
 547  }
 548  
 549  .media-frame.mode-select .attachment.selected .thumbnail {
 550      opacity: 1;
 551  }
 552  
 553  .media-frame.mode-grid .media-toolbar {
 554      margin-bottom: 15px;
 555      height: auto;
 556  }
 557  
 558  .media-frame.mode-grid .media-toolbar select {
 559      margin: 0 10px 0 0;
 560  }
 561  
 562  .media-frame.mode-grid.mode-edit .media-toolbar-secondary > .select-mode-toggle-button {
 563      margin: 0 8px 0 0;
 564      vertical-align: middle;
 565  }
 566  
 567  .media-frame.mode-grid .attachments-browser .bulk-select {
 568      display: inline-block;
 569      margin: 0 10px 0 0;
 570  }
 571  
 572  .media-frame.mode-grid .search {
 573      margin-top: 0;
 574  }
 575  
 576  .media-frame-content .media-search-input-label {
 577      vertical-align: baseline;
 578  }
 579  
 580  .attachments-browser .media-toolbar-secondary > .media-button {
 581      margin-right: 10px;
 582  }
 583  
 584  .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
 585      position: fixed;
 586      top: 32px;
 587      left: auto;
 588      right: 20px;
 589      margin-top: 0;
 590  }
 591  
 592  .media-frame.mode-grid .attachments-browser {
 593      padding: 0;
 594  }
 595  
 596  .media-frame.mode-grid .attachments-browser .attachments {
 597      padding: 2px;
 598  }
 599  
 600  .media-frame.mode-grid .attachments-browser .no-media {
 601      color: #646970; /* same as no plugins and no themes */
 602      font-size: 18px;
 603      font-style: normal;
 604      margin: 0;
 605      padding: 100px 0 0;
 606      text-align: center;
 607  }
 608  
 609  /**
 610   * Attachment details modal
 611   */
 612  
 613  .edit-attachment-frame {
 614      display: block;
 615      height: 100%;
 616      width: 100%;
 617  }
 618  
 619  .edit-attachment-frame .edit-media-header {
 620      overflow: hidden;
 621  }
 622  
 623  .upload-php .media-modal-close .media-modal-icon:before {
 624      content: "\f335";
 625      font-size: 22px;
 626  }
 627  
 628  .upload-php .media-modal-close,
 629  .edit-attachment-frame .edit-media-header .left,
 630  .edit-attachment-frame .edit-media-header .right {
 631      cursor: pointer;
 632      color: #787c82;
 633      background-color: transparent;
 634      height: 50px;
 635      width: 50px;
 636      padding: 0;
 637      position: absolute;
 638      text-align: center;
 639      border: 0;
 640      border-left: 1px solid #dcdcde;
 641      transition: color .1s ease-in-out, background .1s ease-in-out;
 642  }
 643  
 644  .upload-php .media-modal-close {
 645      top: 0;
 646      right: 0;
 647  }
 648  
 649  .edit-attachment-frame .edit-media-header .left {
 650      right: 102px;
 651  }
 652  
 653  .edit-attachment-frame .edit-media-header .right {
 654      right: 51px;
 655  }
 656  
 657  .edit-attachment-frame .media-frame-title {
 658      left: 0;
 659      right: 150px; /* leave space for prev/next/close */
 660  }
 661  
 662  .edit-attachment-frame .edit-media-header .right:before,
 663  .edit-attachment-frame .edit-media-header .left:before {
 664      font: normal 20px/50px dashicons !important;
 665      display: inline;
 666      font-weight: 300;
 667  }
 668  
 669  .upload-php .media-modal-close:hover,
 670  .upload-php .media-modal-close:focus,
 671  .edit-attachment-frame .edit-media-header .left:hover,
 672  .edit-attachment-frame .edit-media-header .right:hover,
 673  .edit-attachment-frame .edit-media-header .left:focus,
 674  .edit-attachment-frame .edit-media-header .right:focus {
 675      background: #dcdcde;
 676      border-color: #c3c4c7;
 677      color: #000;
 678      outline: none;
 679      box-shadow: none;
 680  }
 681  
 682  .upload-php .media-modal-close:focus,
 683  .edit-attachment-frame .edit-media-header .left:focus,
 684  .edit-attachment-frame .edit-media-header .right:focus {
 685      /* Only visible in Windows High Contrast mode */
 686      outline: 2px solid transparent;
 687      outline-offset: -2px;
 688  }
 689  
 690  .upload-php .media-modal-close:focus .media-modal-icon:before,
 691  .upload-php .media-modal-close:hover .media-modal-icon:before {
 692      color: #000;
 693  }
 694  
 695  .edit-attachment-frame .edit-media-header .left:before {
 696      content: "\f341";
 697  }
 698  
 699  .edit-attachment-frame .edit-media-header .right:before {
 700      content: "\f345";
 701  }
 702  
 703  .edit-attachment-frame .edit-media-header [disabled],
 704  .edit-attachment-frame .edit-media-header [disabled]:hover {
 705      color: #c3c4c7;
 706      background: inherit;
 707      cursor: default;
 708  }
 709  
 710  .edit-attachment-frame .media-frame-content,
 711  .edit-attachment-frame .media-frame-router {
 712      left: 0;
 713  }
 714  
 715  .edit-attachment-frame .media-frame-content {
 716      border-bottom: none;
 717      bottom: 0;
 718      top: 50px;
 719  }
 720  
 721  .edit-attachment-frame .attachment-details {
 722      position: absolute;
 723      overflow: auto;
 724      top: 0;
 725      bottom: 0;
 726      right: 0;
 727      left: 0;
 728      box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, 0.1);
 729  }
 730  
 731  .edit-attachment-frame .attachment-media-view {
 732      float: left;
 733      width: 65%;
 734      height: 100%;
 735  }
 736  
 737  .edit-attachment-frame .attachment-media-view .thumbnail {
 738      box-sizing: border-box;
 739      padding: 16px;
 740      height: 100%;
 741  }
 742  
 743  .edit-attachment-frame .attachment-media-view .details-image {
 744      display: block;
 745      margin: 0 auto 16px;
 746      max-width: 100%;
 747      max-height: 90%;
 748      max-height: calc( 100% - 42px ); /* leave space for actions underneath */
 749      background-image: linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7);
 750      background-position: 0 0, 10px 10px;
 751      background-size: 20px 20px;
 752  }
 753  
 754  .edit-attachment-frame .attachment-media-view .details-image.icon {
 755      background: none;
 756  }
 757  
 758  .edit-attachment-frame .attachment-media-view .attachment-actions {
 759      text-align: center;
 760  }
 761  
 762  .edit-attachment-frame .wp-media-wrapper {
 763      margin-bottom: 12px;
 764  }
 765  
 766  .edit-attachment-frame input,
 767  .edit-attachment-frame textarea {
 768      padding: 4px 8px;
 769      line-height: 1.42857143;
 770  }
 771  
 772  .edit-attachment-frame .attachment-info {
 773      overflow: auto;
 774      box-sizing: border-box;
 775      margin-bottom: 0;
 776      padding: 12px 16px 0;
 777      width: 35%;
 778      height: 100%;
 779      box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, 0.1);
 780      border-bottom: 0;
 781      border-left: 1px solid #dcdcde;
 782      background: #f6f7f7;
 783  }
 784  
 785  .edit-attachment-frame .attachment-info .details,
 786  .edit-attachment-frame .attachment-info .settings {
 787      position: relative; /* RTL fix, #WP29352 */
 788      overflow: hidden;
 789      float: none;
 790      margin-bottom: 15px;
 791      padding-bottom: 15px;
 792      border-bottom: 1px solid #dcdcde;
 793  }
 794  
 795  .edit-attachment-frame .attachment-info .filename {
 796      font-weight: 400;
 797      color: #646970;
 798  }
 799  
 800  .edit-attachment-frame .attachment-info .thumbnail {
 801      margin-bottom: 12px;
 802  }
 803  
 804  .attachment-info .actions {
 805      margin-bottom: 16px;
 806  }
 807  
 808  .attachment-info .actions a {
 809      display: inline;
 810      text-decoration: none;
 811  }
 812  
 813  .copy-to-clipboard-container {
 814      display: flex;
 815      align-items: center;
 816      margin-top: 8px;
 817      clear: both;
 818  }
 819  
 820  .copy-to-clipboard-container .copy-attachment-url {
 821      white-space: normal;
 822  }
 823  
 824  .copy-to-clipboard-container .success {
 825      color: #007017;
 826      margin-left: 8px;
 827  }
 828  
 829  /*------------------------------------------------------------------------------
 830    14.2 - Image Editor
 831  ------------------------------------------------------------------------------*/
 832  .wp_attachment_details .attachment-alt-text {
 833      margin-bottom: 5px;
 834  }
 835  
 836  .wp_attachment_details #attachment_alt {
 837      max-width: 500px;
 838      height: 3.28571428em;
 839  }
 840  
 841  .wp_attachment_details .attachment-alt-text-description {
 842      margin-top: 5px;
 843  }
 844  
 845  .wp_attachment_details label[for="content"] {
 846      font-size: 13px;
 847      line-height: 1.5;
 848      margin: 1em 0;
 849  }
 850  
 851  .wp_attachment_details #attachment_caption {
 852      height: 4em;
 853  }
 854  
 855  .describe .image-editor {
 856      vertical-align: top;
 857  }
 858  
 859  .imgedit-wrap {
 860      position: relative;
 861      padding-top: 10px;
 862  }
 863  
 864  .image-editor p,
 865  .image-editor fieldset {
 866      margin: 8px 0;
 867  }
 868  
 869  .image-editor legend {
 870      margin-bottom: 5px;
 871  }
 872  
 873  .describe .imgedit-wrap .image-editor {
 874      padding: 0 5px;
 875  }
 876  
 877  .wp_attachment_holder div.updated {
 878      margin-top: 0;
 879  }
 880  
 881  .wp_attachment_holder .imgedit-wrap > div {
 882      height: auto;
 883  }
 884  
 885  .imgedit-panel-content {
 886      display: flex;
 887      flex-wrap: wrap;
 888      gap: 20px;
 889      margin-bottom: 20px;
 890  }
 891  
 892  .imgedit-settings {
 893      max-width: 240px; /* Prevent reflow when help info is expanded. */
 894  }
 895  
 896  .imgedit-group-controls > * {
 897      display: none;
 898  }
 899  
 900  .imgedit-panel-active .imgedit-group-controls > * {
 901      display: block;
 902  }
 903  
 904  .wp_attachment_holder .imgedit-wrap .image-editor {
 905      float: right;
 906      width: 250px;
 907  }
 908  
 909  .image-editor input {
 910      margin-top: 0;
 911      vertical-align: middle;
 912  }
 913  
 914  .imgedit-wait {
 915      position: absolute;
 916      top: 0;
 917      bottom: 0;
 918      width: 100%;
 919      background: #fff;
 920      opacity: 0.7;
 921      filter: alpha(opacity=70);
 922      display: none;
 923  }
 924  
 925  .imgedit-wait:before {
 926      content: "";
 927      display: block;
 928      width: 20px;
 929      height: 20px;
 930      position: absolute;
 931      left: 50%;
 932      top: 50%;
 933      margin: -10px 0 0 -10px;
 934      background: transparent url(../images/spinner.gif) no-repeat center;
 935      background-size: 20px 20px;
 936      transform: translateZ(0);
 937  }
 938  
 939  .no-float {
 940      float: none;
 941  }
 942  
 943  .media-disabled,
 944  .image-editor .disabled {
 945      /* WCAG 1.4.3 Text or images of text that are part of an inactive user
 946         interface component ... have no contrast requirement. */
 947      color: #a7aaad;
 948  }
 949  
 950  .A1B1 {
 951      overflow: hidden;
 952  }
 953  
 954  .wp_attachment_image .button,
 955  .A1B1 .button {
 956      float: left;
 957  }
 958  
 959  .no-js .wp_attachment_image .button {
 960      display: none;
 961  }
 962  
 963  .wp_attachment_image .spinner,
 964  .A1B1 .spinner {
 965      float: left;
 966  }
 967  
 968  .imgedit-menu .note-no-rotate {
 969      clear: both;
 970      margin: 0;
 971      padding: 1em 0 0;
 972  }
 973  
 974  .image-editor .imgedit-menu .button {
 975      display: inline-block;
 976      width: auto;
 977      min-height: 28px;
 978      font-size: 13px;
 979      line-height: 2;
 980      padding: 0 10px;
 981  }
 982  
 983  .imgedit-menu .button:after,
 984  .imgedit-menu .button:before {
 985      font: normal 16px/1 dashicons;
 986      margin-right: 8px;
 987      speak: never;
 988      vertical-align: middle;
 989      position: relative;
 990      top: -2px;
 991      -webkit-font-smoothing: antialiased;
 992      -moz-osx-font-smoothing: grayscale;
 993  }
 994  
 995  .imgedit-menu .imgedit-rotate.button:after {
 996      content: '\f140';
 997      margin-left: 2px;
 998      margin-right: 0;
 999  }
1000  
1001  .imgedit-menu .imgedit-rotate.button[aria-expanded="true"]:after {
1002      content: '\f142';
1003  }
1004  
1005  .imgedit-menu .button.disabled {
1006      color: #a7aaad;
1007      border-color: #dcdcde;
1008      background: #f6f7f7;
1009      box-shadow: none;
1010      text-shadow: 0 1px 0 #fff;
1011      cursor: default;
1012      transform: none;
1013  }
1014  
1015  .imgedit-crop:before {
1016      content: "\f165";
1017  }
1018  
1019  .imgedit-scale:before {
1020      content: "\f211";
1021  }
1022  
1023  .imgedit-rotate:before {
1024      content: "\f167";
1025  }
1026  
1027  .imgedit-undo:before {
1028      content: "\f171";
1029  }
1030  
1031  .imgedit-redo:before {
1032      content: "\f172";
1033  }
1034  
1035  .imgedit-crop-wrap {
1036      position: relative;
1037  }
1038  
1039  .imgedit-crop-wrap img {
1040      background-image: linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7);
1041      background-position: 0 0, 10px 10px;
1042      background-size: 20px 20px;
1043  }
1044  
1045  .imgedit-crop-wrap {
1046      padding: 20px;
1047      background-image: linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7);
1048      background-position: 0 0, 10px 10px;
1049      background-size: 20px 20px;
1050  }
1051  
1052  
1053  .imgedit-crop {
1054      margin: 0 8px 0 0;
1055  }
1056  
1057  .imgedit-rotate {
1058      margin: 0 8px 0 3px;
1059  }
1060  
1061  .imgedit-undo {
1062      margin: 0 3px;
1063  }
1064  
1065  .imgedit-redo {
1066      margin: 0 8px 0 3px;
1067  }
1068  
1069  .imgedit-thumbnail-preview-group {
1070      display: flex;
1071      flex-wrap: wrap;
1072      column-gap: 10px;
1073  }
1074  
1075  .imgedit-thumbnail-preview {
1076      margin: 10px 8px 0 0;
1077  }
1078  
1079  .imgedit-thumbnail-preview-caption {
1080      display: block;
1081  }
1082  
1083  #poststuff .imgedit-group-top h2 {
1084      display: inline-block;
1085      margin: 0;
1086      padding: 0;
1087      font-size: 14px;
1088      line-height: 1.4;
1089  }
1090  
1091  #poststuff .imgedit-group-top .button-link {
1092      text-decoration: none;
1093      color: #1d2327;
1094  }
1095  
1096  .imgedit-applyto .imgedit-label {
1097      display: block;
1098      padding: .5em 0 0;
1099  }
1100  
1101  .imgedit-popup-menu,
1102  .imgedit-help {
1103      display: none;
1104      padding-bottom: 8px;
1105  }
1106  
1107  .imgedit-panel-tools > .imgedit-menu {
1108      display: flex;
1109      column-gap: 4px;
1110      align-items: flex-start;
1111      flex-wrap: wrap;
1112  }
1113  
1114  .imgedit-popup-menu {
1115      width: calc( 100% - 20px );
1116      position: absolute;
1117      background: #fff;
1118      padding: 10px;
1119      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
1120  }
1121  
1122  .image-editor .imgedit-menu .imgedit-popup-menu button {
1123      display: block;
1124      margin: 2px 0;
1125      width: 100%;
1126      white-space: break-spaces;
1127      line-height: 1.5;
1128      padding-top: 3px;
1129      padding-bottom: 2px;
1130  }
1131  
1132  .imgedit-rotate-menu-container {
1133      position: relative;
1134  }
1135  
1136  .imgedit-help.imgedit-restore {
1137      padding-bottom: 0;
1138  }
1139  
1140  /* higher specificity than buttons */
1141  .image-editor .imgedit-settings .imgedit-help-toggle,
1142  .image-editor .imgedit-settings .imgedit-help-toggle:hover,
1143  .image-editor .imgedit-settings .imgedit-help-toggle:active {
1144      border: 1px solid transparent;
1145      margin: -1px 0 0 -1px;
1146      padding: 0;
1147      background: transparent;
1148      color: #2271b1;
1149      font-size: 20px;
1150      line-height: 1;
1151      cursor: pointer;
1152      box-sizing: content-box;
1153      box-shadow: none;
1154  }
1155  
1156  .image-editor .imgedit-settings .imgedit-help-toggle:focus {
1157      color: #2271b1;
1158      border-color: #2271b1;
1159      box-shadow: 0 0 0 1px #2271b1;
1160      /* Only visible in Windows High Contrast mode */
1161      outline: 2px solid transparent;
1162  }
1163  
1164  .form-table td.imgedit-response {
1165      padding: 0;
1166  }
1167  
1168  .imgedit-submit-btn {
1169      margin-left: 20px;
1170  }
1171  
1172  .imgedit-wrap .nowrap {
1173      white-space: nowrap;
1174      font-size: 12px;
1175      line-height: inherit;
1176  }
1177  
1178  span.imgedit-scale-warn {
1179      display: flex;
1180      align-items: center;
1181      margin: 4px;
1182      gap: 4px;
1183      color: #b32d2e;
1184      font-style: normal;
1185      visibility: hidden;
1186      vertical-align: middle;
1187  }
1188  
1189  .imgedit-save-target {
1190      margin: 8px 0;
1191  }
1192  
1193  .imgedit-save-target legend {
1194      font-weight: 600;
1195  }
1196  
1197  .imgedit-group {
1198      margin-bottom: 20px;
1199  }
1200  
1201  .image-editor .imgedit-original-dimensions {
1202      display: inline-block;
1203  }
1204  
1205  .image-editor .imgedit-scale-controls input[type="text"],
1206  .image-editor .imgedit-crop-ratio input[type="text"],
1207  .image-editor .imgedit-crop-sel input[type="text"],
1208  .image-editor .imgedit-scale-controls input[type="number"],
1209  .image-editor .imgedit-crop-ratio input[type="number"],
1210  .image-editor .imgedit-crop-sel input[type="number"] {
1211      width: 80px;
1212      font-size: 14px;
1213      padding: 0 8px;
1214  }
1215  
1216  .imgedit-separator {
1217      display: inline-block;
1218      width: 7px;
1219      text-align: center;
1220      font-size: 13px;
1221      color: #3c434a;
1222  }
1223  
1224  .image-editor .imgedit-scale-button-wrapper {
1225      margin-top: 0.3077em;
1226      display: block;
1227  }
1228  
1229  .image-editor .imgedit-scale-controls .button {
1230      margin-bottom: 0;
1231  }
1232  
1233  audio, video {
1234      display: inline-block;
1235      max-width: 100%;
1236  }
1237  
1238  .wp-core-ui .mejs-container {
1239      width: 100%;
1240      max-width: 100%;
1241  }
1242  
1243  .wp-core-ui .mejs-container * {
1244      box-sizing: border-box;
1245  }
1246  
1247  .wp-core-ui .mejs-time {
1248      box-sizing: content-box;
1249  }
1250  
1251  /* =Media Queries
1252  -------------------------------------------------------------- */
1253  
1254  /**
1255   * HiDPI Displays
1256   */
1257  @media print,
1258    (min-resolution: 120dpi) {
1259      .imgedit-wait:before {
1260          background-image: url(../images/spinner-2x.gif);
1261      }
1262  }
1263  
1264  @media screen and (max-width: 782px) {
1265      .edit-attachment-frame input,
1266      .edit-attachment-frame textarea {
1267          line-height: 1.5;
1268      }
1269      
1270      .wp_attachment_details label[for="content"] {
1271          font-size: 14px;
1272          line-height: 1.5;
1273      }
1274  
1275      .wp_attachment_details textarea {
1276          line-height: 1.5;
1277      }
1278  
1279      .wp_attachment_details #attachment_alt {
1280          height: 3.375em;
1281      }
1282  
1283      .media-upload-form .media-item.error,
1284      .media-upload-form .media-item .error {
1285          font-size: 13px;
1286          line-height: 1.5;
1287      }
1288  
1289      .media-upload-form .media-item.error {
1290          padding: 1px 10px;
1291      }
1292  
1293      .media-upload-form .media-item .error {
1294          padding: 10px 0 10px 12px;
1295      }
1296  
1297      .image-editor .imgedit-scale input[type="text"],
1298      .image-editor .imgedit-crop-ratio input[type="text"],
1299      .image-editor .imgedit-crop-sel input[type="text"] {
1300          font-size: 16px;
1301          padding: 6px 10px;
1302      }
1303  
1304      .wp_attachment_holder .imgedit-wrap .imgedit-panel-content,
1305      .wp_attachment_holder .imgedit-wrap .image-editor {
1306          float: none;
1307          width: auto;
1308          max-width: none;
1309          padding-bottom: 16px;
1310      }
1311  
1312      .copy-to-clipboard-container .success {
1313          font-size: 14px;
1314      }
1315  
1316      /* Restructure image editor on narrow viewports. */
1317      .imgedit-crop-wrap img{
1318          width: 100%;
1319      }
1320  
1321      .media-modal .imgedit-wrap .imgedit-panel-content,
1322      .media-modal .imgedit-wrap .image-editor {
1323          position: initial !important;
1324      }
1325  
1326      .media-modal .imgedit-wrap .image-editor {
1327          box-sizing: border-box;
1328          width: 100% !important;
1329      }
1330  
1331      .image-editor .imgedit-scale-button-wrapper {
1332          display: inline-block;
1333      }
1334  }
1335  
1336  @media only screen and (max-width: 600px) {
1337      .media-item-wrapper {
1338          grid-template-columns: 1fr;
1339      }
1340  }
1341  
1342  /**
1343   * Media queries for media grid.
1344   */
1345  @media only screen and (max-width: 1120px) {
1346      /* override for media-views.css */
1347      #wp-media-grid .wp-filter .attachment-filters {
1348          max-width: 100%;
1349      }
1350  }
1351  
1352  @media only screen and (max-width: 1000px) {
1353      /* override for forms.css */
1354      .wp-filter p.search-box {
1355          float: none;
1356          width: 100%;
1357          margin-bottom: 20px;
1358          display: flex;
1359          flex-wrap: nowrap;
1360          column-gap: 0;
1361      }
1362  
1363      .wp-filter p.search-box #media-search-input {
1364          width: 100%;
1365      }
1366  
1367  }
1368  
1369  @media only screen and (max-width: 782px) {
1370      .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
1371          top: 46px;
1372          right: 10px;
1373      }
1374  }
1375  
1376  @media only screen and (max-width: 600px) {
1377      .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
1378          top: 0;
1379      }
1380  }
1381  
1382  @media only screen and (max-width: 480px) {
1383      .edit-attachment-frame .media-frame-title {
1384          right: 110px;
1385      }
1386  
1387      .upload-php .media-modal-close,
1388      .edit-attachment-frame .edit-media-header .left,
1389      .edit-attachment-frame .edit-media-header .right {
1390          width: 40px;
1391          height: 40px;
1392      }
1393  
1394      .edit-attachment-frame .edit-media-header .right:before,
1395      .edit-attachment-frame .edit-media-header .left:before {
1396          line-height: 40px !important;
1397      }
1398  
1399      .edit-attachment-frame .edit-media-header .left {
1400          right: 82px;
1401      }
1402  
1403      .edit-attachment-frame .edit-media-header .right {
1404          right: 41px;
1405      }
1406  
1407      .edit-attachment-frame .media-frame-content {
1408          top: 40px;
1409      }
1410  
1411      .edit-attachment-frame .attachment-media-view {
1412          float: none;
1413          height: auto;
1414          width: 100%;
1415      }
1416  
1417      .edit-attachment-frame .attachment-info {
1418          height: auto;
1419          width: 100%;
1420      }
1421  }
1422  
1423  @media only screen and (max-width: 640px), screen and (max-height: 400px) {
1424      .upload-php .mode-grid .media-sidebar{
1425          max-width: 100%;
1426      }
1427  }
1428  
1429  @media only screen and (max-width: 375px) {
1430      .media-item .attachment-tools {
1431          align-items: baseline;
1432      }
1433      .media-item .edit-attachment.copy-to-clipboard-container {
1434          flex-direction: column;
1435      }
1436  
1437      .copy-to-clipboard-container .success {
1438          line-height: normal;
1439          margin-top: 10px;
1440      }
1441  }