/* ============================================================ 篮球看台 - 全局样式 (响应式) ============================================================ */ :root { --bg: #0f1420; --bg-soft: #161d2e; --card: #1b2336; --card-2: #202a40; --line: #2a3550; --text: #e8ecf4; --text-dim: #9aa6bd; --primary: #ff6b35; --primary-2: #ff8f5a; --accent: #38bdf8; --ok: #34d399; --warn: #fbbf24; --danger: #f87171; --radius: 12px; /* 供主题切换的补充变量（避免硬编码色） */ --header-bg: rgba(13,17,28,.92); --footer-bg: #0b0f1a; --ghost-hover: #2b3750; --badge-live-text: #ff9d9d; --outline-hover: rgba(56,189,248,.12); --shadow-color: rgba(0,0,0,.32); } /* ============ 白天模式（浅色主题，通过 切换） ============ */ [data-theme="light"] { --bg: #f4f6fb; --bg-soft: #eef1f7; --card: #ffffff; --card-2: #eef1f7; --line: #e2e7f0; --text: #1f2937; --text-dim: #6b7280; --primary: #ff6b35; --primary-2: #e85d2a; --accent: #0e9be0; --ok: #10b981; --warn: #d97706; --danger: #dc2626; --header-bg: rgba(255,255,255,.94); --footer-bg: #e9edf5; --ghost-hover: #e0e6f0; --badge-live-text: #e04040; --outline-hover: rgba(14,155,224,.14); --shadow-color: rgba(31,41,55,.16); } * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; } .container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; } /* ---------- 顶部导航 ---------- */ .site-header { background: var(--header-bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; backdrop-filter: blur(8px); } .header-inner { display: flex; align-items: center; gap: 22px; min-height: 62px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; } .brand { display: flex; align-items: center; gap: 10px; color: var(--text); } .brand:hover { text-decoration: none; } .brand-icon { font-size: 26px; } .brand-text { font-size: 19px; font-weight: 800; display: flex; flex-direction: column; line-height: 1.15; } .brand-text small { font-size: 11px; font-weight: 400; color: var(--text-dim); } .main-nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; } .main-nav a { padding: 7px 14px; border-radius: 8px; color: var(--text-dim); font-size: 15px; } .main-nav a:hover { color: var(--text); background: var(--card-2); text-decoration: none; } .main-nav a.on { color: #fff; background: var(--primary); font-weight: 600; } .header-user { display: flex; align-items: center; gap: 10px; } .user-chip { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-size: 14px; } .user-chip:hover { text-decoration: none; } .page-body { flex: 1; padding-top: 26px; padding-bottom: 40px; } /* ---------- 按钮 ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 18px; border-radius: 9px; border: 1px solid transparent; font-size: 14px; cursor: pointer; transition: .18s; white-space: nowrap; line-height: 1.4; } .btn:hover { text-decoration: none; } .btn-primary { background: var(--primary); color: #fff; font-weight: 600; } .btn-primary:hover { background: var(--primary-2); } .btn-outline { background: transparent; color: var(--accent); border-color: var(--accent); } .btn-outline:hover { background: var(--outline-hover); } .btn-ghost { background: var(--card-2); color: var(--text); border-color: var(--line); } .btn-ghost:hover { background: var(--ghost-hover); } .btn-danger { background: rgba(248, 113, 113, .12); color: var(--danger); border-color: rgba(248, 113, 113, .4); } .btn-danger:hover { background: rgba(248, 113, 113, .22); } .btn-sm { padding: 5px 12px; font-size: 13px; } .btn-xs { padding: 3px 9px; font-size: 12px; border-radius: 7px; } .btn-block { width: 100%; } /* ---------- 徽章 ---------- */ .badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; } .badge-live { background: rgba(248, 113, 113, .16); color: var(--badge-live-text); } .badge-done { background: rgba(154, 166, 189, .16); color: var(--text-dim); } .badge-wait { background: rgba(251, 191, 36, .14); color: var(--warn); } .badge-ok { background: rgba(52, 211, 153, .14); color: var(--ok); } .badge-admin { background: rgba(56, 189, 248, .16); color: var(--accent); } .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); margin-right: 6px; animation: pulse 1.4s infinite; } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } } /* ---------- 页面标题区 ---------- */ .page-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .page-title-row h1 { font-size: 26px; } .page-title-row .sub { color: var(--text-dim); font-size: 14px; margin-top: 4px; } .live-indicator { color: var(--ok); font-size: 13px; display: flex; align-items: center; } /* ---------- 分类标签 ---------- */ .league-tabs, .filter-tabs { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; } .league-tabs .tab, .filter-tabs .tab { padding: 8px 20px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--text-dim); font-size: 14px; font-weight: 600; } .league-tabs .tab:hover, .filter-tabs .tab:hover { color: var(--text); border-color: var(--accent); text-decoration: none; } .league-tabs .tab.on, .filter-tabs .tab.on { background: var(--primary); color: #fff; border-color: var(--primary); } /* 分类折叠按钮: 默认(PC)隐藏, 仅手机端显示; button 需去除原生样式 */ .tab-more-toggle { display: none; cursor: pointer; font-family: inherit; appearance: none; -webkit-appearance: none; } .tab-more-toggle:hover { color: var(--text); border-color: var(--accent); } .filter-tabs .tab small { margin-left: 6px; opacity: .8; font-weight: 400; } /* 选项卡分隔线 + 已结束(状态过滤)选项卡 */ .tab-sep { width: 1px; height: 20px; background: var(--line); margin: 0 2px; align-self: center; } .league-tabs .tab.tab-done { color: var(--text-dim); border-style: dashed; } .league-tabs .tab.tab-done.on { background: #475569; border-color: #475569; color: #fff; border-style: solid; } /* ---------- 赛事卡片（单列紧凑列表） ---------- */ .game-list { display: flex; flex-direction: column; gap: 10px; } .game-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; transition: .2s; display: flex; align-items: center; gap: 14px 24px; flex-wrap: wrap; } .game-card:hover { border-color: var(--accent); transform: translateX(2px); } .game-card.is-live { border-color: rgba(248, 113, 113, .55); box-shadow: 0 0 0 1px rgba(248,113,113,.2); } .game-card-head { display: flex; align-items: center; gap: 8px; } .league-tag { font-size: 11px; padding: 2px 9px; border-radius: 6px; background: rgba(56,189,248,.14); color: var(--accent); font-weight: 700; } .game-time { color: var(--text-dim); font-size: 12px; } .game-card-main { display: flex; align-items: center; gap: 14px 20px; flex: 1; min-width: 250px; } .team-col { display: flex; align-items: center; gap: 9px; width: auto; min-width: 0; } .team-name { font-size: 15px; font-weight: 600; white-space: nowrap; } .team-logo, .player-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-weight: 800; flex: none; user-select: none; } .team-logo { font-size: 14px; } .score-col { text-align: center; min-width: 118px; } .score-num { font-size: 26px; font-weight: 800; letter-spacing: 1px; display: flex; align-items: center; justify-content: center; gap: 8px; } .score-num.big { font-size: 48px; } .score-home { color: var(--text); } .score-away { color: var(--text); } .score-empty { font-size: 24px; color: var(--text-dim); font-weight: 800; } .score-empty.big { font-size: 40px; } .score-sub { color: var(--text-dim); font-size: 13px; margin-top: 2px; white-space: nowrap; } .score-sub.big { font-size: 15px; } .live-clock .live-rem { color: var(--primary-2); font-weight: 700; font-variant-numeric: tabular-nums; } .game-card-foot { display: flex; gap: 8px; align-items: center; margin-left: auto; } .foot-note { color: var(--text-dim); font-size: 12px; } .empty-box { padding: 26px 16px; text-align: center; color: var(--text-dim); border: 1px dashed var(--line); border-radius: var(--radius); background: var(--bg-soft); } /* ============================================================ 直播吧风格 - 首页紧凑赛程列表（日期分组 + 一行一场） ============================================================ */ .schedule-list { display: flex; flex-direction: column; gap: clamp(14px, 0.75vw + 11.2px, 22px); } .day-group { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .day-title { display: flex; align-items: center; gap: clamp(6px, 0.37vw + 4.6px, 10px); padding: clamp(10px, 0.7vw + 7.9px, 18px) clamp(10px, 0.7vw + 7.9px, 18px); background: var(--bg-soft); border-bottom: 1px solid var(--line); font-size: clamp(13px, 0.19vw + 12.3px, 15px); font-weight: 700; } .day-bar { width: 4px; height: 16px; border-radius: 3px; background: var(--accent); } .day-text { color: var(--text); } .day-today { margin-left: auto; font-size: 12px; font-weight: 600; color: #fff; background: var(--primary); padding: 2px 12px; border-radius: 999px; } .match-row { display: flex; align-items: center; gap: clamp(8px, 0.55vw + 6.3px, 14px); padding: clamp(9px, 0.28vw + 8px, 12px) clamp(10px, 0.7vw + 7.9px, 18px); border-bottom: 1px solid var(--line); transition: .15s; } .match-row:last-child { border-bottom: none; } .match-row:hover { background: var(--bg-soft); } .match-row.is-live { background: rgba(248,113,113,.05); } .match-time { width: clamp(34px, 1.1vw + 30.4px, 46px); font-size: clamp(12px, 0.28vw + 11.1px, 15px); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .match-row.is-live .match-time { color: var(--danger); } .match-league { width: clamp(64px, 4.9vw + 47px, 118px); font-size: clamp(11px, 0.09vw + 10.7px, 12px); color: var(--text-dim); flex: none; } .match-teams { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: clamp(6px, 0.37vw + 4.6px, 10px); min-width: 0; } .match-team { font-size: clamp(12.5px, 0.23vw + 11.8px, 15px); font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .match-score { display: inline-flex; align-items: center; gap: clamp(4px, 0.19vw + 3.3px, 6px); flex: none; } .ms-home, .ms-away { font-size: clamp(15px, 0.19vw + 14.3px, 17px); font-weight: 800; font-variant-numeric: tabular-nums; min-width: clamp(15px, 0.65vw + 12.9px, 22px); text-align: center; } .ms-sep { color: var(--text-dim); font-size: clamp(12px, 0.09vw + 11.7px, 13px); } .ms-vs { color: var(--text-dim); font-size: clamp(13px, 0.19vw + 12.3px, 15px); font-weight: 700; } .match-status { flex: none; font-size: clamp(11px, 0.09vw + 10.7px, 12px); } .match-status.live { color: var(--danger); font-weight: 700; } .match-status.done { color: var(--text-dim); } .match-status.wait { color: var(--warn); } .match-live-btn { flex: none; box-sizing: border-box; width: clamp(72px, 15%, 112px); padding: clamp(4px, 0.09vw + 3.7px, 5px) 12px; border-radius: 999px; min-height: clamp(30px, 0.93vw + 26.8px, 36px); background: var(--accent); color: #fff; font-size: clamp(12px, 0.09vw + 11.7px, 13px); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; text-align: center; transition: .15s; } .match-live-btn:hover { background: var(--primary); text-decoration: none; color: #fff; } /* ---------- 主题切换悬浮按钮 ---------- */ .theme-toggle { position: fixed; right: 22px; bottom: 30px; z-index: 999; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); cursor: pointer; background: var(--card); color: var(--text); font-size: 22px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px var(--shadow-color); transition: .2s; } .theme-toggle:hover { transform: translateY(-2px) scale(1.05); border-color: var(--accent); } .theme-toggle .tt-icon-sun { display: none; } .theme-toggle .tt-icon-moon { display: block; } [data-theme="light"] .theme-toggle .tt-icon-sun { display: block; } [data-theme="light"] .theme-toggle .tt-icon-moon { display: none; } /* ---------- 面板 ---------- */ .panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 18px; } .panel-title { font-size: 17px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } .panel-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; flex-wrap: wrap; } .panel-title-row .panel-title { margin-bottom: 0; } .panel-sub { font-size: 12px; color: var(--text-dim); font-weight: 400; } .breadcrumb { color: var(--text-dim); font-size: 13px; margin-bottom: 16px; } .breadcrumb a { color: var(--accent); } /* ---------- 赛事详情 ---------- */ .score-panel { text-align: center; } .score-panel-head { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 16px; flex-wrap: wrap; } .score-panel-head .game-time { margin-left: 0; } .score-panel-main { display: flex; align-items: center; justify-content: space-around; gap: 20px; } .live-refresh { color: var(--ok); font-size: 13px; } .score-facts { display: flex; justify-content: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; } .fact { background: var(--card-2); border-radius: 9px; padding: 8px 18px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-dim); } .fact b { color: var(--text); font-size: 16px; } .detail-grid { display: grid; grid-template-columns: 1fr 380px; gap: 18px; align-items: start; } .detail-main { min-width: 0; } .detail-side { min-width: 0; } /* ---------- 表格 ---------- */ .table-scroll { overflow-x: auto; } .data-table { width: 100%; border-collapse: collapse; font-size: 14px; } .data-table th, .data-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: center; } .data-table th { color: var(--text-dim); font-weight: 600; font-size: 13px; background: var(--bg-soft); } .data-table .td-team { text-align: left; font-weight: 600; } .data-table .td-total { font-weight: 800; } .data-table .td-num { font-size: 15px; font-weight: 700; } .data-table .td-label { color: var(--text-dim); } .data-table .td-url { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .data-table .td-url a { display: block; } .data-table .td-ops { white-space: nowrap; } .data-table tr:hover td { background: rgba(255,255,255,.02); } .dim { color: var(--text-dim); } /* ---------- 球员榜单 ---------- */ .top-tabs { display: flex; gap: 8px; margin-bottom: 14px; } .top-tab { padding: 6px 16px; border-radius: 8px; background: var(--card-2); border: 1px solid var(--line); color: var(--text-dim); font-size: 13px; cursor: pointer; } .top-tab.on { background: var(--primary); color: #fff; border-color: var(--primary); } .top-wrap { position: relative; } .top-list { display: none; } .top-list[data-list="points"] { display: block; } .top-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid var(--line); } .top-row:last-child { border-bottom: none; } .top-rank { width: 22px; height: 22px; border-radius: 6px; background: var(--card-2); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--warn); } .top-name { font-weight: 600; font-size: 14px; flex: 1; } .top-team { color: var(--text-dim); font-size: 12px; } .top-val { font-weight: 800; font-size: 16px; color: var(--primary-2); min-width: 40px; text-align: right; } /* ---------- 观赛按钮（合规: 固定文案/新标签页/视觉权重低） ---------- */ .watch-panel { border-color: rgba(56,189,248,.25); } .watch-note { color: var(--text-dim); font-size: 12px; margin-bottom: 12px; } .watch-btns { display: flex; flex-direction: column; gap: 10px; } .watch-link { width: 100%; } /* ---------- 讨论楼 ---------- */ .comment-box textarea { width: 100%; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 9px; color: var(--text); padding: 10px; font-size: 14px; resize: vertical; font-family: inherit; } .comment-box textarea:focus { outline: none; border-color: var(--accent); } .comment-form-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 10px; } .hint { color: var(--text-dim); font-size: 12px; } .hint.err { color: var(--danger); } .hint.ok { color: var(--ok); } .comment-list { margin-top: 14px; } .comment-item { padding: 12px 0; border-bottom: 1px solid var(--line); } .comment-item:last-child { border-bottom: none; } .comment-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; } .comment-name { font-weight: 600; font-size: 14px; } .comment-floor { color: var(--warn); font-size: 12px; } .comment-time { margin-left: auto; color: var(--text-dim); font-size: 12px; } .comment-content { font-size: 14px; word-break: break-word; } /* ---------- 球员库 ---------- */ .search-bar { display: flex; gap: 10px; margin-bottom: 16px; max-width: 560px; } .search-bar input, .search-bar.inline input { flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: 9px; color: var(--text); padding: 9px 14px; font-size: 14px; } .search-bar input:focus { outline: none; border-color: var(--accent); } .search-bar.inline { margin-bottom: 0; max-width: 320px; } .team-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; } .chip { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line); color: var(--text-dim); font-size: 12px; } .chip.on { background: var(--primary); color: #fff; border-color: var(--primary); } .player-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .player-card { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; transition: .2s; color: var(--text); } .player-card:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; } .player-card .league-tag { margin-left: auto; align-self: flex-start; } .player-card-info { flex: 1; min-width: 0; } .player-name { font-weight: 700; font-size: 16px; } .player-name small { color: var(--text-dim); font-size: 12px; margin-left: 6px; } .player-meta { color: var(--text-dim); font-size: 12px; } .player-meta.dim { color: var(--text-dim); opacity: .8; } /* ---------- 球员详情 ---------- */ .player-profile { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; } .profile-left { display: flex; align-items: center; gap: 18px; flex: 1; min-width: 260px; } .profile-name { font-size: 26px; } .profile-name small { color: var(--text-dim); font-size: 15px; } .profile-tags { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .profile-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; flex: 1.4; } .profile-facts div { background: var(--card-2); border-radius: 10px; padding: 10px 14px; } .profile-facts dt { font-size: 12px; color: var(--text-dim); } .profile-facts dd { font-size: 15px; font-weight: 600; margin-top: 2px; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; } .stat-box { background: var(--card-2); border-radius: 10px; padding: 16px 10px; text-align: center; } .stat-box b { display: block; font-size: 24px; color: var(--primary-2); } .stat-box span { font-size: 12px; color: var(--text-dim); } /* ---------- 登录注册 ---------- */ .auth-wrap { display: flex; justify-content: center; padding: 20px 0; } .auth-card { width: 100%; max-width: 420px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; } .auth-card h1 { font-size: 22px; text-align: center; } .auth-card .sub { text-align: center; color: var(--text-dim); font-size: 13px; margin-top: 6px; } .auth-tabs { display: flex; gap: 8px; margin: 20px 0 16px; } .auth-tab { flex: 1; padding: 9px; border-radius: 9px; background: var(--card-2); border: 1px solid var(--line); color: var(--text-dim); cursor: pointer; font-size: 14px; } .auth-tab.on { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; } .auth-pane { display: none; } .auth-pane.on { display: block; } .auth-pane label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 12px; } .auth-pane input, .form-col input, .form-col select, .form-col textarea, .form-inline input { width: 100%; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 9px; color: var(--text); padding: 10px 12px; font-size: 14px; margin-top: 5px; font-family: inherit; } .auth-pane input:focus, .form-col input:focus, .form-col select:focus, .form-col textarea:focus, .form-inline input:focus { outline: none; border-color: var(--accent); } .auth-pane .btn-block { margin-top: 6px; } .code-row { display: flex; gap: 8px; margin-top: 5px; } .code-row input { margin-top: 0; } .code-row .btn { margin-top: 0; } .auth-switch { text-align: center; margin-top: 14px; font-size: 13px; } /* ---------- 表单通用 ---------- */ .form-inline { display: flex; gap: 10px; align-items: center; } .form-inline input { width: auto; min-width: 180px; margin-top: 0; } .form-col label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 12px; } .form-col label span { display: block; margin-bottom: 2px; } .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; } .form-grid-2 .span-2 { grid-column: span 2; } .alert { padding: 10px 14px; border-radius: 9px; font-size: 14px; margin-bottom: 14px; } .alert-error { background: rgba(248,113,113,.12); color: var(--danger); border: 1px solid rgba(248,113,113,.3); } .alert-ok { background: rgba(52,211,153,.12); color: var(--ok); border: 1px solid rgba(52,211,153,.3); } .inline-form { display: inline-flex; } /* ---------- 我的评论 ---------- */ .my-comments { display: flex; flex-direction: column; gap: 12px; } .my-comment { background: var(--card-2); border-radius: 10px; padding: 12px; } .my-comment-head { display: flex; align-items: center; gap: 10px; font-size: 13px; margin-bottom: 6px; flex-wrap: wrap; } .my-comment-head a { color: var(--accent); } .my-comment-head .badge { margin-left: auto; } .my-comment-content { font-size: 14px; word-break: break-word; } .my-comment-time { color: var(--text-dim); font-size: 12px; margin-top: 6px; } /* ---------- 分页 ---------- */ .pagination { display: flex; gap: 6px; margin-top: 18px; justify-content: center; flex-wrap: wrap; } .pagination a, .pagination .page-cur { padding: 6px 13px; border-radius: 8px; background: var(--card-2); border: 1px solid var(--line); font-size: 13px; color: var(--text); } .pagination .page-cur { background: var(--primary); color: #fff; border-color: var(--primary); } /* ---------- 后台 ---------- */ .admin-header .main-nav { flex: 1; } .admin-header .main-nav a { font-size: 14px; } .admin-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-bottom: 18px; } .admin-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; text-align: center; } .admin-card b { display: block; font-size: 30px; color: var(--primary-2); } .admin-card span { font-size: 13px; color: var(--text-dim); } .quick-links { display: flex; gap: 12px; flex-wrap: wrap; } .check-list { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14px; } .check-list li::before { content: "✔"; color: var(--ok); margin-right: 8px; } .audit-list { display: flex; flex-direction: column; gap: 12px; } .audit-item { background: var(--card-2); border-radius: 10px; padding: 14px; } .audit-head { display: flex; align-items: center; gap: 10px; font-size: 13px; flex-wrap: wrap; } .audit-head a { color: var(--accent); } .audit-content { margin-top: 8px; font-size: 14px; word-break: break-word; } .audit-url { margin-top: 6px; font-size: 13px; color: var(--text-dim); } .audit-note { margin-top: 6px; font-size: 13px; color: var(--ok); } .audit-ops { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .word-cloud { display: flex; flex-wrap: wrap; gap: 10px; } .word-tag { display: inline-flex; align-items: center; gap: 6px; background: var(--card-2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 6px 5px 14px; font-size: 13px; } .word-tag button { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 50%; } .word-tag button:hover { background: rgba(248,113,113,.2); } .contact-mail { font-size: 15px; margin-top: 8px; } /* ---------- 页脚（合规声明固定展示） ---------- */ .site-footer { background: var(--footer-bg); border-top: 1px solid var(--line); padding: 24px 0; font-size: 13px; color: var(--text-dim); } .footer-disclaimer { border: 1px dashed var(--line); border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; background: var(--bg-soft); } .footer-disclaimer strong { color: var(--warn); margin-right: 10px; } .footer-disclaimer p { margin-top: 4px; line-height: 1.7; } .footer-channels { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .footer-channels a { color: var(--accent); } .footer-copy { margin-top: 12px; color: var(--text-dim); opacity: .7; } /* ---------- 响应式（H5 移动端适配） ---------- */ @media (max-width: 980px) { .detail-grid { grid-template-columns: 1fr; } .header-inner { gap: 10px; } .main-nav { order: 3; flex: 0 0 100%; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; padding-bottom: 4px; } .main-nav a { flex: none; } .score-num.big { font-size: 40px; } .game-card { gap: 10px 16px; } } /* 平板竖屏 / 手机: 赛程列表改为三行布局(时间行 → 队伍比分行 → 直播按钮行)， 队名超长省略号、比分固定居中，避免单行内容互相挤压；悬浮按钮缩小并让位防遮挡 */ @media (max-width: 760px) { /* ============ 手机/平板竖屏: 方块卡片布局 ============ 每场赛事一张独立卡片(圆角+边框+阴影), 垂直分块: 第一行(时间+类别+状态徽标) → 第二行(主队-比分-客队, 同一水平线) 直播按钮隐藏, 点击整卡跳转详情页(由 main.js bindCardTap 绑定) PC端(>760px) 仍为直播吧风格单行紧凑列表, 此处仅作用于手机 */ /* ---- Header: 隐藏副标题+收紧按钮, 避免第一行挤压遮挡 ---- 导航条由 980px 断点规则接管(独占一行横向滚动) */ .site-header .brand-text small { display: none; } .header-user .btn { padding: 6px 10px; font-size: 13px; min-height: 32px; } /* 刷新指示位于 header 右侧: 手机端缩小字号, 不换行不占独立行 */ .live-indicator { flex: none; font-size: 12px; } .header-inner { gap: 10px; } .header-user { flex: none; } .header-user .btn { white-space: nowrap; } /* ---- 分类折叠: 仅显示主要分类(全部+前4联赛), 其余收进"更多分类" ---- */ .tab-more-toggle { display: inline-flex; } .tab-more { display: none; } #league-tabs.show-more .tab-more { display: inline-flex; } .schedule-list { gap: 14px; } .day-group { background: transparent; border: none; border-radius: 0; } .day-title { background: transparent; border-bottom: none; padding: 6px 2px 10px; font-size: 15px; } .match-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "time league status" "teams teams teams"; align-items: center; gap: 8px 10px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; box-shadow: 0 2px 12px var(--shadow-color); transition: .15s; } .match-row:last-child { margin-bottom: 0; } .match-row:hover { background: var(--card); } .match-row.is-live { background: var(--card); border-color: rgba(248,113,113,.6); box-shadow: 0 0 0 1px rgba(248,113,113,.25), 0 2px 12px var(--shadow-color); } /* 第一行: 时间 + 类别(自适应省略) + 状态徽标 */ .match-time { width: auto; flex: none; grid-area: time; } .match-league { grid-area: league; min-width: 0; max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .match-status { grid-area: status; display: inline-flex; justify-self: end; margin-left: 0; flex: none; } /* 直播按钮: 手机端隐藏, 点击整卡跳转详情页 */ .match-live-btn { display: none; } /* 第二行: 队伍区单独一行横向排列(主队 - 比分 - 客队, 同一水平线) */ .match-teams { grid-area: teams; width: 100%; min-width: 0; flex-direction: row; align-items: center; justify-content: space-between; gap: 6px 8px; padding: 0; } .match-team { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .match-home { text-align: left; } .match-away { text-align: right; } .match-score { flex: none; justify-content: center; gap: 6px; padding: 0; } .ms-home, .ms-away { min-width: 18px; } /* 悬浮按钮: 缩小尺寸并下沉, 同时给页脚增加底部空间, 保证不遮挡卡片/直播按钮 */ .theme-toggle { width: 44px; height: 44px; right: 12px; bottom: 12px; font-size: 19px; } .site-footer { padding-bottom: 72px; } } @media (max-width: 640px) { body { font-size: 15px; } .container { padding: 0 12px; } .page-body { padding-top: 24px; } .site-header .brand-text { font-size: 17px; } .brand-text small { font-size: 10px; } .page-title-row h1 { font-size: 21px; } .page-title-row { align-items: flex-start; } .league-tabs .tab, .filter-tabs .tab { padding: 7px 14px; font-size: 13px; } /* 首页卡片: 窄屏纵向堆叠 */ .game-card { flex-direction: column; align-items: stretch; padding: 14px; } .game-card-head { justify-content: space-between; } .game-card-main { min-width: 0; justify-content: space-between; } .team-col { flex-direction: column; gap: 6px; text-align: center; } .score-col { min-width: 96px; } .score-num { font-size: 30px; } .game-card-foot { margin-left: 0; justify-content: space-between; } .game-card-foot .btn { flex: 1; } /* 方块卡片: 窄屏仅微调内边距, 布局结构沿用 760px 卡片规则 */ .match-row { gap: 5px 8px; padding: 11px 12px; } /* 详情页 */ .score-facts { gap: 8px; } .fact { padding: 6px 12px; font-size: 12px; } .fact b { font-size: 15px; } .score-panel-main { gap: 8px; } .score-num.big { font-size: 36px; } .detail-main .panel, .detail-side .panel { padding: 14px; } /* 表格窄屏横向滚动 */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .data-table { min-width: 420px; } /* 球员库 */ .player-grid { grid-template-columns: 1fr; } .team-filter { gap: 6px; } .search-bar { max-width: none; } /* 用户中心/后台 */ .stat-grid { grid-template-columns: repeat(2, 1fr); } .profile-facts { grid-template-columns: repeat(2, 1fr); } .admin-cards { grid-template-columns: repeat(2, 1fr); } .form-grid-2 { grid-template-columns: 1fr; } .form-grid-2 .span-2 { grid-column: span 1; } .auth-card { padding: 20px 16px; } .pagination a, .pagination .page-cur { padding: 8px 14px; } /* 页脚 */ .footer-channels { gap: 8px; } .btn { min-height: 38px; } .btn-sm { min-height: 30px; } } @media (max-width: 400px) { .team-name { font-size: 13px; } .score-num { font-size: 26px; } .score-sub { font-size: 12px; } .main-nav a { padding: 6px 10px; font-size: 14px; } /* 超窄屏: 卡片进一步收紧, 悬浮按钮缩小(字号已由 clamp 流体缩放, 这里只收间距) */ .match-row { padding: 10px 10px; } .theme-toggle { width: 40px; height: 40px; right: 10px; bottom: 10px; font-size: 17px; } .site-footer { padding-bottom: 60px; } } /* ============================================================ 篮球社区 ============================================================ */ .community-layout { display: grid; grid-template-columns: 1fr 280px; gap: 18px; align-items: start; } @media (max-width: 900px) { .community-layout { grid-template-columns: 1fr; } .community-side { order: -1; } } /* 帖子列表 */ .thread-list { display: flex; flex-direction: column; gap: 8px; } .thread-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; text-decoration: none; color: var(--text); transition: border-color .15s, transform .15s; } .thread-row:hover { border-color: var(--accent); } .thread-main { flex: 1; min-width: 0; } .thread-title { font-size: 15px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .thread-meta { margin-top: 6px; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-dim); flex-wrap: wrap; } .thread-forum { color: var(--accent); background: rgba(56,189,248,.10); padding: 1px 8px; border-radius: 999px; } .thread-author { display: inline-flex; align-items: center; gap: 4px; } .mini-avatar { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 600; } .thread-side { text-align: right; font-size: 12px; color: var(--text-dim); white-space: nowrap; } .thread-stat b { color: var(--text); font-size: 14px; } .thread-stat.dim { margin-left: 8px; } .thread-badge { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 4px; margin-right: 6px; vertical-align: 1px; } .thread-badge.sticky { background: var(--danger); color: #fff; } .thread-badge.essence { background: var(--warn); color: #1f2937; } /* 侧栏 */ .side-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; } .side-title { font-size: 14px; font-weight: 700; margin-bottom: 10px; color: var(--text); } .side-empty, .side-rules { font-size: 13px; color: var(--text-dim); line-height: 1.7; } .hot-list { list-style: none; padding: 0; margin: 0; } .hot-list li a { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; border-bottom: 1px dashed var(--line); text-decoration: none; color: var(--text); font-size: 13px; } .hot-list li:last-child a { border-bottom: none; } .hot-rank { color: var(--primary); font-weight: 700; flex-shrink: 0; } .hot-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hot-reply { color: var(--text-dim); font-size: 11px; flex-shrink: 0; } /* 帖子详情 */ .thread-h1 { margin: 6px 0 4px; font-size: 22px; } .back-link { font-size: 13px; color: var(--accent); text-decoration: none; } .post-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 12px; } .post-card.op { border-left: 3px solid var(--primary); } .post-head { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-dim); margin-bottom: 10px; } .post-floor { color: var(--primary); font-weight: 700; } .post-author { display: inline-flex; align-items: center; gap: 5px; color: var(--text); font-weight: 600; } .post-time { margin-left: auto; font-size: 12px; } .post-content { font-size: 15px; line-height: 1.8; color: var(--text); word-break: break-word; } /* 回帖/发帖表单 */ .reply-box, .post-form { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-top: 16px; } .reply-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; } #reply-content, .form-input { width: 100%; box-sizing: border-box; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 10px 12px; font-size: 14px; font-family: inherit; } #reply-content:focus, .form-input:focus { outline: none; border-color: var(--accent); } .form-label { display: block; font-size: 13px; color: var(--text-dim); margin: 12px 0 6px; } .hint { font-size: 13px; } .hint.err { color: var(--danger); } .hint.ok { color: var(--ok); } /* 发帖表单: 一级/二级两列 */ .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 600px) { .form-row-2 { grid-template-columns: 1fr; } } /* 二级板块 chips */ .subforum-chips { margin: 10px 0 4px; display: flex; flex-wrap: wrap; gap: 6px; } .subforum-chips .chip { display: inline-block; } /* 用户中心: 我的发帖 */ .my-threads { display: flex; flex-direction: column; gap: 10px; } .my-thread { padding-bottom: 10px; border-bottom: 1px dashed var(--line); } .my-thread:last-child { border-bottom: none; padding-bottom: 0; } .my-thread-title { display: block; font-size: 14px; font-weight: 600; color: var(--text); text-decoration: none; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .my-thread-title:hover { color: var(--accent); } .my-thread-meta { margin-top: 4px; font-size: 12px; color: var(--text-dim); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* 转载标记: 红色小圆点 */ .hupu-badge { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ef4444; margin-right: 6px; vertical-align: middle; }