mirror of
https://github.com/AstrBotDevs/AstrBot
synced 2026-07-16 01:40:15 +08:00
fix(dashboard): improve ChatInput dark mode styling and placeholder visibility
- Use semi-transparent dark background in input container - Add backdrop blur and glow effects - Fix placeholder text color in dark mode
This commit is contained in:
@@ -14,7 +14,7 @@
|
||||
border: isDark ? 'none' : '1px solid #e0e0e0',
|
||||
borderRadius: '24px',
|
||||
boxShadow: isDark ? 'none' : '0px 2px 2px rgba(0, 0, 0, 0.1)',
|
||||
backgroundColor: isDark ? '#2d2d2d' : 'transparent',
|
||||
backgroundColor: isDark ? 'rgba(15, 15, 22, 0.6)' : 'transparent',
|
||||
position: 'relative',
|
||||
}"
|
||||
>
|
||||
@@ -579,6 +579,20 @@ defineExpose({
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Dark mode input container glass */
|
||||
:deep(.input-container) {
|
||||
background: rgba(15, 15, 22, 0.6) !important;
|
||||
backdrop-filter: blur(16px) saturate(1.2) !important;
|
||||
border: 1px solid rgba(0, 242, 255, 0.08) !important;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3) !important;
|
||||
}
|
||||
|
||||
/* Fix placeholder visibility in dark mode */
|
||||
.chat-textarea::placeholder {
|
||||
color: rgba(228, 225, 230, 0.35) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.input-area {
|
||||
padding: 16px;
|
||||
background-color: transparent;
|
||||
|
||||
@@ -28,7 +28,10 @@
|
||||
<div
|
||||
class="message-bubble user-bubble"
|
||||
:class="{ 'has-audio': hasAudio(msg.content.message) }"
|
||||
:style="{ backgroundColor: 'rgb(var(--v-theme-chatMessageBubble))' }"
|
||||
:style="{
|
||||
backgroundColor: 'var(--v-theme-chatMessageBubble)',
|
||||
color: 'rgba(228, 225, 230, 0.9) !important',
|
||||
}"
|
||||
>
|
||||
<!-- 遍历 message parts -->
|
||||
<template
|
||||
@@ -182,7 +185,13 @@
|
||||
</v-icon>
|
||||
</v-avatar>
|
||||
<div class="bot-message-content">
|
||||
<div class="message-bubble bot-bubble">
|
||||
<div
|
||||
class="message-bubble bot-bubble"
|
||||
:style="{
|
||||
backgroundColor: 'var(--v-theme-chatAssistantBubble)',
|
||||
color: 'rgba(228, 225, 230, 0.9) !important',
|
||||
}"
|
||||
>
|
||||
<!-- Loading state -->
|
||||
<div v-if="msg.content.isLoading" class="loading-container">
|
||||
<span class="loading-text">{{ tm("message.loading") }}</span>
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
<template #prepend>
|
||||
<img
|
||||
:src="
|
||||
getPlatformIcon(platformTemplates[item.raw].type)
|
||||
getPlatformIcon(platformTemplates[item.raw]?.type)
|
||||
"
|
||||
style="
|
||||
width: 32px;
|
||||
@@ -543,6 +543,7 @@ import ConfigPage from "@/views/ConfigPage.vue";
|
||||
export default {
|
||||
name: "AddNewPlatform",
|
||||
components: { AstrBotConfig, AstrBotCoreConfigWrapper, ConfigPage },
|
||||
emits: ["update:show", "show-toast", "refresh-config"],
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
|
||||
@@ -233,8 +233,8 @@ const emitDeleteSource = (source) => emit("delete-provider-source", source);
|
||||
}
|
||||
|
||||
.provider-source-list-item--active {
|
||||
background-color: #e8f0fe;
|
||||
border: 1px solid rgba(var(--v-theme-primary), 0.25);
|
||||
background-color: rgba(var(--v-theme-primary), 0.1) !important;
|
||||
border: 1px solid rgba(var(--v-theme-primary), 0.2) !important;
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
|
||||
Reference in New Issue
Block a user