A modern acrylic glassmorphism Hugo theme
Mirror of https://forgejo.alexma.top/tralume-org/hugo-theme docs.tralume.org
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; font-family: var(--md-ref-typeface-plain); background-color: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); font-size: var(--md-sys-typescale-body-large-size); line-height: var(--md-sys-typescale-body-large-line-height);}
html { /* 说明：顶栏吸顶后，使用锚点（#hash）或 scrollIntoView 跳转时预留顶部空间，避免标题被顶栏遮挡。 */ scroll-padding-top: var(--app-header-scroll-offset, 6rem);}
@media (max-width: 48rem) { html { /* 说明：移动端顶栏通常为两行（标题 + 导航），锚点跳转需预留更多空间。 */ scroll-padding-top: var(--app-header-scroll-offset-mobile, 10rem); }}
/* 说明：固定伪元素承载用户自定义的背景图，避免干扰主体排版。 */body::before { content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 100lvh; z-index: -1; background-image: var(--app-custom-background-image, none); background-size: cover; background-repeat: no-repeat; background-position: center; opacity: var(--app-custom-background-opacity, 0); filter: blur(var(--app-custom-background-blur-radius, 0px)) var(--app-custom-background-filter, brightness(0.92)); transition: opacity 0.3s ease, filter 0.3s ease; pointer-events: none;}
/* 说明：全局采用 border-box 盒模型，避免宽度计算时额外 padding/border 导致溢出。 */*, *::before, *::after { box-sizing: border-box;}
/* 说明：仅供屏幕阅读器读取的隐藏文本。 */.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
/* 说明：统一浮动按钮（设置、阅读进度）闭合态尺寸与间距，确保视觉与交互一致。 */:root { --floating-control-width: 7.5rem; --floating-control-height: 3.5rem; --floating-control-gap: 0.25rem; /* 说明：锚点跳转顶部偏移（吸顶顶栏高度的近似值），移动端单独设置以覆盖双行顶栏场景。 */ --app-header-scroll-offset: 6rem; --app-header-scroll-offset-mobile: 10rem; /* 说明：统一圆角尺度，供卡片/面板/控件复用，避免各文件重复写死数值。 */ --app-radius-card: 1.5rem; --app-radius-panel: 1.25rem; --app-radius-section: 1rem; --app-radius-inline: 0.75rem; --app-radius-pill: 999px; /* 说明：阅读区域最大宽度（视口宽度占比，单位为 % 对应 vw），可在设置面板中覆盖。 */ --reader-width-max: 80; /* 说明：玻璃拟态统一变量，控制透明度、色调与模糊半径以便多处复用。 */ --app-glass-blur-radius: 24px; --app-glass-surface-alpha: 45%; --app-glass-elevated-alpha: 53%; --app-glass-strong-alpha: 61%; --app-glass-border-alpha: 27%; --app-glass-border-strong-alpha: 39%; --app-glass-tint-color: var(--md-sys-color-primary); --app-glass-tint-alpha: 0%; --app-glass-surface-color: color-mix(in srgb, var(--md-sys-color-surface) var(--app-glass-surface-alpha), transparent); --app-glass-elevated-color: color-mix(in srgb, var(--md-sys-color-surface-container-high) var(--app-glass-elevated-alpha), transparent); --app-glass-strong-color: color-mix(in srgb, var(--md-sys-color-surface-container-highest) var(--app-glass-strong-alpha), transparent); --app-glass-border-color: color-mix(in srgb, var(--md-sys-color-outline-variant) var(--app-glass-border-alpha), transparent); --app-glass-border-strong-color: color-mix(in srgb, var(--md-sys-color-outline) var(--app-glass-border-strong-alpha), transparent); /* 说明：自定义背景图变量，默认关闭状态。 */ --app-custom-background-image: none; --app-custom-background-opacity: 0; --app-custom-background-filter: brightness(0.92); /* 说明：背景模糊半径（仅作用于自定义背景图层），默认关闭。 */ --app-custom-background-blur-radius: 0px; /* 说明：壁纸动态取色的回退方案，亮色使用灰黑基调，暗色使用灰白基调。 */ --app-dynamic-primary-light: #1f2329; --app-dynamic-on-primary-light: #f7f8fb; --app-dynamic-primary-container-light: #f6f8fc; --app-dynamic-on-primary-container-light: #1c2026; --app-dynamic-primary-dark: #dfe3ea; --app-dynamic-on-primary-dark: #101215; --app-dynamic-primary-container-dark: #2c3038; --app-dynamic-on-primary-container-dark: #e7eaf2; --app-dynamic-secondary-light: #c6cad3; --app-dynamic-on-secondary-light: #1f2329; --app-dynamic-secondary-container-light: #eef0f4; --app-dynamic-on-secondary-container-light: #2b2f36; --app-dynamic-outline-light: #8a8e96; --app-dynamic-outline-variant-light: #cfd2d8; --app-dynamic-secondary-dark: #9fa4b0; --app-dynamic-on-secondary-dark: #101215; --app-dynamic-secondary-container-dark: #353842; --app-dynamic-on-secondary-container-dark: #e0e3ec; --app-dynamic-outline-dark: #90939c; --app-dynamic-outline-variant-dark: #40434b; --app-dynamic-text-accent-light: #1f2329; --app-dynamic-text-accent-dark: #dfe3ea; --app-text-accent-color: var(--app-dynamic-text-accent-light);}
@media (prefers-reduced-motion: reduce) { body::before { transition: none; }}
:root[data-glass-strength="balanced"] { --app-glass-surface-alpha: 62%; --app-glass-elevated-alpha: 70%; --app-glass-strong-alpha: 78%; --app-glass-border-alpha: 42%; --app-glass-border-strong-alpha: 54%;}
:root[data-glass-strength="bold"] { --app-glass-surface-alpha: 80%; --app-glass-elevated-alpha: 88%; --app-glass-strong-alpha: 96%; --app-glass-border-alpha: 62%; --app-glass-border-strong-alpha: 74%;}
a { color: var(--app-text-accent-color); font-weight: 500; text-decoration: none;}
a:hover,a:focus-visible { text-decoration: underline;}
::selection { background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);}
::-moz-selection { background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);}
.skip-link { position: absolute; top: -100vh; left: 1.5rem; padding: 0.75rem 1rem; border-radius: 0.75rem; background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); font-weight: 600; transition: top 0.2s ease;}
.skip-link:focus-visible { top: 1rem; text-decoration: none;}
/* 说明：统一使用单一亚克力色板，依赖系统/手动模式切换明暗状态。 */:root { color-scheme: light; --app-text-accent-color: var(--app-dynamic-text-accent-light); --md-sys-color-primary: var(--app-dynamic-primary-light); --md-sys-color-on-primary: var(--app-dynamic-on-primary-light); --md-sys-color-primary-container: var(--app-dynamic-primary-container-light); --md-sys-color-on-primary-container: var(--app-dynamic-on-primary-container-light); --md-sys-color-secondary: var(--app-dynamic-secondary-light); --md-sys-color-on-secondary: var(--app-dynamic-on-secondary-light); --md-sys-color-secondary-container: var(--app-dynamic-secondary-container-light); --md-sys-color-on-secondary-container: var(--app-dynamic-on-secondary-container-light); --md-sys-color-surface: #f8f9fb; --md-sys-color-surface-dim: #e3e6eb; --md-sys-color-surface-bright: #ffffff; --md-sys-color-on-surface: #1f2329; --md-sys-color-on-surface-variant: #4f535a; --md-sys-color-background: #f5f6f8; --md-sys-color-on-background: #1f2329; --md-sys-color-outline: var(--app-dynamic-outline-light); --md-sys-color-outline-variant: var(--app-dynamic-outline-variant-light); --md-sys-color-surface-container-lowest: #ffffff; --md-sys-color-surface-container-low: #f0f2f6; --md-sys-color-surface-container: #ebedf1; --md-sys-color-surface-container-high: #e4e7ec; --md-sys-color-surface-container-highest: #dde0e6;}
@media (prefers-color-scheme: dark) { :root { color-scheme: dark; --app-glass-tint-alpha: 0%; --app-text-accent-color: var(--app-dynamic-text-accent-dark); --md-sys-color-primary: var(--app-dynamic-primary-dark); --md-sys-color-on-primary: var(--app-dynamic-on-primary-dark); --md-sys-color-primary-container: var(--app-dynamic-primary-container-dark); --md-sys-color-on-primary-container: var(--app-dynamic-on-primary-container-dark); --md-sys-color-secondary: var(--app-dynamic-secondary-dark); --md-sys-color-on-secondary: var(--app-dynamic-on-secondary-dark); --md-sys-color-secondary-container: var(--app-dynamic-secondary-container-dark); --md-sys-color-on-secondary-container: var(--app-dynamic-on-secondary-container-dark); --md-sys-color-surface: #121418; --md-sys-color-surface-dim: #121418; --md-sys-color-surface-bright: #2e3138; --md-sys-color-on-surface: #e4e6ec; --md-sys-color-on-surface-variant: #c2c5cd; --md-sys-color-background: #0f1114; --md-sys-color-on-background: #e4e6ec; --md-sys-color-outline: var(--app-dynamic-outline-dark); --md-sys-color-outline-variant: var(--app-dynamic-outline-variant-dark); --md-sys-color-surface-container-lowest: #0a0c0f; --md-sys-color-surface-container-low: #181b20; --md-sys-color-surface-container: #1f2228; --md-sys-color-surface-container-high: #272a31; --md-sys-color-surface-container-highest: #30333b; }}
:root[data-theme-mode="light"] { color-scheme: light; --app-glass-tint-alpha: 0%; --app-text-accent-color: var(--app-dynamic-text-accent-light); --md-sys-color-primary: var(--app-dynamic-primary-light); --md-sys-color-on-primary: var(--app-dynamic-on-primary-light); --md-sys-color-primary-container: var(--app-dynamic-primary-container-light); --md-sys-color-on-primary-container: var(--app-dynamic-on-primary-container-light); --md-sys-color-secondary: var(--app-dynamic-secondary-light); --md-sys-color-on-secondary: var(--app-dynamic-on-secondary-light); --md-sys-color-secondary-container: var(--app-dynamic-secondary-container-light); --md-sys-color-on-secondary-container: var(--app-dynamic-on-secondary-container-light); --md-sys-color-surface: #f8f9fb; --md-sys-color-surface-dim: #e3e6eb; --md-sys-color-surface-bright: #ffffff; --md-sys-color-on-surface: #1f2329; --md-sys-color-on-surface-variant: #4f535a; --md-sys-color-background: #f5f6f8; --md-sys-color-on-background: #1f2329; --md-sys-color-outline: var(--app-dynamic-outline-light); --md-sys-color-outline-variant: var(--app-dynamic-outline-variant-light); --md-sys-color-surface-container-lowest: #ffffff; --md-sys-color-surface-container-low: #f0f2f6; --md-sys-color-surface-container: #ebedf1; --md-sys-color-surface-container-high: #e4e7ec; --md-sys-color-surface-container-highest: #dde0e6;}
:root[data-theme-mode="dark"] { color-scheme: dark; --app-glass-tint-alpha: 0%; --app-text-accent-color: var(--app-dynamic-text-accent-dark); --md-sys-color-primary: var(--app-dynamic-primary-dark); --md-sys-color-on-primary: var(--app-dynamic-on-primary-dark); --md-sys-color-primary-container: var(--app-dynamic-primary-container-dark); --md-sys-color-on-primary-container: var(--app-dynamic-on-primary-container-dark); --md-sys-color-secondary: var(--app-dynamic-secondary-dark); --md-sys-color-on-secondary: var(--app-dynamic-on-secondary-dark); --md-sys-color-secondary-container: var(--app-dynamic-secondary-container-dark); --md-sys-color-on-secondary-container: var(--app-dynamic-on-secondary-container-dark); --md-sys-color-surface: #121418; --md-sys-color-surface-dim: #121418; --md-sys-color-surface-bright: #2e3138; --md-sys-color-on-surface: #e4e6ec; --md-sys-color-on-surface-variant: #c2c5cd; --md-sys-color-background: #0f1114; --md-sys-color-on-background: #e4e6ec; --md-sys-color-outline: var(--app-dynamic-outline-dark); --md-sys-color-outline-variant: var(--app-dynamic-outline-variant-dark); --md-sys-color-surface-container-lowest: #0a0c0f; --md-sys-color-surface-container-low: #181b20; --md-sys-color-surface-container: #1f2228; --md-sys-color-surface-container-high: #272a31; --md-sys-color-surface-container-highest: #30333b;}