/* * ui.modal.css — chat.Ravenbreath.com * Ported from All.net modal system. Uses [data-theme] on * instead of --chat-* CSS vars from the internal portal. */ /* ── CSS variable bridge (dark default) ───────────────────────────────────── */ :root { --modal-z: 1000; --modal-radius: 10px; --modal-radius-sm: 6px; --modal-spacing: 0.75rem; --modal-spacing-sm: 0.5rem; --modal-spacing-xs: 0.25rem; --modal-font-sm: 0.85rem; } [data-theme="dark"] { --modal-bg: #1e1e1e; --modal-bg-accent: #2a2a2a; --modal-bg-header: #242424; --modal-text: #ddd; --modal-text-muted: #888; --modal-border: rgba(255,255,255,0.10); --modal-border-dark: rgba(255,255,255,0.06); --modal-color-info: rgba(100,160,255,0.55); --modal-color-warning: rgba(255,168,50,0.55); --modal-color-danger: rgba(220,80,80,0.55); --modal-color-success: rgba(80,190,100,0.55); } [data-theme="light"] { --modal-bg: #f0f0f0; --modal-bg-accent: #e0e0e0; --modal-bg-header: #e8e8e8; --modal-text: #1e1e1e; --modal-text-muted: #666; --modal-border: rgba(0,0,0,0.10); --modal-border-dark: rgba(0,0,0,0.06); --modal-color-info: rgba(50,100,220,0.40); --modal-color-warning: rgba(200,130,0,0.40); --modal-color-danger: rgba(180,40,40,0.40); --modal-color-success: rgba(40,160,60,0.40); } /* ── Backdrop ─────────────────────────────────────────────────────────────── */ .modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); z-index: var(--modal-z); } .modal-backdrop.is-open { display: block; } /* ── Container ────────────────────────────────────────────────────────────── */ .modal-container { display: none; position: fixed; inset: 0; z-index: calc(var(--modal-z) + 1); padding: var(--modal-spacing); align-items: center; justify-content: center; } .modal-container.is-open { display: flex; } /* ── Content box ──────────────────────────────────────────────────────────── */ .modal-content { width: min(75%, 96vw); max-height: min(80%, 88vh); display: flex; flex-direction: column; background: var(--modal-bg); color: var(--modal-text); border: 1px solid var(--modal-border); border-radius: var(--modal-radius); box-shadow: 0 18px 60px rgba(0,0,0,0.55); overflow: hidden; } /* ── Header ───────────────────────────────────────────────────────────────── */ .modal-header { display: flex; align-items: center; gap: 0.6rem; padding: var(--modal-spacing) 0.85rem; background: var(--modal-bg-header); border-bottom: 1px solid var(--modal-border-dark); } .modal-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; font-size: 1.2rem; } .modal-title { margin: 0; font-size: 1.05rem; font-weight: 650; flex: 1 1 auto; padding:0; } .modal-close { border: 0; background: transparent; color: var(--modal-text-muted); font-size: 1.25rem; cursor: pointer; width: 2.1rem; height: 2.1rem; border-radius: var(--modal-radius-sm); } .modal-close:hover { background: var(--modal-bg-accent); color: var(--modal-text); } /* ── Body ─────────────────────────────────────────────────────────────────── */ .modal-body { padding: var(--modal-spacing) 0.9rem; overflow: auto; font-size: 0.95rem; } /* ── Footer ───────────────────────────────────────────────────────────────── */ .modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--modal-spacing-sm); padding: var(--modal-spacing) 0.85rem; border-top: 1px solid var(--modal-border-dark); background: var(--modal-bg-header); } /* ── Type border accents ──────────────────────────────────────────────────── */ .modal-container.modal-info .modal-content { border-color: var(--modal-color-info); } .modal-container.modal-warning .modal-content { border-color: var(--modal-color-warning); } .modal-container.modal-danger .modal-content { border-color: var(--modal-color-danger); } .modal-container.modal-success .modal-content { border-color: var(--modal-color-success); } /* ── Body scroll lock ─────────────────────────────────────────────────────── */ body.modal-open { overflow: hidden; }