/* AeroCore 子主题组件包：全宽滚动公告（LED 屏效果）文件：AeroCore-Child/packages/scroll_notice/style.css 仅在该组件被使用时自动加载。深色模式通过主题 CSS 变量自动适配。 */ .sn-bar { /* 基础宽度：在容器内为 100%；默认通过 .sn-width-full 占满整个浏览器宽度 */ width: 100%; box-sizing: border-box; display: flex; align-items: center; overflow: hidden; /* 固定一个合理的高度（后台可配） */ height: var(--sn-height, 40px); /* 底色（支持透明 / 磨砂质感，后台可配） */ background: var(--sn-bg, rgba(15, 23, 42, 0.6)); -webkit-backdrop-filter: blur(var(--sn-blur, 0)); backdrop-filter: blur(var(--sn-blur, 0)); /* 边框线条无色：无边框 */ border: none; border-radius: 0; color: var(--sn-text-color, #ffffff); position: relative; z-index: 50; /* 菜单（门头）高度，固定顶部模式据此贴在菜单正下方；由 JS 实测覆盖 */ --sn-header-h: 64px; } /* 宽度对齐方式：与菜单内容同宽（1200px 居中） */ .sn-bar.sn-width-container { width: 100%; } /* 宽度对齐方式：全宽铺满，突破容器延伸到屏幕两侧（body 已 overflow-x:hidden，不会出横向滚动条） */ .sn-bar.sn-width-full { width: 100vw; margin-left: calc(50% - 50vw); } /* 紧贴菜单栏：AeroCore 经典头部下 .page-container 有 24px 上内边距，常规（static）模式下用等量负外边距抵消，使公告条直接贴在菜单底部。 */ .sn-bar.sn-pos-static { margin-top: -24px; } /* 固定顶部常驻： 1) 必须脱离 .page-container 的层叠上下文（其 z-index:1 会把固定条压到菜单 z-index:1000 之下而“看不见”），这一步由 main.js 把节点移动到实现； 2) 贴在菜单正下方（top 由 JS 实测菜单高度写入 --sn-header-h）； 3) left/right:0 + width:auto 取视口内容宽度，避免 100vw 的滚动条误差。 */ .sn-bar.sn-pos-fixed { position: fixed; top: var(--sn-header-h, 64px); left: 0; right: 0; width: auto; z-index: 9999; } /* 视口：裁剪溢出，文字不换行 */ .sn-viewport { width: 100%; overflow: hidden; white-space: nowrap; } /* 滚动轨道：由 JS 计算宽度与动画时长，translateX(-50%) 实现无缝循环 */ .sn-track { display: inline-flex; flex-wrap: nowrap; white-space: nowrap; will-change: transform; } .sn-text { display: inline-block; flex: 0 0 auto; font-size: var(--sn-font-size, 14px); line-height: var(--sn-height, 40px); color: var(--sn-text-color, #ffffff); padding-right: 4rem; /* 两段文字之间的间隔 */ white-space: nowrap; letter-spacing: 0.02em; } @keyframes sn-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* 尊重用户的减少动态偏好 */ @media (prefers-reduced-motion: reduce) { .sn-track { animation: none !important; } }