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 1aafd228..531d101c 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 @@ -346,3 +346,6 @@ } } } +.integrated-search { + width: 240px; +} 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 faa5a584..7bec2a75 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 @@ -55,7 +55,7 @@ } } -::ng-deep .mat-drawer-inner-container { +/*::ng-deep .mat-drawer-inner-container { overflow: unset !important; } @@ -65,7 +65,7 @@ //border-bottom: 2px solid #dddddd; flex: 1 1 auto; justify-content: space-around; -} +}*/ ::ng-deep .left-drawer-toggle { position: absolute; diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.scss index 65fdc328..3f96dab9 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.scss +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box.component.scss @@ -184,51 +184,3 @@ $tablet-s-width: 768px; } } } - -/*::ng-deep .view-previous { - display: flex; - flex-flow: column; - color: #ffffff; - justify-content: center; - justify-items: center; - margin: 10px 0 20px; - button { - height: 100%; - width: 100%; - font-size: 1em; - line-height: 2em; - border-radius: 100px; - .mat-button-wrapper { - justify-items: center; - svg { - stroke: #ffffff; - align-self: center; - margin-right: 4px; - } - } - } - .unRead-count { - display: flex; - justify-items: self-end; - flex-flow: row; - align-items: flex-end; - height: 20px; - margin: 10px 0; - .line { - height: 1px; - background-color: #cccccc; - width: 40%; - flex: 1 1 auto; - margin-bottom: 10px; - display: inline-flex; - } - .count { - width: 260px; - font-size: 13px; - text-align: center; - font-weight: 600; - color: #333333; - } - } -} -*/ diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.scss index 726d0a6e..94193461 100644 --- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.scss +++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/sound-viewer.component.scss @@ -158,12 +158,3 @@ mat-slider { width: 94%; } - -::ng-deep .mat-slider-horizontal .mat-slider-track-background { - background-color: #999999 !important; -} -::ng-deep - .mat-slider-min-value:not(.mat-slider-thumb-label-showing) - .mat-slider-thumb { - border-color: #999999 !important; -} diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.scss index 9b060d85..ead7988b 100644 --- a/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.scss +++ b/projects/ucap-webmessenger-ui/src/lib/components/file-viewer/video-viewer.component.scss @@ -49,6 +49,9 @@ .ucap-video-viewer-video-time { width: 100%; height: 30px; + .mat-slider { + width: 94%; + } } .ucap-video-viewer-video-controls { width: 100%; @@ -77,15 +80,18 @@ } } -mat-slider { - width: 94%; -} - -::ng-deep .mat-slider-horizontal .mat-slider-track-background { - background-color: #999999 !important; -} -::ng-deep - .mat-slider-min-value:not(.mat-slider-thumb-label-showing) - .mat-slider-thumb { - border-color: #999999 !important; +//viewr 플레이어 공통 +::ng-deep .viewer-bottom { + .mat-slider-horizontal { + .mat-slider-track-background { + background-color: #999999 !important; + } + &.mat-slider-min-value { + &:not(.mat-slider-thumb-label-showing) { + .mat-slider-thumb { + border-color: #999999 !important; + } + } + } + } } diff --git a/projects/ucap-webmessenger-ui/src/lib/components/float-action-button.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/float-action-button.component.scss index 5886bc6b..2eb05666 100644 --- a/projects/ucap-webmessenger-ui/src/lib/components/float-action-button.component.scss +++ b/projects/ucap-webmessenger-ui/src/lib/components/float-action-button.component.scss @@ -1,7 +1,7 @@ -::ng-deep .btn-main-float { +.btn-main-float { position: absolute; - bottom: 15px; - right: 40px; + bottom: 20px; + right: 20px; z-index: 100; display: flex; flex-direction: column-reverse; @@ -14,7 +14,6 @@ margin-bottom: 5px; } button { - margin-bottom: 17px; .mat-button-wrapper { line-height: normal; } diff --git a/projects/ucap-webmessenger-ui/src/lib/components/integrated-search-form.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/integrated-search-form.component.scss index f57a1f8c..d737ead7 100644 --- a/projects/ucap-webmessenger-ui/src/lib/components/integrated-search-form.component.scss +++ b/projects/ucap-webmessenger-ui/src/lib/components/integrated-search-form.component.scss @@ -1,21 +1,21 @@ -::ng-deep .search-container { +.search-container { -webkit-app-region: no-drag; display: flex; flex-flow: row; align-items: center; - width: 240px; - max-width: 240px; color: #ffffff; font-size: 0.88rem; color: #2d3a4a; background-color: #ffffff; padding: 4px 10px; border-radius: 3px; + width: 100%; .icon-img { flex: 0 0 auto; } .mat-form-field { font-size: 0.88rem; color: #333333; + flex: 1 1 auto; } } diff --git a/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.scss index 91737c6b..8f9db9d7 100644 --- a/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.scss +++ b/projects/ucap-webmessenger-ui/src/lib/components/integrated-search.component.scss @@ -25,37 +25,26 @@ .search-scrollbar { height: 550px; } -::ng-deep .ps__rail-y { - z-index: 102; -} -::ng-deep .search-area { +.search-area { + margin: 0 -10px; .search-container { + display: flex; + flex-flow: row; + align-items: center; width: 100%; max-width: 100%; .icon-img { + flex: 0 0 auto; color: #777777; transform: translateY(-4px); } .mat-form-field { + color: #333333; + font-size: 0.88rem; color: #333333; width: 100%; margin-left: -20px; - .mat-form-field-infix { - padding-left: 26px; - .mat-form-field-label-wrapper { - .mat-form-field-label { - padding-left: 20px; - } - } - } - &:focus { - .mat-form-field-label-wrapper { - .mat-form-field-label { - padding-left: 0; - } - } - } } } } @@ -167,7 +156,7 @@ font-size: 0.8em; text-align: center; } -::ng-deep .search-result-footer { +.search-result-footer { position: relative; .mat-paginator-container { .mat-paginator-page-size { diff --git a/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.html b/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.html index 5048bf0d..61d986f8 100644 --- a/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.html +++ b/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.html @@ -82,14 +82,18 @@ class="simpleview" [checked]="simpleView" (change)="onChangToggleSimpleview($event)" - >{{ 'common.translations.simpleView' | translate }} + {{ 'common.translations.simpleView' | translate }} + {{ 'common.translations.preview' | translate }} + {{ 'common.translations.preview' | translate }} + diff --git a/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.scss index 47d517fb..0da226ea 100644 --- a/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.scss +++ b/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.scss @@ -53,7 +53,7 @@ $tablet-s-width: 768px; } } -::ng-deep .translationForm { +.translationForm { position: relative; display: flex; padding: 0 2vw; @@ -84,6 +84,23 @@ $tablet-s-width: 768px; (max-height: 600px) { width: 50%; } + } + .mat-slide-toggle { + display: inline-flex; + width: 120px; + height: unset; + + &.simpleview { + margin-right: 20px; + margin-left: auto; + } + &.preview { + } + } +} + +::ng-deep .translationForm { + .select-language { .mat-form-field-wrapper { width: 100%; line-height: 0.8em; @@ -96,21 +113,12 @@ $tablet-s-width: 768px; } } .mat-slide-toggle { - display: inline-flex; - width: 120px; - height: unset; @media screen and (max-width: #{$tablet-s-width}) { - .mat-slide-toggle-label { + label { width: 20%; flex-flow: column; - font-size: 0.9em; + font-size: 0.8em; } } - &.simpleview { - margin-right: 20px; - margin-left: auto; - } - &.preview { - } } }