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

emoji_popover: Fix white arrow color in dark theme. 

Tested left, top and bottom placement of emoji popover to check
if arrow color is correctly displayed in both dark and light theme.
This commit is contained in:
Aman Agrawal 2024-05-31 07:34:28 +00:00 committed by Tim Abbott
parent ce1163ebe8
commit ddf14116b2
2 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/styles/app_variables.css
View File

@ -508,6 +508,8 @@
--color-background-emoji-picker-emoji-reacted: hsl(195deg 50% 95%); --color-background-emoji-picker-emoji-reacted: hsl(195deg 50% 95%);
--color-border-emoji-picker-emoji-reacted: hsl(195deg 52% 79%); --color-border-emoji-picker-emoji-reacted: hsl(195deg 52% 79%);
--color-background-emoji-picker-emoji-reacted-focus: hsl(195deg 55% 88%); --color-background-emoji-picker-emoji-reacted-focus: hsl(195deg 55% 88%);
/* Same color as background color of header / footer */
--color-border-emoji-picker-tippy-arrow: hsl(0deg 0% 93%);
} }
%dark-theme { %dark-theme {
@ -810,6 +812,8 @@
--color-border-emoji-picker-emoji-reacted: hsl(0deg 0% 0% / 90%); --color-border-emoji-picker-emoji-reacted: hsl(0deg 0% 0% / 90%);
--color-background-emoji-picker-emoji-reacted-focus: hsl(0deg 0% 20% / 70%); --color-background-emoji-picker-emoji-reacted-focus: hsl(0deg 0% 20% / 70%);
--color-border-add-subscription-button-focus: hsl(0deg 0% 67%); --color-border-add-subscription-button-focus: hsl(0deg 0% 67%);
/* Same color as background color of header / footer */
--color-border-emoji-picker-tippy-arrow: hsl(211.58deg 33.33% 11.18%);
} }
@media screen { @media screen {

8
web/styles/popovers.css
View File

@ -873,11 +873,15 @@ ul {
/* The emoji popover has a different background color for the /* The emoji popover has a different background color for the
header and footer, so we customize the arrow to match this color. */ header and footer, so we customize the arrow to match this color. */
.tippy-box[data-placement="top"] .tippy-arrow::before { .tippy-box[data-placement="top"] .tippy-arrow::before {
border-top-color: hsl(0deg 0% 93%); border-top-color: var(--color-border-emoji-picker-tippy-arrow);
} }
.tippy-box[data-placement="bottom"] .tippy-arrow::before { .tippy-box[data-placement="bottom"] .tippy-arrow::before {
border-bottom-color: hsl(0deg 0% 93%); border-bottom-color: var(--color-border-emoji-picker-tippy-arrow);
}
.tippy-box[data-placement="left"] .tippy-arrow::before {
border-left-color: var(--color-border-emoji-picker-tippy-arrow);
} }
} }