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