Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UHF-9584: Genesys-chat style fixes and hacks to mitigate issues when using the chat #694

Merged
merged 4 commits into from
Feb 19, 2024
Merged

UHF-9584: Genesys-chat style fixes and hacks to mitigate issues when using the chat #694

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
81ac827
UHF-9584: Genesys chat styling adjustments to minimize bugs caused by…
teroelonen Feb 15, 2024
98f42d5
UHF-9584: Few small adjustments more
teroelonen Feb 15, 2024
b9caa7c
UHF-9584: Add more small hacks for the genesys chat styles to mitigat…
teroelonen Feb 16, 2024
4bf2d9a
UHF-9584: Remove extra line-break
teroelonen Feb 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
168 changes: 91 additions & 77 deletions assets/css/genesys_chat.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,33 @@
.cx-webchat.cx-theme-helsinki-blue {
right: 20px !important;
width: 500px;
background-color: #ffffff;
color: #ffffff;
font: 400 normal normal 20px/1.3 Arial, sans-serif;
color: white;
font-size: 20px;
background-color: white;
right: 20px !important;
width: 500px;
}

.cx-webchat.cx-theme-helsinki-blue .cx-transcript {
padding: 0 24px;
}

.cx-webchat.cx-theme-helsinki-blue.cx-desktop .cx-transcript {
height: 500px !important;
}

.cx-webchat.cx-theme-helsinki-blue .cx-transcript > *:last-child {
padding-bottom: 88px;
}

.cx-webchat.cx-theme-helsinki-blue.cx-mobile .cx-transcript > *:last-child {
padding-bottom: 80px;
}

.cx-theme-helsinki-blue .cx-common-container .cx-titlebar {
align-items: center;
background-color: #0000bf;
min-height: 50px;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 50px;
}

.cx-theme-helsinki-blue .cx-common-container .cx-titlebar .cx-title {
Expand All @@ -25,15 +39,12 @@

.cx-theme-helsinki-blue .cx-message-group {
position: relative;
margin: 10px 0px 0px 5px;
}

.cx-theme-helsinki-blue .cx-message-group:last-child {
padding-bottom: 50px;
margin: 10px 0 0 5px;
}

.cx-theme-helsinki-blue .cx-webchat .cx-transcript .cx-message.cx-system {
margin: 0;
width: 100%;
}

.cx-theme-helsinki-blue .cx-webchat .cx-transcript .cx-message {
Expand All @@ -53,17 +64,20 @@
margin-top: 5px;
}

.cx-theme-helsinki-blue .cx-webchat .cx-transcript .cx-message.cx-system .cx-bubble,
.cx-theme-helsinki-blue .cx-bubble {
display: flex;
flex-direction: column;
background-color: #0000bf;
border-radius: 0.4em;
padding: 0.5em;
border-bottom-left-radius: 0.4em !important;
border-bottom-right-radius: 0.4em !important;
border-top-left-radius: 0.4em !important;
border-top-right-radius: 0.4em !important;
display: flex;
flex-direction: column;
padding: 0.5em;
}

.cx-theme-helsinki-blue .cx-webchat .cx-transcript .cx-message.cx-system .cx-bubble {
background-color: #4169e1;
padding: 0.5em;
}

.cx-theme-helsinki-blue .cx-webchat .cx-transcript .cx-message-group > .cx-message.cx-participant:last-child .cx-bubble,
Expand All @@ -75,38 +89,48 @@
}

.cx-theme-helsinki-blue .cx-webchat div.cx-input-container {
border: none !important;
position: absolute;
left: 0px;
right: 0px;
bottom: 2px;
display: flex !important;
background-color: #f4f4f4 !important;
max-height: 44px;
border: 4px solid #ffffff !important;
bottom: 0;
box-shadow: none;
padding: 0px !important;
display: flex !important;
left: 0;
margin: 0;
padding: 0 !important;
position: absolute;
right: 0;
width: 100%;
}

.cx-theme-helsinki-blue .cx-webchat div.cx-input-container .cx-textarea-cell {
position: relative;
border: none !important;
align-items: center;
background-color: transparent !important;
height: 100%;
border: none !important;
color: black;
height: 100%;
min-height: 55px;
position: relative;
width: 100%;
}

.cx-webchat .cx-menu,
.cx-theme-helsinki-blue .cx-menu-cell {
display: none;
}

.cx-theme-helsinki-blue .cx-webchat .cx-transcript .cx-message.cx-you {
display: flex;
justify-content: flex-end;
width: 100%;
}

.cx-theme-helsinki-blue .cx-webchat .cx-transcript .cx-message.cx-you,
.cx-theme-helsinki-blue .cx-webchat .cx-transcript .cx-message .cx-name {
color: white;
color: #ffffff;
}

.cx-theme-helsinki-blue svg {
fill: white;
fill: #ffffff;
}

.cx-theme-helsinki-blue .cx-bubble-arrow svg {
Expand All @@ -122,19 +146,14 @@
background-color: unset;
border: unset;
border-radius: unset;
color: unset;
margin: unset;
padding: unset;
color: unset;
}

.cx-theme-helsinki-blue .cx-webchat.cx-mobile .cx-message-input {
margin-top: 0px !important;
font-size: 0.9em !important;
}

.cx-theme-helsinki-blue .cx-webchat.cx-mobile div.cx-input-container {
max-height: 50px;
padding: unset;
margin-top: 0 !important;
}

.cx-theme-helsinki-blue .cx-webchat.cx-mobile .cx-body {
Expand All @@ -151,17 +170,17 @@

.cx-theme-helsinki-blue .cx-webchat.cx-mobile div.cx-input-container .cx-message-input {
max-height: unset;
overflow: scroll !important;
min-height: 30px;
padding: 0px 65px 0px 0px !important;
overflow: auto !important;
padding: 0 65px 0 0 !important;
}

.cx-theme-helsinki-blue #cx_chat_error_desc {
color: black;
}

.cx-theme-helsinki-blue .cx-webchat.cx-mobile div.cx-input-container .cx-input-focus {
bottom: 0px;
bottom: 0;
}

.cx-theme-helsinki-blue .cx-button-group.cx-buttons-window-control .cx-icon {
Expand All @@ -173,68 +192,63 @@
}

.cx-theme-helsinki-blue .cx-webchat div.cx-input-container .cx-message-input {
margin-bottom: 0;
min-height: 0;
padding: 14px 16px 27px 24px;
margin-bottom: 0px;
min-height: 55px !important;
/* height: 40px;
padding-top: 0px;
padding-bottom: 0px;
border-width: 0px;
max-height: 20px; */
}

.cx-theme-helsinki-blue .cx-webchat .cx-transcript .cx-message .cx-message-text {
word-break: break-word;
}

.cx-theme-helsinki-blue .cx-common-container .cx-buttons-window-control button {
width: 25px;
height: 25px;
width: 25px;
}

#chatAuthenticationElement,
#helfiChatAuthElementDone {
height: 50px;
align-items: center;
background-color: royalblue;
display: flex;
align-items: center;
justify-content: center;
font: 400 normal normal 16px/1.3 Arial, sans-serif;
height: 50px;
justify-content: center;
margin-top: -1px;
}

#chatAuthenticationElement a,
#helfiChatAuthElementDone a {
color: white;
color: #ffffff;
}

.gwc-chat-logo-helsinki {
width: 70px;
}

.cx-theme-helsinki-blue .cx-side-button-group {
bottom: 0;
-webkit-transform: unset;
bottom: 0;
z-index: 100 !important;
}

.cx-widget.cx-webchat-chat-button.cx-side-button.cx-theme-helsinki-blue {
background: none;
background-color: transparent !important;
background-position: bottom right !important;
display: flex;
background-repeat: no-repeat !important;
background-color: transparent !important;
width: 150px;
height: 114px;
background: none;
border: none;
margin: 0;
border-radius: 0;
box-shadow: none;
display: flex;
height: 114px;
margin: 0;
transition: none;
width: 150px;
}

@media only screen and (max-width: 575px) {
cx-widget.cx-webchat-chat-button.cx-side-button.cx-theme-helsinki-blue,
.cx-widget.cx-webchat-chat-button.cx-side-button.cx-theme-helsinki-blue,
.cx-widget.cx-webchat-chat-button.cx-side-button.cx-theme-helsinki-blue:hover {
width: 114px !important;
}
Expand Down Expand Up @@ -324,9 +338,9 @@
}

#cx_chat_end_question {
color: black;
margin-top: 4%;
text-align: center;
color: black;
}

.cx-theme-helsinki-blue .cx-button-group.cx-buttons-binary {
Expand All @@ -339,45 +353,45 @@
}

#gwc-chat-icon-iks-mobile {
width: 50px;
bottom: 58px;
box-shadow: unset;
cursor: pointer;
filter: invert(100%);
position: fixed;
bottom: 58px;
right: 5px;
filter: invert(100%);
width: 50px;
z-index: 99999999 !important;
box-shadow: unset;
}

.cx-theme-helsinki-blue .cx-form-wrapper {
display: none !important;
}

.cx-theme-helsinki-blue .cx-textarea-cell {
display: flex;
align-items: flex-end;
display: flex;
}

#cx_input {
padding: 12px !important;
margin: 0 !important;
flex: 6;
margin: 10px !important;
max-height: 60px;
padding: 0 !important;
position: relative;
max-height: 49px;
}

.cx-send.cx-icon.i18n svg {
width: 35px;
}

.cx-send.cx-icon.i18n {
position: relative;
align-items: center;
display: flex;
flex: 1;
right: auto;
height: 46px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
right: auto;
}

.cx-Agent .cx-avatar-wrapper {
Expand All @@ -392,25 +406,25 @@
}

.cx-message-text {
color: white;
color: #ffffff;
}

.cx-powered-by {
display: none;
}

.cx-widget.cx-common-container.cx-toast.cx-theme-helsinki-blue {
background-color: white;
background-color: #ffffff;
}

.cx-widget.cx-common-container.cx-toast.cx-theme-helsinki-blue .cx-titlebar,
.cx-widget.cx-common-container.cx-toast.cx-theme-helsinki-blue .cx-button-group.cx-buttons-binary {
color: white;
color: #ffffff;
}

.cx-title {
font-size: 0.9em !important;
font-family: "HelsinkiGroteskBlack", "Arimo-Bold", sans-serif;
font-size: 0.9em !important;
}

.cx-input-focus {
Expand Down
Loading