/* ===================================================================== * SGLV 基础能力层(10 库合并) * 由 script_libs 下 10 个单库文件按原 @require 顺序合并而来。 * 各库均为自包含 IIFE,按序拼接即等价于逐个 @require 加载。 * 单库源码已删除;如需拆回,按各分段头注释切分即可。 * ===================================================================== */ /* ---------- sglv-core.lib.js ---------- */ // ==UserScript== // @name SGLV Core Library (SGLV-Suite) // @name:en SGLV Core Library (SGLV-Suite) // @namespace https://greasyfork.org/scripts/588485 // @version 2.0.5 // @description SGLV 核心依赖库(v1.0.6):跨脚本复用的基础设施工具集。包含 NS 命名空间、IndexedDB KV 持久化、负缓存、StageProgress 多阶段进度条、makeThrottledProgress 节流、concurrentPool 智能并发池(429 降并发 + 指数退避)、twoPhaseFetch 两阶段批量抓取、fillPendingSlots 占位、gmFetchJson/gmFetchText GM_xmlhttpRequest 包装、PersistentComputeCache 持久化计算缓存。v1.0.5 gmFetch 状态码语义化:确定性 4xx(404/401 等)立即失败不再重试(防 404 重试风暴),瞬态错误(403/429/5xx)按退避重试,403/429 解析 x-ratelimit-remaining/reset 响应头并在错误信息中携带剩余额度;新增 parseRateLimitHeaders 与 notifyNetFail(60s 节流的终态失败系统通知,需宿主 @grant GM_notification)。v1.0.6 参数扩展:gmFetchText 支持 options.headers 透传(与 gmFetchJson 对齐,如商店页年龄验证 Cookie);gmFetchJson 新增 options.onHttpError(status, responseText) 可选回调(非 2xx 时提取响应体详情自定义错误消息,如 AI 端点提取 error.message)。均向后兼容,不传新参数时行为与 1.0.5 完全一致。供主脚本 @require 引用,不可单独使用。 // @description:en SGLV Core Library v1.0.6 — Cross-script infrastructure: NS namespace, IndexedDB KV, neg cache, StageProgress, throttled progress, smart concurrentPool (429 backoff), twoPhaseFetch, fillPendingSlots, GM fetch wrappers, PersistentComputeCache. **v1.0.5** HTTP status semantics: deterministic 4xx (404/401) fail fast without retry (anti 404-retry-storm); transient errors (403/429/5xx) retry with backoff; 403/429 parse x-ratelimit headers into error message. New parseRateLimitHeaders + notifyNetFail (throttled 60s final-failure notification, host must @grant GM_notification). **v1.0.6** options: gmFetchText headers passthrough (aligned with gmFetchJson, e.g. store page age-gate Cookie); gmFetchJson onHttpError(status, responseText) optional callback (custom error message from response body on non-2xx, e.g. AI endpoint error.message). Both backward compatible. For host script @require only. // @author hshow // @license MIT // @match *://*/* // @grant GM_xmlhttpRequest // @noframes // ==/UserScript== /* * SGLV Core Library v1.0.0 * * 设计目标:从 SGLV 业务脚本中抽出"零业务依赖"的基础设施工具, * 供所有 SGLV 系列脚本(steam-game-library-viewer / wishlist / badges / economy / family ...) * 通过 @require 共享,避免每次新脚本都重写一遍 IDB/进度/并发/负缓存。 * * API 暴露方式:window.SGLVCore (IIFE 直接挂全局,无依赖注入) * * 设计原则: * 1. 零业务依赖 — 不引入任何 Steam / GM 业务概念,纯工具 * 2. GM_* 兼容 — gmFetchJson / gmFetchText 用 GM_xmlhttpRequest(脚本侧); * 测试侧可注入 mockGmXhr 覆盖 * 3. IDB 兼容 — 全部走原生 indexedDB;测试侧可注入 mockIdb 覆盖 * 4. DOM 兼容 — StageProgress 依赖 document;测试侧用 jsdom * 5. 渐进式破坏 — API 内部 try/catch 兜底,任何一步失败不影响宿主 * * 桥接契约(测试/宿主需要注入): * window.__sglvCoreMockIdb = { DB_NAME, STORE, open, ... } 可选,默认走原生 indexedDB * window.__sglvCoreMockGmXhr = function(method, url, opts, cb) 可选,默认走 GM_xmlhttpRequest * * API: * version: '1.0.3' * apiVersion: 1 * NS: 'sglv' * nsKey(...parts): 拼接命名空间 key * IDB: { loadAll, get, set, remove, has, keys } 内存镜像 + IDB 异步写 * negCache: { get, set, clear } 通用负缓存(30min TTL,封装在调用方) * StageProgress: { ensure, setStage, setProgress, finish, fail, hide, show } * makeThrottledProgress(onProgress, throttleMs=800): 节流的 onProgress * concurrentPool(tasks, concurrency, onProgress): 智能并发池(429 降并发 + 指数退避) * twoPhaseFetch(items, fastFn, carefulFn, options): 两阶段批量抓取 * fillPendingSlots(items, max=6, pendingMarker): pending slot 占位 * gmFetchJson(url, options): GM_xmlhttpRequest JSON 包装(重试) * gmFetchText(url, options): GM_xmlhttpRequest 文本包装(重试) * ensureCacheVersions(defaultVersions): 缓存 schema 版本号升级工具 * **v1.0.3 NEW** PersistentComputeCache: { getOrCompute, getSync, has, invalidate, invalidateByInput, clear, hydrate } * 持久化计算缓存(IDB+内存镜像+输入签名+schema版本号) */ (function (root) { 'use strict'; // ==================== 1. NS 命名空间 ==================== // 所有 GM key / IDB key 统一前缀,便于重命名 / 拆分 / 合并 const NS = 'sglv'; const nsKey = (...parts) => [NS, ...parts].join('_'); // ==================== 2. IndexedDB KV 库 ==================== // 替代 GM_setValue 大对象,容量无 5MB 限制,启动更快 // 设计参考 steam-friend-manager-1.2.2:48-150 const sglvIDB = (function () { const DB_NAME = 'sglv_kv', STORE = 'kv', VERSION = 1; let _db = null; const _mem = {}; // 内存镜像:key → value let _loaded = false; const _writing = new Set(); // 正在写 IDB 的 key 集合(防抖) function open() { return new Promise((resolve, reject) => { const idb = root.indexedDB; if (!idb) { reject(new Error('indexedDB unavailable')); return; } const req = idb.open(DB_NAME, VERSION); req.onerror = () => reject(req.error); req.onsuccess = () => { _db = req.result; resolve(_db); }; req.onupgradeneeded = e => { if (!e.target.result.objectStoreNames.contains(STORE)) { e.target.result.createObjectStore(STORE); } }; }); } function loadAll() { if (_loaded) return Promise.resolve(_mem); return open().then(() => new Promise(resolve => { const tx = _db.transaction(STORE, 'readonly'); const req = tx.objectStore(STORE).openCursor(); req.onsuccess = () => { const c = req.result; if (c) { _mem[c.key] = c.value; c.continue(); } else { _loaded = true; resolve(_mem); } }; req.onerror = () => { _loaded = true; resolve(_mem); }; })); } function get(key, fallback) { return _mem[key] !== undefined ? _mem[key] : fallback; } function set(key, val) { _mem[key] = val; if (!_db) return; if (_writing.has(key)) return; // 防抖:避免重复写 _writing.add(key); const tx = _db.transaction(STORE, 'readwrite'); tx.objectStore(STORE).put(val, key); tx.oncomplete = () => _writing.delete(key); tx.onerror = () => _writing.delete(key); } function remove(key) { delete _mem[key]; if (!_db) return; const tx = _db.transaction(STORE, 'readwrite'); tx.objectStore(STORE).delete(key); } function has(key) { return _mem[key] !== undefined; } function keys() { return Object.keys(_mem); } return { loadAll, get, set, remove, has, keys }; })(); // ==================== 3. 负缓存 ==================== // 失败结果短期不再重试(TTL 由调用方控制,常见 30min) // 设计参考 steam-friend-manager fetchGameZhName 负缓存模式 const negCache = { get(key, ttlMs) { const v = sglvIDB.get(key, null); if (!v || v._ok !== false) return null; if (Date.now() - (v._ts || 0) > ttlMs) return null; return v._err || true; }, set(key, err) { sglvIDB.set(key, { _ok: false, _err: err, _ts: Date.now() }); }, clear(key) { sglvIDB.remove(key); }, }; // ==================== 4. 缓存 schema 版本号工具 ==================== // 升级时自动失效旧版本缓存(调用方传入默认 version map) // 设计参考 steam-friend-manager-1.2.2:1675-1680 MUTUAL_CACHE_VERSION const CACHE_VER_KEY = nsKey('cache_versions'); function ensureCacheVersions(defaultVersions) { const versions = defaultVersions || {}; const cur = sglvIDB.get(CACHE_VER_KEY, {}) || {}; const updates = {}; let changed = false; for (const [name, ver] of Object.entries(versions)) { if ((cur[name] || 0) < ver) { updates[name] = ver; changed = true; } } if (changed) sglvIDB.set(CACHE_VER_KEY, { ...cur, ...updates }); return updates; // 返回"已升级的 cache 名称集合" } // ==================== 4.5 v1.0.3: 持久化计算缓存 ==================== // 解决"大批量计算结果无法跨 session 复用"的问题: // - IDB 持久化:计算结果写入 IndexedDB,关闭浏览器后下次启动仍可用 // - 输入签名:每个缓存 key 关联一个"输入指纹"(games count + 关键字段 hash), // 数据源变更时自动失效(避免渲染陈旧数据) // - schema 版本:业务 schema 升级时强制全部失效 // - 同步预热:getSync() 同步返回当前内存镜像(0 延迟),启动流程可同步填充 KPI // - 细粒度失效:invalidateByInput(predicate) 按输入签名谓词批量失效 // // 典型使用: // // 1) 启动时同步预热 — 已有缓存直接填充,无则返回 null(不触发重算) // const cached = PCC.getSync('yearly_stats'); // if (cached) state.yearlyStats = cached; // // // 2) 渲染时按需计算 — 命中 IDB 跳过,未命中异步重算 // async function getYearlyStats(games) { // const sig = `${games.length}|${games.reduce((s,g)=>s+(g.acquiredTime||0),0)}`; // return PCC.getOrCompute('yearly_stats', 1, sig, () => computeYearly(games)); // } // // // 3) 数据刷新时 — 失效旧缓存 // PCC.invalidate('yearly_stats'); const PersistentComputeCache = (function () { const STORE_KEY_PREFIX = 'pcc_'; const _mem = {}; // { [key]: { _sig, _ver, value, _ts } } const _writing = new Set(); // 防抖:同 key 短时间内多次写合并 const _writeTimers = new Map(); function _strip(key) { return key.startsWith(STORE_KEY_PREFIX) ? key.slice(STORE_KEY_PREFIX.length) : key; } function _now() { return Date.now(); } // 同步获取当前缓存(已 hydrate 完成后),不触发任何异步操作 // 启动流程可同步读取,0 延迟填充 UI function getSync(key) { const entry = _mem[key]; if (!entry) return null; return entry.value; } // 同步获取带元数据({ value, _sig, _ver, _ts }),便于业务层做输入签名匹配 function getSyncWithMeta(key) { const entry = _mem[key]; if (!entry) return null; return { value: entry.value, _sig: entry._sig, _ver: entry._ver, _ts: entry._ts }; } function has(key) { return _mem[key] !== undefined; } // 同步写入内存(不落盘) — 启动 hydrate 时使用 function _setMemOnly(key, value, sig, ver) { _mem[key] = { _sig: sig, _ver: ver, value, _ts: _now() }; } // 异步落盘(防抖 100ms 合并同 key 多次写) function _flush(key) { const entry = _mem[key]; if (!entry) return; // 直接走 sglvIDB(继承其 _writing 防抖 + IDB 异步写) sglvIDB.set(STORE_KEY_PREFIX + key, { _sig: entry._sig, _ver: entry._ver, value: entry.value, _ts: entry._ts, }); } // 核心:获取或异步计算 // key: 业务唯一 key // schemaVer: 业务 schema 版本号,变更时强制重算 // inputSig: 输入签名(调用方负责计算,如 "123|456") // computeFn: 缓存未命中时执行的计算函数(同步/异步均可) // 返回:Promise async function getOrCompute(key, schemaVer, inputSig, computeFn) { // 1) 内存命中 + 输入签名一致 + schema 版本匹配 → 直接返回 const mem = _mem[key]; if (mem && mem._ver === schemaVer && mem._sig === inputSig) { return mem.value; } // 2) IDB 命中(可能 hydrate 未完成,这里读 IDB 兜底) try { const persisted = sglvIDB.get(STORE_KEY_PREFIX + key, null); if (persisted && persisted._ver === schemaVer && persisted._sig === inputSig) { _mem[key] = { _sig: inputSig, _ver: schemaVer, value: persisted.value, _ts: persisted._ts || _now() }; return persisted.value; } } catch (e) { /* IDB 读取失败,继续重算 */ } // 3) 未命中:执行计算 + 写入 const value = await computeFn(); _mem[key] = { _sig: inputSig, _ver: schemaVer, value, _ts: _now() }; // 防抖落盘(100ms 内同 key 多次写合并) if (_writeTimers.has(key)) clearTimeout(_writeTimers.get(key)); _writeTimers.set(key, setTimeout(() => { _writeTimers.delete(key); _flush(key); }, 100)); return value; } // 同步变体 — 适用于"已 hydrate 但用户同步访问"场景 // 若内存有则返回,无则同步执行 computeFn 并落盘 function getOrComputeSync(key, schemaVer, inputSig, computeFn) { const mem = _mem[key]; if (mem && mem._ver === schemaVer && mem._sig === inputSig) return mem.value; const value = computeFn(); _mem[key] = { _sig: inputSig, _ver: schemaVer, value, _ts: _now() }; if (_writeTimers.has(key)) clearTimeout(_writeTimers.get(key)); _writeTimers.set(key, setTimeout(() => { _writeTimers.delete(key); _flush(key); }, 100)); return value; } // 直接设置值(已有计算结果时,跳过 compute 步骤) function set(key, schemaVer, inputSig, value) { _mem[key] = { _sig: inputSig, _ver: schemaVer, value, _ts: _now() }; if (_writeTimers.has(key)) clearTimeout(_writeTimers.get(key)); _writeTimers.set(key, setTimeout(() => { _writeTimers.delete(key); _flush(key); }, 100)); } // 失效单个 key function invalidate(key) { delete _mem[key]; sglvIDB.remove(STORE_KEY_PREFIX + key); } // 失效所有 key function clear() { const keys = Object.keys(_mem); for (const k of keys) sglvIDB.remove(STORE_KEY_PREFIX + k); for (const k of keys) delete _mem[k]; } // 批量失效:按输入签名谓词(predicate(sig, key) => bool)选择性失效 // 例如:游戏库数据变更时,失效所有 sig 以新 ownedGames.length 为前缀的 key function invalidateByInput(predicate) { for (const k of Object.keys(_mem)) { const entry = _mem[k]; if (entry && predicate(entry._sig, k)) { delete _mem[k]; sglvIDB.remove(STORE_KEY_PREFIX + k); } } } // 启动时从 IDB hydrate 全部 PCC 缓存到内存 // 返回 Promise<{ hydrated: number }> // 注意:必须在 sglvIDB.loadAll() 之后调用,否则 _writing 防抖可能导致 set 期间被读 function hydrate() { try { // sglvIDB._mem 已 loadAll 到内存,扫描所有 pcc_ 前缀的 key 解析回来 // sglvIDB._mem 不是 sglvIDB API 暴露的,但 loadAll 时是 sglvIDB 内部 _mem // 我们通过 sglvIDB.keys() 拿到所有 key,逐个 get 即可 const keys = sglvIDB.keys(); let count = 0; for (const k of keys) { if (typeof k === 'string' && k.startsWith(STORE_KEY_PREFIX)) { const v = sglvIDB.get(k, null); if (v && v._sig != null && v._ver != null && v.value !== undefined) { _mem[_strip(k)] = { _sig: v._sig, _ver: v._ver, value: v.value, _ts: v._ts || Date.now() }; count++; } } } return { hydrated: count }; } catch (e) { console.warn('[SGLV-Core] PersistentComputeCache hydrate failed:', e); return { hydrated: 0 }; } } return { getSync, getSyncWithMeta, has, getOrCompute, getOrComputeSync, set, invalidate, invalidateByInput, clear, hydrate, _flush, _mem, // 暴露给测试 }; })(); // ==================== 5. StageProgress 多阶段进度条 ==================== // 取代单一 spinner,4 阶段状态机:库存 → 详情 → 补充数据 → 完成 // 设计参考 steam-friend-manager-1.2.2:8174 dashSetStage const StageProgress = { _el: null, _stage: 0, _totalStages: 0, _text: '', _pct: 0, ensure() { if (this._el) return; const doc = root.document; if (!doc) return; this._el = doc.createElement('div'); this._el.id = 'sglv-stage-progress'; this._el.innerHTML = `
`; const panel = doc.getElementById('sglv-panel') || doc.body; const header = panel.querySelector ? panel.querySelector('.sglv-panel-header') : null; if (header && header.parentNode) header.parentNode.insertBefore(this._el, header.nextSibling); else panel.appendChild(this._el); }, setStage(n, total, text) { this.ensure(); this._stage = n; this._totalStages = total; this._text = text || ''; // 阶段切换时跳到该阶段起始百分比 this._pct = total > 1 ? Math.max(this._pct, ((n - 1) / total) * 100) : this._pct; this._render(); }, setProgress(pct, text) { this.ensure(); this._pct = Math.min(100, Math.max(0, pct)); if (text != null) this._text = text; this._render(); }, finish(text) { this.setProgress(100, text || '完成'); setTimeout(() => { if (this._el) this._el.style.display = 'none'; }, 1500); }, fail(text) { this.setProgress(0, '失败: ' + text); }, hide() { if (this._el) this._el.style.display = 'none'; }, show() { this.ensure(); if (this._el) this._el.style.display = ''; }, _render() { if (!this._el) return; const fill = this._el.querySelector('.sglv-stage-progress-fill'); const textEl = this._el.querySelector('.sglv-stage-progress-text'); if (fill) fill.style.width = this._pct + '%'; const stagePrefix = this._totalStages > 1 ? `[${this._stage}/${this._totalStages}] ` : ''; if (textEl) textEl.textContent = `${stagePrefix}${this._text} (${Math.round(this._pct)}%)`; } }; // ==================== 6. 节流 onProgress ==================== // 批量补全时主线程不被压垮,默认 800ms 节流 // 设计参考 steam-friend-manager-1.2.2:40 RENDER_THROTTLE_MS = 800 function makeThrottledProgress(onProgress, throttleMs = 800) { if (!onProgress) return null; let last = 0; let pendingArgs = null; let timer = null; const flush = () => { timer = null; if (pendingArgs) { onProgress(...pendingArgs); last = Date.now(); pendingArgs = null; } }; return function (...args) { const now = Date.now(); if (now - last >= throttleMs) { if (timer) { clearTimeout(timer); timer = null; } last = now; onProgress(...args); } else { pendingArgs = args; if (!timer) timer = setTimeout(flush, throttleMs - (now - last)); } }; } // ==================== 7. 智能并发池 ==================== // 滑动窗口模式,完成一个立刻填入下一个,保持并发数恒定 // 遇到 429 或网络错误自动指数退避重试(最多 2 次:1s→2s),429 时自动降低并发数 // 设计参考 steam-friend-manager _concurrentPool // // 契约:task() throw 视为 rejected,return 任意值视为 fulfilled // results[i] = { index, status: 'fulfilled' | 'rejected', value?, reason? } async function concurrentPool(tasks, concurrency, onProgress) { const results = new Array(tasks.length); let nextIndex = 0; let completed = 0; let activeConcurrency = concurrency; const MAX_RETRY = 2; async function runTask(index) { const task = tasks[index]; let retryCount = 0; while (retryCount <= MAX_RETRY) { try { const result = await task(); results[index] = { index, status: 'fulfilled', value: result }; return; } catch (e) { retryCount++; if (retryCount <= MAX_RETRY) { const delayMs = retryCount === 1 ? 1000 : 2000; await new Promise(r => setTimeout(r, delayMs)); if (e.message && (e.message.includes('429') || e.message.includes('rate'))) { activeConcurrency = Math.max(3, Math.floor(activeConcurrency * 0.7)); } } else { results[index] = { index, status: 'rejected', reason: e }; return; } } } } async function worker() { while (nextIndex < tasks.length) { const idx = nextIndex++; await runTask(idx); completed++; if (onProgress) onProgress(completed, tasks.length); } } const workerCount = Math.min(activeConcurrency, tasks.length); await Promise.all(Array.from({ length: workerCount }, () => worker())); return results; } // ==================== 8. 两阶段批量抓取 ==================== // 快查失败 → 精查重试,适用 Steam API、商店页抓取等限流场景 // 设计参考 steam-friend-manager-1.2.2:1707-1793 共同好友两阶段查询 // // 契约:concurrentPool 把 task() throw 视为 rejected,return 任意值视为 fulfilled。 // 本函数 task 失败时 throw,成功时 return { item, value },在 results 里读 r.value。 // failedItems 用 {item, origIndex} 形式,保留原 items 索引以便精查失败时回查。 async function twoPhaseFetch(items, fastFn, carefulFn, options = {}) { const { concurrency = 8, fastTimeout = 3000, carefulTimeout = 8000, onProgress, getKey } = options; const total = items.length; if (total === 0) return { success: [], failed: [] }; const keyOf = getKey || ((x) => x); // 阶段1:快查 const fastResults = await concurrentPool( items.map((item, i) => async () => { const value = await Promise.race([ fastFn(item), new Promise((_, r) => setTimeout(() => r(new Error('fast-timeout')), fastTimeout)) ]); return { item, origIndex: i, value }; }), concurrency, onProgress ? makeThrottledProgress((done, _t) => onProgress(done, total * 2, '快查')) : null ); const success = []; const failedItems = []; // [{ item, origIndex }] fastResults.forEach(r => { if (r.status === 'fulfilled') { const { item, value } = r.value; success.push({ key: keyOf(item), item, value }); } else { failedItems.push({ item: items[r.index], origIndex: r.index }); } }); if (failedItems.length === 0) { if (onProgress) onProgress(total, total * 2, '快查完成'); return { success, failed: [] }; } // 阶段2:精查(对失败项,降并发避免再次限流) const carefulResults = await concurrentPool( failedItems.map(fi => async () => { const value = await Promise.race([ carefulFn(fi.item), new Promise((_, r) => setTimeout(() => r(new Error('careful-timeout')), carefulTimeout)) ]); return { item: fi.item, origIndex: fi.origIndex, value }; }), Math.max(3, Math.floor(concurrency / 2)), onProgress ? makeThrottledProgress((done, _t) => onProgress(total + done, total * 2, '精查')) : null ); const careSuccess = []; const careFailed = []; carefulResults.forEach(r => { if (r.status === 'fulfilled') { const { item, value } = r.value; careSuccess.push({ key: keyOf(item), item, value }); } else { careFailed.push({ key: keyOf(items[r.index]), item: items[r.index], error: r.reason }); } }); if (onProgress) onProgress(total * 2, total * 2, '完成'); return { success: [...success, ...careSuccess], failed: careFailed }; } // ==================== 9. fillPendingSlots 占位 ==================== // pending slot 设计,空位也占位,布局稳定 // 设计参考 steam-friend-manager-1.2.2:6385 function fillPendingSlots(items, max = 6, pendingMarker = (i) => ({ pending: true, slot: i })) { const out = (items || []).slice(0, max); for (let i = out.length; i < max; i++) out.push(pendingMarker(i)); return out; } // ==================== 10. GM_xmlhttpRequest 包装 ==================== // v1.0.4: 安全读取响应文本——浏览器扩展 hook XHR.send 并修改 responseType 为 arraybuffer 时, // resp.responseText 会抛 InvalidStateError,此函数先尝试 responseText,失败后尝试 response function _safeRespText(resp) { try { if (resp.responseText) return resp.responseText; } catch (e) { /* responseType 被外部修改为 arraybuffer */ } try { if (typeof resp.response === 'string') return resp.response; if (resp.response instanceof ArrayBuffer) return new TextDecoder().decode(new Uint8Array(resp.response)); } catch (e2) { /* ignore */ } return ''; } // v1.0.5: 限流响应头解析——GM_xmlhttpRequest 的 responseHeaders 是纯文本, // 正则提取 x-ratelimit-remaining / x-ratelimit-reset(GitHub API 等服务)。 // 返回 { remaining, resetAt } 或 null(无该头)。 function parseRateLimitHeaders(responseHeaders) { if (!responseHeaders || typeof responseHeaders !== 'string') return null; const rem = responseHeaders.match(/x-ratelimit-remaining:\s*(\d+)/i); const rst = responseHeaders.match(/x-ratelimit-reset:\s*(\d+)/i); if (!rem && !rst) return null; const out = {}; if (rem) out.remaining = parseInt(rem[1], 10); if (rst) out.resetAt = parseInt(rst[1], 10) * 1000; return out; } // v1.0.5: HTTP 状态码是否值得重试—— // 确定性 4xx(400/401/404/410 等)重试无意义,立即失败(防 404 重试风暴, // 参见 SGLV 2.9.112 未上市游戏 404 重试风暴教训); // 403/429(限流,如 GitHub API)与 5xx(瞬时故障)按退避重试。 function _httpCanRetry(status) { if (status === 403 || status === 429) return true; if (status >= 500) return true; return false; } function _ratelimitSuffix(r, url) { if (r.status !== 403 && r.status !== 429) return ''; const rl = parseRateLimitHeaders(r.responseHeaders); if (!rl) return ''; const resetTxt = rl.resetAt ? new Date(rl.resetAt).toLocaleTimeString() : ''; console.warn(`[SGLVCore] 限流响应 ${r.status}: 剩余 ${rl.remaining}${resetTxt ? ', 重置于 ' + resetTxt : ''} (${url || ''})`); return rl.remaining !== undefined ? ` (rate-limit remaining=${rl.remaining})` : ''; } // v1.0.5: 网络终态失败系统通知——60s 全局节流防批量失败刷屏; // 宿主脚本未 @grant GM_notification 时静默跳过。返回是否实际发出。 let _lastNetFailNotifyAt = 0; function notifyNetFail(label, err) { try { const now = Date.now(); if (now - _lastNetFailNotifyAt < 60 * 1000) return false; if (typeof GM_notification !== 'function') return false; _lastNetFailNotifyAt = now; GM_notification({ title: 'SGLV 数据获取失败', text: `${label}: ${(err && err.message) || err}\n将继续使用本地缓存数据`, timeout: 6000, }); return true; } catch (e) { return false; } } // JSON 包装:自动 parse + 失败重试 // 测试侧可通过 root.__sglvCoreMockGmXhr 覆盖 // v1.0.5: 瞬态 HTTP 错误(403/429/5xx)改为退避重试(此前一律立即失败); // 确定性 4xx 保持立即失败 // v1.0.6: 新增 options.onHttpError(status, responseText) 可选回调—— // 非 2xx 最终失败(确定性 4xx 或重试耗尽)时调用,返回非空字符串则作为 // 错误消息(宿主提取响应体详情,如 AI 端点 error.message);回调异常回退默认消息 function gmFetchJson(url, options = {}) { const timeout = options.timeout || 20000; const maxRetries = options.retries || 2; const method = options.method || 'GET'; const headers = options.headers || null; const data = options.data || null; const onHttpError = options.onHttpError || null; const gmxhr = root.__sglvCoreMockGmXhr || (typeof GM_xmlhttpRequest !== 'undefined' ? GM_xmlhttpRequest : null); function httpError(r) { let msg = 'HTTP ' + r.status; if (typeof onHttpError === 'function') { try { const custom = onHttpError(r.status, _safeRespText(r)); if (typeof custom === 'string' && custom) msg = custom; } catch { /* 定制回调异常回退默认消息 */ } } return new Error(msg); } return new Promise((resolve, reject) => { if (!gmxhr) { reject(new Error('GM_xmlhttpRequest unavailable')); return; } let attempt = 0; function doRequest() { const opts = { method, url, timeout, onload(r) { // v1.0.2: 增加 HTTP 状态码校验,避免对错误响应体(404/429/500)做无效 JSON 解析 if (r.status < 200 || r.status >= 300) { // v1.0.5: 瞬态错误退避重试;确定性 4xx 立即失败 if (_httpCanRetry(r.status)) { const suffix = _ratelimitSuffix(r, url); attempt++; if (attempt <= maxRetries) { setTimeout(doRequest, attempt * 1000); return; } const e = httpError(r); if (suffix) e.message += suffix; reject(e); return; } reject(httpError(r)); return; } try { resolve(JSON.parse(_safeRespText(r))); } catch (e) { reject(new Error('JSON parse failed: ' + e.message)); } }, onerror(err) { attempt++; // v1.0.7: 拒绝值必须归一化为 Error——GM onerror 传入的原始对象没有 .message, // 上游若直接 e.message.match(...) 会抛 TypeError 掩盖真实原因 if (attempt <= maxRetries) setTimeout(doRequest, attempt * 1000); else { const msg = (err && typeof err.error === 'string' && err.error) ? err.error : 'network error'; reject(new Error(msg)); } }, ontimeout() { attempt++; if (attempt <= maxRetries) setTimeout(doRequest, attempt * 1000); else reject(new Error('timeout')); } }; if (headers) opts.headers = headers; if (data) opts.data = data; gmxhr(opts); } doRequest(); }); } // 文本包装:返回 raw text(大 JSON 场景避免主线程 parse) // v1.0.5: 瞬态 HTTP 错误(403/429/5xx)改为退避重试;确定性 4xx 保持立即失败 // v1.0.6: 支持 options.headers 透传(与 gmFetchJson 对齐,如商店页年龄验证 Cookie) function gmFetchText(url, options = {}) { const timeout = options.timeout || 20000; const maxRetries = options.retries || 2; const headers = options.headers || null; const gmxhr = root.__sglvCoreMockGmXhr || (typeof GM_xmlhttpRequest !== 'undefined' ? GM_xmlhttpRequest : null); return new Promise((resolve, reject) => { if (!gmxhr) { reject(new Error('GM_xmlhttpRequest unavailable')); return; } let attempt = 0; function doRequest() { const opts = { method: 'GET', url, timeout, onload(r) { if (r.status >= 200 && r.status < 300) { const text = _safeRespText(r); if (text) resolve(text); else reject(new Error('HTTP ' + r.status)); } else if (_httpCanRetry(r.status)) { const suffix = _ratelimitSuffix(r, url); attempt++; if (attempt <= maxRetries) { setTimeout(doRequest, attempt * 1000); return; } reject(new Error('HTTP ' + r.status + suffix)); } else reject(new Error('HTTP ' + r.status)); }, onerror(err) { attempt++; // v1.0.7: 同 gmFetchJson,拒绝值归一化为 Error(GM 原始对象无 .message) if (attempt <= maxRetries) setTimeout(doRequest, attempt * 1000); else { const msg = (err && typeof err.error === 'string' && err.error) ? err.error : 'network error'; reject(new Error(msg)); } }, ontimeout() { attempt++; if (attempt <= maxRetries) setTimeout(doRequest, attempt * 1000); else reject(new Error('timeout')); } }; if (headers) opts.headers = headers; gmxhr(opts); } doRequest(); }); } // ==================== 暴露 API ==================== const api = { version: '1.0.7', apiVersion: 1, NS, nsKey, IDB: sglvIDB, negCache, ensureCacheVersions, StageProgress, makeThrottledProgress, concurrentPool, twoPhaseFetch, fillPendingSlots, gmFetchJson, gmFetchText, parseRateLimitHeaders, // v1.0.5: 限流响应头解析 notifyNetFail, // v1.0.5: 网络终态失败系统通知(60s 节流) PersistentComputeCache, // v1.0.3: 持久化计算缓存 }; // 暴露到全局(GM 脚本风格) root.SGLVCore = api; // 同时挂 unsafeWindow(某些 sandbox 环境) if (typeof unsafeWindow !== 'undefined' && unsafeWindow !== root) { try { unsafeWindow.SGLVCore = api; } catch (e) { /* ignore */ } } return api; })(typeof window !== 'undefined' ? window : globalThis); /* ---------- sglv-shared-css.lib.js ---------- */ // ==UserScript== // @name SGLV 共享样式 (Library) // @name:en SGLV Shared CSS (Library) // @namespace https://greasyfork.org/scripts/588483 // @version 1.1.10 // @description Steam 游戏库查看器 - 共享 CSS 样式库。供主脚本与收藏模块 @require 引用。 // @description:en Steam Game Library Viewer - Shared CSS styles library. For host script and collection module @require. // @author SmallRob // @license MIT // @noframes // ==/UserScript== /* * SGLV Shared CSS Library v1.0.0 * * 包含主面板、收藏浮窗、侧边栏等全部 CSS 样式。 * 通过 window.SGLVSharedCSS 暴露 CSS 字符串,主脚本经 GM_addStyle 注入。 * 更新此库后,所有 @require 引用方在 Tampermonkey 外部资源检查周期(默认~1天)内自动获取新样式。 */ window.SGLVSharedCSS = `:root { --sglv-bg: rgba(21, 30, 46, 0.97); --sglv-bg-card: rgba(30, 41, 59, 0.95); --sglv-border: rgba(102, 192, 244, 0.2); --sglv-border-focus: rgba(102, 192, 244, 0.6); --sglv-text: #c7d5e0; --sglv-text-secondary: #8a9ba8; --sglv-accent: #66c0f4; --sglv-green: #4caf50; --sglv-red: #f44336; --sglv-orange: #ff9800; --sglv-radius: 12px; --sglv-shadow: 0 8px 32px rgba(0,0,0,0.5); --sglv-transition: all 0.2s ease; --sglv-kpi-bg: rgba(15, 23, 42, 0.5); --sglv-section-bg: rgba(15, 23, 42, 0.4); --sglv-card-bg: rgba(255,255,255,0.04); --sglv-card-border: rgba(255,255,255,0.06); --sglv-card-radius: 8px; --sglv-scrollbar-width: 6px; --sglv-scrollbar-thumb: rgba(255,255,255,0.12); } /* v2.3.28: KPI 卡片共享基类——合并 stat-card/stat-dash-card/trend-kpi-card/playtime-kpi-card/wl-kpi-card 的重复定义 */ .sglv-stat-card, .sglv-stat-dash-card, .sglv-trend-kpi-card, .sglv-playtime-kpi-card, .sglv-wl-kpi-card { position: relative; background: var(--sglv-kpi-bg); border: 1px solid var(--sglv-border); border-radius: var(--sglv-radius); padding: 6px 10px 5px; text-align: left; overflow: hidden; transition: border-color .2s, transform .2s; } .sglv-stat-card:hover, .sglv-stat-dash-card:hover, .sglv-trend-kpi-card:hover, .sglv-playtime-kpi-card:hover, .sglv-wl-kpi-card:hover { border-color: rgba(102,192,244,0.3); transform: translateY(-1px); } .sglv-stat-card::before, .sglv-stat-dash-card::before, .sglv-trend-kpi-card::before, .sglv-playtime-kpi-card::before, .sglv-wl-kpi-card::before { content: ''; position: absolute; top: -12px; right: -12px; width: 40px; height: 40px; border-radius: 50%; opacity: 0.12; filter: blur(8px); } /* v2.3.28: KPI 颜色修饰符——合并各卡片类型的 blue/green/amber/purple/red 颜色变体 */ .sglv-stat-card.blue, .sglv-stat-dash-card.blue, .sglv-trend-kpi-card.blue, .sglv-playtime-kpi-card.blue { border-color: rgba(102,192,244,0.35); } .sglv-stat-card.blue::before, .sglv-stat-dash-card.blue::before, .sglv-trend-kpi-card.blue::before, .sglv-playtime-kpi-card.blue::before { background: #66c0f4; } .sglv-stat-card.green, .sglv-stat-dash-card.green, .sglv-trend-kpi-card.mine, .sglv-playtime-kpi-card.green { border-color: rgba(34,197,94,0.35); } .sglv-stat-card.green::before, .sglv-stat-dash-card.green::before, .sglv-trend-kpi-card.mine::before, .sglv-playtime-kpi-card.green::before { background: #22c55e; } .sglv-stat-card.amber, .sglv-stat-dash-card.amber, .sglv-playtime-kpi-card.amber { border-color: rgba(245,158,11,0.35); } .sglv-stat-card.amber::before, .sglv-stat-dash-card.amber::before, .sglv-playtime-kpi-card.amber::before { background: #fbbf24; } .sglv-stat-card.purple, .sglv-stat-dash-card.purple, .sglv-playtime-kpi-card.purple { border-color: rgba(139,92,246,0.35); } .sglv-stat-card.purple::before, .sglv-stat-dash-card.purple::before, .sglv-playtime-kpi-card.purple::before { background: #a78bfa; } .sglv-stat-card.red, .sglv-stat-dash-card.red, .sglv-trend-kpi-card.red { border-color: rgba(244,67,54,0.35); } .sglv-stat-card.red::before, .sglv-stat-dash-card.red::before, .sglv-trend-kpi-card.red::before { background: #f44336; } /* v2.3.28: 滚动条共享样式——统一所有 ::-webkit-scrollbar 宽度和拇指颜色 */ .sglv-content::-webkit-scrollbar, .sglv-pub-main::-webkit-scrollbar, .sglv-pub-sidebar::-webkit-scrollbar, .sglv-gs-panel::-webkit-scrollbar, .sglv-pt-all-list::-webkit-scrollbar, .sglv-playtime-split-left #sglv-pt-top-list::-webkit-scrollbar { width: var(--sglv-scrollbar-width); } .sglv-content::-webkit-scrollbar-thumb, .sglv-pub-main::-webkit-scrollbar-thumb, .sglv-pub-sidebar::-webkit-scrollbar-thumb, .sglv-gs-panel::-webkit-scrollbar-thumb, .sglv-pt-all-list::-webkit-scrollbar-thumb, .sglv-playtime-split-left #sglv-pt-top-list::-webkit-scrollbar-thumb { background: var(--sglv-scrollbar-thumb); border-radius: 3px; } .sglv-fab { cursor: pointer !important; } .sglv-panel { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 1200px !important; max-width: calc(100vw - 40px) !important; height: 85vh !important; max-height: 860px !important; background: var(--sglv-bg) !important; border: 1px solid var(--sglv-border) !important; border-radius: var(--sglv-radius) !important; box-shadow: var(--sglv-shadow) !important; z-index: 1000000 !important; display: none !important; flex-direction: column !important; overflow: hidden !important; font-family: "Motiva Sans", Arial, Helvetica, sans-serif !important; color: var(--sglv-text) !important; } .sglv-panel.sglv-show { display: flex !important; } .sglv-overlay { position: fixed !important; inset: 0 !important; background: rgba(11, 17, 32, 0.85) !important; z-index: 999999 !important; display: none !important; } .sglv-overlay.sglv-show { display: block !important; } .sglv-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 12px 20px !important; background: linear-gradient(135deg, #1b2838, #2a475e) !important; border-bottom: 1px solid var(--sglv-border) !important; flex-shrink: 0 !important; } .sglv-header h2 { margin: 0 !important; font-size: 16px !important; font-weight: 600 !important; color: #fff !important; display: flex !important; align-items: center !important; gap: 8px !important; white-space: nowrap !important; } .sglv-header-actions { display: flex; align-items: center; gap: 4px; } .sglv-header-btn { width: 30px !important; height: 30px !important; border-radius: 6px !important; border: none !important; background: rgba(255,255,255,0.06) !important; color: #8a9ba8 !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: var(--sglv-transition) !important; } .sglv-header-btn:hover { background: rgba(255,255,255,0.12) !important; color: #fff !important; } .sglv-header-btn.sglv-active { background: rgba(102,192,244,0.2) !important; color: var(--sglv-accent) !important; } .sglv-header-btn svg { width: 14px; height: 14px; } .sglv-tabs { display: flex !important; background: rgba(15, 23, 42, 0.6) !important; padding: 4px !important; gap: 4px !important; border-bottom: 1px solid var(--sglv-border) !important; flex-shrink: 0 !important; } .sglv-tab { flex: 1 !important; border: none !important; background: transparent !important; color: var(--sglv-text-secondary) !important; padding: 8px 16px !important; font-size: 13px !important; font-weight: 600 !important; border-radius: 6px !important; cursor: pointer !important; transition: var(--sglv-transition) !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; } .sglv-tab:hover { color: #fff !important; } .sglv-tab.active { background: rgba(102, 192, 244, 0.2) !important; color: var(--sglv-accent) !important; } .sglv-tab svg { width: 14px; height: 14px; flex-shrink: 0 !important; } .sglv-tab { white-space: nowrap !important; } /* v2.5.0: 游戏库工具栏——两行紧凑布局,全部 !important 强制生效 */ /* 第1行:搜索 + 排序 + 视图切换 + 分页(nowrap 紧凑,overflow hidden 防溢出) */ .sglv-toolbar { display: flex !important; align-items: center !important; padding: 6px 12px !important; background: var(--sglv-section-bg) !important; border-bottom: 1px solid var(--sglv-border) !important; gap: 8px !important; flex-shrink: 0 !important; flex-wrap: nowrap !important; overflow: hidden !important; } .sglv-search { flex: 0 1 200px !important; min-width: 100px !important; max-width: 280px !important; padding: 5px 10px !important; background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 6px !important; color: #fff !important; font-size: 12px !important; outline: none !important; } .sglv-search:focus { border-color: rgba(102,192,244,0.5) !important; } .sglv-search::placeholder { color: #5a6a7a !important; } /* v2.4.5: 库存排序下拉框 */ .sglv-sort-select { padding: 5px 8px !important; background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 6px !important; color: #fff !important; font-size: 12px !important; outline: none !important; cursor: pointer !important; flex-shrink: 0 !important; max-width: 140px !important; } .sglv-sort-select:focus { border-color: rgba(102,192,244,0.5) !important; } .sglv-sort-select option { background: #1b2838 !important; color: #fff !important; } .sglv-btn { padding: 6px 14px !important; border: none !important; border-radius: 6px !important; font-size: 12px !important; font-weight: 600 !important; cursor: pointer !important; transition: var(--sglv-transition) !important; display: inline-flex !important; align-items: center !important; gap: 5px !important; white-space: nowrap !important; } .sglv-btn svg { width: 13px; height: 13px; } .sglv-btn-primary { background: var(--sglv-accent) !important; color: #fff !important; } .sglv-btn-primary:hover { filter: brightness(1.15) !important; } .sglv-btn-primary:disabled { opacity: 0.5 !important; cursor: not-allowed !important; } .sglv-btn-secondary { background: rgba(255,255,255,0.08) !important; color: var(--sglv-text) !important; border: 1px solid rgba(255,255,255,0.1) !important; } .sglv-btn-secondary:hover { background: rgba(255,255,255,0.15) !important; } .sglv-btn-secondary.active { background: rgba(102,192,244,0.2) !important; border-color: rgba(102,192,244,0.4) !important; color: var(--sglv-accent) !important; } .sglv-btn-icon { width: 30px !important; height: 30px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* v2.5.0: 视图切换按钮组——紧贴排序右侧,统一尺寸 */ .sglv-view-toggle { display: flex !important; gap: 2px !important; flex-shrink: 0 !important; } .sglv-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; } .sglv-content { flex: 1; overflow-y: auto; padding: 16px; } /* v2.5.0: 独立分页栏(底部全宽) */ .sglv-pagination { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 10px !important; background: var(--sglv-section-bg) !important; border-top: 1px solid var(--sglv-border) !important; flex-shrink: 0 !important; } /* v2.5.0: 工具栏内嵌分页——紧凑无背景,推到右侧,按钮缩小 */ .sglv-toolbar .sglv-pagination { padding: 0 !important; background: transparent !important; border: none !important; margin-left: auto !important; gap: 4px !important; flex-shrink: 0 !important; } .sglv-toolbar .sglv-pagination .sglv-btn { padding: 2px 8px !important; font-size: 11px !important; min-width: auto !important; } .sglv-page-info { font-size: 11px !important; color: var(--sglv-text-secondary) !important; white-space: nowrap !important; flex-shrink: 0 !important; } /* v2.5.0: 筛选标签栏——独占第2行,允许换行,视觉区分 */ .sglv-filter-bar { display: flex !important; align-items: center !important; gap: 6px !important; padding: 5px 12px !important; background: rgba(15, 23, 42, 0.3) !important; border-bottom: 1px solid var(--sglv-border) !important; flex-shrink: 0 !important; flex-wrap: wrap !important; } /* v2.6.2: 筛选栏分组 + 内联分页——筛选按钮与分页放一行,右侧自动分页 */ .sglv-filter-bar-group { display:inline-flex !important; align-items:center !important; gap:4px !important; flex-wrap:wrap !important; } /* v2.6.2: 类别按钮(全部/已游玩/未游玩/共享/仅自己)——胶囊形,padding 4px 10px 紧凑 */ .sglv-filter-bar-group .sglv-category-btn { padding: 3px 10px !important; font-size: 11px !important; } .sglv-filter-sep { width:1px !important; height:18px !important; background:var(--sglv-border) !important; margin:0 4px !important; flex-shrink:0 !important; } /* v2.6.2: 内联分页——紧凑按钮 (padding 3px 10px),与筛选按钮同一行,靠近右边缘 */ .sglv-pagination-inline { display:flex !important; align-items:center !important; gap:4px !important; padding:0 !important; background:transparent !important; border:none !important; flex-shrink:0 !important; margin-left:auto !important; } .sglv-pagination-inline .sglv-btn { padding: 3px 10px !important; font-size: 11px !important; min-width:auto !important; } .sglv-pagination-inline .sglv-page-info { font-size: 11px !important; padding: 0 4px !important; } .sglv-card-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)) !important; gap: 10px !important; } .sglv-game-card { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.06) !important; border-radius: 8px !important; overflow: hidden !important; transition: var(--sglv-transition) !important; cursor: pointer !important; } .sglv-game-card:hover { background: rgba(255,255,255,0.08) !important; border-color: rgba(102,192,244,0.3) !important; transform: translateY(-2px) !important; } .sglv-card-img-wrap { position: relative !important; width: 100% !important; aspect-ratio: 2/3 !important; overflow: hidden !important; background: rgba(255,255,255,0.05) !important; } .sglv-card-img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* v2.3.22: 游玩时长浮层——置于封面右下角,灰色遮罩背景 */ .sglv-card-playtime-overlay { position: absolute !important; bottom: 4px !important; right: 4px !important; font-size: 10px !important; font-weight: 700 !important; padding: 2px 6px !important; border-radius: 4px !important; background: rgba(0,0,0,0.65) !important; color: #66c0f4 !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; line-height: 1.2 !important; pointer-events: none !important; z-index: 2 !important; display: inline-flex !important; align-items: center !important; gap: 3px !important; } .sglv-card-playtime-overlay svg { width: 9px !important; height: 9px !important; opacity: 0.85 !important; } .sglv-card-body { padding: 6px 8px !important; } .sglv-card-name { font-size: 12px !important; font-weight: 600 !important; color: #e0e0e0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .sglv-card-id { font-size: 10px !important; color: var(--sglv-text-secondary) !important; margin-top: 2px !important; } .sglv-card-id-inline { font-size: 10px !important; color: var(--sglv-text-secondary) !important; margin-left: 6px !important; font-weight: 400 !important; } .sglv-list-id-inline { font-size: 11px !important; color: var(--sglv-text-secondary) !important; margin-left: 6px !important; font-weight: 400 !important; flex-shrink: 0 !important; } .sglv-meta-item { display: inline-flex !important; align-items: center !important; gap: 3px !important; white-space: nowrap !important; } .sglv-meta-item svg { width: 10px !important; height: 10px !important; color: var(--sglv-text-secondary) !important; flex-shrink: 0 !important; opacity: 0.7 !important; } .sglv-card-badge { display: inline-block !important; font-size: 10px !important; font-weight: 600 !important; padding: 1px 6px !important; border-radius: 3px !important; margin-top: 4px !important; } .sglv-card-badge.owned { background: rgba(76,175,80,0.2) !important; color: #4caf50 !important; } .sglv-card-badge.missing { background: rgba(244,67,54,0.15) !important; color: #f44336 !important; } .sglv-card-badge.shared { background: rgba(139, 92, 246, 0.2) !important; color: #a78bfa !important; } /* v1.9.34: 移除 .sglv-game-card.unowned 灰色滤镜——所有封面正常显示 */ /* v2.4.3: 愿望单横板封面视图(每行3个,参考 steam-family-game-analysis v1.58 fa-wl-cover) */ .sglv-wl-cover-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; } .sglv-wl-cover-card { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.06) !important; border-radius: 8px !important; overflow: hidden !important; transition: var(--sglv-transition) !important; cursor: pointer !important; display: flex !important; flex-direction: column !important; } .sglv-wl-cover-card:hover { background: rgba(255,255,255,0.08) !important; border-color: rgba(102,192,244,0.3) !important; transform: translateY(-2px) !important; } .sglv-wl-cover-img-wrap { position: relative !important; width: 100% !important; aspect-ratio: 460/215 !important; overflow: hidden !important; background: rgba(255,255,255,0.05) !important; flex-shrink: 0 !important; } .sglv-wl-cover-img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } .sglv-wl-cover-badges { position: absolute !important; top: 6px !important; left: 6px !important; display: flex !important; gap: 4px !important; z-index: 2 !important; } .sglv-wl-cover-badges .sglv-card-badge { backdrop-filter: blur(4px) !important; } .sglv-wl-cover-badges .sglv-wl-family-badge { margin-left: 0 !important; } .sglv-wl-cover-body { padding: 8px 10px 9px !important; display: flex !important; flex-direction: column !important; gap: 5px !important; } @media (max-width: 1100px) { .sglv-wl-cover-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 700px) { .sglv-wl-cover-grid { grid-template-columns: 1fr !important; } } /* ====== PS 会免标签页 (v2.6.0) ====== */ /* PS 蓝色占位封面:steamAppId 缺失或全部 CDN 失败时使用 */ .sglv-ps-cover-placeholder { width:100% !important; height:100% !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:8px !important; padding:12px !important; background:linear-gradient(135deg,#003791 0%,#0070D1 55%,#1b3a7a 100%) !important; color:rgba(255,255,255,0.95) !important; text-align:center !important; box-shadow:inset 0 0 30px rgba(0,0,0,0.25) !important; } .sglv-ps-logo { width:50px !important; height:20px !important; opacity:0.55 !important; color:#fff !important; flex-shrink:0 !important; } .sglv-ps-cover-name { font-size:11px !important; font-weight:600 !important; line-height:1.35 !important; display:-webkit-box !important; -webkit-line-clamp:3 !important; -webkit-box-orient:vertical !important; overflow:hidden !important; text-shadow:0 1px 2px rgba(0,0,0,0.5) !important; word-break:break-word !important; } /* 档位徽章(卡片封面右上角)——必备=金 / 升级=蓝 / 高级=紫 */ .sglv-ps-tier-badge { display:inline-block !important; font-size:10px !important; font-weight:700 !important; padding:2px 8px !important; border-radius:10px !important; letter-spacing:0.3px !important; } .sglv-card-img-wrap .sglv-ps-tier-badge { position:absolute !important; top:6px !important; right:6px !important; z-index:2 !important; backdrop-filter:blur(4px) !important; -webkit-backdrop-filter:blur(4px) !important; box-shadow:0 1px 4px rgba(0,0,0,0.35) !important; } .sglv-ps-tier-badge.tier-essential { background:rgba(255,205,60,0.95) !important; color:#3d2c00 !important; } .sglv-ps-tier-badge.tier-extra { background:rgba(33,150,243,0.95) !important; color:#fff !important; } .sglv-ps-tier-badge.tier-premium { background:rgba(179,136,255,0.95) !important; color:#fff !important; } /* 平台标签(封面左下角:Steam / PS 独占) */ .sglv-ps-platform-tag { position:absolute !important; bottom:6px !important; left:6px !important; font-size:9px !important; font-weight:700 !important; padding:1px 6px !important; border-radius:4px !important; z-index:2 !important; letter-spacing:0.3px !important; } .sglv-ps-platform-tag.steam { background:rgba(0,0,0,0.62) !important; color:#66c0f4 !important; } .sglv-ps-platform-tag.ps-only { background:rgba(0,112,209,0.88) !important; color:#fff !important; } .sglv-ps-owned-badge { position:absolute !important; bottom:6px !important; right:6px !important; z-index:2 !important; margin-top:0 !important; backdrop-filter:blur(4px) !important; } /* 状态徽章 */ .sglv-ps-status-badge { display:inline-block !important; font-size:10px !important; font-weight:600 !important; padding:1px 6px !important; border-radius:3px !important; white-space:nowrap !important; } .sglv-ps-status-badge.ps-status-in { background:rgba(76,175,80,0.2) !important; color:#4caf50 !important; } .sglv-ps-status-badge.ps-status-active { background:rgba(255,205,60,0.2) !important; color:#FFCD3C !important; } .sglv-ps-status-badge.ps-status-expired { background:rgba(158,158,158,0.2) !important; color:#b0b0b0 !important; } .sglv-ps-status-badge.ps-status-leaving { background:rgba(255,152,0,0.2) !important; color:#ff9800 !important; } .sglv-ps-status-badge.ps-status-out { background:rgba(244,67,54,0.2) !important; color:#f44336 !important; } .sglv-ps-month { font-size:10px !important; color:var(--sglv-text-secondary) !important; white-space:nowrap !important; } /* v2.6.1: PS 卡片底部"时间+月份+版本"行——inline-flex 居中,时钟 svg 固定尺寸避免被文字行高压扁 */ /* v2.6.1: PS 卡片底部"时间+月份+版本"行——inline-flex 居中,时钟 svg 固定尺寸避免被文字行高压扁 */ .sglv-ps-meta-row { font-size:11px !important; color:var(--sglv-text-secondary) !important; display:flex !important; align-items:center !important; gap:6px !important; flex-wrap:nowrap !important; overflow:hidden !important; min-width:0 !important; } .sglv-ps-month-item { display:inline-flex !important; align-items:center !important; gap:3px !important; white-space:nowrap !important; flex-shrink:0 !important; } .sglv-ps-clock { display:inline-flex !important; align-items:center !important; justify-content:center !important; width:11px !important; height:11px !important; flex-shrink:0 !important; line-height:1 !important; opacity:0.85 !important; } .sglv-ps-clock svg { width:11px !important; height:11px !important; display:block !important; vertical-align:top !important; } .sglv-ps-versions { display:inline-flex !important; gap:2px !important; flex-wrap:wrap !important; min-width:0 !important; } /* 筛选栏分组与分隔 */ .sglv-ps-filter-group { display:flex !important; gap:6px !important; flex-wrap:wrap !important; } .sglv-ps-filter-sep { width:1px !important; align-self:stretch !important; background:var(--sglv-border) !important; margin:0 4px !important; } /* 列表视图 PS 独占图标 */ .sglv-ps-list-icon { display:flex !important; align-items:center !important; justify-content:center !important; background:linear-gradient(135deg,#003791,#0070D1) !important; color:#fff !important; font-weight:700 !important; font-size:12px !important; letter-spacing:0.5px !important; } /* PS 独占卡片去掉默认灰底,由蓝色占位填满 */ .sglv-ps-exclusive .sglv-card-img-wrap { background:transparent !important; } /* PS 卡片悬停时强化蓝色边框 */ .sglv-ps-card:hover { border-color:rgba(0,112,209,0.45) !important; } .sglv-ps-card.sglv-ps-exclusive:hover { border-color:rgba(179,136,255,0.4) !important; } /* PS 会免标签页容器布局 */ .sglv-psplus-wrap { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:10px; } .sglv-header-btn.sglv-export-csv-btn, .sglv-header-btn.sglv-export-json-btn { font-size: 10px !important; font-weight: bold !important; width: auto !important; padding: 0 8px !important; } .sglv-pub-card { margin-bottom: 12px; padding: 12px 16px; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); cursor: pointer; } .sglv-series-card { margin-bottom: 10px; padding: 10px 14px; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); cursor: pointer; } .sglv-card-row { display: flex; align-items: center; justify-content: space-between; } .sglv-card-row.gap6 { margin-bottom: 6px; } .sglv-card-row.gap4 { margin-bottom: 4px; } .sglv-pub-card-name { font-size: 14px; font-weight: 600; color: #fff; } .sglv-series-card-name { font-size: 13px; font-weight: 600; color: #e0e0e0; } .sglv-card-stats { font-size: 12px; color: #8f98a0; } .sglv-card-stats.complete { color: #4caf50; } .sglv-badge-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 4px; } .sglv-info-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; } /* v2.9.49: 移除 !important——这些定义在 CSS 中位于共享基类之后,同特异性下自然覆盖 */ .sglv-trend-kpi-card.red { border-color: rgba(244,67,54,0.35); } .sglv-trend-kpi-card.red .sglv-trend-kpi-value { color: #f44336; } .sglv-trend-kpi-card.red::before { background: #f44336; } .sglv-trend-kpi-card.red .sglv-trend-kpi-icon { background: rgba(244,67,54,0.15); color: #f44336; } .sglv-trend-kpi-card.orange { border-color: rgba(255,152,0,0.35); } .sglv-trend-kpi-card.orange .sglv-trend-kpi-value { color: #ff9800; } .sglv-trend-kpi-card.orange::before { background: #ff9800; } .sglv-trend-kpi-card.orange .sglv-trend-kpi-icon { background: rgba(255,152,0,0.15); color: #ff9800; } .sglv-trend-kpi-card.blue { border-color: rgba(96,165,250,0.35); } .sglv-trend-kpi-card.blue .sglv-trend-kpi-value { color: #60a5fa; } .sglv-trend-kpi-card.blue::before { background: #60a5fa; } .sglv-trend-kpi-card.blue .sglv-trend-kpi-icon { background: rgba(96,165,250,0.15); color: #60a5fa; } .sglv-trend-kpi-card.gray { border-color: rgba(148,163,184,0.35); } .sglv-trend-kpi-card.gray .sglv-trend-kpi-value { color: #94a3b8; } .sglv-trend-kpi-card.gray::before { background: #94a3b8; } .sglv-trend-kpi-card.gray .sglv-trend-kpi-icon { background: rgba(148,163,184,0.15); color: #94a3b8; } /* 愿望单标签页 (v2.3.19):左侧仪表 + 右侧游戏视图 */ .sglv-wishlist-wrap { flex: 1; overflow: hidden; padding: 12px; display: flex; flex-direction: row; gap: 12px; min-height: 0; } .sglv-wl-side { width: 320px; flex-shrink: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; min-height: 0; padding-right: 4px; } .sglv-wl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .sglv-wl-main .sglv-content { flex: 1; overflow-y: auto; min-height: 0; } @media (max-width: 900px) { .sglv-wishlist-wrap { flex-direction: column; overflow-y: auto; } .sglv-wl-side { width: 100%; overflow: visible; } } .sglv-wl-section { background: var(--sglv-section-bg); border: 1px solid var(--sglv-border); border-radius: var(--sglv-radius); padding: 12px; flex-shrink: 0; } .sglv-wl-bar-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; } .sglv-wl-bar-name { width: 84px; text-align: right; font-size: 11px; color: var(--sglv-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; } .sglv-wl-bar-track { flex: 1; height: 14px; background: rgba(255,255,255,0.05); border-radius: 4px; overflow: hidden; } .sglv-wl-bar-fill { height: 100%; border-radius: 4px; transition: width .3s; } .sglv-wl-bar-val { width: 36px; font-size: 11px; color: var(--sglv-text-secondary); flex-shrink: 0; } /* v2.8.0: 我的类别统计卡片 */ .sglv-wl-catstats-list { display: flex; flex-direction: column; gap: 6px; } .sglv-wl-cat-card { padding: 6px 8px; border-radius: 6px; background: rgba(255,255,255,0.03); border: 1px solid var(--sglv-border); cursor: pointer; transition: background .2s, border-color .2s; } .sglv-wl-cat-card:hover { background: rgba(255,255,255,0.07); border-color: var(--cat-color, var(--sglv-accent)); } .sglv-wl-cat-card.active { background: rgba(99,179,237,0.12); border-color: var(--sglv-accent); box-shadow: 0 0 0 1px var(--sglv-accent) inset; } .sglv-wl-cat-header { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; } .sglv-wl-cat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cat-color, #66c0f4); flex-shrink: 0; } .sglv-wl-cat-name { flex: 1; font-size: 12px; font-weight: 600; color: var(--sglv-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sglv-wl-cat-count { font-size: 12px; font-weight: 700; color: var(--sglv-text); flex-shrink: 0; display: inline-flex; align-items: baseline; gap: 3px; } .sglv-wl-cat-pct { font-size: 10px; font-weight: 400; color: var(--sglv-text-secondary); } .sglv-wl-cat-stats { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .sglv-wl-cat-stat { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; color: var(--sglv-text-secondary); } .sglv-wl-cat-stat svg { width: 11px; height: 11px; flex-shrink: 0; opacity: 0.8; } .sglv-wl-cat-card .sglv-wl-bar-track { height: 4px; } /* 愿望单增强 KPI 卡片 (v2.3.21):带图标+数值+标签+子文本 */ .sglv-wl-kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex-shrink: 0; } /* v2.3.28: wl-kpi-card 基类/hover/::before 已合并至共享 KPI 样式,仅保留差异化 padding */ .sglv-wl-kpi-card { padding: 10px 10px 8px; } .sglv-wl-kpi-card.kpi-total::before { background: #f43f5e; } .sglv-wl-kpi-card.kpi-value::before { background: #10b981; } .sglv-wl-kpi-card.kpi-sale::before { background: #f59e0b; } .sglv-wl-kpi-card.kpi-free::before { background: #6366f1; } .sglv-wl-kpi-card.kpi-lib::before { background: #06b6d4; } .sglv-wl-kpi-card.kpi-year::before { background: #a855f7; } .sglv-wl-kpi-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; margin-bottom: 6px; font-size: 12px; } .sglv-wl-kpi-card.kpi-total .sglv-wl-kpi-icon { background: rgba(244,63,94,0.15); color: #f43f5e; } .sglv-wl-kpi-card.kpi-value .sglv-wl-kpi-icon { background: rgba(16,185,129,0.15); color: #10b981; } .sglv-wl-kpi-card.kpi-sale .sglv-wl-kpi-icon { background: rgba(245,158,11,0.15); color: #f59e0b; } .sglv-wl-kpi-card.kpi-free .sglv-wl-kpi-icon { background: rgba(99,102,241,0.15); color: #6366f1; } .sglv-wl-kpi-card.kpi-lib .sglv-wl-kpi-icon { background: rgba(6,182,212,0.15); color: #06b6d4; } .sglv-wl-kpi-card.kpi-year .sglv-wl-kpi-icon { background: rgba(168,85,247,0.15); color: #a855f7; } .sglv-wl-kpi-value { font-size: 18px; font-weight: 800; color: #fff; line-height: 1.2; } .sglv-wl-kpi-label { font-size: 10px; color: var(--sglv-text-secondary); margin-top: 2px; } .sglv-wl-kpi-sub { font-size: 9px; color: var(--sglv-text-secondary); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.8; } /* 愿望单竖向条形图(价格区间/折扣分布) v2.3.23: 修复柱子不可见——列需拉伸至容器高度,轨道 flex:1 才有确定高度,填充百分比才生效 */ .sglv-wl-vbar-chart { display: flex; align-items: stretch; gap: 4px; height: 92px; padding: 4px 0; } .sglv-wl-vbar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; height: 100%; } .sglv-wl-vbar-val { font-size: 10px; color: var(--sglv-text); font-weight: 600; flex-shrink: 0; } .sglv-wl-vbar-track { width: 100%; max-width: 28px; min-height: 2px; background: rgba(255,255,255,0.06); border-radius: 4px 4px 0 0; position: relative; flex: 1; display: flex; align-items: flex-end; justify-content: center; } .sglv-wl-vbar-fill { width: 100%; border-radius: 4px 4px 0 0; transition: height .3s; min-height: 2px; } .sglv-wl-vbar-label { font-size: 9px; color: var(--sglv-text-secondary); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; flex-shrink: 0; } /* 按年添加趋势迷你柱状图 v2.3.23: 修复柱子塌陷——新增轨道包裹,柱子按轨道高度百分比渲染,峰值高亮突出重点 */ .sglv-wl-year-line { display: flex; align-items: stretch; gap: 2px; height: 76px; padding: 4px 0; } .sglv-wl-year-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; height: 100%; } .sglv-wl-year-track { flex: 1; width: 100%; min-height: 2px; display: flex; align-items: flex-end; justify-content: center; } .sglv-wl-year-bar { width: 100%; max-width: 20px; min-height: 2px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, rgba(99,102,241,0.85), rgba(99,102,241,0.35)); transition: height .3s; } .sglv-wl-year-bar.peak { background: linear-gradient(180deg, rgba(102,192,244,0.95), rgba(102,192,244,0.4)); box-shadow: 0 0 8px rgba(102,192,244,0.35); } .sglv-wl-year-val { font-size: 9px; color: var(--sglv-text); font-weight: 600; flex-shrink: 0; } .sglv-wl-year-label { font-size: 9px; color: var(--sglv-text-secondary); flex-shrink: 0; } .sglv-wl-price { font-size: 12px; font-weight: 700; color: #aee435; } /* v2.3.23: 愿望单排序位次徽章(priority 排名,TOP3 金银铜高亮) */ .sglv-wl-rank { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; line-height: 1; padding: 2px 6px; border-radius: 4px; background: rgba(102,192,244,0.12); color: var(--sglv-accent); flex-shrink: 0; cursor: help; } .sglv-wl-rank.sglv-rank-top1 { background: rgba(255,215,0,0.16); color: #ffd700; } .sglv-wl-rank.sglv-rank-top2 { background: rgba(192,192,192,0.16); color: #c0c0c0; } .sglv-wl-rank.sglv-rank-top3 { background: rgba(205,127,50,0.2); color: #e09a5f; } /* v2.3.23: 愿望单卡片精简布局——价格+在库同行、时间图标+日期 */ /* v2.9.67: 价格行强制不换行,徽章固定最右侧不收缩 */ .sglv-wl-price-row { justify-content: space-between; flex-wrap: nowrap; align-items: center; } .sglv-wl-price-group { display: inline-flex; align-items: baseline; min-width: 0; white-space: nowrap; overflow: hidden; flex: 1 1 auto; } .sglv-wl-added { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; } .sglv-wl-added svg { width: 11px; height: 11px; flex-shrink: 0; } .sglv-wl-orig { font-size: 11px; color: var(--sglv-text-secondary); text-decoration: line-through; margin-left: 4px; } .sglv-card-badge.discount { background: rgba(255,152,0,0.15); color: #ff9800; } /* v2.9.67: 家庭共享徽章——图标+文字内联,固定最右侧不换行不收缩 */ .sglv-wl-family-badge { display: inline-flex !important; align-items: center !important; gap: 3px !important; flex-shrink: 0 !important; margin-left: auto !important; white-space: nowrap !important; line-height: 1 !important; } .sglv-wl-family-badge svg { width: 11px !important; height: 11px !important; flex-shrink: 0 !important; } .sglv-wl-topdisc-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; } .sglv-wl-topdisc-name { flex: 1; min-width: 0; font-size: 12px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .sglv-wl-topdisc-name:hover { color: var(--sglv-accent); } .sglv-wl-topdisc-val { font-size: 12px; font-weight: 700; color: #ff9800; white-space: nowrap; } .sglv-list-view { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; } .sglv-list-item { display: flex !important; align-items: center !important; gap: 10px !important; padding: 8px 12px !important; background: rgba(255,255,255,0.02) !important; border: 1px solid rgba(255,255,255,0.04) !important; border-radius: 6px !important; transition: var(--sglv-transition) !important; } .sglv-list-item:hover { background: rgba(255,255,255,0.06) !important; border-color: rgba(102,192,244,0.2) !important; } .sglv-list-icon { width: 92px !important; height: 43px !important; border-radius: 4px !important; object-fit: cover !important; flex-shrink: 0 !important; object-fit: cover !important; background: rgba(255,255,255,0.05) !important; } .sglv-list-info { flex: 1; min-width: 0; } .sglv-list-name { font-size: 13px !important; font-weight: 600 !important; color: #e0e0e0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .sglv-name-alias { color: var(--sglv-text-secondary) !important; font-weight: 400 !important; font-size: 11px !important; margin-left: 6px !important; } .sglv-list-meta { font-size: 11px !important; color: var(--sglv-text-secondary) !important; display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 6px !important; margin-top: 2px !important; } .sglv-list-badge { font-size: 11px !important; font-weight: 600 !important; padding: 2px 8px !important; border-radius: 4px !important; flex-shrink: 0 !important; } .sglv-list-badge.owned { background: rgba(76,175,80,0.2) !important; color: #4caf50 !important; } .sglv-list-badge.missing { background: rgba(244,67,54,0.15) !important; color: #f44336 !important; } .sglv-list-badge.shared { background: rgba(139, 92, 246, 0.2) !important; color: #a78bfa !important; } .sglv-switch-container { display: flex !important; align-items: center !important; gap: 6px !important; font-size: 11px !important; color: var(--sglv-text-secondary) !important; cursor: pointer !important; user-select: none !important; margin-right: 8px !important; } .sglv-switch { position: relative !important; display: inline-block !important; width: 32px !important; height: 18px !important; } .sglv-switch input { opacity: 0 !important; width: 0 !important; height: 0 !important; } .sglv-slider { position: absolute !important; cursor: pointer !important; inset: 0 !important; background-color: rgba(255,255,255,0.1) !important; transition: .2s !important; border-radius: 18px !important; border: 1px solid rgba(255,255,255,0.05) !important; } .sglv-slider:before { position: absolute !important; content: "" !important; height: 12px !important; width: 12px !important; left: 2px !important; bottom: 2px !important; background-color: #8a9ba8 !important; transition: .2s !important; border-radius: 50% !important; } input:checked + .sglv-slider { background-color: rgba(102,192,244,0.2) !important; border-color: rgba(102,192,244,0.4) !important; } input:checked + .sglv-slider:before { transform: translateX(14px) !important; background-color: var(--sglv-accent) !important; } .sglv-pub-layout { display: flex !important; height: 100% !important; overflow: hidden !important; } .sglv-pub-sidebar { width: 260px !important; min-width: 260px !important; background: rgba(22, 32, 44, 0.8) !important; border-right: 1px solid var(--sglv-border) !important; overflow-y: auto !important; } .sglv-pub-main { flex: 1 !important; overflow-y: auto !important; padding: 16px !important; } .sglv-pub-list { display: flex; flex-direction: column; } .sglv-pub-list-header { display: flex; align-items: center; padding: 8px 12px; font-size: 11px; font-weight: 600; color: var(--sglv-text-secondary); border-bottom: 1px solid rgba(255,255,255,0.06); text-transform: uppercase; letter-spacing: 0.5px; } .sglv-pub-list-row { display: flex; align-items: center; padding: 9px 12px; text-decoration: none !important; color: inherit !important; border-bottom: 1px solid rgba(255,255,255,0.03); transition: background 0.15s; cursor: pointer; } .sglv-pub-list-row:hover { background: rgba(102, 192, 244, 0.06); } .sglv-pub-list-col { display: flex; align-items: center; } .sglv-pub-list-col.name { flex: 1; min-width: 0; font-size: 13px; color: #e0e0e0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sglv-pub-list-col.appid { font-size: 11px; color: var(--sglv-text-secondary); text-align: right; } .sglv-view-toggle { display: flex; align-items: center; gap: 2px; } .sglv-view-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 28px; border: 1px solid rgba(255,255,255,0.1); border-radius: 5px; background: rgba(255,255,255,0.04); color: var(--sglv-text-secondary); cursor: pointer; transition: all 0.15s; padding: 0; } .sglv-view-btn:hover { background: rgba(255,255,255,0.08); color: #e0e0e0; } .sglv-view-btn.active { background: rgba(102, 192, 244, 0.15); border-color: rgba(102, 192, 244, 0.4); color: #66c0f4; } .sglv-view-btn svg { width: 16px; height: 16px; } .sglv-pub-item { border-bottom: 1px solid rgba(255,255,255,0.03) !important; } .sglv-pub-header { display: flex !important; align-items: center !important; padding: 10px 14px !important; cursor: pointer !important; transition: background 0.2s !important; gap: 8px !important; user-select: none !important; } .sglv-pub-header:hover { background: rgba(255,255,255,0.05) !important; } .sglv-pub-header.active { background: rgba(102,192,244,0.1) !important; } .sglv-pub-arrow { width: 14px !important; height: 14px !important; transition: transform 0.2s !important; flex-shrink: 0 !important; fill: #8f98a0 !important; } .sglv-pub-arrow.expanded { transform: rotate(90deg) !important; } .sglv-pub-name { flex: 1; font-size: 13px; font-weight: 600; color: #e0e0e0; } .sglv-pub-stats { font-size: 11px; color: #8f98a0; background: rgba(255,255,255,0.05); padding: 2px 8px; border-radius: 10px; } .sglv-series-list { display: none; background: rgba(0,0,0,0.15); } .sglv-series-list.expanded { display: block; } .sglv-series-header { display: flex !important; align-items: center !important; padding: 8px 14px 8px 32px !important; cursor: pointer !important; transition: background 0.2s !important; gap: 6px !important; user-select: none !important; } .sglv-series-header:hover { background: rgba(255,255,255,0.05) !important; } .sglv-series-header.active { background: rgba(102,192,244,0.08) !important; } .sglv-series-name { flex: 1; font-size: 12px; color: #c7d5e0; } .sglv-series-stats { font-size: 11px; color: #8f98a0; } .sglv-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; flex-wrap: wrap; } /* v2.3.22: 供应商分类 KPI 卡片——与其他页面统一精美样式(图标+数值+光晕+边框色),保留标签+数值展示布局 */ .sglv-stat-card { flex: 1 !important; min-width: 100px !important; padding: 6px 10px 5px !important; border-radius: var(--sglv-radius) !important; background: var(--sglv-kpi-bg) !important; border: 1px solid var(--sglv-border) !important; } .sglv-stat-header { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; } .sglv-stat-label { font-size: 11px; color: var(--sglv-text-secondary); text-transform: uppercase; margin-bottom: 0; } .sglv-stat-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px; margin-bottom: 0; flex-shrink: 0; } .sglv-stat-icon svg { width: 11px; height: 11px; } .sglv-stat-dash-sub { font-size: 9px; color: var(--sglv-text-secondary); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.8; } .sglv-stat-val { font-size: 20px; font-weight: 800; color: #fff; line-height: 1.2; } /* v2.3.28: stat-card 颜色变体 border-color/::before 已合并至共享 KPI 颜色修饰符,仅保留图标样式 */ .sglv-stat-card.blue .sglv-stat-icon { background: rgba(102,192,244,0.15); color: #66c0f4; } .sglv-stat-val.green { color: #4caf50; } .sglv-stat-val.red { color: #f44336; } .sglv-stat-val.blue { color: #66c0f4; } .sglv-stat-card.green .sglv-stat-icon { background: rgba(34,197,94,0.15); color: #22c55e; } .sglv-stat-card.red .sglv-stat-icon { background: rgba(244,67,54,0.15); color: #f44336; } .sglv-stat-card.amber .sglv-stat-icon { background: rgba(245,158,11,0.15); color: #fbbf24; } .sglv-stat-card.purple .sglv-stat-icon { background: rgba(139,92,246,0.15); color: #a78bfa; } .sglv-progress { width: 100%; height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; margin: 8px 0; } .sglv-progress-fill { height: 100%; background: linear-gradient(90deg, #4caf50, #66c0f4); border-radius: 3px; transition: width 0.5s; } .sglv-progress-filter { display: flex !important; height: 12px !important; cursor: pointer !important; } .sglv-progress-filter .sglv-progress-fill { cursor: pointer !important; transition: width 0.4s, filter 0.2s !important; } .sglv-progress-filter .sglv-progress-fill:hover { filter: brightness(1.35) !important; } .sglv-progress-filter .sglv-progress-fill.active { filter: brightness(1.4) !important; } .sglv-progress-rest { flex: 1; height: 100%; background: rgba(255,255,255,0.08); cursor: pointer !important; transition: background 0.2s !important; } .sglv-progress-rest:hover { background: rgba(244,67,54,0.25) !important; } .sglv-progress-rest.active { background: rgba(244,67,54,0.4) !important; } .sglv-settings { padding: 16px; } .sglv-form-group { margin-bottom: 16px; } .sglv-form-group label { display: block; font-size: 12px; color: var(--sglv-text-secondary); margin-bottom: 6px; font-weight: 600; } .sglv-form-input { width: 100% !important; padding: 8px 12px !important; background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 6px !important; color: #fff !important; font-size: 13px !important; box-sizing: border-box !important; } .sglv-form-input:focus { border-color: rgba(102,192,244,0.5) !important; outline: none !important; } .sglv-tip { background: rgba(102,192,244,0.08) !important; padding: 12px !important; border-radius: 8px !important; font-size: 12px !important; color: var(--sglv-text-secondary) !important; margin-bottom: 16px !important; line-height: 1.6 !important; border: 1px solid rgba(102,192,244,0.15) !important; } .sglv-tip a { color: #60a5fa; text-decoration: none; } .sglv-tip a:hover { text-decoration: underline; } .sglv-toast { position: fixed !important; bottom: 50px !important; left: 50% !important; transform: translateX(-50%) translateY(20px) !important; background: rgba(15,23,42,0.95) !important; color: #fff !important; border: 1px solid var(--sglv-accent) !important; padding: 10px 24px !important; border-radius: 20px !important; font-size: 13px !important; font-weight: 500 !important; box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important; z-index: 10000000 !important; opacity: 0 !important; pointer-events: none !important; transition: opacity 0.3s, transform 0.3s !important; } .sglv-toast.show { opacity: 1 !important; transform: translateX(-50%) translateY(0) !important; } .sglv-gs-overlay { position: fixed !important; inset: 0 !important; background: rgba(11, 17, 32, 0.85) !important; z-index: 10000001 !important; display: none !important; align-items: center !important; justify-content: center !important; } .sglv-gs-overlay.sglv-show { display: flex !important; } .sglv-gs-panel { width: 520px !important; max-width: calc(100vw - 40px) !important; max-height: 85vh !important; overflow-y: auto !important; background: var(--sglv-bg) !important; border: 1px solid var(--sglv-border) !important; border-radius: var(--sglv-radius) !important; box-shadow: var(--sglv-shadow) !important; font-family: "Motiva Sans", Arial, Helvetica, sans-serif !important; color: var(--sglv-text) !important; } .sglv-gs-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 14px 20px !important; background: linear-gradient(135deg, #1b2838, #2a475e) !important; border-bottom: 1px solid var(--sglv-border) !important; border-radius: var(--sglv-radius) var(--sglv-radius) 0 0 !important; flex-shrink: 0 !important; } .sglv-gs-header h3 { margin: 0 !important; font-size: 15px !important; font-weight: 600 !important; color: #fff !important; display: flex !important; align-items: center !important; gap: 8px !important; white-space: nowrap !important; min-width: 0 !important; } .sglv-gs-close { width: 28px !important; height: 28px !important; border-radius: 6px !important; border: none !important; background: rgba(255,255,255,0.08) !important; color: #8a9ba8 !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; } .sglv-gs-close:hover { background: rgba(255,255,255,0.15) !important; color: #fff !important; } .sglv-gs-close svg { width: 14px; height: 14px; } .sglv-gs-body { padding: 20px !important; } .sglv-gs-section { margin-bottom: 20px !important; padding-bottom: 16px !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; } .sglv-gs-section:last-child { border-bottom: none !important; margin-bottom: 0 !important; } .sglv-gs-section-title { font-size: 13px !important; font-weight: 700 !important; color: var(--sglv-accent) !important; margin-bottom: 12px !important; display: flex !important; align-items: center !important; gap: 6px !important; } .sglv-gs-section-title svg { width: 16px; height: 16px; } .sgis-ai-toggle-bar { display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 10px !important; padding: 6px 10px !important; background: rgba(59, 130, 246, 0.08) !important; border-radius: 8px !important; border: 1px solid rgba(59, 130, 246, 0.15) !important; } .sgis-ai-toggle { display: inline-flex !important; border-radius: 6px !important; overflow: hidden !important; border: 1px solid rgba(255,255,255,0.1) !important; } .sgis-ai-toggle-btn { padding: 4px 12px !important; font-size: 11px !important; font-weight: 600 !important; border: none !important; background: rgba(255,255,255,0.04) !important; color: var(--sgis-text-2) !important; cursor: pointer !important; transition: all 0.2s !important; } .sgis-ai-toggle-btn.active { background: rgba(59, 130, 246, 0.3) !important; color: #93c5fd !important; } .sgis-ai-toggle-btn:hover:not(.active) { background: rgba(255,255,255,0.08) !important; color: #fff !important; } .sgis-ai-status { font-size: 10px !important; color: var(--sgis-text-2) !important; margin-left: auto !important; } .sgis-ai-summary-item { padding: 8px 10px !important; background: rgba(59, 130, 246, 0.04) !important; border: 1px solid rgba(59, 130, 246, 0.1) !important; border-radius: 6px !important; margin-bottom: 6px !important; } .sgis-ai-summary-title { font-size: 12px !important; font-weight: 600 !important; color: #93c5fd !important; margin-bottom: 4px !important; line-height: 1.4 !important; } .sgis-ai-summary-text { font-size: 11px !important; color: var(--sgis-text) !important; line-height: 1.6 !important; } .sgis-ai-summary-badge { display: inline-block !important; font-size: 9px !important; padding: 1px 5px !important; border-radius: 3px !important; background: rgba(59, 130, 246, 0.2) !important; color: #93c5fd !important; font-weight: 600 !important; margin-left: 4px !important; } .sglv-loading { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 60px 20px !important; color: var(--sglv-text-secondary) !important; gap: 12px !important; } .sglv-spinner { width: 32px !important; height: 32px !important; border: 3px solid rgba(255,255,255,0.1) !important; border-top-color: var(--sglv-accent) !important; border-radius: 50% !important; animation: sglv-spin 0.8s linear infinite !important; } @keyframes sglv-spin { to { transform: rotate(360deg); } } .sglv-refresh-btn.sglv-spin svg { animation: sglv-spin 1s linear infinite; } .sglv-stats-dashboard { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 12px 16px; background: var(--sglv-section-bg); border-bottom: 1px solid var(--sglv-border); flex-shrink: 0; } /* v2.3.28: .sglv-stat-dash-card 基类/hover/::before 已合并至顶部共享 KPI 卡片样式 */ .sglv-stat-dash-header { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; } .sglv-stat-dash-value { font-size: 17px; font-weight: 800; color: #fff; line-height: 1.2; } .sglv-stat-dash-label { font-size: 10px; color: var(--sglv-text-secondary); margin-top: 0; } .sglv-stat-dash-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 5px; margin-bottom: 0; flex-shrink: 0; } .sglv-stat-dash-icon svg { width: 10px; height: 10px; } .sglv-stat-dash-sub { font-size: 9px; color: var(--sglv-text-secondary); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.8; } /* v2.3.28: stat-dash-card 颜色变体 border-color/::before 已合并至共享 KPI 颜色修饰符,仅保留数值+图标样式 */ .sglv-stat-dash-card.blue .sglv-stat-dash-value { color: #66c0f4; } .sglv-stat-dash-card.blue .sglv-stat-dash-icon { background: rgba(102,192,244,0.15); color: #66c0f4; } .sglv-stat-dash-card.green .sglv-stat-dash-value { color: #22c55e; } .sglv-stat-dash-card.green .sglv-stat-dash-icon { background: rgba(34,197,94,0.15); color: #22c55e; } .sglv-stat-dash-card.amber .sglv-stat-dash-value { color: #fbbf24; } .sglv-stat-dash-card.amber .sglv-stat-dash-icon { background: rgba(245,158,11,0.15); color: #fbbf24; } .sglv-stat-dash-card.purple .sglv-stat-dash-value { color: #a78bfa; } .sglv-stat-dash-card.purple .sglv-stat-dash-icon { background: rgba(139,92,246,0.15); color: #a78bfa; } .sglv-stat-dash-card.red .sglv-stat-dash-value { color: #f44336; } .sglv-stat-dash-card.red .sglv-stat-dash-icon { background: rgba(244,67,54,0.15); color: #f44336; } @media (max-width: 768px) { .sglv-stats-dashboard { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 480px) { .sglv-stats-dashboard { grid-template-columns: repeat(2, 1fr); } } .sglv-category-bar { display: flex; align-items: center; gap: 6px; padding: 5px 12px; background: rgba(15, 23, 42, 0.3); border-bottom: 1px solid var(--sglv-border); flex-shrink: 0; flex-wrap: wrap; } .sglv-category-btn { padding: 2px 7px; border-radius: 11px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: var(--sglv-text-secondary); font-size: 11px; font-weight: 600; cursor: pointer; transition: var(--sglv-transition); white-space: nowrap; } .sglv-category-btn:hover { background: rgba(255,255,255,0.1); color: #fff; } .sglv-category-btn.active { background: rgba(102,192,244,0.2); border-color: rgba(102,192,244,0.4); color: var(--sglv-accent); } .sglv-delisted-subtabs { display: flex; gap: 6px; padding: 0 16px 10px; flex-shrink: 0; flex-wrap: wrap; } .sglv-delisted-subtab { padding: 5px 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); color: var(--sglv-text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; transition: var(--sglv-transition); } .sglv-delisted-subtab:hover { background: rgba(255,255,255,0.08); color: #fff; } .sglv-delisted-subtab.active { background: rgba(244,67,54,0.15); border-color: rgba(244,67,54,0.35); color: #f87171; } .sglv-delisted-type-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; } .sglv-delisted-type-row .sglv-delisted-pagination { padding: 4px 8px !important; background: transparent !important; border: none !important; margin-left: auto !important; flex-shrink: 0; } .sglv-delisted-summary-bar .sglv-delisted-pagination { padding: 4px 8px !important; background: transparent !important; border: none !important; margin-left: auto !important; flex-shrink: 0; } .sglv-empty { text-align: center !important; padding: 40px 20px !important; color: var(--sglv-text-secondary) !important; font-size: 13px !important; } .sglv-trend-wrap { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; min-height: 0; } .sglv-trend-section { background: var(--sglv-section-bg); border: 1px solid var(--sglv-border); border-radius: var(--sglv-radius); padding: 12px; margin-bottom: 12px; flex-shrink: 0; display: flex; flex-direction: column; min-height: 0; } .sglv-trend-section-main { flex: 1 1 auto; margin-bottom: 0; min-height: 0; overflow: hidden; } .sglv-trend-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; flex-shrink: 0; } /* v2.3.28: .sglv-trend-kpi-card 基类/hover/::before 已合并至顶部共享 KPI 卡片样式 */ .sglv-trend-kpi-header { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; } .sglv-trend-kpi-value { font-size: 20px; font-weight: 800; color: #fff; line-height: 1.2; } .sglv-trend-kpi-label { font-size: 11px; color: var(--sglv-text-secondary); margin-top: 0; } .sglv-trend-kpi-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px; margin-bottom: 0; flex-shrink: 0; } .sglv-trend-kpi-icon svg { width: 11px; height: 11px; } .sglv-trend-kpi-sub { font-size: 9px; color: var(--sglv-text-secondary); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.8; } .sglv-trend-kpi-card.mine { border-color: rgba(34,197,94,0.35); } .sglv-trend-kpi-card.mine .sglv-trend-kpi-value { color: #22c55e; } .sglv-trend-kpi-card.mine::before { background: #22c55e; } .sglv-trend-kpi-card.mine .sglv-trend-kpi-icon { background: rgba(34,197,94,0.15); color: #22c55e; } .sglv-trend-kpi-card.total { border-color: rgba(129,140,248,0.35); } .sglv-trend-kpi-card.total .sglv-trend-kpi-value { color: #818cf8; } .sglv-trend-kpi-card.total::before { background: #818cf8; } .sglv-trend-kpi-card.total .sglv-trend-kpi-icon { background: rgba(129,140,248,0.15); color: #818cf8; } @media (max-width: 600px) { .sglv-trend-kpi-row { grid-template-columns: repeat(2, 1fr); } } .sglv-trend-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; } .sglv-trend-header svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--sglv-accent); } .sglv-trend-title { font-size: 15px; font-weight: 700; color: #fff; flex-shrink: 0; } .sglv-trend-subtitle { font-size: 12px; color: var(--sglv-text-secondary); margin-bottom: 14px; } .sglv-trend-chart { position: relative; width: 100%; flex: 1; min-height: 320px; display: flex; flex-direction: column; } .sglv-trend-chart svg { display: block; width: 100%; flex: 1; min-height: 0; } .sglv-trend-bar { transition: opacity .15s; cursor: pointer; } /* v2.4.3: 入库趋势动态——左趋势图 + 右入库时间线 分栏布局 */ .sglv-trend-split { display: flex; gap: 12px; flex: 1 1 auto; min-height: 0; } .sglv-trend-split-left { flex: 1.6; min-width: 0; display: flex; flex-direction: column; } .sglv-trend-split-left .sglv-trend-section { flex: 1; margin-bottom: 0; } .sglv-trend-split-right { flex: 1; min-width: 0; display: flex; flex-direction: column; } .sglv-tl-section { background: var(--sglv-section-bg); border: 1px solid var(--sglv-border); border-radius: var(--sglv-radius); padding: 12px; display: flex; flex-direction: column; flex: 1; min-height: 0; } .sglv-tl-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-shrink: 0; } .sglv-tl-count { display: flex; align-items: center; gap: 6px; background: rgba(102,192,244,0.1); border: 1px solid rgba(102,192,244,0.25); border-radius: 8px; padding: 5px 10px; white-space: nowrap; } .sglv-tl-count-num { font-size: 16px; font-weight: 700; color: var(--sglv-accent); } .sglv-tl-count-label { font-size: 10px; color: var(--sglv-text-secondary); } .sglv-tl-search { flex: 1; min-width: 0; padding: 6px 12px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; color: #fff; font-size: 12px; outline: none; } .sglv-tl-search:focus { border-color: rgba(102,192,244,0.5); } .sglv-tl-search::placeholder { color: #5a6a7a; } .sglv-tl-scroll { flex: 1; overflow-y: auto; min-height: 0; padding-right: 2px; } .sglv-tl-scroll::-webkit-scrollbar { width: var(--sglv-scrollbar-width); } .sglv-tl-scroll::-webkit-scrollbar-thumb { background: var(--sglv-scrollbar-thumb); border-radius: 3px; } .sglv-tl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .sglv-tl-divider { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; } .sglv-tl-grid > .sglv-tl-divider:first-child { margin-top: 0; } .sglv-tl-divider-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(102,192,244,0.45), transparent); } .sglv-tl-date { font-size: 11px; font-weight: 600; color: var(--sglv-accent); white-space: nowrap; letter-spacing: 0.5px; } .sglv-tl-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 8px; overflow: hidden; cursor: pointer; transition: var(--sglv-transition); min-width: 0; } .sglv-tl-card:hover { background: rgba(255,255,255,0.08); border-color: rgba(102,192,244,0.35); transform: translateY(-1px); } .sglv-tl-card .sglv-card-img { height: auto !important; aspect-ratio: 460 / 175; background: rgba(255,255,255,0.05); } .sglv-tl-card-info { padding: 5px 8px 6px; } .sglv-tl-card-name { font-size: 11px; color: var(--sglv-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sglv-tl-card-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; font-size: 10px; } .sglv-tl-card-time { color: var(--sglv-text-secondary); } .sglv-tl-card-check { color: #34d399; font-weight: 700; } .sglv-tl-pagination { padding: 8px 0 0 !important; background: transparent !important; border-top: none !important; } @media (max-width: 900px) { .sglv-trend-split { flex-direction: column; overflow-y: auto; } .sglv-trend-split-left, .sglv-trend-split-right { flex: none; } .sglv-trend-split-left .sglv-trend-section { min-height: 340px; } .sglv-tl-section { min-height: 420px; } } .sglv-trend-bar:hover { opacity: 0.78; } .sglv-trend-bar-member { transition: opacity .15s; } .sglv-trend-bar-member:hover { opacity: 1 !important; } .sglv-trend-tooltip { position: absolute !important; pointer-events: none !important; background: rgba(15, 23, 42, 0.96) !important; border: 1px solid rgba(102, 192, 244, 0.3) !important; border-radius: 8px !important; padding: 10px 14px !important; font-size: 12px !important; color: #fff !important; box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important; opacity: 0 !important; transition: opacity 0.15s !important; z-index: 10 !important; min-width: 140px !important; } .sglv-trend-tooltip-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 3px 0; } .sglv-trend-tooltip-label { display: flex; align-items: center; gap: 6px; color: #94a3b8; } .sglv-trend-tooltip-dot { width: 8px; height: 8px; border-radius: 50%; } .sglv-trend-tooltip-value { font-weight: 700; font-variant-numeric: tabular-nums; } .sglv-trend-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(102, 192, 244, 0.12); flex-shrink: 0; } .sglv-trend-legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #94a3b8; } .sglv-trend-legend-dot { width: 10px; height: 10px; border-radius: 2px; } .sglv-trend-legend-line { width: 18px; height: 2px; border-radius: 2px; } .sglv-trend-summary { display: flex; justify-content: space-around; margin-top: 10px; font-size: 11px; color: #94a3b8; flex-shrink: 0; } .sglv-trend-note { font-size: 11px; color: #94a3b8; margin-top: 10px; padding: 8px 10px; background: rgba(255,255,255,0.04); border-radius: 6px; flex-shrink: 0; } @media(max-width:768px) { .sglv-panel { width: 100vw !important; max-width: 100vw !important; height: 100vh !important; max-height: 100vh !important; border-radius: 0 !important; } .sglv-pub-sidebar { width: 200px !important; min-width: 200px !important; } .sglv-card-grid { grid-template-columns: repeat(2, 1fr) !important; } .sglv-trend-section { padding: 12px !important; } } .sglv-delisted-wrap { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; } .sglv-delisted-toolbar { flex-wrap: wrap; gap: 6px; } .sglv-delisted-filter-group { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .sglv-delisted-sub-group { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-wrap: wrap; } .sglv-delisted-type-btn { font-size: 11px !important; padding: 4px 10px !important; } .sglv-delisted-type-btn.active { background: rgba(244,67,54,0.2) !important; border-color: rgba(244,67,54,0.4) !important; color: #f44336 !important; } .sglv-delisted-sub-btn { font-size: 11px !important; padding: 4px 10px !important; border-radius: 6px !important; } .sglv-delisted-sub-btn.active { background: rgba(34,197,94,0.2) !important; border-color: rgba(34,197,94,0.4) !important; color: #22c55e !important; } .sglv-delisted-card { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.06) !important; border-radius: 8px !important; padding: 10px 14px !important; transition: var(--sglv-transition) !important; cursor: pointer !important; margin-bottom: 6px !important; } .sglv-delisted-card:hover { background: rgba(255,255,255,0.08) !important; border-color: rgba(244,67,54,0.3) !important; transform: translateY(-1px) !important; } .sglv-delisted-badge { display: inline-block !important; font-size: 10px !important; font-weight: 600 !important; padding: 1px 6px !important; border-radius: 3px !important; } .sglv-delisted-badge.type-delisted { background: rgba(244,67,54,0.2) !important; color: #f44336 !important; } .sglv-delisted-badge.type-purchase_disabled { background: rgba(255,152,0,0.2) !important; color: #ff9800 !important; } .sglv-delisted-badge.type-f2p_unavailable { background: rgba(156,39,176,0.2) !important; color: #ce93d8 !important; } .sglv-delisted-badge.type-retail_only { background: rgba(33,150,243,0.2) !important; color: #64b5f6 !important; } .sglv-delisted-badge.type-test_app { background: rgba(158,158,158,0.2) !important; color: #9e9e9e !important; } .sglv-delisted-owners { font-size: 10px !important; color: var(--sglv-text-secondary) !important; } .sglv-delisted-date { font-size: 10px !important; color: var(--sglv-text-secondary) !important; } .sglv-delisted-achievements { font-size: 10px !important; color: #66c0f4 !important; } /* v2.3.22: 绝版页面紧凑分类汇总 + 收藏进度条(置于分页操作栏下方) */ .sglv-delisted-summary-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex-shrink: 0; } .sglv-delisted-summary-badges { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; flex: 1; min-width: 0; } .sglv-delisted-summary-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px; cursor: pointer; transition: var(--sglv-transition); white-space: nowrap; } .sglv-delisted-summary-badge:hover { filter: brightness(1.3); transform: translateY(-1px); } .sglv-delisted-summary-badge .sglv-dsb-owned { font-weight: 700; } .sglv-delisted-summary-badge .sglv-dsb-sep { opacity: 0.5; } .sglv-delisted-summary-badge .sglv-dsb-total { opacity: 0.8; } .sglv-delisted-progress-compact { display: flex; align-items: center; gap: 8px; padding: 4px 0 8px; flex-shrink: 0; } .sglv-delisted-progress-compact .sglv-dpc-label { font-size: 11px; color: var(--sglv-text-secondary); white-space: nowrap; flex-shrink: 0; } .sglv-delisted-progress-compact .sglv-dpc-track { flex: 1; height: 8px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; position: relative; } .sglv-delisted-progress-compact .sglv-dpc-fill { height: 100%; background: linear-gradient(90deg, #22c55e, #66c0f4); border-radius: 4px; transition: width 0.5s; } .sglv-delisted-progress-compact .sglv-dpc-pct { font-size: 12px; font-weight: 700; color: #66c0f4; white-space: nowrap; flex-shrink: 0; min-width: 36px; text-align: right; } .sglv-playtime-wrap { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; } .sglv-playtime-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; flex-shrink: 0; } /* v2.3.28: .sglv-playtime-kpi-card 基类/hover/::before 已合并至顶部共享 KPI 卡片样式 */ .sglv-playtime-kpi-header { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; } /* v2.3.28: playtime-kpi-card 颜色变体 border-color/::before 已合并至共享 KPI 颜色修饰符,仅保留数值+图标样式 */ .sglv-playtime-kpi-card.amber .sglv-playtime-kpi-value { color: #fbbf24; } .sglv-playtime-kpi-card.amber .sglv-playtime-kpi-icon { background: rgba(245,158,11,0.15); color: #fbbf24; } .sglv-playtime-kpi-card.green .sglv-playtime-kpi-value { color: #22c55e; } .sglv-playtime-kpi-card.green .sglv-playtime-kpi-icon { background: rgba(34,197,94,0.15); color: #22c55e; } .sglv-playtime-kpi-card.blue .sglv-playtime-kpi-value { color: #66c0f4; } .sglv-playtime-kpi-card.blue .sglv-playtime-kpi-icon { background: rgba(102,192,244,0.15); color: #66c0f4; } .sglv-playtime-kpi-card.purple .sglv-playtime-kpi-value { color: #a78bfa; } .sglv-playtime-kpi-card.purple .sglv-playtime-kpi-icon { background: rgba(139,92,246,0.15); color: #a78bfa; } .sglv-playtime-kpi-value { font-size: 20px; font-weight: 800; color: #fff; line-height: 1.2; } .sglv-playtime-kpi-label { font-size: 11px; color: var(--sglv-text-secondary); margin-top: 0; } .sglv-playtime-kpi-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px; margin-bottom: 0; flex-shrink: 0; } .sglv-playtime-kpi-icon svg { width: 11px; height: 11px; } .sglv-playtime-kpi-sub { font-size: 9px; color: var(--sglv-text-secondary); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.8; } /* v2.9.22: KPI 卡片 sparkline 迷你趋势线 + 进度条 */ .sglv-playtime-kpi-body { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 2px; } .sglv-playtime-kpi-body .sglv-playtime-kpi-value { flex: 1; min-width: 0; } .sglv-kpi-spark { flex-shrink: 0; opacity: 0.85; display: block; } .sglv-kpi-progress { height: 5px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; margin: 3px 0 2px; } .sglv-kpi-progress-fill { height: 100%; border-radius: 3px; transition: width 0.6s ease; min-width: 2px; } .sglv-kpi-progress-fill.cyan { background: linear-gradient(90deg, #22d3ee, #06b6d4); } .sglv-kpi-progress-fill.rose { background: linear-gradient(90deg, #fb7185, #f43f5e); } .sglv-playtime-section { background: var(--sglv-section-bg); border: 1px solid var(--sglv-border); border-radius: var(--sglv-radius); padding: 12px; margin-bottom: 12px; flex-shrink: 0; } .sglv-playtime-section-title { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; } .sglv-playtime-section-title svg { width: 16px; height: 16px; color: var(--sglv-accent); flex-shrink: 0; } .sglv-playtime-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; flex: 1 1 0; min-height: 0; align-items: stretch; } .sglv-playtime-col { background: var(--sglv-section-bg); border: 1px solid var(--sglv-border); border-radius: var(--sglv-radius); padding: 14px; min-width: 0; display: flex; flex-direction: column; align-items: stretch; } /* v2.9.22: 分布甜甜圈/趋势图内容区撑满列高 */ .sglv-playtime-col > #sglv-pt-donut { flex: 1; min-height: 0; display: flex; flex-direction: column; } .sglv-playtime-section-flex { flex: 1; display: flex; flex-direction: column; min-height: 0; margin-bottom: 0; } .sglv-playtime-section-flex .sglv-pt-all-list { flex: 1; overflow-y: auto; max-height: none; min-height: 120px; } .sglv-playtime-split-row { display: grid; grid-template-columns: minmax(280px, 2fr) minmax(0, 3fr); gap: 12px; flex: 1 1 0; min-height: 0; margin-bottom: 0; } .sglv-family-compare-section { background: var(--sglv-section-bg); border: 1px solid var(--sglv-border); border-radius: var(--sglv-radius); padding: 14px; margin-bottom: 12px; flex-shrink: 0; } .sglv-family-compare-container { margin-top: 8px; max-height: 152px; overflow-y: auto; } .sglv-family-bar-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.04); } .sglv-family-bar-row:last-child { border-bottom: none; } .sglv-family-bar-row.is-me .sglv-family-bar-name { color: #66c0f4; font-weight: 700; } .sglv-family-bar-row.is-me .sglv-family-bar-fill { background: linear-gradient(90deg, #66c0f4, #4a9eda); } .sglv-family-bar-name { width: 80px; min-width: 80px; font-size: 13px; color: #c0c8d0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sglv-family-bar-track { flex: 1; height: 22px; background: rgba(255,255,255,0.05); border-radius: 4px; overflow: hidden; } .sglv-family-bar-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #4caf50, #2e7d32); transition: width 0.6s ease; min-width: 2px; } .sglv-family-bar-hours { width: 70px; min-width: 70px; text-align: right; font-size: 13px; font-weight: 600; color: #e0e0e0; } .sglv-playtime-split-left { background: var(--sglv-section-bg); border: 1px solid var(--sglv-border); border-radius: var(--sglv-radius); padding: 12px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .sglv-playtime-split-left #sglv-pt-top-list { flex: 1; overflow-y: auto; min-height: 0; } .sglv-playtime-split-right { background: var(--sglv-section-bg); border: 1px solid rgba(244,67,54,0.2); border-radius: var(--sglv-radius); padding: 12px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .sglv-playtime-split-right .sglv-pt-all-list { flex: 1; overflow-y: auto; max-height: none; min-height: 0; } .sglv-trend-filter { display: flex; gap: 4px; } .sglv-trend-btn { padding: 3px 8px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: var(--sglv-text-secondary); font-size: 11px; cursor: pointer; transition: var(--sglv-transition); } .sglv-trend-btn:hover { background: rgba(255,255,255,0.1); color: #fff; } .sglv-trend-btn.active { background: rgba(102,192,244,0.2); border-color: rgba(102,192,244,0.4); color: var(--sglv-accent); } .sglv-pt-trend-chart { width: 100%; flex: 1; min-height: 0; display: flex; align-items: center; } .sglv-pt-trend-chart .sglv-empty { width: 100%; } .sglv-trend-svg { width: 100% !important; height: 100% !important; overflow: visible; display: block; } .sglv-donut-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 0; padding: 4px 0; } .sglv-donut-chart { display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sglv-donut-chart svg { display: block; max-width: 100%; height: auto; } .sglv-donut-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; width: 100%; max-width: 360px; padding: 0 4px; } .sglv-donut-legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #c7d5e0; min-width: 0; } .sglv-donut-legend-dot { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; } .sglv-donut-legend-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sglv-donut-legend-value { font-weight: 600; color: #e0e0e0; font-variant-numeric: tabular-nums; white-space: nowrap; } .sglv-donut-legend-pct { color: #8a9ba8; font-weight: 400; } .sglv-pt-top-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); border-radius: 8px; margin-bottom: 5px; transition: var(--sglv-transition); cursor: pointer; } .sglv-pt-top-item:hover { background: rgba(255,255,255,0.07); border-color: rgba(102,192,244,0.2); transform: translateX(2px); } .sglv-pt-top-item.rank-1 { border-left: 3px solid #fbbf24; background: rgba(251,191,36,0.06); } .sglv-pt-top-item.rank-2 { border-left: 3px solid #94a3b8; background: rgba(148,163,184,0.06); } .sglv-pt-top-item.rank-3 { border-left: 3px solid #cd7f32; background: rgba(205,127,50,0.06); } .sglv-pt-rank { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0; background: rgba(255,255,255,0.06); color: var(--sglv-text-secondary); } .sglv-pt-rank.r1 { background: rgba(251,191,36,0.2); color: #fbbf24; } .sglv-pt-rank.r2 { background: rgba(148,163,184,0.2); color: #cbd5e1; } .sglv-pt-rank.r3 { background: rgba(205,127,50,0.2); color: #d4986a; } .sglv-pt-icon { width: 40px; height: 40px; border-radius: 4px; flex-shrink: 0; object-fit: cover; background: rgba(255,255,255,0.05); } .sglv-pt-info { flex: 1; min-width: 0; } .sglv-pt-name { font-size: 13px; font-weight: 600; color: #e0e0e0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sglv-pt-meta { font-size: 11px; color: var(--sglv-text-secondary); margin-top: 2px; } .sglv-pt-bar-wrap { flex: 1; min-width: 60px; height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; } .sglv-pt-bar-fill { height: 100%; background: linear-gradient(90deg, #fbbf24, #f97316); border-radius: 3px; transition: width 0.3s ease; } .sglv-pt-hours { font-size: 13px; font-weight: 700; color: #fbbf24; white-space: nowrap; min-width: 55px; text-align: right; flex-shrink: 0; } /* v1.0.3 「全部游戏」列表布局归属收敛 —— 本段原有 .sglv-pt-all-item{display:flex;gap:8px} 等 6 条 flex 版定义,与 PTW 库(sglv-ptw-tab-all)的 grid 版 grid-template-columns:36px 32px minmax(0,1fr) minmax(72px,120px) 60px 特异性相同(0,1,0), 胜负只取决于「哪张样式表最后注入」这一隐式契约:core 在 @require 期注入、PTW 在开窗时懒注入, 一旦 PTW 改成 require 期注入或 core 改成懒注入,行内元素就会整体错位。 现把布局唯一归属 PTW 库,本处只保留「不依赖布局」的颜色/圆角/轨道外观, 避免双份布局互相覆盖。 */ .sglv-pt-all-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } .sglv-pt-all-list { overflow-y: auto; } .sglv-pt-all-item { background: var(--sglv-surface-1, rgba(255,255,255,.025)); border-radius: 6px; margin-bottom: 3px; cursor: pointer; } .sglv-pt-all-item:hover { background: var(--sglv-surface-3, rgba(255,255,255,.1)); } .sglv-pt-all-bar { height: 4px; background: var(--sglv-track, rgba(255,255,255,.07)); border-radius: 2px; overflow: hidden; } .sglv-pt-all-bar-fill { height: 100%; background: linear-gradient(90deg, var(--sglv-accent, #66c0f4), var(--sglv-success, #22c55e)); border-radius: 2px; } /* v2.3.28: 游玩数据底部——总时长分布水平条形图样式(参考 friend-manager 设计) */ /* v2.3.30: 底部行不再撑高(flex-grow:0),压缩容器高度避免大面积空白,把空间留给上方 Top20/全部游戏列表 */ .sglv-playdata-bottom-row { margin-top: 12px; flex: 0 0 auto; } .sglv-playdata-dist { overflow-y: auto; max-height: 260px; } .sglv-playdata-family { border-color: var(--sglv-border) !important; } .sglv-playdata-family .sglv-family-compare-section { padding: 0; margin-bottom: 0; background: transparent; border: none; box-shadow: none; } .sglv-playdata-family .sglv-family-compare-container { max-height: 152px; overflow-y: auto; } /* v2.3.30: "待加入"占位行——虚线轨道、暗淡文字,与真实成员区分 */ .sglv-family-bar-row.sglv-family-bar-pending { opacity: 0.55; } .sglv-family-bar-row.sglv-family-bar-pending .sglv-family-bar-name { color: #64748b; font-style: italic; } .sglv-family-bar-row.sglv-family-bar-pending .sglv-family-bar-track { border: 1px dashed rgba(255,255,255,0.1); background: transparent; } .sglv-family-bar-row.sglv-family-bar-pending .sglv-family-bar-hours { color: #64748b; } /* v2.3.30: 入库热力图样式(参考 steam-family-analysis 设计) */ .sglv-heatmap-section { background: var(--sglv-section-bg); border: 1px solid var(--sglv-border); border-radius: var(--sglv-radius); padding: 14px; flex-shrink: 0; min-width: 0; } /* v2.6.3: 入库热力图 + 近6月入库增量——左右分栏(热力图占主 2.5,增量占次 1);移动端 < 900px 改上下 */ /* v2.9.22: 热力图行 flex:1 撑满剩余高度,消除底部空余边距 */ .sglv-heatmap-acquire-row { display: flex; gap: 12px; align-items: stretch; width: 100%; box-sizing: border-box; flex: 1 1 0; min-height: 0; } .sglv-heatmap-acquire-row .sglv-heatmap-section { flex: 2.5 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; } .sglv-heatmap-acquire-row .sglv-heatmap-mini-section { flex: 1 1 0; min-width: 240px; max-width: 360px; min-height: 0; display: flex; flex-direction: column; } /* v2.9.22: 热力图内容区撑满 section 剩余高度并垂直居中 */ .sglv-heatmap-section > #sglv-pt-heatmap { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; } @media (max-width: 900px) { .sglv-heatmap-acquire-row { flex-direction: column; } .sglv-heatmap-acquire-row .sglv-heatmap-mini-section { max-width: none; min-width: 0; } } .sglv-heatmap-block { display: flex; flex-direction: column; gap: 2px; } .sglv-heatmap-scroll { overflow-x: auto; overflow-y: hidden; border-radius: 6px; padding-bottom: 4px; } /* v2.4.2: 热力图年份选择器——复用 sglv-trend-btn 样式,支持换行 */ .sglv-hm-year-filter { flex-wrap: wrap; margin-bottom: 6px; } /* v2.5.0: 热力图主体 + 右侧近6月入库增量——两栏等高对齐,mini 独立卡片 */ /* v2.6.3: 入库热力图与近6月入库增量——左右分栏布局;mini 段作为右栏独立 section */ .sglv-heatmap-mainrow { display: flex; gap: 12px; align-items: stretch; } .sglv-heatmap-mainrow .sglv-heatmap-body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .sglv-heatmap-body { display: flex; flex-direction: column; min-width: 0; } .sglv-hm-mini { width: 100%; display: flex; flex-direction: column; } /* v2.6.3: 独立 mini section——右栏容器,占满列宽,与左侧热力图等高对齐 */ .sglv-heatmap-mini-section { background: var(--sglv-section-bg); border: 1px solid var(--sglv-border); border-radius: var(--sglv-radius); padding: 12px 14px 10px; flex-shrink: 0; min-width: 0; display: flex; flex-direction: column; box-sizing: border-box; } .sglv-heatmap-mini-section .sglv-playtime-section-title { font-size: 13px !important; margin-bottom: 8px !important; } /* v2.6.3: mini 段内层——撑开列宽,柱图按列宽自适应(不再用 max-width 限制,避免右栏过宽时柱图被拉变形) */ .sglv-hm-mini-inner { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 8px; padding: 10px 8px 8px; display: flex; flex-direction: column; width: 100%; flex: 1; min-height: 0; box-sizing: border-box; } .sglv-hm-mini-title { font-size: 12px; font-weight: 700; color: var(--sglv-text); text-align: center; margin-bottom: 6px; flex-shrink: 0; } .sglv-hm-mini-chart { display: flex; align-items: center; justify-content: center; min-height: 0; width: 100%; flex: 1; } .sglv-hm-mini-chart svg { width: 100%; height: auto; max-height: 100%; } @media (max-width: 900px) { .sglv-heatmap-mainrow { flex-direction: column; } .sglv-hm-mini { width: 100%; } } .sglv-heatmap-scroll::-webkit-scrollbar { height: var(--sglv-scrollbar-width); } .sglv-heatmap-scroll::-webkit-scrollbar-thumb { background: var(--sglv-scrollbar-thumb); border-radius: 3px; } /* v2.4.9: 图例内嵌于统计摘要行——不再独立右对齐,避免溢出容器右下角 */ .sglv-heatmap-legend { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--sglv-text-secondary); margin-right: auto; } .sglv-heatmap-legend span { display: inline-block; } .sglv-heatmap-legend span.swatch { width: 11px; height: 11px; border-radius: 2px; } .sglv-heatmap-summary { display: flex; gap: 12px; font-size: 11px; color: var(--sglv-text-secondary); flex-wrap: wrap; margin-top: 4px; align-items: center; } .sglv-heatmap-summary b { color: var(--sglv-text); font-weight: 600; } .sglv-dist-bar-list { padding: 4px 0; } .sglv-dist-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; } .sglv-dist-bar-label { width: 72px; flex-shrink: 0; font-size: 11px; color: var(--sglv-text-secondary); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sglv-dist-bar-track { flex: 1; height: 18px; background: rgba(255,255,255,0.04); border-radius: 4px; overflow: hidden; min-width: 0; } .sglv-dist-bar-fill { height: 100%; border-radius: 4px; transition: width .3s ease; min-width: 2px; } .sglv-dist-bar-value { width: 72px; flex-shrink: 0; font-size: 11px; color: var(--sglv-text); text-align: left; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; } .sglv-dist-bar-pct { color: var(--sglv-text-secondary); font-weight: 400; } @media (max-width: 768px) { .sglv-playtime-row { grid-template-columns: 1fr; } .sglv-playtime-split-row { grid-template-columns: 1fr; } .sglv-playdata-bottom-row { grid-template-columns: 1fr; } } @media (max-width: 600px) { .sglv-playtime-kpi-row { grid-template-columns: repeat(2, 1fr); } .sglv-pt-bar-wrap { min-width: 40px; } } :root { --sgis-bg: linear-gradient(180deg, rgba(15, 17, 35, 0.98) 0%, rgba(11, 14, 28, 0.99) 100%); --sgis-bg-solid: #0c1024; --sgis-bg-2: rgba(15, 19, 42, 0.85); --sgis-bg-3: rgba(20, 24, 50, 0.7); --sgis-card: rgba(255, 255, 255, 0.025); --sgis-card-hover: rgba(255, 255, 255, 0.045); --sgis-border: rgba(139, 92, 246, 0.18); --sgis-border-soft: rgba(102, 192, 244, 0.1); --sgis-text: #e2e8f0; --sgis-text-2: #94a3b8; --sgis-text-3: #64748b; --sgis-text-dim: #475569; --sgis-blue: #66c0f4; --sgis-blue-2: #3b82f6; --sgis-green: #10b981; --sgis-green-text: #34d399; --sgis-purple: #8b5cf6; --sgis-purple-2: #a78bfa; --sgis-purple-text: #c4b5fd; --sgis-amber: #f59e0b; --sgis-amber-text: #fbbf24; --sgis-rose: #f43f5e; --sgis-rose-text: #f87171; --sgis-cyan: #06b6d4; --sgis-radius: 14px; --sgis-radius-sm: 8px; --sgis-shadow: 0 16px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(139, 92, 246, 0.08); --sgis-glow-purple: 0 0 24px rgba(139, 92, 246, 0.18); --sgis-glow-blue: 0 0 24px rgba(59, 130, 246, 0.18); --sgis-w: 440px; } #sgis-fab { position: fixed !important; top: 50% !important; right: 0 !important; transform: translateY(-50%) !important; width: 22px !important; height: 64px !important; background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 50%, #06b6d4 100%) !important; border: none !important; border-radius: 10px 0 0 10px !important; cursor: pointer !important; z-index: 1000003 !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #fff !important; box-shadow: -4px 0 18px rgba(102, 51, 238, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.15) !important; transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important; overflow: hidden; } #sgis-fab::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, transparent 50%); pointer-events: none; } #sgis-fab::after { content: ""; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 7px solid #fff; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5)); } #sgis-fab:hover { width: 28px !important; box-shadow: -6px 0 24px rgba(102, 51, 238, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.2) !important; } #sgis-fab:hover::after { border-right-width: 8px; } #sgis-fab.sgis-open { right: var(--sgis-w, 440px) !important; } #sgis-fab.sgis-open::after { transform: rotate(180deg); } #sgis-panel { position: fixed !important; top: 0 !important; right: 0 !important; width: var(--sgis-w, 440px) !important; min-width: var(--sgis-w, 440px) !important; max-width: var(--sgis-w, 440px) !important; box-sizing: border-box !important; height: 100vh !important; background: var(--sgis-bg) !important; border-left: 1px solid rgba(139, 92, 246, 0.22) !important; box-shadow: -16px 0 60px rgba(0, 0, 0, 0.65), inset 1px 0 0 rgba(255, 255, 255, 0.04) !important; z-index: 1000002 !important; display: flex !important; flex-direction: column !important; transform: translateX(100%) !important; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; color: #f8fafc !important; backdrop-filter: blur(20px) saturate(160%) !important; -webkit-backdrop-filter: blur(20px) saturate(160%) !important; overflow: hidden; } #sgis-panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(139, 92, 246, 0.5) 50%, transparent 100%); pointer-events: none; z-index: 5; } #sgis-panel.sgis-open { transform: translateX(0) !important; } .sgis-header { background: linear-gradient(135deg, rgba(139, 92, 246, 0.22) 0%, rgba(59, 130, 246, 0.12) 50%, var(--sgis-bg-2) 100%); padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(139, 92, 246, 0.2); flex-shrink: 0; position: relative; overflow: hidden; } .sgis-header::before { content: ""; position: absolute; top: -40px; left: -30px; width: 140px; height: 140px; background: radial-gradient(circle, rgba(139, 92, 246, 0.22) 0%, transparent 65%); pointer-events: none; } .sgis-header::after { content: ""; position: absolute; top: -30px; right: -30px; width: 130px; height: 130px; background: radial-gradient(circle, rgba(6, 182, 212, 0.18) 0%, transparent 65%); pointer-events: none; } .sgis-header-decoration { position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(139, 92, 246, 0.4) 50%, transparent 100%); } .sgis-title { font-size: 15px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 9px; position: relative; z-index: 2; min-width: 0; flex: 1; overflow: hidden; letter-spacing: 0.2px; } .sgis-title-text { background: linear-gradient(135deg, #fff 0%, #c4b5fd 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .sgis-title-icon { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2); position: relative; z-index: 1; } .sgis-title-icon::after { content: ""; position: absolute; inset: 1px; border-radius: 7px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, transparent 50%); pointer-events: none; } .sgis-title-icon svg { width: 14px; height: 14px; stroke: #fff; stroke-width: 2.4; fill: none; position: relative; z-index: 2; } .sgis-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sgis-title-actions { display: flex; gap: 4px; position: relative; z-index: 1; } .sgis-icon-btn { width: 30px; height: 30px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.05); cursor: pointer; display: flex; align-items: center; justify-content: center; color: #b8c5d6; transition: all 0.2s ease; position: relative; z-index: 2; } .sgis-icon-btn:hover { background: rgba(139, 92, 246, 0.18); border-color: rgba(139, 92, 246, 0.3); color: #fff; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(139, 92, 246, 0.25); } .sgis-icon-btn:active { transform: translateY(0); } .sgis-icon-btn.sgis-spin svg { animation: sgis-spin 0.8s linear infinite; } .sgis-icon-btn svg { width: 14px; height: 14px; } @keyframes sgis-spin { to { transform: rotate(360deg); } } .sgis-tabs { display: flex; background: linear-gradient(180deg, rgba(15, 19, 42, 0.7) 0%, rgba(11, 14, 28, 0.85) 100%); padding: 5px; gap: 4px; border-bottom: 1px solid rgba(139, 92, 246, 0.12); flex-shrink: 0; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); position: relative; z-index: 2; } .sgis-tab { flex: 1; border: none; background: transparent; color: var(--sgis-text-2); padding: 8px 6px; font-size: 12px; font-weight: 600; border-radius: 7px; cursor: pointer; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; justify-content: center; gap: 5px; position: relative; overflow: hidden; } .sgis-tab::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(59, 130, 246, 0.2)); opacity: 0; transition: opacity 0.25s ease; border-radius: 7px; } .sgis-tab:hover { color: #c4b5fd; } .sgis-tab:hover::before { opacity: 0.4; } .sgis-tab.active { color: #fff; box-shadow: 0 2px 8px rgba(139, 92, 246, 0.25), inset 0 0 0 1px rgba(139, 92, 246, 0.5); } .sgis-tab.active::before { opacity: 1; } .sgis-tab > * { position: relative; z-index: 1; } .sgis-tab svg { width: 13px; height: 13px; } .sgis-body { flex: 1; overflow-y: auto; padding: 14px 12px; scrollbar-width: thin; scrollbar-color: rgba(139, 92, 246, 0.4) transparent; position: relative; z-index: 1; } .sgis-body::-webkit-scrollbar { width: 6px; } .sgis-body::-webkit-scrollbar-track { background: transparent; } .sgis-body::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(139, 92, 246, 0.4), rgba(59, 130, 246, 0.4)); border-radius: 3px; } .sgis-body::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(139, 92, 246, 0.6), rgba(59, 130, 246, 0.6)); } .sgis-state { text-align: center; padding: 40px 20px; color: var(--sgis-text-2); } .sgis-retry-btn { padding: 7px 20px; font-size: 12px; font-weight: 600; border: 1px solid rgba(139, 92, 246, 0.4); border-radius: 7px; background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(59, 130, 246, 0.1)); color: #c4b5fd; cursor: pointer; transition: all 0.2s; } .sgis-retry-btn:hover { background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(59, 130, 246, 0.2)); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25); } .sgis-spinner { width: 36px; height: 36px; border: 3px solid rgba(139, 92, 246, 0.15); border-top-color: #8b5cf6; border-right-color: #3b82f6; border-radius: 50%; animation: sgis-spin 0.8s linear infinite; margin: 0 auto 12px; box-shadow: 0 0 16px rgba(139, 92, 246, 0.3); } .sgis-error { color: var(--sgis-rose-text); } .sgis-hero { position: relative; background: linear-gradient(135deg, rgba(102, 192, 244, 0.15) 0%, rgba(139, 92, 246, 0.1) 50%, var(--sgis-bg-2) 100%); border: 1px solid rgba(102, 192, 244, 0.28); border-radius: var(--sgis-radius); padding: 14px; margin-bottom: 12px; display: flex; gap: 12px; align-items: flex-start; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.04); } .sgis-hero::before { content: ""; position: absolute; top: -40px; right: -30px; width: 130px; height: 130px; background: radial-gradient(circle, rgba(102, 192, 244, 0.18) 0%, transparent 60%); pointer-events: none; } .sgis-hero::after { content: ""; position: absolute; bottom: -30px; left: -30px; width: 100px; height: 100px; background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, transparent 60%); pointer-events: none; } .sgis-hero-img { width: 132px; height: 50px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: rgba(0, 0, 0, 0.4); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); position: relative; z-index: 1; border: 1px solid rgba(255, 255, 255, 0.06); } .sgis-hero-info { flex: 1; min-width: 0; position: relative; z-index: 1; } .sgis-hero-name { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 5px; line-height: 1.3; word-break: break-word; letter-spacing: 0.1px; } .sgis-hero-meta { font-size: 11px; color: var(--sgis-text-2); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; } .sgis-hero-meta b { color: var(--sgis-text); font-weight: 600; } .sgis-hero-meta-pill { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; background: rgba(102, 192, 244, 0.12); border: 1px solid rgba(102, 192, 244, 0.2); border-radius: 10px; font-size: 10px; color: #c4e7ff; font-weight: 600; } .sgis-section { background: var(--sgis-card); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: var(--sgis-radius-sm); padding: 11px 12px; margin-bottom: 10px; transition: border-color 0.25s ease, background 0.25s ease; } .sgis-section:hover { border-color: rgba(139, 92, 246, 0.12); background: var(--sgis-card-hover); } .sgis-section-title { font-size: 11px; font-weight: 700; color: #a78bfa; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 9px; display: flex; align-items: center; gap: 6px; position: relative; padding-bottom: 6px; border-bottom: 1px solid rgba(139, 92, 246, 0.08); } .sgis-section-title svg { width: 12px; height: 12px; color: #a78bfa; } .sgis-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 12px; border-bottom: 1px dashed rgba(139, 92, 246, 0.08); } .sgis-row:last-child { border-bottom: none; } .sgis-row-key { color: var(--sgis-text-2); } .sgis-row-val { color: var(--sgis-text); font-weight: 600; text-align: right; max-width: 60%; word-break: break-word; } .sgis-row-val.discount { color: var(--sgis-green-text); } .sgis-row-val.high { color: var(--sgis-rose-text); } .sgis-tag-list { display: flex; flex-wrap: wrap; gap: 5px; } .sgis-tag { padding: 3px 9px; background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(59, 130, 246, 0.06)); color: #c4b5fd; border-radius: 12px; font-size: 11px; font-weight: 600; border: 1px solid rgba(139, 92, 246, 0.18); transition: all 0.2s; } .sgis-tag:hover { background: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(59, 130, 246, 0.12)); border-color: rgba(139, 92, 246, 0.35); transform: translateY(-1px); } .sgis-review-line { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-bottom: 4px; } .sgis-review-line:last-child { margin-bottom: 0; } .sgis-review-line .sgis-review-label { color: var(--sgis-text-2); flex: 1; } .sgis-review-line .sgis-review-val { font-weight: 600; } .sgis-review-line .sgis-review-val.pos { color: var(--sgis-green-text); } .sgis-review-line .sgis-review-val.neg { color: var(--sgis-rose-text); } .sgis-review-line .sgis-review-val.mix { color: var(--sgis-amber-text); } .sgis-thumb { display: inline-block; width: 14px; height: 14px; background: var(--sgis-rose); -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; } .sgis-thumb.up { background: var(--sgis-green); } .sgis-thumb.down { background: var(--sgis-rose); } .sgis-links { display: flex; flex-wrap: wrap; gap: 5px; } .sgis-link { padding: 5px 9px; background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(59, 130, 246, 0.06)); color: #c4b5fd; border-radius: 7px; font-size: 11px; font-weight: 600; text-decoration: none; border: 1px solid rgba(139, 92, 246, 0.2); transition: all 0.2s; } .sgis-link:hover { background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(59, 130, 246, 0.12)); color: #fff; border-color: rgba(139, 92, 246, 0.4); transform: translateY(-1px); } /* v2.9.83: 愿望单促销列表 */ .sgis-wl-sale-list { display: flex; flex-direction: column; gap: 4px; } .sgis-wl-sale-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; background: rgba(244, 63, 94, 0.06); border: 1px solid rgba(244, 63, 94, 0.12); border-radius: 6px; text-decoration: none; transition: all 0.2s; } .sgis-wl-sale-item:hover { background: rgba(244, 63, 94, 0.12); border-color: rgba(244, 63, 94, 0.25); transform: translateX(2px); } .sgis-wl-sale-name { font-size: 11px; color: var(--sgis-text); font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sgis-wl-sale-price { display: flex; align-items: center; gap: 5px; flex-shrink: 0; } .sgis-wl-sale-discount { font-size: 10px; font-weight: 700; color: #4ade80; background: rgba(74, 222, 128, 0.15); padding: 1px 5px; border-radius: 4px; } .sgis-wl-sale-final { font-size: 11px; color: #4ade80; font-weight: 600; } .sgis-wl-sale-orig { font-size: 10px; color: var(--sgis-text-2); text-decoration: line-through; } /* v2.9.83: 游戏口味标签画像 */ .sgis-taste-section { margin-bottom: 12px; } .sgis-taste-cloud { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .sgis-taste-tag { padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; cursor: default; transition: all 0.2s; border: 1px solid; } .sgis-taste-tag:hover { transform: translateY(-1px); } .sgis-taste-tag.t-xl { font-size: 13px; padding: 5px 13px; } .sgis-taste-tag.t-lg { font-size: 12px; padding: 5px 12px; } .sgis-taste-tag.t-md { font-size: 11px; } .sgis-taste-tag.t-sm { font-size: 10px; opacity: 0.85; } .sgis-taste-tag.genre { background: rgba(59, 130, 246, 0.12); color: #93c5fd; border-color: rgba(59, 130, 246, 0.22); } .sgis-taste-tag.theme { background: rgba(139, 92, 246, 0.12); color: #c4b5fd; border-color: rgba(139, 92, 246, 0.22); } .sgis-taste-tag.feature { background: rgba(16, 185, 129, 0.12); color: #6ee7b7; border-color: rgba(16, 185, 129, 0.22); } .sgis-taste-tag.style { background: rgba(245, 158, 11, 0.12); color: #fbbf24; border-color: rgba(245, 158, 11, 0.22); } .sgis-taste-bars { display: flex; flex-direction: column; gap: 6px; } .sgis-taste-bar-row { display: flex; align-items: center; gap: 8px; font-size: 11px; } .sgis-taste-bar-label { width: 80px; flex-shrink: 0; color: var(--sgis-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sgis-taste-bar-track { flex: 1; height: 6px; background: rgba(255, 255, 255, 0.06); border-radius: 3px; overflow: hidden; } .sgis-taste-bar-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease; } .sgis-taste-bar-val { flex-shrink: 0; text-align: right; color: var(--sgis-text-2); font-size: 10px; white-space: nowrap; } .sgis-owned-hero { position: relative; background: linear-gradient(135deg, rgba(16, 185, 129, 0.18) 0%, rgba(20, 184, 166, 0.08) 50%, var(--sgis-bg-2) 100%); border: 1px solid rgba(16, 185, 129, 0.35); border-radius: var(--sgis-radius); padding: 6px 10px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; overflow: hidden; box-shadow: 0 4px 16px rgba(16, 185, 129, 0.1); } .sgis-owned-hero::after { content: ""; position: absolute; top: -30px; right: -30px; width: 120px; height: 120px; background: radial-gradient(circle, rgba(16, 185, 129, 0.2) 0%, transparent 65%); pointer-events: none; } .sgis-owned-hero > * { position: relative; z-index: 1; } .sgis-owned-hero.shared { background: linear-gradient(135deg, rgba(139, 92, 246, 0.18) 0%, rgba(99, 102, 241, 0.08) 50%, var(--sgis-bg-2) 100%); border-color: rgba(139, 92, 246, 0.35); } .sgis-owned-hero.shared::after { background: radial-gradient(circle, rgba(139, 92, 246, 0.2) 0%, transparent 65%); } .sgis-owned-hero.not-owned { background: linear-gradient(135deg, rgba(244, 63, 94, 0.15) 0%, rgba(244, 63, 94, 0.05) 50%, var(--sgis-bg-2) 100%); border-color: rgba(244, 63, 94, 0.35); } .sgis-owned-hero.not-owned::after { background: radial-gradient(circle, rgba(244, 63, 94, 0.2) 0%, transparent 65%); } .sgis-owned-icon { width: 24px; height: 24px; border-radius: 7px; background: linear-gradient(135deg, #10b981, #059669); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4); } .sgis-owned-hero.shared .sgis-owned-icon { background: linear-gradient(135deg, #8b5cf6, #6366f1); box-shadow: 0 2px 6px rgba(139, 92, 246, 0.4); } .sgis-owned-hero.not-owned .sgis-owned-icon { background: linear-gradient(135deg, #f43f5e, #e11d48); box-shadow: 0 2px 6px rgba(244, 63, 94, 0.4); } .sgis-owned-icon svg { width: 13px; height: 13px; stroke: #fff; fill: none; stroke-width: 2.4; } /* v2.3.30: 压缩为单行——main+sub 内联,按钮直接挂在 hero 行尾 */ .sgis-owned-text-main { font-size: 12px; font-weight: 700; color: #fff; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sgis-owned-text-sub { font-size: 10px; color: var(--sgis-text-2); font-weight: 400; margin-left: 5px; } .sgis-owned-hero .sgis-btn { flex-shrink: 0; } .sgis-btn { padding: 3px 9px; background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(59, 130, 246, 0.1)); border: 1px solid rgba(139, 92, 246, 0.3); color: #c4b5fd; border-radius: 6px; font-size: 10px; font-weight: 600; cursor: pointer; transition: all 0.2s; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } .sgis-btn:hover { background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(59, 130, 246, 0.18)); border-color: rgba(139, 92, 246, 0.45); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(139, 92, 246, 0.2); } .sgis-btn svg { width: 11px; height: 11px; } .sgis-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 8px; } .sgis-stat-box { background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 7px; padding: 5px 4px; text-align: center; transition: all 0.2s; } .sgis-stat-box:hover { border-color: rgba(139, 92, 246, 0.3); background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(59, 130, 246, 0.04)); } .sgis-stat-box-val { font-size: 13px; font-weight: 700; color: #fff; line-height: 1.1; letter-spacing: -0.3px; } .sgis-stat-box-lbl { font-size: 9px; color: var(--sgis-text-2); margin-top: 2px; } .sgis-stat-box.playtime .sgis-stat-box-val { color: var(--sgis-purple-text); } .sgis-stat-box.lastplay .sgis-stat-box-val { color: var(--sgis-blue); font-size: 12px; } .sgis-owner-list { display: flex; flex-direction: column; gap: 4px; } .sgis-owner-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 6px; font-size: 12px; } .sgis-owner-item.me { border-color: rgba(16, 185, 129, 0.35); background: rgba(16, 185, 129, 0.08); } .sgis-owner-item.sharer { border-color: rgba(139, 92, 246, 0.35); background: rgba(139, 92, 246, 0.08); } .sgis-owner-avatar { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, #66c0f4, #3b82f6); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); } .sgis-owner-info { flex: 1; min-width: 0; } .sgis-owner-name { font-weight: 600; color: #fff; } .sgis-owner-tag { font-size: 9px; padding: 1px 4px; border-radius: 3px; margin-left: 4px; font-weight: 600; } .sgis-owner-tag.me { background: rgba(16, 185, 129, 0.25); color: var(--sgis-green-text); } .sgis-owner-tag.sharer { background: rgba(139, 92, 246, 0.25); color: var(--sgis-purple-text); } .sgis-owner-time { font-size: 10px; color: var(--sgis-text-2); } .sgis-owner-playtime { font-size: 10px; color: var(--sgis-green-text, #4caf50); margin-top: 2px; } .sgis-card-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; } .sgis-card-stat { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 8px; padding: 6px; text-align: center; } .sgis-card-stat-val { font-size: 14px; font-weight: 700; color: #fff; line-height: 1.2; } .sgis-card-stat-lbl { font-size: 10px; color: var(--sgis-text-2); margin-top: 2px; } .sgis-card-stat.sell .sgis-card-stat-val { color: var(--sgis-green-text); } .sgis-card-stat.net .sgis-card-stat-val { color: var(--sgis-blue); } .sgis-card-stat.buy .sgis-card-stat-val { color: var(--sgis-amber-text); } .sgis-card-toggle { display: flex; gap: 0; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 6px; overflow: hidden; margin-bottom: 8px; } .sgis-card-toggle button { flex: 1; padding: 5px 8px; background: rgba(0, 0, 0, 0.25); border: none; border-right: 1px solid rgba(255, 255, 255, 0.08); color: var(--sgis-text-2); font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.2s; } .sgis-card-toggle button:last-child { border-right: none; } .sgis-card-toggle button:hover { background: rgba(59, 130, 246, 0.15); color: var(--sgis-text); } .sgis-card-toggle button.active { background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(59, 130, 246, 0.2)); color: #fff; box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.4); } .sgis-card-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 7px; margin-bottom: 4px; transition: all 0.2s; cursor: pointer; text-decoration: none !important; color: inherit !important; position: relative; overflow: hidden; } .sgis-card-item::before { content: ""; position: absolute; inset: 0; background-image: var(--sgis-card-bg, none); background-size: cover; background-position: center; opacity: 0.18; transition: opacity 0.3s ease; pointer-events: none; z-index: 0; } .sgis-card-item:hover { background: rgba(139, 92, 246, 0.12); border-color: rgba(139, 92, 246, 0.3); transform: translateX(2px); box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15); } .sgis-card-item:hover::before { opacity: 0.28; } .sgis-card-item > * { position: relative; z-index: 1; } .sgis-card-icon { width: 40px; height: 40px; border-radius: 6px; background: rgba(0, 0, 0, 0.4); object-fit: cover; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); } .sgis-card-icon-fallback { display: flex; align-items: center; justify-content: center; color: var(--sgis-text-2); background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(59, 130, 246, 0.08)); padding: 4px; } .sgis-card-icon-fallback svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); } .sgis-card-info { flex: 1; min-width: 0; overflow: hidden; } .sgis-card-name { font-size: 12px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 4px; } .sgis-card-prices { font-size: 11px; color: var(--sgis-text-2); display: flex; gap: 8px; margin-top: 2px; } .sgis-card-prices .sell { color: var(--sgis-green-text); font-weight: 600; } .sgis-card-prices .buy { color: var(--sgis-amber-text); font-weight: 600; } .sgis-card-badge { font-size: 9px; padding: 1px 4px; border-radius: 3px; background: rgba(139, 92, 246, 0.2); color: var(--sgis-purple-text); font-weight: 700; flex-shrink: 0; } .sgis-card-badge.foil { background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(217, 119, 6, 0.2)); color: var(--sgis-amber-text); border: 1px solid rgba(245, 158, 11, 0.3); } .sgis-price-table { display: flex; flex-direction: column; gap: 4px; } .sgis-price-row { display: flex; align-items: center; padding: 7px 8px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 7px; transition: all 0.2s; font-size: 12px; gap: 8px; } .sgis-price-row:hover { background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.25); transform: translateX(2px); } .sgis-price-row.lowest { background: linear-gradient(135deg, rgba(164, 208, 7, 0.15), rgba(132, 204, 22, 0.08)); border-color: rgba(164, 208, 7, 0.45); box-shadow: 0 2px 8px rgba(164, 208, 7, 0.1); } .sgis-price-row.user-region { border-left: 3px solid var(--sgis-blue); } .sgis-price-flag { width: 30px; height: 20px; border-radius: 2px; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05); } .sgis-price-row.lowest .sgis-price-flag { box-shadow: 0 0 0 2px #a4d007, 0 0 8px rgba(164, 208, 7, 0.4); } .sgis-price-code { font-size: 10px; font-weight: 700; color: var(--sgis-text-2); letter-spacing: 0.5px; flex-shrink: 0; min-width: 26px; } .sgis-price-row.lowest .sgis-price-code { color: #a4d007; } .sgis-price-featured { background: linear-gradient(135deg, rgba(164, 208, 7, 0.22) 0%, rgba(132, 204, 22, 0.1) 50%, rgba(101, 163, 13, 0.05) 100%); border: 1.5px solid rgba(164, 208, 7, 0.55); border-radius: var(--sgis-radius); padding: 12px; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; position: relative; overflow: hidden; box-shadow: 0 4px 16px rgba(164, 208, 7, 0.15); } .sgis-price-featured::before { content: ""; position: absolute; top: -30px; right: -30px; width: 120px; height: 120px; background: radial-gradient(circle, rgba(164, 208, 7, 0.25) 0%, transparent 65%); pointer-events: none; } .sgis-price-featured > * { position: relative; z-index: 1; } .sgis-price-featured::after { content: "最低价"; position: absolute; top: 6px; right: 8px; font-size: 9px; background: linear-gradient(135deg, #a4d007, #65a30d); color: #fff; padding: 2px 6px; border-radius: 3px; font-weight: 700; letter-spacing: 0.5px; } .sgis-price-featured-img { width: 48px; height: 32px; border-radius: 4px; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 1.5px rgba(164, 208, 7, 0.5); } .sgis-price-featured-info { flex: 1; min-width: 0; } .sgis-price-featured-region { font-size: 13px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 6px; } .sgis-price-featured-region .sgis-price-featured-cny { font-size: 11px; color: #a4d007; font-weight: 600; } .sgis-price-featured-original { font-size: 10px; color: var(--sgis-text-2); text-decoration: line-through; margin-right: 4px; } .sgis-price-featured-discount { background: #a4d007; color: #fff; padding: 1px 4px; border-radius: 3px; font-size: 9px; font-weight: 700; margin-left: 4px; } .sgis-price-region { flex: 1; color: var(--sgis-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sgis-price-region b { color: #fff; font-weight: 600; } .sgis-price-region .sgis-user-tag { font-size: 9px; padding: 1px 4px; border-radius: 3px; background: rgba(102, 192, 244, 0.2); color: var(--sgis-blue); margin-left: 4px; } .sgis-price-original { color: var(--sgis-text-2); text-decoration: line-through; font-size: 11px; margin-right: 4px; } .sgis-price-value { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; } .sgis-price-local { font-size: 12px; color: var(--sgis-text); font-weight: 600; } .sgis-price-cny { font-size: 11px; color: var(--sgis-green-text); font-weight: 600; } .sgis-price-row.lowest .sgis-price-cny { font-size: 12px; } .sgis-price-discount { background: var(--sgis-green); color: #fff; padding: 1px 5px; border-radius: 3px; font-size: 10px; font-weight: 700; margin-left: 4px; } @media (max-width: 600px) { #sgis-fab.sgis-open { display: none !important; } :root { --sgis-w: 100vw !important; } } /* v2.3.14: 移除 body.sgis-open { overflow: hidden !important; } —— 个人信息面板为 position:fixed 侧边栏, 无需锁定主页面滚动;仅在移动端面板全屏覆盖时锁定 body 滚动,避免背后页面误滚动 */ @media (max-width: 600px) { body.sgis-open { overflow: hidden !important; } } body.sgis-open #sf-wf-overlay { right: var(--sgis-w, 440px) !important; left: 0 !important; width: calc(100vw - var(--sgis-w, 440px)) !important; transition: opacity .35s ease, visibility .35s ease, right 0.4s cubic-bezier(0.4, 0, 0.2, 1), width 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; } body.sgis-open #sf-wf-overlay .sf-wf-header { left: 0 !important; width: 100% !important; } body.sgis-open #sf-wf-overlay .sf-wf-body { max-width: calc(100vw - var(--sgis-w, 440px) - 48px) !important; margin: 0 !important; padding-left: 24px !important; } body.sgis-open #sf-wf-overlay .sf-wf-grid { justify-content: flex-start !important; } body.sgis-open #sf-waterfall-btn, body.sgis-open #sf-friend-btn, body.sgis-open #sf-library-btn, body.sgis-open #sf-settings-btn, body.sgis-open #sf-top-btn { right: calc(30px + var(--sgis-w, 440px)) !important; } @media (max-width: 600px) { body.sgis-open #sf-wf-overlay { right: 0 !important; width: 100vw !important; } body.sgis-open #sf-wf-overlay .sf-wf-body { max-width: none !important; padding-left: 12px !important; } body.sgis-open #sf-waterfall-btn, body.sgis-open #sf-friend-btn, body.sgis-open #sf-library-btn, body.sgis-open #sf-settings-btn, body.sgis-open #sf-top-btn { right: 16px !important; } } body:has(#sf-wf-overlay.sf-wf-open) #sgis-fab { display: none !important; } /* v2.3.26: 愿望单页面隐藏浮动按钮,让 Wishlist Exporter 侧边栏独占 */ body:has(#swe-panel) #sgis-fab { display: none !important; } .sgis-family-share-row { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 6px; margin: 6px 0; font-size: 12px; font-weight: 600; } .sgis-family-share-row.supported { background: rgba(76, 175, 80, 0.12); border: 1px solid rgba(76, 175, 80, 0.3); color: var(--sgis-green-text, #4caf50); } .sgis-family-share-row.unsupported { background: rgba(244, 67, 54, 0.1); border: 1px solid rgba(244, 67, 54, 0.25); color: #f44336; } .sgis-family-share-icon { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; } .sgis-family-share-row.supported .sgis-family-share-icon { background: rgba(76, 175, 80, 0.3); } .sgis-family-share-row.unsupported .sgis-family-share-icon { background: rgba(244, 67, 54, 0.3); } .sgis-family-share-row.sharing { background: rgba(139, 92, 246, 0.12); border: 1px solid rgba(139, 92, 246, 0.3); color: #a78bfa; } .sgis-family-share-row.sharing .sgis-family-share-icon { background: rgba(139, 92, 246, 0.3); } .sgis-family-share-source { margin-left: auto; font-size: 9px; opacity: 0.5; font-weight: 400; } .sgis-workshop-row { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 6px; margin: 6px 0; font-size: 12px; font-weight: 600; } .sgis-workshop-row.supported { background: rgba(102, 192, 244, 0.12); border: 1px solid rgba(102, 192, 244, 0.3); color: #66c0f4; } .sgis-workshop-row.unsupported { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--sgis-text-2); } .sgis-workshop-icon { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sgis-workshop-icon svg { width: 12px; height: 12px; } .sgis-workshop-row.supported .sgis-workshop-icon { background: rgba(102, 192, 244, 0.3); } .sgis-workshop-row.unsupported .sgis-workshop-icon { background: rgba(255, 255, 255, 0.08); } .sgis-workshop-link { margin-left: auto; font-size: 10px; font-weight: 600; color: inherit; text-decoration: none; padding: 2px 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); transition: all 0.2s; } .sgis-workshop-link:hover { background: rgba(255, 255, 255, 0.16); } .sgis-category-list { display: flex; flex-wrap: wrap; gap: 5px; } .sgis-category-pill { padding: 3px 9px; background: rgba(255, 255, 255, 0.05); color: var(--sgis-text); border-radius: 12px; font-size: 11px; font-weight: 600; border: 1px solid rgba(255, 255, 255, 0.08); transition: all 0.2s; } .sgis-category-pill:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.16); } .sgis-category-pill.highlight { background: linear-gradient(135deg, rgba(102, 192, 244, 0.18), rgba(59, 130, 246, 0.1)); color: #c4e7ff; border-color: rgba(102, 192, 244, 0.32); } .sgis-category-pill.highlight:hover { background: linear-gradient(135deg, rgba(102, 192, 244, 0.28), rgba(59, 130, 246, 0.18)); border-color: rgba(102, 192, 244, 0.48); } .sgis-screenshot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } .sgis-screenshot-item { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 5px; overflow: hidden; background: rgba(0, 0, 0, 0.3); cursor: pointer; transition: transform 0.2s; } .sgis-screenshot-item:hover { transform: scale(1.03); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } .sgis-screenshot-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .sgis-screenshot-item img[data-src] { opacity: 0; transition: opacity 0.3s; } .sgis-screenshot-item img.loaded { opacity: 1; } .sgis-screenshot-more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 14px; font-weight: 700; } .sgis-package-list { display: flex; flex-direction: column; gap: 5px; } .sgis-package-item { display: flex; align-items: center; gap: 8px; padding: 7px 9px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 6px; font-size: 11px; transition: all 0.2s; } .sgis-package-item:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(102, 192, 244, 0.18); } .sgis-package-name { flex: 1; min-width: 0; color: var(--sgis-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sgis-package-price { font-weight: 700; color: var(--sgis-green-text); white-space: nowrap; flex-shrink: 0; } .sgis-package-price.free { color: #66c0f4; } .sgis-package-flag { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 9px; font-weight: 700; flex-shrink: 0; } .sgis-package-flag.free { background: rgba(102, 192, 244, 0.18); color: #66c0f4; } .sgis-package-flag.discount { background: rgba(76, 175, 80, 0.18); color: #4caf50; } .sgis-meta-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; font-size: 10px; color: var(--sgis-text-2); font-weight: 600; } .sgis-meta-chip svg { width: 10px; height: 10px; } .sgis-meta-chip.pos { color: var(--sgis-green-text); border-color: rgba(76, 175, 80, 0.25); background: rgba(76, 175, 80, 0.08); } .sgis-meta-chip.neg { color: var(--sgis-rose-text); border-color: rgba(244, 63, 94, 0.25); background: rgba(244, 63, 94, 0.06); } .sgis-meta-chip.warn { color: var(--sgis-amber-text); border-color: rgba(255, 152, 0, 0.25); background: rgba(255, 152, 0, 0.08); } /* v2.3.17: 年龄限制标识 */ .sgis-age-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; white-space: nowrap; } .sgis-age-badge svg { width: 12px; height: 12px; } .sgis-age-badge.unrestricted { background: rgba(76, 175, 80, 0.12); color: var(--sgis-green-text); border: 1px solid rgba(76, 175, 80, 0.25); } .sgis-age-badge.restricted { background: rgba(244, 63, 94, 0.12); color: var(--sgis-rose-text); border: 1px solid rgba(244, 63, 94, 0.3); } .sgis-age-badge.mature { background: rgba(255, 152, 0, 0.12); color: var(--sgis-amber-text); border: 1px solid rgba(255, 152, 0, 0.3); } .sgis-content-note { margin-top: 4px; padding: 5px 8px; background: rgba(244, 63, 94, 0.06); border-left: 2px solid rgba(244, 63, 94, 0.4); border-radius: 0 4px 4px 0; font-size: 10px; color: var(--sgis-rose-text); line-height: 1.4; } /* v2.3.17: DLC 列表 */ .sgis-dlc-list { display: flex; flex-direction: column; gap: 5px; } .sgis-dlc-item { display: flex; align-items: center; gap: 8px; padding: 6px 9px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 6px; font-size: 11px; transition: all 0.2s; text-decoration: none; color: var(--sgis-text); } .sgis-dlc-item:hover { background: rgba(102, 192, 244, 0.08); border-color: rgba(102, 192, 244, 0.22); transform: translateX(2px); } .sgis-dlc-id { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 10px; color: var(--sgis-text-2); background: rgba(255, 255, 255, 0.05); padding: 1px 6px; border-radius: 3px; flex-shrink: 0; } .sgis-dlc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .sgis-dlc-name.loading { color: var(--sgis-text-2); font-weight: 400; font-style: italic; } .sgis-dlc-arrow { color: var(--sgis-text-2); font-size: 10px; flex-shrink: 0; } .sgis-dlc-item:hover .sgis-dlc-arrow { color: #66c0f4; } /* v2.3.17: 预告片 */ .sgis-movie-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; } .sgis-movie-item { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 5px; overflow: hidden; background: rgba(0, 0, 0, 0.3); cursor: pointer; transition: transform 0.2s; } .sgis-movie-item:hover { transform: scale(1.02); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } .sgis-movie-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .sgis-movie-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.4); transition: background 0.2s; } .sgis-movie-play svg { width: 28px; height: 28px; color: #fff; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)); } .sgis-movie-item:hover .sgis-movie-play { background: rgba(0, 0, 0, 0.25); } .sgis-movie-name { position: absolute; bottom: 0; left: 0; right: 0; padding: 4px 6px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.85)); color: #fff; font-size: 10px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* v2.3.17: 语言标签 */ .sgis-lang-list { display: flex; flex-wrap: wrap; gap: 4px; } .sgis-lang-pill { padding: 2px 7px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px; font-size: 10px; color: var(--sgis-text-2); font-weight: 600; } .sgis-lang-pill.audio { background: rgba(102, 192, 244, 0.1); border-color: rgba(102, 192, 244, 0.22); color: #c4e7ff; } .sgis-lang-more { padding: 2px 7px; font-size: 10px; color: var(--sgis-text-2); font-weight: 600; align-self: center; } /* v2.3.17: 免费游戏标识 */ .sgis-free-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; background: rgba(102, 192, 244, 0.15); color: #66c0f4; border: 1px solid rgba(102, 192, 244, 0.3); } .sgis-history-lowest { background: linear-gradient(135deg, rgba(164, 208, 7, 0.18) 0%, rgba(101, 163, 13, 0.06) 50%, var(--sgis-bg-2) 100%); border: 1px solid rgba(164, 208, 7, 0.35); border-radius: var(--sgis-radius-sm); padding: 11px 12px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; position: relative; overflow: hidden; box-shadow: 0 2px 8px rgba(164, 208, 7, 0.08); } .sgis-history-lowest::after { content: ""; position: absolute; top: -20px; right: -20px; width: 100px; height: 100px; background: radial-gradient(circle, rgba(164, 208, 7, 0.2) 0%, transparent 60%); pointer-events: none; } .sgis-history-lowest > * { position: relative; z-index: 1; } .sgis-history-lowest-label { font-size: 10px; color: var(--sgis-text-2); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .sgis-history-lowest-val { font-size: 18px; font-weight: 700; color: #a4d007; } .sgis-history-lowest-store { font-size: 11px; color: var(--sgis-text-2); } .sgis-history-lowest-date { font-size: 10px; color: var(--sgis-text-2); margin-left: auto; } .sgis-history-list { display: flex; flex-direction: column; gap: 3px; } .sgis-history-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; background: rgba(255, 255, 255, 0.02); border-radius: 5px; font-size: 11px; } .sgis-history-date { color: var(--sgis-text-2); min-width: 70px; } .sgis-history-price { color: #fff; font-weight: 600; flex: 1; } .sgis-history-store { color: var(--sgis-text-2); font-size: 10px; } .sgis-history-cut { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 700; color: #b4d007; background: rgba(180, 208, 7, 0.15); min-width: 36px; text-align: center; } .sgis-history-days { font-size: 10px; color: var(--sgis-text-2); white-space: nowrap; } .sgis-discount-summary { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; background: rgba(255, 255, 255, 0.02); border-radius: 5px; margin-bottom: 6px; } .sgis-discount-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 3px; font-size: 10px; font-weight: 600; color: #b4d007; background: rgba(180, 208, 7, 0.1); border: 1px solid rgba(180, 208, 7, 0.2); } .sgis-discount-badge-days { font-size: 9px; color: var(--sgis-text-2); font-weight: 400; } .sgis-predict-btn { display: flex; align-items: center; gap: 6px; padding: 9px 16px; border: 1px solid rgba(139, 92, 246, 0.4); border-radius: 8px; background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(59, 130, 246, 0.1)); color: #c4b5fd; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s; width: 100%; justify-content: center; position: relative; overflow: hidden; } .sgis-predict-btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent); transform: translateX(-100%); transition: transform 0.6s ease; } .sgis-predict-btn:hover { background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(59, 130, 246, 0.18)); color: #fff; box-shadow: 0 4px 14px rgba(139, 92, 246, 0.3); transform: translateY(-1px); } .sgis-predict-btn:hover::before { transform: translateX(100%); } .sgis-predict-btn:disabled { opacity: 0.5; cursor: not-allowed; } .sgis-predict-btn svg { width: 14px; height: 14px; position: relative; z-index: 1; } .sgis-predict-btn > * { position: relative; z-index: 1; } .sgis-predict-section { margin-top: 12px; padding: 12px; background: linear-gradient(135deg, rgba(102,192,244,0.06), rgba(76,175,80,0.04)); border: 1px solid rgba(102,192,244,0.15); border-radius: 10px; } .sgis-predict-model { padding: 10px; margin-bottom: 8px; background: rgba(255,255,255,0.03); border-radius: 8px; border-left: 3px solid var(--sglv-accent); } .sgis-predict-model:last-child { margin-bottom: 0; } .sgis-predict-model-title { font-size: 12px; font-weight: 700; color: var(--sglv-accent); margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; } .sgis-predict-model-conf { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; } .sgis-predict-model-conf.high { background: rgba(76,175,80,0.2); color: #66bb6a; } .sgis-predict-model-conf.mid { background: rgba(255,152,0,0.2); color: #ffa726; } .sgis-predict-model-conf.low { background: rgba(244,67,54,0.2); color: #ef5350; } .sgis-predict-detail { font-size: 11px; color: var(--sgis-text-2); line-height: 1.6; } .sgis-predict-detail b { color: #fff; } .sgis-predict-price { color: #b4d007; font-weight: 700; font-size: 13px; } .sgis-predict-date { color: var(--sglv-accent); font-weight: 600; } .sgis-predict-sale { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; margin-left: 4px; } .sgis-predict-sale.seasonal { background: rgba(244,67,54,0.15); color: #ef5350; } .sgis-predict-sale.festival { background: rgba(76,175,80,0.15); color: #66bb6a; } .sgis-predict-rec { margin-top: 8px; padding: 10px; background: rgba(76,175,80,0.08); border-radius: 8px; border: 1px solid rgba(76,175,80,0.15); font-size: 11px; line-height: 1.6; color: #c8e6c9; } .sgis-predict-rec b { color: #66bb6a; } .sgis-predict-modes-label { font-size: 10px; color: var(--sgis-text-2); margin-top: 6px; text-align: center; } .sglv-predict-mode-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; margin-bottom: 6px; background: rgba(255,255,255,0.02); border-radius: 6px; cursor: pointer; transition: background 0.15s; } .sglv-predict-mode-item:hover { background: rgba(255,255,255,0.05); } .sglv-predict-mode-item input[type="checkbox"] { margin-top: 2px; accent-color: var(--sglv-accent); cursor: pointer; flex-shrink: 0; } .sglv-predict-mode-info { flex: 1; min-width: 0; } .sglv-predict-mode-name { font-size: 12px; font-weight: 600; color: var(--sglv-text); } .sglv-predict-mode-desc { font-size: 10px; color: var(--sglv-text-secondary); margin-top: 2px; line-height: 1.4; } .sgis-profile-main-card { position: relative; border-radius: 18px; overflow: hidden; margin-bottom: 10px; background: linear-gradient(160deg, #1a1633 0%, #16142b 40%, #0f0d20 100%); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(139, 92, 246, 0.15); padding: 18px 16px 16px; } .sgis-profile-main-card::before { content: ""; position: absolute; top: -50px; right: -40px; width: 180px; height: 180px; background: radial-gradient(circle, rgba(139, 92, 246, 0.4) 0%, transparent 60%); pointer-events: none; z-index: 0; } .sgis-profile-main-card::after { content: ""; position: absolute; bottom: -1px; left: 10%; right: 10%; height: 1.5px; background: linear-gradient(90deg, transparent 0%, rgba(139, 92, 246, 0.6) 50%, transparent 100%); pointer-events: none; z-index: 1; } .sgis-profile-main-card-bg { position: absolute; top: 50%; right: -12px; transform: translateY(-50%); width: 180px; height: 180px; background: url('https://leanisssharedstorage.blob.core.windows.net/copilot/asdm-files/game-library.png') no-repeat center center; background-size: contain; opacity: 0.18; pointer-events: none; z-index: 0; filter: saturate(1.2) drop-shadow(0 0 20px rgba(139, 92, 246, 0.25)); mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,1) 100%); -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,1) 100%); } .sgis-profile-head { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .sgis-profile-avatar-wrap { position: relative; flex-shrink: 0; } .sgis-profile-avatar { width: 80px; height: 80px; border-radius: 22px; border: 2px solid rgba(102, 192, 244, 0.5); background: #1b2838; display: block; object-fit: cover; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(102, 192, 244, 0.08); } .sgis-profile-avatar-badge { position: absolute; right: -8px; bottom: -8px; min-width: 38px; height: 28px; padding: 0 8px; border-radius: 14px; background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%); color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(139, 92, 246, 0.5), 0 0 0 3px #16142b; letter-spacing: 0.3px; } .sgis-profile-level-badge { display: inline-flex; align-items: center; justify-content: center; height: 22px; padding: 0 8px; border-radius: 11px; background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%); color: #fff; font-size: 11px; font-weight: 800; flex-shrink: 0; box-shadow: 0 2px 6px rgba(249, 115, 22, 0.4); letter-spacing: 0.2px; } .sgis-profile-info { flex: 1; min-width: 0; } .sgis-profile-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .sgis-profile-name { font-size: 19px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0.2px; line-height: 1.2; } .sgis-profile-verified { width: 20px; height: 20px; border-radius: 6px; background: linear-gradient(135deg, #8b5cf6, #3b82f6); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 6px rgba(139, 92, 246, 0.4); } .sgis-profile-verified svg { width: 12px; height: 12px; color: #fff; } .sgis-profile-steamid-row { display: flex; align-items: center; gap: 2px; min-width: 0; } .sgis-profile-steamid { font-size: 11px; color: rgba(148, 163, 184, 0.9); font-family: "SF Mono", "Monaco", "Consolas", monospace; letter-spacing: 0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sgis-copy-btn { background: transparent; border: none; color: rgba(148, 163, 184, 0.7); cursor: pointer; padding: 2px 5px; border-radius: 4px; transition: all 0.15s; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .sgis-copy-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; } .sgis-copy-btn svg { width: 12px; height: 12px; } /* v2.3.27: 好友数量进度环(参考 steam-friend-manager 个人卡片仪表) */ .sgis-friend-gauge { display: flex; flex-direction: column; align-items: center; gap: 0; margin-left: auto; flex-shrink: 0; position: relative; cursor: pointer; padding: 3px 4px; border-radius: 10px; transition: background 0.15s; } .sgis-friend-gauge:hover { background: rgba(255, 255, 255, 0.05); } .sgis-friend-gauge svg { display: block; } .sgis-friend-gauge-text { font-size: 12px; color: #e2e8f0; margin-top: -27px; pointer-events: none; display: flex; align-items: baseline; gap: 3px; white-space: nowrap; } .sgis-friend-gauge-text b { font-size: 16px; font-weight: 800; color: #10b981; line-height: 1; } .sgis-friend-gauge-text span { font-size: 10px; color: rgba(148, 163, 184, 0.85); font-weight: 600; } .sgis-friend-gauge-lbl { font-size: 9px; color: rgba(148, 163, 184, 0.85); font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; margin-top: 2px; pointer-events: none; } .sgis-profile-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; position: relative; z-index: 2; } .sgis-profile-stats.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; } .sgis-profile-stats.cols-5 .sgis-profile-stat { padding: 10px 3px 8px; border-radius: 12px; } .sgis-profile-stats.cols-5 .sgis-profile-stat-icon { width: 26px; height: 26px; margin: 0 auto 5px; border-radius: 7px; } .sgis-profile-stats.cols-5 .sgis-profile-stat-icon svg { width: 14px; height: 14px; } .sgis-profile-stats.cols-5 .sgis-profile-stat-val { font-size: 15px; } .sgis-profile-stats.cols-5 .sgis-profile-stat-label { font-size: 8px; margin-top: 3px; } .sgis-profile-stat { position: relative; padding: 12px 6px 10px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 14px; text-align: center; transition: all 0.25s; overflow: hidden; } .sgis-profile-stat::after { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 40%; height: 1px; background: linear-gradient(90deg, transparent, currentColor, transparent); opacity: 0.35; } .sgis-profile-stat:hover { border-color: rgba(139, 92, 246, 0.3); background: linear-gradient(160deg, rgba(139, 92, 246, 0.08) 0%, rgba(59, 130, 246, 0.03) 100%); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); } .sgis-profile-stat.clickable { cursor: pointer; } .sgis-profile-stat.clickable:active { transform: translateY(0); } .sgis-profile-stat-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(59, 130, 246, 0.08)); border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04); } .sgis-profile-stat-icon svg { width: 16px; height: 16px; color: #c4b5fd; } .sgis-profile-stat-icon.t-blue { background: linear-gradient(135deg, rgba(59, 130, 246, 0.22), rgba(37, 99, 235, 0.08)); } .sgis-profile-stat-icon.t-blue svg { color: #93c5fd; } .sgis-profile-stat-icon.t-purple { background: linear-gradient(135deg, rgba(168, 85, 247, 0.22), rgba(139, 92, 246, 0.08)); } .sgis-profile-stat-icon.t-purple svg { color: #c4b5fd; } .sgis-profile-stat-icon.t-cyan { background: linear-gradient(135deg, rgba(6, 182, 212, 0.22), rgba(8, 145, 178, 0.08)); } .sgis-profile-stat-icon.t-cyan svg { color: #67e8f9; } .sgis-profile-stat-icon.t-green { background: linear-gradient(135deg, rgba(16, 185, 129, 0.22), rgba(5, 150, 105, 0.08)); } .sgis-profile-stat-icon.t-green svg { color: #6ee7b7; } .sgis-profile-stat-icon.t-rose { background: linear-gradient(135deg, rgba(244, 63, 94, 0.22), rgba(190, 18, 60, 0.08)); } .sgis-profile-stat-icon.t-rose svg { color: #fda4af; } .sgis-profile-stat-val { font-size: 18px; font-weight: 700; color: #fff; line-height: 1.15; letter-spacing: -0.3px; } .sgis-profile-stat-val.t-blue { color: #93c5fd; } .sgis-profile-stat-val.t-purple { color: #c4b5fd; } .sgis-profile-stat-val.t-cyan { color: #67e8f9; } .sgis-profile-stat-val.t-green { color: #6ee7b7; } .sgis-profile-stat-val.t-rose { color: #fda4af; } .sgis-profile-stat-label { font-size: 9px; color: var(--sgis-text-2); margin-top: 4px; font-weight: 500; letter-spacing: 0.4px; text-transform: uppercase; } @media (max-width: 600px) { .sgis-profile-stats { grid-template-columns: repeat(2, 1fr); } .sgis-profile-stats.cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .sgis-xp-card { position: relative; padding: 14px 16px 12px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.035) 0%, rgba(15, 17, 35, 0.5) 100%); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 14px; margin-bottom: 10px; overflow: hidden; } .sgis-xp-card::before { content: ""; position: absolute; bottom: -1px; left: 10%; right: 10%; height: 1.5px; background: linear-gradient(90deg, transparent 0%, rgba(245, 158, 11, 0.6) 50%, transparent 100%); pointer-events: none; } .sgis-xp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .sgis-xp-title { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: #fff; } .sgis-xp-title-icon { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, #fbbf24, #f59e0b); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4); } .sgis-xp-title-icon svg { width: 13px; height: 13px; color: #fff; } .sgis-xp-levels { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; } .sgis-xp-levels .cur { color: #fbbf24; font-size: 13px; } .sgis-xp-levels .arrow { color: var(--sgis-text-2); font-size: 13px; } .sgis-xp-levels .next { color: #c4b5fd; } .sgis-xp-bar { position: relative; height: 8px; background: rgba(255, 255, 255, 0.06); border-radius: 5px; overflow: hidden; margin-bottom: 7px; } .sgis-xp-bar-fill { position: relative; height: 100%; background: linear-gradient(90deg, #fbbf24 0%, #f97316 50%, #ea580c 100%); border-radius: 5px; box-shadow: 0 0 12px rgba(245, 158, 11, 0.4); transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .sgis-xp-bar-fill::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent); border-radius: 5px 5px 0 0; } .sgis-xp-meta { display: flex; justify-content: space-between; align-items: center; font-size: 10px; } .sgis-xp-current { color: #fbbf24; font-weight: 600; } .sgis-xp-current b { font-weight: 700; } .sgis-xp-percent { color: var(--sgis-text-2); font-weight: 600; } .sgis-xp-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.04); font-size: 10px; color: var(--sgis-text-2); } .sgis-xp-total b { color: #c4b5fd; font-weight: 700; font-size: 12px; } .sgis-feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 10px; } @media (max-width: 600px) { .sgis-feature-grid { grid-template-columns: 1fr; } } .sgis-feature-card { position: relative; padding: 14px 12px 12px; background: linear-gradient(160deg, rgba(139, 92, 246, 0.12) 0%, rgba(59, 130, 246, 0.04) 50%, rgba(15, 17, 35, 0.6) 100%); border: 1px solid rgba(139, 92, 246, 0.2); border-radius: 14px; cursor: pointer; transition: all 0.25s; overflow: hidden; } .sgis-feature-card::before { content: ""; position: absolute; top: -40px; right: -30px; width: 120px; height: 120px; background: radial-gradient(circle, rgba(139, 92, 246, 0.2) 0%, transparent 60%); pointer-events: none; } .sgis-feature-card::after { content: ""; position: absolute; bottom: -1px; left: 10%; right: 10%; height: 1.5px; background: linear-gradient(90deg, transparent 0%, rgba(139, 92, 246, 0.5) 50%, transparent 100%); pointer-events: none; } .sgis-feature-card:hover { border-color: rgba(139, 92, 246, 0.4); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(139, 92, 246, 0.2); } .sgis-feature-card.alt { background: linear-gradient(160deg, rgba(99, 102, 241, 0.12) 0%, rgba(59, 130, 246, 0.04) 50%, rgba(15, 17, 35, 0.6) 100%); border-color: rgba(99, 102, 241, 0.2); } .sgis-feature-card.alt::before { background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, transparent 60%); } .sgis-feature-card.alt::after { background: linear-gradient(90deg, transparent 0%, rgba(99, 102, 241, 0.5) 50%, transparent 100%); } .sgis-feature-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; position: relative; z-index: 1; } .sgis-feature-icon { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(99, 102, 241, 0.12)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 2px 6px rgba(139, 92, 246, 0.15); } .sgis-feature-card.alt .sgis-feature-icon { background: linear-gradient(135deg, rgba(99, 102, 241, 0.22), rgba(59, 130, 246, 0.12)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 2px 6px rgba(99, 102, 241, 0.15); } .sgis-feature-icon svg { width: 18px; height: 18px; color: #c4b5fd; } .sgis-feature-card.alt .sgis-feature-icon svg { color: #a5b4fc; } .sgis-feature-titles { flex: 1; min-width: 0; } .sgis-feature-title { font-size: 14px; font-weight: 700; color: #fff; line-height: 1.2; } .sgis-feature-sub { font-size: 10px; color: var(--sgis-text-2); margin-top: 2px; font-weight: 500; letter-spacing: 0.3px; text-transform: uppercase; } .sgis-feature-arrow { width: 22px; height: 22px; color: var(--sgis-text-2); flex-shrink: 0; transition: all 0.2s; } .sgis-feature-card:hover .sgis-feature-arrow { color: #c4b5fd; transform: translateX(2px); } .sgis-feature-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; position: relative; z-index: 1; } .sgis-feature-stat { padding: 8px 6px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 8px; text-align: center; } .sgis-feature-stat-lbl { font-size: 9px; color: var(--sgis-text-2); font-weight: 500; letter-spacing: 0.3px; margin-bottom: 2px; } .sgis-feature-stat-val { font-size: 14px; font-weight: 700; color: #fff; line-height: 1.2; } .sgis-feature-stat-val.t-blue { color: #93c5fd; } .sgis-feature-stat-val.t-green { color: #6ee7b7; } .sgis-feature-stat-val.t-purple { color: #c4b5fd; } .sgis-feature-stat-val.t-amber { color: #fbbf24; } .sgis-feature-extra { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 7px 10px; background: rgba(255, 255, 255, 0.03); border-radius: 7px; font-size: 10px; color: var(--sgis-text-2); position: relative; z-index: 1; } .sgis-feature-extra svg { width: 12px; height: 12px; color: #f87171; flex-shrink: 0; } .sgis-activity-item { display: block; padding: 10px; margin-bottom: 8px; background: rgba(255,255,255,0.03); border-radius: 8px; border-left: 3px solid var(--sglv-accent); text-decoration: none; transition: background 0.15s; } .sgis-activity-item:hover { background: rgba(255,255,255,0.06); } .sgis-activity-type { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 9px; font-weight: 600; margin-bottom: 4px; } .sgis-activity-type.sale { background: rgba(76,175,80,0.2); color: #66bb6a; } .sgis-activity-type.update { background: rgba(102,192,244,0.2); color: #66c0f4; } .sgis-activity-type.event { background: rgba(255,152,0,0.2); color: #ffa726; } .sgis-activity-type.news { background: rgba(179,136,255,0.2); color: #b388ff; } /* v2.3.25: 官方动态结构化分区样式 */ .sgis-official-section { margin-bottom: 14px; } .sgis-official-section-title { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #66c0f4; margin-bottom: 8px; padding: 4px 0; border-bottom: 1px solid rgba(102,192,244,0.15); } .sgis-official-section-title .sgis-section-count { font-size: 10px; font-weight: 400; color: var(--sgis-text-2); margin-left: auto; } .sgis-official-empty { text-align: center; padding: 20px; color: var(--sgis-text-2); font-size: 11px; } /* 促销活动聚光灯卡片 */ .sgis-spotlight-card { display: block; padding: 0; margin-bottom: 8px; background: rgba(255,255,255,0.04); border-radius: 8px; overflow: hidden; text-decoration: none; transition: background 0.15s; border: 1px solid rgba(255,255,255,0.08); } .sgis-spotlight-card:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,152,0,0.3); } .sgis-spotlight-banner { width: 100%; height: 60px; object-fit: cover; background: rgba(255,255,255,0.03); } .sgis-spotlight-body { padding: 8px 10px; } .sgis-spotlight-name { font-size: 12px; font-weight: 600; color: #ffa726; margin-bottom: 2px; } .sgis-spotlight-desc { font-size: 10px; color: var(--sgis-text-2); line-height: 1.4; } /* 特惠游戏卡片 */ .sgis-special-grid { display: grid; grid-template-columns: 1fr; gap: 6px; } .sgis-special-card { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: rgba(255,255,255,0.03); border-radius: 7px; text-decoration: none; transition: background 0.15s; border-left: 3px solid #4caf50; } .sgis-special-card:hover { background: rgba(76,175,80,0.08); } .sgis-special-img { width: 48px; height: 22px; object-fit: cover; border-radius: 3px; flex-shrink: 0; background: rgba(255,255,255,0.05); } .sgis-special-info { flex: 1; min-width: 0; } .sgis-special-name { font-size: 11px; font-weight: 500; color: var(--sgis-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sgis-special-meta { font-size: 9px; color: var(--sgis-text-2); margin-top: 1px; } .sgis-special-price { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex-shrink: 0; } .sgis-special-discount { display: inline-block; padding: 2px 6px; background: rgba(76,175,80,0.25); color: #66bb6a; border-radius: 4px; font-size: 11px; font-weight: 700; } .sgis-special-final { font-size: 11px; color: #66bb6a; font-weight: 600; } .sgis-special-original { font-size: 9px; color: var(--sgis-text-2); text-decoration: line-through; } .sgis-sub-tabs { display: flex; gap: 6px; margin: 8px 0 10px; flex-wrap: wrap; } .sgis-sub-tab { flex: 1; min-width: 70px; padding: 5px 8px; font-size: 10px; font-weight: 600; color: var(--sgis-text-2); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 7px; cursor: pointer; transition: all .2s; display: flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; } .sgis-sub-tab:hover { color: #fff; border-color: rgba(102,192,244,0.3); } .sgis-sub-tab.active { background: linear-gradient(135deg,rgba(102,192,244,0.25),rgba(59,130,246,0.15)); color: #66c0f4; border-color: rgba(102,192,244,0.35); } .sgis-sub-tab svg { width: 12px; height: 12px; } .sgis-activity-content { min-height: 120px; } .sgis-timeline-divider { display: flex; align-items: center; gap: 8px; margin: 12px 0 8px; } .sgis-timeline-line { flex: 1; height: 1px; background: linear-gradient(90deg,transparent,rgba(102,192,244,0.25),transparent); } .sgis-timeline-date { font-size: 10px; color: var(--sgis-text-2); white-space: nowrap; letter-spacing: .5px; } .sgis-timeline-header { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; margin-bottom: 6px; border-radius: 7px; border: 1px solid; } .sgis-timeline-label { font-size: 12px; font-weight: 600; } .sgis-timeline-count { font-size: 11px; color: var(--sgis-text-2); } .sgis-timeline-desc { font-size: 11px; color: var(--sgis-text-2); padding: 4px 10px 8px; } .sgis-timeline-game { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-bottom: 4px; background: rgba(255,255,255,0.03); border-left: 3px solid #10b981; border-radius: 6px; cursor: pointer; transition: background .2s; } .sgis-timeline-game:hover { background: rgba(255,255,255,0.07); } .sgis-timeline-game-icon { width: 32px; height: 32px; border-radius: 4px; object-fit: cover; flex-shrink: 0; } .sgis-timeline-game-info { min-width: 0; } .sgis-timeline-game-name { font-size: 11px; font-weight: 500; color: #fff; text-decoration: none; } .sgis-timeline-game-name:hover { color: #66c0f4; } .sgis-badge-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .sgis-badge-card { padding: 10px; background: rgba(255,255,255,0.03); border-radius: 8px; text-align: center; } .sgis-badge-icon { font-size: 28px; margin-bottom: 5px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; margin-left: auto; margin-right: auto; background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(59, 130, 246, 0.06)); border-radius: 8px; transition: all 0.2s; } .sgis-badge-card:hover .sgis-badge-icon { background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(59, 130, 246, 0.1)); transform: scale(1.05); } .sgis-badge-icon svg { width: 18px; height: 18px; color: #c4b5fd; } .sgis-badge-name { font-size: 11px; font-weight: 600; color: #fff; } .sgis-badge-level { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 9px; font-weight: 700; background: rgba(102,192,244,0.15); color: #66c0f4; margin-top: 4px; } .sgis-badge-xp { font-size: 9px; color: var(--sgis-text-2); margin-top: 2px; } .sgis-user-ach { display: flex; align-items: center; gap: 10px; padding: 10px; margin-bottom: 8px; background: rgba(255,255,255,0.03); border-radius: 8px; border: 1px solid transparent; transition: all 0.2s; } .sgis-user-ach.unlocked { border-color: rgba(180,208,7,0.3); background: rgba(180,208,7,0.05); } .sgis-user-ach.locked { opacity: 0.5; } .sgis-user-ach-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; border-radius: 10px; background: rgba(255,255,255,0.05); overflow: hidden; position: relative; } .sgis-user-ach-icon svg { width: 100%; height: 100%; display: block; } .sgis-user-ach.locked .sgis-user-ach-icon { filter: grayscale(85%) brightness(0.6); } .sgis-user-ach.unlocked .sgis-user-ach-icon { background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(59,130,246,0.08)); box-shadow: 0 0 12px rgba(139,92,246,0.2); } .sgis-user-ach-info { flex: 1; min-width: 0; } .sgis-user-ach-name { font-size: 12px; font-weight: 600; color: #fff; } .sgis-user-ach-desc { font-size: 10px; color: var(--sgis-text-2); margin-top: 2px; line-height: 1.4; } .sgis-user-ach-progress { height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; margin-top: 6px; overflow: hidden; } .sgis-user-ach-progress-fill { height: 100%; background: var(--sglv-accent); border-radius: 2px; transition: width 0.3s; } .sgis-user-ach.unlocked .sgis-user-ach-progress-fill { background: #b4d007; } .sgis-user-ach-val { font-size: 10px; color: var(--sgis-text-2); text-align: right; white-space: nowrap; } .sgis-persona-section { padding: 14px; margin-bottom: 12px; background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(59, 130, 246, 0.06) 50%, var(--sgis-bg-2) 100%); border: 1px solid rgba(139, 92, 246, 0.22); border-radius: var(--sgis-radius-sm); position: relative; overflow: hidden; box-shadow: 0 2px 8px rgba(139, 92, 246, 0.08); } .sgis-persona-section::before { content: ""; position: absolute; top: -30px; right: -30px; width: 100px; height: 100px; background: radial-gradient(circle, rgba(139, 92, 246, 0.2) 0%, transparent 60%); pointer-events: none; } .sgis-persona-section > * { position: relative; z-index: 1; } .sgis-persona-title { font-size: 14px; font-weight: 700; color: #c4b5fd; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .sgis-persona-title svg { width: 18px; height: 18px; color: #c4b5fd; } .sgis-persona-type { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 700; background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(99, 102, 241, 0.15)); color: #c4b5fd; margin-bottom: 8px; border: 1px solid rgba(139, 92, 246, 0.3); } .sgis-persona-desc { font-size: 11px; color: var(--sgis-text-2); line-height: 1.6; margin-bottom: 8px; } .sgis-persona-traits { display: flex; flex-wrap: wrap; gap: 5px; } .sgis-persona-trait { padding: 3px 9px; border-radius: 10px; font-size: 10px; font-weight: 600; background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(99, 102, 241, 0.08)); color: #c4b5fd; border: 1px solid rgba(139, 92, 246, 0.2); } .sgis-insight-kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; } @media (min-width: 480px) { .sgis-insight-kpi-grid { grid-template-columns: repeat(3, 1fr); } } .sgis-insight-kpi { position: relative; padding: 12px 10px 12px 13px; border-radius: 10px; background: linear-gradient(160deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%); border: 1px solid rgba(255,255,255,0.06); border-left-width: 3px; overflow: hidden; transition: all 0.2s; } .sgis-insight-kpi::before { content: ''; position: absolute; top: -12px; right: -12px; width: 40px; height: 40px; border-radius: 50%; opacity: 0.12; filter: blur(8px); pointer-events: none; } .sgis-insight-kpi:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); } .sgis-insight-kpi.blue { border-color: rgba(59,130,246,0.3); border-left-color: #3b82f6; } .sgis-insight-kpi.blue::before { background: #3b82f6; } .sgis-insight-kpi.blue:hover { border-color: rgba(59,130,246,0.5); } .sgis-insight-kpi.cyan { border-color: rgba(6,182,212,0.3); border-left-color: #06b6d4; } .sgis-insight-kpi.cyan::before { background: #06b6d4; } .sgis-insight-kpi.cyan:hover { border-color: rgba(6,182,212,0.5); } .sgis-insight-kpi.purple { border-color: rgba(139,92,246,0.3); border-left-color: #8b5cf6; } .sgis-insight-kpi.purple::before { background: #8b5cf6; } .sgis-insight-kpi.purple:hover { border-color: rgba(139,92,246,0.5); } .sgis-insight-kpi.amber { border-color: rgba(245,158,11,0.3); border-left-color: #f59e0b; } .sgis-insight-kpi.amber::before { background: #f59e0b; } .sgis-insight-kpi.amber:hover { border-color: rgba(245,158,11,0.5); } .sgis-insight-kpi.rose { border-color: rgba(244,63,94,0.3); border-left-color: #f43f5e; } .sgis-insight-kpi.rose::before { background: #f43f5e; } .sgis-insight-kpi.rose:hover { border-color: rgba(244,63,94,0.5); } .sgis-insight-kpi.green { border-color: rgba(16,185,129,0.3); border-left-color: #10b981; } .sgis-insight-kpi.green::before { background: #10b981; } .sgis-insight-kpi.green:hover { border-color: rgba(16,185,129,0.5); } .sgis-insight-kpi-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .sgis-insight-kpi-icon { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sgis-insight-kpi-icon svg { width: 14px; height: 14px; color: #fff; } .sgis-insight-kpi-label { font-size: 10px; font-weight: 600; color: var(--sgis-text-2); line-height: 1.3; } .sgis-insight-kpi-val { font-size: 20px; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -0.5px; } .sgis-insight-kpi-sub { font-size: 9px; color: var(--sgis-text-2); margin-top: 3px; } .sgis-insight-persona { border-radius: 12px; overflow: hidden; margin-bottom: 12px; border: 1px solid rgba(139, 92, 246, 0.25); background: var(--sgis-bg-2); } .sgis-insight-persona-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: linear-gradient(135deg, rgba(139, 92, 246, 0.35), rgba(59, 130, 246, 0.18)); } .sgis-insight-persona-icon { width: 36px; height: 36px; border-radius: 9px; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; flex-shrink: 0; backdrop-filter: blur(6px); } .sgis-insight-persona-icon svg { width: 18px; height: 18px; color: #fff; } .sgis-insight-persona-title { font-size: 16px; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .sgis-insight-persona-rarity { font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 10px; background: linear-gradient(135deg, rgba(139,92,246,0.4), rgba(99,102,241,0.25)); color: #ddd6fe; border: 1px solid rgba(139,92,246,0.4); letter-spacing: 0.3px; } .sgis-insight-persona-tagline { font-size: 11px; color: rgba(255,255,255,0.82); margin-top: 2px; } .sgis-insight-persona-body { padding: 12px 14px; } .sgis-insight-persona-traits { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .sgis-insight-persona-trait { padding: 4px 12px; border-radius: 12px; font-size: 10px; font-weight: 600; background: linear-gradient(135deg, rgba(139,92,246,0.18), rgba(59,130,246,0.08)); color: #c4b5fd; border: 1px solid rgba(139,92,246,0.22); transition: all 0.2s; } .sgis-insight-persona-trait:hover { background: linear-gradient(135deg, rgba(139,92,246,0.3), rgba(59,130,246,0.15)); border-color: rgba(139,92,246,0.4); transform: translateY(-1px); } .sgis-insight-metrics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.06); } .sgis-insight-metric { display: flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); transition: all 0.2s; } .sgis-insight-metric:hover { border-color: rgba(139,92,246,0.2); background: rgba(255,255,255,0.06); } .sgis-insight-metric-icon { width: 20px; height: 20px; border-radius: 5px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sgis-insight-metric-icon svg { width: 11px; height: 11px; color: #fff; } .sgis-insight-metric-label { font-size: 9px; color: var(--sgis-text-2); line-height: 1; } .sgis-insight-metric-val { font-size: 11px; font-weight: 700; color: #fff; line-height: 1.2; } .sgis-insight-dim-grid { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 12px; } @media (min-width: 520px) { .sgis-insight-dim-grid { grid-template-columns: repeat(2, 1fr); } } .sgis-insight-dim { display: flex; border-radius: 10px; overflow: hidden; background: linear-gradient(160deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%); border: 1px solid rgba(255,255,255,0.06); transition: all 0.2s; } .sgis-insight-dim:hover { border-color: rgba(139, 92, 246, 0.3); } .sgis-insight-dim-bar { width: 3px; min-width: 3px; flex-shrink: 0; } .sgis-insight-dim-body { flex: 1; padding: 10px 12px; min-width: 0; } .sgis-insight-dim-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .sgis-insight-dim-title-row { display: flex; align-items: center; gap: 6px; min-width: 0; } .sgis-insight-dim-label { font-size: 12px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sgis-insight-dim-tag { font-size: 9px; font-weight: 600; padding: 1px 7px; border-radius: 8px; flex-shrink: 0; } .sgis-insight-dim-tag.t-high { background: rgba(16,185,129,0.18); color: #6ee7b7; border: 1px solid rgba(16,185,129,0.25); } .sgis-insight-dim-tag.t-mid { background: rgba(59,130,246,0.18); color: #93c5fd; border: 1px solid rgba(59,130,246,0.25); } .sgis-insight-dim-tag.t-low { background: rgba(245,158,11,0.18); color: #fcd34d; border: 1px solid rgba(245,158,11,0.25); } .sgis-insight-dim-tag.t-bad { background: rgba(244,63,94,0.18); color: #fda4af; border: 1px solid rgba(244,63,94,0.25); } .sgis-insight-dim-score { font-size: 14px; font-weight: 800; color: #fff; flex-shrink: 0; } .sgis-insight-dim-progress { height: 5px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; margin-bottom: 6px; } .sgis-insight-dim-progress-fill { height: 100%; border-radius: 3px; transition: width 0.6s ease; } .sgis-insight-dim-desc { font-size: 10px; color: var(--sgis-text-2); line-height: 1.5; } .sgis-insight-ai { border-radius: 12px; overflow: hidden; margin-bottom: 12px; border: 1px solid rgba(139, 92, 246, 0.22); background: var(--sgis-bg-2); } .sgis-insight-ai-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(59, 130, 246, 0.08)); border-bottom: 1px solid rgba(139, 92, 246, 0.15); } .sgis-insight-ai-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; } .sgis-insight-ai-icon { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, rgba(139, 92, 246, 0.35), rgba(99, 102, 241, 0.2)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sgis-insight-ai-icon svg { width: 15px; height: 15px; color: #c4b5fd; } .sgis-insight-ai-title { font-size: 13px; font-weight: 700; color: #fff; } .sgis-insight-ai-subtitle { font-size: 10px; color: var(--sgis-text-2); margin-top: 1px; } .sgis-insight-ai-btn { display: flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 7px; font-size: 11px; font-weight: 700; background: linear-gradient(135deg, rgba(139, 92, 246, 0.45), rgba(59, 130, 246, 0.3)); color: #fff; border: 1px solid rgba(139, 92, 246, 0.4); cursor: pointer; flex-shrink: 0; transition: all 0.2s; } .sgis-insight-ai-btn:hover { background: linear-gradient(135deg, rgba(139, 92, 246, 0.6), rgba(59, 130, 246, 0.45)); transform: translateY(-1px); box-shadow: 0 3px 10px rgba(139, 92, 246, 0.25); } .sgis-insight-ai-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .sgis-insight-ai-btn svg { width: 12px; height: 12px; } .sgis-insight-ai-body { padding: 12px 14px; } .sgis-insight-ai-oneliner { padding: 10px 12px; border-radius: 9px; background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(59, 130, 246, 0.08)); border: 1px solid rgba(139, 92, 246, 0.2); margin-bottom: 10px; display: flex; gap: 8px; align-items: flex-start; } .sgis-insight-ai-oneliner svg { width: 16px; height: 16px; color: #c4b5fd; flex-shrink: 0; margin-top: 1px; } .sgis-insight-ai-oneliner-text { font-size: 12px; font-weight: 600; color: #fff; line-height: 1.5; } .sgis-insight-ai-section { margin-bottom: 10px; border-radius: 9px; overflow: hidden; border: 1px solid rgba(255,255,255,0.05); } .sgis-insight-ai-section:last-child { margin-bottom: 0; } .sgis-insight-ai-section-head { display: flex; align-items: center; gap: 6px; padding: 7px 10px; font-size: 11px; font-weight: 700; color: #fff; } .sgis-insight-ai-section-head svg { width: 12px; height: 12px; color: rgba(255,255,255,0.85); flex-shrink: 0; } .sgis-insight-ai-section-body { padding: 8px 10px 10px; font-size: 11px; color: var(--sgis-text); line-height: 1.65; background: rgba(255,255,255,0.015); } .sgis-insight-ai-empty { text-align: center; padding: 20px 12px; color: var(--sgis-text-2); } .sgis-insight-ai-empty-icon { font-size: 28px; margin-bottom: 8px; opacity: 0.5; } .sgis-insight-ai-empty-text { font-size: 12px; font-weight: 600; color: var(--sgis-text); margin-bottom: 4px; } .sgis-insight-ai-empty-sub { font-size: 10px; color: var(--sgis-text-2); line-height: 1.5; } .sgis-insight-ai-empty-warn { margin-top: 8px; padding: 5px 9px; border-radius: 6px; font-size: 10px; background: rgba(245,158,11,0.12); color: #fcd34d; display: inline-block; } @keyframes sgis-insight-spin { to { transform: rotate(360deg); } } .sgis-insight-spin { animation: sgis-insight-spin 0.9s linear infinite; } .sgis-insight-market { border-radius: 12px; overflow: hidden; margin-bottom: 12px; border: 1px solid rgba(16, 185, 129, 0.22); background: var(--sgis-bg-2); } .sgis-insight-market-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(6, 182, 212, 0.08)); border-bottom: 1px solid rgba(16, 185, 129, 0.15); } .sgis-insight-market-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; } .sgis-insight-market-icon { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, rgba(16, 185, 129, 0.35), rgba(6, 182, 212, 0.2)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sgis-insight-market-icon svg { width: 15px; height: 15px; color: #6ee7b7; } .sgis-insight-market-title { font-size: 13px; font-weight: 700; color: #fff; } .sgis-insight-market-subtitle { font-size: 10px; color: var(--sgis-text-2); margin-top: 1px; } .sgis-insight-market-btn { display: flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 7px; font-size: 11px; font-weight: 700; background: linear-gradient(135deg, rgba(16, 185, 129, 0.4), rgba(6, 182, 212, 0.28)); color: #fff; border: 1px solid rgba(16, 185, 129, 0.35); cursor: pointer; flex-shrink: 0; transition: all 0.2s; } .sgis-insight-market-btn:hover { background: linear-gradient(135deg, rgba(16, 185, 129, 0.55), rgba(6, 182, 212, 0.42)); transform: translateY(-1px); box-shadow: 0 3px 10px rgba(16, 185, 129, 0.2); } .sgis-insight-market-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .sgis-insight-market-btn svg { width: 12px; height: 12px; } .sgis-insight-market-body { padding: 12px 14px; } .sgis-insight-market-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; } .sgis-insight-market-stat { text-align: center; padding: 8px 4px; border-radius: 7px; background: rgba(16, 185, 129, 0.06); border: 1px solid rgba(16, 185, 129, 0.12); } .sgis-insight-market-stat-val { font-size: 16px; font-weight: 800; color: #6ee7b7; line-height: 1; } .sgis-insight-market-stat-label { font-size: 9px; color: var(--sgis-text-2); margin-top: 3px; } .sgis-insight-market-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04); margin-bottom: 5px; } .sgis-insight-market-rank { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; background: linear-gradient(135deg, rgba(251, 191, 36, 0.3), rgba(245, 158, 11, 0.18)); color: #fcd34d; flex-shrink: 0; } .sgis-insight-market-row.top1 .sgis-insight-market-rank { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1b2838; } .sgis-insight-market-name { flex: 1; min-width: 0; font-size: 11px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sgis-insight-market-val { font-size: 11px; font-weight: 700; color: #6ee7b7; flex-shrink: 0; } .sgis-insight-market-rec { padding: 9px 11px; border-radius: 8px; background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(6, 182, 212, 0.05)); border: 1px solid rgba(16, 185, 129, 0.18); margin-bottom: 6px; } .sgis-insight-market-rec:last-child { margin-bottom: 0; } .sgis-insight-market-rec-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } .sgis-insight-market-rec-name { font-size: 11px; font-weight: 700; color: #fff; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sgis-insight-market-rec-action { font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 7px; flex-shrink: 0; } .sgis-insight-market-rec-action.buy { background: rgba(16,185,129,0.2); color: #6ee7b7; border: 1px solid rgba(16,185,129,0.3); } .sgis-insight-market-rec-action.sell { background: rgba(244,63,94,0.2); color: #fda4af; border: 1px solid rgba(244,63,94,0.3); } .sgis-insight-market-rec-action.hold { background: rgba(245,158,11,0.2); color: #fcd34d; border: 1px solid rgba(245,158,11,0.3); } .sgis-insight-market-rec-reason { font-size: 10px; color: var(--sgis-text-2); line-height: 1.5; } .sgis-insight-market-summary { padding: 10px 12px; border-radius: 8px; background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(6, 182, 212, 0.06)); border: 1px solid rgba(16, 185, 129, 0.18); font-size: 11px; color: var(--sgis-text); line-height: 1.6; margin-bottom: 10px; } .sgis-insight-market-summary:last-child { margin-bottom: 0; } .sgis-insight-ach-collapse { margin-top: 8px; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 10px; } .sgis-insight-ach-toggle { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--sgis-text-2); cursor: pointer; padding: 6px 0; user-select: none; } .sgis-insight-ach-toggle:hover { color: #c4b5fd; } .sgis-insight-ach-toggle svg { width: 12px; height: 12px; transition: transform 0.2s; } .sgis-insight-ach-toggle.expanded svg { transform: rotate(90deg); } .sgis-insight-ach-content { display: none; margin-top: 8px; } .sgis-insight-ach-content.show { display: block; } .sgis-section-title.sgis-social-title { justify-content: space-between; } .sgis-social-title-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; } .sgis-social-toolbar { display: flex; gap: 6px; margin-bottom: 8px; align-items: center; } .sgis-social-filter-row { display: flex; flex-wrap: nowrap; gap: 5px; margin-bottom: 10px; align-items: center; overflow-x: auto; padding-bottom: 2px; } .sgis-social-filter-row::-webkit-scrollbar { height: 3px; } .sgis-social-filter-row::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; } .sgis-social-search { flex: 1; min-width: 100px; padding: 6px 10px; font-size: 11px; color: var(--sgis-text); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 7px; outline: none; transition: border-color 0.2s; } .sgis-social-search:focus { border-color: rgba(102, 192, 244, 0.5); } .sgis-social-search::placeholder { color: var(--sgis-text-2); } .sgis-social-filter { padding: 5px 10px; font-size: 10px; font-weight: 600; color: var(--sgis-text-2); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 7px; cursor: pointer; transition: all 0.2s; white-space: nowrap; display: flex; align-items: center; gap: 4px; } .sgis-social-filter:hover { color: #fff; border-color: rgba(102,192,244,0.3); } .sgis-social-filter.active { background: linear-gradient(135deg, rgba(102,192,244,0.25), rgba(59,130,246,0.15)); color: #66c0f4; border-color: rgba(102,192,244,0.35); } .sgis-social-filter .count { font-size: 9px; padding: 1px 5px; border-radius: 5px; background: rgba(255,255,255,0.1); } .sgis-social-sort { padding: 5px 10px; font-size: 10px; font-weight: 600; color: var(--sgis-text-2); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 7px; cursor: pointer; } .sgis-social-sort:hover { color: #fff; } .sgis-social-friend { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 9px; background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%); border: 1px solid rgba(255,255,255,0.05); margin-bottom: 6px; transition: all 0.2s; } .sgis-social-friend:hover { border-color: rgba(139, 92, 246, 0.25); background: linear-gradient(135deg, rgba(139,92,246,0.06) 0%, rgba(59,130,246,0.03) 100%); transform: translateX(2px); } .sgis-social-avatar-wrap { position: relative; flex-shrink: 0; } .sgis-social-avatar { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; border: 1.5px solid rgba(255,255,255,0.1); } .sgis-social-status-dot { position: absolute; bottom: -2px; right: -2px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--sgis-bg-2); } .sgis-social-status-dot.online { background: #4caf50; box-shadow: 0 0 6px rgba(76,175,80,0.5); } .sgis-social-status-dot.ingame { background: #66c0f4; box-shadow: 0 0 6px rgba(102,192,244,0.6); } .sgis-social-status-dot.offline { background: #6b7280; } .sgis-social-friend-info { flex: 1; min-width: 0; } .sgis-social-friend-name-row { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; flex-wrap: wrap; } .sgis-social-friend-name { font-size: 12px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; } .sgis-social-level-badge { font-size: 9px; font-weight: 800; padding: 1px 6px; border-radius: 5px; background: linear-gradient(135deg, rgba(102,192,244,0.25), rgba(59,130,246,0.15)); color: #66c0f4; border: 1px solid rgba(102,192,244,0.3); flex-shrink: 0; } .sgis-social-vac-shield { font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 5px; background: linear-gradient(135deg, rgba(244,63,94,0.3), rgba(220,38,38,0.18)); color: #fda4af; border: 1px solid rgba(244,63,94,0.35); display: flex; align-items: center; gap: 3px; flex-shrink: 0; } .sgis-social-vac-shield svg { width: 10px; height: 10px; } .sgis-social-friend-meta { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--sgis-text-2); flex-wrap: wrap; } .sgis-social-friend-status { font-size: 10px; font-weight: 600; } .sgis-social-friend-status.ingame { color: #66c0f4; } .sgis-social-friend-status.online { color: #6ee7b7; } .sgis-social-friend-status.offline { color: var(--sgis-text-2); } .sgis-social-friend-days { font-size: 10px; padding: 1px 6px; border-radius: 5px; background: rgba(139, 92, 246, 0.12); color: #c4b5fd; border: 1px solid rgba(139, 92, 246, 0.18); } .sgis-social-friend-days.d-new { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; border-color: rgba(16, 185, 129, 0.25); } .sgis-social-friend-days.d-mid { background: rgba(245, 158, 11, 0.15); color: #fcd34d; border-color: rgba(245, 158, 11, 0.25); } .sgis-social-friend-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .sgis-social-link-btn { width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); color: var(--sgis-text-2); cursor: pointer; transition: all 0.2s; text-decoration: none !important; } .sgis-social-link-btn:hover { background: rgba(102,192,244,0.15); color: #66c0f4; border-color: rgba(102,192,244,0.3); } .sgis-social-link-btn svg { width: 12px; height: 12px; } .sgis-social-group { margin-bottom: 12px; } .sgis-social-group-head { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: #a78bfa; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; padding-bottom: 5px; border-bottom: 1px solid rgba(139, 92, 246, 0.1); } .sgis-social-group-head svg { width: 12px; height: 12px; } .sgis-social-group-head .count { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 6px; background: rgba(139, 92, 246, 0.15); color: #c4b5fd; } .sgis-social-country { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 500; color: var(--sgis-text-2); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); padding: 1px 6px 1px 4px; border-radius: 4px; transition: all 0.15s; } .sgis-social-country:hover { background: rgba(255,255,255,0.08); color: #fff; } .sgis-social-country svg { width: 16px; height: 12px; flex-shrink: 0; } .sgis-social-country-name { line-height: 1; } .sgis-social-load-levels, .sgis-social-ban-sync { display: flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 7px; font-size: 10px; font-weight: 600; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .sgis-social-load-levels { background: linear-gradient(135deg, rgba(102,192,244,0.18), rgba(59,130,246,0.1)); color: #66c0f4; border: 1px solid rgba(102,192,244,0.25); } .sgis-social-load-levels:hover { background: linear-gradient(135deg, rgba(102,192,244,0.3), rgba(59,130,246,0.2)); transform: translateY(-1px); } .sgis-social-ban-sync { background: linear-gradient(135deg, rgba(244,63,94,0.18), rgba(244,63,94,0.1)); color: #f43f5e; border: 1px solid rgba(244,63,94,0.25); } .sgis-social-ban-sync:hover { background: linear-gradient(135deg, rgba(244,63,94,0.3), rgba(244,63,94,0.2)); transform: translateY(-1px); } .sgis-social-load-levels:disabled, .sgis-social-ban-sync:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .sgis-social-load-levels svg, .sgis-social-ban-sync svg { width: 12px; height: 12px; } /* v2.3.24: 好友游戏数量 TOP10 排行(参考 steam-friend-manager 社交仪表盘游戏总数排行) */ .sgis-gc-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04); margin-bottom: 5px; cursor: pointer; transition: all 0.15s; } .sgis-gc-row:hover { background: rgba(102,192,244,0.06); border-color: rgba(102,192,244,0.2); } .sgis-gc-no { width: 18px; text-align: center; font-size: 11px; font-weight: 800; color: var(--sgis-text-2); flex-shrink: 0; } .sgis-gc-no.r1 { color: #ffd700; } .sgis-gc-no.r2 { color: #c0c0c0; } .sgis-gc-no.r3 { color: #e09a5f; } .sgis-gc-avatar { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.08); } .sgis-gc-name { width: 92px; font-size: 11px; font-weight: 600; color: #e0e0e0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; } .sgis-gc-bar { flex: 1; height: 10px; background: rgba(255,255,255,0.05); border-radius: 4px; overflow: hidden; min-width: 0; } .sgis-gc-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #38bdf8, #818cf8); transition: width .3s; } .sgis-gc-val { width: 76px; text-align: right; font-size: 11px; font-weight: 700; color: #38bdf8; flex-shrink: 0; white-space: nowrap; } .sgis-gc-val small { display: block; font-size: 9px; font-weight: 500; color: var(--sgis-text-2); } .sgis-gc-hint { font-size: 10px; color: var(--sgis-text-2); text-align: center; padding: 10px 8px; line-height: 1.6; } .sgis-ach-summary { display: flex; align-items: center; gap: 16px; padding: 12px; background: rgba(255, 255, 255, 0.03); border-radius: 10px; margin-bottom: 10px; } .sgis-ach-donut { flex-shrink: 0; --rainbow-intensity: 0.5; position: relative; } .sgis-ach-donut .sgis-rainbow-ring { filter: url(#sgis-rainbow-glow); transition: stroke-dasharray 0.6s ease, filter 0.4s ease; } .sgis-ach-donut svg { overflow: visible; } .sgis-ach-donut .sgis-donut-pct { fill: #f8fafc; filter: drop-shadow(0 0 calc(2px * var(--rainbow-intensity)) rgba(196, 130, 255, calc(0.4 * var(--rainbow-intensity)))); transition: filter 0.4s ease; } .sgis-ach-donut::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255, 0, 128, calc(0.15 * var(--rainbow-intensity))), rgba(255, 140, 0, calc(0.15 * var(--rainbow-intensity))), rgba(255, 215, 0, calc(0.15 * var(--rainbow-intensity))), rgba(0, 255, 127, calc(0.15 * var(--rainbow-intensity))), rgba(0, 191, 255, calc(0.15 * var(--rainbow-intensity))), rgba(123, 44, 255, calc(0.15 * var(--rainbow-intensity))), rgba(255, 0, 128, calc(0.15 * var(--rainbow-intensity))) ); filter: blur(calc(8px * var(--rainbow-intensity))); opacity: var(--rainbow-intensity); z-index: -1; animation: sgis-rainbow-rotate 6s linear infinite; pointer-events: none; } @keyframes sgis-rainbow-rotate { to { transform: rotate(360deg); } } .sgis-ach-stats { display: flex; gap: 12px; flex: 1; } .sgis-ach-stat { display: flex; flex-direction: column; align-items: center; flex: 1; } .sgis-ach-stat-val { font-size: 18px; font-weight: 700; color: #fff; } .sgis-ach-stat-lbl { font-size: 10px; color: var(--sgis-text-2); margin-top: 2px; } .sgis-ach-item { display: flex; align-items: flex-start; gap: 8px; padding: 7px 8px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 6px; margin-bottom: 4px; } .sgis-ach-check { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; margin-top: 1px; } .sgis-ach-check { background: linear-gradient(135deg, rgba(76, 175, 80, 0.3), rgba(16, 185, 129, 0.18)); color: #34d399; box-shadow: 0 2px 6px rgba(16, 185, 129, 0.18); } .sgis-ach-check.locked { background: rgba(255, 255, 255, 0.06); color: var(--sgis-text-2); } .sgis-ach-info { flex: 1; min-width: 0; } .sgis-ach-name { font-size: 12px; font-weight: 600; color: #fff; margin-bottom: 3px; } .sgis-ach-meta { display: flex; gap: 8px; font-size: 10px; color: var(--sgis-text-2); } .sgis-ach-bar { height: 4px; background: rgba(255, 255, 255, 0.06); border-radius: 2px; overflow: hidden; margin: 3px 0; } .sgis-ach-bar-fill { height: 100%; border-radius: 2px; transition: width .3s ease; } .sgis-ach-global { font-size: 10px; color: var(--sgis-text-2); } .sgis-ach-pct { font-size: 12px; font-weight: 600; color: var(--sgis-text); flex-shrink: 0; } .sgis-news-item { display: block; padding: 9px 10px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.025), rgba(139, 92, 246, 0.015)); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 8px; margin-bottom: 6px; text-decoration: none !important; color: inherit !important; transition: all 0.2s; } .sgis-news-item:hover { background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(59, 130, 246, 0.04)); border-color: rgba(139, 92, 246, 0.25); transform: translateX(2px); box-shadow: 0 2px 8px rgba(139, 92, 246, 0.1); } .sgis-news-header { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; } .sgis-news-feed { font-size: 9px; padding: 2px 7px; border-radius: 4px; background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(59, 130, 246, 0.1)); color: #c4b5fd; font-weight: 600; border: 1px solid rgba(139, 92, 246, 0.18); } .sgis-news-date { font-size: 10px; color: var(--sgis-text-2); margin-left: auto; } .sgis-news-title { font-size: 12px; font-weight: 600; color: #fff; line-height: 1.4; margin-bottom: 3px; } .sgis-news-desc { font-size: 11px; color: var(--sgis-text-2); line-height: 1.5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .sgis-news-author { font-size: 10px; color: var(--sgis-text-2); margin-top: 3px; } .sgis-card-item.sgis-card-with-bg { background-size: cover; background-position: center; background-blend-mode: overlay; } .sgis-card-item.sgis-card-with-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15, 17, 35, 0.92) 0%, rgba(15, 17, 35, 0.75) 50%, rgba(15, 17, 35, 0.5) 100%); pointer-events: none; z-index: 0; transition: opacity 0.3s ease; } .sgis-card-item.sgis-card-with-bg:hover::after { background: linear-gradient(90deg, rgba(15, 17, 35, 0.85) 0%, rgba(139, 92, 246, 0.3) 50%, rgba(59, 130, 246, 0.2) 100%); } .sgis-card-item.sgis-card-with-bg .sgis-card-name { color: #fff; } .sgis-card-item.sgis-card-with-bg .sgis-card-prices { color: rgba(255, 255, 255, 0.85); } .sgis-card-item.sgis-card-with-bg .sgis-card-icon { border-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } .sgis-card-stat { position: relative; overflow: hidden; } .sgis-card-stat::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, currentColor, transparent); opacity: 0.4; } .sgis-card-stat.sell::before { color: var(--sgis-green); } .sgis-card-stat.net::before { color: var(--sgis-blue); } .sgis-card-stat.buy::before { color: var(--sgis-amber); } .sgis-svg { width: 14px; height: 14px; display: inline-block; vertical-align: middle; stroke-width: 2; flex-shrink: 0; } .sgis-svg-tab { width: 14px; height: 14px; } .sgis-svg-section { width: 12px; height: 12px; } .sgis-svg-title { width: 14px; height: 14px; } .sgis-scroll-area { max-height: 280px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(139, 92, 246, 0.4) transparent; } .sgis-scroll-area::-webkit-scrollbar { width: 5px; } .sgis-scroll-area::-webkit-scrollbar-track { background: transparent; } .sgis-scroll-area::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(139, 92, 246, 0.4), rgba(59, 130, 246, 0.4)); border-radius: 3px; } .sgis-badge-group-stack { display: flex; flex-direction: column; gap: 6px; } .sgis-badge-group { background: linear-gradient(160deg, rgba(255, 255, 255, 0.025) 0%, rgba(139, 92, 246, 0.02) 100%); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 10px; overflow: hidden; transition: all 0.25s; } .sgis-badge-group:hover { border-color: rgba(139, 92, 246, 0.18); } .sgis-badge-group-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; user-select: none; position: relative; } .sgis-badge-group-head::after { content: ""; position: absolute; bottom: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.15), transparent); } .sgis-badge-group-icon { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(59, 130, 246, 0.08)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04); } .sgis-badge-group-icon svg { width: 15px; height: 15px; color: #c4b5fd; } .sgis-badge-group-titles { flex: 1; min-width: 0; } .sgis-badge-group-title { font-size: 12px; font-weight: 700; color: #fff; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sgis-badge-group-sub { font-size: 10px; color: var(--sgis-text-2); margin-top: 2px; font-weight: 500; } .sgis-badge-group-stats { display: flex; gap: 5px; flex-shrink: 0; } .sgis-badge-group-stat { font-size: 10px; color: #c4b5fd; padding: 2px 6px; background: rgba(139, 92, 246, 0.12); border-radius: 4px; font-weight: 600; } .sgis-badge-group-arrow { width: 16px; height: 16px; color: var(--sgis-text-2); flex-shrink: 0; transition: transform 0.25s; } .sgis-badge-group-arrow svg { width: 14px; height: 14px; } .sgis-badge-group-expanded .sgis-badge-group-arrow { transform: rotate(90deg); color: #c4b5fd; } .sgis-badge-group-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .sgis-badge-group-expanded .sgis-badge-group-body { max-height: 1200px; overflow-y: auto; } .sgis-badge-group-rows { padding: 4px 8px 8px; display: flex; flex-direction: column; gap: 4px; } .sgis-badge-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 7px; transition: all 0.2s; } .sgis-badge-row:hover { background: rgba(139, 92, 246, 0.08); border-color: rgba(139, 92, 246, 0.2); transform: translateX(2px); } .sgis-badge-row-icon { width: 28px; height: 28px; border-radius: 7px; background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(59, 130, 246, 0.06)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sgis-badge-row-icon svg { width: 14px; height: 14px; color: #c4b5fd; } .sgis-badge-row-info { flex: 1; min-width: 0; } .sgis-badge-row-name { font-size: 11px; font-weight: 600; color: #fff; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sgis-badge-row-meta { display: flex; gap: 6px; align-items: center; margin-top: 3px; font-size: 9px; flex-wrap: wrap; } .sgis-badge-row-lv { color: #a78bfa; font-weight: 700; } .sgis-badge-row-xp { color: #fbbf24; font-weight: 600; } .sgis-badge-row-rar { padding: 1px 5px; border-radius: 3px; font-weight: 600; font-size: 9px; } .sgis-badge-row-rar.r1 { background: rgba(148, 163, 184, 0.2); color: #cbd5e1; } .sgis-badge-row-rar.r2 { background: rgba(59, 130, 246, 0.18); color: #93c5fd; } .sgis-badge-row-rar.r3 { background: rgba(139, 92, 246, 0.2); color: #c4b5fd; } .sgis-badge-row-rar.r4 { background: rgba(236, 72, 153, 0.2); color: #f9a8d4; } .sgis-badge-row-rar.r5 { background: linear-gradient(135deg, rgba(251, 191, 36, 0.25), rgba(245, 158, 11, 0.15)); color: #fde047; } .sgis-badge-row-time { color: var(--sgis-text-2); font-weight: 500; } .sgis-badge-row-link { width: 24px; height: 24px; border-radius: 6px; background: rgba(139, 92, 246, 0.12); display: flex; align-items: center; justify-content: center; color: #c4b5fd; flex-shrink: 0; text-decoration: none; transition: all 0.2s; } .sgis-badge-row-link:hover { background: rgba(139, 92, 246, 0.25); color: #fff; transform: translateX(2px); } .sgis-badge-row-link svg { width: 12px; height: 12px; } .sgis-badge-group-foot { padding: 8px 12px 10px; font-size: 10px; color: var(--sgis-text-2); display: flex; gap: 6px; align-items: center; border-top: 1px solid rgba(255, 255, 255, 0.04); } .sgis-badge-group-empty { padding: 16px 12px; text-align: center; color: var(--sgis-text-2); font-size: 11px; background: rgba(255, 255, 255, 0.02); border-radius: 8px; border: 1px dashed rgba(255, 255, 255, 0.06); } .sgis-dist-stack { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; } .sgis-dist-row { display: flex; align-items: center; gap: 8px; font-size: 10px; } .sgis-dist-label { width: 32px; color: #c4b5fd; font-weight: 600; flex-shrink: 0; } .sgis-dist-bar { flex: 1; height: 8px; background: rgba(255, 255, 255, 0.05); border-radius: 4px; overflow: hidden; } .sgis-dist-bar-fill { height: 100%; background: linear-gradient(90deg, #8b5cf6, #3b82f6); border-radius: 4px; box-shadow: 0 0 6px rgba(139, 92, 246, 0.3); transition: width 0.6s ease; } .sgis-dist-count { width: 30px; text-align: right; color: var(--sgis-text); font-weight: 600; flex-shrink: 0; } .sgis-value-cards { display: flex; flex-direction: column; gap: 6px; } .sgis-value-card { display: flex; align-items: center; gap: 8px; padding: 7px 8px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.04) 0%, rgba(139, 92, 246, 0.025) 100%); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 8px; transition: all 0.2s; cursor: pointer; } .sgis-value-card:hover { background: linear-gradient(160deg, rgba(139, 92, 246, 0.1) 0%, rgba(59, 130, 246, 0.04) 100%); border-color: rgba(139, 92, 246, 0.3); transform: translateX(2px); } .sgis-value-card-img { width: 56px; height: 22px; border-radius: 4px; overflow: hidden; flex-shrink: 0; background: rgba(0, 0, 0, 0.3); } .sgis-value-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .sgis-value-card-info { flex: 1; min-width: 0; } .sgis-value-card-name { font-size: 11px; font-weight: 600; color: #fff; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sgis-value-card-meta { font-size: 9px; color: var(--sgis-text-2); margin-top: 2px; } .sgis-value-card-score { width: 38px; text-align: center; flex-shrink: 0; } .sgis-value-card-score-num { font-size: 16px; font-weight: 700; line-height: 1; } .sgis-value-card-score.high { color: #34d399; } .sgis-value-card-score.mid { color: #fbbf24; } .sgis-value-card-score.low { color: #94a3b8; } .sgis-value-card-score-lbl { font-size: 8px; color: var(--sgis-text-2); margin-top: 1px; letter-spacing: 0.5px; text-transform: uppercase; } .sgis-value-card-market { font-size: 9px; color: #c4b5fd; font-weight: 600; flex-shrink: 0; } .sgis-badge-row-icon-wrap { width: 42px; height: 56px; flex-shrink: 0; position: relative; border-radius: 5px; overflow: hidden; background: radial-gradient(circle at 50% 35%, rgba(139, 92, 246, 0.12), transparent 65%), linear-gradient(135deg, rgba(15, 23, 42, 0.6) 0%, rgba(30, 41, 59, 0.5) 100%); display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.06); } .sgis-badge-row-icon-wrap::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 100%); pointer-events: none; z-index: 1; } .sgis-badge-row-img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 0; transition: transform 0.3s ease; } .sgis-badge-row:hover .sgis-badge-row-img { transform: scale(1.06); } .sgis-badge-row-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 0; } .sgis-badge-row-icon svg { width: 13px; height: 13px; color: #c4b5fd; } .sgis-badge-row { position: relative; } .sgis-badge-row.has-tip { cursor: help; } .sgis-badge-tip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-8px); min-width: 220px; max-width: 280px; padding: 10px 12px; background: linear-gradient(160deg, rgba(22, 18, 44, 0.98) 0%, rgba(11, 14, 28, 0.98) 100%); border: 1px solid rgba(139, 92, 246, 0.35); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(139, 92, 246, 0.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 10; z-index: 100; } .sgis-badge-tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: rgba(22, 18, 44, 0.98); } .sgis-badge-row.has-tip:hover .sgis-badge-tip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(-4px); } .sgis-badge-tip-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid rgba(139, 92, 246, 0.15); } .sgis-badge-tip-name { font-size: 11px; font-weight: 700; color: #fff; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sgis-badge-tip-score { font-size: 13px; font-weight: 800; padding: 2px 8px; border-radius: 6px; } .sgis-badge-tip-score.high { background: linear-gradient(135deg, rgba(52, 211, 153, 0.25), rgba(16, 185, 129, 0.15)); color: #34d399; } .sgis-badge-tip-score.mid { background: linear-gradient(135deg, rgba(251, 191, 36, 0.25), rgba(245, 158, 11, 0.15)); color: #fbbf24; } .sgis-badge-tip-score.low { background: rgba(148, 163, 184, 0.2); color: #cbd5e1; } .sgis-badge-tip-row { display: flex; justify-content: space-between; font-size: 10px; color: var(--sgis-text-2); padding: 2px 0; } .sgis-badge-tip-row span:last-child { color: var(--sgis-text); font-weight: 600; } .sgis-badge-tip-bd { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.04); } .sgis-badge-tip-bd-row { display: flex; align-items: center; gap: 6px; font-size: 9px; color: var(--sgis-text-2); margin-bottom: 2px; } .sgis-badge-tip-bd-row > span:first-child { width: 30px; } .sgis-badge-tip-bd-bar { flex: 1; height: 4px; background: rgba(255, 255, 255, 0.05); border-radius: 2px; overflow: hidden; } .sgis-badge-tip-bd-bar > div { height: 100%; background: linear-gradient(90deg, #8b5cf6, #3b82f6); border-radius: 2px; } .sgis-badge-row-score { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px; } .sgis-badge-row-score.high { background: rgba(52, 211, 153, 0.18); color: #34d399; } .sgis-badge-row-score.mid { background: rgba(251, 191, 36, 0.18); color: #fbbf24; } .sgis-badge-row-score.low { background: rgba(148, 163, 184, 0.15); color: #cbd5e1; } /* v2.3.19: 相似游戏推荐网格 + 库存标记(参考 SteamPeek 1.9 配色) */ .sgis-sim-toolbar { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; align-items: center; } .sgis-sim-tbtn { padding: 4px 10px; font-size: 11px; border-radius: 5px; background: rgba(255,255,255,0.05); color: var(--sgis-text-2); border: 1px solid rgba(255,255,255,0.07); cursor: pointer; transition: all 0.15s; font-weight: 500; } .sgis-sim-tbtn:hover { background: rgba(102,192,244,0.1); color: var(--sgis-text); } .sgis-sim-tbtn.active { background: rgba(102,192,244,0.2); color: #66c0f4; border-color: rgba(102,192,244,0.4); } .sgis-sim-tbtn .cnt { font-size: 10px; opacity: 0.7; margin-left: 3px; } .sgis-sim-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; } .sgis-sim-card { position: relative; display: block; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 7px; overflow: hidden; transition: all 0.2s; text-decoration: none; color: var(--sgis-text); } .sgis-sim-card:hover { border-color: rgba(102,192,244,0.4); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); } .sgis-sim-card img { width: 100%; height: 62px; object-fit: cover; display: block; background: rgba(0,0,0,0.3); } .sgis-sim-card-body { padding: 5px 8px; } .sgis-sim-card-name { font-size: 11px; color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sgis-sim-card-price { font-size: 10px; color: var(--sgis-green-text); font-weight: 600; margin-top: 2px; } .sgis-sim-card-price.free { color: #66c0f4; } .sgis-sim-card-price.unknown { color: var(--sgis-text-2); font-weight: 400; } /* 三色库存标记 - 严格复刻 SteamPeek 1.9 / Steam 原生配色 */ .sgis-sim-tag { position: absolute; top: 4px; left: 4px; z-index: 5; padding: 0 5px; font-size: 9px; line-height: 16px; height: 16px; text-transform: uppercase; display: flex; align-items: center; border-radius: 1px; box-shadow: 1px 1px 3px rgba(0,0,0,0.5); pointer-events: none; font-weight: 600; white-space: nowrap; letter-spacing: 0.3px; } .sgis-sim-tag-owned { background: #67c1f5; color: #000; } .sgis-sim-tag-wishlist { background: #e1f7f9; color: #4c6c8c; } .sgis-sim-tag-ignored { background: #000; color: #fff; } .sgis-sim-more { text-align: center; font-size: 11px; color: var(--sgis-text-2); margin-top: 8px; padding: 6px; } .sgis-sim-more a { color: #66c0f4; text-decoration: none; } .sgis-sim-more a:hover { text-decoration: underline; } .sgis-sim-empty { font-size: 12px; color: var(--sgis-text-2); padding: 12px; text-align: center; } .sgis-sim-login-hint { font-size: 10px; color: var(--sgis-text-2); padding: 6px 0; margin-bottom: 4px; line-height: 1.5; } /* v2.3.19: 同类型游戏扩展推荐 */ .sgis-tagrec-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; } .sgis-tagrec-tab { padding: 4px 10px; font-size: 11px; border-radius: 5px; background: rgba(255,255,255,0.05); color: var(--sgis-text-2); border: 1px solid rgba(255,255,255,0.07); cursor: pointer; transition: all 0.15s; font-weight: 500; } .sgis-tagrec-tab:hover { background: rgba(139,92,246,0.1); color: var(--sgis-text); } .sgis-tagrec-tab.active { background: rgba(139,92,246,0.2); color: #c4b5fd; border-color: rgba(139,92,246,0.4); } .sgis-tagrec-loading { font-size: 12px; color: var(--sgis-text-2); padding: 10px; text-align: center; } /* v1.7.0: 年度大作年度筛选 chip bar(在 toolbar 上方一行) */ .sglv-goty-year-bar { display: flex !important; flex-wrap: wrap !important; gap: 5px !important; padding: 6px 12px !important; background: rgba(15, 23, 42, 0.3) !important; border-bottom: 1px solid var(--sglv-border) !important; flex-shrink: 0 !important; } .sglv-goty-year-chip { padding: 3px 10px !important; font-size: 11px !important; font-weight: 600 !important; border-radius: 12px !important; background: rgba(255, 255, 255, 0.04) !important; color: var(--sglv-text-2) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; cursor: pointer !important; transition: all 0.18s !important; font-variant-numeric: tabular-nums !important; } .sglv-goty-year-chip:hover { background: rgba(139, 92, 246, 0.12) !important; color: var(--sglv-text) !important; border-color: rgba(139, 92, 246, 0.3) !important; } .sglv-goty-year-chip.active { background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(59, 130, 246, 0.15)) !important; color: #c4b5fd !important; border-color: rgba(139, 92, 246, 0.5) !important; box-shadow: 0 0 8px rgba(139, 92, 246, 0.2) !important; } /* v2.7.1: 二级菜单 — 复刻 Steam 原生 supernav 下拉样式 */ .sglv-menu-wrap { position: relative !important; display: inline-block !important; } .sglv-submenu { display: none !important; position: absolute !important; top: 100% !important; left: 0 !important; min-width: 120px !important; background: #171a21 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; z-index: 9999 !important; padding: 0 !important; margin-top: 0 !important; } .sglv-menu-wrap:hover .sglv-submenu { display: block !important; } .sglv-submenu-item { display: block !important; padding: 0 12px !important; line-height: 25px !important; height: 25px !important; color: #ffffff !important; text-decoration: none !important; white-space: nowrap !important; cursor: pointer !important; font-size: 11px !important; font-family: "Motiva Sans", Arial, Helvetica, sans-serif !important; background: #171a21 !important; } .sglv-submenu-item:hover { background: #316373 !important; color: #ffffff !important; } /* 收藏浮窗:复用主浮窗样式,仅微调标题色 */ .sgc-panel .sglv-header h2 { color: #c2a050 !important; } .sgc-overlay { background: rgba(11, 17, 32, 0.75) !important; }`; /* ---------- sglv-cloud-save.lib.js ---------- */ // ==UserScript== // @name SGLV 云存档模块 (Library) // @name:en SGLV Cloud Save (Library) // @namespace https://greasyfork.org/scripts/588485 // @version 1.3.0 // @description Steam 游戏库查看器 - 云存档模块库(全局云存档列表抓取 / HTML解析 / 增量diff / 单App存档文件列表)。供主脚本 @require 引用,不可单独使用。 // @description:en Steam Game Library Viewer - Cloud Save module library (global cloud save list scrape / HTML parse / incremental diff / per-app file list). For host script @require only. // @author SmallRob // @license MIT // @noframes // ==/UserScript== /* * SGLV Cloud Save Library v1.0.0 * * 桥接契约(Host / ctx 需提供): * apiVersion: 1 * GM_xmlhttpRequest(宿主已 @grant) * isZh: boolean * showToast(msg) * cacheGet(key), cacheSet(key, val, ttl) * cacheTTL: { cloudSave: number } * storage: { getCloudSaveData(), setCloudSaveData(v) } * * 暴露 API: * init(ctx) -> boolean 初始化,注入宿主上下文 * getApiVersion() -> number * fetchGlobalCloudSaves(force) -> Promise<{games, source, lastUpdate, diff}> * 抓取全局云存档页面,解析游戏列表,与 IDB 缓存做增量 diff * fetchAppCloudSaveFiles(appid) -> Promise<{files, totalFiles}> * 抓取单 App 云存档文件列表(懒加载) * getCachedCloudSaves() -> {games, lastUpdate, source} | null * 从内存缓存读取(init 时已从 IDB 加载) * normalizeSize(text) -> number * 将 "1.2 MB" / "345 KB" 等文本转为字节数 * formatSize(bytes) -> string * 将字节数格式化为人类可读字符串 * * 宿主需 @grant GM_xmlhttpRequest, * 并 @connect store.steampowered.com(云存档页面)。 */ window.SGLVCloudSave = (function () { 'use strict'; // ---- 桥接宿主(由 init(ctx) 注入) ---- let Host = null; const apiVersion = 1; // 内存缓存 let _memCache = null; // {games: [], lastUpdate: 0, source: ''} // ==================== 工具函数 ==================== /** * 将 Steam 页面显示的大小文本转为字节数 * 支持: "345 bytes", "1.2 KB", "10.5 MB", "2 GB" */ function normalizeSize(text) { if (!text) return 0; const t = String(text).trim(); const m = t.match(/([\d.]+)\s*(bytes?|KB|MB|GB|TB)/i); if (!m) { // 纯数字也尝试解析 const n = parseFloat(t); return isNaN(n) ? 0 : n; } const val = parseFloat(m[1]) || 0; const unit = m[2].toLowerCase(); if (unit.startsWith('byte')) return Math.round(val); if (unit === 'kb') return Math.round(val * 1024); if (unit === 'mb') return Math.round(val * 1024 * 1024); if (unit === 'gb') return Math.round(val * 1024 * 1024 * 1024); if (unit === 'tb') return Math.round(val * 1024 * 1024 * 1024 * 1024); return 0; } /** * 将字节数格式化为人类可读字符串 */ function formatSize(bytes) { if (!bytes || bytes <= 0) return '0 B'; const units = ['B', 'KB', 'MB', 'GB', 'TB']; let i = 0; let val = bytes; while (val >= 1024 && i < units.length - 1) { val /= 1024; i++; } return `${val.toFixed(i === 0 ? 0 : 1)} ${units[i]}`; } /** * 从 HTML 文本中提取数字(如文件数 "42 files" -> 42) */ function parseFileCount(text) { if (!text) return 0; const m = String(text).match(/(\d+)/); return m ? parseInt(m[1], 10) : 0; } /** * 从游戏名称链接中提取 appid */ function extractAppId(href) { if (!href) return 0; const m = String(href).match(/appid=(\d+)/) || String(href).match(/\/app\/(\d+)/); return m ? parseInt(m[1], 10) : 0; } // ==================== 网络请求 ==================== /** * GM_xmlhttpRequest Promise 封装(text 模式) */ function gmFetchText(url, opts = {}) { return new Promise((resolve, reject) => { GM_xmlhttpRequest({ url, method: opts.method || 'GET', responseType: 'text', timeout: opts.timeout || 30000, headers: opts.headers || { 'Accept': 'text/html', 'Accept-Language': 'en-US,en;q=0.9' }, onload: (xhr) => { if (xhr.status === 200) { resolve(xhr.responseText); } else { reject(new Error(`HTTP ${xhr.status}: ${url}`)); } }, onerror: () => reject(new Error(`Network error: ${url}`)), ontimeout: () => reject(new Error(`Timeout: ${url}`)), }); }); } /** * 检测响应是否为 Steam 登录页(未登录被重定向) */ function isLoginPage(html) { if (!html) return true; // 登录页特征:有 username 输入框 且 无 #main_content return html.includes('input name="username"') && !html.includes('id="main_content"'); } // ==================== 全局云存档页面解析 ==================== /** * 抓取全局云存档页面,解析所有有云存档的游戏列表 * * 页面结构(store.steampowered.com/account/remotestorage): * 每个游戏一个条目,包含游戏名称、各平台文件数、总大小、查看/下载链接 * * 防御性解析:尝试多种 DOM 选择器,兼容页面结构变化 * * @returns {Promise>} */ async function scrapeGlobalCloudSavePage() { const url = 'https://store.steampowered.com/account/remotestorage'; const html = await gmFetchText(url); if (isLoginPage(html)) { throw new Error('LOGIN_REQUIRED'); } const doc = new DOMParser().parseFromString(html, 'text/html'); const games = []; // 策略1: 查找所有指向 remotestorageapp?appid= 的链接 // Steam 全局页面通常每个游戏一行,链接到单App页面 const appLinks = doc.querySelectorAll('a[href*="remotestorageapp"]'); if (appLinks.length > 0) { appLinks.forEach(link => { const href = link.href; const appid = extractAppId(href); if (!appid) return; const name = (link.textContent || '').trim() || `App ${appid}`; // 向上查找包含此链接的行容器(tr / div / li) let row = link.closest('tr') || link.closest('div') || link.parentElement; let fileCount = 0; let sizeText = ''; let sizeBytes = 0; if (row) { // 尝试从行内单元格/子元素提取文件数和大小 const cells = [...row.querySelectorAll('td, .cloudsave_size, .cloudsave_files, span, div')]; for (const cell of cells) { const txt = (cell.textContent || '').trim(); // 匹配大小文本 if (/[\d.]+\s*(bytes?|KB|MB|GB|TB)/i.test(txt) && !sizeText) { sizeText = txt; sizeBytes = normalizeSize(txt); } // 匹配文件数 if (/\d+\s*(file|文件)/i.test(txt) && fileCount === 0) { fileCount = parseFileCount(txt); } } } games.push({ appid, name, fileCount, totalSize: sizeText || formatSize(sizeBytes), sizeBytes, href }); }); } // 策略2: 如果策略1未找到数据,尝试查找 #main_content 下的所有表格行 if (games.length === 0) { const mainContent = doc.querySelector('#main_content'); if (mainContent) { const rows = mainContent.querySelectorAll('tr'); rows.forEach(row => { const link = row.querySelector('a[href*="remotestorageapp"]') || row.querySelector('a[href*="/app/"]'); if (!link) return; const href = link.href; const appid = extractAppId(href); if (!appid) return; const name = (link.textContent || '').trim() || `App ${appid}`; const cells = [...row.children]; let fileCount = 0; let sizeText = ''; let sizeBytes = 0; // 尝试从各列提取信息 for (const cell of cells) { const txt = (cell.textContent || '').trim(); if (/[\d.]+\s*(bytes?|KB|MB|GB|TB)/i.test(txt) && !sizeText) { sizeText = txt; sizeBytes = normalizeSize(txt); } if (/\d+\s*(file|文件)/i.test(txt) && fileCount === 0) { fileCount = parseFileCount(txt); } } games.push({ appid, name, fileCount, totalSize: sizeText || formatSize(sizeBytes), sizeBytes, href }); }); } } // 策略3: 降级模式 - 如果全局页面无法解析,返回空数组让宿主降级处理 if (games.length === 0) { console.warn('[SGLVCloudSave] 全局云存档页面未能解析出游戏列表,可能页面结构已变更'); } return games; } // ==================== 单 App 云存档文件列表解析 ==================== /** * 抓取指定 App 的云存档文件列表(分页) * * 页面结构(store.steampowered.com/account/remotestorageapp?appid=XXX): * 每页50文件,表格行包含 主目录/子目录/大小/日期/下载链接 * 底部有翻页链接 * * @param {number} appid * @returns {Promise<{files: Array, totalFiles: number}>} */ async function scrapeAppCloudSaveFiles(appid) { const files = []; let index = 0; const pageSize = 50; while (true) { const url = `https://store.steampowered.com/account/remotestorageapp?appid=${appid}&index=${index}`; const html = await gmFetchText(url); if (isLoginPage(html)) { throw new Error('LOGIN_REQUIRED'); } const doc = new DOMParser().parseFromString(html, 'text/html'); const pageFiles = parseAppFileRows(doc, index); files.push(...pageFiles); // 翻页检测(null 安全) if (checkNextPage(doc, index)) { index += pageSize; await sleep(200); // 翻页间隔 } else { break; } } return { files, totalFiles: files.length }; } /** * 解析单App页面表格行(使用原生 children,不依赖 Prototype.js) * v1.2.0: 修复选择器——精确匹配 #main_content 内的 accountTable tbody tr, * 避免页面其他表格(导航/页脚)的 tr 被误选导致文件数计算错误 */ function parseAppFileRows(dom, globalIndex) { // v1.2.0: 精确匹配 accountTable 的 tbody tr(参考 Steam 云.html 页面结构) const rows = [...dom.querySelectorAll('#main_content table.accountTable tbody tr, #main_content .accountTable tbody tr')]; // 兜底:如果精确匹配无结果,回退到全文档 tr(兼容旧页面结构) const finalRows = rows.length > 0 ? rows : [...dom.querySelectorAll('tr')].slice(1); return finalRows.map((node, index) => { const childrens = [...node.children]; if (childrens.length < 4) return null; const mainFolder = (childrens[0].innerText || '').trim(); const subFolder = (childrens[1].innerText || '').trim(); const path = mainFolder ? `${mainFolder}/${subFolder}` : subFolder; const size = (childrens[2].innerText || '').trim(); const date = (childrens[3].innerText || '').trim(); const href = childrens[4]?.querySelector('a')?.href || ''; return { index: globalIndex + index, path, size, date, href, sizeBytes: normalizeSize(size) }; }).filter(Boolean); } /** * 翻页检测(null 安全) */ function checkNextPage(dom, currentIndex) { try { const nextLink = dom.querySelector('#main_content > a:last-child'); if (!nextLink || !nextLink.href) return false; const match = nextLink.href.match(/index=(\d+)/); if (!match) return false; const nextIndex = parseInt(match[1], 10) || 0; return nextIndex > currentIndex; } catch { return false; } } // ==================== 增量 Diff 引擎 ==================== /** * 将新抓取的游戏列表与缓存做增量比对 * * @param {Array} newGames - 新抓取的游戏列表 * @param {Array} oldGames - 缓存中的旧游戏列表 * @returns {{new: Array, changed: Array, removed: Array, merged: Array}} * - new: 新增的游戏(appid 不在旧缓存中) * - changed: 文件数或大小发生变化的游戏 * - removed: 旧缓存中有但新抓取中没有的游戏 * - merged: 合并后的完整列表(新数据 + _status 标记) */ function diffCloudSaves(newGames, oldGames, options = {}) { const { additive = false } = options; // v2.9.39: additive=true 时只增不减,保留旧数据中未被新抓取覆盖的项 const oldMap = new Map(); if (Array.isArray(oldGames)) { oldGames.forEach(g => oldMap.set(g.appid, g)); } const newMap = new Map(); newGames.forEach(g => newMap.set(g.appid, g)); const added = []; const changed = []; const removed = []; const merged = []; // 检查新增和变化 for (const game of newGames) { const old = oldMap.get(game.appid); if (!old) { // 新增 game._status = 'new'; added.push(game); } else { // 比较文件数和大小 const fileChanged = game.fileCount !== old.fileCount; const sizeChanged = game.sizeBytes !== old.sizeBytes; // v1.3.0: 保留旧 fileCount——全局页面不展示文件数,新抓取 fileCount=0 不代表文件数变了 // 只有旧缓存的 fileCount 才是逐 App 页面获取的真实值,避免每次重新抓取后全部丢失 if ((!game.fileCount || game.fileCount === 0) && old.fileCount > 0) { game.fileCount = old.fileCount; } if (fileChanged || sizeChanged) { game._status = 'changed'; changed.push(game); } else { game._status = 'unchanged'; } } merged.push(game); } // 检查移除 for (const [appid, oldGame] of oldMap) { if (!newMap.has(appid)) { if (additive) { // v2.9.39: 只增不减模式——保留旧数据,标记为保留 oldGame._status = 'kept'; merged.push(oldGame); // 不推入 removed(不向用户展示"删除"徽章) } else { removed.push(oldGame); } } } return { new: added, changed, removed, merged }; } // ==================== 对外 API ==================== /** * 抓取指定 App 的云存档文件列表(对外封装,含错误处理) * * @param {number} appid * @returns {Promise<{files: Array, totalFiles: number}>} */ async function fetchAppCloudSaveFiles(appid) { if (!Host) throw new Error('SGLVCloudSave not initialized'); if (!appid) throw new Error('appid is required'); return scrapeAppCloudSaveFiles(appid); } /** * v1.2.0: 轻量级获取单 App 云存档文件数量(不下载完整文件列表) * 仅抓取页面并计数 accountTable tbody tr 行数,支持分页累计 * * @param {number} appid * @returns {Promise} 文件总数 */ async function fetchAppFileCount(appid) { if (!Host) throw new Error('SGLVCloudSave not initialized'); if (!appid) throw new Error('appid is required'); let total = 0; let index = 0; const pageSize = 50; while (true) { const url = `https://store.steampowered.com/account/remotestorageapp?appid=${appid}&index=${index}`; const html = await gmFetchText(url); if (isLoginPage(html)) throw new Error('LOGIN_REQUIRED'); const doc = new DOMParser().parseFromString(html, 'text/html'); // v1.2.0: 精确匹配 accountTable tbody tr(参考 Steam 云.html 页面结构) let rows = [...doc.querySelectorAll('#main_content table.accountTable tbody tr, #main_content .accountTable tbody tr')]; if (rows.length === 0) rows = [...doc.querySelectorAll('tr')].slice(1); // 过滤掉非数据行(children < 4 的行) const dataRows = rows.filter(r => r.children.length >= 4); total += dataRows.length; if (dataRows.length >= pageSize && checkNextPage(doc, index)) { index += pageSize; await sleep(200); } else { break; } } return total; } /** * v1.2.0: 批量获取游戏列表的文件数量(后台渐进式填充) * 对 fileCount=0 的游戏逐一请求单 App 页面解析文件数,通过 onProgress 回调通知宿主更新 UI * * @param {Array} games - 游戏列表 [{appid, fileCount, ...}] * @param {object} [options] * @param {function} [options.onProgress] - 回调 (updatedGame, allGames) => void * @param {number} [options.concurrency=3] - 并发数 * @param {number} [options.delay=500] - 每批之间的延迟(ms) * @param {AbortSignal} [options.signal] - 可选中止信号 * @returns {Promise} 更新后的游戏列表 */ async function enrichFileCounts(games, options = {}) { if (!Host) throw new Error('SGLVCloudSave not initialized'); const { onProgress, concurrency = 3, delay = 500, signal } = options; if (!Array.isArray(games) || games.length === 0) return games; // 筛选需要获取文件数的游戏(fileCount=0 且有 appid) const pending = games.filter(g => g.appid && (!g.fileCount || g.fileCount === 0)); if (pending.length === 0) return games; console.log(`[SGLVCloudSave] enrichFileCounts — 需获取 ${pending.length}/${games.length} 款游戏的文件数`); let processed = 0; // 并发池(限流) const pool = [...pending]; const workers = Array.from({ length: Math.min(concurrency, pool.length) }, async () => { while (pool.length > 0) { if (signal?.aborted) return; const game = pool.shift(); if (!game) return; try { const count = await fetchAppFileCount(game.appid); game.fileCount = count; processed++; console.log(`[SGLVCloudSave] 文件数: App ${game.appid} = ${count} (${processed}/${pending.length})`); if (onProgress) onProgress(game, games); } catch (e) { // 单个失败不影响整体,保留 fileCount=0 console.warn(`[SGLVCloudSave] 获取 App ${game.appid} 文件数失败:`, e.message); processed++; } // 请求间隔 await sleep(delay); } }); await Promise.all(workers); // 持久化到 IDB try { if (_memCache) { _memCache.games = games; // v1.3.0: 记录文件数填充时间戳,供宿主判断 5 天内是否需要重新获取 _memCache.fileCountAt = Date.now(); Host.storage.setCloudSaveData(_memCache); console.log(`[SGLVCloudSave] enrichFileCounts 完成,已持久化 ${games.length} 款游戏数据 (fileCountAt=${new Date(_memCache.fileCountAt).toLocaleString()})`); } } catch (e) { console.warn('[SGLVCloudSave] enrichFileCounts 持久化失败:', e); } return games; } /** * 抓取全局云存档数据,与缓存做增量 diff,持久化到 IDB * * @param {boolean} force - 是否强制刷新(忽略缓存TTL) * @param {object} [options] * @param {boolean} [options.additive=false] v2.9.39: 只增不减模式(保留旧数据中未在新抓取中出现的项) * @param {boolean} [options.silent=false] v2.9.39: 静默模式(不修改 lastUpdate,用于后台增量更新;保留旧时间戳以便节流) * @returns {Promise<{games, source, lastUpdate, diff, fromCache?}>} */ async function fetchGlobalCloudSaves(force = false, options = {}) { if (!Host) throw new Error('SGLVCloudSave not initialized'); const { additive = false, silent = false } = options; // 非强制刷新时检查缓存TTL if (!force && _memCache && _memCache.lastUpdate) { const ttl = Host.cacheTTL?.cloudSave || (24 * 3600 * 1000); if (Date.now() - _memCache.lastUpdate < ttl) { return { games: _memCache.games, source: 'cache', lastUpdate: _memCache.lastUpdate, diff: null, fromCache: true, }; } } // 抓取全局页面 const newGames = await scrapeGlobalCloudSavePage(); // 与旧缓存做 diff const oldGames = _memCache?.games || []; const diff = diffCloudSaves(newGames, oldGames, { additive }); // 更新内存缓存 _memCache = { games: diff.merged, // v2.9.39: 静默模式保留原始 lastUpdate(避免重置后台刷新节流时间) lastUpdate: silent && _memCache?.lastUpdate ? _memCache.lastUpdate : Date.now(), source: 'web', }; // 持久化到 IDB try { Host.storage.setCloudSaveData(_memCache); } catch (e) { console.warn('[SGLVCloudSave] IDB 持久化失败:', e); } return { games: diff.merged, source: 'web', lastUpdate: _memCache.lastUpdate, diff: { new: diff.new, changed: diff.changed, removed: diff.removed }, }; } /** * v2.9.39: 仅从 IDB 加载缓存到内存(不抓取网络),用于立即显示已有数据 * @returns {Promise<{games, source, lastUpdate}|null>} */ async function getCachedCloudSavesAsync() { if (!Host?.storage?.getCloudSaveData) return null; try { const cached = await Host.storage.getCloudSaveData(); if (cached && cached.games && Array.isArray(cached.games) && cached.games.length > 0) { _memCache = cached; // v1.3.0: 返回 fileCountAt 供宿主判断文件数是否需要重新获取(5 天 TTL) return { games: cached.games, source: 'cache', lastUpdate: cached.lastUpdate || 0, fileCountAt: cached.fileCountAt || 0, }; } } catch (e) { console.warn('[SGLVCloudSave] IDB 缓存加载失败:', e); } return null; } /** * 从 IDB 加载缓存到内存(init 时调用) */ async function loadCacheFromIDB() { if (!Host?.storage?.getCloudSaveData) return; try { const cached = await Host.storage.getCloudSaveData(); if (cached && cached.games && Array.isArray(cached.games)) { _memCache = cached; console.log(`[SGLVCloudSave] 从 IDB 加载缓存: ${cached.games.length} 款游戏, 更新于 ${new Date(cached.lastUpdate).toLocaleString()}`); } } catch (e) { console.warn('[SGLVCloudSave] IDB 缓存加载失败:', e); } } /** * 获取内存缓存(同步) */ function getCachedCloudSaves() { return _memCache ? { ..._memCache } : null; } // ==================== 初始化 ==================== function init(ctx) { if (!ctx || typeof ctx !== 'object') { console.error('[SGLVCloudSave] init 失败: ctx 为空'); return false; } if (ctx.apiVersion !== apiVersion) { console.error(`[SGLVCloudSave] API 版本不匹配: 宿主=${ctx.apiVersion}, 库=${apiVersion}`); return false; } Host = ctx; console.log('[SGLVCloudSave] v1.2.0 初始化成功'); // 异步加载 IDB 缓存到内存(非阻塞) loadCacheFromIDB(); return true; } function getApiVersion() { return apiVersion; } // ==================== 工具 ==================== function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } // ==================== 导出 ==================== return { init, getApiVersion, fetchGlobalCloudSaves, fetchAppCloudSaveFiles, fetchAppFileCount, // v1.2.0: 轻量级获取单 App 文件数 enrichFileCounts, // v1.2.0: 批量获取文件数(后台渐进式) getCachedCloudSaves, getCachedCloudSavesAsync, // v2.9.39: 异步从 IDB 加载缓存到内存(不抓取网络) normalizeSize, formatSize, // 内部函数导出(供测试/调试) _internal: { scrapeGlobalCloudSavePage, scrapeAppCloudSaveFiles, diffCloudSaves, parseAppFileRows, checkNextPage, isLoginPage, }, }; })(); /* ---------- sglv-cover-fallback.lib.js ---------- * v2.0.0 重写后已剥离为独立 lib: libs/sglv-libs-cover-fallback.lib.js * 引入方式: 在 sglv-libs-core IIFE 之前用 @require 加载, * 或本地开发用 build-cover-fallback-inline.js 内联。 * 此处不再内联完整实现(避免双实例覆盖 & 维护成本),仅占位说明。 */ /* ---------- sglv-game-collection.lib.js ---------- * v2.1.0 起已剥离为独立 lib: libs/sglv-libs-game-collection.lib.js * 引入方式: 在 sglv-libs-core IIFE 之前用 @require 加载, * 或本地开发用 build-game-collection-inline.js 内联。 * 此处不再内联完整实现(避免重复维护 & 收藏模块独立演进),仅占位说明。 */ /* ---------- sglv-app-detail.lib.js ---------- */ // ==UserScript== // @name SGLV App Detail Library // @namespace sglv-lib // @version 1.2.0 // @description SGLV 单个 appid 的详情/多地区价格/拥有与共享状态库,统一封装网络抓取、缓存、解析与文案。供 steam-game-library-viewer 等上游调用。 // 数据源:Steam 官方 appdetails API (cc=cn&l=schinese) + steamui appinfo(VDF,封面/系列/本地化名) + store DOM 兜底;多地区价格:同 appdetails 变 cc。 // 汇率:AugmentedSteam(主) + open.er-api.com(降级);缓存:内存 LRU 5min + GM_setValue 持久化 24h。 // 拥有/共享状态:由宿主通过 setHostApi 注入(getOwnedGames/isGameOwnedByMe/getGameOwnerNames/getActiveSteamId), // 本库不直接读 storage,完全解耦。 // 暴露 SGLVAppDetail:loadDetail / loadPrices / getOwnershipBadge / getSteamuiInfo / enrichWithSteamui / buildLibraryAssets / toCNY / sanitizeHtml / detectLang / setHostApi。 // 设计目标:UI 无关、可 Node 端单测、可被多个插件复用。 // 更新日志见脚本目录 README。 // @author SGLV // @noframes // ==/UserScript== /* * SGLV App Detail Library v1.0.0 * * 模块切分: * 1) 缓存层 _memCache / _diskCache (5min LRU + 24h 持久化) * 2) 网络层 _http / _getJson / _mapLimit * 3) 解析层 _parseAppdetails / _parsePriceRegion / _parseRate * 4) 业务层 loadDetail / loadPrices / getOwnershipBadge * 5) 工具层 toCNY / formatPrice / sanitizeHtml / detectLang / i18n * * 状态机:loadDetail() 内部根据 cache 命中状态走"同步返回 → 异步刷新"路径; * onProgress(stage, msg) 提供阶段回调,UI 层可显示加载动画。 * * 设计契约: * - 库不依赖 window.SGLVCore / SGLVPinyin / SGLVPinyin 等其他 SGLV 库 * - 不引入 GM_* 以外的浏览器 API * - 单元测试入口见同级 sglv-app-detail.lib.test.js */ (function (root) { 'use strict'; // 防止重复挂载 if (root.SGLVAppDetail && root.SGLVAppDetail.version === '1.2.0') return; // ==================== 常量 ==================== const VERSION = '1.2.0'; const API_VERSION = 1; // 缓存 TTL(毫秒) const MEM_TTL = 5 * 60 * 1000; // 内存 5 分钟 const DISK_TTL = 24 * 60 * 60 * 1000; // 磁盘 24 小时 const FAIL_TTL = 60 * 1000; // 失败重试节流 1 分钟 // 多地区价格(同 SGIS,可按需扩展) const PRIORITY_REGIONS = ['CN', 'US', 'TR', 'AR', 'RU', 'IN', 'BR', 'UA', 'KZ']; const REGION_CONCURRENCY = 3; const RATE_BASE = 'CNY'; const RATE_TTL = 60 * 60 * 1000; // 汇率缓存 1 小时 // appdetails API const APPDETAILS_BASE = 'https://store.steampowered.com/api/appdetails'; const RATE_PRIMARY_URL = 'https://api.augmentedsteam.com/rates/v1'; const RATE_FALLBACK_URL = 'https://open.er-api.com/v6/latest/CNY'; // v1.2.0: steamui appinfo 渠道 — 详情降级源 + 增强字段(libraryAssets/franchise/本地化名) // 数据由 sglv-cover-fallback.lib.js 统一拉取(VDF 解析 + 三级缓存 + CF/404 负缓存), // 该库未加载时本渠道自动跳过(可选依赖,不破坏独立可用性)。 const STEAMUI_ASSET_CDN = 'https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/'; // ==================== 国际化文案 ==================== // 默认英文 + 简体中文双语字典,由 detectLang() 决定取哪一个 const I18N = { en: { loadStage0: 'Preparing…', loadStage1: 'Fetching game details…', loadStage2: 'Parsing description & media…', loadStage3: 'Almost done…', priceStage0: 'Loading exchange rates…', priceStage1: 'Querying regional prices…', ownershipMine: 'Owned', ownershipShared: 'Family Shared', ownershipNotOwned: 'Not Owned', ownershipOwnedBy: 'Owned by: {names}', sharedFrom: 'Shared from: {names}', notOwnedHint: 'Not in your library', priceFree: 'Free', priceUserRegion: 'Your region', priceLowest: 'Lowest', priceFailed: 'Failed regions', rateFromAS: 'AugmentedSteam', rateFromOER: 'open.er-api.com', }, zh: { loadStage0: '准备中…', loadStage1: '正在获取游戏详情…', loadStage2: '正在解析简介与媒体…', loadStage3: '即将完成…', priceStage0: '正在加载汇率…', priceStage1: '正在查询多地区价格…', ownershipMine: '已拥有', ownershipShared: '家庭共享', ownershipNotOwned: '未拥有', ownershipOwnedBy: '由 {names} 拥有', sharedFrom: '共享自: {names}', notOwnedHint: '不在你的库中', priceFree: '免费', priceUserRegion: '本地区', priceLowest: '最低价', priceFailed: '失败地区', rateFromAS: 'AugmentedSteam', rateFromOER: 'open.er-api.com', }, }; function detectLang() { try { const lang = (root.document && root.document.documentElement && root.document.documentElement.lang) || (root.navigator && root.navigator.language) || 'en'; return /^zh/i.test(lang) ? 'zh' : 'en'; } catch (e) { return 'en'; } } function t(key) { const lang = detectLang(); return (I18N[lang] && I18N[lang][key]) || I18N.en[key] || key; } // ==================== 宿主 API 注入 ==================== // 上层可选择性注入"拥有/共享"相关 API,未注入时相关接口返回 unknown。 // 这样库在脱离 SGLV 主脚本时仍能加载,不会因为缺少依赖而抛错。 const _host = { getOwnedGames: null, // () => Game[] 其中 g.appid / g.owners / g.name isGameOwnedByMe: null, // (g) => boolean getGameOwnerNames: null, // (g) => string "Alice, Bob" getActiveSteamId: null, // () => string '7656xxxx' isGameFamilyShared: null, // 可选:(g) => boolean }; function setHostApi(api) { if (!api || typeof api !== 'object') return; Object.keys(_host).forEach(k => { if (typeof api[k] === 'function') _host[k] = api[k]; }); } // ==================== 缓存层 ==================== // 内存 LRU(简单 Map 即可,只按时间淘汰,5min 足够) const _memCache = new Map(); const _failBlacklist = new Map(); function _memGet(key) { const e = _memCache.get(key); if (!e) return null; if (e.exp < Date.now()) { _memCache.delete(key); return null; } return e.data; } function _memSet(key, data, ttl) { _memCache.set(key, { data, exp: Date.now() + ttl }); // 限制内存大小(> 200 项时清理最老) if (_memCache.size > 200) { const firstKey = _memCache.keys().next().value; _memCache.delete(firstKey); } } function _memClear() { _memCache.clear(); _failBlacklist.clear(); } // 持久化(GM_setValue)——浏览器环境可选 function _diskGet(key) { try { if (typeof GM_getValue === 'function') { const raw = GM_getValue(key, null); if (!raw) return null; const obj = JSON.parse(raw); if (!obj || obj.exp < Date.now()) return null; return obj.data; } } catch (e) { /* ignore */ } return null; } function _diskSet(key, data, ttl) { try { if (typeof GM_setValue === 'function') { GM_setValue(key, JSON.stringify({ data, exp: Date.now() + ttl })); } } catch (e) { /* ignore */ } } // 失败节流(防止网络雪崩) function _isInFailBlacklist(key) { const exp = _failBlacklist.get(key); if (!exp) return false; if (exp < Date.now()) { _failBlacklist.delete(key); return false; } return true; } function _markFail(key) { _failBlacklist.set(key, Date.now() + FAIL_TTL); } // ==================== 网络层 ==================== // 优先委托 sglv-core.lib.js 的 gmFetchText(自动重试 + 状态码校验) // 降级路径:无 SGLVCore 时(GM 隔离/Node 测试)用本地 GM_xmlhttpRequest + fetch function _http(opts) { // SGLVCore 可用:委托(带重试 + HTTP 状态校验) if (root.SGLVCore && root.SGLVCore.gmFetchText) { return root.SGLVCore.gmFetchText(opts.url, opts) .then(text => ({ status: 200, responseText: text })); } return new Promise((resolve, reject) => { // 浏览器环境优先 GM_xmlhttpRequest(突破 CORS) if (typeof GM_xmlhttpRequest === 'function') { GM_xmlhttpRequest({ method: opts.method || 'GET', url: opts.url, headers: opts.headers || { 'Accept': 'application/json' }, timeout: opts.timeout || 12000, anonymous: false, onload(r) { if (r.status >= 200 && r.status < 300) resolve(r); else reject(new Error('HTTP ' + r.status)); }, onerror: () => reject(new Error('network error')), ontimeout: () => reject(new Error('timeout')), }); return; } // 降级到 fetch(无 GM 环境,例如 Node 测试) const ctl = (typeof AbortController === 'function') ? new AbortController() : null; const timer = ctl ? setTimeout(() => ctl.abort(), opts.timeout || 12000) : null; fetch(opts.url, { signal: ctl ? ctl.signal : undefined }) .then(r => { if (timer) clearTimeout(timer); if (!r.ok) throw new Error('HTTP ' + r.status); return r.text(); }) .then(text => resolve({ status: 200, responseText: text })) .catch(err => { if (timer) clearTimeout(timer); reject(err); }); }); } async function _getJson(url, opts) { // SGLVCore 可用:委托 gmFetchJson(自动重试 + 状态校验 + JSON 解析) if (root.SGLVCore && root.SGLVCore.gmFetchJson) { return root.SGLVCore.gmFetchJson(url, opts); } const r = await _http(Object.assign({ url }, opts)); try { return JSON.parse(r.responseText); } catch (e) { throw new Error('invalid JSON'); } } async function _getText(url, opts) { // SGLVCore 可用:委托 gmFetchText(自动重试) if (root.SGLVCore && root.SGLVCore.gmFetchText) { return root.SGLVCore.gmFetchText(url, opts); } const r = await _http(Object.assign({ url }, opts)); return r.responseText; } // 并发限流(优先委托 SGLVCore.concurrentPool,带 429 降并发 + 重试) async function _mapLimit(items, limit, iter) { if (root.SGLVCore && root.SGLVCore.concurrentPool) { const tasks = items.map((item, idx) => () => iter(item, idx)); const results = await root.SGLVCore.concurrentPool(tasks, limit); // 还原 _mapLimit 契约:out[i] = value 或 { __error: msg } return results.map(r => { if (r.status === 'fulfilled') return r.value; return { __error: r.reason && r.reason.message || String(r.reason) }; }); } // 降级路径:本地简易限流 const out = new Array(items.length); let i = 0; async function worker() { while (true) { const idx = i++; if (idx >= items.length) return; try { out[idx] = await iter(items[idx], idx); } catch (e) { out[idx] = { __error: e && e.message || String(e) }; } } } await Promise.all(Array.from({ length: Math.min(limit, items.length) }, worker)); return out; } // ==================== 解析层 ==================== function _parseAppdetails(payload, appid) { if (!payload || !payload[appid] || !payload[appid].success) return null; const d = payload[appid].data || {}; const ov = d.price_overview || null; const reviews = d.reviews || ''; // HTML 串 // 解析评测:Steam reviews HTML 形如 "..." 等 const reviewSummary = (reviews.match(/game_review_summary[^>]*>([^<]+) ({ id: c.id, description: c.description || '' })) : []; // v1.1.0: 支持语言详细解析(检测 * 标记=完全音频支持,提取脚注说明) const supportedLanguages = (() => { const raw = d.supported_languages || ''; if (!raw) return { list: [], note: '' }; let note = '', body = raw; const brIdx = raw.indexOf('
'); if (brIdx >= 0) { body = raw.slice(0, brIdx); note = raw.slice(brIdx + 4).replace(/<[^>]*>/g, '').trim(); } const langs = body.split(',') .map(s => s.replace(/<[^>]*>/g, '').trim()) .filter(Boolean) .map(name => { const hasAudio = name.includes('*'); return { name: name.replace(/\*/g, '').trim(), audio: hasAudio }; }) .filter(x => x.name); return { list: langs, note }; })(); // v1.1.0: 捆绑包/购买选项(从 package_groups 展开) const packages = []; if (Array.isArray(d.package_groups)) { d.package_groups.forEach(group => { (group.subs || []).forEach(sub => { const priceCents = sub.price_in_cents_with_discount; const isFree = sub.is_free_license === true || priceCents === 0; const optionText = (sub.option_text || '').trim(); let name = optionText, priceText = ''; const dashIdx = optionText.lastIndexOf(' - '); if (dashIdx > 0) { name = optionText.slice(0, dashIdx).trim(); priceText = optionText.slice(dashIdx + 3).trim(); } const savings = sub.percent_savings || 0; packages.push({ packageId: sub.packageid, name, priceText: isFree ? '免费' : priceText, isFree, discount: savings > 0 ? savings : 0, groupTitle: group.title || '', }); }); }); } return { appid: Number(appid), type: d.type || 'game', name: d.name || '', isFree: !!d.is_free, cover: d.header_image || '', developers: Array.isArray(d.developers) ? d.developers.slice() : [], publishers: Array.isArray(d.publishers) ? d.publishers.slice() : [], releaseDate: (d.release_date && d.release_date.date) || '', comingSoon: !!(d.release_date && d.release_date.coming_soon), platforms: { win: !!(d.platforms && d.platforms.windows), mac: !!(d.platforms && d.platforms.mac), linux: !!(d.platforms && d.platforms.linux), }, genres: Array.isArray(d.genres) ? d.genres.map(g => g.description || g.id || '').filter(Boolean) : [], // v1.1.0: genres 同时提供对象数组(genreObjs,供 SGIS resolveTagName ID 查找)和字符串数组(向后兼容) genreObjs: Array.isArray(d.genres) ? d.genres.map(g => ({ id: g.id, description: g.description || '' })) : [], // v1.1.0: categories 同时提供对象数组(categoryObjs)和字符串数组(向后兼容) categories: categoryObjs.map(c => c.description || String(c.id || '')).filter(Boolean), categoryObjs, shortDesc: d.short_description || '', aboutDesc: d.about_the_game || '', detailedDescHtml: d.detailed_description || '', website: d.website || '', requirements: { minimum: (d.pc_requirements && d.pc_requirements.minimum) || '', recommended: (d.pc_requirements && d.pc_requirements.recommended) || '', }, languages: (d.supported_languages || '').split(/[,;]\s*/).filter(Boolean).slice(0, 20), supportedLanguages, // v1.1.0: 详细解析版 {list: [{name, audio}], note} cnPrice: ov ? { currency: ov.currency, price: ov.final / 100, initial: ov.initial / 100, discount: ov.discount_percent || 0, } : (d.is_free ? { currency: 'CNY', price: 0, initial: 0, discount: 0, free: true } : null), reviews: { summary: reviewSummary, count: reviewCount, pos: reviewPos }, metacritic: d.metacritic ? { score: d.metacritic.score, url: d.metacritic.url } : null, media: { screenshots: Array.isArray(d.screenshots) ? d.screenshots.map(s => ({ url: s.path_thumbnail || s.path_full, full: s.path_full })) : [], movies: Array.isArray(d.movies) ? d.movies.map(m => ({ name: m.name, url: m.webm && m.webm.max, thumb: m.thumbnail })) : [], }, // v1.1.0: SGIS 概览所需附加字段 movies: Array.isArray(d.movies) ? d.movies.slice(0, 4).map(m => ({ id: m.id, name: m.name || '', thumbnail: m.thumbnail || '', dash_av1: m.dash_av1 || '', dash_h264: m.dash_h264 || '', hls_h264: m.hls_h264 || '', postcard: m.postcard || m.thumbnail || '', highlight: !!m.highlight, })) : [], screenshots: (Array.isArray(d.screenshots) ? d.screenshots : []).slice(0, 9).map(s => ({ thumbnail: s.path_thumbnail, full: s.path_full, })), packages, controllerSupport: d.controller_support || null, requiredAge: (() => { if (d.required_age === undefined || d.required_age === null || d.required_age === '') return 0; const parsed = parseInt(String(d.required_age).replace(/[^\d]/g, ''), 10); return isNaN(parsed) ? 0 : parsed; })(), contentDescriptors: d.content_descriptors ? { ids: d.content_descriptors.ids || [], notes: d.content_descriptors.notes || '' } : null, background: d.background || d.background_raw || '', achievementsTotal: (d.achievements && d.achievements.total) ? d.achievements.total : 0, recommendations: (d.recommendations && d.recommendations.total) ? d.recommendations.total : 0, dlc: Array.isArray(d.dlc) ? d.dlc.slice(0, 30) : [], }; } function _parsePriceRegion(payload, appid, region) { if (!payload || !payload[appid] || !payload[appid].success) return null; const d = payload[appid].data || {}; if (d.is_free) return { region, price: 0, currency: 'FREE', initial: 0, discount: 0, free: true }; if (!d.price_overview) return null; const ov = d.price_overview; return { region, price: ov.final / 100, currency: ov.currency, initial: ov.initial / 100, discount: ov.discount_percent || 0, }; } // D1: 币种不匹配检测 — 借鉴 SGIS 主脚本 v2.3.7 经验 // Steam appdetails API 对登录用户可能忽略 cc= 参数,返回用户实际所在地区的价格 // (如请求 CN 但返回 INR), 这种数据是错误的,应标记为失败 // 返回 { ok: true } 或 { ok: false, error: string, expected, actual } function validatePriceRegion(priceObj, regionMeta) { if (!priceObj) return { ok: false, error: 'no price', expected: null, actual: null }; // FREE / 0 元 不参与校验 if (priceObj.free || priceObj.currency === 'FREE') return { ok: true }; if (!regionMeta || !regionMeta.currency) return { ok: true }; // 无 region meta 时不强制 if (priceObj.currency === regionMeta.currency) return { ok: true }; return { ok: false, error: `币种不匹配(期望${regionMeta.currency}, 实际${priceObj.currency}, 疑似Steam返回用户本区数据)`, expected: regionMeta.currency, actual: priceObj.currency, }; } function _parseAugmentedRate(payload) { // AugmentedSteam 形如 { "rates": { "USD": 0.14, "EUR": 0.13, ... } }, 基准为 USD if (!payload || !payload.rates) return null; const rates = payload.rates; if (!rates[RATE_BASE]) return null; // 转换为 "1 CNY = X 外币" const result = {}; Object.keys(rates).forEach(cur => { result[cur] = rates[cur] / rates[RATE_BASE]; }); return result; } function _parseOpenER(payload) { // open.er-api.com 形如 { "result": "success", "base_code": "CNY", "rates": { "USD": 0.14, ... } } if (!payload || payload.result !== 'success' || !payload.rates) return null; return Object.assign({}, payload.rates); } // ==================== steamui 渠道(v1.2.0) ==================== // 委托 sglv-cover-fallback.lib.js 拉取 steamui appinfo(规范化结构): // { appid, name, nameLocalized, type, oslist, releasestate, associations[], languages[], // assets: { poster, hero, heroBlur, logo, libraryHeader, smallCapsule, storeHeader } } // 该库未加载时返回 null(渠道跳过,不影响主流程)。 async function getSteamuiInfo(appid, options) { const fb = root.SGLVCoverFallback; if (!fb || typeof fb.getSteamuiAssets !== 'function') return null; try { return await fb.getSteamuiAssets(appid, options || {}); } catch (e) { return null; } } // 单资产组 → URL 结构。group 兼容两种形态: // variants: { english: {image, image2x}, japanese: {...} } (library_assets_full) // langMap: { english: 'hash/header.jpg', ... } (small_capsule / header_image) function _steamuiAssetUrls(appid, group, lang) { if (!group || typeof group !== 'object') return null; const langs = Object.keys(group); if (!langs.length) return null; const l = (lang && group[lang] !== undefined) ? lang : (group.english !== undefined ? 'english' : langs[0]); const v = group[l]; const base = STEAMUI_ASSET_CDN + appid + '/'; if (typeof v === 'string') { return /^https?:\/\//.test(v) ? { url: v, url2x: '', lang: l, langs } : { url: base + v, url2x: '', lang: l, langs }; } if (v && typeof v === 'object') { const url = v.image ? base + v.image : ''; const url2x = v.image2x ? base + v.image2x : ''; if (!url && !url2x) return null; return { url, url2x, lang: l, langs }; } return null; } // steamui 规范化信息 → libraryAssets 结构(kind → {url, url2x, lang, langs}) // kind 覆盖: poster(竖版 600x900) / hero(库横幅) / heroBlur / logo / libraryHeader / capsule / header function buildLibraryAssets(info, lang) { if (!info || !info.assets || typeof info.assets !== 'object') return null; const id = info.appid || 0; if (!id) return null; const kindMap = [ ['poster', 'poster'], ['hero', 'hero'], ['heroBlur', 'heroBlur'], ['logo', 'logo'], ['libraryHeader', 'libraryHeader'], ['capsule', 'smallCapsule'], ['header', 'storeHeader'], ]; const out = {}; let any = false; kindMap.forEach(([kind, key]) => { const u = _steamuiAssetUrls(id, info.assets[key], lang); if (u) { out[kind] = u; any = true; } }); return any ? out : null; } // associations → { developers, publishers, franchise } function _steamuiAssoc(info) { const out = { developers: [], publishers: [], franchise: '' }; (Array.isArray(info.associations) ? info.associations : []).forEach(a => { if (!a || !a.name) return; if (a.type === 'developer') out.developers.push(a.name); else if (a.type === 'publisher') out.publishers.push(a.name); else if (a.type === 'franchise' && !out.franchise) out.franchise = a.name; }); return out; } // 增强已有 detail(主路径成功后的补充,只填空缺字段,不覆盖已有值) // 新增/补全: franchise / libraryAssets / chineseName / localizedNames / developers / publishers / cover / background function enrichWithSteamui(detail, info, lang) { if (!detail || !info) return detail; const assoc = _steamuiAssoc(info); if (!detail.franchise && assoc.franchise) detail.franchise = assoc.franchise; if (!Array.isArray(detail.developers) || !detail.developers.length) { if (assoc.developers.length) detail.developers = assoc.developers.slice(); } if (!Array.isArray(detail.publishers) || !detail.publishers.length) { if (assoc.publishers.length) detail.publishers = assoc.publishers.slice(); } if (info.nameLocalized && typeof info.nameLocalized === 'object') { detail.localizedNames = info.nameLocalized; const cn = info.nameLocalized.schinese || info.nameLocalized.tchinese || ''; if (cn && !detail.chineseName) detail.chineseName = cn; } if (!detail.libraryAssets) { detail.libraryAssets = buildLibraryAssets(info, lang); } // cover/background 兜底(appdetails 失败或未返回时) if (!detail.cover && detail.libraryAssets && detail.libraryAssets.header) { detail.cover = detail.libraryAssets.header.url2x || detail.libraryAssets.header.url; } if (!detail.background && detail.libraryAssets && detail.libraryAssets.hero) { detail.background = detail.libraryAssets.hero.url2x || detail.libraryAssets.hero.url; } detail.steamuiEnriched = true; return detail; } // steamui 规范化信息 → 完整 detail 对象(降级源:两路 appdetails 均失败时) // 字段远少于 appdetails(无价格/简介/评测),但名称/封面/平台/厂商/系列/多语言资产齐全 function _parseSteamuiDetail(info, appid, lang) { if (!info) return null; const assoc = _steamuiAssoc(info); const os = Array.isArray(info.oslist) ? info.oslist : []; const assets = buildLibraryAssets(info, lang); const langList = Array.isArray(info.languages) ? info.languages.slice(0, 20) : []; return { appid: Number(appid), type: String(info.type || 'game').toLowerCase(), name: info.name || '', isFree: false, cover: assets && assets.header ? (assets.header.url2x || assets.header.url) : '', developers: assoc.developers, publishers: assoc.publishers, franchise: assoc.franchise, releaseDate: '', comingSoon: !!(info.releasestate && info.releasestate !== 'released'), platforms: { win: os.includes('windows'), mac: os.includes('mac'), linux: os.includes('linux') }, genres: [], genreObjs: [], categories: [], categoryObjs: [], shortDesc: '', aboutDesc: '', detailedDescHtml: '', website: '', requirements: { minimum: '', recommended: '' }, languages: langList, supportedLanguages: { list: langList.map(n => ({ name: n, audio: false })), note: '' }, cnPrice: null, reviews: { summary: '', count: '', pos: 0 }, metacritic: null, media: { screenshots: [], movies: [] }, movies: [], screenshots: [], packages: [], controllerSupport: null, requiredAge: 0, contentDescriptors: null, background: assets && assets.hero ? (assets.hero.url2x || assets.hero.url) : '', achievementsTotal: 0, recommendations: 0, dlc: [], // v1.2.0 steamui 专属字段 chineseName: (info.nameLocalized && (info.nameLocalized.schinese || info.nameLocalized.tchinese)) || '', localizedNames: info.nameLocalized || null, libraryAssets: assets, steamuiEnriched: true, source: 'steamui', }; } // ==================== 业务层 ==================== // --- 详情加载(主入口) --- async function loadDetail(appid, options) { options = options || {}; const lang = options.lang || detectLang(); const onProgress = typeof options.onProgress === 'function' ? options.onProgress : null; const useCache = options.useCache !== false; const force = !!options.force; const cacheKey = `detail:${appid}:${lang}`; if (useCache && !force) { const hit = _memGet(cacheKey) || _diskGet(cacheKey); if (hit) { if (onProgress) onProgress('done', t('loadStage3'), hit); return hit; } } if (_isInFailBlacklist(cacheKey) && !force) { throw new Error('detail fetch in cool-down'); } if (onProgress) onProgress('fetch', t('loadStage1')); // 主路径:appdetails API(cc=cn + l=schinese 一次拿到中文描述) let detail = null; try { const url = `${APPDETAILS_BASE}?appids=${appid}&cc=cn&l=schinese`; const payload = await _getJson(url, { timeout: 12000 }); detail = _parseAppdetails(payload, appid); } catch (e) { /* fallback below */ } // 降级路径 1:英文 appdetails if (!detail) { try { const url = `${APPDETAILS_BASE}?appids=${appid}&cc=us&l=english`; const payload = await _getJson(url, { timeout: 12000 }); detail = _parseAppdetails(payload, appid); } catch (e) { /* fallback below */ } } // 降级路径 2:steamui appinfo(名称/多语言封面/平台/厂商/系列;无价格与简介) if (!detail) { try { const info = await getSteamuiInfo(appid, { timeout: 6000 }); detail = _parseSteamuiDetail(info, appid, lang); } catch (e) { /* fallback below */ } } // 降级路径 3:store 页面 DOM 抽取 if (!detail) { try { detail = await _extractFromStorePage(appid); } catch (e) { _markFail(cacheKey); throw e; } } if (!detail) { _markFail(cacheKey); throw new Error('detail not found'); } // v1.2.0: steamui 增强 — 补 franchise/libraryAssets/本地化名/封面兜底 // (appdetails 成功时也执行;steamui 缓存/负缓存由 cover-fallback 管理,通常零开销) if (options.enrichSteamui !== false && detail.source !== 'steamui') { try { const info = await getSteamuiInfo(appid, { timeout: 6000 }); if (info) enrichWithSteamui(detail, info, lang); } catch (e) { /* 增强失败不影响主数据 */ } } if (onProgress) onProgress('parse', t('loadStage2')); // 解析 HTML 描述(清洗广告/截断过长描述) if (detail.detailedDescHtml) detail.detailedDescHtml = sanitizeHtml(detail.detailedDescHtml, 4000); if (detail.aboutDesc) detail.aboutDesc = sanitizeHtml(detail.aboutDesc, 1200); detail.cachedAt = Date.now(); detail.lang = lang; _memSet(cacheKey, detail, MEM_TTL); _diskSet(cacheKey, detail, DISK_TTL); if (onProgress) onProgress('done', t('loadStage3'), detail); return detail; } // store 页面 DOM 抽取(降级,仅取基础字段) async function _extractFromStorePage(appid) { const url = `https://store.steampowered.com/app/${appid}/?l=schinese`; const html = await _getText(url, { timeout: 12000 }); // pick(re, fallback, group=1) — group 参数支持选择第 N 个捕获组(默认 1) const pick = (re, fallback, group) => { const m = html.match(re); const idx = group || 1; return m && m[idx] ? m[idx].trim() : fallback; }; const name = pick(/
]*>([^<]+)]+src="([^"]+)"/, ''); const shortDesc = pick(/
]*>([\s\S]*?)<\/div>/, '').replace(/<[^>]+>/g, '').trim(); // 取第 2 个捕获组:

About This Game

之后的描述内容 const aboutDesc = pick(/
]*>([\s\S]*?)

About This Game<\/h2>([\s\S]*?)<\/div>/, '', 2); const developer = pick(/Developer:<\/b>[\s\S]*?]+>([^<]+)Publisher:<\/b>[\s\S]*?]+>([^<]+)Release Date:<\/b>([^<]+) { try { const url = `${APPDETAILS_BASE}?appids=${appid}&cc=${region}&l=english`; const payload = await _getJson(url, { timeout: 10000 }); return _parsePriceRegion(payload, appid, region); } catch (e) { return null; } }); const prices = []; const failed = []; results.forEach((r, i) => { if (!r) { failed.push({ region: regions[i] }); return; } // D1: 币种不匹配检测 — Steam API 对登录用户可能忽略 cc= 参数, // 返回用户实际所在地区的价格(如请求 CN 但返回 INR), 这种数据是错误的 // 借鉴 SGIS 主脚本 v2.3.7 经验 const meta = REGION_META[r.region]; const v = validatePriceRegion(r, meta); if (!v.ok) { failed.push({ region: r.region, error: v.error }); return; } prices.push(r); }); // 转换为 CNY(等值,便于排序) prices.forEach(p => { if (p.free || p.currency === 'FREE') p.cny = 0; else if (p.currency === RATE_BASE) p.cny = p.price; else p.cny = rateInfo.ready ? toCNY(p.price, p.currency, rateInfo.rates) : null; }); // 排序 prices.sort((a, b) => { if (a.cny == null && b.cny == null) return 0; if (a.cny == null) return 1; if (b.cny == null) return -1; return a.cny - b.cny; }); const out = { appid: Number(appid), prices, failed, rateReady: rateInfo.ready, rateSource: rateInfo.source, baseCurrency: RATE_BASE, userRegion: _detectUserRegion(), cachedAt: Date.now(), }; _memSet(cacheKey, out, MEM_TTL); _diskSet(cacheKey, out, DISK_TTL); if (onProgress) onProgress('done', '', out); return out; } function _detectUserRegion() { try { const m = (root.document && root.document.cookie || '').match(/steamCountry=(\w{2})/); if (m) return m[1]; } catch (e) { /* ignore */ } return 'CN'; } // 汇率拉取(主:AS / 降级:open.er-api) let _ratesCache = null; // { rates, exp, source } async function _ensureRates() { if (_ratesCache && _ratesCache.exp > Date.now()) { return { ready: true, rates: _ratesCache.rates, source: _ratesCache.source }; } // 主:AugmentedSteam try { const data = await _getJson(RATE_PRIMARY_URL, { timeout: 8000 }); const rates = _parseAugmentedRate(data); if (rates) { _ratesCache = { rates, exp: Date.now() + RATE_TTL, source: 'augmentedsteam' }; return { ready: true, rates, source: 'augmentedsteam' }; } } catch (e) { /* fallback below */ } // 降级:open.er-api try { const data = await _getJson(RATE_FALLBACK_URL, { timeout: 8000 }); const rates = _parseOpenER(data); if (rates) { _ratesCache = { rates, exp: Date.now() + RATE_TTL, source: 'open.er-api' }; return { ready: true, rates, source: 'open.er-api' }; } } catch (e) { /* ignore */ } return { ready: false, rates: null, source: null }; } // 公共:获取当前内存中的汇率(委托 _ensureRates,带 1h 内存缓存 + 自动重试) // 返回 { ready, rates, source, baseCurrency } // rates 语义为 1 CNY = X 外币 (baseCurrency=CNY 时的 AugmentedSteam 原值); // 跨脚本消费端如需 USD 枢纽表(「1 USD = X 币种」,键小写 apiCode), // 请用 SGLVCurrency.cnyBaseRatesToUsdRates(rates) 适配,勿自行取倒数混用 SGIS 语义。 // 调用方拿到 rates 后: // - 想换算到 baseCurrency: toCNY(amount, code, rates) ← 库已暴露 // - 想做币种校验: rates[code] !== null 即汇率可用 // 失败时 ready=false, rates=null (调用方应降级到本地拉取) async function getRates(options) { const force = !!(options && options.force); if (force) _ratesCache = null; // 强制刷新 const info = await _ensureRates(); return { ready: info.ready, rates: info.rates, source: info.source, baseCurrency: RATE_BASE, }; } // 公共:region 期望币种表(用于 D1 币种不匹配检测) // 默认内置 9 个 PRIORITY_REGIONS; 调用方可通过 setRegionMeta 覆盖或扩展 // v2.9.53 之前的 SGIS 实现 (steam-game-library-viewer 主脚本 line 12327) 有 17 地区 // 完整映射,这里只内置库需要的 9 地区,扩展由调用方负责 const REGION_META = { CN: { name: '中国', flag: '🇨🇳', currency: 'CNY' }, US: { name: '美国', flag: '🇺🇸', currency: 'USD' }, TR: { name: '土耳其', flag: '🇹🇷', currency: 'TRY' }, AR: { name: '阿根廷', flag: '🇦🇷', currency: 'ARS' }, RU: { name: '俄罗斯', flag: '🇷🇺', currency: 'RUB' }, IN: { name: '印度', flag: '🇮🇳', currency: 'INR' }, BR: { name: '巴西', flag: '🇧🇷', currency: 'BRL' }, UA: { name: '乌克兰', flag: '🇺🇦', currency: 'UAH' }, KZ: { name: '哈萨克斯坦', flag: '🇰🇿', currency: 'KZT' }, }; function setRegionMeta(code, meta) { if (!code || typeof code !== 'string') return; REGION_META[code.toUpperCase()] = Object.assign({}, REGION_META[code.toUpperCase()] || {}, meta || {}); } function getRegionMeta(code) { return code ? REGION_META[String(code).toUpperCase()] : null; } // ==================== 拥有 / 共享 状态徽章 ==================== /** * 计算一个 appid 的"拥有 / 共享"状态,返回 UI 可直接使用的徽章信息。 * 返回结构: * { * kind: 'mine' | 'shared' | 'not-owned' | 'unknown', * label: string, // "已拥有" / "家庭共享" / "未拥有" / "—" * tip: string, // tooltip 文本(包含共享者/拥有者姓名) * className: string, // 'sglv-detail-badge-mine' / 'shared' / 'not-owned' / 'unknown' * ownerNames: string, // 原始共享者/拥有者姓名(逗号分隔) * gameObj: object|null // 找到的 ownedGames 项 * } * 若宿主未注入 API,kind 始终为 'unknown'。 * * 第二个参数 `gameOrMap` 用于 O(1) 快速查找(推荐): * - 传 { appid, owners, name, ... }:直接当 gameObj,跳过 Array.find * - 传 Map:从 Map 取 * - 传 null/undefined:降级到 _host.getOwnedGames() + Array.find */ function getOwnershipBadge(appid, gameOrMap /* optional fast lookup */) { const empty = { kind: 'unknown', label: '—', tip: '', className: 'unknown', ownerNames: '', gameObj: null, }; if (!_host.getOwnedGames) return empty; let game = null; if (gameOrMap instanceof Map) { game = gameOrMap.get(Number(appid)) || null; } else if (gameOrMap && typeof gameOrMap === 'object' && Number(gameOrMap.appid) === Number(appid)) { game = gameOrMap; } if (!game) { try { const all = _host.getOwnedGames() || []; game = all.find(g => Number(g.appid) === Number(appid)) || null; } catch (e) { return empty; } } if (!game) { return { kind: 'not-owned', label: t('ownershipNotOwned'), tip: t('notOwnedHint'), className: 'sglv-detail-badge-not-owned', ownerNames: '', gameObj: null, }; } let isMine = true; try { if (_host.isGameOwnedByMe) isMine = !!_host.isGameOwnedByMe(game); } catch (e) { isMine = true; } let ownerNames = ''; try { if (_host.getGameOwnerNames) ownerNames = _host.getGameOwnerNames(game) || ''; } catch (e) { /* ignore */ } if (isMine) { return { kind: 'mine', label: t('ownershipMine'), tip: ownerNames ? t('ownershipOwnedBy').replace('{names}', ownerNames) : '', className: 'sglv-detail-badge-mine', ownerNames, gameObj: game, }; } return { kind: 'shared', label: t('ownershipShared'), tip: ownerNames ? t('sharedFrom').replace('{names}', ownerNames) : t('ownershipShared'), className: 'sglv-detail-badge-shared', ownerNames, gameObj: game, }; } // ==================== 工具层 ==================== function toCNY(amount, currency, rates) { if (!Number.isFinite(amount)) return null; if (currency === RATE_BASE) return amount; if (!rates || !rates[currency]) return null; // rates[CNY] = 1, rates[USD] = 0.14 → 1 USD = 1/0.14 CNY return amount / rates[currency]; } function formatPrice(amount, currency) { if (!Number.isFinite(amount)) return '—'; if (currency === 'CNY') return `¥${amount.toFixed(2)}`; return `${amount.toFixed(2)} ${currency}`; } // HTML 清洗(白名单,strip script/style/on*) // 安全策略: // 1) 整标签剥离: