fix(activity): align ledger typography
This commit is contained in:
@@ -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; }
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user