234 lines
4.7 KiB
SCSS
Raw Normal View History

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
}
&.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 {
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;
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;
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-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;
.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;
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;
width: 100%;
2019-11-20 18:04:24 +09:00
}
}
.sticker-selector-container {
position: absolute;
bottom: 0;
2019-11-20 18:04:24 +09:00
left: 0;
width: 100%;
background-color: transparent;
.sticker-selector-zone {
2019-11-20 18:04:24 +09:00
position: absolute;
padding: 10px 10px 0 10px;
background-color: rgba(250, 255, 255, 0.8);
2019-11-20 18:04:24 +09:00
bottom: 0;
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
}
}
}
2020-02-06 14:40:06 +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
}
}
}
}
2020-01-08 20:42:14 +09:00
::ng-deep .chat-header {
.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
}
}
}
}
}