go-websockets-talk/demo/static/css/style.css

254 lines
3.6 KiB
CSS

2020-09-02 05:15:57 +07:00
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;0,900;1,400&display=swap');
body {
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
#snackbar {
visibility: hidden;
min-width: 250px;
margin-left: -125px;
background-color: #4D5359;
color: #BBC4FF;
text-align: center;
border-radius: 4px;
padding: 16px;
position: fixed;
z-index: 2;
left: 50%;
bottom: 30px;
font-size: 15px;
}
#snackbar.snackshow {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.lhs {
width: calc(100% - 300px);
display: flex;
flex-direction: column-reverse;
background-color: #39363F;
}
.rhs {
width: calc(300px - 24px);
background-color: #28272D;
padding: 12px;
color: #eeeeee;
}
.messages {
overflow: auto;
max-height: calc(100vh - 128px);
flex-grow: 1;
}
.messages::-webkit-scrollbar {
width: 8px;
}
.messages::-webkit-scrollbar-track {
background: #322F37;
border-radius: 12px;
}
.messages::-webkit-scrollbar-thumb {
background: #504D56;
border-radius: 12px;
}
.messages::-webkit-scrollbar-thumb:hover {
background: #5C5766;
}
/* */
.chat {
height: 64px;
padding: 32px;
}
.chat-inner {
height:64px;
display: flex;
align-items: center;
}
#chatI {
height: 64px;
width: 100%;
padding: 0 12px;
font-size: 20px;
color: #eeeeee;
border: none;
border-radius: 6px 0 0 6px;
background: #28272D;
}
#chatI:focus {
outline: none;
}
#chatI::placeholder {
color: #908D9B;
}
#chatB {
height: 64px;
padding: 0;
width: 128px;
font-size: 24px;
color: #000;
border: none;
border-radiuS: 0 6px 6px 0;
background: #8EFFD6;
}
i {
font-size: 22px;
transition: color 0.25s;
color: #AAB3FF;
}
i:hover {
color: #EAF0CE;
}
/* Chat Messages */
.message {
margin: 32px 32px;
}
.server-message {
color: #908D9B;
font-style: italic;
font-size: 21px;
}
.author {
color: #fcfcfc;
font-weight: 700;
display: inline-block;
margin-right: 8px;
}
.author.self {
color: #8EFFD6;
}
.timestamp {
display: inline-block;
font-weight: 400;
font-size: 14px;
color: #7D7A87;
}
.content {
color: #eee;
margin-top: 2px;
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #00000088;
animation-name: animatetop;
animation-duration: 0.6s;
}
.modal-content {
color: #eeeeee;
position: relative;
background-color: #39363F;
margin: auto;
padding: 18px;
padding-bottom: 36px;
border-radius: 4px;
width: 60%;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.6s;
}
.modal-content h1 {
padding: 18px 0;
}
#nickI {
height: 48px;
padding: 0 12px;
font-size: 16px;
color: #eeeeee;
border: none;
border-radius: 6px;
background: #28272D;
}
#nickI:focus {
outline: none;
}
#nickI::placeholder {
color: #908D9B;
}
#nickB {
height: 48px;
padding: 0;
width: 96px;
font-size: 18px;
color: #000;
border: none;
border-radiuS: 6px;
background: #8EFFD6;
}
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@-webkit-keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@-webkit-keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
@keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}