Files
recommender/packages/frontend/src/components/PipelineProgress.css
Jose Henrique c319dea2bf
All checks were successful
Recommender Build and Deploy (internal) / Build Recommender Image (push) Successful in 3m22s
Recommender Build and Deploy (internal) / Deploy Recommender (internal) (push) Successful in 48s
new design
2026-04-18 21:19:24 -03:00

120 lines
2.0 KiB
CSS

/* ── Pipeline Progress ──────────────────────────────────── */
.pipeline-progress {
padding: var(--sp-8) 0;
}
.pipeline-title {
font-size: 18px;
font-weight: 600;
color: var(--text);
margin-bottom: var(--sp-6);
}
.pipeline-steps {
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
}
.pipeline-step {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 100%),
var(--bg-surface);
backdrop-filter: blur(14px) saturate(150%);
border: 1px solid var(--border);
border-radius: var(--radius-md);
font-size: 14px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}
.pipeline-step--running {
border-color: rgba(232, 168, 124, 0.3);
background:
linear-gradient(180deg, rgba(232, 168, 124, 0.08), transparent 100%),
rgba(28, 25, 42, 0.82);
}
.pipeline-step--done {
border-color: rgba(34, 197, 94, 0.3);
background: rgba(34, 197, 94, 0.05);
}
.pipeline-step--error {
border-color: rgba(239, 68, 68, 0.3);
background: rgba(239, 68, 68, 0.05);
}
.stage-icon {
font-size: 16px;
width: 20px;
text-align: center;
}
.stage-done {
color: var(--green);
}
.stage-error {
color: var(--red);
}
.stage-running {
color: var(--accent);
}
.stage-pending {
color: var(--text-dim);
}
.spinner {
display: inline-block;
animation: spin 1s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.pipeline-step-label {
font-weight: 500;
}
.pipeline-retry {
margin-top: 20px;
}
.pipeline-step--skipped {
border-color: var(--border);
background: var(--bg-surface);
opacity: 0.45;
}
.stage-skipped {
color: var(--text-dim);
}
.pipeline-pass-group--extra {
margin-top: 20px;
}
.pipeline-pass-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-dim);
margin-bottom: 8px;
}