[Summary view] [Print] [Text view]

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