// 【页面】动态表单-表单设计
// 动态表单
.comp-content {
    background: $black-theme-main;

    .fd-nav {
        background   : #313348;
        border-bottom: 5px solid #2A2B3D;

        .fd-nav-left {
            span {
                color: #DBDEE7;
            }

            .button-publish {
                color       : #DBDEE7;
                background  : $transparent;
                border-color: $transparent;

                &:hover {
                    box-shadow: none;
                    opacity   : 0.6;
                }
            }
        }

        .fd-nav-right {
            .button-publish {
                background   : $transparent;
                border       : 1px solid #1B97FF;
                border-radius: 4px;

                &:hover {
                    box-shadow: none;
                    opacity   : 0.6;
                }
            }
        }
    }

    .fd-nav-content {
        .flow-template {

            background-color: #313348;
            border-color    : $transparent;
        }

        .dx-tree-box {
            color: #DBDEE7;
        }

        .dingflow-design {
            .box-scale {
                background-color: #2A2B3D;

                .node-wrap-box {
                    &::before {
                        background-color: $transparent;
                    }

                    background-color: #41435E;
                }

                .node-wrap-body {
                    .branch-wrap {
                        .branch-box {
                            .add-branch {
                                background: #41435E;
                                color     : #DBDEE7;
                            }

                            .col-box {
                                background-color: $transparent;

                                .condition-node-box {
                                    .auto-judge {
                                        background-color: #41435E;

                                        .title-wrapper {
                                            .priority-title {
                                                color: #DBDEE7;
                                            }
                                        }

                                        .content {
                                            color: #DBDEE7;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                .end-node-text {
                    color: #DBDEE7;
                }
            }
        }
    }

    .fm2-container {
        background: $black-theme-main;

        // border:1px solid $input-border-color;
        .el-main.fm2-main {
            background: $black-theme-main !important;

            .el-aside {
                background: transparent;

                .widget-cate {
                    color: #9db5c7;
                }

                .form-edit-widget-label {
                    background: $table-main-color;
                    border    : 2px solid $table-main-color;

                    a {
                        background: transparent;
                        color     : #9db5c7;
                        border    : none;
                    }
                }
            }

            .el-container.is-vertical {
                background: $black-theme-main;

                .el-header {
                    border-bottom: 2px solid $input-border-color;

                    #page-addbtn {
                        background: $transparent;
                    }
                }

                .el-main,
                .widget-form-list {
                    background: transparent !important;
                }

                .config-tab {
                    color: #9db5c7;

                    &.active {
                        color: #2281f3;
                    }
                }
            }

            .widget-view {
                background: $black-theme-main;

                &.active {
                    border: 1px dashed #2281f3;
                }

                &:hover {
                    background: #353883;
                }

                .widget-col-list {
                    background: #323c70;
                }

                .table-container {
                    background: transparent;
                }
            }
        }
    }
}

// 【页面】动态表单-元数据管理
.source-container {
    .left {
        background: $black-theme-main;
    }
}