[ Index ]

PHP Cross Reference of WordPress Trunk (Updated Daily)

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


Generated: Sat Nov 23 20:47:33 2019 Cross-referenced by PHPXref 0.7