PluginProbe
ThinkRank AI SEO – AI SEO Plugin for WordPress: Schema, XML Sitemaps, Meta Tags, Search Console & Local SEO / 1.0.0
ThinkRank AI SEO – AI SEO Plugin for WordPress: Schema, XML Sitemaps, Meta Tags, Search Console & Local SEO v1.0.0
2.7.0 2.6.0 2.5.0 2.4.0 2.3.0 2.2.0 2.1.1 2.1.0 2.0.2 2.0.1 2.0.0 1.32.0 1.31.0 1.30.0 1.29.0 1.28.0 1.27.0 1.26.0 1.25.0 trunk 1.0.0 1.0.1 1.0.2 1.1.0 1.10.0 All 48 releases
thinkrank / src / metabox / styles.scss

styles.scss in ThinkRank AI SEO – AI SEO Plugin for WordPress: Schema, XML Sitemaps, Meta Tags, Search Console & Local SEO 1.0.0, at src/metabox/styles.scss

711 lines 12.9 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * ThinkRank Meta Box Styles
3 *
4 * Main stylesheet for metabox components, importing shared styles
5 *
6 * @package ThinkRank
7 * @since 1.0.0
8 */
9
10 // Import shared styles
11 @use '../shared/styles/variables' as *;
12 @use '../shared/styles/mixins' as *;
13 @use '../shared/styles/components/seo-score';
14 @use '../shared/styles/components/serp-preview';
15
16 // Import metabox-specific styles
17 @use 'styles/metabox-tabs';
18 @use 'styles/social-tab';
19
20 /* CSS Variables for WordPress compatibility */
21 :root {
22 --thinkrank-primary: #{$thinkrank-primary};
23 --thinkrank-text-primary: #{$thinkrank-text-primary};
24 --thinkrank-text-secondary: #{$thinkrank-text-secondary};
25 --thinkrank-border: #{$thinkrank-border};
26 --thinkrank-border-light: #{$thinkrank-border-light};
27 }
28
29 /* Schema Form Container */
30 .schema-form-container {
31 margin: 16px 0;
32
33 .components-card {
34 box-shadow: none;
35 border: 1px solid #ddd;
36
37 .components-card-header {
38 border-bottom: 1px solid #ddd;
39 padding: 12px 16px;
40
41 h4 {
42 margin: 0;
43 font-size: 14px;
44 font-weight: 600;
45 }
46 }
47
48 .components-card-body {
49 padding: 16px;
50 }
51 }
52 }
53
54 /* Meta Box Container */
55 .thinkrank-metabox {
56 /* Ensure proper spacing within WordPress metabox */
57 .inside {
58 margin: 0 !important;
59 padding: 0 !important;
60 }
61 }
62
63 .thinkrank-metabox-content {
64 padding: 20px;
65
66 /* Ensure text doesn't get cut off */
67 word-wrap: break-word;
68 overflow-wrap: break-word;
69
70 /* Prevent horizontal overflow */
71 max-width: 100%;
72 box-sizing: border-box;
73 }
74
75 /* Card Styling */
76 .thinkrank-card {
77 background: #fff;
78 border: 1px solid #ddd;
79 border-radius: 8px;
80 margin-bottom: 20px;
81 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
82 }
83
84 .thinkrank-card-header {
85 padding: 16px 20px;
86 border-bottom: 1px solid #eee;
87 background: #f9f9f9;
88 border-radius: 8px 8px 0 0;
89 }
90
91 .thinkrank-card-header h4 {
92 margin: 0 0 8px 0;
93 font-size: 16px;
94 font-weight: 600;
95 color: #23282d;
96 }
97
98 .thinkrank-card-header .description {
99 margin: 0;
100 color: #666;
101 font-size: 13px;
102 line-height: 1.4;
103 }
104
105 .thinkrank-card-body {
106 padding: 20px;
107 }
108
109 /* Metabox Header */
110 .thinkrank-metabox-header {
111 padding: 10px 20px;
112 margin: 0 20px;
113 border: 1px solid #eee;
114 background: #f9f9f9;
115 border-radius: 8px;
116
117 h4 {
118 margin: 0 0 8px 0;
119 font-size: 16px;
120 font-weight: 600;
121 color: #23282d;
122 }
123
124 .description {
125 margin: 0;
126 color: #666;
127 font-size: 13px;
128 line-height: 1.4;
129 }
130 }
131
132 .thinkrank-metabox-content h4 {
133 margin: 0 0 15px 0;
134 font-size: 14px;
135 font-weight: 600;
136 }
137
138 .thinkrank-metabox-content p {
139 margin: 0 0 15px 0;
140 color: #666;
141 font-size: 13px;
142 line-height: 1.4;
143 word-wrap: break-word;
144 }
145
146 /* Form Fields */
147 .thinkrank-field {
148 margin-bottom: 20px;
149 }
150
151 .thinkrank-field label {
152 display: block;
153 margin-bottom: 5px;
154 font-weight: 600;
155 font-size: 13px;
156 }
157
158 .thinkrank-field input[type="text"]="text""],
159 .thinkrank-field textarea,
160 .thinkrank-field select {
161 width: 100%;
162 padding: 8px 12px;
163 border: 1px solid #ddd;
164 border-radius: 4px;
165 font-size: 13px;
166 line-height: 1.4;
167 }
168
169 .thinkrank-field textarea {
170 resize: vertical;
171 min-height: 80px;
172 }
173
174 .thinkrank-field .description {
175 margin-top: 5px;
176 color: #666;
177 font-size: 12px;
178 font-style: italic;
179 }
180
181 /* Character Counters */
182 .character-counter {
183 float: right;
184 font-size: 11px;
185 color: #666;
186 margin-top: 5px;
187 }
188
189 .character-counter.over-limit {
190 color: #d63638;
191 font-weight: 600;
192 }
193
194 /* AI Options */
195 .ai-controls-row {
196 display: flex;
197 gap: 15px;
198 margin-bottom: 20px;
199 flex-wrap: wrap;
200 }
201
202 .ai-control-group {
203 flex: 1;
204 min-width: 150px;
205 }
206
207 .ai-control-group label {
208 display: block;
209 margin-bottom: 5px;
210 font-weight: 600;
211 font-size: 13px;
212 }
213
214 .ai-control-group select {
215 width: 100%;
216 padding: 8px 12px;
217 border: 1px solid #ddd;
218 border-radius: 4px;
219 font-size: 13px;
220 }
221
222 /* AI Buttons */
223 .ai-buttons {
224 display: flex;
225 gap: 10px;
226 margin-bottom: 20px;
227 flex-wrap: wrap;
228 }
229
230 .ai-buttons .button {
231 display: flex;
232 align-items: center;
233 gap: 5px;
234 padding: 8px 16px;
235 font-size: 13px;
236 }
237
238 .ai-buttons .button .dashicons {
239 font-size: 16px;
240 width: 16px;
241 height: 16px;
242 }
243
244 .ai-buttons .button:disabled {
245 opacity: 0.6;
246 cursor: not-allowed;
247 }
248
249 /* Spinning Animation */
250 .spin {
251 animation: spin 1s linear infinite;
252 }
253
254 @keyframes spin {
255 from { transform: rotate(0deg); }
256 to { transform: rotate(360deg); }
257 }
258
259 /* Analysis Results Container */
260 .thinkrank-analysis-results {
261 margin-top: 20px;
262 padding: 20px;
263 background: #f9f9f9;
264 border: 1px solid #e0e0e0;
265 border-radius: 8px;
266 }
267
268 /* Analysis Sections */
269 .analysis-section {
270 margin-bottom: 25px;
271 }
272
273 .analysis-section:last-child {
274 margin-bottom: 0;
275 }
276
277 .analysis-section h4 {
278 margin: 0 0 15px 0;
279 font-size: 14px;
280 font-weight: 600;
281 color: #333;
282 border-bottom: 2px solid #0073aa;
283 padding-bottom: 5px;
284 }
285
286 .analysis-section h5 {
287 margin: 0 0 10px 0;
288 font-size: 13px;
289 font-weight: 600;
290 color: #555;
291 }
292
293 /* Score Section */
294 .score-section {
295 display: flex;
296 align-items: center;
297 gap: 25px;
298 padding: 20px;
299 background: #fff;
300 border-radius: 8px;
301 border: 1px solid #ddd;
302 }
303
304 .score-circle {
305 display: flex;
306 flex-direction: column;
307 align-items: center;
308 justify-content: center;
309 width: 100px;
310 height: 100px;
311 border-radius: 50%;
312 border: 6px solid #ddd;
313 background: #fff;
314 flex-shrink: 0;
315 }
316
317 .score-circle.score-high {
318 border-color: #00a32a;
319 color: #00a32a;
320 }
321
322 .score-circle.score-medium {
323 border-color: #dba617;
324 color: #dba617;
325 }
326
327 .score-circle.score-low {
328 border-color: #d63638;
329 color: #d63638;
330 }
331
332 .score-number {
333 font-size: 24px;
334 font-weight: 700;
335 line-height: 1;
336 }
337
338 .score-grade {
339 font-size: 10px;
340 font-weight: 600;
341 margin-top: 2px;
342 opacity: 0.8;
343 }
344
345 .score-label {
346 font-size: 9px;
347 text-transform: uppercase;
348 margin-top: 2px;
349 font-weight: 600;
350 opacity: 0.9;
351 }
352
353 .score-breakdown {
354 flex: 1;
355 }
356
357 .score-item {
358 display: flex;
359 justify-content: space-between;
360 align-items: center;
361 padding: 8px 0;
362 border-bottom: 1px solid #eee;
363 }
364
365 .score-item:last-child {
366 border-bottom: none;
367 }
368
369 .score-item .score-label {
370 font-size: 13px;
371 color: #666;
372 text-transform: none;
373 margin: 0;
374 }
375
376 .score-item .score-value {
377 font-size: 13px;
378 font-weight: 600;
379 color: #333;
380 text-transform: capitalize;
381 }
382
383 /* Content Analysis Grid */
384 .analysis-grid {
385 display: grid;
386 grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
387 gap: 15px;
388 }
389
390 .analysis-item {
391 padding: 15px;
392 background: #fff;
393 border: 1px solid #ddd;
394 border-radius: 6px;
395 text-align: center;
396 }
397
398 .analysis-label {
399 display: block;
400 font-size: 12px;
401 color: #666;
402 margin-bottom: 5px;
403 text-transform: uppercase;
404 font-weight: 600;
405 }
406
407 .analysis-value {
408 display: block;
409 font-size: 16px;
410 font-weight: 700;
411 color: #333;
412 text-transform: capitalize;
413 }
414
415 /* Suggestions List */
416 .suggestions-list {
417 margin: 0;
418 padding: 0;
419 list-style: none;
420 }
421
422 .suggestions-list li {
423 margin-bottom: 10px;
424 padding: 12px 15px;
425 background: #fff;
426 border: 1px solid #ddd;
427 border-left: 4px solid #0073aa;
428 border-radius: 4px;
429 font-size: 13px;
430 line-height: 1.4;
431 }
432
433 .suggestions-list li:last-child {
434 margin-bottom: 0;
435 }
436
437 /* Strengths & Weaknesses */
438 .strengths-weaknesses {
439 display: grid;
440 grid-template-columns: 1fr 1fr;
441 gap: 20px;
442 }
443
444 .strengths-column,
445 .weaknesses-column {
446 padding: 15px;
447 background: #fff;
448 border: 1px solid #ddd;
449 border-radius: 6px;
450 }
451
452 .strengths-list,
453 .weaknesses-list {
454 margin: 0;
455 padding: 0;
456 list-style: none;
457 }
458
459 .strengths-list li,
460 .weaknesses-list li {
461 margin-bottom: 8px;
462 padding: 8px 12px;
463 border-radius: 4px;
464 font-size: 12px;
465 line-height: 1.4;
466 }
467
468 .strengths-list li {
469 background: #e8f5e8;
470 border-left: 3px solid #00a32a;
471 color: #155724;
472 }
473
474 .weaknesses-list li {
475 background: #f8e8e8;
476 border-left: 3px solid #d63638;
477 color: #721c24;
478 }
479
480 .strengths-list li:last-child,
481 .weaknesses-list li:last-child {
482 margin-bottom: 0;
483 }
484
485 /* Responsive Design */
486 @media (max-width: 782px) {
487 .ai-controls-row {
488 flex-direction: column;
489 }
490
491 .ai-buttons {
492 flex-direction: column;
493 }
494
495 .score-section {
496 flex-direction: column;
497 text-align: center;
498 }
499
500 .analysis-grid {
501 grid-template-columns: 1fr;
502 }
503
504 .strengths-weaknesses {
505 grid-template-columns: 1fr;
506 }
507 }
508
509 /* Loading States */
510 .thinkrank-field.loading input,
511 .thinkrank-field.loading textarea {
512 opacity: 0.6;
513 pointer-events: none;
514 }
515
516 /* Focus States */
517 .thinkrank-field input:focus,
518 .thinkrank-field textarea:focus,
519 .thinkrank-field select:focus {
520 border-color: #0073aa;
521 box-shadow: 0 0 0 1px #0073aa;
522 outline: none;
523 }
524
525 /* Utility Classes */
526 .hidden {
527 display: none !important;
528 }
529
530 /* Suggestion Priority Badges */
531 .suggestion-content {
532 display: flex;
533 justify-content: space-between;
534 align-items: center;
535 gap: 10px;
536 }
537
538 .priority-badge {
539 font-size: 10px;
540 padding: 2px 6px;
541 border-radius: 3px;
542 font-weight: 600;
543 text-transform: uppercase;
544
545 &.priority-high {
546 background-color: #dc3545;
547 color: white;
548 }
549
550 &.priority-medium {
551 background-color: #ffc107;
552 color: #212529;
553 }
554
555 &.priority-low {
556 background-color: #28a745;
557 color: white;
558 }
559
560 &.priority-critical {
561 background-color: #6f42c1;
562 color: white;
563 }
564 }
565
566 /* Comprehensive Score Breakdown */
567 .comprehensive-score-section {
568 margin-top: 20px;
569 padding: 20px;
570 background: #f9f9f9;
571 border-radius: 8px;
572 border: 1px solid #e0e0e0;
573
574 h5 {
575 margin: 0 0 15px 0;
576 font-size: 14px;
577 font-weight: 600;
578 color: #333;
579 border-bottom: 1px solid #ddd;
580 padding-bottom: 8px;
581 }
582 }
583
584 .score-factor-item {
585 margin-bottom: 12px;
586 background: #fff;
587 border-radius: 6px;
588 border: 1px solid #e0e0e0;
589 overflow: hidden;
590
591 .factor-header {
592 display: flex;
593 align-items: center;
594 padding: 12px 16px;
595 gap: 12px;
596
597 .factor-icon {
598 font-size: 16px;
599 flex-shrink: 0;
600 }
601
602 .factor-label {
603 flex: 1;
604 font-size: 13px;
605 font-weight: 500;
606 color: #333;
607 }
608
609 .factor-score {
610 display: flex;
611 flex-direction: column;
612 align-items: flex-end;
613 gap: 4px;
614 min-width: 80px;
615
616 .score-value {
617 font-size: 12px;
618 font-weight: 600;
619 color: #333;
620 }
621
622 .score-bar {
623 width: 60px;
624 height: 4px;
625 background-color: #e0e0e0;
626 border-radius: 2px;
627 overflow: hidden;
628
629 .score-bar-fill {
630 height: 100%;
631 transition: width 0.3s ease;
632 border-radius: 2px;
633
634 &.score-excellent {
635 background-color: #00a32a;
636 }
637
638 &.score-good {
639 background-color: #007cba;
640 }
641
642 &.score-fair {
643 background-color: #dba617;
644 }
645
646 &.score-poor {
647 background-color: #d63638;
648 }
649 }
650 }
651 }
652 }
653 }
654
655 /* Additional responsive styles for comprehensive scoring */
656 @media (max-width: 768px) {
657 .comprehensive-score-section {
658 padding: 15px;
659
660 .score-factor-item {
661 .factor-header {
662 padding: 10px 12px;
663 gap: 8px;
664
665 .factor-score {
666 min-width: 60px;
667
668 .score-bar {
669 width: 50px;
670 }
671 }
672 }
673 }
674 }
675 }
676
677 /* Refresh Indicator */
678 .thinkrank-refresh-indicator {
679 position: fixed;
680 top: 32px;
681 right: 20px;
682 background: #fff;
683 border: 1px solid #ddd;
684 border-radius: 4px;
685 padding: 8px 12px;
686 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
687 z-index: 9999;
688 display: flex;
689 align-items: center;
690 gap: 8px;
691 font-size: 13px;
692 color: #666;
693
694 .spinner {
695 float: none;
696 margin: 0;
697 width: 16px;
698 height: 16px;
699 }
700
701 span:not(.spinner) {
702 white-space: nowrap;
703 }
704 }
705
706 /* Refreshing state */
707 .thinkrank-metabox-schema-tab.is-refreshing {
708 opacity: 0.7;
709 pointer-events: none;
710 transition: opacity 0.2s ease;
711 }