/*! * styles.css — PopupEngine base styles * Includes: modern light + dark themes, tokens (CSS variables), responsive sizing, * backdrop blur, elevation, and accessible focus styles. * * Apply theme by setting: * or * * Or rely on system preference: * if no data-popup-theme is set, prefers-color-scheme will apply. */ /* ----------------------------- Design tokens (defaults) ----------------------------- */ :root { /* Typography */ --popup-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; --popup-font-size: 16px; --popup-line-height: 1.4; /* Radius & spacing */ --popup-radius: 16px; --popup-radius-sm: 12px; --popup-padding: 20px; --popup-gap: 12px; /* Sizes */ --popup-max-w: 720px; --popup-min-w: 280px; --popup-max-h: min(80vh, 820px); /* Backdrop */ --popup-backdrop-opacity: 0.52; --popup-backdrop-blur: 10px; /* Elevation */ --popup-shadow: 0 24px 80px rgba(0, 0, 0, 0.28), 0 10px 30px rgba(0, 0, 0, 0.18); /* Motion */ --popup-ease: cubic-bezier(0.2, 0.9, 0.2, 1); --popup-duration: 180ms; /* Focus */ --popup-focus-ring: 0 0 0 4px; --popup-focus-ring-offset: 2px; /* Z-layer helpers (the engine sets z-index on popup-root) */ --popup-layer: 1000; /* Theme tokens (overridden below) */ --popup-bg: #ffffff; --popup-surface: rgba(255, 255, 255, 0.9); --popup-text: #101828; --popup-muted: #475467; --popup-border: rgba(16, 24, 40, 0.12); --popup-backdrop: rgba(0, 0, 0, var(--popup-backdrop-opacity)); --popup-accent: #2563eb; --popup-accent-contrast: #ffffff; --popup-danger: #dc2626; --popup-success: #16a34a; --popup-ring: rgba(37, 99, 235, 0.25); } /* ----------------------------- Theming ----------------------------- */ /* Explicit theme switch */ html[data-popup-theme="light"] { --popup-bg: #ffffff; --popup-surface: rgba(255, 255, 255, 0.92); --popup-text: #0b1220; --popup-muted: #4b5565; --popup-border: rgba(15, 23, 42, 0.12); --popup-backdrop: rgba(2, 6, 23, var(--popup-backdrop-opacity)); --popup-accent: #2563eb; --popup-accent-contrast: #ffffff; --popup-ring: rgba(37, 99, 235, 0.25); } html[data-popup-theme="dark"] { --popup-bg: #0b1220; --popup-surface: rgba(17, 24, 39, 0.76); --popup-text: #e5e7eb; --popup-muted: rgba(229, 231, 235, 0.72); --popup-border: rgba(229, 231, 235, 0.16); --popup-backdrop: rgba(0, 0, 0, 0.62); --popup-accent: #60a5fa; --popup-accent-contrast: #0b1220; --popup-ring: rgba(96, 165, 250, 0.22); --popup-shadow: 0 28px 90px rgba(0, 0, 0, 0.55), 0 10px 34px rgba(0, 0, 0, 0.38); } /* Auto theme from system if not explicitly set */ @media (prefers-color-scheme: dark) { html:not([data-popup-theme]) { --popup-bg: #0b1220; --popup-surface: rgba(17, 24, 39, 0.76); --popup-text: #e5e7eb; --popup-muted: rgba(229, 231, 235, 0.72); --popup-border: rgba(229, 231, 235, 0.16); --popup-backdrop: rgba(0, 0, 0, 0.62); --popup-accent: #60a5fa; --popup-accent-contrast: #0b1220; --popup-ring: rgba(96, 165, 250, 0.22); --popup-shadow: 0 28px 90px rgba(0, 0, 0, 0.55), 0 10px 34px rgba(0, 0, 0, 0.38); } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { :root { --popup-duration: 1ms; } } /* ----------------------------- Base structure styles ----------------------------- */ .popup-root { font-family: var(--popup-font); font-size: var(--popup-font-size); line-height: var(--popup-line-height); /* helps avoid surprising inherited styles */ color: var(--popup-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* isolate stacking context */ isolation: isolate; } .popup-root * { box-sizing: border-box; } .popup-backdrop { position:absolute; inset: 0; background: var(--popup-backdrop); backdrop-filter: blur(var(--popup-backdrop-blur)); -webkit-backdrop-filter: blur(var(--popup-backdrop-blur)); /* Subtle noise-like effect via gradient; looks premium without images */ background-image: radial-gradient( circle at 20% 15%, rgba(255, 255, 255, 0.06), transparent 35% ), radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.04), transparent 40%); } .popup-dialog { /* Center modal by default */ position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); transform-origin: center; width: min(var(--popup-max-w), calc(100vw - 32px)); min-width: var(--popup-min-w); max-height: var(--popup-max-h); border-radius: var(--popup-radius); border: 1px solid var(--popup-border); background: var(--popup-surface); box-shadow: var(--popup-shadow); overflow: hidden; /* for rounded corners */ } /* Content container */ .popup-content { padding: var(--popup-padding); overflow: auto; max-height: var(--popup-max-h); color: var(--popup-text); } /* Draggable hint (engine sets data-popup-dragged) */ .popup-dialog[data-popup-dragged="true"] { /* When dragged, the translate3d values come from JS; keep it smooth */ will-change: transform; } /* ----------------------------- Modern “component” utilities (use these in your markup later) ----------------------------- */ .popup__header, [data-popup-header] { display: flex; align-items: center; justify-content: space-between; gap: var(--popup-gap); padding: 18px var(--popup-padding); border-bottom: 1px solid var(--popup-border); /* Slightly more opaque header */ background: color-mix(in srgb, var(--popup-surface) 86%, transparent); } .popup__title { font-size: 1.05rem; font-weight: 650; letter-spacing: -0.01em; margin: 0; color: var(--popup-text); } .popup__subtle { font-size: 0.92rem; color: var(--popup-muted); } .popup__body { padding: var(--popup-padding); } .popup__footer, [data-popup-footer] { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 16px var(--popup-padding); border-top: 1px solid var(--popup-border); background: color-mix(in srgb, var(--popup-surface) 88%, transparent); } /* Divider utility */ .popup__divider { height: 1px; background: var(--popup-border); margin: 14px 0; } /* ----------------------------- Buttons (optional, modern defaults) ----------------------------- */ .popup__btn { appearance: none; border: 1px solid transparent; border-radius: 12px; padding: 10px 14px; font: inherit; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; background: rgba(148, 163, 184, 0.12); color: var(--popup-text); transition: transform var(--popup-duration) var(--popup-ease), background var(--popup-duration) var(--popup-ease), border-color var(--popup-duration) var(--popup-ease); } .popup__btn:hover { background: rgba(148, 163, 184, 0.18); } .popup__btn:active { transform: translateY(1px); } .popup__btn--primary { background: var(--popup-accent); color: var(--popup-accent-contrast); } .popup__btn--primary:hover { background: color-mix(in srgb, var(--popup-accent) 92%, black); } .popup__btn--danger { background: var(--popup-danger); color: #fff; } .popup__btn--ghost { background: transparent; border-color: var(--popup-border); } .popup__btn--ghost:hover { background: rgba(148, 163, 184, 0.10); } /* Close button (use data-popup-close) */ .popup__close, [data-popup-close] { appearance: none; border: 0; background: transparent; color: var(--popup-muted); cursor: pointer; border-radius: 12px; padding: 8px; line-height: 0; transition: background var(--popup-duration) var(--popup-ease), color var(--popup-duration) var(--popup-ease); } .popup__close:hover, [data-popup-close]:hover { background: rgba(148, 163, 184, 0.14); color: var(--popup-text); } /* ----------------------------- Inputs (optional, polished) ----------------------------- */ .popup-content input, .popup-content select, .popup-content textarea { width: 100%; font: inherit; color: var(--popup-text); border-radius: 12px; border: 1px solid var(--popup-border); background: color-mix(in srgb, var(--popup-bg) 70%, transparent); padding: 10px 12px; outline: none; transition: box-shadow var(--popup-duration) var(--popup-ease), border-color var(--popup-duration) var(--popup-ease); } .popup-content textarea { min-height: 110px; resize: vertical; } .popup-content label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--popup-text); } .popup-content .popup__field { display: grid; gap: 8px; margin-bottom: 14px; } .popup-content .popup__help { font-size: 0.9rem; color: var(--popup-muted); } /* ----------------------------- Focus styles (accessible + modern) ----------------------------- */ .popup-root :focus-visible { outline: none; box-shadow: var(--popup-focus-ring) var(--popup-ring); } .popup-dialog:focus-visible { box-shadow: 0 0 0 var(--popup-focus-ring-offset) color-mix(in srgb, var(--popup-bg) 70%, transparent), var(--popup-focus-ring) var(--popup-ring), var(--popup-shadow); } /* ----------------------------- Open/close polish (attribute-driven) (engine sets data-popup-open on container) ----------------------------- */ .popup-root { /* allow transitions */ pointer-events: none; /* disabled by default */ } .popup-root[data-popup-open="true"] { pointer-events: auto; } .popup-root[data-popup-open="true"] .popup-backdrop { animation: popup-backdrop-in var(--popup-duration) var(--popup-ease) both; } .popup-root[data-popup-open="true"] .popup-dialog { animation: popup-dialog-in var(--popup-duration) var(--popup-ease) both; } /* When the engine hides via display:none, out animations won't run. Later, we can switch engine to class toggles + transitionend for full motion. */ @keyframes popup-backdrop-in { from { opacity: 0; } to { opacity: 1; } } @keyframes popup-dialog-in { from { opacity: 0; transform: translate3d(-50%, -46%, 0) scale(0.98); } to { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); } } /* Reduced motion: no movement */ @media (prefers-reduced-motion: reduce) { @keyframes popup-dialog-in { from { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1); } to { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); } } } /* ----------------------------- Responsive tweaks ----------------------------- */ @media (max-width: 480px) { :root { --popup-radius: 14px; --popup-padding: 16px; } .popup-dialog { width: calc(100vw - 20px); min-width: 0; border-radius: var(--popup-radius); } .popup__header, [data-popup-header], .popup__footer, [data-popup-footer] { padding-left: 16px; padding-right: 16px; } } /* ----------------------------- Optional: "drawer" template hook (future: engine can add data-popup-template="drawer") ----------------------------- */ .popup-root[data-popup-template="drawer"] .popup-dialog { left: auto; top: 0; right: 0; height: 100%; max-height: 100vh; width: min(420px, 92vw); transform: translate3d(0, 0, 0); border-radius: var(--popup-radius) 0 0 var(--popup-radius); } /* ----------------------------- Optional: small helper for icons ----------------------------- */ .popup__icon { width: 20px; height: 20px; display: inline-block; flex: 0 0 auto; color: currentColor; } /* ----------------------------- Toast docking surfaces ----------------------------- */ /* Dock container for toasts (created by ToastDockManager) */ .popup-toast-dock { position: fixed; z-index: 3000; display: flex; flex-direction: column; gap: 12px; /* allow interaction within, but not block page elsewhere */ pointer-events: none; /* safe-area friendly */ padding: 12px; } /* Each toast is a .popup-root inside the dock */ .popup-toast-dock .popup-root { pointer-events: none; /* the toast itself enables pointer events */ } /* Toast container is not fullscreen; only its dialog should receive clicks */ .popup-root[data-popup-surface="toast"] { display: block; /* engine toggles display, but keep it sensible for dock */ } .popup-root[data-popup-surface="toast"][data-popup-open="true"] { pointer-events: auto; } .popup-root[data-popup-surface="toast"] .popup-backdrop { display: none !important; } /* Toast dialog styling */ .popup-root[data-popup-surface="toast"] .popup-dialog { position: relative; left: auto; top: auto; width: min(420px, calc(100vw - 24px)); min-width: 260px; max-height: none; border-radius: 14px; border: 1px solid var(--popup-border); background: color-mix(in srgb, var(--popup-surface) 92%, transparent); box-shadow: var(--popup-shadow); overflow: hidden; pointer-events: auto; /* allow clicking toast */ } /* Toast content usually wants tighter spacing */ .popup-root[data-popup-surface="toast"] .popup-content { padding: 14px 14px; max-height: none; } /* Dock positions */ .popup-toast-dock--top-right { top: 0; right: 0; align-items: flex-end; } .popup-toast-dock--top-left { top: 0; left: 0; align-items: flex-start; } .popup-toast-dock--bottom-right { bottom: 0; right: 0; align-items: flex-end; } .popup-toast-dock--bottom-left { bottom: 0; left: 0; align-items: flex-start; } .popup-toast-dock--top-center { top: 0; left: 50%; transform: translateX(-50%); align-items: center; } .popup-toast-dock--bottom-center { bottom: 0; left: 50%; transform: translateX(-50%); align-items: center; } /* Toast entrance animation */ .popup-root[data-popup-surface="toast"][data-popup-open="true"] .popup-dialog { animation: popup-toast-in var(--popup-duration) var(--popup-ease) both; } @keyframes popup-toast-in { from { opacity: 0; transform: translate3d(0, -6px, 0) scale(0.985); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @media (prefers-reduced-motion: reduce) { @keyframes popup-toast-in { from { opacity: 0; transform: translate3d(0,0,0) scale(1); } to { opacity: 1; transform: translate3d(0,0,0) scale(1); } } }