@ttk/component/es/assets/theme/tax72Theme.less

ttk组件库

@mk-prefix: mk;
@ant-prefix: ant;

@primary-color: #0994DC; // 全局主色
@link-color: #4585EB; // 链接色
@success-color: #4EC87C; // 成功色
@warning-color: #FFA533; // 警告色
@error-color: #FE6532; // 错误色
@white: #fff;
@black: #000;

@font-family: "微软雅黑"; // 字体
@font-size-base: 14px; // 主字号
@font-size-lg: @font-size-base + 2px;
@font-size-sm: @font-size-base - 2px;
@heading-1-size: @font-size-base + 14px;
@heading-2-size: @font-size-base + 10px;
@heading-3-size: @font-size-base + 6px;
@heading-4-size: @font-size-base + 4px;
@heading-color: #000; // 标题色
@text-color: #333; // 主文本色
@text-color-secondary: #666; // 次文本色
@disabled-color: #BBBBBB; // 失效色
@border-radius-base: 2px; // 组件/浮层圆角
@border-color-base: #E4E4E4; // 边框色
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮层阴影

@hover-color: #0885C6; // hover色
// @complementary-color-1: #FFA533; // 辅助色
// @complementary-color-1: #FE6532; // 辅助色
// @complementary-color-1: #4EC87C; // 辅助色

@dividers-color: #EBEBEB; // 分割线
@table-line-color: #EDEDED; // 表格线
@background-color: #F6F6F6; // 大背景

@strengthening-priorities-color: #FF8E02; // 强化优先级
@white-color: #FFFFFF; // 深色背景高优先级

@background-color-success: #EBF8F2; // 成功背景色
@border-color-success: #CFEFDF; // 成功边框色
@text-color-success: #31C37C; // 成功文本色

@background-color-success-2: #FFF9E1; // 成功背景色
@border-color-success-2: #FFE3BE; // 成功边框色
@text-color-success-2: #FFBF00; // 成功文本色

@background-color-warning: #FFF5E6; // 警告背景色
@border-color-warning: #F8DDC0; // 警告边框色
@text-color-warning: #FFA533; // 警告文本色

@background-color-error: #FEF0EF; // 错误背景色
@border-color-error: #FCDBDA; // 错误边框色
@text-color-error: #FF6633; // 错误文本色

@background-color-notice: #EAF4FF; // 通知背景色
@border-color-notice: #D5E8FC; // 通知边框色
@text-color-notice: #00BBF2; // 通知文本色


@showy-color: #EE752F;
@softly-color: #88CC48;
@bluesky-color: #3eabe8;

@primary-1: #e6fbff;
@primary-2: #adefff;
@primary-3: #85e2ff;
@primary-4: #58cbf5;
@primary-5: #2eb0e8;
@primary-6: @primary-color;
@primary-7: #0073b5;
@primary-8: #00568f;
@primary-9: #003b69;
@primary-10: #002342;

@showy-1: @showy-color;
@showy-2: @showy-color;
@showy-3: @showy-color;
@showy-4: @showy-color;
@showy-5: @showy-color;
@showy-6: @showy-color;
@showy-7: @showy-color;
@showy-8: @showy-color;
@showy-9: @showy-color;
@showy-10: @showy-color;

@softly-1: @softly-color;
@softly-2: @softly-color;
@softly-3: @softly-color;
@softly-4: @softly-color;
@softly-5: @softly-color;
@softly-6: @softly-color;
@softly-7: @softly-color;
@softly-8: @softly-color;
@softly-9: @softly-color;
@softly-10: @softly-color;

@bluesky-1: @bluesky-color;
@bluesky-2: @bluesky-color;
@bluesky-3: @bluesky-color;
@bluesky-4: @bluesky-color;
@bluesky-5: @bluesky-color;
@bluesky-6: @bluesky-color;
@bluesky-7: @bluesky-color;
@bluesky-8: @bluesky-color;
@bluesky-9: @bluesky-color;
@bluesky-10: @bluesky-color;

@icon-url: "/";
@top-hover: @hover-color;
@button-hover-color: @hover-color;
@antSelect-selected-color: #dde4eb;

// The background colors for active and hover states for things like
// list items or table cells.
@item-active-bg         : @primary-1;
@item-hover-bg          : @primary-1;

@item-hover-bg:rgba(65,106,170,0.07);
@item-hover-bg2:rgba(65,106,170,0.1);
@item-hover-bg3:rgba(65,106,170,0.5);
@vertial-menu-bg: rgba(65,106,170,0.18);
@table-row-hover-bg: rgba(65,106,170,0.07) !important;


// Checkbox
@checkbox-size          : 18px;

// Radio
@radio-size             : 20px;

// Switch
// ---
@switch-height: 24px;

// Input
@input-color: @heading-color;
@input-hover-border-color: #b3b5ba;

// Buttons
// @btn-danger-color       : @error-color;
// @btn-danger-bg          : @background-color-base;
// @btn-danger-border      : @border-color-base;

@btn-padding-base       : 0 18px;
@btn-font-size-lg       : @font-size-lg;
@btn-font-size-sm       : @font-size-sm;
@btn-padding-lg         : @btn-padding-base;
@btn-padding-sm         : 0 10px;

@btn-height-base        : 32px;
@btn-height-lg          : 40px;
@btn-height-sm          : 28px;

// Tabs
@tabs-card-active-color: @primary-color;
@tabs-title-font-size: @font-size-lg;
@tabs-title-font-size-lg: @font-size-lg;
@tabs-title-font-size-sm: @font-size-base;
// @tabs-ink-bar-color: @primary-color;
@tabs-bar-margin: 0 0 16px 0;
@tabs-horizontal-margin: 0;
@tabs-horizontal-padding: 8px 12px;
// @tabs-vertical-padding: 8px 24px;
// @tabs-vertical-margin: 0 0 16px 0;
// @tabs-scrolling-size: 32px;
@tabs-highlight-color: @text-color;
@tabs-hover-color: @text-color;
@tabs-active-color: @text-color-secondary;

// Modal
// --
@modal-mask-bg: rgba(0, 0, 0, 0.3);

// Menu
// ---
@menu-inline-toplevel-item-height: 43px;
@menu-item-height: 43px;
@menu-item-color: @heading-color;
@menu-highlight-color: @primary-color;
@menu-item-active-bg: #edf6fc;

body {
    // background: @background-color;
}
h1, h2, h3, h4, h5, h6 {
     color: @black;
     font-weight: normal; 
}
h1{ font-size: 24px; } 
h2{ font-size: 22px; }
h3{ font-size: 20px; }
h4{ font-size: 18px; }
h5{ font-size: 16px; }
h6{ font-size: 14px; }

.ttk-tax72-font {
    &-strong {
        color: @heading-color
    }
    &-medium {
        color: @text-color-secondary
    }
    &-weak {
        color: #999;
    }
    &-weakest {
        color: #aaa;
    }
    &-blue {
        color: #0994dc;
    }
    &-orange {
        color: #ff8939
    }
    &-red {
        color: #ff0000
    }
    &-s24 {
        font-size: 24px;
    }
    &-s20 {
        font-size: 20px;
    }
    &-s18 {
        font-size: 18px;
    }
    &-s16 {
        font-size: 16px;
    }
    &-s14 {
        font-size: 14px;
    }
    &-s12 {
        font-size: 12px;
    }
}
.@{ant-prefix}-form-item,.@{ant-prefix}-menu,.@{ant-prefix}-tabs-nav,.@{mk-prefix}-layout,.@{ant-prefix}-card,.@{ant-prefix}-select,.@{ant-prefix}-modal-content{
    font-family: "微软雅黑";
}