PluginProbe
Search Atlas SEO – OTTO AI SEO Automation for WordPress / 2.7.0
Search Atlas SEO – OTTO AI SEO Automation for WordPress v2.7.0
2.7.1 2.7.2 2.7.0 2.6.26 2.6.25 2.6.24 2.6.23 2.6.22 2.6.21 2.6.20 2.6.19 2.6.18 2.6.17 2.6.16 2.6.15 2.6.14 2.6.13 2.6.12 2.6.11 2.6.10 2.6.9 2.6.8 2.6.7 2.6.6 2.6.5 All 141 releases
metasync / admin / css / metasync-seo-health.css

metasync-seo-health.css in Search Atlas SEO – OTTO AI SEO Automation for WordPress 2.7.0, at admin/css/metasync-seo-health.css

568 lines 16.1 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * SEO Health Dashboard Styles
3 *
4 * Dark/light theme styling for the SEO Health page.
5 * Uses the shared CSS custom properties defined in metasync-dashboard.css.
6 *
7 * @since 3.0.0
8 * @package Metasync
9 */
10
11 /* Override the grid form layout from metasync-dashboard.css */
12 .metasync-dashboard-wrap form,
13 .metasync-layout-main form {
14 display: block !important;
15 }
16
17 /* ===== SEO Health Summary Cards ===== */
18 .metasync-seo-health-summary {
19 display: flex;
20 gap: 16px;
21 margin: 0 0 24px 0;
22 flex-wrap: wrap;
23 }
24
25 .metasync-health-stat-card {
26 flex: 1;
27 min-width: 160px;
28 background: var(--dashboard-card-bg);
29 border: 1px solid var(--dashboard-border);
30 border-radius: 12px;
31 padding: 20px;
32 text-align: center;
33 box-shadow: var(--dashboard-shadow);
34 transition: all 0.3s ease;
35 }
36
37 .metasync-health-stat-card:hover {
38 background: var(--dashboard-card-hover);
39 box-shadow: var(--dashboard-shadow-hover);
40 transform: translateY(-2px);
41 }
42
43 .metasync-health-stat-card .stat-value {
44 font-size: 28px;
45 font-weight: 700;
46 line-height: 1.2;
47 margin-bottom: 4px;
48 }
49
50 .metasync-health-stat-card .stat-label {
51 font-size: 13px;
52 color: var(--dashboard-text-secondary);
53 font-weight: 500;
54 }
55
56 .metasync-health-stat-card .stat-neutral { color: var(--dashboard-text-primary); }
57 .metasync-health-stat-card .stat-success { color: var(--dashboard-success); }
58 .metasync-health-stat-card .stat-warning { color: var(--dashboard-warning); }
59 .metasync-health-stat-card .stat-error { color: var(--dashboard-error); }
60
61 /* ===== Toolbar: Export CSV + Search in one row ===== */
62 .metasync-health-toolbar {
63 display: flex;
64 align-items: center;
65 justify-content: space-between;
66 margin-bottom: 16px;
67 gap: 16px;
68 }
69
70 .metasync-health-toolbar .search-box {
71 display: flex !important;
72 align-items: center !important;
73 gap: 8px !important;
74 margin: 0 !important;
75 padding: 0 !important;
76 }
77
78 /* ===== WP_List_Table dark-theme overrides ===== */
79
80 /* Table container */
81 .wrap .wp-list-table {
82 background: var(--dashboard-card-bg) !important;
83 border: 1px solid var(--dashboard-border) !important;
84 border-radius: 12px !important;
85 overflow: hidden !important;
86 box-shadow: var(--dashboard-shadow) !important;
87 }
88
89 .wrap .wp-list-table th {
90 background: var(--dashboard-card-hover) !important;
91 color: var(--dashboard-text-primary) !important;
92 border-bottom: 1px solid var(--dashboard-border) !important;
93 font-weight: 600 !important;
94 }
95
96 .wrap .wp-list-table td {
97 background: var(--dashboard-card-bg) !important;
98 border-bottom: 1px solid var(--dashboard-border) !important;
99 color: var(--dashboard-text-secondary) !important;
100 }
101
102 .wrap .wp-list-table tbody tr:nth-child(odd) td {
103 background: var(--dashboard-card-bg) !important;
104 }
105
106 .wrap .wp-list-table tbody tr:nth-child(even) td {
107 background: rgba(255, 255, 255, 0.05) !important;
108 }
109
110 .wrap .wp-list-table tbody tr:hover td {
111 background: var(--dashboard-card-hover) !important;
112 color: var(--dashboard-text-primary) !important;
113 }
114
115 .wrap .wp-list-table a {
116 color: var(--dashboard-accent) !important;
117 }
118
119 .wrap .wp-list-table a:hover {
120 color: var(--dashboard-accent-hover) !important;
121 }
122
123 /* Sortable column headers */
124 .wrap .wp-list-table th a,
125 .wrap .wp-list-table th a:visited {
126 color: var(--dashboard-text-primary) !important;
127 }
128
129 .wrap .wp-list-table th.sorted a,
130 .wrap .wp-list-table th.sorted .sorting-indicators {
131 color: var(--dashboard-accent) !important;
132 }
133
134 /* Keep the sort arrows inline with the header label on every column —
135 narrow columns otherwise wrap two-word labels (e.g. "Post Type") onto
136 a second line before the sorting-indicator. */
137 .wrap .wp-list-table th.sortable a,
138 .wrap .wp-list-table th.sorted a {
139 white-space: nowrap !important;
140 }
141
142 /* Check column */
143 .wrap .wp-list-table th.check-column,
144 .wrap .wp-list-table td.check-column {
145 width: 2.2em;
146 padding: 8px 0 0 3px;
147 vertical-align: middle;
148 }
149
150 /* ===== Tablenav (bulk actions, filters, pagination) ===== */
151 .wrap .tablenav {
152 background: var(--dashboard-card-bg);
153 border: 1px solid var(--dashboard-border);
154 border-radius: 8px;
155 padding: 12px 16px;
156 margin-bottom: 16px;
157 box-shadow: var(--dashboard-shadow);
158 display: flex !important;
159 align-items: center !important;
160 justify-content: space-between !important;
161 flex-wrap: nowrap !important;
162 gap: 8px !important;
163 min-height: 56px !important;
164 overflow-x: auto !important;
165 overflow-y: visible !important;
166 }
167
168 .wrap .tablenav * {
169 box-sizing: border-box !important;
170 }
171
172 .wrap .tablenav .actions {
173 display: flex !important;
174 align-items: center !important;
175 gap: 6px !important;
176 flex-wrap: nowrap !important;
177 flex-shrink: 0 !important;
178 min-width: 0 !important;
179 margin: 0 !important;
180 padding: 0 !important;
181 float: none !important;
182 }
183
184 .wrap .tablenav .alignleft {
185 display: flex !important;
186 align-items: center !important;
187 gap: 6px !important;
188 flex-wrap: nowrap !important;
189 flex-shrink: 0 !important;
190 min-width: 0 !important;
191 margin: 0 !important;
192 padding: 0 !important;
193 float: none !important;
194 }
195
196 .wrap .tablenav .alignright {
197 display: flex !important;
198 align-items: center !important;
199 gap: 6px !important;
200 margin-left: auto !important;
201 flex-shrink: 0 !important;
202 min-width: 0 !important;
203 margin-top: 0 !important;
204 margin-bottom: 0 !important;
205 padding: 0 !important;
206 float: none !important;
207 }
208
209 /* Force inline alignment for all tablenav children */
210 .wrap .tablenav .alignleft > *,
211 .wrap .tablenav .alignright > *,
212 .wrap .tablenav .actions > * {
213 display: inline-flex !important;
214 align-items: center !important;
215 vertical-align: middle !important;
216 margin: 0 !important;
217 }
218
219 /* ===== Selects inside tablenav ===== */
220 .wrap .tablenav select {
221 background: var(--dashboard-card-bg) !important;
222 border: 1px solid var(--dashboard-border) !important;
223 color: var(--dashboard-text-primary) !important;
224 border-radius: 6px !important;
225 padding: 7px 32px 7px 10px !important;
226 height: 36px !important;
227 max-width: 160px !important;
228 vertical-align: middle !important;
229 font-size: 12px !important;
230 font-weight: 500 !important;
231 appearance: none !important;
232 -webkit-appearance: none !important;
233 -moz-appearance: none !important;
234 background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
235 background-repeat: no-repeat !important;
236 background-position: right 8px center !important;
237 background-size: 14px !important;
238 cursor: pointer !important;
239 flex-shrink: 1 !important;
240 white-space: nowrap !important;
241 text-overflow: ellipsis !important;
242 overflow: hidden !important;
243 line-height: 1.4 !important;
244 }
245
246 .wrap .tablenav select:focus {
247 border-color: var(--dashboard-accent) !important;
248 box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
249 outline: none !important;
250 }
251
252 .wrap .tablenav select option {
253 background: var(--dashboard-card-bg) !important;
254 color: var(--dashboard-text-primary) !important;
255 }
256
257 /* ===== Search box ===== */
258 .wrap .search-box,
259 .wrap .tablenav .search-box,
260 .wrap .tablenav p.search-box {
261 display: flex !important;
262 align-items: center !important;
263 gap: 8px !important;
264 margin: 0 !important;
265 padding: 0 !important;
266 border: none !important;
267 background: transparent !important;
268 flex-shrink: 0 !important;
269 height: 40px !important;
270 }
271
272 .wrap .search-box input[type="search"],
273 .wrap .search-box input[type="text"],
274 .wrap .tablenav #seo-health-search-search-input {
275 background: var(--dashboard-card-bg) !important;
276 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
277 background-repeat: no-repeat !important;
278 background-position: 10px center !important;
279 background-size: 14px 14px !important;
280 border: 1px solid var(--dashboard-border) !important;
281 color: var(--dashboard-text-primary) !important;
282 border-radius: 6px !important;
283 padding: 8px 12px 8px 32px !important;
284 height: 36px !important;
285 font-size: 13px !important;
286 box-sizing: border-box !important;
287 margin: 0 !important;
288 vertical-align: middle !important;
289 line-height: 1 !important;
290 }
291
292 [data-theme="light"] .wrap .search-box input[type="search"],
293 [data-theme="light"] .wrap .search-box input[type="text"],
294 [data-theme="light"] .wrap .tablenav #seo-health-search-search-input {
295 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
296 }
297
298 .wrap .search-box input[type="search"]::-webkit-search-cancel-button {
299 margin-right: 0 !important;
300 }
301
302 .wrap .search-box input[type="search"]:focus,
303 .wrap .search-box input[type="text"]:focus {
304 border-color: var(--dashboard-accent) !important;
305 box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
306 outline: none !important;
307 }
308
309 .wrap .search-box input[type="submit"] {
310 height: 36px !important;
311 vertical-align: middle !important;
312 line-height: 1 !important;
313 padding: 8px 16px !important;
314 margin: 0 !important;
315 box-sizing: border-box !important;
316 }
317
318 /* ===== Buttons ===== */
319 .wrap .button-primary,
320 .wrap .button-primary:visited,
321 .wrap input[type="submit"].button-primary,
322 .wrap input[type="submit"]#doaction,
323 .wrap input[type="submit"].button {
324 background: var(--dashboard-accent) !important;
325 border-color: var(--dashboard-accent) !important;
326 color: white !important;
327 border-radius: 8px !important;
328 font-weight: 500 !important;
329 transition: all 0.3s ease !important;
330 }
331
332 .wrap .button-primary:hover,
333 .wrap .button-primary:focus,
334 .wrap input[type="submit"]#doaction:hover,
335 .wrap input[type="submit"].button:hover {
336 background: var(--dashboard-accent-hover) !important;
337 border-color: var(--dashboard-accent-hover) !important;
338 transform: translateY(-1px) !important;
339 box-shadow: var(--dashboard-shadow-hover) !important;
340 color: white !important;
341 }
342
343 .wrap .tablenav input[type="submit"],
344 .wrap .tablenav .button {
345 height: 36px !important;
346 vertical-align: middle !important;
347 line-height: 1 !important;
348 padding: 0 20px !important;
349 flex-shrink: 0 !important;
350 white-space: nowrap !important;
351 width: auto !important;
352 min-width: 80px !important;
353 display: inline-flex !important;
354 align-items: center !important;
355 justify-content: center !important;
356 text-align: center !important;
357 font-size: 13px !important;
358 font-weight: 500 !important;
359 }
360
361 .wrap .button-secondary,
362 .wrap .button-secondary:visited {
363 background: transparent !important;
364 border: 1px solid var(--dashboard-border) !important;
365 color: var(--dashboard-text-secondary) !important;
366 border-radius: 8px !important;
367 transition: all 0.3s ease !important;
368 text-decoration: none !important;
369 }
370
371 .wrap .button-secondary:hover {
372 background: var(--dashboard-card-hover) !important;
373 color: var(--dashboard-text-primary) !important;
374 border-color: var(--dashboard-accent) !important;
375 }
376
377 /* ===== Pagination ===== */
378 .wrap .tablenav-pages {
379 display: flex !important;
380 align-items: center !important;
381 gap: 8px !important;
382 margin: 0 0 0 auto !important;
383 padding: 0 !important;
384 float: none !important;
385 justify-content: flex-end !important;
386 white-space: nowrap !important;
387 }
388
389 .wrap .tablenav-pages .displaying-num {
390 color: var(--dashboard-text-primary) !important;
391 font-size: 13px !important;
392 font-weight: 500 !important;
393 background: var(--dashboard-card-hover) !important;
394 padding: 0 12px !important;
395 border-radius: 6px !important;
396 border: 1px solid var(--dashboard-border) !important;
397 margin-right: 12px !important;
398 white-space: nowrap !important;
399 height: 36px !important;
400 box-sizing: border-box !important;
401 display: inline-flex !important;
402 align-items: center !important;
403 vertical-align: middle !important;
404 line-height: 1.4 !important;
405 }
406
407 .wrap .tablenav-pages .pagination-links {
408 display: flex !important;
409 align-items: center !important;
410 gap: 4px !important;
411 }
412
413 .wrap .tablenav-pages a,
414 .wrap .tablenav-pages .button {
415 background: var(--dashboard-card-bg) !important;
416 border: 1px solid var(--dashboard-border) !important;
417 color: var(--dashboard-text-secondary) !important;
418 border-radius: 6px !important;
419 min-width: 36px !important;
420 height: 36px !important;
421 line-height: 34px !important;
422 text-align: center !important;
423 padding: 0 8px !important;
424 display: inline-flex !important;
425 align-items: center !important;
426 justify-content: center !important;
427 text-decoration: none !important;
428 }
429
430 .wrap .tablenav-pages a:hover {
431 background: var(--dashboard-card-hover) !important;
432 color: var(--dashboard-text-primary) !important;
433 border-color: var(--dashboard-accent) !important;
434 }
435
436 .wrap .tablenav-pages .tablenav-paging-text {
437 display: inline-flex !important;
438 align-items: center !important;
439 gap: 4px !important;
440 color: var(--dashboard-text-secondary) !important;
441 font-size: 13px !important;
442 white-space: nowrap !important;
443 }
444
445 .wrap .tablenav-pages .current-page {
446 background: var(--dashboard-card-bg) !important;
447 border: 1px solid var(--dashboard-border) !important;
448 color: var(--dashboard-text-primary) !important;
449 border-radius: 6px !important;
450 width: 50px !important;
451 height: 36px !important;
452 text-align: center !important;
453 padding: 0 4px !important;
454 box-sizing: border-box !important;
455 }
456
457 .wrap .tablenav-pages .current-page:focus {
458 border-color: var(--dashboard-accent) !important;
459 box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
460 outline: none !important;
461 }
462
463 .wrap .tablenav-pages .total-pages {
464 color: var(--dashboard-text-secondary) !important;
465 }
466
467 /* Prevent "of X" from wrapping below the page input */
468 .wrap .tablenav-pages .paging-input {
469 display: inline-flex !important;
470 align-items: center !important;
471 gap: 4px !important;
472 white-space: nowrap !important;
473 }
474
475 .wrap .tablenav-pages .paging-input label {
476 display: inline-flex !important;
477 align-items: center !important;
478 gap: 4px !important;
479 margin: 0 !important;
480 padding: 0 !important;
481 white-space: nowrap !important;
482 }
483
484 /* ===== Tablenav label spacing ===== */
485 .wrap .tablenav label {
486 margin-right: 12px !important;
487 margin-left: 4px !important;
488 padding: 8px 4px !important;
489 white-space: nowrap !important;
490 flex-shrink: 0 !important;
491 font-weight: 500 !important;
492 color: var(--dashboard-text-secondary) !important;
493 }
494
495 /* ===== SEO status indicators ===== */
496 .seo-status-missing {
497 color: var(--dashboard-error);
498 font-weight: 500;
499 }
500
501 .seo-status-set {
502 font-weight: 500;
503 }
504
505 .seo-status-set.optimal {
506 color: var(--dashboard-success);
507 }
508
509 .seo-status-set.suboptimal {
510 color: var(--dashboard-warning);
511 }
512
513 .seo-status-none {
514 color: var(--dashboard-text-secondary);
515 }
516
517 /* ===== Column widths ===== */
518 .wrap .wp-list-table .column-title { width: 18%; }
519 .wrap .wp-list-table .column-post_type { width: 8%; }
520 .wrap .wp-list-table .column-status { width: 7%; }
521 .wrap .wp-list-table .column-seo_title { width: 14%; }
522 .wrap .wp-list-table .column-meta_description { width: 14%; }
523 .wrap .wp-list-table .column-schema { width: 8%; }
524 .wrap .wp-list-table .column-og_image { width: 8%; }
525 .wrap .wp-list-table .column-alt_text_coverage { width: 10%; }
526 .wrap .wp-list-table .column-last_modified { width: 10%; }
527
528 /* ===== Headings ===== */
529 h1, h2, h3 {
530 color: var(--dashboard-text-primary) !important;
531 }
532
533 .wp-heading-inline {
534 color: var(--dashboard-text-primary) !important;
535 }
536
537 /* ===== Light theme adjustments ===== */
538 [data-theme="light"] .wrap .tablenav select {
539 background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1f26' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
540 }
541
542 /* ===== Responsive ===== */
543 @media (max-width: 960px) {
544 .metasync-seo-health-summary {
545 gap: 12px;
546 }
547 .metasync-health-stat-card {
548 min-width: 120px;
549 padding: 14px;
550 }
551 .metasync-health-stat-card .stat-value {
552 font-size: 22px;
553 }
554 }
555
556 @media (max-width: 600px) {
557 .metasync-seo-health-summary {
558 flex-direction: column;
559 }
560 .metasync-health-stat-card {
561 min-width: auto;
562 }
563 .metasync-health-toolbar {
564 flex-direction: column;
565 align-items: stretch;
566 }
567 }
568