xieyinlu/new-markdown
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

style: 收起按钮与选中态统一（侧栏页签改 6px 圆角矩形、顶部菜单选中底色与侧栏一致）

Browse Source 
收起按钮此前被 .sidebar-tabs button 的 flex:1 与胶囊圆角压过长成宽胶囊，
改为 26px 方形图标钮；侧栏页签选中效果对齐顶部菜单（6px 圆角），选中
背景色保持 --accent-weak；顶部菜单 .open 背景由 --hover 改为 --accent-weak，
与侧栏选中同色（悬停仍为 --hover）。
This commit is contained in:
Muse
2026-11-14 15:25:27 +08:00
parent 2d0843dd97
commit 839b399a0d
1 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/styles.css
View File

@@ -45,7 +45,8 @@ button { font: inherit; color: inherit; }
.menubar { display: flex; padding: 2px 6px; background: var(--bg); border-bottom: 1px solid var(--border); user-select: none; position: relative; z-index: 40; }
.menu { position: relative; }
.menu-title { border: 0; background: transparent; padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.menu-title:hover, .menu-title.open { background: var(--hover); }
.menu-title:hover { background: var(--hover); }
.menu-title.open { background: var(--accent-weak); }
.menu-dropdown { position: absolute; top: 100%; left: 0; min-width: 250px; background: var(--bg-editor); border: 1px solid var(--border); border-radius: 8px; padding: 5px; box-shadow: 0 8px 24px rgba(0,0,0,0.13); }
.menu-item { display: flex; align-items: center; width: 100%; border: 0; background: transparent; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; text-align: left; }
.menu-item:hover:not(:disabled) { background: var(--accent-weak); }
@@ -70,8 +71,8 @@ button { font: inherit; color: inherit; }
.context-menu { position: fixed; z-index: 90; background: var(--bg-editor); border: 1px solid var(--border); border-radius: 8px; padding: 5px; box-shadow: 0 8px 24px rgba(0,0,0,0.13); display: flex; flex-direction: column; min-width: 170px; }
.context-menu button:disabled { opacity: 0.45; cursor: default; }
.context-menu button:disabled:hover { background: transparent; }
.sidebar-collapse { margin-left: auto; background: transparent; border: 0; color: var(--text-dim); cursor: pointer; display: flex; align-items: center; padding: 4px 6px; border-radius: 6px; }
.sidebar-collapse:hover { color: var(--text); background: var(--accent-weak); }
.sidebar-tabs .sidebar-collapse { flex: none; width: 26px; height: 26px; margin-left: auto; background: transparent; border: 0; color: var(--text-dim); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 6px; }
.sidebar-tabs .sidebar-collapse:hover { color: var(--text); background: var(--hover); }
.sidebar-expand { position: absolute; left: 10px; top: 10px; z-index: 35; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 7px; color: var(--text-dim); cursor: pointer; }
.sidebar-expand:hover { color: var(--text); border-color: var(--accent); }
.source-toggle { position: absolute; right: 14px; bottom: 14px; z-index: 35; background: var(--bg-panel); color: var(--text-dim); border: 1px solid var(--border); border-radius: 999px; padding: 5px 13px; font-size: 12.5px; cursor: pointer; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.10); }
@@ -84,7 +85,7 @@ button { font: inherit; color: inherit; }
.main { flex: 1; display: flex; min-height: 0; }
.sidebar { flex: 1; display: flex; flex-direction: column; background: var(--bg-panel); border-right: 1px solid var(--border); min-width: 0; }
.sidebar-tabs { display: flex; gap: 4px; padding: 8px 10px 4px; }
.sidebar-tabs button { flex: 1; border: 0; background: transparent; padding: 5px 0; border-radius: 999px; cursor: pointer; font-size: 13px; color: var(--text-dim); }
.sidebar-tabs button { flex: 1; border: 0; background: transparent; padding: 5px 0; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--text-dim); }
.sidebar-tabs button.active { background: var(--accent-weak); color: var(--text); }
.outline, .filetree { overflow-y: auto; padding: 6px 8px 16px; }
.outline-item { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 4px 6px; border-radius: 6px; cursor: pointer; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }