blob: 522a592461fe8e8f1fd2d48a95532261944481cd (
plain)
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
|
.track {
display: flex;
align-items: center;
gap: 2px;
padding: 3px;
min-width: 0;
border-radius: 10px;
background: var(--color-track);
border: 1px solid var(--color-card-border);
}
.segment {
flex: 1;
min-width: 0;
appearance: none;
border: none;
background: transparent;
color: var(--color-text-secondary);
font-family: inherit;
font-size: 0.8rem;
font-weight: 500;
line-height: 1;
padding: 7px 10px;
border-radius: 8px;
cursor: pointer;
// 档位多时宁可截断文字，也不要把弹层顶出横向滚动条
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition:
background-color 0.15s ease,
color 0.15s ease,
box-shadow 0.15s ease;
&:hover:not(.selected) {
color: var(--color-text);
background: var(--color-hover-soft);
}
&:focus-visible {
outline: 2px solid var(--color-focus-blue);
outline-offset: -1px;
}
}
.selected {
background: var(--color-card);
color: var(--color-text-highlight);
box-shadow: var(--shadow-segment);
}
|
