/* Overview */ .overview-grid { display: grid; grid-template-columns: minmax(0, 1.58fr) minmax(280px, .9fr); gap: 16px; } /* 比赛列表：宽屏一行一条「比赛长条」,窄屏由 8-responsive 的断点改排成短宽卡片。 全站所有比赛列表都是这一种,不再各处不同。 */ .match-list { display: grid; gap: 10px; } /* 首页横幅：所选赛事的标志与名称。不用图片当背景、也不用强调色——本项目里 `--lime` 的值其实是红色(#DC3C3C)，横幅刻意避开它，靠留白、字重和一条极细分隔线撑质感。 */ .feature { position: relative; display: grid; align-content: center; min-height: 310px; padding: clamp(30px, 3.6vw, 48px); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-feature); } .feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(118deg, color-mix(in srgb, var(--snow) 6%, transparent), transparent 54%); pointer-events: none; } .feature-body { position: relative; z-index: 1; display: grid; gap: clamp(16px, 2.2vw, 26px); } .feature-brand { gap: clamp(16px, 2.4vw, 28px); min-width: 0; } .feature-logo { width: clamp(54px, 6.4vw, 78px); height: clamp(54px, 6.4vw, 78px); border: 1px solid var(--line-light); border-radius: var(--radius-lg); background: var(--surface-control); } /* 头像基类写的是 width/height: 100%,会盖掉这里的 inset;而 img 是替换元素, 写 width:auto 会用图片的固有宽度（这里上千像素）。所以显式给出尺寸。 */ .feature-logo img { inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); object-fit: contain; } .feature-logo .avatar-initial { color: var(--muted); font-size: clamp(16px, 1.8vw, 22px); font-weight: 800; } .feature-copy { display: grid; gap: 10px; min-width: 0; } .feature-name { margin: 0; font-size: clamp(27px, 3.4vw, 45px); font-weight: 800; line-height: 1.04; letter-spacing: -.015em; overflow-wrap: anywhere; } .feature-lead { display: inline-flex; align-items: center; gap: 12px; margin: 0; color: var(--muted); font-size: 12px; letter-spacing: .16em; } .feature-lead::before { content: ""; width: 22px; height: 1px; background: var(--line-light); } /* 右侧的赛事标志水印：同一个图、灰度、7% 不透明度。不承载任何信息,只是给大片留白一个落点; 没有 logo 时整块不渲染。刻意不越出卡片——越界会被窄屏检查判定为溢出。 */ .feature-watermark { position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: clamp(140px, 20vw, 280px); aspect-ratio: 1; opacity: .07; filter: grayscale(1); pointer-events: none; } .feature-watermark img { width: 100%; height: 100%; object-fit: contain; } /* 横幅整块是进入该赛事的入口。 */ .feature[role="link"] { cursor: pointer; transition: border-color .16s ease; } .feature[role="link"]:hover, .feature[role="link"]:focus-visible { border-color: var(--line-light); } /* 首页右侧：今日比赛。竖着一场一张卡片;顶端不留内边距——「今日比赛」要和横幅顶边对齐。 */ .feature-schedule { display: grid; gap: 14px; align-content: start; min-width: 0; padding: 0 0 0 24px; } /* 翻页：每页固定 3 场,列表高度因此不随比赛数量变化,旁边的横幅不会被顶高。 */ .section-tools { display: inline-flex; align-items: center; gap: 14px; } .match-pager-btn { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-xs); background: transparent; color: var(--muted); } .match-pager-btn:disabled { opacity: .35; } .match-pager-btn:not(:disabled):hover { border-color: var(--line-light); color: var(--text); } .match-pager-icon { width: 12px; height: 12px; transform: rotate(90deg); } .match-pager-icon.is-up { transform: rotate(-90deg); } @keyframes match-page-down { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes match-page-up { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } } .match-list-cards.is-paging-down { animation: match-page-down .26s ease-out both; } .match-list-cards.is-paging-up { animation: match-page-up .26s ease-out both; } /* 卡片内部的主次：赛事标志与名称是配角,队伍与比分是主角。 */ .match-list-cards .match-strip-mark-img { width: 26px; height: 26px; border-radius: var(--radius-xs); } .match-list-cards .match-strip-names strong { font-size: 11px; } .match-list-cards .match-strip-names span { font-size: 10px; } .match-list-cards .match-strip-logo { width: 34px; height: 34px; } .match-list-cards .match-strip-team { font-size: 14px; font-weight: 700; } .match-list-cards .match-strip-score { font-size: 17px; } /* 右列：时间与赛制上下排,胜/败徽章在它们**右侧**（跨两行）,而不是另起一行。 徽章在宽屏不显示,所以这里多出来的那一列自然收掉。 */ .match-strip-when { grid-template-columns: auto auto; grid-template-areas: "time result" "bo result"; column-gap: 8px; row-gap: 2px; justify-items: end; } .match-strip-time { grid-area: time; } .match-strip-bo { grid-area: bo; } .match-strip-result { grid-area: result; } .match-strip-bo { color: var(--muted-2); font: 10px "DM Mono", monospace; } .match-pager-count { min-width: 28px; color: var(--muted-2); font: 10px "DM Mono", monospace; text-align: center; } /* 每页两张,高度固定为两张的高度：单张时不会被拉高(宁可留白),整块区域高度恒定, 旁边的横幅因此不会上下动。只在宽屏生效——窄屏上下堆叠,固定高度会裁掉卡片。 */ .match-list-cards { align-content: start; } /* 两行等分：两张卡片各自占一半、底边齐平;只有一张时它只占上半,下面留白。 */ @media (min-width: 961px) { .match-list-cards { height: 232px; overflow: hidden; grid-template-rows: repeat(2, minmax(0, 1fr)); } } /* 统一内边距：横幅与右侧列表用同一个 24px,内容左边缘才对得齐。 右侧列表**顶端不留内边距**,并且压掉全局 `.section-title` 的 32px 上外边距 ——否则「今日比赛」会比横幅低 24+32=56px（实测值）。 */ .overview-grid .feature { padding: 24px; } .overview-grid .feature-schedule { padding: 0 0 0 24px; } .overview-grid .feature-schedule .section-title { margin-top: 0; } /* 左上 = 赛事标志 + 赛事名 + 阶段名/BO,右上 = 时间,下面一行是双方与比分。 */ .match-list-cards .match-strip { padding: 18px 16px; column-gap: 12px; grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "mark names when" "versus versus versus"; row-gap: 10px; } .match-list-cards .match-strip-when { grid-area: when; } .match-list-cards .match-strip-mark { grid-area: mark; } .match-list-cards .match-strip-names { grid-area: names; } .match-list-cards .match-strip-versus { grid-area: versus; } /* 最近比赛：一行若干张,位置不够就换行。 */ .bar { height: 4px; background: var(--track); border-radius: var(--radius-pill); overflow: hidden; margin-top: 10px; } .bar > span { height: 100%; display: block; background: var(--lime); border-radius: inherit; } /* Matches */ .toolbar { gap: 14px; padding: 12px 14px; } .search { gap: 8px; color: var(--muted); border: 1px solid var(--line); border-radius: var(--radius-btn); padding: 8px 10px; background: var(--surface-input); min-width: 220px; } .search svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.6; } .search input { min-width: 0; width: 100%; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 11px; } /* Historical match data pages */ .back-link { padding: 0; border: 0; color: var(--muted); background: transparent; font-size: 11px; font-weight: 700; } .back-link:hover { color: var(--text); } .back-link svg { width: 15px; height: 15px; transform: rotate(180deg); stroke: currentColor; fill: none; stroke-width: 1.7; } .section-note{ text-transform: uppercase; letter-spacing: .08em; } .history-section-head { gap: 12px; margin-bottom: 14px; } .history-section-head .eyebrow { margin-bottom: 6px; } .history-section-head h2 { font-size: 18px; } /* Compact scoreboard view */ .scoreboard-empty { padding: 20px; color: var(--muted); font-size: 11px; } /* Profile */ /* `align-items: start`：左栏只有几行，默认 stretch 会把它拉成和右栏一样高， 于是卡片下半截是一大片空白。侧栏卡片按内容高度收住更像侧栏。 */ .profile-grid { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 16px; align-items: start; } .profile-aside, .panel { min-width: 0; } .profile-avatar-lg { width: 78px; height: 78px; border-radius: var(--radius-lg); object-fit: cover; border: 1px solid var(--line-light); } .profile-avatar-lg.avatar-fallback { font-size: 22px; } .profile-name { margin-top: 16px; font-size: 18px; font-weight: 800; } .profile-handle { color: var(--muted); font: 11px "DM Mono", monospace; margin-top: 4px; } .level-line { margin-top: 20px; color: var(--muted); font-size: 11px; } .level-line strong { color: var(--lime); font: 12px "DM Mono", monospace; } .profile-content { display: grid; gap: 16px; } /* 预测页：左边成绩/勋章/记录，右边「可预测」。和比赛详情用的是同一种两栏 （见 `6-pages-match.css` 的 `.match-detail-layout`），右侧 300px 固定、左栏可收缩。 窄屏塌成一栏的规则在 `8-responsive.css`。 */ .predictions-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; } .predictions-aside { display: grid; gap: 16px; min-width: 0; } .predictable-list { display: grid; gap: 0; padding: 6px 14px; } .predictable-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; text-align: left; } .predictable-row:last-child { border-bottom: 0; } .predictable-row:hover { color: var(--lime); } .predictable-main { display: grid; gap: 3px; min-width: 0; flex: 1 1 auto; } .predictable-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; } .predictable-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 10px; } /* 截止时间是"还有多久"的信息，等宽字体让几个日期能对齐着扫。 */ .predictable-when { flex: 0 0 auto; color: var(--muted-2); font: 10px "DM Mono", monospace; } /* 预测页是单独一栏，没有左栏陪着撑宽度 —— 它跟着内容区走满，因为那一行勋章本来就要横向 铺开，窄下来只会让下面的记录也跟着变窄。（间距与「我的」共用 `.profile-content`。） */ /* ---------- 预测勋章 ---------- * * 金属色（`--medal-*`）与票数条的两段（`--tally-*`）一起定义在 `1-tokens.css` 的 `:root`： * 它们是**插图的材质和数据编码**，不是界面配色，但仍然属于"颜色只有一处定义"这条规则。 * 具体理由写在那边。（曾经把它们放在这个文件里，和令牌分居两处。） */ .medal-shelf { display: flex; gap: 12px; padding: 14px 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); /* 勋章多了就横向滚，不换行：一列勋章比两行更难扫。 */ overflow-x: auto; } /* `display: none` 会让某些浏览器不解析 url(#…) 的引用，所以用零尺寸而不是隐藏。 */ .medal-defs { position: absolute; width: 0; height: 0; overflow: hidden; } .medal-card { position: relative; flex: 0 0 178px; display: grid; justify-items: center; gap: 8px; min-width: 0; padding: 14px 10px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-soft); text-align: center; } .medal-holder { position: relative; width: 84px; height: 84px; } .medal { position: absolute; inset: 0; width: 100%; height: 100%; } /* 名字一行截断：赛事名可以很长，而卡片宽度是固定的。 */ .medal-series { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 700; } .medal-meta { display: flex; align-items: center; gap: 6px; font: 10px "DM Mono", monospace; } .medal-tier { padding: 2px 6px; border-radius: 4px; color: var(--bg); font-weight: 700; } .medal-tier-bronze { background: var(--medal-bronze-mid); } .medal-tier-silver { background: var(--medal-silver-mid); } .medal-tier-gold { background: var(--medal-gold-mid); } .medal-tier-diamond { background: var(--medal-diamond-mid); } .medal-score { color: var(--muted); } /* 5 级管理员 Ctrl+点击切换过的那一枚：换个描边色并打一个"预览"角标 —— 预览出来的金银铜是假的，不能让人当成真实成绩。 */ .medal-card.is-forced { border-color: var(--sky); } .medal-card.is-forced::after { content: "预览"; position: absolute; top: 7px; right: 7px; padding: 1px 5px; border-radius: 4px; background: var(--sky); color: var(--bg); font: 9px "DM Mono", monospace; } /* 悬停浮层：挂在 body 上、固定定位 —— 滚动容器里的绝对定位元素会被裁掉。 */ .medal-tip { position: fixed; z-index: 60; display: grid; gap: 4px; max-width: 260px; padding: 10px 12px; border: 1px solid var(--line-light); border-radius: var(--radius-card); background: var(--panel-raised); box-shadow: var(--shadow); color: var(--muted); font-size: 11px; line-height: 1.5; pointer-events: none; } .medal-tip strong { color: var(--text); font-size: 12px; } .medal-tip-row { display: flex; align-items: center; gap: 6px; } /* 档位标签是中文，别用等宽字体（DM Mono 没有汉字字形，只会回退成另一种字体）。 等宽留给数字 —— 那才是它该在的地方。 */ .medal-tier { font-family: Manrope, "Microsoft YaHei", sans-serif; } .medal-tip-num { color: var(--text); font: 700 11px "DM Mono", monospace; } .medal-tip-forced { color: var(--sky); font: 10px "DM Mono", monospace; } .medal-tip-when { color: var(--muted-2); font: 10px "DM Mono", monospace; } /* 小节标题在卡片**外面**，"我的预测"和"账号资料"两段用同一种写法。 原先一段的标题浮在页面上、另一段嵌在卡片里，同一页两种排版。 `.section-title` 自带的 32px 上边距在这里会和 16px 的栅格间距叠加成 48px， 所以只补 8px，让标题离上面远一点、离自己的内容近一点。 */ .profile-content > .section-title { margin: 8px 0 0; } .profile-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .mini-stat { padding: 16px; } .mini-stat label { display: block; color: var(--muted); font-size: 10px; } .mini-stat strong { display: block; margin-top: 10px; font: 22px "DM Mono", monospace; } /* 「我的预测」列表。整行可点(跳到那场比赛),所以是一串