/* -------------------------------------------------------------------------- */ /* Zosia 三态主题：日间(light) / 夜间(dark) / 墨水屏(eink) /* 仅当 存在时生效；默认（无属性）不影响原主题。 /* -------------------------------------------------------------------------- */ /* ============================ 夜间 dark ============================ */ [data-theme="dark"] { --body-background: #15161b; --single-body-background: #15161b; --header-background: #15161b; --very-dark-grey: #e9eaef; /* 标题/正文主色（反白） */ --dark-grey: #b9bcc4; --medium-grey: #8a8d96; --light-grey: #34363d; --very-light-grey:#202228; --off-white: #1b1c22; --toggle-sidebar-background: #1b1c22; --toggle-sidebar-border-color: #2c2e36; --toggle-sidebar-logo-color: #e9eaef; --toggle-sidebar-link-color: #e9eaef; --link-color: #8fb0e6; /* 莫兰迪柔蓝，深底可读 */ --link-hover-color: #aec8f0; --button-background: #3a3d47; --button-color: #e9eaef; --button-hover-background: #474b57; --cover-overlay-gradient: linear-gradient(to top, rgba(0,0,0,0.95), rgba(0,0,0,0.10)); } /* 夜间：图片略压暗，避免刺眼高光 */ [data-theme="dark"] img, [data-theme="dark"] video { filter: brightness(0.92) contrast(1.02); } /* ============================ 墨水屏 eink ============================ */ [data-theme="eink"] { --body-background: #f5f3ec; /* 暖纸白 */ --single-body-background: #f5f3ec; --header-background: #f5f3ec; --very-dark-grey: #1a1a1a; --dark-grey: #33332f; --medium-grey: #6b6b63; --light-grey: #d8d5cb; --very-light-grey:#e9e6dc; --off-white: #f5f3ec; --white: #ffffff; --toggle-sidebar-background: #f5f3ec; --toggle-sidebar-border-color: #d8d5cb; --toggle-sidebar-logo-color: #1a1a1a; --toggle-sidebar-link-color: #1a1a1a; --link-color: #1a1a1a; --link-hover-color: #1a1a1a; --button-background: #f5f3ec; --button-color: #1a1a1a; --button-hover-background: #e9e6dc; --cover-overlay-gradient: none; } /* eink：彻底去动效/阴影/文字阴影（e-ink 刷新慢，过渡会拖影） */ [data-theme="eink"] * { transition: none !important; animation: none !important; box-shadow: none !important; text-shadow: none !important; } /* eink：纯灰阶，所有彩色图片/视频去色 */ [data-theme="eink"] img, [data-theme="eink"] video, [data-theme="eink"] figure, [data-theme="eink"] .tfm-cover-img, [data-theme="eink"] .tfm-featured-image img, [data-theme="eink"] .wp-block-image img { filter: grayscale(1) contrast(1.04) !important; } /* eink：正文衬线化 + 加大行距，贴合长文阅读 */ [data-theme="eink"] body { font-family: Georgia, "Times New Roman", "Songti SC", "SimSun", serif !important; line-height: 1.9; } [data-theme="eink"] .entry-content p, [data-theme="eink"] .single-entry-content p, [data-theme="eink"] .entry-content li, [data-theme="eink"] .entry-content blockquote { line-height: 2 !important; letter-spacing: 0.01em; } /* eink：链接改下划线（不再靠颜色区分） */ [data-theme="eink"] a { color: #1a1a1a !important; text-decoration: underline !important; } /* eink：标注高亮去背景色，改下边框保留语义 */ [data-theme="eink"] .zn-hl { background: transparent !important; border-bottom: 2px solid #1a1a1a !important; color: inherit !important; } /* eink：去掉封面/头图渐变遮罩，纯图阅读 */ [data-theme="eink"] .tfm-cover-overlay { background: transparent !important; } /* eink：头部加一条细描边分隔，替代阴影 */ [data-theme="eink"] .site-header { border-bottom: 1px solid #d8d5cb !important; } /* eink：返回顶部按钮去阴影 */ [data-theme="eink"] .goto-top { box-shadow: none !important; background: rgba(26,26,26,0.06); } /* -------------------------------------------------------------------------- */ /* 悬浮三态切换 UI（毛玻璃 / 去发光 / Apple 风格） /* -------------------------------------------------------------------------- */ .zosia-theme-switch { position: fixed; right: 18px; bottom: 76px; z-index: 9999; } .zts-toggle { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.08); background: rgba(255,255,255,0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 2px 10px rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; color: #222; cursor: pointer; padding: 0; transition: transform 0.2s ease; } .zts-toggle:hover { transform: scale(1.06); } .zts-toggle:active { transform: scale(0.96); } .zts-menu { position: absolute; right: 0; bottom: 52px; display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 14px; background: rgba(255,255,255,0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 6px 24px rgba(0,0,0,0.10); opacity: 0; visibility: hidden; transform: translateY(6px) scale(0.98); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; } .zts-menu.open { opacity: 1; visibility: visible; transform: none; } .zts-menu button { display: flex; align-items: center; gap: 9px; padding: 9px 14px; border: none; background: transparent; border-radius: 9px; cursor: pointer; font-size: 14px; color: #222; white-space: nowrap; text-align: left; line-height: 1.2; } .zts-menu button:hover { background: rgba(0,0,0,0.06); } .zts-menu button.active { background: rgba(0,0,0,0.10); font-weight: 600; } .zts-menu .zts-ico { font-size: 16px; width: 18px; text-align: center; flex: none; } /* 夜间下切换 UI 适配 */ [data-theme="dark"] .zosia-theme-switch .zts-toggle, [data-theme="dark"] .zosia-theme-switch .zts-menu { background: rgba(40,42,50,0.82); border-color: rgba(255,255,255,0.12); color: #e9eaef; } [data-theme="dark"] .zosia-theme-switch .zts-menu button { color: #e9eaef; } [data-theme="dark"] .zosia-theme-switch .zts-menu button:hover { background: rgba(255,255,255,0.08); } [data-theme="dark"] .zosia-theme-switch .zts-menu button.active { background: rgba(255,255,255,0.14); } [data-theme="dark"] .zosia-theme-switch .zts-toggle { box-shadow: 0 2px 10px rgba(0,0,0,0.4); } /* eink 下切换 UI：去毛玻璃/阴影，描边风 */ [data-theme="eink"] .zosia-theme-switch .zts-toggle, [data-theme="eink"] .zosia-theme-switch .zts-menu { background: #f5f3ec !important; border: 1px solid #1a1a1a !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; color: #1a1a1a !important; border-radius: 0 !important; } [data-theme="eink"] .zosia-theme-switch .zts-menu button { color: #1a1a1a !important; border-radius: 0 !important; } [data-theme="eink"] .zosia-theme-switch .zts-menu button:hover { background: #e9e6dc !important; } [data-theme="eink"] .zosia-theme-switch .zts-menu button.active { background: #d8d5cb !important; } /* 小屏避免与返回顶部/其它悬浮元素挤在一起 */ @media (max-width: 600px) { .zosia-theme-switch { right: 12px; bottom: 70px; } }