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 .para-block {
    margin-bottom: 1em;
}
/* ── 段落 ── */
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 编号上标：编号由 JS 按「段」分组写入 data-idx（见 reader.js 的
   numberAnnotations），与段后脚注的 [N] 一一对应，可互跳。 */
article.reader-body .sidenote-number::after,
article.reader-body .sidenote::before {
    position: relative;
    vertical-align: baseline;
}

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

article.reader-body .sidenote::before {
    content: attr(data-idx) ' ';
    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);
}

/* ══════════════════════════════════════════
   三·五、注释呈现模式（行内 / 段后）
   「段后」时正文保留角标 [N]，注释以脚注列表缀在段后；「行内」沿用 sidenote 边注。
   DOM 结构与 wikipali-mobile 的 ReaderLayerPane 保持一致。
   ══════════════════════════════════════════ */

/* 段后脚注列表：默认（行内模式）隐藏，段后模式由 [data-annotation-mode] 打开 */
article.reader-body .anno-footnotes {
    display: none;
    margin: 0.5rem 0 1rem;
}

article.reader-body .anno-footnote {
    margin: 0.4rem 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--tblr-secondary);
    border: 1px solid var(--tblr-border-color);
    border-radius: 6px;
    padding: 6px 10px;
}

article.reader-body .anno-fn-toggle {
    display: none;
}

article.reader-body .anno-fn-label {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
}

article.reader-body .anno-fn-num {
    color: var(--tblr-primary);
    flex: none;
    margin-right: 0.45em;
    cursor: pointer;
}

/* 脚注正文默认收起为一行，点击展开 */
article.reader-body .anno-fn-body {
    flex: 1;
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: pointer;
}

article.reader-body .anno-fn-toggle:checked + .anno-fn-label .anno-fn-body {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
}

/* 义注跳转 cite：收起时隐藏，展开才显示 */
article.reader-body .anno-footnote .anno-jump {
    display: none;
    margin-left: 0.4em;
    font-style: normal;
    color: var(--tblr-primary);
}

article.reader-body .anno-fn-toggle:checked ~ .anno-jump {
    display: inline;
}

/* 互跳高亮 */
article.reader-body .anno-highlight {
    background: rgba(32, 107, 196, 0.16);
    border-radius: 3px;
    transition: background 0.5s;
}

/* 段后模式：显示段后脚注列表，隐藏 sidenote（角标保留） */
article.reader-body[data-annotation-mode="footnote"] .anno-footnotes {
    display: block;
}

article.reader-body[data-annotation-mode="footnote"] .sidenote {
    display: none !important;
}

/* ══════════════════════════════════════════
   四、正文内 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;
}

article.reader-body.evaluate-fatal {
    background-color: rgb(185 34 255 / 50%);
}
article.reader-body .evaluate-error {
    background-color: #ff232393;
}
article.reader-body .evaluate-warning {
    background-color: #e97a3086;
}
article.reader-body .evaluate-suggestion {
    background-color: #c4f8c6;
}

/* ══════════════════════════════════════════
   六、偈颂（Gatha / Verse）排版
   原文与译文共用的五类 class：hangnum / gatha1 / gatha2 / gatha3 / gathalast。
   每首偈 = 一个 hangnum（偈颂号，可选）+ gatha1（首行）+ 若干中间行 + gathalast（末行）。
   要求：偈颂之间的间隔 > 偈颂内部行之间的间隔；与散文混排时偈颂缩进、收紧行距以区分。
   ══════════════════════════════════════════ */

/* 偈颂号（hangnum）：悬挂在左侧页边，右对齐，字号缩小，与首行基线对齐。
   原文的号是纯文本「 1.」，部分译文的号被 markdown 渲染成 <ol start="2"><li></li></ol>，
   两种都归一化成同一个小号数字。 */
article.reader-body .hangnum {
    float: left;
    clear: left;
    width: 2rem;
    margin-right: 0.5rem;
    text-align: right;
    font-size: 0.8125rem;
    line-height: 1.75;
    color: var(--tblr-secondary);
    user-select: none;
}
article.reader-body .hangnum .para-block {
    margin-bottom: 0;
}
article.reader-body .hangnum ol {
    list-style: decimal;
    list-style-position: inside;
    padding: 0;
    margin: 0;
}
article.reader-body .hangnum li {
    margin: 0;
    line-height: inherit;
    list-style-type: decimal;
    list-style-position: inside;
}

/* 偈颂行：整体缩进，让出偈颂号的空间 */
article.reader-body .gatha1,
article.reader-body .gatha2,
article.reader-body .gatha3,
article.reader-body .gathalast {
    margin-left: 2.5rem;
}

/* 偈颂内部行距收紧；折行时悬挂缩进，续行比首行再缩进 1.25em */
article.reader-body .gatha1 .para-block,
article.reader-body .gatha2 .para-block,
article.reader-body .gatha3 .para-block,
article.reader-body .gathalast .para-block {
    margin-bottom: 0.3em;
    padding-left: 1.25em;
    text-indent: -1.25em;
}

/* 偈颂末行：与下一偈（或散文）之间留更大间隔 */
article.reader-body .gathalast .para-block {
    margin-bottom: 1.75em;
}

/* ══════════════════════════════════════════
   七、居中文本（centered）
   开头致敬语（Namo tassa…）与经末结语（… niṭṭhitaṃ / ……竟）。
   ══════════════════════════════════════════ */

article.reader-body .centered {
    text-align: center;
}
article.reader-body .centered .para-block {
    margin-bottom: 1.5em;
}

/* ══════════════════════════════════════════
   八、issue 标注
   PaliContentService::injectAnnotationNotes 注入：有位置的 issue 是 span.anno-issue（高亮原文），
   没有位置的是句尾的 span.anno-issue-mark（三角叹号图标）。颜色按 severity：
   error 红、warning 橙、suggestion 蓝，没有 severity 的灰。点击由 reader.js 弹出内容。
   与 .evaluate-*（整块底色）区分：这里用波浪下划线 + 淡底色。
   ══════════════════════════════════════════ */

article.reader-body .anno-issue-error      { --anno-issue-color: var(--tblr-danger); }
article.reader-body .anno-issue-warning    { --anno-issue-color: var(--tblr-warning); }
article.reader-body .anno-issue-suggestion { --anno-issue-color: var(--tblr-info); }
article.reader-body .anno-issue-none       { --anno-issue-color: var(--tblr-secondary); }

article.reader-body span.anno-issue {
    cursor: pointer;
    text-decoration: underline wavy var(--anno-issue-color);
    text-decoration-skip-ink: none;
    text-underline-offset: 0.25em;
    background-color: color-mix(in srgb, var(--anno-issue-color) 12%, transparent);
    border-radius: 2px;
}
article.reader-body span.anno-issue:hover,
article.reader-body span.anno-issue.is-active {
    background-color: color-mix(in srgb, var(--anno-issue-color) 26%, transparent);
}

article.reader-body span.anno-issue-mark {
    cursor: pointer;
    margin-left: 0.15em;
    color: var(--anno-issue-color);
    font-size: 0.95em;
    vertical-align: -0.05em;
}
article.reader-body span.anno-issue-mark:hover,
article.reader-body span.anno-issue-mark.is-active {
    filter: brightness(0.85);
}

/* 弹出层：桌面 popover 与手机抽屉共用的条目样式 */
.anno-issue-list {
    max-height: 60vh;
    overflow-y: auto;
}
.anno-issue-item + .anno-issue-item {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--tblr-border-color);
}
.anno-issue-item-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
}
.anno-issue-item-head .ti {
    color: var(--anno-issue-color, var(--tblr-secondary));
}
.anno-issue-item-body {
    margin-top: 0.25rem;
    white-space: pre-line;
}
.anno-issue-item-meta {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: var(--tblr-secondary);
}
.anno-issue-popover {
    --bs-popover-max-width: 22rem;
}
.anno-issue-item.anno-issue-error      { --anno-issue-color: var(--tblr-danger); }
.anno-issue-item.anno-issue-warning    { --anno-issue-color: var(--tblr-warning); }
.anno-issue-item.anno-issue-suggestion { --anno-issue-color: var(--tblr-info); }