From ca8df46ddc19538e029458e904e0ac64f5bb3461 Mon Sep 17 00:00:00 2001 From: "russell@unturf.com" Date: Tue, 24 Feb 2026 15:16:14 -0500 Subject: [PATCH] fix modal header on host pages, button reset, remove emoji, add all 3 headers to styleguide, 42+ voices --- public/src/uncloseai-embed-modal.js | 7 +-- public/src/uncloseai-modal-builtin.css | 27 +++++++++-- public/src/uncloseai-modal-pico.css | 25 +++++++++-- public/uncloseai-js-styleguide.html | 62 ++++++++++++++++++++++---- public/uncloseai-js.html | 4 +- 5 files changed, 104 insertions(+), 21 deletions(-) diff --git a/public/src/uncloseai-embed-modal.js b/public/src/uncloseai-embed-modal.js index 384bab6..baad767 100644 --- a/public/src/uncloseai-embed-modal.js +++ b/public/src/uncloseai-embed-modal.js @@ -274,6 +274,8 @@ async function openUncloseaiEmbeddedModalNew() { const modal = document.createElement("dialog"); modal.id = "uncloseai-embedded-modal"; modal.setAttribute("data-theme", theme); + // Force zero padding inline so host page dialog styles can't push the header inward + modal.style.padding = "0"; // CSS handles all styling now - no inline styles needed // But we still need isMobile for some responsive text sizing @@ -292,15 +294,14 @@ async function openUncloseaiEmbeddedModalNew() { const title = document.createElement("h2"); title.innerHTML = - "🤖 uncloseai."; + "uncloseai."; title.className = `uncloseai-modal-title ${isMobile ? "uncloseai-modal-title-mobile" : "uncloseai-modal-title-desktop"}`; const subtitle = document.createElement("div"); const pageTitle = document.title || window.location.hostname; subtitle.innerHTML = `
- uncloseai. ${getUIText("hermesIntro")}
- ${getUIText("discussingPage")}: ${pageTitle} + ${getUIText("discussingPage")}: ${pageTitle}
`; diff --git a/public/src/uncloseai-modal-builtin.css b/public/src/uncloseai-modal-builtin.css index 32effe1..8d5defe 100644 --- a/public/src/uncloseai-modal-builtin.css +++ b/public/src/uncloseai-modal-builtin.css @@ -76,7 +76,7 @@ dialog#uncloseai-embedded-modal[data-theme="light"] { .uncloseai-modal-settings-btn { background: rgba(255, 255, 255, 0.2); border: none; - color: white !important; + color: white; font-size: 18px; width: 36px; height: 36px; @@ -86,7 +86,6 @@ dialog#uncloseai-embedded-modal[data-theme="light"] { place-content: center; transition: background 0.2s; margin-right: 8px; - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .uncloseai-modal-settings-btn:hover { @@ -896,8 +895,28 @@ dialog#translate-modal h3, dialog#translate-modal h4, dialog#translate-modal h5, dialog#translate-modal h6 { - padding: 0 !important; - margin: 0 !important; + padding: 0; + margin: 0; +} + +/* Reset host page button styles that leak into our modals */ +dialog#uncloseai-embedded-modal button, +dialog#tts-modal button, +dialog#translate-modal button { + min-width: unset; + max-width: unset; + min-height: unset; + max-height: unset; + padding: 0; + margin: 0; + border: none; + background: none; + font: inherit; + line-height: normal; + letter-spacing: normal; + text-transform: none; + text-align: center; + box-sizing: border-box; } /* API Configuration Styles */ diff --git a/public/src/uncloseai-modal-pico.css b/public/src/uncloseai-modal-pico.css index 069fff5..72699dc 100644 --- a/public/src/uncloseai-modal-pico.css +++ b/public/src/uncloseai-modal-pico.css @@ -95,10 +95,10 @@ dialog#uncloseai-embedded-modal[data-theme="light"] { } /* Settings button */ -.uncloseai-modal-settings-btn { +dialog#uncloseai-embedded-modal .uncloseai-modal-settings-btn { background: rgba(255, 255, 255, 0.2); border: none; - color: white !important; + color: white; font-size: 18px; width: 36px; height: 36px; @@ -108,7 +108,6 @@ dialog#uncloseai-embedded-modal[data-theme="light"] { place-content: center; transition: background 0.2s; margin-right: 8px; - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .uncloseai-modal-settings-btn:hover { @@ -970,6 +969,26 @@ dialog#translate-modal h6 { margin: 0 !important; } +/* Reset host page button styles that leak into our modals */ +dialog#uncloseai-embedded-modal button, +dialog#tts-modal button, +dialog#translate-modal button { + min-width: unset; + max-width: unset; + min-height: unset; + max-height: unset; + padding: 0; + margin: 0; + border: none; + background: none; + font: inherit; + line-height: normal; + letter-spacing: normal; + text-transform: none; + text-align: center; + box-sizing: border-box; +} + /* API Configuration Styles */ .uncloseai-toggle-container { display: block; diff --git a/public/uncloseai-js-styleguide.html b/public/uncloseai-js-styleguide.html index b234bbf..c7dfbf4 100644 --- a/public/uncloseai-js-styleguide.html +++ b/public/uncloseai-js-styleguide.html @@ -219,7 +219,6 @@ /* Modal header demo */ .sg-header-demo { padding: 16px; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; display: grid; grid-template-columns: 1fr auto; @@ -228,9 +227,18 @@ margin: 16px 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } + .sg-header-demo-purple { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + } + .sg-header-demo-green { + background: linear-gradient(45deg, #4CAF50 0%, #45a049 100%); + } .sg-header-title { font-weight: 600; - font-size: 18px; + font-size: 20px; + } + .sg-header-title-brand { + font-family: 'ChunkFiveRegular', monospace; } .sg-header-subtitle { font-size: 12px; @@ -248,6 +256,13 @@ display: grid; place-content: center; } + .sg-header-btn-row { + display: grid; + grid-auto-flow: column; + grid-auto-columns: max-content; + gap: 8px; + align-items: center; + } /* Control strip demo */ .sg-controls-demo { @@ -619,15 +634,38 @@ - -

Purple gradient header with title, subtitle, and settings gear. The gradient linear-gradient(135deg, #667eea, #764ba2) is the visual anchor across the entire modal system.

+ +

All three modals share the same header structure: gradient background, title, and action buttons. The purple gradient anchors the chat and TTS modals, while translate uses green.

-
+

Chat Modal

+

Purple gradient with brand title, page context subtitle, settings gear, and close button.

+
-
Hermes Machine Learning
-
Discussing: uncloseai.js Styleguide
+
uncloseai.
+
discussing: uncloseai.js Styleguide
- +
+ + +
+
+ +

TTS Modal

+

Purple gradient with "Text to Speech" title and close button.

+
+
+
Text to Speech
+
+ +
+ +

Translate Modal

+

Green gradient (#4CAF50 → #45a049) with "Translate" title and close button.

+
+
+
Translate
+
+
@@ -790,7 +828,13 @@
  • Error State
    • -
  • Modal Header
    • +
  • Modal Headers + +
  • Chat Messages
    • Message Actions
      • diff --git a/public/uncloseai-js.html b/public/uncloseai-js.html index 4d896e9..d89d410 100644 --- a/public/uncloseai-js.html +++ b/public/uncloseai-js.html @@ -131,7 +131,7 @@

      Text-to-Speech

        -
      • 40+ voices across multiple TTS models (standard, HD, cloned)
        • +
      • 42+ voices across multiple TTS models (standard, HD, cloned)
      • Speak any message, paste arbitrary text, or read the whole page aloud
      • Adjustable playback speed
      • Buffered or streaming audio modes
        • @@ -211,7 +211,7 @@

        Choose from dynamically discovered models. The dropdown shows the endpoint and model name. Models are auto-discovered by querying /v1/models on each configured endpoint.

        Voice Selection

        -

        40+ voices organized by TTS model. Voices are discovered dynamically from the speech endpoint. Includes standard, HD, and cloned voice options.

        +

        42+ voices organized by TTS model. Voices are discovered dynamically from the speech endpoint. Includes standard, HD, and cloned voice options.

        Language

        Switch the UI and model response language. Changes take effect immediately across all text.