fix: restore tooltip, accent-blue colors, fix chip click mechanism
- Restore has-tooltip tooltip-left on toggle button - Use --accent-blue (#0066cc) as secondary color: header, user bubbles, send button, chip hover, input focus — breaks the all-black monotony - Dark theme uses deeper blue (#003d7a header, #004d99 interactions) - Fix chip click: replace Hyperscript htmx.trigger() call with direct onclick using JS htmx.trigger() — Hyperscript couldn't resolve the HTMX global properly - Remove _chat.css @import from main.css (loaded separately already)
This commit is contained in:
juanatsap
@@ -81,7 +81,7 @@
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Header — uses black-bar like action bar
|
||||
Header — accent-blue for visual distinction
|
||||
========================================================================== */
|
||||
|
||||
.chat-header {
|
||||
@@ -89,8 +89,8 @@
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 14px;
|
||||
background: var(--black-bar, #2b2b2b);
|
||||
color: var(--action-bar-text, #ffffff);
|
||||
background: var(--accent-blue, #0066cc);
|
||||
color: #ffffff;
|
||||
font-family: 'Quicksand', sans-serif;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
@@ -167,7 +167,7 @@
|
||||
}
|
||||
|
||||
.chat-user {
|
||||
background: var(--black-bar, #2b2b2b);
|
||||
background: var(--accent-blue, #0066cc);
|
||||
color: #fff;
|
||||
align-self: flex-end;
|
||||
border-bottom-right-radius: 2px;
|
||||
@@ -243,9 +243,9 @@
|
||||
}
|
||||
|
||||
.chat-chip:hover {
|
||||
background: var(--black-bar, #2b2b2b);
|
||||
background: var(--accent-blue, #0066cc);
|
||||
color: #fff;
|
||||
border-color: var(--black-bar, #2b2b2b);
|
||||
border-color: var(--accent-blue, #0066cc);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
@@ -279,7 +279,7 @@
|
||||
}
|
||||
|
||||
.chat-send-btn {
|
||||
background: var(--black-bar, #2b2b2b);
|
||||
background: var(--accent-blue, #0066cc);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
@@ -295,7 +295,7 @@
|
||||
}
|
||||
|
||||
.chat-send-btn:hover {
|
||||
background: var(--accent-blue, #0066cc);
|
||||
background: #004d99;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
@@ -332,7 +332,7 @@
|
||||
}
|
||||
|
||||
.theme-clean .chat-header {
|
||||
background: #111111;
|
||||
background: #003d7a;
|
||||
}
|
||||
|
||||
.theme-clean .chat-agent {
|
||||
@@ -341,7 +341,7 @@
|
||||
}
|
||||
|
||||
.theme-clean .chat-user {
|
||||
background: #333333;
|
||||
background: #004d99;
|
||||
}
|
||||
|
||||
.theme-clean .chat-error {
|
||||
@@ -372,9 +372,9 @@
|
||||
}
|
||||
|
||||
.theme-clean .chat-chip:hover {
|
||||
background: #333333;
|
||||
background: #004d99;
|
||||
color: #fff;
|
||||
border-color: #333333;
|
||||
border-color: #004d99;
|
||||
}
|
||||
|
||||
.theme-clean .chat-typing-dot {
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<!-- AI Chat Widget — CV Assistant Mascot -->
|
||||
<button
|
||||
id="chat-toggle-btn"
|
||||
class="chat-toggle-btn no-print"
|
||||
class="chat-toggle-btn no-print has-tooltip tooltip-left"
|
||||
aria-label="{{if eq .Lang "es"}}Asistente del CV{{else}}CV Assistant{{end}}"
|
||||
data-tooltip="{{if eq .Lang "es"}}Asistente del CV{{else}}CV Assistant{{end}}"
|
||||
_="on click toggle .chat-open on #chat-panel
|
||||
@@ -47,36 +47,26 @@
|
||||
<div class="chat-suggestions">
|
||||
{{if eq .Lang "es"}}
|
||||
<button type="button" class="chat-chip"
|
||||
_="on click set #chat-input.value to '¿Qué proyectos en Go ha hecho?'
|
||||
then call htmx.trigger(#chat-form, 'submit')">¿Proyectos en Go?</button>
|
||||
onclick="document.getElementById('chat-input').value='¿Qué proyectos en Go ha hecho?'; htmx.trigger('#chat-form', 'submit');">¿Proyectos en Go?</button>
|
||||
<button type="button" class="chat-chip"
|
||||
_="on click set #chat-input.value to '¿Cuántos años de experiencia tiene?'
|
||||
then call htmx.trigger(#chat-form, 'submit')">¿Años de experiencia?</button>
|
||||
onclick="document.getElementById('chat-input').value='¿Cuántos años de experiencia tiene?'; htmx.trigger('#chat-form', 'submit');">¿Años de experiencia?</button>
|
||||
<button type="button" class="chat-chip"
|
||||
_="on click set #chat-input.value to '¿En qué empresas ha trabajado?'
|
||||
then call htmx.trigger(#chat-form, 'submit')">¿Empresas?</button>
|
||||
onclick="document.getElementById('chat-input').value='¿En qué empresas ha trabajado?'; htmx.trigger('#chat-form', 'submit');">¿Empresas?</button>
|
||||
<button type="button" class="chat-chip"
|
||||
_="on click set #chat-input.value to '¿Conoce React?'
|
||||
then call htmx.trigger(#chat-form, 'submit')">¿Conoce React?</button>
|
||||
onclick="document.getElementById('chat-input').value='¿Conoce React?'; htmx.trigger('#chat-form', 'submit');">¿Conoce React?</button>
|
||||
<button type="button" class="chat-chip"
|
||||
_="on click set #chat-input.value to '¿Qué certificaciones tiene?'
|
||||
then call htmx.trigger(#chat-form, 'submit')">¿Certificaciones?</button>
|
||||
onclick="document.getElementById('chat-input').value='¿Qué certificaciones tiene?'; htmx.trigger('#chat-form', 'submit');">¿Certificaciones?</button>
|
||||
{{else}}
|
||||
<button type="button" class="chat-chip"
|
||||
_="on click set #chat-input.value to 'What Go projects has he built?'
|
||||
then call htmx.trigger(#chat-form, 'submit')">Go projects?</button>
|
||||
onclick="document.getElementById('chat-input').value='What Go projects has he built?'; htmx.trigger('#chat-form', 'submit');">Go projects?</button>
|
||||
<button type="button" class="chat-chip"
|
||||
_="on click set #chat-input.value to 'How many years of experience?'
|
||||
then call htmx.trigger(#chat-form, 'submit')">Years of experience?</button>
|
||||
onclick="document.getElementById('chat-input').value='How many years of experience?'; htmx.trigger('#chat-form', 'submit');">Years of experience?</button>
|
||||
<button type="button" class="chat-chip"
|
||||
_="on click set #chat-input.value to 'What companies has he worked at?'
|
||||
then call htmx.trigger(#chat-form, 'submit')">Companies?</button>
|
||||
onclick="document.getElementById('chat-input').value='What companies has he worked at?'; htmx.trigger('#chat-form', 'submit');">Companies?</button>
|
||||
<button type="button" class="chat-chip"
|
||||
_="on click set #chat-input.value to 'Does he know React?'
|
||||
then call htmx.trigger(#chat-form, 'submit')">Knows React?</button>
|
||||
onclick="document.getElementById('chat-input').value='Does he know React?'; htmx.trigger('#chat-form', 'submit');">Knows React?</button>
|
||||
<button type="button" class="chat-chip"
|
||||
_="on click set #chat-input.value to 'What certifications?'
|
||||
then call htmx.trigger(#chat-form, 'submit')">Certifications?</button>
|
||||
onclick="document.getElementById('chat-input').value='What certifications?'; htmx.trigger('#chat-form', 'submit');">Certifications?</button>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user