/** * 科技风业务页表面 / 正文字色 Token（成交系统等深色玻璃 UI） * 由 tech-surface-bootstrap.js 在 上切换 orders-readable / orders-high-contrast */ /* 关闭「清晰显示」时的 legacy 回退 */ :root { --tech-surface-card: rgba(15, 23, 42, 0.8); --tech-surface-nested: rgba(15, 23, 42, 0.45); --tech-surface-input: rgba(15, 23, 42, 0.85); --tech-surface-modal: rgba(30, 41, 59, 0.9); --tech-surface-table: rgba(15, 23, 42, 0.6); --tech-surface-table-row-even: rgba(30, 41, 59, 0.5); --tech-border-card: rgba(99, 102, 241, 0.4); --tech-inset-highlight: rgba(255, 255, 255, 0.1); --tech-shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4); --tech-glow-card: 0 0 30px rgba(99, 102, 241, 0.2); --tech-blur-card: 12px; --tech-text-title: #e2e8f0; --tech-text-body: #cbd5e1; --tech-text-label: #94a3b8; --tech-text-muted: #94a3b8; --tech-text-placeholder: rgba(226, 232, 240, 0.5); --tech-fs-xs: 0.75rem; --tech-fs-sm: 0.875rem; --tech-fs-kpi: 2rem; } /* 清晰显示（默认开启） */ html.orders-readable { --tech-surface-card: linear-gradient( 145deg, rgba(30, 41, 59, 0.88) 0%, rgba(51, 65, 85, 0.72) 100% ); --tech-surface-nested: rgba(51, 65, 85, 0.38); --tech-surface-input: rgba(30, 41, 59, 0.85); --tech-surface-modal: linear-gradient( 165deg, rgba(30, 41, 59, 0.94) 0%, rgba(51, 65, 85, 0.9) 100% ); --tech-surface-table: rgba(30, 41, 59, 0.55); --tech-surface-table-row-even: rgba(51, 65, 85, 0.28); --tech-border-card: rgba(99, 102, 241, 0.42); --tech-inset-highlight: rgba(255, 255, 255, 0.16); --tech-shadow-card: 0 8px 24px rgba(0, 0, 0, 0.28); --tech-glow-card: 0 0 24px rgba(99, 102, 241, 0.2); --tech-blur-card: 10px; --tech-text-title: #f8fafc; --tech-text-body: #e2e8f0; --tech-text-label: #cbd5e1; --tech-text-muted: #94a3b8; --tech-text-placeholder: rgba(226, 232, 240, 0.55); } /* 高对比（与清晰显示互斥生效，仅加此类） */ html.orders-high-contrast { --tech-surface-card: linear-gradient( 145deg, rgba(51, 65, 85, 0.92) 0%, rgba(71, 85, 105, 0.82) 100% ); --tech-surface-nested: rgba(71, 85, 105, 0.45); --tech-surface-input: rgba(51, 65, 85, 0.9); --tech-surface-modal: linear-gradient( 165deg, rgba(51, 65, 85, 0.96) 0%, rgba(71, 85, 105, 0.92) 100% ); --tech-surface-table: rgba(51, 65, 85, 0.62); --tech-surface-table-row-even: rgba(71, 85, 105, 0.32); --tech-inset-highlight: rgba(255, 255, 255, 0.22); --tech-shadow-card: 0 8px 20px rgba(0, 0, 0, 0.22); --tech-blur-card: 6px; --tech-text-title: #ffffff; --tech-text-body: #f8fafc; --tech-text-label: #e2e8f0; --tech-text-muted: #cbd5e1; --tech-text-placeholder: rgba(248, 250, 252, 0.65); } /* ========== P2：共享玻璃态表面与正文字色（多业务页） ========== */ @keyframes tech-surface-shine { 0% { left: -100%; } 100% { left: 100%; } } .tech-card { background: var(--tech-surface-card); border: 1px solid var(--tech-border-card); box-shadow: var(--tech-shadow-card), 0 0 0 1px rgba(99, 102, 241, 0.3), inset 0 1px 0 var(--tech-inset-highlight), var(--tech-glow-card); backdrop-filter: blur(var(--tech-blur-card)); -webkit-backdrop-filter: blur(var(--tech-blur-card)); transition: all 0.3s ease; position: relative; overflow: hidden; } .tech-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent); animation: tech-surface-shine 3s infinite; pointer-events: none; z-index: 0; } .tech-card:hover { box-shadow: 0 12px 48px rgba(99, 102, 241, 0.5), 0 0 0 1px rgba(99, 102, 241, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 40px rgba(99, 102, 241, 0.3); transform: translateY(-2px); } .kpi-card, .stat-card { background: var(--tech-surface-card); border: 1px solid var(--tech-border-card); border-radius: 8px; padding: 20px; box-shadow: var(--tech-shadow-card), 0 0 0 1px rgba(99, 102, 241, 0.3), inset 0 1px 0 var(--tech-inset-highlight), var(--tech-glow-card); backdrop-filter: blur(var(--tech-blur-card)); -webkit-backdrop-filter: blur(var(--tech-blur-card)); transition: all 0.3s ease; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .kpi-card::before, .stat-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent); animation: tech-surface-shine 3s infinite; pointer-events: none; z-index: 0; } .kpi-card:hover, .stat-card:hover { transform: translateY(-2px); box-shadow: 0 12px 48px rgba(99, 102, 241, 0.5), 0 0 0 1px rgba(99, 102, 241, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 40px rgba(99, 102, 241, 0.3); } .kpi-value { font-size: var(--tech-fs-kpi); font-weight: 700; color: var(--tech-text-title); line-height: 1.2; text-align: center; } .kpi-label { font-size: var(--tech-fs-sm); color: var(--tech-text-label); margin-top: 8px; text-align: center; line-height: 1.45; } .kpi-label:first-child { margin-top: 0; } .tech-card .text-gray-400, .kpi-card .text-gray-400, .stat-card .text-gray-400 { color: var(--tech-text-label) !important; } .tech-card .text-gray-300, .kpi-card .text-gray-300, .stat-card .text-gray-300 { color: var(--tech-text-body) !important; } .tech-card .text-gray-500, .kpi-card .text-gray-500, .stat-card .text-gray-500 { color: var(--tech-text-muted) !important; } .tech-card label.text-gray-400, .tech-card .text-xs.text-gray-400 { color: var(--tech-text-label); } /* 个人中心主内容卡片（与 .tech-card 同 Token，保留圆角/内边距在 profile.css） */ .profile-card { background: var(--tech-surface-card); border: 1px solid var(--tech-border-card); box-shadow: var(--tech-shadow-card), 0 0 0 1px rgba(99, 102, 241, 0.25), inset 0 1px 0 var(--tech-inset-highlight), var(--tech-glow-card); backdrop-filter: blur(var(--tech-blur-card)); -webkit-backdrop-filter: blur(var(--tech-blur-card)); color: var(--tech-text-body); } .profile-card .text-gray-400, .profile-card .text-xs.text-gray-400 { color: var(--tech-text-label) !important; } .profile-card .text-gray-300 { color: var(--tech-text-body) !important; } .profile-card .text-white, .profile-card h2, .profile-card h3 { color: var(--tech-text-title); } .profile-card .form-label { color: var(--tech-text-title); } /* 表格：仅抬中性字色与底衬，表头渐变由各页保留 */ .admin-table, .finance-table, .tech-table { background: var(--tech-surface-table); } .admin-table td, .finance-table td, .tech-table td { color: var(--tech-text-body); } .admin-table th, .finance-table th, .tech-table th { color: var(--tech-text-title); } .admin-table tbody tr:nth-child(even), .finance-table tbody tr:nth-child(even), .tech-table tbody tr:nth-child(even) { background-color: var(--tech-surface-table-row-even); } .form-input { background: var(--tech-surface-input); color: var(--tech-text-body); } .form-input::placeholder { color: var(--tech-text-placeholder); } .form-input:focus { color: var(--tech-text-title); } .modal-content { background: var(--tech-surface-modal); color: var(--tech-text-body); backdrop-filter: blur(var(--tech-blur-card)); -webkit-backdrop-filter: blur(var(--tech-blur-card)); }