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

/* -- 全局样式 -- */

// 滚动条

::-webkit-scrollbar {
    width: .5rem;
    height: .5rem;
}

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

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

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

// 标签

html {
    transition: font-size @transitionTime;
}

body {
    color: #555;
    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 {
    .limitLine(1);
}

.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 .5rem rgba(0, 0, 0, .1);
}

.shadow-2 {
    box-shadow: 0 .2rem .5rem rgba(0, 0, 0, .05);
}

.shadow-3 {
    box-shadow: 0 .5rem 1rem -.4rem rgba(0, 0, 0, .12);
}

// 载入中（链接列表）

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

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

    .el-loading-text {
        font-size: 1.5rem !important;
    }
}

// Element UI

.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-input {
    input::-webkit-inner-spin-button,
    input::-webkit-outer-spin-button {
        -webkit-appearance: none;
    }

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

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