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