yuantao/gitea-banana-theme
1
0
Fork 0
Code Issues Pull Requests Releases 1 Activity

初始化提交

Browse Source
This commit is contained in:
User
2025-09-25 09:28:03 +08:00
commit 59972a282c
115 changed files with 9023 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
styles/public/animation.ts Normal file
View File

@@ -0,0 +1,27 @@
import { overlayAppearDown, overlayAppearUp } from "src/core/theme";
import { css } from "src/types/vars";
export const keyframe = css`
// 向下出现动画
@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);
}
}
`;

36
styles/public/attached.ts Normal file
View File

@@ -0,0 +1,36 @@
import { css, otherThemeVars, themeVars } from "src/types/vars";
export const attached = css`
// 设置右面板的内容
.user-main-content,
.repo-setting-content,
.user-setting-content,
.org-setting-content,
.admin-setting-content,
// 新建页面内容
.page-content.repository.new-repo,
.page-content.repository.new.migrate,
.page-content.repository.new.fork,
.page-content.organization.new.org {
.ui.top.attached.header {
border: 0;
font-size: 20px;
font-weight: 400;
background-color: unset !important;
margin-bottom: 0.25rem;
}
.ui.attached.segment {
background-color: unset;
border-radius: ${otherThemeVars.border.radius} !important;
}
.ui.attached.segment:not(.error) {
border: 1px solid ${themeVars.color.light.border} !important;
}
.ui.attached.segment.error {
border: 1px solid ${themeVars.color.error.border} !important;
}
}
`;

139
styles/public/button.ts Normal file
View File

@@ -0,0 +1,139 @@
import { css, themeVars } from "src/types/vars";
export const primaryStyle = {
color: themeVars.github.button.primary.fgColor.rest,
backgroundColor: themeVars.github.button.primary.bgColor.rest,
borderColor: themeVars.github.button.primary.borderColor.rest,
boxShadow: themeVars.github.shadow.resting.small,
};
export const primaryHoverStyle = {
color: themeVars.github.button.primary.fgColor.rest,
backgroundColor: themeVars.github.button.primary.bgColor.hover,
borderColor: themeVars.github.button.primary.borderColor.hover,
};
// 普通按钮和主色调按钮
export const baseButton = css`
.ui.button {
min-height: 30px;
font-weight: 500;
padding: 9px 16px;
&.ui {
gap: 8px;
}
}
.ui.button:not(.primary):not(.red) svg {
color: ${themeVars.color.text.light.num1};
}
// 主色调按钮保持白色
.ui.primary.buttons .button svg {
color: ${themeVars.color.white};
}
.ui.primary {
&.button,
// 按钮组, PR 里的压缩合并按钮
&.buttons .button {
${primaryStyle}
&:hover {
${primaryHoverStyle}
}
}
// 按钮组整体有阴影
&.buttons {
box-shadow: ${themeVars.github.shadow.resting.small};
.button {
// 按钮组里的按钮无阴影
box-shadow: none;
}
}
}
// 主色调基本按钮和普通按钮一样
// 作者的关注按钮
.ui.basic.primary.button {
background-color: ${themeVars.color.button};
color: ${themeVars.color.text.self};
border-color: ${themeVars.color.light.border};
box-shadow: none;
&:hover {
background-color: ${themeVars.color.hover.self};
color: ${themeVars.color.text.self};
border-color: ${themeVars.color.light.border};
}
}
/* 普通按钮边框色不变 */
.ui.basic.button,
/* 仓库点星等数字标签按钮边框色不变 */
.ui.labeled.button > .label {
&:hover {
border-color: ${themeVars.color.light.border};
}
}
/* 普通按钮激活时背景色 */
.ui.basic.buttons .button:active,
.ui.basic.button:active,
.ui.basic.buttons .active.button,
.ui.basic.active.button,
.ui.basic.buttons .active.button:hover,
.ui.basic.active.button:hover {
background-color: ${themeVars.github.button.default.bgColor.active};
}
`;
// 红色按钮
export const redButton = css`
.ui.red.button,
.ui.basic.red.buttons .button,
.ui.basic.red.button {
color: ${themeVars.github.button.danger.fgColor.rest};
background-color: ${themeVars.github.button.danger.bgColor.rest};
/* 一些按钮边框色为红色, 比如危险操作区, 统一为暗色边框和 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};
}
}
`;
// 修复按钮高度
export const fixButtonHeight = css`
// 修复一些主色调或者其他小按钮的高度避免过高
.ui.small.buttons .button,
.ui.ui.ui.ui.small.button {
min-height: 26px;
height: 32px;
}
// 修复仓库页仓库操作按钮高度对齐和修正
.repo-button-row .ui.button {
min-height: 32px;
}
// 修复因上面小按钮高度导致仓库星标克隆等按钮高度过高
.repo-header {
.ui.ui.ui.ui.small.compact.button,
.ui.labeled.button > .label {
height: 28px;
min-height: 28px;
}
}
.ui.ui.ui.ui.small.button.compact .ui.tiny.buttons .button,
.ui.ui.ui.ui.tiny.button {
min-height: 20px;
}
`;
export const fixButton = css`
// 修复关注&派生 hover 意外点亮右侧 label 左边框
.ui.ui.ui.ui.small.button {
z-index: 0;
}
// 代码复制按钮
.ui.button.code-copy {
padding: 4px 6px;
min-height: 28px;
}
`;

272
styles/public/dropdown.ts Normal file
View File

@@ -0,0 +1,272 @@
import { animationDown, animationUp } from "src/core/theme";
import { fallbackVar } from "src/functions";
import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars";
import { activeItemAfterStyle } from "styles/public/menu";
export const dropdown = css`
.ui.dropdown,
.ui.menu .ui.dropdown {
.menu {
animation: ${animationDown};
// 统一所有下拉菜单的样式
background-color: ${themeVars.color.menu} !important;
border: unset !important;
border-radius: 12px !important;
box-shadow: ${themeVars.github.shadow.floating.small} !important;
// 忽略隐藏
> .item:not(.tw-hidden) {
display: flex !important;
align-items: center;
padding: 6px 8px !important;
border-radius: ${otherThemeVars.border.radius} !important;
gap: 4px;
&:not(.emoji) {
margin: 0 8px;
}
&:not(.emoji):first-of-type {
margin-top: 8px;
}
// 不知道为什么提交差异对比页面操作中的 cherrypick 按钮无法被选中
&.cherry-pick-button,
&:not(.emoji):last-of-type {
margin-bottom: 8px;
}
&:hover {
background-color: ${themeVars.github.control.transparent.bgColor.hover} !important;
}
&.selected {
background-color: ${themeVars.color.active} !important;
&:hover {
background-color: ${themeVars.github.control.transparent.bgColor.hover} !important;
}
}
&.active,
&.selected {
&:after {
content: "";
${activeItemAfterStyle};
}
}
svg {
margin-top: 2px;
margin-right: 4px;
}
// 复选框对齐
.ui.checkbox input[type="checkbox"] {
height: 100%;
}
// 修复 Wiki 页面下搜索框中搜索时, 显示隐藏的项目
&.filtered {
display: none !important;
}
}
// 当筛选后, 让菜单提供边距, 因为无法确定保留的是菜单中哪个 item
// 不是所有菜单都提供边距方式, 原因为比如会导致分支菜单中的查看所有分支上间隔缺失, 这种方式单独为 Wiki 菜单做处理
// 有筛选(.filtered)且有筛选结果(.selected)时提供菜单边距, 没结果时提供会导致多余的菜单边框线
&:has(> .item.filtered):has(> .item.selected) {
padding: 8px 0px;
> .item {
&:first-of-type {
margin-top: 0;
}
&:last-of-type {
margin-bottom: 0;
}
}
}
> .divider {
margin: 8px 0;
}
&:after {
display: none !important;
}
}
}
// 向下弹出的下拉菜单向下偏移
.ui.dropdown:not(.upward),
.ui.menu .ui.dropdown:not(.upward) {
> .menu {
margin-top: 4px !important;
}
}
// 向上弹出的下拉菜单向上偏移
.ui.dropdown.upward,
.ui.menu .ui.dropdown.upward {
> .menu {
animation: ${animationUp};
margin-bottom: 4px !important;
}
}
// 修复 wiki 的页面下拉菜单圆角
.ui.floating.dropdown > .menu {
border-radius: 12px !important;
}
// 修复嵌套菜单的圆角问题, wiki 页面和组织页面的用户下拉菜单
.ui.dropdown .menu {
.scrolling.menu {
border-radius: 0 0 12px 12px !important;
}
// 修复仪表板切换用户按钮菜单下无创建组织按钮时的菜单圆角
&.context-user-switch {
.scrolling.menu:last-child {
border-radius: 0 0 12px 12px !important;
}
}
}
// 修复下拉菜单元素溢出问题
// 用户菜单
.user-menu>.item,
// Issue/PR 菜单
.ui.menu .ui.dropdown.item .menu .item {
width: calc(100% - 16px); // 减去上方 item 的 margin 左右边距
}
// 去掉下拉菜单的边框线
// 设置里的下拉菜单
.ui.selection.dropdown .menu > .item {
border: unset;
}
// 修复一些菜单下的菜单元素溢出问题
// 目前主要为分支菜单
.ui.dropdown .menu .menu {
border-radius: 12px !important;
}
// 修复按钮阴影被覆盖缺少边框线的问题
// 仓库动态页面的右侧按钮, 比如时间周期
.ui.floating.dropdown .menu,
// 仪表板切换控制用户按钮
.ui.dropdown .menu.context-user-switch .scrolling.menu {
box-shadow: ${themeVars.github.shadow.floating.small} !important;
}
`;
// 选择框的下拉菜单看起来像普通按钮
export const selectionDropdown = css`
// 排除可以选择的输入搜索框和创建仓库的拥有者
.ui.selection.dropdown:not(.search):not(.ellipsis-text-items),
.ui.selection.dropdown.active:not(.search):not(.ellipsis-text-items) {
background-color: ${themeVars.color.button};
border-color: ${themeVars.color.light.border};
border-radius: ${otherThemeVars.border.radius};
padding: 8px 16px;
min-height: 32px;
&:focus {
background: ${themeVars.color.button};
border-color: ${themeVars.color.light.border};
}
&:hover {
background: ${themeVars.color.hover.self};
border-color: ${themeVars.color.light.border};
}
// 悬停提供伪元素
.item:hover:after {
content: "";
${activeItemAfterStyle};
}
}
// 修复顶部导航栏工单管理/请求合并页面搜索框旁的选择下拉框按钮内容过窄
.list-header-search .ui.action.input > .dropdown.small {
padding: 8px 40px 8px 16px;
}
// 发布版本页面的分支按钮, 覆盖 Gitea 的样式, 避免按钮元素高度不一致
.repository.new.release .target .selection.dropdown {
padding-top: 8px;
padding-bottom: 8px;
}
// 这个按钮项目前只在创建仓库的拥有者
// 不实现伪元素, 因为 .item 设置溢出的元素会被截断
.ui.selection.dropdown.ellipsis-text-items,
.ui.selection.dropdown.activeellipsis-text-items {
&:focus {
background: ${themeVars.color.button};
border-color: ${themeVars.color.light.border};
}
&:hover {
background: ${themeVars.color.hover.self};
border-color: ${themeVars.color.light.border};
}
}
// 选择输入框效果和输入框 focus 效果一样
.ui.selection.dropdown.active.search {
background: ${themeVars.color.body};
// 向内部添加一个 1px 的边框
box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis};
outline: none;
}
// 覆盖选择输入框向上弹出时的 hover 效果, 原阴影会覆盖加厚的边框线
.ui.selection.dropdown.active.search.upward:hover {
box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis};
}
// 由于之前的排除导致样式优先级变高, 小按钮去除圆角
.ui.action.input > .dropdown.small:not(:first-child) {
border-radius: 0;
}
// 排除一些小按钮, 例如软件包类型, 通常相邻有元素
.ui.selection.dropdown.active:not(.small) {
border-bottom-left-radius: ${otherThemeVars.border.radius} !important;
border-bottom-right-radius: ${otherThemeVars.border.radius} !important;
}
// 修复因为上面的排除导致的圆角问题
// 具体工单页面下依赖菜单选择框
#new-dependency-drop-list.ui.selection.dropdown.active,
// 提交图分支选择框
#git-graph-container #flow-select-refs-dropdown {
border-bottom-right-radius: 0 !important;
}
// 修复选择框的下拉菜单向上显示时的样式问题
.ui.upward.selection.dropdown.visible:not(.small),
.ui.active.upward.selection.dropdown:not(.small) {
border-top-left-radius: ${otherThemeVars.border.radius} !important;
border-top-right-radius: ${otherThemeVars.border.radius} !important;
}
// 工单标签菜单中的标签换行和颜色
// 标签页面的标签选择框
.page-content.repository.labels .ui.selection.dropdown.active,
// 创建仓库页面的标签选择框
.ui.search.selection.dropdown {
> .menu > .item {
flex-wrap: wrap;
> i {
color: ${themeVars.color.text.light.num1};
}
}
}
`;
export const fixSelectionDropdown = css`
// 具体工单页面下依赖菜单选择框
#new-dependency-drop-list.ui.selection.dropdown {
// 高度对齐问题, 应该与 input 框高度一致
min-height: 32px;
}
`;
// 分支菜单
export const branchDropdown = css`
.ui.dropdown.branch-selector-dropdown > .menu {
width: ${fallbackVar(customThemeVars.branchMenuWidth, "320px")};
max-width: 640px;
> .menu > .item {
animation: ${animationDown};
}
}
`;
// 包含表情的下拉菜单
export const emojiDropdown = css`
.ui.dropdown.action.select-reaction.active .menu:has(.emoji) {
display: flex !important;
flex-direction: row;
gap: 4px;
padding: 4px;
min-width: auto;
> .item.emoji {
font-size: 14px;
min-height: 32px;
height: 32px;
margin: 0px;
&:hover {
background-color: ${themeVars.github.bgColor.accent.emphasis} !important;
}
}
}
`;

16
styles/public/index.ts Normal file
View File

@@ -0,0 +1,16 @@
// organize-imports-ignore
// tslint:disable:ordered-imports
// 组件导入有顺序, 禁止插件优化
import "./radius"; // 圆角, 此样式为基础样式, 确保在其他样式之前导入
import "./animation"; // 动画效果
import "./transition"; // 过渡效果
import "./text"; // 文本或 SVG 的基本颜色
import "./button"; // 按钮
import "./dropdown"; // 下拉框
import "./input"; // 输入框
import "./label"; // 标签
import "./menu"; // 菜单
import "./modal"; // 弹窗
import "./tippy"; // 提示框
import "./attached"; // 附加样式
import "./other"; // 其他样式

42
styles/public/input.ts Normal file
View File

@@ -0,0 +1,42 @@
import { css, otherThemeVars, themeVars } from "src/types/vars";
export const input = css`
input,
textarea,
.ui.input input,
// 排除可以选择的输入搜索框
.ui.form input:not([type]):not(.search),
.ui.form select,
.ui.form textarea,
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="email"],
.ui.form input[type="file"],
.ui.form input[type="number"],
.ui.form input[type="password"],
.ui.form input[type="search"],
.ui.form input[type="tel"],
.ui.form input[type="text"],
.ui.form input[type="time"],
.ui.form input[type="url"] {
padding: 8px 12px;
&:focus,
&:focus-visible {
background: ${themeVars.color.body} !important;
border-radius: ${otherThemeVars.border.radius};
border-color: ${themeVars.github.borderColor.accent.emphasis};
// 向内部添加一个 1px 的边框
box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis};
outline: none;
}
}
.ui.input {
height: 32px;
}
// 由于输入框高度, 需要输入框在表单中垂直居中
// 管理员页面仓库搜索表单
.ui.form#repo-search-form {
align-items: center;
}
`;

190
styles/public/label.ts Normal file
View File

@@ -0,0 +1,190 @@
import { css, themeVars } from "src/types/vars";
export const label = css`
/* 所有标签, 但不包括 a 标签 */
/* a 标签比如仓库点星等按钮旁边的数字标签按钮,提交图中的 tag 标签 */
div,
span {
&.ui.ui.ui {
&.label {
border-radius: 25px;
// 多个标签的组合标签的圆角修复
&.scope-parent {
.scope-left {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.scope-middle {
border-radius: 0;
}
.scope-right {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
/* 主色调标签 */
&.primary {
background-color: unset;
border: 1px solid ${themeVars.color.primary.self};
color: ${themeVars.color.primary.self};
}
/* 红色标签 */
&.red {
background-color: unset;
border: 1px solid ${themeVars.github.borderColor.done.emphasis};
color: ${themeVars.color.purple.self};
}
/* 橙色标签 */
&.orange {
background-color: unset;
border: 1px solid ${themeVars.github.borderColor.attention.emphasis};
color: ${themeVars.color.yellow.self};
}
/* 黄色标签 */
&.yellow {
background-color: unset;
border: 1px solid ${themeVars.github.borderColor.attention.emphasis};
color: ${themeVars.color.orange.self};
}
/* 黄绿色标签 */
&.olive {
background-color: unset;
border: 1px solid ${themeVars.color.olive.self};
color: ${themeVars.color.olive.self};
}
/* 绿色标签 */
&.green {
background-color: unset;
border: 1px solid ${themeVars.github.borderColor.success.emphasis};
color: ${themeVars.color.green.self};
}
/* 紫色标签 */
&.purple {
background-color: unset;
border: 1px solid ${themeVars.github.borderColor.done.emphasis};
color: ${themeVars.color.purple.self};
}
}
}
}
.ui.small.label {
font-size: 12px;
}
.ui.mini.label {
font-size: 10px;
}
`;
// 提交中的 SHA 标签
export const shaLabel = css`
a.ui.label.sha,
a.ui.label.commit-id-short {
border: unset;
background-color: unset;
color: ${themeVars.color.text.light.num1};
font-size: 12px;
font-weight: 500;
// 仪表盘页的提交 SHA 标签居中对齐
margin-top: 2px;
&:hover {
background-color: ${themeVars.color.label.hoverBg};
}
// 验证提交 SHA 标签
&.commit-is-signed {
border: unset !important;
background-color: unset !important;
&:hover {
background-color: ${themeVars.color.label.hoverBg} !important;
}
span.ui.label.commit-is-signed {
padding: 3px 5px;
margin-left: 5px;
}
}
}
// 验证提交附带的图标
span.ui.label.commit-is-signed {
// 验证信任
&.sign-trusted {
border: 1.5px solid ${themeVars.color.green.badge.self} !important;
color: ${themeVars.color.green.badge.self} !important;
&:hover {
background-color: ${themeVars.color.green.badge.hover.bg} !important;
}
}
// 验证未信任
&.sign-untrusted {
border: 1.5px solid ${themeVars.color.yellow.badge.self} !important;
color: ${themeVars.color.yellow.badge.self} !important;
&:hover {
background-color: ${themeVars.color.yellow.badge.hover.bg} !important;
}
}
// 验证未匹配
&.sign-unmatched {
border: 1.5px solid ${themeVars.color.orange.badge.self} !important;
color: ${themeVars.color.orange.badge.self} !important;
&:hover {
background-color: ${themeVars.color.orange.badge.hover.bg} !important;
}
}
// 验证警告
&.sign-warning {
border: 1.5px solid ${themeVars.color.red.badge.self} !important;
color: ${themeVars.color.red.badge.self} !important;
&:hover {
background-color: ${themeVars.color.red.badge.hover.bg} !important;
}
}
}
`;
// 任务状态标签, 目前仅在管理员页面 Runner 状态中看到
export const taskStatusLabel = css`
.runner-container .ui.label.task-status- {
&success {
color: ${themeVars.color.success.text};
border: 1px solid ${themeVars.color.success.border};
background: ${themeVars.color.success.bg};
}
&failure {
color: ${themeVars.color.error.text};
border: 1px solid ${themeVars.color.error.border};
background: ${themeVars.color.error.bg.self};
}
&running,
&skipped {
color: ${themeVars.color.info.text};
border: 1px solid ${themeVars.color.info.border};
background: ${themeVars.color.info.bg};
}
&cancelled,
&blocked {
color: ${themeVars.color.warning.text};
border: 1px solid ${themeVars.color.warning.border};
background: ${themeVars.color.warning.bg};
}
}
`;
// 仓库标签 (私有/公开/内部)
export const repoLabel = css`
span,
// 用户切换面板的标签
.org-visibility div {
&.ui.basic.label {
background-color: unset;
color: ${themeVars.color.text.light.num1};
font-size: 12px;
font-weight: 500;
padding: 3px 6px;
}
}
.org-visibility span.ui.basic.label {
font-size: 14px;
}
`;

298
styles/public/menu.ts Normal file
View File

@@ -0,0 +1,298 @@
import { css, otherThemeVars, themeVars } from "src/types/vars";
export const activeItemAfterStyle = {
backgroundColor: themeVars.github.borderColor.accent.emphasis,
borderRadius: otherThemeVars.border.radius,
height: "24px",
left: "calc(0.5rem * -1)",
position: "absolute",
top: "calc(50% - 12px)",
width: "4px",
};
export const verticalMenu = css`
// 垂直菜单, 用于左侧边栏
// 设置页面中的菜单, Actions 工作流菜单, WorkflowRuns Job 菜单
.ui.vertical.menu {
// 去除边框, 和背景色同色
background: ${themeVars.color.body};
border: 0;
// 设置页面的菜单头部
.header.item {
color: ${themeVars.color.text.light.num1} !important;
font-size: 1.5rem;
font-weight: 700;
background: unset;
margin-bottom: 0.5rem;
}
// 菜单项被悬停时的背景色, 限制a标签, 避免为子菜单多余渲染
a.item:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
}
// 菜单项
.item,
.item > summary {
font-size: 1.1rem;
background: unset;
border-radius: ${otherThemeVars.border.radius};
padding: 6px 8px;
}
// Actions 菜单的圆角覆盖
> .item,
> .active.item {
&:first-child,
&:last-child {
border-radius: ${otherThemeVars.border.radius};
}
}
// 去除菜单项的边框线
.item:before {
background: unset;
}
// 激活的菜单项
.active.item,
.active.item > summary {
font-weight: 600;
border-radius: ${otherThemeVars.border.radius};
}
// 添加伪元素, 用于指示当前激活的菜单项
.active.item:after {
content: "";
${activeItemAfterStyle};
}
// 部分菜单项的子菜单
details.item {
// 子菜单的标题
summary:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
}
// 子菜单的选项
.menu .item {
color: ${themeVars.color.text.self};
}
// 子菜单的选项被激活
&:has(.active.item) {
> summary {
font-weight: 600;
background: ${themeVars.color.active};
// 收回状态,悬停色
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
}
}
&:after {
content: "";
${activeItemAfterStyle};
}
// 子菜单的选项
.active.item {
background: ${themeVars.color.active};
font-weight: 400;
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
}
}
// 子菜单展开时
&[open] {
> summary {
background: unset;
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
}
}
&:after {
display: none;
}
}
}
}
}
`;
export const menu = css`
.menu .item svg {
color: ${themeVars.color.text.light.num1};
}
// 菜单默认悬浮色更改
.ui.menu a.item,
.ui.secondary.pointing.menu a.item,
.ui.secondary.menu .dropdown.item {
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
}
}
// 一些水平小型菜单的颜色更改
.small-menu-items .item {
background-color: ${themeVars.color.body} !important;
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover} !important;
}
}
// 一些菜单的悬浮色更改
.ui.segment .ui.tabular.menu,
.header-wrapper .ui.tabular.menu,
.ui.secondary.pointing.menu {
.item,
.active.item {
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
}
}
}
`;
export const secondaryMenu = css`
// 二级菜单, 比如 Issue/PR/Actions 的筛选菜单
.ui.secondary.menu {
.item {
padding: 0px 12px;
height: 32px;
font-weight: 500;
}
a.item:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
}
}
// 二级导航栏, 比如仓库的导航栏, 仓库列表的导航栏, 探索的类型导航栏
.ui.secondary.pointing.menu {
.overflow-menu-items {
gap: 4px;
.item {
padding: 5px 8px !important;
margin-block-start: 0.5rem;
margin-block-end: 0.5rem;
margin-bottom: 0.5rem !important;
}
}
.item {
font-weight: 400; // 二级导航栏不需要加粗
}
.active.item,
.dropdown.item,
.link.item,
a.item {
border-radius: ${otherThemeVars.border.radius};
color: ${themeVars.color.text.self};
svg {
margin-right: 8px;
}
}
.active.item {
// 取消激活时的下划线, 需要为透明, 保持间距
border-color: #ffffff00;
// 模仿 github 的下划线
span:after {
content: "";
background: ${themeVars.github.underlineNav.borderColor.active};
border-radius: ${otherThemeVars.border.radius};
bottom: calc(50% - 1.8rem);
height: 2px;
position: absolute;
right: 50%;
transform: translate(50%, -50%);
width: 100%;
z-index: 1;
}
}
}
// 修复仓库页面下的二级导航栏的下划线因浏览器 BUG 导致显示的异常问题(导致下划线和分割线重叠变粗)
.page-content.repository .ui.secondary.pointing.menu {
border-bottom: none !important;
}
`;
// 分页菜单
export const paginationMenu = css`
.ui.borderless.pagination.menu {
align-items: center;
background-color: unset;
border: 0;
gap: 4px;
min-height: fit-content;
.item {
border-radius: ${otherThemeVars.border.radius};
min-width: 32px;
min-height: 32px;
height: 32px;
justify-content: center;
// 避免一些 hover 效果调整内容
padding: 5px 10px !important;
&.active {
background: ${themeVars.github.bgColor.accent.emphasis};
color: ${themeVars.color.white};
}
// 设置透明边框线避免 hover 时元素大小变化
&:not(.active) {
border: 1px solid #ffffff00;
&:hover {
background: unset;
border-color: ${themeVars.color.secondary.self};
}
}
&.navigation {
&:not(.disabled) {
span,
svg {
color: ${themeVars.color.primary.self};
}
}
// 对齐文字
svg {
margin-top: 2px;
}
}
}
}
`;
// 单行双选项菜单
export const smallCompactMenu = css`
// 订阅/关注切换菜单(应只选中订阅/关注页面, 不能选中通知页面)
.page-content.user.notification > .ui.container:has(.flex-list),
// 里程碑/标签切换菜单(里程碑页)
.page-content.repository.milestones .list-header,
// 里程碑/标签切换菜单(新建里程碑页)
.page-content.repository.new.milestone .issue-navbar,
// 里程碑/标签切换菜单(标签页)
.page-content.repository.labels .issue-navbar {
.ui.compact.small.menu.small-menu-items {
background: ${themeVars.color.hover.self} !important;
border: 0;
font-size: 14px;
gap: 8px;
height: 32px;
min-height: 32px !important;
> .item {
background: unset !important;
border: 1px solid ${themeVars.color.hover.self};
border-radius: ${otherThemeVars.border.radius};
padding: 6px 12px !important;
&.active {
background: ${themeVars.color.menu} !important;
border-color: ${themeVars.color.light.border};
font-weight: 600;
}
&::before {
display: none;
}
&:not(.active) {
top: 4px;
padding: 4px 12px !important;
height: calc(100% - 8px);
position: relative;
// 该方案只适用于 2 个 item 的情况
// left / right 数值为 gap 数值的一半
&:first-child {
left: 4px;
}
&:last-child {
right: 4px;
}
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover} !important;
}
}
}
}
}
`;

29
styles/public/modal.ts Normal file
View File

@@ -0,0 +1,29 @@
import { animationDown } from "src/core/theme";
import { css, themeVars } from "src/types/vars";
export const modal = css`
.ui.modal {
animation: ${animationDown};
border: 1.5px solid ${themeVars.color.light.border};
> .header {
background-color: ${themeVars.color.menu};
border-bottom: 1.5px solid ${themeVars.color.light.border};
}
> .content,
form > .content {
background-color: ${themeVars.color.menu};
}
> .actions,
.content + .actions,
.content + form > .actions {
background-color: ${themeVars.color.menu};
border-top: 1.5px solid ${themeVars.color.light.border};
}
.actions > .ui.button {
padding: 8px 12px;
}
}
`;

16
styles/public/other.ts Normal file
View File

@@ -0,0 +1,16 @@
import { css, themeVars } from "src/types/vars";
// 一些列表头, 比如工单的搜索标签里程碑栏
export const listHeader = css`
.list-header {
align-items: center;
align-content: center;
}
`;
// 已标星的图标
export const star = css`
.octicon-star-fill {
color: ${themeVars.github.button.star.iconColor} !important;
}
`;

294
styles/public/radius.ts Normal file
View File

@@ -0,0 +1,294 @@
import { css, otherThemeVars } from "src/types/vars";
// 全部圆角替换
export const radius = css`
.ui.form textarea,
.ui.form input:not([type]),
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="email"],
.ui.form input[type="number"],
.ui.form input[type="password"],
.ui.form input[type="search"],
.ui.form input[type="tel"],
.ui.form input[type="time"],
.ui.form input[type="text"],
.ui.form input[type="file"],
.ui.form input[type="url"] {
border-radius: ${otherThemeVars.border.radius};
&:focus {
border-radius: ${otherThemeVars.border.radius};
}
}
.ui.form select {
border-radius: ${otherThemeVars.border.radius};
}
.ui.input {
textarea,
input {
border-radius: ${otherThemeVars.border.radius};
}
}
.ui {
&.menu,
&.modal,
&.label,
&.table,
&.segment,
&.segments,
&.grid.segment,
&.selection.dropdown,
&.horizontal.segments,
&.active.empty.selection.dropdown {
border-radius: ${otherThemeVars.border.radius};
}
}
.ui.dropdown,
.ui.inline.dropdown,
.ui.pointing.upward.dropdown,
.ui.top.pointing.upward.dropdown {
.menu {
border-radius: ${otherThemeVars.border.radius};
}
}
.ui.search > .results,
.ui.search.selection .prompt,
.ui.pointing.dropdown > .menu,
.ui.loading.form.segments:before,
.ui.secondary.menu .dropdown.item > .menu,
.ui.segments:not(.horizontal) > .segment:has(~ .tw-hidden) {
border-radius: ${otherThemeVars.border.radius};
}
`;
// 全部圆角替换(原CSS带!important)
export const radiusImportant = css`
.ui.dropdown .menu .menu,
.ui.dropdown .menu .left.menu,
.ui.dropdown .menu .right.menu,
.ui.dropdown > .left.menu .menu,
.ui.floating.dropdown .menu,
.ui.floating.dropdown > .menu,
.ui.dropdown .right.menu > .menu,
.ui.secondary.vertical.menu > .item {
border-radius: ${otherThemeVars.border.radius} !important;
}
// 目前为仓库列表/探索的二级菜单, 改版需要替换为全圆角
.ui.secondary.tabular.menu .item {
border-radius: ${otherThemeVars.border.radius} !important;
&.active,
&.active:hover,
&:hover {
border-radius: ${otherThemeVars.border.radius} !important;
}
}
`;
// 上半部分圆角替换
export const radiusTop = css`
.ui.vertical.menu > .item,
.ui.vertical.menu > .active.item,
.ui.segments:not(.horizontal) > .segment {
&:first-child {
border-radius: ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0 0;
}
}
.ui.top.attached.header,
.ui.upward.dropdown > .menu,
.ui.upward.dropdown.button:not(.pointing):not(.floating).active,
.ui[class*="top attached"].menu,
.ui[class*="top attached"].segment,
.ui[class*="top attached"].segment:last-child,
.ui.search > .results > :first-child,
.ui.modal > i.icon:first-child + *,
.ui.modal > .dimmer:first-child + i.icon + *,
.ui.modal > .dimmer:first-child + *:not(.icon),
.ui.modal > :first-child:not(.icon):not(.dimmer) {
border-radius: ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0 0;
}
`;
// 上半部分圆角替换(原CSS带!important)
export const radiusTopImportant = css`
.ui.tabular.menu .item,
.ui.simple.upward.dropdown {
&.active,
&.active:hover,
&:hover {
border-radius: ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0 0 !important;
}
}
`;
// 下半部分圆角替换
export const radiusBottom = css`
.ui.attached.segment,
.ui.vertical.menu > .item,
.ui.vertical.menu > .active.item,
.ui.segments:not(.horizontal) > .segment {
&:last-child {
border-radius: 0 0 ${otherThemeVars.border.radius} ${otherThemeVars.border.radius};
}
}
.ui.modal,
.ui.search > .results {
> :last-child {
border-radius: 0 0 ${otherThemeVars.border.radius} ${otherThemeVars.border.radius};
}
}
.ui.selection.dropdown,
.ui.menu .dropdown.item {
.menu {
border-radius: 0 0 ${otherThemeVars.border.radius} ${otherThemeVars.border.radius};
}
}
.ui.bottom.attached.header,
.ui[class*="bottom attached"].table,
.ui.segment[class*="bottom attached"],
.ui.attached.segment:has(+ .ui.modal),
.ui.attached.segment:has(+ .page.buttons),
.ui.attached.segment:has(+ .ui[class*="top attached"].header),
.ui.segment:has(+ .ui.segment:not(.attached)) {
border-radius: 0 0 ${otherThemeVars.border.radius} ${otherThemeVars.border.radius};
}
`;
// 下半部分圆角替换(原CSS带!important)
export const radiusBottomImportant = css`
.ui.upward.selection.dropdown.visible,
.ui.active.upward.selection.dropdown {
border-radius: 0 0 ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} !important;
}
`;
// 左半部分圆角替换
export const radiusLeft = css`
.ui.menu > .item,
.ui.action.input > .button,
.ui.action.input > .dropdown,
.ui.horizontal.segments > .segment {
&:first-child {
border-radius: ${otherThemeVars.border.radius} 0 0 ${otherThemeVars.border.radius};
}
}
.ui[class*="left icon"].input > i.icon,
.ui.action.input > .buttons:first-child > .button {
border-radius: ${otherThemeVars.border.radius} 0 0 ${otherThemeVars.border.radius};
}
`;
// 右半部分圆角替换
export const radiusRight = css`
.ui.compact.menu .item,
.ui.compact.menu:not(.secondary) .item,
.ui.pagination.menu .item,
.ui.action.input > .button,
.ui.action.input > .dropdown,
.ui.horizontal.segments > .segment {
&:last-child {
border-radius: 0 ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0;
}
}
.ui.icon.input > i.icon,
.ui.buttons .unescape-button,
.ui.action.input > .buttons:last-child > .button {
border-radius: 0 ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0;
}
`;
// 左上圆角替换
export const radiusTopLeft = css`
.ui.top.attached.menu > .item:first-child,
.ui.table > thead > tr:first-child > th:first-child {
border-top-left-radius: ${otherThemeVars.border.radius};
}
`;
// 右上圆角替换
export const radiusTopRight = css`
.ui.table > thead > tr:first-child > th:last-child,
.ui.category.search > .results .category:first-child .name + .result {
border-top-right-radius: ${otherThemeVars.border.radius};
}
`;
// 左下圆角替换
export const radiusBottomLeft = css`
.ui.table > tfoot > tr:first-child {
> th,
> td {
&:first-child {
border-bottom-left-radius: ${otherThemeVars.border.radius};
}
}
}
`;
// 右下圆角替换
export const radiusBottomRight = css`
.ui.table > tfoot > tr:first-child {
> th,
> td {
&:last-child {
border-bottom-right-radius: ${otherThemeVars.border.radius};
}
}
}
.ui.category.search > .results .category:last-child .result:last-child {
border-bottom-right-radius: ${otherThemeVars.border.radius};
}
`;
// only-child 顺序最后生效
export const onlyChild = css`
.ui.vertical.menu > .active.item:only-child,
.ui.segments:not(.horizontal) > .segment:only-child {
border-radius: ${otherThemeVars.border.radius};
}
.ui.table > thead > tr:first-child > th:only-child {
border-radius: ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0 0;
}
.ui.table > tfoot > tr:first-child {
> th,
> td {
&:only-child {
border-radius: 0 0 ${otherThemeVars.border.radius} ${otherThemeVars.border.radius};
}
}
}
`;
// 修复一些情况下圆角边框线被覆盖的问题
export const fixRadius = css`
// 评论列表标题
.repository.view.issue .comment-list .comment > .content > div:first-child {
border-top-left-radius: ${otherThemeVars.border.radius};
border-top-right-radius: ${otherThemeVars.border.radius};
}
// 评论列表内容
.repository.view.issue .comment-list .comment > .content > div:last-child {
border-bottom-left-radius: ${otherThemeVars.border.radius};
border-bottom-right-radius: ${otherThemeVars.border.radius};
}
`;
// 修复一些根本无法理解的生效顺序
export const fixWhyRadius = css`
// Issue 菜单第一个按钮
.ui.secondary.menu .item {
border-radius: ${otherThemeVars.border.radius};
}
`;

19
styles/public/text.ts Normal file
View File

@@ -0,0 +1,19 @@
import { css, themeVars } from "src/types/vars";
export const red = css`
.text.red .svg,
.text.red.svg {
// 关闭工单按钮设置为紫色
&.octicon-issue-closed {
color: ${themeVars.github.fgColor.done} !important;
}
}
`;
export const grey = css`
// 默认颜色是 --color-text-light, 主题下此颜色是亮白色, 修改为灰色
// release 页面下一些描述信息的文本颜色
.text.grey {
color: ${themeVars.color.text.light.num1} !important;
}
`;

50
styles/public/tippy.ts Normal file
View File

@@ -0,0 +1,50 @@
import { animationDown } from "src/core/theme";
import { css, otherThemeVars, themeVars } from "src/types/vars";
// 一些界面内的提示框, 比如克隆按钮, PR信息, Runner信息 等
export const tippyBox = css`
.tippy-box {
margin-top: -3px;
border-radius: ${otherThemeVars.border.radius};
overflow: hidden;
animation: ${animationDown};
// 克隆菜单和PR提示框为 default
&[data-theme="default"],
// 带标题的提示框 (Runner信息)
&[data-theme="box-with-header"] {
border: unset;
box-shadow: ${themeVars.github.shadow.floating.small};
}
&[data-theme="default"] {
border-radius: 12px;
}
&[data-theme="box-with-header"] {
.tippy-content {
background-color: ${themeVars.color.menu};
.ui.attached.header {
background-color: ${themeVars.color.body};
}
}
}
// 差异对比中文件路径行右侧的三个点菜单
&[data-theme="menu"] {
.tippy-content {
padding: 8px;
.item {
border-radius: ${otherThemeVars.border.radius};
&:hover {
background-color: ${themeVars.github.control.transparent.bgColor.hover};
}
}
}
}
// 专门用于提示信息的提示框, 比如提交的具体时间, 任务状态等
&[data-theme="tooltip"] {
.tippy-content {
font-size: 12px;
font-weight: 400;
padding: 4px 8px;
}
}
}
`;

61
styles/public/transition.ts Normal file
View File

@@ -0,0 +1,61 @@
import { css } from "src/types/vars";
// 简单的渐变过渡
export const transition = css`
// 差异对比的代码折叠按钮
.code-expander-button,
// 仓库 README 头部的按钮
.file-header-left,
.file-header-right,
// 仪表板仓库列表
.ui.attached.segment.table ul li,
// Issue 列表
.issue-list-toolbar .item,
.flex-list#issue-list > .flex-item,
// 分页菜单
.ui.borderless.pagination.menu .item,
// 迁移的元素
#navbar .item,
.header-wrapper .ui.tabular.menu .item,
.job-step-summary,
.job-step-logs,
.job-brief-item,
.repo-file-cell,
.tippy-box .flex-items-block .item,
.clone-panel-tab .item,
.ui.form select,
.ui.label,
.ui.modal,
.ui.checkbox label:before,
.ui.checkbox input:checked ~ label:before,
.ui.checkbox input:not([type="radio"]):indeterminate ~ label:before,
.ui.selection.dropdown,
.ui.selection.active.dropdown,
.ui.selection.active.dropdown:hover,
.ui.selection.active.dropdown .menu,
.ui.selection.active.dropdown:hover .menu,
.ui.vertical.menu .header.item,
.ui.secondary.menu .item {
transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
}
// Gitea 表单元素原始过渡覆盖
input,
textarea,
tr,
.ui.input textarea,
.ui.form textarea,
.ui.form input:not([type]),
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="email"],
.ui.form input[type="number"],
.ui.form input[type="password"],
.ui.form input[type="search"],
.ui.form input[type="tel"],
.ui.form input[type="time"],
.ui.form input[type="text"],
.ui.form input[type="file"],
.ui.form input[type="url"] {
transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
}
`;