diff --git a/webapp/packages/supersonic-fe/config/config.ts b/webapp/packages/supersonic-fe/config/config.ts index f00cc80c2..fa65717b8 100644 --- a/webapp/packages/supersonic-fe/config/config.ts +++ b/webapp/packages/supersonic-fe/config/config.ts @@ -61,6 +61,9 @@ export default defineConfig({ theme: { ...themeSettings, }, + alias: { + 'antd/es/style': '@/assets/style', + }, esbuild: {}, title: false, ignoreMomentLocale: true, diff --git a/webapp/packages/supersonic-fe/config/defaultSettings.ts b/webapp/packages/supersonic-fe/config/defaultSettings.ts index af5adf464..e3312defc 100644 --- a/webapp/packages/supersonic-fe/config/defaultSettings.ts +++ b/webapp/packages/supersonic-fe/config/defaultSettings.ts @@ -4,8 +4,8 @@ const Settings: LayoutSettings & { pwa?: boolean; logo?: string; } = { - navTheme: 'dark', - primaryColor: '#296DF3', + navTheme: 'light', + colorPrimary: '#296DF3', layout: 'top', contentWidth: 'Fluid', fixedHeader: false, diff --git a/webapp/packages/supersonic-fe/package.json b/webapp/packages/supersonic-fe/package.json index 7c28a2010..8fb8ce07d 100644 --- a/webapp/packages/supersonic-fe/package.json +++ b/webapp/packages/supersonic-fe/package.json @@ -52,15 +52,11 @@ "not ie <= 10" ], "dependencies": { - "@ant-design/charts": "^1.3.3", - "@ant-design/cssinjs": "^1.10.1", - "@ant-design/icons": "^4.7.0", - "@ant-design/pro-card": "^1.11.13", - "@ant-design/pro-components": "^2.4.4", - "@ant-design/pro-descriptions": "^1.0.19", - "@ant-design/pro-form": "^1.23.0", - "@ant-design/pro-layout": "^6.38.22", - "@ant-design/pro-table": "^2.80.6", + "@ant-design/icons": "^5.2.6", + "@ant-design/pro-card": "^2.5.26", + "@ant-design/pro-components": "^2.6.41", + "@ant-design/pro-layout": "^7.17.15", + "@ant-design/pro-table": "^3.13.9", "@antv/dom-util": "^2.0.4", "@antv/g6": "^4.8.14", "@antv/g6-core": "^0.8.23", @@ -73,7 +69,7 @@ "@umijs/route-utils": "^1.0.33", "ace-builds": "^1.4.12", "ahooks": "^3.7.7", - "antd": "^4.24.8", + "antd": "^5.11.0", "classnames": "^2.2.6", "copy-to-clipboard": "^3.3.1", "cross-env": "^7.0.3", diff --git a/webapp/packages/supersonic-fe/src/app.tsx b/webapp/packages/supersonic-fe/src/app.tsx index 76775a606..f0f7ca930 100644 --- a/webapp/packages/supersonic-fe/src/app.tsx +++ b/webapp/packages/supersonic-fe/src/app.tsx @@ -133,7 +133,7 @@ export const layout: RunTimeLayoutConfig = (params) => { > {dom} {history.location.pathname !== '/chat' && !isMobile && ( - + )} ); diff --git a/webapp/packages/supersonic-fe/src/assets/css/variable.less b/webapp/packages/supersonic-fe/src/assets/css/variable.less index 0297bb9d2..9a2aad3e6 100644 --- a/webapp/packages/supersonic-fe/src/assets/css/variable.less +++ b/webapp/packages/supersonic-fe/src/assets/css/variable.less @@ -1,4 +1,4 @@ -@import '~antd/lib/style/themes/default'; + // main @primary: #225ace; diff --git a/webapp/packages/supersonic-fe/src/assets/style/color/bezierEasing.less b/webapp/packages/supersonic-fe/src/assets/style/color/bezierEasing.less new file mode 100644 index 000000000..f53ffb368 --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/color/bezierEasing.less @@ -0,0 +1,110 @@ +/* stylelint-disable */ +.bezierEasingMixin() { +@functions: ~`(function() { + var NEWTON_ITERATIONS = 4; + var NEWTON_MIN_SLOPE = 0.001; + var SUBDIVISION_PRECISION = 0.0000001; + var SUBDIVISION_MAX_ITERATIONS = 10; + + var kSplineTableSize = 11; + var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0); + + var float32ArraySupported = typeof Float32Array === 'function'; + + function A (aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; } + function B (aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; } + function C (aA1) { return 3.0 * aA1; } + + // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2. + function calcBezier (aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT; } + + // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2. + function getSlope (aT, aA1, aA2) { return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1); } + + function binarySubdivide (aX, aA, aB, mX1, mX2) { + var currentX, currentT, i = 0; + do { + currentT = aA + (aB - aA) / 2.0; + currentX = calcBezier(currentT, mX1, mX2) - aX; + if (currentX > 0.0) { + aB = currentT; + } else { + aA = currentT; + } + } while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS); + return currentT; + } + + function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) { + for (var i = 0; i < NEWTON_ITERATIONS; ++i) { + var currentSlope = getSlope(aGuessT, mX1, mX2); + if (currentSlope === 0.0) { + return aGuessT; + } + var currentX = calcBezier(aGuessT, mX1, mX2) - aX; + aGuessT -= currentX / currentSlope; + } + return aGuessT; + } + + var BezierEasing = function (mX1, mY1, mX2, mY2) { + if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) { + throw new Error('bezier x values must be in [0, 1] range'); + } + + // Precompute samples table + var sampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize); + if (mX1 !== mY1 || mX2 !== mY2) { + for (var i = 0; i < kSplineTableSize; ++i) { + sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2); + } + } + + function getTForX (aX) { + var intervalStart = 0.0; + var currentSample = 1; + var lastSample = kSplineTableSize - 1; + + for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) { + intervalStart += kSampleStepSize; + } + --currentSample; + + // Interpolate to provide an initial guess for t + var dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]); + var guessForT = intervalStart + dist * kSampleStepSize; + + var initialSlope = getSlope(guessForT, mX1, mX2); + if (initialSlope >= NEWTON_MIN_SLOPE) { + return newtonRaphsonIterate(aX, guessForT, mX1, mX2); + } else if (initialSlope === 0.0) { + return guessForT; + } else { + return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2); + } + } + + return function BezierEasing (x) { + if (mX1 === mY1 && mX2 === mY2) { + return x; // linear + } + // Because JavaScript number are imprecise, we should guarantee the extremes are right. + if (x === 0) { + return 0; + } + if (x === 1) { + return 1; + } + return calcBezier(getTForX(x), mY1, mY2); + }; + }; + + this.colorEasing = BezierEasing(0.26, 0.09, 0.37, 0.18); + // less 3 requires a return + return ''; +})()`; +} +// It is hacky way to make this function will be compiled preferentially by less +// resolve error: `ReferenceError: colorPalette is not defined` +// https://github.com/ant-design/ant-motion/issues/44 +.bezierEasingMixin(); diff --git a/webapp/packages/supersonic-fe/src/assets/style/color/colorPalette.less b/webapp/packages/supersonic-fe/src/assets/style/color/colorPalette.less new file mode 100644 index 000000000..e662c072a --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/color/colorPalette.less @@ -0,0 +1,85 @@ +/* stylelint-disable no-duplicate-selectors */ +@import "bezierEasing"; +@import "tinyColor"; + +// We create a very complex algorithm which take the place of original tint/shade color system +// to make sure no one can understand it 👻 +// and create an entire color palette magicly by inputing just a single primary color. +// We are using bezier-curve easing function and some color manipulations like tint/shade/darken/spin +.colorPaletteMixin() { +@functions: ~`(function() { + var hueStep = 2; + var saturationStep = 0.16; + var saturationStep2 = 0.05; + var brightnessStep1 = 0.05; + var brightnessStep2 = 0.15; + var lightColorCount = 5; + var darkColorCount = 4; + + var getHue = function(hsv, i, isLight) { + var hue; + if (hsv.h >= 60 && hsv.h <= 240) { + hue = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i; + } else { + hue = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i; + } + if (hue < 0) { + hue += 360; + } else if (hue >= 360) { + hue -= 360; + } + return Math.round(hue); + }; + var getSaturation = function(hsv, i, isLight) { + // grey color don't change saturation + if (hsv.h === 0 && hsv.s === 0) { + return hsv.s; + } + var saturation; + if (isLight) { + saturation = hsv.s - saturationStep * i; + } else if (i === darkColorCount) { + saturation = hsv.s + saturationStep; + } else { + saturation = hsv.s + saturationStep2 * i; + } + if (saturation > 1) { + saturation = 1; + } + if (isLight && i === lightColorCount && saturation > 0.1) { + saturation = 0.1; + } + if (saturation < 0.06) { + saturation = 0.06; + } + return Number(saturation.toFixed(2)); + }; + var getValue = function(hsv, i, isLight) { + var value; + if (isLight) { + value = hsv.v + brightnessStep1 * i; + }else{ + value = hsv.v - brightnessStep2 * i + } + if (value > 1) { + value = 1; + } + return Number(value.toFixed(2)) + }; + + this.colorPalette = function(color, index) { + var isLight = index <= 6; + var hsv = tinycolor(color).toHsv(); + var i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1; + return tinycolor({ + h: getHue(hsv, i, isLight), + s: getSaturation(hsv, i, isLight), + v: getValue(hsv, i, isLight), + }).toHexString(); + }; +})()`; +} +// It is hacky way to make this function will be compiled preferentially by less +// resolve error: `ReferenceError: colorPalette is not defined` +// https://github.com/ant-design/ant-motion/issues/44 +.colorPaletteMixin(); diff --git a/webapp/packages/supersonic-fe/src/assets/style/color/colors.less b/webapp/packages/supersonic-fe/src/assets/style/color/colors.less new file mode 100644 index 000000000..51540bf45 --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/color/colors.less @@ -0,0 +1,162 @@ +@import 'colorPalette'; + +// color palettes +@blue-base: #1890ff; +@blue-1: color(~`colorPalette('@{blue-6}', 1) `); +@blue-2: color(~`colorPalette('@{blue-6}', 2) `); +@blue-3: color(~`colorPalette('@{blue-6}', 3) `); +@blue-4: color(~`colorPalette('@{blue-6}', 4) `); +@blue-5: color(~`colorPalette('@{blue-6}', 5) `); +@blue-6: @blue-base; +@blue-7: color(~`colorPalette('@{blue-6}', 7) `); +@blue-8: color(~`colorPalette('@{blue-6}', 8) `); +@blue-9: color(~`colorPalette('@{blue-6}', 9) `); +@blue-10: color(~`colorPalette('@{blue-6}', 10) `); + +@purple-base: #722ed1; +@purple-1: color(~`colorPalette('@{purple-6}', 1) `); +@purple-2: color(~`colorPalette('@{purple-6}', 2) `); +@purple-3: color(~`colorPalette('@{purple-6}', 3) `); +@purple-4: color(~`colorPalette('@{purple-6}', 4) `); +@purple-5: color(~`colorPalette('@{purple-6}', 5) `); +@purple-6: @purple-base; +@purple-7: color(~`colorPalette('@{purple-6}', 7) `); +@purple-8: color(~`colorPalette('@{purple-6}', 8) `); +@purple-9: color(~`colorPalette('@{purple-6}', 9) `); +@purple-10: color(~`colorPalette('@{purple-6}', 10) `); + +@cyan-base: #13c2c2; +@cyan-1: color(~`colorPalette('@{cyan-6}', 1) `); +@cyan-2: color(~`colorPalette('@{cyan-6}', 2) `); +@cyan-3: color(~`colorPalette('@{cyan-6}', 3) `); +@cyan-4: color(~`colorPalette('@{cyan-6}', 4) `); +@cyan-5: color(~`colorPalette('@{cyan-6}', 5) `); +@cyan-6: @cyan-base; +@cyan-7: color(~`colorPalette('@{cyan-6}', 7) `); +@cyan-8: color(~`colorPalette('@{cyan-6}', 8) `); +@cyan-9: color(~`colorPalette('@{cyan-6}', 9) `); +@cyan-10: color(~`colorPalette('@{cyan-6}', 10) `); + +@green-base: #52c41a; +@green-1: color(~`colorPalette('@{green-6}', 1) `); +@green-2: color(~`colorPalette('@{green-6}', 2) `); +@green-3: color(~`colorPalette('@{green-6}', 3) `); +@green-4: color(~`colorPalette('@{green-6}', 4) `); +@green-5: color(~`colorPalette('@{green-6}', 5) `); +@green-6: @green-base; +@green-7: color(~`colorPalette('@{green-6}', 7) `); +@green-8: color(~`colorPalette('@{green-6}', 8) `); +@green-9: color(~`colorPalette('@{green-6}', 9) `); +@green-10: color(~`colorPalette('@{green-6}', 10) `); + +@magenta-base: #eb2f96; +@magenta-1: color(~`colorPalette('@{magenta-6}', 1) `); +@magenta-2: color(~`colorPalette('@{magenta-6}', 2) `); +@magenta-3: color(~`colorPalette('@{magenta-6}', 3) `); +@magenta-4: color(~`colorPalette('@{magenta-6}', 4) `); +@magenta-5: color(~`colorPalette('@{magenta-6}', 5) `); +@magenta-6: @magenta-base; +@magenta-7: color(~`colorPalette('@{magenta-6}', 7) `); +@magenta-8: color(~`colorPalette('@{magenta-6}', 8) `); +@magenta-9: color(~`colorPalette('@{magenta-6}', 9) `); +@magenta-10: color(~`colorPalette('@{magenta-6}', 10) `); + +// alias of magenta +@pink-base: #eb2f96; +@pink-1: color(~`colorPalette('@{pink-6}', 1) `); +@pink-2: color(~`colorPalette('@{pink-6}', 2) `); +@pink-3: color(~`colorPalette('@{pink-6}', 3) `); +@pink-4: color(~`colorPalette('@{pink-6}', 4) `); +@pink-5: color(~`colorPalette('@{pink-6}', 5) `); +@pink-6: @pink-base; +@pink-7: color(~`colorPalette('@{pink-6}', 7) `); +@pink-8: color(~`colorPalette('@{pink-6}', 8) `); +@pink-9: color(~`colorPalette('@{pink-6}', 9) `); +@pink-10: color(~`colorPalette('@{pink-6}', 10) `); + +@red-base: #f5222d; +@red-1: color(~`colorPalette('@{red-6}', 1) `); +@red-2: color(~`colorPalette('@{red-6}', 2) `); +@red-3: color(~`colorPalette('@{red-6}', 3) `); +@red-4: color(~`colorPalette('@{red-6}', 4) `); +@red-5: color(~`colorPalette('@{red-6}', 5) `); +@red-6: @red-base; +@red-7: color(~`colorPalette('@{red-6}', 7) `); +@red-8: color(~`colorPalette('@{red-6}', 8) `); +@red-9: color(~`colorPalette('@{red-6}', 9) `); +@red-10: color(~`colorPalette('@{red-6}', 10) `); + +@orange-base: #fa8c16; +@orange-1: color(~`colorPalette('@{orange-6}', 1) `); +@orange-2: color(~`colorPalette('@{orange-6}', 2) `); +@orange-3: color(~`colorPalette('@{orange-6}', 3) `); +@orange-4: color(~`colorPalette('@{orange-6}', 4) `); +@orange-5: color(~`colorPalette('@{orange-6}', 5) `); +@orange-6: @orange-base; +@orange-7: color(~`colorPalette('@{orange-6}', 7) `); +@orange-8: color(~`colorPalette('@{orange-6}', 8) `); +@orange-9: color(~`colorPalette('@{orange-6}', 9) `); +@orange-10: color(~`colorPalette('@{orange-6}', 10) `); + +@yellow-base: #fadb14; +@yellow-1: color(~`colorPalette('@{yellow-6}', 1) `); +@yellow-2: color(~`colorPalette('@{yellow-6}', 2) `); +@yellow-3: color(~`colorPalette('@{yellow-6}', 3) `); +@yellow-4: color(~`colorPalette('@{yellow-6}', 4) `); +@yellow-5: color(~`colorPalette('@{yellow-6}', 5) `); +@yellow-6: @yellow-base; +@yellow-7: color(~`colorPalette('@{yellow-6}', 7) `); +@yellow-8: color(~`colorPalette('@{yellow-6}', 8) `); +@yellow-9: color(~`colorPalette('@{yellow-6}', 9) `); +@yellow-10: color(~`colorPalette('@{yellow-6}', 10) `); + +@volcano-base: #fa541c; +@volcano-1: color(~`colorPalette('@{volcano-6}', 1) `); +@volcano-2: color(~`colorPalette('@{volcano-6}', 2) `); +@volcano-3: color(~`colorPalette('@{volcano-6}', 3) `); +@volcano-4: color(~`colorPalette('@{volcano-6}', 4) `); +@volcano-5: color(~`colorPalette('@{volcano-6}', 5) `); +@volcano-6: @volcano-base; +@volcano-7: color(~`colorPalette('@{volcano-6}', 7) `); +@volcano-8: color(~`colorPalette('@{volcano-6}', 8) `); +@volcano-9: color(~`colorPalette('@{volcano-6}', 9) `); +@volcano-10: color(~`colorPalette('@{volcano-6}', 10) `); + +@geekblue-base: #2f54eb; +@geekblue-1: color(~`colorPalette('@{geekblue-6}', 1) `); +@geekblue-2: color(~`colorPalette('@{geekblue-6}', 2) `); +@geekblue-3: color(~`colorPalette('@{geekblue-6}', 3) `); +@geekblue-4: color(~`colorPalette('@{geekblue-6}', 4) `); +@geekblue-5: color(~`colorPalette('@{geekblue-6}', 5) `); +@geekblue-6: @geekblue-base; +@geekblue-7: color(~`colorPalette('@{geekblue-6}', 7) `); +@geekblue-8: color(~`colorPalette('@{geekblue-6}', 8) `); +@geekblue-9: color(~`colorPalette('@{geekblue-6}', 9) `); +@geekblue-10: color(~`colorPalette('@{geekblue-6}', 10) `); + +@lime-base: #a0d911; +@lime-1: color(~`colorPalette('@{lime-6}', 1) `); +@lime-2: color(~`colorPalette('@{lime-6}', 2) `); +@lime-3: color(~`colorPalette('@{lime-6}', 3) `); +@lime-4: color(~`colorPalette('@{lime-6}', 4) `); +@lime-5: color(~`colorPalette('@{lime-6}', 5) `); +@lime-6: @lime-base; +@lime-7: color(~`colorPalette('@{lime-6}', 7) `); +@lime-8: color(~`colorPalette('@{lime-6}', 8) `); +@lime-9: color(~`colorPalette('@{lime-6}', 9) `); +@lime-10: color(~`colorPalette('@{lime-6}', 10) `); + +@gold-base: #faad14; +@gold-1: color(~`colorPalette('@{gold-6}', 1) `); +@gold-2: color(~`colorPalette('@{gold-6}', 2) `); +@gold-3: color(~`colorPalette('@{gold-6}', 3) `); +@gold-4: color(~`colorPalette('@{gold-6}', 4) `); +@gold-5: color(~`colorPalette('@{gold-6}', 5) `); +@gold-6: @gold-base; +@gold-7: color(~`colorPalette('@{gold-6}', 7) `); +@gold-8: color(~`colorPalette('@{gold-6}', 8) `); +@gold-9: color(~`colorPalette('@{gold-6}', 9) `); +@gold-10: color(~`colorPalette('@{gold-6}', 10) `); + +@preset-colors: pink, magenta, red, volcano, orange, yellow, gold, cyan, lime, green, blue, geekblue, + purple; diff --git a/webapp/packages/supersonic-fe/src/assets/style/color/tinyColor.less b/webapp/packages/supersonic-fe/src/assets/style/color/tinyColor.less new file mode 100644 index 000000000..e576c7868 --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/color/tinyColor.less @@ -0,0 +1,1184 @@ +/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */ +.tinyColorMixin() { +@functions: ~`(function() { +// TinyColor v1.4.1 +// https://github.com/bgrins/TinyColor +// 2016-07-07, Brian Grinstead, MIT License +var trimLeft = /^\s+/, + trimRight = /\s+$/, + tinyCounter = 0, + mathRound = Math.round, + mathMin = Math.min, + mathMax = Math.max, + mathRandom = Math.random; + +function tinycolor (color, opts) { + + color = (color) ? color : ''; + opts = opts || { }; + + // If input is already a tinycolor, return itself + if (color instanceof tinycolor) { + return color; + } + // If we are called as a function, call using new instead + if (!(this instanceof tinycolor)) { + return new tinycolor(color, opts); + } + + var rgb = inputToRGB(color); + this._originalInput = color, + this._r = rgb.r, + this._g = rgb.g, + this._b = rgb.b, + this._a = rgb.a, + this._roundA = mathRound(100*this._a) / 100, + this._format = opts.format || rgb.format; + this._gradientType = opts.gradientType; + + // Don't let the range of [0,255] come back in [0,1]. + // Potentially lose a little bit of precision here, but will fix issues where + // .5 gets interpreted as half of the total, instead of half of 1 + // If it was supposed to be 128, this was already taken care of by inputToRgb + if (this._r < 1) { this._r = mathRound(this._r); } + if (this._g < 1) { this._g = mathRound(this._g); } + if (this._b < 1) { this._b = mathRound(this._b); } + + this._ok = rgb.ok; + this._tc_id = tinyCounter++; +} + +tinycolor.prototype = { + isDark: function() { + return this.getBrightness() < 128; + }, + isLight: function() { + return !this.isDark(); + }, + isValid: function() { + return this._ok; + }, + getOriginalInput: function() { + return this._originalInput; + }, + getFormat: function() { + return this._format; + }, + getAlpha: function() { + return this._a; + }, + getBrightness: function() { + //http://www.w3.org/TR/AERT#color-contrast + var rgb = this.toRgb(); + return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000; + }, + getLuminance: function() { + //http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef + var rgb = this.toRgb(); + var RsRGB, GsRGB, BsRGB, R, G, B; + RsRGB = rgb.r/255; + GsRGB = rgb.g/255; + BsRGB = rgb.b/255; + + if (RsRGB <= 0.03928) {R = RsRGB / 12.92;} else {R = Math.pow(((RsRGB + 0.055) / 1.055), 2.4);} + if (GsRGB <= 0.03928) {G = GsRGB / 12.92;} else {G = Math.pow(((GsRGB + 0.055) / 1.055), 2.4);} + if (BsRGB <= 0.03928) {B = BsRGB / 12.92;} else {B = Math.pow(((BsRGB + 0.055) / 1.055), 2.4);} + return (0.2126 * R) + (0.7152 * G) + (0.0722 * B); + }, + setAlpha: function(value) { + this._a = boundAlpha(value); + this._roundA = mathRound(100*this._a) / 100; + return this; + }, + toHsv: function() { + var hsv = rgbToHsv(this._r, this._g, this._b); + return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this._a }; + }, + toHsvString: function() { + var hsv = rgbToHsv(this._r, this._g, this._b); + var h = mathRound(hsv.h * 360), s = mathRound(hsv.s * 100), v = mathRound(hsv.v * 100); + return (this._a == 1) ? + "hsv(" + h + ", " + s + "%, " + v + "%)" : + "hsva(" + h + ", " + s + "%, " + v + "%, "+ this._roundA + ")"; + }, + toHsl: function() { + var hsl = rgbToHsl(this._r, this._g, this._b); + return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this._a }; + }, + toHslString: function() { + var hsl = rgbToHsl(this._r, this._g, this._b); + var h = mathRound(hsl.h * 360), s = mathRound(hsl.s * 100), l = mathRound(hsl.l * 100); + return (this._a == 1) ? + "hsl(" + h + ", " + s + "%, " + l + "%)" : + "hsla(" + h + ", " + s + "%, " + l + "%, "+ this._roundA + ")"; + }, + toHex: function(allow3Char) { + return rgbToHex(this._r, this._g, this._b, allow3Char); + }, + toHexString: function(allow3Char) { + return '#' + this.toHex(allow3Char); + }, + toHex8: function(allow4Char) { + return rgbaToHex(this._r, this._g, this._b, this._a, allow4Char); + }, + toHex8String: function(allow4Char) { + return '#' + this.toHex8(allow4Char); + }, + toRgb: function() { + return { r: mathRound(this._r), g: mathRound(this._g), b: mathRound(this._b), a: this._a }; + }, + toRgbString: function() { + return (this._a == 1) ? + "rgb(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ")" : + "rgba(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ", " + this._roundA + ")"; + }, + toPercentageRgb: function() { + return { r: mathRound(bound01(this._r, 255) * 100) + "%", g: mathRound(bound01(this._g, 255) * 100) + "%", b: mathRound(bound01(this._b, 255) * 100) + "%", a: this._a }; + }, + toPercentageRgbString: function() { + return (this._a == 1) ? + "rgb(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%)" : + "rgba(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%, " + this._roundA + ")"; + }, + toName: function() { + if (this._a === 0) { + return "transparent"; + } + + if (this._a < 1) { + return false; + } + + return hexNames[rgbToHex(this._r, this._g, this._b, true)] || false; + }, + toFilter: function(secondColor) { + var hex8String = '#' + rgbaToArgbHex(this._r, this._g, this._b, this._a); + var secondHex8String = hex8String; + var gradientType = this._gradientType ? "GradientType = 1, " : ""; + + if (secondColor) { + var s = tinycolor(secondColor); + secondHex8String = '#' + rgbaToArgbHex(s._r, s._g, s._b, s._a); + } + + return "progid:DXImageTransform.Microsoft.gradient("+gradientType+"startColorstr="+hex8String+",endColorstr="+secondHex8String+")"; + }, + toString: function(format) { + var formatSet = !!format; + format = format || this._format; + + var formattedString = false; + var hasAlpha = this._a < 1 && this._a >= 0; + var needsAlphaFormat = !formatSet && hasAlpha && (format === "hex" || format === "hex6" || format === "hex3" || format === "hex4" || format === "hex8" || format === "name"); + + if (needsAlphaFormat) { + // Special case for "transparent", all other non-alpha formats + // will return rgba when there is transparency. + if (format === "name" && this._a === 0) { + return this.toName(); + } + return this.toRgbString(); + } + if (format === "rgb") { + formattedString = this.toRgbString(); + } + if (format === "prgb") { + formattedString = this.toPercentageRgbString(); + } + if (format === "hex" || format === "hex6") { + formattedString = this.toHexString(); + } + if (format === "hex3") { + formattedString = this.toHexString(true); + } + if (format === "hex4") { + formattedString = this.toHex8String(true); + } + if (format === "hex8") { + formattedString = this.toHex8String(); + } + if (format === "name") { + formattedString = this.toName(); + } + if (format === "hsl") { + formattedString = this.toHslString(); + } + if (format === "hsv") { + formattedString = this.toHsvString(); + } + + return formattedString || this.toHexString(); + }, + clone: function() { + return tinycolor(this.toString()); + }, + + _applyModification: function(fn, args) { + var color = fn.apply(null, [this].concat([].slice.call(args))); + this._r = color._r; + this._g = color._g; + this._b = color._b; + this.setAlpha(color._a); + return this; + }, + lighten: function() { + return this._applyModification(lighten, arguments); + }, + brighten: function() { + return this._applyModification(brighten, arguments); + }, + darken: function() { + return this._applyModification(darken, arguments); + }, + desaturate: function() { + return this._applyModification(desaturate, arguments); + }, + saturate: function() { + return this._applyModification(saturate, arguments); + }, + greyscale: function() { + return this._applyModification(greyscale, arguments); + }, + spin: function() { + return this._applyModification(spin, arguments); + }, + + _applyCombination: function(fn, args) { + return fn.apply(null, [this].concat([].slice.call(args))); + }, + analogous: function() { + return this._applyCombination(analogous, arguments); + }, + complement: function() { + return this._applyCombination(complement, arguments); + }, + monochromatic: function() { + return this._applyCombination(monochromatic, arguments); + }, + splitcomplement: function() { + return this._applyCombination(splitcomplement, arguments); + }, + triad: function() { + return this._applyCombination(triad, arguments); + }, + tetrad: function() { + return this._applyCombination(tetrad, arguments); + } +}; + +// If input is an object, force 1 into "1.0" to handle ratios properly +// String input requires "1.0" as input, so 1 will be treated as 1 +tinycolor.fromRatio = function(color, opts) { + if (typeof color == "object") { + var newColor = {}; + for (var i in color) { + if (color.hasOwnProperty(i)) { + if (i === "a") { + newColor[i] = color[i]; + } + else { + newColor[i] = convertToPercentage(color[i]); + } + } + } + color = newColor; + } + + return tinycolor(color, opts); +}; + +// Given a string or object, convert that input to RGB +// Possible string inputs: +// +// "red" +// "#f00" or "f00" +// "#ff0000" or "ff0000" +// "#ff000000" or "ff000000" +// "rgb 255 0 0" or "rgb (255, 0, 0)" +// "rgb 1.0 0 0" or "rgb (1, 0, 0)" +// "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1" +// "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1" +// "hsl(0, 100%, 50%)" or "hsl 0 100% 50%" +// "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1" +// "hsv(0, 100%, 100%)" or "hsv 0 100% 100%" +// +function inputToRGB(color) { + + var rgb = { r: 0, g: 0, b: 0 }; + var a = 1; + var s = null; + var v = null; + var l = null; + var ok = false; + var format = false; + + if (typeof color == "string") { + color = stringInputToObject(color); + } + + if (typeof color == "object") { + if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) { + rgb = rgbToRgb(color.r, color.g, color.b); + ok = true; + format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb"; + } + else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) { + s = convertToPercentage(color.s); + v = convertToPercentage(color.v); + rgb = hsvToRgb(color.h, s, v); + ok = true; + format = "hsv"; + } + else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) { + s = convertToPercentage(color.s); + l = convertToPercentage(color.l); + rgb = hslToRgb(color.h, s, l); + ok = true; + format = "hsl"; + } + + if (color.hasOwnProperty("a")) { + a = color.a; + } + } + + a = boundAlpha(a); + + return { + ok: ok, + format: color.format || format, + r: mathMin(255, mathMax(rgb.r, 0)), + g: mathMin(255, mathMax(rgb.g, 0)), + b: mathMin(255, mathMax(rgb.b, 0)), + a: a + }; +} + +// Conversion Functions +// -------------------- + +// rgbToHsl, rgbToHsv, hslToRgb, hsvToRgb modified from: +// + +// rgbToRgb +// Handle bounds / percentage checking to conform to CSS color spec +// +// *Assumes:* r, g, b in [0, 255] or [0, 1] +// *Returns:* { r, g, b } in [0, 255] +function rgbToRgb(r, g, b){ + return { + r: bound01(r, 255) * 255, + g: bound01(g, 255) * 255, + b: bound01(b, 255) * 255 + }; +} + +// rgbToHsl +// Converts an RGB color value to HSL. +// *Assumes:* r, g, and b are contained in [0, 255] or [0, 1] +// *Returns:* { h, s, l } in [0,1] +function rgbToHsl(r, g, b) { + + r = bound01(r, 255); + g = bound01(g, 255); + b = bound01(b, 255); + + var max = mathMax(r, g, b), min = mathMin(r, g, b); + var h, s, l = (max + min) / 2; + + if(max == min) { + h = s = 0; // achromatic + } + else { + var d = max - min; + s = l > 0.5 ? d / (2 - max - min) : d / (max + min); + switch(max) { + case r: h = (g - b) / d + (g < b ? 6 : 0); break; + case g: h = (b - r) / d + 2; break; + case b: h = (r - g) / d + 4; break; + } + + h /= 6; + } + + return { h: h, s: s, l: l }; +} + +// hslToRgb +// Converts an HSL color value to RGB. +// *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100] +// *Returns:* { r, g, b } in the set [0, 255] +function hslToRgb(h, s, l) { + var r, g, b; + + h = bound01(h, 360); + s = bound01(s, 100); + l = bound01(l, 100); + + function hue2rgb(p, q, t) { + if(t < 0) t += 1; + if(t > 1) t -= 1; + if(t < 1/6) return p + (q - p) * 6 * t; + if(t < 1/2) return q; + if(t < 2/3) return p + (q - p) * (2/3 - t) * 6; + return p; + } + + if(s === 0) { + r = g = b = l; // achromatic + } + else { + var q = l < 0.5 ? l * (1 + s) : l + s - l * s; + var p = 2 * l - q; + r = hue2rgb(p, q, h + 1/3); + g = hue2rgb(p, q, h); + b = hue2rgb(p, q, h - 1/3); + } + + return { r: r * 255, g: g * 255, b: b * 255 }; +} + +// rgbToHsv +// Converts an RGB color value to HSV +// *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1] +// *Returns:* { h, s, v } in [0,1] +function rgbToHsv(r, g, b) { + + r = bound01(r, 255); + g = bound01(g, 255); + b = bound01(b, 255); + + var max = mathMax(r, g, b), min = mathMin(r, g, b); + var h, s, v = max; + + var d = max - min; + s = max === 0 ? 0 : d / max; + + if(max == min) { + h = 0; // achromatic + } + else { + switch(max) { + case r: h = (g - b) / d + (g < b ? 6 : 0); break; + case g: h = (b - r) / d + 2; break; + case b: h = (r - g) / d + 4; break; + } + h /= 6; + } + return { h: h, s: s, v: v }; +} + +// hsvToRgb +// Converts an HSV color value to RGB. +// *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100] +// *Returns:* { r, g, b } in the set [0, 255] + function hsvToRgb(h, s, v) { + + h = bound01(h, 360) * 6; + s = bound01(s, 100); + v = bound01(v, 100); + + var i = Math.floor(h), + f = h - i, + p = v * (1 - s), + q = v * (1 - f * s), + t = v * (1 - (1 - f) * s), + mod = i % 6, + r = [v, q, p, p, t, v][mod], + g = [t, v, v, q, p, p][mod], + b = [p, p, t, v, v, q][mod]; + + return { r: r * 255, g: g * 255, b: b * 255 }; +} + +// rgbToHex +// Converts an RGB color to hex +// Assumes r, g, and b are contained in the set [0, 255] +// Returns a 3 or 6 character hex +function rgbToHex(r, g, b, allow3Char) { + + var hex = [ + pad2(mathRound(r).toString(16)), + pad2(mathRound(g).toString(16)), + pad2(mathRound(b).toString(16)) + ]; + + // Return a 3 character hex if possible + if (allow3Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1)) { + return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0); + } + + return hex.join(""); +} + +// rgbaToHex +// Converts an RGBA color plus alpha transparency to hex +// Assumes r, g, b are contained in the set [0, 255] and +// a in [0, 1]. Returns a 4 or 8 character rgba hex +function rgbaToHex(r, g, b, a, allow4Char) { + + var hex = [ + pad2(mathRound(r).toString(16)), + pad2(mathRound(g).toString(16)), + pad2(mathRound(b).toString(16)), + pad2(convertDecimalToHex(a)) + ]; + + // Return a 4 character hex if possible + if (allow4Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1) && hex[3].charAt(0) == hex[3].charAt(1)) { + return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0); + } + + return hex.join(""); +} + +// rgbaToArgbHex +// Converts an RGBA color to an ARGB Hex8 string +// Rarely used, but required for "toFilter()" +function rgbaToArgbHex(r, g, b, a) { + + var hex = [ + pad2(convertDecimalToHex(a)), + pad2(mathRound(r).toString(16)), + pad2(mathRound(g).toString(16)), + pad2(mathRound(b).toString(16)) + ]; + + return hex.join(""); +} + +// equals +// Can be called with any tinycolor input +tinycolor.equals = function (color1, color2) { + if (!color1 || !color2) { return false; } + return tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString(); +}; + +tinycolor.random = function() { + return tinycolor.fromRatio({ + r: mathRandom(), + g: mathRandom(), + b: mathRandom() + }); +}; + +// Modification Functions +// ---------------------- +// Thanks to less.js for some of the basics here +// + +function desaturate(color, amount) { + amount = (amount === 0) ? 0 : (amount || 10); + var hsl = tinycolor(color).toHsl(); + hsl.s -= amount / 100; + hsl.s = clamp01(hsl.s); + return tinycolor(hsl); +} + +function saturate(color, amount) { + amount = (amount === 0) ? 0 : (amount || 10); + var hsl = tinycolor(color).toHsl(); + hsl.s += amount / 100; + hsl.s = clamp01(hsl.s); + return tinycolor(hsl); +} + +function greyscale(color) { + return tinycolor(color).desaturate(100); +} + +function lighten (color, amount) { + amount = (amount === 0) ? 0 : (amount || 10); + var hsl = tinycolor(color).toHsl(); + hsl.l += amount / 100; + hsl.l = clamp01(hsl.l); + return tinycolor(hsl); +} + +function brighten(color, amount) { + amount = (amount === 0) ? 0 : (amount || 10); + var rgb = tinycolor(color).toRgb(); + rgb.r = mathMax(0, mathMin(255, rgb.r - mathRound(255 * - (amount / 100)))); + rgb.g = mathMax(0, mathMin(255, rgb.g - mathRound(255 * - (amount / 100)))); + rgb.b = mathMax(0, mathMin(255, rgb.b - mathRound(255 * - (amount / 100)))); + return tinycolor(rgb); +} + +function darken (color, amount) { + amount = (amount === 0) ? 0 : (amount || 10); + var hsl = tinycolor(color).toHsl(); + hsl.l -= amount / 100; + hsl.l = clamp01(hsl.l); + return tinycolor(hsl); +} + +// Spin takes a positive or negative amount within [-360, 360] indicating the change of hue. +// Values outside of this range will be wrapped into this range. +function spin(color, amount) { + var hsl = tinycolor(color).toHsl(); + var hue = (hsl.h + amount) % 360; + hsl.h = hue < 0 ? 360 + hue : hue; + return tinycolor(hsl); +} + +// Combination Functions +// --------------------- +// Thanks to jQuery xColor for some of the ideas behind these +// + +function complement(color) { + var hsl = tinycolor(color).toHsl(); + hsl.h = (hsl.h + 180) % 360; + return tinycolor(hsl); +} + +function triad(color) { + var hsl = tinycolor(color).toHsl(); + var h = hsl.h; + return [ + tinycolor(color), + tinycolor({ h: (h + 120) % 360, s: hsl.s, l: hsl.l }), + tinycolor({ h: (h + 240) % 360, s: hsl.s, l: hsl.l }) + ]; +} + +function tetrad(color) { + var hsl = tinycolor(color).toHsl(); + var h = hsl.h; + return [ + tinycolor(color), + tinycolor({ h: (h + 90) % 360, s: hsl.s, l: hsl.l }), + tinycolor({ h: (h + 180) % 360, s: hsl.s, l: hsl.l }), + tinycolor({ h: (h + 270) % 360, s: hsl.s, l: hsl.l }) + ]; +} + +function splitcomplement(color) { + var hsl = tinycolor(color).toHsl(); + var h = hsl.h; + return [ + tinycolor(color), + tinycolor({ h: (h + 72) % 360, s: hsl.s, l: hsl.l}), + tinycolor({ h: (h + 216) % 360, s: hsl.s, l: hsl.l}) + ]; +} + +function analogous(color, results, slices) { + results = results || 6; + slices = slices || 30; + + var hsl = tinycolor(color).toHsl(); + var part = 360 / slices; + var ret = [tinycolor(color)]; + + for (hsl.h = ((hsl.h - (part * results >> 1)) + 720) % 360; --results; ) { + hsl.h = (hsl.h + part) % 360; + ret.push(tinycolor(hsl)); + } + return ret; +} + +function monochromatic(color, results) { + results = results || 6; + var hsv = tinycolor(color).toHsv(); + var h = hsv.h, s = hsv.s, v = hsv.v; + var ret = []; + var modification = 1 / results; + + while (results--) { + ret.push(tinycolor({ h: h, s: s, v: v})); + v = (v + modification) % 1; + } + + return ret; +} + +// Utility Functions +// --------------------- + +tinycolor.mix = function(color1, color2, amount) { + amount = (amount === 0) ? 0 : (amount || 50); + + var rgb1 = tinycolor(color1).toRgb(); + var rgb2 = tinycolor(color2).toRgb(); + + var p = amount / 100; + + var rgba = { + r: ((rgb2.r - rgb1.r) * p) + rgb1.r, + g: ((rgb2.g - rgb1.g) * p) + rgb1.g, + b: ((rgb2.b - rgb1.b) * p) + rgb1.b, + a: ((rgb2.a - rgb1.a) * p) + rgb1.a + }; + + return tinycolor(rgba); +}; + +// Readability Functions +// --------------------- +// false +// tinycolor.isReadable("#000", "#111",{level:"AA",size:"large"}) => false +tinycolor.isReadable = function(color1, color2, wcag2) { + var readability = tinycolor.readability(color1, color2); + var wcag2Parms, out; + + out = false; + + wcag2Parms = validateWCAG2Parms(wcag2); + switch (wcag2Parms.level + wcag2Parms.size) { + case "AAsmall": + case "AAAlarge": + out = readability >= 4.5; + break; + case "AAlarge": + out = readability >= 3; + break; + case "AAAsmall": + out = readability >= 7; + break; + } + return out; + +}; + +// mostReadable +// Given a base color and a list of possible foreground or background +// colors for that base, returns the most readable color. +// Optionally returns Black or White if the most readable color is unreadable. +// *Example* +// tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:false}).toHexString(); // "#112255" +// tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:true}).toHexString(); // "#ffffff" +// tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"large"}).toHexString(); // "#faf3f3" +// tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"small"}).toHexString(); // "#ffffff" +tinycolor.mostReadable = function(baseColor, colorList, args) { + var bestColor = null; + var bestScore = 0; + var readability; + var includeFallbackColors, level, size ; + args = args || {}; + includeFallbackColors = args.includeFallbackColors ; + level = args.level; + size = args.size; + + for (var i= 0; i < colorList.length ; i++) { + readability = tinycolor.readability(baseColor, colorList[i]); + if (readability > bestScore) { + bestScore = readability; + bestColor = tinycolor(colorList[i]); + } + } + + if (tinycolor.isReadable(baseColor, bestColor, {"level":level,"size":size}) || !includeFallbackColors) { + return bestColor; + } + else { + args.includeFallbackColors=false; + return tinycolor.mostReadable(baseColor,["#fff", "#000"],args); + } +}; + +// Big List of Colors +// ------------------ +// +var names = tinycolor.names = { + aliceblue: "f0f8ff", + antiquewhite: "faebd7", + aqua: "0ff", + aquamarine: "7fffd4", + azure: "f0ffff", + beige: "f5f5dc", + bisque: "ffe4c4", + black: "000", + blanchedalmond: "ffebcd", + blue: "00f", + blueviolet: "8a2be2", + brown: "a52a2a", + burlywood: "deb887", + burntsienna: "ea7e5d", + cadetblue: "5f9ea0", + chartreuse: "7fff00", + chocolate: "d2691e", + coral: "ff7f50", + cornflowerblue: "6495ed", + cornsilk: "fff8dc", + crimson: "dc143c", + cyan: "0ff", + darkblue: "00008b", + darkcyan: "008b8b", + darkgoldenrod: "b8860b", + darkgray: "a9a9a9", + darkgreen: "006400", + darkgrey: "a9a9a9", + darkkhaki: "bdb76b", + darkmagenta: "8b008b", + darkolivegreen: "556b2f", + darkorange: "ff8c00", + darkorchid: "9932cc", + darkred: "8b0000", + darksalmon: "e9967a", + darkseagreen: "8fbc8f", + darkslateblue: "483d8b", + darkslategray: "2f4f4f", + darkslategrey: "2f4f4f", + darkturquoise: "00ced1", + darkviolet: "9400d3", + deeppink: "ff1493", + deepskyblue: "00bfff", + dimgray: "696969", + dimgrey: "696969", + dodgerblue: "1e90ff", + firebrick: "b22222", + floralwhite: "fffaf0", + forestgreen: "228b22", + fuchsia: "f0f", + gainsboro: "dcdcdc", + ghostwhite: "f8f8ff", + gold: "ffd700", + goldenrod: "daa520", + gray: "808080", + green: "008000", + greenyellow: "adff2f", + grey: "808080", + honeydew: "f0fff0", + hotpink: "ff69b4", + indianred: "cd5c5c", + indigo: "4b0082", + ivory: "fffff0", + khaki: "f0e68c", + lavender: "e6e6fa", + lavenderblush: "fff0f5", + lawngreen: "7cfc00", + lemonchiffon: "fffacd", + lightblue: "add8e6", + lightcoral: "f08080", + lightcyan: "e0ffff", + lightgoldenrodyellow: "fafad2", + lightgray: "d3d3d3", + lightgreen: "90ee90", + lightgrey: "d3d3d3", + lightpink: "ffb6c1", + lightsalmon: "ffa07a", + lightseagreen: "20b2aa", + lightskyblue: "87cefa", + lightslategray: "789", + lightslategrey: "789", + lightsteelblue: "b0c4de", + lightyellow: "ffffe0", + lime: "0f0", + limegreen: "32cd32", + linen: "faf0e6", + magenta: "f0f", + maroon: "800000", + mediumaquamarine: "66cdaa", + mediumblue: "0000cd", + mediumorchid: "ba55d3", + mediumpurple: "9370db", + mediumseagreen: "3cb371", + mediumslateblue: "7b68ee", + mediumspringgreen: "00fa9a", + mediumturquoise: "48d1cc", + mediumvioletred: "c71585", + midnightblue: "191970", + mintcream: "f5fffa", + mistyrose: "ffe4e1", + moccasin: "ffe4b5", + navajowhite: "ffdead", + navy: "000080", + oldlace: "fdf5e6", + olive: "808000", + olivedrab: "6b8e23", + orange: "ffa500", + orangered: "ff4500", + orchid: "da70d6", + palegoldenrod: "eee8aa", + palegreen: "98fb98", + paleturquoise: "afeeee", + palevioletred: "db7093", + papayawhip: "ffefd5", + peachpuff: "ffdab9", + peru: "cd853f", + pink: "ffc0cb", + plum: "dda0dd", + powderblue: "b0e0e6", + purple: "800080", + rebeccapurple: "663399", + red: "f00", + rosybrown: "bc8f8f", + royalblue: "4169e1", + saddlebrown: "8b4513", + salmon: "fa8072", + sandybrown: "f4a460", + seagreen: "2e8b57", + seashell: "fff5ee", + sienna: "a0522d", + silver: "c0c0c0", + skyblue: "87ceeb", + slateblue: "6a5acd", + slategray: "708090", + slategrey: "708090", + snow: "fffafa", + springgreen: "00ff7f", + steelblue: "4682b4", + tan: "d2b48c", + teal: "008080", + thistle: "d8bfd8", + tomato: "ff6347", + turquoise: "40e0d0", + violet: "ee82ee", + wheat: "f5deb3", + white: "fff", + whitesmoke: "f5f5f5", + yellow: "ff0", + yellowgreen: "9acd32" +}; + +// Make it easy to access colors via hexNames[hex] +var hexNames = tinycolor.hexNames = flip(names); + +// Utilities +// --------- + +// { 'name1': 'val1' } becomes { 'val1': 'name1' } +function flip(o) { + var flipped = { }; + for (var i in o) { + if (o.hasOwnProperty(i)) { + flipped[o[i]] = i; + } + } + return flipped; +} + +// Return a valid alpha value [0,1] with all invalid values being set to 1 +function boundAlpha(a) { + a = parseFloat(a); + + if (isNaN(a) || a < 0 || a > 1) { + a = 1; + } + + return a; +} + +// Take input from [0, n] and return it as [0, 1] +function bound01(n, max) { + if (isOnePointZero(n)) { n = "100%"; } + + var processPercent = isPercentage(n); + n = mathMin(max, mathMax(0, parseFloat(n))); + + // Automatically convert percentage into number + if (processPercent) { + n = parseInt(n * max, 10) / 100; + } + + // Handle floating point rounding errors + if ((Math.abs(n - max) < 0.000001)) { + return 1; + } + + // Convert into [0, 1] range if it isn't already + return (n % max) / parseFloat(max); +} + +// Force a number between 0 and 1 +function clamp01(val) { + return mathMin(1, mathMax(0, val)); +} + +// Parse a base-16 hex value into a base-10 integer +function parseIntFromHex(val) { + return parseInt(val, 16); +} + +// Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1 +// +function isOnePointZero(n) { + return typeof n == "string" && n.indexOf('.') != -1 && parseFloat(n) === 1; +} + +// Check to see if string passed in is a percentage +function isPercentage(n) { + return typeof n === "string" && n.indexOf('%') != -1; +} + +// Force a hex value to have 2 characters +function pad2(c) { + return c.length == 1 ? '0' + c : '' + c; +} + +// Replace a decimal with it's percentage value +function convertToPercentage(n) { + if (n <= 1) { + n = (n * 100) + "%"; + } + + return n; +} + +// Converts a decimal to a hex value +function convertDecimalToHex(d) { + return Math.round(parseFloat(d) * 255).toString(16); +} +// Converts a hex value to a decimal +function convertHexToDecimal(h) { + return (parseIntFromHex(h) / 255); +} + +var matchers = (function() { + + // + var CSS_INTEGER = "[-\\+]?\\d+%?"; + + // + var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?"; + + // Allow positive/negative integer/number. Don't capture the either/or, just the entire outcome. + var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")"; + + // Actual matching. + // Parentheses and commas are optional, but not required. + // Whitespace can take the place of commas or opening paren + var PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?"; + var PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?"; + + return { + CSS_UNIT: new RegExp(CSS_UNIT), + rgb: new RegExp("rgb" + PERMISSIVE_MATCH3), + rgba: new RegExp("rgba" + PERMISSIVE_MATCH4), + hsl: new RegExp("hsl" + PERMISSIVE_MATCH3), + hsla: new RegExp("hsla" + PERMISSIVE_MATCH4), + hsv: new RegExp("hsv" + PERMISSIVE_MATCH3), + hsva: new RegExp("hsva" + PERMISSIVE_MATCH4), + hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, + hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/, + hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, + hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/ + }; +})(); + +// isValidCSSUnit +// Take in a single string / number and check to see if it looks like a CSS unit +// (see matchers above for definition). +function isValidCSSUnit(color) { + return !!matchers.CSS_UNIT.exec(color); +} + +// stringInputToObject +// Permissive string parsing. Take in a number of formats, and output an object +// based on detected format. Returns { r, g, b } or { h, s, l } or { h, s, v} +function stringInputToObject(color) { + + color = color.replace(trimLeft, '').replace(trimRight, '').toLowerCase(); + var named = false; + if (names[color]) { + color = names[color]; + named = true; + } + else if (color == 'transparent') { + return { r: 0, g: 0, b: 0, a: 0, format: "name" }; + } + + // Try to match string input using regular expressions. + // Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360] + // Just return an object and let the conversion functions handle that. + // This way the result will be the same whether the tinycolor is initialized with string or object. + var match; + if ((match = matchers.rgb.exec(color))) { + return { r: match[1], g: match[2], b: match[3] }; + } + if ((match = matchers.rgba.exec(color))) { + return { r: match[1], g: match[2], b: match[3], a: match[4] }; + } + if ((match = matchers.hsl.exec(color))) { + return { h: match[1], s: match[2], l: match[3] }; + } + if ((match = matchers.hsla.exec(color))) { + return { h: match[1], s: match[2], l: match[3], a: match[4] }; + } + if ((match = matchers.hsv.exec(color))) { + return { h: match[1], s: match[2], v: match[3] }; + } + if ((match = matchers.hsva.exec(color))) { + return { h: match[1], s: match[2], v: match[3], a: match[4] }; + } + if ((match = matchers.hex8.exec(color))) { + return { + r: parseIntFromHex(match[1]), + g: parseIntFromHex(match[2]), + b: parseIntFromHex(match[3]), + a: convertHexToDecimal(match[4]), + format: named ? "name" : "hex8" + }; + } + if ((match = matchers.hex6.exec(color))) { + return { + r: parseIntFromHex(match[1]), + g: parseIntFromHex(match[2]), + b: parseIntFromHex(match[3]), + format: named ? "name" : "hex" + }; + } + if ((match = matchers.hex4.exec(color))) { + return { + r: parseIntFromHex(match[1] + '' + match[1]), + g: parseIntFromHex(match[2] + '' + match[2]), + b: parseIntFromHex(match[3] + '' + match[3]), + a: convertHexToDecimal(match[4] + '' + match[4]), + format: named ? "name" : "hex8" + }; + } + if ((match = matchers.hex3.exec(color))) { + return { + r: parseIntFromHex(match[1] + '' + match[1]), + g: parseIntFromHex(match[2] + '' + match[2]), + b: parseIntFromHex(match[3] + '' + match[3]), + format: named ? "name" : "hex" + }; + } + + return false; +} + +function validateWCAG2Parms(parms) { + // return valid WCAG2 parms for isReadable. + // If input parms are invalid, return {"level":"AA", "size":"small"} + var level, size; + parms = parms || {"level":"AA", "size":"small"}; + level = (parms.level || "AA").toUpperCase(); + size = (parms.size || "small").toLowerCase(); + if (level !== "AA" && level !== "AAA") { + level = "AA"; + } + if (size !== "small" && size !== "large") { + size = "small"; + } + return {"level":level, "size":size}; +} + +this.tinycolor = tinycolor; + +})()`; +} +// It is hacky way to make this function will be compiled preferentially by less +// resolve error: `ReferenceError: colorPalette is not defined` +// https://github.com/ant-design/ant-motion/issues/44 +.tinyColorMixin(); diff --git a/webapp/packages/supersonic-fe/src/assets/style/compact.less b/webapp/packages/supersonic-fe/src/assets/style/compact.less new file mode 100644 index 000000000..ef0008ba3 --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/compact.less @@ -0,0 +1,4 @@ +@root-entry-name: default; + +@import './themes/compact.less'; +@import './core/index'; diff --git a/webapp/packages/supersonic-fe/src/assets/style/core/base.less b/webapp/packages/supersonic-fe/src/assets/style/core/base.less new file mode 100644 index 000000000..a704c5512 --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/core/base.less @@ -0,0 +1,10 @@ +// Config global less under antd +[class^=~'@{ant-prefix}-'], +[class*=~' @{ant-prefix}-'] { + // remove the clear button of a text input control in IE10+ + &::-ms-clear, + input::-ms-clear, + input::-ms-reveal { + display: none; + } +} diff --git a/webapp/packages/supersonic-fe/src/assets/style/core/global.less b/webapp/packages/supersonic-fe/src/assets/style/core/global.less new file mode 100644 index 000000000..cb26cce38 --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/core/global.less @@ -0,0 +1,491 @@ +/* stylelint-disable property-no-vendor-prefix, at-rule-no-vendor-prefix */ + +// Reboot +// +// Normalization of HTML elements, manually forked from Normalize.css to remove +// styles targeting irrelevant browsers while applying new styles. +// +// Normalize is licensed MIT. https://github.com/necolas/normalize.css + +// HTML & Body reset +@{html-selector}, +body { + .square(100%); +} + +// remove the clear button of a text input control in IE10+ +input::-ms-clear, +input::-ms-reveal { + display: none; +} + +// Document +// +// 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`. +// 2. Change the default font family in all browsers. +// 3. Correct the line height in all browsers. +// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. +// 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so +// we force a non-overlapping, non-auto-hiding scrollbar to counteract. +// 6. Change the default tap highlight to be completely transparent in iOS. + +*, +*::before, +*::after { + box-sizing: border-box; // 1 +} + +@{html-selector} { + font-family: sans-serif; // 2 + line-height: 1.15; // 3 + -webkit-text-size-adjust: 100%; // 4 + -ms-text-size-adjust: 100%; // 4 + -ms-overflow-style: scrollbar; // 5 + -webkit-tap-highlight-color: fade(@black, 0%); // 6 +} + +// IE10+ doesn't honor `` in some cases. +@-ms-viewport { + width: device-width; +} + +// Body +// +// 1. remove the margin in all browsers. +// 2. As a best practice, apply a default `body-background`. + +body { + margin: 0; // 1 + color: @text-color; + font-size: @font-size-base; + font-family: @font-family; + font-variant: @font-variant-base; + line-height: @line-height-base; + background-color: @body-background; // 2 + font-feature-settings: @font-feature-settings-base; +} + +// Suppress the focus outline on elements that cannot be accessed via keyboard. +// This prevents an unwanted focus outline from appearing around elements that +// might still respond to pointer events. +// +// Credit: https://github.com/suitcss/base +[tabindex='-1']:focus { + outline: none !important; +} + +// Content grouping +// +// 1. Add the correct box sizing in Firefox. +// 2. Show the overflow in Edge and IE. + +hr { + box-sizing: content-box; // 1 + height: 0; // 1 + overflow: visible; // 2 +} + +// +// Typography +// + +// remove top margins from headings +// +// By default, `

`-`

` all receive top and bottom margins. We nuke the top +// margin for easier control within type scales as it avoids margin collapsing. +h1, +h2, +h3, +h4, +h5, +h6 { + margin-top: 0; + margin-bottom: 0.5em; + color: @heading-color; + font-weight: 500; +} + +// Reset margins on paragraphs +// +// Similarly, the top margin on `

`s get reset. However, we also reset the +// bottom margin to use `em` units instead of `em`. +p { + margin-top: 0; + margin-bottom: 1em; +} + +// Abbreviations +// +// 1. remove the bottom border in Firefox 39-. +// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. +// 3. Add explicit cursor to indicate changed behavior. +// 4. Duplicate behavior to the data-* attribute for our tooltip plugin + +abbr[title], +abbr[data-original-title] { + // 4 + text-decoration: underline; // 2 + text-decoration: underline dotted; // 2 + border-bottom: 0; // 1 + cursor: help; // 3 +} + +address { + margin-bottom: 1em; + font-style: normal; + line-height: inherit; +} + +input[type='text'], +input[type='password'], +input[type='number'], +textarea { + -webkit-appearance: none; +} + +ol, +ul, +dl { + margin-top: 0; + margin-bottom: 1em; +} + +ol ol, +ul ul, +ol ul, +ul ol { + margin-bottom: 0; +} + +dt { + font-weight: 500; +} + +dd { + margin-bottom: 0.5em; + margin-left: 0; // Undo browser default +} + +blockquote { + margin: 0 0 1em; +} + +dfn { + font-style: italic; // Add the correct font style in Android 4.3- +} + +b, +strong { + font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari +} + +small { + font-size: 80%; // Add the correct font size in all browsers +} + +// +// Prevent `sub` and `sup` elements from affecting the line height in +// all browsers. +// + +sub, +sup { + position: relative; + font-size: 75%; + line-height: 0; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +// +// Links +// + +a { + color: @link-color; + text-decoration: @link-decoration; + background-color: transparent; // remove the gray background on active links in IE 10. + outline: none; + cursor: pointer; + transition: color 0.3s; + -webkit-text-decoration-skip: objects; // remove gaps in links underline in iOS 8+ and Safari 8+. + + &:hover { + color: @link-hover-color; + } + + &:active { + color: @link-active-color; + } + + &:active, + &:hover { + text-decoration: @link-hover-decoration; + outline: 0; + } + + // https://github.com/ant-design/ant-design/issues/22503 + &:focus { + text-decoration: @link-focus-decoration; + outline: @link-focus-outline; + } + + &[disabled] { + color: @disabled-color; + cursor: not-allowed; + } +} + +// +// Code +// + +pre, +code, +kbd, +samp { + font-size: 1em; // Correct the odd `em` font sizing in all browsers. + font-family: @code-family; +} + +pre { + // remove browser default top margin + margin-top: 0; + // Reset browser default of `1em` to use `em`s + margin-bottom: 1em; + // Don't allow content to break outside + overflow: auto; +} + +// +// Figures +// +figure { + // Apply a consistent margin strategy (matches our type styles). + margin: 0 0 1em; +} + +// +// Images and content +// + +img { + vertical-align: middle; + border-style: none; // remove the border on images inside links in IE 10-. +} + +// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property. +// +// In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11 +// DON'T remove the click delay when `` is present. +// However, they DO support emoving the click delay via `touch-action: manipulation`. +// See: +// * https://getbootstrap.com/docs/4.0/content/reboot/#click-delay-optimization-for-touch +// * http://caniuse.com/#feat=css-touch-action +// * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay + +a, +area, +button, +[role='button'], +input:not([type='range']), +label, +select, +summary, +textarea { + touch-action: manipulation; +} + +// +// Tables +// + +table { + border-collapse: collapse; // Prevent double borders +} + +caption { + padding-top: 0.75em; + padding-bottom: 0.3em; + color: @text-color-secondary; + text-align: left; + caption-side: bottom; +} + +// +// Forms +// + +input, +button, +select, +optgroup, +textarea { + margin: 0; // remove the margin in Firefox and Safari + color: inherit; + font-size: inherit; + font-family: inherit; + line-height: inherit; +} + +button, +input { + overflow: visible; // Show the overflow in Edge +} + +button, +select { + text-transform: none; // remove the inheritance of text transform in Firefox +} + +// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` +// controls in Android 4. +// 2. Correct the inability to style clickable types in iOS and Safari. +button, +@{html-selector} [type="button"], /* 1 */ +[type="reset"], +[type="submit"] { + -webkit-appearance: button; // 2 +} + +// remove inner border and padding from Firefox, but don't restore the outline like Normalize. +button::-moz-focus-inner, +[type='button']::-moz-focus-inner, +[type='reset']::-moz-focus-inner, +[type='submit']::-moz-focus-inner { + padding: 0; + border-style: none; +} + +input[type='radio'], +input[type='checkbox'] { + box-sizing: border-box; // 1. Add the correct box sizing in IE 10- + padding: 0; // 2. remove the padding in IE 10- +} + +input[type='date'], +input[type='time'], +input[type='datetime-local'], +input[type='month'] { + // remove the default appearance of temporal inputs to avoid a Mobile Safari + // bug where setting a custom line-height prevents text from being vertically + // centered within the input. + // See https://bugs.webkit.org/show_bug.cgi?id=139848 + // and https://github.com/twbs/bootstrap/issues/11266 + -webkit-appearance: listbox; +} + +textarea { + overflow: auto; // remove the default vertical scrollbar in IE. + // Textareas should really only resize vertically so they don't break their (horizontal) containers. + resize: vertical; +} + +fieldset { + // Browsers set a default `min-width: min-content;` on fieldsets, + // unlike e.g. `

`s, which have `min-width: 0;` by default. + // So we reset that to ensure fieldsets behave more like a standard block element. + // See https://github.com/twbs/bootstrap/issues/12359 + // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements + min-width: 0; + margin: 0; + // Reset the default outline behavior of fieldsets so they don't affect page layout. + padding: 0; + border: 0; +} + +// 1. Correct the text wrapping in Edge and IE. +// 2. Correct the color inheritance from `fieldset` elements in IE. +legend { + display: block; + width: 100%; + max-width: 100%; // 1 + margin-bottom: 0.5em; + padding: 0; + color: inherit; // 2 + font-size: 1.5em; + line-height: inherit; + white-space: normal; // 1 +} + +progress { + vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera. +} + +// Correct the cursor style of incement and decement buttons in Chrome. +[type='number']::-webkit-inner-spin-button, +[type='number']::-webkit-outer-spin-button { + height: auto; +} + +[type='search'] { + // This overrides the extra rounded corners on search inputs in iOS so that our + // `.form-control` class can properly style them. Note that this cannot simply + // be added to `.form-control` as it's not specific enough. For details, see + // https://github.com/twbs/bootstrap/issues/11586. + outline-offset: -2px; // 2. Correct the outline style in Safari. + -webkit-appearance: none; +} + +// +// remove the inner padding and cancel buttons in Chrome and Safari on macOS. +// + +[type='search']::-webkit-search-cancel-button, +[type='search']::-webkit-search-decoration { + -webkit-appearance: none; +} + +// +// 1. Correct the inability to style clickable types in iOS and Safari. +// 2. Change font properties to `inherit` in Safari. +// + +::-webkit-file-upload-button { + font: inherit; // 2 + -webkit-appearance: button; // 1 +} + +// +// Correct element displays +// + +output { + display: inline-block; +} + +summary { + display: list-item; // Add the correct display in all browsers +} + +template { + display: none; // Add the correct display in IE +} + +// Always hide an element with the `hidden` HTML attribute (from PureCSS). +// Needed for proper display in IE 10-. +[hidden] { + display: none !important; +} + +mark { + padding: 0.2em; + background-color: @yellow-1; +} + +::selection { + color: @text-color-inverse; + background: @text-selection-bg; +} + +// Utility classes +.clearfix { + .clearfix(); +} diff --git a/webapp/packages/supersonic-fe/src/assets/style/core/iconfont.less b/webapp/packages/supersonic-fe/src/assets/style/core/iconfont.less new file mode 100644 index 000000000..597b8549e --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/core/iconfont.less @@ -0,0 +1,22 @@ +@import '../themes/index'; +@import '../mixins/iconfont'; + +.@{iconfont-css-prefix} { + .iconfont-mixin(); + + // https://github.com/ant-design/ant-design/issues/33703 + & > & { + line-height: 0; + vertical-align: 0; + } + + &[tabindex] { + cursor: pointer; + } +} + +.@{iconfont-css-prefix}-spin, +.@{iconfont-css-prefix}-spin::before { + display: inline-block; + animation: loadingCircle 1s infinite linear; +} diff --git a/webapp/packages/supersonic-fe/src/assets/style/core/index.less b/webapp/packages/supersonic-fe/src/assets/style/core/index.less new file mode 100644 index 000000000..c493947e8 --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/core/index.less @@ -0,0 +1,5 @@ +@import '../mixins/index'; +@import 'base'; +@import 'global'; +@import 'iconfont'; +@import 'motion'; diff --git a/webapp/packages/supersonic-fe/src/assets/style/core/motion.less b/webapp/packages/supersonic-fe/src/assets/style/core/motion.less new file mode 100644 index 000000000..286d50eba --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/core/motion.less @@ -0,0 +1,22 @@ +// @import '../mixins/motion'; This has moved to theme/xxx inside. +@import 'motion/fade'; +@import 'motion/move'; +@import 'motion/other'; +@import 'motion/slide'; +@import 'motion/zoom'; + +// For common/openAnimation +.ant-motion-collapse-legacy { + overflow: hidden; + + &-active { + transition: height @animation-duration-base @ease-in-out, + opacity @animation-duration-base @ease-in-out !important; + } +} + +.ant-motion-collapse { + overflow: hidden; + transition: height @animation-duration-base @ease-in-out, + opacity @animation-duration-base @ease-in-out !important; +} diff --git a/webapp/packages/supersonic-fe/src/assets/style/core/motion/fade.less b/webapp/packages/supersonic-fe/src/assets/style/core/motion/fade.less new file mode 100644 index 000000000..f4a9513bc --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/core/motion/fade.less @@ -0,0 +1,34 @@ +.fade-motion(@className, @keyframeName) { + @name: ~'@{ant-prefix}-@{className}'; + .make-motion(@name, @keyframeName); + .@{name}-enter, + .@{name}-appear { + opacity: 0; + animation-timing-function: linear; + } + .@{name}-leave { + animation-timing-function: linear; + } +} + +.fade-motion(fade, antFade); + +@keyframes antFadeIn { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@keyframes antFadeOut { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + } +} diff --git a/webapp/packages/supersonic-fe/src/assets/style/core/motion/move.less b/webapp/packages/supersonic-fe/src/assets/style/core/motion/move.less new file mode 100644 index 000000000..733f26d70 --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/core/motion/move.less @@ -0,0 +1,129 @@ +.move-motion(@className, @keyframeName) { + @name: ~'@{ant-prefix}-@{className}'; + .make-motion(@name, @keyframeName); + .@{name}-enter, + .@{name}-appear { + opacity: 0; + animation-timing-function: @ease-out-circ; + } + .@{name}-leave { + animation-timing-function: @ease-in-circ; + } +} + +.move-motion(move-up, antMoveUp); +.move-motion(move-down, antMoveDown); +.move-motion(move-left, antMoveLeft); +.move-motion(move-right, antMoveRight); + +@keyframes antMoveDownIn { + 0% { + transform: translateY(100%); + transform-origin: 0 0; + opacity: 0; + } + + 100% { + transform: translateY(0%); + transform-origin: 0 0; + opacity: 1; + } +} + +@keyframes antMoveDownOut { + 0% { + transform: translateY(0%); + transform-origin: 0 0; + opacity: 1; + } + + 100% { + transform: translateY(100%); + transform-origin: 0 0; + opacity: 0; + } +} + +@keyframes antMoveLeftIn { + 0% { + transform: translateX(-100%); + transform-origin: 0 0; + opacity: 0; + } + + 100% { + transform: translateX(0%); + transform-origin: 0 0; + opacity: 1; + } +} + +@keyframes antMoveLeftOut { + 0% { + transform: translateX(0%); + transform-origin: 0 0; + opacity: 1; + } + + 100% { + transform: translateX(-100%); + transform-origin: 0 0; + opacity: 0; + } +} + +@keyframes antMoveRightIn { + 0% { + transform: translateX(100%); + transform-origin: 0 0; + opacity: 0; + } + + 100% { + transform: translateX(0%); + transform-origin: 0 0; + opacity: 1; + } +} + +@keyframes antMoveRightOut { + 0% { + transform: translateX(0%); + transform-origin: 0 0; + opacity: 1; + } + + 100% { + transform: translateX(100%); + transform-origin: 0 0; + opacity: 0; + } +} + +@keyframes antMoveUpIn { + 0% { + transform: translateY(-100%); + transform-origin: 0 0; + opacity: 0; + } + + 100% { + transform: translateY(0%); + transform-origin: 0 0; + opacity: 1; + } +} + +@keyframes antMoveUpOut { + 0% { + transform: translateY(0%); + transform-origin: 0 0; + opacity: 1; + } + + 100% { + transform: translateY(-100%); + transform-origin: 0 0; + opacity: 0; + } +} diff --git a/webapp/packages/supersonic-fe/src/assets/style/core/motion/other.less b/webapp/packages/supersonic-fe/src/assets/style/core/motion/other.less new file mode 100644 index 000000000..d1a25494e --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/core/motion/other.less @@ -0,0 +1,51 @@ +@keyframes loadingCircle { + 100% { + transform: rotate(360deg); + } +} + +@click-animating-true: ~"[@{ant-prefix}-click-animating='true']"; +@click-animating-with-extra-node-true: ~"[@{ant-prefix}-click-animating-without-extra-node='true']"; + +@{click-animating-true}, +@{click-animating-with-extra-node-true} { + position: relative; +} + +html { + --antd-wave-shadow-color: @primary-color; + --scroll-bar: 0; +} + +@click-animating-with-extra-node-true-after: ~'@{click-animating-with-extra-node-true}::after'; + +@{click-animating-with-extra-node-true-after}, +.@{ant-prefix}-click-animating-node { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: block; + border-radius: inherit; + box-shadow: 0 0 0 0 @primary-color; + box-shadow: 0 0 0 0 var(--antd-wave-shadow-color); + opacity: 0.2; + animation: fadeEffect 2s @ease-out-circ, waveEffect 0.4s @ease-out-circ; + animation-fill-mode: forwards; + content: ''; + pointer-events: none; +} + +@keyframes waveEffect { + 100% { + box-shadow: 0 0 0 @primary-color; + box-shadow: 0 0 0 @wave-animation-width var(--antd-wave-shadow-color); + } +} + +@keyframes fadeEffect { + 100% { + opacity: 0; + } +} diff --git a/webapp/packages/supersonic-fe/src/assets/style/core/motion/slide.less b/webapp/packages/supersonic-fe/src/assets/style/core/motion/slide.less new file mode 100644 index 000000000..7831b4bac --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/core/motion/slide.less @@ -0,0 +1,131 @@ +.slide-motion(@className, @keyframeName) { + @name: ~'@{ant-prefix}-@{className}'; + .make-motion(@name, @keyframeName); + .@{name}-enter, + .@{name}-appear { + transform: scale(0); + transform-origin: 0% 0%; + opacity: 0; + animation-timing-function: @ease-out-quint; + } + .@{name}-leave { + animation-timing-function: @ease-in-quint; + } +} + +.slide-motion(slide-up, antSlideUp); +.slide-motion(slide-down, antSlideDown); +.slide-motion(slide-left, antSlideLeft); +.slide-motion(slide-right, antSlideRight); + +@keyframes antSlideUpIn { + 0% { + transform: scaleY(0.8); + transform-origin: 0% 0%; + opacity: 0; + } + + 100% { + transform: scaleY(1); + transform-origin: 0% 0%; + opacity: 1; + } +} + +@keyframes antSlideUpOut { + 0% { + transform: scaleY(1); + transform-origin: 0% 0%; + opacity: 1; + } + + 100% { + transform: scaleY(0.8); + transform-origin: 0% 0%; + opacity: 0; + } +} + +@keyframes antSlideDownIn { + 0% { + transform: scaleY(0.8); + transform-origin: 100% 100%; + opacity: 0; + } + + 100% { + transform: scaleY(1); + transform-origin: 100% 100%; + opacity: 1; + } +} + +@keyframes antSlideDownOut { + 0% { + transform: scaleY(1); + transform-origin: 100% 100%; + opacity: 1; + } + + 100% { + transform: scaleY(0.8); + transform-origin: 100% 100%; + opacity: 0; + } +} + +@keyframes antSlideLeftIn { + 0% { + transform: scaleX(0.8); + transform-origin: 0% 0%; + opacity: 0; + } + + 100% { + transform: scaleX(1); + transform-origin: 0% 0%; + opacity: 1; + } +} + +@keyframes antSlideLeftOut { + 0% { + transform: scaleX(1); + transform-origin: 0% 0%; + opacity: 1; + } + + 100% { + transform: scaleX(0.8); + transform-origin: 0% 0%; + opacity: 0; + } +} + +@keyframes antSlideRightIn { + 0% { + transform: scaleX(0.8); + transform-origin: 100% 0%; + opacity: 0; + } + + 100% { + transform: scaleX(1); + transform-origin: 100% 0%; + opacity: 1; + } +} + +@keyframes antSlideRightOut { + 0% { + transform: scaleX(1); + transform-origin: 100% 0%; + opacity: 1; + } + + 100% { + transform: scaleX(0.8); + transform-origin: 100% 0%; + opacity: 0; + } +} diff --git a/webapp/packages/supersonic-fe/src/assets/style/core/motion/zoom.less b/webapp/packages/supersonic-fe/src/assets/style/core/motion/zoom.less new file mode 100644 index 000000000..72739b751 --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/core/motion/zoom.less @@ -0,0 +1,179 @@ +.zoom-motion(@className, @keyframeName, @duration: @animation-duration-base) { + @name: ~'@{ant-prefix}-@{className}'; + .make-motion(@name, @keyframeName, @duration); + .@{name}-enter, + .@{name}-appear { + transform: scale(0); // need this by yiminghe + opacity: 0; + animation-timing-function: @ease-out-circ; + + &-prepare { + transform: none; + } + } + .@{name}-leave { + animation-timing-function: @ease-in-out-circ; + } +} + +// For Modal, Select choosen item +.zoom-motion(zoom, antZoom); +// For Popover, Popconfirm, Dropdown +.zoom-motion(zoom-big, antZoomBig); +// For Tooltip +.zoom-motion(zoom-big-fast, antZoomBig, @animation-duration-fast); + +.zoom-motion(zoom-up, antZoomUp); +.zoom-motion(zoom-down, antZoomDown); +.zoom-motion(zoom-left, antZoomLeft); +.zoom-motion(zoom-right, antZoomRight); + +@keyframes antZoomIn { + 0% { + transform: scale(0.2); + opacity: 0; + } + + 100% { + transform: scale(1); + opacity: 1; + } +} + +@keyframes antZoomOut { + 0% { + transform: scale(1); + } + + 100% { + transform: scale(0.2); + opacity: 0; + } +} + +@keyframes antZoomBigIn { + 0% { + transform: scale(0.8); + opacity: 0; + } + + 100% { + transform: scale(1); + opacity: 1; + } +} + +@keyframes antZoomBigOut { + 0% { + transform: scale(1); + } + + 100% { + transform: scale(0.8); + opacity: 0; + } +} + +@keyframes antZoomUpIn { + 0% { + transform: scale(0.8); + transform-origin: 50% 0%; + opacity: 0; + } + + 100% { + transform: scale(1); + transform-origin: 50% 0%; + } +} + +@keyframes antZoomUpOut { + 0% { + transform: scale(1); + transform-origin: 50% 0%; + } + + 100% { + transform: scale(0.8); + transform-origin: 50% 0%; + opacity: 0; + } +} + +@keyframes antZoomLeftIn { + 0% { + transform: scale(0.8); + transform-origin: 0% 50%; + opacity: 0; + } + + 100% { + transform: scale(1); + transform-origin: 0% 50%; + } +} + +@keyframes antZoomLeftOut { + 0% { + transform: scale(1); + transform-origin: 0% 50%; + } + + 100% { + transform: scale(0.8); + transform-origin: 0% 50%; + opacity: 0; + } +} + +@keyframes antZoomRightIn { + 0% { + transform: scale(0.8); + transform-origin: 100% 50%; + opacity: 0; + } + + 100% { + transform: scale(1); + transform-origin: 100% 50%; + } +} + +@keyframes antZoomRightOut { + 0% { + transform: scale(1); + transform-origin: 100% 50%; + } + + 100% { + transform: scale(0.8); + transform-origin: 100% 50%; + opacity: 0; + } +} + +@keyframes antZoomDownIn { + 0% { + transform: scale(0.8); + transform-origin: 50% 100%; + opacity: 0; + } + + 100% { + transform: scale(1); + transform-origin: 50% 100%; + } +} + +@keyframes antZoomDownOut { + 0% { + transform: scale(1); + transform-origin: 50% 100%; + } + + 100% { + transform: scale(0.8); + transform-origin: 50% 100%; + opacity: 0; + } +} diff --git a/webapp/packages/supersonic-fe/src/assets/style/css.js b/webapp/packages/supersonic-fe/src/assets/style/css.js new file mode 100644 index 000000000..b67dcb95d --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/css.js @@ -0,0 +1 @@ +import './index.css'; \ No newline at end of file diff --git a/webapp/packages/supersonic-fe/src/assets/style/dark.less b/webapp/packages/supersonic-fe/src/assets/style/dark.less new file mode 100644 index 000000000..12a37313e --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/dark.less @@ -0,0 +1,4 @@ +@root-entry-name: default; + +@import './themes/dark.less'; +@import './core/index'; diff --git a/webapp/packages/supersonic-fe/src/assets/style/default.css b/webapp/packages/supersonic-fe/src/assets/style/default.css new file mode 100644 index 000000000..b363d9137 --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/default.css @@ -0,0 +1,1248 @@ +/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */ +/* stylelint-disable no-duplicate-selectors */ +/* stylelint-disable */ +/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */ +[class^=ant-]::-ms-clear, +[class*= ant-]::-ms-clear, +[class^=ant-] input::-ms-clear, +[class*= ant-] input::-ms-clear, +[class^=ant-] input::-ms-reveal, +[class*= ant-] input::-ms-reveal { + display: none; +} +/* stylelint-disable property-no-vendor-prefix, at-rule-no-vendor-prefix */ +html, +body { + width: 100%; + height: 100%; +} +input::-ms-clear, +input::-ms-reveal { + display: none; +} +*, +*::before, +*::after { + box-sizing: border-box; +} +html { + font-family: sans-serif; + line-height: 1.15; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + -ms-overflow-style: scrollbar; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} +@-ms-viewport { + width: device-width; +} +body { + margin: 0; + color: rgba(0, 0, 0, 0.85); + font-size: 14px; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; + font-variant: tabular-nums; + line-height: 1.5715; + background-color: #fff; + font-feature-settings: 'tnum'; +} +[tabindex='-1']:focus { + outline: none !important; +} +hr { + box-sizing: content-box; + height: 0; + overflow: visible; +} +h1, +h2, +h3, +h4, +h5, +h6 { + margin-top: 0; + margin-bottom: 0.5em; + color: rgba(0, 0, 0, 0.85); + font-weight: 500; +} +p { + margin-top: 0; + margin-bottom: 1em; +} +abbr[title], +abbr[data-original-title] { + text-decoration: underline; + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; + border-bottom: 0; + cursor: help; +} +address { + margin-bottom: 1em; + font-style: normal; + line-height: inherit; +} +input[type='text'], +input[type='password'], +input[type='number'], +textarea { + -webkit-appearance: none; +} +ol, +ul, +dl { + margin-top: 0; + margin-bottom: 1em; +} +ol ol, +ul ul, +ol ul, +ul ol { + margin-bottom: 0; +} +dt { + font-weight: 500; +} +dd { + margin-bottom: 0.5em; + margin-left: 0; +} +blockquote { + margin: 0 0 1em; +} +dfn { + font-style: italic; +} +b, +strong { + font-weight: bolder; +} +small { + font-size: 80%; +} +sub, +sup { + position: relative; + font-size: 75%; + line-height: 0; + vertical-align: baseline; +} +sub { + bottom: -0.25em; +} +sup { + top: -0.5em; +} +a { + color: #1890ff; + text-decoration: none; + background-color: transparent; + outline: none; + cursor: pointer; + transition: color 0.3s; + -webkit-text-decoration-skip: objects; +} +a:hover { + color: #40a9ff; +} +a:active { + color: #096dd9; +} +a:active, +a:hover { + text-decoration: none; + outline: 0; +} +a:focus { + text-decoration: none; + outline: 0; +} +a[disabled] { + color: rgba(0, 0, 0, 0.25); + cursor: not-allowed; +} +pre, +code, +kbd, +samp { + font-size: 1em; + font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; +} +pre { + margin-top: 0; + margin-bottom: 1em; + overflow: auto; +} +figure { + margin: 0 0 1em; +} +img { + vertical-align: middle; + border-style: none; +} +a, +area, +button, +[role='button'], +input:not([type='range']), +label, +select, +summary, +textarea { + touch-action: manipulation; +} +table { + border-collapse: collapse; +} +caption { + padding-top: 0.75em; + padding-bottom: 0.3em; + color: rgba(0, 0, 0, 0.45); + text-align: left; + caption-side: bottom; +} +input, +button, +select, +optgroup, +textarea { + margin: 0; + color: inherit; + font-size: inherit; + font-family: inherit; + line-height: inherit; +} +button, +input { + overflow: visible; +} +button, +select { + text-transform: none; +} +button, +html [type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} +button::-moz-focus-inner, +[type='button']::-moz-focus-inner, +[type='reset']::-moz-focus-inner, +[type='submit']::-moz-focus-inner { + padding: 0; + border-style: none; +} +input[type='radio'], +input[type='checkbox'] { + box-sizing: border-box; + padding: 0; +} +input[type='date'], +input[type='time'], +input[type='datetime-local'], +input[type='month'] { + -webkit-appearance: listbox; +} +textarea { + overflow: auto; + resize: vertical; +} +fieldset { + min-width: 0; + margin: 0; + padding: 0; + border: 0; +} +legend { + display: block; + width: 100%; + max-width: 100%; + margin-bottom: 0.5em; + padding: 0; + color: inherit; + font-size: 1.5em; + line-height: inherit; + white-space: normal; +} +progress { + vertical-align: baseline; +} +[type='number']::-webkit-inner-spin-button, +[type='number']::-webkit-outer-spin-button { + height: auto; +} +[type='search'] { + outline-offset: -2px; + -webkit-appearance: none; +} +[type='search']::-webkit-search-cancel-button, +[type='search']::-webkit-search-decoration { + -webkit-appearance: none; +} +::-webkit-file-upload-button { + font: inherit; + -webkit-appearance: button; +} +output { + display: inline-block; +} +summary { + display: list-item; +} +template { + display: none; +} +[hidden] { + display: none !important; +} +mark { + padding: 0.2em; + background-color: #feffe6; +} +::-moz-selection { + color: #fff; + background: #1890ff; +} +::selection { + color: #fff; + background: #1890ff; +} +.clearfix::before { + display: table; + content: ''; +} +.clearfix::after { + display: table; + clear: both; + content: ''; +} +.anticon { + display: inline-flex; + align-items: center; + color: inherit; + font-style: normal; + line-height: 0; + text-align: center; + text-transform: none; + vertical-align: -0.125em; + text-rendering: optimizelegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +.anticon > * { + line-height: 1; +} +.anticon svg { + display: inline-block; +} +.anticon::before { + display: none; +} +.anticon .anticon-icon { + display: block; +} +.anticon > .anticon { + line-height: 0; + vertical-align: 0; +} +.anticon[tabindex] { + cursor: pointer; +} +.anticon-spin, +.anticon-spin::before { + display: inline-block; + animation: loadingCircle 1s infinite linear; +} +.ant-fade-enter, +.ant-fade-appear { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-fade-leave { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-fade-enter.ant-fade-enter-active, +.ant-fade-appear.ant-fade-appear-active { + animation-name: antFadeIn; + animation-play-state: running; +} +.ant-fade-leave.ant-fade-leave-active { + animation-name: antFadeOut; + animation-play-state: running; + pointer-events: none; +} +.ant-fade-enter, +.ant-fade-appear { + opacity: 0; + animation-timing-function: linear; +} +.ant-fade-leave { + animation-timing-function: linear; +} +@keyframes antFadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@keyframes antFadeOut { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} +.ant-move-up-enter, +.ant-move-up-appear { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-move-up-leave { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-move-up-enter.ant-move-up-enter-active, +.ant-move-up-appear.ant-move-up-appear-active { + animation-name: antMoveUpIn; + animation-play-state: running; +} +.ant-move-up-leave.ant-move-up-leave-active { + animation-name: antMoveUpOut; + animation-play-state: running; + pointer-events: none; +} +.ant-move-up-enter, +.ant-move-up-appear { + opacity: 0; + animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); +} +.ant-move-up-leave { + animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); +} +.ant-move-down-enter, +.ant-move-down-appear { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-move-down-leave { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-move-down-enter.ant-move-down-enter-active, +.ant-move-down-appear.ant-move-down-appear-active { + animation-name: antMoveDownIn; + animation-play-state: running; +} +.ant-move-down-leave.ant-move-down-leave-active { + animation-name: antMoveDownOut; + animation-play-state: running; + pointer-events: none; +} +.ant-move-down-enter, +.ant-move-down-appear { + opacity: 0; + animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); +} +.ant-move-down-leave { + animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); +} +.ant-move-left-enter, +.ant-move-left-appear { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-move-left-leave { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-move-left-enter.ant-move-left-enter-active, +.ant-move-left-appear.ant-move-left-appear-active { + animation-name: antMoveLeftIn; + animation-play-state: running; +} +.ant-move-left-leave.ant-move-left-leave-active { + animation-name: antMoveLeftOut; + animation-play-state: running; + pointer-events: none; +} +.ant-move-left-enter, +.ant-move-left-appear { + opacity: 0; + animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); +} +.ant-move-left-leave { + animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); +} +.ant-move-right-enter, +.ant-move-right-appear { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-move-right-leave { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-move-right-enter.ant-move-right-enter-active, +.ant-move-right-appear.ant-move-right-appear-active { + animation-name: antMoveRightIn; + animation-play-state: running; +} +.ant-move-right-leave.ant-move-right-leave-active { + animation-name: antMoveRightOut; + animation-play-state: running; + pointer-events: none; +} +.ant-move-right-enter, +.ant-move-right-appear { + opacity: 0; + animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); +} +.ant-move-right-leave { + animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); +} +@keyframes antMoveDownIn { + 0% { + transform: translateY(100%); + transform-origin: 0 0; + opacity: 0; + } + 100% { + transform: translateY(0%); + transform-origin: 0 0; + opacity: 1; + } +} +@keyframes antMoveDownOut { + 0% { + transform: translateY(0%); + transform-origin: 0 0; + opacity: 1; + } + 100% { + transform: translateY(100%); + transform-origin: 0 0; + opacity: 0; + } +} +@keyframes antMoveLeftIn { + 0% { + transform: translateX(-100%); + transform-origin: 0 0; + opacity: 0; + } + 100% { + transform: translateX(0%); + transform-origin: 0 0; + opacity: 1; + } +} +@keyframes antMoveLeftOut { + 0% { + transform: translateX(0%); + transform-origin: 0 0; + opacity: 1; + } + 100% { + transform: translateX(-100%); + transform-origin: 0 0; + opacity: 0; + } +} +@keyframes antMoveRightIn { + 0% { + transform: translateX(100%); + transform-origin: 0 0; + opacity: 0; + } + 100% { + transform: translateX(0%); + transform-origin: 0 0; + opacity: 1; + } +} +@keyframes antMoveRightOut { + 0% { + transform: translateX(0%); + transform-origin: 0 0; + opacity: 1; + } + 100% { + transform: translateX(100%); + transform-origin: 0 0; + opacity: 0; + } +} +@keyframes antMoveUpIn { + 0% { + transform: translateY(-100%); + transform-origin: 0 0; + opacity: 0; + } + 100% { + transform: translateY(0%); + transform-origin: 0 0; + opacity: 1; + } +} +@keyframes antMoveUpOut { + 0% { + transform: translateY(0%); + transform-origin: 0 0; + opacity: 1; + } + 100% { + transform: translateY(-100%); + transform-origin: 0 0; + opacity: 0; + } +} +@keyframes loadingCircle { + 100% { + transform: rotate(360deg); + } +} +[ant-click-animating='true'], +[ant-click-animating-without-extra-node='true'] { + position: relative; +} +html { + --antd-wave-shadow-color: #1890ff; + --scroll-bar: 0; +} +[ant-click-animating-without-extra-node='true']::after, +.ant-click-animating-node { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: block; + border-radius: inherit; + box-shadow: 0 0 0 0 #1890ff; + box-shadow: 0 0 0 0 var(--antd-wave-shadow-color); + opacity: 0.2; + animation: fadeEffect 2s cubic-bezier(0.08, 0.82, 0.17, 1), waveEffect 0.4s cubic-bezier(0.08, 0.82, 0.17, 1); + animation-fill-mode: forwards; + content: ''; + pointer-events: none; +} +@keyframes waveEffect { + 100% { + box-shadow: 0 0 0 #1890ff; + box-shadow: 0 0 0 6px var(--antd-wave-shadow-color); + } +} +@keyframes fadeEffect { + 100% { + opacity: 0; + } +} +.ant-slide-up-enter, +.ant-slide-up-appear { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-slide-up-leave { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-slide-up-enter.ant-slide-up-enter-active, +.ant-slide-up-appear.ant-slide-up-appear-active { + animation-name: antSlideUpIn; + animation-play-state: running; +} +.ant-slide-up-leave.ant-slide-up-leave-active { + animation-name: antSlideUpOut; + animation-play-state: running; + pointer-events: none; +} +.ant-slide-up-enter, +.ant-slide-up-appear { + transform: scale(0); + transform-origin: 0% 0%; + opacity: 0; + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); +} +.ant-slide-up-leave { + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); +} +.ant-slide-down-enter, +.ant-slide-down-appear { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-slide-down-leave { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-slide-down-enter.ant-slide-down-enter-active, +.ant-slide-down-appear.ant-slide-down-appear-active { + animation-name: antSlideDownIn; + animation-play-state: running; +} +.ant-slide-down-leave.ant-slide-down-leave-active { + animation-name: antSlideDownOut; + animation-play-state: running; + pointer-events: none; +} +.ant-slide-down-enter, +.ant-slide-down-appear { + transform: scale(0); + transform-origin: 0% 0%; + opacity: 0; + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); +} +.ant-slide-down-leave { + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); +} +.ant-slide-left-enter, +.ant-slide-left-appear { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-slide-left-leave { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-slide-left-enter.ant-slide-left-enter-active, +.ant-slide-left-appear.ant-slide-left-appear-active { + animation-name: antSlideLeftIn; + animation-play-state: running; +} +.ant-slide-left-leave.ant-slide-left-leave-active { + animation-name: antSlideLeftOut; + animation-play-state: running; + pointer-events: none; +} +.ant-slide-left-enter, +.ant-slide-left-appear { + transform: scale(0); + transform-origin: 0% 0%; + opacity: 0; + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); +} +.ant-slide-left-leave { + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); +} +.ant-slide-right-enter, +.ant-slide-right-appear { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-slide-right-leave { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-slide-right-enter.ant-slide-right-enter-active, +.ant-slide-right-appear.ant-slide-right-appear-active { + animation-name: antSlideRightIn; + animation-play-state: running; +} +.ant-slide-right-leave.ant-slide-right-leave-active { + animation-name: antSlideRightOut; + animation-play-state: running; + pointer-events: none; +} +.ant-slide-right-enter, +.ant-slide-right-appear { + transform: scale(0); + transform-origin: 0% 0%; + opacity: 0; + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); +} +.ant-slide-right-leave { + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); +} +@keyframes antSlideUpIn { + 0% { + transform: scaleY(0.8); + transform-origin: 0% 0%; + opacity: 0; + } + 100% { + transform: scaleY(1); + transform-origin: 0% 0%; + opacity: 1; + } +} +@keyframes antSlideUpOut { + 0% { + transform: scaleY(1); + transform-origin: 0% 0%; + opacity: 1; + } + 100% { + transform: scaleY(0.8); + transform-origin: 0% 0%; + opacity: 0; + } +} +@keyframes antSlideDownIn { + 0% { + transform: scaleY(0.8); + transform-origin: 100% 100%; + opacity: 0; + } + 100% { + transform: scaleY(1); + transform-origin: 100% 100%; + opacity: 1; + } +} +@keyframes antSlideDownOut { + 0% { + transform: scaleY(1); + transform-origin: 100% 100%; + opacity: 1; + } + 100% { + transform: scaleY(0.8); + transform-origin: 100% 100%; + opacity: 0; + } +} +@keyframes antSlideLeftIn { + 0% { + transform: scaleX(0.8); + transform-origin: 0% 0%; + opacity: 0; + } + 100% { + transform: scaleX(1); + transform-origin: 0% 0%; + opacity: 1; + } +} +@keyframes antSlideLeftOut { + 0% { + transform: scaleX(1); + transform-origin: 0% 0%; + opacity: 1; + } + 100% { + transform: scaleX(0.8); + transform-origin: 0% 0%; + opacity: 0; + } +} +@keyframes antSlideRightIn { + 0% { + transform: scaleX(0.8); + transform-origin: 100% 0%; + opacity: 0; + } + 100% { + transform: scaleX(1); + transform-origin: 100% 0%; + opacity: 1; + } +} +@keyframes antSlideRightOut { + 0% { + transform: scaleX(1); + transform-origin: 100% 0%; + opacity: 1; + } + 100% { + transform: scaleX(0.8); + transform-origin: 100% 0%; + opacity: 0; + } +} +.ant-zoom-enter, +.ant-zoom-appear { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-zoom-leave { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-zoom-enter.ant-zoom-enter-active, +.ant-zoom-appear.ant-zoom-appear-active { + animation-name: antZoomIn; + animation-play-state: running; +} +.ant-zoom-leave.ant-zoom-leave-active { + animation-name: antZoomOut; + animation-play-state: running; + pointer-events: none; +} +.ant-zoom-enter, +.ant-zoom-appear { + transform: scale(0); + opacity: 0; + animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); +} +.ant-zoom-enter-prepare, +.ant-zoom-appear-prepare { + transform: none; +} +.ant-zoom-leave { + animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); +} +.ant-zoom-big-enter, +.ant-zoom-big-appear { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-zoom-big-leave { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-zoom-big-enter.ant-zoom-big-enter-active, +.ant-zoom-big-appear.ant-zoom-big-appear-active { + animation-name: antZoomBigIn; + animation-play-state: running; +} +.ant-zoom-big-leave.ant-zoom-big-leave-active { + animation-name: antZoomBigOut; + animation-play-state: running; + pointer-events: none; +} +.ant-zoom-big-enter, +.ant-zoom-big-appear { + transform: scale(0); + opacity: 0; + animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); +} +.ant-zoom-big-enter-prepare, +.ant-zoom-big-appear-prepare { + transform: none; +} +.ant-zoom-big-leave { + animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); +} +.ant-zoom-big-fast-enter, +.ant-zoom-big-fast-appear { + animation-duration: 0.1s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-zoom-big-fast-leave { + animation-duration: 0.1s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-zoom-big-fast-enter.ant-zoom-big-fast-enter-active, +.ant-zoom-big-fast-appear.ant-zoom-big-fast-appear-active { + animation-name: antZoomBigIn; + animation-play-state: running; +} +.ant-zoom-big-fast-leave.ant-zoom-big-fast-leave-active { + animation-name: antZoomBigOut; + animation-play-state: running; + pointer-events: none; +} +.ant-zoom-big-fast-enter, +.ant-zoom-big-fast-appear { + transform: scale(0); + opacity: 0; + animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); +} +.ant-zoom-big-fast-enter-prepare, +.ant-zoom-big-fast-appear-prepare { + transform: none; +} +.ant-zoom-big-fast-leave { + animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); +} +.ant-zoom-up-enter, +.ant-zoom-up-appear { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-zoom-up-leave { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-zoom-up-enter.ant-zoom-up-enter-active, +.ant-zoom-up-appear.ant-zoom-up-appear-active { + animation-name: antZoomUpIn; + animation-play-state: running; +} +.ant-zoom-up-leave.ant-zoom-up-leave-active { + animation-name: antZoomUpOut; + animation-play-state: running; + pointer-events: none; +} +.ant-zoom-up-enter, +.ant-zoom-up-appear { + transform: scale(0); + opacity: 0; + animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); +} +.ant-zoom-up-enter-prepare, +.ant-zoom-up-appear-prepare { + transform: none; +} +.ant-zoom-up-leave { + animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); +} +.ant-zoom-down-enter, +.ant-zoom-down-appear { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-zoom-down-leave { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-zoom-down-enter.ant-zoom-down-enter-active, +.ant-zoom-down-appear.ant-zoom-down-appear-active { + animation-name: antZoomDownIn; + animation-play-state: running; +} +.ant-zoom-down-leave.ant-zoom-down-leave-active { + animation-name: antZoomDownOut; + animation-play-state: running; + pointer-events: none; +} +.ant-zoom-down-enter, +.ant-zoom-down-appear { + transform: scale(0); + opacity: 0; + animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); +} +.ant-zoom-down-enter-prepare, +.ant-zoom-down-appear-prepare { + transform: none; +} +.ant-zoom-down-leave { + animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); +} +.ant-zoom-left-enter, +.ant-zoom-left-appear { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-zoom-left-leave { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-zoom-left-enter.ant-zoom-left-enter-active, +.ant-zoom-left-appear.ant-zoom-left-appear-active { + animation-name: antZoomLeftIn; + animation-play-state: running; +} +.ant-zoom-left-leave.ant-zoom-left-leave-active { + animation-name: antZoomLeftOut; + animation-play-state: running; + pointer-events: none; +} +.ant-zoom-left-enter, +.ant-zoom-left-appear { + transform: scale(0); + opacity: 0; + animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); +} +.ant-zoom-left-enter-prepare, +.ant-zoom-left-appear-prepare { + transform: none; +} +.ant-zoom-left-leave { + animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); +} +.ant-zoom-right-enter, +.ant-zoom-right-appear { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-zoom-right-leave { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-zoom-right-enter.ant-zoom-right-enter-active, +.ant-zoom-right-appear.ant-zoom-right-appear-active { + animation-name: antZoomRightIn; + animation-play-state: running; +} +.ant-zoom-right-leave.ant-zoom-right-leave-active { + animation-name: antZoomRightOut; + animation-play-state: running; + pointer-events: none; +} +.ant-zoom-right-enter, +.ant-zoom-right-appear { + transform: scale(0); + opacity: 0; + animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); +} +.ant-zoom-right-enter-prepare, +.ant-zoom-right-appear-prepare { + transform: none; +} +.ant-zoom-right-leave { + animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); +} +@keyframes antZoomIn { + 0% { + transform: scale(0.2); + opacity: 0; + } + 100% { + transform: scale(1); + opacity: 1; + } +} +@keyframes antZoomOut { + 0% { + transform: scale(1); + } + 100% { + transform: scale(0.2); + opacity: 0; + } +} +@keyframes antZoomBigIn { + 0% { + transform: scale(0.8); + opacity: 0; + } + 100% { + transform: scale(1); + opacity: 1; + } +} +@keyframes antZoomBigOut { + 0% { + transform: scale(1); + } + 100% { + transform: scale(0.8); + opacity: 0; + } +} +@keyframes antZoomUpIn { + 0% { + transform: scale(0.8); + transform-origin: 50% 0%; + opacity: 0; + } + 100% { + transform: scale(1); + transform-origin: 50% 0%; + } +} +@keyframes antZoomUpOut { + 0% { + transform: scale(1); + transform-origin: 50% 0%; + } + 100% { + transform: scale(0.8); + transform-origin: 50% 0%; + opacity: 0; + } +} +@keyframes antZoomLeftIn { + 0% { + transform: scale(0.8); + transform-origin: 0% 50%; + opacity: 0; + } + 100% { + transform: scale(1); + transform-origin: 0% 50%; + } +} +@keyframes antZoomLeftOut { + 0% { + transform: scale(1); + transform-origin: 0% 50%; + } + 100% { + transform: scale(0.8); + transform-origin: 0% 50%; + opacity: 0; + } +} +@keyframes antZoomRightIn { + 0% { + transform: scale(0.8); + transform-origin: 100% 50%; + opacity: 0; + } + 100% { + transform: scale(1); + transform-origin: 100% 50%; + } +} +@keyframes antZoomRightOut { + 0% { + transform: scale(1); + transform-origin: 100% 50%; + } + 100% { + transform: scale(0.8); + transform-origin: 100% 50%; + opacity: 0; + } +} +@keyframes antZoomDownIn { + 0% { + transform: scale(0.8); + transform-origin: 50% 100%; + opacity: 0; + } + 100% { + transform: scale(1); + transform-origin: 50% 100%; + } +} +@keyframes antZoomDownOut { + 0% { + transform: scale(1); + transform-origin: 50% 100%; + } + 100% { + transform: scale(0.8); + transform-origin: 50% 100%; + opacity: 0; + } +} +.ant-motion-collapse-legacy { + overflow: hidden; +} +.ant-motion-collapse-legacy-active { + transition: height 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !important; +} +.ant-motion-collapse { + overflow: hidden; + transition: height 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !important; +} diff --git a/webapp/packages/supersonic-fe/src/assets/style/default.less b/webapp/packages/supersonic-fe/src/assets/style/default.less new file mode 100644 index 000000000..ecec08453 --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/default.less @@ -0,0 +1,4 @@ +// This is same as `index.less` but given `root-entry-name` for `dist/antd.less` usage +@root-entry-name: default; + +@import './index'; diff --git a/webapp/packages/supersonic-fe/src/assets/style/index-pure.less b/webapp/packages/supersonic-fe/src/assets/style/index-pure.less new file mode 100644 index 000000000..04efa3b47 --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/index-pure.less @@ -0,0 +1,2 @@ +@import './themes/index'; +@import './core/index'; diff --git a/webapp/packages/supersonic-fe/src/assets/style/index.css b/webapp/packages/supersonic-fe/src/assets/style/index.css new file mode 100644 index 000000000..b363d9137 --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/index.css @@ -0,0 +1,1248 @@ +/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */ +/* stylelint-disable no-duplicate-selectors */ +/* stylelint-disable */ +/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */ +[class^=ant-]::-ms-clear, +[class*= ant-]::-ms-clear, +[class^=ant-] input::-ms-clear, +[class*= ant-] input::-ms-clear, +[class^=ant-] input::-ms-reveal, +[class*= ant-] input::-ms-reveal { + display: none; +} +/* stylelint-disable property-no-vendor-prefix, at-rule-no-vendor-prefix */ +html, +body { + width: 100%; + height: 100%; +} +input::-ms-clear, +input::-ms-reveal { + display: none; +} +*, +*::before, +*::after { + box-sizing: border-box; +} +html { + font-family: sans-serif; + line-height: 1.15; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + -ms-overflow-style: scrollbar; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} +@-ms-viewport { + width: device-width; +} +body { + margin: 0; + color: rgba(0, 0, 0, 0.85); + font-size: 14px; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; + font-variant: tabular-nums; + line-height: 1.5715; + background-color: #fff; + font-feature-settings: 'tnum'; +} +[tabindex='-1']:focus { + outline: none !important; +} +hr { + box-sizing: content-box; + height: 0; + overflow: visible; +} +h1, +h2, +h3, +h4, +h5, +h6 { + margin-top: 0; + margin-bottom: 0.5em; + color: rgba(0, 0, 0, 0.85); + font-weight: 500; +} +p { + margin-top: 0; + margin-bottom: 1em; +} +abbr[title], +abbr[data-original-title] { + text-decoration: underline; + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; + border-bottom: 0; + cursor: help; +} +address { + margin-bottom: 1em; + font-style: normal; + line-height: inherit; +} +input[type='text'], +input[type='password'], +input[type='number'], +textarea { + -webkit-appearance: none; +} +ol, +ul, +dl { + margin-top: 0; + margin-bottom: 1em; +} +ol ol, +ul ul, +ol ul, +ul ol { + margin-bottom: 0; +} +dt { + font-weight: 500; +} +dd { + margin-bottom: 0.5em; + margin-left: 0; +} +blockquote { + margin: 0 0 1em; +} +dfn { + font-style: italic; +} +b, +strong { + font-weight: bolder; +} +small { + font-size: 80%; +} +sub, +sup { + position: relative; + font-size: 75%; + line-height: 0; + vertical-align: baseline; +} +sub { + bottom: -0.25em; +} +sup { + top: -0.5em; +} +a { + color: #1890ff; + text-decoration: none; + background-color: transparent; + outline: none; + cursor: pointer; + transition: color 0.3s; + -webkit-text-decoration-skip: objects; +} +a:hover { + color: #40a9ff; +} +a:active { + color: #096dd9; +} +a:active, +a:hover { + text-decoration: none; + outline: 0; +} +a:focus { + text-decoration: none; + outline: 0; +} +a[disabled] { + color: rgba(0, 0, 0, 0.25); + cursor: not-allowed; +} +pre, +code, +kbd, +samp { + font-size: 1em; + font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; +} +pre { + margin-top: 0; + margin-bottom: 1em; + overflow: auto; +} +figure { + margin: 0 0 1em; +} +img { + vertical-align: middle; + border-style: none; +} +a, +area, +button, +[role='button'], +input:not([type='range']), +label, +select, +summary, +textarea { + touch-action: manipulation; +} +table { + border-collapse: collapse; +} +caption { + padding-top: 0.75em; + padding-bottom: 0.3em; + color: rgba(0, 0, 0, 0.45); + text-align: left; + caption-side: bottom; +} +input, +button, +select, +optgroup, +textarea { + margin: 0; + color: inherit; + font-size: inherit; + font-family: inherit; + line-height: inherit; +} +button, +input { + overflow: visible; +} +button, +select { + text-transform: none; +} +button, +html [type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} +button::-moz-focus-inner, +[type='button']::-moz-focus-inner, +[type='reset']::-moz-focus-inner, +[type='submit']::-moz-focus-inner { + padding: 0; + border-style: none; +} +input[type='radio'], +input[type='checkbox'] { + box-sizing: border-box; + padding: 0; +} +input[type='date'], +input[type='time'], +input[type='datetime-local'], +input[type='month'] { + -webkit-appearance: listbox; +} +textarea { + overflow: auto; + resize: vertical; +} +fieldset { + min-width: 0; + margin: 0; + padding: 0; + border: 0; +} +legend { + display: block; + width: 100%; + max-width: 100%; + margin-bottom: 0.5em; + padding: 0; + color: inherit; + font-size: 1.5em; + line-height: inherit; + white-space: normal; +} +progress { + vertical-align: baseline; +} +[type='number']::-webkit-inner-spin-button, +[type='number']::-webkit-outer-spin-button { + height: auto; +} +[type='search'] { + outline-offset: -2px; + -webkit-appearance: none; +} +[type='search']::-webkit-search-cancel-button, +[type='search']::-webkit-search-decoration { + -webkit-appearance: none; +} +::-webkit-file-upload-button { + font: inherit; + -webkit-appearance: button; +} +output { + display: inline-block; +} +summary { + display: list-item; +} +template { + display: none; +} +[hidden] { + display: none !important; +} +mark { + padding: 0.2em; + background-color: #feffe6; +} +::-moz-selection { + color: #fff; + background: #1890ff; +} +::selection { + color: #fff; + background: #1890ff; +} +.clearfix::before { + display: table; + content: ''; +} +.clearfix::after { + display: table; + clear: both; + content: ''; +} +.anticon { + display: inline-flex; + align-items: center; + color: inherit; + font-style: normal; + line-height: 0; + text-align: center; + text-transform: none; + vertical-align: -0.125em; + text-rendering: optimizelegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +.anticon > * { + line-height: 1; +} +.anticon svg { + display: inline-block; +} +.anticon::before { + display: none; +} +.anticon .anticon-icon { + display: block; +} +.anticon > .anticon { + line-height: 0; + vertical-align: 0; +} +.anticon[tabindex] { + cursor: pointer; +} +.anticon-spin, +.anticon-spin::before { + display: inline-block; + animation: loadingCircle 1s infinite linear; +} +.ant-fade-enter, +.ant-fade-appear { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-fade-leave { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-fade-enter.ant-fade-enter-active, +.ant-fade-appear.ant-fade-appear-active { + animation-name: antFadeIn; + animation-play-state: running; +} +.ant-fade-leave.ant-fade-leave-active { + animation-name: antFadeOut; + animation-play-state: running; + pointer-events: none; +} +.ant-fade-enter, +.ant-fade-appear { + opacity: 0; + animation-timing-function: linear; +} +.ant-fade-leave { + animation-timing-function: linear; +} +@keyframes antFadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@keyframes antFadeOut { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} +.ant-move-up-enter, +.ant-move-up-appear { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-move-up-leave { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-move-up-enter.ant-move-up-enter-active, +.ant-move-up-appear.ant-move-up-appear-active { + animation-name: antMoveUpIn; + animation-play-state: running; +} +.ant-move-up-leave.ant-move-up-leave-active { + animation-name: antMoveUpOut; + animation-play-state: running; + pointer-events: none; +} +.ant-move-up-enter, +.ant-move-up-appear { + opacity: 0; + animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); +} +.ant-move-up-leave { + animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); +} +.ant-move-down-enter, +.ant-move-down-appear { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-move-down-leave { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-move-down-enter.ant-move-down-enter-active, +.ant-move-down-appear.ant-move-down-appear-active { + animation-name: antMoveDownIn; + animation-play-state: running; +} +.ant-move-down-leave.ant-move-down-leave-active { + animation-name: antMoveDownOut; + animation-play-state: running; + pointer-events: none; +} +.ant-move-down-enter, +.ant-move-down-appear { + opacity: 0; + animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); +} +.ant-move-down-leave { + animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); +} +.ant-move-left-enter, +.ant-move-left-appear { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-move-left-leave { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-move-left-enter.ant-move-left-enter-active, +.ant-move-left-appear.ant-move-left-appear-active { + animation-name: antMoveLeftIn; + animation-play-state: running; +} +.ant-move-left-leave.ant-move-left-leave-active { + animation-name: antMoveLeftOut; + animation-play-state: running; + pointer-events: none; +} +.ant-move-left-enter, +.ant-move-left-appear { + opacity: 0; + animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); +} +.ant-move-left-leave { + animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); +} +.ant-move-right-enter, +.ant-move-right-appear { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-move-right-leave { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-move-right-enter.ant-move-right-enter-active, +.ant-move-right-appear.ant-move-right-appear-active { + animation-name: antMoveRightIn; + animation-play-state: running; +} +.ant-move-right-leave.ant-move-right-leave-active { + animation-name: antMoveRightOut; + animation-play-state: running; + pointer-events: none; +} +.ant-move-right-enter, +.ant-move-right-appear { + opacity: 0; + animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); +} +.ant-move-right-leave { + animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); +} +@keyframes antMoveDownIn { + 0% { + transform: translateY(100%); + transform-origin: 0 0; + opacity: 0; + } + 100% { + transform: translateY(0%); + transform-origin: 0 0; + opacity: 1; + } +} +@keyframes antMoveDownOut { + 0% { + transform: translateY(0%); + transform-origin: 0 0; + opacity: 1; + } + 100% { + transform: translateY(100%); + transform-origin: 0 0; + opacity: 0; + } +} +@keyframes antMoveLeftIn { + 0% { + transform: translateX(-100%); + transform-origin: 0 0; + opacity: 0; + } + 100% { + transform: translateX(0%); + transform-origin: 0 0; + opacity: 1; + } +} +@keyframes antMoveLeftOut { + 0% { + transform: translateX(0%); + transform-origin: 0 0; + opacity: 1; + } + 100% { + transform: translateX(-100%); + transform-origin: 0 0; + opacity: 0; + } +} +@keyframes antMoveRightIn { + 0% { + transform: translateX(100%); + transform-origin: 0 0; + opacity: 0; + } + 100% { + transform: translateX(0%); + transform-origin: 0 0; + opacity: 1; + } +} +@keyframes antMoveRightOut { + 0% { + transform: translateX(0%); + transform-origin: 0 0; + opacity: 1; + } + 100% { + transform: translateX(100%); + transform-origin: 0 0; + opacity: 0; + } +} +@keyframes antMoveUpIn { + 0% { + transform: translateY(-100%); + transform-origin: 0 0; + opacity: 0; + } + 100% { + transform: translateY(0%); + transform-origin: 0 0; + opacity: 1; + } +} +@keyframes antMoveUpOut { + 0% { + transform: translateY(0%); + transform-origin: 0 0; + opacity: 1; + } + 100% { + transform: translateY(-100%); + transform-origin: 0 0; + opacity: 0; + } +} +@keyframes loadingCircle { + 100% { + transform: rotate(360deg); + } +} +[ant-click-animating='true'], +[ant-click-animating-without-extra-node='true'] { + position: relative; +} +html { + --antd-wave-shadow-color: #1890ff; + --scroll-bar: 0; +} +[ant-click-animating-without-extra-node='true']::after, +.ant-click-animating-node { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: block; + border-radius: inherit; + box-shadow: 0 0 0 0 #1890ff; + box-shadow: 0 0 0 0 var(--antd-wave-shadow-color); + opacity: 0.2; + animation: fadeEffect 2s cubic-bezier(0.08, 0.82, 0.17, 1), waveEffect 0.4s cubic-bezier(0.08, 0.82, 0.17, 1); + animation-fill-mode: forwards; + content: ''; + pointer-events: none; +} +@keyframes waveEffect { + 100% { + box-shadow: 0 0 0 #1890ff; + box-shadow: 0 0 0 6px var(--antd-wave-shadow-color); + } +} +@keyframes fadeEffect { + 100% { + opacity: 0; + } +} +.ant-slide-up-enter, +.ant-slide-up-appear { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-slide-up-leave { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-slide-up-enter.ant-slide-up-enter-active, +.ant-slide-up-appear.ant-slide-up-appear-active { + animation-name: antSlideUpIn; + animation-play-state: running; +} +.ant-slide-up-leave.ant-slide-up-leave-active { + animation-name: antSlideUpOut; + animation-play-state: running; + pointer-events: none; +} +.ant-slide-up-enter, +.ant-slide-up-appear { + transform: scale(0); + transform-origin: 0% 0%; + opacity: 0; + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); +} +.ant-slide-up-leave { + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); +} +.ant-slide-down-enter, +.ant-slide-down-appear { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-slide-down-leave { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-slide-down-enter.ant-slide-down-enter-active, +.ant-slide-down-appear.ant-slide-down-appear-active { + animation-name: antSlideDownIn; + animation-play-state: running; +} +.ant-slide-down-leave.ant-slide-down-leave-active { + animation-name: antSlideDownOut; + animation-play-state: running; + pointer-events: none; +} +.ant-slide-down-enter, +.ant-slide-down-appear { + transform: scale(0); + transform-origin: 0% 0%; + opacity: 0; + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); +} +.ant-slide-down-leave { + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); +} +.ant-slide-left-enter, +.ant-slide-left-appear { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-slide-left-leave { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-slide-left-enter.ant-slide-left-enter-active, +.ant-slide-left-appear.ant-slide-left-appear-active { + animation-name: antSlideLeftIn; + animation-play-state: running; +} +.ant-slide-left-leave.ant-slide-left-leave-active { + animation-name: antSlideLeftOut; + animation-play-state: running; + pointer-events: none; +} +.ant-slide-left-enter, +.ant-slide-left-appear { + transform: scale(0); + transform-origin: 0% 0%; + opacity: 0; + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); +} +.ant-slide-left-leave { + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); +} +.ant-slide-right-enter, +.ant-slide-right-appear { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-slide-right-leave { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-slide-right-enter.ant-slide-right-enter-active, +.ant-slide-right-appear.ant-slide-right-appear-active { + animation-name: antSlideRightIn; + animation-play-state: running; +} +.ant-slide-right-leave.ant-slide-right-leave-active { + animation-name: antSlideRightOut; + animation-play-state: running; + pointer-events: none; +} +.ant-slide-right-enter, +.ant-slide-right-appear { + transform: scale(0); + transform-origin: 0% 0%; + opacity: 0; + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); +} +.ant-slide-right-leave { + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); +} +@keyframes antSlideUpIn { + 0% { + transform: scaleY(0.8); + transform-origin: 0% 0%; + opacity: 0; + } + 100% { + transform: scaleY(1); + transform-origin: 0% 0%; + opacity: 1; + } +} +@keyframes antSlideUpOut { + 0% { + transform: scaleY(1); + transform-origin: 0% 0%; + opacity: 1; + } + 100% { + transform: scaleY(0.8); + transform-origin: 0% 0%; + opacity: 0; + } +} +@keyframes antSlideDownIn { + 0% { + transform: scaleY(0.8); + transform-origin: 100% 100%; + opacity: 0; + } + 100% { + transform: scaleY(1); + transform-origin: 100% 100%; + opacity: 1; + } +} +@keyframes antSlideDownOut { + 0% { + transform: scaleY(1); + transform-origin: 100% 100%; + opacity: 1; + } + 100% { + transform: scaleY(0.8); + transform-origin: 100% 100%; + opacity: 0; + } +} +@keyframes antSlideLeftIn { + 0% { + transform: scaleX(0.8); + transform-origin: 0% 0%; + opacity: 0; + } + 100% { + transform: scaleX(1); + transform-origin: 0% 0%; + opacity: 1; + } +} +@keyframes antSlideLeftOut { + 0% { + transform: scaleX(1); + transform-origin: 0% 0%; + opacity: 1; + } + 100% { + transform: scaleX(0.8); + transform-origin: 0% 0%; + opacity: 0; + } +} +@keyframes antSlideRightIn { + 0% { + transform: scaleX(0.8); + transform-origin: 100% 0%; + opacity: 0; + } + 100% { + transform: scaleX(1); + transform-origin: 100% 0%; + opacity: 1; + } +} +@keyframes antSlideRightOut { + 0% { + transform: scaleX(1); + transform-origin: 100% 0%; + opacity: 1; + } + 100% { + transform: scaleX(0.8); + transform-origin: 100% 0%; + opacity: 0; + } +} +.ant-zoom-enter, +.ant-zoom-appear { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-zoom-leave { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-zoom-enter.ant-zoom-enter-active, +.ant-zoom-appear.ant-zoom-appear-active { + animation-name: antZoomIn; + animation-play-state: running; +} +.ant-zoom-leave.ant-zoom-leave-active { + animation-name: antZoomOut; + animation-play-state: running; + pointer-events: none; +} +.ant-zoom-enter, +.ant-zoom-appear { + transform: scale(0); + opacity: 0; + animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); +} +.ant-zoom-enter-prepare, +.ant-zoom-appear-prepare { + transform: none; +} +.ant-zoom-leave { + animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); +} +.ant-zoom-big-enter, +.ant-zoom-big-appear { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-zoom-big-leave { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-zoom-big-enter.ant-zoom-big-enter-active, +.ant-zoom-big-appear.ant-zoom-big-appear-active { + animation-name: antZoomBigIn; + animation-play-state: running; +} +.ant-zoom-big-leave.ant-zoom-big-leave-active { + animation-name: antZoomBigOut; + animation-play-state: running; + pointer-events: none; +} +.ant-zoom-big-enter, +.ant-zoom-big-appear { + transform: scale(0); + opacity: 0; + animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); +} +.ant-zoom-big-enter-prepare, +.ant-zoom-big-appear-prepare { + transform: none; +} +.ant-zoom-big-leave { + animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); +} +.ant-zoom-big-fast-enter, +.ant-zoom-big-fast-appear { + animation-duration: 0.1s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-zoom-big-fast-leave { + animation-duration: 0.1s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-zoom-big-fast-enter.ant-zoom-big-fast-enter-active, +.ant-zoom-big-fast-appear.ant-zoom-big-fast-appear-active { + animation-name: antZoomBigIn; + animation-play-state: running; +} +.ant-zoom-big-fast-leave.ant-zoom-big-fast-leave-active { + animation-name: antZoomBigOut; + animation-play-state: running; + pointer-events: none; +} +.ant-zoom-big-fast-enter, +.ant-zoom-big-fast-appear { + transform: scale(0); + opacity: 0; + animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); +} +.ant-zoom-big-fast-enter-prepare, +.ant-zoom-big-fast-appear-prepare { + transform: none; +} +.ant-zoom-big-fast-leave { + animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); +} +.ant-zoom-up-enter, +.ant-zoom-up-appear { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-zoom-up-leave { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-zoom-up-enter.ant-zoom-up-enter-active, +.ant-zoom-up-appear.ant-zoom-up-appear-active { + animation-name: antZoomUpIn; + animation-play-state: running; +} +.ant-zoom-up-leave.ant-zoom-up-leave-active { + animation-name: antZoomUpOut; + animation-play-state: running; + pointer-events: none; +} +.ant-zoom-up-enter, +.ant-zoom-up-appear { + transform: scale(0); + opacity: 0; + animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); +} +.ant-zoom-up-enter-prepare, +.ant-zoom-up-appear-prepare { + transform: none; +} +.ant-zoom-up-leave { + animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); +} +.ant-zoom-down-enter, +.ant-zoom-down-appear { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-zoom-down-leave { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-zoom-down-enter.ant-zoom-down-enter-active, +.ant-zoom-down-appear.ant-zoom-down-appear-active { + animation-name: antZoomDownIn; + animation-play-state: running; +} +.ant-zoom-down-leave.ant-zoom-down-leave-active { + animation-name: antZoomDownOut; + animation-play-state: running; + pointer-events: none; +} +.ant-zoom-down-enter, +.ant-zoom-down-appear { + transform: scale(0); + opacity: 0; + animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); +} +.ant-zoom-down-enter-prepare, +.ant-zoom-down-appear-prepare { + transform: none; +} +.ant-zoom-down-leave { + animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); +} +.ant-zoom-left-enter, +.ant-zoom-left-appear { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-zoom-left-leave { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-zoom-left-enter.ant-zoom-left-enter-active, +.ant-zoom-left-appear.ant-zoom-left-appear-active { + animation-name: antZoomLeftIn; + animation-play-state: running; +} +.ant-zoom-left-leave.ant-zoom-left-leave-active { + animation-name: antZoomLeftOut; + animation-play-state: running; + pointer-events: none; +} +.ant-zoom-left-enter, +.ant-zoom-left-appear { + transform: scale(0); + opacity: 0; + animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); +} +.ant-zoom-left-enter-prepare, +.ant-zoom-left-appear-prepare { + transform: none; +} +.ant-zoom-left-leave { + animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); +} +.ant-zoom-right-enter, +.ant-zoom-right-appear { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-zoom-right-leave { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; +} +.ant-zoom-right-enter.ant-zoom-right-enter-active, +.ant-zoom-right-appear.ant-zoom-right-appear-active { + animation-name: antZoomRightIn; + animation-play-state: running; +} +.ant-zoom-right-leave.ant-zoom-right-leave-active { + animation-name: antZoomRightOut; + animation-play-state: running; + pointer-events: none; +} +.ant-zoom-right-enter, +.ant-zoom-right-appear { + transform: scale(0); + opacity: 0; + animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); +} +.ant-zoom-right-enter-prepare, +.ant-zoom-right-appear-prepare { + transform: none; +} +.ant-zoom-right-leave { + animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); +} +@keyframes antZoomIn { + 0% { + transform: scale(0.2); + opacity: 0; + } + 100% { + transform: scale(1); + opacity: 1; + } +} +@keyframes antZoomOut { + 0% { + transform: scale(1); + } + 100% { + transform: scale(0.2); + opacity: 0; + } +} +@keyframes antZoomBigIn { + 0% { + transform: scale(0.8); + opacity: 0; + } + 100% { + transform: scale(1); + opacity: 1; + } +} +@keyframes antZoomBigOut { + 0% { + transform: scale(1); + } + 100% { + transform: scale(0.8); + opacity: 0; + } +} +@keyframes antZoomUpIn { + 0% { + transform: scale(0.8); + transform-origin: 50% 0%; + opacity: 0; + } + 100% { + transform: scale(1); + transform-origin: 50% 0%; + } +} +@keyframes antZoomUpOut { + 0% { + transform: scale(1); + transform-origin: 50% 0%; + } + 100% { + transform: scale(0.8); + transform-origin: 50% 0%; + opacity: 0; + } +} +@keyframes antZoomLeftIn { + 0% { + transform: scale(0.8); + transform-origin: 0% 50%; + opacity: 0; + } + 100% { + transform: scale(1); + transform-origin: 0% 50%; + } +} +@keyframes antZoomLeftOut { + 0% { + transform: scale(1); + transform-origin: 0% 50%; + } + 100% { + transform: scale(0.8); + transform-origin: 0% 50%; + opacity: 0; + } +} +@keyframes antZoomRightIn { + 0% { + transform: scale(0.8); + transform-origin: 100% 50%; + opacity: 0; + } + 100% { + transform: scale(1); + transform-origin: 100% 50%; + } +} +@keyframes antZoomRightOut { + 0% { + transform: scale(1); + transform-origin: 100% 50%; + } + 100% { + transform: scale(0.8); + transform-origin: 100% 50%; + opacity: 0; + } +} +@keyframes antZoomDownIn { + 0% { + transform: scale(0.8); + transform-origin: 50% 100%; + opacity: 0; + } + 100% { + transform: scale(1); + transform-origin: 50% 100%; + } +} +@keyframes antZoomDownOut { + 0% { + transform: scale(1); + transform-origin: 50% 100%; + } + 100% { + transform: scale(0.8); + transform-origin: 50% 100%; + opacity: 0; + } +} +.ant-motion-collapse-legacy { + overflow: hidden; +} +.ant-motion-collapse-legacy-active { + transition: height 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !important; +} +.ant-motion-collapse { + overflow: hidden; + transition: height 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !important; +} diff --git a/webapp/packages/supersonic-fe/src/assets/style/index.d.ts b/webapp/packages/supersonic-fe/src/assets/style/index.d.ts new file mode 100644 index 000000000..d74e52ee9 --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/index.d.ts @@ -0,0 +1 @@ +import './index.less'; diff --git a/webapp/packages/supersonic-fe/src/assets/style/index.js b/webapp/packages/supersonic-fe/src/assets/style/index.js new file mode 100644 index 000000000..17665f8be --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/index.js @@ -0,0 +1 @@ +import './index.less'; \ No newline at end of file diff --git a/webapp/packages/supersonic-fe/src/assets/style/index.less b/webapp/packages/supersonic-fe/src/assets/style/index.less new file mode 100644 index 000000000..7882cea66 --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/index.less @@ -0,0 +1,3 @@ +@root-entry-name: default; + +@import './index-pure.less'; \ No newline at end of file diff --git a/webapp/packages/supersonic-fe/src/assets/style/mixins/box.less b/webapp/packages/supersonic-fe/src/assets/style/mixins/box.less new file mode 100644 index 000000000..4bd3ffad7 --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/mixins/box.less @@ -0,0 +1,7 @@ +.box(@position: absolute) { + position: @position; + top: 0; + right: 0; + bottom: 0; + left: 0; +} diff --git a/webapp/packages/supersonic-fe/src/assets/style/mixins/clearfix.less b/webapp/packages/supersonic-fe/src/assets/style/mixins/clearfix.less new file mode 100644 index 000000000..07e89f801 --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/mixins/clearfix.less @@ -0,0 +1,16 @@ +// mixins for clearfix +// ------------------------ +.clearfix() { + // https://github.com/ant-design/ant-design/issues/21301#issuecomment-583955229 + &::before { + display: table; + content: ''; + } + + &::after { + // https://github.com/ant-design/ant-design/issues/21864 + display: table; + clear: both; + content: ''; + } +} diff --git a/webapp/packages/supersonic-fe/src/assets/style/mixins/compact-item-vertical.less b/webapp/packages/supersonic-fe/src/assets/style/mixins/compact-item-vertical.less new file mode 100644 index 000000000..503b1f061 --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/mixins/compact-item-vertical.less @@ -0,0 +1,41 @@ +.compact-item-vertical-border-radius(@prefix-cls) { + &-item:not(&-first-item):not(&-last-item) { + border-radius: 0; + } + + &-item&-first-item:not(&-last-item) { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } + + &-item&-last-item:not(&-first-item) { + border-top-left-radius: 0; + border-top-right-radius: 0; + } +} + +.compact-item-vertical-border(@prefix-cls) { + // border collapse + &-item:not(&-last-item) { + margin-bottom: -@border-width-base; + } + + &-item { + &:hover, + &:focus, + &:active { + z-index: 2; + } + + &[disabled] { + z-index: 0; + } + } +} + +.compact-item-vertical(@prefix-cls) { + &-compact-vertical { + .compact-item-vertical-border(@prefix-cls); + .compact-item-vertical-border-radius(@prefix-cls); + } +} diff --git a/webapp/packages/supersonic-fe/src/assets/style/mixins/compact-item.less b/webapp/packages/supersonic-fe/src/assets/style/mixins/compact-item.less new file mode 100644 index 000000000..cb4902764 --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/mixins/compact-item.less @@ -0,0 +1,133 @@ +.compact-item-border-radius(@prefix-cls, @bordered-item-cls: null) { + & when (@bordered-item-cls = null) { + // border-radius + &-item:not(&-first-item):not(&-last-item).@{prefix-cls} { + border-radius: 0; + } + + &-item.@{prefix-cls}&-first-item:not(&-last-item):not(&-item-rtl) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + &-item.@{prefix-cls}&-last-item:not(&-first-item):not(&-item-rtl) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + // ----------rtl for first item---------- + &-item.@{prefix-cls}&-item-rtl&-first-item:not(&-last-item) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + // ----------rtl for last item---------- + &-item.@{prefix-cls}&-item-rtl&-last-item:not(&-first-item) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + } + + & when (not (@bordered-item-cls = null)) { + // border-radius + &-item:not(&-first-item):not(&-last-item).@{prefix-cls} > .@{bordered-item-cls} { + border-radius: 0; + } + + &-item&-first-item.@{prefix-cls}:not(&-last-item):not(&-item-rtl) > .@{bordered-item-cls} { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + &-item&-last-item.@{prefix-cls}:not(&-first-item):not(&-item-rtl) > .@{bordered-item-cls} { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + // ----------rtl for first item---------- + &-item.@{prefix-cls}&-first-item&-item-rtl:not(&-last-item) > .@{bordered-item-cls} { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + // ----------rtl for last item---------- + &-item.@{prefix-cls}&-last-item&-item-rtl:not(&-first-item) > .@{bordered-item-cls} { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + } +} + +.compact-item-border(@prefix-cls, @bordered-item-cls: null, @special-open-cls) { + & when (@bordered-item-cls = null) { + // border collapse + &-item:not(&-last-item):not(&-item-rtl) { + margin-right: -@border-width-base; + } + + // rtl border collapse + &-item:not(&-last-item)&-item-rtl { + margin-left: -@border-width-base; + } + + &-item { + &:hover, + &:focus, + &:active { + z-index: 2; + } + + // Select has an extra focus className + & when (not (@special-item-cls = null)) { + &.@{special-item-cls} { + z-index: 2; + } + } + + &[disabled] { + z-index: 0; + } + } + } + + & when (not (@bordered-item-cls = null)) { + // border collapse + &-item:not(&-last-item) { + margin-right: -@border-width-base; + + &.@{prefix-cls}-compact-item-rtl { + margin-right: 0; + margin-left: -@border-width-base; + } + } + + &-item { + &:hover, + &:focus, + &:active { + > * { + z-index: 2; + } + } + + // Select has an special focus-item + & when (not (@special-item-cls = null)) { + &.@{special-item-cls} > * { + z-index: 2; + } + } + + &[disabled] > * { + z-index: 0; + } + } + } +} + +.compact-item(@prefix-cls, @bordered-item-cls: null, @special-item-cls: null) { + &-compact { + .compact-item-border(@prefix-cls, @bordered-item-cls, @special-item-cls); + + .compact-item-border-radius(@prefix-cls, @bordered-item-cls); + } +} diff --git a/webapp/packages/supersonic-fe/src/assets/style/mixins/compatibility.less b/webapp/packages/supersonic-fe/src/assets/style/mixins/compatibility.less new file mode 100644 index 000000000..9464a754a --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/mixins/compatibility.less @@ -0,0 +1,13 @@ +// Compatibility for browsers. + +// Placeholder text +.placeholder(@color: @input-placeholder-color) { + &::placeholder { + color: @color; + user-select: none; // https://github.com/ant-design/ant-design/pull/32639 + } + + &:placeholder-shown { + text-overflow: ellipsis; + } +} diff --git a/webapp/packages/supersonic-fe/src/assets/style/mixins/customize.less b/webapp/packages/supersonic-fe/src/assets/style/mixins/customize.less new file mode 100644 index 000000000..6f6fc1864 --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/mixins/customize.less @@ -0,0 +1,181 @@ +// customize dark components background in popover containers(like Modal, Drawer, Card, Popover, Popconfirm, Notification, ...) +// for dark theme +.popover-customize-bg(@containerClass, @background: @popover-background, @prefix: @ant-prefix) + when + (@theme = dark) { + @picker-prefix-cls: ~'@{prefix}-picker'; + @slider-prefix-cls: ~'@{prefix}-slider'; + @anchor-prefix-cls: ~'@{prefix}-anchor'; + @collapse-prefix-cls: ~'@{prefix}-collapse'; + @tab-prefix-cls: ~'@{prefix}-tabs'; + @timeline-prefix-cls: ~'@{prefix}-timeline'; + @tree-prefix-cls: ~'@{prefix}-tree'; + @card-prefix-cls: ~'@{prefix}-card'; + @badge-prefix-cls: ~'@{prefix}-badge'; + @transfer-prefix-cls: ~'@{prefix}-transfer'; + @calendar-prefix-cls: ~'@{prefix}-picker-calendar'; + @calendar-picker-prefix-cls: ~'@{prefix}-picker'; + @table-prefix-cls: ~'@{prefix}-table'; + + @popover-border: @border-width-base @border-style-base @popover-customize-border-color; + + .@{containerClass} { + .@{picker-prefix-cls}-clear, + .@{slider-prefix-cls}-handle, + .@{anchor-prefix-cls}-wrapper, + .@{collapse-prefix-cls}-content, + .@{timeline-prefix-cls}-item-head, + .@{card-prefix-cls} { + background-color: @background; + } + + .@{transfer-prefix-cls} { + &-list { + &-header { + background: @background; + border-bottom: @popover-border; + } + &-content-item:not(.@{transfer-prefix-cls}-list-content-item-disabled):hover { + background-color: @item-hover-bg; + } + } + } + + tr.@{table-prefix-cls}-expanded-row { + &, + &:hover { + > td { + background: #272727; + } + } + } + .@{table-prefix-cls}.@{table-prefix-cls}-small { + thead { + > tr { + > th { + background-color: @background; + border-bottom: @popover-border; + } + } + } + } + .@{table-prefix-cls} { + background-color: @background; + .@{table-prefix-cls}-row-expand-icon { + border: @popover-border; + } + + tfoot { + > tr { + > th, + > td { + border-bottom: @popover-border; + } + } + } + + thead { + > tr { + > th { + background-color: #272727; + border-bottom: @popover-border; + } + } + } + + tbody { + > tr { + > td { + border-bottom: @popover-border; + &.@{table-prefix-cls}-cell-fix-left, + &.@{table-prefix-cls}-cell-fix-right { + background-color: @background; + } + } + &.@{table-prefix-cls}-row:hover { + > td { + background: @table-header-sort-active-bg; + } + } + } + } + &.@{table-prefix-cls}-bordered { + .@{table-prefix-cls}-title { + border: @popover-border; + } + + // ============================= Cell ============================= + thead > tr > th, + tbody > tr > td, + tfoot > tr > th, + tfoot > tr > td { + border-right: @popover-border; + } + + // Fixed right should provides additional border + .@{table-prefix-cls}-cell-fix-right-first::after { + border-right: @popover-border; + } + + // ============================ Header ============================ + table > { + thead { + > tr:not(:last-child) > th { + border-bottom: @border-width-base @border-style-base @border-color-split; + } + } + } + + // =========================== Content ============================ + .@{table-prefix-cls}-container { + border: @popover-border; + } + + // ========================== Expandable ========================== + .@{table-prefix-cls}-expanded-row-fixed { + &::after { + border-right: @popover-border; + } + } + + .@{table-prefix-cls}-footer { + border: @popover-border; + } + } + .@{table-prefix-cls}-filter-trigger-container-open { + background-color: #525252; + } + } + + .@{calendar-prefix-cls}-full { + background-color: @background; + .@{calendar-picker-prefix-cls}-panel { + background-color: @background; + .@{calendar-prefix-cls}-date { + border-top: 2px solid @popover-customize-border-color; + } + } + } + + .@{tab-prefix-cls} { + &.@{tab-prefix-cls}-card .@{tab-prefix-cls}-card-bar .@{tab-prefix-cls}-tab-active { + background-color: @background; + border-bottom: @border-width-base solid @background; + } + } + + .@{badge-prefix-cls} { + &-count { + box-shadow: 0 0 0 1px @background; + } + } + + .@{tree-prefix-cls} { + &-show-line { + .@{tree-prefix-cls}-switcher { + background: @background; + } + } + } + } +} diff --git a/webapp/packages/supersonic-fe/src/assets/style/mixins/iconfont.less b/webapp/packages/supersonic-fe/src/assets/style/mixins/iconfont.less new file mode 100644 index 000000000..aeb4e9672 --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/mixins/iconfont.less @@ -0,0 +1,29 @@ +.iconfont-mixin() { + display: inline-flex; + align-items: center; + color: @icon-color; + font-style: normal; + line-height: 0; + text-align: center; + text-transform: none; + vertical-align: -0.125em; // for SVG icon, see https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4 + text-rendering: optimizelegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + > * { + line-height: 1; + } + + svg { + display: inline-block; + } + + &::before { + display: none; // dont display old icon. + } + + & &-icon { + display: block; + } +} diff --git a/webapp/packages/supersonic-fe/src/assets/style/mixins/index.less b/webapp/packages/supersonic-fe/src/assets/style/mixins/index.less new file mode 100644 index 000000000..5438846d1 --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/mixins/index.less @@ -0,0 +1,16 @@ +// Mixins +// -------------------------------------------------- +@import 'size'; +@import 'compatibility'; +@import 'clearfix'; +@import 'iconfont'; +@import 'typography'; +@import 'customize'; +@import 'box'; +@import 'modal-mask'; +@import 'motion'; +@import 'reset'; +@import 'operation-unit'; +@import 'rounded-arrow'; +@import 'compact-item'; +@import 'compact-item-vertical'; diff --git a/webapp/packages/supersonic-fe/src/assets/style/mixins/modal-mask.less b/webapp/packages/supersonic-fe/src/assets/style/mixins/modal-mask.less new file mode 100644 index 000000000..b406bc1b4 --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/mixins/modal-mask.less @@ -0,0 +1,30 @@ +@import 'box'; + +.modal-mask() { + pointer-events: none; + + &.@{ant-prefix}-zoom-enter, + &.@{ant-prefix}-zoom-appear { + transform: none; // reset scale avoid mousePosition bug + opacity: 0; + animation-duration: @animation-duration-slow; + user-select: none; // https://github.com/ant-design/ant-design/issues/11777 + } + + &-mask { + .box(fixed); + z-index: @zindex-modal-mask; + height: 100%; + background-color: @modal-mask-bg; + + &-hidden { + display: none; + } + } + + &-wrap { + .box(fixed); + overflow: auto; + outline: 0; + } +} diff --git a/webapp/packages/supersonic-fe/src/assets/style/mixins/motion.less b/webapp/packages/supersonic-fe/src/assets/style/mixins/motion.less new file mode 100644 index 000000000..1e1535000 --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/mixins/motion.less @@ -0,0 +1,33 @@ +.motion-common(@duration: @animation-duration-base) { + animation-duration: @duration; + animation-fill-mode: both; +} + +.motion-common-leave(@duration: @animation-duration-base) { + animation-duration: @duration; + animation-fill-mode: both; +} + +.make-motion(@className, @keyframeName, @duration: @animation-duration-base) { + .@{className}-enter, + .@{className}-appear { + .motion-common(@duration); + + animation-play-state: paused; + } + .@{className}-leave { + .motion-common-leave(@duration); + + animation-play-state: paused; + } + .@{className}-enter.@{className}-enter-active, + .@{className}-appear.@{className}-appear-active { + animation-name: ~'@{keyframeName}In'; + animation-play-state: running; + } + .@{className}-leave.@{className}-leave-active { + animation-name: ~'@{keyframeName}Out'; + animation-play-state: running; + pointer-events: none; + } +} diff --git a/webapp/packages/supersonic-fe/src/assets/style/mixins/operation-unit.less b/webapp/packages/supersonic-fe/src/assets/style/mixins/operation-unit.less new file mode 100644 index 000000000..b69517111 --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/mixins/operation-unit.less @@ -0,0 +1,15 @@ +.operation-unit() { + color: @link-color; + outline: none; + cursor: pointer; + transition: color 0.3s; + + &:focus-visible, + &:hover { + color: @link-hover-color; + } + + &:active { + color: @link-active-color; + } +} diff --git a/webapp/packages/supersonic-fe/src/assets/style/mixins/reset.less b/webapp/packages/supersonic-fe/src/assets/style/mixins/reset.less new file mode 100644 index 000000000..905c16e24 --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/mixins/reset.less @@ -0,0 +1,11 @@ +.reset-component() { + box-sizing: border-box; + margin: 0; + padding: 0; + color: @text-color; + font-size: @font-size-base; + font-variant: @font-variant-base; + line-height: @line-height-base; + list-style: none; + font-feature-settings: @font-feature-settings-base; +} diff --git a/webapp/packages/supersonic-fe/src/assets/style/mixins/rounded-arrow.less b/webapp/packages/supersonic-fe/src/assets/style/mixins/rounded-arrow.less new file mode 100644 index 000000000..1c8264336 --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/mixins/rounded-arrow.less @@ -0,0 +1,44 @@ +.roundedArrow(@width, @outer-radius, @bg-color: var(--antd-arrow-background-color)) { + @corner-height: unit(((@outer-radius) * (1 - 1 / sqrt(2)))); + + @width-without-unit: unit(@width); + @outer-radius-without-unit: unit(@outer-radius); + @inner-radius-without-unit: unit(@arrow-border-radius); + + @a-x: @width-without-unit - @corner-height; + @a-y: 2 * @width-without-unit + @corner-height; + @b-x: @a-x + @outer-radius-without-unit * (1 / sqrt(2)); + @b-y: 2 * @width-without-unit; + @c-x: 2 * @width-without-unit - @inner-radius-without-unit; + @c-y: 2 * @width-without-unit; + @d-x: 2 * @width-without-unit; + @d-y: 2 * @width-without-unit - @inner-radius-without-unit; + @e-x: 2 * @width-without-unit; + @e-y: @f-y + @outer-radius-without-unit * (1 / sqrt(2)); + @f-x: 2 * @width-without-unit + @corner-height; + @f-y: @width-without-unit - @corner-height; + @g-x: @f-x - 1; + @g-y: @f-y; + @h-x: @a-x; + @h-y: @a-y - 1; + + border-radius: 0 0 @arrow-border-radius; + pointer-events: none; + + &::before { + position: absolute; + top: -@width; + left: -@width; + width: @width * 3; + height: @width * 3; + background: @bg-color; + // Hack firefox: https://github.com/ant-design/ant-design/pull/33710#issuecomment-1015287825 + background-repeat: no-repeat; + background-position: ceil(-@width + 1px) ceil(-@width + 1px); + content: ''; + clip-path: inset(33% 33%); // For browsers that do not support path() + clip-path: path( + 'M @{a-x} @{a-y} A @{outer-radius-without-unit} @{outer-radius-without-unit} 0 0 1 @{b-x} @{b-y} L @{c-x} @{c-y} A @{inner-radius-without-unit} @{inner-radius-without-unit} 0 0 0 @{d-x} @{d-y} L @{e-x} @{e-y} A @{outer-radius-without-unit} @{outer-radius-without-unit} 0 0 1 @{f-x} @{f-y} L @{g-x} @{g-y} L @{h-x} @{h-y} Z' + ); + } +} diff --git a/webapp/packages/supersonic-fe/src/assets/style/mixins/size.less b/webapp/packages/supersonic-fe/src/assets/style/mixins/size.less new file mode 100644 index 000000000..a8be65089 --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/mixins/size.less @@ -0,0 +1,10 @@ +// Sizing shortcuts + +.size(@width; @height) { + width: @width; + height: @height; +} + +.square(@size) { + .size(@size; @size); +} diff --git a/webapp/packages/supersonic-fe/src/assets/style/mixins/typography.less b/webapp/packages/supersonic-fe/src/assets/style/mixins/typography.less new file mode 100644 index 000000000..71a4d39b0 --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/mixins/typography.less @@ -0,0 +1,58 @@ +// =============== Common =============== +.typography-paragraph() { + margin-bottom: 1em; +} + +.typography-title(@fontSize; @fontWeight; @lineHeight; @headingColor; @headingMarginBottom;) { + margin-bottom: @headingMarginBottom; + color: @headingColor; + font-weight: @fontWeight; + font-size: @fontSize; + line-height: @lineHeight; +} + +.typography-title-1() { + .typography-title( + @heading-1-size, + @typography-title-font-weight, + 1.23, + @heading-color, + @typography-title-margin-bottom + ); +} +.typography-title-2() { + .typography-title( + @heading-2-size, + @typography-title-font-weight, + 1.35, + @heading-color, + @typography-title-margin-bottom + ); +} +.typography-title-3() { + .typography-title( + @heading-3-size, + @typography-title-font-weight, + 1.35, + @heading-color, + @typography-title-margin-bottom + ); +} +.typography-title-4() { + .typography-title( + @heading-4-size, + @typography-title-font-weight, + 1.4, + @heading-color, + @typography-title-margin-bottom + ); +} +.typography-title-5() { + .typography-title( + @heading-5-size, + @typography-title-font-weight, + 1.5, + @heading-color, + @typography-title-margin-bottom + ); +} diff --git a/webapp/packages/supersonic-fe/src/assets/style/themes/compact.less b/webapp/packages/supersonic-fe/src/assets/style/themes/compact.less new file mode 100644 index 000000000..bd0b01de4 --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/themes/compact.less @@ -0,0 +1,295 @@ +@import './default.less'; + +@line-height-base: 1.66667; +@mode: compact; +@font-size-base: 12px; +@font-size-lg: @font-size-base + 2px; + +// default paddings +@default-padding-lg: 24px; // containers +@default-padding-md: 16px; // small containers and buttons +@default-padding-sm: 12px; // Form controls and items +@default-padding-xs: 8px; // small items +@default-padding-xss: 4px; // more small + +// vertical paddings +@padding-lg: 16px; // containers +@padding-md: 8px; // small containers and buttons +@padding-sm: 8px; // Form controls and items +@padding-xs: 4px; // small items +@padding-xss: 0px; // more small + +// vertical padding for all form controls +@control-padding-horizontal: @padding-sm; +@control-padding-horizontal-sm: @default-padding-xs; + +// vertical margins +@margin-lg: 16px; // containers +@margin-md: 8px; // small containers and buttons +@margin-sm: 8px; // Form controls and items +@margin-xs: 4px; // small items +@margin-xss: 0px; // more small + +// height rules +@height-base: 28px; +@height-lg: 32px; +@height-sm: 22px; + +// Button +// --- +@btn-padding-horizontal-base: @default-padding-sm - 1px; +@btn-padding-horizontal-lg: @btn-padding-horizontal-base; +@btn-padding-horizontal-sm: @default-padding-xs - 1px; +@btn-square-only-icon-size-lg: 16px; +@btn-square-only-icon-size: 14px; +@btn-square-only-icon-size-sm: 12px; + +// Breadcrumb +// --- +@breadcrumb-font-size: @font-size-base; +@breadcrumb-icon-font-size: @font-size-base; + +//Dropdown +@dropdown-line-height: 18px; + +// Menu +@menu-item-padding-horizontal: 12px; +@menu-horizontal-line-height: 38px; +@menu-inline-toplevel-item-height: 32px; +@menu-item-height: 32px; +@menu-item-vertical-margin: 0px; +@menu-item-boundary-margin: 0px; +@menu-icon-margin-right: 8px; + +// Checkbox +@checkbox-size: 14px; +@checkbox-group-item-margin-right: 6px; + +// picker +@picker-panel-cell-height: 22px; +@picker-panel-cell-width: 32px; +@picker-text-height: 32px; +@picker-time-panel-cell-height: 24px; +@picker-panel-without-time-cell-height: 48px; + +// Form +// --- +@form-item-margin-bottom: 16px; +@form-vertical-label-padding: 0 0 4px; + +// Rate +// --- +@rate-star-size: 16px; + +// Radio +// --- +@radio-size: 14px; +@radio-wrapper-margin-right: 6px; + +// Switch +// --- +@switch-height: 20px; +@switch-sm-height: 14px; +@switch-min-width: 40px; +@switch-sm-min-width: 24px; +@switch-inner-margin-min: 4px; +@switch-inner-margin-max: 22px; + +// Slider +// --- +@slider-handle-size: 12px; +@slider-handle-margin-top: -4px; + +// Input +// --- +@input-padding-vertical-base: round( + max( + (round(((@input-height-base - @font-size-base * @line-height-base) / 2) * 10) / 10) - + @border-width-base, + 2px + ) +); +@input-padding-horizontal-lg: 11px; + +// PageHeader +// --- +@page-header-padding: 16px; +@page-header-padding-vertical: 8px; +@page-header-heading-title: 16px; +@page-header-heading-sub-title: 12px; +@page-header-tabs-tab-font-size: 14px; + +// Pagination +// --- +@pagination-mini-options-size-changer-top: 1px; +@pagination-item-size-sm: 22px; + +// Cascader +// ---- +@cascader-dropdown-line-height: @dropdown-line-height; + +// Select +// --- +@select-dropdown-height: @height-base; +@select-single-item-height-lg: 32px; +@select-multiple-item-height: @input-height-base - max(@input-padding-vertical-base, 4) * 2; // Normal 24px +@select-multiple-item-height-lg: 24px; +@select-multiple-item-spacing-half: 3px; + +// Tree +// --- +@tree-title-height: 20px; + +// Transfer +// --- +@transfer-item-padding-vertical: 3px; +@transfer-list-search-icon-top: 8px; +@transfer-header-height: 36px; + +// Comment +// --- +@comment-actions-margin-bottom: 0px; +@comment-actions-margin-top: @margin-xs; +@comment-content-detail-p-margin-bottom: 0px; + +// Steps +// --- +@steps-icon-size: 24px; +@steps-icon-custom-size: 20px; +@steps-icon-custom-font-size: 20px; +@steps-icon-custom-top: 2px; +@steps-icon-margin: 2px 8px 2px 0; +@steps-icon-font-size: @font-size-base; +@steps-dot-top: 4px; +@steps-icon-top: 0px; +@steps-small-icon-size: 20px; +@steps-vertical-icon-width: 12px; +@steps-vertical-tail-width: 12px; +@steps-vertical-tail-width-sm: 10px; +// Collapse +// --- +//@collapse-header-padding-extra: 32px; +@collapse-content-padding: @padding-md @padding-lg; + +// List +// --- +@list-item-meta-description-font-size: @font-size-sm; +@list-item-padding-sm: 4px 12px; +@list-item-padding-lg: 12px 16px; + +// Drawer +// --- +@drawer-header-padding: 11px @padding-lg; +@drawer-footer-padding-vertical: @padding-sm; +@drawer-footer-padding-horizontal: @padding-sm; +@drawer-header-close-size: 44px; + +// Modal +// -- +@modal-header-padding-vertical: 11px; +@modal-header-padding: @modal-header-padding-vertical @modal-header-padding-horizontal; +@modal-footer-padding-vertical: @padding-sm; +@modal-header-close-size: @modal-header-title-line-height + 2 * @modal-header-padding-vertical; +@modal-confirm-body-padding: 24px 24px 16px; + +// Message +// --- +@message-notice-content-padding: 8px 16px; + +// popover +// -- +@popover-min-height: 28px; +@popover-padding-horizontal: @default-padding-sm; + +// Card +// --- +@card-head-height: 36px; +@card-head-font-size: @card-head-font-size-sm; +@card-head-padding: 8.5px; +@card-padding-base: 12px; +@card-padding-base-sm: @card-padding-base; +@card-head-height-sm: 30px; +@card-head-padding-sm: 6px; +@card-actions-li-margin: 4px 0; +@card-head-tabs-margin-bottom: -9px; + +// Table +// --- +@table-padding-vertical: 12px; +@table-padding-horizontal: 8px; +@table-padding-vertical-md: 8px; +@table-padding-horizontal-md: 8px; +@table-padding-vertical-sm: 4px; +@table-padding-horizontal-sm: 4px; +@table-selection-column-width: 32px; + +// Statistic +// --- +@statistic-content-font-size: 20px; + +// Alert +// --- +@alert-with-description-no-icon-padding-vertical: 7px; +@alert-with-description-padding-vertical: 11px; +@alert-icon-top: 7px + @font-size-base * (@line-height-base / 2) - (@font-size-base / 2); +@alert-with-description-icon-size: 20px; + +// Skeleton +// --- +@skeleton-paragraph-margin-top: 20px; +@skeleton-paragraph-li-margin-top: 12px; +@skeleton-paragraph-li-height: 14px; +@skeleton-title-height: 14px; +@skeleton-title-paragraph-margin-top: 20px; + +// Descriptions +@descriptions-title-margin-bottom: 8px; +@descriptions-default-padding: 12px @padding-lg; +@descriptions-item-padding-bottom: @padding-xs; + +// Avatar +// --- +@avatar-size-base: 28px; +@avatar-size-lg: 32px; +@avatar-size-sm: 22px; +@avatar-font-size-base: 16px; +@avatar-font-size-lg: 20px; +@avatar-font-size-sm: 12px; + +// Badge +// --- +@badge-height: 18px; + +// Tag +// --- +@tag-line-height: 18px; + +// Notification +// --- +@notification-padding-vertical: 12px; +@notification-padding-horizontal: 16px; + +// Result +// --- +@result-title-font-size: 20px; +@result-icon-font-size: 64px; +@result-extra-margin: 24px 0 0 0; + +// Anchor +// --- +@anchor-link-top: 4px; +@anchor-link-left: 16px; +@anchor-link-padding: @anchor-link-top 0 @anchor-link-top @anchor-link-left; + +// Tabs +// --- +@tabs-card-horizontal-padding: 4px @padding-md; + +// Progress +// --- +@progress-circle-text-font-size: 0.833333em; + +// Image +// --- +@image-size-base: 48px; +@image-font-size-base: 24px; diff --git a/webapp/packages/supersonic-fe/src/assets/style/themes/dark.less b/webapp/packages/supersonic-fe/src/assets/style/themes/dark.less new file mode 100644 index 000000000..4cfda904b --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/themes/dark.less @@ -0,0 +1,457 @@ +@import './default.less'; + +@theme: dark; +// color palettes +@blue-1: mix(color(~`colorPalette('@{blue-base}', 8) `), @component-background, 15%); +@blue-2: mix(color(~`colorPalette('@{blue-base}', 7) `), @component-background, 25%); +@blue-3: mix(@blue-base, @component-background, 30%); +@blue-4: mix(@blue-base, @component-background, 45%); +@blue-5: mix(@blue-base, @component-background, 65%); +@blue-6: mix(@blue-base, @component-background, 85%); +@blue-7: mix(color(~`colorPalette('@{blue-base}', 5) `), @component-background, 90%); +@blue-8: mix(color(~`colorPalette('@{blue-base}', 4) `), @component-background, 95%); +@blue-9: mix(color(~`colorPalette('@{blue-base}', 3) `), @component-background, 97%); +@blue-10: mix(color(~`colorPalette('@{blue-base}', 2) `), @component-background, 98%); + +@purple-1: mix(color(~`colorPalette('@{purple-base}', 8) `), @component-background, 15%); +@purple-2: mix(color(~`colorPalette('@{purple-base}', 7) `), @component-background, 25%); +@purple-3: mix(@purple-base, @component-background, 30%); +@purple-4: mix(@purple-base, @component-background, 45%); +@purple-5: mix(@purple-base, @component-background, 65%); +@purple-6: mix(@purple-base, @component-background, 85%); +@purple-7: mix(color(~`colorPalette('@{purple-base}', 5) `), @component-background, 90%); +@purple-8: mix(color(~`colorPalette('@{purple-base}', 4) `), @component-background, 95%); +@purple-9: mix(color(~`colorPalette('@{purple-base}', 3) `), @component-background, 97%); +@purple-10: mix(color(~`colorPalette('@{purple-base}', 2) `), @component-background, 98%); + +@cyan-1: mix(color(~`colorPalette('@{cyan-base}', 8) `), @component-background, 15%); +@cyan-2: mix(color(~`colorPalette('@{cyan-base}', 7) `), @component-background, 25%); +@cyan-3: mix(@cyan-base, @component-background, 30%); +@cyan-4: mix(@cyan-base, @component-background, 45%); +@cyan-5: mix(@cyan-base, @component-background, 65%); +@cyan-6: mix(@cyan-base, @component-background, 85%); +@cyan-7: mix(color(~`colorPalette('@{cyan-base}', 5) `), @component-background, 90%); +@cyan-8: mix(color(~`colorPalette('@{cyan-base}', 4) `), @component-background, 95%); +@cyan-9: mix(color(~`colorPalette('@{cyan-base}', 3) `), @component-background, 97%); +@cyan-10: mix(color(~`colorPalette('@{cyan-base}', 2) `), @component-background, 98%); + +@green-1: mix(color(~`colorPalette('@{green-base}', 8) `), @component-background, 15%); +@green-2: mix(color(~`colorPalette('@{green-base}', 7) `), @component-background, 25%); +@green-3: mix(@green-base, @component-background, 30%); +@green-4: mix(@green-base, @component-background, 45%); +@green-5: mix(@green-base, @component-background, 65%); +@green-6: mix(@green-base, @component-background, 85%); +@green-7: mix(color(~`colorPalette('@{green-base}', 5) `), @component-background, 90%); +@green-8: mix(color(~`colorPalette('@{green-base}', 4) `), @component-background, 95%); +@green-9: mix(color(~`colorPalette('@{green-base}', 3) `), @component-background, 97%); +@green-10: mix(color(~`colorPalette('@{green-base}', 2) `), @component-background, 98%); + +@magenta-1: mix(color(~`colorPalette('@{magenta-base}', 8) `), @component-background, 15%); +@magenta-2: mix(color(~`colorPalette('@{magenta-base}', 7) `), @component-background, 25%); +@magenta-3: mix(@magenta-base, @component-background, 30%); +@magenta-4: mix(@magenta-base, @component-background, 45%); +@magenta-5: mix(@magenta-base, @component-background, 65%); +@magenta-6: mix(@magenta-base, @component-background, 85%); +@magenta-7: mix(color(~`colorPalette('@{magenta-base}', 5) `), @component-background, 90%); +@magenta-8: mix(color(~`colorPalette('@{magenta-base}', 4) `), @component-background, 95%); +@magenta-9: mix(color(~`colorPalette('@{magenta-base}', 3) `), @component-background, 97%); +@magenta-10: mix(color(~`colorPalette('@{magenta-base}', 2) `), @component-background, 98%); + +@pink-1: mix(color(~`colorPalette('@{pink-base}', 8) `), @component-background, 15%); +@pink-2: mix(color(~`colorPalette('@{pink-base}', 7) `), @component-background, 25%); +@pink-3: mix(@pink-base, @component-background, 30%); +@pink-4: mix(@pink-base, @component-background, 45%); +@pink-5: mix(@pink-base, @component-background, 65%); +@pink-6: mix(@pink-base, @component-background, 85%); +@pink-7: mix(color(~`colorPalette('@{pink-base}', 5) `), @component-background, 90%); +@pink-8: mix(color(~`colorPalette('@{pink-base}', 4) `), @component-background, 95%); +@pink-9: mix(color(~`colorPalette('@{pink-base}', 3) `), @component-background, 97%); +@pink-10: mix(color(~`colorPalette('@{pink-base}', 2) `), @component-background, 98%); + +@red-1: mix(color(~`colorPalette('@{red-base}', 8) `), @component-background, 15%); +@red-2: mix(color(~`colorPalette('@{red-base}', 7) `), @component-background, 25%); +@red-3: mix(@red-base, @component-background, 30%); +@red-4: mix(@red-base, @component-background, 45%); +@red-5: mix(@red-base, @component-background, 65%); +@red-6: mix(@red-base, @component-background, 85%); +@red-7: mix(color(~`colorPalette('@{red-base}', 5) `), @component-background, 90%); +@red-8: mix(color(~`colorPalette('@{red-base}', 4) `), @component-background, 95%); +@red-9: mix(color(~`colorPalette('@{red-base}', 3) `), @component-background, 97%); +@red-10: mix(color(~`colorPalette('@{red-base}', 2) `), @component-background, 98%); + +@orange-1: mix(color(~`colorPalette('@{orange-base}', 8) `), @component-background, 15%); +@orange-2: mix(color(~`colorPalette('@{orange-base}', 7) `), @component-background, 25%); +@orange-3: mix(@orange-base, @component-background, 30%); +@orange-4: mix(@orange-base, @component-background, 45%); +@orange-5: mix(@orange-base, @component-background, 65%); +@orange-6: mix(@orange-base, @component-background, 85%); +@orange-7: mix(color(~`colorPalette('@{orange-base}', 5) `), @component-background, 90%); +@orange-8: mix(color(~`colorPalette('@{orange-base}', 4) `), @component-background, 95%); +@orange-9: mix(color(~`colorPalette('@{orange-base}', 3) `), @component-background, 97%); +@orange-10: mix(color(~`colorPalette('@{orange-base}', 2) `), @component-background, 98%); + +@yellow-1: mix(color(~`colorPalette('@{yellow-base}', 8) `), @component-background, 15%); +@yellow-2: mix(color(~`colorPalette('@{yellow-base}', 7) `), @component-background, 25%); +@yellow-3: mix(@yellow-base, @component-background, 30%); +@yellow-4: mix(@yellow-base, @component-background, 45%); +@yellow-5: mix(@yellow-base, @component-background, 65%); +@yellow-6: mix(@yellow-base, @component-background, 85%); +@yellow-7: mix(color(~`colorPalette('@{yellow-base}', 5) `), @component-background, 90%); +@yellow-8: mix(color(~`colorPalette('@{yellow-base}', 4) `), @component-background, 95%); +@yellow-9: mix(color(~`colorPalette('@{yellow-base}', 3) `), @component-background, 97%); +@yellow-10: mix(color(~`colorPalette('@{yellow-base}', 2) `), @component-background, 98%); + +@volcano-1: mix(color(~`colorPalette('@{volcano-base}', 8) `), @component-background, 15%); +@volcano-2: mix(color(~`colorPalette('@{volcano-base}', 7) `), @component-background, 25%); +@volcano-3: mix(@volcano-base, @component-background, 30%); +@volcano-4: mix(@volcano-base, @component-background, 45%); +@volcano-5: mix(@volcano-base, @component-background, 65%); +@volcano-6: mix(@volcano-base, @component-background, 85%); +@volcano-7: mix(color(~`colorPalette('@{volcano-base}', 5) `), @component-background, 90%); +@volcano-8: mix(color(~`colorPalette('@{volcano-base}', 4) `), @component-background, 95%); +@volcano-9: mix(color(~`colorPalette('@{volcano-base}', 3) `), @component-background, 97%); +@volcano-10: mix(color(~`colorPalette('@{volcano-base}', 2) `), @component-background, 98%); + +@geekblue-1: mix(color(~`colorPalette('@{geekblue-base}', 8) `), @component-background, 15%); +@geekblue-2: mix(color(~`colorPalette('@{geekblue-base}', 7) `), @component-background, 25%); +@geekblue-3: mix(@geekblue-base, @component-background, 30%); +@geekblue-4: mix(@geekblue-base, @component-background, 45%); +@geekblue-5: mix(@geekblue-base, @component-background, 65%); +@geekblue-6: mix(@geekblue-base, @component-background, 85%); +@geekblue-7: mix(color(~`colorPalette('@{geekblue-base}', 5) `), @component-background, 90%); +@geekblue-8: mix(color(~`colorPalette('@{geekblue-base}', 4) `), @component-background, 95%); +@geekblue-9: mix(color(~`colorPalette('@{geekblue-base}', 3) `), @component-background, 97%); +@geekblue-10: mix(color(~`colorPalette('@{geekblue-base}', 2) `), @component-background, 98%); + +@lime-1: mix(color(~`colorPalette('@{lime-base}', 8) `), @component-background, 15%); +@lime-2: mix(color(~`colorPalette('@{lime-base}', 7) `), @component-background, 25%); +@lime-3: mix(@lime-base, @component-background, 30%); +@lime-4: mix(@lime-base, @component-background, 45%); +@lime-5: mix(@lime-base, @component-background, 65%); +@lime-6: mix(@lime-base, @component-background, 85%); +@lime-7: mix(color(~`colorPalette('@{lime-base}', 5) `), @component-background, 90%); +@lime-8: mix(color(~`colorPalette('@{lime-base}', 4) `), @component-background, 95%); +@lime-9: mix(color(~`colorPalette('@{lime-base}', 3) `), @component-background, 97%); +@lime-10: mix(color(~`colorPalette('@{lime-base}', 2) `), @component-background, 98%); + +@gold-1: mix(color(~`colorPalette('@{gold-base}', 8) `), @component-background, 15%); +@gold-2: mix(color(~`colorPalette('@{gold-base}', 7) `), @component-background, 25%); +@gold-3: mix(@gold-base, @component-background, 30%); +@gold-4: mix(@gold-base, @component-background, 45%); +@gold-5: mix(@gold-base, @component-background, 65%); +@gold-6: mix(@gold-base, @component-background, 85%); +@gold-7: mix(color(~`colorPalette('@{gold-base}', 5) `), @component-background, 90%); +@gold-8: mix(color(~`colorPalette('@{gold-base}', 4) `), @component-background, 95%); +@gold-9: mix(color(~`colorPalette('@{gold-base}', 3) `), @component-background, 97%); +@gold-10: mix(color(~`colorPalette('@{gold-base}', 2) `), @component-background, 98%); + +// Color used by default to control hover and active backgrounds and for +// alert info backgrounds. +@primary-1: mix(color(~`colorPalette('@{primary-color}', 8) `), @component-background, 15%); +@primary-2: mix(color(~`colorPalette('@{primary-color}', 7) `), @component-background, 25%); +@primary-3: mix(@primary-color, @component-background, 30%); +@primary-4: mix(@primary-color, @component-background, 45%); +@primary-5: mix(@primary-color, @component-background, 65%); +@primary-6: @primary-color; +@primary-7: mix(color(~`colorPalette('@{primary-color}', 5) `), @component-background, 90%); +@primary-8: mix(color(~`colorPalette('@{primary-color}', 4) `), @component-background, 95%); +@primary-9: mix(color(~`colorPalette('@{primary-color}', 3) `), @component-background, 97%); +@primary-10: mix(color(~`colorPalette('@{primary-color}', 2) `), @component-background, 98%); + +// Layer background +@popover-background: #1f1f1f; +@popover-customize-border-color: #3a3a3a; +@body-background: @black; +@component-background: #141414; + +@text-color: fade(@white, 85%); +@text-color-secondary: fade(@white, 45%); +@text-color-inverse: @white; +@icon-color-hover: fade(@white, 75%); +@heading-color: fade(@white, 85%); + +// The background colors for active and hover states for things like +// list items or table cells. +@item-active-bg: @primary-1; +@item-hover-bg: fade(@white, 8%); + +// Border color +@border-color-base: #434343; // base border outline a component +@border-color-split: #303030; // split border inside a component + +@background-color-light: fade(@white, 4%); // background of header and selected item +@background-color-base: fade(@white, 8%); // Default grey background color + +// Disabled states +@disabled-color: fade(@white, 30%); +@disabled-bg: @background-color-base; +@disabled-color-dark: fade(@white, 30%); + +// Tree +// --- +@tree-bg: transparent; + +// List +// --- +@list-customize-card-bg: transparent; + +// Shadow +// --- +@shadow-color: rgba(0, 0, 0, 0.45); +@shadow-color-inverse: @component-background; +@box-shadow-base: @shadow-2; +@shadow-1-up: 0 -6px 16px -8px rgba(0, 0, 0, 0.32), 0 -9px 28px 0 rgba(0, 0, 0, 0.2), + 0 -12px 48px 16px rgba(0, 0, 0, 0.12); +@shadow-1-down: 0 6px 16px -8px rgba(0, 0, 0, 0.32), 0 9px 28px 0 rgba(0, 0, 0, 0.2), + 0 12px 48px 16px rgba(0, 0, 0, 0.12); +@shadow-1-right: 6px 0 16px -8px rgba(0, 0, 0, 0.32), 9px 0 28px 0 rgba(0, 0, 0, 0.2), + 12px 0 48px 16px rgba(0, 0, 0, 0.12); +@shadow-2: 0 3px 6px -4px rgba(0, 0, 0, 0.48), 0 6px 16px 0 rgba(0, 0, 0, 0.32), + 0 9px 28px 8px rgba(0, 0, 0, 0.2); + +// Buttons +// --- +@btn-shadow: 0 2px 0 rgba(0, 0, 0, 0.015); +@btn-primary-shadow: 0 2px 0 rgba(0, 0, 0, 0.045); +@btn-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12); + +@btn-default-bg: transparent; + +@btn-default-ghost-color: @text-color; +@btn-default-ghost-border: fade(@white, 25%); + +@btn-text-hover-bg: rgba(255, 255, 255, 0.03); + +// Checkbox +// --- +@checkbox-check-bg: transparent; + +// Descriptions +// --- +@descriptions-bg: @background-color-light; + +// Divider +// --- +@divider-color: rgba(255, 255, 255, 12%); + +// Modal +// --- +@modal-header-bg: @popover-background; +@modal-header-border-color-split: @border-color-split; +@modal-content-bg: @popover-background; +@modal-footer-border-color-split: @border-color-split; + +// Radio +// --- +@radio-solid-checked-color: @white; +@radio-dot-disabled-color: fade(@white, 20%); + +// Radio buttons +// --- +@radio-disabled-button-checked-bg: fade(@white, 20%); +@radio-disabled-button-checked-color: @disabled-color; + +// Layout +// --- +@layout-body-background: @body-background; +@layout-header-background: @popover-background; +@layout-trigger-background: #262626; + +// Input +// --- +@input-bg: transparent; +@input-placeholder-color: fade(@white, 30%); +@input-icon-color: fade(@white, 30%); +@input-number-handler-active-bg: @item-hover-bg; +@input-icon-hover-color: fade(@white, 85%); + +// Select +// --- +@select-background: transparent; +@select-dropdown-bg: @popover-background; +@select-clear-background: @component-background; +@select-selection-item-bg: fade(@white, 8); +@select-selection-item-border-color: @border-color-split; +@select-multiple-disabled-background: @component-background; +@select-multiple-item-disabled-color: #595959; +@select-multiple-item-disabled-border-color: @popover-background; + +// Cascader +// --- +@cascader-bg: transparent; +@cascader-menu-bg: @popover-background; +@cascader-menu-border-color-split: @border-color-split; + +// Tooltip +// --- +// Tooltip background color +@tooltip-bg: #434343; + +// Menu +// --- +// dark theme +@menu-dark-inline-submenu-bg: @component-background; +@menu-dark-bg: @popover-background; +@menu-popup-bg: @popover-background; + +// Message +// --- +@message-notice-content-bg: @popover-background; + +// Notification +@notification-bg: @popover-background; + +// LINK +@link-hover-color: @primary-5; +@link-active-color: @primary-7; + +// Table +// -- +@table-header-bg: #1d1d1d; +@table-body-sort-bg: fade(@white, 1%); +@table-row-hover-bg: #262626; +@table-header-cell-split-color: fade(@white, 8%); +@table-header-sort-bg: #262626; +@table-header-filter-active-bg: #434343; +@table-header-sort-active-bg: #303030; +@table-fixed-header-sort-active-bg: #222; +@table-filter-btns-bg: @popover-background; +@table-expanded-row-bg: @table-header-bg; +@table-filter-dropdown-bg: @popover-background; +@table-expand-icon-bg: transparent; + +// Tag +// --- +@info-color-deprecated-bg: @primary-1; +@info-color-deprecated-border: @primary-3; +@success-color-deprecated-bg: @green-1; +@success-color-deprecated-border: @green-3; +@warning-color-deprecated-bg: @orange-1; +@warning-color-deprecated-border: @orange-3; +@error-color-deprecated-bg: @red-1; +@error-color-deprecated-border: @red-3; + +// TimePicker +// --- +@picker-basic-cell-hover-with-range-color: darken(@primary-color, 35%); +@picker-basic-cell-disabled-bg: #303030; +@picker-border-color: @border-color-split; +@picker-bg: transparent; +@picker-date-hover-range-border-color: darken(@primary-color, 20%); + +// Dropdown +// --- +@dropdown-menu-bg: @popover-background; +@dropdown-menu-submenu-disabled-bg: transparent; + +// Steps +// --- +@steps-nav-arrow-color: fade(@white, 20%); +@steps-background: transparent; + +// Avatar +// --- +@avatar-bg: fade(@white, 30%); + +// Progress +// --- +@progress-steps-item-bg: fade(@white, 8%); + +// Calendar +// --- +@calendar-bg: @popover-background; +@calendar-input-bg: @calendar-bg; +@calendar-border-color: transparent; +@calendar-full-bg: @component-background; + +// Badge +// --- +@badge-text-color: @white; + +// Popover +@popover-bg: @popover-background; + +// Drawer +@drawer-bg: @popover-background; + +// Card +// --- +@card-actions-background: @component-background; +@card-skeleton-bg: #303030; +@card-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.64), 0 3px 6px 0 rgba(0, 0, 0, 0.48), + 0 5px 12px 4px rgba(0, 0, 0, 0.36); + +// Transfer +// --- +@transfer-item-hover-bg: #262626; + +// Comment +// --- +@comment-bg: transparent; +@comment-author-time-color: fade(@white, 30%); +@comment-action-hover-color: fade(@white, 65%); + +// Rate +// --- +@rate-star-bg: fade(@white, 12%); + +// Switch +// --- +@switch-bg: @white; + +// Pagination +// --- +@pagination-item-bg: transparent; +@pagination-item-bg-active: transparent; +@pagination-item-link-bg: transparent; +@pagination-item-disabled-bg-active: fade(@white, 25%); +@pagination-item-disabled-color-active: @black; +@pagination-item-input-bg: @pagination-item-bg; + +// PageHeader +// --- +@page-header-back-color: @icon-color; +@page-header-ghost-bg: transparent; + +// Slider +// --- +@slider-rail-background-color: #262626; +@slider-rail-background-color-hover: @border-color-base; +@slider-dot-border-color: @border-color-split; +@slider-dot-border-color-active: @primary-4; + +// Skeleton +// --- +@skeleton-to-color: fade(@white, 16%); + +// Alert +// --- +@alert-success-border-color: @green-3; +@alert-success-bg-color: @green-1; +@alert-success-icon-color: @success-color; +@alert-info-border-color: @primary-3; +@alert-info-bg-color: @primary-1; +@alert-info-icon-color: @info-color; +@alert-warning-border-color: @gold-3; +@alert-warning-bg-color: @gold-1; +@alert-warning-icon-color: @warning-color; +@alert-error-border-color: @red-3; +@alert-error-bg-color: @red-1; +@alert-error-icon-color: @error-color; + +// Timeline +// --- +@timeline-color: @border-color-split; +@timeline-dot-color: @primary-color; + +// Mentions +// --- +@mentions-dropdown-bg: @popover-background; + +// Segmented +// --- +@segmented-bg: fade(@black, 25%); +@segmented-hover-bg: fade(@black, 45%); +@segmented-selected-bg: #333333; +@segmented-label-color: fade(@white, 65%); +@segmented-label-hover-color: fade(@white, 85%); diff --git a/webapp/packages/supersonic-fe/src/assets/style/themes/default.less b/webapp/packages/supersonic-fe/src/assets/style/themes/default.less new file mode 100644 index 000000000..5c5b47f7d --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/themes/default.less @@ -0,0 +1,1084 @@ +/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */ +@import '../color/colors'; + +@theme: default; + +// The prefix to use on all css classes from ant. +@ant-prefix: ant; + +// An override for the html selector for theme prefixes +@html-selector: html; + +// [CSS-VARIABLE-REPLACE-BEGIN: html-variables] +// [CSS-VARIABLE-REPLACE-END: html-variables] + +// -------- Colors ----------- +// >>> Primary +@primary-color: @blue-6; +@primary-color-hover: color(~`colorPalette('@{primary-color}', 5) `); +@primary-color-active: color(~`colorPalette('@{primary-color}', 7) `); +@primary-color-outline: fade(@primary-color, @outline-fade); + +@processing-color: @blue-6; + +// >>> Info +@info-color: @primary-color; +@info-color-deprecated-bg: color(~`colorPalette('@{info-color}', 1) `); +@info-color-deprecated-border: color(~`colorPalette('@{info-color}', 3) `); + +// >>> Success +@success-color: @green-6; +@success-color-hover: color(~`colorPalette('@{success-color}', 5) `); +@success-color-active: color(~`colorPalette('@{success-color}', 7) `); +@success-color-outline: fade(@success-color, @outline-fade); +@success-color-deprecated-bg: color(~`colorPalette('@{success-color}', 1) `); +@success-color-deprecated-border: color(~`colorPalette('@{success-color}', 3) `); + +// >>> Warning +@warning-color: @gold-6; +@warning-color-hover: color(~`colorPalette('@{warning-color}', 5) `); +@warning-color-active: color(~`colorPalette('@{warning-color}', 7) `); +@warning-color-outline: fade(@warning-color, @outline-fade); +@warning-color-deprecated-bg: color(~`colorPalette('@{warning-color}', 1) `); +@warning-color-deprecated-border: color(~`colorPalette('@{warning-color}', 3) `); + +// >>> Error +@error-color: @red-5; +@error-color-hover: color(~`colorPalette('@{error-color}', 5) `); +@error-color-active: color(~`colorPalette('@{error-color}', 7) `); +@error-color-outline: fade(@error-color, @outline-fade); +@error-color-deprecated-bg: color(~`colorPalette('@{error-color}', 1) `); +@error-color-deprecated-border: color(~`colorPalette('@{error-color}', 3) `); + +@highlight-color: @red-5; +@normal-color: #d9d9d9; +@white: #fff; +@black: #000; + +// Color used by default to control hover and active backgrounds and for +// alert info backgrounds. +@primary-1: color(~`colorPalette('@{primary-color}', 1) `); // replace tint(@primary-color, 90%) +@primary-2: color(~`colorPalette('@{primary-color}', 2) `); // replace tint(@primary-color, 80%) +@primary-3: color(~`colorPalette('@{primary-color}', 3) `); // unused +@primary-4: color(~`colorPalette('@{primary-color}', 4) `); // unused +@primary-5: color( + ~`colorPalette('@{primary-color}', 5) ` +); // color used to control the text color in many active and hover states, replace tint(@primary-color, 20%) +@primary-6: @primary-color; // color used to control the text color of active buttons, don't use, use @primary-color +@primary-7: color(~`colorPalette('@{primary-color}', 7) `); // replace shade(@primary-color, 5%) +@primary-8: color(~`colorPalette('@{primary-color}', 8) `); // unused +@primary-9: color(~`colorPalette('@{primary-color}', 9) `); // unused +@primary-10: color(~`colorPalette('@{primary-color}', 10) `); // unused + +// Base Scaffolding Variables +// --- + +// Background color for `` +@body-background: #fff; +// Base background color for most components +@component-background: #fff; +// Popover background color +@popover-background: @component-background; +@popover-customize-border-color: @border-color-split; +@font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, + 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', + 'Noto Color Emoji'; +@code-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; +@text-color: fade(@black, 85%); +@text-color-secondary: fade(@black, 45%); +@text-color-inverse: @white; +@icon-color: inherit; +@icon-color-hover: fade(@black, 75%); +@heading-color: fade(@black, 85%); +@text-color-dark: fade(@white, 85%); +@text-color-secondary-dark: fade(@white, 65%); +@text-selection-bg: @primary-color; +@font-variant-base: tabular-nums; +@font-feature-settings-base: 'tnum'; +@font-size-base: 14px; +@font-size-lg: @font-size-base + 2px; +@font-size-sm: 12px; +@heading-1-size: ceil(@font-size-base * 2.71); +@heading-2-size: ceil(@font-size-base * 2.14); +@heading-3-size: ceil(@font-size-base * 1.71); +@heading-4-size: ceil(@font-size-base * 1.42); +@heading-5-size: ceil(@font-size-base * 1.14); +// https://github.com/ant-design/ant-design/issues/20210 +@line-height-base: 1.5715; +@border-radius-base: 2px; +@border-radius-sm: 2px; + +// control border +@control-border-radius: @border-radius-base; + +// arrow border +@arrow-border-radius: 2px; + +// vertical paddings +@padding-lg: 24px; // containers +@padding-md: 16px; // small containers and buttons +@padding-sm: 12px; // Form controls and items +@padding-xs: 8px; // small items +@padding-xss: 4px; // more small + +// vertical padding for all form controls +@control-padding-horizontal: @padding-sm; +@control-padding-horizontal-sm: @padding-xs; + +// vertical margins +@margin-lg: 24px; // containers +@margin-md: 16px; // small containers and buttons +@margin-sm: 12px; // Form controls and items +@margin-xs: 8px; // small items +@margin-xss: 4px; // more small + +// height rules +@height-base: 32px; +@height-lg: 40px; +@height-sm: 24px; + +// The background colors for active and hover states for things like +// list items or table cells. +@item-active-bg: @primary-1; +@item-hover-bg: #f5f5f5; + +// ICONFONT +@iconfont-css-prefix: anticon; + +// LINK +@link-color: @primary-color; +@link-hover-color: color(~`colorPalette('@{link-color}', 5) `); +@link-active-color: color(~`colorPalette('@{link-color}', 7) `); +@link-decoration: none; +@link-hover-decoration: none; +@link-focus-decoration: none; +@link-focus-outline: 0; + +// Animation +@ease-base-out: cubic-bezier(0.7, 0.3, 0.1, 1); +@ease-base-in: cubic-bezier(0.9, 0, 0.3, 0.7); +@ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); +@ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19); +@ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1); +@ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46); +@ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6); +@ease-in-out-back: cubic-bezier(0.71, -0.46, 0.29, 1.46); +@ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1); +@ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.34); +@ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86); +@ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1); +@ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); +@ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1); + +// Border color +@border-color-base: hsv(0, 0, 85%); // base border outline a component +@border-color-split: hsv(0, 0, 94%); // split border inside a component +@border-color-inverse: @white; +@border-width-base: 1px; // width of the border for a component +@border-style-base: solid; // style of a components border + +// Outline +@outline-blur-size: 0; +@outline-width: 2px; +@outline-color: @primary-color; // No use anymore +@outline-fade: 20%; + +@background-color-light: hsv(0, 0, 98%); // background of header and selected item +@background-color-base: hsv(0, 0, 96%); // Default grey background color + +// Disabled states +@disabled-color: fade(#000, 25%); +@disabled-bg: @background-color-base; +@disabled-active-bg: tint(@black, 90%); +@disabled-color-dark: fade(#fff, 35%); + +// Shadow +@shadow-color: rgba(0, 0, 0, 0.15); +@shadow-color-inverse: @component-background; +@box-shadow-base: @shadow-2; +@shadow-1-up: 0 -6px 16px -8px rgba(0, 0, 0, 0.08), 0 -9px 28px 0 rgba(0, 0, 0, 0.05), + 0 -12px 48px 16px rgba(0, 0, 0, 0.03); +@shadow-1-down: 0 6px 16px -8px rgba(0, 0, 0, 0.08), 0 9px 28px 0 rgba(0, 0, 0, 0.05), + 0 12px 48px 16px rgba(0, 0, 0, 0.03); +@shadow-1-left: -6px 0 16px -8px rgba(0, 0, 0, 0.08), -9px 0 28px 0 rgba(0, 0, 0, 0.05), + -12px 0 48px 16px rgba(0, 0, 0, 0.03); +@shadow-1-right: 6px 0 16px -8px rgba(0, 0, 0, 0.08), 9px 0 28px 0 rgba(0, 0, 0, 0.05), + 12px 0 48px 16px rgba(0, 0, 0, 0.03); +@shadow-2: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), + 0 9px 28px 8px rgba(0, 0, 0, 0.05); + +// Buttons +@btn-font-weight: 400; +@btn-border-radius-base: @border-radius-base; +@btn-border-radius-sm: @border-radius-base; +@btn-border-width: @border-width-base; +@btn-border-style: @border-style-base; +@btn-shadow: 0 2px 0 rgba(0, 0, 0, 0.015); +@btn-primary-shadow: 0 2px 0 rgba(0, 0, 0, 0.045); +@btn-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12); + +@btn-primary-color: #fff; +@btn-primary-bg: @primary-color; + +@btn-default-color: @text-color; +@btn-default-bg: @component-background; +@btn-default-border: @border-color-base; + +@btn-danger-color: #fff; +@btn-danger-bg: @error-color; +@btn-danger-border: @error-color; + +@btn-disable-color: @disabled-color; +@btn-disable-bg: @disabled-bg; +@btn-disable-border: @border-color-base; + +@btn-default-ghost-color: @component-background; +@btn-default-ghost-bg: transparent; +@btn-default-ghost-border: @component-background; + +@btn-font-size-lg: @font-size-lg; +@btn-font-size-sm: @font-size-base; +@btn-padding-horizontal-base: @padding-md - 1px; +@btn-padding-horizontal-lg: @btn-padding-horizontal-base; +@btn-padding-horizontal-sm: @padding-xs - 1px; + +@btn-height-base: @height-base; +@btn-height-lg: @height-lg; +@btn-height-sm: @height-sm; + +@btn-line-height: @line-height-base; + +@btn-circle-size: @btn-height-base; +@btn-circle-size-lg: @btn-height-lg; +@btn-circle-size-sm: @btn-height-sm; + +@btn-square-size: @btn-height-base; +@btn-square-size-lg: @btn-height-lg; +@btn-square-size-sm: @btn-height-sm; +@btn-square-only-icon-size: @font-size-base + 2px; +@btn-square-only-icon-size-sm: @font-size-base; +@btn-square-only-icon-size-lg: @btn-font-size-lg + 2px; + +@btn-group-border: @primary-5; + +@btn-link-hover-bg: transparent; +@btn-text-hover-bg: rgba(0, 0, 0, 0.018); + +// Checkbox +@checkbox-size: 16px; +@checkbox-color: @primary-color; +@checkbox-check-color: #fff; +@checkbox-check-bg: @checkbox-check-color; +@checkbox-border-width: @border-width-base; +@checkbox-border-radius: @border-radius-sm; +@checkbox-group-item-margin-right: 8px; + +// Descriptions +@descriptions-bg: #fafafa; +@descriptions-title-margin-bottom: 20px; +@descriptions-default-padding: @padding-md @padding-lg; +@descriptions-middle-padding: @padding-sm @padding-lg; +@descriptions-small-padding: @padding-xs @padding-md; +@descriptions-item-padding-bottom: @padding-md; +@descriptions-item-trailing-colon: true; +@descriptions-item-label-colon-margin-right: 8px; +@descriptions-item-label-colon-margin-left: 2px; +@descriptions-extra-color: @text-color; + +// Divider +@divider-text-padding: 1em; +@divider-orientation-margin: 5%; +@divider-color: rgba(0, 0, 0, 6%); +@divider-vertical-gutter: 8px; + +// Dropdown +@dropdown-selected-color: @primary-color; +@dropdown-menu-submenu-disabled-bg: @component-background; +@dropdown-selected-bg: @item-active-bg; + +// Empty +@empty-font-size: @font-size-base; + +// Radio +@radio-size: 16px; +@radio-top: 0.2em; +@radio-border-width: 1px; +@radio-dot-size: @radio-size - 8px; +@radio-dot-color: @primary-color; +@radio-dot-disabled-color: fade(@black, 20%); +@radio-solid-checked-color: @component-background; + +// Radio buttons +@radio-button-bg: @btn-default-bg; +@radio-button-checked-bg: @btn-default-bg; +@radio-button-color: @btn-default-color; +@radio-button-hover-color: @primary-5; +@radio-button-active-color: @primary-7; +@radio-button-padding-horizontal: @padding-md - 1px; +@radio-disabled-button-checked-bg: @disabled-active-bg; +@radio-disabled-button-checked-color: @disabled-color; +@radio-wrapper-margin-right: 8px; + +// Media queries breakpoints +// @screen-xs and @screen-xs-min is not used in Grid +// smallest break point is @screen-md +@screen-xs: 480px; +@screen-xs-min: @screen-xs; +// 👆 Extra small screen / phone + +// 👇 Small screen / tablet +@screen-sm: 576px; +@screen-sm-min: @screen-sm; + +// Medium screen / desktop +@screen-md: 768px; +@screen-md-min: @screen-md; + +// Large screen / wide desktop +@screen-lg: 992px; +@screen-lg-min: @screen-lg; + +// Extra large screen / full hd +@screen-xl: 1200px; +@screen-xl-min: @screen-xl; + +// Extra extra large screen / large desktop +@screen-xxl: 1600px; +@screen-xxl-min: @screen-xxl; + +// provide a maximum +@screen-xs-max: (@screen-sm-min - 1px); +@screen-sm-max: (@screen-md-min - 1px); +@screen-md-max: (@screen-lg-min - 1px); +@screen-lg-max: (@screen-xl-min - 1px); +@screen-xl-max: (@screen-xxl-min - 1px); + +// Grid system +@grid-columns: 24; + +// Layout +@layout-body-background: #f0f2f5; +@layout-header-background: #001529; +@layout-header-height: 64px; +@layout-header-padding: 0 50px; +@layout-header-color: @text-color; +@layout-footer-padding: 24px 50px; +@layout-footer-background: @layout-body-background; +@layout-sider-background: @layout-header-background; +@layout-trigger-height: 48px; +@layout-trigger-background: #002140; +@layout-trigger-color: #fff; +@layout-zero-trigger-width: 36px; +@layout-zero-trigger-height: 42px; +// Layout light theme +@layout-sider-background-light: #fff; +@layout-trigger-background-light: #fff; +@layout-trigger-color-light: @text-color; + +// z-index list, order by `z-index` +@zindex-badge: auto; +@zindex-table-fixed: 2; +@zindex-affix: 10; +@zindex-back-top: 10; +@zindex-picker-panel: 10; +@zindex-popup-close: 10; +@zindex-modal: 1000; +@zindex-modal-mask: 1000; +@zindex-message: 1010; +@zindex-notification: 1010; +@zindex-popover: 1030; +@zindex-dropdown: 1050; +@zindex-picker: 1050; +@zindex-popoconfirm: 1060; +@zindex-tooltip: 1070; +@zindex-image: 1080; + +// Animation +@animation-duration-slow: 0.3s; // Modal +@animation-duration-base: 0.2s; +@animation-duration-fast: 0.1s; // Tooltip + +//CollapsePanel +@collapse-panel-border-radius: @border-radius-base; + +//Dropdown +@dropdown-menu-bg: @component-background; +@dropdown-vertical-padding: 5px; +@dropdown-edge-child-vertical-padding: 4px; +@dropdown-font-size: @font-size-base; +@dropdown-line-height: 22px; + +// Form +// --- +@label-required-color: @highlight-color; +@label-color: @heading-color; +@form-warning-input-bg: @input-bg; +@form-item-margin-bottom: 24px; +@form-item-trailing-colon: true; +@form-vertical-label-padding: 0 0 8px; +@form-vertical-label-margin: 0; +@form-item-label-font-size: @font-size-base; +@form-item-label-height: @input-height-base; +@form-item-label-colon-margin-right: 8px; +@form-item-label-colon-margin-left: 2px; +@form-error-input-bg: @input-bg; + +// Input +// --- +@input-height-base: @height-base; +@input-height-lg: @height-lg; +@input-height-sm: @height-sm; +@input-padding-horizontal: @control-padding-horizontal - 1px; +@input-padding-horizontal-base: @input-padding-horizontal; +@input-padding-horizontal-sm: @control-padding-horizontal-sm - 1px; +@input-padding-horizontal-lg: @input-padding-horizontal; +@input-padding-vertical-base: max( + (round(((@input-height-base - @font-size-base * @line-height-base) / 2) * 10) / 10) - + @border-width-base, + 3px +); +@input-padding-vertical-sm: max( + (round(((@input-height-sm - @font-size-base * @line-height-base) / 2) * 10) / 10) - + @border-width-base, + 0 +); +@input-padding-vertical-lg: ( + ceil(((@input-height-lg - @font-size-lg * @line-height-base) / 2) * 10) / 10 + ) - @border-width-base; +@input-placeholder-color: hsv(0, 0, 75%); +@input-color: @text-color; +@input-icon-color: @input-color; +@input-border-color: @border-color-base; +@input-bg: @component-background; +@input-number-hover-border-color: @input-hover-border-color; +@input-number-handler-active-bg: #f4f4f4; +@input-number-handler-hover-bg: @primary-5; +@input-number-handler-bg: @component-background; +@input-number-handler-border-color: @border-color-base; +@input-addon-bg: @background-color-light; +@input-hover-border-color: @primary-5; +@input-disabled-bg: @disabled-bg; +@input-outline-offset: 0 0; +@input-icon-hover-color: fade(@black, 85%); +@input-disabled-color: @disabled-color; + +// Mentions +// --- +@mentions-dropdown-bg: @component-background; +@mentions-dropdown-menu-item-hover-bg: @mentions-dropdown-bg; + +// Select +// --- +@select-border-color: @border-color-base; +@select-item-selected-color: @text-color; +@select-item-selected-font-weight: 600; +@select-dropdown-bg: @component-background; +@select-item-selected-bg: @primary-1; +@select-item-active-bg: @item-hover-bg; +@select-dropdown-vertical-padding: @dropdown-vertical-padding; +@select-dropdown-font-size: @dropdown-font-size; +@select-dropdown-line-height: @dropdown-line-height; +@select-dropdown-height: 32px; +@select-background: @component-background; +@select-clear-background: @select-background; +@select-selection-item-bg: @background-color-base; +@select-selection-item-border-color: @border-color-split; +@select-single-item-height-lg: 40px; +@select-multiple-item-height: @input-height-base - @input-padding-vertical-base * 2; // Normal 24px +@select-multiple-item-height-lg: 32px; +@select-multiple-item-spacing-half: ceil((@input-padding-vertical-base / 2)); +@select-multiple-disabled-background: @input-disabled-bg; +@select-multiple-item-disabled-color: #bfbfbf; +@select-multiple-item-disabled-border-color: @select-border-color; + +// Cascader +// --- +@cascader-bg: @component-background; +@cascader-item-selected-bg: @primary-1; +@cascader-menu-bg: @component-background; +@cascader-menu-border-color-split: @border-color-split; + +// Cascader +// ---- +@cascader-dropdown-vertical-padding: @dropdown-vertical-padding; +@cascader-dropdown-edge-child-vertical-padding: @dropdown-edge-child-vertical-padding; +@cascader-dropdown-font-size: @dropdown-font-size; +@cascader-dropdown-line-height: @dropdown-line-height; + +// Anchor +// --- +@anchor-bg: transparent; +@anchor-border-color: @border-color-split; +@anchor-link-top: 4px; +@anchor-link-left: 16px; +@anchor-link-padding: @anchor-link-top 0 @anchor-link-top @anchor-link-left; + +// Tooltip +// --- +// Tooltip max width +@tooltip-max-width: 250px; +// Tooltip text color +@tooltip-color: #fff; +// Tooltip background color +@tooltip-bg: rgba(0, 0, 0, 0.75); +// Tooltip arrow width +@tooltip-arrow-width: 8px * sqrt(2); +// Tooltip distance with trigger +@tooltip-distance: @tooltip-arrow-width - 1px + 4px; +// Tooltip arrow color +@tooltip-arrow-color: @tooltip-bg; +@tooltip-border-radius: @border-radius-base; + +// Popover +// --- +// Popover body background color +@popover-bg: @component-background; +// Popover text color +@popover-color: @text-color; +// Popover maximum width +@popover-min-width: 177px; +@popover-min-height: 32px; +// Popover arrow width +@popover-arrow-width: @tooltip-arrow-width; +// Popover arrow color +@popover-arrow-color: @popover-bg; +// Popover outer arrow width +// Popover outer arrow color +@popover-arrow-outer-color: @popover-bg; +// Popover distance with trigger +@popover-distance: @popover-arrow-width + 4px; +@popover-padding-horizontal: @padding-md; + +// Modal +// -- +@modal-header-padding-vertical: @padding-md; +@modal-header-padding-horizontal: @padding-lg; +@modal-body-padding: @padding-lg; +@modal-header-bg: @component-background; +@modal-header-padding: @modal-header-padding-vertical @modal-header-padding-horizontal; +@modal-header-border-width: @border-width-base; +@modal-header-border-style: @border-style-base; +@modal-header-title-line-height: 22px; +@modal-header-title-font-size: @font-size-lg; +@modal-header-border-color-split: @border-color-split; +@modal-header-close-size: @modal-header-title-line-height + 2 * @modal-header-padding-vertical; +@modal-content-bg: @component-background; +@modal-heading-color: @heading-color; +@modal-close-color: @text-color-secondary; +@modal-footer-bg: transparent; +@modal-footer-border-color-split: @border-color-split; +@modal-footer-border-style: @border-style-base; +@modal-footer-padding-vertical: 10px; +@modal-footer-padding-horizontal: 16px; +@modal-footer-border-width: @border-width-base; +@modal-mask-bg: fade(@black, 45%); +@modal-confirm-body-padding: 32px 32px 24px; +@modal-confirm-title-font-size: @font-size-lg; +@modal-border-radius: @border-radius-base; + +// Progress +// -- +@progress-default-color: @processing-color; +@progress-remaining-color: @background-color-base; +@progress-info-text-color: @progress-text-color; +@progress-radius: 100px; +@progress-steps-item-bg: #f3f3f3; +@progress-text-font-size: 1em; +@progress-text-color: @text-color; // This is for circle text color, should be renamed better +@progress-circle-text-font-size: 1em; +// Menu +// --- +@menu-inline-toplevel-item-height: 40px; +@menu-item-height: 40px; +@menu-item-group-height: @line-height-base; +@menu-collapsed-width: 80px; +@menu-bg: @component-background; +@menu-popup-bg: @component-background; +@menu-item-color: @text-color; +@menu-inline-submenu-bg: @background-color-light; +@menu-highlight-color: @primary-color; +@menu-highlight-danger-color: @error-color; +@menu-item-active-bg: @primary-1; +@menu-item-active-danger-bg: @red-1; +@menu-item-active-border-width: 3px; +@menu-item-group-title-color: @text-color-secondary; +@menu-item-vertical-margin: 4px; +@menu-item-font-size: @font-size-base; +@menu-item-boundary-margin: 8px; +@menu-item-padding-horizontal: 20px; +@menu-item-padding: 0 @menu-item-padding-horizontal; +@menu-horizontal-line-height: 46px; +@menu-icon-margin-right: 10px; +@menu-icon-size: @menu-item-font-size; +@menu-icon-size-lg: @font-size-lg; +@menu-item-group-title-font-size: @menu-item-font-size; + +// dark theme +@menu-dark-color: @text-color-secondary-dark; +@menu-dark-danger-color: @error-color; +@menu-dark-bg: @layout-header-background; +@menu-dark-arrow-color: #fff; +@menu-dark-inline-submenu-bg: #000c17; +@menu-dark-highlight-color: #fff; +@menu-dark-item-active-bg: @primary-color; +@menu-dark-item-active-danger-bg: @error-color; +@menu-dark-selected-item-icon-color: @white; +@menu-dark-selected-item-text-color: @white; +@menu-dark-item-hover-bg: transparent; +// Spin +// --- +@spin-dot-size-sm: 14px; +@spin-dot-size: 20px; +@spin-dot-size-lg: 32px; + +// Table +// -- +@table-bg: @component-background; +@table-header-bg: @background-color-light; +@table-header-color: @heading-color; +@table-header-sort-bg: @background-color-base; +@table-body-sort-bg: #fafafa; +@table-row-hover-bg: @background-color-light; +@table-selected-row-color: inherit; +@table-selected-row-bg: @primary-1; +@table-body-selected-sort-bg: @table-selected-row-bg; +@table-selected-row-hover-bg: darken(@table-selected-row-bg, 2%); +@table-expanded-row-bg: #fbfbfb; +@table-padding-vertical: 16px; +@table-padding-horizontal: 16px; +@table-padding-vertical-md: (@table-padding-vertical * 3 / 4); +@table-padding-horizontal-md: (@table-padding-horizontal / 2); +@table-padding-vertical-sm: (@table-padding-vertical / 2); +@table-padding-horizontal-sm: (@table-padding-horizontal / 2); +@table-border-color: @border-color-split; +@table-border-radius-base: @border-radius-base; +@table-footer-bg: @background-color-light; +@table-footer-color: @heading-color; +@table-header-bg-sm: @table-header-bg; +@table-font-size: @font-size-base; +@table-font-size-md: @table-font-size; +@table-font-size-sm: @table-font-size; +@table-header-cell-split-color: rgba(0, 0, 0, 0.06); +// Sorter +// Legacy: `table-header-sort-active-bg` is used for hover not real active +@table-header-sort-active-bg: rgba(0, 0, 0, 0.04); +@table-fixed-header-sort-active-bg: hsv(0, 0, 96%); + +// Filter +@table-header-filter-active-bg: rgba(0, 0, 0, 0.04); +@table-filter-btns-bg: inherit; +@table-filter-dropdown-bg: @component-background; +@table-expand-icon-bg: @component-background; +@table-selection-column-width: 32px; +// Sticky +@table-sticky-scroll-bar-bg: fade(#000, 35%); +@table-sticky-scroll-bar-radius: 4px; + +// Tag +// -- +@tag-border-radius: @border-radius-base; +@tag-default-bg: @background-color-light; +@tag-default-color: @text-color; +@tag-font-size: @font-size-sm; +@tag-line-height: 20px; + +// TimePicker +// --- +@picker-bg: @component-background; +@picker-basic-cell-hover-color: @item-hover-bg; +@picker-basic-cell-active-with-range-color: @primary-1; +@picker-basic-cell-hover-with-range-color: lighten(@primary-color, 35%); +@picker-basic-cell-disabled-bg: rgba(0, 0, 0, 0.04); +@picker-border-color: @border-color-split; +@picker-date-hover-range-border-color: lighten(@primary-color, 20%); +@picker-date-hover-range-color: @picker-basic-cell-hover-with-range-color; +@picker-time-panel-column-width: 56px; +@picker-time-panel-column-height: 224px; +@picker-time-panel-cell-height: 28px; +@picker-panel-cell-height: 24px; +@picker-panel-cell-width: 36px; +@picker-text-height: 40px; +@picker-panel-without-time-cell-height: 66px; + +// Calendar +// --- +@calendar-bg: @component-background; +@calendar-input-bg: @input-bg; +@calendar-border-color: @border-color-inverse; +@calendar-item-active-bg: @item-active-bg; +@calendar-column-active-bg: fade(@calendar-item-active-bg, 20%); +@calendar-full-bg: @calendar-bg; +@calendar-full-panel-bg: @calendar-full-bg; + +// Carousel +// --- +@carousel-dot-width: 16px; +@carousel-dot-height: 3px; +@carousel-dot-active-width: 24px; + +// Badge +// --- +@badge-height: 20px; +@badge-height-sm: 14px; +@badge-dot-size: 6px; +@badge-font-size: @font-size-sm; +@badge-font-size-sm: @font-size-sm; +@badge-font-weight: normal; +@badge-status-size: 6px; +@badge-text-color: @component-background; +@badge-color: @highlight-color; + +// Rate +// --- +@rate-star-color: @yellow-6; +@rate-star-bg: @border-color-split; +@rate-star-size: 20px; +@rate-star-hover-scale: scale(1.1); + +// Card +// --- +@card-head-color: @heading-color; +@card-head-background: transparent; +@card-head-font-size: @font-size-lg; +@card-head-font-size-sm: @font-size-base; +@card-head-padding: 16px; +@card-head-padding-sm: (@card-head-padding / 2); +@card-head-height: 48px; +@card-head-height-sm: 36px; +@card-inner-head-padding: 12px; +@card-padding-base: 24px; +@card-padding-base-sm: (@card-padding-base / 2); +@card-actions-background: @component-background; +@card-actions-li-margin: 12px 0; +@card-skeleton-bg: #cfd8dc; +@card-background: @component-background; +@card-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), + 0 5px 12px 4px rgba(0, 0, 0, 0.09); +@card-radius: @border-radius-base; +@card-head-tabs-margin-bottom: -17px; +@card-head-extra-color: @text-color; + +// Comment +// --- +@comment-bg: inherit; +@comment-padding-base: @padding-md 0; +@comment-nest-indent: 44px; +@comment-font-size-base: @font-size-base; +@comment-font-size-sm: @font-size-sm; +@comment-author-name-color: @text-color-secondary; +@comment-author-time-color: #ccc; +@comment-action-color: @text-color-secondary; +@comment-action-hover-color: #595959; +@comment-actions-margin-bottom: inherit; +@comment-actions-margin-top: @margin-sm; +@comment-content-detail-p-margin-bottom: inherit; + +// Tabs +// --- +@tabs-card-head-background: @background-color-light; +@tabs-card-height: 40px; +@tabs-card-active-color: @primary-color; +@tabs-card-horizontal-padding: ( + (@tabs-card-height - floor(@font-size-base * @line-height-base)) / 2 + ) - @border-width-base @padding-md; +@tabs-card-horizontal-padding-sm: 6px @padding-md; +@tabs-card-horizontal-padding-lg: 7px @padding-md 6px; +@tabs-title-font-size: @font-size-base; +@tabs-title-font-size-lg: @font-size-lg; +@tabs-title-font-size-sm: @font-size-base; +@tabs-ink-bar-color: @primary-color; +@tabs-bar-margin: 0 0 @margin-md 0; +@tabs-horizontal-gutter: 32px; +@tabs-horizontal-margin: 0 0 0 @tabs-horizontal-gutter; +@tabs-horizontal-margin-rtl: 0 0 0 32px; +@tabs-horizontal-padding: @padding-sm 0; +@tabs-horizontal-padding-lg: @padding-md 0; +@tabs-horizontal-padding-sm: @padding-xs 0; +@tabs-vertical-padding: @padding-xs @padding-lg; +@tabs-vertical-margin: @margin-md 0 0 0; +@tabs-scrolling-size: 32px; +@tabs-highlight-color: @primary-color; +@tabs-hover-color: @primary-5; +@tabs-active-color: @primary-7; +@tabs-card-gutter: 2px; +@tabs-card-tab-active-border-top: 2px solid transparent; + +// BackTop +// --- +@back-top-color: #fff; +@back-top-bg: @text-color-secondary; +@back-top-hover-bg: @text-color; + +// Avatar +// --- +@avatar-size-base: 32px; +@avatar-size-lg: 40px; +@avatar-size-sm: 24px; +@avatar-font-size-base: 18px; +@avatar-font-size-lg: 24px; +@avatar-font-size-sm: 14px; +@avatar-bg: #ccc; +@avatar-color: #fff; +@avatar-border-radius: @border-radius-base; +@avatar-group-overlapping: -8px; +@avatar-group-space: 3px; +@avatar-group-border-color: #fff; + +// Switch +// --- +@switch-height: 22px; +@switch-sm-height: 16px; +@switch-min-width: 44px; +@switch-sm-min-width: 28px; +@switch-disabled-opacity: 0.4; +@switch-color: @primary-color; +@switch-bg: @component-background; +@switch-shadow-color: fade(#00230b, 20%); +@switch-padding: 2px; +@switch-inner-margin-min: ceil(@switch-height * 0.3); +@switch-inner-margin-max: ceil(@switch-height * 1.1); +@switch-sm-inner-margin-min: ceil(@switch-sm-height * 0.3); +@switch-sm-inner-margin-max: ceil(@switch-sm-height * 1.1); + +// Pagination +// --- +@pagination-item-bg: @component-background; +@pagination-item-size: @height-base; +@pagination-item-size-sm: 24px; +@pagination-font-family: @font-family; +@pagination-font-weight-active: 500; +@pagination-item-bg-active: @component-background; +@pagination-item-link-bg: @component-background; +@pagination-item-disabled-color-active: @disabled-color; +@pagination-item-disabled-bg-active: @disabled-active-bg; +@pagination-item-input-bg: @component-background; +@pagination-mini-options-size-changer-top: 0px; + +// PageHeader +// --- +@page-header-padding: @padding-lg; +@page-header-padding-vertical: @padding-md; +@page-header-padding-breadcrumb: @padding-sm; +@page-header-content-padding-vertical: @padding-sm; +@page-header-back-color: #000; +@page-header-ghost-bg: inherit; +@page-header-heading-title: @heading-4-size; +@page-header-heading-sub-title: 14px; +@page-header-tabs-tab-font-size: 16px; + +// Breadcrumb +// --- +@breadcrumb-base-color: @text-color-secondary; +@breadcrumb-last-item-color: @text-color; +@breadcrumb-font-size: @font-size-base; +@breadcrumb-icon-font-size: @font-size-base; +@breadcrumb-link-color: @text-color-secondary; +@breadcrumb-link-color-hover: @text-color; +@breadcrumb-separator-color: @text-color-secondary; +@breadcrumb-separator-margin: 0 @padding-xs; + +// Slider +// --- +@slider-margin: 10px 6px 10px; +@slider-rail-background-color: @background-color-base; +@slider-rail-background-color-hover: #e1e1e1; +@slider-track-background-color: @primary-3; +@slider-track-background-color-hover: @primary-4; +@slider-handle-border-width: 2px; +@slider-handle-background-color: @component-background; +@slider-handle-color: @primary-3; +@slider-handle-color-hover: @primary-4; +@slider-handle-color-focus: tint(@primary-color, 20%); +@slider-handle-color-focus-shadow: fade(@primary-color, 12%); +@slider-handle-color-tooltip-open: @primary-color; +@slider-handle-size: 14px; +@slider-handle-margin-top: -5px; +@slider-handle-margin-left: -5px; +@slider-handle-shadow: 0; +@slider-dot-border-color: @border-color-split; +@slider-dot-border-color-active: tint(@primary-color, 50%); +@slider-disabled-color: @disabled-color; +@slider-disabled-background-color: @component-background; + +// Tree +// --- +@tree-bg: @component-background; +@tree-title-height: 24px; +@tree-child-padding: 18px; +@tree-directory-selected-color: #fff; +@tree-directory-selected-bg: @primary-color; +@tree-node-hover-bg: @item-hover-bg; +@tree-node-selected-bg: @primary-2; + +// Collapse +// --- +@collapse-header-padding: @padding-sm @padding-md; +@collapse-header-padding-extra: 40px; +@collapse-header-bg: @background-color-light; +@collapse-content-padding: @padding-md; +@collapse-content-bg: @component-background; +@collapse-header-arrow-left: 16px; + +// Skeleton +// --- +@skeleton-color: rgba(190, 190, 190, 0.2); +@skeleton-to-color: shade(@skeleton-color, 5%); +@skeleton-paragraph-margin-top: 28px; +@skeleton-paragraph-li-margin-top: @margin-md; +@skeleton-paragraph-li-height: 16px; +@skeleton-title-height: 16px; +@skeleton-title-paragraph-margin-top: @margin-lg; + +// Transfer +// --- +@transfer-header-height: 40px; +@transfer-item-height: @height-base; +@transfer-disabled-bg: @disabled-bg; +@transfer-list-height: 200px; +@transfer-item-hover-bg: @item-hover-bg; +@transfer-item-selected-hover-bg: darken(@item-active-bg, 2%); +@transfer-item-padding-vertical: 6px; +@transfer-list-search-icon-top: 12px; + +// Message +// --- +@message-notice-content-padding: 10px 16px; +@message-notice-content-bg: @component-background; +// Motion +// --- +@wave-animation-width: 6px; + +// Alert +// --- +@alert-success-border-color: ~`colorPalette('@{success-color}', 3) `; +@alert-success-bg-color: ~`colorPalette('@{success-color}', 1) `; +@alert-success-icon-color: @success-color; +@alert-info-border-color: ~`colorPalette('@{info-color}', 3) `; +@alert-info-bg-color: ~`colorPalette('@{info-color}', 1) `; +@alert-info-icon-color: @info-color; +@alert-warning-border-color: ~`colorPalette('@{warning-color}', 3) `; +@alert-warning-bg-color: ~`colorPalette('@{warning-color}', 1) `; +@alert-warning-icon-color: @warning-color; +@alert-error-border-color: ~`colorPalette('@{error-color}', 3) `; +@alert-error-bg-color: ~`colorPalette('@{error-color}', 1) `; +@alert-error-icon-color: @error-color; +@alert-message-color: @heading-color; +@alert-text-color: @text-color; +@alert-close-color: @text-color-secondary; +@alert-close-hover-color: @icon-color-hover; +@alert-padding-vertical: @padding-xs; +@alert-padding-horizontal: @padding-md - 1px; +@alert-no-icon-padding-vertical: @padding-xs; +@alert-with-description-no-icon-padding-vertical: @padding-md - 1px; +@alert-with-description-padding-vertical: @padding-md - 1px; +@alert-with-description-padding: @alert-with-description-padding-vertical 15px + @alert-with-description-no-icon-padding-vertical @alert-with-description-icon-size; +@alert-icon-top: 8px + @font-size-base * (@line-height-base / 2) - (@font-size-base / 2); +@alert-with-description-icon-size: 24px; + +// List +// --- +@list-header-background: transparent; +@list-footer-background: transparent; +@list-empty-text-padding: @padding-md; +@list-item-padding: @padding-sm 0; +@list-item-padding-sm: @padding-xs @padding-md; +@list-item-padding-lg: 16px 24px; +@list-item-meta-margin-bottom: @padding-md; +@list-item-meta-avatar-margin-right: @padding-md; +@list-item-meta-title-margin-bottom: @padding-sm; +@list-customize-card-bg: @component-background; +@list-item-meta-description-font-size: @font-size-base; + +// Statistic +// --- +@statistic-title-font-size: @font-size-base; +@statistic-content-font-size: 24px; +@statistic-unit-font-size: 24px; +@statistic-font-family: @font-family; + +// Drawer +// --- +@drawer-header-padding: @padding-md @padding-lg; +@drawer-body-padding: @padding-lg; +@drawer-bg: @component-background; +@drawer-footer-padding-vertical: @modal-footer-padding-vertical; +@drawer-footer-padding-horizontal: @modal-footer-padding-horizontal; +@drawer-header-close-size: 56px; +@drawer-title-font-size: @font-size-lg; +@drawer-title-line-height: 22px; + +// Timeline +// --- +@timeline-width: 2px; +@timeline-color: @border-color-split; +@timeline-dot-border-width: 2px; +@timeline-dot-color: @primary-color; +@timeline-dot-bg: @component-background; +@timeline-item-padding-bottom: 20px; + +// Typography +// --- +@typography-title-font-weight: 600; +@typography-title-margin-top: 1.2em; +@typography-title-margin-bottom: 0.5em; + +// Upload +// --- +@upload-actions-color: @text-color-secondary; + +// Steps +// --- +@process-tail-color: @border-color-split; +@steps-nav-arrow-color: fade(@black, 25%); +@steps-background: @component-background; +@steps-icon-size: 32px; +@steps-icon-custom-size: @steps-icon-size; +@steps-icon-custom-top: 0px; +@steps-icon-custom-font-size: 24px; +@steps-icon-top: -0.5px; +@steps-icon-font-size: @font-size-lg; +@steps-icon-margin: 0 8px 0 0; +@steps-title-line-height: @height-base; +@steps-small-icon-size: 24px; +@steps-small-icon-margin: 0 8px 0 0; +@steps-dot-size: 8px; +@steps-dot-top: 2px; +@steps-current-dot-size: 10px; +@steps-description-max-width: 140px; +@steps-nav-content-max-width: auto; +@steps-vertical-icon-width: 16px; +@steps-vertical-tail-width: 16px; +@steps-vertical-tail-width-sm: 12px; + +// Notification +// --- +@notification-bg: @component-background; +@notification-padding-vertical: 16px; +@notification-padding-horizontal: 24px; + +// Result +// --- +@result-title-font-size: 24px; +@result-subtitle-font-size: @font-size-base; +@result-icon-font-size: 72px; +@result-extra-margin: 24px 0 0 0; + +// Image +// --- +@image-size-base: 48px; +@image-font-size-base: 24px; +@image-bg: #f5f5f5; +@image-color: #fff; +@image-mask-font-size: 16px; +@image-preview-operation-size: 18px; +@image-preview-operation-color: @text-color-dark; +@image-preview-operation-disabled-color: fade(@image-preview-operation-color, 25%); + +// Segmented +// --- +@segmented-bg: fade(@black, 4%); +@segmented-hover-bg: fade(@black, 6%); +@segmented-selected-bg: @white; +@segmented-label-color: fade(@black, 65%); +@segmented-label-hover-color: #262626; diff --git a/webapp/packages/supersonic-fe/src/assets/style/themes/index.less b/webapp/packages/supersonic-fe/src/assets/style/themes/index.less new file mode 100644 index 000000000..fd29f584c --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/themes/index.less @@ -0,0 +1,7 @@ +// Default using variable as entry to support site variable version +// This will be replaced in webpack bundle +// @root-entry-name: variable; + +// @import './default.less'; +// @import './variable.less'; +@import './@{root-entry-name}.less'; diff --git a/webapp/packages/supersonic-fe/src/assets/style/themes/variable.less b/webapp/packages/supersonic-fe/src/assets/style/themes/variable.less new file mode 100644 index 000000000..3a8e45e52 --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/themes/variable.less @@ -0,0 +1,1139 @@ +/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */ +@import '../color/colors'; + +@theme: variable; + +// The prefix to use on all css classes from ant. +@ant-prefix: ant; + +// An override for the html selector for theme prefixes +@html-selector: html; + +@{html-selector} { + @base-primary: @blue-6; + + // ========= Primary Color ========= + --@{ant-prefix}-primary-color: @base-primary; + --@{ant-prefix}-primary-color-hover: color(~`colorPalette('@{base-primary}', 5) `); + --@{ant-prefix}-primary-color-active: color(~`colorPalette('@{base-primary}', 7) `); + --@{ant-prefix}-primary-color-outline: fade(@base-primary, @outline-fade); + + // Legacy + @legacy-primary-1: color(~`colorPalette('@{base-primary}', 1) `); + + --@{ant-prefix}-primary-1: @legacy-primary-1; + --@{ant-prefix}-primary-2: color(~`colorPalette('@{base-primary}', 2) `); + --@{ant-prefix}-primary-3: color(~`colorPalette('@{base-primary}', 3) `); + --@{ant-prefix}-primary-4: color(~`colorPalette('@{base-primary}', 4) `); + --@{ant-prefix}-primary-5: color(~`colorPalette('@{base-primary}', 5) `); + --@{ant-prefix}-primary-6: @base-primary; + --@{ant-prefix}-primary-7: color(~`colorPalette('@{base-primary}', 7) `); + + // Deprecated + --@{ant-prefix}-primary-color-deprecated-pure: ~''; + --@{ant-prefix}-primary-color-deprecated-l-35: lighten(@base-primary, 35%); + --@{ant-prefix}-primary-color-deprecated-l-20: lighten(@base-primary, 20%); + --@{ant-prefix}-primary-color-deprecated-t-20: tint(@base-primary, 20%); + --@{ant-prefix}-primary-color-deprecated-t-50: tint(@base-primary, 50%); + --@{ant-prefix}-primary-color-deprecated-f-12: fade(@base-primary, 12%); + --@{ant-prefix}-primary-color-active-deprecated-f-30: fade(@legacy-primary-1, 30%); + --@{ant-prefix}-primary-color-active-deprecated-d-02: darken(@legacy-primary-1, 2%); + + // ========= Success Color ========= + --@{ant-prefix}-success-color: @green-6; + --@{ant-prefix}-success-color-hover: color(~`colorPalette('@{green-6}', 5) `); + --@{ant-prefix}-success-color-active: color(~`colorPalette('@{green-6}', 7) `); + --@{ant-prefix}-success-color-outline: fade(@green-6, @outline-fade); + --@{ant-prefix}-success-color-deprecated-bg: ~`colorPalette('@{green-6}', 1) `; + --@{ant-prefix}-success-color-deprecated-border: ~`colorPalette('@{green-6}', 3) `; + + // ========== Error Color ========== + --@{ant-prefix}-error-color: @red-5; + --@{ant-prefix}-error-color-hover: color(~`colorPalette('@{red-5}', 5) `); + --@{ant-prefix}-error-color-active: color(~`colorPalette('@{red-5}', 7) `); + --@{ant-prefix}-error-color-outline: fade(@red-5, @outline-fade); + --@{ant-prefix}-error-color-deprecated-bg: ~`colorPalette('@{red-5}', 1) `; + --@{ant-prefix}-error-color-deprecated-border: ~`colorPalette('@{red-5}', 3) `; + + // ========= Warning Color ========= + --@{ant-prefix}-warning-color: @gold-6; + --@{ant-prefix}-warning-color-hover: color(~`colorPalette('@{gold-6}', 5) `); + --@{ant-prefix}-warning-color-active: color(~`colorPalette('@{gold-6}', 7) `); + --@{ant-prefix}-warning-color-outline: fade(@gold-6, @outline-fade); + --@{ant-prefix}-warning-color-deprecated-bg: ~`colorPalette('@{gold-6}', 1) `; + --@{ant-prefix}-warning-color-deprecated-border: ~`colorPalette('@{gold-6}', 3) `; + + // ========== Info Color =========== + --@{ant-prefix}-info-color: @base-primary; + --@{ant-prefix}-info-color-deprecated-bg: ~`colorPalette('@{base-primary}', 1) `; + --@{ant-prefix}-info-color-deprecated-border: ~`colorPalette('@{base-primary}', 3) `; +} + +// -------- Colors ----------- +// >>> Primary +@primary-color: ~'var(--@{ant-prefix}-primary-color)'; +@primary-color-hover: ~'var(--@{ant-prefix}-primary-color-hover)'; +@primary-color-active: ~'var(--@{ant-prefix}-primary-color-active)'; +@primary-color-outline: ~'var(--@{ant-prefix}-primary-color-outline)'; + +@processing-color: @primary-color; + +// >>> Info +@info-color: ~'var(--@{ant-prefix}-info-color)'; +@info-color-deprecated-bg: ~'var(--@{ant-prefix}-info-color-deprecated-bg)'; +@info-color-deprecated-border: ~'var(--@{ant-prefix}-info-color-deprecated-border)'; + +// >>> Success +@success-color: ~'var(--@{ant-prefix}-success-color)'; +@success-color-hover: ~'var(--@{ant-prefix}-success-color-hover)'; +@success-color-active: ~'var(--@{ant-prefix}-success-color-active)'; +@success-color-outline: ~'var(--@{ant-prefix}-success-color-outline)'; +@success-color-deprecated-bg: ~'var(--@{ant-prefix}-success-color-deprecated-bg)'; +@success-color-deprecated-border: ~'var(--@{ant-prefix}-success-color-deprecated-border)'; + +// >>> Warning +@warning-color: ~'var(--@{ant-prefix}-warning-color)'; +@warning-color-hover: ~'var(--@{ant-prefix}-warning-color-hover)'; +@warning-color-active: ~'var(--@{ant-prefix}-warning-color-active)'; +@warning-color-outline: ~'var(--@{ant-prefix}-warning-color-outline)'; +@warning-color-deprecated-bg: ~'var(--@{ant-prefix}-warning-color-deprecated-bg)'; +@warning-color-deprecated-border: ~'var(--@{ant-prefix}-warning-color-deprecated-border)'; + +// >>> Error +@error-color: ~'var(--@{ant-prefix}-error-color)'; +@error-color-hover: ~'var(--@{ant-prefix}-error-color-hover)'; +@error-color-active: ~'var(--@{ant-prefix}-error-color-active)'; +@error-color-outline: ~'var(--@{ant-prefix}-error-color-outline)'; +@error-color-deprecated-bg: ~'var(--@{ant-prefix}-error-color-deprecated-bg)'; +@error-color-deprecated-border: ~'var(--@{ant-prefix}-error-color-deprecated-border)'; + +@highlight-color: @red-5; +@normal-color: #d9d9d9; +@white: #fff; +@black: #000; + +// Color used by default to control hover and active backgrounds and for +// alert info backgrounds. +@primary-1: ~'var(--@{ant-prefix}-primary-1)'; // replace tint(@primary-color, 90%) +@primary-2: ~'var(--@{ant-prefix}-primary-2)'; // replace tint(@primary-color, 80%) +@primary-3: ~'var(--@{ant-prefix}-primary-3)'; // unused +@primary-4: ~'var(--@{ant-prefix}-primary-4)'; // unused +@primary-5: ~'var(--@{ant-prefix}-primary-5)'; // color used to control the text color in many active and hover states, replace tint(@primary-color, 20%) +@primary-6: ~'var(--@{ant-prefix}-primary-6)'; // color used to control the text color of active buttons, don't use, use @primary-color +@primary-7: ~'var(--@{ant-prefix}-primary-7)'; // replace shade(@primary-color, 5%) +@primary-8: color(~`colorPalette('@{primary-color}', 8) `); // unused +@primary-9: color(~`colorPalette('@{primary-color}', 9) `); // unused +@primary-10: color(~`colorPalette('@{primary-color}', 10) `); // unused + +// Base Scaffolding Variables +// --- + +// Background color for `` +@body-background: #fff; +// Base background color for most components +@component-background: #fff; +// Popover background color +@popover-background: @component-background; +@popover-customize-border-color: @border-color-split; +@font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, + 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', + 'Noto Color Emoji'; +@code-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; +@text-color: fade(@black, 85%); +@text-color-secondary: fade(@black, 45%); +@text-color-inverse: @white; +@icon-color: inherit; +@icon-color-hover: fade(@black, 75%); +@heading-color: fade(@black, 85%); +@text-color-dark: fade(@white, 85%); +@text-color-secondary-dark: fade(@white, 65%); +@text-selection-bg: @primary-color; +@font-variant-base: tabular-nums; +@font-feature-settings-base: 'tnum'; +@font-size-base: 14px; +@font-size-lg: @font-size-base + 2px; +@font-size-sm: 12px; +@heading-1-size: ceil(@font-size-base * 2.71); +@heading-2-size: ceil(@font-size-base * 2.14); +@heading-3-size: ceil(@font-size-base * 1.71); +@heading-4-size: ceil(@font-size-base * 1.42); +@heading-5-size: ceil(@font-size-base * 1.14); +// https://github.com/ant-design/ant-design/issues/20210 +@line-height-base: 1.5715; +@border-radius-base: 2px; +@border-radius-sm: 2px; + +// control border +@control-border-radius: @border-radius-base; + +// arrow border +@arrow-border-radius: @border-radius-sm; + +// vertical paddings +@padding-lg: 24px; // containers +@padding-md: 16px; // small containers and buttons +@padding-sm: 12px; // Form controls and items +@padding-xs: 8px; // small items +@padding-xss: 4px; // more small + +// vertical padding for all form controls +@control-padding-horizontal: @padding-sm; +@control-padding-horizontal-sm: @padding-xs; + +// vertical margins +@margin-lg: 24px; // containers +@margin-md: 16px; // small containers and buttons +@margin-sm: 12px; // Form controls and items +@margin-xs: 8px; // small items +@margin-xss: 4px; // more small + +// height rules +@height-base: 32px; +@height-lg: 40px; +@height-sm: 24px; + +// The background colors for active and hover states for things like +// list items or table cells. +@item-active-bg: @primary-1; +@item-hover-bg: #f5f5f5; + +// ICONFONT +@iconfont-css-prefix: anticon; + +// LINK +@link-color: @primary-color; +@link-hover-color: @primary-color-hover; +@link-active-color: @primary-color-active; +@link-decoration: none; +@link-hover-decoration: none; +@link-focus-decoration: none; +@link-focus-outline: 0; + +// Animation +@ease-base-out: cubic-bezier(0.7, 0.3, 0.1, 1); +@ease-base-in: cubic-bezier(0.9, 0, 0.3, 0.7); +@ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); +@ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19); +@ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1); +@ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46); +@ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6); +@ease-in-out-back: cubic-bezier(0.71, -0.46, 0.29, 1.46); +@ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1); +@ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.34); +@ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86); +@ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1); +@ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); +@ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1); + +// Border color +@border-color-base: hsv(0, 0, 85%); // base border outline a component +@border-color-split: rgba(0, 0, 0, 0.06); // split border inside a component +@border-color-inverse: @white; +@border-width-base: 1px; // width of the border for a component +@border-style-base: solid; // style of a components border + +// Outline +@outline-blur-size: 0; +@outline-width: 2px; +@outline-color: @primary-color; // No use anymore +@outline-fade: 20%; + +@background-color-light: hsv(0, 0, 98%); // background of header and selected item +@background-color-base: hsv(0, 0, 96%); // Default grey background color + +// Disabled states +@disabled-color: fade(#000, 25%); +@disabled-bg: @background-color-base; +@disabled-active-bg: tint(@black, 90%); +@disabled-color-dark: fade(#fff, 35%); + +// Shadow +@shadow-color: rgba(0, 0, 0, 0.15); +@shadow-color-inverse: @component-background; +@box-shadow-base: @shadow-2; +@shadow-1-up: 0 -6px 16px -8px rgba(0, 0, 0, 0.08), 0 -9px 28px 0 rgba(0, 0, 0, 0.05), + 0 -12px 48px 16px rgba(0, 0, 0, 0.03); +@shadow-1-down: 0 6px 16px -8px rgba(0, 0, 0, 0.08), 0 9px 28px 0 rgba(0, 0, 0, 0.05), + 0 12px 48px 16px rgba(0, 0, 0, 0.03); +@shadow-1-left: -6px 0 16px -8px rgba(0, 0, 0, 0.08), -9px 0 28px 0 rgba(0, 0, 0, 0.05), + -12px 0 48px 16px rgba(0, 0, 0, 0.03); +@shadow-1-right: 6px 0 16px -8px rgba(0, 0, 0, 0.08), 9px 0 28px 0 rgba(0, 0, 0, 0.05), + 12px 0 48px 16px rgba(0, 0, 0, 0.03); +@shadow-2: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), + 0 9px 28px 8px rgba(0, 0, 0, 0.05); + +// Buttons +@btn-font-weight: 400; +@btn-border-radius-base: @border-radius-base; +@btn-border-radius-sm: @border-radius-base; +@btn-border-width: @border-width-base; +@btn-border-style: @border-style-base; +@btn-shadow: 0 2px 0 rgba(0, 0, 0, 0.015); +@btn-primary-shadow: 0 2px 0 rgba(0, 0, 0, 0.045); +@btn-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12); + +@btn-primary-color: #fff; +@btn-primary-bg: @primary-color; + +@btn-default-color: @text-color; +@btn-default-bg: @component-background; +@btn-default-border: @border-color-base; + +@btn-danger-color: #fff; +@btn-danger-bg: @error-color; +@btn-danger-border: @error-color; + +@btn-disable-color: @disabled-color; +@btn-disable-bg: @disabled-bg; +@btn-disable-border: @border-color-base; + +@btn-default-ghost-color: @component-background; +@btn-default-ghost-bg: transparent; +@btn-default-ghost-border: @component-background; + +@btn-font-size-lg: @font-size-lg; +@btn-font-size-sm: @font-size-base; +@btn-padding-horizontal-base: @padding-md - 1px; +@btn-padding-horizontal-lg: @btn-padding-horizontal-base; +@btn-padding-horizontal-sm: @padding-xs - 1px; + +@btn-height-base: @height-base; +@btn-height-lg: @height-lg; +@btn-height-sm: @height-sm; + +@btn-line-height: @line-height-base; + +@btn-circle-size: @btn-height-base; +@btn-circle-size-lg: @btn-height-lg; +@btn-circle-size-sm: @btn-height-sm; + +@btn-square-size: @btn-height-base; +@btn-square-size-lg: @btn-height-lg; +@btn-square-size-sm: @btn-height-sm; +@btn-square-only-icon-size: @font-size-base + 2px; +@btn-square-only-icon-size-sm: @font-size-base; +@btn-square-only-icon-size-lg: @btn-font-size-lg + 2px; + +@btn-group-border: @primary-5; + +@btn-link-hover-bg: transparent; +@btn-text-hover-bg: rgba(0, 0, 0, 0.018); + +// Checkbox +@checkbox-size: 16px; +@checkbox-color: @primary-color; +@checkbox-check-color: #fff; +@checkbox-check-bg: @checkbox-check-color; +@checkbox-border-width: @border-width-base; +@checkbox-border-radius: @border-radius-sm; +@checkbox-group-item-margin-right: 8px; + +// Descriptions +@descriptions-bg: #fafafa; +@descriptions-title-margin-bottom: 20px; +@descriptions-default-padding: @padding-md @padding-lg; +@descriptions-middle-padding: @padding-sm @padding-lg; +@descriptions-small-padding: @padding-xs @padding-md; +@descriptions-item-padding-bottom: @padding-md; +@descriptions-item-trailing-colon: true; +@descriptions-item-label-colon-margin-right: 8px; +@descriptions-item-label-colon-margin-left: 2px; +@descriptions-extra-color: @text-color; + +// Divider +@divider-text-padding: 1em; +@divider-orientation-margin: 5%; +@divider-color: rgba(0, 0, 0, 6%); +@divider-vertical-gutter: 8px; + +// Dropdown +@dropdown-selected-color: @primary-color; +@dropdown-menu-submenu-disabled-bg: @component-background; +@dropdown-selected-bg: @item-active-bg; + +// Empty +@empty-font-size: @font-size-base; + +// Radio +@radio-size: 16px; +@radio-top: 0.2em; +@radio-border-width: 1px; +@radio-dot-size: @radio-size - 8px; +@radio-dot-color: @primary-color; +@radio-dot-disabled-color: fade(@black, 20%); +@radio-solid-checked-color: @component-background; + +// Radio buttons +@radio-button-bg: @btn-default-bg; +@radio-button-checked-bg: @btn-default-bg; +@radio-button-color: @btn-default-color; +@radio-button-hover-color: @primary-5; +@radio-button-active-color: @primary-7; +@radio-button-padding-horizontal: @padding-md - 1px; +@radio-disabled-button-checked-bg: @disabled-active-bg; +@radio-disabled-button-checked-color: @disabled-color; +@radio-wrapper-margin-right: 8px; + +// Media queries breakpoints +// @screen-xs and @screen-xs-min is not used in Grid +// smallest break point is @screen-md +@screen-xs: 480px; +@screen-xs-min: @screen-xs; +// 👆 Extra small screen / phone + +// 👇 Small screen / tablet +@screen-sm: 576px; +@screen-sm-min: @screen-sm; + +// Medium screen / desktop +@screen-md: 768px; +@screen-md-min: @screen-md; + +// Large screen / wide desktop +@screen-lg: 992px; +@screen-lg-min: @screen-lg; + +// Extra large screen / full hd +@screen-xl: 1200px; +@screen-xl-min: @screen-xl; + +// Extra extra large screen / large desktop +@screen-xxl: 1600px; +@screen-xxl-min: @screen-xxl; + +// provide a maximum +@screen-xs-max: (@screen-sm-min - 1px); +@screen-sm-max: (@screen-md-min - 1px); +@screen-md-max: (@screen-lg-min - 1px); +@screen-lg-max: (@screen-xl-min - 1px); +@screen-xl-max: (@screen-xxl-min - 1px); + +// Grid system +@grid-columns: 24; + +// Layout +@layout-body-background: #f0f2f5; +@layout-header-background: #001529; +@layout-header-height: 64px; +@layout-header-padding: 0 50px; +@layout-header-color: @text-color; +@layout-footer-padding: 24px 50px; +@layout-footer-background: @layout-body-background; +@layout-sider-background: @layout-header-background; +@layout-trigger-height: 48px; +@layout-trigger-background: #002140; +@layout-trigger-color: #fff; +@layout-zero-trigger-width: 36px; +@layout-zero-trigger-height: 42px; +// Layout light theme +@layout-sider-background-light: #fff; +@layout-trigger-background-light: #fff; +@layout-trigger-color-light: @text-color; + +// z-index list, order by `z-index` +@zindex-badge: auto; +@zindex-table-fixed: 2; +@zindex-affix: 10; +@zindex-back-top: 10; +@zindex-picker-panel: 10; +@zindex-popup-close: 10; +@zindex-modal: 1000; +@zindex-modal-mask: 1000; +@zindex-message: 1010; +@zindex-notification: 1010; +@zindex-popover: 1030; +@zindex-dropdown: 1050; +@zindex-picker: 1050; +@zindex-popoconfirm: 1060; +@zindex-tooltip: 1070; +@zindex-image: 1080; + +// Animation +@animation-duration-slow: 0.3s; // Modal +@animation-duration-base: 0.2s; +@animation-duration-fast: 0.1s; // Tooltip + +//CollapsePanel +@collapse-panel-border-radius: @border-radius-base; + +//Dropdown +@dropdown-menu-bg: @component-background; +@dropdown-vertical-padding: 5px; +@dropdown-edge-child-vertical-padding: 4px; +@dropdown-font-size: @font-size-base; +@dropdown-line-height: 22px; + +// Form +// --- +@label-required-color: @highlight-color; +@label-color: @heading-color; +@form-warning-input-bg: @input-bg; +@form-item-margin-bottom: 24px; +@form-item-trailing-colon: true; +@form-vertical-label-padding: 0 0 8px; +@form-vertical-label-margin: 0; +@form-item-label-font-size: @font-size-base; +@form-item-label-height: @input-height-base; +@form-item-label-colon-margin-right: 8px; +@form-item-label-colon-margin-left: 2px; +@form-error-input-bg: @input-bg; + +// Input +// --- +@input-height-base: @height-base; +@input-height-lg: @height-lg; +@input-height-sm: @height-sm; +@input-padding-horizontal: @control-padding-horizontal - 1px; +@input-padding-horizontal-base: @input-padding-horizontal; +@input-padding-horizontal-sm: @control-padding-horizontal-sm - 1px; +@input-padding-horizontal-lg: @input-padding-horizontal; +@input-padding-vertical-base: max( + (round(((@input-height-base - @font-size-base * @line-height-base) / 2) * 10) / 10) - + @border-width-base, + 3px +); +@input-padding-vertical-sm: max( + (round(((@input-height-sm - @font-size-base * @line-height-base) / 2) * 10) / 10) - + @border-width-base, + 0 +); +@input-padding-vertical-lg: ( + ceil(((@input-height-lg - @font-size-lg * @line-height-base) / 2) * 10) / 10 + ) - @border-width-base; +@input-placeholder-color: hsv(0, 0, 75%); +@input-color: @text-color; +@input-icon-color: @input-color; +@input-border-color: @border-color-base; +@input-bg: @component-background; +@input-number-hover-border-color: @input-hover-border-color; +@input-number-handler-active-bg: #f4f4f4; +@input-number-handler-hover-bg: @primary-5; +@input-number-handler-bg: @component-background; +@input-number-handler-border-color: @border-color-base; +@input-addon-bg: @background-color-light; +@input-hover-border-color: @primary-5; +@input-disabled-bg: @disabled-bg; +@input-outline-offset: 0 0; +@input-icon-hover-color: fade(@black, 85%); +@input-disabled-color: @disabled-color; + +// Mentions +// --- +@mentions-dropdown-bg: @component-background; +@mentions-dropdown-menu-item-hover-bg: @mentions-dropdown-bg; + +// Select +// --- +@select-border-color: @border-color-base; +@select-item-selected-color: @text-color; +@select-item-selected-font-weight: 600; +@select-dropdown-bg: @component-background; +@select-item-selected-bg: @primary-1; +@select-item-active-bg: @item-hover-bg; +@select-dropdown-vertical-padding: @dropdown-vertical-padding; +@select-dropdown-font-size: @dropdown-font-size; +@select-dropdown-line-height: @dropdown-line-height; +@select-dropdown-height: 32px; +@select-background: @component-background; +@select-clear-background: @select-background; +@select-selection-item-bg: @background-color-base; +@select-selection-item-border-color: @border-color-split; +@select-single-item-height-lg: 40px; +@select-multiple-item-height: @input-height-base - @input-padding-vertical-base * 2; // Normal 24px +@select-multiple-item-height-lg: 32px; +@select-multiple-item-spacing-half: ceil((@input-padding-vertical-base / 2)); +@select-multiple-disabled-background: @input-disabled-bg; +@select-multiple-item-disabled-color: #bfbfbf; +@select-multiple-item-disabled-border-color: @select-border-color; + +// Cascader +// --- +@cascader-bg: @component-background; +@cascader-item-selected-bg: @primary-1; +@cascader-menu-bg: @component-background; +@cascader-menu-border-color-split: @border-color-split; + +// Cascader +// ---- +@cascader-dropdown-vertical-padding: @dropdown-vertical-padding; +@cascader-dropdown-edge-child-vertical-padding: @dropdown-edge-child-vertical-padding; +@cascader-dropdown-font-size: @dropdown-font-size; +@cascader-dropdown-line-height: @dropdown-line-height; + +// Anchor +// --- +@anchor-bg: transparent; +@anchor-border-color: @border-color-split; +@anchor-link-top: 4px; +@anchor-link-left: 16px; +@anchor-link-padding: @anchor-link-top 0 @anchor-link-top @anchor-link-left; + +// Tooltip +// --- +// Tooltip max width +@tooltip-max-width: 250px; +// Tooltip text color +@tooltip-color: #fff; +// Tooltip background color +@tooltip-bg: rgba(0, 0, 0, 0.75); +// Tooltip arrow width +@tooltip-arrow-width: 8px * sqrt(2); +// Tooltip distance with trigger +@tooltip-distance: @tooltip-arrow-width - 1px + 4px; +// Tooltip arrow color +@tooltip-arrow-color: @tooltip-bg; +@tooltip-border-radius: @border-radius-base; + +// Popover +// --- +// Popover body background color +@popover-bg: @component-background; +// Popover text color +@popover-color: @text-color; +// Popover maximum width +@popover-min-width: 177px; +@popover-min-height: 32px; +// Popover arrow width +@popover-arrow-width: @tooltip-arrow-width; +// Popover arrow color +@popover-arrow-color: @popover-bg; +// Popover outer arrow width +// Popover outer arrow color +@popover-arrow-outer-color: @popover-bg; +// Popover distance with trigger +@popover-distance: @popover-arrow-width + 4px; +@popover-padding-horizontal: @padding-md; + +// Modal +// -- +@modal-header-padding-vertical: @padding-md; +@modal-header-padding-horizontal: @padding-lg; +@modal-body-padding: @padding-lg; +@modal-header-bg: @component-background; +@modal-header-padding: @modal-header-padding-vertical @modal-header-padding-horizontal; +@modal-header-border-width: @border-width-base; +@modal-header-border-style: @border-style-base; +@modal-header-title-line-height: 22px; +@modal-header-title-font-size: @font-size-lg; +@modal-header-border-color-split: @border-color-split; +@modal-header-close-size: @modal-header-title-line-height + 2 * @modal-header-padding-vertical; +@modal-content-bg: @component-background; +@modal-heading-color: @heading-color; +@modal-close-color: @text-color-secondary; +@modal-footer-bg: transparent; +@modal-footer-border-color-split: @border-color-split; +@modal-footer-border-style: @border-style-base; +@modal-footer-padding-vertical: 10px; +@modal-footer-padding-horizontal: 16px; +@modal-footer-border-width: @border-width-base; +@modal-mask-bg: fade(@black, 45%); +@modal-confirm-body-padding: 32px 32px 24px; +@modal-confirm-title-font-size: @font-size-lg; +@modal-border-radius: @border-radius-base; + +// Progress +// -- +@progress-default-color: @processing-color; +@progress-remaining-color: rgba(0, 0, 0, 0.04); +@progress-info-text-color: @progress-text-color; +@progress-radius: 100px; +@progress-steps-item-bg: #f3f3f3; +@progress-text-font-size: 1em; +@progress-text-color: @text-color; // This is for circle text color, should be renamed better +@progress-circle-text-font-size: 1em; +// Menu +// --- +@menu-inline-toplevel-item-height: 40px; +@menu-item-height: 40px; +@menu-item-group-height: @line-height-base; +@menu-collapsed-width: 80px; +@menu-bg: @component-background; +@menu-popup-bg: @component-background; +@menu-item-color: @text-color; +@menu-inline-submenu-bg: @background-color-light; +@menu-highlight-color: @primary-color; +@menu-highlight-danger-color: @error-color; +@menu-item-active-bg: @primary-1; +@menu-item-active-danger-bg: @red-1; +@menu-item-active-border-width: 3px; +@menu-item-group-title-color: @text-color-secondary; +@menu-item-vertical-margin: 4px; +@menu-item-font-size: @font-size-base; +@menu-item-boundary-margin: 8px; +@menu-item-padding-horizontal: 20px; +@menu-item-padding: 0 @menu-item-padding-horizontal; +@menu-horizontal-line-height: 46px; +@menu-icon-margin-right: 10px; +@menu-icon-size: @menu-item-font-size; +@menu-icon-size-lg: @font-size-lg; +@menu-item-group-title-font-size: @menu-item-font-size; + +// dark theme +@menu-dark-color: @text-color-secondary-dark; +@menu-dark-danger-color: @error-color; +@menu-dark-bg: @layout-header-background; +@menu-dark-arrow-color: #fff; +@menu-dark-inline-submenu-bg: #000c17; +@menu-dark-highlight-color: #fff; +@menu-dark-item-active-bg: @primary-color; +@menu-dark-item-active-danger-bg: @error-color; +@menu-dark-selected-item-icon-color: @white; +@menu-dark-selected-item-text-color: @white; +@menu-dark-item-hover-bg: transparent; +// Spin +// --- +@spin-dot-size-sm: 14px; +@spin-dot-size: 20px; +@spin-dot-size-lg: 32px; + +// Table +// -- +@table-bg: @component-background; +@table-header-bg: @background-color-light; +@table-header-color: @heading-color; +@table-header-sort-bg: @background-color-base; +@table-body-sort-bg: #fafafa; +@table-row-hover-bg: @background-color-light; +@table-selected-row-color: inherit; +@table-selected-row-bg: @primary-1; +@table-body-selected-sort-bg: @table-selected-row-bg; +@table-selected-row-hover-bg: ~'var(--@{ant-prefix}-primary-color-active-deprecated-d-02)'; +@table-expanded-row-bg: #fbfbfb; +@table-padding-vertical: 16px; +@table-padding-horizontal: 16px; +@table-padding-vertical-md: (@table-padding-vertical * 3 / 4); +@table-padding-horizontal-md: (@table-padding-horizontal / 2); +@table-padding-vertical-sm: (@table-padding-vertical / 2); +@table-padding-horizontal-sm: (@table-padding-horizontal / 2); +@table-border-color: @border-color-split; +@table-border-radius-base: @border-radius-base; +@table-footer-bg: @background-color-light; +@table-footer-color: @heading-color; +@table-header-bg-sm: @table-header-bg; +@table-font-size: @font-size-base; +@table-font-size-md: @table-font-size; +@table-font-size-sm: @table-font-size; +@table-header-cell-split-color: rgba(0, 0, 0, 0.06); +// Sorter +// Legacy: `table-header-sort-active-bg` is used for hover not real active +@table-header-sort-active-bg: rgba(0, 0, 0, 0.04); +@table-fixed-header-sort-active-bg: hsv(0, 0, 96%); + +// Filter +@table-header-filter-active-bg: rgba(0, 0, 0, 0.04); +@table-filter-btns-bg: inherit; +@table-filter-dropdown-bg: @component-background; +@table-expand-icon-bg: @component-background; +@table-selection-column-width: 32px; +// Sticky +@table-sticky-scroll-bar-bg: fade(#000, 35%); +@table-sticky-scroll-bar-radius: 4px; + +// Tag +// -- +@tag-border-radius: @border-radius-base; +@tag-default-bg: @background-color-light; +@tag-default-color: @text-color; +@tag-font-size: @font-size-sm; +@tag-line-height: 20px; + +// TimePicker +// --- +@picker-bg: @component-background; +@picker-basic-cell-hover-color: @item-hover-bg; +@picker-basic-cell-active-with-range-color: @primary-1; +@picker-basic-cell-hover-with-range-color: ~'var(--@{ant-prefix}-primary-color-deprecated-l-35)'; +@picker-basic-cell-disabled-bg: rgba(0, 0, 0, 0.04); +@picker-border-color: @border-color-split; +@picker-date-hover-range-border-color: ~'var(--@{ant-prefix}-primary-color-deprecated-l-20)'; +@picker-date-hover-range-color: @picker-basic-cell-hover-with-range-color; +@picker-time-panel-column-width: 56px; +@picker-time-panel-column-height: 224px; +@picker-time-panel-cell-height: 28px; +@picker-panel-cell-height: 24px; +@picker-panel-cell-width: 36px; +@picker-text-height: 40px; +@picker-panel-without-time-cell-height: 66px; + +// Calendar +// --- +@calendar-bg: @component-background; +@calendar-input-bg: @input-bg; +@calendar-border-color: @border-color-inverse; +@calendar-item-active-bg: @item-active-bg; +@calendar-column-active-bg: ~'var(--@{ant-prefix}-primary-color-active-deprecated-f-30)'; +@calendar-full-bg: @calendar-bg; +@calendar-full-panel-bg: @calendar-full-bg; + +// Carousel +// --- +@carousel-dot-width: 16px; +@carousel-dot-height: 3px; +@carousel-dot-active-width: 24px; + +// Badge +// --- +@badge-height: 20px; +@badge-height-sm: 14px; +@badge-dot-size: 6px; +@badge-font-size: @font-size-sm; +@badge-font-size-sm: @font-size-sm; +@badge-font-weight: normal; +@badge-status-size: 6px; +@badge-text-color: @component-background; +@badge-color: @highlight-color; + +// Rate +// --- +@rate-star-color: @yellow-6; +@rate-star-bg: @border-color-split; +@rate-star-size: 20px; +@rate-star-hover-scale: scale(1.1); + +// Card +// --- +@card-head-color: @heading-color; +@card-head-background: transparent; +@card-head-font-size: @font-size-lg; +@card-head-font-size-sm: @font-size-base; +@card-head-padding: 16px; +@card-head-padding-sm: (@card-head-padding / 2); +@card-head-height: 48px; +@card-head-height-sm: 36px; +@card-inner-head-padding: 12px; +@card-padding-base: 24px; +@card-padding-base-sm: (@card-padding-base / 2); +@card-actions-background: @component-background; +@card-actions-li-margin: 12px 0; +@card-skeleton-bg: #cfd8dc; +@card-background: @component-background; +@card-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), + 0 5px 12px 4px rgba(0, 0, 0, 0.09); +@card-radius: @border-radius-base; +@card-head-tabs-margin-bottom: -17px; +@card-head-extra-color: @text-color; + +// Comment +// --- +@comment-bg: inherit; +@comment-padding-base: @padding-md 0; +@comment-nest-indent: 44px; +@comment-font-size-base: @font-size-base; +@comment-font-size-sm: @font-size-sm; +@comment-author-name-color: @text-color-secondary; +@comment-author-time-color: #ccc; +@comment-action-color: @text-color-secondary; +@comment-action-hover-color: #595959; +@comment-actions-margin-bottom: inherit; +@comment-actions-margin-top: @margin-sm; +@comment-content-detail-p-margin-bottom: inherit; + +// Tabs +// --- +@tabs-card-head-background: @background-color-light; +@tabs-card-height: 40px; +@tabs-card-active-color: @primary-color; +@tabs-card-horizontal-padding: ( + (@tabs-card-height - floor(@font-size-base * @line-height-base)) / 2 + ) - @border-width-base @padding-md; +@tabs-card-horizontal-padding-sm: 6px @padding-md; +@tabs-card-horizontal-padding-lg: 7px @padding-md 6px; +@tabs-title-font-size: @font-size-base; +@tabs-title-font-size-lg: @font-size-lg; +@tabs-title-font-size-sm: @font-size-base; +@tabs-ink-bar-color: @primary-color; +@tabs-bar-margin: 0 0 @margin-md 0; +@tabs-horizontal-gutter: 32px; +@tabs-horizontal-margin: 0 0 0 @tabs-horizontal-gutter; +@tabs-horizontal-margin-rtl: 0 0 0 32px; +@tabs-horizontal-padding: @padding-sm 0; +@tabs-horizontal-padding-lg: @padding-md 0; +@tabs-horizontal-padding-sm: @padding-xs 0; +@tabs-vertical-padding: @padding-xs @padding-lg; +@tabs-vertical-margin: @margin-md 0 0 0; +@tabs-scrolling-size: 32px; +@tabs-highlight-color: @primary-color; +@tabs-hover-color: @primary-5; +@tabs-active-color: @primary-7; +@tabs-card-gutter: 2px; +@tabs-card-tab-active-border-top: 2px solid transparent; + +// BackTop +// --- +@back-top-color: #fff; +@back-top-bg: @text-color-secondary; +@back-top-hover-bg: @text-color; + +// Avatar +// --- +@avatar-size-base: 32px; +@avatar-size-lg: 40px; +@avatar-size-sm: 24px; +@avatar-font-size-base: 18px; +@avatar-font-size-lg: 24px; +@avatar-font-size-sm: 14px; +@avatar-bg: #ccc; +@avatar-color: #fff; +@avatar-border-radius: @border-radius-base; +@avatar-group-overlapping: -8px; +@avatar-group-space: 3px; +@avatar-group-border-color: #fff; + +// Switch +// --- +@switch-height: 22px; +@switch-sm-height: 16px; +@switch-min-width: 44px; +@switch-sm-min-width: 28px; +@switch-disabled-opacity: 0.4; +@switch-color: @primary-color; +@switch-bg: @component-background; +@switch-shadow-color: fade(#00230b, 20%); +@switch-padding: 2px; +@switch-inner-margin-min: ceil(@switch-height * 0.3); +@switch-inner-margin-max: ceil(@switch-height * 1.1); +@switch-sm-inner-margin-min: ceil(@switch-sm-height * 0.3); +@switch-sm-inner-margin-max: ceil(@switch-sm-height * 1.1); + +// Pagination +// --- +@pagination-item-bg: @component-background; +@pagination-item-size: @height-base; +@pagination-item-size-sm: 24px; +@pagination-font-family: @font-family; +@pagination-font-weight-active: 500; +@pagination-item-bg-active: @component-background; +@pagination-item-link-bg: @component-background; +@pagination-item-disabled-color-active: @disabled-color; +@pagination-item-disabled-bg-active: @disabled-active-bg; +@pagination-item-input-bg: @component-background; +@pagination-mini-options-size-changer-top: 0px; + +// PageHeader +// --- +@page-header-padding: @padding-lg; +@page-header-padding-vertical: @padding-md; +@page-header-padding-breadcrumb: @padding-sm; +@page-header-content-padding-vertical: @padding-sm; +@page-header-back-color: #000; +@page-header-ghost-bg: inherit; +@page-header-heading-title: @heading-4-size; +@page-header-heading-sub-title: 14px; +@page-header-tabs-tab-font-size: 16px; + +// Breadcrumb +// --- +@breadcrumb-base-color: @text-color-secondary; +@breadcrumb-last-item-color: @text-color; +@breadcrumb-font-size: @font-size-base; +@breadcrumb-icon-font-size: @font-size-base; +@breadcrumb-link-color: @text-color-secondary; +@breadcrumb-link-color-hover: @text-color; +@breadcrumb-separator-color: @text-color-secondary; +@breadcrumb-separator-margin: 0 @padding-xs; + +// Slider +// --- +@slider-margin: 10px 6px 10px; +@slider-rail-background-color: @background-color-base; +@slider-rail-background-color-hover: #e1e1e1; +@slider-track-background-color: @primary-3; +@slider-track-background-color-hover: @primary-4; +@slider-handle-border-width: 2px; +@slider-handle-background-color: @component-background; +@slider-handle-color: @primary-3; +@slider-handle-color-hover: @primary-4; +@slider-handle-color-focus: ~'var(--@{ant-prefix}-primary-color-deprecated-t-20)'; +@slider-handle-color-focus-shadow: ~'var(--@{ant-prefix}-primary-color-deprecated-f-12)'; +@slider-handle-color-tooltip-open: @primary-color; +@slider-handle-size: 14px; +@slider-handle-margin-top: -5px; +@slider-handle-margin-left: -5px; +@slider-handle-shadow: 0; +@slider-dot-border-color: @border-color-split; +@slider-dot-border-color-active: ~'var(--@{ant-prefix}-primary-color-deprecated-t-50)'; +@slider-disabled-color: @disabled-color; +@slider-disabled-background-color: @component-background; + +// Tree +// --- +@tree-bg: @component-background; +@tree-title-height: 24px; +@tree-child-padding: 18px; +@tree-directory-selected-color: #fff; +@tree-directory-selected-bg: @primary-color; +@tree-node-hover-bg: @item-hover-bg; +@tree-node-selected-bg: @primary-2; + +// Collapse +// --- +@collapse-header-padding: @padding-sm @padding-md; +@collapse-header-padding-extra: 40px; +@collapse-header-bg: @background-color-light; +@collapse-content-padding: @padding-md; +@collapse-content-bg: @component-background; +@collapse-header-arrow-left: 16px; + +// Skeleton +// --- +@skeleton-color: rgba(190, 190, 190, 0.2); +@skeleton-to-color: shade(@skeleton-color, 5%); +@skeleton-paragraph-margin-top: 28px; +@skeleton-paragraph-li-margin-top: @margin-md; +@skeleton-paragraph-li-height: 16px; +@skeleton-title-height: 16px; +@skeleton-title-paragraph-margin-top: @margin-lg; + +// Transfer +// --- +@transfer-header-height: 40px; +@transfer-item-height: @height-base; +@transfer-disabled-bg: @disabled-bg; +@transfer-list-height: 200px; +@transfer-item-hover-bg: @item-hover-bg; +@transfer-item-selected-hover-bg: ~'var(--@{ant-prefix}-primary-color-active-deprecated-d-02)'; +@transfer-item-padding-vertical: 6px; +@transfer-list-search-icon-top: 12px; + +// Message +// --- +@message-notice-content-padding: 10px 16px; +@message-notice-content-bg: @component-background; +// Motion +// --- +@wave-animation-width: 6px; + +// Alert +// --- +@alert-success-border-color: @success-color-deprecated-border; +@alert-success-bg-color: @success-color-deprecated-bg; +@alert-success-icon-color: @success-color; +@alert-info-border-color: @info-color-deprecated-border; +@alert-info-bg-color: @info-color-deprecated-bg; +@alert-info-icon-color: @info-color; +@alert-warning-border-color: @warning-color-deprecated-border; +@alert-warning-bg-color: @warning-color-deprecated-bg; +@alert-warning-icon-color: @warning-color; +@alert-error-border-color: @error-color-deprecated-border; +@alert-error-bg-color: @error-color-deprecated-bg; +@alert-error-icon-color: @error-color; +@alert-message-color: @heading-color; +@alert-text-color: @text-color; +@alert-close-color: @text-color-secondary; +@alert-close-hover-color: @icon-color-hover; +@alert-padding-vertical: @padding-xs; +@alert-padding-horizontal: @padding-md - 1px; +@alert-no-icon-padding-vertical: @padding-xs; +@alert-with-description-no-icon-padding-vertical: @padding-md - 1px; +@alert-with-description-padding-vertical: @padding-md - 1px; +@alert-with-description-padding: @alert-with-description-padding-vertical 15px + @alert-with-description-no-icon-padding-vertical @alert-with-description-icon-size; +@alert-icon-top: 8px + @font-size-base * (@line-height-base / 2) - (@font-size-base / 2); +@alert-with-description-icon-size: 24px; + +// List +// --- +@list-header-background: transparent; +@list-footer-background: transparent; +@list-empty-text-padding: @padding-md; +@list-item-padding: @padding-sm 0; +@list-item-padding-sm: @padding-xs @padding-md; +@list-item-padding-lg: 16px 24px; +@list-item-meta-margin-bottom: @padding-md; +@list-item-meta-avatar-margin-right: @padding-md; +@list-item-meta-title-margin-bottom: @padding-sm; +@list-customize-card-bg: @component-background; +@list-item-meta-description-font-size: @font-size-base; + +// Statistic +// --- +@statistic-title-font-size: @font-size-base; +@statistic-content-font-size: 24px; +@statistic-unit-font-size: 24px; +@statistic-font-family: @font-family; + +// Drawer +// --- +@drawer-header-padding: @padding-md @padding-lg; +@drawer-body-padding: @padding-lg; +@drawer-bg: @component-background; +@drawer-footer-padding-vertical: @modal-footer-padding-vertical; +@drawer-footer-padding-horizontal: @modal-footer-padding-horizontal; +@drawer-header-close-size: 56px; +@drawer-title-font-size: @font-size-lg; +@drawer-title-line-height: 22px; + +// Timeline +// --- +@timeline-width: 2px; +@timeline-color: @border-color-split; +@timeline-dot-border-width: 2px; +@timeline-dot-color: @primary-color; +@timeline-dot-bg: @component-background; +@timeline-item-padding-bottom: 20px; + +// Typography +// --- +@typography-title-font-weight: 600; +@typography-title-margin-top: 1.2em; +@typography-title-margin-bottom: 0.5em; + +// Upload +// --- +@upload-actions-color: @text-color-secondary; + +// Steps +// --- +@process-tail-color: @border-color-split; +@steps-nav-arrow-color: fade(@black, 25%); +@steps-background: @component-background; +@steps-icon-size: 32px; +@steps-icon-custom-size: @steps-icon-size; +@steps-icon-custom-top: 0px; +@steps-icon-custom-font-size: 24px; +@steps-icon-top: -0.5px; +@steps-icon-font-size: @font-size-lg; +@steps-icon-margin: 0 8px 0 0; +@steps-title-line-height: @height-base; +@steps-small-icon-size: 24px; +@steps-small-icon-margin: 0 8px 0 0; +@steps-dot-size: 8px; +@steps-dot-top: 2px; +@steps-current-dot-size: 10px; +@steps-description-max-width: 140px; +@steps-nav-content-max-width: auto; +@steps-vertical-icon-width: 16px; +@steps-vertical-tail-width: 16px; +@steps-vertical-tail-width-sm: 12px; + +// Notification +// --- +@notification-bg: @component-background; +@notification-padding-vertical: 16px; +@notification-padding-horizontal: 24px; + +// Result +// --- +@result-title-font-size: 24px; +@result-subtitle-font-size: @font-size-base; +@result-icon-font-size: 72px; +@result-extra-margin: 24px 0 0 0; + +// Image +// --- +@image-size-base: 48px; +@image-font-size-base: 24px; +@image-bg: #f5f5f5; +@image-color: #fff; +@image-mask-font-size: 16px; +@image-preview-operation-size: 18px; +@image-preview-operation-color: @text-color-dark; +@image-preview-operation-disabled-color: fade(@image-preview-operation-color, 25%); + +// Segmented +// --- +@segmented-bg: fade(@black, 4%); +@segmented-hover-bg: fade(@black, 6%); +@segmented-selected-bg: @white; +@segmented-label-color: fade(@black, 65%); +@segmented-label-hover-color: #262626; diff --git a/webapp/packages/supersonic-fe/src/assets/style/variable.less b/webapp/packages/supersonic-fe/src/assets/style/variable.less new file mode 100644 index 000000000..6c702934c --- /dev/null +++ b/webapp/packages/supersonic-fe/src/assets/style/variable.less @@ -0,0 +1,4 @@ +@root-entry-name: variable; + +@import './themes/variable.less'; +@import './core/index'; diff --git a/webapp/packages/supersonic-fe/src/components/BatchCtrlDropDownButton/index.less b/webapp/packages/supersonic-fe/src/components/BatchCtrlDropDownButton/index.less new file mode 100644 index 000000000..e69de29bb diff --git a/webapp/packages/supersonic-fe/src/components/BatchCtrlDropDownButton/index.tsx b/webapp/packages/supersonic-fe/src/components/BatchCtrlDropDownButton/index.tsx new file mode 100644 index 000000000..7a6a76bda --- /dev/null +++ b/webapp/packages/supersonic-fe/src/components/BatchCtrlDropDownButton/index.tsx @@ -0,0 +1,165 @@ +import { Space, Popconfirm, Dropdown, DatePicker, Popover, Button, Radio } from 'antd'; +import { FC, useState, useRef } from 'react'; +import { + PlaySquareOutlined, + StopOutlined, + CloudDownloadOutlined, + DeleteOutlined, +} from '@ant-design/icons'; + +export type BatchCtrlDropDownButtonProps = { + onMenuClick?: (key: string) => void; + onDownloadDateRangeChange?: (dateRange: string[], pickerType: string) => void; + onDeleteConfirm?: () => void; + downloadLoading?: boolean; + disabledList?: string[]; + hiddenList?: string[]; +}; +const { RangePicker } = DatePicker; + +const BatchCtrlDropDownButton: FC = ({ + onMenuClick, + onDownloadDateRangeChange, + onDeleteConfirm, + downloadLoading, + disabledList = [], + hiddenList = [], +}) => { + const [popoverOpenState, setPopoverOpenState] = useState(false); + const [pickerType, setPickerType] = useState('day'); + const dateRangeRef = useRef([]); + const dropdownButtonItems: any[] = [ + { + key: 'batchStart', + label: '批量启用', + icon: , + disabled: disabledList?.includes('batchStart'), + }, + { + key: 'batchStop', + label: '批量停用', + icon: , + disabled: disabledList?.includes('batchStop'), + }, + { + key: 'batchDownload', + label: ( + { + setPopoverOpenState(true); + }} + > + 批量下载 + + ), + icon: , + disabled: disabledList?.includes('batchDownload'), + }, + { + key: 'batchDeleteDivider', + type: 'divider', + }, + { + key: 'batchDelete', + label: ( + { + onDeleteConfirm?.(); + }} + > + 批量删除 + + ), + icon: , + disabled: disabledList?.includes('batchDelete'), + }, + ].filter((item) => { + return !hiddenList.includes(item.key); + }); + + const popoverConfig = { + title: '选择下载区间', + content: ( + + { + setPickerType(e.target.value); + }} + > + 按日 + 按周 + 按月 + + { + dateRangeRef.current = date; + return; + }} + picker={pickerType as any} + allowClear={true} + /> +
+ + + +
+ + ), + }; + + return ( + { + setPopoverOpenState(open); + }} + > + { + onMenuClick?.(key); + }, + }} + > + 批量操作 + + + ); +}; + +export default BatchCtrlDropDownButton; diff --git a/webapp/packages/supersonic-fe/src/components/HeaderDropdown/index.less b/webapp/packages/supersonic-fe/src/components/HeaderDropdown/index.less index 004b53ebd..6c61395fe 100644 --- a/webapp/packages/supersonic-fe/src/components/HeaderDropdown/index.less +++ b/webapp/packages/supersonic-fe/src/components/HeaderDropdown/index.less @@ -1,12 +1,13 @@ -@import '~antd/es/style/themes/default.less'; + .container > * { - background-color: @popover-bg; + background-color: #fff; border-radius: 4px; - box-shadow: @shadow-1-down; + box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.08), 0 9px 28px 0 rgba(0, 0, 0, 0.05), + 0 12px 48px 16px rgba(0, 0, 0, 0.03); } -@media screen and (max-width: @screen-xs) { +@media screen and (max-width: 480px) { .container { width: 100% !important; } diff --git a/webapp/packages/supersonic-fe/src/components/MStar/index.tsx b/webapp/packages/supersonic-fe/src/components/MStar/index.tsx new file mode 100644 index 000000000..b89d187c1 --- /dev/null +++ b/webapp/packages/supersonic-fe/src/components/MStar/index.tsx @@ -0,0 +1,30 @@ +import React, { useState, useEffect } from 'react'; +import { StarOutlined, StarFilled } from '@ant-design/icons'; +import styles from './style.less'; + +type Props = { + star?: boolean; + onToggleCollect: (star: boolean) => void; +}; + +const MStar: React.FC = ({ star = false, onToggleCollect }) => { + const [starState, setStarState] = useState(star); + useEffect(() => { + setStarState(star); + }, [star]); + + return ( +
{ + event.stopPropagation(); + setStarState(!starState); + onToggleCollect(!starState); + }} + > + {starState === false ? : } +
+ ); +}; + +export default MStar; diff --git a/webapp/packages/supersonic-fe/src/components/MStar/style.less b/webapp/packages/supersonic-fe/src/components/MStar/style.less new file mode 100644 index 000000000..0fa1f22a3 --- /dev/null +++ b/webapp/packages/supersonic-fe/src/components/MStar/style.less @@ -0,0 +1,6 @@ +.collectDashboard { + color: #546174; + &.dashboardCollected { + display: block !important; + } +} \ No newline at end of file diff --git a/webapp/packages/supersonic-fe/src/components/RightContent/AvatarDropdown.tsx b/webapp/packages/supersonic-fe/src/components/RightContent/AvatarDropdown.tsx index 0f400db14..2480173bf 100644 --- a/webapp/packages/supersonic-fe/src/components/RightContent/AvatarDropdown.tsx +++ b/webapp/packages/supersonic-fe/src/components/RightContent/AvatarDropdown.tsx @@ -54,7 +54,7 @@ const AvatarDropdown: React.FC = () => { - {currentUser.staffName} + {currentUser.staffName} ); diff --git a/webapp/packages/supersonic-fe/src/components/RightContent/index.less b/webapp/packages/supersonic-fe/src/components/RightContent/index.less index 96a612134..6fb2026a9 100644 --- a/webapp/packages/supersonic-fe/src/components/RightContent/index.less +++ b/webapp/packages/supersonic-fe/src/components/RightContent/index.less @@ -1,4 +1,4 @@ -@import '~antd/es/style/themes/default.less'; + @pro-header-hover-bg: rgba(0, 0, 0, 0.025); @@ -26,15 +26,17 @@ padding: 0 12px; cursor: pointer; transition: all 0.3s; - + color: #fff; >span { vertical-align: middle; } + &:hover { - background: @pro-header-hover-bg; + background: #296df3; } + &:global(.opened) { background: @pro-header-hover-bg; } @@ -57,49 +59,3 @@ } } } - -.dark { - .action { - .download { - display: flex; - align-items: center; - } - - .menuName { - margin-left: 5px; - color: #fff; - font-size: 13px; - } - - &:hover { - background: #296df3; - } - - &:global(.opened) { - background: #252a3d; - } - } -} - -.actionIcon { - font-size: 20px; -} - - - -.tooltip { - padding-top: 0 !important; - font-size: 12px !important; - - :global { - .ant-tooltip-arrow { - display: none; - } - - .ant-tooltip-inner { - min-height: 0 !important; - padding: 3px 6px !important; - } - } -} - diff --git a/webapp/packages/supersonic-fe/src/components/RightContent/index.tsx b/webapp/packages/supersonic-fe/src/components/RightContent/index.tsx index 3c84e8f0e..99fed0d32 100644 --- a/webapp/packages/supersonic-fe/src/components/RightContent/index.tsx +++ b/webapp/packages/supersonic-fe/src/components/RightContent/index.tsx @@ -5,7 +5,6 @@ import Avatar from './AvatarDropdown'; import { SettingOutlined } from '@ant-design/icons'; import { getSystemConfig } from '@/services/user'; import styles from './index.less'; -import cx from 'classnames'; export type SiderTheme = 'light' | 'dark'; @@ -21,27 +20,20 @@ const GlobalHeaderRight: React.FC = () => { } const { currentUser = {} } = initialState as any; - const { layout } = initialState.settings; - let className = styles.right; - const querySystemConfig = async () => { const { code, data } = await getSystemConfig(); if (code === 200) { const { admins } = data; - if (admins.includes(currentUser?.staffName)) { + if (Array.isArray(admins) && admins.includes(currentUser?.staffName)) { setHasSettingPermisson(true); } } }; - if (layout === 'top' || layout === 'mix') { - className = cx(styles.right, styles.dark); - } - function handleLogin() {} return ( - + {hasSettingPermisson && ( span { display: inline-block; diff --git a/webapp/packages/supersonic-fe/src/components/TagSelect/index.less b/webapp/packages/supersonic-fe/src/components/TagSelect/index.less index 9cff6d372..df780a7a6 100644 --- a/webapp/packages/supersonic-fe/src/components/TagSelect/index.less +++ b/webapp/packages/supersonic-fe/src/components/TagSelect/index.less @@ -1,4 +1,3 @@ -@import '~antd/es/style/themes/default.less'; .tagSelect { position: relative; @@ -12,7 +11,7 @@ .ant-tag { margin-right: 24px; padding: 0 8px; - font-size: @font-size-base; + font-size: 14px; } } &.expanded { diff --git a/webapp/packages/supersonic-fe/src/global.less b/webapp/packages/supersonic-fe/src/global.less index 28d25ced7..279eeef5c 100644 --- a/webapp/packages/supersonic-fe/src/global.less +++ b/webapp/packages/supersonic-fe/src/global.less @@ -1,4 +1,4 @@ -@import '~antd/es/style/themes/default.less'; + :root:root { --primary-color: #f87653; @@ -30,6 +30,7 @@ body, height: 100%; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Microsoft YaHei,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; -webkit-font-smoothing:antialiased; + margin: 0; } .colorWeak { @@ -55,7 +56,7 @@ ol { list-style: none; } -@media (max-width: @screen-xs) { +@media (max-width: 480px) { .ant-table { width: 100%; overflow-x: auto; @@ -111,26 +112,46 @@ ol { .ant-spin-spinning { max-height: none !important; } - .loadingPlaceholder { height: 100vh; } } +.ant-pro-layout .ant-pro-layout-content { + padding: 0; + background-color: #f0f2f5; +} + + .ellipsis { overflow: hidden; text-overflow: ellipsis; } -.ant-menu-dark.ant-menu-horizontal>.ant-menu-item, -.ant-menu-dark.ant-menu-horizontal>.ant-menu-submenu { +.ant-pro-top-nav-header-menu { + padding: 0!important; + line-height: unset!important; +} + +.ant-menu-root>.ant-menu-item, +.ant-menu-root>.ant-menu-submenu { font-weight: bold; font-size: 14px; - &>span>a, &>a { color: white; + &:hover { + color: white; + } } + &:hover { + background-color: #296DF3!important; + } +} + +.ant-menu-root>.ant-menu-item.ant-menu-item-selected { + background-color: #296DF3!important; + color: white; } .ant-pro-top-nav-header-logo h1 { @@ -143,63 +164,19 @@ ol { backdrop-filter: blur(10px) !important; } -.ant-menu.ant-menu-dark { - color: #fff; -} -.ant-menu-submenu-selected { - background-color: #296DF3 !important; -} - -.ant-menu.ant-menu-dark .ant-menu-sub { - background-color: #fff; - .ant-menu-item-selected { - background-color: #296DF3; - .ant-pro-menu-item-title { - color: #fff; - } - } - .ant-menu-item { - &:hover { - background-color: #e3e3e3; - - .ant-menu-item-selected { - background-color: #e3e3e3; - .ant-pro-menu-item-title { - color: #181a1a !important; - } - } - .ant-pro-menu-item-title { - color: #181a1a !important; - } - } - & > span > a { - color: #181a1a; - &:hover { - color: #181a1a; - } - } - } -} -.ant-menu-item:active { - background: inherit -} -// .ant-menu-dark .ant-menu-item > span > a { -// color: #181a1a; -// &:hover { -// color: #fff; -// } -// } -// .ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item-selected { -// // color: #fff; -// background-color: #1b4aef; +// .ant-menu-submenu-selected { +// background-color: #296DF3 !important; // } -.customizeHeader { - background-color: rgba(0, 0, 0, 0.2); - backdrop-filter: blur(10px); -} + + +// .ant-menu-item:active { +// background: inherit +// } + + .ant-pro-top-nav-header-main-left { min-width: 100px !important; @@ -210,64 +187,31 @@ ol { } -.link { - color: #296df3; - cursor: pointer; -} +// .link { +// color: #296df3; +// cursor: pointer; +// } -.closeTab { - position: relative; - width: 10px; - height: 10px; - // opacity: 0; -} -.closeTab::before, -.closeTab::after { - position: absolute; - top: -2px; - left: 0; - width: 1px; - height: 10px; - background-color: rgb(50, 50, 50); - content: ' '; -} - -.closeTab::before { - transform: rotate(45deg); -} - -.closeTab::after { - transform: rotate(-45deg); -} - -.dot { - float: right; - width: 8px; - height: 8px; - background: #bfbfbf; - border-radius: 100%; -} - -.bdWrapper { - margin: -24px; - .ant-layout-sider { - top: 48px !important; - } -} +// .dot { +// float: right; +// width: 8px; +// height: 8px; +// background: #bfbfbf; +// border-radius: 100%; +// } .logo { position: relative; - padding-bottom: 5px; color: #fff; font-size: 20px; font-weight: 700; padding-right: 50px; } -.ant-notification-topRight { - right: 240px !important; -} +// .ant-notification-topRight { +// right: 240px !important; +// } .g6ContextMenuContainer { diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/DataSourceBasicForm.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/DataSourceBasicForm.tsx index 08d6a53d6..6869988d8 100644 --- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/DataSourceBasicForm.tsx +++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/DataSourceBasicForm.tsx @@ -1,7 +1,8 @@ -import React, { useEffect, useState } from 'react'; +import React, { useState } from 'react'; import { Form, Input, Spin, Select, message } from 'antd'; import type { FormInstance } from 'antd/lib/form'; import { getDbNames, getTables } from '../../service'; +import SqlEditor from '@/components/SqlEditor'; import { ISemantic } from '../../data'; const FormItem = Form.Item; @@ -123,6 +124,13 @@ const DataSourceBasicForm: React.FC = ({ isEdit, databaseConfigList, mode