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


Generated : Sun May 31 08:20:01 2020 Cross-referenced by PHPXref