This commit fixes the alignment of the user emoji
in the topic header. Previously, the icon in the
user's name was slightly cut off at the top. This
issue was resolved by setting the line height to 19px.
This is helpful for info density, because `em` values change
depending on the font-size of the HTML element, and we want to
be able to reference `em` sizes for the placement of the message
header container when it's sticky.
This commit should have no functional changes because
`message-header-contents` is the only child of `message_header`
and doesn't itself use font size or line height.
This commit also changes the line height to unitless
https://chat.zulip.org/#narrow/channel/6-frontend/topic/navbar.20sticky.20header.20with.20em/near/2054561
This commit replaces the spectrum color picker used in the stream
popover and stream settings with a custom color picker popover, which
contains a grid of predefined color swatches and a custom color option.
The custom color option uses the HTML5 <input type="color"> which shows
the native browser color picker UI.
Fixes#14961.
A small delay before showing up of the action buttons
is required so that there will be no flickering when
mouse just slides over the message headers.
Fixes part of #26852.
Added `opacity` CSS with `:focus-within` pseudo-class to
the recipient bar. This keeps the action button visibility
consistent with the action UIs - topic editing UI and notification
menu.
Fixes part of #26852.
Co-authored by: ecxtacy <dc.dhruvchouhan@gmail.com>
- Toggles the CSS rule `opacity: 0` on the recipient bar
controls when the bar is hovered.
- If the recipient bar is sticky, then the controls are always visible.
- In case of conversation views, the recipient actions remain visible.
Fixes part of #26852.
Co-authored by: ecxtacy <dc.dhruvchouhan@gmail.com>
This was due to `box-shadow` used to hide the content was incorrectly
overridden in `.sticky_header` from the `.message_header` just above.
The bug is highly reproducible since it happens due to minor pixel
differences when rendering.
