/**
 * Copyright 2019 Han Guoshuai <zohegs@gmail.com>
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* --- sass --watch sources:dist --style compressed --- */

@import url(iconfont/iconfont.css);

/* --- 基础 --- */
html, body {
    margin: 0;
}
html, body, #el-frame, #el-frame > .el-container {
    height: 100%;
}
html, body, input, textarea {
    font-family: PingFangSC-Light,PingFang SC,Helvetica,Tahoma,Arial,Microsoft YaHei,Hiragino Sans GB,WenQuanYi Micro Hei,sans-serif;
    font-size: 14px;
    line-height: 1.5;
    font-variant: tabular-nums;
}
a {
    color: #409EFF;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
pre {
    margin: 0;
}
code {
    box-sizing: border-box;
}
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
::selection {
    background-color: rgba(64, 158, 255, 0.4);
}

#el-resource {
    position: absolute; left: -50000; top: -50000;
}

/* --- 优化 --- */
.el-aside {
    -webkit-user-select: none;
    user-select: none;
    span {
        line-height: 1;
    }
}
.el-menu-item, .el-submenu__title {
    height: initial !important;  // --- 解决左边栏每一个 item 高度上面空白大于下面空白的问题 ---
}
[class^="el-icon-"], [class*=" el-icon-"] {
    font-family: "element-icons", "d-iconfont" !important;  // --- 加载 DeskRT 的图标库 ---
}

@media(max-width: 780px) {
    // --- 解决在 iOS 等老环境下，弹出窗体不能居中的情况 ---
    .el-message-box__wrapper {
        right: inherit;
        bottom: inherit;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    // --- 手机模式下宽度舒张 ---
    .el-message-box, .el-dialog {
        width: 85%;
    }
}
 
/* --- 页面 --- */
.el-page {
    display: none;
    flex: 1;
}
.el-page.el--show {
    display: flex;
    flex-direction: column;
}

/* --- 框架 --- */
#el-aside-mask {
    display: none;
    background: rgba(0,0,0,.7);
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    &.el--show {
        display: block;
    }
}
#el-frame > .el-container > {
    // --- 左边栏 ---
    .el-aside {
        display: flex;
        flex-direction: column;
        > {
            .el-logo {
                background-color: #24292e;
                height: 60px;
                background-image: url(logo.png);
                background-size: 150px 20px;
                background-position: center;
                background-repeat: no-repeat;
            }
            // --- 左边菜单 ---
            .el-menu {
                flex: 1;
                overflow-y: auto;
                overflow-x: hidden;
                -webkit-overflow-scrolling: touch;
                &::-webkit-scrollbar {
                    display: none;
                }
            }
        }
    }
    // --- 右 ---
    .el-container > {
        .el-header {
            display: flex;
            justify-content: flex-end;
            box-shadow: 0 2px 10px 0 rgba(0,0,0,.1);
            padding: 0;
            z-index: 10;
            .el-header-item {
                padding: 0 20px;
                height: 100%;
                display: flex;
                align-items: center;
                cursor: pointer;
                &:hover {
                    color: #409EFF;
                }
            }
            .el-header-left {
                flex: 1;
                display: none;
                font-size: 24px;
            }
        }
        .el-main {
            -webkit-overflow-scrolling: touch;
        }
    }
}
@media(max-width: 780px) {
    /* --- 框架 --- */
    #el-frame > .el-container > {
        // --- 左边栏 ---
        .el-aside {
            position: fixed;
            left: 0;
            top: 0;
            height: 100%;
            z-index: 10001;
            display: none;
            box-shadow: 3px 0 15px rgba(0, 0, 0, .2);
            &.el--show {
                display: flex;
            }
        }
        // --- 右 ---
        .el-container > {
            .el-header {
                .el-header-left {
                    display: flex;
                }
            }
        }
    }
}

/* --- 控件 开始 --- */

/* --- 信息表格 --- */
.el-table-info {
    border: solid 1px #ebeef5;
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    th, td {
        padding: 12px;
    }
    th {
        color: #909399; background-color: #f5f7fa;
    }
    tr:hover > td {
        background-color: #f5f7fa;
    }
    > tbody > tr:not(:last-child) {
        border-bottom: solid 1px #ebeef5;
    }
}

/* --- center --- */
.el-center{margin-top: 20px; text-align: center;}

/* --- tip --- */
.el-tip{background-color: #ecf8ff; border-left: 5px solid #50bfff; padding: 8px 16px; border-radius: 4px; margin-bottom: 20px;}

/* --- exp --- */
.el-exp{margin-top: 10px; font-size: 12px; color: rgba(0, 0, 0, 0.45); line-height: 18px;}

/* --- pictureswall --- */
.el-pictureswall .el-upload-list--picture-card .el-upload-list__item{width: 88px; height: 88px;}
.el-pictureswall .el-upload--picture-card{width: 88px; height: 88px; line-height: 95px;}

/* --- 手机样式 --- */
.el-phone{width: 360px; background: #111; border-radius: 55px; box-shadow: 0px 0px 0px 2px #aaa; padding: 105px 20px; position: relative;box-sizing: border-box; font-size: 12px;}
.el-phone:before{content: '';width: 60px;height: 10px;border-radius: 10px;position: absolute;left: 50%;margin-left: -30px;background: #333;top: 50px;}
.el-phone:after{content: '';position: absolute;width: 60px;height: 60px;left: 50%;margin-left: -30px;bottom: 20px;border-radius: 100%;box-sizing: border-box;border: 5px solid #333;}
.el-phone--inner{background-color: #FFF; min-height: 500px; box-sizing: border-box; line-height: 1.5;}

.el-phone-line{display: flex; border: solid 1px transparent; margin-bottom: 10px; position: relative; min-height: 42px; align-items: center;}
.el-phone-line:hover{border-color: #409EFF;}
.el-phone-line > *:not(.el-button-group){width:0;min-width:0;position: relative;min-height:10px;}
.el-phone-line > *:not(.el-button-group):hover:before{position: absolute; width:calc(100% + 6px); height:calc(100% + 6px); left:-3px; top:-3px;content:''; background-color: rgba(230, 162, 60, .3); z-index: 1999;}
.el-phone-line > .el-button-group{display:none; position: absolute; right:-1px; bottom:100%; z-index: 1999;}
.el-phone-line:hover > .el-button-group{display:block;}

/* --- DataButton --- */
.el-data-button-group{display: flex; padding: 25px 10px; box-sizing: border-box;}
.el-data-button-group.el--delimiter > :not(:last-child){border-right: solid 1px #ebeef5;}
.el-data-button{display: flex; flex-direction: column; flex: 1; padding: 0 5px;}
.el-data-button > :first-child{font-size: 20px; text-align: center;}
.el-data-button > :first-child:hover{color: #409EFF; text-decoration: none;}
.el-data-button > :last-child{text-align: center;}

/* --- TileButton 磁铁按钮 --- */
.el-tile-button {
    padding: 20px;
    display: block;
    color: #606266;
    display: flex;
    // --- 鼠标放置屏蔽可能出现的底线 ---
    &:hover {
        text-decoration: none;
    }
    // --- 图标 ---
    .el-tile-button__icon {
        margin-right: 10px;
        display: flex;
        align-items: center;
        font-size: 26px;
    }
    // --- 主体 ---
    .el-tile-button__body {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        > {
            :first-child {
                font-size: 16px;
                font-weight: bold;
            }
        }
    }
    // --- 有底色的情况 ---
    &.el--background {
        color: #FFF;
        &:hover {
            opacity: .9;
        }
    }
    // --- 没有底色的情况 ---
    &:not(.el--background) {
        &:hover {
            background-color: rgba(0, 0, 0, .05);
        }
        .el-tile-button__body > {
            :last-child {
                color: #999;
            }
        }
    }
    // --- 没有图标的情况下 ---
    &:not(.el--icon) {
        .el-tile-button__body > {
            :first-child, :last-child {
                text-align: center;
            }
        }
    }
}

/* --- Resp --- */
.el-resp {
    display: flex;
    > * {
        flex: 1;
    }
}
@media(max-width: 780px) {
    .el-resp {
        flex-direction: column;
        > * {
            flex: initial !important;
        }
    }
}

.el-resp-row {
    display: flex;
    > * {
        flex: 1;
    }
}