A modern acrylic glassmorphism Hugo theme
Mirror of https://forgejo.alexma.top/tralume-org/hugo-theme docs.tralume.org
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315/* 说明：文章页面基础布局与正文容器样式。 * 作用：定义文章卡片（surface）、标题区与正文排版的默认间距/收缩规则，避免内容溢出。 * 注意：目录（outline）、Callout/blockquote、信息卡片与阅读进度按钮的样式在各自文件中维护。 */
.article { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; max-width: 100%;}
/* 说明：文章正文块独立成亚克力表面，避免与大纲共享同一背景。 */.article__surface { display: flex; flex-direction: column; gap: 1.5rem; padding: var(--article-surface-padding, 1.75rem); min-width: 0; max-width: 100%; /* 说明：文章正文卡片复用通用亚克力表面，这里仅覆盖圆角与阴影层级。 */ --app-glass-radius: var(--article-surface-radius, var(--app-radius-card)); --app-card-shadow: var(--md-sys-elevation-level2);}
.article__header { display: flex; flex-direction: column; gap: 0.5rem;}
.article__title { margin: 0; font-size: var(--md-sys-typescale-headline-large-size); line-height: var(--md-sys-typescale-headline-large-line-height); font-weight: 600;}
.article__meta { color: var(--md-sys-color-on-surface-variant); font-size: var(--md-sys-typescale-body-medium-size); line-height: var(--md-sys-typescale-body-medium-line-height); display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0;}
.article__meta-item { /* 说明：Meta 项统一采用 inline-flex，确保不同标签（time/span）视觉字重与对齐一致。 */ display: inline-flex; align-items: center; font-size: inherit; line-height: inherit; font-weight: inherit;}
.article__pageviews { /* 说明：阅读量由“标签 + 数字”组成，使用 gap 保持与其它 Meta 项一致的视觉节奏。 */ gap: 0.35rem;}
.article__time,.article__reading-time { color: inherit; font-size: inherit; line-height: inherit; font-weight: inherit;}
.article__meta-separator { color: inherit; opacity: 0.7;}
/* 说明：AI 参与度标记折叠组件，展开内容优先使用当前 meta 行的剩余空间。 */.article__ai-marker { display: contents;}
.article__ai-marker-summary { padding: 0; border: 0; background: none; color: inherit; font: inherit; list-style: none; cursor: pointer; display: inline-flex; align-items: center;}
/* 说明：行内展开使用横向箭头，折叠时向右，展开后向左提示可收起。 */.article__ai-marker-summary::after { content: "chevron_right"; font-family: "Material Symbols Rounded"; font-style: normal; font-weight: 400; font-size: var(--md-sys-typescale-body-medium-size); line-height: 1; margin-inline-start: 0.1em; transition: transform 0.2s ease; opacity: 0.7;}
.article__ai-marker-summary[aria-expanded="true"]::after { transform: rotate(180deg);}
.article__ai-marker-summary:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 3px; border-radius: var(--app-radius-inline);}
.article__ai-marker-details { display: contents;}
.article__ai-marker-details .article__meta-item { min-width: 0; white-space: normal; overflow-wrap: anywhere;}
.article__ai-marker-details[hidden] { display: none;}
.article__layout { display: flex; flex-direction: column; gap: var(--article-layout-gap, 1.75rem); min-width: 0; max-width: 100%;}
.article__content { min-width: 0; max-width: 100%; display: flex; flex-direction: column; gap: var(--article-section-gap, 0.75rem); /* 说明：脚注、长 URL、长英文单词等 Markdown 产物不应撑破正文卡片。 */ overflow-wrap: anywhere;}
/* 说明：正文容器使用 flex 列布局时，默认 min-width:auto 会让宽图/长代码按内容最小宽度撑破卡片；这里强制直接子元素留在正文边界内。 */.article__content > * { min-width: 0; max-width: 100%;}
/* 说明：Markdown 图片默认按固有尺寸渲染；限制为不超过容器宽度并保持比例，避免溢出正文卡片。 * 圆角使用 section 级 token，比卡片略小，与正文内其他块级元素（callout/表格）保持一致。 */.article__content img { max-width: 100%; height: auto; border-radius: var(--app-radius-section);}
/* 说明：文章插图 figure 包装器，纵向排列图片与题注。 */.article__content figure { margin: 0.5rem 0; display: flex; flex-direction: column; gap: 0.4rem;}
/* 说明：figure 内的图片撑满容器宽度，消除多余底边距。 */.article__content figure img { width: 100%; margin: 0; /* 说明：有题注的图片降低圆角仅保留上方，figure 整体圆角由外层控制。 */ border-radius: var(--app-radius-section);}
/* 说明：题注居中显示，使用次级文字颜色、较小字重与精简间距。 */.article__content figcaption { text-align: center; font-size: var(--md-sys-typescale-body-small-size); line-height: var(--md-sys-typescale-body-small-line-height); color: var(--md-sys-color-on-surface-variant); padding: 0 var(--app-radius-section); word-break: break-word;}
/* 说明：图片悬停时改为手型光标，提示可点击放大。 */.article__content img[data-lightbox] { cursor: zoom-in;}
/* ===== 灯箱弹窗样式 ===== */
/* 说明：灯箱 dialog 全屏覆盖，背景使用半透明遮罩 + 模糊。 */.app-lightbox { position: fixed; inset: 0; width: 100dvw; max-width: 100dvw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: none; background: transparent; overflow: hidden;}
/* 说明：dialog::backdrop 使用半透明黑色 + 高斯模糊，与亚克力风格统一。 */.app-lightbox::backdrop { background: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(var(--app-glass-blur-radius, 16px)); backdrop-filter: blur(var(--app-glass-blur-radius, 16px));}
/* 说明：灯箱关闭按钮，固定于左上角，复用亚克力表面 + 交互卡片样式。 * 尺寸与项目内 app-mobile-menu__close 保持一致（3.25rem 容器 + 1.75rem 图标）。 */.app-lightbox__close { position: fixed; top: 1rem; left: 1rem; z-index: 10; width: 3.25rem; height: 3.25rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; cursor: pointer; font-size: 1.75rem; color: var(--md-sys-color-on-surface); --app-glass-radius: var(--app-radius-pill); --app-glass-base-bg-color: var(--app-glass-surface-color);}
/* 说明：灯箱内图片居中显示，限制在视口内并保持比例。 */.app-lightbox__image { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 90dvw; max-height: 90dvh; width: auto; height: auto; border-radius: var(--app-radius-card); box-shadow: var(--md-sys-elevation-level5); cursor: zoom-out; object-fit: contain;}
/* 说明：表格在小屏下允许横向滚动，避免正文卡片被最小内容宽度撑破。 */.article__content table { display: block; width: max-content; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;}
/* 行内 code：允许断行 + GitHub-ish 的“压暗底色 + 1px 内描边” * 仅作用于 inline code（排除 pre > code），避免影响代码块 */.article__content :not(pre) > code { overflow-wrap: anywhere; padding: 0.1em 0.35em; border-radius: 6px; background: color-mix(in srgb, currentColor 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 28%, transparent);}
/* 说明：章节标题与段落的间距由 CSS 变量控制，便于脚本按章节数量自适应。 */.article__content h2,.article__content h3,.article__content h4,.article__content h5,.article__content h6 { margin-top: var(--article-heading-margin-top, 1.1rem); margin-bottom: var(--article-heading-margin-bottom, 0.4rem);}
.article__content > p { margin: var(--article-paragraph-margin, 0.4rem) 0;}
.article__content > hr { margin: var(--article-divider-margin, 1.25rem) 0;}
/* 说明：为正文中所有带 href 的链接追加图标（含站内、站外与锚点链接）。 */.article__content a[href]::after { content: "open_in_new"; font-family: "Material Symbols Rounded"; font-style: normal; font-weight: 400; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20; font-feature-settings: "liga"; display: inline-flex; align-items: center; justify-content: center; margin-inline-start: 0.12em; font-size: 0.95em; line-height: 1; vertical-align: text-top;}