145 lines
2.5 KiB
CSS
145 lines
2.5 KiB
CSS
.list {
|
|
display: grid;
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
gap: var(--mantine-spacing-sm);
|
|
list-style: none;
|
|
}
|
|
|
|
.row {
|
|
display: grid;
|
|
grid-template-areas:
|
|
"identity balance"
|
|
"details balance"
|
|
"structure structure";
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, auto);
|
|
gap: var(--mantine-spacing-sm) var(--mantine-spacing-xl);
|
|
align-items: center;
|
|
padding: var(--mantine-spacing-lg);
|
|
border: 1px solid var(--wl-color-border);
|
|
border-left: 3px solid var(--wl-color-primary);
|
|
border-radius: var(--mantine-radius-md);
|
|
background: var(--wl-color-surface);
|
|
color: inherit;
|
|
text-decoration: none;
|
|
transition: background-color 160ms ease, border-color 160ms ease;
|
|
}
|
|
|
|
.row:hover,
|
|
.row:focus-visible {
|
|
border-color: var(--wl-color-primary);
|
|
background: var(--wl-color-subtle);
|
|
}
|
|
|
|
.row:focus-visible {
|
|
outline: 2px solid var(--wl-color-primary);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
.identity {
|
|
grid-area: identity;
|
|
min-width: 0;
|
|
}
|
|
|
|
.name {
|
|
margin: 0;
|
|
color: var(--wl-color-text);
|
|
font-size: var(--mantine-font-size-md);
|
|
line-height: var(--mantine-line-height-md);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.accountType {
|
|
flex-shrink: 0;
|
|
align-self: flex-start;
|
|
padding: 2px var(--mantine-spacing-xs);
|
|
border-radius: var(--mantine-radius-sm);
|
|
}
|
|
|
|
.balance {
|
|
grid-area: balance;
|
|
min-width: 0;
|
|
text-align: right;
|
|
}
|
|
|
|
.summary {
|
|
font-variant-numeric: tabular-nums lining-nums;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.total {
|
|
color: var(--wl-color-text);
|
|
font-size: var(--mantine-font-size-lg);
|
|
line-height: var(--mantine-line-height-lg);
|
|
}
|
|
|
|
.return,
|
|
.cashValue {
|
|
font-variant-numeric: tabular-nums lining-nums;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.positive {
|
|
color: var(--wl-color-positive);
|
|
}
|
|
|
|
.negative {
|
|
color: var(--wl-color-negative);
|
|
}
|
|
|
|
.neutral {
|
|
color: var(--wl-color-muted);
|
|
}
|
|
|
|
.cash {
|
|
font-variant-numeric: tabular-nums lining-nums;
|
|
}
|
|
|
|
.details {
|
|
grid-area: details;
|
|
min-width: 0;
|
|
font-variant-numeric: tabular-nums lining-nums;
|
|
}
|
|
|
|
.structure {
|
|
grid-area: structure;
|
|
gap: var(--mantine-spacing-xs);
|
|
}
|
|
|
|
.structureBar {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 6px;
|
|
overflow: hidden;
|
|
border-radius: var(--mantine-radius-xs);
|
|
background: var(--wl-color-subtle);
|
|
}
|
|
|
|
.structureSection {
|
|
flex: none;
|
|
height: 100%;
|
|
background: var(--category-color);
|
|
}
|
|
|
|
@media (max-width: 47.9375em) {
|
|
.row {
|
|
grid-template-areas:
|
|
"identity"
|
|
"balance"
|
|
"structure"
|
|
"details";
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: var(--mantine-spacing-sm);
|
|
padding: var(--mantine-spacing-md);
|
|
}
|
|
|
|
.balance {
|
|
text-align: left;
|
|
}
|
|
|
|
.balance > div {
|
|
justify-content: flex-start;
|
|
}
|
|
}
|