You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
|
/* =========================================== */
/* ============== Chatbot (CB) ============== */
/* =========================================== */
.chatbot-container {}
/* ============== Chatbot Button (CBB) ============== */
.chatbot-button {
border-radius: 50%;
height: 80px;
width: 80px;
background-color: #A50350;
color:#ffffff;
transition: all 0.25s ease-in;
border: 0px;
}
.chatbot-button:hover {
background-color: #ccc;
cursor: pointer;
}
.chatbot-button:focus,
.chatbox-button:active {
outline: 0;
}
/* === Chatbot Button - Animation === */
.chatbot-button__anim-container {
height: 100%;
width: 100%;
transition: .5s;
justify-content: center;
position: relative;
cursor: pointer;
display: flex;
align-items: center;
}
.chatbot-button__anim-container img {
transition: .3s;
position: absolute;
font-size: 4em !important;
height: 50%;
width: 50%;
}
.chatbot-button__anim-container .chatbot-button__icon--opened {
transform: rotate(-135deg);
opacity: 0;
}
.chatbot-button__anim-container.morphed {
transform: rotate(135deg);
}
.chatbot-button__anim-container.morphed .chatbot-button__icon--opened {
opacity: 1;
}
.chatbot-button__anim-container.morphed .chatbot-button__icon--closed {
opacity: 0;
}
.chatbot-button__anim-container.small {
height: 2rem;
width: 2rem;
font-size: .5rem;
}
/* === Chatbot Button - Position === */
.chatbot-button[data-chatposition="inline"] {
position: static;
}
.chatbot-button[data-chatposition="br"] {
position: fixed;
bottom: 5%;
right: 3%;
}
.chatbot-button[data-chatposition="bl"] {
position: fixed;
bottom: 5%;
left: 3%;
}
.chatbot-button[data-chatposition="cr"] {
position: fixed;
top: 50%;
right: 3%;
transform: translateY(-50%);
}
.chatbot-button[data-chatposition="cl"] {
position: fixed;
top: 50%;
left: 3%;
transform: translateY(-50%);
}
.chatbot-button[data-chatposition="tr"] {
position: fixed;
top: 5%;
right: 3%;
}
.chatbot-button[data-chatposition="tl"] {
position: fixed;
top: 5%;
left: 3%;
}
/* ============== Chatbot Modal or Layer ============== */
/* === Chatbot - CHAT WIN POSITION === */
/* Data Attribut: chatwinposition
* br = Unten Rechts
* c = Mittig
* cr = Mittig Rechts
*/
/*
.chatbot-layer[data-chatwinposition="br"] .chatbot-layer__dialog.modal-dialog-centered {margin: 0 10px 0 auto;align-items: flex-end;}
.chatbot-layer[data-chatwinposition="c"] .chatbot-layer__dialog {margin: 0 auto;display: flex;align-items: center;}
.chatbot-layer[data-chatwinposition="cr"] .chatbot-layer__dialog {margin: 0 10px 0 auto;}
*/
/* === Chatbot Layer - CHAT SIZE === */
/* Data Attribut = chatsize
* s = Kompakt
* m = Medium
* l = Volle Display Größe
*/
.chatbot-layer {
display: flex;
align-items: center;
flex-direction: row;
}
.chatbot-layer[data-chatsize="s"] .chatbot-layer__dialog {
padding: 30px;
}
.chatbot-layer[data-chatsize="m"] .chatbot-layer__dialog {
max-width: 60%;
max-width: 1200px;
flex-basis: 60%;
}
.chatbot-layer[data-chatsize="l"] .chatbot-layer__dialog {
max-width: 100%;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
flex-basis: 100%;
}
.chatbot-layer[data-chatsize="l"] .chatbot-layer__dialog .chatbot-layer__content {
height: auto;
min-height: 100%;
border-radius: 0;
}
/* ============== Chatbot Layer (CBL) ============== */
.chatbot-layer {
box-shadow
|
