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