/* Tech Theme — 深空霓虹科技配色系统 */ /* 使用方式：给页面添加类 .ui-tech-dark 或 .ui-tech-light */ /* ============== Dark Variant ============== */ .ui-tech-dark { --tt-grad-angle: 130deg; --tt-bg-1: #060B16; --tt-bg-2: #0A192F; --tt-surface: rgba(13,26,45,0.82); --tt-surface-2: rgba(12,24,40,0.68); --tt-border: #1F2A3D; --tt-text: #FFFFFF; --tt-text-secondary: #E6F1FF; --tt-text-muted: #8AA7C7; --tt-primary: #00D1FF; --tt-secondary: #66E0FF; --tt-danger: #FF4D6D; --tt-success: #1EE2A2; --tt-warning: #F9C846; --tt-accent: #8D6BFF; --tt-focus: rgba(0,209,255,0.45); --tt-glass-bg: rgba(10,25,47,0.55); --tt-glass-border: rgba(120,185,255,0.18); color: var(--tt-text); background: linear-gradient(var(--tt-grad-angle), var(--tt-bg-1), var(--tt-bg-2)), repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 20px), repeating-linear-gradient(90deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 20px); font-family: 'Inter', 'Segoe UI', 'Microsoft YaHei', sans-serif; } .ui-tech-dark .container { background: var(--tt-surface); color: var(--tt-text); border-radius: 12px; box-shadow: 0 10px 26px rgba(0,0,0,0.35); } .ui-tech-dark h1 { color: var(--tt-text); } .ui-tech-dark h2 { color: var(--tt-text); opacity: 0.92; } .ui-tech-dark h3 { color: var(--tt-text); opacity: 0.88; } .ui-tech-dark .card, .ui-tech-dark .result-box, .ui-tech-dark .modal, .ui-tech-dark .fees-card, .ui-tech-dark .cost-card, .ui-tech-dark .scenario-a-card, .ui-tech-dark .scenario-b-card { background: var(--tt-glass-bg); border: 1px solid var(--tt-glass-border); border-radius: 12px; -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); } @supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) { .ui-tech-dark .card, .ui-tech-dark .result-box, .ui-tech-dark .modal, .ui-tech-dark .fees-card, .ui-tech-dark .cost-card, .ui-tech-dark .scenario-a-card, .ui-tech-dark .scenario-b-card { background: rgba(18,24,36,0.75); } } /* 表格强调单元格 */ .ui-tech-dark .suggest-table td.price-cell, .ui-tech-dark .suggest-table td.profit-cell { font-weight: 700; color: #F6F8FA; background: #1A1F2B; border: 1px solid #3A4450; border-radius: 10px; text-shadow: none; } /* 按钮系统 */ .ui-tech-dark .btn, .ui-tech-dark .button, .ui-tech-dark button { font-weight: 600; border-radius: 10px; border: 1px solid var(--tt-glass-border); transition: transform 180ms ease, filter 180ms ease, background-color 180ms ease, color 180ms ease; } .ui-tech-dark .btn-primary { background: var(--tt-primary); color: #ffffff; border-color: transparent; } .ui-tech-dark .btn-primary:hover { filter: brightness(0.95); } .ui-tech-dark .btn-primary:active { transform: translateY(1px) scale(0.99); } .ui-tech-dark .btn-secondary { background: #1F2937; color: var(--tt-text); border-color: #3B445A; } .ui-tech-dark .btn-secondary:hover { filter: brightness(0.97); } .ui-tech-dark .btn-secondary:active { transform: translateY(1px) scale(0.99); } .ui-tech-dark .btn-danger { background: var(--tt-danger); color: #ffffff; border-color: transparent; } .ui-tech-dark .btn-danger:hover { filter: brightness(0.95); } .ui-tech-dark .btn-danger:active { transform: translateY(1px) scale(0.99); } .ui-tech-dark .btn:disabled, .ui-tech-dark button:disabled { opacity: 0.7; filter: grayscale(20%); cursor: not-allowed; } .ui-tech-dark .btn:focus-visible { outline: 2px solid var(--tt-focus); box-shadow: 0 0 0 2px rgba(59,130,246,0.25); } /* 输入/选择 */ .ui-tech-dark input, .ui-tech-dark select, .ui-tech-dark textarea { background: rgba(255,255,255,0.10); color: var(--tt-text); border: 1px solid var(--tt-glass-border); border-radius: 8px; } .ui-tech-dark input:focus, .ui-tech-dark select:focus, .ui-tech-dark textarea:focus { outline: 2px solid var(--tt-focus); box-shadow: 0 0 0 2px rgba(59,130,246,0.25); } /* ============== Light Variant (备用) ============== */ .ui-tech-light { --tt-grad-angle: 135deg; --tt-bg-1: #F4FAFF; --tt-bg-2: #E5F2FF; --tt-surface: #FFFFFF; --tt-surface-2: #F6FAFF; --tt-border: #C5E7FF; --tt-text: #0A192F; --tt-text-secondary: #223958; --tt-text-muted: #4E6A8E; --tt-primary: #0096FF; --tt-secondary: #00B2FF; --tt-danger: #FF4D6D; --tt-success: #1FBF84; --tt-warning: #FFB347; --tt-accent: #5E71FF; --tt-focus: rgba(0,149,255,0.35); --tt-glass-bg: rgba(255,255,255,0.72); --tt-glass-border: rgba(8,120,200,0.14); color: var(--tt-text); background: linear-gradient(var(--tt-grad-angle), var(--tt-bg-1), var(--tt-bg-2)), repeating-linear-gradient(0deg, rgba(0,40,80,0.015) 0px, rgba(0,40,80,0.015) 1px, transparent 1px, transparent 20px), repeating-linear-gradient(90deg, rgba(0,40,80,0.015) 0px, rgba(0,40,80,0.015) 1px, transparent 1px, transparent 20px); } .ui-tech-light .container { background: var(--tt-surface); color: var(--tt-text); border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,0.10); } .ui-tech-light h1 { color: var(--tt-text); } .ui-tech-light h2 { color: var(--tt-text); opacity: 0.92; } .ui-tech-light h3 { color: var(--tt-text); opacity: 0.88; } .ui-tech-light .card, .ui-tech-light .result-box, .ui-tech-light .modal, .ui-tech-light .fees-card, .ui-tech-light .cost-card, .ui-tech-light .scenario-a-card, .ui-tech-light .scenario-b-card { background: var(--tt-glass-bg); border: 1px solid var(--tt-glass-border); border-radius: 12px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .ui-tech-light .suggest-table td.price-cell, .ui-tech-light .suggest-table td.profit-cell { font-weight: 700; color: #111827; background: rgba(212,175,55,0.12); border: 1px solid var(--tt-border); border-radius: 10px; text-shadow: none; } .ui-tech-light .btn, .ui-tech-light .button, .ui-tech-light button { font-weight: 600; border-radius: 10px; border: 1px solid var(--tt-border); transition: transform 180ms ease, filter 180ms ease, background-color 180ms ease, color 180ms ease; } .ui-tech-light .btn-primary { background: var(--tt-primary); color: #ffffff; border-color: transparent; } .ui-tech-light .btn-primary:hover { filter: brightness(0.95); } .ui-tech-light .btn-primary:active { transform: translateY(1px) scale(0.99); } .ui-tech-light .btn-secondary { background: #EEF2F7; color: var(--tt-text); border-color: var(--tt-border); } .ui-tech-light .btn-secondary:hover { filter: brightness(0.98); } .ui-tech-light .btn-secondary:active { transform: translateY(1px) scale(0.99); } .ui-tech-light .btn-danger { background: var(--tt-danger); color: #ffffff; border-color: transparent; } .ui-tech-light .btn-danger:hover { filter: brightness(0.95); } .ui-tech-light .btn-danger:active { transform: translateY(1px) scale(0.99); } .ui-tech-light .btn:disabled, .ui-tech-light button:disabled { opacity: 0.7; filter: grayscale(20%); cursor: not-allowed; } .ui-tech-light .btn:focus-visible { outline: 2px solid var(--tt-focus); box-shadow: 0 0 0 2px rgba(37,99,235,0.25); } /* 高对比度模式 */ @media (forced-colors: active) { .ui-tech-dark, .ui-tech-light { forced-color-adjust: none; } }