mirror of
https://github.com/fromchat-messenger/web.git
synced 2026-09-22 19:15:08 +03:00
59 lines
1.4 KiB
SCSS
59 lines
1.4 KiB
SCSS
@use "../../../css/common/colors" as *;
|
|
@use "../../../css/common/material" as *;
|
|
@use "sass:color";
|
|
|
|
// Reaction styles
|
|
.message-reactions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
margin-top: 8px;
|
|
margin-left: 10px;
|
|
margin-right: 10px;
|
|
animation: messageReactionsFadeIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
.reaction-button {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 12px;
|
|
border: none;
|
|
border-radius: 16px;
|
|
background-color: $color-dark-surface-container;
|
|
cursor: pointer;
|
|
transition: transform 0.2s ease, background-color 0.2s ease;
|
|
font-size: 1px;
|
|
min-height: 28px;
|
|
animation: reactionFadeIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
|
|
&.removing {
|
|
animation: reactionFadeOut 0.2s ease forwards;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: $color-dark-surface-container-high;
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
&.reacted {
|
|
background-color: $color-dark-primary-container;
|
|
border-color: $color-dark-primary;
|
|
color: $color-dark-on-primary-container;
|
|
|
|
&:hover {
|
|
background-color: color.adjust($color-dark-primary-container, $lightness: 20%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.reaction-emoji {
|
|
font-size: 17px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.reaction-count {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
} |