A modern acrylic glassmorphism Hugo theme
Mirror of https://forgejo.alexma.top/tralume-org/hugo-theme docs.tralume.org
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401/* \u8bf4\u660e\uff1a\u9876\u680f\u91c7\u7528\u73bb\u7483\u62df\u6001\u80cc\u666f\uff0c\u914d\u5408\u6a21\u7cca\u4e0e\u63cf\u8fb9\u4fdd\u6301\u5c42\u6b21\u611f\u3002 */.app-header { /* 说明：顶栏吸顶，滚动页面时保持可见（不随内容一起滚走）。 */ position: sticky; top: 0; z-index: 240; /* 说明：表面质感由 .app-glass/.app-card 提供，这里只做“顶栏语义”的必要覆盖。 * - 顶栏不需要四边框与圆角；仅保留底边分隔线。 */ --app-glass-radius: 0; border: 0; border-bottom: 1px solid var(--app-glass-border-color);}
.app-bar { margin: 0 auto; padding: 1rem 1.5rem; max-width: 72rem; display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap;}
.app-title { color: var(--md-sys-color-on-surface); font-size: var(--md-sys-typescale-title-large-size); line-height: var(--md-sys-typescale-title-large-line-height); font-weight: 600; letter-spacing: 0.01em; /* 说明：允许标题在 flex 容器中收缩，配合移动端省略号避免挤压按钮。 */ min-width: 0;}
.app-title--accent { color: var(--md-sys-color-on-surface);}
/* 说明：移动端右侧菜单按钮（桌面端隐藏），用于展开全屏菜单面板。 */.app-mobile-menu__toggle { display: none; --app-icon-button-color: var(--md-sys-color-on-surface); --app-icon-button-hover-color: var(--md-sys-color-primary);}
/* 说明：顶栏右侧操作区容器，包裹搜索按钮 + 移动端菜单按钮。 */.app-bar__actions { display: flex; align-items: center; gap: 0.25rem;}
/* 说明：搜索入口按钮，始终可见于顶栏最右侧。 * 样式与移动端菜单按钮一致（图标按钮、无背景、圆角胶囊形），便于视觉统一。 */.app-search__toggle { --app-icon-button-color: var(--md-sys-color-on-surface); --app-icon-button-hover-color: var(--md-sys-color-primary); --app-icon-button-hover-bg: var(--md-sys-color-surface-container-highest);}
/* \u8bf4\u660e\uff1a\u5bfc\u822a\u6761\u540c\u6b65\u73bb\u7483\u5e95\u8272\uff0c\u786e\u4fdd\u4eae/\u6697\u6a21\u5f0f\u90fd\u6709\u67d4\u548c\u5bf9\u6bd4\u3002 */.app-nav { display: flex; gap: 0.5rem; flex-wrap: wrap; /* 说明：将导航菜单推到顶栏右侧，标题居左，actions 紧挨其后。 */ margin-inline-start: auto; padding: 0.35rem 0.5rem; /* 说明：表面质感由 .app-glass/.app-card 提供；导航条为胶囊形圆角。 */ --app-glass-radius: var(--app-radius-pill);}
.app-nav__item { display: inline-flex; align-items: center; justify-content: center; padding: 0.45rem 1rem; border-radius: var(--app-radius-pill); border: 1px solid transparent; background-color: transparent; color: var(--md-sys-color-on-surface); line-height: var(--md-sys-typescale-label-large-line-height); /* 说明：导航项同时可能是 <a>/<button>，显式指定字重避免表单控件默认字重与链接不一致。 */ font-weight: 500; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;}
.app-nav__item:hover,.app-nav__item:focus-visible { background-color: var(--md-sys-color-primary-container); border-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);}
.app-nav__item.is-active { background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);}
/* 说明：Pages 下拉面板容器，使用相对定位承载弹层。 */.app-nav__item-wrapper { position: relative; display: inline-flex;}
/* 说明：将按钮样式对齐导航链接，避免浏览器默认按钮外观干扰。 */.app-nav__item--toggle { font-family: inherit; cursor: pointer;}
/* 说明：Pages 弹出面板使用更“厚实”的亚克力表面，避免在浅色/高对比背景下显得过于通透。 */.app-nav__panel { /* 说明：弹层以 fixed “portal” 方式展示到 header 之外，避免 backdrop-filter 的 backdrop root 裁剪导致无模糊。 */ position: fixed; top: 0; left: 0; z-index: 250; min-inline-size: 8rem; /* 说明：限制弹层高度并允许内部滚动，避免内容过长时被视口底部裁切。 */ max-block-size: min(70vh, 24rem); overflow: auto; overscroll-behavior: contain; padding: 0.65rem; /* 说明：表面质感由 .app-glass/.app-card 提供；圆角走全局 token。 */ --app-glass-radius: var(--app-radius-panel); --app-card-shadow: var(--md-sys-elevation-level2); /* 说明：为动画保持元素可测量（避免 display: none 导致无法获取尺寸），用 opacity/visibility 控制显隐。 */ display: block; opacity: 0; visibility: hidden; pointer-events: none; transform: scale(0.98); transform-origin: top center; transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;}
.app-nav__panel.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: scale(1); transition: opacity 180ms ease, transform 180ms cubic-bezier(0.2, 0, 0, 1), visibility 0s;}
@media (prefers-reduced-motion: reduce) { .app-nav__panel { /* 说明：尊重系统“减少动态效果”设置，避免不适。 */ transition: none; transform: none; }}
.app-nav__panel-list { display: flex; flex-direction: column; gap: 0.35rem; /* 说明：弹层内条目文本居中对齐，适合“菜单面板”类场景。 */ align-items: center;}
.app-nav__panel-item { padding: 0.55rem 0.75rem; border-radius: var(--app-radius-section); color: var(--md-sys-color-on-surface); text-decoration: none; /* 说明：确保链接文本在自身区域内居中。 */ text-align: center; font-size: var(--md-sys-typescale-label-large-size); line-height: var(--md-sys-typescale-label-large-line-height); transition: background-color 0.2s ease, color 0.2s ease;}
.app-nav__panel-item:hover,.app-nav__panel-item:focus-visible { background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);}
/* 说明：空状态提示使用次要文字色，保持信息层级。 */.app-nav__panel-empty { margin: 0; padding: 0.55rem 0.75rem; color: var(--md-sys-color-on-surface-variant); /* 说明：空状态文案与菜单条目一致，保持居中。 */ text-align: center; font-size: var(--md-sys-typescale-body-small-size); line-height: var(--md-sys-typescale-body-small-line-height);}
/* 说明：移动端全屏菜单面板，由 mobile-menu.js 控制 .is-open，并在打开时锁定页面滚动。 */:root[data-mobile-menu-open="true"],:root[data-mobile-menu-open="true"] body { overflow: hidden;}
.app-mobile-menu { position: fixed; inset: 0; z-index: 260; display: flex; flex-direction: column; /* 说明：面板本体不再内缩；内边距交由 header/nav 各自控制，确保顶栏背景可覆盖全宽。 */ gap: 0; padding: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; /* 说明：全屏覆盖不使用圆角，避免露出页面角落。 */ --app-glass-radius: 0; /* 说明：全屏模糊成本较高，适当降低强度以平衡性能与质感。 */ --app-glass-blur: calc(var(--app-glass-blur-radius) * 0.85); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;}
.app-mobile-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition: opacity 200ms ease, transform 200ms cubic-bezier(0.2, 0, 0, 1), visibility 0s;}
@media (prefers-reduced-motion: reduce) { .app-mobile-menu { /* 说明：尊重系统“减少动态效果”设置，避免不适。 */ transition: none; transform: none; }}
@media (min-width: 48rem) { /* 说明：桌面端不展示全屏菜单，避免与顶栏导航重复。 */ .app-mobile-menu { display: none; }}
.app-mobile-menu__header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; /* 说明：移动端全屏菜单展开后，标题与关闭按钮以“顶栏”形式固定，滚动时不消失。 */ position: sticky; top: 0; z-index: 1; padding-block-start: calc(env(safe-area-inset-top, 0px) + 1rem); padding-block-end: 0.75rem; padding-inline: calc(env(safe-area-inset-left, 0px) + 1rem) calc(env(safe-area-inset-right, 0px) + 1rem); background-color: var(--app-glass-bg-color); -webkit-backdrop-filter: blur(var(--app-glass-blur)); backdrop-filter: blur(var(--app-glass-blur)); border-bottom: 1px solid var(--app-glass-border-color);}
.app-mobile-menu__title { margin: 0; color: var(--md-sys-color-on-surface); font-size: var(--md-sys-typescale-title-large-size); line-height: var(--md-sys-typescale-title-large-line-height); font-weight: 600;}
.app-mobile-menu__close { --app-icon-button-hover-color: var(--md-sys-color-primary);}
.app-mobile-menu__nav { display: flex; flex-direction: column; gap: 0.75rem; padding-block-start: 1rem; padding-block-end: calc(env(safe-area-inset-bottom, 0px) + 1.25rem); padding-inline: calc(env(safe-area-inset-left, 0px) + 1rem) calc(env(safe-area-inset-right, 0px) + 1rem);}
/* 说明：Pages 分组（顶部是 /pages/ 列表页入口，下方默认展开全部页面链接）。 */.app-mobile-menu__pages { display: flex; flex-direction: column; gap: 0.5rem;}
.app-mobile-menu__pages-list { display: flex; flex-direction: column; gap: 0.35rem; padding-inline-start: 0.5rem;}
.app-mobile-menu__subitem { display: flex; align-items: center; justify-content: flex-start; padding: 0.7rem 0.85rem; border-radius: var(--app-radius-pill); color: var(--md-sys-color-on-surface-variant); text-decoration: none; font-size: var(--md-sys-typescale-body-large-size); line-height: var(--md-sys-typescale-body-large-line-height); font-weight: 500; transition: background-color 0.2s ease, color 0.2s ease;}
.app-mobile-menu__subitem:hover,.app-mobile-menu__subitem:focus-visible { background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); text-decoration: none;}
.app-mobile-menu__subitem.is-active { background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);}
.app-mobile-menu__subempty { margin: 0; padding: 0.7rem 0.85rem; border-radius: var(--app-radius-pill); color: var(--md-sys-color-on-surface-variant); font-size: var(--md-sys-typescale-body-small-size); line-height: var(--md-sys-typescale-body-small-line-height);}
.app-mobile-menu__item { display: flex; align-items: center; justify-content: flex-start; padding: 0.9rem 1rem; /* 说明：条目表面由 .app-glass 提供；这里仅指定为胶囊圆角。 */ --app-glass-radius: var(--app-radius-pill); color: var(--md-sys-color-on-surface); text-decoration: none; font-size: var(--md-sys-typescale-title-small-size); line-height: var(--md-sys-typescale-title-small-line-height); font-weight: 600; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;}
.app-mobile-menu__item:hover,.app-mobile-menu__item:focus-visible { border-color: var(--md-sys-color-outline-variant); background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); text-decoration: none;}
.app-mobile-menu__item.is-active { border-color: var(--md-sys-color-primary); background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);}
@media (max-width: 48rem) { /* 说明：移动端顶栏仅保留站点名称 + 菜单按钮，导航入口改为全屏菜单。 */ .app-bar { padding: 0.85rem 1rem; flex-wrap: nowrap; gap: 0.75rem; }
.app-title { font-size: var(--md-sys-typescale-title-large-size); line-height: var(--md-sys-typescale-title-large-line-height); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-nav { display: none; }
.app-mobile-menu__toggle { display: inline-flex; }}