fix(activity): align ledger typography

This commit is contained in:
tommy0103
2026-07-12 15:24:28 +08:00
parent 48f1a4c225
commit 1742d73b32
3 changed files with 36 additions and 36 deletions
@@ -124,8 +124,8 @@ function toggleNoise(key) {
<style scoped>
.activity-ledger {
position: relative;
margin-left: 16px;
padding-left: 58px;
margin-left: 10px;
padding-left: 44px;
}
.activity-ledger::before {
@@ -133,24 +133,24 @@ function toggleNoise(key) {
position: absolute;
top: 2px;
bottom: 4px;
left: 15px;
left: 12px;
width: 1px;
background: var(--hairline);
}
.ledger-group {
position: relative;
padding-bottom: 38px;
padding-bottom: 28px;
}
.ledger-group:last-child { padding-bottom: 6px; }
.ledger-node {
position: absolute;
top: -5px;
left: -58px;
width: 32px;
height: 32px;
top: -2px;
left: -44px;
width: 26px;
height: 26px;
display: grid;
place-items: center;
border: 1px solid var(--hairline-strong);
@@ -161,8 +161,8 @@ function toggleNoise(key) {
}
.ledger-node svg {
width: 17px;
height: 17px;
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-width: 2;
@@ -183,20 +183,19 @@ function toggleNoise(key) {
}
.ledger-group-header {
min-height: 27px;
min-height: 24px;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 24px;
margin-bottom: 14px;
gap: 20px;
margin-bottom: 9px;
}
.ledger-group-header h3 {
margin: 0;
color: var(--fg);
font-size: 15px;
font-weight: 600;
letter-spacing: -.01em;
font-size: var(--text-base);
font-weight: 500;
}
.ledger-group-header time {
@@ -216,13 +215,13 @@ function toggleNoise(key) {
display: flex;
align-items: center;
gap: 8px;
margin: 5px 0 0 -4px;
padding: 7px 8px;
margin: 4px 0 0 -4px;
padding: 6px 8px;
border: 0;
border-radius: 5px;
background: transparent;
color: var(--muted-2);
font: 10.5px/1.25 var(--font-mono);
font: var(--text-xs)/1.25 var(--font-mono);
text-align: left;
cursor: pointer;
}
@@ -239,8 +238,9 @@ function toggleNoise(key) {
.noise-fold-row.expanded .chev { transform: rotate(90deg); }
@media (max-width: 760px) {
.activity-ledger { margin-left: 8px; padding-left: 46px; }
.ledger-node { left: -46px; }
.activity-ledger { margin-left: 6px; padding-left: 40px; }
.activity-ledger::before { left: 12px; }
.ledger-node { left: -40px; }
.ledger-group-header { gap: 12px; }
}
</style>
@@ -41,10 +41,10 @@ const metaParts = computed(() => activitySessionMetaParts(props.session, {
.ledger-item {
width: 100%;
display: block;
margin-left: -12px;
padding: 8px 12px;
margin-left: -10px;
padding: 6px 10px;
border: 0;
border-radius: 6px;
border-radius: 5px;
background: transparent;
color: inherit;
font: inherit;
@@ -59,8 +59,8 @@ const metaParts = computed(() => activitySessionMetaParts(props.session, {
display: block;
overflow: hidden;
color: var(--accent-2);
font-size: 13.5px;
font-weight: 520;
font-size: var(--text-base);
font-weight: 500;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
@@ -76,21 +76,21 @@ const metaParts = computed(() => activitySessionMetaParts(props.session, {
min-height: 15px;
margin-top: 4px;
color: var(--muted-2);
font: 10.5px/1.35 var(--font-mono);
font: var(--text-xs)/1.35 var(--font-mono);
white-space: nowrap;
}
.meta-source {
color: var(--fg-2);
font-weight: 620;
font-weight: 500;
}
.meta-project { color: var(--muted); }
.meta-count { color: var(--muted-2); }
.meta-separator { color: var(--muted); font-weight: 700; opacity: .82; }
.meta-separator { color: var(--muted); font-weight: 500; opacity: .82; }
.ledger-item.noise { opacity: .7; }
.ledger-item.noise .ledger-item-title { color: var(--fg-2); font-weight: 430; }
.ledger-item.noise .ledger-item-title { color: var(--fg-2); font-weight: 400; }
@media (max-width: 760px) {
.ledger-item-meta { flex-wrap: wrap; row-gap: 4px; white-space: normal; }
+6 -6
View File
@@ -674,22 +674,22 @@ onUnmounted(() => stopUsageUpdates());
.chart-tooltip.show { opacity: 1; }
/* Session activity ledger */
.session-activity { margin-top: 34px; }
.activity-month-block { margin-bottom: 54px; }
.session-activity { margin-top: 28px; }
.activity-month-block { margin-bottom: 44px; }
.activity-month-heading {
display: grid;
grid-template-columns: max-content minmax(48px, 1fr) max-content;
align-items: center;
gap: 18px;
margin-bottom: 26px;
gap: 16px;
margin-bottom: 22px;
}
.activity-month-heading h2 {
margin: 0;
color: var(--fg);
font-size: 14px;
font-weight: 650;
font-size: var(--text-md);
font-weight: 600;
letter-spacing: -.01em;
}