File size: 1,924 Bytes
dc9e27a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
@import './var.less';

// 单行省略
.singleLine() {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

// 多行文本省略
.ellispsis(@line) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    -webkit-line-clamp: @line;
}

// 自定义滚动条
.custom-scroll(@bg: transparent, @thumbBg: var(--grey-4)) {
    &::-webkit-scrollbar {
        width: 4px;
        background: @bg;
        height: 0px;
    }
    &::-webkit-scrollbar-thumb {
        border-radius: 20px;
        background: @bg;
    }
    &::-webkit-scrollbar-track {
        border-radius: 20px;
        background: @bg;
        opacity: 0;
    }
    &:hover::-webkit-scrollbar-thumb {
        background: @thumbBg;
    }
}

.common-button(@hoverBgColor:var( --blue-3),@bgColor:var(--theme-color),@radius:8px,@color:var(--white-95)) {
    border-radius: @radius;
    background-color: @bgColor;
    display: flex;
    align-items: center;
    justify-content: center;
    color: @color;

    &:hover {
        background-color: @hoverBgColor;
        cursor: pointer;
    }
}

.diyScroll(@bg: var(--white), @thumbBg: @thumbGrey,@width:@scrollWidth) {
    &::-webkit-scrollbar {
        width: @width;
        background: @bg;
    }
    &::-webkit-scrollbar-thumb {
        border-radius: 90px;
        background: @bg;
    }
    &::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 4px @bg;
        border-radius: 90px;
        background: @bg;
        opacity: 0;
    }
    &:hover::-webkit-scrollbar-thumb {
        background: @thumbBg;
    }
}

.cursorBlink() {
    &::after {
        content: '';
        border: 1px solid var(--black);
        margin-left: 0px;
        flex: 1;
        -webkit-animation:
            typing 3s steps(16) forwards,
            cursor 1s infinite;
    }
}