|
349 | 349 | color: rgba(43, 108, 176, 0.6); |
350 | 350 | } |
351 | 351 |
|
352 | | -/* --- RT-DETR Detection Panel (inside Vision cards) --- */ |
353 | | -.ai-vision-detections { |
354 | | - margin: 0 12px 10px; |
355 | | - border-radius: 8px; |
356 | | - border: 1px solid rgba(99, 179, 237, 0.2); |
357 | | - background: rgba(10, 22, 40, 0.6); |
358 | | - overflow: hidden; |
359 | | - animation: fadeInDown 0.25s ease; |
360 | | -} |
361 | | - |
362 | | -@keyframes fadeInDown { |
363 | | - from { opacity: 0; transform: translateY(-6px); } |
364 | | - to { opacity: 1; transform: translateY(0); } |
365 | | -} |
366 | | - |
367 | | -/* Canvas with bounding box overlays */ |
368 | | -.ai-detr-canvas { |
369 | | - display: block; |
370 | | - width: 100%; |
371 | | - height: auto; |
372 | | - border-radius: 6px 6px 0 0; |
373 | | - border-bottom: 1px solid rgba(99, 179, 237, 0.15); |
374 | | -} |
375 | | - |
376 | | -/* Detection count + model badge header */ |
377 | | -.ai-detr-header { |
378 | | - display: flex; |
379 | | - align-items: center; |
380 | | - gap: 8px; |
381 | | - padding: 7px 12px 4px; |
382 | | - font-size: 0.78em; |
383 | | - color: #bee3f8; |
384 | | -} |
385 | | - |
386 | | -.ai-detr-model-badge { |
387 | | - font-size: 0.72em; |
388 | | - font-weight: 700; |
389 | | - letter-spacing: 0.04em; |
390 | | - text-transform: uppercase; |
391 | | - background: rgba(99, 179, 237, 0.18); |
392 | | - border: 1px solid rgba(99, 179, 237, 0.3); |
393 | | - border-radius: 4px; |
394 | | - padding: 1px 6px; |
395 | | - color: #63b3ed; |
396 | | -} |
397 | | - |
398 | | -/* Pill strip — one pill per detected class */ |
399 | | -.ai-detr-pills { |
400 | | - display: flex; |
401 | | - flex-wrap: wrap; |
402 | | - gap: 5px; |
403 | | - padding: 4px 10px 10px; |
404 | | -} |
405 | | - |
406 | | -.ai-detr-pill { |
407 | | - display: inline-flex; |
408 | | - align-items: center; |
409 | | - gap: 5px; |
410 | | - font-size: 0.74em; |
411 | | - border: 1px solid; |
412 | | - border-color: color-mix(in srgb, var(--detr-color, #63b3ed) 50%, transparent); |
413 | | - background: color-mix(in srgb, var(--detr-color, #63b3ed) 12%, transparent); |
414 | | - color: #e2e8f0; |
415 | | - border-radius: 12px; |
416 | | - padding: 2px 10px 2px 7px; |
417 | | - white-space: nowrap; |
418 | | - transition: all 0.15s ease; |
419 | | -} |
420 | | - |
421 | | -.ai-detr-pill:hover { |
422 | | - background: color-mix(in srgb, var(--detr-color, #63b3ed) 22%, transparent); |
423 | | -} |
424 | | - |
425 | | -.ai-detr-pill-dot { |
426 | | - width: 7px; |
427 | | - height: 7px; |
428 | | - border-radius: 50%; |
429 | | - flex-shrink: 0; |
430 | | -} |
431 | | - |
432 | | -/* Loading progress bar */ |
433 | | -.ai-detr-progress { |
434 | | - height: 3px; |
435 | | - background: rgba(99, 179, 237, 0.1); |
436 | | - margin: 4px 12px 12px; |
437 | | - border-radius: 2px; |
438 | | - overflow: hidden; |
439 | | -} |
440 | | - |
441 | | -.ai-detr-progress-bar { |
442 | | - height: 100%; |
443 | | - background: linear-gradient(90deg, #00d4ff, #63b3ed); |
444 | | - border-radius: 2px; |
445 | | - transition: width 0.3s ease; |
446 | | -} |
447 | | - |
448 | | -/* Status text during loading */ |
449 | | -.ai-detr-status { |
450 | | - padding: 10px 12px; |
451 | | - font-size: 0.78em; |
452 | | - color: rgba(99, 179, 237, 0.75); |
453 | | - font-style: italic; |
454 | | -} |
455 | | - |
456 | | -/* No detections fallback */ |
457 | | -.ai-detr-empty { |
458 | | - padding: 10px 12px; |
459 | | - font-size: 0.78em; |
460 | | - color: rgba(99, 179, 237, 0.5); |
461 | | -} |
462 | | - |
463 | | -/* 🔍 Detect toggle button — active state */ |
464 | | -.ai-vision-detect-toggle.active { |
465 | | - background: rgba(99, 179, 237, 0.28) !important; |
466 | | - border-color: rgba(99, 179, 237, 0.55) !important; |
467 | | - color: #00d4ff !important; |
468 | | - font-weight: 700; |
469 | | -} |
470 | | - |
471 | | -/* Light theme adjustments */ |
472 | | -[data-theme="light"] .ai-vision-detections { |
473 | | - background: rgba(235, 248, 255, 0.8); |
474 | | - border-color: rgba(43, 108, 176, 0.25); |
475 | | -} |
476 | | - |
477 | | -[data-theme="light"] .ai-detr-header, |
478 | | -[data-theme="light"] .ai-detr-status, |
479 | | -[data-theme="light"] .ai-detr-pill { |
480 | | - color: #2c5282; |
481 | | -} |
482 | | - |
483 | | - |
484 | 352 |
|
485 | 353 | /* --- OCR Mode Pills --- */ |
486 | 354 | .ai-ocr-mode-pills { |
|
0 commit comments