Thomas des Francs
59c16ef46f
## Summary - Polish Billing credits progress rounding and secondary action styling. - Update MCP setup logos, card spacing, grouping, and badge color. ## Before/After MCP & APIs <img width="2258" height="2010" alt="MCP & APIs settings visual" src="https://github.com/user-attachments/assets/915c8b50-5b98-4ba9-8e5c-a33f36440f6e" /> Billing <img width="2240" height="1644" alt="Billing settings visual" src="https://github.com/user-attachments/assets/9e3eb332-5792-4a4a-80b0-1b984e574008" />
55 lines
964 B
SCSS
55 lines
964 B
SCSS
.bar {
|
|
position: relative;
|
|
height: var(--t-spacing-2);
|
|
width: 100%;
|
|
background-color: var(--progress-bar-background-color, none);
|
|
border-radius: 0;
|
|
overflow: hidden;
|
|
|
|
&[data-with-border-radius] {
|
|
border-radius: var(--t-border-radius-pill);
|
|
corner-shape: round;
|
|
}
|
|
}
|
|
|
|
.track {
|
|
position: relative;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.indicator {
|
|
height: 100%;
|
|
background-color: var(--progress-bar-color, var(--t-font-color-primary));
|
|
border-radius: 0;
|
|
transition: width duration(normal) linear;
|
|
|
|
&[data-with-border-radius] {
|
|
border-radius: var(--t-border-radius-pill);
|
|
corner-shape: round;
|
|
}
|
|
|
|
&[data-nonzero] {
|
|
min-width: 12px;
|
|
}
|
|
}
|
|
|
|
.countdown {
|
|
animation: progressBarCountdown
|
|
var(--progress-bar-countdown-duration, #{duration(normal)}) linear forwards;
|
|
|
|
&[data-paused] {
|
|
animation-play-state: paused;
|
|
}
|
|
}
|
|
|
|
@keyframes progressBarCountdown {
|
|
from {
|
|
width: 100%;
|
|
}
|
|
|
|
to {
|
|
width: 0;
|
|
}
|
|
}
|