[Summary view] [Print] [Text view]

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