101 lines
3.8 KiB
CSS
101 lines
3.8 KiB
CSS
/* ════════════════════════════════════════════════════════
|
|
* page-ai-recommend.css — Turn A
|
|
* ai_recommend.html 原 inline <style> 全部 token 化
|
|
* scope: .ai-recommend-page
|
|
* page-group: ai (honey 主色)
|
|
* ════════════════════════════════════════════════════════ */
|
|
|
|
.ai-recommend-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--momo-space-3, 18px);
|
|
}
|
|
|
|
/* ── Hero header ────────────────────────────────────── */
|
|
.ai-recommend-page .ai-recommend-hero {
|
|
padding: var(--momo-space-4, 20px);
|
|
border: 1px solid var(--momo-border-strong);
|
|
border-radius: var(--momo-radius-md, 8px);
|
|
background: var(--momo-surface-raised);
|
|
box-shadow: var(--momo-shadow-soft);
|
|
}
|
|
|
|
.ai-recommend-page .ai-recommend-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--momo-space-1, 10px);
|
|
margin: 0;
|
|
color: var(--momo-text-strong);
|
|
font-family: var(--momo-font-display);
|
|
font-size: clamp(1.35rem, 2vw, 2rem);
|
|
font-weight: 800;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.ai-recommend-page .ai-recommend-title i {
|
|
color: var(--momo-warm-caramel) !important;
|
|
}
|
|
|
|
/* ── Card 基底 ──────────────────────────────────────── */
|
|
.ai-recommend-page .card {
|
|
border: 1px solid var(--momo-border-subtle) !important;
|
|
border-radius: var(--momo-radius-md, 8px);
|
|
background: var(--momo-surface-1, rgba(250, 246, 238, 0.84));
|
|
box-shadow: var(--momo-shadow-soft);
|
|
}
|
|
|
|
.ai-recommend-page .card-header {
|
|
border-color: var(--momo-border-subtle) !important;
|
|
background: var(--momo-surface-2, rgba(250, 247, 240, 0.88)) !important;
|
|
color: var(--momo-text-strong) !important;
|
|
}
|
|
|
|
.ai-recommend-page .card-header h6,
|
|
.ai-recommend-page .card-header span {
|
|
color: var(--momo-text-strong);
|
|
font-family: var(--momo-font-display);
|
|
font-weight: 800;
|
|
}
|
|
|
|
/* ── Form controls ──────────────────────────────────── */
|
|
.ai-recommend-page .form-control,
|
|
.ai-recommend-page .form-select,
|
|
.ai-recommend-page .input-group-text {
|
|
border-color: var(--momo-border-subtle);
|
|
border-radius: var(--momo-radius-md, 8px);
|
|
}
|
|
|
|
/* ── Buttons ────────────────────────────────────────── */
|
|
.ai-recommend-page .btn-primary {
|
|
background: var(--momo-text-strong);
|
|
border-color: var(--momo-text-strong);
|
|
font-weight: 800;
|
|
}
|
|
|
|
.ai-recommend-page .btn-outline-primary {
|
|
color: var(--momo-accent-strong);
|
|
border-color: var(--momo-warm-ink-faint, rgba(42, 37, 32, 0.24));
|
|
}
|
|
|
|
/* ── Badges ─────────────────────────────────────────── */
|
|
.ai-recommend-page .badge {
|
|
border-radius: 999px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
/* ── BG 覆寫 ────────────────────────────────────────── */
|
|
.ai-recommend-page .bg-light {
|
|
background-color: var(--momo-surface-2-soft, rgba(250, 247, 240, 0.76)) !important;
|
|
}
|
|
|
|
.ai-recommend-page .alert-info {
|
|
border-color: var(--momo-info-border, rgba(83, 135, 154, 0.2));
|
|
background: var(--momo-info-bg, rgba(238, 248, 251, 0.82));
|
|
}
|
|
|
|
/* ── Tab pills ──────────────────────────────────────── */
|
|
.ai-recommend-page #marketInfoTabs .nav-link.active {
|
|
background: var(--momo-text-strong) !important;
|
|
color: var(--momo-on-accent, #fff8ef) !important;
|
|
}
|