diff --git a/projects/ucap-webmessenger-app/src/app/app.theme.scss b/projects/ucap-webmessenger-app/src/app/app.theme.scss index 164de656..de5eae1a 100644 --- a/projects/ucap-webmessenger-app/src/app/app.theme.scss +++ b/projects/ucap-webmessenger-app/src/app/app.theme.scss @@ -109,8 +109,7 @@ $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-warn-palette: mat-palette($mat-deep-orange); - +$pink-light-theme-warn-palette: mat-palette($mat-orange); // Create the Material theme object $pink-light-theme: mat-light-theme( @@ -121,7 +120,7 @@ $pink-light-theme: mat-light-theme( // Add ".theme-pink-dark" class to the body to activate this theme. // Class name must start with "theme-" !!! -body.theme-default { +body.theme-default { // Generate the Angular Material theme @include angular-material-theme($pink-light-theme); diff --git a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html index 6ab97a58..ae1a4af5 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html +++ b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html @@ -4,7 +4,29 @@
UCAP M Messenger
+
+ + + + + + + +
+ @@ -24,7 +46,7 @@ + stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" *ngSwitchCase="WindowState.Maximized" alt="창 이전크기"> @@ -32,7 +54,7 @@ + stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" *ngSwitchDefault alt="창크기 최대"> @@ -45,7 +67,7 @@ > + stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" alt="창닫기"> diff --git a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss index c9c35b35..f84b82d9 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss +++ b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss @@ -9,8 +9,8 @@ display: flex; padding: 0 10px; cursor: pointer; - height: 30px; - color:#ffffff; + height: 50px; + color: #ffffff; //background: rgba(37, 27, 30, 0.9); //border-bottom: 1px solid #d5dadb; @@ -28,7 +28,49 @@ flex: 1 1 auto; } + .app-layout-native-title-bar-link { + align-items: center; + position: relative; + + .stroke-bar { + width: 1px; + height: 20px; + background-color: rgba(256, 256, 256, 0.3); + margin: 0 10px 0 20px; + display: inline-flex; + } + .button { + -webkit-app-region: no-drag; + outline: 0; + cursor: pointer; + border: none; + height: 28px; + min-width: 28px; + max-width: 28px; + padding: 5px; + line-height: 10px; + border-radius: 0; + background: transparent; + transition: background 0.2s linear, color 0.2s linear; + text-align: center; + font-size: 10px; + vertical-align: middle; + margin-left: 10px; + transform: translateY(-2px); + + &.app-layout-native-title-bar-logout, + &.app-layout-native-title-bar-setting { + background-color: #efefef; + border-radius: 50%; + } + &:hover { + opacity: 0.7; + } + } + } + .app-layout-native-title-bar-actions { + align-items: center; position: relative; .button { @@ -47,14 +89,14 @@ text-align: center; font-size: 10px; vertical-align: middle; - margin-left:6px; + margin-left: 6px; transform: translateY(-2px); .mat-icon { //transform: translateY(-2px); width: 16px; height: 16px; - min-height:16px; - min-width:16px; + min-height: 16px; + min-width: 16px; font-size: 16px; } @@ -70,6 +112,7 @@ // } &:hover { + border-radius: 4px; &.app-layout-native-title-bar-close { background: darken(#000000, 10%); color: darken(white, 0); @@ -77,7 +120,7 @@ &.app-layout-native-title-bar-minimize { background: darken(#000000, 10%); - color: darken(white,0); + color: darken(white, 0); } &.app-layout-native-title-bar-maximize { diff --git a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss index b4ae702a..eec9a211 100644 --- a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss +++ b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss @@ -1,16 +1,16 @@ .main-container { - height:100%; + height: 100%; display: flex; flex-flow: row; - padding-top: 27px; + padding-top: 47px; border-top: none; - .split-area{ + .split-area { overflow: hidden; .left-side { - width: 100%; - height: 100%; - flex: 0 0 auto; - position: relative; + width: 100%; + height: 100%; + flex: 0 0 auto; + position: relative; } } @@ -22,14 +22,14 @@ width: 100%; height: 100%; } - .rightDrawer{ - width:400px; + .rightDrawer { + width: 400px; height: 100%; flex: 0 0 auto; 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); + -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 { @@ -38,6 +38,6 @@ } } -::ng-deep .mat-drawer-inner-container{ +::ng-deep .mat-drawer-inner-container { overflow: unset !important; } diff --git a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss index 11052f81..30659e5f 100644 --- a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss +++ b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss @@ -223,7 +223,12 @@ $daesang-grey: ( .border-accent-color { border: 1px solid mat-color($accent); } - + .border-warn-color { + border: mat-color($warn); + } + .stroke-warn-color { + stroke: mat-color($warn, 900); + } // sass 정의 .mat-toolbar { background-color: mat-color($accent, B100); @@ -239,7 +244,7 @@ $daesang-grey: ( cursor: pointer; } - .policy{ + .policy { background-color: mat-color($accent, B100); } .mat-badge-accent .mat-badge-content {