// 代码面板颜色
$white :  #FFFFFF;
$font-color : #adadad;
$border-color : #4a4e50;
// 代码主区域背景色，跟codemirror base16-dark主题颜色一致
$back-color-1 : rgb(21, 21, 21);
// 面板的其他区域灰色填充
$back-color-2 : #3c3f41;

@mixin coding-panel {

    .codeDiv {
        width: 100%;
        height: 100%;
    }

    .splitLine {
        position:absolute;
        left:248px;
        z-index:100;
        height:calc(100% - 70px);
        width:2px;
        overflow:hidden;
        background:$back-color-2;
        cursor:w-resize;
    }

    .el-dialog__header {
        background-color: $back-color-2;
        padding: 10px 20px 10px;
    }

    .el-dialog__title {
        color: $white;
    }

    .el-dialog__headerbtn {
        top: 15px;
    }

    .el-dialog__close {
        color: $white;
    }
    .el-dialog__close:hover {
        color: $white;
    }

    .el-loading-mask{
        background-color: #5d6164;
    }
    .el-dialog__body {
        height: calc(100% - 55px);
        padding: 0px;
    }
    .el-tree {
        color: $font-color;
        min-width: 100%;
        display:inline-block !important;
    }
    .el-tree-node.is-current>.el-tree-node__content{
        background-color: #0d293e;
    }
    .el-tree__empty-block {
        background: $back-color-2;
    }
    .CodeMirror {
        border: 1px solid $back-color-1;
        height: auto;
    }
    .codeContainer {
        height: calc(100% - 15px);
    }
    .codeMain {
        background-color: $back-color-1;
        padding: 0px;
    }
    .codeAside {
        background-color: $back-color-2;
        .el-scrollbar__wrap{
            overflow-x: hidden;
        }
    }
    .codePath {
        background-color: $back-color-2;
        border: 1px solid #5a5b5f;
        font-size: 16px;
        height: 25px !important;
        color: $font-color;
        .codePathCell {
            line-height: 23px;
        }
    }
    .codeTreeNode {
        width: 100%;
        user-select: none;
    }
    .codeTabLabel {
        padding: 10px;
    }
    .codeContextMenu {
        background-color: $back-color-2;
        border-radius: 0px;
        border: 1px solid $border-color;
        .vue-simple-context-menu__item {
            color: $font-color;
        }
    }
    .el-tree,.el-tree-node__children,.el-tree-node,.el-tree-node__content{
        background-color: $back-color-2;
    }
    .el-tree-node:focus>.el-tree-node__content {
        background-color: #0d293e;
    }
    .el-tabs--border-card {
        border: 0px;
        border-left: 1px solid $border-color !important;
    }
    .el-tabs__item {
        color: $font-color !important;
        border-left-color: $border-color !important;
        border-right: 1px solid $border-color !important;
    }
    .el-tabs__item.is-active {
        background-color: #515658 !important;
        border-bottom: 3px solid #4a7a88;
    }
    .el-tabs__header {
        background-color: $back-color-2;
        border-bottom: 1px solid $back-color-1;
        .el-tabs__item {
            padding: 0 5px !important;
        }
    }
    .el-tabs__content {
        padding: 0px;
    }

}
