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