diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.css index 4e72a45c8..74c343fb9 100644 --- a/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.css +++ b/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.css @@ -12,6 +12,7 @@ } .row-preview-sidebar_open { + position: relative; background-color: var(--mat-sidenav-content-background-color); border-left: solid 1px rgba(0, 0, 0, 0.12); opacity: 1; @@ -40,12 +41,17 @@ } .row-preview-sidebar__header { + position: sticky; + top: 0; + background-color: inherit; display: flex; align-items: center; justify-content: space-between; padding-top: 20px; + padding-bottom: 20px; padding-left: 16px; padding-right: 16px; + z-index: 1; } .row-preview-sidebar__title { diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html b/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html index 55c64baa2..24c1b89d8 100644 --- a/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html +++ b/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html @@ -23,8 +23,6 @@

Preview

-
- Related records diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css index 1fbb6c79a..9fd3d514e 100644 --- a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css +++ b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css @@ -223,6 +223,30 @@ background-color: #E8ECEE !important; } +@media (prefers-color-scheme: dark) { + ::ng-deep .active-filters .mat-mdc-chip { + --mdc-chip-container-color: #3a4a5c !important; + --mdc-chip-elevated-container-color: #3a4a5c !important; + --mdc-chip-label-text-color: rgba(255, 255, 255, 0.87) !important; + background-color: #3a4a5c !important; + color: rgba(255, 255, 255, 0.87) !important; + } + + ::ng-deep .active-filters .mat-mdc-chip:hover { + --mdc-chip-container-color: #3a4a5c !important; + --mdc-chip-elevated-container-color: #3a4a5c !important; + background-color: #3a4a5c !important; + } + + ::ng-deep .active-filters .mdc-evolution-chip__cell { + background-color: #3a4a5c !important; + } + + ::ng-deep .active-filters .mdc-evolution-chip__cell:hover { + background-color: #3a4a5c !important; + } +} + .db-table-manage-columns-button__count { margin-left: 2px; } @@ -273,7 +297,7 @@ } .table-surface { - margin-bottom: 24px; + margin-bottom: 72px; } @media (prefers-color-scheme: dark) { diff --git a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.css b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.css index c16ea7a84..e4f4933a0 100644 --- a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.css +++ b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.css @@ -366,47 +366,49 @@ @media (prefers-color-scheme: dark) { ::ng-deep .static-filter-chip .mat-mdc-chip { - --mdc-chip-container-color: #E8ECEE !important; - --mdc-chip-elevated-container-color: #E8ECEE !important; - background-color: #E8ECEE !important; + --mdc-chip-container-color: #3a4a5c !important; + --mdc-chip-elevated-container-color: #3a4a5c !important; + --mdc-chip-label-text-color: rgba(255, 255, 255, 0.87) !important; + background-color: #3a4a5c !important; + color: rgba(255, 255, 255, 0.87) !important; } ::ng-deep .static-filter-chip .mat-mdc-chip:hover { - --mdc-chip-container-color: #E8ECEE !important; - --mdc-chip-elevated-container-color: #E8ECEE !important; - background-color: #E8ECEE !important; + --mdc-chip-container-color: #3a4a5c !important; + --mdc-chip-elevated-container-color: #3a4a5c !important; + background-color: #3a4a5c !important; } ::ng-deep .static-filter-chip .mat-mdc-chip:active { - --mdc-chip-container-color: #E8ECEE !important; - --mdc-chip-elevated-container-color: #E8ECEE !important; - background-color: #E8ECEE !important; + --mdc-chip-container-color: #3a4a5c !important; + --mdc-chip-elevated-container-color: #3a4a5c !important; + background-color: #3a4a5c !important; } ::ng-deep .static-filter-chip .mdc-evolution-chip__cell { - background-color: #E8ECEE !important; + background-color: #3a4a5c !important; } ::ng-deep .static-filter-chip .mdc-evolution-chip__cell:hover { - background-color: #E8ECEE !important; + background-color: #3a4a5c !important; } ::ng-deep .static-filter-chip .mat-mdc-chip.mdc-evolution-chip--with-primary-icon { - --mdc-chip-container-color: #E8ECEE !important; - --mdc-chip-elevated-container-color: #E8ECEE !important; - background-color: #E8ECEE !important; + --mdc-chip-container-color: #3a4a5c !important; + --mdc-chip-elevated-container-color: #3a4a5c !important; + background-color: #3a4a5c !important; } ::ng-deep .static-filter-chip .mat-mdc-chip.mdc-evolution-chip--with-primary-icon:hover { - --mdc-chip-container-color: #E8ECEE !important; - --mdc-chip-elevated-container-color: #E8ECEE !important; - background-color: #E8ECEE !important; + --mdc-chip-container-color: #3a4a5c !important; + --mdc-chip-elevated-container-color: #3a4a5c !important; + background-color: #3a4a5c !important; } ::ng-deep .static-filter-chip .mat-mdc-chip.mdc-evolution-chip--with-primary-icon:active { - --mdc-chip-container-color: #E8ECEE !important; - --mdc-chip-elevated-container-color: #E8ECEE !important; - background-color: #E8ECEE !important; + --mdc-chip-container-color: #3a4a5c !important; + --mdc-chip-elevated-container-color: #3a4a5c !important; + background-color: #3a4a5c !important; } }