/* ========================================================================== 桃语基础布局层 v1.0.0 -------------------------------------------------------------------------- 设计目标：为所有主题提供统一的现代 UI 布局与组件样式 品牌色由各主题通过 --primary / --secondary 提供 接入方式：theme_functions.php 的 renderThemeAssets() 自动注入本文件， 位于 assets/css/style.css 之后、主题专属 CSS 之前。 架构说明： L1 令牌层 —— 中性色/间距/圆角/阴影（品牌色来自 --primary / --secondary） L2 基础层 —— 全局重置、焦点环、选中文本 L3 组件层 —— 各组件的现代样式覆盖 维护约定： · 品牌色只引用 var(--primary) / var(--secondary) / var(--primary-rgb) / var(--secondary-rgb) · 各主题负责提供上述变量 ========================================================================== */ /* ========================================================================== L1 · 令牌层 -------------------------------------------------------------------------- 使用 html:root 提高特异性，压制页面内联的 :root 覆盖块 （index.php 等页面在 末尾输出了内联 :root{...}） ========================================================================== */ html:root { /* ---- 品牌轴：由各主题提供，此处兜底默认（默认主题色） ---- */ --primary: #667eea; --secondary: #764ba2; --primary-rgb: 102, 126, 234; --secondary-rgb: 118, 75, 162; --heart-color: #FF4D79; --heart-rgb: 255, 77, 121; /* ---- 品牌派生轴：由主/次/心形色自动派生，任何主题通用（无需逐主题配置） ---- */ --grad-brand: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 55%, var(--heart-color) 155%); --grad-brand-soft: linear-gradient(135deg, rgba(var(--primary-rgb), .10) 0%, rgba(var(--secondary-rgb), .07) 100%); --brand-tint: rgba(var(--primary-rgb), .08); --brand-tint-2: rgba(var(--primary-rgb), .16); --brand-line: rgba(var(--primary-rgb), .16); --brand-line-strong: rgba(var(--primary-rgb), .34); --ring-glow: 0 0 0 4px rgba(var(--primary-rgb), .13); --btn-shadow: 0 2px 8px rgba(var(--primary-rgb), .26), 0 10px 24px -8px rgba(var(--primary-rgb), .28); --btn-shadow-hover: 0 4px 14px rgba(var(--primary-rgb), .34), 0 14px 32px -8px rgba(var(--primary-rgb), .34); --card-brand-line: rgba(var(--primary-rgb), .10); --card-brand-shadow: 0 14px 34px -18px rgba(var(--primary-rgb), .18); --heart-glow: 0 6px 14px -6px rgba(var(--heart-rgb), .38); /* ---- 中性轴：只随明暗模式变化，与主题解耦 ---- */ --neutral-0: #FFFFFF; --neutral-50: #F7F7FB; --neutral-100: #EFEFF6; --neutral-200: #E4E4EF; --neutral-300: #D3D3E0; --neutral-500: #6E6E8C; --neutral-700: #3D3D5C; --neutral-900: #1A1A2E; /* 通用分隔线（暗夜主题由主题注入覆盖为深色） */ --line: var(--neutral-100); /* ---- 语义层 ---- */ --bg: var(--neutral-50); --bg-surface: var(--neutral-0); --text: var(--neutral-900); --text-secondary: var(--neutral-700); --text-tertiary: var(--neutral-500); --card-bg: var(--neutral-0); --card-shadow: 0 1px 2px rgb(20 16 50 / .04), 0 4px 12px rgb(20 16 50 / .06); --card-shadow-hover: 0 2px 4px rgb(20 16 50 / .05), 0 8px 24px rgb(20 16 50 / .09); --card-border: 1px solid var(--neutral-100); --bg-close-btn: rgb(20 16 50 / .05); --bg-close-btn-hover: rgb(20 16 50 / .10); /* ---- 间距：4pt 栅格 ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; /* ---- 圆角 ---- */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius: 20px; --radius-lg: 24px; --radius-full: 999px; /* ---- 动效 ---- */ --ease-out: cubic-bezier(.22, 1, .36, 1); --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms; /* ---- 层级 ---- */ --z-nav: 90; --z-fab: 80; /* ---- 无障碍 ---- */ --focus-ring-width: 3px; --focus-ring-color: rgba(var(--primary-rgb), .45); --focus-ring-offset: 2px; /* ---- 触摸目标最小尺寸 ---- */ --touch-min: 44px; /* ---- 内容宽度 ---- */ --content-max: 600px; } /* ---- 深色模式（跟随系统） ---- */ @media (prefers-color-scheme: dark) { html:root:not([data-mode="light"]) { --neutral-0: #191927; --neutral-50: #101018; --neutral-100: #242435; --neutral-200: #2E2E42; --neutral-300: #3A3A52; --neutral-500: #8A8AA3; --neutral-700: #C4C4D6; --neutral-900: #EDEDF5; --bg: #101018; --text: #EDEDF5; --card-bg: #191927; --card-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 4px 12px rgb(0 0 0 / .35); --card-shadow-hover: 0 2px 4px rgb(0 0 0 / .35), 0 8px 24px rgb(0 0 0 / .45); --card-border: 1px solid var(--neutral-200); --bg-close-btn: rgb(255 255 255 / .08); --bg-close-btn-hover: rgb(255 255 255 / .14); } } /* 手动切换深色 */ html:root[data-mode="dark"] { --neutral-0: #191927; --neutral-50: #101018; --neutral-100: #242435; --neutral-200: #2E2E42; --neutral-300: #3A3A52; --neutral-500: #8A8AA3; --neutral-700: #C4C4D6; --neutral-900: #EDEDF5; --bg: #101018; --text: #EDEDF5; --card-bg: #191927; --card-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 4px 12px rgb(0 0 0 / .35); --card-shadow-hover: 0 2px 4px rgb(0 0 0 / .35), 0 8px 24px rgb(0 0 0 / .45); --card-border: 1px solid var(--neutral-200); --bg-close-btn: rgb(255 255 255 / .08); --bg-close-btn-hover: rgb(255 255 255 / .14); } /* ========================================================================== L2 · 基础层 ========================================================================== */ /* 用 html body 压制页面内联的 body{background:...} */ html body { /* 细腻背景：主色/次色/心形色三团低透明光晕 + 主题底色，随任何主题自动适配 */ background: radial-gradient(1100px 560px at 12% -8%, rgba(var(--primary-rgb), .12), transparent 62%), radial-gradient(900px 480px at 106% 6%, rgba(var(--secondary-rgb), .10), transparent 60%), radial-gradient(720px 420px at 42% 112%, rgba(var(--heart-rgb), .07), transparent 64%), var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 深色模式下强制覆盖主题亮色背景（特异性高于内置主题的 html body） */ html:root[data-mode="dark"] body { background: radial-gradient(1100px 560px at 12% -8%, rgba(var(--primary-rgb), .08), transparent 62%), radial-gradient(900px 480px at 106% 6%, rgba(var(--secondary-rgb), .06), transparent 60%), radial-gradient(720px 420px at 42% 112%, rgba(var(--heart-rgb), .05), transparent 64%), var(--bg); color: var(--text); } @media (prefers-color-scheme: dark) { html:root:not([data-mode="light"]) body { background: radial-gradient(1100px 560px at 12% -8%, rgba(var(--primary-rgb), .08), transparent 62%), radial-gradient(900px 480px at 106% 6%, rgba(var(--secondary-rgb), .06), transparent 60%), radial-gradient(720px 420px at 42% 112%, rgba(var(--heart-rgb), .05), transparent 64%), var(--bg); color: var(--text); } } /* 焦点环：确保 --primary-rgb 生效 */ :focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-xs); } /* 选中态配色跟随品牌色 */ ::selection { background: rgba(var(--primary-rgb), .22); color: var(--text); } /* ========================================================================== L3 · 组件层 ========================================================================== */ /* ---------- 顶部栏 ---------- */ .header { background: rgb(255 255 255 / .86); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--card-brand-line); box-shadow: 0 1px 2px rgb(20 16 50 / .03); } html:root[data-mode="dark"] .header { background: rgb(25 25 39 / .86); border-bottom-color: var(--neutral-200); } @media (prefers-color-scheme: dark) { html:root:not([data-mode="light"]) .header { background: rgb(25 25 39 / .86); border-bottom-color: var(--neutral-200); } } .header-title { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -.01em; } /* ---------- 搜索框 ---------- */ .search-box { background: var(--neutral-100); border: 1px solid transparent; border-radius: var(--radius-full); transition: border-color var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out); } .search-box:focus-within { background: var(--bg-surface); border-color: var(--brand-line-strong); box-shadow: var(--ring-glow); } .search-input { background: transparent; color: var(--text); } .search-input::placeholder { color: var(--text-tertiary); } /* ---------- 双 Tab 切换 ---------- */ .tab-bar { background: var(--neutral-100); border-radius: var(--radius-full); padding: var(--space-1); gap: var(--space-1); } .tab-item { border-radius: var(--radius-full); color: var(--text-secondary); font-weight: 600; transition: color var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); } .tab-item.active, .tab-item[aria-selected="true"] { background: var(--bg-surface); color: var(--primary); box-shadow: 0 1px 3px rgb(20 16 50 / .08), var(--ring-glow); } /* ---------- 帖子卡片 ---------- */ .post-card, .card { background: var(--card-bg); border: 1px solid var(--card-brand-line); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); } @media (hover: hover) { .post-card:hover { box-shadow: var(--card-shadow-hover), var(--card-brand-shadow); border-color: var(--brand-line); transform: translateY(-1px); } } /* 卡片分区用细线分隔 */ .post-header { padding-bottom: var(--space-3); } .post-content { color: var(--text); line-height: 1.72; } .post-actions { border-top: 1px solid var(--neutral-100); padding-top: var(--space-3); margin-top: var(--space-3); } html:root[data-mode="dark"] .post-actions { border-top-color: var(--neutral-200); } @media (prefers-color-scheme: dark) { html:root:not([data-mode="light"]) .post-actions { border-top-color: var(--neutral-200); } } /* ---------- 互动按钮（点赞/评论/收藏）---------- */ .action-btn { color: var(--text-secondary); border-radius: var(--radius-full); transition: color var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out), transform var(--duration-fast) var(--ease-out); } .action-btn i { transition: transform var(--duration-base) var(--ease-out); } @media (hover: hover) { .action-btn:hover { color: var(--primary); background: rgba(var(--primary-rgb), .08); } .action-btn:hover i { transform: scale(1.1); } } .action-btn:active i { transform: scale(.88); } /* 已点赞：用心形品牌色 + 柔和光晕 */ .action-btn.liked, .action-btn.liked:hover { color: var(--heart-color); background: rgba(var(--heart-rgb), .1); box-shadow: var(--heart-glow); } /* 已收藏：用琥珀色 */ .action-btn.favorited, .action-btn.favorited:hover { color: #F59E0B; background: rgb(245 158 11 / .1); } /* 交互反馈动画 */ @media (prefers-reduced-motion: no-preference) { .action-btn.liked i, .action-btn.favorited i { animation: tyHeartBeat .5s var(--ease-out); } } @keyframes tyHeartBeat { 0% { transform: scale(1); } 28% { transform: scale(1.34); } 56% { transform: scale(.92); } 100% { transform: scale(1); } } /* ---------- 发布按钮 ---------- */ .publish-btn { background: var(--grad-brand); color: #fff; border: none; box-shadow: var(--btn-shadow); transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), filter var(--duration-base) var(--ease-out); } @media (hover: hover) { .publish-btn:hover { transform: translateY(-2px); box-shadow: var(--btn-shadow-hover); filter: brightness(1.05); } } .publish-btn:active { transform: translateY(0) scale(.97); filter: brightness(.96); } /* ---------- 底部导航：悬浮胶囊 ---------- */ .bottom-nav { position: fixed !important; left: var(--space-4); right: var(--space-4); bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); width: auto; max-width: calc(var(--content-max) - var(--space-8)); margin: 0 auto; height: 58px; padding: 0; display: block; background: rgb(255 255 255 / .78); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border: 1px solid rgb(255 255 255 / .6); border-top: 1px solid rgb(255 255 255 / .6); border-radius: var(--radius-full); box-shadow: 0 2px 8px rgb(20 16 50 / .08), 0 8px 28px rgb(20 16 50 / .12); overflow: hidden; z-index: var(--z-nav); /* 移动端 fixed 稳定：强制合成层，避免滚动时 backdrop-filter 导致位置跳动 */ transform: translateZ(0); backface-visibility: hidden; will-change: transform; -webkit-transform: translateZ(0); } /* 不透明衬底：防止滚动内容透出 */ .bottom-nav::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--bg-surface); opacity: .86; } /* ---------- 导航栏隐藏规则（v1.13.2） ---------- 页面级隐藏 + 遮罩打开时隐藏。详见 assets/js/chrome-auto-hide.js ------------------------------------------------------------------ */ body.hide-bottom-nav .bottom-nav, .hide-bottom-nav .bottom-nav, body.hide-bottom-nav .fab-publish, body.hide-bottom-nav .fab-btn, .hide-bottom-nav .fab-publish, .hide-bottom-nav .fab-btn { display: none !important; } body.chrome-hidden .bottom-nav, body.chrome-hidden .fab-publish, body.chrome-hidden .fab-btn { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 0.18s ease, visibility 0.18s ease; } /* 弹窗遮罩必须盖住底部导航，避免导航浮在遮罩之上 */ .modal-overlay, .publish-overlay, [class*="modal"] > [class*="overlay"] { z-index: 10050 !important; } .modal, .vip-modal { z-index: 10060 !important; } .bottom-nav .nav-content { display: flex; justify-content: space-around; align-items: center; height: 100%; padding: 0; } .nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 100%; padding: 0; color: var(--text-tertiary); font-size: 11px; font-weight: 500; text-decoration: none; position: relative; transition: color var(--duration-base) var(--ease-out); } .nav-item i { font-size: 20px; transition: transform var(--duration-base) var(--ease-out); } .nav-item.active, .nav-item[aria-current="page"] { color: var(--primary); font-weight: 600; } .nav-item.active i { transform: translateY(-1px) scale(1.08); } /* 选中项细腻药丸底色：主色淡 tint + 内圈光晕 */ .nav-item.active::before, .nav-item[aria-current="page"]::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 28px; border-radius: var(--radius-full); background: var(--brand-tint-2); box-shadow: inset 0 0 0 1px var(--brand-line); } /* 让图标与文字浮在药丸之上 */ .nav-item.active > i, .nav-item.active > span, .nav-item[aria-current="page"] > i, .nav-item[aria-current="page"] > span { position: relative; } /* 非选中项不显示文字，减少视觉噪音 */ .nav-item span { display: none; } .nav-item.active span, .nav-item[aria-current="page"] span { display: inline; } /* 触摸目标补偿 */ .nav-item::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; min-width: var(--touch-min); min-height: var(--touch-min); } /* 底部留白：为悬浮导航腾出空间 */ html body { padding-bottom: calc(58px + var(--space-4) * 2 + env(safe-area-inset-bottom, 0px)); } html:root[data-mode="dark"] .bottom-nav { background: rgb(25 25 39 / .78); border-color: rgb(255 255 255 / .1); box-shadow: 0 2px 8px rgb(0 0 0 / .3), 0 8px 28px rgb(0 0 0 / .4); } @media (prefers-color-scheme: dark) { html:root:not([data-mode="light"]) .bottom-nav { background: rgb(25 25 39 / .78); border-color: rgb(255 255 255 / .1); box-shadow: 0 2px 8px rgb(0 0 0 / .3), 0 8px 28px rgb(0 0 0 / .4); } } /* ---------- 空状态 ---------- */ .empty-state { color: var(--text-tertiary); padding: var(--space-10) var(--space-5); } .empty-state i, .empty-state svg { color: var(--primary); opacity: .32; margin-bottom: var(--space-4); } /* ---------- 弹层 / 抽屉 ---------- */ .publish-sheet, .sheet-content, .modal-content, .auth-content, .appeal-content { background: var(--bg-surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: 0 -8px 40px rgb(20 16 50 / .18); border-top: 1px solid var(--card-brand-line); } /* 拖拽小横条：只作用于细横条本身 【修复】原选择器把 .sheet-handle-bar（标题栏容器）一起选中， 导致整个标题栏被涂成灰蓝实心胶囊、并覆盖掉原有的渐隐背景。 容器需保持"不透明底色"（见下方说明），只让 4~5px 的小横条上色。 */ .sheet-handle { background: var(--neutral-300); border-radius: var(--radius-full); } /* 标题栏容器：吸顶时需要不透明底色，否则滚动内容会穿透到标题栏上方。 此处不做覆盖，交由 index.php 内联样式统一控制； 仅兜底清除误加的胶囊圆角。 */ .sheet-handle-bar { border-radius: 0; } /* 输入控件统一风格 */ .appeal-input, .appeal-textarea, .appeal-select, input[type="text"], input[type="password"], input[type="email"], input[type="number"], textarea, select { background: var(--neutral-100); border: 1px solid transparent; border-radius: var(--radius-md); color: var(--text); transition: border-color var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); } .appeal-input:focus, .appeal-textarea:focus, .appeal-select:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus, textarea:focus, select:focus { background: var(--bg-surface); border-color: var(--brand-line-strong); box-shadow: var(--ring-glow); outline: none; } /* ---------- 按钮体系 ---------- */ .btn-primary, .ban-btn-primary, .appeal-submit { background: var(--grad-brand); border: none; border-radius: var(--radius-md); color: #fff; font-weight: 600; box-shadow: var(--btn-shadow); transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), filter var(--duration-base) var(--ease-out); } @media (hover: hover) { .btn-primary:hover, .ban-btn-primary:hover, .appeal-submit:hover { transform: translateY(-1px); box-shadow: var(--btn-shadow-hover); filter: brightness(1.05); } } .btn-primary:active, .ban-btn-primary:active, .appeal-submit:active { transform: translateY(0) scale(.98); filter: brightness(.96); } .btn-secondary, .ban-btn-secondary { background: var(--neutral-100); border: 1px solid var(--neutral-200); border-radius: var(--radius-md); color: var(--text-secondary); font-weight: 600; } /* ---------- 标签 ---------- */ .ad-badge, .admin-badge, .vip-badge { border-radius: var(--radius-full); font-weight: 600; } /* ========================================================================== 无障碍：降低动效 ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .publish-btn:hover, .post-card:hover { transform: none !important; } } /* 高对比度模式 */ @media (prefers-contrast: more) { html:root { --neutral-500: #4A4A66; --card-border: 2px solid var(--neutral-300); --focus-ring-width: 4px; } } /* ========================================================================== 响应式 ========================================================================== */ @media (min-width: 768px) { .bottom-nav { left: 50%; right: auto; transform: translateX(-50%); width: 460px; } } @media (max-width: 360px) { .bottom-nav { left: var(--space-2); right: var(--space-2); height: 54px; } .nav-item i { font-size: 18px; } } /* ========================================================================== L4 · 扩展组件覆盖（补充 style.css 中的其余组件） ========================================================================== */ /* ---------- 帖子：话题标签 ---------- */ .post-topic { background: rgba(var(--primary-rgb), .08); color: var(--primary); border-radius: var(--radius-full); font-weight: 500; } /* ---------- 帖子：媒体网格 ---------- */ .media-item { border-radius: var(--radius-sm); background: var(--neutral-100); } .video-icon { background: rgba(0, 0, 0, .45); border-radius: 50%; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } /* ---------- 帖子：评论预览 ---------- */ .comments-preview { border-top: 1px solid var(--neutral-100); padding-top: var(--space-3); margin-top: var(--space-3); } html:root[data-mode="dark"] .comments-preview { border-top-color: var(--neutral-200); } @media (prefers-color-scheme: dark) { html:root:not([data-mode="light"]) .comments-preview { border-top-color: var(--neutral-200); } } .comment-preview-item:hover { background: rgba(var(--primary-rgb), .04); border-radius: var(--radius-xs); } .comment-preview-nickname { color: var(--text); font-weight: 600; } .comment-preview-text { color: var(--text-secondary); } .view-more { color: var(--primary); background: rgba(var(--primary-rgb), .05); border-radius: var(--radius-full); transition: all var(--duration-base) var(--ease-out); } .view-more:hover { background: rgba(var(--primary-rgb), .12); transform: translateY(-1px); } /* ---------- Tab 栏（.tab-btn 命名体系） ---------- */ .tab-btn { border-radius: var(--radius-sm); color: var(--text-secondary); font-weight: 600; opacity: 1; transition: all var(--duration-base) var(--ease-out); } .tab-btn.active { background: var(--bg-surface); color: var(--primary); box-shadow: 0 1px 3px rgb(20 16 50 / .08), var(--ring-glow); opacity: 1; } .tab-btn:hover:not(.active) { opacity: 1; color: var(--text); background: var(--bg-surface, rgba(255, 255, 255, .4)); } /* ---------- 浮动发布按钮 FAB ---------- */ .fab-publish { background: var(--grad-brand); box-shadow: var(--btn-shadow-hover); z-index: var(--z-fab); transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), filter var(--duration-base) var(--ease-out); } .fab-publish:hover { transform: scale(1.08); box-shadow: 0 8px 28px rgba(var(--primary-rgb), .48), 0 16px 40px rgba(var(--primary-rgb), .32); filter: brightness(1.05); } /* ---------- 灵动岛音乐播放器（向下展开） ---------- */ .dynamic-island-music { position: relative; background: var(--bg-surface); color: var(--text); border-radius: 50px; padding: 0 10px; height: 36px; min-width: 36px; max-width: 140px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; transition: all 0.35s cubic-bezier(0.32, 0.72, 0, 1); box-shadow: var(--card-shadow); z-index: 100; user-select: none; border: 1px solid var(--neutral-200); } .dynamic-island-music:hover { box-shadow: var(--card-shadow-hover); } /* 收起状态 */ .dynamic-island-music .island-collapsed { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; min-width: 0; transition: opacity 0.2s ease; } /* 来源图标通用样式 */ .island-source-icon { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; font-size: 10px; font-weight: 700; color: #fff; } /* 网易云音乐图标 - 红色 */ .island-source-icon.source-netease { background: linear-gradient(135deg, #ff2d55, #ff6b6b); box-shadow: 0 2px 6px rgba(255, 45, 85, 0.3); } .island-source-icon.source-netease::before { content: '网'; font-size: 10px; } /* QQ音乐图标 - 绿色 */ .island-source-icon.source-qq { background: linear-gradient(135deg, #31c27c, #12b886); box-shadow: 0 2px 6px rgba(49, 194, 124, 0.3); } .island-source-icon.source-qq::before { content: 'Q'; font-size: 10px; font-family: Arial, sans-serif; } /* 本地音乐图标 - 紫色 */ .island-source-icon.source-local { background: linear-gradient(135deg, var(--primary), var(--secondary)); box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.3); } .island-source-icon.source-local::before { content: '♪'; font-size: 12px; } .dynamic-island-music.playing .island-source-icon { animation: musicPulse 1.2s ease-in-out infinite; } @keyframes musicPulse { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.15); opacity: 1; } } .dynamic-island-music .island-track-name { font-size: 11px; color: var(--text-secondary); max-width: 50px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .dynamic-island-music .island-badge { background: #ff3b30; color: white; font-size: 10px; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; font-weight: 600; } /* 音乐加载失败状态：红色描边 + 轻微抖动提示 */ .dynamic-island-music.music-error { border-color: #ff3b30; animation: islandShake 0.4s ease; } .dynamic-island-music.music-error .island-source-icon { background: linear-gradient(135deg, #ff3b30, #ff6b6b); animation: none; } .dynamic-island-music.music-error .island-track-name { color: #ff3b30; font-weight: 600; } @keyframes islandShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 50% { transform: translateX(2px); } 75% { transform: translateX(-1px); } } /* 向下展开面板 - 独立元素放在 body 末尾，彻底脱离 header 层叠上下文 */ .island-expanded-overlay { display: none; position: fixed; transform: translateX(-50%); width: 320px; background: var(--bg-surface, #fff); border-radius: 16px; padding: 14px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15); border: 1px solid var(--neutral-200, #e5e7eb); z-index: 999999 !important; transform-origin: top center; will-change: opacity, transform; } /* 小三角指示 */ .island-expanded-overlay::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px; background: var(--bg-surface, #fff); border-left: 1px solid var(--neutral-200, #e5e7eb); border-top: 1px solid var(--neutral-200, #e5e7eb); } .island-expanded-overlay.show { display: block; animation: islandDropDown 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); } .island-expanded-overlay.collapsing { display: block; animation: islandPullUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .island-expanded-content { display: flex; align-items: center; gap: 12px; } .island-expanded-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } /* 展开状态来源图标 */ .island-expanded-source-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; font-weight: 700; color: #fff; } .island-expanded-source-icon.source-netease { background: linear-gradient(135deg, #ff2d55, #ff6b6b); box-shadow: 0 4px 12px rgba(255, 45, 85, 0.3); } .island-expanded-source-icon.source-netease::before { content: '网易云'; font-size: 10px; font-weight: 600; } .island-expanded-source-icon.source-qq { background: linear-gradient(135deg, #31c27c, #12b886); box-shadow: 0 4px 12px rgba(49, 194, 124, 0.3); } .island-expanded-source-icon.source-qq::before { content: 'QQ'; font-size: 12px; font-family: Arial, sans-serif; font-weight: 700; } .island-expanded-source-icon.source-local { background: linear-gradient(135deg, var(--primary), var(--secondary)); box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3); } .island-expanded-source-icon.source-local::before { content: '本地'; font-size: 11px; font-weight: 600; } .dynamic-island-music.playing .island-expanded-source-icon { animation: musicPulse 1.2s ease-in-out infinite; } .island-track-info { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 2px; } .island-expanded-name { font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .island-expanded-status { font-size: 12px; color: var(--text-tertiary); } .island-controls { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .island-btn { width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--neutral-100); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; transition: all 0.2s ease; } .island-btn:hover { background: var(--neutral-200); color: var(--text); transform: scale(1.08); } .island-btn:active { transform: scale(0.95); } .island-play-btn { width: 40px; height: 40px; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; font-size: 14px; box-shadow: 0 3px 10px rgba(var(--primary-rgb), 0.35); } .island-play-btn:hover { background: linear-gradient(135deg, var(--primary), var(--secondary)); box-shadow: 0 5px 16px rgba(var(--primary-rgb), 0.45); color: #fff; } @keyframes islandDropDown { 0% { opacity: 0; transform: translateX(-50%) translateY(-30px) scale(0.3); } 60% { opacity: 1; transform: translateX(-50%) translateY(4px) scale(1.04); } 100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } } @keyframes islandPullUp { 0% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } 100% { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(0.3); } } /* 胶囊按钮点击反馈 */ @keyframes islandCapsulePulse { 0% { transform: scale(1); } 40% { transform: scale(0.88); } 100% { transform: scale(1); } } .dynamic-island-music.island-pulse { animation: islandCapsulePulse 0.3s ease-out; } /* 响应式适配 */ @media (max-width: 480px) { .island-expanded-overlay { width: 280px; padding: 12px; } .island-expanded-name { font-size: 13px; } .island-btn { width: 30px; height: 30px; font-size: 10px; } .island-play-btn { width: 36px; height: 36px; font-size: 12px; } .island-expanded-source-icon { width: 36px; height: 36px; } .dynamic-island-music { max-width: 120px; padding: 0 8px; } .dynamic-island-music .island-track-name { max-width: 52px; } } @media (max-width: 360px) { .dynamic-island-music .island-track-name { max-width: 20px; } .dynamic-island-music { max-width: 68px; } } /* ---------- 弹窗 / 遮罩 ---------- */ .publish-modal, .comment-modal, .report-modal, .media-modal, .ban-modal, .appeal-modal { background: rgba(0, 0, 0, .45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .modal-content, .ban-content { background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: 0 12px 48px rgb(20 16 50 / .25); } .modal-close { background: var(--bg-close-btn); color: var(--text-secondary); border-radius: var(--radius-full); transition: background var(--duration-base) var(--ease-out); } .modal-close:hover { background: var(--bg-close-btn-hover); } /* ---------- 发布抽屉 ---------- */ .publish-sheet { background: var(--bg-surface); } .sheet-section { border-bottom: 1px solid var(--neutral-100); } html:root[data-mode="dark"] .sheet-section { border-bottom-color: var(--neutral-200); } @media (prefers-color-scheme: dark) { html:root:not([data-mode="light"]) .sheet-section { border-bottom-color: var(--neutral-200); } } .sheet-title { color: var(--text); font-weight: 700; } .section-title-bar { color: var(--text-secondary); font-weight: 600; } /* ---------- 文本域 / 字数统计 ---------- */ .char-count { color: var(--text-tertiary); font-size: 12px; } .char-count.warning { color: #F59E0B; } .char-count.danger { color: #EF4444; } /* ---------- 话题选择 ---------- */ .topic-tags { gap: var(--space-2); } .topic-tag { background: var(--neutral-100); color: var(--text-secondary); border-radius: var(--radius-full); font-weight: 500; transition: all var(--duration-fast) var(--ease-out); } .topic-tag:hover { background: var(--neutral-200); } .topic-tag.selected { background: rgba(var(--primary-rgb), .1); color: var(--primary); font-weight: 600; } /* ---------- 上传预览 ---------- */ .upload-preview-item { border-radius: var(--radius-sm); background: var(--neutral-100); } .upload-remove-btn { background: rgba(0, 0, 0, .5); color: #fff; border-radius: var(--radius-full); } /* ---------- 匿名开关 ---------- */ .anonymous-toggle label { color: var(--text-secondary); } /* ---------- 提交按钮 ---------- */ .submit-btn { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; border: none; border-radius: var(--radius-md); font-weight: 600; box-shadow: 0 2px 8px rgba(var(--primary-rgb), .3); transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); } .submit-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(var(--primary-rgb), .38); } .submit-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; } /* ---------- 公告栏 ---------- */ .announcement-bar { background: rgba(var(--primary-rgb), .06); border: 1px solid rgba(var(--primary-rgb), .12); border-radius: var(--radius-md); color: var(--text-secondary); } .announcement-bar i { color: var(--primary); } /* ---------- 加载更多 ---------- */ .load-more-btn { background: var(--bg-surface); border: 1px solid var(--neutral-200); border-radius: var(--radius-md); color: var(--text-secondary); font-weight: 500; transition: all var(--duration-base) var(--ease-out); } .load-more-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(var(--primary-rgb), .04); } /* ---------- 回到顶部 ---------- */ .back-to-top { background: var(--bg-surface); border: 1px solid var(--neutral-200); border-radius: 50%; color: var(--text-secondary); box-shadow: var(--card-shadow); transition: all var(--duration-base) var(--ease-out); } .back-to-top:hover { color: var(--primary); border-color: var(--primary); transform: translateY(-2px); } /* ---------- VIP / 管理员 / 广告 徽章 ---------- */ .vip-badge { background: linear-gradient(135deg, #FFD700, #FFA500); color: #fff; } .admin-badge { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; } .ad-badge { background: var(--neutral-100); color: var(--text-tertiary); } /* ---------- 分页 ---------- */ .pagination { gap: var(--space-2); } .page-btn { background: var(--bg-surface); border: 1px solid var(--neutral-200); border-radius: var(--radius-sm); color: var(--text-secondary); transition: all var(--duration-fast) var(--ease-out); } .page-btn:hover { border-color: var(--primary); color: var(--primary); } .page-btn.active { background: linear-gradient(135deg, var(--primary), var(--secondary)); border-color: transparent; color: #fff; } /* ---------- 设置卡片 / 设置面板 ---------- */ .setting-card, .settings-panel { background: var(--card-bg); border: var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); } .setting-item { border-bottom: 1px solid var(--neutral-100); color: var(--text); } .setting-item:last-child { border-bottom: none; } html:root[data-mode="dark"] .setting-item { border-bottom-color: var(--neutral-200); } @media (prefers-color-scheme: dark) { html:root:not([data-mode="light"]) .setting-item { border-bottom-color: var(--neutral-200); } } .setting-item .setting-label { color: var(--text); font-weight: 500; } .setting-item .setting-desc { color: var(--text-tertiary); font-size: 12px; } /* ---------- 开关按钮 ---------- */ .switch { background: var(--neutral-300); border-radius: var(--radius-full); transition: background var(--duration-base) var(--ease-out); } .switch.active { background: var(--primary); } .switch::after { background: #fff; border-radius: 50%; transition: transform var(--duration-base) var(--ease-out); } /* ---------- 选择下拉 ---------- */ select, .select-control { background: var(--neutral-100); border: 1px solid transparent; border-radius: var(--radius-md); color: var(--text); } select:focus, .select-control:focus { background: var(--bg-surface); border-color: rgba(var(--primary-rgb), .5); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12); outline: none; } /* ---------- 验证码输入 ---------- */ .captcha-input { background: var(--neutral-100); border: 1px solid transparent; border-radius: var(--radius-md); color: var(--text); } .captcha-input:focus { background: var(--bg-surface); border-color: rgba(var(--primary-rgb), .5); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12); outline: none; } .captcha-img { border-radius: var(--radius-md); border: 1px solid var(--neutral-200); } /* ---------- 申诉弹窗 ---------- */ .appeal-content { background: var(--bg-surface); } .appeal-title { color: var(--text); font-weight: 700; } .appeal-text { color: var(--text-secondary); } .appeal-close { background: var(--bg-close-btn); color: var(--text-secondary); border-radius: var(--radius-full); } .appeal-close:hover { background: var(--bg-close-btn-hover); } /* ---------- 封禁弹窗 ---------- */ .ban-content { background: var(--bg-surface); } .ban-title { color: #EF4444; font-weight: 700; } .ban-reason { color: var(--text-secondary); } .ban-time { color: var(--text-tertiary); font-size: 12px; } /* ---------- 地域选择 ---------- */ .region-selector { background: var(--card-bg); border: var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); } .region-tabs { border-bottom: 1px solid var(--neutral-100); } html:root[data-mode="dark"] .region-tabs { border-bottom-color: var(--neutral-200); } @media (prefers-color-scheme: dark) { html:root:not([data-mode="light"]) .region-tabs { border-bottom-color: var(--neutral-200); } } .region-tab { color: var(--text-secondary); font-weight: 500; border-bottom: 2px solid transparent; transition: all var(--duration-base) var(--ease-out); } .region-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; } .region-item { color: var(--text); border-radius: var(--radius-sm); transition: background var(--duration-fast) var(--ease-out); } .region-item:hover { background: rgba(var(--primary-rgb), .06); } .region-item.selected { background: rgba(var(--primary-rgb), .1); color: var(--primary); font-weight: 600; } /* ========================================================================== 论坛页面变量映射（forum.css → 主题变量） ========================================================================== */ html:root { --forum-primary: var(--primary); --forum-secondary: var(--secondary); --forum-bg: var(--bg); --forum-text: var(--text); --forum-card-bg: var(--card-bg); --forum-card-shadow: var(--card-shadow); --forum-radius: var(--radius); --forum-radius-sm: var(--radius-sm); } /* 论坛页背景跟随主题 */ html body.forum-page { background: var(--bg); color: var(--text); padding-bottom: calc(58px + var(--space-4) * 2 + env(safe-area-inset-bottom, 0px)); } /* 论坛头部毛玻璃 */ html body.forum-page .forum-header { background: rgb(255 255 255 / .86); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--neutral-100); box-shadow: 0 1px 2px rgb(20 16 50 / .03); } html:root[data-mode="dark"] body.forum-page .forum-header { background: rgb(25 25 39 / .86); border-bottom-color: var(--neutral-200); } @media (prefers-color-scheme: dark) { html:root:not([data-mode="light"]) body.forum-page .forum-header { background: rgb(25 25 39 / .86); border-bottom-color: var(--neutral-200); } } /* 论坛标题渐变跟随主题 */ .forum-title { background: linear-gradient(135deg, var(--primary), var(--secondary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* 论坛卡片 */ html body.forum-page .forum-card, html body.forum-page .chat-card, html body.forum-page .ci-card { background: var(--card-bg); border: var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); } /* 论坛输入框 */ html body.forum-page .chat-input-area, html body.forum-page .forum-input { background: var(--neutral-100); border: 1px solid transparent; border-radius: var(--radius-md); color: var(--text); } html body.forum-page .chat-input-area:focus, html body.forum-page .forum-input:focus { background: var(--bg-surface); border-color: rgba(var(--primary-rgb), .5); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12); outline: none; } /* 论坛发送按钮 */ html body.forum-page .send-btn { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; border: none; border-radius: var(--radius-full); font-weight: 600; } /* ========================================================================== 表白法庭变量映射（court.php → 主题变量） ========================================================================== */ html:root { --green: var(--primary); --red: var(--heart-color); --blue: var(--secondary); } /* 法庭页背景跟随主题 */ html body.court-page { background: var(--bg); color: var(--text); padding-bottom: calc(58px + var(--space-4) * 2 + env(safe-area-inset-bottom, 0px)); } /* 法庭卡片 */ .court-card, .vs-card, .vote-card { background: var(--card-bg); border: var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); } /* VS 对决条 */ .vs-bar { border-radius: var(--radius-full); background: var(--neutral-100); } .vs-bar .vs-left { background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: var(--radius-full); } .vs-bar .vs-right { background: var(--heart-color); border-radius: var(--radius-full); } /* 投票按钮 */ .vote-btn { border-radius: var(--radius-md); font-weight: 600; transition: all var(--duration-base) var(--ease-out); } .vote-btn.support { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; border: none; } .vote-btn.oppose { background: var(--heart-color); color: #fff; border: none; } /* ========================================================================== 个人中心页面跟随主题 ========================================================================== */ html body.profile-page { background: var(--bg); color: var(--text); padding-bottom: calc(58px + var(--space-4) * 2 + env(safe-area-inset-bottom, 0px)); } /* 个人中心头部 */ .profile-header { background: rgb(255 255 255 / .86) !important; backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--neutral-100); box-shadow: 0 1px 2px rgb(20 16 50 / .03); } html:root[data-mode="dark"] .profile-header { background: rgb(25 25 39 / .86) !important; border-bottom-color: var(--neutral-200); } @media (prefers-color-scheme: dark) { html:root:not([data-mode="light"]) .profile-header { background: rgb(25 25 39 / .86) !important; border-bottom-color: var(--neutral-200); } } /* 个人中心卡片 */ .user-card, .profile-card, .stats-card { background: var(--card-bg) !important; border: var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); backdrop-filter: none; -webkit-backdrop-filter: none; } /* QQ号 + VIP入口徽章 同一行 */ .user-qq-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .user-qq-row .user-qq { margin: 0; } .vip-entry-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 12px; background: linear-gradient(135deg, #ff9800, #f57c00); color: #fff; font-size: 12px; font-weight: 600; border-radius: 20px; line-height: 1.6; box-shadow: 0 2px 8px rgba(255, 152, 0, 0.35); letter-spacing: 0.3px; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; user-select: none; } .vip-entry-badge:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255, 152, 0, 0.45); } .vip-entry-badge:active { transform: translateY(0); } .vip-entry-badge i { font-size: 11px; } /* 【v1.13.5】未开通 VIP 时的「充值VIP」入口：灰色渐变，与已开通的橙色区分 */ .vip-entry-badge.vip-not-vip { background: linear-gradient(135deg, #b0bec5, #78909c); box-shadow: 0 2px 8px rgba(120, 144, 156, 0.35); } .vip-entry-badge.vip-not-vip:hover { box-shadow: 0 4px 12px rgba(120, 144, 156, 0.45); } /* ========================================================================== VIP 弹窗 ========================================================================== */ .vip-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2100; display: flex; align-items: center; justify-content: center; animation: vipModalFadeIn 0.25s ease; } .vip-modal-mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .vip-modal-content { position: relative; background: linear-gradient(180deg, #fff8e1 0%, #fff 35%); border-radius: 20px; max-width: 360px; width: 88%; max-height: 82vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); animation: vipModalPopIn 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2); } .vip-modal-close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: none; background: rgba(0, 0, 0, 0.06); color: #666; border-radius: 50%; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; z-index: 2; } .vip-modal-close:hover { background: rgba(0, 0, 0, 0.12); color: #333; } .vip-modal-body { padding: 24px 20px 20px; } /* VIP 购买弹窗 */ .vip-buy-content { background: var(--card-bg, #fff); } .vip-plans-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; } .vip-plan-card { padding: 14px 10px; border: 2px solid var(--line, #e8e8e8); border-radius: 12px; text-align: center; cursor: pointer; transition: all 0.2s ease; background: var(--bg-surface, #fafafa); } .vip-plan-card:hover { border-color: #ffc078; background: #fff8e1; transform: translateY(-2px); } .vip-plan-card.selected { border-color: #ff8f00; background: #fff3e0; box-shadow: 0 4px 12px rgba(255, 143, 0, 0.2); } .vip-plan-name { font-size: 15px; font-weight: 700; color: #ff8f00; margin-bottom: 4px; } .vip-plan-price { font-size: 24px; font-weight: 700; color: #333; line-height: 1.2; } .vip-plan-desc { font-size: 11px; color: #999; margin-top: 2px; } .vip-pay-btn { width: 100%; padding: 13px; font-size: 16px; font-weight: 600; color: #fff; background: linear-gradient(135deg, #ff9800, #f57c00); border: none; border-radius: 25px; cursor: pointer; box-shadow: 0 4px 14px rgba(255, 152, 0, 0.35); transition: all 0.2s; } .vip-pay-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255, 152, 0, 0.45); } .vip-pay-btn:active { transform: translateY(0); } @keyframes vipModalFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes vipModalPopIn { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* 通知未读角标 */ .tab-item { position: relative; } .notification-badge { position: absolute !important; top: 6px; right: calc(50% - 32px); min-width: 18px; height: 18px; padding: 0 5px; background: #ef4444 !important; color: #fff !important; font-size: 11px !important; font-weight: 700; line-height: 18px; text-align: center; border-radius: 9px; box-shadow: 0 2px 6px rgba(239, 68, 68, 0.5); margin-left: 0 !important; z-index: 2; animation: badgePop 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.4); } @keyframes badgePop { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } } /* 个人中心按钮 */ .profile-btn, .action-card { background: var(--card-bg); border: var(--card-border); border-radius: var(--radius-md); color: var(--text); transition: all var(--duration-base) var(--ease-out); } .profile-btn:hover, .action-card:hover { border-color: var(--primary); box-shadow: var(--card-shadow-hover); transform: translateY(-1px); } /* 登出按钮 */ .logout-btn { background: linear-gradient(135deg, #EF4444, #DC2626) !important; color: #fff; border: none; border-radius: var(--radius-md); font-weight: 600; box-shadow: 0 2px 8px rgba(239, 68, 68, .3); } /* ========================================================================== 签到页面跟随主题 ========================================================================== */ html body.checkin-page { background: var(--bg); color: var(--text); padding-bottom: calc(58px + var(--space-4) * 2 + env(safe-area-inset-bottom, 0px)); } .checkin-hero, .calendar-card, .rank-card, .stats-card { background: var(--card-bg); border: var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); } /* 签到按钮 */ .checkin-btn { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; border: none; border-radius: var(--radius-full); font-weight: 600; box-shadow: 0 4px 16px rgba(var(--primary-rgb), .35); } .checkin-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(var(--primary-rgb), .42); } .checkin-btn.checked { background: var(--neutral-200); color: var(--text-tertiary); box-shadow: none; cursor: not-allowed; } /* 日历 */ .calendar-grid { gap: var(--space-1); } .calendar-day { border-radius: var(--radius-sm); color: var(--text-secondary); transition: all var(--duration-fast) var(--ease-out); } .calendar-day.checked { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; font-weight: 600; } .calendar-day.today { border: 2px solid var(--primary); font-weight: 600; } /* 排行榜 */ .rank-item { border-bottom: 1px solid var(--neutral-100); } .rank-item:last-child { border-bottom: none; } html:root[data-mode="dark"] .rank-item { border-bottom-color: var(--neutral-200); } @media (prefers-color-scheme: dark) { html:root:not([data-mode="light"]) .rank-item { border-bottom-color: var(--neutral-200); } } .rank-top-1 .rank-num { color: #FFD700; } .rank-top-2 .rank-num { color: #C0C0C0; } .rank-top-3 .rank-num { color: #CD7F32; } /* ========================================================================== 详情页跟随主题 ========================================================================== */ .detail-card, .comment-card, .reply-card { background: var(--card-bg); border: var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); } .comment-input-bar { background: var(--bg-surface); border-top: 1px solid var(--neutral-100); } html:root[data-mode="dark"] .comment-input-bar { border-top-color: var(--neutral-200); } @media (prefers-color-scheme: dark) { html:root:not([data-mode="light"]) .comment-input-bar { border-top-color: var(--neutral-200); } } /* ========================================================================== 关于页面跟随主题 ========================================================================== */ .about-card, .feature-grid .feature-item, .tech-info { background: var(--card-bg); border: var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); } .feature-icon { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; border-radius: var(--radius-md); } /* ========================================================================== 深色模式下各页面背景修正 ========================================================================== */ html:root[data-mode="dark"] body.forum-page { background: var(--bg); color: var(--text); } html:root[data-mode="dark"] body.court-page { background: var(--bg); color: var(--text); } html:root[data-mode="dark"] body.profile-page { background: var(--bg); color: var(--text); } html:root[data-mode="dark"] body.checkin-page { background: var(--bg); color: var(--text); } @media (prefers-color-scheme: dark) { html:root:not([data-mode="light"]) body.forum-page { background: var(--bg); color: var(--text); } html:root:not([data-mode="light"]) body.court-page { background: var(--bg); color: var(--text); } html:root:not([data-mode="light"]) body.profile-page { background: var(--bg); color: var(--text); } html:root:not([data-mode="light"]) body.checkin-page { background: var(--bg); color: var(--text); } } /* ========================================================================== Toast 提示（所有页面共用） ========================================================================== */ .toast-container { position: fixed; top: 80px; left: 50%; transform: translateX(-50%); z-index: 99999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; max-width: 90vw; } .toast-item { display: flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px; background: rgba(30, 30, 45, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; border-radius: var(--radius-md); font-size: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); animation: toastIn 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2); pointer-events: auto; max-width: 320px; border: 1px solid rgba(255, 255, 255, 0.08); } .toast-item.hide { animation: toastOut 0.3s ease forwards; } .toast-item i { font-size: 18px; flex-shrink: 0; } .toast-item.toast-info i { color: var(--primary); } .toast-item.toast-success i { color: #4caf50; } .toast-item.toast-warning i { color: #ff9800; } .toast-item.toast-error i { color: #ef5350; } .toast-item.toast-music i { color: #ffa726; } .toast-item .toast-text { line-height: 1.4; word-break: break-word; } @keyframes toastIn { from { opacity: 0; transform: translateY(-12px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes toastOut { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-8px) scale(0.96); } }