/* ===================================================================== 饮水记录 · 设计令牌与通用组件（全站共享） --------------------------------------------------------------------- 职责： 1. 定义全站统一的设计令牌（颜色 / 形状 / 阴影 / 动效）； 2. 提供浅色与深色两套中性色（由 切换）； 3. 提供跨页面复用的通用组件（按钮 / 卡片 / 胶囊 / 弹窗 / 表单 / 开关 / 进度条 / toast / 空状态 / 顶部栏 / 入口卡 等）； 4. 水感渐变背景与流体光晕动效。 主题色（--primary 系列）由 theme.js 在运行时注入， 本文件只提供默认值以保证样式在任何情况下都有兜底。 ===================================================================== */ /* ==================== 设计令牌：浅色 ==================== */ :root { color-scheme: light; /* --- 品牌色（主题色由 theme.js 覆盖） --- */ --primary: #4da6ff; --primary-dark: #2b8aeb; --primary-light: #7cc0ff; --primary-soft: rgba(77, 166, 255, 0.13); --primary-softer: rgba(77, 166, 255, 0.06); --primary-glow: rgba(77, 166, 255, 0.32); --primary-grad: linear-gradient(135deg, #6fb8ff 0%, #4da6ff 52%, #2b8aeb 100%); /* --- 中性色 --- */ --bg: #eef5fb; --bg-top: #f8fcff; --card-bg: #ffffff; --card-bg-2: #f8fbff; --surface-muted: #f2f7fc; --text: #16202e; --text-secondary: #5b6472; --text-muted: #9099a6; --border: #e4edf5; --border-strong: #d2e2f0; --ring-track: #e6eef7; /* --- 功能色 --- */ --success: #4caf50; --danger: #f44336; --warning: #ff9800; --info: #2196f3; /* --- 形状 --- */ --radius: 18px; --radius-sm: 12px; --radius-xs: 8px; --radius-pill: 999px; /* --- 阴影 --- */ --shadow: 0 8px 24px rgba(31, 88, 150, 0.08); --shadow-sm: 0 2px 10px rgba(31, 88, 150, 0.06); --shadow-lg: 0 18px 44px rgba(31, 88, 150, 0.16); /* --- 动效 --- */ --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1); --ease: cubic-bezier(0.4, 0, 0.2, 1); } /* ==================== 设计令牌：深色 ==================== */ [data-theme="dark"] { color-scheme: dark; --bg: #0b1220; --bg-top: #101a2b; --card-bg: #151f31; --card-bg-2: #1a2638; --surface-muted: #1b2739; --text: #e8eef5; --text-secondary: #a9b4c3; --text-muted: #6f7a8b; --border: #24334b; --border-strong: #2f425e; --ring-track: #22314a; --shadow: 0 10px 28px rgba(0, 0, 0, 0.4); --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.32); --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55); } [data-theme="dark"] .modal-overlay { background: rgba(3, 8, 16, 0.62); } [data-theme="dark"] .switch .slider:before { background: #dfe7f1; } /* ==================== 基础重置 ==================== */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 隐藏滚动条（保留滑动能力） */ html { scrollbar-width: none; -ms-overflow-style: none; background: var(--bg); } html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; background: transparent; } .summary-popup-body, .modal, .bar-scroll { scrollbar-width: none; } .summary-popup-body::-webkit-scrollbar, .modal::-webkit-scrollbar, .bar-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; } /* [hidden] 兜底：避免被 display:flex 等作者样式覆盖 */ [hidden] { display: none !important; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif; color: var(--text); min-height: 100vh; min-height: 100dvh; overflow-x: hidden; background: transparent; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); transition: background-color 0.35s ease, color 0.35s ease; } /* 水感渐变底：柔和的三层渐变，固定不随滚动 */ body::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background-image: radial-gradient(1100px 620px at 8% -10%, var(--primary-softer), transparent 62%), radial-gradient(820px 520px at 96% 2%, rgba(79, 195, 247, 0.10), transparent 60%), linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 46%, var(--bg) 100%); transition: background-image 0.35s ease; } /* 流体光晕：缓慢漂移的水波光斑（GPU 合成，不触发重排） */ body::after { content: ''; position: fixed; inset: -15%; z-index: -1; pointer-events: none; opacity: 0.9; background-image: radial-gradient(closest-side, var(--primary-soft), transparent 72%), radial-gradient(closest-side, rgba(79, 195, 247, 0.12), transparent 72%); background-position: 14% 22%, 84% 68%; background-size: 46% 42%, 52% 46%; background-repeat: no-repeat; animation: waterDrift 24s ease-in-out infinite alternate; will-change: transform; } @keyframes waterDrift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(2.5%, -2%, 0) scale(1.06); } 100% { transform: translate3d(-2%, 2.5%, 0) scale(1.03); } } /* ==================== 布局容器 ==================== */ .app-container { max-width: 520px; margin: 0 auto; padding: 16px; padding-bottom: 36px; } .container { max-width: 560px; width: 100%; margin: 0 auto; padding: 0 16px 40px; overflow-x: hidden; } /* ==================== 顶部栏 / 返回按钮 ==================== */ .topbar, .page-header { position: relative; display: flex; align-items: center; justify-content: center; min-height: 46px; /* 左右不再额外留白：让返回/历史胶囊与下方卡片、按钮组左对齐；底部留出更多呼吸空间 */ padding: calc(env(safe-area-inset-top) + 12px) 0 16px; } /* 顶部栏吸顶（毛玻璃）：滚动时返回入口始终可见。 底色取「页面背景顶部色」（body::before 是 fixed 背景，视口顶部始终接近该色）， 再向下渐隐，深浅色模式下都能与背景自然融合，不会出现一条突兀的深色色带 */ .page-header { position: sticky; top: 0; z-index: 10; background: linear-gradient( 180deg, color-mix(in srgb, var(--bg-top) 92%, transparent) 0%, color-mix(in srgb, var(--bg-top) 88%, transparent) 68%, transparent 100% ); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); } .topbar-title, .page-header h1 { width: 100%; text-align: center; font-size: 18px; font-weight: 700; letter-spacing: 0.2px; } .page-header h1 { font-size: 20px; /* 与两侧胶囊保持安全间距，避免标题和按钮贴在一起 */ padding: 0 96px; } .topbar-right { position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 2; } /* 顶部栏右侧胶囊链接（历史 / 统计），与左侧返回按钮成对 */ .btn-toplink, .topbar-right a { display: inline-flex; align-items: center; gap: 4px; box-sizing: border-box; height: 34px; padding: 0 13px; border-radius: var(--radius-pill); background: var(--card-bg); border: 1px solid var(--border); box-shadow: var(--shadow-sm); color: var(--text-secondary); text-decoration: none; font-size: 13px; font-weight: 600; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: all var(--transition); } .btn-toplink .arrow { font-size: 15px; line-height: 1; opacity: 0.6; } .btn-toplink:hover, .topbar-right a:hover { color: var(--primary); border-color: var(--primary-glow); background: var(--primary-softer); box-shadow: 0 6px 16px var(--primary-glow); } .btn-toplink:active, .topbar-right a:active { transform: scale(0.96); } /* 靠右吸边定位（统计页顶部栏） */ .toplink-right { position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 2; } .toplink-right:hover { transform: translateY(-50%) translateX(2px); } .toplink-right:active { transform: translateY(-50%) scale(0.96); } .btn-back, .topbar-back { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 2; display: inline-flex; align-items: center; gap: 7px; box-sizing: border-box; height: 34px; padding: 0 14px 0 5px; border-radius: var(--radius-pill); background: var(--card-bg); color: var(--primary); text-decoration: none; font-size: 13.5px; font-weight: 600; border: 1px solid var(--primary-glow); box-shadow: var(--shadow-sm); white-space: nowrap; flex-shrink: 0; -webkit-tap-highlight-color: transparent; transition: all var(--transition); } /* 箭头做成圆形色块，返回语义更清晰 */ .btn-back .arrow, .topbar-back .arrow { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--primary-grad); color: #fff; font-size: 14px; font-weight: 700; line-height: 1; box-shadow: 0 2px 6px var(--primary-glow); transition: transform var(--transition); } .btn-back:hover, .topbar-back:hover { background: var(--primary-soft); border-color: var(--primary); box-shadow: 0 6px 16px var(--primary-glow); transform: translateY(-50%) translateX(-2px); } .btn-back:hover .arrow, .topbar-back:hover .arrow { transform: translateX(-2px); } .btn-back:active, .topbar-back:active { transform: translateY(-50%) scale(0.97); } /* 窄屏：压缩胶囊尺寸，给标题留出空间 */ @media (max-width: 420px) { .btn-back, .topbar-back { height: 32px; padding: 0 12px 0 4px; gap: 6px; font-size: 12.5px; } .btn-back .arrow, .topbar-back .arrow { width: 22px; height: 22px; font-size: 13px; } .btn-toplink, .topbar-right a { height: 32px; padding: 0 11px; font-size: 12.5px; } .page-header h1 { padding: 0 88px; font-size: 19px; } } /* ==================== 卡片 ==================== */ .card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 14px; transition: box-shadow var(--transition), border-color var(--transition); } .card-title { font-size: 16px; font-weight: 700; margin: 0 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .card-title .hint { font-size: 12px; font-weight: 400; color: var(--text-muted); } .card-desc { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 10px; line-height: 1.65; } .hint { font-size: 12px; color: var(--text-muted); line-height: 1.65; } /* ==================== 按钮 ==================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 20px; border-radius: var(--radius-sm); border: none; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition); } .btn:active { transform: scale(0.96); } .btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; } .btn-primary { background: var(--primary-grad); color: #fff; box-shadow: 0 6px 16px var(--primary-glow); } .btn-primary:hover { filter: brightness(1.05); box-shadow: 0 9px 24px var(--primary-glow); } .btn-secondary { background: var(--surface-muted); color: var(--text); border: 1px solid var(--border); } .btn-secondary:hover { background: var(--border); } .btn-outline { background: transparent; border: 1.5px solid var(--border-strong); color: var(--text-secondary); } .btn-outline:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-softer); } .btn-danger { background: linear-gradient(135deg, #ff6257, #e53935); color: #fff; box-shadow: 0 6px 16px rgba(244, 67, 54, 0.28); } .btn-danger:hover { filter: brightness(1.05); } .btn-sm { padding: 7px 14px; font-size: 13px; } .btn-block { width: 100%; } /* 图标按钮（管理页增删改） */ .btn-icon { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--card-bg); font-size: 14px; cursor: pointer; color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; line-height: 1; flex-shrink: 0; transition: all var(--transition); } .btn-icon:hover { background: var(--primary-softer); border-color: var(--primary); color: var(--primary); } .btn-icon.danger:hover { background: rgba(244, 67, 54, 0.12); border-color: var(--danger); color: var(--danger); } /* 虚线新增按钮 */ .btn-add { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; padding: 10px; border-radius: var(--radius-sm); border: 1.5px dashed var(--border-strong); background: transparent; color: var(--text-muted); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: all var(--transition); } .btn-add:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-softer); } /* ==================== 胶囊 / 标签 ==================== */ .chip { padding: 8px 16px; border-radius: var(--radius-pill); border: 1.5px solid var(--border); background: var(--card-bg); color: var(--text-secondary); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: all var(--transition); } .chip:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-softer); } .chip:active { transform: scale(0.96); } .chip.active { background: var(--primary-grad); color: #fff; border-color: transparent; box-shadow: 0 4px 12px var(--primary-glow); } .badge { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--surface-muted); color: var(--text-muted); } .badge.default { background: var(--primary-soft); color: var(--primary); } /* ==================== 进度条 ==================== */ .progress-bar-wrapper { height: 10px; background: var(--surface-muted); border-radius: var(--radius-pill); overflow: hidden; } .progress-bar { height: 100%; width: 0%; border-radius: var(--radius-pill); background: var(--primary-grad); transition: width 0.6s var(--ease), background 0.4s ease; } .bar { height: 10px; background: var(--surface-muted); border-radius: var(--radius-pill); overflow: hidden; } .bar-fill { height: 100%; width: 0%; border-radius: var(--radius-pill); background: var(--primary-grad); transition: width 0.5s var(--ease); } /* ==================== 入口卡片 ==================== */ .entrance-card { display: flex; align-items: center; gap: 12px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 15px 16px; margin-bottom: 14px; text-decoration: none; color: inherit; transition: all var(--transition); } .entrance-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--primary-glow); } .entrance-icon { font-size: 21px; flex-shrink: 0; width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: var(--primary-soft); } .entrance-card .ttl { font-size: 15px; font-weight: 700; } .entrance-card .sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .entrance-arrow { margin-left: auto; color: var(--text-muted); font-size: 20px; flex-shrink: 0; } /* ==================== 弹窗 ==================== */ .modal-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(10, 22, 40, 0.46); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); z-index: 300; opacity: 0; pointer-events: none; transition: opacity var(--transition); } .modal-overlay.active { opacity: 1; pointer-events: auto; } .modal { background: var(--card-bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; width: 100%; max-width: 400px; max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow-lg); transform: translateY(14px) scale(0.985); transition: transform var(--transition); } .modal-overlay.active .modal { transform: translateY(0) scale(1); } .modal h3 { font-size: 18px; font-weight: 700; margin-bottom: 16px; } .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; } /* 弹窗打开时锁定背景滚动 */ body.modal-lock { overflow: hidden; } /* ==================== 表单 ==================== */ .form-group { margin-bottom: 14px; } .form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 11px 14px; border-radius: var(--radius-xs); border: 1.5px solid var(--border); background: var(--card-bg-2); color: var(--text); font-family: inherit; font-size: 14px; outline: none; transition: border-color var(--transition), box-shadow var(--transition), background var(--transition); } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-muted); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); background: var(--card-bg); } .color-pick-row { display: flex; gap: 10px; flex-wrap: wrap; } .color-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform var(--transition), border-color var(--transition); } .color-dot:hover { transform: scale(1.14); } .color-dot.selected { border-color: var(--text); transform: scale(1.16); } /* ==================== 开关 ==================== */ .switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; } .switch input { opacity: 0; width: 0; height: 0; position: absolute; } .switch .slider { position: absolute; inset: 0; background: var(--border-strong); border-radius: var(--radius-pill); transition: 0.25s var(--ease); cursor: pointer; } .switch .slider:before { content: ""; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: 0.25s var(--ease); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); } .switch input:checked + .slider { background: var(--primary-grad); } .switch input:checked + .slider:before { transform: translateX(20px); } .switch input:focus-visible + .slider { box-shadow: 0 0 0 3px var(--primary-soft); } /* ==================== Toast ==================== */ .toast { position: fixed; top: calc(20px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%) translateY(-16px); padding: 11px 22px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; color: #fff; z-index: 1200; max-width: 86%; text-align: center; opacity: 0; pointer-events: none; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2); transition: opacity 0.28s var(--ease), transform 0.28s var(--ease); } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .toast.success { background: linear-gradient(135deg, #56c464, #3d9a44); } .toast.error { background: linear-gradient(135deg, #ff6257, #d32f2f); } .toast.info { background: var(--primary-grad); } /* ==================== 空状态 / 加载 ==================== */ .empty-state, .empty, .loading { text-align: center; color: var(--text-muted); font-size: 14px; } .empty-state { padding: 34px 0; } .empty { padding: 30px 0; } .loading { padding: 40px 0; } .empty-state .big { font-size: 40px; display: block; margin-bottom: 10px; } /* ==================== 通用工具类 ==================== */ .glass { background: color-mix(in srgb, var(--card-bg) 82%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .text-muted { color: var(--text-muted); } .text-secondary { color: var(--text-secondary); } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .grow { flex: 1; min-width: 0; } /* ==================== 响应式 ==================== */ @media (min-width: 769px) { .app-container { max-width: 720px; padding: 24px 16px 44px; } .container { max-width: 720px; } .card { padding: 22px; } } @media (max-width: 768px) { .app-container { max-width: 100%; padding: 12px 14px 32px; } .container { max-width: 100%; } } @media (max-width: 400px) { .app-container { padding: 8px 10px 28px; } .container { padding: 0 10px 30px; } .topbar-title { font-size: 17px; } .page-header h1 { font-size: 18px; } .card { padding: 14px; } .btn { padding: 10px 16px; font-size: 13px; } .chip { padding: 7px 13px; font-size: 12.5px; } .modal { padding: 18px; } } /* ==================== 无障碍：尊重减弱动态效果偏好 ==================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } body::after { animation: none; } }