PluginProbe
WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance / 4.7.0
WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance v4.7.0
4.7.0 4.6.1 4.6.0 4.5.5 4.5.4 4.5.3 4.5.2 3.2.20 3.2.21 3.2.22 3.2.3 3.2.5 3.2.6 3.2.7 3.2.9 3.3.0 3.3.1 3.3.2 3.4.0 3.4.1 3.4.2 3.5.0 3.6.0 3.7.0 3.7.1 All 111 releases
← All changes | css/wp-optimize-admin.css +2794 -2090 3.2.5 → 4.7.0 View file →
@@ -1,1920 +1,1926 @@
1 -/* COLORS */
2 -
1 +@charset "UTF-8";
2 +/* COLORS */
3 3 /* OTHER VARS */
4 -
5 4 .wpo_hidden {
6 - display: none !important;
5 + display: none !important;
7 6 }
8 7
9 8 .wpo_info {
10 - background: #FFF;
11 - color: #444;
12 - font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
13 - margin: 2em auto;
14 - padding: 1em 2em;
15 - max-width: 700px;
16 - box-shadow: 0 1px 3px rgba(0,0,0,0.13);
9 + background: #FFF;
10 + color: #444;
11 + font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
12 + margin: 2em auto;
13 + padding: 1em 2em;
14 + max-width: 700px;
15 + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13);
17 16 }
18 17
19 18 #wp-optimize-wrap .widefat thead th, #wp-optimize-wrap .widefat thead td {
20 - border-bottom: 1px solid #E1E1E1;
19 + border-bottom: 1px solid #E1E1E1;
21 20 }
22 -
23 -#wp-optimize-wrap .widefat td, #wp-optimize-wrap .widefat th {
24 - padding: 8px 10px;
21 +#wp-optimize-wrap .widefat th, #wp-optimize-wrap .widefat td {
22 + padding: 8px 10px;
25 23 }
24 +#wp-optimize-wrap .nav-tab-wrapper {
25 + margin: 0;
26 +}
26 27
27 -/* big button */
28 -
29 28 .wpo_primary_big {
30 - padding: 4px 6px !important;
31 - font-size: 22px !important;
32 - min-height: 34px;
33 - min-width: 200px;
29 + padding: 4px 6px !important;
30 + font-size: 22px !important;
31 + min-height: 34px;
32 + min-width: 200px;
34 33 }
35 34
36 -/* SECTIONS */
37 -
38 35 .wpo_section {
39 - clear: both;
40 - padding: 0;
41 - margin: 0;
36 + clear: both;
37 + padding: 0;
38 + margin: 0;
42 39 }
43 40
44 41 .wp-optimize-settings {
45 - margin-bottom: 16px;
42 + margin-bottom: 16px;
46 43 }
47 -
48 44 .wp-optimize-settings td > label {
49 - font-weight: bold;
50 - display: block;
51 - margin-bottom: 8px;
45 + font-weight: bold;
46 + display: block;
47 + margin-bottom: 8px;
52 48 }
53 49
54 -/* COLUMN SETUP */
55 -
56 50 .wpo_col {
57 - display: block;
58 - float: left;
59 - margin: 1% 0 1% 1%;
51 + display: block;
52 + float: left;
53 + margin: 1% 0 1% 1%;
60 54 }
61 -
62 55 .wpo_col:first-child {
63 - margin-left: 0;
56 + margin-left: 0;
64 57 }
65 58
66 -/* GROUPING */
67 -
68 -.wpo_group:before,
69 -.wpo_group:after {
70 - content: "";
71 - display: table;
59 +.wpo_group:before {
60 + content: "";
61 + display: table;
72 62 }
73 -
74 63 .wpo_group:after {
75 - clear: both;
64 + content: "";
65 + display: table;
66 + clear: both;
76 67 }
77 68
78 69 .wpo_half_width {
79 - width: 48%;
70 + width: 48%;
80 71 }
81 72
82 -/* GRID OF THREE */
83 -
84 73 .wpo_span_3_of_3 {
85 - width: 100%;
74 + width: 100%;
86 75 }
87 76
88 77 .wpo_span_2_of_3 {
89 - width: 65.3%;
78 + width: 65.3%;
90 79 }
91 80
92 81 .wpo_span_1_of_3 {
93 - width: 32.1%;
82 + width: 32.1%;
94 83 }
95 84
96 -#wp-optimize-wrap .nav-tab-wrapper {
97 - margin: 0;
98 -}
99 -
100 -@media screen and (min-width: 549px) {
101 -
102 - .show_on_default_sizes {
103 - display: block !important;
104 - }
105 -
106 - .show_on_mobile_sizes {
107 - display: none !important;
108 - }
109 -
110 -}
111 -
112 -@media screen and (max-width: 548px) {
113 -
114 - .show_on_default_sizes {
115 - display: none !important;
116 - }
117 -
118 - .show_on_mobile_sizes {
119 - display: block !important;
120 - }
121 -
122 -}
123 -
124 -@media screen and (max-width: 768px) {
125 -
126 - .wpo_col {
127 - margin: 1% 0;
128 - }
129 -
130 - .wpo_span_3_of_3 {
131 - width: 100%;
132 - }
133 -
134 - .wpo_span_2_of_3 {
135 - width: 100%;
136 - }
137 -
138 - .wpo_span_1_of_3 {
139 - width: 100%;
140 - }
141 -
142 - .wpo_half_width {
143 - width: 100%;
144 - }
145 -
146 -}
147 -
148 -/* .wp-optimize-settings-clean-transient label, .wp-optimize-settings-clean-pingbacks label, .wp-optimize-settings-clean-trackbacks label, .wp-optimize-settings-clean-postmeta label, .wp-optimize-settings-clean-orphandata label, .wp-optimize-settings-clean-commentmeta label */
149 -
150 -/* Optimizations tab */
151 -
152 85 .wp-optimize-setting-is-sensitive td > label::before {
153 - content: "\f534";
154 - font-family: 'dashicons';
155 - display: inline-block;
156 - margin-right: 6px;
157 - font-style: normal;
158 - line-height: 1;
159 - vertical-align: middle;
160 - width: 20px;
161 - font-size: 18px;
162 - height: 20px;
163 - text-align: center;
164 - color: #72777C;
86 + content: "\f534";
87 + font-family: "dashicons";
88 + display: inline-block;
89 + margin-right: 6px;
90 + font-style: normal;
91 + line-height: 1;
92 + vertical-align: middle;
93 + width: 20px;
94 + font-size: 18px;
95 + height: 20px;
96 + text-align: center;
97 + color: #72777C;
165 98 }
166 99
167 100 .wpo-run-optimizations__container {
168 - margin-bottom: 15px;
101 + margin-bottom: 15px;
169 102 }
170 103
171 104 .wp-optimize-optimizations-table-placeholder {
172 - min-height: 80px;
105 + min-height: 80px;
173 106 }
174 107
175 108 td.wp-optimize-settings-optimization-checkbox {
176 - width: 18px;
177 - padding-left: 4px;
178 - padding-right: 0px;
109 + width: 18px;
110 + padding-left: 4px;
111 + padding-right: 0;
179 112 }
180 113
181 114 .wp-optimize-settings-optimization-checkbox input {
182 - margin: 0px;
183 - padding: 0px;
115 + margin: 0;
116 + padding: 0;
184 117 }
185 118
186 -#retention-period, #revisions-count {
187 - width: 60px;
119 +#retention-period {
120 + width: 60px;
188 121 }
189 122
190 -.wp-optimize-settings-optimization-info {
191 - font-size: 80%;
192 - font-style: italic;
123 +#revisions-count {
124 + width: 60px;
193 125 }
194 126
195 -.wp-optimize-settings input[type="checkbox"] {
196 - /* width: 18px; */
127 +#revisions-retention-count {
128 + width: 60px;
197 129 }
198 130
199 -/* Added for the Image on Addons tab*/
131 +.wp-optimize-settings-optimization-info {
132 + font-size: 11px;
133 + font-style: italic;
134 +}
135 +.wp-optimize-settings-optimization-info a {
136 + text-decoration: underline;
137 +}
200 138
201 139 img.addons {
202 - display: block;
203 - margin-left: auto;
204 - margin-right: auto;
205 - margin-bottom: 20px;
206 - max-height: 44px;
207 - height: auto;
208 - max-width: 100%;
140 + display: block;
141 + margin-left: auto;
142 + margin-right: auto;
143 + margin-bottom: 20px;
144 + max-height: 44px;
145 + height: auto;
146 + max-width: 100%;
209 147 }
210 148
211 149 .wpo_spinner {
212 - width: 18px;
213 - height: 18px;
214 - padding-left: 10px;
215 - display: none;
216 - position: relative;
217 - top: 4px;
150 + width: 18px;
151 + height: 18px;
152 + padding-left: 10px;
153 + display: none;
154 + position: relative;
155 + top: 4px;
218 156 }
219 157
220 158 .optimization_spinner {
221 - width: 20px;
222 - height: 20px;
159 + width: 20px;
160 + height: 20px;
223 161 }
224 162
225 163 #wp-optimize-auto-options {
226 - margin: 20px 0 0 28px;
164 + margin: 20px 0 0 28px;
227 165 }
228 166
167 +.wpo-fieldgroup--auto-cleanup .select2-container {
168 + width: 130px !important;
169 + min-width: 100px;
170 + top: 0;
171 + margin: 5px 0;
172 +}
173 +
174 +.wpo-select2 + .select2-container {
175 + min-width: 130px;
176 +}
177 +.wpo-select2 + .select2-container.select2-container--disabled .select2-selection--single {
178 + color: #a7aaad;
179 + border-color: #dcdcde;
180 + background-color: #f6f7f7;
181 + box-shadow: none;
182 + text-shadow: 0 1px 0 #fff;
183 + cursor: default;
184 + transform: none;
185 + opacity: 0.7;
186 +}
187 +
229 188 .display-none {
230 - display: none;
189 + display: none;
231 190 }
232 191
233 192 .visibility-hidden {
234 - visibility: hidden;
193 + visibility: hidden;
235 194 }
236 195
237 196 .margin-one-percent {
238 - margin: 1%;
197 + margin: 1%;
239 198 }
240 199
241 -#save_done, .save-done {
242 - color: #D94F00;
243 - font-size: 220% !important;
200 +.save-done {
201 + color: #D94F00;
244 202 }
245 203
246 -.wp-optimize-settings-optimization-info a {
247 - text-decoration: underline;
248 -}
249 -
250 204 .wp-optimize-settings-optimization-run-spinner {
251 - position: relative;
252 - top: 2px;
205 + position: relative;
206 + top: 2px;
253 207 }
254 208
255 -@media screen and (min-width: 782px) {
256 -
257 - td.wp-optimize-settings-optimization-run {
258 - width: 180px;
259 - padding-top: 16px;
260 - }
261 -
262 -}
263 -
264 209 #wpoptimize_table_list .tablesorter-filter-row {
265 - display: none !important;
210 + display: none !important;
266 211 }
267 -
268 212 #wpoptimize_table_list .optimization_spinner {
269 - position: relative;
270 - top: 2px;
271 - left: 5px;
213 + position: relative;
214 + top: 2px;
215 + left: 5px;
272 216 }
273 -
274 217 #wpoptimize_table_list .optimization_spinner.visibility-hidden {
275 - display: none;
218 + display: none;
276 219 }
220 +#wpoptimize_table_list tr th:first-child, #wpoptimize_table_list tr td:first-child {
221 + display: none;
222 +}
223 +#wpoptimize_table_list tr td.no-table {
224 + display: table-cell !important;
225 + background: #FB8787;
226 + font-weight: bold;
227 +}
228 +#wpoptimize_table_list tr td.loading {
229 + text-align: center;
230 +}
231 +#wpoptimize_table_list .optimization_done_icon {
232 + color: #009B24;
233 + font-size: 26px !important;
234 + display: inline-block;
235 + position: relative;
236 +}
277 237
278 238 #wpoptimize_table_list_filter {
279 - width: 100%;
280 - margin-bottom: 15px;
239 + width: 100%;
240 + margin-bottom: 15px;
281 241 }
282 242
283 243 #wpoptimize_table_list_tables_not_found {
284 - display: none;
285 - margin: 20px 0;
244 + display: none;
245 + margin: 20px 0;
286 246 }
287 247
288 248 div#wpoptimize_table_list_tables_not_found + h3 {
289 - margin-top: 30px;
249 + margin-top: 30px;
290 250 }
291 251
292 -/* Hide First column */
293 -
294 -#wpoptimize_table_list tr th:first-child,
295 -#wpoptimize_table_list tr td:first-child {
296 - display: none;
252 +#optimize_form .select2-container {
253 + width: 50% !important;
254 + top: -5px;
255 + height: 40px;
256 + margin-left: 10px;
297 257 }
298 258
299 -#wpoptimize_table_list tr td.no-table {
300 - display: table-cell !important;
301 - background: #FB8787;
302 - font-weight: bold;
303 -}
304 -
305 -#optimize_form .select2-container,
306 -#wp-optimize-auto-options .select2-container {
307 - width: 50% !important;
308 - top: -5px;
309 - height: 40px;
310 - margin-left: 10px;
311 -}
312 -
313 -#wpoptimize_table_list .optimization_done_icon {
314 - color: #009B24;
315 - font-size: 200%;
316 - display: inline-block;
317 - position: relative;
318 -}
319 -
320 259 #wpo_sitelist_show_moreoptions_cron {
321 - font-size: 13px;
322 - line-height: 1.5;
323 - letter-spacing: 1px;
260 + font-size: 13px;
261 + line-height: 1.5;
262 + letter-spacing: 1px;
324 263 }
325 264
326 265 #wp-optimize-nav-tab-contents-images .wpo_span_2_of_3 h3 {
327 - display: inline-block;
266 + display: inline-block;
328 267 }
329 268
330 269 .wpo_remove_selected_sizes_btn__container {
331 - margin-top: 20px;
270 + margin-top: 20px;
332 271 }
333 272
334 273 .unused-image-sizes__label {
335 - display: block;
336 - line-height: 1.6;
274 + display: block;
275 + line-height: 1.6;
337 276 }
338 277
339 -@media (max-width: 782px) {
340 -
341 - .unused-image-sizes__label {
342 - margin-left: 30px;
343 - margin-bottom: 15px;
344 - line-height: 1;
345 - word-break: break-word;
346 - }
347 -
348 - .unused-image-sizes__label input[type=checkbox] {
349 - margin-left: -30px;
350 - }
351 -
352 - body.rtl .unused-image-sizes__label {
353 - margin-right: 30px;
354 - margin-left: 0;
355 - }
356 -
357 - body.rtl .unused-image-sizes__label input[type=checkbox] {
358 - margin-left: 4px;
359 - margin-right: -30px;
360 - }
361 -
278 +#wp-optimize-nav-tab-contents-tables a {
279 + vertical-align: middle;
362 280 }
363 281
364 -#wp-optimize-nav-tab-contents-tables a {
365 - vertical-align: middle;
282 +#wpo_sitelist_moreoptions {
283 + margin: 4px 0 6px 0;
284 + border: 1px dotted;
285 + padding: 6px 10px;
286 + overflow-y: scroll;
287 + overflow-x: hidden;
288 + max-height: 150px;
366 289 }
367 290
368 -#wpo_sitelist_moreoptions,
369 291 #wpo_sitelist_moreoptions_cron {
370 - margin: 4px 16px 6px 0;
371 - border: 1px dotted;
372 - padding: 6px 10px;
373 - max-height: 300px;
374 - overflow-y: scroll;
375 - overflow-x: hidden;
292 + margin: 4px 16px 6px 0;
293 + border: 1px dotted;
294 + padding: 6px 10px;
295 + max-height: 300px;
296 + overflow-y: scroll;
297 + overflow-x: hidden;
376 298 }
377 -
378 -#wpo_sitelist_moreoptions {
379 - max-height: 150px;
380 - margin-right: 0;
299 +#wpo_sitelist_moreoptions_cron li {
300 + padding-left: 20px;
381 301 }
382 302
383 -#wpo_settings_sites_list li,
384 -#wpo_settings_sites_list li a {
385 - font-size: 13px;
386 - line-height: 1.5;
303 +#wpo_settings_sites_list li {
304 + font-size: 13px;
305 + line-height: 1.5;
387 306 }
388 307
389 -#wpo_sitelist_moreoptions_cron li {
390 - padding-left: 20px;
391 -}
392 -
393 308 #wpo_import_error_message {
394 - display: none;
395 - color: #9B0000;
309 + display: none;
310 + color: #9B0000;
396 311 }
397 312
398 313 #wpo_import_success_message {
399 - display: none;
400 - color: #46B450;
314 + display: none;
315 + color: #46B450;
401 316 }
402 317
403 318 #wp-optimize-logging-options {
404 - margin-top: 10px;
319 + margin-top: 10px;
320 + background-color: #FFF;
321 + border: 1px solid #CCC;
405 322 }
406 323
407 -/* Logger settings*/
408 -
409 324 .wpo_logging_header {
410 - font-weight: bold;
411 - border-top: 1px solid #333;
412 - border-bottom: 1px solid #333;
413 - padding: 5px 0;
414 - margin: 0;
325 + font-weight: bold;
326 + border-bottom: 1px solid #CCC;
327 + padding: 12px 6px;
328 + margin: 0;
415 329 }
416 330
417 331 .wpo_logging_row {
418 - border-bottom: 1px solid #A1A2A3;
419 - padding: 5px 0;
332 + padding: 5px 0;
420 333 }
334 +.wpo_logging_row:nth-child(even) {
335 + background-color: #F9F9F9;
336 + padding: 12px 0;
337 +}
338 +.wpo_logging_row .wpo_additional_logger_options {
339 + padding: 12px 6px;
340 +}
341 +.wpo_logging_row .wpo_additional_logger_options input.wpo_logger_addition_option {
342 + margin-bottom: 10px;
343 +}
421 344
422 -.wpo_logging_logger_title,
423 -.wpo_logging_options_title,
424 -.wpo_logging_status_title,
425 -.wpo_logging_actions_title,
426 -.wpo_logging_logger_row,
427 -.wpo_logging_options_row,
428 -.wpo_logging_status_row,
429 -.wpo_logging_actions_row {
430 - display: inline-block;
431 - vertical-align: middle;
345 +.wpo_logging_logger_title {
346 + display: inline-block;
347 + vertical-align: middle;
348 + width: 38%;
432 349 }
433 350
434 -.wpo_logging_logger_title,
351 +.wpo_logging_options_title {
352 + display: inline-block;
353 + vertical-align: middle;
354 + width: 44%;
355 +}
356 +
357 +.wpo_logging_status_title {
358 + display: inline-block;
359 + vertical-align: middle;
360 + width: 8%;
361 +}
362 +
363 +.wpo_logging_actions_title {
364 + display: inline-block;
365 + vertical-align: middle;
366 + width: 7%;
367 +}
368 +
435 369 .wpo_logging_logger_row {
436 - width: 38%;
370 + display: inline-block;
371 + vertical-align: middle;
372 + width: 38%;
437 373 }
438 374
439 -.wpo_logging_options_title,
440 375 .wpo_logging_options_row {
441 - width: 44%;
376 + display: inline-block;
377 + vertical-align: middle;
378 + width: 44%;
379 + word-wrap: break-word;
442 380 }
443 381
444 -.wpo_logging_status_title,
445 382 .wpo_logging_status_row {
446 - width: 8%;
383 + display: inline-block;
384 + vertical-align: middle;
385 + width: 8%;
447 386 }
448 387
449 -.wpo_logging_actions_title,
450 388 .wpo_logging_actions_row {
451 - width: 7%;
389 + display: inline-block;
390 + vertical-align: middle;
391 + width: 7%;
392 + text-align: left;
452 393 }
394 +.wpo_logging_actions_row .wpo_edit_logger {
395 + color: #0085BA;
396 + cursor: pointer;
397 + text-decoration: underline;
398 +}
399 +.wpo_logging_actions_row .wpo_delete_logger {
400 + color: #F00;
401 + cursor: pointer;
402 + text-decoration: underline;
403 +}
404 +.wpo_logging_actions_row .dashicons-no-alt {
405 + background-color: #F06666;
406 + color: #FFF;
407 + width: 20px;
408 + height: 20px;
409 + border-radius: 20px;
410 + display: inline-block;
411 + cursor: pointer;
412 + margin-left: 5px;
413 +}
453 414
454 -.wpo_logging_actions_row {
455 - text-align: right;
415 +.wpo_logging_status_row.active {
416 + color: #29AF29;
456 417 }
457 418
458 -.wpo_logging_options_row {
459 - word-wrap: break-word;
419 +.wpo_logging_status_row.inactive {
420 + color: #CDCFD3;
460 421 }
461 422
462 -.wpo_logging_actions_row .dashicons-no-alt,
463 -.wpo_add_logger_form .dashicons-no-alt {
464 - background-color: #F06666;
465 - color: #FFF;
466 - width: 20px;
467 - height: 20px;
468 - border-radius: 20px;
469 - display: inline-block;
470 - cursor: pointer;
471 - margin-left: 5px;
423 +.wpo_add_logger_form {
424 + clear: both;
425 + display: inline-block;
426 + box-sizing: border-box;
427 + width: 100%;
472 428 }
473 429
430 +.wpo_logging_edit_row {
431 + padding: 5px;
432 + display: none;
433 + float: right;
434 +}
435 +.wpo_logging_edit_row .wpo_delete_logger {
436 + margin-right: 5px;
437 +}
438 +
474 439 .wpo_add_logger_form .dashicons-no-alt {
475 - margin-top: 12px;
476 - margin-right: 10px;
477 - float: right;
440 + background-color: #F06666;
441 + color: #FFF;
442 + width: 20px;
443 + height: 20px;
444 + border-radius: 20px;
445 + display: inline-block;
446 + cursor: pointer;
447 + margin-left: 5px;
448 + margin-top: 12px;
449 + margin-right: 10px;
450 + float: right;
478 451 }
479 452
480 453 .wpo_logger_type {
481 - width: 90%;
482 - margin-top: 10px;
454 + width: 90%;
455 + margin-top: 10px;
483 456 }
484 457
485 458 .wpo_logger_addition_option {
486 - width: 100%;
487 - margin-top: 5px;
459 + width: 100%;
460 + margin-top: 5px;
488 461 }
489 462
490 463 .wpo_alert_notice {
491 - background-color: #F06666;
492 - color: #FFF;
493 - padding: 1em;
494 - display: block;
495 - margin-bottom: 10px;
496 - border-radius: 5px;
464 + background-color: #F06666;
465 + color: #FFF;
466 + padding: 1em;
467 + display: block;
468 + margin-bottom: 10px;
469 + border-radius: 5px;
497 470 }
498 471
499 472 .wpo_error_field {
500 - border-color: #F06666 !important;
473 + border-color: #F06666 !important;
501 474 }
502 475
503 476 .save_settings_reminder {
504 - display: none;
505 - color: #333;
506 - padding: 15px 20px;
507 - background-color: #F0A5A4;
508 - border-radius: 3px;
509 - margin: 15px 0;
477 + display: none;
478 + color: #333;
479 + padding: 15px 20px;
480 + background-color: #F0A5A4;
481 + border-radius: 3px;
482 + margin: 15px 0;
510 483 }
511 484
512 485 #wpo_remove_selected_sizes {
513 - margin-top: 20px;
486 + margin-top: 20px;
514 487 }
515 488
516 489 .wpo_unused_images_buttons_wrap {
517 - float: right;
518 - margin-right: 20px;
490 + float: right;
491 + margin-right: 20px;
519 492 }
520 493
521 494 .wpo_unused_images_container h3 {
522 - min-width: 150px;
495 + min-width: 150px;
523 496 }
524 497
525 -#wpo_unused_images, #wpo_smush_images_grid {
526 - max-height: 500px;
527 - overflow-y: auto;
498 +#wpo_unused_images {
499 + max-height: 500px;
500 + overflow-y: auto;
528 501 }
502 +#wpo_unused_images a {
503 + outline: none;
504 +}
529 505
530 -#wpo_unused_images a {
531 - outline: none;
506 +#wpo_smush_images_grid {
507 + max-height: 500px;
508 + overflow-y: auto;
532 509 }
533 510
534 511 #wp-optimize-nav-tab-wpo_database-tables-contents .wpo-take-a-backup {
535 - margin-left: 1%;
512 + margin-left: 1%;
536 513 }
537 514
538 515 .run-single-table-delete {
539 - margin-top: 3px;
516 + margin-top: 3px;
540 517 }
541 518
542 519 .wpo-confirm h4 span.table-name {
543 - font-style: italic;
544 - display: inline-block;
545 - background: #EFEFEF;
546 - padding: 3px 7px;
547 - border-radius: 4px;
520 + font-style: italic;
521 + display: inline-block;
522 + background: #EFEFEF;
523 + padding: 3px 7px;
524 + border-radius: 4px;
548 525 }
549 526
550 -#wpo_browser_cache_output,
551 -#wpo_gzip_compression_output,
527 +#wpo_browser_cache_output {
528 + background: #F0F0F0;
529 + padding: 10px;
530 + border: 1px solid #CCC;
531 + white-space: pre-wrap;
532 +}
533 +
534 +#wpo_gzip_compression_output {
535 + background: #F0F0F0;
536 + padding: 10px;
537 + border: 1px solid #CCC;
538 + white-space: pre-wrap;
539 +}
540 +
552 541 #wpo_advanced_cache_output {
553 - background: #F0F0F0;
554 - padding: 10px;
555 - border: 1px solid #CCC;
556 - white-space: pre-wrap;
542 + background: #F0F0F0;
543 + padding: 10px;
544 + border: 1px solid #CCC;
545 + white-space: pre-wrap;
557 546 }
558 547
559 -#wpo_gzip_compression_error_message,
548 +#wpo_gzip_compression_error_message {
549 + color: #9B0000;
550 +}
551 +
560 552 .wpo-error {
561 - color: #9B0000;
553 + color: #9B0000;
562 554 }
563 555
564 556 .notice.wpo-error__enabling-cache {
565 - white-space: pre-wrap;
566 - margin-bottom: 15px;
557 + white-space: pre-wrap;
558 + margin-bottom: 15px;
567 559 }
568 560
569 561 .notice.wpo-warnings__enabling-cache {
570 - margin-bottom: 15px;
562 + margin-bottom: 15px;
571 563 }
572 -
573 -.notice.wpo-warnings__enabling-cache ul, .notice.wpo-warnings__enabling-cache ul li {
574 - list-style: inside disc;
564 +.notice.wpo-warnings__enabling-cache ul {
565 + list-style: inside disc;
575 566 }
567 +.notice.wpo-warnings__enabling-cache ul li {
568 + list-style: inside disc;
569 +}
576 570
577 571 a.loading.wpo-refresh-gzip-status {
578 - color: rgba(68, 68, 68, 0.5);
579 - text-decoration: none;
572 + color: rgba(68, 68, 68, 0.5);
573 + text-decoration: none;
580 574 }
581 -
582 575 a.loading.wpo-refresh-gzip-status img.wpo_spinner.display-none {
583 - display: inline-block;
576 + display: inline-block;
584 577 }
585 578
586 -#wpo_browser_cache_expire_days,
587 -#wpo_browser_cache_expire_hours {
588 - width: 50px;
579 +input.wpo_browser_cache_input {
580 + width: 60px;
581 + padding: 0 8px;
589 582 }
590 583
591 584 .wpo-enabled .wpo-disabled {
592 - display: none;
585 + display: none;
593 586 }
594 587
595 588 .wpo-disabled .wpo-enabled {
596 - display: none;
589 + display: none;
597 590 }
598 591
599 592 .wpo-button-wrap {
600 - margin-top: 10px;
593 + margin-top: 10px;
601 594 }
602 595
603 -body[class*="toplevel_page_WP-Optimize"] #wpbody,
604 -body[class*="wp-optimize_page_"] #wpbody {
605 - padding-right: 15px;
596 +#wpo-server-info h2 {
597 + margin-top: 2.5em;
606 598 }
607 599
608 -@media screen and (max-width: 768px) {
600 +#wpo-server-info-report {
601 + display: none;
602 +}
609 603
610 - body[class*="toplevel_page_WP-Optimize"] #wpbody,
611 -body[class*="wp-optimize_page_"] #wpbody {
612 - padding-right: 0;
613 - }
604 +.wpo-settings-debug {
605 + max-height: 30vh;
606 + overflow: auto;
614 607 }
615 608
616 -body.toplevel_page_WP-Optimize.rtl #wpbody {
617 - padding-left: 15px;
618 - padding-right: 0;
609 +#wpo-status-report-container pre {
610 + white-space: pre-wrap;
611 + width: 100%;
619 612 }
613 +#wpo-status-report-container table td:first-child {
614 + width: 25%;
615 +}
620 616
621 -@media screen and (max-width: 768px) {
617 +#wpo-copy-action-result {
618 + display: none;
619 + font-style: italic;
620 +}
622 621
623 - body.toplevel_page_WP-Optimize.rtl #wpbody {
624 - padding-left: 10px;
625 - }
622 +#wpo_404_detector_results {
623 + margin-top: 15px;
626 624 }
627 625
628 -body[class*="toplevel_page_WP-Optimize"] #wpbody-content,
629 -body[class*="wp-optimize_page_"] #wpbody-content {
630 - padding-top: 80px;
626 +.wpo-404-requests {
627 + margin-top: 25px;
631 628 }
632 629
633 -@media (max-width: 600px) {
630 +.wpo-text-center {
631 + text-align: center;
632 +}
634 633
635 - body[class*="toplevel_page_WP-Optimize"] #wpbody-content,
636 -body[class*="wp-optimize_page_"] #wpbody-content {
637 - padding-top: 0;
638 - }
634 +th.wpo-thin-header {
635 + width: 125px;
639 636 }
640 637
641 -@media (min-width: 820px) {
638 +th.wpo-thin-header-2 {
639 + width: 175px;
640 +}
642 641
643 - body[class*="toplevel_page_WP-Optimize"] #wpbody-content,
644 -body[class*="wp-optimize_page_"] #wpbody-content {
645 - padding-top: 100px;
646 - }
642 +#wpo-save-options-response {
643 + margin-top: 10px;
644 + color: #009B24;
647 645 }
648 646
649 -#wp-optimize-wrap {
650 - position: relative;
651 - padding-top: 20px;
647 +#wpo-table-analysis-reload {
648 + float: right;
652 649 }
650 +#wpo-table-analysis-reload span {
651 + vertical-align: middle;
652 +}
653 653
654 -@media (max-width: 600px) {
654 +#wpo-wipe-table-usage-data {
655 + margin-top: 15px;
656 +}
655 657
656 - #wp-optimize-wrap {
657 - padding-top: 110px;
658 - }
658 +#wp-optimize-database-table-analysis {
659 + font-size: 13px;
659 660 }
661 +#wp-optimize-database-table-analysis table th {
662 + font-weight: bold;
663 +}
660 664
661 -@media (max-width: 782px) {
665 +#wpo-db-analysis-table-search {
666 + position: relative;
667 + top: 1px;
668 + height: 27px;
669 + padding-bottom: 3px;
670 +}
662 671
663 - #wp-optimize-wrap {
664 - margin-right: 0;
665 - }
672 +hr.wpo-thin-bar {
673 + height: 1px;
666 674 }
667 675
668 -/* DASHBOARD */
676 +.wpo-disabled-section {
677 + pointer-events: none;
678 + opacity: 0.4;
679 +}
669 680
670 -.wpo-main-header {
681 +@media screen and (min-width: 549px) {
682 + .show_on_default_sizes {
683 + display: block !important;
684 + }
685 + .show_on_mobile_sizes {
686 + display: none !important;
687 + }
688 +}
689 +@media screen and (max-width: 548px) {
690 + .show_on_default_sizes {
691 + display: none !important;
692 + }
693 + .show_on_mobile_sizes {
694 + display: block !important;
695 + }
696 +}
697 +@media screen and (max-width: 768px) {
698 + .wpo_col {
699 + margin: 1% 0;
700 + }
701 + .wpo_span_3_of_3 {
702 + width: 100%;
703 + }
704 + .wpo_span_2_of_3 {
705 + width: 100%;
706 + }
707 + .wpo_span_1_of_3 {
708 + width: 100%;
709 + }
710 + .wpo_half_width {
711 + width: 100%;
712 + }
713 +}
714 +@media screen and (min-width: 782px) {
715 + td.wp-optimize-settings-optimization-run {
716 + width: 180px;
717 + padding-top: 16px;
718 + }
719 +}
720 +@media (max-width: 782px) {
721 + .unused-image-sizes__label {
722 + margin-left: 30px;
723 + margin-bottom: 15px;
724 + line-height: 1;
725 + word-break: break-word;
726 + }
727 + .unused-image-sizes__label input[type=checkbox] {
728 + margin-left: -30px;
729 + }
730 + body.rtl .unused-image-sizes__label {
731 + margin-right: 30px;
732 + margin-left: 0;
733 + }
734 + body.rtl .unused-image-sizes__label input[type=checkbox] {
735 + margin-left: 4px;
736 + margin-right: -30px;
737 + }
738 +}
739 +body[class*=toplevel_page_WP-Optimize] #wpbody,
740 +body[class*=wp-optimize_page_] #wpbody {
741 + padding-right: 15px;
742 +}
743 +@media screen and (max-width: 768px) {
744 + body[class*=toplevel_page_WP-Optimize] #wpbody,
745 + body[class*=wp-optimize_page_] #wpbody {
746 + padding-right: 0;
747 + }
748 +}
671 749
672 - height: 77px;
673 - position: fixed;
674 - top: 32px;
675 - left: 160px;
676 - background: #FFF;
677 - right: 0;
678 - z-index: 9980;
750 +body.toplevel_page_WP-Optimize.rtl #wpbody {
751 + padding-left: 15px;
752 + padding-right: 0;
753 +}
754 +@media screen and (max-width: 768px) {
755 + body.toplevel_page_WP-Optimize.rtl #wpbody {
756 + padding-left: 10px;
757 + }
758 +}
679 759
760 +body[class*=toplevel_page_WP-Optimize] #wpbody-content,
761 +body[class*=wp-optimize_page_] #wpbody-content {
762 + padding-top: 80px;
680 763 }
764 +@media (max-width: 600px) {
765 + body[class*=toplevel_page_WP-Optimize] #wpbody-content,
766 + body[class*=wp-optimize_page_] #wpbody-content {
767 + padding-top: 0;
768 + }
769 +}
770 +@media (min-width: 820px) {
771 + body[class*=toplevel_page_WP-Optimize] #wpbody-content,
772 + body[class*=wp-optimize_page_] #wpbody-content {
773 + padding-top: 100px;
774 + }
775 +}
681 776
682 -@media (min-width: 820px) {
777 +#wp-optimize-wrap {
778 + position: relative;
779 + padding-top: 20px;
780 +}
781 +@media (max-width: 600px) {
782 + #wp-optimize-wrap {
783 + padding-top: 110px;
784 + }
785 +}
786 +@media (max-width: 782px) {
787 + #wp-optimize-wrap {
788 + margin-right: 0;
789 + }
790 +}
683 791
684 - .wpo-main-header {
685 - height: 105px;
686 - }
792 +/* DASHBOARD */
793 +@media (max-width: 600px) {
794 + body.auto-fold #wpcontent {
795 + padding-left: 0;
796 + }
687 797 }
688 798
799 +.wpo-main-header {
800 + height: 77px;
801 + position: fixed;
802 + top: 32px;
803 + left: 160px;
804 + background: #FFF;
805 + right: 0;
806 + z-index: 9980;
807 +}
808 +@media (min-width: 820px) {
809 + .wpo-main-header {
810 + height: 105px;
811 + }
812 +}
689 813 .wpo-main-header .wpo-logo__container {
690 - display: -ms-flexbox;
691 - display: flex;
692 - -ms-flex-direction: column;
693 - flex-direction: column;
694 - -ms-flex-pack: center;
695 - justify-content: center;
696 - position: relative;
697 - height: 100%;
698 - line-height: 1;
699 - font-size: 1rem;
700 - padding-left: 50px;
701 - margin-left: 10px;
814 + display: -ms-flexbox;
815 + display: flex;
816 + -ms-flex-direction: column;
817 + flex-direction: column;
818 + -ms-flex-pack: center;
819 + justify-content: center;
820 + position: relative;
821 + height: 100%;
822 + line-height: 1;
823 + font-size: 1rem;
824 + padding-left: 50px;
825 + margin-left: 10px;
702 826 }
703 -
704 827 .wpo-main-header .wpo-logo {
705 - position: absolute;
706 - left: 0;
707 - top: 50%;
708 - transform: translateY(-50%);
709 - width: 50px;
828 + position: absolute;
829 + left: 0;
830 + top: 50%;
831 + transform: translateY(-50%);
832 + width: 50px;
710 833 }
711 -
712 834 .wpo-main-header .wpo-subheader {
713 - margin: 0;
714 - font-weight: 300;
715 - color: #72777C;
716 - line-height: 1.3;
835 + margin: 0;
836 + font-weight: 300;
837 + color: #72777C;
838 + line-height: 1.3;
717 839 }
718 -
719 840 @media (max-width: 1080px) {
720 -
721 - .wpo-main-header .wpo-subheader {
722 - display: none;
723 - }
841 + .wpo-main-header .wpo-subheader {
842 + display: none;
843 + }
724 844 }
725 -
726 845 .wpo-main-header p.wpo-header-links {
727 - margin: 0;
728 - font-size: 0.7rem;
729 - position: absolute;
730 - right: 0;
731 - padding: 6px 15px;
732 - background: #EDEEEF;
733 - border-bottom-left-radius: 5px;
734 - z-index: 1;
846 + margin: 0;
847 + font-size: 0.7rem;
848 + position: absolute;
849 + right: 0;
850 + padding: 6px 15px;
851 + background: #EDEEEF;
852 + border-bottom-left-radius: 5px;
853 + z-index: 1;
735 854 }
736 -
737 855 .wpo-main-header p.wpo-header-links a {
738 - text-decoration: none;
739 - }
740 -
856 + text-decoration: none;
857 +}
741 858 .wpo-main-header p.wpo-header-links .wpo-header-links__label {
742 - color: #82868B;
743 - position: absolute;
744 - right: 100%;
745 - width: 110px;
746 - text-align: right;
747 - padding-right: 10px;
748 - }
749 -
859 + color: #82868B;
860 + position: absolute;
861 + right: 100%;
862 + width: 110px;
863 + text-align: right;
864 + padding-right: 10px;
865 +}
750 866 @media (max-width: 820px) {
751 -
752 - .wpo-main-header p.wpo-header-links {
753 - display: none;
754 - }
867 + .wpo-main-header p.wpo-header-links {
868 + display: none;
869 + }
755 870 }
756 -
757 871 .wpo-main-header p.wpo-header-links__mobile {
758 - padding: 10px;
759 - background: #EDEEEF;
760 - margin-bottom: 0;
872 + padding: 10px;
873 + background: #EDEEEF;
874 + margin-bottom: 0;
761 875 }
762 -
763 876 @media (min-width: 820px) {
764 -
765 - .wpo-main-header p.wpo-header-links__mobile {
766 - display: none;
767 - }
877 + .wpo-main-header p.wpo-header-links__mobile {
878 + display: none;
879 + }
768 880 }
769 -
770 881 .wpo-main-header p.wpo-header-links__mobile a {
771 - display: inline-block;
772 - padding: 4px;
773 - font-size: .8rem;
882 + display: inline-block;
883 + padding: 4px;
884 + font-size: 0.8rem;
774 885 }
775 -
776 886 .wpo-main-header p.wpo-header-links__mobile .wpo-header-links__label {
777 - color: #82868B;
887 + color: #82868B;
778 888 }
779 -
780 889 @media (max-width: 600px) {
781 -
782 - .wpo-main-header .wpo-logo__container strong {
783 - width: 140px;
784 - display: inline-block;
785 - }
890 + .wpo-main-header .wpo-logo__container strong {
891 + width: 140px;
892 + display: inline-block;
893 + }
786 894 }
787 -
788 895 @media (max-width: 960px) {
789 -
790 - body.auto-fold .wpo-main-header {
791 - left: 36px;
792 - }
896 + body.auto-fold .wpo-main-header {
897 + left: 36px;
898 + }
793 899 }
794 -
795 900 @media (max-width: 782px) {
796 -
797 - body.auto-fold .wpo-main-header {
798 - left: 0;
799 - top: -70px;
800 - position: absolute;
801 - }
901 + body.auto-fold .wpo-main-header {
902 + left: 0;
903 + top: -70px;
904 + position: absolute;
905 + }
802 906 }
803 -
804 907 @media (max-width: 600px) {
805 -
806 - body.auto-fold .wpo-main-header {
807 - position: absolute;
808 - left: -10px;
809 - right: -10px;
810 - top: 10px;
811 - }
908 + body.auto-fold .wpo-main-header {
909 + position: absolute;
910 + left: 0;
911 + right: 0;
912 + top: 10px;
913 + }
812 914 }
813 -
814 915 @media (max-width: 600px) {
815 -
816 - body.auto-fold #screen-meta + #wp-optimize-wrap .wpo-main-header {
817 - top: 0;
818 - }
916 + body.auto-fold #screen-meta + #wp-optimize-wrap .wpo-main-header {
917 + top: 0;
918 + }
819 919 }
820 -
821 920 @media (min-width: 782px) {
822 -
823 - body.folded .wpo-main-header {
824 - left: 36px;
825 - }
921 + body.folded .wpo-main-header {
922 + left: 36px;
923 + }
826 924 }
827 -
828 925 body.is-scrolled .wpo-main-header {
829 - box-shadow: 0 5px 25px rgba(0, 0, 0, 0.17);
926 + box-shadow: 0 5px 25px rgba(0, 0, 0, 0.17);
830 927 }
831 -
832 -/* RTL */
833 -
928 +.wpo-main-header {
929 + /* RTL */
930 +}
834 931 body.rtl .wpo-main-header {
835 - right: 160px;
836 - left: 0;
932 + right: 160px;
933 + left: 0;
837 934 }
838 -
839 935 body.rtl .wpo-main-header .wpo-logo__container {
840 - padding-left: 10px;
841 - padding-right: 50px;
842 - margin-left: 0;
843 - margin-right: 10px;
844 - }
845 -
936 + padding-left: 10px;
937 + padding-right: 50px;
938 + margin-left: 0;
939 + margin-right: 10px;
940 +}
846 941 body.rtl .wpo-main-header .wpo-logo {
847 - position: absolute;
848 - left: auto;
849 - right: 0;
850 - }
851 -
942 + position: absolute;
943 + left: auto;
944 + right: 0;
945 +}
852 946 body.rtl .wpo-main-header p.wpo-header-links {
853 - right: auto;
854 - left: 0;
855 - border-bottom-right-radius: 5px;
856 - border-bottom-left-radius: 0;
857 - }
858 -
947 + right: auto;
948 + left: 0;
949 + border-bottom-right-radius: 5px;
950 + border-bottom-left-radius: 0;
951 +}
859 952 body.rtl .wpo-main-header p.wpo-header-links .wpo-header-links__label {
860 - position: absolute;
861 - left: 100%;
862 - right: auto;
863 - width: 110px;
864 - text-align: left;
865 - padding-left: 10px;
866 - }
867 -
953 + position: absolute;
954 + left: 100%;
955 + right: auto;
956 + width: 110px;
957 + text-align: left;
958 + padding-left: 10px;
959 +}
868 960 @media (max-width: 960px) {
869 -
870 - body.rtl.auto-fold .wpo-main-header {
871 - right: 36px;
872 - }
961 + body.rtl.auto-fold .wpo-main-header {
962 + right: 36px;
963 + }
873 964 }
874 -
875 965 @media (max-width: 782px) {
876 -
877 - body.rtl.auto-fold .wpo-main-header {
878 - right: 0;
879 - top: 46px;
880 - }
966 + body.rtl.auto-fold .wpo-main-header {
967 + right: 0;
968 + top: 46px;
969 + }
881 970 }
882 -
883 971 @media (max-width: 600px) {
884 -
885 - body.rtl.auto-fold .wpo-main-header {
886 - position: absolute;
887 - left: -10px;
888 - right: -10px;
889 - top: 10px;
890 - }
972 + body.rtl.auto-fold .wpo-main-header {
973 + position: absolute;
974 + left: -10px;
975 + right: -10px;
976 + top: 10px;
977 + }
891 978 }
892 -
893 979 @media (min-width: 782px) {
894 -
895 - body.rtl.folded .wpo-main-header {
896 - right: 36px;
897 - left: 0;
898 - }
980 + body.rtl.folded .wpo-main-header {
981 + right: 36px;
982 + left: 0;
983 + }
899 984 }
900 985
901 986 body.rtl .wpo-page {
902 - padding-right: 0;
903 - }
904 -
905 -@media (min-width: 769px) {
906 -
907 - .wpo-page {}
987 + padding-right: 0;
908 988 }
909 -
910 989 .wpo-page:not(.active) {
911 - display: none;
990 + display: none;
912 991 }
913 992
914 993 .wpo-introduction-notice {
915 - padding: 15px 20px;
916 - margin-top: 30px;
917 - margin-bottom: 30px;
918 - background: #FFF url('../images/notices/logo-bg-notice.png') no-repeat 100% 100%;
994 + padding: 15px 20px;
995 + margin-top: 30px;
996 + margin-bottom: 30px;
997 + background: #FFF url("../images/notices/logo-bg-notice.png") no-repeat 100% 100%;
919 998 }
920 -
921 999 .wpo-introduction-notice h3 {
922 - font-size: 2em;
923 - }
924 -
1000 + font-size: 2em;
1001 +}
1002 +.wpo-introduction-notice > ul {
1003 + list-style-type: disc;
1004 + list-style-position: inside;
1005 +}
925 1006 .wpo-introduction-notice p:not(.font-size__normal) {
926 - font-size: 1.2em;
927 - }
928 -
1007 + font-size: 1.2em;
1008 +}
929 1009 .wpo-introduction-notice .wpo-introduction-notice__footer-links {
930 - padding-top: 20px;
931 - }
932 -
1010 + padding-top: 20px;
1011 +}
933 1012 .wpo-introduction-notice .wpo-introduction-notice__footer-links > a, .wpo-introduction-notice .wpo-introduction-notice__footer-links > span {
934 - display: inline-block;
935 - margin-left: 5px;
936 - margin-right: 5px;
937 - }
1013 + display: inline-block;
1014 + margin-left: 5px;
1015 + margin-right: 5px;
1016 +}
938 1017
939 1018 /* Columns */
940 -
941 1019 @media (min-width: 1200px) {
942 -
943 - .wpo-tab-postbox.right-col {
944 - width: 350px;
945 - float: right;
946 - box-sizing: border-box;
947 - margin-top: 3.1rem;
948 - }
949 -
950 - .right-col + .wpo-main {
951 - float: left;
952 - box-sizing: border-box;
953 - width: calc(100% - 380px);
954 - }
955 -
1020 + .wpo-tab-postbox.right-col {
1021 + width: 350px;
1022 + float: right;
1023 + box-sizing: border-box;
1024 + margin-top: 3.1rem;
1025 + }
1026 + .right-col + .wpo-main {
1027 + float: left;
1028 + box-sizing: border-box;
1029 + width: calc(100% - 380px);
1030 + }
956 1031 }
957 -
958 1032 @keyframes rotate {
959 -
960 - 0% {
961 - transform: rotate(0);
962 - }
963 -
964 - 100% {
965 - transform: rotate(360deg);
966 - }
967 -
1033 + 0% {
1034 + transform: rotate(0);
1035 + }
1036 + 100% {
1037 + transform: rotate(360deg);
1038 + }
968 1039 }
969 -
970 1040 /* Common BLOCKS */
971 -
972 1041 /* Buttons */
973 -
974 1042 @media (max-width: 782px) {
975 -
976 - #wp-optimize-wrap .button-large {
977 - display: block;
978 - width: 100%;
979 - }
1043 + #wp-optimize-wrap #wpo-load-tables-in-batches.button {
1044 + margin-bottom: 15px;
1045 + }
980 1046 }
981 -
1047 +@media (max-width: 782px) {
1048 + #wp-optimize-wrap .button-large {
1049 + display: block;
1050 + width: 100%;
1051 + }
1052 +}
982 1053 #wp-optimize-wrap .red {
983 - color: #E07575;
1054 + color: #F00;
984 1055 }
985 -
986 -#wp-optimize-wrap div[id*="_notice"] div.updated,
987 - #wp-optimize-wrap > .notice {
988 - margin-left: 0;
989 - margin-right: 0;
1056 +#wp-optimize-wrap div[id*=_notice] div.updated,
1057 +#wp-optimize-wrap > .notice {
1058 + margin-left: 0;
1059 + margin-right: 0;
990 1060 }
991 -
992 1061 #wp-optimize-wrap textarea {
993 - width: 100%;
994 - border-radius: 5px;
995 - height: 100px;
996 - min-height: 100px;
997 - margin-top: 10px;
998 - margin-bottom: 10px;
1062 + width: 100%;
1063 + border-radius: 5px;
1064 + height: 100px;
1065 + min-height: 100px;
1066 + margin-top: 10px;
1067 + margin-bottom: 10px;
999 1068 }
1000 1069
1001 1070 .notice.notice-error.wpo-warning,
1002 1071 .notice.notice-warning.wpo-warning {
1003 - margin-bottom: 18px;
1072 + margin-bottom: 18px;
1004 1073 }
1005 1074
1006 1075 .notice.notice-warning.wpo-warning p {
1007 - padding-left: 36px;
1008 - position: relative;
1076 + padding-left: 36px;
1077 + position: relative;
1009 1078 }
1010 1079
1011 1080 .notice.notice-warning.wpo-warning p > .dashicons {
1012 - position: absolute;
1013 - left: 0;
1014 - font-size: 26px;
1015 - top: 50%;
1016 - transform: translateY(-50%);
1017 - height: 26px;
1018 - color: #FFB900;
1081 + position: absolute;
1082 + left: 0;
1083 + font-size: 26px;
1084 + top: 50%;
1085 + transform: translateY(-50%);
1086 + height: 26px;
1087 + color: #FFB900;
1019 1088 }
1020 1089
1021 1090 .button.button-block {
1022 - display: block;
1023 - width: 100%;
1024 - text-align: center;
1091 + display: block;
1092 + width: 100%;
1093 + text-align: center;
1025 1094 }
1026 1095
1027 1096 .wpo-refresh-button {
1028 - float: right;
1097 + float: right;
1029 1098 }
1030 1099
1031 1100 .wpo-refresh-button:hover {
1032 - cursor: pointer;
1101 + cursor: pointer;
1033 1102 }
1034 1103
1035 1104 .wpo-refresh-button .dashicons {
1036 - text-decoration: none;
1037 - line-height: inherit;
1038 - font-size: inherit;
1105 + text-decoration: none;
1106 + line-height: inherit;
1107 + font-size: inherit;
1039 1108 }
1040 1109
1041 1110 /* Helper classes */
1042 -
1043 -*[class*="wpo-badge"] {
1044 - display: inline-block;
1045 - font-size: .8em;
1046 - text-transform: uppercase;
1047 - background: #F2F4F5;
1048 - padding: 3px 5px;
1049 - line-height: 1;
1050 - border-radius: 3px;
1111 +*[class*=wpo-badge] {
1112 + display: inline-block;
1113 + font-size: 0.8em;
1114 + text-transform: uppercase;
1115 + background: #F2F4F5;
1116 + padding: 3px 5px;
1117 + line-height: 1;
1118 + border-radius: 3px;
1051 1119 }
1052 1120
1053 1121 .wpo-badge__new {
1054 - background: #DBE3E6;
1055 - color: #00689a;
1122 + background: #DBE3E6;
1123 + color: #00689a;
1056 1124 }
1057 1125
1058 1126 .wpo-first-child {
1059 - margin-top: 0;
1127 + margin-top: 0;
1060 1128 }
1129 +.wpo-first-child span {
1130 + font-size: 10px;
1131 + color: #3c434a;
1132 + font-weight: normal;
1133 +}
1061 1134
1062 -#save_done, .save-done {
1063 - color: #009B24;
1064 - font-size: 250%;
1135 +.save-done {
1136 + color: #009B24;
1137 + font-size: 30px;
1065 1138 }
1066 1139
1140 +.wpo-save-btn-container {
1141 + display: -ms-flexbox;
1142 + display: flex;
1143 + -ms-flex-wrap: wrap;
1144 + flex-wrap: wrap;
1145 + -ms-flex-direction: row;
1146 + flex-direction: row;
1147 + -ms-flex-align: center;
1148 + align-items: center;
1149 + gap: 5px;
1150 +}
1151 +.wpo-save-btn-container .wpo_spinner {
1152 + width: 20px;
1153 + height: 20px;
1154 + padding-left: 10px;
1155 + display: none;
1156 + position: relative;
1157 + top: 0;
1158 +}
1159 +.wpo-save-btn-container .save-done {
1160 + width: 30px;
1161 + height: 30px;
1162 + font-size: 30px;
1163 +}
1164 +
1067 1165 p.wpo-take-a-backup {
1068 - display: inline-block;
1069 - margin: 0;
1070 - line-height: 1;
1071 - padding-top: 8px;
1166 + display: inline-block;
1167 + margin: 0;
1168 + line-height: 1;
1169 + padding-top: 8px;
1072 1170 }
1073 1171
1074 1172 @media (min-width: 782px) {
1075 - .button ~ p.wpo-take-a-backup {
1076 - margin-left: 20px;
1077 - }
1173 + .button ~ p.wpo-take-a-backup {
1174 + margin-left: 20px;
1175 + }
1176 + #wpo-load-tables-in-batches.button {
1177 + margin-right: 15px;
1178 + }
1078 1179 }
1079 -
1080 1180 /* Postbox */
1081 -
1082 1181 #wp-optimize-wrap .nav-tab-wrapper ~ .wp-optimize-nav-tab-contents > .postbox {
1083 - border: none;
1084 -
1182 + border: none;
1085 1183 }
1086 -
1087 1184 #wp-optimize-wrap .nav-tab-wrapper ~ .wp-optimize-nav-tab-contents > .postbox > h3:first-child {
1088 - margin-top: 0;
1089 - }
1185 + margin-top: 0;
1186 +}
1090 1187
1091 1188 .wpo-p25,
1092 1189 .postbox.wpo-tab-postbox {
1093 - padding: 25px;
1190 + padding: 25px;
1094 1191 }
1192 +@media (max-width: 480px) {
1193 + .wpo-p25,
1194 + .postbox.wpo-tab-postbox {
1195 + padding: 15px;
1196 + }
1197 +}
1095 1198
1096 1199 .wpo-tab-postbox > h3:first-child {
1097 - margin-top: 0;
1098 - }
1200 + margin-top: 0;
1201 +}
1099 1202
1100 1203 /* Field group */
1101 -
1102 1204 .wpo-fieldgroup {
1103 - background: #F2F4F5;
1104 - border-radius: 8px;
1105 - padding: 20px
1106 -
1205 + background: #F2F4F5;
1206 + border-radius: 8px;
1207 + padding: 20px 18px;
1107 1208 }
1108 -
1109 1209 .wpo-fieldgroup:not(:last-child) {
1110 - margin-bottom: 2em;
1210 + margin-bottom: 2em;
1111 1211 }
1112 -
1113 1212 .wpo-fieldgroup > *:first-child {
1114 - margin-top: 0;
1213 + margin-top: 0;
1115 1214 }
1116 -
1117 1215 .wpo-fieldgroup > *:last-child {
1118 - margin-bottom: 0;
1216 + margin-bottom: 0;
1119 1217 }
1120 -
1121 1218 .wpo-fieldgroup.premium-only {
1122 - position: relative;
1219 + position: relative;
1123 1220 }
1124 -
1125 1221 .wpo-fieldgroup .switch + label {
1126 - font-weight: 600;
1222 + font-weight: 600;
1127 1223 }
1128 -
1129 1224 .wpo-fieldgroup code, .wpo-fieldgroup pre.code {
1130 - font-size: inherit;
1131 - background: #d8dbdc;
1132 - border-radius: 3px;
1225 + font-size: inherit;
1226 + background: #d8dbdc;
1227 + border-radius: 3px;
1133 1228 }
1134 -
1135 1229 .wpo-fieldgroup pre.code {
1136 - padding: 10px;
1230 + padding: 10px;
1137 1231 }
1138 -
1232 +.wpo-fieldgroup ul.wpo-minify-cache-size li {
1233 + line-height: normal;
1234 +}
1139 1235 .wpo-fieldgroup fieldset label {
1140 - display: block;
1141 - margin-bottom: 6px;
1142 - line-height: 20px;
1143 - }
1236 + display: block;
1237 + line-height: 20px;
1238 +}
1239 +.wpo-fieldgroup fieldset .wpo-fieldgroup__subgroup {
1240 + margin-bottom: 6px;
1241 +}
1242 +.wpo-fieldgroup fieldset .wpo-fieldgroup__subgroup label {
1243 + display: inline;
1244 +}
1144 1245
1145 1246 .wpo-fieldgroup__subgroup:not(:last-of-type) {
1146 - margin-bottom: 20px;
1247 + margin-bottom: 20px;
1147 1248 }
1148 1249
1149 1250 /* The switches */
1150 -
1151 1251 #wp-optimize-wrap .switch {
1152 - position: relative;
1153 - display: inline-block;
1154 - width: 38px;
1155 - height: 18px;
1156 - margin-right: 6px;
1157 - box-sizing: border-box;
1158 -
1159 - }
1160 -
1161 -/* Hide default HTML checkbox */
1162 -
1252 + position: relative;
1253 + display: inline-block;
1254 + width: 38px;
1255 + height: 18px;
1256 + margin-right: 6px;
1257 + box-sizing: border-box;
1258 + /* Hide default HTML checkbox */
1259 +}
1163 1260 #wp-optimize-wrap .switch input {
1164 - opacity: 0;
1165 - width: 0;
1166 - height: 0;
1167 - }
1168 -
1169 -/* The slider */
1170 -
1261 + opacity: 0;
1262 + width: 0;
1263 + height: 0;
1264 +}
1265 +#wp-optimize-wrap .switch {
1266 + /* The slider */
1267 +}
1171 1268 #wp-optimize-wrap .switch .slider {
1172 - position: absolute;
1173 - cursor: pointer;
1174 - top: 0;
1175 - left: 0;
1176 - right: 0;
1177 - bottom: 0;
1178 - background-color: #F2F4F5;
1179 - transition: .2s
1180 -
1181 - }
1182 -
1269 + position: absolute;
1270 + cursor: pointer;
1271 + top: 0;
1272 + left: 0;
1273 + right: 0;
1274 + bottom: 0;
1275 + background-color: #F2F4F5;
1276 + transition: 0.2s;
1277 +}
1183 1278 #wp-optimize-wrap .switch .slider::before {
1184 - position: absolute;
1185 - content: "";
1186 - height: 8px;
1187 - width: 8px;
1188 - left: 2px;
1189 - bottom: 2px;
1190 - background-color: #555d66;
1191 - border: 1px solid #555d66;
1192 - transition: all .2s;
1279 + position: absolute;
1280 + content: "";
1281 + height: 8px;
1282 + width: 8px;
1283 + left: 2px;
1284 + bottom: 2px;
1285 + background-color: #555d66;
1286 + border: 1px solid #555d66;
1287 + transition: all 0.2s;
1193 1288 }
1194 -
1195 1289 #wp-optimize-wrap .switch .slider::after {
1196 - content: '';
1197 - display: block;
1198 - position: absolute;
1199 - height: 4px;
1200 - width: 3px;
1201 - right: 4px;
1202 - top: 4px;
1203 - border-radius: 50%;
1204 - border: 1px solid #72777C;
1205 - box-sizing: content-box;
1290 + content: "";
1291 + display: block;
1292 + position: absolute;
1293 + height: 4px;
1294 + width: 3px;
1295 + right: 4px;
1296 + top: 4px;
1297 + border-radius: 50%;
1298 + border: 1px solid #72777C;
1299 + box-sizing: content-box;
1206 1300 }
1207 -
1208 -#wp-optimize-wrap .switch .slider {/* Rounded sliders */
1301 +#wp-optimize-wrap .switch .slider {
1302 + /* Rounded sliders */
1209 1303 }
1210 -
1211 1304 #wp-optimize-wrap .switch .slider.round {
1212 - border-radius: 23px;
1213 - border: 2px solid #555d66;
1305 + border-radius: 23px;
1306 + border: 2px solid #555d66;
1214 1307 }
1215 -
1216 1308 #wp-optimize-wrap .switch .slider.round::before {
1217 - border-radius: 50%;
1309 + border-radius: 50%;
1218 1310 }
1219 -
1220 1311 #wp-optimize-wrap .switch input:checked + .slider {
1221 - background: #0272AA;
1222 - border-color: #0272AA
1223 -
1224 - }
1225 -
1312 + background: var(--wp-admin-theme-color, #0272AA);
1313 + border-color: var(--wp-admin-theme-color, #0272AA);
1314 +}
1226 1315 #wp-optimize-wrap .switch input:checked + .slider::before {
1227 - background: #FFF;
1228 - border-color: #FFF;
1229 - transform: translateX(20px);
1316 + background: #FFF;
1317 + border-color: #FFF;
1318 + transform: translateX(20px);
1230 1319 }
1231 -
1232 1320 #wp-optimize-wrap .switch input:checked + .slider::after {
1233 - content: '';
1234 - display: block;
1235 - position: absolute;
1236 - height: 6px;
1237 - width: 2px;
1238 - left: 7px;
1239 - top: 4px;
1240 - background: #FFF;
1241 - border: none;
1321 + content: "";
1322 + display: block;
1323 + position: absolute;
1324 + height: 6px;
1325 + width: 2px;
1326 + left: 7px;
1327 + top: 4px;
1328 + background: #FFF;
1329 + border: none;
1242 1330 }
1243 -
1244 1331 #wp-optimize-wrap .switch input:disabled + .slider,
1245 - #wp-optimize-wrap .switch input:disabled:checked + .slider {
1246 - background: transparentize(#555d66, 0.5);
1247 - border-color: #555d66;
1248 - opacity: 0.3;
1249 - }
1250 -
1332 +#wp-optimize-wrap .switch input:disabled:checked + .slider {
1333 + background: rgba(85, 93, 102, 0.5);
1334 + border-color: #555d66;
1335 + opacity: 0.3;
1336 +}
1251 1337 #wp-optimize-wrap .switch input:focus + .slider {
1252 - box-shadow: 0 0 0 2px #F2F4F5, 0 0 0 3px #555d66;
1253 - }
1254 -
1338 + box-shadow: 0 0 0 2px #F2F4F5, 0 0 0 3px #555d66;
1339 +}
1255 1340 #wp-optimize-wrap .switch-container {
1256 - display: block;
1257 - clear: both;
1258 - }
1259 -
1341 + display: block;
1342 + clear: both;
1343 +}
1260 1344 #wp-optimize-wrap .switch-container label {
1261 - line-height: 1;
1262 - vertical-align: middle;
1263 - }
1264 -
1345 + line-height: 1;
1346 + vertical-align: middle;
1347 +}
1265 1348 #wp-optimize-wrap .switch-container + small {
1266 - margin-left: 49px;
1349 + margin-left: 49px;
1267 1350 }
1268 -
1269 -#wp-optimize-wrap .switch-container [data-tooltip] .dashicons {
1270 - transform: translateY(-3px);
1351 +#wp-optimize-wrap .wpo-fieldgroup > .switch-container:first-child {
1352 + padding-top: 0;
1271 1353 }
1272 1354
1273 -#wp-optimize-wrap .wpo-fieldgroup > .switch-container:first-child {
1274 - padding-top: 0;
1275 - }
1276 -
1277 1355 label.wpo-label__bold {
1278 - font-weight: 600;
1356 + font-weight: 600;
1279 1357 }
1280 1358
1281 1359 /* Help popup */
1282 -
1283 1360 .wpo-info {
1284 - position: relative;
1285 - display: inline-block;
1361 + position: relative;
1362 + display: inline-block;
1286 1363 }
1287 -
1288 -@media (max-width:480px) {
1289 -
1290 - .wpo-info {
1291 - display: block;
1292 - }
1364 +@media (max-width: 480px) {
1365 + .wpo-info {
1366 + display: block;
1367 + }
1293 1368 }
1294 1369
1295 1370 .wpo-info__content {
1296 - opacity: 0;
1297 - visibility: hidden;
1298 - position: absolute;
1299 - top: 100%;
1300 - left: -25px;
1301 - background: #FFF;
1302 - padding: 20px;
1303 - width: 380px;
1304 - max-width: 380px;
1305 - z-index: 5;
1306 - box-shadow: 0px 11px 25px 0px rgba(0, 0, 0, 0), 0px 11px 25px 3000px rgba(0, 0, 0, 0);
1307 - transition: 0.2s all;
1371 + opacity: 0;
1372 + visibility: hidden;
1373 + position: absolute;
1374 + top: 100%;
1375 + left: -25px;
1376 + background: #FFF;
1377 + padding: 20px;
1378 + width: 380px;
1379 + max-width: 380px;
1380 + z-index: 5;
1381 + box-shadow: 0px 11px 25px 0px rgba(0, 0, 0, 0), 0px 11px 25px 3000px rgba(0, 0, 0, 0);
1382 + transition: 0.2s all;
1308 1383 }
1309 -
1310 -@media (max-width:480px) {
1311 -
1312 - .wpo-info__content {
1313 - width: auto;
1314 - }
1384 +@media (max-width: 480px) {
1385 + .wpo-info__content {
1386 + width: auto;
1387 + }
1315 1388 }
1316 1389
1317 1390 span.wpo-info__close {
1318 - display: none;
1319 - margin-left: 20px;
1320 - color: #444;
1391 + display: none;
1392 + margin-left: 20px;
1393 + color: #444;
1321 1394 }
1322 1395
1323 1396 .wpo-info.opened span.wpo-info__close {
1324 - display: inline-block;
1325 - }
1326 -
1397 + display: inline-block;
1398 +}
1327 1399 .wpo-info.opened .wpo-info__content {
1328 - opacity: 1;
1329 - visibility: visible;
1330 - box-shadow: 0px 11px 25px 0px rgba(0, 0, 0, 0.3), 0px 11px 25px 3000px rgba(0, 0, 0, 0.3);
1331 - }
1332 -
1400 + opacity: 1;
1401 + visibility: visible;
1402 + box-shadow: 0px 11px 25px 0px rgba(0, 0, 0, 0.3), 0px 11px 25px 3000px rgba(0, 0, 0, 0.3);
1403 +}
1333 1404 .wpo-info.opened a.wpo-info__trigger {
1334 - z-index: 6;
1335 - }
1405 + z-index: 6;
1406 +}
1336 1407
1337 1408 .wpo-info__content img,
1338 1409 .wpo-info__content iframe {
1339 - max-width: 100%;
1410 + max-width: 100%;
1340 1411 }
1341 1412
1342 1413 a.wpo-info__trigger {
1343 - display: inline-block;
1344 - text-decoration: none;
1345 - padding: 10px;
1346 - position: relative;
1347 - background: #FFF;
1348 - margin-left: -10px;
1414 + display: inline-block;
1415 + text-decoration: none;
1416 + padding: 10px;
1417 + position: relative;
1418 + background: #FFF;
1419 + margin-left: -10px;
1349 1420 }
1350 1421
1351 1422 a.wpo-info__trigger span.dashicons {
1352 - text-decoration: none;
1353 - vertical-align: middle;
1423 + text-decoration: none;
1424 + vertical-align: middle;
1354 1425 }
1355 1426
1356 1427 .wpo_section.wpo_group.wpo-feature-is-disabled .wpo-fieldgroup:not(.wpo-show) {
1357 - opacity: 0.5;
1428 + opacity: 0.5;
1358 1429 }
1359 1430
1360 1431 /* Custom Block UI */
1361 -
1362 1432 .wpo_shade {
1363 - display: block;
1364 - position: absolute;
1365 - left: 0;
1366 - right: 0;
1367 - top: 0;
1368 - bottom: 0;
1369 - width: 100%;
1370 - height: 100%;
1371 - z-index: 9979;
1372 - opacity: 1;
1373 - background-color: rgba(255, 255, 255, 0.88);
1433 + display: block;
1434 + position: absolute;
1435 + left: 0;
1436 + right: 0;
1437 + top: 0;
1438 + bottom: 0;
1439 + width: 100%;
1440 + height: 100%;
1441 + z-index: 9979;
1442 + opacity: 1;
1443 + background-color: rgba(255, 255, 255, 0.88);
1374 1444 }
1375 1445
1376 1446 .wpo_shade.hidden {
1377 - display: none;
1447 + display: none;
1378 1448 }
1379 1449
1380 1450 .wpo_shade_inner {
1381 - text-align: center;
1382 - padding-top: 80px;
1451 + text-align: center;
1452 + padding-top: 80px;
1383 1453 }
1384 1454
1385 1455 .wpo_shade_inner h4 {
1386 - font-size: 2em;
1456 + font-size: 2em;
1387 1457 }
1388 1458
1389 1459 .wpo_shade_inner .dashicons.dashicons-update-alt {
1390 - font-size: 50px;
1391 - height: 50px;
1392 - width: 50px;
1460 + font-size: 50px;
1461 + height: 50px;
1462 + width: 50px;
1393 1463 }
1394 1464
1395 1465 .wpo-rotate {
1396 - animation: rotate 1s linear infinite;
1397 - transform-origin: 50% 50%;
1466 + animation: rotate 1s linear infinite;
1467 + transform-origin: 50% 50%;
1398 1468 }
1399 1469
1400 1470 .wpo-info.highlight-dashicons span.dashicons {
1401 - color: green;
1402 - font-weight: bold;
1471 + color: green;
1472 + font-weight: bold;
1403 1473 }
1404 1474
1475 +p.wpo-description-show-links {
1476 + z-index: 999;
1477 + position: relative;
1478 +}
1479 +
1405 1480 /* TABS */
1406 -
1407 1481 #wp-optimize-wrap h2.nav-tab-wrapper {
1408 - margin-bottom: 0;
1409 - border-bottom: none;
1410 - position: relative;
1482 + margin-bottom: 0;
1483 + border-bottom: none;
1484 + position: relative;
1411 1485 }
1412 -
1413 1486 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab,
1414 - #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:hover,
1415 - #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus,
1416 - #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus:active {
1417 - border: none;
1418 - background: transparent;
1419 - margin: 0;
1420 - border-top: 3px solid transparent;
1421 - padding: 7px 15px;
1422 - color: #0272AA;
1423 - }
1424 -
1425 -#wp-optimize-wrap h2.nav-tab-wrapper .nav-tab .dashicons, #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:hover .dashicons, #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus .dashicons, #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus:active .dashicons {
1426 - display: block;
1427 - margin: 0 auto;
1428 - color: #72777C;
1429 - font-size: 30px;
1430 - width: 30px;
1431 - height: 30px;
1432 - }
1433 -
1434 -#wp-optimize-wrap h2.nav-tab-wrapper .nav-tab span.menu-pill, #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:hover span.menu-pill, #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus span.menu-pill, #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus:active span.menu-pill {
1435 - display: inline-block;
1436 - margin-left: 6px;
1437 - padding: 4px;
1438 - font-size: 10px;
1439 - line-height: 1;
1440 - border-radius: 3px;
1441 - font-weight: 300;
1442 - text-transform: uppercase;
1443 - letter-spacing: .06em
1444 - }
1445 -
1446 -#wp-optimize-wrap h2.nav-tab-wrapper .nav-tab span.menu-pill.premium-only, #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:hover span.menu-pill.premium-only, #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus span.menu-pill.premium-only, #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus:active span.menu-pill.premium-only {
1447 - background: #0272AA;
1448 - color: #FFF;
1487 +#wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:hover,
1488 +#wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus,
1489 +#wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus:active {
1490 + border: none;
1491 + background: transparent;
1492 + margin: 0;
1493 + border-top: 3px solid transparent;
1494 + padding: 7px 15px;
1495 + color: var(--wp-admin-theme-color, #0272AA);
1449 1496 }
1450 -
1451 -#wp-optimize-wrap h2.nav-tab-wrapper .nav-tab span.menu-pill.disabled, #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:hover span.menu-pill.disabled, #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus span.menu-pill.disabled, #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus:active span.menu-pill.disabled {
1452 - background: #777;
1453 - color: #FFF;
1497 +#wp-optimize-wrap h2.nav-tab-wrapper .nav-tab .dashicons,
1498 +#wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:hover .dashicons,
1499 +#wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus .dashicons,
1500 +#wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus:active .dashicons {
1501 + display: block;
1502 + margin: 0 auto;
1503 + color: #72777C;
1504 + font-size: 30px;
1505 + width: 30px;
1506 + height: 30px;
1454 1507 }
1455 -
1456 -#wp-optimize-wrap h2.nav-tab-wrapper .nav-tab span.menu-pill.hidden, #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:hover span.menu-pill.hidden, #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus span.menu-pill.hidden, #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus:active span.menu-pill.hidden {
1457 - display: none;
1508 +#wp-optimize-wrap h2.nav-tab-wrapper .nav-tab span.menu-pill,
1509 +#wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:hover span.menu-pill,
1510 +#wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus span.menu-pill,
1511 +#wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus:active span.menu-pill {
1512 + display: inline-block;
1513 + margin-left: 6px;
1514 + padding: 4px;
1515 + font-size: 10px;
1516 + line-height: 1;
1517 + border-radius: 3px;
1518 + font-weight: 300;
1519 + text-transform: uppercase;
1520 + letter-spacing: 0.06em;
1458 1521 }
1459 -
1522 +#wp-optimize-wrap h2.nav-tab-wrapper .nav-tab span.menu-pill.premium-only,
1523 +#wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:hover span.menu-pill.premium-only,
1524 +#wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus span.menu-pill.premium-only,
1525 +#wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus:active span.menu-pill.premium-only {
1526 + background: var(--wp-admin-theme-color, #0272AA);
1527 + color: #FFF;
1528 +}
1529 +#wp-optimize-wrap h2.nav-tab-wrapper .nav-tab span.menu-pill.disabled,
1530 +#wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:hover span.menu-pill.disabled,
1531 +#wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus span.menu-pill.disabled,
1532 +#wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus:active span.menu-pill.disabled {
1533 + background: #777;
1534 + color: #FFF;
1535 +}
1536 +#wp-optimize-wrap h2.nav-tab-wrapper .nav-tab span.menu-pill.hidden,
1537 +#wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:hover span.menu-pill.hidden,
1538 +#wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus span.menu-pill.hidden,
1539 +#wp-optimize-wrap h2.nav-tab-wrapper .nav-tab:focus:active span.menu-pill.hidden {
1540 + display: none;
1541 +}
1460 1542 #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active,
1461 - #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active:hover,
1462 - #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active:focus,
1463 - #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active:focus:active {
1464 - background: #FFF;
1465 - box-shadow: 0 0 1px rgba(0, 0, 0, 0.04);
1466 - border-top-color: #0272AA;
1467 - }
1468 -
1469 -#wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active .dashicons, #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active:hover .dashicons, #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active:focus .dashicons, #wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active:focus:active .dashicons {
1470 - color: #0272AA;
1471 - }
1472 -
1543 +#wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active:hover,
1544 +#wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active:focus,
1545 +#wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active:focus:active {
1546 + background: #FFF;
1547 + box-shadow: 0 0 1px rgba(0, 0, 0, 0.04);
1548 + border-top-color: var(--wp-admin-theme-color, #0272AA);
1549 +}
1550 +#wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active .dashicons,
1551 +#wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active:hover .dashicons,
1552 +#wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active:focus .dashicons,
1553 +#wp-optimize-wrap h2.nav-tab-wrapper .nav-tab-active:focus:active .dashicons {
1554 + color: var(--wp-admin-theme-color, #0272AA);
1555 +}
1473 1556 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback {
1474 - display: block;
1475 - float: right;
1476 - position: relative;
1477 - }
1478 -
1557 + display: block;
1558 + float: right;
1559 + position: relative;
1560 +}
1479 1561 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > .nav-tab,
1480 - #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > .nav-tab:hover,
1481 - #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > .nav-tab:focus,
1482 - #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > .nav-tab:focus:active {
1483 - position: relative;
1484 - }
1485 -
1486 -#wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > .nav-tab .dashicons, #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > .nav-tab:hover .dashicons, #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > .nav-tab:focus .dashicons, #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > .nav-tab:focus:active .dashicons {
1487 - display: inline-block;
1488 - font-size: 20px;
1489 - height: 18px;
1490 - transform: translateY(4px);
1491 - }
1492 -
1493 -#wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > div {
1494 - display: none;
1495 - }
1496 -
1562 +#wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > .nav-tab:hover,
1563 +#wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > .nav-tab:focus,
1564 +#wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > .nav-tab:focus:active {
1565 + position: relative;
1566 +}
1567 +#wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > .nav-tab .dashicons,
1568 +#wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > .nav-tab:hover .dashicons,
1569 +#wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > .nav-tab:focus .dashicons,
1570 +#wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > .nav-tab:focus:active .dashicons {
1571 + display: inline-block;
1572 + font-size: 20px;
1573 + height: 18px;
1574 + transform: translateY(4px);
1575 +}
1576 +#wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback > span {
1577 + display: none;
1578 +}
1497 1579 #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback:hover a.nav-tab::after {
1498 - content: '';
1499 - display: block;
1500 - position: absolute;
1501 - bottom: 0;
1502 - right: 0;
1503 - height: 2px;
1504 - width: 100%;
1505 - background-color: #0172aa;
1580 + content: "";
1581 + display: block;
1582 + position: absolute;
1583 + bottom: 0;
1584 + right: 0;
1585 + height: 2px;
1586 + width: 100%;
1587 + background-color: #0172aa;
1506 1588 }
1507 -
1508 -#wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback:hover > div {
1509 - position: absolute;
1510 - display: block;
1511 - background: #FFF;
1512 - padding: 15px;
1513 - right: 0;
1514 - top: 100%;
1515 - z-index: 4;
1516 - box-shadow: 0px 11px 25px 0px rgba(0, 0, 0, 0.1);
1517 - width: 350px;
1589 +#wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback:hover > span {
1590 + position: absolute;
1591 + display: block;
1592 + background: #FFF;
1593 + padding: 15px;
1594 + right: 0;
1595 + top: 100%;
1596 + z-index: 4;
1597 + box-shadow: 0px 11px 25px 0px rgba(0, 0, 0, 0.1);
1598 + width: 350px;
1518 1599 }
1519 -
1520 -#wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback:hover > div a {
1521 - display: block;
1522 - font-size: 14px;
1523 - font-weight: normal;
1524 - padding: 6px 3px;
1525 - text-align: center;
1526 - }
1527 -
1600 +#wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback:hover > span a {
1601 + display: block;
1602 + font-size: 14px;
1603 + font-weight: normal;
1604 + padding: 6px 3px;
1605 + text-align: center;
1606 +}
1528 1607 @media (max-width: 782px) {
1529 -
1530 - #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback {
1531 - display: none;
1532 - }
1533 -
1534 - #wp-optimize-wrap h2.nav-tab-wrapper a:not(.nav-tab-active) {
1535 - display: none;
1536 - }
1608 + #wp-optimize-wrap h2.nav-tab-wrapper .wpo-feedback {
1609 + display: none;
1610 + }
1611 + #wp-optimize-wrap h2.nav-tab-wrapper a:not(.nav-tab-active) {
1612 + display: none;
1613 + }
1537 1614 }
1538 -
1539 -#wp-optimize-wrap h2.nav-tab-wrapper a[role="toggle-menu"] {
1540 - display: block;
1541 - float: right;
1615 +#wp-optimize-wrap h2.nav-tab-wrapper button.nav-tab {
1616 + display: block;
1617 + float: right;
1542 1618 }
1543 -
1544 1619 @media (min-width: 782px) {
1545 -
1546 - #wp-optimize-wrap h2.nav-tab-wrapper a[role="toggle-menu"] {
1547 - display: none;
1548 - }
1620 + #wp-optimize-wrap h2.nav-tab-wrapper button.nav-tab {
1621 + display: none;
1622 + }
1549 1623 }
1550 -
1551 1624 #wp-optimize-wrap h2.nav-tab-wrapper a.nav-tab.wp-optimize-nav-tab__back, #wp-optimize-wrap h2.nav-tab-wrapper a.nav-tab.wp-optimize-nav-tab__back:focus:active {
1552 - text-align: right;
1625 + text-align: right;
1553 1626 }
1554 -
1555 1627 #wp-optimize-wrap h2.nav-tab-wrapper a.nav-tab.wp-optimize-nav-tab__back .dashicons, #wp-optimize-wrap h2.nav-tab-wrapper a.nav-tab.wp-optimize-nav-tab__back:focus:active .dashicons {
1556 - color: #B5B9BE;
1557 - font-size: 18px;
1558 - display: inline-block;
1559 - height: auto;
1560 - line-height: inherit;
1561 - width: 20px;
1628 + color: #B5B9BE;
1629 + font-size: 18px;
1630 + display: inline-block;
1631 + height: auto;
1632 + line-height: inherit;
1633 + width: 20px;
1562 1634 }
1563 -
1564 1635 @media (min-width: 782px) {
1565 -
1566 - #wp-optimize-wrap h2.nav-tab-wrapper a.nav-tab.wp-optimize-nav-tab__back, #wp-optimize-wrap h2.nav-tab-wrapper a.nav-tab.wp-optimize-nav-tab__back:focus:active {
1567 - position: absolute;
1568 - bottom: 14px;
1569 - right: 0;
1570 - font-size: 12px;
1571 - font-weight: 400;
1572 - text-decoration: none;
1573 - padding: 0;
1574 - }
1575 -
1576 - #wp-optimize-wrap h2.nav-tab-wrapper a.nav-tab.wp-optimize-nav-tab__back .dashicons, #wp-optimize-wrap h2.nav-tab-wrapper a.nav-tab.wp-optimize-nav-tab__back:focus:active .dashicons {
1577 - color: #B5B9BE;
1578 - font-size: 18px;
1579 - display: inline-block;
1580 - height: auto;
1581 - line-height: inherit;
1582 - width: 20px;
1583 - }
1636 + #wp-optimize-wrap h2.nav-tab-wrapper a.nav-tab.wp-optimize-nav-tab__back, #wp-optimize-wrap h2.nav-tab-wrapper a.nav-tab.wp-optimize-nav-tab__back:focus:active {
1637 + position: absolute;
1638 + bottom: 14px;
1639 + right: 0;
1640 + font-size: 12px;
1641 + font-weight: 400;
1642 + text-decoration: none;
1643 + padding: 0;
1644 + }
1645 + #wp-optimize-wrap h2.nav-tab-wrapper a.nav-tab.wp-optimize-nav-tab__back .dashicons, #wp-optimize-wrap h2.nav-tab-wrapper a.nav-tab.wp-optimize-nav-tab__back:focus:active .dashicons {
1646 + color: #B5B9BE;
1647 + font-size: 18px;
1648 + display: inline-block;
1649 + height: auto;
1650 + line-height: inherit;
1651 + width: 20px;
1652 + }
1584 1653 }
1585 1654
1586 1655 @media (max-width: 782px) {
1587 -
1588 - .wpo-mobile-menu-opened .wpo-main .wpo-tab-postbox {
1589 - // display: none;
1590 - }
1591 -
1592 - .wpo-mobile-menu-opened h2.nav-tab-wrapper a {
1593 - display: block;
1594 - float: none
1595 - }
1596 -
1597 - .wpo-mobile-menu-opened h2.nav-tab-wrapper a.nav-tab {
1598 - display: block !important;
1599 - }
1600 -
1601 - .wpo-mobile-menu-opened h2.nav-tab-wrapper a:not(.nav-tab-active) {
1602 - background: #f9f9f9 !important;
1603 - }
1604 -
1605 - .wpo-mobile-menu-opened h2.nav-tab-wrapper a.nav-tab-active,
1606 - .wpo-mobile-menu-opened h2.nav-tab-wrapper a.nav-tab-active:focus {
1607 - border-top: none;
1608 - border-left: 3px solid;
1609 - }
1610 -
1611 - .wpo-mobile-menu-opened h2.nav-tab-wrapper a.nav-tab-active .dashicons, .wpo-mobile-menu-opened h2.nav-tab-wrapper a.nav-tab-active:focus .dashicons, .wpo-mobile-menu-opened h2.nav-tab-wrapper a:focus .dashicons, .wpo-mobile-menu-opened h2.nav-tab-wrapper a:hover .dashicons, .wpo-mobile-menu-opened h2.nav-tab-wrapper a .dashicons {
1612 - display: inline-block;
1613 - line-height: inherit;
1614 - }
1615 -
1616 - .wpo-mobile-menu-opened h2.nav-tab-wrapper a[role="toggle-menu"] {
1617 - display: none;
1618 - }
1619 -
1656 + .wpo-mobile-menu-opened h2.nav-tab-wrapper button {
1657 + display: none;
1658 + }
1659 + .wpo-mobile-menu-opened h2.nav-tab-wrapper a {
1660 + display: block;
1661 + float: none;
1662 + }
1663 + .wpo-mobile-menu-opened h2.nav-tab-wrapper a.nav-tab {
1664 + display: block !important;
1665 + }
1666 + .wpo-mobile-menu-opened h2.nav-tab-wrapper a:not(.nav-tab-active) {
1667 + background: #f9f9f9 !important;
1668 + }
1669 + .wpo-mobile-menu-opened h2.nav-tab-wrapper a.nav-tab-active, .wpo-mobile-menu-opened h2.nav-tab-wrapper a.nav-tab-active:focus {
1670 + border-top: none;
1671 + border-left: 3px solid;
1672 + }
1673 + .wpo-mobile-menu-opened h2.nav-tab-wrapper a.nav-tab-active .dashicons, .wpo-mobile-menu-opened h2.nav-tab-wrapper a.nav-tab-active:focus .dashicons, .wpo-mobile-menu-opened h2.nav-tab-wrapper a:focus .dashicons, .wpo-mobile-menu-opened h2.nav-tab-wrapper a:hover .dashicons, .wpo-mobile-menu-opened h2.nav-tab-wrapper a .dashicons {
1674 + display: inline-block;
1675 + line-height: inherit;
1676 + }
1620 1677 }
1621 -
1622 1678 /* Pages MENU */
1623 -
1624 1679 .wpo-pages-menu {
1625 - position: absolute;
1626 - bottom: 0;
1627 - right: 0;
1628 - display: none;
1680 + position: absolute;
1681 + bottom: 0;
1682 + right: 0;
1683 + display: none;
1629 1684 }
1630 -
1631 1685 @media (max-width: 820px) {
1632 -
1633 - .opened + .wpo-pages-menu {
1634 - display: block;
1635 - box-shadow: 0 5px 25px rgba(0, 0, 0, 0.17);
1636 - }
1686 + .opened + .wpo-pages-menu {
1687 + display: block;
1688 + box-shadow: 0 5px 25px rgba(0, 0, 0, 0.17);
1689 + }
1637 1690 }
1638 -
1639 1691 @media (min-width: 821px) {
1640 -
1641 - .wpo-pages-menu {
1642 - display: -ms-flexbox;
1643 - display: flex;
1644 - height: 77px;
1645 - }
1692 + .wpo-pages-menu {
1693 + display: -ms-flexbox;
1694 + display: flex;
1695 + height: 77px;
1696 + }
1646 1697 }
1647 -
1648 1698 .wpo-pages-menu > a {
1649 - text-decoration: none;
1650 - position: relative;
1651 - color: inherit;
1652 - text-align: center;
1653 - box-sizing: border-box;
1654 - display: block;
1655 - color: #555d66;
1699 + text-decoration: none;
1700 + position: relative;
1701 + color: inherit;
1702 + text-align: center;
1703 + box-sizing: border-box;
1704 + display: block;
1705 + color: #555d66;
1656 1706 }
1657 -
1658 1707 @media (min-width: 821px) {
1659 -
1660 - .wpo-pages-menu > a {
1661 - padding: 0 8px;
1662 - height: 77px;
1663 - display: -ms-flexbox;
1664 - display: flex;
1665 - -ms-flex-direction: column;
1666 - flex-direction: column;
1667 - -ms-flex-pack: center;
1668 - justify-content: center;
1669 - }
1670 -
1671 - .wpo-pages-menu > a > span {
1672 - display: block;
1673 - margin: 0 auto;
1674 - }
1708 + .wpo-pages-menu > a {
1709 + padding: 0 8px;
1710 + height: 77px;
1711 + display: -ms-flexbox;
1712 + display: flex;
1713 + -ms-flex-direction: column;
1714 + flex-direction: column;
1715 + -ms-flex-pack: center;
1716 + justify-content: center;
1717 + }
1718 + .wpo-pages-menu > a > span {
1719 + display: block;
1720 + margin: 0 auto;
1721 + }
1675 1722 }
1676 -
1677 1723 @media (max-width: 820px) {
1678 -
1679 - .wpo-pages-menu > a {
1680 - padding: 15px;
1681 - font-size: 1.2em;
1682 - }
1724 + .wpo-pages-menu > a {
1725 + padding: 15px;
1726 + font-size: 1.2em;
1727 + }
1683 1728 }
1684 -
1685 1729 .wpo-pages-menu > a.active::after {
1686 - content: '';
1687 - display: block;
1688 - position: absolute;
1689 - bottom: 0;
1690 - left: 0;
1691 - width: 100%;
1692 - height: 3px;
1693 - background: #E46B1F;
1694 - color: #191e23;
1730 + content: "";
1731 + display: block;
1732 + position: absolute;
1733 + bottom: 0;
1734 + left: 0;
1735 + width: 100%;
1736 + height: 3px;
1737 + background: #E46B1F;
1738 + color: #191e23;
1695 1739 }
1696 -
1697 1740 @media (max-width: 820px) {
1698 -
1699 - .wpo-pages-menu > a.active::after {
1700 - width: 3px;
1701 - height: 100%;
1702 - }
1741 + .wpo-pages-menu > a.active::after {
1742 + width: 3px;
1743 + height: 100%;
1744 + }
1703 1745 }
1704 -
1705 1746 @media (max-width: 820px) {
1706 -
1707 - .wpo-pages-menu > a.active {
1708 - color: #E46B1F;
1709 - }
1747 + .wpo-pages-menu > a.active {
1748 + color: #E46B1F;
1749 + }
1710 1750 }
1711 -
1712 1751 .wpo-pages-menu > a:hover {
1713 - background: #F9F9F9;
1714 - color: #191e23;
1752 + background: #F9F9F9;
1753 + color: #191e23;
1715 1754 }
1716 -
1717 1755 .wpo-pages-menu span.separator {
1718 - display: block;
1719 - width: 2px;
1720 - background: #EFEFEF;
1721 - margin-top: 18px;
1722 - margin-bottom: 18px;
1723 - margin-right: 5px;
1724 - margin-left: 5px;
1756 + display: block;
1757 + width: 2px;
1758 + background: #EFEFEF;
1759 + margin-top: 18px;
1760 + margin-bottom: 18px;
1761 + margin-right: 5px;
1762 + margin-left: 5px;
1725 1763 }
1726 -
1727 1764 @media (max-width: 820px) {
1728 -
1729 - .wpo-pages-menu span.separator {
1730 - width: 80%;
1731 - height: 2px;
1732 - margin: 10px 10%;
1733 - }
1765 + .wpo-pages-menu span.separator {
1766 + width: 80%;
1767 + height: 2px;
1768 + margin: 10px 10%;
1769 + }
1734 1770 }
1735 -
1736 1771 @media (max-width: 820px) {
1737 -
1738 - .wpo-pages-menu {
1739 - text-align: center;
1740 - top: 100%;
1741 - width: 100%;
1742 - bottom: auto;
1743 - background: #FFF;
1744 - }
1772 + .wpo-pages-menu {
1773 + text-align: center;
1774 + top: 100%;
1775 + width: 100%;
1776 + bottom: auto;
1777 + background: #FFF;
1778 + }
1745 1779 }
1746 -
1747 1780 body.rtl .wpo-pages-menu {
1748 - left: 0;
1749 - right: auto;
1781 + left: 0;
1782 + right: auto;
1750 1783 }
1751 1784
1752 1785 #wp-optimize-nav-page-menu {
1753 - position: absolute;
1754 - right: 0;
1755 - bottom: 0;
1756 - display: -ms-flexbox;
1757 - display: flex;
1758 - height: 77px;
1759 - -ms-flex-direction: column;
1760 - flex-direction: column;
1761 - padding: 0 20px;
1762 - -ms-flex-align: center;
1763 - align-items: center;
1764 - -ms-flex-pack: center;
1765 - justify-content: center;
1766 - text-decoration: none
1786 + position: absolute;
1787 + right: 0;
1788 + bottom: 0;
1789 + display: -ms-flexbox;
1790 + display: flex;
1791 + height: 77px;
1792 + -ms-flex-direction: column;
1793 + flex-direction: column;
1794 + padding: 0 20px;
1795 + -ms-flex-align: center;
1796 + align-items: center;
1797 + -ms-flex-pack: center;
1798 + justify-content: center;
1799 + text-decoration: none;
1800 + color: #135e96;
1767 1801 }
1768 -
1769 1802 #wp-optimize-nav-page-menu:not(.opened) .dashicons-no-alt {
1770 - display: none;
1803 + display: none;
1771 1804 }
1772 -
1773 1805 #wp-optimize-nav-page-menu.opened .dashicons-menu {
1774 - display: none;
1806 + display: none;
1775 1807 }
1776 -
1777 1808 @media (min-width: 821px) {
1778 -
1779 - #wp-optimize-nav-page-menu {
1780 - display: none;
1781 - }
1809 + #wp-optimize-nav-page-menu {
1810 + display: none;
1811 + }
1782 1812 }
1783 -
1784 1813 body.rtl #wp-optimize-nav-page-menu {
1785 - right: auto;
1786 - left: 0;
1814 + right: auto;
1815 + left: 0;
1787 1816 }
1788 1817
1789 1818 /* DASHBOARD Menu */
1790 -
1791 1819 /* Calculate column width with a $spacing gutter */
1792 -
1793 1820 .wpo-dashboard-pages-menu {
1794 - display: -ms-flexbox;
1795 - display: flex;
1796 - -ms-flex-wrap: wrap;
1797 - flex-wrap: wrap
1798 -
1799 - /* Same size for 1 to 3 items */
1800 -
1821 + display: -ms-flexbox;
1822 + display: flex;
1823 + -ms-flex-wrap: wrap;
1824 + flex-wrap: wrap;
1825 + /* Same size for 1 to 3 items */
1801 1826 }
1802 -
1803 1827 .wpo-dashboard-pages-menu[data-itemscount="1"] .wpo-dashboard-pages-menu__item, .wpo-dashboard-pages-menu[data-itemscount="2"] .wpo-dashboard-pages-menu__item, .wpo-dashboard-pages-menu[data-itemscount="3"] .wpo-dashboard-pages-menu__item {
1804 - width: calc(33.333% - 13.33333px);
1828 + width: calc(33.333% - 13.33333px);
1805 1829 }
1806 -
1807 -.wpo-dashboard-pages-menu {/* above 3 items, change sizes */
1830 +.wpo-dashboard-pages-menu {
1831 + /* above 3 items, change sizes */
1808 1832 }
1809 -
1810 -.wpo-dashboard-pages-menu[data-itemscount="4"] .wpo-dashboard-pages-menu__item {
1811 - width: calc(25% - 15px);
1833 +.wpo-dashboard-pages-menu[data-itemscount="$count"] .wpo-dashboard-pages-menu__item {
1834 + width: calc(25% - 15px);
1812 1835 }
1813 -
1814 -.wpo-dashboard-pages-menu[data-itemscount="5"] .wpo-dashboard-pages-menu__item {
1815 - width: calc(20% - 16px);
1836 +.wpo-dashboard-pages-menu[data-itemscount="$count"] .wpo-dashboard-pages-menu__item {
1837 + width: calc(20% - 16px);
1816 1838 }
1817 -
1818 -.wpo-dashboard-pages-menu[data-itemscount="6"] .wpo-dashboard-pages-menu__item {
1819 - width: calc(16.66667% - 16.66667px);
1820 -}
1821 -
1822 1839 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item {
1823 - padding: 20px;
1824 - margin-right: 20px;
1825 - box-sizing: border-box;
1826 - padding-bottom: 60px;
1827 - min-width: 0;
1840 + padding: 20px;
1841 + margin-right: 20px;
1842 + box-sizing: border-box;
1843 + padding-bottom: 60px;
1844 + min-width: 0;
1828 1845 }
1829 -
1830 1846 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item:last-child {
1831 - margin-right: 0;
1847 + margin-right: 0;
1832 1848 }
1833 -
1834 1849 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item h3 {
1835 - margin-top: 0;
1850 + margin-top: 0;
1836 1851 }
1837 -
1838 1852 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item h3 .dashicons {
1839 - color: #72777C;
1840 - line-height: 1;
1841 - height: 18px;
1842 - margin-top: -2px;
1843 - margin-right: 10px
1844 - }
1845 -
1853 + color: #72777C;
1854 + line-height: 1;
1855 + height: 18px;
1856 + margin-top: -2px;
1857 + margin-right: 10px;
1858 +}
1846 1859 .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item a {
1847 - position: absolute;
1848 - bottom: 20px;
1849 - left: 20px;
1850 - width: calc(100% - 40px) !important;
1860 + position: absolute;
1861 + bottom: 20px;
1862 + left: 20px;
1863 + width: calc(100% - 40px) !important;
1851 1864 }
1852 -
1853 1865 @media (max-width: 782px) {
1854 -
1855 - .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item {
1856 - width: 100%;
1857 - margin-right: 0;
1858 - padding-bottom: 20px;
1859 - }
1860 -
1861 - .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item a.button.button-large {
1862 - width: auto !important;
1863 - left: auto;
1864 - bottom: auto;
1865 - top: 50%;
1866 - transform: translateY(-50%);
1867 - right: 20px;
1868 - }
1869 -
1870 - .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item h3 {
1871 - margin: 0;
1872 - }
1873 -
1874 - .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item p {
1875 - display: none;
1876 - }
1866 + .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item {
1867 + width: 100%;
1868 + margin-right: 0;
1869 + padding-bottom: 20px;
1870 + }
1871 + .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item a.button.button-large {
1872 + width: auto !important;
1873 + left: auto;
1874 + bottom: auto;
1875 + top: 50%;
1876 + transform: translateY(-50%);
1877 + right: 20px;
1878 + }
1879 + .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item h3 {
1880 + margin: 0;
1881 + }
1882 + .wpo-dashboard-pages-menu .postbox.wpo-dashboard-pages-menu__item p {
1883 + display: none;
1884 + }
1877 1885 }
1878 1886
1879 1887 /* CSS for adverts */
1880 -
1881 1888 .updraft-ad-container.updated,
1882 1889 .updraft-ad-container {
1883 - margin-left: 0px;
1884 - margin-right: 0px;
1885 - position: relative;
1886 - padding-right: 80px;
1890 + margin-left: 0px;
1891 + margin-right: 0px;
1892 + position: relative;
1893 + padding-right: 80px;
1887 1894 }
1888 1895
1889 1896 /* General notices (non WPO) on the WPO page */
1897 +body[class*=WP-Optimize] .notice, body[class*=WP-Optimize] .error,
1898 +body[class*=wp-optimize] .notice,
1899 +body[class*=wp-optimize] .error {
1900 + margin-left: 0;
1901 + margin-right: 0;
1902 +}
1890 1903
1891 -body[class*=WP-Optimize] .notice, body[class*=WP-Optimize] .error, body[class*=wp-optimize] .notice, body[class*=wp-optimize] .error {
1892 - margin-left: 0;
1893 - margin-right: 0;
1894 - }
1895 -
1896 1904 /*
1897 1905 Make the main error notice sticky
1898 1906 */
1899 -
1900 1907 body.wp-core-ui.is-scrolled .wpo-main-error-notice {
1901 - position:fixed;
1902 - top: 132px;
1903 - left: 160px;
1904 - right: 0;
1905 - z-index: 20;
1906 - transition: .2s all;
1908 + position: fixed;
1909 + top: 132px;
1910 + left: 160px;
1911 + right: 0;
1912 + z-index: 20;
1913 + transition: 0.2s all;
1907 1914 }
1908 1915
1909 1916 /* Remove other notices */
1910 -
1911 1917 div#wpbody-content > .notice:not(.wpo-notice),
1912 - div#wpbody-content > .warning:not(.wpo-notice),
1913 - div#wpbody-content > .updated:not(.wpo-notice),
1914 - div#wpbody-content > .error:not(.wpo-notice) {
1915 - display: none;
1916 - }
1918 +div#wpbody-content > .warning:not(.wpo-notice),
1919 +div#wpbody-content > .updated:not(.wpo-notice),
1920 +div#wpbody-content > .error:not(.wpo-notice) {
1921 + display: none;
1922 +}
1917 1923
1918 1924 .toplevel_page_WP-Optimize.rtl .notice,
1919 1925 .toplevel_page_WP-Optimize.rtl div.updated,
1920 1926 .toplevel_page_WP-Optimize.rtl div.error,
@@ -1920,1101 +1926,1799 @@
1920 1926 .toplevel_page_WP-Optimize.rtl div.error,
1921 1927 .toplevel_page_WP-Optimize .notice,
1922 1928 .toplevel_page_WP-Optimize div.updated,
1923 1929 .toplevel_page_WP-Optimize div.error {
1924 - margin-right: 0;
1930 + margin-right: 0;
1925 1931 }
1926 1932
1927 1933 body.rtl .updraft-ad-container.updated,
1928 1934 body.rtl .updraft-ad-container {
1929 - padding-right: 10px;
1930 - padding-left: 80px;
1935 + padding-right: 10px;
1936 + padding-left: 80px;
1931 1937 }
1932 1938
1933 1939 .updraft_notice_container {
1934 - padding: 7px;
1935 - display: -ms-flexbox;
1936 - display: flex;
1937 - -ms-flex-align: left;
1938 - align-items: left;
1939 - -ms-flex-direction: column;
1940 - flex-direction: column;
1941 - height: auto;
1942 - overflow: hidden;
1940 + padding: 7px;
1941 + display: -ms-flexbox;
1942 + display: flex;
1943 + -ms-flex-align: left;
1944 + align-items: left;
1945 + -ms-flex-direction: column;
1946 + flex-direction: column;
1947 + height: auto;
1948 + overflow: hidden;
1943 1949 }
1944 1950
1945 1951 .updraft_review_notice_container {
1946 - padding: 12px;
1947 - display: -ms-flexbox;
1948 - display: flex;
1952 + padding: 12px;
1953 + display: -ms-flexbox;
1954 + display: flex;
1949 1955 }
1950 1956
1951 1957 .updraft_advert_content_left {
1952 - float: none;
1953 - width: 65px;
1958 + float: none;
1959 + width: 80px;
1960 + padding-top: 9px;
1961 + margin-right: 9px;
1954 1962 }
1955 1963
1956 1964 .updraft_advert_content_left_extra {
1957 - float: none;
1958 - width: 100px;
1959 - padding-right: 15px;
1960 - display: -ms-flexbox;
1961 - display: flex;
1962 - -ms-flex-align: center;
1963 - align-items: center;
1965 + float: none;
1966 + width: 100px;
1967 + padding-right: 15px;
1968 + display: -ms-flexbox;
1969 + display: flex;
1970 + -ms-flex-align: center;
1971 + align-items: center;
1964 1972 }
1965 1973
1974 +.updraft_advert_content_left img {
1975 + min-height: 72px;
1976 + min-width: 72px;
1977 +}
1978 +
1966 1979 .updraft_advert_content_right {
1967 - float: none;
1968 - width: auto;
1969 - overflow: hidden;
1980 + float: none;
1981 + width: auto;
1982 + overflow: hidden;
1983 + font-size: 16px;
1970 1984 }
1971 1985
1986 +.updraft_advert_content_right p {
1987 + font-size: 16px !important;
1988 +}
1989 +
1972 1990 .updraft_advert_bottom {
1973 - margin: 10px 0;
1974 - padding: 10px;
1975 - font-size: 140%;
1976 - background-color: #FFF;
1977 - border-color: #E6DB55;
1978 - border: 1px solid;
1979 - border-radius: 4px;
1991 + margin: 10px 0;
1992 + padding: 10px;
1993 + font-size: 140%;
1994 + background-color: #FFF;
1995 + border-color: #E6DB55;
1996 + border: 1px solid;
1997 + border-radius: 4px;
1980 1998 }
1981 1999
1982 2000 .updraft_advert_button_container {
1983 - margin-bottom: 10px;
1984 - display: -ms-flexbox;
1985 - display: flex;
1986 - -ms-flex-align: center;
1987 - align-items: center;
2001 + margin-bottom: 10px;
2002 + display: -ms-flexbox;
2003 + display: flex;
2004 + -ms-flex-align: center;
2005 + align-items: center;
1988 2006 }
1989 2007
1990 2008 .updraft_advert_button_container .dashicons {
1991 - margin-left: 10px;
2009 + margin-left: 10px;
1992 2010 }
1993 2011
1994 2012 .updraft-advert-dismiss {
1995 - position: absolute;
1996 - font-size: 13px;
1997 - top: 5px;
1998 - right: 10px;
2013 + position: absolute;
2014 + font-size: 13px;
2015 + top: 5px;
2016 + right: 10px;
1999 2017 }
2000 2018
2001 2019 body.rtl .updraft-advert-dismiss {
2002 - left: 10px;
2003 - right: auto;
2020 + left: 10px;
2021 + right: auto;
2004 2022 }
2005 2023
2006 2024 h3.updraft_advert_heading {
2007 - margin-top: 5px !important;
2008 - margin-bottom: 5px !important;
2025 + margin-top: 5px !important;
2026 + margin-bottom: 5px !important;
2009 2027 }
2010 2028
2011 2029 h4.updraft_advert_heading {
2012 - margin-top: 2px !important;
2013 - margin-bottom: 3px !important;
2030 + margin-top: 2px !important;
2031 + margin-bottom: 3px !important;
2014 2032 }
2015 2033
2016 2034 .updraft_center_content {
2017 - text-align: center;
2018 - margin-bottom: 5px;
2035 + text-align: center;
2036 + margin-bottom: 5px;
2019 2037 }
2020 2038
2021 2039 .updraft_notice_link {
2022 - padding-left: 5px;
2040 + padding-left: 5px;
2023 2041 }
2024 2042
2025 2043 .updraft_text_center {
2026 - text-align: center;
2044 + text-align: center;
2027 2045 }
2028 2046
2029 2047 .wpo-main-header + .updraft-ad-container,
2030 2048 .wpo-main-header + .updated {
2031 - margin-bottom: 20px;
2049 + margin-bottom: 20px;
2032 2050 }
2033 2051
2034 2052 .processed .updated {
2035 - margin: 0;
2053 + margin: 0;
2036 2054 }
2037 2055
2038 2056 @media screen and (min-width: 560px) {
2039 -
2040 - .updraft_notice_container {
2041 - -ms-flex-direction: row;
2042 - flex-direction: row;
2043 - -ms-flex-align: center;
2044 - align-items: center;
2045 - }
2046 -
2047 - .updraft_advert_content_left, .updraft_advert_content_left_extra {
2048 - float: left;
2049 - }
2050 -
2057 + .updraft_notice_container {
2058 + -ms-flex-direction: row;
2059 + flex-direction: row;
2060 + -ms-flex-align: center;
2061 + align-items: center;
2062 + }
2063 + .updraft_advert_content_left, .updraft_advert_content_left_extra {
2064 + float: left;
2065 + }
2051 2066 }
2052 -
2053 2067 @media screen and (max-width: 560px) {
2054 -
2055 - body.rtl .updraft-ad-container.updated,
2056 - body.rtl .updraft-ad-container {
2057 - padding-right: 10px;
2058 - padding-left: 10px;
2059 - }
2060 -
2068 + body.rtl .updraft-ad-container.updated,
2069 + body.rtl .updraft-ad-container {
2070 + padding-right: 10px;
2071 + padding-left: 10px;
2072 + }
2061 2073 }
2062 -
2063 2074 @media screen and (max-width: 768px) {
2064 -
2065 - .wpo-main-header + .updraft-ad-container,
2066 - .wpo-main-header + .updated {
2067 - margin-right: 0;
2068 - }
2069 -
2075 + .wpo-main-header + .updraft-ad-container,
2076 + .wpo-main-header + .updated {
2077 + margin-right: 0;
2078 + }
2070 2079 }
2071 -
2072 2080 /* Unused images / wpo_smush_image / image grid*/
2073 -
2074 -.wpo_unused_image, .wpo_smush_image {
2075 - position: relative;
2076 - margin: 4px;
2077 - width: calc(50% - 8px);
2078 - text-align: center;
2079 -
2081 +#wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image,
2082 +#wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image,
2083 +.wpo_smush_image {
2084 + position: relative;
2085 + margin: 4px;
2086 + width: calc(50% - 8px);
2087 + text-align: center;
2080 2088 }
2081 -
2082 2089 @media (min-width: 500px) {
2083 -
2084 - .wpo_unused_image, .wpo_smush_image {
2085 - width: calc(25% - 8px);
2086 - }
2090 + #wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image,
2091 + #wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image,
2092 + .wpo_smush_image {
2093 + width: calc(25% - 8px);
2094 + }
2087 2095 }
2088 -
2089 2096 @media (min-width: 782px) {
2090 -
2091 - .wpo_unused_image, .wpo_smush_image {
2092 - width: calc(16.6666% - 8px);
2093 - }
2097 + #wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image,
2098 + #wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image,
2099 + .wpo_smush_image {
2100 + width: calc(16.6666% - 8px);
2101 + }
2094 2102 }
2095 -
2096 2103 @media (min-width: 1100px) {
2097 -
2098 - .wpo_unused_image, .wpo_smush_image {
2099 - width: calc(12.5% - 8px);
2100 - }
2104 + #wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image,
2105 + #wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image,
2106 + .wpo_smush_image {
2107 + width: calc(12.5% - 8px);
2108 + }
2101 2109 }
2102 -
2103 -.wpo_unused_image .wpo_unused_image__input, .wpo_smush_image .wpo_unused_image__input {
2104 - position: absolute;
2105 - top: 10px;
2106 - opacity: 0;
2107 - width: 0;
2108 - height: 0;
2110 +#wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image .wpo_unused_image__input,
2111 +#wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image .wpo_unused_image__input,
2112 +.wpo_smush_image .wpo_unused_image__input {
2113 + position: absolute;
2114 + top: 10px;
2115 + opacity: 0;
2116 + width: 0;
2117 + height: 0;
2109 2118 }
2110 -
2111 -.wpo_unused_image label, .wpo_smush_image label {
2112 - display: block;
2113 - width: 100%;
2114 - position: relative;
2115 - padding: 1px;
2116 - border: 3px solid #F2F4F5;
2117 - box-sizing: border-box;
2119 +#wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image .button,
2120 +#wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image .button,
2121 +.wpo_smush_image .button {
2122 + background: #f6f7f7;
2123 + border-radius: 3px;
2118 2124 }
2119 -
2120 -.wpo_unused_image label::before, .wpo_smush_image label::before {
2121 - content: "";
2122 - display: block;
2123 - padding-top: 100%;
2125 +#wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image .button:focus, #wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image .button:active,
2126 +#wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image .button:focus,
2127 +#wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image .button:active,
2128 +.wpo_smush_image .button:focus,
2129 +.wpo_smush_image .button:active {
2130 + background: #f6f7f7;
2124 2131 }
2125 -
2126 -.wpo_unused_image label .thumbnail, .wpo_smush_image label .thumbnail {
2127 - position: absolute;
2128 - top: 1px;
2129 - left: 1px;
2130 - width: calc(100% - 2px);
2131 - height: calc(100% - 2px);
2132 - background-repeat: no-repeat;
2133 - background-size: cover;
2134 - background-position: 50% 50%;
2135 - overflow: hidden;
2136 - background: rgba(220, 220, 220, 0.2);
2132 +#wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image .button:hover,
2133 +#wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image .button:hover,
2134 +.wpo_smush_image .button:hover {
2135 + background: #f0f0f1;
2137 2136 }
2138 -
2139 -.wpo_unused_image label .thumbnail img, .wpo_smush_image label .thumbnail img {
2140 - display: block;
2141 - margin: 0;
2142 - max-height: 100%;
2143 - position: absolute;
2144 - top: 50%;
2145 - left: 50%;
2146 - transform: translate(-50%,-50%);
2147 - -webkit-user-select: none;
2148 - -ms-user-select: none;
2149 - user-select: none;
2150 - }
2151 -
2152 -.wpo_unused_image label span.dashicons, .wpo_smush_image label span.dashicons {
2153 - position: absolute;
2154 - top: 50%;
2155 - left: 50%;
2156 - transform: translate(-50%, -50%);
2157 - font-size: 25px;
2158 - width: 25px;
2159 - opacity: .2;
2137 +#wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image label,
2138 +#wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image label,
2139 +.wpo_smush_image label {
2140 + display: block;
2141 + width: 100%;
2142 + position: relative;
2143 + padding: 1px;
2144 + border: 3px solid #F2F4F5;
2145 + box-sizing: border-box;
2160 2146 }
2161 -
2162 -.wpo_unused_image .wpo_unused_image__input:checked + label,
2163 - .wpo_unused_image.selected label,
2164 - .wpo_smush_image .wpo_unused_image__input:checked + label,
2165 - .wpo_smush_image.selected label {
2166 - border-color: #0272AA;
2147 +#wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image label::before,
2148 +#wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image label::before,
2149 +.wpo_smush_image label::before {
2150 + content: "";
2151 + display: block;
2152 + padding-top: 100%;
2167 2153 }
2168 -
2169 -.wpo_unused_image:focus-within label, .wpo_smush_image:focus-within label {
2170 - box-shadow: 0 0 4px #0272AA;
2154 +#wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image label .thumbnail,
2155 +#wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image label .thumbnail,
2156 +.wpo_smush_image label .thumbnail {
2157 + position: absolute;
2158 + top: 1px;
2159 + left: 1px;
2160 + width: calc(100% - 2px);
2161 + height: calc(100% - 2px);
2162 + background-repeat: no-repeat;
2163 + background-size: cover;
2164 + background-position: 50% 50%;
2165 + overflow: hidden;
2166 + background: rgba(220, 220, 220, 0.2);
2171 2167 }
2172 -
2173 -.wpo_unused_image a, .wpo_unused_image a.button, .wpo_unused_image a.button:active, .wpo_smush_image a, .wpo_smush_image a.button, .wpo_smush_image a.button:active {
2174 - position: absolute;
2175 - z-index: 2;
2176 - bottom: 13px;
2177 - left: 50%;
2178 - transform: translateX(-50%);
2179 - display: none;
2168 +#wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image label .thumbnail img,
2169 +#wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image label .thumbnail img,
2170 +.wpo_smush_image label .thumbnail img {
2171 + display: block;
2172 + margin: 0;
2173 + max-height: 100%;
2174 + position: absolute;
2175 + top: 50%;
2176 + left: 50%;
2177 + transform: translate(-50%, -50%);
2178 + -webkit-user-select: none;
2179 + -ms-user-select: none;
2180 + user-select: none;
2180 2181 }
2181 -
2182 -.wpo_unused_image:hover a, .wpo_unused_image:hover a.button, .wpo_unused_image:hover a.button:active, .wpo_smush_image:hover a, .wpo_smush_image:hover a.button, .wpo_smush_image:hover a.button:active {
2183 - display: inline-block;
2182 +#wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image label span.dashicons,
2183 +#wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image label span.dashicons,
2184 +.wpo_smush_image label span.dashicons {
2185 + position: absolute;
2186 + top: 50%;
2187 + left: 50%;
2188 + transform: translate(-50%, -50%);
2189 + font-size: 25px;
2190 + width: 25px;
2191 + opacity: 0.2;
2184 2192 }
2193 +#wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image .wpo_unused_image__input:checked + label, #wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image.selected label,
2194 +#wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image .wpo_unused_image__input:checked + label,
2195 +#wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image.selected label,
2196 +.wpo_smush_image .wpo_unused_image__input:checked + label,
2197 +.wpo_smush_image.selected label {
2198 + border-color: #0272AA;
2199 +}
2200 +#wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image:focus-within label,
2201 +#wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image:focus-within label,
2202 +.wpo_smush_image:focus-within label {
2203 + box-shadow: 0 0 4px #0272AA;
2204 +}
2205 +#wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image a, #wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image a.button, #wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image a.button:active,
2206 +#wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image a,
2207 +#wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image a.button,
2208 +#wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image a.button:active,
2209 +.wpo_smush_image a,
2210 +.wpo_smush_image a.button,
2211 +.wpo_smush_image a.button:active {
2212 + position: absolute;
2213 + z-index: 2;
2214 + bottom: 13px;
2215 + left: 50%;
2216 + transform: translateX(-50%);
2217 + display: none;
2218 +}
2219 +#wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image:hover a, #wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image:hover a.button, #wpo_unused_images:not(.wpo_unused_image_list_view) .wpo_unused_image:hover a.button:active,
2220 +#wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image:hover a,
2221 +#wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image:hover a.button,
2222 +#wpo_unused_images_trash:not(.wpo_unused_image_list_view) .wpo_unused_image:hover a.button:active,
2223 +.wpo_smush_image:hover a,
2224 +.wpo_smush_image:hover a.button,
2225 +.wpo_smush_image:hover a.button:active {
2226 + display: inline-block;
2227 +}
2185 2228
2186 2229 #wpo_unused_images, #wpo_unused_images_trash, #wpo_smush_images_grid {
2187 - width: calc(100% + 8px);
2188 - margin-left: -4px;
2189 - margin-right: -4px;
2190 - max-height: 500px;
2191 - overflow-y: auto;
2192 - display: -ms-flexbox;
2193 - display: flex;
2194 - -ms-flex-wrap: wrap;
2195 - flex-wrap: wrap;
2196 - position: relative;
2197 -
2230 + width: calc(100% + 8px);
2231 + margin-left: -4px;
2232 + margin-right: -4px;
2233 + max-height: 500px;
2234 + overflow-y: auto;
2235 + display: -ms-flexbox;
2236 + display: flex;
2237 + -ms-flex-wrap: wrap;
2238 + flex-wrap: wrap;
2239 + position: relative;
2198 2240 }
2199 -
2200 2241 #wpo_unused_images .wpo-fieldgroup, #wpo_unused_images_trash .wpo-fieldgroup, #wpo_smush_images_grid .wpo-fieldgroup {
2201 - width: 100%;
2202 - margin: 4px;
2203 - }
2242 + width: 100%;
2243 + margin: 4px;
2244 +}
2204 2245
2205 2246 #wpo_unused_images a, #wpo_unused_images_trash a {
2206 - outline: none;
2247 + outline: none;
2207 2248 }
2208 2249
2250 +.wpo-analytics__premium-mask,
2209 2251 .wpo-unused-images__premium-mask,
2252 +.wpo-unused-image-sizes__premium-mask,
2253 +.wpo-images-dimensions__premium-mask {
2254 + position: absolute;
2255 + top: 0;
2256 + left: 0;
2257 + width: 100%;
2258 + height: 100%;
2259 + z-index: 1;
2260 + background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85));
2261 + display: -ms-flexbox;
2262 + display: flex;
2263 + -ms-flex-align: center;
2264 + align-items: center;
2265 + -ms-flex-pack: center;
2266 + justify-content: center;
2267 +}
2268 +
2269 +.wpo-analytics__premium-mask,
2210 2270 .wpo-unused-image-sizes__premium-mask {
2211 - position: absolute;
2212 - top: 0;
2213 - left: 0;
2214 - width: 100%;
2215 - height: 100%;
2216 - z-index: 1;
2217 - background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85));
2218 - display: -ms-flexbox;
2219 - display: flex;
2220 - -ms-flex-align: center;
2221 - align-items: center;
2222 - -ms-flex-pack: center;
2223 - justify-content: center;
2271 + background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.85));
2224 2272 }
2225 2273
2226 -.wpo-unused-image-sizes__premium-mask {
2227 - background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.85));
2274 +a.wpo-analytics__premium-link,
2275 +a.wpo-unused-images__premium-link,
2276 +a.wpo-images-dimensions__premium-link {
2277 + background: #FFF;
2278 + display: inline-block;
2279 + padding: 10px;
2280 + border-radius: 3px;
2281 + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
2228 2282 }
2229 2283
2230 -a.wpo-unused-images__premium-link {
2231 - background: #FFF;
2232 - display: inline-block;
2233 - padding: 10px;
2234 - border-radius: 3px;
2235 - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
2284 +p.wpo-images-dimension-show-links {
2285 + z-index: 999;
2286 + position: relative;
2236 2287 }
2237 2288
2289 +.wpo_unused_image_list_view .wpo_unused_images_remove_single.button-link,
2290 +.wpo_unused_image_list_view .wpo_unused_images_remove_single.button-link:hover {
2291 + background: none;
2292 + border: none;
2293 + color: #F00;
2294 +}
2295 +
2238 2296 /* More Plugins page */
2239 -
2240 2297 /* Plugins family / Premium */
2241 -
2242 2298 p.wpo-plugin-installed {
2243 - color: #009B24;
2299 + color: #009B24;
2244 2300 }
2245 2301
2246 2302 /* Settings repeater */
2247 -
2248 2303 .wpo-repeater__add {
2249 - display: inline-block;
2250 - cursor: pointer;
2251 - font-weight: bold;
2252 - text-decoration: none;
2304 + display: inline-block;
2305 + cursor: pointer;
2306 + font-weight: bold;
2307 + text-decoration: none;
2253 2308 }
2254 -
2255 2309 .wpo-repeater__add .dashicons {
2256 - transform: translateY(-2px);
2257 - }
2310 + transform: translateY(-2px);
2311 +}
2258 2312
2259 -/* Plugin familly tab */
2260 -
2313 +/* Plugin family tab */
2261 2314 .wpo-plugin-family__premium h2 {
2262 - margin: 0;
2263 - padding: 25px;
2315 + margin: 0;
2316 + padding: 25px;
2264 2317 }
2265 2318
2266 2319 .wpo-plugin-family__plugins {
2267 - display: -ms-flexbox;
2268 - display: flex;
2269 - -ms-flex-wrap: wrap;
2270 - flex-wrap: wrap;
2271 - padding-left: 1px;
2272 - padding-bottom: 1px;
2320 + display: -ms-flexbox;
2321 + display: flex;
2322 + -ms-flex-wrap: wrap;
2323 + flex-wrap: wrap;
2324 + padding-left: 1px;
2325 + padding-bottom: 1px;
2273 2326 }
2274 2327
2275 2328 .wpo-plugin-family__plugin {
2276 - -ms-flex: auto;
2277 - flex: auto;
2278 - width: 100%;
2279 - padding: 30px;
2280 - box-sizing: border-box;
2281 - border: 1px solid #E3E4E7;
2282 - margin-left: -1px;
2283 - margin-bottom: -1px;
2284 -
2329 + -ms-flex: auto;
2330 + flex: auto;
2331 + width: 100%;
2332 + padding: 30px;
2333 + box-sizing: border-box;
2334 + border: 1px solid #E3E4E7;
2335 + margin-left: -1px;
2336 + margin-bottom: -1px;
2285 2337 }
2286 -
2338 +.wpo-plugin-family__plugin:last-of-type {
2339 + -ms-flex-positive: 0;
2340 + flex-grow: 0;
2341 +}
2287 2342 @media (min-width: 782px) {
2288 -
2289 - .wpo-plugin-family__plugin {
2290 - width: 50%;
2291 - }
2292 -
2293 - .wpo-plugin-family__free .wpo-plugin-family__plugin {
2294 - width: 100%;
2295 - }
2343 + .wpo-plugin-family__plugin {
2344 + width: 50%;
2345 + }
2346 + .wpo-plugin-family__free .wpo-plugin-family__plugin {
2347 + width: 100%;
2348 + }
2296 2349 }
2297 -
2298 2350 @media (max-width: 1080px) {
2299 -
2300 - .wpo-plugin-family__free .wpo-plugin-family__plugin {
2301 - width: 50%;
2302 - }
2351 + .wpo-plugin-family__free .wpo-plugin-family__plugin {
2352 + width: 50%;
2353 + }
2303 2354 }
2304 -
2305 2355 @media (max-width: 782px) {
2306 -
2307 - .wpo-plugin-family__free .wpo-plugin-family__plugin {
2308 - width: 100%;
2309 - }
2356 + .wpo-plugin-family__free .wpo-plugin-family__plugin {
2357 + width: 100%;
2358 + }
2310 2359 }
2311 2360
2312 2361 div#wp-optimize-nav-tab-wpo_mayalso-may_also-contents .wpo-tab-postbox {
2313 - padding: 0;
2362 + padding: 0;
2314 2363 }
2315 2364
2316 2365 /* Added for WPO Premium Features tab */
2317 -
2318 2366 .wpo_feature_cont {
2319 - width: 64.5%;
2367 + width: 64.5%;
2320 2368 }
2321 2369
2322 2370 .wpo_plugin_family_cont {
2323 - width: 34.5%;
2371 + width: 34.5%;
2324 2372 }
2325 2373
2326 2374 @media (max-width: 1080px) {
2327 -
2328 - .wpo_feature_cont,
2329 - .wpo_plugin_family_cont {
2330 - width: 100%;
2331 - float: none;
2332 - margin: 0;
2333 - }
2334 -
2375 + .wpo_feature_cont,
2376 + .wpo_plugin_family_cont {
2377 + width: 100%;
2378 + float: none;
2379 + margin: 0;
2380 + }
2335 2381 }
2336 -
2337 -.wpo_feature_cont header, .wpo_plugin_family_cont header {
2338 - padding: 20px;
2339 -
2340 - }
2341 -
2382 +.wpo_feature_cont header,
2383 +.wpo_plugin_family_cont header {
2384 + padding: 20px;
2385 +}
2342 2386 @media (max-width: 1080px) {
2343 -
2344 - .wpo_feature_cont header, .wpo_plugin_family_cont header {
2345 - padding: 40px;
2346 - }
2387 + .wpo_feature_cont header,
2388 + .wpo_plugin_family_cont header {
2389 + padding: 40px;
2390 + }
2347 2391 }
2348 -
2349 -.wpo_feature_cont header h2, .wpo_plugin_family_cont header h2 {
2350 - margin: 0;
2392 +.wpo_feature_cont header h2,
2393 +.wpo_plugin_family_cont header h2 {
2394 + margin: 0;
2351 2395 }
2352 -
2353 -.wpo_feature_cont header p, .wpo_plugin_family_cont header p {
2354 - margin-bottom: 0;
2396 +.wpo_feature_cont header p,
2397 +.wpo_plugin_family_cont header p {
2398 + margin-bottom: 0;
2355 2399 }
2356 2400
2357 2401 .wpo_feat_table, .wpo_feat_th, .wpo_feat_table td {
2358 - border: none;
2359 - border-collapse: collapse;
2360 - background-color: white;
2361 - font-size: 120%;
2362 - text-align: center;
2402 + border: none;
2403 + border-collapse: collapse;
2404 + background-color: white;
2405 + font-size: 18px;
2406 + text-align: center;
2363 2407 }
2364 2408
2365 2409 .wpo_feat_table td {
2366 - border: 1px solid #F1F1F1;
2367 - border-bottom-width: 4px;
2368 - padding: 15px;
2369 - }
2370 -
2410 + border: 1px solid #F1F1F1;
2411 + border-bottom-width: 4px;
2412 + padding: 15px;
2413 +}
2371 2414 .wpo_feat_table td:nth-child(2), .wpo_feat_table td:nth-child(3) {
2372 - background: rgba(241, 241, 241, 0.38);
2373 - }
2374 -
2415 + background: rgba(241, 241, 241, 0.38);
2416 +}
2375 2417 .wpo_feat_table p {
2376 - padding: 0px 10px;
2377 - margin: 5px 0px;
2378 - font-size: 13px;
2379 - }
2380 -
2418 + padding: 0px 10px;
2419 + margin: 5px 0px;
2420 + font-size: 13px;
2421 +}
2381 2422 .wpo_feat_table h4 {
2382 - margin: 5px 0px;
2383 - }
2384 -
2423 + margin: 5px 0px;
2424 +}
2385 2425 .wpo_feat_table .dashicons {
2386 - width: 25px;
2387 - height: 25px;
2388 - font-size: 25px;
2389 - line-height: 1;
2390 - }
2391 -
2426 + width: 25px;
2427 + height: 25px;
2428 + font-size: 25px;
2429 + line-height: 1;
2430 +}
2392 2431 .wpo_feat_table .dashicons-yes, .wpo_feat_table .updraft-yes {
2393 - color: green;
2394 - }
2395 -
2432 + color: green;
2433 +}
2396 2434 .wpo_feat_table .dashicons-no-alt, .wpo_feat_table .updraft-no {
2397 - color: red;
2398 - }
2399 -
2435 + color: red;
2436 +}
2400 2437 .wpo_feat_table tr.wpo-main-feature-row td {
2401 - background: #f1f1f1;
2402 - border-bottom-color: #fafafa;
2403 - }
2404 -
2438 + background: #f1f1f1;
2439 + border-bottom-color: #fafafa;
2440 +}
2405 2441 .wpo_feat_table tr.wpo-main-feature-row td img.wpo-premium-image {
2406 - width: 64px;
2407 - }
2442 + width: 64px;
2443 +}
2408 2444
2409 2445 .wpo-premium-image {
2410 - display: none;
2446 + display: none;
2411 2447 }
2412 2448
2413 2449 @media screen and (min-width: 720px) {
2414 -
2415 - #wpoptimize_table_list_filter {
2416 - width: 40%;
2417 - }
2418 -
2419 - .wpo-premium-image {
2420 - display: block;
2421 - float: left;
2422 - padding: 16px 18px;
2423 - width: 30px;
2424 - height: auto;
2425 - }
2426 -
2450 + #wpoptimize_table_list_filter {
2451 + width: 40%;
2452 + }
2453 + .wpo-premium-image {
2454 + display: block;
2455 + float: left;
2456 + padding: 16px 18px;
2457 + width: 30px;
2458 + height: auto;
2459 + }
2427 2460 }
2428 -
2429 2461 @media screen and (min-width: 1220px) {
2430 -
2431 - .wpo_feat_table td:nth-child(2), .wpo_feat_table td:nth-child(3) {
2432 - width: 110px;
2433 - }
2434 -
2462 + .wpo_feat_table td:nth-child(2), .wpo_feat_table td:nth-child(3) {
2463 + width: 110px;
2464 + }
2435 2465 }
2436 -
2437 2466 .other-plugin-title {
2438 - text-decoration: none;
2467 + text-decoration: none;
2439 2468 }
2440 2469
2441 2470 @media screen and (max-width: 782px) {
2471 + table.wpo_feat_table {
2472 + display: block;
2473 + }
2474 + table.wpo_feat_table tr {
2475 + display: -ms-flexbox;
2476 + display: flex;
2477 + -ms-flex-wrap: wrap;
2478 + flex-wrap: wrap;
2479 + }
2480 + table.wpo_feat_table td {
2481 + display: block;
2482 + }
2483 + table.wpo_feat_table td:first-child {
2484 + width: 100%;
2485 + border-bottom: none;
2486 + }
2487 + table.wpo_feat_table td:not(:first-child) {
2488 + width: 50%;
2489 + box-sizing: border-box;
2490 + }
2491 + table.wpo_feat_table td:first-child:empty {
2492 + display: none;
2493 + }
2494 + table.wpo_feat_table td[data-colname]::before {
2495 + content: attr(data-colname);
2496 + font-size: 0.8rem;
2497 + color: #CCC;
2498 + line-height: 1;
2499 + }
2500 +}
2501 +.wpo-cache-feature-image {
2502 + width: 40px;
2503 + padding: 16px 14px;
2504 +}
2442 2505
2443 - table.wpo_feat_table {
2506 +/* tablesorter */
2507 +#wp-optimize-wrap #wpoptimize_table_list td:nth-child(2) span {
2508 + font-size: 11px;
2509 +}
2510 +#wp-optimize-wrap #wpoptimize_table_list td:nth-child(2) span.status {
2511 + color: #9B0000;
2512 + font-weight: bold;
2513 +}
2514 +#wp-optimize-wrap #wpoptimize_table_list td span {
2515 + font-size: 13px;
2516 +}
2517 +#wp-optimize-wrap .wp-list-table td {
2518 + word-break: break-all;
2519 +}
2520 +@media screen and (max-width: 782px) {
2521 + #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels tbody, #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels tbody tr, #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels tbody th, #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels tbody td {
2522 + display: block;
2523 + }
2524 + #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels tbody td {
2525 + padding: 3px 8px 3px 35%;
2526 + word-break: break-word;
2527 + box-sizing: border-box;
2528 + }
2529 + #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels tbody td::before {
2530 + color: #B5B9BE;
2531 + }
2532 + #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels thead, #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels thead tr {
2533 + display: block;
2534 + }
2535 + #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels thead th.column-primary {
2536 + display: block;
2537 + box-sizing: border-box;
2538 + }
2539 + #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels thead th:not(.column-primary) {
2540 + display: none !important;
2541 + }
2542 +}
2543 +body.rtl #wp-optimize-wrap .wpo-table-list-filter {
2544 + text-align: left;
2545 +}
2546 +@media screen and (max-width: 782px) {
2547 + body.rtl #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels tbody td {
2548 + padding: 3px 35% 3px 8px;
2549 + }
2550 +}
2444 2551
2445 - display: block;
2446 - }
2552 +.wpo-text__dim .dashicons-info {
2553 + margin-top: 2px;
2554 + margin-right: 5px;
2555 + border-radius: 30px;
2556 + background: #fff;
2557 + color: #F00;
2558 +}
2447 2559
2448 - table.wpo_feat_table tr {
2449 - display: -ms-flexbox;
2450 - display: flex;
2451 - -ms-flex-wrap: wrap;
2452 - flex-wrap: wrap;
2453 - }
2560 +#page_cache_length_value {
2561 + min-height: 28px;
2562 + height: 28px;
2563 + position: relative;
2564 + top: 2px;
2565 +}
2454 2566
2455 - table.wpo_feat_table td {
2456 - display: block
2457 - }
2567 +#wp_optimize_preload_cache_status {
2568 + margin-left: 10px;
2569 + display: inline-block;
2570 + color: #82868B;
2571 + font-size: smaller;
2572 +}
2458 2573
2459 - table.wpo_feat_table td:first-child {
2460 - width: 100%;
2461 - border-bottom: none;
2462 - }
2574 +.align-left {
2575 + margin: 10px 10px 0px 0px;
2576 + float: left;
2577 +}
2463 2578
2464 - table.wpo_feat_table td:not(:first-child) {
2465 - width: 50%;
2466 - box-sizing: border-box;
2467 - }
2579 +textarea.cache-settings {
2580 + display: block;
2581 + clear: both;
2582 + min-height: 225px;
2583 + overflow: scroll;
2584 + min-width: 75%;
2585 + margin: 10px 0px;
2586 +}
2468 2587
2469 - table.wpo_feat_table td:first-child:empty {
2470 - display: none;
2471 - }
2588 +#wp-optimize-purge-cache,
2589 +#wp-optimize-purge-cache ~ span,
2590 +#wp-optimize-purge-cache ~ img {
2591 + vertical-align: middle;
2592 + top: auto;
2593 +}
2472 2594
2473 - table.wpo_feat_table td[data-colname]::before {
2474 - content: attr(data-colname);
2475 - font-size: 0.8rem;
2476 - color: #CCC;
2477 - line-height: 1;
2478 - }
2595 +#wp-optimize-nav-tab-wpo_cache-cache-contents .wpo-error {
2596 + font-size: 12px;
2597 +}
2479 2598
2599 +#wpo_browser_cache_error_message {
2600 + padding-top: 10px;
2601 + padding-bottom: 10px;
2602 + margin-left: 0;
2603 + margin-bottom: 10px;
2480 2604 }
2605 +#wpo_browser_cache_error_message:empty {
2606 + display: none;
2607 +}
2481 2608
2482 -.wpo-cache-feature-image {
2483 - width: 40px;
2484 - padding: 16px 14px;
2609 +#wp-optimize-nav-tab-wpo_cache-advanced-contents label,
2610 +#wp-optimize-nav-tab-wpo_cache-preload-contents label,
2611 +#wp-optimize-nav-tab-wpo_cache-cache-contents label {
2612 + font-weight: 600;
2485 2613 }
2614 +#wp-optimize-nav-tab-wpo_cache-advanced-contents label em,
2615 +#wp-optimize-nav-tab-wpo_cache-preload-contents label em,
2616 +#wp-optimize-nav-tab-wpo_cache-cache-contents label em {
2617 + font-weight: normal;
2618 +}
2486 2619
2487 -/* tablesorter */
2620 +.wpo-gzip-already-enabled span.dashicons.dashicons-yes,
2621 +.wpo-enabled > span.dashicons.dashicons-yes {
2622 + font-size: 40px;
2623 + width: 40px;
2624 + height: 40px;
2625 + line-height: 40px;
2626 + vertical-align: middle;
2627 + color: green;
2628 +}
2488 2629
2489 -#wp-optimize-wrap .wp-list-table td {
2490 - word-break: break-all;
2491 - }
2630 +#wpo_gzip_control_panel {
2631 + margin-bottom: 10px;
2632 +}
2633 +#wpo_gzip_control_panel .wpo_shade_inner {
2634 + padding-top: 150px;
2635 +}
2492 2636
2493 -@media screen and (max-width: 782px ) {
2637 +#wp-optimize-wrap .filename {
2638 + display: inline-block;
2639 + padding: 6px 0;
2640 +}
2641 +#wp-optimize-wrap .no-files-yet .filename {
2642 + font-style: italic;
2643 +}
2644 +#wp-optimize-wrap .processed {
2645 + margin: 0;
2646 +}
2647 +#wp-optimize-wrap .processed .wpo_min_log {
2648 + padding: 8px;
2649 + background: white;
2650 + border: 1px solid #CDCDCD;
2651 + border-radius: 4px;
2652 + line-height: 1.5em;
2653 +}
2654 +#wp-optimize-wrap .processed .wpo_min_log ul {
2655 + overflow-x: auto;
2656 +}
2657 +#wp-optimize-wrap .processed .wpo_min_log ul li {
2658 + white-space: nowrap;
2659 +}
2660 +#wp-optimize-wrap .processed .wpo_min_log ul li.failed .wpo_min_file_url {
2661 + color: #dc3232;
2662 +}
2663 +#wp-optimize-wrap .processed .wpo_min_log ul li.disable-list-item {
2664 + opacity: 0.5;
2665 +}
2666 +#wp-optimize-wrap .processed .wpo_min_log h5 {
2667 + margin-top: 0;
2668 + margin-bottom: 8px;
2669 + border-bottom: 1px solid #cdcdcd;
2670 + padding-bottom: 6px;
2671 +}
2672 +#wp-optimize-wrap .processed .wpo_min_log .wpo_min_file_error {
2673 + color: #9B3600;
2674 +}
2675 +#wp-optimize-wrap .processed .wpo_min_log .wpo_min_file_error a {
2676 + color: #9B3600;
2677 +}
2678 +#wp-optimize-wrap .processed .wpo_min_log .wpo_min_file_error a:hover {
2679 + color: rgb(40.7843137255%, 14.2087286528%, 0%);
2680 +}
2681 +#wp-optimize-wrap .processed .wpo_min_log .wpo_min_file_debug {
2682 + color: #9c9c9c;
2683 + display: inline-block;
2684 +}
2685 +#wp-optimize-wrap .processed .wpo_min_log .wpo_min_file_debug::before {
2686 + content: "—";
2687 + display: inline-block;
2688 + margin: 0 10px;
2689 +}
2690 +#wp-optimize-wrap .show-if-enabled {
2691 + display: none;
2692 +}
2693 +#wp-optimize-wrap .is-enabled .show-if-enabled {
2694 + display: block;
2695 +}
2696 +#wp-optimize-wrap .wpo-page:not(.is-enabled) .wpo-minify-features {
2697 + display: none;
2698 +}
2699 +#wp-optimize-wrap .wpo-page[data-whichpage=wpo_minify]:not(.is-enabled) .nav-tab-wrapper > a:not([data-tab=status]):not([data-tab=analytics]):not([role=toggle-menu]):not([data-tab=js]):not([data-tab=font]) {
2700 + display: none;
2701 +}
2702 +#wp-optimize-wrap .wpo-minify-features {
2703 + padding-top: 1em;
2704 + margin-top: 1em;
2705 + border-top: 1px solid #bbb;
2706 +}
2707 +#wp-optimize-wrap .wpo-minify-features .wpo-fieldgroup__subgroup {
2708 + margin-bottom: 1em;
2709 +}
2710 +#wp-optimize-wrap .wpo-fieldgroup__subgroup.wpo_min_enable_minify + .wpo-fieldgroup__subgroup {
2711 + display: none;
2712 +}
2713 +#wp-optimize-wrap .wpo-fieldgroup__subgroup.wpo_min_enable_minify.enabled + .wpo-fieldgroup__subgroup {
2714 + display: block;
2715 +}
2716 +#wp-optimize-wrap .wpo-fieldgroup__subgroup.wpo_min_enable_minify:not(.enabled) {
2717 + margin-bottom: 0;
2718 +}
2719 +#wp-optimize-wrap .wpo-fieldgroup .wpo-minify-default-exclusions p {
2720 + margin: 0;
2721 +}
2722 +#wp-optimize-wrap .defer-js-settings {
2723 + padding-left: 1em;
2724 + border-left: 2px solid #E2E2E2;
2725 + margin-left: 0.5em;
2726 +}
2727 +#wp-optimize-wrap .wpo-fieldgroup .wpo-inline-advertise {
2728 + display: inline-block;
2729 + vertical-align: top;
2730 + line-height: 20px;
2731 +}
2732 +#wp-optimize-wrap {
2733 + /*
2734 + Asset preload table
2735 + */
2736 +}
2737 +#wp-optimize-wrap .asset-preload-list {
2738 + margin-bottom: 1em;
2739 +}
2740 +#wp-optimize-wrap .asset-preload-list td.asset-href {
2741 + width: 55%;
2742 +}
2743 +#wp-optimize-wrap .asset-preload-list td.asset-crossorigin {
2744 + width: 10%;
2745 +}
2746 +#wp-optimize-wrap .asset-preload-list tr.editing {
2747 + display: none;
2748 +}
2749 +#wp-optimize-wrap .asset-preload-list tr.form {
2750 + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1294117647);
2751 +}
2752 +#wp-optimize-wrap .asset-preload-list tr.form td {
2753 + background: #FFF;
2754 + border: none;
2755 + padding: 10px;
2756 +}
2757 +#wp-optimize-wrap .asset-preload-list tr.editing + tr.form td:last-child {
2758 + border-radius: 0 5px 5px 0;
2759 +}
2760 +#wp-optimize-wrap .asset-preload-list tr.editing + tr.form td:first-child {
2761 + position: relative;
2762 +}
2763 +#wp-optimize-wrap .asset-preload-list tr.editing + tr.form td:first-child::before {
2764 + content: "";
2765 + width: 10px;
2766 + height: 10px;
2767 + background: #FFF;
2768 + display: block;
2769 + position: absolute;
2770 + top: 0;
2771 + left: 0;
2772 + transform: translate(10px, -5px) rotate(45deg);
2773 +}
2774 +#wp-optimize-wrap .asset-preload-list tbody + tr.form td {
2775 + padding-top: 37px;
2776 + position: relative;
2777 +}
2778 +#wp-optimize-wrap .asset-preload-list tbody + tr.form td[data-label]::before {
2779 + content: attr(data-label);
2780 + position: absolute;
2781 + top: 1em;
2782 + left: 10px;
2783 + text-transform: uppercase;
2784 + color: #D0D2D4;
2785 +}
2786 +#wp-optimize-wrap .asset-preload-list input#preload_href {
2787 + width: 100%;
2788 + min-height: 28px;
2789 +}
2790 +#wp-optimize-wrap .asset-preload-list select#preload_type {
2791 + width: 100%;
2792 +}
2793 +#wp-optimize-wrap .asset-preload-list td.asset-preload-form--actions,
2794 +#wp-optimize-wrap .asset-preload-list td.asset-edit {
2795 + text-align: right;
2796 +}
2797 +#wp-optimize-wrap .asset-preload-list td.asset-preload-form--actions button,
2798 +#wp-optimize-wrap .asset-preload-list td.asset-edit button {
2799 + display: inline-block;
2800 +}
2801 +#wp-optimize-wrap .asset-preload-list td.asset-preload-form--actions button.wpo-asset--edit::after,
2802 +#wp-optimize-wrap .asset-preload-list td.asset-edit button.wpo-asset--edit::after {
2803 + content: "|";
2804 + padding-left: 6px;
2805 + padding-right: 4px;
2806 +}
2494 2807
2495 - #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels tbody, #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels tbody tr, #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels tbody th, #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels tbody td {
2496 - display: block;
2497 - }
2808 +/* Modal window */
2809 +body.wpo-modal-is-opened {
2810 + overflow: hidden;
2811 +}
2498 2812
2499 - #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels tbody td {
2500 - padding: 3px 8px 3px 35%;
2501 - word-break: break-word;
2502 - box-sizing: border-box
2813 +.wpo-modal--container {
2814 + position: fixed;
2815 + top: 0;
2816 + left: 0;
2817 + padding: 3em;
2818 + width: 100%;
2819 + height: 100%;
2820 + box-sizing: border-box;
2821 + z-index: 9999;
2822 + overflow: auto;
2823 +}
2503 2824
2504 - }
2825 +.wpo-modal {
2826 + position: relative;
2827 + background: #FFF;
2828 + width: calc(100% - 6em);
2829 + top: 50%;
2830 + transform: translateY(-50%);
2831 + margin: 0 auto;
2832 + padding: 2em;
2833 + box-sizing: border-box;
2834 + z-index: 2;
2835 +}
2836 +.wpo-modal > .wpo-modal--close {
2837 + border: none;
2838 + background: none;
2839 + position: absolute;
2840 + top: 10px;
2841 + right: 10px;
2842 + width: 20px;
2843 + height: 20px;
2844 + line-height: 1;
2845 + padding: 0;
2846 +}
2505 2847
2506 - #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels tbody td::before {
2507 - color: #B5B9BE;
2508 - }
2848 +.wpo-modal--bg {
2849 + position: fixed;
2850 + top: 0;
2851 + left: 0;
2852 + width: 100%;
2853 + height: 100%;
2854 + background: rgba(0, 0, 0, 0.74);
2855 + z-index: 1;
2856 +}
2509 2857
2510 - #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels thead, #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels thead tr {
2511 - display: block;
2512 - }
2858 +.wpo-confirm .wpo-modal--content > h3 {
2859 + font-size: 2em;
2860 +}
2513 2861
2514 - #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels thead th.column-primary {
2515 - display: block;
2516 - box-sizing: border-box;
2517 - }
2862 +.wpo-confirm .wpo-modal--content > h3 .dashicons {
2863 + font-size: 30px;
2864 + width: 30px;
2865 + height: 30px;
2866 + transform: translateY(-5px);
2867 +}
2518 2868
2519 - #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels thead th:not(.column-primary) {
2520 - display: none !important;
2521 - }
2869 +.wpo-confirm .wpo-modal--content > h3 .dashicons.dashicons-warning {
2870 + color: #feb901;
2522 2871 }
2523 2872
2524 -body.rtl #wp-optimize-wrap .wpo-table-list-filter {
2525 - text-align: left;
2526 - }
2873 +@media (max-width: 782px) {
2874 + .wpo-modal--container {
2875 + padding: 1em;
2876 + display: -ms-flexbox;
2877 + display: flex;
2878 + -ms-flex-direction: column;
2879 + flex-direction: column;
2880 + }
2881 + .admin-bar .wpo-modal--container {
2882 + padding-top: calc(46px + 1em);
2883 + }
2884 + .wpo-modal {
2885 + width: 100%;
2886 + top: auto;
2887 + transform: none;
2888 + margin: auto;
2889 + }
2890 +}
2891 +@media (min-width: 780px) {
2892 + .power-tweaks--list {
2893 + display: -ms-flexbox;
2894 + display: flex;
2895 + -ms-flex-direction: row;
2896 + flex-direction: row;
2897 + -ms-flex-wrap: wrap;
2898 + flex-wrap: wrap;
2899 + }
2900 +}
2901 +.power-tweaks--list .wpo-power-tweak {
2902 + width: 100%;
2903 +}
2904 +@media (min-width: 780px) {
2905 + .power-tweaks--list .wpo-power-tweak {
2906 + width: calc(25% - 1em);
2907 + margin-right: 1em;
2908 + }
2909 +}
2910 +@media (min-width: 1080px) {
2911 + .power-tweaks--list .wpo-power-tweak {
2912 + width: calc(33.33333% - 1em);
2913 + margin-right: 1em;
2914 + }
2915 +}
2916 +.power-tweaks--list .wpo-power-tweak {
2917 + background: #f2f4f5;
2918 + border-radius: 1em;
2919 + padding: 1.5em;
2920 + margin-bottom: 1em;
2921 + box-sizing: border-box;
2922 +}
2923 +.power-tweaks--list .wpo-power-tweak h4 {
2924 + margin-top: 0;
2925 +}
2926 +.power-tweaks--list .wpo-power-tweak .description {
2927 + margin-bottom: 1em;
2928 +}
2929 +.power-tweaks--list .wpo-power-tweak .details {
2930 + padding: 1em;
2931 + background: #FFF;
2932 + box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
2933 + margin-top: 1em;
2934 + margin-bottom: 1em;
2935 +}
2936 +.power-tweaks--list .wpo-power-tweak .actions {
2937 + margin-top: 1em;
2938 + margin-bottom: 1em;
2939 +}
2940 +.power-tweaks--list .wpo-power-tweak .wpo-post-meta-sites-status {
2941 + max-height: 230px;
2942 + overflow-y: auto;
2943 + margin: 20px 0;
2944 + border: 1px solid #c3c4c7;
2945 + scrollbar-width: thin;
2946 + scrollbar-color: #a9a9a9 #f2f4f5;
2947 +}
2948 +.power-tweaks--list .wpo-power-tweak .wpo-post-meta-sites-status::-webkit-scrollbar {
2949 + width: 8px;
2950 +}
2951 +.power-tweaks--list .wpo-power-tweak .wpo-post-meta-sites-status::-webkit-scrollbar-track {
2952 + background: #f2f4f5;
2953 +}
2954 +.power-tweaks--list .wpo-power-tweak .wpo-post-meta-sites-status::-webkit-scrollbar-thumb {
2955 + background-color: #a9a9a9;
2956 + border-radius: 4px;
2957 +}
2958 +.power-tweaks--list .wpo-power-tweak .wpo-post-meta-sites-status .wpo-post-meta-sites-table {
2959 + border: none;
2960 + border-right: 1px solid #c3c4c7;
2961 +}
2962 +.power-tweaks--list .wpo-power-tweak .wpo-post-meta-sites-status .wpo-post-meta-sites-table thead th {
2963 + position: sticky;
2964 + top: 0;
2965 + z-index: 1;
2966 + background: #fff;
2967 + box-shadow: inset 0 -1px 0 #c3c4c7;
2968 +}
2969 +.power-tweaks--list .wpo-power-tweak .last-run, .power-tweaks--list .wpo-power-tweak .last-updated {
2970 + margin-top: 1em;
2971 + font-size: 0.8em;
2972 + color: #a9a9a9;
2973 +}
2974 +.power-tweaks--list .wpo-power-tweak .tweak-is-running {
2975 + display: none;
2976 +}
2977 +.power-tweaks--list .wpo-power-tweak.running {
2978 + position: relative;
2979 +}
2980 +.power-tweaks--list .wpo-power-tweak.running .tweak-is-running {
2981 + display: -ms-flexbox;
2982 + display: flex;
2983 + -ms-flex-align: center;
2984 + align-items: center;
2985 + -ms-flex-pack: center;
2986 + justify-content: center;
2987 + position: absolute;
2988 + top: 0;
2989 + bottom: 0;
2990 + left: 0;
2991 + right: 0;
2992 + background: rgba(242, 244, 245, 0.9);
2993 + z-index: 1;
2994 + border-radius: 1em;
2995 + font-size: 1.7em;
2996 +}
2997 +.power-tweaks--list .wpo-power-tweak.running .tweak-is-running .spinner {
2998 + visibility: visible;
2999 +}
3000 +.power-tweaks--list a.show-faqs span.dashicons {
3001 + font-size: inherit;
3002 + height: auto;
3003 + width: auto;
3004 + line-height: inherit;
3005 + text-decoration: none;
3006 + margin-left: 4px;
3007 +}
2527 3008
2528 -@media screen and (max-width: 782px ) {
2529 - body.rtl #wp-optimize-wrap .wp-list-table.wp-list-table-mobile-labels tbody td {
2530 - padding: 3px 35% 3px 8px;
2531 - }
3009 +.wpo-table-usage__premium-mask {
3010 + position: absolute;
3011 + top: 0;
3012 + left: 0;
3013 + width: 100%;
3014 + height: 100%;
3015 + z-index: 1;
3016 + background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.85));
3017 + display: -ms-flexbox;
3018 + display: flex;
3019 + -ms-flex-align: center;
3020 + align-items: center;
3021 + -ms-flex-pack: center;
3022 + justify-content: center;
2532 3023 }
3024 +.wpo-table-usage__premium-mask a.wpo-table-usage__premium-link {
3025 + background: #FFF;
3026 + display: inline-block;
3027 + padding: 10px;
3028 + border-radius: 3px;
3029 + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
3030 +}
2533 3031
2534 -.tablesorter-headerRow th {
2535 - vertical-align: top;
3032 +#wpo_404_detector_results h1 {
3033 + line-height: 1.2;
3034 + word-wrap: break-word;
3035 + font-size: 1.2rem;
2536 3036 }
2537 3037
2538 -th:not(.sorter-false) .tablesorter-header-inner {
3038 +.wpo-dash {
3039 + display: -ms-flexbox;
3040 + display: flex;
3041 + -ms-flex-direction: column;
3042 + flex-direction: column;
3043 + font-family: "Inter", sans-serif;
3044 +}
2539 3045
2540 - color: #0074ab
3046 +.wpo-dash-toolbar {
3047 + display: none;
3048 +}
2541 3049
3050 +.wpo-dash-link {
3051 + color: #2271B1;
3052 + text-decoration: none;
3053 + font-weight: 500;
2542 3054 }
3055 +.wpo-dash-link:hover, .wpo-dash-link:active {
3056 + color: #2271B1;
3057 + opacity: 0.7;
3058 + text-decoration: none;
3059 +}
3060 +.wpo-dash-link:focus {
3061 + color: #2271B1;
3062 + box-shadow: none;
3063 + outline: none;
3064 +}
2543 3065
2544 -th:not(.sorter-false) .tablesorter-header-inner::after {
2545 - content: '';
2546 - font-family: 'dashicons';
2547 - font-size: 20px;
2548 - line-height: 20px;
2549 - height: 20px;
2550 - width: 20px;
2551 - display: none;
2552 - vertical-align: bottom;
3066 +.wpo-warn {
3067 + color: #b26900;
3068 + font-weight: 500;
3069 + text-decoration: none;
2553 3070 }
3071 +.wpo-warn:hover, .wpo-warn:active {
3072 + color: #b26900;
3073 + opacity: 0.7;
3074 + text-decoration: none;
3075 +}
3076 +.wpo-warn:focus {
3077 + color: #b26900;
3078 + box-shadow: none;
3079 + outline: none;
3080 +}
2554 3081
2555 -th.tablesorter-header.tablesorter-headerAsc,
2556 -th.tablesorter-header.tablesorter-headerDesc {
2557 - font-weight: 500;
2558 - border-bottom-color: #0272AA;
3082 +.wpo-promo-app:hover, .wpo-promo-app:active {
3083 + color: #50575e;
2559 3084 }
3085 +.wpo-promo-app:focus {
3086 + color: #50575e;
3087 + box-shadow: none;
3088 + outline: none;
3089 +}
2560 3090
2561 -th.tablesorter-header.tablesorter-headerAsc .tablesorter-header-inner::after, th.tablesorter-header.tablesorter-headerDesc .tablesorter-header-inner::after {
2562 - display: inline-block;
2563 - }
3091 +.wpo-refresh-btn {
3092 + display: -ms-inline-flexbox;
3093 + display: inline-flex;
3094 + -ms-flex-align: center;
3095 + align-items: center;
3096 + gap: 4px;
3097 + background: none;
3098 + border: none;
3099 + padding: 0;
3100 + cursor: pointer;
3101 + font-size: 13px;
3102 + color: #2271B1;
3103 + font-weight: 500;
3104 +}
3105 +.wpo-refresh-btn:hover {
3106 + opacity: 0.7;
3107 +}
3108 +.wpo-refresh-btn .dashicons {
3109 + font-size: 16px;
3110 + width: 16px;
3111 + height: 16px;
3112 +}
3113 +.wpo-refresh-btn .dashicons.wpo-spinning {
3114 + animation: wpo-spin 1s linear infinite;
3115 +}
2564 3116
2565 -th.tablesorter-header.tablesorter-headerDesc .tablesorter-header-inner::after {
2566 - content: "\f140";
3117 +@keyframes wpo-spin {
3118 + to {
3119 + transform: rotate(360deg);
3120 + }
2567 3121 }
3122 +.wpo-top-row {
3123 + display: -ms-grid;
3124 + display: grid;
3125 + -ms-grid-columns: 1fr 1fr;
3126 + grid-template-columns: 1fr 1fr;
3127 + gap: 0;
3128 +}
2568 3129
2569 -th.tablesorter-header.tablesorter-headerAsc .tablesorter-header-inner::after {
2570 - content: "\f142";
3130 +.wpo-mod-grid {
3131 + display: -ms-grid;
3132 + display: grid;
3133 + -ms-grid-columns: 1fr 1fr;
3134 + grid-template-columns: 1fr 1fr;
3135 + gap: 12px;
2571 3136 }
2572 3137
2573 -th.tablesorter-header:focus {
2574 - outline: none;
2575 - box-shadow: 0 0 3px rgba(0, 116, 171, 0.78)
3138 +.wpo-card,
3139 +.wpo-mod-card {
3140 + background: #fff;
3141 + border: 1px solid #ddd;
3142 + padding: 1rem 1.25rem;
3143 +}
2576 3144
3145 +.wpo-mod-card {
3146 + display: -ms-flexbox;
3147 + display: flex;
3148 + -ms-flex-direction: column;
3149 + flex-direction: column;
3150 + gap: 8px;
3151 + min-width: 0;
3152 + box-shadow: 0 0 1px 0 rgba(59, 59, 59, 0.06), 0 1px 1px 0 rgba(59, 59, 59, 0.05), 0 2px 1px 0 rgba(59, 59, 59, 0.03), 0 4px 2px 0 rgba(59, 59, 59, 0.01), 0 7px 2px 0 rgba(59, 59, 59, 0);
2577 3153 }
2578 3154
2579 -th.tablesorter-header:focus:not(.tablesorter-headerAsc):not(.tablesorter-headerDesc) .tablesorter-header-inner::after {
2580 - content: "\f142";
2581 - opacity: 0.5;
3155 +.wpo-inactive-card {
3156 + opacity: 0.8;
2582 3157 }
2583 3158
2584 -.tablesorter.hasFilters tr.filtered {
2585 - display: none;
3159 +.wpo-setup-eyebrow {
3160 + display: -ms-flexbox;
3161 + display: flex;
3162 + -ms-flex-align: center;
3163 + align-items: center;
3164 + gap: 5px;
3165 + font-size: 12px;
3166 + font-weight: 600;
3167 + color: #339900;
3168 + text-transform: uppercase;
3169 + letter-spacing: 0.05em;
2586 3170 }
2587 3171
2588 -.wpo-text__dim .dashicons-info {
2589 - margin-top: 2px;
2590 - margin-right: 5px;
2591 - border-radius: 30px;
2592 - background: #fff;
2593 - color: #E07575;
2594 - }
2595 -
2596 -#page_cache_length_value {
2597 - height: 28px;
2598 - position: relative;
2599 - top: 2px;
3172 +.wpo-setup-eyebrow.grey-out {
3173 + color: #9FA4A7;
2600 3174 }
2601 3175
2602 -#wp_optimize_preload_cache_status {
2603 - margin-left: 10px;
2604 - display: inline-block;
2605 - color: #82868B;
2606 - font-size: smaller;
3176 +.wpo-setup-eyebrow .wpo-dot {
3177 + background: currentColor;
2607 3178 }
2608 3179
2609 -.align-left {
2610 - margin: 10px 10px 0px 0px;
2611 - float: left;
3180 +.wpo-setup-title {
3181 + font-size: 32px;
3182 + font-weight: 600;
3183 + color: #1C252C;
3184 + margin: 12px 0 5px;
2612 3185 }
2613 3186
2614 -textarea.cache-settings {
2615 - display: block;
2616 - clear: both;
2617 - min-height: 225px;
2618 - overflow: scroll;
2619 - min-width: 75%;
2620 - margin: 10px 0px;
3187 +.wpo-setup-sub {
3188 + font-size: 14px;
3189 + font-weight: 400;
3190 + color: #4F565B;
3191 + margin: 0 0 15px;
2621 3192 }
2622 3193
2623 -#wp-optimize-purge-cache,
2624 -#wp-optimize-purge-cache ~ span,
2625 -#wp-optimize-purge-cache ~ img {
2626 - vertical-align: middle;
2627 - top: auto;
3194 +.wpo-setup-meta {
3195 + width: 100%;
3196 + position: absolute;
3197 + bottom: -2px;
3198 + display: -ms-flexbox;
3199 + display: flex;
3200 + -ms-flex-direction: row;
3201 + flex-direction: row;
3202 + -ms-flex-pack: justify;
3203 + justify-content: space-between;
3204 + -ms-flex-align: center;
3205 + align-items: center;
2628 3206 }
2629 3207
2630 -#wp-optimize-nav-tab-wpo_cache-cache-contents .wpo-error {
3208 +.wpo-setup-meta span {
2631 3209 font-size: 12px;
3210 + color: #50575e;
2632 3211 }
2633 3212
2634 -#wpo_browser_cache_error_message {
2635 - padding-top: 10px;
2636 - padding-bottom: 10px;
2637 - margin-left: 0;
2638 - margin-bottom: 10px
3213 +.wpo-setup-meta .icon-meta {
3214 + margin-right: 4px;
2639 3215 }
2640 3216
2641 -#wpo_browser_cache_error_message:empty {
2642 - display: none;
3217 +.wpo-setup-meta a {
3218 + font-size: 13px;
2643 3219 }
2644 3220
2645 -#wp-optimize-nav-tab-wpo_cache-advanced-contents label, #wp-optimize-nav-tab-wpo_cache-preload-contents label, #wp-optimize-nav-tab-wpo_cache-cache-contents label {
2646 - font-weight: 600;
2647 - }
3221 +.wpo-setup-meta a.button.button-setup {
3222 + background: #2271B1;
3223 + color: #fff;
3224 + padding: 0 25px;
3225 + height: 25px;
3226 + min-height: 25px;
3227 + border-radius: 3px;
3228 + display: -ms-flexbox;
3229 + display: flex;
3230 + -ms-flex-align: center;
3231 + align-items: center;
3232 + box-shadow: none !important;
3233 + outline: none !important;
3234 + border: none !important;
3235 +}
2648 3236
2649 -#wp-optimize-nav-tab-wpo_cache-advanced-contents label em, #wp-optimize-nav-tab-wpo_cache-preload-contents label em, #wp-optimize-nav-tab-wpo_cache-cache-contents label em {
2650 - font-weight: normal;
2651 - }
3237 +.wpo-setup-meta a.button.button-setup:hover {
3238 + opacity: 0.7;
3239 +}
2652 3240
2653 -.wpo-gzip-already-enabled span.dashicons.dashicons-yes,
2654 -.wpo-enabled > span.dashicons.dashicons-yes {
2655 - font-size: 40px;
2656 - width: 40px;
2657 - height: 40px;
2658 - line-height: 40px;
2659 - vertical-align: middle;
2660 - color: green;
3241 +.wpo-setup-meta a.button.button-setup span.dashicons.dashicons-arrow-right-alt {
3242 + color: #fff;
3243 + height: 20px;
3244 + margin-left: 5px;
3245 + line-height: 1.8;
2661 3246 }
2662 3247
2663 -#wp-optimize-wrap .filename {
2664 - display: inline-block;
2665 - padding: 6px 0;
2666 - }
3248 +.wpo-setup-meta span.wpo-running-label {
3249 + display: -ms-flexbox;
3250 + display: flex;
3251 + -ms-flex-pack: justify;
3252 + justify-content: space-between;
3253 + -ms-flex-align: center;
3254 + align-items: center;
3255 +}
2667 3256
2668 -#wp-optimize-wrap .no-files-yet .filename {
2669 - font-style: italic;
2670 - }
3257 +.wpo-setup-meta a.wpo-dash-link {
3258 + display: -ms-flexbox;
3259 + display: flex;
3260 + -ms-flex-direction: row;
3261 + flex-direction: row;
3262 + -ms-flex-pack: justify;
3263 + justify-content: space-between;
3264 + -ms-flex-align: center;
3265 + align-items: center;
3266 +}
2671 3267
2672 -#wp-optimize-wrap .processed {
2673 - margin: 0;
2674 - }
3268 +.wpo-big-num {
3269 + font-size: 40px;
3270 + font-weight: 600;
3271 + color: #1d2327;
3272 +}
2675 3273
2676 -#wp-optimize-wrap .processed .wpo_min_log {
2677 - padding: 8px;
2678 - background: white;
2679 - border: 1px solid #CDCDCD;
2680 - border-radius: 4px;
2681 - line-height: 1.5em;
2682 - }
3274 +.wpo-big-num--green {
3275 + color: #339900;
3276 +}
2683 3277
2684 -#wp-optimize-wrap .processed .wpo_min_log ul {
2685 - overflow-x: auto;
2686 - }
3278 +.wpo-big-num--zero.grey-out {
3279 + color: #9FA4A7;
3280 +}
2687 3281
2688 -#wp-optimize-wrap .processed .wpo_min_log ul li {
2689 - white-space: nowrap
2690 - }
3282 +.wpo-big-num--zero span {
3283 + font-size: 18px;
3284 +}
2691 3285
2692 -#wp-optimize-wrap .processed .wpo_min_log ul li.failed .wpo_min_file_url {
2693 - color: #dc3232;
3286 +.wpo-savings-sub {
3287 + font-size: 14px;
3288 + color: #696F72;
3289 + margin: 8px 0 25px;
2694 3290 }
2695 3291
2696 -#wp-optimize-wrap .processed .wpo_min_log ul li.disable-list-item {
2697 - opacity: 0.5;
3292 +.wpo-savings-bar-label {
3293 + font-size: 11px;
3294 + color: #8c8f94;
3295 + margin-bottom: 6px;
2698 3296 }
2699 3297
2700 -#wp-optimize-wrap .processed .wpo_min_log h5 {
2701 - margin-top: 0;
2702 - margin-bottom: 8px;
2703 - border-bottom: 1px solid #cdcdcd;
2704 - padding-bottom: 6px;
2705 - }
3298 +.wpo-bar-wrap {
3299 + height: 8px;
3300 + border-radius: 4px;
3301 + background: #eee;
3302 + display: -ms-flexbox;
3303 + display: flex;
3304 + overflow: hidden;
3305 + margin-bottom: 10px;
3306 +}
2706 3307
2707 -#wp-optimize-wrap .processed .wpo_min_log .wpo_min_file_debug {
2708 - color: #9c9c9c;
2709 - display: inline-block
2710 - }
3308 +.wpo-bar-seg {
3309 + height: 100%;
3310 + transition: width 0.6s ease;
3311 +}
2711 3312
2712 -#wp-optimize-wrap .processed .wpo_min_log .wpo_min_file_debug::before {
2713 - content: '—';
2714 - display: inline-block;
2715 - margin: 0 10px;
3313 +.wpo-bar-legend {
3314 + display: -ms-flexbox;
3315 + display: flex;
3316 + gap: 14px;
3317 + -ms-flex-wrap: wrap;
3318 + flex-wrap: wrap;
2716 3319 }
2717 3320
2718 -#wp-optimize-wrap .show-if-enabled {
2719 - display: none;
2720 - }
3321 +.wpo-legend-item {
3322 + display: -ms-flexbox;
3323 + display: flex;
3324 + -ms-flex-align: center;
3325 + align-items: center;
3326 + gap: 5px;
3327 + font-size: 11px;
3328 + color: #50575e;
3329 +}
2721 3330
2722 -#wp-optimize-wrap .is-enabled .show-if-enabled {
2723 - display: block;
2724 - }
3331 +.wpo-legend-square {
3332 + width: 10px;
3333 + height: 10px;
3334 + border-radius: 2px;
3335 + -ms-flex-negative: 0;
3336 + flex-shrink: 0;
3337 +}
2725 3338
2726 -#wp-optimize-wrap .wpo-page:not(.is-enabled) .wpo-minify-features {
2727 - display: none;
2728 - }
3339 +.wpo-card-saving-bar {
3340 + position: relative;
3341 + height: 100%;
3342 +}
2729 3343
2730 -#wp-optimize-wrap .wpo-page[data-whichpage="wpo_minify"]:not(.is-enabled) .nav-tab-wrapper > a:not([data-tab="status"]):not([role="toggle-menu"]){
2731 - display: none;
2732 - }
3344 +.wpo-bar-wrap.wpo-bar-wrap--empty .wpo-bar-seg {
3345 + width: 100%;
3346 + height: 100%;
3347 + background: #F1F5F8;
3348 + border-radius: 4px;
3349 +}
2733 3350
2734 -#wp-optimize-wrap .wpo-minify-features {
2735 - padding-top: 1em;
2736 - margin-top: 1em;
2737 - border-top: 1px solid #bbb;
2738 - }
3351 +.wpo-modules-label {
3352 + font-size: 12px;
3353 + font-weight: 500;
3354 + text-transform: uppercase;
3355 + color: #696F72;
3356 + margin-bottom: 5px;
3357 +}
2739 3358
2740 -#wp-optimize-wrap .wpo-minify-features .wpo-fieldgroup__subgroup {
2741 - margin-bottom: 1em;
2742 - }
3359 +.wpo-mod-header {
3360 + display: -ms-flexbox;
3361 + display: flex;
3362 + -ms-flex-pack: justify;
3363 + justify-content: space-between;
3364 + -ms-flex-align: center;
3365 + align-items: center;
3366 +}
2743 3367
2744 -#wp-optimize-wrap .wpo-fieldgroup__subgroup.wpo_min_enable_minify + .wpo-fieldgroup__subgroup {
2745 - display: none;
2746 - }
3368 +.wpo-mod-icon-title {
3369 + display: -ms-flexbox;
3370 + display: flex;
3371 + -ms-flex-align: center;
3372 + align-items: center;
3373 + gap: 7px;
3374 + font-size: 13px;
3375 + color: #50575e;
3376 +}
2747 3377
2748 -#wp-optimize-wrap .wpo-fieldgroup__subgroup.wpo_min_enable_minify.enabled + .wpo-fieldgroup__subgroup {
2749 - display: block;
2750 - }
3378 +.wpo-mod-big {
3379 + font-size: 22px;
3380 + font-weight: 500;
3381 + color: #1d2327;
3382 + line-height: 1.1;
3383 +}
2751 3384
2752 -#wp-optimize-wrap .wpo-fieldgroup__subgroup.wpo_min_enable_minify:not(.enabled) {
2753 - margin-bottom: 0;
2754 - }
3385 +.wpo-mod-big span {
3386 + font-size: 14px;
3387 + font-weight: 400;
3388 + color: #50575e;
3389 +}
2755 3390
2756 -#wp-optimize-wrap .defer-js-settings {
2757 - padding-left: 1em;
2758 - border-left: 2px solid #E2E2E2;
2759 - margin-left: 0.5em;
2760 - }
3391 +.wpo-mod-desc {
3392 + font-size: 12px;
3393 + color: #50575e;
3394 + line-height: 1.5;
3395 + margin: 4px 0 0;
3396 +}
2761 3397
2762 -/*
2763 - Asset preload table
2764 - */
3398 +.wpo-feature-list {
3399 + display: -ms-flexbox;
3400 + display: flex;
3401 + -ms-flex-direction: column;
3402 + flex-direction: column;
3403 + gap: 6px;
3404 + border-top: 1px solid #eee;
3405 + padding-top: 8px;
3406 +}
2765 3407
2766 -#wp-optimize-wrap .asset-preload-list {
2767 - margin-bottom: 1em;
2768 - }
3408 +.wpo-feat-row {
3409 + display: -ms-flexbox;
3410 + display: flex;
3411 + -ms-flex-pack: justify;
3412 + justify-content: space-between;
3413 + -ms-flex-align: center;
3414 + align-items: center;
3415 + font-size: 12px;
3416 +}
2769 3417
2770 -#wp-optimize-wrap .asset-preload-list td.asset-href {
2771 - width: 55%;
2772 - }
3418 +.wpo-feat-name {
3419 + color: #1C252C;
3420 + display: -ms-flexbox;
3421 + display: flex;
3422 + -ms-flex-align: center;
3423 + align-items: center;
3424 + gap: 4px;
3425 +}
2773 3426
2774 -#wp-optimize-wrap .asset-preload-list td.asset-crossorigin {
2775 - width: 10%;
2776 - }
3427 +.wpo-feat-name--truncate {
3428 + overflow: hidden;
3429 +}
2777 3430
2778 -#wp-optimize-wrap .asset-preload-list tr.editing {
2779 - display: none;
2780 - }
3431 +.wpo-feat-name--truncate .wpo-dot {
3432 + min-width: 8px;
3433 +}
2781 3434
2782 -#wp-optimize-wrap .asset-preload-list tr.form {
2783 - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12941);
2784 - }
3435 +.wpo-feat-tasks {
3436 + overflow: hidden;
3437 + text-overflow: ellipsis;
3438 + white-space: nowrap;
3439 +}
2785 3440
2786 -#wp-optimize-wrap .asset-preload-list tr.form td {
2787 - background: #FFF;
2788 - border: none;
2789 - padding: 10px;
2790 - }
3441 +.wpo-feat-val {
3442 + color: #696F72;
3443 + -ms-flex-negative: 0;
3444 + flex-shrink: 0;
3445 + margin-left: 8px;
3446 +}
2791 3447
2792 -#wp-optimize-wrap .asset-preload-list tr.editing + tr.form td:last-child {
2793 - border-radius: 0 5px 5px 0;
2794 - }
3448 +.wpo-feat-val.premium {
3449 + color: #C4511C;
3450 +}
2795 3451
2796 -#wp-optimize-wrap .asset-preload-list tr.editing + tr.form td:first-child {
2797 - position: relative
2798 - }
3452 +.wpo-mod-footer {
3453 + display: -ms-flexbox;
3454 + display: flex;
3455 + -ms-flex-pack: justify;
3456 + justify-content: space-between;
3457 + -ms-flex-align: center;
3458 + align-items: center;
3459 + padding-top: 15px;
3460 + border-top: 1px solid #eee;
3461 + margin-top: auto;
3462 +}
2799 3463
2800 -#wp-optimize-wrap .asset-preload-list tr.editing + tr.form td:first-child::before {
2801 - content: '';
2802 - width: 10px;
2803 - height: 10px;
2804 - background: #FFF;
2805 - display: block;
2806 - position: absolute;
2807 - top: 0;
2808 - left: 0;
2809 - transform: translate(10px, -5px) rotate(45deg);
3464 +.wpo-mod-footer span {
3465 + font-size: 11px;
3466 + color: #8c8f94;
2810 3467 }
2811 3468
2812 -#wp-optimize-wrap .asset-preload-list tbody + tr.form td {
2813 - padding-top: 37px;
2814 - position: relative
2815 - }
3469 +.wpo-mod-footer a {
3470 + font-size: 12px;
3471 +}
2816 3472
2817 -#wp-optimize-wrap .asset-preload-list tbody + tr.form td[data-label]::before {
2818 - content: attr(data-label);
2819 - position: absolute;
2820 - top: 1em;
2821 - left: 10px;
2822 - text-transform: uppercase;
2823 - color: #D0D2D4;
3473 +.wpo-badge {
3474 + display: -ms-inline-flexbox;
3475 + display: inline-flex;
3476 + -ms-flex-align: center;
3477 + align-items: center;
3478 + gap: 5px;
3479 + font-size: 11px;
3480 + font-weight: 500;
3481 + padding: 5px 15px;
3482 + border-radius: 20px;
2824 3483 }
2825 3484
2826 -#wp-optimize-wrap .asset-preload-list input#preload_href {
2827 - width: 100%;
2828 - }
3485 +.wpo-badge.active {
3486 + background: #e0f2e0;
3487 + color: #267300;
3488 +}
2829 3489
2830 -#wp-optimize-wrap .asset-preload-list select#preload_type {
2831 - width: 100%;
2832 - }
3490 +.wpo-badge.scheduled {
3491 + background: #e0f2e0;
3492 + color: #267300;
3493 +}
2833 3494
2834 -#wp-optimize-wrap .asset-preload-list td.asset-preload-form--actions,
2835 - #wp-optimize-wrap .asset-preload-list td.asset-edit {
2836 - text-align: right;
2837 - }
3495 +.wpo-badge.inactive {
3496 + background: #f0f0f0;
3497 + color: #555;
3498 + border: 1px solid #ddd;
3499 +}
2838 3500
2839 -#wp-optimize-wrap .asset-preload-list td.asset-preload-form--actions button, #wp-optimize-wrap .asset-preload-list td.asset-edit button {
2840 - display: inline-block
2841 - }
3501 +.wpo-badge.active::before,
3502 +.wpo-badge.scheduled::before {
3503 + content: "✓";
3504 + font-size: 11px;
3505 + font-weight: 700;
3506 + margin-right: 3px;
3507 +}
2842 3508
2843 -#wp-optimize-wrap .asset-preload-list td.asset-preload-form--actions button.wpo-asset--edit::after, #wp-optimize-wrap .asset-preload-list td.asset-edit button.wpo-asset--edit::after {
2844 - content: '|';
2845 - padding-left: 6px;
2846 - padding-right: 4px;
3509 +.wpo-dash *[class*=wpo-badge] {
3510 + text-transform: capitalize;
2847 3511 }
2848 3512
2849 -/* Modal window */
3513 +.wpo-dot {
3514 + font-size: 0;
3515 + width: 8px;
3516 + height: 8px;
3517 + background: #9FA4A7;
3518 + border-radius: 20px;
3519 +}
2850 3520
2851 -body.wpo-modal-is-opened {
2852 - overflow: hidden;
3521 +.wpo-dot-on {
3522 + background: #66CC66;
2853 3523 }
2854 3524
2855 -.wpo-modal--container {
2856 - position: fixed;
2857 - top: 0;
2858 - left: 0;
2859 - padding: 3em;
2860 - width: 100%;
2861 - height: 100%;
2862 - box-sizing: border-box;
2863 - z-index: 9999;
2864 - overflow: auto;
3525 +.wpo-dot-off {
3526 + background: #E5E7E9;
2865 3527 }
2866 3528
2867 -.wpo-modal {
2868 - position: relative;
2869 - background: #FFF;
2870 - width: calc(100% - 6em);
2871 - top: 50%;
2872 - transform: translateY(-50%);
2873 - margin: 0 auto;
2874 - padding: 2em;
2875 - box-sizing: border-box;
2876 - z-index: 2;
3529 +.grey-out span.wpo-dot-on {
3530 + color: #9FA4A7;
2877 3531 }
2878 3532
2879 -.wpo-modal > .wpo-modal--close {
2880 - border: none;
2881 - background: none;
2882 - position: absolute;
2883 - top: 10px;
2884 - right: 10px;
2885 - width: 20px;
2886 - height: 20px;
2887 - line-height: 1;
2888 - padding: 0;
2889 - }
3533 +.wpo-notice {
3534 + background: #f1f8fd;
3535 + border: 1px solid #C7E2F6;
3536 + border-left: 2px solid #2271B1;
3537 + padding: 8px 10px;
3538 + display: -ms-flexbox;
3539 + display: flex;
3540 + gap: 8px;
3541 + -ms-flex-align: start;
3542 + align-items: flex-start;
3543 + font-size: 12px;
3544 + color: #50575e;
3545 + line-height: 1.5;
3546 + margin: 5px 0 10px;
3547 +}
2890 3548
2891 -.wpo-modal--bg {
2892 - position: fixed;
2893 - top: 0;
2894 - left: 0;
2895 - width: 100%;
2896 - height: 100%;
2897 - background: rgba(0, 0, 0, 0.74);
2898 - z-index: 1;
3549 +.wpo-notice a {
3550 + color: #2271B1;
3551 + text-decoration: underline;
2899 3552 }
2900 3553
2901 -.wpo-confirm .wpo-modal--content > h3 {
2902 - font-size: 2em;
3554 +.wpo-promo {
3555 + border: 1px solid #FDE5CC;
3556 + border-radius: 14px;
3557 + background: #FFF5EB;
3558 + padding: 0.75rem 1.25rem;
3559 + display: -ms-flexbox;
3560 + display: flex;
3561 + -ms-flex-align: center;
3562 + align-items: center;
3563 + gap: 1rem;
3564 + -ms-flex-wrap: wrap;
3565 + flex-wrap: wrap;
3566 + margin-top: 20px;
2903 3567 }
2904 3568
2905 -.wpo-confirm .wpo-modal--content > h3 .dashicons {
2906 - font-size: 30px;
2907 - width: 30px;
2908 - height: 30px;
2909 - transform: translateY(-5px);
3569 +.wpo-promo-label {
3570 + font-size: 13px;
3571 + line-height: 18px;
3572 + font-weight: 600;
3573 + color: #C4511C;
2910 3574 }
2911 3575
2912 -.wpo-confirm .wpo-modal--content > h3 .dashicons.dashicons-warning {
2913 - color: #feb901;
3576 +.wpo-promo-apps {
3577 + display: -ms-flexbox;
3578 + display: flex;
3579 + gap: 3rem;
3580 + -ms-flex: 1;
3581 + flex: 1;
3582 + -ms-flex-pack: center;
3583 + justify-content: center;
2914 3584 }
2915 3585
2916 -@media (min-width: 780px) {
3586 +.wpo-promo-app {
3587 + font-size: 12px;
3588 + color: #50575e;
3589 + display: -ms-flexbox;
3590 + display: flex;
3591 + -ms-flex-direction: row;
3592 + flex-direction: row;
3593 + -ms-flex-align: start;
3594 + align-items: flex-start;
3595 + gap: 2px;
3596 + text-decoration: none;
3597 +}
3598 +.wpo-promo-app:hover {
3599 + opacity: 0.85;
3600 + text-decoration: none;
3601 +}
2917 3602
2918 - .power-tweaks--list {
2919 - display: -ms-flexbox;
2920 - display: flex;
2921 - -ms-flex-direction: row;
2922 - flex-direction: row;
2923 - -ms-flex-wrap: wrap;
2924 - flex-wrap: wrap;
2925 - }
3603 +.wpo-promo-app img {
3604 + display: block;
3605 + width: 25px;
3606 + height: 25px;
3607 + object-fit: contain;
3608 + margin-top: -3px;
2926 3609 }
2927 3610
2928 -.power-tweaks--list .wpo-power-tweak {
2929 - width: 100%;
3611 +.wpo-promo-app .wpo-promo-app-name {
3612 + display: block;
3613 + color: #1d2327;
3614 + font-weight: 600;
3615 + font-size: 12px;
2930 3616 }
2931 3617
2932 -@media (min-width: 780px) {
3618 +.wpo-promo-app span {
3619 + display: block;
3620 + margin-top: 5px;
3621 +}
2933 3622
2934 - .power-tweaks--list .wpo-power-tweak {
2935 - width: calc(25% - 1em);
2936 - margin-right: 1em;
2937 - }
3623 +.wpo-promo-btn {
3624 + margin-left: auto;
3625 + font-size: 12px;
3626 + background: #2271B1;
3627 + color: #fff !important;
3628 + border: none;
3629 + padding: 9px 0;
3630 + border-radius: 4px;
3631 + cursor: pointer;
3632 + text-decoration: none;
3633 + width: 152px;
3634 + text-align: center;
3635 + display: -ms-inline-flexbox;
3636 + display: inline-flex;
3637 + -ms-flex-align: center;
3638 + align-items: center;
3639 + -ms-flex-pack: center;
3640 + justify-content: center;
3641 + gap: 4px;
2938 3642 }
2939 3643
2940 -@media (min-width: 1080px) {
2941 -
2942 - .power-tweaks--list .wpo-power-tweak {
2943 - width: calc(33.33333% - 1em);
2944 - margin-right: 1em;
2945 - }
3644 +.wpo-promo-btn-icon {
3645 + font-size: 14px;
3646 + width: 14px;
3647 + height: 14px;
3648 + transform: rotate(-45deg);
3649 + -ms-flex-negative: 0;
3650 + flex-shrink: 0;
2946 3651 }
2947 3652
2948 -.power-tweaks--list .wpo-power-tweak {
2949 - background: #f2f4f5;
2950 - border-radius: 1em;
2951 - padding: 1.5em;
2952 - margin-bottom: 1em;
2953 - box-sizing: border-box;
3653 +/* Icons */
3654 +.wpo-dash .wpo-dash-icon {
3655 + width: 15px;
3656 + height: 15px;
3657 + font-size: 15px;
2954 3658 }
2955 3659
2956 -.power-tweaks--list .wpo-power-tweak h4 {
2957 - margin-top: 0;
3660 +.wpo-dash-link span.dashicons {
3661 + color: #2271b1;
3662 + font-size: 12px;
2958 3663 }
2959 3664
2960 -.power-tweaks--list .wpo-power-tweak .description {
2961 - margin-bottom: 1em;
3665 +.wpo-dash a > span.dashicons {
3666 + height: inherit;
3667 + margin-right: -2px;
3668 + text-align: right;
2962 3669 }
2963 3670
2964 -.power-tweaks--list .wpo-power-tweak .details {
2965 - padding: 1em;
2966 - background: #FFF;
2967 - box-shadow: 0 2px 3px rgba(0,0,0,0.1);
2968 - margin-top: 1em;
2969 - margin-bottom: 1em;
3671 +.wpo-notice .wpo-dash-icon {
3672 + color: #3F81D1;
3673 + font-size: 16px;
2970 3674 }
2971 3675
2972 -.power-tweaks--list .wpo-power-tweak .actions {
2973 - margin-top: 1em;
2974 - margin-bottom: 1em;
3676 +.wpo-top-row {
3677 + background-color: #F8FBFC;
3678 + border: 1px solid #ddd;
3679 + border-radius: 16px;
3680 + margin-bottom: 30px;
3681 + padding: 25px 0;
3682 + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
2975 3683 }
2976 3684
2977 -.power-tweaks--list .wpo-power-tweak .last-run, .power-tweaks--list .wpo-power-tweak .last-updated {
2978 - margin-top: 1em;
2979 - font-size: 0.8em;
2980 - color: #a9a9a9;
3685 +.wpo-top-row .wpo-card {
3686 + background: transparent;
3687 + position: relative;
3688 + border: none;
3689 + padding: 0;
3690 + margin: 0 20px;
2981 3691 }
2982 3692
2983 -.power-tweaks--list .wpo-power-tweak .tweak-is-running {
2984 - display: none;
3693 +span.size-unit {
3694 + font-size: 18px;
2985 3695 }
2986 3696
2987 -.power-tweaks--list .wpo-power-tweak.running {
2988 - position: relative;
3697 +.wpo-unused-images-count {
3698 + color: #D90000;
2989 3699 }
2990 3700
2991 -.power-tweaks--list .wpo-power-tweak.running .tweak-is-running {
2992 - display: -ms-flexbox;
2993 - display: flex;
2994 - -ms-flex-align: center;
2995 - align-items: center;
2996 - -ms-flex-pack: center;
2997 - justify-content: center;
2998 - position: absolute;
2999 - top: 0;
3000 - bottom: 0;
3001 - left: 0;
3002 - right: 0;
3003 - background: rgb(242, 244, 245, 0.9);
3004 - z-index: 1;
3005 - border-radius: 1em;
3006 - font-size: 1.7em;
3701 +.wpo-feat-row.wpo-backup-before-cleanup span.dashicons.dashicons-arrow-right-alt {
3702 + font-size: 13px;
3703 + margin-top: -1px;
3007 3704 }
3008 3705
3009 -.power-tweaks--list .wpo-power-tweak.running .tweak-is-running .spinner {
3010 - visibility: visible;
3011 - }
3012 -
3013 -.power-tweaks--list a.show-faqs span.dashicons {
3014 - font-size: inherit;
3015 - height: auto;
3016 - width: auto;
3017 - line-height: inherit;
3018 - text-decoration: none;
3019 - margin-left: 4px;
3020 -}
3706 +@media (max-width: 782px) {
3707 + .wpo-mod-grid {
3708 + -ms-grid-columns: 1fr;
3709 + grid-template-columns: 1fr;
3710 + }
3711 + .wpo-top-row {
3712 + -ms-grid-columns: 1fr;
3713 + grid-template-columns: 1fr;
3714 + }
3715 + .wpo-top-row .wpo-card:nth-child(2) {
3716 + margin: 20px;
3717 + }
3718 + .wpo-promo-apps {
3719 + gap: 1rem;
3720 + }
3721 + .wpo-setup-meta {
3722 + bottom: -7px;
3723 + }
3724 +}