studiocms
Version:
Astro Native CMS for AstroDB. Built from the ground up by the Astro community.
104 lines (103 loc) • 1.79 kB
CSS
.metric-card {
display: flex;
flex-direction: column;
border-radius: var(--radius-lg);
gap: 1rem;
border: 1px solid var(--border);
padding: 1rem;
background-color: var(--background-step-1);
p {
margin: 0;
}
h4 {
margin: 0;
}
}
.metric-title {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: bold;
}
.icon {
flex-shrink: 0;
height: 24px;
}
.border-gray {
border-color: var(--border);
}
.bg-light-gray {
background-color: var(--background-step-1);
}
.no-data-text {
margin: auto;
padding: 1rem;
font-size: 0.875rem;
color: var(--text-muted);
}
.metric-value {
font-size: 1.875rem;
font-weight: 400;
line-height: 1;
}
.distribution-container {
position: relative;
}
.p75-marker {
position: absolute;
left: 50%;
right: 0;
top: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transform: translateY(-100%);
}
.marker-text {
height: 0.8rem;
font-family: monospace;
font-size: 0.875rem;
}
.distribution-bar {
display: flex;
height: 1rem;
overflow: hidden;
border-radius: var(--radius-lg);
}
.good {
background-color: var(--success-base);
}
.needs-improvement {
background-color: var(--warning-base);
}
.poor {
background-color: var(--danger-base);
}
.text-green-600 {
color: var(--success-base);
}
.text-yellow-600 {
color: var(--warning-base);
}
.text-red-600 {
color: var(--danger-base);
}
.border-green-600 {
border-color: var(--success-base);
}
.bg-green-100 {
background-color: var(--success-flat);
}
.border-yellow-600 {
border-color: var(--warning-base);
}
.bg-yellow-100 {
background-color: var(--warning-flat);
}
.border-red-600 {
border-color: var(--danger-base);
}
.bg-red-100 {
background-color: var(--danger-flat);
}