txeo/cv-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: green theme for chat mascot, neutral back-to-top arrow

Browse Source 
- Chat uses --accent-green (#27ae60) matching CV's green theme:
  header, user bubbles, send button, chip hover, input focus
- Dark theme uses deeper greens (#166b3a header, #1e8c4c interactions)
- Back-to-top arrow changed from green to neutral gray (#555555)
  to avoid visual conflict with the mascot button
This commit is contained in:
juanatsap
2026-04-08 13:58:53 +01:00
parent e21418b80e
commit 8e93d2b893
2 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/04-interactive/_chat.css
+13 -13
View File
@@ -34,7 +34,7 @@
opacity: 1; opacity: 1;
transform: translateY(-3px); transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
background: var(--accent-blue, #0066cc); background: var(--accent-green, #27ae60);
} }
/* Icon swap: show mascot by default, close when active */ /* Icon swap: show mascot by default, close when active */
@@ -44,7 +44,7 @@
.chat-toggle-btn.mascot-active { .chat-toggle-btn.mascot-active {
opacity: 1; opacity: 1;
background: var(--accent-blue, #0066cc); background: var(--accent-green, #27ae60);
} }
.chat-toggle-btn.mascot-active .chat-icon-open { .chat-toggle-btn.mascot-active .chat-icon-open {
@@ -89,7 +89,7 @@
align-items: center; align-items: center;
gap: 8px; gap: 8px;
padding: 10px 14px; padding: 10px 14px;
background: var(--accent-blue, #0066cc); background: var(--accent-green, #27ae60);
color: #ffffff; color: #ffffff;
font-family: 'Quicksand', sans-serif; font-family: 'Quicksand', sans-serif;
font-size: 0.85rem; font-size: 0.85rem;
@@ -167,7 +167,7 @@
} }
.chat-user { .chat-user {
background: var(--accent-blue, #0066cc); background: var(--accent-green, #27ae60);
color: #fff; color: #fff;
align-self: flex-end; align-self: flex-end;
border-bottom-right-radius: 2px; border-bottom-right-radius: 2px;
@@ -243,9 +243,9 @@
} }
.chat-chip:hover { .chat-chip:hover {
background: var(--accent-blue, #0066cc); background: var(--accent-green, #27ae60);
color: #fff; color: #fff;
border-color: var(--accent-blue, #0066cc); border-color: var(--accent-green, #27ae60);
} }
/* ========================================================================== /* ==========================================================================
@@ -275,11 +275,11 @@
} }
.chat-input:focus { .chat-input:focus {
border-color: var(--accent-blue, #0066cc); border-color: var(--accent-green, #27ae60);
} }
.chat-send-btn { .chat-send-btn {
background: var(--accent-blue, #0066cc); background: var(--accent-green, #27ae60);
color: #fff; color: #fff;
border: none; border: none;
border-radius: 50%; border-radius: 50%;
@@ -295,7 +295,7 @@
} }
.chat-send-btn:hover { .chat-send-btn:hover {
background: #004d99; background: #1e8c4c;
} }
/* ========================================================================== /* ==========================================================================
@@ -332,7 +332,7 @@
} }
.theme-clean .chat-header { .theme-clean .chat-header {
background: #003d7a; background: #166b3a;
} }
.theme-clean .chat-agent { .theme-clean .chat-agent {
@@ -341,7 +341,7 @@
} }
.theme-clean .chat-user { .theme-clean .chat-user {
background: #004d99; background: #1e8c4c;
} }
.theme-clean .chat-error { .theme-clean .chat-error {
@@ -372,9 +372,9 @@
} }
.theme-clean .chat-chip:hover { .theme-clean .chat-chip:hover {
background: #004d99; background: #1e8c4c;
color: #fff; color: #fff;
border-color: #004d99; border-color: #1e8c4c;
} }
.theme-clean .chat-typing-dot { .theme-clean .chat-typing-dot {
static/css/04-interactive/_scroll-behavior.css
+2 -2
View File
@@ -45,12 +45,12 @@
opacity: 1; opacity: 1;
transform: translateY(-3px); transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
background: #27ae60; background: #555555;
} }
.back-to-top.at-bottom { .back-to-top.at-bottom {
opacity: 1; opacity: 1;
background: #27ae60; background: #555555;
} }
.back-to-top:active { .back-to-top:active {