Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

typeahead: Improve link styling in typeahead suggestions. 

Previously, links in typeahead suggestions appeared inconsistent with
the surrounding text when highlighted. This commit updates the link
styling to match the text color and adds a subtle underline with reduced
opacity for better visual consistency.

Fixes #31005.
This commit is contained in:
Aditya Kumar Kasaudhan 2024-09-06 16:42:56 +05:30 committed by Tim Abbott
parent 34296ae505
commit aabecf131c
2 changed files with 9 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/styles/app_variables.css
View File

@ -964,6 +964,7 @@
/* Dropdown / Typeahead constants */ /* Dropdown / Typeahead constants */
--color-dropdown-item: hsl(0deg 0% 20%); --color-dropdown-item: hsl(0deg 0% 20%);
--color-dropdown-item-link-underline: hsla(0deg 0% 20% 60%);
--color-active-dropdown-item: hsl(0deg 0% 0%); --color-active-dropdown-item: hsl(0deg 0% 0%);
--background-color-active-dropdown-item: hsl(220deg 12% 4.9% / 5%); --background-color-active-dropdown-item: hsl(220deg 12% 4.9% / 5%);
--background-color-active-typeahead-item: hsl(221.14deg 89.74% 92.35%); --background-color-active-typeahead-item: hsl(221.14deg 89.74% 92.35%);
@ -1410,6 +1411,7 @@
/* Dropdown / Typeahead constants */ /* Dropdown / Typeahead constants */
--color-dropdown-item: hsl(0deg 0% 75%); --color-dropdown-item: hsl(0deg 0% 75%);
--color-dropdown-item-link-underline: hsla(0deg 0% 75% 60%);
--color-active-dropdown-item: hsl(0deg 0% 90%); --color-active-dropdown-item: hsl(0deg 0% 90%);
--background-color-active-dropdown-item: hsl(220deg 12% 100% / 7%); --background-color-active-dropdown-item: hsl(220deg 12% 100% / 7%);
--background-color-active-typeahead-item: hsl( --background-color-active-typeahead-item: hsl(

7
web/styles/typeahead.css
View File

@ -93,6 +93,13 @@
text-overflow: ellipsis; text-overflow: ellipsis;
position: relative; position: relative;
top: -1px; top: -1px;
& > a {
color: var(--color-dropdown-item);
text-decoration: underline 1px;
text-decoration-color: var(--color-dropdown-item-link-underline);
opacity: 0.6;
}
} }
.autocomplete_secondary { .autocomplete_secondary {