| @@ -126,14 +126,24 @@ | ||
| 126 | 126 | flex-wrap: wrap; |
| 127 | 127 | align-items: center; |
| 128 | 128 | } |
| 129 | 129 | |
| 130 | -.imagify-setting-optim-level { | |
| 131 | - padding: 8px 0 18px; | |
| 132 | -} | |
| 133 | 130 | .imagify-setting-optim-level > p { |
| 134 | 131 | margin: 0; |
| 135 | 132 | } |
| 133 | + | |
| 134 | +.imagify-setting-optim-level .imagify-info { | |
| 135 | + margin-top: 10px; | |
| 136 | +} | |
| 137 | + | |
| 138 | +.imagify-setting-optim-level .imagify-error { | |
| 139 | + margin: 10px 0 0 0; | |
| 140 | +} | |
| 141 | + | |
| 142 | +.imagify-setting-optim-level .imagify-error a { | |
| 143 | + color: #fff; | |
| 144 | +} | |
| 145 | + | |
| 136 | 146 | .imagify-setting-optim-level .imagify-inline-options { |
| 137 | 147 | flex-basis: 60%; |
| 138 | 148 | flex-grow: 1; |
| 139 | 149 | width: auto; |
| @@ -140,8 +150,12 @@ | ||
| 140 | 150 | display: flex; |
| 141 | 151 | background: #2E3243; |
| 142 | 152 | border-radius: 3px; |
| 143 | 153 | } |
| 154 | +.imagify-setting-optim-level .imagify-inline-options-error { | |
| 155 | + background: #ccc; | |
| 156 | +} | |
| 157 | + | |
| 144 | 158 | .imagify-setting-optim-level .imagify-inline-options label { |
| 145 | 159 | display: block !important; |
| 146 | 160 | width: 100%; |
| 147 | 161 | font-size: 14px !important; |
| @@ -180,11 +194,14 @@ | ||
| 180 | 194 | .imagify-middle th { |
| 181 | 195 | padding-top: 35px; |
| 182 | 196 | } |
| 183 | 197 | |
| 198 | +.imagify-settings .imagify-plugin-family-section { | |
| 199 | + margin-bottom: 2em; | |
| 200 | +} | |
| 201 | + | |
| 184 | 202 | .imagify-settings div.submit.submit { |
| 185 | 203 | border-top: 1px solid #D9D9D9; |
| 186 | - margin-top: 2em; | |
| 187 | 204 | padding: 18px 0 7px 30px; |
| 188 | 205 | } |
| 189 | 206 | .imagify-settings .hidden + div.submit.submit { |
| 190 | 207 | margin-top: -1px; |
| @@ -546,8 +563,60 @@ | ||
| 546 | 563 | .imagify-settings .imagify-button-mini.imagify-button-primary:focus { |
| 547 | 564 | color: #FFF; |
| 548 | 565 | } |
| 549 | 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 | + | |
| 550 | 619 | p.imagify-custom-folder-line { |
| 551 | 620 | position: relative; |
| 552 | 621 | margin: 0; |
| 553 | 622 | padding: 12px 15px; |
| @@ -929,10 +998,31 @@ | ||
| 929 | 998 | } |
| 930 | 999 | .imagify-no-api-key .imagify-api-line input[type="text"]{ |
| 931 | 1000 | margin-left: 0; |
| 932 | 1001 | } |
| 1002 | + | |
| 1003 | + .generate-missing-webp #imagify-generate-webp-versions { | |
| 1004 | + width: 100%; | |
| 1005 | + text-align: center; | |
| 1006 | + } | |
| 933 | 1007 | } |
| 934 | 1008 | @media (max-width: 513px) { |
| 935 | 1009 | .imagify-setting-optim-level .imagify-visual-comparison-text{ |
| 936 | 1010 | margin-top: 20px; |
| 937 | 1011 | } |
| 1012 | +} | |
| 1013 | + | |
| 1014 | +.imagify-col-content .imagify-space-left { | |
| 1015 | + margin: 15px 30px 15px 0; | |
| 1016 | +} | |
| 1017 | + | |
| 1018 | +.imagify-col-content .imagify-space-left p { | |
| 1019 | + margin: 0 0 10px 0; | |
| 1020 | + font-size: 19px; | |
| 1021 | + font-weight: 500; | |
| 1022 | + color: #343A49; | |
| 1023 | +} | |
| 1024 | + | |
| 1025 | +.imagify-col-content .imagify-meteo-icon { | |
| 1026 | + height: 64px; | |
| 1027 | + margin: 15px 15px 15px 0; | |
| 938 | 1028 | } |
