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

Improve breadcrumb and code block controls

Browse Source
This commit is contained in:
wu2kong
2026-05-29 15:08:44 +08:00
parent cf2d5fc77b
commit eb73d41d35
7 changed files with 465 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/style.css
+124 -13
View File
@@ -14,6 +14,10 @@
--brand-soft: rgba(58, 111, 247, 0.12);
--code-bg: #0f172a;
--code-fg: #e5edf9;
--code-toolbar-bg: #f4f7fb;
--code-panel-border: rgba(148, 163, 184, 0.24);
--code-panel-shadow: 0 18px 40px rgba(148, 163, 184, 0.18);
--code-line-number: #94a3b8;
--shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.08);
--shadow-md: 0 10px 28px rgba(15, 23, 42, 0.08);
--shadow-sm: 0 4px 16px rgba(15, 23, 42, 0.06);
@@ -51,6 +55,11 @@ a:hover { color: var(--brand-strong); }
display: grid;
grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
height: 100vh;
transition: grid-template-columns var(--transition);
}
.app.sidebar-collapsed {
grid-template-columns: 0 minmax(0, 1fr);
}
.sidebar {
@@ -63,8 +72,18 @@ a:hover { color: var(--brand-strong); }
background: var(--bg);
backdrop-filter: none;
box-shadow: none;
overflow: hidden;
transition:
margin-left var(--transition),
opacity var(--transition),
visibility var(--transition);
}
.sidebar.collapsed {
margin-left: calc(-1 * var(--sidebar-width));
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.sidebar.collapsed { margin-left: calc(-1 * var(--sidebar-width)); }
.sidebar-header { display: grid; gap: 14px; padding-bottom: 14px; }
.sidebar-brand {
display: flex; align-items: center; gap: 12px;
@@ -167,14 +186,41 @@ a:hover { color: var(--brand-strong); }
border-bottom: 0;
backdrop-filter: none;
}
.toolbar-breadcrumb { display: flex; align-items: center; gap: 10px; min-width: 0; }
.toolbar-breadcrumb {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
flex: 1;
overflow: hidden;
}
.toolbar-kicker {
display: inline-flex; align-items: center;
padding: 5px 10px; border-radius: 999px;
background: var(--brand-soft); color: var(--brand); font-size: 12px; font-weight: 700;
flex: 0 0 auto;
}
.toolbar-divider,
.toolbar-segment {
color: var(--text-muted);
font-size: 14px;
flex: 0 1 auto;
min-width: 0;
}
.toolbar-divider {
flex: 0 0 auto;
}
.toolbar-segment {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.toolbar-segment.is-current {
color: var(--text);
font-weight: 600;
flex-shrink: 0;
max-width: min(42vw, 420px);
}
.toolbar-divider, .toolbar-title { color: var(--text-muted); font-size: 14px; }
.toolbar-title { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toolbar-actions { display: flex; align-items: center; gap: 8px; }
.theme-select-wrap {
display: inline-flex;
@@ -295,15 +341,70 @@ a:hover { color: var(--brand-strong); }
padding: 0.18em 0.42em; border-radius: 8px;
background: rgba(148, 163, 184, 0.14); color: var(--text);
}
.article-body pre {
margin: 1.2em 0; padding: 18px 20px;
border-radius: 20px; overflow: auto;
background: var(--code-bg) !important; color: var(--code-fg);
border: 1px solid rgba(148, 163, 184, 0.12);
box-shadow: var(--shadow-md);
.code-block-shell {
position: relative;
margin: 1.2em 0;
}
.article-body pre code {
padding: 0; background: transparent; color: inherit; font-size: 0.92rem;
.article-body .code-block-shell pre {
margin: 0;
padding: 52px 20px 18px;
border-radius: 20px;
overflow: auto;
color: var(--code-fg);
border: 1px solid var(--code-panel-border);
box-shadow: var(--code-panel-shadow);
background:
radial-gradient(circle at 24px 18px, #ff5f57 0 5px, transparent 5.5px),
radial-gradient(circle at 44px 18px, #febc2e 0 5px, transparent 5.5px),
radial-gradient(circle at 64px 18px, #28c840 0 5px, transparent 5.5px),
linear-gradient(180deg, var(--code-toolbar-bg) 0 36px, var(--code-bg) 36px 100%) !important;
}
.article-body .code-block-shell pre code {
padding: 0;
background: transparent;
color: inherit;
font-size: 0.92rem;
line-height: 1.6;
}
.code-copy-btn {
position: absolute;
top: 10px;
right: 12px;
height: 28px;
padding: 0 10px;
border: 1px solid var(--code-panel-border);
border-radius: 9px;
background: rgba(255, 255, 255, 0.78);
color: var(--text-muted);
font: inherit;
font-size: 12px;
font-weight: 700;
line-height: 1;
cursor: pointer;
backdrop-filter: blur(10px);
opacity: 0;
pointer-events: none;
transition: opacity var(--transition), color var(--transition), background var(--transition), border-color var(--transition);
}
.code-copy-btn:hover {
color: var(--text);
background: rgba(255, 255, 255, 0.94);
border-color: var(--border-strong);
}
.code-block-shell:hover .code-copy-btn,
.code-block-shell:focus-within .code-copy-btn {
opacity: 1;
pointer-events: auto;
}
[data-color-mode="light"] .article-body .code-block-shell pre .hljs-ln-n {
color: var(--code-line-number);
}
[data-color-mode="dark"] .code-copy-btn {
background: rgba(15, 23, 42, 0.78);
color: var(--text-muted);
}
[data-color-mode="dark"] .code-copy-btn:hover {
background: rgba(30, 41, 59, 0.94);
}
.article-body table {
width: 100%; margin: 1.2em 0; border-collapse: collapse;
@@ -404,11 +505,17 @@ a:hover { color: var(--brand-strong); }
.sidebar {
position: fixed; inset: 0 auto 0 0; z-index: 220;
width: min(86vw, 320px); transform: translateX(-100%);
visibility: visible;
opacity: 1;
transition: transform 220ms ease;
box-shadow: var(--shadow-lg);
}
.sidebar.mobile-visible { transform: translateX(0); }
.sidebar.collapsed { margin-left: 0; }
.sidebar.collapsed {
margin-left: 0;
visibility: visible;
opacity: 1;
}
.content-toolbar { padding-left: 18px; }
.toolbar-breadcrumb { min-width: 0; }
.theme-select-wrap { max-width: 150px; }
@@ -432,6 +539,10 @@ a:hover { color: var(--brand-strong); }
width: 92px;
padding: 0 10px;
}
.code-copy-btn {
opacity: 1;
pointer-events: auto;
}
}
[data-doc-theme="toc"] .content {