ng-deep 정리중(6차)- 통합검색, 뷰어 플레이어

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

@@ -346,3 +346,6 @@
     }
   }
 }
+.integrated-search {
+  width: 240px;
+}

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;

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;
-    }
-  }
-}
-*/

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;
-}

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 {
+//viewr 플레이어 공통
-  width: 94%;
+::ng-deep .viewer-bottom {
-}
+  .mat-slider-horizontal {
-
+    .mat-slider-track-background {
-::ng-deep .mat-slider-horizontal .mat-slider-track-background {
       background-color: #999999 !important;
-}
+    }
-::ng-deep
+    &.mat-slider-min-value {
-  .mat-slider-min-value:not(.mat-slider-thumb-label-showing)
+      &:not(.mat-slider-thumb-label-showing) {
         .mat-slider-thumb {
           border-color: #999999 !important;
+        }
+      }
+    }
+  }
 }

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;
+  bottom: 20px;
-  right: 40px;
+  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;
     }

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;
   }
 }

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 {

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 }}</mat-slide-toggle
+      >
+        {{ 'common.translations.simpleView' | translate }}
+      </mat-slide-toggle
     >
     <mat-slide-toggle
       labelPosition="before"
       class="preview"
       [checked]="preView"
       (change)="onChangTogglePreview($event)"
-      >{{ 'common.translations.preview' | translate }}</mat-slide-toggle
+      >
+        {{ 'common.translations.preview' | translate }}
+      </mat-slide-toggle
     >
   </form>
 </div>

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 {
-    }
   }
 }