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