PluginProbe
Search Atlas SEO – OTTO AI SEO Automation for WordPress / 2.6.11
Search Atlas SEO – OTTO AI SEO Automation for WordPress v2.6.11
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.6.11, at admin/css/metasync-seo-health.css

550 lines 14.8 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 /* Check column */
135 .wrap .wp-list-table th.check-column,
136 .wrap .wp-list-table td.check-column {
137 width: 2.2em;
138 padding: 8px 0 0 3px;
139 vertical-align: middle;
140 }
141
142 /* ===== Tablenav (bulk actions, filters, pagination) ===== */
143 .wrap .tablenav {
144 background: var(--dashboard-card-bg);
145 border: 1px solid var(--dashboard-border);
146 border-radius: 8px;
147 padding: 12px 16px;
148 margin-bottom: 16px;
149 box-shadow: var(--dashboard-shadow);
150 display: flex !important;
151 align-items: center !important;
152 justify-content: space-between !important;
153 flex-wrap: nowrap !important;
154 gap: 8px !important;
155 min-height: 56px !important;
156 overflow-x: auto !important;
157 overflow-y: visible !important;
158 }
159
160 .wrap .tablenav * {
161 box-sizing: border-box !important;
162 }
163
164 .wrap .tablenav .actions {
165 display: flex !important;
166 align-items: center !important;
167 gap: 6px !important;
168 flex-wrap: nowrap !important;
169 flex-shrink: 0 !important;
170 min-width: 0 !important;
171 }
172
173 .wrap .tablenav .alignleft {
174 display: flex !important;
175 align-items: center !important;
176 gap: 6px !important;
177 flex-wrap: nowrap !important;
178 flex-shrink: 0 !important;
179 min-width: 0 !important;
180 }
181
182 .wrap .tablenav .alignright {
183 display: flex !important;
184 align-items: center !important;
185 gap: 6px !important;
186 margin-left: auto !important;
187 flex-shrink: 0 !important;
188 min-width: 0 !important;
189 }
190
191 /* Force inline alignment for all tablenav children */
192 .wrap .tablenav .alignleft > *,
193 .wrap .tablenav .alignright > *,
194 .wrap .tablenav .actions > * {
195 display: inline-flex !important;
196 align-items: center !important;
197 vertical-align: middle !important;
198 margin: 0 !important;
199 }
200
201 /* ===== Selects inside tablenav ===== */
202 .wrap .tablenav select {
203 background: var(--dashboard-card-bg) !important;
204 border: 1px solid var(--dashboard-border) !important;
205 color: var(--dashboard-text-primary) !important;
206 border-radius: 6px !important;
207 padding: 7px 32px 7px 10px !important;
208 height: 36px !important;
209 max-width: 160px !important;
210 vertical-align: middle !important;
211 font-size: 12px !important;
212 font-weight: 500 !important;
213 appearance: none !important;
214 -webkit-appearance: none !important;
215 -moz-appearance: none !important;
216 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;
217 background-repeat: no-repeat !important;
218 background-position: right 8px center !important;
219 background-size: 14px !important;
220 cursor: pointer !important;
221 flex-shrink: 1 !important;
222 white-space: nowrap !important;
223 text-overflow: ellipsis !important;
224 overflow: hidden !important;
225 line-height: 1.4 !important;
226 }
227
228 .wrap .tablenav select:focus {
229 border-color: var(--dashboard-accent) !important;
230 box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
231 outline: none !important;
232 }
233
234 .wrap .tablenav select option {
235 background: var(--dashboard-card-bg) !important;
236 color: var(--dashboard-text-primary) !important;
237 }
238
239 /* ===== Search box ===== */
240 .wrap .search-box,
241 .wrap .tablenav .search-box,
242 .wrap .tablenav p.search-box {
243 display: flex !important;
244 align-items: center !important;
245 gap: 8px !important;
246 margin: 0 !important;
247 padding: 0 !important;
248 border: none !important;
249 background: transparent !important;
250 flex-shrink: 0 !important;
251 height: 40px !important;
252 }
253
254 .wrap .search-box input[type="search"],
255 .wrap .search-box input[type="text"],
256 .wrap .tablenav #seo-health-search-search-input {
257 background: var(--dashboard-card-bg) !important;
258 border: 1px solid var(--dashboard-border) !important;
259 color: var(--dashboard-text-primary) !important;
260 border-radius: 6px !important;
261 padding: 8px 12px !important;
262 height: 36px !important;
263 font-size: 13px !important;
264 box-sizing: border-box !important;
265 margin: 0 !important;
266 vertical-align: middle !important;
267 line-height: 1 !important;
268 }
269
270 .wrap .search-box input[type="search"]:focus,
271 .wrap .search-box input[type="text"]:focus {
272 border-color: var(--dashboard-accent) !important;
273 box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
274 outline: none !important;
275 }
276
277 .wrap .search-box input[type="submit"] {
278 height: 36px !important;
279 vertical-align: middle !important;
280 line-height: 1 !important;
281 padding: 8px 16px !important;
282 margin: 0 !important;
283 box-sizing: border-box !important;
284 }
285
286 /* ===== Buttons ===== */
287 .wrap .button-primary,
288 .wrap .button-primary:visited,
289 .wrap input[type="submit"].button-primary,
290 .wrap input[type="submit"]#doaction,
291 .wrap input[type="submit"].button {
292 background: var(--dashboard-accent) !important;
293 border-color: var(--dashboard-accent) !important;
294 color: white !important;
295 border-radius: 8px !important;
296 font-weight: 500 !important;
297 transition: all 0.3s ease !important;
298 }
299
300 .wrap .button-primary:hover,
301 .wrap .button-primary:focus,
302 .wrap input[type="submit"]#doaction:hover,
303 .wrap input[type="submit"].button:hover {
304 background: var(--dashboard-accent-hover) !important;
305 border-color: var(--dashboard-accent-hover) !important;
306 transform: translateY(-1px) !important;
307 box-shadow: var(--dashboard-shadow-hover) !important;
308 color: white !important;
309 }
310
311 .wrap .tablenav input[type="submit"],
312 .wrap .tablenav .button {
313 height: 40px !important;
314 vertical-align: middle !important;
315 line-height: 1 !important;
316 padding: 10px 20px !important;
317 flex-shrink: 0 !important;
318 white-space: nowrap !important;
319 width: auto !important;
320 min-width: 80px !important;
321 display: inline-flex !important;
322 align-items: center !important;
323 justify-content: center !important;
324 text-align: center !important;
325 font-size: 13px !important;
326 font-weight: 500 !important;
327 }
328
329 .wrap .button-secondary,
330 .wrap .button-secondary:visited {
331 background: transparent !important;
332 border: 1px solid var(--dashboard-border) !important;
333 color: var(--dashboard-text-secondary) !important;
334 border-radius: 8px !important;
335 transition: all 0.3s ease !important;
336 text-decoration: none !important;
337 }
338
339 .wrap .button-secondary:hover {
340 background: var(--dashboard-card-hover) !important;
341 color: var(--dashboard-text-primary) !important;
342 border-color: var(--dashboard-accent) !important;
343 }
344
345 /* ===== Pagination ===== */
346 .wrap .tablenav-pages {
347 display: flex !important;
348 align-items: center !important;
349 gap: 8px !important;
350 margin-left: auto !important;
351 justify-content: flex-end !important;
352 white-space: nowrap !important;
353 }
354
355 .wrap .tablenav-pages .displaying-num {
356 color: var(--dashboard-text-primary) !important;
357 font-size: 13px !important;
358 font-weight: 500 !important;
359 background: var(--dashboard-card-hover) !important;
360 padding: 6px 12px !important;
361 border-radius: 6px !important;
362 border: 1px solid var(--dashboard-border) !important;
363 margin-right: 12px !important;
364 white-space: nowrap !important;
365 height: 32px !important;
366 box-sizing: border-box !important;
367 display: inline-block !important;
368 vertical-align: middle !important;
369 line-height: 1.4 !important;
370 }
371
372 .wrap .tablenav-pages .pagination-links {
373 display: flex !important;
374 align-items: center !important;
375 gap: 4px !important;
376 }
377
378 .wrap .tablenav-pages a,
379 .wrap .tablenav-pages .button {
380 background: var(--dashboard-card-bg) !important;
381 border: 1px solid var(--dashboard-border) !important;
382 color: var(--dashboard-text-secondary) !important;
383 border-radius: 6px !important;
384 min-width: 30px !important;
385 height: 30px !important;
386 line-height: 28px !important;
387 text-align: center !important;
388 padding: 0 8px !important;
389 display: inline-flex !important;
390 align-items: center !important;
391 justify-content: center !important;
392 text-decoration: none !important;
393 }
394
395 .wrap .tablenav-pages a:hover {
396 background: var(--dashboard-card-hover) !important;
397 color: var(--dashboard-text-primary) !important;
398 border-color: var(--dashboard-accent) !important;
399 }
400
401 .wrap .tablenav-pages .tablenav-paging-text {
402 display: inline-flex !important;
403 align-items: center !important;
404 gap: 4px !important;
405 color: var(--dashboard-text-secondary) !important;
406 font-size: 13px !important;
407 white-space: nowrap !important;
408 }
409
410 .wrap .tablenav-pages .current-page {
411 background: var(--dashboard-card-bg) !important;
412 border: 1px solid var(--dashboard-border) !important;
413 color: var(--dashboard-text-primary) !important;
414 border-radius: 6px !important;
415 width: 50px !important;
416 height: 30px !important;
417 text-align: center !important;
418 padding: 0 4px !important;
419 }
420
421 .wrap .tablenav-pages .current-page:focus {
422 border-color: var(--dashboard-accent) !important;
423 box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
424 outline: none !important;
425 }
426
427 .wrap .tablenav-pages .total-pages {
428 color: var(--dashboard-text-secondary) !important;
429 }
430
431 /* Prevent "of X" from wrapping below the page input */
432 .wrap .tablenav-pages .paging-input {
433 display: inline-flex !important;
434 align-items: center !important;
435 gap: 4px !important;
436 white-space: nowrap !important;
437 }
438
439 .wrap .tablenav-pages .paging-input label {
440 display: inline-flex !important;
441 align-items: center !important;
442 gap: 4px !important;
443 margin: 0 !important;
444 padding: 0 !important;
445 white-space: nowrap !important;
446 }
447
448 /* ===== Tablenav label spacing ===== */
449 .wrap .tablenav label {
450 margin-right: 12px !important;
451 margin-left: 4px !important;
452 padding: 8px 4px !important;
453 white-space: nowrap !important;
454 flex-shrink: 0 !important;
455 font-weight: 500 !important;
456 color: var(--dashboard-text-secondary) !important;
457 }
458
459 /* ===== SEO status indicators ===== */
460 .seo-status-missing {
461 color: var(--dashboard-error);
462 font-weight: 500;
463 }
464
465 .seo-status-set {
466 font-weight: 500;
467 }
468
469 .seo-status-set.optimal {
470 color: var(--dashboard-success);
471 }
472
473 .seo-status-set.suboptimal {
474 color: var(--dashboard-warning);
475 }
476
477 .seo-status-none {
478 color: var(--dashboard-text-secondary);
479 }
480
481 .seo-source-badge {
482 display: inline-block;
483 background: var(--dashboard-card-hover);
484 border: 1px solid var(--dashboard-border);
485 padding: 1px 6px;
486 border-radius: 4px;
487 font-size: 11px;
488 font-weight: 500;
489 color: var(--dashboard-text-secondary);
490 margin-left: 4px;
491 }
492
493 /* ===== Column widths ===== */
494 .wrap .wp-list-table .column-title { width: 18%; }
495 .wrap .wp-list-table .column-post_type { width: 8%; }
496 .wrap .wp-list-table .column-status { width: 7%; }
497 .wrap .wp-list-table .column-seo_title { width: 14%; }
498 .wrap .wp-list-table .column-meta_description { width: 14%; }
499 .wrap .wp-list-table .column-schema { width: 8%; }
500 .wrap .wp-list-table .column-og_image { width: 8%; }
501 .wrap .wp-list-table .column-alt_text_coverage { width: 10%; }
502 .wrap .wp-list-table .column-last_modified { width: 10%; }
503
504 /* ===== Headings ===== */
505 h1, h2, h3 {
506 color: var(--dashboard-text-primary) !important;
507 }
508
509 .wp-heading-inline {
510 color: var(--dashboard-text-primary) !important;
511 }
512
513 /* ===== Light theme adjustments ===== */
514 [data-theme="light"] .wrap .tablenav select {
515 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;
516 }
517
518 [data-theme="light"] .seo-source-badge {
519 background: #f1f3f5;
520 border-color: #e5e7eb;
521 color: #6b7280;
522 }
523
524 /* ===== Responsive ===== */
525 @media (max-width: 960px) {
526 .metasync-seo-health-summary {
527 gap: 12px;
528 }
529 .metasync-health-stat-card {
530 min-width: 120px;
531 padding: 14px;
532 }
533 .metasync-health-stat-card .stat-value {
534 font-size: 22px;
535 }
536 }
537
538 @media (max-width: 600px) {
539 .metasync-seo-health-summary {
540 flex-direction: column;
541 }
542 .metasync-health-stat-card {
543 min-width: auto;
544 }
545 .metasync-health-toolbar {
546 flex-direction: column;
547 align-items: stretch;
548 }
549 }
550