| @@ -563,8 +563,60 @@ | ||
| 563 | 563 | .imagify-settings .imagify-button-mini.imagify-button-primary:focus { |
| 564 | 564 | color: #FFF; |
| 565 | 565 | } |
| 566 | 566 | |
| 567 | +/* Generate missing Next-Gen versions button area */ | |
| 568 | +.generate-missing-webp { | |
| 569 | + display: flex; | |
| 570 | + flex-direction: column; | |
| 571 | + align-items: flex-start; | |
| 572 | + gap: 10px; | |
| 573 | + /* | |
| 574 | + * Holds the space above the area on the container rather than on the message paragraph. | |
| 575 | + * While a run is in progress the paragraph is hidden (assets/js/options.js:560), and a | |
| 576 | + * `display: none` flex item takes its margins out of the layout with it — which left the | |
| 577 | + * button flush against the info text above. Paired with the reset below so the idle | |
| 578 | + * layout, where the paragraph is visible, is unchanged. | |
| 579 | + */ | |
| 580 | + margin-top: 14px; | |
| 581 | +} | |
| 582 | + | |
| 583 | +.generate-missing-webp > p { | |
| 584 | + margin-top: 0; | |
| 585 | +} | |
| 586 | + | |
| 587 | +.generate-missing-webp #imagify-generate-webp-versions { | |
| 588 | + white-space: normal; | |
| 589 | + word-break: break-word; | |
| 590 | + max-width: 100%; | |
| 591 | +} | |
| 592 | + | |
| 593 | +/* | |
| 594 | + * The container above is a column flex box with `align-items: flex-start`, so every child is | |
| 595 | + * sized to its own content. The progress wrapper holds nothing but empty divs (the only text, | |
| 596 | + * `.percent`, is absolutely positioned), so it collapsed to zero width: no visible track, and | |
| 597 | + * the counter rendered outside the container instead of at the end of the bar. | |
| 598 | + */ | |
| 599 | +.generate-missing-webp .imagify-progress { | |
| 600 | + align-self: stretch; | |
| 601 | +} | |
| 602 | + | |
| 603 | +/* | |
| 604 | + * The button is disabled while a generation run is in progress. WordPress core styles disabled | |
| 605 | + * buttons with `background: transparent !important`, which beats the Imagify background, and | |
| 606 | + * Imagify sets `border: 0`, so the button lost every visual boundary and read as bare uppercase | |
| 607 | + * text. Keep it recognisable as a button, just visibly inactive. | |
| 608 | + */ | |
| 609 | +.imagify-settings .generate-missing-webp #imagify-generate-webp-versions:disabled, | |
| 610 | +.imagify-settings .generate-missing-webp #imagify-generate-webp-versions.disabled { | |
| 611 | + background: #9CD3E3 !important; | |
| 612 | + color: #FFF !important; | |
| 613 | + box-shadow: 0 3px 0 #7FBACC; | |
| 614 | + text-shadow: none; | |
| 615 | + cursor: default; | |
| 616 | + opacity: 1; | |
| 617 | +} | |
| 618 | + | |
| 567 | 619 | p.imagify-custom-folder-line { |
| 568 | 620 | position: relative; |
| 569 | 621 | margin: 0; |
| 570 | 622 | padding: 12px 15px; |
| @@ -945,8 +997,13 @@ | ||
| 945 | 997 | padding:0px 10px 0px 0px; |
| 946 | 998 | } |
| 947 | 999 | .imagify-no-api-key .imagify-api-line input[type="text"]{ |
| 948 | 1000 | margin-left: 0; |
| 1001 | + } | |
| 1002 | + | |
| 1003 | + .generate-missing-webp #imagify-generate-webp-versions { | |
| 1004 | + width: 100%; | |
| 1005 | + text-align: center; | |
| 949 | 1006 | } |
| 950 | 1007 | } |
| 951 | 1008 | @media (max-width: 513px) { |
| 952 | 1009 | .imagify-setting-optim-level .imagify-visual-comparison-text{ |
