From f68ad71ddb20a830bf01714132da528c21cd393c Mon Sep 17 00:00:00 2001 From: lutinglt Date: Sat, 5 Jul 2025 21:48:37 +0800 Subject: [PATCH] =?UTF-8?q?dropdown=20=E8=BF=81=E7=A7=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/release.md | 1 + styles/components/repo.tsx | 16 ++++ styles/public/dropdown.scss | 144 ------------------------------------ styles/public/dropdown.tsx | 47 ++++++++++-- styles/public/radius.tsx | 8 ++ styles/public/tippy.tsx | 14 +++- themes/dark.css.tsx | 4 +- 7 files changed, 83 insertions(+), 151 deletions(-) delete mode 100644 styles/public/dropdown.scss diff --git a/.github/release.md b/.github/release.md index 39dccdc..48524af 100644 --- a/.github/release.md +++ b/.github/release.md @@ -26,6 +26,7 @@ - Issue/PR 评论边框样式同步 - Code/Runner/PR 提示框样式同步 - 下拉菜单样式同步 +- 选择下拉菜单样式同步 ## 🎈 Perf diff --git a/styles/components/repo.tsx b/styles/components/repo.tsx index 0647734..630a871 100644 --- a/styles/components/repo.tsx +++ b/styles/components/repo.tsx @@ -53,3 +53,19 @@ export const commit = css` } } `; + +// 文件列表页面下的分支按钮 +export const branchButton = css` + .page-content.repository.file.list { + .ui.dropdown.branch-selector-dropdown > .menu > .menu { + // 显示默认分支的标签 + .ui.label { + background-color: ${themeVars.color.menu}; + border: 1px solid ${themeVars.color.light.border}; + margin-top: 1px; + margin-left: auto; + margin-right: 16px; // gitea 有 RSS 留出足够的空间 + } + } + } +`; diff --git a/styles/public/dropdown.scss b/styles/public/dropdown.scss deleted file mode 100644 index bc138a9..0000000 --- a/styles/public/dropdown.scss +++ /dev/null @@ -1,144 +0,0 @@ -// Made by Luting ^-^ -// 下拉菜单动画 -@keyframes overlay-appear { - 0% { - opacity: 0; - transform: translateY(-12px); - } - - 35% { - transform: translateY(-2px); - } - - 100% { - opacity: 1; - transform: translateY(0); - } -} - -// 下拉菜单 -.ui.dropdown .menu { - margin-top: 3.75px !important; - border-radius: 12px !important; - overflow: hidden auto; - box-shadow: - 0px 0px 0px 0.5px #30363d, - 0px 6px 12px -3px #01040966, - 0px 6px 18px 0px #01040966; - animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running overlay-appear; - - > .item { - padding: 8px 10px !important; - } -} - -.ui.dropdown .menu, -.branch-tag-item.active, -.ui.pointing.dropdown > .menu:not(.hidden):after { - background: var(--color-box-header) !important; -} - -%item-style { - background: #1f6feb; -} - -.ui.dropdown .menu > .item.context:hover { - @extend %item-style; -} - -.user-main-content, -.repo-setting-content, -.user-setting-content, -.org-setting-content, -.admin-setting-content { - .ui.dropdown .menu > .item { - &:hover { - @extend %item-style; - - a { - color: var(--color-text); - } - } - } -} - -// 按钮菜单选项(主要为仓库) -.tippy-box .flex-items-block, -.ui.dropdown > .visible.menu .scrolling.menu, -.ui.button.dropdown .menu { - .item { - display: flex; - align-items: center; - border-radius: var(--border-radius); - margin: 0 8px; - - &:first-of-type { - border-radius: var(--border-radius); - margin-top: 8px; - } - - &:last-of-type { - border-radius: var(--border-radius); - margin-bottom: 8px; - } - } -} - -// 下拉菜单分隔线 -.ui.dropdown .menu > .divider { - border: 0; - height: 1px; - background-color: #3d444db3; - margin-top: calc(7px); - margin-bottom: 8px; - list-style: none; -} - -.ui.dropdown.branch-selector-dropdown > .visible.menu { - // 仓库分支列表下查看操作按钮 - > .item { - display: flex; - align-items: center; - border-radius: var(--border-radius); - margin: 8px; - padding: 6px 8px !important; - } - - .scrolling.menu .item { - padding: 6px 16px !important; - - // 分支菜单下划线 - &:before { - content: " "; - display: block; - position: absolute; - width: 100%; - top: 0px; - left: 0px; - border-width: 1px 0px 0px; - border-style: solid; - border-image: initial; - border-color: #3d444db3; - } - - &:first-of-type:before { - border-color: transparent; - } - - &:hover { - &:before { - border-color: transparent; - } - - + :before { - border-color: transparent; - } - } - - .ui.label { - margin-top: 1px; - margin-left: auto; - margin-right: 0; - } - } -} diff --git a/styles/public/dropdown.tsx b/styles/public/dropdown.tsx index 5ef8f2b..a0b9b31 100644 --- a/styles/public/dropdown.tsx +++ b/styles/public/dropdown.tsx @@ -12,27 +12,35 @@ export const dropdown = css` border: unset !important; border-radius: 12px !important; box-shadow: ${themeVars.github.shadow.floating.small} !important; - - > .item { + // 忽略隐藏 + > .item:not(.tw-hidden) { + display: flex !important; + align-items: center; + gap: 0.5rem; padding: 8px 10px !important; border-radius: ${otherThemeVars.border.radius} !important; margin: 0 0.5rem; - &:first-child { + &:first-of-type { margin-top: 0.5rem; } - &:last-child { + // 不知道为什么提交差异对比页面操作中的 cherrypick 按钮无法被选中 + &.cherry-pick-button, + &:last-of-type { margin-bottom: 0.5rem; } &:hover { background-color: ${themeVars.github.control.transparent.bgColor.hover} !important; } - &.active, &.selected { background-color: ${themeVars.color.active} !important; &:hover { background-color: ${themeVars.github.control.transparent.bgColor.hover} !important; } } + svg { + color: ${themeVars.color.text.light.num1}; + margin-right: 0.5rem; + } } > .divider { margin: 0.5rem 0; @@ -54,4 +62,33 @@ export const dropdown = css` .ui.selection.dropdown .menu > .item { border: unset; } + // 修复一些菜单下的菜单元素溢出问题 + // 目前主要为分支菜单 + .ui.dropdown .menu .menu { + border-radius: 12px !important; + } +`; + +// 选择框的下拉菜单看起来像普通按钮 +export const selectionDropdown = css` + .ui.selection.dropdown, + .ui.selection.dropdown.active { + background-color: ${themeVars.color.button}; + border-color: ${themeVars.color.light.border}; + border-radius: ${otherThemeVars.border.radius}; + padding: 9px 16px; + min-height: 33px; + &:focus { + background: ${themeVars.color.button}; + border-color: ${themeVars.color.light.border}; + } + &:hover { + background: ${themeVars.color.hover.self}; + border-color: ${themeVars.color.light.border}; + } + } + .ui.selection.dropdown.active { + border-bottom-left-radius: ${otherThemeVars.border.radius} !important; + border-bottom-right-radius: ${otherThemeVars.border.radius} !important; + } `; diff --git a/styles/public/radius.tsx b/styles/public/radius.tsx index e839d9a..b883dde 100644 --- a/styles/public/radius.tsx +++ b/styles/public/radius.tsx @@ -280,3 +280,11 @@ export const fixRadius = css` border-bottom-right-radius: ${otherThemeVars.border.radius}; } `; + +// 修复一些根本无法理解的生效顺序 +export const fixWhyRadius = css` + // Issue 菜单第一个按钮 + .ui.secondary.menu .item { + border-radius: ${otherThemeVars.border.radius}; + } +`; diff --git a/styles/public/tippy.tsx b/styles/public/tippy.tsx index 932f001..66583f4 100644 --- a/styles/public/tippy.tsx +++ b/styles/public/tippy.tsx @@ -1,5 +1,5 @@ import { animation } from "src/core/theme"; -import { css, themeVars } from "src/types/vars"; +import { css, otherThemeVars, themeVars } from "src/types/vars"; // 一些界面内的提示框, 比如克隆按钮, PR信息, Runner信息 等 export const tippyBox = css` @@ -23,5 +23,17 @@ export const tippyBox = css` } } } + // 差异对比中文件路径行右侧的三个点菜单 + &[data-theme="menu"] { + .tippy-content { + padding: 0.5rem; + .item { + border-radius: ${otherThemeVars.border.radius}; + &:hover { + background-color: ${themeVars.github.control.transparent.bgColor.hover}; + } + } + } + } } `; diff --git a/themes/dark.css.tsx b/themes/dark.css.tsx index eca92f1..8f2e166 100644 --- a/themes/dark.css.tsx +++ b/themes/dark.css.tsx @@ -105,7 +105,9 @@ const github: GithubColor = { bgColor: { active: "#656c7640", hover: "#656c7633", - selected: "#656c761a", + // 非官方颜色, 实在是太淡了 + // selected: "#656c761a", + selected: "#656c762a", }, }, },