2019-11-01 13:03:57 +09:00
|
|
|
@charset 'utf-s';
|
|
|
|
:host {
|
2019-10-31 19:17:29 +09:00
|
|
|
display: flex;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
}
|
2019-11-01 13:03:57 +09:00
|
|
|
@mixin ellipsis($row) {
|
|
|
|
overflow: hidden;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
@if $row == 1 {
|
2019-10-31 19:17:29 +09:00
|
|
|
display: block;
|
2019-11-01 13:03:57 +09:00
|
|
|
white-space: nowrap;
|
|
|
|
word-wrap: normal;
|
|
|
|
} @else if $row >= 2 {
|
|
|
|
display: -webkit-box;
|
|
|
|
-webkit-line-clamp: $row;
|
|
|
|
-webkit-box-orient: vertical;
|
|
|
|
word-wrap: break-word;
|
2019-10-31 19:17:29 +09:00
|
|
|
}
|
2019-11-01 13:03:57 +09:00
|
|
|
}
|
2019-11-01 15:06:37 +09:00
|
|
|
.container {
|
2019-11-01 13:03:57 +09:00
|
|
|
position: relative;
|
2019-11-01 15:06:37 +09:00
|
|
|
width: 100%;
|
2019-11-01 13:03:57 +09:00
|
|
|
}
|
|
|
|
.chat-toolbar {
|
2020-01-07 19:30:58 +09:00
|
|
|
position: relative;
|
|
|
|
display: flex;
|
|
|
|
flex-flow: column;
|
2019-11-01 15:06:37 +09:00
|
|
|
width: 100%;
|
2020-01-07 19:30:58 +09:00
|
|
|
height: auto;
|
2019-11-01 13:03:57 +09:00
|
|
|
align-items: center;
|
|
|
|
background-color: #ffffff !important;
|
2019-11-08 08:58:22 +09:00
|
|
|
border-bottom: 1px solid #dddddd;
|
2019-11-20 18:04:24 +09:00
|
|
|
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
|
2020-01-07 19:30:58 +09:00
|
|
|
z-index: 1;
|
|
|
|
padding: 0;
|
2019-11-01 13:03:57 +09:00
|
|
|
.chat-header {
|
|
|
|
width: 100%;
|
|
|
|
align-items: center;
|
2019-10-31 19:17:29 +09:00
|
|
|
display: flex;
|
2019-11-01 13:03:57 +09:00
|
|
|
justify-content: space-between;
|
2020-01-07 19:30:58 +09:00
|
|
|
justify-items: center;
|
2020-01-20 18:54:24 +09:00
|
|
|
padding: 4px 20px;
|
2019-10-31 19:17:29 +09:00
|
|
|
.profile-img {
|
2020-01-08 20:42:14 +09:00
|
|
|
margin-right: 10px;
|
2020-01-20 18:54:24 +09:00
|
|
|
width: 30px;
|
|
|
|
height: 30px;
|
2019-11-01 13:03:57 +09:00
|
|
|
.responsive-chats-button {
|
|
|
|
display: none;
|
2020-01-08 15:58:16 +09:00
|
|
|
line-height: normal;
|
2020-01-10 15:22:45 +09:00
|
|
|
cursor: unset;
|
2019-11-01 13:03:57 +09:00
|
|
|
&:last-child {
|
|
|
|
display: block;
|
|
|
|
padding: 0;
|
2020-01-20 18:54:24 +09:00
|
|
|
width: 30px;
|
|
|
|
height: 30px;
|
2019-11-01 13:03:57 +09:00
|
|
|
border-radius: 50%;
|
|
|
|
color: #efefef;
|
2020-01-20 18:54:24 +09:00
|
|
|
font-size: 1rem;
|
2019-11-01 13:03:57 +09:00
|
|
|
}
|
2019-10-31 19:17:29 +09:00
|
|
|
}
|
2019-12-30 19:19:39 +09:00
|
|
|
&.thumbnail-mask {
|
|
|
|
border-radius: 50%;
|
|
|
|
overflow: hidden;
|
|
|
|
img {
|
|
|
|
width: 50px;
|
|
|
|
height: auto;
|
|
|
|
}
|
|
|
|
}
|
2019-10-31 19:17:29 +09:00
|
|
|
}
|
2019-11-01 13:03:57 +09:00
|
|
|
.room-info {
|
2019-11-01 15:06:37 +09:00
|
|
|
display: flex;
|
2020-01-20 18:54:24 +09:00
|
|
|
flex-flow: row;
|
2019-11-01 13:03:57 +09:00
|
|
|
overflow: hidden;
|
2020-01-20 18:54:24 +09:00
|
|
|
align-items: center;
|
2019-11-01 13:03:57 +09:00
|
|
|
.room-name {
|
2020-01-20 18:54:24 +09:00
|
|
|
font-size: 0.94rem;
|
2019-11-01 13:03:57 +09:00
|
|
|
line-height: normal;
|
|
|
|
@include ellipsis(1);
|
2019-10-31 19:17:29 +09:00
|
|
|
}
|
2019-11-01 13:03:57 +09:00
|
|
|
.room-type {
|
2020-01-15 19:21:58 +09:00
|
|
|
font-size: 0.9rem;
|
2019-11-01 13:03:57 +09:00
|
|
|
line-height: normal;
|
2019-11-01 15:06:37 +09:00
|
|
|
height: 20px;
|
|
|
|
span {
|
|
|
|
border-radius: 10px;
|
2020-01-20 18:54:24 +09:00
|
|
|
padding: 2px 6px;
|
2019-11-01 15:06:37 +09:00
|
|
|
margin-right: 6px;
|
2020-01-15 19:21:58 +09:00
|
|
|
font-size: 0.7rem;
|
2019-11-01 13:03:57 +09:00
|
|
|
}
|
2019-10-31 19:17:29 +09:00
|
|
|
}
|
|
|
|
}
|
2019-11-01 13:03:57 +09:00
|
|
|
.room-option {
|
|
|
|
margin-left: auto;
|
2020-01-28 20:50:52 +09:00
|
|
|
margin-right: -10px;
|
2020-01-30 19:41:37 +09:00
|
|
|
.icon-button {
|
|
|
|
transform: translateY(-2px);
|
|
|
|
i {
|
|
|
|
font-size: 0.9em;
|
|
|
|
}
|
|
|
|
}
|
2019-10-31 19:17:29 +09:00
|
|
|
}
|
|
|
|
}
|
2020-01-07 19:30:58 +09:00
|
|
|
.chat-search-frame {
|
|
|
|
position: relative;
|
|
|
|
width: 100%;
|
|
|
|
.chat-search {
|
|
|
|
margin: 0 4px 4px;
|
|
|
|
}
|
|
|
|
}
|
2019-10-31 19:17:29 +09:00
|
|
|
}
|
2019-12-17 09:18:48 +09:00
|
|
|
|
2019-11-01 13:03:57 +09:00
|
|
|
.chat-content {
|
2019-11-01 15:06:37 +09:00
|
|
|
position: relative;
|
|
|
|
background: transparent;
|
2019-11-01 13:03:57 +09:00
|
|
|
overflow: auto;
|
2019-11-01 15:06:37 +09:00
|
|
|
-webkit-overflow-scrolling: touch;
|
2020-02-10 11:10:11 +09:00
|
|
|
.icon-button {
|
|
|
|
position: absolute;
|
|
|
|
right: 20px;
|
|
|
|
top: 14px;
|
|
|
|
z-index: 100;
|
|
|
|
padding: 0 0px;
|
|
|
|
line-height: unset;
|
|
|
|
min-width: 28px;
|
|
|
|
height: 28px;
|
|
|
|
background: #ffffff;
|
|
|
|
border-radius: 3px;
|
|
|
|
&:not([disabled]) {
|
|
|
|
box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.2);
|
|
|
|
}
|
|
|
|
}
|
2019-11-01 15:06:37 +09:00
|
|
|
|
|
|
|
.file-drop-zone-container {
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
2019-11-05 13:46:17 +09:00
|
|
|
background-color: transparent;
|
2019-11-01 15:06:37 +09:00
|
|
|
|
|
|
|
.file-drop-zone {
|
|
|
|
position: absolute;
|
2020-01-31 11:29:06 +09:00
|
|
|
padding: 10px;
|
2019-11-13 17:46:25 +09:00
|
|
|
background-color: rgb(54, 54, 54, 0.8);
|
2019-11-20 18:04:24 +09:00
|
|
|
bottom: 0;
|
2019-11-20 18:06:42 +09:00
|
|
|
width: 100%;
|
2019-11-20 18:04:24 +09:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.sticker-selector-container {
|
|
|
|
position: absolute;
|
2019-11-25 14:12:49 +09:00
|
|
|
bottom: 0;
|
2019-11-20 18:04:24 +09:00
|
|
|
left: 0;
|
|
|
|
width: 100%;
|
|
|
|
background-color: transparent;
|
|
|
|
|
2019-11-20 18:06:42 +09:00
|
|
|
.sticker-selector-zone {
|
2019-11-20 18:04:24 +09:00
|
|
|
position: absolute;
|
|
|
|
padding: 10px 10px 0 10px;
|
2019-11-25 14:12:49 +09:00
|
|
|
background-color: rgba(250, 255, 255, 0.8);
|
2019-11-20 18:04:24 +09:00
|
|
|
bottom: 0;
|
2019-11-20 18:06:42 +09:00
|
|
|
width: 100%;
|
2019-11-01 15:06:37 +09:00
|
|
|
}
|
|
|
|
}
|
2020-01-08 20:42:14 +09:00
|
|
|
}
|
2020-01-09 18:44:04 +09:00
|
|
|
.translation-container {
|
|
|
|
.translation-section {
|
|
|
|
display: flex;
|
|
|
|
flex-flow: column;
|
|
|
|
border-top: 1px solid #dddddd;
|
|
|
|
.translation-container {
|
2019-12-31 14:36:32 +09:00
|
|
|
position: absolute;
|
|
|
|
bottom: 0;
|
2020-01-09 18:44:04 +09:00
|
|
|
left: 0;
|
2019-12-31 14:36:32 +09:00
|
|
|
width: 100%;
|
2020-01-09 18:44:04 +09:00
|
|
|
background-color: transparent;
|
|
|
|
background-color: rgba(250, 255, 255, 0.8);
|
|
|
|
border-top: 1px solid;
|
|
|
|
|
|
|
|
.translation-zone {
|
|
|
|
position: absolute;
|
|
|
|
padding: 10px 10px 0 10px;
|
|
|
|
background-color: rgba(250, 255, 255, 0.8);
|
|
|
|
bottom: 0;
|
|
|
|
width: 100%;
|
|
|
|
}
|
2019-12-31 14:36:32 +09:00
|
|
|
}
|
|
|
|
}
|
2019-09-23 14:23:24 +09:00
|
|
|
}
|
2020-02-11 11:09:57 +09:00
|
|
|
//mat-snack-bar 공통
|
2020-02-05 16:39:39 +09:00
|
|
|
::ng-deep .cdk-global-overlay-wrapper {
|
|
|
|
.mat-snack-bar-container {
|
|
|
|
margin: 0;
|
|
|
|
padding: 30px;
|
2020-02-06 14:40:06 +09:00
|
|
|
max-width: 60vw;
|
2020-02-05 16:39:39 +09:00
|
|
|
.mat-simple-snackbar {
|
2020-02-06 14:40:06 +09:00
|
|
|
display: flex;
|
2020-02-05 16:39:39 +09:00
|
|
|
justify-content: center;
|
|
|
|
span {
|
2020-02-06 14:40:06 +09:00
|
|
|
@include ellipsis(3);
|
|
|
|
display: inline-block;
|
|
|
|
padding: 7px 20px;
|
2020-02-05 16:39:39 +09:00
|
|
|
border: 1px solid #ffffff;
|
|
|
|
background-color: rgb(255, 255, 255, 0.2);
|
|
|
|
color: #ffffff;
|
2020-02-06 14:40:06 +09:00
|
|
|
margin-right: 4px;
|
|
|
|
flex: 1 1 auto;
|
|
|
|
max-width: 40vw;
|
|
|
|
}
|
|
|
|
&-action {
|
|
|
|
display: inline-flex;
|
|
|
|
margin-left: auto;
|
|
|
|
flex: 0 0 auto;
|
|
|
|
height: 100%;
|
|
|
|
button {
|
|
|
|
//background-color: #00b6d5;
|
|
|
|
border-radius: 2px;
|
|
|
|
span {
|
|
|
|
padding: 0 20px;
|
|
|
|
color: #ffffff;
|
|
|
|
background: none;
|
|
|
|
border: none;
|
|
|
|
font-weight: 500;
|
|
|
|
}
|
|
|
|
}
|
2020-02-05 16:39:39 +09:00
|
|
|
}
|
2019-11-07 13:14:44 +09:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2020-01-08 20:42:14 +09:00
|
|
|
|
2020-02-11 11:09:57 +09:00
|
|
|
.chat-header {
|
2020-01-08 20:42:14 +09:00
|
|
|
.profile-img {
|
|
|
|
.chat-timer {
|
|
|
|
.mat-button-wrapper {
|
2020-01-20 18:54:24 +09:00
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
justify-items: center;
|
2020-01-08 20:42:14 +09:00
|
|
|
.mat-icon {
|
|
|
|
line-height: normal;
|
|
|
|
color: #ffffff;
|
2020-01-20 18:54:24 +09:00
|
|
|
font-size: 20px;
|
|
|
|
transform: translateY(1px);
|
2020-01-08 20:42:14 +09:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|