/* ============================================================ 主题皮肤覆盖层（theme_skin.css） 依赖 theme_background.js 注入的 --theme-* / --color-* 令牌 与 body[data-theme] 标记，对所有页面通用元素做整换肤： 字体、圆角、卡片质感、按钮、输入框、表格、滚动条、弹窗 引入方式：在模板 中紧跟 theme_background.css 之后引入 ============================================================ */ /* ---------- 全局字体与字重 ---------- */ body { font-family: var(--theme-font, "Microsoft YaHei", sans-serif) !important; letter-spacing: var(--theme-letter-spacing, 0.3px); font-weight: var(--theme-font-weight, 400); } /* ---------- 通用卡片/面板质感 ---------- */ .panel, .card, .glass-panel, .tool-card, .stat-card, .config-card, .login-box, .modal-box, .modal-content, .popup-box, .dialog-box { border-radius: var(--theme-radius, 12px) !important; box-shadow: var(--theme-card-shadow, none); border: var(--theme-card-border, 1px solid transparent); backdrop-filter: var(--theme-card-blur, none); -webkit-backdrop-filter: var(--theme-card-blur, none); } /* ---------- 按钮 ---------- */ button, .btn, input[type="button"], input[type="submit"] { border-radius: var(--theme-radius-small, 8px); } .theme-btn, .btn-primary, .primary-btn, .save-btn, .submit-btn { background: var(--theme-btn-bg) !important; color: var(--theme-btn-text) !important; border: var(--theme-btn-border, none) !important; box-shadow: var(--theme-btn-shadow, none); border-radius: var(--theme-radius-small, 8px) !important; } /* ---------- 输入控件 ---------- */ input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="url"], select, textarea { border-radius: var(--theme-radius-small, 8px); border: 1px solid var(--color-border, #ccc); background: var(--color-bg-card, rgba(255, 255, 255, 0.06)); color: var(--color-text-main, inherit); } input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="email"]:focus, select:focus, textarea:focus { border-color: var(--color-primary); outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 25%, transparent); } /* ---------- 表格 ---------- */ table { border-radius: var(--theme-radius-small, 8px); overflow: hidden; } th, td { border-color: var(--color-border, inherit) !important; } /* ---------- 滚动条跟随主题 ---------- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--color-primary) 45%, transparent); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--color-primary) 70%, transparent); } /* ============================================================ 按主题差异化覆盖 ============================================================ */ /* 赛博霓虹：直角、霓虹描边、等宽字体强化 */ body[data-theme="dark_cyber"] .panel, body[data-theme="dark_cyber"] .card, body[data-theme="dark_cyber"] .glass-panel, body[data-theme="dark_cyber"] .login-box, body[data-theme="dark_cyber"] .modal-box { border-radius: 2px !important; box-shadow: 0 0 18px rgba(34, 197, 94, 0.25), inset 0 0 24px rgba(34, 197, 94, 0.04) !important; border: 1px solid rgba(34, 197, 94, 0.55) !important; backdrop-filter: none !important; } body[data-theme="dark_cyber"] button, body[data-theme="dark_cyber"] input, body[data-theme="dark_cyber"] select { border-radius: 2px !important; } body[data-theme="dark_cyber"] .theme-btn, body[data-theme="dark_cyber"] .btn-primary, body[data-theme="dark_cyber"] .save-btn { background: transparent !important; color: #4ade80 !important; border: 1px solid #22c55e !important; text-shadow: 0 0 8px rgba(34, 197, 94, 0.6); } body[data-theme="dark_cyber"] .theme-btn:hover, body[data-theme="dark_cyber"] .btn-primary:hover { background: rgba(34, 197, 94, 0.12) !important; } /* 奶油清新：大圆角、柔和投影、无毛玻璃 */ body[data-theme="fresh_white"] .panel, body[data-theme="fresh_white"] .card, body[data-theme="fresh_white"] .glass-panel, body[data-theme="fresh_white"] .login-box, body[data-theme="fresh_white"] .modal-box { border-radius: 22px !important; background: #ffffff !important; backdrop-filter: none !important; box-shadow: 0 10px 30px rgba(214, 158, 46, 0.14), 0 2px 6px rgba(214, 158, 46, 0.08) !important; border: 1px solid rgba(245, 222, 179, 0.8) !important; } body[data-theme="fresh_white"] button, body[data-theme="fresh_white"] input, body[data-theme="fresh_white"] select { border-radius: 14px !important; } /* 水墨国风：楷体、细墨线、印章按钮 */ body[data-theme="warm_vintage"] .panel, body[data-theme="warm_vintage"] .card, body[data-theme="warm_vintage"] .glass-panel, body[data-theme="warm_vintage"] .login-box, body[data-theme="warm_vintage"] .modal-box { border-radius: 6px !important; backdrop-filter: none !important; border: 1px solid #c9b98f !important; box-shadow: 3px 3px 0 rgba(125, 111, 92, 0.15) !important; } body[data-theme="warm_vintage"] button, body[data-theme="warm_vintage"] input, body[data-theme="warm_vintage"] select { border-radius: 4px !important; } body[data-theme="warm_vintage"] .theme-btn, body[data-theme="warm_vintage"] .btn-primary, body[data-theme="warm_vintage"] .save-btn { background: #9f1239 !important; color: #fff7ed !important; border: none !important; box-shadow: 2px 2px 0 rgba(59, 49, 40, 0.25) !important; } /* 暗夜紫金：金边卡片、鎏金按钮 */ body[data-theme="soft_blue"] .panel, body[data-theme="soft_blue"] .card, body[data-theme="soft_blue"] .glass-panel, body[data-theme="soft_blue"] .login-box, body[data-theme="soft_blue"] .modal-box { border: 1px solid rgba(234, 179, 8, 0.35) !important; } body[data-theme="soft_blue"] .theme-btn, body[data-theme="soft_blue"] .btn-primary, body[data-theme="soft_blue"] .save-btn { background: linear-gradient(135deg, #facc15, #ca8a04) !important; color: #1a1029 !important; font-weight: 600; } /* 科技深蓝：玻璃卡片（令牌默认值已覆盖，此处补按钮发光） */ body[data-theme="flowing_light"] .theme-btn:hover, body[data-theme="flowing_light"] .btn-primary:hover { box-shadow: 0 6px 20px rgba(14, 165, 233, 0.5); }