// 全局样式，最底部修改了el的默认样式，但必须在父元素加上global才行

@media (max-width: 1900px) {
    html {
        font-size: 12px;
    }
}
@media (max-width: 1400px) {
    html {
        font-size: 10px;
    }
}
@media (max-width: 1200px) {
    html {
        font-size: 8px;
    }
}

#app {
    width: 100%;
    height: 100%;
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
}

html,
body {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
    color: #FFF;
    letter-spacing: 0.125rem;
    background-color: #061540;
}

$color-cyan: #93FCFF;
$color-blue: #0984FF;
$color-deep-blue: #1C529D;
$color-green: #00de6b;
$color-red: #E53B4C;
$color-grey: #cccccc;
$txt-color: #eeeeee;

// 背景图片居中
%background-center {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

// flex居中
%flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

// 文字渐变
%txt-gradients {
    text-shadow: 0 0.125rem 0.5rem rgba(78, 97, 214, 0.50);
    // background: linear-gradient(to bottom, #C0D0FF, #ffffff, #A8D4FE);
    // -webkit-background-clip: text;
    // background-clip: text;
    // color: transparent;
    color: #C0D0FF;
}

// position居中
%pos-center{
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
}

// 背景框的位置
%bg-position {
    @extend %pos-center;
    top: 3.125rem;
    width: 98.2%;
    height: 93.5%;
    background-image: url(../assets/img/border-inside.png);
    background-size: 100% 100%;
}

// 按钮样式
%btn-default {
    color: #fff;
    background-color: transparent;
    border-color: $color-cyan;
    font-size: 1rem;
    padding: 0.75rem 1rem;
    letter-spacing: 0.125rem;
    @extend %flex-center;
}
%btn-hover {
    background-color: $color-blue;
}
%btn-active {
    @extend %btn-default;
    background-color: $color-deep-blue;
}

// 默认输入框样式
.global ::v-deep.el-input__inner {
	border: 1px solid $color-cyan;
	background-color: transparent;
	color: #fff;
}

// 默认图表样式
.global ::v-deep.el-table {
	color: $txt-color;
	background-color: transparent;
}
.global ::v-deep.el-table thead {
    color: $txt-color;
}
.global ::v-deep.el-table th {
    font-weight: 200;
    background-color: $color-deep-blue;
    border-bottom: none;
    border-right: 1px solid #000;
    font-size: 1rem;
    padding: 0;
    height: 3.5rem;
}
.global ::v-deep.el-table th:nth-last-child(2),
.global ::v-deep.el-table th:nth-last-child(1) {
    border-right: none;
}
.global ::v-deep.el-table tr {
    background-color: transparent;
}
.global ::v-deep.el-table td {
    font-size: 0.875rem;
    padding: 0;
    height: 3.5rem;
	border-bottom-color: rgba($color: #fff, $alpha: 0.2);
}
.global ::v-deep.el-table--border::after, .el-table--group::after, .el-table::before{
    background-color: transparent;
}
.global ::v-deep.el-table tbody tr:hover > td {
	background-color: $color-deep-blue;
}
// 表头和内容不对齐
.global ::v-deep.el-table th.gutter{
  display: table-cell !important;
}

// 默认分页样式
.global ::v-deep.btn-prev,
.global ::v-deep.btn-next,
.global ::v-deep.el-pager li,
.global ::v-deep.el-pager li.btn-quicknext,
.global ::v-deep.el-pager li.btn-quickprev {
    color: #fff;
    background-color: transparent;
}
.global ::v-deep.el-pager li.active{
    color: $color-blue;
}
.global ::v-deep.el-pager li:hover{
    color: $color-blue;
}

// 默认弹框样式
.global ::v-deep.el-dialog {
    background-color: rgba(10, 23, 55, 1);
    border: 1px solid rgba(9, 77, 148, 0.5);
}
.global ::v-deep.el-dialog__title {
    color: #fff;
}