mirror of
https://github.com/akveo/ngx-admin.git
synced 2026-02-20 23:14:07 +01:00
feat: update to Angular 8, Nebular 4 (#2114)
This commit is contained in:
Dmitry Nehaychik
Sergey Andrievskiy
parent
537e6a77b0
commit
e9600b4a07
323 changed files with 7421 additions and 14161 deletions
68
src/app/@theme/styles/_overrides.scss
Normal file
68
src/app/@theme/styles/_overrides.scss
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
@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;
|
||||
|
||||
nb-icon {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
html {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
|
@ -7,16 +7,14 @@
|
|||
@mixin ngx-pace-theme() {
|
||||
|
||||
.pace .pace-progress {
|
||||
background: nb-theme(color-fg-highlight);
|
||||
background: nb-theme(color-primary-default);
|
||||
}
|
||||
|
||||
.pace .pace-progress-inner {
|
||||
box-shadow: 0 0 10px nb-theme(color-fg-highlight), 0 0 5px nb-theme(color-fg-highlight);
|
||||
box-shadow: 0 0 10px nb-theme(color-primary-default), 0 0 5px nb-theme(color-primary-default);
|
||||
}
|
||||
|
||||
.pace .pace-activity {
|
||||
display: none;
|
||||
// border-top-color: nb-theme(color-fg-highlight);
|
||||
// border-left-color: nb-theme(color-fg-highlight);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap');
|
||||
|
||||
// themes - our custom or/and out of the box themes
|
||||
@import 'themes';
|
||||
|
||||
|
|
@ -5,14 +7,13 @@
|
|||
@import '~@nebular/theme/styles/globals';
|
||||
@import '~@nebular/auth/styles/all';
|
||||
@import '~@nebular/bootstrap/styles/globals';
|
||||
// ...
|
||||
|
||||
// global app font size
|
||||
@import './font-size';
|
||||
|
||||
// loading progress bar theme
|
||||
@import './pace.theme';
|
||||
|
||||
@import './overrides';
|
||||
|
||||
// install the framework and custom global styles
|
||||
@include nb-install() {
|
||||
|
||||
|
|
@ -23,4 +24,6 @@
|
|||
|
||||
// loading progress bar
|
||||
@include ngx-pace-theme();
|
||||
|
||||
@include nb-overrides();
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,179 +1,226 @@
|
|||
import { NbJSThemeOptions } 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',
|
||||
};
|
||||
|
||||
export const CORPORATE_THEME = {
|
||||
name: 'corporate',
|
||||
base: 'default',
|
||||
variables: {
|
||||
temperature: [
|
||||
'#ffa36b',
|
||||
'#ffa36b',
|
||||
'#ff9e7a',
|
||||
'#ff9888',
|
||||
'#ff8ea0',
|
||||
],
|
||||
...theme,
|
||||
|
||||
temperature: {
|
||||
arcFill: [ '#ffa36b', '#ffa36b', '#ff9e7a', '#ff9888', '#ff8ea0' ],
|
||||
arcEmpty: theme.bg2,
|
||||
thumbBg: theme.bg2,
|
||||
thumbBorder: '#ffa36b',
|
||||
},
|
||||
|
||||
solar: {
|
||||
gradientLeft: '#ff8ea0',
|
||||
gradientRight: '#ffa36b',
|
||||
gradientLeft: theme.primary,
|
||||
gradientRight: theme.primary,
|
||||
shadowColor: 'rgba(0, 0, 0, 0)',
|
||||
secondSeriesFill: theme.bg2,
|
||||
radius: ['80%', '90%'],
|
||||
},
|
||||
|
||||
traffic: {
|
||||
colorBlack: '#ffffff',
|
||||
tooltipBg: '#eef2f5',
|
||||
tooltipBorderColor: '#eef2f5',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: '400',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
|
||||
lineBg: '#cae6f3',
|
||||
yAxisSplitLine: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
lineBg: theme.primary,
|
||||
lineShadowBlur: '0',
|
||||
itemColor: '#bcc3cc',
|
||||
itemBorderColor: '#bcc3cc',
|
||||
itemEmphasisBorderColor: '#74a2ff',
|
||||
itemColor: theme.border4,
|
||||
itemBorderColor: theme.border4,
|
||||
itemEmphasisBorderColor: theme.primaryLight,
|
||||
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
shadowLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
gradFrom: '#ffffff',
|
||||
gradTo: '#ffffff',
|
||||
gradFrom: theme.bg,
|
||||
gradTo: theme.bg,
|
||||
},
|
||||
|
||||
electricity: {
|
||||
tooltipBg: '#edf0f4',
|
||||
tooltipLineColor: '#bdc4cd',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipLineColor: theme.fgText,
|
||||
tooltipLineWidth: '0',
|
||||
tooltipBorderColor: '#ebeef2',
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: 'bolder',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
|
||||
axisLineColor: 'rgba(0, 0, 0, 0)',
|
||||
xAxisTextColor: '#2a2a2a',
|
||||
yAxisSplitLine: '#ebeef2',
|
||||
axisLineColor: theme.border3,
|
||||
xAxisTextColor: theme.fg,
|
||||
yAxisSplitLine: theme.separator,
|
||||
|
||||
itemBorderColor: '#73a1ff',
|
||||
itemBorderColor: theme.primary,
|
||||
lineStyle: 'solid',
|
||||
lineWidth: '4',
|
||||
lineGradFrom: '#bdc4cd',
|
||||
lineGradTo: '#c0c8d1',
|
||||
lineGradFrom: theme.primary,
|
||||
lineGradTo: theme.primary,
|
||||
lineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
areaGradFrom: 'rgba(255, 255, 255, 0)',
|
||||
areaGradTo: 'rgba(255, 255, 255, 0)',
|
||||
shadowLineDarkBg: 'rgba(255, 255, 255, 0)',
|
||||
areaGradFrom: 'rgba(0, 0, 0, 0)',
|
||||
areaGradTo: 'rgba(0, 0, 0, 0)',
|
||||
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
bubbleMap: {
|
||||
titleColor: '#484848',
|
||||
areaColor: '#dddddd',
|
||||
areaHoverColor: '#cccccc',
|
||||
areaBorderColor: '#ebeef2',
|
||||
titleColor: theme.fgText,
|
||||
areaColor: theme.bg4,
|
||||
areaHoverColor: theme.fgHighlight,
|
||||
areaBorderColor: theme.border5,
|
||||
},
|
||||
|
||||
profitBarAnimationEchart: {
|
||||
textColor: '#b2bac2',
|
||||
textColor: theme.fgText,
|
||||
|
||||
firstAnimationBarColor: '#719efc',
|
||||
secondAnimationBarColor: '#5dcfe3',
|
||||
firstAnimationBarColor: theme.primary,
|
||||
secondAnimationBarColor: theme.success,
|
||||
|
||||
splitLineStyleOpacity: '0.06',
|
||||
splitLineStyleOpacity: '1',
|
||||
splitLineStyleWidth: '1',
|
||||
splitLineStyleColor: '#000000',
|
||||
splitLineStyleColor: theme.separator,
|
||||
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: '400',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '16',
|
||||
tooltipBg: '#eef2f5',
|
||||
tooltipBorderColor: '#eef2f5',
|
||||
tooltipBorderWidth: '3',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBorderWidth: '1',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
},
|
||||
|
||||
trafficBarEchart: {
|
||||
gradientFrom: '#ff8ea0',
|
||||
gradientTo: '#ffa36b',
|
||||
shadow: 'rgba(0, 0, 0, 0)',
|
||||
gradientFrom: theme.warningLight,
|
||||
gradientTo: theme.warning,
|
||||
shadow: theme.warningLight,
|
||||
shadowBlur: '0',
|
||||
|
||||
axisTextColor: '#b2bac2',
|
||||
axisTextColor: theme.fgText,
|
||||
axisFontSize: '12',
|
||||
|
||||
tooltipBg: '#edf0f4',
|
||||
tooltipBorderColor: '#ebeef2',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: 'bolder',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
},
|
||||
|
||||
countryOrders: {
|
||||
countryBorderColor: 'rgba(255, 255, 255, 1)',
|
||||
countryFillColor: 'rgba(236, 242, 245, 1)',
|
||||
countryBorderColor: theme.border4,
|
||||
countryFillColor: theme.bg4,
|
||||
countryBorderWidth: '1',
|
||||
hoveredCountryBorderColor: 'rgba(113, 158, 252, 1)',
|
||||
hoveredCountryFillColor: 'rgba(199, 216, 247, 1)',
|
||||
hoveredCountryBorderWidth: '3',
|
||||
hoveredCountryBorderColor: theme.primary,
|
||||
hoveredCountryFillColor: theme.primaryLight,
|
||||
hoveredCountryBorderWidth: '1',
|
||||
|
||||
chartAxisLineColor: 'rgba(0, 0, 0, 0)',
|
||||
chartAxisTextColor: '#b2bac2',
|
||||
chartAxisLineColor: theme.border4,
|
||||
chartAxisTextColor: theme.fg,
|
||||
chartAxisFontSize: '16',
|
||||
chartGradientTo: 'rgba(113, 158, 252, 1)',
|
||||
chartGradientFrom: 'rgba(113, 158, 252, 1)',
|
||||
chartAxisSplitLine: '#ebeef2',
|
||||
chartShadowLineColor: '#2f296b',
|
||||
chartGradientTo: theme.primary,
|
||||
chartGradientFrom: theme.primaryLight,
|
||||
chartAxisSplitLine: theme.separator,
|
||||
chartShadowLineColor: theme.primaryLight,
|
||||
|
||||
chartLineBottomShadowColor: 'rgba(113, 158, 252, 1)',
|
||||
chartLineBottomShadowColor: theme.primary,
|
||||
|
||||
chartInnerLineColor: '#eceff4',
|
||||
chartInnerLineColor: theme.bg2,
|
||||
},
|
||||
|
||||
echarts: {
|
||||
bg: '#ffffff',
|
||||
textColor: '#484848',
|
||||
axisLineColor: '#bbbbbb',
|
||||
splitLineColor: '#ebeef2',
|
||||
bg: theme.bg,
|
||||
textColor: theme.fgText,
|
||||
axisLineColor: theme.fgText,
|
||||
splitLineColor: theme.separator,
|
||||
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
tooltipBackgroundColor: '#6a7985',
|
||||
tooltipBackgroundColor: theme.primary,
|
||||
areaOpacity: '0.7',
|
||||
},
|
||||
|
||||
chartjs: {
|
||||
axisLineColor: '#cccccc',
|
||||
textColor: '#484848',
|
||||
axisLineColor: theme.separator,
|
||||
textColor: theme.fgText,
|
||||
},
|
||||
|
||||
orders: {
|
||||
tooltipBg: '#ffffff',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||
tooltipLineWidth: '0',
|
||||
tooltipBorderColor: '#ebeef2',
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: 'bolder',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '20',
|
||||
|
||||
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
||||
axisLineColor: theme.border4,
|
||||
axisFontSize: '16',
|
||||
axisTextColor: '#b2bac2',
|
||||
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
|
||||
axisTextColor: theme.fg,
|
||||
yAxisSplitLine: theme.separator,
|
||||
|
||||
itemBorderColor: '#73a1ff',
|
||||
itemBorderColor: theme.primary,
|
||||
lineStyle: 'solid',
|
||||
lineWidth: '4',
|
||||
|
||||
// first line
|
||||
firstAreaGradFrom: 'rgba(227, 236, 254, 0.7)',
|
||||
firstAreaGradTo: 'rgba(227, 236, 254, 0.7)',
|
||||
firstAreaGradFrom: theme.bg3,
|
||||
firstAreaGradTo: theme.bg3,
|
||||
firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// second line
|
||||
secondLineGradFrom: 'rgba(93, 207, 227, 1)',
|
||||
secondLineGradTo: 'rgba(93, 207, 227, 1)',
|
||||
secondLineGradFrom: theme.primary,
|
||||
secondLineGradTo: theme.primary,
|
||||
|
||||
secondAreaGradFrom: 'rgba(0, 0, 0, 0)',
|
||||
secondAreaGradTo: 'rgba(0, 0, 0, 0)',
|
||||
secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// third line
|
||||
thirdLineGradFrom: 'rgba(113, 158, 252, 1)',
|
||||
thirdLineGradTo: 'rgba(113, 158, 252, 1)',
|
||||
thirdLineGradFrom: theme.success,
|
||||
thirdLineGradTo: theme.successLight,
|
||||
|
||||
thirdAreaGradFrom: 'rgba(0, 0, 0, 0)',
|
||||
thirdAreaGradTo: 'rgba(0, 0, 0, 0)',
|
||||
|
|
@ -181,92 +228,91 @@ export const CORPORATE_THEME = {
|
|||
},
|
||||
|
||||
profit: {
|
||||
bg: '#ffffff',
|
||||
textColor: '#ffffff',
|
||||
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
||||
splitLineColor: 'rgba(161, 161 ,229, 0.2)',
|
||||
bg: theme.bg,
|
||||
textColor: theme.fgText,
|
||||
axisLineColor: theme.border4,
|
||||
splitLineColor: theme.separator,
|
||||
areaOpacity: '1',
|
||||
|
||||
axisFontSize: '16',
|
||||
axisTextColor: '#b2bac2',
|
||||
axisTextColor: theme.fg,
|
||||
|
||||
// first bar
|
||||
firstLineGradFrom: '#719efc',
|
||||
firstLineGradTo: '#719efc',
|
||||
firstLineShadow: 'rgba(14, 16, 48, 0.4)',
|
||||
firstLineGradFrom: theme.bg3,
|
||||
firstLineGradTo: theme.bg3,
|
||||
firstLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// second bar
|
||||
secondLineGradFrom: '#5dcfe3',
|
||||
secondLineGradTo: '#5dcfe3',
|
||||
secondLineShadow: 'rgba(14, 16, 48, 0.4)',
|
||||
secondLineGradFrom: theme.primary,
|
||||
secondLineGradTo: theme.primary,
|
||||
secondLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// third bar
|
||||
thirdLineGradFrom: '#e3ecfe',
|
||||
thirdLineGradTo: '#e3ecfe',
|
||||
thirdLineShadow: 'rgba(14, 16, 48, 0.4)',
|
||||
thirdLineGradFrom: theme.success,
|
||||
thirdLineGradTo: theme.success,
|
||||
thirdLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
orderProfitLegend: {
|
||||
firstItem: '#719efc',
|
||||
secondItem: '#5dcfe3',
|
||||
thirdItem: '#e3ecfe',
|
||||
firstItem: theme.success,
|
||||
secondItem: theme.primary,
|
||||
thirdItem: theme.bg3,
|
||||
},
|
||||
|
||||
visitors: {
|
||||
tooltipBg: '#ffffff',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||
tooltipLineWidth: '0',
|
||||
tooltipBorderColor: '#ebeef2',
|
||||
tooltipLineWidth: '1',
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: 'bolder',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '20',
|
||||
|
||||
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
||||
axisLineColor: theme.border4,
|
||||
axisFontSize: '16',
|
||||
axisTextColor: '#b2bac2',
|
||||
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
|
||||
axisTextColor: theme.fg,
|
||||
yAxisSplitLine: theme.separator,
|
||||
|
||||
itemBorderColor: '#73a1ff',
|
||||
itemBorderColor: theme.primary,
|
||||
lineStyle: 'dotted',
|
||||
lineWidth: '6',
|
||||
lineGradFrom: '#73a1ff',
|
||||
lineGradTo: '#73a1ff',
|
||||
lineGradFrom: '#ffffff',
|
||||
lineGradTo: '#ffffff',
|
||||
lineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
areaGradFrom: 'rgba(146, 181, 252, 1)',
|
||||
areaGradTo: 'rgba(146, 181, 252, 1)',
|
||||
shadowLineDarkBg: '#a695ff',
|
||||
areaGradFrom: theme.primary,
|
||||
areaGradTo: theme.primaryLight,
|
||||
|
||||
innerLineStyle: 'solid',
|
||||
innerLineWidth: '1',
|
||||
|
||||
innerAreaGradFrom: 'rgba(227, 236, 254, 1)',
|
||||
innerAreaGradTo: 'rgba(227, 236, 254, 1)',
|
||||
innerAreaGradFrom: theme.success,
|
||||
innerAreaGradTo: theme.success,
|
||||
},
|
||||
|
||||
visitorsLegend: {
|
||||
firstIcon: '#e3ecfe',
|
||||
secondIcon: '#719efc',
|
||||
firstIcon: theme.success,
|
||||
secondIcon: theme.primary,
|
||||
},
|
||||
|
||||
visitorsPie: {
|
||||
firstPieGradientLeft: '#94e2ed',
|
||||
firstPieGradientRight: '#94e2ed',
|
||||
firstPieGradientLeft: theme.success,
|
||||
firstPieGradientRight: theme.success,
|
||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
firstPieRadius: ['65%', '90%'],
|
||||
|
||||
secondPieGradientLeft: '#719efc',
|
||||
secondPieGradientRight: '#719efc',
|
||||
secondPieShadowColor: '#b2cafb',
|
||||
secondPieGradientLeft: theme.warning,
|
||||
secondPieGradientRight: theme.warningLight,
|
||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
secondPieRadius: ['63%', '92%'],
|
||||
shadowOffsetX: '-4',
|
||||
shadowOffsetY: '-4',
|
||||
},
|
||||
|
||||
visitorsPieLegend: {
|
||||
firstSection: '#719efc',
|
||||
secondSection: '#99e5ee',
|
||||
firstSection: theme.warning,
|
||||
secondSection: theme.success,
|
||||
},
|
||||
|
||||
earningPie: {
|
||||
|
|
@ -275,30 +321,30 @@ export const CORPORATE_THEME = {
|
|||
|
||||
fontSize: '22',
|
||||
|
||||
firstPieGradientLeft: '#719efc',
|
||||
firstPieGradientRight: '#719efc',
|
||||
firstPieGradientLeft: theme.success,
|
||||
firstPieGradientRight: theme.success,
|
||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
secondPieGradientLeft: '#ff9f6f',
|
||||
secondPieGradientRight: '#ff9f6f',
|
||||
secondPieGradientLeft: theme.primary,
|
||||
secondPieGradientRight: theme.primary,
|
||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
thirdPieGradientLeft: '#ff5e83',
|
||||
thirdPieGradientRight: '#ff5e83',
|
||||
thirdPieGradientLeft: theme.warning,
|
||||
thirdPieGradientRight: theme.warning,
|
||||
thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
earningLine: {
|
||||
gradFrom: '#e3ecfe',
|
||||
gradTo: '#e3ecfe',
|
||||
gradFrom: theme.primary,
|
||||
gradTo: theme.primary,
|
||||
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: '400',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '16',
|
||||
tooltipBg: '#eef2f5',
|
||||
tooltipBorderColor: '#eef2f5',
|
||||
tooltipBorderWidth: '3',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBorderWidth: '1',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
},
|
||||
},
|
||||
};
|
||||
} as NbJSThemeOptions;
|
||||
|
|
|
|||
|
|
@ -1,272 +1,318 @@
|
|||
import { NbJSThemeOptions } 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',
|
||||
};
|
||||
|
||||
export const COSMIC_THEME = {
|
||||
name: 'cosmic',
|
||||
base: 'default',
|
||||
variables: {
|
||||
...theme,
|
||||
|
||||
temperature: [
|
||||
'#2ec7fe',
|
||||
'#31ffad',
|
||||
'#7bff24',
|
||||
'#fff024',
|
||||
'#f7bd59',
|
||||
],
|
||||
temperature: {
|
||||
arcFill: [ '#2ec7fe', '#31ffad', '#7bff24', '#fff024', '#f7bd59' ],
|
||||
arcEmpty: theme.bg2,
|
||||
thumbBg: '#ffffff',
|
||||
thumbBorder: '#ffffff',
|
||||
},
|
||||
|
||||
solar: {
|
||||
gradientLeft: '#7bff24',
|
||||
gradientRight: '#2ec7fe',
|
||||
shadowColor: '#19977E',
|
||||
gradientLeft: theme.primary,
|
||||
gradientRight: theme.primary,
|
||||
shadowColor: 'rgba(0, 0, 0, 0)',
|
||||
secondSeriesFill: theme.bg2,
|
||||
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',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(50, 50, 89); border-radius: 10px; padding: 4px 16px;',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
|
||||
lineBg: '#d1d1ff',
|
||||
yAxisSplitLine: theme.separator,
|
||||
|
||||
lineBg: theme.border2,
|
||||
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)',
|
||||
itemColor: theme.border2,
|
||||
itemBorderColor: theme.border2,
|
||||
itemEmphasisBorderColor: theme.primary,
|
||||
shadowLineDarkBg: theme.border3,
|
||||
shadowLineShadow: theme.border3,
|
||||
gradFrom: theme.bg,
|
||||
gradTo: theme.bg2,
|
||||
},
|
||||
|
||||
electricity: {
|
||||
tooltipBg: 'rgba(0, 255, 170, 0.35)',
|
||||
tooltipLineColor: 'rgba(255, 255, 255, 0.1)',
|
||||
tooltipLineWidth: '1',
|
||||
tooltipBorderColor: '#00d977',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipLineColor: theme.fgText,
|
||||
tooltipLineWidth: '0',
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: '#ffffff',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
|
||||
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
||||
xAxisTextColor: '#a1a1e5',
|
||||
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
|
||||
axisLineColor: theme.border3,
|
||||
xAxisTextColor: theme.fg,
|
||||
yAxisSplitLine: theme.separator,
|
||||
|
||||
itemBorderColor: '#ffffff',
|
||||
itemBorderColor: theme.border2,
|
||||
lineStyle: 'dotted',
|
||||
lineWidth: '6',
|
||||
lineGradFrom: '#00ffaa',
|
||||
lineGradTo: '#fff835',
|
||||
lineShadow: 'rgba(14, 16, 48, 0.4)',
|
||||
lineGradFrom: theme.success,
|
||||
lineGradTo: theme.warning,
|
||||
lineShadow: theme.bg4,
|
||||
|
||||
areaGradFrom: 'rgba(188, 92, 255, 0.5)',
|
||||
areaGradTo: 'rgba(188, 92, 255, 0)',
|
||||
shadowLineDarkBg: '#a695ff',
|
||||
areaGradFrom: theme.bg2,
|
||||
areaGradTo: theme.bg3,
|
||||
shadowLineDarkBg: theme.bg3,
|
||||
},
|
||||
|
||||
bubbleMap: {
|
||||
titleColor: '#ffffff',
|
||||
areaColor: '#2c2961',
|
||||
areaHoverColor: '#a1a1e5',
|
||||
areaBorderColor: '#654ddb',
|
||||
titleColor: theme.fgText,
|
||||
areaColor: theme.bg4,
|
||||
areaHoverColor: theme.fgHighlight,
|
||||
areaBorderColor: theme.border5,
|
||||
},
|
||||
|
||||
profitBarAnimationEchart: {
|
||||
textColor: '#ffffff',
|
||||
textColor: theme.fgText,
|
||||
|
||||
firstAnimationBarColor: '#0088ff',
|
||||
secondAnimationBarColor: '#7659ff',
|
||||
firstAnimationBarColor: theme.primary,
|
||||
secondAnimationBarColor: theme.success,
|
||||
|
||||
splitLineStyleOpacity: '0.06',
|
||||
splitLineStyleOpacity: '1',
|
||||
splitLineStyleWidth: '1',
|
||||
splitLineStyleColor: '#000000',
|
||||
splitLineStyleColor: theme.border2,
|
||||
|
||||
tooltipTextColor: '#ffffff',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '16',
|
||||
tooltipBg: 'rgba(0, 255, 170, 0.35)',
|
||||
tooltipBorderColor: '#00d977',
|
||||
tooltipBorderWidth: '3',
|
||||
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 4px 16px;',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBorderWidth: '1',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
},
|
||||
|
||||
trafficBarEchart: {
|
||||
gradientFrom: '#fc0',
|
||||
gradientTo: '#ffa100',
|
||||
shadow: '#ffb600',
|
||||
gradientFrom: theme.warningLight,
|
||||
gradientTo: theme.warning,
|
||||
shadow: theme.warningLight,
|
||||
shadowBlur: '5',
|
||||
|
||||
axisTextColor: '#a1a1e5',
|
||||
axisTextColor: theme.fgText,
|
||||
axisFontSize: '12',
|
||||
|
||||
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',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
},
|
||||
|
||||
countryOrders: {
|
||||
countryBorderColor: '#525dbd',
|
||||
countryFillColor: '#4f41a6',
|
||||
countryBorderWidth: '2',
|
||||
hoveredCountryBorderColor: '#00f9a6',
|
||||
hoveredCountryFillColor: '#377aa7',
|
||||
hoveredCountryBorderWidth: '3',
|
||||
countryBorderColor: theme.border4,
|
||||
countryFillColor: theme.bg3,
|
||||
countryBorderWidth: '1',
|
||||
hoveredCountryBorderColor: theme.primary,
|
||||
hoveredCountryFillColor: theme.primaryLight,
|
||||
hoveredCountryBorderWidth: '1',
|
||||
|
||||
chartAxisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
||||
chartAxisTextColor: '#a1a1e5',
|
||||
chartAxisLineColor: theme.border4,
|
||||
chartAxisTextColor: theme.fg,
|
||||
chartAxisFontSize: '16',
|
||||
chartGradientTo: '#00c7c7',
|
||||
chartGradientFrom: '#00d977',
|
||||
chartAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
|
||||
chartShadowBarColor: '#2f296b',
|
||||
chartGradientTo: theme.primary,
|
||||
chartGradientFrom: theme.primaryLight,
|
||||
chartAxisSplitLine: theme.separator,
|
||||
chartShadowLineColor: theme.primaryLight,
|
||||
|
||||
chartLineBottomShadowColor: '#00977e',
|
||||
chartLineBottomShadowColor: theme.primary,
|
||||
|
||||
chartInnerLineColor: '#2f296b',
|
||||
chartInnerLineColor: theme.bg2,
|
||||
},
|
||||
|
||||
echarts: {
|
||||
bg: '#3d3780',
|
||||
textColor: '#ffffff',
|
||||
axisLineColor: '#a1a1e5',
|
||||
splitLineColor: '#342e73',
|
||||
bg: theme.bg,
|
||||
textColor: theme.fgText,
|
||||
axisLineColor: theme.fgText,
|
||||
splitLineColor: theme.separator,
|
||||
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
tooltipBackgroundColor: '#6a7985',
|
||||
tooltipBackgroundColor: theme.primary,
|
||||
areaOpacity: '1',
|
||||
},
|
||||
|
||||
chartjs: {
|
||||
axisLineColor: '#a1a1e5',
|
||||
textColor: '#ffffff',
|
||||
axisLineColor: theme.separator,
|
||||
textColor: theme.fgText,
|
||||
},
|
||||
|
||||
orders: {
|
||||
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',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||
tooltipLineWidth: '0',
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '20',
|
||||
|
||||
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
||||
axisLineColor: theme.border4,
|
||||
axisFontSize: '16',
|
||||
axisTextColor: '#a1a1e5',
|
||||
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
|
||||
axisTextColor: theme.fg,
|
||||
yAxisSplitLine: theme.separator,
|
||||
|
||||
itemBorderColor: '#ffffff',
|
||||
itemBorderColor: theme.primary,
|
||||
lineStyle: 'solid',
|
||||
lineWidth: '4',
|
||||
|
||||
// first line
|
||||
firstAreaGradFrom: 'rgba(78, 64, 164, 1)',
|
||||
firstAreaGradTo: 'rgba(78, 64, 164, 1)',
|
||||
firstShadowLineDarkBg: '#018dff',
|
||||
firstAreaGradFrom: theme.bg2,
|
||||
firstAreaGradTo: theme.bg2,
|
||||
firstShadowLineDarkBg: theme.bg2,
|
||||
|
||||
// second line
|
||||
secondLineGradFrom: '#00bece',
|
||||
secondLineGradTo: '#00da78',
|
||||
secondLineGradFrom: theme.primary,
|
||||
secondLineGradTo: theme.primary,
|
||||
|
||||
secondAreaGradFrom: 'rgba(38, 139, 145, 0.8)',
|
||||
secondAreaGradTo: 'rgba(38, 139, 145, 0.5)',
|
||||
secondShadowLineDarkBg: '#2c5a85',
|
||||
secondAreaGradFrom: 'rgba(161, 110, 255, 0.8)',
|
||||
secondAreaGradTo: 'rgba(161, 110, 255, 0.5)',
|
||||
secondShadowLineDarkBg: theme.primary,
|
||||
|
||||
// third line
|
||||
thirdLineGradFrom: '#8069ff',
|
||||
thirdLineGradTo: '#8357ff',
|
||||
thirdLineGradFrom: theme.success,
|
||||
thirdLineGradTo: theme.successLight,
|
||||
|
||||
thirdAreaGradFrom: 'rgba(118, 73, 208, 0.7)',
|
||||
thirdAreaGradTo: 'rgba(188, 92, 255, 0.4)',
|
||||
thirdShadowLineDarkBg: '#a695ff',
|
||||
thirdAreaGradFrom: 'rgba(0, 214, 143, 0.7)',
|
||||
thirdAreaGradTo: 'rgba(0, 214, 143, 0.4)',
|
||||
thirdShadowLineDarkBg: theme.success,
|
||||
},
|
||||
|
||||
profit: {
|
||||
bg: '#3d3780',
|
||||
textColor: '#ffffff',
|
||||
axisLineColor: '#a1a1e5',
|
||||
splitLineColor: '#342e73',
|
||||
bg: theme.bg,
|
||||
textColor: theme.fgText,
|
||||
axisLineColor: theme.border4,
|
||||
splitLineColor: theme.separator,
|
||||
areaOpacity: '1',
|
||||
|
||||
axisFontSize: '16',
|
||||
axisTextColor: '#a1a1e5',
|
||||
axisTextColor: theme.fg,
|
||||
|
||||
// first bar
|
||||
firstLineGradFrom: '#00bece',
|
||||
firstLineGradTo: '#00da78',
|
||||
firstLineShadow: 'rgba(14, 16, 48, 0.4)',
|
||||
firstLineGradFrom: theme.bg2,
|
||||
firstLineGradTo: theme.bg2,
|
||||
firstLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// second bar
|
||||
secondLineGradFrom: '#8069ff',
|
||||
secondLineGradTo: '#8357ff',
|
||||
secondLineShadow: 'rgba(14, 16, 48, 0.4)',
|
||||
secondLineGradFrom: theme.primary,
|
||||
secondLineGradTo: theme.primary,
|
||||
secondLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// third bar
|
||||
thirdLineGradFrom: '#4e40a4',
|
||||
thirdLineGradTo: '#4e40a4',
|
||||
thirdLineShadow: 'rgba(14, 16, 48, 0.4)',
|
||||
thirdLineGradFrom: theme.success,
|
||||
thirdLineGradTo: theme.successLight,
|
||||
thirdLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
orderProfitLegend: {
|
||||
firstItem: 'linear-gradient(90deg, #00c7c7 0%, #00d977 100%)',
|
||||
secondItem: 'linear-gradient(90deg, #a454ff 0%, #7659ff 100%)',
|
||||
thirdItem: '#4e40a4',
|
||||
firstItem: theme.success,
|
||||
secondItem: theme.primary,
|
||||
thirdItem: theme.bg2,
|
||||
},
|
||||
|
||||
visitors: {
|
||||
tooltipBg: 'rgba(0, 255, 170, 0.35)',
|
||||
tooltipLineColor: 'rgba(255, 255, 255, 0.1)',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||
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',
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '20',
|
||||
|
||||
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
||||
axisLineColor: theme.border4,
|
||||
axisFontSize: '16',
|
||||
axisTextColor: '#a1a1e5',
|
||||
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
|
||||
axisTextColor: theme.fg,
|
||||
yAxisSplitLine: theme.separator,
|
||||
|
||||
itemBorderColor: '#ffffff',
|
||||
itemBorderColor: theme.primary,
|
||||
lineStyle: 'dotted',
|
||||
lineWidth: '6',
|
||||
lineGradFrom: '#ffffff',
|
||||
lineGradTo: '#ffffff',
|
||||
lineShadow: 'rgba(14, 16, 48, 0.4)',
|
||||
lineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
areaGradFrom: 'rgba(188, 92, 255, 1)',
|
||||
areaGradTo: 'rgba(188, 92, 255, 0.5)',
|
||||
shadowLineDarkBg: '#a695ff',
|
||||
areaGradFrom: theme.primary,
|
||||
areaGradTo: theme.primaryLight,
|
||||
|
||||
innerLineStyle: 'solid',
|
||||
innerLineWidth: '1',
|
||||
|
||||
innerAreaGradFrom: 'rgba(59, 165, 243, 1)',
|
||||
innerAreaGradTo: 'rgba(4, 133, 243 , 1)',
|
||||
innerAreaGradFrom: theme.success,
|
||||
innerAreaGradTo: theme.success,
|
||||
},
|
||||
|
||||
visitorsLegend: {
|
||||
firstIcon: 'linear-gradient(90deg, #0088ff 0%, #3dafff 100%)',
|
||||
secondIcon: 'linear-gradient(90deg, #a454ff 0%, #7659ff 100%)',
|
||||
firstIcon: theme.success,
|
||||
secondIcon: theme.primary,
|
||||
},
|
||||
|
||||
visitorsPie: {
|
||||
firstPieGradientLeft: '#7bff24',
|
||||
firstPieGradientRight: '#2ec7fe',
|
||||
firstPieShadowColor: '#19977E',
|
||||
firstPieGradientLeft: theme.success,
|
||||
firstPieGradientRight: theme.successLight,
|
||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
firstPieRadius: ['70%', '90%'],
|
||||
|
||||
secondPieGradientLeft: '#ff894a',
|
||||
secondPieGradientRight: '#ffcc10',
|
||||
secondPieShadowColor: '#cf7c1c',
|
||||
secondPieGradientLeft: theme.warning,
|
||||
secondPieGradientRight: theme.warningLight,
|
||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
secondPieRadius: ['60%', '95%'],
|
||||
shadowOffsetX: '0',
|
||||
shadowOffsetY: '3',
|
||||
},
|
||||
|
||||
visitorsPieLegend: {
|
||||
firstSection: 'linear-gradient(90deg, #ffcb17 0%, #ff874c 100%)',
|
||||
secondSection: 'linear-gradient(90deg, #00c7c7 0%, #00d977 100%)',
|
||||
firstSection: theme.warning,
|
||||
secondSection: theme.success,
|
||||
},
|
||||
|
||||
earningPie: {
|
||||
|
|
@ -275,30 +321,30 @@ export const COSMIC_THEME = {
|
|||
|
||||
fontSize: '22',
|
||||
|
||||
firstPieGradientLeft: '#00d77f',
|
||||
firstPieGradientRight: '#00d77f',
|
||||
firstPieGradientLeft: theme.success,
|
||||
firstPieGradientRight: theme.success,
|
||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
secondPieGradientLeft: '#7756f7',
|
||||
secondPieGradientRight: '#7756f7',
|
||||
secondPieGradientLeft: theme.primary,
|
||||
secondPieGradientRight: theme.primary,
|
||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
thirdPieGradientLeft: '#ffca00',
|
||||
thirdPieGradientRight: '#ffca00',
|
||||
thirdPieGradientLeft: theme.warning,
|
||||
thirdPieGradientRight: theme.warning,
|
||||
thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
earningLine: {
|
||||
gradFrom: 'rgba(118, 89, 255, 0.4)',
|
||||
gradTo: 'rgba(164, 84, 255, 0.5)',
|
||||
gradFrom: theme.primary,
|
||||
gradTo: theme.primary,
|
||||
|
||||
tooltipTextColor: '#ffffff',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '16',
|
||||
tooltipBg: 'rgba(0, 255, 170, 0.35)',
|
||||
tooltipBorderColor: '#00d977',
|
||||
tooltipBorderWidth: '3',
|
||||
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 4px 16px;',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBorderWidth: '1',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
},
|
||||
},
|
||||
};
|
||||
} as NbJSThemeOptions;
|
||||
|
|
|
|||
350
src/app/@theme/styles/theme.dark.ts
Normal file
350
src/app/@theme/styles/theme.dark.ts
Normal file
|
|
@ -0,0 +1,350 @@
|
|||
import { NbJSThemeOptions } 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',
|
||||
};
|
||||
|
||||
export const DARK_THEME = {
|
||||
name: 'dark',
|
||||
variables: {
|
||||
...theme,
|
||||
|
||||
temperature: {
|
||||
arcFill: [ theme.primary, theme.primary, theme.primary, theme.primary, theme.primary ],
|
||||
arcEmpty: theme.bg2,
|
||||
thumbBg: theme.bg2,
|
||||
thumbBorder: theme.primary,
|
||||
},
|
||||
|
||||
solar: {
|
||||
gradientLeft: theme.primary,
|
||||
gradientRight: theme.primary,
|
||||
shadowColor: 'rgba(0, 0, 0, 0)',
|
||||
secondSeriesFill: theme.bg2,
|
||||
radius: ['80%', '90%'],
|
||||
},
|
||||
|
||||
traffic: {
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
|
||||
yAxisSplitLine: theme.separator,
|
||||
|
||||
lineBg: theme.border4,
|
||||
lineShadowBlur: '1',
|
||||
itemColor: theme.border4,
|
||||
itemBorderColor: theme.border4,
|
||||
itemEmphasisBorderColor: theme.primary,
|
||||
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
shadowLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
gradFrom: theme.bg2,
|
||||
gradTo: theme.bg2,
|
||||
},
|
||||
|
||||
electricity: {
|
||||
tooltipBg: theme.bg,
|
||||
tooltipLineColor: theme.fgText,
|
||||
tooltipLineWidth: '0',
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
|
||||
axisLineColor: theme.border3,
|
||||
xAxisTextColor: theme.fg,
|
||||
yAxisSplitLine: theme.separator,
|
||||
|
||||
itemBorderColor: theme.primary,
|
||||
lineStyle: 'solid',
|
||||
lineWidth: '4',
|
||||
lineGradFrom: theme.primary,
|
||||
lineGradTo: theme.primary,
|
||||
lineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
areaGradFrom: theme.bg2,
|
||||
areaGradTo: theme.bg2,
|
||||
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
bubbleMap: {
|
||||
titleColor: theme.fgText,
|
||||
areaColor: theme.bg4,
|
||||
areaHoverColor: theme.fgHighlight,
|
||||
areaBorderColor: theme.border5,
|
||||
},
|
||||
|
||||
profitBarAnimationEchart: {
|
||||
textColor: theme.fgText,
|
||||
|
||||
firstAnimationBarColor: theme.primary,
|
||||
secondAnimationBarColor: theme.success,
|
||||
|
||||
splitLineStyleOpacity: '1',
|
||||
splitLineStyleWidth: '1',
|
||||
splitLineStyleColor: theme.separator,
|
||||
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '16',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBorderWidth: '1',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
},
|
||||
|
||||
trafficBarEchart: {
|
||||
gradientFrom: theme.warningLight,
|
||||
gradientTo: theme.warning,
|
||||
shadow: theme.warningLight,
|
||||
shadowBlur: '0',
|
||||
|
||||
axisTextColor: theme.fgText,
|
||||
axisFontSize: '12',
|
||||
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
},
|
||||
|
||||
countryOrders: {
|
||||
countryBorderColor: theme.border4,
|
||||
countryFillColor: theme.bg3,
|
||||
countryBorderWidth: '1',
|
||||
hoveredCountryBorderColor: theme.primary,
|
||||
hoveredCountryFillColor: theme.primaryLight,
|
||||
hoveredCountryBorderWidth: '1',
|
||||
|
||||
chartAxisLineColor: theme.border4,
|
||||
chartAxisTextColor: theme.fg,
|
||||
chartAxisFontSize: '16',
|
||||
chartGradientTo: theme.primary,
|
||||
chartGradientFrom: theme.primaryLight,
|
||||
chartAxisSplitLine: theme.separator,
|
||||
chartShadowLineColor: theme.primaryLight,
|
||||
|
||||
chartLineBottomShadowColor: theme.primary,
|
||||
|
||||
chartInnerLineColor: theme.bg2,
|
||||
},
|
||||
|
||||
echarts: {
|
||||
bg: theme.bg,
|
||||
textColor: theme.fgText,
|
||||
axisLineColor: theme.fgText,
|
||||
splitLineColor: theme.separator,
|
||||
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
tooltipBackgroundColor: theme.primary,
|
||||
areaOpacity: '0.7',
|
||||
},
|
||||
|
||||
chartjs: {
|
||||
axisLineColor: theme.separator,
|
||||
textColor: theme.fgText,
|
||||
},
|
||||
|
||||
orders: {
|
||||
tooltipBg: theme.bg,
|
||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||
tooltipLineWidth: '0',
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '20',
|
||||
|
||||
axisLineColor: theme.border4,
|
||||
axisFontSize: '16',
|
||||
axisTextColor: theme.fg,
|
||||
yAxisSplitLine: theme.separator,
|
||||
|
||||
itemBorderColor: theme.primary,
|
||||
lineStyle: 'solid',
|
||||
lineWidth: '4',
|
||||
|
||||
// first line
|
||||
firstAreaGradFrom: theme.bg3,
|
||||
firstAreaGradTo: theme.bg3,
|
||||
firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// second line
|
||||
secondLineGradFrom: theme.primary,
|
||||
secondLineGradTo: theme.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,
|
||||
|
||||
thirdAreaGradFrom: 'rgba(0, 214, 143, 0.2)',
|
||||
thirdAreaGradTo: 'rgba(0, 214, 143, 0)',
|
||||
thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
profit: {
|
||||
bg: theme.bg,
|
||||
textColor: theme.fgText,
|
||||
axisLineColor: theme.border4,
|
||||
splitLineColor: theme.separator,
|
||||
areaOpacity: '1',
|
||||
|
||||
axisFontSize: '16',
|
||||
axisTextColor: theme.fg,
|
||||
|
||||
// first bar
|
||||
firstLineGradFrom: theme.bg3,
|
||||
firstLineGradTo: theme.bg3,
|
||||
firstLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// second bar
|
||||
secondLineGradFrom: theme.primary,
|
||||
secondLineGradTo: theme.primary,
|
||||
secondLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// third bar
|
||||
thirdLineGradFrom: theme.success,
|
||||
thirdLineGradTo: theme.successLight,
|
||||
thirdLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
orderProfitLegend: {
|
||||
firstItem: theme.success,
|
||||
secondItem: theme.primary,
|
||||
thirdItem: theme.bg3,
|
||||
},
|
||||
|
||||
visitors: {
|
||||
tooltipBg: theme.bg,
|
||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||
tooltipLineWidth: '0',
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '20',
|
||||
|
||||
axisLineColor: theme.border4,
|
||||
axisFontSize: '16',
|
||||
axisTextColor: theme.fg,
|
||||
yAxisSplitLine: theme.separator,
|
||||
|
||||
itemBorderColor: theme.primary,
|
||||
lineStyle: 'dotted',
|
||||
lineWidth: '6',
|
||||
lineGradFrom: '#ffffff',
|
||||
lineGradTo: '#ffffff',
|
||||
lineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
areaGradFrom: theme.primary,
|
||||
areaGradTo: theme.primaryLight,
|
||||
|
||||
innerLineStyle: 'solid',
|
||||
innerLineWidth: '1',
|
||||
|
||||
innerAreaGradFrom: theme.success,
|
||||
innerAreaGradTo: theme.success,
|
||||
},
|
||||
|
||||
visitorsLegend: {
|
||||
firstIcon: theme.success,
|
||||
secondIcon: theme.primary,
|
||||
},
|
||||
|
||||
visitorsPie: {
|
||||
firstPieGradientLeft: theme.success,
|
||||
firstPieGradientRight: theme.success,
|
||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
firstPieRadius: ['70%', '90%'],
|
||||
|
||||
secondPieGradientLeft: theme.warning,
|
||||
secondPieGradientRight: theme.warningLight,
|
||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
secondPieRadius: ['60%', '97%'],
|
||||
shadowOffsetX: '0',
|
||||
shadowOffsetY: '0',
|
||||
},
|
||||
|
||||
visitorsPieLegend: {
|
||||
firstSection: theme.warning,
|
||||
secondSection: theme.success,
|
||||
},
|
||||
|
||||
earningPie: {
|
||||
radius: ['65%', '100%'],
|
||||
center: ['50%', '50%'],
|
||||
|
||||
fontSize: '22',
|
||||
|
||||
firstPieGradientLeft: theme.success,
|
||||
firstPieGradientRight: theme.success,
|
||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
secondPieGradientLeft: theme.primary,
|
||||
secondPieGradientRight: theme.primary,
|
||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
thirdPieGradientLeft: theme.warning,
|
||||
thirdPieGradientRight: theme.warning,
|
||||
thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
earningLine: {
|
||||
gradFrom: theme.primary,
|
||||
gradTo: theme.primary,
|
||||
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '16',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBorderWidth: '1',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
},
|
||||
},
|
||||
} as NbJSThemeOptions;
|
||||
|
|
@ -1,266 +1,309 @@
|
|||
import { NbJSThemeOptions } 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',
|
||||
};
|
||||
|
||||
export const DEFAULT_THEME = {
|
||||
name: 'default',
|
||||
base: null,
|
||||
variables: {
|
||||
...theme,
|
||||
|
||||
// Safari fix
|
||||
temperature: [
|
||||
'#42db7d',
|
||||
'#42db7d',
|
||||
'#42db7d',
|
||||
'#42db7d',
|
||||
'#42db7d',
|
||||
],
|
||||
temperature: {
|
||||
arcFill: [ theme.primary, theme.primary, theme.primary, theme.primary, theme.primary ],
|
||||
arcEmpty: theme.bg2,
|
||||
thumbBg: theme.bg2,
|
||||
thumbBorder: theme.primary,
|
||||
},
|
||||
|
||||
solar: {
|
||||
gradientLeft: '#42db7d',
|
||||
gradientRight: '#42db7d',
|
||||
gradientLeft: theme.primary,
|
||||
gradientRight: theme.primary,
|
||||
shadowColor: 'rgba(0, 0, 0, 0)',
|
||||
secondSeriesFill: theme.bg2,
|
||||
radius: ['80%', '90%'],
|
||||
},
|
||||
|
||||
traffic: {
|
||||
colorBlack: '#000000',
|
||||
tooltipBg: '#ffffff',
|
||||
tooltipBorderColor: '#c0c8d1',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: 'bolder',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
|
||||
lineBg: '#c0c8d1',
|
||||
yAxisSplitLine: theme.separator,
|
||||
|
||||
lineBg: theme.border4,
|
||||
lineShadowBlur: '1',
|
||||
itemColor: '#bcc3cc',
|
||||
itemBorderColor: '#bcc3cc',
|
||||
itemEmphasisBorderColor: '#42db7d',
|
||||
itemColor: theme.border4,
|
||||
itemBorderColor: theme.border4,
|
||||
itemEmphasisBorderColor: theme.primary,
|
||||
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
shadowLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
gradFrom: '#ebeef2',
|
||||
gradTo: '#ebeef2',
|
||||
gradFrom: theme.bg2,
|
||||
gradTo: theme.bg2,
|
||||
},
|
||||
|
||||
electricity: {
|
||||
tooltipBg: '#ffffff',
|
||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipLineColor: theme.fgText,
|
||||
tooltipLineWidth: '0',
|
||||
tooltipBorderColor: '#ebeef2',
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: 'bolder',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
|
||||
axisLineColor: 'rgba(0, 0, 0, 0)',
|
||||
xAxisTextColor: '#2a2a2a',
|
||||
yAxisSplitLine: '#ebeef2',
|
||||
axisLineColor: theme.border3,
|
||||
xAxisTextColor: theme.fg,
|
||||
yAxisSplitLine: theme.separator,
|
||||
|
||||
itemBorderColor: '#42db7d',
|
||||
itemBorderColor: theme.primary,
|
||||
lineStyle: 'solid',
|
||||
lineWidth: '4',
|
||||
lineGradFrom: '#42db7d',
|
||||
lineGradTo: '#42db7d',
|
||||
lineGradFrom: theme.primary,
|
||||
lineGradTo: theme.primary,
|
||||
lineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
areaGradFrom: 'rgba(235, 238, 242, 0.5)',
|
||||
areaGradTo: 'rgba(235, 238, 242, 0.5)',
|
||||
areaGradFrom: theme.bg2,
|
||||
areaGradTo: theme.bg2,
|
||||
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
bubbleMap: {
|
||||
titleColor: '#484848',
|
||||
areaColor: '#dddddd',
|
||||
areaHoverColor: '#cccccc',
|
||||
areaBorderColor: '#ebeef2',
|
||||
titleColor: theme.fgText,
|
||||
areaColor: theme.bg4,
|
||||
areaHoverColor: theme.fgHighlight,
|
||||
areaBorderColor: theme.border5,
|
||||
},
|
||||
|
||||
profitBarAnimationEchart: {
|
||||
textColor: '#484848',
|
||||
textColor: theme.fgText,
|
||||
|
||||
firstAnimationBarColor: '#3edd81',
|
||||
secondAnimationBarColor: '#8d7fff',
|
||||
firstAnimationBarColor: theme.primary,
|
||||
secondAnimationBarColor: theme.success,
|
||||
|
||||
splitLineStyleOpacity: '0.06',
|
||||
splitLineStyleOpacity: '1',
|
||||
splitLineStyleWidth: '1',
|
||||
splitLineStyleColor: '#000000',
|
||||
splitLineStyleColor: theme.separator,
|
||||
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: 'bolder',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '16',
|
||||
tooltipBg: '#ffffff',
|
||||
tooltipBorderColor: '#c0c8d1',
|
||||
tooltipBorderWidth: '3',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBorderWidth: '1',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
},
|
||||
|
||||
trafficBarEchart: {
|
||||
gradientFrom: '#fc0',
|
||||
gradientTo: '#ffa100',
|
||||
shadow: '#ffb600',
|
||||
gradientFrom: theme.warningLight,
|
||||
gradientTo: theme.warning,
|
||||
shadow: theme.warningLight,
|
||||
shadowBlur: '0',
|
||||
|
||||
axisTextColor: '#b2bac2',
|
||||
axisTextColor: theme.fgText,
|
||||
axisFontSize: '12',
|
||||
|
||||
tooltipBg: '#ffffff',
|
||||
tooltipBorderColor: '#c0c8d1',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: 'bolder',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
},
|
||||
|
||||
countryOrders: {
|
||||
countryBorderColor: 'rgba(255, 255, 255, 1)',
|
||||
countryFillColor: 'rgba(236, 242, 245, 1)',
|
||||
countryBorderColor: theme.border4,
|
||||
countryFillColor: theme.bg3,
|
||||
countryBorderWidth: '1',
|
||||
hoveredCountryBorderColor: '#40dc7e',
|
||||
hoveredCountryFillColor: '#c7f4d9',
|
||||
hoveredCountryBorderWidth: '3',
|
||||
hoveredCountryBorderColor: theme.primary,
|
||||
hoveredCountryFillColor: theme.primaryLight,
|
||||
hoveredCountryBorderWidth: '1',
|
||||
|
||||
chartAxisLineColor: 'rgba(0, 0, 0, 0)',
|
||||
chartAxisTextColor: '#b2bac2',
|
||||
chartAxisLineColor: theme.border4,
|
||||
chartAxisTextColor: theme.fg,
|
||||
chartAxisFontSize: '16',
|
||||
chartGradientTo: '#3edd81',
|
||||
chartGradientFrom: '#3bddaf',
|
||||
chartAxisSplitLine: '#ebeef2',
|
||||
chartShadowLineColor: '#2f296b',
|
||||
chartGradientTo: theme.primary,
|
||||
chartGradientFrom: theme.primaryLight,
|
||||
chartAxisSplitLine: theme.separator,
|
||||
chartShadowLineColor: theme.primaryLight,
|
||||
|
||||
chartLineBottomShadowColor: '#eceff4',
|
||||
chartLineBottomShadowColor: theme.primary,
|
||||
|
||||
chartInnerLineColor: '#eceff4',
|
||||
chartInnerLineColor: theme.bg2,
|
||||
},
|
||||
|
||||
echarts: {
|
||||
bg: '#ffffff',
|
||||
textColor: '#484848',
|
||||
axisLineColor: '#bbbbbb',
|
||||
splitLineColor: '#ebeef2',
|
||||
bg: theme.bg,
|
||||
textColor: theme.fgText,
|
||||
axisLineColor: theme.fgText,
|
||||
splitLineColor: theme.separator,
|
||||
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
tooltipBackgroundColor: '#6a7985',
|
||||
tooltipBackgroundColor: theme.primary,
|
||||
areaOpacity: '0.7',
|
||||
},
|
||||
|
||||
chartjs: {
|
||||
axisLineColor: '#cccccc',
|
||||
textColor: '#484848',
|
||||
axisLineColor: theme.separator,
|
||||
textColor: theme.fgText,
|
||||
},
|
||||
|
||||
orders: {
|
||||
tooltipBg: '#ffffff',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||
tooltipLineWidth: '0',
|
||||
tooltipBorderColor: '#ebeef2',
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: 'bolder',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '20',
|
||||
|
||||
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
||||
axisLineColor: theme.border4,
|
||||
axisFontSize: '16',
|
||||
axisTextColor: '#b2bac2',
|
||||
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
|
||||
axisTextColor: theme.fg,
|
||||
yAxisSplitLine: theme.separator,
|
||||
|
||||
itemBorderColor: '#42db7d',
|
||||
itemBorderColor: theme.primary,
|
||||
lineStyle: 'solid',
|
||||
lineWidth: '4',
|
||||
|
||||
// first line
|
||||
firstAreaGradFrom: 'rgba(236, 242, 245, 0.8)',
|
||||
firstAreaGradTo: 'rgba(236, 242, 245, 0.8)',
|
||||
firstAreaGradFrom: theme.bg3,
|
||||
firstAreaGradTo: theme.bg3,
|
||||
firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// second line
|
||||
secondLineGradFrom: 'rgba(164, 123, 255, 1)',
|
||||
secondLineGradTo: 'rgba(164, 123, 255, 1)',
|
||||
secondLineGradFrom: theme.primary,
|
||||
secondLineGradTo: theme.primary,
|
||||
|
||||
secondAreaGradFrom: 'rgba(188, 92, 255, 0.2)',
|
||||
secondAreaGradTo: 'rgba(188, 92, 255, 0)',
|
||||
secondAreaGradFrom: 'rgba(51, 102, 255, 0.2)',
|
||||
secondAreaGradTo: 'rgba(51, 102, 255, 0)',
|
||||
secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// third line
|
||||
thirdLineGradFrom: 'rgba(55, 220, 136, 1)',
|
||||
thirdLineGradTo: 'rgba(55, 220, 136, 1)',
|
||||
thirdLineGradFrom: theme.success,
|
||||
thirdLineGradTo: theme.successLight,
|
||||
|
||||
thirdAreaGradFrom: 'rgba(31 ,106, 124, 0.2)',
|
||||
thirdAreaGradTo: 'rgba(4, 126, 230, 0)',
|
||||
thirdAreaGradFrom: 'rgba(0, 214, 143, 0.2)',
|
||||
thirdAreaGradTo: 'rgba(0, 214, 143, 0)',
|
||||
thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
// TODO: need design for default theme
|
||||
profit: {
|
||||
bg: '#ffffff',
|
||||
textColor: '#ffffff',
|
||||
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
||||
splitLineColor: 'rgba(161, 161 ,229, 0.2)',
|
||||
bg: theme.bg,
|
||||
textColor: theme.fgText,
|
||||
axisLineColor: theme.border4,
|
||||
splitLineColor: theme.separator,
|
||||
areaOpacity: '1',
|
||||
|
||||
axisFontSize: '16',
|
||||
axisTextColor: '#b2bac2',
|
||||
axisTextColor: theme.fg,
|
||||
|
||||
// first bar
|
||||
firstLineGradFrom: '#00bece',
|
||||
firstLineGradTo: '#00da78',
|
||||
firstLineShadow: 'rgba(14, 16, 48, 0.4)',
|
||||
firstLineGradFrom: theme.bg3,
|
||||
firstLineGradTo: theme.bg3,
|
||||
firstLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// second bar
|
||||
secondLineGradFrom: '#8069ff',
|
||||
secondLineGradTo: '#8357ff',
|
||||
secondLineShadow: 'rgba(14, 16, 48, 0.4)',
|
||||
secondLineGradFrom: theme.primary,
|
||||
secondLineGradTo: theme.primary,
|
||||
secondLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// third bar
|
||||
thirdLineGradFrom: 'rgba(236, 242, 245, 0.8)',
|
||||
thirdLineGradTo: 'rgba(236, 242, 245, 0.8)',
|
||||
thirdLineShadow: 'rgba(14, 16, 48, 0.4)',
|
||||
thirdLineGradFrom: theme.success,
|
||||
thirdLineGradTo: theme.successLight,
|
||||
thirdLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
orderProfitLegend: {
|
||||
firstItem: 'linear-gradient(90deg, #3edd81 0%, #3bddad 100%)',
|
||||
secondItem: 'linear-gradient(90deg, #8d7fff 0%, #b17fff 100%)',
|
||||
thirdItem: 'rgba(236, 242, 245, 0.8)',
|
||||
firstItem: theme.success,
|
||||
secondItem: theme.primary,
|
||||
thirdItem: theme.bg3,
|
||||
},
|
||||
|
||||
visitors: {
|
||||
tooltipBg: '#ffffff',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||
tooltipLineWidth: '0',
|
||||
tooltipBorderColor: '#ebeef2',
|
||||
tooltipLineWidth: '1',
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: 'bolder',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '20',
|
||||
|
||||
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
||||
axisLineColor: theme.border4,
|
||||
axisFontSize: '16',
|
||||
axisTextColor: '#b2bac2',
|
||||
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
|
||||
axisTextColor: theme.fg,
|
||||
yAxisSplitLine: theme.separator,
|
||||
|
||||
itemBorderColor: '#42db7d',
|
||||
itemBorderColor: theme.primary,
|
||||
lineStyle: 'dotted',
|
||||
lineWidth: '6',
|
||||
lineGradFrom: '#ffffff',
|
||||
lineGradTo: '#ffffff',
|
||||
lineShadow: 'rgba(14, 16, 48, 0)',
|
||||
lineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
areaGradFrom: 'rgba(188, 92, 255, 1)',
|
||||
areaGradTo: 'rgba(188, 92, 255, 0.5)',
|
||||
shadowLineDarkBg: '#a695ff',
|
||||
areaGradFrom: theme.primary,
|
||||
areaGradTo: theme.primaryLight,
|
||||
|
||||
innerLineStyle: 'solid',
|
||||
innerLineWidth: '1',
|
||||
|
||||
innerAreaGradFrom: 'rgba(60, 221, 156, 1)',
|
||||
innerAreaGradTo: 'rgba(60, 221, 156, 1)',
|
||||
innerAreaGradFrom: theme.success,
|
||||
innerAreaGradTo: theme.success,
|
||||
},
|
||||
|
||||
visitorsLegend: {
|
||||
firstIcon: 'linear-gradient(90deg, #3edd81 0%, #3bddad 100%)',
|
||||
secondIcon: 'linear-gradient(90deg, #8d7fff 0%, #b17fff 100%)',
|
||||
firstIcon: theme.success,
|
||||
secondIcon: theme.primary,
|
||||
},
|
||||
|
||||
visitorsPie: {
|
||||
firstPieGradientLeft: '#8defbb',
|
||||
firstPieGradientRight: '#8defbb',
|
||||
firstPieGradientLeft: theme.success,
|
||||
firstPieGradientRight: theme.success,
|
||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
firstPieRadius: ['70%', '90%'],
|
||||
|
||||
secondPieGradientLeft: '#ff894a',
|
||||
secondPieGradientRight: '#ffcc10',
|
||||
secondPieGradientLeft: theme.warning,
|
||||
secondPieGradientRight: theme.warningLight,
|
||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
secondPieRadius: ['60%', '97%'],
|
||||
shadowOffsetX: '0',
|
||||
|
|
@ -268,8 +311,8 @@ export const DEFAULT_THEME = {
|
|||
},
|
||||
|
||||
visitorsPieLegend: {
|
||||
firstSection: 'linear-gradient(90deg, #ffcb17 0%, #ff874c 100%)',
|
||||
secondSection: '#8defbb',
|
||||
firstSection: theme.warning,
|
||||
secondSection: theme.success,
|
||||
},
|
||||
|
||||
earningPie: {
|
||||
|
|
@ -278,30 +321,30 @@ export const DEFAULT_THEME = {
|
|||
|
||||
fontSize: '22',
|
||||
|
||||
firstPieGradientLeft: '#00d77f',
|
||||
firstPieGradientRight: '#00d77f',
|
||||
firstPieGradientLeft: theme.success,
|
||||
firstPieGradientRight: theme.success,
|
||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
secondPieGradientLeft: '#7756f7',
|
||||
secondPieGradientRight: '#7756f7',
|
||||
secondPieGradientLeft: theme.primary,
|
||||
secondPieGradientRight: theme.primary,
|
||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
thirdPieGradientLeft: '#ffca00',
|
||||
thirdPieGradientRight: '#ffca00',
|
||||
thirdPieGradientLeft: theme.warning,
|
||||
thirdPieGradientRight: theme.warning,
|
||||
thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
earningLine: {
|
||||
gradFrom: 'rgba(188, 92, 255, 0.5)',
|
||||
gradTo: 'rgba(188, 92, 255, 0.5)',
|
||||
gradFrom: theme.primary,
|
||||
gradTo: theme.primary,
|
||||
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: 'bolder',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '16',
|
||||
tooltipBg: '#ffffff',
|
||||
tooltipBorderColor: '#c0c8d1',
|
||||
tooltipBorderWidth: '3',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBorderWidth: '1',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
},
|
||||
},
|
||||
};
|
||||
} as NbJSThemeOptions;
|
||||
|
|
|
|||
|
|
@ -3,95 +3,110 @@
|
|||
// @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, corporate);
|
||||
|
||||
$nb-themes: nb-register-theme((
|
||||
// app wise variables for each theme
|
||||
sidebar-header-gap: 2rem,
|
||||
sidebar-header-height: initial,
|
||||
layout-content-width: 1400px,
|
||||
font-family-secondary: font-family-primary,
|
||||
layout-padding-top: 2.25rem,
|
||||
layout-window-mode-padding-top: 0,
|
||||
|
||||
font-main: Roboto,
|
||||
font-secondary: Exo,
|
||||
menu-item-icon-margin: 0 0.5rem 0 0,
|
||||
|
||||
switcher-background: #ebeff5,
|
||||
switcher-background-percentage: 50%,
|
||||
drops-icon-line-gadient: -webkit-linear-gradient(#01dbb5, #0bbb79),
|
||||
card-height-tiny: 13.5rem,
|
||||
card-height-small: 21.1875rem,
|
||||
card-height-medium: 28.875rem,
|
||||
card-height-large: 36.5625rem,
|
||||
card-height-giant: 44.25rem,
|
||||
card-margin-bottom: 1.875rem,
|
||||
card-header-with-select-padding-top: 0.5rem,
|
||||
card-header-with-select-padding-bottom: 0.5rem,
|
||||
|
||||
list-item-border-width: 1px,
|
||||
select-min-width: 6rem,
|
||||
|
||||
slide-out-container-width: 30%,
|
||||
slide-out-background: linear-gradient(270deg, #f7fafb 0%, #ecf2f5 100%),
|
||||
slide-out-shadow-color: 0 4px 14px 0 #a2d2c8,
|
||||
slide-out-shadow-color-rtl: 0 4px 14px 0 #a2d2c8,
|
||||
slide-out-background: #f7f9fc,
|
||||
slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
|
||||
slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
|
||||
|
||||
chart-panel-summary-box-shadow: none,
|
||||
chart-panel-summary-background-color: #ecf2f5,
|
||||
chart-panel-summary-border-color: #ebeff1,
|
||||
chart-panel-summary-border-width: 1px,
|
||||
|
||||
ecommerce-card-border-width: 1px,
|
||||
|
||||
progress-bar-background: linear-gradient(90deg, #3edd81 0%, #3bddaf 100%),
|
||||
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((
|
||||
// app wise variables for each theme
|
||||
sidebar-header-gap: 2rem,
|
||||
sidebar-header-height: initial,
|
||||
layout-content-width: 1400px,
|
||||
font-family-secondary: font-family-primary,
|
||||
layout-padding-top: 2.25rem,
|
||||
layout-window-mode-padding-top: 0,
|
||||
|
||||
font-main: Roboto,
|
||||
font-secondary: Exo,
|
||||
menu-item-icon-margin: 0 0.5rem 0 0,
|
||||
|
||||
switcher-background: #4e41a5,
|
||||
switcher-background-percentage: 14%,
|
||||
drops-icon-line-gadient: -webkit-linear-gradient(#a258fe, #7958fa),
|
||||
card-height-tiny: 13.5rem,
|
||||
card-height-small: 21.1875rem,
|
||||
card-height-medium: 28.875rem,
|
||||
card-height-large: 36.5625rem,
|
||||
card-height-giant: 44.25rem,
|
||||
card-margin-bottom: 1.875rem,
|
||||
card-header-with-select-padding-top: 0.5rem,
|
||||
card-header-with-select-padding-bottom: 0.5rem,
|
||||
|
||||
list-item-border-width: 1px,
|
||||
select-min-width: 6rem,
|
||||
|
||||
slide-out-container-width: 30%,
|
||||
slide-out-background: radial-gradient(circle, #302c6e 0%, #423f8c 100%),
|
||||
slide-out-shadow-color: 2px 0 3px rgba(19, 19, 94, 0.9),
|
||||
slide-out-shadow-color-rtl: -2px 0 3px rgba(19, 19, 94, 0.9),
|
||||
slide-out-background: #252547,
|
||||
slide-out-shadow-color: 2px 0 3px #29157a,
|
||||
slide-out-shadow-color-rtl: -2px 0 3px #29157a,
|
||||
|
||||
chart-panel-summary-box-shadow: none,
|
||||
chart-panel-summary-background-color: rgba(0, 0, 0, 0.1),
|
||||
chart-panel-summary-border-color: #332e73,
|
||||
chart-panel-summary-border-width: 1px,
|
||||
|
||||
ecommerce-card-border-width: 1px,
|
||||
|
||||
progress-bar-background: linear-gradient(90deg, #00c7c7 0%, #00d977 100%),
|
||||
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((
|
||||
// app wise variables for each theme
|
||||
sidebar-header-gap: 2rem,
|
||||
sidebar-header-height: initial,
|
||||
layout-content-width: 1400px,
|
||||
font-family-secondary: font-family-primary,
|
||||
layout-padding-top: 2.25rem,
|
||||
layout-window-mode-padding-top: 0,
|
||||
|
||||
font-main: Roboto,
|
||||
font-secondary: Exo,
|
||||
menu-item-icon-margin: 0 0.5rem 0 0,
|
||||
|
||||
switcher-background: #2b2d34,
|
||||
switcher-background-percentage: 14%,
|
||||
drops-icon-line-gadient: -webkit-linear-gradient(#e9e8eb, #a7a2be),
|
||||
card-height-tiny: 13.5rem,
|
||||
card-height-small: 21.1875rem,
|
||||
card-height-medium: 28.875rem,
|
||||
card-height-large: 36.5625rem,
|
||||
card-height-giant: 44.25rem,
|
||||
card-margin-bottom: 1.875rem,
|
||||
card-header-with-select-padding-top: 0.5rem,
|
||||
card-header-with-select-padding-bottom: 0.5rem,
|
||||
|
||||
list-item-border-width: 1px,
|
||||
select-min-width: 6rem,
|
||||
|
||||
slide-out-container-width: 30%,
|
||||
slide-out-background: linear-gradient(270deg, #f7fafb 0%, #ecf2f5 100%),
|
||||
slide-out-shadow-color: 0 4px 14px 0 #a2d2c8,
|
||||
slide-out-shadow-color-rtl: 0 4px 14px 0 #a2d2c8,
|
||||
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,
|
||||
|
||||
chart-panel-summary-box-shadow: none,
|
||||
chart-panel-summary-background-color: #f7fafb,
|
||||
chart-panel-summary-border-color: #ebeff1,
|
||||
chart-panel-summary-border-width: 1px,
|
||||
|
||||
ecommerce-card-border-width: 1px,
|
||||
|
||||
progress-bar-background: linear-gradient(90deg, #ff9f6f 0%, #ff8b97 100%),
|
||||
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,
|
||||
|
||||
card-height-tiny: 13.5rem,
|
||||
card-height-small: 21.1875rem,
|
||||
card-height-medium: 28.875rem,
|
||||
card-height-large: 36.5625rem,
|
||||
card-height-giant: 44.25rem,
|
||||
card-margin-bottom: 1.875rem,
|
||||
card-header-with-select-padding-top: 0.5rem,
|
||||
card-header-with-select-padding-bottom: 0.5rem,
|
||||
|
||||
select-min-width: 6rem,
|
||||
|
||||
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);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue