|
|
| Line 1: |
Line 1: |
| − | #chat-container
| |
| − | #chat-input
| |
| − | #file-input
| |
| − | <style>
| |
| − | html,
| |
| − | body {
| |
| − | background-color: hsl(0, 0%, 8%);
| |
| − | // margin: 0; // Go fixed
| |
| − | // font-size: 0; // Fix white-space issues if present.
| |
| − | // height: 100vh; // Go fixed
| |
| − | user-select: none;
| |
| − | }
| |
| | | | |
| − | // For centering
| |
| − | #chat-container {
| |
| − | display: flex;
| |
| − | justify-content: center;
| |
| − | align-items: center;
| |
| − | }
| |
| − |
| |
| − | #chat-input {
| |
| − | position: fixed;
| |
| − | bottom: 10px;
| |
| − | height: 40px;
| |
| − | width: 500px;
| |
| − | background-color: hsl(0, 0%, 14%);
| |
| − | border-radius: 6px;
| |
| − | overflow: hidden;
| |
| − |
| |
| − | &:before,
| |
| − | &:after {
| |
| − | content: '';
| |
| − | display: block;
| |
| − | position: absolute;
| |
| − | top: 12px;
| |
| − | bottom: 12px;
| |
| − | background-color: hsla(0, 0%, 22%, 0.4);
| |
| − | }
| |
| − | // Chat input
| |
| − | &:before {
| |
| − | cursor: text;
| |
| − | left: 52px;
| |
| − | width: 40%;
| |
| − | border-radius: 2px;
| |
| − | }
| |
| − | // Emote picker
| |
| − | &:after {
| |
| − | cursor: pointer;
| |
| − | right: 10px;
| |
| − | width: 16px;
| |
| − | border-radius: 8px;
| |
| − | }
| |
| − | #file-input {
| |
| − | cursor: pointer;
| |
| − | display: block;
| |
| − | border-right: 2px solid hsl(0, 0%, 16%);
| |
| − | position: absolute;
| |
| − | top: 2px;
| |
| − | left: 2px;
| |
| − | bottom: 2px;
| |
| − | width: 36px;
| |
| − | transition: background-color 60ms;
| |
| − |
| |
| − | &:hover {
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | bottom: 0;
| |
| − | width: 40px;
| |
| − | background-color: hsl(0, 0%, 28%);
| |
| − | border-right: 0;
| |
| − | transition: background-color 120ms;
| |
| − | }
| |
| − | &:before,
| |
| − | &:after {
| |
| − | content: '';
| |
| − | display: block;
| |
| − | position: absolute;
| |
| − | background-color: hsl(0, 0%, 22%);
| |
| − | }
| |
| − | &:before {
| |
| − | top: 30%;
| |
| − | bottom: 30%;
| |
| − | left: 50%;
| |
| − | width: 2px;
| |
| − | margin-left: -1px;
| |
| − | }
| |
| − | &:after {
| |
| − | left: 30%;
| |
| − | right: 30%;
| |
| − | top: 50%;
| |
| − | height: 2px;
| |
| − | margin-top: -1px;
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .chat {
| |
| − | position: fixed;
| |
| − | bottom: 60px;
| |
| − | width: 500px;
| |
| − | display: inline-block;
| |
| − | }
| |
| − |
| |
| − | .line-container {
| |
| − | overflow: hidden;
| |
| − | border-radius: 6px;
| |
| − | max-height: 0px;
| |
| − | opacity: 0;
| |
| − | transform: translateX(-300px) scale(0.2);
| |
| − | transition: margin-bottom 200ms, max-height 500ms, opacity 100ms, transform 250ms;
| |
| − | transition-timing-function: ease-out;
| |
| − |
| |
| − |
| |
| − | &:not(:last-child) {
| |
| − | margin-bottom: 10px;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .line {
| |
| − | padding: 10px;
| |
| − | background-color: hsl(0, 0%, 14%);
| |
| − |
| |
| − | & > div {
| |
| − | display: inline-block;
| |
| − | vertical-align: top;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .profile-img {
| |
| − | cursor: pointer;
| |
| − | border-radius: 6px;
| |
| − | width: 60px;
| |
| − | height: 60px;
| |
| − | background-color: hsl(0, 0%, 22%);
| |
| − | margin-right: 10px;
| |
| − | }
| |
| − |
| |
| − | .body {
| |
| − | // background-color: black;
| |
| − |
| |
| − | .name,
| |
| − | .text {
| |
| − | border-radius: 2px;
| |
| − | background-color: hsl(0, 0%, 28%);
| |
| − | height: 16px;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .name {
| |
| − | width: 100px;
| |
| − | margin-bottom: 10px;
| |
| − | position: relative;
| |
| − | cursor: pointer;
| |
| − |
| |
| − | &:after {
| |
| − | content: '';
| |
| − | display: block;
| |
| − | border-radius: 2px;
| |
| − | background-color: hsla(0, 0%, 22%, 0.4);
| |
| − | height: 16px;
| |
| − | width: 50px;
| |
| − | position: absolute;
| |
| − | right: -60px;
| |
| − | transition: 100ms;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .profile-img:hover + .body .name:after,
| |
| − | .name:hover:after {
| |
| − | background-color: hsla(0, 0%, 22%, 1);
| |
| − | width: 100px;
| |
| − | right: -110px;
| |
| − | }
| |
| − |
| |
| − | .text {
| |
| − | &:not(:last-child) {
| |
| − | margin-bottom: 10px;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .img {
| |
| − | }
| |
| − |
| |
| − | .rich-body {
| |
| − | margin-left: 14px;
| |
| − | margin-top: 36px;
| |
| − | position: relative;
| |
| − |
| |
| − | &:before {
| |
| − | content: '';
| |
| − | display: block;
| |
| − | position: absolute;
| |
| − | top: -26px;
| |
| − | left: -14px;
| |
| − | bottom: 0;
| |
| − | width: 4px;
| |
| − | background-color: inherit;
| |
| − | }
| |
| − | &:after {
| |
| − | content: '';
| |
| − | display: block;
| |
| − | position: absolute;
| |
| − | height: 16px;
| |
| − | width: 200px;
| |
| − | top: -26px;
| |
| − | background-color: inherit;
| |
| − | border-radius: 2px;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .img,
| |
| − | .rich-body {
| |
| − | width: 300px;
| |
| − | height: 300px;
| |
| − | cursor: pointer;
| |
| − | border-radius: 6px;
| |
| − | background-color: hsl(0, 0%, 20%);
| |
| − | }
| |
| − |
| |
| − | .profile-img,
| |
| − | .name,
| |
| − | .text,
| |
| − | .img,
| |
| − | .rich-body {
| |
| − | opacity: 0;
| |
| − | transform: translateY(20px);
| |
| − | transition: 200ms;
| |
| − | }
| |
| − | </style>
| |
