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.
1 lines
20 KiB
1 lines
20 KiB
/* =========================================== */
/* ============== 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: 0 -6px 99px -17px rgba(0, 0, 0, 0.68);
}
.chatbot-layer__dialog {
}
.chatbot-layer__content {
border: 0px !important;
}
/* === Chatbot Layer - Size === */
.modal-dialog.modal-md {
max-width: 680px;
}
/* Important part */
.modal-dialog {
overflow-y: initial !important;
}
.modal-body {
height: 550px;
height: 60vh;
overflow-y: auto;
padding: 40px;
}
.modal-content {
border: 0px;
}
/* ============== Chatbot - Header ============== */
.chatbot-header button{ color:#ffffff!Important;
}
.chatbot-header {
background:#A50350;
color:#ffffff!Important;
border-bottom:#A50350;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 8px 1rem;
border-bottom: 1px solid #dee2e6;
border-top-left-radius: calc(.3rem - 1px);
border-top-right-radius: calc(.3rem - 1px);
}
.chatbot-header__avatar img {
max-height: 50px;
}
.chatbot-header__title {
padding:14px 12px 6px 12px;
font-size:120%;
}
.chatbot-header__title h5 {
font-size:100%;
font-weight: bold;
color:#4a4a4a;
text-transform: none;
margin:0;
}
.chatbot-header .close {
float: right;
font-size: 2rem;
font-weight: 700;
line-height: 1;
color: #2980b9;
text-shadow: 0 1px 0 #fff;
opacity: 1;
padding: 0 !important;
margin: 0 !important;
}
/* ============== Chatbot - Footer ============== */
/* === Container === */
.chatbot-footer {
border-top: 3px solid #eaf0f6 !important;
}
.chatbot-footer__type-message {
width: 100%;
margin: 0;
padding: 15px 15px;
display:flex;
}
/* === Input Field === */
.chatbot__input {
flex-basis: 90%;
flex: auto;
outline: 0;
border: 0px solid #fff;
color: #000;
padding: 10px 60px 10px 20px;
background:#f3f3f3;
border-radius: .3rem;
transition: background 0.2s ease-in;
}
.chatbot__input:hover {
margin: 0;
border: 0px solid #ccc;
}
/* === Submit Button ===*/
.chatbot__submit {
outline: 0;
background: #A50350;
border: 1px solid #A50350;
color: #fff;
cursor: pointer;
font-size: 18px;
height: 46px;
width: 46px;
position: relative;
right: 15px;
-webkit-transition: 0.3s all ease;
-o-transition: 0.3s all ease;
transition: 0.3s all ease;
/* border-radius: 0 .3rem .3rem 0;*/
border-radius: 50%;
}
.chatbot__submit:hover {
background: #000;
border: 1px solid #000;
outline: 0;
}
.chatbot__submit:focus,
.chatbot__submit:active {
outline: 0;
}
.chatbot__submit i {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
padding-right: 2px;
}
/* ============== Chatbot - Body ============== */
.chatbot__body {}
.chatbot__body .chatbot__messages {
padding: 0;
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: flex-start;
}
.animation:last-child {
animation: fadein 0.25s;
animation-timing-function: all 200ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.is-ai .chatbot__message{
/* min-height:70px;
padding-right:44px;*/
}
/* ============== Chatbot - Spinner ============== */
.spinme-right {
display: inline-block;
padding: 15px 20px;
font-size: 14px;
border-radius: 30px;
line-height: 1.25em;
font-weight: 100;
opacity: 0.2;
}
.spinme-left {
display: inline-block;
padding: 15px 20px;
font-size: 14px;
color: #ccc;
border-radius: 30px;
line-height: 1.25em;
font-weight: 100;
opacity: 0.2;
}
.spinner {
margin: 0;
width: 100%;
text-align: center;
}
.spinner > div {
width: 10px;
height: 10px;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
background: rgba(0, 0, 0, 1);
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
0%,
80%,
100% {
-webkit-transform: scale(0)
}
40% {
-webkit-transform: scale(1.0)
}
}
@keyframes sk-bouncedelay {
0%,
80%,
100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}
/* ============== Chatbot - Speech Bubbles ============== **/
.bubble {
font-weight: 400;
min-width: 60%;
box-shadow: 0px 20px 13px -24px rgba(0, 0, 0, 0.6);
}
.bubble p {
margin: 0;
}
.bubble-chatbot a,
.bubble-chatbot a:link,
.bubble-chatbot a:visited {
text-decoration: underline;
color: #eaf0f6;
}
.bubble-chatbot a:hover {
text-decoration: none;
color: #fff;
}
.bubble-chatbot {
margin: 20px 30px 15px 0px;
border: 4px solid #A50350;
border-radius: 15px;
padding: 20px;
text-align: left;
color: #fff;
position: relative;
background: #A50350;
left: 0;
}
.bubble-chatbot h5{
color:#fff;
}
.bubble-chatbot:first-child {
margin: 0px 30px 10px 0px;
}
.bubble-chatbot .date {
color: #333;
}
.bubble-user {
margin: 20px 0px 20px 30px;
border: 4px solid #eaf0f6;
border-radius: 15px;
padding: 20px;
text-align: left;
color: #333;
position: relative;
background: #eaf0f6;
right: 0;
align-self: flex-end;
}
/* === Chatbot Answer - Selection === */
.chatbot-selection span {
background: #ffffff;
border: 2px solid #3a5571;
border-radius: 30px;
padding: 15px;
-webkit-box-shadow: 2px 4px 15px -5px rgba(186, 186, 186, 0.8);
-moz-box-shadow: 2px 4px 15px -5px rgba(186, 186, 186, 0.8);
box-shadow: 2px 4px 15px -5px rgba(186, 186, 186, 0.8);
transition: all 0.3s ease-in;
}
.chatbot-selection span:hover {
background: #3a5571;
color: #fff;
}
/* ============== Chatbot - Loader ============== */
.loader {
margin-bottom: -2px;
text-align: center;
opacity: 0.3;
}
.loader__dot {
display: inline-block;
vertical-align: middle;
width: 6px;
height: 6px;
margin: 0 1px;
background: white;
border-radius: 50px;
animation: loader 0.45s infinite alternate;
}
.loader__dot:nth-of-type(2) {
animation-delay: 0.15s;
}
.loader__dot:nth-of-type(3) {
animation-delay: 0.35s;
}
@keyframes loader {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-5px);
}
}
@keyframes fadein {
from {
opacity: 0;
margin-top: 10px;
margin-bottom: 0;
}
to {
opacity: 1;
margin-top: 0;
margin-bottom: 10px;
}
}
* {
box-sizing: border-box;
}
/*Loading */
#is-loading{text-align: center;min-width: 10%;}
/* ============== Chatbot - Wetter ============== */
h4.wtilo{color:#fff;font-size: 200%;}
.weatherBox {
padding: 2px;
}
.weatherBox img {
float: right;
}
.weatherBox .date {
font-weight: bold;
color:#fff;
}
.weatherBox .wi-stack {
font-size: 300%;
}
.weatherBox .iv-stack {
font-size: 500%;
}
.bubble-chatbot .weatherBox * {
background-color: transparent;
}
.weatherBox .kopf .iv-stack {
float: right;
margin: 0 0 25px 0;
}
.weatherBox .title {
font-weight: bold;
font-size: 1.5rem;
}
.weatherBox .date {
font-weight: bold;
font-size: 1.2rem;
}
.weatherBox .bez {
font-weight: bold;
}
.weatherBox .bez:after {
content: ":";
}
.weatherBox .rumpf > div {
display: flex;
}
.weatherBox .rumpf > div > .bez {
flex-basis: 25%;
}
.weatherBox .rumpf {
padding-bottom: 0px;
padding-top: 15px;
}
.weatherBox .forecasts {
padding-top: 20px;
border-top: 1px solid #ccc;
}
.weatherBox .forecasts .forecast {
border-bottom: 1px solid #ccc;
padding-bottom: 20px;
}
.weatherBox .forecasts .forecast:last-child {
border-bottom: 0px solid #ccc !important;
}
.weatherBox .forecasts .iv-stack {
float: left;
margin: 0 25px 0 0;
}
.weatherBox .forecasts .forecastDate {
font-weight: bold;
font-size: 1.2rem;
}
/* ============== Chatbot - Antwort | Buttons ============== */
.chatbot__message button,
.chatbot__message .btn-ortena {
border: 2px solid #2980b9;
padding: 10px 15px;
border-radius: 0.75rem;
background: #fff;
color: #000!important;
/* box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.2); */
/* font-weight: bold; */
transition: all 0.3s ease-in;
}
a.btn-ortena { text-decoration:none!important;}
.chatbot__message button:hover,
.chatbot__message .btn-ortena:hover,
.chatbot__message button:focus,
.chatbot__message .btn-ortena:focus {
background: #2980b9;
border: 2px solid #fff;
color: #fff!important;
}
.chatbot__message .btn-primary {
color: #2980b9;
background-color: #fff;
border:0px;
}
.chatbot_message .fflink{color:#eaf0f6;}
/* ============== Chatbot - Antwort | Details and Summary ============== */
summary {
background: #9DADBC;
padding: 10px 15px;
border: 2px solid #9DADBC;
color: #000;
border-radius: 0.75rem;
text-decoration: none;
}
summary:hover,
summary:focus {
background: #8CAFCE;
padding: 10px 15px;
border: 2px solid #8CAFCE;
color: #fff;
border-radius: 0.75rem;
text-decoration: none;
}
details {
padding-bottom: 15px;
}
/* ============== RSS ============== */
.rssBox .date{font-size: 130%;padding: 0;}
/* ============== Sonstiges ============== */
/* Gabi Server */
#main .chatbot__message a {
font-size: 100%;
}
.bubble-chatbot .card, .bubble-chatbot .card,.bubble-chatbot .card, .bubble-chatbot .card div{
border:none!important;
background:transparent!important;
}
.feedback {
width: 40px;
z-index: 2222;
position: absolute;
right: -48px;
bottom: 0px;
}
.chatbot__message .feedback__buttons button:hover{background:transparent;border:0px;}
.feedback__buttons{margin:0;padding:0;list-style: none;}
.feedback__buttons li{margin:0;padding:0;}
.feedback button {
margin-top:5px;
outline: 0;
background:#fff;
border: 0px solid #fff;
color: #2980b9;;
cursor: pointer;
font-size: 28px;
height: 42px;
width: 42px;
right: 16px;
/*border-radius: 50%;*/
transition: 0.3s ease all;
}
.feedback button:hover {
color: #000;
}
.feedback button i:hover{
/* transform: rotate(25deg);*/
}
.feedback__antwort{text-align:center;}
.feedback__antwort--positiv{}
.feedback__antwort--negativ{}
.feedback__button-wrapper{text-align: center;margin-top: 20px;}
.feedback__button{}
.bubble-chatbot a.feedback__button,
.bubble-chatbot a.feedback__button:link,
.bubble-chatbot a.feedback__button:visited {
text-decoration: none;
color: #000;
border:0px;
background: #fff;
transition: 0.3s ease all;
}
.bubble-chatbot a.feedback__button:after {
font-family: "FontAwesome"; font-weight: 400;font-size: 18px; content: "\f105";margin-left:10px;
}
.bubble-chatbot a.feedback__button:hover,
.bubble-chatbot a.feedback__button:focus{
background:#333;
color:#fff;
}
/* ============== Chatbot - CARD LAYOUT ============== **/
.chatbot-card {padding:0px;}
.chatbot-card__header{padding:0px;background-color: transparent;border:0;}
.chatbot-card__title{font-weight:bold;font-size:130%;}
.chatbot-card__body{padding: 1.25rem 0 0 0;}
.chatbot-card__thema{background:#333;padding:20px;font-weight: bold;border-bottom:3px solid #ccc;font-size:120%;}
.chatbot-card__selection{background:#333;color:#fff;}
.selection__items,
.accordion__items{list-style:none;padding:0;margin:0;}
.selection__item,
.accordion__item{border-bottom:1px solid #ccc;padding:0;margin:0;}
.chatbot-card__selection .selection__item .btn-ortena{position:relative;background:#333;color:#fff;padding:20px 20px;width:100%;border:0px;border-radius: 0px;text-align: left;}
.chatbot-card__accordion .accordion__item .btn-ortena{position:relative;background:#333;color:#fff;padding:20px 20px;width:100%;border:0px;border-radius: 0px;text-align: left;}
.chatbot-card__weitereInformationen{padding:20px;}
.selection__item .btn-ortena:hover,
.selection__item .btn-ortena:focus,
.selection__item .btn-ortena:active{border:0;background:#000;}
.chatbot-card__selection .selection__item .btn-ortena:after,
.chatbot-card__accordion .accordion__item .btn-ortena:after{position: absolute;right:15px; top:15px;font-family: "FontAwesome"; font-weight: 400;font-size: 24px;}
.chatbot-card__selection .selection__item .btn-ortena:after{content: "\f105";}
.chatbot-card__accordion .accordion__item .btn-ortena:after{content: "\f067";}
.chatbot-card__accordion .accordion__item:first-of-type{border-top:0px solid #ccc;}
.chatbot-card.chatbot-card--sbw{padding:0px;}
.chatbot__card--sbw-qa {}
.chatbot__card--feedback {}
.chatbot__card--chitchat {}
.chatbot__message details {margin-top:0px;}
.chatbot__message summary {border:0;border-radius: 0px;background:#333;color:#fff; -webkit-transition: 0.3s all ease;
-o-transition: 0.3s all ease;transition: 0.3s all ease;padding:15px;}
.chatbot__message summary:after {font-family: "FontAwesome"; font-weight: 400;font-size: 24px; content: "\f105";}
.chatbot__message summary:hover {background:#000;}
/* Sonstiges TEMP */
.chatbot__message img {
max-width: 400px;
height: auto;
}
.chatbot__message .odd,
.chatbot__message .even,
.rssBox .date {
color: #fff;
background-color: transparent !important;
}
.bubble {
max-width: 70%
}
.gcsxTitle, .osmTitle
{
font-size:medium!Important;
font-weight:normal!important;
}
|