paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-05 14:35:27 +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)); 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 { .emoji {
margin: 1px 3px; margin: 1px 3px;
height: 17px; height: 17px;
@@ -119,7 +92,7 @@
color: var(--color-message-reaction-button-text); color: var(--color-message-reaction-button-text);
} }
&:hover .message_reaction + .reaction_button { &:hover .reaction_button {
visibility: visible; visibility: visible;
pointer-events: all; pointer-events: all;
} }
@@ -131,6 +104,21 @@
} }
.reaction_button { .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 { & i {
font-size: 1em; font-size: 1em;
} }
@@ -149,13 +137,16 @@
} }
&:hover { &:hover {
border: 1px solid var(--color-message-reaction-button-border-hover); color: var(--color-message-reaction-button-text-hover);
background-color: var( background-color: var(
--color-message-reaction-button-background-hover --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; cursor: pointer;
opacity: 1; opacity: 1;
color: var(--color-message-reaction-button-text-hover);
} }
.message_reaction_count { .message_reaction_count {