[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      #delete_all {
 379          margin-bottom: 0;
 380      }
 381  }
 382  
 383  @media screen and (max-width: 660px) {
 384  
 385      .find-box {
 386          top: 0;
 387          bottom: 0;
 388          left: 0;
 389          right: 0;
 390          margin: 0;
 391          width: 100%;
 392      }
 393  
 394  }
 395  
 396  .ui-find-overlay {
 397      position: fixed;
 398      top: 0;
 399      left: 0;
 400      right: 0;
 401      bottom: 0;
 402      background: #000;
 403      opacity: 0.7;
 404      filter: alpha(opacity=70);
 405      z-index: 100100;
 406  }
 407  
 408  .drag-drop #drag-drop-area {
 409      border: 4px dashed #c3c4c7;
 410      height: 200px;
 411  }
 412  
 413  .drag-drop .drag-drop-inside {
 414      margin: 60px auto 0;
 415      width: 250px;
 416  }
 417  
 418  .drag-drop-inside p {
 419      font-size: 14px;
 420      margin: 5px 0;
 421      display: none;
 422  }
 423  
 424  .drag-drop .drag-drop-inside p {
 425      text-align: center;
 426  }
 427  
 428  .drag-drop-inside p.drag-drop-info {
 429      font-size: 20px;
 430  }
 431  
 432  .drag-drop .drag-drop-inside p,
 433  .drag-drop-inside p.drag-drop-buttons {
 434      display: block;
 435  }
 436  
 437  /*
 438  #drag-drop-area:-moz-drag-over {
 439      border-color: #83b4d8;
 440  }
 441  border color while dragging a file over the uploader drop area */
 442  .drag-drop.drag-over #drag-drop-area {
 443      border-color: #9ec2e6;
 444  }
 445  
 446  #plupload-upload-ui {
 447      position: relative;
 448  }
 449  
 450  .post-type-attachment .wp-filter select {
 451      margin: 0 6px 0 0;
 452  }
 453  
 454  /**
 455   * Media Library grid view
 456   */
 457  
 458  .media-frame.mode-grid,
 459  .media-frame.mode-grid .media-frame-content,
 460  .media-frame.mode-grid .attachments-browser:not(.has-load-more) .attachments,
 461  .media-frame.mode-grid .attachments-browser.has-load-more .attachments-wrapper,
 462  .media-frame.mode-grid .uploader-inline-content {
 463      position: static;
 464  }
 465  
 466  /* Regions we don't use at all */
 467  .media-frame.mode-grid .media-frame-title,
 468  .media-frame.mode-grid .media-frame-router,
 469  .media-frame.mode-grid .media-frame-menu {
 470      display: none;
 471  }
 472  
 473  .media-frame.mode-grid .media-frame-content {
 474      background-color: transparent;
 475      border: none;
 476  }
 477  
 478  .upload-php .mode-grid .media-sidebar {
 479      position: relative;
 480      width: auto;
 481      margin-top: 12px;
 482      padding: 0 16px;
 483      border-left: 4px solid #d63638;
 484      box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
 485      background-color: #fff;
 486  }
 487  
 488  .upload-php .mode-grid .hide-sidebar .media-sidebar {
 489      display: none;
 490  }
 491  
 492  .upload-php .mode-grid .media-sidebar .media-uploader-status {
 493      border-bottom: none;
 494      padding-bottom: 0;
 495      max-width: 100%;
 496  }
 497  
 498  .upload-php .mode-grid .media-sidebar .upload-error {
 499      margin: 12px 0;
 500      padding: 4px 0 0;
 501      border: none;
 502      box-shadow: none;
 503      background: none;
 504  }
 505  
 506  .upload-php .mode-grid .media-sidebar .media-uploader-status.errors h2 {
 507      display: none;
 508  }
 509  
 510  .media-frame.mode-grid .uploader-inline {
 511      position: relative;
 512      top: auto;
 513      right: auto;
 514      left: auto;
 515      bottom: auto;
 516      padding-top: 0;
 517      margin-top: 20px;
 518      border: 4px dashed #c3c4c7;
 519  }
 520  
 521  .media-frame.mode-select .attachments-browser.fixed:not(.has-load-more) .attachments,
 522  .media-frame.mode-select .attachments-browser.has-load-more.fixed .attachments-wrapper {
 523      position: relative;
 524      top: 94px; /* prevent jumping up when the toolbar becomes fixed */
 525      padding-bottom: 94px; /* offset for above so the bottom doesn't get cut off */
 526  }
 527  
 528  .media-frame.mode-grid .attachment:focus,
 529  .media-frame.mode-grid .selected.attachment:focus,
 530  .media-frame.mode-grid .attachment.details:focus {
 531      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
 532      /* Only visible in Windows High Contrast mode */
 533      outline: 2px solid transparent;
 534      outline-offset: -6px;
 535  }
 536  
 537  .media-frame.mode-grid .selected.attachment {
 538      box-shadow:
 539          inset 0 0 0 5px #f0f0f1,
 540          inset 0 0 0 7px #c3c4c7;
 541  }
 542  
 543  .media-frame.mode-grid .attachment.details {
 544      box-shadow:
 545          inset 0 0 0 3px #f0f0f1,
 546          inset 0 0 0 7px var(--wp-admin-theme-color, #3858e9);
 547  }
 548  
 549  .media-frame.mode-grid.mode-select .attachment .thumbnail {
 550      opacity: 0.65;
 551  }
 552  
 553  .media-frame.mode-select .attachment.selected .thumbnail {
 554      opacity: 1;
 555  }
 556  
 557  .media-frame.mode-grid .media-toolbar {
 558      margin-bottom: 15px;
 559      height: auto;
 560  }
 561  
 562  .media-frame.mode-grid .media-toolbar label:not(.media-search-input-label) {
 563      border: 0;
 564      clip-path: inset(50%);
 565      height: 1px;
 566      margin: -1px;
 567      overflow: hidden;
 568      padding: 0;
 569      position: absolute;
 570      width: 1px;
 571      /* Many screen reader and browser combinations announce broken words as they would appear visually. */
 572      word-wrap: normal !important;
 573      word-break: normal !important;
 574  }
 575  
 576  .media-frame.mode-grid .media-toolbar select {
 577      margin: 0 10px 0 0;
 578      min-height: 32px;
 579      line-height: 2.14285714; /* 30px for 32px height with 14px font */
 580      padding: 0 24px 0 8px;
 581  }
 582  
 583  .media-frame.mode-grid .media-toolbar input[type="search"] {
 584      min-height: 32px;
 585      padding: 0 8px;
 586  }
 587  
 588  .media-frame.mode-grid .media-toolbar-secondary {
 589      display: flex;
 590      flex-wrap: wrap;
 591      align-items: center;
 592      gap: 8px;
 593  }
 594  
 595  .media-frame.mode-grid.mode-edit .media-toolbar-secondary > .select-mode-toggle-button {
 596      margin: 0 8px 0 0;
 597      height: 100%;
 598  }
 599  
 600  .media-frame.mode-grid .attachments-browser .bulk-select {
 601      display: inline-block;
 602      margin: 0 10px 0 0;
 603  }
 604  
 605  .media-frame.mode-grid .search {
 606      margin-top: 0;
 607  }
 608  
 609  .media-frame-content .media-search-input-label {
 610      vertical-align: baseline;
 611  }
 612  
 613  .attachments-browser .media-toolbar-secondary > .media-button {
 614      margin-right: 10px;
 615  }
 616  
 617  .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
 618      position: fixed;
 619      top: 32px;
 620      left: auto;
 621      right: 20px;
 622      margin-top: 0;
 623  }
 624  
 625  .media-frame.mode-grid .attachments-browser {
 626      padding: 0;
 627  }
 628  
 629  .media-frame.mode-grid .attachments-browser .attachments {
 630      padding: 2px;
 631  }
 632  
 633  .media-frame.mode-grid .attachments-browser .no-media {
 634      color: #646970; /* same as no plugins and no themes */
 635      font-size: 18px;
 636      font-style: normal;
 637      margin: 0;
 638      padding: 100px 0 0;
 639      text-align: center;
 640  }
 641  
 642  /**
 643   * Attachment details modal
 644   */
 645  
 646  .edit-attachment-frame {
 647      display: block;
 648      height: 100%;
 649      width: 100%;
 650  }
 651  
 652  .edit-attachment-frame .edit-media-header {
 653      overflow: hidden;
 654  }
 655  
 656  .upload-php .media-modal-close .media-modal-icon:before {
 657      content: "\f335";
 658      content: "\f335" / '';
 659      font-size: 22px;
 660  }
 661  
 662  .upload-php .media-modal-close,
 663  .edit-attachment-frame .edit-media-header .left,
 664  .edit-attachment-frame .edit-media-header .right {
 665      cursor: pointer;
 666      color: #787c82;
 667      background-color: transparent;
 668      height: 50px;
 669      width: 50px;
 670      padding: 0;
 671      position: absolute;
 672      text-align: center;
 673      border: 0;
 674      border-left: 1px solid #dcdcde;
 675      transition: color .1s ease-in-out, background .1s ease-in-out;
 676  }
 677  
 678  .upload-php .media-modal-close {
 679      top: 0;
 680      right: 0;
 681  }
 682  
 683  .edit-attachment-frame .edit-media-header .left {
 684      right: 102px;
 685  }
 686  
 687  .edit-attachment-frame .edit-media-header .right {
 688      right: 51px;
 689  }
 690  
 691  .edit-attachment-frame .media-frame-title {
 692      left: 0;
 693      right: 150px; /* leave space for prev/next/close */
 694  }
 695  
 696  .edit-attachment-frame .edit-media-header .right:before,
 697  .edit-attachment-frame .edit-media-header .left:before {
 698      font: normal 20px/50px dashicons !important;
 699      display: inline;
 700      font-weight: 300;
 701  }
 702  
 703  .upload-php .media-modal-close:hover,
 704  .upload-php .media-modal-close:focus,
 705  .edit-attachment-frame .edit-media-header .left:hover,
 706  .edit-attachment-frame .edit-media-header .right:hover,
 707  .edit-attachment-frame .edit-media-header .left:focus,
 708  .edit-attachment-frame .edit-media-header .right:focus {
 709      background: #dcdcde;
 710      border-color: #c3c4c7;
 711      color: #000;
 712      outline: none;
 713      box-shadow: none;
 714  }
 715  
 716  .upload-php .media-modal-close:focus,
 717  .edit-attachment-frame .edit-media-header .left:focus,
 718  .edit-attachment-frame .edit-media-header .right:focus {
 719      /* Only visible in Windows High Contrast mode */
 720      outline: 2px solid transparent;
 721      outline-offset: -2px;
 722  }
 723  
 724  .upload-php .media-modal-close:focus .media-modal-icon:before,
 725  .upload-php .media-modal-close:hover .media-modal-icon:before {
 726      color: #000;
 727  }
 728  
 729  .edit-attachment-frame .edit-media-header .left:before {
 730      content: "\f341";
 731      content: "\f341" / '';
 732  }
 733  
 734  .edit-attachment-frame .edit-media-header .right:before {
 735      content: "\f345";
 736      content: "\f345" / '';
 737  }
 738  
 739  .edit-attachment-frame .edit-media-header [disabled],
 740  .edit-attachment-frame .edit-media-header [disabled]:hover {
 741      color: #c3c4c7;
 742      background: inherit;
 743      cursor: default;
 744  }
 745  
 746  .edit-attachment-frame .media-frame-content,
 747  .edit-attachment-frame .media-frame-router {
 748      left: 0;
 749  }
 750  
 751  .edit-attachment-frame .media-frame-content {
 752      border-bottom: none;
 753      bottom: 0;
 754      top: 50px;
 755  }
 756  
 757  .edit-attachment-frame .attachment-details {
 758      position: absolute;
 759      overflow: auto;
 760      top: 0;
 761      bottom: 0;
 762      right: 0;
 763      left: 0;
 764      box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, 0.1);
 765  }
 766  
 767  .edit-attachment-frame .attachment-media-view {
 768      float: left;
 769      width: 65%;
 770      height: 100%;
 771  }
 772  
 773  .edit-attachment-frame .attachment-media-view .thumbnail {
 774      box-sizing: border-box;
 775      padding: 16px;
 776      height: 100%;
 777  }
 778  
 779  .edit-attachment-frame .attachment-media-view .details-image {
 780      display: block;
 781      margin: 0 auto 16px;
 782      max-width: 100%;
 783      max-height: 90%;
 784      max-height: calc( 100% - 42px ); /* leave space for actions underneath */
 785      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);
 786      background-position: 0 0, 10px 10px;
 787      background-size: 20px 20px;
 788  }
 789  
 790  .edit-attachment-frame .attachment-media-view .details-image.icon {
 791      background: none;
 792  }
 793  
 794  .edit-attachment-frame .attachment-media-view .attachment-actions {
 795      text-align: center;
 796  }
 797  
 798  .edit-attachment-frame .button {
 799      min-height: 32px;
 800      line-height: 2.30769231; /* 30px for 32px height with 13px font */
 801      padding: 0 12px;
 802  }
 803  
 804  .edit-attachment-frame .wp-media-wrapper {
 805      margin-bottom: 12px;
 806  }
 807  
 808  .edit-attachment-frame input,
 809  .edit-attachment-frame textarea {
 810      padding: 4px 8px;
 811      line-height: 1.42857143;
 812  }
 813  
 814  .edit-attachment-frame .attachment-info {
 815      overflow: auto;
 816      box-sizing: border-box;
 817      margin-bottom: 0;
 818      padding: 12px 16px 0;
 819      width: 35%;
 820      height: 100%;
 821      box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, 0.1);
 822      border-bottom: 0;
 823      border-left: 1px solid #dcdcde;
 824      background: #f6f7f7;
 825  }
 826  
 827  .edit-attachment-frame .attachment-info .details,
 828  .edit-attachment-frame .attachment-info .settings {
 829      position: relative; /* RTL fix, #WP29352 */
 830      overflow: hidden;
 831      float: none;
 832      margin-bottom: 15px;
 833      padding-bottom: 15px;
 834      border-bottom: 1px solid #dcdcde;
 835  }
 836  
 837  .edit-attachment-frame .attachment-info .filename {
 838      font-weight: 400;
 839      color: #646970;
 840  }
 841  
 842  .edit-attachment-frame .attachment-info .thumbnail {
 843      margin-bottom: 12px;
 844  }
 845  
 846  .attachment-info .actions {
 847      margin-bottom: 16px;
 848  }
 849  
 850  .attachment-info .actions a {
 851      display: inline;
 852      text-decoration: none;
 853  }
 854  
 855  .copy-to-clipboard-container {
 856      display: flex;
 857      align-items: center;
 858      margin-top: 8px;
 859      clear: both;
 860  }
 861  
 862  .copy-to-clipboard-container .copy-attachment-url {
 863      white-space: normal;
 864  }
 865  
 866  .copy-to-clipboard-container .success {
 867      color: #007017;
 868      margin-left: 8px;
 869  }
 870  
 871  /*------------------------------------------------------------------------------
 872    14.2 - Image Editor
 873  ------------------------------------------------------------------------------*/
 874  .wp_attachment_details .attachment-alt-text {
 875      margin-bottom: 5px;
 876  }
 877  
 878  .wp_attachment_details #attachment_alt {
 879      max-width: 500px;
 880      height: 3.28571428em;
 881  }
 882  
 883  .wp_attachment_details .attachment-alt-text-description {
 884      margin-top: 5px;
 885  }
 886  
 887  .wp_attachment_details label[for="content"] {
 888      font-size: 13px;
 889      line-height: 1.5;
 890      margin: 1em 0;
 891  }
 892  
 893  .wp_attachment_details #attachment_caption {
 894      height: 4em;
 895  }
 896  
 897  .describe .image-editor {
 898      vertical-align: top;
 899  }
 900  
 901  .imgedit-wrap {
 902      position: relative;
 903      padding-top: 10px;
 904  }
 905  
 906  .image-editor p,
 907  .image-editor fieldset {
 908      margin: 8px 0;
 909  }
 910  
 911  .image-editor legend {
 912      margin-bottom: 5px;
 913  }
 914  
 915  .describe .imgedit-wrap .image-editor {
 916      padding: 0 5px;
 917  }
 918  
 919  .wp_attachment_holder div.updated {
 920      margin-top: 0;
 921  }
 922  
 923  .wp_attachment_holder .imgedit-wrap > div {
 924      height: auto;
 925  }
 926  
 927  .imgedit-panel-content {
 928      display: flex;
 929      flex-wrap: wrap;
 930      gap: 20px;
 931      margin-bottom: 20px;
 932  }
 933  
 934  .imgedit-settings {
 935      max-width: 240px; /* Prevent reflow when help info is expanded. */
 936  }
 937  
 938  .imgedit-group-controls > * {
 939      display: none;
 940  }
 941  
 942  .imgedit-panel-active .imgedit-group-controls > * {
 943      display: block;
 944  }
 945  
 946  .imgedit-panel-active .imgedit-group-controls > .imgedit-crop-apply {
 947      display: flex;
 948  }
 949  
 950  .imgedit-crop-apply {
 951      gap: 4px;
 952      flex-wrap: wrap;
 953  }
 954  
 955  .wp_attachment_holder .imgedit-wrap .image-editor {
 956      float: right;
 957      width: 250px;
 958  }
 959  
 960  .image-editor input {
 961      margin-top: 0;
 962      vertical-align: middle;
 963  }
 964  
 965  .imgedit-wait {
 966      position: absolute;
 967      top: 0;
 968      bottom: 0;
 969      width: 100%;
 970      background: #fff;
 971      opacity: 0.7;
 972      filter: alpha(opacity=70);
 973      display: none;
 974  }
 975  
 976  .imgedit-wait:before {
 977      content: "";
 978      display: block;
 979      width: 20px;
 980      height: 20px;
 981      position: absolute;
 982      left: 50%;
 983      top: 50%;
 984      margin: -10px 0 0 -10px;
 985      background: transparent url(../images/spinner.gif) no-repeat center;
 986      background-size: 20px 20px;
 987      transform: translateZ(0);
 988  }
 989  
 990  .no-float {
 991      float: none;
 992  }
 993  
 994  .media-disabled,
 995  .image-editor .disabled {
 996      /* WCAG 1.4.3 Text or images of text that are part of an inactive user
 997         interface component ... have no contrast requirement. */
 998      color: #a7aaad;
 999  }
1000  
1001  .A1B1 {
1002      overflow: hidden;
1003  }
1004  
1005  .wp_attachment_image .button,
1006  .A1B1 .button {
1007      float: left;
1008  }
1009  
1010  .no-js .wp_attachment_image .button {
1011      display: none;
1012  }
1013  
1014  .wp_attachment_image .spinner,
1015  .A1B1 .spinner {
1016      float: left;
1017  }
1018  
1019  .imgedit-menu .note-no-rotate {
1020      clear: both;
1021      margin: 0;
1022      padding: 1em 0 0;
1023  }
1024  
1025  .imgedit-menu .button:after,
1026  .imgedit-menu .button:before {
1027      font: normal 16px/1 dashicons;
1028      margin-right: 8px;
1029      vertical-align: middle;
1030      position: relative;
1031      top: -2px;
1032      -webkit-font-smoothing: antialiased;
1033      -moz-osx-font-smoothing: grayscale;
1034  }
1035  
1036  .imgedit-menu .imgedit-rotate.button:after {
1037      content: '\f140';
1038      margin-left: 2px;
1039      margin-right: 0;
1040  }
1041  
1042  .imgedit-menu .imgedit-rotate.button[aria-expanded="true"]:after {
1043      content: '\f142';
1044  }
1045  
1046  .imgedit-menu .button.disabled {
1047      color: #a7aaad;
1048      border-color: #dcdcde;
1049      background: #f6f7f7;
1050      box-shadow: none;
1051      text-shadow: 0 1px 0 #fff;
1052      cursor: default;
1053      transform: none;
1054  }
1055  
1056  .imgedit-crop:before {
1057      content: "\f165";
1058      content: "\f165" / '';
1059  }
1060  
1061  .imgedit-scale:before {
1062      content: "\f211";
1063      content: "\f211" / '';
1064  }
1065  
1066  .imgedit-rotate:before {
1067      content: "\f167";
1068      content: "\f167" / '';
1069  }
1070  
1071  .imgedit-undo:before {
1072      content: "\f171";
1073      content: "\f171" / '';
1074  }
1075  
1076  .imgedit-redo:before {
1077      content: "\f172";
1078      content: "\f172" / '';
1079  }
1080  
1081  .imgedit-crop-wrap {
1082      position: relative;
1083  }
1084  
1085  .imgedit-crop-wrap img {
1086      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);
1087      background-position: 0 0, 10px 10px;
1088      background-size: 20px 20px;
1089  }
1090  
1091  .imgedit-crop-wrap {
1092      padding: 20px;
1093      background-image: linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7);
1094      background-position: 0 0, 10px 10px;
1095      background-size: 20px 20px;
1096  }
1097  
1098  
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: .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, video {
1280      display: inline-block;
1281      max-width: 100%;
1282  }
1283  
1284  .wp-core-ui .mejs-container {
1285      width: 100%;
1286      max-width: 100%;
1287  }
1288  
1289  .wp-core-ui .mejs-container * {
1290      box-sizing: border-box;
1291  }
1292  
1293  .wp-core-ui .mejs-time {
1294      box-sizing: content-box;
1295  }
1296  
1297  /* =Media Queries
1298  -------------------------------------------------------------- */
1299  
1300  /**
1301   * HiDPI Displays
1302   */
1303  @media print,
1304    (min-resolution: 120dpi) {
1305      .imgedit-wait:before {
1306          background-image: url(../images/spinner-2x.gif);
1307      }
1308  }
1309  
1310  @media screen and (max-width: 782px) {
1311      .edit-attachment-frame input,
1312      .edit-attachment-frame textarea {
1313          line-height: 1.5;
1314      }
1315  
1316      .wp_attachment_details label[for="content"] {
1317          font-size: 14px;
1318          line-height: 1.5;
1319      }
1320  
1321      .wp_attachment_details textarea {
1322          line-height: 1.5;
1323      }
1324  
1325      .wp_attachment_details #attachment_alt {
1326          height: 3.375em;
1327      }
1328  
1329      .media-upload-form .media-item.error,
1330      .media-upload-form .media-item .error {
1331          font-size: 13px;
1332          line-height: 1.5;
1333      }
1334  
1335      .media-upload-form .media-item.error {
1336          padding: 1px 10px;
1337      }
1338  
1339      .media-upload-form .media-item .error {
1340          padding: 10px 0 10px 12px;
1341      }
1342  
1343      .image-editor .imgedit-scale input[type="text"],
1344      .image-editor .imgedit-crop-ratio input[type="text"],
1345      .image-editor .imgedit-crop-sel input[type="text"] {
1346          font-size: 16px;
1347          padding: 6px 10px;
1348      }
1349  
1350      .wp_attachment_holder .imgedit-wrap .imgedit-panel-content,
1351      .wp_attachment_holder .imgedit-wrap .image-editor {
1352          float: none;
1353          width: auto;
1354          max-width: none;
1355          padding-bottom: 16px;
1356      }
1357  
1358      .copy-to-clipboard-container .success {
1359          font-size: 14px;
1360      }
1361  
1362      /* Restructure image editor on narrow viewports. */
1363      .imgedit-crop-wrap img{
1364          width: 100%;
1365      }
1366  
1367      .media-modal .imgedit-wrap .imgedit-panel-content,
1368      .media-modal .imgedit-wrap .image-editor {
1369          position: initial !important;
1370      }
1371  
1372      .media-modal .imgedit-wrap .image-editor {
1373          box-sizing: border-box;
1374          width: 100% !important;
1375      }
1376  
1377      .image-editor .imgedit-scale-button-wrapper {
1378          display: inline-block;
1379      }
1380  }
1381  
1382  @media only screen and (max-width: 600px) {
1383      .media-item-wrapper {
1384          grid-template-columns: 1fr;
1385      }
1386  }
1387  
1388  /**
1389   * Media queries for media grid.
1390   */
1391  @media only screen and (max-width: 1120px) {
1392      /* override for media-views.css */
1393      #wp-media-grid .wp-filter .attachment-filters {
1394          max-width: 100%;
1395      }
1396  }
1397  
1398  @media only screen and (max-width: 1000px) {
1399      /* override for forms.css */
1400      .wp-filter p.search-box {
1401          float: none;
1402          width: 100%;
1403          display: flex;
1404          flex-wrap: nowrap;
1405          column-gap: 0;
1406      }
1407  
1408      .wp-filter p.search-box #media-search-input {
1409          width: 100%;
1410      }
1411  
1412  }
1413  
1414  @media only screen and (max-width: 782px) {
1415      .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
1416          top: 46px;
1417          right: 10px;
1418      }
1419  
1420      .media-frame.mode-grid .media-toolbar select {
1421          min-height: 40px;
1422          padding: 0 24px 0 12px;
1423      }
1424  
1425      .media-frame.mode-grid .media-toolbar input[type="search"] {
1426          min-height: 40px;
1427          padding: 0 12px;
1428      }
1429  
1430      .wp-filter p.search-box {
1431          margin-bottom: 0;
1432      }
1433  }
1434  
1435  @media only screen and (max-width: 600px) {
1436      .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
1437          top: 0;
1438      }
1439  }
1440  
1441  @media only screen and (max-width: 480px) {
1442      .edit-attachment-frame .media-frame-title {
1443          right: 110px;
1444      }
1445  
1446      .upload-php .media-modal-close,
1447      .edit-attachment-frame .edit-media-header .left,
1448      .edit-attachment-frame .edit-media-header .right {
1449          width: 40px;
1450          height: 40px;
1451      }
1452  
1453      .edit-attachment-frame .edit-media-header .right:before,
1454      .edit-attachment-frame .edit-media-header .left:before {
1455          line-height: 40px !important;
1456      }
1457  
1458      .edit-attachment-frame .edit-media-header .left {
1459          right: 82px;
1460      }
1461  
1462      .edit-attachment-frame .edit-media-header .right {
1463          right: 41px;
1464      }
1465  
1466      .edit-attachment-frame .media-frame-content {
1467          top: 40px;
1468      }
1469  
1470      .edit-attachment-frame .attachment-media-view {
1471          float: none;
1472          height: auto;
1473          width: 100%;
1474      }
1475  
1476      .edit-attachment-frame .attachment-info {
1477          height: auto;
1478          width: 100%;
1479      }
1480  }
1481  
1482  @media only screen and (max-width: 640px), screen and (max-height: 400px) {
1483      .upload-php .mode-grid .media-sidebar{
1484          max-width: 100%;
1485      }
1486  }
1487  
1488  @media only screen and (max-width: 375px) {
1489      .media-item .attachment-tools {
1490          align-items: baseline;
1491      }
1492      .media-item .edit-attachment.copy-to-clipboard-container {
1493          flex-direction: column;
1494      }
1495  
1496      .copy-to-clipboard-container .success {
1497          line-height: normal;
1498          margin-top: 10px;
1499      }
1500  }