diff --git a/.stylelintrc.json b/.stylelintrc.json index 6b966ac3..943d5b62 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -14,7 +14,7 @@ "property-no-unknown": [ true, { - "ignoreProperties": ["/Color$/", "/Height$/"] + "ignoreProperties": ["/Color$/", "/Height$/", "productsColumnWidth"] } ] } diff --git a/config/config.yaml b/config/config.yaml index aa5b1344..653164f9 100644 --- a/config/config.yaml +++ b/config/config.yaml @@ -2,6 +2,8 @@ host: 0.0.0.0 port: 8088 server: http://localhost +theme: default + globalVariables: defaultLanguage: en supportLanguages: # use value in i18n.js diff --git a/config/js-string-replace-loader.js b/config/js-string-replace-loader.js new file mode 100644 index 00000000..293f9fdd --- /dev/null +++ b/config/js-string-replace-loader.js @@ -0,0 +1,20 @@ +const { getOptions } = require('loader-utils'); + +module.exports = function (source) { + const { search, change } = getOptions(this) || {}; // getOptions用于获取配置 + if (!search || !change) { + return source; + } + if (source.includes(search)) { + // eslint-disable-next-line no-console + console.log( + 'has-search', + search, + 'in', + this.resource, + 'replace to', + change + ); + } + return source.replace(search, change); +}; diff --git a/config/less-replace-loader.js b/config/less-replace-loader.js new file mode 100644 index 00000000..94ee737b --- /dev/null +++ b/config/less-replace-loader.js @@ -0,0 +1,17 @@ +const { getOptions } = require('loader-utils'); + +module.exports = function (source) { + const { variableFile } = getOptions(this) || {}; // getOptions用于获取配置 + if (!variableFile) { + return source; + } + + // 将 @import "styles/variables"; 变更为 @import "styles/variables"; + const consoleReg = /~styles\/variables/g; + if (consoleReg.test(source)) { + // eslint-disable-next-line no-console + console.log(this.resourcePath, 'match ~styles/variables'); + return source.replace(consoleReg, `~${variableFile}`); + } + return source; +}; diff --git a/config/theme-custom.js b/config/theme-custom.js new file mode 100644 index 00000000..3a30a6a7 --- /dev/null +++ b/config/theme-custom.js @@ -0,0 +1,26 @@ +// Copyright 2021 99cloud +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +module.exports = { + 'primary-color': '#0C63FA', + 'link-color': '#0C63FA', + 'success-color': '#52C41A', + 'warning-color': '#FAAD14', + 'error-color': '#D40000', + 'btn-default-color': '#0C63FA', + 'btn-default-border': '#0C63FA', + 'border-color-base': '#E8E8EA', + 'border-radius-base': '2px', + 'font-size-base': '12px', +}; diff --git a/config/utils.js b/config/utils.js index 8a67e75b..aa56dcba 100644 --- a/config/utils.js +++ b/config/utils.js @@ -7,6 +7,12 @@ const { merge, extend, has } = require('lodash'); const root = (dir) => `${path.resolve(__dirname, './')}/${dir}`.replace(/(\/+)/g, '/'); +const configRoot = (dir) => + `${path.resolve(__dirname, '../config')}/${dir}`.replace(/(\/+)/g, '/'); + +const srcRoot = (dir) => + `${path.resolve(__dirname, '../src')}/${dir}`.replace(/(\/+)/g, '/'); + const loadYaml = (filePath) => { try { return yaml.load(fs.readFileSync(filePath), 'utf8'); @@ -50,15 +56,101 @@ const getObjectConfig = (key) => { return result; }; +const getConfig = (key) => { + // parse config yaml + const config = loadYaml(root('./config.yaml')) || {}; + + const tryFile = root('./local_config.yaml'); + if (fs.existsSync(tryFile)) { + // merge local_config + const local_config = loadYaml(tryFile); + if (typeof local_config === 'object') { + merge(config, local_config); + } + } + + return key ? config[key] : config; +}; + +const THEMES = { + default: { + themeFile: 'theme.js', + lessVariablesName: 'styles/variables', + globalVariables: { + menuTheme: 'dark', + skylineThemeName: 'default', + }, + }, + custom: { + themeFile: 'theme-custom.js', + lessVariablesName: 'styles/variables-custom', + globalVariables: { + menuTheme: 'light', + skylineThemeName: 'custom', + }, + }, +}; + +const getThemeConfig = () => { + // parse config yaml + const themeName = getConfig('theme') || 'default'; + + const themeInfo = THEMES[themeName] || THEMES.default; + + const themeFile = configRoot(themeInfo.themeFile); + + // eslint-disable-next-line no-console + console.log('themeFile', themeFile); + + if (fs.existsSync(themeFile)) { + // eslint-disable-next-line import/no-dynamic-require + const config = require(themeFile); + return config; + } + + // eslint-disable-next-line no-console + console.error('the theme file not exist'); + return {}; +}; + +const getCustomStyleVariables = () => { + const themeName = getConfig('theme') || 'default'; + const themeInfo = THEMES[themeName] || THEMES.default; + const lessFileName = themeInfo.lessVariablesName; + const defaultLessFile = THEMES.default.lessVariablesName; + + if (defaultLessFile === lessFileName) { + return false; + } + + const customFile = srcRoot(`${lessFileName}.less`); + // eslint-disable-next-line no-console + console.log('customFile', customFile); + const exist = fs.existsSync(customFile) && lessFileName; + // eslint-disable-next-line no-console + console.log('exist', exist); + return exist; +}; + +const getGlobalVariablesForTheme = () => { + const themeName = getConfig('theme') || 'default'; + const themeInfo = THEMES[themeName] || THEMES.default; + return themeInfo.globalVariables || {}; +}; + const getGlobalVariables = () => { const variables = getObjectConfig('globalVariables') || {}; + const themeVariables = getGlobalVariablesForTheme(); + const allVariables = { ...variables, ...themeVariables }; // eslint-disable-next-line no-console - console.log('globalVariables', variables, JSON.stringify(variables)); - return JSON.stringify(variables); + console.log('globalVariables', allVariables, JSON.stringify(allVariables)); + return JSON.stringify(allVariables); }; module.exports = { getServerConfig, root, getGlobalVariables, + getThemeConfig, + getCustomStyleVariables, }; diff --git a/config/webpack.common.js b/config/webpack.common.js index 1b503288..ca3b39f1 100644 --- a/config/webpack.common.js +++ b/config/webpack.common.js @@ -17,7 +17,7 @@ const { normalize, resolve } = require('path'); // const path = require("path"); // const CleanWebpackPlugin = require('clean-webpack-plugin'); const moment = require('moment'); -const { getGlobalVariables } = require('./utils'); +const { getGlobalVariables, getCustomStyleVariables } = require('./utils'); const root = (path) => resolve(__dirname, `../${path}`); const version = moment().unix(); @@ -25,9 +25,18 @@ const version = moment().unix(); module.exports = { module: { rules: [ + { + test: /\.jsx$/, + loader: resolve('config/js-string-replace-loader'), + include: [root('src/core')], + options: { + search: 'styles/variables', + change: getCustomStyleVariables(), + }, + }, { test: /\.jsx?$/, - include: root('node_modules'), + include: [root('src'), root('node_modules')], use: ['thread-loader', 'cache-loader'], }, { @@ -73,7 +82,10 @@ module.exports = { }, }, ], - include: [root('src/asset/image/cloud-logo.svg')], + include: [ + root('src/asset/image/cloud-logo.svg'), + root('src/asset/image/cloud-logo-white.svg'), + ], }, { test: /\.(woff|woff2|ttf|eot|svg)$/, @@ -86,7 +98,10 @@ module.exports = { }, }, ], - exclude: [root('src/asset/image/cloud-logo.svg')], + exclude: [ + root('src/asset/image/cloud-logo.svg'), + root('src/asset/image/cloud-logo-white.svg'), + ], }, ], }, diff --git a/config/webpack.dev.js b/config/webpack.dev.js index abb58200..bff16d61 100644 --- a/config/webpack.dev.js +++ b/config/webpack.dev.js @@ -21,10 +21,15 @@ const HtmlWebPackPlugin = require('html-webpack-plugin'); const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); const common = require('./webpack.common'); -const theme = require('./theme'); const server = require('./server.dev'); +const { getThemeConfig, getCustomStyleVariables } = require('./utils'); + +const theme = getThemeConfig(); + +console.log('theme', theme); + const root = (path) => resolve(__dirname, `../${path}`); const { host, port, proxy } = server; @@ -129,7 +134,12 @@ module.exports = (env) => { options: { importLoaders: true, javascriptEnabled: true, - modifyVars: theme, + }, + }, + { + loader: resolve('config/less-replace-loader'), + options: { + variableFile: getCustomStyleVariables(), }, }, ], diff --git a/config/webpack.e2e.js b/config/webpack.e2e.js index 4578d129..e70c692f 100644 --- a/config/webpack.e2e.js +++ b/config/webpack.e2e.js @@ -21,7 +21,10 @@ const autoprefixer = require('autoprefixer'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const TerserPlugin = require('terser-webpack-plugin'); const common = require('./webpack.common'); -const theme = require('./theme'); + +const { getThemeConfig, getCustomStyleVariables } = require('./utils'); + +const theme = getThemeConfig(); const root = (path) => resolve(__dirname, `../${path}`); @@ -102,7 +105,12 @@ module.exports = (env) => { options: { importLoaders: true, javascriptEnabled: true, - modifyVars: theme, + }, + }, + { + loader: resolve('config/less-replace-loader'), + options: { + variableFile: getCustomStyleVariables(), }, }, ], diff --git a/config/webpack.prod.js b/config/webpack.prod.js index aabf38f0..38c76b6a 100644 --- a/config/webpack.prod.js +++ b/config/webpack.prod.js @@ -22,7 +22,10 @@ const CleanWebpackPlugin = require('clean-webpack-plugin'); const TerserPlugin = require('terser-webpack-plugin'); const CompressionWebpackPlugin = require('compression-webpack-plugin'); const common = require('./webpack.common'); -const theme = require('./theme'); + +const { getThemeConfig, getCustomStyleVariables } = require('./utils'); + +const theme = getThemeConfig(); const root = (path) => resolve(__dirname, `../${path}`); @@ -91,7 +94,12 @@ module.exports = (env) => { options: { importLoaders: true, javascriptEnabled: true, - modifyVars: theme, + }, + }, + { + loader: resolve('config/less-replace-loader'), + options: { + variableFile: getCustomStyleVariables(), }, }, ], diff --git a/releasenotes/notes/Support-A-Custom-Theme-fe56c9dc8d3bfe03.yaml b/releasenotes/notes/Support-A-Custom-Theme-fe56c9dc8d3bfe03.yaml new file mode 100644 index 00000000..b36cc890 --- /dev/null +++ b/releasenotes/notes/Support-A-Custom-Theme-fe56c9dc8d3bfe03.yaml @@ -0,0 +1,11 @@ +--- +features: + - | + Support a custom UI theme + + * Support theme setting in the config.yaml file, optional values: default, custom. + The default value represents the old theme, the custom value represents the new theme, + and the color is light. + + * When you want to use the customized new theme, you can set `theme: custom` in config.yaml + or local_config.yaml. diff --git a/src/asset/image/cloud-logo-white.svg b/src/asset/image/cloud-logo-white.svg new file mode 100644 index 00000000..2335b730 --- /dev/null +++ b/src/asset/image/cloud-logo-white.svg @@ -0,0 +1,21 @@ + + + logo- user + + + + + Cloud + + + + diff --git a/src/components/Layout/GlobalHeader/AvatarDropdown.jsx b/src/components/Layout/GlobalHeader/AvatarDropdown.jsx index 3a501cfe..41bf750b 100644 --- a/src/components/Layout/GlobalHeader/AvatarDropdown.jsx +++ b/src/components/Layout/GlobalHeader/AvatarDropdown.jsx @@ -145,12 +145,12 @@ export class AvatarDropdown extends React.Component { - + {this.renderLanguageMenuItem()} { const homeUrl = getRoutePath('overview'); + const logoSrc = + GLOBAL_VARIABLES.skylineThemeName === 'default' + ? cloudLogo + : cloudLogoWhite; return (
- logo + logo
); diff --git a/src/components/Layout/GlobalHeader/index.less b/src/components/Layout/GlobalHeader/index.less index f14d660f..ec26222b 100644 --- a/src/components/Layout/GlobalHeader/index.less +++ b/src/components/Layout/GlobalHeader/index.less @@ -1,29 +1,40 @@ @import '~styles/variables'; .menu { + color: @avatar-dropdown-text-color; + background-color: @avatar-dropdown-background-color; + :global(.anticon) { margin-right: 8px; } - :global(.ant-dropdown-menu-item) { - min-width: 245px; + :global { + .ant-dropdown-menu-item { + min-width: 245px; + color: @avatar-dropdown-text-color; + + &:hover { + color: @avatar-dropdown-hover-text-color; + background-color: @avatar-dropdown-hover-background-color; + } + } } .no-hover { overflow: hidden; &:hover { - background-color: #fff; + background-color: @avatar-dropdown-hover-background-color; } } .name-item { padding: 0 12px; + font-weight: bold; line-height: 40px; .user-label { margin-right: 8px; - font-weight: 'bold'; } span { @@ -33,6 +44,24 @@ .menu-item { line-height: 30px; + + :global { + .ant-btn { + color: @avatar-dropdown-button-color; + } + + .ant-btn-link[disabled] { + color: @avatar-dropdown-button-disabled-color; + } + } + } + + .menu-btn { + color: @avatar-dropdown-button-color; + } + + .menu-divider { + background-color: @avatar-dropdown-divider-color; } } @@ -110,15 +139,15 @@ height: 100%; padding-left: 0; overflow: hidden; - color: @title-color; - background-color: #fff; + color: @layout-text-color; + background-color: @layout-header-color; box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 9%); } .avatar { width: 30px; height: 30px; - color: #bfbfbf; + color: @avatar-color; border: none; box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 9%); } @@ -162,7 +191,11 @@ .single-link { margin-right: 5px; - color: @primary-color; + color: @layout-link-color; + + &:hover { + color: @layout-link-color; + } } .token { @@ -178,12 +211,12 @@ .logo { float: left; - width: 190px; + width: @layout-header-logo-wrapper-width; height: @header-height; line-height: @header-height; text-align: center; img { - height: 30px; + height: @layout-header-logo-image-height; } } diff --git a/src/components/Layout/GlobalNav/Left/index.jsx b/src/components/Layout/GlobalNav/Left/index.jsx index e5dd7a26..b9923794 100644 --- a/src/components/Layout/GlobalNav/Left/index.jsx +++ b/src/components/Layout/GlobalNav/Left/index.jsx @@ -48,6 +48,10 @@ export default class Left extends React.Component { render() { const { items } = this.props; - return ; + return ( + + ); } } diff --git a/src/components/Layout/GlobalNav/Left/index.less b/src/components/Layout/GlobalNav/Left/index.less index e5fe8563..21021b39 100644 --- a/src/components/Layout/GlobalNav/Left/index.less +++ b/src/components/Layout/GlobalNav/Left/index.less @@ -1,18 +1,23 @@ +@import '~styles/variables'; + +// .left {} + .item { padding: 12px 24px; cursor: pointer; &:hover { - background-color: rgba(0, 0, 0, 5%); + background-color: @products-drawer-hover-background-1; } } .item-label { display: block; width: 100%; - color: #000; + color: @products-title-color; + font-size: 13px; &:hover { - color: #000; + color: @products-title-color; } } diff --git a/src/components/Layout/GlobalNav/Right/index.jsx b/src/components/Layout/GlobalNav/Right/index.jsx index 1be888e2..893ed59d 100644 --- a/src/components/Layout/GlobalNav/Right/index.jsx +++ b/src/components/Layout/GlobalNav/Right/index.jsx @@ -15,13 +15,12 @@ import React from 'react'; import { Link } from 'react-router-dom'; import { Input } from 'antd'; +import { SearchOutlined } from '@ant-design/icons'; import PropTypes from 'prop-types'; import { navItemPropType } from '../common'; import styles from './index.less'; -const { Search } = Input; - export default class Right extends React.Component { static propTypes = { items: PropTypes.oneOfType([ @@ -113,11 +112,11 @@ export default class Right extends React.Component { renderSearch() { return (
- } placeholder={t('Search')} allowClear onChange={this.onInputChange} - onSearch={this.onSearch} />
); diff --git a/src/components/Layout/GlobalNav/Right/index.less b/src/components/Layout/GlobalNav/Right/index.less index a4dd302b..581a3ad3 100644 --- a/src/components/Layout/GlobalNav/Right/index.less +++ b/src/components/Layout/GlobalNav/Right/index.less @@ -1,3 +1,5 @@ +@import '~styles/variables'; + .right { columns: 200px 3; column-gap: 12px; @@ -13,7 +15,7 @@ box-sizing: border-box; height: 32px; margin-bottom: 4px; - color: #000; + color: @products-title-color; font-weight: 600; font-size: 14px; line-height: 22px; @@ -33,17 +35,53 @@ } &:hover { - background-color: rgba(0, 0, 0, 5%); + color: @products-drawer-sub-title-hover-color; + background-color: @products-drawer-sub-title-hover-background; + + .link-name { + color: @products-drawer-sub-title-hover-color; + } } .link-name { - color: #000; + color: @products-sub-title-color; } } .search { - width: 90%; + width: 60%; margin-top: -8px; margin-bottom: 16px; margin-left: 0; + + :global { + .ant-input-affix-wrapper { + background-color: @products-drawer-search-background; + border: @products-drawer-search-border; + border-color: @products-drawer-search-border-color; + box-shadow: none; + } + + .anticon-search { + color: @products-drawer-search-icon !important; + } + + .ant-input { + color: @products-drawer-search-input-color; + background-color: @products-drawer-search-background; + + &:hover { + border: @products-drawer-search-hover-border-color; + } + } + + .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover { + border-color: @products-drawer-search-hover-border-color; + } + + .ant-input-clear-icon, + .ant-input-clear-icon:active { + color: @products-drawer-search-input-color; + } + } } diff --git a/src/components/Layout/GlobalNav/index.jsx b/src/components/Layout/GlobalNav/index.jsx index f5eacdc8..2df0386d 100644 --- a/src/components/Layout/GlobalNav/index.jsx +++ b/src/components/Layout/GlobalNav/index.jsx @@ -64,6 +64,10 @@ export class GlobalNav extends React.Component { height: `calc(100% - ${globalCSS.headerHeight})`, }; + const productsColumnWidth = Number( + globalCSS.productsColumnWidth.replace('px', '') + ); + return ( <>
@@ -75,30 +79,32 @@ export class GlobalNav extends React.Component {
} > diff --git a/src/components/Layout/GlobalNav/index.less b/src/components/Layout/GlobalNav/index.less index 438d8241..2723b406 100644 --- a/src/components/Layout/GlobalNav/index.less +++ b/src/components/Layout/GlobalNav/index.less @@ -9,8 +9,12 @@ font-size: 16px; line-height: @header-height; text-align: center; - background-color: @primary-color; + background-color: @products-icon-background; cursor: pointer; + + &:hover { + background-color: @products-icon-hover-background; + } } .global-nav-icon-icon { @@ -20,3 +24,33 @@ .main { padding: 32px 32px 0; } + +.drawer-left { + :global { + .ant-drawer-header { + background-color: @products-drawer-background-1; + + .ant-drawer-title { + color: @products-header-title-color; + } + + border-bottom-color: @products-drawer-divider-color-1; + } + + .ant-drawer-body { + background-color: @products-drawer-background-2; + } + } +} + +.drawer-right { + :global { + .ant-drawer-body { + background-color: @products-drawer-background-1; + } + + .ant-drawer-close { + color: @products-drawer-close-icon; + } + } +} diff --git a/src/components/MagicInput/index.jsx b/src/components/MagicInput/index.jsx index 90803c47..b4964222 100644 --- a/src/components/MagicInput/index.jsx +++ b/src/components/MagicInput/index.jsx @@ -565,7 +565,8 @@ class MagicInput extends PureComponent { className={classnames( 'magic-input-wrapper', styles['magic-input-wrapper'], - isFocus ? styles['magic-input-wrapper-active'] : '' + isFocus ? styles['magic-input-wrapper-active'] : '', + isFocus ? 'magic-input-wrapper-active' : '' )} > {this.renderTags()} diff --git a/src/components/MagicInput/index.less b/src/components/MagicInput/index.less index f1e5e0d4..686f604b 100644 --- a/src/components/MagicInput/index.less +++ b/src/components/MagicInput/index.less @@ -11,8 +11,8 @@ width: 100%; min-width: 200px; padding: 3px 0 3px 8px; - background-color: #fff; - border: 1px solid rgb(217, 217, 217); + background-color: @table-header-search-input-background; + border: 1px solid @table-header-search-input-border-color; border-radius: @border-radius; :global { @@ -22,7 +22,7 @@ margin-bottom: 1px; padding: 0 4px; color: #fff; - font-size: 10px; + font-size: @table-header-search-input-font-size; line-height: 24px; background-color: @primary-color; border: none; @@ -69,7 +69,7 @@ } input::placeholder { - font-size: 10px; + font-size: @table-header-search-input-font-size; } .ant-menu-vertical > .ant-menu-item { @@ -80,7 +80,7 @@ .ant-menu-vertical .ant-menu-item { margin-top: 0; margin-bottom: 0; - font-size: 10px; + font-size: @table-header-search-input-font-size; } } } @@ -101,7 +101,7 @@ } .key { - font-size: 10px; + font-size: @table-header-search-input-font-size; line-height: 24px; :global { @@ -156,6 +156,7 @@ .close-btn { height: 28px !important; padding: 0; + background-color: @table-header-default-button-background; border: none; } } diff --git a/src/components/Tables/Base/index.less b/src/components/Tables/Base/index.less index b2e7594d..d6b69b35 100644 --- a/src/components/Tables/Base/index.less +++ b/src/components/Tables/Base/index.less @@ -81,6 +81,35 @@ .ant-btn[disabled] { box-shadow: 0 2px 0 rgba(0, 0, 0, 4.5%); } + + .ant-btn-default { + color: @table-header-default-button-color; + background-color: @table-header-default-button-background; + border-color: @table-header-default-button-border; + } + + .ant-btn-default:hover { + color: @primary-color; + border-color: @primary-color; + } + + .ant-btn-dangerous { + color: @table-header-danger-button-color; + } + + .ant-btn-dangerous:hover { + color: @error-color; + border-color: @error-color; + } + + .ant-btn[disabled], + .ant-btn[disabled]:hover, + .ant-btn[disabled]:focus, + .ant-btn[disabled]:active { + color: @table-header-disable-button-color !important; + background: @table-header-disable-button-background !important; + border-color: @table-header-disable-button-border !important; + } } } diff --git a/src/components/Tables/SimpleTable/index.jsx b/src/components/Tables/SimpleTable/index.jsx index 36fd6be9..3a89c0cc 100644 --- a/src/components/Tables/SimpleTable/index.jsx +++ b/src/components/Tables/SimpleTable/index.jsx @@ -283,7 +283,11 @@ export default class SimpleTable extends React.Component { const dataSource = this.getDataSource(); return ( 1) { return null; } - if (!item.children || item.children.length === 0 || item.level) { + const { showChildren = true } = item; + if ( + !showChildren || + !item.children || + item.children.length === 0 || + item.level + ) { return ( {/* */} {item.icon} - + {item.name.length >= this.maxTitleLength ? ( {item.name} @@ -224,7 +236,7 @@ export class LayoutMenu extends Component { const newSelectedKeys = this.getSelectedKeysForMenu(selectedKeys); return ( .ant-menu-submenu-title + > .ant-menu-submenu-arrow { + color: @sider-menu-item-selected-text-color !important; + } + + .ant-menu-submenu-title:active { + background-color: @sider-menu-item-selected-background; } } } @@ -135,8 +163,8 @@ :global { .ant-menu-sub.ant-menu-inline { - padding-right: 5px; - padding-left: 5px; + padding-right: @sider-sub-menu-item-padding-left; + padding-left: @sider-sub-menu-item-padding-left; } .ant-menu-item > span::before { @@ -146,17 +174,38 @@ left: 30px; width: 5px; height: 5px; - background-color: rgba(255, 255, 255, 65%); + background-color: @sider-sub-menu-item-dot-color; border-radius: 50%; content: ''; } - .ant-menu-item-selected > span::before { - background-color: #fff !important; + .ant-menu-item { + margin-top: @sider-sub-menu-item-margin-top !important; + margin-bottom: @sider-sub-menu-item-margin-bottom !important; + } + + .ant-menu-item-selected { + background-color: @sider-sub-menu-item-selected-background !important; + } + + .ant-menu-item-selected:hover { + background-color: @sider-sub-menu-item-selected-background !important; } .ant-menu-item-active > span::before { - background-color: @primary-color; + background-color: @sider-menu-item-hover-dot-color !important; + } + + .ant-menu-item-active { + background-color: @sider-sub-menu-item-hover-background !important; + } + + .ant-menu-item-selected > span::before { + background-color: @sider-menu-item-selected-dot-color !important; + } + + .ant-menu-item-selected::after { + border-right: @sider-menu-item-selected-after-border-right !important; } .ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal) @@ -173,6 +222,7 @@ background-color: #fff; .breadcrumb-item { + font-size: @breadcrumb-item-font-size; line-height: @breadcrumb-height; } @@ -225,7 +275,7 @@ bottom: 0; left: 0; z-index: -1; - background: rgba(0, 0, 0, 35%); + background: @sider-trigger-background-color; border-right: none; border-radius: 0 4px 4px 0; transform: scaleX(2.2) perspective(50px) rotateY(50deg); @@ -251,10 +301,12 @@ bottom: 0; left: 0; z-index: 1; - width: 230px; - padding-top: 10px; + width: @sider-width; + padding-top: @sider-menu-padding-top; background-color: @sider-background; + border-right: @sider-border-right; transition: all 0.2s; + // border-right: 1px solid #e5e6eb; } .base-layout-sider-collapsed { @@ -276,7 +328,7 @@ position: absolute; top: @header-height; right: 0; - left: 230px; + left: @sider-width; height: calc(100vh - @header-height); } @@ -285,12 +337,12 @@ } .base-layout-sider-hover { - width: 230px; + width: @sider-width; transition: all 0.2s; .menu-collapsed { - padding-right: 14px; - padding-left: 14px; + padding-right: @sider-menu-padding; + padding-left: @sider-menu-padding; .menu-item-collapsed { padding-left: 48px !important; @@ -324,7 +376,7 @@ } .menu-item-title { - font-size: @size-normal; + font-size: @sider-menu-title-font-size; span { display: inline-block; @@ -334,3 +386,8 @@ text-overflow: ellipsis; } } + +.sub-menu-item-title { + color: @sider-sub-menu-title-color; + font-size: @sider-sub-menu-title-font-size; +} diff --git a/src/pages/base/containers/AdminOverview/style.less b/src/pages/base/containers/AdminOverview/style.less index 960c39e6..411e0823 100644 --- a/src/pages/base/containers/AdminOverview/style.less +++ b/src/pages/base/containers/AdminOverview/style.less @@ -1,8 +1,9 @@ @import '~antd/lib/style/themes/default.less'; +@import '~styles/variables'; .container { height: 100%; - padding: 44px; + padding: @overview-padding; overflow: auto; :global { diff --git a/src/pages/base/containers/Overview/style.less b/src/pages/base/containers/Overview/style.less index 87e81bee..ff084f7a 100644 --- a/src/pages/base/containers/Overview/style.less +++ b/src/pages/base/containers/Overview/style.less @@ -3,7 +3,7 @@ .container { height: 100%; - padding: 44px; + padding: @overview-padding; overflow: auto; .main-icon { diff --git a/src/styles/base.less b/src/styles/base.less index 730b0109..88568360 100644 --- a/src/styles/base.less +++ b/src/styles/base.less @@ -163,7 +163,8 @@ } } - .sl-table { + .sl-table, + .sl-simple-table { .ant-table-thead > tr > th { background: rgba(0, 104, 255, 2%); } @@ -172,12 +173,9 @@ background: rgba(0, 104, 255, 10%); } + .ant-table-tbody > tr.ant-table-row-selected > td, .ant-table-tbody > tr.ant-table-row:hover > td { - background: #f2f7ff; - } - - .ant-table-tbody > tr.ant-table-row-selected > td { - background: #f2f7ff; + background-color: @table-row-selected-background; } td.ant-table-column-sort { @@ -195,6 +193,11 @@ .ant-table-thead > tr > th.ant-table-selection-column:first-child { padding-left: 8px; } + + .ant-checkbox-inner { + width: @table-checkbox-size; + height: @table-checkbox-size; + } } .tip { @@ -218,4 +221,14 @@ .inline-block { display: inline-block; } + + .sl-form { + .magic-input-wrapper { + border-color: @form-item-magic-input-wrapper-border-color; + } + + .magic-input-wrapper-active { + border-color: @primary-color; + } + } } diff --git a/src/styles/variables-custom.less b/src/styles/variables-custom.less new file mode 100644 index 00000000..301029a2 --- /dev/null +++ b/src/styles/variables-custom.less @@ -0,0 +1,386 @@ +/* init */ +@blue-1: #0c63fa; +@blue-2: rgba(0, 104, 255, 65%); +@blue-3: rgba(89, 157, 255, 35%); +@blue-4: #005ade; +@blue-5: rgba(25, 128, 255, 10%); +@blue-6: #e8f2ff; +@primary-color: @blue-1; +@info-color: @blue-2; +@hover-color: @blue-4; +@heading-color: rgba(0, 0, 0, 65%); + +@green-1: #57e39b; +@green-2: rgba(87, 227, 155, 65%); +@green-3: rgba(87, 227, 155, 35%); +@success-color: @green-1; + +@yellow-1: #fedf40; +@yellow-2: rgba(254, 223, 64, 65%); +@yellow-3: rgba(254, 223, 64, 35%); +@warn-color: @yellow-1; + +@warn-light-color: #f6b23d; +@warn-dark-color: #fa8c16; + +@red-1: #eb354d; +@red-2: rgba(235, 53, 77, 65%); +@red-3: rgba(235, 53, 77, 35%); +@error-color: @red-1; +@danger-color: #c4233e; +@danger-color-hover: #f76070; +@red: @red-color03; + +@gray-1: #d2d2d2; +@gray-2: #f2f2f2; +@gray-3: #fafafa; +@gray-4: #f0f1f7; +@gray-5: #f2f3f8; + +@dark-text-title: rgba(0, 0, 0, 100%); +@dark-text-title-second: rgba(0, 0, 0, 85%); +@color-text-body: rgba(0, 0, 0, 65%); +@color-text-caption: rgba(0, 0, 0, 45%); +@color-text-disable: rgba(0, 0, 0, 25%); +@color-text-default: rgb(29, 33, 41); +@color-text-title: rgba(0, 0, 0, 85%); + +@size-header-1: 38px; +@size-header-2: 30px; +@size-header-3: 24px; +@size-header-4: 16px; +@size-display: 20px; +@size-body: 14px; +@size-caption: 12px; + +@dark-color01: #79879c; +@dark-color02: #6b7b95; +@dark-color03: #5f708a; +@dark-color04: #4a5974; +@dark-color05: #404e68; +@dark-color06: #36435c; +@dark-color07: #124191; +@dark-color08: #181d28; +@dark-color09: rgba(0, 0, 0, 30%); +@dark-color10: rgba(0, 0, 0, 50%); +@dark-color11: #241f20; +@dark-color12: #1d2129; +@dark-color13: #272e3b; + +@light-color01: #f9fbfd; +@light-color02: #eff4f9; +@light-color03: #e3e9ef; +@light-color04: #d8dee5; +@light-color05: #d1d7df; +@light-color06: #ccd3db; +@light-color07: #c1c9d1; +@light-color08: #abb4be; + +@green-color01: #c4e6d4; +@green-color02: #a2d8bb; +@green-color03: #1890ff; +@green-color04: #479e88; +@green-color05: #3b747a; + +@blue-color01: #c7deef; +@blue-color02: #7eb8dc; +@blue-color03: #329dce; +@blue-color04: #3385b0; +@blue-color05: #326e93; + +@red-color01: #fae7e5; +@red-color02: #ea8573; +@red-color03: #ca2621; +@red-color04: #ab2f29; +@red-color05: #8c3231; + +@yellow-color01: #ffe1be; +@yellow-color02: #ffc781; +@yellow-color03: #f5a623; +@yellow-color04: #e0992c; +@yellow-color05: #8d663e; +@yellow-color06: #faad14; +@yellow-color07: #fff3dc; + +@white: #fff; +@black: #000; +@blue-color: #124191; + +/* specific color */ +@dark: @dark-color07; +@dark-grey: @dark-color03; +@grey: @dark-color01; +@lightest: @light-color01; +@light: @light-color02; +@green: @green-color03; +@blue: @blue-color03; +@yellow: @yellow-color03; +@yellow-dark: @yellow-color04; +@red: @red-color03; +@red-dark: @red-color04; + +@primary: @green-color03; +@sub: @blue-color03; +@warning: @yellow-color03; +@danger: @red-color03; + +@title-color: @dark-text-title; +@second-title-color: @dark-color03; +@text-color: @primary-color; +@second-text-color: @dark-color01; +@third-text-color: @dark-color04; +@placeholder-color: @dark-color03; +@input-color: @dark-color07; +@input-bg: #f2f3f8; +@head-color: @dark-color07; + +@title-color: @dark-text-title; +@second-title-color: @dark-color03; +@text-color: @primary-color; +@second-text-color: @dark-color01; +@third-text-color: @dark-color04; +@placeholder-color: @dark-color03; +@input-color: @dark-color07; +@input-bg: #f2f3f8; +@head-color: @dark-color07; + +@background-color: #f0f2f5; +@icon-color: @dark-color07; +@text-color-secondary: rgba(134, 144, 156); + +/* border */ +@border-color: @light-color06; +@border-hover-color: @dark-color01; +@second-border-color: @light-color02; +@border-focus-color: @green-color03; +@border-radius: 2px; +@border-color-base: rgba(0, 0, 0, 15%); + +/* input */ +@input-border-color: @light-color08; +@input-hover-color: @dark-color01; +@input-focus-color: @green-color03; +@input-error-color: @red-color03; +@input-border-radius: @border-radius; + +/* background */ +@bg-color: @light-color02; +@body-bg-color: @light-color02; +@th-bg-color: @light-color01; +@card-bg-color: @white; +@dashboard-bg-color: @gray-5; + +/* button */ +@btn-default-bg: @light-color02; +@btn-default-border: @light-color06; +@btn-default-hover-bg: @light-color03; +@btn-default-hover-border: @light-color07; +@btn-default-active-bg: @light-color08; +@btn-default-active-border: @light-color07; +@btn-primary-bg: @dark-color07; +@btn-primary-hover-bg: @dark-color07; +@btn-control-bg: @dark-color07; +@btn-control-hover-bg: @dark-color07; +@btn-danger-bg: @red-color03; +@btn-danger-active-bg: @red-color04; +@btn-flat-hover-bg: @light-color03; +@btn-flat-active-bg: @light-color04; +@text-hover: @dark-color07; + +@table-expanded-row-bg: #fdfeff; +@table-row-hover-bg: #f5f8f9; +@select-option-hover-bg: #f5f7f8; + +/* shadow */ +@base-shadow: 0 4px 8px 0 rgba(36, 46, 66, 6%); +@title-shadow: 0 2px 4px rgba(72, 91, 127, 40%); +@head-shadow: 0 4px 8px rgba(36, 46, 66, 10%); + +@btn-text-shadow: 0 2px 4px rgba(36, 46, 66, 10%); +@btn-default-shadow: none; +@btn-default-active-shadow: inset 0 4px 8px 0 rgba(36, 46, 66, 12%); +@btn-primary-shadow: none; +@btn-primary-active-shadow: inset 0 4px 8px 0 rgba(35, 45, 65, 24%); +@btn-control-shadow: 0 8px 16px 0 rgba(35, 45, 65, 28%); +@btn-danger-shadow: 0 8px 16px 0 rgba(202, 38, 33, 28%); + +@card-shadow: 0 4px 8px 0 rgba(36, 46, 66, 6%); +@card-hover-shadow: 0 6px 16px 0 rgba(33, 43, 54, 20%); +@card-selector-shadow: 0 8px 16px 0 rgba(36, 46, 66, 8%); + +@tr-shadow: inset 0 2px 4px 0 rgba(72, 91, 127, 20%); +@box-shadow-base: 0 0 8px 0 rgba(0, 0, 0, 15%); + +/* font */ +@font-family: system-ui, -apple-system, blinkmacsystemfont, segoe ui, roboto, + 'PingFang SC', 'Microsoft YaHei', 'Alibaba PuHuiTi', 'Dosis', 'Helvetica Neue', + helvetica, arial, sans-serif; +@font-family-id: @font-family; +@font-family-code: 'PT Mono', monaco, menlo, consolas, 'Courier New', monospace; +@size-small: 12px; +@size-normal: 14px; +@size-medium: 16px; +@size-mid-large: 24px; +@size-large: 28px; +@body-size: @size-small; + +@font-bold: 600; +@font-normal: 400; +@font-thin: 300; + +/* animation */ +@trans-speed: 0.3s; + +/* size */ +@nav-width: 260px; +@narrow-nav-width: 240px; +@header-height: 50px; +@body-padding-left: 16px; +@body-padding-right: 16px; +@body-padding: 16px; +@breadcrumb-height: 50px; +@footer-height: 75px; +@menu-width: @sider-width; + +@icon-status-info: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNLTMtM2gyNHYyNEgtM3oiLz48cGF0aCBmaWxsPSIjMjE5MUNBIiBkPSJNOSAxOEE5IDkgMCAxIDEgOSAwYTkgOSAwIDAgMSAwIDE4ek05IDUuNjgxYTEuMzEyIDEuMzEyIDAgMSAwIDAtMi42MjMgMS4zMTIgMS4zMTIgMCAwIDAgMCAyLjYyM3pNOCA3LjUxNlYxNWgyVjcuNTE2SDh6Ii8+PC9nPjwvc3ZnPg=='); +@icon-status-success: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNLTMtM2gyNHYyNEgtM3oiLz48cGF0aCBmaWxsPSIjMDBBQTcyIiBkPSJNOSAxOEE5IDkgMCAxIDEgOSAwYTkgOSAwIDAgMSAwIDE4em0tMi4xMTUtNi45NEw0LjQ5NCA4LjY3bC0xLjQxNSAxLjQxNCAzLjgwNiAzLjgwNiA3LjU0OC03LjU0OC0xLjQxNC0xLjQxNC02LjEzNCA2LjEzNHoiLz48L2c+PC9zdmc+'); +@icon-status-warning: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIxOCI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNLTItM2gyNHYyNEgtMnoiLz48cGF0aCBmaWxsPSIjRjVDNDE0IiBkPSJNMTAgMGwxMCAxNy4zMkgwTDEwIDB6bTAgMTYuMDAxYTEgMSAwIDEgMCAwLTIgMSAxIDAgMCAwIDAgMnpNOSA2bC4yIDdoMS42bC4yLTdIOXoiLz48L2c+PC9zdmc+'); +@icon-status-error: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNLTMtM2gyNHYyNEgtM3oiLz48cGF0aCBmaWxsPSIjQ0EyNjIxIiBkPSJNMTIuNzI4IDBMMTggNS4yNzJ2Ny40NTZMMTIuNzI4IDE4SDUuMjcyTDAgMTIuNzI4VjUuMjcyTDUuMjcyIDBoNy40NTZ6bS0yLjMxNCA5bDMuNDY2LTMuNDY2LTEuNDE0LTEuNDE0TDkgNy41ODYgNS41MzYgNC4xMjIgNC4xMjIgNS41MzYgNy41ODYgOSA0LjEyIDEyLjQ2NmwxLjQxNCAxLjQxNEw5IDEwLjQxNGwzLjQ2NCAzLjQ2NCAxLjQxNC0xLjQxNEwxMC40MTQgOXoiLz48cGF0aCBmaWxsPSIjRkZGIiBkPSJNMTAuNDE0IDlsMy40NjQgMy40NjQtMS40MTQgMS40MTRMOSAxMC40MTQgNS41MzQgMTMuODggNC4xMiAxMi40NjYgNy41ODYgOSA0LjEyMiA1LjUzNmwxLjQxNC0xLjQxNEw5IDcuNTg2bDMuNDY2LTMuNDY2IDEuNDE0IDEuNDE0eiIvPjwvZz48L3N2Zz4='); + +/* sider */ +@sider-background: #fff; +@sider-open-background: #222121; +@sider-collapsed-width: 50px; +@sider-menu-padding: 0; +@sider-menu-padding-top: 0; +@sider-border-right: 1px solid #e5e6eb; +@sider-width: 192px; +@sider-menu-item-selected-background: #f6f7fb; +@sider-sub-menu-item-margin-top: 0; +@sider-sub-menu-item-margin-bottom: 0; +@sider-sub-menu-item-selected-background: #f6f7fb; +@sider-sub-menu-item-hover-background: #f6f7fb; +@sider-menu-item-selected-border-radius: 0; +@sider-menu-item-selected-text-color: #1d2129; +@sider-menu-item-hover-dot-color: #c9cdd4; +@sider-menu-item-selected-dot-color: @primary-color; +@sider-menu-item-selected-after-border-right: 0; +@sider-sub-menu-background: #fff; +@sider-sub-menu-item-padding-left: 0; +@sider-sub-menu-item-dot-color: #c9cdd4; +@sider-trigger-background-color: rgba(0, 0, 0, 15%); +@sider-menu-title-font-size: 14px; +@sider-sub-menu-title-font-size: 13px; +@sider-sub-menu-title-color: #4e5969; + +@box-shadow01: 0 2px 10px 0 rgba(1, 32, 87, 50%); + +//layout +@layout-header-color: @dark-color12; +@layout-text-color: @white; +@layout-link-color: @white; +@layout-header-menu-background-color: @layout-header-color; +@layout-header-menu-text-color: @white; +@layout-header-menu-text-hover-color: @white; +@layout-header-menu-search-background: #282e39; +@layout-header-menu-search-text-color: @white; +@layout-header-menu-search-icon: #86909c; +@layout-header-menu-region-hover: #e8f2ff; +@layout-header-color-hover: @dark-color09; +@layout-selected-color: #111418; +@layout-header-logo-wrapper-width: 141px; +@layout-header-logo-image-height: 20px; + +.layout-header-menu-search-border { + border: none; +} + +//products +@products-icon-background: #272e3b; +@products-icon-hover-background: @primary-color; +@products-header-title-color: #fff; +@products-title-color: #c9cdd4; +@products-sub-title-color: #86909c; +@products-icon-fill-color: #c9cdd4; +@products-drawer-background-1: #101319; +@products-drawer-hover-background-1: #101319; +@products-drawer-divider-color-1: #101319; +@products-drawer-sub-title-hover-background: hsla(0deg, 0%, 100%, 10%); +@products-drawer-sub-title-hover-color: #fff; +@products-drawer-background-2: #1b1e24; +@products-drawer-header-title: #fff; +@products-drawer-left-icon: #0053ec; +@products-drawer-close-icon: #fff; +@products-drawer-search-icon: #838383; +@products-drawer-search-box-shadow: 0 0 0 2px rgba(12, 99, 250, 20%); +@products-drawer-search-placeholder-color: #86909c; +@products-drawer-search-border-color: #e9e9e9; +@products-drawer-search-border: none; +@products-drawer-search-hover-border-color: #e9e9e9; +@products-drawer-search-background: #1d2129; +@products-drawer-search-input-color: @white; +@products-column-width: @sider-width; + +// breadcrumb +@breadcrumb-item-font-size: 14px; + +// overview padding +@overview-padding: 16px; + +// table +// @table-header-default-button-background: @background-color; +// @table-header-search-input-background: @background-color; +// @table-header-search-input-border-color: @primary-color; +@table-header-default-button-background: #fff; +@table-header-default-button-border: #fff; +@table-header-default-button-color: #1d2129; +@table-header-search-input-background: #fff; +@table-header-search-input-border-color: #fff; +@table-header-search-input-font-size: 12px; +@table-header-danger-button-color: @error-color; +@table-header-disable-button-color: #c9cdd4; +@table-header-disable-button-border: #fff; +@table-header-disable-button-background: #fff; +@table-row-selected-background: #f1f2f6; +@table-checkbox-size: 12px; + +//form +@form-item-label-color: @dark-color13; +@form-item-magic-input-wrapper-border-color: #d9d9d9; + +//avatar-dropdown +@avatar-color: #1d2129; +@avatar-dropdown-background-color: @dark-color12; +@avatar-dropdown-text-color: @white; +@avatar-dropdown-button-color: @white; +@avatar-dropdown-property-text-color: #86909c; +@avatar-dropdown-copy-icon-color: @white; +@avatar-dropdown-hover-background-color: @dark-color09; +@avatar-dropdown-hover-text-color: @white; +@avatar-dropdown-button-disabled-color: #86909c; +@avatar-dropdown-divider-color: rgba(134, 144, 156, 20%); + +.vertical-center { + position: absolute; + top: 50%; + transform: translateY(-50%); +} + +/* login */ +@login-error: #a43a39; + +@money-color: #f50; + +:export { + primaryColor: @primary-color; + successColor: @success-color; + warnColor: @warn-color; + warnDarkColor: @warn-dark-color; + warnLightColor: @warn-light-color; + errorColor: @error-color; + dangerColor: @danger-color; + moneyColor: @money-color; + infoColor: @info-color; + headerHeight: @header-height; + productsColumnWidth: @products-column-width; +} diff --git a/src/styles/variables.less b/src/styles/variables.less index 1ea4969b..79fd2f9e 100644 --- a/src/styles/variables.less +++ b/src/styles/variables.less @@ -31,6 +31,8 @@ @gray-2: #f2f2f2; @gray-3: #fafafa; +@dark-text-title: rgba(0, 0, 0, 100%); +@dark-text-title-second: rgba(0, 0, 0, 85%); @color-text-title: rgba(0, 0, 0, 85%); @color-text-body: rgba(0, 0, 0, 65%); @color-text-caption: rgba(0, 0, 0, 45%); @@ -129,12 +131,112 @@ @sider-background: #26262b; @sider-open-background: #222121; @sider-collapsed-width: 40px; +@sider-menu-padding: 14px; +@sider-menu-padding-top: 10px; +@sider-border-right: none; +@sider-width: 230px; +// @sider-menu-item-selected-background: #26262b; +@sider-menu-item-selected-background: @primary-color; +@sider-sub-menu-item-margin-top: 4px; +@sider-sub-menu-item-margin-bottom: 8px; +@sider-sub-menu-item-selected-background: @primary-color; +@sider-sub-menu-item-hover-background: transparent; +@sider-menu-item-selected-border-radius: @border-radius; +@sider-menu-item-selected-text-color: #fff; +@sider-menu-item-selected-after-border-right: 3px solid #0c63fa; +@sider-menu-item-hover-dot-color: @primary-color; +@sider-menu-item-selected-dot-color: #fff; +@sider-sub-menu-background: #222121; +@sider-sub-menu-item-padding-left: 5px; +@sider-sub-menu-item-dot-color: rgba(255, 255, 255, 65%); +@sider-trigger-background-color: rgba(0, 0, 0, 35%); +@sider-menu-title-font-size: 14px; +@sider-sub-menu-title-font-size: 14px; +@sider-sub-menu-title-color: rgba(255, 255, 255, 65%); /* login */ @login-error: #a43a39; @money-color: #f50; +//layout +@layout-header-color: @white; +@layout-text-color: @title-color; +@layout-link-color: @primary-color; +@layout-header-menu-background-color: @layout-header-color; +@layout-header-menu-text-color: @white; +@layout-header-menu-text-hover-color: @white; +@layout-header-menu-search-background: #282e39; +@layout-header-menu-search-text-color: @white; +@layout-header-menu-search-icon: #86909c; +@layout-header-menu-region-hover: #e8f2ff; +@layout-header-color-hover: @primary-color; +@layout-selected-color: #111418; +@layout-header-logo-wrapper-width: 190px; +@layout-header-logo-image-height: 30px; + +//form +@form-item-label-color: rgba(0, 0, 0, 85%); +@form-item-magic-input-wrapper-border-color: #d9d9d9; + +//avatar-dropdown +@avatar-color: #bfbfbf; +@avatar-dropdown-background-color: #fff; +@avatar-dropdown-text-color: @color-text-title; +@avatar-dropdown-button-color: @primary-color; +@avatar-dropdown-property-text-color: #86909c; +@avatar-dropdown-copy-icon-color: @white; +@avatar-dropdown-hover-background-color: #fff; +@avatar-dropdown-hover-text-color: @color-text-title; +@avatar-dropdown-button-disabled-color: @color-text-title; +@avatar-dropdown-divider-color: #fff; + +//products +@products-icon-background: @primary-color; +@products-icon-hover-background: @primary-color; +@products-header-title-color: @color-text-title; +@products-title-color: #000; +@products-sub-title-color: #000; +@products-icon-fill-color: #c9cdd4; +@products-drawer-background-1: #fff; +@products-drawer-divider-color-1: #f0f0f0; +@products-drawer-hover-background-1: rgba(0, 0, 0, 5%); +@products-drawer-sub-title-hover-background: rgba(0, 0, 0, 5%); +@products-drawer-sub-title-hover-color: #000; +@products-drawer-background-2: #fff; +@products-drawer-header-title: #fff; +@products-drawer-left-icon: #0053ec; +@products-drawer-close-icon: rgba(0, 0, 0, 45%); +@products-drawer-search-icon: rgba(0, 0, 0, 45%); +@products-drawer-search-box-shadow: 0 0 0 2px rgba(12, 99, 250, 20%); +@products-drawer-search-placeholder-color: #86909c; +@products-drawer-search-border-color: #d9d9d9; +@products-drawer-search-border: 1px solid #d9d9d9; +@products-drawer-search-hover-border-color: @primary-color; +@products-drawer-search-background: #fff; +@products-drawer-search-input-color: rgba(0, 0, 0, 85%); +@products-column-width: @sider-width; + +// breadcrumb +@breadcrumb-item-font-size: 12px; + +// overview padding +@overview-padding: 44px; + +// table +@table-header-default-button-background: #fff; +@table-header-default-button-border: @primary-color; +@table-header-default-button-color: @primary-color; +@table-header-search-input-background: #fff; +@table-header-search-input-border-color: #d9d9d9; +@table-header-search-input-font-size: 10px; +@table-header-danger-button-color: @error-color; +@table-header-disable-button-color: rgba(0, 0, 0, 25%); +@table-header-disable-button-border: #d9d9d9; +@table-header-disable-button-background: #f5f5f5; +@table-row-selected-background: #f2f7ff; +@table-checkbox-size: 14px; + :export { primaryColor: @primary-color; successColor: @success-color; @@ -146,4 +248,5 @@ moneyColor: @money-color; infoColor: @info-color; headerHeight: @header-height; + productsColumnWidth: @products-column-width; }