[Summary view] [Print] [Text view]

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