/* ============================================================ MG-UI · 美域高统一组件系统 v1.0 ------------------------------------------------------------ 四个层次，从下往上： 1) TOKENS 设计令牌（自带命名空间 --mg-*，不干扰宿主页面） 2) MATERIAL 材质层：毛玻璃 / 柔阴影 / 渐变网格 / 颗粒纹理 / 3D 画布容器 3) MOTION 动效层：滚动渐入 / 错峰 / 呼吸 / 涟漪 / 微交互 4) COMPONENT 组件层：按钮 / 卡片 / 徽标 / 表单 / 空态 / 加载 / 错误 / 成功每个交互组件都覆盖 default·hover·active·focus·loading·disabled ------------------------------------------------------------ 用法：深色宿主页在上切换配色。 ============================================================ */ /* ═══════════════ 1. TOKENS ═══════════════ */ :root{ /* 品牌 */ --mg-brand:#10B981; --mg-brand-dark:#059669; --mg-brand-deep:#047857; --mg-brand-50:rgba(var(--mg-brand-rgb),.10); --mg-brand-100:rgba(var(--mg-brand-rgb),.20); --mg-blue:#3B82F6; --mg-violet:#8B5CF6; --mg-amber:#F59E0B; --mg-red:#EF4444; --mg-cyan:#06B6D4; /* 语义文字 */ --mg-text:#0B1220; --mg-text-2:#4A5A72; --mg-text-3:#8A99AD; /* 表面 */ --mg-surface:#FFFFFF; --mg-surface-2:#F4F7FA; --mg-surface-soft:#F8FAFC; --mg-hairline:rgba(15,23,42,.06); --mg-border:rgba(15,23,42,.09); --mg-hairline-strong:rgba(15,23,42,.14); /* 柔阴影（两层错位，模拟真实厚度） */ --mg-shadow-xs:0 1px 2px rgba(11,18,32,.04); --mg-shadow-sm:0 1px 2px rgba(11,18,32,.04),0 1px 3px rgba(11,18,32,.06); --mg-shadow-md:0 2px 6px rgba(11,18,32,.05),0 8px 24px -10px rgba(11,18,32,.12); --mg-shadow-lg:0 10px 30px -12px rgba(11,18,32,.18),0 30px 60px -40px rgba(11,18,32,.20); --mg-shadow-brand:0 10px 26px -12px rgba(var(--mg-brand-rgb),.90); --mg-ring:0 0 0 3px rgba(var(--mg-brand-rgb),.16); /* 圆角 */ --mg-r-xs:8px; --mg-r-sm:10px; --mg-r:13px; --mg-r-lg:18px; --mg-r-xl:22px; --mg-r-pill:999px; /* 渐变 */ --mg-grad-brand:linear-gradient(135deg,#10B981 0%,#059669 58%,#047857 100%); --mg-grad-blue:linear-gradient(135deg,#3B82F6,#2563EB); --mg-grad-amber:linear-gradient(135deg,#FBBF24,#F59E0B); --mg-grad-red:linear-gradient(135deg,#F87171,#EF4444); --mg-grad-violet:linear-gradient(135deg,#A78BFA,#7C3AED); --mg-grad-ink:linear-gradient(135deg,#0B1220,#1E293B); /* 毛玻璃 */ --mg-glass-blur:blur(22px) saturate(180%); --mg-glass-bg:rgba(255,255,255,.78); --mg-glass-bg-strong:rgba(255,255,255,.92); --mg-glass-border:rgba(255,255,255,.55); /* 动效曲线 */ --mg-ease:cubic-bezier(.22,1,.36,1); /* 弹性出场 */ --mg-ease-spring:cubic-bezier(.34,1.56,.64,1);/* 回弹 */ --mg-ease-out:cubic-bezier(.16,1,.3,1); --mg-dur-fast:140ms; --mg-dur:220ms; --mg-dur-slow:420ms; --mg-font:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Helvetica Neue",sans-serif; --mg-font-mono:"SF Mono","Fira Code","Consolas",monospace; } /* 深色宿主（登录页等） */ [data-mg-theme="dark"]{ --mg-text:#FFFFFF; --mg-text-2:rgba(255,255,255,.72); --mg-text-3:rgba(255,255,255,.46); --mg-surface:rgba(255,255,255,.06); --mg-surface-2:rgba(255,255,255,.10); --mg-surface-soft:rgba(255,255,255,.04); --mg-hairline:rgba(255,255,255,.12); --mg-border:rgba(255,255,255,.16); --mg-hairline-strong:rgba(255,255,255,.24); --mg-glass-bg:rgba(255,255,255,.08); --mg-glass-bg-strong:rgba(255,255,255,.14); --mg-glass-border:rgba(255,255,255,.18); --mg-shadow-xs:0 1px 2px rgba(0,0,0,.24); --mg-shadow-sm:0 1px 3px rgba(0,0,0,.28); --mg-shadow-md:0 8px 24px -10px rgba(0,0,0,.45); --mg-shadow-lg:0 20px 50px -18px rgba(0,0,0,.60); } /* 局部浅色主题：深色宿主页面里的浅色卡片（如登录页表单卡）局部反色，使 .mg-* 组件在卡片内仍按浅色规则渲染 */ [data-mg-theme="light"]{ --mg-text:#0B1220; --mg-text-2:#4A5A72; --mg-text-3:#8A99AD; --mg-surface:#FFFFFF; --mg-surface-2:#F4F7FA; --mg-surface-soft:#F8FAFC; --mg-hairline:rgba(15,23,42,.06); --mg-border:rgba(15,23,42,.09); --mg-hairline-strong:rgba(15,23,42,.14); --mg-glass-bg:rgba(255,255,255,.92); --mg-glass-bg-strong:rgba(255,255,255,.98); --mg-glass-border:rgba(15,23,42,.06); --mg-shadow-xs:0 1px 2px rgba(11,18,32,.04); --mg-shadow-sm:0 1px 2px rgba(11,18,32,.04),0 1px 3px rgba(11,18,32,.06); --mg-shadow-md:0 2px 6px rgba(11,18,32,.05),0 8px 24px -10px rgba(11,18,32,.12); --mg-shadow-lg:0 10px 30px -12px rgba(11,18,32,.18),0 30px 60px -40px rgba(11,18,32,.20); } /* ═══════════════ 2. MATERIAL 材质层 ═══════════════ */ /* 2.1 毛玻璃 */ .mg-glass{ background:var(--mg-glass-bg); -webkit-backdrop-filter:var(--mg-glass-blur); backdrop-filter:var(--mg-glass-blur); border:1px solid var(--mg-hairline); } .mg-glass--solid{background:var(--mg-glass-bg-strong)} /* 2.2 柔阴影 */ .mg-soft{box-shadow:var(--mg-shadow-sm)} .mg-soft--md{box-shadow:var(--mg-shadow-md)} .mg-soft--lg{box-shadow:var(--mg-shadow-lg)} .mg-hairline{border:1px solid var(--mg-hairline)} /* 2.3 渐变网格（缓慢漂移的多色团块） */ .mg-mesh{ position:fixed; inset:-20%; pointer-events:none; z-index:0; overflow:hidden; } .mg-mesh i{ position:absolute; display:block; border-radius:50%; filter:blur(84px); opacity:.30; will-change:transform; } .mg-mesh i:nth-child(1){width:46vw;height:46vw;left:-6vw;top:-10vw; background:radial-gradient(circle at 35% 35%,rgba(var(--mg-brand-rgb),.58),transparent 72%); animation:mgMeshA 26s var(--mg-ease) infinite alternate} .mg-mesh i:nth-child(2){width:38vw;height:38vw;right:-4vw;top:-6vw; background:radial-gradient(circle at 60% 40%,rgba(var(--mg-acc2-rgb),.52),transparent 72%); animation:mgMeshB 32s var(--mg-ease) infinite alternate} .mg-mesh i:nth-child(3){width:42vw;height:42vw;right:6vw;bottom:-14vw; background:radial-gradient(circle at 45% 55%,rgba(var(--mg-acc3-rgb),.46),transparent 72%); animation:mgMeshC 29s var(--mg-ease) infinite alternate} .mg-mesh i:nth-child(4){width:30vw;height:30vw;left:14vw;bottom:-8vw; background:radial-gradient(circle at 50% 50%,var(--mg-mesh-4),transparent 72%); animation:mgMeshD 35s var(--mg-ease) infinite alternate} @keyframes mgMeshA{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(9vw,7vh,0) scale(1.18)}} @keyframes mgMeshB{from{transform:translate3d(0,0,0) scale(1.1)}to{transform:translate3d(-8vw,10vh,0) scale(.92)}} @keyframes mgMeshC{from{transform:translate3d(0,0,0) scale(.95)}to{transform:translate3d(-10vw,-8vh,0) scale(1.2)}} @keyframes mgMeshD{from{transform:translate3d(0,0,0) scale(1.05)}to{transform:translate3d(7vw,-6vh,0) scale(.9)}} /* 2.4 颗粒纹理（film grain，叠在最上层只做质感不挡交互） */ .mg-grain::after{ content:""; position:fixed; inset:0; pointer-events:none; z-index:9990; opacity:.032; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22160%22%20height=%22160%22%3E%3Cfilter%20id=%22n%22%3E%3CfeTurbulence%20type=%22fractalNoise%22%20baseFrequency=%22.85%22%20numOctaves=%223%22%20stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect%20width=%22160%22%20height=%22160%22%20filter=%22url(%23n)%22/%3E%3C/svg%3E"); } [data-mg-theme="dark"] .mg-grain::after{opacity:.05;mix-blend-mode:overlay} /* 2.5 3D 氛围层容器（由 mg-scene.js 注入 canvas） */ #mg-scene{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:var(--mg-scene-opacity,1); transition:opacity 1.2s var(--mg-ease); } #mg-scene.is-ready{opacity:var(--mg-scene-opacity,1)} #mg-scene canvas{display:block; width:100%; height:100%} /* 2.6 内容层要浮在材质之上 */ .mg-layer{position:relative; z-index:1} /* ═══════════════ 3. MOTION 动效层 ═══════════════ */ /* 3.1 滚动渐入 */ .mg-reveal{ opacity:0; transform:translateY(18px); transition:opacity var(--mg-dur-slow) var(--mg-ease-out), transform var(--mg-dur-slow) var(--mg-ease-out); transition-delay:var(--mg-delay,0ms); will-change:opacity,transform; } .mg-reveal.mg-in{opacity:1; transform:none} .mg-reveal--left{transform:translateX(-22px)} .mg-reveal--right{transform:translateX(22px)} .mg-reveal--zoom{transform:scale(.96)} .mg-reveal--fade{transform:none} /* 3.2 呼吸（极缓的明暗/尺度起伏） */ .mg-breathe{animation:mgBreathe 4.2s var(--mg-ease) infinite} @keyframes mgBreathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.035);opacity:.88}} .mg-dot{width:7px;height:7px;border-radius:50%;background:var(--mg-brand);flex:0 0 auto} .mg-dot--live{box-shadow:0 0 0 0 rgba(var(--mg-brand-rgb),.55);animation:mgPulse 2.4s var(--mg-ease) infinite} @keyframes mgPulse{0%{box-shadow:0 0 0 0 rgba(var(--mg-brand-rgb),.55)}70%{box-shadow:0 0 0 9px rgba(var(--mg-brand-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--mg-brand-rgb),0)}} /* 3.3 涟漪（由 mg-motion.js 注入 span） */ .mg-ripple{position:absolute; border-radius:50%; pointer-events:none; transform:scale(0); background:radial-gradient(circle,rgba(255,255,255,.55),rgba(255,255,255,0) 70%); animation:mgRipple .62s var(--mg-ease-out) forwards} .mg-ripple--dark{background:radial-gradient(circle,rgba(var(--mg-brand-rgb),.35),rgba(var(--mg-brand-rgb),0) 70%)} @keyframes mgRipple{to{transform:scale(2.6);opacity:0}} /* 3.4 悬浮（3D 层元素用） */ .mg-float{animation:mgFloat 6s ease-in-out infinite} @keyframes mgFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} /* 3.5 骨架屏 */ .mg-skeleton{ background:linear-gradient(90deg,rgba(15,23,42,.05) 25%,rgba(15,23,42,.09) 37%,rgba(15,23,42,.05) 63%); background-size:400% 100%; animation:mgShimmer 1.5s ease infinite; border-radius:var(--mg-r-xs); color:transparent!important; user-select:none; } [data-mg-theme="dark"] .mg-skeleton{ background:linear-gradient(90deg,rgba(255,255,255,.06) 25%,rgba(255,255,255,.14) 37%,rgba(255,255,255,.06) 63%); background-size:400% 100%; } @keyframes mgShimmer{0%{background-position:100% 0}100%{background-position:0 0}} /* ═══════════════ 4. COMPONENT 组件层 ═══════════════ */ /* ── 4.1 按钮 ── */ .mg-btn{ position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 20px; border-radius:var(--mg-r); font-family:var(--mg-font); font-size:13px; font-weight:650; line-height:1; letter-spacing:.01em; cursor:pointer; border:1px solid transparent; text-decoration:none; white-space:nowrap; user-select:none; transition:transform var(--mg-dur) var(--mg-ease), box-shadow var(--mg-dur) var(--mg-ease), background-color var(--mg-dur) var(--mg-ease), border-color var(--mg-dur) var(--mg-ease), color var(--mg-dur) var(--mg-ease), filter var(--mg-dur) var(--mg-ease); } .mg-btn:active{transform:translateY(1px) scale(.985)} .mg-btn:focus-visible{outline:none; box-shadow:var(--mg-ring)} .mg-btn--primary{background:var(--mg-grad-brand); color:#fff; box-shadow:var(--mg-shadow-brand)} .mg-btn--primary:hover{filter:brightness(1.06); transform:translateY(-1px)} .mg-btn--ghost{background:var(--mg-glass-bg-strong); color:var(--mg-text-2); border-color:var(--mg-border)} .mg-btn--ghost:hover{color:var(--mg-brand-deep); border-color:rgba(var(--mg-brand-rgb),.42); background:var(--mg-brand-50)} .mg-btn--soft{background:var(--mg-brand-50); color:var(--mg-brand-deep); border-color:rgba(var(--mg-brand-rgb),.20)} .mg-btn--soft:hover{background:var(--mg-brand-100)} .mg-btn--danger{background:rgba(var(--mg-danger-rgb),.07); color:var(--mg-danger-deep); border-color:rgba(var(--mg-danger-rgb),.26)} .mg-btn--danger:hover{background:rgba(var(--mg-danger-rgb),.14); border-color:rgba(var(--mg-danger-rgb),.5)} .mg-btn--ink{background:var(--mg-grad-ink); color:#fff} .mg-btn--ink:hover{filter:brightness(1.15)} .mg-btn--icon{padding:0; width:38px; height:38px; border-radius:var(--mg-r-sm)} .mg-btn--sm{padding:7px 13px; font-size:12px; border-radius:var(--mg-r-sm)} .mg-btn--lg{padding:14px 26px; font-size:14px; border-radius:var(--mg-r-lg)} .mg-btn--block{display:flex; width:100%} /* 状态：禁用 */ .mg-btn:disabled,.mg-btn[aria-disabled="true"],.mg-btn.is-disabled{ opacity:.5; cursor:not-allowed; filter:grayscale(.25); pointer-events:none; } /* 状态：加载中（保留宽度 + 文字淡出 + 旋转环） */ .mg-btn[data-mg-loading]{color:transparent!important; pointer-events:none} .mg-btn[data-mg-loading] > *{visibility:hidden} .mg-btn[data-mg-loading]::after{ content:""; position:absolute; left:50%; top:50%; width:16px; height:16px; margin:-8px 0 0 -8px; border:2px solid rgba(255,255,255,.42); border-top-color:#fff; border-radius:50%; animation:mgSpin .7s linear infinite; } .mg-btn--ghost[data-mg-loading]::after,.mg-btn--soft[data-mg-loading]::after,.mg-btn--danger[data-mg-loading]::after{ border-color:rgba(15,23,42,.18); border-top-color:var(--mg-brand); } /* 状态：成功回执 */ .mg-btn.is-success{background:var(--mg-grad-brand); color:#fff; box-shadow:var(--mg-shadow-brand)} @keyframes mgSpin{to{transform:rotate(360deg)}} /* ── 4.2 旋转指示器 ── */ .mg-spinner{ display:inline-block; width:20px; height:20px; flex:0 0 auto; border:2px solid rgba(var(--mg-brand-rgb),.22); border-top-color:var(--mg-brand); border-radius:50%; animation:mgSpin .72s linear infinite; } .mg-spinner--sm{width:14px;height:14px;border-width:2px} .mg-spinner--lg{width:32px;height:32px;border-width:3px} .mg-spinner--onbrand{border-color:rgba(255,255,255,.35); border-top-color:#fff} /* ── 4.3 卡片 ── */ .mg-card{ position:relative; background:var(--mg-surface); border:1px solid var(--mg-hairline); border-radius:var(--mg-r-lg); padding:18px; box-shadow:var(--mg-shadow-sm); transition:transform var(--mg-dur) var(--mg-ease), box-shadow var(--mg-dur) var(--mg-ease), border-color var(--mg-dur) var(--mg-ease); } .mg-card--hover:hover{transform:translateY(-2px); box-shadow:var(--mg-shadow-md); border-color:rgba(var(--mg-brand-rgb),.30)} .mg-card--glass{background:var(--mg-glass-bg); -webkit-backdrop-filter:var(--mg-glass-blur); backdrop-filter:var(--mg-glass-blur); border-color:var(--mg-glass-border)} .mg-card--topline::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; border-radius:var(--mg-r-lg) var(--mg-r-lg) 0 0; background:var(--mg-grad-brand); opacity:.9; } .mg-card__title{font-size:14px; font-weight:700; letter-spacing:-.015em; color:var(--mg-text); margin-bottom:6px} .mg-card__desc{font-size:12.5px; color:var(--mg-text-2); line-height:1.55} /* ── 4.4 徽标 / 芯片 ── */ .mg-badge{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:var(--mg-r-pill); font-size:10.5px; font-weight:700; letter-spacing:.02em; white-space:nowrap; background:var(--mg-brand-50); color:var(--mg-brand-deep); } .mg-badge--blue{background:rgba(var(--mg-acc2-rgb),.10); color:var(--mg-acc2-deep)} .mg-badge--amber{background:rgba(var(--mg-acc4-rgb),.12); color:var(--mg-acc4-deep)} .mg-badge--red{background:rgba(var(--mg-danger-rgb),.10); color:var(--mg-danger-deep)} .mg-badge--violet{background:rgba(var(--mg-acc3-rgb),.12); color:var(--mg-acc3-deep)} .mg-badge--neutral{background:rgba(15,23,42,.05); color:var(--mg-text-2)} .mg-chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:var(--mg-r-pill); cursor:pointer; font-size:11.5px; font-weight:600; color:var(--mg-text-2); background:var(--mg-glass-bg-strong); border:1px solid var(--mg-border); transition:all var(--mg-dur) var(--mg-ease); } .mg-chip:hover{border-color:rgba(var(--mg-brand-rgb),.42); color:var(--mg-brand-deep); background:var(--mg-brand-50)} .mg-chip[aria-pressed="true"],.mg-chip.is-active{ background:var(--mg-grad-brand); color:#fff; border-color:transparent; box-shadow:0 8px 20px -12px rgba(var(--mg-brand-rgb),1); } /* ── 4.5 表单 ── */ .mg-field{display:flex; flex-direction:column; gap:6px} .mg-field > label,.mg-label{ font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mg-text-2); } .mg-input,.mg-select,.mg-textarea{ width:100%; padding:11px 14px; font-family:var(--mg-font); font-size:13.5px; color:var(--mg-text); background:var(--mg-surface); border:1px solid var(--mg-border); border-radius:var(--mg-r); outline:none; transition:border-color var(--mg-dur) var(--mg-ease), box-shadow var(--mg-dur) var(--mg-ease), background var(--mg-dur) var(--mg-ease); } .mg-input::placeholder,.mg-textarea::placeholder{color:var(--mg-text-3)} .mg-input:hover,.mg-select:hover,.mg-textarea:hover{border-color:var(--mg-hairline-strong)} .mg-input:focus,.mg-select:focus,.mg-textarea:focus{ border-color:rgba(var(--mg-brand-rgb),.55); box-shadow:var(--mg-ring); background:var(--mg-surface); } .mg-textarea{min-height:88px; resize:vertical; line-height:1.6} .mg-input:disabled,.mg-select:disabled,.mg-textarea:disabled{opacity:.55; cursor:not-allowed; background:var(--mg-surface-2)} .mg-input.is-error,.mg-select.is-error,.mg-textarea.is-error{border-color:rgba(var(--mg-danger-rgb),.6)} .mg-input.is-error:focus{box-shadow:0 0 0 3px rgba(var(--mg-danger-rgb),.16)} .mg-hint{font-size:11px; color:var(--mg-text-3)} .mg-hint.is-error{color:var(--mg-danger-deep)} /* ── 4.6 空态 / 错误态 / 加载态 / 成功态 ── */ .mg-state{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:38px 22px; text-align:center; color:var(--mg-text-3); font-size:12.5px; line-height:1.6; } .mg-state__icon{ width:56px; height:56px; border-radius:var(--mg-r-lg); display:flex; align-items:center; justify-content:center; font-size:24px; background:rgba(15,23,42,.04); border:1px solid var(--mg-hairline); } .mg-state__title{font-size:13.5px; font-weight:700; color:var(--mg-text-2); letter-spacing:-.01em} .mg-state__desc{font-size:12px; color:var(--mg-text-3); max-width:340px} .mg-state--error .mg-state__icon{background:rgba(var(--mg-danger-rgb),.08); border-color:rgba(var(--mg-danger-rgb),.20)} .mg-state--error .mg-state__title{color:var(--mg-danger-deep)} .mg-state--success .mg-state__icon{background:var(--mg-brand-50); border-color:rgba(var(--mg-brand-rgb),.22)} .mg-state--success .mg-state__title{color:var(--mg-brand-deep)} .mg-state--loading .mg-state__icon{background:var(--mg-brand-50); border-color:rgba(var(--mg-brand-rgb),.20)} .mg-state__acts{display:flex; gap:8px; margin-top:6px; flex-wrap:wrap; justify-content:center} /* ── 4.7 全局请求进度条 ── */ .mg-progress{ position:fixed; left:0; top:0; height:2.5px; width:0; background:var(--mg-grad-brand); z-index:9995; pointer-events:none; box-shadow:0 0 12px rgba(var(--mg-brand-rgb),.9); transition:width 220ms var(--mg-ease-out), opacity 320ms var(--mg-ease), background 200ms linear; opacity:0; } .mg-progress.is-on{opacity:1} .mg-progress.is-cool{background:var(--mg-grad-red); box-shadow:0 0 12px rgba(var(--mg-danger-rgb),.9)} /* ── 4.8 Toast ── */ .mg-toast{ position:fixed; left:50%; bottom:38px; transform:translateX(-50%) translateY(12px); display:flex; align-items:center; gap:9px; padding:12px 22px; border-radius:var(--mg-r-pill); background:rgba(11,18,32,.94); color:#fff; font-size:13px; font-weight:500; letter-spacing:.01em; box-shadow:0 20px 44px -18px rgba(11,18,32,.75); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); z-index:9999; opacity:0; pointer-events:none; transition:opacity var(--mg-dur-slow) var(--mg-ease), transform var(--mg-dur-slow) var(--mg-ease); } .mg-toast.is-on{opacity:1; transform:translateX(-50%) translateY(0)} .mg-toast--ok{background:linear-gradient(135deg,rgba(5,150,105,.97),rgba(4,120,87,.97))} .mg-toast--err{background:linear-gradient(135deg,rgba(220,38,38,.97),rgba(153,27,27,.97))} .mg-toast--warn{background:linear-gradient(135deg,rgba(217,119,6,.97),rgba(180,83,9,.97))} .mg-toast__ic{font-size:14px; line-height:1} /* ── 4.9 分段标签页 ── */ .mg-tabs{display:flex; gap:6px; padding:4px; border-radius:var(--mg-r-pill); background:rgba(15,23,42,.045); border:1px solid var(--mg-hairline)} .mg-tab{padding:7px 16px; border-radius:var(--mg-r-pill); cursor:pointer; font-size:12px; font-weight:600; color:var(--mg-text-2); border:none; background:transparent; transition:all var(--mg-dur) var(--mg-ease); font-family:var(--mg-font)} .mg-tab:hover{color:var(--mg-text)} .mg-tab[aria-selected="true"]{background:var(--mg-surface); color:var(--mg-text); box-shadow:var(--mg-shadow-sm)} /* ── 4.10 分隔线 / 头像 / 开关 ── */ .mg-divider{height:1px; background:var(--mg-hairline); border:none; margin:14px 0} .mg-avatar{ display:flex; align-items:center; justify-content:center; flex:0 0 auto; border-radius:var(--mg-r-sm); background:var(--mg-grad-brand); color:#fff; font-weight:700; letter-spacing:-.02em; box-shadow:0 6px 16px -8px rgba(var(--mg-brand-rgb),.9); } .mg-avatar--sm{width:28px;height:28px;font-size:11px} .mg-avatar--md{width:38px;height:38px;font-size:14px} .mg-avatar--lg{width:56px;height:56px;border-radius:var(--mg-r-lg);font-size:22px} .mg-switch{position:relative; display:inline-flex; width:40px; height:22px; flex:0 0 auto} .mg-switch input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer} .mg-switch span{position:absolute; inset:0; border-radius:var(--mg-r-pill); background:rgba(15,23,42,.16); transition:background var(--mg-dur) var(--mg-ease)} .mg-switch span::after{content:""; position:absolute; left:3px; top:3px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:var(--mg-shadow-sm); transition:transform var(--mg-dur) var(--mg-ease-spring)} .mg-switch input:checked + span{background:var(--mg-brand)} .mg-switch input:checked + span::after{transform:translateX(18px)} .mg-switch input:focus-visible + span{box-shadow:var(--mg-ring)} /* ── 4.11 工具提示 ── */ .mg-tip{position:relative} .mg-tip::after{ content:attr(data-mg-tip); position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%) translateY(4px); padding:6px 10px; border-radius:var(--mg-r-xs); background:rgba(11,18,32,.94); color:#fff; font-size:11px; white-space:nowrap; opacity:0; pointer-events:none; transition:all var(--mg-dur) var(--mg-ease); z-index:60; } .mg-tip:hover::after{opacity:1; transform:translateX(-50%) translateY(0)} /* ── 4.12 少量通用工具类 ── */ .mg-row{display:flex; align-items:center; gap:10px} .mg-col{display:flex; flex-direction:column; gap:10px} .mg-spacer{flex:1} .mg-mono{font-family:var(--mg-font-mono); font-variant-numeric:tabular-nums} .mg-num{font-variant-numeric:tabular-nums; letter-spacing:-.03em} .mg-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap} /* ═══════════════ 降级：尊重系统"减少动态效果" ═══════════════ */ @media (prefers-reduced-motion:reduce){ .mg-reveal{opacity:1!important; transform:none!important; transition:none!important} .mg-mesh i,.mg-breathe,.mg-float,.mg-skeleton,.mg-dot--live{animation:none!important} .mg-btn,.mg-card,.mg-chip{transition:none!important} #mg-scene{display:none!important} } :root{ /* 翡翠（原） · 当前线上配色 */ --mg-brand:#10B981; --mg-brand-rgb:16,185,129; --mg-brand-dark:#059669; --mg-brand-light:#34D399; --mg-brand-deep:#047857; --mg-acc2:#3B82F6; --mg-acc2-rgb:59,130,246; --mg-acc2-dark:#2563EB; --mg-acc2-light:#60A5FA; --mg-acc2-deep:#1D4ED8; --mg-acc3:#8B5CF6; --mg-acc3-rgb:139,92,246; --mg-acc3-dark:#7C3AED; --mg-acc3-light:#A78BFA; --mg-acc3-deep:#6D28D9; --mg-acc4:#F59E0B; --mg-acc4-rgb:245,158,11; --mg-acc4-dark:#E08A0A; --mg-acc4-light:#FBBF24; --mg-acc4-deep:#B45309; --mg-danger:#EF4444; --mg-danger-rgb:239,68,68; --mg-danger-dark:#E23B3B; --mg-danger-light:#F87171; --mg-danger-deep:#DC2626; --mg-brand-ink:#06251E; --mg-ink-rgb:6,37,30; --mg-page-bg:#F5F8FC; --mg-grad-brand:linear-gradient(135deg,#10B981 0%,#059669 58%,#047857 100%); --mg-grad-hero:linear-gradient(135deg,#07271F,#0A3E30,#0C5B43); --mg-aurora-1:rgba(16,185,129,.13); --mg-aurora-2:rgba(59,130,246,.10); --mg-aurora-3:rgba(139,92,246,.08); --mg-mesh-1:rgba(16,185,129,.58); --mg-mesh-2:rgba(59,130,246,.52); --mg-mesh-3:rgba(139,92,246,.46); --mg-mesh-4:rgba(6,182,212,.40); --mg-scene-1:#10B981; --mg-scene-2:#34D399; --mg-scene-3:#3B82F6; --mg-scene-4:#8B5CF6; --mg-scene-5:#06B6D4; --mg-scene-6:#E6FFF6; --mg-text:#0B1220; --mg-text-2:#4A5A72; --mg-text-3:#8A99AD; } [data-mg-palette="navy"]{ /* 砚墨 · 深靛蓝 · 冷调石墨 */ --mg-brand:#3F51A8; --mg-brand-rgb:63,81,168; --mg-brand-dark:#324186; --mg-brand-light:#8C97CB; --mg-brand-deep:#252F61; --mg-acc2:#3A7CA5; --mg-acc2-rgb:58,124,165; --mg-acc2-dark:#2E6384; --mg-acc2-light:#89B0C9; --mg-acc2-deep:#224860; --mg-acc3:#8A6BB5; --mg-acc3-rgb:138,107,181; --mg-acc3-dark:#6E5691; --mg-acc3-light:#B9A6D3; --mg-acc3-deep:#503E69; --mg-acc4:#B08A4A; --mg-acc4-rgb:176,138,74; --mg-acc4-dark:#8D6E3B; --mg-acc4-light:#D0B992; --mg-acc4-deep:#66502B; --mg-danger:#C2454B; --mg-danger-rgb:194,69,75; --mg-danger-dark:#9B373C; --mg-danger-light:#DA8F93; --mg-danger-deep:#71282C; --mg-brand-ink:#060917; --mg-ink-rgb:6,9,23; --mg-page-bg:#F6F7FA; --mg-grad-brand:linear-gradient(135deg,#3F51A8 0%,#324186 58%,#252F61 100%); --mg-grad-hero:linear-gradient(135deg,#0A0E22,#121A3D,#1B2555); --mg-aurora-1:rgba(63,81,168,.13); --mg-aurora-2:rgba(58,124,165,.09); --mg-aurora-3:rgba(138,107,181,.06); --mg-mesh-1:rgba(63,81,168,.55); --mg-mesh-2:rgba(58,124,165,.48); --mg-mesh-3:rgba(138,107,181,.42); --mg-mesh-4:rgba(176,138,74,.30); --mg-scene-1:#3F51A8; --mg-scene-2:#7284CE; --mg-scene-3:#3A7CA5; --mg-scene-4:#8A6BB5; --mg-scene-5:#B08A4A; --mg-scene-6:#E8ECF8; --mg-text:#0A0D18; --mg-text-2:#4A5265; --mg-text-3:#8A90A0; } [data-mg-palette="violet"]{ /* 墨紫 · 深紫罗兰 · 冷调石墨 */ --mg-brand:#6B4FC4; --mg-brand-rgb:107,79,196; --mg-brand-dark:#563F9D; --mg-brand-light:#A695DC; --mg-brand-deep:#3E2E72; --mg-acc2:#4B7BA8; --mg-acc2-rgb:75,123,168; --mg-acc2-dark:#3C6286; --mg-acc2-light:#93B0CB; --mg-acc2-deep:#2C4761; --mg-acc3:#B5658A; --mg-acc3-rgb:181,101,138; --mg-acc3-dark:#91516E; --mg-acc3-light:#D3A3B9; --mg-acc3-deep:#693B50; --mg-acc4:#A8843C; --mg-acc4-rgb:168,132,60; --mg-acc4-dark:#866A30; --mg-acc4-light:#CBB58A; --mg-acc4-deep:#614D23; --mg-danger:#C2444F; --mg-danger-rgb:194,68,79; --mg-danger-dark:#9B363F; --mg-danger-light:#DA8F95; --mg-danger-deep:#71272E; --mg-brand-ink:#080615; --mg-ink-rgb:8,6,21; --mg-page-bg:#F7F6FB; --mg-grad-brand:linear-gradient(135deg,#6B4FC4 0%,#563F9D 58%,#3E2E72 100%); --mg-grad-hero:linear-gradient(135deg,#0D0A20,#191138,#251A55); --mg-aurora-1:rgba(107,79,196,.13); --mg-aurora-2:rgba(75,123,168,.08); --mg-aurora-3:rgba(181,101,138,.07); --mg-mesh-1:rgba(107,79,196,.55); --mg-mesh-2:rgba(75,123,168,.46); --mg-mesh-3:rgba(181,101,138,.40); --mg-mesh-4:rgba(168,132,60,.30); --mg-scene-1:#6B4FC4; --mg-scene-2:#9B85DE; --mg-scene-3:#4B7BA8; --mg-scene-4:#B5658A; --mg-scene-5:#A8843C; --mg-scene-6:#EDE9F9; --mg-text:#0C0A18; --mg-text-2:#4C4761; --mg-text-3:#8B87A0; } [data-mg-palette="bronze"]{ /* 墨金 · 暖调青铜 · 象牙白 */ --mg-brand:#8A6A3E; --mg-brand-rgb:138,106,62; --mg-brand-dark:#6E5532; --mg-brand-light:#B9A68B; --mg-brand-deep:#503D24; --mg-acc2:#3F5A6E; --mg-acc2-rgb:63,90,110; --mg-acc2-dark:#324858; --mg-acc2-light:#8C9CA8; --mg-acc2-deep:#253440; --mg-acc3:#7E5A72; --mg-acc3-rgb:126,90,114; --mg-acc3-dark:#65485B; --mg-acc3-light:#B29CAA; --mg-acc3-deep:#493442; --mg-acc4:#A8843C; --mg-acc4-rgb:168,132,60; --mg-acc4-dark:#866A30; --mg-acc4-light:#CBB58A; --mg-acc4-deep:#614D23; --mg-danger:#B5483F; --mg-danger-rgb:181,72,63; --mg-danger-dark:#913A32; --mg-danger-light:#D3918C; --mg-danger-deep:#692A25; --mg-brand-ink:#0F0C07; --mg-ink-rgb:15,12,7; --mg-page-bg:#FAF8F4; --mg-grad-brand:linear-gradient(135deg,#8A6A3E 0%,#6E5532 58%,#503D24 100%); --mg-grad-hero:linear-gradient(135deg,#14100A,#1F1911,#2B2318); --mg-aurora-1:rgba(138,106,62,.13); --mg-aurora-2:rgba(63,90,110,.08); --mg-aurora-3:rgba(126,90,114,.06); --mg-mesh-1:rgba(138,106,62,.54); --mg-mesh-2:rgba(63,90,110,.44); --mg-mesh-3:rgba(126,90,114,.38); --mg-mesh-4:rgba(168,132,60,.30); --mg-scene-1:#8A6A3E; --mg-scene-2:#B39366; --mg-scene-3:#3F5A6E; --mg-scene-4:#7E5A72; --mg-scene-5:#A8843C; --mg-scene-6:#F5F0E8; --mg-text:#17130D; --mg-text-2:#57503F; --mg-text-3:#8E8674; } [data-mg-palette="mono"]{ /* 墨白 · 静奢单色 · 极简 */ --mg-brand:#232B36; --mg-brand-rgb:35,43,54; --mg-brand-dark:#1C222B; --mg-brand-light:#7B8086; --mg-brand-deep:#14191F; --mg-acc2:#4A5563; --mg-acc2-rgb:74,85,99; --mg-acc2-dark:#3B444F; --mg-acc2-light:#9299A1; --mg-acc2-deep:#2B3139; --mg-acc3:#6B7280; --mg-acc3-rgb:107,114,128; --mg-acc3-dark:#565B66; --mg-acc3-light:#A6AAB3; --mg-acc3-deep:#3E424A; --mg-acc4:#9A7B45; --mg-acc4-rgb:154,123,69; --mg-acc4-dark:#7B6237; --mg-acc4-light:#C2B08F; --mg-acc4-deep:#594728; --mg-danger:#B4343A; --mg-danger-rgb:180,52,58; --mg-danger-dark:#902A2E; --mg-danger-light:#D28589; --mg-danger-deep:#681E22; --mg-brand-ink:#06070A; --mg-ink-rgb:6,7,10; --mg-page-bg:#F8F9FA; --mg-grad-brand:linear-gradient(135deg,#232B36 0%,#1C222B 58%,#14191F 100%); --mg-grad-hero:linear-gradient(135deg,#0A0A0B,#141417,#1D1D22); --mg-aurora-1:rgba(35,43,54,.10); --mg-aurora-2:rgba(74,85,99,.07); --mg-aurora-3:rgba(107,114,128,.05); --mg-mesh-1:rgba(35,43,54,.46); --mg-mesh-2:rgba(74,85,99,.38); --mg-mesh-3:rgba(107,114,128,.32); --mg-mesh-4:rgba(154,123,69,.26); --mg-scene-1:#232B36; --mg-scene-2:#5A6474; --mg-scene-3:#4A5563; --mg-scene-4:#9A7B45; --mg-scene-5:#8B9099; --mg-scene-6:#F2F3F5; --mg-text:#0B0E13; --mg-text-2:#4B525C; --mg-text-3:#8B9099; } [data-mg-palette="jade"]{ /* 墨玉 · 深青玉 · 更沉的品牌绿 */ --mg-brand:#0E7C66; --mg-brand-rgb:14,124,102; --mg-brand-dark:#0B6352; --mg-brand-light:#6EB0A3; --mg-brand-deep:#08483B; --mg-acc2:#2F6F8F; --mg-acc2-rgb:47,111,143; --mg-acc2-dark:#265972; --mg-acc2-light:#82A9BC; --mg-acc2-deep:#1B4053; --mg-acc3:#7A6BA8; --mg-acc3-rgb:122,107,168; --mg-acc3-dark:#625686; --mg-acc3-light:#AFA6CB; --mg-acc3-deep:#473E61; --mg-acc4:#A8843C; --mg-acc4-rgb:168,132,60; --mg-acc4-dark:#866A30; --mg-acc4-light:#CBB58A; --mg-acc4-deep:#614D23; --mg-danger:#BE4A4A; --mg-danger-rgb:190,74,74; --mg-danger-dark:#983B3B; --mg-danger-light:#D89292; --mg-danger-deep:#6E2B2B; --mg-brand-ink:#031D16; --mg-ink-rgb:3,29,22; --mg-page-bg:#F6F9F8; --mg-grad-brand:linear-gradient(135deg,#0E7C66 0%,#0B6352 58%,#08483B 100%); --mg-grad-hero:linear-gradient(135deg,#04140F,#07241D,#0A3A2C); --mg-aurora-1:rgba(14,124,102,.13); --mg-aurora-2:rgba(47,111,143,.08); --mg-aurora-3:rgba(122,107,168,.06); --mg-mesh-1:rgba(14,124,102,.52); --mg-mesh-2:rgba(47,111,143,.44); --mg-mesh-3:rgba(122,107,168,.38); --mg-mesh-4:rgba(168,132,60,.28); --mg-scene-1:#0E7C66; --mg-scene-2:#2FA98D; --mg-scene-3:#2F6F8F; --mg-scene-4:#7A6BA8; --mg-scene-5:#A8843C; --mg-scene-6:#E6F5F0; --mg-text:#08110E; --mg-text-2:#44554F; --mg-text-3:#87968F; } /* ═══════════════ 5. 配色切换器（低调的右下角小控件） ═══════════════ */ .mg-palette{ position:fixed; right:22px; bottom:22px; z-index:9992; display:flex; flex-direction:column; align-items:flex-end; gap:10px; font-family:var(--mg-font); } .mg-palette__toggle{ width:38px; height:38px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--mg-text-2); background:var(--mg-glass-bg-strong); border:1px solid var(--mg-border); -webkit-backdrop-filter:var(--mg-glass-blur); backdrop-filter:var(--mg-glass-blur); box-shadow:var(--mg-shadow-md); transition:transform var(--mg-dur) var(--mg-ease), color var(--mg-dur) var(--mg-ease), box-shadow var(--mg-dur) var(--mg-ease); } .mg-palette__toggle:hover{transform:translateY(-2px) rotate(-8deg); color:var(--mg-brand); box-shadow:var(--mg-shadow-lg)} .mg-palette.is-open .mg-palette__toggle{color:var(--mg-brand); border-color:rgba(var(--mg-brand-rgb),.4)} .mg-palette__menu{ min-width:212px; padding:8px; border-radius:var(--mg-r-lg); background:var(--mg-glass-bg-strong); border:1px solid var(--mg-border); -webkit-backdrop-filter:var(--mg-glass-blur); backdrop-filter:var(--mg-glass-blur); box-shadow:var(--mg-shadow-lg); opacity:0; transform:translateY(8px) scale(.97); transform-origin:bottom right; pointer-events:none; transition:opacity var(--mg-dur) var(--mg-ease), transform var(--mg-dur) var(--mg-ease); } .mg-palette.is-open .mg-palette__menu{opacity:1; transform:none; pointer-events:auto} .mg-palette__title{ font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--mg-text-3); padding:6px 10px 8px; } .mg-palette__item{ width:100%; display:flex; align-items:center; gap:10px; cursor:pointer; text-align:left; padding:9px 10px; border-radius:var(--mg-r-sm); border:1px solid transparent; background:transparent; font-family:inherit; transition:background var(--mg-dur) var(--mg-ease), border-color var(--mg-dur) var(--mg-ease); } .mg-palette__item:hover{background:rgba(var(--mg-brand-rgb),.08)} .mg-palette__item.is-active{background:rgba(var(--mg-brand-rgb),.10); border-color:rgba(var(--mg-brand-rgb),.28)} .mg-palette__item > i{ width:16px; height:16px; border-radius:5px; flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), 0 2px 6px -2px rgba(0,0,0,.4); } .mg-palette__item > span{display:flex; flex-direction:column; gap:1px; min-width:0; flex:1} .mg-palette__item b{font-size:12.5px; font-weight:650; color:var(--mg-text); letter-spacing:-.01em} .mg-palette__item em{font-size:10.5px; font-style:normal; color:var(--mg-text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .mg-palette__tick{color:var(--mg-brand); opacity:0; transition:opacity var(--mg-dur) var(--mg-ease)} .mg-palette__item.is-active .mg-palette__tick{opacity:1} .mg-palette__foot{ font-size:10px; color:var(--mg-text-3); text-align:center; padding:8px 4px 4px; border-top:1px solid var(--mg-hairline); margin-top:6px; } @media(max-width:768px){ .mg-palette{right:14px; bottom:82px} .mg-palette__menu{min-width:190px} } @media print{.mg-palette{display:none!important}}