chat styles

This commit is contained in:
danbulant 2019-12-24 12:35:25 +01:00
parent bee04e1339
commit 31e2e12f39
2 changed files with 49 additions and 8 deletions

View file

@ -33,10 +33,14 @@
Dnes
</div>
<div class="chat--sent">
Ahoj!
<div class="chat--sent-content">
Ahoj!
</div>
</div>
<div class="chat--response">
Ahoj
<div class="chat--response-content">
Ahoj!
</div>
</div>
</div>
<div class="chat--form">

View file

@ -47,22 +47,50 @@ body {
.chat--content {
height: calc(100% - 20px);
backdrop-filter: blur(5px);
overflow-y: auto;
overflow-x: hidden;
}
.chat--divider {
color: grey;
color: white;
text-align: center;
margin-top: 15px;
margin-bottom: 5px;
}
.chat--sent::after, .chat--response::after {
content: " ";
display: block;
height: 0;
clear: both;
}
.chat--sent-content {
color: black;
position: relative;
right: 0;
margin-left: auto;
display: inline-block;
width: auto;
float: right;
padding: 10px;
background: rgb(255, 255, 255);
border-radius: 15px 15px 0 15px;
}
.chat--sent {
color: white;
}
.chat--response {
.chat--response-content {
color: white;
position: relative;
left: 0;
display: inline-block;
width: auto;
float: left;
padding: 10px;
background: rgb(0, 204, 255);
border-radius: 15px 15px 15px 0;
}
.chat--input {
backdrop-filter: blur(5px);
width: 100%;
height: 20px;
color: white;
@ -85,4 +113,13 @@ body {
h1, h2, h3 {
font-family: Tuffy;
}
::-webkit-scrollbar {
width: 0.7em;
}
::-webkit-scrollbar-thumb {
background-color: rgb(80, 80, 80);
border-radius: 15px;
outline: none;
}