mirror of
https://github.com/lutinglt/gitea-github-theme.git
synced 2025-10-26 13:00:31 +00:00
Compare commits
8 Commits
796c6f1519
...
6c0fd14119
| Author | SHA1 | Date | |
|---|---|---|---|
|
6c0fd14119 | ||
|
|
cb49b12ff0 | ||
|
|
468a97994a | ||
|
|
1986956191 | ||
|
|
979af2a756 | ||
|
|
a34bd93894 | ||
|
|
64684a51da | ||
|
|
e89c26e753 |
7
.github/release.md
vendored
7
.github/release.md
vendored
@@ -2,6 +2,7 @@
|
||||
|
||||
#### CSS 变量
|
||||
|
||||
- 新增 `--custom-branch-menu-width` 变量, 用于设置分支菜单的宽度
|
||||
- 新增 `--custom-user-menu-width` 变量, 用于设置用户菜单的宽度
|
||||
|
||||
### 🌈 Style
|
||||
@@ -19,10 +20,14 @@
|
||||
- 同步里程碑页面样式
|
||||
- 同步顶部工单等仪表板样式
|
||||
- 同步置顶 Issue 样式
|
||||
- 同步订阅页面样式
|
||||
- 同步订阅/关注页面样式
|
||||
- 同步用户菜单样式
|
||||
- 优化下拉菜单样式
|
||||
- 同步差异对比页面文件名标题栏样式
|
||||
- 同步分支菜单宽度
|
||||
- 同步通知页面样式
|
||||
- 优化仪表板的仓库组织切换按钮样式
|
||||
- 同步仓库已标星的星星颜色
|
||||
|
||||
### 🐞 Fix
|
||||
|
||||
|
||||
19
README.md
19
README.md
@@ -100,15 +100,16 @@ THEMES = github-tritanopia-auto, github-tritanopia-light, github-tritanopia-dark
|
||||
|
||||
### CSS 变量
|
||||
|
||||
| 变量名 | 描述 | 默认 | Github | 推荐 | 最小 | 最大 |
|
||||
| :-------------------------------- | :-------------------------- | :---- | :----- | :---- | :------- | :---- |
|
||||
| --custom-clone-menu-width | 克隆按钮的菜单宽度 | Gitea | 332px | 200px | 150px | 400px |
|
||||
| --custom-user-menu-width | 用户菜单的宽度 | 192px | 256px | | 内容宽度 | 320px |
|
||||
| --custom-explore-repolist-columns | 探索页面的仓库列表列数 | 2 | 2 | 2 | | |
|
||||
| --custom-explore-userlist-columns | 探索页面的用户/组织列表列数 | 3 | 1 | 2/3 | | |
|
||||
| --custom-user-repolist-columns | 用户页面的仓库列表列数 | 2 | 2 | 1/2 | | |
|
||||
| --custom-org-repolist-columns | 组织页面的仓库列表列数 | 1 | 1 | 1/2 | | |
|
||||
| --custom-org-userlist-columns | 组织页面的用户列表列数 | 2 | 1 | 1/2 | | |
|
||||
| 变量名 | 描述 | 默认 | Github | 推荐 | 最小 | 最大 |
|
||||
| :-------------------------------- | :-------------------------- | :---- | :----- | :---- | :---- | :---- |
|
||||
| --custom-branch-menu-width | 分支菜单的宽度 | 320px | 320px | 320px | Gitea | 640px |
|
||||
| --custom-clone-menu-width | 克隆按钮的菜单宽度 | Gitea | 332px | 200px | 150px | 400px |
|
||||
| --custom-user-menu-width | 用户菜单的宽度 | 192px | 256px | | Gitea | 320px |
|
||||
| --custom-explore-repolist-columns | 探索页面的仓库列表列数 | 2 | 2 | 2 | | |
|
||||
| --custom-explore-userlist-columns | 探索页面的用户/组织列表列数 | 3 | 1 | 2/3 | | |
|
||||
| --custom-user-repolist-columns | 用户页面的仓库列表列数 | 2 | 2 | 1/2 | | |
|
||||
| --custom-org-repolist-columns | 组织页面的仓库列表列数 | 1 | 1 | 1/2 | | |
|
||||
| --custom-org-userlist-columns | 组织页面的用户列表列数 | 2 | 1 | 1/2 | | |
|
||||
|
||||
## 使用开发中的主题
|
||||
|
||||
|
||||
19
README_EN.md
19
README_EN.md
@@ -104,15 +104,16 @@ Add the following code at the beginning or end of the theme's CSS file
|
||||
|
||||
### CSS Variables
|
||||
|
||||
| Variable Name | Description | Default | Github | Recommend | Min | Max |
|
||||
| :-------------------------------- | :------------------------------------------------------- | :------ | :----- | :-------- | :------------ | :---- |
|
||||
| --custom-clone-menu-width | Clone button menu width | Gitea | 332px | 200px | 150px | 400px |
|
||||
| --custom-user-menu-width | User menu width | 192px | 200px | | Content Width | 320px |
|
||||
| --custom-explore-repolist-columns | Number of repository list columns on explore page | 2 | 2 | 2 | | |
|
||||
| --custom-explore-userlist-columns | Number of user/organization list columns on explore page | 3 | 1 | 2/3 | | |
|
||||
| --custom-user-repolist-columns | Number of repository list columns on user page | 2 | 2 | 1/2 | | |
|
||||
| --custom-org-repolist-columns | Number of repository list columns on organization page | 1 | 1 | 1/2 | | |
|
||||
| --custom-org-userlist-columns | Number of user list columns on organization page | 2 | 1 | 1/2 | | |
|
||||
| Variable Name | Description | Default | Github | Recommend | Min | Max |
|
||||
| :-------------------------------- | :------------------------------------------------------- | :------ | :----- | :-------- | :---- | :---- |
|
||||
| --custom-branch-menu-width | Branch menu width | 320px | 320px | 320px | Gitea | 640px |
|
||||
| --custom-clone-menu-width | Clone button menu width | Gitea | 332px | 200px | 150px | 400px |
|
||||
| --custom-user-menu-width | User menu width | 192px | 200px | | Gitea | 320px |
|
||||
| --custom-explore-repolist-columns | Number of repository list columns on explore page | 2 | 2 | 2 | | |
|
||||
| --custom-explore-userlist-columns | Number of user/organization list columns on explore page | 3 | 1 | 2/3 | | |
|
||||
| --custom-user-repolist-columns | Number of repository list columns on user page | 2 | 2 | 1/2 | | |
|
||||
| --custom-org-repolist-columns | Number of repository list columns on organization page | 1 | 1 | 1/2 | | |
|
||||
| --custom-org-userlist-columns | Number of user list columns on organization page | 2 | 1 | 1/2 | | |
|
||||
|
||||
## Using Development Version of the Theme
|
||||
|
||||
|
||||
@@ -60,6 +60,7 @@ export type GithubColor = {
|
||||
button: {
|
||||
primary: { fgColor: { rest: string }; bgColor: { hover: string } };
|
||||
danger: { fgColor: { rest: string; hover: string }; bgColor: { hover: string } };
|
||||
star: { iconColor: string };
|
||||
};
|
||||
control: {
|
||||
bgColor: { active: string; hover: string; rest: string };
|
||||
@@ -281,6 +282,9 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
|
||||
hover: githubColor.borderColor.translucent,
|
||||
},
|
||||
},
|
||||
star: {
|
||||
iconColor: githubColor.button.star.iconColor,
|
||||
},
|
||||
},
|
||||
control: {
|
||||
bgColor: {
|
||||
|
||||
@@ -37,6 +37,7 @@ export const github = {
|
||||
* @repo `repoTopic` 仓库主题标签背景颜色
|
||||
* @actions `actions` 分支标签按钮背景颜色
|
||||
* @actions `actionViewHeader` 分支标签按钮背景颜色
|
||||
* @notification `notification` 通知列表悬停时的背景颜色
|
||||
*/
|
||||
muted: null,
|
||||
},
|
||||
@@ -62,6 +63,7 @@ export const github = {
|
||||
* @issue `comment` 评论框被选中时的边框颜色
|
||||
* @menu `verticalMenu` 垂直菜单项激活时左侧的伪元素颜色
|
||||
* @dropdown `selectionDropdown` 选择输入框的内部边框颜色
|
||||
* @notification `notification` 通知列表悬停时的左边框颜色
|
||||
*/
|
||||
emphasis: null,
|
||||
},
|
||||
@@ -158,6 +160,10 @@ export const github = {
|
||||
hover: null,
|
||||
},
|
||||
},
|
||||
star: {
|
||||
/** 已标星的星星颜色 */
|
||||
iconColor: null,
|
||||
},
|
||||
},
|
||||
control: {
|
||||
bgColor: {
|
||||
@@ -180,6 +186,7 @@ export const github = {
|
||||
* @issue `issueSidebar` 操作按钮的悬停背景颜色
|
||||
* @issue `issueList` 头部菜单左侧开启关闭菜单的悬停背景颜色
|
||||
* @dashboard `dashboard` 仓库列表项目的悬停背景颜色
|
||||
* @notification `notification` 通知列表的按钮悬停背景颜色
|
||||
*/
|
||||
hover: null,
|
||||
},
|
||||
|
||||
@@ -33,6 +33,7 @@ const vars = {
|
||||
const otherVars = { border: { radius: null }, color: { ...color.otherAuto } };
|
||||
|
||||
const customVars = {
|
||||
branchMenuWidth: "branch-menu-width",
|
||||
cloneMenuWidth: "clone-menu-width",
|
||||
userMenuWidth: "user-menu-width",
|
||||
explore: { repolistColumns: "explore-repolist-columns", userlistColumns: "explore-userlist-columns" },
|
||||
|
||||
@@ -5,16 +5,28 @@ export const dashboard = css`
|
||||
.page-content.dashboard.feeds {
|
||||
// 仓库列表的仓库/组织切换按钮
|
||||
.ui.two.item.menu {
|
||||
box-shadow: ${themeVars.github.shadow.floating.small};
|
||||
border: unset;
|
||||
background: ${themeVars.color.hover.self};
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 8px;
|
||||
> .item {
|
||||
&:first-child {
|
||||
border-radius: 12px 0 0 12px;
|
||||
background: unset;
|
||||
border-radius: 12px;
|
||||
padding: 6px 12px !important;
|
||||
&.active {
|
||||
background: ${themeVars.color.menu};
|
||||
box-shadow: ${themeVars.github.shadow.floating.small};
|
||||
font-weight: 600;
|
||||
}
|
||||
&:last-child {
|
||||
border-radius: 0 12px 12px 0;
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
&:not(.active) {
|
||||
margin: 4px !important;
|
||||
width: calc(50% - 8px);
|
||||
&:hover {
|
||||
background: ${themeVars.github.control.transparent.bgColor.hover};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -66,6 +78,7 @@ export const dashboard = css`
|
||||
}
|
||||
`;
|
||||
|
||||
// 导航栏的工单/PR/里程碑仪表板
|
||||
export const dashboardIssues = css`
|
||||
.page-content.dashboard.issues {
|
||||
.list-header {
|
||||
|
||||
@@ -10,7 +10,7 @@ export const branchButton = css`
|
||||
border: 1px solid ${themeVars.color.light.border};
|
||||
margin-top: 1px;
|
||||
margin-left: auto;
|
||||
margin-right: 16px; // gitea 有 RSS 留出足够的空间
|
||||
margin-right: 20px; // gitea 有 RSS 留出足够的空间
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -374,7 +374,7 @@ export const repoSidebarTop = css`
|
||||
.flex-item {
|
||||
padding: 10px 0 0 0;
|
||||
.flex-item-title {
|
||||
margin-top: 2px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.flex-item-body {
|
||||
padding: 8px 0 0 0;
|
||||
|
||||
@@ -4,6 +4,48 @@ import { css, otherThemeVars, themeVars } from "src/types/vars";
|
||||
export const notification = css`
|
||||
.page-content.user.notification {
|
||||
> .ui.container {
|
||||
// 应只选中订阅/关注页面, 不能选中通知页面
|
||||
&:has(.flex-list) {
|
||||
// 订阅/关注切换菜单
|
||||
.ui.compact.small.menu.small-menu-items {
|
||||
background: ${themeVars.color.hover.self} !important;
|
||||
border: 0;
|
||||
font-size: 14px;
|
||||
gap: 8px;
|
||||
> .item {
|
||||
background: unset !important;
|
||||
border: 1px solid ${themeVars.color.hover.self};
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
padding: 6px 12px !important;
|
||||
&.active {
|
||||
background: ${themeVars.color.menu} !important;
|
||||
border-color: ${themeVars.color.light.border};
|
||||
font-weight: 600;
|
||||
}
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
&:not(.active) {
|
||||
// padding 纵向数值 + top 数值 = 8px 就居中
|
||||
// 不明白啥原理, 反正 height 设为 100% 就可以了
|
||||
top: 4px;
|
||||
padding: 4px 12px !important;
|
||||
height: 100%;
|
||||
// 该方案只适用于 2 个 item 的情况
|
||||
// left / right 数值为 gap 数值的一半
|
||||
&:first-child {
|
||||
left: 4px;
|
||||
}
|
||||
&:last-child {
|
||||
right: 4px;
|
||||
}
|
||||
&:hover {
|
||||
background: ${themeVars.github.control.transparent.bgColor.hover} !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .ui.attached.segment {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
@@ -57,6 +99,122 @@ export const notification = css`
|
||||
}
|
||||
}
|
||||
}
|
||||
// 关注列表
|
||||
> .flex-list:not([id]) {
|
||||
border: 1px solid ${themeVars.color.light.border};
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
> .flex-item {
|
||||
padding: 16px;
|
||||
> .flex-item-main {
|
||||
gap: 4px;
|
||||
> .flex-item-header {
|
||||
> .flex-item-title {
|
||||
gap: 12px;
|
||||
}
|
||||
> .flex-item-trailing {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
gap: 16px;
|
||||
.color-icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .flex-item-body:last-child {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 通知列表
|
||||
&:has(#notification_table) {
|
||||
> .tw-flex:first-child {
|
||||
background-color: ${themeVars.color.box.header};
|
||||
border: 1px solid ${themeVars.color.light.border};
|
||||
border-bottom: 0;
|
||||
border-top-left-radius: ${otherThemeVars.border.radius};
|
||||
border-top-right-radius: ${otherThemeVars.border.radius};
|
||||
height: 52px;
|
||||
padding: 8px;
|
||||
margin-bottom: 0 !important;
|
||||
// 左侧菜单
|
||||
> .ui.compact.menu {
|
||||
align-items: center;
|
||||
border: 0;
|
||||
> .item {
|
||||
background: unset !important;
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
padding: 0px 8px;
|
||||
height: 30px;
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
&:hover {
|
||||
background: ${themeVars.github.control.transparent.bgColor.hover} !important;
|
||||
}
|
||||
&.active {
|
||||
color: ${themeVars.color.text.self};
|
||||
font-weight: 700;
|
||||
}
|
||||
.notifications-unread-count {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 通知全部确认按钮
|
||||
.ui.ui.ui.ui.mini.button {
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
// 通知列表
|
||||
#notification_table {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
> .notifications-item {
|
||||
border-top: 1px solid ${themeVars.color.light.border};
|
||||
padding: 8px !important;
|
||||
&:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
&:last-child {
|
||||
border-bottom-left-radius: ${otherThemeVars.border.radius};
|
||||
border-bottom-right-radius: ${otherThemeVars.border.radius};
|
||||
}
|
||||
&:hover {
|
||||
background: ${themeVars.github.bgColor.accent.muted};
|
||||
box-shadow: 2px 0 0 ${themeVars.github.borderColor.accent.emphasis} inset;
|
||||
color: ${themeVars.color.text.self};
|
||||
}
|
||||
> .notifications-link {
|
||||
> .notifications-top-row {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
> .notifications-bottom-row {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
}
|
||||
> .notifications-updated {
|
||||
font-size: 12px;
|
||||
}
|
||||
> .notifications-buttons {
|
||||
.interact-bg {
|
||||
background: ${themeVars.github.bgColor.accent.muted} !important;
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
padding: 8px !important;
|
||||
&:hover {
|
||||
background: ${themeVars.github.control.transparent.bgColor.hover} !important;
|
||||
color: ${themeVars.color.text.self};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -41,101 +41,108 @@ export const tags = css`
|
||||
// 发布页样式
|
||||
export const releases = css`
|
||||
.page-content.repository.releases {
|
||||
#release-list .release-entry {
|
||||
// 左侧发布元信息
|
||||
.meta {
|
||||
gap: 0.5rem;
|
||||
padding-top: 24px;
|
||||
padding-right: 40px;
|
||||
text-align: left;
|
||||
min-width: 0;
|
||||
flex: 0.125;
|
||||
a.muted {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
word-break: break-all;
|
||||
svg {
|
||||
margin-right: 8px !important;
|
||||
}
|
||||
svg.tw-mr-1.svg.octicon-tag {
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
// 分支选择按钮
|
||||
.ui.button.branch-dropdown-button {
|
||||
min-height: 20px;
|
||||
line-height: 20px;
|
||||
padding: 3px 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
// 右侧发布详细信息
|
||||
.segment.detail {
|
||||
padding: 16px;
|
||||
.svg {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
// 标题
|
||||
.release-list-title {
|
||||
font-size: 32px;
|
||||
gap: 16px;
|
||||
}
|
||||
// 提交信息
|
||||
p.text.grey {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
margin: 24px 0 0 0;
|
||||
span {
|
||||
word-break: break-word;
|
||||
}
|
||||
.time {
|
||||
color: ${themeVars.color.text.self};
|
||||
}
|
||||
}
|
||||
// 发布内容
|
||||
.markup {
|
||||
> *:first-child {
|
||||
margin-top: 24px !important;
|
||||
}
|
||||
}
|
||||
// 分割线
|
||||
.divider {
|
||||
position: relative;
|
||||
left: -16px;
|
||||
width: calc(100% + 32px);
|
||||
border-top-width: 1.5px;
|
||||
margin: 24px 0 16px 0;
|
||||
}
|
||||
// 下载列表
|
||||
.download {
|
||||
summary {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-top: 16px;
|
||||
&::marker {
|
||||
font-size: 14px;
|
||||
> .ui.container > .divider {
|
||||
margin: 14px 0;
|
||||
}
|
||||
ul#release-list {
|
||||
gap: 32px;
|
||||
margin: 32px 0 16px 0;
|
||||
.release-entry {
|
||||
// 左侧发布元信息
|
||||
.meta {
|
||||
gap: 0.5rem;
|
||||
padding-top: 24px;
|
||||
padding-right: 40px;
|
||||
text-align: left;
|
||||
min-width: 0;
|
||||
flex: 0.125;
|
||||
a.muted {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
word-break: break-all;
|
||||
svg {
|
||||
margin-right: 8px !important;
|
||||
}
|
||||
svg.tw-mr-1.svg.octicon-tag {
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
.attachment-list {
|
||||
margin-top: 16px;
|
||||
.item {
|
||||
align-items: center;
|
||||
line-height: 17px;
|
||||
padding: 8px 16px;
|
||||
.flex-text-inline {
|
||||
gap: 8px;
|
||||
// 分支选择按钮
|
||||
.ui.button.branch-dropdown-button {
|
||||
min-height: 20px;
|
||||
line-height: 20px;
|
||||
padding: 3px 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
// 右侧发布详细信息
|
||||
.segment.detail {
|
||||
padding: 16px;
|
||||
.svg {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
// 标题
|
||||
.release-list-title {
|
||||
font-size: 32px;
|
||||
gap: 16px;
|
||||
}
|
||||
// 提交信息
|
||||
p.text.grey {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
margin: 24px 0 0 0;
|
||||
span {
|
||||
word-break: break-word;
|
||||
}
|
||||
.time {
|
||||
color: ${themeVars.color.text.self};
|
||||
}
|
||||
}
|
||||
// 发布内容
|
||||
.markup {
|
||||
> *:first-child {
|
||||
margin-top: 24px !important;
|
||||
}
|
||||
}
|
||||
// 分割线
|
||||
.divider {
|
||||
position: relative;
|
||||
left: -16px;
|
||||
width: calc(100% + 32px);
|
||||
border-top-width: 1.5px;
|
||||
margin: 24px 0 16px 0;
|
||||
}
|
||||
// 下载列表
|
||||
.download {
|
||||
summary {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-top: 16px;
|
||||
&::marker {
|
||||
font-size: 14px;
|
||||
}
|
||||
// 只选中左侧文件名称
|
||||
strong.flex-text-inline:hover {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
.attachment-right-info {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
.svg {
|
||||
height: 28px;
|
||||
}
|
||||
.attachment-list {
|
||||
margin-top: 16px;
|
||||
.item {
|
||||
align-items: center;
|
||||
line-height: 17px;
|
||||
padding: 8px 16px;
|
||||
.flex-text-inline {
|
||||
gap: 8px;
|
||||
}
|
||||
// 只选中左侧文件名称
|
||||
strong.flex-text-inline:hover {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
.attachment-right-info {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
.svg {
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -97,13 +97,19 @@ export const fixButtonHeight = css`
|
||||
min-height: 26px;
|
||||
height: 32px;
|
||||
}
|
||||
// 修复因上面小按钮高度导致仓库星标克隆等按钮高度过高
|
||||
.ui.labeled.button > .label,
|
||||
.ui.ui.ui.ui.small.button.compact {
|
||||
height: 28px;
|
||||
min-height: 28px;
|
||||
// 修复仓库页仓库操作按钮高度对齐和修正
|
||||
.repo-button-row .ui.button {
|
||||
min-height: 32px;
|
||||
}
|
||||
.ui.tiny.buttons .button,
|
||||
// 修复因上面小按钮高度导致仓库星标克隆等按钮高度过高
|
||||
.repo-header {
|
||||
.ui.ui.ui.ui.small.compact.button,
|
||||
.ui.labeled.button > .label {
|
||||
height: 28px;
|
||||
min-height: 28px;
|
||||
}
|
||||
}
|
||||
.ui.ui.ui.ui.small.button.compact .ui.tiny.buttons .button,
|
||||
.ui.ui.ui.ui.tiny.button {
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { animationDown, animationUp } from "src/core/theme";
|
||||
import { css, otherThemeVars, themeVars } from "src/types/vars";
|
||||
import { fallbackVar } from "src/functions";
|
||||
import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars";
|
||||
import { activeItemAfterStyle } from "styles/public/menu";
|
||||
|
||||
export const dropdown = css`
|
||||
@@ -65,14 +66,14 @@ export const dropdown = css`
|
||||
// 向下弹出的下拉菜单向下偏移
|
||||
.ui.dropdown:not(.upward),
|
||||
.ui.menu .ui.dropdown:not(.upward) {
|
||||
.menu {
|
||||
> .menu {
|
||||
margin-top: 4px !important;
|
||||
}
|
||||
}
|
||||
// 向上弹出的下拉菜单向上偏移
|
||||
.ui.dropdown.upward,
|
||||
.ui.menu .ui.dropdown.upward {
|
||||
.menu {
|
||||
> .menu {
|
||||
animation: ${animationUp};
|
||||
margin-bottom: 4px !important;
|
||||
}
|
||||
@@ -194,8 +195,12 @@ export const fixSelectionDropdown = css`
|
||||
|
||||
// 分支菜单
|
||||
export const branchDropdown = css`
|
||||
.ui.dropdown.branch-selector-dropdown .menu > .item {
|
||||
animation: ${animationDown};
|
||||
.ui.dropdown.branch-selector-dropdown > .menu {
|
||||
width: ${fallbackVar(customThemeVars.branchMenuWidth, "320px")};
|
||||
max-width: 640px;
|
||||
> .menu > .item {
|
||||
animation: ${animationDown};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { css } from "src/types/vars";
|
||||
import { css, themeVars } from "src/types/vars";
|
||||
|
||||
// 一些列表头, 比如工单的搜索标签里程碑栏
|
||||
export const listHeader = css`
|
||||
@@ -7,3 +7,10 @@ export const listHeader = css`
|
||||
align-content: center;
|
||||
}
|
||||
`;
|
||||
|
||||
// 已标星的图标
|
||||
export const star = css`
|
||||
.octicon-star-fill {
|
||||
color: ${themeVars.github.button.star.iconColor} !important;
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -30,6 +30,7 @@ export const colorblindDarkGithubColors: GithubColor = {
|
||||
button: {
|
||||
primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#2a7aef" } },
|
||||
danger: { fgColor: { rest: "#f0883e", hover: "#ffffff" }, bgColor: { hover: "#9b4215" } },
|
||||
star: darkGithubColors.button.star,
|
||||
},
|
||||
control: darkGithubColors.control,
|
||||
shadow: darkGithubColors.shadow,
|
||||
|
||||
@@ -30,6 +30,7 @@ export const colorblindLightGithubColors: GithubColor = {
|
||||
button: {
|
||||
primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#0864d1" } },
|
||||
danger: { fgColor: { rest: "#bc4c00", hover: "#ffffff" }, bgColor: { hover: "#bc4c00" } },
|
||||
star: lightGithubColors.button.star,
|
||||
},
|
||||
control: lightGithubColors.control,
|
||||
shadow: lightGithubColors.shadow,
|
||||
|
||||
@@ -56,6 +56,7 @@ export const darkGithubColors: GithubColor = {
|
||||
button: {
|
||||
primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#29903b" } },
|
||||
danger: { fgColor: { rest: "#fa5e55", hover: "#ffffff" }, bgColor: { hover: "#b62324" } },
|
||||
star: { iconColor: "#e3b341" },
|
||||
},
|
||||
control: {
|
||||
bgColor: { active: "#2a313c", hover: "#262c36", rest: "#212830" },
|
||||
|
||||
@@ -56,6 +56,7 @@ export const lightGithubColors: GithubColor = {
|
||||
button: {
|
||||
primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#1c8139" } },
|
||||
danger: { fgColor: { rest: "#d1242f", hover: "#ffffff" }, bgColor: { hover: "#cf222e" } },
|
||||
star: { iconColor: "#eac54f" },
|
||||
},
|
||||
control: {
|
||||
bgColor: { active: "#e6eaef", hover: "#eff2f5", rest: "#f6f8fa" },
|
||||
|
||||
@@ -51,6 +51,7 @@ export const softDarkGithubColors: GithubColor = {
|
||||
button: {
|
||||
primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#3b8640" } },
|
||||
danger: { fgColor: { rest: "#ea5c53", hover: "#ffffff" }, bgColor: { hover: "#ad2e2c" } },
|
||||
star: { iconColor: "#daaa3f" },
|
||||
},
|
||||
control: {
|
||||
bgColor: { active: "#3d444d", hover: "#2f3742", rest: "#2a313c" },
|
||||
|
||||
Reference in New Issue
Block a user