99 lines
3.2 KiB
CSS
99 lines
3.2 KiB
CSS
/* ════════════════════════════════════════════════════════
|
|
* page-growth.css — Turn A
|
|
* 對應 growth_analysis.html 原 inline <style>
|
|
* 全部 token 化、scope 至 .growth-analysis-page
|
|
* ════════════════════════════════════════════════════════ */
|
|
|
|
.growth-analysis-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--momo-space-4, 16px);
|
|
}
|
|
|
|
.growth-analysis-page .card {
|
|
border: 1px solid var(--momo-border-strong);
|
|
border-radius: var(--momo-radius-md, 4px);
|
|
box-shadow: var(--momo-shadow-md);
|
|
margin-bottom: var(--momo-space-5, 24px);
|
|
background: var(--momo-bg-surface);
|
|
}
|
|
|
|
.growth-analysis-page .card-header {
|
|
background: var(--momo-bg-elevated);
|
|
border-bottom: 1px solid var(--momo-border-subtle);
|
|
font-size: var(--momo-text-title);
|
|
font-weight: var(--momo-font-weight-bold);
|
|
color: var(--momo-text-primary);
|
|
padding: var(--momo-space-4, 16px) var(--momo-space-5, 24px);
|
|
}
|
|
|
|
/* ── KPI 卡片 ────────────────────────────────────────── */
|
|
.growth-analysis-page .kpi-card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border: none;
|
|
}
|
|
.growth-analysis-page .kpi-card .icon-bg {
|
|
position: absolute;
|
|
right: calc(var(--momo-space-4, 16px) * -1);
|
|
bottom: calc(var(--momo-space-4, 16px) * -1);
|
|
font-size: 88px;
|
|
opacity: 0.15;
|
|
transform: rotate(-15deg);
|
|
pointer-events: none;
|
|
}
|
|
.growth-analysis-page .kpi-value {
|
|
font-family: var(--momo-font-mono);
|
|
font-feature-settings: "tnum";
|
|
font-size: var(--momo-text-display);
|
|
font-weight: var(--momo-font-weight-black);
|
|
letter-spacing: 0;
|
|
margin-bottom: var(--momo-space-1, 4px);
|
|
}
|
|
.growth-analysis-page .kpi-label {
|
|
font-size: var(--momo-text-body-sm);
|
|
font-weight: var(--momo-font-weight-semibold);
|
|
letter-spacing: 0;
|
|
color: var(--momo-text-secondary);
|
|
}
|
|
|
|
/* ── Bootstrap 覆寫：用 page palette 漸層取代原色 ─── */
|
|
.growth-analysis-page .bg-primary {
|
|
background: var(--momo-surface-raised) !important;
|
|
}
|
|
.growth-analysis-page .bg-success {
|
|
background: var(--momo-surface-raised) !important;
|
|
}
|
|
.growth-analysis-page .bg-info {
|
|
background: var(--momo-surface-raised) !important;
|
|
}
|
|
|
|
/* ── 趨勢色 ─────────────────────────────────────────── */
|
|
.growth-analysis-page .text-success,
|
|
.growth-analysis-page .trend-up {
|
|
color: var(--momo-warning-text) !important;
|
|
}
|
|
.growth-analysis-page .trend-down {
|
|
color: var(--momo-danger-text) !important;
|
|
}
|
|
|
|
.ga-competitor-quality {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: 10px 14px;
|
|
align-items: baseline;
|
|
}
|
|
|
|
.ga-competitor-quality span {
|
|
min-width: 0;
|
|
color: var(--momo-text-secondary);
|
|
font-size: var(--momo-text-body-sm);
|
|
font-weight: var(--momo-font-weight-semibold);
|
|
}
|
|
|
|
.ga-competitor-quality strong {
|
|
color: var(--momo-text-primary);
|
|
font-weight: var(--momo-font-weight-black);
|
|
text-align: right;
|
|
}
|