[ Index ]

PHP Cross Reference of WordPress Trunk (Updated Daily)

Search

title

Body

[close]

/wp-includes/css/ -> media-views-rtl.css (source)

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


Generated : Fri Mar 29 08:20:02 2024 Cross-referenced by PHPXref