diff --git a/ui-ngx/src/styles.scss b/ui-ngx/src/styles.scss index fe331a7b8d..369d83ec27 100644 --- a/ui-ngx/src/styles.scss +++ b/ui-ngx/src/styles.scss @@ -568,10 +568,16 @@ mat-label { .mat-toolbar.mat-mdc-table-toolbar .mat-mdc-form-field.mat-form-field-appearance-fill, .mat-mdc-form-field.mat-form-field-appearance-fill.tb-appearance-transparent { .mdc-text-field--filled { + &:before { + content: none; + } background-color: transparent; padding: 0; } .mat-mdc-form-field-focus-overlay { + &:before { + content: none; + } background-color: transparent; } .mat-mdc-select-arrow-wrapper { diff --git a/ui-ngx/src/theme-overwrites.scss b/ui-ngx/src/theme-overwrites.scss index 5f8c7e76db..0644ecccd9 100644 --- a/ui-ngx/src/theme-overwrites.scss +++ b/ui-ngx/src/theme-overwrites.scss @@ -22,13 +22,43 @@ @mixin _mat-form-field-overwrites($primary, $config-or-theme) { .mat-mdc-form-field.mat-form-field-appearance-fill { .mdc-text-field--filled { - background-color: rgba(mat.get-color-from-palette($primary), 0.03); + &:before { + content: ""; + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + background-color: mat.get-color-from-palette($primary); + opacity: 0.03; + } + background-color: transparent; &:not(.mdc-text-field--disabled) { - background-color: rgba(mat.get-color-from-palette($primary), 0.06); + &:before { + content: ""; + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + background-color: mat.get-color-from-palette($primary); + opacity: 0.06; + } + background-color: transparent; } } .mat-mdc-form-field-focus-overlay { - background-color: rgba(mat.get-color-from-palette($primary), 0.87); + &:before { + content: ""; + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + background-color: mat.get-color-from-palette($primary); + opacity: 0.87; + } + background-color: transparent; } } } diff --git a/ui-ngx/src/theme.scss b/ui-ngx/src/theme.scss index 29b19c9431..9aa3e61d39 100644 --- a/ui-ngx/src/theme.scss +++ b/ui-ngx/src/theme.scss @@ -243,6 +243,22 @@ $tb-dark-theme: map_merge($tb-dark-theme, $color); div.tb-dashboard-page.mobile-app { @include mat-fab-toolbar-inverse-theme($tb-theme); } + + ::-webkit-scrollbar { + width: 6px; + height: 6px; + } + + ::-webkit-scrollbar-track { + background: transparent; + } + + ::-webkit-scrollbar-thumb { + background: rgba(203, 203, 203, 0.8); + &:hover { + background: rgba(165, 165, 165, 0.65); + } + } } .tb-default {