[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      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  .load-more-wrapper {
1320      clear: both;
1321      display: flex;
1322      flex-wrap: wrap;
1323      align-items: center;
1324      justify-content: center;
1325      padding: 1em 0;
1326  }
1327  
1328  .load-more-wrapper .load-more-count {
1329      min-width: 100%;
1330      margin: 0 0 1em;
1331      text-align: center;
1332  }
1333  
1334  .load-more-wrapper .load-more {
1335      margin: 0;
1336  }
1337  
1338  /* Needs high specificity. */
1339  .media-frame .load-more-wrapper .load-more + .spinner {
1340      float: none;
1341      margin: 0 -30px 0 10px;
1342  }
1343  
1344  /* Reset spinner margin when the button is hidden to avoid horizontal scrollbar. */
1345  .media-frame .load-more-wrapper .load-more.hidden + .spinner {
1346      margin: 0;
1347  }
1348  
1349  /* Force a new row within the flex container. */
1350  .load-more-wrapper::after {
1351      content: "";
1352      min-width: 100%;
1353      order: 1;
1354  }
1355  
1356  .load-more-wrapper .load-more-jump {
1357      margin: 0 0 0 12px;
1358  }
1359  
1360  /**
1361   * Progress Bar
1362   */
1363  .media-progress-bar {
1364      position: relative;
1365      height: 10px;
1366      width: 70%;
1367      margin: 10px auto;
1368      border-radius: 10px;
1369      background: #dcdcde;
1370      background: rgba(0, 0, 0, 0.1);
1371  }
1372  
1373  .media-progress-bar div {
1374      height: 10px;
1375      min-width: 20px;
1376      width: 0;
1377      background: #2271b1;
1378      border-radius: 10px;
1379      transition: width 300ms;
1380  }
1381  
1382  .media-uploader-status .media-progress-bar {
1383      display: none;
1384      width: 100%;
1385  }
1386  
1387  .uploading.media-uploader-status .media-progress-bar {
1388      display: block;
1389  }
1390  
1391  .attachment-preview .media-progress-bar {
1392      position: absolute;
1393      top: 50%;
1394      left: 15%;
1395      width: 70%;
1396      margin: -5px 0 0;
1397  }
1398  
1399  .media-uploader-status {
1400      position: relative;
1401      margin: 0 auto;
1402      padding-bottom: 10px;
1403      max-width: 400px;
1404  }
1405  
1406  .uploader-inline .media-uploader-status h2 {
1407      display: none;
1408  }
1409  
1410  .media-uploader-status .upload-details {
1411      display: none;
1412      font-size: 12px;
1413      color: #646970;
1414  }
1415  
1416  .uploading.media-uploader-status .upload-details {
1417      display: block;
1418  }
1419  
1420  .media-uploader-status .upload-detail-separator {
1421      padding: 0 4px;
1422  }
1423  
1424  .media-uploader-status .upload-count {
1425      color: #3c434a;
1426  }
1427  
1428  .media-uploader-status .upload-dismiss-errors,
1429  .media-uploader-status .upload-errors {
1430      display: none;
1431  }
1432  
1433  .errors.media-uploader-status .upload-dismiss-errors,
1434  .errors.media-uploader-status .upload-errors {
1435      display: block;
1436  }
1437  
1438  .media-uploader-status .upload-dismiss-errors {
1439      transition: none;
1440      text-decoration: none;
1441  }
1442  
1443  .upload-errors .upload-error {
1444      padding: 12px;
1445      margin-bottom: 12px;
1446      background: #fff;
1447      border-left: 4px solid #d63638;
1448      box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
1449  }
1450  
1451  .uploader-inline .upload-errors .upload-error {
1452      padding: 12px 30px;
1453      background-color: #fcf0f1;
1454      box-shadow: none;
1455  }
1456  
1457  .upload-errors .upload-error-filename {
1458      font-weight: 600;
1459  }
1460  
1461  .upload-errors .upload-error-message {
1462      display: block;
1463      padding-top: 8px;
1464      word-wrap: break-word;
1465  }
1466  
1467  /**
1468   * Window and Editor uploaders used to display "drop zones"
1469   */
1470  .uploader-window,
1471  .wp-editor-wrap .uploader-editor {
1472      top: 0;
1473      left: 0;
1474      right: 0;
1475      bottom: 0;
1476      text-align: center;
1477      display: none;
1478  }
1479  
1480  .uploader-window {
1481      position: fixed;
1482      z-index: 250000;
1483      opacity: 0; /* Only the inline uploader is animated with JS, the editor one isn't */
1484      transition: opacity 250ms;
1485  }
1486  
1487  .wp-editor-wrap .uploader-editor {
1488      position: absolute;
1489      z-index: 99998; /* under the toolbar */
1490      background: rgba(140, 143, 148, 0.9);
1491  }
1492  
1493  .uploader-window,
1494  .wp-editor-wrap .uploader-editor.droppable {
1495      background: rgba(10, 75, 120, 0.9);
1496  }
1497  
1498  .uploader-window-content,
1499  .wp-editor-wrap .uploader-editor-content {
1500      position: absolute;
1501      top: 10px;
1502      left: 10px;
1503      right: 10px;
1504      bottom: 10px;
1505      border: 1px dashed #fff;
1506  }
1507  
1508  /* uploader drop-zone title */
1509  .uploader-window h1, /* Back-compat for pre-5.3 */
1510  .uploader-window .uploader-editor-title,
1511  .wp-editor-wrap .uploader-editor .uploader-editor-title {
1512      position: absolute;
1513      top: 50%;
1514      left: 0;
1515      right: 0;
1516      transform: translateY(-50%);
1517      font-size: 3em;
1518      line-height: 1.3;
1519      font-weight: 600;
1520      color: #fff;
1521      margin: 0;
1522      padding: 0 10px;
1523  }
1524  
1525  .wp-editor-wrap .uploader-editor .uploader-editor-title {
1526      display: none;
1527  }
1528  
1529  .wp-editor-wrap .uploader-editor.droppable .uploader-editor-title {
1530      display: block;
1531  }
1532  
1533  .uploader-window .media-progress-bar {
1534      margin-top: 20px;
1535      max-width: 300px;
1536      background: transparent;
1537      border-color: #fff;
1538      display: none;
1539  }
1540  
1541  .uploader-window .media-progress-bar div {
1542      background: #fff;
1543  }
1544  
1545  .uploading .uploader-window .media-progress-bar {
1546      display: block;
1547  }
1548  
1549  .media-frame .uploader-inline {
1550      margin-bottom: 20px;
1551      padding: 0;
1552      text-align: center;
1553  }
1554  
1555  .uploader-inline-content {
1556      position: absolute;
1557      top: 30%;
1558      left: 0;
1559      right: 0;
1560  }
1561  
1562  .uploader-inline-content .upload-ui {
1563      margin: 2em 0;
1564  }
1565  
1566  .uploader-inline-content .post-upload-ui {
1567      margin-bottom: 2em;
1568  }
1569  
1570  .uploader-inline .has-upload-message .upload-ui {
1571      margin: 0 0 4em;
1572  }
1573  
1574  .uploader-inline h2 {
1575      font-size: 20px;
1576      line-height: 1.4;
1577      font-weight: 400;
1578      margin: 0;
1579  }
1580  
1581  .uploader-inline .has-upload-message .upload-instructions {
1582      font-size: 14px;
1583      color: #3c434a;
1584      font-weight: 400;
1585  }
1586  
1587  .uploader-inline .drop-instructions {
1588      display: none;
1589  }
1590  
1591  .supports-drag-drop .uploader-inline .drop-instructions {
1592      display: block;
1593  }
1594  
1595  .uploader-inline p {
1596      margin: 0.5em 0;
1597  }
1598  
1599  .uploader-inline .media-progress-bar {
1600      display: none;
1601  }
1602  
1603  .uploading.uploader-inline .media-progress-bar {
1604      display: block;
1605  }
1606  
1607  .uploader-inline .browser {
1608      display: inline-block !important;
1609  }
1610  
1611  /**
1612   * Selection
1613   */
1614  .media-selection {
1615      position: absolute;
1616      top: 0;
1617      left: 0;
1618      right: 350px;
1619      height: 60px;
1620      padding: 0 0 0 16px;
1621      overflow: hidden;
1622      white-space: nowrap;
1623  }
1624  
1625  .media-selection .selection-info {
1626      display: inline-block;
1627      font-size: 12px;
1628      height: 60px;
1629      margin-right: 10px;
1630      vertical-align: top;
1631  }
1632  
1633  .media-selection.empty,
1634  .media-selection.editing {
1635      display: none;
1636  }
1637  
1638  .media-selection.one .edit-selection {
1639      display: none;
1640  }
1641  
1642  .media-selection .count {
1643      display: block;
1644      padding-top: 12px;
1645      font-size: 14px;
1646      line-height: 1.42857142;
1647      font-weight: 600;
1648  }
1649  
1650  .media-selection .button-link {
1651      float: left;
1652      padding: 1px 8px;
1653      margin: 1px 8px 1px -8px;
1654      line-height: 1.4;
1655      border-right: 1px solid #dcdcde;
1656      color: #2271b1;
1657      text-decoration: none;
1658  }
1659  
1660  .media-selection .button-link:hover,
1661  .media-selection .button-link:focus {
1662      color: #135e96;
1663  }
1664  
1665  .media-selection .button-link:last-child {
1666      border-right: 0;
1667      margin-right: 0;
1668  }
1669  
1670  .selection-info .clear-selection {
1671      color: #d63638;
1672  }
1673  
1674  .selection-info .clear-selection:hover,
1675  .selection-info .clear-selection:focus {
1676      color: #d63638;
1677  }
1678  
1679  .media-selection .selection-view {
1680      display: inline-block;
1681      vertical-align: top;
1682  }
1683  
1684  .media-selection .attachments {
1685      display: inline-block;
1686      height: 48px;
1687      margin: 6px;
1688      padding: 0;
1689      overflow: hidden;
1690      vertical-align: top;
1691  }
1692  
1693  .media-selection .attachment {
1694      width: 40px;
1695      padding: 0;
1696      margin: 4px;
1697  }
1698  
1699  .media-selection .attachment .thumbnail {
1700      top: 0;
1701      right: 0;
1702      bottom: 0;
1703      left: 0;
1704  }
1705  
1706  .media-selection .attachment .icon {
1707      width: 50%;
1708  }
1709  
1710  .media-selection .attachment-preview {
1711      box-shadow: none;
1712      background: none;
1713  }
1714  
1715  .wp-core-ui .media-selection .attachment:focus,
1716  .wp-core-ui .media-selection .selected.attachment:focus,
1717  .wp-core-ui .media-selection .attachment.details:focus {
1718      box-shadow:
1719          0 0 0 1px #fff,
1720          0 0 2px 3px #4f94d4;
1721      /* Only visible in Windows High Contrast mode */
1722      outline: 2px solid transparent;
1723  }
1724  
1725  .wp-core-ui .media-selection .selected.attachment {
1726      box-shadow: none;
1727  }
1728  
1729  .wp-core-ui .media-selection .attachment.details {
1730      box-shadow:
1731          0 0 0 1px #fff,
1732          0 0 0 3px #2271b1;
1733  }
1734  
1735  .media-selection:after {
1736      content: "";
1737      display: block;
1738      position: absolute;
1739      top: 0;
1740      right: 0;
1741      bottom: 0;
1742      width: 25px;
1743      background-image: linear-gradient(to left,#fff,rgba(255, 255, 255, 0));
1744  }
1745  
1746  .media-selection .attachment .filename {
1747      display: none;
1748  }
1749  
1750  /**
1751   * Spinner
1752   */
1753  .media-frame .spinner {
1754      background: url(../images/spinner.gif) no-repeat;
1755      background-size: 20px 20px;
1756      float: right;
1757      display: inline-block;
1758      visibility: hidden;
1759      opacity: 0.7;
1760      filter: alpha(opacity=70);
1761      width: 20px;
1762      height: 20px;
1763      margin: 0;
1764      vertical-align: middle;
1765  }
1766  
1767  .media-frame.mode-grid .spinner {
1768      margin: 0;
1769      float: none;
1770      vertical-align: middle;
1771  }
1772  
1773  .media-modal .media-toolbar .spinner {
1774      float: none;
1775      vertical-align: bottom;
1776      margin: 0 0 5px 5px;
1777  }
1778  
1779  .media-frame .instructions + .spinner.is-active {
1780      vertical-align: middle;
1781  }
1782  
1783  .media-frame .spinner.is-active {
1784      visibility: visible;
1785  }
1786  
1787  /**
1788   * Attachment Details
1789   */
1790  .attachment-details {
1791      position: relative;
1792      overflow: auto;
1793  }
1794  
1795  .attachment-details .settings-save-status {
1796      float: right;
1797      text-transform: none;
1798      font-weight: 400;
1799  }
1800  
1801  .attachment-details .settings-save-status .spinner {
1802      float: none;
1803      margin-left: 5px;
1804  }
1805  
1806  .attachment-details .settings-save-status .saved {
1807      display: none;
1808  }
1809  
1810  .attachment-details.save-waiting .settings-save-status .spinner {
1811      visibility: visible;
1812  }
1813  
1814  .attachment-details.save-complete .settings-save-status .saved {
1815      display: inline-block;
1816  }
1817  
1818  .attachment-info {
1819      overflow: hidden;
1820      min-height: 60px;
1821      margin-bottom: 16px;
1822      line-height: 1.5;
1823      color: #646970;
1824      border-bottom: 1px solid #dcdcde;
1825      padding-bottom: 11px;
1826  }
1827  
1828  .attachment-info .wp-media-wrapper {
1829      margin-bottom: 8px;
1830  }
1831  
1832  .attachment-info .wp-media-wrapper.wp-audio {
1833      margin-top: 13px;
1834  }
1835  
1836  .attachment-info .filename {
1837      font-weight: 600;
1838      color: #3c434a;
1839      word-wrap: break-word;
1840  }
1841  
1842  .attachment-info .thumbnail {
1843      position: relative;
1844      float: left;
1845      max-width: 120px;
1846      max-height: 120px;
1847      margin-top: 5px;
1848      margin-right: 10px;
1849      margin-bottom: 5px;
1850  }
1851  
1852  .uploading .attachment-info .thumbnail {
1853      width: 120px;
1854      height: 80px;
1855      box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.1);
1856  }
1857  
1858  .uploading .attachment-info .media-progress-bar {
1859      margin-top: 35px;
1860  }
1861  
1862  .attachment-info .thumbnail-image:after {
1863      content: "";
1864      display: block;
1865      position: absolute;
1866      top: 0;
1867      left: 0;
1868      right: 0;
1869      bottom: 0;
1870      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
1871      overflow: hidden;
1872  }
1873  
1874  .attachment-info .thumbnail img {
1875      display: block;
1876      max-width: 120px;
1877      max-height: 120px;
1878      margin: 0 auto;
1879  }
1880  
1881  .attachment-info .details {
1882      float: left;
1883      font-size: 12px;
1884      max-width: 100%;
1885  }
1886  
1887  .attachment-info .edit-attachment,
1888  .attachment-info .delete-attachment,
1889  .attachment-info .trash-attachment,
1890  .attachment-info .untrash-attachment {
1891      display: block;
1892      text-decoration: none;
1893      white-space: nowrap;
1894  }
1895  
1896  .attachment-details.needs-refresh .attachment-info .edit-attachment {
1897      display: none;
1898  }
1899  
1900  .attachment-info .edit-attachment {
1901      display: block;
1902  }
1903  
1904  .media-modal .delete-attachment,
1905  .media-modal .trash-attachment,
1906  .media-modal .untrash-attachment {
1907      display: inline;
1908      padding: 0;
1909      color: #d63638;
1910  }
1911  
1912  .media-modal .delete-attachment:hover,
1913  .media-modal .delete-attachment:focus,
1914  .media-modal .trash-attachment:hover,
1915  .media-modal .trash-attachment:focus,
1916  .media-modal .untrash-attachment:hover,
1917  .media-modal .untrash-attachment:focus {
1918      color: #d63638;
1919  }
1920  
1921  /**
1922   * Attachment Display Settings
1923   */
1924  .attachment-display-settings {
1925      width: 100%;
1926      float: left;
1927      overflow: hidden;
1928  }
1929  
1930  .collection-settings {
1931      overflow: hidden;
1932  }
1933  
1934  .collection-settings .setting input[type="checkbox"] {
1935      float: left;
1936      margin-right: 8px;
1937  }
1938  
1939  .collection-settings .setting span, /* Back-compat for pre-5.3 */
1940  .collection-settings .setting .name {
1941      min-width: inherit;
1942  }
1943  
1944  /**
1945   * Image Editor
1946   */
1947  .media-modal .imgedit-wrap {
1948      position: static;
1949  }
1950  
1951  .media-modal .imgedit-wrap .imgedit-panel-content {
1952      padding: 16px 16px 0;
1953      overflow: visible;
1954  }
1955  
1956  /*
1957   * Implementation of bottom padding in overflow content differs across browsers.
1958   * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
1959   */
1960  .media-modal .imgedit-wrap .imgedit-save-target {
1961      margin: 8px 0 24px;
1962  }
1963  
1964  .media-modal .imgedit-group {
1965      background: none;
1966      border: none;
1967      box-shadow: none;
1968      margin: 0;
1969      padding: 0;
1970      position: relative; /* RTL fix, #WP29352 */
1971  }
1972  
1973  .media-modal .imgedit-group.imgedit-panel-active {
1974      margin-bottom: 16px;
1975      padding-bottom: 16px;
1976  }
1977  
1978  .media-modal .imgedit-group-top {
1979      margin: 0;
1980  }
1981  
1982  .media-modal .imgedit-group-top h2,
1983  .media-modal .imgedit-group-top h2 .button-link {
1984      display: inline-block;
1985      text-transform: uppercase;
1986      font-size: 12px;
1987      color: #646970;
1988      margin: 0;
1989      margin-top: 3px;
1990  }
1991  
1992  .media-modal .imgedit-group-top h2 a,
1993  .media-modal .imgedit-group-top h2 .button-link {
1994      text-decoration: none;
1995      color: #646970;
1996  }
1997  
1998  /* higher specificity than media.css */
1999  .wp-core-ui.media-modal .image-editor .imgedit-help-toggle,
2000  .wp-core-ui.media-modal .image-editor .imgedit-help-toggle:hover,
2001  .wp-core-ui.media-modal .image-editor .imgedit-help-toggle:active {
2002      border: 1px solid transparent;
2003      margin: 0;
2004      padding: 0;
2005      background: transparent;
2006      color: #2271b1;
2007      font-size: 20px;
2008      line-height: 1;
2009      cursor: pointer;
2010      box-sizing: content-box;
2011      box-shadow: none;
2012  }
2013  
2014  .wp-core-ui.media-modal .image-editor .imgedit-help-toggle:focus {
2015      color: #2271b1;
2016      border-color: #2271b1;
2017      box-shadow: 0 0 0 1px #2271b1;
2018      /* Only visible in Windows High Contrast mode */
2019      outline: 2px solid transparent;
2020  }
2021  
2022  .wp-core-ui.media-modal .imgedit-group-top .dashicons-arrow-down.imgedit-help-toggle {
2023      margin-top: -3px;
2024  }
2025  
2026  .wp-core-ui.media-modal .image-editor h3 .imgedit-help-toggle {
2027      margin-top: -2px;
2028  }
2029  
2030  .media-modal .imgedit-help-toggled span.dashicons:before {
2031      content: "\f142";
2032  }
2033  
2034  .media-modal .imgedit-thumbnail-preview {
2035      margin: 10px 8px 0 0;
2036  }
2037  
2038  .imgedit-thumbnail-preview-caption {
2039      display: block;
2040  }
2041  
2042  .media-modal .imgedit-wrap div.updated, /* Back-compat for pre-5.5 */
2043  .media-modal .imgedit-wrap .notice {
2044      margin: 0 16px;
2045  }
2046  
2047  /**
2048   * Embed from URL and Image Details
2049   */
2050  .embed-url {
2051      display: block;
2052      position: relative;
2053      padding: 16px;
2054      margin: 0;
2055      z-index: 250;
2056      background: #fff;
2057      font-size: 18px;
2058  }
2059  
2060  .media-frame .embed-url input {
2061      font-size: 18px;
2062      line-height: 1.22222222; /* 22px */
2063      padding: 12px 40px 12px 14px; /* right padding to leave room for the spinner */
2064      width: 100%;
2065      min-width: 200px;
2066      box-shadow: inset 2px 2px 4px -2px rgba(0, 0, 0, 0.1);
2067  }
2068  
2069  .media-frame .embed-url input::-ms-clear {
2070      display: none; /* the "x" in IE 11 conflicts with the spinner */
2071  }
2072  
2073  .media-frame .embed-url .spinner {
2074      position: absolute;
2075      top: 32px;
2076      right: 26px;
2077  }
2078  
2079  .media-frame .embed-loading .embed-url .spinner {
2080      visibility: visible;
2081  }
2082  
2083  .embed-link-settings,
2084  .embed-media-settings {
2085      position: absolute;
2086      top: 82px;
2087      left: 0;
2088      right: 0;
2089      bottom: 0;
2090      padding: 0 16px;
2091      overflow: auto;
2092  }
2093  
2094  .media-embed .embed-link-settings .link-text {
2095      margin-top: 0;
2096  }
2097  
2098  /*
2099   * Implementation of bottom padding in overflow content differs across browsers.
2100   * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
2101   */
2102  .embed-link-settings::after,
2103  .embed-media-settings::after {
2104      content: "";
2105      display: flex;
2106      clear: both;
2107      height: 24px;
2108  }
2109  
2110  .media-embed .embed-link-settings {
2111      /* avoid Firefox to give focus to the embed preview container parent */
2112      overflow: visible;
2113  }
2114  
2115  .embed-preview img,
2116  .embed-preview iframe,
2117  .embed-preview embed,
2118  .mejs-container video {
2119      max-width: 100%;
2120      vertical-align: middle;
2121  }
2122  
2123  .embed-preview a {
2124      display: inline-block;
2125  }
2126  
2127  .embed-preview img {
2128      display: block;
2129      height: auto;
2130  }
2131  
2132  .mejs-container:focus {
2133      outline: 1px solid #2271b1;
2134      box-shadow: 0 0 0 2px #2271b1;
2135  }
2136  
2137  .image-details .media-modal {
2138      left: 140px;
2139      right: 140px;
2140  }
2141  
2142  .image-details .media-frame-title,
2143  .image-details .media-frame-content,
2144  .image-details .media-frame-router {
2145      left: 0;
2146  }
2147  
2148  .image-details .embed-media-settings {
2149      top: 0;
2150      overflow: visible;
2151      padding: 0;
2152  }
2153  
2154  .image-details .embed-media-settings::after {
2155      content: none;
2156  }
2157  
2158  .image-details .embed-media-settings,
2159  .image-details .embed-media-settings div {
2160      box-sizing: border-box;
2161  }
2162  
2163  .image-details .column-settings {
2164      background: #f6f7f7;
2165      border-right: 1px solid #dcdcde;
2166      min-height: 100%;
2167      width: 55%;
2168      position: absolute;
2169      top: 0;
2170      left: 0;
2171  }
2172  
2173  .image-details .column-settings h2 {
2174      margin: 20px;
2175      padding-top: 20px;
2176      border-top: 1px solid #dcdcde;
2177      color: #1d2327;
2178  }
2179  
2180  .image-details .column-image {
2181      width: 45%;
2182      position: absolute;
2183      left: 55%;
2184      top: 0;
2185  }
2186  
2187  .image-details .image {
2188      margin: 20px;
2189  }
2190  
2191  .image-details .image img {
2192      max-width: 100%;
2193      max-height: 500px;
2194  }
2195  
2196  .image-details .advanced-toggle {
2197      padding: 0;
2198      color: #646970;
2199      text-transform: uppercase;
2200      text-decoration: none;
2201  }
2202  
2203  .image-details .advanced-toggle:hover,
2204  .image-details .advanced-toggle:active {
2205      color: #646970;
2206  }
2207  
2208  .image-details .advanced-toggle:after {
2209      font: normal 20px/1 dashicons;
2210      speak: never;
2211      vertical-align: top;
2212      -webkit-font-smoothing: antialiased;
2213      -moz-osx-font-smoothing: grayscale;
2214      content: "\f140";
2215      display: inline-block;
2216      margin-top: -2px;
2217  }
2218  
2219  .image-details .advanced-visible .advanced-toggle:after {
2220      content: "\f142";
2221  }
2222  
2223  .image-details .custom-size label, /* Back-compat for pre-5.3 */
2224  .image-details .custom-size .custom-size-setting {
2225      display: block;
2226      float: left;
2227  }
2228  
2229  .image-details .custom-size .custom-size-setting label {
2230      float: none;
2231  }
2232  
2233  .image-details .custom-size input {
2234      width: 5em;
2235  }
2236  
2237  .image-details .custom-size .sep {
2238      float: left;
2239      margin: 26px 6px 0;
2240  }
2241  
2242  .image-details .custom-size .description {
2243      margin-left: 0;
2244  }
2245  
2246  .media-embed .thumbnail {
2247      max-width: 100%;
2248      max-height: 200px;
2249      position: relative;
2250      float: left;
2251  }
2252  
2253  .media-embed .thumbnail img {
2254      max-height: 200px;
2255      display: block;
2256  }
2257  
2258  .media-embed .thumbnail:after {
2259      content: "";
2260      display: block;
2261      position: absolute;
2262      top: 0;
2263      left: 0;
2264      right: 0;
2265      bottom: 0;
2266      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
2267      overflow: hidden;
2268  }
2269  
2270  .media-embed .setting,
2271  .media-embed .setting-group {
2272      width: 100%;
2273      margin: 10px 0;
2274      float: left;
2275      display: block;
2276      clear: both;
2277  }
2278  
2279  .media-embed .setting-group .setting:not(.checkbox-setting) {
2280      margin: 0;
2281  }
2282  
2283  .media-embed .setting.has-description {
2284      margin-bottom: 5px;
2285  }
2286  
2287  .media-embed .description {
2288      clear: both;
2289      font-style: normal;
2290  }
2291  
2292  .media-embed .content-track + .description {
2293      line-height: 1.4;
2294      /* The !important needs to override a high specificity selector from wp-medialement.css */
2295      max-width: none !important;
2296  }
2297  
2298  .media-embed .remove-track {
2299      margin-bottom: 10px;
2300  }
2301  
2302  .image-details .embed-media-settings .setting,
2303  .image-details .embed-media-settings .setting-group {
2304      float: none;
2305      width: auto;
2306  }
2307  
2308  .image-details .actions {
2309      margin: 10px 0;
2310  }
2311  
2312  .image-details .hidden {
2313      display: none;
2314  }
2315  
2316  .media-embed .setting input[type="text"],
2317  .media-embed .setting textarea,
2318  .media-embed fieldset {
2319      display: block;
2320      width: 100%;
2321      max-width: 400px;
2322  }
2323  
2324  .image-details .embed-media-settings .setting input[type="text"],
2325  .image-details .embed-media-settings .setting textarea {
2326      max-width: inherit;
2327      width: 70%;
2328  }
2329  
2330  .image-details .embed-media-settings .setting input.link-to-custom,
2331  .image-details .embed-media-settings .link-target,
2332  .image-details .embed-media-settings .custom-size,
2333  .image-details .embed-media-settings .setting-group,
2334  .image-details .description {
2335      margin-left: 27%;
2336      width: 70%;
2337  }
2338  
2339  .image-details .description {
2340      font-style: normal;
2341      margin-top: 0;
2342  }
2343  
2344  .image-details .embed-media-settings .link-target {
2345      margin-top: 16px;
2346  }
2347  
2348  .image-details .checkbox-label,
2349  .audio-details .checkbox-label,
2350  .video-details .checkbox-label {
2351      vertical-align: baseline;
2352  }
2353  
2354  .media-embed .setting input.hidden,
2355  .media-embed .setting textarea.hidden {
2356      display: none;
2357  }
2358  
2359  .media-embed .setting span, /* Back-compat for pre-5.3 */
2360  .media-embed .setting .name,
2361  .media-embed .setting-group .name {
2362      display: inline-block;
2363      font-size: 13px;
2364      line-height: 1.84615384;
2365      color: #646970;
2366  }
2367  
2368  .media-embed .setting span {
2369      display: block; /* Back-compat for pre-5.3 */
2370      width: 200px; /* Back-compat for pre-5.3 */
2371  }
2372  
2373  .image-details .embed-media-settings .setting span, /* Back-compat for pre-5.3 */
2374  .image-details .embed-media-settings .setting .name {
2375      float: left;
2376      width: 25%;
2377      text-align: right;
2378      margin: 8px 1% 0;
2379      line-height: 1.1;
2380  }
2381  
2382  /* Buttons group in IE 11. */
2383  .media-frame .setting-group .button-group,
2384  .image-details .embed-media-settings .setting .button-group {
2385      width: auto;
2386  }
2387  
2388  .media-embed-sidebar {
2389      position: absolute;
2390      top: 0;
2391      left: 440px;
2392  }
2393  
2394  .advanced-section,
2395  .link-settings {
2396      margin-top: 10px;
2397  }
2398  
2399  /**
2400   * Button groups fix: can be removed together with the Back-compat for pre-5.3
2401   */
2402   .media-frame .setting .button-group {
2403       display: flex;
2404       margin: 0 !important;
2405       max-width: none !important;
2406   }
2407  
2408  /**
2409   * Localization
2410   */
2411  .rtl .media-modal,
2412  .rtl .media-frame,
2413  .rtl .media-frame .search,
2414  .rtl .media-frame input[type="text"],
2415  .rtl .media-frame input[type="password"],
2416  .rtl .media-frame input[type="number"],
2417  .rtl .media-frame input[type="search"],
2418  .rtl .media-frame input[type="email"],
2419  .rtl .media-frame input[type="url"],
2420  .rtl .media-frame input[type="tel"],
2421  .rtl .media-frame textarea,
2422  .rtl .media-frame select {
2423      font-family: Tahoma, sans-serif;
2424  }
2425  
2426  :lang(he-il) .rtl .media-modal,
2427  :lang(he-il) .rtl .media-frame,
2428  :lang(he-il) .rtl .media-frame .search,
2429  :lang(he-il) .rtl .media-frame input[type="text"],
2430  :lang(he-il) .rtl .media-frame input[type="password"],
2431  :lang(he-il) .rtl .media-frame input[type="number"],
2432  :lang(he-il) .rtl .media-frame input[type="search"],
2433  :lang(he-il) .rtl .media-frame input[type="email"],
2434  :lang(he-il) .rtl .media-frame input[type="url"],
2435  :lang(he-il) .rtl .media-frame textarea,
2436  :lang(he-il) .rtl .media-frame select {
2437      font-family: Arial, sans-serif;
2438  }
2439  
2440  /**
2441   * Responsive layout
2442   */
2443  @media only screen and (max-width: 900px) {
2444      .media-modal .media-frame-title {
2445          height: 40px;
2446      }
2447  
2448      .media-modal .media-frame-title h1 {
2449          line-height: 2.22222222;
2450          font-size: 18px;
2451      }
2452  
2453      .media-modal-close {
2454          width: 42px;
2455          height: 42px;
2456      }
2457  
2458      /* Drop-down menu */
2459      .media-frame .media-frame-title {
2460          position: static;
2461          padding: 0 44px;
2462          text-align: center;
2463      }
2464  
2465      .media-frame:not(.hide-menu) .media-frame-router,
2466      .media-frame:not(.hide-menu) .media-frame-content,
2467      .media-frame:not(.hide-menu) .media-frame-toolbar {
2468          left: 0;
2469      }
2470  
2471      .media-frame:not(.hide-menu) .media-frame-router {
2472          /* 40 title + (40 - 6) menu toggle button + 6 spacing */
2473          top: 80px;
2474      }
2475  
2476      .media-frame:not(.hide-menu) .media-frame-content {
2477          /* 80 + room for the tabs */
2478          top: 114px;
2479      }
2480  
2481      .media-frame.hide-router .media-frame-content {
2482          top: 80px;
2483      }
2484  
2485      .media-frame:not(.hide-menu) .media-frame-menu {
2486          position: static;
2487          width: 0;
2488      }
2489  
2490      .media-frame:not(.hide-menu) .media-menu {
2491          display: none;
2492          width: auto;
2493          max-width: 80%;
2494          overflow: auto;
2495          z-index: 2000;
2496          top: 75px;
2497          left: 50%;
2498          transform: translateX(-50%);
2499          right: auto;
2500          bottom: auto;
2501          padding: 5px 0;
2502          border: 1px solid #c3c4c7;
2503      }
2504  
2505      .media-frame:not(.hide-menu) .media-menu.visible {
2506          display: block;
2507      }
2508  
2509      .media-frame:not(.hide-menu) .media-menu > a {
2510          padding: 12px 16px;
2511          font-size: 16px;
2512      }
2513  
2514      .media-frame:not(.hide-menu) .media-menu .separator {
2515          margin: 5px 10px;
2516      }
2517  
2518      /* Visually hide the menu heading keeping it available to assistive technologies. */
2519      .media-frame-menu-heading {
2520          clip: rect(1px, 1px, 1px, 1px);
2521          -webkit-clip-path: inset(50%);
2522          clip-path: inset(50%);
2523          height: 1px;
2524          overflow: hidden;
2525          padding: 0;
2526          width: 1px;
2527          word-wrap: normal !important;
2528      }
2529  
2530      /* Reveal the menu toggle button. */
2531      .wp-core-ui .media-frame:not(.hide-menu) .button.media-frame-menu-toggle {
2532          display: inline-flex;
2533          align-items: center;
2534          position: absolute;
2535          left: 50%;
2536          transform: translateX(-50%);
2537          margin: -6px 0 0;
2538          padding: 0 2px 0 12px;
2539          font-size: 0.875rem;
2540          font-weight: 600;
2541          text-decoration: none;
2542          background: transparent;
2543          /* Only for IE11 to vertically align text within the inline-flex button */
2544          height: 0.1%;
2545          /* Modern browsers */
2546          min-height: 40px;
2547      }
2548  
2549      .wp-core-ui .button.media-frame-menu-toggle:hover,
2550      .wp-core-ui .button.media-frame-menu-toggle:active {
2551          background: transparent;
2552          transform: none;
2553      }
2554  
2555      .wp-core-ui .button.media-frame-menu-toggle:focus {
2556          /* Only visible in Windows High Contrast mode */
2557          outline: 1px solid transparent;
2558      }
2559      /* End drop-down menu */
2560  
2561      .media-sidebar {
2562          width: 230px;
2563      }
2564  
2565      .options-general-php .crop-content.site-icon {
2566          margin-right: 262px;
2567      }
2568  
2569      .attachments-browser .attachments,
2570      .attachments-browser .uploader-inline,
2571      .attachments-browser .media-toolbar,
2572      .attachments-browser .attachments-wrapper,
2573      .attachments-browser.has-load-more .attachments-wrapper {
2574          right: 262px;
2575      }
2576  
2577      .attachments-browser .media-toolbar {
2578          height: 82px;
2579      }
2580  
2581      .attachments-browser .attachments,
2582      .attachments-browser .uploader-inline,
2583      .media-frame-content .attachments-browser .attachments-wrapper {
2584          top: 82px;
2585      }
2586  
2587      .media-sidebar .setting,
2588      .attachment-details .setting {
2589          margin: 6px 0;
2590      }
2591  
2592      .media-sidebar .setting input,
2593      .media-sidebar .setting textarea,
2594      .media-sidebar .setting .name,
2595      .attachment-details .setting input,
2596      .attachment-details .setting textarea,
2597      .attachment-details .setting .name,
2598      .compat-item label span {
2599          float: none;
2600          display: inline-block;
2601      }
2602  
2603      .media-sidebar .setting span, /* Back-compat for pre-5.3 */
2604      .attachment-details .setting span, /* Back-compat for pre-5.3 */
2605      .media-sidebar .checkbox-label-inline {
2606          float: none;
2607      }
2608  
2609      .media-sidebar .setting .select-label-inline {
2610          display: inline;
2611      }
2612  
2613      .media-sidebar .setting .name,
2614      .media-sidebar .checkbox-label-inline,
2615      .attachment-details .setting .name,
2616      .compat-item label span {
2617          text-align: inherit;
2618          min-height: 16px;
2619          margin: 0;
2620          padding: 8px 2px 2px;
2621      }
2622  
2623      /* Needs high specificity. */
2624      .media-sidebar .setting .copy-to-clipboard-container,
2625      .attachment-details .attachment-info .copy-to-clipboard-container {
2626          margin-left: 0;
2627          padding-top: 0;
2628      }
2629  
2630      .media-sidebar .setting .copy-attachment-url,
2631      .attachment-details .attachment-info .copy-attachment-url {
2632          margin: 0 1px;
2633      }
2634  
2635      .media-sidebar .setting .value,
2636      .attachment-details .setting .value {
2637          float: none;
2638          width: auto;
2639      }
2640  
2641      .media-sidebar .setting input[type="text"],
2642      .media-sidebar .setting input[type="password"],
2643      .media-sidebar .setting input[type="email"],
2644      .media-sidebar .setting input[type="number"],
2645      .media-sidebar .setting input[type="search"],
2646      .media-sidebar .setting input[type="tel"],
2647      .media-sidebar .setting input[type="url"],
2648      .media-sidebar .setting textarea,
2649      .media-sidebar .setting select,
2650      .attachment-details .setting input[type="text"],
2651      .attachment-details .setting input[type="password"],
2652      .attachment-details .setting input[type="email"],
2653      .attachment-details .setting input[type="number"],
2654      .attachment-details .setting input[type="search"],
2655      .attachment-details .setting input[type="tel"],
2656      .attachment-details .setting input[type="url"],
2657      .attachment-details .setting textarea,
2658      .attachment-details .setting select,
2659      .attachment-details .setting + .description {
2660          float: none;
2661          width: 98%;
2662          max-width: none;
2663          height: auto;
2664      }
2665  
2666      .media-frame .media-toolbar input[type="search"] {
2667          line-height: 2.25; /* 36px */
2668      }
2669  
2670      .media-sidebar .setting select.columns,
2671      .attachment-details .setting select.columns {
2672          width: auto;
2673      }
2674  
2675      .media-frame input,
2676      .media-frame textarea,
2677      .media-frame .search {
2678          padding: 3px 6px;
2679      }
2680  
2681      .wp-admin .media-frame select {
2682          min-height: 40px;
2683          font-size: 16px;
2684          line-height: 1.625;
2685          padding: 5px 24px 5px 8px;
2686      }
2687  
2688      .image-details .column-image {
2689          width: 30%;
2690          left: 70%;
2691      }
2692  
2693      .image-details .column-settings {
2694          width: 70%;
2695      }
2696  
2697      .image-details .media-modal {
2698          left: 30px;
2699          right: 30px;
2700      }
2701  
2702      .image-details .embed-media-settings .setting,
2703      .image-details .embed-media-settings .setting-group {
2704          margin: 20px;
2705      }
2706  
2707      .image-details .embed-media-settings .setting span, /* Back-compat for pre-5.3 */
2708      .image-details .embed-media-settings .setting .name {
2709          float: none;
2710          text-align: left;
2711          width: 100%;
2712          margin-bottom: 4px;
2713          margin-left: 0;
2714      }
2715  
2716      .media-modal .legend-inline {
2717          position: static;
2718          transform: none;
2719          margin-left: 0;
2720          margin-bottom: 6px;
2721      }
2722  
2723      .image-details .embed-media-settings .setting-group .setting {
2724          margin-bottom: 0;
2725      }
2726  
2727      .image-details .embed-media-settings .setting input.link-to-custom,
2728      .image-details .embed-media-settings .setting input[type="text"],
2729      .image-details .embed-media-settings .setting textarea {
2730          width: 100%;
2731          margin-left: 0;
2732      }
2733  
2734      .image-details .embed-media-settings .setting.has-description {
2735          margin-bottom: 5px;
2736      }
2737  
2738      .image-details .description {
2739          width: auto;
2740          margin: 0 20px;
2741      }
2742  
2743      .image-details .embed-media-settings .custom-size {
2744          margin-left: 20px;
2745      }
2746  
2747      .collection-settings .setting input[type="checkbox"] {
2748          float: none;
2749          margin-top: 0;
2750      }
2751  
2752      .media-selection {
2753          min-width: 120px;
2754      }
2755  
2756      .media-selection:after {
2757          background: none;
2758      }
2759  
2760      .media-selection .attachments {
2761          display: none;
2762      }
2763  
2764      .media-modal .attachments-browser .media-toolbar .search {
2765          max-width: 100%;
2766          height: auto;
2767          float: right;
2768      }
2769  
2770      .media-modal .attachments-browser .media-toolbar .attachment-filters {
2771          height: auto;
2772      }
2773  
2774      /* Text inputs need to be 16px, or they force zooming on iOS */
2775      .media-frame input[type="text"],
2776      .media-frame input[type="password"],
2777      .media-frame input[type="number"],
2778      .media-frame input[type="search"],
2779      .media-frame input[type="email"],
2780      .media-frame input[type="url"],
2781      .media-frame textarea,
2782      .media-frame select {
2783          font-size: 16px;
2784          line-height: 1.5;
2785      }
2786  
2787      .media-frame .media-toolbar input[type="search"] {
2788          line-height: 2.3755; /* 38px */
2789      }
2790  
2791      .media-modal .media-toolbar .spinner {
2792          margin-bottom: 10px;
2793      }
2794  }
2795  
2796  @media screen and (max-width: 782px) {
2797      .imgedit-panel-content {
2798          grid-template-columns: auto;
2799      }
2800  
2801      .media-frame-toolbar .media-toolbar {
2802          bottom: -54px;
2803      }
2804  
2805      .mode-grid .attachments-browser .media-toolbar-primary {
2806          display: grid;
2807          grid-template-columns: auto 1fr;
2808      }
2809  
2810      .mode-grid .attachments-browser .media-toolbar-primary input[type="search"] {
2811          width: 100%;
2812      }
2813  
2814      .media-sidebar .copy-to-clipboard-container .success,
2815      .attachment-details .copy-to-clipboard-container .success {
2816          font-size: 14px;
2817          line-height: 2.71428571;
2818      }
2819  
2820      .media-frame .wp-filter .media-toolbar-secondary {
2821          position: unset;
2822      }
2823  
2824      .media-frame .media-toolbar-secondary .spinner {
2825          position: absolute;
2826          top: 0;
2827          bottom: 0;
2828          margin: auto;
2829          left: 0;
2830          right: 0;
2831          z-index: 9;
2832      }
2833  
2834      .media-bg-overlay {
2835          content: '';
2836          background: #ffffff;
2837          width: 100%;
2838          height: 100%;
2839          display: none;
2840          position: absolute;
2841          left: 0;
2842          right: 0;
2843          top: 0;
2844          bottom: 0;
2845          opacity: 0.6;
2846      }
2847  }
2848  
2849  /* Responsive on portrait and landscape */
2850  @media only screen and (max-width: 640px), screen and (max-height: 400px) {
2851      /* Full-bleed modal */
2852      .media-modal,
2853      .image-details .media-modal {
2854          position: fixed;
2855          top: 0;
2856          left: 0;
2857          right: 0;
2858          bottom: 0;
2859      }
2860  
2861      .media-modal-backdrop {
2862          position: fixed;
2863      }
2864  
2865      .options-general-php .crop-content.site-icon {
2866          margin-right: 0;
2867      }
2868  
2869      .media-sidebar {
2870          z-index: 1900;
2871          max-width: 70%;
2872          bottom: 120%;
2873          box-sizing: border-box;
2874          padding-bottom: 0;
2875      }
2876  
2877      .media-sidebar.visible {
2878          bottom: 0;
2879      }
2880  
2881      .attachments-browser .attachments,
2882      .attachments-browser .uploader-inline,
2883      .attachments-browser .media-toolbar,
2884      .media-frame-content .attachments-browser .attachments-wrapper {
2885          right: 0;
2886      }
2887  
2888      .image-details .media-frame-title {
2889          display: block;
2890          top: 0;
2891          font-size: 14px;
2892      }
2893  
2894      .image-details .column-image,
2895      .image-details .column-settings {
2896          width: 100%;
2897          position: relative;
2898          left: 0;
2899      }
2900  
2901      .image-details .column-settings {
2902          padding: 4px 0;
2903      }
2904  
2905      /* Media tabs on the top */
2906      .media-frame-content .media-toolbar .instructions {
2907          display: none;
2908      }
2909  
2910      /* Change margin direction on load more button in responsive views. */
2911      .load-more-wrapper .load-more-jump {
2912          margin: 12px 0 0;
2913      }
2914  
2915  }
2916  
2917  @media only screen and (min-width: 901px) and (max-height: 400px) {
2918      .media-menu,
2919      .media-frame:not(.hide-menu) .media-menu {
2920          top: 0;
2921          padding-top: 44px;
2922      }
2923  
2924      /* Change margin direction on load more button in responsive views. */
2925      .load-more-wrapper .load-more-jump {
2926          margin: 12px 0 0;
2927      }
2928  
2929  }
2930  
2931  @media only screen and (max-width: 480px) {
2932      .wp-core-ui.wp-customizer .media-button {
2933          margin-top: 13px;
2934      }
2935  }
2936  
2937  /**
2938   * HiDPI Displays
2939   */
2940  @media print,
2941    (min-resolution: 120dpi) {
2942  
2943      .wp-core-ui .media-modal-icon {
2944          background-image: url(../images/uploader-icons-2x.png);
2945          background-size: 134px 15px;
2946      }
2947  
2948      .media-frame .spinner {
2949          background-image: url(../images/spinner-2x.gif);
2950      }
2951  }
2952  
2953  .media-frame-content[data-columns="1"] .attachment {
2954      width: 100%;
2955  }
2956  
2957  .media-frame-content[data-columns="2"] .attachment {
2958      width: 50%;
2959  }
2960  
2961  .media-frame-content[data-columns="3"] .attachment {
2962      width: 33.33%;
2963  }
2964  
2965  .media-frame-content[data-columns="4"] .attachment {
2966      width: 25%;
2967  }
2968  
2969  .media-frame-content[data-columns="5"] .attachment {
2970      width: 20%;
2971  }
2972  
2973  .media-frame-content[data-columns="6"] .attachment {
2974      width: 16.66%;
2975  }
2976  
2977  .media-frame-content[data-columns="7"] .attachment {
2978      width: 14.28%;
2979  }
2980  
2981  .media-frame-content[data-columns="8"] .attachment {
2982      width: 12.5%;
2983  }
2984  
2985  .media-frame-content[data-columns="9"] .attachment {
2986      width: 11.11%;
2987  }
2988  
2989  .media-frame-content[data-columns="10"] .attachment {
2990      width: 10%;
2991  }
2992  
2993  .media-frame-content[data-columns="11"] .attachment {
2994      width: 9.09%;
2995  }
2996  
2997  .media-frame-content[data-columns="12"] .attachment {
2998      width: 8.33%;
2999  }