118 lines
2.5 KiB
CSS
118 lines
2.5 KiB
CSS
.provider-status-page {
|
|
display: grid;
|
|
gap: 1rem;
|
|
padding: 1.25rem;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.provider-status-header,
|
|
.provider-status-card-heading {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.provider-status-header h1,
|
|
.provider-status-card-heading h2 {
|
|
margin: 0;
|
|
}
|
|
|
|
.provider-status-header p,
|
|
.provider-status-card-heading p,
|
|
.provider-status-auth,
|
|
.provider-status-empty {
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.provider-status-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
|
|
.provider-status-card-content {
|
|
display: grid;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.provider-status-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
|
|
gap: .65rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.provider-status-stat {
|
|
display: grid;
|
|
gap: .2rem;
|
|
padding: .7rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: .5rem;
|
|
background: color-mix(in srgb, var(--muted) 35%, transparent);
|
|
}
|
|
|
|
.provider-status-stat-label {
|
|
color: var(--muted-foreground);
|
|
font-size: .75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: .06em;
|
|
}
|
|
|
|
.provider-status-auth {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: .5rem 1rem;
|
|
font-size: .85rem;
|
|
}
|
|
|
|
.provider-status-usage-link {
|
|
color: var(--primary, #f7c843);
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.provider-status-usage-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.provider-status-auth .is-good { color: #22c55e; }
|
|
.provider-status-auth .is-bad { color: #ef4444; }
|
|
|
|
.provider-status-models {
|
|
display: grid;
|
|
gap: .5rem;
|
|
}
|
|
|
|
.provider-status-model {
|
|
display: grid;
|
|
gap: .2rem;
|
|
padding-top: .5rem;
|
|
border-top: 1px solid var(--border);
|
|
font-size: .8rem;
|
|
}
|
|
|
|
.provider-status-model span { color: var(--muted-foreground); }
|
|
|
|
.provider-status-badge--available { background: #166534; color: white; }
|
|
.provider-status-badge--degraded { background: #a16207; color: white; }
|
|
.provider-status-badge--unavailable { background: #991b1b; color: white; }
|
|
.provider-status-badge--unobserved { background: #374151; color: white; }
|
|
|
|
.provider-status-note,
|
|
.provider-status-error,
|
|
.provider-status-loading {
|
|
padding: 1rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: .65rem;
|
|
}
|
|
|
|
.provider-status-note p { margin: .4rem 0 0; color: var(--muted-foreground); }
|
|
.provider-status-error { border-color: #991b1b; color: #fca5a5; }
|
|
|
|
@media (max-width: 640px) {
|
|
.provider-status-page { padding: .75rem; }
|
|
.provider-status-header { align-items: stretch; flex-direction: column; }
|
|
}
|