346 lines
11 KiB
CSS
346 lines
11 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-4, 16px);
|
||
padding: var(--momo-space-4, 16px) var(--momo-space-5, 24px);
|
||
margin-top: var(--momo-space-3, 12px);
|
||
background: var(--momo-bg-surface);
|
||
border: 1px solid var(--momo-border-subtle);
|
||
border-radius: var(--momo-radius-md, 4px);
|
||
box-shadow: var(--momo-shadow-md);
|
||
}
|
||
.growth-analysis-page .ga-page-head__title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--momo-space-2, 8px);
|
||
min-width: 0;
|
||
}
|
||
.growth-analysis-page .ga-page-head__icon {
|
||
color: var(--momo-page-accent);
|
||
font-size: var(--momo-text-title);
|
||
}
|
||
.growth-analysis-page .ga-page-head__h1 {
|
||
margin: 0;
|
||
color: var(--momo-page-ink, var(--momo-text-primary));
|
||
font-family: var(--momo-font-display);
|
||
font-size: var(--momo-text-headline);
|
||
font-weight: var(--momo-font-weight-black);
|
||
line-height: var(--momo-line-height-tight);
|
||
letter-spacing: 0;
|
||
}
|
||
.growth-analysis-page .ga-page-head__meta {
|
||
flex: 0 0 auto;
|
||
color: var(--momo-text-secondary);
|
||
font-size: var(--momo-text-meta);
|
||
line-height: var(--momo-line-height-base);
|
||
text-align: right;
|
||
}
|
||
.growth-analysis-page .ga-page-head__meta strong {
|
||
color: var(--momo-text-primary);
|
||
font-family: var(--momo-font-mono);
|
||
font-weight: var(--momo-font-weight-bold);
|
||
font-feature-settings: "tnum";
|
||
}
|
||
|
||
.growth-analysis-page .ga-empty-state {
|
||
display: grid;
|
||
gap: var(--momo-space-2, 8px);
|
||
padding: var(--momo-space-7, 48px) var(--momo-space-5, 24px);
|
||
margin-bottom: var(--momo-space-4, 16px);
|
||
color: var(--momo-text-tertiary);
|
||
background: var(--momo-bg-surface);
|
||
border: 1px solid var(--momo-border-light);
|
||
border-radius: var(--momo-radius-md, 4px);
|
||
text-align: center;
|
||
}
|
||
|
||
.growth-analysis-page .ga-empty-state i {
|
||
color: var(--momo-page-accent-dark);
|
||
font-size: var(--momo-text-headline);
|
||
}
|
||
|
||
.growth-analysis-page .ga-empty-state h2 {
|
||
margin: 0;
|
||
color: var(--momo-text-primary);
|
||
font-size: var(--momo-text-title);
|
||
font-weight: var(--momo-font-weight-bold);
|
||
line-height: var(--momo-line-height-tight);
|
||
}
|
||
|
||
.growth-analysis-page .ga-empty-state p {
|
||
margin: 0;
|
||
color: var(--momo-text-secondary);
|
||
}
|
||
|
||
/* ── KPI Row ────────────────────────────────────────── */
|
||
.growth-analysis-page .ga-kpi-row {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: var(--momo-space-3, 12px);
|
||
}
|
||
@media (max-width: 992px) {
|
||
.growth-analysis-page .ga-kpi-row { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
.growth-analysis-page .ga-kpi {
|
||
position: relative;
|
||
overflow: hidden;
|
||
min-height: 132px;
|
||
padding: var(--momo-space-5, 24px);
|
||
color: var(--momo-text-primary);
|
||
background: var(--momo-bg-elevated);
|
||
border: 1px solid var(--momo-border-strong);
|
||
border-left: 4px solid var(--ga-kpi-accent, var(--momo-page-accent));
|
||
border-radius: var(--momo-radius-md, 4px);
|
||
box-shadow: var(--momo-shadow-md);
|
||
}
|
||
.growth-analysis-page .ga-kpi--revenue {
|
||
--ga-kpi-accent: var(--momo-page-accent);
|
||
}
|
||
.growth-analysis-page .ga-kpi--aov {
|
||
--ga-kpi-accent: var(--momo-warning-text);
|
||
}
|
||
.growth-analysis-page .ga-kpi--orders {
|
||
--ga-kpi-accent: var(--momo-success-text);
|
||
}
|
||
|
||
.growth-analysis-page .ga-kpi__label {
|
||
position: relative;
|
||
z-index: 1;
|
||
margin-bottom: var(--momo-space-2, 8px);
|
||
color: var(--momo-text-secondary);
|
||
font-size: var(--momo-text-body-sm);
|
||
font-weight: var(--momo-font-weight-bold);
|
||
letter-spacing: 0;
|
||
line-height: var(--momo-line-height-tight);
|
||
}
|
||
.growth-analysis-page .ga-kpi__value {
|
||
position: relative;
|
||
z-index: 1;
|
||
margin-bottom: var(--momo-space-1, 4px);
|
||
color: var(--momo-text-primary);
|
||
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;
|
||
line-height: var(--momo-line-height-tight);
|
||
}
|
||
.growth-analysis-page .ga-kpi__delta {
|
||
position: relative;
|
||
z-index: 1;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: var(--momo-space-1, 4px);
|
||
margin-top: var(--momo-space-2, 8px);
|
||
}
|
||
.growth-analysis-page .ga-kpi__chip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: var(--momo-space-1, 4px) var(--momo-space-2, 8px);
|
||
color: var(--momo-tag-honey-text);
|
||
background: var(--momo-tag-honey-bg);
|
||
border: 1px solid var(--momo-tag-honey-border);
|
||
border-radius: var(--momo-radius-sm, 2px);
|
||
font-size: var(--momo-text-label);
|
||
font-weight: var(--momo-font-weight-bold);
|
||
line-height: 1;
|
||
letter-spacing: 0;
|
||
}
|
||
.growth-analysis-page .ga-kpi__yoy {
|
||
font-family: var(--momo-font-mono);
|
||
font-feature-settings: "tnum";
|
||
font-size: var(--momo-text-body-sm);
|
||
font-weight: var(--momo-font-weight-bold);
|
||
}
|
||
.growth-analysis-page .ga-kpi__yoy.is-up { color: var(--momo-danger-text); }
|
||
.growth-analysis-page .ga-kpi__yoy.is-down { color: var(--momo-success-text); }
|
||
.growth-analysis-page .ga-kpi__hint {
|
||
position: relative;
|
||
z-index: 1;
|
||
margin-top: var(--momo-space-1, 4px);
|
||
color: var(--momo-text-secondary);
|
||
font-size: var(--momo-text-meta);
|
||
}
|
||
.growth-analysis-page .ga-kpi__icon-bg {
|
||
position: absolute;
|
||
right: var(--momo-space-6, 32px);
|
||
bottom: var(--momo-space-3, 12px);
|
||
color: var(--ga-kpi-accent);
|
||
font-size: 72px;
|
||
opacity: 0.1;
|
||
transform: rotate(-15deg);
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* ── Chart Row 變體 ─────────────────────────────────── */
|
||
.growth-analysis-page .ga-chart-row {
|
||
display: grid;
|
||
gap: var(--momo-space-3, 12px);
|
||
}
|
||
.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-bg-surface);
|
||
border: 1px solid var(--momo-border-strong);
|
||
border-radius: var(--momo-radius-md, 4px);
|
||
box-shadow: var(--momo-shadow-md);
|
||
overflow: hidden;
|
||
}
|
||
.growth-analysis-page .ga-chart-card__head {
|
||
padding: var(--momo-space-4, 16px) var(--momo-space-5, 24px);
|
||
background: var(--momo-bg-elevated);
|
||
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-2, 8px);
|
||
color: var(--momo-text-primary);
|
||
font-size: var(--momo-text-title);
|
||
font-weight: var(--momo-font-weight-bold);
|
||
line-height: var(--momo-line-height-tight);
|
||
letter-spacing: 0;
|
||
}
|
||
.growth-analysis-page .ga-chart-card__title i {
|
||
color: var(--momo-page-accent);
|
||
}
|
||
.growth-analysis-page .ga-chart-card__body {
|
||
padding: var(--momo-space-4, 16px);
|
||
height: var(--ga-chart-h, 320px);
|
||
}
|
||
.growth-analysis-page .ga-chart-card__body--lg {
|
||
height: 350px;
|
||
}
|
||
.growth-analysis-page .ga-chart-card__body--md {
|
||
height: 300px;
|
||
}
|
||
.growth-analysis-page .ga-chart-card__body canvas {
|
||
width: 100% !important;
|
||
height: 100% !important;
|
||
}
|
||
.growth-analysis-page .ga-chart-card__body.has-html-chart canvas {
|
||
display: none !important;
|
||
}
|
||
.growth-analysis-page .ga-chart-fallback {
|
||
position: absolute;
|
||
inset: var(--momo-space-4, 16px);
|
||
display: flex;
|
||
align-items: flex-end;
|
||
gap: var(--momo-space-2, 8px);
|
||
}
|
||
.growth-analysis-page .ga-chart-card__body {
|
||
position: relative;
|
||
}
|
||
.growth-analysis-page .ga-chart-fallback__bar {
|
||
flex: 1 1 0;
|
||
height: var(--bar-h);
|
||
min-height: 8px;
|
||
border: 1px solid var(--momo-page-accent-line);
|
||
border-radius: 6px 6px 2px 2px;
|
||
background: color-mix(in srgb, var(--momo-page-accent) 72%, white);
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
padding: var(--momo-space-1, 4px);
|
||
}
|
||
.growth-analysis-page .ga-chart-fallback__bar.is-negative {
|
||
background: color-mix(in srgb, var(--momo-danger-bg) 84%, white);
|
||
}
|
||
.growth-analysis-page .ga-chart-fallback__bar span,
|
||
.growth-analysis-page .ga-chart-fallback__bar strong {
|
||
font-family: var(--momo-font-mono);
|
||
font-size: var(--momo-text-caption, 12px);
|
||
letter-spacing: 0;
|
||
}
|
||
.growth-analysis-page .ga-chart-snapshot {
|
||
position: absolute;
|
||
inset: var(--momo-space-4, 16px);
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: var(--momo-space-2, 8px);
|
||
align-content: center;
|
||
}
|
||
.growth-analysis-page .ga-chart-snapshot__item {
|
||
min-width: 0;
|
||
border: 1px solid var(--momo-page-accent-line);
|
||
border-radius: var(--momo-radius-md, 6px);
|
||
background: color-mix(in srgb, var(--momo-page-accent-soft) 72%, white);
|
||
padding: var(--momo-space-2, 8px);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: var(--momo-space-2, 8px);
|
||
}
|
||
.growth-analysis-page .ga-chart-snapshot__item b,
|
||
.growth-analysis-page .ga-chart-snapshot__item strong {
|
||
min-width: 0;
|
||
font-family: var(--momo-font-mono);
|
||
font-size: var(--momo-text-caption, 12px);
|
||
letter-spacing: 0;
|
||
}
|
||
.growth-analysis-page .ga-chart-snapshot__item b {
|
||
color: var(--momo-text-secondary);
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.growth-analysis-page .ga-chart-snapshot__item strong {
|
||
color: var(--momo-text-primary);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.growth-analysis-page .ga-page-head {
|
||
align-items: flex-start;
|
||
flex-direction: column;
|
||
padding: var(--momo-space-3, 12px) var(--momo-space-4, 16px);
|
||
}
|
||
|
||
.growth-analysis-page .ga-page-head__h1 {
|
||
font-size: var(--momo-text-title);
|
||
}
|
||
|
||
.growth-analysis-page .ga-page-head__meta {
|
||
width: 100%;
|
||
text-align: left;
|
||
}
|
||
|
||
.growth-analysis-page .ga-kpi {
|
||
min-height: 112px;
|
||
padding: var(--momo-space-4, 16px);
|
||
}
|
||
|
||
.growth-analysis-page .ga-kpi__value {
|
||
font-size: var(--momo-text-headline);
|
||
}
|
||
|
||
.growth-analysis-page .ga-kpi__icon-bg {
|
||
right: var(--momo-space-5, 24px);
|
||
bottom: var(--momo-space-2, 8px);
|
||
font-size: 54px;
|
||
opacity: 0.08;
|
||
}
|
||
|
||
.growth-analysis-page .ga-chart-card__body {
|
||
height: 260px !important;
|
||
padding: var(--momo-space-3, 12px);
|
||
}
|
||
}
|