こんにちは、
Discourse Reactions Plugin に対して CSS の変更を加えました。これにより、Facebook のリアクションボタンに似た見た目になりました。
ここでは、デフォルトの 
を含む 6 つのリアクションボタンを設定しています。
COMMON / 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!';
}
}
}
}
モバイル版
モバイルでは、リアクションピッカーの位置を position: fixed に設定しています。
これにより、以下のような奇妙な動作を防ぐことができます。 
このように表示されます
リアクションピッカーと同じ問題が、モバイル上のステータスパネルでも発生しているため、こちらも position: fixed を使用しています。
Mobile / 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;
}
デフォルトの「いいねした人」セクションを非表示にする
COMMON / CSS
リアクションステータスパネルにも同じ情報が表示されるため、デフォルトの「いいねした人」セクションを非表示にしています。
.who-liked {
display: none;
}
…
