oooooii-npm/webook
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(sidebar): 优化侧边栏UI样式与文件夹图标

Browse Source
This commit is contained in:
wu2kong
2026-05-30 03:08:10 +08:00
parent cf47e96b1a
commit 1f80f78ab6
2 changed files with 17 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app.js
+1 -1
View File
@@ -242,7 +242,7 @@
<li class="nav-dir collapsed" data-path="${escapeHtml(item.path)}">
<div class="nav-dir-header" data-dir-path="${escapeHtml(item.path)}">
<span class="nav-dir-arrow">▾</span>
<span class="nav-dir-icon" aria-hidden="true"></span>
<span class="nav-dir-icon" aria-hidden="true"><i data-lucide="folder" aria-hidden="true"></i></span>
<span class="nav-dir-name">${escapeHtml(item.name)}</span>
</div>
<div class="nav-dir-children">
public/style.css
+16 -30
View File
@@ -98,8 +98,8 @@ a:hover { color: var(--brand-strong); }
color: #fff; font-weight: 700; box-shadow: var(--shadow-sm);
}
.sidebar-brand-text { display: grid; line-height: 1.3; }
.sidebar-brand-text strong { font-size: 15px; }
.sidebar-brand-text small { color: var(--text-muted); font-size: 12px; }
.sidebar-brand-text strong { font-size: 16px; }
.sidebar-brand-text small { color: var(--text-muted); font-size: 12px; margin-top: 4px; }
.search-box input {
width: 100%; border: 1px solid var(--border);
border-radius: 999px; padding: 11px 14px;
@@ -112,46 +112,32 @@ a:hover { color: var(--brand-strong); }
.sidebar-nav { flex: 1; overflow: auto; padding: 4px 2px 0 0; }
.nav-tree { list-style: none; margin: 0; padding: 0; }
.nav-tree ul { list-style: none; margin: 0; padding: 0; }
.nav-dir { margin-bottom: 4px; }
.nav-dir { margin-bottom: 4px; letter-spacing: 0.09em; }
.nav-dir-header {
display: flex; align-items: center; gap: 8px;
padding: 10px 12px; border-radius: 12px;
color: var(--text-muted); font-size: 13px; font-weight: 600;
color: var(--text-muted); font-size: 15px; font-weight: 700;
cursor: pointer; user-select: none;
}
.nav-dir-header:hover { background: var(--bg-soft); color: var(--text); }
.nav-dir-arrow { width: 14px; text-align: center; transition: transform var(--transition); color: var(--text-soft); }
.nav-dir-arrow { display: none; }
.nav-dir.collapsed .nav-dir-arrow { transform: rotate(-90deg); }
.nav-dir-icon {
width: 12px;
height: 12px;
border-radius: 4px;
border: 1.5px solid currentColor;
position: relative;
flex: 0 0 auto;
opacity: 0.75;
}
.nav-dir-icon::after {
content: '';
position: absolute;
right: -1px;
top: -1px;
width: 4px;
height: 4px;
border-top: 1.5px solid currentColor;
border-right: 1.5px solid currentColor;
border-radius: 0 4px 0 0;
transform: skew(12deg);
}
.nav-dir-icon { display: none; }
.nav-dir-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-dir-children { overflow: hidden; padding-left: 10px; }
.nav-dir-children {
overflow: hidden;
margin-left: 14px;
padding-left: 12px;
border-left: 1px solid var(--border);
}
.nav-dir.collapsed .nav-dir-children { max-height: 0 !important; }
.nav-file {
display: flex; align-items: center; gap: 10px;
margin: 2px 0; padding: 10px 12px 10px 28px;
margin: 2px 0; padding: 10px 15px 10px 12px;
border-radius: 12px; color: var(--text);
cursor: pointer; border: 1px solid transparent;
letter-spacing: 0.09em;
}
.nav-file:hover { background: var(--bg-soft); }
.nav-file.active {
@@ -160,8 +146,8 @@ a:hover { color: var(--brand-strong); }
box-shadow: var(--active-file-shadow);
}
.nav-file-icon {
width: 9px;
height: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
opacity: 0.45;