/**
* Trilium 分享页 Typora 经典浅色风格美化
* 版本: 2026.1.28 (修复横向滚动条问题)
* 作者：at+gemini+豆包
* 布局策略: 流式布局 + Typora 浅色变量驱动 (修复宽度溢出)
*/
/* ==========================================================================
第一层：原子变量 (替换为 Typora 经典浅色配色)
========================================================================== */
:root {
/* --- Typora 基础背景：米白/纯白 --- */
--bg-page: #ffffff; /* Typora 主底色，纯白 */
--bg-card: #fbfbfa; /* 侧边栏/容器背景，浅米色 */
--bg-main: #ffffff; /* 正文区域背景 */
/* --- Typora 文字：深灰/黑色 --- */
--text-main: #333333; /* 主文字，深灰（Typora 经典） */
--text-muted: #666666; /* 辅助文字，中灰 */
/* --- 交互与高亮 (Typora 蓝色) --- */
--link-color: #2a7fff; /* Typora 经典链接蓝 */
--link-hover-color: #0056d2; /* 悬停时深蓝 */
--primary: #2a7fff; /* 强调色：Typora 蓝 */
/* --- 极简边框与阴影 (浅色风格) --- */
--border: #e6e6e6; /* Typora 风格浅灰边框 */
--shadow: 0 4px 20px rgba(0,0,0,0.05);
--radius: 4px; /* 保持原圆角 */
/* --- 表格专用 (Typora 浅色斑马纹) --- */
--table-hover-bg: #f5f7ff; /* 表格悬停浅蓝背景 */
--table-hover-text: #333333; /* 悬停文字不变 */
/* --- Typora 代码高亮 (接近 Typora 默认) --- */
--code-keyword: #007020; /* 绿色关键字 (Typora 风格) */
--code-string: #a31515; /* 红色字符串 */
--code-comment: #008000; /* 绿色注释 */
--code-func: #795e26; /* 棕色函数名 */
--code-variable: #001080; /* 深蓝色变量/标签 */
}
/* 全局盒模型重置：让padding/border包含在宽度内，避免溢出 */
* {
box-sizing: border-box !important;
}
/* 针对 Typora 风格的标题渐变微调 (弱化渐变，更贴近 Typora 原生) */
#title {
background: linear-gradient(90deg, #2a7fff, #1a5fcc) !important; /* Typora 蓝渐变 */
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
/* 侧边栏滑出时的边框微调 (浅色风格边框) */
#menu {
border-right: 1px solid var(--border) !important;
background: var(--bg-card) !important;
}
/* ==========================================================================
第二层：宽度限制解除 (修复 100vw 溢出问题)
========================================================================== */
body.share-body,
body.share-body .container,
body.share-body .row,
body.share-body #layout {
width: 100% !important; /* 替换 100vw 为 100%，避免溢出 */
max-width: 100% !important; /* 替换 100vw 为 100% */
margin: 0 !important;
padding: 0 !important;
overflow-x: hidden !important;/* 强制隐藏横向溢出 */
}
/* ==========================================================================
第三层：核心布局容器 (保留原布局逻辑，修复宽度)
========================================================================== */
#layout {
display: flex !important;
flex-direction: row-reverse !important;
max-width: 100% !important;
width: 100% !important;
align-items: flex-start !important;
}
/* --- 左侧目录栏 (Menu) --- */
#menu {
flex: 0 0 280px !important;
width: 280px !important;
min-width: 280px !important;
height: 100vh !important;
background: var(--bg-card);
border-left: 1px solid var(--border);
padding: 20px !important;
overflow-y: auto !important;
resize: horizontal;
position: sticky;
top: 0;
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
}
/* --- 右侧正文区 (Main) --- */
#main {
flex: 1 !important;
max-width: none !important;
width: auto !important;
background: var(--bg-page);
padding: 40px !important;
overflow-y: auto;
border: none !important;
border-radius: 0 !important;
}
/* ==========================================================================
全局滚动条美化 (适配浅色风格)
========================================================================== */
#menu::-webkit-scrollbar,
body::-webkit-scrollbar,
#main::-webkit-scrollbar {
width: 6px !important;
height: 6px !important;
display: block !important;
}
#menu::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
#main::-webkit-scrollbar-track {
background: #f1f1f1 !important; /* 浅色滚动条轨道 */
}
#menu::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
#main::-webkit-scrollbar-thumb {
background-color: #cccccc !important; /* 浅色滑块 */
border-radius: 10px !important;
border: 1px solid #f1f1f1 !important;
}
#menu::-webkit-scrollbar-thumb:hover {
background-color: #999999 !important; /* 悬停略深 */
}
/* ==========================================================================
第四层：文字与链接美化 (Typora 浅色排版)
========================================================================== */
body {
color: var(--text-main);
line-height: 1.6;
font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
overflow-x: hidden !important; /* 最终兜底：隐藏body横向滚动 */
}
a {
color: var(--link-color) !important;
text-decoration: none;
transition: all 0.2s;
}
a:hover {
color: var(--link-hover-color) !important;
text-decoration: underline;
}
/* --- H1: 页面大标题 (Typora 风格) --- */
#title {
font-size: 2.2em !important;
font-weight: 800 !important;
margin-bottom: 30px !important;
padding: 10px 0 !important;
border: none !important;
}
/* --- H2: 核心章节标题 (Typora 浅色装饰) --- */
#content h2, .ck-content h2 {
font-size: 1.6em;
font-weight: 700;
color: #333333 !important; /* Typora 深灰标题 */
padding: 0.5em 0 0.5em 15px !important;
margin-top: 1.5em !important;
margin-bottom: 0.8em !important;
border-left: 8px solid var(--primary) !important;
border-bottom: 1px solid var(--border) !important;
top: -1px;
z-index: 10;
box-shadow: 0 10px 10px -10px rgba(0,0,0,0.05); /* 弱化阴影 */
}
/* --- H3: 子章节标题 --- */
#content h3, .ck-content h3 {
font-size: 1.3em;
font-weight: 600;
color: #444444 !important; /* Typora 中灰标题 */
padding: 0.5em 0 0.5em 15px !important;
margin-top: 1.2em !important;
margin-bottom: 0.6em !important;
border-left: 5px solid var(--primary) !important;
}
/* --- H4: 弱化标题 --- */
#content h4, .ck-content h4 {
font-size: 1.1em;
font-weight: 600;
color: var(--text-muted);
border-bottom: 1px dashed var(--border);
display: inline-block;
padding-bottom: 2px;
border-left: 3px solid var(--primary) !important;
padding-left: 8px !important;
}
/* ==========================================================================
代码块深度覆盖 (Typora 浅色代码风格)
========================================================================== */
pre, .ck-content pre {
background-color: #f8f8f8 !important; /* Typora 代码块浅灰背景 */
border: 1px solid var(--border) !important;
padding: 16px !important;
border-radius: 0 !important;
box-shadow: inset 2px 2px 5px rgba(0,0,0,0.02); /* 弱化阴影 */
}
code, .ck-content code {
font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
color: var(--code-string) !important;
}
/* 模拟代码语法高亮 (Typora 风格) */
.ck-content pre code span { color: var(--text-main) !important; }
pre strong { color: var(--code-keyword) !important; }
pre em { color: var(--code-comment) !important; font-style: italic; }
/* 行内代码 (Typora 风格) */
code:not(pre code) {
background-color: #f2f2f2 !important; /* 浅色行内代码背景 */
color: #e96900 !important; /* Typora 行内代码橙色 */
padding: 2px 5px !important;
border-radius: 3px;
}
/* ==========================================================================
第五层：表格修复 (保留原笔记自定义样式 + Typora 浅色斑马纹)
========================================================================== */
/* --- 表格容器/单元格 (关键：移除 !important 以保留原笔记自定义样式) --- */
table td, table th {
min-width: 120px;
white-space: nowrap;
border: 1px solid var(--border); /* 移除 !important，允许原笔记样式覆盖 */
padding: 12px 16px; /* 移除 !important，允许原笔记样式覆盖 */
}
/* --- 表格专用横向滚动条 (适配浅色) --- */
table::-webkit-scrollbar {
height: 8px !important;
}
table::-webkit-scrollbar-track {
background: #f1f1f1 !important;
border-radius: 10px;
}
table::-webkit-scrollbar-thumb {
background: #cccccc !important;
border-radius: 10px;
border: 2px solid #f1f1f1;
}
table::-webkit-scrollbar-thumb:hover {
background: var(--primary) !important;
}
/* --- 斑马纹深度逻辑 (关键：移除 !important 以保留原笔记自定义背景) --- */
table tr:nth-child(even) td {
background-color: #FDF6EC; /* 移除 !important，允许原笔记覆盖 */
}
table tr:nth-child(odd) td {
background-color: #ffffff; /* 移除 !important，允许原笔记覆盖 */
}
/* --- 表格悬停增强 (关键：移除 !important 以保留原笔记自定义样式) --- */
table tr:hover td {
background-color: var(--table-hover-bg); /* 移除 !important */
color: var(--table-hover-text); /* 移除 !important */
}
table tr:hover td a {
color: var(--link-hover-color) !important; /* 链接颜色仍强制，避免看不清 */
}
/* ==========================================================================
第六层：响应式布局 (保留原逻辑，修复宽度)
========================================================================== */
@media (max-width: 768px) {
#layout {
flex-direction: column !important;
}
#menu {
width: 100% !important; /* 替换 100vw 为 100% */
height: auto !important;
flex: none !important;
border-left: none !important;
border-bottom: 1px solid var(--border);
}
}
/* ==========================================================================
追加补丁：统一使用 Typora 浅色底色 (保留布局属性)
========================================================================== */
html,
body.share-body,
body.share-body #layout,
body.share-body #layout #main,
body.share-body #layout-container,
body.share-body #layout-container > .container,
body.share-body #layout-container > .container > .row,
body.share-body .container-fluid,
body.share-body #content {
background-color: var(--bg-page) !important;
min-height: 100vh !important;
height: auto !important;
border: none !important;
overflow-x: hidden !important; /* 确保无横向溢出 */
}
body.share-body #layout,
body.share-body #main {
display: flex !important;
flex-direction: column !important;
}
/* ==========================================================================
暴力宽度补丁：解除所有容器的宽度限制 (修复溢出问题)
========================================================================== */
body.share-body .container,
body.share-body .container-fluid,
body.share-body .row,
body.share-body #layout-container {
width: 100% !important;
max-width: 100% !important; /* 替换 100vw 为 100% */
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
#layout {
width: 100% !important;
display: flex !important;
flex-direction: row-reverse !important;
}
#main {
flex-grow: 1 !important;
flex-shrink: 0 !important;
width: auto !important;
min-width: 0 !important;
background-color: var(--bg-page) !important;
}
#content {
width: 100% !important;
max-width: none !important;
}
/* ==========================================================================
拖拽条增强：宽度翻倍补丁 (适配浅色)
========================================================================== */
#menu::-webkit-scrollbar,
body::-webkit-scrollbar,
#main::-webkit-scrollbar {
width: 15px !important;
height: 15px !important;
}
table::-webkit-scrollbar {
height: 20px !important;
}
#menu::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
#main::-webkit-scrollbar-thumb,
table::-webkit-scrollbar-thumb {
border-radius: 20px !important;
border: 5px solid var(--bg-page) !important;
}
::-webkit-scrollbar-thumb:hover {
background-color: #888888 !important; /* 浅色悬停滑块 */
}
#menu {
resize: horizontal !important;
border-right: 5px solid var(--border) !important;
}
/* ==========================================================================
修改后的：终极宽度调整 (修复居中+溢出问题)
========================================================================== */
.share-body,
.share-body #layout-container,
.share-body #layout-container > .container,
.share-body #layout-container > .container > .row {
width: 100% !important; /* 替换 80vw 为 100% */
max-width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
display: block !important;
}
#layout {
display: flex !important;
width: 100% !important; /* 替换 100vw 为 100% */
max-width: 100% !important;
margin: 0 auto !important;
flex-direction: row-reverse !important;
}
#main {
flex: 1 1 auto !important;
width: auto !important;
max-width: none !important;
padding: 40px !important;
margin: 0 !important;
}
#content,
.ck-content,
.ck-content > div {
width: 100% !important;
max-width: 100% !important;
}
/* ==========================================================================
方案 A：侧边栏自动滑入/滑出 (悬停触发)
========================================================================== */
#menu {
transition: all 0.3s ease-in-out !important;
flex: 0 0 31px !important;
width: 10px !important;
min-width: 10px !important;
opacity: 0.3; /* 浅色风格提高初始透明度，更隐蔽 */
z-index: 100;
}
#menu:hover {
flex: 0 0 280px !important;
width: 280px !important;
min-width: 280px !important;
opacity: 1;
box-shadow: 10px 0 30px rgba(0,0,0,0.1); /* 浅色风格弱化阴影 */
}
#menu:hover + #main {
margin-left: 0;
}