Greasy Fork

新增豆包适配，请参考

} else if (/www.doubao.com/.test(location.href)) {
console.log("doubao - 修复颜色和换行问题");
GM_addStyle(`
/* 1. 定义全局动态宽度变量和颜色变量 */
:root {
--doubao-dynamic-width: min(calc(100vw - 40px), 2000px) !important;
--receive-bg-color: #E6F4EA !important; /* 淡绿色 */
--receive-border-color: #B2F0C6 !important;
--send-bg-color: #F0F8FF !important; /* 淡蓝色 (护眼) */
--send-border-color: #D6E4FF !important;
}

/* 2. 应用到整个聊天页面的居中容器 */
.container-SrVXPg {
--center-content-max-width: var(--doubao-dynamic-width) !important;
}

/* 3. 关键: 调整消息块的布局和样式 */
/* 3.1 接收消息 */
/* 使用更精确的选择器，定位到消息块的最外层flex容器 */
div[data-testid="receive_message"] > div.flex.flex-col.flex-grow {
align-self: flex-start !important; /* 左对齐 */
max-width: 95% !important; /* 最大宽度95% */
}
/* 为接收消息的气泡设置样式 */
div[data-testid="receive_message"] .container-QQkdo4 {
background-color: var(--receive-bg-color) !important;
border: 1px solid var(--receive-border-color) !important;
border-radius: 12px !important; /* 圆润的边角 */
padding: 12px 16px !important;
}

/* 3.2 发送消息 */
/* 使用更精确的选择器 */
div[data-testid="send_message"] > div.flex.flex-col.flex-grow {
align-self: flex-start !important; /* 左对齐 */
max-width: 95% !important; /* 最大宽度95% */
}
/* 为发送消息的气泡设置样式 */
div[data-testid="send_message"] .container-QQkdo4 {
background-color: var(--send-bg-color) !important; /* 淡绿色 */
border: 1px solid var(--send-border-color) !important;
border-radius: 12px !important;
padding: 12px 16px !important;
}

/* 4. 文字编辑窗口 */
#chat-route-layout {
--content-max-width: var(--doubao-dynamic-width) !important;
--chat-area-max-width: var(--doubao-dynamic-width) !important;
}
.chat-input-container, .input-container, .ProseMirror {
max-width: 100% !important;
width: 100% !important;
}
`);