/* EwoooC base Bootstrap overrides extracted from templates/ewoooc_base.html. */ /* ═══════════════════════════════════════════════════ * Bootstrap override — 限定在 .momo-app 內 * ═══════════════════════════════════════════════════ */ /* 主 accent 統一替換為群組色 */ .momo-app .btn-primary { background: var(--momo-page-accent); border-color: var(--momo-page-accent); color: var(--momo-page-inverse); box-shadow: none; } .momo-app .btn-primary:hover, .momo-app .btn-primary:focus { background: var(--momo-page-accent-dark); border-color: var(--momo-page-accent-dark); color: var(--momo-page-inverse); } .momo-app .btn-outline-primary { color: var(--momo-page-accent-dark); border-color: var(--momo-page-accent-line); background: transparent; } .momo-app .btn-outline-primary:hover { color: var(--momo-page-inverse); background: var(--momo-page-accent); border-color: var(--momo-page-accent); } .momo-app .text-primary { color: var(--momo-page-accent-dark) !important; } .momo-app .bg-primary { background: var(--momo-page-accent) !important; color: var(--momo-page-inverse) !important; } .momo-app .border-primary { border-color: var(--momo-page-accent-line) !important; } /* Card 統一風格 — 平面化 */ .momo-app .card { background: var(--momo-bg-surface); border: 1px solid var(--momo-border-light); border-radius: var(--momo-radius-md); box-shadow: none; } .momo-app .card-header { background: transparent; border-bottom: 1px solid var(--momo-border-light); padding: var(--momo-space-3) var(--momo-space-4); font-family: var(--momo-font-display); font-weight: 700; color: var(--momo-text-primary); } .momo-app .card-body { padding: var(--momo-space-4); } /* Page header — 移除原本黑色/橘色漸層 hero */ .momo-app .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--momo-space-4); padding: var(--momo-space-4) 0 var(--momo-space-5); border-bottom: 1px solid var(--momo-border-light); margin-bottom: var(--momo-space-5); background: transparent; } .momo-app .page-header h1, .momo-app .page-header h2, .momo-app .page-header h3 { margin: 0; color: var(--momo-text-primary); font-family: var(--momo-font-display); font-size: var(--momo-text-headline); font-weight: 700; letter-spacing: 0; line-height: 1.2; } .momo-app .page-header p, .momo-app .page-header small, .momo-app .page-header .text-muted { color: var(--momo-text-secondary); } /* Bootstrap badges → 暖色 tag */ .momo-app .badge.bg-primary { background: var(--momo-tag-caramel-bg) !important; color: var(--momo-tag-caramel-text) !important; border: 1px solid var(--momo-tag-caramel-border); font-weight: 600; } .momo-app .badge.bg-warning, .momo-app .text-bg-warning { background: var(--momo-tag-honey-bg) !important; color: var(--momo-tag-honey-text) !important; border: 1px solid var(--momo-tag-honey-border); } .momo-app .badge.bg-danger, .momo-app .text-bg-danger { background: var(--momo-tag-rust-bg) !important; color: var(--momo-tag-rust-text) !important; border: 1px solid var(--momo-tag-rust-border); } .momo-app .badge.bg-success, .momo-app .text-bg-success { background: var(--momo-tag-success-bg) !important; color: var(--momo-tag-success-text) !important; border: 1px solid var(--momo-tag-success-border); } .momo-app .badge.bg-info, .momo-app .text-bg-info { background: var(--momo-tag-olive-bg) !important; color: var(--momo-tag-olive-text) !important; border: 1px solid var(--momo-tag-olive-border); } .momo-app .badge.bg-dark, .momo-app .badge.bg-secondary { background: var(--momo-tag-ink-bg) !important; color: var(--momo-tag-ink-text) !important; border: 1px solid var(--momo-tag-ink-border); } .momo-app .badge { font-family: var(--momo-font-mono); font-weight: 600; font-size: var(--momo-text-label); letter-spacing: 0.02em; padding: 3px 8px; border-radius: var(--momo-radius-sm); } /* Table — 平面化 */ .momo-app .table { color: var(--momo-text-primary); margin-bottom: 0; } .momo-app .table > :not(caption) > * > * { background: transparent; border-bottom-color: var(--momo-border-light); padding: var(--momo-space-3) var(--momo-space-3); } .momo-app .table thead th { background: var(--momo-bg-paper) !important; color: var(--momo-text-secondary) !important; border-bottom: 1px solid var(--momo-border-light); font-family: var(--momo-font-display); font-size: var(--momo-text-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .momo-app .table tbody tr:hover { background: var(--momo-page-accent-soft); } /* Form */ .momo-app .form-control, .momo-app .form-select { background: var(--momo-bg-elevated); border: 1px solid var(--momo-border-light); border-radius: var(--momo-radius-md); color: var(--momo-text-primary); font-size: var(--momo-text-body-sm); box-shadow: none; } .momo-app .form-control:focus, .momo-app .form-select:focus { border-color: var(--momo-page-accent-line); box-shadow: var(--momo-shadow-focus); } /* Progress bar */ .momo-app .progress { background: var(--momo-bg-subtle); border-radius: var(--momo-radius-pill); height: 6px; box-shadow: none; } .momo-app .progress-bar { background: var(--momo-page-accent); } /* Filter section — 移除原本 gradient header */ .momo-app .filter-section { padding: var(--momo-space-4); background: var(--momo-bg-paper); border: 1px solid var(--momo-border-light); border-radius: var(--momo-radius-md); color: var(--momo-text-primary); } .momo-app .filter-section h3, .momo-app .filter-section h4, .momo-app .filter-section h5 { color: var(--momo-text-primary); font-family: var(--momo-font-display); font-weight: 700; } .momo-app .filter-section .form-label { color: var(--momo-text-secondary); font-family: var(--momo-font-display); font-size: var(--momo-text-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } /* Nav pills / tabs */ .momo-app .nav-pills .nav-link.active, .momo-app .nav-tabs .nav-link.active { background: var(--momo-page-accent); color: var(--momo-page-inverse); border-color: var(--momo-page-accent); } .momo-app .nav-pills .nav-link, .momo-app .nav-tabs .nav-link { color: var(--momo-text-secondary); font-weight: 500; } /* Pagination */ .momo-app .page-item.active .page-link { background: var(--momo-page-accent); border-color: var(--momo-page-accent); color: var(--momo-page-inverse); } .momo-app .page-link { color: var(--momo-text-secondary); background: var(--momo-bg-elevated); border-color: var(--momo-border-light); } /* Dropdown */ .momo-app .dropdown-menu { background: var(--momo-bg-elevated); border: 1px solid var(--momo-border-light); border-radius: var(--momo-radius-md); box-shadow: var(--momo-shadow-modal); } .momo-app .dropdown-item.active, .momo-app .dropdown-item:active { background: var(--momo-page-accent); color: var(--momo-page-inverse); } .momo-app .dropdown-item:hover { background: var(--momo-page-accent-soft); color: var(--momo-page-accent-dark); } /* Modal */ .momo-app .modal-content { background: var(--momo-bg-elevated); border: 1px solid var(--momo-border-light); border-radius: var(--momo-radius-xl); box-shadow: var(--momo-shadow-modal); } .momo-app .modal-header { border-bottom-color: var(--momo-border-light); } .momo-app .modal-footer { border-top-color: var(--momo-border-light); } /* Alert — 去飽和 */ .momo-app .alert { border-radius: var(--momo-radius-md); border-width: 1px; font-size: var(--momo-text-body-sm); } .momo-app .alert-warning { background: var(--momo-warning-bg); border-color: var(--momo-warning-border); color: var(--momo-warning-text); } .momo-app .alert-danger { background: var(--momo-danger-bg); border-color: var(--momo-danger-border); color: var(--momo-danger-text); } .momo-app .alert-success { background: var(--momo-success-bg); border-color: var(--momo-success-border); color: var(--momo-success-text); } .momo-app .alert-info { background: var(--momo-info-bg); border-color: var(--momo-info-border); color: var(--momo-info-text); }