//① 页面样式 100% 依赖外部 global-theme.css 定义的 CSS 变量，无任何硬编码的颜色 / 圆角 / 阴影 / 字体等样式； //② 图标统一使用通用线性 SVG，避免图标样式脱离主题控制； //③ 所有 HTML 页面的标签内，严格按以下顺序引入资源： //第一步：引入 global-theme.css（提供基础变量 + 通用样式）； //第二步：插入内联主题加载 JS（提前读取本地主题配置，覆盖默认变量，消除闪色）； //第三步：引入 global-theme.js（放最后，加defer避免阻塞，负责主题切换逻辑）。 //严禁修改其他 提供完整代码 不允许删减或省略 /* ===== 主题变量 ===== */ :root { /* 断点 */ --bp-mobile: 768px; --bp-tablet: 1024px; --bp-desktop: 1280px; /* 布局 */ --header-height: 60px; --footer-height: 48px; /* 留白 */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; /* ===== 新增：字体大小比例变量 ===== */ --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-md: 1rem; /* 16px (基准) */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 1.875rem; /* 30px */ --font-size-4xl: 2.25rem; /* 36px */ /* 响应式字体调整（移动端可以稍微缩小） */ --font-size-base: var(--font-size-md); --font-size-heading: var(--font-size-2xl); --font-size-title: var(--font-size-lg); --font-size-body: var(--font-size-md); --font-size-small: var(--font-size-sm); --font-size-tiny: var(--font-size-xs); /* 字体缩放比例（由JS动态设置） */ --font-scale: 1; /* 主题色 (由JS动态覆盖) */ --theme-color: #3b82f6; --theme-color-light: #60a5fa; --theme-color-deep: #2563eb; --theme-color-glow: rgba(59, 130, 246, 0.3); /* 背景 */ --bg-page: #f5f7fa; --bg-card: #ffffff; --bg-block: #f8fafc; /* 文字 */ --text-primary: #1e293b; --text-secondary: #64748b; --text-tips: #94a3b8; /* 边框 */ --border-color: #e2e8f0; --border-color-hover: var(--theme-color); /* 阴影 */ --shadow-base: 0 1px 3px rgba(0,0,0,0.1); --shadow-hover: 0 10px 25px -5px rgba(0,0,0,0.1); --shadow-theme: 0 4px 12px rgba(59, 130, 246, 0.2); --shadow-theme-deep: 0 6px 18px rgba(59, 130, 246, 0.3); /* 效果 */ --base-blur: 0px; --base-opacity: 1; --scale: 1; --bg-brightness: 1; --display-mode: cover; /* 渐变 */ --theme-gradient-primary: linear-gradient(135deg, #3b82f6, #8b5cf6); --theme-gradient-text: linear-gradient(90deg, #3b82f6, #8b5cf6); --theme-gradient-btn: linear-gradient(135deg, #3b82f6, #8b5cf6); --theme-gradient-mask: linear-gradient(135deg, rgba(59, 130, 246, 0.7), rgba(139, 92, 246, 0.85)); /* 圆角 */ --border-radius-base: 12px; --border-radius-sm: 6px; /* 字体定义 - 直接使用网络字体 */ --font-family-base: "Consolas", "JetBrains Mono","Menlo", "Monaco", "Courier New", monospace; /* 🌓 新增：黑夜模式变量（由JS动态设置） */ --night-bg-page: #0f172a; --night-bg-card: #1e293b; --night-bg-block: #334155; --night-text-main: #f8fafc; --night-text-second: #cbd5e1; --night-text-tips: #94a3b8; --night-border-color: rgba(255, 255, 255, 0.1); } /* ===== 响应式字体调整 ===== */ @media (max-width: 768px) { :root { --font-size-base: 0.9375rem; /* 15px */ --font-size-heading: 1.375rem; /* 22px */ --font-size-title: 1.0625rem; /* 17px */ --font-size-body: 0.9375rem; /* 15px */ } } /* 基础字体设置 */ html { font-size: calc(16px * var(--font-scale)); } body { font-size: var(--font-size-body); line-height: 1.5; } /* 标题字体 */ h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.2; } h1 { font-size: var(--font-size-4xl); } h2 { font-size: var(--font-size-3xl); } h3 { font-size: var(--font-size-2xl); } h4 { font-size: var(--font-size-xl); } h5 { font-size: var(--font-size-lg); } h6 { font-size: var(--font-size-md); } /* 通用文本类 */ .text-xs { font-size: var(--font-size-xs); } .text-sm { font-size: var(--font-size-sm); } .text-md { font-size: var(--font-size-md); } .text-lg { font-size: var(--font-size-lg); } .text-xl { font-size: var(--font-size-xl); } .text-2xl { font-size: var(--font-size-2xl); } .text-3xl { font-size: var(--font-size-3xl); } .text-4xl { font-size: var(--font-size-4xl); } /* 标题类 */ .heading { font-size: var(--font-size-heading); } .title { font-size: var(--font-size-title); } .body { font-size: var(--font-size-body); } .small { font-size: var(--font-size-small); } .tiny { font-size: var(--font-size-tiny); } /* ===== 基础重置 ===== */ * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { width: 100%; height: 100%; background: var(--bg-page); color: var(--text-primary); transition: background-color 0.3s ease, color 0.3s ease; } /* ===== 工业级适配容器 ===== */ .app { display: flex; flex-direction: column; width: 100%; height: 100vh; /* 降级 */ height: 100dvh; /* 现代浏览器 */ background: var(--bg-page); } /* PC端：固定一屏，内部滚动 */ @media (min-width: 1025px) { .app { overflow: hidden; } .content { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } body { overflow: hidden; } } /* 手机端：页面滚动 */ @media (max-width: 1024px) { .app { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; } .content { flex: 1 0 auto; overflow-y: visible; } body { overflow-y: auto; -webkit-overflow-scrolling: touch; } } /* ===== 通用组件 ===== */ .card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-base); box-shadow: var(--shadow-base); transition: all 0.2s; } .card:hover { box-shadow: var(--shadow-hover); border-color: var(--border-color-hover); } /* 图标 - 统一线性 */ .icon { width: 1.5em; height: 1.5em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* 按钮 */ .btn { display: inline-flex; align-items: center; padding: 0.5em 1em; border-radius: var(--border-radius-sm); border: 1px solid var(--border-color); background: var(--bg-block); color: var(--text-primary); cursor: pointer; transition: all 0.2s; } .btn:hover { border-color: var(--border-color-hover); box-shadow: var(--shadow-theme); } .btn-primary { background: var(--theme-gradient-btn); border-color: transparent; color: white; } .btn-primary:hover { box-shadow: var(--shadow-theme-deep); transform: translateY(-2px); } /* 工具类 */ .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-sm { gap: var(--space-sm); } .gap-md { gap: var(--space-md); } .p-md { padding: var(--space-md); } .mb-md { margin-bottom: var(--space-md); } /* ===== 弹窗/提示框组件 ===== */ /* 全局提示框 (悬浮提示) */ .tips-box { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; margin: auto !important; width: fit-content !important; max-width: 90vw !important; height: fit-content !important; padding: min(4vw, 16px) min(8vw, 32px) !important; border-radius: var(--border-radius-sm, 8px) !important; color: #ffffff !important; font-size: var(--font-size-sm) !important; z-index: 999999 !important; opacity: 0 !important; pointer-events: auto !important; box-shadow: var(--shadow-hover, 0 4px 20px rgba(0,0,0,0.2)) !important; transition: all 0.3s ease !important; transform: scale(0.9) !important; transform-origin: center center !important; box-sizing: border-box !important; text-align: center !important; } .tips-box.show { opacity: 1 !important; transform: scale(1) !important; } /* 错误提示 */ .tips-box.show:not(.loading):not(.success) { background: #ef4444 !important; } /* 成功提示 - 使用主题色 */ .tips-box.show.success { background: var(--theme-color, #3b82f6) !important; } /* 加载中提示 */ .tips-box.loading.show { background: var(--theme-gradient-primary) !important; transform: scale(1.05) !important; animation: tipsPulse 1.5s infinite; } /* 加载动画 */ @keyframes tipsPulse { 0%, 100% { opacity: 1; transform: scale(1.05); } 50% { opacity: 0.8; transform: scale(1); } } /* IP配置弹窗 */ .ip-modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(calc(var(--base-blur, 0px) * 2)); -webkit-backdrop-filter: blur(calc(var(--base-blur, 0px) * 2)); z-index: 9999; display: none; align-items: center; justify-content: center; } .ip-modal.show { display: flex; } .ip-modal .modal-content { background: var(--bg-card); padding: min(6vw, 24px); border-radius: var(--border-radius-base); width: 90%; max-width: 480px; box-shadow: var(--shadow-hover); border: 1px solid var(--border-color); animation: modalFadeIn 0.3s ease; } @keyframes modalFadeIn { from { opacity: 0; transform: scale(0.9) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } } .ip-modal .modal-title { font-size: var(--font-size-sm); margin-bottom: min(4vw, 16px); color: var(--text-primary); text-align: center; font-weight: 600; } .ip-modal .modal-input-group { margin-bottom: min(4vw, 16px); display: flex; align-items: center; gap: min(2vw, 8px); } .ip-modal .modal-input-label { font-size: var(--font-size-xs); color: var(--text-secondary); width: 70px; flex-shrink: 0; } .ip-modal .modal-input-group .form-control { flex: 1; height: clamp(36px, 6vw, 40px); padding: 0 min(3vw, 12px); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background: var(--bg-block); color: var(--text-primary); font-size: var(--font-size-xs); transition: all 0.3s ease; } .ip-modal .modal-input-group .form-control:focus { border-color: var(--theme-color); outline: none; box-shadow: var(--shadow-theme); } .ip-modal .modal-actions { display: flex; gap: min(3vw, 12px); margin-top: min(4vw, 16px); } .ip-modal .modal-btn { flex: 1; height: clamp(32px, 6vw, 36px); border: none; border-radius: var(--border-radius-sm); cursor: pointer; font-size: var(--font-size-xs); transition: all 0.3s ease; } .ip-modal .btn-cancel { background: var(--bg-block); color: var(--text-primary); border: 1px solid var(--border-color); } .ip-modal .btn-cancel:hover { background: var(--bg-hover, #e5e7eb); } .ip-modal .btn-save { background: var(--theme-gradient-btn); color: #ffffff; box-shadow: var(--shadow-theme); } .ip-modal .btn-save:hover { box-shadow: var(--shadow-theme-deep); transform: translateY(-2px); } /* ===== 黑夜模式样式 ===== */ /* 当 html 标签有 data-daynight="night" 属性时应用黑夜变量 */ html[data-daynight="night"] { --bg-page: var(--night-bg-page); --bg-card: var(--night-bg-card); --bg-block: var(--night-bg-block); --text-primary: var(--night-text-main); --text-secondary: var(--night-text-second); --text-tips: var(--night-text-tips); --border-color: var(--night-border-color); } /* 🌙 黑夜模式下隐藏背景图片/视频 */ html[data-daynight="night"] #bg-container, html[data-daynight="night"] #bg-video { display: none !important; } /* 主题色在黑夜模式下保持不变，确保按钮等元素依然醒目 */ html[data-daynight="night"] .btn-primary, html[data-daynight="night"] .save-btn, html[data-daynight="night"] .upload-btn, html[data-daynight="night"] .clear-btn { color: #ffffff !important; } /* 黑夜模式下的卡片悬停效果 */ html[data-daynight="night"] .card:hover { border-color: var(--theme-color); } /* 黑夜模式下的输入框 */ html[data-daynight="night"] input, html[data-daynight="night"] select, html[data-daynight="night"] textarea { background: var(--bg-block); color: var(--text-primary); border-color: var(--night-border-color); } /* 黑夜模式下的下拉框选项 */ html[data-daynight="night"] option { background: var(--night-bg-card); color: var(--night-text-main); } /* 黑夜模式下的滚动条 */ html[data-daynight="night"] ::-webkit-scrollbar-track { background: var(--night-bg-block); } html[data-daynight="night"] ::-webkit-scrollbar-thumb { background: var(--night-border-color); } html[data-daynight="night"] ::-webkit-scrollbar-thumb:hover { background: var(--theme-color); } /* ===== 中英文分开设置 ===== */ html *:not(svg):not(svg *) { font-family: "Consolas", "JetBrains Mono", "Menlo", "Monaco", "微软雅黑", "PingFang SC", "华文细黑", sans-serif !important; }