评论和表情样式同步

styles/components/issue.ts

@@ -85,7 +85,7 @@ export const prBranch = css`
 
 // 评论
 export const comment = css`
-  .comment {
+  .comment .comment-container {
     // 去除评论标题左侧指向头像的小箭头
     .comment-header,
     &:target .comment-header {
@@ -101,12 +101,29 @@ export const comment = css`
         box-shadow: 0 0 0 1px ${themeVars.color.primary.self} !important;
       }
     }
+    .comment-header {
+      padding: 4px 4px 4px 16px;
+    }
     .comment-header-right {
       > .item,
       > .label {
         color: ${themeVars.color.text.light.num1};
       }
+      > .ui.label {
+        background-color: initial;
+        font-size: 12px;
+        height: 20px;
+        padding: 0 6px;
+      }
+      // 隐藏顶部菜单的表情按钮
+      .ui.dropdown.action.select-reaction {
+        display: none;
+      }
       .context-dropdown {
+        a.context-menu {
+          display: flex;
+          align-items: center;
+        }
         // 评论菜单的删除按钮
         .menu .item.delete-comment {
           color: ${themeVars.color.red.self};
@@ -117,6 +134,44 @@ export const comment = css`
         }
       }
     }
+    // 表情菜单按钮头部+底部
+    .ui.dropdown.action.select-reaction > a {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: ${themeVars.color.button};
+      border-radius: 25px;
+      border: 1px solid ${themeVars.color.light.border};
+      color: ${themeVars.color.text.light.num1};
+      padding: 0px 8px !important;
+      height: 28px;
+      width: 28px;
+    }
+    // 底部表情栏
+    .bottom-reactions {
+      .ui.ui.ui.label {
+        background-color: unset !important;
+        border-radius: 25px;
+        border-color: ${themeVars.color.light.border};
+        &:hover {
+          background-color: ${themeVars.color.reaction.hoverBg} !important;
+          border-color: ${themeVars.color.light.border};
+        }
+        .reaction {
+          font-size: 12px;
+        }
+        .reaction-count {
+          color: ${themeVars.color.text.light.self};
+          font-weight: 500;
+          margin-left: 0;
+        }
+      }
+      // 显示表情菜单按钮
+      .select-reaction {
+        padding: 0;
+        visibility: visible;
+      }
+    }
   }
 `;
 

styles/public/dropdown.ts

@@ -19,13 +19,15 @@ export const dropdown = css`
         gap: 0.5rem;
         padding: 8px 10px !important;
         border-radius: ${otherThemeVars.border.radius} !important;
-        margin: 0 0.5rem;
-        &:first-of-type {
+        &:not(.emoji) {
+          margin: 0 0.5rem;
+        }
+        &:not(.emoji):first-of-type {
           margin-top: 0.5rem;
         }
         // 不知道为什么提交差异对比页面操作中的 cherrypick 按钮无法被选中
         &.cherry-pick-button,
-        &:last-of-type {
+        &:not(.emoji):last-of-type {
           margin-bottom: 0.5rem;
         }
         &:hover {
@@ -180,3 +182,23 @@ export const branchDropdown = css`
     animation: ${animationDown};
   }
 `;
+
+// 包含表情的下拉菜单
+export const emojiDropdown = css`
+  .ui.dropdown.action.select-reaction.active .menu:has(.emoji) {
+    display: flex !important;
+    flex-direction: row;
+    gap: 4px;
+    padding: 4px;
+    min-width: auto;
+    > .item.emoji {
+      font-size: 14px;
+      min-height: 32px;
+      height: 32px;
+      margin: 0px;
+      &:hover {
+        background-color: ${themeVars.github.bgColor.accent.emphasis} !important;
+      }
+    }
+  }
+`;