mirror of
https://github.com/lutinglt/gitea-github-theme.git
synced 2025-10-26 21:20:31 +00:00
同步主色调按钮和红色按钮的阴影样式
This commit is contained in:
1
.github/release.md
vendored
1
.github/release.md
vendored
@@ -45,6 +45,7 @@ determined.
|
|||||||
- 微调仓库相关界面元素间隔
|
- 微调仓库相关界面元素间隔
|
||||||
- 同步软件包页面样式
|
- 同步软件包页面样式
|
||||||
- 同步提示框样式
|
- 同步提示框样式
|
||||||
|
- 同步主色调按钮和红色按钮的阴影样式
|
||||||
|
|
||||||
### 🐞 Fix
|
### 🐞 Fix
|
||||||
|
|
||||||
|
|||||||
@@ -68,7 +68,7 @@ export type GithubColor = {
|
|||||||
bgColor: { active: string; hover: string; rest: string };
|
bgColor: { active: string; hover: string; rest: string };
|
||||||
transparent: { bgColor: { active: string; hover: string; selected: string } };
|
transparent: { bgColor: { active: string; hover: string; selected: string } };
|
||||||
};
|
};
|
||||||
shadow: { floating: { small: string } };
|
shadow: { floating: { small: string }; resting: { small: string } };
|
||||||
overlay: { backdrop: { bgColor: string } };
|
overlay: { backdrop: { bgColor: string } };
|
||||||
underlineNav: { borderColor: { active: string } };
|
underlineNav: { borderColor: { active: string } };
|
||||||
contribution: {
|
contribution: {
|
||||||
@@ -302,6 +302,9 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
|
|||||||
floating: {
|
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};`,
|
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: {
|
underlineNav: {
|
||||||
borderColor: {
|
borderColor: {
|
||||||
|
|||||||
@@ -203,6 +203,14 @@ export const github = {
|
|||||||
*/
|
*/
|
||||||
small: null,
|
small: null,
|
||||||
},
|
},
|
||||||
|
resting: {
|
||||||
|
/** 静止阴影
|
||||||
|
* @button `primaryStyle` 主色调按钮阴影
|
||||||
|
* @button `redButton` 红色按钮悬浮阴影
|
||||||
|
* @setting `button` 红色按钮阴影
|
||||||
|
*/
|
||||||
|
small: null,
|
||||||
|
}
|
||||||
},
|
},
|
||||||
underlineNav: {
|
underlineNav: {
|
||||||
borderColor: {
|
borderColor: {
|
||||||
|
|||||||
@@ -25,7 +25,7 @@ export const button = css`
|
|||||||
color: ${themeVars.color.text.light.self};
|
color: ${themeVars.color.text.light.self};
|
||||||
background-color: ${themeVars.color.button};
|
background-color: ${themeVars.color.button};
|
||||||
border-color: ${themeVars.color.light.border};
|
border-color: ${themeVars.color.light.border};
|
||||||
|
box-shadow: none;
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: ${themeVars.color.hover.self};
|
background-color: ${themeVars.color.hover.self};
|
||||||
}
|
}
|
||||||
@@ -57,7 +57,8 @@ export const button = css`
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 管理员设置界面下的自定义主色调按钮
|
// 管理员设置界面下的自定义主色调按钮
|
||||||
.admin-setting-content .ui.primary.button {
|
.admin-setting-content {
|
||||||
|
.ui.primary.button {
|
||||||
${tinyStyle}
|
${tinyStyle}
|
||||||
padding: 5px 16px;
|
padding: 5px 16px;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
@@ -65,6 +66,12 @@ export const button = css`
|
|||||||
${tinyHoverStyle}
|
${tinyHoverStyle}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.ui.red.button {
|
||||||
|
box-shadow: ${themeVars.github.shadow.resting.small};
|
||||||
|
padding: 5px 16px;
|
||||||
|
line-height: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const label = css`
|
export const label = css`
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ export const primaryStyle = {
|
|||||||
color: themeVars.github.button.primary.fgColor.rest,
|
color: themeVars.github.button.primary.fgColor.rest,
|
||||||
backgroundColor: themeVars.github.button.primary.bgColor.rest,
|
backgroundColor: themeVars.github.button.primary.bgColor.rest,
|
||||||
borderColor: themeVars.github.button.primary.borderColor.rest,
|
borderColor: themeVars.github.button.primary.borderColor.rest,
|
||||||
|
boxShadow: themeVars.github.shadow.resting.small,
|
||||||
};
|
};
|
||||||
|
|
||||||
export const primaryHoverStyle = {
|
export const primaryHoverStyle = {
|
||||||
@@ -45,6 +46,7 @@ export const baseButton = css`
|
|||||||
background-color: ${themeVars.color.button};
|
background-color: ${themeVars.color.button};
|
||||||
color: ${themeVars.color.text.self};
|
color: ${themeVars.color.text.self};
|
||||||
border-color: ${themeVars.color.light.border};
|
border-color: ${themeVars.color.light.border};
|
||||||
|
box-shadow: none;
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: ${themeVars.color.hover.self};
|
background-color: ${themeVars.color.hover.self};
|
||||||
color: ${themeVars.color.text.self};
|
color: ${themeVars.color.text.self};
|
||||||
@@ -85,6 +87,7 @@ export const redButton = css`
|
|||||||
color: ${themeVars.github.button.danger.fgColor.hover};
|
color: ${themeVars.github.button.danger.fgColor.hover};
|
||||||
background-color: ${themeVars.github.button.danger.bgColor.hover};
|
background-color: ${themeVars.github.button.danger.bgColor.hover};
|
||||||
border-color: ${themeVars.github.button.danger.borderColor.hover};
|
border-color: ${themeVars.github.button.danger.borderColor.hover};
|
||||||
|
box-shadow: ${themeVars.github.shadow.resting.small};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|||||||
@@ -64,7 +64,7 @@ export const darkGithubColors: GithubColor = {
|
|||||||
bgColor: { active: "#2a313c", hover: "#262c36", rest: "#212830" },
|
bgColor: { active: "#2a313c", hover: "#262c36", rest: "#212830" },
|
||||||
transparent: { bgColor: { active: "#656c7640", hover: "#656c7633", selected: "#656c761a" } },
|
transparent: { bgColor: { active: "#656c7640", hover: "#656c7633", selected: "#656c761a" } },
|
||||||
},
|
},
|
||||||
shadow: { floating: { small: "#01040966" } },
|
shadow: { floating: { small: "#01040966" }, resting: { small: "#01040999" } },
|
||||||
overlay: { backdrop: { bgColor: "#21283066" } },
|
overlay: { backdrop: { bgColor: "#21283066" } },
|
||||||
underlineNav: { borderColor: { active: "#f78166" } },
|
underlineNav: { borderColor: { active: "#f78166" } },
|
||||||
contribution: {
|
contribution: {
|
||||||
|
|||||||
@@ -64,7 +64,7 @@ export const lightGithubColors: GithubColor = {
|
|||||||
bgColor: { active: "#e6eaef", hover: "#eff2f5", rest: "#f6f8fa" },
|
bgColor: { active: "#e6eaef", hover: "#eff2f5", rest: "#f6f8fa" },
|
||||||
transparent: { bgColor: { active: "#818b9826", hover: "#818b981a", selected: "#818b9826" } },
|
transparent: { bgColor: { active: "#818b9826", hover: "#818b981a", selected: "#818b9826" } },
|
||||||
},
|
},
|
||||||
shadow: { floating: { small: "#25292e0a" } },
|
shadow: { floating: { small: "#25292e0a" }, resting: { small: "#1f23280f" } },
|
||||||
overlay: { backdrop: { bgColor: "#c8d1da66" } },
|
overlay: { backdrop: { bgColor: "#c8d1da66" } },
|
||||||
underlineNav: { borderColor: { active: "#fd8c73" } },
|
underlineNav: { borderColor: { active: "#fd8c73" } },
|
||||||
contribution: {
|
contribution: {
|
||||||
|
|||||||
@@ -59,7 +59,7 @@ export const softDarkGithubColors: GithubColor = {
|
|||||||
bgColor: { active: "#3d444d", hover: "#2f3742", rest: "#2a313c" },
|
bgColor: { active: "#3d444d", hover: "#2f3742", rest: "#2a313c" },
|
||||||
transparent: { bgColor: { active: "#656c7633", hover: "#656c7626", selected: "#656c761a" } },
|
transparent: { bgColor: { active: "#656c7633", hover: "#656c7626", selected: "#656c761a" } },
|
||||||
},
|
},
|
||||||
shadow: { floating: { small: "#01040966" } },
|
shadow: { floating: { small: "#01040966" }, resting: { small: "#01040999" } },
|
||||||
overlay: { backdrop: { bgColor: "#262c3666" } },
|
overlay: { backdrop: { bgColor: "#262c3666" } },
|
||||||
underlineNav: { borderColor: { active: "#ec775c" } },
|
underlineNav: { borderColor: { active: "#ec775c" } },
|
||||||
contribution: {
|
contribution: {
|
||||||
|
|||||||
Reference in New Issue
Block a user