Add tab and dropdown css. Add ovveride css for links, navbar

css/import.css

@@ -3,19 +3,21 @@
 @import "theme.update.css";
 
 @import "structure/variables.css";
-@import "structure/height.css";
-@import "structure/text.css";
-@import "structure/button.css";
-@import "structure/link.css";
-@import "structure/background.css";
-@import "structure/icons.css";
-@import "structure/breadcrumbs.css";
-@import "structure/card.css";
-@import "structure/navbar.css";
-@import "structure/list.css";
 @import "structure/alert.css";
-@import "structure/slider.css";
+@import "structure/background.css";
+@import "structure/breadcrumb.css";
+@import "structure/button.css";
+@import "structure/card.css";
+@import "structure/dropdown.css";
+@import "structure/height.css";
+@import "structure/icons.css";
 @import "structure/input.css";
+@import "structure/link.css";
+@import "structure/list.css";
+@import "structure/navbar.css";
+@import "structure/slider.css";
+@import "structure/text.css";
+@import "structure/tab.css";
 
 @import "openaire.css";
 

css/openaire.css

@@ -1 +1,5 @@
 /* Overrides common to all dashboards*/
+.graph {
+  --link-color: var(--graph-color);
+  --font-primary-color: var(--graph-color);
+}

css/structure/background.css

@@ -1,9 +1,9 @@
 :root{
     --primary-background: var(--primary-color);
-    --primary-background-image: linear-gradient(51deg, var(--primary-color) 50%,var(--primary-color) 75%, var(--secondary-color) 100%);
+    --primary-background-image: linear-gradient(51deg, var(--primary-light-color) 0%, var(--primary-dark-color) 100%);
     --primary-background-color: var(--light-color);
     --secondary-background: var(--secondary-color);
-    --secondary-background-image: linear-gradient(51deg, var(--primary-color) 50%,var(--primary-color) 75%, var(--secondary-color) 100%);
+    --secondary-background-image: none;
     --secondary-background-color: var(--light-color);
 }
 

css/structure/dropdown.css

@@ -0,0 +1,30 @@
+:root {
+  --dropdown-background: var(--light-color);
+  --dropdown-color: var(--grey-color);
+  --dropdown-background-hover: var(--light-blue);
+  --dropdown-font-size: 14px;
+}
+
+
+.uk-navbar-dropdown, .uk-dropdown {
+  background: var(--dropdown-background);
+  border-radius: 0;
+  padding: 5px 0;
+}
+
+.uk-navbar-dropdown-nav > li > a, .uk-dropdown-nav > li > a {
+  padding: 5px 30px;
+  background: transparent;
+  color: var(--dropdown-color);
+  font-weight: normal;
+  font-size: 14px;
+}
+
+.uk-navbar-dropdown-nav > li:hover > a, .uk-dropdown-nav > li:hover > a,
+.uk-navbar-dropdown-nav > li.uk-active > a, .uk-dropdown-nav > li.uk-active > a {
+  background: var(--dropdown-background-hover);
+}
+
+.uk-nav > .uk-nav-divider {
+  margin: 5px 0;
+}

css/structure/link.css

@@ -1,13 +1,25 @@
-/*:root{
+:root {
-    --link-color: var(--primary-color);
+  --link-color: var(--primary-color);
-    --link-color-hover: var(--secondary-color);
+  --link-color-hover: var(--secondary-color);
 }
 
-
+/*.uk-button-text, .uk-button-text:hover {
-.uk-link, a{
+  color: var(--link-color);
-    color:var(--link-color);
 }
 
-.uk-link:hover, a:hover{
+.uk-button-text.uk-disabled, .uk-button-text:hover.uk-disabled {
-    color:var(--link-color-hover);
+  color: var(--disable-color);
 }*/
+
+.uk-link, a {
+  color: var(--link-color);
+}
+
+.uk-link-muted {
+  color: var(--disable-color);
+}
+
+.uk-link:hover, .uk-link-toggle:hover, .uk-link-muted:hover, .uk-link-text:hover, .uk-link-heading:hover {
+  color: var(--link-color-hover) !important;
+  text-decoration: underline !important;
+}

css/structure/navbar.css

@@ -1,9 +1,33 @@
 :root {
   --navbar-background-color: var(--light-color);
   --navbar-background-image: none;
+  --navbar-color: var(--grey-color);
+  --navbar-color-hover: var(--link-color);
+  --navbar-height: 90px;
+  --navbar-shadow:  0px 3px 6px #0000001A;
 }
 
 navbar .uk-navbar-container {
-  background-color: var(--navbar-background-color) !important;
+  background: var(--navbar-background-color) !important;
   background-image: var(--navbar-background-image) !important;
+  height: var(--navbar-height);
+  border-bottom: none !important;
+  box-shadow: var(--navbar-shadow);
+}
+
+.uk-navbar-container .uk-logo {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.uk-navbar-container .uk-logo > img {
+  max-height: calc(var(--navbar-height) - 20px);
+}
+
+.uk-navbar-item, .uk-navbar-nav > li > a, .uk-navbar-toggle {
+  min-height: var(--navbar-height);
+}
+
+.uk-navbar-nav > li.uk-active >a::before, .uk-navbar-nav >li:hover >a::before, .uk-navbar-nav >li >a[aria-expanded=true]::before {
+  opacity: 0;
 }

css/structure/tab.css

@@ -0,0 +1,28 @@
+:root {
+  --tab-bar-border: 2px solid var(--muted-color);
+  --tab-color: var(--placeholder-color);
+  --tab-color-hover: var(--secondary-color);
+  --tab-active-border: 3px solid var(--secondary-color);
+  --tab-active-color: var(--primary-color);
+}
+
+.uk-tab::before {
+  border-bottom: var(--tab-bar-border);
+  box-shadow: none;
+}
+
+.uk-tab > li > a {
+  color: var(--tab-color);
+  font-weight: normal;
+  border-bottom: none;
+}
+
+.uk-tab > * > a:hover  {
+  color: var(--tab-color-hover);
+}
+
+.uk-tab> li.uk-active > a {
+  color: var(--tab-active-color);
+  border-bottom: var(--tab-active-border);
+  font-weight: 600;
+}

css/structure/variables.css

@@ -9,9 +9,11 @@
   --dark-color: #2C2C2C;
   --grey-color: #4B4B4B;
   --placeholder-color: #8E8E8E;
+  --disable-color: #B3B3B3;
   --muted-color: #EAEAEA;
   --light-color: #FFFFFF;
   --default-color: #F9F9F9;
+  --light-blue: #F4F8F9;
 
   --explore-color: #D95F2D;
   --provide-color: #37C7E9;
@@ -20,6 +22,8 @@
   --monitor-color-rgb: 86, 166, 1;
   --monitor-light-color: #8BCC00;
   --monitor-dark-color: #228001;
-  /**/
+  /* Connect */
   --connect-color: #EBB13E;
+  /* Graph */
+  --graph-color: #FA193E;
 }