Add new monitor variables. Add list xlarge modifier. Add some color variables

css/fonts.css

@@ -1,11 +1,9 @@
-
-/* Aileron*/
+/* Aileron */
 
 @font-face {  font-family: "aileron";  font-style: italic;  font-weight: 100;   src: url("../media/fonts/aileron/aileron-thinitalic.eot");  src: url("../media/fonts/aileron/aileron-thinitalic.eot?#iefix") format('embedded-opentype'), url("../media/fonts/aileron/aileron-thinitalic.woff2") format('woff2'), url("../media/fonts/aileron/aileron-thinitalic.woff") format('woff'), url("../media/fonts/aileron/aileron-thinitalic.ttf") format('truetype');  }
 
 @font-face {  font-family: "aileron";  font-style: italic;  font-weight: 100;   src: url("../media/fonts/aileron/aileron-thin.eot");  src: url("../media/fonts/aileron/aileron-thin.eot?#iefix") format('embedded-opentype'), url("../media/fonts/aileron/aileron-thin.woff2") format('woff2'), url("../media/fonts/aileron/aileron-thin.woff") format('woff'), url("../media/fonts/aileron/aileron-thin.ttf") format('truetype');  }
 
-
 @font-face {  font-family: "aileron";  font-style: italic;  font-weight: 300;   src: url("../media/fonts/aileron/aileron-lightitalic.eot");  src: url("../media/fonts/aileron/aileron-lightitalic.eot?#iefix") format('embedded-opentype'), url("../media/fonts/aileron/aileron-lightitalic.woff2") format('woff2'), url("../media/fonts/aileron/aileron-lightitalic.woff") format('woff'), url("../media/fonts/aileron/aileron-lightitalic.ttf") format('truetype');  }
 
 @font-face {  font-family: "aileron";  font-style: normal;  font-weight: 300;   src: url("../media/fonts/aileron/aileron-light.eot");  src: url("../media/fonts/aileron/aileron-light.eot?#iefix") format('embedded-opentype'), url("../media/fonts/aileron/aileron-light.woff2") format('woff2'), url("../media/fonts/aileron/aileron-light.woff") format('woff'), url("../media/fonts/aileron/aileron-light.ttf") format('truetype');  }

css/import.css

@@ -2,15 +2,17 @@
 @import "theme.css";
 @import "theme.update.css";
 
+@import "structure/variables.css";
 @import "structure/height.css";
 @import "structure/text.css";
-@import "structure/variables.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 "openaire.css";
 

css/openaire.css

@@ -1,7 +1 @@
-/*new css overrides common to all dashboards*/
-
-
-/*White background */
-navbar .uk-navbar-container, bottom {
-    background-color: white !important;
-}
+/* Overrides common to all dashboards*/

css/structure/background.css

@@ -1,11 +1,12 @@
 :root{
-   --primary-background: var(--primary-color);
+    --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-color: var(--inverse-color);
+    --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-color: var(--inverse-color);
+    --secondary-background-color: var(--light-color);
 }
+
 .uk-background-primary, .uk-section-primary{
     background-color: var(--primary-background);
     background-image: var(--primary-background-image);

css/structure/button.css

@@ -4,9 +4,9 @@
   --button-primary-background-image-hover: none;
   --button-secondary-background: var(--secondary-color);
   --button-secondary-background-image: none;
-  --button-primary-color: var(--inverse-color);
-  --button-primary-color-hover: var(--inverse-color);
-  --button-secondary-color: var(--inverse-color);
+  --button-primary-color: var(--light-color);
+  --button-primary-color-hover: var(--light-color);
+  --button-secondary-color: var(--light-color);
 }
 
 .uk-button-primary {

css/structure/height.css

@@ -1,4 +1,4 @@
-/** These classes apply a height or max-height of 150px. */
+/** These classes apply a height or max-height of 75px. */
 .uk-height-xsmall {
   height: 75px;
 }

css/structure/list.css

@@ -0,0 +1,3 @@
+.uk-list-xlarge>*>ul, .uk-list-xlarge>:nth-child(n+2) {
+  margin-top: 40px;
+}

css/structure/navbar.css

@@ -0,0 +1,7 @@
+:root {
+  --navbar-background-color: var(--light-color);
+}
+
+navbar .uk-navbar-container {
+  background-color: var(--navbar-background-color) !important;
+}

css/structure/text.css

@@ -1,5 +1,5 @@
 :root {
-    --font-default-color: #4b4b4b;
+    --font-default-color: var(--grey-color);
     --font-primary-color: var(--primary-color);
     --font-secondary-color: var(--secondary-color);
 }

css/structure/variables.css

@@ -1,10 +1,14 @@
 :root {
   --primary-color: #211F7E;
   --secondary-color: #3086ED;
-  --inverse-color: #ffffff;
+  --dark-color: #2C2C2C;
+  --grey-color: #4b4b4b;
+  --light-color: #ffffff;
 
   --explore-color: #D95F2D;
   --provide-color: #37C7E9;
-  --monitor-color: #8DCA26;
+  --monitor-color: #56A601;
+  --monitor-gradient-start: #8BCC00;
+  --monitor-gradient-end: #228001;
   --connect-color: #EBB13E;
 }