PluginProbe
Imagify Image Optimization: Optimize Images | Compress & Convert to WebP/AVIF / 2.2
Imagify Image Optimization: Optimize Images | Compress & Convert to WebP/AVIF v2.2
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
imagify / assets / css / notices.css

notices.css in Imagify Image Optimization: Optimize Images | Compress & Convert to WebP/AVIF 2.2, at assets/css/notices.css

377 lines 6.7 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* Error Notice */
2 .imagify-plugins-error {
3 overflow: hidden;
4 padding-left: 20px;
5 list-style-type: disc
6 }
7
8 .imagify-plugins-error li {
9 width: 300px;
10 line-height: 30px
11 }
12
13 @media (max-width: 570px) {
14 .imagify-plugins-error li {
15 width: auto;
16 }
17 }
18
19 /* Notice close link */
20 .imagify-notice-dismiss.notice-dismiss {
21 text-decoration: none;
22 }
23
24 /* Notices in Imagify related pages */
25 .media_page_imagify-bulk-optimization .notice,
26 body[class*="_imagify-ngg-bulk-optimization"] .notice,
27 .settings_page_imagify .notice {
28 margin-right: 20px;
29 margin-left: 2px;
30 }
31
32 .imagify-notice .button-mini {
33 padding: 2px 10px;
34 font-size: 13px;
35 }
36
37 .imagify-notice.imagify-notice {
38 position: relative;
39 display: -webkit-box;
40 display: -webkit-flex;
41 display: -ms-flexbox;
42 display: flex;
43 padding: 0;
44 margin: 10px 20px 10px 2px;
45 border: 0 none;
46 background: #4A5362;
47 box-shadow: none;
48 color: #FFF;
49 }
50
51 @media (max-width: 782px) {
52 .imagify-notice.imagify-notice,
53 .imagify-welcome {
54 margin-right: 12px;
55 }
56 }
57
58 @media (max-width: 450px) {
59 .imagify-notice.imagify-notice {
60 -webkit-box-orient: vertical;
61 -webkit-box-direction: normal;
62 -webkit-flex-direction: column;
63 -ms-flex-direction: column;
64 flex-direction: column;
65 }
66 }
67
68 .wrap .imagify-notice {
69 margin: 5px 15px 2px;
70 position: relative;
71 }
72
73 .imagify-notice-logo {
74 padding: 18px 23px;
75 background: #40B1D0;
76 }
77
78 .imagify-notice-logo .imagify-logo {
79 opacity: 1;
80 }
81
82 .imagify-flex-notice-content .imagify-notice-logo {
83 display: flex;
84 align-items: center;
85 }
86
87 .updated .imagify-notice-logo {
88 background: #8BC34A;
89 }
90
91 .error .imagify-notice-logo {
92 background: #C51162;
93 }
94
95 .imagify-notice-title {
96 font-size: 15px;
97 }
98
99 .imagify-notice-content {
100 padding: 5px 23px;
101 }
102
103 .imagify-notice-content.imagify-notice-content p {
104 margin: 0.65em 0;
105 }
106
107 .imagify-flex-notice-content .imagify-notice-content {
108 display: flex;
109 flex-wrap: wrap;
110 padding: 0;
111 }
112
113 .imagify-flex-notice-content .imagify-notice-content > * {
114 padding: 10px 20px;
115 }
116
117 .imagify-flex-notice-content .imagify-meteo-icon img {
118 height: 100%;
119 margin-top: 6px;
120 }
121
122 .imagify-notice-quota [class^="imagify-bar-"] {
123 background: #1F2332;
124 }
125
126 .imagify-notice-quota .imagify-space-left p {
127 margin: 0;
128 }
129
130 .imagify-flex-notice-content .imagify-notice-content .imagify-notice-quota {
131 padding-right: 24px;
132 padding-left: 8px;
133 background: #343A49;
134 }
135
136 .imagify-notice a {
137 color: #40B1D0;
138 }
139
140 .imagify-notice a:hover,
141 .imagify-notice a:focus {
142 color: #FEE102;
143 }
144
145 .imagify-notice code {
146 background: rgba(0, 0, 0, 0.4) none repeat scroll 0 0;
147 }
148
149 .imagify-notice .imagify-rate-us.imagify-rate-us {
150 text-align: left;
151 }
152
153 .imagify-notice .imagify-rate-us .stars {
154 margin: 0;
155 }
156
157 /**
158 * == Welcome section
159 */
160 .imagify-welcome {
161 margin: 30px 20px 0 0;
162 }
163
164 .imagify-welcome .baseline {
165 display: inline-block;
166 margin: .2em 0 0 2em;
167 font-size: 17px;
168 }
169
170 .imagify-welcome .imagify-logo {
171 vertical-align: middle;
172 }
173
174 .imagify-welcome-remove {
175 position: absolute;
176 top: 50%;
177 right: 15px;
178 margin-top: -8px;
179 color: #FFF;
180 text-decoration: none;
181 }
182
183 /* Welcome columns */
184 .imagify-columns [class^="col-"] img {
185 float: left;
186 margin-right: 18px;
187 }
188
189 .imagify-col-content {
190 overflow: hidden;
191 }
192
193 .imagify-col-title {
194 margin: 0 0 15px 0;
195 font-size: 23px;
196 }
197
198 .counter .imagify-col-title:before {
199 counter-increment: cols;
200 content: counter(cols) ". ";
201 color: #40B1D0;
202 }
203
204 .imagify-col-desc {
205 color: #5F758E;
206 margin-bottom: 2em;
207 }
208
209 /* WP Rocket notice */
210 .imagify-rkt-notice.imagify-rkt-notice {
211 position: relative;
212 display: -webkit-box;
213 display: -webkit-flex;
214 display: -ms-flexbox;
215 display: flex;
216 -webkit-box-align: center;
217 -webkit-align-items: center;
218 -ms-flex-align: center;
219 -ms-grid-row-align: center;
220 align-items: center;
221 padding: 10px 45px 10px 0;
222 border: 0 none;
223 box-shadow: none;
224 color: #FFF;
225 background: #1F2332;
226 }
227
228 .media_page_imagify-bulk-optimization .imagify-rkt-notice {
229 margin-left: 2px;
230 margin-right: 20px;
231 }
232
233 @media (max-width: 782px) {
234 .media_page_imagify-bulk-optimization .imagify-rkt-notice {
235 margin-left: 0;
236 margin-right: 12px;
237 }
238 }
239
240 .imagify-rkt-notice .imagify-cross {
241 position: absolute;
242 right: 8px;
243 top: 50%;
244 width: 22px;
245 height: 22px;
246 padding: 0;
247 margin-top: -11px;
248 background: transparent;
249 color: rgba(255, 255, 255, .5);
250 text-decoration: none;
251 border-radius: 50%;
252 transition: all .275s;
253 }
254
255 .imagify-rkt-notice .imagify-cross .dashicons {
256 position: relative;
257 top: 2px;
258 left: 1px;
259 transition: all .275s;
260 }
261
262 .imagify-rkt-notice .imagify-cross:hover {
263 background: #FFF;
264 }
265
266 .imagify-rkt-notice .imagify-cross:hover .dashicons {
267 color: #412355;
268 }
269
270 .imagify-rkt-notice .imagify-rkt-cta,
271 .imagify-rkt-notice .imagify-rkt-logo,
272 .imagify-rkt-notice .imagify-rkt-coupon {
273 -webkit-flex-shrink: 0;
274 -ms-flex-negative: 0;
275 flex-shrink: 0;
276 }
277
278 .imagify-rkt-notice .imagify-rkt-logo {
279 width: 150px !important; /* !important because of a dirtugly WP Engine code */
280 text-align: center;
281 padding: 0 25px 0 30px;
282 line-height: 0.8;
283 }
284
285 .imagify-rkt-notice .imagify-rkt-msg {
286 width: 100% !important; /* !important because of a dirtugly WP Engine code */
287 color: #FFF;
288 padding: 0 15px;
289 font-size: 14px;
290 line-height: 1.6;
291 }
292
293 .imagify-rkt-notice .imagify-rkt-coupon {
294 width: 150px !important; /* !important because of a dirtugly WP Engine code */
295 padding: 0 15px;
296 }
297
298 .imagify-rkt-notice .imagify-rkt-coupon-code {
299 padding: 5px 10px;
300 font-size: 23px;
301 font-weight: bold;
302 border: 1px dashed #F56640;
303 color: #F56640;
304 }
305
306 .imagify-rkt-notice .imagify-rkt-cta {
307 width: 250px !important; /* !important because of a dirtugly WP Engine code */
308 -webkit-box-flex: 1;
309 -webkit-flex-grow: 1;
310 -ms-flex-positive: 1;
311 flex-grow: 1;
312 -webkit-flex-basis: 200px;
313 -ms-flex-preferred-size: 200px;
314 flex-basis: 200px;
315 }
316
317 .imagify-rkt-notice .button.button {
318 position: relative;
319 top: -1px;
320 height: auto;
321 font-weight: 600;
322 font-size: 14px;
323 border: 0 none;
324 padding: 9px 18px 9px;
325 background: #F56640;
326 box-shadow: none;
327 text-shadow: none !important;
328 }
329
330 @media (max-width: 880px) {
331 .imagify-rkt-notice {
332 -webkit-flex-wrap: wrap;
333 -ms-flex-wrap: wrap;
334 flex-wrap: wrap;
335 }
336
337 .imagify-rkt-notice .imagify-rkt-msg,
338 .imagify-rkt-notice .imagify-rkt-cta,
339 .imagify-rkt-notice .imagify-rkt-logo {
340 text-align: left;
341 padding: 5px 15px;
342 }
343
344 .imagify-cross.imagify-cross {
345 top: 8px;
346 margin-top: 0;
347 }
348
349 .imagify-rkt-notice .imagify-cross .dashicons {
350 top: 1px;
351 }
352 }
353
354 @media (max-width: 782px) {
355 .imagify-flex-notice-content .imagify-notice-content .imagify-notice-quota {
356 width: 100%;
357 }
358
359 .imagify-notice-quota-btn-container{
360 text-align: center;
361 width: 100%;
362 }
363 .imagify-notice-quota-btn-container .imagify-button{
364 display: inline-block;
365 }
366 }
367
368 .imagify-notice-bulk-complete {
369 display: flex;
370 align-items: center;
371 padding: 12px 0;
372 }
373
374 .imagify-notice-bulk-complete-logo {
375 padding-right: 12px;
376 }
377