.mat-list-item { margin-bottom: 10px; } .set-general { .theme-select { position: relative; width: 100%; height: 160px; .theme-list { position: relative; width: 100%; height: 160px; .theme-item { width: 140px; height: 98px; margin-right: 10px; border: 1px solid #dddddd; background-size: 100% auto; background-repeat: no-repeat; opacity: 0.7; } } } } ::ng-deep .theme-list { .mat-tab-header { width: 100%; .mat-tab-labels { position: relative; width: 100%; flex-direction: row; .mat-tab-label { width: 140px; height: 120px; &.mat-tab-label-active { opacity: 1; } .mat-tab-label-content { position: relative; flex-flow: column; width: 100%; } } } } .mat-tab-body-wrapper { border: none; } } .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; } .mat-divider { position: relative; padding-top: 10px; }