[ Index ]

PHP Cross Reference of WordPress Trunk (Updated Daily)

Search

title

Body

[close]

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

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


Generated : Sat Jun 6 08:20:01 2020 Cross-referenced by PHPXref