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