diff --git a/.github/release.md b/.github/release.md index 297a1ba..18759e9 100644 --- a/.github/release.md +++ b/.github/release.md @@ -1,31 +1,6 @@ -## ✨ Feat - -🎉 支持自定义 CSS 变量设置主题样式 - -#### CSS 变量 - -- 支持克隆菜单自定义长度 - ## 🌈 Style -- 分支菜单项目添加动画效果 - #### 更符合 GitHub 风格 -- 同步 PR 的合并提交操作面板样式 -- 同步 Issue/PR 的时间线样式 -- 仓库同步派生栏样式同步 -- 添加一些颜色的渐变过渡动画 -- 同步 Issue/PR 的评论标题颜色 -- 同步 PR/Actions 的分支字体 -- 同步文件打开时的提交栏样式 - -## 🎈 Perf - -- 优化全局按钮样式 -- 优化顶部导航栏按钮圆角 - -## 🐞 Fix - -- 修复一些圆角问题 -- 修复工单下依赖工单选择框的高度对齐 +- 同步 Issue/PR 的评论样式 +- 同步表情菜单样式 diff --git a/src/types/color/github.ts b/src/types/color/github.ts index e31cd0c..8a85c84 100644 --- a/src/types/color/github.ts +++ b/src/types/color/github.ts @@ -28,6 +28,7 @@ export const github = { * @actions `actionViewLeft` 左侧子作业激活伪元素颜色 * @release `releaseTagMenu` 顶部栏左侧按钮激活背景色 * @navbar `navbarRight` 头像管理员标识背景颜色 + * @dropdown `dropdown` emoji 的悬停背景色 */ emphasis: null, /** 暗淡的背景颜色 diff --git a/styles/components/issue.ts b/styles/components/issue.ts index 7963dd4..a229cee 100644 --- a/styles/components/issue.ts +++ b/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; + } + } } `; diff --git a/styles/public/dropdown.ts b/styles/public/dropdown.ts index 9e2b2d6..f2d5874 100644 --- a/styles/public/dropdown.ts +++ b/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; + } + } + } +`;