mirror of
https://github.com/lutinglt/gitea-github-theme.git
synced 2025-10-26 21:20:31 +00:00
dropdown 迁移
This commit is contained in:
lutinglt
1
.github/release.md
vendored
1
.github/release.md
vendored
@@ -26,6 +26,7 @@
|
||||
- Issue/PR 评论边框样式同步
|
||||
- Code/Runner/PR 提示框样式同步
|
||||
- 下拉菜单样式同步
|
||||
- 选择下拉菜单样式同步
|
||||
|
||||
## 🎈 Perf
|
||||
|
||||
|
||||
@@ -53,3 +53,19 @@ export const commit = css`
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 文件列表页面下的分支按钮
|
||||
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: 16px; // gitea 有 RSS 留出足够的空间
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -1,144 +0,0 @@
|
||||
// Made by Luting ^-^
|
||||
// 下拉菜单动画
|
||||
@keyframes overlay-appear {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-12px);
|
||||
}
|
||||
|
||||
35% {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// 下拉菜单
|
||||
.ui.dropdown .menu {
|
||||
margin-top: 3.75px !important;
|
||||
border-radius: 12px !important;
|
||||
overflow: hidden auto;
|
||||
box-shadow:
|
||||
0px 0px 0px 0.5px #30363d,
|
||||
0px 6px 12px -3px #01040966,
|
||||
0px 6px 18px 0px #01040966;
|
||||
animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running overlay-appear;
|
||||
|
||||
> .item {
|
||||
padding: 8px 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.dropdown .menu,
|
||||
.branch-tag-item.active,
|
||||
.ui.pointing.dropdown > .menu:not(.hidden):after {
|
||||
background: var(--color-box-header) !important;
|
||||
}
|
||||
|
||||
%item-style {
|
||||
background: #1f6feb;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu > .item.context:hover {
|
||||
@extend %item-style;
|
||||
}
|
||||
|
||||
.user-main-content,
|
||||
.repo-setting-content,
|
||||
.user-setting-content,
|
||||
.org-setting-content,
|
||||
.admin-setting-content {
|
||||
.ui.dropdown .menu > .item {
|
||||
&:hover {
|
||||
@extend %item-style;
|
||||
|
||||
a {
|
||||
color: var(--color-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 按钮菜单选项(主要为仓库)
|
||||
.tippy-box .flex-items-block,
|
||||
.ui.dropdown > .visible.menu .scrolling.menu,
|
||||
.ui.button.dropdown .menu {
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: var(--border-radius);
|
||||
margin: 0 8px;
|
||||
|
||||
&:first-of-type {
|
||||
border-radius: var(--border-radius);
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-radius: var(--border-radius);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 下拉菜单分隔线
|
||||
.ui.dropdown .menu > .divider {
|
||||
border: 0;
|
||||
height: 1px;
|
||||
background-color: #3d444db3;
|
||||
margin-top: calc(7px);
|
||||
margin-bottom: 8px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.ui.dropdown.branch-selector-dropdown > .visible.menu {
|
||||
// 仓库分支列表下查看操作按钮
|
||||
> .item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: var(--border-radius);
|
||||
margin: 8px;
|
||||
padding: 6px 8px !important;
|
||||
}
|
||||
|
||||
.scrolling.menu .item {
|
||||
padding: 6px 16px !important;
|
||||
|
||||
// 分支菜单下划线
|
||||
&:before {
|
||||
content: " ";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
border-width: 1px 0px 0px;
|
||||
border-style: solid;
|
||||
border-image: initial;
|
||||
border-color: #3d444db3;
|
||||
}
|
||||
|
||||
&:first-of-type:before {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:before {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
+ :before {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.label {
|
||||
margin-top: 1px;
|
||||
margin-left: auto;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -12,27 +12,35 @@ export const dropdown = css`
|
||||
border: unset !important;
|
||||
border-radius: 12px !important;
|
||||
box-shadow: ${themeVars.github.shadow.floating.small} !important;
|
||||
|
||||
> .item {
|
||||
// 忽略隐藏
|
||||
> .item:not(.tw-hidden) {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 8px 10px !important;
|
||||
border-radius: ${otherThemeVars.border.radius} !important;
|
||||
margin: 0 0.5rem;
|
||||
&:first-child {
|
||||
&:first-of-type {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
&:last-child {
|
||||
// 不知道为什么提交差异对比页面操作中的 cherrypick 按钮无法被选中
|
||||
&.cherry-pick-button,
|
||||
&:last-of-type {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
&:hover {
|
||||
background-color: ${themeVars.github.control.transparent.bgColor.hover} !important;
|
||||
}
|
||||
&.active,
|
||||
&.selected {
|
||||
background-color: ${themeVars.color.active} !important;
|
||||
&:hover {
|
||||
background-color: ${themeVars.github.control.transparent.bgColor.hover} !important;
|
||||
}
|
||||
}
|
||||
svg {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
> .divider {
|
||||
margin: 0.5rem 0;
|
||||
@@ -54,4 +62,33 @@ export const dropdown = css`
|
||||
.ui.selection.dropdown .menu > .item {
|
||||
border: unset;
|
||||
}
|
||||
// 修复一些菜单下的菜单元素溢出问题
|
||||
// 目前主要为分支菜单
|
||||
.ui.dropdown .menu .menu {
|
||||
border-radius: 12px !important;
|
||||
}
|
||||
`;
|
||||
|
||||
// 选择框的下拉菜单看起来像普通按钮
|
||||
export const selectionDropdown = css`
|
||||
.ui.selection.dropdown,
|
||||
.ui.selection.dropdown.active {
|
||||
background-color: ${themeVars.color.button};
|
||||
border-color: ${themeVars.color.light.border};
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
padding: 9px 16px;
|
||||
min-height: 33px;
|
||||
&:focus {
|
||||
background: ${themeVars.color.button};
|
||||
border-color: ${themeVars.color.light.border};
|
||||
}
|
||||
&:hover {
|
||||
background: ${themeVars.color.hover.self};
|
||||
border-color: ${themeVars.color.light.border};
|
||||
}
|
||||
}
|
||||
.ui.selection.dropdown.active {
|
||||
border-bottom-left-radius: ${otherThemeVars.border.radius} !important;
|
||||
border-bottom-right-radius: ${otherThemeVars.border.radius} !important;
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -280,3 +280,11 @@ export const fixRadius = css`
|
||||
border-bottom-right-radius: ${otherThemeVars.border.radius};
|
||||
}
|
||||
`;
|
||||
|
||||
// 修复一些根本无法理解的生效顺序
|
||||
export const fixWhyRadius = css`
|
||||
// Issue 菜单第一个按钮
|
||||
.ui.secondary.menu .item {
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { animation } from "src/core/theme";
|
||||
import { css, themeVars } from "src/types/vars";
|
||||
import { css, otherThemeVars, themeVars } from "src/types/vars";
|
||||
|
||||
// 一些界面内的提示框, 比如克隆按钮, PR信息, Runner信息 等
|
||||
export const tippyBox = css`
|
||||
@@ -23,5 +23,17 @@ export const tippyBox = css`
|
||||
}
|
||||
}
|
||||
}
|
||||
// 差异对比中文件路径行右侧的三个点菜单
|
||||
&[data-theme="menu"] {
|
||||
.tippy-content {
|
||||
padding: 0.5rem;
|
||||
.item {
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
&:hover {
|
||||
background-color: ${themeVars.github.control.transparent.bgColor.hover};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -105,7 +105,9 @@ const github: GithubColor = {
|
||||
bgColor: {
|
||||
active: "#656c7640",
|
||||
hover: "#656c7633",
|
||||
selected: "#656c761a",
|
||||
// 非官方颜色, 实在是太淡了
|
||||
// selected: "#656c761a",
|
||||
selected: "#656c762a",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user