Spaces:
Sleeping
Sleeping
@mixin size($w, $h) { | |
width: $w; | |
height: $h; | |
} | |
@mixin bdrs($bdrs) { | |
border-radius: $bdrs; | |
} | |
%center { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
} | |
%clearfix { | |
&::after { | |
content: ""; | |
display: block; | |
clear: both; | |
} | |
} | |
@keyframes ball { | |
0% { margin-top: 0; } | |
20% { margin-top: 3px; } | |
80% { margin-top: -5px; } | |
} | |
@keyframes pop { | |
0% { transform: scale(.6); } | |
30% { transform: scale(1.1); } | |
60% { transform: scale(.9); } | |
100% { transform: scale(1); } | |
} | |
body, html { | |
margin: 0; | |
height: 100%; | |
width: 100%; | |
} | |
html { | |
background: #bdc3c7; | |
background: -webkit-linear-gradient(to right bottom, #bdc3c7 , #2c3e50); | |
background: linear-gradient(to right bottom, #bdc3c7 , #2c3e50); | |
} | |
body { | |
font-family: 'Microsoft JhengHei', Arial, sans-serif; | |
background: url('https://www.transparenttextures.com/patterns/45-degree-fabric-light.png'); | |
letter-spacing: 1px; | |
} | |
.chat { | |
@extend %center; | |
@include size(300px, 80vh); | |
max-height: 500px; | |
@include bdrs(15px); | |
background-color: rgba(0, 0, 0, .5); | |
overflow: hidden; | |
} | |
.chat-title { | |
background-color: rgba(0, 0, 0, .3); | |
@extend %clearfix; | |
@include size(100%, 50px); | |
h2 { | |
margin: 10px 0; | |
padding: 0; | |
color: #f0f0f0; | |
font-weight: normal; | |
font-size: 16px; | |
display: inline-block; | |
line-height: 30px; | |
} | |
.avatar { | |
float: left; | |
margin: 10px; | |
padding: 0; | |
@include size(30px, 30px); | |
img { | |
@include bdrs(50%); | |
@include size(30px, 30px); | |
} | |
} | |
} | |
.messages { | |
@include size(100%, calc(100% - 90px)); | |
.messages-content { | |
@include size(100%, 100%); | |
overflow-y: auto; | |
box-sizing: border-box; | |
.message { | |
max-width: calc(100% - 76px); | |
padding: 8px; | |
margin: 8px 0 8px 12px; | |
@include bdrs(5px); | |
background-color: rgba(171, 188, 202, .1); | |
color: #e3e3e3; | |
float: left; | |
font-size: 13px; | |
position: relative; | |
word-break: break-all; | |
clear: both; | |
animation: pop .3s forwards; | |
.timestamp { | |
position: absolute; | |
right: -40px; | |
bottom: 0; | |
font-size: 12px; | |
color: #bababa; | |
} | |
&.personal { | |
float: right; | |
margin: 8px 12px 8px 0; | |
.timestamp { | |
right: auto; | |
left: -40px; | |
} | |
} | |
&.typing { | |
@include size(30px, 16px); | |
&::after { | |
content: ""; | |
@include bdrs(50%); | |
@include size(3px, 3px); | |
background-color: white; | |
@extend %center; | |
transform: translate(-50%, -50%); | |
animation: ball 1.2s infinite linear; | |
} | |
span { | |
@include size(3px, 3px); | |
@extend %center; | |
transform: translate(-50%, -50%); | |
&::before, &::after { | |
content: ""; | |
@include bdrs(50%); | |
@include size(3px, 3px); | |
position: absolute; | |
background-color: white; | |
animation: ball 1.2s infinite linear; | |
} | |
&::before { | |
left: 8px; | |
animation-delay: .3s; | |
} | |
&::after { | |
right: 8px; | |
animation-delay: -.3s; | |
} | |
} | |
} | |
} | |
} | |
} | |
.action-box { | |
background-color: rgba(0, 0, 0, .3); | |
@include size(100%, 40px); | |
@extend %clearfix; | |
.action-box-input, .action-box-submit { | |
box-sizing: border-box; | |
border: 0; | |
float: left; | |
} | |
.action-box-input { | |
@include size(calc(100% - 60px), 20px); | |
background-color: transparent; | |
resize: none; | |
color: white; | |
margin: 10px 0; | |
padding: 0 10px; | |
line-height: 20px; | |
font-size: 16px; | |
letter-spacing: 1px; | |
overflow: hidden; | |
&::-webkit-input-placeholder { | |
line-height: 20px; | |
font-size: 13px; | |
} | |
} | |
.action-box-submit { | |
@include size(60px, 40px); | |
background-color: rgba(189, 195, 199, .2); | |
color: white; | |
cursor: pointer; | |
} | |
} | |