Align daily sales typography with V3 tokens
All checks were successful
CD Pipeline / deploy (push) Successful in 1m10s
All checks were successful
CD Pipeline / deploy (push) Successful in 1m10s
This commit is contained in:
OoO
@@ -10,8 +10,8 @@
|
||||
padding: 8px;
|
||||
border: 1px solid var(--momo-border-light, rgba(42, 37, 32, 0.16));
|
||||
border-radius: 8px;
|
||||
background: rgba(250, 247, 240, 0.84);
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.36);
|
||||
background: var(--momo-bg-elevated, #fdfaf2);
|
||||
box-shadow: var(--momo-shadow-md, 0 0 0 1px rgba(42, 37, 32, 0.10));
|
||||
}
|
||||
.analysis-report-tabs-spacer {
|
||||
flex: 1 1 auto;
|
||||
@@ -27,8 +27,9 @@
|
||||
border-radius: 7px;
|
||||
color: var(--momo-text-secondary, #645c52);
|
||||
text-decoration: none;
|
||||
font-size: 0.86rem;
|
||||
font-weight: 800;
|
||||
font-family: var(--momo-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
|
||||
font-size: var(--momo-text-body-sm, 13px);
|
||||
font-weight: 700;
|
||||
transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
|
||||
}
|
||||
.analysis-report-tab:hover {
|
||||
@@ -38,12 +39,12 @@
|
||||
}
|
||||
.analysis-report-tab.is-active {
|
||||
border-color: var(--momo-page-accent-dark, #a95846);
|
||||
background: linear-gradient(135deg, var(--momo-page-accent, #d96f52), var(--momo-page-accent-dark, #a95846));
|
||||
color: var(--momo-page-inverse, #fff8ee);
|
||||
background: var(--momo-page-accent, #c89043);
|
||||
color: var(--momo-page-inverse, #fff8ef);
|
||||
}
|
||||
.analysis-report-tab.is-external {
|
||||
border-color: var(--momo-border-light, rgba(42, 37, 32, 0.16));
|
||||
background: rgba(255, 252, 246, 0.62);
|
||||
background: var(--momo-bg-surface, #faf6ec);
|
||||
font-family: var(--momo-font-family-mono, "SF Mono", Menlo, Consolas, monospace);
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
@@ -15,24 +15,51 @@
|
||||
:root {
|
||||
/* ── 暖色主軸（最常用，~30+ 處 inline 引用）── */
|
||||
--momo-warm-caramel: var(--momo-page-accent); /* 焦糖橘主色 */
|
||||
--momo-warm-rust: var(--momo-tag-rust); /* 鐵鏽紅 */
|
||||
--momo-warm-mahogany: var(--momo-tag-clay); /* 桃花心木 */
|
||||
--momo-warm-honey: var(--momo-tag-honey); /* 蜂蜜黃 */
|
||||
--momo-warm-earth: var(--momo-tag-olive); /* 大地綠 */
|
||||
--momo-warm-sand: var(--momo-tag-sand); /* 沙色 */
|
||||
--momo-warm-rust: var(--momo-danger-text); /* 鐵鏽紅 */
|
||||
--momo-warm-mahogany: var(--momo-tag-clay-text); /* 桃花心木 */
|
||||
--momo-warm-honey: var(--momo-warning-text); /* 蜂蜜黃 */
|
||||
--momo-warm-earth: var(--momo-tag-olive-text); /* 大地綠 */
|
||||
--momo-warm-sand: var(--momo-tag-muted-text); /* 沙色 */
|
||||
|
||||
/* ── 舊頁直接引用的單色 tag 名稱 ── */
|
||||
--momo-tag-rust: var(--momo-tag-rust-text);
|
||||
--momo-tag-olive: var(--momo-tag-olive-text);
|
||||
--momo-tag-honey: var(--momo-tag-honey-text);
|
||||
--momo-tag-clay: var(--momo-tag-clay-text);
|
||||
--momo-tag-mahogany: var(--momo-danger-text);
|
||||
--momo-tag-sand: var(--momo-tag-muted-text);
|
||||
|
||||
/* ── 背景與紙張 ── */
|
||||
--momo-bg-canvas: var(--momo-canvas);
|
||||
--momo-bg-paper: var(--momo-paper);
|
||||
--momo-canvas: var(--momo-bg-body);
|
||||
--momo-paper: var(--momo-bg-surface);
|
||||
--momo-surface: var(--momo-bg-surface);
|
||||
--momo-surface-raised: var(--momo-bg-elevated);
|
||||
--momo-surface-sunken: var(--momo-bg-subtle);
|
||||
--momo-surface-0: var(--momo-bg-surface);
|
||||
--momo-surface-1: var(--momo-bg-paper);
|
||||
--momo-surface-2: var(--momo-bg-elevated);
|
||||
--momo-page-bg: var(--momo-bg-body);
|
||||
--momo-bg-canvas: var(--momo-bg-body);
|
||||
--momo-bg-paper: var(--momo-bg-surface);
|
||||
--momo-bg-soft: var(--momo-page-accent-soft);
|
||||
|
||||
/* ── 文字色 ── */
|
||||
--momo-text-strong: var(--momo-text-primary);
|
||||
--momo-text-primary: var(--momo-ink);
|
||||
--momo-text-secondary: var(--momo-ink-soft);
|
||||
--momo-text-muted: var(--momo-ink-mute);
|
||||
--momo-text-muted: var(--momo-text-secondary);
|
||||
--momo-text-faint: var(--momo-text-tertiary);
|
||||
--momo-ink-mute: var(--momo-text-tertiary);
|
||||
|
||||
/* ── 線條與陰影 ── */
|
||||
--momo-border: var(--momo-rule);
|
||||
--momo-shadow-soft: var(--momo-shadow-card);
|
||||
--momo-shadow-deep: var(--momo-shadow-elev);
|
||||
--momo-rule: var(--momo-border-light);
|
||||
--momo-border-subtle: var(--momo-border-light);
|
||||
--momo-border: var(--momo-border-light);
|
||||
--momo-shadow-card: var(--momo-shadow-md);
|
||||
--momo-shadow-elev: var(--momo-shadow-lg);
|
||||
--momo-shadow-soft: var(--momo-shadow-md);
|
||||
--momo-shadow-deep: var(--momo-shadow-lg);
|
||||
|
||||
/* ── 互動文字 ── */
|
||||
--momo-on-accent: var(--momo-page-inverse);
|
||||
}
|
||||
|
||||
@@ -8,6 +8,10 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
color: var(--momo-text-primary);
|
||||
font-family: var(--momo-font-family);
|
||||
font-size: var(--momo-text-body);
|
||||
line-height: var(--momo-line-height-base);
|
||||
}
|
||||
|
||||
/* ---------- Hero ---------- */
|
||||
@@ -19,7 +23,7 @@
|
||||
padding: 14px 16px;
|
||||
border: 1px solid var(--momo-border-strong);
|
||||
border-radius: 8px;
|
||||
background: var(--momo-surface-raised);
|
||||
background: var(--momo-bg-elevated);
|
||||
}
|
||||
|
||||
.daily-hero__title {
|
||||
@@ -27,10 +31,11 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-family: var(--momo-font-display);
|
||||
font-size: 1.55rem;
|
||||
font-family: var(--momo-font-family);
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
color: var(--momo-text-strong);
|
||||
color: var(--momo-page-ink, var(--momo-text-primary));
|
||||
line-height: var(--momo-line-height-tight);
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
@@ -40,16 +45,16 @@
|
||||
|
||||
.daily-hero__subtitle {
|
||||
margin: 4px 0 0;
|
||||
color: var(--momo-text-muted);
|
||||
font-size: 0.86rem;
|
||||
color: var(--momo-text-secondary);
|
||||
font-size: var(--momo-text-body);
|
||||
}
|
||||
|
||||
.daily-hero__subtitle code {
|
||||
padding: 2px 6px;
|
||||
background: color-mix(in srgb, var(--momo-page-accent) 12%, transparent);
|
||||
background: var(--momo-page-accent-soft);
|
||||
border-radius: 4px;
|
||||
color: var(--momo-tag-mahogany);
|
||||
font-size: 0.85em;
|
||||
color: var(--momo-page-accent-dark);
|
||||
font-size: var(--momo-text-meta);
|
||||
}
|
||||
|
||||
.daily-hero__controls {
|
||||
@@ -61,16 +66,16 @@
|
||||
}
|
||||
|
||||
.daily-hero__label {
|
||||
font-size: 0.78rem;
|
||||
color: var(--momo-text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
font-size: var(--momo-text-label);
|
||||
color: var(--momo-text-secondary);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.daily-hero__controls .form-select {
|
||||
border: 1px solid var(--momo-border-strong);
|
||||
background: var(--momo-surface);
|
||||
color: var(--momo-text-strong);
|
||||
background: var(--momo-bg-surface);
|
||||
color: var(--momo-text-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -91,8 +96,8 @@
|
||||
|
||||
/* ---------- Empty / Error ---------- */
|
||||
.empty-state {
|
||||
background: color-mix(in srgb, var(--momo-tag-honey) 14%, var(--momo-surface));
|
||||
border: 1px solid color-mix(in srgb, var(--momo-tag-honey) 40%, var(--momo-border-strong));
|
||||
background: var(--momo-warning-bg);
|
||||
border: 1px solid var(--momo-warning-border);
|
||||
border-radius: 8px;
|
||||
padding: 2.4rem 2rem;
|
||||
text-align: center;
|
||||
@@ -100,29 +105,29 @@
|
||||
|
||||
.empty-state__icon {
|
||||
font-size: 2.4rem;
|
||||
color: var(--momo-tag-honey);
|
||||
color: var(--momo-warning-text);
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.empty-state__title {
|
||||
color: var(--momo-text-strong);
|
||||
color: var(--momo-text-primary);
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.empty-state__hint {
|
||||
color: var(--momo-text-muted);
|
||||
color: var(--momo-text-secondary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.empty-state a {
|
||||
color: var(--momo-tag-mahogany);
|
||||
color: var(--momo-danger-text);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* ---------- Calendar ---------- */
|
||||
.daily-calendar {
|
||||
background: var(--momo-surface-raised);
|
||||
background: var(--momo-bg-elevated);
|
||||
border: 1px solid var(--momo-border-strong);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
@@ -136,7 +141,7 @@
|
||||
gap: 12px;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid var(--momo-border-subtle);
|
||||
border-bottom: 1px solid var(--momo-border-light);
|
||||
}
|
||||
|
||||
.daily-calendar__title {
|
||||
@@ -144,10 +149,10 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
font-family: var(--momo-font-display);
|
||||
font-size: 1rem;
|
||||
font-family: var(--momo-font-family);
|
||||
font-size: var(--momo-text-title);
|
||||
font-weight: 700;
|
||||
color: var(--momo-text-strong);
|
||||
color: var(--momo-page-ink, var(--momo-text-primary));
|
||||
cursor: pointer;
|
||||
transition: color 180ms ease;
|
||||
}
|
||||
@@ -169,8 +174,8 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
background: var(--momo-surface);
|
||||
color: var(--momo-text-strong);
|
||||
background: var(--momo-bg-surface);
|
||||
color: var(--momo-text-primary);
|
||||
border: 1px solid var(--momo-border-strong);
|
||||
border-radius: 6px;
|
||||
padding: 6px 10px;
|
||||
@@ -181,7 +186,7 @@
|
||||
}
|
||||
|
||||
.btn-month:hover {
|
||||
background: color-mix(in srgb, var(--momo-page-accent) 10%, var(--momo-surface));
|
||||
background: var(--momo-page-accent-soft);
|
||||
border-color: var(--momo-page-accent);
|
||||
color: var(--momo-page-accent-dark);
|
||||
}
|
||||
@@ -190,21 +195,21 @@
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 0;
|
||||
border-top: 1px solid var(--momo-border-subtle);
|
||||
border-left: 1px solid var(--momo-border-subtle);
|
||||
border-top: 1px solid var(--momo-border-light);
|
||||
border-left: 1px solid var(--momo-border-light);
|
||||
}
|
||||
|
||||
.daily-calendar__weekday {
|
||||
text-align: center;
|
||||
font-size: 0.72rem;
|
||||
font-size: var(--momo-text-label);
|
||||
font-weight: 700;
|
||||
color: var(--momo-text-muted);
|
||||
color: var(--momo-text-secondary);
|
||||
padding: 8px 6px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0;
|
||||
background: var(--momo-surface);
|
||||
border-right: 1px solid var(--momo-border-subtle);
|
||||
border-bottom: 1px solid var(--momo-border-subtle);
|
||||
background: var(--momo-bg-surface);
|
||||
border-right: 1px solid var(--momo-border-light);
|
||||
border-bottom: 1px solid var(--momo-border-light);
|
||||
}
|
||||
|
||||
/* ---- 行事曆方格 ---- */
|
||||
@@ -213,24 +218,24 @@
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr) auto auto;
|
||||
gap: 5px;
|
||||
background: var(--momo-surface);
|
||||
background: var(--momo-bg-surface);
|
||||
border: 0;
|
||||
border-right: 1px solid var(--momo-border-subtle);
|
||||
border-bottom: 1px solid var(--momo-border-subtle);
|
||||
border-right: 1px solid var(--momo-border-light);
|
||||
border-bottom: 1px solid var(--momo-border-light);
|
||||
border-radius: 0;
|
||||
padding: 10px;
|
||||
min-height: 132px;
|
||||
min-height: 124px;
|
||||
cursor: default;
|
||||
transition: background 160ms ease, box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.cal-day.has-data {
|
||||
cursor: pointer;
|
||||
background: var(--momo-surface-raised);
|
||||
background: var(--momo-bg-elevated);
|
||||
}
|
||||
|
||||
.cal-day.has-data:hover {
|
||||
background: color-mix(in srgb, var(--momo-page-accent) 7%, var(--momo-surface-raised));
|
||||
background: color-mix(in srgb, var(--momo-page-accent) 7%, var(--momo-bg-elevated));
|
||||
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--momo-page-accent) 45%, transparent);
|
||||
}
|
||||
|
||||
@@ -240,21 +245,21 @@
|
||||
}
|
||||
|
||||
.cal-day.is-weekend:not(.has-data) {
|
||||
background: color-mix(in srgb, var(--momo-text-strong) 4%, var(--momo-surface));
|
||||
background: color-mix(in srgb, var(--momo-text-primary) 4%, var(--momo-bg-surface));
|
||||
}
|
||||
|
||||
.cal-day.is-holiday {
|
||||
border-color: color-mix(in srgb, var(--momo-tag-rust) 35%, var(--momo-border-strong));
|
||||
background: color-mix(in srgb, var(--momo-tag-rust) 8%, var(--momo-surface));
|
||||
border-color: var(--momo-tag-rust-border);
|
||||
background: var(--momo-tag-rust-bg);
|
||||
}
|
||||
|
||||
.cal-day.is-holiday .cal-day__num {
|
||||
color: var(--momo-tag-rust);
|
||||
color: var(--momo-tag-rust-text);
|
||||
}
|
||||
|
||||
.cal-day.is-selected {
|
||||
border-color: var(--momo-border-subtle) !important;
|
||||
background: color-mix(in srgb, var(--momo-page-accent) 12%, var(--momo-surface)) !important;
|
||||
border-color: var(--momo-border-light) !important;
|
||||
background: color-mix(in srgb, var(--momo-page-accent) 12%, var(--momo-bg-surface)) !important;
|
||||
box-shadow: inset 0 0 0 2px var(--momo-page-accent) !important;
|
||||
}
|
||||
|
||||
@@ -266,9 +271,9 @@
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: var(--momo-page-accent);
|
||||
border: 1px solid var(--momo-surface);
|
||||
border: 1px solid var(--momo-bg-surface);
|
||||
border-radius: 6px;
|
||||
color: var(--momo-surface);
|
||||
color: var(--momo-bg-surface);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 0.7rem;
|
||||
@@ -289,15 +294,15 @@
|
||||
.cal-day__num {
|
||||
font-size: 1.08rem;
|
||||
font-weight: 800;
|
||||
color: var(--momo-text-strong);
|
||||
color: var(--momo-text-primary);
|
||||
font-family: var(--momo-font-display);
|
||||
}
|
||||
|
||||
.cal-day__holiday {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
color: var(--momo-tag-rust);
|
||||
background: color-mix(in srgb, var(--momo-tag-rust) 14%, transparent);
|
||||
color: var(--momo-tag-rust-text);
|
||||
background: var(--momo-tag-rust-bg);
|
||||
padding: 1px 5px;
|
||||
border-radius: 3px;
|
||||
white-space: nowrap;
|
||||
@@ -312,7 +317,7 @@
|
||||
border-radius: 6px;
|
||||
font-size: 0.66rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
letter-spacing: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
@@ -320,18 +325,21 @@
|
||||
}
|
||||
|
||||
.cal-day.dod-up .cal-day__badge {
|
||||
background: var(--momo-tag-rust);
|
||||
color: var(--momo-surface);
|
||||
background: var(--momo-tag-rust-bg);
|
||||
color: var(--momo-tag-rust-text);
|
||||
border: 1px solid var(--momo-tag-rust-border);
|
||||
}
|
||||
|
||||
.cal-day.dod-down .cal-day__badge {
|
||||
background: var(--momo-tag-olive);
|
||||
color: var(--momo-surface);
|
||||
background: var(--momo-tag-olive-bg);
|
||||
color: var(--momo-tag-olive-text);
|
||||
border: 1px solid var(--momo-tag-olive-border);
|
||||
}
|
||||
|
||||
.cal-day.dod-flat .cal-day__badge {
|
||||
background: color-mix(in srgb, var(--momo-text-muted) 30%, var(--momo-surface));
|
||||
color: var(--momo-text-strong);
|
||||
background: var(--momo-tag-muted-bg);
|
||||
color: var(--momo-tag-muted-text);
|
||||
border: 1px solid var(--momo-tag-muted-border);
|
||||
}
|
||||
|
||||
.cal-day__metric {
|
||||
@@ -342,15 +350,15 @@
|
||||
}
|
||||
|
||||
.cal-day__metric-label {
|
||||
color: var(--momo-text-muted);
|
||||
font-size: 0.64rem;
|
||||
color: var(--momo-text-secondary);
|
||||
font-size: var(--momo-text-label);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.cal-day__metric strong {
|
||||
color: var(--momo-text-strong);
|
||||
color: var(--momo-text-primary);
|
||||
font-family: var(--momo-font-mono, ui-monospace, monospace);
|
||||
font-size: 0.92rem;
|
||||
font-size: var(--momo-text-body-sm);
|
||||
font-weight: 800;
|
||||
line-height: 1.15;
|
||||
}
|
||||
@@ -360,7 +368,7 @@
|
||||
align-items: baseline;
|
||||
gap: 5px;
|
||||
padding-top: 4px;
|
||||
border-top: 1px dashed var(--momo-border-subtle);
|
||||
border-top: 1px dashed var(--momo-border-light);
|
||||
}
|
||||
|
||||
.cal-day__metric--sub strong,
|
||||
@@ -369,7 +377,7 @@
|
||||
}
|
||||
|
||||
.cal-day__metric--sub span:last-child {
|
||||
color: var(--momo-text-muted);
|
||||
color: var(--momo-text-secondary);
|
||||
font-family: var(--momo-font-mono, ui-monospace, monospace);
|
||||
}
|
||||
|
||||
@@ -384,9 +392,9 @@
|
||||
max-width: 100%;
|
||||
padding: 2px 5px;
|
||||
overflow: hidden;
|
||||
color: var(--momo-text-muted);
|
||||
background: color-mix(in srgb, var(--momo-text-strong) 4%, var(--momo-surface));
|
||||
border: 1px solid var(--momo-border-subtle);
|
||||
color: var(--momo-text-secondary);
|
||||
background: var(--momo-bg-paper);
|
||||
border: 1px solid var(--momo-border-light);
|
||||
border-radius: 4px;
|
||||
font-family: var(--momo-font-mono, ui-monospace, monospace);
|
||||
font-size: 0.64rem;
|
||||
@@ -401,9 +409,9 @@
|
||||
|
||||
.daily-mobile-day,
|
||||
.daily-mobile-empty {
|
||||
color: var(--momo-text-strong);
|
||||
background: var(--momo-surface);
|
||||
border: 1px solid var(--momo-border-subtle);
|
||||
color: var(--momo-text-primary);
|
||||
background: var(--momo-bg-surface);
|
||||
border: 1px solid var(--momo-border-light);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
@@ -416,9 +424,9 @@
|
||||
}
|
||||
|
||||
.daily-mobile-day:hover {
|
||||
color: var(--momo-text-strong);
|
||||
color: var(--momo-text-primary);
|
||||
border-color: var(--momo-page-accent);
|
||||
background: color-mix(in srgb, var(--momo-page-accent) 6%, var(--momo-surface));
|
||||
background: color-mix(in srgb, var(--momo-page-accent) 6%, var(--momo-bg-surface));
|
||||
}
|
||||
|
||||
.daily-mobile-day.is-selected {
|
||||
@@ -434,7 +442,7 @@
|
||||
}
|
||||
|
||||
.daily-mobile-day__date strong {
|
||||
color: var(--momo-text-strong);
|
||||
color: var(--momo-text-primary);
|
||||
font-family: var(--momo-font-display);
|
||||
font-size: 1.25rem;
|
||||
font-weight: 800;
|
||||
@@ -443,7 +451,7 @@
|
||||
|
||||
.daily-mobile-day__date span {
|
||||
overflow: hidden;
|
||||
color: var(--momo-text-muted);
|
||||
color: var(--momo-text-secondary);
|
||||
font-size: 0.76rem;
|
||||
font-weight: 700;
|
||||
text-overflow: ellipsis;
|
||||
@@ -463,19 +471,21 @@
|
||||
}
|
||||
|
||||
.daily-mobile-day__trend.dod-up {
|
||||
color: var(--momo-surface);
|
||||
background: var(--momo-tag-rust);
|
||||
color: var(--momo-tag-rust-text);
|
||||
background: var(--momo-tag-rust-bg);
|
||||
border: 1px solid var(--momo-tag-rust-border);
|
||||
}
|
||||
|
||||
.daily-mobile-day__trend.dod-down {
|
||||
color: var(--momo-surface);
|
||||
background: var(--momo-tag-olive);
|
||||
color: var(--momo-tag-olive-text);
|
||||
background: var(--momo-tag-olive-bg);
|
||||
border: 1px solid var(--momo-tag-olive-border);
|
||||
}
|
||||
|
||||
.daily-mobile-day__trend.dod-flat {
|
||||
color: var(--momo-text-strong);
|
||||
background: color-mix(in srgb, var(--momo-text-muted) 24%, var(--momo-surface));
|
||||
border: 1px solid var(--momo-border-subtle);
|
||||
color: var(--momo-tag-muted-text);
|
||||
background: var(--momo-tag-muted-bg);
|
||||
border: 1px solid var(--momo-tag-muted-border);
|
||||
}
|
||||
|
||||
.daily-mobile-day__metric {
|
||||
@@ -487,7 +497,7 @@
|
||||
|
||||
.daily-mobile-day__metric span,
|
||||
.daily-mobile-day__metric em {
|
||||
color: var(--momo-text-muted);
|
||||
color: var(--momo-text-secondary);
|
||||
font-size: 0.68rem;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
@@ -495,7 +505,7 @@
|
||||
|
||||
.daily-mobile-day__metric strong {
|
||||
overflow: hidden;
|
||||
color: var(--momo-text-strong);
|
||||
color: var(--momo-text-primary);
|
||||
font-family: var(--momo-font-mono, ui-monospace, monospace);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 800;
|
||||
@@ -514,9 +524,9 @@
|
||||
max-width: 100%;
|
||||
padding: 3px 6px;
|
||||
overflow: hidden;
|
||||
color: var(--momo-text-muted);
|
||||
background: color-mix(in srgb, var(--momo-text-strong) 4%, var(--momo-surface));
|
||||
border: 1px solid var(--momo-border-subtle);
|
||||
color: var(--momo-text-secondary);
|
||||
background: var(--momo-bg-paper);
|
||||
border: 1px solid var(--momo-border-light);
|
||||
border-radius: 4px;
|
||||
font-family: var(--momo-font-mono, ui-monospace, monospace);
|
||||
font-size: 0.66rem;
|
||||
@@ -527,8 +537,8 @@
|
||||
|
||||
.daily-mobile-empty {
|
||||
padding: 14px;
|
||||
color: var(--momo-text-muted);
|
||||
font-size: 0.82rem;
|
||||
color: var(--momo-text-secondary);
|
||||
font-size: var(--momo-text-body-sm);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -562,8 +572,8 @@
|
||||
margin-top: 0.4rem;
|
||||
padding: 0.4rem;
|
||||
font-size: 0.7rem;
|
||||
color: var(--momo-text-muted);
|
||||
background: color-mix(in srgb, var(--momo-text-strong) 5%, var(--momo-surface));
|
||||
color: var(--momo-text-secondary);
|
||||
background: color-mix(in srgb, var(--momo-text-primary) 5%, var(--momo-bg-surface));
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
@@ -603,36 +613,37 @@
|
||||
gap: 0.35rem;
|
||||
padding: 0.3rem 0.7rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.78rem;
|
||||
font-size: var(--momo-text-body-sm);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.badge-mode--month {
|
||||
background: var(--momo-page-accent);
|
||||
color: var(--momo-surface);
|
||||
color: var(--momo-page-inverse);
|
||||
}
|
||||
|
||||
.badge-mode--single {
|
||||
background: var(--momo-tag-honey);
|
||||
color: var(--momo-surface);
|
||||
background: var(--momo-warning-bg);
|
||||
color: var(--momo-warning-text);
|
||||
border: 1px solid var(--momo-warning-border);
|
||||
}
|
||||
|
||||
.badge-mode--ghost {
|
||||
background: color-mix(in srgb, var(--momo-text-strong) 8%, var(--momo-surface));
|
||||
color: var(--momo-text-strong);
|
||||
background: var(--momo-bg-paper);
|
||||
color: var(--momo-text-primary);
|
||||
border: 1px solid var(--momo-border-strong);
|
||||
}
|
||||
|
||||
.daily-mode-banner__hint {
|
||||
color: var(--momo-text-muted);
|
||||
font-size: 0.85rem;
|
||||
color: var(--momo-text-secondary);
|
||||
font-size: var(--momo-text-body-sm);
|
||||
}
|
||||
|
||||
.daily-mode-banner__link {
|
||||
color: var(--momo-tag-mahogany);
|
||||
color: var(--momo-page-accent-dark);
|
||||
font-weight: 700;
|
||||
font-size: 0.85rem;
|
||||
font-size: var(--momo-text-body-sm);
|
||||
text-decoration: none;
|
||||
border-bottom: 1px dashed currentColor;
|
||||
}
|
||||
@@ -657,18 +668,18 @@
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
background: var(--momo-surface);
|
||||
background: var(--momo-bg-surface);
|
||||
border: 1px solid var(--momo-border-strong);
|
||||
box-shadow: var(--momo-shadow-soft);
|
||||
transition: transform 200ms ease, box-shadow 200ms ease;
|
||||
box-shadow: var(--momo-shadow-md);
|
||||
transition: background 160ms ease, border-color 160ms ease;
|
||||
height: 100%;
|
||||
/* 左側 4px accent 條 */
|
||||
border-left-width: 4px;
|
||||
}
|
||||
|
||||
.kpi-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 24px color-mix(in srgb, var(--momo-text-strong) 12%, transparent);
|
||||
border-color: var(--momo-page-accent-line);
|
||||
background: var(--momo-bg-elevated);
|
||||
}
|
||||
|
||||
.kpi-card__body {
|
||||
@@ -678,20 +689,19 @@
|
||||
}
|
||||
|
||||
.kpi-card__label {
|
||||
font-size: 0.78rem;
|
||||
font-size: var(--momo-text-label);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--momo-text-muted);
|
||||
letter-spacing: 0;
|
||||
color: var(--momo-text-secondary);
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.kpi-card__value {
|
||||
font-family: var(--momo-font-mono, ui-monospace, monospace);
|
||||
font-size: 1.38rem;
|
||||
font-size: var(--momo-text-headline);
|
||||
font-weight: 800;
|
||||
letter-spacing: 0;
|
||||
color: var(--momo-text-strong);
|
||||
color: var(--momo-page-ink, var(--momo-text-primary));
|
||||
line-height: 1.1;
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
@@ -706,7 +716,7 @@
|
||||
position: absolute;
|
||||
right: -12px;
|
||||
bottom: -12px;
|
||||
font-size: 5rem;
|
||||
font-size: 4.6rem;
|
||||
color: currentColor;
|
||||
opacity: 0.08;
|
||||
transform: rotate(-12deg);
|
||||
@@ -716,17 +726,17 @@
|
||||
/* variants：每張卡片用對應 token 著色，左 border + label + icon 同色 */
|
||||
.kpi--revenue { border-left-color: var(--momo-page-accent); color: var(--momo-page-accent); }
|
||||
.kpi--cost { border-left-color: var(--momo-tag-honey); color: var(--momo-tag-honey); }
|
||||
.kpi--profit { border-left-color: var(--momo-tag-olive); color: var(--momo-tag-olive); }
|
||||
.kpi--sku { border-left-color: var(--momo-tag-sand); color: var(--momo-tag-sand); }
|
||||
.kpi--aov { border-left-color: var(--momo-tag-mahogany);color: var(--momo-tag-mahogany); }
|
||||
.kpi--qty { border-left-color: var(--momo-tag-clay); color: var(--momo-tag-clay); }
|
||||
.kpi--profit { border-left-color: var(--momo-tag-olive-text); color: var(--momo-tag-olive-text); }
|
||||
.kpi--sku { border-left-color: var(--momo-tag-muted-text); color: var(--momo-tag-muted-text); }
|
||||
.kpi--aov { border-left-color: var(--momo-danger-text); color: var(--momo-danger-text); }
|
||||
.kpi--qty { border-left-color: var(--momo-tag-clay-text); color: var(--momo-tag-clay-text); }
|
||||
|
||||
.kpi-card .kpi-card__label,
|
||||
.kpi-card .kpi-card__value {
|
||||
color: inherit;
|
||||
}
|
||||
.kpi-card__label { color: var(--momo-text-muted); }
|
||||
.kpi-card__value { color: var(--momo-text-strong); }
|
||||
.kpi-card__label { color: var(--momo-text-secondary); }
|
||||
.kpi-card__value { color: var(--momo-page-ink, var(--momo-text-primary)); }
|
||||
|
||||
/* DoD/WoW pill */
|
||||
.kpi-delta {
|
||||
@@ -735,31 +745,31 @@
|
||||
gap: 0.3rem;
|
||||
padding: 0.25rem 0.55rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.75rem;
|
||||
font-size: var(--momo-text-meta);
|
||||
font-weight: 700;
|
||||
font-family: var(--momo-font-mono, ui-monospace, monospace);
|
||||
background: color-mix(in srgb, var(--momo-text-strong) 5%, var(--momo-surface));
|
||||
border: 1px solid var(--momo-border-subtle);
|
||||
background: var(--momo-bg-paper);
|
||||
border: 1px solid var(--momo-border-light);
|
||||
}
|
||||
|
||||
.kpi-delta__label {
|
||||
font-family: var(--momo-font-display);
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--momo-text-muted);
|
||||
font-size: var(--momo-text-label-tiny);
|
||||
letter-spacing: 0;
|
||||
color: var(--momo-text-secondary);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.kpi-delta.is-up {
|
||||
color: var(--momo-tag-rust);
|
||||
border-color: color-mix(in srgb, var(--momo-tag-rust) 30%, var(--momo-border-subtle));
|
||||
background: color-mix(in srgb, var(--momo-tag-rust) 8%, var(--momo-surface));
|
||||
color: var(--momo-tag-rust-text);
|
||||
border-color: var(--momo-tag-rust-border);
|
||||
background: var(--momo-tag-rust-bg);
|
||||
}
|
||||
|
||||
.kpi-delta.is-down {
|
||||
color: var(--momo-tag-olive);
|
||||
border-color: color-mix(in srgb, var(--momo-tag-olive) 30%, var(--momo-border-subtle));
|
||||
background: color-mix(in srgb, var(--momo-tag-olive) 8%, var(--momo-surface));
|
||||
color: var(--momo-tag-olive-text);
|
||||
border-color: var(--momo-tag-olive-border);
|
||||
background: var(--momo-tag-olive-bg);
|
||||
}
|
||||
|
||||
.kpi-tag {
|
||||
@@ -767,32 +777,32 @@
|
||||
align-items: center;
|
||||
padding: 0.2rem 0.55rem;
|
||||
border-radius: 5px;
|
||||
font-size: 0.72rem;
|
||||
font-size: var(--momo-text-meta);
|
||||
font-weight: 700;
|
||||
background: color-mix(in srgb, var(--momo-text-strong) 6%, var(--momo-surface));
|
||||
color: var(--momo-text-strong);
|
||||
border: 1px solid var(--momo-border-subtle);
|
||||
background: var(--momo-bg-paper);
|
||||
color: var(--momo-text-primary);
|
||||
border: 1px solid var(--momo-border-light);
|
||||
}
|
||||
|
||||
.kpi-tag--ghost {
|
||||
background: transparent;
|
||||
color: var(--momo-text-muted);
|
||||
color: var(--momo-text-secondary);
|
||||
}
|
||||
|
||||
/* ---------- Chart cards ---------- */
|
||||
.chart-card {
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--momo-border-strong);
|
||||
background: var(--momo-surface);
|
||||
box-shadow: var(--momo-shadow-soft);
|
||||
background: var(--momo-bg-surface);
|
||||
box-shadow: var(--momo-shadow-md);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.chart-card .card-header {
|
||||
background: color-mix(in srgb, var(--momo-page-accent) 6%, var(--momo-surface));
|
||||
border-bottom: 1px solid var(--momo-border-subtle);
|
||||
background: color-mix(in srgb, var(--momo-page-accent) 6%, var(--momo-bg-surface));
|
||||
border-bottom: 1px solid var(--momo-border-light);
|
||||
font-weight: 700;
|
||||
color: var(--momo-text-strong);
|
||||
color: var(--momo-text-primary);
|
||||
padding: 0.85rem 1.2rem;
|
||||
font-size: 0.98rem;
|
||||
border-radius: 8px 8px 0 0;
|
||||
@@ -810,9 +820,9 @@
|
||||
}
|
||||
|
||||
.btn-export {
|
||||
background: var(--momo-tag-olive);
|
||||
color: var(--momo-surface);
|
||||
border: 1px solid color-mix(in srgb, var(--momo-tag-olive) 80%, var(--momo-text-strong));
|
||||
background: var(--momo-success-bg);
|
||||
color: var(--momo-success-text);
|
||||
border: 1px solid var(--momo-success-border);
|
||||
border-radius: 6px;
|
||||
padding: 0.35rem 0.85rem;
|
||||
font-weight: 600;
|
||||
@@ -823,8 +833,8 @@
|
||||
}
|
||||
|
||||
.btn-export:hover {
|
||||
background: color-mix(in srgb, var(--momo-tag-olive) 90%, var(--momo-text-strong));
|
||||
color: var(--momo-surface);
|
||||
background: color-mix(in srgb, var(--momo-success) 14%, var(--momo-bg-surface));
|
||||
color: var(--momo-success-text);
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
@@ -842,9 +852,9 @@
|
||||
#top10ChartContainer { min-width: 400px; }
|
||||
|
||||
.chart-mobile-hint {
|
||||
background: color-mix(in srgb, var(--momo-page-accent) 10%, var(--momo-surface));
|
||||
border: 1px solid color-mix(in srgb, var(--momo-page-accent) 25%, var(--momo-border-subtle));
|
||||
color: var(--momo-tag-mahogany);
|
||||
background: var(--momo-page-accent-soft);
|
||||
border: 1px solid var(--momo-page-accent-line);
|
||||
color: var(--momo-page-accent-dark);
|
||||
padding: 0.4rem 0.7rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.8rem;
|
||||
@@ -854,19 +864,19 @@
|
||||
.chart-empty {
|
||||
text-align: center;
|
||||
padding: 3rem 1rem;
|
||||
color: var(--momo-text-muted);
|
||||
color: var(--momo-text-secondary);
|
||||
}
|
||||
|
||||
.chart-empty i {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 0.6rem;
|
||||
display: block;
|
||||
color: color-mix(in srgb, var(--momo-text-muted) 60%, transparent);
|
||||
color: color-mix(in srgb, var(--momo-text-secondary) 60%, transparent);
|
||||
}
|
||||
|
||||
.marketing-subhead {
|
||||
font-weight: 700;
|
||||
color: var(--momo-text-strong);
|
||||
color: var(--momo-text-primary);
|
||||
margin-bottom: 0.8rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
@@ -883,7 +893,7 @@
|
||||
}
|
||||
|
||||
#categoryTable thead {
|
||||
background: color-mix(in srgb, var(--momo-page-accent) 14%, var(--momo-surface));
|
||||
background: color-mix(in srgb, var(--momo-page-accent) 10%, var(--momo-bg-surface));
|
||||
}
|
||||
|
||||
#categoryTable thead th {
|
||||
@@ -891,9 +901,9 @@
|
||||
padding: 0.85rem 0.9rem;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.08em;
|
||||
letter-spacing: 0;
|
||||
text-transform: uppercase;
|
||||
color: var(--momo-text-strong);
|
||||
color: var(--momo-text-primary);
|
||||
border-bottom: 2px solid var(--momo-page-accent);
|
||||
}
|
||||
|
||||
@@ -902,14 +912,14 @@
|
||||
}
|
||||
|
||||
#categoryTable tbody tr:hover {
|
||||
background: color-mix(in srgb, var(--momo-page-accent) 6%, var(--momo-surface));
|
||||
background: color-mix(in srgb, var(--momo-page-accent) 6%, var(--momo-bg-surface));
|
||||
}
|
||||
|
||||
#categoryTable tbody td {
|
||||
padding: 0.7rem 0.9rem;
|
||||
vertical-align: middle;
|
||||
color: var(--momo-text-strong);
|
||||
border-bottom: 1px solid var(--momo-border-subtle);
|
||||
color: var(--momo-text-primary);
|
||||
border-bottom: 1px solid var(--momo-border-light);
|
||||
}
|
||||
|
||||
#categoryTable td.num {
|
||||
|
||||
Reference in New Issue
Block a user