MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-05-07 14:56:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

friends locations card style

Browse Source
This commit is contained in:
pa
2026-03-11 18:08:44 +09:00
parent daf6681435
commit c66b42f03b
1 changed files with 17 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/FriendsLocations/components/FriendsLocationsCard.vue
+17 -12
View File
@@ -112,13 +112,13 @@
} }
}); });
const avatarSize = computed(() => 48 * props.cardScale); const avatarSize = computed(() => Math.max(36, 46 * props.cardScale));
const cardStyle = computed(() => ({ const cardStyle = computed(() => ({
'--card-scale': props.cardScale, '--card-scale': props.cardScale,
'--card-spacing': props.cardSpacing, '--card-spacing': props.cardSpacing,
cursor: 'pointer', cursor: 'pointer',
padding: `${24 * props.cardScale * props.cardSpacing}px` padding: `${16 * props.cardScale * props.cardSpacing}px`
})); }));
const avatarFallback = computed(() => props.friend?.name?.charAt(0) ?? '?'); const avatarFallback = computed(() => props.friend?.name?.charAt(0) ?? '?');
@@ -256,9 +256,9 @@
.friend-card__header { .friend-card__header {
display: grid; display: grid;
grid-template-columns: auto 1fr; grid-template-columns: auto minmax(0, 1fr);
align-items: flex-start; align-items: center;
gap: calc(12px * var(--card-scale) * var(--card-spacing)); gap: calc(10px * var(--card-scale) * var(--card-spacing));
} }
.friend-card__status-dot { .friend-card__status-dot {
@@ -324,35 +324,40 @@
.friend-card__body { .friend-card__body {
display: grid; display: grid;
gap: calc(12px * var(--card-scale) * var(--card-spacing)); gap: calc(8px * var(--card-scale) * var(--card-spacing));
} }
.friend-card__name { .friend-card__name {
font-size: calc(17px * var(--card-scale)); font-size: calc(16px * var(--card-scale));
font-weight: 600; font-weight: 600;
line-height: 1.2; line-height: 1.3;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.friend-card__signature { .friend-card__signature {
margin-top: calc(8px * var(--card-spacing)); font-size: calc(12px * var(--card-scale));
font-size: calc(13px * var(--card-scale));
line-height: 1.4; line-height: 1.4;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
display: flex; display: flex;
align-items: center; align-items: center;
gap: calc(4px * var(--card-scale));
color: var(--muted-foreground);
}
.friend-card__signature :deep(svg) {
margin-top: calc(1px * var(--card-scale));
} }
.friend-card__world { .friend-card__world {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: flex-start;
min-height: calc(40px * var(--card-scale)); min-height: calc(40px * var(--card-scale));
padding: calc(8px * var(--card-scale)) calc(8px * var(--card-scale)); padding: calc(7px * var(--card-scale)) calc(8px * var(--card-scale));
border-radius: calc(var(--radius-lg) * var(--card-scale)); border-radius: calc(var(--radius-lg) * var(--card-scale));
font-size: calc(12px * var(--card-scale)); font-size: calc(12px * var(--card-scale));
line-height: 1.3; line-height: 1.3;