mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-22 02:10:12 +01:00
feat: update Nebular to 4.1.2 (#5451)
This commit is contained in:
Sergey Andrievskiy
GitHub
parent
4febf1902c
commit
a2e93f9376
31 changed files with 728 additions and 1109 deletions
|
|
@ -1,8 +1,4 @@
|
|||
import { AfterViewInit, Component, Inject, PLATFORM_ID, ViewChild } from '@angular/core';
|
||||
import { isPlatformBrowser } from '@angular/common';
|
||||
import { NbLayoutComponent } from '@nebular/theme';
|
||||
|
||||
import { WindowModeBlockScrollService } from '../../services/window-mode-block-scroll.service';
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-one-column-layout',
|
||||
|
|
@ -27,18 +23,4 @@ import { WindowModeBlockScrollService } from '../../services/window-mode-block-s
|
|||
</nb-layout>
|
||||
`,
|
||||
})
|
||||
export class OneColumnLayoutComponent implements AfterViewInit {
|
||||
|
||||
@ViewChild(NbLayoutComponent, { static: false }) layout: NbLayoutComponent;
|
||||
|
||||
constructor(
|
||||
@Inject(PLATFORM_ID) private platformId,
|
||||
private windowModeBlockScrollService: WindowModeBlockScrollService,
|
||||
) {}
|
||||
|
||||
ngAfterViewInit() {
|
||||
if (isPlatformBrowser(this.platformId)) {
|
||||
this.windowModeBlockScrollService.register(this.layout);
|
||||
}
|
||||
}
|
||||
}
|
||||
export class OneColumnLayoutComponent {}
|
||||
|
|
|
|||
|
|
@ -1,132 +0,0 @@
|
|||
import { Inject, Injectable, OnDestroy } from '@angular/core';
|
||||
import { coerceCssPixelValue } from '@angular/cdk/coercion';
|
||||
import {
|
||||
NB_WINDOW,
|
||||
NbLayoutComponent,
|
||||
NbLayoutDimensions,
|
||||
NbLayoutRulerService,
|
||||
NbLayoutScrollService,
|
||||
NbViewportRulerAdapter,
|
||||
} from '@nebular/theme';
|
||||
import { filter, map, take, takeUntil } from 'rxjs/operators';
|
||||
import { fromEvent as observableFromEvent, merge, Subject } from 'rxjs';
|
||||
|
||||
@Injectable()
|
||||
export class WindowModeBlockScrollService implements OnDestroy {
|
||||
|
||||
private destroy$ = new Subject<void>();
|
||||
|
||||
private blockEnabled = false;
|
||||
private unblock$ = new Subject<void>();
|
||||
|
||||
private container: HTMLElement;
|
||||
private content: HTMLElement;
|
||||
|
||||
private previousScrollPosition: { top: number, left: number };
|
||||
private previousContainerStyles: { overflowY: string };
|
||||
private previousContentStyles: { left: string, top: string, width: string, overflow: string, position: string };
|
||||
|
||||
constructor(
|
||||
private scrollService: NbLayoutScrollService,
|
||||
private viewportRuler: NbViewportRulerAdapter,
|
||||
private layout: NbLayoutRulerService,
|
||||
@Inject(NB_WINDOW) private window,
|
||||
) {}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.destroy$.next();
|
||||
this.destroy$.complete();
|
||||
this.unblock$.complete();
|
||||
}
|
||||
|
||||
register(layout: NbLayoutComponent) {
|
||||
this.container = layout.scrollableContainerRef.nativeElement;
|
||||
this.content = this.container.children[0] as HTMLElement;
|
||||
|
||||
this.scrollService.onScrollableChange()
|
||||
.pipe(
|
||||
filter(() => layout.withScrollValue),
|
||||
map((scrollable: boolean) => !scrollable),
|
||||
takeUntil(this.destroy$),
|
||||
)
|
||||
.subscribe((shouldBlock: boolean) => {
|
||||
if (shouldBlock) {
|
||||
this.blockScroll();
|
||||
} else {
|
||||
this.unblockScroll();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
blockScroll() {
|
||||
if (!this.canBeBlocked()) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.previousScrollPosition = this.viewportRuler.getViewportScrollPosition();
|
||||
this.backupStyles();
|
||||
|
||||
this.container.style.overflowY = 'scroll';
|
||||
this.content.style.overflow = 'hidden';
|
||||
this.content.style.position = 'fixed';
|
||||
this.updateContentSizeAndPosition();
|
||||
|
||||
observableFromEvent(this.window, 'resize')
|
||||
.pipe(
|
||||
takeUntil(merge(this.destroy$, this.unblock$).pipe(take(1))),
|
||||
)
|
||||
.subscribe(() => this.updateContentSizeAndPosition());
|
||||
|
||||
this.blockEnabled = true;
|
||||
}
|
||||
|
||||
unblockScroll() {
|
||||
if (this.blockEnabled) {
|
||||
this.restoreStyles();
|
||||
this.scrollService.scrollTo(this.previousScrollPosition.left, this.previousScrollPosition.top);
|
||||
this.unblock$.next();
|
||||
this.blockEnabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
private canBeBlocked(): boolean {
|
||||
if (this.blockEnabled) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const { height: containerHeight } = this.viewportRuler.getViewportSize();
|
||||
return this.content.scrollHeight > containerHeight;
|
||||
}
|
||||
|
||||
private updateContentSizeAndPosition() {
|
||||
const { top, left } = this.container.getBoundingClientRect();
|
||||
this.content.style.left = coerceCssPixelValue(-this.previousScrollPosition.left + left);
|
||||
this.content.style.top = coerceCssPixelValue(-this.previousScrollPosition.top + top);
|
||||
this.layout.getDimensions()
|
||||
.pipe(
|
||||
map(({ clientWidth }: NbLayoutDimensions) => coerceCssPixelValue(clientWidth)),
|
||||
take(1),
|
||||
)
|
||||
.subscribe((clientWidth: string) => this.content.style.width = clientWidth);
|
||||
}
|
||||
|
||||
private backupStyles() {
|
||||
this.previousContainerStyles = { overflowY: this.container.style.overflowY };
|
||||
this.previousContentStyles = {
|
||||
overflow: this.content.style.overflow,
|
||||
position: this.content.style.position,
|
||||
left: this.content.style.left,
|
||||
top: this.content.style.top,
|
||||
width: this.content.style.width,
|
||||
};
|
||||
}
|
||||
|
||||
private restoreStyles() {
|
||||
this.container.style.overflowY = this.previousContainerStyles.overflowY;
|
||||
this.content.style.overflow = this.previousContentStyles.overflow;
|
||||
this.content.style.position = this.previousContentStyles.position;
|
||||
this.content.style.left = this.previousContentStyles.left;
|
||||
this.content.style.top = this.previousContentStyles.top;
|
||||
this.content.style.width = this.previousContentStyles.width;
|
||||
}
|
||||
}
|
||||
8
src/app/@theme/styles/_layout.scss
Normal file
8
src/app/@theme/styles/_layout.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
@mixin ngx-layout() {
|
||||
@include media-breakpoint-down(is) {
|
||||
.row {
|
||||
margin-left: -10px;
|
||||
margin-right: -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,6 @@
|
|||
@import './themes';
|
||||
|
||||
@mixin nb-overrides() {
|
||||
// overrides bootstrap svg style
|
||||
nb-icon svg {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
nb-auth-block .links nb-icon {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
nb-select.size-medium button {
|
||||
padding: 0.4375rem 2.2rem 0.4375rem 1.125rem !important;
|
||||
|
||||
|
|
@ -17,52 +8,4 @@
|
|||
right: 0.41rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
nb-flip-card {
|
||||
.front-container {
|
||||
-webkit-backface-visibility: visible;
|
||||
}
|
||||
.back-container {
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.flipped {
|
||||
.front-container {
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
.back-container {
|
||||
-webkit-backface-visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nb-layout .layout .layout-container nb-sidebar {
|
||||
&,
|
||||
.main-container-fixed {
|
||||
top: nb-theme(header-height);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: nb-theme(layout-window-mode-max-width) + 20px) {
|
||||
@include f-window-mode(nb-theme(layout-window-mode-padding-top) / 4);
|
||||
}
|
||||
|
||||
@media screen and (min-width: nb-theme(layout-window-mode-max-width) + 150px) {
|
||||
@include f-window-mode(nb-theme(layout-window-mode-padding-top) / 2);
|
||||
}
|
||||
|
||||
@media screen and (min-width: nb-theme(layout-window-mode-max-width) + 300px) {
|
||||
@include f-window-mode(nb-theme(layout-window-mode-padding-top));
|
||||
}
|
||||
}
|
||||
|
||||
@mixin f-window-mode ($padding-top) {
|
||||
nb-layout.window-mode nb-layout-header.fixed {
|
||||
top: $padding-top;
|
||||
}
|
||||
|
||||
nb-sidebar .main-container-fixed {
|
||||
height: calc(100vh - #{nb-theme(header-height)} - #{$padding-top}) !important;
|
||||
top: calc(#{nb-theme(header-height)} + #{$padding-top}) !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,12 +6,16 @@
|
|||
// framework component themes (styles tied to theme variables)
|
||||
@import '~@nebular/theme/styles/globals';
|
||||
@import '~@nebular/auth/styles/all';
|
||||
@import '~@nebular/bootstrap/styles/globals';
|
||||
|
||||
@import '~bootstrap/scss/functions';
|
||||
@import '~bootstrap/scss/variables';
|
||||
@import '~bootstrap/scss/mixins';
|
||||
@import '~bootstrap/scss/grid';
|
||||
|
||||
// loading progress bar theme
|
||||
@import './pace.theme';
|
||||
|
||||
@import './layout';
|
||||
@import './overrides';
|
||||
|
||||
// install the framework and custom global styles
|
||||
|
|
@ -20,8 +24,8 @@
|
|||
// framework global styles
|
||||
@include nb-theme-global();
|
||||
@include nb-auth-global();
|
||||
@include nb-bootstrap-global();
|
||||
|
||||
@include ngx-layout();
|
||||
// loading progress bar
|
||||
@include ngx-pace-theme();
|
||||
|
||||
|
|
|
|||
|
|
@ -1,106 +1,64 @@
|
|||
import { NbJSThemeOptions } from '@nebular/theme';
|
||||
import { NbJSThemeOptions, CORPORATE_THEME as baseTheme } from '@nebular/theme';
|
||||
|
||||
const palette = {
|
||||
primary: '#73a1ff',
|
||||
success: '#5dcfe3',
|
||||
info: '#ba7fec',
|
||||
warning: '#ffa36b',
|
||||
danger: '#ff6b83',
|
||||
};
|
||||
|
||||
const theme = {
|
||||
fontMain: 'Open Sans, sans-serif',
|
||||
fontSecondary: 'Raleway, sans-serif',
|
||||
|
||||
bg: '#ffffff',
|
||||
bg2: '#f7f9fc',
|
||||
bg3: '#edf1f7',
|
||||
bg4: '#e4e9f2',
|
||||
|
||||
border: '#ffffff',
|
||||
border2: '#f7f9fc',
|
||||
border3: '#edf1f7',
|
||||
border4: '#e4e9f2',
|
||||
border5: '#c5cee0',
|
||||
|
||||
fg: '#8f9bb3',
|
||||
fgHeading: '#1a2138',
|
||||
fgText: '#1a2138',
|
||||
fgHighlight: palette.primary,
|
||||
layoutBg: '#f7f9fc',
|
||||
separator: '#edf1f7',
|
||||
|
||||
primary: palette.primary,
|
||||
success: palette.success,
|
||||
info: palette.info,
|
||||
warning: palette.warning,
|
||||
danger: palette.danger,
|
||||
|
||||
primaryLight: '#598bff',
|
||||
successLight: '#2ce69b',
|
||||
infoLight: '#42aaff',
|
||||
warningLight: '#ffc94d',
|
||||
dangerLight: '#ff708d',
|
||||
};
|
||||
const baseThemeVariables = baseTheme.variables;
|
||||
|
||||
export const CORPORATE_THEME = {
|
||||
name: 'corporate',
|
||||
base: 'corporate',
|
||||
variables: {
|
||||
...theme,
|
||||
|
||||
temperature: {
|
||||
arcFill: [ '#ffa36b', '#ffa36b', '#ff9e7a', '#ff9888', '#ff8ea0' ],
|
||||
arcEmpty: theme.bg2,
|
||||
thumbBg: theme.bg2,
|
||||
arcEmpty: baseThemeVariables.bg2,
|
||||
thumbBg: baseThemeVariables.bg2,
|
||||
thumbBorder: '#ffa36b',
|
||||
},
|
||||
|
||||
solar: {
|
||||
gradientLeft: theme.primary,
|
||||
gradientRight: theme.primary,
|
||||
gradientLeft: baseThemeVariables.primary,
|
||||
gradientRight: baseThemeVariables.primary,
|
||||
shadowColor: 'rgba(0, 0, 0, 0)',
|
||||
secondSeriesFill: theme.bg2,
|
||||
secondSeriesFill: baseThemeVariables.bg2,
|
||||
radius: ['80%', '90%'],
|
||||
},
|
||||
|
||||
traffic: {
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
|
||||
yAxisSplitLine: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
lineBg: theme.primary,
|
||||
lineBg: baseThemeVariables.primary,
|
||||
lineShadowBlur: '0',
|
||||
itemColor: theme.border4,
|
||||
itemBorderColor: theme.border4,
|
||||
itemEmphasisBorderColor: theme.primaryLight,
|
||||
itemColor: baseThemeVariables.border4,
|
||||
itemBorderColor: baseThemeVariables.border4,
|
||||
itemEmphasisBorderColor: baseThemeVariables.primaryLight,
|
||||
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
shadowLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
gradFrom: theme.bg,
|
||||
gradTo: theme.bg,
|
||||
gradFrom: baseThemeVariables.bg,
|
||||
gradTo: baseThemeVariables.bg,
|
||||
},
|
||||
|
||||
electricity: {
|
||||
tooltipBg: theme.bg,
|
||||
tooltipLineColor: theme.fgText,
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipLineColor: baseThemeVariables.fgText,
|
||||
tooltipLineWidth: '0',
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
|
||||
axisLineColor: theme.border3,
|
||||
xAxisTextColor: theme.fg,
|
||||
yAxisSplitLine: theme.separator,
|
||||
axisLineColor: baseThemeVariables.border3,
|
||||
xAxisTextColor: baseThemeVariables.fg,
|
||||
yAxisSplitLine: baseThemeVariables.separator,
|
||||
|
||||
itemBorderColor: theme.primary,
|
||||
itemBorderColor: baseThemeVariables.primary,
|
||||
lineStyle: 'solid',
|
||||
lineWidth: '4',
|
||||
lineGradFrom: theme.primary,
|
||||
lineGradTo: theme.primary,
|
||||
lineGradFrom: baseThemeVariables.primary,
|
||||
lineGradTo: baseThemeVariables.primary,
|
||||
lineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
areaGradFrom: 'rgba(0, 0, 0, 0)',
|
||||
|
|
@ -109,118 +67,118 @@ export const CORPORATE_THEME = {
|
|||
},
|
||||
|
||||
bubbleMap: {
|
||||
titleColor: theme.fgText,
|
||||
areaColor: theme.bg4,
|
||||
areaHoverColor: theme.fgHighlight,
|
||||
areaBorderColor: theme.border5,
|
||||
titleColor: baseThemeVariables.fgText,
|
||||
areaColor: baseThemeVariables.bg4,
|
||||
areaHoverColor: baseThemeVariables.fgHighlight,
|
||||
areaBorderColor: baseThemeVariables.border5,
|
||||
},
|
||||
|
||||
profitBarAnimationEchart: {
|
||||
textColor: theme.fgText,
|
||||
textColor: baseThemeVariables.fgText,
|
||||
|
||||
firstAnimationBarColor: theme.primary,
|
||||
secondAnimationBarColor: theme.success,
|
||||
firstAnimationBarColor: baseThemeVariables.primary,
|
||||
secondAnimationBarColor: baseThemeVariables.success,
|
||||
|
||||
splitLineStyleOpacity: '1',
|
||||
splitLineStyleWidth: '1',
|
||||
splitLineStyleColor: theme.separator,
|
||||
splitLineStyleColor: baseThemeVariables.separator,
|
||||
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '16',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipBorderWidth: '1',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
},
|
||||
|
||||
trafficBarEchart: {
|
||||
gradientFrom: theme.warningLight,
|
||||
gradientTo: theme.warning,
|
||||
shadow: theme.warningLight,
|
||||
gradientFrom: baseThemeVariables.warningLight,
|
||||
gradientTo: baseThemeVariables.warning,
|
||||
shadow: baseThemeVariables.warningLight,
|
||||
shadowBlur: '0',
|
||||
|
||||
axisTextColor: theme.fgText,
|
||||
axisTextColor: baseThemeVariables.fgText,
|
||||
axisFontSize: '12',
|
||||
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
},
|
||||
|
||||
countryOrders: {
|
||||
countryBorderColor: theme.border4,
|
||||
countryFillColor: theme.bg4,
|
||||
countryBorderColor: baseThemeVariables.border4,
|
||||
countryFillColor: baseThemeVariables.bg4,
|
||||
countryBorderWidth: '1',
|
||||
hoveredCountryBorderColor: theme.primary,
|
||||
hoveredCountryFillColor: theme.primaryLight,
|
||||
hoveredCountryBorderColor: baseThemeVariables.primary,
|
||||
hoveredCountryFillColor: baseThemeVariables.primaryLight,
|
||||
hoveredCountryBorderWidth: '1',
|
||||
|
||||
chartAxisLineColor: theme.border4,
|
||||
chartAxisTextColor: theme.fg,
|
||||
chartAxisLineColor: baseThemeVariables.border4,
|
||||
chartAxisTextColor: baseThemeVariables.fg,
|
||||
chartAxisFontSize: '16',
|
||||
chartGradientTo: theme.primary,
|
||||
chartGradientFrom: theme.primaryLight,
|
||||
chartAxisSplitLine: theme.separator,
|
||||
chartShadowLineColor: theme.primaryLight,
|
||||
chartGradientTo: baseThemeVariables.primary,
|
||||
chartGradientFrom: baseThemeVariables.primaryLight,
|
||||
chartAxisSplitLine: baseThemeVariables.separator,
|
||||
chartShadowLineColor: baseThemeVariables.primaryLight,
|
||||
|
||||
chartLineBottomShadowColor: theme.primary,
|
||||
chartLineBottomShadowColor: baseThemeVariables.primary,
|
||||
|
||||
chartInnerLineColor: theme.bg2,
|
||||
chartInnerLineColor: baseThemeVariables.bg2,
|
||||
},
|
||||
|
||||
echarts: {
|
||||
bg: theme.bg,
|
||||
textColor: theme.fgText,
|
||||
axisLineColor: theme.fgText,
|
||||
splitLineColor: theme.separator,
|
||||
bg: baseThemeVariables.bg,
|
||||
textColor: baseThemeVariables.fgText,
|
||||
axisLineColor: baseThemeVariables.fgText,
|
||||
splitLineColor: baseThemeVariables.separator,
|
||||
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
tooltipBackgroundColor: theme.primary,
|
||||
tooltipBackgroundColor: baseThemeVariables.primary,
|
||||
areaOpacity: '0.7',
|
||||
},
|
||||
|
||||
chartjs: {
|
||||
axisLineColor: theme.separator,
|
||||
textColor: theme.fgText,
|
||||
axisLineColor: baseThemeVariables.separator,
|
||||
textColor: baseThemeVariables.fgText,
|
||||
},
|
||||
|
||||
orders: {
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||
tooltipLineWidth: '0',
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '20',
|
||||
|
||||
axisLineColor: theme.border4,
|
||||
axisLineColor: baseThemeVariables.border4,
|
||||
axisFontSize: '16',
|
||||
axisTextColor: theme.fg,
|
||||
yAxisSplitLine: theme.separator,
|
||||
axisTextColor: baseThemeVariables.fg,
|
||||
yAxisSplitLine: baseThemeVariables.separator,
|
||||
|
||||
itemBorderColor: theme.primary,
|
||||
itemBorderColor: baseThemeVariables.primary,
|
||||
lineStyle: 'solid',
|
||||
lineWidth: '4',
|
||||
|
||||
// first line
|
||||
firstAreaGradFrom: theme.bg3,
|
||||
firstAreaGradTo: theme.bg3,
|
||||
firstAreaGradFrom: baseThemeVariables.bg3,
|
||||
firstAreaGradTo: baseThemeVariables.bg3,
|
||||
firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// second line
|
||||
secondLineGradFrom: theme.primary,
|
||||
secondLineGradTo: theme.primary,
|
||||
secondLineGradFrom: baseThemeVariables.primary,
|
||||
secondLineGradTo: baseThemeVariables.primary,
|
||||
|
||||
secondAreaGradFrom: 'rgba(0, 0, 0, 0)',
|
||||
secondAreaGradTo: 'rgba(0, 0, 0, 0)',
|
||||
secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// third line
|
||||
thirdLineGradFrom: theme.success,
|
||||
thirdLineGradTo: theme.successLight,
|
||||
thirdLineGradFrom: baseThemeVariables.success,
|
||||
thirdLineGradTo: baseThemeVariables.successLight,
|
||||
|
||||
thirdAreaGradFrom: 'rgba(0, 0, 0, 0)',
|
||||
thirdAreaGradTo: 'rgba(0, 0, 0, 0)',
|
||||
|
|
@ -228,82 +186,82 @@ export const CORPORATE_THEME = {
|
|||
},
|
||||
|
||||
profit: {
|
||||
bg: theme.bg,
|
||||
textColor: theme.fgText,
|
||||
axisLineColor: theme.border4,
|
||||
splitLineColor: theme.separator,
|
||||
bg: baseThemeVariables.bg,
|
||||
textColor: baseThemeVariables.fgText,
|
||||
axisLineColor: baseThemeVariables.border4,
|
||||
splitLineColor: baseThemeVariables.separator,
|
||||
areaOpacity: '1',
|
||||
|
||||
axisFontSize: '16',
|
||||
axisTextColor: theme.fg,
|
||||
axisTextColor: baseThemeVariables.fg,
|
||||
|
||||
// first bar
|
||||
firstLineGradFrom: theme.bg3,
|
||||
firstLineGradTo: theme.bg3,
|
||||
firstLineGradFrom: baseThemeVariables.bg3,
|
||||
firstLineGradTo: baseThemeVariables.bg3,
|
||||
firstLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// second bar
|
||||
secondLineGradFrom: theme.primary,
|
||||
secondLineGradTo: theme.primary,
|
||||
secondLineGradFrom: baseThemeVariables.primary,
|
||||
secondLineGradTo: baseThemeVariables.primary,
|
||||
secondLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// third bar
|
||||
thirdLineGradFrom: theme.success,
|
||||
thirdLineGradTo: theme.success,
|
||||
thirdLineGradFrom: baseThemeVariables.success,
|
||||
thirdLineGradTo: baseThemeVariables.success,
|
||||
thirdLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
orderProfitLegend: {
|
||||
firstItem: theme.success,
|
||||
secondItem: theme.primary,
|
||||
thirdItem: theme.bg3,
|
||||
firstItem: baseThemeVariables.success,
|
||||
secondItem: baseThemeVariables.primary,
|
||||
thirdItem: baseThemeVariables.bg3,
|
||||
},
|
||||
|
||||
visitors: {
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||
tooltipLineWidth: '1',
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '20',
|
||||
|
||||
axisLineColor: theme.border4,
|
||||
axisLineColor: baseThemeVariables.border4,
|
||||
axisFontSize: '16',
|
||||
axisTextColor: theme.fg,
|
||||
yAxisSplitLine: theme.separator,
|
||||
axisTextColor: baseThemeVariables.fg,
|
||||
yAxisSplitLine: baseThemeVariables.separator,
|
||||
|
||||
itemBorderColor: theme.primary,
|
||||
itemBorderColor: baseThemeVariables.primary,
|
||||
lineStyle: 'dotted',
|
||||
lineWidth: '6',
|
||||
lineGradFrom: '#ffffff',
|
||||
lineGradTo: '#ffffff',
|
||||
lineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
areaGradFrom: theme.primary,
|
||||
areaGradTo: theme.primaryLight,
|
||||
areaGradFrom: baseThemeVariables.primary,
|
||||
areaGradTo: baseThemeVariables.primaryLight,
|
||||
|
||||
innerLineStyle: 'solid',
|
||||
innerLineWidth: '1',
|
||||
|
||||
innerAreaGradFrom: theme.success,
|
||||
innerAreaGradTo: theme.success,
|
||||
innerAreaGradFrom: baseThemeVariables.success,
|
||||
innerAreaGradTo: baseThemeVariables.success,
|
||||
},
|
||||
|
||||
visitorsLegend: {
|
||||
firstIcon: theme.success,
|
||||
secondIcon: theme.primary,
|
||||
firstIcon: baseThemeVariables.success,
|
||||
secondIcon: baseThemeVariables.primary,
|
||||
},
|
||||
|
||||
visitorsPie: {
|
||||
firstPieGradientLeft: theme.success,
|
||||
firstPieGradientRight: theme.success,
|
||||
firstPieGradientLeft: baseThemeVariables.success,
|
||||
firstPieGradientRight: baseThemeVariables.success,
|
||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
firstPieRadius: ['65%', '90%'],
|
||||
|
||||
secondPieGradientLeft: theme.warning,
|
||||
secondPieGradientRight: theme.warningLight,
|
||||
secondPieGradientLeft: baseThemeVariables.warning,
|
||||
secondPieGradientRight: baseThemeVariables.warningLight,
|
||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
secondPieRadius: ['63%', '92%'],
|
||||
shadowOffsetX: '-4',
|
||||
|
|
@ -311,8 +269,8 @@ export const CORPORATE_THEME = {
|
|||
},
|
||||
|
||||
visitorsPieLegend: {
|
||||
firstSection: theme.warning,
|
||||
secondSection: theme.success,
|
||||
firstSection: baseThemeVariables.warning,
|
||||
secondSection: baseThemeVariables.success,
|
||||
},
|
||||
|
||||
earningPie: {
|
||||
|
|
@ -321,28 +279,28 @@ export const CORPORATE_THEME = {
|
|||
|
||||
fontSize: '22',
|
||||
|
||||
firstPieGradientLeft: theme.success,
|
||||
firstPieGradientRight: theme.success,
|
||||
firstPieGradientLeft: baseThemeVariables.success,
|
||||
firstPieGradientRight: baseThemeVariables.success,
|
||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
secondPieGradientLeft: theme.primary,
|
||||
secondPieGradientRight: theme.primary,
|
||||
secondPieGradientLeft: baseThemeVariables.primary,
|
||||
secondPieGradientRight: baseThemeVariables.primary,
|
||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
thirdPieGradientLeft: theme.warning,
|
||||
thirdPieGradientRight: theme.warning,
|
||||
thirdPieGradientLeft: baseThemeVariables.warning,
|
||||
thirdPieGradientRight: baseThemeVariables.warning,
|
||||
thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
earningLine: {
|
||||
gradFrom: theme.primary,
|
||||
gradTo: theme.primary,
|
||||
gradFrom: baseThemeVariables.primary,
|
||||
gradTo: baseThemeVariables.primary,
|
||||
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '16',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipBorderWidth: '1',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,309 +1,267 @@
|
|||
import { NbJSThemeOptions } from '@nebular/theme';
|
||||
import { NbJSThemeOptions, COSMIC_THEME as baseTheme } from '@nebular/theme';
|
||||
|
||||
const palette = {
|
||||
primary: '#a16eff',
|
||||
success: '#00d68f',
|
||||
info: '#0095ff',
|
||||
warning: '#ffaa00',
|
||||
danger: '#ff3d71',
|
||||
};
|
||||
|
||||
const theme = {
|
||||
fontMain: 'Open Sans, sans-serif',
|
||||
fontSecondary: 'Raleway, sans-serif',
|
||||
|
||||
bg: '#323259',
|
||||
bg2: '#252547',
|
||||
bg3: '#1b1b38',
|
||||
bg4: '#13132b',
|
||||
|
||||
border: '#323259',
|
||||
border2: '#252547',
|
||||
border3: '#1b1b38',
|
||||
border4: '#13132b',
|
||||
border5: '#13132b',
|
||||
|
||||
fg: '#b4b4db',
|
||||
fgHeading: '#ffffff',
|
||||
fgText: '#ffffff',
|
||||
fgHighlight: palette.primary,
|
||||
layoutBg: '#151a30',
|
||||
separator: '#151a30',
|
||||
|
||||
primary: palette.primary,
|
||||
success: palette.success,
|
||||
info: palette.info,
|
||||
warning: palette.warning,
|
||||
danger: palette.danger,
|
||||
|
||||
primaryLight: '#b18aff',
|
||||
successLight: '#2ce69b',
|
||||
infoLight: '#42aaff',
|
||||
warningLight: '#ffc94d',
|
||||
dangerLight: '#ff708d',
|
||||
};
|
||||
const baseThemeVariables = baseTheme.variables;
|
||||
|
||||
export const COSMIC_THEME = {
|
||||
name: 'cosmic',
|
||||
base: 'cosmic',
|
||||
variables: {
|
||||
...theme,
|
||||
|
||||
temperature: {
|
||||
arcFill: [ '#2ec7fe', '#31ffad', '#7bff24', '#fff024', '#f7bd59' ],
|
||||
arcEmpty: theme.bg2,
|
||||
arcEmpty: baseThemeVariables.bg2,
|
||||
thumbBg: '#ffffff',
|
||||
thumbBorder: '#ffffff',
|
||||
},
|
||||
|
||||
solar: {
|
||||
gradientLeft: theme.primary,
|
||||
gradientRight: theme.primary,
|
||||
gradientLeft: baseThemeVariables.primary,
|
||||
gradientRight: baseThemeVariables.primary,
|
||||
shadowColor: 'rgba(0, 0, 0, 0)',
|
||||
secondSeriesFill: theme.bg2,
|
||||
secondSeriesFill: baseThemeVariables.bg2,
|
||||
radius: ['70%', '90%'],
|
||||
},
|
||||
|
||||
traffic: {
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(50, 50, 89); border-radius: 10px; padding: 4px 16px;',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
|
||||
yAxisSplitLine: theme.separator,
|
||||
yAxisSplitLine: baseThemeVariables.separator,
|
||||
|
||||
lineBg: theme.border2,
|
||||
lineBg: baseThemeVariables.border2,
|
||||
lineShadowBlur: '14',
|
||||
itemColor: theme.border2,
|
||||
itemBorderColor: theme.border2,
|
||||
itemEmphasisBorderColor: theme.primary,
|
||||
shadowLineDarkBg: theme.border3,
|
||||
shadowLineShadow: theme.border3,
|
||||
gradFrom: theme.bg,
|
||||
gradTo: theme.bg2,
|
||||
itemColor: baseThemeVariables.border2,
|
||||
itemBorderColor: baseThemeVariables.border2,
|
||||
itemEmphasisBorderColor: baseThemeVariables.primary,
|
||||
shadowLineDarkBg: baseThemeVariables.border3,
|
||||
shadowLineShadow: baseThemeVariables.border3,
|
||||
gradFrom: baseThemeVariables.bg,
|
||||
gradTo: baseThemeVariables.bg2,
|
||||
},
|
||||
|
||||
electricity: {
|
||||
tooltipBg: theme.bg,
|
||||
tooltipLineColor: theme.fgText,
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipLineColor: baseThemeVariables.fgText,
|
||||
tooltipLineWidth: '0',
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
|
||||
axisLineColor: theme.border3,
|
||||
xAxisTextColor: theme.fg,
|
||||
yAxisSplitLine: theme.separator,
|
||||
axisLineColor: baseThemeVariables.border3,
|
||||
xAxisTextColor: baseThemeVariables.fg,
|
||||
yAxisSplitLine: baseThemeVariables.separator,
|
||||
|
||||
itemBorderColor: theme.border2,
|
||||
itemBorderColor: baseThemeVariables.border2,
|
||||
lineStyle: 'dotted',
|
||||
lineWidth: '6',
|
||||
lineGradFrom: theme.success,
|
||||
lineGradTo: theme.warning,
|
||||
lineShadow: theme.bg4,
|
||||
lineGradFrom: baseThemeVariables.success,
|
||||
lineGradTo: baseThemeVariables.warning,
|
||||
lineShadow: baseThemeVariables.bg4,
|
||||
|
||||
areaGradFrom: theme.bg2,
|
||||
areaGradTo: theme.bg3,
|
||||
shadowLineDarkBg: theme.bg3,
|
||||
areaGradFrom: baseThemeVariables.bg2,
|
||||
areaGradTo: baseThemeVariables.bg3,
|
||||
shadowLineDarkBg: baseThemeVariables.bg3,
|
||||
},
|
||||
|
||||
bubbleMap: {
|
||||
titleColor: theme.fgText,
|
||||
areaColor: theme.bg4,
|
||||
areaHoverColor: theme.fgHighlight,
|
||||
areaBorderColor: theme.border5,
|
||||
titleColor: baseThemeVariables.fgText,
|
||||
areaColor: baseThemeVariables.bg4,
|
||||
areaHoverColor: baseThemeVariables.fgHighlight,
|
||||
areaBorderColor: baseThemeVariables.border5,
|
||||
},
|
||||
|
||||
profitBarAnimationEchart: {
|
||||
textColor: theme.fgText,
|
||||
textColor: baseThemeVariables.fgText,
|
||||
|
||||
firstAnimationBarColor: theme.primary,
|
||||
secondAnimationBarColor: theme.success,
|
||||
firstAnimationBarColor: baseThemeVariables.primary,
|
||||
secondAnimationBarColor: baseThemeVariables.success,
|
||||
|
||||
splitLineStyleOpacity: '1',
|
||||
splitLineStyleWidth: '1',
|
||||
splitLineStyleColor: theme.border2,
|
||||
splitLineStyleColor: baseThemeVariables.border2,
|
||||
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '16',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipBorderWidth: '1',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
},
|
||||
|
||||
trafficBarEchart: {
|
||||
gradientFrom: theme.warningLight,
|
||||
gradientTo: theme.warning,
|
||||
shadow: theme.warningLight,
|
||||
gradientFrom: baseThemeVariables.warningLight,
|
||||
gradientTo: baseThemeVariables.warning,
|
||||
shadow: baseThemeVariables.warningLight,
|
||||
shadowBlur: '5',
|
||||
|
||||
axisTextColor: theme.fgText,
|
||||
axisTextColor: baseThemeVariables.fgText,
|
||||
axisFontSize: '12',
|
||||
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
},
|
||||
|
||||
countryOrders: {
|
||||
countryBorderColor: theme.border4,
|
||||
countryFillColor: theme.bg3,
|
||||
countryBorderColor: baseThemeVariables.border4,
|
||||
countryFillColor: baseThemeVariables.bg3,
|
||||
countryBorderWidth: '1',
|
||||
hoveredCountryBorderColor: theme.primary,
|
||||
hoveredCountryFillColor: theme.primaryLight,
|
||||
hoveredCountryBorderColor: baseThemeVariables.primary,
|
||||
hoveredCountryFillColor: baseThemeVariables.primaryLight,
|
||||
hoveredCountryBorderWidth: '1',
|
||||
|
||||
chartAxisLineColor: theme.border4,
|
||||
chartAxisTextColor: theme.fg,
|
||||
chartAxisLineColor: baseThemeVariables.border4,
|
||||
chartAxisTextColor: baseThemeVariables.fg,
|
||||
chartAxisFontSize: '16',
|
||||
chartGradientTo: theme.primary,
|
||||
chartGradientFrom: theme.primaryLight,
|
||||
chartAxisSplitLine: theme.separator,
|
||||
chartShadowLineColor: theme.primaryLight,
|
||||
chartGradientTo: baseThemeVariables.primary,
|
||||
chartGradientFrom: baseThemeVariables.primaryLight,
|
||||
chartAxisSplitLine: baseThemeVariables.separator,
|
||||
chartShadowLineColor: baseThemeVariables.primaryLight,
|
||||
|
||||
chartLineBottomShadowColor: theme.primary,
|
||||
chartLineBottomShadowColor: baseThemeVariables.primary,
|
||||
|
||||
chartInnerLineColor: theme.bg2,
|
||||
chartInnerLineColor: baseThemeVariables.bg2,
|
||||
},
|
||||
|
||||
echarts: {
|
||||
bg: theme.bg,
|
||||
textColor: theme.fgText,
|
||||
axisLineColor: theme.fgText,
|
||||
splitLineColor: theme.separator,
|
||||
bg: baseThemeVariables.bg,
|
||||
textColor: baseThemeVariables.fgText,
|
||||
axisLineColor: baseThemeVariables.fgText,
|
||||
splitLineColor: baseThemeVariables.separator,
|
||||
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
tooltipBackgroundColor: theme.primary,
|
||||
tooltipBackgroundColor: baseThemeVariables.primary,
|
||||
areaOpacity: '1',
|
||||
},
|
||||
|
||||
chartjs: {
|
||||
axisLineColor: theme.separator,
|
||||
textColor: theme.fgText,
|
||||
axisLineColor: baseThemeVariables.separator,
|
||||
textColor: baseThemeVariables.fgText,
|
||||
},
|
||||
|
||||
orders: {
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||
tooltipLineWidth: '0',
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '20',
|
||||
|
||||
axisLineColor: theme.border4,
|
||||
axisLineColor: baseThemeVariables.border4,
|
||||
axisFontSize: '16',
|
||||
axisTextColor: theme.fg,
|
||||
yAxisSplitLine: theme.separator,
|
||||
axisTextColor: baseThemeVariables.fg,
|
||||
yAxisSplitLine: baseThemeVariables.separator,
|
||||
|
||||
itemBorderColor: theme.primary,
|
||||
itemBorderColor: baseThemeVariables.primary,
|
||||
lineStyle: 'solid',
|
||||
lineWidth: '4',
|
||||
|
||||
// first line
|
||||
firstAreaGradFrom: theme.bg2,
|
||||
firstAreaGradTo: theme.bg2,
|
||||
firstShadowLineDarkBg: theme.bg2,
|
||||
firstAreaGradFrom: baseThemeVariables.bg2,
|
||||
firstAreaGradTo: baseThemeVariables.bg2,
|
||||
firstShadowLineDarkBg: baseThemeVariables.bg2,
|
||||
|
||||
// second line
|
||||
secondLineGradFrom: theme.primary,
|
||||
secondLineGradTo: theme.primary,
|
||||
secondLineGradFrom: baseThemeVariables.primary,
|
||||
secondLineGradTo: baseThemeVariables.primary,
|
||||
|
||||
secondAreaGradFrom: 'rgba(161, 110, 255, 0.8)',
|
||||
secondAreaGradTo: 'rgba(161, 110, 255, 0.5)',
|
||||
secondShadowLineDarkBg: theme.primary,
|
||||
secondShadowLineDarkBg: baseThemeVariables.primary,
|
||||
|
||||
// third line
|
||||
thirdLineGradFrom: theme.success,
|
||||
thirdLineGradTo: theme.successLight,
|
||||
thirdLineGradFrom: baseThemeVariables.success,
|
||||
thirdLineGradTo: baseThemeVariables.successLight,
|
||||
|
||||
thirdAreaGradFrom: 'rgba(0, 214, 143, 0.7)',
|
||||
thirdAreaGradTo: 'rgba(0, 214, 143, 0.4)',
|
||||
thirdShadowLineDarkBg: theme.success,
|
||||
thirdShadowLineDarkBg: baseThemeVariables.success,
|
||||
},
|
||||
|
||||
profit: {
|
||||
bg: theme.bg,
|
||||
textColor: theme.fgText,
|
||||
axisLineColor: theme.border4,
|
||||
splitLineColor: theme.separator,
|
||||
bg: baseThemeVariables.bg,
|
||||
textColor: baseThemeVariables.fgText,
|
||||
axisLineColor: baseThemeVariables.border4,
|
||||
splitLineColor: baseThemeVariables.separator,
|
||||
areaOpacity: '1',
|
||||
|
||||
axisFontSize: '16',
|
||||
axisTextColor: theme.fg,
|
||||
axisTextColor: baseThemeVariables.fg,
|
||||
|
||||
// first bar
|
||||
firstLineGradFrom: theme.bg2,
|
||||
firstLineGradTo: theme.bg2,
|
||||
firstLineGradFrom: baseThemeVariables.bg2,
|
||||
firstLineGradTo: baseThemeVariables.bg2,
|
||||
firstLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// second bar
|
||||
secondLineGradFrom: theme.primary,
|
||||
secondLineGradTo: theme.primary,
|
||||
secondLineGradFrom: baseThemeVariables.primary,
|
||||
secondLineGradTo: baseThemeVariables.primary,
|
||||
secondLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// third bar
|
||||
thirdLineGradFrom: theme.success,
|
||||
thirdLineGradTo: theme.successLight,
|
||||
thirdLineGradFrom: baseThemeVariables.success,
|
||||
thirdLineGradTo: baseThemeVariables.successLight,
|
||||
thirdLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
orderProfitLegend: {
|
||||
firstItem: theme.success,
|
||||
secondItem: theme.primary,
|
||||
thirdItem: theme.bg2,
|
||||
firstItem: baseThemeVariables.success,
|
||||
secondItem: baseThemeVariables.primary,
|
||||
thirdItem: baseThemeVariables.bg2,
|
||||
},
|
||||
|
||||
visitors: {
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||
tooltipLineWidth: '1',
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '20',
|
||||
|
||||
axisLineColor: theme.border4,
|
||||
axisLineColor: baseThemeVariables.border4,
|
||||
axisFontSize: '16',
|
||||
axisTextColor: theme.fg,
|
||||
yAxisSplitLine: theme.separator,
|
||||
axisTextColor: baseThemeVariables.fg,
|
||||
yAxisSplitLine: baseThemeVariables.separator,
|
||||
|
||||
itemBorderColor: theme.primary,
|
||||
itemBorderColor: baseThemeVariables.primary,
|
||||
lineStyle: 'dotted',
|
||||
lineWidth: '6',
|
||||
lineGradFrom: '#ffffff',
|
||||
lineGradTo: '#ffffff',
|
||||
lineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
areaGradFrom: theme.primary,
|
||||
areaGradTo: theme.primaryLight,
|
||||
areaGradFrom: baseThemeVariables.primary,
|
||||
areaGradTo: baseThemeVariables.primaryLight,
|
||||
|
||||
innerLineStyle: 'solid',
|
||||
innerLineWidth: '1',
|
||||
|
||||
innerAreaGradFrom: theme.success,
|
||||
innerAreaGradTo: theme.success,
|
||||
innerAreaGradFrom: baseThemeVariables.success,
|
||||
innerAreaGradTo: baseThemeVariables.success,
|
||||
},
|
||||
|
||||
visitorsLegend: {
|
||||
firstIcon: theme.success,
|
||||
secondIcon: theme.primary,
|
||||
firstIcon: baseThemeVariables.success,
|
||||
secondIcon: baseThemeVariables.primary,
|
||||
},
|
||||
|
||||
visitorsPie: {
|
||||
firstPieGradientLeft: theme.success,
|
||||
firstPieGradientRight: theme.successLight,
|
||||
firstPieGradientLeft: baseThemeVariables.success,
|
||||
firstPieGradientRight: baseThemeVariables.successLight,
|
||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
firstPieRadius: ['70%', '90%'],
|
||||
|
||||
secondPieGradientLeft: theme.warning,
|
||||
secondPieGradientRight: theme.warningLight,
|
||||
secondPieGradientLeft: baseThemeVariables.warning,
|
||||
secondPieGradientRight: baseThemeVariables.warningLight,
|
||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
secondPieRadius: ['60%', '95%'],
|
||||
shadowOffsetX: '0',
|
||||
|
|
@ -311,8 +269,8 @@ export const COSMIC_THEME = {
|
|||
},
|
||||
|
||||
visitorsPieLegend: {
|
||||
firstSection: theme.warning,
|
||||
secondSection: theme.success,
|
||||
firstSection: baseThemeVariables.warning,
|
||||
secondSection: baseThemeVariables.success,
|
||||
},
|
||||
|
||||
earningPie: {
|
||||
|
|
@ -321,28 +279,28 @@ export const COSMIC_THEME = {
|
|||
|
||||
fontSize: '22',
|
||||
|
||||
firstPieGradientLeft: theme.success,
|
||||
firstPieGradientRight: theme.success,
|
||||
firstPieGradientLeft: baseThemeVariables.success,
|
||||
firstPieGradientRight: baseThemeVariables.success,
|
||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
secondPieGradientLeft: theme.primary,
|
||||
secondPieGradientRight: theme.primary,
|
||||
secondPieGradientLeft: baseThemeVariables.primary,
|
||||
secondPieGradientRight: baseThemeVariables.primary,
|
||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
thirdPieGradientLeft: theme.warning,
|
||||
thirdPieGradientRight: theme.warning,
|
||||
thirdPieGradientLeft: baseThemeVariables.warning,
|
||||
thirdPieGradientRight: baseThemeVariables.warning,
|
||||
thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
earningLine: {
|
||||
gradFrom: theme.primary,
|
||||
gradTo: theme.primary,
|
||||
gradFrom: baseThemeVariables.primary,
|
||||
gradTo: baseThemeVariables.primary,
|
||||
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '16',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipBorderWidth: '1',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,226 +1,190 @@
|
|||
import { NbJSThemeOptions } from '@nebular/theme';
|
||||
import { NbJSThemeOptions, DARK_THEME as baseTheme } from '@nebular/theme';
|
||||
|
||||
const palette = {
|
||||
primary: '#3366ff',
|
||||
success: '#00d68f',
|
||||
info: '#0095ff',
|
||||
warning: '#ffaa00',
|
||||
danger: '#ff3d71',
|
||||
};
|
||||
|
||||
const theme = {
|
||||
fontMain: 'Open Sans, sans-serif',
|
||||
fontSecondary: 'Raleway, sans-serif',
|
||||
|
||||
bg: '#222b45',
|
||||
bg2: '#1a2138',
|
||||
bg3: '#151a30',
|
||||
bg4: '#101426',
|
||||
|
||||
border: '#222b45',
|
||||
border2: '#1a2138',
|
||||
border3: '#151a30',
|
||||
border4: '#101426',
|
||||
border5: '#101426',
|
||||
|
||||
fg: '#8f9bb3',
|
||||
fgHeading: '#ffffff',
|
||||
fgText: '#ffffff',
|
||||
fgHighlight: palette.primary,
|
||||
layoutBg: '#1b1b38',
|
||||
separator: '#1b1b38',
|
||||
|
||||
primary: palette.primary,
|
||||
success: palette.success,
|
||||
info: palette.info,
|
||||
warning: palette.warning,
|
||||
danger: palette.danger,
|
||||
|
||||
primaryLight: '#598bff',
|
||||
successLight: '#2ce69b',
|
||||
infoLight: '#42aaff',
|
||||
warningLight: '#ffc94d',
|
||||
dangerLight: '#ff708d',
|
||||
};
|
||||
const baseThemeVariables = baseTheme.variables;
|
||||
|
||||
export const DARK_THEME = {
|
||||
name: 'dark',
|
||||
base: 'dark',
|
||||
variables: {
|
||||
...theme,
|
||||
|
||||
temperature: {
|
||||
arcFill: [ theme.primary, theme.primary, theme.primary, theme.primary, theme.primary ],
|
||||
arcEmpty: theme.bg2,
|
||||
thumbBg: theme.bg2,
|
||||
thumbBorder: theme.primary,
|
||||
arcFill: [
|
||||
baseThemeVariables.primary,
|
||||
baseThemeVariables.primary,
|
||||
baseThemeVariables.primary,
|
||||
baseThemeVariables.primary,
|
||||
baseThemeVariables.primary,
|
||||
],
|
||||
arcEmpty: baseThemeVariables.bg2,
|
||||
thumbBg: baseThemeVariables.bg2,
|
||||
thumbBorder: baseThemeVariables.primary,
|
||||
},
|
||||
|
||||
solar: {
|
||||
gradientLeft: theme.primary,
|
||||
gradientRight: theme.primary,
|
||||
gradientLeft: baseThemeVariables.primary,
|
||||
gradientRight: baseThemeVariables.primary,
|
||||
shadowColor: 'rgba(0, 0, 0, 0)',
|
||||
secondSeriesFill: theme.bg2,
|
||||
secondSeriesFill: baseThemeVariables.bg2,
|
||||
radius: ['80%', '90%'],
|
||||
},
|
||||
|
||||
traffic: {
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
|
||||
yAxisSplitLine: theme.separator,
|
||||
yAxisSplitLine: baseThemeVariables.separator,
|
||||
|
||||
lineBg: theme.border4,
|
||||
lineBg: baseThemeVariables.border4,
|
||||
lineShadowBlur: '1',
|
||||
itemColor: theme.border4,
|
||||
itemBorderColor: theme.border4,
|
||||
itemEmphasisBorderColor: theme.primary,
|
||||
itemColor: baseThemeVariables.border4,
|
||||
itemBorderColor: baseThemeVariables.border4,
|
||||
itemEmphasisBorderColor: baseThemeVariables.primary,
|
||||
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
shadowLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
gradFrom: theme.bg2,
|
||||
gradTo: theme.bg2,
|
||||
gradFrom: baseThemeVariables.bg2,
|
||||
gradTo: baseThemeVariables.bg2,
|
||||
},
|
||||
|
||||
electricity: {
|
||||
tooltipBg: theme.bg,
|
||||
tooltipLineColor: theme.fgText,
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipLineColor: baseThemeVariables.fgText,
|
||||
tooltipLineWidth: '0',
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
|
||||
axisLineColor: theme.border3,
|
||||
xAxisTextColor: theme.fg,
|
||||
yAxisSplitLine: theme.separator,
|
||||
axisLineColor: baseThemeVariables.border3,
|
||||
xAxisTextColor: baseThemeVariables.fg,
|
||||
yAxisSplitLine: baseThemeVariables.separator,
|
||||
|
||||
itemBorderColor: theme.primary,
|
||||
itemBorderColor: baseThemeVariables.primary,
|
||||
lineStyle: 'solid',
|
||||
lineWidth: '4',
|
||||
lineGradFrom: theme.primary,
|
||||
lineGradTo: theme.primary,
|
||||
lineGradFrom: baseThemeVariables.primary,
|
||||
lineGradTo: baseThemeVariables.primary,
|
||||
lineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
areaGradFrom: theme.bg2,
|
||||
areaGradTo: theme.bg2,
|
||||
areaGradFrom: baseThemeVariables.bg2,
|
||||
areaGradTo: baseThemeVariables.bg2,
|
||||
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
bubbleMap: {
|
||||
titleColor: theme.fgText,
|
||||
areaColor: theme.bg4,
|
||||
areaHoverColor: theme.fgHighlight,
|
||||
areaBorderColor: theme.border5,
|
||||
titleColor: baseThemeVariables.fgText,
|
||||
areaColor: baseThemeVariables.bg4,
|
||||
areaHoverColor: baseThemeVariables.fgHighlight,
|
||||
areaBorderColor: baseThemeVariables.border5,
|
||||
},
|
||||
|
||||
profitBarAnimationEchart: {
|
||||
textColor: theme.fgText,
|
||||
textColor: baseThemeVariables.fgText,
|
||||
|
||||
firstAnimationBarColor: theme.primary,
|
||||
secondAnimationBarColor: theme.success,
|
||||
firstAnimationBarColor: baseThemeVariables.primary,
|
||||
secondAnimationBarColor: baseThemeVariables.success,
|
||||
|
||||
splitLineStyleOpacity: '1',
|
||||
splitLineStyleWidth: '1',
|
||||
splitLineStyleColor: theme.separator,
|
||||
splitLineStyleColor: baseThemeVariables.separator,
|
||||
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '16',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipBorderWidth: '1',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
},
|
||||
|
||||
trafficBarEchart: {
|
||||
gradientFrom: theme.warningLight,
|
||||
gradientTo: theme.warning,
|
||||
shadow: theme.warningLight,
|
||||
gradientFrom: baseThemeVariables.warningLight,
|
||||
gradientTo: baseThemeVariables.warning,
|
||||
shadow: baseThemeVariables.warningLight,
|
||||
shadowBlur: '0',
|
||||
|
||||
axisTextColor: theme.fgText,
|
||||
axisTextColor: baseThemeVariables.fgText,
|
||||
axisFontSize: '12',
|
||||
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
},
|
||||
|
||||
countryOrders: {
|
||||
countryBorderColor: theme.border4,
|
||||
countryFillColor: theme.bg3,
|
||||
countryBorderColor: baseThemeVariables.border4,
|
||||
countryFillColor: baseThemeVariables.bg3,
|
||||
countryBorderWidth: '1',
|
||||
hoveredCountryBorderColor: theme.primary,
|
||||
hoveredCountryFillColor: theme.primaryLight,
|
||||
hoveredCountryBorderColor: baseThemeVariables.primary,
|
||||
hoveredCountryFillColor: baseThemeVariables.primaryLight,
|
||||
hoveredCountryBorderWidth: '1',
|
||||
|
||||
chartAxisLineColor: theme.border4,
|
||||
chartAxisTextColor: theme.fg,
|
||||
chartAxisLineColor: baseThemeVariables.border4,
|
||||
chartAxisTextColor: baseThemeVariables.fg,
|
||||
chartAxisFontSize: '16',
|
||||
chartGradientTo: theme.primary,
|
||||
chartGradientFrom: theme.primaryLight,
|
||||
chartAxisSplitLine: theme.separator,
|
||||
chartShadowLineColor: theme.primaryLight,
|
||||
chartGradientTo: baseThemeVariables.primary,
|
||||
chartGradientFrom: baseThemeVariables.primaryLight,
|
||||
chartAxisSplitLine: baseThemeVariables.separator,
|
||||
chartShadowLineColor: baseThemeVariables.primaryLight,
|
||||
|
||||
chartLineBottomShadowColor: theme.primary,
|
||||
chartLineBottomShadowColor: baseThemeVariables.primary,
|
||||
|
||||
chartInnerLineColor: theme.bg2,
|
||||
chartInnerLineColor: baseThemeVariables.bg2,
|
||||
},
|
||||
|
||||
echarts: {
|
||||
bg: theme.bg,
|
||||
textColor: theme.fgText,
|
||||
axisLineColor: theme.fgText,
|
||||
splitLineColor: theme.separator,
|
||||
bg: baseThemeVariables.bg,
|
||||
textColor: baseThemeVariables.fgText,
|
||||
axisLineColor: baseThemeVariables.fgText,
|
||||
splitLineColor: baseThemeVariables.separator,
|
||||
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
tooltipBackgroundColor: theme.primary,
|
||||
tooltipBackgroundColor: baseThemeVariables.primary,
|
||||
areaOpacity: '0.7',
|
||||
},
|
||||
|
||||
chartjs: {
|
||||
axisLineColor: theme.separator,
|
||||
textColor: theme.fgText,
|
||||
axisLineColor: baseThemeVariables.separator,
|
||||
textColor: baseThemeVariables.fgText,
|
||||
},
|
||||
|
||||
orders: {
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||
tooltipLineWidth: '0',
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '20',
|
||||
|
||||
axisLineColor: theme.border4,
|
||||
axisLineColor: baseThemeVariables.border4,
|
||||
axisFontSize: '16',
|
||||
axisTextColor: theme.fg,
|
||||
yAxisSplitLine: theme.separator,
|
||||
axisTextColor: baseThemeVariables.fg,
|
||||
yAxisSplitLine: baseThemeVariables.separator,
|
||||
|
||||
itemBorderColor: theme.primary,
|
||||
itemBorderColor: baseThemeVariables.primary,
|
||||
lineStyle: 'solid',
|
||||
lineWidth: '4',
|
||||
|
||||
// first line
|
||||
firstAreaGradFrom: theme.bg3,
|
||||
firstAreaGradTo: theme.bg3,
|
||||
firstAreaGradFrom: baseThemeVariables.bg3,
|
||||
firstAreaGradTo: baseThemeVariables.bg3,
|
||||
firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// second line
|
||||
secondLineGradFrom: theme.primary,
|
||||
secondLineGradTo: theme.primary,
|
||||
secondLineGradFrom: baseThemeVariables.primary,
|
||||
secondLineGradTo: baseThemeVariables.primary,
|
||||
|
||||
secondAreaGradFrom: 'rgba(51, 102, 255, 0.2)',
|
||||
secondAreaGradTo: 'rgba(51, 102, 255, 0)',
|
||||
secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// third line
|
||||
thirdLineGradFrom: theme.success,
|
||||
thirdLineGradTo: theme.successLight,
|
||||
thirdLineGradFrom: baseThemeVariables.success,
|
||||
thirdLineGradTo: baseThemeVariables.successLight,
|
||||
|
||||
thirdAreaGradFrom: 'rgba(0, 214, 143, 0.2)',
|
||||
thirdAreaGradTo: 'rgba(0, 214, 143, 0)',
|
||||
|
|
@ -228,82 +192,82 @@ export const DARK_THEME = {
|
|||
},
|
||||
|
||||
profit: {
|
||||
bg: theme.bg,
|
||||
textColor: theme.fgText,
|
||||
axisLineColor: theme.border4,
|
||||
splitLineColor: theme.separator,
|
||||
bg: baseThemeVariables.bg,
|
||||
textColor: baseThemeVariables.fgText,
|
||||
axisLineColor: baseThemeVariables.border4,
|
||||
splitLineColor: baseThemeVariables.separator,
|
||||
areaOpacity: '1',
|
||||
|
||||
axisFontSize: '16',
|
||||
axisTextColor: theme.fg,
|
||||
axisTextColor: baseThemeVariables.fg,
|
||||
|
||||
// first bar
|
||||
firstLineGradFrom: theme.bg3,
|
||||
firstLineGradTo: theme.bg3,
|
||||
firstLineGradFrom: baseThemeVariables.bg3,
|
||||
firstLineGradTo: baseThemeVariables.bg3,
|
||||
firstLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// second bar
|
||||
secondLineGradFrom: theme.primary,
|
||||
secondLineGradTo: theme.primary,
|
||||
secondLineGradFrom: baseThemeVariables.primary,
|
||||
secondLineGradTo: baseThemeVariables.primary,
|
||||
secondLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// third bar
|
||||
thirdLineGradFrom: theme.success,
|
||||
thirdLineGradTo: theme.successLight,
|
||||
thirdLineGradFrom: baseThemeVariables.success,
|
||||
thirdLineGradTo: baseThemeVariables.successLight,
|
||||
thirdLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
orderProfitLegend: {
|
||||
firstItem: theme.success,
|
||||
secondItem: theme.primary,
|
||||
thirdItem: theme.bg3,
|
||||
firstItem: baseThemeVariables.success,
|
||||
secondItem: baseThemeVariables.primary,
|
||||
thirdItem: baseThemeVariables.bg3,
|
||||
},
|
||||
|
||||
visitors: {
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||
tooltipLineWidth: '0',
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '20',
|
||||
|
||||
axisLineColor: theme.border4,
|
||||
axisLineColor: baseThemeVariables.border4,
|
||||
axisFontSize: '16',
|
||||
axisTextColor: theme.fg,
|
||||
yAxisSplitLine: theme.separator,
|
||||
axisTextColor: baseThemeVariables.fg,
|
||||
yAxisSplitLine: baseThemeVariables.separator,
|
||||
|
||||
itemBorderColor: theme.primary,
|
||||
itemBorderColor: baseThemeVariables.primary,
|
||||
lineStyle: 'dotted',
|
||||
lineWidth: '6',
|
||||
lineGradFrom: '#ffffff',
|
||||
lineGradTo: '#ffffff',
|
||||
lineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
areaGradFrom: theme.primary,
|
||||
areaGradTo: theme.primaryLight,
|
||||
areaGradFrom: baseThemeVariables.primary,
|
||||
areaGradTo: baseThemeVariables.primaryLight,
|
||||
|
||||
innerLineStyle: 'solid',
|
||||
innerLineWidth: '1',
|
||||
|
||||
innerAreaGradFrom: theme.success,
|
||||
innerAreaGradTo: theme.success,
|
||||
innerAreaGradFrom: baseThemeVariables.success,
|
||||
innerAreaGradTo: baseThemeVariables.success,
|
||||
},
|
||||
|
||||
visitorsLegend: {
|
||||
firstIcon: theme.success,
|
||||
secondIcon: theme.primary,
|
||||
firstIcon: baseThemeVariables.success,
|
||||
secondIcon: baseThemeVariables.primary,
|
||||
},
|
||||
|
||||
visitorsPie: {
|
||||
firstPieGradientLeft: theme.success,
|
||||
firstPieGradientRight: theme.success,
|
||||
firstPieGradientLeft: baseThemeVariables.success,
|
||||
firstPieGradientRight: baseThemeVariables.success,
|
||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
firstPieRadius: ['70%', '90%'],
|
||||
|
||||
secondPieGradientLeft: theme.warning,
|
||||
secondPieGradientRight: theme.warningLight,
|
||||
secondPieGradientLeft: baseThemeVariables.warning,
|
||||
secondPieGradientRight: baseThemeVariables.warningLight,
|
||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
secondPieRadius: ['60%', '97%'],
|
||||
shadowOffsetX: '0',
|
||||
|
|
@ -311,8 +275,8 @@ export const DARK_THEME = {
|
|||
},
|
||||
|
||||
visitorsPieLegend: {
|
||||
firstSection: theme.warning,
|
||||
secondSection: theme.success,
|
||||
firstSection: baseThemeVariables.warning,
|
||||
secondSection: baseThemeVariables.success,
|
||||
},
|
||||
|
||||
earningPie: {
|
||||
|
|
@ -321,28 +285,28 @@ export const DARK_THEME = {
|
|||
|
||||
fontSize: '22',
|
||||
|
||||
firstPieGradientLeft: theme.success,
|
||||
firstPieGradientRight: theme.success,
|
||||
firstPieGradientLeft: baseThemeVariables.success,
|
||||
firstPieGradientRight: baseThemeVariables.success,
|
||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
secondPieGradientLeft: theme.primary,
|
||||
secondPieGradientRight: theme.primary,
|
||||
secondPieGradientLeft: baseThemeVariables.primary,
|
||||
secondPieGradientRight: baseThemeVariables.primary,
|
||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
thirdPieGradientLeft: theme.warning,
|
||||
thirdPieGradientRight: theme.warning,
|
||||
thirdPieGradientLeft: baseThemeVariables.warning,
|
||||
thirdPieGradientRight: baseThemeVariables.warning,
|
||||
thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
earningLine: {
|
||||
gradFrom: theme.primary,
|
||||
gradTo: theme.primary,
|
||||
gradFrom: baseThemeVariables.primary,
|
||||
gradTo: baseThemeVariables.primary,
|
||||
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '16',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipBorderWidth: '1',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,226 +1,190 @@
|
|||
import { NbJSThemeOptions } from '@nebular/theme';
|
||||
import { NbJSThemeOptions, DEFAULT_THEME as baseTheme } from '@nebular/theme';
|
||||
|
||||
const palette = {
|
||||
primary: '#3366ff',
|
||||
success: '#00d68f',
|
||||
info: '#0095ff',
|
||||
warning: '#ffaa00',
|
||||
danger: '#ff3d71',
|
||||
};
|
||||
|
||||
const theme = {
|
||||
fontMain: 'Open Sans, sans-serif',
|
||||
fontSecondary: 'Raleway, sans-serif',
|
||||
|
||||
bg: '#ffffff',
|
||||
bg2: '#f7f9fc',
|
||||
bg3: '#edf1f7',
|
||||
bg4: '#e4e9f2',
|
||||
|
||||
border: '#ffffff',
|
||||
border2: '#f7f9fc',
|
||||
border3: '#edf1f7',
|
||||
border4: '#e4e9f2',
|
||||
border5: '#c5cee0',
|
||||
|
||||
fg: '#8f9bb3',
|
||||
fgHeading: '#1a2138',
|
||||
fgText: '#1a2138',
|
||||
fgHighlight: palette.primary,
|
||||
layoutBg: '#f7f9fc',
|
||||
separator: '#edf1f7',
|
||||
|
||||
primary: palette.primary,
|
||||
success: palette.success,
|
||||
info: palette.info,
|
||||
warning: palette.warning,
|
||||
danger: palette.danger,
|
||||
|
||||
primaryLight: '#598bff',
|
||||
successLight: '#2ce69b',
|
||||
infoLight: '#42aaff',
|
||||
warningLight: '#ffc94d',
|
||||
dangerLight: '#ff708d',
|
||||
};
|
||||
const baseThemeVariables = baseTheme.variables;
|
||||
|
||||
export const DEFAULT_THEME = {
|
||||
name: 'default',
|
||||
base: 'default',
|
||||
variables: {
|
||||
...theme,
|
||||
|
||||
temperature: {
|
||||
arcFill: [ theme.primary, theme.primary, theme.primary, theme.primary, theme.primary ],
|
||||
arcEmpty: theme.bg2,
|
||||
thumbBg: theme.bg2,
|
||||
thumbBorder: theme.primary,
|
||||
arcFill: [
|
||||
baseThemeVariables.primary,
|
||||
baseThemeVariables.primary,
|
||||
baseThemeVariables.primary,
|
||||
baseThemeVariables.primary,
|
||||
baseThemeVariables.primary,
|
||||
],
|
||||
arcEmpty: baseThemeVariables.bg2,
|
||||
thumbBg: baseThemeVariables.bg2,
|
||||
thumbBorder: baseThemeVariables.primary,
|
||||
},
|
||||
|
||||
solar: {
|
||||
gradientLeft: theme.primary,
|
||||
gradientRight: theme.primary,
|
||||
gradientLeft: baseThemeVariables.primary,
|
||||
gradientRight: baseThemeVariables.primary,
|
||||
shadowColor: 'rgba(0, 0, 0, 0)',
|
||||
secondSeriesFill: theme.bg2,
|
||||
secondSeriesFill: baseThemeVariables.bg2,
|
||||
radius: ['80%', '90%'],
|
||||
},
|
||||
|
||||
traffic: {
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
|
||||
yAxisSplitLine: theme.separator,
|
||||
yAxisSplitLine: baseThemeVariables.separator,
|
||||
|
||||
lineBg: theme.border4,
|
||||
lineBg: baseThemeVariables.border4,
|
||||
lineShadowBlur: '1',
|
||||
itemColor: theme.border4,
|
||||
itemBorderColor: theme.border4,
|
||||
itemEmphasisBorderColor: theme.primary,
|
||||
itemColor: baseThemeVariables.border4,
|
||||
itemBorderColor: baseThemeVariables.border4,
|
||||
itemEmphasisBorderColor: baseThemeVariables.primary,
|
||||
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
shadowLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
gradFrom: theme.bg2,
|
||||
gradTo: theme.bg2,
|
||||
gradFrom: baseThemeVariables.bg2,
|
||||
gradTo: baseThemeVariables.bg2,
|
||||
},
|
||||
|
||||
electricity: {
|
||||
tooltipBg: theme.bg,
|
||||
tooltipLineColor: theme.fgText,
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipLineColor: baseThemeVariables.fgText,
|
||||
tooltipLineWidth: '0',
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
|
||||
axisLineColor: theme.border3,
|
||||
xAxisTextColor: theme.fg,
|
||||
yAxisSplitLine: theme.separator,
|
||||
axisLineColor: baseThemeVariables.border3,
|
||||
xAxisTextColor: baseThemeVariables.fg,
|
||||
yAxisSplitLine: baseThemeVariables.separator,
|
||||
|
||||
itemBorderColor: theme.primary,
|
||||
itemBorderColor: baseThemeVariables.primary,
|
||||
lineStyle: 'solid',
|
||||
lineWidth: '4',
|
||||
lineGradFrom: theme.primary,
|
||||
lineGradTo: theme.primary,
|
||||
lineGradFrom: baseThemeVariables.primary,
|
||||
lineGradTo: baseThemeVariables.primary,
|
||||
lineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
areaGradFrom: theme.bg2,
|
||||
areaGradTo: theme.bg2,
|
||||
areaGradFrom: baseThemeVariables.bg2,
|
||||
areaGradTo: baseThemeVariables.bg2,
|
||||
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
bubbleMap: {
|
||||
titleColor: theme.fgText,
|
||||
areaColor: theme.bg4,
|
||||
areaHoverColor: theme.fgHighlight,
|
||||
areaBorderColor: theme.border5,
|
||||
titleColor: baseThemeVariables.fgText,
|
||||
areaColor: baseThemeVariables.bg4,
|
||||
areaHoverColor: baseThemeVariables.fgHighlight,
|
||||
areaBorderColor: baseThemeVariables.border5,
|
||||
},
|
||||
|
||||
profitBarAnimationEchart: {
|
||||
textColor: theme.fgText,
|
||||
textColor: baseThemeVariables.fgText,
|
||||
|
||||
firstAnimationBarColor: theme.primary,
|
||||
secondAnimationBarColor: theme.success,
|
||||
firstAnimationBarColor: baseThemeVariables.primary,
|
||||
secondAnimationBarColor: baseThemeVariables.success,
|
||||
|
||||
splitLineStyleOpacity: '1',
|
||||
splitLineStyleWidth: '1',
|
||||
splitLineStyleColor: theme.separator,
|
||||
splitLineStyleColor: baseThemeVariables.separator,
|
||||
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '16',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipBorderWidth: '1',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
},
|
||||
|
||||
trafficBarEchart: {
|
||||
gradientFrom: theme.warningLight,
|
||||
gradientTo: theme.warning,
|
||||
shadow: theme.warningLight,
|
||||
gradientFrom: baseThemeVariables.warningLight,
|
||||
gradientTo: baseThemeVariables.warning,
|
||||
shadow: baseThemeVariables.warningLight,
|
||||
shadowBlur: '0',
|
||||
|
||||
axisTextColor: theme.fgText,
|
||||
axisTextColor: baseThemeVariables.fgText,
|
||||
axisFontSize: '12',
|
||||
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
},
|
||||
|
||||
countryOrders: {
|
||||
countryBorderColor: theme.border4,
|
||||
countryFillColor: theme.bg3,
|
||||
countryBorderColor: baseThemeVariables.border4,
|
||||
countryFillColor: baseThemeVariables.bg3,
|
||||
countryBorderWidth: '1',
|
||||
hoveredCountryBorderColor: theme.primary,
|
||||
hoveredCountryFillColor: theme.primaryLight,
|
||||
hoveredCountryBorderColor: baseThemeVariables.primary,
|
||||
hoveredCountryFillColor: baseThemeVariables.primaryLight,
|
||||
hoveredCountryBorderWidth: '1',
|
||||
|
||||
chartAxisLineColor: theme.border4,
|
||||
chartAxisTextColor: theme.fg,
|
||||
chartAxisLineColor: baseThemeVariables.border4,
|
||||
chartAxisTextColor: baseThemeVariables.fg,
|
||||
chartAxisFontSize: '16',
|
||||
chartGradientTo: theme.primary,
|
||||
chartGradientFrom: theme.primaryLight,
|
||||
chartAxisSplitLine: theme.separator,
|
||||
chartShadowLineColor: theme.primaryLight,
|
||||
chartGradientTo: baseThemeVariables.primary,
|
||||
chartGradientFrom: baseThemeVariables.primaryLight,
|
||||
chartAxisSplitLine: baseThemeVariables.separator,
|
||||
chartShadowLineColor: baseThemeVariables.primaryLight,
|
||||
|
||||
chartLineBottomShadowColor: theme.primary,
|
||||
chartLineBottomShadowColor: baseThemeVariables.primary,
|
||||
|
||||
chartInnerLineColor: theme.bg2,
|
||||
chartInnerLineColor: baseThemeVariables.bg2,
|
||||
},
|
||||
|
||||
echarts: {
|
||||
bg: theme.bg,
|
||||
textColor: theme.fgText,
|
||||
axisLineColor: theme.fgText,
|
||||
splitLineColor: theme.separator,
|
||||
bg: baseThemeVariables.bg,
|
||||
textColor: baseThemeVariables.fgText,
|
||||
axisLineColor: baseThemeVariables.fgText,
|
||||
splitLineColor: baseThemeVariables.separator,
|
||||
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
tooltipBackgroundColor: theme.primary,
|
||||
tooltipBackgroundColor: baseThemeVariables.primary,
|
||||
areaOpacity: '0.7',
|
||||
},
|
||||
|
||||
chartjs: {
|
||||
axisLineColor: theme.separator,
|
||||
textColor: theme.fgText,
|
||||
axisLineColor: baseThemeVariables.separator,
|
||||
textColor: baseThemeVariables.fgText,
|
||||
},
|
||||
|
||||
orders: {
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||
tooltipLineWidth: '0',
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '20',
|
||||
|
||||
axisLineColor: theme.border4,
|
||||
axisLineColor: baseThemeVariables.border4,
|
||||
axisFontSize: '16',
|
||||
axisTextColor: theme.fg,
|
||||
yAxisSplitLine: theme.separator,
|
||||
axisTextColor: baseThemeVariables.fg,
|
||||
yAxisSplitLine: baseThemeVariables.separator,
|
||||
|
||||
itemBorderColor: theme.primary,
|
||||
itemBorderColor: baseThemeVariables.primary,
|
||||
lineStyle: 'solid',
|
||||
lineWidth: '4',
|
||||
|
||||
// first line
|
||||
firstAreaGradFrom: theme.bg3,
|
||||
firstAreaGradTo: theme.bg3,
|
||||
firstAreaGradFrom: baseThemeVariables.bg3,
|
||||
firstAreaGradTo: baseThemeVariables.bg3,
|
||||
firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// second line
|
||||
secondLineGradFrom: theme.primary,
|
||||
secondLineGradTo: theme.primary,
|
||||
secondLineGradFrom: baseThemeVariables.primary,
|
||||
secondLineGradTo: baseThemeVariables.primary,
|
||||
|
||||
secondAreaGradFrom: 'rgba(51, 102, 255, 0.2)',
|
||||
secondAreaGradTo: 'rgba(51, 102, 255, 0)',
|
||||
secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// third line
|
||||
thirdLineGradFrom: theme.success,
|
||||
thirdLineGradTo: theme.successLight,
|
||||
thirdLineGradFrom: baseThemeVariables.success,
|
||||
thirdLineGradTo: baseThemeVariables.successLight,
|
||||
|
||||
thirdAreaGradFrom: 'rgba(0, 214, 143, 0.2)',
|
||||
thirdAreaGradTo: 'rgba(0, 214, 143, 0)',
|
||||
|
|
@ -228,82 +192,82 @@ export const DEFAULT_THEME = {
|
|||
},
|
||||
|
||||
profit: {
|
||||
bg: theme.bg,
|
||||
textColor: theme.fgText,
|
||||
axisLineColor: theme.border4,
|
||||
splitLineColor: theme.separator,
|
||||
bg: baseThemeVariables.bg,
|
||||
textColor: baseThemeVariables.fgText,
|
||||
axisLineColor: baseThemeVariables.border4,
|
||||
splitLineColor: baseThemeVariables.separator,
|
||||
areaOpacity: '1',
|
||||
|
||||
axisFontSize: '16',
|
||||
axisTextColor: theme.fg,
|
||||
axisTextColor: baseThemeVariables.fg,
|
||||
|
||||
// first bar
|
||||
firstLineGradFrom: theme.bg3,
|
||||
firstLineGradTo: theme.bg3,
|
||||
firstLineGradFrom: baseThemeVariables.bg3,
|
||||
firstLineGradTo: baseThemeVariables.bg3,
|
||||
firstLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// second bar
|
||||
secondLineGradFrom: theme.primary,
|
||||
secondLineGradTo: theme.primary,
|
||||
secondLineGradFrom: baseThemeVariables.primary,
|
||||
secondLineGradTo: baseThemeVariables.primary,
|
||||
secondLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// third bar
|
||||
thirdLineGradFrom: theme.success,
|
||||
thirdLineGradTo: theme.successLight,
|
||||
thirdLineGradFrom: baseThemeVariables.success,
|
||||
thirdLineGradTo: baseThemeVariables.successLight,
|
||||
thirdLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
orderProfitLegend: {
|
||||
firstItem: theme.success,
|
||||
secondItem: theme.primary,
|
||||
thirdItem: theme.bg3,
|
||||
firstItem: baseThemeVariables.success,
|
||||
secondItem: baseThemeVariables.primary,
|
||||
thirdItem: baseThemeVariables.bg3,
|
||||
},
|
||||
|
||||
visitors: {
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||
tooltipLineWidth: '1',
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '20',
|
||||
|
||||
axisLineColor: theme.border4,
|
||||
axisLineColor: baseThemeVariables.border4,
|
||||
axisFontSize: '16',
|
||||
axisTextColor: theme.fg,
|
||||
yAxisSplitLine: theme.separator,
|
||||
axisTextColor: baseThemeVariables.fg,
|
||||
yAxisSplitLine: baseThemeVariables.separator,
|
||||
|
||||
itemBorderColor: theme.primary,
|
||||
itemBorderColor: baseThemeVariables.primary,
|
||||
lineStyle: 'dotted',
|
||||
lineWidth: '6',
|
||||
lineGradFrom: '#ffffff',
|
||||
lineGradTo: '#ffffff',
|
||||
lineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
areaGradFrom: theme.primary,
|
||||
areaGradTo: theme.primaryLight,
|
||||
areaGradFrom: baseThemeVariables.primary,
|
||||
areaGradTo: baseThemeVariables.primaryLight,
|
||||
|
||||
innerLineStyle: 'solid',
|
||||
innerLineWidth: '1',
|
||||
|
||||
innerAreaGradFrom: theme.success,
|
||||
innerAreaGradTo: theme.success,
|
||||
innerAreaGradFrom: baseThemeVariables.success,
|
||||
innerAreaGradTo: baseThemeVariables.success,
|
||||
},
|
||||
|
||||
visitorsLegend: {
|
||||
firstIcon: theme.success,
|
||||
secondIcon: theme.primary,
|
||||
firstIcon: baseThemeVariables.success,
|
||||
secondIcon: baseThemeVariables.primary,
|
||||
},
|
||||
|
||||
visitorsPie: {
|
||||
firstPieGradientLeft: theme.success,
|
||||
firstPieGradientRight: theme.success,
|
||||
firstPieGradientLeft: baseThemeVariables.success,
|
||||
firstPieGradientRight: baseThemeVariables.success,
|
||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
firstPieRadius: ['70%', '90%'],
|
||||
|
||||
secondPieGradientLeft: theme.warning,
|
||||
secondPieGradientRight: theme.warningLight,
|
||||
secondPieGradientLeft: baseThemeVariables.warning,
|
||||
secondPieGradientRight: baseThemeVariables.warningLight,
|
||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
secondPieRadius: ['60%', '97%'],
|
||||
shadowOffsetX: '0',
|
||||
|
|
@ -311,8 +275,8 @@ export const DEFAULT_THEME = {
|
|||
},
|
||||
|
||||
visitorsPieLegend: {
|
||||
firstSection: theme.warning,
|
||||
secondSection: theme.success,
|
||||
firstSection: baseThemeVariables.warning,
|
||||
secondSection: baseThemeVariables.success,
|
||||
},
|
||||
|
||||
earningPie: {
|
||||
|
|
@ -321,28 +285,28 @@ export const DEFAULT_THEME = {
|
|||
|
||||
fontSize: '22',
|
||||
|
||||
firstPieGradientLeft: theme.success,
|
||||
firstPieGradientRight: theme.success,
|
||||
firstPieGradientLeft: baseThemeVariables.success,
|
||||
firstPieGradientRight: baseThemeVariables.success,
|
||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
secondPieGradientLeft: theme.primary,
|
||||
secondPieGradientRight: theme.primary,
|
||||
secondPieGradientLeft: baseThemeVariables.primary,
|
||||
secondPieGradientRight: baseThemeVariables.primary,
|
||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
thirdPieGradientLeft: theme.warning,
|
||||
thirdPieGradientRight: theme.warning,
|
||||
thirdPieGradientLeft: baseThemeVariables.warning,
|
||||
thirdPieGradientRight: baseThemeVariables.warning,
|
||||
thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
earningLine: {
|
||||
gradFrom: theme.primary,
|
||||
gradTo: theme.primary,
|
||||
gradFrom: baseThemeVariables.primary,
|
||||
gradTo: baseThemeVariables.primary,
|
||||
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '16',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipBorderWidth: '1',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -4,9 +4,7 @@
|
|||
@import '~@nebular/theme/styles/themes';
|
||||
|
||||
$nb-themes: nb-register-theme((
|
||||
font-family-secondary: font-family-primary,
|
||||
layout-padding-top: 2.25rem,
|
||||
layout-window-mode-padding-top: 0,
|
||||
|
||||
menu-item-icon-margin: 0 0.5rem 0 0,
|
||||
|
||||
|
|
@ -24,16 +22,10 @@ $nb-themes: nb-register-theme((
|
|||
slide-out-background: #f7f9fc,
|
||||
slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
|
||||
slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
|
||||
|
||||
smart-table-bg-even: background-basic-color-2,
|
||||
smart-table-bg-active: background-basic-color-3,
|
||||
smart-table-paging-hover: transparent,
|
||||
), default, default);
|
||||
|
||||
$nb-themes: nb-register-theme((
|
||||
font-family-secondary: font-family-primary,
|
||||
layout-padding-top: 2.25rem,
|
||||
layout-window-mode-padding-top: 0,
|
||||
|
||||
menu-item-icon-margin: 0 0.5rem 0 0,
|
||||
|
||||
|
|
@ -51,16 +43,10 @@ $nb-themes: nb-register-theme((
|
|||
slide-out-background: #252547,
|
||||
slide-out-shadow-color: 2px 0 3px #29157a,
|
||||
slide-out-shadow-color-rtl: -2px 0 3px #29157a,
|
||||
|
||||
smart-table-bg-even: background-basic-color-2,
|
||||
smart-table-bg-active: background-basic-color-3,
|
||||
smart-table-paging-hover: transparent,
|
||||
), cosmic, cosmic);
|
||||
|
||||
$nb-themes: nb-register-theme((
|
||||
font-family-secondary: font-family-primary,
|
||||
layout-padding-top: 2.25rem,
|
||||
layout-window-mode-padding-top: 0,
|
||||
|
||||
menu-item-icon-margin: 0 0.5rem 0 0,
|
||||
|
||||
|
|
@ -78,16 +64,10 @@ $nb-themes: nb-register-theme((
|
|||
slide-out-background: linear-gradient(270deg, #edf1f7 0%, #e4e9f2 100%),
|
||||
slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
|
||||
slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
|
||||
|
||||
smart-table-bg-even: background-basic-color-2,
|
||||
smart-table-bg-active: background-basic-color-3,
|
||||
smart-table-paging-hover: transparent,
|
||||
), corporate, corporate);
|
||||
|
||||
$nb-themes: nb-register-theme((
|
||||
font-family-secondary: font-family-primary,
|
||||
layout-padding-top: 2.25rem,
|
||||
layout-window-mode-padding-top: 0,
|
||||
|
||||
menu-item-icon-margin: 0 0.5rem 0 0,
|
||||
|
||||
|
|
@ -105,8 +85,4 @@ $nb-themes: nb-register-theme((
|
|||
slide-out-background: linear-gradient(270deg, #222b45 0%, #151a30 100%),
|
||||
slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
|
||||
slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
|
||||
|
||||
smart-table-bg-even: background-basic-color-2,
|
||||
smart-table-bg-active: background-basic-color-3,
|
||||
smart-table-paging-hover: transparent,
|
||||
), dark, dark);
|
||||
|
|
|
|||
|
|
@ -34,7 +34,6 @@ import {
|
|||
ThreeColumnsLayoutComponent,
|
||||
TwoColumnsLayoutComponent,
|
||||
} from './layouts';
|
||||
import { WindowModeBlockScrollService } from './services/window-mode-block-scroll.service';
|
||||
import { DEFAULT_THEME } from './styles/theme.default';
|
||||
import { COSMIC_THEME } from './styles/theme.cosmic';
|
||||
import { CORPORATE_THEME } from './styles/theme.corporate';
|
||||
|
|
@ -87,7 +86,6 @@ export class ThemeModule {
|
|||
},
|
||||
[ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME ],
|
||||
).providers,
|
||||
WindowModeBlockScrollService,
|
||||
],
|
||||
};
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue