better textboxes

src/app/modules/presentation/remote/remote.component.less

@@ -1,7 +1,7 @@
 @import "../../../../styles/shadow";
 
 .song {
-  background: #fffe;
+  background: #fff5;
   width: 100%;
   padding: 10px;
   border-radius: 8px;

src/app/modules/songs/song/song.component.html

@@ -39,7 +39,7 @@
     </app-button-row>
 
   </app-card>
-  <app-card *ngIf="!!(files$|async)" heading="Anhänge">
+  <app-card *ngIf="(files$|async).length>0" heading="Anhänge">
     <p *ngFor="let file of (files$|async)">
       <app-file [file]="file"></app-file>
     </p>

src/app/modules/user/login/login.component.less

@@ -8,12 +8,14 @@ p.error {
 }
 
 .login {
+  backdrop-filter: blur(12px);
   padding: 20px;
   width: 400px;
   margin: 100px 0;
-  background: #fffc;
+  background: #fffa;
   border-radius: 8px;
   font-size: 18px;
+  position: relative;
   @media screen and (max-width: 860px) {
     margin: 20px;
     box-sizing: border-box;

src/app/widget-modules/components/application-frame/navigation/navigation.component.less

@@ -8,10 +8,11 @@ nav {
     left: 0;
     right: 0;
     height: 50px;
-    background: #222;
+    background: #222b;
     color: #fff;
     z-index: 1;
-    .card-3;
+    box-shadow: 0px -5px 20px 4px rgba(0, 0, 0, 0.39), 1px 0px 6px 4px rgba(0, 0, 0, 0.53);
+    backdrop-filter: blur(10px);
     transition: all 300ms ease-in-out;
 
     display: flex;

src/app/widget-modules/components/card/card.component.less

@@ -1,10 +1,10 @@
 @import "../../../../styles/shadow";
 
 .card {
-  .card-3;
   margin: 20px;
   border-radius: 8px;
   background: #fffb;
+  backdrop-filter: blur(12px);
   overflow: hidden;
   width: 800px;
   position: relative;

src/styles/styles.less

@@ -20,6 +20,8 @@ body {
   background: -webkit-linear-gradient(to bottom, #373b44, @primary-color); /* Chrome 10-25, Safari 5.1-6 */
   background: linear-gradient(to bottom, #373b44, @primary-color); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
   background-attachment: fixed;
+  background: url("/assets/background.png");
+  background-size: cover;
 }
 
 p {
@@ -100,3 +102,23 @@ select:-webkit-autofill:focus {
   -webkit-box-shadow: 0 0 0px 1000px #0000 inset;
   transition: background-color 5000s ease-in-out 0s;
 }
+
+mat-dialog-container.mat-dialog-container {
+  background: #fffb;
+  backdrop-filter: blur(8px);
+  border-radius: 8px;
+}
+
+.mat-form-field-outline {
+  background: #fff4;
+  border-radius: 4px;
+}
+
+.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-outline-gap {
+  border-top-color: inherit !important;
+}
+
+.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
+.mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
+  transform: translateY(-1.0em) scale(0.75);
+}