You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Lidarr/frontend/src/Components/ProgressBar.css

106 lines
1.9 KiB

.container {
position: relative;
overflow: hidden;
width: 100%;
border-radius: 4px;
background-color: var(--progressBarBackgroundColor);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.progressBar {
position: relative;
z-index: 1;
float: left;
width: 0;
height: 100%;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
color: var(--white);
transition: width 0.6s ease;
&.primary {
background-color: var(--primaryColor);
}
&.danger {
background-color: var(--dangerColor);
&:global(.colorImpaired) {
background: repeating-linear-gradient(90deg, color(#f05050 shade(5%)), color(#f05050 shade(5%)) 5px, color(#f05050 shade(15%)) 5px, color(#f05050 shade(15%)) 10px);
}
}
&.success {
background-color: var(--successColor);
}
&.purple {
background-color: var(--purple);
}
&.warning {
background-color: var(--warningColor);
&:global(.colorImpaired) {
background: repeating-linear-gradient(45deg, #ffa500, #ffa500 5px, color(#ffa500 tint(15%)) 5px, color(#ffa500 tint(15%)) 10px);
}
}
&.info {
background-color: var(--infoColor);
}
}
.frontTextContainer {
z-index: 1;
color: var(--progressBarFrontTextColor);
}
.backTextContainer {
color: var(--progressBarBackTextColor);
}
.backTextContainer,
.frontTextContainer {
position: absolute;
overflow: hidden;
width: 0;
height: 100%;
}
.backText,
.frontText {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 12px;
cursor: default;
}
.small {
height: $progressBarSmallHeight;
.backText,
.frontText {
height: $progressBarSmallHeight;
}
}
.medium {
height: $progressBarMediumHeight;
.backText,
.frontText {
height: $progressBarMediumHeight;
}
}
.large {
height: $progressBarLargeHeight;
.backText,
.frontText {
height: $progressBarLargeHeight;
}
}