| @@ -569,14 +569,52 @@ | ||
| 569 | 569 | display: flex; |
| 570 | 570 | flex-direction: column; |
| 571 | 571 | align-items: flex-start; |
| 572 | 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; | |
| 573 | 581 | } |
| 574 | 582 | |
| 583 | +.generate-missing-webp > p { | |
| 584 | + margin-top: 0; | |
| 585 | +} | |
| 586 | + | |
| 575 | 587 | .generate-missing-webp #imagify-generate-webp-versions { |
| 576 | 588 | white-space: normal; |
| 577 | 589 | word-break: break-word; |
| 578 | 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; | |
| 579 | 617 | } |
| 580 | 618 | |
| 581 | 619 | p.imagify-custom-folder-line { |
| 582 | 620 | position: relative; |
