[ADF-2337] Fix viewer dark theme issues (#3020)

* Fix viewer dark theme issues

* Further fixes
This commit is contained in:
Popovics András
2018-03-06 09:19:37 +00:00
committed by Denys Vuika
parent c1f0537a0d
commit f41498658b
3 changed files with 14 additions and 5 deletions

View File

@@ -1,4 +1,6 @@
@mixin adf-image-viewer-theme($theme) { @mixin adf-image-viewer-theme($theme) {
$background: map-get($theme, background);
.adf-image-viewer { .adf-image-viewer {
.image-container { .image-container {
display: flex; display: flex;
@@ -22,7 +24,7 @@
.adf-toolbar .mat-toolbar { .adf-toolbar .mat-toolbar {
max-height: 48px; max-height: 48px;
background-color: mat-color($primary, default-contrast, 1); background-color: mat-color($background, card);
border-width: 0; border-width: 0;
border-radius: 2px; border-radius: 2px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);

View File

@@ -134,7 +134,7 @@
<div *ngIf="!isLoading" fxLayout="row" fxFlex="1 1 auto"> <div *ngIf="!isLoading" fxLayout="row" fxFlex="1 1 auto">
<ng-container *ngIf="allowSidebar && showSidebar"> <ng-container *ngIf="allowSidebar && showSidebar">
<div class="adf-viewer__sidebar" fxFlexOrder="{{sidebarPosition === 'left'? 1 : 4 }}"> <div class="adf-viewer__sidebar adf-viewer__sidebar__{{sidebarPosition}}" fxFlexOrder="{{sidebarPosition === 'left'? 1 : 4 }}">
<ng-container *ngIf="sidebarTemplate"> <ng-container *ngIf="sidebarTemplate">
<ng-container *ngTemplateOutlet="sidebarTemplate;context:sidebarTemplateContext"></ng-container> <ng-container *ngTemplateOutlet="sidebarTemplate;context:sidebarTemplateContext"></ng-container>
</ng-container> </ng-container>

View File

@@ -27,7 +27,7 @@
&-toolbar { &-toolbar {
.mat-toolbar { .mat-toolbar {
background-color: mat-color($primary, default-contrast); background-color: mat-color($background, card, 0.87);
} }
} }
@@ -129,10 +129,17 @@
width: 350px; width: 350px;
display: block; display: block;
padding: 0; padding: 0;
background-color: #fafafa; background-color: mat-color($background, background);
box-shadow: 0 2px 4px 0 mat-color($foreground, text, 0.27); box-shadow: 0 2px 4px 0 mat-color($foreground, text, 0.27);
border-left: 1px solid mat-color($foreground, text, 0.07);
overflow: auto; overflow: auto;
&__right {
border-left: 1px solid mat-color($foreground, text, 0.07);
}
&__left {
border-right: 1px solid mat-color($foreground, text, 0.07);
}
} }
&__thumbnails { &__thumbnails {