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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
Reference in New Issue
Block a user