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