| | |
| | | /* 基础颜色设置 */ |
| | | --background: var(--ai-surface); |
| | | --foreground: #1E2B63; |
| | | --foreground-rgb: 255, 255, 255; |
| | | --background-start-rgb: 10, 16, 51; |
| | | --background-end-rgb: 0, 0, 0; |
| | | --scrollbar-track: rgba(30, 43, 99, 0.1); |
| | | --scrollbar-thumb: rgba(106, 219, 255, 0.3); |
| | | } |
| | | |
| | | @theme inline { |
| | |
| | | :root { |
| | | --background: var(--ai-dark); |
| | | --foreground: #E9EFFD; |
| | | --foreground-rgb: 255, 255, 255; |
| | | --background-start-rgb: 0, 0, 0; |
| | | --background-end-rgb: 0, 0, 0; |
| | | } |
| | | } |
| | | |
| | | body { |
| | | background: var(--background); |
| | | color: var(--foreground); |
| | | background: linear-gradient(to bottom, |
| | | rgb(var(--background-start-rgb)), |
| | | rgb(var(--background-end-rgb))); |
| | | color: rgb(var(--foreground-rgb)); |
| | | font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif; |
| | | min-height: 100vh; |
| | | } |
| | | |
| | | /* 滚动性能优化 */ |
| | | * { |
| | | -webkit-font-smoothing: antialiased; |
| | | -moz-osx-font-smoothing: grayscale; |
| | | } |
| | | |
| | | html, body { |
| | | scroll-behavior: smooth; |
| | | } |
| | | |
| | | /* 启用硬件加速 */ |
| | | .will-change-transform, |
| | | .motion-safe\:will-change-transform, |
| | | .motion-safe\:hover\:will-change-transform:hover, |
| | | canvas { |
| | | will-change: transform, opacity; |
| | | transform: translateZ(0); |
| | | backface-visibility: hidden; |
| | | } |
| | | |
| | | /* 优化滚动条 */ |
| | | ::-webkit-scrollbar { |
| | | width: 10px; |
| | | } |
| | | |
| | | ::-webkit-scrollbar-track { |
| | | background: var(--scrollbar-track); |
| | | } |
| | | |
| | | ::-webkit-scrollbar-thumb { |
| | | background: var(--scrollbar-thumb); |
| | | border-radius: 5px; |
| | | } |
| | | |
| | | ::-webkit-scrollbar-thumb:hover { |
| | | background: rgba(106, 219, 255, 0.5); |
| | | } |
| | | |
| | | /* 滚动优化类 */ |
| | | .smooth-scroll { |
| | | overflow-y: scroll; |
| | | scroll-behavior: smooth; |
| | | -webkit-overflow-scrolling: touch; |
| | | } |
| | | |
| | | /* 防止过度重排和重绘 */ |
| | | .motion-reduce { |
| | | transition-duration: 0.01ms !important; |
| | | animation-duration: 0.01ms !important; |
| | | animation-iteration-count: 1 !important; |
| | | } |
| | | |
| | | /* 导航栏特效样式 */ |