PluginProbe
Imagify Image Optimization: Optimize Images | Compress & Convert to WebP/AVIF / trunk
Imagify Image Optimization: Optimize Images | Compress & Convert to WebP/AVIF vtrunk
2.3.4 2.3.3 2.3.2 2.3.1 2.3.0 2.2.9 2.2.8 trunk 1.10 1.3.3 1.3.4 1.3.5 1.3.5.1 1.3.5.2 1.3.6 1.3.6.1 1.4 1.4.1 1.4.2 1.4.3 1.4.4 1.4.5 1.4.6 1.4.7 1.5 All 103 releases
← All changes | assets/css/admin.css +1101 -1452 1.4.1 → trunk View file →
@@ -1,235 +1,265 @@
1 -body.imagify-modal-is-open {
2 - overflow: hidden;
1 +/**
2 + * == Utilities Classes
3 + */
4 +
5 +/* Util: Flexbox */
6 +.imagify-flex {
7 + display: flex;
3 8 }
4 -.imagify-plugins-error {
5 - overflow:hidden;
6 - padding-left:20px;
7 - list-style-type:disc
9 +.imagify-vcenter {
10 + align-items: center;
8 11 }
12 +.imagify-noshrink {
13 + flex-shrink: 0;
14 +}
15 +.imagify-nogrow {
16 + flex-grow: 0;
17 +}
9 18
10 -.imagify-plugins-error li {
11 - width:300px;
12 - line-height:30px
19 +/* Util: dimension */
20 +.imagify-wauto {
21 + width: auto;
13 22 }
14 -@media (max-width: 570px) {
15 - .imagify-plugins-error li {
16 - width: auto;
17 - }
23 +.imagify-hauto {
24 + height: auto;
18 25 }
26 +.imagify-full-width {
27 + width: 100%;
28 +}
19 29
20 -.imagify-notice-dismiss.notice-dismiss {
21 - text-decoration: none;
30 +/* Util: float */
31 +.imagify-start {
32 + float: left;
22 33 }
34 +.imagify-end {
35 + float: right;
36 +}
23 37
24 -.imagify-spinner {
25 - display: inline-block;
26 - width: 20px;
27 - height: 20px;
28 - margin-right: 5px;
29 - vertical-align: middle;
30 - background: rgba(0, 0, 0, 0) url("../images/spinner.gif") no-repeat scroll 0 0 / 20px 20px;
31 - opacity: 0.7;
38 +/* Util: text-align */
39 +.imagify-txt-start.imagify-txt-start.imagify-txt-start {
40 + text-align: left;
32 41 }
33 -.spinner.imagify-hidden {
34 - width: 0;
35 - margin: 4px 0 0 0;
42 +.imagify-txt-center.imagify-txt-center.imagify-txt-center {
43 + text-align: center;
36 44 }
45 +.imagify-txt-end.imagify-txt-end.imagify-txt-end {
46 + text-align: right;
47 +}
37 48
38 -.misc-pub-section.misc-pub-imagify h4 {
39 - font-size: 14px;
40 - margin-top: 5px;
49 +/* Util: margin/padding */
50 +.imagify-mt0.imagify-mt0 {
51 + margin-top: 0;
52 +}
53 +.imagify-mt1.imagify-mt1 {
54 + margin-top: 1em;
55 +}
56 +.imagify-mt2.imagify-mt2 {
57 + margin-top: 2em;
58 +}
59 +.imagify-mt3.imagify-mt3 {
60 + margin-top: 3em;
61 +}
62 +.imagify-mb0.imagify-mb0 {
41 63 margin-bottom: 0;
42 64 }
43 -
44 -/* Some Sweet alert styles */
45 -.imagify-sweet-alert button {
46 - margin-top: 17px !important;
47 - height: 45px !important;
48 - letter-spacing: 3px;
49 - text-transform: uppercase !important;
50 - border-radius: 3px !important;
51 - background-color: #40b1d0 !important;
52 - box-shadow: 0 3px 0 #338ea6 !important;
65 +.imagify-mb1.imagify-mb1 {
66 + margin-bottom: 1em;
53 67 }
54 -.imagify-sweet-alert button.cancel {
55 - background: #777 !important;
56 - box-shadow: 0 3px 0 #444 !important;
68 +.imagify-mr1.imagify-mr1 {
69 + margin-right: 1em;
57 70 }
58 -.imagify-sweet-alert-signup .sa-confirm-button-container {
59 - width: 40%;
71 +.imagify-ml2.imagify-ml2 {
72 + margin-left: 2em;
60 73 }
61 -.imagify-sweet-alert-signup button {
62 - width: 100%;
63 - padding: 0 !important;
74 +.imagify-mr2.imagify-mr2 {
75 + margin-right: 2em;
64 76 }
65 -.imagify-sweet-alert .sa-input-error:before,
66 -.imagify-sweet-alert .sa-input-error:after,
67 -.imagify-sweet-alert .la-ball-fall {
68 - top: 25% !important;
77 +
78 +.imagify-pl0.imagify-pl0.imagify-pl0 {
79 + padding-left: 0;
69 80 }
70 -
71 -#wpwrap {
72 - transition: all .4s;
81 +.imagify-pb0.imagify-pb0 {
82 + padding-bottom: 0;
73 83 }
74 -.stop-scrolling #wpwrap {
75 - filter: blur(2px);
84 +.imagify-pr1.imagify-pr1 {
85 + padding-right: 1em;
76 86 }
77 -.stop-scrolling #wpwrap #wpadminbar {
78 - top: -32px;
87 +.imagify-pr2.imagify-pr2 {
88 + padding-right: 2em;
79 89 }
80 90
81 -/* Some basic colors */
82 -.imagify-primary {
83 - color: #40b1d0;
91 +/* Util: Overflow */
92 +.imagify-oh {
93 + overflow: hidden;
84 94 }
85 -.imagify-secondary {
86 - color: #8cc152;
95 +.imagify-clear {
96 + clear: both;
87 97 }
88 -
89 -#imagify-check-api-container {
90 - font-weight: bold;
98 +.imagify-clearfix:after,
99 +.imagify-inline-options:after,
100 +.imagify-settings-main-content:after,
101 +.imagify-settings-section:after {
102 + content: "";
103 + display: table;
104 + width: 100%;
105 + clear: both;
91 106 }
107 +.imagify-setting-optim-level .imagify-inline-options:after {
108 + display: none;
109 +}
92 110
93 -#imagify-check-api-container .dashicons {
94 - font-size: 25px;
111 +/* Util: Dividers */
112 +.imagify-divider {
113 + height: 1px;
114 + margin: 20px 0;
115 + background: #D2D3D6;
95 116 }
96 -
97 -#imagify-check-api-container .dashicons-no:before {
98 - color: #f06e57;
99 - vertical-align: -1px;
117 +.imagify-pipe {
118 + display: inline-block;
119 + margin: 0 .75em;
120 + vertical-align: middle;
121 + height: 15px;
122 + width: 1px;
123 + background: #979797;
100 124 }
101 125
102 -#imagify-check-api-container .dashicons-yes:before {
103 - color: #8BC34A;
104 - vertical-align: -1px;
126 +/* Titles */
127 +.imagify-h3-like.imagify-h3-like.imagify-h3-like {
128 + margin-bottom: 0;
129 + font-size: 19px;
130 + font-weight: 500;
131 + color: #1F2332;
105 132 }
106 -.imagify-valid {
107 - color: #8BC34A;
133 +.imagify-h4-like.imagify-h4-like.imagify-h4-like {
134 + font-size: 14px;
135 + font-weight: bold;
136 + color: #2E3243;
108 137 }
109 138
110 -.imagify-chart {
111 - width: 33.33%;
112 - position: relative;
139 +/* Default counter */
140 +.imagify-count.imagify-count {
141 + counter-reset: num;
113 142 }
114 -#imagify-overview-chart-legend {
115 - overflow: hidden;
143 +.imagify-count .imagify-count-title {
144 + font-weight: bold;
116 145 }
117 -.imagify-doughnut-legend {
118 - margin-top: 38px;
119 - list-style: none;
146 +.imagify-default-settings {
147 + color: #73818c;
148 + font-weight: normal;
120 149 }
150 +.imagify-count .imagify-count-title:before {
151 + counter-increment: num 1;
152 + content: counter(num) ". ";
153 +}
121 154
122 -.imagify-doughnut-legend li {
123 - display: block;
124 - padding-left: 30px;
125 - position: relative;
126 - margin-bottom: 15px;
127 - border-radius: 5px;
128 - padding: 3px 8px 2px 31px;
129 - font-size: 14px;
130 - font-weight: 600;
131 - cursor: default;
132 - -webkit-transition: background-color 200ms ease-in-out;
133 - -moz-transition: background-color 200ms ease-in-out;
134 - -o-transition: background-color 200ms ease-in-out;
135 - transition: background-color 200ms ease-in-out;
155 +/* List counter */
156 +.imagify-count-list {
157 + counter-reset: listcount;
136 158 }
137 -
138 -.imagify-doughnut-legend li span {
139 - display: block;
140 - position: absolute;
141 - left: 0; top: 0;
142 - width: 25px;
143 - height: 25px;
144 - border-radius: 50%;
159 +.imagify-count-list li {
160 + display: flex;
161 + align-items: center;
145 162 }
146 -
147 -.imagify-chart {
148 - float: left;
149 - margin-bottom: 20px;
163 +.imagify-count-list li + li {
164 + margin-top: .5em;
150 165 }
151 -td .imagify-chart {
152 - float: none;
153 - margin-bottom: 0;
166 +.imagify-count-list li:before {
167 + display: flex;
168 + flex-basis: 24px;
169 + flex-shrink: 0;
170 + flex-grow: 0;
171 + align-items: center;
172 + justify-content: center;
173 + margin-right: 16px;
174 + border: 2px solid #40b1d0;
175 + width: 24px;
176 + height: 24px;
177 + counter-increment: listcount 1;
178 + content: counter(listcount);
179 + color: #40b1d0;
180 + border-radius: 50%;
154 181 }
155 182
156 -.imagify-chart-container {
157 - position: relative;
158 - width: 180px;
159 - float: left;
160 - margin-right: 40px;
183 +/* Table layout */
184 +.imagify-table {
185 + display: table;
186 + width: 100%;
161 187 }
162 -td .imagify-chart-container {
163 - width: 18px;
164 - height: 18px;
165 - float: none;
166 - margin-right: 10px;
188 +.imagify-cell {
189 + display: table-cell;
190 + padding: 10px;
191 + vertical-align: top;
167 192 }
168 -td .imagify-chart {
169 - top: 4px;
193 +.imagify-cell.va-top,
194 +.va-top .imagify-cell {
195 + vertical-align: top;
170 196 }
171 197
172 -.imagify-chart-percent {
173 - position: absolute;
174 - left: 0; right: 0;
175 - top: 50%;
176 - margin-top: -14px;
177 - text-align: center;
178 - font-size: 55px;
179 - font-weight: bold;
180 - color: #46B1CE;
198 +.imagify-bulk-submit .imagify-cell {
199 + padding-top: 0;
181 200 }
182 -.imagify-chart-percent span {
183 - font-size: 20px;
184 - vertical-align: super;
201 +
202 +/* When an "Imagify" modal is open in a page */
203 +body.imagify-modal-is-open {
204 + overflow: hidden;
185 205 }
186 206
187 -.media_page_imagify-bulk-optimization .media-item {
188 - margin: 0;
207 +/* Loader/Spinner */
208 +.imagify-spinner {
209 + display: inline-block;
210 + width: 20px;
211 + height: 20px;
212 + margin-right: 5px;
213 + vertical-align: middle;
214 + background: rgba(0, 0, 0, 0) url("../images/spinner.gif") no-repeat scroll 0 0 / 20px 20px;
215 + opacity: 0.7;
189 216 }
217 +.spinner.imagify-hidden {
218 + width: 0;
219 + margin: 4px 0 0 0;
220 +}
190 221
191 -.media_page_imagify-bulk-optimization .media-item .progress {
192 - float: none;
193 - width: 100%;
194 - margin: 0;
195 - background: #1F2331;
196 - box-shadow: 0;
197 - border-radius: 0;
222 +/* Some basic colors */
223 +.imagify-primary.imagify-primary.imagify-primary {
224 + color: #40b1d0;
198 225 }
226 +.imagify-secondary.imagify-secondary.imagify-secondary,
227 +.imagify-valid {
228 + color: #8BC34A;
229 +}
199 230
200 -.media_page_imagify-bulk-optimization .media-item .percent {
201 - width: auto;
202 - padding: 0 5px;
203 - line-height: 1.85;
204 - font-size: 12px;
231 +/* Informations in column (media popin, media details) */
232 +.misc-pub-section.misc-pub-imagify h4 {
233 + font-size: 14px;
234 + margin-top: 5px;
235 + margin-bottom: 0;
205 236 }
206 237
207 -.media_page_imagify-bulk-optimization .media-item .progress,
208 -.media_page_imagify-bulk-optimization .media-item .percent {
209 - text-align: right;
238 +/* Doughnut */
239 +.imagify-chart {
240 + position: relative;
241 + top: 1px;
242 + display: inline-block;
243 + vertical-align: middle;
210 244 }
211 -.media_page_imagify-bulk-optimization .media-item .progress .bar {
212 - width: 1px;
213 - height: 22px;
214 - margin-top: 0;
215 - background: #46B1CE;
216 - border-radius: 0;
217 - overflow: visible;
218 - -webkit-transition: width .5s;
219 - transition: width .5s;
245 +.imagify-chart-container {
246 + position: relative;
247 + display: inline-block;
248 + margin-right: 5px;
220 249 }
250 +.imagify-chart-container canvas {
251 + display: block;
252 +}
221 253
222 -
223 -/*
254 +/**
224 255 *
225 256 * == Settings page
226 - *
257 + *
227 258 */
228 259
229 260
230 -/* Basic HTML elements */
231 -
261 +/* Basic HTML elements for Options and Bulk pages */
232 262 .imagify-settings a,
233 263 .imagify-settings .button,
234 264 .imagify-settings input,
235 265 .imagify-welcome a,
@@ -241,54 +271,36 @@
241 271 .imagify-settings a {
242 272 color: #40b1d0;
243 273 }
244 274
245 -.imagify-options-title {
246 - padding-bottom: .5em;
247 - border-bottom: 3px solid #F2F2F2;
248 - font-size: 13px;
249 - font-weight: 500;
250 - text-transform: uppercase;
251 - letter-spacing: 0.025em;
252 - color: #40b1d0;
253 -}
254 -
255 275 .imagify-settings,
256 276 .imagify-settings p,
257 277 .imagify-settings th {
258 278 color: #5F758E;
259 279 }
260 -@media (max-width: 782px) {
261 - .imagify-settings .form-table th {
262 - padding-top: 2em;
263 - padding-bottom: .5em;
264 - }
265 -}
266 -.imagify-settings .form-table td {
267 - vertical-align: top;
268 -}
269 -.imagify-settings .form-table th span {
270 - cursor: pointer;
271 -}
272 -.imagify-middle th {
273 - padding-top: 35px;
274 -}
275 -.imagify-settings .button,
280 +
281 +/* Buttons */
282 +.imagify-main-content .button,
283 +.imagify-settings-section .button,
276 284 .imagify-welcome .button,
277 285 .imagify-notice .button,
278 -.imagify-button-primary.imagify-button-primary {
286 +.imagify-button.imagify-button,
287 +.imagify-button-primary.imagify-button-primary,
288 +.imagify-button-secondary.imagify-button-secondary {
279 289 height: auto;
280 - padding: 8px 20px;
290 + padding: 11px 22px;
281 291 border: 0 none;
282 292 font-size: 14px;
283 293 font-weight: 600;
294 + text-transform: uppercase;
295 + letter-spacing: 0.01em;
296 + word-spacing: 0.01em;
284 297 box-shadow: 0 3px 0 rgba(0, 0, 0, .15);
298 + border-radius: 3px;
299 + cursor: pointer;
300 + transition: all .275s;
285 301 }
286 302
287 -.imagify-notice .button-mini {
288 - padding: 2px 10px;
289 - font-size: 13px;
290 -}
291 303 .button-primary.button-mini {
292 304 padding: 2px 10px;
293 305 }
294 306 .imagify-settings .button.button-mini-flat {
@@ -294,9 +306,9 @@
294 306 .imagify-settings .button.button-mini-flat {
295 307 padding: 3px 6px 5px;
296 308 font-size: 12px;
297 309 box-shadow: none!important;
298 - line-height: 1.2;
310 + line-height: 1.2;
299 311 }
300 312 .imagify-settings .button.button-mini-flat:hover,
301 313 .imagify-settings .button.button-mini-flat:focus {
302 314 box-shadow: none!important;
@@ -301,9 +313,10 @@
301 313 .imagify-settings .button.button-mini-flat:focus {
302 314 box-shadow: none!important;
303 315 }
304 316
305 -.imagify-title .button-ghost.button-ghost {
317 +.imagify-title .button-ghost.button-ghost,
318 +.imagify-button-ghost.imagify-button-ghost {
306 319 padding: 2px 9px;
307 320 border: 1px solid #40B1D0;
308 321 font-size: 12px;
309 322 font-weight: normal;
@@ -308,19 +321,37 @@
308 321 font-size: 12px;
309 322 font-weight: normal;
310 323 color: #40B1D0;
311 324 background: transparent;
325 + box-shadow: none;
312 326 }
313 327 .imagify-title .button-ghost.button-ghost:hover,
314 -.imagify-title .button-ghost.button-ghost:focus {
328 +.imagify-title .button-ghost.button-ghost:focus,
329 +.imagify-button-ghost.imagify-button-ghost:hover,
330 +.imagify-button-ghost.imagify-button-ghost:focus {
315 331 border-color: transparent;
316 332 color: #000;
317 333 background: #40B1D0;
318 334 }
319 -.button .dashicons {
335 +.imagify-button-ghost.imagify-button-ghost:hover,
336 +.imagify-button-ghost.imagify-button-ghost:focus {
337 + color: #FFF;
338 +}
339 +.imagify-button-medium.imagify-button-medium {
340 + text-transform: uppercase;
341 + letter-spacing: 0.1em;
342 + padding: 3px 10px;
343 + font-weight: bold;
344 +}
345 +.imagify-button-medium.imagify-button-ghost {
346 + border-width: 2px;
347 +}
348 +[class*="imagify-"] .button .dashicons {
320 349 margin-right: 5px;
321 350 vertical-align: middle;
351 + line-height: 1;
322 352 }
353 +
323 354 .imagify-settings .button-primary.button-primary,
324 355 .imagify-welcome .button-primary.button-primary,
325 356 .imagify-button-primary.imagify-button-primary {
326 357 background: #40B1D0;
@@ -327,8 +358,14 @@
327 358 color: #FFF;
328 359 box-shadow: 0 3px 0 rgba(51, 142, 166, 1);
329 360 text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799!important;
330 361 }
362 +.imagify-button-secondary.imagify-button-secondary {
363 + background: #8BC34A;
364 + color: #FFF;
365 + box-shadow: 0 3px 0 #6F9C3B;
366 + text-shadow: 0 -1px 1px #6F9C3B, 1px 0 1px #6F9C3B, 0 1px 1px #6F9C3B!important;
367 +}
331 368 .imagify-settings .button-primary:hover,
332 369 .imagify-settings .button-primary:focus,
333 370 .imagify-welcome .button-primary:hover,
334 371 .imagify-welcome .button-primary:focus,
@@ -336,46 +373,155 @@
336 373 .imagify-button-primary.imagify-button-primary:focus {
337 374 background: rgb(51, 142, 166);
338 375 box-shadow: 0 3px 0 rgb(31, 122, 146);
339 376 }
377 +.imagify-button-secondary.imagify-button-secondary:hover,
378 +.imagify-button-secondary.imagify-button-secondary:focus {
379 + background: #6F9C3B;
380 + color: #FFF;
381 +}
340 382
341 -/* exception */
342 -.wp_attachment_image .imagify-button-primary {
343 - float: left;
344 - padding: 0 10px 1px;
345 - margin: 0 5px 2px 0;
383 +.imagify-button-light.imagify-button-light {
384 + background: #FFF;
385 + color: #4a4a4a;
386 + box-shadow: 0 2px 0 rgba(0, 0, 0, .2);
387 +}
388 +.imagify-block-secondary .imagify-button-light.imagify-button-light {
389 + color: #6F9C3B;
390 +}
391 +.imagify-button-light.imagify-button-light:hover,
392 +.imagify-button-light.imagify-button-light:focus {
393 + color: #FFF;
394 + background: rgba(0, 0, 0, .2);
395 +}
396 +
397 +/* Buttons clean */
398 +.button.imagify-button-clean,
399 +.imagify-button-clean {
400 + padding: 0;
401 + background: transparent;
402 + box-shadow: none;
403 +}
404 +.imagify-button-clean .dashicons-plus {
405 + width: 32px;
406 + height: 25px;
407 +}
408 +.imagify-button-clean .dashicons-plus:before {
409 + display: flex;
410 + align-items: center;
411 + justify-content: center;
412 + width: 25px;
413 + height: 22px;
414 + margin-left: 2px;
415 + padding-top: 3px;
416 + font-size: 17px;
417 + background: #40B1D0;
418 + color: #FFF;
419 + transition: all .275s;
420 +}
421 +.button.imagify-button-clean:hover,
422 +.button.imagify-button-clean:focus,
423 +.button.imagify-button-clean:active,
424 +.button.imagify-button-clean[disabled] {
425 + background: transparent!important;
426 + color: #343A49;
427 + box-shadow: none;
428 +}
429 +.button.imagify-button-clean:hover .dashicons-plus:before,
430 +.button.imagify-button-clean:focus .dashicons-plus:before {
431 + background: #343A49;
432 +}
433 +
434 +/* Buttons link-like */
435 +button.imagify-link-like {
436 + border: 0;
437 + padding: 0;
438 + color: inherit;
439 + text-decoration: underline;
346 440 font-size: 13px;
347 - line-height: 26px;
348 - box-shadow: 0 3px 0 rgba(51, 142, 166, 1);
441 + box-shadow: none;
442 + background: transparent;
443 + cursor: pointer;
349 444 }
350 445
351 -.imagify-settings input[type="text"] {
352 - color: #4A4A4A;
353 - font-weight: 600;
354 - box-shadow: none;
446 +/* Modifier */
447 +.imagify-section-positive .imagify-button-light {
448 + color: #709A41;
355 449 }
356 -.imagify-settings p.submit .button-primary {
357 - margin-left: 240px;
450 +.imagify-button.imagify-button-big {
451 + font-size: 15px;
452 + padding: 11px 30px;
358 453 }
359 -@media (max-width: 850px) {
360 - .imagify-settings p.submit .button-primary {
361 - margin-left: 0px;
362 - }
363 - .imagify-settings p.submit {
364 - text-align: center;
365 - }
454 +.imagify-button-big .dashicons {
455 + font-size: 1.45em;
456 + margin-right: 6px;
457 + margin-left: -4px;
366 458 }
367 459
460 +.imagify-settings .button .dashicons,
461 +.imagify-welcome .button .dashicons,
462 +.imagify-notice .button .dashicons,
463 +.imagify-button.imagify-button .dashicons,
464 +.imagify-button-primary.imagify-button-primary .dashicons,
465 +.imagify-button-secondary.imagify-button-secondary .dashicons {
466 + vertical-align: middle;
467 + line-height: 1;
468 +}
368 469
369 -/* Header & Subheader */
470 +[class*="imagify-"] .button-text {
471 + display: inline-block;
472 + vertical-align: middle;
473 +}
370 474
475 +/* Exception in Media edition page and post Edition pages (insert media popin) */
476 +.wp_attachment_image .imagify-button-primary,
477 +.media-frame-content .imagify-button-primary {
478 + padding: 0 10px 1px;
479 + margin: 0 5px 2px 0;
480 + font-size: 13px;
481 + line-height: 26px;
482 + box-shadow: 0 3px 0 rgba(51, 142, 166, 1);
483 +}
484 +.wp_attachment_image .imagify-button-primary {
485 + float: left;
486 +}
487 +
488 +/**
489 + * == Header & Subheader & Sections
490 + *
491 + * (options, Welcome Notice, Bulk)
492 + */
371 493 .imagify-title.imagify-title {
372 494 position: relative;
373 - padding: 30px 50px;
495 + padding: 10px 30px;
374 496 font-size: 23px;
375 - background: #2E3243;
497 + background: #1F2332;
376 498 color: #FFF;
377 499 }
500 +.imagify-welcome .imagify-logo {
501 + opacity: 1;
502 +}
503 +.imagify-welcome .imagify-title {
504 + display: flex;
505 + padding: 20px 30px;
506 +}
507 +.imagify-settings .imagify-title { /* (options and bulk) */
508 + display: flex;
509 + justify-content: space-between;
510 + align-items: center;
511 +}
512 +.imagify-settings .imagify-logo-block {
513 + display: flex;
514 + align-items: center;
515 + flex-shrink: 0;
516 + flex-grow: 0;
517 + padding: 0;
518 + margin-right: 35px;
519 + color: inherit;
520 +}
521 +.imagify-logo-block sup {
522 + color: #1F2332;
523 +}
378 524 .imagify-settings .imagify-title + .imagify-notice {
379 525 margin: 0;
380 526 border-right: 1px solid #D9D9D9;
381 527 padding-top: 15px;
@@ -380,85 +526,141 @@
380 526 border-right: 1px solid #D9D9D9;
381 527 padding-top: 15px;
382 528 padding-bottom: 15px;
383 529 }
530 +.imagify-title .title-text {
531 + font-size: 28px;
532 + font-weight: bold;
533 + color: #FFF;
534 +}
535 +.imagify-lb-icon {
536 + padding-right: 18px;
537 +}
538 +.imagify-lb-text img {
539 + margin-bottom: .15em;
540 +}
541 +.imagify-lb-text {
542 + font-size: 23px;
543 + font-weight: bold;
544 + color: #FFF;
545 +}
384 546 .imagify-logo {
547 + display: block;
385 548 vertical-align: top;
549 + opacity: .4;
386 550 }
387 551 .imagify-sub-header,
388 -.imagify-sub-title.imagify-sub-title,
389 -.imagify-settings div.submit { /* heavier is better */
552 +.imagify-sub-title.imagify-sub-title, /* heavier is better */
553 +.imagify-settings div.submit,
554 +.imagify-section {
390 555 margin: 0;
391 556 padding: 20px;
392 557 background: #F2F5F7;
393 558 }
559 +.imagify-sub-title.imagify-sub-title,
560 +.imagify-section-positive {
561 + padding-left: 40px;
562 +}
563 +.imagify-section-positive {
564 + background: #8cc152;
565 + color: #FFF;
566 +}
567 +.imagify-section-positive p {
568 + color: #FFF
569 +}
570 +.imagify-section-gray {
571 + background: #D9E4EB;
572 +}
573 +.imagify-section-gray .imagify-count-title {
574 + color: #4a4a4a;
575 +}
576 +.imagify-section p:first-child {
577 + margin-top: 0;
578 +}
579 +.imagify-section p:last-child {
580 + margin-bottom: 0;
581 +}
394 582
395 -.imagify-bulk-info {
396 - margin: 1em 1em 1em 240px;
397 - transition: margin .3s;
583 +/* Documentation link */
584 +.imagify-settings .imagify-documentation-link-box {
585 + display: flex;
586 + padding: 12px 13px 14px;
587 + border: 1px solid #40b1d0;
588 + color: #E5EBEF;
589 + border-radius: 3px;
398 590 }
399 -@media (max-width: 850px) {
400 - .imagify-bulk-info {
401 - margin: 1em;
402 - }
591 +.imagify-documentation-link-icon {
592 + width: 23px;
593 + height: 31px;
594 + font-size: 2.6em;
595 + margin-right: 15px;
596 + line-height: 1.3;
403 597 }
404 -.imagify-bulk-info p {
405 - display: inline-block;
406 - text-align: left;
407 - width: 400px;
408 - max-width: 100%;
598 +.imagify-documentation-link-box span {
599 + font-size: 12px;
600 +}
601 +.imagify-documentation-link-box a {
409 602 font-weight: bold;
410 603 }
411 604
412 -@media (min-width: 1500px) {
413 - .imagify-settings div.submit {
414 - display: table;
415 - width: 100%;
605 +@media (max-width: 1120px) {
606 + .imagify-settings .imagify-title {
607 + flex-wrap: wrap;
416 608 }
417 - .imagify-settings div.submit > * {
418 - display: table-cell;
419 - vertical-align: middle;
420 - }
421 - .imagify-bulk-info {
422 - padding: 0 25px;
423 - text-align: right;
424 - }
425 609 }
426 -.imagify-settings div.submit {
427 - margin-top: 2em;
428 - padding: 20px 0;
610 +
611 +.imagify-settings-section {
612 + padding: 10px 20px;
429 613 }
430 -.imagify-sub-header th {
431 - text-align: right;
614 +.imagify-account-info-col .imagify-settings-section {
615 + padding-right: 0;
432 616 }
433 -.imagify-sub-header .form-table {
434 - margin: 0;
617 +.imagify-settings-main-content,
618 +.imagify-welcome .imagify-settings-section {
619 + border: 1px solid #D9D9D9;
620 + border-top-width: 0;
621 + background: #FFF;
435 622 }
436 -.imagify-sub-header th,
437 -.imagify-sub-header td {
438 - padding-top: 0;
439 - padding-bottom: 0;
623 +
624 +.imagify-settings-main-content {
625 + padding-bottom: 20px;
440 626 }
441 -[for="api_key"] {
442 - padding-top: 5px;
627 +.imagify-settings-main-content p,
628 +.imagify-settings-main-content .imagify-setting-line {
629 + font-size: 14px;
630 + line-height: 1.5;
443 631 }
444 632
445 -.imagify-notice .imagify-rate-us.imagify-rate-us {
446 - position: relative;
447 - bottom: 0; right: 0;
448 - text-align: left;
633 +.imagify-settings-main-content .code {
634 + max-height: 10em;
635 + padding: 3px 5px 2px 5px;
636 + overflow: auto;
637 + background: #EAEAEA;
638 + background: rgba(0,0,0,.07);
449 639 }
450 640
451 -.imagify-notice .imagify-rate-us .stars {
452 - margin: 0;
641 +.imagify-settings-main-content + .imagify-settings-main-content {
642 + margin-top: 20px;
643 + border-top-width: 1px;
453 644 }
454 645
646 +.imagify-br {
647 + line-height: 2;
648 +}
649 +
650 +/* New to imagify, title */
651 +p.imagify-section-title.imagify-section-title {
652 + font-size: 20px;
653 + margin-top: -.3em;
654 + margin-bottom: -.6em;
655 +}
656 +
657 +/**
658 + * == Rating (Notice + Settings)
659 + */
455 660 .imagify-rate-us.imagify-rate-us {
456 - position: absolute;
457 - bottom: 50%;
458 - right: 20px;
459 661 text-align: right;
460 - margin-bottom: -2.4em;
662 + margin: -1em -2.4em -1em 0;
461 663 color: #FFF;
462 664 }
463 665 .imagify-rate-us a {
464 666 color: #40B1D0;
@@ -491,32 +693,21 @@
491 693 margin-left: 0;
492 694 }
493 695 }
494 696
495 -
496 -/* Sections */
497 -
498 -.imagify-settings-section {
499 - padding: 10px 20px;
500 -}
501 -[id="imagify-settings"],
502 -.imagify-welcome .imagify-settings-section {
503 - border: 1px solid #D9D9D9;
504 - border-top: 0 none;
505 - background: #FFF;
506 -}
507 -.imagify-br {
508 - line-height: 2;
509 -}
510 -
511 -
512 -/* Some colors */
697 +/**
698 + * == Messages & infos
699 + */
513 700 .imagify-important {
514 701 color: #F5A623;
515 702 }
703 +.imagify-success,
704 +.imagify-settings .imagify-success {
705 + color: #8BC34A;
706 +}
516 707 .imagify-info,
517 708 .imagify-info a {
518 - color: #40B1D0;
709 + color: #7A8996;
519 710 font-size: 12px;
520 711 }
521 712 .imagify-info {
522 713 position: relative;
@@ -521,55 +712,27 @@
521 712 .imagify-info {
522 713 position: relative;
523 714 display: inline-block;
524 715 padding-left: 25px;
525 - vertical-align: top;
526 716 }
527 717 .imagify-info .dashicons {
528 718 position: absolute;
529 - left: 0; top: -1px;
719 + left: 0; top: 0;
720 + color: #40B1D0;
530 721 }
531 -label + .imagify-info,
532 -label + .imagify-options-line,
533 -.imagify-visual-label {
534 - display: inline-block;
535 - max-width: 70%;
536 - margin-left: 15px;
537 - margin-top: 2px!important;
538 - -webkit-transition: opacity .3s;
539 - transition: opacity .3s;
540 -}
541 -.imagify-visual-label {
542 - vertical-align: -5px;
543 -}
544 -label[for="imagify_sizes_full"] + .imagify-info {
545 - vertical-align: middle;
546 -}
547 722
548 -.imagify-settings.imagify-settings [type="checkbox"]:not(:checked) + label + .imagify-options-line,
549 -.imagify-settings.imagify-settings [type="checkbox"]:not(:checked) + label .imagify-visual-label {
550 - opacity: .5;
551 -}
552 -.imagify-settings.imagify-settings [type="checkbox"]:checked + label + .imagify-options-line,
553 -.imagify-settings.imagify-settings [type="checkbox"]:checked + label .imagify-visual-label {
554 - opacity: 1;
555 -}
556 -
557 -.imagify-checkbox-marged {
558 - max-width: 500px;
559 - margin-left: 45px;
560 -}
561 -
562 -
563 -
564 723 /* Custom checkboxes in CSS */
565 -
566 724 .imagify-settings.imagify-settings [type="checkbox"]:not(:checked),
567 -.imagify-settings.imagify-settings [type="checkbox"]:checked {
725 +.imagify-settings.imagify-settings [type="checkbox"]:checked,
726 +.imagify-checkbox.imagify-checkbox:not(:checked),
727 +.imagify-checkbox.imagify-checkbox:checked {
728 + position: absolute;
568 729 opacity: 0.01;
569 730 }
570 731 .imagify-settings.imagify-settings [type="checkbox"]:not(:checked):focus,
571 -.imagify-settings.imagify-settings [type="checkbox"]:checked:focus {
732 +.imagify-settings.imagify-settings [type="checkbox"]:checked:focus,
733 +.imagify-checkbox.imagify-checkbox:not(:checked):focus,
734 +.imagify-checkbox.imagify-checkbox:checked:focus {
572 735 box-shadow: none!important; /* system value to override */
573 736 outline: none!important;
574 737 border: 0 none!important;
575 738 }
@@ -574,34 +737,46 @@
574 737 border: 0 none!important;
575 738 }
576 739
577 740 .imagify-settings [type="checkbox"]:not(:checked) + label,
578 -.imagify-settings [type="checkbox"]:checked + label {
741 +.imagify-settings [type="checkbox"]:checked + label,
742 +.imagify-checkbox.imagify-checkbox:not(:checked) + label,
743 +.imagify-checkbox.imagify-checkbox:checked + label {
579 744 position: relative;
580 - padding-left: 6px;
745 + display: flex;
746 + align-items: center;
747 + min-height: 24px;
748 + padding-left: 40px;
581 749 cursor: pointer;
582 - vertical-align: top;
750 + font-size: 14px;
751 + font-weight: bold;
752 + color: #2E3243;
583 753 }
584 754
585 755 /* checkbox aspect */
586 756 .imagify-settings [type="checkbox"]:not(:checked) + label:before,
587 -.imagify-settings [type="checkbox"]:checked + label:before {
757 +.imagify-settings [type="checkbox"]:checked + label:before,
758 +.imagify-checkbox.imagify-checkbox:not(:checked) + label:before,
759 +.imagify-checkbox.imagify-checkbox:checked + label:before {
588 760 content: '';
589 761 position: absolute;
590 762 left: 0; top: 0;
591 - width: 28px; height: 28px;
592 - margin: 0 0 0 -24px;
763 + width: 22px; height: 22px;
593 764 border: 2px solid #8BA6B4;
594 765 background: #FFFFFF;
595 - border-radius: 4px;
766 + border-radius: 3px;
596 767 }
597 768 /* checked mark aspect */
598 769 .imagify-settings [type="checkbox"]:not(:checked) + label:after,
599 -.imagify-settings [type="checkbox"]:checked + label:after {
770 +.imagify-settings [type="checkbox"]:checked + label:after,
771 +.imagify-checkbox.imagify-checkbox:not(:checked) + label:after,
772 +.imagify-checkbox.imagify-checkbox:checked + label:after {
600 773 content: "✓";
601 774 position: absolute;
602 775 font-size: 1.4em;
603 - top: 3px; left: -16px;
776 + top: -2px; left: 4.5px;
777 + color: #8BA6B4;
778 + font-weight: normal;
604 779 -webkit-transition: all .2s;
605 780 -moz-transition: all .2s;
606 781 -ms-transition: all .2s;
607 782 transition: all .2s;
@@ -607,14 +782,17 @@
607 782 transition: all .2s;
608 783 }
609 784 /* disabled aspect */
610 785 .imagify-settings [type="checkbox"][disabled]:not(:checked) + label:before,
611 -.imagify-settings [type="checkbox"][disabled]:checked + label:before {
786 +.imagify-settings [type="checkbox"][disabled]:checked + label:before,
787 +.imagify-checkbox.imagify-checkbox[disabled]:not(:checked) + label:before,
788 +.imagify-checkbox.imagify-checkbox[disabled]:checked + label:before {
612 789 border-color: #ccc;
613 790 background: #ddd;
614 791 }
615 792 /* checked mark aspect changes */
616 -.imagify-settings [type="checkbox"]:not(:checked) + label:after {
793 +.imagify-settings [type="checkbox"]:not(:checked) + label:after,
794 +.imagify-checkbox.imagify-checkbox:not(:checked) + label:after {
617 795 opacity: 0;
618 796 -webkit-transform: scale(0);
619 797 -moz-transform: scale(0);
620 798 -ms-transform: scale(0);
@@ -619,9 +797,10 @@
619 797 -moz-transform: scale(0);
620 798 -ms-transform: scale(0);
621 799 transform: scale(0);
622 800 }
623 -.imagify-settings [type="checkbox"]:checked + label:after {
801 +.imagify-settings [type="checkbox"]:checked + label:after,
802 +.imagify-checkbox.imagify-checkbox:checked + label:after {
624 803 opacity: 1;
625 804 -webkit-transform: scale(1);
626 805 -moz-transform: scale(1);
627 806 -ms-transform: scale(1);
@@ -626,15 +805,30 @@
626 805 -moz-transform: scale(1);
627 806 -ms-transform: scale(1);
628 807 transform: scale(1);
629 808 }
630 -input[id^="imagify_sizes_"]:checked + label {
631 - font-weight: bold;
809 +
810 +/* medium version */
811 +.medium.imagify-checkbox:not(:checked) + label:before,
812 +.medium.imagify-checkbox:checked + label:before {
813 + width: 22px;
814 + height: 22px;
815 + border-width: 1.5px;
816 + border-radius: 2px;
817 + margin-top: 0;
632 818 }
819 +.medium.imagify-checkbox:not(:checked) + label:after,
820 +.medium.imagify-checkbox:checked + label:after {
821 + font-size: 1.1em;
822 + left: -17px;
823 + top: 3px;
824 +}
633 825
634 826 /* mini version */
635 827 .imagify-settings .mini[type="checkbox"]:not(:checked) + label:before,
636 -.imagify-settings .mini[type="checkbox"]:checked + label:before {
828 +.imagify-settings .mini[type="checkbox"]:checked + label:before,
829 +.mini.imagify-checkbox:not(:checked) + label:before,
830 +.mini.imagify-checkbox:checked + label:before {
637 831 width: 15px;
638 832 height: 15px;
639 833 border-width: 1px;
640 834 border-radius: 2px;
@@ -640,21 +834,50 @@
640 834 border-radius: 2px;
641 835 margin-top: 0;
642 836 }
643 837 .imagify-settings .mini[type="checkbox"]:not(:checked) + label:after,
644 -.imagify-settings .mini[type="checkbox"]:checked + label:after {
645 - content: "✓";
838 +.imagify-settings .mini[type="checkbox"]:checked + label:after,
839 +.mini.imagify-checkbox:not(:checked) + label:after,
840 +.mini.imagify-checkbox:checked + label:after {
646 841 font-size: .9em;
647 842 left: -21px;
648 - top: 1px;
843 + top: -0.5px;
649 844 }
650 845 /* focus aspect */
651 846 .imagify-settings [type="checkbox"]:not(:checked):focus + label:before,
652 -.imagify-settings [type="checkbox"]:checked:focus + label:before {
847 +.imagify-settings [type="checkbox"]:checked:focus + label:before,
848 +.imagify-checkbox.imagify-checkbox:not(:checked):focus + label:before,
849 +.imagify-checkbox.imagify-checkbox:checked:focus + label:before {
653 850 border-style: dotted;
654 851 border-color: #40b1d0;
655 852 }
656 853
854 +/* Checkbox groups */
855 +.imagify-check-group {
856 + padding-left: 2px;
857 + margin-bottom: 0;
858 +}
859 +.imagify-check-group.imagify-is-scrollable {
860 + height: 15em;
861 + overflow-y: auto;
862 + padding: 8px;
863 + margin: 1.5em 0 0 -8px;
864 + background: #F4F7F9;
865 + border: 1px solid #D2D3D6;
866 + border-radius: 3px;
867 +}
868 +.imagify-is-scrollable legend + p {
869 + margin-top: 0;
870 +}
871 +.imagify-is-scrollable [type="checkbox"]:not(:checked) + label:before,
872 +.imagify-is-scrollable [type="checkbox"]:checked + label:before {
873 + background: #F4F7F9;
874 +}
875 +.imagify-settings .imagify-check-group.imagify-check-group label {
876 + color: #338EA6;
877 + font-weight: 500;
878 +}
879 +
657 880 /* Custom radio in CSS */
658 881 .imagify-inline-options {
659 882 position: relative;
660 883 display: table;
@@ -661,13 +884,9 @@
661 884 width: 100%;
662 885 max-width: 600px;
663 886 border-collapse: collapse;
664 887 }
665 -.imagify-inline-options:after {
666 - content: "";
667 - display: table;
668 - clear: both;
669 -}
888 +
670 889 .imagify-inline-options input[type="radio"]:not(:checked),
671 890 .imagify-inline-options input[type="radio"]:checked {
672 891 position: absolute;
673 892 left: 5px; top: 5px;
@@ -672,15 +891,12 @@
672 891 position: absolute;
673 892 left: 5px; top: 5px;
674 893 display: none;
675 894 }
895 +
676 896 .imagify-inline-options input[type="radio"]:not(:checked) + label,
677 897 .imagify-inline-options input[type="radio"]:checked + label {
678 898 position: relative;
679 - /*
680 - float: left;
681 - padding: 13px 40px;
682 - */
683 899 display: table-cell;
684 900 padding: 13px 10px;
685 901 text-align: center;
686 902
@@ -689,22 +905,20 @@
689 905 text-transform: uppercase;
690 906 letter-spacing: 0.1em;
691 907 color: #FFF;
692 908 background: #2E3243;
693 - border-left: 1px solid rgba(255, 255, 255, 0.2);
694 - box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.1) inset, inset -1px 0 0 rgba(255, 255, 255, 0.2);
909 + box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.1) inset;
695 910 z-index: 2;
696 911 -webkit-transition: all .275s;
697 912 transition: all .275s;
913 + cursor: pointer;
698 914 }
699 -.imagify-bulk-submit .imagify-inline-options input[type="radio"]:not(:checked) + label,
700 -.imagify-bulk-submit .imagify-inline-options input[type="radio"]:checked + label {
701 - margin-bottom: 1.75em;
702 -}
915 +
703 916 .imagify-inline-options input[type="radio"]:not(:checked) + label:first-of-type,
704 917 .imagify-inline-options input[type="radio"]:checked + label:first-of-type {
705 918 border-radius: 3px 0 0 3px;
706 919 }
920 +
707 921 .imagify-inline-options input[type="radio"]:not(:checked) + label:last-of-type,
708 922 .imagify-inline-options input[type="radio"]:checked + label:last-of-type {
709 923 border-radius: 0 3px 3px 0;
710 924 }
@@ -712,175 +926,82 @@
712 926 .imagify-inline-options input[type="radio"]:checked + label {
713 927 background: #8BC34A
714 928 }
715 929
930 +.imagify-inline-options input[type="radio"]:disabled + label {
931 + background: #ccc;
932 + color: #999;
933 + cursor:not-allowed;
934 +}
935 +
716 936 .imagify-inline-options .imagify-info {
717 937 margin-top: 15px;
718 938 }
719 -.imagify-btn-info {
720 - display: block;
721 - font-size: 0.7em;
722 - letter-spacing: 0;
723 - line-height: 1;
724 - text-transform: none;
939 +
940 +/**
941 + * Account information columns (Settings & Bulk)
942 + */
943 +.imagify-col.imagify-col.imagify-account-info-col,
944 +.imagify-account-info-col {
945 + width: 380px;
946 + max-width: 100%;
947 + padding: 0 20px 0 0;
725 948 }
726 -
727 -/* Some inputs */
728 -#describe-resize-larger input {
729 - width: 5em;
949 +.imagify-col.imagify-col.imagify-shared-with-account-col,
950 +.imagify-shared-with-account-col {
951 + width: calc(100% - 380px);
952 + padding: 0;
730 953 }
731 954
732 -/* Ads & columns */
733 -.imagify-col {
734 - overflow: hidden;
955 +.imagify-account-info-col .imagify-options-title {
956 + padding: 24px 26px;
957 + color: #FFF;
958 + background: #1F2332;
735 959 }
736 -.imagify-sidebar {
737 - float: right;
738 - width: 280px;
739 - margin-left: 25px;
960 +.imagify-block-secondary {
961 + padding: 26px 26px 35px;
962 + border: 1px solid #75A345;
963 + background: #8BC34A;
964 + border-radius: 3px;
965 + color: #FFF;
740 966 }
741 -.imagify-sidebar-section {
742 - border: 1px solid #BBB;
743 - background: #FFF;
967 +.imagify-block-secondary.imagify-block-secondary p,
968 +.imagify-account-info-col .imagify-block-secondary.imagify-block-secondary h3 {
969 + color: inherit;
744 970 }
745 -.imagify-sidebar-section + .imagify-sidebar-section {
746 - margin-top: 2em;
971 +.imagify-account-info-col .imagify-col-content h3:first-child {
972 + margin-top: 0;
747 973 }
748 -@media (max-width: 760px) {
749 - .imagify-settings {
750 - display: flex;
751 - flex-direction: column;
752 - }
753 - .imagify-sidebar {
754 - order: 2;
755 - float: none;
756 - width: auto;
757 - margin-left: 0;
758 - margin-top: 25px;
759 - }
760 - .wp-media-products {
761 - text-align: center;
762 - }
763 - .wp-media-products li {
764 - display: inline-block;
765 - width: 100%;
766 - max-width: 276px;
767 - }
974 +.imagify-account-info-col .imagify-col-content h3 {
975 + font-size: 19px;
768 976 }
769 -.imagify-sidebar-title {
770 - display: block;
771 - padding: 20px 15px;
772 - border-bottom: 1px solid #BBB;
773 - font-size: 14px;
774 - font-weight: bold;
775 - color: #23282d;
776 - background: #F2F5F7;
977 +.imagify-account-info-col .imagify-col-content p {
978 + margin: 1.5em 0;
777 979 }
778 -.imagify-sidebar-title img {
779 - vertical-align: top;
780 - margin-right: 5px;
781 -}
782 -.imagify-sidebar .wp-media-products {
980 +.imagify-account-info-col .imagify-col-content p:first-child {
783 981 margin-top: 0;
784 - margin-bottom: -.5em;
785 982 }
786 -.imagify-sidebar .wp-media-products .links {
787 - display: block;
788 - padding: 85px 25px 24px;
789 - text-align: center;
790 - background-color: #2E3243;
791 - background-size: contain;
792 - background-repeat: no-repeat;
793 - background-position: 50% 0;
794 - text-decoration: none;
795 -}
796 -.imagify-sidebar .wp-media-products .links p {
797 - margin: 1.5em auto;
798 - color: #FFF;
799 -}
800 -.imagify-sidebar .wp-media-products .wprocket-link {
801 - background-image: linear-gradient(to bottom, rgba(59, 30, 78 ,0), rgba(59, 30, 78 ,0) 130px, rgba(59 ,30 ,78 , 1) 210px), url("../images/sidebar-wp-rocket.jpg");
802 - background-color: #3B1E4E;
803 - background-repeat: repeat-x, no-repeat;
804 -}
805 983
806 -.imagify-sidebar-content {
807 - padding: 10px 20px;
984 +.imagify-user-plan-label {
985 + float: right;
986 + margin-top: -4px;
987 + padding: 2px 10px;
988 + border: 2px solid #40B1D0;
989 + font-size: 14px;
990 + text-transform: uppercase;
991 + letter-spacing: 0.02em;
992 + color: #40B1D0;
993 + border-radius: 3px;
808 994 }
809 995
810 -.imagify-mark-styled {
811 - display: inline-block;
812 - padding: 1px 2px 1px 4px;
813 - line-height: 1.3;
814 - font-weight: bold;
815 - background: #F7A933;
816 - transform-origine: 50% 50%;
817 - transform: rotateZ(-2deg) rotateX(-10deg) skewX(-2deg) skewY(-3deg);
818 - text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
996 +/* Content given after remote answer, avoid "flash" effect on content */
997 +.imagify-user-plan-label:empty {
998 + display: none;
819 999 }
820 -.imagify-mark-styled span {
821 - display: inline-block;
822 - transform: rotateZ(2deg) rotateX(10deg) skewX(2deg) skewY(3deg);
823 -}
824 1000
825 -.imagify-discount-code {
826 - margin: 0.35em 0 .5em;
827 - display: block;
828 - font-size: 2em;
829 - letter-spacing: .05em;
830 - font-weight: bold;
831 - text-align: center;
832 - text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
833 -}
834 -.imagify-big-text {
835 - font-size: 15px;
836 - font-weight: bold;
837 -}
838 -.imagify-big-text strong {
839 - font-size: 20px;
840 -}
841 -a.btn-rocket {
842 - display: block;
843 - font-size: 1.15em;
844 - padding: 12px;
845 - background: #F7A933;
846 - box-shadow: 0 3px 0 #D69626;
847 - border-radius: 3px;
848 - color: #FFF;
849 - text-transform: uppercase;
850 - font-weight: bold;
851 - text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
852 - text-decoration: none;
853 -}
854 -a.btn-rocket:hover,
855 -a.btn-rocket:focus {
856 - background: darkorange;
857 - box-shadow: 0 3px 0 darkorange;
858 -}
859 -
860 -
861 -/*
862 - * == Welcome section
1001 +/**
1002 + * == Columns
863 1003 */
864 -
865 -.imagify-welcome {
866 - margin: 30px 20px 0 0;
867 -}
868 -.imagify-welcome .baseline {
869 - display: inline-block;
870 - margin: .2em 0 0 2em;
871 - font-size: 17px;
872 -}
873 -.imagify-welcome .imagify-logo {
874 - vertical-align: middle;
875 -}
876 -.imagify-welcome-remove {
877 - position: absolute;
878 - top: 50%; right: 15px;
879 - margin-top: -8px;
880 - color: #FFF;
881 - text-decoration: none;
882 -}
883 1004 .imagify-columns {
884 1005 overflow: hidden;
885 1006 padding: 15px 0;
886 1007 counter-reset: cols;
@@ -894,19 +1015,17 @@
894 1015 .imagify-columns .col-1-3 {
895 1016 width: 33.333%;
896 1017 padding-left: 28px;
897 1018 }
1019 +.imagify-columns .col-2-3 {
1020 + width: 66.666%;
1021 + padding-left: 28px
1022 +}
898 1023 .imagify-columns .col-1-2 {
899 1024 width: 50%;
900 1025 padding: 0 20px;
901 1026 }
902 -.imagify-columns .col-informations {
903 - width: 41.6%;
904 - padding-right: 30px;
905 -}
906 -.imagify-columns .col-statistics {
907 - width: 25%;
908 -}
1027 +
909 1028 @media (max-width: 830px) {
910 1029 .imagify-columns [class^="col-"] {
911 1030 float: none;
912 1031 margin-bottom: 1.5em;
@@ -918,99 +1037,10 @@
918 1037 clear: both;
919 1038 padding-top: 1em;
920 1039 }
921 1040 }
922 -.imagify-columns [class^="col-"] img {
923 - float: left;
924 - margin-right: 18px;
925 -}
926 -.imagify-col-content {
927 - overflow: hidden;
928 -}
929 -.imagify-col-title {
930 - margin: 0 0 15px 0;
931 - font-size: 23px;
932 -}
933 -.counter .imagify-col-title:before {
934 - counter-increment: cols;
935 - content: counter(cols) ". ";
936 - color: #40B1D0;
937 -}
938 -.imagify-col-desc {
939 - color: #5F758E;
940 - margin-bottom: 2em;
941 -}
942 1041
943 -
944 -/*
945 - * == Imagify Notices
946 - */
947 -.imagify-notice.imagify-notice {
948 - position: relative;
949 - display: -webkit-box;
950 - display: -webkit-flex;
951 - display: -ms-flexbox;
952 - display: flex;
953 - padding: 0;
954 - margin: 10px 20px 10px 2px;
955 - border: 0 none;
956 - background: #2E3243;
957 - box-shadow: none;
958 - color: #FFF;
959 -}
960 -@media (max-width:782px) {
961 - .imagify-notice.imagify-notice,
962 - .imagify-welcome {
963 - margin-right: 12px;
964 - }
965 -}
966 -@media (max-width: 450px) {
967 - .imagify-notice.imagify-notice {
968 - -webkit-box-orient: vertical;
969 - -webkit-box-direction: normal;
970 - -webkit-flex-direction: column;
971 - -ms-flex-direction: column;
972 - flex-direction: column;
973 - }
974 -}
975 -.wrap .imagify-notice {
976 - margin: 5px 15px 2px;
977 - position: relative;
978 -}
979 -.imagify-notice-logo {
980 - padding: 18px 23px;
981 - background: #40B1D0;
982 -}
983 -.updated .imagify-notice-logo {
984 - background: #8BC34A;
985 -}
986 -.error .imagify-notice-logo {
987 - background: #D0021B;
988 -}
989 -
990 -.imagify-notice-title {
991 - font-size: 15px;
992 -}
993 -
994 -.imagify-notice-content {
995 - padding: 5px 23px;
996 -}
997 -.imagify-notice-content.imagify-notice-content p {
998 - margin: 0.65em 0;
999 -}
1000 -.imagify-notice a {
1001 - color: #40B1D0;
1002 -}
1003 -.imagify-notice a:hover,
1004 -.imagify-notice a:focus {
1005 - color: #FEE102;
1006 -}
1007 -
1008 -.imagify-notice code {
1009 - background: rgba(0, 0, 0, 0.4) none repeat scroll 0 0;
1010 -}
1011 -
1012 -/*
1042 +/**
1013 1043 * == Custom column & Metabox
1014 1044 */
1015 1045 .column-imagify_optimized_file.column-imagify_optimized_file {
1016 1046 width: 300px;
@@ -1017,16 +1047,51 @@
1017 1047 text-align: center;
1018 1048 vertical-align: middle;
1019 1049 }
1020 1050 .column-imagify_optimized_file > * {
1021 - max-width: 235px;
1051 + max-width: 21em;
1022 1052 margin: 0 auto;
1023 1053 }
1024 -ul.imagify-datas-list.imagify-datas-list {
1025 - margin: 0 auto;
1026 - color: #555;
1027 - font-size: 10px;
1054 +@media (min-width: 1151px) and (max-width: 1800px) {
1055 + .column-imagify_optimized_file.column-imagify_optimized_file {
1056 + width: 21em;
1057 + }
1028 1058 }
1059 +@media (min-width: 783px) and (max-width: 1150px) {
1060 + .column-imagify_optimized_file.column-imagify_optimized_file {
1061 + width: 13em;
1062 + }
1063 + table.media .column-title .has-media-icon ~ .row-actions.row-actions {
1064 + margin-left: 0;
1065 + }
1066 +}
1067 +@media (max-width: 782px) {
1068 + table.media .column-imagify_optimized_file.column-imagify_optimized_file {
1069 + text-align: left;
1070 + }
1071 + table.media .imagify-datas-more-action,
1072 + table.media .imagify-datas-actions-links {
1073 + text-align: center;
1074 + }
1075 + table.media .column-imagify_optimized_file > *,
1076 + table.media .column-imagify_optimized_file .imagify-datas-actions-links a {
1077 + max-width: 100%;
1078 + margin-left: 0;
1079 + }
1080 +}
1081 +@media (min-width: 783px) and (max-width: 1150px), (max-width: 360px) {
1082 + table.media .imagify-hide-if-small {
1083 + position: absolute;
1084 + margin: -1px;
1085 + padding: 0;
1086 + height: 1px;
1087 + width: 1px;
1088 + overflow: hidden;
1089 + clip: rect(0 0 0 0);
1090 + border: 0;
1091 + word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
1092 + }
1093 +}
1029 1094 .compat-field-imagify .label {
1030 1095 vertical-align: top;
1031 1096 }
1032 1097 .compat-field-imagify ul.imagify-datas-list {
@@ -1032,8 +1097,12 @@
1032 1097 .compat-field-imagify ul.imagify-datas-list {
1033 1098 margin-top: 7px;
1034 1099 font-size: 11px;
1035 1100 }
1101 +ul.imagify-datas-list.imagify-datas-list {
1102 + margin: 0 auto;
1103 + color: #555;
1104 +}
1036 1105 ul.imagify-datas-list .big {
1037 1106 font-size: 12px;
1038 1107 color: #40B1D0;
1039 1108 }
@@ -1039,15 +1108,8 @@
1039 1108 }
1040 1109 .imagify-data-item {
1041 1110 overflow: hidden;
1042 1111 }
1043 -.imagify-data-item .imagify-chart {
1044 - display: inline-block;
1045 - top: 1px;
1046 - width: 20px;
1047 - vertical-align: middle;
1048 - margin-bottom: 0;
1049 -}
1050 1112 li.imagify-data-item {
1051 1113 clear: both;
1052 1114 margin-bottom: 2px;
1053 1115 }
@@ -1053,16 +1115,17 @@
1053 1115 }
1054 1116 ul.imagify-datas-list .imagify-data-item span.data,
1055 1117 ul.imagify-datas-list .imagify-data-item strong {
1056 1118 float: left;
1057 - width: 50%;
1119 + width: 38%;
1058 1120 -webkit-box-sizing: border-box;
1059 1121 -moz-box-sizing: border-box;
1060 1122 box-sizing: border-box;
1061 1123 }
1062 1124 ul.imagify-datas-list .imagify-data-item span.data {
1125 + width: 62%;
1126 + padding-right: 5px;
1063 1127 text-align: left;
1064 - padding-right: 5px;
1065 1128 }
1066 1129 .compat-field-imagify .imagify-datas-list .imagify-data-item .data {
1067 1130 width: 130px;
1068 1131 text-align: left;
@@ -1067,21 +1130,24 @@
1067 1130 width: 130px;
1068 1131 text-align: left;
1069 1132 font-weight: bold;
1070 1133 }
1134 +ul.imagify-datas-list .imagify-data-item strong {
1135 + text-align: left;
1136 + padding-left: 5px;
1137 +}
1071 1138 .media-sidebar .imagify-datas-list .imagify-data-item .data {
1072 1139 width: auto;
1073 1140 float: none;
1074 1141 }
1075 -ul.imagify-datas-list .imagify-data-item strong {
1076 - text-align: left;
1077 - padding-left: 5px;
1078 -}
1079 1142 .media-sidebar .imagify-datas-list .imagify-data-item strong {
1143 + display: inline-block;
1080 1144 width: auto;
1081 1145 float: none;
1082 1146 }
1083 -
1147 +.media-sidebar .imagify-datas-list .imagify-data-item .imagify-chart {
1148 + float: left;
1149 +}
1084 1150 .imagify-datas-more-action.imagify-datas-more-action {
1085 1151 margin: .4em auto;
1086 1152 background: linear-gradient(to bottom, transparent, transparent 49%, rgba(0,0,0,.075) 50%, rgba(0,0,0,.075) 58%, transparent 58%, transparent);
1087 1153 }
@@ -1113,10 +1179,10 @@
1113 1179 }
1114 1180 .imagify-datas-more-action .the-text {
1115 1181 display: inline-block;
1116 1182 vertical-align: middle;
1117 - height: 20px;
1118 - line-height: 20px;
1183 + height: auto;
1184 + line-height: inherit;
1119 1185 }
1120 1186
1121 1187 ul.imagify-datas-details.imagify-datas-details {
1122 1188 margin: .7em auto;
@@ -1131,10 +1197,17 @@
1131 1197 .imagify-datas-actions-links {
1132 1198 overflow: hidden;
1133 1199 border-top: 2px solid transparent;
1134 1200 padding-top: 5px;
1135 - font-size: 8px;
1201 + font-size: 11px;
1136 1202 }
1203 +.nggform .imagify-datas-actions-links {
1204 + position: relative;
1205 + z-index: 2;
1206 +}
1207 +.nggform .row-actions {
1208 + z-index: 1;
1209 +}
1137 1210 .imagify-datas-actions-links a {
1138 1211 position: relative;
1139 1212 display: inline-block;
1140 1213 padding-left: 17px;
@@ -1147,12 +1220,17 @@
1147 1220 .misc-pub-imagify .imagify-datas-actions-links {
1148 1221 border-top: 2px solid #f2f2f2;
1149 1222 padding-bottom: 5px;
1150 1223 }
1224 +/* Library */
1225 +.column-imagify_optimized_file .imagify-datas-actions-links a {
1226 + margin: 0 .7em;
1227 + padding-left: 15px;
1228 +}
1229 +
1151 1230 /* Media edition */
1152 1231 .compat-field-imagify .imagify-datas-actions-links a,
1153 1232 .misc-pub-imagify .imagify-datas-actions-links a {
1154 - font-size: 10px;
1155 1233 float: left;
1156 1234 width: 50%;
1157 1235 }
1158 1236 .media-sidebar .compat-field-imagify .imagify-datas-actions-links a,
@@ -1160,12 +1238,11 @@
1160 1238 display: block;
1161 1239 width: auto;
1162 1240 float: none;
1163 1241 }
1164 -/* Medias list */
1165 -.column-imagify_optimized_file .imagify-datas-actions-links a {
1166 - margin: 0 .7em;
1167 - padding-left: 15px;
1242 +.media-sidebar .compat-field-imagify .imagify-datas-actions-links br,
1243 +.submitbox .misc-pub-imagify .imagify-datas-actions-links br {
1244 + display: none;
1168 1245 }
1169 1246 .imagify-datas-actions-links a:only-child {
1170 1247 float: none;
1171 1248 width: auto;
@@ -1180,68 +1257,16 @@
1180 1257 margin-right: 2px;
1181 1258 font-size: 11px;
1182 1259 }
1183 1260
1184 -/*
1261 +/**
1185 1262 * == Bulk page
1186 1263 */
1187 1264
1188 -.imagify-title > h1 {
1189 - padding: 0;
1190 -}
1191 -.imagify-title-right {
1192 - display: table;
1193 - float: right;
1194 - margin-top: -10px;
1195 -}
1196 -.imagify-title-right p {
1197 - margin: 0;
1198 -}
1199 -.imagify-title-right a {
1200 - font-weight: bold;
1201 - text-decoration: none;
1202 -}
1203 -.imagify-title-right > div {
1204 - display: table-cell;
1205 - vertical-align: middle;
1206 -}
1207 -.imagify-title-right .dashicons-arrow-down-alt2 {
1208 - vertical-align: -4px;
1209 - margin-left: 2px;
1210 -}
1211 -@media (max-width: 1200px) {
1212 - .imagify-bulk .imagify-title {
1213 - display: -webkit-box;
1214 - display: -webkit-flex;
1215 - display: -ms-flexbox;
1216 - display: flex;
1217 - -webkit-box-orient: vertical;
1218 - -webkit-box-direction: normal;
1219 - -webkit-flex-direction: column;
1220 - -ms-flex-direction: column;
1221 - flex-direction: column;
1222 - }
1223 - .imagify-title-right {
1224 - -webkit-box-ordinal-group: 3;
1225 - -webkit-order: 2;
1226 - -ms-flex-order: 2;
1227 - order: 2;
1228 - margin-top: 20px;
1229 - }
1230 -}
1231 1265 .imagify-account,
1232 1266 .imagify-account-link {
1233 1267 padding-right: 15px;
1234 1268 }
1235 -.imagify-sep-v {
1236 - width: 1px;
1237 - background: rgba(255, 255, 255, .2);
1238 -}
1239 -.imagify-credit-left {
1240 - position: relative;
1241 - min-width: 280px;
1242 - padding-left: 15px;
1243 -}
1244 1269 .imagify-meteo-icon {
1245 1270 display: inline-block;
1246 1271 height: 38px;
1247 1272 vertical-align: middle;
@@ -1250,96 +1275,30 @@
1250 1275 .imagify-user-plan {
1251 1276 color: #40b1d0;
1252 1277 }
1253 1278
1254 -@media (max-width: 630px) {
1255 - .imagify-title-right {
1256 - display: block;
1257 - width: auto;
1258 - }
1259 - .imagify-title-right > div {
1260 - display: block;
1261 - width: auto;
1262 - margin-top: 10px;
1263 - max-width: 100%;
1264 - }
1265 - .imagify-credit-left {
1266 - padding-left: 0;
1267 - }
1268 -}
1269 -/*
1270 -.imagify-meteo-icon:after {
1271 - opacity: 0;
1272 - visibility: hidden;
1273 - content: attr(data-title);
1274 - position: absolute;
1275 - top: 100%;
1276 - left: 50%;
1277 - font-size: 11px;
1278 - line-height: 1.3;
1279 - width: 150px;
1280 - margin-left: -80px;
1281 - padding: 6px 12px;
1282 - background: #60758d;
1283 - border-radius: 4px;
1284 - -webkit-transition: opacity .3s;
1285 - transition: opacity .3s;
1286 -}
1287 -.imagify-meteo-icon:hover:after,
1288 -.imagify-meteo-icon:focus:after {
1289 - opacity: 1;
1290 - visibility: visible;
1291 -}
1292 -*/
1293 1279 .imagify-meteo-title.imagify-meteo-title {
1294 1280 color: #FFF;
1295 1281 font-size: 17px;
1296 1282 }
1297 -.imagify-space-left {
1298 - display: inline-block;
1299 - min-height: 38px;
1300 - min-width: 245px;
1301 - vertical-align: middle;
1302 -}
1303 1283 .imagify-space-left > p {
1304 1284 color: #FFF;
1305 1285 }
1306 -[class^="imagify-bar-"],
1307 -#wp-admin-bar-imagify-profile [class^="imagify-bar-"] {
1286 +[class^="imagify-bar-"] {
1308 1287 position: relative;
1309 - height: 15px;
1288 + height: 8px;
1310 1289 width: 100%;
1311 - background: #60758D;
1290 + background: #343A49;
1312 1291 color: #FFF;
1313 1292 font-size: 10px;
1314 1293 }
1315 -.base-transparent {
1316 - background: transparent;
1294 +
1295 +.imagify-progress {
1296 + height: 8px;
1317 1297 }
1318 -[class^="imagify-bar-"].right-outside-number {
1319 - -webkit-box-sizing: border-box;
1320 - box-sizing: border-box;
1321 - padding-right: 45px;
1298 +.imagify-progress {
1299 + transition: width .3s;
1322 1300 }
1323 -.right-outside-number .imagify-barnb {
1324 - display: block;
1325 - margin-right: -45px;
1326 - text-align: right;
1327 - font-weight: bold;
1328 - line-height: 15px;
1329 -}
1330 -.imagify-progress-value,
1331 -#wp-admin-bar-imagify-profile .imagify-progress-value {
1332 - position: absolute;
1333 - top: 0; right: 0; left: 0; bottom: 0;
1334 - text-align: center;
1335 - line-height: 13px;
1336 - font-weight: bold;
1337 -}
1338 -.imagify-progress,
1339 -#wp-admin-bar-imagify-profile .imagify-progress {
1340 - height: 15px;
1341 -}
1342 1301 .imagify-bar-positive .imagify-progress {
1343 1302 background: #8CC152;
1344 1303 }
1345 1304 .imagify-bar-positive .imagify-barnb {
@@ -1344,110 +1303,29 @@
1344 1303 }
1345 1304 .imagify-bar-positive .imagify-barnb {
1346 1305 color: #8CC152;
1347 1306 }
1307 +.imagify-bar-primary .imagify-progress {
1308 + background: #40B1D0;
1309 +}
1310 +.imagify-bar-primary .imagify-barnb {
1311 + color: #40B1D0;
1312 +}
1348 1313 .imagify-bar-negative .imagify-progress {
1349 - background: #73818C;
1314 + background: #D2D3D6;
1350 1315 }
1351 1316 .imagify-bar-negative .imagify-barnb {
1352 - color: #73818C;
1317 + color: #7A8996;
1353 1318 }
1354 1319 .imagify-bar-neutral .imagify-progress {
1355 1320 background: #F5A623;
1356 1321 }
1357 1322 .imagify-space-left .imagify-bar-negative .imagify-progress {
1358 - background: #D0021B;
1323 + background: #ffffff;
1359 1324 }
1360 1325
1361 -/* admin bar version */
1362 -#wpadminbar #wp-admin-bar-imagify-profile * {
1363 - line-height: 1.5;
1364 - white-space: initial;
1365 -}
1366 -#wpadminbar #wp-admin-bar-imagify .ab-submenu {
1367 - padding-bottom: 0;
1368 -}
1369 -#wpadminbar #wp-admin-bar-imagify-profile .ab-item {
1370 - height: auto;
1371 - padding: 0 13px;
1372 -}
1373 -#wpadminbar #wp-admin-bar-imagify-profile {
1374 - min-width: 200px;
1375 - padding: 15px 0 10px;
1376 - margin-top: 0.7em;
1377 - background: #222;
1378 -}
1379 -#wp-admin-bar-imagify .dashicons {
1380 - font-family: "dashicons";
1381 - font-size: 18px;
1382 - vertical-align: middle;
1383 - margin: 0 5px 0 0;
1384 -}
1385 -#wp-admin-bar-imagify .button-text {
1326 +.imagify-btn-ghost {
1386 1327 display: inline-block;
1387 - vertical-align: middle;
1388 -}
1389 -#wp-admin-bar-imagify .imagify-abq-row {
1390 - display: table;
1391 - width: 100%;
1392 -}
1393 -#wp-admin-bar-imagify .imagify-abq-row + .imagify-abq-row {
1394 - margin-top: .75em;
1395 -}
1396 -#wp-admin-bar-imagify .imagify-abq-row > * {
1397 - display: table-cell;
1398 -}
1399 -#wp-admin-bar-imagify-profile .imagify-meteo-icon {
1400 - padding-right: 7px;
1401 -}
1402 -#wp-admin-bar-imagify-profile .imagify-meteo-icon img {
1403 - width: 37px;
1404 -}
1405 -#wp-admin-bar-imagify-profile .imagify-meteo-title {
1406 - font-size: 17px;
1407 -}
1408 -#wp-admin-bar-imagify-profile .imagify-meteo-subs {
1409 - color: #72889F;
1410 -}
1411 -#wpadminbar #wp-admin-bar-imagify-profile strong {
1412 - font-weight: bold;
1413 -}
1414 -#wpadminbar #wp-admin-bar-imagify-profile .imagify-user-plan,
1415 -#wpadminbar #wp-admin-bar-imagify-profile a {
1416 - padding: 0;
1417 - color: #40B1D0;
1418 -}
1419 -#wpadminbar #wp-admin-bar-imagify-profile .imagify-account-link {
1420 - display: table;
1421 -}
1422 -#wpadminbar #wp-admin-bar-imagify-profile .imagify-account-link > * {
1423 - display: table-cell;
1424 -}
1425 -#wpadminbar #wp-admin-bar-imagify-profile .imagify-space-left {
1426 - max-width: 210px;
1427 - min-width: 210px;
1428 - width: 210px;
1429 -}
1430 -#wpadminbar #wp-admin-bar-imagify-profile .imagify-space-left p {
1431 - font-size: 12px;
1432 -}
1433 -#wp-admin-bar-imagify-profile .imagify-error,
1434 -#wp-admin-bar-imagify-profile .imagify-warning {
1435 - padding: 10px;
1436 - margin: 0 -13px -13px;
1437 -}
1438 -#wp-admin-bar-imagify-profile .imagify-error p + p,
1439 -#wp-admin-bar-imagify-profile .imagify-warning p + p {
1440 - margin-top: .5em;
1441 -}
1442 -#wp-admin-bar-imagify-profile .imagify-error p + p + p,
1443 -#wp-admin-bar-imagify-profile .imagify-warning p + p + p {
1444 - margin-top: 1em;
1445 -}
1446 -
1447 -.btn-ghost,
1448 -#wpadminbar #wp-admin-bar-imagify-profile .btn-ghost {
1449 - display: inline-block;
1450 1328 height: auto;
1451 1329 padding: 7px 10px;
1452 1330 border: 1px solid #FFF;
1453 1331 text-align: center;
@@ -1456,508 +1334,51 @@
1456 1334 border-radius: 3px;
1457 1335 transition: all .275s;
1458 1336 }
1459 1337
1460 -.btn-ghost:hover,
1461 -.btn-ghost:focus,
1462 -#wpadminbar #wp-admin-bar-imagify-profile .btn-ghost:hover,
1463 -#wpadminbar #wp-admin-bar-imagify-profile .btn-ghost:focus {
1338 +.imagify-btn-ghost:hover,
1339 +.imagify-btn-ghost:focus {
1464 1340 background: #FFF;
1465 1341 color: #888;
1466 1342 }
1467 1343
1468 -.txt-center {
1469 - text-align: center;
1344 +/* Some Errors */
1345 +.imagify-error {
1346 + background: #D0021B;
1347 + color: #FFF;
1470 1348 }
1471 -
1472 -.imagify-list-dash li {
1473 - position: relative;
1474 - padding-left: 24px;
1475 -}
1476 -.imagify-list-dash li:before {
1477 - content: "";
1478 - position: absolute;
1479 - left: 0; top: 9px;
1480 - height: 1px; width: 12px;
1481 - background: #5f758e;
1482 -}
1483 -
1484 -.imagify-sub-title.imagify-sub-title {
1485 - font-size: 23px;
1486 - background: #FFF;
1487 - color: #2E3243;
1488 - border-left: 1px solid #D9D9D9;
1489 - border-right: 1px solid #D9D9D9;
1490 - font-weight: lighter;
1491 -}
1492 -.imagify-sub-title .icon-bulk {
1493 - margin-right: 10px;
1494 - vertical-align: middle;
1495 -}
1496 -.imagify-sub-title .title-text {
1349 +.imagify-settings-section .imagify-error {
1497 1350 display: inline-block;
1498 - line-height: 1;
1499 - vertical-align: middle;
1500 -}
1501 -.imagify-bulk .imagify-settings-section {
1502 - border: 1px solid #D9D9D9;
1503 - border-top: 0;
1504 - background: #F2F5F7;
1505 - color: #4A4A4A;
1506 -}
1507 -.imagify-bulk .imagify-settings-section p,
1508 -.imagify-bulk .imagify-settings-section li,
1509 -.imagify-bulk .imagify-settings-section h3 {
1510 - color: #4A4A4A;
1511 -}
1512 -.imagify-bulk .imagify-settings-section h3 {
1513 - margin-bottom: 2em;
1514 -}
1515 -
1516 -.imagify-bulk-submit {
1517 - margin-top: 4em;
1518 -}
1519 -#imagify-bulk-action {
1520 - float: left;
1521 -}
1522 -#imagify-bulk-action + .imagify-tooltips {
1523 - overflow: hidden;
1524 - display: block;
1525 -}
1526 -.imagify-title .imagify-tooltips {
1527 - position: absolute;
1528 - top: 100%;
1529 - left: 0;
1530 -}
1531 -.imagify-tooltips .icon-round {
1532 - float: left;
1533 - display: inline-block;
1534 - width: 28px;
1535 - height: 28px;
1536 - border: 1px solid #FFF;
1537 - margin-right: 8px;
1538 - margin-bottom: 8px;
1539 - font-size: 17px;
1540 - font-style: italic;
1541 - line-height: 29px;
1542 - font-weight: bold;
1543 - text-align: center;
1544 - border-radius: 50%;
1545 -}
1546 -.imagify-tooltips .tooltip-content {
1547 - display: block;
1548 - position: relative;
1549 - max-width: 250px;
1550 - padding: 7px 15px 8px;
1551 - background: #2e3242;
1552 - color: #FFF;
1553 - font-size: 10px;
1351 + padding: 7px 10px;
1352 + margin: 10px 0 0 45px;
1554 1353 border-radius: 3px;
1555 1354 }
1556 -.imagify-tooltips.right .tooltip-content {
1557 - margin-left: 12px;
1355 +.imagify-settings-section .imagify-error code {
1356 + font-weight: normal;
1558 1357 }
1559 -.imagify-tooltips.bottom .tooltip-content {
1560 - margin-top: 4px;
1561 -}
1562 -.imagify-inline-options label .tooltip-content {
1563 - position: absolute;
1564 - left: 0; right: 0;
1565 - top: 100%;
1566 - text-transform: none;
1567 - font-size: 10px;
1568 - letter-spacing: 0;
1569 - text-align: center;
1570 -}
1571 -.imagify-tooltips .tooltip-content:after {
1572 - content: "";
1573 - position: absolute;
1574 -}
1575 -.imagify-tooltips.right .tooltip-content:after {
1576 - top: 16px; left: -6px;
1577 - border-right: 8px solid #2e3242;
1578 - border-top: 6px solid transparent;
1579 - border-bottom: 6px solid transparent;
1580 -}
1581 -.imagify-tooltips.bottom .tooltip-content:after {
1582 - top: -5px; left: 50%;
1583 - margin-left: -3px;
1584 - border-bottom: 6px solid #2e3242;
1585 - border-left: 6px solid transparent;
1586 - border-right: 6px solid transparent;
1587 -}
1588 -.imagify-space-tooltips .tooltip-content {
1589 - max-width: 280px;
1590 - margin-top: 20px;
1591 - margin-left: 0;
1592 - padding: 5px 15px 5px;
1593 - font-size: 13px;
1594 - background: #40B1D0;
1595 - box-shadow: 0 3px 0 #338EA6;
1596 -}
1597 -.imagify-space-tooltips .tooltip-content:after {
1598 - top: -14px;
1599 - left: 50%;
1600 - margin-left: -7px;
1601 - border: 0 none;
1602 - border-bottom: 15px solid #40B1D0;
1603 - border-left: 15px solid transparent;
1604 - border-right: 15px solid transparent;
1605 -}
1606 -.tooltip-content.tooltip-table {
1607 - display: table;
1608 - width: 100%;
1609 -}
1610 -.tooltip-content.tooltip-table > * {
1611 - display: table-cell;
1612 - vertical-align: middle;
1613 -}
1614 -.tooltip-content .cell-icon {
1615 - width: 28px;
1616 -}
1617 -.tooltip-content .cell-icon .icon {
1618 - margin-bottom: 0;
1619 -}
1620 -.tooltip-content .cell-text {
1621 - padding: 5px 10px 5px 0;
1622 - line-height: 1.3;
1623 -}
1624 -.tooltip-content .cell-sep {
1625 - width: 1px;
1626 - background: rgba(255, 255, 255, .4);
1627 -}
1628 -.tooltip-content .cell-cta {
1629 - padding-left: 10px;
1630 -}
1631 -.tooltip-content .cell-cta a {
1632 - display: block;
1633 - color: #FFF;
1634 - width: 100%;
1635 - height: 100%;
1636 - white-space: nowrap;
1637 -}
1638 -
1639 -.imagify-number-you-optimized .number {
1640 - display: table-cell;
1641 - padding-right: 15px;
1642 - font-size: 36px;
1643 - font-weight: bold;
1644 - line-height: 1.1;
1645 - vertical-align: middle;
1646 -}
1647 -.imagify-number-you-optimized .text {
1648 - display: table-cell;
1649 - vertical-align: middle;
1650 - overflow: hidden;
1651 - font-size: 12px;
1652 -}
1653 -.imagify-number-you-optimized .text br {
1358 +.imagify-settings-section .imagify-error.hidden {
1654 1359 display: none;
1655 1360 }
1656 -.imagify-number-you-optimized > p {
1657 - display: table;
1658 -}
1659 -.imagify-number-you-optimized {
1660 - padding-bottom: 0.85em;
1661 - margin-bottom: 1.35em;
1662 - overflow: hidden;
1663 - border-bottom: 1px solid rgba(0,0,0, 0.05);
1664 -}
1665 -.imagify-bars p {
1666 - font-weight: bold;
1667 - font-size: 12px;
1668 - margin-bottom: 0;
1669 -}
1670 -.imagify-bars + .imagify-number-you-optimized {
1671 - border-bottom: 0;
1672 - padding-top: 0.85em;
1673 -}
1674 -.imagify-bars + .imagify-number-you-optimized p {
1675 - color: #46b1ce;
1676 -}
1677 -
1678 -/*
1679 - * == Bulk table
1680 - */
1681 -.imagify-bulk-table {
1682 - margin-top: 2em;
1683 - max-height: 600px;
1684 - max-height: 60vh;
1685 - overflow: auto;
1686 -}
1687 -.imagify-bulk-table table {
1688 - width: 100%;
1689 - border-spacing: 0;
1690 - border-collapse: collapse;
1691 - border: 1px solid #D3D3D3;
1692 -}
1693 -.imagify-bulk-table td {
1694 - padding: 8px 15px;
1695 -}
1696 -.imagify-bulk-table thead tr,
1697 -.imagify-bulk-table thead th {
1698 - background: #2E3242;
1699 -}
1700 -.imagify-bulk-table tfoot tr,
1701 -.imagify-bulk-table tfoot th {
1702 - background: #73818C;
1703 -}
1704 -.imagify-bulk-table thead th {
1705 - padding: 14px 15px;
1706 - text-align: left;
1707 - color: #F2F5F7;
1708 - font-weight: bold;
1709 - font-size: 14px;
1710 -}
1711 -.imagify-bulk-table tfoot td {
1712 - padding: 14px 15px;
1713 - color: #F9FAFA;
1714 -}
1715 -
1716 -.imagify-bulk-table tbody tr,
1717 -.imagify-bulk-table tbody td {
1718 - background: #FFF;
1719 -}
1720 -.imagify-bulk-table tbody tr:nth-child(odd),
1721 -.imagify-bulk-table tbody tr:nth-child(odd) td {
1722 - background: #F2F5F7;
1723 -}
1724 -
1725 -.imagify-bulk-table .imagify-row-progress {
1726 - display: none;
1727 -}
1728 -
1729 -.imagify-bulk-table .imagify-row-progress,
1730 -.imagify-bulk-table .imagify-row-progress td {
1731 - height: 15px;
1732 - padding: 0;
1733 -}
1734 -.imagify-bulk-table .imagify-no-uploaded-yet td {
1735 - height: 200px;
1736 - font-size: 17px;
1737 - letter-spacing: .1em;
1738 - word-spacing: .12em;
1739 - vertical-align: middle;
1740 - text-transform: uppercase;
1741 - font-weight: bold;
1742 - text-align: center;
1743 - color: #999;
1744 - background-color: #FFF;
1745 -}
1746 -
1747 -.imagify-row-complete {
1748 - padding: 35px 20px;
1749 - margin-top: 2em;
1750 - background: #8BC34A;
1751 - color: #FFF;
1752 - text-shadow: 0 0 2px rgba(0,0,0,.1);
1753 -}
1754 -.imagify-row-complete .imagify-ac-chart {
1755 - margin-top: 3px;
1756 -}
1757 -.imagify-row-complete p {
1758 - color: #FFF;
1759 - margin: 0;
1760 -}
1761 -
1762 -@-webkit-keyframes congrate {
1763 - 0% {
1764 - opacity: 0;
1765 - -webkit-transform: scale(1);
1766 - }
1767 - 50% {
1768 - -webkit-transform: scale(1.05);
1769 - opacity: 1;
1770 - }
1771 - 100% {
1772 - -webkit-transform: scale(1);
1773 - opacity: 1;
1774 - }
1775 -}
1776 -​
1777 -@keyframes congrate {
1778 - 0% {
1779 - opacity: 0;
1780 - transform: scale(1);
1781 - }
1782 - 50% {
1783 - transform: scale(1.05);
1784 - opacity: 1;
1785 - }
1786 - 100% {
1787 - transform: scale(1);
1788 - opacity: 1;
1789 - }
1790 -}
1791 -
1792 -
1793 -.imagify-row-complete.done {
1794 - -webkit-animation: congrate 500ms ease-in-out;
1795 - animation: congrate 500ms ease-in-out;
1796 -}
1797 -
1798 -.imagify-all-complete {
1799 - margin: 1.5em 0;
1800 -}
1801 -.imagify-all-complete > div {
1802 - display: inline-block;
1803 - vertical-align: middle;
1804 -}
1805 -.imagify-ac-report {
1806 - min-width: 310px;
1807 -}
1808 -.imagify-ac-chart {
1809 - width: 46px;
1810 - height: 46px;
1811 - float: left;
1812 - margin: 0 20px 0 10px;
1813 -}
1814 -.imagify-ac-report-text {
1815 - overflow: hidden;
1816 -}
1817 -.imagify-ac-report-text p {
1818 - line-height: 1.3;
1819 -}
1820 -.imagify-ac-rt-big {
1821 - font-weight: bold;
1822 - font-size: 24px;
1823 - letter-spacing: 0.15em;
1824 - word-spacing: 0.15em;
1825 - text-transform: uppercase;
1826 -}
1827 -.imagify-ac-share {
1828 - text-align: right;
1829 -}
1830 -.imagify-ac-share-content {
1831 - display: inline-block;
1832 - padding: 10px 15px;
1833 - background: rgba(255,255,255,.2);
1834 -}
1835 -.imagify-ac-share-content > * {
1836 - display: inline-block;
1837 - vertical-align: middle;
1838 -}
1839 -.imagify-bulk-table .imagify-ac-share-content p {
1840 - margin-right: 5px;
1841 -}
1842 -.imagify-share-networks,
1843 -.imagify-share-networks li {
1844 - margin: 0;
1845 -}
1846 -.imagify-share-networks li {
1847 - display: inline-block;
1848 -}
1849 -.imagify-share-networks a {
1850 - display: inline-block;
1851 - vertical-align: -7px;
1852 - margin: 0 5px;
1853 - text-decoration: none;
1854 - color: #FFF;
1855 -}
1856 -
1857 -/* TD's width */
1858 -.imagify-cell-filename {
1859 - max-width: 200px;
1860 -}
1861 -.imagify-cell-status {
1862 - max-width: 145px;
1863 -}
1864 -.imagify-cell-status .dashicons-warning {
1865 - margin-right: 2px;
1866 -}
1867 -.imagify-cell-thumbnails {
1868 - max-width: 120px;
1869 -}
1870 -
1871 -td.imagify-cell-filename {
1872 - text-overflow: clip; /* ellipsis replace all the text by ... :`/ */
1873 - white-space: nowrap;
1874 - overflow: hidden;
1875 -}
1876 -.imagify-bulk-table td.imagify-cell-totaloriginal {
1877 - padding-right: 78px;
1878 -}
1879 -
1880 -.imagiuploaded,
1881 -.imagifilename {
1882 - display: inline-block;
1883 - vertical-align: middle;
1884 -}
1885 -.imagifilename {
1886 - font-size: 12px;
1887 -}
1888 -.imagiuploaded {
1889 - width: 33px;
1890 - height: 33px;
1891 - margin-right: 5px;
1892 - margin-left: -8px;
1893 - overflow: hidden;
1894 - background: url(../images/upload-image.png) 0 0 no-repeat;
1895 - background-size: cover;
1896 -}
1897 -.imagiuploaded img {
1898 - max-widht: 100%;
1899 - height: auto;
1900 -}
1901 -
1902 -.imagistatus {
1903 - color: #8CA6B3;
1904 - text-transform: uppercase;
1905 - font-weight: bold;
1906 -}
1907 -.status-compressing {
1908 - color: #46B1CE;
1909 -}
1910 -.status-error {
1911 - color: #CE0B24;
1912 -}
1913 -.status-warning {
1914 - color: #f5a623;
1915 -}
1916 -.status-complete {
1917 - color: #8CC152;
1918 -}
1919 -.imagify-error {
1920 - background: #D0021B;
1921 - color: #FFF;
1922 -}
1923 -.imagify-warning,
1924 -#wpadminbar .imagify-warning * {
1361 +.imagify-warning {
1925 1362 background: #f5a623;
1926 1363 color: #FFF;
1927 1364 text-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
1928 1365 }
1929 -.imagify-bulk-table .imagify-cell-thumbnails {
1930 - text-align: center;
1931 -}
1932 -.imagify-cell-percentage,
1933 -.imagify-cell-savings {
1934 - color: #46B1CE;
1935 - font-weight: bold;
1936 -}
1937 -.imagify-cell-optimized {
1938 - font-weight: bold;
1939 -}
1940 1366
1941 -.imagify-cell-totaloriginal {
1942 - text-align: right;
1943 -}
1944 -
1945 -/* icon rotate */
1946 -.dashicons.rotate {
1947 - -webkit-animation: icon-rotate 2.6s infinite linear;
1948 - animation: icon-rotate 2.6s infinite linear;
1949 -}
1950 -.dashicons-admin-generic {
1951 - transform-origin: 48.75% 51.75%;
1952 -}
1953 -
1954 -
1955 -/* Imagify Modal */
1367 +/* Imagify Modal (is everywhere) */
1956 1368 .imagify-modal {
1369 + display: -webkit-box;
1370 + display: -ms-flexbox;
1957 1371 display: flex;
1372 + -webkit-box-orient: vertical;
1373 + -webkit-box-direction: normal;
1374 + -ms-flex-direction: column;
1958 1375 flex-direction: column;
1376 + -webkit-box-align: center;
1377 + -ms-flex-align: center;
1959 1378 align-items: center;
1379 + -webkit-box-pack: center;
1380 + -ms-flex-pack: center;
1960 1381 justify-content: center;
1961 1382 }
1962 1383 .js .imagify-modal {
1963 1384 display: none;
@@ -1973,9 +1394,9 @@
1973 1394 box-sizing: border-box;
1974 1395 position: relative;
1975 1396 width: 800px;
1976 1397 max-width: 95%;
1977 - max-height: 90vw;
1398 + max-height: 90vh;
1978 1399 overflow: auto;
1979 1400 padding: 20px 25px;
1980 1401 margin: 1em auto;
1981 1402 background: #FFF;
@@ -1981,9 +1402,13 @@
1981 1402 background: #FFF;
1982 1403 box-shadow: 1px 1px 4px rgba(0,0,0,.7);
1983 1404 border-radius: 3px;
1984 1405 }
1985 -#imagify-visual-comparison .imagify-modal-content {
1406 +.imagify-modal-loading .imagify-modal-content{
1407 + overflow: hidden;
1408 +}
1409 +#imagify-visual-comparison .imagify-modal-content,
1410 +.imagify-visual-comparison .imagify-modal-content {
1986 1411 max-width: 1400px;
1987 1412 background: transparent;
1988 1413 padding: 5px;
1989 1414 box-shadow: none;
@@ -2003,12 +1428,8 @@
2003 1428 font-size: 18px;
2004 1429 letter-spacing: 0.075em;
2005 1430 text-align: center;
2006 1431 }
2007 -.text-justify {
2008 - text-align: justify;
2009 -}
2010 -
2011 1432 .imagify-modal .close-btn {
2012 1433 display: none;
2013 1434 visibility: hidden;
2014 1435 position: absolute;
@@ -2018,8 +1439,11 @@
2018 1439 background: transparent none;
2019 1440 border-radius: 0;
2020 1441 cursor: pointer;
2021 1442 }
1443 +.imagify-modal .close-btn i {
1444 + margin-left: -2px;
1445 +}
2022 1446 .imagify-modal .close-btn:hover,
2023 1447 .imagify-modal .close-btn:focus {
2024 1448 color: #40b1d0;
2025 1449 }
@@ -2025,150 +1449,375 @@
2025 1449 }
2026 1450 .js .imagify-modal .close-btn {
2027 1451 display: block;
2028 1452 visibility: visible;
1453 + z-index: 12;
2029 1454 }
2030 -#imagify-visual-comparison .close-btn {
2031 - top: 50px;
2032 - right: 5px;
2033 - width: 33px;
2034 - height: 33px;
2035 - padding: 1px 0 0 2px;
2036 - border: 1px solid #F2F2F2;
2037 - color: #F2F2F2;
2038 - line-height: 19px;
1455 +
1456 +/* Attachments specifics */
1457 +.wp_attachment_image #imagify-visual-comparison .imagify-modal-content,
1458 +.imagify-visual-comparison .imagify-modal-content {
1459 + padding-top: 40px;
1460 +}
1461 +
1462 +/* Col, behavior depending on parent */
1463 +.imagify-col {
1464 + float: left;
1465 + width: 50%;
1466 + box-sizing: border-box;
1467 + -webkit-flex-basis: 50%;
1468 + -ms-flex-preferred-size: 50%;
1469 + flex-basis: 50%;
1470 +}
1471 +.imagify-col {
1472 + padding-right: 20px;
1473 +}
1474 +.imagify-col + .imagify-col {
1475 + padding-right: 0;
1476 + padding-left: 20px;
1477 +}
1478 +
1479 +.imagify-col:target {
1480 + animation: hello 1s 3 linear backwards;
1481 +}
1482 +
1483 +@keyframes hello {
1484 + 0%, 100% {
1485 + background: #FFF;
1486 + }
1487 + 50% {
1488 + background: #F4F7F9;
1489 + }
1490 +}
1491 +@media (max-width: 730px) {
1492 + .imagify-settings .imagify-documentation-link-box{
1493 + margin-top: 2em;
1494 + }
1495 +}
1496 +
1497 +@media (max-width: 782px) {
1498 + input[type="radio"], input[type="checkbox"] {
1499 + height: 1.5625rem;
1500 + width: 1.5625rem;
1501 + margin: 1px;
1502 + }
1503 + [class*="imagify-"] .button-text{
1504 + font-size: 13px;
1505 + }
1506 + .imagify-account-info-col .imagify-settings-section{
1507 + padding: 0 10px;
1508 + }
1509 + .imagify-settings-section{
1510 + padding: 10px;
1511 + }
1512 + .imagify-check-group.imagify-is-scrollable{
1513 + margin: auto;
1514 + }
1515 + .imagify-settings-section .imagify-col,
1516 + .imagify-col.imagify-col.imagify-shared-with-account-col,
1517 + .imagify-media-lib-section .imagify-col,
1518 + .imagify-custom-folders-section .imagify-col,
1519 + .imagify-shared-with-account-col {
1520 + width:100%;
1521 + float: none;
1522 + padding-right: 0;
1523 + }
1524 + .imagify-col.imagify-col.imagify-account-info-col,
1525 + .imagify-media-lib-section .imagify-account-info-col,
1526 + .imagify-custom-folders-section .imagify-account-info-col,
1527 + .imagify-account-info-col{
1528 + width: 100%;
1529 + float: none;
1530 + padding-left: 0;
1531 + padding-right: 0;
1532 + }
1533 + .imagify-lb-text{
1534 + font-size: 20px;
1535 + }
1536 + .imagify-vcenter{
1537 + -webkit-flex-direction: column;
1538 + -ms-flex-direction: column;
1539 + flex-direction: column;
1540 + -webkit-box-direction: normal;
1541 + -webkit-box-orient: vertical;
1542 + -moz-box-direction: normal;
1543 + -moz-box-orient: vertical;
1544 + align-items: center;
1545 + }
1546 + .imagify-pr2.imagify-pr2{
1547 + padding-right: 0em;
1548 + }
1549 +}
1550 +
1551 +.imagify-upsell {
1552 + position:relative;
1553 + background: #c51161;
1554 + padding: 20px 25px;
1555 +}
1556 +
1557 +.imagify-upsell p {
1558 + color: #fff !important;
1559 +}
1560 +
1561 +.imagify-upsell-button {
1562 + display: block;
1563 + background: #fff;
1564 + border-radius: 5px;
1565 + color: #c51161 !important;
1566 + font-weight: bold;
1567 + padding: 10px 0;
2039 1568 text-align: center;
2040 - border-radius: 50%;
1569 + text-decoration: none;
1570 + text-transform: uppercase;
2041 1571 }
2042 1572
2043 -/* Attachment page exception */
2044 -.wp_attachment_image #imagify-visual-comparison .close-btn {
2045 - top: 0;
1573 +.imagify-upsell-arrow::after {
1574 + content: '\2192';
1575 + font-size: large;
1576 + margin-left: 5px;
1577 + vertical-align: top;
2046 1578 }
2047 -/* Attachment page exception */
2048 -.wp_attachment_image #imagify-visual-comparison .imagify-modal-content {
2049 - padding-top: 40px;
1579 +
1580 +.imagify-upsell .imagify-meteo-icon {
1581 + filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(104deg) brightness(103%) contrast(103%);
2050 1582 }
2051 1583
2052 -.imagify-modal .imagify-comparison-title {
2053 - font-size: 28px;
2054 - margin-bottom: 1em;
2055 - color: #F2F2F2;
2056 - text-align: left;
1584 +.imagify-original-fize-size {
1585 + display: block !important;
2057 1586 }
2058 -.imagify-modal .imagify-comparison-title .twentytwenty-duo-buttons {
2059 - position: static;
2060 - margin: 0 10px 0 15px;
1587 +
1588 +.imagify-original-fize-size .value {
1589 + padding-left: 15px !important;
2061 1590 }
2062 -.imagify-comparison-title .twentytwenty-duo-buttons button {
2063 - float: none;
2064 - padding: 6px 12px;
2065 - font-size: 16px;
2066 - text-transform: none;
2067 - border: 1px solid #40B1D0;
2068 - color: #888899;
2069 - letter-spacing: 0;
1591 +.imagify-plugin-family-cards {
1592 + display: flex;
1593 + flex-wrap: wrap;
1594 + margin: 0 -10px;
2070 1595 }
2071 -.imagify-comparison-title .twentytwenty-duo-buttons button:focus {
2072 - outline: none;
2073 - box-shadow: none;
1596 +.imagify-plugin-family-col {
1597 + width: 25%;
1598 + box-sizing: border-box;
1599 + padding: 0 10px;
1600 + margin-bottom: 20px;
1601 + display: flex;
1602 + flex-direction: column;
2074 1603 }
2075 -.imagify-comparison-title .twentytwenty-duo-buttons .selected {
2076 - border: 1px solid #40B1D0;
2077 - color: #FFF;
2078 - background: #40B1D0;
1604 +@media (max-width: 1200px) {
1605 + .imagify-plugin-family-col {
1606 + width: 50%;
1607 + }
2079 1608 }
2080 -
2081 -.imagify-comparison-levels {
2082 - margin: 15px 0;
2083 - overflow: hidden;
1609 +@media (max-width: 600px) {
1610 + .imagify-plugin-family-col {
1611 + width: 100%;
1612 + }
2084 1613 }
2085 -.imagify-comparison-levels div {
2086 - display: none;
2087 - min-width: 175px;
2088 - font-size: 11px;
1614 +.imagify-card {
1615 + border: 1px solid #dfdfdf;
1616 + background-color: #f4f7f9;
1617 + border-radius: 5px;
1618 + width: 100%;
1619 + display: flex;
1620 + flex-direction: column;
1621 + flex: 1 1 auto;
2089 1622 }
2090 -.imagify-comparison-levels .imagify-chart,
2091 -.imagify-comparison-levels .imagify-chart-container {
2092 - width: 25px;
2093 - float: none;
2094 - margin: 0;
1623 +.imagify-card-header {
1624 + margin-bottom: 10px;
1625 + padding-top: 25px;
2095 1626 }
2096 -.imagify-c-level.go-left {
2097 - float: left;
1627 +.imagify-card-logo {
1628 + min-height: 42px;
1629 + display: flex;
1630 + align-items: center;
1631 + justify-content: center;
2098 1632 }
2099 -.imagify-c-level.go-right {
2100 - float: right;
1633 +.imagify-card-logo img {
1634 + display: block;
1635 + margin: 0 auto;
1636 + max-width: 100%;
1637 + height: auto;
2101 1638 }
2102 -.imagify-c-level.go-right,
2103 -.imagify-c-level.go-left {
2104 - display: table;
1639 +.imagify-card-header h4 {
1640 + text-align: center;
1641 + color: #323232;
1642 + font-size: 1.1em;
1643 + font-weight:bold;
2105 1644 }
2106 -.imagify-c-level .imagify-c-level-row {
2107 - display: table-row;
2108 - margin: 0;
2109 - color: #FFF;
1645 +.imagify-card-body {
1646 + margin-bottom: 10px;
1647 + padding: 0 10px 0 10px;
1648 + flex: 1 1 auto;
2110 1649 }
2111 -.imagify-c-level-row > span {
2112 - display: table-cell;
2113 - padding: 2px 0;
1650 +.imagify-card-body p {
1651 + font-size: 1em;
1652 + color: #323232;
1653 + text-align:center;
1654 + line-height: 17px;
2114 1655 }
2115 -.imagify-c-level-row .value {
2116 - text-align: right;
2117 - padding-left: 5px;
1656 +.imagify-card-footer {
1657 + display: flex;
1658 + justify-content: center;
1659 + align-items: center;
1660 + padding: 10px;
1661 + height: 40px;
1662 + margin-top: auto;
2118 1663 }
2119 -.imagify-c-level-row .value.level {
2120 - color: #40b1d0;
1664 +.imagify-card-footer span {
1665 + text-transform: uppercase;
1666 + font-weight:bold;
1667 + color: #6f9c3b;
2121 1668 }
2122 -.imagify-c-level-row .value.size {
2123 - color: #8bc34a;
1669 +.imagify-card-footer a {
1670 + margin: 0 15px 0 15px;
1671 + font-size: 1em;
2124 1672 font-weight: bold;
2125 1673 }
2126 -.imagify-c-level-row .value .imagify-chart {
2127 - top: 1px;
1674 +.imagify-card-footer a.imagify-card-btn {
1675 + text-transform: uppercase;
1676 + text-decoration: none;
1677 + background-color: #2f3242;
1678 + padding: 8px 20px 8px 20px;
1679 + color: white;
2128 1680 }
1681 +.imagify-upsell-cta {
1682 + display: inline-flex;
1683 + align-items: center;
1684 + justify-content: center;
1685 +}
1686 +.imagify-upsell-cta .imagify-svg-icon {
1687 + margin-left: 7px;
1688 + margin-top: 2px;
1689 +}
1690 +.imagify-upsell.imagify-col-content .imagify-space-left p {
1691 + font-size: 14px;
1692 +}
2129 1693
2130 -@-webkit-keyframes icon-rotate {
2131 - from {
2132 - -webkit-transform: rotate(0deg);
2133 - transform: rotate(0deg);
2134 - }
2135 - to {
2136 - -webkit-transform: rotate(360deg);
2137 - transform: rotate(360deg);
2138 - }
1694 +/* Analytics opt-in ============================================================================= */
1695 +.imagify-analytics-section {
1696 + padding: 20px 24px;
1697 + background: #f6f7f7;
1698 + border-radius: 4px;
2139 1699 }
2140 -@keyframes icon-rotate {
2141 - from {
2142 - transform: rotate(0deg);
2143 - }
2144 - to {
2145 - transform: rotate(360deg);
2146 - }
1700 +
1701 +.imagify-analytics-optin {
1702 + display: flex;
1703 + flex-direction: column;
1704 + gap: 8px;
2147 1705 }
2148 1706
2149 -.imagify-menu-bar-img {
2150 - margin-top: 1em;
1707 +.imagify-analytics-label {
1708 + display: inline-flex;
1709 + align-items: center;
1710 + gap: 12px;
1711 + cursor: pointer;
1712 + font-size: 14px;
1713 + font-weight: 600;
1714 + color: #2E3243;
2151 1715 }
2152 1716
2153 -/**
2154 - * Visual Comparison
2155 - */
2156 -.imagify-modal .loader {
1717 +/* Hide native checkbox */
1718 +.imagify-analytics-checkbox {
2157 1719 position: absolute;
2158 - top: 50%;
2159 - left: 50%;
2160 - margin: -32px 0 0 -32px;
2161 1720 opacity: 0;
2162 - visibility: hidden;
2163 - transition: opacity .4s;
1721 + width: 0;
1722 + height: 0;
2164 1723 }
2165 -.imagify-modal .loading .loader {
2166 - visibility: visible;
2167 - opacity: 1;
1724 +
1725 +/* Toggle switch track */
1726 +.imagify-analytics-toggle-ui {
1727 + position: relative;
1728 + display: inline-block;
1729 + width: 48px;
1730 + height: 26px;
1731 + background: #ccc;
1732 + border-radius: 13px;
1733 + transition: background .2s ease;
1734 + flex-shrink: 0;
2168 1735 }
2169 1736
2170 -.imagify-settings .imagify-visual-comparison-text {
2171 - margin-top: 1em;
2172 - color: #40b1d0;
2173 - font-weight: bold;
2174 -}
1737 +/* Toggle switch thumb */
1738 +.imagify-analytics-toggle-ui::after {
1739 + content: '';
1740 + position: absolute;
1741 + top: 3px;
1742 + left: 3px;
1743 + width: 20px;
1744 + height: 20px;
1745 + background: #fff;
1746 + border-radius: 50%;
1747 + box-shadow: 0 1px 3px rgba(0,0,0,.3);
1748 + transition: transform .2s ease;
1749 +}
1750 +
1751 +.imagify-analytics-checkbox:checked ~ .imagify-analytics-toggle-ui,
1752 +.imagify-analytics-label .imagify-analytics-checkbox:checked + .imagify-analytics-toggle-ui {
1753 + background: #40B1D0;
1754 +}
1755 +
1756 +.imagify-analytics-checkbox:checked + .imagify-analytics-toggle-ui::after {
1757 + transform: translateX(22px);
1758 +}
1759 +
1760 +.imagify-analytics-description {
1761 + margin: 0;
1762 + color: #666;
1763 + font-size: 13px;
1764 +}
1765 +
1766 +.imagify-btn-link {
1767 + background: none;
1768 + border: none;
1769 + padding: 0;
1770 + color: #40B1D0;
1771 + text-decoration: underline;
1772 + cursor: pointer;
1773 + font-size: inherit;
1774 +}
1775 +
1776 +.imagify-btn-link:hover {
1777 + color: #338ea6;
1778 +}
1779 +
1780 +/* Analytics data table (modal + thank-you notice) */
1781 +.imagify-analytics-data-table {
1782 + width: 100%;
1783 + border-collapse: collapse;
1784 + margin: 12px 0;
1785 + border-left: 3px solid #40B1D0;
1786 + background-color: #F0FAFD;
1787 + border-radius: 4px;
1788 + overflow: hidden;
1789 +}
1790 +
1791 +.imagify-analytics-data-table td {
1792 + padding: 8px 12px;
1793 + font-size: 13px;
1794 + border-bottom: 1px solid #D8EFF6;
1795 + vertical-align: top;
1796 + color: #2E3243;
1797 +}
1798 +
1799 +.imagify-analytics-data-table td:first-child {
1800 + font-weight: 600;
1801 + width: 40%;
1802 +}
1803 +
1804 +.imagify-analytics-data-table tr:last-child td {
1805 + border-bottom: 0;
1806 +}
1807 +
1808 +/* Thank-you notice text colour override */
1809 +.imagify-analytics-thankyou-notice,
1810 +.imagify-analytics-thankyou-notice p {
1811 + color: #1d2327;
1812 +}
1813 +
1814 +/* Opt-in ask notice */
1815 +.imagify-analytics-optin-notice .imagify-analytics-data-container {
1816 + margin-bottom: 12px;
1817 +}
1818 +
1819 +.imagify-analytics-optin-notice .imagify-analytics-data-container .description {
1820 + color: #666;
1821 + font-size: 13px;
1822 +}
1823 +