/* ============================================================ ConvertPulse 儀表板 v3 — 雙主題設計系統（明亮／深色） 主題由 決定；圖表 JS 讀取 下方 CSS 變數，切換主題時自動重繪。 ============================================================ */ /* ---------- 設計代幣：深色（預設） ---------- */ :root, :root[data-theme="dark"] { color-scheme: dark; --cvp-bg: #060a16; --cvp-bg-glow-a: rgba(99, 102, 241, 0.16); --cvp-bg-glow-b: rgba(34, 211, 238, 0.12); --cvp-surface: #0c1426; --cvp-surface-2: #131e38; --cvp-surface-3: #1a2747; --cvp-wash: rgba(148, 178, 255, 0.05); --cvp-wash-strong: rgba(148, 178, 255, 0.09); --cvp-border: rgba(148, 178, 255, 0.14); --cvp-border-strong: rgba(148, 178, 255, 0.26); --cvp-ink: #f2f6ff; --cvp-ink-2: #a9b7d6; --cvp-ink-3: #6e7fa3; --cvp-grid: rgba(148, 178, 255, 0.10); --cvp-accent-a: #22d3ee; --cvp-accent-b: #8b5cf6; --cvp-accent-grad: linear-gradient(135deg, #22d3ee, #8b5cf6); --cvp-accent-soft: rgba(34, 211, 238, 0.12); --cvp-accent-ring: rgba(34, 211, 238, 0.35); --cvp-btn-shadow: 0 8px 24px rgba(99, 102, 241, 0.35); --cvp-good: #2fd08a; --cvp-good-soft: rgba(47, 208, 138, 0.12); --cvp-bad: #ff7b7b; --cvp-bad-soft: rgba(255, 123, 123, 0.12); --cvp-warn: #fbbf24; --cvp-warn-soft: rgba(251, 191, 36, 0.10); /* 圖表（深色表面驗證通過的三色組） */ --cvp-c-line: #199e70; --cvp-c-phone: #3987e5; --cvp-c-form: #d95926; --cvp-chart-grid: rgba(148, 178, 255, 0.10); --cvp-chart-tick: #6e7fa3; --cvp-crosshair: rgba(242, 246, 255, 0.28); --cvp-spark-muted: rgba(169, 183, 214, 0.4); --cvp-heat-zero: rgba(148, 178, 255, 0.07); --cvp-heat-lo: #16233f; --cvp-heat-hi: #7fb6f5; --cvp-bar-fill-a: rgba(57, 135, 229, 0.75); --cvp-bar-fill-b: #3987e5; --cvp-bar-glow: rgba(57, 135, 229, 0.35); --cvp-card-shadow: 0 1px 0 rgba(148, 178, 255, 0.06) inset, 0 12px 40px rgba(2, 6, 18, 0.5); --cvp-pop-shadow: 0 16px 48px rgba(2, 6, 18, 0.65); --cvp-radius: 18px; --cvp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; } /* ---------- 設計代幣：明亮 ---------- */ :root[data-theme="light"] { color-scheme: light; --cvp-bg: #f5f7fd; --cvp-bg-glow-a: rgba(124, 58, 237, 0.10); --cvp-bg-glow-b: rgba(14, 165, 233, 0.10); --cvp-surface: #ffffff; --cvp-surface-2: #f2f5fc; --cvp-surface-3: #e9eefa; --cvp-wash: rgba(30, 58, 138, 0.03); --cvp-wash-strong: rgba(30, 58, 138, 0.06); --cvp-border: rgba(13, 25, 60, 0.09); --cvp-border-strong: rgba(13, 25, 60, 0.16); --cvp-ink: #0b1220; --cvp-ink-2: #44506b; --cvp-ink-3: #7d89a6; --cvp-grid: rgba(13, 25, 60, 0.06); --cvp-accent-a: #0ea5e9; --cvp-accent-b: #7c3aed; --cvp-accent-grad: linear-gradient(135deg, #0ea5e9, #7c3aed); --cvp-accent-soft: rgba(14, 165, 233, 0.10); --cvp-accent-ring: rgba(14, 165, 233, 0.30); --cvp-btn-shadow: 0 8px 24px rgba(124, 58, 237, 0.22); --cvp-good: #0b9e5b; --cvp-good-soft: rgba(11, 158, 91, 0.10); --cvp-bad: #dc3d43; --cvp-bad-soft: rgba(220, 61, 67, 0.09); --cvp-warn: #b45309; --cvp-warn-soft: rgba(180, 83, 9, 0.09); /* 圖表（白色表面驗證通過的三色組；aqua 由圖例＋數據表緩解對比） */ --cvp-c-line: #1baf7a; --cvp-c-phone: #2a78d6; --cvp-c-form: #eb6834; --cvp-chart-grid: rgba(13, 25, 60, 0.07); --cvp-chart-tick: #7d89a6; --cvp-crosshair: rgba(11, 18, 32, 0.30); --cvp-spark-muted: rgba(68, 80, 107, 0.35); --cvp-heat-zero: rgba(13, 25, 60, 0.05); --cvp-heat-lo: #dbe7fb; --cvp-heat-hi: #1c5cab; --cvp-bar-fill-a: rgba(42, 120, 214, 0.8); --cvp-bar-fill-b: #2a78d6; --cvp-bar-glow: rgba(42, 120, 214, 0.18); --cvp-card-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 30px rgba(16, 24, 40, 0.06); --cvp-pop-shadow: 0 18px 44px rgba(16, 24, 40, 0.16); } /* ---------- 基底 ---------- */ html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } [hidden] { display: none !important; } body { margin: 0; background: radial-gradient(1100px 520px at 12% -6%, var(--cvp-bg-glow-a), transparent 60%), radial-gradient(950px 460px at 88% -4%, var(--cvp-bg-glow-b), transparent 55%), var(--cvp-bg); color: var(--cvp-ink); font-family: var(--cvp-font); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background-color 0.25s ease, color 0.25s ease; } .cvp-app { min-height: 100vh; } .cvp-shell { max-width: 1240px; margin: 0 auto; padding: 28px 24px 40px; } button { font-family: inherit; } a { color: var(--cvp-accent-a); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--cvp-accent-a); outline-offset: 2px; border-radius: 4px; } .num { font-variant-numeric: tabular-nums; } /* ---------- 頂部列 ---------- */ .cvp-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--cvp-border); position: relative; } .cvp-top::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 220px; height: 2px; border-radius: 2px; background: var(--cvp-accent-grad); } .cvp-brand { display: flex; align-items: center; gap: 14px; min-width: 0; } .cvp-pulse-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--cvp-accent-grad); box-shadow: 0 0 0 4px var(--cvp-accent-soft), 0 0 18px var(--cvp-accent-ring); flex: none; animation: cvp-pulse 2.4s ease-in-out infinite; } @keyframes cvp-pulse { 0%, 100% { box-shadow: 0 0 0 4px var(--cvp-accent-soft), 0 0 14px var(--cvp-accent-ring); } 50% { box-shadow: 0 0 0 7px var(--cvp-accent-soft), 0 0 26px var(--cvp-accent-ring); } } .cvp-brand-text { display: flex; flex-direction: column; min-width: 0; } .cvp-brand-name { font-size: 19px; font-weight: 750; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cvp-brand-sub { font-size: 12px; color: var(--cvp-ink-3); letter-spacing: 0.14em; } .cvp-top-right { display: flex; align-items: center; gap: 10px; } .cvp-updated { font-size: 12px; color: var(--cvp-ink-3); } .cvp-badge { font-size: 11px; font-weight: 650; letter-spacing: 0.06em; padding: 3px 10px; border-radius: 999px; border: 1px solid; } .cvp-badge-demo { color: var(--cvp-warn); border-color: var(--cvp-warn); background: var(--cvp-warn-soft); } .cvp-badge-stale { color: var(--cvp-ink-2); border-color: var(--cvp-border-strong); background: var(--cvp-surface-2); } .cvp-icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; min-width: 34px; padding: 0 11px; border-radius: 10px; border: 1px solid var(--cvp-border); background: var(--cvp-surface); color: var(--cvp-ink-2); font-size: 12px; cursor: pointer; transition: color 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s; } .cvp-icon-btn:hover { color: var(--cvp-ink); border-color: var(--cvp-border-strong); box-shadow: var(--cvp-card-shadow); text-decoration: none; } .cvp-icon-btn:active { transform: scale(0.96); } .cvp-icon-btn.cvp-spin svg { animation: cvp-rot 0.8s linear infinite; } @keyframes cvp-rot { to { transform: rotate(360deg); } } /* ---------- 篩選列 ---------- */ .cvp-toolbar { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 20px; } .cvp-filters { display: inline-flex; gap: 4px; padding: 4px; background: var(--cvp-surface); border: 1px solid var(--cvp-border); border-radius: 12px; box-shadow: var(--cvp-card-shadow); } .cvp-filters button { border: 0; background: transparent; color: var(--cvp-ink-2); font-size: 13px; font-weight: 550; padding: 7px 16px; border-radius: 9px; cursor: pointer; transition: color 0.15s, background 0.15s, box-shadow 0.15s; } .cvp-filters button:hover { color: var(--cvp-ink); background: var(--cvp-wash-strong); } .cvp-filters button.is-active { color: #fff; background: var(--cvp-accent-grad); box-shadow: 0 4px 14px var(--cvp-accent-ring); } /* ---------- KPI 卡 ---------- */ .cvp-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; } .cvp-kpi { position: relative; background: linear-gradient(180deg, var(--cvp-wash), transparent), var(--cvp-surface); border: 1px solid var(--cvp-border); border-radius: var(--cvp-radius); padding: 18px 20px 14px; overflow: hidden; box-shadow: var(--cvp-card-shadow); transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s, background-color 0.25s; } .cvp-kpi:hover { border-color: var(--cvp-border-strong); transform: translateY(-2px); box-shadow: var(--cvp-pop-shadow); } .cvp-kpi::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--kpi-accent, var(--cvp-accent-grad)); opacity: 0.9; } .cvp-kpi-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cvp-ink-2); font-weight: 550; } .cvp-kpi-key { width: 10px; height: 10px; border-radius: 3px; flex: none; } .cvp-kpi-value { font-size: 40px; font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; margin: 6px 0 2px; } .cvp-kpi-hero .cvp-kpi-value { font-size: 48px; } .cvp-kpi-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; } .cvp-kpi-loop { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--cvp-border); font-size: 11.5px; color: var(--cvp-ink-2); line-height: 1.5; } .cvp-kpi-loop b { color: var(--cvp-good); font-weight: 700; } .cvp-kpi-loop.is-muted { color: var(--cvp-ink-3); font-size: 11px; } .cvp-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 650; padding: 2px 8px; border-radius: 999px; } .cvp-delta.up { color: var(--cvp-good); background: var(--cvp-good-soft); } .cvp-delta.down { color: var(--cvp-bad); background: var(--cvp-bad-soft); } .cvp-delta.flat { color: var(--cvp-ink-3); background: var(--cvp-wash-strong); } .cvp-delta-note { font-size: 11.5px; color: var(--cvp-ink-3); } .cvp-spark { display: block; } /* ---------- 卡片網格 ---------- */ .cvp-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; } .cvp-card { background: linear-gradient(180deg, var(--cvp-wash), transparent), var(--cvp-surface); border: 1px solid var(--cvp-border); border-radius: var(--cvp-radius); padding: 20px; min-width: 0; box-shadow: var(--cvp-card-shadow); transition: border-color 0.2s, box-shadow 0.2s, background-color 0.25s; } .cvp-card:hover { border-color: var(--cvp-border-strong); } .cvp-span4 { grid-column: span 4; } .cvp-span5 { grid-column: span 5; } .cvp-span6 { grid-column: span 6; } .cvp-span7 { grid-column: span 7; } .cvp-span8 { grid-column: span 8; } .cvp-span12 { grid-column: span 12; } .cvp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .cvp-card-head h2 { font-size: 15px; font-weight: 650; margin: 0; letter-spacing: 0.01em; } .cvp-card-head-sub { margin-top: 22px; } .cvp-card-note { font-size: 12px; color: var(--cvp-ink-3); } .cvp-card-tools { display: flex; align-items: center; gap: 12px; } .cvp-mini-btn { border: 1px solid var(--cvp-border); background: var(--cvp-surface); color: var(--cvp-ink-3); font-size: 12px; padding: 4px 11px; border-radius: 8px; cursor: pointer; transition: color 0.15s, border-color 0.15s, box-shadow 0.15s; } .cvp-mini-btn:hover, .cvp-mini-btn[aria-expanded="true"] { color: var(--cvp-ink); border-color: var(--cvp-border-strong); box-shadow: var(--cvp-card-shadow); } /* ---------- 圖例 ---------- */ .cvp-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .cvp-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--cvp-ink-2); } .cvp-legend-key { width: 14px; height: 3px; border-radius: 2px; flex: none; } .cvp-legend-key.is-swatch { width: 10px; height: 10px; border-radius: 3px; } /* ---------- 趨勢圖 ---------- */ .cvp-card-trend { display: flex; flex-direction: column; } .cvp-card-trend .cvp-trend-wrap { flex: 1; min-height: 280px; } .cvp-trend-wrap { position: relative; } .cvp-trend-wrap svg { display: block; width: 100%; height: auto; } .cvp-table-wrap { margin-top: 12px; max-height: 260px; overflow: auto; border: 1px solid var(--cvp-border); border-radius: 12px; } /* ---------- 表格 ---------- */ .cvp-table { width: 100%; border-collapse: collapse; font-size: 13px; } .cvp-table th { text-align: left; font-weight: 550; color: var(--cvp-ink-3); font-size: 12px; padding: 8px 12px; border-bottom: 1px solid var(--cvp-border); position: sticky; top: 0; background: var(--cvp-surface-2); white-space: nowrap; } .cvp-table td { padding: 8px 12px; border-bottom: 1px solid var(--cvp-grid); color: var(--cvp-ink-2); } .cvp-table td.num, .cvp-table th.num { text-align: right; font-variant-numeric: tabular-nums; } .cvp-table tr:last-child td { border-bottom: 0; } .cvp-table tbody tr:hover td { background: var(--cvp-wash-strong); color: var(--cvp-ink); } /* ---------- 占比條 ---------- */ .cvp-share-bar { display: flex; gap: 2px; height: 18px; border-radius: 6px; overflow: hidden; background: var(--cvp-surface-2); } .cvp-share-seg { min-width: 3px; transition: filter 0.15s; } .cvp-share-seg:hover { filter: brightness(1.18); } .cvp-share-legend { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; } .cvp-share-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cvp-ink-2); } .cvp-share-row .cvp-legend-key { width: 10px; height: 10px; border-radius: 3px; } .cvp-share-row .cvp-share-val { margin-left: auto; color: var(--cvp-ink); font-weight: 650; font-variant-numeric: tabular-nums; } .cvp-share-row .cvp-share-pct { color: var(--cvp-ink-3); font-size: 12px; width: 52px; text-align: right; font-variant-numeric: tabular-nums; } /* ---------- 管道／來源列 ---------- */ .cvp-bars { display: flex; flex-direction: column; gap: 12px; } .cvp-bar-row { display: grid; grid-template-columns: 1fr auto; row-gap: 5px; column-gap: 10px; align-items: center; } .cvp-bar-name { font-size: 13px; color: var(--cvp-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 8px; min-width: 0; } .cvp-chip { flex: none; font-size: 10.5px; color: var(--cvp-ink-3); border: 1px solid var(--cvp-border); background: var(--cvp-surface-2); border-radius: 999px; padding: 1px 7px; letter-spacing: 0.03em; } .cvp-bar-val { font-size: 13px; font-weight: 650; color: var(--cvp-ink); font-variant-numeric: tabular-nums; } .cvp-bar-track { grid-column: 1 / -1; height: 9px; border-radius: 0 4px 4px 0; background: var(--cvp-surface-2); overflow: hidden; position: relative; } .cvp-bar-fill { height: 100%; border-radius: 0 4px 4px 0; background: linear-gradient(90deg, var(--cvp-bar-fill-a), var(--cvp-bar-fill-b)); box-shadow: 0 0 10px var(--cvp-bar-glow); transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .cvp-bar-row:hover .cvp-bar-fill { filter: brightness(1.12); } /* ---------- 迷你堆疊 ---------- */ .cvp-mini-stack { display: flex; gap: 2px; height: 8px; border-radius: 3px; overflow: hidden; background: var(--cvp-surface-2); min-width: 90px; } .cvp-mini-seg { min-width: 2px; } /* ---------- 時段熱點圖 ---------- */ .cvp-heatmap { display: grid; grid-template-columns: 34px 1fr; gap: 6px; } .cvp-heatmap-ylabels { display: grid; grid-template-rows: repeat(7, 1fr); gap: 3px; } .cvp-heatmap-ylabels span { font-size: 11px; color: var(--cvp-ink-3); display: flex; align-items: center; } .cvp-heatmap-cells { display: grid; grid-template-columns: repeat(24, 1fr); grid-auto-rows: 18px; gap: 3px; } .cvp-heat-cell { border-radius: 3px; cursor: default; transition: transform 0.1s; } .cvp-heat-cell:hover { transform: scale(1.18); outline: 1px solid var(--cvp-border-strong); } .cvp-heatmap-xlabels { grid-column: 2; display: grid; grid-template-columns: repeat(24, 1fr); margin-top: 2px; } .cvp-heatmap-xlabels span { font-size: 10px; color: var(--cvp-ink-3); text-align: center; } .cvp-heatmap-scale { grid-column: 2; display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 11px; color: var(--cvp-ink-3); } .cvp-heatmap-scale .swatches { display: flex; gap: 2px; } .cvp-heatmap-scale .swatches i { width: 18px; height: 8px; border-radius: 2px; } /* ---------- 近期動態 ---------- */ .cvp-feed { display: flex; flex-direction: column; } .cvp-feed-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--cvp-grid); } .cvp-feed-row:last-child { border-bottom: 0; } .cvp-feed-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; flex: none; box-shadow: 0 0 0 2px var(--cvp-surface), 0 0 8px currentColor; } .cvp-feed-main { min-width: 0; flex: 1; } .cvp-feed-title { font-size: 13.5px; color: var(--cvp-ink); } .cvp-feed-title strong { font-weight: 650; } .cvp-feed-sub { font-size: 12px; color: var(--cvp-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cvp-feed-time { font-size: 11.5px; color: var(--cvp-ink-3); flex: none; margin-top: 3px; font-variant-numeric: tabular-nums; } /* ---------- 空狀態／錯誤 ---------- */ .cvp-empty { color: var(--cvp-ink-3); font-size: 13px; text-align: center; padding: 26px 0; } .cvp-error { background: var(--cvp-bad-soft); border: 1px solid var(--cvp-bad); color: var(--cvp-bad); border-radius: 12px; padding: 12px 16px; font-size: 13.5px; margin-bottom: 16px; } /* ---------- 載入中 ---------- */ .cvp-loading .cvp-kpis, .cvp-loading .cvp-grid { opacity: 0.45; pointer-events: none; } .cvp-kpis, .cvp-grid { transition: opacity 0.25s; } /* ---------- 工具提示 ---------- */ .cvp-tooltip { position: fixed; z-index: 9999; pointer-events: none; background: var(--cvp-surface); border: 1px solid var(--cvp-border-strong); border-radius: 12px; padding: 10px 12px; font-size: 12.5px; color: var(--cvp-ink-2); box-shadow: var(--cvp-pop-shadow); max-width: 260px; } .cvp-tooltip-title { font-size: 12px; color: var(--cvp-ink-3); margin-bottom: 6px; } .cvp-tooltip-row { display: flex; align-items: center; gap: 8px; padding: 1.5px 0; } .cvp-tooltip-key { width: 12px; height: 3px; border-radius: 2px; flex: none; } .cvp-tooltip-row .val { margin-left: auto; font-weight: 700; color: var(--cvp-ink); font-variant-numeric: tabular-nums; padding-left: 14px; } /* ---------- 頁尾 ---------- */ .cvp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--cvp-border); font-size: 12px; color: var(--cvp-ink-3); } /* ---------- 密碼閘門 ---------- */ .cvp-gate { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; position: relative; overflow: hidden; } .cvp-gate-glow { position: absolute; inset: 0; background: radial-gradient(600px 300px at 30% 20%, var(--cvp-bg-glow-a), transparent 60%), radial-gradient(500px 260px at 70% 75%, var(--cvp-bg-glow-b), transparent 55%); pointer-events: none; } .cvp-gate-card { position: relative; width: 100%; max-width: 380px; background: linear-gradient(180deg, var(--cvp-wash), transparent), var(--cvp-surface); border: 1px solid var(--cvp-border-strong); border-radius: 20px; padding: 36px 32px; text-align: center; box-shadow: var(--cvp-pop-shadow); } .cvp-gate-logo { display: flex; justify-content: center; margin-bottom: 18px; } .cvp-gate-logo .cvp-pulse-dot { width: 16px; height: 16px; } .cvp-gate-title { font-size: 22px; font-weight: 750; margin: 0 0 4px; } .cvp-gate-sub { font-size: 12.5px; color: var(--cvp-ink-3); letter-spacing: 0.1em; margin: 0 0 22px; } .cvp-gate-label { display: block; text-align: left; font-size: 12.5px; color: var(--cvp-ink-2); margin-bottom: 6px; } .cvp-gate-input { width: 100%; background: var(--cvp-surface-2); border: 1px solid var(--cvp-border-strong); border-radius: 10px; color: var(--cvp-ink); font-size: 15px; padding: 11px 14px; margin-bottom: 16px; transition: border-color 0.15s, box-shadow 0.15s; } .cvp-gate-input:focus { outline: none; border-color: var(--cvp-accent-a); box-shadow: 0 0 0 3px var(--cvp-accent-soft); } .cvp-gate-btn { width: 100%; border: 0; border-radius: 10px; padding: 12px; font-size: 15px; font-weight: 650; color: #fff; background: var(--cvp-accent-grad); box-shadow: var(--cvp-btn-shadow); cursor: pointer; transition: filter 0.15s, transform 0.15s; } .cvp-gate-btn:hover { filter: brightness(1.08); } .cvp-gate-btn:active { transform: scale(0.98); } .cvp-gate-error { background: var(--cvp-bad-soft); border: 1px solid var(--cvp-bad); color: var(--cvp-bad); font-size: 13px; border-radius: 9px; padding: 8px 12px; margin: 0 0 16px; } .cvp-gate-hint { font-size: 13px; color: var(--cvp-ink-2); } /* ---------- 一般內容頁 ---------- */ .cvp-content { min-height: 100vh; padding: 40px 24px; } .cvp-content-inner { max-width: 760px; margin: 0 auto; } .cvp-back { display: inline-block; font-size: 13px; margin-bottom: 24px; color: var(--cvp-ink-3); } .cvp-back:hover { color: var(--cvp-accent-a); } .cvp-post { background: var(--cvp-surface); border: 1px solid var(--cvp-border); border-radius: var(--cvp-radius); padding: 32px; margin-bottom: 20px; box-shadow: var(--cvp-card-shadow); } .cvp-post-title { font-size: 26px; margin: 0 0 6px; } .cvp-post-title a { color: var(--cvp-ink); } .cvp-post-meta { font-size: 12.5px; color: var(--cvp-ink-3); margin-bottom: 18px; } .cvp-post-body { color: var(--cvp-ink-2); } .cvp-post-body a { color: var(--cvp-accent-a); } .cvp-post-body img { max-width: 100%; height: auto; border-radius: 10px; } .cvp-pagination { color: var(--cvp-ink-2); } .cvp-pagination .nav-links { display: flex; gap: 10px; } /* ---------- 轉換明細頁 ---------- */ .cvp-toolbar-wrap { flex-wrap: wrap; gap: 10px; } .cvp-toolbar-link { margin-left: auto; font-size: 13px; color: var(--cvp-ink-2); border: 1px solid var(--cvp-border); background: var(--cvp-surface); border-radius: 10px; padding: 8px 14px; box-shadow: var(--cvp-card-shadow); transition: color 0.15s, border-color 0.15s; } .cvp-toolbar-link:hover { color: var(--cvp-ink); border-color: var(--cvp-border-strong); text-decoration: none; } .cvp-search { flex: 1; min-width: 200px; background: var(--cvp-surface); border: 1px solid var(--cvp-border); border-radius: 10px; color: var(--cvp-ink); font-size: 13.5px; font-family: inherit; padding: 9px 14px; transition: border-color 0.15s, box-shadow 0.15s; } .cvp-search::placeholder { color: var(--cvp-ink-3); } .cvp-search:focus { outline: none; border-color: var(--cvp-accent-a); box-shadow: 0 0 0 3px var(--cvp-accent-soft); } .cvp-events-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; font-size: 13px; color: var(--cvp-ink-2); } .cvp-events-total { color: var(--cvp-ink); font-weight: 650; font-variant-numeric: tabular-nums; } .cvp-table-scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px; } .cvp-events-table { min-width: 860px; } .cvp-event-row { cursor: pointer; } .cvp-event-row.is-open td { background: var(--cvp-wash-strong); } .cvp-nowrap { white-space: nowrap; } .cvp-type-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: baseline; box-shadow: 0 0 0 2px var(--cvp-surface); } .cvp-cell-strong { color: var(--cvp-ink); } .cvp-cell-sub { font-size: 11.5px; color: var(--cvp-ink-3); } .cvp-cell-page { max-width: 240px; } .cvp-cell-page div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cvp-cell-label { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cvp-event-detail td { background: var(--cvp-surface-2); border-bottom: 1px solid var(--cvp-border); padding: 14px 16px; } .cvp-detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 20px; } .cvp-detail-item { min-width: 0; } .cvp-detail-key { font-size: 11px; color: var(--cvp-ink-3); letter-spacing: 0.04em; margin-bottom: 2px; } .cvp-detail-val { font-size: 12.5px; color: var(--cvp-ink); word-break: break-all; } .cvp-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; } .cvp-pager-info { font-size: 12.5px; color: var(--cvp-ink-3); font-variant-numeric: tabular-nums; } .cvp-pager .cvp-mini-btn:disabled { opacity: 0.35; cursor: default; } /* ---------- 響應式 ---------- */ @media (max-width: 1024px) { .cvp-kpis { grid-template-columns: repeat(2, 1fr); } .cvp-span4, .cvp-span5, .cvp-span6, .cvp-span7, .cvp-span8 { grid-column: span 12; } } @media (max-width: 640px) { .cvp-shell { padding: 18px 14px 28px; } .cvp-kpis { grid-template-columns: 1fr; } .cvp-kpi-value { font-size: 34px; } .cvp-kpi-hero .cvp-kpi-value { font-size: 40px; } .cvp-top { flex-wrap: wrap; } .cvp-filters { width: 100%; justify-content: space-between; } .cvp-filters button { flex: 1; padding: 7px 4px; } .cvp-heatmap-xlabels span:nth-child(odd) { visibility: hidden; } .cvp-search { min-width: 100%; order: 5; } .cvp-toolbar-link { margin-left: 0; } } @media (prefers-reduced-motion: reduce) { .cvp-pulse-dot { animation: none; } *, *::before, *::after { transition-duration: 0.01ms !important; } } /* v6.3.0: summary cards adapt to all event types. */ .cvp-kpis{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));}