chill/menav
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

refactor: 统一样式变量并规范过渡动画

Browse Source
This commit is contained in:
rbetree
2025-12-22 16:39:04 +08:00
parent 670e73e93c
commit ecc5e287b5
1 changed files with 120 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
assets/style.css
View File

@@ -27,6 +27,30 @@
--gradient-color-simple: linear-gradient(135deg, #4a9eff 0%, #a855f7 100%);
--sidebar-width: 240px;
--sidebar-collapsed-width: 60px;
/* Spacing System */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--spacing-2xl: 3rem;
/* Border Radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-full: 9999px;
/* Transitions */
--transition-fast: 0.2s ease;
--transition-normal: 0.3s ease;
--transition-slow: 0.5s ease;
--transition-bounce: cubic-bezier(0.4, 0, 0.2, 1);
/* RGB Values for opacity manipulation */
--card-bg-rgb: 47, 48, 53;
}
/* 浅色主题：预加载阶段同样应用变量，避免读取默认暗色值 */
@@ -56,6 +80,7 @@ body.light-theme {
--white-color: #ffffff;
--gradient-color: linear-gradient(135deg, #4a9eff 0%, #a855f7 50%, #ff6b6b 100%);
--gradient-color-simple: linear-gradient(135deg, #4a9eff 0%, #a855f7 100%);
--card-bg-rgb: 240, 240, 235;
}
/* 预加载主题 - 在JS完全加载前显示正确的主题 */
@@ -85,18 +110,19 @@ html.preload * {
/* 主题切换按钮 */
.theme-toggle {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 40px;
height: 40px;
border-radius: 10px;
bottom: var(--spacing-xl);
right: var(--spacing-xl);
width: 2.5rem;
height: 2.5rem;
border-radius: var(--radius-md);
background: linear-gradient(145deg, var(--site-card-bg-gradient-1), var(--site-card-bg-gradient-2));
color: var(--text-bright);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transition: all var(--transition-normal);
transition-timing-function: var(--transition-bounce);
z-index: 100;
box-shadow: 0 4px 16px var(--shadow-color);
border: 1px solid var(--border-color);
@@ -154,7 +180,7 @@ html {
/* 搜索高亮样式 */
.highlight {
background-color: var(--highlight-bg);
border-radius: 2px;
border-radius: var(--radius-sm);
padding: 0 2px;
font-weight: bold;
color: var(--text-color);
@@ -193,14 +219,14 @@ body.loaded .layout {
.mobile-buttons {
display: none;
position: fixed;
top: 1rem;
top: var(--spacing-md);
left: 0;
right: 0;
width: 100%;
padding: 0 1rem;
padding: 0 var(--spacing-md);
justify-content: space-between;
z-index: 900; /* 修改z-index，确保按钮层级高于基础内容但低于弹出面板 */
pointer-events: none; /* 防止按钮区域阻挡其他内容 */
z-index: 900;
pointer-events: none;
}
.menu-toggle,
@@ -208,16 +234,16 @@ body.loaded .layout {
background: var(--sidebar-bg);
border: none;
color: var(--text-color);
width: 40px;
height: 40px;
border-radius: 10px;
width: 2.5rem;
height: 2.5rem;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
transition: all 0.25s var(--transition-bounce);
box-shadow: 0 2px 8px var(--shadow-color);
pointer-events: auto; /* 恢复按钮的点击事件 */
pointer-events: auto;
}
.menu-toggle:hover,
@@ -264,19 +290,17 @@ body.loaded .layout {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
height: 100vh; /* 确保高度固定 */
/* 使用Grid布局分为三个部分 */
height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header"
"content"
"footer";
/* 应用自定义滚动条样式 */
scrollbar-width: thin; /* Firefox */
scrollbar-color: var(--scrollbar-color) transparent; /* Firefox */
overflow-y: hidden; /* 防止整个侧边栏滚动 */
transition: background-color 0.3s ease;
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-color) transparent;
overflow-y: hidden;
transition: background-color var(--transition-normal);
}
/* 侧边栏折叠状态 */
@@ -291,7 +315,7 @@ body.loaded .layout {
justify-content: center;
display: flex;
align-items: center;
height: 60px; /* 确保与展开状态高度一致 */
height: 3.75rem; /* 确保与展开状态高度一致 */
margin-bottom: 0.8rem; /* 收起态同样拉开与按钮的间距 */
}
@@ -327,7 +351,7 @@ body.loaded .layout {
justify-content: space-between;
overflow: hidden; /* 防止内容溢出 */
position: relative; /* 添加相对定位，作为按钮的参考 */
height: 60px; /* 固定高度，确保两种状态下一致 */
height: 3.75rem; /* 固定高度 60px */
margin-bottom: 0.8rem; /* 与下方按钮区域拉开间距 */
transition: padding 0.3s ease; /* 添加padding过渡，避免突变 */
}
@@ -484,12 +508,12 @@ body.loaded .layout {
.sidebar.collapsed .nav-item {
padding: 0;
justify-content: center;
width: 44px; /* 增大按钮方块尺寸 */
height: 44px; /* 增大按钮方块尺寸 */
width: 2.75rem; /* 增大按钮方块尺寸 44px */
height: 2.75rem; /* 增大按钮方块尺寸 44px */
text-align: center;
margin-left: auto;
margin-right: auto;
border-radius: 10px; /* 略增圆角 */
border-radius: var(--radius-md); /* 略增圆角 */
display: flex;
align-items: center;
box-sizing: border-box;
@@ -524,29 +548,28 @@ body.loaded .layout {
.nav-item {
display: flex;
align-items: center;
height: 44px; /* 增大按钮高度 */
padding: 0 0.9rem; /* 略增左右内边距 */
height: 44px;
padding: 0 0.9rem;
color: var(--nav-item-color);
text-decoration: none;
border-radius: 10px; /* 略增圆角，与增大高度协调 */
/* 限定可过渡属性，避免折叠/展开时Y向抖动 */
transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
border-radius: var(--radius-md);
transition: background-color var(--transition-normal), color var(--transition-normal), box-shadow var(--transition-normal);
position: relative;
}
.nav-item .icon-container {
width: 24px;
height: 100%; /* 与按钮高度一致，垂直对齐更稳定 */
height: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-right: 1rem;
transition: margin 0.3s ease;
margin-right: var(--spacing-md);
transition: margin var(--transition-normal);
}
.nav-item .nav-text {
flex: 1;
transition: opacity 0.3s ease, transform 0.3s ease;
transition: opacity var(--transition-normal), transform var(--transition-normal);
white-space: nowrap;
overflow: hidden;
}
@@ -555,7 +578,7 @@ body.loaded .layout {
font-size: 0.9rem;
opacity: 0.6;
margin-left: 0.5rem;
transition: all 0.3s ease;
transition: all var(--transition-normal);
}
.nav-item:hover {
@@ -637,17 +660,18 @@ body .content.expanded {
.category-toggle {
position: fixed;
bottom: 5rem;
right: 2rem;
width: 40px;
height: 40px;
border-radius: 10px;
right: var(--spacing-xl);
width: 2.5rem;
height: 2.5rem;
border-radius: var(--radius-md);
background: linear-gradient(145deg, var(--site-card-bg-gradient-1), var(--site-card-bg-gradient-2));
color: var(--text-bright);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transition: all var(--transition-normal);
transition-timing-function: var(--transition-bounce);
z-index: 100;
box-shadow: 0 4px 16px var(--shadow-color);
border: 1px solid var(--border-color);
@@ -675,8 +699,8 @@ body .content.expanded {
width: 100%;
max-width: 600px;
background-color: var(--sidebar-bg);
border-radius: 12px;
transition: background-color 0.3s ease;
border-radius: var(--radius-lg);
transition: background-color var(--transition-normal);
}
.search-box::after {
@@ -689,8 +713,8 @@ body .content.expanded {
height: 6px;
border-radius: 50%;
opacity: 0;
transition: all 0.3s ease;
pointer-events: none; /* 不阻挡点击，避免遮住图标可点击区域 */
transition: all var(--transition-normal);
pointer-events: none;
}
.search-box.has-results::after {
@@ -705,13 +729,13 @@ body .content.expanded {
.search-box input {
width: 100%;
padding: 1rem 6rem 1rem 1.5rem; /* 扩大右侧内边距，给左移的点留空间 */
padding: var(--spacing-md) 6rem var(--spacing-md) var(--spacing-lg); /* 扩大右侧内边距，给左移的点留空间 */
border: none;
border-radius: 12px;
border-radius: var(--radius-lg);
background-color: transparent;
color: var(--text-color);
font-size: 1rem;
transition: all 0.3s ease;
transition: all var(--transition-normal);
box-shadow: 0 2px 8px var(--shadow-color);
}
@@ -776,7 +800,7 @@ body .content.expanded {
top: calc(100% + 5px);
right: 1rem;
background-color: var(--sidebar-bg);
border-radius: 10px;
border-radius: var(--radius-md);
box-shadow: 0 4px 15px var(--shadow-color);
display: none;
z-index: 100;
@@ -906,26 +930,26 @@ body .content.expanded {
/* 分类样式 */
.category {
background: linear-gradient(145deg, var(--card-bg-gradient-1), var(--card-bg-gradient-2));
border-radius: 16px;
padding: 1.2rem;
margin: 0 1rem 1.5rem 2rem;
border-radius: var(--radius-xl);
padding: var(--spacing-lg);
margin: 0 var(--spacing-md) var(--spacing-lg) var(--spacing-xl);
width: calc(100% - 3rem);
max-width: 1300px;
position: relative;
z-index: 1;
opacity: 1; /* 移除进入时的浮动/淡入动画，避免切页时跳动 */
opacity: 1;
box-shadow: 0 4px 20px var(--shadow-color);
border: 1px solid var(--border-color);
transition: background 0.3s ease, box-shadow 0.3s ease;
transition: background var(--transition-normal), box-shadow var(--transition-normal);
}
/* 分类标题容器 - 添加交互效果 */
.category-header {
cursor: pointer;
border-radius: 8px;
border-radius: var(--radius-md);
padding: 0.5rem;
margin: -0.5rem -0.5rem 1.5rem -0.5rem;
transition: all 0.3s ease;
transition: all var(--transition-normal);
}
.category-header:hover {
@@ -968,17 +992,17 @@ body .content.expanded {
rgba(var(--card-bg-rgb), 0.8),
rgba(var(--card-bg-rgb), 0.6));
border-left: 3px solid var(--accent-color);
border-radius: 12px;
border-radius: var(--radius-lg);
width: calc(100% - 3.5rem);
}
/* 层级2: 子分类标题交互 */
.category-level-2 .category-header {
cursor: pointer;
border-radius: 8px;
border-radius: var(--radius-md);
padding: 0.5rem;
margin: -0.5rem -0.5rem 1rem -0.5rem;
transition: all 0.3s ease;
transition: all var(--transition-normal);
}
.category-level-2 .category-header:hover {
@@ -1017,7 +1041,7 @@ body .content.expanded {
padding: 0.5rem;
background: rgba(var(--card-bg-rgb), 0.4);
border-left: 2px solid var(--secondary-color);
border-radius: 8px;
border-radius: var(--radius-md);
width: calc(100% - 1.7rem);
}
@@ -1025,10 +1049,10 @@ body .content.expanded {
.group-level-3 .group-header,
.category-level-3 .category-header {
cursor: pointer;
border-radius: 8px;
border-radius: var(--radius-md);
padding: 0.4rem;
margin: -0.4rem -0.4rem 0.5rem -0.4rem;
transition: all 0.3s ease;
transition: all var(--transition-normal);
}
.group-level-3 .group-header:hover,
@@ -1071,7 +1095,7 @@ body .content.expanded {
padding: 0.6rem;
background: rgba(var(--card-bg-rgb), 0.2);
border-left: 1px solid var(--tertiary-color);
border-radius: 6px;
border-radius: var(--radius-md);
width: calc(100% - 1.8rem);
}
@@ -1079,10 +1103,10 @@ body .content.expanded {
.group-level-4 .group-header,
.category-level-4 .category-header {
cursor: pointer;
border-radius: 6px;
border-radius: var(--radius-md);
padding: 0.4rem;
margin: -0.4rem -0.4rem 0.6rem -0.4rem;
transition: all 0.3s ease;
transition: all var(--transition-normal);
}
.group-level-4 .group-header:hover,
@@ -1291,11 +1315,11 @@ body .content.expanded {
/* 网站卡片样式 */
.site-card {
background: linear-gradient(145deg, var(--site-card-bg-gradient-1), var(--site-card-bg-gradient-2));
border-radius: 12px;
padding: 1.2rem;
border-radius: var(--radius-lg);
padding: var(--spacing-md);
text-decoration: none;
color: inherit;
transition: all 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
transition: all var(--transition-normal);
display: flex;
flex-direction: column;
align-items: center;
@@ -1328,8 +1352,8 @@ body .content.expanded {
display: inline-block;
width: 1.8rem;
height: 1.8rem;
margin-bottom: 1rem;
border-radius: 4px;
margin-bottom: var(--spacing-md);
border-radius: var(--radius-sm);
object-fit: cover;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
@@ -1339,8 +1363,8 @@ body .content.expanded {
display: inline-block;
width: 1.8rem;
height: 1.8rem;
margin-bottom: 1rem;
border-radius: 4px;
margin-bottom: var(--spacing-md);
border-radius: var(--radius-sm);
flex-shrink: 0;
vertical-align: middle;
text-align: center;
@@ -1354,7 +1378,7 @@ body .content.expanded {
display: inline-block;
width: 1.8rem;
height: 1.8rem;
margin-bottom: 1rem;
margin-bottom: var(--spacing-md);
position: relative;
vertical-align: middle;
}
@@ -1472,11 +1496,12 @@ body .content.expanded {
.add-site-btn {
background: linear-gradient(145deg, var(--site-card-bg-gradient-1), var(--site-card-bg-gradient-2));
border: 2px dashed var(--border-color);
border-radius: 14px;
border-radius: var(--radius-lg);
padding: 1.5rem;
color: var(--text-muted);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transition: all var(--transition-normal);
transition-timing-function: var(--transition-bounce);
display: flex;
flex-direction: column;
align-items: center;
@@ -1524,8 +1549,8 @@ body .content.expanded {
.modal-content {
background-color: var(--sidebar-bg);
border-radius: 16px;
padding: 2.2rem;
border-radius: var(--radius-xl);
padding: var(--spacing-xl);
width: 90%;
max-width: 520px;
position: relative;
@@ -1557,9 +1582,9 @@ body .content.expanded {
color: var(--text-muted);
cursor: pointer;
font-size: 1.5rem;
padding: 0.5rem;
transition: all 0.3s ease;
border-radius: 8px;
padding: var(--spacing-sm);
transition: all var(--transition-normal);
border-radius: var(--radius-md);
}
.close-modal:hover {
@@ -1590,11 +1615,11 @@ body .content.expanded {
.form-group input, .form-group select {
background-color: var(--secondary-bg);
border: 1px solid transparent;
border-radius: 10px;
padding: 0.9rem 1.2rem;
border-radius: var(--radius-md);
padding: var(--spacing-md) var(--spacing-lg);
color: var(--text-color);
font-size: 1rem;
transition: all 0.3s ease;
transition: all var(--transition-normal);
box-shadow: 0 2px 6px var(--shadow-color);
}
@@ -1617,14 +1642,15 @@ body .content.expanded {
}
.btn {
padding: 0.9rem 1.8rem;
padding: var(--spacing-md) var(--spacing-xl);
border: none;
border-radius: 10px;
border-radius: var(--radius-md);
cursor: pointer;
font-size: 1rem;
font-weight: 500;
letter-spacing: 0.3px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transition: all var(--transition-normal);
transition-timing-function: var(--transition-bounce);
box-shadow: 0 2px 6px var(--shadow-color);
}
@@ -1797,18 +1823,18 @@ body .content.expanded {
/* 分类样式优化 */
.category {
margin: 0 0.15rem 1.5rem 0.15rem;
padding: 1.1rem;
width: calc(100% - 0.3rem);
margin: 0 var(--spacing-xs) var(--spacing-lg) var(--spacing-xs);
padding: var(--spacing-md);
width: calc(100% - var(--spacing-sm));
}
.sites-grid {
gap: 0.7rem;
gap: var(--spacing-sm);
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.site-card {
padding: 0.9rem 0.7rem;
padding: var(--spacing-md) var(--spacing-sm);
}
.site-card i {
@@ -1841,7 +1867,7 @@ body .content.expanded {
/* 移动端滚动进度条调整 */
.scroll-progress {
height: 4px; /* 移动端略粗一些 */
height: var(--radius-sm); /* 移动端略粗一些 */
}
.sidebar .submenu {