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