feat: 优化各层级折叠与标题样式
- 优化完善各层级下的折叠样式;桌面端隐藏,悬浮动画等 - 优化各层级标题;固定标题前的图标宽度,对齐标题
This commit is contained in:
@@ -1061,6 +1061,21 @@ body .content.expanded {
|
|||||||
transition: all var(--transition-normal);
|
transition: all var(--transition-normal);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 标题前图标固定宽度:避免不同图标宽度导致标题文本不对齐 */
|
||||||
|
.category-header [data-editable="category-name"] > i,
|
||||||
|
.group-header [data-editable="group-name"] > i {
|
||||||
|
width: 1.25em;
|
||||||
|
min-width: 1.25em;
|
||||||
|
text-align: center;
|
||||||
|
flex: 0 0 1.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 分组标题容器:与分类保持一致的悬浮动效基础 */
|
||||||
|
.group-header {
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
transition: all var(--transition-normal);
|
||||||
|
}
|
||||||
|
|
||||||
/* 仅可折叠的标题显示交互态 */
|
/* 仅可折叠的标题显示交互态 */
|
||||||
.category-header[data-toggle="category"],
|
.category-header[data-toggle="category"],
|
||||||
.group-header[data-toggle="group"] {
|
.group-header[data-toggle="group"] {
|
||||||
@@ -1073,10 +1088,19 @@ body .content.expanded {
|
|||||||
background: linear-gradient(145deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
|
background: linear-gradient(145deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.group-header[data-toggle="group"]:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
background: linear-gradient(145deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
|
||||||
|
}
|
||||||
|
|
||||||
.category-header[data-toggle="category"]:active {
|
.category-header[data-toggle="category"]:active {
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.group-header[data-toggle="group"]:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
.category h2 {
|
.category h2 {
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
@@ -1161,12 +1185,6 @@ body .content.expanded {
|
|||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-level-3 .group-header:hover,
|
|
||||||
.category-level-3 .category-header:hover {
|
|
||||||
background: none;
|
|
||||||
transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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: 1rem;
|
||||||
@@ -1213,12 +1231,6 @@ body .content.expanded {
|
|||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-level-4 .group-header:hover,
|
|
||||||
.category-level-4 .category-header:hover {
|
|
||||||
background: none;
|
|
||||||
transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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.9rem;
|
font-size: 0.9rem;
|
||||||
@@ -1275,13 +1287,16 @@ body .content.expanded {
|
|||||||
color: var(--accent-color);
|
color: var(--accent-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 分组折叠图标:桌面端默认隐藏,悬停/收起时显示,避免按钮过多 */
|
/* 分类/分组折叠图标:桌面端默认隐藏,悬停/收起时显示,避免按钮过多 */
|
||||||
@media (hover: hover) and (pointer: fine) {
|
@media (hover: hover) and (pointer: fine) {
|
||||||
|
.category-header .toggle-icon,
|
||||||
.group-header .toggle-icon {
|
.group-header .toggle-icon {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 0.2s ease;
|
transition: opacity 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.category-header[data-toggle="category"]:hover .toggle-icon,
|
||||||
|
.category.collapsed > .category-header .toggle-icon,
|
||||||
.group-header[data-toggle="group"]:hover .toggle-icon,
|
.group-header[data-toggle="group"]:hover .toggle-icon,
|
||||||
.group.collapsed > .group-header .toggle-icon {
|
.group.collapsed > .group-header .toggle-icon {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|||||||
@@ -6,24 +6,26 @@
|
|||||||
data-level="{{#if level}}{{level}}{{else}}1{{/if}}"
|
data-level="{{#if level}}{{level}}{{else}}1{{/if}}"
|
||||||
data-container="categories">
|
data-container="categories">
|
||||||
|
|
||||||
<div class="category-header"{{#if level}}{{#ifCond level '===' 2}} data-toggle="category"{{/ifCond}}{{else}}{{#unless subcategories}}{{#unless groups}} data-toggle="category"{{/unless}}{{/unless}}{{/if}}>
|
<div class="category-header"{{#if subcategories}} data-toggle="category"{{else}}{{#if groups}} data-toggle="category"{{else}}{{#if sites}} data-toggle="category"{{/if}}{{/if}}{{/if}}>
|
||||||
<h{{#if level}}{{add level 1}}{{else}}2{{/if}} data-editable="category-name">
|
<h{{#if level}}{{add level 1}}{{else}}2{{/if}} data-editable="category-name">
|
||||||
<i class="{{icon}}"></i>
|
<i class="{{icon}}"></i>
|
||||||
{{name}}
|
{{name}}
|
||||||
{{#if level}}
|
{{#if subcategories}}
|
||||||
{{#ifCond level '===' 2}}
|
<span class="toggle-icon">
|
||||||
<span class="toggle-icon">
|
<i class="fas fa-chevron-down"></i>
|
||||||
<i class="fas fa-chevron-down"></i>
|
</span>
|
||||||
</span>
|
|
||||||
{{/ifCond}}
|
|
||||||
{{else}}
|
{{else}}
|
||||||
{{#unless subcategories}}
|
{{#if groups}}
|
||||||
{{#unless groups}}
|
|
||||||
<span class="toggle-icon">
|
<span class="toggle-icon">
|
||||||
<i class="fas fa-chevron-down"></i>
|
<i class="fas fa-chevron-down"></i>
|
||||||
</span>
|
</span>
|
||||||
{{/unless}}
|
{{else}}
|
||||||
{{/unless}}
|
{{#if sites}}
|
||||||
|
<span class="toggle-icon">
|
||||||
|
<i class="fas fa-chevron-down"></i>
|
||||||
|
</span>
|
||||||
|
{{/if}}
|
||||||
|
{{/if}}
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</h{{#if level}}{{add level 1}}{{else}}2{{/if}}>
|
</h{{#if level}}{{add level 1}}{{else}}2{{/if}}>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user