@lcap/asl/src/views/theme.css

NetEase Application Specific Language

:root {
    /* Brand Colors */
    --brand-primary-lightest: #ebf2fc;
    --brand-primary-lighter: #c3d8f7;
    --brand-primary-light: #5e96eb;
    --brand-primary: #4a89e8;
    --brand-primary-dark: #2c75e4;
    --brand-primary-darker: #1756b5;
    --brand-primary-darkest: #134897;

    --brand-success-lightest: #e9f9f6;
    --brand-success-lighter: #bceee4;
    --brand-success-light: #4dd3b6;
    --brand-success: #37cdad;
    --brand-success-dark: #2eb99b;
    --brand-success-darker: #238b74;
    --brand-success-darkest: #1d7461;

    --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: #fff6e9;
    --brand-warning-lighter: #ffdba8;
    --brand-warning-light: #ffb752;
    --brand-warning: #ffae3c;
    --brand-warning-dark: #ff9f19;
    --brand-warning-darker: #d27b00;
    --brand-warning-darkest: #af6600;

    --brand-error-lightest: #ffeded;
    --brand-error-lighter: #ffc8c8;
    --brand-error-light: #ff6c6c;
    --brand-error: #ff5a5a;
    --brand-error-dark: #ff3434;
    --brand-error-darker: #e60000;
    --brand-error-darkest: #c00000;

    --brand-danger-lightest: #ffeded;
    --brand-danger-lighter: #ffc8c8;
    --brand-danger-light: #ff6c6c;
    --brand-danger: #ff5a5a;
    --brand-danger-dark: #ff3434;
    --brand-danger-darker: #e60000;
    --brand-danger-darkest: #c00000;

    --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: #dee4ed; /* 选择且禁用的背景 */
    --brand-disabled: #cdd6e4; /* 输入框、选择框的禁用背景 */
    --brand-disabled-dark: #c2cdde; /* 禁用文本的颜色 */
    --brand-disabled-darker: #b7c4d8; /* 禁用文本的颜色 */

    /* 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: #FFFFFF; /* body 默认的背景 */
    --background-color-lighter: #f4f6f9; /* 选择框的 hover 颜色 */
    --background-color-light: #f4f6f9; /* 表格等组件标题栏颜色 */
    --background-color-base: #eef1f6; /* 标签、薯条等组件默认颜色 */
    --background-color-dark: #e3e8f0;
    --background-color-darker: #d8dfea;
    --color-lighter: #b6b9be; /* Placeholder 字体颜色 */
    --color-light: #93989f; /* 次级字体颜色 */
    --color-base: #585c63; /* 默认字体颜色 */
    --color-dark: #363a41; /* 默认字体颜色 */
    --border-color-light: #dee4ed; /* 面板等容器类型的边框颜色 */
    --border-color-base: #dee4ed; /* 输入框等小组件的边框颜色 */
    --border-color-dark: #cdd6e4; /* 按钮等小组件的边框颜色 */

    --sidebar-width: 360px;
    --navbar-height: 60px;
    --navbar-background: #33353d;
    --navbar-item-background-selected: #25272e;
    --navbar-item-line-background: var(--brand-primary);
    --navbar-item-padding: 0 25px;
    --navbar-item-font-size: 14px;
    --navbar-item-space: 0;
    --navbar-dropdown-padding: 0 24px 0 20px;
    --navbar-menu-item-background: #22232d;
    --navbar-select-item-background: #22232d;
    --navbar-menu-item-background-hover: #2e2f3c;
    --navbar-select-item-background-hover: #2e2f3c;
    --navbar-menu-divider-background: #2e2f3c;
    --navbar-select-divider-background: #2e2f3c;
    --sidebar-background: #21222C;
    --sidebar-item-background-selected: #191a21;
    --sidebar-item-color: #a6a6aa;
    --sidebar-group-head-color: #a6a6aa;
    --sidebar-group-head-color-selected: #a6a6aa;
    --tooltip-background: rgba(49, 53, 62, 0.9);
    --table-td-color: #333;
    --toc-width: 240px;

    /* Timeline */
    --timeline-item-padding-bottom: 20px;
    --timeline-tail-color: var(--border-color-base);
    --timeline-tail-width: 2px;
    --timeline-dot-bgColor: white;
    --button-background-primary: #337EFF;

    /* Tree View */
    --tree-view-background: white;
    --tree-view-node-background-active: var(--background-color-base);
    --tree-view-node-background-selected: var(--brand-primary-light);
    --tree-view-node-color-selected: white;
    --tree-view-node-color-disabled: var(--brand-disabled);
    --tree-view-node-expander-color-selected: white;
    --tree-view-node-background-disabled: none;
    --tree-view-node-background-selected-disabled: var(--brand-disabled-light);
}