/* ========================================================================== 群管后台 Mini App 样式 - 颜色一律走 Telegram 主题变量，并且每个变量都写了 fallback， 这样在普通浏览器里（没有 Telegram 宿主）也能正常看。 - 深色由 控制（app.js 读 Telegram.WebApp.colorScheme 打的标记）， 没有宿主时退化到 prefers-color-scheme。 - 移动端优先，所有可点区域 ≥ 44px。 ========================================================================== */ /* ---------- 主题变量 ---------- */ :root { /* Telegram 变量 + 浅色 fallback */ --bg: var(--tg-theme-bg-color, #ffffff); --text: var(--tg-theme-text-color, #0f0f0f); --hint: var(--tg-theme-hint-color, #66696d); /* 4.93:1 on --surface；原 #707579 只有 4.16 */ --link: var(--tg-theme-link-color, #1f63b8); /* 徽章/名次牌是同色 14% 的浅底，原 #2a78d6 只有 3.70:1 */ --accent: var(--tg-theme-button-color, #2a78d6); --accent-text: var(--tg-theme-button-text-color, #ffffff); /* --accent 用作**文字**颜色，要在页面底色上够亮； --accent-solid 用作**实心底**，上面压白字，要够暗。 两者共用一个值时必有一边不达标（白字压 #2a78d6 只有 4.42:1）。 */ --accent-solid: var(--tg-theme-button-color, #256cc4); --surface: var(--tg-theme-secondary-bg-color, #f1f2f4); --section: var(--tg-theme-section-bg-color, #ffffff); --section-head: var(--tg-theme-section-header-text-color, #66696d); --danger: var(--tg-theme-destructive-text-color, #b02726); /* 危险徽章/提示条都是同色浅底，原 #e34948 只有 3.38:1 */ --header-bg: var(--tg-theme-header-bg-color, var(--tg-theme-bg-color, #ffffff)); /* 派生的中性色（Telegram 没给分隔线变量，自己造，深浅两套） */ --border: rgba(0, 0, 0, .10); --border-strong: rgba(0, 0, 0, .18); --overlay: rgba(0, 0, 0, .40); --track: rgba(120, 120, 128, .22); --ripple: rgba(0, 0, 0, .05); --warn-bg: rgba(237, 161, 0, .14); --warn-text: #8a5a00; --danger-bg: rgba(227, 73, 72, .12); --ok: #12734f; /* ok 徽章上 4.78:1，原 #1baf7a 只有 2.45 */ /* 图表分类色（浅色档），固定按指标分配，不随筛选变化 */ --series-1: #2a78d6; /* 消息 */ --series-2: #eb6834; /* 进群 */ --series-3: #1baf7a; /* 退群 */ --series-4: #eda100; /* 删除 */ --series-5: #e87ba4; /* 禁言 */ --series-6: #008300; /* 踢出 */ --grid: rgba(0, 0, 0, .08); --radius: 12px; --radius-lg: 16px; --tap: 44px; /* 最小触控目标 */ --pad: 16px; --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-top: env(safe-area-inset-top, 0px); --tabbar-h: 58px; color-scheme: light; } /* 深色：Telegram 报的 colorScheme（优先） */ :root[data-scheme="dark"] { --bg: var(--tg-theme-bg-color, #17212b); --text: var(--tg-theme-text-color, #f5f5f5); --hint: var(--tg-theme-hint-color, #8a9aa9); --link: var(--tg-theme-link-color, #62aef5); --accent: var(--tg-theme-button-color, #3987e5); --accent-text: var(--tg-theme-button-text-color, #ffffff); --accent-solid: var(--tg-theme-button-color, #2a70c6); --surface: var(--tg-theme-secondary-bg-color, #0e1621); --section: var(--tg-theme-section-bg-color, #17212b); --danger: var(--tg-theme-destructive-text-color, #ef8080); /* 徽章上 4.86:1，原 #e66767 只有 4.11 */ /* 顶栏底色必须在每套主题里各定义一次。 只在浅色 :root 上定义时，深色下它会退回链尾的 #ffffff —— 结果是白底顶栏配浅色标题，字几乎看不见。 */ --header-bg: var(--tg-theme-header-bg-color, var(--tg-theme-bg-color, #17212b)); --section-head: var(--tg-theme-section-header-text-color, #8a9aa9); --border: rgba(255, 255, 255, .12); --border-strong: rgba(255, 255, 255, .22); --overlay: rgba(0, 0, 0, .60); --track: rgba(160, 170, 185, .28); --ripple: rgba(255, 255, 255, .06); --warn-bg: rgba(201, 133, 0, .20); --warn-text: #f0c257; --danger-bg: rgba(230, 103, 103, .16); --ok: #35c48f; /* 徽章底是同色 14% 叠加，原 #199e70 只有 3.97:1 */ --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181; --series-6: #008300; --grid: rgba(255, 255, 255, .10); color-scheme: dark; } /* 没有 Telegram 宿主时（普通浏览器直接打开），跟随系统 */ @media (prefers-color-scheme: dark) { :root:not([data-scheme="light"]):not([data-scheme="dark"]) { --bg: #17212b; --text: #f5f5f5; --hint: #8a9aa9; --link: #62aef5; --accent: #3987e5; --accent-text: #fff; --accent-solid: #2a70c6; --surface: #0e1621; --section: #17212b; --danger: #ef8080; --header-bg: #17212b; --section-head: #8a9aa9; --border: rgba(255,255,255,.12); --border-strong: rgba(255,255,255,.22); --overlay: rgba(0,0,0,.6); --track: rgba(160,170,185,.28); --ripple: rgba(255,255,255,.06); --warn-bg: rgba(201,133,0,.20); --warn-text: #f0c257; --danger-bg: rgba(230,103,103,.16); --ok: #35c48f; --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181; --series-6: #008300; --grid: rgba(255,255,255,.10); color-scheme: dark; } } /* ---------- 基础 ---------- */ * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { height: 100%; } body { margin: 0; background: var(--surface); color: var(--text); font: 15px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", "Microsoft YaHei", system-ui, sans-serif; overscroll-behavior-y: none; } h1, h2, h3, p, ul, ol { margin: 0; } ul { list-style: none; padding: 0; } button, input, select, textarea { font: inherit; color: inherit; } a { color: var(--link); } :focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 6px; } /* ---------- 加载进度条 ---------- */ .progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60; pointer-events: none; opacity: 0; transition: opacity .2s; } body.is-loading .progress { opacity: 1; } .progress > i { display: block; height: 100%; width: 40%; background: var(--accent); border-radius: 2px; animation: slide 1.1s ease-in-out infinite; } @keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(280%); } } /* ---------- 顶栏 ---------- */ .topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 4px; min-height: 52px; padding: calc(6px + var(--safe-top)) 10px 6px; background: var(--header-bg); border-bottom: 1px solid var(--border); } .topbar__back { flex: 0 0 auto; width: var(--tap); height: var(--tap); display: grid; place-items: center; background: none; border: 0; color: var(--link); border-radius: 50%; } .topbar__back:active { background: var(--ripple); } .topbar__titles { min-width: 0; flex: 1 1 auto; padding: 0 4px; } .topbar__title { font-size: 17px; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar__sub { font-size: 12px; color: var(--hint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar__actions { display: flex; gap: 2px; } .topbar__actions .iconbtn { width: var(--tap); height: var(--tap); } /* ---------- 主体 ---------- */ .view { padding: 12px 0 calc(var(--tabbar-h) + var(--safe-bottom) + 24px); min-height: 60vh; } .view:focus { outline: none; } .wrap { padding: 0 var(--pad); } /* ---------- 底部导航 ---------- */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--bg); border-top: 1px solid var(--border); padding-bottom: var(--safe-bottom); } .tabbar__item { min-height: var(--tabbar-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: none; border: 0; color: var(--hint); font-size: 11px; padding: 6px 2px; } .tabbar__item[aria-current="page"] { color: var(--accent); } .tabbar__item:active { background: var(--ripple); } /* ---------- 通用块 ---------- */ .card { background: var(--section); border-radius: var(--radius-lg); margin: 0 var(--pad) 14px; overflow: hidden; } .card--flush { margin-left: 0; margin-right: 0; border-radius: 0; } .card__head { padding: 14px 16px 8px; } .card__title { font-size: 15px; font-weight: 600; } .card__desc { font-size: 12.5px; color: var(--hint); margin-top: 4px; } .section-label { font-size: 12.5px; font-weight: 600; text-transform: none; color: var(--section-head, var(--hint)); padding: 18px var(--pad) 8px; } .muted { color: var(--hint); } .small { font-size: 12.5px; } .mono { font-variant-numeric: tabular-nums; } .center { text-align: center; } .row { display: flex; align-items: center; gap: 10px; } .row--between { justify-content: space-between; } .grow { flex: 1 1 auto; min-width: 0; } .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stack > * + * { margin-top: 10px; } .hidden { display: none !important; } /* ---------- 按钮 ---------- */ .btn { min-height: var(--tap); padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: var(--radius); background: var(--accent-solid); color: var(--accent-text); font-size: 15px; font-weight: 600; } .btn:disabled { opacity: .5; } .btn:active:not(:disabled) { filter: brightness(.94); } .btn--block { display: flex; width: 100%; } .btn--ghost { background: var(--surface); color: var(--text); } .btn--outline { background: transparent; color: var(--link); border: 1px solid var(--border-strong); } .btn--danger { background: var(--danger-bg); color: var(--danger); } .btn--sm { min-height: 36px; padding: 0 12px; font-size: 13.5px; border-radius: 10px; } .iconbtn { min-width: var(--tap); min-height: var(--tap); display: inline-grid; place-items: center; background: none; border: 0; color: var(--link); border-radius: 50%; } .iconbtn:active { background: var(--ripple); } .iconbtn--muted { color: var(--hint); } /* ---------- 列表行 ---------- */ .list { background: var(--section); border-radius: var(--radius-lg); overflow: hidden; margin: 0 var(--pad) 14px; } .list--flush { margin: 0; border-radius: 0; } .item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: var(--tap); padding: 11px 16px; background: none; border: 0; color: inherit; text-align: left; border-bottom: 1px solid var(--border); } .item:last-child { border-bottom: 0; } button.item:active { background: var(--ripple); } .item__main { min-width: 0; flex: 1 1 auto; } .item__title { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item__sub { font-size: 12.5px; color: var(--hint); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item__side { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; color: var(--hint); } .item__chev { color: var(--hint); opacity: .6; flex: 0 0 auto; } .avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--hint); font-size: 15px; font-weight: 600; } /* ---------- 徽标 ---------- */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 7px; font-size: 11.5px; font-weight: 600; line-height: 1.6; background: var(--surface); color: var(--hint); white-space: nowrap; } .badge--ok { background: rgba(27, 175, 122, .14); color: var(--ok); } .badge--warn { background: var(--warn-bg); color: var(--warn-text); } .badge--danger { background: var(--danger-bg); color: var(--danger); } .badge--accent { background: rgba(42, 120, 214, .14); color: var(--link); } /* ---------- 提示条 ---------- */ .notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius); margin: 0 var(--pad) 14px; background: var(--warn-bg); color: var(--warn-text); font-size: 13px; } .notice--danger { background: var(--danger-bg); color: var(--danger); } .notice__icon { flex: 0 0 auto; margin-top: 1px; } .notice__body { flex: 1 1 auto; min-width: 0; } .notice__title { font-weight: 600; margin-bottom: 2px; } .notice__actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; } /* ---------- 状态：加载 / 空 / 错误 ---------- */ .state { padding: 40px 24px; text-align: center; color: var(--hint); } .state__title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 6px; } .state__desc { font-size: 13px; line-height: 1.55; } .state__actions { margin-top: 16px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .state__icon { color: var(--hint); opacity: .5; margin-bottom: 10px; } .skeleton { background: var(--section); border-radius: var(--radius-lg); margin: 0 var(--pad) 14px; padding: 16px; } .sk-line { height: 12px; border-radius: 6px; background: var(--track); opacity: .5; animation: pulse 1.4s ease-in-out infinite; } .sk-line + .sk-line { margin-top: 10px; } @keyframes pulse { 0%,100% { opacity: .35; } 50% { opacity: .65; } } /* ---------- 概览统计 ---------- */ .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 var(--pad) 4px; } .stats--3 { grid-template-columns: repeat(3, 1fr); } .stat { background: var(--section); border-radius: var(--radius-lg); padding: 14px; display: flex; flex-direction: column; gap: 2px; } .stat__num { font-size: 24px; font-weight: 700; letter-spacing: -.5px; font-variant-numeric: tabular-nums; } .stat__label { font-size: 12px; color: var(--hint); } /* ---------- 群控制台标签栏（横向可滚动） ---------- */ .tabs { position: sticky; top: calc(52px + var(--safe-top)); z-index: 30; display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; padding: 6px var(--pad); background: var(--bg); border-bottom: 1px solid var(--border); scrollbar-width: none; -webkit-overflow-scrolling: touch; } .tabs::-webkit-scrollbar { display: none; } .tabs__btn { flex: 0 0 auto; min-height: 38px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--hint); font-size: 14px; font-weight: 600; white-space: nowrap; } .tabs__btn[aria-selected="true"] { background: var(--surface); color: var(--text); } /* ---------- 配置表单 ---------- */ .sec { background: var(--section); border-radius: var(--radius-lg); margin: 0 var(--pad) 12px; overflow: hidden; } .sec__head { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--tap); padding: 12px 14px; background: none; border: 0; color: inherit; text-align: left; } .sec__head:active { background: var(--ripple); } .sec__title { font-size: 15px; font-weight: 600; } .sec__count { font-size: 12px; color: var(--hint); font-weight: 500; } .sec__arrow { color: var(--hint); transition: transform .18s ease; flex: 0 0 auto; } .sec[data-open="true"] .sec__arrow { transform: rotate(90deg); } .sec__body { padding: 0 14px 6px; } .sec__desc { font-size: 12.5px; color: var(--hint); padding: 0 0 10px; line-height: 1.5; } .sec__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; } /* 子分组 */ .subgroup { border-top: 1px solid var(--border); margin-top: 4px; } .subgroup__head { display: flex; align-items: center; gap: 8px; width: 100%; min-height: var(--tap); padding: 8px 0; background: none; border: 0; color: var(--hint); text-align: left; font-size: 13px; font-weight: 600; } .subgroup__arrow { transition: transform .18s ease; } .subgroup[data-open="true"] .subgroup__arrow { transform: rotate(90deg); } .subgroup__body { padding-bottom: 6px; } /* 单个字段 */ .field { padding: 9px 0; border-top: 1px solid var(--border); } .sec__body > .field:first-child, .subgroup__body > .field:first-child { border-top: 0; } .field__row { display: flex; align-items: center; gap: 12px; min-height: 30px; } .field__labels { flex: 1 1 auto; min-width: 0; } .field__label { font-size: 15px; line-height: 1.35; } .field__help { font-size: 12px; color: var(--hint); margin-top: 3px; line-height: 1.5; } .field__ctrl { flex: 0 0 auto; } .field__error { font-size: 12.5px; color: var(--danger); margin-top: 6px; } .field--dirty .field__label { font-weight: 600; } .field--dirty { position: relative; } .field--dirty::before { content: ""; position: absolute; left: -8px; top: 12px; width: 4px; height: 16px; border-radius: 2px; background: var(--accent); } .field--error .field__label { color: var(--danger); } .field--disabled { opacity: .45; } .field--disabled .field__ctrl { pointer-events: none; } .field--stacked .field__row { flex-direction: column; align-items: stretch; gap: 8px; } .field--stacked .field__ctrl { width: 100%; } /* 开关 */ .switch { flex: 0 0 auto; position: relative; width: 51px; height: 31px; padding: 0; border: 0; border-radius: 16px; background: var(--track); transition: background .18s ease; } .switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s ease; } .switch[aria-checked="true"] { background: var(--accent); } .switch[aria-checked="true"]::after { transform: translateX(20px); } /* 触控区域撑到 44px，视觉仍是 51x31 */ .switch::before { content: ""; position: absolute; inset: -7px -4px; } /* 输入 */ .input, .select, .textarea { width: 100%; min-height: var(--tap); padding: 10px 12px; background: var(--bg); color: var(--text); border: 1px solid var(--border-strong); border-radius: 10px; appearance: none; } .input:focus, .select:focus, .textarea:focus { border-color: var(--accent); outline: none; } .textarea { min-height: 92px; resize: vertical; line-height: 1.5; font-family: inherit; } .textarea--code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; } .input--num { width: 116px; min-width: 116px; text-align: right; font-variant-numeric: tabular-nums; } .select { min-width: 130px; max-width: 62vw; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 14px center, right 9px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .field--error .input, .field--error .select, .field--error .textarea { border-color: var(--danger); } .hintline { font-size: 12px; color: var(--hint); margin-top: 6px; } /* 底部悬浮保存条 */ .savebar { position: fixed; left: 0; right: 0; z-index: 46; bottom: calc(var(--tabbar-h) + var(--safe-bottom)); padding: 10px var(--pad) calc(10px); background: linear-gradient(to top, var(--bg) 62%, transparent); /* 藏起来时必须真的看不见。 只用 translateY(140%) 是不够的：140% 是相对**自身高度**算的，而这个条的 bottom 已经被顶到了底部导航之上，往下挪一个多身位刚好落在导航栏上， 结果就是「没有改动时，一条写着『保存 0 项改动』的灰条压住底部导航」。 所以额外加 visibility + opacity，位移只负责动效。 */ transform: translateY(140%); opacity: 0; visibility: hidden; transition: transform .22s ease, opacity .18s ease, visibility 0s linear .22s; pointer-events: none; } .savebar[data-show="true"] { transform: none; opacity: 1; visibility: visible; transition: transform .22s ease, opacity .18s ease, visibility 0s; pointer-events: auto; } .savebar .btn { box-shadow: 0 6px 20px rgba(0,0,0,.18); } /* ---------- 白/黑名单开关、子标签（触控目标 44px） ---------- */ .flagbtn { min-height: var(--tap); min-width: var(--tap); padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 11px; background: transparent; color: var(--hint); font-size: 13.5px; font-weight: 600; } .flagbtn:active { background: var(--ripple); } .flagbtn:disabled { opacity: .45; } .flagbtn[aria-pressed="true"] { background: var(--surface); color: var(--text); border-color: transparent; } .flagbtn--w[aria-pressed="true"] { background: rgba(27, 175, 122, .16); color: var(--ok); border-color: transparent; } .flagbtn--b[aria-pressed="true"] { background: var(--danger-bg); color: var(--danger); border-color: transparent; } /* ---------- 搜索框 ---------- */ .search { position: relative; padding: 0 var(--pad) 12px; } .search__icon { position: absolute; left: calc(var(--pad) + 11px); top: 12px; color: var(--hint); pointer-events: none; } .search .input { padding-left: 38px; border-radius: 12px; } /* ---------- 图表 ---------- */ .chartcard { background: var(--section); border-radius: var(--radius-lg); margin: 0 var(--pad) 14px; padding: 14px 12px 10px; } .chart { position: relative; touch-action: pan-y; } .chart svg { display: block; width: 100%; height: auto; overflow: visible; } .chart__grid { stroke: var(--grid); stroke-width: 1; } .chart__axis { fill: var(--hint); font-size: 9.5px; font-variant-numeric: tabular-nums; } .chart__line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .chart__dot { stroke: var(--section); stroke-width: 1.5; } .chart__cursor { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 3; } .chart__hit { fill: transparent; } .chart__tip { position: absolute; z-index: 5; top: 0; min-width: 92px; padding: 7px 10px; background: var(--bg); color: var(--text); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.16); font-size: 12px; pointer-events: none; transform: translateX(-50%); } .chart__tip b { font-size: 15px; font-variant-numeric: tabular-nums; display: block; margin-top: 2px; } .metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 var(--pad) 12px; } .metric { background: var(--section); border: 1px solid transparent; border-radius: var(--radius); padding: 10px 10px 6px; min-height: var(--tap); display: flex; flex-direction: column; gap: 2px; text-align: left; } .metric[aria-pressed="true"] { border-color: currentColor; } .metric__label { font-size: 11.5px; color: var(--hint); display: flex; align-items: center; gap: 5px; } .metric__swatch { width: 8px; height: 8px; border-radius: 2px; background: currentColor; flex: 0 0 auto; } .metric__num { font-size: 18px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .metric__spark { margin-top: 2px; height: 20px; } .metric__spark svg { display: block; width: 100%; height: 20px; } /* 数据表（图表的无障碍/取值备份视图） */ .datatable { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; } .datatable th, .datatable td { padding: 7px 6px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; } .datatable th:first-child, .datatable td:first-child { text-align: left; } .datatable th { color: var(--hint); font-weight: 600; } .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ---------- 底部弹窗 ---------- */ .sheet__mask { position: fixed; inset: 0; z-index: 70; background: var(--overlay); } .sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; max-height: 82vh; overflow-y: auto; background: var(--bg); border-radius: 18px 18px 0 0; padding-bottom: calc(12px + var(--safe-bottom)); animation: sheet-in .22s ease; } @keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } } .sheet__head { position: sticky; top: 0; background: var(--bg); padding: 14px 16px 10px; border-bottom: 1px solid var(--border); } .sheet__title { font-size: 16px; font-weight: 600; } .sheet__body { padding: 8px 0; } .sheet__grab { width: 36px; height: 4px; border-radius: 2px; background: var(--track); margin: 8px auto 0; } /* ---------- toast ---------- */ .toast-root { position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 16px); z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; } .toast { max-width: 86vw; padding: 10px 16px; border-radius: 20px; background: rgba(20, 20, 22, .92); color: #fff; font-size: 13.5px; box-shadow: 0 6px 20px rgba(0,0,0,.25); animation: toast-in .2s ease; } .toast--danger { background: var(--danger); } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ---------- 分页 ---------- */ .more { padding: 12px var(--pad) 4px; } /* ========================================================================== 阶段 2：积分 / 活动 / 运营 / 日报 ========================================================================== */ /* hidden 属性要能压过 .row 这类 display:flex（表单里按模式切换字段靠它） */ [hidden] { display: none !important; } /* ---------- 名次 ---------- */ .rank { flex: 0 0 auto; min-width: 24px; height: 24px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 8px; background: var(--surface); color: var(--hint); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; } /* 前三名加一点分量，第一名直接反白 —— 不用奖杯之类的装饰件 */ .rank--top { background: rgba(42, 120, 214, .14); color: var(--link); } .rank--1 { background: var(--accent-solid); color: var(--accent-text); } .item--hero { background: linear-gradient(90deg, rgba(42, 120, 214, .07), transparent 62%); } :root[data-scheme="dark"] .item--hero { background: linear-gradient(90deg, rgba(57, 135, 229, .14), transparent 62%); } @media (prefers-color-scheme: dark) { :root:not([data-scheme="light"]):not([data-scheme="dark"]) .item--hero { background: linear-gradient(90deg, rgba(57, 135, 229, .14), transparent 62%); } } .points { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); } .points--hero { font-size: 19px; font-weight: 700; } .delta { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--hint); } .delta--up { color: var(--ok); } .delta--down { color: var(--danger); } /* 一行里除了 .item 还挂了别的块（种子框等）时用它包一层 */ .item-group { border-bottom: 1px solid var(--border); } .item-group:last-child { border-bottom: 0; } .item-group > .item { border-bottom: 0; } /* ---------- 进度条 ---------- */ .bar { position: relative; height: 8px; border-radius: 5px; background: var(--track); overflow: hidden; } .bar__fill { display: block; height: 100%; border-radius: 5px; background: var(--accent); transition: width .25s ease; } .progressline { display: flex; align-items: center; gap: 10px; margin: 8px 0 6px; } .progressline .bar { flex: 1 1 auto; } .progressline__num { flex: 0 0 auto; } /* ---------- 抽奖种子 ---------- */ .seedwrap { padding: 0 16px 14px; } .seedwrap__label { margin-bottom: 4px; } .seedbox { padding: 8px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; word-break: break-all; user-select: all; -webkit-user-select: all; } /* ---------- 子标签（分段控件） ---------- 日志页有 4 个子标签，窄屏（320px）一行放不下 —— 允许换行， 宁可占两行也不要把「处罚记录」压成「处罚记…」。 */ .segmented { gap: 8px; padding-bottom: 12px; flex-wrap: wrap; } .segmented .flagbtn { flex: 1 1 auto; min-width: 76px; } /* 子标签的选中态要比未选中**更**显眼。 继承自 .flagbtn 的默认样式是反的：选中反而去掉边框、填一个和周围几乎同色的底， 看上去像「没选中的那两个才是按钮」。深色下尤其明显，因为 --surface 比卡片还暗。 */ .segmented .flagbtn[aria-pressed="true"] { background: var(--accent-solid); color: var(--accent-text); border-color: transparent; } /* ---------- 弹窗里的表单行 ---------- */ .formrow { display: block; } .formrow__label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; } .formrow__help { font-size: 12px; color: var(--hint); margin-top: 6px; line-height: 1.5; } .formrow--error .input, .formrow--error .select, .formrow--error .textarea { border-color: var(--danger); } /* 快捷分值 */ .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { flex: 1 1 auto; min-width: 64px; min-height: var(--tap); padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 11px; background: transparent; color: var(--text); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; } .chip:active { background: var(--ripple); } .iconbtn--danger { color: var(--danger); } .iconbtn:disabled { opacity: .45; } /* ---------- 自绘确认框（宿主没有 showConfirm 时用） ---------- */ .confirm__mask { position: fixed; inset: 0; z-index: 80; background: var(--overlay); } .confirm { position: fixed; z-index: 81; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 340px); padding: 18px 18px 14px; background: var(--bg); color: var(--text); border-radius: var(--radius-lg); box-shadow: 0 18px 46px rgba(0, 0, 0, .34); animation: confirm-in .16s ease; } @keyframes confirm-in { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } } .confirm__title { font-size: 16px; font-weight: 700; margin-bottom: 8px; } .confirm__msg { font-size: 14px; line-height: 1.55; color: var(--text); white-space: pre-wrap; } .confirm__actions { display: flex; gap: 10px; margin-top: 18px; } /* ---------- 横向条形图（日报里的处罚原因分布） ---------- */ .hbars { display: flex; flex-direction: column; gap: 12px; } .hbar__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 5px; } .hbar__label { flex: 1 1 auto; min-width: 0; font-size: 13px; } .hbar__val { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--hint); } /* ---------- 日报里的「前 N 名」小榜 ---------- */ .toplist { display: flex; flex-direction: column; } .toplist__row { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 5px 0; border-top: 1px solid var(--border); font-size: 14px; } .toplist__row:first-child { border-top: 0; } .avatar--sm { width: 28px; height: 28px; font-size: 12.5px; } /* ========================================================================== 阶段 3：选人弹窗 / 处罚撤销 / 申诉 / 处罚统计 ========================================================================== */ /* ---------- 叠层弹窗 ---------- 选人弹窗经常从别的弹窗（加减分、批量撤销）里打开，必须压在它上面； 层级排在普通弹窗（70/71）之上、自绘确认框（80/81）之下。 */ .sheet__mask--stack { z-index: 74; } .sheet--stack { z-index: 75; } /* ---------- 选人弹窗 ---------- */ .picker__hint { margin: 0 0 10px; } .picker__search { position: sticky; top: 0; z-index: 2; background: var(--bg); padding-top: 2px; } /* 「直接使用 ID: 123」那条候选项，和搜索结果拉开一点距离 */ .picker__raw { margin-bottom: 8px; } .picker__raw .item { background: var(--surface); } /* 触发选人弹窗的按钮：长得像输入框，但点开的是列表 */ .picker-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--tap); padding: 8px 12px; background: var(--bg); color: var(--text); text-align: left; border: 1px solid var(--border-strong); border-radius: 10px; } .picker-btn:active { background: var(--ripple); } .picker-btn__icon { flex: 0 0 auto; color: var(--hint); display: grid; place-items: center; } .picker-btn__main { flex: 1 1 auto; min-width: 0; } .picker-btn__name { display: block; font-size: 15px; } .picker-btn__sub { display: block; font-size: 12px; margin-top: 1px; } .picker-btn__chev { flex: 0 0 auto; color: var(--hint); opacity: .6; display: grid; place-items: center; } .formrow--error .picker-btn { border-color: var(--danger); } /* ---------- 弹窗里的分段控件不要再吃一层左右边距 ---------- */ .stack > .segmented, .sheet__body .wrap > .segmented { padding-left: 0; padding-right: 0; } /* ---------- 功能面板（批量撤销入口） ---------- */ .panel { background: var(--section); border-radius: var(--radius-lg); margin: 0 var(--pad) 14px; padding: 14px 16px 14px; } .panel__icon { flex: 0 0 auto; color: var(--hint); display: grid; place-items: center; } .panel__title { font-size: 15px; font-weight: 600; } .panel__desc { font-size: 12.5px; color: var(--hint); line-height: 1.55; margin-top: 6px; } .panel__actions { margin-top: 12px; } /* ---------- 弹窗里「要动的就是这一条」的回顾卡 ---------- */ .reviewcard { background: var(--surface); border-radius: var(--radius); padding: 12px 14px; line-height: 1.5; } .breakword { overflow-wrap: anywhere; word-break: break-word; } /* 一行说明 + 右侧开关 */ .switchrow { gap: 12px; align-items: center; } .switchrow .hintline { margin-top: 3px; } /* 列表行右侧的按钮（撤销）：btn--sm 只有 36px，触控目标撑回 44px */ .item__side .btn { min-height: var(--tap); } /* ---------- 已撤销的处罚行 ---------- */ .item--revoked .item__title, .item--revoked .small, .item--revoked .item__sub { color: var(--hint); } /* 只靠变灰不够（灰在深色下不明显），标题上再划一道 */ .item--revoked .small.ellipsis { text-decoration: line-through; text-decoration-color: var(--border-strong); } /* ---------- 申诉 ---------- */ /* 申诉内容是多行自由文本，行高要撑开，不能沿用单行省略号那套 */ .item--stacked { align-items: flex-start; } .appeal__reason { margin: 8px 0 6px; padding: 9px 11px; background: var(--surface); border-radius: 10px; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; /* 保留申诉人自己敲的换行 */ overflow-wrap: anywhere; /* 一长串没有空格的字符不撑破布局 */ word-break: break-word; } .reviewcard .appeal__reason { background: var(--bg); margin-bottom: 0; } .appeal__ref { font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; } .appeal__note { margin-top: 6px; font-size: 12.5px; line-height: 1.5; padding-left: 9px; border-left: 2px solid var(--border-strong); overflow-wrap: anywhere; word-break: break-word; } .appeal__actions { display: flex; gap: 8px; margin-top: 12px; } .appeal__actions .btn { min-height: var(--tap); } /* 触控目标不因为 btn--sm 缩到 36px */ /* ---------- 处罚统计 ---------- */ .notice--info { background: rgba(42, 120, 214, .12); color: var(--link); } :root[data-scheme="dark"] .notice--info { background: rgba(57, 135, 229, .16); } @media (prefers-color-scheme: dark) { :root:not([data-scheme="light"]):not([data-scheme="dark"]) .notice--info { background: rgba(57, 135, 229, .16); } } .notice--info .notice__body { color: var(--text); } .notice--info .notice__title { color: var(--link); } .datatable td .tag-hot { margin-left: 8px; vertical-align: middle; } .datatable .rate { font-weight: 600; } /* 误伤高发的行用警示色整行标出（同时挂了「误伤高发」文字标记，不只靠颜色） */ .datatable tr.is-hot td { background: var(--warn-bg); } .datatable tr.is-hot .rate--hot { color: var(--warn-text); } .datatable tr.is-hot td:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; } .datatable tr.is-hot td:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; } /* ========================================================================== 阶段 4：广告市场（投放 / 广告位 / 目录） 颜色一律走 -- token：--accent 是**文字**色，--accent-solid 才是实心底。 ========================================================================== */ /* ---------- 额度卡 ---------- */ .credit { background: var(--section); border-radius: var(--radius-lg); margin: 0 var(--pad) 14px; padding: 16px; } .credit__label { font-size: 12.5px; color: var(--hint); } .credit__num { font-size: 32px; font-weight: 700; letter-spacing: -.6px; line-height: 1.15; font-variant-numeric: tabular-nums; margin-top: 2px; } .credit__sub { font-size: 12.5px; color: var(--hint); margin-top: 4px; } .credit__icon { flex: 0 0 auto; color: var(--accent); opacity: .85; } .credit__actions { display: flex; gap: 10px; margin-top: 14px; } .credit__actions .btn { flex: 1 1 0; min-width: 0; } /* ---------- 广告卡 / 广告位卡 / 目录卡 ---------- */ .adcard { background: var(--section); border-radius: var(--radius-lg); margin: 0 var(--pad) 12px; padding: 14px 16px; } .adcard--dim { opacity: .62; } /* 待确认的订单要一眼看见，左边加一道强调色 */ .adcard--pending { border-left: 3px solid var(--accent); } .adcard__head { display: flex; align-items: flex-start; gap: 10px; } .adcard__title { font-size: 15px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; word-break: break-word; } .adcard__meta { font-size: 12.5px; color: var(--hint); margin-top: 5px; line-height: 1.5; } .adcard__link { margin-top: 8px; overflow-wrap: anywhere; word-break: break-all; } .adcard__side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .adcard__actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; } /* btn--sm 只有 36px，触控目标撑回 44px */ .adcard__actions .btn { flex: 1 1 auto; min-width: 92px; min-height: var(--tap); } .adcard__actions .hintline { flex: 1 1 100%; margin-top: 0; } /* ---------- 用户填的多行文本（广告正文、群简介、位说明） ---------- 正文可能是几百字、也可能是一长串没有空格的字符，两种都不能撑破卡片。 */ .textblock { margin-top: 10px; padding: 10px 12px; background: var(--surface); border-radius: 10px; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; /* 保留广告主自己敲的换行 */ overflow-wrap: anywhere; word-break: break-word; } /* 列表里的预览截三行；待确认的订单**不加**这个类，正文必须看得全 */ .textblock--clamp { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; } /* ---------- 驳回理由 / 失败原因 ---------- 这是告诉用户「哪里不合规」的唯一途径，所以整块用危险色摊开，不折叠不截断。 */ .reject { margin-top: 10px; padding: 11px 13px; border-radius: var(--radius); background: var(--danger-bg); font-size: 13px; line-height: 1.55; } .reject__title { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--danger); margin-bottom: 5px; } .reject__body { color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; } /* ---------- 价格 ---------- */ .price { flex: 0 0 auto; white-space: nowrap; font-size: 18px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .price--sm { font-size: 14px; font-weight: 600; } .price__unit { font-size: 11.5px; font-weight: 600; color: var(--hint); margin-left: 3px; } /* ---------- 今日接单进度 ---------- */ .capline { margin-top: 10px; } .capline .bar { margin-top: 5px; } /* ---------- 标签 ---------- */ .taglist { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } /* 可多选的标签筛选条（横向滚动，触控目标 44px） */ .tagbar { display: flex; gap: 8px; overflow-x: auto; padding: 0 var(--pad) 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .tagbar::-webkit-scrollbar { display: none; } .tag { flex: 0 0 auto; min-height: var(--tap); padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-strong); border-radius: 999px; background: transparent; color: var(--text); font-size: 13.5px; font-weight: 600; white-space: nowrap; } .tag:active { background: var(--ripple); } .tag[aria-pressed="true"] { background: var(--accent-solid); color: var(--accent-text); border-color: transparent; } .tag__count { font-variant-numeric: tabular-nums; opacity: .7; font-weight: 500; } /* ---------- 没有数据时的占位数字 ---------- 「暂无数据」是文字不是数字，不要沿用 28px 粗体的数值样式。 */ .stat__num--na { font-size: 15px; font-weight: 600; color: var(--hint); letter-spacing: 0; } /* 收入曲线只有两个指标 */ .metrics--2 { grid-template-columns: repeat(2, 1fr); } /* 开关请求还没回来时禁用，避免连点把状态点乱 */ .switch:disabled { opacity: .5; } @media (min-width: 620px) { .stats { grid-template-columns: repeat(3, 1fr); } .metrics { grid-template-columns: repeat(6, 1fr); } /* 收入曲线只有两个指标，宽屏下也别被拉成 1/6 */ .metrics--2 { grid-template-columns: repeat(2, 1fr); } body { max-width: 720px; margin: 0 auto; } .tabbar { max-width: 720px; margin: 0 auto; } .savebar { max-width: 720px; margin: 0 auto; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* 带图广告的提醒：语气比"驳回"轻，但仍要显眼 —— 它告诉群主"你没看全" */ .reject--soft { background: var(--warn-bg); color: var(--warn-text); border-color: transparent; }