swadhin / justapi public
/ justapi / docs_site / src / styles / webtui / components / progress.css
swadhinbiswas 🎨 docs: WebTUI redesign — terminal UI components (badges, buttons, boxes, tabs), catppuccin theme, landing with stats/bars/terminal, removed broken anime.js layer · 8/8/2026
ba6e73d
2 lines · 1.3 KB
Raw Download
1
2
@layer components{@property --progress-value{syntax: "<number>"; inherits: true; initial-value: 0;}@property --progress-max{syntax: "<number>"; inherits: true; initial-value: 100;}[is-~=progress]{--progress-value-background: var(--foreground0);--progress-value-color: var(--foreground0);--progress-value-content: "";--progress-empty-background: var(--background1);--progress-empty-color: var(--foreground0);--progress-empty-content: "";width:round(down,100%,1ch);height:1lh;margin:0;background-color:var(--progress-background-empty);color:var(--progress-color-empty);color:transparent;position:relative;vertical-align:top;display:inline-flex}[is-~=progress]:before{content:var(--progress-value-content);position:absolute;top:0;left:0;height:1lh;vertical-align:top;color:var(--progress-value-color);width:round(nearest,calc((var(--progress-value) / var(--progress-max)) * 100%),1ch);overflow:hidden;white-space:nowrap;background-color:var(--progress-value-background);z-index:1}[is-~=progress]:after{content:var(--progress-empty-content);position:absolute;top:0;right:0;height:1lh;vertical-align:top;color:var(--progress-empty-color);overflow:hidden;width:round(up,calc(100% - (var(--progress-value) / var(--progress-max) * 100%)),1ch);white-space:nowrap;background-color:var(--progress-empty-background);z-index:0}}