/* ========================================================================== Liquid Glass · Design Tokens Apple 磨砂玻璃主题 —— 设计令牌 + 玻璃材质基类 配套文档：../DESIGN-SPEC.md 使用： ========================================================================== */ /* -------------------------------------------------------------------------- 1. 颜色令牌 —— Light（默认） -------------------------------------------------------------------------- */ :root { /* 中性语义色 */ --c-text: rgba(0, 0, 0, .92); --c-text-secondary: rgba(60, 60, 67, .68); --c-text-tertiary: rgba(60, 60, 67, .42); --c-text-quaternary: rgba(60, 60, 67, .18); --c-separator: rgba(60, 60, 67, .12); --c-fill-primary: rgba(120, 120, 128, .20); --c-fill-secondary: rgba(120, 120, 128, .16); /* 强调色 & 语义色 */ --c-accent: #0A84FF; --c-accent-hover: #0071E3; --c-accent-text: #FFFFFF; --c-accent-soft: rgba(10, 132, 255, .14); --c-green: #30D158; --c-orange: #FF9F0A; --c-red: #FF453A; --c-purple: #BF5AF2; --c-pink: #FF6482; --c-teal: #64D2FF; /* 玻璃材质（Light） */ --glass-tint-thin: rgba(255, 255, 255, .45); --glass-tint-regular: rgba(255, 255, 255, .55); --glass-tint-thick: rgba(255, 255, 255, .72); --glass-edge-top: rgba(255, 255, 255, .90); --glass-edge-bottom: rgba(255, 255, 255, .22); --glass-specular: rgba(255, 255, 255, .55); --glass-specular-soft: rgba(255, 255, 255, .28); --glass-highlight: rgba(255, 255, 255, .80); --glass-shadow-1: rgba(31, 31, 38, .06); --glass-shadow-2: rgba(31, 31, 38, .10); --glass-shadow-3: rgba(31, 31, 38, .18); --surface-solid: #F2F3F7; /* 壁纸 */ --wallpaper: radial-gradient(60% 55% at 12% 18%, #FFB3C7 0%, transparent 60%), radial-gradient(55% 50% at 88% 12%, #A9C7FF 0%, transparent 62%), radial-gradient(60% 60% at 82% 88%, #C9B6FF 0%, transparent 60%), radial-gradient(55% 55% at 18% 82%, #9FE7E0 0%, transparent 62%), linear-gradient(160deg, #F4F5F9 0%, #EDEFF6 100%); /* ------------------------------------------------------------------------ 2. 圆角阶梯（同心圆角：内层 = 外层 − padding） ------------------------------------------------------------------------ */ --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-2xl: 38px; --r-pill: 999px; /* ------------------------------------------------------------------------ 3. 间距（4pt 网格） ------------------------------------------------------------------------ */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; /* ------------------------------------------------------------------------ 4. 字号 / 行高 / 字重（iOS Type Scale） ------------------------------------------------------------------------ */ --fs-largeTitle: 34px; --lh-largeTitle: 41px; --fw-largeTitle: 700; --fs-title1: 28px; --lh-title1: 34px; --fw-title1: 700; --fs-title2: 22px; --lh-title2: 28px; --fw-title2: 700; --fs-title3: 20px; --lh-title3: 25px; --fw-title3: 600; --fs-headline: 17px; --lh-headline: 22px; --fw-headline: 600; --fs-body: 17px; --lh-body: 22px; --fw-body: 400; --fs-callout: 16px; --lh-callout: 21px; --fw-callout: 400; --fs-subhead: 15px; --lh-subhead: 20px; --fw-subhead: 400; --fs-footnote: 13px; --lh-footnote: 18px; --fw-footnote: 400; --fs-caption: 12px; --lh-caption: 16px; --fw-caption: 500; --font-stack: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Helvetica Neue", "Microsoft YaHei", system-ui, sans-serif; /* ------------------------------------------------------------------------ 5. 动效 ------------------------------------------------------------------------ */ --ease-standard: cubic-bezier(.32, .72, 0, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --dur-fast: 120ms; --dur-normal: 220ms; --dur-slow: 300ms; --dur-sheet: 450ms; /* ------------------------------------------------------------------------ 6. 层级 ------------------------------------------------------------------------ */ --z-content: 0; --z-sticky: 100; --z-nav: 200; --z-sheet: 900; --z-toast: 1000; } /* -------------------------------------------------------------------------- 7. Dark 主题 -------------------------------------------------------------------------- */ [data-theme="dark"] { --c-text: rgba(255, 255, 255, .94); --c-text-secondary: rgba(235, 235, 245, .66); --c-text-tertiary: rgba(235, 235, 245, .40); --c-text-quaternary: rgba(235, 235, 245, .18); --c-separator: rgba(255, 255, 255, .10); --c-fill-primary: rgba(120, 120, 128, .36); --c-fill-secondary: rgba(120, 120, 128, .28); --c-accent: #0A84FF; --c-accent-hover: #409CFF; --c-accent-soft: rgba(10, 132, 255, .22); --glass-tint-thin: rgba(28, 28, 32, .55); --glass-tint-regular: rgba(30, 30, 36, .62); --glass-tint-thick: rgba(40, 40, 48, .78); --glass-edge-top: rgba(255, 255, 255, .30); --glass-edge-bottom: rgba(255, 255, 255, .06); --glass-specular: rgba(255, 255, 255, .16); --glass-specular-soft: rgba(255, 255, 255, .10); --glass-highlight: rgba(255, 255, 255, .16); --glass-shadow-1: rgba(0, 0, 0, .35); --glass-shadow-2: rgba(0, 0, 0, .45); --glass-shadow-3: rgba(0, 0, 0, .55); --surface-solid: #1C1C1F; --wallpaper: radial-gradient(60% 55% at 12% 18%, #5A2340 0%, transparent 60%), radial-gradient(55% 50% at 88% 12%, #10315E 0%, transparent 62%), radial-gradient(60% 60% at 82% 88%, #2E2260 0%, transparent 60%), radial-gradient(55% 55% at 18% 82%, #0E3B41 0%, transparent 62%), linear-gradient(160deg, #0B0B0F 0%, #121218 100%); } /* -------------------------------------------------------------------------- 8. 基础重置 -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { font-family: var(--font-stack); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background var(--dur-slow) var(--ease-standard); } body { margin: 0; min-height: 100vh; color: var(--c-text); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-body); background: var(--wallpaper); background-attachment: fixed; } /* -------------------------------------------------------------------------- 9. 环境层（壁纸）：玻璃必须"有东西可糊" -------------------------------------------------------------------------- */ .environment { position: relative; min-height: 100vh; background: var(--wallpaper); background-attachment: fixed; } /* 漂浮光斑，制造折射位移的观感 */ .environment::before { content: ""; position: fixed; inset: -20%; pointer-events: none; background: radial-gradient(28% 28% at 30% 25%, rgba(255, 255, 255, .55) 0%, transparent 70%), radial-gradient(24% 24% at 72% 62%, rgba(255, 255, 255, .35) 0%, transparent 70%); filter: blur(40px); animation: float-blob 24s ease-in-out infinite alternate; z-index: 0; } [data-theme="dark"] .environment::before { opacity: .25; } @keyframes float-blob { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(4%, 3%, 0) scale(1.08); } } /* -------------------------------------------------------------------------- 10. ★ 玻璃材质基类（三件套：blur + saturate + 描边高光） -------------------------------------------------------------------------- */ .glass { position: relative; border-radius: var(--r-lg); background: var(--glass-tint-regular); -webkit-backdrop-filter: blur(30px) saturate(200%); backdrop-filter: blur(30px) saturate(200%); box-shadow: 0 8px 24px var(--glass-shadow-2), 0 2px 6px var(--glass-shadow-1), inset 0 1px 0 var(--glass-highlight); isolation: isolate; transition: background var(--dur-normal) var(--ease-standard), box-shadow var(--dur-normal) var(--ease-standard), transform var(--dur-normal) var(--ease-standard), opacity var(--dur-normal) var(--ease-standard); } /* C. 折射描边：1px 渐变边框（上亮 → 下暗 → 上亮） */ .glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(180deg, var(--glass-edge-top) 0%, var(--glass-edge-bottom) 55%, var(--glass-edge-top) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; z-index: 1; } /* A. 高光层：顶部 1px 亮线 + 左上柔和反光 */ .glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; opacity: .9; background: linear-gradient(180deg, var(--glass-specular) 0%, transparent 42%), radial-gradient(120% 80% at 8% 0%, var(--glass-specular-soft) 0%, transparent 55%); } /* 玻璃内容层：确保内容压在 ::after 高光之上 */ .glass > * { position: relative; z-index: 2; } /* ---- 三级配方 ---- */ .glass--thin { background: var(--glass-tint-thin); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 2px 8px var(--glass-shadow-1), inset 0 1px 0 var(--glass-highlight); } .glass--regular { background: var(--glass-tint-regular); -webkit-backdrop-filter: blur(30px) saturate(200%) brightness(102%); backdrop-filter: blur(30px) saturate(200%) brightness(102%); } .glass--thick { background: var(--glass-tint-thick); -webkit-backdrop-filter: blur(60px) saturate(220%) brightness(105%); backdrop-filter: blur(60px) saturate(220%) brightness(105%); box-shadow: 0 24px 64px var(--glass-shadow-3), 0 2px 8px var(--glass-shadow-1), inset 0 1px 0 var(--glass-highlight); } /* -------------------------------------------------------------------------- 11. 降级：减少透明度 / 不支持 backdrop-filter -------------------------------------------------------------------------- */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass, .glass--thin, .glass--regular, .glass--thick { background: var(--surface-solid); } } @media (prefers-reduced-transparency: reduce) { .glass, .glass--thin, .glass--regular, .glass--thick { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--surface-solid); } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }