dan/ester-klient
1
0
Fork 0
mirror of https://github.com/danbulant/ester-klient synced 2026-05-24 12:35:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chat styles

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

6
view/index.html
View file

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

49
view/main.css
View file

@ -47,22 +47,50 @@ body {
.chat--content { .chat--content {
height: calc(100% - 20px); height: calc(100% - 20px);
backdrop-filter: blur(5px);
overflow-y: auto;
overflow-x: hidden;
} }
.chat--divider { .chat--divider {
color: grey; color: white;
text-align: center; 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 { .chat--response-content {
color: white;
}
.chat--response {
color: white; 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 { .chat--input {
backdrop-filter: blur(5px);
width: 100%; width: 100%;
height: 20px; height: 20px;
color: white; color: white;
@ -86,3 +114,12 @@ body {
h1, h2, h3 { h1, h2, h3 {
font-family: Tuffy; font-family: Tuffy;
} }
::-webkit-scrollbar {
width: 0.7em;
}
::-webkit-scrollbar-thumb {
background-color: rgb(80, 80, 80);
border-radius: 15px;
outline: none;
}