fix: 书架页标题与主题统一,修复顶部空白与暗黑下数据看不清
依据插件 WeReadShelfRenderer 的实际输出结构(.wr-shelf / .wr-head-title / .wr-head-stats / .wr-year / .wr-grid)做针对性适配: - 标题统一:恢复与订阅/图库/友链页面一致的居中标题区(标题+副标题+强调线), 隐藏插件自带的 .wr-head-title,避免双标题且样式不统一 - 顶部空白:插件容器自带 clamp(40px,6vw,72px) 顶部内边距,叠加主题边距后 形成大片空白;现收紧插件 padding-top 并将页面 padding 与其他页面对齐 - 暗黑适配:插件为苹果风格浅色配色(--wr-* 变量、#1d1d1f 墨色文字),深色 背景下统计数字几乎不可见。现通过覆盖 --wr-* 变量 + :where() 零特异性 文字兜底接管配色,不破坏插件自身显式样式;笔记弹窗浅色底同步处理
This commit is contained in:
+54
-6
@@ -9,8 +9,13 @@ import Layout from "../layouts/Layout.astro";
|
||||
|
||||
<section class="wi-weread">
|
||||
<div class="wi-container">
|
||||
<!-- 标题由插件返回的书架内容自带,主题不再重复输出 -->
|
||||
<div class="wi-weread__header">
|
||||
<h1
|
||||
class="wi-weread__title"
|
||||
th:text="${theme.config?.weread?.weread_page_title ?: '书架'}"
|
||||
>
|
||||
书架
|
||||
</h1>
|
||||
<p
|
||||
class="wi-weread__subtitle"
|
||||
th:if="${theme.config?.weread?.weread_page_subtitle}"
|
||||
@@ -18,6 +23,7 @@ import Layout from "../layouts/Layout.astro";
|
||||
>
|
||||
来自微信读书的同步藏书
|
||||
</p>
|
||||
<span class="wi-page-accent"></span>
|
||||
</div>
|
||||
|
||||
<th:block th:if="${pluginFinder.available('halo-weread-plugin')}">
|
||||
@@ -80,19 +86,26 @@ import Layout from "../layouts/Layout.astro";
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
/* 头部结构与订阅/图库/友链等页面保持一致:居中标题 + 副标题 + 强调线 */
|
||||
.wi-weread {
|
||||
padding-block: 2rem 3rem;
|
||||
padding-block: 1rem 3rem;
|
||||
}
|
||||
|
||||
.wi-weread__header {
|
||||
text-align: center;
|
||||
margin-bottom: var(--space-2xl);
|
||||
margin-bottom: var(--space-3xl);
|
||||
}
|
||||
|
||||
.wi-weread__title {
|
||||
font-size: var(--text-4xl);
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
.wi-weread__subtitle {
|
||||
font-size: var(--text-base);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--ink-3);
|
||||
line-height: var(--leading-relaxed);
|
||||
letter-spacing: var(--tracking-wide);
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
.wi-weread__shelf {
|
||||
@@ -124,7 +137,18 @@ import Layout from "../layouts/Layout.astro";
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 插件返回的书架内容:收敛为与主题一致的卡片观感 */
|
||||
/* ===== 插件返回的书架内容(.wr-shelf)适配 ===== */
|
||||
|
||||
/* 插件自带的标题区与主题头部重复,隐藏后由主题统一呈现 */
|
||||
.wi-weread__shelf :global(.wr-head-title) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 插件容器自带 clamp(40px,6vw,72px) 的顶部内边距,主题已提供边距,收紧以消除大片空白 */
|
||||
.wi-weread__shelf :global(.wr-shelf) {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.wi-weread__shelf :global(img) {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
@@ -135,4 +159,28 @@ import Layout from "../layouts/Layout.astro";
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* ===== 暗黑模式:插件内容为苹果风格浅色配色,深色下需要接管 ===== */
|
||||
|
||||
/* 覆盖插件内部变量(按其命名约定 --wr-*,未命中也无副作用) */
|
||||
html.dark .wi-weread__shelf :global(.wr-shelf) {
|
||||
--wr-ink: var(--ink);
|
||||
--wr-muted: var(--ink-2);
|
||||
--wr-bg: var(--bg-raised);
|
||||
--wr-line: var(--rule);
|
||||
--wr-fill: color-mix(in srgb, var(--ink) 8%, transparent);
|
||||
}
|
||||
|
||||
/* :where() 零特异性兜底:只接管插件未显式着色的文字,不会破坏其自身样式 */
|
||||
html.dark .wi-weread__shelf :global(:where(h2, h3, strong)) {
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
html.dark .wi-weread__shelf :global(:where(p, span, small, i, em, li)) {
|
||||
color: var(--ink-2);
|
||||
}
|
||||
|
||||
/* 笔记弹窗浅色底在深色页面中过于突兀 */
|
||||
html.dark .wi-weread__shelf :global(.wr-notes-modal) {
|
||||
background: color-mix(in srgb, var(--bg) 94%, transparent);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user