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;