File size: 1,406 Bytes
400f123 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
:root {
--zen-accent-h: 220; /* Change for color theme */
--zen-accent-s: 95%;
--zen-accent-l: 55%;
--zen-font: "Inter", "Segoe UI", Arial, sans-serif;
}
html, body, * {
font-family: var(--zen-font);
font-size: 1.08em;
}
.gr-button-primary {
background: hsl(var(--zen-accent-h) var(--zen-accent-s) var(--zen-accent-l));
color: white;
border: none;
}
.gr-button-primary:hover { filter: brightness(1.1); }
/* ───── Chatbot bubbles ───── */
.gr-chatbot .message.user {
background: hsla(var(--zen-accent-h) var(--zen-accent-s) calc(var(--zen-accent-l) + 25%), .18);
color: #fff; /* ← NEW */
}
.gr-chatbot .message.bot {
background: hsla(var(--zen-accent-h) var(--zen-accent-s) calc(var(--zen-accent-l) + 15%), .13);
color: #fff; /* ← NEW */
}
/* Make *everything* inside the bubbles white (links, bold, code, etc.) */
.gr-chatbot .message.user *,
.gr-chatbot .message.bot * {
color: #fff !important; /* ← NEW */
}
.gr-image, .gr-plot {
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0,0,0,.07);
margin-top: 6px;
}
.gr-textbox, .gr-chatbot {
border-radius: 8px;
}
body {
background: #f7fafe;
}
/* Blue header text – affects only the element with id="zen-header" */
#zen-header { color: #1e6cff; } /* adjust the hex if you want a different blue */ |