- Add light mode specific styling for copy code button (white bg, dark text)
- Ensure modal title stays white in both builtin and pico CSS versions
- Prevent PicoCSS from overriding title color in light mode
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add font-size: 14px to .user-message and .ai-message classes
- Prevents inheritance of 18px font from emoji-only styles
- Ensures chat bubbles maintain proper 14px text size
- Applied to both builtin and PicoCSS styles
- Reduce z-index from 10 to 5 for copy code buttons
- Prevents buttons from appearing on top of settings panel
- Settings panel has z-index 10 and should stay on top when open
- Applied to both builtin and PicoCSS styles
- Move copy code button from bottom-left to bottom-right of code blocks
- Increase main modal width from 70vw to 80vw
- Increase max-width from 800px to 1000px
- Prevents horizontal scrolling in chat area
- Applied to both builtin and PicoCSS override styles
- Change border-radius from 20px to 6px for square corners
- Make emoji-only buttons fixed 36x36px squares
- Use grid layout with place-content: center for emoji centering
- Matches the style of emoji buttons used in chat messages
- Reduced padding to 8px for consistent square appearance
- Change fullPageRaw button from text to emoji + tooltip format
- Use 📝 emoji for markdown conversion functionality
- Follows same pattern as other action buttons
- Remove smart translate button functionality (non-working)
- Convert all action buttons to emoji + tooltip format:
📖 Read Page, 🔊 TTS Anything, 🌐 Translate, 📋 Copy Raw, 📄 Copy HTML
- Add emoji-only CSS class with 18px font size for emojis
- Add backdrop removal for TTS and translate modals in builtin CSS
- Update button creation to use title attribute for tooltips
- Reduce padding for emoji-only buttons (8px 12px vs 8px 16px)
- Remove overflow hidden and text-overflow ellipsis from buttons
- Change grid-auto-columns from minmax(0, max-content) to max-content
- Allow buttons to stretch to accommodate full text without truncation
- Keep white-space: nowrap to prevent text wrapping
- Lower settings panel by 15px more (80px to 95px top offset)
- Use place-content instead of place-items for proper grid centering
- Keep all layouts using CSS Grid as requested
- Fix gear and close button centering in both CSS files
- Add ::backdrop overrides for all dialog modals
- Set backdrop-filter to none and background-color to transparent
- Applied to uncloseai-embedded-modal, translate-modal, and tts-modal
- Removes the blurry backdrop effect from PicoCSS theme
- Increase settings panel top offset from 60px to 80px to avoid header
- Remove max-height: 40vh restriction on settings panel
- Add overflow hidden and text-overflow ellipsis to buttons
- Change grid-auto-columns to minmax(0, max-content) for proper sizing
- Ensure buttons don't expand beyond their content width
- Use grid-auto-flow: column for horizontal button layouts
- Fix controls and message actions to display horizontally
- Add theme-aware background colors for settings panel
- Move settings panel top position to avoid covering header
- Ensure all button text stays within button boundaries
- Convert modal container from flex column to grid with explicit rows
- Replace flex centering with grid place-items: center
- Convert header layouts from flex space-between to grid 1fr auto
- Transform input areas from flex to grid column layouts
- Update chat messages from flex column to grid single column
- Convert TTS controls, voice selection, and audio controls to grid
- Replace flex-wrap patterns with grid auto-fit minmax columns
- Remove all flex-shrink, flex-direction, and space-between properties
- Update align-self flex-start/end to justify-self start/end for grid
- Apply changes to both builtin and PicoCSS override stylesheets
This completes the systematic conversion from Flexbox to CSS Grid
layouts throughout the modal interface as requested.
- Changed settings panel from flex to CSS Grid layout
- When open, settings panel covers the entire modal with absolute positioning
- Uses grid-template-columns: 1fr with 20px gap and align-content: start
- Added background color and z-index for proper overlay behavior
- Updated both PicoCSS and built-in CSS versions
- Increased font-size from 13px to 18px for .uncloseai-btn-control (toolbelt buttons)
- Moved code copy button to bottom-left and increased size to 18px
- Increased background opacity from 0.7 to 0.9 for code copy button
- Changed message backgrounds from solid colors to 95% opacity for better visibility
- Updated both PicoCSS and built-in CSS versions
- Updated .uncloseai-btn-small font-size from 12px to 18px in both CSS files
- Makes emoji icons more visible and appropriately sized
- Improves button usability and visual hierarchy
- Increased width from 110px to 120px to accommodate 'uncloseai.' text
- Added white-space: nowrap to prevent any text wrapping
- Updated both PicoCSS and built-in CSS versions
- Wait for CSS to load via onload event before creating button
- Prevents button appearing unstyled on initial page load
- Fallback to direct modal opening if toggleUncloseaiEmbeddedModal not available
- Refactored button creation into separate function for better flow control
- Added 100ms delay when CSS needs to be loaded for floating button
- This ensures CSS rules are parsed before button is displayed
- Fixes issue where button appeared unstyled in top-left corner
- Moved 115+ inline styles from uncloseai-embed-modal.js to CSS classes
- Cleaned all inline styles from page-reader.js, widget-library.js, chat.js, models.js, file-upload.js
- Added CSS custom properties for theming support
- Created reusable CSS classes for buttons, containers, and UI elements
- Only retained legitimate dynamic styles (height calculations, position adjustments)
- Improved consistency with PicoCSS overrides
- Fixed the inline style replacement to maintain dynamic theming
- Added CSS custom properties (variables) for theme-aware styling
- CSS classes now use var() with fallback values for light theme
- JavaScript sets CSS custom properties on theme changes
- Maintains full light/dark theme compatibility for all button types
This ensures the replaced CSS classes work correctly with the existing theming system instead of using static colors.
- Replaced TTS, delete, and download buttons with utility classes
- Converted message action containers to CSS classes
- Replaced form labels and sections with semantic classes
- Reduced inline styles from 131 to 99 in main modal (32 styles removed)
- Updated CSS classes to match exact styling requirements
- Added uncloseai-btn-control class for standard modal action buttons
- Replaced control button inline styles with CSS class
- Reduced inline styles from 131 to 118 in main modal file
- Established pattern for systematic cleanup of remaining 200+ inline styles
- Added comprehensive utility CSS classes to both builtin and pico stylesheets
- Replaced copy button, close button, title container, and header right styling
- 208 total inline styles identified across codebase
- Started systematic replacement with reusable CSS classes
- Convert CSS links, script sources, image sources, and navigation links
- Use current page URL as base for proper relative URL resolution
- Skip data: URLs, fragments, and protocol-relative URLs
- Ensure all assets load properly in new window context
- Convert relative CSS URLs to absolute URLs using current origin
- Ensure translated pages can load original blog CSS in new window
- Maintain modal functionality with external CSS files
- Skip URLs that are already absolute (http/https or protocol-relative)
- Add logging to see how many CSS links are found
- Log each CSS file being inlined and success/failure
- Help diagnose why translated pages may not have modal styling
- Fetch external uncloseai CSS files and inline them as <style> tags
- Replace body content with translated version while preserving page structure
- Ensure new window is self-contained and doesn't need external CSS requests
- Maintain new window approach to avoid breaking current page
The CSS refactoring broke translated page rendering. The original function
was working correctly by translating the complete HTML document structure.
Translated pages don't need modal CSS, just the original page styling.
- Update translateCurrentPage() to preserve original page HTML structure
- Extract only text content for translation while keeping head/styles
- Create properly formatted translated page with clean typography
- Fix issue where translated pages opened in new windows lacked CSS styling
- Change CSS loading logic to detect actual PicoCSS link tags on page
- Blog sites without PicoCSS now correctly load uncloseai-modal-builtin.css
- PicoCSS sites load uncloseai-modal-pico.css with proper overrides
- Fix modal appearing full-screen on blog sites that don't use PicoCSS
- Remove all inline CSS from translate-modal.js, tts-modal.js, and widget-library.js
- Replace inline styles with CSS classes in both builtin and pico CSS files
- Eliminate USE_CUSTOM_STYLING conditionals from styling code
- Add proper CSS classes: translate-modal-*, tts-modal-*, widget-*
- Maintain all functionality while achieving clean separation of concerns
- Fix modal sizing issues on large displays through proper PicoCSS overrides
- Support responsive design with mobile-first approach (≤480px full screen)
- Pass all tests: formatting, exports, translations, and integration
- Create uncloseai-modal-builtin.css for blog versions
- Create uncloseai-modal-pico.css for PicoCSS override
- Add conditional CSS loading to all modal JavaScript files
- Remove inline styles from main modal, translate modal, TTS modal, and widget library
- Fix modal full-screen issue on large displays with proper PicoCSS overrides
- Maintain mobile-first responsive design (≤480px full screen)
- Support both USE_CUSTOM_STYLING modes for maximum compatibility
Changed mobile detection threshold from 768px to 480px to ensure
centered modal behavior on desktop/laptop screens while preserving
full-screen experience on actual mobile devices.
- Changed Node.js Examples from h2 to h3 to be subsection under Using the Hermes AI Model
- Updated table of contents to group all Python and Node.js examples under main Hermes section
- Improved logical document structure with consistent hierarchy
- All AI model examples now properly organized under single main section
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Added distinct bullet styles (disc for main, circle for sub-items)
- Implemented proper indentation with padding and margins
- Added subtle left border for nested sections using theme color
- Differentiated font sizes between main sections and subsections
- Improved line height and spacing for better readability
- Maintains PicoCSS compatibility while clearly showing hierarchy
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Added comprehensive hierarchical table of contents with proper h2/h3 nesting
- Added missing section IDs to all headers for proper anchor navigation
- Restructured headers to use only h2 (main sections) and h3 (subsections)
- Organized content with logical grouping: Web Client, OpenAI Client, Hermes Model, Node.js, TTS
- Enhanced navigation with complete coverage of all sections and subsections
- Improved document structure and accessibility with semantic HTML
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Changed from <section> to <aside> for proper semantic navigation
- Removed custom CSS overrides that conflicted with PicoCSS
- Simplified structure from nested ordered/unordered lists to flat unordered list
- Removed inline styling to let PicoCSS handle navigation appearance
- Improved accessibility and framework compatibility
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
