[Summary view] [Print] [Text view]

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