/** * DM9 — Bootstrap Modal semantic theme * Modal ถูก mount ที่ (นอก .dm-standard-page) — scope ด้วย body .modal * หัวแบบแบรนด์ = --dm-modal-header-* ; หัวอ่อน = .dm-modal-header-soft * คง .modal-header.bg-* (Bootstrap utility) ไม่ทับ */ body .modal-backdrop { --bs-backdrop-bg: var(--dm-modal-backdrop-bg, rgba(15, 23, 42, 0.45)); } body .modal .modal-content { background-color: var(--dm-modal-bg, var(--dm-card-bg, #ffffff)); color: var(--dm-modal-body-text, var(--dm-text-main, #212529)); border: 1px solid var(--dm-modal-border, var(--dm-border, #dee2e6)); border-radius: var(--dm-modal-radius, 12px); box-shadow: var(--dm-modal-shadow, 0 8px 32px rgba(0, 0, 0, 0.15)); overflow: hidden; } body .modal .modal-header.dm-modal-header-soft:not([class*="bg-"]) { background-color: var(--dm-modal-header-bg-soft, var(--dm-card-head-bg, #f8f9fa)); color: var(--dm-modal-header-text-soft, var(--dm-text-main, #212529)); border-bottom: 1px solid var(--dm-modal-header-border-soft, var(--dm-border, #dee2e6)); --dm-modal-close-filter: none; } /* Home — สร้างโพสต์ (Facebook style): หัวอ่อน + เนื้อหาใช้ dm-modal-* */ body .modal.create-post-modal-fb .modal-header:not([class*="bg-"]) { background-color: var(--dm-modal-header-bg-soft, var(--dm-bg-soft, #f8f9fa)); color: var(--dm-modal-header-text-soft, var(--dm-text-main, #212529)); border-bottom: 1px solid var(--dm-modal-header-border-soft, var(--dm-border, #dee2e6)); --dm-modal-close-filter: none; } body .modal.create-post-modal-fb .modal-content { background-color: var(--dm-modal-bg, var(--dm-card-bg, #ffffff)); color: var(--dm-modal-body-text, var(--dm-text-main, #212529)); border-color: var(--dm-modal-border, var(--dm-border, #dee2e6)); } body .modal.create-post-modal-fb .modal-body { background-color: var(--dm-modal-body-bg, var(--dm-modal-bg, #ffffff)); color: var(--dm-modal-body-text, var(--dm-text-main, #212529)); } body .modal.create-post-modal-fb .modal-footer { background-color: var(--dm-modal-footer-bg, var(--dm-card-footer, #f8f9fa)); color: var(--dm-modal-footer-text, var(--dm-text-main, #212529)); border-top: 1px solid var(--dm-modal-footer-border, var(--dm-border, #dee2e6)); } body .modal .modal-header:not([class*="bg-"]) { background-color: var(--dm-modal-header-bg, var(--dm-table-head-bg, #34495e)); color: var(--dm-modal-header-text, var(--dm-table-head-text, #ffffff)); border-bottom: 1px solid var(--dm-modal-header-border, var(--dm-table-head-border, transparent)); } body .modal .modal-header.dm-modal-header-soft:not([class*="bg-"]) { background-color: var(--dm-modal-header-bg-soft, var(--dm-card-head-bg, #f8f9fa)); color: var(--dm-modal-header-text-soft, var(--dm-text-main, #212529)); border-bottom: 1px solid var(--dm-modal-header-border-soft, var(--dm-border, #dee2e6)); --dm-modal-close-filter: none; } body .modal .modal-title { color: inherit; font-weight: 600; line-height: 1.35; } body .modal .modal-header .btn-close { filter: var(--dm-modal-close-filter, none); opacity: 0.88; } body .modal .modal-header .btn-close:hover, body .modal .modal-header .btn-close:focus { opacity: 1; } body .modal .modal-body { background-color: var(--dm-modal-body-bg, var(--dm-modal-bg, #ffffff)); color: var(--dm-modal-body-text, var(--dm-text-main, #212529)); } body .modal .modal-body .text-muted, body .modal .modal-body .form-text { color: var(--dm-modal-body-muted, var(--dm-text-muted, #6c757d)) !important; } /* ฟอร์มใน modal (นอก .dm-standard-page — ไม่ได้รับกฎ form จาก custom.css) */ body .modal .modal-body label, body .modal .modal-body .form-label, body .modal .modal-body .col-form-label, body .modal .modal-body legend { color: var(--dm-modal-body-text, var(--dm-text-main, #212529)); } body .modal .modal-body .form-control, body .modal .modal-body .form-select, body .modal .modal-body textarea.form-control, body .modal .modal-body input[type="text"], body .modal .modal-body input[type="email"], body .modal .modal-body input[type="password"], body .modal .modal-body input[type="number"], body .modal .modal-body input[type="search"], body .modal .modal-body input[type="tel"], body .modal .modal-body input[type="url"], body .modal .modal-body input[type="date"], body .modal .modal-body input[type="time"], body .modal .modal-body input[type="datetime-local"] { background-color: var(--dm-input-bg, var(--dm-bg-surface, #ffffff)); color: var(--dm-input-text, var(--dm-text-main, #212529)); border-color: var(--dm-input-border, var(--dm-border, #dee2e6)); } body .modal .modal-body .form-control:focus, body .modal .modal-body .form-select:focus { background-color: var(--dm-input-bg, var(--dm-bg-surface, #ffffff)); color: var(--dm-input-text, var(--dm-text-main, #212529)); border-color: var(--dm-input-focus-border, var(--dm-primary, #34495e)); box-shadow: 0 0 0 0.2rem var(--dm-input-focus-ring, color-mix(in srgb, var(--dm-primary, #34495e) 14%, transparent)); } body .modal .modal-body .form-control::placeholder { color: var(--dm-input-placeholder, var(--dm-text-muted, #6c757d)); opacity: 1; } body .modal .modal-body .form-check-label, body .modal .modal-body .form-check-input:checked ~ .form-check-label { color: var(--dm-modal-body-text, var(--dm-text-main, #212529)); } body .modal .modal-body .input-group-text { background-color: var(--dm-input-bg, var(--dm-bg-soft, #f8f9fa)); color: var(--dm-input-text, var(--dm-text-main, #212529)); border-color: var(--dm-input-border, var(--dm-border, #dee2e6)); } body .modal .modal-body .form-select option { color: var(--dm-input-text, var(--dm-text-main, #212529)); background-color: var(--dm-input-bg, var(--dm-bg-surface, #ffffff)); } body .modal .modal-footer { background-color: var(--dm-modal-footer-bg, var(--dm-card-footer, #f8f9fa)); color: var(--dm-modal-footer-text, var(--dm-text-main, #212529)); border-top: 1px solid var(--dm-modal-footer-border, var(--dm-border, #dee2e6)); } body .modal .modal-footer > * { margin: 0; }