diff --git a/.github/release.md b/.github/release.md index 78fcd95..9ce6006 100644 --- a/.github/release.md +++ b/.github/release.md @@ -45,6 +45,7 @@ determined. - 微调仓库相关界面元素间隔 - 同步软件包页面样式 - 同步提示框样式 +- 同步主色调按钮和红色按钮的阴影样式 ### 🐞 Fix diff --git a/src/core/github.ts b/src/core/github.ts index 44d9bf3..7331340 100644 --- a/src/core/github.ts +++ b/src/core/github.ts @@ -68,7 +68,7 @@ export type GithubColor = { bgColor: { active: string; hover: string; rest: string }; transparent: { bgColor: { active: string; hover: string; selected: string } }; }; - shadow: { floating: { small: string } }; + shadow: { floating: { small: string }; resting: { small: string } }; overlay: { backdrop: { bgColor: string } }; underlineNav: { borderColor: { active: string } }; contribution: { @@ -302,6 +302,9 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor { floating: { small: `0px 0px 0px 1px ${themeVars.color.light.border}, 0px 6px 12px -3px ${themeVars.color.shadow.self}, 0px 6px 18px 0px ${themeVars.color.shadow.self};`, }, + resting: { + small: `0px 1px 1px 0px ${githubColor.shadow.resting.small}, 0px 1px 3px 0px ${githubColor.shadow.resting.small};`, + }, }, underlineNav: { borderColor: { diff --git a/src/types/color/github.ts b/src/types/color/github.ts index 6ad785f..d6bffaa 100644 --- a/src/types/color/github.ts +++ b/src/types/color/github.ts @@ -203,6 +203,14 @@ export const github = { */ small: null, }, + resting: { + /** 静止阴影 + * @button `primaryStyle` 主色调按钮阴影 + * @button `redButton` 红色按钮悬浮阴影 + * @setting `button` 红色按钮阴影 + */ + small: null, + } }, underlineNav: { borderColor: { diff --git a/styles/components/setting.ts b/styles/components/setting.ts index 0151e35..3d80b44 100644 --- a/styles/components/setting.ts +++ b/styles/components/setting.ts @@ -25,7 +25,7 @@ export const button = css` color: ${themeVars.color.text.light.self}; background-color: ${themeVars.color.button}; border-color: ${themeVars.color.light.border}; - + box-shadow: none; &:hover { background-color: ${themeVars.color.hover.self}; } @@ -57,12 +57,19 @@ export const button = css` } } // 管理员设置界面下的自定义主色调按钮 - .admin-setting-content .ui.primary.button { - ${tinyStyle} - padding: 5px 16px; - line-height: 22px; - &:hover { - ${tinyHoverStyle} + .admin-setting-content { + .ui.primary.button { + ${tinyStyle} + padding: 5px 16px; + line-height: 22px; + &:hover { + ${tinyHoverStyle} + } + } + .ui.red.button { + box-shadow: ${themeVars.github.shadow.resting.small}; + padding: 5px 16px; + line-height: 22px; } } `; diff --git a/styles/public/button.ts b/styles/public/button.ts index 5002aaa..f0fbebb 100644 --- a/styles/public/button.ts +++ b/styles/public/button.ts @@ -4,6 +4,7 @@ export const primaryStyle = { color: themeVars.github.button.primary.fgColor.rest, backgroundColor: themeVars.github.button.primary.bgColor.rest, borderColor: themeVars.github.button.primary.borderColor.rest, + boxShadow: themeVars.github.shadow.resting.small, }; export const primaryHoverStyle = { @@ -45,6 +46,7 @@ export const baseButton = css` background-color: ${themeVars.color.button}; color: ${themeVars.color.text.self}; border-color: ${themeVars.color.light.border}; + box-shadow: none; &:hover { background-color: ${themeVars.color.hover.self}; color: ${themeVars.color.text.self}; @@ -85,6 +87,7 @@ export const redButton = css` color: ${themeVars.github.button.danger.fgColor.hover}; background-color: ${themeVars.github.button.danger.bgColor.hover}; border-color: ${themeVars.github.button.danger.borderColor.hover}; + box-shadow: ${themeVars.github.shadow.resting.small}; } } `; diff --git a/themes/dark.css.ts b/themes/dark.css.ts index eb00060..1d3b667 100644 --- a/themes/dark.css.ts +++ b/themes/dark.css.ts @@ -64,7 +64,7 @@ export const darkGithubColors: GithubColor = { bgColor: { active: "#2a313c", hover: "#262c36", rest: "#212830" }, transparent: { bgColor: { active: "#656c7640", hover: "#656c7633", selected: "#656c761a" } }, }, - shadow: { floating: { small: "#01040966" } }, + shadow: { floating: { small: "#01040966" }, resting: { small: "#01040999" } }, overlay: { backdrop: { bgColor: "#21283066" } }, underlineNav: { borderColor: { active: "#f78166" } }, contribution: { diff --git a/themes/light.css.ts b/themes/light.css.ts index a3bfb60..a84f8d1 100644 --- a/themes/light.css.ts +++ b/themes/light.css.ts @@ -64,7 +64,7 @@ export const lightGithubColors: GithubColor = { bgColor: { active: "#e6eaef", hover: "#eff2f5", rest: "#f6f8fa" }, transparent: { bgColor: { active: "#818b9826", hover: "#818b981a", selected: "#818b9826" } }, }, - shadow: { floating: { small: "#25292e0a" } }, + shadow: { floating: { small: "#25292e0a" }, resting: { small: "#1f23280f" } }, overlay: { backdrop: { bgColor: "#c8d1da66" } }, underlineNav: { borderColor: { active: "#fd8c73" } }, contribution: { diff --git a/themes/soft-dark.css.ts b/themes/soft-dark.css.ts index 1a7c5af..a5f3418 100644 --- a/themes/soft-dark.css.ts +++ b/themes/soft-dark.css.ts @@ -59,7 +59,7 @@ export const softDarkGithubColors: GithubColor = { bgColor: { active: "#3d444d", hover: "#2f3742", rest: "#2a313c" }, transparent: { bgColor: { active: "#656c7633", hover: "#656c7626", selected: "#656c761a" } }, }, - shadow: { floating: { small: "#01040966" } }, + shadow: { floating: { small: "#01040966" }, resting: { small: "#01040999" } }, overlay: { backdrop: { bgColor: "#262c3666" } }, underlineNav: { borderColor: { active: "#ec775c" } }, contribution: {