chuan
434161de5b
Release / release (push) Failing after 13s
- Removed `.github-theme` from .gitignore as it is no longer needed. - Updated `official-style-map.md` to clarify the maintenance of GitHub Light style increments within the current repository. - Revised `rules.md` to reflect the new approach to maintaining GitHub Light theme increments. - Changed test script in `package.json` to verify generated theme instead of GitHub migration. - Added `verify-generated-theme.ts` script to validate the generated theme files. - Migrated various styles from `.github-theme` to the new structure, updating comments and references accordingly.
201 lines
5.0 KiB
TypeScript
201 lines
5.0 KiB
TypeScript
|
|
export const navbarRight = `
|
|
#navbar {
|
|
padding: 8px 16px; /* 上下内边距 + .navbar-left & .navbar-right 的 min-height = 64px */
|
|
min-height: 64px;
|
|
position: relative;
|
|
z-index: 1000;
|
|
.navbar-left,
|
|
.navbar-right {
|
|
min-height: 48px;
|
|
}
|
|
.navbar-right {
|
|
gap: 8px;
|
|
> .navbar-theme-toggle {
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid var(--color-light-border);
|
|
border-radius: var(--border-radius);
|
|
color: var(--color-text);
|
|
height: 32px;
|
|
min-height: 32px;
|
|
min-width: 32px;
|
|
padding: 0;
|
|
width: 32px;
|
|
&:hover,
|
|
&.active {
|
|
background-color: var(--color-nav-hoverBg);
|
|
}
|
|
}
|
|
}
|
|
.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(.navbar-user-menu):not(.navbar-theme-toggle) {
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
border: 1px solid var(--color-light-border);
|
|
border-radius: var(--border-radius);
|
|
padding: 0;
|
|
height: 32px;
|
|
min-width: 32px;
|
|
min-height: 32px;
|
|
/* 纠正内容保证居中 */
|
|
.tw-relative {
|
|
height: 16px;
|
|
width: 16px;
|
|
}
|
|
.svg {
|
|
color: var(--color-text-light-1);
|
|
}
|
|
/* 带下拉菜单的按钮 */
|
|
&.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: var(--color-nav-hoverBg);
|
|
}
|
|
}
|
|
}
|
|
.item.ui.dropdown {
|
|
/* 头像菜单 */
|
|
&.navbar-user-menu {
|
|
padding: 0;
|
|
.text {
|
|
/* 不显示头像右侧的小箭头下拉菜单标识 */
|
|
> .not-mobile {
|
|
display: none;
|
|
}
|
|
/* 手机下的用户名 */
|
|
> .only-mobile {
|
|
margin-left: 12px;
|
|
font-weight: 600;
|
|
}
|
|
.navbar-avatar {
|
|
/* 头像 */
|
|
img {
|
|
border-radius: 9999px;
|
|
height: 32px;
|
|
max-height: 32px;
|
|
width: 32px;
|
|
max-width: 32px;
|
|
margin: 0 !important;
|
|
}
|
|
/* 管理员标识 */
|
|
.navbar-admin-badge {
|
|
height: 18px;
|
|
min-width: 18px;
|
|
bottom: calc(100% - 32px);
|
|
left: calc(100% - 11px);
|
|
padding: 2px;
|
|
border-color: var(--color-nav-bg); /* 锁定边框色, 避免鼠标悬浮时改变颜色 */
|
|
}
|
|
}
|
|
}
|
|
&.active {
|
|
background: unset;
|
|
}
|
|
}
|
|
}
|
|
/* 通知和计时器的圆点 */
|
|
a.item {
|
|
.notification_count,
|
|
.header-stopwatch-dot {
|
|
background-color: var(--github-bgColor-accent-emphasis);
|
|
border-radius: 9999px;
|
|
border-color: var(--color-nav-bg);
|
|
color: var(--color-white);
|
|
font-size: 9px;
|
|
font-weight: 600;
|
|
top: -15px;
|
|
left: 11px;
|
|
}
|
|
}
|
|
}
|
|
/* 用户菜单 */
|
|
.navbar-right .user-menu {
|
|
z-index: 1001;
|
|
width: var(--custom-user-menu-width, 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-menu-open {
|
|
gap: 8px;
|
|
}
|
|
.navbar-mobile-right {
|
|
gap: 8px;
|
|
> .item {
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid var(--color-light-border);
|
|
border-radius: var(--border-radius);
|
|
padding: 0;
|
|
height: 32px;
|
|
min-width: 32px;
|
|
min-height: 32px;
|
|
/* 纠正内容保证居中 */
|
|
.tw-relative {
|
|
height: 16px;
|
|
width: 16px;
|
|
}
|
|
.svg {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
|
|
export const stylesheet = [navbarRight].join("\n\n");
|