Add new uikit js. Add pills alternative. Add shadows, width. Rename some variables to start with the file name

css/fonts.css

@@ -1,35 +1,4 @@
-/*
-!* 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: normal;  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');  }
-
-@font-face {  font-family: "aileron";  font-style: italic;  font-weight: 400;   src: url("../media/fonts/aileron/aileron-italic.eot");  src: url("../media/fonts/aileron/aileron-italic.eot?#iefix") format('embedded-opentype'), url("../media/fonts/aileron/aileron-italic.woff2") format('woff2'), url("../media/fonts/aileron/aileron-italic.woff") format('woff'), url("../media/fonts/aileron/aileron-italic.ttf") format('truetype');  }
-
-@font-face {  font-family: "aileron";  font-style: normal;  font-weight: 400;   src: url("../media/fonts/aileron/aileron-regular.eot");  src: url("../media/fonts/aileron/aileron-regular.eot?#iefix") format('embedded-opentype'), url("../media/fonts/aileron/aileron-regular.woff2") format('woff2'), url("../media/fonts/aileron/aileron-regular.woff") format('woff'), url("../media/fonts/aileron/aileron-regular.ttf") format('truetype');  }
-
-!*
-@font-face {  font-family: "aileron";  font-style: italic;  font-weight: 500;   src: url("../media/fonts/aileron/aileron-mediumitalic.eot");  src: url("../media/fonts/aileron/aileron-mediumitalic.eot?#iefix") format('embedded-opentype'), url("../media/fonts/aileron/aileron-mediumitalic.woff2") format('woff2'), url("../media/fonts/aileron/aileron-mediumitalic.woff") format('woff'), url("../media/fonts/aileron/aileron-mediumitalic.ttf") format('truetype');  }
-
-@font-face {  font-family: "aileron";  font-style: normal;  font-weight: 500;   src: url("../media/fonts/aileron/aileron-medium.eot");  src: url("../media/fonts/aileron/aileron-medium.eot?#iefix") format('embedded-opentype'), url("../media/fonts/aileron/aileron-medium.woff2") format('woff2'), url("../media/fonts/aileron/aileron-medium.woff") format('woff'), url("../media/fonts/aileron/aileron-medium.ttf") format('truetype');  }
-*!
-
-@font-face {  font-family: "aileron";  font-style: italic;  font-weight: 700;   src: url("../media/fonts/aileron/aileron-bolditalic.eot");  src: url("../media/fonts/aileron/aileron-bolditalic.eot?#iefix") format('embedded-opentype'), url("../media/fonts/aileron/aileron-bolditalic.woff2") format('woff2'), url("../media/fonts/aileron/aileron-bolditalic.woff") format('woff'), url("../media/fonts/aileron/aileron-bolditalic.ttf") format('truetype');  }
-
-@font-face {  font-family: "aileron";  font-style: normal;  font-weight: 700;   src: url("../media/fonts/aileron/aileron-bold.eot");  src: url("../media/fonts/aileron/aileron-bold.eot?#iefix") format('embedded-opentype'), url("../media/fonts/aileron/aileron-bold.woff2") format('woff2'), url("../media/fonts/aileron/aileron-bold.woff") format('woff'), url("../media/fonts/aileron/aileron-bold.ttf") format('truetype');  }
-
-@font-face {  font-family: "aileron";  font-style: italic;  font-weight: 900;   src: url("../media/fonts/aileron/aileron-blackitalic.eot");  src: url("../media/fonts/aileron/aileron-blackitalic.eot?#iefix") format('embedded-opentype'), url("../media/fonts/aileron/aileron-blackitalic.woff2") format('woff2'), url("../media/fonts/aileron/aileron-blackitalic.woff") format('woff'), url("../media/fonts/aileron/aileron-blackitalic.ttf") format('truetype');  }
-
-@font-face {  font-family: "aileron";  font-style: normal;  font-weight: 900;   src: url("../media/fonts/aileron/aileron-black.eot");  src: url("../media/fonts/aileron/aileron-black.eot?#iefix") format('embedded-opentype'), url("../media/fonts/aileron/aileron-black.woff2") format('woff2'), url("../media/fonts/aileron/aileron-black.woff") format('woff'), url("../media/fonts/aileron/aileron-black.ttf") format('truetype');  }
-*/
-
 /* Material Icons */
-
 @font-face {  font-family: 'Material Icons';  font-style: normal;  font-weight: 400;
   src: url("../media/fonts/material-icons/MaterialIcons-Regular.eot");
   src: local('Material Icons'), local('MaterialIcons-Regular'),

css/import.css

@@ -16,9 +16,11 @@
 @import "structure/list.css";
 @import "structure/navbar.css";
 @import "structure/pill.css";
+@import "structure/shadow.css";
 @import "structure/slider.css";
-@import "structure/text.css";
 @import "structure/tab.css";
+@import "structure/text.css";
+@import "structure/width.css";
 
 @import "openaire.css";
 

css/openaire.css

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

css/structure/background.css

@@ -1,26 +1,26 @@
 :root{
-    --primary-background: var(--primary-color);
+    --background-primary: var(--primary-color);
-    --primary-background-image: linear-gradient(51deg, var(--primary-light-color) 0%, var(--primary-dark-color) 100%);
+    --background-primary-image: linear-gradient(51deg, var(--primary-light-color) 0%, var(--primary-dark-color) 100%);
-    --primary-background-color: var(--light-color);
+    --background-primary-color: var(--light-color);
-    --secondary-background: var(--secondary-color);
+    --background-secondary: var(--secondary-color);
-    --secondary-background-image: none;
+    --background-secondary-image: none;
-    --secondary-background-color: var(--light-color);
+    --background-secondary-color: var(--light-color);
 }
 
 .uk-background-primary, .uk-section-primary {
-    background-color: var(--primary-background);
+    background-color: var(--background-primary);
-    background-image: var(--primary-background-image);
+    background-image: var(--background-primary-image);
 }
 
 .uk-background-primary, .uk-section-primary:not(.uk-preserve-color) {
-    color: var(--primary-background-color);
+    color: var(--background-primary-color);
 }
 
 .uk-background-secondary, .uk-section-secondary {
-    background-color: var(--secondary-background);
+    background-color: var(--background-secondary);
-    background-image: var(--secondary-background-image);
+    background-image: var(--background-secondary-image);
 }
 
 .uk-background-secondary, .uk-section-secondary:not(.uk-preserve-color) {
-    color: var(--secondary-background-color);
+    color: var(--background-secondary-color);
 }

css/structure/navbar.css

@@ -6,8 +6,9 @@
   --navbar-decoration-hover: none;
   --navbar-color-active: var(--primary-color);
   --navbar-decoration-active: none;
-  --navbar-height: 90px;
+  --navbar-height: 65px;
   --navbar-shadow:  0px 3px 6px #0000001A;
+  --navbar-font-size: 14px;
 }
 
 navbar .uk-navbar-container {
@@ -17,6 +18,7 @@ navbar .uk-navbar-container {
   height: var(--navbar-height);
   border-bottom: none !important;
   box-shadow: var(--navbar-shadow);
+  font-size: 14px;
 }
 
 .uk-navbar-container .uk-logo {

css/structure/pill.css

@@ -1,5 +1,57 @@
 :root {
   /* Alternative Pills*/
-  --pill-alt-color: var(--grey-color);
+  --pill-alt-color: var(--placeholder-color);
-  --pill-alt-background: var(--secondary-color);
+  --pill-alt-background: var(--light-color);
+  --pill-alt-shadow: var(--shadow-main);
+  --pill-alt-color-hover: var(--secondary-color);
+  --pill-alt-background-active: none;
+  --pill-alt-background-active-image: linear-gradient(122deg, var(--primary-light-color) 0, var(--primary-dark-color) 100%);
+  --pill-alt-color-active: var(--light-color);
+}
+
+.uk-subnav-pill > .uk-active > a {
+  border: unset;
+}
+
+.uk-subnav-pill-alt {
+  background: var(--pill-alt-background);
+  border-radius: 56px;
+  box-shadow: var(--pill-alt-shadow);
+  padding: 4px;
+}
+
+.uk-subnav-pill-alt > * > :first-child {
+  padding: 10px 20px;
+  color: var(--pill-alt-color);
+  border-radius: 56px;
+}
+
+.uk-subnav.uk-subnav-pill-alt > :first-child {
+  padding-left: 0;
+}
+
+.uk-subnav-pill-alt > :hover > a {
+  color: var(--pill-alt-color-hover);
+  border-color: unset;
+  position: relative;
+}
+
+.uk-subnav-pill-alt > :hover > a:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--pill-alt-background-active);
+  background-image: var(--pill-alt-background-active-image);
+  opacity: 0.1;
+  border-radius: inherit;
+}
+
+.uk-subnav-pill-alt > .uk-active > a {
+  background-color: var(--pill-alt-background-active);
+  color: var(--pill-alt-color-active);
+  border-color: unset;
+  background-image: var(--pill-alt-background-active-image);
 }

css/structure/shadow.css

@@ -0,0 +1,3 @@
+:root {
+  --shadow-main: -15px -15px 20px rgb(255 255 255 / 30%), 15px 15px 20px rgb(0 0 0 / 10%);
+}

css/structure/text.css

@@ -1,16 +1,16 @@
 :root {
-    --font-default-color: var(--grey-color);
+    --text-default-color: var(--grey-color);
-    --font-primary-color: var(--primary-color);
+    --text-primary-color: var(--primary-color);
-    --font-secondary-color: var(--secondary-color);
+    --text-secondary-color: var(--secondary-color);
-    --font-gradient-color: none;
+    --text-gradient-color: none;
 }
 
 .uk-text-primary, .uk-section-secondary:not(.uk-preserve-color) .uk-text-primary {
-    color: var(--font-primary-color) !important;
+    color: var(--text-primary-color) !important;
 }
 
 .uk-text-primary-gradient {
-    background: var(--font-gradient-color);
+    background: var(--text-gradient-color);
     -webkit-text-fill-color: transparent;
     -webkit-background-clip: text;
 }

css/structure/width.css

@@ -0,0 +1,29 @@
+/** This class applies a width of 75px. */
+.uk-width-xsmall {
+  width: 100px;
+}
+/**/
+
+@media only screen and (min-width: 640px) {
+  .uk-width-xsmall\@s {
+    width: 100px;
+  }
+}
+
+@media only screen and (min-width: 960px) {
+  .uk-width-xsmall\@m {
+    width: 100px;
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+  .uk-width-xsmall\@l {
+    width: 100px;
+  }
+}
+
+@media only screen and (min-width: 1600px) {
+  .uk-width-xsmall\@xl {
+    width: 100px;
+  }
+}