[Summary view] [Print] [Text view]

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