[Summary view] [Print] [Text view]

   1  /*! This file is auto-generated */
   2  /*------------------------------------------------------------------------------
   3    14.0 - Media Screen
   4  ------------------------------------------------------------------------------*/
   5  
   6  .media-item .describe {
   7      border-collapse: collapse;
   8      width: 100%;
   9      border-top: 1px solid #dcdcde;
  10      clear: both;
  11      cursor: default;
  12  }
  13  
  14  .media-item.media-blank .describe {
  15      border: 0;
  16  }
  17  
  18  .media-item .describe th {
  19      vertical-align: top;
  20      text-align: right;
  21      padding: 5px 10px 10px;
  22      width: 140px;
  23  }
  24  
  25  .media-item .describe .align th {
  26      padding-top: 0;
  27  }
  28  
  29  .media-item .media-item-info tr {
  30      background-color: transparent;
  31  }
  32  
  33  .media-item .describe td {
  34      padding: 0 0 8px 8px;
  35      vertical-align: top;
  36  }
  37  
  38  .media-item thead.media-item-info td {
  39      padding: 4px 10px 0;
  40  }
  41  
  42  .media-item .media-item-info .A1B1 {
  43      padding: 0 10px 0 0;
  44  }
  45  
  46  .media-item td.savesend {
  47      padding-bottom: 15px;
  48  }
  49  
  50  .media-item .thumbnail {
  51      max-height: 128px;
  52      max-width: 128px;
  53  }
  54  
  55  .media-list-subtitle {
  56      display: block;
  57  }
  58  
  59  .media-list-title {
  60      display: block;
  61  }
  62  
  63  #wpbody-content #async-upload-wrap a {
  64      display: none;
  65  }
  66  
  67  .media-upload-form {
  68      margin-top: 20px;
  69  }
  70  
  71  .media-upload-form td label {
  72      margin-left: 6px;
  73      margin-right: 2px;
  74  }
  75  
  76  .media-upload-form .align .field label {
  77      display: inline;
  78      padding: 0 23px 0 0;
  79      margin: 0 3px 0 1em;
  80      font-weight: 600;
  81  }
  82  
  83  .media-upload-form tr.image-size label {
  84      margin: 0 5px 0 0;
  85      font-weight: 600;
  86  }
  87  
  88  .media-upload-form th.label label {
  89      font-weight: 600;
  90      margin: 0.5em;
  91      font-size: 13px;
  92  }
  93  
  94  .media-upload-form th.label label span {
  95      padding: 0 5px;
  96  }
  97  
  98  .media-item .describe input[type="text"],
  99  .media-item .describe textarea {
 100      width: 460px;
 101  }
 102  
 103  .media-item .describe p.help {
 104      margin: 0;
 105      padding: 0 5px 0 0;
 106  }
 107  
 108  .describe-toggle-on,
 109  .describe-toggle-off {
 110      display: block;
 111      line-height: 2.76923076;
 112      float: left;
 113      margin-left: 10px;
 114  }
 115  
 116  .media-item .attachment-tools {
 117      display: flex;
 118      align-items: center;
 119  }
 120  
 121  .media-item .edit-attachment {
 122      padding: 14px 0;
 123      display: block;
 124      margin-left: 10px;
 125  }
 126  
 127  .media-item .edit-attachment.copy-to-clipboard-container {
 128      display: flex;
 129      margin-top: 0;
 130  }
 131  
 132  .media-item-copy-container .success {
 133      line-height: 0;
 134  }
 135  
 136  .media-item button .copy-attachment-url {
 137      margin-top: 14px;
 138  }
 139  
 140  .media-item .copy-to-clipboard-container {
 141      margin-top: 7px;
 142  }
 143  
 144  .media-item .describe-toggle-off,
 145  .media-item.open .describe-toggle-on {
 146      display: none;
 147  }
 148  
 149  .media-item.open .describe-toggle-off {
 150      display: block;
 151  }
 152  
 153  .media-upload-form .media-item {
 154      min-height: 70px;
 155      margin-bottom: 1px;
 156      position: relative;
 157      width: 100%;
 158      background: #fff;
 159  }
 160  
 161  .media-upload-form .media-item,
 162  .media-upload-form .media-item .error {
 163      box-shadow: 0 1px 0 #dcdcde;
 164  }
 165  
 166  #media-items:empty {
 167      border: 0 none;
 168  }
 169  
 170  .media-item .filename {
 171      padding: 14px 2px;
 172      overflow: hidden;
 173      margin-right: 4px;
 174  }
 175  
 176  .media-item .pinkynail {
 177      float: right;
 178      margin: 14px;
 179      max-height: 70px;
 180      max-width: 70px;
 181  }
 182  
 183  .media-item .startopen,
 184  .media-item .startclosed {
 185      display: none;
 186  }
 187  
 188  .media-item .progress {
 189      display: inline-block;
 190      height: 22px;
 191      margin: 0 6px 7px;
 192      width: 200px;
 193      line-height: 2em;
 194      padding: 0;
 195      overflow: hidden;
 196      border-radius: 22px;
 197      background: #dcdcde;
 198      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 199  }
 200  
 201  .media-item .bar {
 202      z-index: 9;
 203      width: 0;
 204      height: 100%;
 205      margin-top: -22px;
 206      border-radius: 22px;
 207      background-color: #2271b1;
 208      box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
 209  }
 210  
 211  .media-item .progress .percent {
 212      z-index: 10;
 213      position: relative;
 214      width: 200px;
 215      padding: 0;
 216      color: #fff;
 217      text-align: center;
 218      line-height: 22px;
 219      font-weight: 400;
 220      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 221  }
 222  
 223  .upload-php .fixed .column-parent {
 224      width: 15%;
 225  }
 226  
 227  .js .html-uploader #plupload-upload-ui {
 228      display: none;
 229  }
 230  
 231  .js .html-uploader #html-upload-ui {
 232      display: block;
 233  }
 234  
 235  #html-upload-ui #async-upload {
 236      font-size: 1em;
 237  }
 238  
 239  .media-upload-form .media-item.error,
 240  .media-upload-form .media-item .error {
 241      width: auto;
 242      margin: 0 0 1px;
 243  }
 244  
 245  .media-upload-form .media-item .error {
 246      padding: 10px 14px 10px 0;
 247      min-height: 50px;
 248  }
 249  
 250  .media-item .error-div button.dismiss {
 251      float: left;
 252      margin: 0 15px 0 10px;
 253  }
 254  
 255  /*------------------------------------------------------------------------------
 256    14.1 - Media Library
 257  ------------------------------------------------------------------------------*/
 258  
 259  .find-box {
 260      background-color: #fff;
 261      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
 262      width: 600px;
 263      overflow: hidden;
 264      margin-right: -300px;
 265      position: fixed;
 266      top: 30px;
 267      bottom: 30px;
 268      right: 50%;
 269      z-index: 100105;
 270  }
 271  
 272  .find-box-head {
 273      background: #fff;
 274      border-bottom: 1px solid #dcdcde;
 275      height: 36px;
 276      font-size: 18px;
 277      font-weight: 600;
 278      line-height: 2;
 279      padding: 0 16px 0 36px;
 280      position: absolute;
 281      top: 0;
 282      right: 0;
 283      left: 0;
 284  }
 285  
 286  .find-box-inside {
 287      overflow: auto;
 288      padding: 16px;
 289      background-color: #fff;
 290      position: absolute;
 291      top: 37px;
 292      bottom: 45px;
 293      overflow-y: scroll;
 294      width: 100%;
 295      box-sizing: border-box;
 296  }
 297  
 298  .find-box-search {
 299      padding-bottom: 16px;
 300  }
 301  
 302  .find-box-search .spinner {
 303      float: none;
 304      right: 105px;
 305      position: absolute;
 306  }
 307  
 308  .find-box-search,
 309  #find-posts-response {
 310      position: relative; /* RTL fix, #WP28010 */
 311  }
 312  
 313  #find-posts-input,
 314  #find-posts-search {
 315      float: right;
 316  }
 317  
 318  #find-posts-input {
 319      width: 140px;
 320      height: 28px;
 321      margin: 0 0 0 4px;
 322  }
 323  
 324  .widefat .found-radio {
 325      padding-left: 0;
 326      width: 16px;
 327  }
 328  
 329  #find-posts-close {
 330      width: 36px;
 331      height: 36px;
 332      border: none;
 333      padding: 0;
 334      position: absolute;
 335      top: 0;
 336      left: 0;
 337      cursor: pointer;
 338      text-align: center;
 339      background: none;
 340      color: #646970;
 341  }
 342  
 343  #find-posts-close:hover,
 344  #find-posts-close:focus {
 345      color: #135e96;
 346  }
 347  
 348  #find-posts-close:focus {
 349      box-shadow: 0 0 0 2px #2271b1;
 350      /* Only visible in Windows High Contrast mode */
 351      outline: 2px solid transparent;
 352      outline-offset: -2px;
 353  }
 354  
 355  #find-posts-close:before {
 356      font: normal 20px/36px dashicons;
 357      vertical-align: top;
 358      -webkit-font-smoothing: antialiased;
 359      -moz-osx-font-smoothing: grayscale;
 360      content: "\f158" / '';
 361  }
 362  
 363  .find-box-buttons {
 364      padding: 8px 16px;
 365      background: #fff;
 366      border-top: 1px solid #dcdcde;
 367      position: absolute;
 368      bottom: 0;
 369      right: 0;
 370      left: 0;
 371  }
 372  
 373  @media screen and (max-width: 782px) {
 374      .find-box-inside {
 375          bottom: 57px;
 376      }
 377  }
 378  
 379  @media screen and (max-width: 660px) {
 380  
 381      .find-box {
 382          top: 0;
 383          bottom: 0;
 384          right: 0;
 385          left: 0;
 386          margin: 0;
 387          width: 100%;
 388      }
 389  
 390  }
 391  
 392  .ui-find-overlay {
 393      position: fixed;
 394      top: 0;
 395      right: 0;
 396      left: 0;
 397      bottom: 0;
 398      background: #000;
 399      opacity: 0.7;
 400      filter: alpha(opacity=70);
 401      z-index: 100100;
 402  }
 403  
 404  .drag-drop #drag-drop-area {
 405      border: 4px dashed #c3c4c7;
 406      height: 200px;
 407  }
 408  
 409  .drag-drop .drag-drop-inside {
 410      margin: 60px auto 0;
 411      width: 250px;
 412  }
 413  
 414  .drag-drop-inside p {
 415      font-size: 14px;
 416      margin: 5px 0;
 417      display: none;
 418  }
 419  
 420  .drag-drop .drag-drop-inside p {
 421      text-align: center;
 422  }
 423  
 424  .drag-drop-inside p.drag-drop-info {
 425      font-size: 20px;
 426  }
 427  
 428  .drag-drop .drag-drop-inside p,
 429  .drag-drop-inside p.drag-drop-buttons {
 430      display: block;
 431  }
 432  
 433  /*
 434  #drag-drop-area:-moz-drag-over {
 435      border-color: #83b4d8;
 436  }
 437  border color while dragging a file over the uploader drop area */
 438  .drag-drop.drag-over #drag-drop-area {
 439      border-color: #9ec2e6;
 440  }
 441  
 442  #plupload-upload-ui {
 443      position: relative;
 444  }
 445  
 446  .post-type-attachment .wp-filter select {
 447      margin: 0 0 0 6px;
 448  }
 449  
 450  /**
 451   * Media Library grid view
 452   */
 453  
 454  .media-frame.mode-grid,
 455  .media-frame.mode-grid .media-frame-content,
 456  .media-frame.mode-grid .attachments-browser:not(.has-load-more) .attachments,
 457  .media-frame.mode-grid .attachments-browser.has-load-more .attachments-wrapper,
 458  .media-frame.mode-grid .uploader-inline-content {
 459      position: static;
 460  }
 461  
 462  /* Regions we don't use at all */
 463  .media-frame.mode-grid .media-frame-title,
 464  .media-frame.mode-grid .media-frame-router,
 465  .media-frame.mode-grid .media-frame-menu {
 466      display: none;
 467  }
 468  
 469  .media-frame.mode-grid .media-frame-content {
 470      background-color: transparent;
 471      border: none;
 472  }
 473  
 474  .upload-php .mode-grid .media-sidebar {
 475      position: relative;
 476      width: auto;
 477      margin-top: 12px;
 478      padding: 0 16px;
 479      border-right: 4px solid #d63638;
 480      box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
 481      background-color: #fff;
 482  }
 483  
 484  .upload-php .mode-grid .hide-sidebar .media-sidebar {
 485      display: none;
 486  }
 487  
 488  .upload-php .mode-grid .media-sidebar .media-uploader-status {
 489      border-bottom: none;
 490      padding-bottom: 0;
 491      max-width: 100%;
 492  }
 493  
 494  .upload-php .mode-grid .media-sidebar .upload-error {
 495      margin: 12px 0;
 496      padding: 4px 0 0;
 497      border: none;
 498      box-shadow: none;
 499      background: none;
 500  }
 501  
 502  .upload-php .mode-grid .media-sidebar .media-uploader-status.errors h2 {
 503      display: none;
 504  }
 505  
 506  .media-frame.mode-grid .uploader-inline {
 507      position: relative;
 508      top: auto;
 509      left: auto;
 510      right: auto;
 511      bottom: auto;
 512      padding-top: 0;
 513      margin-top: 20px;
 514      border: 4px dashed #c3c4c7;
 515  }
 516  
 517  .media-frame.mode-select .attachments-browser.fixed:not(.has-load-more) .attachments,
 518  .media-frame.mode-select .attachments-browser.has-load-more.fixed .attachments-wrapper {
 519      position: relative;
 520      top: 94px; /* prevent jumping up when the toolbar becomes fixed */
 521      padding-bottom: 94px; /* offset for above so the bottom doesn't get cut off */
 522  }
 523  
 524  .media-frame.mode-grid .attachment:focus,
 525  .media-frame.mode-grid .selected.attachment:focus,
 526  .media-frame.mode-grid .attachment.details:focus {
 527      box-shadow: inset 0 0 0 2px #2271b1;
 528      /* Only visible in Windows High Contrast mode */
 529      outline: 2px solid transparent;
 530      outline-offset: -6px;
 531  }
 532  
 533  .media-frame.mode-grid .selected.attachment {
 534      box-shadow:
 535          inset 0 0 0 5px #f0f0f1,
 536          inset 0 0 0 7px #c3c4c7;
 537  }
 538  
 539  .media-frame.mode-grid .attachment.details {
 540      box-shadow:
 541          inset 0 0 0 3px #f0f0f1,
 542          inset 0 0 0 7px #4f94d4;
 543  }
 544  
 545  .media-frame.mode-grid.mode-select .attachment .thumbnail {
 546      opacity: 0.65;
 547  }
 548  
 549  .media-frame.mode-select .attachment.selected .thumbnail {
 550      opacity: 1;
 551  }
 552  
 553  .media-frame.mode-grid .media-toolbar {
 554      margin-bottom: 15px;
 555      height: auto;
 556  }
 557  
 558  .media-frame.mode-grid .media-toolbar select {
 559      margin: 0 0 0 10px;
 560  }
 561  
 562  .media-frame.mode-grid.mode-edit .media-toolbar-secondary > .select-mode-toggle-button {
 563      margin: 0 0 0 8px;
 564      vertical-align: middle;
 565  }
 566  
 567  .media-frame.mode-grid .attachments-browser .bulk-select {
 568      display: inline-block;
 569      margin: 0 0 0 10px;
 570  }
 571  
 572  .media-frame.mode-grid .search {
 573      margin-top: 0;
 574  }
 575  
 576  .media-frame-content .media-search-input-label {
 577      vertical-align: baseline;
 578  }
 579  
 580  .attachments-browser .media-toolbar-secondary > .media-button {
 581      margin-left: 10px;
 582  }
 583  
 584  .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
 585      position: fixed;
 586      top: 32px;
 587      right: auto;
 588      left: 20px;
 589      margin-top: 0;
 590  }
 591  
 592  .media-frame.mode-grid .attachments-browser {
 593      padding: 0;
 594  }
 595  
 596  .media-frame.mode-grid .attachments-browser .attachments {
 597      padding: 2px;
 598  }
 599  
 600  .media-frame.mode-grid .attachments-browser .no-media {
 601      color: #646970; /* same as no plugins and no themes */
 602      font-size: 18px;
 603      font-style: normal;
 604      margin: 0;
 605      padding: 100px 0 0;
 606      text-align: center;
 607  }
 608  
 609  /**
 610   * Attachment details modal
 611   */
 612  
 613  .edit-attachment-frame {
 614      display: block;
 615      height: 100%;
 616      width: 100%;
 617  }
 618  
 619  .edit-attachment-frame .edit-media-header {
 620      overflow: hidden;
 621  }
 622  
 623  .upload-php .media-modal-close .media-modal-icon:before {
 624      content: "\f335" / '';
 625      font-size: 22px;
 626  }
 627  
 628  .upload-php .media-modal-close,
 629  .edit-attachment-frame .edit-media-header .left,
 630  .edit-attachment-frame .edit-media-header .right {
 631      cursor: pointer;
 632      color: #787c82;
 633      background-color: transparent;
 634      height: 50px;
 635      width: 50px;
 636      padding: 0;
 637      position: absolute;
 638      text-align: center;
 639      border: 0;
 640      border-right: 1px solid #dcdcde;
 641      transition: color .1s ease-in-out, background .1s ease-in-out;
 642  }
 643  
 644  .upload-php .media-modal-close {
 645      top: 0;
 646      left: 0;
 647  }
 648  
 649  .edit-attachment-frame .edit-media-header .left {
 650      left: 102px;
 651  }
 652  
 653  .edit-attachment-frame .edit-media-header .right {
 654      left: 51px;
 655  }
 656  
 657  .edit-attachment-frame .media-frame-title {
 658      right: 0;
 659      left: 150px; /* leave space for prev/next/close */
 660  }
 661  
 662  .edit-attachment-frame .edit-media-header .right:before,
 663  .edit-attachment-frame .edit-media-header .left:before {
 664      font: normal 20px/50px dashicons !important;
 665      display: inline;
 666      font-weight: 300;
 667  }
 668  
 669  .upload-php .media-modal-close:hover,
 670  .upload-php .media-modal-close:focus,
 671  .edit-attachment-frame .edit-media-header .left:hover,
 672  .edit-attachment-frame .edit-media-header .right:hover,
 673  .edit-attachment-frame .edit-media-header .left:focus,
 674  .edit-attachment-frame .edit-media-header .right:focus {
 675      background: #dcdcde;
 676      border-color: #c3c4c7;
 677      color: #000;
 678      outline: none;
 679      box-shadow: none;
 680  }
 681  
 682  .upload-php .media-modal-close:focus,
 683  .edit-attachment-frame .edit-media-header .left:focus,
 684  .edit-attachment-frame .edit-media-header .right:focus {
 685      /* Only visible in Windows High Contrast mode */
 686      outline: 2px solid transparent;
 687      outline-offset: -2px;
 688  }
 689  
 690  .upload-php .media-modal-close:focus .media-modal-icon:before,
 691  .upload-php .media-modal-close:hover .media-modal-icon:before {
 692      color: #000;
 693  }
 694  
 695  .edit-attachment-frame .edit-media-header .left:before {
 696      content: "\f341" / '';
 697  }
 698  
 699  .edit-attachment-frame .edit-media-header .right:before {
 700      content: "\f345" / '';
 701  }
 702  
 703  .edit-attachment-frame .edit-media-header [disabled],
 704  .edit-attachment-frame .edit-media-header [disabled]:hover {
 705      color: #c3c4c7;
 706      background: inherit;
 707      cursor: default;
 708  }
 709  
 710  .edit-attachment-frame .media-frame-content,
 711  .edit-attachment-frame .media-frame-router {
 712      right: 0;
 713  }
 714  
 715  .edit-attachment-frame .media-frame-content {
 716      border-bottom: none;
 717      bottom: 0;
 718      top: 50px;
 719  }
 720  
 721  .edit-attachment-frame .attachment-details {
 722      position: absolute;
 723      overflow: auto;
 724      top: 0;
 725      bottom: 0;
 726      left: 0;
 727      right: 0;
 728      box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, 0.1);
 729  }
 730  
 731  .edit-attachment-frame .attachment-media-view {
 732      float: right;
 733      width: 65%;
 734      height: 100%;
 735  }
 736  
 737  .edit-attachment-frame .attachment-media-view .thumbnail {
 738      box-sizing: border-box;
 739      padding: 16px;
 740      height: 100%;
 741  }
 742  
 743  .edit-attachment-frame .attachment-media-view .details-image {
 744      display: block;
 745      margin: 0 auto 16px;
 746      max-width: 100%;
 747      max-height: 90%;
 748      max-height: calc( 100% - 42px ); /* leave space for actions underneath */
 749      background-image: linear-gradient(-45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(-45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7);
 750      background-position: 100% 0, 10px 10px;
 751      background-size: 20px 20px;
 752  }
 753  
 754  .edit-attachment-frame .attachment-media-view .details-image.icon {
 755      background: none;
 756  }
 757  
 758  .edit-attachment-frame .attachment-media-view .attachment-actions {
 759      text-align: center;
 760  }
 761  
 762  .edit-attachment-frame .wp-media-wrapper {
 763      margin-bottom: 12px;
 764  }
 765  
 766  .edit-attachment-frame input,
 767  .edit-attachment-frame textarea {
 768      padding: 4px 8px;
 769      line-height: 1.42857143;
 770  }
 771  
 772  .edit-attachment-frame .attachment-info {
 773      overflow: auto;
 774      box-sizing: border-box;
 775      margin-bottom: 0;
 776      padding: 12px 16px 0;
 777      width: 35%;
 778      height: 100%;
 779      box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, 0.1);
 780      border-bottom: 0;
 781      border-right: 1px solid #dcdcde;
 782      background: #f6f7f7;
 783  }
 784  
 785  .edit-attachment-frame .attachment-info .details,
 786  .edit-attachment-frame .attachment-info .settings {
 787      position: relative; /* RTL fix, #WP29352 */
 788      overflow: hidden;
 789      float: none;
 790      margin-bottom: 15px;
 791      padding-bottom: 15px;
 792      border-bottom: 1px solid #dcdcde;
 793  }
 794  
 795  .edit-attachment-frame .attachment-info .filename {
 796      font-weight: 400;
 797      color: #646970;
 798  }
 799  
 800  .edit-attachment-frame .attachment-info .thumbnail {
 801      margin-bottom: 12px;
 802  }
 803  
 804  .attachment-info .actions {
 805      margin-bottom: 16px;
 806  }
 807  
 808  .attachment-info .actions a {
 809      display: inline;
 810      text-decoration: none;
 811  }
 812  
 813  .copy-to-clipboard-container {
 814      display: flex;
 815      align-items: center;
 816      margin-top: 8px;
 817      clear: both;
 818  }
 819  
 820  .copy-to-clipboard-container .copy-attachment-url {
 821      white-space: normal;
 822  }
 823  
 824  .copy-to-clipboard-container .success {
 825      color: #007017;
 826      margin-right: 8px;
 827  }
 828  
 829  /*------------------------------------------------------------------------------
 830    14.2 - Image Editor
 831  ------------------------------------------------------------------------------*/
 832  .wp_attachment_details .attachment-alt-text {
 833      margin-bottom: 5px;
 834  }
 835  
 836  .wp_attachment_details #attachment_alt {
 837      max-width: 500px;
 838      height: 3.28571428em;
 839  }
 840  
 841  .wp_attachment_details .attachment-alt-text-description {
 842      margin-top: 5px;
 843  }
 844  
 845  .wp_attachment_details label[for="content"] {
 846      font-size: 13px;
 847      line-height: 1.5;
 848      margin: 1em 0;
 849  }
 850  
 851  .wp_attachment_details #attachment_caption {
 852      height: 4em;
 853  }
 854  
 855  .describe .image-editor {
 856      vertical-align: top;
 857  }
 858  
 859  .imgedit-wrap {
 860      position: relative;
 861      padding-top: 10px;
 862  }
 863  
 864  .image-editor p,
 865  .image-editor fieldset {
 866      margin: 8px 0;
 867  }
 868  
 869  .image-editor legend {
 870      margin-bottom: 5px;
 871  }
 872  
 873  .describe .imgedit-wrap .image-editor {
 874      padding: 0 5px;
 875  }
 876  
 877  .wp_attachment_holder div.updated {
 878      margin-top: 0;
 879  }
 880  
 881  .wp_attachment_holder .imgedit-wrap > div {
 882      height: auto;
 883  }
 884  
 885  .imgedit-panel-content {
 886      display: flex;
 887      flex-wrap: wrap;
 888      gap: 20px;
 889      margin-bottom: 20px;
 890  }
 891  
 892  .imgedit-settings {
 893      max-width: 240px; /* Prevent reflow when help info is expanded. */
 894  }
 895  
 896  .imgedit-group-controls > * {
 897      display: none;
 898  }
 899  
 900  .imgedit-panel-active .imgedit-group-controls > * {
 901      display: block;
 902  }
 903  
 904  .imgedit-panel-active .imgedit-group-controls > .imgedit-crop-apply {
 905      display: flex;
 906  }
 907  
 908  .imgedit-crop-apply {
 909      gap: 4px;
 910      flex-wrap: wrap;
 911  }
 912  
 913  .wp_attachment_holder .imgedit-wrap .image-editor {
 914      float: left;
 915      width: 250px;
 916  }
 917  
 918  .image-editor input {
 919      margin-top: 0;
 920      vertical-align: middle;
 921  }
 922  
 923  .imgedit-wait {
 924      position: absolute;
 925      top: 0;
 926      bottom: 0;
 927      width: 100%;
 928      background: #fff;
 929      opacity: 0.7;
 930      filter: alpha(opacity=70);
 931      display: none;
 932  }
 933  
 934  .imgedit-wait:before {
 935      content: "";
 936      display: block;
 937      width: 20px;
 938      height: 20px;
 939      position: absolute;
 940      right: 50%;
 941      top: 50%;
 942      margin: -10px -10px 0 0;
 943      background: transparent url(../images/spinner.gif) no-repeat center;
 944      background-size: 20px 20px;
 945      transform: translateZ(0);
 946  }
 947  
 948  .no-float {
 949      float: none;
 950  }
 951  
 952  .media-disabled,
 953  .image-editor .disabled {
 954      /* WCAG 1.4.3 Text or images of text that are part of an inactive user
 955         interface component ... have no contrast requirement. */
 956      color: #a7aaad;
 957  }
 958  
 959  .A1B1 {
 960      overflow: hidden;
 961  }
 962  
 963  .wp_attachment_image .button,
 964  .A1B1 .button {
 965      float: right;
 966  }
 967  
 968  .no-js .wp_attachment_image .button {
 969      display: none;
 970  }
 971  
 972  .wp_attachment_image .spinner,
 973  .A1B1 .spinner {
 974      float: right;
 975  }
 976  
 977  .imgedit-menu .note-no-rotate {
 978      clear: both;
 979      margin: 0;
 980      padding: 1em 0 0;
 981  }
 982  
 983  .imgedit-menu .button:after,
 984  .imgedit-menu .button:before {
 985      font: normal 16px/1 dashicons;
 986      margin-left: 8px;
 987      vertical-align: middle;
 988      position: relative;
 989      top: -2px;
 990      -webkit-font-smoothing: antialiased;
 991      -moz-osx-font-smoothing: grayscale;
 992  }
 993  
 994  .imgedit-menu .imgedit-rotate.button:after {
 995      content: '\f140';
 996      margin-right: 2px;
 997      margin-left: 0;
 998  }
 999  
1000  .imgedit-menu .imgedit-rotate.button[aria-expanded="true"]:after {
1001      content: '\f142';
1002  }
1003  
1004  .imgedit-menu .button.disabled {
1005      color: #a7aaad;
1006      border-color: #dcdcde;
1007      background: #f6f7f7;
1008      box-shadow: none;
1009      text-shadow: 0 1px 0 #fff;
1010      cursor: default;
1011      transform: none;
1012  }
1013  
1014  .imgedit-crop:before {
1015      content: "\f165" / '';
1016  }
1017  
1018  .imgedit-scale:before {
1019      content: "\f211" / '';
1020  }
1021  
1022  .imgedit-rotate:before {
1023      content: "\f167" / '';
1024  }
1025  
1026  .imgedit-undo:before {
1027      content: "\f171" / '';
1028  }
1029  
1030  .imgedit-redo:before {
1031      content: "\f172" / '';
1032  }
1033  
1034  .imgedit-crop-wrap {
1035      position: relative;
1036  }
1037  
1038  .imgedit-crop-wrap img {
1039      background-image: linear-gradient(-45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(-45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7);
1040      background-position: 100% 0, 10px 10px;
1041      background-size: 20px 20px;
1042  }
1043  
1044  .imgedit-crop-wrap {
1045      padding: 20px;
1046      background-image: linear-gradient(-45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(-45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7);
1047      background-position: 100% 0, 10px 10px;
1048      background-size: 20px 20px;
1049  }
1050  
1051  
1052  .imgedit-crop {
1053      margin: 0 0 0 8px;
1054  }
1055  
1056  .imgedit-rotate {
1057      margin: 0 3px 0 8px;
1058  }
1059  
1060  .imgedit-undo {
1061      margin: 0 3px;
1062  }
1063  
1064  .imgedit-redo {
1065      margin: 0 3px 0 8px;
1066  }
1067  
1068  .imgedit-thumbnail-preview-group {
1069      display: flex;
1070      flex-wrap: wrap;
1071      column-gap: 10px;
1072  }
1073  
1074  .imgedit-thumbnail-preview {
1075      margin: 10px 0 0 8px;
1076  }
1077  
1078  .imgedit-thumbnail-preview-caption {
1079      display: block;
1080  }
1081  
1082  #poststuff .imgedit-group-top h2 {
1083      display: inline-block;
1084      margin: 0;
1085      padding: 0;
1086      font-size: 14px;
1087      line-height: 1.4;
1088  }
1089  
1090  #poststuff .imgedit-group-top .button-link {
1091      text-decoration: none;
1092      color: #1d2327;
1093  }
1094  
1095  .imgedit-applyto .imgedit-label {
1096      display: block;
1097      padding: .5em 0 0;
1098  }
1099  
1100  .imgedit-popup-menu,
1101  .imgedit-help {
1102      display: none;
1103      padding-bottom: 8px;
1104  }
1105  
1106  .imgedit-panel-tools > .imgedit-menu {
1107      display: flex;
1108      column-gap: 4px;
1109      align-items: flex-start;
1110      flex-wrap: wrap;
1111  }
1112  
1113  .imgedit-popup-menu {
1114      width: calc( 100% - 20px );
1115      position: absolute;
1116      background: #fff;
1117      padding: 10px;
1118      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
1119  }
1120  
1121  .image-editor .imgedit-menu .imgedit-popup-menu button {
1122      display: block;
1123      margin: 2px 0;
1124      width: 100%;
1125      white-space: break-spaces;
1126      line-height: 1.5;
1127      padding-top: 3px;
1128      padding-bottom: 2px;
1129  }
1130  
1131  .imgedit-rotate-menu-container {
1132      position: relative;
1133  }
1134  
1135  .imgedit-help.imgedit-restore {
1136      padding-bottom: 0;
1137  }
1138  
1139  /* higher specificity than buttons */
1140  .image-editor .imgedit-settings .imgedit-help-toggle,
1141  .image-editor .imgedit-settings .imgedit-help-toggle:hover,
1142  .image-editor .imgedit-settings .imgedit-help-toggle:active {
1143      border: 1px solid transparent;
1144      margin: -1px -1px 0 0;
1145      padding: 0;
1146      background: transparent;
1147      color: #2271b1;
1148      font-size: 20px;
1149      line-height: 1;
1150      cursor: pointer;
1151      box-sizing: content-box;
1152      box-shadow: none;
1153  }
1154  
1155  .image-editor .imgedit-settings .imgedit-help-toggle:focus {
1156      color: #2271b1;
1157      border-color: #2271b1;
1158      box-shadow: 0 0 0 1px #2271b1;
1159      /* Only visible in Windows High Contrast mode */
1160      outline: 2px solid transparent;
1161  }
1162  
1163  .form-table td.imgedit-response {
1164      padding: 0;
1165  }
1166  
1167  .imgedit-submit-btn {
1168      margin-right: 20px;
1169  }
1170  
1171  .imgedit-wrap .nowrap {
1172      white-space: nowrap;
1173      font-size: 12px;
1174      line-height: inherit;
1175  }
1176  
1177  span.imgedit-scale-warn {
1178      display: flex;
1179      align-items: center;
1180      margin: 4px;
1181      gap: 4px;
1182      color: #b32d2e;
1183      font-style: normal;
1184      visibility: hidden;
1185      vertical-align: middle;
1186  }
1187  
1188  .imgedit-save-target {
1189      margin: 8px 0;
1190  }
1191  
1192  .imgedit-save-target legend {
1193      font-weight: 600;
1194  }
1195  
1196  .imgedit-group {
1197      margin-bottom: 20px;
1198  }
1199  
1200  .image-editor .imgedit-original-dimensions {
1201      display: inline-block;
1202  }
1203  
1204  .image-editor .imgedit-scale-controls input[type="text"],
1205  .image-editor .imgedit-crop-ratio input[type="text"],
1206  .image-editor .imgedit-crop-sel input[type="text"],
1207  .image-editor .imgedit-scale-controls input[type="number"],
1208  .image-editor .imgedit-crop-ratio input[type="number"],
1209  .image-editor .imgedit-crop-sel input[type="number"] {
1210      width: 80px;
1211      font-size: 14px;
1212      padding: 0 8px;
1213  }
1214  
1215  .imgedit-separator {
1216      display: inline-block;
1217      width: 7px;
1218      text-align: center;
1219      font-size: 13px;
1220      color: #3c434a;
1221  }
1222  
1223  .image-editor .imgedit-scale-button-wrapper {
1224      margin-top: 0.3077em;
1225      display: block;
1226  }
1227  
1228  .image-editor .imgedit-scale-controls .button {
1229      margin-bottom: 0;
1230  }
1231  
1232  audio, video {
1233      display: inline-block;
1234      max-width: 100%;
1235  }
1236  
1237  .wp-core-ui .mejs-container {
1238      width: 100%;
1239      max-width: 100%;
1240  }
1241  
1242  .wp-core-ui .mejs-container * {
1243      box-sizing: border-box;
1244  }
1245  
1246  .wp-core-ui .mejs-time {
1247      box-sizing: content-box;
1248  }
1249  
1250  /* =Media Queries
1251  -------------------------------------------------------------- */
1252  
1253  /**
1254   * HiDPI Displays
1255   */
1256  @media print,
1257    (min-resolution: 120dpi) {
1258      .imgedit-wait:before {
1259          background-image: url(../images/spinner-2x.gif);
1260      }
1261  }
1262  
1263  @media screen and (max-width: 782px) {
1264      .edit-attachment-frame input,
1265      .edit-attachment-frame textarea {
1266          line-height: 1.5;
1267      }
1268  
1269      .wp_attachment_details label[for="content"] {
1270          font-size: 14px;
1271          line-height: 1.5;
1272      }
1273  
1274      .wp_attachment_details textarea {
1275          line-height: 1.5;
1276      }
1277  
1278      .wp_attachment_details #attachment_alt {
1279          height: 3.375em;
1280      }
1281  
1282      .media-upload-form .media-item.error,
1283      .media-upload-form .media-item .error {
1284          font-size: 13px;
1285          line-height: 1.5;
1286      }
1287  
1288      .media-upload-form .media-item.error {
1289          padding: 1px 10px;
1290      }
1291  
1292      .media-upload-form .media-item .error {
1293          padding: 10px 12px 10px 0;
1294      }
1295  
1296      .image-editor .imgedit-scale input[type="text"],
1297      .image-editor .imgedit-crop-ratio input[type="text"],
1298      .image-editor .imgedit-crop-sel input[type="text"] {
1299          font-size: 16px;
1300          padding: 6px 10px;
1301      }
1302  
1303      .wp_attachment_holder .imgedit-wrap .imgedit-panel-content,
1304      .wp_attachment_holder .imgedit-wrap .image-editor {
1305          float: none;
1306          width: auto;
1307          max-width: none;
1308          padding-bottom: 16px;
1309      }
1310  
1311      .copy-to-clipboard-container .success {
1312          font-size: 14px;
1313      }
1314  
1315      /* Restructure image editor on narrow viewports. */
1316      .imgedit-crop-wrap img{
1317          width: 100%;
1318      }
1319  
1320      .media-modal .imgedit-wrap .imgedit-panel-content,
1321      .media-modal .imgedit-wrap .image-editor {
1322          position: initial !important;
1323      }
1324  
1325      .media-modal .imgedit-wrap .image-editor {
1326          box-sizing: border-box;
1327          width: 100% !important;
1328      }
1329  
1330      .image-editor .imgedit-scale-button-wrapper {
1331          display: inline-block;
1332      }
1333  }
1334  
1335  @media only screen and (max-width: 600px) {
1336      .media-item-wrapper {
1337          grid-template-columns: 1fr;
1338      }
1339  }
1340  
1341  /**
1342   * Media queries for media grid.
1343   */
1344  @media only screen and (max-width: 1120px) {
1345      /* override for media-views.css */
1346      #wp-media-grid .wp-filter .attachment-filters {
1347          max-width: 100%;
1348      }
1349  }
1350  
1351  @media only screen and (max-width: 1000px) {
1352      /* override for forms.css */
1353      .wp-filter p.search-box {
1354          float: none;
1355          width: 100%;
1356          margin-bottom: 20px;
1357          display: flex;
1358          flex-wrap: nowrap;
1359          column-gap: 0;
1360      }
1361  
1362      .wp-filter p.search-box #media-search-input {
1363          width: 100%;
1364      }
1365  
1366  }
1367  
1368  @media only screen and (max-width: 782px) {
1369      .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
1370          top: 46px;
1371          left: 10px;
1372      }
1373  }
1374  
1375  @media only screen and (max-width: 600px) {
1376      .media-frame.mode-select .attachments-browser.fixed .media-toolbar {
1377          top: 0;
1378      }
1379  }
1380  
1381  @media only screen and (max-width: 480px) {
1382      .edit-attachment-frame .media-frame-title {
1383          left: 110px;
1384      }
1385  
1386      .upload-php .media-modal-close,
1387      .edit-attachment-frame .edit-media-header .left,
1388      .edit-attachment-frame .edit-media-header .right {
1389          width: 40px;
1390          height: 40px;
1391      }
1392  
1393      .edit-attachment-frame .edit-media-header .right:before,
1394      .edit-attachment-frame .edit-media-header .left:before {
1395          line-height: 40px !important;
1396      }
1397  
1398      .edit-attachment-frame .edit-media-header .left {
1399          left: 82px;
1400      }
1401  
1402      .edit-attachment-frame .edit-media-header .right {
1403          left: 41px;
1404      }
1405  
1406      .edit-attachment-frame .media-frame-content {
1407          top: 40px;
1408      }
1409  
1410      .edit-attachment-frame .attachment-media-view {
1411          float: none;
1412          height: auto;
1413          width: 100%;
1414      }
1415  
1416      .edit-attachment-frame .attachment-info {
1417          height: auto;
1418          width: 100%;
1419      }
1420  }
1421  
1422  @media only screen and (max-width: 640px), screen and (max-height: 400px) {
1423      .upload-php .mode-grid .media-sidebar{
1424          max-width: 100%;
1425      }
1426  }
1427  
1428  @media only screen and (max-width: 375px) {
1429      .media-item .attachment-tools {
1430          align-items: baseline;
1431      }
1432      .media-item .edit-attachment.copy-to-clipboard-container {
1433          flex-direction: column;
1434      }
1435  
1436      .copy-to-clipboard-container .success {
1437          line-height: normal;
1438          margin-top: 10px;
1439      }
1440  }