feat: show all accounts in collapsible overview
This commit is contained in:
+227
-5
@@ -294,9 +294,6 @@ header p {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
.account-select {
|
||||
min-width: 220px;
|
||||
}
|
||||
.secondary {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
@@ -313,6 +310,176 @@ header p {
|
||||
color: var(--green);
|
||||
border-color: var(--green);
|
||||
}
|
||||
.account-overview-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
.account-overview {
|
||||
overflow: hidden;
|
||||
}
|
||||
.account-summary-toggle {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(180px, 1fr) auto minmax(280px, 1.5fr) auto;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 20px 24px;
|
||||
border-radius: 17px;
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
text-align: left;
|
||||
}
|
||||
.account-summary-toggle:hover,
|
||||
.account-summary-toggle:focus-visible {
|
||||
background: color-mix(in srgb, var(--track) 62%, transparent);
|
||||
}
|
||||
.account-summary-toggle:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: -3px;
|
||||
}
|
||||
.account-summary-identity {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
min-width: 0;
|
||||
}
|
||||
.account-summary-identity strong {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.account-summary-identity span,
|
||||
.account-summary-metrics {
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
.account-summary-identity span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.account-summary-plan {
|
||||
justify-self: start;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.account-summary-metrics {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px 14px;
|
||||
min-width: 0;
|
||||
}
|
||||
.account-summary-metrics span {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.account-chevron {
|
||||
flex: none;
|
||||
width: 20px;
|
||||
color: var(--muted);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
.account-overview.expanded .account-chevron {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.account-detail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding: 0 24px 24px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
.account-detail-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
padding-top: 22px;
|
||||
}
|
||||
.account-detail-title,
|
||||
.account-detail-actions,
|
||||
.limit-heading,
|
||||
.stat-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.account-detail-title {
|
||||
gap: 12px;
|
||||
}
|
||||
.account-detail-title > svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: var(--accent);
|
||||
}
|
||||
.account-detail-title small,
|
||||
.account-info-item small {
|
||||
color: var(--muted);
|
||||
}
|
||||
.account-detail-title h2 {
|
||||
margin: 4px 0 0;
|
||||
font-size: 22px;
|
||||
}
|
||||
.account-detail-actions {
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
.account-detail-actions .fresh {
|
||||
margin-left: 0;
|
||||
}
|
||||
.account-detail-alert {
|
||||
padding: 12px 14px;
|
||||
border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border));
|
||||
border-radius: 10px;
|
||||
background: color-mix(in srgb, var(--danger) 8%, var(--panel));
|
||||
}
|
||||
.account-info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
.account-info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
padding: 13px 14px;
|
||||
border-radius: 12px;
|
||||
background: var(--track);
|
||||
}
|
||||
.account-info-item > svg {
|
||||
flex: none;
|
||||
width: 18px;
|
||||
color: var(--accent);
|
||||
}
|
||||
.account-info-item div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
.account-info-item b {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 13px;
|
||||
}
|
||||
.account-detail-state {
|
||||
display: flex;
|
||||
min-height: 170px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
color: var(--muted);
|
||||
text-align: center;
|
||||
}
|
||||
.account-detail-state .spinner {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
.account-detail-state p {
|
||||
margin: 0;
|
||||
}
|
||||
.account {
|
||||
padding: 20px 24px;
|
||||
display: flex;
|
||||
@@ -367,6 +534,18 @@ header p {
|
||||
.limit > small {
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
.limit-heading {
|
||||
grid-column: 1/-1;
|
||||
gap: 7px;
|
||||
}
|
||||
.limit-heading svg,
|
||||
.stat-label svg {
|
||||
width: 16px;
|
||||
color: var(--accent);
|
||||
}
|
||||
.stat-label {
|
||||
gap: 7px;
|
||||
}
|
||||
.remaining strong {
|
||||
display: block;
|
||||
font-size: 50px;
|
||||
@@ -757,10 +936,50 @@ a {
|
||||
.refresh {
|
||||
width: 100%;
|
||||
}
|
||||
.account-select {
|
||||
min-width: 0;
|
||||
.account-summary-toggle {
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
gap: 10px 12px;
|
||||
padding: 18px;
|
||||
}
|
||||
.account-summary-identity {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
.account-summary-plan {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
}
|
||||
.account-summary-metrics {
|
||||
grid-column: 2 / -1;
|
||||
grid-row: 3;
|
||||
justify-content: flex-start;
|
||||
gap: 6px 12px;
|
||||
}
|
||||
.account-chevron {
|
||||
grid-column: 3;
|
||||
grid-row: 1;
|
||||
}
|
||||
.account-detail {
|
||||
padding: 0 18px 18px;
|
||||
}
|
||||
.account-detail-heading {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
.account-detail-actions {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
.account-detail-actions .fresh {
|
||||
display: block;
|
||||
}
|
||||
.account-detail-actions .refresh {
|
||||
width: 100%;
|
||||
}
|
||||
.account-info-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.account {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
@@ -893,6 +1112,9 @@ a {
|
||||
.stats {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.account-info-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.account {
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user