A modern acrylic glassmorphism Hugo theme
Mirror of https://forgejo.alexma.top/tralume-org/hugo-theme docs.tralume.org
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207/* 说明：Markdown 代码块采用 MD3 风格容器，统一外观并为复制按钮预留位置，同时保持紧凑排列。 */.md3-code-block { margin: 1rem 0; /* 说明：代码块圆角走全局 token；玻璃拟态表面由 .app-glass 提供，这里仅覆盖半径。 */ --app-glass-radius: var(--app-radius-inline); /* 说明：代码块不需要“卡片抬升感”，这里通过覆盖变量移除 app-card 阴影。 */ --app-card-shadow: none; /* 说明：只让代码块“更轻”：适当降低模糊半径，避免过度影响性能。 * 注意：避免在组件内硬编码 alpha 百分比；透明度仍由全局 glass strength 控制。 */ --app-glass-blur: clamp( 0px, calc(var(--app-glass-blur-radius) - 4px), var(--app-glass-blur-radius) ); /* 说明：代码区内边距统一走变量，便于把 padding 从 pre 下放到行号列/代码列时复用同一套数值。 */ /* 说明：block 轴两端允许分别设置（例如上紧下松）；默认保持一致。 */ --md3-code-block-padding-block-start: 0rem; --md3-code-block-padding-block-end: 0.9rem; --md3-code-block-padding-inline: 1.1rem; /* 说明：工具栏上下内边距独立变量（不与代码区共用），便于后续分别调节。 */ --md3-code-block-toolbar-padding-block-start: 0.65rem; --md3-code-block-toolbar-padding-block-end: 0.3rem; /* 说明：行号分隔线到代码文本的间距（仅行号模式使用）；之前是未定义变量，定义默认值以确保间距稳定。 */ --md3-code-block-gutter: 0.9rem; overflow: hidden;}
/* 说明：语法高亮 token 颜色由 Chroma 主题 CSS 提供（按明暗模式切换），不在本文件内做 token 映射。 * - 浅色：`assets/css/chroma/chroma-github.css` * - 深色：`assets/css/chroma/chroma-monokai.css` */
/* 说明：工具栏展示语言标签与复制按钮，采用紧凑布局。 */.md3-code-block__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; /* 说明：上下内边距使用工具栏独立变量（与代码区解耦），避免改动代码区时意外影响工具栏。 */ padding-block-start: var(--md3-code-block-toolbar-padding-block-start); padding-block-end: var(--md3-code-block-toolbar-padding-block-end); padding-inline: 0.85rem; color: var(--md-sys-color-on-surface-variant); font-size: var(--md-sys-typescale-label-medium-size); line-height: var(--md-sys-typescale-label-medium-line-height);}
/* 说明：语言标识使用大写字母增强辨识度。 */.md3-code-block__language { display: inline-flex; align-items: center; gap: 0.45rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;}
/* 说明：语言图标使用 Devicon 字体渲染，尺寸与文本保持一致。 */.md3-code-block__language-icon { width: 1.05em; height: 1.05em; font-size: 1.05em; opacity: 0.9;}
/* 说明：复制按钮采用“Text icon”风格：无胶囊（pill）外观、默认淡色，悬浮/按下变深，并保持键盘可达性。 */.md3-code-block__copy-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; margin-left: auto; padding: 0.25rem 0.4rem; border: none; /* 说明：去掉 pill，圆角统一走 token，避免写死 999px。 */ border-radius: var(--app-radius-inline); background-color: transparent; /* 说明：默认使用“淡色”文本，悬浮/按下再变深。 */ color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 78%, transparent); font-family: inherit; font-size: var(--md-sys-typescale-label-medium-size); font-weight: 700; cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease;}
.md3-code-block__copy-button:hover { color: var(--md-sys-color-on-surface); background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);}
.md3-code-block__copy-button:active { color: var(--md-sys-color-on-surface); background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 16%, transparent);}
.md3-code-block__copy-button:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px;}
/* 说明：复制成功后短暂高亮按钮，提示用户操作完成。 */.md3-code-block__copy-button.is-copied { color: var(--app-text-accent-color); background-color: color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent);}
/* 说明：Material Symbols 图标作为“文字图标按钮”的前缀，跟随按钮颜色。 */.md3-code-block__copy-icon { font-size: 1.1em; line-height: 1; opacity: 0.92;}
.md3-code-block__copy-label { line-height: 1;}
/* 说明：代码区域保持独立滚动，避免长行撑破布局。 */.md3-code-block__body { position: relative; overflow-x: auto;}
.app-content pre:not([data-md3-code-processed="true"]) { margin: 1rem 0; padding: 0.9rem 1.1rem; /* 说明：兜底样式复用 .app-glass 的通用表面实现，只在这里覆盖圆角与模糊。 * 注意：不要在这里重复声明 border/background/backdrop-filter，本体由 glass-surfaces.css 统一维护。 */ --app-glass-radius: var(--app-radius-inline); --app-glass-blur: clamp( 0px, calc(var(--app-glass-blur-radius) - 4px), var(--app-glass-blur-radius) ); color: var(--md-sys-color-on-surface); font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace; font-size: 0.875rem; line-height: 1.6; overflow-x: auto; /* 说明：兜底 pre 同样移除阴影，确保与 JS 增强后的代码块一致。 */ box-shadow: none;}
.app-content pre:not([data-md3-code-processed="true"]) code { color: inherit;}
.md3-code-block__body pre { margin: 0; /* 说明：pre 不再负责 padding，避免“行号列分隔线从顶部断开/出现整层空白”；内边距改由行号列与代码列各自承担。 */ padding: 0; /* 说明：覆盖 Chroma 可能注入的内联背景色，确保背景统一由容器的玻璃拟态表面负责。 */ background: none !important; color: inherit; font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace; font-size: 0.875rem; line-height: 1.6;}
.md3-code-block__body code { white-space: pre; /* 说明：无行号时由 code 提供统一内边距；有行号时会在下方规则中按列拆分覆盖。 */ display: block; padding-block-start: var(--md3-code-block-padding-block-start); padding-block-end: var(--md3-code-block-padding-block-end); padding-inline: var(--md3-code-block-padding-inline); /* 说明：部分渲染器会把背景挂在 code 上；这里同样强制透明，避免出现“内层黑底”。 */ background: none !important;}
/* 说明：当代码行数 > 3 时，JS 会注入行号并打上标记类；此处把 pre 变为双列布局，实现行号与代码同级展示。 */.md3-code-block--with-line-numbers .md3-code-block__body pre { display: grid; grid-template-columns: max-content 1fr; align-items: start;}
/* 说明：行号列使用逻辑边框分隔代码，并保持不可选中，避免影响复制/选择代码。 */.md3-code-block__line-numbers { display: block; padding-inline-end: 0.8rem; /* 说明：行号列承担左侧与上下内边距，使分隔线从顶部贴近工具栏，同时文本仍有呼吸感。 */ padding-block-start: var(--md3-code-block-padding-block-start); padding-block-end: var(--md3-code-block-padding-block-end); padding-inline-start: var(--md3-code-block-padding-inline); border-inline-end: 1px solid var(--app-glass-border-color); text-align: end; user-select: none; pointer-events: none; color: var(--md-sys-color-on-surface-variant); opacity: 0.75; font-variant-numeric: tabular-nums;}
/* 说明：代码列为分隔线预留左内边距，保持与行号列视觉间距一致。 */.md3-code-block--with-line-numbers .md3-code-block__body code { display: block; /* 说明：代码列承担右侧与上下内边距；左侧使用 gutter 与行号分隔线拉开距离。 */ padding-block-start: var(--md3-code-block-padding-block-start); padding-block-end: var(--md3-code-block-padding-block-end); padding-inline-end: var(--md3-code-block-padding-inline); padding-inline-start: var(--md3-code-block-gutter);}