ucap/next-ucap-messenger
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

대상 테마 수정

Browse Source
This commit is contained in:
khk 2019-11-20 17:31:08 +09:00
parent 47ff1d3e4a
commit d1f1985742
22 changed files with 261 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
electron-projects/ucap-webmessenger-electron/resources/image/ico_64x64_r.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 105 KiB

9
projects/ucap-webmessenger-app/src/app/app.theme.scss
View File

@ -103,10 +103,13 @@ body.theme-pink-dark {
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// Define the primary, accent and warn palettes // Define the primary, accent and warn palettes
$pink-light-theme-primary-palette: mat-palette($mat-grey,800); /*$pink-light-theme-primary-palette: mat-palette($mat-grey,800);
//$pink-light-theme-accent-palette: mat-palette($lg-red, 400); $pink-light-theme-accent-palette: mat-palette($lg-red, 400);
$pink-light-theme-warn-palette: mat-palette($mat-red);*/
$pink-light-theme-primary-palette: mat-palette($daesang-grey, 900);
$pink-light-theme-accent-palette: mat-palette($daesang); $pink-light-theme-accent-palette: mat-palette($daesang);
$pink-light-theme-warn-palette: mat-palette($mat-red); $pink-light-theme-warn-palette: mat-palette($mat-deep-orange);
// Create the Material theme object // Create the Material theme object

2
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss
View File

@ -38,9 +38,7 @@
height: 100%; height: 100%;
} }
::ng-deep .global-menu { ::ng-deep .global-menu {
border-right: 2px solid #4f4f4f;
.mat-tab-label-container { .mat-tab-label-container {
background-color: #4f4f4f;
.mat-tab-list { .mat-tab-list {
.mat-tab-labels { .mat-tab-labels {
flex-flow: column; flex-flow: column;

15
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.scss
View File

@ -1,11 +1,4 @@
.current-head { .current-head {
display: flex;
justify-content: center;
padding: 0 10px;
height: 70px;
background: #352a37;
background: -webkit-linear-gradient(to right, #352a37, #f15f79);
background: linear-gradient(to right, #352a37, #ef4c73);
h3 { h3 {
display: inline-flex; display: inline-flex;
padding-left: 10px; padding-left: 10px;
@ -76,9 +69,17 @@
.app-layout-chat-left-sidenav-chat-list { .app-layout-chat-left-sidenav-chat-list {
height: calc(100% - 130px); height: calc(100% - 130px);
position: relative;
} }
.app-layout-chat-left-sidenav-chat-list-viewport { .app-layout-chat-left-sidenav-chat-list-viewport {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
::ng-deep .cdk-virtual-scroll-orientation-vertical {
.cdk-virtual-scroll-content-wrapper{
width: 100%;
height:100%;
contain: unset;
}
}

8
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.scss
View File

@ -1,13 +1,5 @@
@charset 'utf-8'; @charset 'utf-8';
.current-head { .current-head {
display: flex;
justify-content: center;
padding: 0 10px;
height: 70px;
background-color: #eeeeee;
background: #f15f79;
background: -webkit-linear-gradient(to right, #352a37, #f15f79);
background: linear-gradient(to right, #352a37, #ef4c73);
color: #ffffff; color: #ffffff;
h3 { h3 {
display: inline-flex; display: inline-flex;

5
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.scss
View File

@ -16,7 +16,7 @@
} }
.current-head { .current-head {
display: flex; /*display: flex;
justify-content: center; justify-content: center;
padding: 0 10px; padding: 0 10px;
height: 70px; height: 70px;
@ -24,7 +24,7 @@
background: #f15f79; background: #f15f79;
background: -webkit-linear-gradient(to right, #352a37, #f15f79); background: -webkit-linear-gradient(to right, #352a37, #f15f79);
background: linear-gradient(to right, #352a37, #ef4c73); background: linear-gradient(to right, #352a37, #ef4c73);
color: #ffffff; color: #ffffff;*/
h3 { h3 {
display: inline-flex; display: inline-flex;
padding-left: 10px; padding-left: 10px;
@ -83,6 +83,7 @@
display: flex; display: flex;
background-color: #f9f9f9; background-color: #f9f9f9;
dt { dt {
font-weight:600;
} }
dd { dd {
margin-left: auto; margin-left: auto;

4
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
View File

@ -45,7 +45,6 @@
width: 40px; width: 40px;
height: 40px; height: 40px;
border-radius: 50%; border-radius: 50%;
background-color: #604850;
color: #efefef; color: #efefef;
font-size: 16px; font-size: 16px;
line-height: 40px; line-height: 40px;
@ -97,7 +96,8 @@
position: absolute; position: absolute;
padding:10px 10px 0 10px; padding:10px 10px 0 10px;
background-color: rgb(54, 54, 54, 0.8); background-color: rgb(54, 54, 54, 0.8);
bottom:0 bottom:0;
width:100%;
} }
} }
} }

35
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html
View File

@ -6,8 +6,33 @@
</mat-tab-group> </mat-tab-group>
</div> </div>
<div fxFlex="1 1 240px" class="select-filebox bg-accent-brightest"> <div fxFlex="1 1 240px" class="select-filebox bg-accent-brightest">
<ng-container *ngIf="!selectedFile"> <!--<ng-container *ngIf="!selectedFile">-->
Select File. <ng-container *ngIf="!selectedFile">
<!--이미지 빈화면-->
<div class="empty-msg">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
<rect x="3" y="3" width="18" height="18" rx="2" />
<circle cx="8.5" cy="8.5" r="1.5" />
<path d="M20.4 14.5L16 10 4 20" />
</svg>
<span>Select File.</span>
</div>
<!--비디오 빈화면-->
<div class="empty-msg">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
<rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"></rect>
<line x1="7" y1="2" x2="7" y2="22"></line>
<line x1="17" y1="2" x2="17" y2="22"></line>
<line x1="2" y1="12" x2="22" y2="12"></line>
<line x1="2" y1="7" x2="7" y2="7"></line>
<line x1="2" y1="17" x2="7" y2="17"></line>
<line x1="17" y1="17" x2="22" y2="17"></line>
<line x1="17" y1="7" x2="22" y2="7"></line>
</svg>
<span>Select File.</span>
</div>
</ng-container> </ng-container>
<ng-container *ngIf="selectedFile"> <ng-container *ngIf="selectedFile">
<div class="select-file"> <div class="select-file">
@ -25,10 +50,10 @@
</video> </video>
</div> </div>
<ul> <ul>
<li>name : {{ selectedFile.info.name }}</li> <li class="name"> {{ selectedFile.info.name }}</li>
<li>size : {{ selectedFile.info.size | ucapBytes }}</li> <li><span class="text-accent-color">size :</span> {{ selectedFile.info.size | ucapBytes }}</li>
<li> <li>
date : <span class="text-accent-color">date :</span>
{{ selectedFile.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }} {{ selectedFile.info.sendDate | dateToStringFormat: 'YYYY.MM.DD' }}
</li> </li>
</ul> </ul>

54
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss
View File

@ -1,3 +1,18 @@
@mixin ellipsis($row) {
overflow: hidden;
text-overflow: ellipsis;
@if $row == 1 {
display: block;
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;
}
}
.album-box { .album-box {
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
@ -17,22 +32,32 @@
margin:10px; margin:10px;
padding:10px; padding:10px;
border:1px solid #cccccc; border:1px solid #cccccc;
.select-flie{ .select-file{
display: flex;
flex-flow: row;
align-items: center;
color: #212121; color: #212121;
align-items: center;
border-bottom: 1px dotted #dddddd; border-bottom: 1px dotted #dddddd;
text-align:center; text-align:center;
ul{ padding-bottom:10px;
padding:0; }
margin-top:10px; ul{
.name{ padding-top:10px;
li{
@include ellipsis(1);
&.name{
font-weight:600; font-weight:600;
} }
} }
} }
.empty-msg{
display:inline-flex;
flex-flow: column;
margin:auto 0;
align-items: center;
justify-content: center;
color:#999999;
span{
padding:6px;
}
}
} }
.search-list{ .search-list{
@ -41,11 +66,12 @@
height: calc(100% - 450px); height: calc(100% - 450px);
overflow-y: auto; overflow-y: auto;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between;
.img-item { .img-item {
cursor: pointer; cursor: pointer;
margin-bottom:10px; margin-bottom:10px;
margin-right:9px;
position: relative; position: relative;
height: 150px;
dl{ dl{
dt{ dt{
display: flex; display: flex;
@ -55,6 +81,7 @@
height: 120px; height: 120px;
background-color: #efefef; background-color: #efefef;
border: 1px dotted #cccccc; border: 1px dotted #cccccc;
box-sizing: border-box;
img{ img{
width:100%; width:100%;
height:100%; height:100%;
@ -66,14 +93,15 @@
} }
} }
} }
& :nth-child(3n+0){ &:nth-child(3n+0){
margin-right:0; margin-right:0;
} }
} }
} }
.preview-image { .preview-image,
max-height: 300px; .preview-video{
max-height: 140px;
} }
.btn-box { .btn-box {

41
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.html
View File

@ -7,7 +7,13 @@
</div> </div>
<div fxFlex="1 1 200px" class="select-filebox bg-accent-brightest"> <div fxFlex="1 1 200px" class="select-filebox bg-accent-brightest">
<ng-container *ngIf="!selectedFile" > <ng-container *ngIf="!selectedFile" >
Select File. <div class="empty-msg">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
<path d="M13 2H6a2 2 0 0 0-2 2v16c0 1.1.9 2 2 2h12a2 2 0 0 0 2-2V9l-7-7z" />
<path d="M13 3v6h6" /></svg>
<span>Select File.</span>
</div>
</ng-container> </ng-container>
<ng-container *ngIf="selectedFile"> <ng-container *ngIf="selectedFile">
<div class="select-flie"> <div class="select-flie">
@ -21,7 +27,7 @@
<div class="ico"></div> <div class="ico"></div>
</div> </div>
<ul> <ul>
<li class="name">name : {{ selectedFile.info.name }}</li> <li class="name"> {{ selectedFile.info.name }}</li>
<li>size : {{ selectedFile.info.size | ucapBytes }}</li> <li>size : {{ selectedFile.info.size | ucapBytes }}</li>
<li> <li>
date : date :
@ -29,8 +35,35 @@
</li> </li>
</ul> </ul>
</div> </div>
<div> <div class="select-file-option">
아이콘 <!--툴팁 부탁해요 -->
<span matTooltip="다운로드" class="text-accent-darkest">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
<path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5" /></svg>
</span>
<span matTooltip="나에게전달" class="text-accent-darkest">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
<path d="M5.52 19c.64-2.2 1.84-3 3.22-3h6.52c1.38 0 2.58.8 3.22 3" />
<circle cx="12" cy="10" r="3" />
<circle cx="12" cy="12" r="10" /></svg>
</span>
<span matTooltip="파일전달" class="text-accent-darkest">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
<g fill="none" fill-rule="evenodd">
<path d="M18 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8c0-1.1.9-2 2-2h5M15 3h6v6M10 14L20.2 3.8" />
</g>
</svg>
</span>
<span matTooltip="파일삭제" class="text-accent-darkest">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
<path d="M20 11.08V8l-6-6H6a2 2 0 0 0-2 2v16c0 1.1.9 2 2 2h6" />
<path d="M14 3v5h5M15.88 20.12l4.24-4.24M15.88 15.88l4.24 4.24" /></svg>
</span>
</div> </div>
</ng-container> </ng-container>
</div> </div>

52
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.scss
View File

@ -28,10 +28,10 @@
} }
.select-filebox { .select-filebox {
position: relative;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
margin: 10px; margin: 10px;
padding: 10px;
border: 1px solid #cccccc; border: 1px solid #cccccc;
.select-flie { .select-flie {
display: flex; display: flex;
@ -39,6 +39,7 @@
align-items: center; align-items: center;
color: #212121; color: #212121;
align-items: center; align-items: center;
padding: 10px;
border-bottom: 1px dotted #dddddd; border-bottom: 1px dotted #dddddd;
ul { ul {
padding: 0; padding: 0;
@ -47,6 +48,43 @@
} }
} }
} }
.empty-msg {
display: inline-flex;
flex-flow: column;
margin: auto 0;
align-items: center;
justify-content: center;
color: #999999;
span {
padding: 6px;
}
}
.select-file-option {
position: absolute;
display: flex;
justify-content: space-between;
width: 100%;
text-align: center;
padding: 10px 0;
bottom: 4px;
span {
width: 28px;
height: 28px;
display: inline-flex;
text-align: center;
justify-content: center;
align-items: center;
margin: 0 20px;
cursor: pointer;
svg {
}
&:hover {
border-radius: 50%;
background-color: #999999;
color: #ffffff !important;
}
}
}
} }
.mat-table { .mat-table {
@ -75,7 +113,7 @@
} }
} }
} }
.table-box{ .table-box {
height: calc(100% - 450px); height: calc(100% - 450px);
overflow-y: auto; overflow-y: auto;
} }
@ -89,13 +127,14 @@
cursor: pointer; cursor: pointer;
} }
.footer-fix{ .footer-fix {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
height:160px; height: 160px;
flex-direction: column; flex-direction: column;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
border-top: 1px solid #dddddd;
.btn-box { .btn-box {
height: 50px; height: 50px;
padding-bottom: 10px; padding-bottom: 10px;
@ -128,3 +167,8 @@
order: 5; order: 5;
} }
} }
::ng-deep .mat-form-field-appearance-legacy {
.mat-form-field-infix {
padding: 6px;
}
}

1
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.scss
View File

@ -1,3 +1,4 @@
@import "../../../../../../../ucap-webmessenger-ui/src/assets/scss/partials/presence";
.list { .list {
width: 100%; width: 100%;
height: 100%; height: 100%;

2
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.scss
View File

@ -94,7 +94,7 @@
} }
} }
} }
.mat-tab-group > .mat-tab-header .mat-tab-label { ::ng-deep .mat-card > .mat-tab-labels {
border-bottom: 2px solid #dddddd; border-bottom: 2px solid #dddddd;
} }
::ng-deep .ps-content { ::ng-deep .ps-content {

1
projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss
View File

@ -9,7 +9,6 @@
display: flex; display: flex;
padding: 0 10px; padding: 0 10px;
cursor: pointer; cursor: pointer;
background: #4f4f4f;
height: 30px; height: 30px;
color:#ffffff; color:#ffffff;
//background: rgba(37, 27, 30, 0.9); //background: rgba(37, 27, 30, 0.9);

2
projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html
View File

@ -1,4 +1,4 @@
<div class="container"> <div class="main-container">
<as-split <as-split
unit="pixel" unit="pixel"
gutterSize="5" gutterSize="5"

11
projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss
View File

@ -1,11 +1,9 @@
.container { .main-container {
height:100%; height:100%;
display: flex; display: flex;
flex-flow: row; flex-flow: row;
padding-top: 30px; padding-top: 27px;
border: 3px solid #4f4f4f;
border-top: none; border-top: none;
.split-area{ .split-area{
overflow: hidden; overflow: hidden;
.left-side { .left-side {
@ -25,10 +23,13 @@
height: 100%; height: 100%;
} }
.rightDrawer{ .rightDrawer{
width:420px; width:400px;
height: 100%; height: 100%;
flex: 0 0 auto; flex: 0 0 auto;
overflow: hidden; overflow: hidden;
-webkit-box-shadow: -1px 0px 3px 0px rgba(0,0,0,0.3);
-moz-box-shadow: -1px 0px 3px 0px rgba(0,0,0,0.3);
box-shadow: -1px 0px 3px 0px rgba(0,0,0,0.3);
} }
} }
.right-side { .right-side {

77
projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss
View File

@ -60,6 +60,7 @@ $lg-red: (
A200: #ff4081, A200: #ff4081,
A400: #ff3399, A400: #ff3399,
A700: #c51162, A700: #c51162,
B100:#4f4f4f,
G100: #ef4c73, G100: #ef4c73,
G900: #352a37, G900: #352a37,
contrast: ( contrast: (
@ -77,28 +78,30 @@ $lg-red: (
A200: $light-primary-text, A200: $light-primary-text,
A400: $light-primary-text, A400: $light-primary-text,
A700: $light-primary-text, A700: $light-primary-text,
B100: $light-primary-text,
G100:$dark-primary-text, G100:$dark-primary-text,
G900:$light-primary-text G900:$light-primary-text
) )
); );
$daesang: ( $daesang: (
50: #e0f7fa, 50: #f9feff,//#e0f7fa,
100: #b2ebf2, 100: #b2ebf2,
200: #80deea, 200: #4dd0e1,//#80deea,
300: #4dd0e1, 300: #4dd0e1,
400: #26c6da, 400: #26c6da,
500: #00bcd4, 500: #00bcd4,
/*600: #00acc1,*/ 600: #00b6d5, /*600: #00acc1,*/ 600: #00b6d5,
700: #0097a7, 700: #0097a7,
800: #2c8493, 800: #0367A6,
900: #126a79, 900: #024873,
A100: #84ffff, A100: #84ffff,
A200: #18ffff, A200: #18ffff,
A400: #00e5ff, A400: #00e5ff,
A700: #00b8d4, A700: #00b8d4,
G100: #6dd5ed, B100:#2d3a4a,//,#47667fbackgroundcolor
/*G900: #192a2c,*/G900: #2193b0, G100: #0367A6,
/*G900: #192a2c,*/G900: #6dd5ed,
contrast: ( contrast: (
50: $dark-primary-text, 50: $dark-primary-text,
100: $dark-primary-text, 100: $dark-primary-text,
@ -114,10 +117,44 @@ $daesang: (
A200: $dark-primary-text, A200: $dark-primary-text,
A400: $dark-primary-text, A400: $dark-primary-text,
A700: $dark-primary-text, A700: $dark-primary-text,
B100: $light-primary-text,
G100: $dark-primary-text, G100: $dark-primary-text,
G900: $light-primary-text G900: $light-primary-text
) )
); );
$daesang-grey: (
50: #fafafa,
100: #f5f5f5,
200: #eeeeee,
300: #e0e0e0,
400: #bdbdbd,
500: #9e9e9e,
600: #757575,
700: #616161,
800: #424242,
900: #2d3a4a,
A100: #ffffff,
A200: #eeeeee,
A400: #bdbdbd,
A700: #616161,
contrast: (
50: $dark-primary-text,
100: $dark-primary-text,
200: $dark-primary-text,
300: $dark-primary-text,
400: $dark-primary-text,
500: $dark-primary-text,
600: $light-primary-text,
700: $light-primary-text,
800: $light-primary-text,
900: $light-primary-text,
A100: $dark-primary-text,
A200: $dark-primary-text,
A400: $dark-primary-text,
A700: $light-primary-text,
)
);
@mixin ucap-material-theme($theme) { @mixin ucap-material-theme($theme) {
@include ucap-core-theme($theme); @include ucap-core-theme($theme);
@ -133,6 +170,7 @@ $daesang: (
$gradient-darkest:mat-color($accent, G900); $gradient-darkest:mat-color($accent, G900);
$gradient-light:mat-color($accent, G100); $gradient-light:mat-color($accent, G100);
//basic
.bg-primary-dark{ .bg-primary-dark{
background: mat-color($primary, 900); background: mat-color($primary, 900);
color: mat-color($primary, default-contrast); color: mat-color($primary, default-contrast);
@ -168,6 +206,9 @@ $daesang: (
.text-primary-color { .text-primary-color {
color: mat-color($primary); color: mat-color($primary);
} }
.text-accent-darkest {
color: mat-color($accent, 900);
}
.text-accent-color { .text-accent-color {
color: mat-color($accent); color: mat-color($accent);
} }
@ -180,6 +221,18 @@ $daesang: (
.border-accent-color { .border-accent-color {
border: 1px solid mat-color($accent); border: 1px solid mat-color($accent);
} }
// sass 정의
.mat-toolbar{
background-color: mat-color($accent , B100);
}
.main-container {
border:3px solid mat-color($accent, B100);
}
.global-menu{
background-color: mat-color($accent , B100);
}
.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-group.mat-primary .mat-ink-bar,
body.theme-default .mat-tab-nav-bar.mat-primary .mat-ink-bar { body.theme-default .mat-tab-nav-bar.mat-primary .mat-ink-bar {
background-color: mat-color($accent, 400); background-color: mat-color($accent, 400);
@ -187,9 +240,7 @@ $daesang: (
.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary { .mat-chip.mat-standard-chip.mat-chip-selected.mat-primary {
background-color: mat-color($accent, 200); background-color: mat-color($accent, 200);
} }
/*.mat-form-field-appearance-legacy .mat-hint{
color: mat-color($accent, 800);
}*/
.global-menu { .global-menu {
.mat-tab-label[aria-selected='true']{ .mat-tab-label[aria-selected='true']{
.mat-tab-label-content{ .mat-tab-label-content{
@ -236,4 +287,12 @@ $daesang: (
background: linear-gradient(to right, $gradient-darkest, $gradient-light); background: linear-gradient(to right, $gradient-darkest, $gradient-light);
color:#ffffff; color:#ffffff;
} }
.messages .container{
background: mat-color($accent, 50);
}
.profile-img{
.responsive-chats-button:last-child {
background-color: $gradient-light;
}
}
} }

2
projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.scss
View File

@ -5,7 +5,7 @@
.file-thumbimg{ .file-thumbimg{
display:inline-flex; display:inline-flex;
img { img {
width:200px; height:140px;
padding-right: 20px; padding-right: 20px;
background-repeat: no-repeat; background-repeat: no-repeat;
} }

5
projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss
View File

@ -144,7 +144,7 @@ $meBox-bg: #ffffff;
width: 100%; width: 100%;
height: 100%; height: 100%;
text-align: center; text-align: center;
background-color: #dddddd; background-color: rgba(0, 0, 0, 0.1);
padding: 10px; padding: 10px;
margin: 10px 0; margin: 10px 0;
} }
@ -160,7 +160,6 @@ $meBox-bg: #ffffff;
position: relative; position: relative;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin-right: 40px;
margin-left: 0; margin-left: 0;
.profile-img { .profile-img {
flex: 0 0 auto; flex: 0 0 auto;
@ -172,7 +171,7 @@ $meBox-bg: #ffffff;
&.me { &.me {
.chat-row { .chat-row {
flex-direction: row-reverse; flex-direction: row-reverse;
margin-left: 40px; margin-left: 0;
margin-right: 0; margin-right: 0;
.profile-info { .profile-info {
flex-direction: row-reverse; flex-direction: row-reverse;

1
projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss
View File

@ -139,7 +139,6 @@ $thumbnail-msize: 40px;
margin-left: 6px; margin-left: 6px;
border-radius: 3px; border-radius: 3px;
padding: 1px 6px; padding: 1px 6px;
background-color: #ef4c73;
color: #ffffff; color: #ffffff;
} }
} }

17
projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.scss
View File

@ -17,32 +17,25 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
.file-upload-item { .file-upload-item {
background-color: #eeeeee;
min-width: 200px; min-width: 200px;
margin: 0 0.5%; margin: 0 1%;
margin-bottom: 10px; margin-bottom: 10px;
width: 32%; width: 48%;
border-radius: 3px; border-radius: 3px;
background-color:#f9f9f9;
border:1px solid #dddddd;
.file-upload-info { .file-upload-info {
padding: 10px; padding: 10px;
background-color:#ffffff;
border-bottom: 1px solid #dddddd;
svg { svg {
margin-right: 6px; margin-right: 6px;
} }
.file-upload-name { .file-upload-name {
height: 40px; height: 20px;
@include ellipsis(2); @include ellipsis(2);
} }
} }
.file-upload-progress { .file-upload-progress {
padding: 6px 10px; padding: 6px 10px;
} }
&:nth-child(3n + 1) {
margin-left: 1%;
}
&:nth-child(3n + 0) {
margin-right: 1%;
}
} }
} }