choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
1,022 lines • 1.58 MB
CSS
/*!
*
* choerodon-ui v1.6.4
*
*/
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
/* stylelint-disable no-duplicate-selectors */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */
:root {
--primary-color: #3f51b5;
--info-color: #3f51b5;
--success-color: #00bf96;
--processing-color: var(--primary-color);
--error-color: #d50000;
--error-bg-color: #fcebeb;
--highlight-color: #d50000;
--warning-color: #faad14;
--normal-color: #d9d9d9;
--B500: #a6a6a6;
--primary-1: #e6ebf5;
--primary-2: #dadee8;
--primary-3: #b6bfdb;
--primary-4: #8a99cf;
--primary-5: #6374c2;
--primary-6: #3f51b5;
--primary-7: #2b378f;
--primary-8: #1a2169;
--primary-9: #0d1042;
--primary-10: #05061c;
--primary-fade-1: rgba(63, 81, 181, 0.1);
--primary-fade-2: rgba(63, 81, 181, 0.2);
--primary-fade-3: rgba(63, 81, 181, 0.3);
--primary-fade-4: rgba(63, 81, 181, 0.4);
--primary-fade-5: rgba(63, 81, 181, 0.5);
--primary-fade-6: rgba(63, 81, 181, 0.6);
--primary-fade-7: rgba(63, 81, 181, 0.7);
--primary-fade-8: rgba(63, 81, 181, 0.8);
--primary-fade-9: rgba(63, 81, 181, 0.9);
--primary-fade-10: #3f51b5;
--primary-tint-1: #5262bc;
--primary-tint-2: #6574c4;
--primary-tint-3: #7985cb;
--primary-tint-4: #8c97d3;
--primary-tint-5: #9fa8da;
--primary-tint-6: #b2b9e1;
--primary-tint-7: #c5cbe9;
--primary-tint-8: #d9dcf0;
--primary-tint-9: #eceef8;
--primary-tint-10: #ffffff;
--info-1: #e6ebf5;
--info-3: #b6bfdb;
--success-1: #e6fff5;
--success-3: #6ee6c0;
--error-1: #ffeae6;
--error-3: #fc8679;
--warning-1: #fffbe6;
--warning-3: #ffe58f;
--body-background: #fff;
--component-background: #fff;
--font-family-no-number: 'Chinese Quote', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial,
sans-serif;
--font-family: 'Monospaced Number', var(--font-family-no-number);
--font-family-required-symbol: SimSun, sans-serif;
--code-family: Consolas, Menlo, Courier, monospace;
--font-family-code: var(--code-family);
--heading-color: rgba(0, 0, 0, 0.85);
--text-color: #000000;
--text-color-secondary: rgba(0, 0, 0, 0.45);
--heading-color-dark: #ffffff;
--text-color-dark: #ffffff;
--text-color-secondary-dark: rgba(255, 255, 255, 0.65);
--font-size-base: 0.13rem;
--font-size-lg: 0.16rem;
--font-size-sm: 0.12rem;
--font-weight-base: 400;
--line-height-base: 1.5;
--border-radius-lg: 0.1rem;
--border-radius-base: 0.02rem;
--border-radius-sm: 0.02rem;
--padding-lg: 0.24rem;
--padding-md: 0.16rem;
--padding-sm: 0.12rem;
--padding-xs: 0.08rem;
--padding-vertical-base: 0.01rem;
--padding-vertical-sm: 0.01rem;
--padding-vertical-lg: 0.06rem;
--control-padding-horizontal: var(--padding-sm);
--control-padding-horizontal-sm: var(--padding-xs);
--margin-lg: 24px;
--margin-md: 16px;
--margin-sm: 12px;
--margin-xs: 8px;
--margin-xss: 4px;
--item-active-bg: rgba(140, 158, 255, 0.12);
--item-hover-bg: var(--background-color-light);
--item-focus-bg: var(--background-color-light);
--item-active-color: var(--text-color);
--item-focus-color: var(--text-color);
--item-drag-over-bg: var(--primary-color);
--item-selected-font-weight: 400;
--icon-font-size-base: 0.18rem;
--icon-font-size-sm: 0.16rem;
--link-color: #3f51b5;
--link-hover-color: #6374c2;
--link-active-color: #2b378f;
--link-decoration: none;
--link-hover-decoration: none;
--animation-duration-slower: 0.45s;
--animation-duration-slow: 0.3s;
--animation-duration-base: 0.2s;
--animation-duration-fast: 0.1s;
--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, 0, 0.2, 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-base: #e0e0e0;
--border-color-split: #e8e8e8;
--border-width-base: 0.01rem;
--border-style-base: solid;
--outline-blur-size: 0rem;
--outline-width: 0.02rem;
--outline-color: var(--primary-color);
--background-color-light: rgba(0, 0, 0, 0.04);
--background-color-base: #f5f5f5;
--disabled-color: rgba(0, 0, 0, 0.25);
--disabled-bg: var(--background-color-base);
--disabled-color-dark: rgba(255, 255, 255, 0.35);
--shadow-color: rgba(0, 0, 0, 0.12);
--box-shadow-base: var(--shadow-1-down);
--shadow-1-up: 0 -0.02rem 0.08rem var(--shadow-color);
--shadow-1-down: 0 0.02rem 0.08rem var(--shadow-color);
--shadow-1-left: -0.02rem 0 0.08rem var(--shadow-color);
--shadow-1-right: 0.02rem 0 0.08rem var(--shadow-color);
--shadow-2: 0 0.04rem 0.12rem var(--shadow-color);
--shadow-3: 0 0 0 0.01rem var(--component-background);
--shadow-4: 0 0.05rem 0.05rem -0.03rem rgba(0, 0, 0, 0.2),
0 0.08rem 0.1rem 0.01rem rgba(0, 0, 0, 0.14), 0 0.03rem 0.14rem 0.02rem rgba(0, 0, 0, 0.12);
--btn-font-weight: var(--font-weight-base);
--btn-border-radius-base: var(--border-radius-base);
--btn-border-radius-sm: var(--border-radius-base);
--btn-hover-default-color: rgba(0, 0, 0, 0.08);
--btn-hover-other-color: rgba(255, 255, 255, 0.08);
--btn-danger-color: var(--error-color);
--btn-danger-bg: rgba(0, 0, 0, 0);
--btn-danger-border: var(--border-color-base);
--btn-disable-color: var(--disabled-color);
--btn-disable-bg: transparent;
--btn-disable-border: var(--border-color-base);
--btn-line-height: 1.5;
--btn-padding-vertical-base: 0rem;
--btn-padding-horizontal-base: 0.12rem;
--btn-padding-base: var(--btn-padding-vertical-base) var(--btn-padding-horizontal-base);
--btn-padding-vertical-lg: var(--btn-padding-vertical-base);
--btn-padding-horizontal-lg: var(--btn-padding-horizontal-base);
--btn-padding-lg: var(--btn-padding-vertical-lg) var(--btn-padding-horizontal-lg);
--btn-padding-vertical-sm: var(--padding-vertical-sm);
--btn-padding-horizontal-sm: 0.06rem;
--btn-padding-sm: var(--padding-vertical-sm) var(--btn-padding-horizontal-sm);
--btn-font-size-base: unset;
--btn-font-size-lg: var(--font-size-lg);
--btn-font-size-sm: var(--font-size-sm);
--btn-height-base: 0.3rem;
--btn-height-lg: 0.4rem;
--btn-height-sm: 0.24rem;
--btn-circle-size: var(--btn-height-base);
--btn-circle-size-lg: var(--btn-height-lg);
--btn-circle-size-sm: var(--btn-height-sm);
--btn-circle-border-radius: 50%;
--btn-group-border: var(--primary-5);
--btn-group-spacing: 0.1rem;
--btn-box-shadow: 0 0.03rem 0.01rem -0.02rem rgba(0, 0, 0, 0.2),
0 0.02rem 0.02rem 0 rgba(0, 0, 0, 0.14), 0 0.01rem 0.05rem 0 rgba(0, 0, 0, 0.12);
--btn-focus-box-shadow: 0 0.04rem 0.03rem -0.02rem rgba(0, 0, 0, 0.2),
0 0.03rem 0.03rem 0 rgba(0, 0, 0, 0.14), 0 0.03rem 0.08rem 0 rgba(0, 0, 0, 0.12);
--btn-active-box-shadow: var(--shadow-4);
--btn-icon-size: 0.14rem;
--btn-icon-size-lg: var(--font-size-lg);
--btn-icon-size-sm: var(--font-size-sm);
--btn-icon-only-size: 0.2rem;
--btn-icon-only-size-sm: 0.14rem;
--btn-icon-only-size-lg: 0.24rem;
--btn-icon-font-weight: inherit;
--btn-icon-margin: 0 0.05rem 0 0;
--btn-raised-border-width-base: 0rem;
--btn-raised-border-style-base: solid;
--btn-link-font-weight: var(--btn-font-weight);
--btn-primary-color: var(--text-color-dark);
--btn-primary-bg: #3f51b5;
--btn-primary-border: var(--btn-primary-bg);
--btn-primary-focus-color: var(--btn-primary-color);
--btn-primary-focus-bg: #2b378f;
--btn-primary-hover-color: var(--btn-primary-focus-color);
--btn-primary-hover-bg: var(--btn-primary-focus-bg);
--btn-primary-disabled-color: var(--btn-primary-color);
--btn-primary-flat-color: var(--btn-primary-bg);
--btn-secondary-color: var(--text-color-dark);
--btn-secondary-bg: var(--primary-4);
--btn-secondary-border: var(--primary-color);
--btn-secondary-focus-color: var(--btn-secondary-color);
--btn-secondary-focus-bg: var(--primary-7);
--btn-secondary-hover-color: var(--btn-secondary-color);
--btn-secondary-hover-bg: var(--btn-secondary-focus-bg);
--btn-secondary-disabled-color: var(--btn-secondary-color);
--btn-secondary-flat-color: var(--btn-secondary-bg);
--btn-gray-color: var(--text-color);
--btn-gray-bg: #f5f5f5;
--btn-gray-border: var(--btn-gray-bg);
--btn-gray-focus-color: var(--btn-gray-color);
--btn-gray-focus-bg: #e6e6e6;
--btn-gray-hover-color: var(--btn-gray-focus-color);
--btn-gray-hover-bg: var(--btn-gray-focus-bg);
--btn-gray-disabled-color: var(--btn-gray-color);
--btn-gray-flat-color: #d0d0d0;
--btn-blue-color: var(--text-color-dark);
--btn-blue-bg: #3f51b5;
--btn-blue-border: var(--btn-blue-bg);
--btn-blue-focus-color: var(--btn-blue-color);
--btn-blue-focus-bg: #2b378f;
--btn-blue-hover-color: var(--btn-blue-focus-color);
--btn-blue-hover-bg: var(--btn-blue-focus-bg);
--btn-blue-disabled-color: var(--btn-blue-color);
--btn-blue-flat-color: var(--btn-blue-bg);
--btn-green-color: var(--text-color-dark);
--btn-green-bg: #00bf96;
--btn-green-border: var(--btn-green-bg);
--btn-green-focus-color: var(--btn-green-color);
--btn-green-focus-bg: #00997d;
--btn-green-hover-color: var(--btn-green-focus-color);
--btn-green-hover-bg: var(--btn-green-focus-bg);
--btn-green-disabled-color: var(--btn-green-color);
--btn-green-flat-color: var(--btn-green-bg);
--btn-red-color: var(--text-color-dark);
--btn-red-bg: #d50000;
--btn-red-border: var(--btn-red-bg);
--btn-red-focus-color: var(--btn-red-color);
--btn-red-focus-bg: #b00006;
--btn-red-hover-color: var(--btn-red-focus-color);
--btn-red-hover-bg: var(--btn-red-focus-bg);
--btn-red-disabled-color: var(--btn-red-color);
--btn-red-flat-color: var(--btn-red-bg);
--btn-yellow-color: var(--text-color-dark);
--btn-yellow-bg: #fadb14;
--btn-yellow-border: var(--btn-yellow-bg);
--btn-yellow-focus-color: var(--btn-yellow-color);
--btn-yellow-focus-bg: #d4b106;
--btn-yellow-hover-color: var(--btn-yellow-focus-color);
--btn-yellow-hover-bg: var(--btn-yellow-focus-bg);
--btn-yellow-disabled-color: var(--btn-yellow-color);
--btn-yellow-flat-color: var(--btn-yellow-bg);
--btn-purple-color: var(--text-color-dark);
--btn-purple-bg: #8e44ad;
--btn-purple-border: var(--btn-purple-bg);
--btn-purple-focus-color: var(--btn-purple-color);
--btn-purple-focus-bg: #692e87;
--btn-purple-hover-color: var(--btn-purple-focus-color);
--btn-purple-hover-bg: var(--btn-purple-focus-bg);
--btn-purple-disabled-color: var(--btn-purple-color);
--btn-purple-flat-color: var(--btn-purple-bg);
--btn-dark-color: var(--text-color-dark);
--btn-dark-bg: #4f5254;
--btn-dark-border: var(--btn-dark-bg);
--btn-dark-focus-color: var(--btn-dark-color);
--btn-dark-focus-bg: #434547;
--btn-dark-hover-color: var(--btn-dark-focus-color);
--btn-dark-hover-bg: var(--btn-dark-focus-bg);
--btn-dark-disabled-color: var(--btn-dark-color);
--btn-dark-flat-color: #2f353b;
--btn-default-color: var(--text-color);
--btn-default-bg: transparent;
--btn-default-border: var(--border-color-base);
--btn-default-focus-color: var(--btn-primary-bg);
--btn-default-focus-bg: var(--btn-default-bg);
--btn-default-hover-color: var(--btn-default-color);
--btn-default-hover-bg: var(--btn-default-focus-bg);
--btn-default-disabled-color: var(--btn-default-color);
--btn-default-flat-color: var(--btn-default-color);
--checkbox-size: 0.16rem;
--checkbox-color: #3f51b5;
--checkbox-border-color: rgba(0, 0, 0, 0.65);
--checkbox-border-width: 0.02rem;
--checkbox-disabled-bg: var(--input-disabled-bg);
--checkbox-disabled-color: var(--disabled-color);
--checkbox-disabled-border-color: var(--disabled-color);
--checkbox-disabled-check-bg: var(--checkbox-disabled-bg);
--checkbox-disabled-check-border-color: var(--checkbox-disabled-border-color);
--checkbox-disabled-check-color: var(--checkbox-disabled-color);
--checkbox-uncheck-hover-border-color: var(--checkbox-color);
--checkbox-shadow-color: rgba(63, 81, 181, 0.2);
--checkbox-indeterminate-bg: var(--checkbox-color);
--checkbox-indeterminate-color: #fff;
--checkbox-indeterminate-width: calc((var(--checkbox-size) / 16) * 8);
--checkbox-indeterminate-height: calc((var(--checkbox-size) / 16) * 1);
--checkbox-indeterminate-top: calc((var(--checkbox-size) - var(--checkbox-indeterminate-height) - var(--checkbox-border-width) * 2) / 2);
--checkbox-indeterminate-left: calc((var(--checkbox-size) - var(--checkbox-indeterminate-width) - var(--checkbox-border-width) * 2) / 2);
--checkbox-basic-disabled-color: var(--input-disabled-color);
--checkbox-basic-disabled-border-color: var(--border-color-base);
--checkbox-basic-disabled-check-border-color: var(--checkbox-basic-disabled-border-color);
--checkbox-basic-indeterminate-width: calc((var(--checkbox-size) / 14) * 8);
--checkbox-basic-indeterminate-height: calc(var(--checkbox-size) / 14);
--checkbox-basic-indeterminate-top: calc((var(--checkbox-size) - 0.04rem - var(--checkbox-basic-indeterminate-height)) / 2);
--checkbox-basic-indeterminate-left: calc((var(--checkbox-size) - 0.03rem - var(--checkbox-basic-indeterminate-width)) / 2);
--checkbox-button-line-height: var(--radio-button-line-height);
--checkbox-button-min-width: unset;
--checkbox-button-padding: 0 0.15rem;
--checkbox-button-check-bg: var(--checkbox-color);
--checkbox-button-disabled-check-bg: var(--primary-fade-6);
--checkbox-button-disabled-check-border-color: var(--checkbox-button-disabled-check-bg);
--checkbox-button-disabled-check-color: var(--text-color-dark);
--checkbox-button-check-color: var(--text-color-dark);
--checkbox-button-check-border-color: var(--checkbox-color);
--checkbox-button-radius: var(--border-radius-base);
--date-primary-color: #3f51b5;
--date-primary-hover-color: rgba(63, 81, 181, 0.7);
--date-link-hover-color: var(--link-hover-color);
--date-link-active-color: var(--link-active-color);
--date-picker-width: 2.8rem;
--date-time-picker-width: 4.3rem;
--date-picker-horizontal-padding: 0.12rem;
--date-time-list-item-height: 0.29rem;
--date-picker-header-height: 0.4rem;
--date-picker-header-padding: 0 0.07rem;
--date-picker-body-table-font-size: var(--font-size-lg);
--date-picker-cell-inner-border-radius: var(--border-radius-sm);
--date-picker-cell-disabled-inner-border-radius: 0rem;
--date-picker-cell-inner-height: 0.24rem;
--date-picker-footer-height: 0.39rem;
--date-picker-active-color: #fff;
--date-picker-view-select-font-weight: bold;
--date-picker-today-font-weight: bold;
--date-picker-th-color: unset;
--date-picker-month-year-cell-inner-display: inline-table;
--date-picker-time-focus-active-display: block;
--date-picker-datetime-time-border-left: unset;
--date-picker-datetime-time-padding: 0.08rem var(--date-picker-horizontal-padding);
--date-picker-time-selected-bg: unset;
--date-picker-time-cell-hover-bg: unset;
--date-picker-time-cell-inner-hover-bg: var(--item-hover-bg);
--date-picker-time-selected-cell-inner-color: #fff;
--date-picker-time-selected-cell-inner-bg: var(--date-primary-color);
--date-picker-time-panel-height: 2.1rem;
--date-picker-time-cell-inner-active-color: var(--date-picker-active-color);
--date-picker-time-cell-inner-active-bg: var(--primary-5);
--date-picker-time-cell-active-bg: unset;
--date-picker-time-cell-disabled-bg: unset;
--date-picker-time-disabled-cell-inner-bg: var(--disabled-bg);
--date-picker-week-edge-cell-inner-border-radius: var(--border-radius-base);
--radio-color: #3f51b5;
--radio-border-color: rgba(0, 0, 0, 0.24);
--radio-border-width: var(--border-width-base);
--radio-disabled-color: var(--disabled-color);
--radio-disabled-bg: var(--input-disabled-bg);
--radio-disabled-border-color: var(--disabled-color);
--radio-disabled-check-bg: var(--radio-disabled-bg);
--radio-disabled-check-border-color: var(--radio-disabled-border-color);
--radio-disabled-check-color: var(--radio-disabled-color);
--radio-uncheck-hover-border-color: var(--radio-color);
--radio-size: 0.14rem;
--radio-dot-color: var(--radio-color);
--radio-dot-size: calc(var(--radio-size) / 2 - var(--radio-border-width));
--radio-check-dot-color: var(--radio-dot-color);
--radio-height: calc(var(--input-height-base) - 2 * var(--border-width-base));
--radio-line-height: 1.5;
--radio-label-white-space: var(--label-white-space);
--radio-shadow-color: rgba(63, 81, 181, 0.2);
--radio-check-border-color: var(--radio-dot-color);
--radio-check-border-width: var(--radio-border-width);
--radio-highlight-check-dot-color: var(--input-highlight-border-color);
--radio-basic-disabled-color: var(--input-disabled-color);
--radio-basic-disabled-bg: var(--radio-button-bg);
--radio-basic-disabled-check-bg: var(--radio-disabled-check-color);
--radio-basic-disabled-border-color: var(--radio-border-color);
--radio-button-line-height: var(--btn-height-base);
--radio-button-bg: var(--btn-default-bg);
--radio-button-color: var(--btn-default-color);
--radio-button-hover-color: rgba(63, 81, 181, 0.5);
--radio-button-active-color: rgba(63, 81, 181, 0.7);
--radio-button-check-border-width: var(--radio-border-width);
--radio-button-padding: 0 0.15rem;
--radio-button-min-width: unset;
--radio-basic-button-uncheck-hover-color: var(--radio-button-color);
--radio-basic-button-padding: 0 calc(var(--padding-md) - 0.01rem);
--radio-button-check-color: var(--radio-dot-color);
--radio-button-check-bg: transparent;
--radio-basic-button-group-spacing: 0rem;
--radio-button-radius: var(--border-radius-base);
--radio-button-disabled-check-bg: var(--radio-disabled-check-bg);
--radio-button-disabled-check-border-color: var(--radio-disabled-check-border-color);
--radio-button-disabled-check-color: unset;
--layout-header-background: #001529;
--layout-sider-background: var(--layout-header-background);
--layout-sider-background-tint-1: #192c3e;
--label-required-color: var(--highlight-color);
--label-color: inherit;
--label-color-horizontal: var(--label-color);
--label-color-vertical: var(--label-color);
--label-font-weight: var(--font-weight-base);
--label-colon-color: inherit;
--label-line-height: var(--input-height-base);
--label-white-space: nowrap;
--label-wrapper-padding-vertical: 0.1rem;
--label-wrapper-padding-horizontal: 0.04rem;
--label-wrapper-padding: var(--label-wrapper-padding-vertical) var(--label-wrapper-padding-horizontal);
--label-vertical-wrapper-padding-vertical: 0rem;
--label-output-wrapper-padding-vertical: 0.01rem;
--label-basic-line-height: calc(34 / 13);
--field-help-color: var(--text-color-secondary);
--field-icon-help-color: var(--text-color-secondary);
--field-icon-help-font-size: var(--icon-font-size-sm);
--form-item-wrapper-padding-vertical: 0.1rem;
--form-item-wrapper-padding-horizontal: 0.05rem;
--form-item-wrapper-padding: var(--form-item-wrapper-padding-vertical) var(--form-item-wrapper-padding-horizontal);
--form-item-wrapper-output-padding-vertical: 0.01rem;
--form-item-margin-top: 0.07rem;
--form-item-margin-bottom: 0.2rem;
--form-item-trailing-colon: true;
--form-vertical-label-padding: 0 0 0.08rem;
--form-vertical-label-margin: 0rem;
--float-label-wrapper-border-top-color: var(--component-background);
--float-label-transform-origin-high: 0.1rem -330%;
--float-label-height-base: 0.36rem;
--float-label-height-lg: 0.4rem;
--float-label-height-sm: 0.3rem;
--float-label-autofill-margin: 0.02rem;
--float-label-line-height: 0.34rem;
--float-label-line-height-lg: 0.38rem;
--float-label-line-height-sm: 0.28rem;
--float-label-color: var(--label-color);
--float-label-font-size: 0.15rem;
--float-label-font-weight: 500;
--float-label-active-height: var(--float-label-line-height);
--float-label-active-bg: unset;
--float-label-active-padding: 0rem;
--float-form-item-margin-top: var(--form-item-margin-top);
--float-form-item-margin-bottom: var(--form-item-margin-bottom);
--float-form-item-wrapper-padding-vertical: 0rem;
--input-primary-color: #3f51b5;
--input-height-base: 0.3rem;
--input-height-lg: 0.4rem;
--input-height-sm: 0.24rem;
--input-font-size-base: var(--font-size-base);
--input-font-weight-base: unset;
--input-line-height-base: var(--line-height-base);
--input-padding-horizontal: calc(var(--control-padding-horizontal) - 0.02rem);
--input-padding-horizontal-base: var(--input-padding-horizontal);
--input-padding-horizontal-sm: calc(var(--control-padding-horizontal-sm) - 0.02rem);
--input-padding-horizontal-lg: var(--input-padding-horizontal);
--input-padding-vertical-base: var(--padding-vertical-base);
--input-padding-vertical-sm: var(--padding-vertical-sm);
--input-padding-vertical-lg: var(--padding-vertical-lg);
--input-placeholder-color: #bfbfbf;
--input-info-color: rgba(0, 0, 0, 0.54);
--input-active-color: var(--text-color);
--input-active-box-shadow: none;
--input-color: #000000;
--input-baseline-color: rgba(0, 0, 0, 0.54);
--input-border-color: #d9d9d9;
--input-border-radius: var(--border-radius-base);
--input-error-border-color: var(--error-color);
--input-error-active-box-shadow: var(--input-active-box-shadow);
--input-required-border-color: var(--input-border-color);
--input-highlight-border-color: #47B881;
--input-wrapper-bg: var(--component-background);
--input-bg: transparent;
--input-required-bg: #feffe6;
--input-error-bg: var(--error-bg-color);
--input-addon-bg: var(--background-color-light);
--input-focus-border-color: #b6bfdb;
--input-hover-border-color: #6374c2;
--input-required-focus-border-color: #b6bfdb;
--input-required-hover-border-color: var(--input-hover-border-color);
--input-required-active-box-shadow: var(--input-active-box-shadow);
--input-float-border-color: var(--input-border-color);
--input-float-border-radius: 0.05rem;
--input-float-border-active-width: 0.02rem;
--input-float-required-border-color: var(--input-required-border-color);
--input-float-highlight-border-color: var(--input-highlight-border-color);
--input-float-required-bg: var(--component-background);
--input-float-error-bg: var(--component-background);
--input-float-disabled-bg: var(--component-background);
--input-float-focus-border-color: var(--input-focus-border-color);
--input-float-required-focus-border-color: var(--input-float-focus-border-color);
--input-float-hover-border-color: var(--input-color);
--input-float-required-hover-border-color: var(--input-float-hover-border-color);
--input-float-disabled-border-style: dashed;
--input-float-disabled-border-color: var(--input-float-border-color);
--input-disabled-bg: var(--disabled-bg);
--input-disabled-color: rgba(0, 0, 0, 0.54);
--input-disabled-icon-color: var(--input-disabled-color);
--input-icon-width-base: 0.24rem;
--input-icon-width-lg: 0.3rem;
--input-icon-width-sm: 0.2rem;
--input-icon-color: inherit;
--input-prefix-width-base: var(--input-icon-width-base);
--input-prefix-color: inherit;
--input-suffix-width-base: var(--input-icon-width-base);
--input-suffix-height: 0.2rem;
--input-suffix-color: inherit;
--input-suffix-hover-color: var(--input-suffix-color);
--input-suffix-error-color: var(--input-suffix-color);
--input-button-width: var(--input-suffix-width-base);
--input-addon-bg: #eee;
--input-addon-color: unset;
--input-addon-font-size: unset;
--input-tag-default-color: var(--tag-default-color);
--input-tag-default-bg: var(--tag-default-bg);
--input-tag-error-color: var(--tag-default-color);
--input-tag-error-bg: var(--error-color);
--input-tag-disabled-color: var(--tag-default-color);
--input-tag-disabled-bg: var(--disabled-color);
--input-tag-close-color: inherit;
--input-tag-close-hover-color: inherit;
--input-tag-height-base: 0.24rem;
--input-tag-line-height-base: 0.22rem;
--input-tag-margin-vertical: 0.01rem;
--input-tag-border-radius: var(--input-border-radius);
--input-tag-extra-space: 0.24rem;
--input-float-tag-height-base: 0.2rem;
--input-float-tag-line-height-base: 0.2rem;
--input-float-tag-margin-vertical: var(--input-tag-margin-vertical);
--input-float-tag-padding: 0 0.02rem 0 0.08rem;
--input-float-tag-border-radius: 0.12rem;
--input-float-tag-error-bg: var(--error-color);
--input-float-tag-close-color: var(--tag-multiple-color);
--input-float-tag-close-line-height: 0.2rem;
--input-float-tag-close-font-size: 0.16rem;
--input-float-tag-close-vertical-align: top;
--input-multiple-height-base: auto;
--input-multiple-height-lg: var(--input-multiple-height-base);
--input-multiple-height-sm: var(--input-multiple-height-base);
--input-multiple-margin: 0rem;
--input-multiple-padding: 0.01rem 0;
--input-multiple-input-margin: 0 0 0 var(--input-padding-horizontal);
--input-float-multiple-margin: 0 0 0 0.03rem;
--input-float-multiple-padding: 0.07rem 0;
--textarea-padding: 0.04rem var(--input-padding-horizontal);
--input-number-handler-inner-distance: -0.05rem;
--input-basic-height: 0.36rem;
--input-basic-autofill-height: 0.32rem;
--input-basic-hover-border-color: var(--input-color);
--input-basic-focus-border-width: 0.02rem;
--input-basic-focus-border-color: var(--primary-color);
--input-basic-disabled-border-style: dashed;
--input-basic-disabled-bg: unset;
--mentions-measure-padding: 0.07rem 0.13rem 0.07rem 0.1rem;
--output-line-height: 0.28rem;
--output-font-weight: var(--font-weight-base);
--output-word-break: normal;
--output-white-space: normal;
--output-color: unset;
--output-tag-margin: var(--tag-margin);
--output-float-label-font-size: 0.12rem;
--output-float-label-line-height: 0.18rem;
--process-icon-color: var(--icon-text-color);
--process-icon-hover-color: var(--process-icon-color);
--process-icon-dot-bg: var(--processing-color);
--process-icon-bg: var(--processing-color);
--process-icon-border-color: var(--processing-color);
--process-icon-hover-border-color: var(--process-icon-border-color);
--process-title-color: var(--heading-color);
--process-title-hover-color: var(--process-title-color);
--process-title-font-weight: 500;
--process-description-color: var(--text-color);
--process-description-hover-color: var(--process-description-color);
--process-tail-color: var(--step-border-color);
--icon-text-color: #fff;
--wait-icon-color: var(--icon-text-color);
--wait-icon-hover-color: var(--wait-icon-color);
--wait-icon-dot-bg: var(--step-wait-color);
--wait-icon-bg: var(--step-wait-color);
--wait-icon-border-color: var(--step-wait-color);
--wait-icon-hover-border-color: var(--wait-icon-border-color);
--wait-title-color: var(--text-color-secondary);
--wait-title-hover-color: var(--wait-title-color);
--wait-description-color: var(--wait-title-color);
--wait-description-hover-color: var(--wait-description-color);
--wait-tail-color: var(--process-tail-color);
--finish-icon-color: var(--icon-text-color);
--finish-icon-hover-color: var(--finish-icon-color);
--finish-icon-dot-bg: var(--process-icon-bg);
--finish-icon-bg: var(--process-icon-bg);
--finish-icon-border-color: var(--process-icon-bg);
--finish-icon-hover-border-color: var(--finish-icon-border-color);
--finish-title-color: var(--text-color);
--finish-title-hover-color: var(--finish-title-color);
--finish-description-color: var(--text-color-secondary);
--finish-description-hover-color: var(--finish-description-color);
--finish-tail-color: var(--process-tail-color);
--error-icon-color: var(--icon-text-color);
--error-icon-hover-color: var(--error-icon-color);
--error-icon-dot-bg: var(--error-color);
--error-icon-bg: var(--error-color);
--error-icon-border-color: var(--error-color);
--error-icon-hover-border-color: var(--error-icon-border-color);
--error-title-color: var(--error-color);
--error-title-hover-color: var(--error-title-color);
--error-description-color: var(--error-color);
--error-description-hover-color: var(--error-description-color);
--error-tail-color: var(--process-tail-color);
--steps-background: var(--component-background);
--steps-icon-size: 0.28rem;
--steps-icon-font-size: var(--font-size-lg);
--steps-item-dropdown-icon-font-size: var(--steps-icon-font-size);
--steps-icon-border-width: 0rem;
--steps-icon-border-style: var(--border-style-base);
--steps-icon-border-color: var(--border-color-base);
--steps-small-item-title-font-size: var(--font-size-base);
--steps-small-icon-size: 0.24rem;
--steps-dot-size: 0.08rem;
--steps-current-dot-size: 0.1rem;
--steps-desciption-max-width: 1.4rem;
--steps-title-min-width: 1.76rem;
--steps-item-cursor: unset;
--step-border-color: rgba(0, 0, 0, 0.26);
--step-wait-color: rgba(0, 0, 0, 0.36);
--steps-item-dropdown-icon-size: 0.3rem;
--steps-item-title-icon-margin: 0 0 0 0.16rem;
--steps-vertical-item-icon-margin-right: 0.16rem;
--steps-vertical-item-tail-left: 0.16rem;
--steps-tail-size: 0.01rem;
--tooltip-font-size: unset;
--tooltip-max-width: 4rem;
--tooltip-min-width: 0.3rem;
--tooltip-min-height: 0.32rem;
--tooltip-color: var(--text-color-dark);
--tooltip-bg: rgba(0, 0, 0, 0.75);
--tooltip-arrow-width: 0.05rem;
--tooltip-distance: calc(var(--tooltip-arrow-width) + 0.03rem);
--tooltip-arrow-color: var(--tooltip-bg);
--tooltip-color-light: var(--text-color);
--tooltip-bg-light: var(--component-background);
--tooltip-arrow-color-light: var(--tooltip-bg-light);
--tooltip-line-height: inherit;
--tooltip-link-color-dark: var(--link-color);
--tooltip-box-shadow-light: var(--box-shadow-base);
--tooltip-box-shadow: var(--box-shadow-base);
--tooltip-padding: 0.06rem 0.08rem;
--tooltip-border-radius: calc(var(--border-radius-base) * 2);
--popover-bg: var(--component-background);
--popover-color: var(--text-color);
--popover-min-width: 1.77rem;
--popover-min-height: 0.32rem;
--popover-arrow-offset: 0.02rem;
--popover-arrow-width: 0.05rem;
--popover-arrow-color: var(--popover-bg);
--popover-arrow-outer-color: var(--popover-bg);
--popover-distance: calc(var(--popover-arrow-width) + 0.04rem);
--popover-message-padding: 0.04rem 0 0.12rem;
--popover-message-title-padding: 0 0 0 calc(var(--font-size-base) + 0.08rem);
--popover-title-padding: 0.05rem var(--padding-md) 0.04rem;
--popover-content-under-title-padding: var(--popover-title-padding);
--popover-title-border-bottom: var(--border-width-base) var(--border-style-base) var(--border-color-split);
--popover-title-font-weight: 500;
--popover-title-font-size: unset;
--popover-inner-content-padding: 0.12rem var(--padding-md);
--popover-line-height: unset;
--popover-warning-icon-top: unset;
--modal-font-size-lg: 0.18rem;
--modal-font-size-base: var(--modal-font-size-lg);
--modal-title-color: var(--heading-color);
--modal-title-font-size-base: var(--modal-font-size-base);
--modal-title-font-weight: 500;
--modal-title-line-height: 0.24rem;
--modal-confirm-title-color: var(--modal-title-color);
--modal-confirm-title-font-size-base: 0.2rem;
--modal-confirm-title-font-weight: var(--modal-title-font-weight);
--modal-confirm-title-line-height: 0.32rem;
--modal-mask-bg: rgba(0, 0, 0, 0.288);
--modal-content-shadow: var(--shadow-2);
--modal-header-padding: 0.15rem 0.24rem;
--modal-body-padding: 0.24rem;
--modal-footer-padding: 0.12rem 0.24rem;
--modal-drawer-header-padding: var(--modal-header-padding);
--modal-drawer-body-padding: var(--modal-body-padding);
--modal-drawer-footer-padding: var(--modal-footer-padding);
--modal-header-footer-border: var(--border-width-base) var(--border-style-base) var(--border-color-base);
--modal-drawer-footer-text-align: left;
--modal-confirm-icon-padding: 0 0.16rem 0 0;
--modal-confirm-icon-font-size: 0.24rem;
--modal-confirm-icon-line-height: 1.5;
--modal-no-border-header-padding: var(--modal-header-padding);
--modal-basic-footer-padding: 0.12rem 0;
--progress-default-color: var(--processing-color);
--progress-remaining-color: var(--background-color-base);
--progress-loading-size-sm: 0.2rem;
--progress-loading-size-base: 0.3rem;
--progress-loading-size-lg: 0.5rem;
--menu-first-level-title-font-size: var(--font-size-base);
--menu-inline-toplevel-item-height: 0.4rem;
--menu-horizontal-line-height: 0.46rem;
--menu-horizontal-hover-bg: transparent;
--menu-horizontal-border-bottom: var(--border-width-base) var(--border-style-base) var(--border-color-split);
--menu-horizontal-selected-font-weight: unset;
--menu-horizontal-root-selected-bg: unset;
--menu-not-horizontal-padding: unset;
--menu-vertical-submenu-arrow-right: 0.16rem;
--menu-item-height: 0.4rem;
--menu-collapsed-width: 0.8rem;
--menu-bg: var(--component-background);
--menu-item-color: var(--text-color);
--menu-highlight-color: var(--primary-color);
--menu-item-active-bg: var(--item-active-bg);
--menu-item-group-title-color: var(--text-color-secondary);
--menu-item-group-title-padding: 0.08rem 0.16rem;
--menu-item-group-title-line-height: var(--line-height-base);
--menu-item-padding: 0 0.16rem 0 0.28rem;
--menu-active-line-width: 0.02rem;
--menu-submenu-margin: unset;
--menu-popup-item-group-border-bottom: unset;
--menu-popup-sub-padding: unset;
--menu-dark-color: var(--text-color-secondary-dark);
--menu-dark-bg: var(--layout-header-background);
--menu-dark-arrow-color: #fff;
--menu-dark-submenu-bg: #000c17;
--menu-dark-highlight-color: #fff;
--menu-dark-item-selected-bg: var(--primary-color);
--spin-dot-size-sm: 0.2rem;
--spin-dot-size: 0.3rem;
--spin-dot-size-lg: 0.5rem;
--table-border: var(--border-width-base) var(--border-style-base) var(--border-color-base);
--table-outermost-border-top: var(--table-border);
--table-outermost-border-bottom: var(--table-border);
--table-cell-border-right: var(--border-width-base) var(--border-style-base) transparent;
--table-cell-border-bottom: var(--table-border);
--table-outermost-bordered-border-right: var(--table-border);
--table-outermost-bordered-border-left: var(--table-border);
--table-tfoot-cell-border-top: var(--table-border);
--table-last-row-cell-border-bottom: var(--border-width-base) var(--border-style-base) transparent;
--table-notbordered-thead-hover-border-right-color: var(--table-border-color);
--table-notbordered-body-border-bottom-color: var(--table-border-color);
--table-header-bg: var(--background-color-light);
--table-header-color: var(--heading-color);
--table-header-font-weight: 700;
--table-header-sort-bg: var(--background-color-base);
--table-row-hover-bg: var(--item-hover-bg);
--table-row-hover-editable-bg: unset;
--table-current-row-bg: var(--item-active-bg);
--table-even-row-bg: rgba(0, 0, 0, 0.02);
--table-cell-focus-bg: rgba(0, 0, 0, 0.08);
--table-selected-row-bg: rgba(161, 194, 250, 0.16);
--table-expanded-row-bg: #fbfbfb;
--table-mouse-batch-choose-bg: var(--table-selected-row-bg);
--table-padding-vertical: 0.05rem;
--table-padding-horizontal: var(--input-padding-horizontal);
--table-cell-font-weight: 400;
--table-cell-padding-vertical-base: 0.01rem;
--table-cell-padding-horizontal-base: 0.01rem;
--table-cell-padding-vertical-sm: var(--table-cell-padding-horizontal-base);
--table-cell-padding-horizontal-sm: var(--table-cell-padding-horizontal-base);
--table-header-cell-padding-vertical-base: var(--table-cell-padding-vertical-base);
--table-header-cell-padding-horizontal-base: var(--table-cell-padding-horizontal-base);
--table-header-cell-padding-vertical-sm: var(--table-cell-padding-vertical-sm);
--table-header-cell-padding-horizontal-sm: var(--table-cell-padding-horizontal-sm);
--table-footer-cell-padding-vertical-base: var(--table-cell-padding-vertical-base);
--table-footer-cell-padding-horizontal-base: var(--table-cell-padding-horizontal-base);
--table-footer-cell-padding-vertical-sm: var(--table-cell-padding-vertical-sm);
--table-footer-cell-padding-horizontal-sm: var(--table-cell-padding-horizontal-sm);
--table-split-color: var(--primary-color);
--table-editable-cell-border-radius-base: 0rem;
--table-editable-cell-border-color: var(--input-border-color);
--table-editable-cell-required-bg: var(--input-required-bg);
--table-editable-cell-required-border-color: var(--input-required-border-color);
--table-editable-cell-highlight-border-color: var(--input-highlight-border-color);
--table-editable-cell-error-bg: var(--error-bg-color);
--table-editable-cell-error-border-color: var(--input-error-border-color);
--table-editable-cell-disabled-bg: var(--input-disabled-bg);
--table-editable-cell-disabled-border-color: var(--input-disabled-color);
--table-customization-select-view-option-bg: rgba(0, 0, 0, 0.08);
--table-customization-form-padding-vertical: 0.05rem;
--table-customization-button-color: unset;
--table-customization-tree-treenode-padding: 0.03rem 0;
--table-customization-tree-treenode-title-margin: unset;
--table-customization-tree-treenode-content-height: 0.32rem;
--table-customization-tree-treenode-switcher-height: var(--table-customization-tree-treenode-content-height);
--table-customization-tree-treenode-switcher-padding: 0.05rem 0;
--table-customization-tree-treenode-dragging-bg-color: var(--component-background);
--table-customization-tree-treenode-switcher-icon-size: 0.18rem;
--table-customization-tree-treenode-switcher-icon-line-height: 0.22rem;
--table-border-color: var(--border-color-base);
--table-row-group-title-bg: #f5f5f5;
--table-row-group-title-color: inherit;
--table-cell-group-font-weight: var(--table-header-font-weight);
--table-icon-help-color: var(--primary-color);
--table-icon-help-content: '\e8fd';
--table-icon-help-size: var(--icon-font-size-base);
--table-icon-help-font-weight: inherit;
--table-icon-sort-hover-color: var(--primary-color);
--table-icon-sort-active-color: var(--table-icon-sort-hover-color);
--table-dynamic-filter-label-color: #6A6A6A;
--table-dynamic-filter-placeholder-color: var(--table-dynamic-filter-label-color);
--table-dynamic-filter-input-padding: 0.01rem 0.02rem;
--table-dynamic-filter-status-line-height: var(--line-height-base);
--table-dynamic-filter-expand-query-icon-color: unset;
--table-dynamic-filter-refresh-icon-hover-color: unset;
--table-dynamic-filter-single-action-buttons-margin: 0.02rem 0 0;
--table-dynamic-filter-required-border-color: var(--input-border-color);
--table-dynamic-filter-required-active-border-color: var(--primary-color);
--table-dynamic-filter-required-active-box-shadow: var(--input-required-active-box-shadow);
--table-dynamic-filter-number-step-height: 0.24rem;
--table-professional-query-button-padding: 0.1rem 0 0.1rem 0.7rem;
--table-professional-query-button-vertical-padding: 0.3rem 0 0.1rem 0.7rem;
--table-combo-filter-wrapper-margin: 0.04rem 0 0;
--table-combo-filter-content-margin: 0.04rem 0 0 0.08rem;
--table-combo-filter-single-line-divide-margin: 0.08rem 0.08rem 0.06rem 0.08rem;
--table-combo-filter-menu-reset-button-bg: var(--btn-secondary-bg);
--table-filter-item-icon-line-height: var(--line-height-base);
--table-summary-group-wrapper-justify-content: flex-end;
--table-summary-group-wrapper-margin: 0.08rem 0;
--table-buttons-more-dropdown-item-padding: 0 0.08rem;
--table-filter-search-close-icon-line-height: 0.2rem;
--table-cell-expand-btn-bg: var(--btn-default-bg);
--table-choosed-cell-bg: rgb(241 243 255);
--performance-table-header-bg: #f5f5f5;
--performance-table-active-row-bg: #f0f3ff;
--performance-table-scrollbar-bg: rgba(45, 45, 45, 0.05);
--performance-table-scrollbar-handle-bg: rgba(45, 45, 45, 0.5);
--performance-table-scrollbar-handle-active-bg: var(--performance-table-scrollbar-handle-bg);
--performance-table-scrollbar-handle-border-radius: 0.04rem;
--performance-table-scrollbar-border: none;
--performance-table-scrollbar-handle-horizontal-height: 0.08rem;
--performance-table-scrollbar-handle-vertical-width: 0.08rem;
--loader-spin-ring-wide: 3px;
--loader-duration-normal: 0.6s;
--tree-primary-color: #3f51b5;
--tree-bg: var(--component-background);
--tree-title-height: 24px;
--tree-child-padding: 18px;
--tree-directory-selected-color: #fff;
--tree-directory-selected-bg: var(--tree-primary-color);
--tree-node-hover-bg: var(--item-hover-bg);
--tree-node-selected-bg: #dadee8;
--tree-focus-bg: #e6ebf5;
--tree-node-padding: calc(var(--padding-xs) / 2);
--tree-checkbox-height: var(--tree-title-height);
--tree-active-color: var(--text-color);
--tree-line-margin-left: -0.01rem;
--tree-line-before-bottom: calc(-1 * var(--tree-node-padding));
--tree-switcher-icon-size: 0.18rem;
--tree-drag-over-color: white;
--tree-drag-over-bg: var(--tree-primary-color);
--tree-node-color: inherit;
--tree-node-hover-color: var(--tree-active-color);
--tree-node-selected-color: var(--tree-active-color);
--tree-select-treenode-selected-bg: var(--item-focus-bg);
--tree-select-treenode-active-bg: var(--item-active-bg);
--tree-select-content-wrapper-hover-bg: transparent;
--tree-select-content-wrapper-tree-node-selected-bg: transparent;
--tag-default-bg: var(--primary-color);
--tag-default-color: var(--text-color-dark);
--tag-multiple-color: rgba(255, 255, 255, 0.72);
--tag-font-size: var(--font-size-sm);
--tag-font-weight: inherit;
--tag-margin: 0 0.02rem;
--tag-padding: 0 0.08rem;
--tag-height: 0.22rem;
--tag-line-height: 0.2rem;
--tag-default-border-color: var(--tag-default-bg);
--tag-border: var(--border-width-base) var(--border-style-base) var(--tag-default-border-color);
--tag-has-color-color: #fff;
--tag-checkable-bg: transparent;
--tag-checkable-border-color: transparent;
--tag-checkable-not-checked-hover-color: var(--primary-color);
--tag-checkable-color: #000;
--tag-checkable-checked-color: #fff;
--tag-checkable-checked-bg: var(--primary-6);
--tag-checkable-active-bg: var(--primary-7);
--tag-checkable-not-checked-active-bg: transparent;
--tag-close-icon-font-weight: bold;
--carousel-dot-width: 16px;
--carousel-dot-height: 3px;
--carousel-dot-active-width: 24px;
--carousel-dot-active-bg: #fff;
--carousel-dot-padding: 0rem;
--carousel-dot-text-align: center;
--carousel-dot-border-radius: 0.01rem;
--carousel-btn-bg: #bfbfbf;
--carousel-arrows-bg: rgba(191, 191, 191, 0.15);
--carousel-arrows-hover-bg: rgba(191, 191, 191, 0.3);
--carousel-dark-color: #262626;
--carousel-icon-font-size: 0.2rem;
--badge-height: 0.2rem;
--badge-height-sm: 0.14rem;
--badge-dot-size: 0.06rem;
--badge-font-size: var(--font-size-sm);
--badge-font-size-sm: var(--font-size-sm);
--badge-font-weight: normal;
--badge-status-size: 0.06rem;
--badge-text-color: var(--text-color);
--badge-corner-background: var(--highlight-color);
--badge-corner-box-shadow: var(--shadow-3);
--badge-processing-color: var(--processing-color);
--rate-star-color: #fadb14;
--rate-star-bg: #d8d8d8;
--rate-line-height: 1;
--card-margin: 0;
--card-padding: 0rem;
--card-head-margin: 0 0 -0.01rem 0;
--card-head-border-bottom: var(--border-width-base) var(--border-style-base) var(--border-color-split);
--card-title-padding: var(--card-head-padding) 0;
--card-extra-padding: calc(var(--card-head-padding) + 0.015rem) 0;
--card-body-padding: var(--card-padding-base);
--card-body-color: unset;
--card-discription-color: var(--text-color-secondary);
--card-cover-margin: unset;
--card-actions-item-border-right: var(--border-width-base) var(--border-style-base) var(--border-color-split);
--card-actions-item-margin: 0.12rem 0;
--card-actions-item-padding: unset;
--card-grid-body-padding: 0rem;
--card-grid-body-margin: -0.01rem 0 0 -0.01rem;
--card-loading-body-padding: 0rem;
--card-head-color: var(--heading-color);
--card-head-background: var(--component-background);
--card-head-padding: 0.16rem;
--card-inner-head-padding: 0.12rem;
--card-inner-head-title-padding: var(--card-inner-head-padding) 0;
--card-inner-head-title-font-size: var(--font-size-base);
--card-inner-extra-padding: calc(var(--card-inner-head-padding) + 0.015rem) 0;
--card-inner-body-padding: 0.16rem var(--card-padding-base);
--card-padding-base: 0.24rem;
--card-padding-wider: 0.32rem;
--card-actions-background: var(--background-color-light);
--card-shadow: 0 0.02rem 0.08rem rgba(0, 0, 0, 0.09);
--card-head-height: 0.48rem;
--card-hover-border: rgba(0, 0, 0, 0.09);
--card-gird-padding: var(--card-padding-base);
--card-wider-padding-body: var(--card-padding-base) var(--card-padding-wider);
--card-wider-padding-head: 0 var(--card-padding-wider);
--tab-primary-color: #3f51b5;
--tabs-card-head-background: var(--background-color-light);
--tabs-card-height: 0.4rem;
--tabs-card-active-color: var(--tab-primary-color);
--tabs-title-font-size: var(--font-size-base);
--tabs-title-font-size-lg: var(--font-size-lg);
--tabs-title-font-size-sm: var(--font-size-base);
--tabs-ink-bar-bg-color: var(--tab-primary-color);
--tabs-ink-bar-display: block;
--tab-bar-margin: 0 0 0.16rem 0;
--tab-bar-padding: 0rem;
--tab-horizontal-margin: 0 0.32rem 0 0;
--tab-vertical-margin: 0 0 0.16rem 0;
--tab-horizontal-padding-vertical: 0.08rem;
--tab-horizontal-padding-horizontal: 0rem;
--tab-horizontal-padding: var(--tab-horizontal-padding-vertical) var(--tab-horizontal-padding-horizontal);
--tab-vertical-padding-vertical: var(--tab-horizontal-padding-vertical);
--tab-vertical-padding-horizontal: 0.24rem;
--tab-vertical-padding: var(--tab-vertical-padding-vertical) var(--tab-vertical-padding-horizontal);
--tab-scrolling-size: 0.32rem;
--tab-highlight-color: var(--tab-primary-color);
--tab-highlight-font-weight: 500;
--tab-normal-color: rgba(0, 0, 0, 0.87);
--tab-hover-color: #6374c2;
--tab-active-color: #2b378f;
--tabs-groups-ink-bar-display: var(--tabs-ink-bar-display);
--tab-groups-padding: 0.02rem;
--tab-groups-bar-padding: var(--tab-bar-padding);
--tab-groups-horizontal-padding: var(--tab-horizontal-padding);
--tab-groups-vertical-padding: var(--tab-vertical-padding);
--tabs-tab-horizontal-padding-sm: 0.08rem 0;
--tabs-tab-horizontal-padding-lg: 0.16rem;
--tabs-second-tab-color: rgba(0, 0, 0, 0.45);
--tabs-bar-top-border-bottom: var(--border-width-base) var(--border-style-base) var(--border-color-split);
--tabs-bar-bottom-border-top: var(--border-width-base) var(--border-style-base) var(--border-color-split);
--tabs-bar-vertical-right-border-left: var(--border-width-base) var(--border-style-base) var(--border-color-split);
--tabs-bar-vertical-left-border-right: var(--border-width-base) var(--border-style-base) var(--border-color-split);
--tabs-ink-bar-bottom: 0.01rem;
--tabs-ink-bar-height: 0.02rem;
--tabs-ink-bar-zindex: 1;
--tabs-card-tab-padding: 0 0.16rem;
--tabs-card-tab-border: var(--border-width-base) var(--border-style-base) var(--border-color-split);
--tabs-groups-group-bg-color: rgba(0, 0, 0, 0.05);
--tabs-groups-group-border-radius: 0rem;
--tabs-groups-group-item-line-height: unset;
--tabs-groups-group-item-font-size: 0.14rem;
--tabs-groups-group-item-color: rgba(0, 0, 0, 0.45);
--tabs-groups-group-item-padding: 0.03rem 0.08rem;
--tabs-groups-group-item-border-radius: 0rem;
--tabs-groups-group-item-active-color: var(--text-color);
--tabs-groups-group-item-selected-color: rgba(0, 0, 0, 0.8);
--tabs-groups-group-item-selected-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.15);
--tabs-bar-divider-margin: auto 0.15rem;
--tabs-vertical-left-content-padding: 0 0 0 0.24rem;
--tabs-card-bar-border: var(--border-width-base) var(--border-style-base) var(--border-color-split);
--tabs-card-min-width: var(--tabs-card-height);
--tabs-card-active-background: var(--component-background);
--tabs-card-border-radius: var(--border-radius-base) var(--border-radius-base) 0 0;
--tabs-card-tab-margin-right: 0.02rem;
--tabs-card-font-size: var(--tabs-title-font-size);
--tabs-arrow-show-border: unset;
--tabs-groups-tab-font-size: unset;
--tabs-badge-content-size: 0.12rem;
--tabs-customization-text-icon-margin: unset;
--tabs-customization-drag-icon-margin: unset;
--tabs-customization-drag-icon-color: var(--text-color-secondary);
--tabs-card-arrow-show-border: var(--tabs-arrow-show-border);
--tabs-arrow-show-hover-color: var(--text-color);
--tabs-card-arrow-show-border-radius: unset;
--tabs-card-arrow-show-background-color: unset;
--tabs-card-arrow-show-hover-background-color: unset;
--tabs-card-hover-background: var(--tabs-card-head-background);
--tabs-icon-color: inherit;
--tabs-card-tab-border-bottom: 0rem;
--tabs-card-tab-transition: all var(--animation-duration-slow) var(--ease-in-out);
--tabs-card-tab-active-border-bottom: var(--tabs-card-tab-border-bottom);
--avatar-size-base: 0.32rem;
--avatar-size-lg: 0.4rem;
--avatar-size-sm: 0.24rem;
--avatar-font-size-base: 0.18rem;
--avatar-font-size-lg: 0.24rem;
--avatar-font-size-sm: 0.14rem;
--avatar-bg: #ccc;
--avatar-color: #fff;
--avatar-border-radius: var(--border-radius-base);
--avatar-group-overl