/* ========================= 1. 全局变量与基础样式 - 苹果液态玻璃风格调整 ========================= */ /* 通用选择器，设置所有元素的盒模型为 border-box */ /* 这意味着元素的 padding 和 border 不会增加其总宽度和高度 */ * { box-sizing: border-box; } /* :root 选择器用于在 HTML 文档的根元素上声明全局 CSS 变量 */ /* 这些变量定义了“亮色主题”的配色和样式 */ :root { --bg: #f5f5f7; /* 苹果风格的浅灰色背景色 */ /* === 移除：旧的玻璃变量 === */ /* --glass-bg-color: rgba(255, 255, 255, 0.25); */ /* --card: var(--glass-bg-color); */ /* --nav-bg: var(--glass-bg-color); */ /* --glass: var(--glass-bg-color); */ --muted: rgba(255, 255, 255, 0.8); /* 次要文字（如副标题）：白色，80%透明度 */ --text: #ffffff; /* 主要文字（如主标题）：纯白色 */ --accent: #ff6b9a; /* 强调色（如 Logo、链接下划线）：粉色 */ --radius: 32px; /* 苹果风格的大圆角半径 */ /* --border: rgba(255, 255, 255, 0.2); */ /* 移除旧边框 */ --random-bg-url: none; /* 动态背景图片的 URL 占位符，将由 JS 填充 */ /* 导航栏专属变量（亮色） */ --nav-text: #1d1d1f; /* 导航栏文字：深灰色，确保在亮背景上可读 */ --nav-link-hover-bg: rgba(0, 0, 0, 0.03); /* 导航栏链接悬停背景：近乎透明的黑色 */ /* === 移除：旧的阴影和高光 === */ /* --glass-outer-shadow: 0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1); */ /* --nav-shadow: var(--glass-outer-shadow); */ /* --nav-hover-shadow: var(--glass-outer-shadow); */ /* --lg-highlight: rgba(255, 255, 255, 0.75); */ /* --lg-highlight-shadow: inset 1px 1px 0 var(--lg-highlight), ... */ /* === 新增：来自 .switcher 的新玻璃样式变量 (Light) === */ --c-glass: #bbbbbc; --c-light: #fff; --c-dark: #000; --glass-reflex-dark: 1; --glass-reflex-light: 1; --saturation: 150%; } /* 深色主题变量 */ /* 当元素具有 'dark-theme' 类时，这些变量将覆盖 :root 中的同名变量 */ .dark-theme { --bg: #1a1a1a; /* 深色模式背景：纯黑色 */ /* === 移除：旧的暗色玻璃变量 === */ /* --glass-bg-color: rgba(30, 30, 30, 0.7); */ /* --card: var(--glass-bg-color); */ /* --nav-bg: var(--glass-bg-color); */ /* --glass: var(--glass-bg-color); */ --muted: rgba(200, 200, 200, 0.7); /* 次要文字：浅灰色，70%透明度 */ --text: #f0f0f0; /* 主要文字：浅灰色 */ /* --border: rgba(50, 50, 50, 0.5); */ /* 移除旧边框 */ /* 导航栏专属变量（暗色） */ --nav-text: #f0f0f0; /* 导航栏文字：浅灰色 */ --nav-link-hover-bg: rgba(255, 255, 255, 0.05); /* 导航栏链接悬停背景：近乎透明的白色 */ /* === 移除：旧的暗色阴影和高光 === */ /* --nav-shadow: var(--glass-outer-shadow); */ /* --nav-hover-shadow: var(--glass-outer-shadow); */ /* --lg-highlight: rgba(255, 255, 255, 0.15); */ /* --lg-highlight-shadow: inset 1px 1px 0px var(--lg-highlight); */ /* === 新增：来自 .switcher 的新玻璃样式变量 (Dark) === */ --c-glass: #bbbbbc; --c-light: #fff; --c-dark: #000; --glass-reflex-dark: 2; --glass-reflex-light: 0.3; --saturation: 150%; } /* 全局的 box-sizing，在文件顶部已声明，此处为重复声明 */ * { box-sizing: border-box; } /* HTML 和 Body 基础样式 */ html, body { height: 100%; /* 确保页面占满整个视口高度 */ width: 100%; /* 确保页面占满整个视口宽度 */ margin: 0; /* 移除默认外边距 */ /* 字体栈：优先使用 Inter，然后是苹果系统字体，最后是无衬线字体 */ font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: var(--bg); /* 应用背景色变量 */ color: #1d1d1f; /* 默认文字颜色（主要用于非卡片区域，如导航栏） */ -webkit-font-smoothing: antialiased; /* 在 Webkit 浏览器上启用抗锯齿，使字体更平滑 */ transition: background-color 0.3s ease; /* 为背景色变化添加平滑过渡 */ } /* ========================= 2. 顶部导航栏 - === 应用新样式 === ========================= */ /* 导航栏容器样式 */ .navbar { height: 54px; display: flex; align-items: center; justify-content: center; position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 30; width: min(800px, calc(100% - 40px)); border-radius: 18px; padding: 0 28px; overflow: hidden; /* === 移除旧样式 === */ /* background: var(--nav-bg); */ /* border:1px solid var(--border); */ /* === 修改：应用新的玻璃背景、滤镜和阴影 === */ background-color: color-mix(in srgb, var(--c-glass) 12%, transparent); /* === 修改：添加 blur(5px) === */ backdrop-filter: blur(5px) url(#lg-dist) saturate(var(--saturation)); -webkit-backdrop-filter: blur(5px) url(#lg-dist) saturate(var(--saturation)); border: none; /* 新样式没有边框 */ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent), inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent), inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent), inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent), inset -0.3px -1px 4px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent), inset -1.5px 2.5px 0px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 2px -6.5px 1px -4px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0px 1px 5px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0px 6px 16px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent); /* === 修改：合并新的过渡和旧的过渡 === */ transition: background-color 400ms cubic-bezier(1, 0.0, 0.4, 1), box-shadow 400ms cubic-bezier(1, 0.0, 0.4, 1), transform 0.3s ease; /* 保留你原来的 transform 过渡 */ } /* 暗色模式下的导航栏 (不再需要，新样式会自动切换) */ /* .dark-theme .navbar { background: var(--nav-bg); } */ /* 导航栏左侧容器 */ .nav-left { display: flex; align-items: center; gap: 12px; margin-right: auto; } /* 品牌 Logo 和文字 */ .brand { font-weight: 600; font-size: 20px; letter-spacing: 0.2px; color: var(--nav-text); /* 应用导航栏文字颜色变量 */ display: flex; align-items: center; gap: 10px; } /* 品牌 Logo 图标 */ .brand .logo { width: 28px; height: 28px; border-radius: 8px; background: var(--accent); /* 应用强调色变量 */ display: inline-grid; place-items: center; font-weight: 600; color: #fff; font-size: 14px; box-shadow: 0 2px 10px rgba(255, 107, 154, 0.3); /* 粉色阴影 */ } /* 导航栏中间容器 */ .nav-center { display: flex; gap: 12px; align-items: center; } /* 导航栏右侧容器 */ .nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; } /* 导航栏链接 */ .nav-link { padding: 8px 12px; border-radius: 10px; font-weight: 400; font-size: 14px; color: var(--nav-text); text-decoration: none; transition: all .2s ease; position: relative; overflow: hidden; } /* 链接下方的装饰性线条（初始状态） */ .nav-link::after { content: ''; position: absolute; bottom: 6px; left: 50%; width: 0; height: 2px; background: var(--accent); /* 应用强调色 */ transition: all 0.3s ease; transform: translateX(-50%); } /* 主题切换按钮 */ .theme-toggle { width: 36px; height: 36px; border-radius: 50%; background: transparent; border: none; color: var(--nav-text); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } /* 暗色模式下按钮悬停效果 */ .dark-theme .theme-toggle:hover { background: rgba(255, 255, 255, 0.1); } /* ========================= 3. 背景容器与效果层 ========================= */ /* 主要内容包裹容器 */ .wrap { min-height: 100vh; /* 最小高度占满视口 */ width: 100%; display: flex; flex-direction: column; /* 子元素垂直排列 */ align-items: center; /* 水平居中 */ justify-content: center; /* 垂直居中 */ /* 顶部内边距 92px（为导航栏留出空间），左右 36px，底部 36px */ padding: 92px 36px 36px 36px; position: relative; /* 作为伪元素定位的基准 */ overflow: hidden; /* 隐藏模糊放大的背景图边缘 */ } /* 背景模糊层 (::after 伪元素) */ .wrap::after { content: ''; /* 伪元素必须 */ position: absolute; /* 绝对定位，覆盖整个 .wrap */ inset: 0; /* (top: 0; left: 0; right: 0; bottom: 0;) 的简写 */ z-index: 0; /* 位于最底层 */ background-image: var(--random-bg-url); /* 应用 JS 提供的背景图 */ background-position: center center; background-size: cover; background-repeat: no-repeat; /* === 移除：背景模糊, 保留亮度和饱和度 === */ filter: brightness(0.8) saturate(1.05); transform: scale(1.02); /* 轻微放大，避免模糊后边缘出现白边 */ transition: all 1.5s ease; /* 为背景图（如果切换）和 transform 添加平滑过渡 */ } /* 暗色模式下的背景模糊层 */ .dark-theme .wrap::after { filter: brightness(0.6) saturate(1.05); /* 亮度进一步降低 (这里原本就没有blur) */ } /* 半透明遮罩层 (::before 伪元素) */ .wrap::before { content: ''; position: absolute; inset: 0; /* 叠加一层 10% 透明度的黑色遮罩，增强文字对比度 */ background: rgba(0, 0, 0, 0.1); z-index: 1; /* 位于背景层之上，卡片之下 */ } /* ========================= 4. 头像样式（卡片上方居中悬浮）- === 修改：应用玻璃效果 === ========================= */ .avatar { width: 110px; height: 110px; border-radius: 50%; overflow: hidden; margin-bottom: 0px; margin-top: 0px; position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; /* === 应用类似卡片的玻璃背景和模糊 === */ background-color: color-mix(in srgb, var(--c-glass) 15%, transparent); backdrop-filter: blur(5px) saturate(var(--saturation)); -webkit-backdrop-filter: blur(5px) saturate(var(--saturation)); /* === 修改：减小 padding 使边框变薄 === */ padding: 4px; /* 从 6px 改为 4px */ border: none; /* === 修改：调整阴影，增强高光 === */ box-shadow: /* 内侧更亮的高光 */ inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 20%), transparent), /* 增加亮度 */ inset 0 1px 2px 0 color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 40%), transparent), /* 增加顶部高光亮度 */ inset 0 -1px 1px 0 color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent), /* 底部阴影稍微减弱 */ /* 外侧阴影 */ 0 8px 25px rgba(0, 0, 0, 0.15); /* 外部阴影微调 */ transition: background-color 400ms cubic-bezier(1, 0.0, 0.4, 1), box-shadow 400ms cubic-bezier(1, 0.0, 0.4, 1), transform 0.3s ease; } /* 头像图片 */ .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; transition: filter 0.3s ease; filter: brightness(0.95); } /* 暗色模式下的头像调整 */ /* .dark-theme .avatar { /* 样式由变量自动处理 */ /* } */ .dark-theme .avatar img { filter: brightness(0.8); } /* 头像悬停/激活效果 */ @media (hover: hover) and (pointer: fine) { .avatar:hover { transform: scale(1.05); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 20%), transparent), inset 0 1px 2px 0 color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 40%), transparent), inset 0 -1px 1px 0 color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent), 0 10px 30px rgba(0, 0, 0, 0.2); /* 悬停时外部阴影 */ } } @media (hover: none) and (pointer: coarse) { .avatar:active { transform: scale(1.05); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 20%), transparent), inset 0 1px 2px 0 color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 40%), transparent), inset 0 -1px 1px 0 color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent), 0 10px 30px rgba(0, 0, 0, 0.2); /* 点击时外部阴影 */ } } /* ========================= 5. 卡片样式 - === 应用新样式 === ========================= */ .card { width: 100%; max-width: 420px; /* 卡片最大宽度 */ border-radius: var(--radius); /* 应用大圆角半径 */ padding: 25px; /* 内边距 */ display: block; margin-top: 20px; /* 与头像的间距 */ position: relative; /* 相对定位 */ z-index: 2; /* 位于遮罩层之上 */ color: var(--text); /* 应用白色文字变量 */ /* === 移除旧样式 === */ /* background: var(--card); */ /* box-shadow: var(--glass-outer-shadow), var(--lg-highlight-shadow); */ /* border: 1px solid var(--border); */ /* === 修改：应用新的玻璃背景、滤镜和阴影 === */ background-color: color-mix(in srgb, var(--c-glass) 12%, transparent); /* === 修改：添加 blur(3px) === */ backdrop-filter: blur(3px) url(#lg-dist) saturate(var(--saturation)); -webkit-backdrop-filter: blur(3px) url(#lg-dist) saturate(var(--saturation)); border: none; /* 新样式没有边框 */ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent), inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent), inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent), inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent), inset -0.3px -1px 4px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent), inset -1.5px 2.5px 0px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 2px -6.5px 1px -4px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0px 1px 5px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0px 6px 16px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent); /* === 修改：合并新的过渡和旧的过渡 === */ transition: background-color 400ms cubic-bezier(1, 0.0, 0.4, 1), box-shadow 400ms cubic-bezier(1, 0.0, 0.4, 1), transform 0.3s ease; /* 保留你原来的 transform 过渡 */ } /* 装饰性容器（用于调整卡片内部布局） */ .deco { margin-top: -20px; /* 负外边距，使内容轻微上移，与头像更紧凑 */ } /* ========================= 6. 状态消息框 ========================= */ .status-message { padding: 12px 16px; line-height: 1.6; text-align: center; /* 文本居中 */ } /* 消息框 H2 和 H3 的通用设置 */ .status-message h2, .status-message h3 { margin: 6px 0; /* 减小垂直外边距 */ font-weight: 600; line-height: 1.3; } /* 主标题 H2 */ .status-message h2 { font-size: 22px; letter-spacing: -0.3px; /* 苹果风格的紧密字间距 */ color: var(--text); /* 应用白色文字变量 */ } /* 副标题 H3 */ .status-message h3 { font-size: 16px; color: var(--muted); /* 应用半透明白色文字变量 */ font-weight: 400; /* 字体更细 */ } /* ========================= 7. 社交图标标签 - 苹果风格调整 ========================= */ .icon-tags { display: flex; gap: 14px; /* 图标间距 */ justify-content: center; /* 水平居中 */ margin-top: -5px; /* 向上移动，靠近文字 */ } /* 单个图标按钮 */ .icon-tag { width: 44px; /* 增大点击区域 */ height: 44px; border-radius: 12px; /* 圆角矩形 */ background: var(--glass); /* 应用玻璃背景变量 */ /* 为避免双重滤镜导致的渲染混乱，已移除此处的滤镜。它将继承 .card 的液态背景。 (此注释来自你的原始文件，保持不变) */ /* backdrop-filter: url(#lg-dist); -webkit-backdrop-filter: url(#lg-dist); */ display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.4); /* 更亮的边框 */ cursor: pointer; transition: all 0.2s ease; } /* 图标按钮内的图片 (SVG) */ .icon-tag img { width: 50%; height: 50%; filter: invert(100%); /* 关键：将黑色 SVG 图标反转为白色 */ transition: all 0.2s ease; } /* ========================= 8. 响应式适配 - 优化移动端字体 ========================= */ /* 当视口宽度小于等于 600px 时生效 */ @media (max-width: 600px) { /* 减小卡片尺寸和圆角 */ .card { max-width: 90vw; /* 卡片最大宽度为视口宽度的 90% */ padding: 24px; border-radius: 24px; /* === 确保移动端卡片有 blur(3px) === */ backdrop-filter: blur(3px) saturate(var(--saturation)); /* Apply blur */ -webkit-backdrop-filter: blur(3px) saturate(var(--saturation)); /* Apply blur */ } /* 减小头像尺寸 */ .avatar { width: 90px; height: 90px; /* Avatar maintains its own blur from previous edits */ } /* 减小导航栏高度和内边距 */ .navbar { padding: 0 10px; height: 48px; /* === 确保移动端导航栏有 blur(3px) === */ backdrop-filter: blur(3px) saturate(var(--saturation)); /* Apply blur */ -webkit-backdrop-filter: blur(3px) saturate(var(--saturation)); /* Apply blur */ } /* 减小导航栏中间间距 */ .nav-center { gap: 8px; } /* 减小品牌文字大小 */ .brand div:first-of-type+div { font-size: 11px; } /* 减小导航栏链接字体和内边距 */ .nav-link { font-size: 11px; padding: 6px 6px; } /* 减小卡片内标题字体 */ .status-message h2 { font-size: 18px; } /* 减小卡片内副标题字体 */ .status-message h3 { font-size: 14px; } /* 减小页脚字体 */ footer { font-size: 12px; } } /* ========================= 8b. 触摸设备 :active 放大效果 (保留) ========================= */ /* 针对不支持悬停的触摸设备 (如手机、平板) */ @media (hover: none) and (pointer: coarse) { .navbar:active { transform: translateX(-50%) scale(1.02); /* 悬停阴影被新样式覆盖，这里保持一致 */ /* box-shadow: var(--nav-hover-shadow), var(--lg-highlight-shadow); */ } .card:active { transform: scale(1.03); /* 悬停阴影被新样式覆盖，这里保持一致 */ /* box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15), var(--lg-highlight-shadow); */ } .avatar:active { transform: translateY(-5px) scale(1.03); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); } .icon-tag:active { transform: scale(0.95); /* 保持与hover一致的缩小效果 */ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); } .icon-tag:active img { filter: invert(0%); } .nav-link:active { color: var(--nav-text); background: var(--nav-link-hover-bg); transform: translateY(-1px); } .theme-toggle:active { background: rgba(0, 0, 0, 0.05); transform: rotate(90deg); } .dark-theme .theme-toggle:active { background: rgba(255, 255, 255, 0.1); } } /* ========================= 9. 其它辅助样式 ========================= */ /* 页脚（在 .wrap 之外） */ footer { margin-top: 30px; /* 与 .wrap 的间距 */ color: var(--muted); /* 应用半透明白色文字 */ font-size: 13px; text-align: center; z-index: 2; /* 确保在背景之上 */ position: relative; letter-spacing: 0.2px; } /* 隐藏旧版或未使用的类 */ .tags, .tag, .wave { display: none; } /* ================================== 10. 仅限桌面端的悬停效果 (修复移动端粘滞问题) ================================== */ /* 仅在支持悬停的设备（如桌面电脑）上应用 :hover 效果 */ @media (hover: hover) and (pointer: fine) { /* 导航栏悬停 */ .navbar:hover { /* 悬停阴G影被新样式覆盖，这里保持一致 */ /* box-shadow: var(--nav-hover-shadow), var(--lg-highlight-shadow); */ transform: translateX(-50%) scale(1.02); /* 悬停时变大 */ } .dark-theme .navbar:hover { /* 悬停阴影被新样式覆盖，这里保持一致 */ /* box-shadow: var(--nav-hover-shadow), var(--lg-highlight-shadow); */ transform: translateX(-50%) scale(1.02); /* 悬停时变大 */ } /* 导航链接悬停 */ .nav-link:hover { color: var(--nav-text); background: var(--nav-link-hover-bg); /* 应用链接悬停背景变量 */ transform: translateY(-1px); } .nav-link:hover::after { width: 60%; } /* 主题切换按钮悬停 */ .theme-toggle:hover { background: rgba(0, 0, 0, 0.05); transform: rotate(90deg); /* 旋转图标 */ } .dark-theme .theme-toggle:hover { background: rgba(255, 255, 255, 0.1); } /* 背景图悬停 */ .wrap:hover::after { transform: scale(1.03); } /* 头像悬停 */ .avatar:hover { transform: translateY(-5px) scale(1.03); /* 上浮并轻微放大 */ box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); /* 阴影加深 */ } /* 卡片悬停 */ .card:hover { /* 悬停阴影被新样式覆盖，这里保持一致 */ /* box-shadow: var(--glass-outer-shadow), var(--lg-highlight-shadow); */ transform: scale(1.03); /* 悬停时变大 */ } /* 社交图标悬停 */ .icon-tag:hover { /* background: white; */ /* 移除 */ transform: scale(0.95); /* 修改：变大 -> 变小 */ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* 添加阴影 */ } .icon-tag:hover img { /* 移除：父元素在缩放，所以子元素不需要再缩放 */ filter: invert(0%); /* 关键：图标恢复为原始颜色（黑色） */ } }