PluginProbe
wpForo Forum / 3.1.6
wpForo Forum v3.1.6
3.1.6 3.1.5 3.1.4 3.1.2 3.1.1 3.1.0 3.0.9 3.0.8 3.0.7 trunk 1.0.0 1.0.1 1.0.2 1.1.0 1.1.1 1.1.2 1.2.0 1.3.0 1.3.1 1.4.0 1.4.1 1.4.10 1.4.11 1.4.12 1.4.13 All 138 releases
wpforo / admin / assets / css / ai-features-tools.css

ai-features-tools.css in wpForo Forum 3.1.6, at admin/assets/css/ai-features-tools.css

800 lines 14.0 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * wpForo AI Features - AI Tools (Custom Knowledge) Styles
3 *
4 * Isolated CSS for AI Tools tab.
5 * Completely independent from other tab styles.
6 *
7 * @package wpForo
8 * @subpackage Admin
9 * @since 3.0.0
10 */
11
12 /* ==========================================================================
13 AI Tools Tab Container
14 ========================================================================== */
15
16 .wpforo-ai-tools-tab {
17 margin: 0;
18 }
19
20 /* ==========================================================================
21 Knowledge Upload Box
22 ========================================================================== */
23
24 .wpforo-ai-knowledge-upload-box {
25 margin-bottom: 20px;
26 }
27
28 .wpforo-ai-knowledge-upload-box .wpforo-ai-box-header h2 .dashicons {
29 color: #0073aa;
30 }
31
32 .wpforo-ai-section-desc {
33 margin: 0 0 5px;
34 margin-left: -4px;
35 color: #646970;
36 font-size: 13px;
37 }
38
39 /* Per-kind icon accents on the section description */
40 .wpforo-ai-section-desc .desc-icon {
41 margin-right: 6px;
42 vertical-align: -3px;
43 }
44 .wpforo-ai-section-desc.kind-text .desc-icon { color: #0073aa; }
45 .wpforo-ai-section-desc.kind-pdf .desc-icon { color: #c0392b; }
46
47 /* Subtle left-border accent on each uploader form so the two kinds are
48 visually distinct without adding noise */
49 .wpforo-ai-knowledge-form.kind-text {
50 border-left: 3px solid #0073aa;
51 padding-left: 10px;
52 }
53 .wpforo-ai-knowledge-form.kind-pdf {
54 border-left: 3px solid #c0392b;
55 padding-left: 10px;
56 }
57
58 /* URL Input Group - single row with input + buttons */
59 .wpforo-ai-url-input-group {
60 display: flex;
61 gap: 8px;
62 align-items: stretch;
63 }
64
65 .wpforo-ai-url-input-group input[type="url"] {
66 flex: 1;
67 min-width: 0;
68 padding: 8px 12px;
69 font-size: 14px;
70 }
71
72 .wpforo-ai-url-input-group .button {
73 display: inline-flex;
74 align-items: center;
75 gap: 5px;
76 white-space: nowrap;
77 height: auto;
78 padding: 8px 14px;
79 }
80
81 .wpforo-ai-url-input-group .button .dashicons {
82 font-size: 16px;
83 width: 16px;
84 height: 16px;
85 line-height: 1;
86 }
87
88 /* Upload Info Row */
89 .wpforo-ai-upload-info {
90 display: flex;
91 justify-content: space-between;
92 align-items: center;
93 margin-top: 5px;
94 padding: 0px 0;
95 flex-wrap: wrap;
96 gap: 10px;
97 }
98
99 /* File Detection Display */
100 .wpforo-ai-file-detected {
101 display: flex;
102 align-items: center;
103 gap: 8px;
104 padding: 8px 12px;
105 background: #f0f6fc;
106 border-radius: 4px;
107 font-size: 13px;
108 }
109
110 .wpforo-ai-file-detected .file-icon {
111 font-size: 16px;
112 }
113
114 .wpforo-ai-file-detected .file-name {
115 font-weight: 500;
116 color: #1d2327;
117 }
118
119 .wpforo-ai-file-detected .file-type-badge {
120 padding: 2px 8px;
121 background: #0073aa;
122 color: #fff;
123 border-radius: 3px;
124 font-size: 11px;
125 font-weight: 500;
126 text-transform: uppercase;
127 }
128
129 /* Credits Info */
130 .wpforo-ai-credits-info {
131 display: flex;
132 align-items: center;
133 gap: 6px;
134 color: #646970;
135 font-size: 13px;
136 }
137
138 .wpforo-ai-credits-info .dashicons {
139 font-size: 16px;
140 width: 16px;
141 height: 16px;
142 color: #646970;
143 }
144
145 .wpforo-ai-credit-rate {
146 color: #888;
147 font-size: 12px;
148 }
149
150 /* Upload Progress */
151 .wpforo-ai-upload-progress {
152 margin-top: 15px;
153 padding: 12px 15px;
154 background: #f8f9fa;
155 border-radius: 4px;
156 }
157
158 .wpforo-ai-progress-bar {
159 height: 6px;
160 background: #dcdcde;
161 border-radius: 3px;
162 overflow: hidden;
163 margin-bottom: 8px;
164 }
165
166 .wpforo-ai-progress-fill {
167 height: 100%;
168 background: #0073aa;
169 width: 0;
170 transition: width 0.3s ease;
171 }
172
173 .wpforo-ai-progress-text {
174 font-size: 12px;
175 color: #646970;
176 text-align: center;
177 }
178
179 /* File Format Help - Compact */
180 .wpforo-ai-file-format-help {
181 margin-top: 20px;
182 border-top: 1px solid #e5e5e5;
183 padding-top: 15px;
184 }
185
186 .wpforo-ai-file-format-help summary {
187 cursor: pointer;
188 font-size: 13px;
189 color: #646970;
190 padding: 5px 0;
191 }
192
193 .wpforo-ai-file-format-help summary:hover {
194 color: #0073aa;
195 }
196
197 .wpforo-ai-format-list {
198 margin-top: 12px;
199 display: flex;
200 flex-direction: column;
201 gap: 8px;
202 }
203
204 .wpforo-ai-format-list .format-item {
205 font-size: 13px;
206 color: #646970;
207 padding: 6px 0;
208 }
209
210 .wpforo-ai-format-list .format-item strong {
211 color: #1d2327;
212 font-family: monospace;
213 background: #f0f0f1;
214 padding: 2px 6px;
215 border-radius: 3px;
216 }
217
218 /* ==========================================================================
219 Knowledge Files Box
220 ========================================================================== */
221
222 .wpforo-ai-knowledge-files-box {
223 margin-bottom: 20px;
224 }
225
226 .wpforo-ai-knowledge-files-box .wpforo-ai-box-header {
227 display: flex;
228 justify-content: space-between;
229 align-items: center;
230 }
231
232 .wpforo-ai-knowledge-files-box .wpforo-ai-box-header h2 {
233 display: flex;
234 align-items: center;
235 gap: 8px;
236 }
237
238 .wpforo-ai-knowledge-files-box .wpforo-ai-box-header h2 .dashicons {
239 color: #0073aa;
240 }
241
242 .wpforo-ai-file-count {
243 font-size: 13px;
244 font-weight: normal;
245 color: #646970;
246 }
247
248 .wpforo-ai-header-actions {
249 display: flex;
250 gap: 8px;
251 }
252
253 /* Loading State */
254 .wpforo-ai-loading {
255 text-align: center;
256 padding: 40px 20px;
257 color: #646970;
258 }
259
260 .wpforo-ai-loading .spinner {
261 float: none;
262 margin: 0 10px 0 0;
263 }
264
265 /* Empty State */
266 .wpforo-ai-empty-state {
267 text-align: center;
268 padding: 40px 20px;
269 color: #646970;
270 }
271
272 .wpforo-ai-empty-state .dashicons {
273 font-size: 48px;
274 width: 48px;
275 height: 48px;
276 color: #dcdcde;
277 display: block;
278 margin: 0 auto 15px;
279 }
280
281 .wpforo-ai-empty-state p {
282 margin: 0;
283 font-size: 14px;
284 }
285
286 /* Files Table */
287 #knowledge-files-table {
288 margin-top: 0;
289 }
290
291 #knowledge-files-table .column-name {
292 width: 30%;
293 }
294
295 #knowledge-files-table .column-type {
296 width: 10%;
297 }
298
299 #knowledge-files-table .column-chunks,
300 #knowledge-files-table .column-credits {
301 width: 10%;
302 text-align: center;
303 }
304
305 #knowledge-files-table .column-status {
306 width: 12%;
307 }
308
309 #knowledge-files-table .column-actions {
310 width: 10%;
311 text-align: right;
312 }
313
314 #knowledge-files-table .row-actions {
315 font-size: 12px;
316 visibility: hidden;
317 }
318
319 #knowledge-files-table tr:hover .row-actions {
320 visibility: visible;
321 }
322
323 #knowledge-files-table .row-actions a {
324 color: #0073aa;
325 text-decoration: none;
326 }
327
328 #knowledge-files-table .row-actions a:hover {
329 color: #006799;
330 text-decoration: underline;
331 }
332
333 /* Status Badge */
334 .wpforo-ai-status-badge {
335 display: inline-block;
336 padding: 3px 8px;
337 border-radius: 3px;
338 font-size: 11px;
339 font-weight: 500;
340 text-transform: uppercase;
341 background: #dcdcde;
342 color: #1d2327;
343 }
344
345 .wpforo-ai-status-badge.status-enabled {
346 background: #d4edda;
347 color: #155724;
348 }
349
350 .wpforo-ai-status-badge.status-disabled {
351 background: #e2e3e5;
352 color: #383d41;
353 }
354
355 .wpforo-ai-status-badge.status-processing,
356 .wpforo-ai-status-badge.status-queued {
357 background: #fff3cd;
358 color: #856404;
359 }
360
361 .wpforo-ai-status-badge.status-deleting {
362 background: #f8d7da;
363 color: #721c24;
364 }
365
366 .wpforo-ai-status-badge.status-error {
367 background: #f8d7da;
368 color: #721c24;
369 }
370
371 /* Toggle Switch */
372 .wpforo-ai-toggle {
373 position: relative;
374 display: inline-block;
375 width: 36px;
376 height: 20px;
377 vertical-align: middle;
378 margin-right: 8px;
379 }
380
381 .wpforo-ai-toggle input {
382 opacity: 0;
383 width: 0;
384 height: 0;
385 }
386
387 .wpforo-ai-toggle-slider {
388 position: absolute;
389 cursor: pointer;
390 top: 0;
391 left: 0;
392 right: 0;
393 bottom: 0;
394 background-color: #ccc;
395 transition: .3s;
396 border-radius: 20px;
397 }
398
399 .wpforo-ai-toggle-slider:before {
400 position: absolute;
401 content: "";
402 height: 14px;
403 width: 14px;
404 left: 3px;
405 bottom: 3px;
406 background-color: white;
407 transition: .3s;
408 border-radius: 50%;
409 }
410
411 .wpforo-ai-toggle input:checked + .wpforo-ai-toggle-slider {
412 background-color: #0073aa;
413 }
414
415 .wpforo-ai-toggle input:checked + .wpforo-ai-toggle-slider:before {
416 transform: translateX(16px);
417 }
418
419 /* Delete Button */
420 .wpforo-ai-delete-file {
421 padding: 2px 4px !important;
422 min-height: auto !important;
423 }
424
425 .wpforo-ai-delete-file .dashicons {
426 font-size: 18px;
427 width: 18px;
428 height: 18px;
429 color: #b32d2e;
430 }
431
432 .wpforo-ai-delete-file:hover .dashicons {
433 color: #a00;
434 }
435
436 /* Totals Row */
437 .wpforo-ai-files-totals td {
438 background: #f8f9fa;
439 font-weight: 500;
440 }
441
442 /* ==========================================================================
443 Board Settings Box
444 ========================================================================== */
445
446 .wpforo-ai-knowledge-settings-box {
447 margin-bottom: 20px;
448 }
449
450 .wpforo-ai-knowledge-settings-box .wpforo-ai-box-header h2 .dashicons {
451 color: #0073aa;
452 }
453
454 /* Board Selector */
455 .wpforo-ai-board-selector {
456 display: flex;
457 align-items: center;
458 gap: 10px;
459 margin-bottom: 20px;
460 padding-bottom: 15px;
461 border-bottom: 1px solid #dcdcde;
462 }
463
464 .wpforo-ai-board-selector label {
465 font-weight: 600;
466 color: #1d2327;
467 }
468
469 .wpforo-ai-board-selector select {
470 min-width: 200px;
471 }
472
473 /* Enable Toggle Row */
474 .wpforo-ai-enable-row {
475 padding: 15px;
476 background: #f8f9fa;
477 border: 1px solid #dcdcde;
478 border-radius: 4px;
479 margin-bottom: 20px;
480 }
481
482 .wpforo-ai-toggle-label {
483 display: flex;
484 align-items: center;
485 gap: 10px;
486 cursor: pointer;
487 }
488
489 .wpforo-ai-toggle-label .toggle-text {
490 font-weight: 500;
491 color: #1d2327;
492 }
493
494 .wpforo-ai-enable-row .description {
495 margin: 8px 0 0 44px;
496 font-size: 12px;
497 color: #646970;
498 }
499
500 /* Priority Section */
501 #knowledge-priority-section {
502 margin-top: 20px;
503 }
504
505 #knowledge-priority-section h4 {
506 margin: 0 0 5px;
507 font-size: 14px;
508 color: #1d2327;
509 }
510
511 #knowledge-priority-section > .description {
512 margin: 0 0 15px;
513 font-size: 12px;
514 color: #646970;
515 }
516
517 /* Priority Arrow */
518 .priority-arrow {
519 color: #646970;
520 font-size: 14px;
521 font-weight: 600;
522 }
523
524 /* Form Actions */
525 .wpforo-ai-form-actions {
526 display: flex;
527 align-items: center;
528 gap: 10px;
529 margin-top: 20px;
530 padding-top: 15px;
531 border-top: 1px solid #dcdcde;
532 }
533
534 /* ==========================================================================
535 Priority Settings Box (Legacy - keeping for compatibility)
536 ========================================================================== */
537
538 .wpforo-ai-knowledge-priority-box {
539 margin-bottom: 20px;
540 }
541
542 .wpforo-ai-knowledge-priority-box .wpforo-ai-box-header h2 .dashicons {
543 color: #0073aa;
544 }
545
546 .wpforo-ai-settings-description {
547 margin: 0 0 20px;
548 color: #646970;
549 }
550
551 /* Priority Form */
552 .wpforo-ai-priority-form .wpforo-ai-loading {
553 padding: 20px;
554 }
555
556 .wpforo-ai-priority-row {
557 display: flex;
558 align-items: center;
559 gap: 15px;
560 padding: 15px;
561 background: #f8f9fa;
562 border: 1px solid #dcdcde;
563 border-radius: 4px;
564 margin-bottom: 10px;
565 }
566
567 .wpforo-ai-priority-row > label {
568 font-weight: 600;
569 min-width: 100px;
570 color: #1d2327;
571 }
572
573 .wpforo-ai-priority-selects {
574 display: flex;
575 align-items: center;
576 gap: 10px;
577 flex-wrap: wrap;
578 }
579
580 .wpforo-ai-priority-selects .priority-label {
581 font-size: 12px;
582 color: #646970;
583 font-weight: 500;
584 }
585
586 .wpforo-ai-priority-selects .priority-select {
587 min-width: 150px;
588 }
589
590 /* Save Status */
591 .wpforo-ai-save-status {
592 font-size: 13px;
593 color: #646970;
594 }
595
596 .wpforo-ai-save-status.success {
597 color: #00a32a;
598 }
599
600 /* ==========================================================================
601 Board Settings Box
602 ========================================================================== */
603
604 .wpforo-ai-knowledge-boards-box {
605 margin-bottom: 20px;
606 }
607
608 .wpforo-ai-knowledge-boards-box .wpforo-ai-box-header h2 .dashicons {
609 color: #0073aa;
610 }
611
612 .wpforo-ai-boards-list {
613 display: grid;
614 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
615 gap: 10px;
616 margin-bottom: 20px;
617 }
618
619 .wpforo-ai-board-checkbox {
620 display: flex;
621 align-items: center;
622 gap: 8px;
623 padding: 12px 15px;
624 background: #f8f9fa;
625 border: 1px solid #dcdcde;
626 border-radius: 4px;
627 cursor: pointer;
628 transition: background-color 0.2s;
629 }
630
631 .wpforo-ai-board-checkbox:hover {
632 background: #f0f0f1;
633 }
634
635 .wpforo-ai-board-checkbox input[type="checkbox"] {
636 margin: 0;
637 }
638
639 .wpforo-ai-board-checkbox .board-title {
640 font-weight: 500;
641 color: #1d2327;
642 }
643
644 .wpforo-ai-board-checkbox .board-id {
645 font-size: 12px;
646 color: #646970;
647 }
648
649 /* ==========================================================================
650 Delete Modal
651 ========================================================================== */
652
653 .wpforo-ai-modal {
654 position: fixed;
655 z-index: 100000;
656 left: 0;
657 top: 0;
658 width: 100%;
659 height: 100%;
660 background-color: rgba(0, 0, 0, 0.5);
661 display: flex;
662 align-items: center;
663 justify-content: center;
664 }
665
666 .wpforo-ai-modal-content {
667 background: #fff;
668 border-radius: 6px;
669 max-width: 450px;
670 width: 90%;
671 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
672 }
673
674 .wpforo-ai-modal-header {
675 display: flex;
676 justify-content: space-between;
677 align-items: center;
678 padding: 15px 20px;
679 border-bottom: 1px solid #dcdcde;
680 }
681
682 .wpforo-ai-modal-header h3 {
683 margin: 0;
684 font-size: 16px;
685 color: #1d2327;
686 }
687
688 .wpforo-ai-modal-close {
689 background: none;
690 border: none;
691 font-size: 24px;
692 color: #646970;
693 cursor: pointer;
694 padding: 0;
695 line-height: 1;
696 }
697
698 .wpforo-ai-modal-close:hover {
699 color: #1d2327;
700 }
701
702 .wpforo-ai-modal-body {
703 padding: 20px;
704 }
705
706 .wpforo-ai-modal-body p {
707 margin: 0 0 10px;
708 color: #646970;
709 }
710
711 .wpforo-ai-delete-file-name {
712 font-weight: 600;
713 color: #1d2327;
714 padding: 10px;
715 background: #f8f9fa;
716 border-radius: 3px;
717 }
718
719 .wpforo-ai-modal-footer {
720 padding: 15px 20px;
721 border-top: 1px solid #dcdcde;
722 display: flex;
723 justify-content: flex-end;
724 gap: 10px;
725 }
726
727 .button-danger {
728 background: #d63638 !important;
729 border-color: #d63638 !important;
730 color: #fff !important;
731 }
732
733 .button-danger:hover {
734 background: #b32d2e !important;
735 border-color: #b32d2e !important;
736 }
737
738 /* ==========================================================================
739 Responsive Styles
740 ========================================================================== */
741
742 @media (max-width: 1200px) {
743 .wpforo-ai-priority-row {
744 flex-direction: column;
745 align-items: flex-start;
746 }
747
748 .wpforo-ai-priority-row > label {
749 margin-bottom: 10px;
750 }
751 }
752
753 @media (max-width: 782px) {
754 .wpforo-ai-url-input-group {
755 flex-direction: column;
756 }
757
758 .wpforo-ai-url-input-group input[type="url"] {
759 width: 100%;
760 }
761
762 .wpforo-ai-url-input-group .button {
763 width: 100%;
764 justify-content: center;
765 }
766
767 .wpforo-ai-upload-info {
768 flex-direction: column;
769 align-items: flex-start;
770 }
771
772 .wpforo-ai-priority-selects {
773 flex-direction: column;
774 align-items: flex-start;
775 }
776
777 .wpforo-ai-priority-selects .priority-select {
778 width: 100%;
779 }
780
781 .wpforo-ai-boards-list {
782 grid-template-columns: 1fr;
783 }
784
785 #knowledge-files-table {
786 display: block;
787 overflow-x: auto;
788 }
789 }
790
791 /* Spin Animation */
792 @keyframes wpforo-spin {
793 0% { transform: rotate(0deg); }
794 100% { transform: rotate(360deg); }
795 }
796
797 .wpforo-spin {
798 animation: wpforo-spin 1s linear infinite;
799 }
800