/** * PPQ 全局排版与颜色（与微信小程序 rpx 刻度对齐） * 网页：--ppq-rpx = min(100vw/750, 640/750) — 大屏/平板字号封顶，避免无限放大 * 深色页：在 上加 data-ppq-theme="dark"，语义色自动切换为浅色字 */ :root { --ppq-rpx: min(calc(100vw / 750), calc(640px / 750)); /* 字号（对应 rpx） */ --ppq-fs-display: calc(48 * var(--ppq-rpx)); --ppq-lh-display: calc(60 * var(--ppq-rpx)); --ppq-fs-page-title: calc(36 * var(--ppq-rpx)); --ppq-lh-page-title: calc(45 * var(--ppq-rpx)); --ppq-fs-module: calc(32 * var(--ppq-rpx)); --ppq-lh-module: calc(40 * var(--ppq-rpx)); --ppq-fs-body: calc(28 * var(--ppq-rpx)); --ppq-lh-body: calc(42 * var(--ppq-rpx)); --ppq-fs-body-sm: calc(26 * var(--ppq-rpx)); --ppq-lh-body-sm: calc(39 * var(--ppq-rpx)); --ppq-fs-caption: calc(24 * var(--ppq-rpx)); --ppq-lh-caption: calc(34 * var(--ppq-rpx)); --ppq-fs-label: calc(22 * var(--ppq-rpx)); --ppq-lh-label: calc(31 * var(--ppq-rpx)); --ppq-fs-mini: calc(20 * var(--ppq-rpx)); --ppq-lh-mini: calc(28 * var(--ppq-rpx)); /* 浅色底主色 */ --ppq-c-text-1: #333333; --ppq-c-text-2: #666666; --ppq-c-text-3: #999999; --ppq-c-text-4: #cccccc; /* 间距 */ --ppq-gap-paragraph: calc(20 * var(--ppq-rpx)); --ppq-gap-section: calc(30 * var(--ppq-rpx)); --ppq-gap-list: calc(18 * var(--ppq-rpx)); } html[data-ppq-theme="dark"] { --ppq-c-text-1: rgba(255, 255, 255, 0.92); --ppq-c-text-2: rgba(255, 255, 255, 0.72); --ppq-c-text-3: rgba(255, 255, 255, 0.55); --ppq-c-text-4: rgba(255, 255, 255, 0.38); } /* ---------- 文档默认（后载覆盖各页内联 body 字号） ---------- */ body { font-size: var(--ppq-fs-body); line-height: var(--ppq-lh-body); color: var(--ppq-c-text-1); } p { font-size: var(--ppq-fs-body); line-height: var(--ppq-lh-body); color: var(--ppq-c-text-1); margin: 0 0 var(--ppq-gap-paragraph); } p:last-child { margin-bottom: 0; } small, .sub { font-size: var(--ppq-fs-caption); line-height: var(--ppq-lh-caption); color: var(--ppq-c-text-3); } h1 { font-size: var(--ppq-fs-page-title); line-height: var(--ppq-lh-page-title); font-weight: 700; color: var(--ppq-c-text-1); } h2 { font-size: var(--ppq-fs-module); line-height: var(--ppq-lh-module); font-weight: 700; color: var(--ppq-c-text-1); } h3 { font-size: var(--ppq-fs-module); line-height: var(--ppq-lh-module); font-weight: 600; color: var(--ppq-c-text-1); } h4 { font-size: var(--ppq-fs-body-sm); line-height: var(--ppq-lh-body-sm); font-weight: 600; color: var(--ppq-c-text-2); } li { font-size: var(--ppq-fs-body-sm); line-height: var(--ppq-lh-body-sm); color: var(--ppq-c-text-1); } label { font-size: var(--ppq-fs-caption); line-height: var(--ppq-lh-caption); color: var(--ppq-c-text-2); } input, select, textarea, button { font-size: var(--ppq-fs-body); line-height: var(--ppq-lh-body); } table { font-size: var(--ppq-fs-body-sm); line-height: var(--ppq-lh-body-sm); color: var(--ppq-c-text-1); } th { font-weight: 600; color: var(--ppq-c-text-2); } td { color: var(--ppq-c-text-1); } /* ---------- 高频类名（与内联样式同权或后载覆盖） ---------- */ .header-title { font-size: var(--ppq-fs-module); line-height: var(--ppq-lh-module); font-weight: 700; color: var(--ppq-c-text-1); } .header-sub, .subtitle { font-size: var(--ppq-fs-label); line-height: var(--ppq-lh-label); color: var(--ppq-c-text-3); } .panel-title, .card-title, .section-title { font-size: var(--ppq-fs-module); line-height: var(--ppq-lh-module); font-weight: 700; color: var(--ppq-c-text-1); } .hint, .help-text { font-size: var(--ppq-fs-caption); line-height: var(--ppq-lh-caption); color: var(--ppq-c-text-3); } .err, .error { font-size: var(--ppq-fs-body-sm); line-height: var(--ppq-lh-body-sm); color: var(--ppq-c-text-2); } /* 计分板等数字区：使用「超大标题」档，避免脱离层级 */ .score, .score-big { font-size: var(--ppq-fs-display); line-height: var(--ppq-lh-display); font-weight: 800; } /* 列表卡片间距 */ .match-list, .list-block { gap: var(--ppq-gap-list); } .container, .page-container, .wrap { margin-bottom: var(--ppq-gap-section); } /* 版权 / 极弱提示 */ .footer-note, .copyright { font-size: var(--ppq-fs-mini); line-height: var(--ppq-lh-mini); color: var(--ppq-c-text-4); } /* 常用按钮 / 入口（与内联字号对齐） */ .back-btn { font-size: var(--ppq-fs-caption); line-height: var(--ppq-lh-caption); } .match-type-btn { font-size: var(--ppq-fs-module); line-height: var(--ppq-lh-module); } .nav-item { font-size: var(--ppq-fs-caption); line-height: var(--ppq-lh-caption); } .player-name { font-size: var(--ppq-fs-module); line-height: var(--ppq-lh-module); } .schedule-table { font-size: var(--ppq-fs-body-sm); line-height: var(--ppq-lh-body-sm); }