[Summary view] [Print] [Text view]

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