| 1 |
- #cb-container{font-size:16px;width:100%;height:100%;overflow:hidden;}#cb-container ::-webkit-scrollbar{width:5px;height:3px;border-left:0;background:rgba(0,0,0,0.1)}#cb-container ::-webkit-scrollbar-track{background:none}#cb-container ::-webkit-scrollbar-thumb{background:#6C6C6C;border-radius:0}#cb-container *:focus{outline:none;inline:none}#cb-container *{box-sizing:border-box}#cb-flow{width:100%;height:100vh;overflow-y:auto;overflow-x:hidden}#cb-flow>.cb-inner{padding-top:100%;margin:0 20px}#cb-input{position:absolute;bottom:0;width:100%;text-align:center;height:77px}#cb-input #cb-input-container{display:block;margin:10px}#cb-input input{width:100%;display:block;box-shadow:0 0 1px rgba(58,58,58,0.5);border-radius:40px;font-size:1em;padding:19px 60px 19px 30px;height:56px;color:rgba(34,34,34,0.6);border-style:none;transition:box-shadow 0.75s cubic-bezier(0.215, 0.61, 0.355, 1),color 0.75s cubic-bezier(0.215, 0.61, 0.355, 1),transform 375ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s,opacity 375ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s}#cb-input input:focus{box-shadow:0 0 30px rgba(0,0,0,0.2)}#cb-input button{float:right;width:30px;height:30px;margin-top:-53px;margin-right:30px;border-width:2px;border-color:#D9D9D9;border-style:solid;border-image:none;background-color:#fff;color:#D9D9D9;border-radius:100px;transition:background-color 0.75s cubic-bezier(0.215, 0.61, 0.355, 1);cursor:pointer}.cb-segment{clear:both}.cb-segment.cb-bot .cb-icon,.cb-segment.cb-bot .cb-bubble{float:left}.cb-segment.cb-human .cb-icon,.cb-segment.cb-human .cb-bubble-input,.cb-segment.cb-human .bubble-ctn-human{float:right}.cb-icon{display:block;width:40px;height:40px;border-radius:100px}.cb-bubble.human{float:right}.cb-bot .cb-icon{background:url("./assets/Icon-Robot.svg") no-repeat;background-position:center center;background-color:#71609b;margin-right:10px}.cb-human .cb-icon{background:url("./assets/Icon-Human.svg") no-repeat;background-position:9px 9px;background-color:#75FABF;margin-left:10px}.cb-bubble{font-family:Helvetica,Arial,sans-serif;color:#3A3A3A;border-radius:100px}.cb-bubble.bot{background-color:#E6E6E6;color:#3A3A3A;border-radius:100px}.cb-bubble-type-select .cb-bubble.bot,.cb-bubble-type-select .cb-bubble.human{background-color:transparent}.cb-bubble>.cb-inner{margin:0;padding:10px 10px 10px 10px}.cb-bubble p{padding:5px;margin:0;opacity:0;display:inline}.cb-segment hr{clear:both;display:blocK;visibility:hidden;width:100%;margin-top:10px}.cb-bot .cb-bubble{border-bottom-left-radius:0px}.cb-bubble .bubble-ctn-human{background-color:#fff;border-bottom-right-radius:0px;text-align:right;transform:translateX(0px);border:3px solid #75FABF;border-radius:2em;padding:10px}.cb-bubble .bubble-ctn-bot{padding:10px}.cb-waiting{width:70px;padding:5px}@keyframes wave{0%,60%,100%{transform:initial}30%{transform:translateY(-5px);background:#98979C}}.cb-waiting .circle{display:inline-block;width:11px;height:11px;background-color:#AFAFB2;border-radius:100px;padding:5px;animation:wave 1.3s ease-in-out infinite}.cb-waiting .circle:nth-child(1){margin-left:8px}.cb-waiting .circle:nth-child(2){animation-delay:-1.1s;margin-left:5px}.cb-waiting .circle:nth-child(3){animation-delay:-0.9s;margin-left:5px}.cb-choice{flex:1;display:inline-block;text-align:center;cursor:pointer;border:3px solid #75FABF;border-radius:2em;padding:20px;margin-left:10px;font-family:Helvetica,Arial,sans-serif;transition:all 0.75s cubic-bezier(0.215, 0.61, 0.355, 1)}.cb-choice:hover,.cb-choice.cb-active{background-color:#75FABF;color:#000;transform:translateY(3px)}.cb-choice:before{content:'';display:inline-block;height:0.75em;width:0.7em;background-color:#75FABF;border-radius:100px;margin-right:7px;transition:all 0.75s cubic-bezier(0.215, 0.61, 0.355, 1)}.cb-choice:hover:before,.cb-choice.cb-active:before{background-color:#fff}.cb-bubble-input{width:590px;background-color:#fbfbfb;padding:20px;border-radius:4px;margin-top:20px}.cb-bubble-input input{cursor:pointer;font-family:Helvetica,Arial,sans-serif;padding:10px 10px;color:#3A3A3A;margin:3px 0;border-style:none;border-radius:4px;transition:box-shadow 0.75s cubic-bezier(0.215, 0.61, 0.355, 1),color 0.75s cubic-bezier(0.215, 0.61, 0.355, 1),transform 375ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s,opacity 375ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s;background-color:#eee;width:100%}.cb-bubble-input input:focus{box-shadow:0 0 30px rgba(0,0,0,0.2)}.cb-bubble-input input::placeholder{font-family:Helvetica,Arial,sans-serif;color:#9a9a9a}.disabled{background-color:#fff;color:#9a9a9a;border:3px solid #D8D8D8}.disabled:before{background-color:#9a9a9a}.disabled:hover{transform:translateY(0);background-color:#fff;color:#9a9a9a}.disabled:hover:before{background-color:#9a9a9a}
|
