github-mirror/gitea-github-theme
1
0 Fork 0
mirror of https://github.com/lutinglt/gitea-github-theme.git synced 2026-10-28 09:44:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adaptation for version 1.26

Browse Source
This commit is contained in:
lutinglt committed 2026-04-28 23:14:57 +08:00
1 parent c130e6c778
commit 729fe3615b
149 files changed
+6349 -2896
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.env.example
+3 -1
View File
@@ -7,4 +7,6 @@ SSH_USER=root
# 上传到服务器的主题路径, 请使用绝对路径 # 上传到服务器的主题路径, 请使用绝对路径
GITEA_THEME_PATH=/data/gitea/public/assets/css/ GITEA_THEME_PATH=/data/gitea/public/assets/css/
# Gitea 数据路径, 用于上传到服务器的模板路径, 请使用绝对路径 # Gitea 数据路径, 用于上传到服务器的模板路径, 请使用绝对路径
GITEA_PATH=/data/gitea/ GITEA_PATH=/data/gitea/
# 是否同步模板文件
SYNC_TMPL=false
.gitattributes
+9 -1
View File
@@ -1 +1,9 @@
*.tmpl linguist-language=Handlebars *.tmpl linguist-language=Handlebars
# 忽略非项目代码统计
.github/* linguist-vendored
.vscode/* linguist-vendored
gitea/* linguist-vendored
screenshots/* linguist-vendored
scripts/* linguist-vendored
eslint.config.js linguist-vendored
.github/CHANGELOG.md
Vendored
+3 -13
View File
@@ -2,24 +2,14 @@
### ✨ Feature ### ✨ Feature
#### CSS 变量 #### CSS Variable
### 🌈 Style ### 🌈 Style
#### 更符合 GitHub 风格 #### Adaptation for version 1.26
##### 模板文件
### 🐞 Fix
## 📃 English
#### CSS Variable
#### More GitHub-like style #### More GitHub-like style
##### Template File ##### Template File
```text ### 🐞 Fix
在 English 下方补充上面 Feature 以下部分的内容的中译英​
```
.github/workflows/release.yml
+3 -3
View File
@@ -13,17 +13,17 @@ jobs:
- uses: actions/checkout@v4 - uses: actions/checkout@v4
- name: Build theme - name: Build theme
run: | run: |
npm run install:vite8 npm install
npm run release npm run release
- name: Create release - name: Create release
run: | run: |
tar -zcf dist/theme-github-base.tar.gz --remove-files \ tar -zcf dist/theme-github-base.tar.gz --remove-files \
dist/theme-github-auto.css dist/theme-github-light.css dist/theme-github-dark.css dist/theme-github-soft-dark.css dist/theme-github-auto.css dist/theme-github-light.css dist/theme-github-dark.css dist/theme-github-soft-dark.css
tar -zcf dist/theme-github-colorblindness-colorblind.tar.gz --remove-files \ tar -zcf dist/theme-github-colorblind-protanopia-deuteranopia.tar.gz --remove-files \
dist/theme-github-colorblind-auto.css dist/theme-github-colorblind-light.css dist/theme-github-colorblind-dark.css dist/theme-github-colorblind-auto.css dist/theme-github-colorblind-light.css dist/theme-github-colorblind-dark.css
tar -zcf dist/theme-github-colorblindness-tritanopia.tar.gz --remove-files \ tar -zcf dist/theme-github-colorblind-tritanopia.tar.gz --remove-files \
dist/theme-github-tritanopia-auto.css dist/theme-github-tritanopia-light.css dist/theme-github-tritanopia-dark.css dist/theme-github-tritanopia-auto.css dist/theme-github-tritanopia-light.css dist/theme-github-tritanopia-dark.css
tar -zcf dist/theme-github-extra-pink.tar.gz --remove-files \ tar -zcf dist/theme-github-extra-pink.tar.gz --remove-files \
CHANGELOG.md
+32 -2
View File
@@ -1,9 +1,39 @@
### ✨ Feature
- Adapt the theme color identification and color blindness identification to the new version of Gitea.
- The theme name for red-green color blindness has been synchronized with GitHub, providing a more accurate display of
the name.
### 🌈 Style ### 🌈 Style
#### Adaptation for version 1.26
- Synchronize avatar administrator logo. #29
- Synchronize workflow graph page style.
- Synchronize the grid color of the transparent part in the SVG background.
- Link color of the synchronous workflow log page.
- Optimize the style of the actions page.
- Synchronization shortcut key prompt style.
- Synchronize the style of the pop-up window for file search results in the repository.
#### More aligned with GitHub style #### More aligned with GitHub style
- Fine-tune the style of the navigation bar. - Optimize the style of checkboxes and radiobuttons. #29
- Optimize the border shadow effect of the dashboard.
- Synchronize the border shadow of the log panel on the workflow details page.
- Synchronize the input box shadows.
- Synchronized toggle button style.
- Optimize code highlighting color.
- Synchronized manual triggering of workflow pop-up style.
- Optimize the style of the page when opening the warehouse file.
- Synchronize the style of list items when they are selected in the Issue & PR list.
- Synchronize button colors when the mouse is hovering and when it is clicked.
### 🐞 Fix ### 🐞 Fix
- Fix no auto-focus of search filter on issue/PR properties. #27 - Fix the style of the PR page creation. #27
- Fix the redundant shadow and animation of the "Switch User" button on the dashboard.
- Fix the border of the self-check panel in the maintenance panel in the management settings.
- Fix the issue of excessively wide branch menu width on the mobile page.
- Fix the issue of the step list width being too narrow on the workflow details page under the mobile page.
- Fix the color change logic of buttons in the pink theme when interacting in bright mode.
NOTICE
+7
View File
@@ -0,0 +1,7 @@
Gitea GitHub Theme
Copyright 2024-2026 https://github.com/lutinglt
This product includes software developed by https://github.com/lutinglt.
This project is licensed under the Apache License, Version 2.0.
See the LICENSE file in the root directory for the full license text.
README.md
+1 -12
View File
@@ -33,17 +33,6 @@ For example: Theme version `1.24.5` is applicable to Gitea versions `>=1.24.0` `
Only the latest released Gitea version is maintained. Issues and PRs for other older theme versions will not be Only the latest released Gitea version is maintained. Issues and PRs for other older theme versions will not be
accepted. accepted.
> Development stage theme version number format: `1.major.minor.timestamp`
### Theme Version Release Rules
- When Gitea releases a minor version, if there are changes in the theme, a new theme version with the same minor
version as Gitea will be released
- When Gitea releases a major version, if there are changes in the theme, a theme version `1.old_major_version.latest`
will be released and the old version will no longer be maintained
- The pre-release version for major version adaptation is `1.major_version.rc`, and when there are no obvious bugs, a
theme version with the same major version as Gitea will be released
## Installation ## Installation
1. Download the latest CSS theme file from the release page and place it in the `data/gitea/public/assets/css` directory 1. Download the latest CSS theme file from the release page and place it in the `data/gitea/public/assets/css` directory
@@ -78,7 +67,7 @@ For details, please refer to the Gitea documentation
> [!IMPORTANT] > [!IMPORTANT]
> >
> The template modifies Gitea's layout to make it closer to GitHub's layout. Do not use template files across versions, > The template modifies Gitea's layout to make it closer to GitHub's layout. Do not use template files across versions,
> as this may lead to missing functionality and other issues. > as this may lead to missing functionality, Gitea instance failing to start, and other issues.
> >
> Template layout is bound to the Gitea instance and will affect all themes, impacting the experience of other > Template layout is bound to the Gitea instance and will affect all themes, impacting the experience of other
> non-project themes. > non-project themes.
README_CN.md
+2 -9
View File
@@ -31,14 +31,6 @@ Gitea 理论上小版本号变更不会修改前端布局, 所以主题的小版
仅维护项目发布中的最新的 Gitea 版本, 其他旧版本主题不接受 Issue 和 PR. 仅维护项目发布中的最新的 Gitea 版本, 其他旧版本主题不接受 Issue 和 PR.
> 开发阶段的主题版本号格式: `1.大版本号.小版本号.时间戳`
### 主题版本发布规则
- 当 Gitea 发布小版本时, 主题中间如有变更, 则发布新的和 Gitea 小版本相同的主题版本
- 当 Gitea 发布大版本时, 主题中间如有变更, 会发布 `1.旧大版本号.latest` 的主题版本并不再维护旧版本
- 适配大版本的预发布版本为 `1.大版本号.rc`, 当无明显 BUG 时发布与 Gitea 大版本相同的主题版本
## 安装 ## 安装
1. 在发布页下载最新的 CSS 主题文件放入 `data/gitea/public/assets/css` 目录下 (默认可能没有此目录需手动创建) 1. 在发布页下载最新的 CSS 主题文件放入 `data/gitea/public/assets/css` 目录下 (默认可能没有此目录需手动创建)
@@ -69,7 +61,8 @@ THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github-
> [!IMPORTANT] > [!IMPORTANT]
> >
> 模板修改了 Gitea 的布局, 使其更接近 GitHub 的布局, 请勿跨版本使用模板文件, 可能会导致功能缺失等问题 > 模板修改了 Gitea 的布局, 使其更接近 GitHub 的布局, 请勿跨版本使用模板文件, 可能会导致功能缺失,
> Gitea 实例无法启动等问题
> >
> 模板布局跟 Gitea 实例绑定, 所有主题都会生效, 会影响其他非本项目的主题的体验 > 模板布局跟 Gitea 实例绑定, 所有主题都会生效, 会影响其他非本项目的主题的体验
eslint.config.js
Vendored
+19
View File
@@ -1,3 +1,22 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import js from "@eslint/js"; import js from "@eslint/js";
import { defineConfig } from "eslint/config"; import { defineConfig } from "eslint/config";
import globals from "globals"; import globals from "globals";
gitea/README.md
Vendored
-1
View File
@@ -1 +0,0 @@
模板的原始文件
gitea/templates/base/head_navbar.tmpl
+21 -19
View File
@@ -1,7 +1,7 @@
<nav id="navbar" aria-label="{{ctx.Locale.Tr "aria.navbar"}}"> <nav id="navbar" aria-label="{{ctx.Locale.Tr "aria.navbar"}}">
<div class="navbar-left"> <div class="navbar-left">
<!-- the logo --> <!-- the logo -->
<a class="item" id="navbar-logo" href="{{AppSubUrl}}/" aria-label="{{if .IsSigned}}{{ctx.Locale.Tr "dashboard"}}{{else}}{{ctx.Locale.Tr "home"}}{{end}}"> <a class="item" id="navbar-logo" href="{{AppSubUrl}}/" aria-label="{{if .IsSigned}}{{ctx.Locale.Tr "dashboard"}}{{else}}{{ctx.Locale.Tr "home_title"}}{{end}}">
<img width="30" height="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.Locale.Tr "logo"}}" aria-hidden="true"> <img width="30" height="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.Locale.Tr "logo"}}" aria-hidden="true">
</a> </a>
@@ -26,17 +26,17 @@
<a class="item{{if .PageIsMilestonesDashboard}} active{{end}}" href="{{AppSubUrl}}/milestones">{{ctx.Locale.Tr "milestones"}}</a> <a class="item{{if .PageIsMilestonesDashboard}} active{{end}}" href="{{AppSubUrl}}/milestones">{{ctx.Locale.Tr "milestones"}}</a>
{{end}} {{end}}
{{end}} {{end}}
<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/repos">{{ctx.Locale.Tr "explore"}}</a> <a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/repos">{{ctx.Locale.Tr "explore_title"}}</a>
{{else if .IsLandingPageOrganizations}} {{else if .IsLandingPageOrganizations}}
<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/organizations">{{ctx.Locale.Tr "explore"}}</a> <a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/organizations">{{ctx.Locale.Tr "explore_title"}}</a>
{{else}} {{else}}
<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/repos">{{ctx.Locale.Tr "explore"}}</a> <a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/repos">{{ctx.Locale.Tr "explore_title"}}</a>
{{end}} {{end}}
{{template "custom/extra_links" .}} {{template "custom/extra_links" .}}
{{if not .IsSigned}} {{if not .IsSigned}}
<a class="item" target="_blank" rel="noopener noreferrer" href="https://docs.gitea.com">{{ctx.Locale.Tr "help"}}</a> <a class="item" target="_blank" href="https://docs.gitea.com">{{ctx.Locale.Tr "help"}}</a>
{{end}} {{end}}
</div> </div>
@@ -47,7 +47,7 @@
<span class="text"> <span class="text">
{{ctx.AvatarUtils.Avatar .SignedUser 24 "tw-mr-1"}} {{ctx.AvatarUtils.Avatar .SignedUser 24 "tw-mr-1"}}
<span class="only-mobile">{{.SignedUser.Name}}</span> <span class="only-mobile">{{.SignedUser.Name}}</span>
<span class="not-mobile">{{svg "octicon-triangle-down"}}</span> <span class="not-mobile flex-text-block">{{svg "octicon-triangle-down"}}</span>
</span> </span>
<div class="menu user-menu"> <div class="menu user-menu">
<div class="header"> <div class="header">
@@ -55,7 +55,7 @@
</div> </div>
<div class="divider"></div> <div class="divider"></div>
<a class="item link-action" href data-url="{{AppSubUrl}}/user/logout"> <a class="item" href="{{AppSubUrl}}/user/logout">
{{svg "octicon-sign-out"}} {{svg "octicon-sign-out"}}
{{ctx.Locale.Tr "sign_out"}} {{ctx.Locale.Tr "sign_out"}}
</a> </a>
@@ -64,9 +64,9 @@
{{else if .IsSigned}} {{else if .IsSigned}}
{{template "base/head_navbar_icons" dict "ItemExtraClass" "not-mobile" "PageGlobalData" .PageGlobalData}} {{template "base/head_navbar_icons" dict "ItemExtraClass" "not-mobile" "PageGlobalData" .PageGlobalData}}
<div class="ui dropdown jump item" data-tooltip-content="{{ctx.Locale.Tr "create_new"}}"> <div class="ui dropdown jump item" data-tooltip-content="{{ctx.Locale.Tr "create_new"}}">
<span class="text"> <span class="flex-text-block">
{{svg "octicon-plus"}} {{svg "octicon-plus"}}
<span class="not-mobile">{{svg "octicon-triangle-down"}}</span> <span class="not-mobile flex-text-block">{{svg "octicon-triangle-down"}}</span>
<span class="only-mobile">{{ctx.Locale.Tr "create_new"}}</span> <span class="only-mobile">{{ctx.Locale.Tr "create_new"}}</span>
</span> </span>
<div class="menu"> <div class="menu">
@@ -87,10 +87,13 @@
</div><!-- end dropdown menu create new --> </div><!-- end dropdown menu create new -->
<div class="ui dropdown jump item" data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}"> <div class="ui dropdown jump item" data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}">
<span class="text"> <span class="text tw-flex tw-items-center">
{{ctx.AvatarUtils.Avatar .SignedUser 24 "tw-mr-1"}} <span class="navbar-avatar">
{{ctx.AvatarUtils.Avatar .SignedUser 24 "tw-mr-2"}}
{{if .IsAdmin}}{{svg "octicon-shield-check" 16 "navbar-admin-badge"}}{{end}}
</span>
<span class="only-mobile">{{.SignedUser.Name}}</span> <span class="only-mobile">{{.SignedUser.Name}}</span>
<span class="not-mobile">{{svg "octicon-triangle-down"}}</span> <span class="not-mobile flex-text-block">{{svg "octicon-triangle-down"}}</span>
</span> </span>
<div class="menu user-menu"> <div class="menu user-menu">
<div class="header"> <div class="header">
@@ -116,7 +119,7 @@
{{svg "octicon-tools"}} {{svg "octicon-tools"}}
{{ctx.Locale.Tr "your_settings"}} {{ctx.Locale.Tr "your_settings"}}
</a> </a>
<a class="item" target="_blank" rel="noopener noreferrer" href="https://docs.gitea.com"> <a class="item" target="_blank" href="https://docs.gitea.com">
{{svg "octicon-question"}} {{svg "octicon-question"}}
{{ctx.Locale.Tr "help"}} {{ctx.Locale.Tr "help"}}
</a> </a>
@@ -128,7 +131,7 @@
</a> </a>
{{end}} {{end}}
<div class="divider"></div> <div class="divider"></div>
<a class="item link-action" href data-url="{{AppSubUrl}}/user/logout"> <a class="item" href="{{AppSubUrl}}/user/logout">
{{svg "octicon-sign-out"}} {{svg "octicon-sign-out"}}
{{ctx.Locale.Tr "sign_out"}} {{ctx.Locale.Tr "sign_out"}}
</a> </a>
@@ -141,7 +144,7 @@
<span class="tw-ml-1">{{ctx.Locale.Tr "register"}}</span> <span class="tw-ml-1">{{ctx.Locale.Tr "register"}}</span>
</a> </a>
{{end}} {{end}}
<a class="item{{if .PageIsSignIn}} active{{end}}" rel="nofollow" href="{{AppSubUrl}}/user/login{{if not .PageIsSignIn}}?redirect_to={{.CurrentURL}}{{end}}"> <a class="item{{if .PageIsSignIn}} active{{end}}" rel="nofollow" href="{{AppSubUrl}}/user/login">
{{svg "octicon-sign-in"}} {{svg "octicon-sign-in"}}
<span class="tw-ml-1">{{ctx.Locale.Tr "sign_in"}}</span> <span class="tw-ml-1">{{ctx.Locale.Tr "sign_in"}}</span>
</a> </a>
@@ -151,14 +154,13 @@
{{$activeStopwatch := and .PageGlobalData (call .PageGlobalData.GetActiveStopwatch)}} {{$activeStopwatch := and .PageGlobalData (call .PageGlobalData.GetActiveStopwatch)}}
{{if $activeStopwatch}} {{if $activeStopwatch}}
<div class="active-stopwatch-popup tippy-target"> <div class="active-stopwatch-popup tippy-target">
<div class="tw-flex tw-items-center tw-gap-2 tw-p-3"> <div class="flex-text-block tw-p-3">
<a class="stopwatch-link tw-flex tw-items-center tw-gap-2 muted" href="{{$activeStopwatch.IssueLink}}"> <a class="stopwatch-link flex-text-block muted" href="{{$activeStopwatch.IssueLink}}">
{{svg "octicon-issue-opened" 16}} {{svg "octicon-issue-opened" 16}}
<span class="stopwatch-issue">{{$activeStopwatch.RepoSlug}}#{{$activeStopwatch.IssueIndex}}</span> <span class="stopwatch-issue">{{$activeStopwatch.RepoSlug}}#{{$activeStopwatch.IssueIndex}}</span>
</a> </a>
<div class="tw-flex tw-gap-1"> <div class="tw-flex tw-gap-1">
<form class="stopwatch-commit form-fetch-action" method="post" action="{{$activeStopwatch.IssueLink}}/times/stopwatch/stop"> <form class="stopwatch-commit form-fetch-action" method="post" action="{{$activeStopwatch.IssueLink}}/times/stopwatch/stop">
{{.CsrfTokenHtml}}
<button <button
type="submit" type="submit"
class="ui button mini compact basic icon tw-mr-0" class="ui button mini compact basic icon tw-mr-0"
@@ -166,7 +168,6 @@
>{{svg "octicon-square-fill"}}</button> >{{svg "octicon-square-fill"}}</button>
</form> </form>
<form class="stopwatch-cancel form-fetch-action" method="post" action="{{$activeStopwatch.IssueLink}}/times/stopwatch/cancel"> <form class="stopwatch-cancel form-fetch-action" method="post" action="{{$activeStopwatch.IssueLink}}/times/stopwatch/cancel">
{{.CsrfTokenHtml}}
<button <button
type="submit" type="submit"
class="ui button mini compact basic icon tw-mr-0" class="ui button mini compact basic icon tw-mr-0"
@@ -178,3 +179,4 @@
</div> </div>
{{end}} {{end}}
</nav> </nav>
{{template "base/head_banner"}}
gitea/templates/base/head_navbar_icons.tmpl
+2 -7
View File
@@ -5,21 +5,16 @@
{{- $notificationUnreadCount := call $data.GetNotificationUnreadCount -}} {{- $notificationUnreadCount := call $data.GetNotificationUnreadCount -}}
{{if $activeStopwatch}} {{if $activeStopwatch}}
<a class="item active-stopwatch {{$itemExtraClass}}" href="{{$activeStopwatch.IssueLink}}" title="{{ctx.Locale.Tr "active_stopwatch"}}" data-seconds="{{$activeStopwatch.Seconds}}"> <a class="item active-stopwatch {{$itemExtraClass}}" href="{{$activeStopwatch.IssueLink}}" title="{{ctx.Locale.Tr "active_stopwatch"}}" data-seconds="{{$activeStopwatch.Seconds}}">
<div class="tw-relative"> <div class="tw-relative flex-text-block">
{{svg "octicon-stopwatch"}} {{svg "octicon-stopwatch"}}
<span class="header-stopwatch-dot"></span> <span class="header-stopwatch-dot"></span>
</div> </div>
</a> </a>
{{end}} {{end}}
<a class="item {{$itemExtraClass}}" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{ctx.Locale.Tr "notifications"}}"> <a class="item {{$itemExtraClass}}" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{ctx.Locale.Tr "notifications"}}">
<div class="tw-relative"> <div class="tw-relative flex-text-block">
{{svg "octicon-bell"}} {{svg "octicon-bell"}}
<span class="notification_count{{if not $notificationUnreadCount}} tw-hidden{{end}}">{{$notificationUnreadCount}}</span> <span class="notification_count{{if not $notificationUnreadCount}} tw-hidden{{end}}">{{$notificationUnreadCount}}</span>
</div> </div>
</a> </a>
{{if $data.IsSiteAdmin}}
<a class="item {{$itemExtraClass}}" href="{{AppSubUrl}}/-/admin" data-tooltip-content="{{ctx.Locale.Tr "admin_panel"}}">
{{svg "octicon-server"}}
</a>
{{end}}
{{end}} {{end}}
gitea/templates/repo/view_list.tmpl
+3 -3
View File
@@ -21,7 +21,7 @@
{{$submoduleLink := $submoduleFile.SubmoduleWebLinkTree ctx}} {{$submoduleLink := $submoduleFile.SubmoduleWebLinkTree ctx}}
{{if $submoduleLink}} {{if $submoduleLink}}
<a class="entry-name" href="{{$submoduleLink.RepoWebLink}}" title="{{$entry.Name}}">{{$entry.Name}}</a> <a class="entry-name" href="{{$submoduleLink.RepoWebLink}}" title="{{$entry.Name}}">{{$entry.Name}}</a>
@ <a class="text primary" href="{{$submoduleLink.CommitWebLink}}">{{ShortSha $submoduleFile.RefID}}</a> @ <a class="tw-text-primary" href="{{$submoduleLink.CommitWebLink}}">{{ShortSha $submoduleFile.RefID}}</a>
{{else}} {{else}}
<span class="entry-name" title="{{$entry.Name}}">{{$entry.Name}}</span> <span class="entry-name" title="{{$entry.Name}}">{{$entry.Name}}</span>
@ {{ShortSha $submoduleFile.RefID}} @ {{ShortSha $submoduleFile.RefID}}
@@ -36,7 +36,7 @@
{{$subJumpablePathName}} {{$subJumpablePathName}}
{{else}} {{else}}
{{$subJumpablePathPrefixes := slice $subJumpablePathFields 0 $subJumpablePathFieldLast}} {{$subJumpablePathPrefixes := slice $subJumpablePathFields 0 $subJumpablePathFieldLast}}
<span class="text light-2">{{StringUtils.Join $subJumpablePathPrefixes "/"}}</span>/{{index $subJumpablePathFields $subJumpablePathFieldLast}} <span class="tw-text-text-light-2">{{StringUtils.Join $subJumpablePathPrefixes "/"}}</span>/{{index $subJumpablePathFields $subJumpablePathFieldLast}}
{{end}} {{end}}
</a> </a>
{{else}} {{else}}
@@ -47,7 +47,7 @@
{{end}} {{end}}
{{end}} {{end}}
</div> </div>
<div class="repo-file-cell message loading-icon-2px"> <div class="repo-file-cell message commit-summary loading-icon-2px">
{{if $commit}} {{if $commit}}
{{$commitLink := printf "%s/commit/%s" $.RepoLink (PathEscape $commit.ID.String)}} {{$commitLink := printf "%s/commit/%s" $.RepoLink (PathEscape $commit.ID.String)}}
{{ctx.RenderUtils.RenderCommitMessageLinkSubject $commit.Message $commitLink $.Repository}} {{ctx.RenderUtils.RenderCommitMessageLinkSubject $commit.Message $commitLink $.Repository}}
gitea/web_src/css/themes/theme-gitea-auto-protanopia-deuteranopia.css
+8
View File
@@ -0,0 +1,8 @@
@import "./theme-gitea-light-protanopia-deuteranopia.css" (prefers-color-scheme: light);
@import "./theme-gitea-dark-protanopia-deuteranopia.css" (prefers-color-scheme: dark);
gitea-theme-meta-info {
--theme-display-name: "Auto";
--theme-colorblind-type: "red-green";
--theme-color-scheme: "auto";
}
gitea/web_src/css/themes/theme-gitea-auto-tritanopia.css
+8
View File
@@ -0,0 +1,8 @@
@import "./theme-gitea-light-tritanopia.css" (prefers-color-scheme: light);
@import "./theme-gitea-dark-tritanopia.css" (prefers-color-scheme: dark);
gitea-theme-meta-info {
--theme-display-name: "Auto";
--theme-colorblind-type: "blue-yellow";
--theme-color-scheme: "auto";
}
gitea/web_src/css/themes/theme-gitea-auto.css
+7
View File
@@ -0,0 +1,7 @@
@import "./theme-gitea-light.css" (prefers-color-scheme: light);
@import "./theme-gitea-dark.css" (prefers-color-scheme: dark);
gitea-theme-meta-info {
--theme-display-name: "Auto";
--theme-color-scheme: "auto";
}
gitea/web_src/css/themes/theme-gitea-dark-protanopia-deuteranopia.css
+19
View File
@@ -0,0 +1,19 @@
@import "./theme-gitea-dark.css";
gitea-theme-meta-info {
--theme-display-name: "Dark";
--theme-colorblind-type: "red-green";
--theme-color-scheme: "dark";
}
/* red/green colorblind-friendly colors */
:root {
--color-diff-added-fg: #58a6ff;
--color-diff-added-linenum-bg: #243d5d;
--color-diff-added-row-bg: #132339;
--color-diff-added-word-bg: #214d87;
--color-diff-removed-fg: #f0883e;
--color-diff-removed-linenum-bg: #5b361c;
--color-diff-removed-row-bg: #3c2419;
--color-diff-removed-word-bg: #824e1f;
}
gitea/web_src/css/themes/theme-gitea-dark-tritanopia.css
+15
View File
@@ -0,0 +1,15 @@
@import "./theme-gitea-dark.css";
gitea-theme-meta-info {
--theme-display-name: "Dark";
--theme-colorblind-type: "blue-yellow";
--theme-color-scheme: "dark";
}
/* blue/yellow colorblind-friendly colors */
:root {
--color-diff-added-fg: #58a6ff;
--color-diff-added-linenum-bg: #243d5d;
--color-diff-added-row-bg: #132339;
--color-diff-added-word-bg: #214d87;
}
gitea/web_src/css/themes/theme-gitea-dark.css
+317
View File
@@ -0,0 +1,317 @@
gitea-theme-meta-info {
--theme-display-name: "Dark";
--theme-color-scheme: "dark";
}
:root {
--is-dark-theme: true;
--color-primary: #4183c4;
--color-primary-contrast: #ffffff;
--color-primary-dark-1: #548fca;
--color-primary-dark-2: #679cd0;
--color-primary-dark-3: #7aa8d6;
--color-primary-dark-4: #8db5dc;
--color-primary-dark-5: #b3cde7;
--color-primary-dark-6: #d9e6f3;
--color-primary-dark-7: #f4f8fb;
--color-primary-light-1: #3876b3;
--color-primary-light-2: #31699f;
--color-primary-light-3: #2b5c8b;
--color-primary-light-4: #254f77;
--color-primary-light-5: #193450;
--color-primary-light-6: #0c1a28;
--color-primary-light-7: #04080c;
--color-primary-alpha-10: #4183c419;
--color-primary-alpha-20: #4183c433;
--color-primary-alpha-30: #4183c44b;
--color-primary-alpha-40: #4183c466;
--color-primary-alpha-50: #4183c480;
--color-primary-alpha-60: #4183c499;
--color-primary-alpha-70: #4183c4b3;
--color-primary-alpha-80: #4183c4cc;
--color-primary-alpha-90: #4183c4e1;
--color-primary-hover: var(--color-primary-light-1);
--color-primary-active: var(--color-primary-light-2);
--color-secondary: #3f4248;
--color-secondary-dark-1: #46494f;
--color-secondary-dark-2: #4f5259;
--color-secondary-dark-3: #5e626a;
--color-secondary-dark-4: #6f747d;
--color-secondary-dark-5: #7d828c;
--color-secondary-dark-6: #8b8f98;
--color-secondary-dark-7: #999da4;
--color-secondary-dark-8: #a8abb1;
--color-secondary-dark-9: #aeb1b8;
--color-secondary-dark-10: #bbbec3;
--color-secondary-dark-11: #c8cacf;
--color-secondary-dark-12: #d2d4d7;
--color-secondary-dark-13: #d5d6d9;
--color-secondary-light-1: #35373c;
--color-secondary-light-2: #2c2e32;
--color-secondary-light-3: #1f2124;
--color-secondary-light-4: #191a1c;
--color-secondary-alpha-10: #3f424819;
--color-secondary-alpha-20: #3f424833;
--color-secondary-alpha-30: #3f42484b;
--color-secondary-alpha-40: #3f424866;
--color-secondary-alpha-50: #3f424880;
--color-secondary-alpha-60: #3f424899;
--color-secondary-alpha-70: #3f4248b3;
--color-secondary-alpha-80: #3f4248cc;
--color-secondary-alpha-90: #3f4248e1;
--color-secondary-button: var(--color-secondary-dark-4);
--color-secondary-hover: var(--color-secondary-dark-3);
--color-secondary-active: var(--color-secondary-dark-2);
/* console colors - used for actions console and console files */
--color-console-fg: #f8f8f8;
--color-console-fg-subtle: #c1c3c8;
--color-console-bg: #191a1c;
--color-console-border: #313338;
--color-console-hover-bg: #2a2c30;
--color-console-active-bg: #313338;
--color-console-menu-bg: #292b2e;
--color-console-menu-border: #46494f;
--color-console-link: #969aa1;
/* named colors */
--color-red: #cc4848;
--color-orange: #cc580c;
--color-yellow: #cc9903;
--color-olive: #91a313;
--color-green: #87ab63;
--color-teal: #00918a;
--color-blue: #3a8ac6;
--color-violet: #906ae1;
--color-purple: #b259d0;
--color-pink: #d22e8b;
--color-brown: #a47252;
--color-black: #202225;
/* light variants - produced via Sass scale-color(color, $lightness: +10%) */
--color-red-light: #d15a5a;
--color-orange-light: #f6a066;
--color-yellow-light: #eaaf03;
--color-olive-light: #abc016;
--color-green-light: #93b373;
--color-teal-light: #00b6ad;
--color-blue-light: #4e96cc;
--color-violet-light: #9b79e4;
--color-purple-light: #ba6ad5;
--color-pink-light: #d74397;
--color-brown-light: #b08061;
--color-black-light: #45484e;
/* dark 1 variants - produced via Sass scale-color(color, $lightness: -10%) */
--color-red-dark-1: #c23636;
--color-orange-dark-1: #f38236;
--color-yellow-dark-1: #b88a03;
--color-olive-dark-1: #839311;
--color-green-dark-1: #7a9e55;
--color-teal-dark-1: #00837c;
--color-blue-dark-1: #347cb3;
--color-violet-dark-1: #7b4edb;
--color-purple-dark-1: #a742c9;
--color-pink-dark-1: #be297d;
--color-brown-dark-1: #94674a;
--color-black-dark-1: #2e3033;
/* dark 2 variants - produced via Sass scale-color(color, $lightness: -20%) */
--color-red-dark-2: #ad3030;
--color-orange-dark-2: #f16e17;
--color-yellow-dark-2: #a37a02;
--color-olive-dark-2: #74820f;
--color-green-dark-2: #6c8c4c;
--color-teal-dark-2: #00746e;
--color-blue-dark-2: #2e6e9f;
--color-violet-dark-2: #6733d6;
--color-purple-dark-2: #9834b9;
--color-pink-dark-2: #a9246f;
--color-brown-dark-2: #835b42;
--color-black-dark-2: #292b2e;
/* ansi colors used for actions console and console files */
--color-ansi-black: #202225;
--color-ansi-red: #cc4848;
--color-ansi-green: #87ab63;
--color-ansi-yellow: #cc9903;
--color-ansi-blue: #3a8ac6;
--color-ansi-magenta: #d22e8b;
--color-ansi-cyan: #00918a;
--color-ansi-white: var(--color-console-fg-subtle);
--color-ansi-bright-black: #45484e;
--color-ansi-bright-red: #d15a5a;
--color-ansi-bright-green: #93b373;
--color-ansi-bright-yellow: #eaaf03;
--color-ansi-bright-blue: #4e96cc;
--color-ansi-bright-magenta: #d74397;
--color-ansi-bright-cyan: #00b6ad;
--color-ansi-bright-white: var(--color-console-fg);
/* other colors */
--color-grey: #3d3f44;
--color-grey-light: #898d96;
--color-gold: #b1983b;
--color-white: #ffffff;
--color-diff-added-fg: #87ab63;
--color-diff-added-linenum-bg: #274227;
--color-diff-added-row-bg: #203224;
--color-diff-added-row-border: #314a37;
--color-diff-added-word-bg: #3c653c;
--color-diff-moved-row-bg: #818044;
--color-diff-moved-row-border: #bcca6f;
--color-diff-removed-fg: #cc4848;
--color-diff-removed-linenum-bg: #482121;
--color-diff-removed-row-bg: #301e1e;
--color-diff-removed-row-border: #634343;
--color-diff-removed-word-bg: #6f3333;
--color-diff-inactive: #25272a;
--color-error-border: #763232;
--color-error-bg: #322226;
--color-error-bg-active: #49262a;
--color-error-bg-hover: #3c2427;
--color-error-text: var(--color-text);
--color-success-border: #225633;
--color-success-bg: #1c3329;
--color-success-text: var(--color-text);
--color-warning-border: #5f481a;
--color-warning-bg: #342e1f;
--color-warning-text: var(--color-text);
--color-info-border: #254a7e;
--color-info-bg: #1b283a;
--color-info-text: var(--color-text);
--color-red-badge: #db2828;
--color-red-badge-bg: #db28281a;
--color-red-badge-hover-bg: #db28284d;
--color-green-badge: #21ba45;
--color-green-badge-bg: #21ba451a;
--color-green-badge-hover-bg: #21ba454d;
--color-yellow-badge: #fbbd08;
--color-yellow-badge-bg: #fbbd081a;
--color-yellow-badge-hover-bg: #fbbd084d;
--color-orange-badge: #f2711c;
--color-orange-badge-bg: #f2711c1a;
--color-orange-badge-hover-bg: #f2711c4d;
--color-git: #f05133;
--color-logo: #609926;
/* target-based colors */
--color-body: #1e1f20;
--color-box-header: #1b1c1e;
--color-box-body: #161718;
--color-box-body-highlight: #202124;
--color-text-dark: #f8f8f8;
--color-text: #d2d4d8;
--color-text-light: #c0c2c7;
--color-text-light-1: #aaadb4;
--color-text-light-2: #969aa1;
--color-text-light-3: #80858f;
--color-footer: var(--color-nav-bg);
--color-timeline: #383b40;
--color-input-text: var(--color-text-dark);
--color-input-background: #191a1c;
--color-input-toggle-background: #323438;
--color-input-border: var(--color-secondary-dark-1);
--color-light: #0b0b0c28;
--color-light-border: #f3f3f428;
--color-hover: #f3f3f419;
--color-hover-opaque: #232528; /* TODO: color-mix(in srgb, var(--color-body), var(--color-hover)); */
--color-active: #f3f3f424;
--color-menu: #191a1c;
--color-card: #191a1c;
--color-markup-table-row: #f3f3f40f;
--color-markup-code-block: #f3f3f412;
--color-markup-code-inline: #f3f3f428;
--color-button: #191a1c;
--color-code-bg: #161718;
--color-shadow: #0b0b0c58;
--color-shadow-opaque: #0b0b0c;
--color-secondary-bg: #2e3033;
--color-expand-button: #333539;
--color-placeholder-text: var(--color-text-light-3);
--color-editor-line-highlight: var(--color-secondary-alpha-40);
--color-editor-selection: var(--color-primary-alpha-50);
--color-project-column-bg: var(--color-secondary-light-2);
--color-caret: var(--color-text); /* should ideally be --color-text-dark, see #15651 */
--color-reaction-bg: #f3f3f412;
--color-reaction-hover-bg: var(--color-primary-light-4);
--color-reaction-active-bg: var(--color-primary-light-5);
--color-tooltip-text: #fafafa;
--color-tooltip-bg: #0b0b0cf0;
--color-nav-bg: #18191b;
--color-nav-hover-bg: var(--color-secondary-light-1);
--color-nav-text: var(--color-text);
--color-secondary-nav-bg: #1a1b1e;
--color-label-text: var(--color-text);
--color-label-bg: #7a7f8a4b;
--color-label-hover-bg: #7a7f8aa0;
--color-label-active-bg: #7a7f8aff;
--color-accent: var(--color-primary-light-1);
--color-small-accent: var(--color-primary-light-5);
--color-highlight-fg: #87651e;
--color-highlight-bg: #443a27;
--color-overlay-backdrop: #080808c0;
--color-danger: var(--color-red);
--color-transparency-grid-light: #2a2a2a;
--color-transparency-grid-dark: #1a1a1a;
--color-workflow-edge-hover: #666a73;
--color-syntax-keyword: #ff8854;
--color-syntax-bool: #25bbc9;
--color-syntax-control: #dd9e17;
--color-syntax-name: #c7a618;
--color-syntax-type: #eb8cb3;
--color-syntax-number: #63b2dd;
--color-syntax-operator: #ff8854;
--color-syntax-regexp: #b89de4;
--color-syntax-string: #95b62a;
--color-syntax-comment: #8898b0;
--color-syntax-invalid: #ff8686;
--color-syntax-link: var(--color-primary);
--color-syntax-tag: #ff8854;
--color-syntax-attribute: #c792ff;
--color-syntax-property: #55afff;
--color-syntax-variable: #e29b33;
--color-syntax-string-special: #dd9e17;
--color-syntax-escape: #c7a618;
--color-syntax-entity: #c792ff;
--color-syntax-preproc: #4cbe7a;
--color-syntax-preproc-file: #63b2dd;
--color-syntax-decorator: #4cbe7a;
--color-syntax-namespace: #c9d1d9;
--color-syntax-name-pseudo: #c792ff;
--color-syntax-comment-special: #b89de4;
--color-syntax-text: #c9d1d9;
--color-syntax-text-alt: #b9bcc7;
--color-syntax-punctuation: #d2d4db;
--color-syntax-whitespace: #7f8699;
--color-syntax-diff-fg: #ffffff;
--color-syntax-deleted-bg: #5f3737;
--color-syntax-inserted-bg: #3a523a;
--color-syntax-emph: #d1a242;
--color-syntax-strong: #e29b33;
--color-syntax-heading: #dd9e17;
--color-syntax-subheading: #95b62a;
--color-syntax-output: #8898b0;
--color-syntax-prompt: #e29b33;
--color-syntax-traceback: #ff8686;
--color-syntax-matching-bracket-bg: #00918a48;
--color-syntax-nonmatching-bracket-bg: #cc484848;
accent-color: var(--color-accent);
color-scheme: dark;
}
/* invert emojis that are hard to read otherwise */
.emoji[aria-label="check mark"],
.emoji[aria-label="currency exchange"],
.emoji[aria-label="TOP arrow"],
.emoji[aria-label="END arrow"],
.emoji[aria-label="ON! arrow"],
.emoji[aria-label="SOON arrow"],
.emoji[aria-label="heavy dollar sign"],
.emoji[aria-label="copyright"],
.emoji[aria-label="registered"],
.emoji[aria-label="trade mark"],
.emoji[aria-label="multiply"],
.emoji[aria-label="plus"],
.emoji[aria-label="minus"],
.emoji[aria-label="divide"],
.emoji[aria-label="curly loop"],
.emoji[aria-label="double curly loop"],
.emoji[aria-label="wavy dash"],
.emoji[aria-label="paw prints"],
.emoji[aria-label="musical note"],
.emoji[aria-label="musical notes"] {
filter: invert(100%) hue-rotate(180deg);
}
gitea/web_src/css/themes/theme-gitea-light-protanopia-deuteranopia.css
+19
View File
@@ -0,0 +1,19 @@
@import "./theme-gitea-light.css";
gitea-theme-meta-info {
--theme-display-name: "Light";
--theme-colorblind-type: "red-green";
--theme-color-scheme: "light";
}
/* red/green colorblind-friendly colors */
:root {
--color-diff-added-fg: #2185d0;
--color-diff-added-linenum-bg: #b6e3ff;
--color-diff-added-row-bg: #ddf4ff;
--color-diff-added-word-bg: #b6e3ff;
--color-diff-removed-fg: #fc6500;
--color-diff-removed-linenum-bg: #ffd8b5;
--color-diff-removed-row-bg: #fff1e5;
--color-diff-removed-word-bg: #ffd8b5;
}
gitea/web_src/css/themes/theme-gitea-light-tritanopia.css
+15
View File
@@ -0,0 +1,15 @@
@import "./theme-gitea-light.css";
gitea-theme-meta-info {
--theme-display-name: "Light";
--theme-colorblind-type: "blue-yellow";
--theme-color-scheme: "light";
}
/* blue/yellow colorblind-friendly colors */
:root {
--color-diff-added-fg: #2185d0;
--color-diff-added-linenum-bg: #b6e3ff;
--color-diff-added-row-bg: #ddf4ff;
--color-diff-added-word-bg: #b6e3ff;
}
gitea/web_src/css/themes/theme-gitea-light.css
+293
View File
@@ -0,0 +1,293 @@
gitea-theme-meta-info {
--theme-display-name: "Light";
--theme-color-scheme: "light";
}
:root {
--is-dark-theme: false;
--color-primary: #4183c4;
--color-primary-contrast: #ffffff;
--color-primary-dark-1: #3876b3;
--color-primary-dark-2: #31699f;
--color-primary-dark-3: #2b5c8b;
--color-primary-dark-4: #254f77;
--color-primary-dark-5: #193450;
--color-primary-dark-6: #0c1a28;
--color-primary-dark-7: #04080c;
--color-primary-light-1: #548fca;
--color-primary-light-2: #679cd0;
--color-primary-light-3: #7aa8d6;
--color-primary-light-4: #8db5dc;
--color-primary-light-5: #b3cde7;
--color-primary-light-6: #d9e6f3;
--color-primary-light-7: #f4f8fb;
--color-primary-alpha-10: #4183c419;
--color-primary-alpha-20: #4183c433;
--color-primary-alpha-30: #4183c44b;
--color-primary-alpha-40: #4183c466;
--color-primary-alpha-50: #4183c480;
--color-primary-alpha-60: #4183c499;
--color-primary-alpha-70: #4183c4b3;
--color-primary-alpha-80: #4183c4cc;
--color-primary-alpha-90: #4183c4e1;
--color-primary-hover: var(--color-primary-dark-1);
--color-primary-active: var(--color-primary-dark-2);
--color-secondary: #d0d7de;
--color-secondary-dark-1: #c7ced5;
--color-secondary-dark-2: #b9c0c7;
--color-secondary-dark-3: #99a0a7;
--color-secondary-dark-4: #899097;
--color-secondary-dark-5: #7a8188;
--color-secondary-dark-6: #6a7178;
--color-secondary-dark-7: #5b6269;
--color-secondary-dark-8: #4b5259;
--color-secondary-dark-9: #3c434a;
--color-secondary-dark-10: #2c333a;
--color-secondary-dark-11: #1d242b;
--color-secondary-dark-12: #0d141b;
--color-secondary-dark-13: #00040b;
--color-secondary-light-1: #dee5ec;
--color-secondary-light-2: #e4ebf2;
--color-secondary-light-3: #ebf2f9;
--color-secondary-light-4: #f1f8ff;
--color-secondary-alpha-10: #d0d7de19;
--color-secondary-alpha-20: #d0d7de33;
--color-secondary-alpha-30: #d0d7de4b;
--color-secondary-alpha-40: #d0d7de66;
--color-secondary-alpha-50: #d0d7de80;
--color-secondary-alpha-60: #d0d7de99;
--color-secondary-alpha-70: #d0d7deb3;
--color-secondary-alpha-80: #d0d7decc;
--color-secondary-alpha-90: #d0d7dee1;
--color-secondary-button: var(--color-secondary-dark-4);
--color-secondary-hover: var(--color-secondary-dark-5);
--color-secondary-active: var(--color-secondary-dark-6);
/* console colors - used for actions console and console files */
--color-console-fg: #0d1117;
--color-console-fg-subtle: #40474d;
--color-console-bg: #ffffff;
--color-console-border: #d0d7de;
--color-console-hover-bg: #f1f3f5;
--color-console-active-bg: #d0d7de;
--color-console-menu-bg: #f8f9fb;
--color-console-menu-border: #d0d7de;
--color-console-link: #5c656d;
/* named colors */
--color-red: #db2828;
--color-orange: #f2711c;
--color-yellow: #fbbd08;
--color-olive: #b5cc18;
--color-green: #21ba45;
--color-teal: #00b5ad;
--color-blue: #2185d0;
--color-violet: #6435c9;
--color-purple: #a333c8;
--color-pink: #e03997;
--color-brown: #a5673f;
--color-black: #1d2328;
/* light variants - produced via Sass scale-color(color, $lightness: +25%) */
--color-red-light: #e45e5e;
--color-orange-light: #f59555;
--color-yellow-light: #fcce46;
--color-olive-light: #d3e942;
--color-green-light: #46de6a;
--color-teal-light: #08fff4;
--color-blue-light: #51a5e3;
--color-violet-light: #8b67d7;
--color-purple-light: #bb64d8;
--color-pink-light: #e86bb1;
--color-brown-light: #c58b66;
--color-black-light: #4b5b68;
/* dark 1 variants - produced via Sass scale-color(color, $lightness: -10%) */
--color-red-dark-1: #c82121;
--color-orange-dark-1: #e6630d;
--color-yellow-dark-1: #e5ac04;
--color-olive-dark-1: #a3b816;
--color-green-dark-1: #1ea73e;
--color-teal-dark-1: #00a39c;
--color-blue-dark-1: #1e78bb;
--color-violet-dark-1: #5a30b5;
--color-purple-dark-1: #932eb4;
--color-pink-dark-1: #db228a;
--color-brown-dark-1: #955d39;
--color-black-dark-1: #2c3339;
/* dark 2 variants - produced via Sass scale-color(color, $lightness: -20%) */
--color-red-dark-2: #b11e1e;
--color-orange-dark-2: #cc580c;
--color-yellow-dark-2: #cc9903;
--color-olive-dark-2: #91a313;
--color-green-dark-2: #1a9537;
--color-teal-dark-2: #00918a;
--color-blue-dark-2: #1a6aa6;
--color-violet-dark-2: #502aa1;
--color-purple-dark-2: #8229a0;
--color-pink-dark-2: #c21e7b;
--color-brown-dark-2: #845232;
--color-black-dark-2: #131619;
/* ansi colors used for actions console and console files */
--color-ansi-black: #1e2327;
--color-ansi-red: #cc4848;
--color-ansi-green: #87ab63;
--color-ansi-yellow: #cc9903;
--color-ansi-blue: #3a8ac6;
--color-ansi-magenta: #d22e8b;
--color-ansi-cyan: #00918a;
--color-ansi-white: var(--color-console-fg-subtle);
--color-ansi-bright-black: #46494d;
--color-ansi-bright-red: #d15a5a;
--color-ansi-bright-green: #93b373;
--color-ansi-bright-yellow: #eaaf03;
--color-ansi-bright-blue: #4e96cc;
--color-ansi-bright-magenta: #d74397;
--color-ansi-bright-cyan: #00b6ad;
--color-ansi-bright-white: var(--color-console-fg);
/* other colors */
--color-grey: #697077;
--color-grey-light: #7c838a;
--color-gold: #a1882b;
--color-white: #ffffff;
--color-diff-added-fg: #21ba45;
--color-diff-added-linenum-bg: #d1f8d9;
--color-diff-added-row-bg: #e6ffed;
--color-diff-added-row-border: #e6ffed;
--color-diff-added-word-bg: #acf2bd;
--color-diff-moved-row-bg: #f1f8d1;
--color-diff-moved-row-border: #d0e27f;
--color-diff-removed-fg: #db2828;
--color-diff-removed-linenum-bg: #ffcecb;
--color-diff-removed-row-bg: #ffeef0;
--color-diff-removed-row-border: #f1c0c0;
--color-diff-removed-word-bg: #fdb8c0;
--color-diff-inactive: #f0f2f4;
--color-error-border: #ff818266;
--color-error-bg: #ffebe9;
--color-error-bg-active: #ffcecb;
--color-error-bg-hover: #ffdcd7;
--color-error-text: var(--color-text);
--color-success-border: #4ac26b66;
--color-success-bg: #dafbe1;
--color-success-text: var(--color-text);
--color-warning-border: #d4a72c66;
--color-warning-bg: #fff8c5;
--color-warning-text: var(--color-text);
--color-info-border: #54aeff66;
--color-info-bg: #ddf4ff;
--color-info-text: var(--color-text);
--color-red-badge: #db2828;
--color-red-badge-bg: #db28281a;
--color-red-badge-hover-bg: #db28284d;
--color-green-badge: #21ba45;
--color-green-badge-bg: #21ba451a;
--color-green-badge-hover-bg: #21ba454d;
--color-yellow-badge: #fbbd08;
--color-yellow-badge-bg: #fbbd081a;
--color-yellow-badge-hover-bg: #fbbd084d;
--color-orange-badge: #f2711c;
--color-orange-badge-bg: #f2711c1a;
--color-orange-badge-hover-bg: #f2711c4d;
--color-git: #f05133;
--color-logo: #609926;
/* target-based colors */
--color-body: #ffffff;
--color-box-header: #f1f3f5;
--color-box-body: #ffffff;
--color-box-body-highlight: #ecf5fd;
--color-text-dark: #01050a;
--color-text: #181c21;
--color-text-light: #30363b;
--color-text-light-1: #40474d;
--color-text-light-2: #5b6167;
--color-text-light-3: #747c84;
--color-footer: var(--color-nav-bg);
--color-timeline: #d0d7de;
--color-input-text: var(--color-text-dark);
--color-input-background: #fff;
--color-input-toggle-background: #d0d7de;
--color-input-border: var(--color-secondary-dark-1);
--color-light: #00001706;
--color-light-border: #0000171d;
--color-hover: #00001708;
--color-hover-opaque: #f1f3f5; /* TODO: color-mix(in srgb, var(--color-body), var(--color-hover)); */
--color-active: #00001714;
--color-menu: #f8f9fb;
--color-card: #f8f9fb;
--color-markup-table-row: #0030600a;
--color-markup-code-block: #00306010;
--color-markup-code-inline: #00306012;
--color-button: #f8f9fb;
--color-code-bg: #fafdff;
--color-shadow: #00001726;
--color-shadow-opaque: #c7ced5;
--color-secondary-bg: #f2f5f8;
--color-expand-button: #cfe8fa;
--color-placeholder-text: var(--color-text-light-3);
--color-editor-line-highlight: var(--color-secondary-alpha-30);
--color-editor-selection: var(--color-primary-alpha-30);
--color-project-column-bg: var(--color-secondary-light-4);
--color-caret: var(--color-text-dark);
--color-reaction-bg: #0000170a;
--color-reaction-hover-bg: var(--color-primary-light-5);
--color-reaction-active-bg: var(--color-primary-light-6);
--color-tooltip-text: #fbfdff;
--color-tooltip-bg: #000017f0;
--color-nav-bg: #f6f7fa;
--color-nav-hover-bg: var(--color-secondary-light-1);
--color-nav-text: var(--color-text);
--color-secondary-nav-bg: #f9fafb;
--color-label-text: var(--color-text);
--color-label-bg: #949da64b;
--color-label-hover-bg: #949da6a0;
--color-label-active-bg: #949da6ff;
--color-accent: var(--color-primary-light-1);
--color-small-accent: var(--color-primary-light-6);
--color-highlight-fg: #eed200;
--color-highlight-bg: #f5efc5;
--color-overlay-backdrop: #080808c0;
--color-danger: var(--color-red);
--color-transparency-grid-light: #fafafa;
--color-transparency-grid-dark: #e2e2e2;
--color-workflow-edge-hover: #b1b7bd;
--color-syntax-keyword: #a73a00;
--color-syntax-bool: #076872;
--color-syntax-control: #7d5700;
--color-syntax-name: #785900;
--color-syntax-type: #ae2368;
--color-syntax-number: #105ead;
--color-syntax-operator: #a73a00;
--color-syntax-regexp: #773dc5;
--color-syntax-string: #456800;
--color-syntax-comment: #506070;
--color-syntax-invalid: #c00000;
--color-syntax-link: var(--color-primary);
--color-syntax-tag: #a73a00;
--color-syntax-attribute: #6f41c5;
--color-syntax-property: #2060a0;
--color-syntax-variable: #944a00;
--color-syntax-string-special: #7d5700;
--color-syntax-escape: #785900;
--color-syntax-entity: #6f41c5;
--color-syntax-preproc: #2d6a4b;
--color-syntax-preproc-file: #105ead;
--color-syntax-decorator: #2d6a4b;
--color-syntax-namespace: #555555;
--color-syntax-name-pseudo: #6f41c5;
--color-syntax-comment-special: #773dc5;
--color-syntax-text: inherit;
--color-syntax-text-alt: #47525b;
--color-syntax-punctuation: inherit;
--color-syntax-whitespace: #bbbbbb;
--color-syntax-diff-fg: #000000;
--color-syntax-deleted-bg: #ffdddd;
--color-syntax-inserted-bg: #ddffdd;
--color-syntax-emph: #8b5000;
--color-syntax-strong: inherit;
--color-syntax-heading: #7d5700;
--color-syntax-subheading: #456800;
--color-syntax-output: #506070;
--color-syntax-prompt: #944a00;
--color-syntax-traceback: #c00000;
--color-syntax-matching-bracket-bg: #00b5ad38;
--color-syntax-nonmatching-bracket-bg: #db282838;
accent-color: var(--color-accent);
color-scheme: light;
}
options/locale/locale_zh-CN.ini
-4
View File
@@ -1,4 +0,0 @@
[github-theme]
verifed=已验证
partially_verifed=部分验证
unverifed=未验证
options/locale/locale_zh-CN.json
+5
View File
@@ -0,0 +1,5 @@
{
"gitea-github-theme.verifed": "已验证",
"gitea-github-theme.partially_verifed": "部分验证",
"gitea-github-theme.unverifed": "未验证"
}
package.json
+27 -23
View File
@@ -1,6 +1,11 @@
{ {
"name": "gitea-github-theme", "name": "gitea-github-theme",
"version": "1.25.5", "version": "1.26.0",
"license": "Apache-2.0",
"author": {
"name": "lutinglt",
"url": "https://github.com/lutinglt"
},
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite build --mode dev", "dev": "vite build --mode dev",
@@ -10,32 +15,31 @@
"commit": "npm run lint && npm run format && npm run build", "commit": "npm run lint && npm run format && npm run build",
"version": "node scripts/version.cjs", "version": "node scripts/version.cjs",
"tr": "node scripts/translate.cjs", "tr": "node scripts/translate.cjs",
"tmpl": "node scripts/update_template.cjs", "update:gitea": "node scripts/update_gitea.cjs",
"release": "npm run build && npm run tr", "release": "npm run build && npm run tr",
"install:clean": "npm cache clean --force && rm -rf node_modules package-lock.json && npm install", "install:clean": "npm cache clean --force && rm -rf node_modules package-lock.json && npm install"
"install:vite8": "npm install --force"
}, },
"devDependencies": { "devDependencies": {
"@babel/preset-typescript": "^7.28.4", "@babel/preset-typescript": "^7.28.5",
"@eslint/js": "^9.29.0", "@eslint/js": "^10.0.1",
"@linaria/core": "^6.3.0", "@linaria/core": "^7.0.0",
"@types/node": "^24.0.3", "@types/node": "^25.5.2",
"@typescript/native-preview": "^7.0.0-dev.20251203.1", "@typescript/native-preview": "^7.0.0-dev.20260406.1",
"@vanilla-extract/css": "^1.17.5", "@vanilla-extract/css": "^1.20.1",
"@vanilla-extract/vite-plugin": "^5.1.3", "@vanilla-extract/vite-plugin": "^5.2.2",
"@wyw-in-js/babel-preset": "^0.7.0", "@wyw-in-js/vite": "^1.0.7",
"@wyw-in-js/vite": "^0.7.0", "dotenv": "^17.4.1",
"dotenv": "^17.0.0", "eslint": "^10.2.0",
"eslint": "^9.29.0", "globals": "^17.4.0",
"globals": "^16.2.0", "lightningcss": "^1.32.0",
"lightningcss": "^1.30.1",
"polished": "^4.3.1", "polished": "^4.3.1",
"prettier": "3.5.3", "prettier": "3.8.1",
"prettier-plugin-organize-imports": "^4.1.0", "prettier-plugin-organize-imports": "^4.3.0",
"sass-embedded": "^1.89.2", "sass-embedded": "^1.99.0",
"typescript-eslint": "^8.34.1", "typescript-eslint": "^8.58.0",
"typescript-plugin-css-modules": "^5.1.0", "typescript-plugin-css-modules": "^5.2.0",
"vite": "^7.3.1" "undici": "^8.1.0",
"vite": "^8.0.5"
}, },
"prettier": { "prettier": {
"printWidth": 120, "printWidth": 120,
scripts/translate.cjs
Vendored
+37 -7
View File
@@ -1,11 +1,36 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const fs = require("fs"); const fs = require("fs");
const path = require("path"); const path = require("path");
const child_process = require("child_process"); const child_process = require("child_process");
const { ProxyAgent, setGlobalDispatcher } = require("undici");
const proxyUrl = process.env.HTTPS_PROXY || process.env.HTTP_PROXY || process.env.ALL_PROXY;
if (proxyUrl) {
setGlobalDispatcher(new ProxyAgent(proxyUrl));
}
const dotenv = require("dotenv"); const dotenv = require("dotenv");
dotenv.config({ quiet: true }); dotenv.config({ quiet: true });
const rootDir = path.join(__dirname, "..");
const rootDir = path.join(__dirname, "..");
const pkgPath = path.join(rootDir, "package.json"); const pkgPath = path.join(rootDir, "package.json");
const pkg = JSON.parse(fs.readFileSync(pkgPath)); const pkg = JSON.parse(fs.readFileSync(pkgPath));
@@ -26,24 +51,29 @@ if (tag.includes("rc") || patch.includes("latest")) {
} }
const githubUrl = `${githubSite}/${giteaRepo}/${versionPath}/${localePath}`; const githubUrl = `${githubSite}/${giteaRepo}/${versionPath}/${localePath}`;
const locales = fs.readdirSync(path.join(rootDir, localePath)).filter(file => file.endsWith(".ini")); const locales = fs.readdirSync(path.join(rootDir, localePath)).filter(file => file.endsWith(".json"));
(async () => { (async () => {
for (const locale of locales) { for (const locale of locales) {
const localUrl = `${githubUrl}/${locale}`; const localUrl = `${githubUrl}/${locale}`;
console.log("LocaleUrl:", localUrl); console.log("LocaleUrl:", localUrl);
const themeLocale = fs.readFileSync(path.join(rootDir, localePath, locale), "utf-8"); const themeLocale = JSON.parse(fs.readFileSync(path.join(rootDir, localePath, locale), "utf-8"));
const response = await fetch(localUrl); const response = await fetch(localUrl);
if (!response.ok) { if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`); throw new Error(`HTTP error! status: ${response.status}`);
} }
let content = await response.text(); let content = await response.json();
if (locale.includes("zh-CN")) { if (locale.includes("zh-CN")) {
content = content.replaceAll("工单", "议题").replaceAll("合并请求", "拉取请求"); for (const key of Object.keys(content)) {
if (typeof content[key] === "string") {
content[key] = content[key].replaceAll("工单", "议题").replaceAll("合并请求", "拉取请求");
}
}
} }
Object.assign(content, themeLocale);
fs.mkdirSync(path.join(rootDir, "dist", localePath), { recursive: true }); fs.mkdirSync(path.join(rootDir, "dist", localePath), { recursive: true });
fs.writeFileSync(path.join(rootDir, "dist", localePath, locale), content + themeLocale); fs.writeFileSync(path.join(rootDir, "dist", localePath, locale), JSON.stringify(content, null, 2));
} }
if (process.env.SSH_SERVER && process.env.GITEA_PATH && process.env.SSH_USER) { if (process.env.SSH_SERVER && process.env.GITEA_PATH && process.env.SSH_USER) {
scripts/update_gitea.cjs
Vendored
+78
View File
@@ -0,0 +1,78 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const fs = require("fs");
const path = require("path");
const { ProxyAgent, setGlobalDispatcher } = require("undici");
const proxyUrl = process.env.HTTPS_PROXY || process.env.HTTP_PROXY || process.env.ALL_PROXY;
if (proxyUrl) {
setGlobalDispatcher(new ProxyAgent(proxyUrl));
}
const rootDir = path.join(__dirname, "..");
const pkgPath = path.join(rootDir, "package.json");
const pkg = JSON.parse(fs.readFileSync(pkgPath));
const githubSite = "https://raw.githubusercontent.com";
const giteaRepo = "go-gitea/gitea";
const githubTagPath = "refs/tags";
const localGiteaPath = path.join(rootDir, "gitea");
const [major, minor, patch = ""] = pkg.version.split(".");
console.log("Version:", pkg.version);
const versionPath = `${githubTagPath}/v${major}.${minor}.${patch}`;
const githubBaseUrl = `${githubSite}/${giteaRepo}/${versionPath}`;
// 递归读取所有子目录中的文件
function readFilesRecursively(dir) {
const results = [];
const files = fs.readdirSync(dir);
for (const file of files) {
const filePath = path.join(dir, file);
const stat = fs.statSync(filePath);
if (stat.isDirectory()) {
// 如果是目录，递归读取
results.push(...readFilesRecursively(filePath));
} else {
// 添加到结果中（相对于 gitea 目录的相对路径）
const relativePath = path.relative(localGiteaPath, filePath);
results.push(relativePath);
}
}
return results;
}
// 读取 gitea 目录下所有文件
const files = readFilesRecursively(localGiteaPath);
(async () => {
for (const file of files) {
const fileUrl = `${githubBaseUrl}/${file}`;
console.log("FileUrl:", fileUrl);
const response = await fetch(fileUrl);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
let content = await response.text();
fs.writeFileSync(path.join(localGiteaPath, file), content);
}
})();
scripts/update_template.cjs
Vendored
-54
View File
@@ -1,54 +0,0 @@
const fs = require("fs");
const path = require("path");
const rootDir = path.join(__dirname, "..");
const pkgPath = path.join(rootDir, "package.json");
const pkg = JSON.parse(fs.readFileSync(pkgPath));
const githubSite = "https://raw.githubusercontent.com";
const giteaRepo = "go-gitea/gitea";
const githubTagPath = "refs/tags";
const tmplPath = "templates";
const localTmplPath = path.join(rootDir, "gitea", tmplPath);
const [major, minor, patch = ""] = pkg.version.split(".");
console.log("Version:", pkg.version);
const versionPath = `${githubTagPath}/v${major}.${minor}.${patch}`;
const githubUrl = `${githubSite}/${giteaRepo}/${versionPath}/${tmplPath}`;
// 递归读取所有子目录中的 .tmpl 文件
function readTmplFilesRecursively(dir) {
const results = [];
const files = fs.readdirSync(dir);
for (const file of files) {
const filePath = path.join(dir, file);
const stat = fs.statSync(filePath);
if (stat.isDirectory()) {
// 如果是目录，递归读取
results.push(...readTmplFilesRecursively(filePath));
} else if (file.endsWith(".tmpl")) {
// 如果是 .tmpl 文件，添加到结果中（相对于模板目录的相对路径）
const relativePath = path.relative(localTmplPath, filePath);
results.push(relativePath);
}
}
return results;
}
// 读取所有模板文件
const tmpls = readTmplFilesRecursively(localTmplPath);
(async () => {
for (const tmpl of tmpls) {
const tmplUrl = `${githubUrl}/${tmpl}`;
console.log("TmplUrl:", tmplUrl);
const response = await fetch(tmplUrl);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
let content = await response.text();
fs.writeFileSync(path.join(localTmplPath, tmpl), content);
}
})();
scripts/version.cjs
Vendored
+19
View File
@@ -1,3 +1,22 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const fs = require("fs"); const fs = require("fs");
const path = require("path"); const path = require("path");
src/core/chroma.ts
+19
View File
@@ -1,3 +1,22 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { prettylights2Chroma, type prettylightsColor } from "./prettylights"; import { prettylights2Chroma, type prettylightsColor } from "./prettylights";
export const lightPrettylights: prettylightsColor = { export const lightPrettylights: prettylightsColor = {
src/core/color.ts
+19
View File
@@ -1,3 +1,22 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { rgba, saturate } from "polished"; import { rgba, saturate } from "polished";
import { scaleColorLight } from "src/functions"; import { scaleColorLight } from "src/functions";
import type { Ansi, Chroma, Console, Diff, Github, Message, Named, Other, Primary, Secondary } from "src/types"; import type { Ansi, Chroma, Console, Diff, Github, Message, Named, Other, Primary, Secondary } from "src/types";
src/core/display.ts
+31 -5
View File
@@ -1,3 +1,22 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { saturate } from "polished"; import { saturate } from "polished";
import { scaleColorLight } from "src/functions"; import { scaleColorLight } from "src/functions";
import { type GithubColor } from "./github"; import { type GithubColor } from "./github";
@@ -46,15 +65,22 @@ export function display2GithubColor(
button: { button: {
...baseGithubColor.button, ...baseGithubColor.button,
primary: { primary: {
...baseGithubColor.button.primary,
fgColor: { fgColor: {
...baseGithubColor.button.primary.fgColor,
accent: soft ? displayColor.num7 : displayColor.num6, accent: soft ? displayColor.num7 : displayColor.num6,
rest: baseGithubColor.button.primary.fgColor.rest,
}, },
bgColor: { bgColor: {
...baseGithubColor.button.primary.bgColor,
rest: soft ? saturate(-0.1, scaleColorLight(displayColor.num5, -2)) : displayColor.num5, rest: soft ? saturate(-0.1, scaleColorLight(displayColor.num5, -2)) : displayColor.num5,
hover: soft ? saturate(-0.1, scaleColorLight(displayColor.num5, 3)) : scaleColorLight(displayColor.num5, 5), hover: soft
? saturate(-0.1, scaleColorLight(displayColor.num5, 4))
: baseGithubColor.isDarkTheme
? scaleColorLight(displayColor.num5, 7)
: scaleColorLight(displayColor.num5, -5),
active: soft
? saturate(-0.1, scaleColorLight(displayColor.num5, 9))
: baseGithubColor.isDarkTheme
? scaleColorLight(displayColor.num5, 15)
: scaleColorLight(displayColor.num5, -10),
}, },
}, },
star: { star: {
@@ -71,7 +97,6 @@ export function display2GithubColor(
contribution: { contribution: {
...baseGithubColor.contribution, ...baseGithubColor.contribution,
default: { default: {
...baseGithubColor.contribution.default,
bgColor: { bgColor: {
num0: baseGithubColor.contribution.default.bgColor.num0, num0: baseGithubColor.contribution.default.bgColor.num0,
num1: soft ? displayColor.num2 : displayColor.num1, num1: soft ? displayColor.num2 : displayColor.num1,
@@ -79,6 +104,7 @@ export function display2GithubColor(
num3: soft ? displayColor.num5 : displayColor.num4, num3: soft ? displayColor.num5 : displayColor.num4,
num4: soft ? displayColor.num7 : displayColor.num6, num4: soft ? displayColor.num7 : displayColor.num6,
}, },
borderColor: baseGithubColor.contribution.default.borderColor,
}, },
}, },
}; };
src/core/github.ts
+52 -10
View File
@@ -1,3 +1,22 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { saturate } from "polished"; import { saturate } from "polished";
import type { Console, Diff, Other } from "src"; import type { Console, Diff, Other } from "src";
import { scaleColorLight } from "src/functions"; import { scaleColorLight } from "src/functions";
@@ -50,7 +69,7 @@ export type GithubColor = {
default: string; default: string;
inset: string; inset: string;
muted: string; muted: string;
neutral: { muted: string }; neutral: { muted: string; emphasis: string };
}; };
borderColor: { borderColor: {
accent: { emphasis: string }; accent: { emphasis: string };
@@ -60,17 +79,18 @@ export type GithubColor = {
done: { emphasis: string }; done: { emphasis: string };
muted: string; muted: string;
translucent: string; translucent: string;
emphasis: string;
}; };
button: { button: {
primary: { fgColor: { accent: string; rest: string }; bgColor: { rest: string; hover: string } }; primary: { fgColor: { accent: string; rest: string }; bgColor: { rest: string; hover: string; active: string } };
danger: { fgColor: { rest: string; hover: string }; bgColor: { hover: string } }; danger: { fgColor: { rest: string; hover: string }; bgColor: { hover: string; active: string } };
star: { iconColor: string }; star: { iconColor: string };
}; };
control: { control: {
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 }; resting: { small: string } }; shadow: { floating: { small: string }; inset: string; resting: { small: string; medium: string } };
overlay: { backdrop: { bgColor: string }; bgColor: string }; overlay: { backdrop: { bgColor: string }; bgColor: string };
underlineNav: { borderColor: { active: string } }; underlineNav: { borderColor: { active: string } };
contribution: { contribution: {
@@ -95,10 +115,12 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
bg: githubColor.overlay.bgColor, bg: githubColor.overlay.bgColor,
border: githubColor.borderColor.muted, border: githubColor.borderColor.muted,
}, },
link: githubColor.fgColor.muted,
}; };
const diff: Diff = { const diff: Diff = {
added: { added: {
fg: githubColor.bgColor.success.emphasis,
linenum: { linenum: {
bg: githubColor.diffBlob.addtionNum.bgColor, bg: githubColor.diffBlob.addtionNum.bgColor,
}, },
@@ -111,6 +133,7 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
}, },
}, },
removed: { removed: {
fg: githubColor.bgColor.danger.emphasis,
linenum: { linenum: {
bg: githubColor.diffBlob.deletionNum.bgColor, bg: githubColor.diffBlob.deletionNum.bgColor,
}, },
@@ -156,11 +179,8 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
input: { input: {
text: themeVars.color.text.self, text: themeVars.color.text.self,
background: githubColor.bgColor.muted, background: githubColor.bgColor.muted,
toggleBackgound: themeVars.color.body, toggleBackgound: githubColor.bgColor.inset,
border: { border: themeVars.color.light.border,
self: themeVars.color.light.border,
hover: themeVars.color.light.border,
},
}, },
light: { light: {
self: themeVars.color.body, self: themeVars.color.body,
@@ -189,7 +209,10 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
secondaryBg: "unset", secondaryBg: "unset",
expandButton: githubColor.diffBlob.hunkNum.bgColor.rest, expandButton: githubColor.diffBlob.hunkNum.bgColor.rest,
placeholderText: themeVars.color.text.light.num3, placeholderText: themeVars.color.text.light.num3,
editorLineHighlight: themeVars.color.primary.light.num5, editor: {
lineHighlight: themeVars.color.primary.light.num5,
selection: themeVars.color.editor.lineHighlight,
},
projectColumnBg: githubColor.bgColor.inset, projectColumnBg: githubColor.bgColor.inset,
caret: themeVars.color.text.dark, caret: themeVars.color.text.dark,
reaction: { reaction: {
@@ -220,6 +243,14 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
bg: githubColor.bgColor.attention.muted, bg: githubColor.bgColor.attention.muted,
}, },
overlayBackdrop: githubColor.overlay.backdrop.bgColor, overlayBackdrop: githubColor.overlay.backdrop.bgColor,
danger: themeVars.color.red.self,
transparency: {
grid: {
light: "#ffffff",
dark: "#e5e5e5",
},
},
workflowEdgeHover: githubColor.bgColor.accent.emphasis,
}; };
const github: Github = { const github: Github = {
@@ -231,6 +262,7 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
accent: githubColor.fgColor.accent, accent: githubColor.fgColor.accent,
success: githubColor.fgColor.success, success: githubColor.fgColor.success,
done: githubColor.fgColor.done, done: githubColor.fgColor.done,
onEmphasis: githubColor.fgColor.onEmphasis,
}, },
bgColor: { bgColor: {
accent: { accent: {
@@ -249,6 +281,9 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
done: { done: {
emphasis: githubColor.bgColor.done.emphasis, emphasis: githubColor.bgColor.done.emphasis,
}, },
neutral: {
emphasis: githubColor.bgColor.neutral.emphasis,
},
}, },
borderColor: { borderColor: {
accent: { accent: {
@@ -263,6 +298,7 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
done: { done: {
emphasis: githubColor.borderColor.done.emphasis, emphasis: githubColor.borderColor.done.emphasis,
}, },
emphasis: githubColor.borderColor.emphasis,
}, },
button: { button: {
default: { default: {
@@ -281,6 +317,7 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
bgColor: { bgColor: {
rest: githubColor.button.primary.bgColor.rest, rest: githubColor.button.primary.bgColor.rest,
hover: githubColor.button.primary.bgColor.hover, hover: githubColor.button.primary.bgColor.hover,
active: githubColor.button.primary.bgColor.active,
}, },
borderColor: { borderColor: {
rest: githubColor.borderColor.translucent, rest: githubColor.borderColor.translucent,
@@ -295,6 +332,7 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
bgColor: { bgColor: {
rest: githubColor.control.bgColor.rest, rest: githubColor.control.bgColor.rest,
hover: githubColor.button.danger.bgColor.hover, hover: githubColor.button.danger.bgColor.hover,
active: githubColor.button.danger.bgColor.active,
}, },
borderColor: { borderColor: {
hover: githubColor.borderColor.translucent, hover: githubColor.borderColor.translucent,
@@ -318,8 +356,11 @@ 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};`,
}, },
inset: `inset 0px 1px 0px 0px ${githubColor.shadow.inset}`,
resting: { resting: {
small: `0px 1px 1px 0px ${githubColor.shadow.resting.small}, 0px 1px 3px 0px ${githubColor.shadow.resting.small};`, small: `0px 1px 1px 0px ${githubColor.shadow.resting.small}, 0px 1px 3px 0px ${githubColor.shadow.resting.small};`,
// 此阴影用于工作流的流程图的节点悬浮效果, 该效果在 Gitea 中通过 svg, g 的 filter 实现, 而非 box-shadow
medium: `drop-shadow(0 1px 1px ${githubColor.shadow.floating.small}) drop-shadow(0 3px 6px ${githubColor.shadow.resting.medium})`,
}, },
}, },
underlineNav: { underlineNav: {
@@ -350,6 +391,7 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
}, },
}, },
}, },
workflowCardBg: githubColor.isDarkTheme ? githubColor.bgColor.muted : githubColor.bgColor.default,
}; };
return { return {
isDarkTheme: githubColor.isDarkTheme, isDarkTheme: githubColor.isDarkTheme,
src/core/index.ts
+19
View File
@@ -1 +1,20 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export { createTheme } from "./theme"; export { createTheme } from "./theme";
src/core/prettylights.ts
+20 -1
View File
@@ -1,3 +1,22 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import type { Chroma } from "src/types"; import type { Chroma } from "src/types";
export type prettylightsColor = { export type prettylightsColor = {
@@ -41,7 +60,7 @@ export function prettylights2Chroma(prettylights: prettylightsColor): Chroma {
namespace: prettylights.syntax.keyword, namespace: prettylights.syntax.keyword,
pseudo: prettylights.syntax.constant, pseudo: prettylights.syntax.constant,
reserved: prettylights.syntax.keyword, reserved: prettylights.syntax.keyword,
type: prettylights.syntax.markup.bold, type: prettylights.syntax.variable,
}, },
name: { name: {
self: prettylights.syntax.markup.bold, self: prettylights.syntax.markup.bold,
src/core/selectors.ts
+44
View File
@@ -0,0 +1,44 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export const root = ":root";
export const emoji = `.emoji[aria-label="check mark"],
.emoji[aria-label="currency exchange"],
.emoji[aria-label="TOP arrow"],
.emoji[aria-label="END arrow"],
.emoji[aria-label="ON! arrow"],
.emoji[aria-label="SOON arrow"],
.emoji[aria-label="heavy dollar sign"],
.emoji[aria-label="copyright"],
.emoji[aria-label="registered"],
.emoji[aria-label="trade mark"],
.emoji[aria-label="multiply"],
.emoji[aria-label="plus"],
.emoji[aria-label="minus"],
.emoji[aria-label="divide"],
.emoji[aria-label="curly loop"],
.emoji[aria-label="double curly loop"],
.emoji[aria-label="wavy dash"],
.emoji[aria-label="paw prints"],
.emoji[aria-label="musical note"],
.emoji[aria-label="musical notes"]
`;
export const overlayAppear = "overlayAppear";
export const overlayAppearDown = "overlayAppearDown";
export const overlayAppearUp = "overlayAppearUp";
src/core/styles.ts
+41
View File
@@ -0,0 +1,41 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { type StyleRule } from "@vanilla-extract/css";
import * as selectors from "./selectors";
// 出现动画
export const animation = {
animation: selectors.overlayAppear,
animationDuration: "80ms",
animationFillMode: "forwards",
animationTimingFunction: "ease-in",
} satisfies StyleRule;
// 向下出现动画
export const animationDown = {
animation: selectors.overlayAppearDown,
animationDuration: "200ms",
animationTimingFunction: "cubic-bezier(0.33, 1, 0.68, 1)",
} satisfies StyleRule;
// 向上出现动画
export const animationUp = {
animation: selectors.overlayAppearUp,
animationDuration: "200ms",
animationTimingFunction: "cubic-bezier(0.33, 1, 0.68, 1)",
} satisfies StyleRule;
src/core/theme.ts
+45 -60
View File
@@ -1,74 +1,59 @@
import { createGlobalTheme, globalStyle } from "@vanilla-extract/css"; /*!
import fs from "node:fs"; * Copyright (c) https://github.com/lutinglt
import path from "node:path"; *
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { createGlobalTheme, globalKeyframes, globalStyle } from "@vanilla-extract/css";
import { otherThemeVars, themeInfoVars, themeVars } from "src/types/vars"; import { otherThemeVars, themeInfoVars, themeVars } from "src/types/vars";
import * as selectors from "./selectors";
import type { MapLeafNodes, WithOptionalLayer } from "./types"; import type { MapLeafNodes, WithOptionalLayer } from "./types";
export type Theme = WithOptionalLayer<MapLeafNodes<typeof themeVars, string>>; export type Theme = WithOptionalLayer<MapLeafNodes<typeof themeVars, string>>;
export const overlayAppear = "overlay-appear"; // vite define 编译时注入的常量
export const animation = { declare const __THEME_VERSION__: string;
animation: overlayAppear,
animationDuration: "80ms",
animationFillMode: "forwards",
animationTimingFunction: "ease-in",
};
export const overlayAppearDown = "overlay-appear-down";
export const animationDown = `200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running ${overlayAppearDown}`;
export const overlayAppearUp = "overlay-appear-up";
export const animationUp = `200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running ${overlayAppearUp}`;
const emoji = `
.emoji[aria-label="check mark"],
.emoji[aria-label="currency exchange"],
.emoji[aria-label="TOP arrow"],
.emoji[aria-label="END arrow"],
.emoji[aria-label="ON! arrow"],
.emoji[aria-label="SOON arrow"],
.emoji[aria-label="heavy dollar sign"],
.emoji[aria-label="copyright"],
.emoji[aria-label="registered"],
.emoji[aria-label="trade mark"],
.emoji[aria-label="multiply"],
.emoji[aria-label="plus"],
.emoji[aria-label="minus"],
.emoji[aria-label="divide"],
.emoji[aria-label="curly loop"],
.emoji[aria-label="double curly loop"],
.emoji[aria-label="wavy dash"],
.emoji[aria-label="paw prints"],
.emoji[aria-label="musical note"],
.emoji[aria-label="musical notes"]
`;
// 版本号: 版本号.YYMMDD
const now = new Date();
const year = now.getFullYear().toString().slice(-2);
const month = (now.getMonth() + 1).toString().padStart(2, "0");
const day = now.getDate().toString().padStart(2, "0");
const pkgPath = path.join(__dirname, "../..", "package.json");
const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
const version = `"${pkg.version}.${year}${month}${day}"`;
export function createTheme(theme: Theme): void { export function createTheme(theme: Theme): void {
const isDarkTheme: boolean = JSON.parse(theme.isDarkTheme); const isDarkTheme: boolean = JSON.parse(theme.isDarkTheme);
createGlobalTheme(":root", themeInfoVars, { version }); // 全局主题变量
createGlobalTheme(":root", themeVars, theme); createGlobalTheme(selectors.root, themeInfoVars, { version: `"${__THEME_VERSION__}"` });
createGlobalTheme(":root", otherThemeVars, { createGlobalTheme(selectors.root, themeVars, theme);
createGlobalTheme(selectors.root, otherThemeVars, {
border: { radius: "6px" }, border: { radius: "6px" },
color: { color: { git: "#f05133" },
git: "#f05133", checkbox: { size: "14px" },
light: {
mimicEnabled: isDarkTheme
? "rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)))"
: "rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)))",
},
},
}); });
globalStyle(":root", { // 全局样式
globalStyle(selectors.root, {
accentColor: themeVars.color.accent, accentColor: themeVars.color.accent,
colorScheme: isDarkTheme ? "dark" : "light", colorScheme: isDarkTheme ? "dark" : "light",
}); });
if (isDarkTheme) globalStyle(emoji, { filter: "invert(100%) hue-rotate(180deg)" }); if (isDarkTheme) globalStyle(selectors.emoji, { filter: "invert(100%) hue-rotate(180deg)" });
// 全局动画
globalKeyframes(selectors.overlayAppear, {
"0%": { opacity: 0 },
"100%": { opacity: 1 },
});
globalKeyframes(selectors.overlayAppearDown, {
"0%": { opacity: 0, transform: "translateY(-8px)" },
"100%": { opacity: 1, transform: "translateY(0)" },
});
globalKeyframes(selectors.overlayAppearUp, {
"0%": { opacity: 0, transform: "translateY(8px)" },
"100%": { opacity: 1, transform: "translateY(0)" },
});
} }
src/core/types.ts
+19
View File
@@ -1,3 +1,22 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
type Primitive = string | boolean | number | null | undefined; type Primitive = string | boolean | number | null | undefined;
type Tokens = { [key: string]: string | Tokens }; type Tokens = { [key: string]: string | Tokens };
src/core/vite.ts
+57 -9
View File
@@ -1,3 +1,22 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { execSync } from "node:child_process"; import { execSync } from "node:child_process";
import crypto from "node:crypto"; import crypto from "node:crypto";
import fs from "node:fs"; import fs from "node:fs";
@@ -50,9 +69,33 @@ export function themeInput(outDir: string, themeDir: string, mode: string): { [k
return input; return input;
} }
const colorBlindMap: Record<string, string> = {
colorblind: "red-green",
tritanopia: "blue-yellow",
};
function giteaThemeMetaInfo(nameGroup: string[]): string { function giteaThemeMetaInfo(nameGroup: string[]): string {
const displayName = nameGroup.map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" "); const colorScheme = nameGroup[nameGroup.length - 1];
return `gitea-theme-meta-info{--theme-display-name:"GitHub ${displayName}";}`; // 不要省略分号, 也不要追加任何变量, 否则 Gitea 不识别 const colorBlindKey = nameGroup.find(word => word in colorBlindMap);
const colorBlindType = colorBlindKey ? colorBlindMap[colorBlindKey] : "";
// 将色盲名称放在最后
// 调整顺序: 去除 colorBlindKey 和 colorScheme, 把 colorScheme 放回倒数第二, colorBlindKey 替换后放末尾
const sorted = [
...nameGroup.filter(word => word !== colorBlindKey && word !== colorScheme),
colorScheme,
...(colorBlindKey
? colorBlindKey === "colorblind"
? ["protanopia", "and", "deuteranopia"]
: [colorBlindKey]
: []),
];
const displayName = sorted.map(word => word[0].toUpperCase() + word.slice(1).toLowerCase()).join(" ");
return `gitea-theme-meta-info {
--theme-display-name: "GitHub ${displayName}";${colorBlindType ? `\n --theme-colorblind-type: "${colorBlindType}";` : ""}
--theme-color-scheme: "${colorScheme}";
}
`; // 不要省略分号, 也不要追加任何变量, 否则 Gitea 不识别
} }
const prefix = "theme-github-"; const prefix = "theme-github-";
@@ -82,7 +125,8 @@ export function themePlugin(): Plugin {
// 生成所有的主题文件 // 生成所有的主题文件
for (const [key, value] of Object.entries(bundle)) { for (const [key, value] of Object.entries(bundle)) {
// 仅为了类型检查, 逻辑上输出中全是 asset 类型 // 仅为了类型检查, 逻辑上输出中全是 asset 类型
if (value.type === "asset") { // vite8 中 bundle 删除后依旧有 styles.css, 追加判断需要有入口的原始文件名
if (value.type === "asset" && value.originalFileNames.length > 0) {
const name = `${prefix}${key}`; const name = `${prefix}${key}`;
const fileName = `${prefix}${value.fileName}`; const fileName = `${prefix}${value.fileName}`;
const originalFileName = value.originalFileNames.pop(); const originalFileName = value.originalFileNames.pop();
@@ -122,6 +166,7 @@ export function themePlugin(): Plugin {
const user = process.env.SSH_USER || "root"; const user = process.env.SSH_USER || "root";
const theme_path = process.env.GITEA_THEME_PATH; const theme_path = process.env.GITEA_THEME_PATH;
const gitea_path = process.env.GITEA_PATH; const gitea_path = process.env.GITEA_PATH;
const sync_tmpl = process.env.SYNC_TMPL === "true";
if (server) { if (server) {
try { try {
if (theme_path) { if (theme_path) {
@@ -129,14 +174,18 @@ export function themePlugin(): Plugin {
console.log("[themePlugin] exec:", cmd); console.log("[themePlugin] exec:", cmd);
execSync(cmd, { stdio: "inherit" }); execSync(cmd, { stdio: "inherit" });
} else { } else {
console.log("[themePlugin] no GITEA_THEME_PATH, skip upload"); console.log("[themePlugin] no GITEA_THEME_PATH, skip upload theme");
} }
if (gitea_path) { if (gitea_path) {
const cmd = `scp -r templates ${user}@${server}:${gitea_path}`; if (sync_tmpl) {
console.log("[themePlugin] exec:", cmd); const cmd = `scp -r templates ${user}@${server}:${gitea_path}`;
execSync(cmd, { stdio: "inherit" }); console.log("[themePlugin] exec:", cmd);
execSync(cmd, { stdio: "inherit" });
} else {
console.log("[themePlugin] not set SYNC_TMPL=true, skip upload templates");
}
} else { } else {
console.log("[themePlugin] no GITEA_TMPL_PATH, skip upload"); console.log("[themePlugin] no GITEA_PATH, skip upload templates");
} }
} catch (_) { } catch (_) {
// continue regardless of error // continue regardless of error
@@ -144,7 +193,6 @@ export function themePlugin(): Plugin {
} else { } else {
console.log("[themePlugin] no SSH_SERVER, skip upload"); console.log("[themePlugin] no SSH_SERVER, skip upload");
} }
console.log("[themePlugin] exec end.");
}, },
}; };
} }
src/functions/index.ts
+20 -1
View File
@@ -1,2 +1,21 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export { scaleColorLight } from "./scss"; export { scaleColorLight } from "./scss";
export { fallbackVar } from "./var"; export { extractVarName, fallbackVar } from "./var";
src/functions/scss.ts
+19
View File
@@ -1,3 +1,22 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { hsl, parseToHsl } from "polished"; import { hsl, parseToHsl } from "polished";
/** /**
src/functions/var.ts
+30 -2
View File
@@ -1,8 +1,26 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import type { CSSVarFunction } from "src/core/types"; import type { CSSVarFunction } from "src/core/types";
type CSSFallbackVar = `var(--${string}, ${string})`; type CSSFallbackVar = `var(--${string}, ${string})`;
/** /** 设置 CSS 变量的回退值
* 设置 CSS 变量的回退值
* @param cssvar `var(--${string})` * @param cssvar `var(--${string})`
* @param fallback * @param fallback
* @returns `var(--${string}, fallback)` * @returns `var(--${string}, fallback)`
@@ -11,3 +29,13 @@ export function fallbackVar(cssvar: CSSVarFunction, fallback: string): CSSFallba
const var_name = cssvar.replace("var(--", "").replace(")", ""); const var_name = cssvar.replace("var(--", "").replace(")", "");
return `var(--${var_name}, ${fallback})`; return `var(--${var_name}, ${fallback})`;
} }
type CSSVarName = `--${string}`;
/** 提取 CSS 变量名
* @param cssvar `var(--${string})`
* @returns `--${string}`
*/
export function extractVarName(cssvar: CSSVarFunction): CSSVarName {
const var_name = cssvar.replace("var(--", "").replace(")", "");
return `--${var_name}`;
}
src/index.ts
+19
View File
@@ -1,3 +1,22 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export { defaultDarkChroma, defaultLightChroma } from "./core/chroma"; export { defaultDarkChroma, defaultLightChroma } from "./core/chroma";
export { defineTheme, type ThemeColor } from "./core/color"; export { defineTheme, type ThemeColor } from "./core/color";
export type { Theme } from "./core/theme"; export type { Theme } from "./core/theme";
src/types/color/chroma.ts
+19
View File
@@ -1,3 +1,22 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
// 注释来自 AI // 注释来自 AI
export const chroma = { export const chroma = {
textWhiteSpace: "text-white-space", textWhiteSpace: "text-white-space",
src/types/color/console.ts
+21
View File
@@ -1,3 +1,22 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const ansiColor = { const ansiColor = {
/** 黑色 */ /** 黑色 */
black: null, black: null,
@@ -46,4 +65,6 @@ export const console = {
/** 菜单边框色 */ /** 菜单边框色 */
border: null, border: null,
}, },
/** Action 页面日志部分里链接颜色*/
link: null,
}; };
src/types/color/diff.ts
+21
View File
@@ -1,9 +1,30 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const row = { const row = {
bg: null, bg: null,
border: null, border: null,
}; };
const line = { const line = {
/** 对比状态栏上统计所有行数的文字颜色 */
fg: null,
/** 行号 */ /** 行号 */
linenum: { linenum: {
bg: null, bg: null,
src/types/color/github.ts
+53
View File
@@ -1,3 +1,22 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export const github = { export const github = {
avatar: { avatar: {
/** 头像的背景颜色 */ /** 头像的背景颜色 */
@@ -25,6 +44,10 @@ export const github = {
* @svg `issueClosed` 工单已关闭图标颜色 * @svg `issueClosed` 工单已关闭图标颜色
*/ */
done: null, done: null,
/** 特别强调的文本颜色
* @input `checkBoxAndRadio` 复选框和单选框的文本颜色
*/
onEmphasis: null,
}, },
/** 用于 background 属性的颜色 */ /** 用于 background 属性的颜色 */
bgColor: { bgColor: {
@@ -72,6 +95,12 @@ export const github = {
*/ */
emphasis: null, emphasis: null,
}, },
neutral: {
/** 中性的背景颜色
* @action_summary `summaryView` 节点上的端口的填充色
*/
emphasis: null,
},
}, },
borderColor: { borderColor: {
accent: { accent: {
@@ -104,6 +133,10 @@ export const github = {
*/ */
emphasis: null, emphasis: null,
}, },
/** 强调边框颜色
* @input `checkBoxAndRadio` 复选框和单选框的边框颜色
*/
emphasis: null,
}, },
button: { button: {
/** 普通按钮 */ /** 普通按钮 */
@@ -138,6 +171,10 @@ export const github = {
* @setting `tinyHoverStyle` 按钮的悬停背景颜色 * @setting `tinyHoverStyle` 按钮的悬停背景颜色
*/ */
hover: null, hover: null,
/** 激活色
* @button `baseButton` primary button 点击时的颜色
*/
active: null,
}, },
borderColor: { borderColor: {
/** 静止色 /** 静止色
@@ -171,6 +208,10 @@ export const github = {
* @button `redButton` 红色按钮悬停颜色 * @button `redButton` 红色按钮悬停颜色
*/ */
hover: null, hover: null,
/** 激活色
* @button `redButton` 红色按钮点击时的颜色
*/
active: null,
}, },
borderColor: { borderColor: {
/** 悬停色 /** 悬停色
@@ -224,6 +265,10 @@ export const github = {
*/ */
small: null, small: null,
}, },
/** 内嵌阴影
* @input `input` 输入框阴影
*/
inset: null,
resting: { resting: {
/** 静止阴影 /** 静止阴影
* @button `primaryStyle` 主色调按钮阴影 * @button `primaryStyle` 主色调按钮阴影
@@ -231,6 +276,10 @@ export const github = {
* @setting `button` 红色按钮阴影 * @setting `button` 红色按钮阴影
*/ */
small: null, small: null,
/** 中等阴影
* @workflow_summary `summaryView` 节点悬浮时的阴影
*/
medium: null,
}, },
}, },
underlineNav: { underlineNav: {
@@ -270,4 +319,8 @@ export const github = {
}, },
}, },
}, },
/** 工作流流程图节点背景色
* @workflow_summary `summaryView` 节点背景色
*/
workflowCardBg: "github-workflow-card-bg",
}; };
src/types/color/index.ts
+19
View File
@@ -1,3 +1,22 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export { chroma } from "./chroma"; export { chroma } from "./chroma";
export { ansi, console } from "./console"; export { ansi, console } from "./console";
export { diff } from "./diff"; export { diff } from "./diff";
src/types/color/main.ts
+19
View File
@@ -1,3 +1,22 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const num = { num1: null, num2: null, num3: null, num4: null, num5: null, num6: null, num7: null }; const num = { num1: null, num2: null, num3: null, num4: null, num5: null, num6: null, num7: null };
const alpha = { const alpha = {
src/types/color/message.ts
+19
View File
@@ -1,3 +1,22 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const msg = { bg: null, border: null, text: null }; const msg = { bg: null, border: null, text: null };
const error = { ...msg, bg: { self: null, active: null, hover: null } }; const error = { ...msg, bg: { self: null, active: null, hover: null } };
src/types/color/named.ts
+19
View File
@@ -1,3 +1,22 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const baseColor = { self: null, light: null, dark: { num1: null, num2: null } }; const baseColor = { self: null, light: null, dark: { num1: null, num2: null } };
const commitColor = { const commitColor = {
src/types/color/other.ts
+45 -11
View File
@@ -1,10 +1,25 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export const otherAuto = { export const otherAuto = {
/** 未知 */ /** 未知 */
git: null, git: null,
light: {
/** 不知道什么用, gitea css 中没有使用这个属性的 */
mimicEnabled: "color-light-mimic-enabled",
},
}; };
export const other = { export const other = {
@@ -49,12 +64,11 @@ export const other = {
/** 选中时的文字颜色 */ /** 选中时的文字颜色 */
text: null, text: null,
background: null, background: null,
/** 找不到, 不知道啥玩意, 似乎是和复选框有关的东西 */ /** 滑块按钮的背景色, 不能与背景色一致
* @example 管理设置中启用/禁用头像
*/
toggleBackgound: "color-input-toggle-background", toggleBackgound: "color-input-toggle-background",
border: { border: null,
self: null,
hover: null,
},
}, },
light: { light: {
/** 多行下交替行的强调色, 例提交历史 */ /** 多行下交替行的强调色, 例提交历史 */
@@ -101,8 +115,13 @@ export const other = {
expandButton: "color-expand-button", expandButton: "color-expand-button",
/** 不知道 */ /** 不知道 */
placeholderText: "color-placeholder-text", placeholderText: "color-placeholder-text",
/** 不知道, css 没有 */ /** 在线编辑器 */
editorLineHighlight: "color-editor-line-highlight", editor: {
/** 行高亮色 */
lineHighlight: "color-editor-line-highlight",
/** 选中行背景色 */
selection: null,
},
/** 仓库项目页面列的背景色 */ /** 仓库项目页面列的背景色 */
projectColumnBg: "color-project-column-bg", projectColumnBg: "color-project-column-bg",
/** caret-color 属性 */ /** caret-color 属性 */
@@ -153,4 +172,19 @@ export const other = {
}, },
/** 叠加背景色, 比如弹窗时遮蔽页面其他部分的背景色 */ /** 叠加背景色, 比如弹窗时遮蔽页面其他部分的背景色 */
overlayBackdrop: "color-overlay-backdrop", overlayBackdrop: "color-overlay-backdrop",
/** CSS 中不存在, 默认指向 --color-red 即可
* @pr #35911 此 Gitea 提交中添加的颜色
*/
danger: null,
/** 图像背景中的透明度网格颜色
* @example svg 图像背景中的网格颜色
*/
transparency: {
grid: {
light: null,
dark: null,
},
},
/** Action 页面工作流可视化图像中悬停任务时与其他任务连接的线的颜色 */
workflowEdgeHover: "color-workflow-edge-hover",
}; };
src/types/index.ts
+19
View File
@@ -1,3 +1,22 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import type { MapLeafNodes } from "src/core/types"; import type { MapLeafNodes } from "src/core/types";
import * as color from "./color"; import * as color from "./color";
src/types/vars.ts
+20 -1
View File
@@ -1,3 +1,22 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { createGlobalThemeContract } from "@vanilla-extract/css"; import { createGlobalThemeContract } from "@vanilla-extract/css";
import * as color from "./color"; import * as color from "./color";
@@ -30,7 +49,7 @@ const vars = {
github: color.github, github: color.github,
}; };
const otherVars = { border: { radius: null }, color: { ...color.otherAuto } }; const otherVars = { border: { radius: null }, color: { ...color.otherAuto }, checkbox: { size: null } };
const customVars = { const customVars = {
branchMenuWidth: "branch-menu-width", branchMenuWidth: "branch-menu-width",
styles/components/actions.ts
-323
View File
@@ -1,323 +0,0 @@
import { animationDown } from "src/core/theme";
import { css, otherThemeVars, themeVars } from "src/types/vars";
// 仓库 Actions 页面
export const actions = css`
.page-content.repository.actions .ui.grid {
.four.wide {
border-right: 1px solid ${themeVars.color.light.border};
min-height: calc(-104px + 100vh);
&:before {
content: "Actions";
display: block;
font-size: 20px;
font-weight: 600;
margin-top: 6px;
margin-bottom: 24px;
}
}
.twelve.wide {
&:before {
content: "Workflow Runs";
display: block;
font-size: 20px;
margin-top: 6px;
margin-bottom: 24px;
margin-left: 2px;
}
// 工作流列表标题栏菜单
.ui.secondary.menu {
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};
padding: 16px;
margin-bottom: 0;
> .ui.dropdown {
color: ${themeVars.color.text.light.num1};
}
}
.ui.info.message {
border-radius: 0;
border-left-color: ${themeVars.color.light.border};
border-right-color: ${themeVars.color.light.border};
margin: 0;
~ .run-list {
border-top: 0;
}
}
.run-list {
border: 1px solid ${themeVars.color.light.border};
border-bottom-left-radius: ${otherThemeVars.border.radius};
border-bottom-right-radius: ${otherThemeVars.border.radius};
// 分支标签按钮
.run-list-ref {
background-color: ${themeVars.github.bgColor.accent.muted};
color: ${themeVars.github.fgColor.accent};
font-family: var(--fonts-monospace);
font-weight: 400;
padding: 0px 6px;
&:hover {
background-color: ${themeVars.github.bgColor.accent.muted};
color: ${themeVars.github.fgColor.accent};
text-decoration-line: underline !important;
}
}
// 标签右侧任务信息
.run-list-item-right {
color: ${themeVars.color.text.light.num1};
}
.flex-item {
padding: 16px;
line-height: 18px;
.flex-item-leading {
align-self: flex-start;
margin-top: 2px;
}
.flex-item-main {
gap: 0.5rem;
}
.flex-item-trailing {
> .ui.label {
border-radius: ${otherThemeVars.border.radius};
}
> .ui.dropdown.jump {
border-radius: ${otherThemeVars.border.radius};
color: ${themeVars.color.text.light.num1};
&:hover {
background-color: ${themeVars.github.control.transparent.bgColor.hover};
}
.menu > .item:hover {
color: ${themeVars.color.text.self} !important;
}
}
}
}
}
}
}
`;
// 避免手机下左侧工作流项空白过长
export const actionsMedia = css`
@media (max-width: 767.98px) {
.page-content.repository.actions .ui.grid .four.wide {
min-height: auto;
}
}
`;
// 工作流禁用标签
export const label = css`
.ui.vertical.menu .item > .ui.red.label {
color: ${themeVars.color.error.text};
border: 1px solid ${themeVars.color.error.border};
background: ${themeVars.color.error.bg.self};
margin-top: 0.5px;
}
`;
// 手动工作流下拉列表
export const runWorkflow = css`
#runWorkflowDispatchForm {
// 分支选择按钮
.ui.dropdown.button.branch-selector-dropdown .svg.octicon-git-branch {
margin-right: 6px;
}
}
`;
// 工作流详情页标题
export const actionViewHeader = css`
.action-view-header {
.action-commit-summary {
a:hover {
text-decoration: inherit;
}
// 提前哈希
> a.muted:first-of-type {
text-decoration: underline;
}
// 分支标签按钮
.ui.ui.ui.label {
background-color: ${themeVars.github.bgColor.accent.muted};
border-radius: ${otherThemeVars.border.radius};
color: ${themeVars.github.fgColor.accent};
> a {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
font-weight: 400;
opacity: 1;
}
}
}
}
`;
// 工作流左侧作业列表
export const actionViewLeft = css`
.action-view-left.action-view-left.action-view-left {
margin-right: 28px;
border-top: 1px solid ${themeVars.color.console.border};
max-width: 22vw;
&:before {
content: "Jobs";
color: ${themeVars.color.console.fg.subtle};
font-size: 12px;
font-weight: 600;
position: relative;
display: inline-block;
margin-top: 22px;
top: -8px;
left: 15px;
}
.job-group-section {
padding-right: 8px;
padding-bottom: 8px;
border-bottom: 1px solid ${themeVars.color.console.border};
.job-brief-list {
gap: 4px;
// 双重确保覆盖原始样式
.job-brief-item.job-brief-item {
border-radius: ${otherThemeVars.border.radius} !important;
padding: 8px;
position: relative;
margin-left: 0.5rem;
&:hover {
background-color: ${themeVars.color.console.hoverBg};
}
&.selected {
&:after {
overflow: visible;
background: ${themeVars.github.borderColor.accent.emphasis};
border-radius: ${otherThemeVars.border.radius};
content: "";
height: 24px;
left: calc(0.5rem * -1);
position: absolute;
top: calc(50% - 12px);
width: 4px;
}
}
.job-brief-item-right {
svg.job-brief-rerun {
display: none;
color: ${themeVars.color.console.fg.subtle};
&:hover {
color: ${themeVars.color.text.self};
}
}
.step-summary-duration {
color: ${themeVars.color.console.fg.subtle};
font-family: var(--fonts-monospace);
font-size: 12px;
}
}
&:hover {
.job-brief-item-right {
svg.job-brief-rerun {
display: inline-block;
}
}
}
}
}
}
}
`;
// 工作流右侧作业步骤日志详情
export const actionViewRight = css`
.action-view-right {
/* 提前加载高度和滚动条 */
min-height: calc(100vh - 245px);
// 作业详情页标题
.job-info-header {
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-right {
.ui.dropdown {
> .button {
border: unset;
padding: 7px !important;
}
.menu > .item > i.icon {
margin-right: 2px;
}
}
}
}
.job-step-container {
padding: 8px;
.job-step-section {
margin: 0 4px 4px;
// 步骤标题, 双重确保覆盖原始样式
.job-step-summary.job-step-summary {
color: ${themeVars.color.console.fg.subtle};
padding: 8px !important;
height: 36px;
&.selected {
// 滚动时固定在顶部的高度与 job-info-header 高度相同
top: 80px;
}
&.step-expandable:hover {
color: ${themeVars.color.console.fg.subtle};
}
.tw-mr-2:not(.svg) svg.svg {
margin: 1.5px 6px 0px 2px;
}
/* 绿色步骤状态改为白色 */
svg.svg.text.green {
color: ${themeVars.color.console.fg.subtle} !important;
}
&.selected {
/* 不被 hover 效果影响 */
color: ${themeVars.color.console.fg.self} !important;
background-color: ${themeVars.color.console.activeBg} !important;
svg.svg.text.green {
color: ${themeVars.color.console.fg.self} !important;
}
}
// 步骤耗时
.step-summary-duration {
font-size: 12px;
font-family: var(--fonts-monospace);
}
}
// 步骤日志
.job-step-logs {
animation: ${animationDown};
/* 日志字体颜色白色 */
.job-log-line {
color: ${themeVars.color.console.fg.self};
/* 被 hover 时覆盖 ANSI 颜色 */
.log-msg:hover * {
color: ${themeVars.color.console.fg.self} !important;
}
}
}
}
}
}
`;
styles/components/actions/action_svg.ts
+35
View File
@@ -0,0 +1,35 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { css, themeVars } from "src/types/vars";
// 修改 action 页面 svg 颜色 (主要为了覆盖工作流状态中的白色图标)
export const actionSVG = css`
.page-content.repository.actions,
.action-view-header,
.action-view-body {
svg {
color: ${themeVars.color.text.light.num1};
&.tw-text-text,
&.tw-text-text-light {
color: ${themeVars.color.text.light.num1} !important;
}
}
}
`;
styles/components/actions/actions.ts
+169
View File
@@ -0,0 +1,169 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { css, otherThemeVars, themeVars } from "src/types/vars";
// 仓库 Actions 页面
export const actions = css`
// 避免锚中设置界面里的 Actions
.page-content.repository.actions:not(.settings) .flex-container {
// Actions 列表
.flex-container-nav:before {
content: "Actions";
display: block;
font-size: 20px;
font-weight: 600;
margin-top: 6px;
margin-bottom: 8px;
}
// 工作流列表
.flex-container-main {
// 工作流列表标题栏菜单
.ui.top.attached.header {
padding: 16px;
&:has(+ .ui.info.attached.message) {
border-bottom: 0;
}
.ui.secondary.menu > .ui.dropdown {
color: ${themeVars.color.text.light.num1};
}
}
// 事件触发器
.ui.info.attached.message {
padding: 18px 16px;
// 事件触发器按钮
.ui.mini.button {
padding: 3px 12px;
min-height: 27px;
font-size: 12px;
}
}
// 工作流列表
.ui.attached.segment {
padding: 0;
border: 0;
.run-list {
border: 1px solid ${themeVars.color.light.border};
border-bottom-left-radius: ${otherThemeVars.border.radius};
border-bottom-right-radius: ${otherThemeVars.border.radius};
border-top: 0;
font-size: 12px;
// 分支标签按钮
.run-list-ref {
background-color: ${themeVars.github.bgColor.accent.muted};
color: ${themeVars.github.fgColor.accent};
font-family: var(--fonts-monospace);
font-weight: 400;
padding: 0px 6px;
&:hover {
background-color: ${themeVars.github.bgColor.accent.muted};
color: ${themeVars.github.fgColor.accent};
text-decoration-line: underline !important;
}
}
// 标签右侧任务信息
.run-list-item-right {
color: ${themeVars.color.text.light.num1};
}
.flex-item {
padding: 16px;
line-height: 18px;
.flex-item-leading {
align-self: flex-start;
margin-top: 2px;
}
.flex-item-main {
gap: 0.5rem;
}
.flex-item-trailing {
> .ui.label {
border-radius: ${otherThemeVars.border.radius};
}
> .ui.dropdown.jump {
border-radius: ${otherThemeVars.border.radius};
color: ${themeVars.color.text.light.num1};
&:hover {
background-color: ${themeVars.github.control.transparent.bgColor.hover};
}
.menu > .item {
font-size: 12px;
gap: 4px;
&:hover {
color: ${themeVars.color.text.self} !important;
}
}
}
}
}
}
}
}
}
`;
// 工作流禁用标签
export const label = css`
.page-content.repository.actions:not(.settings) .ui.vertical.menu .item > .ui.red.label {
color: ${themeVars.color.error.text};
border: 1px solid ${themeVars.color.error.border};
background: ${themeVars.color.error.bg.self};
}
`;
// 手动工作流下拉列表
export const runWorkflow = css`
#runWorkflowDispatchForm {
font-size: 12px;
// 描述类标签
.ui.field label {
font-weight: 600;
}
// use workflow from 描述
.ui.inline.field {
> :first-child {
margin-right: 8px;
}
> :only-child {
margin-right: 0;
}
}
// 分支选择按钮
.ui.dropdown.button.branch-selector-dropdown {
padding: 3px 21px 3px 12px;
min-height: 27px;
gap: 4px;
font-size: 12px;
.text {
line-height: 20px;
}
}
#runWorkflowDispatchModalInputs {
.ui.field > label {
margin-bottom: 6px;
}
// 运行工作流按钮
.ui.tiny.button {
padding: 0px 8px;
min-height: 27px;
}
}
}
`;
styles/components/actions/index.ts
+24
View File
@@ -0,0 +1,24 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import "./action_svg";
import "./actions";
import "./workflow_runs";
import "./workflow_steps";
import "./workflow_summary";
styles/components/actions/workflow_runs.ts
+140
View File
@@ -0,0 +1,140 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { css, otherThemeVars, themeVars } from "src/types/vars";
// 工作流详情页标题
export const actionViewHeader = css`
.action-view-header {
.action-commit-summary {
// yml 文件名
> span:first-child {
color: ${themeVars.github.fgColor.accent};
b {
font-weight: 400;
}
}
a:hover {
text-decoration: inherit;
}
// 提交哈希
> a.muted:first-of-type {
text-decoration: underline;
}
// 提交作者
> a.muted:last-of-type {
font-weight: 600;
}
// 分支标签按钮
.ui.ui.ui.label {
background-color: ${themeVars.github.bgColor.accent.muted};
border-radius: ${otherThemeVars.border.radius};
color: ${themeVars.github.fgColor.accent};
> a {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
font-weight: 400;
opacity: 1;
}
}
}
}
`;
// 工作流左侧作业列表
export const actionViewLeft = css`
.action-view-left.action-view-left.action-view-left {
margin-right: 28px;
max-width: 22vw;
.left-list-header {
font-size: 12px;
font-weight: 600;
margin-left: 0.5rem;
}
// 双重确保覆盖原始样式
.job-brief-item.job-brief-item {
border-radius: ${otherThemeVars.border.radius} !important;
padding: 8px;
position: relative;
margin-left: 0.5rem;
&:hover {
background-color: ${themeVars.color.console.hoverBg};
}
&.selected {
&:after {
overflow: visible;
background: ${themeVars.github.borderColor.accent.emphasis};
border-radius: ${otherThemeVars.border.radius};
content: "";
height: 24px;
left: calc(0.5rem * -1);
position: absolute;
top: calc(50% - 12px);
width: 4px;
}
}
// 状态图标
a > span:first-child {
display: flex;
align-items: center;
}
// 默认隐藏重新运行按钮
a > svg.link-action {
display: none;
color: ${themeVars.color.console.fg.subtle} !important;
&:hover {
color: ${themeVars.color.text.self} !important;
}
}
// 运行时长
a > span:last-child {
color: ${themeVars.color.console.fg.subtle};
font-size: 12px;
}
// 鼠标移入时显示重新运行按钮
&:hover a > svg.link-action {
display: inline-block;
}
}
// Run Details 列表
.ui.relaxed.list:last-of-type {
padding: 0;
.item {
border-radius: ${otherThemeVars.border.radius} !important;
padding: 8px;
&:hover {
background-color: ${themeVars.color.console.hoverBg};
}
a {
color: inherit;
&:hover {
text-decoration: none;
}
}
}
}
}
`;
export const actionViewLeftMobile = css`
@media (max-width: 767.98px) {
.action-view-left.action-view-left.action-view-left {
max-width: none;
}
}
`;
styles/components/actions/workflow_steps.ts
+122
View File
@@ -0,0 +1,122 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { animationDown } from "src/core/styles";
import { css, themeVars } from "src/types/vars";
// 工作流右侧作业步骤日志详情
export const actionViewRight = css`
.action-view-right {
box-shadow: ${themeVars.github.shadow.resting.small};
/* 提前加载高度和滚动条 */
min-height: calc(100vh - 245px);
// 作业详情页标题
.job-info-header {
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-right {
.ui.dropdown {
> .button {
background: unset;
border: unset;
padding: 7px !important;
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
}
}
.menu > .item > i.icon {
margin-right: 2px;
}
}
}
}
.job-step-container {
padding: 8px;
.job-step-section {
margin: 0 4px 4px;
// 步骤标题, 双重确保覆盖原始样式
.job-step-summary.job-step-summary {
color: ${themeVars.color.console.fg.subtle};
padding: 8px !important;
height: 36px;
&.selected {
// 滚动时固定在顶部的高度与 job-info-header 高度相同
top: 80px;
}
&.step-expandable:hover {
color: ${themeVars.color.console.fg.subtle};
}
.tw-mr-2:not(.svg) svg.svg {
margin: 1.5px 6px 0px 2px;
}
/* 绿色步骤状态改为白色 */
svg.tw-text-green {
color: ${themeVars.color.console.fg.subtle} !important;
}
&.selected {
/* 不被 hover 效果影响 */
color: ${themeVars.color.console.fg.self} !important;
background-color: ${themeVars.color.console.activeBg} !important;
svg.tw-text-green {
color: ${themeVars.color.console.fg.self} !important;
}
}
// 步骤耗时
.step-summary-duration {
font-size: 12px;
font-family: var(--fonts-monospace);
}
}
// 步骤日志
.job-step-logs {
${animationDown};
/* 日志字体颜色白色 */
.job-log-line {
color: ${themeVars.color.console.fg.self};
// 日志
.log-msg:hover {
//被 hover 时覆盖 ANSI 颜色
* {
color: ${themeVars.color.console.fg.self};
}
// 日志超链接
a:hover {
color: ${themeVars.color.primary.self} !important;
}
}
}
}
}
}
}
`;
styles/components/actions/workflow_summary.ts
+133
View File
@@ -0,0 +1,133 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { css, themeVars } from "src/types/vars";
export const summaryView = css`
.action-view-right:has(.action-run-summary-view) {
min-height: auto;
}
.action-view-right .action-run-summary-view {
// 工作流运行信息
.action-run-summary-block {
background: ${themeVars.color.body};
> .flex-text-block {
// 工作流触发方式和触发时间
&:first-child {
font-size: 12px;
gap: 4px;
}
// 工作流运行状态和运行时间
&:last-child {
color: ${themeVars.color.console.fg.self};
gap: 8px;
span {
font-weight: 600;
line-height: 1;
}
}
}
}
// 流程图
.workflow-graph {
// 流程图工作流信息标题
.graph-header {
background: ${themeVars.color.console.bg};
border-bottom: 0;
padding: 16px;
gap: 16px;
// 流程图标题(目前仅为解释, 内容为 Workflow Dependencies), 无需显示
.graph-title {
display: none;
}
// 流程图信息
.graph-stats {
align-self: flex-start;
font-size: 12px;
column-gap: 4px;
}
// 流程图操作按钮组
> .flex-text-block {
gap: 8px;
.ui.compact.tiny.button {
width: 28px;
height: 28px;
min-height: 28px;
padding: 0;
}
}
}
// 流程图
.graph-container {
background: ${themeVars.color.console.bg};
.graph-svg {
// 节点之间的连线
.node-edge {
stroke: ${themeVars.color.light.border};
stroke-width: 2px;
}
// 高亮连线
.highlighted-edge {
stroke-width: 3px !important;
}
&:has(.highlighted-edge) {
// 有高亮线时, 降低其他线的颜色, 避免后面 path 未高亮元素遮挡高亮线
.node-edge {
opacity: 0.3;
&.highlighted-edge {
opacity: 1;
}
}
}
.job-node-group {
// 节点
.job-rect {
fill: ${themeVars.github.workflowCardBg};
stroke-width: 1px;
}
// 节点上的端口
.node-port {
r: 5.5;
fill: ${themeVars.github.bgColor.neutral.emphasis};
stroke: ${themeVars.color.menu};
stroke-width: 3px;
}
&:hover {
filter: ${themeVars.github.shadow.resting.medium};
// 保留 Gitea 节点悬浮色, 因为无法实现 GitHub 悬浮时降低其他节点颜色
.job-rect {
fill: ${themeVars.color.hover.self};
}
// 节点上的端口
.node-port {
fill: ${themeVars.color.workflowEdgeHover};
}
}
// 节点上的步骤状态图标
.job-status-icon-wrap {
span {
line-height: 1; // 使图标垂直居中
}
}
}
}
}
}
}
`;
styles/components/chroma.ts
+19
View File
@@ -1,3 +1,22 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { css, themeVars } from "src/types/vars"; import { css, themeVars } from "src/types/vars";
// https://github.com/go-gitea/gitea/blob/main/web_src/css/chroma/base.css // https://github.com/go-gitea/gitea/blob/main/web_src/css/chroma/base.css
styles/components/dashboard.ts
+33 -3
View File
@@ -1,7 +1,33 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { css, otherThemeVars, themeVars } from "src/types/vars"; import { css, otherThemeVars, themeVars } from "src/types/vars";
import { labelStyle } from "styles/public/label"; import { labelStyle } from "styles/public/label/label";
export const dashboard = css` export const dashboard = css`
.page-content.dashboard {
// 仪表板切换控制用户按钮
.ui.dropdown .menu.context-user-switch .scrolling.menu {
animation: none; // 去掉嵌套菜单导致的多余动画
box-shadow: 0px 0px 0px 1px ${themeVars.color.light.border} !important;
}
}
// 首页仪表板, 避免选中管理员后台的维护管理面板 // 首页仪表板, 避免选中管理员后台的维护管理面板
.page-content.dashboard.feeds { .page-content.dashboard.feeds {
// 仓库列表的仓库/组织切换按钮 // 仓库列表的仓库/组织切换按钮
@@ -16,7 +42,9 @@ export const dashboard = css`
padding: 6px 12px !important; padding: 6px 12px !important;
&.active { &.active {
background: ${themeVars.color.menu}; background: ${themeVars.color.menu};
box-shadow: ${themeVars.github.shadow.floating.small}; box-shadow:
0px 0px 0px 1px ${themeVars.color.light.border},
${themeVars.github.shadow.resting.small};
font-weight: 600; font-weight: 600;
} }
&::before { &::before {
@@ -47,7 +75,9 @@ export const dashboard = css`
.ui.attached.segment { .ui.attached.segment {
background-color: ${themeVars.color.menu}; background-color: ${themeVars.color.menu};
border: unset !important; border: unset !important;
box-shadow: ${themeVars.github.shadow.floating.small}; box-shadow:
0px 0px 0px 1px ${themeVars.color.light.border},
${themeVars.github.shadow.resting.small};
&.repos-search { &.repos-search {
border-top-left-radius: 12px; border-top-left-radius: 12px;
border-top-right-radius: 12px; border-top-right-radius: 12px;
styles/components/editor.ts
+19
View File
@@ -1,3 +1,22 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { css, themeVars } from "src/types/vars"; import { css, themeVars } from "src/types/vars";
export const monaco = css` export const monaco = css`
styles/components/explore.ts
+19
View File
@@ -1,3 +1,22 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { fallbackVar } from "src/functions"; import { fallbackVar } from "src/functions";
import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars"; import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars";
styles/components/filelist.ts
-494
View File
@@ -1,494 +0,0 @@
import { css, otherThemeVars, themeVars } from "src/types/vars";
// 文件列表页面下的分支按钮
export const branchButton = css`
.page-content.repository.file.list {
.ui.dropdown.branch-selector-dropdown > .menu > .menu {
// 显示默认分支的标签
.ui.label {
background-color: ${themeVars.color.menu};
border: 1px solid ${themeVars.color.light.border};
margin-top: 1px;
margin-left: auto;
margin-right: 20px; // gitea 有 RSS 留出足够的空间
}
}
}
`;
// 仓库同步派生
export const syncFork = css`
.page-content.repository.file.list {
.repo-home-filelist > .ui.message {
background: ${themeVars.color.box.header};
padding: 8px 8px 8px 16px;
margin: 16px 0px;
.ui.button {
min-width: 96px;
}
}
}
`;
// 仓库文件列表
export const repoFiles = css`
// 文件列表和提交列表的按钮组
.repo-button-row {
margin: 16px 0;
}
.repository.file.list {
#repo-files-table {
margin: 16px 0;
// 头部最后一次提交
.repo-file-line {
padding-right: 16px;
// 父目录
&.parent-link {
gap: 0.5rem;
padding-left: 16px;
svg {
margin-right: 2px;
}
}
// 最后一次提交
&.repo-file-last-commit {
min-height: 3.725rem;
.latest-commit {
gap: 8px;
.commit-summary {
color: ${themeVars.color.text.light.num1};
}
img.ui.avatar {
border-radius: 9999px;
margin-left: 2px;
width: 20px;
height: 20px;
}
// 作者
.author-wrapper {
&:hover {
color: ${themeVars.color.text.self};
}
}
// 提交哈希值
.ui.label {
display: none;
}
}
relative-time {
color: ${themeVars.color.text.light.num1};
}
}
}
// 文件列表
.repo-file-item {
.repo-file-cell {
height: 40px;
&.name {
display: flex;
align-items: center;
gap: 0.5rem;
padding-left: 16px;
}
&.age {
padding-right: 16px;
}
}
}
}
#readme {
.file-header {
background: ${themeVars.color.body};
min-height: 48px;
padding: 0px 8px !important;
overflow-x: visible;
svg {
color: ${themeVars.color.text.light.num1};
}
.file-header-left {
padding: 6px 8px !important;
line-height: 1.45;
// 伪元素宽度等于按钮宽度而不是父元素宽度
position: relative;
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
border-radius: ${otherThemeVars.border.radius};
}
&:after {
content: "";
background: ${themeVars.github.underlineNav.borderColor.active};
border-radius: ${otherThemeVars.border.radius};
bottom: -8px;
left: 0;
height: 2px;
position: absolute;
width: 100%;
}
a.muted:hover {
color: inherit;
text-decoration-line: none;
}
}
.file-header-right {
.btn-octicon {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 8px;
border-radius: ${otherThemeVars.border.radius};
height: 28px;
width: 28px;
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
}
}
}
}
}
}
`;
// 手机下隐藏提交信息
export const repoFilesMobile = css`
@media (max-width: 767.98px) {
#repo-files-table {
grid-template-columns: 1fr auto;
.repo-file-line {
grid-column: 1 / span 2;
}
.repo-file-cell {
&.name {
max-width: none;
}
&.message {
display: none;
}
}
}
}
`;
// 仓库打开文件时的视图
export const repoFileView = css`
// 隐藏主内容的下内容和页脚, 避免滚动文件树时滚动条遮挡
body > .full.height:has(.repo-view-file-tree-container) {
padding-bottom: 0;
+ .page-footer {
display: none;
}
}
.page-content.repository.file.list {
&:has(.repo-view-file-tree-container) {
// 取消下间隔优化观看体验
.secondary-nav {
margin-bottom: 0 !important;
.ui.tabs.divider {
margin-bottom: 0;
}
}
}
> .ui.container.fluid {
max-width: calc(100% - calc(2 * 16px));
}
.repo-view-container {
position: sticky;
top: 0;
// 左侧文件树
.repo-view-file-tree-container {
height: 100vh;
// 固定头部
position: sticky;
top: 0;
overflow-y: unset;
&:after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 1px;
height: 100%;
background: ${themeVars.color.secondary.self};
}
> .repo-button-row {
align-content: center;
background: ${themeVars.color.body};
font-size: 16px;
height: 64px;
margin: 0;
// 固定头部, 早期父元素有多余的页脚和内容高度导致滚动时无法固定, 修复后也可保留此属性无需删除
position: sticky;
top: 0;
&:after {
content: "";
position: absolute;
top: 64px;
left: -16px;
width: calc(100% + 16px);
height: 1px;
background: ${themeVars.color.secondary.self};
}
.ui.compact.icon.button {
border: 0;
}
}
.view-file-tree-items {
margin-right: 0;
padding: 12px 16px 8px 0;
}
}
// 右侧文件视图内容
.repo-view-content {
padding-bottom: 40px;
.repo-button-row {
align-content: center;
background: ${themeVars.color.box.header};
border: 1px solid ${themeVars.color.secondary.self};
border-radius: ${otherThemeVars.border.radius};
margin: 16px 0;
height: 46px;
min-height: 46px;
padding: 8px;
position: sticky;
top: 0;
z-index: 1;
.ui.button {
min-height: 32px;
}
// 打开文件树按钮
.repo-view-file-tree-toggle-show {
background: initial;
border-color: #0000;
padding: 0;
min-width: 32px;
}
// 分支选择按钮
.branch-dropdown-button {
padding: 0 12px;
}
// 路径
.repo-path {
gap: 4px;
.section {
&:first-child,
&.active {
font-weight: 600;
}
}
.btn {
svg {
margin-left: 4px;
color: ${themeVars.color.text.light.num1};
}
}
}
}
.non-diff-file-content {
// 避免分支菜单遮挡
position: relative;
z-index: 0;
h4.file-header {
padding: 8px 12px !important;
position: sticky;
// 重叠边框线, 避免过粗
top: 45px;
z-index: 1;
.file-header-left {
color: ${themeVars.color.text.light.num1};
font-size: 12px;
}
.file-header-right {
gap: 0px;
// 按钮组
> .ui.buttons {
margin: 0 8px 0 0 !important; // 完全不知道为什么浏览器最终效果没生效, 只能 !important 了
.ui.mini.button {
min-height: 28px;
height: 28px;
font-size: 12px;
padding: 0 8px;
}
}
// 右侧操作按钮
> .btn-octicon {
display: flex;
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};
}
&:last-of-type {
border-top-right-radius: ${otherThemeVars.border.radius};
border-bottom-right-radius: ${otherThemeVars.border.radius};
// 与无权限按钮之间的间距
+ .btn-octicon.disabled {
margin-left: 8px;
}
}
&:hover {
background: ${themeVars.color.hover.self};
color: ${themeVars.color.text.light.num1};
}
}
}
}
}
// 头部提交信息
.ui.segment#repo-file-commit-box {
padding: 8px 12px;
margin-bottom: 16px !important;
min-height: 46px;
> .latest-commit {
gap: 8px;
.commit-summary {
color: ${themeVars.color.text.light.num1};
}
> img.ui.avatar {
border-radius: 9999px;
width: 20px;
height: 20px;
}
}
// 右侧提交时间
> .age {
display: flex;
align-items: center;
}
}
}
}
}
`;
// 避免手机/平板下路径容器过长导致换行, 取消固定
export const repoFileViewMobile = css`
@media (max-width: 1023.98px) {
.page-content.repository.file.list .repo-view-container .repo-view-content {
.repo-button-row {
height: auto;
position: static;
z-index: 0;
}
.non-diff-file-content {
h4.file-header {
top: 0;
}
}
}
}
`;
// 仓库代码布局调整, 侧边栏宽度调整
export const repoGrid = css`
.repo-grid-filelist-sidebar {
grid-template-columns: auto 312px;
gap: 24px;
}
@media (max-width: 767.98px) {
.repo-grid-filelist-sidebar {
grid-template-columns: 100%;
}
}
`;
// 仓库代码页面侧边栏上半部, 版本发布以上
export const repoSidebarTop = css`
.page-content.repository.file.list {
.repo-home-sidebar-top {
a.muted:hover {
text-decoration: none;
}
.flex-item {
padding: 10px 0 0 0;
// 仓库描述本身
.flex-item-title {
margin-top: 10px;
}
// 仓库描述内容
.flex-item-body {
> .tw-flex:first-child {
margin-top: 16px !important;
gap: 8px !important;
}
.repo-description {
color: ${themeVars.color.text.self};
}
#repo-topics {
margin: 8px 0px !important;
}
.flex-text-block {
font-size: 14px;
font-weight: 600;
margin-top: 10px;
&.muted {
margin-top: 2px;
font-weight: normal;
}
svg.svg {
margin-right: 4px;
&.octicon-database,
&.octicon-law {
margin-right: 6px;
}
}
}
}
}
}
}
`;
// 仓库代码页面侧边栏下半部, 版本发布以下
export const repoSidebarBottom = css`
.page-content.repository.file.list {
.repo-home-sidebar-bottom {
a.muted:hover {
text-decoration: none;
}
.flex-item {
padding: 16px 0;
.flex-item {
padding: 16px 0 0 0;
.flex-item-leading {
svg.svg.octicon-tag {
color: ${themeVars.color.green.self};
}
}
.flex-item-header .flex-item-title {
font-size: 14px;
}
}
.flex-item-body {
font-size: 12px;
}
}
// 编程语言
.language-stats {
height: 8px;
margin-bottom: 0px;
}
.language-stats-details .item {
font-size: 12px;
margin-right: 8px;
.color-icon {
height: 8px;
width: 8px;
margin-right: 8px;
}
.tw-font-semibold {
color: ${themeVars.color.text.self};
margin-right: 2px;
}
}
}
}
`;
styles/components/footer.ts
+32 -2
View File
@@ -1,3 +1,22 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { css, themeVars } from "src/types/vars"; import { css, themeVars } from "src/types/vars";
export const footer = css` export const footer = css`
@@ -11,13 +30,13 @@ export const footer = css`
padding: 16px 0 40px 0; padding: 16px 0 40px 0;
> .left-links { > .left-links {
gap: 4px; gap: 4px;
> a { a {
color: ${themeVars.color.text.light.num1}; color: ${themeVars.color.text.light.num1};
&:hover { &:hover {
color: ${themeVars.color.primary.self}; color: ${themeVars.color.primary.self};
} }
} }
> strong { strong {
font-weight: 400; font-weight: 400;
} }
} }
@@ -28,6 +47,9 @@ export const footer = css`
&:hover { &:hover {
color: ${themeVars.color.primary.self}; color: ${themeVars.color.primary.self};
} }
> .flex-text-inline {
gap: 4px;
}
} }
> a { > a {
border-left: 0; border-left: 0;
@@ -38,6 +60,14 @@ export const footer = css`
color: ${themeVars.color.primary.self}; color: ${themeVars.color.primary.self};
} }
} }
// 主题按钮&菜单项
.ui.dropdown .theme-menu-item {
gap: 4px;
}
// 主题菜单
.menu.theme-menu > .item > .theme-menu-item {
padding: 0;
}
} }
} }
`; `;
styles/components/heatmap.ts
+25 -2
View File
@@ -1,3 +1,22 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { css, themeVars } from "src/types/vars"; import { css, themeVars } from "src/types/vars";
export const heatmap = css` export const heatmap = css`
@@ -16,7 +35,9 @@ export const heatmap = css`
} }
.vch__container { .vch__container {
padding: 12px 20px; padding: 12px 20px;
box-shadow: ${themeVars.github.shadow.floating.small}; box-shadow:
0px 0px 0px 1px ${themeVars.color.light.border},
${themeVars.github.shadow.resting.small};
border-radius: 12px; border-radius: 12px;
// 覆盖热力图和图例的背景色 // 覆盖热力图和图例的背景色
.vch__day__square, .vch__day__square,
@@ -74,7 +95,9 @@ export const activity = css`
} }
.flex-list#activity-feed { .flex-list#activity-feed {
border-radius: 12px; border-radius: 12px;
box-shadow: ${themeVars.github.shadow.floating.small}; box-shadow:
0px 0px 0px 1px ${themeVars.color.light.border},
${themeVars.github.shadow.resting.small};
> .flex-item { > .flex-item {
gap: 12px; gap: 12px;
padding: 16px; padding: 16px;
styles/components/index.ts
+20 -8
View File
@@ -1,22 +1,34 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import "./actions"; import "./actions";
import "./chroma"; import "./chroma";
import "./clone";
import "./commit";
import "./dashboard"; import "./dashboard";
import "./diff";
import "./editor"; import "./editor";
import "./explore"; import "./explore";
import "./filelist";
import "./footer"; import "./footer";
import "./heatmap"; import "./heatmap";
import "./issue"; import "./issues";
import "./milestones";
import "./navbar"; import "./navbar";
import "./newrepo"; import "./newrepo";
import "./notification"; import "./notification";
import "./org"; import "./org";
import "./packages";
import "./release";
import "./repo"; import "./repo";
import "./setting"; import "./setting";
import "./signin"; import "./signin";
styles/components/issue.ts
-833
View File
@@ -1,833 +0,0 @@
import { css, otherThemeVars, themeVars } from "src/types/vars";
import { activeItemAfterStyle } from "styles/public/menu";
// 工单&PR 列表
export const issueList = css`
// 仓库页面的里程碑列表菜单栏
.page-content.repository.milestones,
.page-content.repository.milestone-issue-list,
.page-content.repository.issue-list {
// 头部筛选菜单栏
.issue-list-toolbar {
align-items: center;
align-content: center;
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: 48px;
padding: 8px;
margin-top: 16px;
.issue-list-toolbar-left {
// 复选框
input {
margin: 0 8px !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;
}
}
}
}
.issue-list-toolbar-right > .ui.menu {
align-items: center;
> .item {
color: ${themeVars.color.text.light.num1};
}
> .ui.button {
padding: 0 12px;
height: 32px;
}
}
img.ui.avatar {
border-radius: 9999px;
}
}
}
// 里程碑详细页面的 Issue 列表
.page-content.repository.milestone-issue-list,
// 顶部仪表板的 Issue 列表
.page-content.dashboard.issues,
// 用户订阅的 Issue 列表
.page-content.user.notification,
// 仓库 Issue 列表
.page-content.repository.issue-list {
.flex-list#issue-list {
border: 1px solid ${themeVars.color.light.border};
border-bottom-left-radius: ${otherThemeVars.border.radius};
border-bottom-right-radius: ${otherThemeVars.border.radius};
img.ui.avatar {
border-radius: 9999px;
}
> .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};
}
&:hover {
background-color: ${themeVars.color.hover.opaque};
}
> .flex-item-leading {
align-self: flex-start;
margin-top: 14px;
margin-left: 16px;
> .flex-text-inline {
margin-top: 0px !important;
// 复选框
input {
margin-right: 8px !important;
}
}
}
> .flex-item-main {
gap: 4px;
.flex-item-header {
padding-top: 8px;
}
.flex-item-body {
font-size: 12px;
padding-bottom: 8px;
}
}
> .flex-item-trailing {
margin-right: 32px;
}
}
}
}
// 里程碑列表
// [TODO] 暂时排除项目的列表
.page-content.repository.milestones:not(.projects) .milestone-list {
border: 1px solid ${themeVars.color.light.border};
border-bottom-left-radius: ${otherThemeVars.border.radius};
border-bottom-right-radius: ${otherThemeVars.border.radius};
.milestone-card {
padding: 8px 16px 10px 16px;
.milestone-header {
h3 {
font-size: 16px;
font-weight: 500;
}
div span {
font-size: 14px;
font-weight: 600;
}
}
}
.milestone-toolbar {
font-size: 12px;
.group > a {
font-size: 13px;
}
}
}
`;
// 避免手机/平板下菜单错位
export const issueListMobile = css`
@media (max-width: 1023.98px) {
.page-content.repository.milestones,
.page-content.repository.milestone-issue-list,
.page-content.repository.issue-list {
.issue-list-toolbar {
height: auto;
}
}
}
`;
// 置顶 Issue
export const issuePins = css`
#issue-pins {
gap: 12px;
margin-bottom: 16px;
.issue-card {
padding: 16px 12px;
.content {
.issue-card-title {
font-size: 16px;
font-weight: 600;
}
svg {
color: ${themeVars.color.text.light.num1};
height: 100%;
margin-right: 3px;
}
.meta {
font-size: 12px;
padding-top: 4px;
}
}
.issue-card-bottom {
display: none;
}
}
img.ui.avatar {
border-radius: 9999px;
}
}
`;
export const button = css`
.issue-content-left .field.footer {
// 关闭工单按钮
.ui.red.basic.button#status-button {
color: ${themeVars.github.fgColor.done};
background-color: ${themeVars.color.button};
border-color: ${themeVars.color.light.border};
&:hover {
background-color: ${themeVars.color.hover.self};
}
}
// 重新开启按钮
.ui.basic.primary.button#status-button {
color: ${themeVars.github.fgColor.success};
}
}
// 工单&PR标题右侧按钮
.repository.view.issue .issue-title-buttons > .ui.button {
padding: 0 12px;
height: 32px;
}
`;
export const babel = css`
.issue-content-left {
.badge {
// 时间线打开状态标签
&.tw-bg-green {
background-color: ${themeVars.github.bgColor.success.emphasis} !important;
}
// 时间线关闭状态标签
&.tw-bg-red {
background-color: ${themeVars.github.bgColor.done.emphasis} !important;
}
// 时间线合并状态标签
&.tw-bg-purple {
background-color: ${themeVars.github.bgColor.done.emphasis} !important;
}
}
}
// 工单&PR状态标签
.ui.label.issue-state-label {
border-radius: 25px !important;
&.green {
color: ${themeVars.color.white} !important;
background-color: ${themeVars.github.bgColor.success.emphasis} !important;
border-color: ${themeVars.github.bgColor.success.emphasis} !important;
}
&.red {
color: ${themeVars.color.white} !important;
background-color: ${themeVars.github.bgColor.done.emphasis} !important;
border-color: ${themeVars.github.bgColor.done.emphasis} !important;
}
&.purple {
color: ${themeVars.color.white} !important;
background-color: ${themeVars.github.bgColor.done.emphasis} !important;
border-color: ${themeVars.github.bgColor.done.emphasis} !important;
}
}
`;
// PR 分支标签
export const prBranch = css`
.repository.view.issue .pull-desc code,
#issue-list .flex-item-body .branches .branch {
color: ${themeVars.github.fgColor.accent};
background-color: ${themeVars.github.bgColor.accent.muted};
border-radius: ${otherThemeVars.border.radius};
font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace);
font-size: 12px;
padding: 0 5px;
line-height: 18px;
}
.repository.view.issue .pull-desc code {
padding-top: 3px;
padding-bottom: 3px;
a:hover {
text-decoration-line: none;
}
}
`;
const botLabelStyle = {
height: "20px",
padding: "0 6px!important",
marginLeft: "4px",
};
// 评论
export const comment = css`
.comment .comment-container {
img.ui.avatar {
border-radius: 9999px;
}
// 去除评论标题左侧指向头像的小箭头
.comment-header,
&:target .comment-header {
&:before,
&:after {
display: none;
}
}
// 评论焦点样式
&:target {
.comment-container {
border-color: ${themeVars.github.borderColor.accent.emphasis} !important;
box-shadow: 0 0 0 1px ${themeVars.color.primary.self} !important;
}
}
.comment-header {
padding: 4px 4px 4px 16px;
min-height: 38px;
.comment-header-left {
// bot 标签
.ui.basic.label {
${botLabelStyle}
}
a:has(relative-time) {
text-decoration: underline;
}
// 已编辑按钮
.content-history-menu {
color: ${themeVars.color.text.light.num1} !important;
.menu .item {
font-size: 12px;
.ui.avatar {
height: 20px;
width: 20px;
}
}
}
}
}
.comment-header-right {
> .item,
> .label {
color: ${themeVars.color.text.light.num1};
}
> .ui.label {
background-color: initial;
font-size: 12px;
height: 20px;
padding: 0 6px;
}
.context-dropdown {
height: 28px;
padding: 0 6px;
border-radius: ${otherThemeVars.border.radius};
&:hover {
background-color: ${themeVars.github.control.transparent.bgColor.hover};
}
a.context-menu {
display: flex;
align-items: center;
&:hover {
color: inherit;
}
}
// 评论菜单的删除按钮
.menu .item.delete-comment {
color: ${themeVars.color.red.self};
&:hover {
background-color: ${themeVars.color.red.badge.bg} !important;
color: ${themeVars.color.red.light};
}
}
}
}
// 表情菜单按钮头部+底部
.ui.dropdown.action.select-reaction > a {
display: flex;
align-items: center;
justify-content: center;
background: ${themeVars.color.button};
border-radius: 9999px;
border: 1px solid ${themeVars.color.light.border};
color: ${themeVars.color.text.light.num1};
padding: 0px 8px !important;
height: 28px;
width: 28px;
}
// 底部表情栏
.bottom-reactions {
.ui.ui.ui.label {
background-color: unset !important;
border-radius: 9999px;
border-color: ${themeVars.color.light.border};
&:hover {
background-color: ${themeVars.color.reaction.hoverBg} !important;
border-color: ${themeVars.color.light.border};
}
.reaction {
font-size: 12px;
}
.reaction-count {
color: ${themeVars.color.text.light.self};
font-weight: 500;
margin-left: 0;
}
}
// 显示表情菜单按钮
.select-reaction {
padding: 0;
// 两个表情按钮看着怪怪的, 很难受
// visibility: visible;
}
}
}
`;
// 评论书写框
export const commentForm = css`
.repository .comment.form .content .segment {
&::before,
&::after {
display: none;
}
}
`;
export const dropdown = css`
.repository {
// Issue/PR 列表下的所有筛选菜单
&.issue-list .ui.dropdown .menu, .ui.menu .ui.dropdown .menu,
// Issue/PR 详情下的右侧的上半部分选项菜单
&.issue.view .issue-content-right .ui.dropdown .scrolling.menu {
.item:hover:after {
content: "";
${activeItemAfterStyle}
}
}
}
`;
// PR 界面的 PR 操作评论
export const prMerge = css`
.repository.view.issue .comment-list .timeline-item.pull-merge-box {
// 头像
.timeline-avatar {
border-radius: 9999px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
svg {
width: 24px;
height: 24px;
}
// PR 界面的 PR 操作评论
&.text {
color: ${themeVars.color.white} !important;
border-radius: ${otherThemeVars.border.radius};
// 操作评论边框
+ .content > .ui.attached.segment {
border-width: 1.5px;
}
&.grey {
background-color: ${themeVars.color.text.light.num1};
}
&.green {
background-color: ${themeVars.github.bgColor.success.emphasis};
+ .content > .ui.attached.segment {
border-left-color: ${themeVars.github.bgColor.success.emphasis};
border-right-color: ${themeVars.github.bgColor.success.emphasis};
&:first-child {
border-top-color: ${themeVars.github.bgColor.success.emphasis};
}
&:last-child {
border-bottom-color: ${themeVars.github.bgColor.success.emphasis};
}
}
}
&.purple {
background-color: ${themeVars.github.bgColor.done.emphasis};
+ .content > .ui.attached.segment {
border-left-color: ${themeVars.github.bgColor.done.emphasis};
border-right-color: ${themeVars.github.bgColor.done.emphasis};
&:first-child {
border-top-color: ${themeVars.github.bgColor.done.emphasis};
}
&:last-child {
border-bottom-color: ${themeVars.github.bgColor.done.emphasis};
}
}
}
&.yellow {
background-color: ${themeVars.github.bgColor.attention.emphasis};
+ .content > .ui.attached.segment {
border-left-color: ${themeVars.github.bgColor.attention.emphasis};
border-right-color: ${themeVars.github.bgColor.attention.emphasis};
&:first-child {
border-top-color: ${themeVars.github.bgColor.attention.emphasis};
}
&:last-child {
border-bottom-color: ${themeVars.github.bgColor.attention.emphasis};
}
}
}
&.red {
background-color: ${themeVars.github.bgColor.danger.emphasis};
+ .content > .ui.attached.segment {
border-left-color: ${themeVars.github.bgColor.danger.emphasis};
border-right-color: ${themeVars.github.bgColor.danger.emphasis};
&:first-child {
border-top-color: ${themeVars.github.bgColor.danger.emphasis};
}
&:last-child {
border-bottom-color: ${themeVars.github.bgColor.danger.emphasis};
}
}
}
}
}
// 检查状态
.commit-status-panel {
.commit-status-header {
background: ${themeVars.color.body};
padding: 16px;
font-size: 16px;
font-weight: 600;
.ui.right {
color: ${themeVars.color.text.light.num1};
font-size: 14px;
font-weight: 400;
}
}
// 检查状态列表
.commit-status-list {
background: ${themeVars.color.menu};
.commit-status-item {
border-radius: ${otherThemeVars.border.radius};
padding: 2px 8px;
margin: 0px 8px;
height: 37px;
&:first-child {
margin-top: 8px;
}
&:last-child {
margin-bottom: 8px;
}
&:hover {
background-color: ${themeVars.color.hover.opaque};
}
}
}
}
// 合并信息和操作
.merge-section {
color: ${themeVars.color.text.light.num1};
padding: 16px;
display: grid;
gap: 8px;
&::before,
&::after {
display: none;
}
}
}
`;
// 时间线
export const timeline = css`
.repository.view.issue {
.comment-list {
// 时间线本线
.timeline::before {
// 不遮挡归档信息框, 归档信息框背景色有透明度时会漏出线
height: calc(100% - 62px);
}
.timeline-item,
.timeline-item-group {
padding: 12px 0;
.comment-text-line {
color: ${themeVars.color.text.light.num1};
}
// 事件
&.event {
// 修复覆盖后的位置问题
padding-left: 15px;
// 避免锚中批准的头像
.avatar-with-link .avatar {
width: 20px;
height: 20px;
}
// 批准时间的头像
// 头部居中偏移量(头像高度 - 标准行信息高度) / 2: (40px - 32px) / 2 = 4px
.timeline-avatar {
top: -4px;
}
// bot 标签
.comment-text-line .ui.basic.label {
${botLabelStyle}
}
.badge {
border: 2px solid ${themeVars.color.body};
}
// 仅匹配只有 badge
.badge:not([class*=" "]) {
background-color: ${themeVars.github.control.bgColor.rest};
svg {
color: ${themeVars.color.text.light.num1};
}
}
}
// 提交
&.commits-list {
// 每个提交之间的间隔
.flex-text-block {
padding-top: 4px;
}
.badge svg {
color: ${themeVars.color.text.light.num1};
}
// 仅覆盖左侧 commit 不覆盖右侧 SHA
a.muted {
font-size: 12px;
color: ${themeVars.color.text.light.num1};
text-decoration-line: underline;
&:hover {
color: ${themeVars.color.primary.self};
}
}
}
}
}
}
`;
const sidebarPadding = {
padding: "4px 8px",
};
// 侧边栏
export const issueSidebar = css`
// 工单&创建工单&PR页面侧边栏
.page-content.repository.issue {
.issue-content {
img.ui.avatar {
border-radius: 9999px;
}
gap: 24px;
// 侧边栏
.issue-content-right {
border: 0;
font-size: 12px;
padding: 0;
.ui.button {
font-size: 12px;
}
.ui.form,
a.fixed-text.muted,
span.text,
// 列表项为空时的文字
span.item.empty-list,
p {
color: ${themeVars.color.text.light.num1};
font-size: 12px;
}
// WIP 前缀提示
> a,
.ui.dropdown.select-branch,
.ui.form,
a.fixed-text.muted,
span.text,
.ui.watching > div,
.ui.depending > div,
.flex-text-block,
.ui.list,
.toggle-wip,
p {
${sidebarPadding};
}
// 允许维护者编辑
> .ui.checkbox {
margin: 4px 8px;
strong {
font-weight: 400;
}
}
.issue-sidebar-combo {
.ui.dropdown > a.fixed-text.muted {
align-items: center;
border-radius: ${otherThemeVars.border.radius};
text-decoration-line: none;
height: 28px;
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
}
}
.ui.list {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
// 评审人
.ui.relaxed.list {
.item {
// 操作图标按钮
a.muted.icon {
color: ${themeVars.color.text.light.num1};
&:hover {
color: ${themeVars.color.primary.self};
}
}
}
}
// 标签菜单项
.ui.dropdown > .menu > .scrolling.menu > .item:has(.item-secondary-info) {
// 修复标签菜单中描述文本过长没有换行挤掉标签的问题
display: grid !important;
grid-template-columns: auto auto 1fr;
row-gap: 0px; // 去除行间距, 仅当有描述信息时才有间距(.tw-pl-\\\[20px\\\])
// 如果是归档标签则隐藏
&.tw-hidden {
display: none !important;
}
// 默认隐藏多余信息避免标签对齐问题
.item-secondary-info {
display: none;
grid-column: 2 / -1; // 从第2列对齐
color: ${themeVars.color.text.light.num1};
> .tw-pl-\\\[20px\\\] {
// 已经与第二列对齐, 不需要额外的 padding
padding-left: 0px !important;
padding-top: 4px;
// 显示全部描述信息与 Github 保持一致
white-space: normal;
small {
font-size: 12px;
}
}
> .archived-label-hint {
// 与父元素 item 的 padding 对齐 (dropdown.ts .ui.dropdown .menu > .item)
top: 6px;
right: 8px;
}
// 如果有描述信息则显示
&:has(.tw-pl-\\\[20px\\\]) {
display: block;
> .archived-label-hint {
top: 4px; // 有描述信息的归档标签与标签对齐需要更高点
}
}
// 如果有归档标签则显示
&:has(.archived-label-hint > .ui.label) {
display: block;
}
}
}
// 修复菜单下拉打开时, 无法聚焦输入框
.menu input {
transition: none;
}
}
// 时间追踪
> div:not([class]):not([id]) {
> .flex-text-block {
color: ${themeVars.color.text.light.num1};
}
> .ui.buttons {
${sidebarPadding};
.button {
height: 30px;
min-height: 30px;
&:hover {
border-color: ${themeVars.color.light.border};
+ .button {
border-left-color: ${themeVars.color.light.border};
}
}
}
}
}
// 选中日期颜色
.ui.form .due-date {
color: ${themeVars.color.text.self};
}
// 分割线
> .divider {
margin: 12px 0 12px 8px;
width: calc(100% - 16px);
}
// 订阅按钮
.ui.watching .ui.button {
padding: 0px 8px;
height: 30px;
min-height: 30px;
svg {
margin: 0 !important;
}
}
// PIN 按钮
.form-fetch-action.single-button-form .ui.button,
// 底部操作按钮
> .ui.show-modal.button {
border: 0;
background: unset;
font-weight: 400;
${sidebarPadding};
// 好像是浏览器 BUG, 最后不生效, 必须 !important
margin: 0 !important;
justify-content: left;
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
}
}
.ui.show-modal.button[data-modal="#sidebar-delete-issue"] {
color: ${themeVars.color.red.self};
svg {
color: ${themeVars.color.red.self};
}
&:hover {
background-color: ${themeVars.color.red.badge.bg};
color: ${themeVars.color.red.light};
svg {
color: ${themeVars.color.red.light};
}
}
}
}
}
}
`;
// 工单标题
export const issueTitle = css`
.page-content.repository.issue {
.issue-title-header {
.issue-title-meta {
.issue-state-label {
padding: 6px 9px !important;
}
.time-desc {
color: ${themeVars.color.text.light.num1};
}
}
}
}
`;
styles/components/issues/index.ts
+24
View File
@@ -0,0 +1,24 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import "./issue";
import "./issue_comment";
import "./issue_list";
import "./issue_sidebar";
import "./issue_timeline";
styles/components/issues/issue.ts
+246
View File
@@ -0,0 +1,246 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { css, otherThemeVars, themeVars } from "src/types/vars";
import { activeItemAfterStyle } from "styles/public/menu";
export const button = css`
// 工单&PR标题右侧按钮
.repository.view.issue .issue-title-buttons > .ui.button {
padding: 0 12px;
height: 32px;
}
`;
export const babel = css`
.issue-content-left {
.badge {
// 时间线打开状态标签
&.tw-bg-green {
background-color: ${themeVars.github.bgColor.success.emphasis} !important;
}
// 时间线关闭状态标签
&.tw-bg-red {
background-color: ${themeVars.github.bgColor.done.emphasis} !important;
}
// 时间线合并状态标签
&.tw-bg-purple {
background-color: ${themeVars.github.bgColor.done.emphasis} !important;
}
}
}
// 工单&PR状态标签
.ui.label.issue-state-label {
border-radius: 25px !important;
&.green {
color: ${themeVars.color.white} !important;
background-color: ${themeVars.github.bgColor.success.emphasis} !important;
border-color: ${themeVars.github.bgColor.success.emphasis} !important;
}
&.red {
color: ${themeVars.color.white} !important;
background-color: ${themeVars.github.bgColor.done.emphasis} !important;
border-color: ${themeVars.github.bgColor.done.emphasis} !important;
}
&.purple {
color: ${themeVars.color.white} !important;
background-color: ${themeVars.github.bgColor.done.emphasis} !important;
border-color: ${themeVars.github.bgColor.done.emphasis} !important;
}
}
`;
// PR 分支标签
export const prBranch = css`
.repository.view.issue .pull-desc code,
#issue-list .flex-item-body .branches .branch {
color: ${themeVars.github.fgColor.accent};
background-color: ${themeVars.github.bgColor.accent.muted};
border-radius: ${otherThemeVars.border.radius};
font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace);
font-size: 12px;
padding: 0 5px;
line-height: 18px;
}
.repository.view.issue .pull-desc code {
padding-top: 3px;
padding-bottom: 3px;
a:hover {
text-decoration-line: none;
}
}
`;
export const dropdown = css`
.repository {
// Issue/PR 列表下的所有筛选菜单
&.issue-list .ui.dropdown .menu, .ui.menu .ui.dropdown .menu,
// Issue/PR 详情下的右侧的上半部分选项菜单
&.issue.view .issue-content-right .ui.dropdown .scrolling.menu {
.item:hover:after {
content: "";
${activeItemAfterStyle}
}
}
}
`;
// PR 界面的 PR 操作评论
export const prMerge = css`
.repository.view.issue .comment-list .timeline-item.pull-merge-box {
// 头像
.timeline-avatar {
border-radius: 9999px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
svg {
width: 24px;
height: 24px;
}
// PR 界面的 PR 操作评论
&.text {
color: ${themeVars.color.white} !important;
border-radius: ${otherThemeVars.border.radius};
// 操作评论边框
+ .content > .ui.attached.segment {
border-width: 1.5px;
}
&.grey {
background-color: ${themeVars.color.text.light.num1};
}
&.green {
background-color: ${themeVars.github.bgColor.success.emphasis};
+ .content > .ui.attached.segment {
border-left-color: ${themeVars.github.bgColor.success.emphasis};
border-right-color: ${themeVars.github.bgColor.success.emphasis};
&:first-child {
border-top-color: ${themeVars.github.bgColor.success.emphasis};
}
&:last-child {
border-bottom-color: ${themeVars.github.bgColor.success.emphasis};
}
}
}
&.purple {
background-color: ${themeVars.github.bgColor.done.emphasis};
+ .content > .ui.attached.segment {
border-left-color: ${themeVars.github.bgColor.done.emphasis};
border-right-color: ${themeVars.github.bgColor.done.emphasis};
&:first-child {
border-top-color: ${themeVars.github.bgColor.done.emphasis};
}
&:last-child {
border-bottom-color: ${themeVars.github.bgColor.done.emphasis};
}
}
}
&.yellow {
background-color: ${themeVars.github.bgColor.attention.emphasis};
+ .content > .ui.attached.segment {
border-left-color: ${themeVars.github.bgColor.attention.emphasis};
border-right-color: ${themeVars.github.bgColor.attention.emphasis};
&:first-child {
border-top-color: ${themeVars.github.bgColor.attention.emphasis};
}
&:last-child {
border-bottom-color: ${themeVars.github.bgColor.attention.emphasis};
}
}
}
&.red {
background-color: ${themeVars.github.bgColor.danger.emphasis};
+ .content > .ui.attached.segment {
border-left-color: ${themeVars.github.bgColor.danger.emphasis};
border-right-color: ${themeVars.github.bgColor.danger.emphasis};
&:first-child {
border-top-color: ${themeVars.github.bgColor.danger.emphasis};
}
&:last-child {
border-bottom-color: ${themeVars.github.bgColor.danger.emphasis};
}
}
}
}
}
// 检查状态
.commit-status-panel {
.commit-status-header {
background: ${themeVars.color.body};
padding: 16px;
font-size: 16px;
font-weight: 600;
.ui.right {
color: ${themeVars.color.text.light.num1};
font-size: 14px;
font-weight: 400;
}
}
// 检查状态列表
.commit-status-list {
background: ${themeVars.color.menu};
.commit-status-item {
border-radius: ${otherThemeVars.border.radius};
padding: 2px 8px;
margin: 0px 8px;
height: 37px;
&:first-child {
margin-top: 8px;
}
&:last-child {
margin-bottom: 8px;
}
&:hover {
background-color: ${themeVars.color.hover.opaque};
}
}
}
}
// 合并信息和操作
.merge-section {
color: ${themeVars.color.text.light.num1};
padding: 16px;
display: grid;
gap: 8px;
&::before,
&::after {
display: none;
}
}
}
`;
// 工单标题
export const issueTitle = css`
.page-content.repository.issue {
.issue-title-header {
.issue-title-meta {
.issue-state-label {
padding: 6px 9px !important;
}
.time-desc {
color: ${themeVars.color.text.light.num1};
}
}
}
}
`;
styles/components/issues/issue_comment.ts
+157
View File
@@ -0,0 +1,157 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { css, otherThemeVars, themeVars } from "src/types/vars";
export const botLabelStyle = {
height: "20px",
padding: "0 6px!important",
marginLeft: "4px",
};
// 评论
export const comment = css`
.comment .comment-container {
img.ui.avatar {
border-radius: 9999px;
}
// 去除评论标题左侧指向头像的小箭头
.comment-header,
&:target .comment-header {
&:before,
&:after {
display: none;
}
}
// 评论焦点样式
&:target {
.comment-container {
border-color: ${themeVars.github.borderColor.accent.emphasis} !important;
box-shadow: 0 0 0 1px ${themeVars.color.primary.self} !important;
}
}
.comment-header {
padding: 4px 4px 4px 16px;
min-height: 38px;
.comment-header-left {
// bot 标签
.ui.basic.label {
${botLabelStyle}
}
a:has(relative-time) {
text-decoration: underline;
}
// 已编辑按钮
.content-history-menu {
color: ${themeVars.color.text.light.num1} !important;
.menu .item {
font-size: 12px;
.ui.avatar {
height: 20px;
width: 20px;
}
}
}
}
}
.comment-header-right {
> .item,
> .label {
color: ${themeVars.color.text.light.num1};
}
> .ui.label {
background-color: initial;
font-size: 12px;
height: 20px;
padding: 0 6px;
}
.context-dropdown {
height: 28px;
padding: 0 6px;
border-radius: ${otherThemeVars.border.radius};
&:hover {
background-color: ${themeVars.github.control.transparent.bgColor.hover};
}
a.context-menu {
display: flex;
align-items: center;
&:hover {
color: inherit;
}
}
// 评论菜单的删除按钮
.menu .item.delete-comment {
color: ${themeVars.color.red.self};
&:hover {
background-color: ${themeVars.color.red.badge.bg} !important;
color: ${themeVars.color.red.light};
}
}
}
}
// 表情菜单按钮头部+底部
.ui.dropdown.action.select-reaction > a {
display: flex;
align-items: center;
justify-content: center;
background: ${themeVars.color.button};
border-radius: 9999px;
border: 1px solid ${themeVars.color.light.border};
color: ${themeVars.color.text.light.num1};
padding: 0px 8px !important;
height: 28px;
width: 28px;
}
// 底部表情栏
.bottom-reactions {
.ui.ui.ui.label {
background-color: unset !important;
border-radius: 9999px;
border-color: ${themeVars.color.light.border};
&:hover {
background-color: ${themeVars.color.reaction.hoverBg} !important;
border-color: ${themeVars.color.light.border};
}
.reaction {
font-size: 12px;
}
.reaction-count {
color: ${themeVars.color.text.light.self};
font-weight: 500;
margin-left: 0;
}
}
// 显示表情菜单按钮
.select-reaction {
padding: 0;
// 两个表情按钮看着怪怪的, 很难受
// visibility: visible;
}
}
}
`;
// 评论书写框
export const commentForm = css`
.repository .comment.form .content .segment {
&::before,
&::after {
display: none;
}
}
`;
styles/components/issues/issue_list.ts
+224
View File
@@ -0,0 +1,224 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { extractVarName } from "src/functions";
import { css, otherThemeVars, themeVars } from "src/types/vars";
// 工单&PR 列表
export const issueList = css`
// 仓库页面的里程碑列表菜单栏
.page-content.repository.milestones,
.page-content.repository.milestone-issue-list,
.page-content.repository.issue-list {
${extractVarName(otherThemeVars.checkbox.size)}: 16px;
// 头部筛选菜单栏
.issue-list-toolbar {
align-items: center;
align-content: center;
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: 48px;
padding: 8px;
margin-top: 16px;
.issue-list-toolbar-left {
// 复选框
input {
margin: 0 8px !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;
}
}
}
}
.issue-list-toolbar-right > .ui.menu {
align-items: center;
> .item {
color: ${themeVars.color.text.light.num1};
}
> .ui.button {
padding: 0 12px;
height: 32px;
}
}
img.ui.avatar {
border-radius: 9999px;
}
&#issue-actions {
.issue-list-toolbar-right > .ui.menu > .item {
padding: 0 12px;
height: 32px;
background: ${themeVars.color.button};
border: 1px solid ${themeVars.color.light.border};
color: ${themeVars.color.text.self};
&:hover {
background: ${themeVars.color.hover.self};
}
}
}
}
}
// 里程碑详细页面的 Issue 列表
.page-content.repository.milestone-issue-list,
// 顶部仪表板的 Issue 列表
.page-content.dashboard.issues,
// 用户订阅的 Issue 列表
.page-content.user.notification,
// 仓库 Issue 列表
.page-content.repository.issue-list {
.flex-list#issue-list {
border: 1px solid ${themeVars.color.light.border};
border-bottom-left-radius: ${otherThemeVars.border.radius};
border-bottom-right-radius: ${otherThemeVars.border.radius};
img.ui.avatar {
border-radius: 9999px;
}
> .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};
}
&:hover {
background-color: ${themeVars.color.hover.opaque};
}
&:has(:checked) {
background-color: ${themeVars.github.bgColor.accent.muted};
}
> .flex-item-leading {
align-self: flex-start;
margin-top: 14px;
margin-left: 16px;
> .flex-text-inline {
margin-top: 0px !important;
// 复选框
input {
margin-right: 8px !important;
}
}
}
> .flex-item-main {
gap: 4px;
.flex-item-header {
padding-top: 8px;
}
.flex-item-body {
font-size: 12px;
padding-bottom: 8px;
}
}
> .flex-item-trailing {
margin-right: 32px;
}
}
}
}
// 里程碑列表
// [TODO] 暂时排除项目的列表
.page-content.repository.milestones:not(.projects) .milestone-list {
border: 1px solid ${themeVars.color.light.border};
border-bottom-left-radius: ${otherThemeVars.border.radius};
border-bottom-right-radius: ${otherThemeVars.border.radius};
.milestone-card {
padding: 8px 16px 10px 16px;
.milestone-header {
h3 {
font-size: 16px;
font-weight: 500;
}
div span {
font-size: 14px;
font-weight: 600;
}
}
}
.milestone-toolbar {
font-size: 12px;
.group > a {
font-size: 13px;
}
}
}
`;
// 避免手机/平板下菜单错位
export const issueListMobile = css`
@media (max-width: 1023.98px) {
.page-content.repository.milestones,
.page-content.repository.milestone-issue-list,
.page-content.repository.issue-list {
.issue-list-toolbar {
height: auto;
}
}
}
`;
// 置顶 Issue
export const issuePins = css`
#issue-pins {
gap: 12px;
margin-bottom: 16px;
.issue-card {
padding: 16px 12px;
.content {
.issue-card-title {
font-size: 16px;
font-weight: 600;
}
svg {
color: ${themeVars.color.text.light.num1};
height: 100%;
margin-right: 3px;
}
.meta {
font-size: 12px;
padding-top: 4px;
}
}
.issue-card-bottom {
display: none;
}
}
img.ui.avatar {
border-radius: 9999px;
}
}
`;
styles/components/issues/issue_sidebar.ts
+217
View File
@@ -0,0 +1,217 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { css, otherThemeVars, themeVars } from "src/types/vars";
const sidebarPadding = {
padding: "4px 8px",
};
// 侧边栏
export const issueSidebar = css`
// 创建PR页面
.page-content.repository.diff.compare.pull,
// 工单&创建工单&PR页面侧边栏
.page-content.repository.issue {
.issue-content {
img.ui.avatar {
border-radius: 9999px;
}
gap: 24px;
// 侧边栏
.issue-content-right {
border: 0;
font-size: 12px;
padding: 0;
.ui.button {
font-size: 12px;
}
.ui.form,
a.fixed-text.muted,
span.text,
// 列表项为空时的文字
span.item.empty-list,
p {
color: ${themeVars.color.text.light.num1};
font-size: 12px;
}
// WIP 前缀提示
> a,
.ui.dropdown.select-branch,
.ui.form,
a.fixed-text.muted,
span.text,
.ui.watching > div,
.ui.depending > div,
.flex-text-block,
.ui.list,
.toggle-wip,
p {
${sidebarPadding};
}
// 允许维护者编辑
> .ui.checkbox {
margin: 4px 8px;
strong {
font-weight: 400;
}
}
.issue-sidebar-combo {
.ui.dropdown > a.fixed-text.muted {
align-items: center;
border-radius: ${otherThemeVars.border.radius};
text-decoration-line: none;
height: 28px;
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
}
}
.ui.list {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
// 评审人
.ui.relaxed.list {
.item {
// 操作图标按钮
a.muted.icon {
color: ${themeVars.color.text.light.num1};
&:hover {
color: ${themeVars.color.primary.self};
}
}
}
}
// 标签菜单项
.ui.dropdown > .menu > .scrolling.menu > .item:has(.item-secondary-info) {
// 修复标签菜单中描述文本过长没有换行挤掉标签的问题
display: grid !important;
grid-template-columns: auto auto 1fr;
row-gap: 0px; // 去除行间距, 仅当有描述信息时才有间距(.tw-pl-\\\[20px\\\])
// 如果是归档标签则隐藏
&.tw-hidden {
display: none !important;
}
// 默认隐藏多余信息避免标签对齐问题
.item-secondary-info {
display: none;
grid-column: 2 / -1; // 从第2列对齐
color: ${themeVars.color.text.light.num1};
> .tw-pl-\\\[20px\\\] {
// 已经与第二列对齐, 不需要额外的 padding
padding-left: 0px !important;
padding-top: 4px;
// 显示全部描述信息与 Github 保持一致
white-space: normal;
small {
font-size: 12px;
}
}
> .archived-label-hint {
// 与父元素 item 的 padding 对齐 (dropdown.ts .ui.dropdown .menu > .item)
top: 6px;
right: 8px;
}
// 如果有描述信息则显示
&:has(.tw-pl-\\\[20px\\\]) {
display: block;
> .archived-label-hint {
top: 4px; // 有描述信息的归档标签与标签对齐需要更高点
}
}
// 如果有归档标签则显示
&:has(.archived-label-hint > .ui.label) {
display: block;
}
}
}
// 修复菜单下拉打开时, 无法聚焦输入框
.menu input {
transition: none;
}
}
// 时间追踪
> div:not([class]):not([id]) {
> .flex-text-block {
color: ${themeVars.color.text.light.num1};
}
> .ui.buttons {
${sidebarPadding};
.button {
height: 30px;
min-height: 30px;
&:hover {
border-color: ${themeVars.color.light.border};
+ .button {
border-left-color: ${themeVars.color.light.border};
}
}
}
}
}
// 选中日期颜色
.ui.form .due-date {
color: ${themeVars.color.text.self};
}
// 分割线
> .divider {
margin: 12px 0 12px 8px;
width: calc(100% - 16px);
}
// 订阅按钮
.ui.watching .ui.button {
padding: 0px 8px;
height: 30px;
min-height: 30px;
svg {
margin: 0 !important;
}
}
// PIN 按钮
.form-fetch-action.single-button-form .ui.button,
// 底部操作按钮
> .ui.show-modal.button {
border: 0;
background: unset;
font-weight: 400;
${sidebarPadding};
// 好像是浏览器 BUG, 最后不生效, 必须 !important
margin: 0 !important;
justify-content: left;
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
}
}
.ui.show-modal.button[data-modal="#sidebar-delete-issue"] {
color: ${themeVars.color.red.self};
svg {
color: ${themeVars.color.red.self};
}
&:hover {
background-color: ${themeVars.color.red.badge.bg};
color: ${themeVars.color.red.light};
svg {
color: ${themeVars.color.red.light};
}
}
}
}
}
}
`;
styles/components/issues/issue_timeline.ts
+89
View File
@@ -0,0 +1,89 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { css, themeVars } from "src/types/vars";
import { botLabelStyle } from "./issue_comment";
// 时间线
export const timeline = css`
.repository.view.issue {
.comment-list {
// 时间线本线
.timeline::before {
// 不遮挡归档信息框, 归档信息框背景色有透明度时会漏出线
height: calc(100% - 62px);
}
.timeline-item,
.timeline-item-group {
padding: 12px 0;
.comment-text-line {
color: ${themeVars.color.text.light.num1};
}
// 事件
&.event {
// 修复覆盖后的位置问题
padding-left: 15px;
// 避免锚中批准的头像
.avatar-with-link .avatar {
width: 20px;
height: 20px;
}
// 批准时间的头像
// 头部居中偏移量(头像高度 - 标准行信息高度) / 2: (40px - 32px) / 2 = 4px
.timeline-avatar {
top: -4px;
}
// bot 标签
.comment-text-line .ui.basic.label {
${botLabelStyle}
}
.badge {
border: 2px solid ${themeVars.color.body};
}
// 仅匹配只有 badge
[class="badge"] {
background-color: ${themeVars.github.control.bgColor.rest};
svg {
color: ${themeVars.color.text.light.num1};
}
}
}
// 提交
&.commits-list {
// 每个提交之间的间隔
.flex-text-block {
padding-top: 4px;
}
.badge svg {
color: ${themeVars.color.text.light.num1};
}
// 仅覆盖左侧 commit 不覆盖右侧 SHA
a.muted {
font-size: 12px;
color: ${themeVars.color.text.light.num1};
text-decoration-line: underline;
&:hover {
color: ${themeVars.color.primary.self};
}
}
}
}
}
}
`;
styles/components/navbar.ts
+44 -7
View File
@@ -1,3 +1,22 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { fallbackVar } from "src/functions"; import { fallbackVar } from "src/functions";
import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars"; import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars";
@@ -77,16 +96,34 @@ export const navbarRight = css`
&:last-child { &:last-child {
padding: 0; padding: 0;
.text { .text {
// 不显示小箭头标识 // 不显示头像右侧的小箭头下拉菜单标识
> .not-mobile { > .not-mobile {
display: none; display: none;
} }
// 头像 // 手机下的用户名
img { > .only-mobile {
border-radius: 9999px; margin-left: 12px;
height: 32px; font-weight: 600;
max-height: 32px; }
margin: 0 !important; .navbar-avatar {
// 头像
img {
border-radius: 9999px;
height: 32px;
max-height: 32px;
width: 32px;
max-width: 32px;
margin: 0 !important;
}
// 管理员标识
.navbar-admin-badge {
height: 18px;
min-width: 18px;
bottom: calc(100% - 32px);
left: calc(100% - 11px);
padding: 2px;
border-color: ${themeVars.color.nav.bg}; // 锁定边框色, 避免鼠标悬浮时改变颜色
}
} }
} }
&.active { &.active {
styles/components/newrepo.ts
+19
View File
@@ -1,3 +1,22 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { css } from "src/types/vars"; import { css } from "src/types/vars";
import { activeItemAfterStyle } from "styles/public/menu"; import { activeItemAfterStyle } from "styles/public/menu";
styles/components/notification.ts
+19
View File
@@ -1,3 +1,22 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { css, otherThemeVars, themeVars } from "src/types/vars"; import { css, otherThemeVars, themeVars } from "src/types/vars";
// 用户订阅/关注页面 // 用户订阅/关注页面
styles/components/org.ts
+19
View File
@@ -1,3 +1,22 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { css, themeVars } from "src/types/vars"; import { css, themeVars } from "src/types/vars";
export const org = css` export const org = css`
styles/components/clone.ts → styles/components/repo/clone.ts
+22 -2
View File
@@ -1,3 +1,22 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars"; import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars";
// 克隆按钮的弹窗 // 克隆按钮的弹窗
@@ -94,9 +113,10 @@ export const clone = css`
padding: 6px 8px; padding: 6px 8px;
height: 32px; height: 32px;
margin: 0; margin: 0;
gap: 4px;
svg { svg {
color: ${themeVars.color.text.light.num1}; color: ${themeVars.color.text.light.num1} !important; // 覆盖 .gitea-vscodium 颜色
margin-right: 0.25rem; margin-right: 4px;
} }
} }
> .item:hover { > .item:hover {
styles/components/commit.ts → styles/components/repo/commit.ts
+22 -3
View File
@@ -1,10 +1,29 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { css, otherThemeVars, themeVars } from "src/types/vars"; import { css, otherThemeVars, themeVars } from "src/types/vars";
// 提交列表 // 提交列表
export const commit = css` export const commit = css`
.page-content.repository { .page-content.repository.commits {
// 提交列表 (选择器保证同等优先级覆盖了 gitea 原生的样式) // 提交列表 (选择器保证同等优先级覆盖了 gitea 原生的样式)
#commits-table.ui.basic.striped.table tbody.commit-list { .ui.attached.table.segment.commit-table tbody.commit-list {
// 作者 // 作者
.author { .author {
img.ui.avatar { img.ui.avatar {
@@ -28,7 +47,7 @@ export const commit = css`
// 提交信息 // 提交信息
.message { .message {
// tag 标签 // tag 标签
a.ui.basic.primary.label { a.ui.basic.label {
border-radius: 9999px; border-radius: 9999px;
border-width: 1.5px; border-width: 1.5px;
padding: 3px 8px !important; padding: 3px 8px !important;
styles/components/diff.ts → styles/components/repo/diff.ts
+19
View File
@@ -1,3 +1,22 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { css, otherThemeVars, themeVars } from "src/types/vars"; import { css, otherThemeVars, themeVars } from "src/types/vars";
export const diff = css` export const diff = css`
styles/components/repo/index.ts
+29
View File
@@ -0,0 +1,29 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import "./clone";
import "./commit";
import "./diff";
import "./milestones";
import "./packages";
import "./release";
import "./repo";
import "./repo_file_view";
import "./repo_files";
import "./repo_sidebar";
styles/components/milestones.ts → styles/components/repo/milestones.ts
+19
View File
@@ -1,3 +1,22 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { css, themeVars } from "src/types/vars"; import { css, themeVars } from "src/types/vars";
export const milestone = css` export const milestone = css`
styles/components/packages.ts → styles/components/repo/packages.ts
+19
View File
@@ -1,3 +1,22 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { css, otherThemeVars, themeVars } from "src/types/vars"; import { css, otherThemeVars, themeVars } from "src/types/vars";
// 组织/仓库的软件包列表(包含用户但未测试) // 组织/仓库的软件包列表(包含用户但未测试)
styles/components/release.ts → styles/components/repo/release.ts
+19
View File
@@ -1,3 +1,22 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { css, themeVars } from "src/types/vars"; import { css, themeVars } from "src/types/vars";
// release 顶部栏左侧按钮组 // release 顶部栏左侧按钮组
styles/components/repo.ts → styles/components/repo/repo.ts
+19
View File
@@ -1,3 +1,22 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { css, otherThemeVars, themeVars } from "src/types/vars"; import { css, otherThemeVars, themeVars } from "src/types/vars";
// 仓库头信息 // 仓库头信息
styles/components/repo/repo_file_view.ts
+257
View File
@@ -0,0 +1,257 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { css, otherThemeVars, themeVars } from "src/types/vars";
import { activeItemAfterStyle } from "styles/public/menu";
// 仓库打开文件时的视图
export const repoFileView = css`
// 隐藏主内容的下内容和页脚, 避免滚动文件树时滚动条遮挡
body > .full.height:has(.repo-view-file-tree-container) {
padding-bottom: 0;
+ .page-footer {
display: none;
}
}
.page-content.repository.file.list {
&:has(.repo-view-file-tree-container) {
// 取消下间隔优化观看体验
> .secondary-nav {
margin-bottom: 0 !important;
.ui.tabs.divider {
margin-bottom: 0;
}
}
// 为文件树选中项目伪元素让出 8px 的空间
> .ui.container.fluid {
margin-left: 8px;
max-width: calc(100% - calc(2 * 8px));
}
}
.repo-view-container {
// 左侧文件树
.repo-view-file-tree-container {
height: 100vh;
flex: 0 0 20%;
overflow-y: unset;
position: sticky;
top: 0;
&:after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 1px;
height: 100%;
background: ${themeVars.color.secondary.self};
}
> .repo-button-row {
align-content: center;
background: ${themeVars.color.body};
font-size: 16px;
margin: 16px 0;
padding: 8px;
// 固定头部, 早期父元素有多余的页脚和内容高度导致滚动时无法固定, 修复后也可保留此属性无需删除
position: sticky;
top: 0;
&:after {
content: "";
position: absolute;
top: 64px;
left: -16px;
width: calc(100% + 16px);
height: 1px;
background: ${themeVars.color.secondary.self};
}
.repo-view-file-tree-toggle {
border-color: #0000;
min-width: 32px;
}
.ui.compact.icon.button {
border: 0;
}
}
.view-file-tree-items {
margin-right: 0;
padding: 12px 16px 8px 0;
.tree-item {
position: relative;
margin-left: 8px;
&.selected:after {
content: "";
${activeItemAfterStyle}
}
}
}
}
// 右侧文件视图内容
.repo-view-content {
padding-bottom: 40px;
.repo-button-row {
align-content: center;
background: ${themeVars.color.box.header};
border: 1px solid ${themeVars.color.secondary.self};
border-radius: ${otherThemeVars.border.radius};
height: 46px; // 固定高度匹配第二固定栏的 top 值
margin: 16px 0;
padding: 8px;
position: sticky;
top: 0;
z-index: 1;
.ui.button {
min-height: 32px;
}
// 打开文件树按钮
.repo-view-file-tree-toggle {
background: initial;
border-color: #0000;
padding: 0;
min-width: 32px;
&:hover {
background: ${themeVars.color.hover.self};
}
}
// 分支选择按钮
.branch-dropdown-button {
padding: 0 12px;
}
// 路径
.repo-path {
gap: 4px;
.section {
&:first-child,
&.active {
font-weight: 600;
}
}
.btn {
svg {
margin-left: 4px;
color: ${themeVars.color.text.light.num1};
}
}
}
}
.non-diff-file-content {
// 避免分支菜单遮挡
position: relative;
z-index: 0;
h4.file-header {
padding: 8px 12px !important;
position: sticky;
// 重叠边框线, 避免过粗
top: 45px;
z-index: 1;
.file-header-left {
color: ${themeVars.color.text.light.num1};
font-size: 12px;
}
.file-header-right {
gap: 0px;
// 按钮组
> .ui.buttons {
margin: 0 8px 0 0 !important; // 完全不知道为什么浏览器最终效果没生效, 只能 !important 了
.ui.mini.button {
min-height: 28px;
height: 28px;
font-size: 12px;
padding: 0 8px;
}
}
// 右侧操作按钮
> .btn-octicon {
display: flex;
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};
}
&:last-of-type {
border-top-right-radius: ${otherThemeVars.border.radius};
border-bottom-right-radius: ${otherThemeVars.border.radius};
// 与无权限按钮之间的间距
+ .btn-octicon.disabled {
margin-left: 8px;
}
}
&:hover {
background: ${themeVars.color.hover.self};
color: ${themeVars.color.text.light.num1};
}
}
}
}
}
// 头部提交信息
.ui.segment#repo-file-commit-box {
padding: 8px 12px;
margin-bottom: 16px !important;
min-height: 46px;
> .latest-commit {
gap: 8px;
.commit-summary {
color: ${themeVars.color.text.light.num1};
}
// 作者
.author-wrapper {
display: flex;
}
> img.ui.avatar {
border-radius: 9999px;
width: 20px;
height: 20px;
}
}
// 右侧提交时间
> .age {
display: flex;
align-items: center;
}
}
}
}
}
`;
// 避免手机/平板下路径容器过长导致换行, 取消固定
export const repoFileViewMobile = css`
@media (max-width: 1023.98px) {
.page-content.repository.file.list .repo-view-container .repo-view-content {
.repo-button-row {
height: auto;
position: static;
z-index: 0;
}
.non-diff-file-content {
h4.file-header {
top: 0;
}
}
}
}
`;
styles/components/repo/repo_files.ts
+240
View File
@@ -0,0 +1,240 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { animationDown } from "src/core/styles";
import { css, otherThemeVars, themeVars } from "src/types/vars";
// 文件列表页面下的分支按钮
export const branchButton = css`
.page-content.repository.file.list {
.ui.dropdown.branch-selector-dropdown > .menu > .menu {
// 显示默认分支的标签
.ui.label {
background-color: ${themeVars.color.menu};
border: 1px solid ${themeVars.color.light.border};
margin-top: 1px;
margin-left: auto;
margin-right: 20px; // gitea 有 RSS 留出足够的空间
}
}
}
`;
// 仓库同步派生
export const syncFork = css`
.page-content.repository.file.list {
.repo-home-filelist > .ui.message {
background: ${themeVars.color.box.header};
padding: 8px 8px 8px 16px;
margin: 16px 0px;
.ui.button {
min-width: 96px;
}
}
}
`;
// 转到文件搜索结果弹窗
export const fileSearch = css`
.file-search-popup.file-search-popup.file-search-popup {
${animationDown};
// 统一所有下拉菜单的样式
background-color: ${themeVars.color.menu};
border: unset;
border-radius: 12px;
box-shadow: ${themeVars.github.shadow.floating.small};
z-index: 2; // 避免文件内容浏览界面中的固定导航栏遮挡
.file-search-results {
padding: 12px;
.item {
border-bottom: none;
border-radius: ${otherThemeVars.border.radius};
padding: 6px 8px;
margin: 0 4px;
color: ${themeVars.color.text.light.num1};
&.selected {
background-color: unset;
box-shadow: 0 0 0 2px ${themeVars.github.borderColor.accent.emphasis};
}
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover} !important;
}
.full-path :nth-child(2n) {
color: ${themeVars.color.text.self};
}
}
}
}
`;
// 仓库文件列表
export const repoFiles = css`
// 文件列表和提交列表的按钮组
.repo-button-row {
margin: 16px 0;
.repo-button-row-right {
// 转到文件搜索框
.repo-file-search-container .ui.input {
min-height: 32px;
height: 32px;
> input {
background: unset;
}
}
// 添加文件按钮
.repo-add-file {
padding: 0px 26px 0px 12px;
.menu > .item {
min-width: 128px;
svg {
margin-top: 0;
margin-right: 4px !important;
}
}
}
}
}
.repository.file.list {
#repo-files-table {
margin: 16px 0;
// 头部最后一次提交
.repo-file-line {
padding-right: 16px;
// 父目录
&.parent-link {
gap: 0.5rem;
padding-left: 16px;
svg {
margin-right: 2px;
}
}
// 最后一次提交
&.repo-file-last-commit {
min-height: 3.725rem;
.latest-commit {
gap: 8px;
.commit-summary {
color: ${themeVars.color.text.light.num1};
}
img.ui.avatar {
border-radius: 9999px;
margin-left: 2px;
width: 20px;
height: 20px;
}
// 作者
.author-wrapper {
display: flex;
&:hover {
color: ${themeVars.color.text.self};
}
}
// 提交哈希值
.ui.label {
display: none;
}
}
relative-time {
color: ${themeVars.color.text.light.num1};
}
}
}
// 文件列表
.repo-file-item {
.repo-file-cell {
height: 40px;
&.name {
display: flex;
align-items: center;
gap: 0.5rem;
padding-left: 16px;
}
&.age {
padding-right: 16px;
}
}
}
}
#readme {
.file-header {
background: ${themeVars.color.body};
min-height: 48px;
padding: 0px 8px !important;
overflow-x: visible;
svg {
color: ${themeVars.color.text.light.num1};
}
.file-header-left {
padding: 6px 8px !important;
line-height: 1.45;
// 伪元素宽度等于按钮宽度而不是父元素宽度
position: relative;
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
border-radius: ${otherThemeVars.border.radius};
}
&:after {
content: "";
background: ${themeVars.github.underlineNav.borderColor.active};
border-radius: ${otherThemeVars.border.radius};
bottom: -8px;
left: 0;
height: 2px;
position: absolute;
width: 100%;
}
a.muted:hover {
color: inherit;
text-decoration-line: none;
}
}
.file-header-right {
.btn-octicon {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 8px;
border-radius: ${otherThemeVars.border.radius};
height: 28px;
width: 28px;
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
}
}
}
}
}
}
`;
// 手机下隐藏提交信息
export const repoFilesMobile = css`
@media (max-width: 767.98px) {
#repo-files-table {
grid-template-columns: 1fr auto;
.repo-file-line {
grid-column: 1 / span 2;
}
.repo-file-cell {
&.name {
max-width: none;
}
&.message {
display: none;
}
}
}
}
`;
styles/components/repo/repo_sidebar.ts
+131
View File
@@ -0,0 +1,131 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { css, themeVars } from "src/types/vars";
// 仓库代码布局调整, 侧边栏宽度调整
export const repoGrid = css`
.repo-grid-filelist-sidebar {
grid-template-columns: auto 312px;
gap: 24px;
}
@media (max-width: 767.98px) {
.repo-grid-filelist-sidebar {
grid-template-columns: 100%;
}
}
`;
// 仓库代码页面侧边栏上半部, 版本发布以上
export const repoSidebarTop = css`
.page-content.repository.file.list {
.repo-home-sidebar-top {
// 搜索代码
.ui.input > input {
background: unset;
}
a.muted:hover {
text-decoration: none;
}
.flex-item {
padding: 10px 0 0 0;
// 仓库描述本身
.flex-item-title {
margin-top: 10px;
}
// 仓库描述内容
.flex-item-body {
> .tw-flex:first-child {
margin-top: 16px !important;
gap: 8px !important;
}
.repo-description {
color: ${themeVars.color.text.self};
}
#repo-topics {
margin: 8px 0px !important;
}
.flex-text-block {
font-size: 14px;
font-weight: 600;
margin-top: 10px;
&.muted {
margin-top: 2px;
font-weight: normal;
}
svg.svg {
margin-right: 4px;
&.octicon-database,
&.octicon-law {
margin-right: 6px;
}
}
}
}
}
}
}
`;
// 仓库代码页面侧边栏下半部, 版本发布以下
export const repoSidebarBottom = css`
.page-content.repository.file.list {
.repo-home-sidebar-bottom {
a.muted:hover {
text-decoration: none;
}
.flex-item {
padding: 16px 0;
.flex-item {
padding: 16px 0 0 0;
.flex-item-leading {
svg.svg.octicon-tag {
color: ${themeVars.color.green.self};
}
}
.flex-item-header .flex-item-title {
font-size: 14px;
}
}
.flex-item-body {
font-size: 12px;
}
}
// 编程语言
.language-stats {
height: 8px;
margin-bottom: 0px;
}
.language-stats-details .item {
font-size: 12px;
margin-right: 8px;
.color-icon {
height: 8px;
width: 8px;
margin-right: 8px;
}
.tw-font-semibold {
color: ${themeVars.color.text.self};
margin-right: 2px;
}
}
}
}
`;
styles/components/setting.ts
+39 -3
View File
@@ -1,3 +1,23 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { type StyleRule } from "@vanilla-extract/css";
import { css, themeVars } from "src/types/vars"; import { css, themeVars } from "src/types/vars";
import { primaryHoverStyle, primaryStyle } from "styles/public/button"; import { primaryHoverStyle, primaryStyle } from "styles/public/button";
@@ -5,13 +25,13 @@ const tinyStyle = {
color: themeVars.github.button.primary.fgColor.accent, color: themeVars.github.button.primary.fgColor.accent,
backgroundColor: themeVars.color.button, backgroundColor: themeVars.color.button,
borderColor: themeVars.color.light.border, borderColor: themeVars.color.light.border,
}; } satisfies StyleRule;
const tinyHoverStyle = { const tinyHoverStyle = {
color: themeVars.github.button.primary.fgColor.rest, color: themeVars.github.button.primary.fgColor.rest,
backgroundColor: themeVars.github.button.primary.bgColor.hover, backgroundColor: themeVars.github.button.primary.bgColor.hover,
borderColor: themeVars.github.button.primary.borderColor.hover, borderColor: themeVars.github.button.primary.borderColor.hover,
}; } satisfies StyleRule;
// 设置界面下的按钮 // 设置界面下的按钮
export const button = css` export const button = css`
@@ -29,6 +49,9 @@ export const button = css`
&:hover { &:hover {
background-color: ${themeVars.color.hover.self}; background-color: ${themeVars.color.hover.self};
} }
&:active {
background-color: ${themeVars.github.button.default.bgColor.active};
}
} }
// 迷你按钮替换为自定义的主色调按钮 (例: SSH 验证按钮) // 迷你按钮替换为自定义的主色调按钮 (例: SSH 验证按钮)
.ui.primary.button.tiny { .ui.primary.button.tiny {
@@ -36,14 +59,18 @@ export const button = css`
&:hover { &:hover {
${tinyHoverStyle} ${tinyHoverStyle}
} }
&:active {
background-color: ${themeVars.github.button.primary.bgColor.active};
}
} }
} }
// 右上角迷你按钮替换会主色调按钮 // 所有设置界面
.user-main-content, .user-main-content,
.repo-setting-content, .repo-setting-content,
.user-setting-content, .user-setting-content,
.org-setting-content, .org-setting-content,
.admin-setting-content { .admin-setting-content {
// 右上角迷你按钮替换会主色调按钮
.ui.attached.header > .ui.right { .ui.attached.header > .ui.right {
.ui.primary.button.tiny { .ui.primary.button.tiny {
${primaryStyle} ${primaryStyle}
@@ -53,6 +80,9 @@ export const button = css`
&:hover { &:hover {
${primaryHoverStyle} ${primaryHoverStyle}
} }
&:active {
background-color: ${themeVars.github.button.primary.bgColor.active};
}
} }
} }
} }
@@ -65,6 +95,12 @@ export const button = css`
&:hover { &:hover {
${tinyHoverStyle} ${tinyHoverStyle}
} }
&:active {
background-color: ${themeVars.github.button.primary.bgColor.active};
// 保持鼠标移开时边框颜色和文字颜色不变
border-color: ${themeVars.github.button.primary.borderColor.hover};
color: ${themeVars.github.button.primary.fgColor.rest};
}
} }
.ui.red.button { .ui.red.button {
box-shadow: ${themeVars.github.shadow.resting.small}; box-shadow: ${themeVars.github.shadow.resting.small};
styles/components/signin.ts
+19
View File
@@ -1,3 +1,22 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { css } from "src/types/vars"; import { css } from "src/types/vars";
// 注册/登录界面 // 注册/登录界面
styles/components/user.ts
+19
View File
@@ -1,3 +1,22 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { css, themeVars } from "src/types/vars"; import { css, themeVars } from "src/types/vars";
// 用户点星仓库列表 // 用户点星仓库列表
styles/index.ts
+18
View File
@@ -1,6 +1,24 @@
// organize-imports-ignore // organize-imports-ignore
// tslint:disable:ordered-imports // tslint:disable:ordered-imports
// 组件导入有顺序, 禁止插件优化 // 组件导入有顺序, 禁止插件优化
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
// 全局样式 // 全局样式
import "./public"; import "./public";
styles/public/animation.ts
-36
View File
@@ -1,36 +0,0 @@
import { overlayAppear, overlayAppearDown, overlayAppearUp } from "src/core/theme";
import { css } from "src/types/vars";
export const keyframe = css`
// 出现动画
@keyframes ${overlayAppear} {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
// 向下出现动画
@keyframes ${overlayAppearDown} {
0% {
opacity: 0;
transform: translateY(-8px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
// 向上出现动画
@keyframes ${overlayAppearUp} {
0% {
opacity: 0;
transform: translateY(8px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
`;
styles/public/attached.ts
+26 -1
View File
@@ -1,3 +1,22 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { css, otherThemeVars, themeVars } from "src/types/vars"; import { css, otherThemeVars, themeVars } from "src/types/vars";
export const attached = css` export const attached = css`
@@ -33,10 +52,16 @@ export const attached = css`
border-bottom-right-radius: 0 !important; border-bottom-right-radius: 0 !important;
border: 1px solid ${themeVars.color.light.border} !important; border: 1px solid ${themeVars.color.light.border} !important;
+ .ui.attached.segment { + .ui.attached.segment {
border-top: 0 !important; border-top-width: 0 !important;
border-top-left-radius: 0 !important; border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important; border-top-right-radius: 0 !important;
} }
// 隐藏的元素下面的元素, 目前仅适用于在后台控制中的自我检查
&.tw-hidden + .ui.attached.segment {
border-top-width: 1px !important;
border-top-left-radius: ${otherThemeVars.border.radius} !important;
border-top-right-radius: ${otherThemeVars.border.radius} !important;
}
&:has(+ :not(.ui.attached.segment)), &:has(+ :not(.ui.attached.segment)),
&:last-child { &:last-child {
border-bottom-left-radius: ${otherThemeVars.border.radius} !important; border-bottom-left-radius: ${otherThemeVars.border.radius} !important;
styles/public/base.ts
+28
View File
@@ -1,3 +1,22 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { css } from "src/types/vars"; import { css } from "src/types/vars";
export const body = css` export const body = css`
@@ -11,4 +30,13 @@ export const body = css`
code:not(.code-inner) { code:not(.code-inner) {
padding: 0.2em 0.4em; padding: 0.2em 0.4em;
} }
// 快捷键提示(输入框内)
kbd {
background-color: #0000;
font-size: 12px;
box-shadow: none;
padding: 4px;
min-width: 20px;
line-height: 10px;
}
`; `;
styles/public/button.ts
+33 -4
View File
@@ -1,3 +1,23 @@
/*!
* Copyright (c) https://github.com/lutinglt
*
* See the NOTICE file distributed with this work for additional
* information regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { type StyleRule } from "@vanilla-extract/css";
import { css, themeVars } from "src/types/vars"; import { css, themeVars } from "src/types/vars";
export const primaryStyle = { export const primaryStyle = {
@@ -5,13 +25,13 @@ export const primaryStyle = {
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, boxShadow: themeVars.github.shadow.resting.small,
}; } satisfies StyleRule;
export const primaryHoverStyle = { export const primaryHoverStyle = {
color: themeVars.github.button.primary.fgColor.rest, color: themeVars.github.button.primary.fgColor.rest,
backgroundColor: themeVars.github.button.primary.bgColor.hover, backgroundColor: themeVars.github.button.primary.bgColor.hover,
borderColor: themeVars.github.button.primary.borderColor.hover, borderColor: themeVars.github.button.primary.borderColor.hover,
}; } satisfies StyleRule;
// 普通按钮和主色调按钮 // 普通按钮和主色调按钮
export const baseButton = css` export const baseButton = css`
@@ -38,6 +58,9 @@ export const baseButton = css`
&:hover { &:hover {
${primaryHoverStyle} ${primaryHoverStyle}
} }
&:active {
background-color: ${themeVars.github.button.primary.bgColor.active};
}
} }
// 按钮组整体有阴影 // 按钮组整体有阴影
&.buttons { &.buttons {
@@ -71,6 +94,7 @@ export const baseButton = css`
} }
/* 普通按钮激活时背景色 */ /* 普通按钮激活时背景色 */
.ui.button:active,
.ui.basic.buttons .button:active, .ui.basic.buttons .button:active,
.ui.basic.button:active, .ui.basic.button:active,
.ui.basic.buttons .active.button, .ui.basic.buttons .active.button,
@@ -88,15 +112,20 @@ export const redButton = css`
.ui.basic.red.button { .ui.basic.red.button {
color: ${themeVars.github.button.danger.fgColor.rest}; color: ${themeVars.github.button.danger.fgColor.rest};
background-color: ${themeVars.github.button.danger.bgColor.rest}; background-color: ${themeVars.github.button.danger.bgColor.rest};
/* 一些按钮边框色为红色, 比如危险操作区, 统一为暗色边框和 github 一致 */ // 一些按钮边框色为红色, 比如危险操作区, 统一为暗色边框和 github 一致
border-color: ${themeVars.color.light.border}; border-color: ${themeVars.color.light.border};
&:hover { &:hover {
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}; box-shadow: ${themeVars.github.shadow.resting.small};
} }
&:active {
color: ${themeVars.github.button.danger.fgColor.hover};
background-color: ${themeVars.github.button.danger.bgColor.active};
border-color: ${themeVars.github.button.danger.borderColor.hover};
box-shadow: ${themeVars.github.shadow.resting.small};
}
} }
`; `;
Loaded 100 of 149 files, more files were not shown because too many files have changed in this diff. Show more