103 lines
1.5 KiB
SCSS
103 lines
1.5 KiB
SCSS
.box {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.box {
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
|
|
.starting-balance, .closing-balance {
|
|
width: 100%;
|
|
|
|
h5 {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.nodes {
|
|
display: none;
|
|
flex-direction: row;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
|
|
@media (max-width: 768px) {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.balances {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
margin-bottom: 8px;
|
|
|
|
.balance {
|
|
&.left {
|
|
text-align: start;
|
|
}
|
|
&.right {
|
|
text-align: end;
|
|
}
|
|
}
|
|
}
|
|
|
|
.balance-bar {
|
|
width: 100%;
|
|
height: 2em;
|
|
position: relative;
|
|
|
|
.bar {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
&.left {
|
|
background: var(--primary);
|
|
}
|
|
&.center {
|
|
background: repeating-linear-gradient(
|
|
60deg,
|
|
var(--primary) 0,
|
|
var(--primary) 12px,
|
|
var(--success) 12px,
|
|
var(--success) 24px
|
|
);
|
|
}
|
|
&.right {
|
|
background: var(--success);
|
|
}
|
|
|
|
.value {
|
|
flex: 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
&.hide-value {
|
|
.value {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
height: 1em;
|
|
|
|
.bar.center {
|
|
background: repeating-linear-gradient(
|
|
60deg,
|
|
var(--primary) 0,
|
|
var(--primary) 8px,
|
|
var(--success) 8px,
|
|
var(--success) 16px
|
|
)
|
|
}
|
|
}
|
|
} |