paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-03 05:23:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

reactions: Express reaction button colors as CSS vars.

Browse Source
This commit is contained in:
Karl Stolley
2023-08-25 10:58:20 -05:00
committed by Karl Stolley
parent 474dcf60a2
commit 534683a3ff
2 changed files with 32 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
web/styles/reactions.css
View File

@@ -28,7 +28,7 @@
height: 13px;
border-radius: 4px;
padding-left: 0.3em;
border: 1px solid hsl(0deg 0% 73%);
border: 1px solid var(--color-message-reaction-button-border);
padding-right: 0.3em;
/* TODO: Eventually this space will be set on the message
box, but for now this preserves the space beneath the
@@ -67,19 +67,19 @@
}
.message_reaction:hover .message_reaction_count {
color: hsl(200deg 100% 40%);
color: var(--color-message-reaction-button-text-hover);
}
& i {
font-size: 1.3em;
float: left;
color: hsl(0deg 0% 33%);
color: var(--color-message-reaction-button-text);
}
&:hover .message_reaction + .reaction_button {
visibility: visible;
pointer-events: all;
background-color: hsl(0deg 0% 98%);
background-color: var(--color-message-reaction-button-background);
}
.reaction_button,
@@ -94,7 +94,7 @@
}
&:hover i {
color: hsl(200deg 100% 40%);
color: var(--color-message-reaction-button-text-hover);
}
/* Configure the reaction button to appear if and only if there's an
@@ -107,21 +107,23 @@
}
&:hover {
border: 1px solid hsl(200deg 100% 40%);
background-color: hsl(195deg 50% 95%);
border: 1px solid var(--color-message-reaction-button-border-hover);
background-color: var(
--color-message-reaction-button-background-hover
);
cursor: pointer;
opacity: 1;
color: hsl(200deg 100% 40%);
color: var(--color-message-reaction-button-text-hover);
}
.message_reaction_count {
font-size: 1.1em;
color: hsl(0deg 0% 33%);
color: var(--color-message-reaction-button-text);
margin-right: 0;
}
&:hover .message_reaction_count {
color: hsl(200deg 100% 40%);
color: var(--color-message-reaction-button-text-hover);
}
}
}

20
web/styles/zulip.css
View File

@@ -293,6 +293,12 @@ body {
--color-message-reaction-border-hover: hsl(200deg 100% 40%);
--color-message-reaction-background: transparent;
--color-message-reaction-background-reacted: hsl(196deg 51% 93%);
--color-message-reaction-button-text: hsl(0deg 0% 33%);
--color-message-reaction-button-text-hover: hsl(200deg 100% 40%);
--color-message-reaction-button-background: hsl(0deg 0% 98%);
--color-message-reaction-button-background-hover: hsl(195deg 50% 95%);
--color-message-reaction-button-border: hsl(0deg 0% 73%);
--color-message-reaction-button-border-hover: hsl(200deg 100% 40%);
/* Message feed loading indicator colors */
--color-zulip-logo: hsl(0deg 0% 0% / 34%);
@@ -537,6 +543,20 @@ body {
--color-message-reaction-border-hover: hsl(236deg 33% 90%);
--color-message-reaction-background: transparent;
--color-message-reaction-background-reacted: hsl(0deg 0% 0% / 50%);
--color-message-reaction-button-text: inherit;
--color-message-reaction-button-text-hover: inherit;
--color-message-reaction-button-background: var(
--color-message-reaction-background
);
--color-message-reaction-button-background-hover: var(
--color-message-reaction-background
);
--color-message-reaction-button-border: var(
--color-message-reaction-border
);
--color-message-reaction-button-border-hover: var(
--color-message-reaction-border-hover
);
/* Message feed loading indicator colors */
--color-zulip-logo: hsl(0deg 0% 100% / 50%);