/* ============================================================ * jun-theme.css — 谜语商城V2 jun 模板统一 Design Token * 直接复制到项目: assets/css/jun-theme.css * 在 HTML 中引入（早于各页面样式，晚于 Bootstrap）。 * ============================================================ */ :root { /* 品牌色：紫蓝渐变，全站唯一主操作色 */ --jun-brand-primary: #667eea; --jun-brand-primary-2: #764ba2; --jun-brand-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --jun-brand-focus-ring: 0 0 0 3px rgba(102, 126, 234, 0.25); /* 文本 */ --jun-text-strong: #333; --jun-text-base: #444; --jun-text-muted: #555; --jun-text-subtle: #666; --jun-text-placeholder: #999; --jun-text-on-brand: #fff; /* 背景 */ --jun-bg-card: #fff; --jun-bg-card-glass: rgba(255, 255, 255, 0.25); --jun-bg-card-glass-hover: rgba(255, 255, 255, 0.35); --jun-bg-header: #f5f7fa; --jun-bg-hover: #f5f7fa; --jun-bg-overlay: rgba(0, 0, 0, 0.5); /* 边框 */ --jun-border-base: #dee2e6; --jun-border-light: #e6e6e6; --jun-border-glass: rgba(255, 255, 255, 0.4); /* 语义状态色（仅用于 success/warning/danger/info，不得作为主按钮色） */ --jun-state-info: #667eea; --jun-state-success: #28a745; --jun-state-warning: #ffc107; --jun-state-danger: #dc3545; /* 圆角 */ --jun-radius-sm: 6px; --jun-radius-md: 10px; --jun-radius-lg: 12px; --jun-radius-xl: 16px; --jun-radius-2xl: 20px; --jun-radius-pill: 25px; --jun-radius-circle: 50%; /* 阴影 */ --jun-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.1); --jun-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15); --jun-shadow-floating: 0 8px 30px rgba(0, 0, 0, 0.15); --jun-shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.1); /* 字号 */ --jun-font-body: 1rem; --jun-font-sm: 0.85rem; --jun-font-xs: 0.75rem; --jun-font-table: 13px; --jun-font-slot-name: 11px; --jun-font-slot-info: 10px; } /* 暗色模式：data-jun-theme="dark" 或 Layui 暗色 html.dark-style */ [data-jun-theme="dark"], html.dark-style { --jun-text-strong: #ffffff; --jun-text-base: #cfd4e4; --jun-text-muted: #a0a4c0; --jun-text-subtle: #a0a4c0; --jun-text-placeholder: #6b6f8e; --jun-bg-card: #2f3349; --jun-bg-card-glass: rgba(47, 51, 73, 0.6); --jun-bg-card-glass-hover: rgba(47, 51, 73, 0.8); --jun-bg-header: #2f3349; --jun-bg-hover: rgba(255, 255, 255, 0.04); --jun-border-base: #434968; --jun-border-light: #3e4263; --jun-border-glass: rgba(67, 73, 104, 0.6); --jun-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3); --jun-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.4); --jun-shadow-floating: 0 8px 30px rgba(0, 0, 0, 0.4); --jun-shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.4); } /* ---------- 公共组件类 ---------- */ .text-muted, .jun-text-muted { color: var(--jun-text-muted) !important; } .bg-jun-gradient { background: var(--jun-brand-gradient); } .jun-btn-primary { background: var(--jun-brand-gradient); color: var(--jun-text-on-brand); border: none; border-radius: var(--jun-radius-sm); padding: 6px 16px; font-size: var(--jun-font-table); cursor: pointer; transition: all 0.2s ease; } .jun-btn-primary:hover { opacity: 0.92; transform: translateY(-1px); box-shadow: var(--jun-shadow-hover); } .jun-card { background: var(--jun-bg-card); border-radius: var(--jun-radius-lg); box-shadow: var(--jun-shadow-card); transition: all 0.3s ease; } .jun-card:hover { transform: translateY(-3px); box-shadow: var(--jun-shadow-hover); } .jun-card-glass { background: var(--jun-bg-card-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--jun-border-glass); border-radius: var(--jun-radius-2xl); box-shadow: var(--jun-shadow-glass); }