Spaces:
Sleeping
Sleeping
| /** | |
| * ConfidenceGraph Styles | |
| * | |
| * Supports both light and dark mode. | |
| * Uses CSS custom properties for theming. | |
| */ | |
| .confidence-graph { | |
| --bg-card: rgba(255, 255, 255, 0.05); | |
| --border-color: rgba(128, 128, 128, 0.2); | |
| --text-primary: #fff; | |
| --text-secondary: #aaa; | |
| --grid-color: rgba(128, 128, 128, 0.15); | |
| --axis-color: #888; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: 16px; | |
| padding: 24px; | |
| backdrop-filter: blur(10px); | |
| } | |
| /* Light mode overrides */ | |
| :root[data-theme="light"] .confidence-graph, | |
| .light-mode .confidence-graph { | |
| --bg-card: rgba(255, 255, 255, 0.8); | |
| --text-primary: #1a1a1a; | |
| --text-secondary: #666; | |
| --grid-color: rgba(0, 0, 0, 0.08); | |
| --axis-color: #666; | |
| } | |
| /* Header */ | |
| .confidence-graph-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| margin-bottom: 24px; | |
| } | |
| .header-left h3 { | |
| margin: 0; | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| .header-subtitle { | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| margin-top: 4px; | |
| display: block; | |
| } | |
| /* Average badge */ | |
| .average-badge { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: 12px 20px; | |
| border-radius: 12px; | |
| border: 2px solid; | |
| background: rgba(255, 255, 255, 0.05); | |
| } | |
| .average-value { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| line-height: 1.2; | |
| } | |
| .average-label { | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| opacity: 0.9; | |
| } | |
| /* Chart container */ | |
| .confidence-graph-chart { | |
| margin: 0 -10px; | |
| } | |
| /* Tooltip */ | |
| .confidence-tooltip { | |
| background: rgba(20, 20, 30, 0.95); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 10px; | |
| padding: 12px 16px; | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); | |
| backdrop-filter: blur(10px); | |
| min-width: 100px; | |
| text-align: center; | |
| } | |
| .tooltip-time { | |
| font-size: 0.8rem; | |
| color: #aaa; | |
| margin-bottom: 4px; | |
| } | |
| .tooltip-value { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| line-height: 1.2; | |
| } | |
| .tooltip-level { | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| margin-top: 2px; | |
| } | |
| /* Stats row */ | |
| .confidence-graph-stats { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 16px; | |
| margin-top: 24px; | |
| padding-top: 20px; | |
| border-top: 1px solid var(--border-color); | |
| } | |
| .stat { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| } | |
| .stat-label { | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| margin-bottom: 4px; | |
| } | |
| .stat-value { | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| /* Issue indicator */ | |
| .confidence-issue { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin-top: 16px; | |
| padding: 12px 16px; | |
| background: rgba(239, 68, 68, 0.1); | |
| border: 1px solid rgba(239, 68, 68, 0.2); | |
| border-radius: 10px; | |
| } | |
| .issue-icon { | |
| font-size: 1.2rem; | |
| } | |
| .issue-text { | |
| font-size: 0.9rem; | |
| color: #F87171; | |
| } | |
| /* Empty state */ | |
| .confidence-graph-empty { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 60px 20px; | |
| text-align: center; | |
| background: var(--bg-card); | |
| border: 2px dashed var(--border-color); | |
| border-radius: 16px; | |
| color: var(--text-secondary); | |
| } | |
| .empty-icon { | |
| font-size: 3rem; | |
| margin-bottom: 16px; | |
| opacity: 0.5; | |
| } | |
| .confidence-graph-empty p { | |
| margin: 0; | |
| font-size: 1.1rem; | |
| color: var(--text-primary); | |
| } | |
| .empty-hint { | |
| margin-top: 8px; | |
| font-size: 0.85rem; | |
| opacity: 0.7; | |
| } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| .confidence-graph { | |
| padding: 16px; | |
| } | |
| .confidence-graph-header { | |
| flex-direction: column; | |
| gap: 16px; | |
| } | |
| .average-badge { | |
| align-self: flex-start; | |
| } | |
| .confidence-graph-stats { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| /* Animation for line */ | |
| .confidence-graph .recharts-line-curve { | |
| animation: drawLine 1s ease-out; | |
| } | |
| @keyframes drawLine { | |
| from { | |
| stroke-dasharray: 2000; | |
| stroke-dashoffset: 2000; | |
| } | |
| to { | |
| stroke-dashoffset: 0; | |
| } | |
| } | |
| /* Hover effects */ | |
| .confidence-graph .recharts-active-dot circle { | |
| transition: all 0.2s ease; | |
| } | |
| .confidence-graph .recharts-active-dot:hover circle { | |
| transform: scale(1.2); | |
| } | |