[Summary view] [Print] [Text view]

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