You've already forked gitea-banana-theme
初始化提交
This commit is contained in:
User
267
styles/components/actions.ts
Normal file
267
styles/components/actions.ts
Normal file
@@ -0,0 +1,267 @@
|
||||
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;
|
||||
> .item {
|
||||
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(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace);
|
||||
font-weight: 400;
|
||||
&: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;
|
||||
|
||||
.flex-item-leading {
|
||||
align-self: flex-start;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.flex-item-main {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.flex-item-trailing {
|
||||
justify-content: space-between;
|
||||
|
||||
> .ui.label {
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
margin-left: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 避免手机下左侧工作流项空白过长
|
||||
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 {
|
||||
// 分支标签按钮
|
||||
.ui.label {
|
||||
background-color: ${themeVars.github.bgColor.accent.muted};
|
||||
color: ${themeVars.github.fgColor.accent};
|
||||
font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace);
|
||||
font-weight: 400;
|
||||
> a {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 工作流左侧作业列表
|
||||
export const actionViewLeft = css`
|
||||
.action-view-left {
|
||||
margin-right: 28px;
|
||||
border-top: 1px solid ${themeVars.color.console.border};
|
||||
|
||||
&: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-item {
|
||||
border-radius: ${otherThemeVars.border.radius} !important;
|
||||
padding: 8px;
|
||||
position: relative;
|
||||
margin-left: 0.5rem;
|
||||
|
||||
&.selected {
|
||||
&:hover {
|
||||
background-color: ${themeVars.color.console.hoverBg};
|
||||
}
|
||||
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 工作流右侧作业步骤日志详情
|
||||
export const actionViewRight = css`
|
||||
.action-view-right {
|
||||
/* 提前加载高度和滚动条 */
|
||||
min-height: calc(100vh - 245px);
|
||||
|
||||
.job-info-header {
|
||||
padding: 16px 12px 16px 24px;
|
||||
height: 80px;
|
||||
|
||||
.job-info-header-title {
|
||||
color: ${themeVars.github.fgColor.accent};
|
||||
}
|
||||
|
||||
.job-info-header-detail {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.job-step-container {
|
||||
// 步骤标题
|
||||
.job-step-summary {
|
||||
color: ${themeVars.color.console.fg.subtle};
|
||||
padding: 8px 10px;
|
||||
|
||||
&.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 步骤日志
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
286
styles/components/chroma.ts
Normal file
286
styles/components/chroma.ts
Normal file
@@ -0,0 +1,286 @@
|
||||
import { css, themeVars } from "src/types/vars";
|
||||
|
||||
// https://github.com/go-gitea/gitea/blob/main/web_src/css/chroma/base.css
|
||||
export const chromaBase = css`
|
||||
.chroma {
|
||||
// LineTableTD
|
||||
.lntd {
|
||||
vertical-align: top;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
// LineTable
|
||||
.lntable {
|
||||
border-spacing: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
width: auto;
|
||||
overflow: auto;
|
||||
display: block;
|
||||
}
|
||||
// LineHighlight
|
||||
.hl {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
// LineNumbersTable
|
||||
.lnt,
|
||||
// LineNumbers
|
||||
.ln {
|
||||
margin-right: 0.4em;
|
||||
padding: 0 0.4em;
|
||||
}
|
||||
// GenericStrong
|
||||
.gs {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
// GenericUnderline
|
||||
.gl {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// https://github.com/alecthomas/chroma/blob/6428fb4e65f3c1493491571c8a6a8f1add1da822/types.go#L208
|
||||
export const chromaCode = css`
|
||||
.chroma {
|
||||
// TextWhiteSpace
|
||||
.w {
|
||||
color: ${themeVars.chroma.textWhiteSpace};
|
||||
}
|
||||
// Error
|
||||
.err {
|
||||
color: ${themeVars.chroma.err};
|
||||
}
|
||||
// Keyword
|
||||
.k {
|
||||
color: ${themeVars.chroma.keyword.self};
|
||||
}
|
||||
.kc {
|
||||
color: ${themeVars.chroma.keyword.constant};
|
||||
}
|
||||
.kd {
|
||||
color: ${themeVars.chroma.keyword.declaration};
|
||||
}
|
||||
.kn {
|
||||
color: ${themeVars.chroma.keyword.namespace};
|
||||
}
|
||||
.kp {
|
||||
color: ${themeVars.chroma.keyword.pseudo};
|
||||
}
|
||||
.kr {
|
||||
color: ${themeVars.chroma.keyword.reserved};
|
||||
}
|
||||
.kt {
|
||||
color: ${themeVars.chroma.keyword.type};
|
||||
}
|
||||
// Name
|
||||
.n {
|
||||
color: ${themeVars.chroma.name.self};
|
||||
}
|
||||
.na {
|
||||
color: ${themeVars.chroma.name.attribute};
|
||||
}
|
||||
.nb {
|
||||
color: ${themeVars.chroma.name.builtin};
|
||||
}
|
||||
.bp {
|
||||
color: ${themeVars.chroma.name.builtinPseudo};
|
||||
}
|
||||
.nc {
|
||||
color: ${themeVars.chroma.name.class};
|
||||
}
|
||||
.no {
|
||||
color: ${themeVars.chroma.name.constant};
|
||||
}
|
||||
.nd {
|
||||
color: ${themeVars.chroma.name.decorator};
|
||||
}
|
||||
.ni {
|
||||
color: ${themeVars.chroma.name.entity};
|
||||
}
|
||||
.ne {
|
||||
color: ${themeVars.chroma.name.exception};
|
||||
}
|
||||
.nf {
|
||||
color: ${themeVars.chroma.name.function};
|
||||
}
|
||||
.fm {
|
||||
color: ${themeVars.chroma.name.functionMagic};
|
||||
}
|
||||
.py {
|
||||
color: ${themeVars.chroma.name.property};
|
||||
}
|
||||
.nl {
|
||||
color: ${themeVars.chroma.name.label};
|
||||
}
|
||||
.nn {
|
||||
color: ${themeVars.chroma.name.namespace};
|
||||
}
|
||||
.nx {
|
||||
color: ${themeVars.chroma.name.other};
|
||||
}
|
||||
.nt {
|
||||
color: ${themeVars.chroma.name.tag};
|
||||
}
|
||||
.nv {
|
||||
color: ${themeVars.chroma.name.variable};
|
||||
}
|
||||
.vc {
|
||||
color: ${themeVars.chroma.name.variableClass};
|
||||
}
|
||||
.vg {
|
||||
color: ${themeVars.chroma.name.variableGlobal};
|
||||
}
|
||||
.vi {
|
||||
color: ${themeVars.chroma.name.variableInstance};
|
||||
}
|
||||
.vm {
|
||||
color: ${themeVars.chroma.name.variableMagic};
|
||||
}
|
||||
// Literal
|
||||
.l {
|
||||
color: ${themeVars.chroma.literal.self};
|
||||
}
|
||||
.ld {
|
||||
color: ${themeVars.chroma.literal.date};
|
||||
}
|
||||
// String
|
||||
.s {
|
||||
color: ${themeVars.chroma.string.self};
|
||||
}
|
||||
.sa {
|
||||
color: ${themeVars.chroma.string.affix};
|
||||
}
|
||||
.sb {
|
||||
color: ${themeVars.chroma.string.backtick};
|
||||
}
|
||||
.sc {
|
||||
color: ${themeVars.chroma.string.char};
|
||||
}
|
||||
.dl {
|
||||
color: ${themeVars.chroma.string.delimiter};
|
||||
}
|
||||
.sd {
|
||||
color: ${themeVars.chroma.string.doc};
|
||||
}
|
||||
.s2 {
|
||||
color: ${themeVars.chroma.string.double};
|
||||
}
|
||||
.se {
|
||||
color: ${themeVars.chroma.string.escape};
|
||||
}
|
||||
.sh {
|
||||
color: ${themeVars.chroma.string.heredoc};
|
||||
}
|
||||
.si {
|
||||
color: ${themeVars.chroma.string.interpol};
|
||||
}
|
||||
.sx {
|
||||
color: ${themeVars.chroma.string.other};
|
||||
}
|
||||
.sr {
|
||||
color: ${themeVars.chroma.string.regex};
|
||||
}
|
||||
.s1 {
|
||||
color: ${themeVars.chroma.string.single};
|
||||
}
|
||||
.ss {
|
||||
color: ${themeVars.chroma.string.symbol};
|
||||
}
|
||||
// Number
|
||||
.m {
|
||||
color: ${themeVars.chroma.number.self};
|
||||
}
|
||||
.mb {
|
||||
color: ${themeVars.chroma.number.bin};
|
||||
}
|
||||
.mf {
|
||||
color: ${themeVars.chroma.number.float};
|
||||
}
|
||||
.mh {
|
||||
color: ${themeVars.chroma.number.hex};
|
||||
}
|
||||
.mi {
|
||||
color: ${themeVars.chroma.number.integer};
|
||||
}
|
||||
.il {
|
||||
color: ${themeVars.chroma.number.integerLong};
|
||||
}
|
||||
.mo {
|
||||
color: ${themeVars.chroma.number.oct};
|
||||
}
|
||||
// Operator
|
||||
.o {
|
||||
color: ${themeVars.chroma.operator.self};
|
||||
}
|
||||
.ow {
|
||||
color: ${themeVars.chroma.operator.word};
|
||||
}
|
||||
// Punctuation
|
||||
.p {
|
||||
color: ${themeVars.chroma.punctuation};
|
||||
}
|
||||
// Comment
|
||||
.c {
|
||||
color: ${themeVars.chroma.comment.self};
|
||||
}
|
||||
.ch {
|
||||
color: ${themeVars.chroma.comment.hashbang};
|
||||
}
|
||||
.cm {
|
||||
color: ${themeVars.chroma.comment.multiline};
|
||||
}
|
||||
.cp {
|
||||
color: ${themeVars.chroma.comment.preproc};
|
||||
}
|
||||
.cpf {
|
||||
color: ${themeVars.chroma.comment.preprocFile};
|
||||
}
|
||||
.c1 {
|
||||
color: ${themeVars.chroma.comment.single};
|
||||
}
|
||||
.cs {
|
||||
color: ${themeVars.chroma.comment.special};
|
||||
}
|
||||
// Generic
|
||||
.g {
|
||||
color: ${themeVars.chroma.generic.self};
|
||||
}
|
||||
.gd {
|
||||
color: ${themeVars.chroma.generic.deleted};
|
||||
}
|
||||
.ge {
|
||||
color: ${themeVars.chroma.generic.emph};
|
||||
}
|
||||
.gr {
|
||||
color: ${themeVars.chroma.generic.error};
|
||||
}
|
||||
.gh {
|
||||
color: ${themeVars.chroma.generic.heading};
|
||||
}
|
||||
.gi {
|
||||
color: ${themeVars.chroma.generic.inserted};
|
||||
}
|
||||
.go {
|
||||
color: ${themeVars.chroma.generic.output};
|
||||
}
|
||||
.gp {
|
||||
color: ${themeVars.chroma.generic.prompt};
|
||||
}
|
||||
.gs {
|
||||
color: ${themeVars.chroma.generic.strong};
|
||||
}
|
||||
.gu {
|
||||
color: ${themeVars.chroma.generic.subheading};
|
||||
}
|
||||
.gt {
|
||||
color: ${themeVars.chroma.generic.traceback};
|
||||
}
|
||||
.gu {
|
||||
color: ${themeVars.chroma.generic.underline};
|
||||
}
|
||||
}
|
||||
`;
|
||||
110
styles/components/clone.ts
Normal file
110
styles/components/clone.ts
Normal file
@@ -0,0 +1,110 @@
|
||||
import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars";
|
||||
|
||||
// 克隆按钮的弹窗
|
||||
export const clone = css`
|
||||
.tippy-box {
|
||||
.clone-panel-popup {
|
||||
//标题和克隆地址
|
||||
> .clone-panel-field {
|
||||
margin-left: 16px;
|
||||
margin-right: 16px;
|
||||
//标题
|
||||
&:first-of-type {
|
||||
font-weight: 600;
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
// 按钮组
|
||||
.clone-panel-tab {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-left: 16px;
|
||||
// 按钮
|
||||
.item {
|
||||
color: ${themeVars.color.text.self};
|
||||
font-weight: 600;
|
||||
padding: 6px 8px;
|
||||
margin: 8px 0;
|
||||
&:hover {
|
||||
background: ${themeVars.github.control.transparent.bgColor.hover};
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
}
|
||||
&.active:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: ${themeVars.github.underlineNav.borderColor.active};
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
}
|
||||
}
|
||||
.item.active {
|
||||
border-bottom: 0;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
// 克隆地址
|
||||
.ui.input.action {
|
||||
> input {
|
||||
border: 1px solid ${themeVars.color.light.border};
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace);
|
||||
min-width: 150px;
|
||||
max-width: 400px;
|
||||
width: ${customThemeVars.cloneMenuWidth};
|
||||
&:hover {
|
||||
border: 1px solid ${themeVars.color.light.border};
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
}
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
border-color: ${themeVars.github.borderColor.accent.emphasis};
|
||||
}
|
||||
}
|
||||
.ui.ui.ui.button {
|
||||
background-color: unset;
|
||||
border: unset;
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
padding: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-left: 5px;
|
||||
&:hover {
|
||||
background-color: ${themeVars.github.control.transparent.bgColor.hover};
|
||||
}
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 面板操作列表之间的分割线
|
||||
.divider {
|
||||
margin: 0;
|
||||
}
|
||||
// 面板操作列表
|
||||
.clone-panel-list {
|
||||
margin: 8px;
|
||||
.item {
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
padding: 6px 8px;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
svg {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
}
|
||||
> .item:hover {
|
||||
color: ${themeVars.color.text.self};
|
||||
text-decoration: none;
|
||||
background: ${themeVars.github.control.transparent.bgColor.hover};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
77
styles/components/commit.ts
Normal file
77
styles/components/commit.ts
Normal file
@@ -0,0 +1,77 @@
|
||||
import { css, otherThemeVars, themeVars } from "src/types/vars";
|
||||
|
||||
// 提交列表
|
||||
export const commit = css`
|
||||
.page-content.repository {
|
||||
// 提交列表 (选择器保证同等优先级覆盖了 gitea 原生的样式)
|
||||
#commits-table.ui.basic.striped.table tbody.commit-list {
|
||||
// 作者
|
||||
.author {
|
||||
// 作者名称
|
||||
.author-wrapper {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
}
|
||||
// SHA 标签
|
||||
.sha {
|
||||
a.ui.label.commit-id-short {
|
||||
padding: 2px 8px;
|
||||
height: 28px;
|
||||
margin-top: 0.375rem;
|
||||
margin-bottom: 0.375rem;
|
||||
margin-left: -8px;
|
||||
}
|
||||
}
|
||||
// 提交信息
|
||||
.message {
|
||||
// tag 标签
|
||||
a.ui.basic.primary.label {
|
||||
border-radius: 25px;
|
||||
border-width: 1.5px;
|
||||
padding: 5px 8px !important;
|
||||
}
|
||||
}
|
||||
// 提交信息右侧
|
||||
.tw-text-right {
|
||||
// 时间标签
|
||||
relative-time,
|
||||
// 复制 SHA 按钮
|
||||
.btn.copy-commit-id,
|
||||
// 查看提交路径按钮
|
||||
.btn.view-commit-path {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
}
|
||||
tr {
|
||||
// 整行悬停色
|
||||
&:hover {
|
||||
background-color: ${themeVars.color.hover.opaque};
|
||||
}
|
||||
// 偶数行悬停色
|
||||
&:nth-child(2n):hover {
|
||||
background-color: ${themeVars.color.hover.opaque} !important;
|
||||
}
|
||||
// 尾行圆角
|
||||
&:last-child {
|
||||
td:first-child {
|
||||
border-bottom-left-radius: ${otherThemeVars.border.radius};
|
||||
}
|
||||
td:last-child {
|
||||
border-bottom-right-radius: ${otherThemeVars.border.radius};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const commitStatus = css`
|
||||
.flex-text-inline[data-global-init="initCommitStatuses"] {
|
||||
padding: 6px;
|
||||
margin-top: 2px;
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
&:hover {
|
||||
background-color: ${themeVars.github.control.transparent.bgColor.hover};
|
||||
}
|
||||
}
|
||||
`;
|
||||
144
styles/components/dashboard.ts
Normal file
144
styles/components/dashboard.ts
Normal file
@@ -0,0 +1,144 @@
|
||||
import { css, otherThemeVars, themeVars } from "src/types/vars";
|
||||
|
||||
export const dashboard = css`
|
||||
// 首页仪表板, 避免选中管理员后台的维护管理面板
|
||||
.page-content.dashboard.feeds {
|
||||
// 仓库列表的仓库/组织切换按钮
|
||||
.ui.two.item.menu {
|
||||
background: ${themeVars.color.hover.self};
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 8px;
|
||||
> .item {
|
||||
background: unset;
|
||||
border-radius: 12px;
|
||||
padding: 6px 12px !important;
|
||||
&.active {
|
||||
background: ${themeVars.color.menu};
|
||||
box-shadow: ${themeVars.github.shadow.floating.small};
|
||||
font-weight: 600;
|
||||
}
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
&:not(.active) {
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
margin: 6px !important;
|
||||
width: calc(50% - 12px);
|
||||
&:hover {
|
||||
background: ${themeVars.github.control.transparent.bgColor.hover};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 仓库/组织列表标题
|
||||
.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: ${themeVars.color.menu};
|
||||
border: unset !important;
|
||||
box-shadow: ${themeVars.github.shadow.floating.small};
|
||||
&.repos-search {
|
||||
border-top-left-radius: 12px;
|
||||
border-top-right-radius: 12px;
|
||||
}
|
||||
&.table {
|
||||
&:last-child {
|
||||
border-bottom-left-radius: 12px !important;
|
||||
border-bottom-right-radius: 12px !important;
|
||||
}
|
||||
ul {
|
||||
padding: 8px;
|
||||
li {
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
padding: 6px 8px !important;
|
||||
&:not(:last-child) {
|
||||
border-bottom: 0;
|
||||
}
|
||||
&:hover {
|
||||
background: ${themeVars.github.control.transparent.bgColor.hover};
|
||||
}
|
||||
a.muted:hover {
|
||||
color: inherit;
|
||||
text-decoration-line: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 组织列表
|
||||
.ui.tab.dashboard-orgs .ui.attached.segment.table {
|
||||
border-top-left-radius: 12px;
|
||||
border-top-right-radius: 12px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 导航栏的工单/PR/里程碑仪表板
|
||||
export const dashboardIssues = css`
|
||||
.page-content.dashboard.issues {
|
||||
.list-header {
|
||||
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: 54px;
|
||||
padding: 16px 8px;
|
||||
.list-header-toggle {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-header-filters {
|
||||
> .item {
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
padding: 0px 12px;
|
||||
height: 32px;
|
||||
&:hover {
|
||||
background: ${themeVars.github.control.transparent.bgColor.hover};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 避免手机/平板下菜单错位
|
||||
export const issueListMobile = css`
|
||||
@media (max-width: 767.98px) {
|
||||
.page-content.dashboard.issues .list-header {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 修复仪表板下二级面板选择菜单组织的标签间隔
|
||||
export const fixOrgLabel = css`
|
||||
.dashboard .secondary-nav .org-visibility .label {
|
||||
margin-right: 0;
|
||||
}
|
||||
`;
|
||||
72
styles/components/diff.ts
Normal file
72
styles/components/diff.ts
Normal file
@@ -0,0 +1,72 @@
|
||||
import { css, themeVars } from "src/types/vars";
|
||||
|
||||
export const diff = css`
|
||||
/* 折叠行多余的颜色 */
|
||||
.tag-code {
|
||||
background-color: unset;
|
||||
/* 折叠行文本 */
|
||||
.code-inner {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
}
|
||||
/* 增加/删除行多余的颜色 */
|
||||
.code-diff-unified {
|
||||
.del-code,
|
||||
.add-code {
|
||||
background: unset;
|
||||
border-color: unset;
|
||||
}
|
||||
}
|
||||
/* 增加/删除相关代码背景色圆角 */
|
||||
.added-code,
|
||||
.removed-code {
|
||||
border-radius: 0.1875rem;
|
||||
color: ${themeVars.color.text.self};
|
||||
/* 覆盖掉 chroma 的颜色 */
|
||||
* {
|
||||
color: ${themeVars.color.text.self} !important;
|
||||
}
|
||||
}
|
||||
/* 展开/收缩按钮 */
|
||||
.code-expander-button {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
height: 28px !important;
|
||||
&:hover {
|
||||
background: ${themeVars.github.bgColor.accent.emphasis};
|
||||
color: ${themeVars.color.white};
|
||||
}
|
||||
}
|
||||
/* 行号居中 */
|
||||
.lines-num {
|
||||
text-align: center !important;
|
||||
}
|
||||
// 差异对比文件盒子
|
||||
.diff-file-box {
|
||||
// 差异对比文件头
|
||||
.diff-file-header {
|
||||
// 文件名
|
||||
.diff-file-name {
|
||||
font-weight: 400;
|
||||
.fold-file.btn svg {
|
||||
min-width: 16px;
|
||||
min-height: 16px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
.diff-stats-bar {
|
||||
height: 8px;
|
||||
}
|
||||
> div,
|
||||
.file-link {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
// 操作按钮
|
||||
.diff-file-header-actions {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
14
styles/components/editor.ts
Normal file
14
styles/components/editor.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import { css, themeVars } from "src/types/vars";
|
||||
|
||||
export const monaco = css`
|
||||
.monaco-editor {
|
||||
--vscode-editor-background: ${themeVars.color.body} !important;
|
||||
--vscode-editorGutter-background: ${themeVars.color.body} !important;
|
||||
// 滚动时固定在顶部的行
|
||||
.sticky-widget {
|
||||
background: ${themeVars.color.body} !important;
|
||||
box-shadow: 0 1px 0 ${themeVars.color.secondary.self} !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
`;
|
||||
159
styles/components/explore.ts
Normal file
159
styles/components/explore.ts
Normal file
@@ -0,0 +1,159 @@
|
||||
import { fallbackVar } from "src/functions";
|
||||
import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars";
|
||||
|
||||
const userRepoVar = fallbackVar(customThemeVars.userRepolistColumns, "2");
|
||||
const exploreRepoVar = fallbackVar(customThemeVars.explore.repolistColumns, "2");
|
||||
const orgRepoVar = fallbackVar(customThemeVars.org.repolistColumns, "1");
|
||||
|
||||
// 仓库列表
|
||||
export const repoList = css`
|
||||
// 组织
|
||||
.page-content.organization.profile > .ui.container > .ui.stackable > .ui.eleven,
|
||||
// 用户
|
||||
.page-content.user.profile > .ui.container > .ui.stackable > .ui.twelve,
|
||||
// 探索
|
||||
.page-content.explore.repositories > .ui.container {
|
||||
// 排除用户的公开活动页
|
||||
> .flex-list:not(#activity-feed) {
|
||||
display: grid;
|
||||
> .flex-item {
|
||||
border: 1px solid ${themeVars.color.light.border};
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
padding: 16px;
|
||||
// 仓库头像
|
||||
> .flex-item-leading {
|
||||
img,
|
||||
svg {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
}
|
||||
// 仓库信息
|
||||
> .flex-item-main {
|
||||
// 仓库标题
|
||||
> .flex-item-header {
|
||||
// 仓库名称
|
||||
> .flex-item-title {
|
||||
gap: 8px;
|
||||
// 仓库中间的间隔线
|
||||
&:not(a) {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
}
|
||||
// 仓库语言, 星标
|
||||
> .flex-item-trailing {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
gap: 16px;
|
||||
font-size: 12px;
|
||||
> .flex-text-inline .color-icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 描述和更新时间
|
||||
> .flex-item-body {
|
||||
margin-top: 8px;
|
||||
// 更新时间
|
||||
&:last-child {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
// 主题标签
|
||||
> .label-list {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 仓库列表列数
|
||||
// 组织
|
||||
.page-content.organization.profile > .ui.container > .ui.stackable > .ui.eleven > .flex-list {
|
||||
grid-template-columns: repeat(${orgRepoVar}, 1fr);
|
||||
gap: min(${orgRepoVar} * 8px, 16px);
|
||||
}
|
||||
// 用户
|
||||
// 排除用户的公开活动页
|
||||
.page-content.user.profile > .ui.container > .ui.stackable > .ui.twelve > .flex-list:not(#activity-feed) {
|
||||
grid-template-columns: repeat(${userRepoVar}, 1fr);
|
||||
gap: min(${userRepoVar} * 8px, 16px);
|
||||
}
|
||||
// 探索
|
||||
.page-content.explore.repositories > .ui.container > .flex-list {
|
||||
grid-template-columns: repeat(${exploreRepoVar}, 1fr);
|
||||
gap: min(${exploreRepoVar} * 8px, 16px);
|
||||
}
|
||||
`;
|
||||
|
||||
const exploreUserVar = fallbackVar(customThemeVars.explore.userlistColumns, "3");
|
||||
const orgUserVar = fallbackVar(customThemeVars.org.userlistColumns, "2");
|
||||
|
||||
// 用户列表
|
||||
export const userList = css`
|
||||
// 组织
|
||||
.page-content.organization.members > .ui.container,
|
||||
// 探索的用户和组织
|
||||
.page-content.explore.users > .ui.container {
|
||||
> .flex-list {
|
||||
display: grid;
|
||||
> .flex-item {
|
||||
border: 1px solid ${themeVars.color.light.border};
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
padding: 16px;
|
||||
> .flex-item-main {
|
||||
// 用户名称
|
||||
> .flex-item-title {
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
// 用户标签
|
||||
> .label {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
// 用户描述
|
||||
> .flex-item-body {
|
||||
font-size: 12px;
|
||||
svg {
|
||||
width: 12px;
|
||||
min-width: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 用户列表列数
|
||||
// 组织
|
||||
.page-content.organization.members > .ui.container > .flex-list {
|
||||
grid-template-columns: repeat(${orgUserVar}, 1fr);
|
||||
gap: min(${orgUserVar} * 8px, 16px);
|
||||
}
|
||||
// 探索的用户和组织
|
||||
.page-content.explore.users > .ui.container > .flex-list {
|
||||
grid-template-columns: repeat(${exploreUserVar}, 1fr);
|
||||
gap: min(${exploreUserVar} * 8px, 16px);
|
||||
}
|
||||
`;
|
||||
|
||||
// 手机下的仓库和用户列表
|
||||
export const mobileList = css`
|
||||
@media (max-width: 767.98px) {
|
||||
// 组织的仓库列表
|
||||
.page-content.organization.profile > .ui.container > .ui.stackable > .ui.eleven,
|
||||
// 用户的仓库列表
|
||||
.page-content.user.profile > .ui.container > .ui.stackable > .ui.twelve,
|
||||
// 探索的仓库列表
|
||||
.page-content.explore.repositories > .ui.container,
|
||||
// 组织的成员列表
|
||||
.page-content.organization.members >.ui.container,
|
||||
// 探索的用户和组织列表
|
||||
.page-content.explore.users >.ui.container {
|
||||
// 排除用户的公开活动页
|
||||
> .flex-list:not(#activity-feed) {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
467
styles/components/filelist.ts
Normal file
467
styles/components/filelist.ts
Normal file
@@ -0,0 +1,467 @@
|
||||
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.tw-align-middle {
|
||||
margin-top: -1px;
|
||||
margin-left: 1px;
|
||||
}
|
||||
// 作者
|
||||
.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;
|
||||
svg {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
.file-header-left {
|
||||
padding: 8px !important;
|
||||
// 伪元素宽度等于按钮宽度而不是父元素宽度
|
||||
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: -7px;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
a.muted:hover {
|
||||
color: inherit;
|
||||
text-decoration-line: none;
|
||||
}
|
||||
}
|
||||
.file-header-right:hover {
|
||||
background: ${themeVars.github.control.transparent.bgColor.hover};
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 手机下隐藏提交信息
|
||||
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: calc(100vh - 64px); // 减去头部高度
|
||||
// 固定头部
|
||||
position: sticky;
|
||||
top: 0;
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 1px;
|
||||
height: calc(100% + 64px); // 头部高度
|
||||
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 {
|
||||
// 按钮组
|
||||
> .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};
|
||||
height: 28px;
|
||||
padding: 0 8px;
|
||||
svg {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
&:first-of-type {
|
||||
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};
|
||||
}
|
||||
&: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};
|
||||
}
|
||||
}
|
||||
// 右侧提交时间
|
||||
> .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: 12px;
|
||||
}
|
||||
// 仓库描述内容
|
||||
.flex-item-body {
|
||||
> .tw-flex:first-child {
|
||||
margin-top: 21px !important;
|
||||
}
|
||||
.repo-description {
|
||||
color: ${themeVars.color.text.self};
|
||||
}
|
||||
#repo-topics {
|
||||
margin: 10px 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-icon {
|
||||
svg.svg.octicon-tag {
|
||||
color: ${themeVars.color.green.self};
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
43
styles/components/footer.ts
Normal file
43
styles/components/footer.ts
Normal file
@@ -0,0 +1,43 @@
|
||||
import { css, themeVars } from "src/types/vars";
|
||||
|
||||
export const footer = css`
|
||||
.page-footer {
|
||||
background-color: ${themeVars.color.body};
|
||||
border-top: 0;
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
font-size: 12px;
|
||||
gap: 32px;
|
||||
justify-content: center;
|
||||
padding: 16px 0 40px 0;
|
||||
> .left-links {
|
||||
gap: 4px;
|
||||
> a {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
&:hover {
|
||||
color: ${themeVars.color.primary.self};
|
||||
}
|
||||
}
|
||||
> strong {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
> .right-links {
|
||||
gap: 16px;
|
||||
> .ui.dropdown {
|
||||
font-size: 12px;
|
||||
&:hover {
|
||||
color: ${themeVars.color.primary.self};
|
||||
}
|
||||
}
|
||||
> a {
|
||||
border-left: 0;
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
padding-left: 0;
|
||||
margin-left: 0;
|
||||
&:hover {
|
||||
color: ${themeVars.color.primary.self};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
100
styles/components/heatmap.ts
Normal file
100
styles/components/heatmap.ts
Normal file
@@ -0,0 +1,100 @@
|
||||
import { css, themeVars } from "src/types/vars";
|
||||
|
||||
export const heatmap = css`
|
||||
#user-heatmap {
|
||||
+ .divider:not(.divider-text) {
|
||||
border-color: #0000;
|
||||
margin: 8px 0px;
|
||||
}
|
||||
.total-contributions {
|
||||
left: 25px + 20px;
|
||||
bottom: 0 + 12px;
|
||||
}
|
||||
.total-contributions,
|
||||
.vch__legend-right {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
.vch__container {
|
||||
padding: 12px 20px;
|
||||
box-shadow: ${themeVars.github.shadow.floating.small};
|
||||
border-radius: 12px;
|
||||
// 覆盖热力图和图例的背景色
|
||||
.vch__day__square,
|
||||
.vch__legend__wrapper rect {
|
||||
// 圆角
|
||||
rx: 2.5px;
|
||||
ry: 2.5px;
|
||||
// hover 时的圆角
|
||||
border-radius: 0.75px;
|
||||
// 宽度和高度可以用来控制间隔
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
// 边框
|
||||
outline: 0.5px solid ${themeVars.github.contribution.default.borderColor.num0};
|
||||
// 边框向内偏移
|
||||
outline-offset: -0.5px;
|
||||
|
||||
&[style="fill: var(--color-secondary-alpha-60);"] {
|
||||
fill: ${themeVars.github.contribution.default.bgColor.num0} !important;
|
||||
}
|
||||
|
||||
&[style="fill: var(--color-primary-light-4);"] {
|
||||
fill: ${themeVars.github.contribution.default.bgColor.num1} !important;
|
||||
outline-color: ${themeVars.github.contribution.default.borderColor.num1};
|
||||
}
|
||||
|
||||
&[style="fill: var(--color-primary-light-2);"] {
|
||||
fill: ${themeVars.github.contribution.default.bgColor.num2} !important;
|
||||
outline-color: ${themeVars.github.contribution.default.borderColor.num2};
|
||||
}
|
||||
|
||||
&[style="fill: var(--color-primary);"] {
|
||||
fill: ${themeVars.github.contribution.default.bgColor.num3} !important;
|
||||
outline-color: ${themeVars.github.contribution.default.borderColor.num3};
|
||||
}
|
||||
|
||||
&[style="fill: var(--color-primary-dark-2);"] {
|
||||
fill: ${themeVars.github.contribution.default.bgColor.num4} !important;
|
||||
outline-color: ${themeVars.github.contribution.default.borderColor.num4};
|
||||
}
|
||||
|
||||
&[style="fill: var(--color-primary-dark-4);"] {
|
||||
fill: ${themeVars.github.contribution.default.bgColor.num5} !important;
|
||||
outline-color: ${themeVars.github.contribution.default.borderColor.num5};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 动态
|
||||
export const activity = css`
|
||||
.flex-list#activity-feed {
|
||||
border-radius: 12px;
|
||||
box-shadow: ${themeVars.github.shadow.floating.small};
|
||||
> .flex-item {
|
||||
gap: 12px;
|
||||
padding: 12px 8px 16px 14px;
|
||||
> .flex-item-main {
|
||||
gap: 8px !important;
|
||||
> div:not([class]) {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
relative-time {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
}
|
||||
// 动态的右侧 svg 图标
|
||||
.flex-item-trailing svg {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
> .page.buttons {
|
||||
border-top: 1px solid ${themeVars.color.secondary.self};
|
||||
padding: 12px 0px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
23
styles/components/index.ts
Normal file
23
styles/components/index.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
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 "./navbar";
|
||||
import "./newrepo";
|
||||
import "./notification";
|
||||
import "./org";
|
||||
import "./packages";
|
||||
import "./release";
|
||||
import "./repo";
|
||||
import "./setting";
|
||||
import "./signin";
|
||||
import "./user";
|
||||
657
styles/components/issue.ts
Normal file
657
styles/components/issue.ts
Normal file
@@ -0,0 +1,657 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 里程碑详细页面的 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};
|
||||
> .flex-item {
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
&: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-icon {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
margin-left: 16px;
|
||||
// 复选框
|
||||
input {
|
||||
background: unset;
|
||||
margin-top: 14px;
|
||||
margin-right: 8px !important;
|
||||
}
|
||||
svg {
|
||||
margin-top: 14px;
|
||||
}
|
||||
}
|
||||
> .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;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
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: 20px;
|
||||
}
|
||||
|
||||
.repository.view.issue .pull-desc code {
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
a:hover {
|
||||
text-decoration-line: none;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 评论
|
||||
export const comment = css`
|
||||
.comment .comment-container {
|
||||
// 去除评论标题左侧指向头像的小箭头
|
||||
.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-right {
|
||||
> .item,
|
||||
> .label {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
> .ui.label {
|
||||
background-color: initial;
|
||||
font-size: 12px;
|
||||
height: 20px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
// 隐藏顶部菜单的表情按钮
|
||||
// 无法使用此样式, 评论无表情时底部的表情按钮元素不会渲染, 这是一个先有鸡还是先有蛋的问题
|
||||
// 很蛋疼, 希望 Gitea 早日使用 Github 的样式, 因为 Github 的更合理, 无论是操作的方便程度还是按钮的冗余度
|
||||
// .ui.dropdown.action.select-reaction {
|
||||
// display: none;
|
||||
// }
|
||||
.context-dropdown {
|
||||
a.context-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
// 评论菜单的删除按钮
|
||||
.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: 25px;
|
||||
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: 25px;
|
||||
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 {
|
||||
color: ${themeVars.color.white} !important;
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
// 可以合并
|
||||
&.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};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 检查状态
|
||||
.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;
|
||||
&.no-header {
|
||||
&::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: 16px 0;
|
||||
// 事件
|
||||
&.event {
|
||||
// 修复覆盖后的位置问题
|
||||
padding-left: 15px;
|
||||
.avatar {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.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 {
|
||||
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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
// 时间追踪
|
||||
> div:not([class]):not([id]) > .ui.dropdown.jump > 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.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: 28px;
|
||||
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};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
59
styles/components/milestones.ts
Normal file
59
styles/components/milestones.ts
Normal file
@@ -0,0 +1,59 @@
|
||||
import { css, themeVars } from "src/types/vars";
|
||||
|
||||
export const milestone = css`
|
||||
// 里程碑头部
|
||||
.milestone-header {
|
||||
gap: 16px;
|
||||
// 进度条
|
||||
progress {
|
||||
height: 5px;
|
||||
width: 300px;
|
||||
max-width: 80vw;
|
||||
}
|
||||
}
|
||||
// 里程碑 Issue 列表的进度条
|
||||
.milestone-progress-big {
|
||||
height: 8px;
|
||||
}
|
||||
// 里程碑 Issue 列表
|
||||
.page-content.repository.milestone-issue-list {
|
||||
> .ui.container {
|
||||
> .flex-text-block:first-child {
|
||||
margin-bottom: 16px;
|
||||
> h1 {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
line-height: 48px;
|
||||
word-break: keep-all;
|
||||
}
|
||||
+ .tw-flex {
|
||||
flex-direction: row !important;
|
||||
align-items: center;
|
||||
gap: 8px !important;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 10px;
|
||||
font-size: 14px;
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
strong {
|
||||
color: ${themeVars.color.text.self};
|
||||
}
|
||||
> .flex-text-block {
|
||||
gap: 8px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .divider {
|
||||
border-top-color: #0000;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 避免手机/平板下菜单错位
|
||||
export const milestoneMobile = css`
|
||||
@media (max-width: 767.98px) {
|
||||
.page-content.repository.milestone-issue-list > .ui.container > .flex-text-block:first-child + .tw-flex {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
}
|
||||
`;
|
||||
173
styles/components/navbar.ts
Normal file
173
styles/components/navbar.ts
Normal file
@@ -0,0 +1,173 @@
|
||||
import { fallbackVar } from "src/functions";
|
||||
import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars";
|
||||
|
||||
export const navbarRight = css`
|
||||
#navbar {
|
||||
border-bottom: 0;
|
||||
padding: 0px 16px;
|
||||
min-height: 64px;
|
||||
.navbar-left {
|
||||
gap: 8px;
|
||||
> .item {
|
||||
padding: 4px 8px;
|
||||
min-height: 20px;
|
||||
&.active {
|
||||
font-weight: 600;
|
||||
}
|
||||
&#navbar-logo {
|
||||
// 与下方的用户切换头像对齐
|
||||
padding-left: 6px;
|
||||
&:hover {
|
||||
background: unset;
|
||||
}
|
||||
img {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 进入用户页面后, 避免注册, 登录和首页等意外覆盖
|
||||
.navbar-right:has(.user-menu) {
|
||||
gap: 8px;
|
||||
// 右侧按钮, 但不包括头像
|
||||
> .item:not(:last-child) {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
grid-auto-columns: max-content;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
border: 1px solid ${themeVars.color.light.border};
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
padding: unset;
|
||||
height: 32px;
|
||||
min-width: 32px;
|
||||
min-height: 32px;
|
||||
// 纠正内容保证居中
|
||||
.tw-relative {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
.svg {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
// 带下拉菜单的按钮
|
||||
&.ui.dropdown {
|
||||
padding: 0 8px;
|
||||
.text {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
align-items: center;
|
||||
> svg {
|
||||
margin-right: 4px;
|
||||
}
|
||||
// 三角号纠正高度保持居中
|
||||
.not-mobile {
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: ${themeVars.color.nav.hoverBg};
|
||||
}
|
||||
}
|
||||
}
|
||||
.item.ui.dropdown {
|
||||
// 头像菜单
|
||||
&:last-child {
|
||||
padding-left: 2px; // 调整此选项需同步增减相同的标识的 left
|
||||
padding-right: 16px;
|
||||
.text {
|
||||
// 不显示小箭头标识
|
||||
> .not-mobile {
|
||||
display: none;
|
||||
}
|
||||
// 头像
|
||||
img {
|
||||
border-radius: 25px;
|
||||
height: 32px;
|
||||
max-height: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 用户头像的管理员标识
|
||||
.navbar-profile-admin {
|
||||
background-color: ${themeVars.github.bgColor.accent.emphasis};
|
||||
border-radius: 25px;
|
||||
border: 2px solid ${themeVars.color.nav.bg};
|
||||
color: ${themeVars.color.white};
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
padding: 2px 5px;
|
||||
top: -7px;
|
||||
left: 21px;
|
||||
}
|
||||
}
|
||||
// 通知和计时器的圆点
|
||||
a.item {
|
||||
.notification_count,
|
||||
.header-stopwatch-dot {
|
||||
background-color: ${themeVars.github.bgColor.accent.emphasis};
|
||||
border-radius: 25px;
|
||||
color: ${themeVars.color.white};
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
top: -15px;
|
||||
left: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 用户菜单
|
||||
.navbar-right .user-menu {
|
||||
width: ${fallbackVar(customThemeVars.userMenuWidth, "192px")};
|
||||
max-width: 320px;
|
||||
> .header {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
padding: 16px 16px 8px 16px;
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
> .divider {
|
||||
margin: 8px;
|
||||
width: calc(100% - 16px);
|
||||
}
|
||||
}
|
||||
}
|
||||
// 手机下的创建菜单按钮
|
||||
@media (max-width: 767.98px) {
|
||||
#navbar .navbar-right:has(.user-menu) > .item:not(:last-child) {
|
||||
display: none;
|
||||
}
|
||||
#navbar.navbar-menu-open .navbar-right:has(.user-menu) > .item:not(:last-child) {
|
||||
display: grid;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 二级导航栏
|
||||
export const secondaryNav = css`
|
||||
.page-content > :first-child.secondary-nav {
|
||||
margin-bottom: 16px;
|
||||
// 仪表板界面的二级导航栏用户菜单
|
||||
> .ui.secondary.stackable.menu {
|
||||
gap: 0px;
|
||||
min-height: 48px;
|
||||
> .item {
|
||||
> .ui.dropdown > .text {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
svg {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .right.menu {
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
14
styles/components/newrepo.ts
Normal file
14
styles/components/newrepo.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import { css } from "src/types/vars";
|
||||
import { activeItemAfterStyle } from "styles/public/menu";
|
||||
|
||||
// 新建仓库页面下拉菜单
|
||||
export const newRepo = css`
|
||||
.page-content.repository.new-repo {
|
||||
.ui.dropdown .menu {
|
||||
.item:hover:after {
|
||||
content: "";
|
||||
${activeItemAfterStyle}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
182
styles/components/notification.ts
Normal file
182
styles/components/notification.ts
Normal file
@@ -0,0 +1,182 @@
|
||||
import { css, otherThemeVars, themeVars } from "src/types/vars";
|
||||
|
||||
// 用户订阅/关注页面
|
||||
export const notification = css`
|
||||
.page-content.user.notification {
|
||||
> .ui.container {
|
||||
> .ui.attached.segment {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
> .divider {
|
||||
display: none;
|
||||
}
|
||||
// 订阅列表
|
||||
&:has(#issue-list) {
|
||||
> .tw-flex {
|
||||
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: 52px;
|
||||
padding: 8px;
|
||||
// 左侧菜单
|
||||
> .tw-flex:first-child > .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;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 右侧菜单
|
||||
> .tw-flex:last-child > .ui.menu {
|
||||
align-items: center;
|
||||
> .item {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
> .ui.button {
|
||||
padding: 0 12px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 关注列表
|
||||
> .flex-list:not([id]) {
|
||||
border: 1px solid ${themeVars.color.light.border};
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
> .flex-item {
|
||||
padding: 16px;
|
||||
> .flex-item-main {
|
||||
gap: 4px;
|
||||
> .flex-item-header {
|
||||
> .flex-item-title {
|
||||
gap: 12px;
|
||||
}
|
||||
> .flex-item-trailing {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
gap: 16px;
|
||||
.color-icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .flex-item-body:last-child {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 通知列表
|
||||
&:has(#notification_table) {
|
||||
> .tw-flex:first-child {
|
||||
background-color: ${themeVars.color.box.header};
|
||||
border: 1px solid ${themeVars.color.light.border};
|
||||
border-bottom: 0;
|
||||
border-top-left-radius: ${otherThemeVars.border.radius};
|
||||
border-top-right-radius: ${otherThemeVars.border.radius};
|
||||
height: 52px;
|
||||
padding: 8px;
|
||||
margin-bottom: 0 !important;
|
||||
// 左侧菜单
|
||||
> .ui.compact.menu {
|
||||
align-items: center;
|
||||
border: 0;
|
||||
> .item {
|
||||
background: unset !important;
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
padding: 0px 8px;
|
||||
height: 30px;
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
&:hover {
|
||||
background: ${themeVars.github.control.transparent.bgColor.hover} !important;
|
||||
}
|
||||
&.active {
|
||||
color: ${themeVars.color.text.self};
|
||||
font-weight: 700;
|
||||
}
|
||||
.notifications-unread-count {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 通知全部确认按钮
|
||||
.ui.ui.ui.ui.mini.button {
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
// 通知列表
|
||||
#notification_table {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
> .notifications-item {
|
||||
border-top: 1px solid ${themeVars.color.light.border};
|
||||
padding: 8px !important;
|
||||
&:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
&:last-child {
|
||||
border-bottom-left-radius: ${otherThemeVars.border.radius};
|
||||
border-bottom-right-radius: ${otherThemeVars.border.radius};
|
||||
&:hover {
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background: ${themeVars.github.bgColor.accent.muted};
|
||||
box-shadow: 2px 0 0 ${themeVars.github.borderColor.accent.emphasis} inset;
|
||||
color: ${themeVars.color.text.self};
|
||||
}
|
||||
> .notifications-link {
|
||||
> .notifications-top-row {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
> .notifications-bottom-row {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
}
|
||||
> .notifications-updated {
|
||||
font-size: 12px;
|
||||
}
|
||||
> .notifications-buttons {
|
||||
.interact-bg {
|
||||
background: ${themeVars.github.bgColor.accent.muted} !important;
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
padding: 8px !important;
|
||||
&:hover {
|
||||
background: ${themeVars.github.control.transparent.bgColor.hover} !important;
|
||||
color: ${themeVars.color.text.self};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
21
styles/components/org.ts
Normal file
21
styles/components/org.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import { css, themeVars } from "src/types/vars";
|
||||
|
||||
export const org = css`
|
||||
.page-content.organization {
|
||||
#org-info {
|
||||
.ui.header {
|
||||
// 组织页面的 RSS 订阅按钮
|
||||
.ui.label.button {
|
||||
padding: 4px 16px;
|
||||
.svg {
|
||||
width: 20px;
|
||||
min-width: 20px;
|
||||
}
|
||||
&:hover {
|
||||
border-color: ${themeVars.color.light.border};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
124
styles/components/packages.ts
Normal file
124
styles/components/packages.ts
Normal file
@@ -0,0 +1,124 @@
|
||||
import { css, otherThemeVars, themeVars } from "src/types/vars";
|
||||
|
||||
// 组织/仓库的软件包列表(包含用户但未测试)
|
||||
export const packagesList = css`
|
||||
.page-content.packages {
|
||||
// 这里必须要用 >, 否则会影响到软件包详细信息页的样式
|
||||
> .ui.container > div:not([class]) {
|
||||
border: 1px solid ${themeVars.color.light.border};
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
margin-top: 16px;
|
||||
.flex-list {
|
||||
border-top: 1px solid ${themeVars.color.light.border};
|
||||
&:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
.flex-item {
|
||||
padding: 16px;
|
||||
.flex-item-main {
|
||||
.flex-item-title {
|
||||
gap: 8px;
|
||||
> a {
|
||||
min-height: 25px;
|
||||
}
|
||||
// 软件包类型的标签
|
||||
.ui.label {
|
||||
gap: 4px;
|
||||
padding: 3px 6px;
|
||||
min-height: 24.5px;
|
||||
background-color: unset;
|
||||
border: 1px solid ${themeVars.color.light.border};
|
||||
color: ${themeVars.color.primary.self};
|
||||
}
|
||||
}
|
||||
.flex-item-body {
|
||||
font-size: 12px;
|
||||
a {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 软件包详细信息页
|
||||
export const packagesDetail = css`
|
||||
.page-content.packages {
|
||||
.issue-title-header > div {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
.issue-content {
|
||||
.issue-content-left {
|
||||
.ui.top.attached.header {
|
||||
font-size: 14px;
|
||||
padding: 16px;
|
||||
}
|
||||
.ui.attached.segment {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
padding: 16px;
|
||||
.ui.table,
|
||||
.ui.form .field > label {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
.ui.form .field > label {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.markup {
|
||||
color: ${themeVars.color.text.self};
|
||||
pre {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
}
|
||||
+ .ui.top.attached.header {
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.issue-content-right {
|
||||
border: 0;
|
||||
padding: 0px 16px;
|
||||
> strong {
|
||||
font-size: 16px;
|
||||
}
|
||||
> .divider {
|
||||
margin: 16px 0px;
|
||||
}
|
||||
// 详情
|
||||
> .ui.relaxed.list {
|
||||
margin: 16px 0px;
|
||||
.item {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
svg {
|
||||
color: ${themeVars.color.text.self};
|
||||
}
|
||||
// 应该只选中版本中的 a 标签
|
||||
&.tw-flex {
|
||||
justify-content: space-between;
|
||||
> a {
|
||||
border: 1px solid ${themeVars.color.light.border};
|
||||
border-radius: 25px;
|
||||
font-size: 12px;
|
||||
padding: 0px 6px;
|
||||
min-height: 20px;
|
||||
flex: none !important;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
// 不知道什么东西
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
175
styles/components/release.ts
Normal file
175
styles/components/release.ts
Normal file
@@ -0,0 +1,175 @@
|
||||
import { css, themeVars } from "src/types/vars";
|
||||
|
||||
// release 顶部栏左侧按钮组
|
||||
export const releaseTagMenu = css`
|
||||
.page-content.repository {
|
||||
&.releases,
|
||||
&.tags {
|
||||
h2.small.menu {
|
||||
.item {
|
||||
background-color: unset !important;
|
||||
font-weight: 500;
|
||||
&.active {
|
||||
background: ${themeVars.github.bgColor.accent.emphasis} !important;
|
||||
color: ${themeVars.color.white};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 顶部右侧按钮组
|
||||
export const rightButton = css`
|
||||
.page-content.repository {
|
||||
&.releases,
|
||||
&.tags {
|
||||
.ui.small.button {
|
||||
background-color: ${themeVars.color.button};
|
||||
border-color: ${themeVars.color.light.border};
|
||||
box-shadow: none;
|
||||
color: ${themeVars.color.text.light.self};
|
||||
padding: 5px 16px;
|
||||
min-height: auto;
|
||||
line-height: 20px;
|
||||
&:hover {
|
||||
background-color: ${themeVars.color.hover.self};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 标签页样式
|
||||
export const tags = css`
|
||||
.page-content.repository.tags {
|
||||
// 标签的选项取消下划线
|
||||
.tag-list-row {
|
||||
.tag-list-row-title {
|
||||
line-height: 1.5;
|
||||
}
|
||||
.download {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
font-size: 12px;
|
||||
a.muted:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 发布页样式
|
||||
export const releases = css`
|
||||
.page-content.repository.releases {
|
||||
> .ui.container > .divider {
|
||||
margin: 16px 0;
|
||||
}
|
||||
ul#release-list {
|
||||
gap: 32px;
|
||||
margin: 32px 0 16px 0;
|
||||
.release-entry {
|
||||
// 左侧发布元信息
|
||||
.meta {
|
||||
gap: 0.5rem;
|
||||
padding-top: 24px;
|
||||
padding-right: 40px;
|
||||
text-align: left;
|
||||
min-width: 0;
|
||||
flex: 0.125;
|
||||
a.muted {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
word-break: break-all;
|
||||
svg {
|
||||
margin-right: 8px !important;
|
||||
}
|
||||
svg.tw-mr-1.svg.octicon-tag {
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
// 分支选择按钮
|
||||
.ui.button.branch-dropdown-button {
|
||||
min-height: 20px;
|
||||
line-height: 20px;
|
||||
padding: 3px 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
// 右侧发布详细信息
|
||||
.segment.detail {
|
||||
padding: 16px;
|
||||
.svg {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
// 标题
|
||||
.release-list-title {
|
||||
font-size: 32px;
|
||||
gap: 16px;
|
||||
}
|
||||
// 提交信息
|
||||
p.text.grey {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
margin: 24px 0 0 0;
|
||||
span {
|
||||
word-break: break-word;
|
||||
}
|
||||
.time {
|
||||
color: ${themeVars.color.text.self};
|
||||
}
|
||||
}
|
||||
// 发布内容
|
||||
.markup {
|
||||
> *:first-child {
|
||||
margin-top: 24px !important;
|
||||
}
|
||||
}
|
||||
// 分割线
|
||||
.divider {
|
||||
position: relative;
|
||||
left: -16px;
|
||||
width: calc(100% + 32px);
|
||||
border-top-width: 1.5px;
|
||||
margin: 24px 0 16px 0;
|
||||
}
|
||||
// 下载列表
|
||||
.download {
|
||||
summary {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-top: 16px;
|
||||
&::marker {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.attachment-list {
|
||||
margin-top: 16px;
|
||||
.item {
|
||||
align-items: center;
|
||||
line-height: 17px;
|
||||
padding: 8px 16px;
|
||||
.flex-text-inline {
|
||||
gap: 8px;
|
||||
}
|
||||
// 只选中左侧文件名称
|
||||
strong.flex-text-inline:hover {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
.attachment-right-info {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
.svg {
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
92
styles/components/repo.ts
Normal file
92
styles/components/repo.ts
Normal file
@@ -0,0 +1,92 @@
|
||||
import { css, otherThemeVars, themeVars } from "src/types/vars";
|
||||
|
||||
// 仓库头信息
|
||||
export const repoHeader = css`
|
||||
.page-content.repository .repo-header {
|
||||
// 点星/关注/克隆/RSS 按钮
|
||||
.ui.compact.button {
|
||||
padding: 3px 12px;
|
||||
}
|
||||
// 仓库名称
|
||||
.flex-item {
|
||||
.flex-item-title {
|
||||
// 间隔线颜色
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
// 仓库名称
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: ${themeVars.color.text.self};
|
||||
font-size: 16px;
|
||||
text-decoration: none !important;
|
||||
min-width: 3ch;
|
||||
padding: 4px 6px;
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
&:hover {
|
||||
background: ${themeVars.github.control.transparent.bgColor.hover};
|
||||
}
|
||||
&.muted:not(.tw-font-normal) {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 默认的 hover 为 primary 颜色, 修正
|
||||
a:not(.label, .button):hover {
|
||||
color: ${themeVars.color.text.self} !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 顶部提交, 标签, 分支统计
|
||||
export const repoMenu = css`
|
||||
.page-content.repository {
|
||||
.repository-summary .repository-menu {
|
||||
background-color: ${themeVars.color.box.header};
|
||||
.item {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
height: 31px; // 文件列表下与右侧输入框对齐
|
||||
b {
|
||||
color: ${themeVars.color.text.self};
|
||||
margin: 0 2px;
|
||||
}
|
||||
&.active {
|
||||
background-color: ${themeVars.color.active};
|
||||
color: ${themeVars.color.text.self};
|
||||
font-weight: 500;
|
||||
svg {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const repoTopic = css`
|
||||
// 理应只能覆盖探索/组织/用户下仓库的 topic 标签
|
||||
// 避免渲染到仓库的类型标签
|
||||
.flex-item-main > .label-list .ui.label,
|
||||
// 仓库文件列表下的 topic 标签
|
||||
#repo-topics .ui.label.repo-topic {
|
||||
border-radius: 25px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
padding: 5px 10px;
|
||||
background-color: ${themeVars.github.bgColor.accent.muted};
|
||||
color: ${themeVars.github.fgColor.accent};
|
||||
&:hover {
|
||||
background-color: ${themeVars.github.bgColor.accent.emphasis};
|
||||
color: ${themeVars.color.white};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 仓库动态页面关闭工单状态条颜色
|
||||
export const closedIssueTableCell = css`
|
||||
.stats-table .table-cell.tw-bg-red[href="#closed-issues"] {
|
||||
background-color: ${themeVars.color.purple.self} !important;
|
||||
}
|
||||
`;
|
||||
85
styles/components/setting.ts
Normal file
85
styles/components/setting.ts
Normal file
@@ -0,0 +1,85 @@
|
||||
import { css, themeVars } from "src/types/vars";
|
||||
import { primaryHoverStyle, primaryStyle } from "styles/public/button";
|
||||
|
||||
const tinyStyle = {
|
||||
color: themeVars.github.button.primary.fgColor.accent,
|
||||
backgroundColor: themeVars.color.button,
|
||||
borderColor: themeVars.color.light.border,
|
||||
};
|
||||
|
||||
const tinyHoverStyle = {
|
||||
color: themeVars.github.button.primary.fgColor.rest,
|
||||
backgroundColor: themeVars.github.button.primary.bgColor.hover,
|
||||
borderColor: themeVars.github.button.primary.borderColor.hover,
|
||||
};
|
||||
|
||||
// 设置界面下的按钮
|
||||
export const button = css`
|
||||
// 不包含管理员的设置界面
|
||||
.user-main-content,
|
||||
.repo-setting-content,
|
||||
.user-setting-content,
|
||||
.org-setting-content {
|
||||
// 主色调按钮替换为普通按钮
|
||||
.ui.primary.button {
|
||||
color: ${themeVars.color.text.light.self};
|
||||
background-color: ${themeVars.color.button};
|
||||
border-color: ${themeVars.color.light.border};
|
||||
box-shadow: none;
|
||||
&:hover {
|
||||
background-color: ${themeVars.color.hover.self};
|
||||
}
|
||||
}
|
||||
// 迷你按钮替换为自定义的主色调按钮 (例: SSH 验证按钮)
|
||||
.ui.primary.button.tiny {
|
||||
${tinyStyle}
|
||||
&:hover {
|
||||
${tinyHoverStyle}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 右上角迷你按钮替换会主色调按钮
|
||||
.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}
|
||||
padding: 3px 12px;
|
||||
min-height: 20px;
|
||||
line-height: 20px;
|
||||
&:hover {
|
||||
${primaryHoverStyle}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 管理员设置界面下的自定义主色调按钮
|
||||
.admin-setting-content {
|
||||
.ui.primary.button {
|
||||
${tinyStyle}
|
||||
padding: 5px 16px;
|
||||
line-height: 22px;
|
||||
&:hover {
|
||||
${tinyHoverStyle}
|
||||
}
|
||||
}
|
||||
.ui.red.button {
|
||||
box-shadow: ${themeVars.github.shadow.resting.small};
|
||||
padding: 5px 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const label = css`
|
||||
// Runner 标签
|
||||
.runner-container {
|
||||
// 普通标签, runner 状态: 离线, runner 标签
|
||||
.ui.label {
|
||||
border: 1px solid ${themeVars.color.light.border};
|
||||
}
|
||||
}
|
||||
`;
|
||||
62
styles/components/signin.ts
Normal file
62
styles/components/signin.ts
Normal file
@@ -0,0 +1,62 @@
|
||||
import { css } from "src/types/vars";
|
||||
|
||||
// 注册/登录界面
|
||||
export const signIn = css`
|
||||
.page-content.user.signin {
|
||||
.ui.grid {
|
||||
justify-content: center;
|
||||
> .column {
|
||||
width: 384px;
|
||||
padding: 16px;
|
||||
> .ui.container {
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ui.top.attached.header {
|
||||
border: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
background-color: unset !important;
|
||||
text-align: center;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.ui.attached.segment {
|
||||
border: 0;
|
||||
padding: 16px 0 0 0;
|
||||
.field:not(.inline) {
|
||||
label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
input {
|
||||
background: unset;
|
||||
padding: 5px 12px;
|
||||
height: 40px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.button {
|
||||
height: 40px;
|
||||
}
|
||||
.divider.divider-text {
|
||||
margin: 20px 0px;
|
||||
}
|
||||
#oauth2-login-navigator-inner {
|
||||
gap: 8px;
|
||||
.ui.button svg {
|
||||
width: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ui.top.attached.header.segment {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
gap: 16px;
|
||||
.signin-passkey {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
62
styles/components/user.ts
Normal file
62
styles/components/user.ts
Normal file
@@ -0,0 +1,62 @@
|
||||
import { css, themeVars } from "src/types/vars";
|
||||
|
||||
// 用户点星仓库列表
|
||||
export const stars = css`
|
||||
.page-content.user.profile {
|
||||
.stars {
|
||||
> .flex-list {
|
||||
> .flex-item {
|
||||
padding: 24px 0;
|
||||
&:first-child {
|
||||
padding-top: 14px;
|
||||
}
|
||||
// 仓库头像
|
||||
> .flex-item-leading {
|
||||
img,
|
||||
svg {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
}
|
||||
// 仓库信息
|
||||
> .flex-item-main {
|
||||
// 仓库标题
|
||||
> .flex-item-header {
|
||||
// 仓库名称
|
||||
> .flex-item-title {
|
||||
font-size: 20px;
|
||||
gap: 8px;
|
||||
// 仓库中间的间隔线
|
||||
&:not(a) {
|
||||
color: ${themeVars.color.primary.self};
|
||||
}
|
||||
}
|
||||
// 仓库语言, 星标
|
||||
> .flex-item-trailing {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
gap: 16px;
|
||||
font-size: 12px;
|
||||
> .flex-text-inline .color-icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 描述和更新时间
|
||||
> .flex-item-body {
|
||||
margin-top: 10px;
|
||||
// 更新时间
|
||||
&:last-child {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
// 主题标签
|
||||
> .label-list {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
8
styles/index.ts
Normal file
8
styles/index.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
// organize-imports-ignore
|
||||
// tslint:disable:ordered-imports
|
||||
// 组件导入有顺序, 禁止插件优化
|
||||
|
||||
// 全局样式
|
||||
import "./public";
|
||||
// 组件样式
|
||||
import "./components";
|
||||
27
styles/public/animation.ts
Normal file
27
styles/public/animation.ts
Normal 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
36
styles/public/attached.ts
Normal 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
139
styles/public/button.ts
Normal 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
272
styles/public/dropdown.ts
Normal 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
16
styles/public/index.ts
Normal 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
42
styles/public/input.ts
Normal 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
190
styles/public/label.ts
Normal 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
298
styles/public/menu.ts
Normal 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
29
styles/public/modal.ts
Normal 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
16
styles/public/other.ts
Normal 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
294
styles/public/radius.ts
Normal 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
19
styles/public/text.ts
Normal 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
50
styles/public/tippy.ts
Normal 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
61
styles/public/transition.ts
Normal 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);
|
||||
}
|
||||
`;
|
||||
Reference in New Issue
Block a user