[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      /* Always visible also in Windows High Contrast mode */
 729      outline: 1px solid #c3c4c7;
 730      outline-offset: -1px;
 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 [aria-disabled="true"],
 749  .edit-attachment-frame .edit-media-header [aria-disabled="true"]:hover,
 750  .edit-attachment-frame .edit-media-header [aria-disabled="true"]:focus {
 751      color: #c3c4c7;
 752      background: inherit;
 753      cursor: default;
 754  }
 755  
 756  .edit-attachment-frame .media-frame-content,
 757  .edit-attachment-frame .media-frame-router {
 758      left: 0;
 759  }
 760  
 761  .edit-attachment-frame .media-frame-content {
 762      border-bottom: none;
 763      bottom: 0;
 764      top: 50px;
 765  }
 766  
 767  .edit-attachment-frame .attachment-details {
 768      position: absolute;
 769      overflow: auto;
 770      top: 0;
 771      bottom: 0;
 772      right: 0;
 773      left: 0;
 774      box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, 0.1);
 775  }
 776  
 777  .edit-attachment-frame .attachment-media-view {
 778      float: left;
 779      width: 65%;
 780      height: 100%;
 781  }
 782  
 783  .edit-attachment-frame .attachment-media-view .thumbnail {
 784      box-sizing: border-box;
 785      padding: 16px;
 786      height: 100%;
 787  }
 788  
 789  .edit-attachment-frame .attachment-media-view .details-image {
 790      display: block;
 791      margin: 0 auto 16px;
 792      max-width: 100%;
 793      max-height: 90%;
 794      max-height: calc(100% - 56px); /* leave space for actions underneath */
 795      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);
 796      background-position: 0 0, 10px 10px;
 797      background-size: 20px 20px;
 798  }
 799  
 800  .edit-attachment-frame .attachment-media-view .details-image.icon {
 801      background: none;
 802  }
 803  
 804  .edit-attachment-frame .attachment-media-view .attachment-actions {
 805      text-align: center;
 806  }
 807  
 808  .edit-attachment-frame .wp-media-wrapper {
 809      margin-bottom: 12px;
 810  }
 811  
 812  .edit-attachment-frame input,
 813  .edit-attachment-frame textarea {
 814      padding: 4px 8px;
 815      line-height: 1.42857143;
 816  }
 817  
 818  .edit-attachment-frame .attachment-info {
 819      overflow: auto;
 820      box-sizing: border-box;
 821      margin-bottom: 0;
 822      padding: 12px 16px 0;
 823      width: 35%;
 824      height: 100%;
 825      box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, 0.1);
 826      border-bottom: 0;
 827      border-left: 1px solid #dcdcde;
 828      background: #f6f7f7;
 829  }
 830  
 831  .edit-attachment-frame .attachment-info .details,
 832  .edit-attachment-frame .attachment-info .settings {
 833      position: relative; /* RTL fix, #WP29352 */
 834      overflow: hidden;
 835      float: none;
 836      margin-bottom: 15px;
 837      padding-bottom: 15px;
 838      border-bottom: 1px solid #dcdcde;
 839  }
 840  
 841  .edit-attachment-frame .attachment-info .filename {
 842      font-weight: 400;
 843      color: #646970;
 844  }
 845  
 846  .edit-attachment-frame .attachment-info .thumbnail {
 847      margin-bottom: 12px;
 848  }
 849  
 850  .attachment-info .actions {
 851      margin-bottom: 16px;
 852  }
 853  
 854  .attachment-info .actions a {
 855      display: inline;
 856      text-decoration: none;
 857  }
 858  
 859  .copy-to-clipboard-container {
 860      display: flex;
 861      align-items: center;
 862      margin-top: 8px;
 863      clear: both;
 864  }
 865  
 866  .copy-to-clipboard-container .copy-attachment-url {
 867      white-space: normal;
 868  }
 869  
 870  .copy-to-clipboard-container .success {
 871      color: #007017;
 872      margin-left: 8px;
 873  }
 874  
 875  /**
 876   * Image Editor
 877   */
 878  .wp_attachment_details .attachment-alt-text {
 879      margin-bottom: 5px;
 880  }
 881  
 882  .wp_attachment_details #attachment_alt {
 883      max-width: 500px;
 884      height: 3.28571428em;
 885  }
 886  
 887  .wp_attachment_details .attachment-alt-text-description {
 888      margin-top: 5px;
 889  }
 890  
 891  .wp_attachment_details label[for="content"] {
 892      font-size: 13px;
 893      line-height: 1.5;
 894      margin: 1em 0;
 895  }
 896  
 897  .wp_attachment_details #attachment_caption {
 898      height: 4em;
 899  }
 900  
 901  .describe .image-editor {
 902      vertical-align: top;
 903  }
 904  
 905  .imgedit-wrap {
 906      position: relative;
 907      padding-top: 10px;
 908  }
 909  
 910  .image-editor p,
 911  .image-editor fieldset {
 912      margin: 8px 0;
 913  }
 914  
 915  .image-editor legend {
 916      margin-bottom: 5px;
 917  }
 918  
 919  .describe .imgedit-wrap .image-editor {
 920      padding: 0 5px;
 921  }
 922  
 923  .wp_attachment_holder div.updated {
 924      margin-top: 0;
 925  }
 926  
 927  .wp_attachment_holder .imgedit-wrap > div {
 928      height: auto;
 929  }
 930  
 931  .imgedit-panel-content {
 932      display: flex;
 933      flex-wrap: wrap;
 934      gap: 20px;
 935      margin-bottom: 20px;
 936  }
 937  
 938  .imgedit-settings {
 939      max-width: 240px; /* Prevent reflow when help info is expanded. */
 940  }
 941  
 942  .imgedit-group-controls > * {
 943      display: none;
 944  }
 945  
 946  .imgedit-panel-active .imgedit-group-controls > * {
 947      display: block;
 948  }
 949  
 950  .imgedit-panel-active .imgedit-group-controls > .imgedit-crop-apply {
 951      display: flex;
 952  }
 953  
 954  .imgedit-crop-apply {
 955      gap: 4px;
 956      flex-wrap: wrap;
 957  }
 958  
 959  .wp_attachment_holder .imgedit-wrap .image-editor {
 960      float: right;
 961      width: 250px;
 962  }
 963  
 964  .image-editor input {
 965      margin-top: 0;
 966      vertical-align: middle;
 967  }
 968  
 969  .imgedit-wait {
 970      position: absolute;
 971      top: 0;
 972      bottom: 0;
 973      width: 100%;
 974      background: #fff;
 975      opacity: 0.7;
 976      filter: alpha(opacity=70);
 977      display: none;
 978  }
 979  
 980  .imgedit-wait::before {
 981      content: "";
 982      display: block;
 983      width: 20px;
 984      height: 20px;
 985      position: absolute;
 986      left: 50%;
 987      top: 50%;
 988      margin: -10px 0 0 -10px;
 989      background: transparent url(../images/spinner.gif) no-repeat center;
 990      background-size: 20px 20px;
 991      transform: translateZ(0);
 992  }
 993  
 994  .no-float {
 995      float: none;
 996  }
 997  
 998  .media-disabled,
 999  .image-editor .disabled {
1000      /* WCAG 1.4.3 Text or images of text that are part of an inactive user
1001         interface component ... have no contrast requirement. */
1002      color: #a7aaad;
1003  }
1004  
1005  .A1B1 {
1006      overflow: hidden;
1007  }
1008  
1009  .wp_attachment_image .button,
1010  .A1B1 .button {
1011      float: left;
1012  }
1013  
1014  .no-js .wp_attachment_image .button {
1015      display: none;
1016  }
1017  
1018  .wp_attachment_image .spinner,
1019  .A1B1 .spinner {
1020      float: left;
1021  }
1022  
1023  .imgedit-menu .note-no-rotate {
1024      clear: both;
1025      margin: 0;
1026      padding: 1em 0 0;
1027  }
1028  
1029  .imgedit-menu .button::after,
1030  .imgedit-menu .button::before {
1031      font: 400 16px/1 dashicons;
1032      margin-right: 8px;
1033      vertical-align: middle;
1034      position: relative;
1035      top: -2px;
1036      -webkit-font-smoothing: antialiased;
1037      -moz-osx-font-smoothing: grayscale;
1038  }
1039  
1040  .imgedit-menu .imgedit-rotate.button::after {
1041      content: "\f140";
1042      margin-left: 2px;
1043      margin-right: 0;
1044  }
1045  
1046  .imgedit-menu .imgedit-rotate.button[aria-expanded="true"]::after {
1047      content: "\f142";
1048  }
1049  
1050  .imgedit-menu .button.disabled {
1051      color: #a7aaad;
1052      border-color: #dcdcde;
1053      background: #f6f7f7;
1054      box-shadow: none;
1055      text-shadow: 0 1px 0 #fff;
1056      cursor: default;
1057      transform: none;
1058  }
1059  
1060  .imgedit-crop::before {
1061      content: "\f165";
1062      content: "\f165" / "";
1063  }
1064  
1065  .imgedit-scale::before {
1066      content: "\f211";
1067      content: "\f211" / "";
1068  }
1069  
1070  .imgedit-rotate::before {
1071      content: "\f167";
1072      content: "\f167" / "";
1073  }
1074  
1075  .imgedit-undo::before {
1076      content: "\f171";
1077      content: "\f171" / "";
1078  }
1079  
1080  .imgedit-redo::before {
1081      content: "\f172";
1082      content: "\f172" / "";
1083  }
1084  
1085  .imgedit-crop-wrap {
1086      position: relative;
1087      padding: 20px;
1088      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);
1089      background-position: 0 0, 10px 10px;
1090      background-size: 20px 20px;
1091  }
1092  
1093  .imgedit-crop-wrap img {
1094      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);
1095      background-position: 0 0, 10px 10px;
1096      background-size: 20px 20px;
1097  }
1098  
1099  .imgedit-crop {
1100      margin: 0 8px 0 0;
1101  }
1102  
1103  .imgedit-rotate {
1104      margin: 0 8px 0 3px;
1105  }
1106  
1107  .imgedit-undo {
1108      margin: 0 3px;
1109  }
1110  
1111  .imgedit-redo {
1112      margin: 0 8px 0 3px;
1113  }
1114  
1115  .imgedit-thumbnail-preview-group {
1116      display: flex;
1117      flex-wrap: wrap;
1118      column-gap: 10px;
1119  }
1120  
1121  .imgedit-thumbnail-preview {
1122      margin: 10px 8px 0 0;
1123  }
1124  
1125  .imgedit-thumbnail-preview-caption {
1126      display: block;
1127  }
1128  
1129  #poststuff .imgedit-group-top h2 {
1130      display: inline-block;
1131      margin: 0;
1132      padding: 0;
1133      font-size: 14px;
1134      line-height: 1.4;
1135  }
1136  
1137  #poststuff .imgedit-group-top .button-link {
1138      text-decoration: none;
1139      color: #1d2327;
1140  }
1141  
1142  .imgedit-applyto .imgedit-label {
1143      display: block;
1144      padding: 0.5em 0 0;
1145  }
1146  
1147  .imgedit-popup-menu,
1148  .imgedit-help {
1149      display: none;
1150      padding-bottom: 8px;
1151  }
1152  
1153  .imgedit-panel-tools > .imgedit-menu {
1154      display: flex;
1155      column-gap: 4px;
1156      align-items: flex-start;
1157      flex-wrap: wrap;
1158  }
1159  
1160  .imgedit-popup-menu {
1161      width: calc(100% - 20px);
1162      position: absolute;
1163      background: #fff;
1164      padding: 10px;
1165      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
1166  }
1167  
1168  .image-editor .imgedit-menu .imgedit-popup-menu button {
1169      display: block;
1170      margin: 2px 0;
1171      width: 100%;
1172      white-space: break-spaces;
1173      line-height: 1.5;
1174      padding-top: 3px;
1175      padding-bottom: 2px;
1176  }
1177  
1178  .imgedit-rotate-menu-container {
1179      position: relative;
1180  }
1181  
1182  .imgedit-help.imgedit-restore {
1183      padding-bottom: 0;
1184  }
1185  
1186  /* higher specificity than buttons */
1187  .image-editor .imgedit-settings .imgedit-help-toggle,
1188  .image-editor .imgedit-settings .imgedit-help-toggle:hover,
1189  .image-editor .imgedit-settings .imgedit-help-toggle:active {
1190      border: 1px solid transparent;
1191      margin: -1px 0 0 -1px;
1192      padding: 0;
1193      background: transparent;
1194      color: var(--wp-admin-theme-color);
1195      font-size: 20px;
1196      line-height: 1;
1197      cursor: pointer;
1198      box-sizing: content-box;
1199      box-shadow: none;
1200  }
1201  
1202  .image-editor .imgedit-settings .imgedit-help-toggle:focus {
1203      color: var(--wp-admin-theme-color);
1204      border-color: var(--wp-admin-theme-color);
1205      box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
1206      /* Only visible in Windows High Contrast mode */
1207      outline: 2px solid transparent;
1208  }
1209  
1210  .form-table td.imgedit-response {
1211      padding: 0;
1212  }
1213  
1214  .imgedit-submit-btn {
1215      margin-left: 20px;
1216  }
1217  
1218  .imgedit-wrap .nowrap {
1219      white-space: nowrap;
1220      font-size: 12px;
1221      line-height: inherit;
1222  }
1223  
1224  span.imgedit-scale-warn {
1225      display: flex;
1226      align-items: center;
1227      margin: 4px;
1228      gap: 4px;
1229      color: #b32d2e;
1230      font-style: normal;
1231      visibility: hidden;
1232      vertical-align: middle;
1233  }
1234  
1235  .imgedit-save-target {
1236      margin: 8px 0;
1237  }
1238  
1239  .imgedit-save-target legend {
1240      font-weight: 600;
1241  }
1242  
1243  .imgedit-group {
1244      margin-bottom: 20px;
1245  }
1246  
1247  .image-editor .imgedit-original-dimensions {
1248      display: inline-block;
1249  }
1250  
1251  .image-editor .imgedit-scale-controls input[type="text"],
1252  .image-editor .imgedit-crop-ratio input[type="text"],
1253  .image-editor .imgedit-crop-sel input[type="text"],
1254  .image-editor .imgedit-scale-controls input[type="number"],
1255  .image-editor .imgedit-crop-ratio input[type="number"],
1256  .image-editor .imgedit-crop-sel input[type="number"] {
1257      width: 80px;
1258      font-size: 14px;
1259      padding: 0 8px;
1260  }
1261  
1262  .imgedit-separator {
1263      display: inline-block;
1264      width: 7px;
1265      text-align: center;
1266      font-size: 13px;
1267      color: #3c434a;
1268  }
1269  
1270  .image-editor .imgedit-scale-button-wrapper {
1271      margin-top: 0.3077em;
1272      display: block;
1273  }
1274  
1275  .image-editor .imgedit-scale-controls .button {
1276      margin-bottom: 0;
1277  }
1278  
1279  audio,
1280  video {
1281      display: inline-block;
1282      max-width: 100%;
1283  }
1284  
1285  .wp-core-ui .mejs-container {
1286      width: 100%;
1287      max-width: 100%;
1288  }
1289  
1290  .wp-core-ui .mejs-container * {
1291      box-sizing: border-box;
1292  }
1293  
1294  .wp-core-ui .mejs-time {
1295      box-sizing: content-box;
1296  }
1297  
1298  /* =Media Queries
1299  -------------------------------------------------------------- */
1300  
1301  /**
1302   * HiDPI Displays
1303   */
1304  @media print,
1305      (min-resolution: 120dpi) {
1306      .imgedit-wait::before {
1307          background-image: url(../images/spinner-2x.gif);
1308      }
1309  }
1310  
1311  @media screen and (max-width: 782px) {
1312      .edit-attachment-frame input,
1313      .edit-attachment-frame textarea {
1314          line-height: 1.5;
1315      }
1316  
1317      .wp_attachment_details label[for="content"] {
1318          font-size: 14px;
1319          line-height: 1.5;
1320      }
1321  
1322      .wp_attachment_details textarea {
1323          line-height: 1.5;
1324      }
1325  
1326      .wp_attachment_details #attachment_alt {
1327          height: 3.375em;
1328      }
1329  
1330      .media-upload-form .media-item.error,
1331      .media-upload-form .media-item .error {
1332          font-size: 13px;
1333          line-height: 1.5;
1334      }
1335  
1336      .media-upload-form .media-item.error {
1337          padding: 1px 10px;
1338      }
1339  
1340      .media-upload-form .media-item .error {
1341          padding: 10px 0 10px 12px;
1342      }
1343  
1344      .image-editor .imgedit-scale input[type="text"],
1345      .image-editor .imgedit-crop-ratio input[type="text"],
1346      .image-editor .imgedit-crop-sel input[type="text"] {
1347          font-size: 16px;
1348          padding: 6px 10px;
1349      }
1350  
1351      .wp_attachment_holder .imgedit-wrap .imgedit-panel-content,
1352      .wp_attachment_holder .imgedit-wrap .image-editor {
1353          float: none;
1354          width: auto;
1355          max-width: none;
1356          padding-bottom: 16px;
1357      }
1358  
1359      .copy-to-clipboard-container .success {
1360          font-size: 14px;
1361      }
1362  
1363      /* Restructure image editor on narrow viewports. */
1364      .imgedit-crop-wrap img {
1365          width: 100%;
1366      }
1367  
1368      .media-modal .imgedit-wrap .imgedit-panel-content,
1369      .media-modal .imgedit-wrap .image-editor {
1370          position: initial !important;
1371      }
1372  
1373      .media-modal .imgedit-wrap .image-editor {
1374          box-sizing: border-box;
1375          width: 100% !important;
1376      }
1377  
1378      .image-editor .imgedit-scale-button-wrapper {
1379          display: inline-block;
1380      }
1381  }
1382  
1383  @media only screen and (max-width: 600px) {
1384      .media-item-wrapper {
1385          grid-template-columns: 1fr;
1386      }
1387  }
1388  
1389  /**
1390   * Media queries for media grid.
1391   */
1392  @media only screen and (max-width: 1120px) {
1393      /* override for media-views.css */
1394      #wp-media-grid .wp-filter .attachment-filters {
1395          max-width: 100%;
1396      }
1397  }
1398  
1399  @media only screen and (max-width: 1000px) {
1400      /* override for forms.css */
1401      .wp-filter p.search-box {
1402          float: none;
1403          width: 100%;
1404          display: flex;
1405          flex-wrap: nowrap;
1406          column-gap: 0;
1407      }
1408  
1409      .wp-filter p.search-box #media-search-input {
1410          width: 100%;
1411      }
1412  
1413  }
1414  
1415  @media only screen and (max-width: 782px) {
1416      .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
1417          top: 46px;
1418          right: 10px;
1419      }
1420  
1421      .media-frame.mode-grid .media-toolbar select {
1422          min-height: 40px;
1423          padding: 0 24px 0 12px;
1424      }
1425  
1426      .media-frame.mode-grid .media-toolbar input[type="search"] {
1427          min-height: 40px;
1428          padding: 0 12px;
1429      }
1430  
1431      .wp-filter p.search-box {
1432          margin-bottom: 0;
1433      }
1434  }
1435  
1436  @media only screen and (max-width: 600px) {
1437      .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
1438          top: 0;
1439      }
1440  }
1441  
1442  @media only screen and (max-width: 480px) {
1443      .edit-attachment-frame .media-frame-title {
1444          right: 110px;
1445      }
1446  
1447      .upload-php .media-modal-close,
1448      .edit-attachment-frame .edit-media-header .left,
1449      .edit-attachment-frame .edit-media-header .right {
1450          width: 40px;
1451          height: 40px;
1452      }
1453  
1454      .edit-attachment-frame .edit-media-header .right::before,
1455      .edit-attachment-frame .edit-media-header .left::before {
1456          /* stylelint-disable-next-line declaration-property-unit-allowed-list -- Used for dashicons. */
1457          line-height: 40px !important;
1458      }
1459  
1460      .edit-attachment-frame .edit-media-header .left {
1461          right: 82px;
1462      }
1463  
1464      .edit-attachment-frame .edit-media-header .right {
1465          right: 41px;
1466      }
1467  
1468      .edit-attachment-frame .media-frame-content {
1469          top: 40px;
1470      }
1471  
1472      .edit-attachment-frame .attachment-media-view {
1473          float: none;
1474          height: auto;
1475          width: 100%;
1476      }
1477  
1478      .edit-attachment-frame .attachment-info {
1479          height: auto;
1480          width: 100%;
1481      }
1482  }
1483  
1484  @media only screen and (max-width: 640px), screen and (max-height: 400px) {
1485      .upload-php .mode-grid .media-sidebar {
1486          max-width: 100%;
1487      }
1488  }
1489  
1490  @media only screen and (max-width: 375px) {
1491      .media-item .attachment-tools {
1492          align-items: baseline;
1493      }
1494  
1495      .media-item .edit-attachment.copy-to-clipboard-container {
1496          flex-direction: column;
1497      }
1498  
1499      .copy-to-clipboard-container .success {
1500          line-height: normal;
1501          margin-top: 10px;
1502      }
1503  }