diff --git a/.github/release.md b/.github/release.md index 5c42e61..839ec9f 100644 --- a/.github/release.md +++ b/.github/release.md @@ -2,6 +2,7 @@ #### 更符合 GitHub 风格 +- 1:1 还原克隆菜单样式 - 代码差异对比折叠行文本颜色同步 - 代码差异对比行号位置同步 - 代码差异对比按钮和折叠行高度同步 @@ -23,6 +24,7 @@ - 提交 SHA 颜色和样式优化 - 软件包标签颜色同步 - Issue/PR 评论边框样式同步 +- Code/Runner/PR 弹窗样式同步 ## 🎈 Perf diff --git a/src/core/github.ts b/src/core/github.ts index f83e93c..ca5b63c 100644 --- a/src/core/github.ts +++ b/src/core/github.ts @@ -331,6 +331,13 @@ export function defineGithubTheme(githubColor: GithubColor): Theme { }, }, }, + control: { + transparent: { + bgColor: { + hover: githubColor.control.transparent.bgColor.hover, + }, + }, + }, }; return defineTheme({ isDarkTheme: githubColor.isDarkTheme, diff --git a/src/core/theme.ts b/src/core/theme.ts index 67386ba..462857a 100644 --- a/src/core/theme.ts +++ b/src/core/theme.ts @@ -1,4 +1,4 @@ -import { createGlobalTheme, globalStyle } from "@vanilla-extract/css"; +import { createGlobalTheme, globalKeyframes, globalStyle } from "@vanilla-extract/css"; import { otherThemeVars, themeVars } from "src/types/vars"; import type { MapLeafNodes, WithOptionalLayer } from "./types"; @@ -13,7 +13,9 @@ function stringToBoolean(str: string, name: string): boolean { } } -const dark_emoji = ` +export const overlayAppear = "overlay-appear"; + +const emoji = ` .emoji[aria-label="check mark"], .emoji[aria-label="currency exchange"], .emoji[aria-label="TOP arrow"], @@ -39,7 +41,7 @@ const dark_emoji = ` export function createTheme(theme: Theme): void { const isDarkTheme = stringToBoolean(theme.isDarkTheme, "isDarkTheme"); if (isDarkTheme) { - globalStyle(dark_emoji, { filter: "invert(100%) hue-rotate(180deg)" }); + globalStyle(emoji, { filter: "invert(100%) hue-rotate(180deg)" }); } createGlobalTheme(":root", themeVars, theme); createGlobalTheme(":root", otherThemeVars, { @@ -57,4 +59,8 @@ export function createTheme(theme: Theme): void { accentColor: themeVars.color.accent, colorScheme: isDarkTheme ? "dark" : "light", }); + globalKeyframes(overlayAppear, { + "0%": { opacity: 0, transform: "translateY(-12px)" }, + "100%": { opacity: 1, transform: "translateY(0)" }, + }); } diff --git a/src/types/color/github.ts b/src/types/color/github.ts index 0bbefc7..a80e526 100644 --- a/src/types/color/github.ts +++ b/src/types/color/github.ts @@ -55,6 +55,7 @@ export const github = { accent: { /** 强调色 * @input `input` 输入框被选中时的边框颜色 + * @clone `clone` 克隆地址框被选中时的边框颜色 * @issue `comment` 评论框被选中时的边框颜色 */ emphasis: null, @@ -153,4 +154,15 @@ export const github = { }, }, }, + control: { + transparent: { + bgColor: { + /** 悬停色 + * @clone `clone` 克隆按钮下按钮组和面板操作列表的悬停背景颜色 + * @input `inputAction` 输入框动作按钮的悬停背景颜色 + */ + hover: null, + } + } + } }; diff --git a/styles/components/clone.tsx b/styles/components/clone.tsx new file mode 100644 index 0000000..3c3503b --- /dev/null +++ b/styles/components/clone.tsx @@ -0,0 +1,92 @@ +import { css, otherThemeVars, themeVars } from "src/types/vars"; + +// 克隆按钮的弹窗 +export const clone = css` + .tippy-box { + .clone-panel-popup { + //标题 + .clone-panel-field:first-of-type { + font-weight: bold; + margin-top: 16px; + margin-left: 16px; + } + // 按钮组 + .clone-panel-tab { + display: flex; + gap: 8px; + margin-left: 12px; + // 按钮 + .item { + color: ${themeVars.color.text.self}; + font-weight: 600; + padding: 6px 8px; + margin: 8px 0; + &:hover { + background: ${themeVars.github.control.transparent.bgColor.hover}; + border-radius: ${otherThemeVars.border.radius}; + } + &.active:after { + content: ""; + display: block; + position: absolute; + bottom: -8px; + left: 0; + width: 100%; + height: 2px; + background: #f78166; + } + } + .item.active { + border-bottom: 0; + position: relative; + } + } + // 克隆地址 + .ui.input.action { + > input, + > input:hover { + border: 1px solid ${themeVars.color.light.border}; + border-radius: ${otherThemeVars.border.radius}; + } + > input:focus, + > input:focus-visible { + border-color: ${themeVars.github.borderColor.accent.emphasis}; + } + .ui.ui.ui.button { + background-color: unset; + border: unset; + border-radius: ${otherThemeVars.border.radius}; + color: ${themeVars.color.text.light.num1}; + padding: 5px 10px; + margin-left: 5px; + &:hover { + background-color: ${themeVars.github.control.transparent.bgColor.hover}; + } + } + } + // 面板操作列表之间的分割线 + .divider { + margin: 0; + } + // 面板操作列表 + .clone-panel-list { + margin: 8px; + .item { + border-radius: ${otherThemeVars.border.radius}; + padding: 6px 8px; + line-height: 1.5; + margin: 0; + svg { + color: ${themeVars.color.text.light.num1}; + margin-right: 0.25rem; + } + } + > .item:hover { + color: ${themeVars.color.text.self}; + text-decoration: none; + background: ${themeVars.github.control.transparent.bgColor.hover}; + } + } + } + } +`; diff --git a/styles/components/index.tsx b/styles/components/index.tsx index f621314..60d3036 100644 --- a/styles/components/index.tsx +++ b/styles/components/index.tsx @@ -1,4 +1,5 @@ import "./actions"; +import "./clone"; import "./dashboard"; import "./diff"; import "./issue"; diff --git a/styles/components/repo.tsx b/styles/components/repo.tsx index 7980000..0647734 100644 --- a/styles/components/repo.tsx +++ b/styles/components/repo.tsx @@ -1,5 +1,6 @@ import { css, themeVars } from "src/types/vars"; +// 提交列表 export const commit = css` .page-content.repository { // 提交列表 (选择器保证同等优先级覆盖了 gitea 原生的样式) @@ -21,6 +22,15 @@ export const commit = css` margin-left: -8px; } } + // 提交信息 + .message { + // tag 标签 + a.ui.basic.primary.label { + border-radius: 25px; + border-width: 1.5px; + padding: 5px 8px !important; + } + } // 提交信息右侧 .tw-text-right { // 时间标签 diff --git a/styles/public/dropdown.scss b/styles/public/dropdown.scss index b84e4e5..bc138a9 100644 --- a/styles/public/dropdown.scss +++ b/styles/public/dropdown.scss @@ -16,84 +16,6 @@ } } -// clone 下拉菜单 -.tippy-box { - margin-top: -3px; - background: var(--color-box-header); - border-radius: 12px; - overflow: hidden; - box-shadow: - 0px 0px 0px 0.5px #30363d, - 0px 6px 12px -3px rgba(1, 4, 9, 0.4), - 0px 6px 18px 0px rgba(1, 4, 9, 0.4); - animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running overlay-appear; - - .clone-panel-field { - margin-top: 16px; - } - - .flex-text-block.clone-panel-field { - color: #fff; - font-weight: bold; - margin-left: 16px; - } - - .clone-panel-tab { - margin-left: 16px; - - button { - color: #f0f6fc !important; - font-weight: 600; - padding: 6px 8px; - margin: 8px 0; - - &:hover { - background: var(--color-hover); - border-radius: var(--border-radius); - } - - &.active:after { - content: ""; - display: block; - position: absolute; - bottom: -8px; - left: 0; - width: 100%; - height: 2px; - background: #f78166; - } - } - - .item.active { - border-bottom: 0; - position: relative; - } - } - - .flex-items-block { - margin: 0; - - .item { - display: block; - padding: 8px 10px; - text-align: left; - text-transform: none; - line-height: 1em; - margin: 0; - - svg { - margin-right: 0.5rem; - } - } - - > .item:hover { - color: var(--color-text); - text-decoration: none; - background: var(--color-hover); - } - } -} - // 下拉菜单 .ui.dropdown .menu { margin-top: 3.75px !important; diff --git a/styles/public/index.tsx b/styles/public/index.tsx index fb2a279..b9eb2dc 100644 --- a/styles/public/index.tsx +++ b/styles/public/index.tsx @@ -1,6 +1,7 @@ import "./button"; // 按钮 import "./chroma"; // 代码高亮 import "./codemirror"; // codemirror 样式 +import "./tippy"; import "./input"; // 输入框 import "./label"; // 标签 import "./modal"; // 弹窗 diff --git a/styles/public/label.tsx b/styles/public/label.tsx index aa4b47d..936b418 100644 --- a/styles/public/label.tsx +++ b/styles/public/label.tsx @@ -87,33 +87,21 @@ export const shaLabel = css` &.sign-trusted { border: 1.5px solid ${themeVars.color.green.badge.self} !important; color: ${themeVars.color.green.badge.self} !important; - &:hover { - background-color: ${themeVars.color.green.badge.hover.bg} !important; - } } // 验证未信任 &.sign-untrusted { border: 1.5px solid ${themeVars.color.yellow.badge.self} !important; color: ${themeVars.color.yellow.badge.self} !important; - &:hover { - background-color: ${themeVars.color.yellow.badge.hover.bg} !important; - } } // 验证未匹配 &.sign-unmatched { border: 1.5px solid ${themeVars.color.orange.badge.self} !important; color: ${themeVars.color.orange.badge.self} !important; - &:hover { - background-color: ${themeVars.color.orange.badge.hover.bg} !important; - } } // 验证警告 &.sign-warning { border: 1.5px solid ${themeVars.color.red.badge.self} !important; color: ${themeVars.color.red.badge.self} !important; - &:hover { - background-color: ${themeVars.color.red.badge.hover.bg} !important; - } } } `; @@ -155,6 +143,7 @@ export const repoLabel = css` .org-visibility div { &.ui.basic.label { background-color: unset; + color: ${themeVars.color.text.light.num1}; } } `; @@ -166,6 +155,7 @@ export const packagesLabel = css` > .ui.container > div > .flex-list { // 软件包类型的标签 .ui.label { + background-color: unset; border: 1px solid ${themeVars.color.light.border}; color: ${themeVars.color.primary.self}; } diff --git a/styles/public/tippy.tsx b/styles/public/tippy.tsx new file mode 100644 index 0000000..7d7703f --- /dev/null +++ b/styles/public/tippy.tsx @@ -0,0 +1,30 @@ +import { overlayAppear } from "src/core/theme"; +import { css, themeVars } from "src/types/vars"; + +// 一些界面内的弹窗, 比如克隆按钮, PR信息, Runner信息 等 +export const tippyBox = css` + .tippy-box { + margin-top: -3px; + border-radius: 12px; + overflow: hidden; + animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running ${overlayAppear}; + // 边框线同步 github 样式 + &[data-theme="default"], + &[data-theme="box-with-header"] { + border: unset; + box-shadow: + 0px 0px 0px 1px ${themeVars.color.light.border}, + 0px 6px 12px -3px ${themeVars.color.shadow.self}, + 0px 6px 18px 0px ${themeVars.color.shadow.self}; + } + // 带标题的弹窗 (Runner信息) + &[data-theme="box-with-header"] { + .tippy-content { + background-color: ${themeVars.color.menu}; + .ui.attached.header { + background-color: ${themeVars.color.body}; + } + } + } + } +`;