ming-can-api/public/assets/addons/darktheme/css/darktheme.less

@import "../../../../public/assets/less/bootstrap-less/mixins.less";
@import "../../../../public/assets/less/bootstrap-less/variables.less";
@import "../../../../public/assets/less/fastadmin/variables.less";
@import "../../../../public/assets/less/fastadmin/mixins.less";

@bgcolor: #262626;
@fontcolor: #ccc;
@lightenbgcolor: lighten(@bgcolor, 10%);
@tablebordercolor: #2a2a2a;

@primary: #4e73df;
@sidebar-dark-bg: darken(@bgcolor, 10%);
@sidebar-dark-submenu-bg: darken(@bgcolor, 5%);

:root {
    --bgcolor: @bgcolor;
    --lightenbgcolor: @lightenbgcolor;
    --fontcolor: @fontcolor;
}

.scrollbars(@size, @foreground-color, @background-color) {
    &::-webkit-scrollbar {
        width: @size;
        height: @size;
    }
    &::-webkit-scrollbar-thumb {
        background: @foreground-color;
    }
    &::-webkit-scrollbar-track {
        background: @background-color;
    }

    scrollbar-color: @foreground-color @background-color;
}


body.darktheme {
    background-color: @bgcolor;
    color: @fontcolor;

    #toast-container > div, #toast-container > div:hover {
        box-shadow: none;
    }

    hr {
        border-top-color: @bgcolor;
    }

    .autocontent .autocontent-caret {
        background-color: @bgcolor;
        color: @fontcolor;
    }

    .breadcrumb {
        background: @lightenbgcolor;
    }

    .nav-pills > li > a {
        color: @fontcolor;
    }

    .nav > li > a:hover, .nav > li > a:active, .nav > li > a:focus {
        background-color: @lightenbgcolor;
    }

    .pager li > a, .pager li > span {
        background-color: @lightenbgcolor;
        border-color: @lightenbgcolor;
    }

    .pager .disabled > a, .pager .disabled > a:hover, .pager .disabled > a:focus, .pager .disabled > span {
        background-color: @lightenbgcolor;
    }

    .jumbotron {
        background-color: @lightenbgcolor;
    }

    .panel-footer {
        border-top-color: @lightenbgcolor;
        background-color: @lightenbgcolor;
    }

    a.list-group-item, button.list-group-item {
        color: @fontcolor;
    }

    a.list-group-item .list-group-item-heading, button.list-group-item .list-group-item-heading {
        color: #eee;
    }

    .page-header {
        border-bottom-color: @lightenbgcolor;
    }

    .progress {
        background-color: lighten(@lightenbgcolor, 10%);
    }

    .nav-tabs {
        border-color: @lightenbgcolor;

        > li.active > a, > li.active > a:hover, > li.active > a:focus {
            background-color: @lightenbgcolor;
            border-color: @lightenbgcolor;
            color: @fontcolor;
        }

        > li > a:hover {
            background-color: @bgcolor;
            border-color: @bgcolor;
            color: @fontcolor;
        }
    }

    .main-header .navbar {
        background-color: @lightenbgcolor;

        .nav > li > a {
            color: #aaa;
        }
    }

    .alert-info-light {
        background-color: #274557;
        border-color: #274557;
    }

    .alert-warning-light {
        background-color: #504b33;
        border-color: #504b33;
    }

    .main-header .navbar .sidebar-toggle {
        color: @fontcolor;
    }

    .nav-addtabs > li > a {
        border-right: 1px solid rgba(255, 255, 255, 0.05);
    }

    .main-header .navbar .nav > li > a:hover, .main-header .navbar .nav > li > a:active, .main-header .navbar .nav > li > a:focus, .main-header .navbar .nav .open > a, .main-header .navbar .nav .open > a:hover, .main-header .navbar .nav .open > a:focus, .main-header .navbar .nav > .active > a {
        background: darken(@lightenbgcolor, 10%);
        color: @fontcolor;
    }

    .content-wrapper, .right-side {
        background-color: #333;
    }

    .panel {
        background-color: lighten(@bgcolor, 5%);
    }

    .panel-intro > .panel-heading {
        background-color: lighten(@bgcolor, 10%);
        border-color: lighten(@bgcolor, 10%);
        color: @fontcolor;
    }

    .panel-intro > .panel-heading .nav-tabs > li.active > a, .panel-intro > .panel-heading .nav-tabs > li.active > a:hover, .panel-intro > .panel-heading .nav-tabs > li.active > a:focus {
        background-color: #333;
        border-color: #333;
        color: @fontcolor;
    }

    .panel-intro > .panel-heading .nav-tabs > li > a {
        background-color: @bgcolor;
        border-color: @bgcolor;
    }

    .table > thead > tr > th {
        border-bottom-color: @tablebordercolor;
    }

    .table-striped tbody > tr:nth-of-type(2n+1) {
        background-color: darken(@lightenbgcolor, 2%);
    }

    .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
        border-top: 1px solid #363636;
    }

    .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
        border-color: @tablebordercolor;
    }

    .table-bordered {
        border-color: @tablebordercolor;
    }

    .fixed-table-loading {
        background-color: @bgcolor;
        border-color: #000;
    }

    .table-hover > tbody > tr:hover {
        background-color: @lightenbgcolor;
    }

    .fixed-table-container tbody .selected td {
        background-color: #363d4f;
    }

    .fixed-columns, .fixed-columns-right {
        background-color: lighten(@bgcolor, 5%);
        box-shadow: -1px 0 8px rgba(0, 0, 0, 0.18);
    }

    .pagination > li > a {
        background: @bgcolor;
        border-color: @bgcolor;

        &:hover {
            color: #344;
        }
    }

    .bootstrap-tagsinput {
        background-color: #3c3e3d;
        border-color: #444;
    }

    .form-control {
        background-color: #3c3e3d;
        border-color: #444;
        color: #eee;
    }

    .city-picker-span {

        background-color: #3c3e3d;
        border-color: #444;
        color: #eee;

        > .title > span {
            color: @fontcolor;
        }
    }

    .city-select-tab > a {
        border-color: lighten(#3c3e3d, 10%);
        color: @fontcolor;

        &.active {
            background-color: lighten(#3c3e3d, 10%);
        }
    }

    .city-select-content {

        background-color: lighten(#3c3e3d, 10%);
        color: #eee;

        .city-select a {
            color: @fontcolor;

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

    .city-select-tab {

        background-color: #3c3e3d;
        border-color: #444;
        color: #eee;
    }

    .daterangepicker {
        background-color: lighten(#3c3e3d, 10%);
    }

    .ranges li, .daterangepicker .calendar-table {

        background-color: @lightenbgcolor;
        border-color: @lightenbgcolor;
        color: @fontcolor;
    }

    .mockup-bg {
        background-color: @bgcolor;
    }

    .sm-st, .stores {
        background: @bgcolor !important;
    }

    .daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {

        background-color: lighten(#3c3e3d, 5%);
    }

    .daterangepicker td.in-range {

        background-color: lighten(#3c3e3d, 10%);
        color: @fontcolor;
    }

    .bootstrap-datetimepicker-widget.dropdown-menu.top:after {
        border-top-color: lighten(#3c3e3d, 5%);
    }

    .input-group .input-group-addon {
        background-color: #3c3e3d;
        border-color: #444;
        color: #eee;
    }

    .sp_result_area, .sp_results {
        background-color: @lightenbgcolor;
        border-color: @lightenbgcolor;

        > li {
            color: @fontcolor;

            &.sp_selected {
                background-color: darken(@lightenbgcolor, 5%);
            }
        }
    }

    div.sp_result_area div.sp_pagination > ul > li > a {
        background-color: @lightenbgcolor;
        color: @fontcolor;

        &:hover {
            color: lighten(@fontcolor, 10%);
            background-color: darken(@lightenbgcolor, 10%);
        }
    }

    div.sp_result_area div.sp_pagination > ul > li.pageInfoBox > a {
        color: @fontcolor;
    }

    div.sp_result_area div.sp_pagination > ul > li.disabled > a {
        color: darken(@fontcolor, 20%);

        &:hover {
            color: darken(@fontcolor, 20%);
            background-color: inherit;
        }
    }

    .sp_control_box button {
        color: @fontcolor;
    }

    .sp_control_box:hover {
        background-color: @bgcolor;
    }

    .sp_control_box:hover button {
        background-color: @bgcolor;
        opacity: 1;
    }

    .sp_control_box:hover button:hover {
        background-color: @bgcolor;
        color: black;
    }

    div.sp_container_combo {

        background-color: #3c3e3d;
        border-color: #444;
    }

    ul.sp_element_box li.selected_tag {
        background-color: dodgerblue;
        color: #fff;
        box-shadow: none;
        border: none;
    }

    .thumbnail {
        background-color: #888;
        border-color: #444;
    }

    .btn-default {
        background-color: #888;
        border-color: #444;
    }

    .dropdown {
        .btn-default, .btn-default:hover {

            background-color: #3c3e3d;
            border-color: #444;
            color: @fontcolor;
        }


    }

    .dropdown-menu {
        background-color: @lightenbgcolor;
        color: @fontcolor;

        > .divider {
            background-color: lighten(@lightenbgcolor, 15%);
        }

        > li > a {
            color: @fontcolor;

            &:hover {
                color: lighten(@fontcolor, 10%);
                background-color: lighten(@lightenbgcolor, 10%);
            }
        }
    }

    &.is-dialog {
        background-color: @bgcolor;

        #main {
            background-color: @bgcolor;
        }
    }

    .layui-layer-load {
        background-color: @bgcolor;
    }

    .layui-layer-fast .layui-layer-footer, .layui-layer-fast .layui-layer-btn {
        background-color: #2b2d32;
    }

    .layui-layer {
        background-color: lighten(@bgcolor, 5%);
    }

    .layui-layer-fast .layui-layer-title {
        background-color: darken(@bgcolor, 8%) !important;
    }

    .layui-layer-prompt .layui-layer-input {
        background-color: #3c3e3d;
        border-color: #444;
        color: #eee;
    }

    .text-primary {
        color: @fontcolor;
    }

    a.title {
        color: #47a0f2;
    }

    legend {
        color: @fontcolor;
    }

    canvas {
        filter: invert(1) hue-rotate(180deg);
    }

    .popover {

        background-color: @lightenbgcolor;
        border-color: @lightenbgcolor;
    }

    .popover.top > .arrow:after {

        border-top-color: @lightenbgcolor;
    }

    .list-group-item {
        background-color: @lightenbgcolor;
        border-color: @tablebordercolor;
    }

    @media (max-width: 991px) {
        .navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
            border-color: @lightenbgcolor;
            background-color: @lightenbgcolor;
            box-shadow: none;
        }
    }
    .scrollbars(9px, #999, #333);

    div, ul, textarea {
        .scrollbars(9px, #666, #333);
    }

    &.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
        border-left-color: @bgcolor;
    }

    .well, .box {

        background-color: darken(@lightenbgcolor, 2%);
        border-color: darken(@lightenbgcolor, 2%);
    }

    #secondnav {
        background-color: lighten(@lightenbgcolor, 5%);

        .nav-addtabs > li {
            background-color: lighten(@bgcolor, 20%);
            border-color: lighten(@bgcolor, 20%);
            color: @fontcolor;

            > a {
                color: @fontcolor !important;

                &:hover {

                    color: lighten(@fontcolor, 20%) !important;
                }
            }

            &.active {

                background-color: lighten(@bgcolor, 10%);
                border-color: lighten(@bgcolor, 10%);

                > a {
                    color: lighten(@fontcolor, 20%) !important;
                }
            }
        }
    }

    .system-message {
        background-color: @lightenbgcolor;

        h1 {
            color: @fontcolor;
        }
    }

    .wipecache li a {
        color: @fontcolor !important;
    }

    .navbar-nav > .user-menu > .dropdown-menu > .user-body a {
        background-color: @tablebordercolor !important;
        color: @fontcolor !important;
    }

    .navbar-nav > .user-menu > .dropdown-menu > {
        .user-body {
            background-color: @tablebordercolor;
            border-color: @tablebordercolor;
            border-radius: 0;
        }

        .user-footer {
            background-color: darken(@lightenbgcolor, 5%);
            border-color: darken(@lightenbgcolor, 5%);
        }
    }

    .control-sidebar-dark, .control-sidebar-dark + .control-sidebar-bg {
        background-color: @bgcolor;
    }

    #configbody h2 {
        border-bottom-color: lighten(@lightenbgcolor, 10%);
    }

    .exception .source-code {
        background-color: @bgcolor;
    }

    .panel-statistics h3 {
        color: @fontcolor;
    }

    .panel-default {

        border-color: @lightenbgcolor;
        color: @fontcolor;
    }

    .panel-default > .panel-heading {

        background-color: @lightenbgcolor;
        border-color: @lightenbgcolor;
    }

    // 边栏
    .main-header {
        background: @sidebar-dark-bg;

        .navbar {

            .navbar-nav {
                > li > a {
                    border-right: none;
                }
            }

            .navbar-custom-menu .navbar-nav, .navbar-right {
                > li {
                    > a {
                        border-left: none;
                        border-right-width: 0;
                    }
                }
            }

            @media (max-width: @screen-header-collapse) {
                .navbar-variant(darken(@bgcolor, 10%), #fff);
            }
        }

        .logo {
            .logo-variant(@sidebar-dark-bg; #fff);
            border-right: 1px solid @sidebar-dark-bg;
            @media (max-width: @screen-header-collapse) {
                .logo-variant(darken(@bgcolor, 10%), #fff);
                border-right: none;
            }
        }

        li.user-header {
            background-color: @sidebar-dark-bg;
        }

        .nav-addtabs > li > a, .nav-addtabs > li.active > a {
            border-right-color: transparent;
        }

    }

    .content-header {
        background: transparent;
        box-shadow: none;
    }

    .skin-dark-sidebar(#fff);

    .treeview-menu {
        > li {
            > a {
                padding-left: 18px;
            }

            &.active > a {
                background-color: @primary;
            }
        }
    }

    .sidebar-menu {
        > li {

            > a {
                //border-left: 3px solid transparent;
            }

            &.active > a {
                color: @sidebar-dark-hover-color;
                background: @primary;
                border-left-color: @primary;
            }

            &:hover > a {
                border-left-color: transparent;
            }
        }

        li.treeview > a {
            background: transparent;
            border-left-color: transparent;
        }

        li.treeview {
            &.active > a, &.treeview-open > a {
                background-color: @sidebar-dark-submenu-bg;
                border-left-color: @sidebar-dark-submenu-bg;
            }
        }

        .treeview-menu {
            padding-left: 0;

            .treeview-menu {
                padding-left: 0;

                > li > a {
                    padding-left: 30px;
                }
            }

            li.treeview > a {
                background: transparent;
                border-left-color: transparent;
            }
        }
    }

    &.sidebar-collapse {

        .sidebar-menu {
            li:hover > a, li.active > a {
                color: @sidebar-dark-hover-color;
                background: @primary;
            }

            .treeview-menu {
                li.active > a {
                    color: @sidebar-dark-hover-color;
                    background: @primary;
                }

                li.treeview > a {
                    background: transparent;
                    border-left-color: transparent;
                }
            }
        }
    }

    &.multiplenav {
        @media (max-width: @screen-header-collapse) {
            .sidebar .mobilenav a.btn-app {
                background: lighten(@sidebar-dark-bg, 10%);
                color: #fff;

                &.active {
                    background: @primary;
                    color: #fff;
                }
            }
        }
    }

    .box-comments {
        background-color: @tablebordercolor;
    }

    .nav-tabs-custom {
        background-color: @bgcolor;

        > .nav-tabs > li > a, > .nav-tabs > li.header {
            color: @fontcolor;
        }
    }

    .nav-tabs-custom > .tab-content {
        background-color: @lightenbgcolor;
    }

    .box-header {
        color: @fontcolor;
    }

    .box-header.with-border {
        border-bottom-color: @lightenbgcolor;
    }

    .box-footer {
        background-color: @lightenbgcolor;
        border-color: @bgcolor;
    }

    .box-comments .box-comment:first-of-type {
        border-color: @lightenbgcolor;
    }

    .box-comments .username, .box-comments .comment-text {
        color: @fontcolor;
    }

    .nav-stacked > li > a {
        color: @fontcolor;
    }

    .attachment-block {
        background-color: @lightenbgcolor;
        border-color: @lightenbgcolor;
        color: @fontcolor;

        .attachment-text {
            color: @fontcolor;
        }
    }

    .info-box {
        background-color: @lightenbgcolor;
    }
}