mirror of https://github.com/mashirozx/sakura.git
153 lines
2.7 KiB
SCSS
153 lines
2.7 KiB
SCSS
|
|
/*
|
|
Default theme for BotUI
|
|
*/
|
|
|
|
// you can use your own font.
|
|
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
|
|
|
|
$font-family: 'Open Sans', sans-serif;
|
|
$primary-color: #919292;
|
|
|
|
.botui-container {
|
|
font-size: 14px;
|
|
background-color: #fff;
|
|
font-family: $font-family;
|
|
}
|
|
|
|
.botui-messages-container {
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
.botui-actions-container {
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
.botui-message {
|
|
min-height: 30px;
|
|
}
|
|
|
|
.botui-message-content {
|
|
padding: 7px 13px;
|
|
border-radius: 15px;
|
|
color: darken($primary-color, 22%);
|
|
background-color: lighten($primary-color, 35%);
|
|
|
|
&.human { // if human = true
|
|
color: lighten($primary-color, 40%);
|
|
background-color: $primary-color;
|
|
}
|
|
|
|
&.text {
|
|
line-height: 1.3;
|
|
}
|
|
&.loading {
|
|
background-color: rgba(206,206,206,0.50);
|
|
line-height: 1.3;
|
|
text-align: center;
|
|
}
|
|
&.embed {
|
|
padding: 5px;
|
|
border-radius: 5px;
|
|
}
|
|
}
|
|
|
|
.botui-message-content-link {
|
|
color: $primary-color;
|
|
}
|
|
|
|
.botui-actions-text-input {
|
|
border: 0;
|
|
outline: none;
|
|
border-radius: 0;
|
|
padding: 5px 7px;
|
|
font-family: $font-family;
|
|
background-color: transparent;
|
|
color: darken($primary-color, 22%);
|
|
border-bottom: 1px solid $primary-color;
|
|
}
|
|
|
|
.botui-actions-text-submit {
|
|
color: #fff;
|
|
width: 30px;
|
|
padding: 5px;
|
|
height: 30px;
|
|
line-height: 1;
|
|
border-radius: 50%;
|
|
border: 1px solid $primary-color;
|
|
background: darken($primary-color, 10%);
|
|
}
|
|
|
|
.botui-actions-buttons-button {
|
|
border: 0;
|
|
color: #fff;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
padding: 7px 15px;
|
|
border-radius: 4px;
|
|
font-family: $font-family;
|
|
background: darken($primary-color, 10%);
|
|
box-shadow: 2px 3px 4px 0 rgba(0,0,0,.25);
|
|
}
|
|
|
|
/*
|
|
Animation of messages
|
|
For details on how to change, see: https://vuejs.org/v2/guide/transitions.html
|
|
*/
|
|
|
|
|
|
.slide-fade-enter-active {
|
|
transition: all .3s ease;
|
|
}
|
|
|
|
.slide-fade-enter,
|
|
.slide-fade-leave-to {
|
|
opacity: 0;
|
|
transform: translateX(-10px);
|
|
}
|
|
|
|
/*
|
|
Animation of loading dots
|
|
*/
|
|
.dot {
|
|
width: .5rem;
|
|
height: .5rem;
|
|
border-radius: .5rem;
|
|
display: inline-block;
|
|
background-color: $primary-color;
|
|
&:nth-last-child(1) {
|
|
margin-left: .3rem;
|
|
animation: loading .6s .3s linear infinite;
|
|
}
|
|
&:nth-last-child(2) {
|
|
margin-left: .3rem;
|
|
animation: loading .6s .2s linear infinite;
|
|
}
|
|
&:nth-last-child(3) {
|
|
animation: loading .6s .1s linear infinite;
|
|
}
|
|
}
|
|
|
|
@keyframes loading {
|
|
0 {
|
|
transform: translate(0, 0);
|
|
background-color: lighten($primary-color, 10%);
|
|
}
|
|
|
|
25% {
|
|
transform: translate(0, -3px);
|
|
}
|
|
50% {
|
|
transform: translate(0, 0px);
|
|
background-color: lighten($primary-color, 10%);
|
|
}
|
|
75% {
|
|
transform: translate(0, 3px);
|
|
}
|
|
100% {
|
|
transform: translate(0, 0px);
|
|
}
|
|
}
|