feat: clarify mutual friends direction labels

This commit is contained in:
aits2026
2026-03-06 16:58:44 +08:00
parent 4a1933e924
commit 58cfd49859
2 changed files with 158 additions and 39 deletions

View File

@@ -405,9 +405,9 @@
.session-mutual-friends-row {
display: grid;
grid-template-columns: 42px minmax(0, 1fr) 96px 72px 110px;
grid-template-columns: 42px minmax(0, 1fr) 72px 110px;
gap: 10px;
align-items: center;
align-items: start;
padding: 11px 12px;
border-bottom: 1px solid color-mix(in srgb, var(--border-color) 68%, transparent);
font-size: 13px;
@@ -426,6 +426,14 @@
.session-mutual-friends-rank {
color: var(--text-tertiary);
padding-top: 3px;
}
.session-mutual-friends-main {
min-width: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.session-mutual-friends-name {
@@ -437,6 +445,13 @@
font-weight: 600;
}
.session-mutual-friends-tags {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.session-mutual-friends-source {
justify-self: start;
border-radius: 999px;
@@ -447,22 +462,56 @@
background: var(--bg-secondary);
color: var(--text-secondary);
&.both {
color: var(--primary);
border-color: color-mix(in srgb, var(--primary) 35%, var(--border-color));
background: color-mix(in srgb, var(--primary) 10%, var(--bg-secondary));
&.incoming {
color: #065f46;
border-color: color-mix(in srgb, #10b981 38%, var(--border-color));
background: color-mix(in srgb, #10b981 10%, var(--bg-secondary));
}
&.reverse {
&.outgoing {
color: #92400e;
border-color: color-mix(in srgb, #d97706 38%, var(--border-color));
background: color-mix(in srgb, #f59e0b 12%, var(--bg-secondary));
}
&.bidirectional {
color: var(--primary);
border-color: color-mix(in srgb, var(--primary) 35%, var(--border-color));
background: color-mix(in srgb, var(--primary) 10%, var(--bg-secondary));
}
}
.session-mutual-friends-behavior {
&.likes {
color: #1d4ed8;
border-color: color-mix(in srgb, #3b82f6 34%, var(--border-color));
background: color-mix(in srgb, #3b82f6 9%, var(--bg-secondary));
}
&.comments {
color: #7c3aed;
border-color: color-mix(in srgb, #8b5cf6 34%, var(--border-color));
background: color-mix(in srgb, #8b5cf6 9%, var(--bg-secondary));
}
&.both {
color: #be185d;
border-color: color-mix(in srgb, #ec4899 34%, var(--border-color));
background: color-mix(in srgb, #ec4899 9%, var(--bg-secondary));
}
}
.session-mutual-friends-desc {
min-width: 0;
color: var(--text-tertiary);
font-size: 12px;
line-height: 1.45;
}
.session-mutual-friends-count,
.session-mutual-friends-latest {
text-align: right;
padding-top: 3px;
}
.session-mutual-friends-empty {
@@ -3828,7 +3877,7 @@
}
.session-mutual-friends-row {
grid-template-columns: 34px minmax(0, 1fr) 82px 56px 88px;
grid-template-columns: 34px minmax(0, 1fr) 56px 88px;
gap: 8px;
font-size: 12px;
}