213 lines
4.5 KiB
Plaintext
213 lines
4.5 KiB
Plaintext
/* Dark Mode Styles for Customer Service Chat */
|
|
|
|
/* 暗色模式下的背景和文字颜色 */
|
|
body.dark-mode {
|
|
/* background-color: #1a1a1a !important; */
|
|
color: #e0e0e0 !important;
|
|
}
|
|
|
|
body.dark-mode .visitorBody {
|
|
background-color: #1a1a1a !important;
|
|
}
|
|
|
|
/* 聊天容器 */
|
|
body.dark-mode .chatCenter {
|
|
/* background-color: #1a1a1a !important; */
|
|
}
|
|
|
|
/* 聊天标题区域 */
|
|
body.dark-mode .chatEntTitle {
|
|
background-color: #2d2d2d !important;
|
|
color: #e0e0e0 !important;
|
|
border-bottom: 1px solid #3d3d3d !important;
|
|
}
|
|
|
|
/* 聊天内容区域 */
|
|
body.dark-mode .chatEntBox {
|
|
/* background-color: #1a1a1a !important; */
|
|
}
|
|
|
|
body.dark-mode .chatVisitorPage {
|
|
/* background-color: #1a1a1a !important; */
|
|
}
|
|
|
|
body.dark-mode .chatBox {
|
|
/* background-color: #1a1a1a !important; */
|
|
}
|
|
|
|
/* 聊天消息气泡 - 客服消息 */
|
|
body.dark-mode .chatContent {
|
|
background-color: #2d2d2d !important;
|
|
color: #e0e0e0 !important;
|
|
border: 1px solid #3d3d3d !important;
|
|
}
|
|
|
|
/* 聊天消息气泡 - 访客消息 */
|
|
body.dark-mode .chatBoxMe .chatContent {
|
|
background-color: #1e5a8e !important;
|
|
color: #ffffff !important;
|
|
border: 1px solid #2d7ab8 !important;
|
|
}
|
|
|
|
/* 时间戳 */
|
|
body.dark-mode .chatTime {
|
|
color: #888888 !important;
|
|
}
|
|
|
|
body.dark-mode .chatTime span {
|
|
background-color: #2d2d2d !important;
|
|
color: #888888 !important;
|
|
}
|
|
|
|
/* 通知消息 */
|
|
body.dark-mode .chatNotice {
|
|
/* background-color: #2d2d2d !important; */
|
|
}
|
|
|
|
body.dark-mode .chatNoticeContent {
|
|
color: #4a9eff !important;
|
|
}
|
|
|
|
/* 输入框区域 */
|
|
body.dark-mode .chatBoxSend {
|
|
background-color: #2d2d2d !important;
|
|
border-top: 1px solid #3d3d3d !important;
|
|
}
|
|
|
|
/* Element UI 输入框暗色模式 */
|
|
body.dark-mode .el-textarea__inner {
|
|
background-color: #1a1a1a !important;
|
|
border-color: #3d3d3d !important;
|
|
color: #e0e0e0 !important;
|
|
}
|
|
|
|
body.dark-mode .el-textarea__inner:focus {
|
|
border-color: #4a9eff !important;
|
|
}
|
|
|
|
body.dark-mode .el-textarea__inner::placeholder {
|
|
color: #666666 !important;
|
|
}
|
|
|
|
/* 图标按钮 */
|
|
body.dark-mode .iconBtn {
|
|
color: #b0b0b0 !important;
|
|
}
|
|
|
|
body.dark-mode .iconBtn:hover {
|
|
color: #4a9eff !important;
|
|
}
|
|
|
|
body.dark-mode .visitorIconBtns {
|
|
color: #b0b0b0 !important;
|
|
}
|
|
|
|
body.dark-mode .visitorIconBtns:hover {
|
|
color: #4a9eff !important;
|
|
}
|
|
|
|
/* 表情面板 */
|
|
body.dark-mode .faceBox {
|
|
background-color: #2d2d2d !important;
|
|
border: 1px solid #3d3d3d !important;
|
|
}
|
|
|
|
body.dark-mode .faceBoxList li {
|
|
border-color: #3d3d3d !important;
|
|
background-color: #1a1a1a !important;
|
|
}
|
|
|
|
body.dark-mode .faceBoxList li:hover {
|
|
background-color: #3d3d3d !important;
|
|
}
|
|
|
|
/* 公告区域 */
|
|
body.dark-mode .chatArticle {
|
|
background-color: #2d2d2d !important;
|
|
border-top: 1px solid #3d3d3d !important;
|
|
}
|
|
|
|
body.dark-mode .hotQuestionTitle {
|
|
color: #e0e0e0 !important;
|
|
border-bottom: 1px solid #3d3d3d !important;
|
|
}
|
|
|
|
body.dark-mode .allNotice {
|
|
color: #b0b0b0 !important;
|
|
}
|
|
|
|
/* Element UI 组件暗色模式 */
|
|
body.dark-mode .el-button--primary {
|
|
background-color: #1e5a8e !important;
|
|
border-color: #2d7ab8 !important;
|
|
}
|
|
|
|
body.dark-mode .el-button--primary:hover {
|
|
background-color: #2d7ab8 !important;
|
|
}
|
|
|
|
body.dark-mode .el-button--primary.is-disabled {
|
|
background-color: #3d3d3d !important;
|
|
border-color: #3d3d3d !important;
|
|
color: #666666 !important;
|
|
}
|
|
|
|
/* 链接 */
|
|
body.dark-mode a {
|
|
color: #4a9eff !important;
|
|
}
|
|
|
|
body.dark-mode a:hover {
|
|
color: #70b4ff !important;
|
|
}
|
|
|
|
/* 滚动条 */
|
|
body.dark-mode ::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
body.dark-mode ::-webkit-scrollbar-track {
|
|
background-color: #1a1a1a;
|
|
}
|
|
|
|
body.dark-mode ::-webkit-scrollbar-thumb {
|
|
background-color: #3d3d3d;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
body.dark-mode ::-webkit-scrollbar-thumb:hover {
|
|
background-color: #4d4d4d;
|
|
}
|
|
|
|
/* Badge */
|
|
body.dark-mode .el-badge__content {
|
|
background-color: #4a9eff !important;
|
|
}
|
|
|
|
/* Message 组件 */
|
|
body.dark-mode .el-message {
|
|
background-color: #2d2d2d !important;
|
|
border-color: #3d3d3d !important;
|
|
color: #e0e0e0 !important;
|
|
}
|
|
|
|
body.dark-mode .el-message--warning {
|
|
background-color: #5a4e1e !important;
|
|
border-color: #7a6e3e !important;
|
|
}
|
|
|
|
/* Tooltip */
|
|
body.dark-mode .el-tooltip__popper {
|
|
background-color: #2d2d2d !important;
|
|
color: #e0e0e0 !important;
|
|
}
|
|
|
|
body.dark-mode .el-tooltip__popper[x-placement^=top] .popper__arrow {
|
|
border-top-color: #2d2d2d !important;
|
|
}
|
|
|
|
body.dark-mode .el-tooltip__popper[x-placement^=bottom] .popper__arrow {
|
|
border-bottom-color: #2d2d2d !important;
|
|
}
|