@containerBackgroundColor: #f7f7f7; // 容器背景色
@backgroundColor: #FCFCFC; // 背景色
@disabledBackgroundColor: #f5f5f5; // 背景色
@backgroundColorHover: #f2f5fc; // 背景色hover
@TextColor: #666666; // 字体颜色
@disabledTextColor: #dddddd; // 禁用字体颜色
@AsideColor: #f6fbff; // 模块内容区分颜色
@inputIconColor: #bbbbbb; //输入框图标颜色
@TableBorderColor: #f6f6f6; // 列表表格边框颜色
@tableHanderBackground:#FCFCFC; // 列表头部背景颜色
@scrollbarColor: #d7d7d7; //滚动条颜色

// 滚动条背景
::-webkit-scrollbar {
    // height: 12px !important;
    background-color: @backgroundColor  !important;
}

::-webkit-scrollbar-corner {
    background-color: @backgroundColor  !important;
}

// 滚动条颜色
::-webkit-scrollbar-thumb {
    // height: 12px !important;
    background-color: @scrollbarColor  !important;
}

// 容器基本色
.themeContentElStyle {
    background-color: @containerBackgroundColor;
    color: @TextColor;
}

// 元素基本色
.themeElStyle {
    background-color: @backgroundColor;
    color: @TextColor;
}

// 元素内模块区别基本色
.themeAsideStyle {
    background-color: @AsideColor;
    color: @TextColor;
}

// 打印表格样式基本色
.themePrintStyle {
    background-color: @backgroundColor;
    color: @TextColor;

    input {
        background-color: transparent !important;
    }

    div {
        color: @TextColor;
    }

    // .boxBorderLineOfPrint {
    //     box-shadow: 0 0 0 1px @TextColor;
    // }

    // .boxBorderBRLineOfPrint {
    //     box-shadow: 1px 1px 0 0 @TextColor;
    // }

    // .boxBorderBLineOfPrint {
    //     box-shadow: 0 1px 0 0 @TextColor;
    // }

    // .boxBorderTLineOfPrint {
    //     box-shadow: 0 -1px 0 0 @TextColor;
    // }
}

// 系统菜单颜色
.systemMenu {
    background-color: @backgroundColor;
}

// 边框颜色
.themeBorderColor {
    border-color: @TableBorderColor;
}

// 特殊输入框标记
.IntPlaceholder::placeholder,
.IntPlaceholder input::placeholder {
    color: @TextColor  !important;
}

// 表单内特殊输入框标记
.IntFormItemDatePicker {
    position: relative;

    input {
        color: transparent !important;
    }

    >div::before {
        content: '长期有效';
        color: @TextColor;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
    }
}

// 弹窗
.ant-modal-content {
    background-color: @backgroundColor;
    color: @TextColor;

    .ant-modal-header {
        background-color: @backgroundColor;
        color: @TextColor;

        .ant-modal-title {
            color: @TextColor;
        }
    }

    .ant-empty-normal {
        color: @TextColor;
    }

    .ant-modal-close-x svg {
        color: @inputIconColor;
    }
}

// 快捷弹窗
.ant-modal-confirm-body {

    .ant-modal-confirm-title,
    .ant-modal-confirm-content {
        color: @TextColor;
    }
}

// 快捷询问弹窗
.ant-popover-inner {
    background-color: @backgroundColor;
    color: @TextColor;

    .ant-popover-message {
        color: @TextColor;
    }
}

// 快捷询问弹窗
.ant-popover-content {
    background-color: @backgroundColor;
    color: @TextColor;

    .ant-popover-title {
        color: @TextColor;
    }

    .ant-popover-inner-content {
        color: @TextColor;
    }
}

.ant-dropdown-menu {
    background-color: @backgroundColor;

    .ant-dropdown-menu-item {
        background-color: @backgroundColor;
        color: @TextColor;

        &:hover {
            background-color: @backgroundColorHover;
        }
    }
}


// tabs
.ant-tabs {
    color: @TextColor;
}

.ant-tabs.ant-tabs-card .ant-tabs-card-bar {
    .ant-tabs-tab {
        background-color: @backgroundColor;
    }

    [class=' ant-tabs-tab'] {
        color: @TextColor;
    }
}


.InpColor::placeholder {
    color: @TextColor;
}

// 输入框
.ant-input,
.ant-select-selection,
.ant-select-dropdown,
.ant-calendar,
.ant-cascader-picker,
.ant-calendar-picker,
.ant-calendar-range-picker-input {
    background-color: @backgroundColor  !important;
    color: @TextColor  !important;
    caret-color: @TextColor  !important;

    &::placeholder,
    .ant-select-selection__placeholder,
    .ant-select-search__field__placeholder {
        color: fade(@TextColor, 35%);
    }

    // 输入框分割符号 ps:'~'
    .ant-calendar-range-picker-separator {
        color: @TextColor;
    }

    // 下拉选项
    .ant-select-dropdown-menu-item {
        color: @TextColor;
    }

    // 下拉选项选中
    .ant-select-dropdown-menu.ant-select-dropdown-menu-root .ant-select-dropdown-menu-item-active {
        background-color: @backgroundColorHover;
    }

    // 下拉选项已选中
    .ant-select-dropdown-menu-item-selected {
        background-color: @backgroundColorHover;
    }

    // 日期头部年月日
    .ant-calendar-header a {
        background-color: @backgroundColor;
        color: @TextColor;
    }

    // 日期输入框
    .ant-calendar-input {
        background-color: @backgroundColor;
        color: @TextColor;
        caret-color: @TextColor;
    }

    // 日期选择年月
    .ant-calendar-decade-panel,
    .ant-calendar-year-panel,
    .ant-calendar-month-panel {
        background-color: @backgroundColor;
    }

    // 清除样式图标
    .ant-calendar-picker-clear {
        background-color: @backgroundColor;
    }

    // 清除样式图标
    .ant-cascader-picker-clear {
        background-color: @backgroundColor;
    }

    // 清除样式图标
    .ant-select-selection__clear {
        background-color: @backgroundColor;
    }

    // 输入框图标
    svg {
        color: @inputIconColor;
    }
}

// 联级选择框-选项
.ant-cascader-menus {
    background-color: @backgroundColor;
    color: @TextColor;

    .ant-cascader-menu-item-active {
        background-color: @backgroundColorHover;
    }

    .ant-cascader-menu-item:hover {
        background-color: @backgroundColorHover;
    }

    // 输入框图标
    svg {
        color: @inputIconColor;
    }
}

// 输入框-前后追加提示元素
.ant-input-group-addon {
    background-color: @backgroundColor  !important;
    color: @TextColor;
    overflow: hidden;
}

// 输入框图标
.ant-input-suffix,
.ant-input-prefix {
    color: @TextColor  !important;

    svg {
        color: @inputIconColor;
    }
}

// 下拉选择框-多选tag元素
.ant-select-selection--multiple .ant-select-selection__choice {
    background-color: @backgroundColor;
    color: @TextColor;
}

// 下拉选择框-多选选项选中图标
.ant-select-dropdown-menu-item .ant-select-selected-icon {

    // 输入框图标
    svg {
        color: fade(@backgroundColor, 50%);
    }
}

.ant-select-dropdown-menu-item.ant-select-dropdown-menu-item-selected {

    // 输入框图标
    svg {
        color: @inputIconColor;
    }
}

// 默认按钮
[class='ant-btn'],
.ant-btn-link.ant-btn-background-ghost {
    background-color: @backgroundColor;
    color: @TextColor;

    &:hover,
    &:focus,
    &:active,
    &:active {
        background-color: @backgroundColorHover;
    }
}

// 禁用的透明按钮
.ant-btn-background-ghost[disabled] {
    color: @disabledTextColor  !important;
}

// 单选多选-选择框
.ant-radio-wrapper,
.ant-checkbox-wrapper {
    color: @TextColor;
}

.ant-radio-button-wrapper {
    background-color: @backgroundColor;
    color: @TextColor;

    &:hover {
        background-color: @backgroundColorHover;
    }
}

.ant-radio-button-wrapper-disabled {
    color: @disabledTextColor;

    &:hover {
        color: @TextColor;
    }
}

// 单选-选择框选中
.ant-radio-group .ant-radio-button-wrapper-checked {
    background-color: fade(@backgroundColor, 65%);
}

.ant-radio-button-wrapper-disabled.ant-radio-button-wrapper-checked {
    color: @TextColor;

    &:hover {
        color: @TextColor;
    }
}

// 多选列间隔
.ant-checkbox-group {
    color: @TextColor;
}

// 选择框文字
.ant-checkbox-disabled+span,
.ant-radio-disabled+span {
    color: @disabledTextColor;
}

// 选中日期-之间的元素
.ant-calendar-range .ant-calendar-in-range-cell::before {
    background-color: @backgroundColorHover;
}

// 日期元素
.ant-calendar-date {
    color: @TextColor;

    &:hover {
        background-color: fade(@backgroundColor, 65%);
    }
}

.ant-calendar-last-month-cell .ant-calendar-date,
.ant-calendar-next-month-btn-day .ant-calendar-date,
.ant-calendar-last-month-cell .ant-calendar-date:hover,
.ant-calendar-next-month-btn-day .ant-calendar-date:hover {
    color: fade(@TextColor, 25%);
}

.ant-calendar-disabled-cell .ant-calendar-date {
    background-color: @disabledBackgroundColor;
}

.ant-calendar-disabled-cell .ant-calendar-date:hover {
    background-color: fade(@disabledBackgroundColor, 65%);
    ;
}

#defaultTableStyle {

    // 表格UI
    .ant-table-header {
        background-color: @backgroundColor;
        color: @TextColor;
    }

    .ant-table-thead>tr>th {
        background-color: @tableHanderBackground;
        color: @TextColor;
        font-weight: 700;
    }

    .ant-table-placeholder {
        background-color: @backgroundColor;
        color: @TextColor;

        .ant-empty {
            color: @TextColor;
        }
    }

    .ant-table-tbody {
        background-color: @backgroundColor;
        color: @TextColor;

        >tr {
            &:hover {
                background-color: @backgroundColorHover;

                >td {
                    background: none !important;
                }
            }

            >td {
                border-bottom-color: #f6f6f6;
            }
        }
    }


    .ant-table-thead>tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selectea)>td,
    .ant-table-tbody>tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td,
    .ant-table-thead>tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selectea)>td,
    .ant-table-tbody>tr:hover:not(.ant-table-expanded-row):not(.at-table-row-selected)>td,
    .ant-table-tbody>tr.ant-table-row-selected td {
        background-color: @backgroundColorHover;
        border-color: @TableBorderColor;
    }

    .ant-table-tbody>tr>td,
    .ant-table-thead>tr>th {
        border-color: @TableBorderColor;
    }

    .ant-table-footer {
        color: @TextColor;
        background-color: @backgroundColor;
    }
}

// 分页
.ant-pagination-item {
    background-color: @backgroundColor;

    a {
        color: @TextColor;
    }
}

.ant-pagination-total-text {
    color: @TextColor;
}

// 分页翻页
.ant-pagination .ant-pagination-item-link {
    background-color: @backgroundColor;

    // 翻页图标
    svg {
        color: @TextColor;
    }

    .ant-pagination-item-ellipsis {
        color: @TextColor;
    }
}

// 分页选中
.ant-pagination-item-active {
    background-color: #1890ff;

    &:focus a,
    &:hover a {
        color: #fff;
    }

    a {
        color: #fff;
    }
}

// 分页输入快捷跳转
.ant-pagination-options-quick-jumper {
    color: @TextColor;

    input {
        background-color: @backgroundColor;
        color: @TextColor;
    }
}

// 表单元素
.ant-form {
    color: @TextColor;

    .ant-form-item {
        color: @TextColor;
    }

    .ant-form-item-label>label {
        color: @TextColor;
    }
}

// 手风琴标题
.ant-collapse .ant-collapse-header {
    background-color: @AsideColor;

    span {
        color: @TextColor;
    }

    // 伸展图标
    svg {
        color: @inputIconColor;
    }
}

// 手风琴展开页
.ant-collapse-content {
    background-color: @backgroundColor;
    color: @TextColor;
}

// 上传
.ant-upload {
    background-color: @backgroundColor  !important;
    color: @TextColor  !important;
}

// 步骤条
.ant-steps-item-wait,
.ant-steps-item-process,
.ant-steps-item-finish {
    .ant-steps-item-container>.ant-steps-item-content>.ant-steps-item-title {
        color: @TextColor;
    }
}

// 导航屑
.ant-breadcrumb {
    color: @TextColor;

    span {
        color: @TextColor;
    }
}

// 抽屉
.ant-drawer-content {
    background-color: @backgroundColor;
    color: @TextColor;

    .ant-drawer-header {
        background-color: @backgroundColor;
        color: @TextColor;

        // 输入框图标
        svg {
            color: @inputIconColor;
        }
    }

    .ant-drawer-body {
        color: @TextColor;
        background-color: @backgroundColor;
    }
}