These are just some examples for you to play around with, hopefully, it leads to something amazing!!


#qre{
    background: url("https://succint.eu/cover.jpg");
    background-size: cover;
}


html{
    overflow: hidden;
    bottom: 0px;
    position: fixed;
    left: 0px;
}


.input--inner{
    border-radius: 1px 10px 1px 10px;
}


.input-error{
    width: 90%;
    margin-left: 5%;
}


.quriobotWidgetButton, .quriobotWidgetPopup--button{
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0px 10px 1px 0px;
}


#arrow--icon::before,.input--button:before{
    border-radius:0px;
}


#close #close--button{
    background-color:#cccccc;
}


#toolbar--inner{
    box-shadow:none;
}


textarea {
    box-shadow: 0 0 10px rgba(0,0,0,0.04);

}


.bot--body, .bot--bubble.isCold .bot--body {
    box-shadow: 0 0 40px rgba(0,0,0,0.1);
    border-radius: 1px 10px 1px 10px;
}


.answer--body
{
    box-shadow: 0 0 40px rgba(0,0,0,0.1);
    border-radius: 1px 10px 1px 10px;
}


#quriobotWidgetContainer{
    max-width:100% !important;
}


.panel--autocomplete .panel--main li{
    cursor:pointer;
}


.dot--a:before, .dot--b:before, .dot--c:before{
    height:2px;
    width:4px;
    border-radius: 1px 2px 1px 2px;
}


.large--button, .done--button {
    border-radius: 5px 10px 5px 10px;
    height:100%;
    right:0px;
}


.panel--optionsInner.hasScroll .panel--arrow .arrow:before {
    height: 12px;
    width: 12px;
    border-bottom: 3px solid #d4d7d9;
    border-right: 3px solid #d4d7d9;
    border-radius: 0px;
}



Fonts: If you want to add a custom font to your bot you will need to add the source of that font to the script, as using @import does not work due to security reasons. The following snippet can be added to the Bot CSS to enable the 'Fira Sans' font in the bot:

/* cyrillic-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Fira Sans Regular'), local('FiraSans-Regular'), url(https://fonts.gstatic.com/s/firasans/v9/va9E4kDNxMZdWfMOD5VvmojLazX3dGTP.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Fira Sans Regular'), local('FiraSans-Regular'), url(https://fonts.gstatic.com/s/firasans/v9/va9E4kDNxMZdWfMOD5Vvk4jLazX3dGTP.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Fira Sans Regular'), local('FiraSans-Regular'), url(https://fonts.gstatic.com/s/firasans/v9/va9E4kDNxMZdWfMOD5Vvm4jLazX3dGTP.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Fira Sans Regular'), local('FiraSans-Regular'), url(https://fonts.gstatic.com/s/firasans/v9/va9E4kDNxMZdWfMOD5VvlIjLazX3dGTP.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Fira Sans Regular'), local('FiraSans-Regular'), url(https://fonts.gstatic.com/s/firasans/v9/va9E4kDNxMZdWfMOD5VvmIjLazX3dGTP.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Fira Sans Regular'), local('FiraSans-Regular'), url(https://fonts.gstatic.com/s/firasans/v9/va9E4kDNxMZdWfMOD5VvmYjLazX3dGTP.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Fira Sans Regular'), local('FiraSans-Regular'), url(https://fonts.gstatic.com/s/firasans/v9/va9E4kDNxMZdWfMOD5Vvl4jLazX3dA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
    font-family: 'Fira Sans', sans-serif !important;
}

.bot--body {
  font-size:1.6rem;
  color: #626262;
} 

The source for this font can be found on: https://fonts.googleapis.com/css?family=Fira%20Sans



The CSS above is all added to this demo bot: https://quriobot.com/qb/qbtests/CSS-demo


If you want to control the width of the Centered bot:


.quriobotWidgetContainer.position--center{
    max-width: calc(50% - 20px);
    min-width: 520px;
}




Need more help or looking for inspiration? Join the Quriobot community!

Quriobot
Friendly & Fun
Interact & Convert