| |
|
|
| |
| .loading-container { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| padding: var(--space-12); |
| gap: var(--space-4); |
| } |
|
|
| .spinner { |
| width: 48px; |
| height: 48px; |
| border: 4px solid rgba(45, 212, 191, 0.2); |
| border-top-color: var(--brand-cyan); |
| border-radius: 50%; |
| animation: spin 0.8s linear infinite; |
| } |
|
|
| @keyframes spin { |
| to { transform: rotate(360deg); } |
| } |
|
|
| |
| .diagnostics-summary { |
| margin-bottom: var(--space-6); |
| padding: var(--space-6); |
| background: var(--surface-glass); |
| border: 1px solid var(--border-subtle); |
| border-radius: var(--radius-lg); |
| box-shadow: var(--shadow-md); |
| } |
|
|
| .summary-header { |
| display: flex; |
| align-items: center; |
| gap: var(--space-4); |
| } |
|
|
| .summary-icon { |
| width: 64px; |
| height: 64px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| border-radius: var(--radius-full); |
| font-size: 2rem; |
| font-weight: var(--font-weight-bold); |
| flex-shrink: 0; |
| } |
|
|
| .summary-icon.success { |
| background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(45, 212, 191, 0.2)); |
| color: var(--success); |
| box-shadow: 0 4px 20px rgba(34, 197, 94, 0.3); |
| } |
|
|
| .summary-icon.warning { |
| background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.2)); |
| color: var(--warning); |
| box-shadow: 0 4px 20px rgba(251, 191, 36, 0.3); |
| } |
|
|
| .summary-icon.error { |
| background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2)); |
| color: var(--danger); |
| box-shadow: 0 4px 20px rgba(239, 68, 68, 0.3); |
| } |
|
|
| .summary-content { |
| flex: 1; |
| } |
|
|
| .summary-content h3 { |
| font-size: var(--font-size-xl); |
| font-weight: var(--font-weight-bold); |
| color: var(--text-strong); |
| margin-bottom: var(--space-2); |
| } |
|
|
| .summary-text { |
| font-size: var(--font-size-base); |
| color: var(--text-soft); |
| margin: 0; |
| } |
|
|
| .summary-stats { |
| display: flex; |
| gap: var(--space-4); |
| } |
|
|
| .stat-mini { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| gap: var(--space-1); |
| } |
|
|
| .stat-mini .stat-label { |
| font-size: var(--font-size-xs); |
| color: var(--text-muted); |
| text-transform: uppercase; |
| letter-spacing: 0.05em; |
| } |
|
|
| .stat-mini .stat-value { |
| font-size: var(--font-size-lg); |
| font-weight: var(--font-weight-bold); |
| color: var(--brand-cyan); |
| } |
|
|
| |
| .diagnostics-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); |
| gap: var(--space-4); |
| } |
|
|
| .diagnostic-card { |
| background: var(--surface-glass); |
| border: 1px solid var(--border-subtle); |
| border-radius: var(--radius-lg); |
| padding: var(--space-4); |
| transition: all 0.3s ease; |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .diagnostic-card::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| height: 3px; |
| background: var(--card-color, var(--brand-blue)); |
| transform: scaleX(0); |
| transform-origin: left; |
| transition: transform 0.3s ease; |
| } |
|
|
| .diagnostic-card:hover::before { |
| transform: scaleX(1); |
| } |
|
|
| .diagnostic-card:hover { |
| transform: translateY(-2px); |
| box-shadow: var(--shadow-lg); |
| border-color: var(--border-light); |
| } |
|
|
| .diagnostic-card.pass { --card-color: linear-gradient(90deg, var(--color-success), var(--brand-cyan)); } |
| .diagnostic-card.warn { --card-color: linear-gradient(90deg, var(--color-warning), #fb923c); } |
| .diagnostic-card.fail { --card-color: linear-gradient(90deg, var(--color-danger), #f87171); } |
|
|
| .diagnostic-header { |
| display: flex; |
| align-items: center; |
| gap: var(--space-3); |
| margin-bottom: var(--space-3); |
| } |
|
|
| .diagnostic-icon { |
| width: 40px; |
| height: 40px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| border-radius: var(--radius-md); |
| flex-shrink: 0; |
| } |
|
|
| .diagnostic-icon.pass { |
| background: rgba(34, 197, 94, 0.15); |
| color: var(--color-success); |
| } |
|
|
| .diagnostic-icon.warn { |
| background: rgba(251, 191, 36, 0.15); |
| color: var(--color-warning); |
| } |
|
|
| .diagnostic-icon.fail { |
| background: rgba(239, 68, 68, 0.15); |
| color: var(--color-danger); |
| } |
|
|
| .diagnostic-title { |
| flex: 1; |
| display: flex; |
| flex-direction: column; |
| gap: var(--space-1); |
| } |
|
|
| .diagnostic-title strong { |
| font-size: var(--font-size-base); |
| font-weight: var(--font-weight-semibold); |
| color: var(--text-strong); |
| } |
|
|
| .type-badge { |
| display: inline-block; |
| padding: var(--space-1) var(--space-2); |
| font-size: var(--font-size-xs); |
| font-weight: var(--font-weight-bold); |
| text-transform: uppercase; |
| letter-spacing: 0.05em; |
| border-radius: var(--radius-sm); |
| } |
|
|
| .type-badge.internal { |
| background: rgba(59, 130, 246, 0.15); |
| color: var(--brand-blue); |
| } |
|
|
| .type-badge.external { |
| background: rgba(129, 140, 248, 0.15); |
| color: #a5b4fc; |
| } |
|
|
| .diagnostic-body { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| gap: var(--space-2); |
| } |
|
|
| .diagnostic-message { |
| font-size: var(--font-size-sm); |
| color: var(--text-soft); |
| margin: 0; |
| } |
|
|
| .response-time { |
| font-size: var(--font-size-xs); |
| font-weight: var(--font-weight-medium); |
| color: var(--brand-cyan); |
| font-family: var(--font-mono); |
| padding: var(--space-1) var(--space-2); |
| background: rgba(45, 212, 191, 0.1); |
| border-radius: var(--radius-sm); |
| } |
|
|
| .health-section, |
| .logs-section, |
| .requests-section { |
| margin-bottom: var(--space-6); |
| } |
|
|
| .section-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| margin-bottom: var(--space-4); |
| } |
|
|
| .section-header h2 { |
| display: flex; |
| align-items: center; |
| gap: var(--space-2); |
| font-size: var(--font-size-lg); |
| font-weight: var(--font-weight-semibold); |
| color: var(--text-strong); |
| margin: 0; |
| } |
|
|
| .log-actions { |
| display: flex; |
| gap: var(--space-2); |
| } |
|
|
| .log-actions .form-select { |
| width: 150px; |
| } |
|
|
| |
| .health-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); |
| gap: var(--space-3); |
| } |
|
|
| .health-card { |
| display: flex; |
| align-items: center; |
| gap: var(--space-3); |
| padding: var(--space-4); |
| background: var(--surface-glass); |
| border: 1px solid var(--border-subtle); |
| border-radius: var(--radius-lg); |
| transition: transform 0.2s ease; |
| } |
|
|
| .health-card:hover { |
| transform: translateY(-2px); |
| } |
|
|
| .health-icon { |
| width: 40px; |
| height: 40px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| border-radius: var(--radius-md); |
| } |
|
|
| .health-card.success .health-icon { |
| background: rgba(34, 197, 94, 0.15); |
| color: var(--success); |
| } |
|
|
| .health-card.warning .health-icon { |
| background: rgba(251, 191, 36, 0.15); |
| color: var(--warning); |
| } |
|
|
| .health-card.error .health-icon { |
| background: rgba(239, 68, 68, 0.15); |
| color: var(--danger); |
| } |
|
|
| .health-card.info .health-icon, |
| .health-card.unknown .health-icon { |
| background: rgba(14, 165, 233, 0.15); |
| color: var(--info); |
| } |
|
|
| .health-card.online .health-icon, |
| .health-card.healthy .health-icon, |
| .health-card.operational .health-icon { |
| background: rgba(34, 197, 94, 0.15); |
| color: var(--color-success); |
| } |
|
|
| .health-card.offline .health-icon, |
| .health-card.error .health-icon { |
| background: rgba(239, 68, 68, 0.15); |
| color: var(--color-danger); |
| } |
|
|
| .health-card.degraded .health-icon, |
| .health-card.warning .health-icon { |
| background: rgba(251, 191, 36, 0.15); |
| color: var(--color-warning); |
| } |
|
|
| .health-info { |
| flex: 1; |
| } |
|
|
| .health-info h4 { |
| font-size: var(--font-size-sm); |
| font-weight: var(--font-weight-semibold); |
| color: var(--text-strong); |
| margin: 0 0 var(--space-1) 0; |
| } |
|
|
| .health-info .status-badge { |
| font-size: var(--font-size-xs); |
| padding: 2px 8px; |
| border-radius: var(--radius-sm); |
| text-transform: capitalize; |
| } |
|
|
| .health-info .status-badge.online, |
| .health-info .status-badge.healthy, |
| .health-info .status-badge.operational { |
| background: rgba(34, 197, 94, 0.15); |
| color: var(--success); |
| } |
|
|
| .health-info .status-badge.offline, |
| .health-info .status-badge.error { |
| background: rgba(239, 68, 68, 0.15); |
| color: var(--danger); |
| } |
|
|
| .health-info .status-badge.degraded, |
| .health-info .status-badge.warning, |
| .health-info .status-badge.unknown { |
| background: rgba(251, 191, 36, 0.15); |
| color: var(--warning); |
| } |
|
|
| .health-label { |
| display: block; |
| font-size: var(--font-size-xs); |
| color: var(--text-muted); |
| text-transform: uppercase; |
| margin-bottom: var(--space-1); |
| } |
|
|
| .health-value { |
| font-size: var(--font-size-lg); |
| font-weight: var(--font-weight-semibold); |
| color: var(--text-strong); |
| } |
|
|
| |
| .logs-container { |
| background: var(--surface-glass); |
| border: 1px solid var(--border-subtle); |
| border-radius: var(--radius-lg); |
| max-height: 400px; |
| overflow-y: auto; |
| } |
|
|
| .logs-list { |
| display: flex; |
| flex-direction: column; |
| } |
|
|
| .log-entry { |
| padding: var(--space-3) var(--space-4); |
| border-bottom: 1px solid var(--border-subtle); |
| display: grid; |
| grid-template-columns: 80px 60px 1fr; |
| gap: var(--space-3); |
| align-items: start; |
| } |
|
|
| .log-entry:last-child { |
| border-bottom: none; |
| } |
|
|
| .log-entry.error { |
| background: rgba(239, 68, 68, 0.1); |
| } |
|
|
| .log-entry.warning { |
| background: rgba(251, 191, 36, 0.1); |
| } |
|
|
| .log-time { |
| font-size: var(--font-size-xs); |
| color: var(--text-muted); |
| font-family: 'SF Mono', monospace; |
| } |
|
|
| .log-level { |
| font-size: var(--font-size-xs); |
| font-weight: var(--font-weight-bold); |
| padding: var(--space-1) var(--space-2); |
| border-radius: var(--radius-sm); |
| text-align: center; |
| } |
|
|
| .log-entry.info .log-level { |
| background: rgba(14, 165, 233, 0.15); |
| color: var(--info); |
| } |
|
|
| .log-entry.warning .log-level { |
| background: rgba(251, 191, 36, 0.15); |
| color: var(--warning); |
| } |
|
|
| .log-entry.error .log-level { |
| background: rgba(239, 68, 68, 0.15); |
| color: var(--danger); |
| } |
|
|
| .log-entry.debug .log-level { |
| background: var(--surface-elevated); |
| color: var(--text-muted); |
| } |
|
|
| .log-message { |
| font-size: var(--font-size-sm); |
| color: var(--text-secondary); |
| word-break: break-word; |
| } |
|
|
| .log-details { |
| grid-column: 1 / -1; |
| margin: var(--space-2) 0 0; |
| padding: var(--space-2); |
| background: var(--background-secondary); |
| border-radius: var(--radius-sm); |
| font-size: var(--font-size-xs); |
| color: var(--text-muted); |
| overflow-x: auto; |
| } |
|
|
| |
| .requests-table { |
| background: var(--surface-glass); |
| border: 1px solid var(--border-subtle); |
| border-radius: var(--radius-lg); |
| overflow: hidden; |
| } |
|
|
| .data-table { |
| width: 100%; |
| border-collapse: collapse; |
| } |
|
|
| .data-table th, |
| .data-table td { |
| padding: var(--space-3); |
| text-align: left; |
| border-bottom: 1px solid var(--border-subtle); |
| } |
|
|
| .data-table th { |
| background: var(--surface-elevated); |
| font-size: var(--font-size-xs); |
| font-weight: var(--font-weight-semibold); |
| color: var(--text-muted); |
| text-transform: uppercase; |
| } |
|
|
| .data-table td { |
| font-size: var(--font-size-sm); |
| color: var(--text-secondary); |
| } |
|
|
| .status-badge { |
| font-size: var(--font-size-xs); |
| font-weight: var(--font-weight-medium); |
| padding: var(--space-1) var(--space-2); |
| border-radius: var(--radius-sm); |
| } |
|
|
| .status-badge.success, |
| .status-badge.status-2xx { |
| background: rgba(34, 197, 94, 0.15); |
| color: var(--success); |
| } |
|
|
| .status-badge.error, |
| .status-badge.status-4xx, |
| .status-badge.status-5xx { |
| background: rgba(239, 68, 68, 0.15); |
| color: var(--danger); |
| } |
|
|
| .status-badge.status-3xx { |
| background: rgba(251, 191, 36, 0.15); |
| color: var(--warning); |
| } |
|
|
| .method-badge { |
| display: inline-block; |
| font-size: var(--font-size-xs); |
| font-weight: var(--font-weight-bold); |
| padding: 2px 8px; |
| border-radius: var(--radius-sm); |
| text-transform: uppercase; |
| background: rgba(59, 130, 246, 0.15); |
| color: var(--brand-blue); |
| } |
|
|
| .loading-container, |
| .empty-state, |
| .error-state { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| padding: var(--space-8); |
| color: var(--text-muted); |
| } |
|
|
| .error-message { |
| padding: var(--space-4); |
| text-align: center; |
| color: var(--danger); |
| background: rgba(239, 68, 68, 0.1); |
| border-radius: var(--radius-md); |
| margin: var(--space-4) 0; |
| } |
|
|
| .error-message p { |
| margin: 0; |
| } |
|
|
| .text-center { |
| text-align: center; |
| } |
|
|
| .text-muted { |
| color: var(--text-muted); |
| } |
|
|
| .btn-danger { |
| background: var(--danger); |
| color: white; |
| } |
|
|
| .btn-danger:hover { |
| background: var(--danger-dark); |
| } |
|
|
| @media (max-width: 768px) { |
| .log-entry { |
| grid-template-columns: 1fr; |
| gap: var(--space-1); |
| } |
| |
| .log-actions { |
| flex-wrap: wrap; |
| } |
| |
| .health-grid { |
| grid-template-columns: 1fr 1fr; |
| } |
| } |
|
|
