html, body, #root { min-height: 100%; } :root { --app-font-serif: 'Noto Serif SC', 'Songti SC', 'SimSun', serif; --app-font-sans: 'Source Sans 3', 'PingFang SC', 'Microsoft YaHei', sans-serif; --app-font-mono: 'IBM Plex Mono', 'Consolas', monospace; --app-ink: #292524; --app-parchment: #f5f0e6; --app-copper: #b45309; --app-gold: #f59e0b; font-family: var(--app-font-sans); line-height: 1.5715; font-weight: 400; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } [data-theme-resolved='dark'] { --app-ink: #e7e5e4; --app-parchment: #0c0a09; --app-copper: #f59e0b; --app-gold: #fbbf24; } .app-serif-title { font-family: var(--app-font-serif); letter-spacing: 0.02em; } .app-shell-sider .ant-menu-dark, .app-shell-sider .ant-menu { background: transparent !important; } .app-shell-sider .ant-menu-item-selected { border-left: 3px solid var(--app-gold) !important; } .app-login-tabs .ant-tabs-nav::before { border-bottom-color: color-mix(in srgb, var(--app-ink) 12%, transparent); } .app-login-tabs .ant-tabs-tab-active .ant-tabs-tab-btn { color: var(--app-copper) !important; font-weight: 700; } .app-prompt-header { border-left: 4px solid var(--app-copper); padding-left: 20px; } body { margin: 0; min-height: 100vh; touch-action: manipulation; } * { box-sizing: border-box; } /* 自定义滚动条样式(与主题弱耦合) */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.06); border-radius: 4px; } ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.24); border-radius: 4px; transition: background 0.2s ease; } ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.34); } * { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.24) rgba(0, 0, 0, 0.06); } [data-theme-resolved='dark'] ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.08); } [data-theme-resolved='dark'] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.28); } [data-theme-resolved='dark'] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4); } [data-theme-resolved='dark'] * { scrollbar-color: rgba(255, 255, 255, 0.28) rgba(255, 255, 255, 0.08); } /* 主题切换转场(暗色扩散、亮色收缩) */ :root { --theme-transition-duration: 460ms; --theme-transition-easing: cubic-bezier(0.22, 1, 0.36, 1); } :root::view-transition-group(root) { animation-duration: var(--theme-transition-duration); } :root[data-theme-transition='to-dark']::view-transition-new(root) { z-index: 2; animation: theme-dark-reveal var(--theme-transition-duration) var(--theme-transition-easing) both; } :root[data-theme-transition='to-dark']::view-transition-old(root) { z-index: 1; animation: theme-old-fade var(--theme-transition-duration) ease both; } :root[data-theme-transition='to-light']::view-transition-old(root) { z-index: 2; animation: theme-light-collapse var(--theme-transition-duration) var(--theme-transition-easing) both; } :root[data-theme-transition='to-light']::view-transition-new(root) { z-index: 1; animation: theme-new-fade var(--theme-transition-duration) ease both; } @keyframes theme-dark-reveal { from { clip-path: circle(0% at 50% 50%); opacity: 0.78; } to { clip-path: circle(150% at 50% 50%); opacity: 1; } } @keyframes theme-light-collapse { from { clip-path: circle(150% at 50% 50%); opacity: 1; } to { clip-path: circle(0% at 50% 50%); opacity: 0.82; } } @keyframes theme-old-fade { from { opacity: 1; } to { opacity: 0.9; } } @keyframes theme-new-fade { from { opacity: 0.92; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { :root::view-transition-group(root), :root::view-transition-old(root), :root::view-transition-new(root) { animation-duration: 1ms !important; } } /* 移动端响应式样式 */ @media (max-width: 768px) { :root { font-size: 14px; } ::-webkit-scrollbar { width: 4px; height: 4px; } button, a, [role='button'] { min-height: 44px; min-width: 44px; } img, button { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; } /* 修复移动端表格分页器对齐问题 */ .ant-pagination-simple { display: flex; align-items: center; justify-content: center; } .ant-pagination-simple .ant-pagination-simple-pager { display: inline-flex; align-items: center; margin: 0 8px; } .ant-pagination-simple .ant-pagination-simple-pager input { margin: 0 4px; } .ant-pagination-simple .ant-pagination-prev, .ant-pagination-simple .ant-pagination-next { display: inline-flex; align-items: center; justify-content: center; } } @media (max-width: 576px) { :root { font-size: 13px; } } /* 移动端安全区域适配 (iPhone X+) */ @supports (padding: max(0px)) { body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); } } .ant-tabs-dropdown { z-index: 2000 !important; } .ant-tooltip { max-width: min(420px, calc(100vw - 24px)); } .ant-tooltip .ant-tooltip-content, .ant-tooltip .ant-tooltip-inner { max-width: inherit; } .ant-tooltip .ant-tooltip-inner { background: var(--app-tooltip-bg, #292524); border-radius: 2px; padding: 8px 16px; font-weight: 500; box-shadow: 0 4px 12px var(--app-tooltip-shadow, rgba(136, 77, 92, 0.3)); white-space: normal; word-break: break-word; overflow-wrap: anywhere; max-height: 50vh; overflow-y: auto; } @media (max-width: 768px) { .ant-tooltip { max-width: calc(100vw - 16px); } .ant-tooltip .ant-tooltip-inner { padding: 8px 12px; max-height: 50vh; } }