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