[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-modal-content .button,
 276  .media-modal-content .button.button-large {
 277      min-height: 32px;
 278      line-height: 2.30769231; /* 30px for 32px height with 13px font */
 279      padding: 0 12px;
 280  }
 281  
 282  .media-toolbar input[type="text"],
 283  .media-toolbar input[type="search"],
 284  .media-toolbar select {
 285      min-height: 32px;
 286      line-height: 2.14285714; /* 30px for 32px height with 14px font */
 287  }
 288  
 289  .media-toolbar input[type="text"],
 290  .media-toolbar input[type="search"] {
 291      padding: 0 8px;
 292  }
 293  
 294  .media-toolbar select {
 295      padding: 0 24px 0 8px;
 296  }
 297  
 298  /* higher specificity */
 299  .wp-core-ui .media-modal-icon {
 300      background-image: url(../images/uploader-icons.png);
 301      background-repeat: no-repeat;
 302  }
 303  
 304  /**
 305   * Toolbar
 306   */
 307  .media-toolbar {
 308      position: absolute;
 309      top: 0;
 310      left: 0;
 311      right: 0;
 312      z-index: 100;
 313      height: 48px;
 314      padding: 0 16px;
 315      border: 0 solid #dcdcde;
 316      overflow: auto;
 317  }
 318  
 319  .media-frame-toolbar .media-toolbar {
 320      top: auto;
 321      bottom: -60px;
 322      height: auto;
 323      overflow: visible;
 324      border-top: 1px solid #dcdcde;
 325      background: #fff;
 326  }
 327  
 328  .media-frame-toolbar .media-toolbar-primary > .media-button,
 329  .media-frame-toolbar .media-toolbar-primary > .media-button-group {
 330      margin-top: 14px;
 331      margin-bottom: 14px;
 332  }
 333  
 334  .media-toolbar-primary {
 335      float: right;
 336      height: 100%;
 337      position: relative;
 338  }
 339  
 340  .media-toolbar-secondary {
 341      float: left;
 342      height: 100%;
 343      position: relative;
 344      display: grid;
 345      grid-template-columns: repeat( 2, 1fr );
 346      grid-template-rows: repeat( 2, 1fr );
 347      grid-column-gap: 12px;
 348      grid-row-gap: 0px;
 349      align-items: end;
 350  }
 351  
 352  label[for="media-attachment-filters"] { 
 353      grid-area: 1 / 1 / 2 / 2; 
 354  }
 355  
 356  select#media-attachment-filters { 
 357      grid-area: 2 / 1 / 3 / 2; 
 358  }
 359  
 360  label[for="media-attachment-date-filters"] { 
 361      grid-area: 1 / 2 / 2 / 3; 
 362  }
 363  
 364  select#media-attachment-date-filters { 
 365      grid-area: 2 / 2 / 3 / 3; 
 366  } 
 367  
 368  .media-toolbar-secondary > .spinner {
 369      position: absolute;
 370      left: calc( 100% + 2px );
 371      top: 50%;
 372      margin: 0;
 373  }
 374  
 375  .media-toolbar-primary > .media-button,
 376  .media-toolbar-primary > .media-button-group {
 377      margin-left: 10px;
 378      float: left;
 379      margin-top: 15px;
 380  }
 381  
 382  .media-toolbar-secondary > .media-button,
 383  .media-toolbar-secondary > .media-button-group {
 384      margin-right: 10px;
 385      margin-top: 15px;
 386  }
 387  
 388  /**
 389   * Sidebar
 390   */
 391  .media-sidebar {
 392      position: absolute;
 393      top: 0;
 394      right: 0;
 395      bottom: 0;
 396      width: 267px;
 397      padding: 0 16px;
 398      z-index: 75;
 399      background: #f6f7f7;
 400      border-left: 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: left;
 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-right: 4%;
 463      font-size: 12px;
 464      text-align: right;
 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: left;
 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: left;
 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-left: 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: left;
 532      color: #007017;
 533  }
 534  
 535  .compat-item label span {
 536      text-align: right;
 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: right;
 562  }
 563  
 564  .attachment-details .setting + .description .dashicons {
 565      width: 16px;
 566      height: 16px;
 567      font-size: 16px;
 568      margin-top: 0px;
 569  }
 570  
 571  .media-sidebar .setting .value,
 572  .attachment-details .setting .value,
 573  .attachment-details .setting + .description {
 574      margin: 0 1px;
 575      text-align: left;
 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: left;
 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-right: 4%;
 628      float: left;
 629      text-align: right;
 630  }
 631  
 632  .compat-item .label span {
 633      display: block;
 634      width: 100%;
 635  }
 636  
 637  .compat-item .field {
 638      float: right;
 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      left: 0;
 670      right: 0;
 671      bottom: 0;
 672      margin: 0;
 673      padding: 50px 0 10px;
 674      background: #f6f7f7;
 675      border-right-width: 1px;
 676      border-right-style: solid;
 677      border-right-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: left;
 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: left;
 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-right: 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      left: 0;
 795      right: 0;
 796      bottom: 0;
 797  }
 798  
 799  .media-frame-menu {
 800      position: absolute;
 801      top: 0;
 802      left: 0;
 803      bottom: 0;
 804      width: 200px;
 805      z-index: 150;
 806  }
 807  
 808  .media-frame-title {
 809      position: absolute;
 810      top: 0;
 811      left: 200px;
 812      right: 0;
 813      height: 50px;
 814      z-index: 200;
 815  }
 816  
 817  .media-frame-router {
 818      position: absolute;
 819      top: 50px;
 820      left: 200px;
 821      right: 0;
 822      height: 36px;
 823      z-index: 200;
 824  }
 825  
 826  .media-frame-content {
 827      position: absolute;
 828      top: 84px;
 829      left: 200px;
 830      right: 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      left: 200px;
 843      right: 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      left: 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      left: 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      left: 16px;
 893  }
 894  
 895  .mode-grid .media-attachments-filter-heading {
 896      top: 0;
 897      left: -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: right;
 911      margin-right: 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-right: 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      left: 50%;
 935      margin-left: -150px;
 936      margin-right: -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 24px 0 8px;
 961      margin-right: 2%;
 962  }
 963  
 964  .media-frame select.attachment-filters:last-of-type {
 965      margin-right: 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: left;
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      left: 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      box-shadow:
1042          inset 0 0 2px 3px #fff,
1043          inset 0 0 0 7px var(--wp-admin-theme-color, #3858e9);
1044      /* Only visible in Windows High Contrast mode */
1045      outline: 2px solid transparent;
1046      outline-offset: -6px;
1047  }
1048  
1049  .wp-core-ui .selected.attachment {
1050      box-shadow:
1051          inset 0 0 0 5px #fff,
1052          inset 0 0 0 7px #c3c4c7;
1053  }
1054  
1055  .wp-core-ui .attachment.details {
1056      box-shadow:
1057          inset 0 0 0 3px #fff,
1058          inset 0 0 0 7px var(--wp-admin-theme-color-darker-20, #183ad6);
1059  }
1060  
1061  .wp-core-ui .attachment-preview {
1062      position: relative;
1063      box-shadow:
1064          inset 0 0 15px rgba(0, 0, 0, 0.1),
1065          inset 0 0 0 1px rgba(0, 0, 0, 0.05);
1066      background: #f0f0f1;
1067      cursor: pointer;
1068  }
1069  
1070  .wp-core-ui .attachment-preview:before {
1071      content: "";
1072      display: block;
1073      padding-top: 100%;
1074  }
1075  
1076  .wp-core-ui .attachment .icon {
1077      margin: 0 auto;
1078      overflow: hidden;
1079  }
1080  
1081  .wp-core-ui .attachment .thumbnail {
1082      overflow: hidden;
1083      position: absolute;
1084      top: 0;
1085      right: 0;
1086      bottom: 0;
1087      left: 0;
1088      opacity: 1;
1089      transition: opacity .1s;
1090  }
1091  
1092  .wp-core-ui .attachment .portrait img {
1093      max-width: 100%;
1094  }
1095  
1096  .wp-core-ui .attachment .landscape img {
1097      max-height: 100%;
1098  }
1099  
1100  .wp-core-ui .attachment .thumbnail:after {
1101      content: "";
1102      display: block;
1103      position: absolute;
1104      top: 0;
1105      left: 0;
1106      right: 0;
1107      bottom: 0;
1108      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
1109      overflow: hidden;
1110  }
1111  
1112  .wp-core-ui .attachment .thumbnail img {
1113      top: 0;
1114      left: 0;
1115  }
1116  
1117  .wp-core-ui .attachment .thumbnail .centered {
1118      position: absolute;
1119      top: 0;
1120      left: 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      left: 0;
1137      right: 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 .thumbnail img {
1153      position: absolute;
1154  }
1155  
1156  .wp-core-ui .attachment-close {
1157      display: block;
1158      position: absolute;
1159      top: 5px;
1160      right: 5px;
1161      height: 22px;
1162      width: 22px;
1163      padding: 0;
1164      background-color: #fff;
1165      border-radius: 3px;
1166      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
1167      transition: none;
1168  }
1169  
1170  .wp-core-ui .attachment-close .media-modal-icon {
1171      display: inline-block;
1172      background-position: -96px 4px;
1173      height: 22px;
1174      width: 22px;
1175  }
1176  
1177  .wp-core-ui .attachment-close:hover .media-modal-icon,
1178  .wp-core-ui .attachment-close:focus .media-modal-icon {
1179      background-position: -36px 4px;
1180  }
1181  
1182  .wp-core-ui .attachment .check {
1183      display: none;
1184      height: 24px;
1185      width: 24px;
1186      padding: 0;
1187      border: 0;
1188      position: absolute;
1189      z-index: 10;
1190      top: 0;
1191      right: 0;
1192      outline: none;
1193      background: #f0f0f1;
1194      cursor: pointer;
1195      box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba(0, 0, 0, 0.15);
1196  }
1197  
1198  .wp-core-ui .attachment .check .media-modal-icon {
1199      display: block;
1200      background-position: -1px 0;
1201      height: 15px;
1202      width: 15px;
1203      margin: 5px;
1204  }
1205  
1206  .wp-core-ui .attachment .check:hover .media-modal-icon {
1207      background-position: -40px 0;
1208  }
1209  
1210  .wp-core-ui .attachment.selected .check {
1211      display: block;
1212  }
1213  
1214  .wp-core-ui .attachment.details .check,
1215  .wp-core-ui .attachment.selected .check:focus,
1216  .wp-core-ui .media-frame.mode-grid .attachment.selected .check {
1217      background-color: var(--wp-admin-theme-color, #3858e9);
1218      box-shadow:
1219          0 0 0 1px #fff,
1220          0 0 0 2px var(--wp-admin-theme-color, #3858e9);
1221  }
1222  
1223  .wp-core-ui .attachment.selected .check:focus {
1224      /* Only visible in Windows High Contrast mode */
1225      outline: 2px solid transparent;
1226  }
1227  
1228  .wp-core-ui .attachment.details .check .media-modal-icon,
1229  .wp-core-ui .media-frame.mode-grid .attachment.selected .check .media-modal-icon {
1230      background-position: -21px 0;
1231  }
1232  
1233  .wp-core-ui .attachment.details .check:hover .media-modal-icon,
1234  .wp-core-ui .attachment.selected .check:focus .media-modal-icon,
1235  .wp-core-ui .media-frame.mode-grid .attachment.selected .check:hover .media-modal-icon {
1236      background-position: -60px 0;
1237  }
1238  
1239  .wp-core-ui .media-frame .attachment .describe {
1240      position: relative;
1241      display: block;
1242      width: 100%;
1243      margin: 0;
1244      padding: 0 8px;
1245      font-size: 12px;
1246      border-radius: 0;
1247  }
1248  
1249  /**
1250   * Attachments Browser
1251   */
1252  .media-frame .attachments-browser {
1253      position: relative;
1254      width: 100%;
1255      height: 100%;
1256      overflow: hidden;
1257  }
1258  
1259  .attachments-browser .media-toolbar {
1260      right: 300px;
1261      background: #fff;
1262      padding: 12px 16px;
1263  }
1264  
1265  .attachments-browser.hide-sidebar .media-toolbar {
1266      right: 0;
1267  }
1268  
1269  .attachments-browser .media-toolbar-primary > .media-button,
1270  .attachments-browser .media-toolbar-primary > .media-button-group,
1271  .attachments-browser .media-toolbar-secondary > .media-button,
1272  .attachments-browser .media-toolbar-secondary > .media-button-group {
1273      margin: 10px 0;
1274  }
1275  
1276  .attachments-browser .attachments {
1277      padding: 2px 8px 8px;
1278  }
1279  
1280  .attachments-browser:not(.has-load-more) .attachments,
1281  .attachments-browser.has-load-more .attachments-wrapper,
1282  .attachments-browser .uploader-inline {
1283      position: absolute;
1284      top: 72px;
1285      left: 0;
1286      right: 300px;
1287      bottom: 0;
1288      overflow: auto;
1289      outline: none;
1290  }
1291  
1292  .attachments-browser .uploader-inline.hidden {
1293      display: none;
1294  }
1295  
1296  .attachments-browser .media-toolbar-primary {
1297      max-width: calc( 33% - 20px );
1298  }
1299  
1300  .mode-grid .attachments-browser .media-toolbar-primary {
1301      display: flex;
1302      align-items: center;
1303      column-gap: .5rem;
1304      margin: 11px 0;
1305  }
1306  
1307  .mode-grid .attachments-browser .media-toolbar-mode-select .media-toolbar-primary {
1308      display: none;
1309  }
1310  
1311  .attachments-browser .media-toolbar-secondary {
1312      max-width: 66%;
1313  }
1314  
1315  .uploader-inline .close {
1316      background-color: transparent;
1317      border: 0;
1318      cursor: pointer;
1319      height: 48px;
1320      outline: none;
1321      padding: 0;
1322      position: absolute;
1323      right: 2px;
1324      text-align: center;
1325      top: 2px;
1326      width: 48px;
1327      z-index: 1;
1328  }
1329  
1330  .uploader-inline .close:before {
1331      font: normal 30px/1 dashicons !important;
1332      color: #50575e;
1333      display: inline-block;
1334      content: "\f335";
1335      content: "\f335" / '';
1336      font-weight: 300;
1337      margin-top: 1px;
1338  }
1339  
1340  .uploader-inline .close:focus {
1341      outline: 1px solid var(--wp-admin-theme-color, #3858e9);
1342      box-shadow: 0 0 3px rgba(var(--wp-admin-theme-color--rgb, 56, 88, 233), 0.8);
1343  }
1344  
1345  .attachments-browser.hide-sidebar .attachments,
1346  .attachments-browser.hide-sidebar .uploader-inline {
1347      right: 0;
1348      margin-right: 0;
1349  }
1350  
1351  .attachments-browser .instructions {
1352      display: inline-block;
1353      margin-top: 16px;
1354      line-height: 1.38461538;
1355      font-size: 13px;
1356      color: #646970;
1357  }
1358  
1359  .attachments-browser .no-media {
1360      padding: 2em 0 0 2em;
1361  }
1362  
1363  .more-loaded .attachment:not(.found-media) {
1364      background: #dcdcde;
1365  }
1366  
1367  .load-more-wrapper {
1368      clear: both;
1369      display: flex;
1370      flex-wrap: wrap;
1371      align-items: center;
1372      justify-content: center;
1373      padding: 1em 0;
1374  }
1375  
1376  .load-more-wrapper .load-more-count {
1377      min-width: 100%;
1378      margin: 0 0 1em;
1379      text-align: center;
1380  }
1381  
1382  .load-more-wrapper .load-more {
1383      margin: 0;
1384  }
1385  
1386  /* Needs high specificity. */
1387  .media-frame .load-more-wrapper .load-more + .spinner {
1388      float: none;
1389      margin: 0 -30px 0 10px;
1390  }
1391  
1392  /* Reset spinner margin when the button is hidden to avoid horizontal scrollbar. */
1393  .media-frame .load-more-wrapper .load-more.hidden + .spinner {
1394      margin: 0;
1395  }
1396  
1397  /* Force a new row within the flex container. */
1398  .load-more-wrapper::after {
1399      content: "";
1400      min-width: 100%;
1401      order: 1;
1402  }
1403  
1404  .load-more-wrapper .load-more-jump {
1405      margin: 0 0 0 12px;
1406  }
1407  
1408  .attachment.new-media {
1409      outline: 2px dotted #c3c4c7;
1410  }
1411  
1412  /**
1413   * Progress Bar
1414   */
1415  .media-progress-bar {
1416      position: relative;
1417      height: 10px;
1418      width: 70%;
1419      margin: 10px auto;
1420      border-radius: 10px;
1421      background: #dcdcde;
1422      background: rgba(0, 0, 0, 0.1);
1423  }
1424  
1425  .media-progress-bar div {
1426      height: 10px;
1427      min-width: 20px;
1428      width: 0;
1429      background: var(--wp-admin-theme-color, #3858e9);
1430      border-radius: 10px;
1431      transition: width 300ms;
1432  }
1433  
1434  .media-uploader-status .media-progress-bar {
1435      display: none;
1436      width: 100%;
1437  }
1438  
1439  .uploading.media-uploader-status .media-progress-bar {
1440      display: block;
1441  }
1442  
1443  .attachment-preview .media-progress-bar {
1444      position: absolute;
1445      top: 50%;
1446      left: 15%;
1447      width: 70%;
1448      margin: -5px 0 0;
1449  }
1450  
1451  .media-uploader-status {
1452      position: relative;
1453      margin: 0 auto;
1454      padding-bottom: 10px;
1455      max-width: 400px;
1456  }
1457  
1458  .uploader-inline .media-uploader-status h2 {
1459      display: none;
1460  }
1461  
1462  .media-uploader-status .upload-details {
1463      display: none;
1464      font-size: 12px;
1465      color: #646970;
1466  }
1467  
1468  .uploading.media-uploader-status .upload-details {
1469      display: block;
1470  }
1471  
1472  .media-uploader-status .upload-detail-separator {
1473      padding: 0 4px;
1474  }
1475  
1476  .media-uploader-status .upload-count {
1477      color: #3c434a;
1478  }
1479  
1480  .media-uploader-status .upload-dismiss-errors,
1481  .media-uploader-status .upload-errors {
1482      display: none;
1483  }
1484  
1485  .errors.media-uploader-status .upload-dismiss-errors,
1486  .errors.media-uploader-status .upload-errors {
1487      display: block;
1488  }
1489  
1490  .media-uploader-status .upload-dismiss-errors {
1491      transition: none;
1492      text-decoration: none;
1493  }
1494  
1495  .upload-errors .upload-error {
1496      padding: 12px;
1497      margin-bottom: 12px;
1498      background: #fff;
1499      border-left: 4px solid #d63638;
1500      box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
1501  }
1502  
1503  .uploader-inline .upload-errors .upload-error {
1504      padding: 12px 30px;
1505      background-color: #fcf0f1;
1506      box-shadow: none;
1507  }
1508  
1509  .upload-errors .upload-error-filename {
1510      font-weight: 600;
1511  }
1512  
1513  .upload-errors .upload-error-message {
1514      display: block;
1515      padding-top: 8px;
1516      word-wrap: break-word;
1517  }
1518  
1519  /**
1520   * Window and Editor uploaders used to display "drop zones"
1521   */
1522  .uploader-window,
1523  .wp-editor-wrap .uploader-editor {
1524      top: 0;
1525      left: 0;
1526      right: 0;
1527      bottom: 0;
1528      text-align: center;
1529      display: none;
1530  }
1531  
1532  .uploader-window {
1533      position: fixed;
1534      z-index: 250000;
1535      opacity: 0; /* Only the inline uploader is animated with JS, the editor one isn't */
1536      transition: opacity 250ms;
1537  }
1538  
1539  .wp-editor-wrap .uploader-editor {
1540      position: absolute;
1541      z-index: 99998; /* under the toolbar */
1542      background: rgba(140, 143, 148, 0.9);
1543  }
1544  
1545  .uploader-window,
1546  .wp-editor-wrap .uploader-editor.droppable {
1547      background-color: rgba(var(--wp-admin-theme-color--rgb, 56, 88, 233), 0.9);
1548  }
1549  
1550  .uploader-window-content,
1551  .wp-editor-wrap .uploader-editor-content {
1552      position: absolute;
1553      top: 10px;
1554      left: 10px;
1555      right: 10px;
1556      bottom: 10px;
1557      border: 1px dashed #fff;
1558  }
1559  
1560  /* uploader drop-zone title */
1561  .uploader-window h1, /* Back-compat for pre-5.3 */
1562  .uploader-window .uploader-editor-title,
1563  .wp-editor-wrap .uploader-editor .uploader-editor-title {
1564      position: absolute;
1565      top: 50%;
1566      left: 0;
1567      right: 0;
1568      transform: translateY(-50%);
1569      font-size: 3em;
1570      line-height: 1.3;
1571      font-weight: 600;
1572      color: #fff;
1573      margin: 0;
1574      padding: 0 10px;
1575  }
1576  
1577  .wp-editor-wrap .uploader-editor .uploader-editor-title {
1578      display: none;
1579  }
1580  
1581  .wp-editor-wrap .uploader-editor.droppable .uploader-editor-title {
1582      display: block;
1583  }
1584  
1585  .uploader-window .media-progress-bar {
1586      margin-top: 20px;
1587      max-width: 300px;
1588      background: transparent;
1589      border-color: #fff;
1590      display: none;
1591  }
1592  
1593  .uploader-window .media-progress-bar div {
1594      background: #fff;
1595  }
1596  
1597  .uploading .uploader-window .media-progress-bar {
1598      display: block;
1599  }
1600  
1601  .media-frame .uploader-inline {
1602      margin-bottom: 20px;
1603      padding: 0;
1604      text-align: center;
1605  }
1606  
1607  .uploader-inline-content {
1608      position: absolute;
1609      top: 30%;
1610      left: 0;
1611      right: 0;
1612  }
1613  
1614  .uploader-inline-content .upload-ui {
1615      margin: 2em 0;
1616  }
1617  
1618  .uploader-inline-content .post-upload-ui {
1619      margin-bottom: 2em;
1620  }
1621  
1622  .uploader-inline .has-upload-message .upload-ui {
1623      margin: 0 0 4em;
1624  }
1625  
1626  .uploader-inline h2 {
1627      font-size: 20px;
1628      line-height: 1.4;
1629      font-weight: 400;
1630      margin: 0;
1631  }
1632  
1633  .uploader-inline .has-upload-message .upload-instructions {
1634      font-size: 14px;
1635      color: #3c434a;
1636      font-weight: 400;
1637  }
1638  
1639  .uploader-inline .drop-instructions {
1640      display: none;
1641  }
1642  
1643  .supports-drag-drop .uploader-inline .drop-instructions {
1644      display: block;
1645  }
1646  
1647  .uploader-inline p {
1648      margin: 0.5em 0;
1649  }
1650  
1651  .uploader-inline .media-progress-bar {
1652      display: none;
1653  }
1654  
1655  .uploading.uploader-inline .media-progress-bar {
1656      display: block;
1657  }
1658  
1659  .uploader-inline .browser {
1660      display: inline-block !important;
1661  }
1662  
1663  /**
1664   * Selection
1665   */
1666  .media-selection {
1667      position: absolute;
1668      top: 0;
1669      left: 0;
1670      right: 350px;
1671      height: 60px;
1672      padding: 0 0 0 16px;
1673      overflow: hidden;
1674      white-space: nowrap;
1675  }
1676  
1677  .media-selection .selection-info {
1678      display: inline-block;
1679      font-size: 12px;
1680      height: 60px;
1681      margin-right: 10px;
1682      vertical-align: top;
1683  }
1684  
1685  .media-selection.empty,
1686  .media-selection.editing {
1687      display: none;
1688  }
1689  
1690  .media-selection.one .edit-selection {
1691      display: none;
1692  }
1693  
1694  .media-selection .count {
1695      display: block;
1696      padding-top: 12px;
1697      font-size: 14px;
1698      line-height: 1.42857142;
1699      font-weight: 600;
1700  }
1701  
1702  .media-selection .button-link {
1703      float: left;
1704      padding: 1px 8px;
1705      margin: 1px 8px 1px -8px;
1706      line-height: 1.4;
1707      border-right: 1px solid #dcdcde;
1708      color: var(--wp-admin-theme-color, #3858e9);
1709      text-decoration: none;
1710  }
1711  
1712  .media-selection .button-link:hover,
1713  .media-selection .button-link:focus {
1714      color: var(--wp-admin-theme-color-darker-20, #183ad6);
1715  }
1716  
1717  .media-selection .button-link:last-child {
1718      border-right: 0;
1719      margin-right: 0;
1720  }
1721  
1722  .selection-info .clear-selection {
1723      color: #d63638;
1724  }
1725  
1726  .selection-info .clear-selection:hover,
1727  .selection-info .clear-selection:focus {
1728      color: #d63638;
1729  }
1730  
1731  .media-selection .selection-view {
1732      display: inline-block;
1733      vertical-align: top;
1734  }
1735  
1736  .media-selection .attachments {
1737      display: inline-block;
1738      height: 48px;
1739      margin: 6px;
1740      padding: 0;
1741      overflow: hidden;
1742      vertical-align: top;
1743  }
1744  
1745  .media-selection .attachment {
1746      width: 40px;
1747      padding: 0;
1748      margin: 4px;
1749  }
1750  
1751  .media-selection .attachment .thumbnail {
1752      top: 0;
1753      right: 0;
1754      bottom: 0;
1755      left: 0;
1756  }
1757  
1758  .media-selection .attachment .icon {
1759      width: 50%;
1760  }
1761  
1762  .media-selection .attachment-preview {
1763      box-shadow: none;
1764      background: none;
1765  }
1766  
1767  .wp-core-ui .media-selection .attachment:focus,
1768  .wp-core-ui .media-selection .selected.attachment:focus,
1769  .wp-core-ui .media-selection .attachment.details:focus {
1770      box-shadow:
1771          0 0 0 1px #fff,
1772          0 0 2px 3px var(--wp-admin-theme-color, #3858e9);
1773      /* Only visible in Windows High Contrast mode */
1774      outline: 2px solid transparent;
1775  }
1776  
1777  .wp-core-ui .media-selection .selected.attachment {
1778      box-shadow: none;
1779  }
1780  
1781  .wp-core-ui .media-selection .attachment.details {
1782      box-shadow:
1783          0 0 0 1px #fff,
1784          0 0 0 3px var(--wp-admin-theme-color, #3858e9);
1785  }
1786  
1787  .media-selection:after {
1788      content: "";
1789      display: block;
1790      position: absolute;
1791      top: 0;
1792      right: 0;
1793      bottom: 0;
1794      width: 25px;
1795      background-image: linear-gradient(to left,#fff,rgba(255, 255, 255, 0));
1796  }
1797  
1798  .media-selection .attachment .filename {
1799      display: none;
1800  }
1801  
1802  /**
1803   * Spinner
1804   */
1805  .media-frame .spinner {
1806      background: url(../images/spinner.gif) no-repeat;
1807      background-size: 20px 20px;
1808      float: right;
1809      display: inline-block;
1810      visibility: hidden;
1811      opacity: 0.7;
1812      filter: alpha(opacity=70);
1813      width: 20px;
1814      height: 20px;
1815      margin: 0;
1816      vertical-align: middle;
1817  }
1818  
1819  .media-frame .media-sidebar .settings-save-status .spinner {
1820      position: absolute;
1821      right: 0;
1822      top: 0;
1823  }
1824  
1825  .media-frame.mode-grid .spinner {
1826      margin: 0;
1827      float: none;
1828      vertical-align: middle;
1829  }
1830  
1831  .media-frame .instructions + .spinner.is-active {
1832      vertical-align: middle;
1833  }
1834  
1835  .media-frame .spinner.is-active {
1836      visibility: visible;
1837  }
1838  
1839  .media-bg-overlay {
1840      position: absolute;
1841  }
1842  
1843  /**
1844   * Attachment Details
1845   */
1846  .attachment-details {
1847      position: relative;
1848      overflow: auto;
1849  }
1850  
1851  .attachment-details .settings-save-status {
1852      text-align: right;
1853      text-transform: none;
1854      font-weight: 400;
1855  }
1856  
1857  .attachment-details .settings-save-status .spinner {
1858      float: none;
1859      margin-left: 5px;
1860  }
1861  
1862  .attachment-details .settings-save-status .saved {
1863      display: none;
1864  }
1865  
1866  .attachment-details.save-waiting .settings-save-status .spinner {
1867      visibility: visible;
1868  }
1869  
1870  .attachment-details.save-complete .settings-save-status .saved {
1871      display: inline-block;
1872  }
1873  
1874  .attachment-info {
1875      overflow: hidden;
1876      min-height: 60px;
1877      margin-bottom: 16px;
1878      line-height: 1.5;
1879      color: #646970;
1880      border-bottom: 1px solid #dcdcde;
1881      padding-bottom: 11px;
1882  }
1883  
1884  .attachment-info .wp-media-wrapper {
1885      margin-bottom: 8px;
1886  }
1887  
1888  .attachment-info .wp-media-wrapper.wp-audio {
1889      margin-top: 13px;
1890  }
1891  
1892  .attachment-info .filename {
1893      font-weight: 600;
1894      color: #3c434a;
1895      word-wrap: break-word;
1896  }
1897  
1898  .attachment-info .thumbnail {
1899      position: relative;
1900      float: left;
1901      max-width: 120px;
1902      max-height: 120px;
1903      margin-top: 5px;
1904      margin-right: 10px;
1905      margin-bottom: 5px;
1906  }
1907  
1908  .uploading .attachment-info .thumbnail {
1909      width: 120px;
1910      height: 80px;
1911      box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.1);
1912  }
1913  
1914  .uploading .attachment-info .media-progress-bar {
1915      margin-top: 35px;
1916  }
1917  
1918  .attachment-info .thumbnail-image:after {
1919      content: "";
1920      display: block;
1921      position: absolute;
1922      top: 0;
1923      left: 0;
1924      right: 0;
1925      bottom: 0;
1926      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
1927      overflow: hidden;
1928  }
1929  
1930  .attachment-info .thumbnail img {
1931      display: block;
1932      max-width: 120px;
1933      max-height: 120px;
1934      margin: 0 auto;
1935  }
1936  
1937  .attachment-info .details {
1938      float: left;
1939      font-size: 12px;
1940      max-width: 100%;
1941  }
1942  
1943  .attachment-info .edit-attachment,
1944  .attachment-info .delete-attachment,
1945  .attachment-info .trash-attachment,
1946  .attachment-info .untrash-attachment {
1947      display: block;
1948      text-decoration: none;
1949      white-space: nowrap;
1950  }
1951  
1952  .attachment-details.needs-refresh .attachment-info .edit-attachment {
1953      display: none;
1954  }
1955  
1956  .attachment-info .edit-attachment {
1957      display: block;
1958  }
1959  
1960  .media-modal .delete-attachment,
1961  .media-modal .trash-attachment,
1962  .media-modal .untrash-attachment {
1963      display: inline;
1964      padding: 0;
1965      color: #d63638;
1966  }
1967  
1968  .media-modal .delete-attachment:hover,
1969  .media-modal .delete-attachment:focus,
1970  .media-modal .trash-attachment:hover,
1971  .media-modal .trash-attachment:focus,
1972  .media-modal .untrash-attachment:hover,
1973  .media-modal .untrash-attachment:focus {
1974      color: #d63638;
1975  }
1976  
1977  /**
1978   * Attachment Display Settings
1979   */
1980  .attachment-display-settings {
1981      width: 100%;
1982      float: left;
1983      overflow: hidden;
1984  }
1985  
1986  .collection-settings {
1987      overflow: hidden;
1988  }
1989  
1990  .collection-settings .setting input[type="checkbox"] {
1991      float: left;
1992      margin-right: 8px;
1993  }
1994  
1995  .collection-settings .setting span, /* Back-compat for pre-5.3 */
1996  .collection-settings .setting .name {
1997      min-width: inherit;
1998  }
1999  
2000  /**
2001   * Image Editor
2002   */
2003  .media-modal .imgedit-wrap {
2004      position: static;
2005  }
2006  
2007  .media-modal .imgedit-wrap .imgedit-panel-content {
2008      padding: 16px 16px 0;
2009      overflow: visible;
2010  }
2011  
2012  /*
2013   * Implementation of bottom padding in overflow content differs across browsers.
2014   * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
2015   */
2016  .media-modal .imgedit-wrap .imgedit-save-target {
2017      margin: 8px 0 24px;
2018  }
2019  
2020  .media-modal .imgedit-group {
2021      background: none;
2022      border: none;
2023      box-shadow: none;
2024      margin: 0;
2025      padding: 0;
2026      position: relative; /* RTL fix, #WP29352 */
2027  }
2028  
2029  .media-modal .imgedit-group.imgedit-panel-active {
2030      margin-bottom: 16px;
2031      padding-bottom: 16px;
2032  }
2033  
2034  .media-modal .imgedit-group-top {
2035      margin: 0;
2036  }
2037  
2038  .media-modal .imgedit-group-top h2,
2039  .media-modal .imgedit-group-top h2 .button-link {
2040      display: inline-block;
2041      text-transform: uppercase;
2042      font-size: 12px;
2043      color: #646970;
2044      margin: 0;
2045      margin-top: 3px;
2046  }
2047  
2048  .media-modal .imgedit-group-top h2 a,
2049  .media-modal .imgedit-group-top h2 .button-link {
2050      text-decoration: none;
2051      color: #646970;
2052  }
2053  
2054  /* higher specificity than media.css */
2055  .wp-core-ui.media-modal .image-editor .imgedit-help-toggle,
2056  .wp-core-ui.media-modal .image-editor .imgedit-help-toggle:hover,
2057  .wp-core-ui.media-modal .image-editor .imgedit-help-toggle:active {
2058      border: 1px solid transparent;
2059      margin: 0;
2060      padding: 0;
2061      background: transparent;
2062      color: var(--wp-admin-theme-color, #3858e9);
2063      font-size: 20px;
2064      line-height: 1;
2065      cursor: pointer;
2066      box-sizing: content-box;
2067      box-shadow: none;
2068  }
2069  
2070  .wp-core-ui.media-modal .image-editor .imgedit-help-toggle:focus {
2071      color: var(--wp-admin-theme-color, #3858e9);
2072      border-color: var(--wp-admin-theme-color, #3858e9);
2073      box-shadow: 0 0 0 1px var(--wp-admin-theme-color, #3858e9);
2074      /* Only visible in Windows High Contrast mode */
2075      outline: 2px solid transparent;
2076  }
2077  
2078  .wp-core-ui.media-modal .imgedit-group-top .dashicons-arrow-down.imgedit-help-toggle {
2079      margin-top: -3px;
2080  }
2081  
2082  .wp-core-ui.media-modal .image-editor h3 .imgedit-help-toggle {
2083      margin-top: -2px;
2084  }
2085  
2086  .media-modal .imgedit-help-toggled span.dashicons:before {
2087      content: "\f142";
2088      content: "\f142" / '';
2089  }
2090  
2091  .media-modal .imgedit-thumbnail-preview {
2092      margin: 10px 8px 0 0;
2093  }
2094  
2095  .imgedit-thumbnail-preview-caption {
2096      display: block;
2097  }
2098  
2099  .media-modal .imgedit-wrap div.updated, /* Back-compat for pre-5.5 */
2100  .media-modal .imgedit-wrap .notice {
2101      margin: 0 16px;
2102  }
2103  
2104  /**
2105   * Embed from URL and Image Details
2106   */
2107  .embed-url {
2108      display: block;
2109      position: relative;
2110      padding: 16px;
2111      margin: 0;
2112      z-index: 250;
2113      background: #fff;
2114      font-size: 18px;
2115  }
2116  
2117  .media-frame .embed-url input {
2118      font-size: 18px;
2119      line-height: 1.22222222; /* 22px */
2120      padding: 12px 40px 12px 14px; /* right padding to leave room for the spinner */
2121      width: 100%;
2122      min-width: 200px;
2123      box-shadow: inset 2px 2px 4px -2px rgba(0, 0, 0, 0.1);
2124  }
2125  
2126  .media-frame .embed-url input::-ms-clear {
2127      display: none; /* the "x" in IE 11 conflicts with the spinner */
2128  }
2129  
2130  .media-frame .embed-url .spinner {
2131      position: absolute;
2132      top: 32px;
2133      right: 26px;
2134  }
2135  
2136  .media-frame .embed-loading .embed-url .spinner {
2137      visibility: visible;
2138  }
2139  
2140  .embed-link-settings,
2141  .embed-media-settings {
2142      position: absolute;
2143      top: 82px;
2144      left: 0;
2145      right: 0;
2146      bottom: 0;
2147      padding: 0 16px;
2148      overflow: auto;
2149  }
2150  
2151  .media-embed .embed-link-settings .link-text {
2152      margin-top: 0;
2153  }
2154  
2155  /*
2156   * Implementation of bottom padding in overflow content differs across browsers.
2157   * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
2158   */
2159  .embed-link-settings::after,
2160  .embed-media-settings::after {
2161      content: "";
2162      display: flex;
2163      clear: both;
2164      height: 24px;
2165  }
2166  
2167  .media-embed .embed-link-settings {
2168      /* avoid Firefox to give focus to the embed preview container parent */
2169      overflow: visible;
2170  }
2171  
2172  .embed-preview img,
2173  .embed-preview iframe,
2174  .embed-preview embed,
2175  .mejs-container video {
2176      max-width: 100%;
2177      vertical-align: middle;
2178  }
2179  
2180  .embed-preview a {
2181      display: inline-block;
2182  }
2183  
2184  .embed-preview img {
2185      display: block;
2186      height: auto;
2187  }
2188  
2189  .mejs-container:focus {
2190      outline: 1px solid var(--wp-admin-theme-color, #3858e9);
2191      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
2192  }
2193  
2194  .image-details .media-modal {
2195      left: 140px;
2196      right: 140px;
2197  }
2198  
2199  .image-details .media-frame-title,
2200  .image-details .media-frame-content,
2201  .image-details .media-frame-router {
2202      left: 0;
2203  }
2204  
2205  .image-details .embed-media-settings {
2206      top: 0;
2207      overflow: visible;
2208      padding: 0;
2209  }
2210  
2211  .image-details .embed-media-settings::after {
2212      content: none;
2213  }
2214  
2215  .image-details .embed-media-settings,
2216  .image-details .embed-media-settings div {
2217      box-sizing: border-box;
2218  }
2219  
2220  .image-details .column-settings {
2221      background: #f6f7f7;
2222      border-right: 1px solid #dcdcde;
2223      min-height: 100%;
2224      width: 55%;
2225      position: absolute;
2226      top: 0;
2227      left: 0;
2228  }
2229  
2230  .image-details .column-settings h2 {
2231      margin: 20px;
2232      padding-top: 20px;
2233      border-top: 1px solid #dcdcde;
2234      color: #1d2327;
2235  }
2236  
2237  .image-details .column-image {
2238      width: 45%;
2239      position: absolute;
2240      left: 55%;
2241      top: 0;
2242  }
2243  
2244  .image-details .image {
2245      margin: 20px;
2246  }
2247  
2248  .image-details .image img {
2249      max-width: 100%;
2250      max-height: 500px;
2251  }
2252  
2253  .image-details .advanced-toggle {
2254      padding: 0;
2255      color: #646970;
2256      text-transform: uppercase;
2257      text-decoration: none;
2258  }
2259  
2260  .image-details .advanced-toggle:hover,
2261  .image-details .advanced-toggle:active {
2262      color: #646970;
2263  }
2264  
2265  .image-details .advanced-toggle:after {
2266      font: normal 20px/1 dashicons;
2267      vertical-align: top;
2268      -webkit-font-smoothing: antialiased;
2269      -moz-osx-font-smoothing: grayscale;
2270      content: "\f140";
2271      content: "\f140" / '';
2272      display: inline-block;
2273      margin-top: -2px;
2274  }
2275  
2276  .image-details .advanced-visible .advanced-toggle:after {
2277      content: "\f142";
2278      content: "\f142" / '';
2279  }
2280  
2281  .image-details .custom-size label, /* Back-compat for pre-5.3 */
2282  .image-details .custom-size .custom-size-setting {
2283      display: block;
2284      float: left;
2285  }
2286  
2287  .image-details .custom-size .custom-size-setting label {
2288      float: none;
2289  }
2290  
2291  .image-details .custom-size input {
2292      width: 5em;
2293  }
2294  
2295  .image-details .custom-size .sep {
2296      float: left;
2297      margin: 26px 6px 0;
2298  }
2299  
2300  .image-details .custom-size .description {
2301      margin-left: 0;
2302  }
2303  
2304  .media-embed .thumbnail {
2305      max-width: 100%;
2306      max-height: 200px;
2307      position: relative;
2308      float: left;
2309  }
2310  
2311  .media-embed .thumbnail img {
2312      max-height: 200px;
2313      display: block;
2314  }
2315  
2316  .media-embed .thumbnail:after {
2317      content: "";
2318      display: block;
2319      position: absolute;
2320      top: 0;
2321      left: 0;
2322      right: 0;
2323      bottom: 0;
2324      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
2325      overflow: hidden;
2326  }
2327  
2328  .media-embed .setting,
2329  .media-embed .setting-group {
2330      width: 100%;
2331      margin: 10px 0;
2332      float: left;
2333      display: block;
2334      clear: both;
2335  }
2336  
2337  .media-embed .setting-group .setting:not(.checkbox-setting) {
2338      margin: 0;
2339  }
2340  
2341  .media-embed .setting.has-description {
2342      margin-bottom: 5px;
2343  }
2344  
2345  .media-embed .description {
2346      clear: both;
2347      font-style: normal;
2348  }
2349  
2350  .media-embed .content-track + .description {
2351      line-height: 1.4;
2352      /* The !important needs to override a high specificity selector from wp-medialement.css */
2353      max-width: none !important;
2354  }
2355  
2356  .media-embed .remove-track {
2357      margin-bottom: 10px;
2358  }
2359  
2360  .image-details .embed-media-settings .setting,
2361  .image-details .embed-media-settings .setting-group {
2362      float: none;
2363      width: auto;
2364  }
2365  
2366  .image-details .actions {
2367      margin: 10px 0;
2368  }
2369  
2370  .image-details .hidden {
2371      display: none;
2372  }
2373  
2374  .media-embed .setting input[type="text"],
2375  .media-embed .setting textarea,
2376  .media-embed fieldset {
2377      display: block;
2378      width: 100%;
2379      max-width: 400px;
2380  }
2381  
2382  .image-details .embed-media-settings .setting input[type="text"],
2383  .image-details .embed-media-settings .setting textarea {
2384      max-width: inherit;
2385      width: 70%;
2386  }
2387  
2388  .image-details .embed-media-settings .setting input.link-to-custom,
2389  .image-details .embed-media-settings .link-target,
2390  .image-details .embed-media-settings .custom-size,
2391  .image-details .embed-media-settings .setting-group,
2392  .image-details .description {
2393      margin-left: 27%;
2394      width: 70%;
2395  }
2396  
2397  .image-details .description {
2398      font-style: normal;
2399      margin-top: 0;
2400  }
2401  
2402  .image-details .embed-media-settings .link-target {
2403      margin-top: 16px;
2404  }
2405  
2406  .image-details .checkbox-label,
2407  .audio-details .checkbox-label,
2408  .video-details .checkbox-label {
2409      vertical-align: baseline;
2410  }
2411  
2412  .media-embed .setting input.hidden,
2413  .media-embed .setting textarea.hidden {
2414      display: none;
2415  }
2416  
2417  .media-embed .setting span, /* Back-compat for pre-5.3 */
2418  .media-embed .setting .name,
2419  .media-embed .setting-group .name {
2420      display: inline-block;
2421      font-size: 13px;
2422      line-height: 1.84615384;
2423      color: #646970;
2424  }
2425  
2426  .media-embed .setting span {
2427      display: block; /* Back-compat for pre-5.3 */
2428      width: 200px; /* Back-compat for pre-5.3 */
2429  }
2430  
2431  .image-details .embed-media-settings .setting span, /* Back-compat for pre-5.3 */
2432  .image-details .embed-media-settings .setting .name {
2433      float: left;
2434      width: 25%;
2435      text-align: right;
2436      margin: 8px 1% 0;
2437      line-height: 1.1;
2438  }
2439  
2440  /* Buttons group in IE 11. */
2441  .media-frame .setting-group .button-group,
2442  .image-details .embed-media-settings .setting .button-group {
2443      width: auto;
2444  }
2445  
2446  .media-embed-sidebar {
2447      position: absolute;
2448      top: 0;
2449      left: 440px;
2450  }
2451  
2452  .advanced-section,
2453  .link-settings {
2454      margin-top: 10px;
2455  }
2456  
2457  /**
2458   * Button groups fix: can be removed together with the Back-compat for pre-5.3
2459   */
2460   .media-frame .setting .button-group {
2461       display: flex;
2462       margin: 0 !important;
2463       max-width: none !important;
2464   }
2465  
2466  /**
2467   * Localization
2468   */
2469  .rtl .media-modal,
2470  .rtl .media-frame,
2471  .rtl .media-frame .search,
2472  .rtl .media-frame input[type="text"],
2473  .rtl .media-frame input[type="password"],
2474  .rtl .media-frame input[type="number"],
2475  .rtl .media-frame input[type="search"],
2476  .rtl .media-frame input[type="email"],
2477  .rtl .media-frame input[type="url"],
2478  .rtl .media-frame input[type="tel"],
2479  .rtl .media-frame textarea,
2480  .rtl .media-frame select {
2481      font-family: Tahoma, sans-serif;
2482  }
2483  
2484  :lang(he-il) .rtl .media-modal,
2485  :lang(he-il) .rtl .media-frame,
2486  :lang(he-il) .rtl .media-frame .search,
2487  :lang(he-il) .rtl .media-frame input[type="text"],
2488  :lang(he-il) .rtl .media-frame input[type="password"],
2489  :lang(he-il) .rtl .media-frame input[type="number"],
2490  :lang(he-il) .rtl .media-frame input[type="search"],
2491  :lang(he-il) .rtl .media-frame input[type="email"],
2492  :lang(he-il) .rtl .media-frame input[type="url"],
2493  :lang(he-il) .rtl .media-frame textarea,
2494  :lang(he-il) .rtl .media-frame select {
2495      font-family: Arial, sans-serif;
2496  }
2497  
2498  /**
2499   * Responsive layout
2500   */
2501  @media only screen and (max-width: 900px) {
2502      .media-modal .media-frame-title {
2503          height: 40px;
2504      }
2505  
2506      .media-modal .media-frame-title h1 {
2507          line-height: 2.22222222;
2508          font-size: 18px;
2509      }
2510  
2511      .media-modal-close {
2512          width: 42px;
2513          height: 42px;
2514      }
2515  
2516      /* Drop-down menu */
2517      .media-frame .media-frame-title {
2518          position: static;
2519          padding: 0 44px;
2520          text-align: center;
2521      }
2522  
2523      .media-frame:not(.hide-menu) .media-frame-router,
2524      .media-frame:not(.hide-menu) .media-frame-content,
2525      .media-frame:not(.hide-menu) .media-frame-toolbar {
2526          left: 0;
2527      }
2528  
2529      .media-frame:not(.hide-menu) .media-frame-router {
2530          /* 40 title + (40 - 6) menu toggle button + 6 spacing */
2531          top: 80px;
2532      }
2533  
2534      .media-frame:not(.hide-menu) .media-frame-content {
2535          /* 80 + room for the tabs */
2536          top: 114px;
2537      }
2538  
2539      .media-frame.hide-router .media-frame-content {
2540          top: 80px;
2541      }
2542  
2543      .media-frame:not(.hide-menu) .media-frame-menu {
2544          position: static;
2545          width: 0;
2546      }
2547  
2548      .media-frame:not(.hide-menu) .media-menu {
2549          display: none;
2550          width: auto;
2551          max-width: 80%;
2552          overflow: auto;
2553          z-index: 2000;
2554          top: 75px;
2555          left: 50%;
2556          transform: translateX(-50%);
2557          right: auto;
2558          bottom: auto;
2559          padding: 5px 0;
2560          border: 1px solid #c3c4c7;
2561      }
2562  
2563      .media-frame:not(.hide-menu) .media-menu.visible {
2564          display: block;
2565      }
2566  
2567      .media-frame:not(.hide-menu) .media-menu > a {
2568          padding: 12px 16px;
2569          font-size: 16px;
2570      }
2571  
2572      .media-frame:not(.hide-menu) .media-menu .separator {
2573          margin: 5px 10px;
2574      }
2575  
2576      /* Visually hide the menu heading keeping it available to assistive technologies. */
2577      .media-frame-menu-heading {
2578          clip-path: inset(50%);
2579          height: 1px;
2580          overflow: hidden;
2581          padding: 0;
2582          width: 1px;
2583          border: 0;
2584          margin: -1px;
2585          /* Many screen reader and browser combinations announce broken words as they would appear visually. */
2586          word-wrap: normal !important;
2587          word-break: normal !important;
2588      }
2589  
2590      /* Reveal the menu toggle button. */
2591      .wp-core-ui .media-frame:not(.hide-menu) .button.media-frame-menu-toggle {
2592          display: inline-flex;
2593          align-items: center;
2594          position: absolute;
2595          left: 50%;
2596          transform: translateX(-50%);
2597          margin: -6px 0 0;
2598          padding: 0 2px 0 12px;
2599          font-size: 0.875rem;
2600          font-weight: 600;
2601          text-decoration: none;
2602          background: transparent;
2603          /* Only for IE11 to vertically align text within the inline-flex button */
2604          height: 0.1%;
2605          /* Modern browsers */
2606          min-height: 40px;
2607      }
2608  
2609      .wp-core-ui .media-frame:not(.hide-menu) .button.media-frame-menu-toggle .dashicons {
2610          line-height: 1;
2611      }
2612  
2613      .wp-core-ui .button.media-frame-menu-toggle:hover,
2614      .wp-core-ui .button.media-frame-menu-toggle:active {
2615          background: transparent;
2616          transform: none;
2617      }
2618  
2619      .wp-core-ui .button.media-frame-menu-toggle:focus {
2620          /* Only visible in Windows High Contrast mode */
2621          outline: 1px solid transparent;
2622      }
2623      /* End drop-down menu */
2624  
2625      .media-sidebar {
2626          width: 230px;
2627      }
2628  
2629      .options-general-php .crop-content.site-icon,
2630      .wp-customizer:not(.mobile) .media-frame-content .crop-content.site-icon {
2631          margin-right: 262px;
2632      }
2633  
2634      .attachments-browser .attachments,
2635      .attachments-browser .uploader-inline,
2636      .attachments-browser .media-toolbar,
2637      .attachments-browser .attachments-wrapper,
2638      .attachments-browser.has-load-more .attachments-wrapper {
2639          right: 262px;
2640      }
2641  
2642      .attachments-browser .media-toolbar {
2643          height: 74px;
2644      }
2645  
2646      .attachments-browser .attachments,
2647      .attachments-browser .uploader-inline,
2648      .media-frame-content .attachments-browser .attachments-wrapper {
2649          top: 90px;
2650      }
2651  
2652      .media-sidebar .setting,
2653      .attachment-details .setting {
2654          margin: 6px 0;
2655      }
2656  
2657      .media-sidebar .setting input,
2658      .media-sidebar .setting textarea,
2659      .media-sidebar .setting .name,
2660      .attachment-details .setting input,
2661      .attachment-details .setting textarea,
2662      .attachment-details .setting .name,
2663      .compat-item label span {
2664          float: none;
2665          display: inline-block;
2666      }
2667  
2668      .media-sidebar .setting span, /* Back-compat for pre-5.3 */
2669      .attachment-details .setting span, /* Back-compat for pre-5.3 */
2670      .media-sidebar .checkbox-label-inline {
2671          float: none;
2672      }
2673  
2674      .media-sidebar .setting .select-label-inline {
2675          display: inline;
2676      }
2677  
2678      .media-sidebar .setting .name,
2679      .media-sidebar .checkbox-label-inline,
2680      .attachment-details .setting .name,
2681      .compat-item label span {
2682          text-align: inherit;
2683          min-height: 16px;
2684          margin: 0;
2685          padding: 8px 2px 2px;
2686      }
2687  
2688      /* Needs high specificity. */
2689      .media-sidebar .setting .copy-to-clipboard-container,
2690      .attachment-details .attachment-info .copy-to-clipboard-container {
2691          margin-left: 0;
2692          padding-top: 0;
2693      }
2694  
2695      .media-sidebar .setting .copy-attachment-url,
2696      .attachment-details .attachment-info .copy-attachment-url {
2697          margin: 0 1px;
2698      }
2699  
2700      .media-sidebar .setting .value,
2701      .attachment-details .setting .value {
2702          float: none;
2703          width: auto;
2704      }
2705  
2706      .media-sidebar .setting input[type="text"],
2707      .media-sidebar .setting input[type="password"],
2708      .media-sidebar .setting input[type="email"],
2709      .media-sidebar .setting input[type="number"],
2710      .media-sidebar .setting input[type="search"],
2711      .media-sidebar .setting input[type="tel"],
2712      .media-sidebar .setting input[type="url"],
2713      .media-sidebar .setting textarea,
2714      .media-sidebar .setting select,
2715      .attachment-details .setting input[type="text"],
2716      .attachment-details .setting input[type="password"],
2717      .attachment-details .setting input[type="email"],
2718      .attachment-details .setting input[type="number"],
2719      .attachment-details .setting input[type="search"],
2720      .attachment-details .setting input[type="tel"],
2721      .attachment-details .setting input[type="url"],
2722      .attachment-details .setting textarea,
2723      .attachment-details .setting select,
2724      .attachment-details .setting + .description {
2725          float: none;
2726          width: 98%;
2727          max-width: none;
2728          height: auto;
2729      }
2730  
2731      .media-frame .media-toolbar input[type="search"] {
2732          line-height: 2.25; /* 36px */
2733      }
2734  
2735      .media-toolbar-secondary,
2736      .media-toolbar-secondary label {
2737          display: block;
2738      }
2739  
2740      .media-sidebar .setting select.columns,
2741      .attachment-details .setting select.columns {
2742          width: auto;
2743      }
2744  
2745      .media-frame input,
2746      .media-frame textarea,
2747      .media-frame .search {
2748          padding: 3px 6px;
2749      }
2750  
2751      .wp-admin .media-frame select {
2752          min-height: 40px;
2753          font-size: 16px;
2754          line-height: 1.625;
2755          padding: 5px 24px 5px 8px;
2756      }
2757  
2758      .image-details .column-image {
2759          width: 30%;
2760          left: 70%;
2761      }
2762  
2763      .image-details .column-settings {
2764          width: 70%;
2765      }
2766  
2767      .image-details .media-modal {
2768          left: 30px;
2769          right: 30px;
2770      }
2771  
2772      .image-details .embed-media-settings .setting,
2773      .image-details .embed-media-settings .setting-group {
2774          margin: 20px;
2775      }
2776  
2777      .image-details .embed-media-settings .setting span, /* Back-compat for pre-5.3 */
2778      .image-details .embed-media-settings .setting .name {
2779          float: none;
2780          text-align: left;
2781          width: 100%;
2782          margin-bottom: 4px;
2783          margin-left: 0;
2784      }
2785  
2786      .media-modal .legend-inline {
2787          position: static;
2788          transform: none;
2789          margin-left: 0;
2790          margin-bottom: 6px;
2791      }
2792  
2793      .image-details .embed-media-settings .setting-group .setting {
2794          margin-bottom: 0;
2795      }
2796  
2797      .image-details .embed-media-settings .setting input.link-to-custom,
2798      .image-details .embed-media-settings .setting input[type="text"],
2799      .image-details .embed-media-settings .setting textarea {
2800          width: 100%;
2801          margin-left: 0;
2802      }
2803  
2804      .image-details .embed-media-settings .setting.has-description {
2805          margin-bottom: 5px;
2806      }
2807  
2808      .image-details .description {
2809          width: auto;
2810          margin: 0 20px;
2811      }
2812  
2813      .image-details .embed-media-settings .custom-size {
2814          margin-left: 20px;
2815      }
2816  
2817      .collection-settings .setting input[type="checkbox"] {
2818          float: none;
2819          margin-top: 0;
2820      }
2821  
2822      .media-selection {
2823          min-width: 120px;
2824      }
2825  
2826      .media-selection:after {
2827          background: none;
2828      }
2829  
2830      .media-selection .attachments {
2831          display: none;
2832      }
2833  
2834      .media-modal .attachments-browser .media-toolbar .search {
2835          max-width: 100%;
2836          height: auto;
2837          float: right;
2838      }
2839  
2840      .media-frame .media-toolbar-secondary .spinner {
2841          top: calc( 50% - 8px );
2842      }
2843  
2844      .media-modal .attachments-browser .media-toolbar .attachment-filters {
2845          height: auto;
2846      }
2847  
2848      /* Text inputs need to be 16px, or they force zooming on iOS */
2849      .media-frame input[type="text"],
2850      .media-frame input[type="password"],
2851      .media-frame input[type="number"],
2852      .media-frame input[type="search"],
2853      .media-frame input[type="email"],
2854      .media-frame input[type="url"],
2855      .media-frame textarea,
2856      .media-frame select {
2857          font-size: 16px;
2858          line-height: 1.5;
2859      }
2860  
2861      .media-frame .media-toolbar input[type="search"] {
2862          line-height: 2.3755; /* 38px */
2863      }
2864  }
2865  
2866  @media screen and (max-width: 782px) {
2867      .imgedit-panel-content {
2868          grid-template-columns: auto;
2869      }
2870  
2871      .media-frame-toolbar .media-toolbar {
2872          bottom: -60px;
2873      }
2874  
2875      .media-frame .media-toolbar-secondary .spinner {
2876          top: 0;
2877      }
2878  
2879      .mode-grid .attachments-browser .media-toolbar-primary {
2880          display: grid;
2881          grid-template-columns: auto 1fr;
2882      }
2883  
2884      .mode-grid .attachments-browser .media-toolbar-primary input[type="search"] {
2885          width: 100%;
2886      }
2887  
2888      .media-sidebar .copy-to-clipboard-container .success,
2889      .attachment-details .copy-to-clipboard-container .success {
2890          font-size: 14px;
2891          line-height: 2.71428571;
2892      }
2893  
2894      .media-frame .wp-filter .media-toolbar-secondary {
2895          position: unset;
2896      }
2897  
2898      .media-frame .media-toolbar-secondary .spinner {
2899          position: absolute;
2900          top: 0;
2901          bottom: 0;
2902          margin: auto;
2903          left: calc( 100% + 2px );
2904          right: 0;
2905          z-index: 9;
2906      }
2907  
2908      .media-bg-overlay {
2909          content: '';
2910          background: #ffffff;
2911          width: 100%;
2912          height: 100%;
2913          display: none;
2914          left: 0;
2915          right: 0;
2916          top: 0;
2917          bottom: 0;
2918          opacity: 0.6;
2919      }
2920  }
2921  
2922  /* Responsive on portrait and landscape */
2923  @media only screen and (max-width: 640px), screen and (max-height: 400px) {
2924      /* Full-bleed modal */
2925      .media-modal,
2926      .image-details .media-modal {
2927          position: fixed;
2928          top: 0;
2929          left: 0;
2930          right: 0;
2931          bottom: 0;
2932      }
2933  
2934      .media-modal-backdrop {
2935          position: fixed;
2936      }
2937  
2938      .options-general-php .crop-content.site-icon,
2939      .wp-customizer:not(.mobile) .media-frame-content .crop-content.site-icon {
2940          margin-right: 0;
2941      }
2942  
2943      .media-sidebar {
2944          z-index: 1900;
2945          max-width: 70%;
2946          bottom: 120%;
2947          box-sizing: border-box;
2948          padding-bottom: 0;
2949      }
2950  
2951      .media-sidebar.visible {
2952          bottom: 0;
2953      }
2954  
2955      .attachments-browser .attachments,
2956      .attachments-browser .uploader-inline,
2957      .attachments-browser .media-toolbar,
2958      .media-frame-content .attachments-browser .attachments-wrapper {
2959          right: 0;
2960      }
2961  
2962      .image-details .media-frame-title {
2963          display: block;
2964          top: 0;
2965          font-size: 14px;
2966      }
2967  
2968      .image-details .column-image,
2969      .image-details .column-settings {
2970          width: 100%;
2971          position: relative;
2972          left: 0;
2973      }
2974  
2975      .image-details .column-settings {
2976          padding: 4px 0;
2977      }
2978  
2979      /* Media tabs on the top */
2980      .media-frame-content .media-toolbar .instructions {
2981          display: none;
2982      }
2983  
2984      /* Change margin direction on load more button in responsive views. */
2985      .load-more-wrapper .load-more-jump {
2986          margin: 12px 0 0;
2987      }
2988  
2989  }
2990  
2991  @media only screen and (min-width: 901px) and (max-height: 400px) {
2992      .media-menu,
2993      .media-frame:not(.hide-menu) .media-menu {
2994          top: 0;
2995          padding-top: 44px;
2996      }
2997  
2998      /* Change margin direction on load more button in responsive views. */
2999      .load-more-wrapper .load-more-jump {
3000          margin: 12px 0 0;
3001      }
3002  
3003  }
3004  
3005  @media only screen and (max-width: 480px) {
3006      .wp-core-ui.wp-customizer .media-button {
3007          margin-top: 13px;
3008      }
3009  }
3010  
3011  /**
3012   * HiDPI Displays
3013   */
3014  @media print,
3015    (min-resolution: 120dpi) {
3016  
3017      .wp-core-ui .media-modal-icon {
3018          background-image: url(../images/uploader-icons-2x.png);
3019          background-size: 134px 15px;
3020      }
3021  
3022      .media-frame .spinner {
3023          background-image: url(../images/spinner-2x.gif);
3024      }
3025  }
3026  
3027  .media-frame-content[data-columns="1"] .attachment {
3028      width: 100%;
3029  }
3030  
3031  .media-frame-content[data-columns="2"] .attachment {
3032      width: 50%;
3033  }
3034  
3035  .media-frame-content[data-columns="3"] .attachment {
3036      width: 33.33%;
3037  }
3038  
3039  .media-frame-content[data-columns="4"] .attachment {
3040      width: 25%;
3041  }
3042  
3043  .media-frame-content[data-columns="5"] .attachment {
3044      width: 20%;
3045  }
3046  
3047  .media-frame-content[data-columns="6"] .attachment {
3048      width: 16.66%;
3049  }
3050  
3051  .media-frame-content[data-columns="7"] .attachment {
3052      width: 14.28%;
3053  }
3054  
3055  .media-frame-content[data-columns="8"] .attachment {
3056      width: 12.5%;
3057  }
3058  
3059  .media-frame-content[data-columns="9"] .attachment {
3060      width: 11.11%;
3061  }
3062  
3063  .media-frame-content[data-columns="10"] .attachment {
3064      width: 10%;
3065  }
3066  
3067  .media-frame-content[data-columns="11"] .attachment {
3068      width: 9.09%;
3069  }
3070  
3071  .media-frame-content[data-columns="12"] .attachment {
3072      width: 8.33%;
3073  }