Здравствуйте,
Я внес некоторые изменения в CSS для плагина Discourse Reactions. Теперь он выглядит очень похоже на кнопки реакций в Facebook.
Вот код для 6 кнопок реакций, включая стандартную, которая на моём сайте — 
.
ОБЩИЕ НАСТРОЙКИ / SCSS
Разместите этот код в разделе общих стилей CSS.
Важное замечание: Вы можете изменить эмодзи над подписями, отредактировав строки content: 'Love it!', content: 'Beautiful' и т. д. Конечно, вы можете использовать любые реакции, какие захотите. Это просто подписи над реакциями.
.discourse-reactions-picker {
.discourse-reactions-picker-container {
width: 330px;
height: 50px;
max-width: calc(100vw - 2em);
border: 1px solid var(--primary-low) !important;
border-radius: 50px;
.pickable-reaction {
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
}
.pickable-reaction {
background: transparent !important;
.emoji {
height: 40px;
width: 40px;
padding: 0 !important;
transform: scale(0.9);
}
&.is-used {
transform: scale(1.3);
transform-origin: bottom;
border: none !important;
}
&:hover {
transform-origin: bottom;
}
&:hover:after {
position: absolute;
font-size: 10px;
top: -15px;
background: var(--secondary-low);
color: var(--secondary);
padding: 2px 5px;
border-radius: 20px;
}
&:first-child {
&:hover:after {
content: 'Love it!';
}
}
&:nth-child(2) {
&:hover:after {
content: 'Beautiful';
}
}
&:nth-child(3) {
&:hover:after {
content: 'Hug';
}
}
&:nth-child(4) {
&:hover:after {
content: 'Congrats!!';
}
}
&:nth-child(5) {
&:hover:after {
content: 'Hmm...';
}
}
&:nth-child(6) {
&:hover:after {
content: 'Wooow!';
}
}
}
}
Мобильные устройства
На мобильных устройствах я установил фиксированное позиционирование для панели выбора реакций.
Это один из возможных вариантов, чтобы избежать такого странного поведения. 
Выглядит это так
Аналогичная ситуация происходит с панелью состояния на мобильных устройствах, которая также находилась в панели выбора реакций, поэтому здесь тоже используется фиксированное позиционирование.
МОБИЛЬНЫЕ УСТРОЙСТВА / SCSS
.discourse-reactions-picker {
position: fixed;
.pickable-reaction {
&:hover:after {
font-size: 12px;
top: -8px;
}
&.is-used {
&:hover:after {
transform: scale(0.8);
top: -15px;
}
}
}
}
.discourse-reactions-state-panel {
position: fixed;
}
Скрыть стандартный раздел «Кто поставил лайк»
ОБЩИЕ НАСТРОЙКИ / CSS
Я скрыл стандартный раздел «Кто поставил лайк», так как панель состояния реакций также отображает эту информацию.
.who-liked {
display: none;
}
…
