changing styles

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

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

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

@@ -1,16 +1,17 @@
 @import "../../../../../../styles/styles";
 
 a {
+  opacity: 0.8;
   display: block;
-  height: 60px;
-  color: @navigation-link-color;
-  font-size: 20px;
+  height: 50px;
+  font-size: 16px;
   font-weight: bold;
   text-decoration: none;
-  padding: 20px;
+  padding: 15px;
   box-sizing: border-box;
   background: transparent;
   transition: @transition;
+  border-color: #222;
 
   fa-icon {
     display: inline-block;
@@ -25,7 +26,8 @@ a {
   }
 
   &:hover {
-    background: #eee;
+    opacity: 0.9;
+    border-bottom: 5px solid #555;
 
     fa-icon {
       transform: scale(1.2);
@@ -33,8 +35,8 @@ a {
   }
 
   &.active {
-    background: @primary-color;
-    color: #fff;
+    border-bottom: 5px solid @primary-color;
+    opacity: 1;
 
     fa-icon {
       transform: scale(1.3);

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

@@ -7,8 +7,9 @@ nav {
     top: 0;
     left: 0;
     right: 0;
-    height: 60px;
-    background: @navigation-background;
+    height: 50px;
+    background: #222;
+    color: #fff;
     z-index: 1;
     .card-3;
     transition: all 300ms ease-in-out;

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

@@ -7,7 +7,7 @@
   background: #fffb;
   overflow: hidden;
   width: 800px;
-  transition: 300ms all ease-in-out;
+
   @media screen and (max-width: 860px) {
     width: 100vw;
     border-radius: 0px;

src/styles/styles.less

@@ -1,7 +1,6 @@
 @primary-color: #4286f4;
 
 @navigation-background: #fffffff1;
-@navigation-link-color: #555;
 
 @transition: all 300ms ease-in-out;
 
@@ -18,8 +17,8 @@ body {
   font-size: 14px;
 
   background: #373b44; /* fallback for old browsers */
-  background: -webkit-linear-gradient(to top, #373b44, #4286f4); /* Chrome 10-25, Safari 5.1-6 */
-  background: linear-gradient(to top, #373b44, #4286f4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+  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;
 }
 
@@ -28,11 +27,15 @@ p {
 }
 
 h1, h2, h3, h4 {
-  color: @navigation-link-color;
+  opacity: 0.5;
   padding: 0;
   margin: 0 0 20px 0;
 }
 
+a {
+  color: inherit;
+}
+
 .mat-form-field {
   width: 100%;
 }
@@ -47,11 +50,14 @@ h1, h2, h3, h4 {
 
 
 .content > *:not(router-outlet) {
-  margin-top: 60px;
   display: flex;
   justify-content: center;
 }
 
+.content {
+  padding-top: 50px;
+}
+
 .btn-icon {
   opacity: 0.2;
   transition: all 300ms ease-in-out;