236 lines
7.1 KiB
CSS
236 lines
7.1 KiB
CSS
/* ════════════════════════════════════════════════════════
|
||
* page-growth-bem.css — Turn B
|
||
* BEM 元件層：page head / KPI / chart card / chart row
|
||
* 全部 scope 至 .growth-analysis-page
|
||
* ════════════════════════════════════════════════════════ */
|
||
|
||
/* ── Page head ──────────────────────────────────────── */
|
||
.growth-analysis-page .ga-page-head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: var(--momo-space-3, 16px);
|
||
padding: var(--momo-space-3, 16px) var(--momo-space-4, 20px);
|
||
margin-top: var(--momo-space-3, 16px);
|
||
background: var(--momo-surface-1);
|
||
border: 1px solid var(--momo-border-subtle);
|
||
border-radius: var(--momo-radius-md, 8px);
|
||
box-shadow: var(--momo-shadow-soft);
|
||
}
|
||
.growth-analysis-page .ga-page-head__title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--momo-space-2, 12px);
|
||
}
|
||
.growth-analysis-page .ga-page-head__icon {
|
||
font-size: 1.25rem;
|
||
color: var(--momo-warm-olive, #6f7a4a);
|
||
}
|
||
.growth-analysis-page .ga-page-head__h1 {
|
||
font-size: var(--momo-text-h4, 1.25rem);
|
||
font-weight: 800;
|
||
color: var(--momo-text-strong);
|
||
margin: 0;
|
||
}
|
||
.growth-analysis-page .ga-page-head__meta {
|
||
font-size: var(--momo-text-sm, 0.85rem);
|
||
color: var(--momo-text-tertiary);
|
||
}
|
||
.growth-analysis-page .ga-page-head__meta strong {
|
||
color: var(--momo-text-strong);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.growth-analysis-page .ga-empty-state {
|
||
display: grid;
|
||
gap: var(--momo-space-2, 8px);
|
||
padding: var(--momo-space-8, 40px) var(--momo-space-5, 24px);
|
||
margin-bottom: var(--momo-space-4, 20px);
|
||
color: var(--momo-ink-secondary);
|
||
background: var(--momo-surface-0);
|
||
border: 1px solid var(--momo-border-light);
|
||
border-radius: var(--momo-radius-md, 8px);
|
||
text-align: center;
|
||
}
|
||
|
||
.growth-analysis-page .ga-empty-state i {
|
||
color: var(--momo-warm-honey-deep);
|
||
font-size: var(--momo-text-2xl, 1.5rem);
|
||
}
|
||
|
||
.growth-analysis-page .ga-empty-state h2 {
|
||
margin: 0;
|
||
color: var(--momo-ink-primary);
|
||
font-size: var(--momo-text-lg, 1.125rem);
|
||
font-weight: var(--momo-font-bold, 700);
|
||
}
|
||
|
||
.growth-analysis-page .ga-empty-state p {
|
||
margin: 0;
|
||
color: var(--momo-ink-tertiary);
|
||
}
|
||
|
||
/* ── KPI Row ────────────────────────────────────────── */
|
||
.growth-analysis-page .ga-kpi-row {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: var(--momo-space-3, 16px);
|
||
}
|
||
@media (max-width: 992px) {
|
||
.growth-analysis-page .ga-kpi-row { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
.growth-analysis-page .ga-kpi {
|
||
position: relative;
|
||
overflow: hidden;
|
||
padding: var(--momo-space-4, 24px);
|
||
border-radius: var(--momo-radius-md, 8px);
|
||
color: var(--momo-text-strong);
|
||
background: var(--momo-surface-raised);
|
||
border: 1px solid var(--momo-border-strong);
|
||
border-left: 4px solid var(--ga-kpi-accent, var(--momo-page-accent));
|
||
box-shadow: var(--momo-shadow-soft);
|
||
min-height: 132px;
|
||
}
|
||
.growth-analysis-page .ga-kpi--revenue {
|
||
--ga-kpi-accent: var(--momo-page-accent);
|
||
}
|
||
.growth-analysis-page .ga-kpi--aov {
|
||
--ga-kpi-accent: var(--momo-tag-honey);
|
||
}
|
||
.growth-analysis-page .ga-kpi--orders {
|
||
--ga-kpi-accent: var(--momo-tag-olive);
|
||
}
|
||
|
||
.growth-analysis-page .ga-kpi__label {
|
||
position: relative;
|
||
z-index: 1;
|
||
font-size: var(--momo-text-sm, 0.85rem);
|
||
font-weight: 800;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
color: var(--momo-text-muted);
|
||
margin-bottom: var(--momo-space-2, 8px);
|
||
}
|
||
.growth-analysis-page .ga-kpi__value {
|
||
position: relative;
|
||
z-index: 1;
|
||
color: var(--momo-text-strong);
|
||
font-family: var(--momo-font-mono, ui-monospace, monospace);
|
||
font-size: 2rem;
|
||
font-weight: 800;
|
||
letter-spacing: 0;
|
||
margin-bottom: var(--momo-space-1, 4px);
|
||
line-height: 1.08;
|
||
}
|
||
.growth-analysis-page .ga-kpi__delta {
|
||
position: relative;
|
||
z-index: 1;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: var(--momo-space-1, 6px);
|
||
margin-top: var(--momo-space-2, 8px);
|
||
}
|
||
.growth-analysis-page .ga-kpi__chip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 2px 10px;
|
||
background: color-mix(in srgb, var(--ga-kpi-accent) 12%, var(--momo-surface));
|
||
color: var(--ga-kpi-accent);
|
||
border: 1px solid color-mix(in srgb, var(--ga-kpi-accent) 28%, var(--momo-border-subtle));
|
||
font-size: 0.72rem;
|
||
font-weight: 700;
|
||
border-radius: 6px;
|
||
}
|
||
.growth-analysis-page .ga-kpi__yoy {
|
||
font-weight: 700;
|
||
font-size: 0.95rem;
|
||
}
|
||
.growth-analysis-page .ga-kpi__yoy.is-up { color: var(--momo-tag-rust); }
|
||
.growth-analysis-page .ga-kpi__yoy.is-down { color: var(--momo-tag-olive); }
|
||
.growth-analysis-page .ga-kpi__hint {
|
||
position: relative;
|
||
z-index: 1;
|
||
font-size: var(--momo-text-xs, 0.78rem);
|
||
color: var(--momo-text-muted);
|
||
margin-top: 2px;
|
||
}
|
||
.growth-analysis-page .ga-kpi__icon-bg {
|
||
position: absolute;
|
||
right: -15px;
|
||
bottom: -15px;
|
||
font-size: 6rem;
|
||
color: var(--ga-kpi-accent);
|
||
opacity: 0.1;
|
||
transform: rotate(-15deg);
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* ── Chart Row 變體 ─────────────────────────────────── */
|
||
.growth-analysis-page .ga-chart-row {
|
||
display: grid;
|
||
gap: var(--momo-space-3, 16px);
|
||
}
|
||
.growth-analysis-page .ga-chart-row--8-4 { grid-template-columns: 2fr 1fr; }
|
||
.growth-analysis-page .ga-chart-row--6-6 { grid-template-columns: 1fr 1fr; }
|
||
@media (max-width: 992px) {
|
||
.growth-analysis-page .ga-chart-row--8-4,
|
||
.growth-analysis-page .ga-chart-row--6-6 { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
/* ── Chart Card ─────────────────────────────────────── */
|
||
.growth-analysis-page .ga-chart-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: var(--momo-surface-1);
|
||
border: 1px solid var(--momo-border-strong);
|
||
border-radius: var(--momo-radius-md, 8px);
|
||
box-shadow: var(--momo-shadow-soft);
|
||
overflow: hidden;
|
||
}
|
||
.growth-analysis-page .ga-chart-card__head {
|
||
padding: 1rem 1.25rem;
|
||
background: var(--momo-surface-2);
|
||
border-bottom: 1px solid var(--momo-border-subtle);
|
||
}
|
||
.growth-analysis-page .ga-chart-card__title {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--momo-space-1, 8px);
|
||
font-weight: 800;
|
||
color: var(--momo-text-strong);
|
||
}
|
||
.growth-analysis-page .ga-chart-card__title i {
|
||
color: var(--momo-warm-olive, #6f7a4a);
|
||
}
|
||
.growth-analysis-page .ga-chart-card__body {
|
||
padding: var(--momo-space-3, 16px);
|
||
height: var(--ga-chart-h, 320px);
|
||
}
|
||
.growth-analysis-page .ga-chart-card__body canvas {
|
||
width: 100% !important;
|
||
height: 100% !important;
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.growth-analysis-page .ga-page-head {
|
||
align-items: flex-start;
|
||
flex-direction: column;
|
||
padding: 14px 16px;
|
||
}
|
||
|
||
.growth-analysis-page .ga-kpi {
|
||
min-height: 112px;
|
||
padding: 16px;
|
||
}
|
||
|
||
.growth-analysis-page .ga-kpi__value {
|
||
font-size: 1.45rem;
|
||
}
|
||
|
||
.growth-analysis-page .ga-chart-card__body {
|
||
height: 260px !important;
|
||
}
|
||
}
|