This commit is contained in:
lutinglt
2025-10-30 22:07:41 +08:00
parent 6ddc5057a4
commit 90b618688b
18 changed files with 190 additions and 71 deletions

View File

@@ -2,7 +2,10 @@
##### 更符合 GitHub 风格
### 🐞 Fix
- 优化用户动态
- 优化顶部导航栏头像
- 优化设置页面
- 优化仓库活动页面
## 📃 English
@@ -10,4 +13,7 @@
##### More aligned with GitHub style
### 🐞 Fix
- Optimized user activity feed
- Optimized top navigation bar avatars
- Optimized settings page
- Optimized repository activity page

View File

@@ -1,6 +1,6 @@
{
"name": "gitea-github-theme",
"version": "1.24.8",
"version": "1.25.0",
"type": "module",
"scripts": {
"dev": "vite build --mode dev",

View File

@@ -36,7 +36,7 @@ export const actions = css`
border-top-right-radius: ${otherThemeVars.border.radius};
padding: 16px;
margin-bottom: 0;
> .item {
> .ui.dropdown {
color: ${themeVars.color.text.light.num1};
}
}
@@ -76,22 +76,25 @@ export const actions = css`
.flex-item {
padding: 16px;
.flex-item-leading {
align-self: flex-start;
margin-top: 2px;
}
.flex-item-main {
gap: 0.5rem;
}
.flex-item-trailing {
justify-content: space-between;
> .ui.label {
border-radius: ${otherThemeVars.border.radius};
margin-left: 32px;
}
> .ui.dropdown.jump {
color: ${themeVars.color.text.light.num1};
&:hover {
color: ${themeVars.color.primary.self};
}
.menu > .item:hover {
color: ${themeVars.color.text.self} !important;
}
}
}
}
@@ -223,17 +226,28 @@ export const actionViewRight = css`
.action-view-right {
/* 提前加载高度和滚动条 */
min-height: calc(100vh - 245px);
// 作业详情页标题
.job-info-header {
padding: 16px 12px 16px 24px;
height: 80px;
.job-info-header-title {
color: ${themeVars.github.fgColor.accent};
padding: 16px 12px 16px 24px !important;
height: 80px !important;
.job-info-header-left {
.job-info-header-title {
color: ${themeVars.github.fgColor.accent} !important;
}
.job-info-header-detail {
margin-top: 8px;
}
}
.job-info-header-detail {
margin-top: 8px;
.job-info-header-right {
.ui.dropdown {
> .button {
border: unset;
padding: 7px !important;
}
.menu > .item > i.icon {
margin-right: 2px;
}
}
}
}
@@ -241,7 +255,7 @@ export const actionViewRight = css`
// 步骤标题
.job-step-summary {
color: ${themeVars.color.console.fg.subtle};
padding: 8px 10px;
padding: 8px 10px !important;
&.selected {
// 滚动时固定在顶部的高度与 job-info-header 高度相同

View File

@@ -28,7 +28,7 @@ export const commit = css`
a.ui.basic.primary.label {
border-radius: 25px;
border-width: 1.5px;
padding: 5px 8px !important;
padding: 3px 8px !important;
}
}
// 提交信息右侧
@@ -67,11 +67,38 @@ export const commit = css`
export const commitStatus = css`
.flex-text-inline[data-global-init="initCommitStatuses"] {
padding: 6px;
padding: 3px;
margin-top: 2px;
border-radius: ${otherThemeVars.border.radius};
&:hover {
background-color: ${themeVars.github.control.transparent.bgColor.hover};
}
svg {
width: 16px;
height: 16px;
min-width: 16px;
min-height: 16px;
}
}
`;
// 提交图
export const commitGraph = css`
.page-content.repository #git-graph-container {
// 提交图的 SHA 标签
li .ui.label.commit-id-short {
height: 25px;
// 验证提交 SHA 标签
&.commit-is-signed {
span.ui.label.commit-is-signed {
height: 25px;
}
}
}
// 提交图的分支选择菜单框
.ui.search.selection.dropdown > .menu > .item {
flex-direction: row;
align-items: center;
}
}
`;

View File

@@ -181,17 +181,18 @@ export const repoFileView = css`
top: 0;
// 左侧文件树
.repo-view-file-tree-container {
height: calc(100vh - 64px); // 减去头部高度
height: 100vh;
// 固定头部
position: sticky;
top: 0;
overflow-y: unset;
&:after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 1px;
height: calc(100% + 64px); // 头部高度
height: 100%;
background: ${themeVars.color.secondary.self};
}
> .repo-button-row {
@@ -282,6 +283,7 @@ export const repoFileView = css`
font-size: 12px;
}
.file-header-right {
gap: 0px;
// 按钮组
> .ui.buttons {
margin: 0 8px 0 0 !important; // 完全不知道为什么浏览器最终效果没生效, 只能 !important 了
@@ -298,12 +300,14 @@ export const repoFileView = css`
align-items: center;
background: ${themeVars.color.button};
border: 1px solid ${themeVars.color.light.border};
border-left-width: 0;
height: 28px;
padding: 0 8px;
svg {
color: ${themeVars.color.text.light.num1};
}
&:first-of-type {
border-left-width: 1px;
border-top-left-radius: ${otherThemeVars.border.radius};
border-bottom-left-radius: ${otherThemeVars.border.radius};
}

View File

@@ -74,7 +74,13 @@ export const activity = css`
box-shadow: ${themeVars.github.shadow.floating.small};
> .flex-item {
gap: 12px;
padding: 12px 8px 16px 14px;
padding: 16px;
> .flex-item-leading {
img {
width: 20px;
height: 20px;
}
}
> .flex-item-main {
gap: 8px !important;
> div:not([class]) {
@@ -82,14 +88,37 @@ export const activity = css`
gap: 8px;
flex-wrap: wrap;
}
relative-time {
> .tw-flex-col {
gap: 0px !important;
> .flex-text-block {
gap: 4px;
font-size: 12px;
color: ${themeVars.color.text.light.num1};
img {
width: 14px;
height: 14px;
}
.ui.sha.label {
margin-top: 0;
}
}
}
> .flex-item-body {
gap: 4px;
font-size: 12px;
color: ${themeVars.color.text.light.num1};
}
> a {
font-size: 12px;
}
}
// 动态的右侧 svg 图标
.flex-item-trailing svg {
height: 20px;
width: 20px;
.flex-item-trailing {
align-self: center;
svg {
height: 18px;
width: 18px;
}
}
}
> .page.buttons {

View File

@@ -73,6 +73,7 @@ export const issueList = css`
> .flex-item {
align-items: center;
padding: 0;
min-height: 64px;
&:last-child {
border-bottom-left-radius: ${otherThemeVars.border.radius};
border-bottom-right-radius: ${otherThemeVars.border.radius};
@@ -80,18 +81,16 @@ export const issueList = css`
&:hover {
background-color: ${themeVars.color.hover.opaque};
}
> .flex-item-icon {
display: flex;
gap: 4px;
> .flex-item-leading {
align-self: flex-start;
margin-top: 14px;
margin-left: 16px;
// 复选框
input {
background: unset;
margin-top: 14px;
margin-right: 8px !important;
}
svg {
margin-top: 14px;
> .flex-text-inline {
margin-top: 0px !important;
// 复选框
input {
margin-right: 8px !important;
}
}
}
> .flex-item-main {

View File

@@ -75,8 +75,7 @@ export const navbarRight = css`
.item.ui.dropdown {
// 头像菜单
&:last-child {
padding-left: 2px; // 调整此选项需同步增减相同的标识的 left
padding-right: 16px;
padding: 0;
.text {
// 不显示小箭头标识
> .not-mobile {
@@ -87,20 +86,12 @@ export const navbarRight = css`
border-radius: 25px;
height: 32px;
max-height: 32px;
margin: 0 !important;
}
}
}
// 用户头像的管理员标识
.navbar-profile-admin {
background-color: ${themeVars.github.bgColor.accent.emphasis};
border-radius: 25px;
border: 2px solid ${themeVars.color.nav.bg};
color: ${themeVars.color.white};
font-size: 9px;
font-weight: 600;
padding: 2px 5px;
top: -7px;
left: 21px;
&.active {
background: unset;
}
}
}
// 通知和计时器的圆点

View File

@@ -90,7 +90,7 @@ export const notification = css`
}
// 通知列表
&:has(#notification_table) {
> .tw-flex:first-child {
> .flex-text-block:first-child {
background-color: ${themeVars.color.box.header};
border: 1px solid ${themeVars.color.light.border};
border-bottom: 0;
@@ -137,7 +137,7 @@ export const notification = css`
color: ${themeVars.color.text.light.num1};
> .notifications-item {
border-top: 1px solid ${themeVars.color.light.border};
padding: 8px !important;
padding: 12px !important;
&:first-child {
border-top: 0;
}
@@ -153,11 +153,11 @@ export const notification = css`
box-shadow: 2px 0 0 ${themeVars.github.borderColor.accent.emphasis} inset;
color: ${themeVars.color.text.self};
}
> .notifications-link {
> .notifications-top-row {
> .notifications-link > div{
&:first-child {
font-size: 12px !important;
}
> .notifications-bottom-row {
&:last-child {
font-size: 14px !important;
}
}

View File

@@ -48,10 +48,14 @@ export const tags = css`
.tag-list-row-title {
line-height: 1.5;
}
.download {
.muted-links {
color: ${themeVars.color.text.light.num1};
font-size: 12px;
a.muted:hover {
svg {
min-width: 12px;
width: 12px;
}
a:hover {
text-decoration: none;
}
}

View File

@@ -74,7 +74,7 @@ export const repoTopic = css`
border-radius: 25px;
font-size: 12px;
font-weight: 500;
padding: 5px 10px;
padding: 2.5px 10px;
background-color: ${themeVars.github.bgColor.accent.muted};
color: ${themeVars.github.fgColor.accent};
&:hover {

View File

@@ -7,6 +7,7 @@ export const attached = css`
.user-setting-content,
.org-setting-content,
.admin-setting-content,
// 仓库动态页面
// 新建页面内容
.page-content.repository.new-repo,
.page-content.repository.new.migrate,
@@ -18,19 +19,45 @@ export const attached = css`
font-weight: 400;
background-color: unset !important;
margin-bottom: 0.25rem;
padding-left: 0;
padding-right: 0;
> .ui.right {
right: 0;
}
}
.ui.attached.segment {
background-color: unset;
border-radius: ${otherThemeVars.border.radius} !important;
}
.ui.attached.segment:not(.error) {
border-top-left-radius: ${otherThemeVars.border.radius} !important;
border-top-right-radius: ${otherThemeVars.border.radius} !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
border: 1px solid ${themeVars.color.light.border} !important;
+ .ui.attached.segment {
border-top: 0 !important;
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
}
&:has(+ :not(.ui.attached.segment)),
&:last-child {
border-bottom-left-radius: ${otherThemeVars.border.radius} !important;
border-bottom-right-radius: ${otherThemeVars.border.radius} !important;
}
}
.ui.attached.segment.error {
border: 1px solid ${themeVars.color.error.border} !important;
}
}
`;
// 仓库活动页面下的边框线修复
export const fixActivity = css`
.page-content.repository.commits .flex-container-main:has(.ui.header.activity-header) {
> .ui.attached.segment {
border-radius: 0;
&:has(+ :not(.ui.attached.segment)) {
border-bottom-left-radius: ${otherThemeVars.border.radius};
border-bottom-right-radius: ${otherThemeVars.border.radius};
}
}
}
`;

7
styles/public/base.ts Normal file
View File

@@ -0,0 +1,7 @@
import { css } from "src/types/vars";
export const body = css`
body {
line-height: 18px;
}
`;

View File

@@ -118,6 +118,7 @@ export const fixButtonHeight = css`
.ui.labeled.button > .label {
height: 28px;
min-height: 28px;
line-height: 1.5;
}
}
.ui.ui.ui.ui.small.button.compact .ui.tiny.buttons .button,

View File

@@ -57,7 +57,7 @@ export const dropdown = css`
}
svg {
margin-top: 2px;
margin-right: 4px;
margin-right: 2px;
}
// 复选框对齐
.ui.checkbox input[type="checkbox"] {

View File

@@ -1,6 +1,7 @@
// organize-imports-ignore
// tslint:disable:ordered-imports
// 组件导入有顺序, 禁止插件优化
import "./base"; // 基础样式, 确保在其他样式之前导入
import "./radius"; // 圆角, 此样式为基础样式, 确保在其他样式之前导入
import "./animation"; // 动画效果
import "./transition"; // 过渡效果

View File

@@ -8,6 +8,7 @@ export const label = css`
&.ui.ui.ui {
&.label {
border-radius: 25px;
padding: 1.5px 6px;
// 多个标签的组合标签的圆角修复
&.scope-parent {
.scope-left {
@@ -99,10 +100,14 @@ export const shaLabel = css`
span.ui.label.commit-is-signed {
padding: 3px 5px;
margin-left: 5px;
height: 25px;
}
}
}
// 修复带验证的提交 SHA 标签的高度
.ui.label.commit-id-short {
height: 25px;
}
// 验证提交附带的图标
span.ui.label.commit-is-signed {
// 验证信任
@@ -181,7 +186,7 @@ export const repoLabel = css`
color: ${themeVars.color.text.light.num1};
font-size: 12px;
font-weight: 500;
padding: 3px 6px;
padding: 1.5px 6px;
}
}
.org-visibility span.ui.basic.label {

View File

@@ -139,6 +139,10 @@ export const menu = css`
}
}
}
// 菜单标签样式
.ui.menu .item>.label:not(.floating) {
padding: 1.5px 6px;
}
`;
export const secondaryMenu = css`