You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

179 lines
3.2 KiB
CSS

@font-face {
font-family: 'Space Grotesk Regular';
font-style: normal;
font-weight: normal;
src: local('Space Grotesk Regular'), url('./font/SpaceGrotesk-Regular.woff') format('woff');
}
@font-face {
font-family: 'Space Grotesk Medium';
font-style: normal;
font-weight: normal;
src: local('Space Grotesk Medium'), url('./font/SpaceGrotesk-Medium.woff') format('woff');
}
* {
font-family: 'Space Grotesk Regular', sans-serif;
font-size: 1.2rem;
line-height: 1.3;
letter-spacing: 0.02em;
font-feature-settings: "ss01";
}
b {
font-family: 'Space Grotesk Medium';
}
.chat {
width: 100%;
height: calC(100% - 3rem);
position: fixed;
left: 0;
top: 0;
overflow-y: scroll;
}
.actions {
position: fixed;
bottom: 0;
display: block;
width: 100%;
height: 10%;
max-height: 2.5rem;
min-height: 60px;
}
.actions input {
height: 100%;
display: block;
float: left;
width: 79.89%;
outline: 0;
border: 0;
background-color: #fff;
padding: 0 1%;
text-indent: 10px;
}
.actions button {
height: 100%;
float: right;
width: 18%;
background-color:#032FC5;
border:1px solid #0055b3;
display:inline-block;
cursor:pointer;
color:#ffffff;
padding:16px 31px;
text-decoration:none;
}
.actions button:hover {
background-color:#0055b3;
}
.messages {
padding: 1%;
height: 30px;
max-width: 40rem;
}
.messages div {
max-width: 60%;
display: block;
margin: 10px;
padding: 10px;
border-radius: 7px;
}
.messages .bot {
text-align: left;
margin-right: auto;
background: #032FC5;
color: #E5EDE2;
width: max-content;
min-width: 30%;
}
.messages .bot a {
color: white;
}
.messages .self {
margin-left: auto;
color: black;
background: #DDD;
width: max-content;
min-width: 30%;
}
@media all and (max-width: 767px) {
* {
font-size: 1.1rem;
}
.chat {
height: calc(100% - 60px);
}
.messages div {
max-width: 90%;
}
.actions button {
padding: 0;
}
.actions input {
text-indent: 10px;
}
}
body {
width: 100wh;
height: 90vh;
background: linear-gradient(-45deg, #ffebd1, #e5eaf9, #fff);
background-size: 400% 400%;
-webkit-animation: Gradient 30s ease infinite;
-moz-animation: Gradient 30s ease infinite;
animation: Gradient 30s ease infinite;
}
@-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
@-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
@keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}