A modern acrylic glassmorphism Hugo theme
Mirror of https://forgejo.alexma.top/tralume-org/hugo-theme docs.tralume.org
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118/* 说明：阅读进度浮动按钮（Progress Indicator）的样式。 * 作用：配合脚本更新圆环进度与百分比，提供“回到顶部/进度提示”等阅读辅助。 * 注意：按钮的亚克力表面与交互反馈使用 `.app-glass` / `.app-card--interactive`，此处只处理布局与图形细节。 */
.progress-indicator { position: fixed; inset-inline-end: 1.5rem; bottom: calc(1.5rem + var(--floating-control-height, 3.5rem) + var(--floating-control-gap, 0.25rem)); z-index: 30; display: inline-flex; align-items: center; justify-content: space-between; gap: 0.5rem; inline-size: var(--floating-control-width, 7.5rem); block-size: var(--floating-control-height, 3.5rem); padding: 0 1rem; color: var(--md-sys-color-on-surface); cursor: pointer; /* 说明：阅读进度按钮复用通用卡片交互，提升阴影并降低抬升幅度。 */ --app-glass-radius: var(--app-radius-section); --app-card-shadow: var(--md-sys-elevation-level3); --app-card-shadow-hover: var(--md-sys-elevation-level4); --app-card-lift-y: -2px; --app-card-hover-border-color: var(--md-sys-color-outline-variant);}
@media (max-width: 48rem) { /* 说明：移动端与设置面板对齐，收紧边距避免遮挡内容； * 同时移除百分比文案，仅保留圆环，并将按钮收敛为与其他悬浮按钮一致的方形尺寸。 */ .progress-indicator { inset-inline-end: 0.75rem; bottom: calc(0.75rem + var(--floating-control-height, 3.5rem) + var(--floating-control-gap, 0.25rem)); inline-size: var(--floating-control-height, 3.5rem); justify-content: center; padding: 0; gap: 0; }
.progress-indicator__label { display: none; }
}
.progress-indicator__dial { position: relative; width: 2.75rem; height: 2.75rem; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;}
.progress-indicator__chart { width: 100%; height: 100%; transform: rotate(-90deg); transform-origin: 50% 50%;}
.progress-indicator__icon { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.75rem; color: var(--app-text-accent-color); /* 说明：桌面端默认比圆环更淡，悬停/聚焦时再加深以提示可点击。 */ opacity: 0.55; transition: opacity 0.2s ease;}
.progress-indicator:hover .progress-indicator__icon,.progress-indicator:focus-visible .progress-indicator__icon { opacity: 1;}
@media (max-width: 48rem) { /* 说明：移动端图标保持正常颜色浓度（不做淡化处理）。 */ .progress-indicator__icon { opacity: 1; }}
.progress-indicator__track { fill: none; stroke: var(--md-sys-color-outline-variant); stroke-width: 3; opacity: 0.4;}
.progress-indicator__meter { fill: none; stroke: var(--md-sys-color-primary); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 100; stroke-dashoffset: 0; transition: stroke-dashoffset 0.2s ease-out;}
.progress-indicator__label { font-size: var(--md-sys-typescale-title-small-size); line-height: var(--md-sys-typescale-title-small-line-height); font-weight: 600; /* 说明：固定最小宽度并启用等宽数字，防止百分比变化时圆环位置跳动。 */ min-inline-size: 3ch; text-align: end; font-variant-numeric: tabular-nums;}
.progress-indicator[hidden] { display: none;}