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