221 lines
4.7 KiB
CSS
221 lines
4.7 KiB
CSS
/* Dark Mode Styles for Customer Service Chat - Deep Green Theme */
|
|
|
|
/* 暗色模式下的背景和文字颜色 */
|
|
body.dark-mode {
|
|
background-color: #1a3d35 !important;
|
|
color: #FFFFFF !important;
|
|
}
|
|
|
|
body.dark-mode .visitorBody {
|
|
/* background-color: #1E3838 !important; */
|
|
}
|
|
|
|
/* 聊天容器 */
|
|
body.dark-mode .chatCenter {
|
|
|
|
background-color: #1a3d35 !important;
|
|
/* background-color: red !important; */
|
|
}
|
|
|
|
/* 聊天标题区域 */
|
|
body.dark-mode .chatEntTitle {
|
|
background: linear-gradient(to right, #001E14 0%, #007C34 100%);
|
|
color: #FFFFFF !important;
|
|
border-bottom: 1px solid #355050 !important;
|
|
}
|
|
|
|
/* 聊天内容区域 */
|
|
body.dark-mode .chatEntBox {
|
|
background-color: #1a3d35 !important;
|
|
}
|
|
|
|
body.dark-mode .chatVisitorPage {
|
|
background-color: #1a3d35 !important;
|
|
}
|
|
|
|
body.dark-mode .chatBox {
|
|
background-color: #1a3d35 !important;
|
|
}
|
|
|
|
/* 聊天消息气泡 - 客服消息 */
|
|
body.dark-mode .chatContent {
|
|
background-color: #2D5050 !important;
|
|
color: #FFFFFF !important;
|
|
border: 1px solid #355858 !important;
|
|
}
|
|
|
|
/* 聊天消息气泡 - 访客消息 */
|
|
body.dark-mode .chatBoxMe .chatContent {
|
|
background-color: #246153 !important;
|
|
color: #FFFFFF !important;
|
|
border: 1px solid #246153 !important;
|
|
}
|
|
|
|
/* 消息发送状态 */
|
|
body.dark-mode .msg-status-sending { color: #7a9e9e; }
|
|
body.dark-mode .msg-status-failed { color: #ff6b6b; }
|
|
|
|
/* 时间戳 */
|
|
body.dark-mode .chatTime {
|
|
color: #A0BFBF !important;
|
|
}
|
|
|
|
body.dark-mode .chatTime span {
|
|
background-color: #2A4848 !important;
|
|
color: #A0BFBF !important;
|
|
}
|
|
|
|
/* 通知消息 */
|
|
body.dark-mode .chatNotice {
|
|
/* background-color: #2D4A4A !important; */
|
|
}
|
|
|
|
body.dark-mode .chatNoticeContent {
|
|
color: #fff !important;
|
|
background-color: #2D5050;
|
|
}
|
|
|
|
|
|
/* 输入框区域 */
|
|
body.dark-mode .chatBoxSend {
|
|
background-color: #065946 !important;
|
|
border-top: 1px solid #355050 !important;
|
|
}
|
|
|
|
/* Element UI 输入框暗色模式 */
|
|
body.dark-mode .el-textarea__inner {
|
|
background-color: rgba(0,0,0,0.2) !important;
|
|
border-color: #fff !important;
|
|
color: #FFFFFF !important;
|
|
}
|
|
|
|
body.dark-mode .el-textarea__inner:focus {
|
|
border-color: #507070 !important;
|
|
}
|
|
|
|
body.dark-mode .el-textarea__inner::placeholder {
|
|
color: #7A9999 !important;
|
|
}
|
|
|
|
/* 图标按钮 */
|
|
body.dark-mode .iconBtn {
|
|
color: #FFFFFF !important;
|
|
}
|
|
|
|
body.dark-mode .iconBtn:hover {
|
|
color: #FFB84D !important;
|
|
}
|
|
|
|
body.dark-mode .visitorIconBtns {
|
|
color: #FFFFFF !important;
|
|
}
|
|
|
|
body.dark-mode .visitorIconBtns:hover {
|
|
color: #FFB84D !important;
|
|
}
|
|
|
|
/* 表情面板 */
|
|
body.dark-mode .faceBox {
|
|
background-color: #2A4848 !important;
|
|
border: 1px solid #355050 !important;
|
|
}
|
|
|
|
body.dark-mode .faceBoxList li {
|
|
border-color: #355050 !important;
|
|
background-color: #1E3838 !important;
|
|
}
|
|
|
|
body.dark-mode .faceBoxList li:hover {
|
|
background-color: #355050 !important;
|
|
}
|
|
|
|
/* 公告区域 */
|
|
body.dark-mode .chatArticle {
|
|
background-color: #27463f !important;
|
|
border-top: 1px solid #355050 !important;
|
|
}
|
|
|
|
body.dark-mode .hotQuestionTitle {
|
|
color: #FFFFFF !important;
|
|
border-bottom: 1px solid #355050 !important;
|
|
}
|
|
|
|
body.dark-mode .allNotice {
|
|
color: #A0BFBF !important;
|
|
}
|
|
|
|
/* Element UI 组件暗色模式 */
|
|
body.dark-mode .el-button--primary {
|
|
background-color: #ffc800 !important;
|
|
border-color: #ffc800 !important;
|
|
color: #000;
|
|
}
|
|
|
|
body.dark-mode .el-button--primary:hover {
|
|
background-color: #ffc800 !important;
|
|
}
|
|
|
|
body.dark-mode .el-button--primary.is-disabled {
|
|
opacity: 0.5;
|
|
color: #000 !important;
|
|
}
|
|
|
|
/* 链接 */
|
|
body.dark-mode a {
|
|
color: #FFB84D !important;
|
|
}
|
|
|
|
body.dark-mode a:hover {
|
|
color: #FFC870 !important;
|
|
}
|
|
|
|
/* 滚动条 */
|
|
body.dark-mode ::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
body.dark-mode ::-webkit-scrollbar-track {
|
|
background-color: #1E3838;
|
|
}
|
|
|
|
body.dark-mode ::-webkit-scrollbar-thumb {
|
|
background-color: #355050;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
body.dark-mode ::-webkit-scrollbar-thumb:hover {
|
|
background-color: #406060;
|
|
}
|
|
|
|
/* Badge */
|
|
body.dark-mode .el-badge__content {
|
|
background-color: #FFB84D !important;
|
|
}
|
|
|
|
/* Message 组件 */
|
|
body.dark-mode .el-message {
|
|
background-color: #2A4848 !important;
|
|
border-color: #355050 !important;
|
|
color: #FFFFFF !important;
|
|
}
|
|
|
|
body.dark-mode .el-message--warning {
|
|
background-color: #6A5A3A !important;
|
|
border-color: #8A7A5A !important;
|
|
}
|
|
|
|
/* Tooltip */
|
|
body.dark-mode .el-tooltip__popper {
|
|
background-color: #2A4848 !important;
|
|
color: #FFFFFF !important;
|
|
}
|
|
|
|
body.dark-mode .el-tooltip__popper[x-placement^=top] .popper__arrow {
|
|
border-top-color: #2A4848 !important;
|
|
}
|
|
|
|
body.dark-mode .el-tooltip__popper[x-placement^=bottom] .popper__arrow {
|
|
border-bottom-color: #2A4848 !important;
|
|
}
|