212 lines
6.4 KiB
CSS
212 lines
6.4 KiB
CSS
/* --- WhatsApp-ish palette --- */
|
|
:root {
|
|
/* Dark theme (WhatsApp-like) */
|
|
--wa-bg: #0b141a;
|
|
--wa-panel: #111b21;
|
|
--wa-incoming: #202c33; /* assistant (other person) */
|
|
--wa-outgoing: #005c4b; /* user (me) */
|
|
--wa-text: #e9edef;
|
|
--wa-incoming-text: var(--wa-text);
|
|
--wa-outgoing-text: var(--wa-text);
|
|
--wa-muted: #8696a0;
|
|
}
|
|
|
|
html[data-theme="light"] {
|
|
/* Light theme (WhatsApp-like) */
|
|
--wa-bg: #e9ecef;
|
|
--wa-panel: #ffffff;
|
|
--wa-incoming: #ffffff; /* assistant (other person) */
|
|
--wa-outgoing: #dcf8c6; /* user (me) */
|
|
--wa-text: #111b21;
|
|
--wa-incoming-text: var(--wa-text);
|
|
--wa-outgoing-text: var(--wa-text);
|
|
--wa-muted: #667781;
|
|
}
|
|
|
|
/* Use WA background/panel */
|
|
body { background: var(--wa-bg); color: var(--wa-text); }
|
|
.chat-box {
|
|
height: 60vh; overflow-y: auto;
|
|
background: var(--wa-panel);
|
|
border-radius: .75rem;
|
|
border: 1px solid rgba(0,0,0,0.1);
|
|
padding: 12px; /* a bit tighter */
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* Hide the old role pill if any remains */
|
|
.role-pill { display: none !important; }
|
|
|
|
/* Bubble base */
|
|
.msg {
|
|
max-width: 75%;
|
|
padding: 8px 10px 18px; /* extra space for time */
|
|
border-radius: 16px;
|
|
position: relative;
|
|
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
/* Incoming (assistant) looks like the person you're chatting with (left, grey/white) */
|
|
.msg.assistant {
|
|
background: var(--wa-incoming);
|
|
color: var(--wa-incoming-text);
|
|
margin-right: auto; /* left side */
|
|
border-top-left-radius: 4px; /* WA-ish cut */
|
|
}
|
|
|
|
/* Outgoing (user) looks like your messages (right, green) */
|
|
.msg.user {
|
|
background: var(--wa-outgoing);
|
|
color: var(--wa-outgoing-text);
|
|
margin-left: auto; /* right side */
|
|
border-top-right-radius: 4px; /* WA-ish cut */
|
|
}
|
|
|
|
/* Tiny time inside bubble, bottom-right */
|
|
.msg .time {
|
|
position: absolute;
|
|
right: 8px;
|
|
bottom: 4px;
|
|
font-size: 11px;
|
|
opacity: 0.8;
|
|
color: var(--wa-muted);
|
|
}
|
|
|
|
/* Bubble tails (simple triangles) */
|
|
.msg.assistant::after,
|
|
.msg.user::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
.msg.assistant::after {
|
|
left: -2px;
|
|
background: var(--wa-incoming);
|
|
clip-path: polygon(100% 0, 0 0, 0 100%);
|
|
filter: drop-shadow(0 1px 0 rgba(0,0,0,0.06));
|
|
}
|
|
|
|
.msg.user::after {
|
|
right: -2px;
|
|
background: var(--wa-outgoing);
|
|
clip-path: polygon(0 0, 100% 0, 100% 100%);
|
|
filter: drop-shadow(0 1px 0 rgba(0,0,0,0.06));
|
|
}
|
|
|
|
/* Keep header/buttons readable across themes */
|
|
.chat-wrap .d-flex.align-items-center.mb-3 { color: inherit; }
|
|
.text-secondary { color: var(--wa-muted) !important; }
|
|
html[data-theme="light"] #resetBtn.btn-outline-light,
|
|
html[data-theme="light"] #themeToggle.btn-outline-light {
|
|
color: var(--wa-text);
|
|
border-color: #cbd5e1;
|
|
}
|
|
|
|
/* --- Light theme overrides for header & buttons --- */
|
|
html[data-theme="light"] .chat-wrap .d-flex.align-items-center.mb-3 {
|
|
color: var(--text); /* ensures title text is dark */
|
|
}
|
|
|
|
html[data-theme="light"] .chat-wrap h1 {
|
|
color: var(--text);
|
|
}
|
|
|
|
html[data-theme="light"] #resetBtn.btn-outline-light,
|
|
html[data-theme="light"] #themeToggle.btn-outline-light {
|
|
color: var(--text);
|
|
border-color: var(--muted);
|
|
}
|
|
|
|
html[data-theme="light"] #resetBtn.btn-outline-light:hover,
|
|
html[data-theme="light"] #themeToggle.btn-outline-light:hover {
|
|
background-color: var(--muted);
|
|
color: #fff;
|
|
}
|
|
/* --- Light theme: make the navbar truly light --- */
|
|
html[data-theme="light"] .navbar {
|
|
background-color: #f8f9fa !important; /* light bg (like .bg-light) */
|
|
/* override Bootstrap navbar-dark CSS variables to dark text */
|
|
--bs-navbar-color: rgba(0,0,0,.65);
|
|
--bs-navbar-hover-color: rgba(0,0,0,.85);
|
|
--bs-navbar-active-color: rgba(0,0,0,1);
|
|
--bs-navbar-brand-color: rgba(0,0,0,.9);
|
|
--bs-navbar-toggler-border-color: rgba(0,0,0,.15);
|
|
/* dark “hamburger” icon on light bg */
|
|
--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
|
|
}
|
|
|
|
/* Optional: tighten brand + links for light theme (keeps consistency) */
|
|
html[data-theme="light"] .navbar .navbar-brand,
|
|
html[data-theme="light"] .navbar .nav-link {
|
|
color: var(--bs-navbar-color) !important;
|
|
}
|
|
html[data-theme="light"] .navbar .nav-link.active,
|
|
html[data-theme="light"] .navbar .nav-link:focus,
|
|
html[data-theme="light"] .navbar .nav-link:hover {
|
|
color: var(--bs-navbar-hover-color) !important;
|
|
}
|
|
|
|
|
|
/* --- Dark theme fixes for Bootstrap panels (card + accordion) --- */
|
|
html:not([data-theme="light"]) .card,
|
|
html:not([data-theme="light"]) .accordion,
|
|
html:not([data-theme="light"]) .accordion-item {
|
|
background-color: var(--wa-panel) !important;
|
|
color: var(--wa-text) !important;
|
|
border: 1px solid rgba(255,255,255,0.06) !important;
|
|
}
|
|
|
|
/* Accordion header button */
|
|
html:not([data-theme="light"]) .accordion-button {
|
|
background-color: var(--wa-panel) !important;
|
|
color: var(--wa-text) !important;
|
|
box-shadow: none !important;
|
|
border-bottom: 1px solid rgba(255,255,255,0.06) !important;
|
|
}
|
|
|
|
/* Collapsed state keeps same colors (Bootstrap otherwise goes light) */
|
|
html:not([data-theme="light"]) .accordion-button.collapsed {
|
|
background-color: var(--wa-panel) !important;
|
|
color: var(--wa-text) !important;
|
|
border-bottom-color: rgba(255,255,255,0.06) !important;
|
|
}
|
|
|
|
/* Accordion body */
|
|
html:not([data-theme="light"]) .accordion-body {
|
|
background-color: var(--wa-panel) !important;
|
|
color: var(--wa-text) !important;
|
|
}
|
|
|
|
/* The chevron icon (SVG background-image) needs contrast */
|
|
html:not([data-theme="light"]) .accordion-button::after {
|
|
filter: invert(1) opacity(0.7);
|
|
}
|
|
|
|
/* Inputs inside the card/accordion */
|
|
html:not([data-theme="light"]) .form-control {
|
|
background-color: var(--wa-incoming) !important;
|
|
color: var(--wa-text) !important;
|
|
border-color: rgba(255,255,255,0.08) !important;
|
|
}
|
|
html:not([data-theme="light"]) .form-control::placeholder {
|
|
color: var(--wa-muted) !important;
|
|
}
|
|
html:not([data-theme="light"]) .form-text {
|
|
color: var(--wa-muted) !important;
|
|
}
|
|
|
|
/* Outline buttons in dark context */
|
|
html:not([data-theme="light"]) .btn-outline-light {
|
|
color: var(--wa-text) !important;
|
|
border-color: rgba(255,255,255,0.25) !important;
|
|
}
|
|
html:not([data-theme="light"]) .btn-outline-light:hover {
|
|
background-color: rgba(255,255,255,0.12) !important;
|
|
}
|