[Summary view] [Print] [Text view]

   1  /*! This file is auto-generated */
   2  /**
   3   * Base Styles
   4   */
   5  .media-modal * {
   6      box-sizing: content-box;
   7  }
   8  
   9  .media-modal input,
  10  .media-modal select,
  11  .media-modal textarea {
  12      box-sizing: border-box;
  13  }
  14  
  15  .media-modal,
  16  .media-frame {
  17      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  18      font-size: 12px;
  19      -webkit-overflow-scrolling: touch;
  20  }
  21  
  22  .media-modal legend {
  23      padding: 0;
  24      font-size: 13px;
  25  }
  26  
  27  .media-modal label {
  28      font-size: 13px;
  29  }    
  30  
  31  .media-modal .legend-inline {
  32      position: absolute;
  33      transform: translate(100%, 50%);
  34      margin-right: -1%;
  35      line-height: 1.2;
  36  }
  37  
  38  .media-frame a {
  39      border-bottom: none;
  40      color: var(--wp-admin-theme-color, #3858e9);
  41  }
  42  
  43  .media-frame a:hover,
  44  .media-frame a:active {
  45      color: var(--wp-admin-theme-color-darker-20, #183ad6);
  46  }
  47  
  48  .media-frame a:focus {
  49      border-radius: 2px;
  50      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
  51      color: var(--wp-admin-theme-color-darker-20, #183ad6);
  52      /* Only visible in Windows High Contrast mode */
  53      outline: 2px solid transparent;
  54  }
  55  
  56  .media-frame a.button {
  57      color: #2c3338;
  58  }
  59  
  60  .media-frame a.button:hover {
  61      color: #1d2327;
  62  }
  63  
  64  .media-frame a.button-primary,
  65  .media-frame a.button-primary:hover {
  66      color: #fff;
  67  }
  68  
  69  .media-frame input,
  70  .media-frame textarea {
  71      padding: 8px 12px;
  72  }
  73  
  74  .media-frame select,
  75  .wp-admin .media-frame select {
  76      min-height: 40px;
  77      vertical-align: middle;
  78  }
  79  
  80  .media-frame input[type="text"],
  81  .media-frame input[type="password"],
  82  .media-frame input[type="color"],
  83  .media-frame input[type="date"],
  84  .media-frame input[type="datetime"],
  85  .media-frame input[type="datetime-local"],
  86  .media-frame input[type="email"],
  87  .media-frame input[type="month"],
  88  .media-frame input[type="number"],
  89  .media-frame input[type="search"],
  90  .media-frame input[type="tel"],
  91  .media-frame input[type="time"],
  92  .media-frame input[type="url"],
  93  .media-frame input[type="week"],
  94  .media-frame textarea,
  95  .media-frame select {
  96      box-shadow: 0 0 0 transparent;
  97      border-radius: 2px;
  98      border: 1px solid #949494;
  99      background-color: #fff;
 100      color: #1e1e1e;
 101      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 102      font-size: 14px;
 103      line-height: 1.42857143;
 104  }
 105  
 106  .media-frame input[type="text"],
 107  .media-frame input[type="password"],
 108  .media-frame input[type="date"],
 109  .media-frame input[type="datetime"],
 110  .media-frame input[type="datetime-local"],
 111  .media-frame input[type="email"],
 112  .media-frame input[type="month"],
 113  .media-frame input[type="number"],
 114  .media-frame input[type="search"],
 115  .media-frame input[type="tel"],
 116  .media-frame input[type="time"],
 117  .media-frame input[type="url"],
 118  .media-frame input[type="week"] {
 119      padding: 0 12px;
 120      /* inherits font size 14px */
 121      line-height: 2.71428571; /* 38px for 40px min-height */
 122      min-height: 40px;
 123  }
 124  
 125  /* Search field in the Media Library toolbar */
 126  .media-frame.mode-grid .wp-filter input[type="search"] {
 127      font-size: 14px;
 128      line-height: 2;
 129  }
 130  
 131  .media-frame input[type="text"]:focus,
 132  .media-frame input[type="password"]:focus,
 133  .media-frame input[type="number"]:focus,
 134  .media-frame input[type="search"]:focus,
 135  .media-frame input[type="email"]:focus,
 136  .media-frame input[type="url"]:focus,
 137  .media-frame textarea:focus,
 138  .media-frame select:focus {
 139      border-color: var(--wp-admin-theme-color, #3858e9);
 140      /* Expand border by 0.5px for total 1.5px effect */
 141      box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color, #3858e9);
 142      outline: 2px solid transparent;
 143  }
 144  
 145  .media-frame input:disabled,
 146  .media-frame textarea:disabled,
 147  .media-frame input[readonly],
 148  .media-frame textarea[readonly] {
 149      background-color: #f0f0f0;
 150      border-color: #cccccc;
 151      color: #949494;
 152  }
 153  
 154  .media-frame input[type="search"] {
 155      -webkit-appearance: textfield;
 156  }
 157  
 158  .media-frame ::-webkit-input-placeholder {
 159      color: #646970;
 160  }
 161  
 162  .media-frame ::-moz-placeholder {
 163      color: #646970;
 164  }
 165  
 166  /*
 167   * In some cases there's the need of higher specificity,
 168   * for example higher than `.media-embed .setting`.
 169   */
 170  .media-frame .hidden,
 171  .media-frame .setting.hidden {
 172      display: none;
 173  }
 174  
 175  /*!
 176   * jQuery UI Draggable/Sortable 1.11.4
 177   * http://jqueryui.com
 178   *
 179   * Copyright jQuery Foundation and other contributors
 180   * Released under the MIT license.
 181   * http://jquery.org/license
 182   */
 183  .ui-draggable-handle,
 184  .ui-sortable-handle {
 185      touch-action: none;
 186  }
 187  
 188  /**
 189   * Modal
 190   */
 191  .media-modal {
 192      position: fixed;
 193      top: 30px;
 194      right: 30px;
 195      left: 30px;
 196      bottom: 30px;
 197      z-index: 160000;
 198  }
 199  
 200  .wp-customizer .media-modal {
 201      z-index: 560000;
 202  }
 203  
 204  .media-modal-backdrop {
 205      position: fixed;
 206      top: 0;
 207      right: 0;
 208      left: 0;
 209      bottom: 0;
 210      min-height: 360px;
 211      background: #000;
 212      opacity: 0.7;
 213      z-index: 159900;
 214  }
 215  
 216  .wp-customizer .media-modal-backdrop {
 217      z-index: 559900;
 218  }
 219  
 220  .media-modal-close {
 221      position: absolute;
 222      top: 0;
 223      left: 0;
 224      width: 50px;
 225      height: 50px;
 226      margin: 0;
 227      padding: 0;
 228      border: 1px solid transparent;
 229      background: none;
 230      color: #646970;
 231      z-index: 1000;
 232      cursor: pointer;
 233      outline: none;
 234      transition: color .1s ease-in-out, background .1s ease-in-out;
 235  }
 236  
 237  .media-modal-close:hover,
 238  .media-modal-close:active {
 239      color: var(--wp-admin-theme-color, #3858e9);
 240  }
 241  
 242  .media-modal-close:focus {
 243      color: var(--wp-admin-theme-color, #3858e9);
 244      border-color: var(--wp-admin-theme-color, #3858e9);
 245      box-shadow: 0 0 3px rgba(var(--wp-admin-theme-color--rgb, 56, 88, 233), 0.8);
 246      /* Only visible in Windows High Contrast mode */
 247      outline: 2px solid transparent;
 248  }
 249  
 250  .media-modal-close span.media-modal-icon {
 251      background-image: none;
 252  }
 253  
 254  .media-modal-close .media-modal-icon:before {
 255      content: "\f158";
 256      content: "\f158" / '';
 257      font: normal 20px/1 dashicons;
 258      vertical-align: middle;
 259      -webkit-font-smoothing: antialiased;
 260      -moz-osx-font-smoothing: grayscale;
 261  }
 262  
 263  .media-modal-content {
 264      position: absolute;
 265      top: 0;
 266      right: 0;
 267      left: 0;
 268      bottom: 0;
 269      overflow: auto;
 270      min-height: 300px;
 271      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7);
 272      background: #fff;
 273      -webkit-font-smoothing: subpixel-antialiased;
 274  }
 275  
 276  .media-modal-content .button,
 277  .media-modal-content .button.button-large {
 278      min-height: 32px;
 279      line-height: 2.30769231; /* 30px for 32px height with 13px font */
 280      padding: 0 12px;
 281  }
 282  
 283  .media-toolbar input[type="text"],
 284  .media-toolbar input[type="search"],
 285  .media-toolbar select {
 286      min-height: 32px;
 287      line-height: 2.14285714; /* 30px for 32px height with 14px font */
 288  }
 289  
 290  .media-toolbar input[type="text"],
 291  .media-toolbar input[type="search"] {
 292      padding: 0 8px;
 293  }
 294  
 295  .media-toolbar select {
 296      padding: 0 8px 0 24px;
 297  }
 298  
 299  /* higher specificity */
 300  .wp-core-ui .media-modal-icon {
 301      background-image: url(../images/uploader-icons.png);
 302      background-repeat: no-repeat;
 303  }
 304  
 305  /**
 306   * Toolbar
 307   */
 308  .media-toolbar {
 309      position: absolute;
 310      top: 0;
 311      right: 0;
 312      left: 0;
 313      z-index: 100;
 314      height: 48px;
 315      padding: 0 16px;
 316      border: 0 solid #dcdcde;
 317      overflow: auto;
 318  }
 319  
 320  .media-frame-toolbar .media-toolbar {
 321      top: auto;
 322      bottom: -60px;
 323      height: auto;
 324      overflow: visible;
 325      border-top: 1px solid #dcdcde;
 326      background: #fff;
 327  }
 328  
 329  .media-frame-toolbar .media-toolbar-primary > .media-button,
 330  .media-frame-toolbar .media-toolbar-primary > .media-button-group {
 331      margin-top: 14px;
 332      margin-bottom: 14px;
 333  }
 334  
 335  .media-toolbar-primary {
 336      float: left;
 337      height: 100%;
 338      position: relative;
 339  }
 340  
 341  .media-toolbar-secondary {
 342      float: right;
 343      height: 100%;
 344      position: relative;
 345      display: grid;
 346      grid-template-columns: repeat( 2, 1fr );
 347      grid-template-rows: repeat( 2, 1fr );
 348      grid-column-gap: 12px;
 349      grid-row-gap: 0px;
 350      align-items: end;
 351  }
 352  
 353  label[for="media-attachment-filters"] { 
 354      grid-area: 1 / 1 / 2 / 2; 
 355  }
 356  
 357  select#media-attachment-filters { 
 358      grid-area: 2 / 1 / 3 / 2; 
 359  }
 360  
 361  label[for="media-attachment-date-filters"] { 
 362      grid-area: 1 / 2 / 2 / 3; 
 363  }
 364  
 365  select#media-attachment-date-filters { 
 366      grid-area: 2 / 2 / 3 / 3; 
 367  } 
 368  
 369  .media-toolbar-secondary > .spinner {
 370      position: absolute;
 371      right: calc( 100% + 2px );
 372      top: 50%;
 373      margin: 0;
 374  }
 375  
 376  .media-toolbar-primary > .media-button,
 377  .media-toolbar-primary > .media-button-group {
 378      margin-right: 10px;
 379      float: right;
 380      margin-top: 15px;
 381  }
 382  
 383  .media-toolbar-secondary > .media-button,
 384  .media-toolbar-secondary > .media-button-group {
 385      margin-left: 10px;
 386      margin-top: 15px;
 387  }
 388  
 389  /**
 390   * Sidebar
 391   */
 392  .media-sidebar {
 393      position: absolute;
 394      top: 0;
 395      left: 0;
 396      bottom: 0;
 397      width: 267px;
 398      padding: 0 16px;
 399      z-index: 75;
 400      background: #f6f7f7;
 401      border-right: 1px solid #dcdcde;
 402      overflow: auto;
 403      -webkit-overflow-scrolling: touch;
 404  }
 405  
 406  /*
 407   * Implementation of bottom padding in overflow content differs across browsers.
 408   * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
 409   */
 410  .media-sidebar::after {
 411      content: "";
 412      display: flex;
 413      clear: both;
 414      height: 24px;
 415  }
 416  
 417  .hide-toolbar .media-sidebar {
 418      bottom: 0;
 419  }
 420  
 421  .media-sidebar h2,
 422  .image-details .media-embed h2 {
 423      position: relative;
 424      font-weight: 600;
 425      text-transform: uppercase;
 426      font-size: 12px;
 427      color: #646970;
 428      margin: 24px 0 8px;
 429  }
 430  
 431  .media-sidebar .setting,
 432  .attachment-details .setting {
 433      display: block;
 434      float: right;
 435      width: 100%;
 436      margin: 0 0 10px;
 437  }
 438  
 439  .attachment-details h2 {
 440      display: grid;
 441      grid-template-columns: auto 5em;
 442  }
 443  
 444  .media-sidebar .collection-settings .setting {
 445      margin: 1px 0;
 446  }
 447  
 448  .media-sidebar .setting.has-description,
 449  .attachment-details .setting.has-description {
 450      margin-bottom: 5px;
 451  }
 452  
 453  .media-sidebar .setting .link-to-custom {
 454      margin: 3px 2px 0;
 455  }
 456  
 457  .media-sidebar .setting span, /* Back-compat for pre-5.3 */
 458  .attachment-details .setting span, /* Back-compat for pre-5.3 */
 459  .media-sidebar .setting .name,
 460  .media-sidebar .setting .value,
 461  .attachment-details .setting .name {
 462      min-width: 30%;
 463      margin-left: 4%;
 464      font-size: 12px;
 465      text-align: left;
 466      word-wrap: break-word;
 467  }
 468  
 469  .media-sidebar .setting .name {
 470      max-width: 80px;
 471  }
 472  
 473  .media-sidebar .setting .value {
 474      text-align: right;
 475  }
 476  
 477  .media-sidebar .setting select {
 478      max-width: 65%;
 479  }
 480  
 481  .media-sidebar .setting input[type="checkbox"],
 482  .media-sidebar .field input[type="checkbox"],
 483  .media-sidebar .setting input[type="radio"],
 484  .media-sidebar .field input[type="radio"],
 485  .attachment-details .setting input[type="checkbox"],
 486  .attachment-details .field input[type="checkbox"],
 487  .attachment-details .setting input[type="radio"],
 488  .attachment-details .field input[type="radio"] {
 489      float: none;
 490      margin: 8px 3px 0;
 491      padding: 0;
 492  }
 493  
 494  .media-sidebar .setting span, /* Back-compat for pre-5.3 */
 495  .attachment-details .setting span, /* Back-compat for pre-5.3 */
 496  .media-sidebar .setting .name,
 497  .media-sidebar .setting .value,
 498  .media-sidebar .checkbox-label-inline,
 499  .attachment-details .setting .name,
 500  .attachment-details .setting .value,
 501  .compat-item label span {
 502      float: right;
 503      min-height: 22px;
 504      padding-top: 8px;
 505      line-height: 1.33333333;
 506      font-weight: 400;
 507      color: #646970;
 508  }
 509  
 510  .media-sidebar .checkbox-label-inline {
 511      font-size: 12px;
 512  }
 513  
 514  .media-sidebar .copy-to-clipboard-container,
 515  .attachment-details .copy-to-clipboard-container {
 516      flex-wrap: wrap;
 517      margin-top: 10px;
 518      margin-right: calc( 35% - 1px );
 519      padding-top: 10px;
 520  }
 521  
 522  /* Needs high specificity. */
 523  .attachment-details .attachment-info .copy-to-clipboard-container {
 524      float: none;
 525  }
 526  
 527  .media-sidebar .copy-to-clipboard-container .success,
 528  .attachment-details .copy-to-clipboard-container .success {
 529      padding: 0;
 530      min-height: 0;
 531      line-height: 2.18181818;
 532      text-align: right;
 533      color: #007017;
 534  }
 535  
 536  .compat-item label span {
 537      text-align: left;
 538  }
 539  
 540  .media-sidebar .setting input[type="text"],
 541  .media-sidebar .setting input[type="password"],
 542  .media-sidebar .setting input[type="email"],
 543  .media-sidebar .setting input[type="number"],
 544  .media-sidebar .setting input[type="search"],
 545  .media-sidebar .setting input[type="tel"],
 546  .media-sidebar .setting input[type="url"],
 547  .media-sidebar .setting textarea,
 548  .media-sidebar .setting .value,
 549  .attachment-details .setting input[type="text"],
 550  .attachment-details .setting input[type="password"],
 551  .attachment-details .setting input[type="email"],
 552  .attachment-details .setting input[type="number"],
 553  .attachment-details .setting input[type="search"],
 554  .attachment-details .setting input[type="tel"],
 555  .attachment-details .setting input[type="url"],
 556  .attachment-details .setting textarea,
 557  .attachment-details .setting .value,
 558  .attachment-details .setting + .description {
 559      box-sizing: border-box;
 560      margin: 1px;
 561      width: 65%;
 562      float: left;
 563  }
 564  
 565  .attachment-details .setting + .description .dashicons {
 566      width: 16px;
 567      height: 16px;
 568      font-size: 16px;
 569      margin-top: 0px;
 570  }
 571  
 572  .media-sidebar .setting .value,
 573  .attachment-details .setting .value,
 574  .attachment-details .setting + .description {
 575      margin: 0 1px;
 576      text-align: right;
 577  }
 578  
 579  .attachment-details .setting + .description {
 580      clear: both;
 581      font-size: 12px;
 582      font-style: normal;
 583      margin-bottom: 10px;
 584  }
 585  
 586  .media-sidebar .setting textarea,
 587  .attachment-details .setting textarea,
 588  .compat-item .field textarea {
 589      height: 62px;
 590      resize: vertical;
 591  }
 592  
 593  .media-sidebar .alt-text textarea,
 594  .attachment-details .alt-text textarea,
 595  .compat-item .alt-text textarea,
 596  .alt-text textarea {
 597      height: 50px;
 598  }
 599  
 600  .compat-item {
 601      float: right;
 602      width: 100%;
 603      overflow: hidden;
 604  }
 605  
 606  .compat-item table {
 607      width: 100%;
 608      table-layout: fixed;
 609      border-spacing: 0;
 610      border: 0;
 611  }
 612  
 613  .compat-item tr {
 614      padding: 2px 0;
 615      display: block;
 616      overflow: hidden;
 617  }
 618  
 619  .compat-item .label,
 620  .compat-item .field {
 621      display: block;
 622      margin: 0;
 623      padding: 0;
 624  }
 625  
 626  .compat-item .label {
 627      min-width: 30%;
 628      margin-left: 4%;
 629      float: right;
 630      text-align: left;
 631  }
 632  
 633  .compat-item .label span {
 634      display: block;
 635      width: 100%;
 636  }
 637  
 638  .compat-item .field {
 639      float: left;
 640      width: 65%;
 641      margin: 1px;
 642  }
 643  
 644  .compat-item .field input[type="text"],
 645  .compat-item .field input[type="password"],
 646  .compat-item .field input[type="email"],
 647  .compat-item .field input[type="number"],
 648  .compat-item .field input[type="search"],
 649  .compat-item .field input[type="tel"],
 650  .compat-item .field input[type="url"],
 651  .compat-item .field textarea {
 652      width: 100%;
 653      margin: 0;
 654      box-sizing: border-box;
 655  }
 656  
 657  .sidebar-for-errors .attachment-details,
 658  .sidebar-for-errors .compat-item,
 659  .sidebar-for-errors .media-sidebar .media-progress-bar,
 660  .sidebar-for-errors .upload-details {
 661      display: none !important;
 662  }
 663  
 664  /**
 665   * Menu
 666   */
 667  .media-menu {
 668      position: absolute;
 669      top: 0;
 670      right: 0;
 671      left: 0;
 672      bottom: 0;
 673      margin: 0;
 674      padding: 50px 0 10px;
 675      background: #f6f7f7;
 676      border-left-width: 1px;
 677      border-left-style: solid;
 678      border-left-color: #c3c4c7;
 679      -webkit-user-select: none;
 680      user-select: none;
 681  }
 682  
 683  .media-menu .media-menu-item {
 684      display: block;
 685      box-sizing: border-box;
 686      width: 100%;
 687      position: relative;
 688      border: 0;
 689      margin: 0;
 690      padding: 8px 20px;
 691      font-size: 14px;
 692      line-height: 1.28571428;
 693      background: transparent;
 694      color: var(--wp-admin-theme-color, #3858e9);
 695      text-align: right;
 696      text-decoration: none;
 697      cursor: pointer;
 698  }
 699  
 700  .media-menu .media-menu-item:hover {
 701      background: rgba(0, 0, 0, 0.04);
 702  }
 703  
 704  .media-menu .media-menu-item:active {
 705      color: var(--wp-admin-theme-color, #3858e9);
 706      outline: none;
 707  }
 708  
 709  .media-menu .active,
 710  .media-menu .active:hover {
 711      color: #1d2327;
 712      font-weight: 600;
 713  }
 714  
 715  .media-menu .media-menu-item:focus {
 716      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
 717      color: var(--wp-admin-theme-color-darker-20, #183ad6);
 718      /* Only visible in Windows High Contrast mode */
 719      outline: 2px solid transparent;
 720  }
 721  
 722  .media-menu .separator {
 723      height: 0;
 724      margin: 12px 20px;
 725      padding: 0;
 726      border-top: 1px solid #dcdcde;
 727  }
 728  
 729  /**
 730   * Menu
 731   */
 732  .media-router {
 733      position: relative;
 734      padding: 0 6px;
 735      margin: 0;
 736      clear: both;
 737  }
 738  
 739  .media-router .media-menu-item {
 740      position: relative;
 741      float: right;
 742      border: 0;
 743      margin: 0;
 744      padding: 8px 10px 9px;
 745      height: 18px;
 746      line-height: 1.28571428;
 747      font-size: 14px;
 748      text-decoration: none;
 749      background: transparent;
 750      cursor: pointer;
 751      transition: none;
 752  }
 753  
 754  .media-router .media-menu-item:last-child {
 755      border-left: 0;
 756  }
 757  
 758  .media-router .media-menu-item:hover,
 759  .media-router .media-menu-item:active {
 760      color: var(--wp-admin-theme-color, #3858e9);
 761  }
 762  
 763  .media-router .active,
 764  .media-router .active:hover {
 765      color: #1d2327;
 766  }
 767  
 768  .media-router .media-menu-item:focus {
 769      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
 770      color: var(--wp-admin-theme-color-darker-20, #183ad6);
 771      /* Only visible in Windows High Contrast mode */
 772      outline: 2px solid transparent;
 773      z-index: 1;
 774  }
 775  
 776  .media-router .active,
 777  .media-router .media-menu-item.active:last-child {
 778      margin: -1px -1px 0;
 779      background: #fff;
 780      border: 1px solid #dcdcde;
 781      border-bottom: none;
 782  }
 783  
 784  .media-router .active:after {
 785      display: none;
 786  }
 787  
 788  /**
 789   * Frame
 790   */
 791  .media-frame {
 792      overflow: hidden;
 793      position: absolute;
 794      top: 0;
 795      right: 0;
 796      left: 0;
 797      bottom: 0;
 798  }
 799  
 800  .media-frame-menu {
 801      position: absolute;
 802      top: 0;
 803      right: 0;
 804      bottom: 0;
 805      width: 200px;
 806      z-index: 150;
 807  }
 808  
 809  .media-frame-title {
 810      position: absolute;
 811      top: 0;
 812      right: 200px;
 813      left: 0;
 814      height: 50px;
 815      z-index: 200;
 816  }
 817  
 818  .media-frame-router {
 819      position: absolute;
 820      top: 50px;
 821      right: 200px;
 822      left: 0;
 823      height: 36px;
 824      z-index: 200;
 825  }
 826  
 827  .media-frame-content {
 828      position: absolute;
 829      top: 84px;
 830      right: 200px;
 831      left: 0;
 832      bottom: 61px;
 833      height: auto;
 834      width: auto;
 835      margin: 0;
 836      overflow: auto;
 837      background: #fff;
 838      border-top: 1px solid #dcdcde;
 839  }
 840  
 841  .media-frame-toolbar {
 842      position: absolute;
 843      right: 200px;
 844      left: 0;
 845      z-index: 100;
 846      bottom: 60px;
 847      height: auto;
 848  }
 849  
 850  .media-frame.hide-menu .media-frame-title,
 851  .media-frame.hide-menu .media-frame-router,
 852  .media-frame.hide-menu .media-frame-toolbar,
 853  .media-frame.hide-menu .media-frame-content {
 854      right: 0;
 855  }
 856  
 857  .media-frame.hide-toolbar .media-frame-content {
 858      bottom: 0;
 859  }
 860  
 861  .media-frame.hide-router .media-frame-content {
 862      top: 50px;
 863  }
 864  
 865  .media-frame.hide-menu .media-frame-menu,
 866  .media-frame.hide-menu .media-frame-menu-heading,
 867  .media-frame.hide-router .media-frame-router,
 868  .media-frame.hide-toolbar .media-frame-toolbar {
 869      display: none;
 870  }
 871  
 872  .media-frame-title h1 {
 873      padding: 0 16px;
 874      font-size: 22px;
 875      line-height: 2.27272727;
 876      margin: 0;
 877  }
 878  
 879  .media-frame-menu-heading,
 880  .media-attachments-filter-heading {
 881      position: absolute;
 882      right: 20px;
 883      top: 22px;
 884      margin: 0;
 885      font-size: 13px;
 886      line-height: 1;
 887      /* Above the media-frame-menu. */
 888      z-index: 151;
 889  }
 890  
 891  .media-attachments-filter-heading {
 892      top: 10px;
 893      right: 16px;
 894  }
 895  
 896  .mode-grid .media-attachments-filter-heading {
 897      top: 0;
 898      right: -9999px;
 899  }
 900  
 901  .mode-grid .media-frame-actions-heading {
 902      display: none;
 903  }
 904  
 905  .wp-core-ui .button.media-frame-menu-toggle {
 906      display: none;
 907  }
 908  
 909  .media-frame-title .suggested-dimensions {
 910      font-size: 14px;
 911      float: left;
 912      margin-left: 20px;
 913  }
 914  
 915  .media-frame-content .crop-content {
 916      height: 100%;
 917  }
 918  
 919  .options-general-php .crop-content.site-icon,
 920  .wp-customizer:not(.mobile) .media-frame-content .crop-content.site-icon {
 921      margin-left: 300px;
 922  }
 923  
 924  .media-frame-content .crop-content .crop-image {
 925      display: block;
 926      margin: auto;
 927      max-width: 100%;
 928      max-height: 100%;
 929  }
 930  
 931  .media-frame-content .crop-content .upload-errors {
 932      position: absolute;
 933      width: 300px;
 934      top: 50%;
 935      right: 50%;
 936      margin-right: -150px;
 937      margin-left: -150px;
 938      z-index: 600000;
 939  }
 940  
 941  /**
 942   * Iframes
 943   */
 944  .media-frame .media-iframe {
 945      overflow: hidden;
 946  }
 947  
 948  .media-frame .media-iframe,
 949  .media-frame .media-iframe iframe {
 950      height: 100%;
 951      width: 100%;
 952      border: 0;
 953  }
 954  
 955  /**
 956   * Attachment Browser Filters
 957   */
 958  .media-frame select.attachment-filters {
 959      min-height: 32px;
 960      line-height: 2.14285714; /* 30px for 32px height with 14px font */
 961      padding: 0 8px 0 24px;
 962      margin-left: 2%;
 963  }
 964  
 965  .media-frame select.attachment-filters:last-of-type {
 966      margin-left: 0;
 967  }
 968  
 969  /**
 970   * Search
 971   */
 972  .media-frame .search {
 973      margin: 0;
 974      padding: 4px;
 975      font-size: 13px;
 976      color: #3c434a;
 977      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 978      -webkit-appearance: none;
 979  }
 980  
 981  .media-toolbar-primary .search {
 982      max-width: 100%;
 983  }
 984  
 985  .media-modal .media-frame .media-search-input-label {
 986      display: block;
 987  }
 988  
 989  /**
 990   * Attachments
 991   */
 992  .wp-core-ui .attachments {
 993      margin: 0;
 994      -webkit-overflow-scrolling: touch;
 995  }
 996  
 997  /**
 998   * Attachment
 999   */
1000  .wp-core-ui .attachment {
1001      position: relative;
1002      float: right;
1003      padding: 8px;
1004      margin: 0;
1005      color: #3c434a;
1006      cursor: pointer;
1007      list-style: none;
1008      text-align: center;
1009      -webkit-user-select: none;
1010      user-select: none;
1011      width: 25%;
1012      box-sizing: border-box;
1013  }
1014  
1015  .wp-core-ui .attachment:not(:has(.filename))::after {
1016      content: attr(aria-label);
1017      position: absolute;
1018      bottom: 8px;
1019      width: calc( 100% - 16px );
1020      right: 8px;
1021      font-size: 12px;
1022      background-color: rgba(255, 255, 255, 0.8);
1023      color: #1d2327;
1024      max-height: 3rem;
1025      overflow: hidden;
1026      text-align: start;
1027      padding: 5px 10px;
1028      word-wrap: break-word;
1029      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
1030      box-sizing: border-box;
1031      font-weight: 600;
1032  }
1033  
1034  /* Do not show the aria-label overlay on thumbnails in the gallery selection strip. */
1035  .wp-core-ui .media-selection .attachment::after {
1036      content: none;
1037  }
1038  
1039  .wp-core-ui .attachment:focus,
1040  .wp-core-ui .selected.attachment:focus,
1041  .wp-core-ui .attachment.details:focus {
1042      box-shadow:
1043          inset 0 0 2px 3px #fff,
1044          inset 0 0 0 7px var(--wp-admin-theme-color, #3858e9);
1045      /* Only visible in Windows High Contrast mode */
1046      outline: 2px solid transparent;
1047      outline-offset: -6px;
1048  }
1049  
1050  .wp-core-ui .selected.attachment {
1051      box-shadow:
1052          inset 0 0 0 5px #fff,
1053          inset 0 0 0 7px #c3c4c7;
1054  }
1055  
1056  .wp-core-ui .attachment.details {
1057      box-shadow:
1058          inset 0 0 0 3px #fff,
1059          inset 0 0 0 7px var(--wp-admin-theme-color-darker-20, #183ad6);
1060  }
1061  
1062  .wp-core-ui .attachment-preview {
1063      position: relative;
1064      box-shadow:
1065          inset 0 0 15px rgba(0, 0, 0, 0.1),
1066          inset 0 0 0 1px rgba(0, 0, 0, 0.05);
1067      background: #f0f0f1;
1068      cursor: pointer;
1069  }
1070  
1071  .wp-core-ui .attachment-preview:before {
1072      content: "";
1073      display: block;
1074      padding-top: 100%;
1075  }
1076  
1077  .wp-core-ui .attachment .icon {
1078      margin: 0 auto;
1079      overflow: hidden;
1080  }
1081  
1082  .wp-core-ui .attachment .thumbnail {
1083      overflow: hidden;
1084      position: absolute;
1085      top: 0;
1086      left: 0;
1087      bottom: 0;
1088      right: 0;
1089      opacity: 1;
1090      transition: opacity .1s;
1091  }
1092  
1093  .wp-core-ui .attachment .portrait img {
1094      max-width: 100%;
1095  }
1096  
1097  .wp-core-ui .attachment .landscape img {
1098      max-height: 100%;
1099  }
1100  
1101  .wp-core-ui .attachment .thumbnail:after {
1102      content: "";
1103      display: block;
1104      position: absolute;
1105      top: 0;
1106      right: 0;
1107      left: 0;
1108      bottom: 0;
1109      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
1110      overflow: hidden;
1111  }
1112  
1113  .wp-core-ui .attachment .thumbnail img {
1114      top: 0;
1115      right: 0;
1116  }
1117  
1118  .wp-core-ui .attachment .thumbnail .centered {
1119      position: absolute;
1120      top: 0;
1121      right: 0;
1122      width: 100%;
1123      height: 100%;
1124      transform: translate( -50%, 50% );
1125  }
1126  
1127  .wp-core-ui .attachment .thumbnail .centered img {
1128      transform: translate( 50%, -50% );
1129  }
1130  
1131  .wp-core-ui .attachments-browser .attachment .thumbnail .centered img.icon {
1132      transform: translate( 50%, -70% );
1133  }
1134  
1135  .wp-core-ui .attachment .filename {
1136      position: absolute;
1137      right: 0;
1138      left: 0;
1139      bottom: 0;
1140      overflow: hidden;
1141      max-height: 100%;
1142      word-wrap: break-word;
1143      text-align: center;
1144      font-weight: 600;
1145      background: rgba(255, 255, 255, 0.8);
1146      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
1147  }
1148  
1149  .wp-core-ui .attachment .filename div {
1150      padding: 5px 10px;
1151  }
1152  
1153  .wp-core-ui .attachment .thumbnail img {
1154      position: absolute;
1155  }
1156  
1157  .wp-core-ui .attachment-close {
1158      display: block;
1159      position: absolute;
1160      top: 5px;
1161      left: 5px;
1162      height: 22px;
1163      width: 22px;
1164      padding: 0;
1165      background-color: #fff;
1166      border-radius: 3px;
1167      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
1168      transition: none;
1169  }
1170  
1171  .wp-core-ui .attachment-close .media-modal-icon {
1172      display: inline-block;
1173      background-position: -96px 4px;
1174      height: 22px;
1175      width: 22px;
1176  }
1177  
1178  .wp-core-ui .attachment-close:hover .media-modal-icon,
1179  .wp-core-ui .attachment-close:focus .media-modal-icon {
1180      background-position: -36px 4px;
1181  }
1182  
1183  .wp-core-ui .attachment .check {
1184      display: none;
1185      height: 24px;
1186      width: 24px;
1187      padding: 0;
1188      border: 0;
1189      position: absolute;
1190      z-index: 10;
1191      top: 0;
1192      left: 0;
1193      outline: none;
1194      background: #f0f0f1;
1195      cursor: pointer;
1196      box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba(0, 0, 0, 0.15);
1197  }
1198  
1199  .wp-core-ui .attachment .check .media-modal-icon {
1200      display: block;
1201      background-position: -1px 0;
1202      height: 15px;
1203      width: 15px;
1204      margin: 5px;
1205  }
1206  
1207  .wp-core-ui .attachment .check:hover .media-modal-icon {
1208      background-position: -40px 0;
1209  }
1210  
1211  .wp-core-ui .attachment.selected .check {
1212      display: block;
1213  }
1214  
1215  .wp-core-ui .attachment.details .check,
1216  .wp-core-ui .attachment.selected .check:focus,
1217  .wp-core-ui .media-frame.mode-grid .attachment.selected .check {
1218      background-color: var(--wp-admin-theme-color, #3858e9);
1219      box-shadow:
1220          0 0 0 1px #fff,
1221          0 0 0 2px var(--wp-admin-theme-color, #3858e9);
1222  }
1223  
1224  .wp-core-ui .attachment.selected .check:focus {
1225      /* Only visible in Windows High Contrast mode */
1226      outline: 2px solid transparent;
1227  }
1228  
1229  .wp-core-ui .attachment.details .check .media-modal-icon,
1230  .wp-core-ui .media-frame.mode-grid .attachment.selected .check .media-modal-icon {
1231      background-position: -21px 0;
1232  }
1233  
1234  .wp-core-ui .attachment.details .check:hover .media-modal-icon,
1235  .wp-core-ui .attachment.selected .check:focus .media-modal-icon,
1236  .wp-core-ui .media-frame.mode-grid .attachment.selected .check:hover .media-modal-icon {
1237      background-position: -60px 0;
1238  }
1239  
1240  .wp-core-ui .media-frame .attachment .describe {
1241      position: relative;
1242      display: block;
1243      width: 100%;
1244      margin: 0;
1245      padding: 0 8px;
1246      font-size: 12px;
1247      border-radius: 0;
1248  }
1249  
1250  /**
1251   * Attachments Browser
1252   */
1253  .media-frame .attachments-browser {
1254      position: relative;
1255      width: 100%;
1256      height: 100%;
1257      overflow: hidden;
1258  }
1259  
1260  .attachments-browser .media-toolbar {
1261      left: 300px;
1262      background: #fff;
1263      padding: 12px 16px;
1264  }
1265  
1266  .attachments-browser.hide-sidebar .media-toolbar {
1267      left: 0;
1268  }
1269  
1270  .attachments-browser .media-toolbar-primary > .media-button,
1271  .attachments-browser .media-toolbar-primary > .media-button-group,
1272  .attachments-browser .media-toolbar-secondary > .media-button,
1273  .attachments-browser .media-toolbar-secondary > .media-button-group {
1274      margin: 10px 0;
1275  }
1276  
1277  .attachments-browser .attachments {
1278      padding: 2px 8px 8px;
1279  }
1280  
1281  .attachments-browser:not(.has-load-more) .attachments,
1282  .attachments-browser.has-load-more .attachments-wrapper,
1283  .attachments-browser .uploader-inline {
1284      position: absolute;
1285      top: 72px;
1286      right: 0;
1287      left: 300px;
1288      bottom: 0;
1289      overflow: auto;
1290      outline: none;
1291  }
1292  
1293  .attachments-browser .uploader-inline.hidden {
1294      display: none;
1295  }
1296  
1297  .attachments-browser .media-toolbar-primary {
1298      max-width: calc( 33% - 20px );
1299  }
1300  
1301  .mode-grid .attachments-browser .media-toolbar-primary {
1302      display: flex;
1303      align-items: center;
1304      column-gap: .5rem;
1305      margin: 11px 0;
1306  }
1307  
1308  .mode-grid .attachments-browser .media-toolbar-mode-select .media-toolbar-primary {
1309      display: none;
1310  }
1311  
1312  .attachments-browser .media-toolbar-secondary {
1313      max-width: 66%;
1314  }
1315  
1316  .uploader-inline .close {
1317      background-color: transparent;
1318      border: 0;
1319      cursor: pointer;
1320      height: 48px;
1321      outline: none;
1322      padding: 0;
1323      position: absolute;
1324      left: 2px;
1325      text-align: center;
1326      top: 2px;
1327      width: 48px;
1328      z-index: 1;
1329  }
1330  
1331  .uploader-inline .close:before {
1332      font: normal 30px/1 dashicons !important;
1333      color: #50575e;
1334      display: inline-block;
1335      content: "\f335";
1336      content: "\f335" / '';
1337      font-weight: 300;
1338      margin-top: 1px;
1339  }
1340  
1341  .uploader-inline .close:focus {
1342      outline: 1px solid var(--wp-admin-theme-color, #3858e9);
1343      box-shadow: 0 0 3px rgba(var(--wp-admin-theme-color--rgb, 56, 88, 233), 0.8);
1344  }
1345  
1346  .attachments-browser.hide-sidebar .attachments,
1347  .attachments-browser.hide-sidebar .uploader-inline {
1348      left: 0;
1349      margin-left: 0;
1350  }
1351  
1352  .attachments-browser .instructions {
1353      display: inline-block;
1354      margin-top: 16px;
1355      line-height: 1.38461538;
1356      font-size: 13px;
1357      color: #646970;
1358  }
1359  
1360  .attachments-browser .no-media {
1361      padding: 2em 2em 0 0;
1362  }
1363  
1364  .more-loaded .attachment:not(.found-media) {
1365      background: #dcdcde;
1366  }
1367  
1368  .load-more-wrapper {
1369      clear: both;
1370      display: flex;
1371      flex-wrap: wrap;
1372      align-items: center;
1373      justify-content: center;
1374      padding: 1em 0;
1375  }
1376  
1377  .load-more-wrapper .load-more-count {
1378      min-width: 100%;
1379      margin: 0 0 1em;
1380      text-align: center;
1381  }
1382  
1383  .load-more-wrapper .load-more {
1384      margin: 0;
1385  }
1386  
1387  /* Needs high specificity. */
1388  .media-frame .load-more-wrapper .load-more + .spinner {
1389      float: none;
1390      margin: 0 10px 0 -30px;
1391  }
1392  
1393  /* Reset spinner margin when the button is hidden to avoid horizontal scrollbar. */
1394  .media-frame .load-more-wrapper .load-more.hidden + .spinner {
1395      margin: 0;
1396  }
1397  
1398  /* Force a new row within the flex container. */
1399  .load-more-wrapper::after {
1400      content: "";
1401      min-width: 100%;
1402      order: 1;
1403  }
1404  
1405  .load-more-wrapper .load-more-jump {
1406      margin: 0 12px 0 0;
1407  }
1408  
1409  .attachment.new-media {
1410      outline: 2px dotted #c3c4c7;
1411  }
1412  
1413  /**
1414   * Progress Bar
1415   */
1416  .media-progress-bar {
1417      position: relative;
1418      height: 10px;
1419      width: 70%;
1420      margin: 10px auto;
1421      border-radius: 10px;
1422      background: #dcdcde;
1423      background: rgba(0, 0, 0, 0.1);
1424  }
1425  
1426  .media-progress-bar div {
1427      height: 10px;
1428      min-width: 20px;
1429      width: 0;
1430      background: var(--wp-admin-theme-color, #3858e9);
1431      border-radius: 10px;
1432      transition: width 300ms;
1433  }
1434  
1435  .media-uploader-status .media-progress-bar {
1436      display: none;
1437      width: 100%;
1438  }
1439  
1440  .uploading.media-uploader-status .media-progress-bar {
1441      display: block;
1442  }
1443  
1444  .attachment-preview .media-progress-bar {
1445      position: absolute;
1446      top: 50%;
1447      right: 15%;
1448      width: 70%;
1449      margin: -5px 0 0;
1450  }
1451  
1452  .media-uploader-status {
1453      position: relative;
1454      margin: 0 auto;
1455      padding-bottom: 10px;
1456      max-width: 400px;
1457  }
1458  
1459  .uploader-inline .media-uploader-status h2 {
1460      display: none;
1461  }
1462  
1463  .media-uploader-status .upload-details {
1464      display: none;
1465      font-size: 12px;
1466      color: #646970;
1467  }
1468  
1469  .uploading.media-uploader-status .upload-details {
1470      display: block;
1471  }
1472  
1473  .media-uploader-status .upload-detail-separator {
1474      padding: 0 4px;
1475  }
1476  
1477  .media-uploader-status .upload-count {
1478      color: #3c434a;
1479  }
1480  
1481  .media-uploader-status .upload-dismiss-errors,
1482  .media-uploader-status .upload-errors {
1483      display: none;
1484  }
1485  
1486  .errors.media-uploader-status .upload-dismiss-errors,
1487  .errors.media-uploader-status .upload-errors {
1488      display: block;
1489  }
1490  
1491  .media-uploader-status .upload-dismiss-errors {
1492      transition: none;
1493      text-decoration: none;
1494  }
1495  
1496  .upload-errors .upload-error {
1497      padding: 12px;
1498      margin-bottom: 12px;
1499      background: #fff;
1500      border-right: 4px solid #d63638;
1501      box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
1502  }
1503  
1504  .uploader-inline .upload-errors .upload-error {
1505      padding: 12px 30px;
1506      background-color: #fcf0f1;
1507      box-shadow: none;
1508  }
1509  
1510  .upload-errors .upload-error-filename {
1511      font-weight: 600;
1512  }
1513  
1514  .upload-errors .upload-error-message {
1515      display: block;
1516      padding-top: 8px;
1517      word-wrap: break-word;
1518  }
1519  
1520  /**
1521   * Window and Editor uploaders used to display "drop zones"
1522   */
1523  .uploader-window,
1524  .wp-editor-wrap .uploader-editor {
1525      top: 0;
1526      right: 0;
1527      left: 0;
1528      bottom: 0;
1529      text-align: center;
1530      display: none;
1531  }
1532  
1533  .uploader-window {
1534      position: fixed;
1535      z-index: 250000;
1536      opacity: 0; /* Only the inline uploader is animated with JS, the editor one isn't */
1537      transition: opacity 250ms;
1538  }
1539  
1540  .wp-editor-wrap .uploader-editor {
1541      position: absolute;
1542      z-index: 99998; /* under the toolbar */
1543      background: rgba(140, 143, 148, 0.9);
1544  }
1545  
1546  .uploader-window,
1547  .wp-editor-wrap .uploader-editor.droppable {
1548      background-color: rgba(var(--wp-admin-theme-color--rgb, 56, 88, 233), 0.9);
1549  }
1550  
1551  .uploader-window-content,
1552  .wp-editor-wrap .uploader-editor-content {
1553      position: absolute;
1554      top: 10px;
1555      right: 10px;
1556      left: 10px;
1557      bottom: 10px;
1558      border: 1px dashed #fff;
1559  }
1560  
1561  /* uploader drop-zone title */
1562  .uploader-window h1, /* Back-compat for pre-5.3 */
1563  .uploader-window .uploader-editor-title,
1564  .wp-editor-wrap .uploader-editor .uploader-editor-title {
1565      position: absolute;
1566      top: 50%;
1567      right: 0;
1568      left: 0;
1569      transform: translateY(-50%);
1570      font-size: 3em;
1571      line-height: 1.3;
1572      font-weight: 600;
1573      color: #fff;
1574      margin: 0;
1575      padding: 0 10px;
1576  }
1577  
1578  .wp-editor-wrap .uploader-editor .uploader-editor-title {
1579      display: none;
1580  }
1581  
1582  .wp-editor-wrap .uploader-editor.droppable .uploader-editor-title {
1583      display: block;
1584  }
1585  
1586  .uploader-window .media-progress-bar {
1587      margin-top: 20px;
1588      max-width: 300px;
1589      background: transparent;
1590      border-color: #fff;
1591      display: none;
1592  }
1593  
1594  .uploader-window .media-progress-bar div {
1595      background: #fff;
1596  }
1597  
1598  .uploading .uploader-window .media-progress-bar {
1599      display: block;
1600  }
1601  
1602  .media-frame .uploader-inline {
1603      margin-bottom: 20px;
1604      padding: 0;
1605      text-align: center;
1606  }
1607  
1608  .uploader-inline-content {
1609      position: absolute;
1610      top: 30%;
1611      right: 0;
1612      left: 0;
1613  }
1614  
1615  .uploader-inline-content .upload-ui {
1616      margin: 2em 0;
1617  }
1618  
1619  .uploader-inline-content .post-upload-ui {
1620      margin-bottom: 2em;
1621  }
1622  
1623  .uploader-inline .has-upload-message .upload-ui {
1624      margin: 0 0 4em;
1625  }
1626  
1627  .uploader-inline h2 {
1628      font-size: 20px;
1629      line-height: 1.4;
1630      font-weight: 400;
1631      margin: 0;
1632  }
1633  
1634  .uploader-inline .has-upload-message .upload-instructions {
1635      font-size: 14px;
1636      color: #3c434a;
1637      font-weight: 400;
1638  }
1639  
1640  .uploader-inline .drop-instructions {
1641      display: none;
1642  }
1643  
1644  .supports-drag-drop .uploader-inline .drop-instructions {
1645      display: block;
1646  }
1647  
1648  .uploader-inline p {
1649      margin: 0.5em 0;
1650  }
1651  
1652  .uploader-inline .media-progress-bar {
1653      display: none;
1654  }
1655  
1656  .uploading.uploader-inline .media-progress-bar {
1657      display: block;
1658  }
1659  
1660  .uploader-inline .browser {
1661      display: inline-block !important;
1662  }
1663  
1664  /**
1665   * Selection
1666   */
1667  .media-selection {
1668      position: absolute;
1669      top: 0;
1670      right: 0;
1671      left: 350px;
1672      height: 60px;
1673      padding: 0 16px 0 0;
1674      overflow: hidden;
1675      white-space: nowrap;
1676  }
1677  
1678  .media-selection .selection-info {
1679      display: inline-block;
1680      font-size: 12px;
1681      height: 60px;
1682      margin-left: 10px;
1683      vertical-align: top;
1684  }
1685  
1686  .media-selection.empty,
1687  .media-selection.editing {
1688      display: none;
1689  }
1690  
1691  .media-selection.one .edit-selection {
1692      display: none;
1693  }
1694  
1695  .media-selection .count {
1696      display: block;
1697      padding-top: 12px;
1698      font-size: 14px;
1699      line-height: 1.42857142;
1700      font-weight: 600;
1701  }
1702  
1703  .media-selection .button-link {
1704      float: right;
1705      padding: 1px 8px;
1706      margin: 1px -8px 1px 8px;
1707      line-height: 1.4;
1708      border-left: 1px solid #dcdcde;
1709      color: var(--wp-admin-theme-color, #3858e9);
1710      text-decoration: none;
1711  }
1712  
1713  .media-selection .button-link:hover,
1714  .media-selection .button-link:focus {
1715      color: var(--wp-admin-theme-color-darker-20, #183ad6);
1716  }
1717  
1718  .media-selection .button-link:last-child {
1719      border-left: 0;
1720      margin-left: 0;
1721  }
1722  
1723  .selection-info .clear-selection {
1724      color: #d63638;
1725  }
1726  
1727  .selection-info .clear-selection:hover,
1728  .selection-info .clear-selection:focus {
1729      color: #d63638;
1730  }
1731  
1732  .media-selection .selection-view {
1733      display: inline-block;
1734      vertical-align: top;
1735  }
1736  
1737  .media-selection .attachments {
1738      display: inline-block;
1739      height: 48px;
1740      margin: 6px;
1741      padding: 0;
1742      overflow: hidden;
1743      vertical-align: top;
1744  }
1745  
1746  .media-selection .attachment {
1747      width: 40px;
1748      padding: 0;
1749      margin: 4px;
1750  }
1751  
1752  .media-selection .attachment .thumbnail {
1753      top: 0;
1754      left: 0;
1755      bottom: 0;
1756      right: 0;
1757  }
1758  
1759  .media-selection .attachment .icon {
1760      width: 50%;
1761  }
1762  
1763  .media-selection .attachment-preview {
1764      box-shadow: none;
1765      background: none;
1766  }
1767  
1768  .wp-core-ui .media-selection .attachment:focus,
1769  .wp-core-ui .media-selection .selected.attachment:focus,
1770  .wp-core-ui .media-selection .attachment.details:focus {
1771      box-shadow:
1772          0 0 0 1px #fff,
1773          0 0 2px 3px var(--wp-admin-theme-color, #3858e9);
1774      /* Only visible in Windows High Contrast mode */
1775      outline: 2px solid transparent;
1776  }
1777  
1778  .wp-core-ui .media-selection .selected.attachment {
1779      box-shadow: none;
1780  }
1781  
1782  .wp-core-ui .media-selection .attachment.details {
1783      box-shadow:
1784          0 0 0 1px #fff,
1785          0 0 0 3px var(--wp-admin-theme-color, #3858e9);
1786  }
1787  
1788  .media-selection:after {
1789      content: "";
1790      display: block;
1791      position: absolute;
1792      top: 0;
1793      left: 0;
1794      bottom: 0;
1795      width: 25px;
1796      background-image: linear-gradient(to right,#fff,rgba(255, 255, 255, 0));
1797  }
1798  
1799  .media-selection .attachment .filename {
1800      display: none;
1801  }
1802  
1803  /**
1804   * Spinner
1805   */
1806  .media-frame .spinner {
1807      background: url(../images/spinner.gif) no-repeat;
1808      background-size: 20px 20px;
1809      float: left;
1810      display: inline-block;
1811      visibility: hidden;
1812      opacity: 0.7;
1813      filter: alpha(opacity=70);
1814      width: 20px;
1815      height: 20px;
1816      margin: 0;
1817      vertical-align: middle;
1818  }
1819  
1820  .media-frame .media-sidebar .settings-save-status .spinner {
1821      position: absolute;
1822      left: 0;
1823      top: 0;
1824  }
1825  
1826  .media-frame.mode-grid .spinner {
1827      margin: 0;
1828      float: none;
1829      vertical-align: middle;
1830  }
1831  
1832  .media-frame .instructions + .spinner.is-active {
1833      vertical-align: middle;
1834  }
1835  
1836  .media-frame .spinner.is-active {
1837      visibility: visible;
1838  }
1839  
1840  .media-bg-overlay {
1841      position: absolute;
1842  }
1843  
1844  /**
1845   * Attachment Details
1846   */
1847  .attachment-details {
1848      position: relative;
1849      overflow: auto;
1850  }
1851  
1852  .attachment-details .settings-save-status {
1853      text-align: left;
1854      text-transform: none;
1855      font-weight: 400;
1856  }
1857  
1858  .attachment-details .settings-save-status .spinner {
1859      float: none;
1860      margin-right: 5px;
1861  }
1862  
1863  .attachment-details .settings-save-status .saved {
1864      display: none;
1865  }
1866  
1867  .attachment-details.save-waiting .settings-save-status .spinner {
1868      visibility: visible;
1869  }
1870  
1871  .attachment-details.save-complete .settings-save-status .saved {
1872      display: inline-block;
1873  }
1874  
1875  .attachment-info {
1876      overflow: hidden;
1877      min-height: 60px;
1878      margin-bottom: 16px;
1879      line-height: 1.5;
1880      color: #646970;
1881      border-bottom: 1px solid #dcdcde;
1882      padding-bottom: 11px;
1883  }
1884  
1885  .attachment-info .wp-media-wrapper {
1886      margin-bottom: 8px;
1887  }
1888  
1889  .attachment-info .wp-media-wrapper.wp-audio {
1890      margin-top: 13px;
1891  }
1892  
1893  .attachment-info .filename {
1894      font-weight: 600;
1895      color: #3c434a;
1896      word-wrap: break-word;
1897  }
1898  
1899  .attachment-info .thumbnail {
1900      position: relative;
1901      float: right;
1902      max-width: 120px;
1903      max-height: 120px;
1904      margin-top: 5px;
1905      margin-left: 10px;
1906      margin-bottom: 5px;
1907  }
1908  
1909  .uploading .attachment-info .thumbnail {
1910      width: 120px;
1911      height: 80px;
1912      box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.1);
1913  }
1914  
1915  .uploading .attachment-info .media-progress-bar {
1916      margin-top: 35px;
1917  }
1918  
1919  .attachment-info .thumbnail-image:after {
1920      content: "";
1921      display: block;
1922      position: absolute;
1923      top: 0;
1924      right: 0;
1925      left: 0;
1926      bottom: 0;
1927      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
1928      overflow: hidden;
1929  }
1930  
1931  .attachment-info .thumbnail img {
1932      display: block;
1933      max-width: 120px;
1934      max-height: 120px;
1935      margin: 0 auto;
1936  }
1937  
1938  .attachment-info .details {
1939      float: right;
1940      font-size: 12px;
1941      max-width: 100%;
1942  }
1943  
1944  .attachment-info .edit-attachment,
1945  .attachment-info .delete-attachment,
1946  .attachment-info .trash-attachment,
1947  .attachment-info .untrash-attachment {
1948      display: block;
1949      text-decoration: none;
1950      white-space: nowrap;
1951  }
1952  
1953  .attachment-details.needs-refresh .attachment-info .edit-attachment {
1954      display: none;
1955  }
1956  
1957  .attachment-info .edit-attachment {
1958      display: block;
1959  }
1960  
1961  .media-modal .delete-attachment,
1962  .media-modal .trash-attachment,
1963  .media-modal .untrash-attachment {
1964      display: inline;
1965      padding: 0;
1966      color: #d63638;
1967  }
1968  
1969  .media-modal .delete-attachment:hover,
1970  .media-modal .delete-attachment:focus,
1971  .media-modal .trash-attachment:hover,
1972  .media-modal .trash-attachment:focus,
1973  .media-modal .untrash-attachment:hover,
1974  .media-modal .untrash-attachment:focus {
1975      color: #d63638;
1976  }
1977  
1978  /**
1979   * Attachment Display Settings
1980   */
1981  .attachment-display-settings {
1982      width: 100%;
1983      float: right;
1984      overflow: hidden;
1985  }
1986  
1987  .collection-settings {
1988      overflow: hidden;
1989  }
1990  
1991  .collection-settings .setting input[type="checkbox"] {
1992      float: right;
1993      margin-left: 8px;
1994  }
1995  
1996  .collection-settings .setting span, /* Back-compat for pre-5.3 */
1997  .collection-settings .setting .name {
1998      min-width: inherit;
1999  }
2000  
2001  /**
2002   * Image Editor
2003   */
2004  .media-modal .imgedit-wrap {
2005      position: static;
2006  }
2007  
2008  .media-modal .imgedit-wrap .imgedit-panel-content {
2009      padding: 16px 16px 0;
2010      overflow: visible;
2011  }
2012  
2013  /*
2014   * Implementation of bottom padding in overflow content differs across browsers.
2015   * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
2016   */
2017  .media-modal .imgedit-wrap .imgedit-save-target {
2018      margin: 8px 0 24px;
2019  }
2020  
2021  .media-modal .imgedit-group {
2022      background: none;
2023      border: none;
2024      box-shadow: none;
2025      margin: 0;
2026      padding: 0;
2027      position: relative; /* RTL fix, #WP29352 */
2028  }
2029  
2030  .media-modal .imgedit-group.imgedit-panel-active {
2031      margin-bottom: 16px;
2032      padding-bottom: 16px;
2033  }
2034  
2035  .media-modal .imgedit-group-top {
2036      margin: 0;
2037  }
2038  
2039  .media-modal .imgedit-group-top h2,
2040  .media-modal .imgedit-group-top h2 .button-link {
2041      display: inline-block;
2042      text-transform: uppercase;
2043      font-size: 12px;
2044      color: #646970;
2045      margin: 0;
2046      margin-top: 3px;
2047  }
2048  
2049  .media-modal .imgedit-group-top h2 a,
2050  .media-modal .imgedit-group-top h2 .button-link {
2051      text-decoration: none;
2052      color: #646970;
2053  }
2054  
2055  /* higher specificity than media.css */
2056  .wp-core-ui.media-modal .image-editor .imgedit-help-toggle,
2057  .wp-core-ui.media-modal .image-editor .imgedit-help-toggle:hover,
2058  .wp-core-ui.media-modal .image-editor .imgedit-help-toggle:active {
2059      border: 1px solid transparent;
2060      margin: 0;
2061      padding: 0;
2062      background: transparent;
2063      color: var(--wp-admin-theme-color, #3858e9);
2064      font-size: 20px;
2065      line-height: 1;
2066      cursor: pointer;
2067      box-sizing: content-box;
2068      box-shadow: none;
2069  }
2070  
2071  .wp-core-ui.media-modal .image-editor .imgedit-help-toggle:focus {
2072      color: var(--wp-admin-theme-color, #3858e9);
2073      border-color: var(--wp-admin-theme-color, #3858e9);
2074      box-shadow: 0 0 0 1px var(--wp-admin-theme-color, #3858e9);
2075      /* Only visible in Windows High Contrast mode */
2076      outline: 2px solid transparent;
2077  }
2078  
2079  .wp-core-ui.media-modal .imgedit-group-top .dashicons-arrow-down.imgedit-help-toggle {
2080      margin-top: -3px;
2081  }
2082  
2083  .wp-core-ui.media-modal .image-editor h3 .imgedit-help-toggle {
2084      margin-top: -2px;
2085  }
2086  
2087  .media-modal .imgedit-help-toggled span.dashicons:before {
2088      content: "\f142";
2089      content: "\f142" / '';
2090  }
2091  
2092  .media-modal .imgedit-thumbnail-preview {
2093      margin: 10px 0 0 8px;
2094  }
2095  
2096  .imgedit-thumbnail-preview-caption {
2097      display: block;
2098  }
2099  
2100  .media-modal .imgedit-wrap div.updated, /* Back-compat for pre-5.5 */
2101  .media-modal .imgedit-wrap .notice {
2102      margin: 0 16px;
2103  }
2104  
2105  /**
2106   * Embed from URL and Image Details
2107   */
2108  .embed-url {
2109      display: block;
2110      position: relative;
2111      padding: 16px;
2112      margin: 0;
2113      z-index: 250;
2114      background: #fff;
2115      font-size: 18px;
2116  }
2117  
2118  .media-frame .embed-url input {
2119      font-size: 18px;
2120      line-height: 1.22222222; /* 22px */
2121      padding: 12px 14px 12px 40px; /* right padding to leave room for the spinner */
2122      width: 100%;
2123      min-width: 200px;
2124      box-shadow: inset -2px 2px 4px -2px rgba(0, 0, 0, 0.1);
2125  }
2126  
2127  .media-frame .embed-url input::-ms-clear {
2128      display: none; /* the "x" in IE 11 conflicts with the spinner */
2129  }
2130  
2131  .media-frame .embed-url .spinner {
2132      position: absolute;
2133      top: 32px;
2134      left: 26px;
2135  }
2136  
2137  .media-frame .embed-loading .embed-url .spinner {
2138      visibility: visible;
2139  }
2140  
2141  .embed-link-settings,
2142  .embed-media-settings {
2143      position: absolute;
2144      top: 82px;
2145      right: 0;
2146      left: 0;
2147      bottom: 0;
2148      padding: 0 16px;
2149      overflow: auto;
2150  }
2151  
2152  .media-embed .embed-link-settings .link-text {
2153      margin-top: 0;
2154  }
2155  
2156  /*
2157   * Implementation of bottom padding in overflow content differs across browsers.
2158   * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
2159   */
2160  .embed-link-settings::after,
2161  .embed-media-settings::after {
2162      content: "";
2163      display: flex;
2164      clear: both;
2165      height: 24px;
2166  }
2167  
2168  .media-embed .embed-link-settings {
2169      /* avoid Firefox to give focus to the embed preview container parent */
2170      overflow: visible;
2171  }
2172  
2173  .embed-preview img,
2174  .embed-preview iframe,
2175  .embed-preview embed,
2176  .mejs-container video {
2177      max-width: 100%;
2178      vertical-align: middle;
2179  }
2180  
2181  .embed-preview a {
2182      display: inline-block;
2183  }
2184  
2185  .embed-preview img {
2186      display: block;
2187      height: auto;
2188  }
2189  
2190  .mejs-container:focus {
2191      outline: 1px solid var(--wp-admin-theme-color, #3858e9);
2192      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
2193  }
2194  
2195  .image-details .media-modal {
2196      right: 140px;
2197      left: 140px;
2198  }
2199  
2200  .image-details .media-frame-title,
2201  .image-details .media-frame-content,
2202  .image-details .media-frame-router {
2203      right: 0;
2204  }
2205  
2206  .image-details .embed-media-settings {
2207      top: 0;
2208      overflow: visible;
2209      padding: 0;
2210  }
2211  
2212  .image-details .embed-media-settings::after {
2213      content: none;
2214  }
2215  
2216  .image-details .embed-media-settings,
2217  .image-details .embed-media-settings div {
2218      box-sizing: border-box;
2219  }
2220  
2221  .image-details .column-settings {
2222      background: #f6f7f7;
2223      border-left: 1px solid #dcdcde;
2224      min-height: 100%;
2225      width: 55%;
2226      position: absolute;
2227      top: 0;
2228      right: 0;
2229  }
2230  
2231  .image-details .column-settings h2 {
2232      margin: 20px;
2233      padding-top: 20px;
2234      border-top: 1px solid #dcdcde;
2235      color: #1d2327;
2236  }
2237  
2238  .image-details .column-image {
2239      width: 45%;
2240      position: absolute;
2241      right: 55%;
2242      top: 0;
2243  }
2244  
2245  .image-details .image {
2246      margin: 20px;
2247  }
2248  
2249  .image-details .image img {
2250      max-width: 100%;
2251      max-height: 500px;
2252  }
2253  
2254  .image-details .advanced-toggle {
2255      padding: 0;
2256      color: #646970;
2257      text-transform: uppercase;
2258      text-decoration: none;
2259  }
2260  
2261  .image-details .advanced-toggle:hover,
2262  .image-details .advanced-toggle:active {
2263      color: #646970;
2264  }
2265  
2266  .image-details .advanced-toggle:after {
2267      font: normal 20px/1 dashicons;
2268      vertical-align: top;
2269      -webkit-font-smoothing: antialiased;
2270      -moz-osx-font-smoothing: grayscale;
2271      content: "\f140";
2272      content: "\f140" / '';
2273      display: inline-block;
2274      margin-top: -2px;
2275  }
2276  
2277  .image-details .advanced-visible .advanced-toggle:after {
2278      content: "\f142";
2279      content: "\f142" / '';
2280  }
2281  
2282  .image-details .custom-size label, /* Back-compat for pre-5.3 */
2283  .image-details .custom-size .custom-size-setting {
2284      display: block;
2285      float: right;
2286  }
2287  
2288  .image-details .custom-size .custom-size-setting label {
2289      float: none;
2290  }
2291  
2292  .image-details .custom-size input {
2293      width: 5em;
2294  }
2295  
2296  .image-details .custom-size .sep {
2297      float: right;
2298      margin: 26px 6px 0;
2299  }
2300  
2301  .image-details .custom-size .description {
2302      margin-right: 0;
2303  }
2304  
2305  .media-embed .thumbnail {
2306      max-width: 100%;
2307      max-height: 200px;
2308      position: relative;
2309      float: right;
2310  }
2311  
2312  .media-embed .thumbnail img {
2313      max-height: 200px;
2314      display: block;
2315  }
2316  
2317  .media-embed .thumbnail:after {
2318      content: "";
2319      display: block;
2320      position: absolute;
2321      top: 0;
2322      right: 0;
2323      left: 0;
2324      bottom: 0;
2325      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
2326      overflow: hidden;
2327  }
2328  
2329  .media-embed .setting,
2330  .media-embed .setting-group {
2331      width: 100%;
2332      margin: 10px 0;
2333      float: right;
2334      display: block;
2335      clear: both;
2336  }
2337  
2338  .media-embed .setting-group .setting:not(.checkbox-setting) {
2339      margin: 0;
2340  }
2341  
2342  .media-embed .setting.has-description {
2343      margin-bottom: 5px;
2344  }
2345  
2346  .media-embed .description {
2347      clear: both;
2348      font-style: normal;
2349  }
2350  
2351  .media-embed .content-track + .description {
2352      line-height: 1.4;
2353      /* The !important needs to override a high specificity selector from wp-medialement.css */
2354      max-width: none !important;
2355  }
2356  
2357  .media-embed .remove-track {
2358      margin-bottom: 10px;
2359  }
2360  
2361  .image-details .embed-media-settings .setting,
2362  .image-details .embed-media-settings .setting-group {
2363      float: none;
2364      width: auto;
2365  }
2366  
2367  .image-details .actions {
2368      margin: 10px 0;
2369  }
2370  
2371  .image-details .hidden {
2372      display: none;
2373  }
2374  
2375  .media-embed .setting input[type="text"],
2376  .media-embed .setting textarea,
2377  .media-embed fieldset {
2378      display: block;
2379      width: 100%;
2380      max-width: 400px;
2381  }
2382  
2383  .image-details .embed-media-settings .setting input[type="text"],
2384  .image-details .embed-media-settings .setting textarea {
2385      max-width: inherit;
2386      width: 70%;
2387  }
2388  
2389  .image-details .embed-media-settings .setting input.link-to-custom,
2390  .image-details .embed-media-settings .link-target,
2391  .image-details .embed-media-settings .custom-size,
2392  .image-details .embed-media-settings .setting-group,
2393  .image-details .description {
2394      margin-right: 27%;
2395      width: 70%;
2396  }
2397  
2398  .image-details .description {
2399      font-style: normal;
2400      margin-top: 0;
2401  }
2402  
2403  .image-details .embed-media-settings .link-target {
2404      margin-top: 16px;
2405  }
2406  
2407  .image-details .checkbox-label,
2408  .audio-details .checkbox-label,
2409  .video-details .checkbox-label {
2410      vertical-align: baseline;
2411  }
2412  
2413  .media-embed .setting input.hidden,
2414  .media-embed .setting textarea.hidden {
2415      display: none;
2416  }
2417  
2418  .media-embed .setting span, /* Back-compat for pre-5.3 */
2419  .media-embed .setting .name,
2420  .media-embed .setting-group .name {
2421      display: inline-block;
2422      font-size: 13px;
2423      line-height: 1.84615384;
2424      color: #646970;
2425  }
2426  
2427  .media-embed .setting span {
2428      display: block; /* Back-compat for pre-5.3 */
2429      width: 200px; /* Back-compat for pre-5.3 */
2430  }
2431  
2432  .image-details .embed-media-settings .setting span, /* Back-compat for pre-5.3 */
2433  .image-details .embed-media-settings .setting .name {
2434      float: right;
2435      width: 25%;
2436      text-align: left;
2437      margin: 8px 1% 0;
2438      line-height: 1.1;
2439  }
2440  
2441  /* Buttons group in IE 11. */
2442  .media-frame .setting-group .button-group,
2443  .image-details .embed-media-settings .setting .button-group {
2444      width: auto;
2445  }
2446  
2447  .media-embed-sidebar {
2448      position: absolute;
2449      top: 0;
2450      right: 440px;
2451  }
2452  
2453  .advanced-section,
2454  .link-settings {
2455      margin-top: 10px;
2456  }
2457  
2458  /**
2459   * Button groups fix: can be removed together with the Back-compat for pre-5.3
2460   */
2461   .media-frame .setting .button-group {
2462       display: flex;
2463       margin: 0 !important;
2464       max-width: none !important;
2465   }
2466  
2467  /**
2468   * Localization
2469   */
2470  .rtl .media-modal,
2471  .rtl .media-frame,
2472  .rtl .media-frame .search,
2473  .rtl .media-frame input[type="text"],
2474  .rtl .media-frame input[type="password"],
2475  .rtl .media-frame input[type="number"],
2476  .rtl .media-frame input[type="search"],
2477  .rtl .media-frame input[type="email"],
2478  .rtl .media-frame input[type="url"],
2479  .rtl .media-frame input[type="tel"],
2480  .rtl .media-frame textarea,
2481  .rtl .media-frame select {
2482      font-family: Tahoma, sans-serif;
2483  }
2484  
2485  :lang(he-il) .rtl .media-modal,
2486  :lang(he-il) .rtl .media-frame,
2487  :lang(he-il) .rtl .media-frame .search,
2488  :lang(he-il) .rtl .media-frame input[type="text"],
2489  :lang(he-il) .rtl .media-frame input[type="password"],
2490  :lang(he-il) .rtl .media-frame input[type="number"],
2491  :lang(he-il) .rtl .media-frame input[type="search"],
2492  :lang(he-il) .rtl .media-frame input[type="email"],
2493  :lang(he-il) .rtl .media-frame input[type="url"],
2494  :lang(he-il) .rtl .media-frame textarea,
2495  :lang(he-il) .rtl .media-frame select {
2496      font-family: Arial, sans-serif;
2497  }
2498  
2499  /**
2500   * Responsive layout
2501   */
2502  @media only screen and (max-width: 900px) {
2503      .media-modal .media-frame-title {
2504          height: 40px;
2505      }
2506  
2507      .media-modal .media-frame-title h1 {
2508          line-height: 2.22222222;
2509          font-size: 18px;
2510      }
2511  
2512      .media-modal-close {
2513          width: 42px;
2514          height: 42px;
2515      }
2516  
2517      /* Drop-down menu */
2518      .media-frame .media-frame-title {
2519          position: static;
2520          padding: 0 44px;
2521          text-align: center;
2522      }
2523  
2524      .media-frame:not(.hide-menu) .media-frame-router,
2525      .media-frame:not(.hide-menu) .media-frame-content,
2526      .media-frame:not(.hide-menu) .media-frame-toolbar {
2527          right: 0;
2528      }
2529  
2530      .media-frame:not(.hide-menu) .media-frame-router {
2531          /* 40 title + (40 - 6) menu toggle button + 6 spacing */
2532          top: 80px;
2533      }
2534  
2535      .media-frame:not(.hide-menu) .media-frame-content {
2536          /* 80 + room for the tabs */
2537          top: 114px;
2538      }
2539  
2540      .media-frame.hide-router .media-frame-content {
2541          top: 80px;
2542      }
2543  
2544      .media-frame:not(.hide-menu) .media-frame-menu {
2545          position: static;
2546          width: 0;
2547      }
2548  
2549      .media-frame:not(.hide-menu) .media-menu {
2550          display: none;
2551          width: auto;
2552          max-width: 80%;
2553          overflow: auto;
2554          z-index: 2000;
2555          top: 75px;
2556          right: 50%;
2557          transform: translateX(50%);
2558          left: auto;
2559          bottom: auto;
2560          padding: 5px 0;
2561          border: 1px solid #c3c4c7;
2562      }
2563  
2564      .media-frame:not(.hide-menu) .media-menu.visible {
2565          display: block;
2566      }
2567  
2568      .media-frame:not(.hide-menu) .media-menu > a {
2569          padding: 12px 16px;
2570          font-size: 16px;
2571      }
2572  
2573      .media-frame:not(.hide-menu) .media-menu .separator {
2574          margin: 5px 10px;
2575      }
2576  
2577      /* Visually hide the menu heading keeping it available to assistive technologies. */
2578      .media-frame-menu-heading {
2579          clip-path: inset(50%);
2580          height: 1px;
2581          overflow: hidden;
2582          padding: 0;
2583          width: 1px;
2584          border: 0;
2585          margin: -1px;
2586          /* Many screen reader and browser combinations announce broken words as they would appear visually. */
2587          word-wrap: normal !important;
2588          word-break: normal !important;
2589      }
2590  
2591      /* Reveal the menu toggle button. */
2592      .wp-core-ui .media-frame:not(.hide-menu) .button.media-frame-menu-toggle {
2593          display: inline-flex;
2594          align-items: center;
2595          position: absolute;
2596          right: 50%;
2597          transform: translateX(50%);
2598          margin: -6px 0 0;
2599          padding: 0 12px 0 2px;
2600          font-size: 0.875rem;
2601          font-weight: 600;
2602          text-decoration: none;
2603          background: transparent;
2604          /* Only for IE11 to vertically align text within the inline-flex button */
2605          height: 0.1%;
2606          /* Modern browsers */
2607          min-height: 40px;
2608      }
2609  
2610      .wp-core-ui .media-frame:not(.hide-menu) .button.media-frame-menu-toggle .dashicons {
2611          line-height: 1;
2612      }
2613  
2614      .wp-core-ui .button.media-frame-menu-toggle:hover,
2615      .wp-core-ui .button.media-frame-menu-toggle:active {
2616          background: transparent;
2617          transform: none;
2618      }
2619  
2620      .wp-core-ui .button.media-frame-menu-toggle:focus {
2621          /* Only visible in Windows High Contrast mode */
2622          outline: 1px solid transparent;
2623      }
2624      /* End drop-down menu */
2625  
2626      .media-sidebar {
2627          width: 230px;
2628      }
2629  
2630      .options-general-php .crop-content.site-icon,
2631      .wp-customizer:not(.mobile) .media-frame-content .crop-content.site-icon {
2632          margin-left: 262px;
2633      }
2634  
2635      .attachments-browser .attachments,
2636      .attachments-browser .uploader-inline,
2637      .attachments-browser .media-toolbar,
2638      .attachments-browser .attachments-wrapper,
2639      .attachments-browser.has-load-more .attachments-wrapper {
2640          left: 262px;
2641      }
2642  
2643      .attachments-browser .media-toolbar {
2644          height: 74px;
2645      }
2646  
2647      .attachments-browser .attachments,
2648      .attachments-browser .uploader-inline,
2649      .media-frame-content .attachments-browser .attachments-wrapper {
2650          top: 90px;
2651      }
2652  
2653      .media-sidebar .setting,
2654      .attachment-details .setting {
2655          margin: 6px 0;
2656      }
2657  
2658      .media-sidebar .setting input,
2659      .media-sidebar .setting textarea,
2660      .media-sidebar .setting .name,
2661      .attachment-details .setting input,
2662      .attachment-details .setting textarea,
2663      .attachment-details .setting .name,
2664      .compat-item label span {
2665          float: none;
2666          display: inline-block;
2667      }
2668  
2669      .media-sidebar .setting span, /* Back-compat for pre-5.3 */
2670      .attachment-details .setting span, /* Back-compat for pre-5.3 */
2671      .media-sidebar .checkbox-label-inline {
2672          float: none;
2673      }
2674  
2675      .media-sidebar .setting .select-label-inline {
2676          display: inline;
2677      }
2678  
2679      .media-sidebar .setting .name,
2680      .media-sidebar .checkbox-label-inline,
2681      .attachment-details .setting .name,
2682      .compat-item label span {
2683          text-align: inherit;
2684          min-height: 16px;
2685          margin: 0;
2686          padding: 8px 2px 2px;
2687      }
2688  
2689      /* Needs high specificity. */
2690      .media-sidebar .setting .copy-to-clipboard-container,
2691      .attachment-details .attachment-info .copy-to-clipboard-container {
2692          margin-right: 0;
2693          padding-top: 0;
2694      }
2695  
2696      .media-sidebar .setting .copy-attachment-url,
2697      .attachment-details .attachment-info .copy-attachment-url {
2698          margin: 0 1px;
2699      }
2700  
2701      .media-sidebar .setting .value,
2702      .attachment-details .setting .value {
2703          float: none;
2704          width: auto;
2705      }
2706  
2707      .media-sidebar .setting input[type="text"],
2708      .media-sidebar .setting input[type="password"],
2709      .media-sidebar .setting input[type="email"],
2710      .media-sidebar .setting input[type="number"],
2711      .media-sidebar .setting input[type="search"],
2712      .media-sidebar .setting input[type="tel"],
2713      .media-sidebar .setting input[type="url"],
2714      .media-sidebar .setting textarea,
2715      .media-sidebar .setting select,
2716      .attachment-details .setting input[type="text"],
2717      .attachment-details .setting input[type="password"],
2718      .attachment-details .setting input[type="email"],
2719      .attachment-details .setting input[type="number"],
2720      .attachment-details .setting input[type="search"],
2721      .attachment-details .setting input[type="tel"],
2722      .attachment-details .setting input[type="url"],
2723      .attachment-details .setting textarea,
2724      .attachment-details .setting select,
2725      .attachment-details .setting + .description {
2726          float: none;
2727          width: 98%;
2728          max-width: none;
2729          height: auto;
2730      }
2731  
2732      .media-frame .media-toolbar input[type="search"] {
2733          line-height: 2.25; /* 36px */
2734      }
2735  
2736      .media-toolbar-secondary,
2737      .media-toolbar-secondary label {
2738          display: block;
2739      }
2740  
2741      .media-sidebar .setting select.columns,
2742      .attachment-details .setting select.columns {
2743          width: auto;
2744      }
2745  
2746      .media-frame input,
2747      .media-frame textarea,
2748      .media-frame .search {
2749          padding: 3px 6px;
2750      }
2751  
2752      .wp-admin .media-frame select {
2753          min-height: 40px;
2754          font-size: 16px;
2755          line-height: 1.625;
2756          padding: 5px 8px 5px 24px;
2757      }
2758  
2759      .image-details .column-image {
2760          width: 30%;
2761          right: 70%;
2762      }
2763  
2764      .image-details .column-settings {
2765          width: 70%;
2766      }
2767  
2768      .image-details .media-modal {
2769          right: 30px;
2770          left: 30px;
2771      }
2772  
2773      .image-details .embed-media-settings .setting,
2774      .image-details .embed-media-settings .setting-group {
2775          margin: 20px;
2776      }
2777  
2778      .image-details .embed-media-settings .setting span, /* Back-compat for pre-5.3 */
2779      .image-details .embed-media-settings .setting .name {
2780          float: none;
2781          text-align: right;
2782          width: 100%;
2783          margin-bottom: 4px;
2784          margin-right: 0;
2785      }
2786  
2787      .media-modal .legend-inline {
2788          position: static;
2789          transform: none;
2790          margin-right: 0;
2791          margin-bottom: 6px;
2792      }
2793  
2794      .image-details .embed-media-settings .setting-group .setting {
2795          margin-bottom: 0;
2796      }
2797  
2798      .image-details .embed-media-settings .setting input.link-to-custom,
2799      .image-details .embed-media-settings .setting input[type="text"],
2800      .image-details .embed-media-settings .setting textarea {
2801          width: 100%;
2802          margin-right: 0;
2803      }
2804  
2805      .image-details .embed-media-settings .setting.has-description {
2806          margin-bottom: 5px;
2807      }
2808  
2809      .image-details .description {
2810          width: auto;
2811          margin: 0 20px;
2812      }
2813  
2814      .image-details .embed-media-settings .custom-size {
2815          margin-right: 20px;
2816      }
2817  
2818      .collection-settings .setting input[type="checkbox"] {
2819          float: none;
2820          margin-top: 0;
2821      }
2822  
2823      .media-selection {
2824          min-width: 120px;
2825      }
2826  
2827      .media-selection:after {
2828          background: none;
2829      }
2830  
2831      .media-selection .attachments {
2832          display: none;
2833      }
2834  
2835      .media-modal .attachments-browser .media-toolbar .search {
2836          max-width: 100%;
2837          height: auto;
2838          float: left;
2839      }
2840  
2841      .media-frame .media-toolbar-secondary .spinner {
2842          top: calc( 50% - 8px );
2843      }
2844  
2845      .media-modal .attachments-browser .media-toolbar .attachment-filters {
2846          height: auto;
2847      }
2848  
2849      /* Text inputs need to be 16px, or they force zooming on iOS */
2850      .media-frame input[type="text"],
2851      .media-frame input[type="password"],
2852      .media-frame input[type="number"],
2853      .media-frame input[type="search"],
2854      .media-frame input[type="email"],
2855      .media-frame input[type="url"],
2856      .media-frame textarea,
2857      .media-frame select {
2858          font-size: 16px;
2859          line-height: 1.5;
2860      }
2861  
2862      .media-frame .media-toolbar input[type="search"] {
2863          line-height: 2.3755; /* 38px */
2864      }
2865  }
2866  
2867  @media screen and (max-width: 782px) {
2868      .imgedit-panel-content {
2869          grid-template-columns: auto;
2870      }
2871  
2872      .media-frame-toolbar .media-toolbar {
2873          bottom: -60px;
2874      }
2875  
2876      .media-frame .media-toolbar-secondary .spinner {
2877          top: 0;
2878      }
2879  
2880      .mode-grid .attachments-browser .media-toolbar-primary {
2881          display: grid;
2882          grid-template-columns: auto 1fr;
2883      }
2884  
2885      .mode-grid .attachments-browser .media-toolbar-primary input[type="search"] {
2886          width: 100%;
2887      }
2888  
2889      .media-sidebar .copy-to-clipboard-container .success,
2890      .attachment-details .copy-to-clipboard-container .success {
2891          font-size: 14px;
2892          line-height: 2.71428571;
2893      }
2894  
2895      .media-frame .wp-filter .media-toolbar-secondary {
2896          position: unset;
2897      }
2898  
2899      .media-frame .media-toolbar-secondary .spinner {
2900          position: absolute;
2901          top: 0;
2902          bottom: 0;
2903          margin: auto;
2904          right: calc( 100% + 2px );
2905          left: 0;
2906          z-index: 9;
2907      }
2908  
2909      .media-bg-overlay {
2910          content: '';
2911          background: #ffffff;
2912          width: 100%;
2913          height: 100%;
2914          display: none;
2915          right: 0;
2916          left: 0;
2917          top: 0;
2918          bottom: 0;
2919          opacity: 0.6;
2920      }
2921  }
2922  
2923  /* Responsive on portrait and landscape */
2924  @media only screen and (max-width: 640px), screen and (max-height: 400px) {
2925      /* Full-bleed modal */
2926      .media-modal,
2927      .image-details .media-modal {
2928          position: fixed;
2929          top: 0;
2930          right: 0;
2931          left: 0;
2932          bottom: 0;
2933      }
2934  
2935      .media-modal-backdrop {
2936          position: fixed;
2937      }
2938  
2939      .options-general-php .crop-content.site-icon,
2940      .wp-customizer:not(.mobile) .media-frame-content .crop-content.site-icon {
2941          margin-left: 0;
2942      }
2943  
2944      .media-sidebar {
2945          z-index: 1900;
2946          max-width: 70%;
2947          bottom: 120%;
2948          box-sizing: border-box;
2949          padding-bottom: 0;
2950      }
2951  
2952      .media-sidebar.visible {
2953          bottom: 0;
2954      }
2955  
2956      .attachments-browser .attachments,
2957      .attachments-browser .uploader-inline,
2958      .attachments-browser .media-toolbar,
2959      .media-frame-content .attachments-browser .attachments-wrapper {
2960          left: 0;
2961      }
2962  
2963      .image-details .media-frame-title {
2964          display: block;
2965          top: 0;
2966          font-size: 14px;
2967      }
2968  
2969      .image-details .column-image,
2970      .image-details .column-settings {
2971          width: 100%;
2972          position: relative;
2973          right: 0;
2974      }
2975  
2976      .image-details .column-settings {
2977          padding: 4px 0;
2978      }
2979  
2980      /* Media tabs on the top */
2981      .media-frame-content .media-toolbar .instructions {
2982          display: none;
2983      }
2984  
2985      /* Change margin direction on load more button in responsive views. */
2986      .load-more-wrapper .load-more-jump {
2987          margin: 12px 0 0;
2988      }
2989  
2990  }
2991  
2992  @media only screen and (min-width: 901px) and (max-height: 400px) {
2993      .media-menu,
2994      .media-frame:not(.hide-menu) .media-menu {
2995          top: 0;
2996          padding-top: 44px;
2997      }
2998  
2999      /* Change margin direction on load more button in responsive views. */
3000      .load-more-wrapper .load-more-jump {
3001          margin: 12px 0 0;
3002      }
3003  
3004  }
3005  
3006  @media only screen and (max-width: 480px) {
3007      .wp-core-ui.wp-customizer .media-button {
3008          margin-top: 13px;
3009      }
3010  }
3011  
3012  /**
3013   * HiDPI Displays
3014   */
3015  @media print,
3016    (min-resolution: 120dpi) {
3017  
3018      .wp-core-ui .media-modal-icon {
3019          background-image: url(../images/uploader-icons-2x.png);
3020          background-size: 134px 15px;
3021      }
3022  
3023      .media-frame .spinner {
3024          background-image: url(../images/spinner-2x.gif);
3025      }
3026  }
3027  
3028  .media-frame-content[data-columns="1"] .attachment {
3029      width: 100%;
3030  }
3031  
3032  .media-frame-content[data-columns="2"] .attachment {
3033      width: 50%;
3034  }
3035  
3036  .media-frame-content[data-columns="3"] .attachment {
3037      width: 33.33%;
3038  }
3039  
3040  .media-frame-content[data-columns="4"] .attachment {
3041      width: 25%;
3042  }
3043  
3044  .media-frame-content[data-columns="5"] .attachment {
3045      width: 20%;
3046  }
3047  
3048  .media-frame-content[data-columns="6"] .attachment {
3049      width: 16.66%;
3050  }
3051  
3052  .media-frame-content[data-columns="7"] .attachment {
3053      width: 14.28%;
3054  }
3055  
3056  .media-frame-content[data-columns="8"] .attachment {
3057      width: 12.5%;
3058  }
3059  
3060  .media-frame-content[data-columns="9"] .attachment {
3061      width: 11.11%;
3062  }
3063  
3064  .media-frame-content[data-columns="10"] .attachment {
3065      width: 10%;
3066  }
3067  
3068  .media-frame-content[data-columns="11"] .attachment {
3069      width: 9.09%;
3070  }
3071  
3072  .media-frame-content[data-columns="12"] .attachment {
3073      width: 8.33%;
3074  }