paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-04 14:03:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

recent_view: Enable avatars and overflow marker to scale.

Browse Source
This commit is contained in:
Karl Stolley
2025-03-18 11:37:38 -04:00
committed by Tim Abbott
parent 0f17d6e7ef
commit e0aeb5cb52
1 changed files with 17 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
web/styles/recent_view.css
View File

@@ -307,10 +307,14 @@
.recent_view_participants { .recent_view_participants {
display: inline-flex; /* Causes LI items to display in row. */ display: inline-flex; /* Causes LI items to display in row. */
/* Keep avatars centered on the line. */
vertical-align: middle;
list-style-type: none; list-style-type: none;
margin: auto; /* Centers vertically / horizontally in flex container. */ margin: auto; /* Centers vertically / horizontally in flex container. */
height: 24px; /* 24px at 16px/1em */
padding: 4px; height: 1.5em;
/* 4px at 16px/1em */
padding: 0.25em 4px;
border-radius: 6px; border-radius: 6px;
overflow: hidden; overflow: hidden;
@@ -325,11 +329,13 @@
} }
.recent_view_participant_item { .recent_view_participant_item {
height: 24px; /* 24px at 16px/1em */
height: 1.5em;
margin: 0; margin: 0;
padding: 0 1.5px; padding: 0 1.5px;
position: relative; position: relative;
min-width: 24px; /* 24px at 16px/1em */
min-width: 1.5em;
cursor: pointer; cursor: pointer;
.fa-user { .fa-user {
@@ -340,10 +346,13 @@
.recent_view_participant_avatar, .recent_view_participant_avatar,
.recent_view_participant_overflow { .recent_view_participant_overflow {
border: 0; border: 0;
border-radius: 6px; /* Keep the rounded corners from ballooning
to a circle at smaller font sizes.
6px at 16px/1em */
border-radius: 0.375em;
color: var(--color-recent-view-participant-overflow-text); color: var(--color-recent-view-participant-overflow-text);
display: block; display: block;
height: 24px; height: 100%;
text-align: center; text-align: center;
background-color: var( background-color: var(
--color-background-recent-view-participant-overflow --color-background-recent-view-participant-overflow
@@ -355,7 +364,8 @@
} }
.recent_view_participant_overflow { .recent_view_participant_overflow {
line-height: 24px; /* 24px at 16px/1em */
line-height: 1.5;
} }
& tr { & tr {