jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CASH-313 chat styling.

Browse source
This commit is contained in:
Bryan Mauger 2025-05-05 10:04:55 -04:00
parent 68e49b26bb
commit 61a975a715
1 changed files with 54 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
src/digital-components/salesforce-webchat/salesforce-webchat.vue
View file

@ -51,7 +51,7 @@ export default {
}; };
</script> </script>
<style type="text/css"> <style lang="scss">
.salesforce-webchat { .salesforce-webchat {
.salesforce-chat-button { .salesforce-chat-button {
width: 1.5rem; width: 1.5rem;
@ -65,52 +65,78 @@ export default {
} }
} }
/* .embeddedServiceHelpButton .helpButton .uiButton { .dockableContainer.showDockableContainer .sidebarBody {
background-color: red; button {
font-family: "Arial", sans-serif; background: #0070d1;
color: #fff;
&:hover {
background: #06577c!important;
}
}
.embeddedServiceSidebarFormField .uiInput input {
border: 1px solid #8e9292;
}
.embeddedServiceSidebarButton.uiButton--inverse .label {
color: #fff;
text-decoration: underline;
}
.embeddedServiceLiveAgentStateChatAvatar.isLightningOutContext .agentIconColor0 {
background-color: #0070d1;
}
.embeddedServiceSidebarFormField .uiInput .uiLabel-left {
font-family: AvertaRegular;
color: #727676;
}
.form-element__help {
color: #db0020;
}
.embeddedServiceSidebarFormField .uiInput input {
border: 1px solid #06577c;
}
.embeddedServiceLiveAgentStateChatInputFooter
.footerMenuWrapper
.footer-menu-items
.slds-dropdown__item
> a {
padding-left: 0;
max-width: 100%;
display: flex;
justify-content: center;
}
.embeddedServiceLiveAgentStateChatInputFooter .footerMenuWrapper .footer-menu-items a {
margin: 0 auto;
}
.embeddedServiceSidebarButton.uiButton--inverse:not(:disabled):focus {
background-color: #0070d1;
}
} }
.embeddedServiceHelpButton .helpButton .uiButton:focus {
outline: 1px solid #167cac;
} */
.embeddedServiceHelpButton .helpButton .uiButton { .embeddedServiceHelpButton .helpButton .uiButton {
background-color: #0070d1 !important; background-color: #0070d1 !important;
} }
.modalContainer.sidebarMinimized.layout-docked.embeddedServiceSidebar .embeddedServiceSidebarMinimizedDefaultUI.helpButton, .modalContainer.sidebarMinimized.layout-docked.embeddedServiceSidebar
.modalContainer.sidebarMinimized.layout-docked.embeddedServiceSidebar .sidebarHeader.minimizedContainer.embeddedServiceSidebarMinimizedDefaultUI { .embeddedServiceSidebarMinimizedDefaultUI.helpButton,
.modalContainer.sidebarMinimized.layout-docked.embeddedServiceSidebar
.sidebarHeader.minimizedContainer.embeddedServiceSidebarMinimizedDefaultUI {
background-color: #0070d1; background-color: #0070d1;
border: 1px solid #0070d1; border: 1px solid #0070d1;
} }
.dockableContainer.showDockableContainer .chatHeaderBranding, .dockableContainer.showDockableContainer .chatHeaderBranding {
.dockableContainer.showDockableContainer .sidebarBody .embeddedServiceLiveAgentStateChatAvatar.isLightningOutContext .agentIconColor0 {
background-color: #0070d1; background-color: #0070d1;
} }
.dockableContainer.showDockableContainer, .dockableContainer.showDockableContainer {
.dockableContainer.showDockableContainer .sidebarBody .embeddedServiceSidebarFormField .uiInput .uiLabel-left {
font-family: AvertaRegular; font-family: AvertaRegular;
color: #727676; color: #727676;
} }
.dockableContainer.showDockableContainer span.required, .dockableContainer.showDockableContainer span.required {
.dockableContainer.showDockableContainer .sidebarBody .form-element__help {
color: #db0020; color: #db0020;
} }
.dockableContainer.showDockableContainer .sidebarBody button { .dockableContainer.showDockableContainer .sidebarBody button:hover {
background: linear-gradient(270deg, #0070d1 0%, #003d58 100%);
color: #fff;
}
.dockableContainer.showDockableContainer .sidebarBody .embeddedServiceSidebarFormField .uiInput input {
border: 1px solid #8e9292;
} }
.dockableContainer.showDockableContainer .sidebarBody .embeddedServiceSidebarButton.uiButton--inverse .label {
color: #fff;
text-decoration: underline;
}
</style> </style>