@import '../../node_modules/font-awesome/less/font-awesome.less';
@import '../theme/app-blue-dark.less';
@import '../theme/app-dark.less';
@import '../theme/app-light.less';
@import './var.css';

// 滚动条宽度
div::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background: transparent;
}

// 滚动槽
div::-webkit-scrollbar-track {
    border-radius: 0;
    box-shadow: none;
    border: 0;
}

// 滚动条滑块
div::-webkit-scrollbar-thumb {
    border-radius: 0;
    box-shadow: none;
    border: 0;
    background-color: var(--app-scroll-bar-color);
}

// 加载动画
.ivu-spin-fix {
    background-color: rgba(0, 0, 0, 0.5);
}

// 分割面板
.ivu-split-wrapper {

    >.ivu-split-horizontal,
    >.ivu-split-vertical {

        >.ivu-split-trigger-con {

            >.ivu-split-trigger {
                border: 0;
                background: var(--app-dividing-line-color-bright);
            }

            >.ivu-split-trigger.ivu-split-trigger-vertical {
                width: 2px;
            }

            >.ivu-split-trigger.ivu-split-trigger-horizontal {
                height: 2px;
            }
        }
    }
}

// 无动画小型标签页样式
.ivu-tabs.ivu-tabs-mini.ivu-tabs-no-animation {
    height: 100%;

    >.ivu-tabs-bar {
        margin-bottom: 0px;
        border-bottom: 1px solid var(--app-dividing-line-color-tint);

        >.ivu-tabs-nav-container {

            >.ivu-tabs-nav-wrap {
                margin-bottom: 3px;

                >.ivu-tabs-nav-scroll {

                    >.ivu-tabs-nav {

                        >.ivu-tabs-ink-bar {
                            display: none;
                        }

                        >.ivu-tabs-tab {
                            padding: 4px 10px;
                            margin: 0;
                            color: var(--view-font-color);
                            font-family: Segoe WPC, Segoe UI, Microsoft YaHei, sans-serif;
                            font-weight: 700;
                        }

                        >.ivu-tabs-tab.ivu-tabs-tab-active {
                            color: var(--view-font-color-bright);

                            span {
                                border-bottom: 1px solid var(--view-font-color-bright);
                            }
                        }
                    }
                }
            }
        }
    }
}

// 默认按钮样式 Start
.ivu-btn.ivu-btn-default,
.ivu-btn.ivu-btn-primary {
    color: var(--view-button-color);
    background-color: var(--view-button-background-color);
    border-color: var(--view-button-background-color);
    padding: 1px 6px;
}

.ivu-btn.ivu-btn-default:hover,
.ivu-btn.ivu-btn-primary:hover {
    background: var(--view-button-background-color-active);
}

.ivu-btn.ivu-btn-default:disabled,
.ivu-btn.ivu-btn-primary:disabled {
    color: var(--view-button-color-active);
    background-color: var(--view-button-background-color-disabled);
    border-color: var(--view-button-background-color-disabled);
}

.ivu-btn.ivu-btn-text {
    color: var(--view-button-background-color);
}

.ivu-btn.ivu-btn-text:hover {
    color: var(--view-button-background-color-active);
    background-color: transparent;
}

.el-button.el-button--default {
    color: var(--view-button-color);
    background-color: var(--view-button-background-color);
    border-color: var(--view-button-background-color);
}

.el-button.el-button--default:hover {
    background: var(--view-button-background-color-active);
}

.el-button.el-button--default:disabled {
    color: var(--view-button-color-active);
    background-color: var(--view-button-background-color-disabled);
    border-color: var(--view-button-background-color-disabled);
}

// 默认按钮样式 End

// 默认表格样式
.grid {
    height: 100%;
    overflow: hidden;

    .ivu-form {
        height: 100%;

        .app-form-item-wrapper {

            .ivu-form-item.app-form-item {
                margin-bottom: 0;
            }
        }
    }

    .el-table::before {
        content: none;
    }

    .el-table::after {
        content: none;
    }

    .el-table {
        height: 100%;
        background-color: var(--view-background-color-bright);
        color: var(--view-font-color-tint);
        border: none;

        .el-table__body tr.current-row>td {
            background-color: transparent;
        }

        >.el-table__header-wrapper {

            >table {

                >.has-gutter {
                    color: var(--view-font-color-bright);

                    >tr {
                        background-color: var(--view-background-color-bright);

                        >th {
                            background-color: var(--view-background-color-tint);
                            border-right: 1px solid var(--form-editor-background-color);
                            border-bottom: none;
                        }

                        >th.el-table-column--selection {

                            >.cell {
                                text-overflow: unset;
                                padding-left: 10px;
                                padding-right: 10px;

                                >.el-checkbox {

                                    >.el-checkbox__input {

                                        >.el-checkbox__inner {
                                            background-color: var(--form-editor-background-color);
                                            border: 1px solid var(--view-background-color-bright);
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        >.el-table__body-wrapper {
            height: calc(100% - 30px);
            overflow-y: auto;

            >table {

                >tbody {

                    >.el-table__row {
                        background-color: var(--view-background-color-bright);

                        >td {
                            border-right: 1px solid var(--form-editor-background-color);
                            border-bottom: none;
                        }

                        >td.el-table-column--selection {

                            >.cell {
                                text-overflow: unset;
                                padding-left: 10px;
                                padding-right: 10px;

                                >.el-checkbox {

                                    >.el-checkbox__input {

                                        >.el-checkbox__inner {
                                            background-color: var(--form-editor-background-color);
                                            border: 1px solid var(--view-background-color-bright);
                                        }
                                    }
                                }
                            }
                        }
                    }

                    >.el-table__row.el-table__row--striped {
                        background-color: var(--view-background-color-bright);

                        >td {
                            background: var(--view-dividing-line-color-tint);
                        }
                    }

                    >.el-table__row:hover {

                        >td {
                            background-color: var(--view-background-color-tint);
                        }
                    }
                }
            }
        }
    }

    .grid-pagination {
        padding: 0px 3px;
        height: 35px;

        .ivu-btn.ivu-btn-default {
            height: 22px;
            font-size: 12px;
        }

        >.ivu-page.pull-right {

            >.ivu-page-total {

                >span {

                    >.page-column {
                        position: absolute;
                        left: 3px;
                    }

                    >.page-button {

                        .ivu-btn.ivu-btn-default.ivu-btn-icon-only {
                            width: 26px;
                        }
                    }
                }
            }

            >.ivu-page-prev,
            >.ivu-page-next,
            >.ivu-page-item {
                height: 22px;
                line-height: 20px;
            }

            >.ivu-page-prev,
            >.ivu-page-next {
                background-color: var(--view-button-background-color-disabled);
                border: 1px solid var(--view-button-background-color-disabled);
                font-size: 16px;

                >a {
                    color: var(--view-font-color-bright);
                }
            }

            >.ivu-page-item {
                background-color: var(--view-button-background-color);
                border: 1px solid var(--view-button-background-color);

                >a {
                    color: var(--view-font-color-tint);
                }
            }

            >.ivu-page-item:hover {
                border-color: var(--view-button-background-color-active);
                background: var(--view-button-background-color-active);
            }

            >.ivu-page-item-active:hover,
            .ivu-page-item-active {

                >a {
                    color: var(--view-font-color-bright);
                }
            }

            >.ivu-page-options {

                >.ivu-page-options-sizer {

                    >.ivu-select {

                        >.ivu-select-selection {
                            height: 22px;
                            background-color: var(--form-editor-background-color);
                            border: 1px solid var(--form-editor-background-color);
                            color: var(--form-editor-font-color);

                            >div {

                                >.ivu-select-selected-value {
                                    height: 20px;
                                    line-height: 20px;
                                }
                            }
                        }

                        >.ivu-select-selection:hover {
                            border-color: var(--form-editor-active-color);
                            background-color: var(--form-editor-active-color);
                        }
                    }
                }

                >.ivu-page-options-elevator {
                    height: 22px;
                    line-height: 22px;

                    >input {
                        height: 22px;
                        border: 1px solid var(--view-button-background-color);
                        color: var(--view-button-color);
                        background-color: var(--view-button-background-color);
                    }
                }
            }
        }
    }
}

// 下拉列表
.ivu-select-dropdown.ivu-select-dropdown-transfer {
    background: var(--form-editor-background-color);
    color: var(--form-editor-font-color);

    >.ivu-select-dropdown-list {

        >.ivu-select-item {
            color: var(--form-editor-font-color);
        }

        >.ivu-select-item:hover {
            color: #fff;
            background: var(--form-editor-active-color);
        }

        >.ivu-select-item.ivu-select-item-selected,
        >.ivu-select-item.ivu-select-item-focus {
            color: #fff;
            background: var(--form-editor-active-color);
        }
    }
}

// 按钮下拉列表
.ivu-select-dropdown.ivu-dropdown-transfer {
    color: var(--view-button-color);
    background-color: var(--view-button-background-color);

    >.ivu-dropdown-menu {

        >.ivu-dropdown-item {
            color: var(--view-button-color);
        }

        >.ivu-dropdown-item:hover {
            background: var(--view-button-background-color-active);
        }
    }
}

// 表单样式 Start
// 基础表单项颜色
.form-edit-base-color {
    background-color: var(--form-editor-background-color);
    border-color: var(--form-editor-background-color);
    color: var(--form-editor-font-color);
}

// 基础表单项禁用颜色
.form-edit-disabled-base-color {
    background-color: var(--view-button-background-color-disabled);
    border-color: var(--view-button-background-color-disabled);
    color: var(--view-button-color-disabled);
}

.app-form.ivu-form {
    color: var(--view-font-color);

    .ivu-tabs {
        color: inherit;

        >.ivu-tabs-content {
            padding: 3px 6px 0px 6px;
        }
    }

    // 表单分组
    .ivu-card.app-form-group {
        background: var(--view-background-color);
        color: var(--view-font-color);

        >.ivu-card-head {
            padding: 3px 1px;
            border-bottom-color: var(--view-dividing-line-color-bright);

            >p {
                font-size: 13px;
                color: var(--view-font-color);
            }
        }

        >.ivu-card-body {
            padding: 6px;
        }
    }

    // 表单项
    .app-form-item {
        margin-bottom: 6px;

        >.ivu-form-item {

            .ivu-form-item-label {
                color: var(--form-label-font-color);
            }

            .ivu-form-item-content {

                // 输入框通用
                .ivu-input {
                    &:extend(.form-edit-base-color);
                }

                .ivu-input::placeholder {
                    color: var(--form-editor-placeholder-font-color);
                }

                // 输入框激活
                .ivu-input:hover {
                    border-color: var(--form-editor-active-color);
                }

                // 输入框禁用
                .ivu-input[disabled] {
                    &:extend(.form-edit-disabled-base-color);
                }

                // 输入框
                .el-input {

                    >input {
                        &:extend(.form-edit-base-color);
                    }

                    >input::placeholder {
                        color: var(--form-editor-placeholder-font-color);
                    }

                    >input:hover {
                        border-color: var(--form-editor-active-color);
                    }

                    >input[disabled] {
                        &:extend(.form-edit-disabled-base-color);
                    }
                }

                // 步进器
                .el-input-number {
                    height: 32px;
                    line-height: 32px;
                    &:extend(.form-edit-base-color);

                    >span[role="button"] {
                        background-color: var(--view-button-background-color);
                        color: var(--view-button-color);
                        border-right-color: var(--form-editor-background-color);
                        border-left-color: var(--form-editor-background-color);
                    }

                    >.el-input {

                        >input {
                            height: 32px;
                            line-height: 32px;
                        }
                    }
                }

                // 下拉列表框
                .dropdown-list.ivu-select.ivu-select-default {

                    >.ivu-select-selection {
                        &:extend(.form-edit-base-color);

                        .ivu-select-placeholder {
                            color: var(--form-editor-placeholder-font-color);
                        }
                    }

                    >.ivu-select-selection:hover {
                        border-color: var(--form-editor-active-color);
                    }
                }

                // 选项框
                .ivu-checkbox-wrapper.ivu-checkbox-default {

                    >.ivu-checkbox {

                        >.ivu-checkbox-inner {
                            &:extend(.form-edit-base-color);
                        }
                    }

                    >.ivu-checkbox.ivu-checkbox-checked {

                        >.ivu-checkbox-inner {
                            background-color: var(--form-editor-active-color);
                        }
                    }
                }

                // 滑动输入条
                .el-slider {

                    >.el-slider__runway {
                        &:extend(.form-edit-base-color);

                        >.el-slider__bar {
                            background-color: var(--form-editor-active-color);
                        }
                    }
                }

                // 开关-关闭
                .el-switch {

                    >.el-switch__core {
                        &:extend(.form-edit-base-color);
                    }

                    >.el-switch__core:hover {
                        border-color: var(--form-editor-active-color);
                    }
                }

                // 开关-打开
                .el-switch.is-checked {

                    >.el-switch__core {
                        background-color: var(--form-editor-active-color);
                    }
                }

                // 图片上传
                .app-picture-upload {

                    .el-upload.el-upload--picture-card {
                        &:extend(.form-edit-base-color);
                    }

                    .el-upload--picture-card:hover,
                    .el-upload:focus {
                        border-color: var(--form-editor-active-color);
                        color: var(--form-editor-active-color);
                    }
                }

                // 下拉选择多选
                .dropdown-list-mpicker.ivu-select {
                    color: var(--form-label-font-color);

                    >.ivu-select-selection {
                        background: var(--form-editor-background-color);
                        border-color: transparent;

                        .ivu-select-placeholder {
                            color: var(--form-editor-placeholder-font-color);
                        }

                        .ivu-tag {
                            background: var(--form-editor-background-color);
                            border-color: var(--form-editor-active-color);

                            .ivu-tag-text {
                                color: var(--form-editor-font-color);
                            }
                        }
                    }

                    >.ivu-select-selection:hover {
                        border-color: var(--form-editor-active-color);
                    }
                }
            }
        }
    }
}

// 自动填充下拉内容
.el-autocomplete-suggestion {
    &:extend(.form-edit-base-color);

    ul {

        li:hover {
            background-color: var(--form-editor-active-color);
        }
    }
}

// 自动填充下拉内容-加载中
.el-autocomplete-suggestion.is-loading {

    ul {

        li:hover {
            background-color: var(--form-editor-active-color);
        }
    }
}

// 时间选择飘窗
.ivu-select-dropdown.ivu-date-picker-transfer {
    &:extend(.form-edit-base-color);

    .ivu-picker-panel-body {

        .ivu-date-picker-cells-cell-next-month,
        .ivu-date-picker-cells-cell-prev-month {

            em {
                color: var(--form-editor-placeholder-font-color);
            }
        }

        .ivu-date-picker-cells-header {

            >span {
                color: var(--form-editor-placeholder-font-color);
            }
        }

        .ivu-picker-panel-icon-btn {
            color: var(--form-editor-placeholder-font-color);
        }

        .ivu-date-picker-cells-cell.ivu-date-picker-cells-cell-today {

            >em::after {
                background: var(--form-editor-active-color);
            }
        }

        .ivu-date-picker-cells-cell.ivu-date-picker-cells-cell-selected {

            >em {
                background: var(--form-editor-active-color);
            }
        }

        .ivu-date-picker-cells-cell.ivu-date-picker-cells-focused {

            >em {
                box-shadow: 0 0 0 1px var(--form-editor-active-color) inset;
            }
        }
    }
}

// 表单样式 End

// 抽屉
.ivu-drawer {

    >.ivu-drawer-content {
        background-color: var(--view-background-color);

        >.ivu-drawer-body {
            padding: 0px;
        }
    }
}

// 模态
.ivu-modal-wrap.app-modal {

    .ivu-modal {

        >.ivu-modal-content {
            background-color: var(--view-background-color);
            color: var(--view-font-color);

            >.ivu-modal-close {
                top: 2px;
            }

            >.ivu-modal-header {
                padding: 7px 8px;
                border-bottom-color: var(--app-dividing-line-color-bright);

                >.ivu-modal-header-inner {
                    color: var(--view-font-color);
                }
            }

            >.ivu-modal-body {
                padding: 0;

                >.studio-view.view-container {
                    border-radius: 0px 0px 5px 5px;
                }
            }
        }
    }
}

// 飘窗
.ivu-poptip-popper {

    >.ivu-poptip-content {

        >.ivu-poptip-inner {
            background-color: var(--view-background-color);
            color: var(--view-font-color);

            >.ivu-poptip-body {
                padding: 4px 8px;

                .el-checkbox {

                    >.el-checkbox__input {

                        >.el-checkbox__inner {
                            &:extend(.form-edit-base-color);
                        }
                    }
                }

                .el-checkbox.is-checked {

                    >.el-checkbox__input {

                        >.el-checkbox__inner {
                            background-color: var(--form-editor-active-color);
                        }
                    }

                    >.el-checkbox__label {
                        color: var(--form-editor-active-color);
                    }
                }
            }
        }
    }
}

// 列表部件
.app-list {
    height: 100%;
}

// 列表: 暂无数据
.app-list.app-list-empty {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

// poptip确认对话框
.ivu-poptip.ivu-poptip-confirm {

    .ivu-poptip-footer {

        >.ivu-btn.ivu-btn-text {
            color: var(--view-button-background-color);
        }

        >.ivu-btn.ivu-btn-text:hover {
            color: var(--view-button-background-color-active);
        }
    }
}

// element下拉菜单样式
.el-dropdown-menu.el-popper {
    background: var(--view-button-background-color);
    padding: 0px;
    border: 0px;

    >.popper__arrow::after {
        border-bottom-color: var(--view-button-background-color);
    }

    >.el-dropdown-menu__item {
        color: var(--view-button-color);
    }

    >.el-dropdown-menu__item.is-select {
        background-color: var(--view-button-background-color-active);

        >span {

            >span {
                color: var(--view-button-color-active) !important;
            }
        }
    }

    .el-dropdown-menu__item:hover {
        background-color: var(--view-button-background-color-active);
        color: var(--view-button-color-active);
    }

}

// 分页导航，子视图工具栏上漂在导航左侧
.detabexpview.tab-exp-view-header-flot.studio-view.view-container {

    .studio-view.view-container {
        position: unset;

        >.view-header {
            position: absolute;
            top: -2px;
            right: 0px;
            width: auto;
            height: 32px;
            border: 0px;
        }

        >.view-content {
            height: 100%;
        }
    }
}

// HTML视图样式
.dehtmlview.studio-view.view-container {

    .content-wrapper {

        >.iframe-container {
            width: 100%;
            height: 100%;
            border: 0;
        }
    }
}

// 数据看板，门户部件卡片样式
.portlet-card.ivu-card {
    background: transparent;
}

// iview下拉菜单样式
.studio-dropdown.ivu-dropdown {

    .ivu-select-dropdown {
        margin: 0;
        padding: 0;
        background-color: var(--view-button-background-color);
        color: var(--view-button-color);
        overflow: unset;

        >.ivu-dropdown-menu {
            padding: 5px 0px;

            .ivu-dropdown-item {
                color: var(--view-button-color);
                padding: 5px 8px;

                >i {
                    min-width: 16px;
                }
            }

            .ivu-dropdown-item:hover {
                background-color: var(--view-button-background-color-active);
                color: var(--view-button-color-active);
            }

            .ivu-dropdown-item.seperator {
                padding: 0;
                border-bottom: 1px solid var(--view-button-color);
            }
        }
    }
}

@import './user.less';