V / style.css
Reaperxxxx's picture
Upload 3 files
32619da verified
.--dark-theme {
--chat-background: rgba(10, 14, 14, 0.95);
--chat-panel-background: #131719;
--chat-bubble-background: #14181a;
--chat-bubble-active-background: #171a1b;
--chat-add-button-background: #212324;
--chat-send-button-background: #8147fc;
--chat-text-color: #a3a3a3;
--chat-options-svg: #a3a3a3;
}
body {
background: url(https://images.unsplash.com/photo-1495808985667-ba4ce2ef31b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);
background-size: cover;
}
#chat {
background: var(--chat-background);
max-width: 600px;
margin: 25px auto;
box-sizing: border-box;
padding: 1em;
border-radius: 12px;
position: relative;
overflow: hidden;
}
#chat::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(https://images.unsplash.com/photo-1495808985667-ba4ce2ef31b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80) fixed;
z-index: -1;
}
#chat .btn-icon {
position: relative;
cursor: pointer;
}
#chat .btn-icon svg {
stroke: #FFF;
fill: #FFF;
width: 50%;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#chat .chat__conversation-board {
padding: 1em 0 2em;
height: calc(100vh - 55px - 2em - 25px * 2 - .5em - 3em);
overflow: auto;
}
#chat .chat__conversation-board__message-container.reversed {
flex-direction: row-reverse;
}
#chat .chat__conversation-board__message-container.reversed .chat__conversation-board__message__bubble {
position: relative;
}
#chat .chat__conversation-board__message-container.reversed .chat__conversation-board__message__bubble span:not(:last-child) {
margin: 0 0 2em 0;
}
#chat .chat__conversation-board__message-container.reversed .chat__conversation-board__message__person {
margin: 0 0 0 1.2em;
}
#chat .chat__conversation-board__message-container.reversed .chat__conversation-board__message__options {
align-self: center;
position: absolute;
left: 0;
display: none;
}
#chat .chat__conversation-board__message-container {
position: relative;
display: flex;
flex-direction: row;
}
#chat .chat__conversation-board__message-container:hover .chat__conversation-board__message__options {
display: flex;
align-items: center;
}
#chat .chat__conversation-board__message-container:hover .option-item:not(:last-child) {
margin: 0 0.5em 0 0;
}
#chat .chat__conversation-board__message-container:not(:last-child) {
margin: 0 0 2em 0;
}
#chat .chat__conversation-board__message__person {
text-align: center;
margin: 0 1.2em 0 0;
}
#chat .chat__conversation-board__message__person__avatar {
height: 35px;
width: 35px;
overflow: hidden;
border-radius: 50%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
ms-user-select: none;
position: relative;
}
#chat .chat__conversation-board__message__person__avatar::before {
content: "";
position: absolute;
height: 100%;
width: 100%;
}
#chat .chat__conversation-board__message__person__avatar img {
height: 100%;
width: auto;
}
#chat .chat__conversation-board__message__person__nickname {
font-size: 9px;
color: #484848;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: none;
}
#chat .chat__conversation-board__message__context {
max-width: 55%;
align-self: flex-end;
}
#chat .chat__conversation-board__message__options {
align-self: center;
position: absolute;
right: 0;
display: none;
}
#chat .chat__conversation-board__message__options .option-item {
border: 0;
background: 0;
padding: 0;
margin: 0;
height: 16px;
width: 16px;
outline: none;
}
#chat .chat__conversation-board__message__options .emoji-button svg {
stroke: var(--chat-options-svg);
fill: transparent;
width: 100%;
}
#chat .chat__conversation-board__message__options .more-button svg {
stroke: var(--chat-options-svg);
fill: transparent;
width: 100%;
}
#chat .chat__conversation-board__message__bubble span {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
display: inline-table;
word-wrap: break-word;
background: var(--chat-bubble-background);
font-size: 13px;
color: var(--chat-text-color);
padding: 0.5em 0.8em;
line-height: 1.5;
border-radius: 6px;
font-family: "Lato", sans-serif;
}
#chat .chat__conversation-board__message__bubble:not(:last-child) {
margin: 0 0 0.3em;
}
#chat .chat__conversation-board__message__bubble:active {
background: var(--chat-bubble-active-background);
}
#chat .chat__conversation-panel {
background: var(--chat-panel-background);
border-radius: 12px;
padding: 0 1em;
height: 55px;
margin: 0.5em 0 0;
}
#chat .chat__conversation-panel__container {
display: flex;
flex-direction: row;
align-items: center;
height: 100%;
}
#chat .chat__conversation-panel__container .panel-item:not(:last-child) {
margin: 0 1em 0 0;
}
#chat .chat__conversation-panel__button {
background: grey;
height: 20px;
width: 30px;
border: 0;
padding: 0;
outline: none;
cursor: pointer;
}
#chat .chat__conversation-panel .add-file-button {
height: 23px;
min-width: 23px;
width: 23px;
background: var(--chat-add-button-background);
border-radius: 50%;
}
#chat .chat__conversation-panel .add-file-button svg {
width: 70%;
stroke: #54575c;
}
#chat .chat__conversation-panel .emoji-button {
min-width: 23px;
width: 23px;
height: 23px;
background: transparent;
border-radius: 50%;
}
#chat .chat__conversation-panel .emoji-button svg {
width: 100%;
fill: transparent;
stroke: #54575c;
}
#chat .chat__conversation-panel .send-message-button {
background: var(--chat-send-button-background);
height: 30px;
min-width: 30px;
border-radius: 50%;
transition: 0.3s ease;
}
#chat .chat__conversation-panel .send-message-button:active {
transform: scale(0.97);
}
#chat .chat__conversation-panel .send-message-button svg {
margin: 1px -1px;
}
#chat .chat__conversation-panel__input {
width: 100%;
height: 100%;
outline: none;
position: relative;
color: var(--chat-text-color);
font-size: 13px;
background: transparent;
border: 0;
font-family: "Lato", sans-serif;
resize: none;
}
@media only screen and (max-width: 600px) {
#chat {
margin: 0;
border-radius: 0;
}
#chat .chat__conversation-board {
height: calc(100vh - 55px - 2em - .5em - 3em);
}
#chat .chat__conversation-board__message__options {
display: none !important;
}
}