FastAdmin/public/assets/less/backend.less

@import (reference) "bootstrap-less/mixins.less";
@import (reference) "bootstrap-less/variables.less";
@import (reference) "fastadmin/mixins.less";
@import (reference) "fastadmin/variables.less";
@import "lesshat.less";

@import url("../css/bootstrap.min.css");
@import url("../css/fastadmin.min.css");
@import url("../css/skins/skin-green.css");
@import url("../css/iconfont.css");
@import url("../libs/font-awesome/css/font-awesome.min.css");
@import url("../libs/toastr/toastr.min.css");
@import url("../libs/layer/build/skin/default/layer.css");
@import url("../libs/bootstrap-table/dist/bootstrap-table.min.css");
@import url("../libs/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css");
@import url("../libs/nice-validator/dist/jquery.validator.css");
@import url("../libs/selectpage/selectpage.css");

.clearfix() {
    &:before,
        &:after {
        content: " "; // 1
        display: table; // 2
    }
    &:after {
        clear: both;
    }
}

@main-bg:           #f1f4f6;
@panel-intro-bg:    darken(@main-bg,3%);
@panel-nav-bg:    #fff;

body {
    background:#f1f4f6;
}
body.is-dialog {
    background:#fff;
}

.selection {
    position: absolute;
    border: 1px solid #8B9;
    background-color: #BEC;
}
.main-header {
    .logo,.navbar {
        .transition(none);
    }
    .navbar{
        position:relative;
        .sidebar-toggle{
            position:absolute;
            width:45px;
            text-align: center;
        }
        #nav{
            position:absolute;
            left:45px;
        }
        .navbar-custom-menu {
            position:absolute;
            right:0;
        }
    }
}
.note-dialog .modal {z-index:1060;}

.bootstrap-dialog .modal-dialog {
    /*width: 70%;*/
    max-width:885px;
}
/*iOS兼容*/
html.ios-fix,html.ios-fix body {
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.content {
    min-height:500px;
}
#header {
    background: #fff;
    box-shadow: 0 2px 2px rgba(0,0,0,.05),0 1px 0 rgba(0,0,0,.05);
}
.content-wrapper {
    position:relative;
}
.control-relative{
    position:relative;
}
.tab-addtabs {
    overflow: hidden;
    .tab-pane {
        height: 100%;
        width: 100%;
    }
}

@media only screen and (min-width : 481px) {
    .row-flex {
        display: flex;
        flex-wrap: wrap;
    }
    .row-flex > [class*='col-'] {
        display: flex;
        flex-direction: column;
    }
    .row-flex.row:after, 
    .row-flex.row:before {
        display: flex;
    }
}
.common-search-table {
    min-height: 20px;
    padding: 15px;
    margin-bottom: 15px;
    background-color: #f5f5f5;
}
.searchit{
    border-bottom:1px dashed @link-color;
}
/* 固定的底部按钮 */
.fixed-footer {
    position: fixed;
    bottom:0;    
    background-color: #ecf0f1;
    width:100%;
    margin-bottom:0;
    padding:10px;
}
/* 包裹在layer外层 */
.layer-footer {
    display:none;
}

table.table-template{
    overflow:hidden;
}
.sp_container .msg-box{
    position: absolute;
    right: 0;
    top: 0;
}
.toast-top-right-index{
    top:62px;
    right:12px;
}

.bootstrap-select .status {
    background: #f0f0f0;
    clear: both;
    color: #999;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    margin-bottom: -5px;
    padding: 10px 20px;
}

.img-center {
    margin:0 auto;
    display: inline;
    float:none;
}

/*
 * RIBBON
 */
#ribbon {
    overflow:hidden;
    padding: 15px 15px 0 15px;
    position: relative;

    a {
        color: #777 !important;
        text-decoration: none !important;
    }
    .breadcrumb {
        display: inline-block;
        margin: 0;
        padding: 0;
        background: none;
        vertical-align: top;
    }

    .breadcrumb > .active,
    .breadcrumb li {
        color: #aaa;
    }
    .shortcut {
        a{
            margin-left:10px;
        }
    }

}

.is-dialog {
    #main {
        background:#fff;
    }

    form label {
        font-weight: normal;
    }
}

.user-panel > .image img{
    width:45px;
    height:45px;
}

/*panel扩展描述样式*/
.panel-intro {
    margin-bottom:0;
    border:none;
    > .panel-heading {
        padding:15px;
        padding-bottom:0;
        background:@panel-intro-bg;
        border-color:@panel-intro-bg;
        position:relative;
        .panel-lead {
            margin-bottom:15px;
            em {
                display: block;
                font-weight: bold;
                font-style:normal;
            }
        }

        .panel-title {
            height:25px;
            font-weight: normal;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .panel-control {
            height: 42px;
            position:absolute;
            top:8px;
            right:8px;
            .fa {
                font-size:14px;
            }
        }
        .nav-tabs {
            border-bottom:0;
            margin-bottom:0;
        }


        .nav-tabs > li > a{
            margin-right:4px;
            color: #95a5a6;
            background-color: darken(@panel-intro-bg, 5%);
            border: 1px solid @panel-intro-bg;
            border-bottom-color: transparent;
        }
        .nav-tabs > li > a:hover, .nav-tabs > li > a:focus{
            border: 1px solid @panel-intro-bg;
            color: #7b8a8b;
            background-color: darken(@panel-intro-bg, 10%);
        }
        .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
            color: #7b8a8b;
            background-color: #ffffff;
            border-bottom-color: transparent;
            cursor: default;
        }
    }
}
/*单表格*/
.panel-tabs {
    .panel-heading {
        padding:12px 15px 12px 15px;
        .panel-lead {
            margin-bottom:0px;
        }
        .panel-title {

        }
    }
}
/*选项卡*/
.panel-nav {

    .panel-heading {
        padding:0px;
        padding-bottom:0;
        background:@main-bg;
        border-color:@main-bg;
    }
    .nav-tabs > li > a{
        padding: 12px 15px;
        background-color: @panel-intro-bg;
        border: 1px solid @main-bg;
    }
    .nav-tabs > li > a:hover, .nav-tabs > li > a:focus{
        border: 1px solid @panel-intro-bg;
        background-color: @panel-intro-bg;
    }
    .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
        border-color: @main-bg;
        border-bottom-color: transparent;
    }
}
/*顶栏addtabs*/
.nav-addtabs{
    &.disable-top-badge {
        > li > a > .pull-right-container{
            display:none;
        }
    }
    border:none;
    > li{
        margin:0;
        > a{
            height:49px;
            line-height:49px;
            padding:0 15px;
            border-radius:0;
            border:none;
            border-right:1px solid rgba(0, 0, 0, 0.05);
            margin:0;
            color:#95a5a6;
            &:hover, &:focus{
                border:none;
                color:#2c3e50;
                border-right:1px solid rgba(0, 0, 0, 0.05);
            }
            i{
                margin-right:3px;
            }
        }
        &.active > a{
            height:49px;line-height:49px;
            padding:0 15px;
            border-radius:0;
            border:none;
            border-right:1px solid rgba(0, 0, 0, 0.05);
            background:#f1f4f6;
            color:#2c3e50;
            overflow:hidden;
            &:hover, &:focus{
                border:none;
                color:#2c3e50;
                border-right:1px solid rgba(0, 0, 0, 0.05);
                background:#f1f4f6;
            }
        }
        .close-tab {
            font-size: 10px;
            position:absolute;
            right: 5px;
            top: 50%;
            margin-top:-7px;
            z-index: 100;
            cursor: hand;
            cursor: pointer;
            color: #fff;
            display:none;
        }
    }
    .open > a{
        &:hover,&:focus{
            border-right:1px solid rgba(0, 0, 0, 0.05);
        }
    }
    ul li {
        position:relative;
    }
    li:hover > .close-tab {
        display:block;
    }
}
.main-sidebar .sidebar-form {
    overflow:visible;
    .menuresult {
        z-index:999;
        position: absolute;
        top:34px;
        left:-1px;
        width:100%;
        max-height:250px;
        overflow:auto;
        margin:0;
        border-top:none;
        border-top-left-radius:0;
        border-top-right-radius:0;
        a {
            border-top:1px solid #eee;
            display: block;
            background-color: #fff;
            border-bottom:1px solid #eee;
            margin-bottom:-1px;
            display:block;
            padding: 10px 15px;
            color:#222d32;
            &:hover{
                background:#eee;
            }
        }
    }
}
.input-group .sp_result_area {
    width:100%;
}
.sidebar-menu{
    &.show-submenu {
        .treeview-menu {
            display: block;
        }
    }
    > li .badge {
        margin-top:0;
    }
}
.sidebar-collapse {
    .user-panel > .image img{
        width:25px;
        height:25px;
    }
}

@media (min-width: 768px){
    .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
        top: 41px;
    }
}

.fieldlist dd {
    display:block;margin:5px 0;
    input{display: inline-block;width:300px;}
    input:first-child{width:110px;}
    ins{width:110px;display: inline-block;text-decoration:none;font-weight: bold;}
}

#treeview {
    .jstree-container-ul .jstree-node{
        display:block;clear:both;
    }
    .jstree-leaf:not(:first-child) {
        float:left;
        background:none;
        margin-left:0;
        width:80px;
        clear:none;
    }
    .jstree-leaf {
        float:left;
        margin-left:0;padding-left:24px;
        width:80px;
        clear:none;
        color:#777;
    }
    .jstree-leaf > .jstree-icon,.jstree-leaf .jstree-themeicon{
        display:none;
    }
    .jstree-last{
        background-image: url("../img/32px.png");
        background-position: -292px -4px;
        background-repeat: repeat-y;
    }
    .jstree-children {
        .clearfix();
    }
    .jstree-themeicon {
        display: none;
    }
}

/*去除bootstrap-table的边框*/
.fixed-table-container {
    border:none!important;
}

/*修复nice-validator和summernote的编辑框冲突*/
.nice-validator .note-editor .note-editing-area .note-editable{
    display:inherit;
}

/*预览区域*/
.plupload-preview {
    padding:10px;
    margin-bottom:0;
    li {
        margin-bottom:10px;
    }
    .thumbnail {
        margin-bottom:10px;
    }
    a{
        display:block;
        &:first-child{
            height:90px;
        }
        img{
            height:80px;
            object-fit: cover;
        }
    }
}

.pjax-loader-bar .progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    background: #77b6ff;
    box-shadow: 0 0 10px rgba(119,182,255,0.7);
    -webkit-transition: width 0.4s ease;
    transition: width 0.4s ease;
}
.dropdown-menu.text-left {
    a,li{
        text-align: left!important;
    }
}
.bootstrap-table .fixed-table-toolbar .dropdown-menu{
    overflow:auto;
}

.bootstrap-table table tbody tr:first-child td .bs-checkbox {
    vertical-align: middle;
}
.bootstrap-table td.bs-checkbox {
    vertical-align: middle;
}
.dropdown-submenu {
    position: relative;
    >.dropdown-menu {
        overflow:auto;
        top: 0;
        left: 100%;
        margin-top: -6px;
        margin-left: -1px;
        .border-radius(0 6px 6px 6px);
    }
    &:hover {
        >.dropdown-menu {
            display: block;
        }
        >a:after {
            border-left-color: #fff;
        }
    }
    >a:after {
        display: block;
        content: " ";
        float: right;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px 0 5px 5px;
        border-left-color: #ccc;
        margin-top: 5px;
        margin-right: -10px;
    }
    &.pull-left {
        float: none;
        >.dropdown-menu {
            left: -100%;
            margin-left: 10px;
            .border-radius(6px 0 6px 6px);
        }
    }
}

/*重写toast的几个背景色*/
.toast-primary {
    background-color: #48c9b0!important;
}
.toast-success {
    background-color: #18bc9c!important;
}
.toast-error {
    background-color: #e74c3c!important;
}
.toast-info {
    background-color: #5dade2!important;
}
.toast-warning {
    background-color: #f1c40f!important;
}
.toast-inverse {
    background-color: #34495e!important;
}
.toast-default {
    background-color: #bdc3c7!important;
}
#toast-container{
    >div, >div:hover{
        .box-shadow(0 0 3px #eee);
    }
}
.layui-layer-fast {

    .layui-layer-title {
        background:#2c3e50!important;
        color:#fff!important;
        border-bottom:none;
        //只有当包含layui-layer-title标题时才显示按钮
        ~.layui-layer-setwin{
            top: 0px;
            height:42px;
            > a{
                height:42px;
                line-height:42px;
                display:inline-block;
            }
        }
    }

    &.layui-layer-border {
        border:none!important;
        box-shadow: 1px 1px 50px rgba(0,0,0,.3)!important;
    }
    &.layui-layer-iframe {
        //overflow:hidden!important;
        overflow:visible;
    }
    .layui-layer-moves{
        .box-sizing(content-box);
    }
    /*自定义底部灰色操作区*/
    .layui-layer-btn {
        text-align: center!important;
        padding: 10px!important;
        background: #ecf0f1;
        overflow:hidden;
        a {
            background-color: #95a5a6!important;
            border-color: #95a5a6!important;
            color:#fff!important;
        }
        .layui-layer-btn0{
            background-color: #18bc9c!important;
            border-color: #18bc9c!important;
        }
    }
    .layui-layer-footer {
        padding:8px 20px;
        background-color:#ecf0f1;
        height:auto;
        text-align:inherit!important;
    }

    .layui-layer-setwin {
        > a {
            background:none!important;
            cite {
                display:none;
            }
            &:after {
                content: "\e625";
                font-family: iconfont;
                font-style: normal;
                font-weight: normal;
                text-decoration: inherit;
                position: absolute;
                font-size: 18px;
                color: #fff;
                margin: 0;
                z-index: 1;
            }
            &:hover {
                text-decoration: none!important;
                background:none!important;
            }
            &:focus {
                text-decoration: none!important;
            }
        }
        .layui-layer-min{
            display:none;
            &:after {
                content: "\e625";
            }
        }
        .layui-layer-max{
            display:none;
            &:after {
                content: "\e623";
            }
        }
        .layui-layer-maxmin{
            display:none;
            &:after {
                content: "\e624";
            }
        }
        .layui-layer-close1{
            &:after {
                content: "\e626";
            }
        }
        //样式二关闭按钮
        .layui-layer-close2,.layui-layer-close2:hover{
            background:url('../libs/layer/build/skin/default/icon.png') no-repeat -149px -31px !important;
            top:-30px;
            right:-30px;
            &:after {
                display:none;
            }
        }
    }
}

@media (min-width: 768px){
    .form-inline .form-control {
        padding-right:20px;
    }
}

/*手机版样式*/
@media (max-width: @screen-phone) {
    .nav-addtabs {
        display:none;
    }
    .fixed-table-toolbar {
        .columns-right.btn-group{
            display:none;
        }
    }
}
/*平板样式*/
@media (max-width: @screen-tablet) {

}

/*修复radio和checkbox样式对齐*/
.radio, .checkbox {
    > label {
        margin-right: 10px;
        > input {
            margin: 2px 0 0;
        }
    }
}