diff --git a/src/types/color/github.ts b/src/types/color/github.ts index 0d968a5..f2e95ba 100644 --- a/src/types/color/github.ts +++ b/src/types/color/github.ts @@ -57,6 +57,7 @@ export const github = { * @input `input` 输入框被选中时的边框颜色 * @clone `clone` 克隆地址框被选中时的边框颜色 * @issue `comment` 评论框被选中时的边框颜色 + * @menu `verticalMenu` 垂直菜单项激活时左侧的伪元素颜色 */ emphasis: null, }, @@ -161,6 +162,7 @@ export const github = { * @clone `clone` 克隆按钮下按钮组和面板操作列表的悬停背景颜色 * @input `inputAction` 输入框动作按钮的悬停背景颜色 * @dropdown `dropdown` 下拉框子项的悬停背景颜色 + * @menu `verticalMenu` 垂直菜单项的悬停背景颜色 */ hover: null, }, diff --git a/styles/components/actions.tsx b/styles/components/actions.tsx index 8050bd3..a08a8ea 100644 --- a/styles/components/actions.tsx +++ b/styles/components/actions.tsx @@ -149,7 +149,7 @@ export const actionViewLeft = css` &:after { overflow: visible; background: ${themeVars.github.bgColor.accent.emphasis}; - border-radius: 0.375rem; + border-radius: ${otherThemeVars.border.radius}; content: ""; height: 24px; left: calc(0.5rem * -1); diff --git a/styles/components/clone.tsx b/styles/components/clone.tsx index a05105f..49157fa 100644 --- a/styles/components/clone.tsx +++ b/styles/components/clone.tsx @@ -34,6 +34,7 @@ export const clone = css` width: 100%; height: 2px; background: ${themeVars.github.underlineNav.borderColor.active}; + border-radius: ${otherThemeVars.border.radius}; } } .item.active { diff --git a/styles/components/setting.scss b/styles/components/setting.scss deleted file mode 100644 index 6fdacc4..0000000 --- a/styles/components/setting.scss +++ /dev/null @@ -1,172 +0,0 @@ -// Made by Luting ^-^ -// 设置左边栏(包含 Actions 的工作流栏) - -%active-item-after-style { - background: #1f6feb; - border-radius: 0.375rem; - content: ""; - height: 24px; - left: calc(0.5rem * -1); - position: absolute; - top: calc(50% - 12px); - width: 4px; -} - -.ui.vertical.menu { - background: var(--color-body); - border: 0; - - .header.item { - color: #9198a1 !important; - font-size: 1.5rem; - font-weight: 700; - background: unset; - margin-bottom: 0.5rem; - } - - .menu .item:hover { - background: var(--color-hover); - } - - .item, - .item > summary { - font-size: 1.1rem; - background: unset; - padding: 6px 8px; - color: var(--color-white) !important; - } - - .item:before { - background: unset; - } - - .active.item, - .active.item > summary { - font-weight: 600; - } - - .active.item:after { - @extend %active-item-after-style; - } - - details { - &:has(.active.item) { - > summary { - font-weight: 600; - background: #161a21; - - &:hover { - background: var(--color-hover); - } - } - - .active.item { - font-weight: 400; - } - - &[open] { - > summary { - background: unset; - - &:hover { - background: var(--color-hover); - } - } - - &:after { - display: none; - } - } - - &:after { - @extend %active-item-after-style; - } - } - } -} - -.ui.vertical.menu, -.ui.fluid.vertical.menu { - .active.item { - background: #161a21 !important; - - &:hover { - background-color: var(--color-hover) !important; - } - } - - .item, - .item > summary { - border-radius: 0.5rem !important; - } -} - -// 设置右面版 -.user-main-content, -.repo-setting-content, -.user-setting-content, -.org-setting-content, -.admin-setting-content { - .ui.top.attached.header { - border: 0; - font-size: 1.5rem; - font-weight: 400; - background-color: unset !important; - margin-bottom: 0.25rem; - } - - .ui.attached.segment { - background-color: unset; - border-radius: 0.5rem !important; - } - - .ui.attached.segment:not(.error) { - border: 1px solid var(--color-light-border) !important; - } - - .ui.attached.segment.error { - border: 1px solid var(--color-error-border) !important; - } - - input, - textarea, - .ui.input input, - .ui.form input:not([type]), - .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"], - .ui.selection.dropdown { - background: var(--color-box-header); - } - - .ui.form input:not([type]), - .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: 7px 12px; - } - - .ui.selection.dropdown { - padding: 7px 24px 7px 12px; - } -} diff --git a/styles/components/setting.tsx b/styles/components/setting.tsx index 0151e35..ddb318f 100644 --- a/styles/components/setting.tsx +++ b/styles/components/setting.tsx @@ -76,3 +76,33 @@ export const label = css` } } `; + +// 设置右面板的内容 +export const content = css` + .user-main-content, + .repo-setting-content, + .user-setting-content, + .org-setting-content, + .admin-setting-content { + .ui.top.attached.header { + border: 0; + font-size: 1.5rem; + font-weight: 400; + background-color: unset !important; + margin-bottom: 0.25rem; + } + + .ui.attached.segment { + background-color: unset; + border-radius: 0.5rem !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; + } + } +`; diff --git a/styles/public/dropdown.tsx b/styles/public/dropdown.tsx index e328e86..c140aec 100644 --- a/styles/public/dropdown.tsx +++ b/styles/public/dropdown.tsx @@ -80,8 +80,8 @@ export const selectionDropdown = css` background-color: ${themeVars.color.button}; border-color: ${themeVars.color.light.border}; border-radius: ${otherThemeVars.border.radius}; - padding: 9px 16px; - min-height: 33px; + padding: 8px 16px; + min-height: 32px; &:focus { background: ${themeVars.color.button}; border-color: ${themeVars.color.light.border}; diff --git a/styles/public/index.tsx b/styles/public/index.tsx index d669270..11b959b 100644 --- a/styles/public/index.tsx +++ b/styles/public/index.tsx @@ -7,6 +7,7 @@ import "./chroma"; // 代码高亮 import "./dropdown"; // 下拉框 import "./input"; // 输入框 import "./label"; // 标签 +import "./menu"; // 菜单 import "./modal"; // 弹窗 import "./svg"; // svg 图标 import "./tippy"; // 提示框 diff --git a/styles/public/input.tsx b/styles/public/input.tsx index 7afc762..201f783 100644 --- a/styles/public/input.tsx +++ b/styles/public/input.tsx @@ -18,6 +18,7 @@ export const input = css` .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; diff --git a/styles/public/menu.tsx b/styles/public/menu.tsx new file mode 100644 index 0000000..d4b8127 --- /dev/null +++ b/styles/public/menu.tsx @@ -0,0 +1,110 @@ +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; + } + } + } + } + } +`; diff --git a/themes/dark.css.tsx b/themes/dark.css.tsx index 482e4de..c4a0b90 100644 --- a/themes/dark.css.tsx +++ b/themes/dark.css.tsx @@ -105,9 +105,7 @@ const github: GithubColor = { bgColor: { active: "#656c7640", hover: "#656c7633", - // 非官方颜色, 实在是太淡了 - // selected: "#656c761a", - selected: "#656c762a", + selected: "#656c761a", }, }, },