cloud-ui.vusion
Version:
Vusion Cloud UI
635 lines (589 loc) • 192 kB
CSS
:root {
/**
* ========================
* Global Variables
* ========================
*/
/* Brand Colors */
--brand-primary-lightest: #eaf2ff;
--brand-primary-lighter: #bbd4ff;
--brand-primary-light: #5c98ff;
--brand-primary: #337eff;
--brand-primary-dark: #1168ff;
--brand-primary-darker: #004bcc;
--brand-primary-darkest: #003eaa;
--brand-primary-disabled: #bbd4ff;
--brand-primary-opacity-20:#337eff33;
--brand-success-lightest: #e9f8f1;
--brand-success-lighter: #b0efd0;
--brand-success-light: #2ed581;
--brand-success: #26BD71;
--brand-success-dark: #22a864;
--brand-success-darker: #197e4b;
--brand-success-darkest: #15693f;
--brand-normal-lightest: #f2f9eb;
--brand-normal-lighter: #d8eec4;
--brand-normal-light: #97d362;
--brand-normal: #8acd4e;
--brand-normal-dark: #7ac437;
--brand-normal-darker: #5b932a;
--brand-normal-darkest: #4c7b23;
--brand-problem-lightest: #fffae8;
--brand-problem-lighter: #ffeca2;
--brand-problem-light: #ffda45;
--brand-problem: #ffd52e;
--brand-problem-dark: #ffce0c;
--brand-problem-darker: #c9a000;
--brand-problem-darkest: #a78600;
--brand-warning-lightest: #fef7e8;
--brand-warning-lighter: #ffb21a;
--brand-warning-light: #ffb82a;
--brand-warning: #FFB21A;
--brand-warning-dark: #f0a000;
--brand-warning-darker: #b47800;
--brand-warning-darkest: #966400;
--brand-error-lightest: #feecee;
--brand-error-lighter: #fab6bc;
--brand-error-light: #f56d79;
--brand-error: #F24957;
--brand-error-dark: #f02d33;
--brand-error-darker: #c70f14;
--brand-error-darkest: #a60c11;
--brand-danger-lightest: #ffeded;
--brand-danger-lighter: #ffc8c8;
--brand-danger-light: #ff6c6c;
--brand-danger: #F24957;
--brand-danger-dark: #ff3434;
--brand-danger-darker: #e60000;
--brand-danger-darkest: #c00000;
--brand-danger-opacity-20: #f2495733;
--brand-danger-disabled: #fbc2c7;
--brand-assist-lightest: #faf2ff;
--brand-assist-lighter: #efd9ff;
--brand-assist-light: #d599ff;
--brand-assist: #d08cff;
--brand-assist-dark: #be60ff;
--brand-assist-darker: #9a08ff;
--brand-assist-darkest: #8200db;
--brand-disabled-light: #ededed; /* 选择且禁用的背景 */
--brand-disabled: #ebebeb; /* 输入框、选择框的禁用背景 */
--brand-disabled-dark: #999; /* 禁用文本的颜色 */
--brand-disabled-darker: #9d9d9d; /* 禁用文本的颜色 */
/* Gray Colors */
--color-white: white;
--color-black: black;
--gray-darkest: #333;
--gray-darker: #666;
--gray-dark: #999;
--gray-base: #aaa;
--gray-light: #ccc;
--gray-lighter: #ddd;
--gray-lightest: #eee;
/* Component Base Colors */
--background-color-default: white; /* body 默认的背景 */
--background-color-default-inverse: #17181f; /* body 默认的背景 */
--background-color-lightest: #f4f4f4;
--background-color-lighter: #f4f6f9; /* 选择框的 hover 颜色 */
--background-color-lighter-inverse: #33353d; /* 选择框的 hover 颜色 */
--background-color-light: #f4f6f9; /* 表格等组件标题栏颜色 */
--background-color-base: #ededed; /* 标签、薯条等组件默认颜色 */
--background-color-base-inverse: #33353d; /* 标签、薯条等组件默认颜色 */
--background-color-dark: #e3e8f0;
--background-color-dark-inverse: #2e3038;
--background-color-darker: #d8dfea;
--background-color-disabled: #f5f5f5;
--background-color-hover: #f5f5f5;
--background-color-disabled-light: #F7F8FA;
--color-lighter: #ccc; /* Placeholder 字体颜色 */
--color-light: #999999; /* 次级字体颜色 */
--color-base: #333333; /* 默认字体颜色 */
--color-base-inverse: white; /* 默认字体颜色 */
--color-dark: #363a41; /* 默认字体颜色 */
--border-color-light: #dee4ed; /* 面板等容器类型的边框颜色 */
--border-color-base: #e5e5e5; /* 输入框等小组件的边框颜色 */
--border-color-base-inverse: #212123; /* 输入框等小组件的边框颜色 */
--border-color-dark: #E3E4E5; /* 按钮等小组件的边框颜色 */
--border-color-darker: #e0e0e0;
--font-first-color: #222222; /* 一级字色 */
--font-second-color: #666666; /* 二级字色 */
--font-third-color: #999999; /* 三级字色 */
--font-third-color-opacity-15: #99999926;
--font-third-color-opacity-60: #99999999;
--font-fourth-color: #333333; /* 三级字色 */
--font-disabled-color: #CCCCCC; /* 禁用字色 */
--font-disabled-color-opacity-50: #CCCCCC80;
/* Space Dimensions */
--space-shrink: -1px;
--space-mini: 4px;
--space-base: 16px;
--space-small: 10px;
--space-medium: 24px;
--space-large: 30px;
--space-huge: 40px;
/* Component Base Dimensions */
--border-width-base: 1px;
--width-mini: 80px;
--width-small: 120px;
--width-base: 240px; /* 以输入框、选择框为基准的尺寸 */
--width-medium: 280px;
--width-large: 440px;
--width-huge: 580px;
--height-mini: 22px;
--height-small: 28px;
--height-normal: 32px;
--height-base: 32px; /* 以输入框、选择框为基准的尺寸 */
--height-medium: 34px;
--height-large: 38px;
--height-huge: 42px;
--border-radius-mini: 2px;
--border-radius-base: 4px;
--border-radius-medium: 5px;
--border-radius-large: 4px;
/* Fonts */
/* stylelint-disable value-keyword-case */
--font-family-zh-CN: BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Tahoma, Arial, 'Noto Sans', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', -apple-system;
--font-family-code: menlo, consolas, monaco, monospace;
--tab-size: 4;
--line-height-base: 1.6;
--font-size-base: 14px;
--font-size-small: calc(var(--font-size-base) * (12 / 14));
--font-size-large: calc(var(--font-size-base) * (16 / 14));
--font-size-huge: calc(var(--font-size-base) * (24 / 14));
--font-weight-lighter: lighter;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-bold: 700;
--font-weight-bolder: bolder;
--box-shadow-base: 0 0 4px rgba(3, 3, 3, .1);
--box-shadow-small: 0px 2px 12px rgba(0, 0, 0, 0.06);
--box-shadow-small-hover: 0px 2px 16px rgba(0, 0, 0, 0.12);
--box-shadow-large: 0px 2px 15px rgba(64, 69, 78, 0.15);
--box-shadow-form-item-base: 0 0 0 2px var(--brand-primary-opacity-20);
/* Z-Index */
--z-index-loading: 9000;
--z-index-toast: 8000;
--z-index-tooltip: 7010;
--z-index-popper: 7000;
--z-index-modal: 5000;
--z-index-plugin: 2000;
--z-index-layout: 100;
--z-index-base: 1;
/* Component Action Hints */
--cursor-pointer: pointer;
--cursor-not-allowed: not-allowed;
--focus-outline: none;
/* Transition Duration */
--transition-duration-none: 0s;
--transition-duration-base: 0.2s;
--transition-duration-fast: 0.1s;
--transition-duration-slow: 0.3s;
--transition-duration-slower: 0.5s;
--transition-collapse-base: var(--transition-duration-base) height ease-in-out, var(--transition-duration-base) padding-top ease-in-out, var(--transition-duration-base) padding-bottom ease-in-out;
/**
* ========================
* 排版
* ========================
*/
--hr-border-color: var(--border-color-base);
--blockquote-padding: 8px 16px;
--ulol-padding-left: 20px;
--pre-font-size: var(--code-font-size);
--pre-font-family: var(--font-family-code);
--pre-padding-y: 5px;
--pre-padding-x: 10px;
--code-margin-x: 2px;
--code-padding-y: 3px;
--code-padding-x: 3px;
--code-background: var(--background-color-lighter);
--code-color: #e0276e;
--code-font-size: var(--font-size-small);
--kbd-padding-y: 2px;
--kbd-padding-x: 4px;
--kbd-font-size: var(--font-size-small);
--kbd-background: var(--background-color-base);
--kbd-border-width: var(--border-width-base);
--kbd-border-color: var(--border-color-dark);
--kbd-border-radius: var(--border-radius-base);
--kbd-box-shadow: 0 1px 1px rgba(0,0,0,.2), 0 2px 0 0 rgba(255,255,255,.7) inset;
--scrollbar-size: 4px;
--scrollbar-background: rgba(0, 0, 0, 0.15);
--scrollbar-background-inverse: rgba(0, 0, 0, 0.15);
--scrollbar-background-hover: rgba(0, 0, 0, 0.25);
--scrollbar-background-hover-inverse: rgba(0, 0, 0, 0.25);
--scrollbar-border-radius: 3px;
--scrollbar-border-color: transparent;
--scrollbar-border-width: 4px;
/**
* ========================
* 布局
* ========================
*/
/* @layouts l-dashboard */
--dashboard-background: var(--background-color-lightest);
--dashboard-padding: 40px;
/* @component u-crumb */
--crumb-color-link: var(--brand-primary); /* @type color */ /* @desc 可跳转链接的默认文字颜色,如：#223325 */
--crumb-color-disabled: var(--gray-darker); /* @type color */ /* @desc 禁用链接的默认文字颜色,如：#223325 */
--crumb-space-x: 6px; /* @desc 链接与箭头符号之间的间距,如：1px */
/* @component u-panel */
--panel-border-width: 1px; /* @desc 面板外边框宽度,如：1px */ /* @depStaticStyles ["border-top-width", "border-right-width", "border-bottom-width", "border-left-width"] */
--panel-border-radius: var(--border-radius-medium); /* @desc 面板外边框圆角,如：1px */ /* @depStaticStyles ["border-top-left-radius", "border-top-right-radius", "border-bottom-left-radius", "border-bottom-right-radius"] */
--panel-background: var(--background-color-default); /* @type color */ /* @desc 面板背景色,如：#223325 */ /* @depStaticStyles ["background-color"] */
--panel-box-shadow: var(--box-shadow-small); /* @desc 面板外边框阴影,如：1px */
--panel-head-padding-x: 24px; /* @desc 面板标题左右内边距,如：1px */
--panel-head-padding-y: 14px; /* @desc 面板标题上下内边距,如：1px */
--panel-body-padding-x: 24px; /* @desc 面板内容区内边距,如：1px */
--panel-body-padding-y: 18px; /* @desc 面板内容区内边距,如：1px */
--panel-title-font-size: 18px; /* @desc 面板标题字号大小,如：1px */
--panel-title-font-weight: bold; /* @desc 面板标题字体粗细,如：bold */
--panel-border-color: var(--border-color-light); /* @hidden */
--panel-box-shadow-hover: var(--box-shadow-small-hover); /* @hidden */
/* @component u-collapse */
--collapse-item-fill-background: var(--background-color-light); /* @type color */ /* @desc 面板项背景颜色,如：#223325 */
--collapse-border-width: var(--border-width-base); /* @desc 面板边框宽度,如：1px */
--collapse-border-color: var(--border-color-base); /* @type color */ /* @desc 面板边框颜色,如：#223325 */
--collapse-border-radius: var(--border-radius-base); /* @desc 面板边框圆角,如：1px */
--collapse-item-head-color-disabled: var(--brand-disabled-dark); /* @type color */ /* @desc 面板禁用项折叠表头文字颜色,如：#223325 */
--collapse-item-head-padding: 10px 20px 10px 40px; /* @desc 面板项折叠表头内边距,如：1px */
--collapse-item-expander-size: 42px; /* @desc 面板项展开箭头容器元素大小,如：1px */
--collapse-item-expander-color: var(--color-light); /* @type color */ /* @desc 面板项展开箭头颜色,如：#223325 */
--collapse-item-expander-color-disabled: var(--brand-disabled-dark); /* @type color */ /* @desc 面板项展开箭头颜色（禁用状态）,如：#223325 */
--collapse-item-expander-font-size: 18px; /* @desc 面板项展开箭头大小,如：1px */
--collapse-item-content-padding: 20px; /* @desc 面板项内容区内边距,如：1px */
--collapse-transition-duration: var(--transition-duration-base); /* @desc 面板展开动画快慢参数,如：0.2s */
--collapse-item-head-padding-small: 6px 8px 6px 32px; /* @hidden */
--collapse-item-head-padding-mini: 4px 8px 4px 28px; /* @hidden */
--collapse-item-expander-size-small: 34px; /* @hidden */
--collapse-item-expander-size-mini: 28px; /* @hidden */
--collapse-item-content-padding-mini: 10px; /* @hidden */
/* @component u-card @hidden */
--card-border-width: 1px;
--card-border-radius: var(--border-radius-base);
--card-background: var(--background-color-default);
--card-border-color: var(--border-color-light);
--card-box-shadow: var(--box-shadow-small);
--card-box-shadow-hover: var(--box-shadow-small-hover);
--card-head-padding-x: 12px;
--card-head-padding-y: 10px;
--card-body-padding-x: 12px;
--card-body-padding-y: 12px;
--card-title-font-size: 18px;
--card-title-font-weight: bold;
/* @component u-navbar-multi */
--navbar-height: 60px;/* @desc 导航栏高度 */
--navbar-space-x: 40px;/* @hidden */
--navbar-background: #333333;/* @type color */ /* @desc 导航栏背景颜色 */
--navbar-background-inverse: var(--brand-primary);/* @hidden */
--navbar-color: white;/* @type color */ /* @desc 导航栏字体颜色 */
--navbar-item-space: 30px;/* @hidden */
--navbar-item-padding: 0 10px;/* @hidden */
--navbar-item-font-size: var(--font-size-large);/* @hidden */
--navbar-item-background: transparent;/* @hidden */
--navbar-item-background-hover: transparent;/* @hidden */
--navbar-item-background-selected: transparent;/* @hidden */
--navbar-item-color: white;/* @type color */ /* @desc 导航栏菜单项字体颜色 */
--navbar-item-color-hover: white;/* @type color */ /* @desc 导航栏菜单项悬浮字体颜色 */
--navbar-item-color-selected: white;/* @type color */ /* @desc 导航栏菜单选中字体颜色 */
--navbar-item-color-disabled: var(--brand-disabled);/* @hidden */
--navbar-group-color: white;/* @type color */ /* @desc 导航栏分组字体颜色 */
--navbar-group-color-hover: white;/* @type color */ /* @desc 导航栏分组悬浮字体颜色 */
--navbar-divider-line-background: transparent;/* @type color */ /* @desc 导航栏菜单项分隔线颜色 */
--navbar-item-color-inverse: white;/* @hidden */
--navbar-item-line-transition-duration: 0.5s;/* @hidden */
--navbar-item-line-background: currentColor;/* @type color */ /* @desc 导航栏菜单项高亮线条颜色 */
--navbar-item-line-height: 3px;/* @hidden */
--navbar-divider-width: var(--border-width-base);/* @hidden */
--navbar-divider-height: 20px;/* @hidden */
--navbar-divider-background: #ddd;/* @type color */ /* @desc 导航栏分隔组件颜色 */
--navbar-dropdown-padding: 0 30px 0 10px;/* @hidden */
--navbar-dropdown-icon-font-size: 18px;/* @hidden */
--navbar-dropdown-popper-line-height: var(--line-height-base);/* @hidden */
--navbar-dropdown-popper-font-size: var(--font-size-base);/* @hidden */
--navbar-dropdown-popper-padding: 8px 0;/* @hidden */
--navbar-dropdown-popper-background: var(--navbar-menu-item-background);/* @hidden */
--navbar-dropdown-color-disabled: var(--brand-disabled);/* @hidden */
--navbar-menu-item-padding: 7px 18px;/* @hidden */
--navbar-menu-item-background: #232d3e;/* @hidden */
--navbar-menu-item-background-hover: #141d2b;/* @hidden */
--navbar-menu-item-color: inherit;/* @hidden */
--navbar-menu-item-color-hover: inherit;/* @hidden */
--navbar-menu-border-color: #232d3e;/* @hidden */
--navbar-menu-divider-background: var(--list-view-divider-background);/* @hidden */
--navbar-menu-box-shadow: 0 0 6px rgba(47, 53, 58, 0.3);/* @hidden */
--navbar-select-width: 90px;/* @hidden */
--navbar-select-padding-left: 10px;/* @hidden */
--navbar-select-padding-right: 30px;/* @hidden */
--navbar-select-hover-background: none;/* @hidden */
--navbar-select-focused-background: none;/* @hidden */
--navbar-select-item-padding: 2px 18px;/* @hidden */
--navbar-select-item-color: white;/* @hidden */
--navbar-select-item-background: #232d3e;/* @hidden */
--navbar-select-item-background-hover: #141d2b;/* @hidden */
--navbar-select-item-background-selected: white;/* @hidden */
--navbar-select-divider-background: var(--list-view-divider-background);/* @hidden */
--navbar-select-box-shadow: 0 0 6px rgba(47, 53, 58, 0.3);/* @hidden */
/* @component u-sidebar */
--sidebar-background: #ffffff; /* @desc 侧边栏背景色,如：#223325 */ /* @type color */ /* @excludeTags u-sidebar-item,u-sidebar-group,u-sidebar-divider */ /* @depStaticStyles { "u-sidebar": ["background-color"] } */
--sidebar-item-height: 54px; /* @group 项 */ /* @desc 侧边栏项高度,如：1px */ /* @prefix sidebar-item */ /* @excludeTags u-sidebar-divider */ /* @depStaticStyles { "u-sidebar-item": ["height"] } */
--sidebar-item-padding-left: 30px; /* @group 项 */ /* @desc 侧边栏项左边距,如：1px */ /* @prefix sidebar-item */ /* @excludeTags u-sidebar-divider */ /* @depStaticStyles { "u-sidebar-item": ["padding-left"] } */
--sidebar-item-background: #ffffff; /* @group 项 */ /* @desc 侧边栏项背景色,如：#223325 */ /* @prefix sidebar-item */ /* @type color */ /* @excludeTags u-sidebar-divider */ /* @depStaticStyles { "u-sidebar-item": ["background-color"] } */
--sidebar-item-background-selected: rgba(51,126,255,0.12); /* @group 项 */ /* @desc 侧边栏项选中背景色,如：#223325 */ /* @prefix sidebar-item */ /* @type color */ /* @excludeTags u-sidebar-divider */
--sidebar-item-background-disabled: #ffffff; /* @group 项 */ /* @desc 侧边栏项禁用背景色,如：#223325 */ /* @prefix sidebar-item */ /* @type color */ /* @excludeTags u-sidebar-divider */
--sidebar-item-background-selected-disabled: var(--brand-primary); /* @group 项 */ /* @desc 侧边栏项禁用选中背景色,如：#223325 */ /* @prefix sidebar-item */ /* @type color */ /* @excludeTags u-sidebar-divider */
--sidebar-item-color: #333333; /* @group 项 */ /* @desc 侧边栏项文字颜色,如：#223325 */ /* @prefix sidebar-item */ /* @type color */ /* @excludeTags u-sidebar-divider */ /* @depStaticStyles { "u-sidebar": ["color"], "u-sidebar-item": ["color"] } */
--sidebar-item-background-hover: var(--sidebar-item-background); /* @group 项 */ /* @desc 侧边栏项背景色（hover状态）,如：#223325 */ /* @prefix sidebar-item */ /* @type color */ /* @excludeTags u-sidebar-divider */
--sidebar-item-color-hover: var(--brand-primary); /* @group 项 */ /* @desc 侧边栏项文字颜色（hover状态）,如：#223325 */ /* @prefix sidebar-item */ /* @type color */ /* @excludeTags u-sidebar-divider */
--sidebar-item-color-selected: var(--brand-primary); /* @group 项 */ /* @desc 侧边栏项选中时文字颜色,如：#223325 */ /* @prefix sidebar-item */ /* @type color */ /* @excludeTags u-sidebar-divider */
--sidebar-item-color-disabled: #586475; /* @group 项 */ /* @desc 侧边栏项禁用文字颜色,如：#223325 */ /* @prefix sidebar-item */ /* @type color */ /* @excludeTags u-sidebar-divider */
--sidebar-item-border-right-width: 4px; /* @group 项 */ /* @desc 侧边栏项右边框宽度,如：1px */ /* @prefix sidebar-item */ /* @excludeTags u-sidebar-divider */ /* @depStaticStyles { "u-sidebar-item": ["border-right-width"] } */
--sidebar-item-border-right-color: var(--brand-primary); /* @group 项 */ /* @desc 侧边栏项右边框颜色,如：#223325 */ /* @prefix sidebar-item */ /* @type color */ /* @excludeTags u-sidebar-divider */ /* @depStaticStyles { "u-sidebar-item": ["border-color"] } */
--sidebar-item-border-bottom-width: 0px; /* @group 项 */ /* @desc 侧边栏项下边框宽度,如：1px */ /* @prefix sidebar-item */ /* @excludeTags u-sidebar-divider */ /* @depStaticStyles { "u-sidebar-item": ["border-bottom-width"] } */
--sidebar-item-border-bottom-color: #e5e5e5; /* @group 项 */ /* @desc 侧边栏项下边框颜色,如：#223325 */ /* @prefix sidebar-item */ /* @type color */ /* @excludeTags u-sidebar-divider */ /* @depStaticStyles { "u-sidebar-item": ["border-color"] } */
--sidebar-item-icon-font-size: 16px; /* @group 项 */ /* @desc 侧边栏项图标大小,如：1px */ /* @prefix sidebar-item */ /* @excludeTags u-sidebar-divider */
--sidebar-item-icon-color: var(--gray-light); /* @group 项 */ /* @desc 侧边栏项图标颜色,如：#223325 */ /* @prefix sidebar-item */ /* @type color */ /* @excludeTags u-sidebar-divider */
--sidebar-item-icon-color-hover: var(--sidebar-item-icon-color); /* @group 项 */ /* @desc 侧边栏项图标颜色（hover状态）,如：#223325 */ /* @prefix sidebar-item */ /* @type color */ /* @excludeTags u-sidebar-divider */
--sidebar-item-icon-color-selected: var(--sidebar-item-icon-color); /* @group 项 */ /* @desc 侧边栏项图标颜色（选中状态）,如：#223325 */ /* @prefix sidebar-item */ /* @type color */ /* @excludeTags u-sidebar-divider */
--sidebar-group-padding-left: 10px; /* @group 分组 */ /* @desc 侧边栏分组左边距,如：1px */ /* @prefix sidebar-group */ /* @excludeTags u-sidebar-item,u-sidebar-divider */ /* @depStaticStyles { "u-sidebar-group": ["padding-left"] } */
--sidebar-group-head-height: 52px; /* @group 分组 */ /* @desc 侧边栏分组头部高度,如：1px */ /* @prefix sidebar-group */ /* @excludeTags u-sidebar-item,u-sidebar-divider */
--sidebar-group-head-padding-left: 30px; /* @group 分组 */ /* @desc 侧边栏分组头部左边距,如：1px */ /* @prefix sidebar-group */ /* @excludeTags u-sidebar-item,u-sidebar-divider */
--sidebar-group-head-font-weight: var(--font-weight-bold); /* @group 分组 */ /* @desc 侧边栏分组头部字重,如：1px */ /* @prefix sidebar-group */ /* @excludeTags u-sidebar-item,u-sidebar-divider */
--sidebar-group-head-color: #333333; /* @group 分组 */ /* @desc 侧边栏分组头部字体颜色,如：#223325 */ /* @prefix sidebar-group */ /* @type color */ /* @excludeTags u-sidebar-item,u-sidebar-divider */
--sidebar-group-head-color-hover: var(--brand-primary); /* @group 分组 */ /* @desc 侧边栏分组头部字体颜色（hover状态）,如：#223325 */ /* @prefix sidebar-group */ /* @type color */ /* @excludeTags u-sidebar-item,u-sidebar-divider */
--sidebar-group-head-background-hover: #f5f5f5; /* @group 分组 */ /* @desc 侧边栏分组头部背景色（hover状态）,如：#223325 */ /* @prefix sidebar-group */ /* @type color */ /* @excludeTags u-sidebar-item,u-sidebar-divider */
--sidebar-group-head-color-selected: var(--brand-primary); /* @hidden */
--sidebar-group-head-border-bottom-width: 0px; /* @group 分组 */ /* @desc 侧边栏分组头部下边距宽度,如：1px */ /* @prefix sidebar-group */ /* @excludeTags u-sidebar-item,u-sidebar-divider */
--sidebar-group-head-border-bottom-color: #e5e5e5;/* @group 分组 */ /* @desc 侧边栏分组头部下边距颜色,如：#223325 */ /* @prefix sidebar-group */ /* @type color */ /* @excludeTags u-sidebar-item,u-sidebar-divider */
--sidebar-divider-margin-y: 8px; /* @group 分隔符 */ /* @desc 侧边栏分隔符左外边距,如：1px */ /* @prefix sidebar-divider */ /* @excludeTags u-sidebar-item,u-sidebar-group */ /* @depStaticStyles { "u-sidebar-divider": ["margin-top", "margin-bottom"] } */
--sidebar-divider-height: var(--border-width-base); /* @group 分隔符 */ /* @desc 侧边栏分隔符高度,如：1px */ /* @prefix sidebar-divider */ /* @excludeTags u-sidebar-item,u-sidebar-group */ /* @depStaticStyles { "u-sidebar-divider": ["height"] } */
--sidebar-divider-background: #3d4654; /* @group 分隔符 */ /* @desc 侧边栏分隔符背景色,如：#223325 */ /* @type color */ /* @prefix sidebar-divider */ /* @excludeTags u-sidebar-item,u-sidebar-group */ /* @depStaticStyles { "u-sidebar-divider": ["background-color"] } */
--sidebar-width: 240px; /* @hidden */
--sidebar-background-inverse: #2b333f; /* @hidden */
--sidebar-item-background-selected-inverse: #252b33; /* @hidden */
--sidebar-item-background-disabled-inverse: #2b333f; /* @hidden */
--sidebar-item-background-selected-disabled-inverse: #2b333f; /* @hidden */
--sidebar-item-height-small: 32px; /* @hidden */
--sidebar-item-border-right-width-small: 3px; /* @hidden */
--sidebar-item-color-inverse: #8594aa; /* @hidden */
--sidebar-item-color-hover-inverse: white; /* @hidden */
--sidebar-item-color-selected-inverse: white; /* @hidden */
--sidebar-group-head-color-inverse: #9dabc2; /* @hidden */
--sidebar-group-head-color-hover-inverse: white; /* @hidden */
--sidebar-group-head-color-selected-inverse: #9dabc2; /* @hidden */
--sidebar-group-popper-margin-left: 2px; /* @hidden */
--sidebar-expander-color-disabled: var(--brand-disabled); /* @hidden */
/* @component u-menu @hidden */
--menu-padding-y: 0;
--menu-background: white;
--menu-min-width: none;
--menu-background-hover: var(--background-color-light);
--menu-border-width: var(--border-width-base);
--menu-border-color: var(--border-color-base);
--menu-border-radius: 0;
--menu-box-shadow: var(--box-shadow-base);
--menu-item-padding: 5px 15px;
--menu-item-size: 32px;
--menu-item-color: var(--color-base);
--menu-divider-background: var(--border-color-base);
--menu-divider-margin-y: 9px;
--menu-divider-height: var(--border-width-base);
/* @component u-toc @hidden */
--toc-width: 200px;
--toc-padding: 5px;
--toc-circle-size: 9px;
--toc-item-circle-size: 5px;
--toc-font-size: 14px;
--toc-background: transparent;
--toc-border-width: var(--border-width-base);
--toc-border-color: var(--border-color-base);
/**
* ========================
* 展示
* ========================
*/
/* @component u-text */
--text-font-size: var(--font-size-base); /* @desc 文本字号大小,如：1px */ /* @depAttrs { "size": ["normal"] } */ /* @depStaticStyles ["font-size"] */
--text-font-size-small: var(--font-size-small); /* @desc 小号文本字号大小,如：1px */ /* @depAttrs { "size": ["small"] } */ /* @depStaticStyles ["font-size"] */
--text-font-size-large: calc(var(--font-size-base) * (18 / 14)); /* @desc 大号文本字号大小,如：1px */ /* @depAttrs { "size": ["large"] } */ /* @depStaticStyles ["font-size"] */
--text-font-size-huge: calc(var(--font-size-base) * (22 / 14)); /* @desc 巨大号文本字号大小,如：1px */ /* @depAttrs { "size": ["huge"] } */ /* @depStaticStyles ["font-size"] */
--text-color-primary: var(--brand-primary); /* @type color */ /* @desc 主要文本字体颜色,如：#223325 */ /* @depAttrs { "color": ["primary"] } */ /* @depStaticStyles ["color"] */
--text-color-secondary: var(--font-second-color); /* @type color */ /* @desc 次要文本字体颜色,如：#223325 */ /* @depAttrs { "color": ["secondary"] } */ /* @depStaticStyles ["color"] */
--text-color-success: var(--brand-success); /* @type color */ /* @desc 成功文本字体颜色,如：#223325 */ /* @depAttrs { "color": ["success"] } */ /* @depStaticStyles ["color"] */
--text-color-warning: var(--brand-warning); /* @type color */ /* @desc 警告文本字体颜色,如：#223325 */ /* @depAttrs { "color": ["warning"] } */ /* @depStaticStyles ["color"] */
--text-color-error: var(--brand-error); /* @type color */ /* @desc 错误文本字体颜色,如：#223325 */ /* @depAttrs { "color": ["error"] } */ /* @depStaticStyles ["color"] */
--text-color-disabled: var(--brand-disabled-dark); /* @type color */ /* @desc 禁用文本字体颜色,如：#223325 */ /* @depAttrs { "color": ["disabled"] } */
/* @component u-link */
--link-color: var(--brand-primary); /* @type color */ /* @desc 默认链接字体颜色,如：#223325 */ /* @depAttrs { "color": ["default", null] } */ /* @depStaticStyles ["color"] */
--link-color-light: #6eadff; /* @type color */ /* @desc 浅色链接字体颜色,如：#223325 */ /* @depAttrs { "color": ["light"] } */ /* @depStaticStyles ["color"] */
--link-color-success: var(--brand-success); /* @type color */ /* @desc 成功链接字体颜色,如：#223325 */ /* @depAttrs { "color": ["success"] } */ /* @depStaticStyles ["color"] */
--link-color-warning: var(--brand-warning); /* @type color */ /* @desc 警告链接字体颜色,如：#223325 */ /* @depAttrs { "color": ["warning"] } */ /* @depStaticStyles ["color"] */
--link-color-danger: var(--brand-danger); /* @type color */ /* @desc 危险链接字体颜色,如：#223325 */ /* @depAttrs { "color": ["danger"] } */ /* @depStaticStyles ["color"] */
--link-color-disabled: var(--font-disabled-color); /* @type color */ /* @desc 禁用链接字体颜色,如：#223325 */
--link-color-hover: var(--brand-primary-light); /* @type color */ /* @desc 默认链接字体颜色,如：#223325 */ /* @depAttrs { "color": ["default", null] } */
--link-color-success-hover: var(--brand-success-light); /* @type color */ /* @desc 成功链接字体颜色,如：#223325 */ /* @depAttrs { "color": ["success"] } */
--link-color-warning-hover: var(--brand-warning-light); /* @type color */ /* @desc 警告链接字体颜色,如：#223325 */ /* @depAttrs { "color": ["warning"] } */
--link-color-danger-hover: var(--brand-danger-light); /* @type color */ /* @desc 危险链接字体颜色,如：#223325 */ /* @depAttrs { "color": ["danger"] } */
--link-color-disabled-hover: var(--brand-disabled-light); /* @hidden */
--link-color-error: var(--brand-error); /* @hidden */
--link-color-error-hover: var(--brand-error-light); /* @hidden */
--link-color-white: white; /* @hidden */
/* @component u-button */
/* 宽度 */
--button-min-width: 78px; /* @hidden */
/* 高度 */
--button-height-mini: var(--height-mini); /* @desc Mini按钮高度,如：1px */ /* @depAttrs {"size": ["mini"]} */ /* @depStaticStyles ["height"] */
--button-height-small: var(--height-small); /* @desc Small按钮高度,如：1px */ /* @depAttrs {"size": ["small"]} */ /* @depStaticStyles ["height"] */
--button-height: var(--height-base); /* @desc 按钮高度,如：1px */ /* @depAttrs {"size": ["normal", null]} */ /* @depStaticStyles ["height"] */
--button-height-medium: var(--height-medium); /* @desc Medium按钮高度,如：1px */ /* @depAttrs {"size": ["medium"]} */ /* @depStaticStyles ["height"] */
--button-height-large: var(--height-large); /* @desc Large按钮高度,如：1px */ /* @depAttrs {"size": ["large"]} */ /* @depStaticStyles ["height"] */
--button-height-huge: var(--height-huge); /* @desc Huge按钮高度,如：1px */ /* @depAttrs {"size": ["huge"]} */ /* @depStaticStyles ["height"] */
/* 上下边距 */
--button-padding-y-mini: var(--button-padding-y); /* @desc Mini按钮垂直方向内边距,如：1px */ /* @depAttrs {"size": ["mini"]} */ /* @depStaticStyles ["padding-top", "padding-bottom"] */
--button-padding-y-small: var(--button-padding-y); /* @desc Small按钮垂直方向内边距,如：1px */ /* @depAttrs {"size": ["small"]} */ /* @depStaticStyles ["padding-top", "padding-bottom"] */
--button-padding-y: 0px; /* @desc 按钮垂直方向内边距,如：1px */ /* @depAttrs {"size": ["normal", null]} */ /* @depStaticStyles ["padding-top", "padding-bottom"] */
--button-padding-y-medium: var(--button-padding-y); /* @desc Medium按钮垂直方向内边距,如：1px */ /* @depAttrs {"size": ["medium"]} */ /* @depStaticStyles ["padding-top", "padding-bottom"] */
--button-padding-y-large: var(--button-padding-y); /* @desc Large按钮垂直方向内边距,如：1px */ /* @depAttrs {"size": ["large"]} */ /* @depStaticStyles ["padding-top", "padding-bottom"] */
--button-padding-y-huge: var(--button-padding-y); /* @desc Huge按钮垂直方向内边距,如：1px */ /* @depAttrs {"size": ["huge"]} */ /* @depStaticStyles ["padding-top", "padding-bottom"] */
/* 左右边距 */
--button-padding-x-mini: 16px; /* @desc Mini按钮水平方向内边距,如：1px */ /* @depAttrs {"size": ["mini"]} */ /* @depStaticStyles ["padding-left", "padding-right"] */
--button-padding-x-small: 20px; /* @desc Small按钮水平方向内边距,如：1px */ /* @depAttrs {"size": ["small"]} */ /* @depStaticStyles ["padding-left", "padding-right"] */
--button-padding-x: 24px; /* @desc 按钮水平方向内边距,如：1px */ /* @depAttrs {"size": ["normal", null]} */ /* @depStaticStyles ["padding-left", "padding-right"] */
--button-padding-x-medium: 28px; /* @desc Medium按钮水平方向内边距,如：1px */ /* @depAttrs {"size": ["medium"]} */ /* @depStaticStyles ["padding-left", "padding-right"] */
--button-padding-x-large: 32px; /* @desc Large按钮水平方向内边距,如：1px */ /* @depAttrs {"size": ["large"]} */ /* @depStaticStyles ["padding-left", "padding-right"] */
--button-padding-x-huge: 36px; /* @desc Huge按钮水平方向内边距,如：1px */ /* @depAttrs {"size": ["huge"]} */ /* @depStaticStyles ["padding-left", "padding-right"] */
/* 按钮背景颜色-默认 */
--button-background-primary: var(--brand-primary); /* @type color */ /* @desc 主要按钮背景色,如：#223325 */ /* @depAttrs {"color": ["primary"]} */ /* @depStaticStyles ["background-color"] */
--button-background-primary-secondary: white; /* @type color */ /* @desc 次要按钮背景色,如：#223325 */ /* @depAttrs {"color": ["primary_secondary"]} */ /* @depStaticStyles ["background-color"] */
--button-background: white; /* @type color */ /* @desc 按钮默认背景色,如：#223325 */ /* @depAttrs {"color": ["default", null]} */ /* @depStaticStyles ["background-color"] */
--button-background-danger: var(--brand-error); /* @type color */ /* @desc 危险按钮背景色,如：#223325 */ /* @depAttrs {"color": ["danger"]} */ /* @depStaticStyles ["background-color"] */
--button-background-danger-secondary: white; /* @type color */ /* @desc 次要危险按钮背景色,如：#223325 */ /* @depAttrs {"color": ["danger_secondary"]} */ /* @depStaticStyles ["background-color"] */
/* 按钮背景颜色-hover */
--button-background-primary-hover: var(--brand-primary-light); /* @type color */ /* @desc 主要按钮hover背景色,如：#223325 */ /* @depAttrs {"color": ["primary"]} */
--button-background-primary-secondary-hover: white; /* @type color */ /* @desc 次要按钮hover背景色,如：#223325 */ /* @depAttrs {"color": ["primary_secondary"]} */
--button-background-hover: white; /* @type color */ /* @desc 按钮hover背景色,如：#223325 */ /* @depAttrs {"color": ["default", null]} */
--button-background-danger-hover: var(--brand-error-light); /* @type color */ /* @desc 危险按钮hover背景色,如：#223325 */ /* @depAttrs {"color": ["danger"]} */
--button-background-danger-secondary-hover: white; /* @type color */ /* @desc 次要危险按钮hover背景色,如：#223325 */ /* @depAttrs {"color": ["danger_secondary"]} */
/* 按钮背景颜色-active */
--button-background-primary-active: var(--brand-primary); /* @type color */ /* @desc 主要按钮背景色（激活状态）,如：#223325 */ /* @depAttrs {"color": ["primary"]} */
--button-background-primary-secondary-active: white; /* @type color */ /* @desc 次要按钮背景色（激活状态）,如：#223325 */ /* @depAttrs {"color": ["primary_secondary"]} */
--button-background-active: white; /* @type color */ /* @desc 按钮背景色（激活状态）,如：#223325 */ /* @depAttrs {"color": ["default", null]} */
--button-background-danger-active: var(--brand-error); /* @type color */ /* @desc 危险按钮背景色（激活状态）,如：#223325 */ /* @depAttrs {"color": ["danger"]} */
--button-background-danger-secondary-active: white; /* @type color */ /* @desc 次要危险按钮背景色（激活状态）,如：#223325 */ /* @depAttrs {"color": ["danger_secondary"]} */
/* 按钮背景颜色-disabled */
--button-background-primary-disabled: var(--brand-primary-disabled); /* @type color */ /* @desc 主要按钮背景色（禁用状态）,如：#223325 */ /* @depAttrs {"color": ["primary"]} */
--button-background-primary-secondary-disabled: var(--button-background-disabled); /* @type color */ /* @desc 次要按钮背景色（禁用状态）,如：#223325 */ /* @depAttrs {"color": ["primary_secondary"]} */
--button-background-disabled: #f5f5f5; /* @type color */ /* @desc 按钮背景色（禁用状态）,如：#223325 */ /* @depAttrs {"color": ["default", null]} */
--button-background-danger-disabled: var(--brand-error-lighter); /* @type color */ /* @desc 危险按钮背景色（禁用状态）,如：#223325 */ /* @depAttrs {"color": ["danger"]} */
--button-background-danger-secondary-disabled: var(--button-background-disabled); /* @type color */ /* @desc 次要危险按钮背景色（禁用状态）,如：#223325 */ /* @depAttrs {"color": ["danger_secondary"]} */
/* 按钮边框颜色-默认 */
--button-border-color-primary: var(--button-background-primary); /* @type color */ /* @desc 主要按钮边框颜色,如：#223325 */ /* @depAttrs {"color": ["primary"]} */ /* @depStaticStyles ["border-color"] */
--button-border-color-primary-secondary: var(--button-background-primary); /* @type color */ /* @desc 次要按钮边框颜色,如：#223325 */ /* @depAttrs {"color": ["primary_secondary"]} */ /* @depStaticStyles ["border-color"] */
--button-border-color: var(--border-color-dark); /* @type color */ /* @desc 按钮边框颜色,如：#223325 */ /* @depAttrs {"color": ["default", null]} */ /* @depStaticStyles ["border-color"] */
--button-border-color-danger: var(--button-background-danger); /* @type color */ /* @desc 危险按钮边框颜色,如：#223325 */ /* @depAttrs {"color": ["danger"]} */ /* @depStaticStyles ["border-color"] */
--button-border-color-danger-secondary: var(--button-background-danger); /* @type color */ /* @desc 次要危险按钮边框颜色,如：#223325 */ /* @depAttrs {"color": ["danger_secondary"]} */ /* @depStaticStyles ["border-color"] */
/* 按钮边框颜色-hover */
--button-border-color-primary-hover: var(--button-background-primary-hover); /* @type color */ /* @desc 主要按钮边框颜色(hover状态),如：#223325 */ /* @depAttrs {"color": ["primary"]} */
--button-border-color-primary-secondary-hover: var(--brand-primary-light); /* @type color */ /* @desc 次要按钮边框颜色(hover状态),如：#223325 */ /* @depAttrs {"color": ["primary_secondary"]} */
--button-border-color-hover: var(--brand-primary); /* @type color */ /* @desc 按钮边框颜色(hover状态),如：#223325 */ /* @depAttrs {"color": ["default", null]} */
--button-border-color-danger-hover: var(--button-background-danger-hover); /* @type color */ /* @desc 危险按钮边框颜色(hover状态),如：#223325 */ /* @depAttrs {"color": ["danger"]} */
--button-border-color-danger-secondary-hover: var(--brand-error-light); /* @type color */ /* @desc 次要危险按钮边框颜色(hover状态),如：#223325 */ /* @depAttrs {"color": ["danger_secondary"]} */
/* 按钮边框颜色-active */
--button-border-color-primary-active: var(--button-background-primary-active); /* @type color */ /* @desc 主要按钮边框颜色(active状态),如：#223325 */ /* @depAttrs {"color": ["primary"]} */
--button-border-color-primary-secondary-active: var(--brand-primary); /* @type color */ /* @desc 次要按钮边框颜色(active状态),如：#223325 */ /* @depAttrs {"color": ["primary_secondary"]} */
--button-border-color-active: var(--brand-primary); /* @type color */ /* @desc 按钮边框颜色(active状态),如：#223325 */ /* @depAttrs {"color": ["default", null]} */
--button-border-color-danger-active: var(--button-background-danger-active); /* @type color */ /* @desc 危险按钮边框颜色(active状态),如：#223325 */ /* @depAttrs {"color": ["danger"]} */
--button-border-color-danger-secondary-active: var(--danger-primary); /* @type color */ /* @desc 次要危险按钮边框颜色(active状态),如：#223325 */ /* @depAttrs {"color": ["danger_secondary"]} */
/* 按钮边框颜色-disabled */
--button-border-color-primary-disabled: var(--button-background-primary-disabled); /* @type color */ /* @desc 主要按钮边框颜色（禁用状态）,如：#223325 */ /* @depAttrs {"color": ["primary"]} */
--button-border-color-primary-secondary-disabled: var(--button-border-color-disabled); /* @type color */ /* @desc 次要按钮边框颜色（禁用状态）,如：#223325 */ /* @depAttrs {"color": ["primary_secondary"]} */
--button-border-color-disabled: #e5e5e5; /* @type color */ /* @desc 按钮边框颜色（禁用状态）,如：#223325 */ /* @depAttrs {"color": ["default", null]} */
--button-border-color-danger-disabled: var(--button-background-danger-disabled); /* @type color */ /* @desc 危险按钮边框颜色（禁用状态）,如：#223325 */ /* @depAttrs {"color": ["danger"]} */
--button-border-color-danger-secondary-disabled: var(--button-border-color-disabled); /* @type color */ /* @desc 次要危险按钮边框颜色（禁用状态）,如：#223325 */ /* @depAttrs {"color": ["danger_secondary"]} */
/* 文字大小 */
--button-font-size-mini: var(--font-size-small); /* @desc Mini按钮文本字体大小,如：1px */ /* @depAttrs {"size": ["mini"]} */ /* @depStaticStyles ["font-size"] */
--button-font-size-small: inherit; /* @desc Small按钮文本字体大小,如：1px */ /* @depAttrs {"size": ["small"]} */ /* @depStaticStyles ["font-size"] */
--button-font-size: inherit; /* @desc 按钮文本字体大小,如：1px */ /* @depAttrs {"size": ["normal", null]} */ /* @depStaticStyles ["font-size"] */
--button-font-size-medium: inherit; /* @desc Medium按钮文本字体大小,如：1px */ /* @depAttrs {"size": ["medium"]} */ /* @depStaticStyles ["font-size"] */
--button-font-size-large: var(--font-size-large); /* @desc Large按钮文本字体大小,如：1px */ /* @depAttrs {"size": ["large"]} */ /* @depStaticStyles ["font-size"] */
--button-font-size-huge: var(--font-size-huge); /* @desc Huge按钮文本字体大小,如：1px */ /* @depAttrs {"size": ["huge"]} */ /* @depStaticStyles ["font-size"] */
/* 文字颜色-默认 */
--button-color-primary: white; /* @type color */ /* @desc 主要按钮字体颜色,如：#223325 */ /* @depAttrs {"color": ["primary"]} */ /* @depStaticStyles ["color"] */
--button-color-primary-secondary: var(--brand-primary); /* @type color */ /* @desc 次要按钮字体颜色,如：#223325 */ /* @depAttrs {"color": ["primary_secondary"]} */ /* @depStaticStyles ["color"] */
--button-color: var(--font-second-color); /* @type color */ /* @desc 默认按钮字体颜色,如：#223325 */ /* @depAttrs {"color": ["default", null]} */ /* @depStaticStyles ["color"] */
--button-color-danger: white; /* @type color */ /* @desc 危险按钮字体颜色,如：#223325 */ /* @depAttrs {"color": ["danger"]} */ /* @depStaticStyles ["color"] */
--button-color-danger-secondary: var(--brand-error); /* @type color */ /* @desc 次要危险按钮字体颜色,如：#223325 */ /* @depAttrs {"color": ["danger_secondary"]} */ /* @depStaticStyles ["color"] */
/* 文字颜色-hover */
--button-color-primary-hover: var(--button-color-primary); /* @type color */ /* @desc 主要按钮字体颜色（hover状态）,如：#223325 */ /* @depAttrs {"color": ["primary"]} */
--button-color-primary-secondary-hover: var(--brand-primary-light); /* @type color */ /* @desc 次要按钮字体颜色（hover状态）,如：#223325 */ /* @depAttrs {"color": ["primary_secondary"]} */
--button-color-hover: var(--brand-primary); /* @type color */ /* @desc 默认按钮字体颜色（hover状态）,如：#223325 */ /* @depAttrs {"color": ["default", null]} */
--button-color-danger-hover: var(--button-color-danger); /* @type color */ /* @desc 危险按钮字体颜色（hover状态）,如：#223325 */ /* @depAttrs {"color": ["danger"]} */
--button-color-danger-secondary-hover: var(--brand-error-light); /* @type color */ /* @desc 次要危险按钮字体颜色（hover状态）,如：#223325 */ /* @depAttrs {"color": ["danger_secondary"]} */
/* 文字颜色-active */
--button-color-primary-active: var(--button-color-primary-hover); /* @type color */ /* @desc 主要按钮字体颜色（active状态）,如：#223325 */ /* @depAttrs {"color": ["primary"]} */
--button-color-primary-secondary-active: var(--button-color-primary-secondary-hover); /* @type color */ /* @desc 次要按钮字体颜色（active状态）,如：#223325 */ /* @depAttrs {"color": ["primary_secondary"]} */
--button-color-active: var(--button-color-hover); /* @type color */ /* @desc 默认按钮字体颜色（active状态）,如：#223325 */ /* @depAttrs {"color": ["default", null]} */
--button-color-danger-active: var(--button-color-danger-hover); /* @type color */ /* @desc 危险按钮字体颜色（active状态）,如：#223325 */ /* @depAttrs {"color": ["danger"]} */
--button-color-danger-secondary-active: var(--button-color-danger-secondary-hover); /* @type color */ /* @desc 次要危险按钮字体颜色（active状态）,如：#223325 */ /* @depAttrs {"color": ["danger_secondary"]} */
/* 文字颜色-disabled */
--button-color-primary-disabled: white; /* @type color */ /* @desc 主要按钮字体颜色（禁用状态）,如：#223325 */ /* @depAttrs {"color": ["primary"]} */
--button-color-primary-secondary-disabled: var(--button-color-disabled); /* @type color */ /* @desc 次要按钮字体颜色（禁用状态）,如：#223325 */ /* @depAttrs {"color": ["primary_secondary"]} */
--button-color-disabled: #999; /* @type color */ /* @desc 默认按钮字体颜色（禁用状态）,如：#223325 */ /* @depAttrs {"color": ["default", null]} */
--button-color-danger-disabled: white; /* @type color */ /* @desc 危险按钮字体颜色（禁用状态）,如：#223325 */ /* @depAttrs {"color": ["danger"]} */
--button-color-danger-secondary-disabled: var(--button-color-disabled); /* @type color */ /* @desc 次要危险按钮字体颜色（禁用状态）,如：#223325 */ /* @depAttrs {"color": ["danger_secondary"]} */
--button-border-width: var(--border-width-base); /* @desc 按钮边框宽度,如：1px */ /* @depStaticStyles ["border-top-width", "border-right-width", "border-bottom-width", "border-left-width"] */
--button-border-radius: var(--border-radius-medium); /* @desc 按钮边框圆角,如：1px */ /* @depStaticStyles ["border-top-left-radius", "border-top-right-radius", "border-bottom-left-radius", "border-bottom-right-radius"] */
--button-box-shadow-focus-color: var(--brand-primary-opacity-20); /* @type color */ /* @desc 按钮边框阴影背景颜色（选中状态）,如：#223325; */ /* @depAttrs {"color": ["default", null]} */
--button-box-shadow-focus-primary-color: var(--brand-primary-opacity-20) ; /* @type color */ /* @desc 主要按钮边框阴影背景颜色（选中状态）,如：#223325; */ /* @depAttrs {"color": ["primary"]} */
--button-box-shadow-focus-danger-color: var(--brand-danger-opacity-20); /* @type color */ /* @desc 危险按钮边框阴影背景颜色（选中状态）,如：#223325; */ /* @depAttrs {"color": ["danger"]} */
--button-box-shadow-focus: 0 0 0 2px var(--button-box-shadow-focus-color); /* @desc 按钮边框阴影效果（选中状态）,如：2px 2px 2px 1px rgba(0, 0, 0, 0.2); */ /* @depAttrs {"color": ["default", null]} */
--button-box-shadow-focus-primary: 0 0 0 2px var(--brand-primary-opacity-20); /* @desc 主要按钮边框阴影效果（选中状态）,如：2px 2px 2px 1px rgba(0, 0, 0, 0.2); */ /* @depAttrs {"color": ["primary"]} */
--button-box-shadow-focus-danger: 0 0 0 2px var(--brand-danger-opacity-20); /* @desc 危险按钮边框阴影效果（选中状态）,如：2px 2px 2px 1px rgba(0, 0, 0, 0.2); */ /* @depAttrs {"color": ["danger"]} */
--button-box-shadow-focus-primary-secondary: none; /* @hidden */
--button-box-shadow-focus-danger-secondary: none; /* @hidden */
--button-font-weight: normal; /* @hidden */
--button-box-shadow-active-color: var(--brand-primary-opacity-20); /* @hidden */
--button-box-shadow-active: 0 0 0 2px var(--brand-primary-opacity-20); /* @hidden */
--button-box-shadow-active-primary: var(--button-box-shadow-active); /* @hidden */
--button-box-shadow-active-primary-secondary: var(--button-box-shadow-active-primary); /* @hidden */
--button-box-shadow-active-danger: 0 0 0 2px var(--brand-danger-opacity-20); /* @hidden */
--button-box-shadow-active-danger-secondary: var(--button-box-shadow-active-danger); /* @hidden */
--button-loading-size: 18px; /* @hidden */
--button-loading-width: 1.5px; /* @hidden */
--button-height-loading: 18px; /* @hidden */
--button-loading-animation-duration: 1s; /* @hidden */
/* @component u-label */
--label-padding-x: 8px; /* @desc 标签水平方向内边距,如：1px */ /* @depAttrs { "size": ["normal", null] } */ /* @depStaticStyles ["padding-left", "padding-right"] */
--label-padding-x-small: 8px; /* @desc 小号标签水平方向内边距,如：1px */ /* @depAttrs { "size": ["small"] } */ /* @depStaticStyles ["padding-left", "padding-right"] */
--label-padding-x-large: 8px; /* @desc 大号标签水平方向内边距,如：1px */ /* @depAttrs { "size": ["large"] } */ /* @depStaticStyles ["padding-left", "padding-right"] */
--label-padding-y: 4px; /* @desc 标签垂直方向内边距,如：1px */ /* @depAttrs { "size": ["normal", null] } */ /* @depStaticStyles ["padding-left", "padding-right"] */
--label-padding-y-small: 3px; /* @desc 小号标签垂直方向内边距,如：1px */ /* @depAttrs { "size": ["small"] } */ /* @depStaticStyles ["padding-left", "padding-right"] */
--label-padding-y-large: 6px; /* @desc 大号标签垂直方向内边距,如：1px */ /* @depAttrs { "size": ["large"] } */ /* @depStaticStyles ["padding-left", "padding-right"] */
--label-font-size: 12px; /* @desc 标签的字号大小,如：1px */ /* @depAttrs { "size": ["normal", null] } */ /* @depStaticStyles ["font-size"] */
--label-font-size-small: var(--label-font-size); /* @desc 小号标签的字号大小,如：1px */ /* @depAttrs { "size": ["small"] } */ /* @depStaticStyles ["font-size"] */
--label-font-size-large: var(--label-font-size); /* @desc 大号标签的字号大小,如：1px */ /* @depAttrs { "size": ["large"] } */ /* @depStaticStyles ["font-size"] */
--label-remove-padding-x: 6px; /* @desc 可删除标签的删除图标与文本之间的内边距,如：1px */ /* @depAttrs { "size": ["normal", null] } */
--label-remove-padding-x-small: 6px; /* @desc 可删除小号标签的删除图标与文本之间的内边距,如：1px */ /* @depAttrs { "size": ["small"] } */
--label-remove-padding-x-large: 8px; /* @desc 可删除大号标签的删除图标与文本之间的内边距,如：1px */ /* @depAttrs { "size": ["large"] } */
/* 背景颜色 */
--label-background: #f5f5f5; /* @type color */ /* @desc 默认标签的背景色,如：#223325 */ /* @depAttrs { "color": ["default", null] } */ /* @depStaticStyles ["background-color"] */
--label-background-primary: var(--brand-primary); /* @type color */ /* @desc 主要标签的背景色,如：#223325 */ /* @depAttrs { "color": ["primary"] } */ /* @depStaticStyles ["background-color"] */
--label-background-success: var(--brand-success); /* @type color */ /* @desc 成功标签的背景色,如：#223325 */ /* @depAttrs { "color": ["success"] } */ /* @depStaticStyles ["background-color"] */
--label-background-warning: var(--brand-warning); /* @type color */ /* @desc 警告标签的背景色,如：#223325 */ /* @depAttrs { "color": ["warning"] } */ /* @depStaticStyles ["background-color"] */
--label-background-error: var(--brand-error); /* @type color */ /* @desc 错误标签的背景色,如：#223325 */ /* @depAttrs { "color": ["error"] } */ /* @depStaticStyles ["background-color"] */
/* 背景颜色-hover */
--label-background-hover: #E5E5E5; /* @type color */ /* @desc 默认标签的背景色（hover状态）,如：#223325 */ /* @depAttrs { "color": ["default", null] } */ /* @depStaticStyles ["background-color"] */
--label-background-primary-hover: var(--brand-primary-light); /* @type color */ /* @desc 主要标签的背景色（hover状态）,如：#223325 */ /* @depAttrs { "color": ["primary"] } */ /* @depStaticStyles ["background-color"] */
--label-background-success-hover: var(--brand-success-light); /* @type color */ /* @desc 成功标签的背景色（hover状态）,如：#223325 */ /* @depAttrs { "color": ["success"] } */ /* @depStaticStyles ["background-color"] */
--label-background-warning-hover: var(--brand-warning-light); /* @type color */ /* @desc 警告标签的背景色（hover状态）,如：#223325 */ /* @depAttrs { "color": ["warning"] } */ /* @depStaticStyles ["background-color"] */
--label-background-error-hover: var(--brand-error-light); /* @type color */ /* @desc 错误标签的背景色（hover状态）,如：#223325 */ /* @depAttrs { "color": ["error"] } */ /* @depStaticStyles ["background-color"] */
/* 背景颜色-selected */
--label-background-selected: #7F7F7F; /* @type color */ /* @desc 默认标签的背景色（选中状态）,如：#223325 */ /* @depAttrs { "color": ["default", null] } */ /* @depStaticStyles ["background-color"] */
--label-background-primary-selected: var(--brand-primary); /* @type color */ /* @desc 主要标签的背景色（选中状态）,如：#223325 */ /* @depAttrs { "color": ["primary"] } */ /* @depStaticStyles ["background-color"] */
--label-background-success-selected: var(--brand-success); /* @type color */ /* @desc 成功标签的背景色（选中状态）,如：#223325 */ /* @depAttrs { "color": ["success"] } */ /* @depStaticStyles ["background-color"] */
--label-background-warning-selected: var(--brand-warning); /* @type color */ /* @desc 警告标签的背景色（选中状态）,如：#223325 */ /* @depAttrs { "color": ["warning"] } */ /* @depStaticStyles ["background-color"] */
--label-background-error-selected: var(--brand-error); /* @type color */ /* @desc 错误标签的背景色（选中状态）,如：#223325 */ /* @depAttrs { "color": ["error"] } */ /* @depStaticStyles ["background-color"] */
/* 文字颜色 */
--label-color: var(--font-second-color); /* @type color */ /* @desc 默认标签的字体颜色,如：#223325 */ /* @depAttrs { "color": ["default", null] } */ /* @depStaticStyles ["color"] */
--label-color-primary: white; /* @type color */ /* @desc 主要标签的字体颜色,如：#223325 */ /* @depAttrs { "color": ["primary"] } */ /* @depStaticStyles ["color"] */
--label-color-success: white; /* @type color */ /* @desc 成功标签的字体颜色,如：#223325 */ /* @depAttrs { "color": ["success"] } */ /* @depStaticStyles ["color"] */
--label-color-warning: white; /* @type color */ /* @desc 警告标签的字体颜色,如：#223325 */ /* @depAttrs { "color": ["warning"] } */ /* @depStaticStyles ["color"] */
--label-color-er