CodeCow/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2026-07-03 21:10:12 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

compose: Add temporary hover color on recipient borders.

Browse Source
This commit is contained in:
Karl Stolley 2025-05-09 15:00:15 -05:00 committed by Tim Abbott
parent a237f3284f
commit 1ed8f577ed
2 changed files with 13 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/styles/app_variables.css
View File

@ -1126,6 +1126,10 @@
color-mix(in srgb, hsl(0deg 0% 0%) 10%, hsl(232deg 20% 92%)),
hsl(0deg 0% 0% / 80%)
);
--color-compose-recipient-box-hover: light-dark(
hsl(0deg 0% 69%),
hsl(0deg 0% 100% / 12%)
);
--color-compose-recipient-box-has-focus: light-dark(
hsl(0deg 0% 57%),
hsl(0deg 0% 100% / 27%)

9
web/styles/compose.css
View File

@ -1092,6 +1092,10 @@ textarea.new_message_textarea {
transition: border-color 0.2s ease;
background: var(--color-compose-recipient-box-background-color);
&:hover {
border-color: var(--color-compose-recipient-box-hover);
}
/* Give the recipient box, a `<div>`, the
correct styles when focus is in the
#stream_message_recipient_topic `<input>` */
@ -1195,6 +1199,11 @@ textarea.new_message_textarea {
background-color: var(--color-compose-recipient-box-background-color);
border-color: var(--color-compose-recipient-box-border-color);
&:hover,
&.widget-open {
border-color: var(--color-compose-recipient-box-hover);
}
&.dropdown-widget-button {
/* We control the surrounding space through the
grid on `.dropdown_widget_value`. */