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

refactor: 重构多层级设计

Browse Source
This commit is contained in:
rbetree
2025-12-22 20:02:44 +08:00
parent 2b366ae7ca
commit a59c37d5ba
1 changed files with 95 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

213
assets/style.css
View File

@@ -999,164 +999,140 @@ body .content.expanded {
color: var(--accent-hover); color: var(--accent-hover);
} }
/* 多层级嵌套样式 */ /* 多层级嵌套样式 - 扁平化设计 */
/* 层级2: 子分类 */
.category-level-2 { /* 通用重置：移除所有嵌套层级的卡片背景和边框 */
margin: 1rem 0 0.5rem 2rem; .category-level-2,
padding: 1rem; .category-level-3,
background: linear-gradient(145deg, .category-level-4,
rgba(var(--card-bg-rgb), 0.8), .group-level-3,
rgba(var(--card-bg-rgb), 0.6)); .group-level-4 {
border-left: 3px solid var(--accent-color); background: none;
border-radius: var(--radius-lg); border: none;
width: calc(100% - 3.5rem); box-shadow: none;
padding: 0;
width: 100%;
margin: 0;
} }
/* 层级2: 子分类标题交互 */ /* 层级2: 子分类 */
.category-level-2 {
margin-top: 2rem;
margin-bottom: 1.5rem;
padding-left: 0.5rem;
border-left: none;
}
/* 层级2: 标题样式 */
.category-level-2 .category-header { .category-level-2 .category-header {
cursor: pointer; margin: 0 0 1rem 0;
border-radius: var(--radius-md); padding: 0.5rem 0;
padding: 0.5rem; background: none;
margin: -0.5rem -0.5rem 1rem -0.5rem; border-bottom: 1px solid var(--border-color);
transition: all var(--transition-normal); border-radius: 0;
} }
.category-level-2 .category-header:hover { .category-level-2 .category-header:hover {
transform: translateY(-2px); background: none;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01)); transform: none;
}
.category-level-2 .category-header:active {
transform: translateY(0);
} }
.category-level-2 .category-header h3 { .category-level-2 .category-header h3 {
font-size: 1.1rem; font-size: 1.3rem;
margin-bottom: 0; font-weight: 600;
color: var(--text-bright); color: var(--text-bright);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.6rem; gap: 0.8rem;
letter-spacing: 0.2px;
} }
.category-level-2 .category-header h3 i { .category-level-2 .category-header h3 i {
color: var(--accent-color); color: var(--accent-color);
font-size: 1.2rem; font-size: 1.2rem;
transition: all 0.3s ease; opacity: 0.9;
}
.category-level-2 .category-header:hover h3 i {
transform: scale(1.1);
color: var(--accent-hover);
} }
/* 层级3: 分组 */ /* 层级3: 分组 */
.group-level-3, .category-level-3 { .group-level-3, .category-level-3 {
margin: 0.5rem 0 0.1rem 1rem; margin-top: 1.5rem;
padding: 0.5rem; margin-bottom: 1rem;
background: rgba(var(--card-bg-rgb), 0.4); padding-left: 0.5rem;
border-left: 2px solid var(--secondary-color);
border-radius: var(--radius-md);
width: calc(100% - 1.7rem);
} }
/* 层级3: 分组/分类标题交互 */ /* 层级3: 标题样式 */
.group-level-3 .group-header, .group-level-3 .group-header,
.category-level-3 .category-header { .category-level-3 .category-header {
cursor: pointer; margin: 0 0 0.8rem 0;
border-radius: var(--radius-md); padding: 0.3rem 0;
padding: 0.4rem; background: none;
margin: -0.4rem -0.4rem 0.5rem -0.4rem;
transition: all var(--transition-normal);
} }
.group-level-3 .group-header:hover, .group-level-3 .group-header:hover,
.category-level-3 .category-header:hover { .category-level-3 .category-header:hover {
transform: translateY(-2px); background: none;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01)); transform: none;
}
.group-level-3 .group-header:active,
.category-level-3 .category-header:active {
transform: translateY(0);
} }
.group-level-3 .group-header h4, .group-level-3 .group-header h4,
.category-level-3 .category-header h4 { .category-level-3 .category-header h4 {
font-size: 1rem; font-size: 1.1rem;
margin-bottom: 0; font-weight: 500;
color: var(--text-bright); color: var(--text-color);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.6rem;
letter-spacing: 0.2px;
} }
.group-level-3 .group-header h4 i, .group-level-3 .group-header h4 i,
.category-level-3 .category-header h4 i { .category-level-3 .category-header h4 i {
color: var(--secondary-color); color: var(--text-muted);
font-size: 1.1rem; font-size: 1rem;
transition: all 0.3s ease;
} }
.group-level-3 .group-header:hover h4 i, /* 层级4: 子分组 */
.category-level-3 .category-header:hover h4 i {
transform: scale(1.1);
}
/* 层级4: 更深层次的分组 */
.group-level-4, .category-level-4 { .group-level-4, .category-level-4 {
margin: 0.6rem 0 0.2rem 1rem; margin-top: 1rem;
padding: 0.6rem; margin-bottom: 0.8rem;
background: rgba(var(--card-bg-rgb), 0.2); padding-left: 0.5rem;
border-left: 1px solid var(--tertiary-color);
border-radius: var(--radius-md);
width: calc(100% - 1.8rem);
} }
/* 层级4: 分组/分类标题交互 */ /* 层级4: 标题样式 */
.group-level-4 .group-header, .group-level-4 .group-header,
.category-level-4 .category-header { .category-level-4 .category-header {
cursor: pointer; margin: 0 0 0.6rem 0;
border-radius: var(--radius-md); padding: 0.2rem 0;
padding: 0.4rem; background: none;
margin: -0.4rem -0.4rem 0.6rem -0.4rem;
transition: all var(--transition-normal);
} }
.group-level-4 .group-header:hover, .group-level-4 .group-header:hover,
.category-level-4 .category-header:hover { .category-level-4 .category-header:hover {
transform: translateY(-2px); background: none;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01)); transform: none;
}
.group-level-4 .group-header:active,
.category-level-4 .category-header:active {
transform: translateY(0);
} }
.group-level-4 .group-header h5, .group-level-4 .group-header h5,
.category-level-4 .category-header h5 { .category-level-4 .category-header h5 {
font-size: 0.95rem; font-size: 0.95rem;
margin-bottom: 0; font-weight: 500;
color: var(--text-bright); color: var(--text-muted);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.4rem; gap: 0.5rem;
letter-spacing: 0.1px;
} }
.group-level-4 .group-header h5 i, .group-level-4 .group-header h5 i,
.category-level-4 .category-header h5 i { .category-level-4 .category-header h5 i {
color: var(--tertiary-color); font-size: 0.9rem;
font-size: 1rem; opacity: 0.7;
transition: all 0.3s ease;
} }
/* 移除悬停时的缩放效果，保持简洁 */
.category-level-2 .category-header:hover h3 i,
.group-level-3 .group-header:hover h4 i,
.category-level-3 .category-header:hover h4 i,
.group-level-4 .group-header:hover h5 i, .group-level-4 .group-header:hover h5 i,
.category-level-4 .category-header:hover h5 i { .category-level-4 .category-header:hover h5 i {
transform: scale(1.1); transform: none;
} }
/* 切换图标样式 */ /* 切换图标样式 */
@@ -1196,17 +1172,18 @@ body .content.expanded {
} }
.category-level-2.collapsed > .category-header { .category-level-2.collapsed > .category-header {
margin-bottom: -0.5rem; margin-bottom: 0;
border-bottom: none;
} }
.group-level-3.collapsed > .group-header, .group-level-3.collapsed > .group-header,
.category-level-3.collapsed > .category-header { .category-level-3.collapsed > .category-header {
margin-bottom: -0.5rem; margin-bottom: 0;
} }
.group-level-4.collapsed > .group-header, .group-level-4.collapsed > .group-header,
.category-level-4.collapsed > .category-header { .category-level-4.collapsed > .category-header {
margin-bottom: -0.4rem; margin-bottom: 0;
} }
.category.collapsed .toggle-icon i, .category.collapsed .toggle-icon i,
@@ -1255,29 +1232,28 @@ body .content.expanded {
.category-level-3 .sites-grid, .category-level-3 .sites-grid,
.group-level-4 .sites-grid, .group-level-4 .sites-grid,
.category-level-4 .sites-grid { .category-level-4 .sites-grid {
margin-top: 0.8rem; margin-top: 1rem;
gap: 0.8rem; gap: var(--spacing-md);
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* 保持与顶层一致的网格布局 */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
} }
/* 响应式设计 - 嵌套结构 */ /* 响应式设计 - 嵌套结构 */
@media (max-width: 768px) { @media (max-width: 768px) {
.category-level-2 { .category-level-2 {
margin-left: 1rem; margin-top: 1.5rem;
padding: 1rem; margin-bottom: 1rem;
width: calc(100% - 2rem); padding-left: 0;
} }
.group-level-3, .category-level-3 { .group-level-3, .category-level-3 {
margin-left: 0.5rem; margin-top: 1.2rem;
padding: 0.8rem; padding-left: 0;
width: calc(100% - 1.3rem);
} }
.group-level-4, .category-level-4 { .group-level-4, .category-level-4 {
margin-left: 0.3rem; margin-top: 1rem;
padding: 0.6rem; padding-left: 0;
width: calc(100% - 0.9rem);
} }
.category-level-2 .sites-grid, .category-level-2 .sites-grid,
@@ -1285,27 +1261,28 @@ body .content.expanded {
.category-level-3 .sites-grid, .category-level-3 .sites-grid,
.group-level-4 .sites-grid, .group-level-4 .sites-grid,
.category-level-4 .sites-grid { .category-level-4 .sites-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.6rem; gap: var(--spacing-sm);
} }
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.category { .category {
margin-left: 1rem; margin-left: 0.5rem;
padding: 1.5rem; margin-right: 0.5rem;
padding: 1rem;
} }
.category-level-2, .group-level-3, .category-level-3 { .category-level-2, .group-level-3, .category-level-3 {
margin-left: 0.5rem; margin-left: 0;
padding: 0.8rem; padding-left: 0;
width: calc(100% - 1rem); width: 100%;
} }
.group-level-4, .category-level-4 { .group-level-4, .category-level-4 {
margin-left: 0.3rem; margin-left: 0;
padding: 0.6rem; padding-left: 0;
width: calc(100% - 0.6rem); width: 100%;
} }
.category-level-2 .sites-grid, .category-level-2 .sites-grid,