diff --git a/mediarepo-ui/src/app/app.component-theme.scss b/mediarepo-ui/src/app/app.component-theme.scss
deleted file mode 100644
index e43e010..0000000
--- a/mediarepo-ui/src/app/app.component-theme.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-@mixin color($theme) {
- $color-config: mat.get-color-config($theme);
- $primary-palette: map.get($color-config, 'primary');
- $warn-palette: map.get($color-config, 'warn');
-
- body {
- background-color: darken(#303030, 5);
- color: white
- }
-
- .warn {
- background-color: mat.get-color-from-palette($warn-palette);
- color: white
- }
-}
-
-@mixin typography($theme) {
- // Get the typography config from the theme.
- $typography-config: mat.get-typography-config($theme);
-
- body {
- font-family: mat.font-family($typography-config);
- }
-}
-
-@mixin theme($theme) {
- $color-config: mat.get-color-config($theme);
- @if $color-config != null {
- @include color($theme);
- }
-
- $typography-config: mat.get-typography-config($theme);
- @if $typography-config != null {
- @include typography($theme);
- }
-}
-
diff --git a/mediarepo-ui/src/app/app.component.scss b/mediarepo-ui/src/app/app.component.scss
index bfa0fc0..5218a02 100644
--- a/mediarepo-ui/src/app/app.component.scss
+++ b/mediarepo-ui/src/app/app.component.scss
@@ -1,5 +1,16 @@
@import "src/colors";
+:host, ::ng-deep body {
+ font-family: $font-family;
+ background-color: $background;
+ color: white
+}
+
+::ng-deep .warn {
+ background-color: $warn;
+ color: white
+}
+
::ng-deep .mat-button-wrapper > ng-icon {
font-size: 26px;
}
@@ -16,3 +27,4 @@
background-color: $warn;
color: $text;
}
+
diff --git a/mediarepo-ui/src/app/components/shared/app-common/busy-dialog/busy-dialog.component.html b/mediarepo-ui/src/app/components/shared/app-common/busy-dialog/busy-dialog.component.html
index e0a5027..c744725 100644
--- a/mediarepo-ui/src/app/components/shared/app-common/busy-dialog/busy-dialog.component.html
+++ b/mediarepo-ui/src/app/components/shared/app-common/busy-dialog/busy-dialog.component.html
@@ -6,7 +6,7 @@
{{message}}
-
diff --git a/mediarepo-ui/src/app/components/shared/app-common/selectable/selectable.component.scss b/mediarepo-ui/src/app/components/shared/app-common/selectable/selectable.component.scss
index 33b3125..88d7877 100644
--- a/mediarepo-ui/src/app/components/shared/app-common/selectable/selectable.component.scss
+++ b/mediarepo-ui/src/app/components/shared/app-common/selectable/selectable.component.scss
@@ -1,5 +1,7 @@
+@import "src/colors";
+
.selectable.selected {
- background-color: #5c5c5c;
+ background-color: $background-lighter-10;
}
body {
diff --git a/mediarepo-ui/src/app/components/shared/file/file-multiview/file-gallery/file-gallery.component.scss b/mediarepo-ui/src/app/components/shared/file/file-multiview/file-gallery/file-gallery.component.scss
index ba7c863..ad8446c 100644
--- a/mediarepo-ui/src/app/components/shared/file/file-multiview/file-gallery/file-gallery.component.scss
+++ b/mediarepo-ui/src/app/components/shared/file/file-multiview/file-gallery/file-gallery.component.scss
@@ -45,6 +45,7 @@
width: 100%;
height: 100%;
border-top: 2px solid $background-darker-05;
+ background-color: $background;
.file-item {
width: 100%;
diff --git a/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.scss b/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.scss
index 655023a..8b33c96 100644
--- a/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.scss
+++ b/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.scss
@@ -85,22 +85,22 @@
cursor: pointer;
user-select: none;
font-size: 1.2em;
- transition-duration: 0.1s;
+ transition-duration: 0.2s;
width: 100%;
background-color: $background-lighter-05;
- app-tag-item {
- margin: auto auto auto 0.25em;
+ &:hover {
+ background-color: $background-lighter-10;
}
-}
-.selectable-tag:hover {
- background-color: $background-lighter-10;
-}
+ &:active {
+ cursor: pointer;
+ background-color: $background;
+ }
-.selectable-tag:active {
- cursor: pointer;
- background-color: $background;
+ app-tag-item {
+ margin: auto auto auto 0.25em;
+ }
}
cdk-virtual-scroll-viewport {
@@ -143,6 +143,11 @@ mat-divider {
.tag-input-item {
background-color: $background-lighter-10;
border-radius: 1em;
+ transition-duration: 0.2s;
+
+ &:hover {
+ background-color: $background-lighter-15;
+ }
}
mat-form-field:focus {
diff --git a/mediarepo-ui/src/app/components/shared/sidebar/file-search/filter-dialog/filter-expression-list-item/filter-expression-list-item.component.scss b/mediarepo-ui/src/app/components/shared/sidebar/file-search/filter-dialog/filter-expression-list-item/filter-expression-list-item.component.scss
index b1636ed..6508331 100644
--- a/mediarepo-ui/src/app/components/shared/sidebar/file-search/filter-dialog/filter-expression-list-item/filter-expression-list-item.component.scss
+++ b/mediarepo-ui/src/app/components/shared/sidebar/file-search/filter-dialog/filter-expression-list-item/filter-expression-list-item.component.scss
@@ -1,8 +1,10 @@
+@import "src/colors";
+
mat-list {
height: 100%;
width: 100%;
display: block;
- background-color: #353535;
+ background-color: $background;
padding: 0;
border-radius: 0.25em;
}
@@ -22,7 +24,7 @@ mat-list-item.or-filter-list-item {
}
.selected {
- background-color: #5c5c5c;
+ background-color: $background-lighter-10;
}
app-selectable {
@@ -31,5 +33,5 @@ app-selectable {
}
.or-combinator {
- color: #7dff70;
+ color: $accent-lighter-10;
}
diff --git a/mediarepo-ui/src/app/components/shared/sidebar/file-search/sort-button/sort-button.component.scss b/mediarepo-ui/src/app/components/shared/sidebar/file-search/sort-button/sort-button.component.scss
index 4448aea..fc2b800 100644
--- a/mediarepo-ui/src/app/components/shared/sidebar/file-search/sort-button/sort-button.component.scss
+++ b/mediarepo-ui/src/app/components/shared/sidebar/file-search/sort-button/sort-button.component.scss
@@ -6,4 +6,8 @@
background-color: $background-lighter-10;
text-overflow: ellipsis;
overflow: hidden;
+
+ &:hover {
+ background-color: $background-lighter-15;
+ }
}
diff --git a/mediarepo-ui/src/app/components/shared/tag/tag-item/tag-item.component.ts b/mediarepo-ui/src/app/components/shared/tag/tag-item/tag-item.component.ts
index e18418a..14155b9 100644
--- a/mediarepo-ui/src/app/components/shared/tag/tag-item/tag-item.component.ts
+++ b/mediarepo-ui/src/app/components/shared/tag/tag-item/tag-item.component.ts
@@ -1,10 +1,11 @@
-import {Component, Input} from "@angular/core";
+import {ChangeDetectionStrategy, Component, Input} from "@angular/core";
import {Tag} from "../../../../../api/models/Tag";
@Component({
selector: "app-tag-item",
templateUrl: "./tag-item.component.html",
- styleUrls: ["./tag-item.component.scss"]
+ styleUrls: ["./tag-item.component.scss"],
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TagItemComponent {
diff --git a/mediarepo-ui/src/colors.scss b/mediarepo-ui/src/colors.scss
index 7f1a2cd..ad1de7c 100644
--- a/mediarepo-ui/src/colors.scss
+++ b/mediarepo-ui/src/colors.scss
@@ -22,11 +22,17 @@ $warn-chill: #fcd349;
$text: #FFF;
$text-darker-10: darken($text, 10%);
-$background: darken(#424242, 5%);
+$background: darken(#373a46, 10%);
$background-darker-05: darken($background, 5%);
$background-darker-10: darken($background, 10%);
$background-lighter-05: lighten($background, 5%);
$background-lighter-10: lighten($background, 10%);
+$background-lighter-15: lighten($background, 15%);
// specifics
$tag-namespace: $accent-lighter-10;
+
+
+// fonts
+$typography-config: mat.get-typography-config($theme);
+$font-family: mat.font-family($typography-config);
diff --git a/mediarepo-ui/src/material-theme-correction.scss b/mediarepo-ui/src/material-theme-correction.scss
index 171ee2b..0de1762 100644
--- a/mediarepo-ui/src/material-theme-correction.scss
+++ b/mediarepo-ui/src/material-theme-correction.scss
@@ -14,17 +14,51 @@
}
.mat-dialog-container {
- background: $background;
+ background: $background-lighter-05;
}
.mat-drawer {
- background: $background;
+ background: $background !important;
}
.mat-flat-button, .mat-raised-button, .mat-fab, .mat-mini-fab {
background: $background;
}
+.mat-form-field-flex {
+ background: $background-lighter-05;
+}
+
+.mat-form-field-appearance-fill .mat-form-field-flex {
+ background: $background-lighter-05;
+}
+
+.mat-autocomplete-panel, mat-option, .mat-menu-panel {
+ background: $background-lighter-05;
+}
+
+button .mat-flat-button {
+ background: $background-lighter-05;
+}
+
+mat-option {
+ &.mat-selected {
+ background: $background-lighter-10 !important;
+ }
+
+ &:hover {
+ background: darken($background-lighter-10, 1%) !important;
+ }
+}
+
+mat-toolbar.mat-toolbar {
+ background: $background-darker-05;
+}
+
+.mat-card {
+ background: $background-lighter-10;
+}
+
// scrollbar
::-webkit-scrollbar {
diff --git a/mediarepo-ui/src/styles.scss b/mediarepo-ui/src/styles.scss
index 11a2bfa..1687cac 100644
--- a/mediarepo-ui/src/styles.scss
+++ b/mediarepo-ui/src/styles.scss
@@ -1,6 +1,5 @@
@use 'sass:map';
@use "@angular/material" as mat;
-@use 'src/app/app.component-theme' as app;
@include mat.core();
@@ -25,5 +24,4 @@ $warn-palette: map.get($color-config, 'warn');
@include mat.all-component-themes($theme);
-@include app.theme($theme);