136 lines
3.0 KiB
SCSS
136 lines
3.0 KiB
SCSS
|
.tracker-bar {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
|
||
|
|
--div-left-color: var(--box-bg);
|
||
|
|
--div-right-color: var(--box-bg);
|
||
|
|
--stage-color: var(--box-bg);
|
||
|
|
|
||
|
|
font-size: clamp(5px, 2.5vw, 15px);
|
||
|
|
height: clamp(15px, 7.5vw, 45px);
|
||
|
|
|
||
|
|
.stage {
|
||
|
|
overflow: hidden;
|
||
|
|
border-top: solid 2px var(--stat-box-bg);
|
||
|
|
border-bottom: solid 2px var(--stat-box-bg);
|
||
|
|
background: var(--stage-color);
|
||
|
|
color: var(--transparent-fg);
|
||
|
|
padding: 1em;
|
||
|
|
flex-grow: 1;
|
||
|
|
flex-shrink: 1;
|
||
|
|
overflow: hidden;
|
||
|
|
text-wrap: nowrap;
|
||
|
|
text-overflow: hidden;
|
||
|
|
white-space: no-break;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
&:first-child {
|
||
|
|
border-left: solid 2px var(--stat-box-bg);
|
||
|
|
border-top-left-radius: 1.6em;
|
||
|
|
border-bottom-left-radius: 1.6em;
|
||
|
|
padding-left: 1.6em;
|
||
|
|
}
|
||
|
|
&:last-child {
|
||
|
|
border-right: solid 2px var(--stat-box-bg);
|
||
|
|
border-top-right-radius: 1.6em;
|
||
|
|
border-bottom-right-radius: 1.6em;
|
||
|
|
}
|
||
|
|
&:nth-child(4n + 3) {
|
||
|
|
--stage-color: var(--secondary);
|
||
|
|
}
|
||
|
|
&.done {
|
||
|
|
--stage-color: var(--primary);
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
&.current {
|
||
|
|
--stage-color: var(--tertiary);
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
&.next {
|
||
|
|
animation: 1s linear alternate infinite pulse-next;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.divider {
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
flex-shrink: 0;
|
||
|
|
flex-grow: 0;
|
||
|
|
background: var(--stat-box-bg);
|
||
|
|
border-top: solid 2px var(--stat-box-bg);
|
||
|
|
border-bottom: solid 2px var(--stat-box-bg);
|
||
|
|
|
||
|
|
&.left-done {
|
||
|
|
--div-left-color: var(--primary);
|
||
|
|
}
|
||
|
|
&.left-current {
|
||
|
|
--div-left-color: var(--tertiary);
|
||
|
|
}
|
||
|
|
&.left-blank, &.left-next {
|
||
|
|
&:nth-child(4n + 0) {
|
||
|
|
--div-left-color: var(--secondary);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.left-next {
|
||
|
|
animation: 1s linear alternate infinite pulse-next-top;
|
||
|
|
}
|
||
|
|
&.right-done {
|
||
|
|
--div-right-color: var(--primary);
|
||
|
|
}
|
||
|
|
&.right-current {
|
||
|
|
--div-right-color: var(--tertiary);
|
||
|
|
}
|
||
|
|
&.right-blank, &.right-next {
|
||
|
|
&:nth-child(4n + 2) {
|
||
|
|
--div-right-color: var(--secondary);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.right-next {
|
||
|
|
animation: 1s linear alternate infinite pulse-next-bottom;
|
||
|
|
}
|
||
|
|
|
||
|
|
&::after, &::before {
|
||
|
|
content: '';
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
display: block;
|
||
|
|
position: absolute;
|
||
|
|
transform: skew(160deg) translate(58%);
|
||
|
|
background: var(--div-right-color);
|
||
|
|
}
|
||
|
|
&::before {
|
||
|
|
transform: skew(160deg) translate(-58%);
|
||
|
|
background: var(--div-left-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
width: clamp(5px, 2.5vw, 15px);
|
||
|
|
}
|
||
|
|
|
||
|
|
&.transitions {
|
||
|
|
.stage, .divider, .divider::before, .divider::after {
|
||
|
|
transition: color 500ms, border-color 500ms, background-color 500ms;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes pulse-next {
|
||
|
|
to {
|
||
|
|
border-color: var(--tertiary);
|
||
|
|
text-shadow: 0 0 0.8em var(--tertiary);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes pulse-next-top {
|
||
|
|
to {
|
||
|
|
border-top-color: var(--tertiary);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes pulse-next-bottom {
|
||
|
|
to {
|
||
|
|
border-bottom-color: var(--tertiary);
|
||
|
|
}
|
||
|
|
}
|