lighter bubble color (less distract when reading)

This commit is contained in:
Xuan Son Nguyen 2024-11-07 14:20:22 -04:00
parent 4a0d28efb7
commit 64ac28984d

View file

@ -29,6 +29,12 @@
@apply cursor-pointer opacity-0 group-hover:opacity-100 hover:shadow-md; @apply cursor-pointer opacity-0 group-hover:opacity-100 hover:shadow-md;
} }
.chat-screen { max-width: 900px; } .chat-screen { max-width: 900px; }
/* because the default bubble color is quite dark, we will make a custom one using bg-base-300 */
.chat-bubble-base-300 {
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
@apply bg-base-300 text-base-content;
}
</style> </style>
</head> </head>
@ -127,7 +133,7 @@
}"> }">
<div :class="{ <div :class="{
'chat-bubble markdown': true, 'chat-bubble markdown': true,
'chat-bubble-primary': msg.role === 'user', 'chat-bubble-base-300': msg.role !== 'user',
}"> }">
<!-- textarea for editing message --> <!-- textarea for editing message -->
<template v-if="editingMsg && editingMsg.id === msg.id"> <template v-if="editingMsg && editingMsg.id === msg.id">