mirror of
https://github.com/wahyd4/wahyd4.github.com.git
synced 2026-08-15 16:45:56 +10:00
ai-bot
742da3c539
- Floating Aa button on left edge, aligned with sidebar-toggle - Panel: theme (light/paper/green/night), font (system/serif/sans/kai/mono), font size (A-/A+), line spacing (compact/cozy/relaxed), reset - localStorage persistence (toozhao-reading) - Replaces the old A-/A/A+ font-size control - Default font: Ubuntu + Noto Sans CJK (Linux system stack) for global, headings and posts (was Georgia/Noto Serif SC)
334 lines
11 KiB
Plaintext
334 lines
11 KiB
Plaintext
<style>
|
||
/* =========================================================
|
||
Toozhao blog custom styles (injected via head.njk)
|
||
阅读体验优化 — 微信读书风格
|
||
========================================================= */
|
||
html { scroll-behavior: smooth; }
|
||
|
||
/* 主内容阅读宽度 */
|
||
.post-block, .posts-expand .post-block {
|
||
max-width: 760px;
|
||
}
|
||
|
||
.post-title {
|
||
font-size: 1.7em;
|
||
font-weight: 700;
|
||
letter-spacing: 0.01em;
|
||
}
|
||
|
||
.post-meta { color: #999; font-size: 0.9em; }
|
||
|
||
.post-body {
|
||
font-size: 1.05em;
|
||
line-height: 1.9;
|
||
letter-spacing: 0.02em;
|
||
color: #333;
|
||
}
|
||
.post-body p {
|
||
margin: 1.1em 0;
|
||
text-align: justify;
|
||
text-justify: inter-ideograph;
|
||
}
|
||
.post-body h1, .post-body h2, .post-body h3, .post-body h4, .post-body h5, .post-body h6 {
|
||
line-height: 1.4;
|
||
margin-top: 1.6em;
|
||
margin-bottom: 0.8em;
|
||
font-weight: 600;
|
||
color: #222;
|
||
}
|
||
.post-body h2::before, .post-body h3::before, .post-body h4::before {
|
||
content: '';
|
||
display: inline-block;
|
||
width: 4px;
|
||
height: 0.9em;
|
||
background: #4a90d9;
|
||
border-radius: 2px;
|
||
margin-right: 10px;
|
||
vertical-align: -0.08em;
|
||
}
|
||
.post-body img {
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||
margin: 0.6em auto;
|
||
display: block;
|
||
max-width: 100%;
|
||
}
|
||
.post-body blockquote {
|
||
border-left: 4px solid #4a90d9;
|
||
background: rgba(74, 144, 217, 0.06);
|
||
margin: 1.4em 0;
|
||
padding: 0.8em 1.2em;
|
||
border-radius: 0 8px 8px 0;
|
||
color: #555;
|
||
}
|
||
.post-body blockquote p { margin: 0.4em 0; }
|
||
.post-body a {
|
||
color: #2d6cdf;
|
||
border-bottom: 1px solid rgba(45, 108, 223, 0.3);
|
||
transition: color 0.2s, border-color 0.2s;
|
||
}
|
||
.post-body a:hover { color: #1a4fae; border-bottom-color: #1a4fae; }
|
||
.post-body code {
|
||
background: rgba(0, 0, 0, 0.05);
|
||
border-radius: 4px;
|
||
padding: 2px 6px;
|
||
font-size: 0.9em;
|
||
color: #c7254e;
|
||
}
|
||
.post-body table {
|
||
border-collapse: collapse;
|
||
margin: 1.2em auto;
|
||
font-size: 0.95em;
|
||
}
|
||
.post-body table th, .post-body table td {
|
||
border: 1px solid #ddd;
|
||
padding: 8px 14px;
|
||
}
|
||
.post-body table th { background: #f5f7fa; font-weight: 600; }
|
||
.post-body table tr:nth-child(even) { background: #fafbfc; }
|
||
.post-body ul, .post-body ol { padding-left: 1.6em; margin: 0.8em 0; }
|
||
.post-body ul li, .post-body ol li { margin: 0.35em 0; }
|
||
.post-body hr {
|
||
border: none;
|
||
border-top: 1px dashed #ccc;
|
||
margin: 2em auto;
|
||
width: 60%;
|
||
}
|
||
|
||
/* 暗色模式（跟随系统，不依赖 NexT darkmode class） */
|
||
@media (prefers-color-scheme: dark) {
|
||
body { background: #1b1f24; color: #c8cdd3; }
|
||
.post-body { color: #c8cdd3; }
|
||
.post-body h1, .post-body h2, .post-body h3, .post-body h4, .post-body h5, .post-body h6 { color: #e8eaed; }
|
||
.post-body blockquote { background: rgba(74, 144, 217, 0.1); color: #9aa5b1; }
|
||
.post-body code { background: rgba(255, 255, 255, 0.1); color: #e88388; }
|
||
.post-body table th, .post-body table td { border-color: #3a3f45; }
|
||
.post-body table th { background: #2d3238; }
|
||
.post-body table tr:nth-child(even) { background: #262a2f; }
|
||
.post-meta { color: #777; }
|
||
}
|
||
|
||
::selection { background: rgba(74, 144, 217, 0.25); }
|
||
|
||
/* =========================================================
|
||
阅读设置（Aa 悬浮按钮 + 面板）— 参考 Links Reading settings
|
||
========================================================= */
|
||
/* 悬浮按钮：左下，与 sidebar-toggle 排成一列 */
|
||
.reading-toggle {
|
||
position: fixed;
|
||
left: 24px;
|
||
bottom: 108px;
|
||
z-index: 1000;
|
||
width: 34px;
|
||
height: 34px;
|
||
border-radius: 50%;
|
||
background: rgba(0, 0, 0, 0.65);
|
||
color: #fff;
|
||
font-family: Georgia, "Times New Roman", serif;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
font-style: italic;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
border: none;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
|
||
transition: background 0.2s, transform 0.2s;
|
||
}
|
||
.reading-toggle:hover { background: #4a90d9; transform: scale(1.1); }
|
||
.reading-toggle.active { background: #4a90d9; }
|
||
|
||
/* 设置面板 */
|
||
.reading-panel {
|
||
position: fixed;
|
||
left: 68px;
|
||
bottom: 108px;
|
||
z-index: 1001;
|
||
width: 268px;
|
||
background: #fff;
|
||
border-radius: 14px;
|
||
box-shadow: 0 14px 44px rgba(0, 0, 0, 0.2);
|
||
padding: 16px 18px 14px;
|
||
font-size: 13px;
|
||
color: #333;
|
||
display: none;
|
||
transform-origin: bottom left;
|
||
animation: rpIn 0.18s ease;
|
||
}
|
||
.reading-panel.open { display: block; }
|
||
@keyframes rpIn {
|
||
from { opacity: 0; transform: translateY(8px) scale(0.96); }
|
||
to { opacity: 1; transform: none; }
|
||
}
|
||
.reading-panel h4 {
|
||
margin: 0 0 8px;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.1em;
|
||
color: #9aa0a8;
|
||
text-transform: uppercase;
|
||
}
|
||
.reading-panel .rp-row { margin-bottom: 15px; }
|
||
.reading-panel .rp-row:last-of-type { margin-bottom: 10px; }
|
||
|
||
/* 主题色 swatch */
|
||
.rp-themes { display: flex; gap: 8px; }
|
||
.rp-themes .sw {
|
||
flex: 1;
|
||
border: 2px solid transparent;
|
||
border-radius: 10px;
|
||
padding: 6px 4px 5px;
|
||
cursor: pointer;
|
||
background: none;
|
||
font-size: 12px;
|
||
color: #666;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 4px;
|
||
transition: border-color 0.15s;
|
||
}
|
||
.rp-themes .sw span {
|
||
display: block;
|
||
width: 30px;
|
||
height: 22px;
|
||
border-radius: 6px;
|
||
border: 1px solid rgba(0, 0, 0, 0.12);
|
||
}
|
||
.rp-themes .sw.active { border-color: #4a90d9; color: #4a90d9; font-weight: 600; }
|
||
.sw-light span { background: #ffffff; }
|
||
.sw-paper span { background: #f7f0e4; }
|
||
.sw-green span { background: #e2efe4; }
|
||
.sw-night span { background: #1b1f24; }
|
||
|
||
/* 字体选项 */
|
||
.rp-fonts { display: flex; flex-wrap: wrap; gap: 6px; }
|
||
.rp-fonts button {
|
||
flex: 1 1 40%;
|
||
border: 1px solid #e2e5ea;
|
||
background: #f8f9fb;
|
||
border-radius: 8px;
|
||
padding: 6px 4px;
|
||
font-size: 12.5px;
|
||
color: #444;
|
||
cursor: pointer;
|
||
transition: all 0.15s;
|
||
}
|
||
.rp-fonts button.active { background: #eaf2fd; border-color: #4a90d9; color: #2d6cdf; font-weight: 600; }
|
||
.rp-fonts button:nth-child(n+5) { flex-basis: 100%; }
|
||
|
||
/* 字号 */
|
||
.rp-size { display: flex; align-items: center; gap: 10px; }
|
||
.rp-size button {
|
||
width: 36px;
|
||
height: 30px;
|
||
border-radius: 8px;
|
||
border: 1px solid #e2e5ea;
|
||
background: #f8f9fb;
|
||
font-size: 14px;
|
||
color: #444;
|
||
cursor: pointer;
|
||
transition: all 0.15s;
|
||
}
|
||
.rp-size button:hover { background: #eaf2fd; border-color: #4a90d9; color: #2d6cdf; }
|
||
.rp-size-val {
|
||
flex: 1;
|
||
text-align: center;
|
||
font-size: 13.5px;
|
||
font-weight: 600;
|
||
color: #555;
|
||
background: #f8f9fb;
|
||
border-radius: 8px;
|
||
padding: 5px 0;
|
||
}
|
||
|
||
/* 行距 */
|
||
.rp-spacing { display: flex; gap: 6px; }
|
||
.rp-spacing button {
|
||
flex: 1;
|
||
border: 1px solid #e2e5ea;
|
||
background: #f8f9fb;
|
||
border-radius: 8px;
|
||
padding: 6px 0;
|
||
font-size: 12.5px;
|
||
color: #444;
|
||
cursor: pointer;
|
||
transition: all 0.15s;
|
||
}
|
||
.rp-spacing button.active { background: #eaf2fd; border-color: #4a90d9; color: #2d6cdf; font-weight: 600; }
|
||
|
||
/* 重置 */
|
||
.rp-reset {
|
||
width: 100%;
|
||
border: none;
|
||
background: none;
|
||
color: #9aa0a8;
|
||
font-size: 12.5px;
|
||
padding: 8px 0 2px;
|
||
cursor: pointer;
|
||
border-top: 1px solid #eef0f3;
|
||
margin-top: 2px;
|
||
transition: color 0.15s;
|
||
}
|
||
.rp-reset:hover { color: #4a90d9; }
|
||
|
||
/* ---- 阅读主题应用 ---- */
|
||
body[data-rtheme="paper"] { background: #f7f0e4 !important; }
|
||
body[data-rtheme="paper"] .post-body { color: #4a4238; }
|
||
body[data-rtheme="paper"] .post-body h1, body[data-rtheme="paper"] .post-body h2,
|
||
body[data-rtheme="paper"] .post-body h3, body[data-rtheme="paper"] .post-body h4,
|
||
body[data-rtheme="paper"] .post-body h5, body[data-rtheme="paper"] .post-body h6 { color: #3a332b; }
|
||
body[data-rtheme="paper"] .post-body a { color: #8a5a2b; border-bottom-color: rgba(138, 90, 43, 0.3); }
|
||
body[data-rtheme="paper"] .post-body a:hover { color: #6b4420; }
|
||
body[data-rtheme="paper"] .post-body blockquote { background: rgba(138, 90, 43, 0.07); color: #6b5d4a; }
|
||
body[data-rtheme="paper"] .post-body code { background: rgba(0, 0, 0, 0.06); color: #8a4a3a; }
|
||
body[data-rtheme="paper"] .post-body table th { background: #efe7d5; }
|
||
body[data-rtheme="paper"] .post-body table tr:nth-child(even) { background: #f4ede0; }
|
||
body[data-rtheme="paper"] .reading-panel { background: #fdfaf3; color: #4a4238; }
|
||
|
||
body[data-rtheme="green"] { background: #e2efe4 !important; }
|
||
body[data-rtheme="green"] .post-body { color: #2f4a36; }
|
||
body[data-rtheme="green"] .post-body h1, body[data-rtheme="green"] .post-body h2,
|
||
body[data-rtheme="green"] .post-body h3, body[data-rtheme="green"] .post-body h4,
|
||
body[data-rtheme="green"] .post-body h5, body[data-rtheme="green"] .post-body h6 { color: #23402c; }
|
||
body[data-rtheme="green"] .post-body a { color: #1d6b3c; border-bottom-color: rgba(29, 107, 60, 0.3); }
|
||
body[data-rtheme="green"] .post-body a:hover { color: #14522d; }
|
||
body[data-rtheme="green"] .post-body blockquote { background: rgba(29, 107, 60, 0.08); color: #41604c; }
|
||
body[data-rtheme="green"] .post-body code { background: rgba(0, 0, 0, 0.05); color: #1d6b3c; }
|
||
body[data-rtheme="green"] .post-body table th { background: #d4e8d8; }
|
||
body[data-rtheme="green"] .post-body table tr:nth-child(even) { background: #dcecdd; }
|
||
body[data-rtheme="green"] .reading-panel { background: #f0f8f1; color: #2f4a36; }
|
||
|
||
body[data-rtheme="night"] { background: #1b1f24 !important; }
|
||
body[data-rtheme="night"] .post-body { color: #c8cdd3; }
|
||
body[data-rtheme="night"] .post-body h1, body[data-rtheme="night"] .post-body h2,
|
||
body[data-rtheme="night"] .post-body h3, body[data-rtheme="night"] .post-body h4,
|
||
body[data-rtheme="night"] .post-body h5, body[data-rtheme="night"] .post-body h6 { color: #e8eaed; }
|
||
body[data-rtheme="night"] .post-body a { color: #7ba6f0; border-bottom-color: rgba(123, 166, 240, 0.35); }
|
||
body[data-rtheme="night"] .post-body a:hover { color: #a5c4f5; }
|
||
body[data-rtheme="night"] .post-body blockquote { background: rgba(123, 166, 240, 0.1); color: #9aa5b1; }
|
||
body[data-rtheme="night"] .post-body code { background: rgba(255, 255, 255, 0.1); color: #e88388; }
|
||
body[data-rtheme="night"] .post-body table th, body[data-rtheme="night"] .post-body table td { border-color: #3a3f45; }
|
||
body[data-rtheme="night"] .post-body table th { background: #2d3238; }
|
||
body[data-rtheme="night"] .post-body table tr:nth-child(even) { background: #262a2f; }
|
||
body[data-rtheme="night"] .reading-toggle { background: rgba(255, 255, 255, 0.14); }
|
||
body[data-rtheme="night"] .reading-panel { background: #23282e; color: #c8cdd3; }
|
||
body[data-rtheme="night"] .reading-panel h4 { color: #7a828c; }
|
||
body[data-rtheme="night"] .rp-fonts button, body[data-rtheme="night"] .rp-size button,
|
||
body[data-rtheme="night"] .rp-spacing button { background: #2d333a; border-color: #3a414a; color: #c8cdd3; }
|
||
body[data-rtheme="night"] .rp-fonts button.active, body[data-rtheme="night"] .rp-size button:hover,
|
||
body[data-rtheme="night"] .rp-spacing button.active { background: #35465c; border-color: #4a90d9; color: #9dc0f0; }
|
||
body[data-rtheme="night"] .rp-size-val { background: #2d333a; color: #c8cdd3; }
|
||
body[data-rtheme="night"] .rp-themes .sw { color: #9aa5b1; }
|
||
body[data-rtheme="night"] .rp-reset { border-top-color: #333a42; color: #7a828c; }
|
||
|
||
/* 移动端：按钮缩小、面板右移防溢出 */
|
||
@media (max-width: 600px) {
|
||
.reading-toggle { left: 16px; bottom: 96px; width: 32px; height: 32px; }
|
||
.reading-panel { left: 56px; bottom: 96px; width: 240px; }
|
||
}
|
||
</style>
|
||
<link rel="stylesheet" href="/css/tag-cloud.css">
|