app/assets/stylesheets/components/_message_window.scss
.profile-image-2, .profile-image, .profile-image-small, .sidebar-user-details-profile-image {
border: 1px solid $med-grey;
}
.full-message-window {
grid-column-start: 2;
grid-column-end: span 1;
grid-row-start: 2;
grid-row-end: span 1;
flex-direction: column;
overflow-y: scroll;
justify-content: flex-end;
}
.message-form-input {
grid-column-start: 2;
grid-column-end: span 1;
grid-row-start: 3;
grid-row-end: span 1;
}
.message-form {
padding: 3px 10px;
margin: 0 0 10px 0;
width: 100%;
border-top: 1px solid $med-grey;
border-bottom: 1px solid $med-grey;
border-left: none;
border-right: none;
word-wrap: break-word;
word-break: break-all;
resize: none;
height: 200px;
}
.message-form-left-box {
cursor: pointer;
justify-content: center;
align-content: center;
border-radius: 5px 0 0 5px;
margin: 0 0 10px 20px;
border: 1px solid $med-grey;
color: $med-grey;
p {
font-size: 25px;
font-weight: 500;
align-self: center;
text-align: center;
padding: 12px;
}
&:hover {
background: $green2;
color: white;
border: 1px solid $dark-green;
}
}
.message-form-right-box {
padding-right: 10px;
margin: 0 20px 10px 0;
border-radius: 0 5px 5px 0;
border-top: 1px solid $med-grey;
border-right: 1px solid $med-grey;
border-bottom: 1px solid $med-grey;
justify-content: center;
align-content: center;
color: $med-grey;
p {
font-size: 22px;
font-weight: 500;
align-self: center;
text-align: center;
padding-right: 10px;
margin-bottom: 5px;
&:hover {
transform: scale(1.2);
color: $blue;
cursor: pointer;
}
}
i {
font-size: 20px;
margin: auto;
&:hover {
transform: scale(1.2);
color: goldenrod;
cursor: pointer;
}
}
}
.emoji-picker-container{
// display: none;
position: absolute;
top: -340px;
left: -120px;
}
.message-form:focus {
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
outline: none !important;
}
.message-form, .message-form-left-box, .message-form-right-box {
position: relative;
box-sizing: border-box;
height: 45px;
align-self: center;
font-size: 14px;
&::placeholder {
color: $lighter-grey;
}
}
.message-body {
color: black;
font-size: 16px;
font-weight: 400;
margin-left: 10px;
}
.message-list {
flex-direction: column;
// overflow-y: scroll;
word-wrap: break-word;
}
.profile-image {
float: left;
border-radius: 5px;
margin-left: 20px;
margin-right: 5px;
background: $light-blue;
width: 45px;
}
.profile-image-text {
margin: 5px;
box-sizing: content-box;
float: left;
background: $green;
color: white;
font-size: 30px;
padding-top: 10px;
padding-right: 4px;
text-align: center;
margin-left: 20px;
width: 40px;
height: 40px;
border-radius: 5px;
border: 1px solid $dark-green;
}
.message-item-container{
padding: 3px;
&:hover {
background: $very-light-grey;
}
}
.message-item {
justify-content: space-between;
margin-left: 5px;
position: relative;
.message-body-author-container {
margin-top: 4px;
}
}
.message-item-left {
flex-direction: column;
}
.message-item-right {
align-self: center;
background: $white;
border: 1px solid $lighter-grey;
color: $lighter-grey;
margin: 0 25px 0 10px;
border-radius: 5px;
height: 20px;
padding: 3px 10px;
white-space: nowrap;
i {
margin: 0 5px;
}
}
.message-icons {
position: relative;
}
.message-icons .message-item-buttons-popup {
position: absolute;
font-size: 11px;
bottom: 30px;
white-space: nowrap;
left: -60px;
visibility: hidden;
background: $black;
padding: 10px 5px;
color: $white;
text-align: center;
font-weight: bold;
font-family: $font-sans-serif;
border-radius: 5px;
}
.message-item .message-item-right {
visibility: hidden;
position: absolute;
top: -15px;
right: 0;
}
.message-item:hover .message-item-right {
visibility: visible;
animation-name: appear2;
}
.message-icons:hover .message-item-buttons-popup {
visibility: visible;
animation-name: appear2;
animation-duration: 1s;
}
.message-body-author {
font-size: 15px;
font-weight: 600;
white-space: nowrap;
a {
color: $black;
}
}
.message-body-timestamp {
font-size: 12px;
color: $light-grey;
font-weight: 300;
margin: 0 0 1px 6px;
align-self: flex-end;
position: relative;
}
.message-body-body {
font-size: 14px;
font-weight: 300;
line-height: 1.5;
word-wrap: break-word;
margin-top: 3px;
.emoji {
max-height: 25px;
}
}
.message-body-timestamp .message-body-full-timestamp {
position: absolute;
bottom: 25px;
left: -75px;
width: 175px;
visibility: hidden;
background: $black;
padding: 10px 5px;
color: $white;
text-align: center;
font-weight: bold;
border-radius: 5px;
}
.message-body-timestamp:hover .message-body-full-timestamp {
visibility: visible;
animation-name: appear2;
animation-duration: 1s;
}
@keyframes appear2 {
0% {opacity: 0;}
25% {opacity: 0;}
100% {opacity: 1;}
}
.message-window-first-message {
padding: 20px;
border-bottom: 1px solid $lighter-grey;
margin-bottom: 20px;
h2 {
font-size: 20px;
font-weight: 700;
padding-bottom: 20px;
color: $light-grey;
line-height: 1.3;
}
p {
font-size: 14px;
line-height: 1.5;
}
}