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 93b3aef..35fbb1b 100644 (file)
--- a/webapp-frontend/src/app/rd.component.scss
+++ b/webapp-frontend/src/app/rd.component.scss
@@ -26,27 +26,24 @@
   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;
+}
 
 .side-menu__container {
   position: fixed;
@@ -106,6 +103,10 @@ main {
   transform: none;
 }
 
+.menu-header.menu-header__dark {
+  background: #2B244D;
+}
+
 .menu-header {
   background: linear-gradient(to right, #00FF9B, #5f84fb);
   display: grid;
@@ -128,7 +129,7 @@ mat-drawer-content {
 }
 
 .menumargin-top {
-    margin-top: 10px;
+  margin-top: 10px;
 }
 
 .greeting__text {
@@ -183,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*/
@@ -341,16 +342,10 @@ mat-drawer-content {
   transition: opacity 300ms linear;
 }
 
-/*
-================-
-    Footer
-================
-*/
+/* Footer */
 .main__footer {
   background: transparent;
-  margin: 10px;
   z-index: 100;
-  height: 35px;
 }
 
 .main__footer-dark {
@@ -358,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;
+}