ksv741
daf1dca666
Reuse account sections and group securities with per-account holdings. Use Mantine Select to preserve filters and reset pagination on scope changes. Document component reuse guardrails and cover routes, grouping and scope switching.
148 lines
2.4 KiB
CSS
148 lines
2.4 KiB
CSS
.page {
|
|
max-width: 960px;
|
|
}
|
|
|
|
.tile,
|
|
.cash {
|
|
border-color: var(--mantine-color-gray-3);
|
|
background: var(--mantine-color-gray-0);
|
|
}
|
|
|
|
.total {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
padding: 12px;
|
|
border-color: var(--mantine-color-gray-3);
|
|
border-radius: 8px;
|
|
background: var(--mantine-color-white);
|
|
}
|
|
|
|
.totalBadge {
|
|
min-width: 40px;
|
|
min-height: 24px;
|
|
max-width: 100%;
|
|
padding-inline: 8px;
|
|
border-radius: 4px;
|
|
background: var(--mantine-color-blue-0);
|
|
color: var(--mantine-color-blue-6);
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
line-height: 24px;
|
|
text-align: center;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.totalAmount {
|
|
flex-basis: max-content;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
color: var(--mantine-color-dark-7);
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
line-height: 1.55;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.totalLeadingDigits {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.totalAmountSkeleton {
|
|
max-width: calc(100% - 50px);
|
|
margin-block: 5px;
|
|
}
|
|
|
|
.tile,
|
|
.cash {
|
|
padding: var(--mantine-spacing-md);
|
|
}
|
|
|
|
.cash {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.positive {
|
|
color: var(--mantine-color-green-6);
|
|
}
|
|
|
|
.negative {
|
|
color: var(--mantine-color-red-6);
|
|
}
|
|
|
|
.expandedCard {
|
|
padding: var(--mantine-spacing-md);
|
|
}
|
|
|
|
.expandedMain {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
gap: var(--mantine-spacing-sm);
|
|
align-items: center;
|
|
}
|
|
|
|
.expandedIdentity,
|
|
.expandedValue {
|
|
min-width: 0;
|
|
}
|
|
|
|
.expandedIdentifiers {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.expandedValue {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.expandedMeta {
|
|
padding-top: var(--mantine-spacing-xs);
|
|
margin-top: var(--mantine-spacing-sm);
|
|
border-top: 1px solid var(--mantine-color-gray-2);
|
|
}
|
|
|
|
.mono {
|
|
font-family: var(--mantine-font-family-monospace);
|
|
}
|
|
|
|
.accordionControl {
|
|
transition:
|
|
background-color 150ms ease,
|
|
color 150ms ease;
|
|
}
|
|
|
|
.accordionLabel {
|
|
font-size: var(--mantine-h2-font-size);
|
|
font-weight: var(--mantine-h2-font-weight);
|
|
line-height: var(--mantine-h2-line-height);
|
|
}
|
|
|
|
.accordionPanel {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.accountPositions {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: var(--mantine-spacing-sm) 0 0;
|
|
}
|
|
|
|
.accountPosition {
|
|
padding-block: var(--mantine-spacing-sm);
|
|
border-top: 1px solid var(--mantine-color-gray-3);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.accountPosition:last-child {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.accountPositionName {
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|