::ng-deep .mat-list-base { .theme-select.mat-list-item { position: relative; height: 160px; .mat-list-item-content { flex-direction: column; } } } ::ng-deep .theme-list { position: relative; display: flex; flex-flow: row; width: 100%; margin: 10px; height: auto !important; .mat-tab-header { position: relative; width: 100% !important; .mat-tab-labels { position: relative; width: 100%; flex-flow: row !important; .mat-tab-label { width: 140px; height: 120px; .mat-tab-label-content { position: relative; flex-flow: column; width: 100%; } } } .mat-ink-bar { display: none; } } .mat-tab-body-wrapper { border-left: none; } } .theme-item { width: 140px; height: 98px; margin-right: 10px; border: 1px solid #dddddd; background-size: 100% auto; background-repeat: no-repeat; opacity: 0.7; } .theme-box { width: 140px; height: 98px; border: 1px solid #dddddd; background-size: 100% auto; background-repeat: no-repeat; &.default-theme { background-image: url('../../../../ucap-webmessenger-app/src/assets/images/theme/theme-default.png'); } &.lg-red-theme { background-image: url('../../../../ucap-webmessenger-app/src/assets/images/theme/theme-lgRed.png'); } } .brightness { position: relative; width: 100%; display: flex; flex-direction: row; }