/* ========== MoonTV PHP - 纯黑主题 (对齐 Node.js 版 UI) ========== */ :root { --bg-primary: #0a0a0a; --bg-header: #111111; --bg-card: #161616; --bg-card-hover: #1f1f1f; --bg-input: #1e1e1e; --border-color: #262626; --border-hover: #3a3a3a; --text-primary: #e5e5e5; --text-secondary: #888888; --text-muted: #555555; --accent: #3b82f6; --accent-blue: #3b82f6; --accent-hover: #2563eb; --accent-light: rgba(59, 130, 246, 0.15); --accent-border: rgba(59, 130, 246, 0.3); --rating-red: #e53e3e; --rating-orange: #dd6b20; --new-tag: #3b82f6; --imax-tag: #8b5cf6; --danger: #ef4444; --success: #22c55e; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --transition: 0.2s ease; --header-height: 56px; } /* ========== 白天主题 (通过 全局切换) ========== */ :root[data-theme="light"] { --bg-primary: #f4f5f7; --bg-header: #ffffff; --bg-card: #ffffff; --bg-card-hover: #eef0f3; --bg-input: #f0f1f3; --border-color: #e2e4e8; --border-hover: #c6cad1; --text-primary: #1c1c1e; --text-secondary: #6b7280; --text-muted: #9aa0a8; --accent: #3b82f6; --accent-blue: #3b82f6; --accent-hover: #2563eb; --accent-light: rgba(59, 130, 246, 0.12); --accent-border: rgba(59, 130, 246, 0.35); --rating-red: #e53e3e; --rating-orange: #dd6b20; --new-tag: #3b82f6; --imax-tag: #8b5cf6; --danger: #ef4444; --success: #16a34a; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --transition: 0.2s ease; --header-height: 56px; } /* 主题切换过渡 */ body, .top-header, .main-content, .site-footer { transition: background-color var(--transition), color var(--transition); } /* ========== 白天/黑夜切换按钮 ========== */ .theme-toggle { width: 34px; height: 34px; flex-shrink: 0; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-secondary); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition); } .theme-toggle:hover { border-color: var(--border-hover); color: var(--text-primary); } .theme-toggle:active { transform: scale(0.94); } .theme-toggle svg { width: 17px; height: 17px; } .theme-toggle .theme-icon-moon { display: none; } .theme-toggle.is-light .theme-icon-sun { display: none; } .theme-toggle.is-light .theme-icon-moon { display: block; } * { margin: 0; padding: 0; box-sizing: border-box; } /* html 也铺深色背景: 否则 Android WebView 滚动到页面边界时, overscroll 区域露出 html 默认的白色 → 底部白边 */ html { background: var(--bg-primary); } body { background: var(--bg-primary); color: var(--text-primary); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; line-height: 1.6; min-height: 100vh; overscroll-behavior-y: none; /* 对齐 Node 版: 阻止滚动链/回弹, 深色页面滚动到边界不露白 */ } a { color: var(--accent); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--accent-hover); } /* ========== 顶部导航栏 ========== */ .top-header { position: sticky; top: 0; z-index: 100; background: var(--bg-header); border-bottom: 1px solid var(--border-color); height: var(--header-height); } .top-header-inner { max-width: 1400px; margin: 0 auto; padding: 0 24px; height: 100%; display: flex; align-items: center; justify-content: space-between; } .header-left { display: flex; align-items: center; gap: 32px; } .header-logo { font-size: 18px; font-weight: 700; color: var(--text-primary); } /* App 版本号 (左上角名称右侧, 颜色与主题切换按钮一致, 跟随黑白主题) */ .header-ver { font-size: 11px; font-weight: 400; color: var(--text-secondary); margin-left: -18px; /* 桌面 header-left gap 32px, 抵消后约 14px 间距 */ align-self: center; white-space: nowrap; line-height: 1; } @media (max-width: 768px) { .header-ver { margin-left: 0; /* 手机端 header-left gap 6px, 不再负偏移, 避免与名称重叠 */ } } .header-nav { display: flex; align-items: center; gap: 4px; } .header-nav .nav-link { padding: 8px 16px; color: var(--text-secondary); border-radius: var(--radius-md); font-size: 14px; transition: all var(--transition); } .header-nav .nav-link:hover { background: var(--bg-card); color: var(--text-primary); } .header-nav .nav-link.active { background: var(--accent-light); color: var(--accent); } .header-right { display: flex; align-items: center; gap: 8px; } .nav-auth { display: flex; align-items: center; gap: 16px; } .nav-auth .nav-link { color: var(--text-secondary); font-size: 14px; } .nav-auth .nav-link:hover { color: var(--accent); } /* 用户下拉菜单 */ .user-menu { position: relative; display: inline-flex; } .user-menu-toggle { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: none; border: none; cursor: pointer; color: var(--text-secondary); font-size: 14px; font-family: inherit; border-radius: var(--radius-md); transition: all var(--transition); } .user-menu-toggle:hover { color: var(--accent); background: var(--bg-card); } .user-menu-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-menu-arrow { font-size: 11px; transition: transform var(--transition); } .user-menu.open .user-menu-arrow { transform: rotate(180deg); } .user-menu-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 170px; padding: 6px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); z-index: 200; } .user-menu.open .user-menu-dropdown { display: block; } .user-menu-item { display: block; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 14px; white-space: nowrap; transition: all var(--transition); } .user-menu-item:hover { background: var(--accent-light); color: var(--accent); } .user-menu-divider { height: 1px; margin: 6px 4px; background: var(--border-color); } .user-menu-groups { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; font-size: 13px; cursor: default; } .user-menu-groups-label { color: var(--text-muted); white-space: nowrap; } .user-menu-groups-value { color: var(--accent); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-menu-logout:hover { color: var(--danger); background: rgba(239, 68, 68, 0.1); } /* ========== 主内容区 ========== */ .main-content { max-width: 1400px; margin: 0 auto; padding: 24px; min-height: calc(100vh - var(--header-height)); } /* 播放页专用: 全宽铺开 (对齐 Node PageLayout flex-1 全宽) */ .main-content-wide { max-width: none; padding: 16px 20px; } /* ========== 页脚 ========== */ .site-footer { border-top: 1px solid var(--border-color); padding: 20px 24px 28px; display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted, #777); } .site-footer a { color: var(--text-muted, #777); text-decoration: none; transition: color 0.2s; } .site-footer a:hover { color: var(--accent-blue, #3b82f6); } /* ========== 搜索栏 ========== */ .search-bar { display: flex; gap: 8px; max-width: 500px; margin: 0 auto; } .search-input { flex: 1; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 10px 16px; color: var(--text-primary); font-size: 14px; outline: none; transition: border-color var(--transition); } .search-input:focus { border-color: var(--accent); } .search-input::placeholder { color: var(--text-muted); } /* ========== 按钮 ========== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-primary); font-size: 13px; cursor: pointer; transition: all var(--transition); white-space: nowrap; } .btn:hover { background: var(--bg-card-hover); border-color: var(--border-hover); } .btn:active { transform: scale(0.97); } .btn-primary { background: var(--accent); border-color: var(--accent); color: white; } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn-danger { background: var(--danger); border-color: var(--danger); color: white; } .btn-danger:hover { opacity: 0.85; } .btn:disabled, .btn.disabled { background: var(--bg-card); color: var(--text-muted); cursor: not-allowed; opacity: 0.5; pointer-events: none; } .btn-sm { padding: 4px 10px; font-size: 12px; } .btn-lg { padding: 12px 24px; font-size: 15px; } /* ========== 横向滚动区域 ========== */ .scroll-section { margin-bottom: 32px; } .scroll-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .scroll-title { font-size: 18px; font-weight: 600; color: var(--text-primary); } .scroll-more { font-size: 13px; color: var(--accent); cursor: pointer; } /* 标题行左侧区 (标题 + 紧挨的切换按钮, 如 "播放记录 收藏夹") */ .scroll-header-left { display: flex; align-items: center; gap: 12px; } .scroll-container { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; } .scroll-container .card { flex: 0 0 160px; scroll-snap-align: start; } /* ========== 卡片网格布局 ========== */ .grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; padding: 0 16px; } .grid .card { width: 100%; } @media (max-width: 640px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 12px; } .grid .card { width: 100%; min-width: 0; } } /* ========== 卡片 ========== */ .card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; cursor: pointer; transition: all var(--transition); } .card:hover { border-color: var(--accent-border); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); } /* ===== 禁止微信/Safari 原生长按菜单 (对齐 Node.js VideoCard: 长按直接弹自定菜单, 不先弹微信菜单) ===== */ .card { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } /* 海报图片不响应指针事件 (对齐 Node.js), 长按/点击统一由卡片处理, 避免微信识别图片先弹"识别二维码/保存图片" */ .card .card-poster-wrapper img { -webkit-touch-callout: none; pointer-events: none; } .card-poster { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-input); object-fit: cover; display: block; } /* 统一图片代理模板样式 - 所有页面共用 */ .card-poster-wrapper { position: relative; width: 100%; /* 2:3 宽高比 padding-hack：兼容不支持 aspect-ratio 的旧 WebView（机顶盒） */ height: 0; padding-top: 150%; overflow: hidden; border-radius: 8px; background: linear-gradient(135deg, #1a1a2e, #16213e); } .card-poster.loaded { opacity: 1; } .card-poster:not(.loaded) { background: linear-gradient(90deg, rgba(26,26,46,1) 0%, rgba(40,40,60,1) 50%, rgba(26,26,46,1) 100%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } .card-fallback { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-muted, #888); font-size: 28px; font-weight: 600; background: linear-gradient(135deg, #1a1a2e, #16213e); } /* 播放记录卡片的集数角标（右上角，如 1/9，与Node.js一致） */ .card-ep-badge { position: absolute; top: 8px; right: 6px; z-index: 5; padding: 4px 12px; border-radius: 6px; background: rgba(0, 0, 0, 0.78); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.4; letter-spacing: 0.5px; pointer-events: none; } /* 角标固定靠右显示，hover 不再移动（删除按钮让位动画已移除） */ /* 骨架屏动画 */ @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* 骨架屏卡片 */ .skeleton-card { background: transparent; } .skeleton-poster { position: relative; width: 100%; /* 2:3 宽高比 padding-hack：兼容不支持 aspect-ratio 的旧 WebView（机顶盒） */ height: 0; padding-top: 150%; border-radius: 8px; background: linear-gradient(90deg, rgba(26,26,46,1) 0%, rgba(40,40,60,1) 50%, rgba(26,26,46,1) 100%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } .skeleton-title { height: 14px; margin-top: 10px; border-radius: 4px; background: linear-gradient(90deg, rgba(26,26,46,1) 0%, rgba(40,40,60,1) 50%, rgba(26,26,46,1) 100%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } .skeleton-meta { height: 12px; width: 60px; margin-top: 6px; border-radius: 4px; background: linear-gradient(90deg, rgba(26,26,46,1) 0%, rgba(40,40,60,1) 50%, rgba(26,26,46,1) 100%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } .card-body { padding: 8px 4px 10px; } .card-title { font-size: 14px; font-weight: 500; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; text-align: center; } /* ===== 左上角：年份长条（红底白字） ===== */ .card-year-badge { position: absolute; top: 8px; left: 8px; background: #ef4444; color: #ffffff; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 4px; letter-spacing: 0.5px; line-height: 1.4; z-index: 2; box-shadow: 0 2px 6px rgba(0,0,0,0.45); pointer-events: none; } /* ===== 右上角：评分圆圈（红底白字） ===== */ .card-rate-badge { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; background: #ef4444; color: #ffffff; font-size: 12px; font-weight: 700; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1; z-index: 2; box-shadow: 0 2px 8px rgba(0,0,0,0.5); pointer-events: none; } /* 卡片角标 */ .card-badges { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: 8px; pointer-events: none; } .badge { display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 600; line-height: 1.3; } .badge-rating { background: var(--rating-red); color: white; } .badge-new { background: var(--new-tag); color: white; } .badge-progress { background: rgba(0, 0, 0, 0.7); color: white; } .badge-source { background: rgba(59, 130, 246, 0.85); color: white; } .card-source { background: var(--accent-light); color: var(--accent); padding: 1px 6px; border-radius: var(--radius-sm); font-size: 10px; } /* ===== 搜索卡片: 来源角标 (海报左下角) ===== */ .card-source-badge { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); background: rgba(59, 130, 246, 0.9); color: #fff; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 4px; line-height: 1.4; z-index: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; } /* ========== 播放器 ========== */ .player-page { display: flex; gap: 20px; align-items: flex-start; } .player-main { flex: 1; min-width: 0; } .player-sidebar { width: 320px; flex-shrink: 0; position: sticky; top: 90px; overflow: hidden; } .video-player { width: 100%; aspect-ratio: 16/9; background: #000; border-radius: var(--radius-md); overflow: hidden; } .episode-list { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 12px; max-height: 500px; overflow-y: auto; } .episode-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .episode-btn { padding: 6px 8px; min-height: 32px; min-width: 60px; max-width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 12px; line-height: 1.3; cursor: pointer; text-align: center; transition: all var(--transition); white-space: normal; word-break: break-all; overflow-wrap: break-word; flex-shrink: 1; flex-grow: 0; } .episode-btn:hover { border-color: var(--accent); color: var(--text-primary); } .episode-btn.active { background: var(--accent); border-color: var(--accent); color: white; } .source-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; } .source-tab { padding: 5px 14px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 12px; cursor: pointer; transition: all var(--transition); } .source-tab:hover { border-color: var(--accent); } .source-tab.active { background: var(--accent-light); border-color: var(--accent); color: var(--accent); } /* ========== 播放页 (对齐 Node.js) ========== */ .play-screen { display: flex; align-items: center; justify-content: center; min-height: 70vh; } .play-loading-box, .play-error-box { text-align: center; max-width: 440px; padding: 0 24px; } .play-logo-wrap { position: relative; width: 96px; height: 96px; margin: 0 auto 32px; } .play-logo { position: relative; z-index: 2; width: 96px; height: 96px; border-radius: 16px; background: linear-gradient(135deg, var(--accent, #22c55e), #059669); color: #fff; font-size: 40px; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(34, 197, 94, 0.35); } .play-halo { position: absolute; inset: -8px; border-radius: 16px; background: linear-gradient(135deg, var(--accent, #22c55e), #059669); opacity: 0.2; animation: play-spin 1.2s linear infinite; } .play-logo-wrap.error .play-logo { background: linear-gradient(135deg, #ef4444, #f97316); } .play-logo-wrap.error .play-halo { background: linear-gradient(135deg, #ef4444, #f97316); animation: play-pulse 1.5s ease-in-out infinite; } .play-logo-wrap.small { width: 64px; height: 64px; margin: 0 auto 20px; } .play-logo.small { width: 64px; height: 64px; border-radius: 12px; font-size: 26px; } .play-halo.small { inset: -6px; } .play-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 24px; } .play-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent, #22c55e); animation: play-bounce 1s ease-in-out infinite; } .play-dots span:nth-child(2) { animation-delay: 0.2s; } .play-dots span:nth-child(3) { animation-delay: 0.4s; } .play-progress { width: 280px; max-width: 80vw; height: 6px; margin: 0 auto 16px; background: var(--bg-input); border-radius: 999px; overflow: hidden; } #play-progress-bar { height: 100%; width: 33%; background: linear-gradient(90deg, var(--accent, #22c55e), #059669); border-radius: 999px; transition: width 1s ease; } .play-status { color: var(--text-secondary); font-size: 15px; margin: 0; } .play-error-box h2 { font-size: 22px; margin-bottom: 16px; } .play-error-msg { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #ef4444; padding: 14px; border-radius: 12px; font-size: 14px; margin-bottom: 12px; } .play-error-hint { color: var(--text-muted); font-size: 13px; margin-bottom: 20px; } .play-btn { display: inline-block; width: 100%; padding: 12px; margin-bottom: 10px; border: none; border-radius: 12px; font-size: 15px; font-weight: 500; background: var(--bg-input); color: var(--text-primary); cursor: pointer; transition: all 0.2s; } .play-btn:hover { background: var(--border-color); } .play-btn.primary { background: linear-gradient(135deg, var(--accent, #22c55e), #059669); color: #fff; } .play-btn.primary:hover { filter: brightness(1.1); } /* ===== 播放主界面 ===== */ .play-container { width: 100%; max-width: none; margin: 0 auto; padding: 8px 16px 40px; } .play-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; } .play-h1 { font-size: 20px; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .h1-ep { color: var(--text-muted); font-weight: 400; font-size: 18px; } .panel-toggle { display: none; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--border-color); border-radius: 999px; background: var(--bg-card); color: var(--text-secondary); font-size: 13px; cursor: pointer; transition: all 0.2s; flex-shrink: 0; } .panel-toggle:hover { color: var(--accent); border-color: var(--accent); } @media (min-width: 1024px) { .panel-toggle { display: flex; } } /* ========== 播放页布局 (对齐 Node: 全宽铺开, 播放器固定高度+宽度撑满, 右栏选集/换源) ========== */ .play-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; } /* PC 端: 播放器自适应宽度, 高度固定(接近视口比例, 参考 Node lg:h-[500px] xl:h-[650px] 2xl:h-[750px]); 右栏固定 360px; align-items:start 避免互相撑高，高度由 JS 精确同步 */ @media (min-width: 768px) { .play-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; } } .player-col { position: relative; min-width: 0; width: 100%; } /* 移动端保持 16:9 满宽; PC 端(>=768px)改固定高度、宽度撑满, 消除宽屏下内容集中/右侧留白 */ .artplayer-container { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; display: block; } @media (min-width: 768px) { .artplayer-container { aspect-ratio: auto; height: min(72vh, 720px); min-height: 380px; } } .panel-col { width: 100%; min-width: 0; } .panel-col > .play-panel { width: 100%; } .player-mask { position: absolute; inset: 0; z-index: 50; background: rgba(0, 0, 0, 0.85); border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .play-panel { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; /* 小屏兜底，避免当 Grid stretch 未生效时面板塌陷 */ min-height: 420px; } .panel-tabs { display: flex; border-bottom: 1px solid var(--border-color); flex-shrink: 0; } .panel-tab { flex: 1; text-align: center; padding: 12px 0; font-size: 14px; font-weight: 500; cursor: pointer; color: var(--text-secondary); transition: all 0.2s; } .panel-tab:hover { color: var(--accent); } .panel-tab.active { color: var(--accent); background: var(--accent-light); border-bottom: 2px solid var(--accent); } .panel-body { flex: 1; overflow-y: auto; overflow-x: clip; padding: 12px; min-height: 0; } .panel-empty { color: var(--text-muted); font-size: 13px; text-align: center; padding: 40px 0; } .ep-pagebar { display: flex; gap: 6px; overflow-x: auto; overflow-y: visible; padding: 0 2px 8px; margin: 0 -2px 10px; scrollbar-width: thin; scrollbar-color: var(--accent) transparent; } .ep-pagebar::-webkit-scrollbar { height: 5px; } .ep-pagebar::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; } .ep-page { flex-shrink: 0; padding: 4px 12px; font-size: 13px; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--text-secondary); cursor: pointer; transition: all 0.2s; white-space: nowrap; } .ep-page:hover { color: var(--accent); } .ep-page.active { color: var(--accent); border-bottom-color: var(--accent); } .episode-grid2 { display: flex; flex-wrap: wrap; gap: 6px; } .ep-btn2 { min-width: 60px; max-width: 100%; min-height: 36px; padding: 6px 8px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-align: center; font-size: 12px; line-height: 1.3; font-weight: 500; font-family: inherit; border-radius: 6px; border: none; background: var(--bg-input); color: var(--text-secondary); cursor: pointer; transition: all 0.2s; white-space: normal; word-break: break-all; overflow-wrap: break-word; flex-shrink: 0; } .ep-btn2:hover { transform: scale(1.05); } .ep-btn2.active { background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(34, 197, 94, 0.25); } .source-list { display: flex; flex-direction: column; gap: 8px; } .source-item { display: flex; gap: 12px; padding: 8px; border-radius: 8px; cursor: pointer; transition: all 0.2s; border: 1px solid transparent; } .source-item:hover { background: var(--bg-input); } .source-item.active { background: var(--accent-light); border-color: var(--accent); } .source-thumb { width: 48px; height: 64px; flex-shrink: 0; border-radius: 6px; overflow: hidden; background: var(--bg-input); } .source-thumb img { width: 100%; height: 100%; object-fit: cover; } .source-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; } .source-name { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .source-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .source-res { font-size: 11px; padding: 1px 6px; border-radius: 4px; flex-shrink: 0; background: var(--bg-input); color: var(--text-muted); } .source-res.pending { color: var(--text-muted); } .source-res.error { color: #ef4444; } .source-res.ultra { color: #a855f7; } .source-res.high { color: #22c55e; } .source-res.low { color: #eab308; } .source-net { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-top: 4px; } .source-net .speed { color: #22c55e; font-weight: 500; } .source-net .ping { color: #f97316; font-weight: 500; } .source-net .no-data { color: var(--text-muted); } .source-net .err { color: #ef4444; } .source-sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .source-badge { font-size: 11px; padding: 1px 8px; border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-secondary); } .source-count { font-size: 12px; color: var(--text-muted); } .panel-footer { border-top: 1px solid var(--border-color); padding: 10px; flex-shrink: 0; } .panel-footer button { width: 100%; background: none; border: none; color: var(--text-muted); font-size: 12px; cursor: pointer; padding: 6px; transition: color 0.2s; } .panel-footer button:hover { color: var(--accent); } /* ===== 详情 + 海报 ===== */ .play-info { margin-top: 16px; grid-template-columns: 1fr; } @media (min-width: 768px) { /* 海报列自适应内容宽(240px), 文字列占剩余 —— 避免海报与说明之间大片空白 */ .play-info { grid-template-columns: auto 1fr; gap: 20px; } .info-poster { display: block; order: -1; } } .info-poster { position: relative; min-width: 0; width: 240px; max-width: 240px; aspect-ratio: 2 / 3; align-self: start; } .info-poster img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; background: var(--bg-input); } .info-main { min-width: 0; } .info-title-row { display: flex; align-items: center; gap: 12px; } .info-title { font-size: 24px; font-weight: 700; margin: 0; } .fav-btn { background: none; border: none; cursor: pointer; color: var(--text-secondary); padding: 4px; display: flex; transition: transform 0.2s; } .fav-btn:hover { transform: scale(1.12); } .info-meta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 14px; color: var(--text-secondary); margin: 12px 0; } .meta-class { color: var(--accent); font-weight: 600; } .meta-source { border: 1px solid var(--border-color); padding: 1px 8px; border-radius: 4px; font-size: 13px; } .info-desc { font-size: 14px; line-height: 1.7; color: var(--text-muted); white-space: pre-line; max-height: 260px; overflow-y: auto; } /* 播放页动画 */ @keyframes play-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes play-pulse { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.45; } } @keyframes play-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @media (max-width: 767px) { .play-grid { grid-template-columns: 1fr; } .panel-col { order: 2; } .info-poster { display: none; } } /* ========== 登录 ========== */ .auth-page { display: flex; align-items: center; justify-content: center; min-height: 70vh; } .auth-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 32px; width: 100%; max-width: 380px; } .auth-title { font-size: 20px; font-weight: 700; margin-bottom: 24px; text-align: center; display: flex; align-items: baseline; justify-content: center; gap: 8px; } /* 登录页 App 版本号 (名称右侧, 颜色与主题切换按钮一致) */ .auth-title .header-ver { margin-left: 0; font-size: 11px; font-weight: 400; color: var(--text-secondary); white-space: nowrap; line-height: 1; } /* 登录页按钮行: 允许 flex 收缩, 防止窄屏下三按钮溢出导致两排总宽不一致 */ .auth-card .btn { min-width: 0; white-space: nowrap; } .auth-card .auth-row-btn { padding: 12px 14px; font-size: 14px; } @media (max-width: 400px) { .auth-card .btn-lg { padding: 12px 8px; font-size: 13px; } .auth-card .auth-row-btn { padding: 12px 5px; font-size: 12px; } } .form-group { margin-bottom: 16px; } .form-label { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; } .form-input { width: 100%; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 10px 12px; color: var(--text-primary); font-size: 14px; outline: none; transition: border-color var(--transition); } .form-input:focus { border-color: var(--accent); } .form-input::placeholder { color: var(--text-muted); } .auth-link { text-align: center; margin-top: 16px; font-size: 13px; color: var(--text-secondary); } .auth-link a { font-weight: 500; } /* 微信扫码登录 */ .auth-divider { display: flex; align-items: center; gap: 10px; margin: 18px 0 14px; color: var(--text-muted); font-size: 12px; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-color); } .btn-wechat { background: #07c160; border-color: #07c160; color: #fff; } .btn-wechat:hover { background: #06ad56; border-color: #06ad56; color: #fff; } .btn-wechat:active { transform: scale(0.97); } /* 微信/修改密码弹窗 (跟随主题变量) */ .wx-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; } .wx-modal-mask { position: absolute; inset: 0; background: rgba(0,0,0,.55); } .wx-modal-box { position: relative; width: 320px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 24px 22px 20px; text-align: center; box-shadow: 0 16px 48px rgba(0,0,0,.3); color: var(--text-primary); } .wx-modal-close { position: absolute; top: 10px; right: 12px; width: 28px; height: 28px; border: none; background: var(--bg-card-hover); color: var(--text-secondary); font-size: 16px; line-height: 1; border-radius: 50%; cursor: pointer; } .wx-modal-close:hover { background: var(--border-hover); color: var(--text-primary); } .wx-modal-title { font-size: 16px; font-weight: 700; margin-bottom: 16px; } .wx-modal-qr { width: 232px; height: 232px; margin: 0 auto; border: 1px solid var(--border-color); border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--bg-input); overflow: hidden; } .wx-modal-qr img { width: 220px; height: 220px; display: block; image-rendering: pixelated; } .wx-modal-loading { font-size: 13px; color: var(--text-muted); } .wx-modal-status { margin-top: 14px; font-size: 13px; color: var(--text-muted); min-height: 18px; } .wx-modal-frame-box { width: 350px; padding: 18px 18px 16px; max-width: calc(100vw - 24px); } .wx-modal-iframe { width: 314px; max-width: 100%; height: 400px; border: 1px solid var(--border-color); border-radius: 10px; background: #fff; display: block; margin: 0 auto; } .wx-modal-mobile-tip { margin-top: 12px; font-size: 12px; color: var(--text-muted); line-height: 1.9; text-align: left; } /* ========== 弹窗公告 (图片广告: 无边框无标题, 右上角关闭按钮, 倒计时结束前禁用; body 锁滚动) ========== */ body.modal-open { overflow: hidden; } .popup-announcement .wx-modal-box { max-height: 82vh; padding: 0; border: none; background: transparent; box-shadow: none; } .popup-ann-close { position: absolute; top: 12px; right: 12px; z-index: 10; display: flex; align-items: center; gap: 5px; padding: 6px 14px; border: none; border-radius: 999px; background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; transition: background .2s; } .popup-ann-close:hover:not(:disabled) { background: rgba(220, 38, 38, 0.92); } .popup-ann-close:disabled { opacity: .65; cursor: not-allowed; } .popup-ann-close .popup-ann-x { width: 14px; height: 14px; flex-shrink: 0; } .popup-ann-image { width: 100%; overflow: hidden; border-radius: 10px; border: 1px solid var(--border-color); } .popup-ann-image img { display: block; width: 100%; height: auto; } /* ========== 通用 ========== */ .section-title { font-size: 18px; font-weight: 600; margin: 28px 0 12px; display: flex; align-items: center; justify-content: space-between; } .section-title .clear-btn { font-size: 13px; color: var(--text-muted); cursor: pointer; font-weight: 400; } .section-title .clear-btn:hover { color: var(--danger); } .empty-state { text-align: center; padding: 48px 16px; color: var(--text-muted); } .loading { display: flex; align-items: center; justify-content: center; padding: 48px; color: var(--text-muted); } .spinner { width: 24px; height: 24px; border: 2px solid var(--border-color); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; margin-right: 8px; } @keyframes spin { to { transform: rotate(360deg); } } .error-text { color: var(--danger); font-size: 13px; } .success-text { color: var(--success); font-size: 13px; } /* ========== 公告 (多条垂直轮播, 每条停留5秒自动切换; 永久显示不可关闭) ========== */ .announcement { display: flex; align-items: center; gap: 12px; background: linear-gradient(90deg, var(--accent-light), rgba(59, 130, 246, 0.02)); border: 1px solid var(--accent-border); border-left: 4px solid var(--accent); border-radius: var(--radius-md); padding: 10px 16px; margin-bottom: 20px; } .announcement-badge { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: var(--accent); color: #fff; border-radius: 6px; box-shadow: 0 0 12px rgba(59, 130, 246, 0.45); } .announcement-badge svg { width: 17px; height: 17px; } .announcement-viewport { flex: 1; overflow: hidden; min-height: 26px; position: relative; } .announcement-track { display: flex; flex-direction: column; will-change: transform; } .announcement-item { line-height: 1.6; padding: 4px 2px; font-size: 15px; font-weight: 600; color: var(--text-primary); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .announcement-count { flex-shrink: 0; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; padding: 0 2px; align-self: center; } /* 手机端: 公告文字最多 2 行省略; 视口高度由 JS 跟随当前公告实际高度 (之前固定 56px 会把下一条公告露出来, 导致"1行公告 + 下一行露出第二条"的情况) */ @media (max-width: 768px) { .announcement { padding: 8px 12px; } .announcement-item { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; word-break: break-all; padding: 4px 2px; } } /* ========== 管理后台 ========== */ .admin-layout { display: flex; gap: 16px; } .admin-sidebar { width: 200px; flex-shrink: 0; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 8px; } .admin-sidebar a { display: block; padding: 8px 12px; color: var(--text-secondary); border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 2px; transition: all var(--transition); } .admin-sidebar a:hover { background: var(--bg-card-hover); color: var(--text-primary); } .admin-sidebar a.active { background: var(--accent-light); color: var(--accent); } .admin-sidebar-logout { margin-top: 8px; border-top: 1px solid var(--border-color); padding-top: 10px !important; color: var(--text-secondary) !important; } .admin-sidebar-logout:hover { color: #ef4444 !important; background: rgba(239, 68, 68, 0.1) !important; } .admin-content { flex: 1; min-width: 0; } /* 后台 Tab 切换 (用户管理内嵌用户组/激活码) */ .user-tab.active { background: var(--accent-light, rgba(59,130,246,0.15)); color: var(--accent, #3b82f6); border-color: var(--accent, #3b82f6); } /* ========== 后台顶栏 (无前端导航) ========== */ .admin-topbar { border-bottom: 1px solid var(--border-color); background: var(--bg-card); } .admin-topbar-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 56px; display: flex; align-items: center; justify-content: space-between; } .admin-topbar-title { font-size: 16px; font-weight: 700; } .admin-topbar-link { font-size: 13px; color: var(--text-secondary); text-decoration: none; transition: color var(--transition); } .admin-topbar-link:hover { color: var(--accent-blue, #3b82f6); } .admin-section { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 16px; margin-bottom: 16px; } .admin-table { width: 100%; border-collapse: collapse; } .admin-table th, .admin-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border-color); font-size: 13px; } .admin-table th { color: var(--text-secondary); font-weight: 500; } .admin-table tr:hover td { background: var(--bg-card-hover); } /* ========== 后台概览统计卡片 ========== */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } .stat-card { position: relative; overflow: hidden; background: linear-gradient(165deg, var(--bg-card-hover) 0%, var(--bg-card) 55%); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 18px 18px 15px; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; animation: statIn .4s ease both; } .stat-card:nth-child(1) { animation-delay: .02s; } .stat-card:nth-child(2) { animation-delay: .06s; } .stat-card:nth-child(3) { animation-delay: .10s; } .stat-card:nth-child(4) { animation-delay: .14s; } .stat-card:nth-child(5) { animation-delay: .18s; } .stat-card:nth-child(6) { animation-delay: .22s; } .stat-card:nth-child(7) { animation-delay: .26s; } .stat-card:nth-child(8) { animation-delay: .30s; } .stat-card:nth-child(9) { animation-delay: .34s; } .stat-card:nth-child(10) { animation-delay: .38s; } .stat-card:nth-child(11) { animation-delay: .42s; } .stat-card:nth-child(12) { animation-delay: .46s; } @keyframes statIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), rgba(59,130,246,.08) 70%, transparent); opacity: .55; } .stat-card:hover { border-color: var(--accent-border); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.35), 0 0 0 1px rgba(59,130,246,.06); } .stat-card .stat-value { font-size: 28px; font-weight: 800; line-height: 1.15; color: var(--text-primary); letter-spacing: .4px; font-variant-numeric: tabular-nums; } .stat-card .stat-label { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-secondary); margin-top: 9px; letter-spacing: .3px; } .stat-card .stat-label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .85; box-shadow: 0 0 8px rgba(59,130,246,.6); } .stat-card .stat-sub { font-size: 11px; color: var(--text-muted); margin-top: 3px; } /* ========== 概览分组标题 ========== */ .group-title { display: flex; align-items: center; gap: 9px; margin: 26px 0 14px; font-size: 14px; font-weight: 600; color: var(--text-primary); letter-spacing: .4px; } .group-title:first-of-type { margin-top: 6px; } .group-title::before { content: ''; width: 4px; height: 16px; border-radius: 3px; background: linear-gradient(180deg, var(--accent), rgba(59,130,246,.25)); box-shadow: 0 0 10px rgba(59,130,246,.45); } .group-title::after { content: ''; flex: 1; height: 1px; margin-left: 6px; background: linear-gradient(90deg, var(--border-color), transparent); } /* ========== 概览端口区块 ========== */ .port-tags { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .port-tags .tag { display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 500; margin-right: 0; letter-spacing: .2px; transition: transform .15s ease, box-shadow .15s ease; } .port-tags .tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; } .port-tags .tag:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.3); } /* ========== 概览端口统计表格 ========== */ .port-table th:not(:first-child), .port-table td:not(:first-child) { text-align: center; } .port-table td:not(:first-child) { font-size: 14px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; } .port-table td:first-child .tag { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500; margin-right: 0; } .port-table td:first-child .tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; } /* ========== 概览: 搜索Top10 + 登录记录 两栏布局 ========== */ .dash-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 18px; margin-top: 26px; } .dash-grid > div { background: linear-gradient(165deg, var(--bg-card-hover) 0%, var(--bg-card) 55%); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 16px; } .dash-grid h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 0 0 14px; } .dash-grid h3::before { content: ''; width: 4px; height: 14px; border-radius: 3px; background: linear-gradient(180deg, var(--accent), rgba(59,130,246,.25)); } .dash-grid .admin-table th { font-size: 12px; } .dash-grid .admin-table td { font-variant-numeric: tabular-nums; white-space: nowrap; } .dash-del-btn { padding: 2px 9px; border: 1px solid rgba(239, 68, 68, 0.4); border-radius: var(--radius-sm); background: transparent; color: #ef4444; font-size: 11px; cursor: pointer; transition: all .15s; } .dash-del-btn:hover { background: rgba(239, 68, 68, 0.15); border-color: #ef4444; } /* ========== 搜索页热门词 ========== */ .hot-keywords { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; } .hot-keywords-label { font-size: 13px; color: var(--text-muted); margin-right: 2px; } .hot-keyword { padding: 5px 14px; border-radius: 999px; background: var(--accent-light); border: 1px solid var(--accent-border); color: var(--accent); font-size: 13px; text-decoration: none; cursor: pointer; transition: all .15s; } .hot-keyword:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-1px); } .dash-empty { color: var(--text-muted); font-size: 13px; padding: 14px; border: 1px dashed var(--border-color); border-radius: 8px; } /* ========== 概览: 登录记录分页 ========== */ .pagination { display: flex; align-items: center; gap: 6px; margin-top: 12px; flex-wrap: wrap; } .pagination-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 10px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 13px; color: var(--text-secondary); background: var(--bg-card-hover); text-decoration: none; cursor: pointer; transition: all .15s; } .pagination-btn:hover { color: var(--accent); border-color: var(--accent); } .pagination-btn.current { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; cursor: default; } .pagination-ellipsis { color: var(--text-muted); padding: 0 2px; } .pagination-info { color: var(--text-muted); font-size: 12px; margin-left: 4px; } @media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } } /* ========== 标签 ========== */ .tag { display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm); font-size: 11px; margin-right: 4px; } .tag-blue { background: var(--accent-light); color: var(--accent); } .tag-green { background: rgba(34, 197, 94, 0.15); color: var(--success); } .tag-red { background: rgba(239, 68, 68, 0.15); color: var(--danger); } .tag-gray { background: var(--bg-input); color: var(--text-secondary); } /* ========== 标签页 ========== */ .tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); } .tab { padding: 10px 16px; color: var(--text-secondary); font-size: 14px; cursor: pointer; border-bottom: 2px solid transparent; transition: all var(--transition); } .tab:hover { color: var(--text-primary); } .tab.active { color: var(--accent); border-bottom-color: var(--accent); } /* ========== 响应式 ========== */ @media (max-width: 1024px) { .header-nav { gap: 0; } .header-nav .nav-link { padding: 8px 12px; font-size: 13px; } .main-content { padding: 16px 20px; } } @media (max-width: 768px) { .top-header-inner { padding: 0 16px; } .header-nav { display: none; } .player-page { flex-direction: column; } .player-sidebar { width: 100%; } .admin-layout { flex-direction: column; } .admin-sidebar { width: 100%; } .card { flex: 0 0 130px; } } /* ========== 手机端 (≤768px): 顶栏固定 + 底部悬浮导航 + 卡片角标缩放 ========== */ /* 底部悬浮导航: 默认(PC/平板)隐藏, 仅手机断点显示 */ .m-bottom-nav { display: none; } @media (max-width: 768px) { /* 兜底: 手机端禁止横向滚动, 防止子页面内容溢出破坏 fixed 顶栏/底栏 */ html, body { overflow-x: hidden; } /* 顶栏: 固定定位, 不管怎么滑动都不跟随 */ .top-header { position: fixed; top: 0; left: 0; right: 0; } /* 主内容区: 顶部为固定顶栏让位, 底部为悬浮导航让位 */ .main-content { padding-top: calc(var(--header-height) + 8px); padding-bottom: calc(16px + 60px + env(safe-area-inset-bottom)); } /* 首页搜索区: 顶栏已让位, 收紧自身顶部留白 */ .hero-search { padding-top: 8px; } /* ===== 底部悬浮导航 (6项: 首页/电影/剧集/动漫/动画/综艺, 仅手机端显示) ===== */ .m-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 998; display: flex; background: var(--bg-header); border-top: 1px solid var(--border-color); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); } .m-bottom-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 52px; color: var(--text-muted); font-size: 10px; text-decoration: none; transition: color var(--transition); } .m-bottom-nav-item svg { width: 22px; height: 22px; } .m-bottom-nav-item.active, .m-bottom-nav-item:active { color: var(--accent); } .site-footer { padding-bottom: calc(28px + 60px + env(safe-area-inset-bottom)); } /* ===== 卡片角标: 随小卡片同步缩放 (左上角年份/右上角集数/评分/删除) ===== */ .card-year-badge { top: 4px; left: 4px; font-size: 9px; padding: 2px 5px; border-radius: 3px; } .card-rate-badge { top: 4px; right: 4px; width: 22px; height: 22px; font-size: 10px; } .card-ep-badge { top: 4px; right: 4px; font-size: 10px; padding: 2px 5px; border-radius: 4px; } } /* ========== 滚动条 ========== */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--border-hover); } ::-webkit-scrollbar-thumb:horizontal { background: var(--border-color); border-radius: 3px; } ::-webkit-scrollbar-thumb:horizontal:hover { background: var(--border-hover); } /* ========== 首页搜索区域 ========== */ .hero-search { text-align: center; padding: 48px 16px 32px; } .hero-search h1 { font-size: 32px; font-weight: 700; margin-bottom: 8px; } .hero-search p { color: var(--text-secondary); font-size: 14px; margin-bottom: 24px; } .hero-search .search-bar { max-width: 600px; } /* ========== 发现页分类分组 ========== */ .cat-group { margin-bottom: 16px; } .cat-group-label { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; padding-left: 4px; font-weight: 500; } .cat-group-btns { display: flex; flex-wrap: wrap; gap: 8px; } .btn-cat { font-size: 13px; padding: 6px 14px; background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-secondary); border-radius: var(--radius-sm); transition: all var(--transition); } .btn-cat:hover { background: var(--bg-card-hover); border-color: var(--border-hover); color: var(--text-primary); } .btn-cat.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-cat.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } /* ========== 手机端顶部搜索按钮 + 搜索弹窗 (顶部名称旁, 弹窗搜索) ========== */ .header-search-btn { display: none; width: 36px; height: 36px; margin-left: 2px; border: none; border-radius: 8px; background: transparent; color: var(--text-primary); align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background var(--transition); } .header-search-btn:hover { background: var(--bg-card-hover); } .header-search-btn:active { transform: scale(0.92); } @media (max-width: 768px) { .header-left { gap: 6px; } .header-search-btn { display: inline-flex; } } .search-modal { position: fixed; inset: 0; z-index: 100000; background: rgba(0, 0, 0, 0.55); display: none; align-items: center; justify-content: center; padding: 16px; } .search-modal-box { width: 100%; max-width: 420px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); } .search-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border-color); color: var(--text-primary); font-size: 15px; font-weight: 600; } .search-modal-close { border: none; background: transparent; color: var(--text-secondary); font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; } .search-modal-close:hover { color: var(--text-primary); } .search-modal-body { display: flex; flex-direction: column; gap: 12px; padding: 16px; } .search-modal-row { display: flex; gap: 10px; } .search-modal-row .search-input { min-width: 0; flex: 1; } .search-modal-hot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .search-modal-hot .hot-keywords-label { margin-right: 2px; } .search-modal-hot .hot-keyword { padding: 4px 12px; font-size: 12.5px; } /* ===== 机顶盒卡片"更多操作"按钮 (弹出与手机长按一致的操作面板) ===== */ .card-menu-btn { position: absolute; right: 8px; bottom: 8px; z-index: 7; width: 30px; height: 30px; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background .2s, transform .2s; } .card-menu-btn:hover, .card-menu-btn:focus-visible { background: rgba(0, 0, 0, 0.85); } @media (max-width: 640px) { /* 手机/网页端无此按钮 (操作走长按菜单) */ .card-menu-btn { display: none; } } /* ===== 卡片操作按钮 (对齐 Node.js VideoCard: 海报右下角悬浮 收藏/删除, 仅 PC 端) ===== */ .wm5s-card-actions { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 10px; z-index: 7; /* PC 端悬停显示: 默认隐藏, 鼠标移到卡片上才显示 (对齐 Node.js 原版) */ opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; } .card:hover .wm5s-card-actions { opacity: 1; transform: translateY(0); } .wm5s-card-action-btn { width: 30px; height: 30px; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background .2s, color .2s, transform .2s; } .wm5s-card-action-btn:hover { background: rgba(0, 0, 0, 0.85); transform: scale(1.12); } .wm5s-card-action-btn.danger:hover { color: #ef4444; } .wm5s-card-action-btn.heart.active { color: #ef4444; } @media (max-width: 640px) { /* 移动端无悬停, 隐藏悬浮按钮 (操作走长按菜单, 对齐 Node.js) */ .wm5s-card-actions { display: none; } } /* ===== 卡片长按/右键操作面板 (对齐 Node.js MobileActionSheet: 底部滑入) ===== */ .wm5s-cm-mask { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .2s ease-out; } .wm5s-cm-mask.open { opacity: 1; } .wm5s-cm-panel { width: 100%; max-width: 512px; margin: 0 16px calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); overflow: hidden; transform: translateY(100%); transition: transform .2s ease-out; } .wm5s-cm-mask.open .wm5s-cm-panel { transform: translateY(0); } .wm5s-cm-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border-color); } .wm5s-cm-head-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; } .wm5s-cm-poster { width: 48px; height: 64px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: rgba(128, 128, 128, .15); } .wm5s-cm-head-info { flex: 1; min-width: 0; } .wm5s-cm-head-line { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; } .wm5s-cm-title { font-size: 16px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wm5s-cm-src { flex-shrink: 0; font-size: 12px; padding: 2px 8px; border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-muted); } .wm5s-cm-sub { font-size: 13px; color: var(--text-muted); } .wm5s-cm-close { flex-shrink: 0; padding: 8px; border: none; background: transparent; color: var(--text-muted); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; } .wm5s-cm-close:hover { background: rgba(128, 128, 128, .18); } .wm5s-cm-list { padding: 6px 0; } .wm5s-cm-item { width: 100%; display: flex; align-items: center; gap: 14px; padding: 13px 16px; background: transparent; border: none; cursor: pointer; font-size: 15px; color: var(--text-primary); text-align: left; font-family: inherit; transition: background .15s, transform .15s; } .wm5s-cm-item:hover { background: rgba(128, 128, 128, .08); } .wm5s-cm-item:active { transform: scale(.98); } .wm5s-cm-item .ic { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-muted); } .wm5s-cm-item.primary .ic { color: #22c55e; } .wm5s-cm-item.danger .ic { color: #ef4444; } .wm5s-cm-item .ic.active { color: #ef4444; } .wm5s-cm-item .ic.active svg { fill: #ef4444; stroke: #ef4444; } .wm5s-cm-item .txt { flex: 1; } .wm5s-cm-item .right { font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; } .wm5s-cm-divider { margin-left: 54px; border-top: 1px solid var(--border-color); }