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: Reorganize and deduplicate reaction button CSS.

Browse Source
This commit is contained in:
Karl Stolley
2024-04-23 15:29:09 -04:00
committed by Tim Abbott
parent d1b790cac1
commit d939b9aae6
1 changed files with 21 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
web/styles/reactions.css
View File

@@ -43,33 +43,6 @@
transform: scale(var(--scale-message-reaction-active));
}
+ .reaction_button {
visibility: hidden;
pointer-events: none;
/* Set top/bottom padding to accommodate borders
and padding around reaction pills. */
padding: 4.5px 6px;
height: 13px;
border-radius: 21px;
color: var(--color-message-reaction-button-text);
background-color: var(--color-message-reaction-button-background);
border: 1px solid var(--color-message-reaction-button-border);
/* TODO: Eventually this space will be set on the message
box, at least in part, but for now this preserves the
space beneath the reactions area. */
margin-bottom: 4px;
&:hover {
color: var(--color-message-reaction-button-text-hover);
background-color: var(
--color-message-reaction-button-background-hover
);
border-color: var(--color-message-reaction-button-border-hover);
box-shadow: inset 0 0 5px 0
var(--color-message-reaction-shadow-inner);
}
}
.emoji {
margin: 1px 3px;
height: 17px;
@@ -119,7 +92,7 @@
color: var(--color-message-reaction-button-text);
}
&:hover .message_reaction + .reaction_button {
&:hover .reaction_button {
visibility: visible;
pointer-events: all;
}
@@ -131,6 +104,21 @@
}
.reaction_button {
visibility: hidden;
pointer-events: none;
/* Set top/bottom padding to accommodate borders
and padding around reaction pills. */
padding: 4.5px 6px;
height: 13px;
border-radius: 21px;
color: var(--color-message-reaction-button-text);
background-color: var(--color-message-reaction-button-background);
border: 1px solid var(--color-message-reaction-button-border);
/* TODO: Eventually this space will be set on the message
box, at least in part, but for now this preserves the
space beneath the reactions area. */
margin-bottom: 4px;
& i {
font-size: 1em;
}
@@ -149,13 +137,16 @@
}
&:hover {
border: 1px solid var(--color-message-reaction-button-border-hover);
color: var(--color-message-reaction-button-text-hover);
background-color: var(
--color-message-reaction-button-background-hover
);
border: 1px solid var(--color-message-reaction-button-border-hover);
border-color: var(--color-message-reaction-button-border-hover);
box-shadow: inset 0 0 5px 0
var(--color-message-reaction-shadow-inner);
cursor: pointer;
opacity: 1;
color: var(--color-message-reaction-button-text-hover);
}
.message_reaction_count {