improve dashboard UI

[portal/ric-dashboard.git] / webapp-frontend / src / app / rd.component.scss

diff --git a/webapp-frontend/src/app/rd.component.scss b/webapp-frontend/src/app/rd.component.scss
index 19c13b5..35fbb1b 100644 (file)
--- a/webapp-frontend/src/app/rd.component.scss
+++ b/webapp-frontend/src/app/rd.component.scss
@@ -26,27 +26,20 @@
   position: relative;
 }
 
-/*
-================
-    Header
-================
-*/
+/* Header */
 mat-sidenav-container, mat-sidenav-content, mat-sidenav {
-    height: 100%;
+  height: 100%;
 }
 
 mat-sidenav {
-    width: 250px;
+  width: 250px;
 }
 
 main {
-    padding: 10px;
+  padding: 10px;
 }
 
-/*
-    Slide Menu
-= = = = = = = = =
-*/
+/* Slide Menu */
 .side-menu__dark {
   color: white;
   background: gray;
@@ -109,6 +102,7 @@ main {
 .slide-menu-active {
   transform: none;
 }
+
 .menu-header.menu-header__dark {
   background: #2B244D;
 }
@@ -135,7 +129,7 @@ mat-drawer-content {
 }
 
 .menumargin-top {
-    margin-top: 10px;
+  margin-top: 10px;
 }
 
 .greeting__text {
@@ -190,12 +184,12 @@ mat-drawer-content {
   max-width: 4rem;
 }
 
-.home_bg_image{
-    height:40em;
-    background-size:cover;
-    width:auto;
-    background-image:url('../assets/intelligence.png');
-    background-position:50% 50%;
+.home_bg_image {
+  height: 40em;
+  background-size: cover;
+  width: auto;
+  background-image: url('../assets/intelligence.png');
+  background-position: 50% 50%;
 }
 
 /*Header*/
@@ -348,11 +342,7 @@ mat-drawer-content {
   transition: opacity 300ms linear;
 }
 
-/*
-================-
-    Footer
-================
-*/
+/* Footer */
 .main__footer {
   background: transparent;
   z-index: 100;
@@ -363,14 +353,59 @@ mat-drawer-content {
   color: white;
 }
 
+.main-footer-licence {
+  float: left;
+}
+
 .main-footer__bg-dark {
   opacity: 1;
   background: linear-gradient(to bottom, #B290FF, #2E1D65);
   transition: opacity 300ms linear;
 }
 
+.main-footer-instance {
+  margin-right: 10px;
+  float: right;
+  color: white;
+  letter-spacing: 0.1rem;
+  font-size: 15px;
+}
+
+.main-footer-instance:hover {
+  color: lightgray;
+}
+
 @media only screen and (max-width: 300px) {
   .slide-menu {
     width: 100%;
   }
 }
+
+.selector-label {
+  margin-right: 20px;
+}
+
+.menu-footer {
+  display: grid;
+  width: 100%;
+  position: absolute;
+  bottom: 10px;
+}
+
+a {
+  text-decoration: none;
+  color: black;
+}
+
+.dark a {
+  color: white;
+}
+
+a:hover, a:active {
+  color: lightgray;
+}
+
+.nav-caption {
+  display: inline-block;
+  padding-left: 6px;
+}