559 lines
14 KiB
CSS
559 lines
14 KiB
CSS
/* ============================================================
|
||
page-edm.css — Turn A：Token-ize inline styles
|
||
範圍: /edm 與 /festival 共用模板
|
||
group: ops · accent: --momo-warm-mahogany
|
||
============================================================ */
|
||
|
||
/* ---------- Page scope ---------- */
|
||
.edm-page {
|
||
background: var(--momo-surface-1);
|
||
color: var(--momo-ink-primary);
|
||
padding-bottom: var(--momo-space-12);
|
||
}
|
||
|
||
/* ---------- Sub-nav tabs (動態頁籤切換) ---------- */
|
||
.edm-page .sub-nav-tabs {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--momo-space-2);
|
||
margin-bottom: var(--momo-space-4);
|
||
}
|
||
|
||
.edm-page .sub-nav-tabs .btn {
|
||
border-radius: var(--momo-radius-pill);
|
||
padding: var(--momo-space-2) var(--momo-space-4);
|
||
font-weight: var(--momo-font-medium);
|
||
font-size: var(--momo-text-sm);
|
||
transition: all 0.18s ease;
|
||
}
|
||
|
||
.edm-page .sub-nav-tabs .btn-primary {
|
||
background: var(--momo-warm-mahogany);
|
||
border-color: var(--momo-warm-mahogany);
|
||
color: var(--momo-on-accent, #fff8ef);
|
||
box-shadow: var(--momo-shadow-soft);
|
||
}
|
||
|
||
.edm-page .sub-nav-tabs .btn-outline-secondary {
|
||
border-color: var(--momo-border-strong);
|
||
color: var(--momo-ink-secondary);
|
||
background: var(--momo-surface-0);
|
||
}
|
||
|
||
.edm-page .sub-nav-tabs .btn-outline-secondary:hover {
|
||
background: var(--momo-surface-2);
|
||
color: var(--momo-ink-primary);
|
||
border-color: var(--momo-warm-mahogany);
|
||
}
|
||
|
||
/* ---------- Slot pills (時段頁籤) ---------- */
|
||
.edm-page .nav-pills {
|
||
gap: var(--momo-space-2);
|
||
border-bottom: 1px solid var(--momo-border);
|
||
padding-bottom: var(--momo-space-3);
|
||
margin-bottom: var(--momo-space-4);
|
||
}
|
||
|
||
.edm-page .nav-pills .nav-link {
|
||
color: var(--momo-ink-secondary);
|
||
font-weight: var(--momo-font-medium);
|
||
font-size: var(--momo-text-sm);
|
||
padding: var(--momo-space-2) var(--momo-space-4);
|
||
border-radius: var(--momo-radius-pill);
|
||
background: var(--momo-surface-0);
|
||
border: 1px solid var(--momo-border);
|
||
transition: all 0.18s ease;
|
||
}
|
||
|
||
.edm-page .nav-pills .nav-link:hover {
|
||
background: var(--momo-surface-2);
|
||
color: var(--momo-warm-mahogany);
|
||
border-color: var(--momo-warm-mahogany-soft);
|
||
}
|
||
|
||
.edm-page .nav-pills .nav-link.active {
|
||
background: var(--momo-warm-mahogany);
|
||
border-color: var(--momo-warm-mahogany);
|
||
color: var(--momo-on-accent, #fff8ef);
|
||
box-shadow: var(--momo-shadow-soft);
|
||
}
|
||
|
||
.edm-page .nav-pills .nav-link .badge {
|
||
background: rgba(255, 248, 239, 0.92) !important;
|
||
color: var(--momo-warm-mahogany) !important;
|
||
border: 1px solid transparent;
|
||
margin-left: var(--momo-space-2);
|
||
font-weight: var(--momo-font-semibold);
|
||
}
|
||
|
||
.edm-page .nav-pills .nav-link:not(.active) .badge {
|
||
background: var(--momo-surface-2) !important;
|
||
color: var(--momo-ink-primary) !important;
|
||
border-color: var(--momo-border) !important;
|
||
}
|
||
|
||
/* ---------- Table container ---------- */
|
||
.edm-page .table-container {
|
||
background: var(--momo-surface-0);
|
||
border-radius: var(--momo-radius-md);
|
||
box-shadow: var(--momo-shadow-soft);
|
||
border: 1px solid var(--momo-border-light);
|
||
padding: var(--momo-space-5);
|
||
margin-bottom: var(--momo-space-5);
|
||
}
|
||
|
||
/* ---------- Stats badges row ---------- */
|
||
.edm-page .table-container .badge.bg-primary {
|
||
background: var(--momo-warm-mahogany) !important;
|
||
}
|
||
|
||
.edm-page .table-container .badge.bg-danger {
|
||
background: var(--momo-warm-honey) !important;
|
||
color: var(--momo-on-accent, #fff8ef) !important;
|
||
}
|
||
|
||
.edm-page .table-container .badge.bg-success {
|
||
background: var(--momo-warm-olive) !important;
|
||
}
|
||
|
||
.edm-page .table-container .badge.bg-secondary {
|
||
background: var(--momo-ink-tertiary) !important;
|
||
}
|
||
|
||
/* ---------- Status soft badges ---------- */
|
||
.edm-page .bg-success-soft {
|
||
background-color: var(--momo-warm-olive-soft) !important;
|
||
}
|
||
|
||
.edm-page .bg-secondary-soft {
|
||
background-color: var(--momo-surface-2) !important;
|
||
}
|
||
|
||
.edm-page .bg-danger-soft {
|
||
background-color: var(--momo-warm-honey-soft) !important;
|
||
}
|
||
|
||
/* ---------- Table ---------- */
|
||
.edm-page .table {
|
||
margin-bottom: 0;
|
||
font-size: var(--momo-text-sm);
|
||
}
|
||
|
||
.edm-page .table > :not(caption) > * > * {
|
||
padding: var(--momo-space-3) var(--momo-space-3);
|
||
}
|
||
|
||
.edm-page .table thead th {
|
||
background: var(--momo-surface-2);
|
||
color: var(--momo-ink-secondary);
|
||
font-weight: var(--momo-font-semibold);
|
||
font-size: var(--momo-text-xs);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
border-bottom: 1px solid var(--momo-border);
|
||
}
|
||
|
||
.edm-page .table thead th a {
|
||
color: var(--momo-ink-secondary);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.edm-page .table thead th a:hover {
|
||
color: var(--momo-warm-mahogany);
|
||
}
|
||
|
||
.edm-page .table tbody tr {
|
||
border-bottom: 1px solid var(--momo-border-light);
|
||
transition: background 0.12s ease;
|
||
}
|
||
|
||
.edm-page .table tbody tr:hover {
|
||
background: var(--momo-surface-1);
|
||
}
|
||
|
||
.edm-page .table tbody tr:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
/* ---------- Product cell ---------- */
|
||
.edm-page .product-thumb {
|
||
width: 60px;
|
||
height: 60px;
|
||
object-fit: cover;
|
||
border-radius: var(--momo-radius-sm);
|
||
border: 1px solid var(--momo-border-light);
|
||
margin-right: var(--momo-space-3);
|
||
background: var(--momo-surface-2);
|
||
}
|
||
|
||
.edm-page .product-thumb.placeholder {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--momo-ink-tertiary);
|
||
font-size: var(--momo-text-xs);
|
||
}
|
||
|
||
.edm-page .product-link {
|
||
text-decoration: none;
|
||
color: var(--momo-ink-primary);
|
||
font-weight: var(--momo-font-semibold);
|
||
font-size: var(--momo-text-sm);
|
||
display: block;
|
||
line-height: 1.4;
|
||
margin-bottom: var(--momo-space-1);
|
||
}
|
||
|
||
.edm-page .product-link:hover {
|
||
color: var(--momo-warm-mahogany);
|
||
}
|
||
|
||
/* ---------- Price ---------- */
|
||
.edm-page .price-current {
|
||
font-family: var(--momo-font-mono);
|
||
font-weight: var(--momo-font-bold);
|
||
font-size: var(--momo-text-base);
|
||
color: var(--momo-ink-primary);
|
||
}
|
||
|
||
.edm-page .price-current.text-success { color: var(--momo-warm-olive) !important; }
|
||
.edm-page .price-current.text-danger { color: var(--momo-warm-honey-deep) !important; }
|
||
|
||
.edm-page .price-old {
|
||
text-decoration: line-through;
|
||
color: var(--momo-ink-tertiary);
|
||
font-size: var(--momo-text-xs);
|
||
margin-right: var(--momo-space-1);
|
||
font-family: var(--momo-font-mono);
|
||
}
|
||
|
||
.edm-page .price-up { color: var(--momo-warm-honey-deep); font-weight: var(--momo-font-bold); }
|
||
.edm-page .price-down { color: var(--momo-warm-olive); font-weight: var(--momo-font-bold); }
|
||
|
||
/* ---------- Status badges (NEW/降價/漲價/下架/折扣) ---------- */
|
||
.edm-page .badge-status {
|
||
font-size: var(--momo-text-xs);
|
||
vertical-align: middle;
|
||
margin-left: var(--momo-space-1);
|
||
padding: 0.22em 0.55em;
|
||
border-radius: var(--momo-radius-pill);
|
||
font-weight: var(--momo-font-semibold);
|
||
}
|
||
|
||
.edm-page .badge.bg-warning.text-dark {
|
||
background: var(--momo-warm-honey-soft) !important;
|
||
color: var(--momo-warm-honey-deep) !important;
|
||
border-color: var(--momo-warm-honey) !important;
|
||
}
|
||
|
||
.edm-page .badge.bg-light.text-dark,
|
||
.edm-page .badge.bg-light.text-muted {
|
||
background: var(--momo-surface-2) !important;
|
||
color: var(--momo-ink-secondary) !important;
|
||
border: 1px solid var(--momo-border) !important;
|
||
}
|
||
|
||
/* ---------- I-code copy chip ---------- */
|
||
.edm-page small.cursor-pointer {
|
||
font-size: var(--momo-text-xs);
|
||
color: var(--momo-ink-tertiary);
|
||
font-weight: var(--momo-font-medium);
|
||
font-family: var(--momo-font-mono);
|
||
cursor: pointer;
|
||
transition: color 0.12s ease;
|
||
}
|
||
|
||
.edm-page small.cursor-pointer:hover {
|
||
color: var(--momo-warm-mahogany);
|
||
}
|
||
|
||
.edm-page small.cursor-pointer.text-success {
|
||
color: var(--momo-warm-olive) !important;
|
||
}
|
||
|
||
/* ---------- Header buttons ---------- */
|
||
.edm-page .btn-outline-primary {
|
||
border-color: var(--momo-warm-mahogany-soft);
|
||
color: var(--momo-warm-mahogany);
|
||
background: var(--momo-surface-0);
|
||
font-weight: var(--momo-font-medium);
|
||
}
|
||
|
||
.edm-page .btn-outline-primary:hover {
|
||
background: var(--momo-warm-mahogany);
|
||
border-color: var(--momo-warm-mahogany);
|
||
color: var(--momo-on-accent, #fff8ef);
|
||
}
|
||
|
||
.edm-page .btn-outline-success {
|
||
border-color: var(--momo-warm-olive-soft);
|
||
color: var(--momo-warm-olive);
|
||
background: var(--momo-surface-0);
|
||
font-weight: var(--momo-font-medium);
|
||
}
|
||
|
||
.edm-page .btn-outline-success:hover {
|
||
background: var(--momo-warm-olive);
|
||
border-color: var(--momo-warm-olive);
|
||
color: var(--momo-on-accent, #fff8ef);
|
||
}
|
||
|
||
/* ---------- Alert ---------- */
|
||
.edm-page .alert.alert-info {
|
||
background: var(--momo-warm-caramel-soft);
|
||
border: 1px solid var(--momo-warm-caramel);
|
||
color: var(--momo-ink-primary);
|
||
border-radius: var(--momo-radius-sm);
|
||
padding: var(--momo-space-2) var(--momo-space-3);
|
||
font-size: var(--momo-text-xs);
|
||
}
|
||
|
||
.edm-page .alert.alert-info .badge.bg-success {
|
||
background: var(--momo-warm-olive) !important;
|
||
}
|
||
|
||
.edm-page .alert.alert-info .badge.bg-danger {
|
||
background: var(--momo-warm-honey-deep) !important;
|
||
}
|
||
|
||
/* ---------- Page header ---------- */
|
||
.edm-page .page-head {
|
||
margin-bottom: var(--momo-space-5);
|
||
}
|
||
|
||
.edm-page .page-head h2 {
|
||
font-family: var(--momo-font-heading);
|
||
font-weight: var(--momo-font-bold);
|
||
font-size: var(--momo-text-2xl);
|
||
color: var(--momo-ink-primary);
|
||
margin-bottom: var(--momo-space-2);
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.edm-page .page-head .text-muted {
|
||
color: var(--momo-ink-tertiary) !important;
|
||
font-size: var(--momo-text-sm);
|
||
}
|
||
|
||
/* ---------- Section title (商品列表 N 筆) ---------- */
|
||
.edm-page .table-container h5 {
|
||
font-family: var(--momo-font-heading);
|
||
font-weight: var(--momo-font-semibold);
|
||
font-size: var(--momo-text-lg);
|
||
color: var(--momo-ink-primary);
|
||
margin: 0;
|
||
}
|
||
|
||
/* ============================================================
|
||
Activity theme overrides — 共用 edm 模板的活動主題色
|
||
用法：<body class="edm-page" data-promo="mothers_day">
|
||
============================================================ */
|
||
|
||
/* ── Mothers Day · 母親節暖桃橘 ── */
|
||
.edm-page[data-promo="mothers_day"] {
|
||
--edm-theme: var(--momo-warm-honey);
|
||
--edm-theme-soft: rgba(212, 158, 96, 0.14);
|
||
}
|
||
|
||
/* ── Valentine 520 · 玫瑰粉紅 ── */
|
||
.edm-page[data-promo="valentine_520"] {
|
||
--edm-theme: #c47b8a;
|
||
--edm-theme-soft: rgba(196, 123, 138, 0.14);
|
||
}
|
||
|
||
/* ── Labor Day · 沉穩棕 ── */
|
||
.edm-page[data-promo="labor_day"] {
|
||
--edm-theme: var(--momo-warm-rust);
|
||
--edm-theme-soft: rgba(166, 82, 56, 0.14);
|
||
}
|
||
|
||
/* ── Apply theme color to page accents ── */
|
||
.edm-page[data-promo="mothers_day"] .sub-nav-tabs .btn-primary,
|
||
.edm-page[data-promo="valentine_520"] .sub-nav-tabs .btn-primary,
|
||
.edm-page[data-promo="labor_day"] .sub-nav-tabs .btn-primary {
|
||
background: var(--edm-theme);
|
||
border-color: var(--edm-theme);
|
||
}
|
||
|
||
.edm-page[data-promo="mothers_day"] .edm-head__icon,
|
||
.edm-page[data-promo="valentine_520"] .edm-head__icon,
|
||
.edm-page[data-promo="labor_day"] .edm-head__icon {
|
||
background: var(--edm-theme);
|
||
}
|
||
|
||
.edm-page[data-promo="mothers_day"] .edm-promonav__pill.is-active,
|
||
.edm-page[data-promo="valentine_520"] .edm-promonav__pill.is-active,
|
||
.edm-page[data-promo="labor_day"] .edm-promonav__pill.is-active {
|
||
background: var(--edm-theme);
|
||
border-color: var(--edm-theme);
|
||
color: var(--momo-on-accent, #fff8ef);
|
||
}
|
||
|
||
.edm-page[data-promo="mothers_day"] .edm-chip--new,
|
||
.edm-page[data-promo="valentine_520"] .edm-chip--new,
|
||
.edm-page[data-promo="labor_day"] .edm-chip--new {
|
||
background: var(--edm-theme-soft);
|
||
color: var(--edm-theme);
|
||
border-color: var(--edm-theme);
|
||
}
|
||
|
||
.edm-page[data-promo="mothers_day"] .nav-pills .nav-link.active,
|
||
.edm-page[data-promo="valentine_520"] .nav-pills .nav-link.active,
|
||
.edm-page[data-promo="labor_day"] .nav-pills .nav-link.active {
|
||
background: var(--edm-theme);
|
||
border-color: var(--edm-theme);
|
||
}
|
||
|
||
/* ============================================================
|
||
Campaign v2 responsive containment
|
||
edm_dashboard_v2.html still owns the component styling inline;
|
||
these overrides keep wide tabs/tables inside local scroll containers.
|
||
============================================================ */
|
||
|
||
.edm-page.campaign-stack,
|
||
.edm-page.campaign-stack > section,
|
||
.edm-page .campaign-hero-grid,
|
||
.edm-page .tab-content,
|
||
.edm-page .tab-pane,
|
||
.edm-page .campaign-table-card,
|
||
.edm-page .campaign-table-wrap {
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.edm-page .campaign-switcher {
|
||
display: flex;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
overflow-x: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
.edm-page .campaign-tab {
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.edm-page .campaign-slot-tabs {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||
width: 100%;
|
||
max-width: 100%;
|
||
gap: 8px;
|
||
overflow: visible;
|
||
}
|
||
|
||
.edm-page .campaign-slot-tab {
|
||
display: flex;
|
||
width: 100%;
|
||
min-width: 0;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.edm-page .campaign-slot-tab > .momo-mono:first-child {
|
||
min-width: 0;
|
||
overflow-wrap: anywhere;
|
||
white-space: normal;
|
||
line-height: 1.18;
|
||
}
|
||
|
||
.edm-page .campaign-slot-count {
|
||
flex: 0 0 auto;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.edm-page .campaign-hero,
|
||
.edm-page .campaign-kpi-panel,
|
||
.edm-page .campaign-hero-content,
|
||
.edm-page .campaign-eyebrow,
|
||
.edm-page .campaign-meta-grid,
|
||
.edm-page .campaign-actions {
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.edm-page .campaign-table-wrap {
|
||
width: 100%;
|
||
overflow-x: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
.edm-page .campaign-table {
|
||
width: 100%;
|
||
}
|
||
|
||
.edm-page .campaign-product-cell > div {
|
||
min-width: 0;
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.edm-page.campaign-stack {
|
||
gap: 14px;
|
||
}
|
||
|
||
.edm-page .campaign-switcher {
|
||
scrollbar-width: thin;
|
||
}
|
||
|
||
.edm-page .campaign-hero {
|
||
min-height: auto;
|
||
padding: 22px 18px;
|
||
}
|
||
|
||
.edm-page .campaign-hero-content {
|
||
min-height: auto;
|
||
}
|
||
|
||
.edm-page .campaign-title {
|
||
font-size: 28px;
|
||
line-height: 1.16;
|
||
}
|
||
|
||
.edm-page .campaign-meta-grid,
|
||
.edm-page .campaign-actions,
|
||
.edm-page .campaign-table-head,
|
||
.edm-page .campaign-stat-badges {
|
||
width: 100%;
|
||
}
|
||
|
||
.edm-page .campaign-filterbar {
|
||
display: flex;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
overflow-x: auto;
|
||
flex-wrap: nowrap;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
.edm-page .campaign-filter-chip {
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.edm-page .campaign-slot-tabs {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
|
||
.edm-page .campaign-slot-tab {
|
||
min-height: 42px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.edm-page .campaign-table-wrap::before {
|
||
content: '左右滑動查看完整商品列表';
|
||
position: sticky;
|
||
left: 0;
|
||
display: block;
|
||
width: fit-content;
|
||
max-width: calc(100vw - 28px);
|
||
margin: 0 0 8px;
|
||
padding: 6px 9px;
|
||
color: var(--momo-text-secondary);
|
||
background: var(--momo-bg-paper);
|
||
border: 1px solid var(--momo-border-light);
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
}
|
||
}
|