message_feed UI: Update logo dimensions for better scalability.

Change 'z' logo dimensions so that it scales according to chosen font
size.

Fix: #34266
(cherry picked from commit 8682db5573)
This commit is contained in:
Jitendra Kumar
2025-04-05 09:24:27 +00:00
committed by Tim Abbott
parent 859cc29657
commit a04dd1bb92

View File

@@ -220,9 +220,9 @@ p.n-margin {
.alert-zulip-logo, .alert-zulip-logo,
.top-messages-logo, .top-messages-logo,
.bottom-messages-logo { .bottom-messages-logo {
width: 24px; width: 1.7143em; /* 24px at 14px/em */
height: 24px; height: 1.7143em;
margin: 0 auto 12px; margin: 0 auto 0.8571em; /* 12px at 14px/em */
& svg { & svg {
& circle { & circle {
@@ -246,10 +246,6 @@ p.n-margin {
/* Since padding under message header is not transparent /* Since padding under message header is not transparent
we need to position it below the padding. */ we need to position it below the padding. */
padding-top: var(--header-padding-bottom); padding-top: var(--header-padding-bottom);
margin-bottom: 0;
/* To fit the logo inside the spinner. */
position: relative;
top: -2px;
} }
/* See https://web.dev/animations-guide/#triggers before adding any funny animation properties here. */ /* See https://web.dev/animations-guide/#triggers before adding any funny animation properties here. */
@@ -1201,13 +1197,20 @@ nav {
#loading_newer_messages_indicator_box_container { #loading_newer_messages_indicator_box_container {
position: absolute; position: absolute;
left: 50%; left: 50%;
/* Override the base rules in app_components.css, which would require
coordination with loading.make_indicator */
.loading_indicator_spinner {
height: 2.7143em; /* 38px at 14px/em */
width: 2.7143em; /* 38px at 14px/em */
}
} }
#loading_older_messages_indicator_box, #loading_older_messages_indicator_box,
#loading_newer_messages_indicator_box { #loading_newer_messages_indicator_box {
position: relative; position: relative;
left: -50%; left: -1.3571em; /* 50% of 38px = 19px at 14px/em */
top: -43px; top: -3.0714em; /* -43px at 14px/em */
z-index: 1; z-index: 1;
border-radius: 6px; border-radius: 6px;
} }