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

icons: Implement new gold star color and states. 

This not only introduces a new gold color that works across light
and dark modes, but it also separates out the hover and focus-
visible styles for stars--regardless of whether a star has been
filled or not.
This commit is contained in:
Karl Stolley 2023-08-17 14:34:27 -05:00 committed by Tim Abbott
parent adb3b24cb2
commit cd0ae56ad4
1 changed files with 8 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/styles/zulip.css
View File

@ -178,6 +178,7 @@ body {
--color-icon-bot: hsl(180deg 8% 65% / 100%);
--color-message-action-visible: hsl(216deg 43% 20% / 50%);
--color-message-action-interactive: hsl(216deg 43% 20% / 100%);
--color-message-star-action: hsl(41deg 100% 47% / 100%);
/* Message feed loading indicator colors */
--color-zulip-logo: hsl(0deg 0% 0% / 34%);
@ -1222,6 +1223,12 @@ td.pointer {
outline: 0;
color: var(--color-message-action-interactive);
}
/* Separate hover colors for stars */
&.star:hover,
&.star:focus-visible {
color: var(--color-message-star-action);
}
}
.zulip-icon-more-vertical {
@ -1304,7 +1311,7 @@ td.pointer {
.star_container {
&:not(.empty-star) {
/* Color, opacity, and visibility, as though the message is hovered. */
color: var(--color-message-action-interactive);
color: var(--color-message-star-action);
opacity: 1;
visibility: visible !important;
}