[Summary view] [Print] [Text view]

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