5 files changed, 244 insertions, 0 deletions
diff --git a/webapp/src/app/@theme/styles/pace.theme.scss b/webapp/src/app/@theme/styles/pace.theme.scss
new file mode 100644
index 0000000..e3bc9b6
--- /dev/null
+++ b/webapp/src/app/@theme/styles/pace.theme.scss
@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+ @mixin ngx-pace-theme() {
+
+  .pace .pace-progress {
+    background: nb-theme(color-fg-highlight);
+  }
+
+  .pace .pace-progress-inner {
+    box-shadow: 0 0 10px nb-theme(color-fg-highlight), 0 0 5px nb-theme(color-fg-highlight);
+  }
+
+  .pace .pace-activity {
+    display: none;
+    // border-top-color: nb-theme(color-fg-highlight);
+    // border-left-color: nb-theme(color-fg-highlight);
+  }
+}
diff --git a/webapp/src/app/@theme/styles/styles.scss b/webapp/src/app/@theme/styles/styles.scss
new file mode 100644
index 0000000..a943e7a
--- /dev/null
+++ b/webapp/src/app/@theme/styles/styles.scss
@@ -0,0 +1,20 @@
+// themes - our custom or/and out of the box themes
+@import 'themes';
+
+// framework component themes (styles tied to theme variables)
+@import '~@nebular/theme/styles/globals';
+@import '~@nebular/auth/styles/all';
+
+// loading progress bar theme
+@import './pace.theme';
+
+// install the framework and custom global styles
+@include nb-install() {
+
+  // framework global styles
+  @include nb-theme-global();
+  @include nb-auth-global();
+
+  // loading progress bar
+  @include ngx-pace-theme();
+};
diff --git a/webapp/src/app/@theme/styles/theme.cosmic.ts b/webapp/src/app/@theme/styles/theme.cosmic.ts
new file mode 100644
index 0000000..a252beb
--- /dev/null
+++ b/webapp/src/app/@theme/styles/theme.cosmic.ts
@@ -0,0 +1,87 @@
+export const COSMIC_THEME = {
+  name: 'cosmic',
+  base: 'default',
+  variables: {
+
+    temperature: [
+      '#2ec7fe',
+      '#31ffad',
+      '#7bff24',
+      '#fff024',
+      '#f7bd59',
+    ],
+
+    solar: {
+      gradientLeft: '#7bff24',
+      gradientRight: '#2ec7fe',
+      shadowColor: '#19977E',
+      radius: ['70%', '90%'],
+    },
+
+    traffic: {
+      colorBlack: '#000000',
+      tooltipBg: 'rgba(0, 255, 170, 0.35)',
+      tooltipBorderColor: '#00d977',
+      tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 4px 16px;',
+      tooltipTextColor: '#ffffff',
+      tooltipFontWeight: 'normal',
+
+      lineBg: '#d1d1ff',
+      lineShadowBlur: '14',
+      itemColor: '#BEBBFF',
+      itemBorderColor: '#ffffff',
+      itemEmphasisBorderColor: '#ffffff',
+      shadowLineDarkBg: '#655ABD',
+      shadowLineShadow: 'rgba(33, 7, 77, 0.5)',
+      gradFrom: 'rgba(118, 89, 255, 0.4)',
+      gradTo: 'rgba(164, 84, 255, 0.5)',
+    },
+
+    electricity: {
+      tooltipBg: 'rgba(0, 255, 170, 0.35)',
+      tooltipLineColor: 'rgba(255, 255, 255, 0.1)',
+      tooltipLineWidth: '1',
+      tooltipBorderColor: '#00d977',
+      tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: '#ffffff',
+      tooltipFontWeight: 'normal',
+
+      axisLineColor: 'rgba(161, 161 ,229, 0.3)',
+      xAxisTextColor: '#a1a1e5',
+      yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
+
+      itemBorderColor: '#ffffff',
+      lineStyle: 'dotted',
+      lineWidth: '6',
+      lineGradFrom: '#00ffaa',
+      lineGradTo: '#fff835',
+      lineShadow: 'rgba(14, 16, 48, 0.4)',
+
+      areaGradFrom: 'rgba(188, 92, 255, 0.5)',
+      areaGradTo: 'rgba(188, 92, 255, 0)',
+      shadowLineDarkBg: '#a695ff',
+    },
+
+    bubbleMap: {
+      titleColor: '#ffffff',
+      areaColor: '#2c2961',
+      areaHoverColor: '#a1a1e5',
+      areaBorderColor: '#654ddb',
+    },
+
+    echarts: {
+      bg: '#3d3780',
+      textColor: '#ffffff',
+      axisLineColor: '#a1a1e5',
+      splitLineColor: '#342e73',
+      itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
+      tooltipBackgroundColor: '#6a7985',
+      areaOpacity: '1',
+    },
+
+    chartjs: {
+      axisLineColor: '#a1a1e5',
+      textColor: '#ffffff',
+    },
+  },
+};
diff --git a/webapp/src/app/@theme/styles/theme.default.ts b/webapp/src/app/@theme/styles/theme.default.ts
new file mode 100644
index 0000000..d387c57
--- /dev/null
+++ b/webapp/src/app/@theme/styles/theme.default.ts
@@ -0,0 +1,88 @@
+export const DEFAULT_THEME = {
+  name: 'default',
+  base: null,
+  variables: {
+
+    // Safari fix
+    temperature: [
+      '#42db7d',
+      '#42db7d',
+      '#42db7d',
+      '#42db7d',
+      '#42db7d',
+    ],
+
+    solar: {
+      gradientLeft: '#42db7d',
+      gradientRight: '#42db7d',
+      shadowColor: 'rgba(0, 0, 0, 0)',
+      radius: ['80%', '90%'],
+    },
+
+    traffic: {
+      colorBlack: '#000000',
+      tooltipBg: '#ffffff',
+      tooltipBorderColor: '#c0c8d1',
+      tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+      tooltipTextColor: '#2a2a2a',
+      tooltipFontWeight: 'bolder',
+
+      lineBg: '#c0c8d1',
+      lineShadowBlur: '1',
+      itemColor: '#bcc3cc',
+      itemBorderColor: '#bcc3cc',
+      itemEmphasisBorderColor: '#42db7d',
+      shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+      shadowLineShadow: 'rgba(0, 0, 0, 0)',
+      gradFrom: '#ebeef2',
+      gradTo: '#ebeef2',
+    },
+
+    electricity: {
+      tooltipBg: '#ffffff',
+      tooltipLineColor: 'rgba(0, 0, 0, 0)',
+      tooltipLineWidth: '0',
+      tooltipBorderColor: '#ebeef2',
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: '#2a2a2a',
+      tooltipFontWeight: 'bolder',
+
+      axisLineColor: 'rgba(0, 0, 0, 0)',
+      xAxisTextColor: '#2a2a2a',
+      yAxisSplitLine: '#ebeef2',
+
+      itemBorderColor: '#42db7d',
+      lineStyle: 'solid',
+      lineWidth: '4',
+      lineGradFrom: '#42db7d',
+      lineGradTo: '#42db7d',
+      lineShadow: 'rgba(0, 0, 0, 0)',
+
+      areaGradFrom: 'rgba(235, 238, 242, 0.5)',
+      areaGradTo: 'rgba(235, 238, 242, 0.5)',
+      shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+    },
+
+    bubbleMap: {
+      titleColor: '#484848',
+      areaColor: '#dddddd',
+      areaHoverColor: '#cccccc',
+      areaBorderColor: '#ebeef2',
+    },
+
+    echarts: {
+      bg: '#ffffff',
+      textColor: '#484848',
+      axisLineColor: '#bbbbbb',
+      splitLineColor: '#ebeef2',
+      itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
+      tooltipBackgroundColor: '#6a7985',
+      areaOpacity: '0.7',
+    },
+
+    chartjs: {
+      axisLineColor: '#cccccc',
+      textColor: '#484848',
+    },
+  },
+};
diff --git a/webapp/src/app/@theme/styles/themes.scss b/webapp/src/app/@theme/styles/themes.scss
new file mode 100644
index 0000000..f5f75b6
--- /dev/null
+++ b/webapp/src/app/@theme/styles/themes.scss
@@ -0,0 +1,27 @@
+// @nebular theming framework
+@import '~@nebular/theme/styles/theming';
+// @nebular out of the box themes
+@import '~@nebular/theme/styles/themes';
+
+// which themes you what to enable (empty to enable all)
+$nb-enabled-themes: (default, cosmic);
+
+$nb-themes: nb-register-theme((
+ // app wise variables for each theme
+  sidebar-header-gap: 2rem,
+  sidebar-header-height: initial,
+  layout-content-width: 1400px,
+
+  font-main: Roboto,
+  font-secondary: Exo,
+), default, default);
+
+$nb-themes: nb-register-theme((
+  // app wise variables for each theme
+  sidebar-header-gap: 2rem,
+  sidebar-header-height: initial,
+  layout-content-width: 1400px,
+
+  font-main: Roboto,
+  font-secondary: Exo,
+), cosmic, cosmic);