你好，
我对 Discourse 反应插件 进行了一些 CSS 修改，使其看起来更像 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;
}
……
