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