// 通常用于背景色
$black-color    :rgb(2, 17, 20);
// 通常用于字体颜色
$main-color     :rgb(126, 252, 246);
// 通常用于边框
$less-main-color:rgb(6, 216, 215);

$plus-main-color:rgb(0, 125, 124);

// 通常用于激活状态,通常跟背景色搭配
$cover-color  :rgba(62, 251, 251, 0.05);
// 更强的激活状态,适合做选项操作时使用
$active-color :rgba(62, 251, 251, 0.5);


$red-color   :rgb(255, 0, 0);
$yellow-color:rgb(255, 255, 153);
$green-color :rgb(0, 255, 0);

& {
    background-color: $black-color;
    color           : $main-color;
}

.layuimini-main {
    background-color: $black-color;
}

.layuimini-container {
    background-color: $black-color;
}

.layuimini-container .layui-table-tool {
    background-color: $black-color;
}

$box-shape: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 0);

.layui-btn {
    clip-path       : $box-shape;
    padding-right   : 10px;
    position        : relative;
    background-color: transparent;
    border          : 1px solid;
    color           : rgb(126, 252, 246);
    text-shadow     : rgb(126, 252, 246) 0px 0px 1px;
    background-color: rgb(126, 252, 246);


    &::before {
        content         : '';
        display         : block;
        position        : absolute;
        z-index         : -1;
        clip-path       : $box-shape;
        width           : 100%;
        height          : 100%;
        left            : -0.5px;
        top             : -0.5px;
        background-color: $black-color;
    }

    &:hover::after {
        content         : '';
        display         : block;
        position        : absolute;
        z-index         : -1;
        clip-path       : $box-shape;
        width           : 100%;
        height          : 100%;
        left            : -0.5px;
        top             : -0.5px;
        background-color: rgba(126, 252, 246, 0.2);
    }

    &.layui-btn-disabled {
        &::after {
            // todo:实现按钮禁用样式
        }
    }

    &.layui-btn-success {
        text-shadow     : rgb(0, 255, 0) 0px 0px 1px;
        color           : rgb(0, 255, 0);
        background-color: rgba(0, 255, 0);
        border          : unset;

        &:hover::after {
            background-color: rgba(0, 255, 0, 0.2);
        }
    }

    &.layui-btn-danger {
        text-shadow     : rgb(255, 0, 0) 0px 0px 1px;
        color           : rgb(255, 0, 0);
        background-color: rgb(255, 0, 0);
        border          : unset;

        &:hover::after {
            background-color: rgba(255, 0, 0, 0.2);
        }
    }

    &.layuimini-btn-primary {
        text-shadow     : rgb(255, 255, 153) 0px 0px 1px;
        color           : rgb(255, 255, 153);
        background-color: rgb(255, 255, 153);
        border          : unset;

        &:hover::after {
            background-color: rgba(255, 255, 153, 0.2);
        }

    }

    &.layui-btn-primary {
        border: unset;
    }

    &.layui-btn-normal {
        color           : $black-color;
        background-color: $main-color;
        border          : unset;

        &::before {
            background-color: $main-color;
        }

        &:hover::after {
            background-color: $main-color;
        }
    }
}

.layui-table {
    background: $black-color;
    color     : $main-color;


    tr {
        background-color: $cover-color;
    }

    td {
        border-color: $less-main-color;
    }

}

.layui-table-header {
    background-color: $black-color;
}

.layuimini-container .layui-table-box {
    border-color: $less-main-color;
}

.layuimini-container .layui-table-box .layui-table-header th {
    color: $main-color !important;
}

.layui-table-tool .layui-inline[lay-event] {
    color   : $main-color;
    border  : none;
    position: relative;

    &::after {
        border-color: $main-color;
        border-width: 1px;
        border-style: solid;
        clip-path   : $box-shape;
        position    : absolute;
        left        : 0;
        top         : 0;
        width       : calc(100% - 1px);
        height      : calc(100% - 1px);
        content     : '';
        display     : block;
    }
}

.layui-table tbody tr:hover {
    background-color: rgba(126, 252, 246, 0.1);
}

.layuimini-main {
    border-color: $less-main-color;
}

.layui-table-header {
    border-color: $less-main-color;
}



.color-content>ul>li>a>div>span:nth-child(2) {
    background-color: $black-color !important;
}

.layuimini-color .elem-content li {
    clip-path: $box-shape;
}

.layuimini-color .elem-content li.layui-this {
    background-color: $main-color;
    color           : $black-color !important;
    border-color    : $less-main-color;
}

.layuimini-color .more-menu-item {
    color: $main-color;

    &:hover {
        background-color: rgba(62, 251, 251, 0.05);
    }
}

.layui-layout-admin .layui-header {
    background-color: $cover-color !important;
}

.layuimini-tab .layui-tab-title {
    background-color: $cover-color !important;
    border-color    : $less-main-color;

}

.layuimini-tab .layui-tab-title span {
    color: $active-color;
}

.layui-header .layuimini-menu-header-pc.layui-nav .layui-nav-item a:hover,
.layui-header .layuimini-header-menu.layuimini-pc-show.layui-nav .layui-this a {
    color: $black-color !important;
}

.layui-layout-admin .layui-header .layui-nav .layui-nav-item a {
    color: $main-color !important;
}

.layui-layout-admin .layui-header .layui-nav .layui-nav-item {
    background-color: $active-color;

}


.layui-layout-admin .layui-header .layuimini-header-content>ul>.layui-nav-item.layui-this,
.layuimini-tool i:hover {
    background-color: $main-color !important;
}

.layuimini-tab .layui-tab-control>li {
    background-color: $black-color;
    border-color    : $less-main-color;
}

.layuimini-tab .layui-tab-title li {
    border-color: $less-main-color;
}

.layui-flow-more a *,
.layui-laypage input,
.layui-table-view select[lay-ignore] {
    border-color    : $less-main-color;
    background-color: $black-color;
    color           : $main-color;
}

.layui-laypage button,
.layui-laypage input {
    border-color    : $less-main-color;
    background-color: $black-color;
    color           : $main-color;

}

.layuimini-container .layui-form-switch {
    border-color: $less-main-color !important;

    background-color: $black-color !important;

}

.layuimini-container .layui-laypage .layui-laypage-curr .layui-laypage-em {
    background-color: $main-color !important;
}

.layui-laypage .layui-laypage-curr em {
    color: $black-color !important;
}

.layuimini-tab .layui-tab-title .layui-this .layuimini-tab-active {
    background-color: $less-main-color;

}

.layui-table-view .layui-form-checkbox.layui-form-checked[lay-skin="primary"] i {
    border-color    : $main-color;
    background-color: $main-color;
    color           : $black-color;
}

.layui-table-view .layui-form-checkbox[lay-skin="primary"] i {
    background-color: $cover-color;
}

.layui-table-init {
    background-color: $black-color;
}

.box-border-line {
    position      : relative;
    border        : 1px solid $less-main-color;
    border-width  : 1px;
    $border-offset: 3px;

    &::before {
        content       : '';
        position      : absolute;
        width         : 50px;
        height        : 20px;
        transition    : all 0.2s;
        border        : 1px solid $less-main-color;
        top           : -$border-offset;
        left          : -$border-offset;
        border-right  : none;
        border-bottom : none;
        pointer-events: none;
    }

    &::after {
        content       : "";
        position      : absolute;
        width         : 50px;
        height        : 20px;
        transition    : all 0.2s;
        border        : 1px solid $less-main-color;
        bottom        : -$border-offset;
        right         : -$border-offset;
        border-left   : none;
        border-top    : none;
        pointer-events: none;
    }

    &:hover {

        &::after,
        &::before {
            width : calc(100% + $border-offset);
            height: calc(100% + $border-offset);
        }
    }
}

.table-search-fieldset {
    .layui-input-inline {
        margin-right: 0;
    }



    .layui-form-item:not(:last-child) {
        margin-right: 10px;
        @extend .box-border-line;
    }

    .layui-form-label {
        border: unset;
    }
}

.layui-form-pane .layui-form-label {
    background-color: $cover-color;
    color           : $main-color;
}

.layuimini-container .layui-form-select dl dd.layui-this {
    background-color: $main-color !important;
    color           : $black-color;
}

.layuimini-container .table-search-fieldset {
    color       : $main-color;
    border-color: $less-main-color;

}

.layui-form-select dl {
    color: $black-color;
}

.layui-nav-child {
    background-color: $black-color;
    color           : $main-color;
}

.layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child a {
    color: $main-color !important;
}

.layui-badge,
.layui-badge-dot,
.layui-badge-rim {
    background-color: $main-color;
}

.layui-nav .layui-nav-child a:hover {
    background-color: $active-color;
}

.layui-table-tool-panel {
    background-color: $black-color;
}

.layui-form-checkbox[lay-skin="primary"] span {
    color: $main-color;
}

.layui-table-tool-panel li:hover {
    background-color: $active-color;
}

.layui-side.layui-bg-black,
.layui-side.layui-bg-black>.layuimini-menu-left>ul,
.layuimini-menu-left-zoom>ul {
    background-color: $black-color !important;

}

.layui-side {
    border-right: 1px solid $main-color;
}

.layui-bg-blue {
    background-color: #0000ff !important;
}

.layui-bg-orange {
    background-color: $yellow-color !important;
    color           : $black-color !important;
}

.layui-bg-green {
    background-color: $green-color !important;
    color           : $black-color !important;
}

.layui-table-hover {
    background-color: $cover-color;
}

.layui-table-grid-down {
    background-color: $black-color;
    color           : $main-color;
    border-color    : unset;
}

.layui-table-tips-main {
    background-color: $main-color;
    color           : $black-color;
}

.layui-layout-admin .layui-header .layuimini-tool i {
    color: $main-color;
}

.color-red {
    color: $red-color !important;
}

.layuimini-tab .layui-tab-title .layui-this span {
    color: $main-color;
}

.layui-card {

    background-color: $cover-color;
    border-radius   : 0;

    @extend .box-border-line;

    .layui-card-header {
        color: $main-color;
    }
}

.layui-text {
    color: $main-color;
}


.layuimini-qiuck-module {
    cursor: pointer;

    a i {
        background-color: $cover-color;
        color           : $active-color;
    }

    a cite {
        color: $active-color;
    }


    &:hover {
        a i {
            background-color: $active-color;
            color           : $main-color;
        }

        a cite {
            color: $main-color;
        }

    }
}

.layui-bg-number {
    background-color: $cover-color;
}

.layui-input,
.layui-select,
.layui-textarea,
.city-picker-span,
.main-input {
    background-color: $cover-color;
    color           : $main-color;
}

.city-picker-span>.title>span {
    color: $main-color;

    &:hover {
        background-color: $main-color;
        color           : $black-color;
    }
}

.layui-form-radio:hover *,
.layui-form-radioed,
.layui-form-radioed>i {
    color: $main-color;
}

.layui-form-checked[lay-skin="primary"] i {
    border-color    : $main-color !important;
    background-color: $main-color;
    color           : $black-color;
}

.layui-input:focus,
.layui-textarea:focus {
    border-color: $main-color !important;
}

.layui-input:hover,
.layui-textarea:hover {
    border-color: $main-color !important;

}

.layui-badge-rim,
.layui-border,
.layui-colla-content,
.layui-colla-item,
.layui-collapse,
.layui-elem-field,
.layui-form-pane .layui-form-item[pane],
.layui-form-pane .layui-form-label,
.layui-input,
.layui-layedit,
.layui-layedit-tool,
.layui-panel,
.layui-quote-nm,
.layui-select,
.layui-tab-bar,
.layui-tab-card,
.layui-tab-title,
.layui-tab-title .layui-this::after,
.layui-textarea {
    border-color: $main-color !important;
}

.form-search .layui-input-inline input,
.form-search .layui-input-inline select {
    border-width: 0 0 0 1px;
}

.layuimini-tab .layui-tab-tool .layui-nav-child {
    border-color: $main-color;
}

.layui-nav .layui-nav-child a {
    color: $main-color;
}

.layui-form-item {
    margin-bottom: 12px;
}

.layuimini-upload .layuimini-upload-btn {
    background-color: $black-color;
}

.layui-layer {
    border          : 1px solid $main-color;
    background-color: $black-color;
}

.layui-layer-easy .layui-layer-title {
    background-color: $plus-main-color !important;
    color           : $main-color !important;
}

.tableSelect {
    background-color: $black-color !important;
    border-color    : $less-main-color !important;
}

.layui-table td,
.layui-table th,
.layui-table-col-set,
.layui-table-fixed-r,
.layui-table-grid-down,
.layui-table-header,
.layui-table-page,
.layui-table-tips-main,
.layui-table-tool,
.layui-table-total,
.layui-table-view,
.layui-table[lay-skin="line"],
.layui-table[lay-skin="row"] {
    border-color: $less-main-color;
}

.layui-table tbody tr:hover,
.layui-table thead tr,
.layui-table-click,
.layui-table-header,
.layui-table-hover,
.layui-table-mend,
.layui-table-patch,
.layui-table-tool,
.layui-table-total,
.layui-table-total tr {
    background-color: $black-color;
}

.hr-line {
    color           : $main-color;
    border-color    : $less-main-color;
    background-color: $main-color;
}

.layui-layer-easy .layui-layer-btn {
    background-color: $black-color;
    border-top      : 1px solid $less-main-color;
}

.layui-layer-easy .layui-layer-btn .layui-layer-btn0 {
    background-color: $main-color;
    border-color    : $less-main-color;
    color           : $main-color !important;
    clip-path       : $box-shape;
}

.layui-layer-easy .layui-layer-btn a {
    @extend .layui-btn
}

.layui-layer-shade {
    background-color: #fff !important;
}

.layuimini-menu-left {
    .layui-nav-tree .layui-nav-item {

        margin: 5px;
        width : calc(100% - 10px);
    }

    .layui-nav .layui-nav-item {
        clip-path       : $box-shape;
        color           : $main-color;
        background-color: $active-color;

        &.layui-this a {
            background-color: $main-color !important;
            color           : $black-color !important;
        }

        &.layui-this {
            background-color: $main-color !important;
            color           : $black-color !important;

            span {
                background-color: $main-color !important;
                color           : $black-color !important;

            }
        }
    }

    .layui-nav .layui-nav-item a:hover {
        background-color: $active-color !important;
    }

}

.layuimini-menu-left .layui-nav .layui-nav-item a,
.layuimini-menu-left-zoom.layui-nav .layui-nav-item a {
    color: $main-color !important;
}

.layuimini-menu-left .layui-nav-item a span {
    color: $main-color !important;

}

.layuimini-menu-left .layui-nav-item:hover a span {
    color: $black-color !important;

}

.layui-layout-admin .layuimini-logo {
    background-color: $black-color !important;

}

.layuimini-menu-left .layui-nav-itemed>.layui-nav-child {
    background-color: $black-color !important;
}

.layuimini-menu-left .layui-nav-tree .layui-this,
.layuimini-menu-left .layui-nav-tree .layui-this>a,
.layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this,
.layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this a,
.layuimini-menu-left-zoom.layui-nav-tree .layui-this,
.layuimini-menu-left-zoom.layui-nav-tree .layui-this>a,
.layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this,
.layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this a {
    background-color: $main-color !important;
    color           : $black-color !important;

    .layui-left-nav {
        color: $black-color !important;
    }
}


.layui-iconpicker-icon {
    border-color    : $less-main-color !important;
    background-color: $less-main-color !important;
}

.layui-iconpicker .layui-anim {
    background-color: $black-color;
}

.layui-iconpicker .layui-iconpicker-list {
    background-color: $black-color;
}

.layui-header .layui-nav .layui-nav-child dd.layui-this a,
.layui-header .layui-nav-child dd.layui-this,
.layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child .layui-this a {
    background-color: $active-color !important;
}