frost-navigation/src/assets/css/global.less

// 全局样式

// 滚动条

::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    border-radius: 1rem;
    background-color: #DFDFDF;

    &:hover {
        background-color: #CCCCCC;
    }
}

// 选中文本

::selection {
    background-color: @colorPrimary;
    color: #FFF;
}

// 标签

html {
    transition: font-size calc(@transitionTime * 2);
}

body {
    color: @textPrimary;
    overflow: hidden;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

// 限制长度

.limitLine(@line) {
    display: -webkit-box;
    -webkit-line-clamp: @line;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.limit-line-1 {
    overflow: hidden;
    text-overflow: ellipsis
}

.limit-line-2 {
    .limitLine(2);
}

.limit-line-3 {
    .limitLine(3);
}

// 背景居中

.bgCenter() {
    background-position: center;
    background-repeat: no-repeat;
}

.bg-center-contain {
    .bgCenter();
    background-size: contain;
}

.bg-center-cover {
    .bgCenter();
    background-size: cover;
}

// 阴影

.shadow-1 {
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
}

.shadow-2 {
    box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.05);
}

.shadow-3 {
    box-shadow: 0 0.5rem 1rem -0.4rem rgba(0, 0, 0, 0.12);
}

// 载入中（链接列表）

.loading-link {
    background-color: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(0.2rem);

    .el-loading-spinner {
        transform: translateY(-50%);
    }

    .el-icon-loading {
        font-size: 2rem !important;
    }

    .el-loading-text {
        margin: 0.5rem 0;
        font-size: 1.25rem !important;
    }
}

// Element UI

.el-checkbox {
    font-weight: inherit;
}

.el-drawer.drawer-full {
    .el-drawer__header {
        z-index: 500;
        margin: 0 !important;
        padding: 1rem 1.5rem !important;
        background-color: @colorPrimary;
        color: #FFF;
        .shadow-3;
    }

    .el-drawer__body {
        padding: 2rem;
        overflow-y: auto;
    }
}

.el-form-item {
    margin-bottom: 0.5rem;
}

.el-input {
    input::-webkit-inner-spin-button,
    input::-webkit-outer-spin-button {
        -webkit-appearance: none;
    }

    input[type="number"] {
        -moz-appearance: textfield;
    }
}

.el-link {
    font-size: inherit;
    font-weight: inherit;
}

.el-menu-item {
    .fa {
        margin-right: 0.3125rem;
        width: 1.5rem;
        text-align: center;
        font-size: 1.125rem;
        vertical-align: middle;
    }
}

.el-message {
    width: 80%;
    min-width: 16rem;
    max-width: 25rem;
    .shadow-2;

    &.el-message--info {
        background-color: #FFF;
    }
}

.el-message-box {
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 90%;
    min-width: 16rem;
    max-width: 25rem;
    transform: translate(-50%, -50%);
}

.el-select-dropdown {
    border: none !important;
}

.el-switch {
    .el-switch__core {
        width: 2.5rem !important;
    }
}