changing styles

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;