engineering/uncloseai.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix Hermes modal to respect styling configuration

Browse source 
Applied conditional styling to Hermes modal header, container, title, close button, and send button. Modal now properly inherits framework styling when UNCLOSEAI_CUSTOM_STYLING is false, removing gradients and custom fonts for clean PicoCSS integration.
This commit is contained in:
Russell Ballestrini 2025-06-29 19:32:13 -04:00
parent 459291addf
commit b78bc6ab2f
1 changed files with 91 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

138
uncloseai.js
View file

@ -998,53 +998,95 @@ function openHermesModal() {
// Create modal container
const modal = document.createElement('div');
modal.id = 'hermes-modal';
modal.style.cssText = `
background: white;
border-radius: 16px;
width: 90%;
max-width: 800px;
height: 80%;
max-height: 600px;
display: flex;
flex-direction: column;
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
overflow: hidden;
`;
if (USE_CUSTOM_STYLING) {
modal.style.cssText = `
background: white;
border-radius: 16px;
width: 90%;
max-width: 800px;
height: 80%;
max-height: 600px;
display: flex;
flex-direction: column;
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
overflow: hidden;
`;
} else {
modal.style.cssText = `
background: white;
width: 90%;
max-width: 800px;
height: 80%;
max-height: 600px;
display: flex;
flex-direction: column;
overflow: hidden;
`;
}
// Create modal header
const header = document.createElement('div');
header.style.cssText = `
background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 16px 20px;
display: flex;
justify-content: space-between;
align-items: center;
`;
if (USE_CUSTOM_STYLING) {
header.style.cssText = `
background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 16px 20px;
display: flex;
justify-content: space-between;
align-items: center;
`;
} else {
header.style.cssText = `
padding: 16px 20px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #ccc;
`;
}
const title = document.createElement('h2');
title.textContent = 'Hermes AI Chat';
title.style.cssText = `
margin: 0;
font-family: 'ChunkFiveRegular', monospace;
font-size: 20px;
`;
if (USE_CUSTOM_STYLING) {
title.style.cssText = `
margin: 0;
font-family: 'ChunkFiveRegular', monospace;
font-size: 20px;
`;
} else {
title.style.margin = '0';
}
const closeButton = document.createElement('button');
closeButton.textContent = '×';
closeButton.style.cssText = `
background: none;
border: none;
color: white;
font-size: 24px;
cursor: pointer;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
`;
if (USE_CUSTOM_STYLING) {
closeButton.style.cssText = `
background: none;
border: none;
color: white;
font-size: 24px;
cursor: pointer;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
`;
} else {
closeButton.style.cssText = `
background: none;
border: none;
font-size: 24px;
cursor: pointer;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
`;
}
closeButton.onclick = () => {
document.body.removeChild(modalBackdrop);
hermesModalOpen = false;
@ -1209,15 +1251,17 @@ function openHermesModal() {
const sendButton = document.createElement('button');
sendButton.textContent = 'Send';
sendButton.style.cssText = `
padding: 12px 24px;
background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: bold;
`;
if (USE_CUSTOM_STYLING) {
sendButton.style.cssText = `
padding: 12px 24px;
background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: bold;
`;
}
// File upload
const fileInput = document.createElement('input');