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
+6338 -2885
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.env.example
+2
View File
@@ -8,3 +8,5 @@ SSH_USER=root
GITEA_THEME_PATH=/data/gitea/public/assets/css/
# Gitea 数据路径, 用于上传到服务器的模板路径, 请使用绝对路径
GITEA_PATH=/data/gitea/
# 是否同步模板文件
SYNC_TMPL=false
.gitattributes
+8
View File
@@ -1 +1,9 @@
*.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
#### CSS 变量
#### CSS Variable
### 🌈 Style
#### 更符合 GitHub 风格
##### 模板文件
### 🐞 Fix
## 📃 English
#### CSS Variable
#### Adaptation for version 1.26
#### More GitHub-like style
##### Template File
```text
在 English 下方补充上面 Feature 以下部分的内容的中译英​
```
### 🐞 Fix
.github/workflows/release.yml
+3 -3
View File
@@ -13,17 +13,17 @@ jobs:
- uses: actions/checkout@v4
- name: Build theme
run: |
npm run install:vite8
npm install
npm run release
- name: Create release
run: |
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
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
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
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
#### 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
- 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 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
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
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]
>
> 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
> non-project themes.
README_CN.md
+2 -9
View File
@@ -31,14 +31,6 @@ Gitea 理论上小版本号变更不会修改前端布局, 所以主题的小版
仅维护项目发布中的最新的 Gitea 版本, 其他旧版本主题不接受 Issue 和 PR.
> 开发阶段的主题版本号格式: `1.大版本号.小版本号.时间戳`
### 主题版本发布规则
- 当 Gitea 发布小版本时, 主题中间如有变更, 则发布新的和 Gitea 小版本相同的主题版本
- 当 Gitea 发布大版本时, 主题中间如有变更, 会发布 `1.旧大版本号.latest` 的主题版本并不再维护旧版本
- 适配大版本的预发布版本为 `1.大版本号.rc`, 当无明显 BUG 时发布与 Gitea 大版本相同的主题版本
## 安装
1. 在发布页下载最新的 CSS 主题文件放入 `data/gitea/public/assets/css` 目录下 (默认可能没有此目录需手动创建)
@@ -69,7 +61,8 @@ THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github-
> [!IMPORTANT]
>
> 模板修改了 Gitea 的布局, 使其更接近 GitHub 的布局, 请勿跨版本使用模板文件, 可能会导致功能缺失等问题
> 模板修改了 Gitea 的布局, 使其更接近 GitHub 的布局, 请勿跨版本使用模板文件, 可能会导致功能缺失,
> 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 { defineConfig } from "eslint/config";
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"}}">
<div class="navbar-left">
<!-- 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">
</a>
@@ -26,17 +26,17 @@
<a class="item{{if .PageIsMilestonesDashboard}} active{{end}}" href="{{AppSubUrl}}/milestones">{{ctx.Locale.Tr "milestones"}}</a>
{{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}}
<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}}
<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}}
{{template "custom/extra_links" .}}
{{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}}
</div>
@@ -47,7 +47,7 @@
<span class="text">
{{ctx.AvatarUtils.Avatar .SignedUser 24 "tw-mr-1"}}
<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>
<div class="menu user-menu">
<div class="header">
@@ -55,7 +55,7 @@
</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"}}
{{ctx.Locale.Tr "sign_out"}}
</a>
@@ -64,9 +64,9 @@
{{else if .IsSigned}}
{{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"}}">
<span class="text">
<span class="flex-text-block">
{{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>
<div class="menu">
@@ -87,10 +87,13 @@
</div><!-- end dropdown menu create new -->
<div class="ui dropdown jump item" data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}">
<span class="text">
{{ctx.AvatarUtils.Avatar .SignedUser 24 "tw-mr-1"}}
<span class="text tw-flex tw-items-center">
<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="not-mobile">{{svg "octicon-triangle-down"}}</span>
<span class="not-mobile flex-text-block">{{svg "octicon-triangle-down"}}</span>
</span>
<div class="menu user-menu">
<div class="header">
@@ -116,7 +119,7 @@
{{svg "octicon-tools"}}
{{ctx.Locale.Tr "your_settings"}}
</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"}}
{{ctx.Locale.Tr "help"}}
</a>
@@ -128,7 +131,7 @@
</a>
{{end}}
<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"}}
{{ctx.Locale.Tr "sign_out"}}
</a>
@@ -141,7 +144,7 @@
<span class="tw-ml-1">{{ctx.Locale.Tr "register"}}</span>
</a>
{{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"}}
<span class="tw-ml-1">{{ctx.Locale.Tr "sign_in"}}</span>
</a>
@@ -151,14 +154,13 @@
{{$activeStopwatch := and .PageGlobalData (call .PageGlobalData.GetActiveStopwatch)}}
{{if $activeStopwatch}}
<div class="active-stopwatch-popup tippy-target">
<div class="tw-flex tw-items-center tw-gap-2 tw-p-3">
<a class="stopwatch-link tw-flex tw-items-center tw-gap-2 muted" href="{{$activeStopwatch.IssueLink}}">
<div class="flex-text-block tw-p-3">
<a class="stopwatch-link flex-text-block muted" href="{{$activeStopwatch.IssueLink}}">
{{svg "octicon-issue-opened" 16}}
<span class="stopwatch-issue">{{$activeStopwatch.RepoSlug}}#{{$activeStopwatch.IssueIndex}}</span>
</a>
<div class="tw-flex tw-gap-1">
<form class="stopwatch-commit form-fetch-action" method="post" action="{{$activeStopwatch.IssueLink}}/times/stopwatch/stop">
{{.CsrfTokenHtml}}
<button
type="submit"
class="ui button mini compact basic icon tw-mr-0"
@@ -166,7 +168,6 @@
>{{svg "octicon-square-fill"}}</button>
</form>
<form class="stopwatch-cancel form-fetch-action" method="post" action="{{$activeStopwatch.IssueLink}}/times/stopwatch/cancel">
{{.CsrfTokenHtml}}
<button
type="submit"
class="ui button mini compact basic icon tw-mr-0"
@@ -178,3 +179,4 @@
</div>
{{end}}
</nav>
{{template "base/head_banner"}}
gitea/templates/base/head_navbar_icons.tmpl
+2 -7
View File
@@ -5,21 +5,16 @@
{{- $notificationUnreadCount := call $data.GetNotificationUnreadCount -}}
{{if $activeStopwatch}}
<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"}}
<span class="header-stopwatch-dot"></span>
</div>
</a>
{{end}}
<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"}}
<span class="notification_count{{if not $notificationUnreadCount}} tw-hidden{{end}}">{{$notificationUnreadCount}}</span>
</div>
</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}}
gitea/templates/repo/view_list.tmpl
+3 -3
View File
@@ -21,7 +21,7 @@
{{$submoduleLink := $submoduleFile.SubmoduleWebLinkTree ctx}}
{{if $submoduleLink}}
<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}}
<span class="entry-name" title="{{$entry.Name}}">{{$entry.Name}}</span>
@ {{ShortSha $submoduleFile.RefID}}
@@ -36,7 +36,7 @@
{{$subJumpablePathName}}
{{else}}
{{$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}}
</a>
{{else}}
@@ -47,7 +47,7 @@
{{end}}
{{end}}
</div>
<div class="repo-file-cell message loading-icon-2px">
<div class="repo-file-cell message commit-summary loading-icon-2px">
{{if $commit}}
{{$commitLink := printf "%s/commit/%s" $.RepoLink (PathEscape $commit.ID.String)}}
{{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",
"version": "1.25.5",
"version": "1.26.0",
"license": "Apache-2.0",
"author": {
"name": "lutinglt",
"url": "https://github.com/lutinglt"
},
"type": "module",
"scripts": {
"dev": "vite build --mode dev",
@@ -10,32 +15,31 @@
"commit": "npm run lint && npm run format && npm run build",
"version": "node scripts/version.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",
"install:clean": "npm cache clean --force && rm -rf node_modules package-lock.json && npm install",
"install:vite8": "npm install --force"
"install:clean": "npm cache clean --force && rm -rf node_modules package-lock.json && npm install"
},
"devDependencies": {
"@babel/preset-typescript": "^7.28.4",
"@eslint/js": "^9.29.0",
"@linaria/core": "^6.3.0",
"@types/node": "^24.0.3",
"@typescript/native-preview": "^7.0.0-dev.20251203.1",
"@vanilla-extract/css": "^1.17.5",
"@vanilla-extract/vite-plugin": "^5.1.3",
"@wyw-in-js/babel-preset": "^0.7.0",
"@wyw-in-js/vite": "^0.7.0",
"dotenv": "^17.0.0",
"eslint": "^9.29.0",
"globals": "^16.2.0",
"lightningcss": "^1.30.1",
"@babel/preset-typescript": "^7.28.5",
"@eslint/js": "^10.0.1",
"@linaria/core": "^7.0.0",
"@types/node": "^25.5.2",
"@typescript/native-preview": "^7.0.0-dev.20260406.1",
"@vanilla-extract/css": "^1.20.1",
"@vanilla-extract/vite-plugin": "^5.2.2",
"@wyw-in-js/vite": "^1.0.7",
"dotenv": "^17.4.1",
"eslint": "^10.2.0",
"globals": "^17.4.0",
"lightningcss": "^1.32.0",
"polished": "^4.3.1",
"prettier": "3.5.3",
"prettier-plugin-organize-imports": "^4.1.0",
"sass-embedded": "^1.89.2",
"typescript-eslint": "^8.34.1",
"typescript-plugin-css-modules": "^5.1.0",
"vite": "^7.3.1"
"prettier": "3.8.1",
"prettier-plugin-organize-imports": "^4.3.0",
"sass-embedded": "^1.99.0",
"typescript-eslint": "^8.58.0",
"typescript-plugin-css-modules": "^5.2.0",
"undici": "^8.1.0",
"vite": "^8.0.5"
},
"prettier": {
"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 path = require("path");
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");
dotenv.config({ quiet: true });
const rootDir = path.join(__dirname, "..");
const rootDir = path.join(__dirname, "..");
const pkgPath = path.join(rootDir, "package.json");
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 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 () => {
for (const locale of locales) {
const localUrl = `${githubUrl}/${locale}`;
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);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
let content = await response.text();
let content = await response.json();
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.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) {
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 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";
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 { scaleColorLight } from "src/functions";
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 { scaleColorLight } from "src/functions";
import { type GithubColor } from "./github";
@@ -46,15 +65,22 @@ export function display2GithubColor(
button: {
...baseGithubColor.button,
primary: {
...baseGithubColor.button.primary,
fgColor: {
...baseGithubColor.button.primary.fgColor,
accent: soft ? displayColor.num7 : displayColor.num6,
rest: baseGithubColor.button.primary.fgColor.rest,
},
bgColor: {
...baseGithubColor.button.primary.bgColor,
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: {
@@ -71,7 +97,6 @@ export function display2GithubColor(
contribution: {
...baseGithubColor.contribution,
default: {
...baseGithubColor.contribution.default,
bgColor: {
num0: baseGithubColor.contribution.default.bgColor.num0,
num1: soft ? displayColor.num2 : displayColor.num1,
@@ -79,6 +104,7 @@ export function display2GithubColor(
num3: soft ? displayColor.num5 : displayColor.num4,
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 type { Console, Diff, Other } from "src";
import { scaleColorLight } from "src/functions";
@@ -50,7 +69,7 @@ export type GithubColor = {
default: string;
inset: string;
muted: string;
neutral: { muted: string };
neutral: { muted: string; emphasis: string };
};
borderColor: {
accent: { emphasis: string };
@@ -60,17 +79,18 @@ export type GithubColor = {
done: { emphasis: string };
muted: string;
translucent: string;
emphasis: string;
};
button: {
primary: { fgColor: { accent: string; rest: string }; bgColor: { rest: string; hover: string } };
danger: { fgColor: { rest: string; hover: string }; bgColor: { hover: string } };
primary: { fgColor: { accent: string; rest: string }; bgColor: { rest: string; hover: string; active: string } };
danger: { fgColor: { rest: string; hover: string }; bgColor: { hover: string; active: string } };
star: { iconColor: string };
};
control: {
bgColor: { active: string; hover: string; rest: 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 };
underlineNav: { borderColor: { active: string } };
contribution: {
@@ -95,10 +115,12 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
bg: githubColor.overlay.bgColor,
border: githubColor.borderColor.muted,
},
link: githubColor.fgColor.muted,
};
const diff: Diff = {
added: {
fg: githubColor.bgColor.success.emphasis,
linenum: {
bg: githubColor.diffBlob.addtionNum.bgColor,
},
@@ -111,6 +133,7 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
},
},
removed: {
fg: githubColor.bgColor.danger.emphasis,
linenum: {
bg: githubColor.diffBlob.deletionNum.bgColor,
},
@@ -156,11 +179,8 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
input: {
text: themeVars.color.text.self,
background: githubColor.bgColor.muted,
toggleBackgound: themeVars.color.body,
border: {
self: themeVars.color.light.border,
hover: themeVars.color.light.border,
},
toggleBackgound: githubColor.bgColor.inset,
border: themeVars.color.light.border,
},
light: {
self: themeVars.color.body,
@@ -189,7 +209,10 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
secondaryBg: "unset",
expandButton: githubColor.diffBlob.hunkNum.bgColor.rest,
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,
caret: themeVars.color.text.dark,
reaction: {
@@ -220,6 +243,14 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
bg: githubColor.bgColor.attention.muted,
},
overlayBackdrop: githubColor.overlay.backdrop.bgColor,
danger: themeVars.color.red.self,
transparency: {
grid: {
light: "#ffffff",
dark: "#e5e5e5",
},
},
workflowEdgeHover: githubColor.bgColor.accent.emphasis,
};
const github: Github = {
@@ -231,6 +262,7 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
accent: githubColor.fgColor.accent,
success: githubColor.fgColor.success,
done: githubColor.fgColor.done,
onEmphasis: githubColor.fgColor.onEmphasis,
},
bgColor: {
accent: {
@@ -249,6 +281,9 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
done: {
emphasis: githubColor.bgColor.done.emphasis,
},
neutral: {
emphasis: githubColor.bgColor.neutral.emphasis,
},
},
borderColor: {
accent: {
@@ -263,6 +298,7 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
done: {
emphasis: githubColor.borderColor.done.emphasis,
},
emphasis: githubColor.borderColor.emphasis,
},
button: {
default: {
@@ -281,6 +317,7 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
bgColor: {
rest: githubColor.button.primary.bgColor.rest,
hover: githubColor.button.primary.bgColor.hover,
active: githubColor.button.primary.bgColor.active,
},
borderColor: {
rest: githubColor.borderColor.translucent,
@@ -295,6 +332,7 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
bgColor: {
rest: githubColor.control.bgColor.rest,
hover: githubColor.button.danger.bgColor.hover,
active: githubColor.button.danger.bgColor.active,
},
borderColor: {
hover: githubColor.borderColor.translucent,
@@ -318,8 +356,11 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
floating: {
small: `0px 0px 0px 1px ${themeVars.color.light.border}, 0px 6px 12px -3px ${themeVars.color.shadow.self}, 0px 6px 18px 0px ${themeVars.color.shadow.self};`,
},
inset: `inset 0px 1px 0px 0px ${githubColor.shadow.inset}`,
resting: {
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: {
@@ -350,6 +391,7 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
},
},
},
workflowCardBg: githubColor.isDarkTheme ? githubColor.bgColor.muted : githubColor.bgColor.default,
};
return {
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";
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";
export type prettylightsColor = {
@@ -41,7 +60,7 @@ export function prettylights2Chroma(prettylights: prettylightsColor): Chroma {
namespace: prettylights.syntax.keyword,
pseudo: prettylights.syntax.constant,
reserved: prettylights.syntax.keyword,
type: prettylights.syntax.markup.bold,
type: prettylights.syntax.variable,
},
name: {
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";
import path from "node:path";
/*!
* 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 { createGlobalTheme, globalKeyframes, globalStyle } from "@vanilla-extract/css";
import { otherThemeVars, themeInfoVars, themeVars } from "src/types/vars";
import * as selectors from "./selectors";
import type { MapLeafNodes, WithOptionalLayer } from "./types";
export type Theme = WithOptionalLayer<MapLeafNodes<typeof themeVars, string>>;
export const overlayAppear = "overlay-appear";
export const animation = {
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}"`;
// vite define 编译时注入的常量
declare const __THEME_VERSION__: string;
export function createTheme(theme: Theme): void {
const isDarkTheme: boolean = JSON.parse(theme.isDarkTheme);
createGlobalTheme(":root", themeInfoVars, { version });
createGlobalTheme(":root", themeVars, theme);
createGlobalTheme(":root", otherThemeVars, {
// 全局主题变量
createGlobalTheme(selectors.root, themeInfoVars, { version: `"${__THEME_VERSION__}"` });
createGlobalTheme(selectors.root, themeVars, theme);
createGlobalTheme(selectors.root, otherThemeVars, {
border: { radius: "6px" },
color: {
git: "#f05133",
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)))",
},
},
color: { git: "#f05133" },
checkbox: { size: "14px" },
});
globalStyle(":root", {
// 全局样式
globalStyle(selectors.root, {
accentColor: themeVars.color.accent,
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 Tokens = { [key: string]: string | Tokens };
src/core/vite.ts
+54 -6
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 crypto from "node:crypto";
import fs from "node:fs";
@@ -50,9 +69,33 @@ export function themeInput(outDir: string, themeDir: string, mode: string): { [k
return input;
}
const colorBlindMap: Record<string, string> = {
colorblind: "red-green",
tritanopia: "blue-yellow",
};
function giteaThemeMetaInfo(nameGroup: string[]): string {
const displayName = nameGroup.map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
return `gitea-theme-meta-info{--theme-display-name:"GitHub ${displayName}";}`; // 不要省略分号, 也不要追加任何变量, 否则 Gitea 不识别
const colorScheme = nameGroup[nameGroup.length - 1];
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-";
@@ -82,7 +125,8 @@ export function themePlugin(): Plugin {
// 生成所有的主题文件
for (const [key, value] of Object.entries(bundle)) {
// 仅为了类型检查, 逻辑上输出中全是 asset 类型
if (value.type === "asset") {
// vite8 中 bundle 删除后依旧有 styles.css, 追加判断需要有入口的原始文件名
if (value.type === "asset" && value.originalFileNames.length > 0) {
const name = `${prefix}${key}`;
const fileName = `${prefix}${value.fileName}`;
const originalFileName = value.originalFileNames.pop();
@@ -122,6 +166,7 @@ export function themePlugin(): Plugin {
const user = process.env.SSH_USER || "root";
const theme_path = process.env.GITEA_THEME_PATH;
const gitea_path = process.env.GITEA_PATH;
const sync_tmpl = process.env.SYNC_TMPL === "true";
if (server) {
try {
if (theme_path) {
@@ -129,14 +174,18 @@ export function themePlugin(): Plugin {
console.log("[themePlugin] exec:", cmd);
execSync(cmd, { stdio: "inherit" });
} else {
console.log("[themePlugin] no GITEA_THEME_PATH, skip upload");
console.log("[themePlugin] no GITEA_THEME_PATH, skip upload theme");
}
if (gitea_path) {
if (sync_tmpl) {
const cmd = `scp -r templates ${user}@${server}:${gitea_path}`;
console.log("[themePlugin] exec:", cmd);
execSync(cmd, { stdio: "inherit" });
} else {
console.log("[themePlugin] no GITEA_TMPL_PATH, skip upload");
console.log("[themePlugin] not set SYNC_TMPL=true, skip upload templates");
}
} else {
console.log("[themePlugin] no GITEA_PATH, skip upload templates");
}
} catch (_) {
// continue regardless of error
@@ -144,7 +193,6 @@ export function themePlugin(): Plugin {
} else {
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 { 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";
/**
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";
type CSSFallbackVar = `var(--${string}, ${string})`;
/**
* 设置 CSS 变量的回退值
/** 设置 CSS 变量的回退值
* @param cssvar `var(--${string})`
* @param fallback
* @returns `var(--${string}, fallback)`
@@ -11,3 +29,13 @@ export function fallbackVar(cssvar: CSSVarFunction, fallback: string): CSSFallba
const var_name = cssvar.replace("var(--", "").replace(")", "");
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 { defineTheme, type ThemeColor } from "./core/color";
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
export const chroma = {
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 = {
/** 黑色 */
black: null,
@@ -46,4 +65,6 @@ export const console = {
/** 菜单边框色 */
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 = {
bg: null,
border: null,
};
const line = {
/** 对比状态栏上统计所有行数的文字颜色 */
fg: null,
/** 行号 */
linenum: {
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 = {
avatar: {
/** 头像的背景颜色 */
@@ -25,6 +44,10 @@ export const github = {
* @svg `issueClosed` 工单已关闭图标颜色
*/
done: null,
/** 特别强调的文本颜色
* @input `checkBoxAndRadio` 复选框和单选框的文本颜色
*/
onEmphasis: null,
},
/** 用于 background 属性的颜色 */
bgColor: {
@@ -72,6 +95,12 @@ export const github = {
*/
emphasis: null,
},
neutral: {
/** 中性的背景颜色
* @action_summary `summaryView` 节点上的端口的填充色
*/
emphasis: null,
},
},
borderColor: {
accent: {
@@ -104,6 +133,10 @@ export const github = {
*/
emphasis: null,
},
/** 强调边框颜色
* @input `checkBoxAndRadio` 复选框和单选框的边框颜色
*/
emphasis: null,
},
button: {
/** 普通按钮 */
@@ -138,6 +171,10 @@ export const github = {
* @setting `tinyHoverStyle` 按钮的悬停背景颜色
*/
hover: null,
/** 激活色
* @button `baseButton` primary button 点击时的颜色
*/
active: null,
},
borderColor: {
/** 静止色
@@ -171,6 +208,10 @@ export const github = {
* @button `redButton` 红色按钮悬停颜色
*/
hover: null,
/** 激活色
* @button `redButton` 红色按钮点击时的颜色
*/
active: null,
},
borderColor: {
/** 悬停色
@@ -224,6 +265,10 @@ export const github = {
*/
small: null,
},
/** 内嵌阴影
* @input `input` 输入框阴影
*/
inset: null,
resting: {
/** 静止阴影
* @button `primaryStyle` 主色调按钮阴影
@@ -231,6 +276,10 @@ export const github = {
* @setting `button` 红色按钮阴影
*/
small: null,
/** 中等阴影
* @workflow_summary `summaryView` 节点悬浮时的阴影
*/
medium: null,
},
},
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 { ansi, console } from "./console";
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 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 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 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 = {
/** 未知 */
git: null,
light: {
/** 不知道什么用, gitea css 中没有使用这个属性的 */
mimicEnabled: "color-light-mimic-enabled",
},
};
export const other = {
@@ -49,12 +64,11 @@ export const other = {
/** 选中时的文字颜色 */
text: null,
background: null,
/** 找不到, 不知道啥玩意, 似乎是和复选框有关的东西 */
/** 滑块按钮的背景色, 不能与背景色一致
* @example 管理设置中启用/禁用头像
*/
toggleBackgound: "color-input-toggle-background",
border: {
self: null,
hover: null,
},
border: null,
},
light: {
/** 多行下交替行的强调色, 例提交历史 */
@@ -101,8 +115,13 @@ export const other = {
expandButton: "color-expand-button",
/** 不知道 */
placeholderText: "color-placeholder-text",
/** 不知道, css 没有 */
editorLineHighlight: "color-editor-line-highlight",
/** 在线编辑器 */
editor: {
/** 行高亮色 */
lineHighlight: "color-editor-line-highlight",
/** 选中行背景色 */
selection: null,
},
/** 仓库项目页面列的背景色 */
projectColumnBg: "color-project-column-bg",
/** caret-color 属性 */
@@ -153,4 +172,19 @@ export const other = {
},
/** 叠加背景色, 比如弹窗时遮蔽页面其他部分的背景色 */
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 * 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 * as color from "./color";
@@ -30,7 +49,7 @@ const vars = {
github: color.github,
};
const otherVars = { border: { radius: null }, color: { ...color.otherAuto } };
const otherVars = { border: { radius: null }, color: { ...color.otherAuto }, checkbox: { size: null } };
const customVars = {
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";
// 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 { labelStyle } from "styles/public/label";
import { labelStyle } from "styles/public/label/label";
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 {
// 仓库列表的仓库/组织切换按钮
@@ -16,7 +42,9 @@ export const dashboard = css`
padding: 6px 12px !important;
&.active {
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;
}
&::before {
@@ -47,7 +75,9 @@ export const dashboard = css`
.ui.attached.segment {
background-color: ${themeVars.color.menu};
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 {
border-top-left-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";
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 { 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";
export const footer = css`
@@ -11,13 +30,13 @@ export const footer = css`
padding: 16px 0 40px 0;
> .left-links {
gap: 4px;
> a {
a {
color: ${themeVars.color.text.light.num1};
&:hover {
color: ${themeVars.color.primary.self};
}
}
> strong {
strong {
font-weight: 400;
}
}
@@ -28,6 +47,9 @@ export const footer = css`
&:hover {
color: ${themeVars.color.primary.self};
}
> .flex-text-inline {
gap: 4px;
}
}
> a {
border-left: 0;
@@ -38,6 +60,14 @@ export const footer = css`
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";
export const heatmap = css`
@@ -16,7 +35,9 @@ export const heatmap = css`
}
.vch__container {
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;
// 覆盖热力图和图例的背景色
.vch__day__square,
@@ -74,7 +95,9 @@ export const activity = css`
}
.flex-list#activity-feed {
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 {
gap: 12px;
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 "./chroma";
import "./clone";
import "./commit";
import "./dashboard";
import "./diff";
import "./editor";
import "./explore";
import "./filelist";
import "./footer";
import "./heatmap";
import "./issue";
import "./milestones";
import "./issues";
import "./navbar";
import "./newrepo";
import "./notification";
import "./org";
import "./packages";
import "./release";
import "./repo";
import "./setting";
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
+38 -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 { fallbackVar } from "src/functions";
import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars";
@@ -77,17 +96,35 @@ export const navbarRight = css`
&:last-child {
padding: 0;
.text {
// 不显示小箭头标识
// 不显示头像右侧的小箭头下拉菜单标识
> .not-mobile {
display: none;
}
// 手机下的用户名
> .only-mobile {
margin-left: 12px;
font-weight: 600;
}
.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 {
background: unset;
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 { 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";
// 用户订阅/关注页面
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";
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";
// 克隆按钮的弹窗
@@ -94,9 +113,10 @@ export const clone = css`
padding: 6px 8px;
height: 32px;
margin: 0;
gap: 4px;
svg {
color: ${themeVars.color.text.light.num1};
margin-right: 0.25rem;
color: ${themeVars.color.text.light.num1} !important; // 覆盖 .gitea-vscodium 颜色
margin-right: 4px;
}
}
> .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";
// 提交列表
export const commit = css`
.page-content.repository {
.page-content.repository.commits {
// 提交列表 (选择器保证同等优先级覆盖了 gitea 原生的样式)
#commits-table.ui.basic.striped.table tbody.commit-list {
.ui.attached.table.segment.commit-table tbody.commit-list {
// 作者
.author {
img.ui.avatar {
@@ -28,7 +47,7 @@ export const commit = css`
// 提交信息
.message {
// tag 标签
a.ui.basic.primary.label {
a.ui.basic.label {
border-radius: 9999px;
border-width: 1.5px;
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";
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";
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";
// 组织/仓库的软件包列表(包含用户但未测试)
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";
// 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";
// 仓库头信息
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 { primaryHoverStyle, primaryStyle } from "styles/public/button";
@@ -5,13 +25,13 @@ const tinyStyle = {
color: themeVars.github.button.primary.fgColor.accent,
backgroundColor: themeVars.color.button,
borderColor: themeVars.color.light.border,
};
} satisfies StyleRule;
const tinyHoverStyle = {
color: themeVars.github.button.primary.fgColor.rest,
backgroundColor: themeVars.github.button.primary.bgColor.hover,
borderColor: themeVars.github.button.primary.borderColor.hover,
};
} satisfies StyleRule;
// 设置界面下的按钮
export const button = css`
@@ -29,6 +49,9 @@ export const button = css`
&:hover {
background-color: ${themeVars.color.hover.self};
}
&:active {
background-color: ${themeVars.github.button.default.bgColor.active};
}
}
// 迷你按钮替换为自定义的主色调按钮 (例: SSH 验证按钮)
.ui.primary.button.tiny {
@@ -36,14 +59,18 @@ export const button = css`
&:hover {
${tinyHoverStyle}
}
&:active {
background-color: ${themeVars.github.button.primary.bgColor.active};
}
}
// 右上角迷你按钮替换会主色调按钮
}
// 所有设置界面
.user-main-content,
.repo-setting-content,
.user-setting-content,
.org-setting-content,
.admin-setting-content {
// 右上角迷你按钮替换会主色调按钮
.ui.attached.header > .ui.right {
.ui.primary.button.tiny {
${primaryStyle}
@@ -53,6 +80,9 @@ export const button = css`
&:hover {
${primaryHoverStyle}
}
&:active {
background-color: ${themeVars.github.button.primary.bgColor.active};
}
}
}
}
@@ -65,6 +95,12 @@ export const button = css`
&:hover {
${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 {
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";
// 注册/登录界面
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";
// 用户点星仓库列表
styles/index.ts
+18
View File
@@ -1,6 +1,24 @@
// organize-imports-ignore
// 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";
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";
export const attached = css`
@@ -33,10 +52,16 @@ export const attached = css`
border-bottom-right-radius: 0 !important;
border: 1px solid ${themeVars.color.light.border} !important;
+ .ui.attached.segment {
border-top: 0 !important;
border-top-width: 0 !important;
border-top-left-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)),
&:last-child {
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";
export const body = css`
@@ -11,4 +30,13 @@ export const body = css`
code:not(.code-inner) {
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";
export const primaryStyle = {
@@ -5,13 +25,13 @@ export const primaryStyle = {
backgroundColor: themeVars.github.button.primary.bgColor.rest,
borderColor: themeVars.github.button.primary.borderColor.rest,
boxShadow: themeVars.github.shadow.resting.small,
};
} satisfies StyleRule;
export const primaryHoverStyle = {
color: themeVars.github.button.primary.fgColor.rest,
backgroundColor: themeVars.github.button.primary.bgColor.hover,
borderColor: themeVars.github.button.primary.borderColor.hover,
};
} satisfies StyleRule;
// 普通按钮和主色调按钮
export const baseButton = css`
@@ -38,6 +58,9 @@ export const baseButton = css`
&:hover {
${primaryHoverStyle}
}
&:active {
background-color: ${themeVars.github.button.primary.bgColor.active};
}
}
// 按钮组整体有阴影
&.buttons {
@@ -71,6 +94,7 @@ export const baseButton = css`
}
/* 普通按钮激活时背景色 */
.ui.button:active,
.ui.basic.buttons .button:active,
.ui.basic.button:active,
.ui.basic.buttons .active.button,
@@ -88,15 +112,20 @@ export const redButton = css`
.ui.basic.red.button {
color: ${themeVars.github.button.danger.fgColor.rest};
background-color: ${themeVars.github.button.danger.bgColor.rest};
/* 一些按钮边框色为红色, 比如危险操作区, 统一为暗色边框和 github 一致 */
// 一些按钮边框色为红色, 比如危险操作区, 统一为暗色边框和 github 一致
border-color: ${themeVars.color.light.border};
&:hover {
color: ${themeVars.github.button.danger.fgColor.hover};
background-color: ${themeVars.github.button.danger.bgColor.hover};
border-color: ${themeVars.github.button.danger.borderColor.hover};
box-shadow: ${themeVars.github.shadow.resting.small};
}
&: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