/** * Section Settings Popup styles. * -------------------------------------------------------------- * Lightweight modal anchored to , NOT inside the iframe-host * section. Same accent + dark glassmorphism vocabulary as the * inline editor toolbar and section controls. * * Selector prefix `sssp-` = SectionSettingsPopup. Short prefix * keeps the rendered HTML small and the class names easy to grep. */ .sssp-backdrop { position: fixed; inset: 0; z-index: 10020; display: none; pointer-events: none; background: transparent; opacity: 0; } .sssp-backdrop.is-visible { opacity: 0; } .sssp-popup { position: fixed; z-index: 10021; top: 82px; right: 24px; left: auto; transform: translateY(8px); width: min(620px, calc(100vw - 32px)); max-height: calc(100dvh - 104px); display: flex; flex-direction: column; border: 1px solid rgba(var(--accent-rgb, 225 29 72), 0.32); border-radius: 16px; background: linear-gradient(160deg, rgba(var(--accent-rgb, 225 29 72), 0.08), rgba(255, 255, 255, 0.02)), rgba(14, 14, 16, 0.98); color: #f5f5f7; box-shadow: 0 30px 80px -32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04) inset; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); opacity: 0; transition: opacity .22s cubic-bezier(.4, .2, .2, 1), transform .22s cubic-bezier(.4, .2, .2, 1); overflow: hidden; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } .sssp-popup.is-visible { opacity: 1; transform: translateY(0); } .sssp-popup.is-dragging { transition: none; user-select: none; } /* When the popup embeds the FULL drawer editor (via __demoPanelBuildBlockEditor) the UI density is higher than the fallback simple form, so give it more room. */ .sssp-popup:has(.sssp-rich-editor) { width: min(720px, calc(100vw - 32px)); } /* Wrap the embedded drawer UI so its native styling shows through without re-defining classes. The drawer's classes (.demo-section, .demo-field, .demo-gallery-manager, etc.) are all loaded from demo-panel.css and continue to work here. We just ensure the container has the right padding + scrolling. */ .sssp-rich-editor { display: flex; flex-direction: column; gap: 14px; } /* The drawer's .demo-block-content has its own padding; remove any doubled inset and let the popup body handle outer spacing. */ .sssp-rich-editor > .demo-block-content { padding: 0; } /* ---- Header ---- */ .sssp-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 18px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); cursor: grab; touch-action: none; } .sssp-header:active { cursor: grabbing; } .sssp-header-text { min-width: 0; } .sssp-kicker { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(var(--accent-rgb, 225 29 72), 0.95); margin-bottom: 4px; } .sssp-title { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; } .sssp-close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; background: rgba(255, 255, 255, 0.04); color: #f5f5f7; cursor: pointer; transition: border-color .15s, background .15s; } .sssp-close:hover { border-color: rgba(var(--accent-rgb, 225 29 72), 0.6); background: rgba(var(--accent-rgb, 225 29 72), 0.15); } .sssp-close:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 225 29 72), 0.4); } .sssp-icon { display: inline-flex; align-items: center; } .sssp-icon svg { width: 14px; height: 14px; } .sssp-close .sssp-icon svg { width: 16px; height: 16px; } /* ---- Body ---- */ .sssp-body { flex: 1 1 auto; overflow-y: auto; padding: 14px 18px 6px; display: flex; flex-direction: column; gap: 14px; /* Custom scrollbar */ scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent; } .sssp-body::-webkit-scrollbar { width: 6px; } .sssp-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 3px; } .sssp-body::-webkit-scrollbar-track { background: transparent; } .sssp-section { display: flex; flex-direction: column; gap: 10px; } .sssp-section-title { margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.42); } /* ---- Field row ---- */ .sssp-field { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: start; } .sssp-field-label { grid-column: 1 / -1; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.86); letter-spacing: 0.01em; } .sssp-field-hint { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(255, 255, 255, 0.5); line-height: 1.4; } .sssp-field-hint .sssp-icon svg { width: 12px; height: 12px; } .sssp-input { grid-column: 1; width: 100%; padding: 9px 11px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; background: rgba(0, 0, 0, 0.35); color: #f5f5f7; font: 400 13px/1.4 system-ui, sans-serif; resize: vertical; transition: border-color .15s, background .15s, box-shadow .15s; -webkit-appearance: none; } .sssp-input:hover { border-color: rgba(255, 255, 255, 0.22); } .sssp-input:focus { outline: none; border-color: rgba(var(--accent-rgb, 225 29 72), 0.7); background: rgba(0, 0, 0, 0.45); box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 225 29 72), 0.18); } select.sssp-input { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.62) 50%), linear-gradient(135deg, rgba(255, 255, 255, 0.62) 50%, transparent 50%); background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } select.sssp-input option { background: #121216; color: #f5f5f7; } .sssp-custom-select { grid-column: 1; position: relative; width: 100%; min-width: 0; } .sssp-custom-select-trigger { width: 100%; min-height: 40px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px 9px 11px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)), rgba(0, 0, 0, 0.35); color: #f5f5f7; font: 400 13px/1.4 system-ui, sans-serif; text-align: left; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; } .sssp-custom-select-trigger:hover, .sssp-custom-select.is-open .sssp-custom-select-trigger { border-color: rgba(255, 255, 255, 0.22); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.024)), rgba(0, 0, 0, 0.45); } .sssp-custom-select-trigger:focus-visible, .sssp-custom-select.is-open .sssp-custom-select-trigger { outline: none; border-color: rgba(var(--accent-rgb, 225 29 72), 0.7); box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 225 29 72), 0.18); } .sssp-custom-select-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sssp-custom-select-caret { display: inline-grid; place-items: center; width: 20px; height: 20px; color: rgba(255, 255, 255, 0.55); transition: transform .16s, color .16s; } .sssp-custom-select-caret svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .sssp-custom-select.is-open .sssp-custom-select-caret { transform: rotate(180deg); color: rgba(var(--accent-rgb, 225 29 72), 0.95); } .sssp-custom-select-menu { position: absolute; z-index: 10090; top: calc(100% + 6px); left: 0; right: 0; max-height: min(260px, 42vh); overflow-y: auto; padding: 6px; border: 1px solid rgba(var(--accent-rgb, 225 29 72), 0.28); border-radius: 12px; background: linear-gradient(160deg, rgba(var(--accent-rgb, 225 29 72), 0.08), rgba(255,255,255,.02)), rgba(12, 12, 15, 0.98); box-shadow: 0 22px 55px -26px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.045); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); opacity: 0; transform: translateY(-4px) scale(.98); pointer-events: none; transform-origin: top; transition: opacity .16s, transform .16s; } .sssp-custom-select.is-open .sssp-custom-select-menu { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .sssp-custom-select-option { width: 100%; min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 9px; border: 0; border-radius: 8px; background: transparent; color: rgba(255, 255, 255, 0.76); font: 500 12.5px/1.25 system-ui, sans-serif; text-align: left; cursor: pointer; } .sssp-custom-select-option:hover, .sssp-custom-select-option:focus-visible { outline: none; color: #fff; background: rgba(255,255,255,.065); } .sssp-custom-select-option.is-selected { color: #fff; background: rgba(var(--accent-rgb, 225 29 72), 0.16); } .sssp-custom-select-option.is-selected::after { content: ""; flex: 0 0 auto; width: 12px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translateY(-1px); color: rgba(var(--accent-rgb, 225 29 72), 0.95); } textarea.sssp-input { min-height: 64px; font-family: system-ui, -apple-system, sans-serif; } .sssp-field-reset { grid-column: 2; align-self: start; display: inline-flex; align-items: center; gap: 4px; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.7); font: 600 10.5px/1 system-ui, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: border-color .15s, color .15s, background .15s; } .sssp-field-reset:hover { border-color: rgba(255, 255, 255, 0.3); color: #fff; background: rgba(255, 255, 255, 0.08); } .sssp-field-reset .sssp-icon svg { width: 11px; height: 11px; } /* ---- Toggle row ---- */ .sssp-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; background: rgba(255, 255, 255, 0.025); } .sssp-toggle-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .sssp-toggle-label { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.92); } .sssp-toggle-sub { font-size: 11px; color: rgba(255, 255, 255, 0.5); line-height: 1.4; } .sssp-toggle { flex: 0 0 auto; position: relative; width: 42px; height: 24px; padding: 0; border: 0; border-radius: 999px; background: transparent; cursor: pointer; } .sssp-toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 225 29 72), 0.4); } .sssp-toggle-track { display: block; width: 100%; height: 100%; border-radius: 999px; background: rgba(255, 255, 255, 0.12); transition: background .18s; position: relative; } .sssp-toggle.is-on .sssp-toggle-track { background: rgba(var(--accent-rgb, 225 29 72), 0.85); } .sssp-toggle-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform .18s cubic-bezier(.4, .2, .2, 1); } .sssp-toggle.is-on .sssp-toggle-knob { transform: translateX(18px); } /* ---- Hint block (lists not editable here) ---- */ .sssp-hint-block { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1px dashed rgba(255, 255, 255, 0.18); border-radius: 10px; background: rgba(255, 255, 255, 0.025); color: rgba(255, 255, 255, 0.66); font: 400 11.5px/1.45 system-ui, sans-serif; } .sssp-hint-block .sssp-icon { color: rgba(var(--accent-rgb, 225 29 72), 1); } .sssp-hint-block .sssp-icon svg { width: 14px; height: 14px; } /* ---- Footer ---- */ .sssp-footer { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; border-top: 1px solid rgba(255, 255, 255, 0.06); background: rgba(0, 0, 0, 0.18); flex-wrap: wrap; } .sssp-footer-left, .sssp-footer-right { display: inline-flex; align-items: center; gap: 6px; } .sssp-footer-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; background: rgba(255, 255, 255, 0.04); color: #f5f5f7; font: 600 11.5px/1 system-ui, sans-serif; letter-spacing: 0.02em; cursor: pointer; transition: border-color .15s, background .15s, color .15s; } .sssp-footer-btn:hover { border-color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.08); } .sssp-footer-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 225 29 72), 0.4); } .sssp-footer-btn.is-danger { border-color: rgba(220, 60, 80, 0.4); color: rgba(255, 200, 200, 0.95); } .sssp-footer-btn.is-danger:hover { border-color: rgba(220, 60, 80, 0.85); background: rgba(220, 60, 80, 0.18); color: #fff; } .sssp-footer-btn.is-link { border-color: rgba(var(--accent-rgb, 225 29 72), 0.45); background: linear-gradient(120deg, rgba(var(--accent-rgb, 225 29 72), 0.18), rgba(255, 255, 255, 0.04)), rgba(8, 8, 10, 0.96); color: #fff; } .sssp-footer-btn.is-link:hover { border-color: rgba(var(--accent-rgb, 225 29 72), 0.85); background: linear-gradient(120deg, rgba(var(--accent-rgb, 225 29 72), 0.28), rgba(255, 255, 255, 0.06)), rgba(8, 8, 10, 0.96); } .sssp-footer-btn .sssp-icon svg { width: 12px; height: 12px; } /* ---- Mobile ---- */ @media (max-width: 640px) { .sssp-popup { width: calc(100vw - 16px); max-height: calc(100vh - 40px); border-radius: 14px; } .sssp-header { padding: 14px 14px 10px; } .sssp-title { font-size: 16px; } .sssp-body { padding: 12px 14px 4px; } .sssp-footer { padding: 10px 14px; } .sssp-footer-btn { padding: 7px 10px; font-size: 11px; } } @media (prefers-reduced-motion: reduce) { .sssp-backdrop, .sssp-popup, .sssp-input, .sssp-toggle-track, .sssp-toggle-knob, .sssp-close, .sssp-field-reset, .sssp-footer-btn { transition: none !important; } }