mint/api-v13/resources/css/modules/_reader-content.css

/* resources/css/modules/_reader-content.css
   阅读器正文排版。所有规则限定在 article.reader-body 作用域内。
   包含：基础排版、Tufte sidenote 集成、响应式断点对齐。
*/

/* ══════════════════════════════════════════
   一、作用域根：正文必须用 <article class="reader-body"> 包裹
   ══════════════════════════════════════════ */

article.reader-body {
    font-family: 'Noto Serif', Georgia, serif;
    font-size: 1.05rem;
    line-height: 1.75;
    color: inherit;
    counter-reset: sidenote-counter;
}

article.reader-body div.sentence {
    display: inline;
}
article.reader-body div.translation .para-block {
    margin-bottom: 0.75em;
}
/* ── 段落 ── */
article.reader-body p {
    margin-bottom: 1.25rem;
    padding-right: 0;
    vertical-align: baseline;
}

/* ── 标题 ── */
article.reader-body h1,
article.reader-body h2,
article.reader-body h3,
article.reader-body h4 {
    font-weight: 600;
    line-height: 1.3;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

/* ── 列表：只在正文内收缩，不影响外部 ── */
article.reader-body ul,
article.reader-body ol {
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
}

article.reader-body li {
    line-height: 1.7;
    margin-bottom: 0.25rem;
}

/* ── 引用块 ── */
article.reader-body blockquote {
    margin: 1.5rem 0 1.5rem 0;
    padding: 0.75rem 1.25rem;
    border-left: 3px solid var(--tblr-border-color);
    color: var(--tblr-secondary);
    font-style: italic;
}

/* ── 分割线 ── */
article.reader-body hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 2em 0;
}

/* ── 代码块 ── */
article.reader-body pre > code {
    display: block;
    overflow-x: auto;
    font-size: 0.9rem;
    line-height: 1.5;
    padding: 1rem;
    background: var(--tblr-bg-surface-secondary);
    border-radius: var(--tblr-border-radius);
}

/* ══════════════════════════════════════════
   二、Tufte Sidenote / Marginnote
   断点与 reader 对齐：>= 992px 浮动显示，< 992px 点击展开
   ══════════════════════════════════════════ */

/* 触发标签（手机/平板用） */
article.reader-body input.margin-toggle {
    display: none;
}

article.reader-body label.sidenote-number {
    display: inline-block;
    max-height: 1.75rem;
}

/* ≥ 992px：浮动 sidenote，右侧边栏同时存在，布局一致 */
@media (min-width: 992px) {
    article.reader-body label.margin-toggle:not(.sidenote-number) {
        display: none;
    }

    article.reader-body .sidenote,
    article.reader-body .marginnote {
        float: right;
        clear: right;
        margin-right: -35%;
        width: 28%;
        margin-top: 0.3rem;
        margin-bottom: 0;
        font-size: 0.875rem;
        line-height: 1.4;
        vertical-align: baseline;
        position: relative;
        border: 1px solid wheat;
        padding: 6px;
        border-radius: 8px;
        background-color: #f5deb330;
    }

    .dark-mode article.reader-body .sidenote,
    .dark-mode article.reader-body .marginnote {
        border-color: #6b5a3e;
        background-color: rgba(139, 109, 56, 0.15);
    }
}

/* < 992px：与手机一致，点击展开 */
@media (max-width: 991px) {
    article.reader-body label.margin-toggle:not(.sidenote-number) {
        display: inline;
        cursor: pointer;
        color: var(--tblr-primary);
    }

    article.reader-body .sidenote,
    article.reader-body .marginnote {
        display: none;
    }

    article.reader-body .margin-toggle:checked + .sidenote,
    article.reader-body .margin-toggle:checked + .marginnote {
        display: block;
        float: left;
        left: 0;
        clear: both;
        width: 95%;
        margin: 0.75rem 2.5%;
        position: relative;
        border: 1px solid wheat;
        padding: 6px;
        border-radius: 8px;
        background-color: #f5deb330;
    }
}

/* sidenote 编号上标 */
article.reader-body .sidenote-number {
    counter-increment: sidenote-counter;
}

article.reader-body .sidenote-number::after,
article.reader-body .sidenote::before {
    position: relative;
    vertical-align: baseline;
}

article.reader-body .sidenote-number::after {
    content: '[' counter(sidenote-counter) ']';
    font-size: 0.75rem;
    top: -0.5rem;
    left: 0.1rem;
    color: var(--tblr-primary);
}

article.reader-body .sidenote::before {
    content: counter(sidenote-counter) ' ';
    font-size: 0.75rem;
    top: -0.5rem;
}
/* ══════════════════════════════════════════
   三、Commentary 注释（点击展开，始终在句子下方）
   DOM 结构（由 JS 注入）：
     div.sentence
     input.commentary-toggle#commentary-N
     div.commentary-note[data-uuid]
   ══════════════════════════════════════════ */

/* checkbox 隐藏 */
article.reader-body input.commentary-toggle {
    display: none;
}

/* icon label：行内，插在句子文字末尾 */
article.reader-body label.commentary-icon {
    display: inline;
    cursor: pointer;
    margin-left: 4px;
    color: var(--tblr-primary);
    vertical-align: middle;
    font-size: 0.85rem;
    user-select: none;
    transition: opacity 0.15s;
}

article.reader-body label.commentary-icon:hover {
    opacity: 0.7;
}

/* 注释块默认隐藏 */
article.reader-body .commentary-note {
    display: none;
}

/* 展开：checkbox checked → 相邻的 .commentary-note 显示 */
article.reader-body .commentary-toggle:checked + .commentary-note {
    display: block;
    clear: both;
    width: 95%;
    margin: 0.5rem 2.5% 0.75rem;
    padding: 8px 12px;
    border-left: 3px solid var(--tblr-primary);
    border-radius: 0 6px 6px 0;
    background-color: #f5deb330;
    font-size: 0.875rem;
    line-height: 1.6;
}

.dark-mode article.reader-body .commentary-toggle:checked + .commentary-note {
    background-color: rgba(139, 109, 56, 0.15);
}

/* ══════════════════════════════════════════
   四、正文内 origin（原文显示）
   ══════════════════════════════════════════ */

article.reader-body .origin {
    color: darkred;
}

.dark-mode article.reader-body .origin {
    color: #ff8a8a;
}

/* ══════════════════════════════════════════
   五、Epigraph（题词）
   ══════════════════════════════════════════ */

article.reader-body div.epigraph {
    margin: 3em 0;
}

article.reader-body div.epigraph > blockquote,
article.reader-body div.epigraph > blockquote > p {
    font-style: italic;
}

article.reader-body div.epigraph > blockquote > footer {
    font-style: normal;
    text-align: right;
    font-size: 0.9rem;
}