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