Joshua
8da593c450
All checks were successful
Dev Build / build-test (pull_request) Successful in 1m57s
77 lines
2.6 KiB
SCSS
77 lines
2.6 KiB
SCSS
// ============================================================================
|
|
// Task Progress Bar — Tactical Dark Theme Styling
|
|
// Per CUB-44: Uses --color-primary for bar fill and --color-surface-light
|
|
// for track background, mapped to the Control Center's M3 dark tokens.
|
|
// ============================================================================
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Container
|
|
// ---------------------------------------------------------------------------
|
|
.task-progress-bar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
width: 100%;
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Info row: percentage label + elapsed time
|
|
// ---------------------------------------------------------------------------
|
|
.task-progress-bar__info {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
|
|
.task-progress-bar__percent {
|
|
font-family: var(--cc-font-mono, 'Roboto Mono', monospace);
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--cc-on-surface, #E2E8F0);
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.task-progress-bar__elapsed {
|
|
font-family: var(--cc-font-mono, 'Roboto Mono', monospace);
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
color: var(--cc-on-surface-variant, #8A9BB0);
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Material Progress Bar Overrides
|
|
// ---------------------------------------------------------------------------
|
|
// Map the spec's --color-primary and --color-surface-light to the Control
|
|
// Center's actual theme tokens. This ensures the bar uses the tactical dark
|
|
// palette while respecting the spec's variable naming.
|
|
// ---------------------------------------------------------------------------
|
|
|
|
.task-progress-bar__bar {
|
|
// Override the track (background) to use the surface container
|
|
--mat-progress-bar-track-height: 6px;
|
|
--mat-progress-bar-active-indicator-height: 6px;
|
|
|
|
// Bar fill color: primary (cyan/sky blue per tactical dark theme)
|
|
--mat-progress-bar-active-indicator-color: var(--color-primary, var(--mat-sys-primary, #38BDF8));
|
|
|
|
// Track background: surface container (dark slate)
|
|
--mat-progress-bar-track-color: var(--color-surface-light, var(--cc-surface-container, #1C2027));
|
|
|
|
// Border radius for a softer bar
|
|
border-radius: 3px;
|
|
|
|
// Smooth transition on value changes
|
|
transition: none;
|
|
}
|
|
|
|
// Rounded ends on the progress bar fill
|
|
:host ::ng-deep .mdc-linear-progress__bar-inner {
|
|
border-radius: 3px;
|
|
}
|
|
|
|
// Rounded track background
|
|
:host ::ng-deep .mdc-linear-progress__track {
|
|
border-radius: 3px;
|
|
} |